:root{
  --bg:#EEF3F8; --bg-2:#E6EEF6; --warm:#FAF8F3; --paper:#FFFFFF;
  --ink:#14181E; --ink-2:#525B68; --ink-3:#8B95A3;
  --line:rgba(20,24,30,.10); --line-2:rgba(20,24,30,.05);
  --koi-blue:#A9CDEF; --koi-sky:#CFE6F7; --koi-coral:#F6A883; --koi-orange:#EF8A5C;
  --koi-mint:#B3E5D0; --koi-lav:#CCC6F2; --koi-gold:#F4D58D; --koi-rose:#F4B8C4;
  --accent:#5C6CF2; --accent-2:#8A7BF5; --accent-ink:#4453dd;
  --hl-green:#1f8f67; --hl-green-bg:#BEEDD5; --hl-yellow-bg:#FBE3A6; --hl-yellow:#a9791a;
  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --font:"Schibsted Grotesk",system-ui,sans-serif;
  --tc:"Noto Sans TC",system-ui,sans-serif; --tcs:"Noto Serif TC",serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}
*{ box-sizing:border-box; margin:0; padding:0; }
a{ color:inherit; text-decoration:none; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{ font-family:var(--font); background:var(--bg); color:var(--ink); font-size:18px; line-height:1.55; overflow-x:hidden; letter-spacing:-.011em; }
::selection{ background:rgba(92,108,242,.20); color:var(--ink); }
img{ display:block; max-width:100%; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes blink{ 50%{ opacity:0; } }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }
@keyframes floaty2{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-22px) rotate(2deg); } }
@keyframes waveBar{ from{ transform:scaleY(.28); } to{ transform:scaleY(1); } }
@keyframes inkA{ 0%,100%{ transform:translate(0,0) scale(1); } 33%{ transform:translate(8%,-6%) scale(1.18); } 66%{ transform:translate(-6%,7%) scale(.92); } }
@keyframes inkB{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-9%,8%) scale(1.22); } }
@keyframes inkC{ 0%,100%{ transform:translate(0,0) scale(1.05); } 50%{ transform:translate(7%,-9%) scale(.9); } }
@keyframes ringDrift{ 0%,100%{ transform:rotate(0deg) scale(1); } 50%{ transform:rotate(10deg) scale(1.04); } }
@keyframes haloPulse{ 0%{ transform:scale(.9); opacity:.5; } 100%{ transform:scale(1.7); opacity:0; } }
@keyframes marquee{ to{ transform:translateX(-50%); } }
@keyframes strikeLoop{ 0%,14%{ transform:scaleX(0); } 30%,86%{ transform:scaleX(1); } 95%,100%{ transform:scaleX(0); } }
@keyframes fillerFade{ 0%,30%{ opacity:1; } 50%,86%{ opacity:.4; } 95%,100%{ opacity:1; } }
@keyframes cleanLoop{ 0%,36%{ opacity:0; transform:translateY(12px); } 52%,88%{ opacity:1; transform:translateY(0); } 97%,100%{ opacity:0; transform:translateY(12px); } }
@keyframes micBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
@keyframes barEq{ 0%,100%{ transform:scaleY(.35); } 50%{ transform:scaleY(1); } }
@keyframes caret{ 50%{ opacity:0; } }
@keyframes cleanIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
@keyframes pillPop{ 0%{ transform:scale(.7); opacity:0; } 60%{ transform:scale(1.08); } 100%{ transform:scale(1); opacity:1; } }
@keyframes koiSwim{ 0%{ transform:translate(-12%,0) rotate(-6deg); } 50%{ transform:translate(10%,-8%) rotate(4deg); } 100%{ transform:translate(-12%,0) rotate(-6deg); } }
@keyframes keyPress{ 0%,72%,100%{ transform:translateY(0); } 80%,90%{ transform:translateY(5px); } }
/* Ask demo — one 9s loop, beats overlapping for flow: select → ask → answer-streams. */
@keyframes askHighlight{ 0%,3%{ background-size:0% 100%; color:var(--ink-2); } 13%,92%{ background-size:100% 100%; color:var(--ink); } 97%,100%{ background-size:0% 100%; color:var(--ink-2); } }
@keyframes askCaret{ 0%,3%{ left:0; opacity:1; } 13%{ left:100%; opacity:1; } 17%,100%{ left:100%; opacity:0; } }
@keyframes askBubble{ 0%,13%{ opacity:0; transform:translateY(8px) scale(.92); } 19%{ opacity:1; transform:translateY(0) scale(1.03); } 23%,33%{ opacity:1; transform:translateY(0) scale(1); } 40%,100%{ opacity:0; transform:translateY(-6px) scale(.97); } }
@keyframes askPanel{ 0%,31%{ opacity:0; transform:translateY(14px) scale(.98); } 40%{ opacity:1; transform:translateY(0) scale(1); } 91%{ opacity:1; transform:translateY(0) scale(1); } 97%,100%{ opacity:0; transform:translateY(8px) scale(.98); } }
@keyframes askStream{ 0%,40%{ clip-path:inset(0 0 100% 0); } 57%,100%{ clip-path:inset(0 0 0 0); } }
@media(max-width:920px){
  .heroGrid{ grid-template-columns:1fr !important; }
  .navLinks{ display:none !important; }
  .twoCol{ grid-template-columns:1fr !important; }
  .speedGrid{ grid-template-columns:1fr !important; }
  .featRow{ grid-template-columns:1fr !important; }
  .featRow .featMedia{ order:-1; }
  .toneGrid{ grid-template-columns:1fr !important; }
  .keysGrid{ grid-template-columns:1fr 1fr !important; }
  .dashGrid{ grid-template-columns:1fr 1fr !important; }
}

