:root {
  color-scheme: dark;
  --ground: #06090D; --text: #EAF7FA; --muted: #A8ADB5; --dim: #8A9099;
  --accent: #4FE3FF; --on-accent: #061016; --caution: #FFB020;
  --panel: rgba(6,9,13,0.78); --border: rgba(255,255,255,0.22);
  --head: "Archivo", system-ui, sans-serif; --body: "Instrument Sans", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--ground); color: var(--text); font-family: var(--body); font-weight: 400; overscroll-behavior: none; -webkit-font-smoothing: antialiased; }
#stage { position: fixed; inset: 0; overflow: hidden; background: var(--ground); }
#cam, #still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
#overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(to bottom, rgba(6,9,13,0), rgba(6,9,13,0.85)); pointer-events: none; }
body[data-screen="start"] #cam, body[data-screen="start"] #still, body[data-screen="start"] #overlay, body[data-screen="start"] #scrim, body[data-screen="start"] #think { display: none; }
body:not([data-screen="start"]) #s-start { display: none; }
body[data-screen="done"] #cam, body[data-screen="done"] #still, body[data-screen="done"] #overlay { opacity: .25; }

/* type */
.headline { font-family: var(--head); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; margin: 0; }
.accent { color: var(--accent); }
.muted { color: var(--muted); } .dim { color: var(--dim); }
.small { font-size: 12px; } .center { text-align: center; }
.smallcaps { font-family: var(--body); font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.lede { font-size: 16px; line-height: 1.5; color: var(--muted); margin: 0; }
.note { font-size: 13px; color: var(--dim); margin: 0; }
.ico { width: 20px; height: 20px; flex: none; }

/* panels + buttons */
.panel { background: var(--panel); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 16px; padding: 14px 16px; }
.panel.quiet { font-size: 16px; color: var(--text); }
button { border: 0; margin: 0; color: var(--text); background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; font-family: var(--body); }
button:disabled { opacity: .45; }
.primary { width: 100%; height: 64px; border-radius: 18px; background: var(--accent); color: var(--on-accent); font-family: var(--head); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; display: flex; align-items: center; justify-content: center; gap: 10px; }
.primary .ico { width: 24px; height: 24px; }
.secondary { height: 52px; border-radius: 16px; border: 1px solid var(--border); background: rgba(6,9,13,0.55); font-weight: 600; font-size: 16px; padding: 0 18px; }
.secondary.wide { width: 100%; }
.round { width: 52px; height: 52px; padding: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 17px; }
.outline { height: 84px; min-width: 84px; padding: 0 22px; border-radius: 42px; border: 2px solid var(--accent); background: rgba(6,9,13,0.78); color: var(--accent); font-family: var(--head); font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }

/* 1. start */
.screen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; }
.start-inner { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 22px; padding-top: 56px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand .mark { width: 44px; height: 44px; color: var(--accent); }
.brand.small .mark { width: 28px; height: 28px; }
.wordmark { font-family: var(--head); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
#s-start .headline { font-size: 44px; }
#s-start .smallcaps { text-align: center; }

/* top panel: a two-line strip on step and needs-input; a one-row note while idle, listening or thinking */
.panel.top { position: absolute; left: 14px; right: 14px; top: max(48px, calc(env(safe-area-inset-top) + 36px)); z-index: 3; padding: 10px 14px; border-radius: 14px; }
.row { display: flex; align-items: center; gap: 10px; }
.t-title { font-family: var(--head); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
.t-sub { font-size: 14px; color: var(--muted); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.bar { position: absolute; left: 14px; right: 14px; bottom: -5px; height: 3px; border-radius: 2px; overflow: hidden; background: rgba(255,255,255,0.1); }
.bar i { display: block; height: 100%; width: 35%; background: var(--accent); border-radius: 2px; animation: slide 1.2s infinite ease-in-out; }
@keyframes slide { 0% { transform: translateX(-120%);} 100% { transform: translateX(320%);} }
.line1 { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; min-width: 0; margin-bottom: 4px; }
.line1 .ico { width: 14px; height: 14px; }
.line1 span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.line1.warn { color: var(--caution); }
.line1.waiting { color: var(--muted); }
.line1.empty { display: none; }
.line2 { display: flex; align-items: flex-end; gap: 12px; }
.step { flex: 1; min-width: 0; font-family: var(--head); font-weight: 800; font-size: 21px; letter-spacing: -0.02em; line-height: 1.15; }
.step .accent { color: var(--accent); }
.segments { display: flex; gap: 3px; flex: none; padding-bottom: 6px; }
.segments i { width: 12px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.16); }
.segments i.on { background: var(--accent); }
.segments i.cur { background: var(--accent); opacity: .55; }
.feedback { font-size: 14px; color: var(--accent); margin-top: 6px; }
.feedback:empty { display: none; }
#t-step.in { animation: slidein .35s ease-out; }
@keyframes slidein { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
.panel.shake { animation: shake .45s; }
@keyframes shake { 20%,60% { transform: translateX(-6px);} 40%,80% { transform: translateX(6px);} }

/* thinking: sweep, reticle, readout, over the picture */
#think > * { position: absolute; pointer-events: none; }
.sweep { left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(to right, transparent, var(--accent), transparent); box-shadow: 0 0 16px rgba(79,227,255,.6); animation: sweep 2.2s ease-in-out infinite alternate; }
@keyframes sweep { from { top: 10%; } to { top: 90%; } }
.reticle { left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border: 2px dashed var(--accent); border-radius: 50%; opacity: .9; animation: spin 6s linear infinite; }
.reticle::after { content: ""; position: absolute; inset: 44px; border: 1.5px solid var(--accent); border-radius: 50%; opacity: .7; }
@keyframes spin { to { transform: rotate(360deg); } }
.readout { left: 14px; bottom: 36%; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); line-height: 1.8; white-space: pre; text-shadow: 0 1px 2px #000; }
@media (prefers-reduced-motion: reduce) { .sweep, .reticle, .dot, .bar i, .mic .ring { animation: none !important; } .sweep, .reticle { display: none; } }

/* bottom */
#bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 10px 14px max(14px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; }
.typed { display: flex; gap: 8px; align-items: center; padding: 8px; }
.typed input { flex: 1; min-width: 0; height: 44px; font: 500 16px var(--body); padding: 0 12px; border-radius: 12px; border: 1px solid var(--border); background: rgba(0,0,0,0.3); color: var(--text); }
.controls { display: flex; align-items: center; justify-content: center; gap: 18px; }
.mic { position: relative; width: 128px; height: 128px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-family: var(--head); font-weight: 800; font-size: 16px; letter-spacing: -0.02em; user-select: none; -webkit-user-select: none; }
.mic .ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; pointer-events: none; }
.mic.rec .r1 { animation: ring 1.4s infinite; } .mic.rec .r2 { animation: ring 1.4s .5s infinite; }
@keyframes ring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }
#foot { min-height: 1em; font-size: 12px; }
#foot span:empty { display: none; }

/* 5. done */
.done-inner { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 26px 20px; text-align: center; margin-top: 56px; }
.bigcheck { width: 84px; height: 84px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; }
.bigcheck svg { width: 44px; height: 44px; }
#s-done .headline { font-size: 32px; }
.steps { list-style: none; margin: 0; padding: 0; width: 100%; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.steps li { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.steps li .ck { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.steps li .ck svg { width: 14px; height: 14px; }
.steps li .by { margin-left: auto; color: var(--dim); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }

/* verifier pass flash */
#flash { position: absolute; left: 50%; top: 42%; transform: translate(-50%,-50%); width: 96px; height: 96px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; z-index: 4; animation: pop .25s ease-out; }
#flash svg { width: 52px; height: 52px; }
@keyframes pop { from { transform: translate(-50%,-50%) scale(.6); opacity: 0; } }