:root{color-scheme:dark;--c:#5fdcff;--c2:#b8f3ff;--cd:#5fdcff55;--cf:#5fdcff1f;--bg:#01070d;--text:#e9fbff;--soft:#8fcfe0;
 --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;--sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,sans-serif;--talk:0;--lvl:1}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(ellipse at 35% 45%,#06263a 0%,#031321 40%,var(--bg) 78%) fixed,var(--bg);color:var(--text);font:15px/1.55 var(--sans);
 padding:max(16px,env(safe-area-inset-top)) clamp(16px,3vw,32px) max(16px,env(safe-area-inset-bottom));overflow-x:hidden}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{opacity:.4;cursor:not-allowed}
:focus-visible{outline:2px solid var(--c);outline-offset:3px}
[hidden]{display:none!important}
.grid{position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(var(--cf) 1px,transparent 1px),linear-gradient(90deg,var(--cf) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 78%);-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 78%)}
.scan{position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#ffffff05 0 1px,transparent 1px 3px)}
.corner{position:fixed;width:42px;height:42px;border:2px solid var(--c);opacity:.7;pointer-events:none}
.corner.tl{top:10px;left:10px;border-right:0;border-bottom:0}.corner.tr{top:10px;right:10px;border-left:0;border-bottom:0}
.corner.bl{bottom:10px;left:10px;border-right:0;border-top:0}.corner.br{bottom:10px;right:10px;border-left:0;border-top:0}

.top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--cd);padding:6px 8px 12px}
.brand{font:600 12px var(--mono);letter-spacing:.24em;color:var(--c);text-shadow:0 0 12px var(--c)}
.progress{font:12px var(--mono);letter-spacing:.14em;color:var(--soft);text-transform:uppercase}
.progress b{color:#fff}

main{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,1fr);align-items:center;gap:clamp(20px,4vw,64px);min-height:calc(100vh - 90px);min-height:calc(100dvh - 90px);padding-block:12px}

