:root{
  --bg:#11141C;
  --panel:rgba(255,255,255,.05);
  --stroke:rgba(255,255,255,.12);
  --text:#F4F1E6;
  --muted:rgba(244,241,230,.72);

  --cyan:#7BC8C2;
  --coral:#E7A8A8;
  --acid:#F2D06B;
  --purple:#A78BFA;
  --pink:#F472B6;
  --orange:#FB923C;

  --r:18px;
  --shadow:0 20px 60px rgba(5,8,12,.55);

  --h:"Fraunces", "Times New Roman", serif;
  --ui:"Newsreader", "Georgia", serif;
  --mono:"IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  --fs0:12px;
  --fs1:14px;
  --fs2:16px;
  --fs3:20px;
  --fs4:28px;
  --fs5:44px;
}

:root[data-theme="poster-light"]{
  --bg:#F6F1E6;
  --panel:rgba(0,0,0,.05);
  --stroke:rgba(30,28,22,.14);
  --text:#1A1712;
  --muted:rgba(26,23,18,.68);
  --shadow:0 20px 60px rgba(20,16,12,.18);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--ui);
  color:var(--text);
  background:
    radial-gradient(820px 420px at 15% 10%, color-mix(in oklab, var(--cyan) 20%, transparent), transparent 60%),
    radial-gradient(620px 360px at 85% 78%, color-mix(in oklab, var(--coral) 18%, transparent), transparent 65%),
    linear-gradient(180deg, color-mix(in oklab, var(--text) 8%, transparent), transparent 30%),
    linear-gradient(180deg, var(--bg), color-mix(in oklab, var(--bg) 80%, #000));
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background: repeating-linear-gradient(
    180deg,
    color-mix(in oklab, var(--text) 10%, transparent) 0px,
    color-mix(in oklab, var(--text) 10%, transparent) 1px,
    transparent 2px,
    transparent 6px
  );
  mix-blend-mode: overlay;
  opacity:.22;
}

body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 15% 20%, color-mix(in oklab, var(--text) 16%, transparent) 1px, transparent 1px) 0 0/10px 10px,
    radial-gradient(circle at 90% 80%, color-mix(in oklab, var(--text) 12%, transparent) 1px, transparent 1px) 0 0/12px 12px;
  mask: radial-gradient(closest-side at 15% 20%, #000 0%, transparent 70%),
        radial-gradient(closest-side at 90% 80%, #000 0%, transparent 70%);
  opacity:.30;
}

a{ color:inherit; text-decoration:none; }
button, input{ font:inherit; color:inherit; }

.shell{
  min-height:100%;
  display:grid;
  grid-template-rows: 64px 1fr 64px;
}

.topbar{
  display:flex;
  align-items:center;
  gap:14px;
  padding: 10px 14px;
  border-bottom:1px solid var(--stroke);
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  position:sticky;
  top:0;
  z-index:10;
}

.brand{
  display:flex;
  align-items:baseline;
  gap:10px;
  min-width: 240px;
}
.brand .mark{
  width:22px; height:22px;
  border:1px solid var(--stroke);
  border-radius:6px;
  display:grid;
  place-items:center;
  font-family:var(--h);
  letter-spacing:.08em;
  background: color-mix(in oklab, var(--panel) 80%, transparent);
}
.brand .name{
  font-family:var(--h);
  font-size:22px;
  letter-spacing:.06em;
  line-height:1;
  font-weight:700;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.brand .mode{
  font-family:var(--mono);
  font-size:12px;
  color:var(--muted);
}

.cmd{
  margin-left:auto;
  display:flex;
  gap:10px;
  align-items:center;
}
.kbd{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 8px 10px;
  border:1px solid var(--stroke);
  border-radius: 12px;
  background: color-mix(in oklab, var(--panel) 92%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--text) 10%, transparent);
}
.kbd input{
  width: 320px;
  background: transparent;
  border:0;
  outline:none;
  font-family:var(--mono);
  font-size: 13px;
}
.pill{
  border:1px solid var(--stroke);
  border-radius: 999px;
  padding: 8px 12px;
  background: transparent;
  cursor:pointer;
}
.pill.primary{
  border-color: color-mix(in oklab, var(--cyan) 70%, var(--stroke));
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--cyan) 15%, transparent) inset;
}
.pill:active{ transform: translateY(1px); }
.pill:hover{ background: color-mix(in oklab, var(--panel) 80%, transparent); }

