/* v11 state layer: loads AFTER styles.css and restyles it with the approved control-state direction
   (clear glass globe, frosted-at-rest controls that go clear when highlighted or selected, darker etched lettering,
   soft shadows, a soft aqua glow only for real activity, one quiet background ribbon, Poppins, square geometry).
   styles.css is unchanged; delete this file and the link in index.html to get the previous look back.
   CSS glass here is a real-time approximation, not a path-traced material. */

@font-face{font-family:"Poppins";src:url(fonts/Poppins-300.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Poppins";src:url(fonts/Poppins-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Poppins";src:url(fonts/Poppins-500.woff2) format("woff2");font-weight:500;font-display:swap}

/* --k: how clear (0 frosted, 1 clear).  --g: glow amount, set only by real activity or a persistent selection.
   Registered so they animate; browsers without @property switch instantly. */
@property --k{syntax:"<number>";inherits:true;initial-value:0}
@property --g{syntax:"<number>";inherits:true;initial-value:0}
@property --sd{syntax:"<number>";inherits:true;initial-value:1}

:root{
  --display:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;--body:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ink:#2B3033;--mute:#595D60;--tx:#4D5153;--line:#C9CECD;
  --shade:52,58,60;--sea:132,198,194;
  /* glow intensity and spread, adjustable separately: controls (--gi, --gs) and globe (--ggi, --ggs) */
  --gi:1;--gs:1;--ggi:1;--ggs:1}

/* square geometry everywhere except the globe's glow */
*,*::before,*::after{border-radius:0!important}
.glow,.glow i{border-radius:50%!important}

html{background:#fff linear-gradient(162deg,#DEE0E1 0%,#EAECED 38%,#F7F8F8 70%,#FFFFFF 100%) no-repeat fixed}
body{background:transparent;color:var(--tx);font-family:var(--body);position:relative}
.app{position:relative;z-index:1}

/* one quiet peripheral ribbon, bottom edge, behind everything (frosted panels diffuse it locally) */
.ribbon{position:fixed;right:-5vw;bottom:-3vh;width:52vw;height:auto;opacity:.85;pointer-events:none;user-select:none;z-index:0}
@media (max-width:760px){.ribbon{display:none}}

/* keyboard focus: one restrained 1px neutral line, distinct from selection; stronger in forced-colours */
:focus-visible{outline:1px solid #5C6266!important;outline-offset:4px!important}
:focus:not(:focus-visible){outline:none}

/* ---------- typography: Poppins, thin headings, muted grey ---------- */
.brand b{font-weight:500;letter-spacing:-.01em}
.stagetext h1{font-weight:300;letter-spacing:-.01em}
.card h3{font-weight:300;letter-spacing:-.01em;font-size:20px}
.notice h2{font-weight:500}
.rnum b{font-weight:300}
.pv{font-weight:500}
.sub,.card .why,.foot p,.meta,.fine,.gcap,.boardinfo,.voicehint,.tline,.brand span{color:var(--mute)}

/* ---------- the globe ---------- */
.orbwrap{--w:clamp(270px,43vh,420px);width:var(--w);font-size:calc(var(--w) / 340)}
.app[data-mode="board"] .orbwrap{--w:132px}
@media (max-width:600px){.orbwrap{--w:min(88vw,380px)}.app[data-mode="board"] .orbwrap{--w:112px}}
.globe{position:absolute;inset:0;pointer-events:none}
.globe img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none}
/* speaking glow: a transparent circle exactly the sphere's size; only its OUTER shadow paints, so the glass interior is untouched.
   It follows the app's real state: .app[data-state="speaking"] is set when audio actually starts playing and cleared on end, stop and error. */
.glow{position:absolute;left:7.235%;top:5.85%;width:85.5%;height:85.5%;opacity:0;transition:opacity 1.4s ease}
.glow i{display:block;width:100%;height:100%;
  box-shadow:0 0 calc(30em*var(--ggs)) calc(1em*var(--ggs)) rgba(var(--sea),calc(.10*var(--ggi))),0 0 calc(72em*var(--ggs)) calc(10em*var(--ggs)) rgba(var(--sea),calc(.06*var(--ggi)));
  animation:breathe 8s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.85}50%{opacity:1}}
.app[data-state="speaking"] .glow{opacity:1}

/* ---------- panels: more frosted, soft shadow, no thick border ---------- */
.glass,.card,.notice,.transcript,.app[data-mode="board"] .stage{
  background:linear-gradient(155deg,rgba(255,255,255,.50),rgba(255,255,255,.20) 55%,rgba(255,255,255,.34))!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.1)!important;backdrop-filter:blur(20px) saturate(1.1)!important;
  border:0!important;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.85),inset -1px -1px 0 rgba(var(--shade),.07),0 18px 26px -22px rgba(var(--shade),.28),0 3px 6px -4px rgba(var(--shade),.12)!important}
