:root{
  --ink:#0D0D0D;--paper:#F4F1EA;--acid:#E4FF3A;--orange:#FF5A1F;--blue:#2B50FF;--green:#14C27A;
  --violet:#7A3CFF;--pink:#FF4FA3;--teal:#00A6B4;--amber:#FFB000;
  --snyp:#204D46;--snyp-deep:#12302B;--cream:#FFFCED;--mint:#CDE7D0;
  --disp:"Bricolage Grotesque",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;
  --bg:var(--ink);--fg:#fff;--hi:var(--acid);--card:#fff;--card-fg:var(--ink);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#000;overflow:hidden}
body{font-family:var(--disp);-webkit-font-smoothing:antialiased}
.slide{position:fixed;inset:0;display:none;flex-direction:column;justify-content:center;
  padding:clamp(24px,6vw,96px) clamp(22px,7vw,110px) clamp(70px,9vh,96px);
  background:var(--bg);color:var(--fg);overflow-y:auto}
.slide.active{display:flex}
.kicker{font-family:var(--mono);font-size:clamp(11px,1.15vw,15px);letter-spacing:.12em;text-transform:uppercase;opacity:.85;margin:0 0 18px}
h1,h2{font-weight:800;letter-spacing:-.045em;line-height:.95;margin:0 0 .35em;max-width:16ch}
h1{font-size:clamp(44px,7.4vw,120px)}
h2{font-size:clamp(36px,5.4vw,86px)}
h2.small{font-size:clamp(30px,3.9vw,60px);max-width:22ch}
.hi{color:var(--hi)}
.lede{font-size:clamp(18px,1.9vw,27px);font-weight:600;line-height:1.3;max-width:36ch;margin:0 0 .8em;opacity:.92}
p.body{font-size:clamp(16px,1.5vw,21px);font-weight:600;line-height:1.4;max-width:46ch;margin:.4em 0;opacity:.9}
.num{position:absolute;top:-2vw;right:3vw;font-weight:800;font-size:clamp(140px,24vw,360px);line-height:1;
  color:transparent;-webkit-text-stroke:3px var(--fg);opacity:.25;pointer-events:none;letter-spacing:-.05em}
.grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(20px,4vw,64px);align-items:center}
.grid.top{align-items:start}
.stack>*+*{margin-top:14px}

/* reveal */
[data-in]{opacity:0;transition:opacity .35s ease;pointer-events:none}
[data-in].shown{opacity:1;pointer-events:auto}
[data-out].gone{display:none}
.lit{outline:3px solid var(--hi);outline-offset:4px}

/* prompt box */
.prompt{background:var(--card);color:var(--card-fg);border-radius:20px;padding:18px 20px 16px;
  box-shadow:0 18px 40px rgba(0,0,0,.25);max-width:760px;position:relative}
