:root{color-scheme:light dark;--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;--text-xs: 12px;--text-sm: 13px;--text-base: 15px;--text-lg: 17px;--text-xl: 26px;--radius-sm: 8px;--radius-md: 10px;--radius-lg: 16px;--bg: oklch(.975 .003 265);--surface: oklch(1 0 0);--surface-sunken: oklch(.965 .004 265);--text: oklch(.24 .012 265);--text-muted: oklch(.52 .014 265);--border: oklch(.25 .02 265 / .1);--border-strong: oklch(.25 .02 265 / .18);--primary: oklch(.24 .012 265);--primary-text: oklch(.99 0 0);--chip-selected: oklch(.24 .012 265);--chip-selected-text: oklch(.99 0 0);--focus: oklch(.24 .012 265);--danger-text: oklch(.5 .19 27);--danger-bg: oklch(.96 .03 27);--shadow-card: 0 1px 2px oklch(.2 .02 265 / .04), 0 2px 8px oklch(.2 .02 265 / .04);--state-idle: var(--text-muted);--state-connecting: oklch(.76 .15 75);--state-recording: oklch(.62 .21 27);--state-processing: oklch(.6 .17 252);--state-done: oklch(.64 .15 152);--state-error: oklch(.58 .22 27);--code-keyword: oklch(.5 .2 300);--code-string: oklch(.5 .13 155);--code-comment: var(--text-muted)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg: oklch(.16 .005 265);--surface: oklch(.205 .006 265);--surface-sunken: oklch(.18 .005 265);--text: oklch(.94 .005 265);--text-muted: oklch(.7 .012 265);--border: oklch(1 0 0 / .08);--border-strong: oklch(1 0 0 / .16);--primary: oklch(.94 .005 265);--primary-text: oklch(.18 .006 265);--chip-selected: oklch(.94 .005 265);--chip-selected-text: oklch(.18 .006 265);--focus: oklch(.94 .005 265);--danger-text: oklch(.78 .13 27);--danger-bg: oklch(.3 .07 27);--shadow-card: 0 1px 2px oklch(0 0 0 / .3);--state-connecting: oklch(.8 .14 75);--state-recording: oklch(.68 .19 27);--state-processing: oklch(.7 .14 252);--state-done: oklch(.74 .15 152);--state-error: oklch(.66 .2 27);--code-keyword: oklch(.8 .12 300);--code-string: oklch(.8 .13 155)}}:root[data-theme=light]{color-scheme:light}:root[data-theme=dark]{color-scheme:dark;--bg: oklch(.16 .005 265);--surface: oklch(.205 .006 265);--surface-sunken: oklch(.18 .005 265);--text: oklch(.94 .005 265);--text-muted: oklch(.7 .012 265);--border: oklch(1 0 0 / .08);--border-strong: oklch(1 0 0 / .16);--primary: oklch(.94 .005 265);--primary-text: oklch(.18 .006 265);--chip-selected: oklch(.94 .005 265);--chip-selected-text: oklch(.18 .006 265);--focus: oklch(.94 .005 265);--danger-text: oklch(.78 .13 27);--danger-bg: oklch(.3 .07 27);--shadow-card: 0 1px 2px oklch(0 0 0 / .3);--state-connecting: oklch(.8 .14 75);--state-recording: oklch(.68 .19 27);--state-processing: oklch(.7 .14 252);--state-done: oklch(.74 .15 152);--state-error: oklch(.66 .2 27);--code-keyword: oklch(.8 .12 300);--code-string: oklch(.8 .13 155)}:where(canvas[data-state=connecting]){--av-accent: var(--state-connecting)}:where(canvas[data-state=recording]){--av-accent: var(--state-recording)}:where(canvas[data-state=processing]){--av-accent: var(--state-processing)}:where(canvas[data-state=done]){--av-accent: var(--state-done)}:where(canvas[data-state=error]){--av-accent: var(--state-error)}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-width:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:var(--text-base);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,p{margin:0}button,input,select{font:inherit;color:inherit}button,label,select,input{touch-action:manipulation}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.page{max-width:1160px;margin:0 auto;padding:40px 32px 64px;display:grid;gap:32px}.site-header{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px}.brand{display:inline-flex;align-items:center;gap:10px;font-size:var(--text-lg);font-weight:650;letter-spacing:-.01em}.brand img{display:block;border-radius:7px;box-shadow:0 0 0 1px var(--border-strong)}.site-nav{display:flex;flex-wrap:wrap;margin-right:auto}.site-nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 10px;border-radius:var(--radius-sm);color:var(--text-muted);font-size:var(--text-sm);font-weight:500;text-decoration:none;touch-action:manipulation;transition-property:color,background-color;transition-duration:.15s;transition-timing-function:ease-out}.site-nav a:focus-visible{outline:2px solid var(--focus);outline-offset:0}@media(max-width:719px){.site-nav{margin-left:-10px}}@media(hover:hover)and (pointer:fine){.site-nav a:hover{color:var(--text);background:var(--surface-sunken)}}.sections{display:grid;gap:72px}.page-section{display:grid;gap:24px;min-width:0;scroll-margin-top:24px}.page-heading{font-size:var(--text-xl);font-weight:650;letter-spacing:-.02em;line-height:1.2}.subtitle{margin-top:6px;color:var(--text-muted);max-width:60ch;text-wrap:pretty}.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;grid-template-areas:"stage controls" "dictation controls" "gallery controls";grid-template-rows:auto auto 1fr;gap:24px;align-items:start}.area-stage{grid-area:stage}.area-dictation{grid-area:dictation}.area-controls{grid-area:controls}.area-gallery{grid-area:gallery}@media(max-width:719px){.page{padding:16px 16px 48px;gap:24px}.sections{gap:56px}.layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"stage" "dictation" "controls" "gallery";grid-template-rows:none;gap:16px}.area-stage{position:sticky;top:0;z-index:1;background:var(--surface)}}.card{min-width:0;display:grid;gap:20px;padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}@media(max-width:719px){.card{padding:20px 16px}}.card-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}.section-title{font-size:var(--text-lg);font-weight:600;letter-spacing:-.01em;line-height:1.3}.area-controls{gap:0;padding-block:8px}.panel-section{display:grid;gap:16px;padding-block:16px}.panel-section+.panel-section{border-top:1px solid var(--border)}.hint{display:block;font-size:var(--text-sm);color:var(--text-muted);text-wrap:pretty}.muted{color:var(--text-muted)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.alert{padding:10px 12px;border-radius:var(--radius-md);background:var(--danger-bg);color:var(--danger-text);font-size:var(--text-sm)}.badge{display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border:1px solid var(--border);border-radius:999px;font-size:var(--text-sm);color:var(--text-muted);white-space:nowrap}.badge-live{color:var(--danger-text)}.state-dot{width:8px;height:8px;border-radius:50%;background:var(--state-idle)}.state-dot[data-state=connecting]{background:var(--state-connecting)}.state-dot[data-state=recording]{background:var(--state-recording)}.state-dot[data-state=processing]{background:var(--state-processing)}.state-dot[data-state=done]{background:var(--state-done)}.state-dot[data-state=error]{background:var(--state-error)}.field{display:grid;gap:8px;min-width:0;margin:0;padding:0;border:0}.field-head{display:flex;align-items:baseline;justify-content:space-between}.field-label{padding:0;font-size:var(--text-sm);font-weight:500;color:var(--text-muted)}.value{font-size:var(--text-sm);font-variant-numeric:tabular-nums;color:var(--text-muted)}.select{width:100%;min-height:40px;padding:0 12px;font-size:16px;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-md)}.range{width:100%;height:40px;margin:0;accent-color:var(--primary)}.check{display:flex;align-items:flex-start;gap:10px;cursor:pointer}.check input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--primary)}.chips{display:flex;flex-wrap:wrap;gap:6px}.chip{position:relative;display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--border-strong);border-radius:999px;font-size:var(--text-sm);font-weight:500;cursor:pointer;-webkit-user-select:none;user-select:none;transition-property:background-color,color,border-color;transition-duration:.15s;transition-timing-function:ease-out}.chip input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}.chip:has(input:checked){background:var(--chip-selected);border-color:var(--chip-selected);color:var(--chip-selected-text)}.chip:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}@media(hover:hover)and (pointer:fine){.chip:not(:has(input:checked)):hover{background:var(--surface-sunken)}}.swatches{display:flex;flex-wrap:wrap;gap:4px}.swatch{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;cursor:pointer}.swatch-dot{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--text) 50%,var(--surface) 50%);box-shadow:inset 0 0 0 1px var(--border-strong)}.swatch:has(input:checked) .swatch-dot{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--text)}.swatch:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:0}.button-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface);font-size:var(--text-base);font-weight:500;cursor:pointer;-webkit-user-select:none;user-select:none;justify-self:start;transition-property:background-color,border-color,transform;transition-duration:.15s;transition-timing-function:ease-out}.button-primary{background:var(--primary);border-color:var(--primary);color:var(--primary-text)}.button-quiet{border-color:transparent;background:transparent;color:var(--text-muted)}.button:disabled,.button[aria-disabled=true]{cursor:default;color:var(--text-muted);background:var(--surface-sunken);border-color:var(--border)}.button-quiet:disabled,.button-quiet[aria-disabled=true]{background:transparent;border-color:transparent}.button:focus-visible,.file-button:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}@media(hover:hover)and (pointer:fine){.button:not(:disabled,[aria-disabled=true]):hover{background:var(--surface-sunken)}.button-primary:not(:disabled,[aria-disabled=true]):hover{background:color-mix(in oklch,var(--primary) 88%,var(--surface))}}@media(prefers-reduced-motion:no-preference){.button:not(:disabled,[aria-disabled=true]):active{transform:scale(.96)}}.preview{min-height:24px;padding:0;border-radius:var(--radius-md);overflow:hidden}.dictation{display:grid;justify-items:center;gap:16px;padding:32px 16px 24px;border-radius:var(--radius-md);background:var(--surface-sunken);text-align:center}.dictation>.button{justify-self:center}.recording-window{--state-connecting: oklch(.8 .14 75);--state-recording: oklch(.68 .2 27);--state-processing: oklch(.7 .14 252);--state-done: oklch(.74 .15 152);--state-error: oklch(.66 .2 27);display:inline-flex;align-items:center;gap:12px;height:44px;padding:0 18px 0 14px;border-radius:999px;background:#121417;color:#f1f2f4;box-shadow:0 0 0 1px #ffffff14 inset,0 1px 2px #00000029,0 6px 16px #00000029,0 16px 32px #0000001f}.recording-window-viz{width:72px;height:24px;flex:none}.recording-window-label{min-width:11ch;font-size:var(--text-sm);font-weight:500;text-align:left;color:#ccced1}.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin:0;padding:0;list-style:none}.tile{display:grid;gap:10px;padding:16px 16px 12px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-sunken)}.tile-stage{height:64px}.tile-label{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted)}.transcript{min-height:96px;max-height:240px;overflow-y:auto;padding:14px 16px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-sunken);white-space:pre-wrap;overflow-wrap:anywhere}.speech{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;align-items:start}.speech-stage{display:grid;justify-items:center;align-content:center;gap:20px;min-height:240px;padding:40px 16px;border-radius:var(--radius-md);background:var(--surface-sunken)}.speech-stage .button-row{justify-content:center}.speech-text{display:grid;gap:12px;min-width:0}.speech .transcript{min-height:160px}.recording-window-wide{width:min(100%,360px);height:56px;gap:16px;padding:0 20px 0 18px}.recording-window-wide .recording-window-viz{flex:1;min-width:0;width:auto;height:28px}@media(max-width:859px){.speech{grid-template-columns:minmax(0,1fr)}}.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:32px 56px;padding-block:32px 8px}.hero-title{font-size:clamp(32px,4.6vw,48px);font-weight:700;letter-spacing:-.03em;line-height:1.08;text-wrap:balance}.hero-lead{margin-top:16px;max-width:52ch;font-size:var(--text-lg);color:var(--text-muted);text-wrap:pretty}.hero-code{display:grid;gap:24px;min-width:0}.hero-code-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.hint code{font-family:var(--font-mono);font-size:.95em}@media(max-width:859px){.hero{grid-template-columns:minmax(0,1fr);padding-block:16px 0}}.examples{display:grid;gap:24px}.example-head{display:grid;gap:4px}.example-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px}.example-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-width:0;min-height:280px;padding:32px 24px;border-radius:var(--radius-md);background:var(--surface-sunken)}@media(max-width:859px){.example-body{grid-template-columns:minmax(0,1fr)}.example-stage{min-height:220px}}.example-stage button:not([class]){display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 16px;border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface);font-weight:500;cursor:pointer;touch-action:manipulation}.example-stage button{transition-property:background-color,transform;transition-duration:.15s;transition-timing-function:ease-out}.example-stage button:not([class]):disabled{cursor:default;color:var(--text-muted);background:var(--surface-sunken)}@media(hover:hover)and (pointer:fine){.example-stage button:not([class]):not(:disabled):hover{background:color-mix(in oklch,var(--surface) 92%,var(--text))}}@media(prefers-reduced-motion:no-preference){.example-stage button:not(:disabled):active{transform:scale(.96)}}.example-stage :focus-visible{outline:2px solid var(--focus);outline-offset:2px}.example-stage [role=alert]{max-width:40ch;font-size:var(--text-sm);color:var(--danger-text);text-align:center;text-wrap:pretty}.example-stage audio{width:100%;max-width:320px}.code-tabs{display:flex;flex-direction:column;min-width:0;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-sunken);overflow:hidden}.code-tabs-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px;border-bottom:1px solid var(--border)}.tabs{display:flex;min-width:0}.tab{position:relative;min-height:40px;padding:0 12px;border:0;border-radius:var(--radius-sm);background:none;color:var(--text-muted);font-size:var(--text-sm);font-weight:500;cursor:pointer;touch-action:manipulation;transition:color .15s ease-out}.tab[aria-selected=true]{color:var(--text)}.tab[aria-selected=true]:after{content:"";position:absolute;inset:auto 12px -1px;height:2px;border-radius:1px;background:currentColor}@media(hover:hover)and (pointer:fine){.tab:hover{color:var(--text)}}.copy-button{display:inline-flex;flex:none;align-items:center;gap:6px;min-height:40px;padding:0 10px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text-muted);font-size:var(--text-sm);font-weight:500;font-variant-numeric:tabular-nums;cursor:pointer;touch-action:manipulation;transition-property:color,background-color,transform;transition-duration:.15s;transition-timing-function:ease-out}.copy-icon{flex:none}@media(hover:hover)and (pointer:fine){.copy-button:hover{color:var(--text);background:var(--surface)}}@media(prefers-reduced-motion:no-preference){.copy-button:active{transform:scale(.96)}}.tab:focus-visible,.copy-button:focus-visible,.code-scroll:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}.code-scroll{flex:1;min-width:0;max-height:480px;overflow:auto;border-radius:0 0 var(--radius-md) var(--radius-md);scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}.code{width:max-content;min-width:100%;margin:0;padding:14px 16px 16px;font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.6;tab-size:2}.code code{font:inherit}.tok-keyword{color:var(--code-keyword)}.tok-string{color:var(--code-string)}.tok-comment{color:var(--code-comment);font-style:italic}.dictation-button{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px 0 14px;border:0;border-radius:999px;background:#1c1c1e;box-shadow:inset 0 0 0 1px #ffffff1a;color:#f5f5f7;font:inherit;font-weight:500;cursor:pointer}.dictation-button canvas{--av-accent: #8e8e93}.dictation-button canvas[data-state=connecting]{--av-accent: #ffd60a}.dictation-button canvas[data-state=recording]{--av-accent: #ff453a}.themed{color:#8e8e93;--av-accent: #8e8e93;transition:color .3s}.themed[data-state=connecting]{color:#ff9f0a;--av-accent: #ff9f0a}.themed[data-state=recording]{color:#5e5ce6;--av-accent: #ff3b30}.themed[data-state=done]{color:#34c759;--av-accent: #34c759}.themed[data-state=error]{color:#ff3b30;--av-accent: #ff3b30}