/* Ask Ananthan — /ask. Same scheme as the landing page: the charcoal wall (the firm's black logo) is the
   identity rail on the left, the answer sits on paper in navy, and Ananthan keeps his gold ring. */
:root{
  color-scheme:light;
  --wall:#1c1f25; --wall-deep:#121419; --accent:#1f3b63; --accent-lit:#2c5089; --accent-ghost:rgba(44,80,137,.14);
  --gold:#c9a052; --gold-light:#f0d998;
  --gold-ring:linear-gradient(135deg, #e7cc85 0%, #b8893b 45%, #f0d998 70%, #a7772c 100%);
  --ivory:#f3f1ec; --ivory-2:rgba(243,241,236,.72); --ivory-3:rgba(243,241,236,.5); --ivory-line:rgba(243,241,236,.2);
  --paper:#f7f6f3; --card:#ffffff; --ink:#1b1d22; --ink-2:#33363d; --ink-soft:#62666f; --placeholder:#9a9ea6; --rule:#dfdfdc;
  --good:#3f9a62; --live:#c2543a; --warn:#a86a12; --well:#f1f0ec; --accent-line:rgba(31,59,99,.32);
  --ease:cubic-bezier(.4,.14,.2,1);
  --sans:"Outfit",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
/* The [hidden] attribute only sets display:none in the UA stylesheet, so ANY author display rule
   beats it — and half the controls on this page (.hearing, .controls, .takes) carry both. Without
   this the composer shows "Listening…" on an idle page and every control is visible before there
   is an answer to act on. */
[hidden]{display:none !important}
html,body{margin:0; height:100%}
body{background:var(--paper); color:var(--ink); font-family:var(--sans); line-height:1.55; -webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--accent-lit); outline-offset:3px}

.shell{height:100vh; display:grid; grid-template-columns:288px minmax(0,1fr)}

/* ── left rail: the charcoal wall ──────────────────────────────────────── */
.rail{background:var(--wall); color:var(--ivory); display:flex; flex-direction:column; padding:0 18px 20px; min-height:0}
.rail-id{display:flex; flex-direction:column; align-items:center; gap:14px; padding:22px 0 24px; flex:none}
.rail-logo{align-self:flex-start; width:220px; aspect-ratio:969/155; margin-bottom:6px; background:var(--ivory);
  -webkit-mask:url(/img/anc-logo.png) left center/contain no-repeat; mask:url(/img/anc-logo.png) left center/contain no-repeat}

/* The halo rings are the ONLY animated affordance on this page — with no video avatar they are
   what tells a learner the thing is alive. They key off .state-* on .shell so the ring, the dot
   and the word can never disagree with each other. */
.portrait{position:relative; width:140px; height:140px; display:grid; place-items:center}
.halo,.halo-outer{position:absolute; border-radius:999px; opacity:0; transition:opacity .3s var(--ease)}
.halo{inset:8px; border:1.5px solid var(--gold)}
.halo-outer{inset:1px; border:1px solid rgba(201,160,82,.45)}
.shell.state-listening .halo,
.shell.state-speaking  .halo{opacity:1; animation:lac-pulse 1.6s ease-in-out infinite}
.shell.state-listening .halo-outer,
.shell.state-speaking  .halo-outer{opacity:1; animation:lac-pulse 1.6s ease-in-out .25s infinite}
.shell.state-thinking .halo{opacity:.6; animation:lac-pulse 2.4s ease-in-out infinite}
/* Reading = revealing an answer with no voice, either because it is muted or because the voice is
   unfilled. Distinct from thinking (waiting on the brain) so the pill never claims to be working
   when it is already answering. */
.shell.state-reading .halo{opacity:.7; animation:lac-pulse 2.6s ease-in-out infinite}
@keyframes lac-pulse{0%,100%{transform:scale(1); opacity:.9} 50%{transform:scale(1.05); opacity:.35}}

/* Gold ring, a light-to-dark gradient so it reads as metal — the same ring as the sign-in page. */
.ring{position:relative; width:112px; height:112px; padding:5px; border-radius:50%; background:var(--gold-ring);
  box-shadow:0 14px 30px -14px rgba(0,0,0,.6)}
.ring img{display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; object-position:50% 20%; background:#e6e4df}

.statepill{position:absolute; left:50%; bottom:2px; transform:translateX(-50%); display:flex; align-items:center; gap:8px;
  padding:6px 13px; border-radius:999px; background:rgba(27,29,34,.78); border:1px solid rgba(255,255,255,.12)}
.statepill .d{width:6px; height:6px; border-radius:50%; background:var(--good); flex:none; transition:background .2s}
.statepill .w{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ivory); white-space:nowrap}
.shell.state-listening .statepill .d{background:var(--live)}
.shell.state-speaking  .statepill .d{background:var(--gold)}
.shell.state-thinking  .statepill .d{background:var(--placeholder)}
.shell.state-reading   .statepill .d,
.shell.state-paused    .statepill .d{background:var(--ivory-3)}

.rail-name{display:flex; flex-direction:column; align-items:center; gap:6px}
.rail-name .n{font-size:26px; line-height:1.1; font-weight:500; letter-spacing:-.015em}
.rail-name .n b{font-weight:600; color:var(--gold-light)}
.rail-name .r{font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--ivory-2); text-align:center}

