/* Element rules are prefixed with `html` so they outrank the site's global element styles (src/index.css) regardless of load order. */
/* Layout: one pinned scroll film. Room (Ajay at his laptop) → camera flies into the screen → a project plays out on "ajay.os" → camera pulls back out. Then journey, offers, learning, contact. */
:root{
  --paper:#080d19;--paper-2:#101b2f;--line:#8daff7;--ink:#eaf0fa;--muted:#9aaccc;
  --signal:#67e8f9;--violet:#b7a4ff;--mint:#6ee7b7;--on-accent:#08111f;
  --grid:rgba(139,173,221,.05);--grid-strong:rgba(139,173,221,.17);
  --wall:#111b31;--desk:#070d18;--desk-top:#18263d;
  --device:#050913;--device-edge:#2b3953;--scr:#0b1324;--scr-2:#131f35;--scr-3:#1d2a43;--scr-ink:#eaf0fa;--scr-muted:#94a7c4;
  --ok:#6ee7b7;--code-k:#b7a4ff;--code-s:#6ee7b7;--code-b:#67e8f9;
  --f-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --f-body:"Instrument Sans","Segoe UI",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --nav-h:58px;
  --tint-1:#0e1f33;--tint-2:#1c1834;--tint-3:#102722;--tint-4:#151e34;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --paper:#f4f7fd;--paper-2:#ffffff;--line:#2564a9;--ink:#111b2d;--muted:#52617a;
    --signal:#007a91;--violet:#6d46c7;--mint:#087d58;--ok:#087d58;--on-accent:#ffffff;
    --grid:rgba(35,85,125,.05);--grid-strong:rgba(35,85,125,.17);
    --wall:#e7eef9;--desk:#cad7e8;--desk-top:#e3ebf6;--device-edge:#9aaac4;
    --tint-1:#e6f3f8;--tint-2:#eee9fb;--tint-3:#e4f4ef;--tint-4:#e9eef9;color-scheme:light;
  }
}
:root[data-theme="light"]{
    --paper:#f4f7fd;--paper-2:#ffffff;--line:#2564a9;--ink:#111b2d;--muted:#52617a;
    --signal:#007a91;--violet:#6d46c7;--mint:#087d58;--ok:#087d58;--on-accent:#ffffff;
    --grid:rgba(35,85,125,.05);--grid-strong:rgba(35,85,125,.17);
    --wall:#e7eef9;--desk:#cad7e8;--desk-top:#e3ebf6;--device-edge:#9aaac4;
    --tint-1:#e6f3f8;--tint-2:#eee9fb;--tint-3:#e4f4ef;--tint-4:#e9eef9;color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
html body{background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:28px 28px;
  color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.6;padding-inline:20px;overflow-x:clip}
html a{color:inherit}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:4px}
.wrap{width:min(1296px,calc(100% - 48px));max-width:1296px;margin-inline:auto}@media(max-width:640px){.wrap{width:calc(100% - 32px)}}
.label{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--line)}
html h1,html h2,html h3{color:inherit;font-weight:700;letter-spacing:normal;font-family:var(--f-display);text-wrap:balance;margin:0;line-height:1.02}
html h2{font-size:clamp(34px,5.4vw,64px);font-weight:800;letter-spacing:-.03em}
html h3{font-size:22px;font-weight:600}
html p{margin:0}
.btn{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--f-body);padding:14px 20px;border-radius:999px;text-decoration:none;border:1.5px solid var(--signal);color:var(--on-accent);background:var(--signal);cursor:pointer;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.small{padding:10px 14px;font-size:14px}

html nav{position:sticky;isolation:isolate;top:env(safe-area-inset-top,0px);z-index:50;margin-inline:-20px;height:var(--nav-h);padding:0 20px;display:flex;align-items:center;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--grid-strong)}
nav .wrap{display:flex;align-items:center;gap:14px;width:100%}
.brand{font:800 18px var(--f-display);text-decoration:none;margin-right:auto}
.brand span{color:var(--signal)}
.theme-btn{font:500 13px var(--f-mono);color:var(--ink);background:transparent;border:1px solid var(--grid-strong);border-radius:999px;padding:8px 12px;cursor:pointer}
@media (max-width:480px){nav .btn.small{display:none}}

/* ================= FILM ================= */
.film{margin-inline:-20px}
.stage{position:relative;overflow:hidden}
.room{position:relative;height:min(84svh,760px);min-height:540px;overflow:hidden;background:var(--wall)}
.motion .stage{height:calc(100svh - var(--nav-h))}
.motion .room{position:absolute;inset:0;height:auto;min-height:0;will-change:transform}
.room .glow{position:absolute;left:18%;bottom:10%;width:min(70vh,640px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--signal) 40%,transparent) 0,transparent 64%)}
.room .rings{position:absolute;left:22%;bottom:16%;width:min(54vh,500px);aspect-ratio:1;border-radius:50%;border:1px dashed var(--grid-strong)}
/* Ajay stands left of centre, behind the desk */
.me{position:absolute;right:47%;bottom:17%;height:62%;aspect-ratio:720/900}
.me img{width:100%;height:100%;object-fit:contain;object-position:50% 100%;display:block;filter:drop-shadow(0 20px 40px rgba(0,0,0,.35))}
/* light spilling from the screen onto him */
.cast{position:absolute;right:30%;bottom:18%;width:40%;height:56%;background:radial-gradient(ellipse at 85% 60%,color-mix(in srgb,var(--code-b) 26%,transparent),transparent 62%);mix-blend-mode:screen;pointer-events:none}
.desk{position:absolute;left:0;right:0;bottom:0;height:18%;background:linear-gradient(var(--desk-top),var(--desk) 28%);border-top:1px solid var(--grid-strong)}
/* laptop open on the desk, screen facing us */
.laptop{position:absolute;left:49%;bottom:calc(18% - 4px);width:min(36%,470px)}
.lscreen{position:relative;aspect-ratio:16/10;background:var(--device);border:1px solid var(--device-edge);border-radius:12px 12px 0 0;padding:3.2%}
.lscreen .inner{position:relative;height:100%;background:var(--scr);border-radius:4px;overflow:hidden;color:var(--scr-ink)}
.mini-bar{display:flex;align-items:center;gap:5px;height:13%;padding-inline:4%;background:var(--scr-2);font:500 clamp(7px,.8vw,10px) var(--f-mono);color:var(--scr-muted)}
.mini-bar i{width:6px;height:6px;border-radius:50%;background:var(--scr-muted);opacity:.5}
.mini-bar span{margin-left:6px}
.mini-code{padding:4% 5%;font:400 clamp(7px,.95vw,12px)/1.75 var(--f-mono)}
.mini-code i{display:block;font-style:normal;white-space:nowrap;overflow:hidden;width:0;animation:type 7s steps(30,end) infinite}
.mini-code i:nth-child(2){animation-delay:.6s}.mini-code i:nth-child(3){animation-delay:1.2s}.mini-code i:nth-child(4){animation-delay:1.8s}.mini-code i:nth-child(5){animation-delay:2.4s}.mini-code i:nth-child(6){animation-delay:3s}
.mini-code .k{color:var(--code-k)}.mini-code .s{color:var(--code-s)}.mini-code .f{color:var(--code-b)}
.mini-code .cur{display:inline-block;width:.55em;height:1.1em;vertical-align:-2px;background:var(--code-k);animation:blink 1s steps(1) infinite}
@keyframes type{0%{width:0}12%{width:100%}88%{width:100%}100%{width:0}}
@keyframes blink{50%{opacity:0}}
.lbase{height:12px;margin-inline:-7%;background:linear-gradient(#6b7790,#232d47);border-radius:0 0 12px 12px}
.lbase::after{content:"";display:block;width:18%;height:4px;margin-inline:auto;background:#1a2238;border-radius:0 0 6px 6px}
.floaters{position:absolute;left:49%;bottom:calc(18% + 40px);width:min(36%,470px);height:50%;pointer-events:none}
.floaters span{position:absolute;bottom:58%;font:500 12px var(--f-mono);color:var(--code-b);opacity:0;animation:rise 6s linear infinite;white-space:nowrap}
.floaters span:nth-child(odd){color:var(--signal)}
.floaters span:nth-child(1){left:6%}.floaters span:nth-child(2){left:62%;animation-delay:-1.5s}.floaters span:nth-child(3){left:30%;animation-delay:-3s}.floaters span:nth-child(4){left:78%;animation-delay:-4.5s}
@keyframes rise{0%{transform:translateY(0);opacity:0}15%{opacity:.9}100%{transform:translateY(-160px);opacity:0}}
.rtag{position:absolute;z-index:2;font:500 12px var(--f-mono);background:var(--paper-2);color:var(--ink);border:1px solid var(--grid-strong);border-radius:999px;padding:7px 12px;white-space:nowrap;box-shadow:0 10px 24px rgba(0,0,0,.18);animation:float 5s ease-in-out infinite}
.rtag::before{content:"● ";color:var(--signal)}
.rt1{right:calc(47% + min(30vh,260px));bottom:52%}
.rt2{right:calc(47% + min(26vh,230px));bottom:26%;animation-delay:-2.5s}
@keyframes float{50%{transform:translateY(-8px)}}
/* headline sits top-centre, clear of the scene */
.intro,.outro{position:absolute;z-index:3;left:20px;right:20px;top:5%;max-width:760px;margin-inline:auto;text-align:center}
.intro .introh,.outro h2{font:800 clamp(30px,4.4vw,58px)/1 var(--f-display);letter-spacing:-.035em;margin-block:10px 10px}
.intro .introh em{font-style:normal;color:var(--signal)}
.intro p,.outro p{color:var(--muted);font-size:16px;max-width:52ch;margin-inline:auto}
.cue{margin-top:14px;font:500 12px var(--f-mono);letter-spacing:.14em;color:var(--muted);text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:10px}
.cue::after{content:"";width:1px;height:28px;background:linear-gradient(var(--line),transparent);animation:cue 1.8s infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(0);transform-origin:bottom}}
.outro{position:relative;top:auto;padding:40px 0}
.motion .outro{position:absolute;top:5%;padding:0}
.outro .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;justify-content:center}
@media (max-width:860px){
  .intro .introh,.outro h2{font-size:clamp(26px,7.4vw,38px)}
  .intro p{display:none}
  .me{right:34%;height:50%}
  .laptop,.floaters{left:36%;width:60%}
  .rtag{display:none}
  .room .glow{left:0}.room .rings{left:4%}
  .cast{right:10%;width:60%}
}
@media (min-width:861px) and (max-height:760px){.intro p{display:none}}

/* ---------- ajay.os (inside the screen) ---------- */
.os{background:var(--scr);color:var(--scr-ink);font-size:14px}
.motion .os{position:absolute;inset:0;z-index:4;visibility:hidden}
.os-bar{display:flex;align-items:center;gap:16px;height:46px;padding-inline:16px;background:var(--scr-2);border-bottom:1px solid var(--scr-3);overflow-x:auto}
.os-bar .dots{display:flex;gap:6px;flex:none}.os-bar .dots i{width:10px;height:10px;border-radius:50%;background:var(--scr-muted);opacity:.45}
.os-name{font:500 12px var(--f-mono);color:var(--scr-muted);white-space:nowrap;flex:none}
.rail{display:flex;gap:4px;list-style:none;margin:0 0 0 auto;padding:0;flex:none}
.rail li{font:500 11px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--scr-muted);padding:5px 9px;border-radius:999px;transition:background .3s,color .3s;white-space:nowrap}
.rail li.on{background:var(--signal);color:var(--on-accent)}
.rail li.done{color:var(--ok)}
.os-body{position:relative;padding:16px}
.motion .os-body{position:absolute;top:46px;left:0;right:0;bottom:70px;padding:0}
.win{background:var(--scr);border-radius:12px;min-width:0}
.motion .win{position:absolute;top:50%;left:0;right:0;margin-inline:auto;width:min(calc(100% - 32px),1060px);max-height:calc(100% - 24px);translate:0 -50%;visibility:hidden;opacity:0}
.win-cap{font-size:15px;color:var(--scr-muted);margin-block:24px 12px}
.win-cap b{color:var(--signal);font:600 12px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:4px}
.motion .win-cap{display:none}
.subtitle{display:none}
.motion .subtitle{display:flex;position:absolute;left:0;right:0;bottom:0;height:70px;align-items:center;justify-content:center;gap:14px;padding-inline:20px;background:linear-gradient(transparent,rgba(0,0,0,.45));text-align:center}
.subtitle b{font:600 12px var(--f-mono);letter-spacing:.1em;color:var(--signal);text-transform:uppercase;flex:none}
.subtitle span{font-size:clamp(14px,1.5vw,17px);max-width:70ch}
.pane{background:var(--scr-2);border:1px solid var(--scr-3);border-radius:10px;padding:14px;min-width:0;overflow:hidden}
.pane-t{font:500 11px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--scr-muted);margin-bottom:10px}

/* W1 call · discovery */
.w-call{display:flex;flex-direction:column;gap:12px}