/* ─── production polish (layered on top of the design handoff) ─────────────── */

/* Anchor jumps clear the fixed 72px nav instead of tucking the heading under it. */
html{ scroll-padding-top:92px; }

/* Visible keyboard focus — the handoff styled :hover but shipped no focus state. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline:2.5px solid var(--accent);
  outline-offset:3px;
  border-radius:8px;
}
:focus:not(:focus-visible){ outline:none; }

/* Skip link — off-screen until a keyboard user tabs to it. */
.skip-link{
  position:fixed; top:12px; left:12px; z-index:200;
  transform:translateY(-160%);
  transition:transform .22s var(--ease-out);
  padding:11px 18px; border-radius:100px;
  font-size:14px; font-weight:600;
  background:var(--ink); color:#fff;
  box-shadow:0 14px 30px -12px rgba(20,24,30,.6);
}
.skip-link:focus{ transform:translateY(0); outline:none; }

/* FAQ rows are keyboard-operable (saytomo.js adds role/tabindex + Enter/Space). */
.faqRow:focus-visible{ outline:2.5px solid var(--accent); outline-offset:-2px; border-radius:10px; }

/* ─── Ask demo scene ───────────────────────────────────────────────────────────
   An "annotated margin": the document body is a left column, so the right of the
   paper stays clear and the floating panel never covers the selected word. One
   9s CSS loop runs the whole select → ask → answer story (see @keyframes ask*). */