/* The mute control sits ABOVE the rule, so toggling it never moves the session list. Pressed is a
   darker fill rather than a brighter one: muted is the quieter mode, and it should look it. */
.rail-voice{display:flex; justify-content:center; padding:0 0 14px; flex:none}
.rail .ctl,.mini{color:var(--ivory); background:transparent; border-color:rgba(244,236,228,.45)}
.rail .ctl:hover,.mini:hover{background:rgba(255,255,255,.1); border-color:var(--ivory); color:var(--ivory)}
.rail .ctl[aria-pressed="true"]{background:var(--wall-deep); border-color:var(--ivory-line); color:var(--ivory-2)}

.rule{height:1px; background:var(--ivory-line); flex:none}

.rail-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin:22px 0 10px}
.rail-head p{margin:0; font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; font-weight:600; color:var(--ivory-2)}
.mini{font:inherit; font-size:11.5px; border:1px solid; border-radius:999px; padding:4px 10px; cursor:pointer; transition:.16s var(--ease)}

.rail-empty{margin:0; font-size:12.5px; color:var(--ivory-2); line-height:1.5}
.sessions{display:flex; flex-direction:column; gap:2px; min-height:0; overflow-y:auto}
.sessions button{text-align:left; font:inherit; font-size:13px; cursor:pointer; padding:9px 11px; border-radius:10px; border:0;
  border-left:2px solid transparent; background:transparent; color:var(--ivory-2); transition:.16s var(--ease)}
.sessions button:hover{background:rgba(255,255,255,.08); color:var(--ivory)}
.sessions button[aria-current="true"]{border-left-color:var(--gold-light); background:var(--wall-deep); color:var(--ivory)}

/* Change language sits at the foot of the rail, away from the controls used while asking. */
.rail-foot{margin:auto 0 0; padding-top:18px; display:flex; justify-content:center}
.rail-foot .mini{font-size:12.5px; padding:6px 14px; text-decoration:none}

/* ── right column: paper ───────────────────────────────────────────────── */
.main{display:flex; flex-direction:column; min-height:0; min-width:0}
.reader{flex:1; min-height:0; position:relative; display:flex; flex-direction:column}
.reader .answers{flex:1}
@media (min-width:641px){ .m-only{display:none !important} .pill .m-arrow{display:none} }
.answers{flex:1; min-height:0; overflow-y:auto; padding:48px clamp(18px,4vw,56px) 24px}
.col{max-width:680px; display:flex; flex-direction:column}