.main{
  width:min(1180px, calc(100% - 28px));
  margin: 18px auto 22px;
  display:grid;
  gap:14px;
}

.grid2{
  display:grid;
  gap:14px;
  grid-template-columns: 1.1fr .9fr;
}
@media (max-width: 980px){
  .grid2{ grid-template-columns: 1fr; }
  .brand{ min-width: unset; }
  .kbd input{ width: 200px; }
}

.panel{
  border:1px solid var(--stroke);
  border-radius: var(--r);
  background: color-mix(in oklab, var(--panel) 96%, transparent);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.panel .hd{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  padding: 14px 16px;
  border-bottom:1px solid var(--stroke);
  background: linear-gradient(180deg, color-mix(in oklab, var(--panel) 98%, transparent), transparent);
}
.hd .t{
  font-family:var(--h);
  letter-spacing:.05em;
  font-size: 21px;
}
.hd .s{
  font-family:var(--mono);
  color:var(--muted);
  font-size: 12px;
}

.panel .bd{ padding: 16px; }

.bigline{
  font-family:var(--h);
  letter-spacing:.04em;
  font-size: var(--fs5);
  line-height: .95;
  background: linear-gradient(135deg, var(--purple) 0%, var(--pink) 50%, var(--orange) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.subline{
  margin-top: 8px;
  font-size: var(--fs2);
  color: var(--muted);
  max-width: 66ch;
}

.div{ height:1px; background: var(--stroke); margin: 14px 0; }

.tape{
  display:flex;
  gap:10px;
  overflow:auto;
  padding-bottom: 6px;
}
.stage{
  flex: 0 0 auto;
  min-width: 190px;
  border:1px solid var(--stroke);
  border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in oklab, var(--panel) 94%, transparent), color-mix(in oklab, var(--panel) 90%, var(--pink) 6%, transparent));
  padding: 14px;
  cursor:pointer;
  position:relative;
  transition: all .25s ease;
}
.stage:hover{
  border-color: color-mix(in oklab, var(--purple) 50%, var(--stroke));
  background: linear-gradient(135deg, color-mix(in oklab, var(--panel) 96%, transparent), color-mix(in oklab, var(--panel) 92%, var(--pink) 10%, transparent));
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(167, 139, 250, 0.15);
}
.stage .k{ font-family:var(--mono); font-size: 11px; color: var(--muted); }
.stage .n{ font-family:var(--h); letter-spacing:.10em; font-size: 18px; margin-top: 6px; }
.stage .p{ margin-top: 8px; font-size: 13px; color: var(--muted); line-height:1.35; }
.stage .pin{
  position:absolute;
  right:10px; top:10px;
  width:10px; height:10px;
  border-radius: 2px;
  background: transparent;
  border:1px solid var(--stroke);
}
.stage[data-pinned="true"] .pin{
  background: var(--acid);
  border-color: color-mix(in oklab, var(--acid) 70%, var(--stroke));
}

.stack{ display:grid; gap:10px; }
.card{
  border:1px solid var(--stroke);
  border-radius: 14px;
  padding: 16px;
  background: linear-gradient(135deg, color-mix(in oklab, var(--panel) 96%, transparent) 0%, color-mix(in oklab, var(--panel) 92%, var(--purple) 8%, transparent) 100%);
  backdrop-filter: blur(8px);
  transition: all .3s ease;
}
.card:hover{
  border-color: color-mix(in oklab, var(--purple) 40%, var(--stroke));
  background: linear-gradient(135deg, color-mix(in oklab, var(--panel) 98%, transparent) 0%, color-mix(in oklab, var(--panel) 94%, var(--purple) 12%, transparent) 100%);
}
.card .h{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.card .h .title{
  font-family:var(--h);
  letter-spacing:.05em;
  font-size: 18px;
}
.card .h .tag{
  font-family:var(--mono);
  font-size: 11px;
  color: var(--muted);
}
.card .txt{
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted);
  line-height:1.5;
  white-space:normal;
}
.card .txt.mono{
  font-family:var(--mono);
  font-size: 12px;
  white-space:pre-wrap;
  color: color-mix(in oklab, var(--muted) 90%, var(--text));
}
.prose p{
  margin: 0 0 12px;
}
.prose p:last-child{ margin-bottom: 0; }

.choiceRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 12px;
}
.choice{
  border:1px solid var(--stroke);
  border-radius: 10px;
  padding: 10px 14px;
  background: transparent;
  cursor:pointer;
  font-family:var(--mono);
  font-size: 12px;
  transition: all .2s ease;
  font-weight:500;
}
.choice:hover{
  border-color: color-mix(in oklab, var(--purple) 70%, var(--stroke));
  background: color-mix(in oklab, var(--purple) 12%, transparent);
  box-shadow: 0 0 0 8px color-mix(in oklab, var(--purple) 8%, transparent);
  transform: translateY(-1px);
}
.choice:active{
  transform: translateY(0);
}