@media (prefers-reduced-transparency:reduce){.glass,.card,.notice,.transcript,.app[data-mode="board"] .stage{background:rgba(250,251,251,.97)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}
.card.hl{background:linear-gradient(155deg,rgba(255,255,255,.80),rgba(255,255,255,.55))!important;box-shadow:inset 1px 1px 0 #fff,inset 0 0 0 1px rgba(var(--shade),.28),0 18px 26px -22px rgba(var(--shade),.30),0 3px 6px -4px rgba(var(--shade),.12)!important}
.card.pinned{box-shadow:inset 1px 1px 0 #fff,inset 0 0 0 1px rgba(var(--shade),.16),0 18px 26px -22px rgba(var(--shade),.28),0 3px 6px -4px rgba(var(--shade),.12)!important}
.status{background:linear-gradient(155deg,rgba(255,255,255,.55),rgba(255,255,255,.28));border:0;box-shadow:inset 1px 1px 0 rgba(255,255,255,.85),0 6px 10px -8px rgba(var(--shade),.25);font-family:var(--body);font-weight:400;color:var(--ink)}
.transcript:has(.tbody:not([hidden])){border-radius:0}

/* ---------- ONE glass material for every control ---------- */
.btn,.ibtn,.vopt,.chipbtn,.tbtn,.micbtn,.cact button{
  --k:0;--g:0;--sd:1;
  position:relative;isolation:isolate;
  border:2px solid transparent!important;
  border-image:linear-gradient(135deg,rgba(255,255,255,calc(.5 + .35*var(--k))) 0%,rgba(255,255,255,.2) 24%,rgba(255,255,255,.03) 48%,rgba(var(--shade),.15) 64%,rgba(255,255,255,.32) 88%,rgba(255,255,255,calc(.5 + .16*var(--k))) 100%) 1!important;
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,0) 45%,rgba(255,255,255,.03))!important;
  color:rgb(calc(77 - 34*var(--k)),calc(81 - 33*var(--k)),calc(83 - 32*var(--k)))!important;
  text-shadow:0 1px 0 rgba(255,255,255,calc(.5 + .2*var(--k)));
  font-family:var(--body);font-weight:500;
  box-shadow:inset 0 -8px 12px -9px rgba(255,255,255,.42),inset 0 1px 0 rgba(255,255,255,calc(.9*var(--k))),
    0 calc(14px*var(--sd)) calc(14px*var(--sd)) -12px rgba(var(--shade),.26),0 calc(4px*var(--sd)) 5px -3px rgba(var(--shade),.15),0 1px 2px rgba(var(--shade),.10),
    0 0 calc(14px*var(--g)) calc(2px*var(--g)) rgba(var(--sea),calc(.20*var(--g)*var(--gi))),
    0 0 calc(40px*var(--g)*var(--gs)) calc(5px*var(--g)*var(--gs)) rgba(var(--sea),calc(.11*var(--g)*var(--gi)))!important;
  transition:--k .3s ease,--g .35s ease,--sd .15s ease!important}
/* the frosted face: fades out as the control turns clear */
.btn::before,.ibtn::before,.vopt::before,.chipbtn::before,.tbtn::before,.micbtn::before,.cact button::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:calc(1 - var(--k));
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
  background:linear-gradient(155deg,rgba(208,215,213,.66),rgba(226,231,229,.46) 55%,rgba(218,224,222,.58))}