.prompt .who{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.55}
.prompt .txt{font-family:var(--mono);font-size:clamp(14px,1.35vw,19px);line-height:1.5;margin:8px 0 10px;min-height:1.5em;white-space:pre-wrap}
.prompt .txt.typing::after{content:"";display:inline-block;width:.55em;height:1.05em;background:currentColor;vertical-align:-2px;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.copy{font-family:var(--mono);font-size:12px;letter-spacing:.06em;border:1.5px solid currentColor;background:transparent;color:inherit;
  border-radius:999px;padding:6px 12px;cursor:pointer}
.copy:hover{background:rgba(0,0,0,.06)}
.term{background:#111;color:#E6E6E6;border-radius:14px;padding:16px 18px;max-width:760px;font-family:var(--mono)}
.term .who{font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.6}
.term code{display:block;font-size:clamp(13px,1.25vw,17px);margin:8px 0 10px;color:var(--acid);word-break:break-all}
.term .copy{color:#E6E6E6}
.check{font-family:var(--mono);font-size:clamp(12px,1.1vw,15px);line-height:1.5;margin-top:16px;max-width:60ch}
.check::before{content:"✓ ";color:var(--hi);font-weight:600}
.note{font-family:var(--mono);font-size:clamp(11px,1vw,14px);line-height:1.5;opacity:.75;margin-top:12px;max-width:62ch}
.tag{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;background:var(--hi);color:var(--bg);margin-bottom:10px}

/* steps list */
ol.steps{list-style:none;padding:0;margin:0;counter-reset:s;max-width:640px}
ol.steps li{counter-increment:s;position:relative;padding:0 0 18px 52px;font-size:clamp(16px,1.5vw,21px);font-weight:600;line-height:1.35}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:34px;height:34px;border-radius:50%;
  background:var(--hi);color:var(--ink);font-family:var(--mono);font-size:15px;display:grid;place-items:center}
ol.steps li small{display:block;font-family:var(--mono);font-weight:400;font-size:.72em;opacity:.75;margin-top:4px}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;max-width:1100px}
.card{background:var(--card);color:var(--card-fg);border-radius:16px;padding:16px 18px}
.card b{display:block;font-size:clamp(17px,1.5vw,21px);margin-bottom:6px;letter-spacing:-.01em}
.card span{font-family:var(--mono);font-size:13px;line-height:1.45;opacity:.75}

/* phone */
.phone{height:min(62vh,540px);aspect-ratio:10/16;background:#000;border-radius:44px;padding:12px;box-shadow:0 30px 60px rgba(0,0,0,.35);justify-self:center}
.phone .scr{height:100%;background:#F6F6F4;border-radius:34px;padding:44px 14px 14px;display:flex;flex-direction:column;gap:9px;overflow:hidden;color:#111}
.phone .bar{font-family:var(--mono);font-size:11px;opacity:.55;text-align:center;margin:-26px 0 6px}
.msg{font-size:13px;line-height:1.3;padding:8px 11px;border-radius:16px;max-width:88%;font-weight:600}
.msg.you{align-self:flex-end;background:#111;color:#fff;border-bottom-right-radius:5px}
.msg.cl{align-self:flex-start;background:#fff;border:1px solid #ddd;border-bottom-left-radius:5px}
.msg.file{align-self:flex-start;background:var(--mint);color:var(--snyp-deep)}
.msg.mic{background:var(--hi);color:var(--ink)}

/* rig */
.rig{display:flex;align-items:center;gap:0;max-width:1100px;margin-top:8px}
.node{border:3px solid currentColor;border-radius:18px;padding:16px 18px;min-width:170px;opacity:.45;transition:opacity .3s}
.node b{display:block;font-size:clamp(18px,1.8vw,26px)}
.node span{font-family:var(--mono);font-size:12px;opacity:.8}
.node.on{opacity:1;border-color:var(--hi)}
.wire{flex:1;height:0;border-top:3px dashed currentColor;opacity:.4;min-width:30px;position:relative}
.wire span{position:absolute;top:-26px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:12px;white-space:nowrap}
.wire.on{opacity:1;border-color:var(--hi)}

video.film{height:min(68vh,620px);aspect-ratio:9/16;border-radius:22px;background:#000;justify-self:center;box-shadow:0 30px 60px rgba(0,0,0,.35)}

/* chrome */
.chrome{position:fixed;left:0;right:0;bottom:0;padding:14px clamp(22px,7vw,110px);display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;z-index:5;pointer-events:none;color:var(--chrome,#fff);background:var(--chrome-bg,transparent)}
.chrome .bar{position:absolute;left:0;bottom:0;height:4px;background:var(--chrome-hi,var(--acid));transition:width .3s}
.chrome .hint{opacity:.7}
.chrome .nav{pointer-events:auto;display:flex;gap:8px}
.chrome button{font:inherit;color:inherit;background:transparent;border:1.5px solid currentColor;border-radius:999px;padding:7px 14px;cursor:pointer}

@media (max-width:820px){
  .grid{grid-template-columns:1fr}
  .num{font-size:140px;top:0;right:12px}
  .slide{justify-content:flex-start;padding-top:56px;padding-bottom:96px}
  video.film{height:52vh}
  .phone{height:auto;width:min(250px,66vw)}
  .rig{flex-direction:column;align-items:stretch}
  .wire{border-top:0;border-left:3px dashed currentColor;height:34px;min-width:0;margin-left:30px;flex:none}
  .wire span{top:8px;left:18px;transform:none}
}
@media (prefers-reduced-motion:reduce){[data-in]{transition:none}.prompt .txt.typing::after{animation:none}}