/* Layout: one calm column. A round table seen from above anchors the home screen; everything else sits under it as plain cards. */
:root{
  --bg:#EDF1EC; --surface:#FFFFFF; --sunk:#E1E8E0;
  --ink:#14211C; --ink-2:#44544D; --ink-3:#5C6C65; --line:#D0D9D0;
  --sun:#F2B632; --sun-tint:#FAE9BC; --sun-ink:#4A3300;
  --focus:#1B62D1;
  --alert-bg:#FDEBE7; --alert-ink:#6B1D0E; --alert-line:#E9B3A6;
  --c-odessa:#F2B632; --on-odessa:#2A1D00;
  --c-dev:#0E7C86;    --on-dev:#FFFFFF;
  --c-wren:#7B3F9E;   --on-wren:#FFFFFF;
  --c-marcus:#2F5DA8; --on-marcus:#FFFFFF;
  --font-display:'Bricolage Grotesque','Avenir Next','Segoe UI',system-ui,sans-serif;
  --font-body:'Atkinson Hyperlegible','Segoe UI',system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1613; --surface:#16211D; --sunk:#1D2B26;
    --ink:#E8F0EB; --ink-2:#B2C1BA; --ink-3:#93A39B; --line:#2B3B35;
    --sun:#F2B632; --sun-tint:#2D2410; --sun-ink:#F6D88A;
    --focus:#7FB0FF;
    --alert-bg:#3A1A14; --alert-ink:#FFD9CF; --alert-line:#7A3B2E;
    --c-odessa:#F2B632; --on-odessa:#2A1D00;
    --c-dev:#35B3BD;    --on-dev:#04282B;
    --c-wren:#B98AD6;   --on-wren:#2A0F3D;
    --c-marcus:#7FA6EA; --on-marcus:#0C2147;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1613; --surface:#16211D; --sunk:#1D2B26;
  --ink:#E8F0EB; --ink-2:#B2C1BA; --ink-3:#93A39B; --line:#2B3B35;
  --sun:#F2B632; --sun-tint:#2D2410; --sun-ink:#F6D88A;
  --focus:#7FB0FF;
  --alert-bg:#3A1A14; --alert-ink:#FFD9CF; --alert-line:#7A3B2E;
  --c-odessa:#F2B632; --on-odessa:#2A1D00;
  --c-dev:#35B3BD;    --on-dev:#04282B;
  --c-wren:#B98AD6;   --on-wren:#2A0F3D;
  --c-marcus:#7FA6EA; --on-marcus:#0C2147;
  color-scheme:dark;
}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:400 18px/1.55 var(--font-body);-webkit-text-size-adjust:100%}
.app{max-width:720px;margin:0 auto;padding:14px 20px 56px}
.view{display:block}
.view[hidden]{display:none}
h1,h2,p,ol,ul,fieldset,blockquote{margin:0}
h1{font:800 clamp(2.1rem,7.5vw,3.2rem)/1.04 var(--font-display);letter-spacing:-.022em;text-wrap:balance}
h1.h-sm{font-size:clamp(1.6rem,5vw,2.1rem)}
h2{font:700 1.55rem/1.15 var(--font-display);letter-spacing:-.012em;text-wrap:balance}
h1:focus,h2:focus{outline:none}
.lede{font-size:1.15rem;color:var(--ink-2);max-width:34em;text-wrap:pretty}
.eyebrow{font:700 .78rem/1.2 var(--font-body);text-transform:uppercase;letter-spacing:.09em;color:var(--ink-2)}
.fine{font-size:.9rem;color:var(--ink-3)}
strong{font-weight:700}

