/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --ink:#0a0a0a;
  --paper:#ffffff;
  --mute:#8e8e8e;
  --hair:rgba(10,10,10,.13);
  --hair-soft:rgba(10,10,10,.06);

  /* Libre Baskerville carries the Latin. Everything else falls through to a
     matching system serif — two scripts side by side is the whole point. */
  --serif:"Libre Baskerville","Songti SC","Source Han Serif SC","Hiragino Mincho ProN",
          "AppleMyungjo","Apple SD Gothic Neo","Noto Serif CJK SC",Georgia,serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;

  /* One easing for entrances (expo-out), one for loops. */
  --out:cubic-bezier(.16,1,.3,1);
  --soft:cubic-bezier(.45,0,.25,1);

  --gut:clamp(24px,6vw,96px);
  --max:1100px;

  /* The HUD capsule is a sheet of glass over whatever section it's in —
     these are its only theme-dependent surfaces, so .hud never needs its
     own light/dark rules. On white paper there's nothing behind the blur
     to show through, so the border and shadow carry the "floating card"
     read instead of the tinted fill that does it on black. */
  --glass:rgba(10,10,10,.025);
  --glass-border:rgba(10,10,10,.16);
  --glass-shadow-1:rgba(10,10,10,.06);
  --glass-shadow-2:rgba(10,10,10,.16);
  --dim:rgba(10,10,10,.34);
}
.invert{
  --ink:#ffffff;
  --paper:#000000;
  --mute:#7e7e7e;
  --hair:rgba(255,255,255,.15);
  --hair-soft:rgba(255,255,255,.07);
  --glass:rgba(255,255,255,.04);
  --glass-border:rgba(255,255,255,.15);
  --glass-shadow-1:rgba(0,0,0,.4);
  --glass-shadow-2:rgba(0,0,0,.5);
  --dim:rgba(255,255,255,.4);
  background:var(--paper);
  color:var(--ink);
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:16px;line-height:1.75;
  overflow-x:hidden;
}
h1,h2,h3,p{margin:0}
a{color:inherit}
/* width:100% matters inside the hero's flex column — an auto margin there
   would otherwise shrink-wrap the block and centre it off the grid. */
.wrap{
  width:100%;max-width:var(--max);margin:0 auto;
  padding-right:max(var(--gut),env(safe-area-inset-right,0px));
  padding-left:max(var(--gut),env(safe-area-inset-left,0px));
}
section{position:relative;padding:clamp(104px,16vh,190px) 0}

.display{font-size:clamp(42px,7.4vw,92px);line-height:1.04;letter-spacing:-.04em}

/* The second line rolls through languages, so the page never reads as
   "the Chinese app". One phrase leaves upward as the next arrives. */
/* Clips vertically only. overflow:hidden would also cut phrases that run
   wider than the line above them, which most translations do. */
.roll{
  display:block;position:relative;height:1.2em;margin-top:.22em;
  clip-path:inset(0 -100vw 0 0);
}
.roll b{
  position:absolute;left:0;top:0;white-space:nowrap;font-weight:400;
  transform:translate3d(0,108%,0);opacity:0;
  transition:transform .9s var(--out),opacity .55s var(--soft);
  will-change:transform,opacity;
}
.roll b.on{transform:none;opacity:1}
.roll b.off{transform:translate3d(0,-108%,0);opacity:0}
.roll b.cjk{letter-spacing:.01em;font-size:.9em;top:.04em}
.h2{font-size:clamp(30px,4.4vw,54px);line-height:1.12;letter-spacing:-.032em}
.lede{font-size:clamp(16px,1.5vw,19px);line-height:1.7;color:var(--mute);max-width:32ch}
.eyebrow{font-family:var(--serif);font-size:14px;letter-spacing:0;color:var(--mute);line-height:1}

/* ============================================================
   MOTION PRIMITIVES
   ============================================================ */
.rise{
  opacity:0;transform:translate3d(0,14px,0);
  transition:opacity 1s var(--out),transform 1s var(--out);
  transition-delay:calc(var(--i,0) * 100ms);
  will-change:opacity,transform;
}
.in .rise{opacity:1;transform:none}

.rule{
  height:1px;background:var(--hair);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1.4s var(--out);
  transition-delay:calc(var(--i,0) * 100ms);
}
.in .rule{transform:scaleX(1)}

/* JS supplies a native, length-aware draw timeline. Keep CSS transitions out
   of the same property: Chrome otherwise tries to animate both the hidden
   setup state and the actual reveal. */