.btn,.vopt,.chipbtn,.tbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px}
/* highlighted: hover with a real pointer, or keyboard focus. Clear glass, edge highlight, darker etched label. No glow. */
@media (hover:hover){
  .btn:hover:not(:disabled),.ibtn:hover:not(:disabled),.vopt:hover,.chipbtn:hover,.tbtn:hover,.micbtn:hover,.cact button:hover{--k:1}
}
.btn:focus-visible,.ibtn:focus-visible,.vopt:focus-visible,.chipbtn:focus-visible,.tbtn:focus-visible,.micbtn:focus-visible,.cact button:focus-visible{--k:1}
/* selected or toggled on: stays clear */
.vopt[aria-checked="true"],.ibtn[aria-pressed="true"],.ibtn[aria-expanded="true"],.tbtn[aria-expanded="true"],.micbtn[aria-pressed="true"],.cact button[aria-pressed="true"]{--k:1}
/* glow only for a persistent choice (the chosen voice) and for activity that is genuinely running (the microphone while listening) */
.vopt[aria-checked="true"],.micbtn[aria-pressed="true"],#ocean[aria-pressed="true"]{--g:1}
/* check mark: a non-colour cue on the chosen voice */
.vopt[aria-checked="true"]::after{content:"";order:-1;width:16px;height:16px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12.5 10 17.5 19 7' fill='none' stroke='black' stroke-width='2.6'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12.5 10 17.5 19 7' fill='none' stroke='black' stroke-width='2.6'/></svg>") center/contain no-repeat}
/* pressed: a small material change only */
.btn:active:not(:disabled),.ibtn:active:not(:disabled),.vopt:active,.chipbtn:active,.tbtn:active,.micbtn:active,.cact button:active{--sd:.55}
.micbtn:active{transform:translateX(-50%)}
.app[data-mode="board"] .micbtn:active{transform:translateY(-50%)}
/* disabled: quiet frost, readable label, no clear-on-hover, no glow */
.btn:disabled,.ibtn:disabled{--k:0;--g:0;--sd:.5;opacity:1!important;color:#5E6366!important;cursor:not-allowed}
.btn:disabled::before,.ibtn:disabled::before{opacity:.75}
.btn.quiet,.btn.sm{font-weight:500}
.voices{background:none;border:0;padding:0;gap:14px}
.vopt{min-width:96px}
.cact button{padding:0}
/* nothing sits in front of the orb: the microphone button lives just BELOW it (home) or BESIDE it (board), never over the glass */
.orbwrap{margin-bottom:66px}
.micbtn{position:absolute;width:58px;height:58px;left:50%;top:calc(100% + 10px);bottom:auto;right:auto;transform:translateX(-50%)}
.app[data-mode="board"] .orbwrap{margin-bottom:0;margin-right:56px}
.app[data-mode="board"] .micbtn{width:46px;height:46px;left:calc(100% + 10px);top:50%;bottom:auto;right:auto;transform:translateY(-50%)}
@media (max-width:600px){.orbwrap{margin-bottom:66px}}

/* ---------- inputs: frosted at rest, clearer when focused ---------- */
.typer input{--k:0;font-family:var(--body);font-size:16px;color:rgb(calc(77 - 34*var(--k)),calc(81 - 33*var(--k)),calc(83 - 32*var(--k)));caret-color:#2B3033;
  border:2px solid transparent;border-image:linear-gradient(135deg,rgba(255,255,255,calc(.5 + .35*var(--k))) 0%,rgba(255,255,255,.2) 24%,rgba(255,255,255,.03) 48%,rgba(var(--shade),.15) 64%,rgba(255,255,255,.32) 88%,rgba(255,255,255,calc(.5 + .16*var(--k))) 100%) 1;
  background:linear-gradient(155deg,rgba(208,215,213,calc(.66*(1 - var(--k)))),rgba(226,231,229,calc(.46*(1 - var(--k)))) 55%,rgba(218,224,222,calc(.58*(1 - var(--k)))));
  -webkit-backdrop-filter:blur(calc(14px*(1 - var(--k)))) saturate(1.1);backdrop-filter:blur(calc(14px*(1 - var(--k)))) saturate(1.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,calc(.9*var(--k))),0 12px 12px -10px rgba(var(--shade),.24),0 3px 4px -3px rgba(var(--shade),.14),0 1px 2px rgba(var(--shade),.09);
  transition:--k .3s ease}
.typer input:focus{--k:1}
.typer input::placeholder{color:#5B6063;opacity:1}

/* ---------- forced-colours and reduced motion ---------- */
@media (forced-colors:active){
  .btn::before,.ibtn::before,.vopt::before,.chipbtn::before,.tbtn::before,.micbtn::before,.cact button::before{display:none}
  .btn,.ibtn,.vopt,.chipbtn,.tbtn,.micbtn,.cact button{border:1px solid ButtonText!important;border-image:none!important;box-shadow:none!important}
  .btn:disabled,.ibtn:disabled{border-color:GrayText!important;color:GrayText!important}
  .vopt[aria-checked="true"],.micbtn[aria-pressed="true"]{background:Highlight!important;color:HighlightText!important}
  :focus-visible{outline:2px solid CanvasText!important;outline-offset:3px!important}
  .glow i{box-shadow:0 0 0 3px Highlight}
  .ribbon{display:none}
}
@media (prefers-reduced-motion:reduce){.glow i{animation:none;opacity:1}.glow{transition:none}}

/* ---------- board mode on wide screens: the orb moves into a SIDE PANEL, the cards fill the rest ----------
   app.js only flips data-mode between "home" and "board", so this is layout only. Under 900px the existing slim bar is kept. */
@media (min-width:900px){
  .app[data-mode="board"]{display:grid;grid-template-columns:clamp(250px,23vw,300px) minmax(0,1fr);
    grid-template-areas:"top top" "perm perm" "stage board" "stage tscript" "foot foot";
    grid-template-rows:auto auto auto 1fr auto;column-gap:clamp(14px,2vw,26px);row-gap:var(--gap);align-content:start}
  .app[data-mode="board"] .top{grid-area:top}
  .app[data-mode="board"] #perm{grid-area:perm}
  .app[data-mode="board"] .board{grid-area:board;min-width:0}
  .app[data-mode="board"] .transcript{grid-area:tscript;min-width:0}
  .app[data-mode="board"] .foot{grid-area:foot}
  .app[data-mode="board"] .stage{grid-area:stage;position:sticky;top:14px;align-self:start;flex:none;
    flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:flex-start;text-align:center;
    gap:14px;padding:22px 16px 20px;border-radius:var(--r)}
  .app[data-mode="board"] .orbwrap{--w:clamp(170px,15vw,220px);width:var(--w);margin:0 0 66px}
  .app[data-mode="board"] .micbtn{width:52px;height:52px;left:50%;top:calc(100% + 10px);bottom:auto;right:auto;transform:translateX(-50%)}
  .app[data-mode="board"] .micbtn:active{transform:translateX(-50%)}
  .app[data-mode="board"] .stagetext{flex:none;width:100%;min-width:0;max-width:none;flex-direction:column;flex-wrap:nowrap;align-items:center;gap:12px;padding:0}
  .app[data-mode="board"] .examples{flex-direction:column;align-items:stretch;justify-content:flex-start;width:100%;gap:8px}
  .app[data-mode="board"] .examples li{display:block}
  .app[data-mode="board"] .examples .chipbtn{width:100%;padding:8px 14px;white-space:normal;line-height:1.25}
  .app[data-mode="board"] .voicehint,.app[data-mode="board"] .typer{flex-basis:auto;width:100%;max-width:none}
  .app[data-mode="board"] .typer{flex-direction:column}
  .app[data-mode="board"] .typer input{width:100%}
}

/* ---------- the green is LIQUID GLASS ----------
   Every solid teal chart mark is now a translucent tinted-glass tube/bead: see-through body, soft glint from the top left,
   a faint teal shadow underneath. The material is defined once in index.html (#lgGrad, #lgRing, #lgBead, #lgLine).
   Real-time SVG lighting is an approximation of glass, not a path-traced material. */
.ring circle{stroke-width:7}
.ring .t{stroke:rgba(var(--shade),.09)}
.ring .v{stroke:url(#lgGrad)!important;filter:url(#lgRing)}
.gfx-svg .dot circle[fill="var(--link)"]{fill:url(#lgGrad)!important;stroke:rgba(255,255,255,.75)!important;filter:url(#lgBead)}
.gfx-svg .dot circle[fill="var(--link)"] + .dl{fill:var(--ink)}
.pline{stroke:rgba(4,122,118,.72)!important;filter:url(#lgLine)}
.pdot.last{fill:url(#lgGrad)!important;stroke:rgba(255,255,255,.8)!important;filter:url(#lgBead)}
.seg.p{
  background:linear-gradient(180deg,rgba(255,255,255,.55) 0,rgba(255,255,255,.08) 46%,rgba(255,255,255,0) 52%),linear-gradient(90deg,rgba(59,177,168,.70),rgba(4,122,118,.62) 60%,rgba(134,214,203,.66))!important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.85),inset 0 -2px 3px rgba(2,70,68,.22),0 4px 6px -4px rgba(4,122,118,.55)!important}
@media (forced-colors:active){.ring .v,.pline{stroke:Highlight!important;filter:none}.gfx-svg .dot circle[fill="var(--link)"],.pdot.last{fill:Highlight!important;filter:none}.seg.p{background:Highlight!important;box-shadow:none!important}}

/* ---------- cards: FROSTED glass ----------
   A milky tint, a stronger blur, a fine grain so the frost reads as frost (not just a pale box), a bright top-left edge and a soft shadow.
   Same material for the side panel, transcript and notices so every panel matches. */
.glass,.card,.notice,.transcript,.app[data-mode="board"] .stage{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .30 0 0 0 0 .34 0 0 0 0 .34 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.30'/%3E%3C/svg%3E") 0 0/180px 180px,
    linear-gradient(155deg,rgba(250,252,252,.74),rgba(222,231,229,.50) 52%,rgba(244,248,247,.66))!important;
  -webkit-backdrop-filter:blur(28px) saturate(1.2)!important;backdrop-filter:blur(28px) saturate(1.2)!important;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.95),inset -1px -1px 0 rgba(var(--shade),.09),inset 0 0 22px rgba(255,255,255,.35),0 22px 30px -22px rgba(var(--shade),.32),0 3px 7px -4px rgba(var(--shade),.14)!important}
.card.hl{background:linear-gradient(155deg,rgba(255,255,255,.86),rgba(240,246,245,.66))!important}
@media (prefers-reduced-transparency:reduce){.glass,.card,.notice,.transcript,.app[data-mode="board"] .stage{background:rgba(247,249,249,.98)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}
/* the transcript bar floats over scrolling cards, so it is frosted more heavily to keep its own text clear */
.transcript{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .30 0 0 0 0 .34 0 0 0 0 .34 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.30'/%3E%3C/svg%3E") 0 0/180px 180px,
  linear-gradient(155deg,rgba(247,250,250,.93),rgba(232,239,238,.88))!important;
  -webkit-backdrop-filter:blur(34px) saturate(1.15)!important;backdrop-filter:blur(34px) saturate(1.15)!important}

/* Landing balance and silver mirror-style voice characters; existing orb, dial and palette are unchanged.
   The small person icons use SVG reflection fields, not a physically rendered metal material. */
.voice-person{width:28px;height:34px;flex:none;overflow:visible;filter:drop-shadow(0 2px 1px rgba(var(--shade),.18))}
.voices{flex-wrap:wrap;justify-content:center}
.vopt{width:128px;min-width:128px;min-height:52px;padding:0 10px;gap:6px}
.vopt:not([aria-checked="true"])::after{content:"";order:-1;width:16px;height:16px;flex:none;visibility:hidden}
@media(forced-colors:active){.voice-person{filter:none}.voice-person path{fill:ButtonText;stroke:ButtonText}.voice-person ellipse{display:none}}

/* Centred top-orb layout: the same focal point and controls in home and result views. */
.app:is([data-mode="home"],[data-mode="board"]){display:flex;flex-direction:column;gap:20px}
.app[data-mode] .stage{position:relative;top:auto;align-self:center;display:flex;flex:none;flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:flex-start;text-align:center;width:100%;max-width:1040px;margin:0 auto;gap:14px;padding:8px 20px 24px}
.app[data-mode] .orbwrap{--w:clamp(240px,30vh,300px);width:var(--w);margin:0 0 66px;align-self:center}
.app[data-mode] .micbtn{width:52px;height:52px;left:50%;right:auto;top:calc(100% + 10px);bottom:auto;transform:translateX(-50%)}
.app[data-mode] .micbtn:active{transform:translateX(-50%)}
.app[data-mode] .micbtn svg{width:24px;height:24px}
.app[data-mode] .stagetext{display:flex;flex:none;flex-direction:column;flex-wrap:nowrap;align-items:center;width:100%;min-width:0;max-width:660px;gap:12px;padding:0}
.app[data-mode] #welcome,.app[data-mode] #welcome-sub{display:block}
.app[data-mode] .stagetext h1{margin:0;font-size:clamp(26px,3vw,36px);line-height:1.2}
.app[data-mode] .sub{margin:0;max-width:46ch;font-size:14px;line-height:1.6}
.app[data-mode] .examples{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;width:auto;margin:4px 0 0;gap:8px}
.app[data-mode] .examples .chipbtn{width:auto;min-height:44px;padding:8px 16px;white-space:normal;line-height:1.35}
.app[data-mode] .voices{margin:0}
.app[data-mode] .voicehint{flex-basis:auto;width:100%;max-width:54ch}
.app[data-mode] .typer{flex-basis:auto;flex-direction:row;width:100%;max-width:520px}
.app[data-mode] .typer input{width:auto;min-width:0}
.app[data-mode] .board{flex:none;width:100%;max-width:1040px;margin:0 auto;gap:16px}
.app[data-mode] .boardbar{align-items:center;justify-content:space-between;gap:12px 20px}
.app[data-mode] .boardctl{flex-wrap:wrap;gap:8px}
.app[data-mode] .cards{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:20px}
.app[data-mode] .card{height:100%}
.app[data-mode] .transcript{position:relative;bottom:auto;width:100%;max-width:1040px;margin:0 auto}
.app[data-mode] .foot{width:100%;max-width:760px;margin:0 auto;padding:8px 4px 0;text-align:center}
.app[data-mode] .foot p{max-width:none;line-height:1.7}
.result-notes{font-size:12.5px;line-height:1.7;margin:0 0 8px}
.result-notes summary{cursor:pointer;list-style-position:inside;padding:6px}
.result-notes[open] summary{margin-bottom:6px}
@media(min-width:1100px){.app[data-mode] .cards:has(>.card:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.app[data-mode] .top{flex-wrap:wrap;justify-content:center;row-gap:12px}.app[data-mode] .brand{justify-content:center;flex-basis:100%}.app[data-mode] .stage{padding:4px 8px 20px}.app[data-mode] .orbwrap{--w:min(68vw,260px)}.app[data-mode] .cards{grid-template-columns:minmax(0,1fr);gap:16px}.app[data-mode] .boardbar{justify-content:center;text-align:center}.app[data-mode] .boardctl{justify-content:center}.app[data-mode] .typer{gap:8px}}

/* Minimal opening; results use the sidebar only after actual listening starts or a saved-result question is selected. */
.app[data-mode="home"] #welcome-sub,.app[data-mode="board"] #welcome-sub{display:none}
.app[data-mode="home"][data-state="idle"] .status{display:none}
.app[data-mode="home"] .stage{padding-top:4px;padding-bottom:28px}
.prompt-menu{width:100%;margin-top:12px}
.prompt-menu summary{display:list-item;list-style-position:inside;cursor:pointer;min-height:44px;padding:10px 12px;text-align:left;font-size:13px;line-height:1.5}
.app[data-mode] .prompt-menu .examples{width:100%;margin:12px 0 0;display:flex;flex-direction:column;align-items:stretch;gap:8px}
.app[data-mode] .prompt-menu .examples .chipbtn{width:100%;justify-content:flex-start;text-align:left}
.app[data-mode="home"] .prompt-menu{display:none}
.app[data-mode="home"]:has(#typer:not([hidden])) .prompt-menu{display:block;max-width:520px}
.app[data-mode="board"] .prompt-menu{margin-top:16px}
.app[data-mode="board"] .stage{gap:14px;padding:22px 16px 20px;max-width:none}
.app[data-mode="board"] .orbwrap{--w:180px;width:var(--w);margin:0 0 66px}
.app[data-mode="board"] .stagetext{max-width:none;gap:12px}
.app[data-mode="board"] .stagetext h1{font-size:22px}
.app[data-mode="board"] .typer{flex-direction:column}
.app[data-mode="board"] .typer input{width:100%}
@media(min-width:900px){.app[data-mode="board"]{display:grid;grid-template-columns:clamp(250px,23vw,300px) minmax(0,1fr);grid-template-areas:"top top" "perm perm" "stage board" "stage tscript" "foot foot";grid-template-rows:auto auto auto 1fr auto;column-gap:clamp(14px,2vw,26px);row-gap:20px;align-content:start}.app[data-mode="board"] .stage{position:sticky;top:14px;align-self:start}.app[data-mode="board"] .board{max-width:none}.app[data-mode="board"] .transcript{max-width:none}.app[data-mode="board"] .cards:has(>.card:nth-child(3):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:899px){.app[data-mode="board"] .stage{max-width:660px}.app[data-mode="board"] .orbwrap{--w:180px}.app[data-mode="board"] .prompt-menu{max-width:520px}.app[data-mode="board"] .stagetext{max-width:520px}}

/* Bare silver selectors and one transport unit. Invisible hit areas retain keyboard/touch access; no selected frame or check. */
.app[data-mode] .voices{background:none;border:0;box-shadow:none;padding:0;gap:12px}
.app[data-mode] .vopt{--person-finish:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:76px;min-width:76px;min-height:78px;padding:6px;background:none!important;background-image:none!important;border:0!important;border-image:none!important;box-shadow:none!important;text-shadow:none;transform:none!important}
.app[data-mode] .vopt::before,.app[data-mode] .vopt::after{content:none!important;display:none!important}
.app[data-mode] .vopt .voice-person{width:34px;height:40px;filter:contrast(var(--person-finish)) drop-shadow(0 2px 1px rgba(var(--shade),.18));transition:filter .2s ease}
.app[data-mode] .vopt[aria-checked="true"]{--person-finish:.68}
@media(hover:hover){.app[data-mode] .vopt:hover:not([aria-checked="true"]){--person-finish:.82}}
.app[data-mode] .vopt:active{--person-finish:.68}
.app[data-mode] .orbwrap{margin-bottom:88px}
.voice-control{position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%);display:grid;grid-template-columns:48px 44px;gap:4px 8px;align-items:center;justify-content:center}
.app[data-mode] .voice-control .bare-transport{position:relative;left:auto;right:auto;top:auto;bottom:auto;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:48px;width:48px;height:48px;padding:6px;transform:none!important;border:0!important;border-image:none!important;background:none!important;box-shadow:none!important;text-shadow:none;cursor:pointer}
.app[data-mode] .bare-transport::before,.app[data-mode] .bare-transport::after{content:none!important;display:none!important}
.app[data-mode] .voice-control #mic svg{width:34px;height:34px;filter:drop-shadow(0 2px 1px rgba(var(--shade),.18))}
.app[data-mode] .bare-transport svg path[fill="currentColor"],.app[data-mode] .bare-transport svg rect[fill="currentColor"],.voice-settings svg path:first-child{fill:url(#voice-ric-silver)}
.voice-settings svg path:last-child{stroke:var(--mute)}
.app[data-state="listening"] #mic svg,.app[data-state="thinking"] #mic svg,.app[data-state="speaking"] #mic svg{filter:contrast(.68) drop-shadow(0 2px 1px rgba(var(--shade),.18))}
.voice-control .voice-settings svg{width:20px;height:20px;filter:drop-shadow(0 1px 1px rgba(var(--shade),.18))}
.voice-control .status{grid-column:1/-1;justify-self:center;white-space:nowrap;padding:0;background:none;border:0;box-shadow:none;font-size:11px;line-height:16px}
.voice-control .status::before{display:none}
.app[data-mode="home"][data-state="idle"] .voice-control .status{display:inline-flex}
.voice-audio-panel{position:fixed;inset:90px 24px auto auto;width:min(270px,calc(100vw - 32px));margin:0;padding:14px}
.voice-audio-panel:popover-open{display:flex;flex-direction:column;gap:8px}
.voice-audio-panel .audio-action{display:flex;align-items:center;justify-content:flex-start;gap:12px;width:100%;min-height:48px;padding:8px 12px}
.voice-audio-panel .audio-action span{font-size:13px;white-space:nowrap}
@media(max-width:600px){.voice-audio-panel{inset:120px 16px auto auto}}
@media(prefers-reduced-motion:reduce){.app[data-mode] .vopt .voice-person{transition:none}}