.callhead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font:500 12px var(--f-mono);color:var(--scr-muted)}
.callhead .recdot{color:#ff6b81;font-weight:600}
.callhead b{color:var(--scr-ink);font-weight:600}
.callhead .ch-r{margin-left:auto;display:flex;gap:8px}
.callhead .ch-r span{background:var(--scr-2);border:1px solid var(--scr-3);border-radius:6px;padding:3px 8px}
.callgrid{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr) minmax(0,1.05fr);gap:12px}
.people{display:flex;flex-direction:column;gap:10px;min-width:0}
.tiles{display:grid;grid-template-columns:1fr;gap:10px}
.tile{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--scr-3);display:grid;place-items:center}
.tile > span{position:absolute;left:8px;bottom:8px;font:500 11px var(--f-mono);background:rgba(0,0,0,.5);padding:3px 8px;border-radius:6px}
.avatar-c{width:28%;aspect-ratio:1;border-radius:50%;background:#3a4f7a;display:grid;place-items:center;font:700 clamp(14px,1.8vw,22px) var(--f-display);color:#cfe0ff}
.tile.me-tile{background:var(--signal)}
.tile.me-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 14%}
.speaking{position:absolute;inset:0;border:2px solid var(--ok);border-radius:10px}
.wave{position:absolute;right:10px;bottom:10px;display:flex;gap:3px;align-items:flex-end;height:16px}
.wave i{width:3px;background:var(--ok);border-radius:2px;animation:wave .9s ease-in-out infinite}
.wave i:nth-child(2){animation-delay:-.2s}.wave i:nth-child(3){animation-delay:-.4s}.wave i:nth-child(4){animation-delay:-.6s}
@keyframes wave{0%,100%{height:4px}50%{height:16px}}
.rec{position:absolute;right:8px;top:8px;font:600 10px var(--f-mono);color:#fff;background:#d6455d;border-radius:6px;padding:2px 6px}
.sticky{margin-top:auto;background:var(--signal);color:var(--on-accent);border-radius:4px;padding:12px 14px;transform:rotate(-2deg);box-shadow:0 10px 22px rgba(0,0,0,.3);font:600 clamp(12px,1.15vw,14.5px)/1.3 var(--f-display)}
.sticky small{display:block;font:600 10px var(--f-mono);letter-spacing:.1em;opacity:.65;margin-bottom:4px}
.transcript{display:flex;flex-direction:column;gap:8px;min-width:0;overflow:hidden}
.ln{max-width:88%;background:var(--scr-2);border:1px solid var(--scr-3);border-radius:14px 14px 14px 4px;padding:8px 12px;align-self:flex-start;font-size:clamp(12px,1.12vw,14px);line-height:1.4}
.ln b{display:block;font:600 10px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--scr-muted);margin-bottom:2px}
.ln.a{border-color:rgba(103,232,249,.4);align-self:flex-end;border-radius:14px 14px 4px 14px;background:#172b37}.ln.a b{color:var(--signal)}
.doc{display:flex;flex-direction:column;gap:12px;overflow:hidden}
.doc h5{margin:0;font:600 10.5px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--scr-muted)}
.doc .goal{font:600 clamp(13px,1.25vw,16px)/1.3 var(--f-display);color:var(--scr-ink);border-left:3px solid var(--signal);padding-left:10px}
.notes ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.notes li{display:flex;gap:9px;align-items:flex-start;font-size:clamp(12px,1.1vw,14px);line-height:1.35}
.notes li .box{flex:none;width:17px;height:17px;border:1.5px solid var(--scr-muted);border-radius:4px;display:grid;place-items:center;font-size:11px;color:var(--ok)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{font:500 11px var(--f-mono);background:var(--scr-3);border-radius:999px;padding:4px 9px}
.success{font-size:clamp(12px,1.1vw,13.5px);color:var(--scr-muted);line-height:1.45}
.success b{color:var(--ok);font-weight:600}
.stamp{align-self:flex-start;display:inline-block;font:700 12px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ok);border:2px solid var(--ok);border-radius:8px;padding:5px 10px;transform:rotate(-4deg)}
@media (max-width:1000px){.callgrid{grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr)}.motion .callgrid .doc{display:none}}
@media (max-width:760px){
  .callgrid{grid-template-columns:1fr}
  .motion .people .sticky{display:none}
  .tiles{grid-template-columns:1fr 1fr}
  .motion .transcript .ln:nth-child(n+5){display:none}
  .callhead .ch-r{display:none}
}

/* every chapter window shares one frame so nothing jumps between chapters */
.motion .win{height:min(560px,calc(100% - 24px))}
.motion .win > .pane{height:100%}
.motion .w-design,.motion .w-build,.motion .w-live{grid-template-rows:minmax(0,1fr)}