.top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;margin-bottom:10px}
.mark{font:800 1.25rem/1 var(--font-display);letter-spacing:-.01em}
button{font:inherit;color:inherit}
.mark,.link{background:none;border:0;padding:10px 0;cursor:pointer;color:var(--ink)}
.link{font-weight:700;font-size:1rem;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.mark:hover,.link:hover{color:var(--ink-2)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 26px;border-radius:16px;border:2px solid var(--ink);font:700 1.1rem/1 var(--font-body);cursor:pointer;background:transparent;color:var(--ink);transition:transform .12s ease,background .12s ease}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--ink);color:var(--bg)}
.btn.primary:hover{background:var(--ink-2);border-color:var(--ink-2)}
.btn.secondary:hover{background:var(--sunk)}
.btn.big{min-height:64px;font-size:1.25rem;padding:0 34px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

.view>h1,.view>.lede{margin-top:6px}
.lede{margin-top:12px}
.table-wrap{max-width:440px;margin:18px auto 6px}
.table-wrap.small{max-width:300px;margin-top:6px}
.table-wrap svg{display:block;width:100%;height:auto}
.cta{display:flex;flex-direction:column;align-items:center;gap:10px;margin:8px 0 34px;text-align:center}

/* the table */
.tbl{fill:var(--surface);stroke:var(--line);stroke-width:2}
.tbl-in{fill:none;stroke:var(--line);stroke-width:1.5;stroke-dasharray:2 7;stroke-linecap:round}
.t-eyebrow{font:700 12px var(--font-body);letter-spacing:.14em;fill:var(--ink-3)}
.t-date{font:800 30px var(--font-display);letter-spacing:-.02em;fill:var(--ink)}
.s-name{font:700 16px var(--font-body);fill:var(--ink)}
.s-role{font:400 13px var(--font-body);fill:var(--ink-3)}
.disc{stroke:var(--bg);stroke-width:3}
.disc.odessa{fill:var(--c-odessa)} .disc.dev{fill:var(--c-dev)} .disc.wren{fill:var(--c-wren)} .disc.marcus{fill:var(--c-marcus)}
.disc.you{fill:none;stroke:var(--ink-3);stroke-width:2.5;stroke-dasharray:5 6}
.ini{font:800 24px var(--font-display);text-anchor:middle}
.ini.odessa{fill:var(--on-odessa)} .ini.dev{fill:var(--on-dev)} .ini.wren{fill:var(--on-wren)} .ini.marcus{fill:var(--on-marcus)} .ini.you{fill:var(--ink-2)}
.halo{fill:none;stroke-width:4;opacity:0}
.halo.odessa{stroke:var(--c-odessa)} .halo.dev{stroke:var(--c-dev)} .halo.wren{stroke:var(--c-wren)} .halo.marcus{stroke:var(--c-marcus)}
.seat .disc{transition:transform .25s ease;transform-box:fill-box;transform-origin:center}
.seat.on .disc{transform:scale(1.08)}
.seat.on .halo{opacity:.9;animation:pulse 1.7s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.9}50%{opacity:.25}}

/* cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:24px 22px;margin-top:18px;display:flex;flex-direction:column;gap:14px}
.card.sun{background:var(--sun-tint);border-color:transparent;color:var(--sun-ink)}
.card.sun .eyebrow,.card.sun .fine{color:var(--sun-ink)}
.card.sun .btn{border-color:var(--sun-ink);color:var(--sun-ink)}
.card.sun .btn.primary{background:var(--sun-ink);color:var(--sun-tint)}
.card.sun .btn.secondary:hover{background:rgba(0,0,0,.06)}
.why{font-size:.98rem}
.cite{font-style:italic;white-space:nowrap}
.seg{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.seg .eyebrow{margin-right:4px}
.seg button{min-height:44px;padding:0 16px;border-radius:999px;border:2px solid currentColor;background:transparent;font:700 .95rem var(--font-body);cursor:pointer;opacity:.75}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink);opacity:1}
.card.sun .seg button[aria-pressed="true"]{background:var(--sun-ink);color:var(--sun-tint);border-color:var(--sun-ink)}
.done-line{font:700 1.1rem var(--font-body)}
.tag{display:inline-block;font:700 .68rem/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;padding:4px 7px;border-radius:6px;background:var(--sunk);color:var(--ink-2);vertical-align:2px}
.tag.ex{background:transparent;border:1px solid currentColor}
.help{border-top:1px dashed currentColor;padding-top:14px;display:flex;flex-direction:column;gap:12px}
.steps{padding-left:1.3em;display:flex;flex-direction:column;gap:6px}
.draft{background:var(--surface);color:var(--ink);border-radius:14px;padding:14px 16px;font-size:1.05rem}
.big-n{font:800 clamp(3.4rem,14vw,5rem)/.95 var(--font-display);letter-spacing:-.03em}
.split{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.chart{position:relative;min-height:60px}
.chart svg{display:block;max-width:100%;overflow:visible}
.chart.is-example svg{opacity:.5}
.grid{stroke:var(--line);stroke-width:1}
.grid.dash{stroke-dasharray:3 5}
.bar{fill:var(--ink-3)} .bar.cur{fill:var(--ink)}
.zero{fill:var(--ink-3);opacity:.45}
.ax{font:400 13.5px var(--font-body);fill:var(--ink-3)}
.val{font:800 16px var(--font-display);fill:var(--ink)}
.ln{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.pt{fill:var(--ink);stroke:var(--surface);stroke-width:2}
.pt.last{fill:var(--sun);stroke:var(--ink);stroke-width:2.5}
.hit{fill:transparent;cursor:default}
.hit:focus-visible{outline:3px solid var(--focus)}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--bg);padding:6px 10px;border-radius:8px;font:700 .85rem var(--font-body);transform:translate(-50%,-100%);white-space:nowrap;opacity:0;transition:opacity .1s}
.tip.on{opacity:1}
.foot{margin-top:34px;display:flex;flex-direction:column;gap:8px;font-size:.95rem;color:var(--ink-2);max-width:36em}

/* forms */
.field{display:block;font-weight:700;margin:22px 0 8px}
input[type=text],textarea{width:100%;font:400 1.25rem/1.4 var(--font-body);color:var(--ink);background:var(--surface);border:2px solid var(--ink-2);border-radius:16px;padding:14px 16px}
input[type=text]{margin-bottom:22px}
textarea{resize:vertical;min-height:84px}
.opts,.opts3{display:grid;gap:12px;margin:22px 0}
.opts3{grid-template-columns:repeat(3,1fr);margin:10px 0 0}
@media (max-width:520px){.opts3{grid-template-columns:1fr}}
.opt{position:relative;display:block}
.opt input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.opt-body{display:block;height:100%;border:2px solid var(--line);background:var(--surface);border-radius:16px;padding:16px 18px;font-weight:700}
.opt-body small{display:block;font-weight:400;color:var(--ink-2);margin-top:2px;font-size:.95rem}
.opt input:checked + .opt-body{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.opt input:focus-visible + .opt-body{outline:3px solid var(--focus);outline-offset:2px}
fieldset.q{border:0;padding:0;margin:26px 0 0}
fieldset.q legend{font:700 1.2rem/1.3 var(--font-display);padding:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* circle */
.transcript{display:flex;flex-direction:column;gap:20px;margin:22px 0 18px;min-height:60px}
.row{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;animation:rise .35s ease both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:800 1.15rem var(--font-display)}
.av-odessa{background:var(--c-odessa);color:var(--on-odessa)} .av-dev{background:var(--c-dev);color:var(--on-dev)}
.av-wren{background:var(--c-wren);color:var(--on-wren)} .av-marcus{background:var(--c-marcus);color:var(--on-marcus)}
.av-you{border:2px solid var(--ink-2);color:var(--ink)}
.who{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.98rem}
.say{font-size:1.22rem;line-height:1.5;margin-top:2px;text-wrap:pretty}
.row.you .say{color:var(--ink-2)}
.row.thinking{color:var(--ink-3);align-items:center}
.dots{display:inline-flex;gap:5px;width:44px;justify-content:center}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);animation:blink 1.2s infinite}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.composer{position:sticky;bottom:0;background:var(--bg);padding:12px 0 6px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{min-height:44px;padding:0 16px;border-radius:999px;border:2px solid var(--line);background:var(--surface);font:700 1rem var(--font-body);cursor:pointer}
.chips button:hover{border-color:var(--ink-2)}
.safety{border:2px solid var(--alert-line);background:var(--alert-bg);color:var(--alert-ink);border-radius:18px;padding:18px 18px;display:flex;flex-direction:column;gap:10px}
.safety h2{font-size:1.3rem}
.safety .num{font:800 1.5rem var(--font-display)}
.demo{background:var(--sunk);border-radius:12px;padding:10px 14px;margin-top:8px}

.abt{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.abt h2{margin-top:18px}
.abt ul{padding-left:1.2em;display:flex;flex-direction:column;gap:8px}
.cast-li{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:start}
.cast-li .av{width:36px;height:36px;font-size:1rem}

#toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:14px;font-weight:700;max-width:calc(100vw - 32px);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:20}
#toast.on{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* voice */
.mic{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;min-height:76px;border-radius:20px;border:2px solid var(--ink);background:var(--ink);color:var(--bg);font:800 1.3rem var(--font-display);cursor:pointer;transition:background .15s ease,transform .12s ease}
.mic:active{transform:translateY(1px)}
.mic[hidden]{display:none}
.mic-dot{width:16px;height:16px;border-radius:50%;background:var(--sun);flex:none}
.mic[aria-pressed="true"]{background:var(--sun);color:var(--sun-ink);border-color:var(--sun-ink)}
.mic[aria-pressed="true"] .mic-dot{background:var(--sun-ink);animation:pulse 1.2s ease-in-out infinite}
.mic[disabled]{opacity:.5;cursor:not-allowed}
#mic-note{min-height:1.4em}
.heard{background:var(--sunk);border-radius:12px;padding:10px 14px;font-size:1rem}
.skip{align-self:flex-start}
.live-note{background:var(--sunk);border-radius:12px;padding:10px 14px;margin-top:8px}
[hidden]{display:none!important}
.opts.chips{grid-template-columns:repeat(2,1fr)}
.opts.chips .opt-body{padding:12px 14px;text-align:center}
.plain{margin:18px 0 22px;padding-left:1.2em;display:grid;gap:10px;line-height:1.5}
#view-setup .btns{margin-top:22px}