.intro{gap:16px; animation:lac-pop .32s var(--ease)}
@keyframes lac-pop{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.intro h1{margin:0; font-weight:500; font-size:44px; line-height:1.05; letter-spacing:-.025em; text-wrap:balance}
.intro h1 em{font-style:normal; color:var(--accent)}
.intro p{margin:0; color:var(--ink-soft); font-size:16px; max-width:56ch; font-weight:300}
.intro p b{color:var(--ink); font-weight:500}
.intro .eyebrow{font-size:10.5px; font-weight:600}
.eyebrow{margin:18px 0 0; font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; font-weight:600; color:var(--ink-soft)}
.pills{display:flex; flex-wrap:wrap; gap:10px}
.pill{font:inherit; font-size:13.5px; color:var(--ink-2); background:var(--card); border:1px solid var(--rule); border-radius:999px;
  padding:10px 16px; cursor:pointer; text-align:left; transition:.16s var(--ease)}
.pill:hover{border-color:var(--accent); color:var(--accent)}

.turn{gap:20px; display:none}
.turn.on{display:flex}
.turn h2{margin:0; font-weight:500; font-size:30px; line-height:1.22; letter-spacing:-.015em; color:var(--accent); text-wrap:balance}
.thinking{margin:0; font-size:15px; color:var(--ink-soft); font-style:italic}
.thinking i{display:inline-block; width:5px; height:5px; margin-left:3px; border-radius:50%; background:var(--ink-soft); animation:lac-dot 1.1s infinite}
.thinking i:nth-child(2){animation-delay:.16s} .thinking i:nth-child(3){animation-delay:.32s}
@keyframes lac-dot{0%,60%,100%{opacity:.25} 30%{opacity:1}}
.body p{margin:0 0 14px; font-size:17.5px; line-height:1.66; color:var(--ink-2); text-wrap:pretty}
.body p:last-child{margin-bottom:0}
.caret{display:inline-block; width:2px; height:20px; background:var(--accent); animation:lac-caret 1s steps(2) infinite;
  vertical-align:-3px; margin:-14px 0 0 2px}
.caret[hidden]{display:none}
@keyframes lac-caret{0%,100%{opacity:1} 50%{opacity:0}}

.controls{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.ctl{display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:12.5px; color:var(--ink); background:var(--card);
  border:1px solid var(--rule); border-radius:999px; padding:7px 14px; cursor:pointer; transition:.16s var(--ease)}
.ctl:hover{border-color:var(--accent); color:var(--accent)}
.ctl:disabled{opacity:.45; cursor:default; border-color:var(--rule); color:var(--ink-soft)}
.ctl svg{width:13px; height:13px; flex:none}
.ctl.solid{background:var(--accent); border-color:var(--accent); color:#fff}
.ctl.solid:hover{background:var(--accent-lit); color:#fff}
.takes{display:flex; align-items:center; gap:4px; border:1px solid var(--rule); background:var(--card); border-radius:999px; padding:3px 5px}
.takes button{font:inherit; font-size:14px; line-height:1; color:var(--accent); background:transparent; border:0; border-radius:999px;
  width:24px; height:24px; cursor:pointer}
.takes button:hover:not(:disabled){background:var(--accent-ghost)}
.takes button:disabled{opacity:.28; cursor:default}
.takes .lbl{font-size:11.5px; letter-spacing:.04em; color:var(--ink-soft); white-space:nowrap}

/* ── composer: the CallScenarios design ──────────────────────────────── */
.composer{border-top:1px solid var(--rule); background:var(--paper); padding:14px clamp(18px,4vw,56px) 16px}
.composer .col{gap:0}
svg{flex:none}
.choice svg,.send-btn svg,.vs-btn svg,.switch-link svg{fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* The choice before the first question. */
.choose{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.choice{font:inherit; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:8px; padding:16px 18px; border-radius:14px;
  border:1px solid var(--rule); background:var(--card); color:var(--ink); transition:border-color .16s var(--ease), background .16s var(--ease)}
.choice:hover{border-color:var(--accent); background:var(--accent-ghost)}
.choice-title{display:flex; align-items:center; gap:9px; font-weight:500; font-size:19px; line-height:1.2}
.choice-title svg{width:18px; height:18px; stroke:var(--accent)}
.choice-sub{font-size:13px; line-height:1.45; color:var(--ink-soft)}

/* Typing: the box and Send. */
.inputrow{display:flex; gap:9px; align-items:flex-end; border:1.5px solid var(--accent-line); border-radius:12px; background:var(--card); padding:9px 10px;
  box-shadow:inset 0 1px 3px rgba(27,29,34,.06); transition:border-color .16s var(--ease), box-shadow .16s var(--ease)}
.inputrow:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ghost)}
.inputrow textarea{flex:1; min-width:0; resize:none; border:0; background:transparent; color:var(--ink); font:inherit; font-size:15px; line-height:1.45;
  padding:4px; min-height:66px; max-height:120px; overflow-y:auto; outline:none}
.inputrow textarea::placeholder{color:var(--placeholder)}

/* Send: the one solid button in the composer. */
.send-btn{position:relative; flex:none; height:40px; padding:0 16px; border-radius:999px; display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--accent); background:var(--accent); color:#fff; font:inherit; font-weight:600; font-size:14px; cursor:pointer;
  transition:background .16s var(--ease), border-color .16s var(--ease), opacity .16s var(--ease)}
.send-btn svg{width:16px; height:16px}
.send-btn:hover:not(:disabled){background:var(--accent-lit); border-color:var(--accent-lit)}
.send-btn:disabled{opacity:.4; cursor:not-allowed}
/* The countdown: a gold ring drawn round Send now, filling over --ring-ms (set from the endpointer). */
.send-btn .ringsvg{position:absolute; inset:-4px; width:calc(100% + 8px); height:calc(100% + 8px); overflow:visible; pointer-events:none; display:none; stroke:none}
.send-btn .ringsvg rect{fill:none; stroke:var(--gold); stroke-width:2.5; stroke-dasharray:100; stroke-dashoffset:100}
.send-btn.ringing .ringsvg{display:block}
.send-btn.ringing .ringsvg rect{animation:ringfill var(--ring-ms,1500ms) linear forwards}
@keyframes ringfill{to{stroke-dashoffset:0}}

/* Voice: the strip says what the mic is doing; the words are in #draft. */
.vstrip{display:flex; align-items:center; gap:12px; flex-wrap:wrap; min-height:62px; padding:10px 12px; border:1.5px solid var(--accent-line);
  border-radius:12px; background:var(--card); transition:border-color .16s var(--ease), box-shadow .16s var(--ease)}
.vstrip.live{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ghost)}
.vs-state{flex:1; min-width:180px; display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-soft)}
.vstrip.live .vs-state{color:var(--ink)}
.vs-dot{width:9px; height:9px; border-radius:50%; flex:none; border:1.5px solid var(--placeholder)}
.vs-dot.live{border:0; background:var(--live); animation:lac-breathe 1.4s ease-in-out infinite}
.vs-dot.err{border:0; background:var(--live)}
.vs-dot.err + span{color:var(--live)}
@keyframes lac-breathe{0%,100%{opacity:.55; transform:scale(1)} 50%{opacity:1; transform:scale(1.05)}}
.vs-meter{display:inline-flex; gap:2px; align-items:center; height:16px}
.vs-meter i{width:3px; height:3px; border-radius:2px; background:var(--placeholder)}
.vs-meter.on i{background:var(--live); animation:lac-lvl .9s ease-in-out infinite}
.vs-meter.on i:nth-child(2){animation-delay:.15s} .vs-meter.on i:nth-child(3){animation-delay:.3s}
.vs-meter.on i:nth-child(4){animation-delay:.45s} .vs-meter.on i:nth-child(5){animation-delay:.6s}
@keyframes lac-lvl{0%,100%{height:4px} 50%{height:15px}}
.vs-acts{display:flex; gap:8px; flex-wrap:wrap}
.vs-btn{height:40px; padding:0 14px; border-radius:999px; display:inline-flex; align-items:center; gap:7px; border:1px solid var(--rule); background:transparent;
  color:var(--ink-soft); font:inherit; font-weight:600; font-size:13.5px; cursor:pointer; transition:border-color .16s var(--ease), color .16s var(--ease)}
.vs-btn svg{width:15px; height:15px}
.vs-btn:hover:not(:disabled){border-color:var(--accent); color:var(--accent)}
.vs-btn:disabled{opacity:.4; cursor:not-allowed}

/* The spoken question, live in the answer column. */
.draft{gap:6px; padding-left:14px; border-left:2px dashed var(--accent-line); margin-top:28px; animation:lac-pop .32s var(--ease)}
.draft .lbl{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--accent)}
.draft .q{margin:0; font-weight:500; font-size:30px; line-height:1.22; letter-spacing:-.015em; color:var(--ink); text-wrap:balance}
.tent{color:var(--placeholder); font-style:italic; font-weight:400}