.askPaper{ position:relative; border-radius:20px; overflow:hidden; background:var(--paper); border:1px solid var(--line); box-shadow:0 50px 100px -44px rgba(40,60,120,.5); }
.askChrome{ height:40px; background:#f4f6fa; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:7px; padding:0 16px; }
.askChrome i{ width:11px; height:11px; border-radius:50%; background:#E3E7EE; display:block; }
.askChrome span{ margin-left:14px; font-family:var(--mono); font-size:12px; color:var(--ink-3); }
.askDoc{ padding:clamp(26px,4vw,44px); }
.askDoc .ey{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; }
.askDoc h3{ font-weight:800; font-size:clamp(1.3rem,2.4vw,1.8rem); letter-spacing:-.02em; line-height:1.2; max-width:460px; }
.askBody{ max-width:440px; }
.askBody p{ margin-top:18px; color:var(--ink-2); font-size:1.04rem; line-height:1.7; }
.askBody p.sub{ margin-top:14px; color:var(--ink-3); font-size:1.02rem; }
/* the selected term — a violet selection sweeps across it on the Select beat */
.askSel{ position:relative; border-radius:4px; padding:1px 4px; font-weight:600; color:var(--ink-2);
  background-image:linear-gradient(rgba(92,108,242,.22),rgba(92,108,242,.22));
  background-repeat:no-repeat; background-position:left center; background-size:0% 100%;
  animation:askHighlight 9s var(--ease) infinite; }
.askSel i{ position:absolute; top:50%; left:0; width:2px; height:1.15em; transform:translateY(-50%);
  background:var(--accent); border-radius:2px; animation:askCaret 9s var(--ease) infinite; }
/* spoken command — floats in the clear margin, tail pointing back at the word */
.askBubble{ position:absolute; z-index:4; top:clamp(132px,21vw,176px); left:clamp(200px,38vw,372px);
  display:inline-flex; gap:9px; align-items:center; white-space:nowrap;
  background:var(--ink); color:#fff; border-radius:16px 16px 16px 6px; padding:11px 16px;
  box-shadow:0 18px 40px -16px rgba(20,24,30,.6); opacity:0;
  animation:askBubble 9s var(--ease-out) infinite; }
.askBubble .eq{ display:flex; align-items:flex-end; gap:2px; height:16px; }
.askBubble .eq i{ width:2.5px; border-radius:3px; background:#fff; animation:barEq .7s var(--ease) infinite; }
.askBubble .eq i:nth-child(1){ height:7px; }
.askBubble .eq i:nth-child(2){ height:13px; animation-delay:.1s; }
.askBubble .eq i:nth-child(3){ height:9px; animation-delay:.05s; }
.askBubble b{ font-weight:600; font-size:14px; }
/* answer panel — lower-right, over blank margin only */
.askPanel{ position:absolute; z-index:5; right:clamp(0px,3vw,28px); bottom:clamp(-30px,-2vw,-18px);
  width:min(360px,84%); background:rgba(255,255,255,.94);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.8); border-radius:20px; padding:18px 20px;
  box-shadow:0 40px 90px -34px rgba(40,60,120,.6); opacity:0;
  animation:askPanel 9s var(--ease-out) infinite; }
.askPanel .top{ display:flex; align-items:center; justify-content:space-between; }
.askPanel .brand{ display:flex; align-items:center; gap:8px; font-weight:740; font-size:14.5px; }
.askPanel .brand img{ height:17px; width:auto; }
.askPanel .x{ color:var(--ink-3); font-size:16px; }
.askPanel .q{ margin-top:13px; display:flex; align-items:center; gap:8px; color:var(--ink-3); font-size:13.5px; }
.askPanel .ans{ margin-top:12px; padding-top:13px; border-top:1px solid var(--line-2); }
.askPanel .ans .lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-2); font-weight:600; }
/* the streamed answer: a short lead, then a tight 3-point list — revealed top-down */
.askPanel .ans .stream{ animation:askStream 9s linear infinite; }
.askPanel .ans .stream .lead{ margin-top:8px; font-size:14px; line-height:1.5; color:var(--ink); }
.askPanel .ans ul{ margin:9px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px; }
.askPanel .ans li{ position:relative; padding-left:16px; font-size:13.5px; line-height:1.45; color:var(--ink-2); }
.askPanel .ans li::before{ content:""; position:absolute; left:2px; top:.52em; width:5px; height:5px; border-radius:50%; background:var(--accent-2); }
.askPanel .ans .cr{ display:inline-block; width:2px; height:1em; vertical-align:-2px; margin-left:2px; background:var(--accent-2); animation:caret 1s step-end infinite; }
.askPanel .acts{ margin-top:15px; display:flex; gap:8px; }
.askPanel .acts span{ flex:1; text-align:center; padding:9px; border-radius:10px; font-size:13px; font-weight:600; }
.askPanel .acts .g{ background:rgba(20,24,30,.05); color:var(--ink-2); }
.askPanel .acts .d{ background:var(--ink); color:#fff; }
/* Narrow screens: stack bubble + panel below the paper, and freeze the loop to its
   resolved state — opacity-driven entrances would jump content around in normal flow. */
@media(max-width:720px){
  .askBody{ max-width:none; }
  .askBubble{ position:static; margin:18px 0 0; opacity:1; animation:none; }
  .askPanel{ position:relative; right:auto; bottom:auto; width:100%; margin-top:16px;
    background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none; opacity:1; animation:none; }
  .askSel{ background-size:100% 100%; color:var(--ink); animation:none; }
  .askSel i{ display:none; }
  .askPanel .ans p{ clip-path:none; animation:none; }
}