/* Colors, portrait treatment, rings and control shapes follow Rachel PrafNAS. */
:root{--bg:#080e10;--panel:#0d1719;--line:#1f3033;--text:#fff;--dim:#8aa0a1;--teal:#00eff3;--tealDim:#17676a;--amber:#ffa51f;--amberDim:#6b4a14}
*{box-sizing:border-box} [hidden]{display:none!important}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font:16px/1.45 "IBM Plex Sans",system-ui,-apple-system,sans-serif}
body{background:radial-gradient(ellipse at 50% 42%,#0c2124 0%,#080e10 62%)}
button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}
button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
main{min-height:100dvh;display:grid;grid-template-columns:76px minmax(200px,1fr) minmax(300px,1.5fr) minmax(220px,1fr) 76px;grid-template-rows:auto 1fr auto;gap:24px;padding:0 24px}
header{grid-column:1/-1;display:flex;align-items:center;gap:16px;min-height:83px;border-bottom:1px solid #16272a;position:relative}
header::after{content:'';position:absolute;left:10%;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--amber) 30%,var(--amber) 80%,transparent);opacity:.7}
.brand{font:800 20px/1 ui-monospace,monospace;letter-spacing:.3em}.brand span{color:#9fb4b5;font-size:12px;letter-spacing:.18em;display:block;margin-top:9px}
.badge,.eyebrow,.led-label{font:600 10px/1.5 ui-monospace,monospace;letter-spacing:.14em}.badge{border:1px solid var(--amberDim);color:var(--amber);padding:5px 8px;border-radius:6px}
.header-actions{margin-left:auto;display:flex;gap:12px;align-items:center}.led{width:8px;height:8px;background:var(--teal);border-radius:50%;box-shadow:0 0 10px var(--teal)}
.led-label{color:var(--dim)}.quiet-button{background:none;border:1px solid var(--line);border-radius:8px;color:var(--dim);padding:8px 12px;font-size:12px}.quiet-button:hover{border-color:var(--tealDim);color:var(--teal)}
.rail{align-self:center;display:flex;flex-direction:column;align-items:center;gap:20px;padding:20px 0;border:1px solid #1a2c2f;border-radius:16px;background:linear-gradient(180deg,#0a1416,#081012);box-shadow:inset 0 0 0 4px #070c0d,0 0 24px #0006}
.rbw{position:relative;text-align:center}.rb{display:block;width:50px;height:50px;padding:2px;border:0;background:#1d5a5d;clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%)}
.rb span{display:grid;place-items:center;width:100%;height:100%;color:var(--teal);background:radial-gradient(circle at 50% 35%,#0f2326,#081113);clip-path:inherit}.rb svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rb:hover,.rb.on{background:var(--amber)}.rb.on span{color:var(--amber);background:radial-gradient(circle at 50% 35%,#2a1d08,#0d0a05)}.rb-label{display:block;margin-top:7px;font:9px ui-monospace,monospace;letter-spacing:.08em;color:var(--dim)}
.side,.conversation{align-self:center;min-width:0;padding:20px 0}.eyebrow{color:var(--teal);margin:0 0 12px}.panel{background:linear-gradient(180deg,#0e1a1c,#0a1214);border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:14px}
.panel h1,.panel h2{font-size:20px;font-weight:600;margin:5px 0 10px}.panel p{font-size:14px;color:#cfe3e3;margin:8px 0}.panel .muted,.muted{color:var(--dim);font-size:13px}.chip{border:1px solid var(--tealDim);color:var(--teal);border-radius:6px;padding:4px 7px;font:10px ui-monospace,monospace;display:inline-block}
.score{border-color:#ffcc6688;text-align:center;background:radial-gradient(120% 90% at 50% 0%,#ffcc6624,#0a1416 70%)}.score b{display:block;font-size:30px;color:#ffd447;text-shadow:0 0 12px #ffcc3344}.score .stars{color:#ffe9b8;font-size:18px;letter-spacing:.2em;margin:6px 0}.score small{color:var(--dim)}
.progress{height:5px;background:#2a2316;border-radius:4px;margin-top:12px;overflow:hidden}.progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#ff9f1c,#ffd447);transition:width .4s}
#stage{position:relative;min-width:0;align-self:center;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 0 30px}
.look{position:relative;width:min(34vw,48vh,520px);aspect-ratio:1;-webkit-tap-highlight-color:transparent}.look svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#lookRachel .portrait{position:absolute;inset:13%;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 40%,#0f3a3e,#061012 70%);transform:scale(var(--pulse,1));transition:transform .15s}
#lookRachel .portrait img{width:100%;height:118%;object-fit:cover;object-position:50% 0;display:block}
#lookRachel .portrait video{position:absolute;left:0;top:0;width:100%;height:118%;object-fit:cover;object-position:50% 0;opacity:0;transition:opacity .25s ease;pointer-events:none}#lookRachel .portrait video.on{opacity:1}
.spin{transform-origin:50% 50%;animation:spin 26s linear infinite}.spin.rev{animation-duration:38s;animation-direction:reverse}@keyframes spin{to{transform:rotate(360deg)}}
#tagline{margin-top:24px;text-align:center;font:600 12px ui-monospace,monospace;letter-spacing:.24em;color:#9fd8d8}#tagline em{font-style:normal;color:var(--amber)}#note{margin-top:12px;font-size:13px;color:var(--dim);text-align:center;max-width:340px;min-height:38px}
.conversation{max-height:65vh;overflow:auto}.conversation .her{font-size:21px;margin:12px 0 22px}.conversation .him{color:var(--amber);font-size:15px}.conversation .old{font-size:15px;color:var(--dim)}
.answer{display:flex;gap:8px;margin-top:14px}.answer input{width:100%;min-width:0;background:#081012;color:#fff;border:1px solid #23383b;border-radius:10px;padding:10px}.answer button,.action{background:#1a1206;border:1px solid var(--amberDim);color:var(--amber);border-radius:9px;padding:10px 14px;font-size:13px}.action{display:inline-block;margin-top:10px}
.problem{font-size:34px;letter-spacing:.06em;color:#fff;margin:20px 0;text-align:center}.array{display:grid;gap:7px;justify-content:center;margin:18px 0}.array i{display:block;width:14px;height:14px;border-radius:50%;background:var(--teal)}
footer{grid-column:1/-1;position:relative;border-top:1px solid #1a2a2c;min-height:122px;display:flex;align-items:center;justify-content:center}footer::before{content:'';position:absolute;left:2%;right:2%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--amber) 15%,var(--amber) 85%,transparent);opacity:.75}
.pill{position:relative;display:flex;align-items:center;justify-content:space-between;width:min(540px,60vw);height:60px;border:1px solid #23383b;border-radius:30px;background:#0a1315;padding:0 24px}.ic{background:none;border:0;color:var(--teal);width:44px;height:44px;display:grid;place-items:center}.ic svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#power{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:96px;height:96px;border-radius:50%;border:3px solid var(--amber);background:radial-gradient(circle,#1b1408 0%,#0a0d0d 70%);color:var(--amber);display:grid;place-items:center;box-shadow:0 0 24px #ff940073,inset 0 0 18px #ff940040}#power svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:1.7}
body[data-state=listening] #power{border-color:var(--teal);color:var(--teal);box-shadow:0 0 26px #00eff373,inset 0 0 18px #00eff333}.footer-caption{position:absolute;left:0;bottom:12px;font:10px ui-monospace,monospace;color:var(--dim);letter-spacing:.08em}.footer-caption.right{left:auto;right:0}
dialog{background:#091315;color:var(--text);border:1px solid var(--amberDim);border-radius:16px;width:min(520px,calc(100vw - 32px));max-height:85dvh;padding:24px}dialog::backdrop{background:#000b;backdrop-filter:blur(4px)}dialog h2{margin-top:0;font-size:20px}dialog p{font-size:14px;color:var(--dim)}dialog label{display:block;font-size:13px;color:var(--dim);margin:16px 0 6px}dialog select{width:100%;background:#0d1719;border:1px solid var(--line);padding:10px;border-radius:8px;color:#fff}.dialog-top{display:flex;justify-content:space-between;align-items:start}.dialog-top button{margin-top:-6px}.state-buttons{display:flex;flex-wrap:wrap;gap:8px}input[type=file]{max-width:100%;font-size:12px}.notice{border-left:2px solid var(--amber);padding-left:12px}
@media(max-width:1099px){main{grid-template-columns:62px minmax(0,1fr) minmax(220px,1fr) 62px;gap:18px}.side{display:none}#stage{grid-column:2}.conversation{grid-column:3}.look{width:min(42vw,48vh,440px)}header .brand{font-size:16px}.rail{gap:16px}.rb{width:42px;height:42px}.footer-caption{font-size:9px}}
@media(max-width:680px){main{display:flex;flex-direction:column;gap:12px;padding:0 16px;min-height:100dvh}header{min-height:78px;gap:8px;flex-wrap:wrap;padding:12px 0}.brand{font-size:15px!important}.brand span{font-size:10px}.header-actions{gap:8px}.led,.led-label{display:none}.badge{font-size:8px}.rail{flex-direction:row;justify-content:center;gap:24px;align-self:stretch;padding:10px;margin-top:4px}#railR{display:none}#stage{padding:0;align-self:stretch}.look{width:min(72vw,36vh,320px)}#tagline{margin-top:8px;font-size:10px}#note{margin:8px auto 0;min-height:0}.conversation{align-self:stretch;max-height:none;padding:8px 0}.conversation .her{font-size:18px;margin:8px 0 16px}footer{min-height:110px;margin-top:auto}.pill{width:100%;padding:0 12px}#power{width:78px;height:78px}.footer-caption{display:none}.panel{padding:14px}.rb{width:38px;height:38px}.rb-label{font-size:8px}.header-actions .quiet-button{padding:6px 8px}#engineBadge{display:none}}
@media(prefers-reduced-motion:reduce){.spin{animation:none}*,*::before,*::after{transition:none!important}.portrait{transform:none!important}}

/* School subjects and diagnostic preview. Keep both rails available on phones. */
.brand{white-space:nowrap;font-size:18px;letter-spacing:.2em}.brand span{font-size:10px;letter-spacing:.12em}
.rail{gap:14px}.rb-label{font-size:8px;letter-spacing:.02em}.rail-divider{width:30px;border-top:1px solid var(--line)}
fieldset{border:1px solid var(--line);border-radius:10px;padding:10px 16px}legend{color:var(--teal);font-size:12px}#quizSubjects label{display:flex;align-items:center;gap:10px;margin:10px 0;color:var(--text)}input[type=checkbox],input[type=radio]{accent-color:var(--teal);width:18px;height:18px}
#quizChoices label{display:flex;align-items:center;gap:10px;border:1px solid var(--line);padding:12px;border-radius:10px;color:var(--text);cursor:pointer}#quizChoices label:has(input:checked){border-color:var(--amber);background:#1a1206}#quizError{color:var(--amber)}.quiz-result h3{font-size:17px;margin:0 0 12px}#quizRows{margin-top:16px}#quizPrompt{font-size:18px}
@media(max-width:1099px){.brand{font-size:15px!important}.header-actions{gap:8px}}
@media(max-width:680px){header{align-content:center}.brand{font-size:14px!important;letter-spacing:.12em}.brand span{font-size:9px}.badge{font-size:7px;padding:3px 5px}.header-actions{margin-left:auto}.rail{gap:clamp(8px,4vw,24px);padding:10px 8px}.rail-divider{height:26px;width:1px;border-top:0;border-left:1px solid var(--line)}#railR{display:flex;order:5;flex-direction:row}.rail .rb{width:36px;height:36px}.rb-label{font-size:7px}.conversation{order:4}#stage{order:3}#railL{order:2}footer{order:6}#engineBadge{display:inline-block;font-size:8px;padding:3px 5px}header .badge{display:none}.header-actions .quiet-button{font-size:10px;padding:6px}.look{width:min(72vw,34vh,320px)}}