/* W2 design */
.w-design{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:14px}
.wfgrid{display:grid;grid-template-columns:.8fr 2fr 1.1fr;grid-template-rows:auto 1fr auto;gap:10px;height:calc(100% - 28px);min-height:260px}
.wf{border:1.5px dashed var(--scr-muted);border-radius:8px;padding:9px 11px;font:500 11.5px/1.7 var(--f-mono);color:var(--scr-muted);overflow:hidden}
.wf.head{grid-column:1/-1;display:flex;justify-content:space-between}
.wf.side{grid-row:2/4}
.wf.main{grid-row:2/4}
.wf.cal{grid-row:2}
.wf.hot{grid-row:3;border-color:var(--signal);color:var(--signal);display:grid;place-items:center;text-align:center}
.wf-line{display:block;height:8px;border-radius:4px;background:var(--scr-3);margin-block:7px;width:86%}.wf-line.s{width:58%}
.wf-chip{display:inline-block;border:1px solid var(--scr-muted);border-radius:6px;padding:0 6px;margin:4px 4px 0 0}
.flow{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.frow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fnode{background:var(--scr-3);border:1.5px solid var(--code-b);border-radius:8px;padding:8px 12px;font-size:13px}
.fnode.key{border-color:var(--signal)}
.farrow{font:500 14px var(--f-mono);color:var(--scr-muted)}
.decisions{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.decisions li{font-size:clamp(12.5px,1.15vw,14px);line-height:1.4;color:var(--scr-muted);border-left:2px solid var(--signal);padding-left:10px}
.decisions b{color:var(--scr-ink);font-weight:600}

/* W3 build */
.w-build{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1.5fr) minmax(0,1fr);gap:12px}
.tree{list-style:none;margin:0;padding:0;font:400 12px/1.95 var(--f-mono);color:var(--scr-muted)}
.tree .in1{padding-left:12px}.tree .in2{padding-left:24px}
.tree .dir{color:var(--code-b)}
.tree .cur{color:var(--scr-ink);background:var(--scr-3);border-radius:4px}
.code{font:400 clamp(10.5px,1.1vw,13px)/1.75 var(--f-mono)}
.code i{display:block;font-style:normal;white-space:nowrap}
.code .k{color:var(--code-k)}.code .s{color:var(--code-s)}.code .c{color:var(--scr-muted)}.code .f{color:var(--code-b)}
.chatp{display:flex;flex-direction:column;gap:8px;justify-content:flex-end;height:calc(100% - 28px)}
.bub{max-width:88%;padding:8px 11px;border-radius:12px;font-size:clamp(12px,1.15vw,14px);line-height:1.35}
.bub.in{background:#24365c;align-self:flex-start;border-bottom-left-radius:3px}
.bub.out{background:#1f6b45;align-self:flex-end;border-bottom-right-radius:3px}

/* W4 ship */
.w-ship{display:flex;flex-direction:column;gap:12px}
.pipe{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.pipe span{position:relative;overflow:hidden;background:var(--scr-2);border:1px solid var(--scr-3);border-radius:8px;padding:11px;font:600 12px var(--f-mono);text-align:center}
.pipe span b{position:absolute;inset:0;background:color-mix(in srgb,var(--ok) 30%,transparent);transform-origin:left}
.pipe span em{position:relative;font-style:normal}
.scards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.scard{background:var(--scr-2);border:1px solid var(--scr-3);border-radius:10px;padding:12px 14px;min-width:0}
.scard small{display:block;font:600 10px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--scr-muted)}
.scard b{display:block;font:700 clamp(15px,1.6vw,19px) var(--f-display);margin-block:2px;color:var(--ok)}
.scard span{font-size:12px;color:var(--scr-muted)}
.term{font:400 clamp(11px,1.2vw,14px)/1.85 var(--f-mono);background:#070d1c;flex:1;min-height:0}
.term i{display:block;font-style:normal}
.term .ok{color:var(--ok)}.term .p{color:var(--code-k)}
.bar{height:10px;border-radius:99px;background:var(--scr-3);overflow:hidden;margin-top:8px}.bar b{display:block;height:100%;width:100%;background:var(--ok)}

/* W5 live */
.w-live{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:center}
.motion .w-live{align-items:stretch}
.w-live .phone{align-self:center}
.dash{display:flex;flex-direction:column;gap:12px}
.dash-top{display:flex;align-items:center;justify-content:space-between}
.dash-top strong{font:700 clamp(16px,1.8vw,21px) var(--f-display)}
.livebadge{display:inline-flex;align-items:center;gap:6px;background:color-mix(in srgb,var(--ok) 22%,transparent);color:var(--ok);font:600 11px var(--f-mono);letter-spacing:.12em;padding:5px 10px;border-radius:99px}
.livebadge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);animation:pulse 1.4s infinite}
@keyframes pulse{50%{opacity:.25}}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kpi{background:var(--scr-3);border-radius:10px;padding:12px 14px}
.kpi b{display:block;font:800 clamp(24px,3vw,36px)/1 var(--f-display);font-variant-numeric:tabular-nums;color:var(--ok)}
.kpi span{font-size:12px;color:var(--scr-muted)}
.slots{display:grid;gap:7px}
.slot{display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:10px;align-items:center;background:var(--scr-3);border-radius:8px;padding:9px 12px;font-size:clamp(12px,1.2vw,14px)}
.slot b{font:600 1em var(--f-mono);color:var(--scr-muted)}
.slot em{font:500 10.5px var(--f-mono);font-style:normal;color:var(--ok)}
.ex-note{margin-top:auto;font:400 10.5px var(--f-mono);color:var(--scr-muted)}
.phone{width:clamp(140px,16vw,190px);aspect-ratio:9/18.5;background:var(--device);border:1px solid var(--device-edge);border-radius:24px;padding:7px;box-shadow:0 20px 40px rgba(0,0,0,.4)}
.phone .ps{height:100%;background:var(--scr-2);border-radius:18px;padding:16% 8% 8%;display:flex;flex-direction:column;gap:8px;justify-content:flex-end}
.phone .bub{font-size:clamp(10px,1vw,12px);max-width:100%}

@media (max-width:1000px){.w-build{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}.w-build .files{display:none}.wfgrid{grid-template-columns:2fr 1.1fr}.wf.side{display:none}}
@media (max-width:760px){
  .motion .win{height:calc(100% - 20px)}
  .w-design,.w-build,.w-live{grid-template-columns:1fr}
  .motion .w-design > .pane:first-child,.motion .w-build > .pane:last-child,.motion .w-live .phone{display:none}
  .motion .w-design .decisions li:nth-child(3){display:none}
  .scards{grid-template-columns:1fr 1fr}.scard:last-child{display:none}
  .pipe{gap:4px}.pipe span{padding:8px 2px;font-size:10px}
  .motion .slot:nth-child(4){display:none}
}

/* W6 skills */
.w-skills{display:flex;flex-direction:column;gap:10px;justify-content:center}
.srow{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;align-items:center}
.srow > b{font:700 15px var(--f-display);color:var(--signal)}
.srow > b small{display:block;font:400 10.5px var(--f-mono);color:var(--scr-muted);letter-spacing:.04em}
.tiles-s{display:flex;flex-wrap:wrap;gap:8px}
.sk{display:inline-flex;align-items:baseline;gap:8px;background:var(--scr-2);border:1px solid var(--scr-3);border-radius:10px;padding:9px 12px;font-size:clamp(12.5px,1.25vw,14.5px);font-weight:500}
.sk i{font:400 10.5px var(--f-mono);font-style:normal;color:var(--ok)}
@media (max-width:760px){
  .tiles{grid-template-columns:1fr 1fr}
  .pipe{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}.pipe span{padding:8px 2px;font-size:10px}
  .srow{grid-template-columns:1fr;gap:6px}
  .sk{padding:6px 9px}
  .motion .subtitle{height:84px}.motion .os-body{bottom:84px}
  .subtitle{flex-direction:column;gap:2px}
  .os-name{display:none}
}

/* ================= career ================= */
.scene{min-height:100svh;padding-block:88px 40px;display:flex;flex-direction:column;justify-content:center;gap:28px}
.scene-head{display:flex;flex-wrap:wrap;gap:10px 40px;align-items:end;justify-content:space-between}
.career{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:center}
.year{font:800 clamp(80px,17vw,220px)/.85 var(--f-display);letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.year small{display:block;font:500 13px var(--f-mono);letter-spacing:.12em;color:var(--muted);margin-top:18px;text-transform:uppercase}
.trail{display:flex;gap:4px;margin-top:20px}.trail i{flex:1;height:4px;border-radius:2px;background:var(--grid-strong)}.trail i.on{background:var(--signal)}
.motion .reel{height:min(56vh,420px);overflow:hidden;mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent)}
.roles{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.motion .roles{padding-block:min(22vh,160px)}
.rolecard{border:1px solid var(--grid-strong);border-radius:14px;padding:18px 20px;background:var(--paper-2);transition:opacity .3s,border-color .3s,transform .3s}
.rolecard .label{color:var(--muted)}
.rolecard b{display:block;font:600 19px var(--f-display);margin-block:4px}
.rolecard p{color:var(--muted);font-size:14.5px}
.motion .rolecard{opacity:.35}
.motion .rolecard.on{opacity:1;border-color:var(--signal);transform:scale(1.02)}
.rolecard.on .label{color:var(--signal)}
@media (max-width:860px){.career{grid-template-columns:1fr;gap:20px}.motion .reel{height:44vh}}

/* ================= offers / learn / contact ================= */
section.plain{padding-block:100px 0}
.head{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:end;justify-content:space-between;margin-bottom:34px}
.head p{color:var(--muted);max-width:52ch}
.offers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--grid-strong);border-radius:16px;overflow:hidden}
.offer{padding:24px;border-right:1px solid var(--grid-strong);display:flex;flex-direction:column;gap:10px;background:var(--paper-2)}
.offer:last-child{border-right:0}
.offer .price{font:800 34px/1 var(--f-display);font-variant-numeric:tabular-nums}
.offer .price small{font:500 13px var(--f-mono);color:var(--muted);margin-left:6px}
.offer p{color:var(--muted);font-size:15px;flex:1}
.offer.pick{background:color-mix(in srgb,var(--signal) 10%,var(--paper-2))}
.offer.pick .label{color:var(--signal)}
@media (max-width:900px){.offers{grid-template-columns:1fr 1fr}.offer:nth-child(2){border-right:0}.offer:nth-child(-n+2){border-bottom:1px solid var(--grid-strong)}}
@media (max-width:560px){.offers{grid-template-columns:1fr}.offer{border-right:0;border-bottom:1px solid var(--grid-strong)}}
.learn{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:36px}
.live{border:1.5px solid var(--signal);border-radius:16px;padding:24px}
.count{display:flex;gap:10px;margin-block:16px}
.count div{flex:1;text-align:center;border:1px solid var(--grid-strong);border-radius:10px;padding:12px 4px}
.count strong{display:block;font:800 30px/1 var(--f-display);font-variant-numeric:tabular-nums}
.count span{font:400 11px var(--f-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.stairs{display:flex;align-items:flex-end;gap:6px;height:260px}
.step{flex:1;min-width:0;background:var(--paper-2);border:1px solid var(--grid-strong);border-bottom:2px solid var(--line);border-radius:8px 8px 0 0;padding:10px 8px;display:flex;flex-direction:column;gap:4px;text-decoration:none;color:inherit}
.step:hover{border-color:var(--signal)}
.step b{font:800 17px/1.1 var(--f-display);font-variant-numeric:tabular-nums}
.step span{font-size:12px;line-height:1.3}
.step i{font:normal 10.5px var(--f-mono);color:var(--muted)}
@media (max-width:900px){.learn{grid-template-columns:1fr}}
@media (max-width:560px){.stairs{height:auto;flex-direction:column;align-items:stretch}.step{height:auto!important;border-radius:8px;border-bottom-width:1px;border-left:3px solid var(--line)}}
.chat{background:var(--paper-2);border:1px solid var(--grid-strong);border-radius:16px;padding:24px;max-width:760px}
.guide{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--muted);margin-bottom:24px}
.guide b{color:var(--ink);font-weight:600;display:block}
.av{flex:none;width:48px;height:48px;border-radius:50%;border:2px solid var(--signal);background-color:var(--signal);background-size:150%;background-position:50% 12%;background-repeat:no-repeat}
.q{margin-bottom:22px}.q .label{display:block;margin-bottom:10px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{font:500 14px var(--f-body);color:var(--ink);background:var(--paper);border:1px solid var(--grid-strong);border-radius:10px;padding:10px 14px;cursor:pointer}
.opt[aria-pressed="true"]{border-color:var(--signal);background:color-mix(in srgb,var(--signal) 14%,var(--paper))}
.chat textarea{width:100%;min-height:84px;font:400 15px var(--f-body);color:var(--ink);background:var(--paper);border:1px solid var(--grid-strong);border-radius:10px;padding:12px;resize:vertical}
.preview{font:400 13px var(--f-mono);color:var(--muted);white-space:pre-wrap;border-left:2px solid var(--signal);padding:4px 0 4px 12px;margin-block:6px 18px}
.reach{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;font-size:14px;color:var(--muted);align-items:center}
.reach code{font-family:var(--f-mono);color:var(--ink);user-select:all}
.copy{font:500 12px var(--f-mono);background:transparent;color:var(--line);border:1px solid var(--grid-strong);border-radius:6px;padding:4px 8px;cursor:pointer}
html footer{margin-top:96px;padding-block:28px;border-top:1px solid var(--grid-strong);display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;font:400 12px var(--f-mono);color:var(--muted)}
footer a{text-decoration:none}

/* ===== big type reveal ===== */
.bigtype{min-height:calc(100svh - var(--nav-h));display:flex;flex-direction:column;justify-content:center;gap:34px;padding-block:60px}
.bt{font:800 clamp(44px,8.4vw,124px)/.95 var(--f-display);letter-spacing:-.045em;margin:0}
.bt .w{display:inline-block;margin-right:.18em}
.bt .hl{color:var(--signal)}
.bt-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;color:var(--muted)}
.bt-foot .who{display:flex;align-items:center;gap:12px}
.bt-foot b{color:var(--ink);font-weight:600;display:block}

/* ===== exploded stack ===== */
.stack-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:center}
.stage3d{position:relative;height:min(64vh,560px);min-height:380px;perspective:1800px;display:grid;place-items:center}
.layer-count{position:absolute;left:0;top:0;font:500 12px var(--f-mono);letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.layer-count b{color:var(--signal);font-weight:600}
.iso{position:relative;width:330px;height:220px;transform-style:preserve-3d;transform:translateY(120px) rotateX(58deg) rotateZ(-38deg)}
.plate{position:absolute;inset:0;border-radius:16px;background:var(--scr);border:1.5px solid var(--line);box-shadow:0 0 0 1px rgba(0,0,0,.2),0 30px 50px rgba(0,0,0,.25);color:var(--scr-ink);padding:14px;overflow:hidden;transition:border-color .3s}
.plate.on{border-color:var(--signal);box-shadow:0 0 0 1px var(--signal),0 0 40px rgba(103,232,249,.35)}
.plate .ptag{position:absolute;right:10px;top:10px;font:600 10px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;background:var(--signal);color:var(--on-accent);border-radius:6px;padding:3px 7px}
.plate:nth-child(1){transform:translateZ(0)}.plate:nth-child(2){transform:translateZ(84px)}.plate:nth-child(3){transform:translateZ(168px)}.plate:nth-child(4){transform:translateZ(252px)}.plate:nth-child(5){transform:translateZ(336px)}
/* plate contents */
.p-ui .ubar{height:16px;border-radius:5px;background:var(--scr-2);margin-bottom:10px;display:flex;align-items:center;gap:4px;padding-left:6px}
.p-ui .ubar i{width:5px;height:5px;border-radius:50%;background:var(--scr-muted)}
.p-ui .urow{display:grid;grid-template-columns:36px 1fr 30px;gap:6px;align-items:center;height:22px;border-radius:6px;background:var(--scr-2);margin-bottom:6px;padding:0 6px;font:500 9px var(--f-mono);color:var(--scr-muted)}
.p-ui .urow span{height:5px;border-radius:3px;background:var(--scr-3)}
.p-ui .urow em{font-style:normal;color:var(--ok)}
.p-ui .ubtn{margin-top:8px;width:46%;height:20px;border-radius:6px;border:1.5px solid var(--signal);font:600 9px/17px var(--f-mono);color:var(--signal);text-align:center}
.p-api{font:500 11px/1.9 var(--f-mono)}
.p-api i{display:block;font-style:normal}.p-api .m{color:var(--signal);display:inline-block;width:44px}.p-api .ok{color:var(--ok)}
.p-db{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:24px}
.tbl{border:1px solid var(--scr-3);border-radius:6px;overflow:hidden;font:500 9px var(--f-mono)}
.tbl b{display:block;background:var(--scr-2);padding:4px 6px;color:var(--code-b)}
.tbl i{display:block;height:14px;border-top:1px solid var(--scr-3)}
.p-ai{display:grid;place-items:center}
.ai-core{width:62px;height:62px;border-radius:50%;border:2px solid var(--signal);display:grid;place-items:center;font:700 11px var(--f-mono);color:var(--signal);box-shadow:0 0 24px rgba(103,232,249,.35)}
.ai-tool{position:absolute;font:500 9.5px var(--f-mono);background:var(--scr-2);border:1px solid var(--code-b);border-radius:6px;padding:2px 6px}
.ai-tool.t1{left:14px;top:20px}.ai-tool.t2{right:60px;top:26px}.ai-tool.t3{left:20px;bottom:22px}.ai-tool.t4{right:22px;bottom:30px}
.p-cloud{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-top:26px}
.box{border:1px dashed var(--scr-muted);border-radius:6px;height:46px;display:grid;place-items:center;font:500 9px var(--f-mono);color:var(--scr-muted)}
.box.k{border-style:solid;border-color:var(--ok);color:var(--ok)}
/* legend */
.legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.legend li{padding:12px 0 12px 16px;border-left:2px solid var(--grid-strong);transition:opacity .3s,border-color .3s}
.legend li .lh{display:flex;align-items:baseline;gap:10px}
.legend li b{font:700 19px var(--f-display)}
.legend li small{font:500 11px var(--f-mono);color:var(--muted)}
.legend li p{color:var(--muted);font-size:14.5px;margin-block:2px 8px}
.legend .chips{display:flex;flex-wrap:wrap;gap:6px}
.legend .chips span{font:500 12px var(--f-mono);border:1px solid var(--grid-strong);border-radius:999px;padding:4px 10px;background:var(--paper-2)}
.legend .chips span i{font-style:normal;color:var(--signal);margin-left:4px}
.motion .legend li{opacity:.3}
.motion .legend li.on{opacity:1;border-left-color:var(--signal)}
.motion .legend li.done{opacity:.75}
.legend li.on b{color:var(--signal)}
@media (max-width:860px){
  .stack-grid{grid-template-columns:1fr;gap:10px}
  .stage3d{height:330px;min-height:0}
  .iso{transform:translateY(90px) rotateX(58deg) rotateZ(-38deg) scale(.66)}
  .motion .legend li:not(.on){display:none}
}

/* ===== phone feature unlock ===== */
.unlock{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,5vw,64px);align-items:center}
.feats{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.feat{display:grid;grid-template-columns:38px minmax(0,1fr);gap:14px;align-items:start;padding:14px 16px;border:1px solid var(--grid-strong);border-radius:14px;background:var(--paper-2);transition:opacity .3s,border-color .3s}
.feat .lk{width:38px;height:38px;border-radius:10px;border:1px solid var(--grid-strong);display:grid;place-items:center;font:600 15px var(--f-mono);color:var(--ok)}
.feat .lk::before{content:"✓"}
.motion .feat .lk::before{content:"🔒";filter:grayscale(1);opacity:.6}
.motion .feat.on .lk::before,.motion .feat.done .lk::before{content:"✓";filter:none;opacity:1}
.feat b{display:block;font:600 18px var(--f-display)}
.feat p{color:var(--muted);font-size:15px}
.motion .feat{opacity:.4}.motion .feat.on,.motion .feat.done{opacity:1}
.feat.on{border-color:var(--signal)}
.bigphone{width:clamp(220px,23vw,290px);aspect-ratio:9/19;background:var(--device);border:1px solid var(--device-edge);border-radius:42px;padding:10px;box-shadow:0 40px 80px rgba(0,0,0,.35);justify-self:center}
.bigphone .ps{position:relative;height:100%;border-radius:33px;background:var(--scr);overflow:hidden;color:var(--scr-ink)}
.bigphone .ps::before{content:"";position:absolute;z-index:2;top:10px;left:0;right:0;margin-inline:auto;width:34%;height:20px;border-radius:99px;background:var(--device)}
.pscr{position:absolute;inset:0;padding:46px 14px 16px;display:flex;flex-direction:column;gap:8px;opacity:0;visibility:hidden}
.pscr.p4{opacity:1;visibility:visible}
.pscr h4{margin:0 0 4px;font:700 15px var(--f-display)}
.pscr .bub{font-size:12.5px}
.lock-time{font:300 52px/1 var(--f-display);text-align:center;margin-top:18px}
.lock-date{font:500 12px var(--f-mono);text-align:center;color:var(--scr-muted);margin-bottom:auto}
.notif{background:color-mix(in srgb,var(--scr-ink) 12%,transparent);border-radius:16px;padding:10px 12px;font-size:12.5px;line-height:1.35}
.notif small{display:block;font:600 10px var(--f-mono);letter-spacing:.08em;color:var(--scr-muted);margin-bottom:3px}
.prow{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;background:var(--scr-2);border-radius:10px;padding:8px 10px;font-size:12px;align-items:center}
.prow b{font:600 11px var(--f-mono);color:var(--scr-muted)}
.takeover{margin-top:auto;text-align:center;border:1.5px solid var(--signal);color:var(--signal);border-radius:12px;padding:9px;font:600 12px var(--f-mono)}
@media (max-width:820px){.unlock{grid-template-columns:1fr;gap:20px}.motion .feat:not(.on){display:none}.bigphone{width:min(200px,52vw)}}

/* ===== horizontal work ===== */
#projects{overflow:hidden;margin-inline:-20px;padding-inline:20px;transition:background-color .6s}
.track-wrap{overflow-x:auto;margin-inline:-20px;padding-inline:20px}
.motion .track-wrap{overflow:visible}
.track{display:flex;gap:24px;width:max-content}
.slide{width:min(80vw,840px);min-height:min(56vh,440px);border-radius:20px;padding:clamp(22px,3vw,40px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center;border:1px solid var(--grid-strong);background:var(--paper-2)}
.slide .label{color:var(--signal)}
.slide h3{font:800 clamp(28px,3.6vw,46px)/1 var(--f-display);letter-spacing:-.025em;margin-block:10px 14px}
.slide p{color:var(--muted)}
.slide .role{margin-top:16px;padding-top:12px;border-top:1px dashed var(--grid-strong);font-size:14px}
.mock{background:var(--scr);color:var(--scr-ink);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:10px;font-size:13px;min-width:0}
.cite{display:inline-block;font:600 10px var(--f-mono);background:var(--scr-3);color:var(--code-k);border-radius:4px;padding:1px 5px;margin-left:4px}
.src{font:400 11px var(--f-mono);color:var(--scr-muted);border-top:1px solid var(--scr-2);padding-top:8px}
.pflow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font:500 12px var(--f-mono)}
.pflow span{background:var(--scr-2);padding:7px 10px;border-radius:6px}
.pflow .gate{background:transparent;border:1.5px dashed var(--code-k);color:var(--code-k)}
.pflow em{font-style:normal;color:var(--scr-muted)}
.cvs{position:relative;height:170px}
.cv{position:absolute;width:62%;height:120px;background:var(--scr-2);border-radius:8px;padding:12px;font:500 11px var(--f-mono)}
.cv b{display:block;font:700 14px var(--f-display);margin-bottom:6px}
.cv:nth-child(1){left:0;top:40px}.cv:nth-child(2){left:18%;top:20px}.cv:nth-child(3){left:36%;top:0;border:1px solid var(--code-k)}
.slide.next{border:2px dashed var(--signal);background:transparent}
.slide.next .ph{aspect-ratio:4/3;border:1.5px dashed var(--grid-strong);border-radius:14px;display:grid;place-items:center;font:500 13px var(--f-mono);color:var(--muted);text-align:center;padding:16px}
.progress{height:2px;background:var(--grid-strong);margin-top:6px}.progress b{display:block;height:100%;width:0;background:var(--signal)}
@media (max-width:760px){.slide{grid-template-columns:1fr;width:84vw}}

/* ===== career eras ===== */
#career{position:relative;overflow:hidden;margin-inline:-20px;padding-inline:20px}
.era-ghost{position:absolute;right:20px;bottom:6%;font:800 clamp(70px,15vw,220px)/1 var(--f-display);letter-spacing:-.05em;color:var(--grid-strong);pointer-events:none;white-space:nowrap;z-index:0}
#career > *:not(.era-ghost){position:relative;z-index:1}
.year{transition:color .4s}
#career[data-era="dotnet"] .year{color:var(--muted);font-family:var(--f-mono);font-weight:600;letter-spacing:-.06em}
#career[data-era="angular"] .year{color:#dd3b4f}
#career[data-era="node"] .year{color:#5fa04e}
#career[data-era="apple"] .year{color:var(--ink);font-family:-apple-system,"SF Pro Display","Helvetica Neue",var(--f-display);font-weight:600;letter-spacing:-.04em}
#career[data-era="ai"] .year{background:linear-gradient(90deg,var(--signal),var(--line));-webkit-background-clip:text;background-clip:text;color:transparent}
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:5}

/* ===== review pass: nav links, progress, facts ticker, floating CTA ===== */
.navlinks{display:flex;gap:18px;font-size:14px;color:var(--muted);margin-right:6px}
.navlinks a{text-decoration:none}.navlinks a:hover{color:var(--ink)}
@media (max-width:980px){.navlinks{display:none}}
.progress-top{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--signal);transform:scaleX(0);transform-origin:left}
.bt-cta{display:flex;flex-wrap:wrap;gap:10px}
.ticker{overflow:hidden;margin-inline:-20px;border-block:1px solid var(--grid-strong);background:var(--paper-2);padding-block:14px;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker-track{display:flex;gap:44px;width:max-content;animation:tick 38s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker span{font:600 clamp(15px,1.6vw,19px) var(--f-display);white-space:nowrap;display:flex;align-items:center;gap:44px}
.ticker span::after{content:"✦";color:var(--signal);font-size:.8em}
.ticker em{font-style:normal;color:var(--signal)}
@keyframes tick{to{transform:translateX(-50%)}}
.fab{position:fixed;z-index:60;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;gap:8px;align-items:center;background:var(--paper-2);border:1px solid var(--grid-strong);border-radius:999px;padding:6px 6px 6px 8px;box-shadow:0 14px 34px rgba(0,0,0,.28);transform:translateY(140%);transition:transform .35s ease}
.fab.show{transform:none}
.fab .av{width:36px;height:36px}
.fab span.t{font:500 13px var(--f-body);color:var(--muted);padding-inline:4px}
.fab .btn{padding:10px 14px;font-size:14px}
@media (max-width:520px){.fab span.t{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* Inside the Screen: readable chapters, one continuous camera, a persistent product. */
html.motion{scroll-behavior:auto}
.film{margin-inline:-20px;isolation:isolate}
.stage{background:var(--scr)}
.motion .room{background:radial-gradient(ellipse at 65% 62%,#263254 0,transparent 52%),linear-gradient(145deg,#090f1c,#152238);color:#eef3ff}
.motion .room::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(127,200,255,.04) 1px,transparent 1px),linear-gradient(rgba(127,200,255,.04) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(transparent,#000)}
.motion .desk{background:linear-gradient(#203451,#0b162a 35%);border-color:#537096}
.motion .intro,.motion .outro{top:6%;max-width:820px;color:#eef3ff}
.motion .intro .label,.motion .outro .label{color:#98c9ee;font-size:10px;letter-spacing:.18em}
.motion .intro .introh,.motion .outro h2{font-size:clamp(32px,4.2vw,58px);line-height:1.04;letter-spacing:-.045em;margin-block:15px}
.motion .intro .introh em{color:var(--signal)}
.motion .intro p,.motion .outro p{color:#b7c9e2;font-size:15px;line-height:1.5;max-width:55ch}
.motion .cue{font-size:10px;color:#b7c9e2;margin-top:18px}
.motion .me{height:55%;right:48%}
.motion .laptop{left:50%;width:min(36%,470px);filter:drop-shadow(0 20px 30px #0007)}
.motion .rtag{animation:none;background:#142944;color:#b7c9e2;border-color:#375273;font-size:10px}
.motion .room .rings{opacity:.4}
.mini-result{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:6%;padding:7%;font:500 clamp(7px,.8vw,11px)/1.3 var(--f-mono);background:linear-gradient(135deg,#0f233b,#142c45)}
.mini-result>span{color:#9ab0ce;font-size:.8em;letter-spacing:.12em}
.mini-result strong{font:700 clamp(11px,1.7vw,23px)/1.1 var(--f-display);color:#e6edfb}
.mini-result i{font-style:normal;color:#b5d6c6;background:#203c45;border-radius:4px;padding:4%}
.mini-result b{color:#70dea4;font-size:.8em}
.os{background:radial-gradient(ellipse at 25% 0,#18334c,transparent 60%),#091423;color:#e6edf7}
.motion .os{will-change:transform;overflow:hidden}
.os-bar{height:56px;padding-inline:28px;background:#101e30;border-color:#283c52;gap:18px}
.os-name{font-size:10px;letter-spacing:.02em;color:#9aacbf}
.os-bar .dots i:first-child{background:#ff7068}.os-bar .dots i:nth-child(2){background:#ffc35e}.os-bar .dots i:nth-child(3){background:#5fcd98}.os-bar .dots i{opacity:1;width:7px;height:7px}
.rail{gap:6px}
.rail li{padding:0;transition:none}
.rail li.on{background:transparent}
.rail button{display:flex;align-items:center;gap:6px;background:transparent;border:1px solid transparent;color:#9aacbf;border-radius:7px;padding:8px 10px;font:500 10px var(--f-mono);cursor:pointer}
.rail button span{opacity:.5;font-size:9px}
.rail .on button{background:var(--signal);color:#112038;border-color:var(--signal)}
.rail .done button{color:#75cba6}
.rail button:hover{border-color:#6988a8}
.film-meter{display:none}
.motion .film-meter{display:block;position:absolute;top:55px;left:0;right:0;height:2px;background:#26374a;z-index:5}
.film-meter b{display:block;height:100%;background:var(--signal);transform:scaleX(0);transform-origin:left}
.chapter-head{display:none}
.motion .chapter-head{display:flex;align-items:end;justify-content:space-between;gap:32px;position:absolute;top:86px;left:0;right:0;max-width:1060px;margin-inline:auto;padding-inline:4px}
.chapter-kicker{display:block;font:500 10px var(--f-mono);letter-spacing:.18em;color:var(--signal);margin-bottom:12px}
.chapter-head h2{font:800 clamp(27px,3.3vw,43px)/1.05 var(--f-display);letter-spacing:-.04em;color:#f3f6fa;max-width:20ch}
.chapter-head p{font:400 14px/1.55 var(--f-body);color:#a6b8cd;max-width:34ch;padding-bottom:2px}
.motion .os-body{top:190px;bottom:90px;padding:0}
.motion .win{top:50%;width:min(calc(100% - 56px),1060px);height:min(460px,calc(100% - 22px));max-height:calc(100% - 22px);background:transparent;border:0;box-shadow:0 22px 60px #0003;translate:0 -50%}
.pane{background:#122236;border-color:#2a3f55;border-radius:12px;padding:20px}
.pane-t{color:#92a9c1;font-size:10px;letter-spacing:.14em;margin-bottom:14px}
.motion .subtitle{height:76px;bottom:0;background:#0b1929;border-top:1px solid #283c52;padding:0 28px;justify-content:space-between;gap:20px;text-align:left}
.chapter-outcome{display:flex;align-items:center;gap:14px}
.subtitle b{font-size:9px;letter-spacing:.12em;color:#8fa8c4}
.subtitle .chapter-outcome>span{font-size:14px;color:#c8d7e8}
.film-controls{display:flex;align-items:center;gap:18px;flex:none;font:400 9px var(--f-mono);color:#8fa8c4}
.film-controls button{font:500 10px var(--f-mono);background:transparent;color:#c8d7e8;border:1px solid #36516d;border-radius:6px;padding:9px 12px;cursor:pointer}
.film-controls button:hover{background:#21364d}
.film[data-phase="brief"]~.fab{display:none}
.w-call{gap:12px}
.callhead{background:#14283f;padding:10px 14px;border:1px solid #2a3f55;border-radius:8px;font-size:10px}
.callgrid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) minmax(0,1fr);gap:12px}
.tiles{gap:8px}
.tile{aspect-ratio:16/8}
.sticky{padding:12px;font-size:13px;line-height:1.35;box-shadow:none}
.ln{font-size:13px;line-height:1.4;padding:8px 11px;max-width:95%;background:#1b304a;border-color:#304960}
.ln.a{background:#30301f;border-color:#72633a}
.ln b{font-size:8px}
.transcript{gap:7px;padding:16px}
.doc{gap:12px;padding:16px}
.doc .goal{font-size:15px}.doc h5{font-size:9px;margin-bottom:5px}
.notes li{font-size:12px;line-height:1.4}.notes ul{gap:8px}
.chips span{font-size:10px;padding:3px 7px}
.success{font-size:12px}.stamp{font-size:10px;padding:5px 8px}
.wfgrid{min-height:0;gap:8px;height:calc(100% - 30px)}
.wf{background:#162b40;border-color:#54708c;font-size:12px}
.fnode{font-size:12px;background:#1c334b;padding:9px 12px;border-color:#597d9c}
.flow{gap:16px}.decisions{gap:18px}.decisions li{font-size:14px;line-height:1.5;color:#9db4cd}.decisions b{color:#e6edf7}
.code{font-size:clamp(11px,1.05vw,13px);line-height:1.85;overflow:auto}
.tree{font-size:11px;line-height:2.15}
.chatp{justify-content:center;gap:14px}.bub{font-size:13px;line-height:1.5}
.w-ship{justify-content:center;gap:14px}.pipe span{background:#14283d;border-color:#2a3f55;padding:14px}.pipe span b{background:#234d45}
.scard{background:#122236;border-color:#2a3f55;padding:17px}.term{font-size:12px;line-height:1.9;padding:20px}
.w-live{grid-template-columns:minmax(0,1fr) 260px;gap:32px;align-items:center;box-shadow:none!important}
.dash{gap:20px}.kpi{background:#1b334b;padding:16px}.kpi b{color:#73d5ab;font-size:34px}.kpi span{font-size:12px;color:#a8bfd8}
.slot{background:#192e44;padding:13px 16px;font-size:13px}.slot b{color:#b3c5d9}.slot em{color:#73d5ab}
.phone{width:200px;justify-self:center;border-color:#4b6380;box-shadow:0 20px 60px #0006;rotate:3deg}.phone .ps{background:#14293c}.phone .bub{font-size:12px}
.motion .outro .btn.ghost{color:#e6edf7;border-color:#6987a8}.motion .outro .btn{background:var(--signal);color:var(--on-accent);border-color:var(--signal)}.motion .outro .btn.ghost{background:transparent;color:#e6edf7}
@media(max-width:1100px){
 .motion .chapter-head{padding-inline:28px}.os-name{display:none}
 .callgrid{grid-template-columns:minmax(0,.75fr) minmax(0,1.2fr) minmax(0,1fr)}
 .motion .callgrid .doc{display:flex}.pane{padding:16px}.doc,.transcript{padding:12px}.ln{font-size:12px}
}
@media(max-width:760px){
 .motion .intro,.motion .outro{top:7%;left:24px;right:24px}.motion .intro .introh,.motion .outro h2{font-size:clamp(30px,8vw,44px)}
 .motion .intro p{display:block;font-size:13px;max-width:30ch}.motion .outro p{font-size:13px;max-width:30ch}
 .motion .me{right:35%;height:43%}.motion .laptop{left:35%;width:61%}.motion .cue{font-size:9px}
 .os-bar{height:48px;padding-inline:14px}.os-bar .dots{display:none}.rail{width:100%;margin:0;justify-content:space-between;gap:2px}.rail button{padding:7px 8px;font-size:9px;gap:4px}.rail button span{display:none}
 .motion .film-meter{top:47px}.motion .chapter-head{top:72px;padding-inline:20px;display:block}.chapter-kicker{font-size:9px;margin-bottom:8px}.chapter-head h2{font-size:30px;max-width:19ch}.chapter-head p{font-size:12px;line-height:1.5;max-width:40ch;margin-top:10px}
 .motion .os-body{top:205px;bottom:100px}.motion .win{width:calc(100% - 32px);height:calc(100% - 16px);max-height:calc(100% - 16px);overflow:auto;scrollbar-width:thin}
 .motion .subtitle{height:94px;padding:10px 18px;display:flex;flex-direction:column;align-items:stretch;gap:6px;justify-content:center}
 .chapter-outcome{gap:6px;display:block}.subtitle b{display:none}.subtitle .chapter-outcome>span{font-size:12px}.film-controls{justify-content:space-between}.film-controls button{padding:6px 9px;font-size:9px}
 .callhead{font-size:9px;padding:8px 10px;gap:7px}.callhead>span:not(.recdot){font-size:8px}.callgrid{grid-template-columns:1fr;gap:8px}.people{min-height:0}.tiles{grid-template-columns:1fr 1fr;gap:8px}.tile{aspect-ratio:3/1.5}.tile>span{font-size:9px;padding:2px 5px;bottom:5px;left:5px}.tile.me-tile img{object-position:50% 18%}
 .motion .callgrid .doc{display:none}.motion .people .sticky{display:none}.transcript{gap:6px;padding:12px}.ln{font-size:12px;padding:7px 9px}.ln b{font-size:8px;margin-bottom:2px}.motion .transcript .ln:nth-child(n+5){display:block}
 .w-design{grid-template-columns:1fr}.motion .w-design>.pane:first-child{display:none}.motion .w-design .decisions li:nth-child(3){display:block}.decisions{gap:14px}.decisions li{font-size:12px}.fnode{padding:7px 9px;font-size:11px}.frow{gap:6px}.flow{gap:10px}
 .w-build{grid-template-columns:1fr}.motion .w-build>.pane:last-child{display:none}.code{font-size:10px;line-height:2;overflow:auto;padding:15px}.code i{white-space:pre-wrap;overflow-wrap:anywhere}.tree{display:none}
 .w-ship{justify-content:start}.pipe span{font-size:9px;padding:10px 2px}.scards{gap:8px}.scard{padding:12px}.scard b{font-size:14px}.scard span{font-size:10px}.term{font-size:10px;line-height:1.85;padding:14px}.term i{white-space:normal}
 .w-live{grid-template-columns:1fr;gap:14px}.motion .w-live .phone{display:none}.dash{gap:14px;padding:16px}.kpis{gap:7px}.kpi{padding:12px 8px}.kpi b{font-size:28px}.kpi span{font-size:9px}.slot{font-size:11px;padding:11px 9px;grid-template-columns:45px minmax(0,1fr) auto;gap:7px}.motion .slot:nth-child(4){display:grid}.ex-note{font-size:9px}
 .motion .outro .row{gap:8px}.motion .outro .btn{font-size:12px;padding:12px 16px}
}
@media(max-height:700px) and (min-width:761px){
 .motion .chapter-head{top:73px}.chapter-head h2{font-size:32px}.chapter-head p{font-size:12px}.chapter-kicker{margin-bottom:8px}
 .motion .os-body{top:150px;bottom:65px}.motion .subtitle{height:60px}.pane{padding:12px}.ln{font-size:11px;padding:5px 8px}.doc{gap:8px}.notes li{font-size:11px}.code{font-size:10px;line-height:1.6}.dash{gap:12px}.slot{padding:8px 12px}.phone{width:160px}
}
@media(max-height:740px) and (max-width:760px){
 .motion .chapter-head{top:64px}.chapter-head h2{font-size:25px}.chapter-head p{font-size:11px;margin-top:7px}.motion .os-body{top:172px;bottom:89px}.motion .subtitle{height:84px}.tile{aspect-ratio:3/1}.ln{font-size:11px;padding:5px 8px}.transcript{gap:4px}.pane-t{margin-bottom:9px}.code{font-size:9px;line-height:1.8}.dash{gap:10px}.slot{padding:8px}.kpi{padding:9px 7px}
}
@media(prefers-reduced-motion:reduce){
 .mini-result,.film-controls,.rail{display:none}.os-bar{height:auto;min-height:48px}.os-name{display:block}.win{margin-bottom:24px}.w-live{grid-template-columns:1fr}.phone{display:none}.win-cap{font-size:15px;padding-top:10px}.os-body{padding:20px}.doc{display:flex}.code i{white-space:pre-wrap;overflow-wrap:anywhere}
}

html body:has(.inside-screen){margin:0}

.film{width:calc(100% + 40px)}
.tile.me-tile img{object-position:50% 36%}
@media(max-width:760px){.tile.me-tile img{object-position:50% 36%}}

/* Seated portrait and laptop share a coordinate system, including the portal. */
.motion .room{background:radial-gradient(ellipse at 73% 52%,#87602e33,transparent 52%),linear-gradient(145deg,#0a1731,#122848)}
.motion .room .glow{left:auto;right:4%;bottom:8%;width:min(80vh,800px);background:radial-gradient(circle,color-mix(in srgb,var(--signal) 32%,transparent) 0,color-mix(in srgb,var(--signal) 7.5%,transparent) 32%,transparent 65%)}
.motion .room .rings{left:auto;right:12%;bottom:17%;width:45%;border-color:color-mix(in srgb,var(--signal) 15%,transparent)}
.motion .desk{height:8%;background:linear-gradient(transparent,#091326);border:0}
.seated-scene{position:absolute;right:6%;bottom:2%;height:93%;aspect-ratio:1122/1402}
.motion .seated-scene .me{inset:0;width:100%;height:100%;aspect-ratio:1122/1402}
.seated-scene .me img{object-fit:contain;object-position:center;filter:drop-shadow(0 28px 28px #0007)}
.motion .seated-scene .laptop{left:26.7%;top:39.05%;bottom:auto;width:41.5%;height:16.5%;filter:none;z-index:2}
.seated-scene .lscreen{width:100%;height:100%;aspect-ratio:auto;border-radius:7px;padding:0;border:0;background:transparent;overflow:hidden}
.seated-scene .lscreen .inner{height:100%;border-radius:7px;opacity:0}
.seated-scene .lbase{display:none}
.lid-cover{position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border-radius:7px;background:linear-gradient(150deg,#606069,#292b34);border:1px solid #ac9a7f;box-shadow:inset 0 1px 1px #fff3}
.lid-cover>span{font:800 clamp(24px,3.4vw,50px)/1 var(--f-display);letter-spacing:-.07em;color:var(--signal);text-shadow:0 0 12px var(--signal),0 0 35px rgba(103,232,249,.53)}
.lid-cover>i{font:400 clamp(5px,.55vw,9px) var(--f-mono);letter-spacing:.18em;font-style:normal;color:var(--line);text-transform:uppercase}
.motion .seated-scene .floaters{left:20%;bottom:58%;width:65%;height:25%}
.motion .floaters span{font-size:11px;color:var(--signal)}
.motion .intro,.motion .outro{top:30%;left:8%;right:auto;max-width:440px;margin:0;text-align:left}
.motion .intro .introh,.motion .outro h2{font-size:clamp(42px,4.8vw,68px);line-height:1.02}
.motion .intro p,.motion .outro p{margin:0;font-size:15px;max-width:34ch}
.motion .cue{justify-content:flex-start;margin-top:28px}
.motion .outro .row{justify-content:flex-start}
.motion .rt1{left:8%;right:auto;bottom:15%}.motion .rt2{left:8%;right:auto;bottom:9%}
.motion .cast{right:12%;bottom:24%;width:45%;height:55%;opacity:.4}
/* Desktop: keep hero copy, tags and portrait inside the nav's 1160px container. */
@media(min-width:1101px){
 .film{--film-edge:max(20px,calc((100% - 1160px) / 2))}
 .motion .intro,.motion .outro,.motion .rt1,.motion .rt2{left:var(--film-edge)}
 .seated-scene{right:var(--film-edge)}
}
.motion .w-skills{height:min(480px,calc(100% - 22px));justify-content:space-between;gap:9px;padding:20px;border:1px solid #2a3f55;border-radius:12px;background:#0e2032;box-shadow:0 24px 70px #0003}
.skills-note{display:flex;justify-content:space-between;gap:14px;font:500 9px var(--f-mono);color:#90a9c4;letter-spacing:.08em;padding-bottom:8px;border-bottom:1px solid #2a3f55}
.srow{grid-template-columns:115px minmax(0,1fr);gap:18px;padding:9px 0;min-height:0}
.srow>b{font-size:15px;color:var(--signal)}.srow>b small{font-size:9px;line-height:1.4;margin-top:5px;color:#8fa8c4;max-width:15ch}
.tiles-s{gap:7px}
.sk{border-radius:7px;background:#193349;border:1px solid #304b61;padding:9px 11px;font-size:12px;color:#d6e3ed;box-shadow:0 4px 12px #0002;will-change:transform}
.sk i{font-size:9px;color:#7fdbb0;padding-left:6px;border-left:1px solid #3c5964}
.motion .w-build{grid-template-columns:minmax(0,.5fr) minmax(0,1.4fr) minmax(0,.9fr)}
.motion .code{overflow:hidden}.motion .code i{width:fit-content;max-width:100%;white-space:nowrap}
.motion .code i.is-typing::after{content:"▎";color:var(--signal);animation:blink .7s steps(1) infinite}
.motion .wf{position:relative}.motion .wf::after{content:"";position:absolute;inset:0;border:1px solid #b3d8f5;border-radius:inherit;opacity:.3;pointer-events:none}
.motion .w-live .phone{display:block}
@media(min-width:761px) and (max-width:1100px){
 .seated-scene{right:2%;height:82%;bottom:5%}.motion .intro,.motion .outro{left:6%;max-width:37%}.motion .intro .introh,.motion .outro h2{font-size:clamp(35px,5vw,52px)}
 .motion .w-build{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
}
@media(max-width:760px){
 .seated-scene{right:auto;left:50%;translate:-50% 0;height:64%;bottom:0;max-width:95%;width:auto}
 .motion .intro,.motion .outro{top:5%;left:22px;right:22px;max-width:none;text-align:center}.motion .intro .introh,.motion .outro h2{font-size:clamp(31px,8.4vw,43px);line-height:1.04;margin-block:10px}
 .motion .intro p,.motion .outro p{font-size:12px;line-height:1.5;margin-inline:auto;max-width:34ch}.motion .cue{justify-content:center;font-size:8px;margin-top:15px}.motion .cue::after{height:18px}
 .motion .outro .row{justify-content:center;margin-top:12px}.motion .outro .btn{padding:10px 12px;font-size:11px}
 .motion .room .glow{right:-10%;bottom:2%;width:110%}.motion .room .rings{right:5%;bottom:10%;width:90%}
 .lid-cover{gap:5px}.lid-cover>span{font-size:28px}.lid-cover>i{font-size:5px}
 .motion .w-skills{padding:12px;gap:4px;overflow:visible;height:calc(100% - 16px)}.skills-note{font-size:8px;letter-spacing:0;padding-bottom:8px}.skills-note>span:last-child{display:none}
 .srow{grid-template-columns:62px minmax(0,1fr);gap:7px;padding:5px 0}.srow>b{font-size:11px}.srow>b small{display:none}.tiles-s{gap:4px}.sk{font-size:9px;padding:5px 6px;gap:3px}.sk i{font-size:7px;padding-left:3px}
 .motion .w-build{grid-template-columns:1fr;display:flex;flex-direction:column;gap:8px;overflow:hidden}.motion .w-build>.pane.code{height:60%;flex:none}.motion .w-build>.pane:last-child{display:block;height:calc(40% - 8px);padding:10px;overflow:hidden}.w-build .chatp{display:grid;grid-template-columns:1fr 1fr;gap:5px;height:auto}.w-build .chatp .bub{font-size:9px;line-height:1.35;padding:6px;max-width:100%}.w-build>.pane:last-child .pane-t{font-size:8px;margin-bottom:6px}.motion .code{font-size:9px;line-height:1.55;padding:12px}
 .motion .w-live{display:grid;grid-template-columns:minmax(0,1fr) 118px;gap:10px;align-items:center}.motion .w-live>.pane{padding:12px}.motion .w-live .phone{width:118px;rotate:2deg;border-radius:18px;padding:5px}.phone .ps{padding:22% 6% 10%;border-radius:13px;gap:6px}.phone .bub{font-size:9px;line-height:1.4;padding:6px}
 .w-live .dash-top{display:block}.w-live .dash-top strong{font-size:15px}.w-live .livebadge{font-size:8px;padding:4px 7px;margin-top:6px}.w-live .kpis{grid-template-columns:1fr;gap:5px}.w-live .kpi{padding:7px;display:flex;align-items:center;gap:8px}.w-live .kpi b{font-size:21px}.w-live .kpi span{font-size:8px}.w-live .slot{grid-template-columns:35px minmax(0,1fr);font-size:9px;padding:7px;gap:4px}.w-live .slot em{display:none}.w-live .dash{gap:10px}.w-live .ex-note{font-size:7px;line-height:1.5}
}
@media(max-width:380px){.rail button{padding:7px 5px;font-size:8px}.motion .w-live{grid-template-columns:minmax(0,1fr) 105px}.motion .w-live .phone{width:105px}.sk{font-size:8px;padding:4px 5px}.srow{grid-template-columns:55px minmax(0,1fr)}}
@media(max-height:740px) and (max-width:760px){
 .seated-scene{height:63%;bottom:-1%}.motion .intro .introh,.motion .outro h2{font-size:30px}.motion .intro p{font-size:11px}.motion .cue{margin-top:8px}
 .motion .code{font-size:8px;line-height:1.5}.w-build .chatp .bub{font-size:8px;padding:4px}.w-build>.pane:last-child .pane-t{margin-bottom:4px}.sk{padding:4px 5px;font-size:8px}.srow{padding:3px 0}.motion .w-live .phone{width:103px}.motion .w-live{grid-template-columns:minmax(0,1fr) 103px}.w-live .slot{padding:5px}.w-live .kpi{padding:5px}.w-live .kpi b{font-size:18px}
}
@media(prefers-reduced-motion:reduce){
 .room{height:720px}.seated-scene{height:72%;right:5%;bottom:0}.seated-scene .me{inset:0;right:auto;bottom:auto;width:100%;height:100%}.seated-scene .laptop{left:26.7%;top:39.05%;bottom:auto;width:41.5%;height:16.5%}.intro{top:15%;left:7%;right:auto;max-width:40%;text-align:left}.intro p{display:block}.outro{position:relative;left:auto;right:auto;max-width:700px;padding:40px 20px}.w-skills{gap:12px}.sk{will-change:auto}.w-build .code i{white-space:pre-wrap}.os-body{padding:20px}
}
@media(prefers-reduced-motion:reduce) and (max-width:760px){.room{height:700px;min-height:0}.seated-scene{height:62%;left:50%;right:auto}.intro{top:4%;left:20px;right:20px;max-width:none;text-align:center}.intro .introh{font-size:34px}.intro p{font-size:13px}.srow{grid-template-columns:62px minmax(0,1fr)}}

.motion .seated-scene .desk{display:none}
@media(max-width:760px){
 .motion .w-design{display:flex;flex-direction:column;gap:8px;overflow:hidden}
 .motion .w-design>.pane:first-child{display:block;height:37%;flex:none;padding:10px}
 .motion .w-design>.pane:last-child{height:calc(63% - 8px);padding:12px;overflow:auto}
 .w-design .wfgrid{grid-template-columns:1.5fr 1fr;grid-template-rows:auto 1fr;gap:5px;height:calc(100% - 20px)}
 .w-design .wf.head{font-size:8px;padding:5px 7px}.w-design .wf.head .wf-r{display:none}
 .w-design .wf.main{grid-row:2;grid-column:1;padding:5px 7px;font-size:8px;line-height:1.4}
 .w-design .wf.cal{grid-row:2;grid-column:2;font-size:8px;padding:5px 7px}.w-design .wf.hot,.w-design .wf.side{display:none}
 .w-design .wf-line{height:4px;margin-block:4px}.w-design .wf-chip{padding:0 3px;margin:3px 2px 0 0;font-size:7px}
 .w-design .pane-t{font-size:8px;margin-bottom:7px}.w-design .flow{gap:7px}.w-design .fnode{font-size:9px;padding:5px 7px}.w-design .farrow{font-size:10px}
 .w-design .decisions{gap:8px}.w-design .decisions li{font-size:10px;line-height:1.4}
 .w-design>.pane:last-child>.pane-t:nth-of-type(2){margin-top:10px!important}
}
@media(max-height:740px) and (max-width:760px){.w-design .decisions li{font-size:9px}.w-design .fnode{font-size:8px;padding:4px 6px}.w-design .decisions{gap:6px}.w-design .flow{gap:5px}}

@media(max-width:760px){
 .os-bar{height:62px;flex-direction:column;align-items:stretch;justify-content:center;gap:3px;padding:5px 14px;overflow:hidden}
 .os-name{display:block;font-size:7px;line-height:1.4;color:#8fa8c4;white-space:nowrap;letter-spacing:0;text-align:center}
 .rail button{padding-block:5px}
 .motion .film-meter{top:61px}.motion .chapter-head{top:82px}.motion .os-body{top:217px}
}
@media(max-height:740px) and (max-width:760px){.motion .chapter-head{top:77px}.motion .os-body{top:183px}}

@media(max-height:740px) and (max-width:760px){
 .motion .transcript{padding:8px;gap:4px}.motion .transcript .ln{font-size:10px;line-height:1.3;padding:4px 7px}.motion .transcript .ln b{font-size:7px;margin-bottom:1px}.motion .transcript .pane-t{font-size:8px;margin-bottom:4px}
 .motion .w-build>.pane.code{height:65%;font-size:7.5px;line-height:1.35;padding:10px}.motion .w-build>.pane:last-child{height:calc(35% - 8px);padding:8px}
 .motion .w-ship .scards{display:none}.motion .w-ship .term{flex:1;min-height:0;font-size:10px;line-height:1.9}
 .motion .w-live .dash{gap:7px;padding:10px}.w-live .dash-top strong{font-size:13px}.w-live .kpi{padding:4px 6px}.w-live .slot{padding:4px 5px;font-size:8px}.w-live .slots{gap:5px}.w-live .kpi span{font-size:7px}
}

.mobile-scope{display:none}
@media(max-width:760px){.mobile-scope{display:block;margin-top:7px;color:#8fe0b8;font:400 8px/1.5 var(--f-mono)}.mobile-scope strong{display:inline-block;font-weight:600;margin-top:4px;padding:3px 6px;border:1px solid #62b58c;border-radius:4px}}
@media(max-height:740px) and (max-width:760px){
 .motion .people{display:none}.motion .callgrid{display:flex;flex-direction:column}.motion .transcript{height:100%}.mobile-scope{font-size:7px;margin-top:4px}.mobile-scope strong{padding:2px 5px;margin-top:2px}
 .w-design .decisions li{font-size:8.5px;line-height:1.3}.w-design .decisions{gap:4px}.w-design>.pane:last-child>.pane-t:nth-of-type(2){margin-top:6px!important}.w-design .fnode{padding:3px 5px}
 .motion .code .pane-t{font-size:7px;line-height:1.2;margin-bottom:6px}.w-build .chatp .bub{font-size:7.5px;padding:4px}
}

@media(max-height:740px) and (max-width:760px){
 .motion .people{display:flex;flex:none}.motion .tiles{height:40px}.motion .tile{height:40px;aspect-ratio:auto}.motion .tile>span{font-size:7px;left:4px;bottom:4px;padding:1px 3px}.motion .tile .avatar-c{width:24px;font-size:10px}.motion .tile.me-tile img{object-fit:contain;object-position:center}.motion .tile .rec{display:none}
 .motion .callgrid{gap:6px}.motion .transcript{height:auto;flex:1;min-height:0}.motion .transcript .ln{font-size:9px;line-height:1.3;padding:3px 6px}.motion .transcript .ln b{font-size:6px}.motion .transcript{gap:3px}
}

/* Apple silhouette from apple.com navigation; text retains the former-employer context. */
.apple-mark{display:inline-block;width:13px;height:16px;vertical-align:-2px;margin-right:5px;fill:currentColor;flex:none}
.rtag.rt1::before{display:none}

/* The landing tells the story; detailed briefs live in the engineering library. */
.capability-overview{max-width:1160px;margin-inline:auto;padding-block:90px;scroll-margin-top:80px}
@media(max-width:760px){.capability-overview{padding-block:58px}}

/* A scroll-built architecture with seven connected layers. */
.capability-story{position:relative;display:flex;flex-direction:column;gap:25px;background:radial-gradient(ellipse at 70% 45%,color-mix(in srgb,var(--line) 9%,transparent),transparent 62%),var(--paper);border:1px solid var(--grid-strong);border-radius:18px;padding:32px;margin-bottom:50px;isolation:isolate}
.motion .capability-story{height:calc(100svh - var(--nav-h));max-height:960px;padding:28px 32px;gap:20px}
.capability-story-heading{display:flex;align-items:start;justify-content:space-between;gap:24px;flex:none}
.capability-story-heading .label{font-size:10px;letter-spacing:.15em}
.capability-story-heading h2{font-size:clamp(32px,4.1vw,54px);line-height:1.04;letter-spacing:-.04em;margin-top:12px}
.capability-story-heading h2 span{display:block}
.capability-story-heading h2 span:last-child{color:var(--signal)}
.capability-skip{border:1px solid var(--grid-strong);background:transparent;color:var(--muted);padding:10px 12px;font:500 10px var(--f-mono);border-radius:6px;white-space:nowrap;flex:none;text-decoration:none}
.capability-skip:hover{border-color:var(--line);color:var(--ink)}
.capability-story-body{display:grid;grid-template-columns:.85fr 1.15fr;gap:28px;align-items:center;flex:1;min-height:0}
.capability-panels{position:relative;height:290px;min-width:0}
.capability-panel{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;visibility:hidden;translate:0 12px;transition:opacity .22s ease,translate .22s ease;pointer-events:none}
.capability-panel.is-active{opacity:1;visibility:visible;translate:0 0;pointer-events:auto}
.capability-panel-kicker{display:flex;gap:12px;align-items:center;font:400 9px var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:18px}
.capability-panel-kicker>span:first-child{color:var(--signal)}
.capability-panel h3{font-size:clamp(25px,2.7vw,36px);letter-spacing:-.025em;line-height:1.1}
.capability-panel>p{font-size:14px;line-height:1.6;color:var(--muted);margin-top:12px;max-width:36ch}
.capability-panel>ul{padding:0;list-style:none;display:grid;gap:8px;margin:20px 0;font-size:12px;color:var(--ink)}
.capability-panel>ul li::before{content:"↳ ";color:var(--line)}
.capability-panel>a{display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:11px;color:var(--line);text-decoration:none;border-top:1px solid var(--grid-strong);padding-top:15px;max-width:40ch}
.capability-panel>a:hover{text-decoration:underline;text-underline-offset:4px}
.capability-network{position:relative;margin:0;width:100%;height:430px;min-width:0}
.motion .capability-network{height:100%;min-height:260px;max-height:500px}
.capability-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.capability-orbit{stroke:var(--grid-strong);stroke-width:1;fill:none;stroke-dasharray:3 6}
.capability-wire-guide{stroke:var(--grid-strong);stroke-width:1;fill:none}
.capability-wire{stroke:var(--line);stroke-width:2;fill:none;opacity:.4;transition:stroke .2s,opacity .2s}
.capability-wire.on{stroke:var(--signal);opacity:1;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--signal) 40%,transparent))}
.capability-wire.done{stroke:var(--ok);opacity:.55}
.capability-core{position:absolute;left:50%;top:50%;translate:-50% -50%;width:130px;height:114px;border:1px solid var(--line);border-radius:16px;background:var(--paper-2);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;box-shadow:0 0 50px color-mix(in srgb,var(--line) 10%,transparent)}
.capability-core>span{font:400 8px var(--f-mono);letter-spacing:.1em;color:var(--line)}
.capability-core strong{font:800 21px/1 var(--f-display);letter-spacing:-.03em;color:var(--ink)}
.capability-core i{font:400 7px var(--f-mono);font-style:normal;color:var(--muted)}
.capability-node{position:absolute;translate:-50% -50%;width:104px;height:67px;border:1px solid var(--grid-strong);border-radius:10px;background:var(--paper-2);display:flex;flex-direction:column;justify-content:center;gap:4px;padding:9px 10px;will-change:transform;box-shadow:0 10px 25px #0002;transition:border-color .2s,background .2s,color .2s}
.capability-node>span{font:400 7px var(--f-mono);color:var(--muted)}
.capability-node b{font:600 12px var(--f-display);color:var(--ink)}
.capability-node i{font:400 7px var(--f-mono);color:var(--muted);font-style:normal}
.capability-node.on{border-color:var(--signal);background:color-mix(in srgb,var(--signal) 9%,var(--paper-2))}
.capability-node.on b,.capability-node.on>span{color:var(--signal)}
.capability-node.done{border-color:color-mix(in srgb,var(--ok) 40%,var(--grid-strong))}
.capability-network figcaption{position:absolute;left:0;right:0;bottom:-10px;display:flex;justify-content:space-between;gap:8px;font:400 8px var(--f-mono);color:var(--muted)}
.capability-network-count{color:var(--signal);flex:none}
.capability-story-bottom{flex:none;margin-top:10px}
.capability-story-rail{display:flex;gap:6px}
.capability-story-rail button{flex:1;min-width:0;padding:10px 7px;border:1px solid var(--grid-strong);border-radius:6px;background:var(--paper-2);color:var(--muted);font:500 10px var(--f-mono);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px}
.capability-story-rail button>span{font-size:8px;opacity:.55}
.capability-story-rail button[aria-current]{border-color:var(--signal);color:var(--on-accent);background:var(--signal)}
.capability-story-rail button.done{color:var(--ok)}
.capability-story-rail button:hover{border-color:var(--line)}
.capability-story-progress{margin-top:12px;height:2px;background:var(--grid-strong);overflow:hidden}
.capability-story-progress b{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:var(--signal)}
.capability-story-hint{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:12px;font:400 9px var(--f-mono);color:var(--muted)}
.capability-story-hint a{color:var(--line);text-underline-offset:4px}
@media(max-width:860px){.capability-story{padding:22px}.motion .capability-story{padding:22px;gap:16px}.capability-story-heading{gap:16px}.capability-story-heading h2{font-size:36px}.capability-story-body{gap:15px;grid-template-columns:1fr 1.1fr}.capability-node{width:86px;height:61px;padding:7px 8px}.capability-node b{font-size:10px}.capability-core{width:110px;height:96px}.capability-core strong{font-size:18px}.capability-panel h3{font-size:28px}.capability-story-rail button{font-size:9px;gap:4px;padding:9px 5px}}
@media(max-width:600px){
 .capability-overview{padding-top:25px}.capability-story{padding:18px;margin-inline:-5px;border-radius:12px}.motion .capability-story{padding:18px 14px;gap:12px}
 .capability-story-heading{display:block}.capability-story-heading .label{font-size:8px;letter-spacing:.09em}.capability-story-heading h2{font-size:30px;line-height:1.05;margin-top:9px}.capability-skip{display:inline-block;font-size:8px;padding:6px 8px;margin-top:10px}
 .capability-story-body{display:flex;flex-direction:column-reverse;justify-content:center;gap:17px;align-items:stretch}
 .capability-network,.motion .capability-network{height:210px;min-height:0;max-height:210px;flex:none}
 .capability-panels{height:195px;flex:none}.capability-panel{justify-content:center}.capability-panel-kicker{font-size:7px;gap:9px;margin-bottom:9px}.capability-panel h3{font-size:24px}.capability-panel>p{font-size:12px;line-height:1.45;margin-top:7px;max-width:none}.capability-panel>ul{font-size:10px;gap:5px;margin:12px 0}.capability-panel>a{font-size:9px;padding-top:10px;max-width:none}
 .capability-node{width:73px;height:48px;padding:5px 6px;gap:2px;border-radius:7px}.capability-node b{font-size:9px}.capability-node>span{font-size:6px}.capability-node i{font-size:6px}.capability-core{width:88px;height:78px;border-radius:11px;gap:5px}.capability-core strong{font-size:15px}.capability-core>span{font-size:6px}.capability-core i{font-size:5px}.capability-network figcaption{font-size:6px;bottom:-9px}
 .capability-story-bottom{margin-top:0}.capability-story-rail{gap:4px}.capability-story-rail button{padding:6px 2px;font-size:7px;gap:3px;flex-direction:column;min-height:34px}.capability-story-rail button>span{font-size:6px}.capability-story-progress{margin-top:9px}.capability-story-hint{font-size:7px;margin-top:9px;gap:6px}.capability-story-hint>span{display:none}
}
@media(max-width:600px) and (max-height:740px){
 .motion .capability-story{padding:14px 12px;gap:8px}.capability-story-heading h2{font-size:26px}.capability-story-heading .label{font-size:7px}.capability-skip{font-size:7px;margin-top:7px;padding:5px 7px}.capability-story-body{gap:15px}.capability-network,.motion .capability-network{height:155px;max-height:155px}.capability-panels{height:185px}.capability-panel h3{font-size:21px}.capability-panel>p{font-size:11px}.capability-panel>ul{font-size:9px;margin:10px 0;gap:4px}.capability-node{width:67px;height:42px;padding:4px 5px}.capability-node b{font-size:8px}.capability-node i{display:none}.capability-core{width:76px;height:66px;gap:4px}.capability-core strong{font-size:13px}.capability-core i{display:none}.capability-network figcaption{font-size:5px;bottom:-10px}.capability-story-rail button{min-height:29px;font-size:6px}
}
@media(prefers-reduced-motion:reduce){.capability-story-rail,.capability-story-progress,.capability-story-hint>span{display:none}.capability-panel{transition:none}.capability-node{will-change:auto}.capability-wire{opacity:.65}.capability-story{height:auto;max-height:none}.capability-story-hint{margin-top:0}}
.capability-core{text-align:center}
@media(max-width:600px){.capability-story-rail button{min-height:40px;font-size:8px}}
@media(max-width:600px) and (max-height:740px){.capability-story-rail button{min-height:34px;font-size:7px}}

/* Trace the request: a route, rather than another card grid. */
.request-story{position:relative;margin-top:70px;padding:32px;border:1px solid var(--grid-strong);border-radius:20px;background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--signal) 5%,var(--paper)),var(--paper));display:flex;flex-direction:column;gap:20px;overflow:hidden}
.motion .request-story{height:calc(100svh - var(--nav-h));max-height:940px;margin-bottom:35px;justify-content:center}
.request-heading h3{font:800 clamp(28px,3.4vw,48px)/1.05 var(--f-display);letter-spacing:-.04em;margin-top:10px}
.request-heading h3 span{color:var(--signal)}
.request-heading p{color:var(--muted);font-size:13px;line-height:1.65;max-width:74ch;margin-top:14px}
.request-board{position:relative;height:300px;flex:none;margin:0 5%;isolation:isolate}
.request-board svg{position:absolute;width:100%;height:100%;inset:0;overflow:visible}
.request-guide{fill:none;stroke:var(--grid-strong);stroke-width:2}
#requestPath{fill:none;stroke:var(--signal);stroke-width:2.5;vector-effect:non-scaling-stroke}
#requestPacket{fill:var(--signal);filter:drop-shadow(0 0 8px var(--signal))}
.request-node{position:absolute;transform:translate(-50%,-50%);width:125px;padding:12px;background:var(--paper-2);border:1px solid var(--grid-strong);border-radius:12px;display:flex;flex-direction:column;gap:5px;box-shadow:0 10px 30px #0001;transition:border-color .25s,background .25s}
.request-node i{font:normal 9px var(--f-mono);color:var(--muted)}
.request-node b{font:700 18px var(--f-display)}
.request-node span{font:400 9px var(--f-mono);color:var(--muted);white-space:nowrap}
.request-node.on{border-color:var(--signal);background:color-mix(in srgb,var(--signal) 12%,var(--paper-2));box-shadow:0 0 25px color-mix(in srgb,var(--signal) 13%,transparent)}
.request-node.on i,.request-node.done i{color:var(--signal)}
.request-caption{display:flex;align-items:center;gap:22px;min-height:48px;padding-top:15px;border-top:1px solid var(--grid-strong)}
.request-caption>.label{flex:none;color:var(--signal)}
.request-caption p{font-size:14px;line-height:1.55;max-width:70ch}
.request-rail{display:flex;gap:6px}
.request-rail button{flex:1;min-width:0;font:500 11px var(--f-mono);border:1px solid var(--grid-strong);border-radius:7px;background:var(--paper-2);color:var(--muted);padding:10px 6px;cursor:pointer}
.request-rail button[aria-current=step]{color:var(--ink);border-color:var(--signal)}
.request-foot{display:flex;justify-content:space-between;gap:12px;font:400 10px var(--f-mono);color:var(--muted)}
.request-foot a{color:var(--line);text-underline-offset:4px}
.offer{will-change:transform;transition:border-color .25s}
.offers{overflow:visible;gap:10px;border:0;perspective:1000px}
.offers .offer{border:1px solid var(--grid-strong);border-radius:14px}
.offer:hover{border-color:var(--signal)}
.count{perspective:500px}.step{will-change:transform}
.opt{transition:background .2s,border-color .2s,transform .2s}.opt:hover{transform:translateY(-2px)}
@media(max-width:600px){
 .request-story{padding:20px 14px;gap:16px;margin-top:40px;margin-inline:-5px}
 .motion .request-story{padding:20px 14px;gap:16px}
 .request-heading h3{font-size:29px}.request-heading p{font-size:11px;line-height:1.55;margin-top:12px}
 .request-board{height:230px;margin-inline:0}.request-node{width:90px;padding:9px 7px;gap:4px}.request-node b{font-size:14px}.request-node span{font-size:6.7px}.request-node i{font-size:7px}
 .request-caption{gap:12px;min-height:64px}.request-caption p{font-size:12px}.request-caption>.label{font-size:8px}
 .request-rail{gap:4px}.request-rail button{font-size:8px;padding:10px 3px;min-height:36px}
 .request-foot{font-size:8px;line-height:1.6}.request-foot>span{max-width:15ch}.request-foot a{align-self:center}
}
@media(max-width:600px) and (max-height:740px){.motion .request-story{gap:12px;padding-block:14px}.request-heading h3{font-size:25px}.request-heading p{font-size:10px}.request-board{height:165px}.request-caption{min-height:53px;padding-top:10px}.request-caption p{font-size:11px}.request-foot{font-size:7px}}
@media(prefers-reduced-motion:reduce){.request-story{height:auto;max-height:none}.request-node{transition:none}.request-rail{display:none}.request-foot>span{display:none}.offer,.step{will-change:auto}.opt{transition:none}}
/* Keep both scroll stages inside a small phone's usable viewport. */
@media(max-width:600px) and (max-height:620px){
 .motion .capability-story{padding:12px;gap:8px}.capability-story-heading h2{font-size:23px;margin-top:8px}.capability-story-heading .label{font-size:7px}.capability-skip{padding:6px 8px;font-size:7px}
 .motion .capability-network{height:110px;min-height:110px}.capability-node{height:43px;width:65px;padding:5px}.capability-node b{font-size:8px}.capability-node span,.capability-node i{font-size:5px}.capability-core{height:62px;width:80px;padding:7px}.capability-core strong{font-size:12px}.capability-core>span,.capability-core i{font-size:5px}
 .capability-panels{height:158px}.capability-story-body{gap:8px}.capability-panel h3{font-size:22px}.capability-panel-kicker{margin-bottom:7px;font-size:7px}.capability-panel>p{font-size:10px;margin-top:7px;line-height:1.4}.capability-panel>ul{font-size:9px;gap:4px;margin-block:9px}.capability-panel>a{font-size:8px;padding-top:8px}.capability-network figcaption{font-size:6px}.capability-story-rail button{min-height:30px;font-size:6px}.capability-story-progress{margin-top:6px}.capability-story-hint{margin-top:6px}
 .motion .request-story{gap:10px;padding:12px}.request-heading h3{font-size:23px;margin-top:7px}.request-heading>.label{font-size:8px}.request-heading p{font-size:9px;margin-top:9px}.request-board{height:140px}.request-caption{min-height:46px}.request-caption p{font-size:10px}.request-rail button{font-size:7px;min-height:32px;padding:7px 2px}
}

/* Violet distinguishes AI; cyan carries actions and the active system path. */
.os{--signal:#67e8f9;--violet:#b7a4ff;--ok:#6ee7b7;--on-accent:#08111f}
.ai-core{border-color:var(--violet);color:var(--violet);box-shadow:0 0 24px color-mix(in srgb,var(--violet) 25%,transparent)}
.capability-overview:has(.capability-panel[data-area="agentic-engineering"].is-active) .capability-core>span{color:var(--violet)}

/* Opening workspace: the owner portrait leads the first viewport. */
html .developer-hero{height:calc(100svh - var(--nav-h));min-height:580px;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:20px;padding-block:24px;overflow:hidden}
.hero-copy{position:relative;z-index:2;min-width:0}
.hero-eyebrow{font-size:10px;letter-spacing:.07em;margin-bottom:22px;color:var(--signal)}
html .hero-title{font:800 clamp(38px,4.9vw,67px)/1.03 var(--f-display);letter-spacing:-.045em;text-wrap:initial}
.hero-title .hl{color:var(--signal)}
.hero-title .w{display:inline-block}
html .hero-description{margin-top:24px;max-width:44ch;font-size:16px;line-height:1.6;color:var(--muted)}
.hero-identity{margin-top:24px;display:flex;align-items:center;gap:11px;color:var(--ink);font-size:13px;line-height:1.4}
.hero-identity .apple-mark{width:18px;height:22px;margin:0;flex:none}
.hero-identity b{font-weight:600}.hero-identity small{display:block;font:10px/1.6 var(--f-mono);color:var(--muted);margin-top:3px}
.hero-cta{margin-top:26px;gap:10px}.hero-cta .btn{padding:14px 18px;font-size:13px}
.hero-scroll{display:flex;align-items:center;gap:12px;font:10px/1.5 var(--f-mono);color:var(--muted);margin-top:28px}
.hero-scroll-line{width:24px;height:1px;background:var(--signal);position:relative}.hero-scroll-line::after{content:"";width:4px;height:4px;background:var(--signal);position:absolute;right:0;top:-1.5px;border-radius:50%}
.hero-scene{position:relative;align-self:stretch;min-width:0;min-height:0;display:flex;flex-direction:column;justify-content:center}
.hero-scene-inner{position:relative;height:min(70svh,680px);width:100%;isolation:isolate;transform-origin:50% 55%}
.hero-aura{position:absolute;inset:6% -8%;z-index:-2;background:radial-gradient(ellipse at 44% 42%,color-mix(in srgb,var(--signal) 15%,transparent),transparent 58%),radial-gradient(ellipse at 75% 68%,color-mix(in srgb,var(--violet) 14%,transparent),transparent 53%)}
.hero-circuit{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible;color:var(--signal)}
.hero-orbit{fill:none;stroke:var(--grid-strong);stroke-width:1;stroke-dasharray:4 9}.hero-orbit-inner{stroke:color-mix(in srgb,var(--violet) 28%,transparent);stroke-dasharray:0}
.hero-wire{fill:none;stroke:var(--signal);stroke-width:1;opacity:.5}.hero-wire-dot{fill:var(--signal)}
.hero-portrait{position:absolute;left:50%;bottom:0;translate:-50% 0;height:96%;max-width:none;width:auto;object-fit:contain;filter:drop-shadow(0 18px 35px rgba(0,0,0,.24));z-index:1}
.hero-laptop-mark{position:absolute;z-index:2;left:49%;top:46.5%;translate:-50% 0;text-align:center;color:#b6f4fb;pointer-events:none}
.hero-laptop-mark b{font:800 clamp(19px,2.7vw,34px)/1 var(--f-display);letter-spacing:-.08em}.hero-laptop-mark span{display:block;font:7px var(--f-mono);letter-spacing:.08em;margin-top:6px;color:#d1eff4}
.hero-code{position:absolute;z-index:3;border:1px solid var(--grid-strong);border-radius:10px;background:color-mix(in srgb,var(--paper-2) 95%,transparent);box-shadow:0 15px 38px rgba(0,0,0,.15);overflow:hidden;backdrop-filter:blur(12px)}
.hero-editor{top:13%;left:-5%;width:220px;transform:rotate(-4deg)}
.hero-window-bar{display:flex;align-items:center;gap:4px;padding:9px 11px;border-bottom:1px solid var(--grid-strong);font:8px var(--f-mono);color:var(--muted)}
.hero-window-bar>i{width:4px;height:4px;border-radius:50%;background:var(--muted);opacity:.5}.hero-window-bar>span{margin-left:5px}.hero-window-bar>b{margin-left:auto;color:var(--mint);font-size:8px}
.hero-code-body{padding:12px 10px;font:9px/1.9 var(--f-mono);white-space:nowrap}.hero-code-body>span{display:block;width:100%;overflow:hidden;animation:hero-type 8s steps(35,end) infinite}.hero-code-body>span:nth-child(2){animation-delay:.4s}.hero-code-body>span:nth-child(3){animation-delay:.8s}.hero-code-body>span:nth-child(4){animation-delay:1.2s}
.hero-code-body i{color:var(--muted);opacity:.6;font-style:normal}.hero-code-body em{color:var(--violet);font-style:normal}.hero-code-body b{color:var(--signal);font-weight:400}.hero-code-body strong{color:var(--mint);font-weight:400}.hero-code-body u{display:inline-block;width:4px;height:10px;background:var(--signal);vertical-align:middle;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes hero-type{0%{clip-path:inset(0 100% 0 0)}28%,88%{clip-path:inset(0)}100%{clip-path:inset(0 100% 0 0)}}
.hero-terminal{right:3%;bottom:15%;width:230px;transform:rotate(3deg)}.hero-terminal-body{padding:13px;font:9px/1.9 var(--f-mono)}.hero-terminal-body>span{display:block;color:var(--muted)}.hero-terminal-body>strong{display:block;color:var(--mint);font-weight:400;font-size:9px}.hero-terminal-body small{display:block;color:var(--muted);font-size:7px;margin-top:6px}
.hero-float{position:absolute;z-index:0;font:10px var(--f-mono);color:var(--signal);animation:float 5s ease-in-out infinite}.hero-float-a{right:0;top:30%;transform:rotate(8deg)}.hero-float-b{left:0;bottom:28%;color:var(--violet);animation-delay:-2s}
.hero-phase-rail{display:flex;gap:10px;align-items:center;justify-content:center;position:relative;z-index:4;margin-top:15px}
.hero-phase-rail button{border:0;background:none;color:var(--muted);font:10px var(--f-mono);padding:7px 4px;cursor:pointer;white-space:nowrap}.hero-phase-rail button i{font-style:normal;opacity:.6;font-size:8px;margin-right:4px}.hero-phase-rail button[aria-current]{color:var(--signal)}.hero-phase-rail>span{width:18px;height:1px;background:var(--grid-strong)}
[data-hero-phase="1"] .hero-editor,[data-hero-phase="2"] .hero-terminal{border-color:color-mix(in srgb,var(--signal) 60%,var(--grid-strong))}
@media(min-width:761px) and (max-height:720px){html .developer-hero{min-height:0}.hero-eyebrow{margin-bottom:12px}html .hero-title{font-size:46px}html .hero-description{font-size:14px;margin-top:16px}.hero-identity{margin-top:16px}.hero-cta{margin-top:18px}.hero-scroll{margin-top:18px}.hero-editor{left:-5%;width:215px}.hero-terminal{right:-2%;bottom:12%;width:220px}}
@media(max-width:760px){
 html .developer-hero{min-height:0;height:calc(100svh - var(--nav-h));grid-template-columns:1fr;grid-template-rows:minmax(0,.49fr) minmax(0,.51fr);gap:0;padding:8px 0 16px}
 .hero-scene{grid-row:1;justify-content:flex-end}.hero-copy{grid-row:2;align-self:center;text-align:center}
 .hero-scene-inner{height:100%;width:min(100%,420px);margin-inline:auto}.hero-portrait{height:100%}.hero-aura{inset:-4% -10%}
 .hero-phase-rail{margin-top:0;gap:7px}.hero-phase-rail button{font-size:9px;padding:5px 3px}.hero-phase-rail>span{width:12px}
 .hero-eyebrow{font-size:8px;letter-spacing:.04em;margin-bottom:10px}
 html .hero-title{font-size:clamp(28px,7.8vw,42px);line-height:1.03;letter-spacing:-.04em}
 html .hero-description{font-size:12px;line-height:1.45;margin:12px auto 0;max-width:38ch}
 .hero-identity{font-size:11px;margin-top:12px;justify-content:center;gap:8px}.hero-identity .apple-mark{width:13px;height:16px}.hero-identity small{font-size:8px;margin-top:1px}
 .hero-cta{margin-top:14px;justify-content:center;gap:8px}.hero-cta .btn{font-size:11px;padding:12px 14px}
 .hero-scroll{font-size:8px;justify-content:center;margin-top:13px;gap:8px}.hero-scroll-line{width:16px}
 .hero-editor{width:135px;top:12%;left:0;border-radius:7px}.hero-window-bar{padding:6px 8px;font-size:6px}.hero-window-bar>i{width:3px;height:3px}
 .hero-code-body{font-size:5.7px;line-height:1.9;padding:7px}.hero-code-body u{height:7px;width:3px}
 .hero-terminal{width:180px;bottom:8%;right:3%;border-radius:7px}.hero-terminal-body{padding:8px;font-size:7px}.hero-terminal-body>strong{font-size:6.5px}.hero-terminal-body small{font-size:5.5px;margin-top:3px}
 .hero-laptop-mark{top:44%;}.hero-laptop-mark b{font-size:20px}.hero-laptop-mark span{font-size:5px;margin-top:3px}
 .hero-float{font-size:7px}.hero-float-a{top:42%;right:5%}.hero-float-b{bottom:28%;left:3%}
}
@media(max-width:760px) and (max-height:660px){
 html .developer-hero{grid-template-rows:minmax(0,.51fr) minmax(0,.49fr);padding:4px 0 10px}
 .hero-eyebrow{margin-bottom:6px;font-size:7px}html .hero-title{font-size:27px}html .hero-description{display:none}.hero-identity{margin-top:10px;font-size:10px}.hero-identity small{font-size:7px}.hero-cta{margin-top:12px}.hero-cta .btn{font-size:10px;padding:10px 12px}.hero-scroll{margin-top:10px;font-size:7px}
 .hero-editor{width:115px;left:0;top:8%}.hero-code-body{font-size:4.9px}.hero-terminal{width:156px;bottom:7%;right:3%}.hero-terminal-body{font-size:6px}.hero-terminal-body>strong{font-size:5.7px}.hero-terminal-body small{display:none}.hero-laptop-mark b{font-size:16px}.hero-laptop-mark span{font-size:4px}
}
@media(prefers-reduced-motion:reduce){html .developer-hero{height:auto;min-height:calc(100svh - var(--nav-h))}.hero-scene-inner{height:min(70svh,680px)}.hero-code-body>span{clip-path:none}.hero-phase-rail{display:none}}
@media(prefers-reduced-motion:reduce) and (max-width:760px){html .developer-hero{grid-template-rows:auto auto;padding-block:15px 30px;gap:20px}.hero-scene-inner{height:300px}.hero-description{display:block}}

/* The film camera travels around the lid before its final forward approach. */
.motion .stage{perspective:1400px;perspective-origin:50% 50%}
.motion .room{overflow:visible;transform-style:preserve-3d}
.motion .seated-scene,.motion .seated-scene .laptop{transform-style:preserve-3d}
.motion .seated-scene .lscreen{overflow:visible;transform-style:preserve-3d;background:#080d19;box-shadow:0 0 0 3px #364359,0 12px 24px #0006}
.motion .seated-scene .lscreen::after{content:"";position:absolute;top:0;right:-5px;width:6px;height:100%;transform:rotateY(90deg);transform-origin:left center;background:linear-gradient(90deg,#6b7790,#182235);pointer-events:none}
.motion .seated-scene .lscreen .inner{overflow:hidden;background:var(--scr);backface-visibility:hidden}
.motion .os{will-change:transform,opacity;backface-visibility:hidden}
@media(max-width:760px){.motion .stage{perspective:1000px}}

.motion .stage{background:linear-gradient(145deg,#0a1731,#122848)}