.draw path,.draw line,.draw circle,.draw rect,.draw polyline{
  stroke:var(--ink);fill:none;vector-effect:non-scaling-stroke;
  transition:none;
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition-duration:.01ms !important}
  .rise{opacity:1;transform:none}
  .rule{transform:scaleX(1)}
  .draw path,.draw line,.draw circle,.draw rect,.draw polyline{stroke-dashoffset:0 !important}
}

/* A backgrounded tab freezes the animation clock, so a screenshot or a
   tab-switch catches half-drawn lines and invisible text. Snap to the end
   state instead — delays have to go too, or they never elapse. */
html.settle *{transition-duration:0s !important;transition-delay:0s !important}
html.settle .sweep,html.settle .cue i::after{opacity:0 !important}
/* A settled page must show complete glyphs, never preserve a half-drawn
   frame from a suspended browser tab. */
html.settle .draw path,html.settle .draw line,html.settle .draw circle,
html.settle .draw rect,html.settle .draw polyline{
  stroke-dasharray:none !important;stroke-dashoffset:0 !important;
}

/* ============================================================
   NAV
   ============================================================ */
nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px max(var(--gut),env(safe-area-inset-right,0px)) 22px max(var(--gut),env(safe-area-inset-left,0px));
  color:#0a0a0a;background:transparent;
  isolation:isolate;
  opacity:0;
  transition:opacity 1.2s var(--out) .3s;
}
html.ready nav{opacity:1}
/* Keep the blur on its own persistent layer. Toggling backdrop-filter on the
   fixed nav itself can briefly drop its descendants during compositing. */
nav::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:rgba(255,255,255,.8);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  backdrop-filter:blur(18px) saturate(1.15);
  border-bottom:1px solid rgba(10,10,10,.075);
  box-shadow:0 10px 30px rgba(10,10,10,.045);
  opacity:0;transition:opacity .45s var(--soft);
}
nav.scrolled::before{opacity:1}
nav .mark{font-size:14.5px;letter-spacing:-.02em}
nav .links{display:flex;align-items:center;gap:26px;font-family:var(--serif);font-size:14.5px;letter-spacing:-.01em}
nav a{text-decoration:none;opacity:.6;transition:opacity .5s var(--soft)}
nav a:hover{opacity:1}
nav a[aria-current]{opacity:1}

/* The GitHub mark, sized to sit on the same optical line as the labels.
   It is a solid glyph — never give it a stroke, which thickens the octocat
   into an unrecognisable blob. */
.gh{display:inline-block;width:15px;height:15px;fill:currentColor;stroke:none;vertical-align:-3px}
nav .gh{width:16px;height:16px;vertical-align:-1px}
.btn .gh{width:14px;height:14px;fill:var(--paper);vertical-align:-2px}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:104px 0 0;
}
/* Smaller than the section headings elsewhere — the hero has to carry a
   two-line headline plus a call to action above the fold. */
.hero .display{font-size:clamp(26px,4vw,46px);max-width:44ch;line-height:1.28}
.hero .lede{margin-top:30px;max-width:51ch}

/* Rolling code-switched examples — hidden for now, not removed. app.js still
   populates and cycles it; this just keeps it out of layout and view. */
.hero .roll{display:none}

.cue{
  margin-top:34px;padding:0 0 26px;
  display:flex;align-items:center;gap:14px;
  font-family:var(--serif);font-size:13.5px;letter-spacing:0;color:var(--mute);
}
.cue i{display:block;width:40px;height:1px;background:var(--hair);position:relative;overflow:hidden}
.cue i::after{
  content:"";position:absolute;inset:0;background:var(--ink);
  transform:translateX(-100%);
  animation:cue 2.8s var(--soft) infinite;
}
@keyframes cue{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}

/* The demo puts the app's HUD over a familiar Mac writing surface, then
   mirrors the finished transcript into the document. */