.nav{
  display:flex;
  justify-content:space-around;
  align-items:center;
  border-top:1px solid var(--stroke);
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  position:sticky;
  bottom:0;
}
.nav a{
  flex:1;
  text-align:center;
  padding: 12px 8px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing:.03em;
}
.nav a.active{ color: var(--text); }
.nav a.active .dot{
  background: var(--cyan);
  border-color: color-mix(in oklab, var(--cyan) 70%, var(--stroke));
}
.dot{
  width:8px; height:8px;
  border-radius:2px;
  border:1px solid var(--stroke);
  display:inline-block;
  margin-right: 8px;
  vertical-align: middle;
}

@keyframes wipeIn{
  from{ clip-path: inset(0 100% 0 0); opacity:0; }
  to{ clip-path: inset(0 0 0 0); opacity:1; }
}
@keyframes snapIn{
  0%{ transform: translateY(10px); opacity:0; }
  70%{ transform: translateY(-2px); opacity:1; }
  100%{ transform: translateY(0); }
}
.wipe{ animation: wipeIn .36s ease-out both; }
.snap{ animation: snapIn .38s cubic-bezier(.2,.9,.2,1) both; }

.small{ font-family:var(--mono); font-size:12px; color: var(--muted); }

.deck{
  display:grid;
  gap: 12px;
}
.slide{
  border:1px solid var(--stroke);
  border-radius: 16px;
  padding: 14px 16px;
  background: color-mix(in oklab, var(--panel) 96%, transparent);
}
.slide .title{
  font-family:var(--h);
  letter-spacing:.04em;
  font-size: 20px;
}
.slide .body{
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.6;
}

.flow{
  display:grid;
  gap: 10px;
}
.flow-step{
  border:1px solid var(--stroke);
  border-radius: 14px;
  padding: 12px 14px;
  background: color-mix(in oklab, var(--panel) 95%, transparent);
  position:relative;
}
.flow-step::before{
  content:"";
  position:absolute;
  left: -10px;
  top: 18px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--acid);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--acid) 20%, transparent);
}
.flow-step + .flow-step{
  margin-left: 12px;
}
.flow-step .title{
  font-family:var(--h);
  letter-spacing:.04em;
  font-size: 17px;
}
.flow-step .body{
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.6;
}

.story{
  border:1px solid var(--stroke);
  border-radius: 16px;
  padding: 14px 16px;
  background: color-mix(in oklab, var(--panel) 96%, transparent);
}
.story .title{
  font-family:var(--h);
  letter-spacing:.04em;
  font-size: 20px;
}
.story .body{
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.6;
}