.composer-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; min-height:22px}
/* flex:1 without min-width:0 would not shrink, so a long message would push the switch link out. */
.hint{font-size:12px; color:var(--ink-soft); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hint[data-sev="warn"]{color:var(--warn)}
.hint[data-sev="err"]{color:var(--live)}
.sendkbd{font-size:11.5px; color:var(--placeholder); flex:none}
.sendkbd kbd{font-family:ui-monospace,monospace; background:var(--well); border:1px solid var(--rule); border-bottom-width:2px; border-radius:5px;
  padding:1px 6px; color:var(--ink-soft); font-size:11px}
.switch-link{flex:none; display:inline-flex; align-items:center; gap:6px; padding:0; border:0; background:none; cursor:pointer; font:inherit;
  font-weight:600; font-size:12px; color:var(--accent); text-decoration:underline; text-underline-offset:3px}
.switch-link svg{width:14px; height:14px}

@media (max-width:900px){
  .shell{grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr)}
  .rail{flex-direction:row; align-items:center; gap:14px; padding:12px 16px}
  .rail-id{flex-direction:row; padding:0; gap:12px} .rail-logo{display:none}
  .portrait{width:60px; height:60px} .ring{width:56px; height:56px; padding:3px}
  .halo,.halo-outer,.statepill{display:none}
  .rail-name{align-items:flex-start} .rail-name .n{font-size:20px} .rail-name .r{text-align:left; font-size:10px}
  .rail-voice{margin-left:auto; padding:0}
  .rail-foot{margin:0; padding:0}
  .rule,.rail-head,.rail-empty,.sessions{display:none}
  .answers{padding-top:28px} .intro h1{font-size:34px} .turn h2,.draft .q{font-size:25px}
}
@media (max-width:640px){ .choose{grid-template-columns:1fr} .sendkbd{display:none} }
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }

