/* OpenDictate website. Colours and sizes come from tokens.css (design/generated/tokens.css). */
@font-face{font-family:"Geist Pixel";src:url("fonts/GeistPixel-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("fonts/GeistMono-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("fonts/GeistMono-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Geist";src:url("fonts/Geist-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Geist";src:url("fonts/Geist-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}

/* ---------- Components (design/components/web/bundle.css) ---------- */
/* ---------- Blink pixel colours (one class per pixel code) ---------- */
.od-px-B { fill: var(--signal); }
.od-px-L { fill: var(--signal-light); }
.od-px-S { fill: var(--signal-shade); }
.od-px-E, .od-px-k { fill: var(--signal-ink); }
.od-px-K { fill: var(--signal-deep); }
.od-px-W { fill: var(--sneaker); }
.od-px-w { fill: var(--sneaker-light); }
.od-px-V, .od-px-G { fill: var(--sole); }
.od-px-r, .od-px-R, .od-px-C { fill: var(--rec); }
.od-px-Q { fill: var(--glitch); }
.od-px-D { fill: var(--floor); }
.od-px-d { fill: var(--line); }
.od-px-a, .od-px-b, .od-px-c { fill: var(--signal); }
.od-px-m { fill: var(--ink-muted); opacity: .6; }
.od-px-1, .od-px-2, .od-px-3 { fill: var(--ink-muted); }
.od-px-X { fill: var(--ink); opacity: .8; }
.od-px-Y { fill: var(--warn); }
.od-px-y { fill: var(--sneaker-light); }
.od-blink { display: block; }
.od-glow { filter: drop-shadow(var(--glow)); }

/* ---------- Motion: always in steps, like an old game ---------- */
.od-a-body { animation: od-k-blink 1.1s steps(1, end) infinite; }
.od-a-blink { animation: od-k-blink .8s steps(1, end) infinite; }
.od-a-arc { animation: od-k-arc 1.2s steps(3, end) infinite; }
.od-a-type { animation: od-k-type 1.8s steps(1, end) infinite backwards; }
.od-a-run-a { animation: od-k-run-a .36s steps(1, end) infinite; }
.od-a-run-b { opacity: 0; animation: od-k-run-b .36s steps(1, end) infinite; }
.od-a-hop { animation: od-k-hop 1.4s steps(1, end) infinite; }
.od-a-hop-shadow { animation: od-k-hop-shadow 1.4s steps(1, end) infinite; transform-box: fill-box; transform-origin: 50% 50%; }
.od-a-twinkle { animation: od-k-twinkle 1.4s steps(1, end) infinite; }
.od-a-glitch { animation: od-k-glitch 2.2s steps(1, end) infinite; }
.od-a-flicker { animation: od-k-flicker .5s steps(1, end) infinite; }
@keyframes od-k-blink { 50% { opacity: 0; } }
@keyframes od-k-arc { 0% { opacity: .2; } 50% { opacity: 1; } 100% { opacity: .2; } }
@keyframes od-k-type { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 1; } }
@keyframes od-k-run-a { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes od-k-run-b { 0% { opacity: 0; } 50% { opacity: 1; } }
@keyframes od-k-hop { 0% { transform: none; } 15% { transform: translateY(-2px); } 25% { transform: translateY(-4px); } 40% { transform: translateY(-5px); } 50% { transform: translateY(-3px); } 60% { transform: none; } }
@keyframes od-k-hop-shadow { 0% { transform: none; } 25% { transform: scaleX(.85); } 40% { transform: scaleX(.75); } 60% { transform: none; } }
@keyframes od-k-twinkle { 0% { opacity: 0; } 40% { opacity: 1; } 75% { opacity: 0; } }
@keyframes od-k-glitch { 0% { transform: none; } 8% { transform: translateX(-1px); } 14% { transform: translateX(1px); } 20% { transform: none; } 60% { transform: translateX(1px); } 64% { transform: none; } }
@keyframes od-k-flicker { 50% { opacity: .25; } }
.od-still *, .od-still { animation: none !important; }
.od-still .od-a-run-b { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .od-a-body, .od-a-blink, .od-a-arc, .od-a-type, .od-a-run-a, .od-a-hop, .od-a-hop-shadow, .od-a-twinkle, .od-a-glitch, .od-a-flicker { animation: none; }
  .od-a-run-b { animation: none; opacity: 0; }
}

/* ---------- Wordmark ---------- */
.od-wordmark { display: inline-block; font-family: var(--font-pixel); font-weight: 400; color: var(--ink); line-height: 1.3; white-space: nowrap; }
.od-wordmark-blink { width: .532em; height: 1.102em; vertical-align: -.342em; margin-left: .076em; }

/* ---------- Button: stepped pixel corners on a background layer, so the focus ring is never clipped ---------- */
.od-btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border: 0; background: transparent; font-family: var(--font-mono); font-weight: 600; font-size: var(--type-ui-size); line-height: var(--type-ui-line); cursor: pointer; }
.od-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: polygon(0 6px, 3px 6px, 3px 3px, 6px 3px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 6px), 0 calc(100% - 6px)); }
.od-btn-primary { color: var(--on-signal); }
.od-btn-primary::before { background: var(--signal); }
.od-btn-secondary { color: var(--ink); }
.od-btn-secondary::before { background: var(--line); }
.od-btn:hover::before { filter: brightness(1.08); }
.od-btn:active { transform: translateY(1px); }
.od-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.od-btn:disabled { cursor: not-allowed; opacity: .5; }

/* ---------- Keycap ---------- */
.od-key { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 60px; min-width: 60px; padding: 0 12px 5px; background: var(--surface-sunken); box-shadow: inset 0 -5px 0 var(--floor), inset 0 0 0 1px var(--line); color: var(--ink); font: inherit; clip-path: polygon(0 6px, 3px 6px, 3px 3px, 6px 3px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 6px), 0 calc(100% - 6px)); }
.od-key-space { min-width: 112px; }
.od-key-text { font-family: var(--font-pixel); font-size: 22px; line-height: 1; text-transform: lowercase; }
.key-or { align-self: center; color: var(--ink-muted); font-size: 14px; }
.od-key-glyph { fill: currentColor; display: block; }

/* ---------- Meter ---------- */
.od-meter { display: block; }
.od-meter-off { fill: var(--line); opacity: .6; }
.od-meter-on { fill: var(--signal); }
.od-meter-warn { fill: var(--warn); }
.od-meter-peak { fill: var(--rec); }

/* ---------- Progress ---------- */
.od-progress { display: flex; gap: 4px; }
.od-progress-cell { width: 11px; height: 11px; }
.od-progress-on { background: var(--signal); }
.od-progress-off { background: var(--line); }

/* ---------- PixelIcon ---------- */
.od-icon { display: inline-block; vertical-align: middle; }
.od-icon-signal { fill: var(--signal); }
.od-icon-rec { fill: var(--rec); }
.od-icon-ink { fill: var(--ink); }
.od-icon-muted { fill: var(--ink-muted); }

/* ---------- Page ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
:root{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-sans);font-size:var(--type-body-size);line-height:var(--type-body-line);font-synthesis:none;-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration-color:var(--ink-muted);text-underline-offset:3px}
a:not(.od-btn):hover{color:var(--signal)}
a.od-btn{text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
h1,h2,h3{font-family:var(--font-pixel);font-weight:400;margin:0}
p{margin:0}
.skip{position:absolute;left:16px;top:-100px;z-index:10;padding:12px 16px;background:var(--signal);color:var(--on-signal);font-family:var(--font-mono)}
.skip:focus{top:12px}
.wrap{max-width:1248px;margin:0 auto;padding:0 24px}
.muted{color:var(--ink-muted)}
.lead{font-size:var(--type-lead-size);line-height:var(--type-lead-line)}
.meta,.label,.num{font-family:var(--font-mono);font-size:var(--type-label-size);line-height:var(--type-label-line);color:var(--ink-muted)}
.meta{line-height:18px}
.kicker{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:var(--type-label-size);line-height:var(--type-label-line);letter-spacing:.04em;color:var(--ink-muted)}
.kicker [data-od]{display:inline-flex}
.buttons{display:flex;flex-wrap:wrap;gap:12px}

.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;padding:20px 0;border-bottom:1px solid var(--line)}
.home{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.nav{display:flex;flex-wrap:wrap;gap:4px 24px;font-family:var(--font-mono);font-size:var(--type-ui-size);line-height:var(--type-ui-line)}
.nav a{text-decoration:none;padding:12px 0}

.hero{padding-bottom:96px}
.hero-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:32px 64px;padding:72px 0 48px}
.hero-title{flex:1 1 560px;min-width:0}
.hero h1{margin-top:20px;font-size:clamp(52px,7.4vw,108px);line-height:.95;letter-spacing:-.01em}
.hero-side{flex:1 1 360px;max-width:440px;display:flex;flex-direction:column;gap:24px}

.stage{position:relative;height:600px;padding:14px 14px 0;background:#000;border-radius:28px 28px 0 0}
.screen{position:relative;height:100%;overflow:hidden;border-radius:14px 14px 0 0;background:var(--surface-sunken)}
.field{position:absolute;inset:0;z-index:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}
.menubar{position:relative;z-index:1;height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 20px}
.menubar-right{display:flex;align-items:center;gap:12px}
.menubar-rec{font-family:var(--font-mono);font-size:var(--type-label-size);line-height:var(--type-label-line);font-weight:600;color:var(--rec)}
.preview-chip{font-family:var(--font-mono);font-size:var(--type-label-size);line-height:var(--type-label-line);color:var(--ink-muted);padding:4px 10px;box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--radius-chip);background:var(--surface-sunken)}
.hud{--hud-w:620px;--hud-h:176px;position:absolute;left:50%;top:0;z-index:3;transform:translateX(-50%);background:#000;overflow:hidden;width:min(240px,32%);height:38px;border-radius:0 0 16px 16px;transition:width .36s steps(6,end),height .36s steps(6,end),border-radius .36s steps(6,end)}
.hud.is-open{width:min(var(--hud-w),calc(100% - 24px));height:var(--hud-h);border-radius:0 0 40px 40px}
.hud-in{position:absolute;left:50%;top:0;transform:translateX(-50%);width:var(--hud-w);height:var(--hud-h);display:flex;align-items:center;gap:20px;padding:44px 28px 20px;color:var(--ink);visibility:hidden}
.hud.is-open .hud-in{visibility:visible}
.hud-blink{flex:none;display:flex;width:88px;height:100px}
.hud-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px}
.hud-word{font-family:var(--font-pixel);font-size:34px;line-height:38px}
.hud-sub{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:13px;line-height:18px;color:var(--ink-muted)}
.hud-sub [data-od]{display:inline-flex}
.hud-vis{flex:none;width:216px;display:flex;align-items:center;justify-content:center}
.voice{display:block;width:216px;height:72px;image-rendering:pixelated}
.notes{position:absolute;z-index:1;left:50%;top:236px;bottom:0;transform:translateX(-50%);width:min(720px,calc(100% - 32px));display:flex;flex-direction:column;gap:14px;padding:20px 28px;background:var(--surface);border:1px solid var(--line);border-bottom:0;border-radius:14px 14px 0 0}
.notes-head{display:flex;justify-content:space-between;gap:16px;font-family:var(--font-mono);font-size:var(--type-label-size);line-height:var(--type-label-line);color:var(--ink-muted)}
.notes-body{font-size:18px;line-height:30px}
.notes-paste{visibility:hidden}
.notes-paste.is-pasted{visibility:visible;animation:paste 1.4s steps(4,end) forwards}
@keyframes paste{0%{background:color-mix(in srgb,var(--signal) 35%,transparent)}100%{background:transparent}}
.cursor{display:inline-block;width:.5em;height:1.1em;margin-left:2px;vertical-align:-.2em;background:var(--signal)}
.stage-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;padding-top:20px;font-family:var(--font-mono);font-size:var(--type-code-size);line-height:var(--type-code-line);color:var(--ink-muted)}
.flow-steps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px}
.flow-steps li{display:flex;align-items:center;gap:8px}
.flow-steps li::before{content:"";width:8px;height:8px;background:var(--line)}
.flow-steps li.is-on{color:var(--ink)}
.flow-steps li.is-on::before{background:var(--signal)}
.flow-steps li.hot.is-on::before{background:var(--rec)}
html:not(.js) .hud,html:not(.js) .field{display:none}
html:not(.js) .notes-paste{visibility:visible}

.section{padding:96px 0}
.rule{border-top:1px solid var(--line)}
.sunken{background:var(--surface-sunken)}
.section .wrap{display:flex;flex-direction:column;gap:48px}
.intro{max-width:720px;display:flex;flex-direction:column;gap:16px}
.section h2{font-size:clamp(34px,4.4vw,56px);line-height:1.05}

.states{display:flex;flex-wrap:wrap;gap:24px}
.states-stage{flex:1 1 420px;min-width:0;min-height:440px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:32px;background:var(--surface-sunken);border-radius:var(--radius-card)}
.states-blink{display:flex;min-height:250px}
.states-word{font-family:var(--font-pixel);font-size:28px;line-height:32px}
.states-list{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:8px}
.state-item{display:flex;align-items:flex-start;gap:16px;min-height:44px;padding:16px 20px;border:0;border-radius:var(--radius-card);background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.state-item>span:last-child{display:flex;flex-direction:column;gap:4px}
.state-item .num{flex:none;padding-top:6px}
.state-word{font-family:var(--font-pixel);font-size:var(--type-heading-size);line-height:var(--type-heading-line)}
.state-desc{color:var(--ink-muted)}
.state-item[aria-pressed="true"]{background:var(--surface)}
.state-item[aria-pressed="true"] .state-word{color:var(--signal)}
html:not(.js) .states-list{pointer-events:none}

.cards{display:flex;flex-wrap:wrap;gap:16px}
.card{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:16px;padding:24px;background:var(--surface);border-radius:var(--radius-card)}
.card h3{font-size:var(--type-heading-size);line-height:var(--type-heading-line)}
.card-vis{height:132px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--surface-sunken);border-radius:12px}
.card-vis [data-od]{display:inline-flex}
.voice-lg{display:block;width:240px;height:84px;image-rendering:pixelated}
.section-tight{padding:0 0 96px}
.translate{display:flex;flex-wrap:wrap;align-items:center;gap:32px 48px;padding:32px;background:var(--surface);border-radius:var(--radius-card)}
.translate-text{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:16px}
.translate-text h2{font-size:clamp(28px,3.4vw,40px);line-height:1.1}
.translate-demo{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:8px}
.bubble{display:flex;flex-direction:column;gap:6px;padding:16px 20px;background:var(--surface-sunken);border-radius:12px;font-size:17px;line-height:26px}
.translate-arrow{display:flex;align-items:center;gap:8px;padding-left:20px;color:var(--signal)}
.steps{list-style:none;margin:0;padding:0}
.steps .card{gap:12px}
.step-num{font-family:var(--font-pixel);font-size:40px;line-height:1;color:var(--signal)}

.flow{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px}
.flow-card{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:8px;padding:24px;background:var(--surface);border-radius:var(--radius-card)}
.flow-title{font-family:var(--font-pixel);font-size:var(--type-heading-size);line-height:var(--type-heading-line)}
.flow-arrow{flex:0 0 72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--signal)}
.facts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:16px 24px}
.facts li{flex:1 1 240px;min-width:0;display:flex;gap:12px;align-items:flex-start}
.facts li>span:last-child{display:flex;flex-direction:column}
.facts strong{font-weight:600}

.stat{gap:8px}
.stat-num{font-family:var(--font-pixel);font-size:clamp(40px,4.6vw,60px);line-height:1.1}

.details{margin:0}
.details .card{flex-basis:260px;gap:8px}
.details dd{margin:0}

.platform{flex-basis:240px;gap:12px}
.platform-name{font-family:var(--font-pixel);font-size:28px;line-height:34px}
.chip{align-self:flex-start;display:inline-flex;align-items:center;height:24px;padding:0 10px;font-family:var(--font-mono);font-size:12px;color:var(--ink-muted);box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--radius-chip)}
.chip-on{font-weight:600;color:var(--on-signal);background:var(--signal);box-shadow:none}

.cta .wrap{gap:24px}
.cta-title{font-size:clamp(40px,6vw,84px) !important;line-height:1 !important}
.cta .lead{max-width:560px}
.cta .buttons{align-items:center;gap:12px 24px}
.text-link{padding:12px 0;font-family:var(--font-mono);font-size:var(--type-ui-size);line-height:var(--type-ui-line)}

.foot{padding:48px 0 32px}
.foot .wrap{display:flex;flex-direction:column;gap:32px}
.run-track{position:relative;height:112px;border-bottom:1px solid var(--line)}
.run-prompt{position:absolute;left:0;bottom:4px;display:flex}
.run-blink{position:absolute;left:52px;bottom:0;display:flex}
.foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
.foot-nav{display:flex;flex-wrap:wrap;gap:4px 24px;font-family:var(--font-mono);font-size:var(--type-code-size);line-height:var(--type-code-line)}
.foot-nav a{padding:12px 0;color:var(--ink-muted)}

@media (max-width:700px){
.hud{--hud-w:calc(100vw - 100px)}
.hud-vis{display:none}
.hud-in{gap:12px;padding:44px 16px 20px}
.hud-word{font-size:26px;line-height:30px}
.notes{top:200px;padding:16px 18px}
.notes-body{font-size:16px;line-height:26px}
.stage{height:520px}
.preview-chip{font-size:11px;padding:2px 8px}
.flow-arrow{flex-basis:100%}
.flow-arrow svg{transform:rotate(90deg)}
.section-tight{padding:0 0 64px}
.translate{padding:24px}
.section{padding:64px 0}
.states-stage{min-height:360px}
}
@media (max-width:420px){.wrap{padding:0 16px}.menubar{padding:0 12px}.menubar-right img{width:24px;height:24px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hud{transition:none}.notes-paste.is-pasted{animation:none}.cursor{animation:none}}