/* ----- reactor / orb ----- */
.reactor{position:relative;justify-self:center;width:min(48vw,72vh,720px);aspect-ratio:1;transform:scale(var(--lvl));transition:transform .09s;cursor:pointer}
.reactor svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 6px var(--c))}
.reactor circle{fill:none;stroke:var(--c);transform-origin:170px 170px}
.r-ticks{stroke:var(--c);stroke-width:2;opacity:.7;transform-origin:170px 170px;animation:spin 60s linear infinite}
.r-outer{stroke-width:1;opacity:.45;stroke-dasharray:2 6}
.r-seg{stroke-width:9;opacity:.85;stroke-dasharray:60 18 12 18;animation:spin 14s linear infinite}
.r-seg2{stroke-width:2;opacity:.6;stroke-dasharray:4 4;animation:spin 9s linear infinite reverse}
.r-arc{stroke-width:5;stroke-dasharray:150 428;stroke-linecap:round;animation:spin 3.2s cubic-bezier(.5,.1,.5,.9) infinite}
.r-inner{stroke-width:1.5;opacity:.8}
@keyframes spin{to{transform:rotate(360deg)}}
.core{position:absolute;inset:31%;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#e9fdff 0%,#7fe6ff 22%,#1792c0 52%,#05304a 74%,transparent 76%);box-shadow:0 0 40px #5fdcffaa,0 0 90px #5fdcff55,inset 0 0 30px #ffffff55}
.core span{font:700 clamp(10px,1.1vw,14px) var(--mono);letter-spacing:.26em;color:#02202f;background:#e9fdffcc;padding:5px 12px;border-radius:2px}
.ripple{position:absolute;inset:31%;border-radius:50%;border:2px solid var(--c);opacity:0;pointer-events:none}
/* breathing when not speaking */
.reactor svg,.core{scale:1}
#app:not([data-mode=speak]) .reactor svg,#app:not([data-mode=speak]) .core{animation:breathe 4.8s ease-in-out infinite}
@keyframes breathe{0%,100%{scale:.965}50%{scale:1.035}}
/* talking follows the voice */
#app[data-mode=speak] .core{scale:calc(1 + var(--talk)*.22);box-shadow:0 0 calc(40px + var(--talk)*90px) #5fdcffcc,0 0 calc(90px + var(--talk)*160px) #5fdcff66,inset 0 0 36px #ffffffaa}
#app[data-mode=speak] .reactor svg{scale:calc(1 + var(--talk)*.06);filter:drop-shadow(0 0 calc(6px + var(--talk)*18px) var(--c))}
#app[data-mode=speak] .ripple{animation:ripple 1.8s ease-out infinite}
#app[data-mode=speak] .ripple:nth-of-type(2){animation-delay:.6s}#app[data-mode=speak] .ripple:nth-of-type(3){animation-delay:1.2s}
@keyframes ripple{0%{transform:scale(1);opacity:calc(.25 + var(--talk)*.6)}100%{transform:scale(2.3);opacity:0}}
#app[data-mode=think] .r-arc{animation-duration:.7s}#app[data-mode=think] .r-seg{animation-duration:4s}
#app[data-mode=listen] .core{outline:2px solid #5fdcff55;outline-offset:calc(6px + (var(--lvl) - 1)*120px)}
#app[data-screen=finish]{--c:#7dffc4;--cd:#7dffc455}

/* ----- side panel ----- */
.panel{display:flex;flex-direction:column;gap:14px;min-width:0}
.eyebrow{margin:0;font:600 11px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--c)}
h1{margin:0;font-size:clamp(28px,3.4vw,44px);line-height:1.1;font-weight:650;letter-spacing:-.01em;text-shadow:0 0 18px #5fdcff44}
.lead{margin:0;color:#cfeffa;font-size:16px;max-width:52ch}
.tips{margin:0;padding-left:18px;color:var(--soft);font-size:14px}
.tips li{margin:3px 0}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#cfeffa;border:1px solid var(--cd);padding:12px 14px;background:#02121d99;cursor:pointer}
.consent input{margin-top:3px;accent-color:#5fdcff;width:17px;height:17px;flex:none}
.actions{display:flex;flex-wrap:wrap;gap:10px}
.btn{font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:13px 18px;background:#5fdcff14;color:var(--c2);border:1px solid var(--c);
 clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);transition:background .2s,box-shadow .2s}
.btn:hover:not(:disabled){background:#5fdcff30;box-shadow:0 0 18px var(--cd)}
.btn.primary{background:var(--c);color:#01131d}.btn.primary:hover:not(:disabled){background:#9ff0ff}
.btn.ghost{border-color:var(--cd)}
.note{margin:0;color:var(--soft);font:12px/1.5 var(--mono);letter-spacing:.04em;min-height:1.5em}
.note.err{color:#ff9a8a}

.chat{display:flex;flex-direction:column;gap:10px;max-height:46vh;overflow:auto;padding:2px;scrollbar-width:thin}
.msg{max-width:90%;padding:10px 14px;border:1px solid var(--cd);background:#02121dcc;white-space:pre-wrap}
.msg span{display:block;font:600 9.5px var(--mono);letter-spacing:.22em;color:var(--c);margin-bottom:4px}
.msg.you{align-self:flex-end;border-color:#ffffff33;background:#ffffff0d}.msg.you span{color:#cfeffa}
.msg.raven{align-self:flex-start;box-shadow:0 0 18px #5fdcff22}
.live{position:relative;border:1px solid var(--cd);background:#02121dcc;padding:26px 16px 14px;min-height:70px;font-size:16px}
.live-label{position:absolute;top:7px;left:16px;font:10px var(--mono);letter-spacing:.24em;color:var(--c);opacity:.85}
#interimText{color:var(--soft)}
.caret{display:inline-block;width:9px;height:1.05em;background:var(--c);vertical-align:-2px;margin-left:3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
#typed{display:block;width:100%;min-height:90px;resize:vertical;background:transparent;border:0;outline:0;color:#fff;font:16px/1.5 var(--sans);caret-color:var(--c);padding:0}

@media (max-width:860px){
 main{grid-template-columns:minmax(0,1fr);align-items:start;min-height:0}
 .reactor{width:min(70vw,38vh);margin-block:2% 4%}
 .chat{max-height:30vh}
 h1{font-size:30px}
}
@media (max-width:480px){.btn{flex:1 1 100%}.brand{font-size:10.5px;letter-spacing:.16em}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}