/* ── Phone (≤640px): the Reader layout (design_handoff_mobile_reader) ──────────────────────────
   Charcoal wall, one answer at a time on a white reading surface, and all input in one floating
   dock. The reading surface is the only thing that scrolls, and the dock is absolutely placed over
   it (never in the flow), so a long answer can never push a control off-screen. */
@media (max-width:640px){
  .d-only{display:none !important}
  html,body{height:100%; overflow:hidden; overscroll-behavior:none; background:var(--wall)}
  body{-webkit-tap-highlight-color:transparent; -webkit-text-size-adjust:100%}
  button,a,textarea{touch-action:manipulation}
  /* The dock sits 28px up on an iPhone with a home bar (34px inset), 16px up where there is no inset. */
  .shell{display:flex; flex-direction:column; height:100vh; height:100dvh; background:var(--wall); color:var(--ivory);
    --dock-bottom:max(16px, calc(env(safe-area-inset-bottom, 0px) - 6px))}
  .main{flex:1; position:relative; background:var(--wall)}

  /* header + identity */
  .m-head{flex:none; display:flex; align-items:center; gap:8px;
    padding:calc(env(safe-area-inset-top, 0px) + 8px) max(16px, env(safe-area-inset-right, 0px)) 4px max(16px, env(safe-area-inset-left, 0px))}
  .m-spacer{flex:1}
  .m-qbtn{display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 14px; border-radius:999px; border:1px solid rgba(244,236,228,.3);
    background:transparent; color:var(--ivory); font:inherit; font-size:14px; font-weight:600; cursor:pointer}
  .m-count{min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--gold-light); color:var(--wall); font-size:11.5px;
    display:inline-grid; place-items:center; font-variant-numeric:tabular-nums}
  .m-round{display:grid; place-items:center; width:40px; height:40px; flex:none; padding:0; border-radius:50%; border:1px solid rgba(244,236,228,.3);
    background:transparent; color:var(--ivory); font:inherit; font-size:15px; font-weight:600; cursor:pointer}
  .m-round svg{width:17px; height:17px}
  .m-id{flex:none; display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ivory-2);
    padding:8px max(22px, env(safe-area-inset-right, 0px)) 12px max(22px, env(safe-area-inset-left, 0px))}
  .m-id b{font-weight:600; color:var(--gold-light)}
  .m-face{position:relative; width:26px; height:26px; display:grid; place-items:center; flex:none}
  .m-face .halo,.m-face .halo-outer{inset:-3px}
  .m-ring{width:24px; height:24px; padding:2px; border-radius:50%; background:var(--gold-ring); position:relative}
  .m-ring img{display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; object-position:50% 20%; background:#e6e4df}
  .m-dot{width:6px; height:6px; border-radius:50%; background:var(--good); flex:none}
  .shell.state-listening .m-dot{background:var(--live)}
  .shell.state-speaking .m-dot{background:var(--gold)}
  .shell.state-thinking .m-dot{background:var(--placeholder)}
  .shell.state-reading .m-dot,.shell.state-paused .m-dot{background:var(--ivory-3)}

  /* the reading surface */
  .reader{margin:0 max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px)); background:var(--card); color:var(--ink);
    border-radius:22px 22px 0 0; overflow:hidden}
  .answers{position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    padding:20px 22px calc(150px + env(safe-area-inset-bottom, 0px)); scrollbar-width:none}
  .answers::-webkit-scrollbar{display:none}
  .col{max-width:none}
  .intro{gap:14px; animation:none}
  .intro h1{font-size:32px; line-height:1.08; letter-spacing:-.025em}
  .intro p{font-size:15.5px; line-height:1.55}
  .eyebrow{margin:10px 0 0; font-size:10.5px; letter-spacing:.12em; color:var(--ink-soft)}
  .pills{flex-direction:column; flex-wrap:nowrap; gap:0; border-top:1px solid var(--rule)}
  .pill{display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; padding:15px 0; border:0; border-bottom:1px solid var(--rule);
    border-radius:0; background:transparent; font-size:16px; line-height:1.4; color:var(--ink)}
  .pill .m-arrow{display:inline; color:var(--accent); font-size:18px; flex:none}

  .turn{gap:0}
  #turnNum{margin:0}
  .turn h2{margin:8px 0 0; font-size:var(--m-fq); line-height:1.25; letter-spacing:-.015em; color:var(--accent)}
  .m-rule{display:block; width:36px; height:2px; background:var(--gold); margin:18px 0 20px}
  .thinking{font-size:16px}
  .body p{margin:0 0 16px; font-size:var(--m-fb); line-height:1.62; color:var(--ink)}
  .said{border-radius:3px; padding:1px 2px; margin:0 -2px; -webkit-box-decoration-break:clone; box-decoration-break:clone; transition:background .4s}
  .said.on{background:rgba(240,217,152,.62)}
  /* The caret follows the last revealed word: drawn at the end of the sentence being revealed. */
  #caret{display:none !important}
  .said.on::after{content:""; display:inline-block; width:2px; height:20px; margin-left:3px; vertical-align:-3px; background:var(--accent);
    animation:lac-caret 1s steps(2) infinite}

  .draft{border-left:0; padding-left:0; margin-top:0; gap:10px}
  .draft .lbl{color:var(--accent)}
  .draft .q{font-size:28px; line-height:1.2; letter-spacing:-.02em}

  .m-jump{position:absolute; left:50%; bottom:calc(var(--dock-bottom) + 72px); transform:translateX(-50%); z-index:4;
    display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px; border-radius:999px; border:0; background:var(--wall); color:var(--ivory);
    font:inherit; font-size:13px; font-weight:500; box-shadow:0 8px 20px -8px rgba(0,0,0,.5); cursor:pointer; white-space:nowrap}

  .shell.m-drafting #turn,.shell.m-drafting #intro{display:none !important}
  .m-toast{position:absolute; left:max(24px, env(safe-area-inset-left, 0px)); right:max(24px, env(safe-area-inset-right, 0px)); z-index:6; margin:0;
    bottom:calc(var(--dock-bottom) + 72px); padding:10px 14px; border-radius:14px; background:var(--wall); color:var(--ivory); font-size:13.5px; line-height:1.4;
    text-align:center; box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}

  /* takes */
  .m-takes{position:absolute; left:50%; bottom:calc(var(--dock-bottom) + 68px); transform:translateX(-50%); z-index:5;
    display:flex; align-items:center; gap:2px; height:36px; padding:0 4px; border-radius:999px; background:var(--wall); color:var(--ivory);
    box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}
  .m-takes button{display:grid; place-items:center; width:32px; height:32px; border-radius:50%; padding:0; border:0; background:transparent;
    color:var(--gold-light); font:inherit; font-size:18px; cursor:pointer}
  .m-takes button:disabled{opacity:.28; cursor:default}
  .m-takes span{font-size:12px; color:var(--ivory-2); white-space:nowrap}

  /* the dock */
  .m-dock{position:absolute; z-index:5; left:max(14px, env(safe-area-inset-left, 0px)); right:max(14px, env(safe-area-inset-right, 0px));
    bottom:var(--dock-bottom); min-height:60px; padding:8px; border-radius:30px; background:var(--wall); color:var(--ivory);
    box-shadow:0 16px 36px -14px rgba(0,0,0,.55)}
  .m-grp{display:flex; align-items:center; gap:8px; min-height:44px}
  .m-dock svg{fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
  .m-dock svg.fill{fill:currentColor; stroke:none}
  .m-talk{flex:1; min-width:0; height:44px; display:flex; align-items:center; gap:10px; padding:0 14px 0 0; border:0; border-radius:22px;
    background:transparent; color:var(--ivory); font:inherit; font-size:15px; font-weight:500; cursor:pointer}
  .m-talk-ic{display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--ivory); color:var(--wall); flex:none}
  .m-talk-ic svg{width:19px; height:19px}
  .m-div{width:1px; height:26px; background:rgba(243,241,236,.22); flex:none}
  .m-type{flex:1; min-width:0; height:44px; display:flex; align-items:center; justify-content:center; gap:9px; padding:0 10px; border:0; border-radius:22px;
    background:transparent; color:var(--ivory); font:inherit; font-size:15px; font-weight:500; cursor:pointer}
  .m-type svg{width:18px; height:18px}
  .m-ghost{width:44px; height:44px; border-color:rgba(244,236,228,.35)}
  .m-ghost:disabled{opacity:.4; cursor:default}
  .m-sm{width:40px; height:40px} .m-sm svg{width:16px; height:16px}
  .m-sm:disabled{opacity:.35}
  .m-pause,.m-resume{width:44px; height:44px; border:0; color:var(--wall)}
  .m-pause{background:var(--gold)} .m-resume{background:var(--ivory)}
  .m-pause svg,.m-resume svg{width:15px; height:15px}
  .m-status{flex:1; min-width:0; padding:0 8px; font-size:14px; line-height:1.3; color:rgba(243,241,236,.8)}
  .m-micstate{flex:1; min-width:0; display:flex; align-items:center; gap:8px; padding:0 8px; font-size:13.5px; line-height:1.3; color:var(--ivory)}
  .m-mictext{flex:1; min-width:0}
  .m-micstate .vs-dot{border-color:rgba(243,241,236,.5)}
  .m-micstate .vs-dot.err + span{color:#e8a184}
  .m-micstate .vs-meter.on i{background:var(--live)}
  .m-micbtn{position:relative; display:grid; place-items:center; width:44px; height:44px; flex:none; padding:0; border:0; border-radius:50%;
    background:rgba(243,241,236,.25); color:#fff; cursor:pointer; transition:background .2s}
  .m-micbtn.live{background:var(--live)}
  .m-micbtn svg{width:19px; height:19px}
  .m-ringc{position:absolute; inset:-7px; width:calc(100% + 14px) !important; height:calc(100% + 14px) !important; transform:rotate(-90deg); pointer-events:none; display:none}
  .m-ringc circle{fill:none; stroke:var(--gold); stroke-width:3; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100}
  .m-micbtn.ringing .m-ringc{display:block}
  .m-micbtn.ringing .m-ringc circle{animation:ringfill var(--ring-ms,1500ms) linear forwards}

  /* sheets: fixed to the VISUAL viewport (--vv-top/--vv-h from ask.js) so the iOS keyboard can't cover them */
  .m-sheet{position:fixed; left:0; right:0; top:var(--vv-top, 0px); height:var(--vv-h, 100%); z-index:10; display:flex; flex-direction:column; justify-content:flex-end}
  .m-scrim{position:absolute; inset:0; background:rgba(18,20,25,.45)}
  .m-panel{position:relative; background:var(--card); color:var(--ink); border-radius:22px 22px 0 0; display:flex; flex-direction:column; gap:10px;
    padding:10px max(16px, env(safe-area-inset-right, 0px)) var(--sheet-pb, max(34px, calc(env(safe-area-inset-bottom, 0px) + 12px))) max(16px, env(safe-area-inset-left, 0px));
    animation:m-up .22s var(--ease)}
  @keyframes m-up{from{transform:translateY(24px); opacity:.6} to{transform:none; opacity:1}}
  .m-grab{width:38px; height:5px; border-radius:3px; background:var(--rule); margin:0 auto 4px; cursor:pointer}
  .m-accent{color:var(--accent); margin:0}
  .m-inputrow{display:flex; gap:9px; align-items:flex-end; border:1.5px solid var(--accent); border-radius:14px; background:var(--card); padding:9px 10px;
    box-shadow:0 0 0 3px rgba(44,80,137,.14)}
  .m-inputrow textarea{flex:1; min-width:0; resize:none; border:0; outline:none; background:transparent; color:var(--ink); font:inherit; font-size:16px;
    line-height:1.45; padding:4px; max-height:30vh}
  .m-inputrow textarea::placeholder{color:var(--placeholder)}
  .m-send{flex:none; height:44px; padding:0 16px; border-radius:999px; display:inline-flex; align-items:center; gap:7px; border:0; background:var(--accent);
    color:#fff; font:inherit; font-weight:600; font-size:14px; cursor:pointer}
  .m-send svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
  .m-send:disabled{opacity:.35; cursor:default}
  .m-sheetfoot{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:22px}
  .m-warn{flex:1; min-width:0; font-size:12px; color:var(--warn)}
  .m-sheetfoot .switch-link{min-height:32px; font-size:12.5px}
  .m-qpanel{max-height:72%; gap:0}
  .m-qpanel .m-grab{margin-bottom:12px}
  .m-qhead{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
  .m-qhead .eyebrow{margin:0}
  .m-pillbtn{display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 13px; border-radius:999px; border:1px solid var(--rule); background:var(--card);
    color:var(--ink); font:inherit; font-size:13px; text-decoration:none; cursor:pointer}
  .m-qempty{margin:0; font-size:14px; line-height:1.5; color:var(--ink-soft)}
  .m-qlist{display:flex; flex-direction:column; gap:2px; overflow-y:auto; min-height:0; overscroll-behavior:contain}
  .m-qlist button{display:flex; gap:12px; align-items:baseline; text-align:left; font:inherit; font-size:15px; line-height:1.4; padding:12px; border:0;
    border-radius:12px; cursor:pointer; background:transparent; color:var(--ink-2)}
  .m-qlist button[aria-current="true"]{background:rgba(44,80,137,.1); color:var(--accent)}
  .m-qlist .n{font-size:12px; font-weight:600; color:var(--placeholder); font-variant-numeric:tabular-nums; flex:none}
  .m-qfoot{padding-top:18px; display:flex; justify-content:center}
  .m-qfoot .m-pillbtn{height:38px}

  /* text size (Aa): body 16 / 18.5 / 21px, question 20 / 22 / 25px */
  .shell{--m-fb:18.5px; --m-fq:22px}
  .shell.fs-0{--m-fb:16px; --m-fq:20px}
  .shell.fs-2{--m-fb:21px; --m-fq:25px}

  @media (hover:hover){
    .pill:hover{color:var(--accent)}
    .m-type:hover{background:rgba(255,255,255,.06)}
  }
}