.dictation-demo{
  display:flex;flex-direction:column;align-items:center;
  margin-top:clamp(54px,8vh,88px);
}
.mac-window{
  --scene-bg:#fff;--scene-ink:#0a0a0a;--scene-mute:#8e8e8e;
  position:relative;
  width:min(760px,100%);height:clamp(210px,28vw,286px);
  border:1px solid var(--hair);border-radius:16px;
  background:var(--scene-bg);color:var(--scene-ink);overflow:hidden;
  box-shadow:0 20px 70px rgba(10,10,10,.08);
  transition:background .6s var(--soft),color .6s var(--soft);
}
.mac-window[data-scene="terminal"],.mac-window[data-scene="code"]{
  --scene-bg:#fbfbfb;--scene-ink:#111;--scene-mute:#8a8a8a;
}
.mac-titlebar{
  position:relative;z-index:10;
  height:45px;padding:0 17px;border-bottom:1px solid var(--hair-soft);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  background:var(--scene-bg);font-size:12.5px;color:var(--scene-mute);
  transition:background .6s var(--soft),color .6s var(--soft);
}
.window-controls{display:flex;gap:7px}
.window-controls i{display:block;width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.18)}
.window-controls i:nth-child(1){background:#ff5f57}
.window-controls i:nth-child(2){background:#febc2e}
.window-controls i:nth-child(3){background:#28c840}
.window-state{text-align:right;font-size:12px}
#sceneTitle,#sceneState{transition:opacity .32s var(--soft),transform .48s var(--out)}
.mac-window[data-scene="terminal"] .mac-titlebar,.mac-window[data-scene="code"] .mac-titlebar{border-bottom-color:#e8e8e8}
.scene-stack{position:absolute;z-index:1;inset:45px 0 0;overflow:hidden}
.app-scene{
  position:absolute;inset:0;opacity:0;transform:scale(.992);
  transition:opacity .24s var(--soft),transform .42s var(--out);
}
.mac-window[data-scene="note"] .scene-note,
.mac-window[data-scene="terminal"] .scene-terminal,
.mac-window[data-scene="chat"] .scene-chat,
.mac-window[data-scene="code"] .scene-code{opacity:1;transform:none}
.mac-window.switching .app-scene{opacity:0;transform:scale(.992)}

/* Generic writing app: a notes list beside an open page. */
.scene-note{display:grid;grid-template-columns:26% 1fr;background:#fff}
.note-sidebar{padding:20px 16px;background:#f6f6f4;border-right:1px solid rgba(10,10,10,.07)}
.note-sidebar b{display:block;width:48%;height:9px;margin-bottom:18px;border-radius:5px;background:#b8b8b3}
.note-sidebar i{display:block;width:100%;height:34px;margin-bottom:9px;border-radius:8px;background:#e4e4e1}
.note-sidebar i:nth-of-type(2){background:#ececea}
.note-paper{padding:28px 34px}

/* Generic command-line workspace. */
.scene-terminal{padding:24px 30px;background:#fbfbfb;color:#333;font:12px/1.8 var(--mono)}
.scene-terminal p{margin:0}.scene-terminal b{color:#111;font-weight:400}.terminal-dim{color:#999}

/* Generic team chat: channel rail and a thread, without copied branding. */
.scene-chat{display:grid;grid-template-columns:27% 1fr;background:#fafafa}
.chat-sidebar{padding:22px 18px;background:#f0f0f0;border-right:1px solid #e2e2e2}
.chat-sidebar b,.chat-sidebar i{display:block;height:7px;margin-bottom:14px;border-radius:4px;background:#d0d0d0}
.chat-sidebar b{width:54%;height:9px;background:#aaa}
.chat-sidebar i:nth-of-type(1){width:76%}.chat-sidebar i:nth-of-type(2){width:61%}.chat-sidebar i:nth-of-type(3){width:82%}.chat-sidebar i:nth-of-type(4){width:67%}
.chat-thread{padding:22px 30px}
.chat-thread > div{display:grid;grid-template-columns:24px 1fr;gap:11px;margin-bottom:22px}
.chat-thread b{width:24px;height:24px;border-radius:7px;background:#d1d1d1}
.chat-thread p{margin:2px 0 0}.chat-thread i{display:block;width:74%;height:7px;margin-bottom:7px;border-radius:4px;background:#dedede}
.chat-thread i:nth-child(2){width:46%}

/* Generic local coding-agent workspace. */
.scene-code{display:grid;grid-template-columns:25% 1fr;background:#fbfbfb;color:#777;font-family:var(--mono)}
.code-sidebar{padding:20px 16px;border-right:1px solid #e4e4e4;background:#f2f2f2}
.code-sidebar small{display:block;margin-bottom:16px;font-size:9px;letter-spacing:.12em;color:#999}
.code-sidebar i{display:block;width:78%;height:6px;margin-bottom:11px;border-radius:3px;background:#d6d6d6}
.code-sidebar i:nth-of-type(2){width:58%}.code-sidebar i:nth-of-type(3){width:69%}.code-sidebar i:nth-of-type(4){width:48%}
.code-editor{padding:23px 30px}
.code-editor i{display:block;width:62%;height:6px;margin-bottom:12px;border-radius:3px;background:#dedede}
.code-editor i:nth-child(2){width:83%}.code-editor i:nth-child(3){width:54%}.code-editor i:nth-child(4){width:72%}.code-editor i:nth-child(5){width:44%}

.insert-stage{
  position:absolute;z-index:5;top:88px;left:31%;right:42px;
  color:var(--scene-ink);
  transition:opacity .3s var(--soft),transform .6s var(--out),top .6s var(--out),left .6s var(--out),right .6s var(--out),background .6s var(--soft),color .6s var(--soft);
}
.mac-window.switching .insert-stage,.mac-window.switching #sceneTitle,.mac-window.switching #sceneState{opacity:0;transform:translateY(3px)}
.mac-window[data-scene="terminal"] .insert-stage{top:115px;left:30px;right:30px;font-family:var(--mono)}
.mac-window[data-scene="chat"] .insert-stage{top:130px;left:34%;right:34px;padding:12px 15px;border:1px solid #e4e4e4;border-radius:11px;background:#fff;color:#111;box-shadow:0 7px 22px rgba(10,10,10,.06)}
.mac-window[data-scene="code"] .insert-stage{top:143px;left:31%;right:32px;padding:11px 14px;border:1px solid #dedede;border-radius:9px;background:#fff;font-family:var(--mono);box-shadow:0 6px 18px rgba(10,10,10,.05)}
.doc-label{
  font-family:var(--mono);font-size:10px;line-height:1;
  letter-spacing:.12em;text-transform:uppercase;color:var(--scene-mute);
}
.insert-line{
  margin-top:20px;width:100%;max-width:none;text-wrap:pretty;
  font-size:clamp(16px,2vw,22px);line-height:1.65;
  transition:opacity .09s var(--soft);
}
.mac-window[data-scene="terminal"] .insert-line,.mac-window[data-scene="code"] .insert-line{margin-top:9px;font-size:14px;line-height:1.55}
.mac-window[data-scene="chat"] .insert-line{margin-top:7px;font-size:14px;line-height:1.5}
.insert-line span{display:inline-block}
.insert-line .placeholder{color:var(--scene-mute)}
.insert-line.changing{opacity:0}
.insert-line .fresh{animation:insert .38s var(--out) both}
@keyframes insert{
  from{opacity:.35;clip-path:inset(0 100% 0 0)}
  to{opacity:1;clip-path:inset(0 0 0 0)}
}
.insert-caret{
  display:inline-block;width:1px;height:1.05em;margin-left:2px;
  background:currentColor;vertical-align:-.14em;animation:blink 1.15s steps(1) infinite;
  transition:opacity .1s var(--soft);
}
.insert-line.changing .insert-caret,.insert-line.inserting .insert-caret{opacity:0;animation:none}
.dictation-demo .hud{position:relative;z-index:2;margin-top:clamp(18px,3vw,28px)}
.dictation-steps{
  margin-top:30px;display:flex;align-items:center;justify-content:center;
  gap:16px;flex-wrap:wrap;color:var(--mute);font-size:13.5px;
}
.dictation-steps span{display:inline-flex;align-items:center;gap:8px}
.dictation-steps > i{display:block;width:28px;height:1px;background:var(--hair)}
.dictation-steps kbd{
  padding:5px 8px;border:1px solid var(--hair);border-radius:6px;
  background:var(--paper);color:var(--ink);font:12px/1 var(--mono);
  box-shadow:0 1px 0 var(--hair);
}

/* ============================================================
   HUD — the app's own capsule. Lives in the hero now, so every
   surface below is a theme token — see --glass and --dim in TOKENS —
   rather than a color baked in for the old black section.
   ============================================================ */
.hud{
  margin-top:clamp(48px,8vh,88px);
  display:inline-flex;align-items:center;gap:20px;
  padding:19px 26px;
  border:1px solid var(--glass-border);
  border-radius:26px;
  background:var(--glass);
  backdrop-filter:blur(20px);
  box-shadow:0 1px 2px var(--glass-shadow-1),0 20px 56px var(--glass-shadow-2);
  max-width:min(780px,100%);
  opacity:0;transform:translate3d(0,20px,0) scale(.985);
  transition:opacity 1.1s var(--out) .62s,transform 1.1s var(--out) .62s;
}
.in .hud{opacity:1;transform:none}

/* The leading slot holds the meter and the checkmark in the same place and
   resizes between them, so the capsule never jumps at the hand-off.
   14 bars x 3px + 13 gaps x 3px = 81px. */
.hud .slot{position:relative;flex:0 0 auto;width:81px;height:26px;transition:width .5s var(--out)}
.hud[data-phase="done"] .slot{width:24px}

.hud .meter{
  position:absolute;inset:0;display:flex;align-items:center;gap:3px;
  transition:opacity .3s var(--soft);
}
.hud[data-phase="done"] .meter{opacity:0}
.hud .meter s{
  display:block;width:3px;height:26px;border-radius:2px;background:var(--ink);
  transform:scaleY(.115);transform-origin:center;
}

.hud .check{
  position:absolute;left:0;top:1px;width:24px;height:24px;
  opacity:0;transform:scale(.4);
  transition:opacity .35s var(--out),transform .5s var(--out);
}
.hud[data-phase="done"] .check{opacity:1;transform:none}
.hud .check svg{width:100%;height:100%;display:block}
.hud .check path{
  stroke:var(--ink);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:34;stroke-dashoffset:34;
}
.hud[data-phase="done"] .check path{animation:tick .5s var(--out) .12s forwards}
@keyframes tick{to{stroke-dashoffset:0}}

/* The line is a window whose width is animated to the end of the last token
   revealed. Growth glides instead of stepping once per character. */
.hud .line{
  position:relative;overflow:hidden;white-space:nowrap;
  width:0;transition:width .2s var(--out);
  font-size:clamp(15px,1.5vw,19px);line-height:1.5;text-align:left;
}
.hud .inner{display:inline-block;white-space:nowrap}

/* One class toggle does both halves of the settle: the token fades in dim,
   then turns solid on a delay — a trailing wave of uncertainty rather than a
   hard cut-off N characters back. */
.hud .tok{
  opacity:0;color:var(--dim);
  transition:opacity .12s var(--soft),color .22s var(--soft) .12s;
}
.hud .tok.shown{opacity:1;color:var(--ink)}

.hud .caret{
  position:absolute;left:0;top:50%;width:1px;height:.95em;background:var(--ink);
  transform:translate3d(0,-50%,0);
  transition:transform .15s var(--out),opacity .12s var(--soft);
  animation:blink 1.15s steps(1) infinite;
}
@keyframes blink{0%,55%{opacity:1}56%,100%{opacity:0}}
.hud[data-phase="done"] .caret{opacity:0;animation:none}

.legend{
  margin-top:32px;display:flex;gap:30px;justify-content:center;flex-wrap:wrap;
  font-family:var(--serif);font-size:14px;letter-spacing:0;color:var(--mute);
}
.legend span{display:inline-flex;align-items:center;gap:9px}
.legend em{width:15px;height:1px;background:var(--ink);display:block;font-style:normal}
.legend .dim em{background:var(--dim)}

/* ============================================================
   PRINCIPLES
   ============================================================ */
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(38px,5vw,74px);margin-top:clamp(58px,8vh,96px)}
.cols.cols-4{grid-template-columns:repeat(2,1fr);row-gap:clamp(56px,8vh,96px)}
.cell .glyph{height:104px;margin-bottom:32px}
.cell .glyph svg{width:auto;height:100%;display:block;overflow:visible}
.cell h3{font-size:21px;letter-spacing:-.02em;line-height:1.3;margin-bottom:12px;font-weight:400}
.cell p{font-size:14.5px;color:var(--mute);line-height:1.7;max-width:27ch}

/* ============================================================
   VOICE SHORTCUTS — spoken trigger becomes reusable text
   ============================================================ */
.feature-split,.model-layout{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(54px,8vw,112px);align-items:center;
}
.feature-copy{margin-top:26px;max-width:42ch;font-size:16.5px;line-height:1.8;color:var(--mute)}
.shortcut-section{padding-top:clamp(84px,12vh,150px)}
.shortcut-demo{
  padding:24px 26px 22px;border:1px solid var(--hair);border-radius:18px;
  background:var(--paper);box-shadow:0 18px 60px rgba(10,10,10,.07);
}
.shortcut-topline{
  display:flex;justify-content:space-between;gap:20px;padding-bottom:18px;
  border-bottom:1px solid var(--hair-soft);font:11px/1 var(--mono);
  letter-spacing:.08em;text-transform:uppercase;color:var(--mute);
}
.shortcut-state{color:var(--ink);letter-spacing:0;text-transform:none}
.shortcut-row{display:grid;grid-template-columns:82px 1fr;gap:18px;align-items:center}
.heard-row{padding:25px 0 20px}
.shortcut-label{font:11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.shortcut-heard{display:flex;align-items:center;gap:14px;min-width:0}
.shortcut-heard q{font-size:clamp(16px,2vw,20px);quotes:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shortcut-heard q::before,.shortcut-heard q::after{content:""}
.shortcut-meter{display:flex;align-items:center;gap:2px;width:23px;height:20px;flex:0 0 auto}
.shortcut-meter i{display:block;width:2px;height:18px;border-radius:2px;background:var(--ink);transform:scaleY(.18)}
.shortcut-meter i:nth-child(2),.shortcut-meter i:nth-child(4){height:13px}
.shortcut-meter i:nth-child(3){height:20px}
.shortcut-demo[data-phase="listen"] .shortcut-meter i{animation:shortcut-wave .72s var(--soft) infinite alternate}
.shortcut-demo[data-phase="listen"] .shortcut-meter i:nth-child(2){animation-delay:-.38s}
.shortcut-demo[data-phase="listen"] .shortcut-meter i:nth-child(3){animation-delay:-.18s}
.shortcut-demo[data-phase="listen"] .shortcut-meter i:nth-child(4){animation-delay:-.52s}
.shortcut-demo[data-phase="listen"] .shortcut-meter i:nth-child(5){animation-delay:-.28s}
@keyframes shortcut-wave{to{transform:scaleY(1)}}
.shortcut-path{position:relative;height:18px;margin-left:99px}
.shortcut-path i{position:absolute;left:0;top:50%;width:100%;height:1px;background:var(--hair)}
.shortcut-path b{
  position:absolute;left:0;top:50%;width:100%;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--out);
}
.shortcut-demo[data-phase="resolve"] .shortcut-path b{transform:scaleX(1)}
.result-row{padding:20px 0 18px}
.result-row p{
  margin:0;font:14px/1.6 var(--mono);overflow-wrap:anywhere;
  transition:opacity .25s var(--soft);opacity:.18;
}
.shortcut-demo[data-phase="resolve"] .result-row p{opacity:1;animation:shortcut-result .68s var(--out)}
@keyframes shortcut-result{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.shortcut-foot{padding-top:16px;border-top:1px solid var(--hair-soft);font-size:12.5px;color:var(--mute)}

/* ============================================================
   MODEL FLEXIBILITY — full-utterance passes settle into a stream
   ============================================================ */
.model-section{padding-top:clamp(72px,10vh,130px)}
.model-layout{margin-top:clamp(58px,8vh,92px);grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.model-demo{padding:24px;border:1px solid var(--hair);border-radius:18px;background:var(--paper)}
.model-source{
  display:flex;justify-content:space-between;gap:20px;align-items:baseline;
  padding-bottom:19px;border-bottom:1px solid var(--hair-soft);font-size:14px;
}
.model-source small{font:11px/1 var(--mono);color:var(--mute)}
.model-passes{padding:23px 0;display:flex;flex-direction:column;gap:16px}
.model-passes div{display:grid;grid-template-columns:62px 1fr;gap:14px;align-items:center}
.model-passes b{font:10px/1 var(--mono);font-weight:400;color:var(--mute)}
.model-passes div::after{content:"";height:1px;background:var(--hair);grid-column:2;grid-row:1}
.model-passes i{
  position:relative;z-index:1;display:block;grid-column:2;grid-row:1;
  width:var(--w);height:2px;border-radius:2px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform 1s var(--out);
}
.in .model-passes i{transform:scaleX(1)}
.model-passes div:nth-child(2) i{transition-delay:.18s}.model-passes div:nth-child(3) i{transition-delay:.36s}
.model-stream{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:18px 19px;border-radius:11px;background:var(--ink);color:var(--paper);
  font-size:13.5px;
}
.model-stream i{position:relative;width:54px;height:1px;background:rgba(255,255,255,.28);overflow:hidden}
.model-stream i::after{
  content:"";position:absolute;inset:0;background:#fff;transform:translateX(-100%);
  animation:model-stream 2.2s var(--soft) infinite;
}
@keyframes model-stream{60%,100%{transform:translateX(100%)}}

/* ============================================================
   THE IDEA — chunked vs whole
   ============================================================ */
.idea{display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,7vw,104px);align-items:center}
.idea .body{font-size:16.5px;line-height:1.8;color:var(--mute);max-width:36ch;margin-top:26px}
.idea .body strong{color:var(--ink);font-weight:400}

.diagram{display:flex;flex-direction:column;gap:54px}
.row .tag{font-family:var(--serif);font-size:14px;letter-spacing:0;color:var(--mute);margin-bottom:20px}
.row .track{position:relative;height:26px;overflow:hidden}

.seg{position:absolute;inset:0;display:flex;gap:16px;align-items:center}
.seg u{
  flex:1;height:1px;background:var(--ink);display:block;text-decoration:none;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .8s var(--out);
  transition-delay:calc(var(--i) * 150ms);
}
.in .seg u{transform:scaleX(1)}
.seg u::after{
  content:"";position:absolute;top:-5px;width:1px;height:11px;background:var(--ink);
  right:-8px;opacity:0;transition:opacity .6s var(--soft) 1.1s;
}
.in .seg u::after{opacity:.45}
.seg u:last-child::after{display:none}

.solo{position:absolute;inset:0;display:flex;align-items:center}
.solo u{
  width:100%;height:1px;background:var(--ink);display:block;
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1.2s var(--out) .1s;
}
.in .solo u{transform:scaleX(1)}

/* A pass sweeping from the origin, over and over. */
.sweep{
  position:absolute;top:0;bottom:0;left:0;width:26%;
  background:linear-gradient(90deg,transparent,var(--hair) 30%,rgba(10,10,10,.34) 62%,transparent);
  transform:translate3d(-120%,0,0);opacity:0;
}
.invert .sweep{background:linear-gradient(90deg,transparent,var(--hair) 30%,rgba(255,255,255,.38) 62%,transparent)}
.in .sweep{opacity:1;animation:pass 2.5s var(--soft) 1.2s infinite}
.row.slow .in .sweep,.in .row.slow .sweep{animation-duration:3.4s}
@keyframes pass{
  0%{transform:translate3d(-120%,0,0)}
  70%,100%{transform:translate3d(420%,0,0)}
}

/* ============================================================
   NUMBERS
   ============================================================ */
.figures{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(30px,5vw,68px);margin-top:clamp(48px,7vh,84px)}
.fig .n{font-size:clamp(46px,6.6vw,82px);line-height:1;letter-spacing:-.05em}
/* Units sit on the baseline beside the numeral, not raised — a superscript
   at this size reads as a footnote marker. */
.fig .n u{font-size:.3em;letter-spacing:-.01em;margin-left:.1em;color:var(--mute);text-decoration:none}
.fig .rule{margin-top:24px}
.fig .k{margin-top:20px;font-size:13.5px;color:var(--mute);line-height:1.65;max-width:24ch}

/* ============================================================
   SOURCE
   ============================================================ */
/* Shorter than the default section padding on the bottom — the braid
   section right after it brings its own (smaller) top padding, and the
   two shouldn't stack into one big gap before the sign-off. */
#source{padding-bottom:clamp(24px,3vh,48px)}
.source{text-align:center;display:flex;flex-direction:column;align-items:center}
.source .h2{max-width:14ch;margin-top:24px}
.source .lede{text-align:center;margin:22px auto 0}
/* The install command reads as a terminal box, not a pill — square-ish
   corners and a real size, because it is meant to be used, not admired. */
.cmd{
  margin-top:28px;
  display:inline-flex;align-items:center;gap:13px;
  font-family:var(--mono);font-size:15px;line-height:1;letter-spacing:.01em;
  text-decoration:none;
  padding:17px 19px;border-radius:12px;
  border:1px solid var(--hair);background:transparent;color:var(--ink);
  cursor:pointer;text-align:left;
  transition:border-color .5s var(--soft),transform .35s var(--out);
}
.cmd:hover{border-color:var(--ink)}
.cmd:active{transform:scale(.99)}
.cmd.copied{border-color:var(--ink)}
.cmd i{color:var(--mute);font-style:normal}
.cmd code{font:inherit}

/* Copy affordance: two glyphs stacked in one slot, cross-faded on success. */
.cmd .copy{position:relative;width:15px;height:15px;margin-left:5px;color:var(--mute);transition:color .4s var(--soft)}
.cmd:hover .copy{color:var(--ink)}
.cmd .copy svg{
  position:absolute;inset:0;width:15px;height:15px;
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  transition:opacity .3s var(--soft),transform .3s var(--out);
}
.cmd .ic-done{opacity:0;transform:scale(.5)}
.cmd.copied .ic-copy{opacity:0;transform:scale(.5)}
.cmd.copied .ic-done{opacity:1;transform:none;color:var(--ink)}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.btn{
  margin-top:24px;display:inline-flex;align-items:center;gap:11px;
  font-family:var(--serif);font-size:15px;letter-spacing:-.01em;
  text-decoration:none;padding:16px 30px;border-radius:999px;
  background:var(--ink);color:var(--paper);
  transition:transform .5s var(--out),opacity .4s var(--soft),box-shadow .4s var(--soft);
}
.btn:hover{transform:translate3d(0,-2px,0)}
.btn:active{transform:none;opacity:.82}

/* Outlined twin of .btn. The border is an inset shadow so both buttons keep
   identical padding and sit on exactly the same baseline. */
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.btn.ghost .gh{fill:var(--ink)}

/* Download arrow — stroked, unlike the solid GitHub mark. */
.dl{
  width:13px;height:13px;fill:none;stroke:currentColor;
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}

/* ============================================================
   HERO CALL TO ACTION
   ============================================================ */
.cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:38px}
.cta .btn{margin-top:0}
.hero .cmd{margin-top:22px}
.source .cmd{margin-top:40px}

/* ============================================================
   CLOSING BRAID — the page's sign-off. Two threads weave past each
   other and resolve into one line, full-bleed above the footer.
   Tighter than the default section padding — it's a flourish, not
   a content section, so it doesn't need that much air around it.
   ============================================================ */
.coda{padding:clamp(20px,3vh,40px) 0}
.braid{
  width:100%;
  pointer-events:none;
}
.braid svg{display:block;width:100%;height:auto}
.braid .thread{
  fill:none;stroke:var(--ink);stroke-width:1;
  vector-effect:non-scaling-stroke;
  transition:stroke-dashoffset 2.4s var(--out);
}
.braid .thread.b{transition-delay:.16s}
.braid .bead{fill:var(--ink);opacity:0}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.page{padding-top:clamp(150px,22vh,230px);padding-bottom:clamp(70px,10vh,110px)}
.page .display{max-width:14ch}
.page .lede{margin-top:30px;max-width:40ch}

.prose{max-width:52ch;font-size:17px;line-height:1.85;color:var(--mute)}
.prose p + p{margin-top:26px}
.prose strong{color:var(--ink);font-weight:400}

/* Key/value rows, hairline-separated — the app's About window, on the web. */
.spec{margin-top:clamp(44px,6vh,72px)}
.spec .row2{
  display:grid;grid-template-columns:minmax(140px,22%) 1fr;
  gap:20px;align-items:baseline;
  padding:20px 0;border-top:1px solid var(--hair-soft);
}
.spec .row2:last-child{border-bottom:1px solid var(--hair-soft)}
.spec .k2{font-family:var(--serif);font-size:15px;letter-spacing:0;color:var(--mute)}
.spec .v2{font-size:16.5px;line-height:1.6}

/* A single hairline that draws across, used to break the About page up. */
.seam{margin:clamp(70px,9vh,110px) 0}

@media (max-width:640px){
  .spec .row2{grid-template-columns:1fr;gap:6px}
}

/* The rule lives on an inner bar so it lines up with the text column
   rather than with the gutter. */
footer .bar{
  padding:44px 0;border-top:1px solid var(--hair-soft);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:var(--serif);font-size:14px;letter-spacing:0;color:var(--mute);
}
footer a{text-decoration:none;transition:color .4s var(--soft)}
footer a:hover{color:var(--ink)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:860px){
  .cols,.cols.cols-4,.figures,.idea,.feature-split,.model-layout{grid-template-columns:1fr;gap:56px}
  .hero .display{max-width:none}
  .hud{gap:14px;padding:16px 20px}
  nav .links a:first-child{display:none}
}
@media (max-width:560px){
  /* No room to keep a sentence on one line — let the capsule grow instead
     of clipping the half the reader most wants to see. */
  .hud{width:100%;gap:12px;padding:16px}
  .hud .line{
    flex:1 1 auto;min-width:0;width:auto !important;
    white-space:normal;overflow:hidden;font-size:14.5px;line-height:1.45;
  }
  .hud .inner{display:block;max-width:100%;white-space:normal;overflow-wrap:anywhere}
  .hud .caret{display:none}
  .mac-window{height:220px}
  .insert-stage{top:74px;left:31%;right:20px}
  .mac-window[data-scene="terminal"] .insert-stage{top:88px;left:22px;right:22px}
  .mac-window[data-scene="chat"] .insert-stage{top:96px;left:32%;right:18px;padding:9px 11px}
  .mac-window[data-scene="code"] .insert-stage{top:103px;left:30%;right:18px;padding:9px 11px}
  .insert-line{font-size:15px}
  .note-paper,.chat-thread,.code-editor{padding-left:18px;padding-right:18px}
  .dictation-steps{gap:11px 13px}
  .dictation-steps > i{width:18px}
}