:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#080a0e;color:#e9edf4}*{box-sizing:border-box}body{margin:0;min-height:100dvh}header{padding:30px 6%;letter-spacing:.3em;font-size:13px;color:#b9c2d3}header span{color:#487abd}button,input{font:inherit}button{cursor:pointer}header button{float:right}main{max-width:760px;margin:5vh auto 180px;padding:24px;text-align:center}h1{font-size:clamp(28px,5vw,40px);font-weight:400;letter-spacing:-.04em}p{color:#8994a6;font-size:14px}form{display:flex;gap:10px;background:#14171e;border:1px solid #2b303c;border-radius:18px;padding:9px}#login{max-width:400px;margin:32px auto}input:not([type=checkbox]){min-width:0;flex:1;background:transparent;border:0;color:#eee;padding:12px;outline:none}input:focus-visible{outline:1px solid #55aaff;border-radius:8px}button:not(#orb){background:#26344c;color:#e7f2ff;border:0;border-radius:10px;padding:10px 16px}footer{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(760px,100%);padding:20px;background:linear-gradient(transparent,#080a0e 20%)}footer label,small{display:block;color:#8994a6;font-size:12px;margin:12px}small{font-size:10px}#conversation{text-align:left;margin-top:40px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}.message{padding:18px 0;border-bottom:1px solid #1d222b}.message strong{font-size:12px;color:#83b9f1;display:block}a{color:#83b9f1}[hidden]{display:none!important}
/* Original v10 sphere, sized for touch and narrow viewports. */
main{margin-top:2vh} .orb-wrap{height:244px;display:grid;place-items:center;position:relative;margin:0 auto 12px;width:min(100%,300px);isolation:isolate} #orb{display:block;padding:0;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation} #orb:focus-visible{outline:2px solid #a9e3ff;outline-offset:46px} #orb>span{pointer-events:none}
.orb{height:154px;width:154px;border-radius:50%;position:relative;isolation:isolate;overflow:visible;background:radial-gradient(circle at 35% 28%,#e8f8ff 0%,#8bd4ff 4%,#318fff 15%,#0b4da8 38%,#071a35 67%,#030914 78%);box-shadow:0 0 20px #1677f288,0 0 58px #1677f255,0 0 115px #1677f222,inset -18px -20px 30px #020711;animation:orb-float 5s ease-in-out infinite}.orb:before,.orb:after{content:"";position:absolute;inset:-24px;border:1px solid #56aaff66;border-radius:50%;transform:rotate(-24deg) scaleY(.47);animation:orbit-a 12s linear infinite}.orb:after{inset:-37px;border-color:#56aaff35;transform:rotate(28deg) scaleY(.55);animation:orbit-b 16s linear infinite}.orb-core{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle at 40% 28%,#c8f0ff55,transparent 32%),radial-gradient(ellipse at 50% 60%,#1677f255,transparent 65%);box-shadow:inset 0 0 24px #7acaff55;filter:blur(1px)}.orb-ribbon{position:absolute;inset:8px -3px;border:1.5px solid #a9e3ffcc;border-radius:45% 55% 52% 48%;box-shadow:0 0 13px #48aaff88,inset 0 0 10px #48aaff44;mix-blend-mode:screen}.ribbon-a{transform:rotate(38deg) scaleY(.7);animation:ribbon-a 7s ease-in-out infinite}.ribbon-b{inset:-3px 8px;transform:rotate(-42deg) scaleY(.72);border-color:#4ba5ffcc;animation:ribbon-b 8s ease-in-out infinite}.ribbon-c{inset:15px -8px;transform:rotate(80deg) scaleY(.56);border-color:#e0f7ff99;animation:ribbon-a 10s ease-in-out infinite reverse}.orb-spark{position:absolute;top:18%;left:23%;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 14px 5px #8ed6ff;animation:spark 3s ease-in-out infinite}.voice-bars{position:absolute;top:calc(50% + 111px);display:flex;gap:6px;align-items:center;height:22px}.voice-bars i{display:block;width:2px;height:5px;border-radius:4px;background:#58adff;opacity:.7;animation:bars 1s ease-in-out infinite}.voice-bars i:nth-child(2),.voice-bars i:nth-child(8){animation-delay:.12s;height:10px}.voice-bars i:nth-child(3),.voice-bars i:nth-child(7){animation-delay:.25s;height:14px}.voice-bars i:nth-child(4),.voice-bars i:nth-child(6){animation-delay:.38s;height:8px}.voice-bars i:nth-child(5){height:20px;background:#dff7ff;box-shadow:0 0 10px #5aaeff;animation-delay:.2s}@keyframes orb-float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.015)}}@keyframes orbit-a{to{transform:rotate(336deg) scaleY(.47)}}@keyframes orbit-b{to{transform:rotate(-332deg) scaleY(.55)}}@keyframes ribbon-a{0%,100%{border-radius:45% 55% 52% 48%;filter:brightness(.9)}50%{border-radius:58% 42% 38% 62%;filter:brightness(1.5)}}@keyframes ribbon-b{0%,100%{border-radius:58% 42% 45% 55%}50%{border-radius:40% 60% 60% 40%}}@keyframes spark{0%,100%{transform:translate(0,0);opacity:.65}50%{transform:translate(30px,16px);opacity:1}}@keyframes bars{0%,100%{transform:scaleY(.45);opacity:.45}50%{transform:scaleY(1.3);opacity:1}}#orb.listening{animation:orb-float 1.3s ease-in-out infinite;box-shadow:0 0 30px #1677f2cc,0 0 80px #1677f277,0 0 140px #1677f233,inset -18px -20px 30px #020711}#orb.listening + .voice-bars i{animation-duration:.42s}#orb.listening .orb-ribbon{border-color:#d8f4ff;box-shadow:0 0 20px #48aaffcc,inset 0 0 15px #48aaff66}
.voice-bars{pointer-events:none;left:50%;transform:translateX(-50%)}
#status{min-height:2.8em;line-height:1.5;max-width:480px;margin:12px auto}
#chat{align-items:center} #send{min-width:44px;min-height:44px}
footer{padding-bottom:max(14px,env(safe-area-inset-bottom));background:linear-gradient(transparent,#080a0e 18%)}
footer label{display:flex;align-items:center;gap:8px;min-height:32px;margin:6px 10px}input[type=checkbox]{width:18px;height:18px;accent-color:#58adff}footer small{margin:4px 10px 0;line-height:1.4}
@media(min-width:1000px){main{max-width:800px}.orb-wrap{height:260px;margin-bottom:18px}}
@media(max-width:600px){header{padding:20px 22px}main{padding:12px 20px;margin-top:0;margin-bottom:190px}.orb-wrap{height:208px;width:250px;margin-bottom:8px}.orb{width:128px;height:128px}.voice-bars{top:calc(50% + 90px)}h1{font-size:30px;margin:14px 0}#status{font-size:13px;margin:8px auto;min-height:2.8em}#login{margin:22px auto}input:not([type=checkbox]){font-size:16px;padding:10px}footer{padding:12px 14px max(12px,env(safe-area-inset-bottom))}footer small{font-size:10px}#conversation{margin-top:24px}.message{padding:14px 0}#orb:focus-visible{outline-offset:38px}}
@media(max-width:360px){main{padding-inline:16px}.orb-wrap{width:220px;height:190px}.orb{width:116px;height:116px}.voice-bars{top:calc(50% + 84px)}h1{font-size:27px}}
@media(max-height:650px) and (min-width:601px){main{margin-top:0;padding-top:0}.orb-wrap{height:185px}.orb{width:115px;height:115px}.voice-bars{top:calc(50% + 82px)}h1{font-size:28px;margin:10px 0}#status{margin:6px auto}#login{margin:18px auto}}
@media(prefers-reduced-motion:reduce){.orb,.orb::before,.orb::after,.orb *,.voice-bars i{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
footer{bottom:var(--keyboard-inset,0px)}
.motion-paused .orb,.motion-paused .orb::before,.motion-paused .orb::after,.motion-paused .orb *,.motion-paused .voice-bars i{animation-play-state:paused!important}
@media(max-height:480px) and (min-width:601px){header{padding:16px 30px}main{display:grid;grid-template-columns:180px 1fr;column-gap:20px;align-items:center;padding:0 24px;margin-top:0;margin-bottom:160px}.orb-wrap{grid-column:1;grid-row:1 / span 3;width:180px;height:160px;margin:0}.orb{width:100px;height:100px}.voice-bars{top:calc(50% + 70px)}h1{grid-column:2;text-align:left;font-size:28px;align-self:end;margin:10px 0 8px}#status{grid-column:2;text-align:left;justify-self:start;margin:0;align-self:start;min-height:0}#login{grid-column:2;width:100%;margin:8px 0 0}#conversation{grid-column:1 / -1;width:100%;margin-top:16px}}
/* Web glass material: progressive enhancement, without external dependencies. */
footer{background:transparent}
#chat,#login{background:rgba(31,39,52,.82);border:1px solid rgba(220,239,255,.24);border-radius:28px;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(140,180,225,.09),0 12px 32px rgba(0,0,0,.28);position:relative;isolation:isolate}
#chat::before,#login::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.12),transparent 42%,rgba(114,170,255,.06));z-index:-1}
#chat:focus-within,#login:focus-within{border-color:rgba(163,211,255,.55);box-shadow:inset 0 1px 0 #ffffff40,0 0 0 2px #67b8ff15,0 12px 32px #0005}
#send{border-radius:50%;background:linear-gradient(145deg,#afdfff38,#468ee738);border:1px solid #d9efff35;box-shadow:inset 0 1px 0 #fff3;color:#f0f8ff}
footer label{width:fit-content;padding:5px 12px;margin:8px 4px;border:1px solid #c5e4ff26;border-radius:30px;background:rgba(26,35,49,.88);color:#d5e2ef;box-shadow:inset 0 1px 0 #fff1;cursor:pointer}
footer label:has(input:checked){background:rgba(28,81,133,.65);border-color:#77bcff60}
footer small{color:#a3adbc;text-shadow:0 1px 3px #000}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#chat,#login{background:rgba(40,50,66,.32);-webkit-backdrop-filter:blur(24px) saturate(155%);backdrop-filter:blur(24px) saturate(155%)}footer label{background:rgba(34,44,59,.35);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}}
@media(prefers-reduced-transparency:reduce){#chat,#login,footer label{background:#202936;-webkit-backdrop-filter:none;backdrop-filter:none}}
@media(forced-colors:active){#chat,#login,footer label{background:Canvas;border:1px solid CanvasText;box-shadow:none}#send{border:1px solid ButtonText}}
/* Navigation restored from the approved prototype, with a mobile glass drawer. */
#menu-toggle{float:none;margin-right:14px;min-width:44px;min-height:44px;padding:8px 12px;letter-spacing:normal}
#navigation{position:fixed;z-index:30;top:100px;left:24px;bottom:24px;width:208px;padding:22px 12px;border-radius:24px;border:1px solid #d9edff24;background:rgba(30,39,54,.86);box-shadow:inset 0 1px 0 #ffffff25,0 16px 48px #0004;display:flex;flex-direction:column;gap:8px;overflow:auto}
.nav-heading{color:#9babc1;font-size:10px;letter-spacing:.16em;padding:8px 14px 20px}
#navigation button{text-align:left;min-height:46px;padding:12px 14px;border-radius:16px;background:transparent;color:#b3bfd0;font-size:14px;display:flex;align-items:center;gap:14px}
#navigation button span{width:22px;text-align:center;color:#a4c9ec;font-size:18px}
#navigation button[aria-current=page]{background:linear-gradient(135deg,#acdfff22,#5c9ee91f);border:1px solid #a6d9ff35;color:#fff;box-shadow:inset 0 1px 0 #ffffff22}
#navigation button:hover{background:#ffffff0d;color:#fff}#navigation button:focus-visible{outline:2px solid #9bcdff;outline-offset:2px}
#navigation p{margin-top:auto;padding:20px 14px 4px;font-size:11px;color:#8a99ac}
#menu-backdrop{position:fixed;inset:0;z-index:25;background:#03081275;border:0;border-radius:0;padding:0}
#topic-panel{max-width:520px;margin:8px auto 26px;text-align:center;line-height:1.5}#topic-description{font-size:13px;max-width:440px;margin:8px auto 16px;color:#a5b2c3}#topic-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}#topic-actions button{border:1px solid #c5e4ff30;background:#89bdff12;border-radius:24px;min-height:44px;font-size:13px}#topic-panel small{display:block;color:#8091a7;font-size:11px;margin-top:12px}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#navigation{background:linear-gradient(145deg,#53677b40,#101c2c80);-webkit-backdrop-filter:blur(30px) saturate(160%);backdrop-filter:blur(30px) saturate(160%)}}
@media(min-width:1000px){.authenticated main{margin-left:256px;margin-right:24px;max-width:calc(100% - 280px)}.authenticated footer{left:calc(50% + 116px);width:min(760px,calc(100% - 280px))}#menu-toggle{display:none!important}#menu-backdrop{display:none!important}}
@media(max-width:999px){#navigation{top:max(84px,env(safe-area-inset-top));left:14px;bottom:max(16px,env(safe-area-inset-bottom));width:min(280px,calc(100vw - 28px));transform:translateX(calc(-100% - 24px));visibility:hidden;transition:transform .22s ease,visibility .22s;box-shadow:inset 0 1px 0 #ffffff36,12px 0 50px #0007}.menu-open #navigation{transform:translateX(0);visibility:visible}.menu-open{overflow:hidden}header{display:flex;align-items:center;min-height:76px}header #logout{margin-left:auto}#topic-panel{margin-bottom:22px}}
@media(max-width:600px){header{padding:12px 16px}#menu-toggle{margin-right:10px}#navigation{top:78px}.nav-heading{padding-bottom:14px}#topic-panel{margin-top:2px}#topic-description{font-size:12px}#topic-actions button{font-size:12px}}
@media(max-height:480px) and (min-width:601px){#navigation{top:72px;bottom:10px;padding:10px;gap:2px}.nav-heading,#navigation p{display:none}#navigation button{min-height:38px;padding:8px 14px}#topic-panel{grid-column:2;margin:0 0 16px;text-align:left}#topic-actions{justify-content:flex-start}#topic-description{margin-top:0}#topic-panel small{display:none}.authenticated main{margin-bottom:170px}}
@media(prefers-reduced-motion:reduce){#navigation{transition:none}}
@media(prefers-reduced-transparency:reduce){#navigation{background:#1d2939;-webkit-backdrop-filter:none;backdrop-filter:none}}
.menu-open header{position:relative;z-index:40}
#menu-backdrop:not(#orb){background:rgba(3,8,18,.34);border-radius:0;padding:0;border:0;box-shadow:none;cursor:default}