:root{color-scheme:dark;--ink:#020815;--navy:#06152e;--text:#f3f8ff;--muted:#8faed2;--cyan:#62e5ff;--blue:#3f7cff;--glass:rgba(10,29,61,.56);font-family:Inter,"SF Pro Display","Segoe UI",system-ui,sans-serif;background:var(--ink)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;margin:0;overflow:hidden;background:#020815}body{color:var(--text)}button,textarea,select,input{font:inherit}button{color:inherit}.app{position:relative;display:grid;grid-template-rows:auto 1fr auto;min-height:100%;height:100dvh;overflow:hidden;padding:calc(18px + env(safe-area-inset-top)) 20px calc(16px + env(safe-area-inset-bottom));isolation:isolate;background:radial-gradient(circle at 50% 35%,#10366f 0,rgba(6,28,64,.76) 25%,rgba(3,12,31,.95) 58%,#01050d 100%)}
.app:before{content:"";position:absolute;inset:0;z-index:-3;background:linear-gradient(120deg,rgba(255,171,91,.07),transparent 22%,transparent 70%,rgba(58,126,255,.12));pointer-events:none}.app:after{content:"";position:absolute;inset:auto -20% -25%;height:44%;z-index:-2;background:radial-gradient(ellipse,rgba(39,120,255,.24),transparent 68%);filter:blur(20px)}.aurora{position:absolute;left:-20%;top:12%;width:70%;height:50%;z-index:-1;background:radial-gradient(ellipse,rgba(57,126,255,.15),transparent 70%);filter:blur(35px);animation:aurora 9s ease-in-out infinite alternate}
.topbar{display:flex;align-items:center;justify-content:space-between;z-index:5}.brand{display:flex;align-items:center;gap:10px;font-size:1.12rem;letter-spacing:.01em}.brand-dot{width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 18px var(--cyan)}.sleep-chip{display:flex;align-items:center;gap:7px;min-height:40px;padding:0 15px;border:1px solid rgba(103,184,255,.23);border-radius:99px;background:rgba(8,25,52,.46);backdrop-filter:blur(12px);color:#b9d6fa}.sleep-chip svg{width:17px;fill:#55cfff;filter:drop-shadow(0 0 6px #408eff)}
.stage{position:relative;display:flex;min-height:0;flex-direction:column;align-items:center;text-align:center;padding-top:4.2vh}.eyebrow{margin:0;color:#5ddcff;font-size:.7rem;font-weight:750;letter-spacing:.24em}.stage h1{margin:8px 0 0;max-width:350px;font-size:clamp(1.65rem,7.2vw,2.28rem);font-weight:620;line-height:1.04;letter-spacing:-.045em}.lumo-wrap{position:relative;width:min(47vh,94vw,410px);aspect-ratio:360/400;margin-top:1.5vh;transform-origin:50% 75%;animation:float 4.8s ease-in-out infinite}.bot{position:relative;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 26px 25px rgba(0,0,0,.42))}.head{transform-origin:180px 245px;animation:headTilt 7s ease-in-out infinite}.body{transform-origin:180px 270px}.antenna{transform-origin:180px 62px;animation:antenna 3s ease-in-out infinite}.eye{transform-origin:center;animation:blink 6.2s infinite}.mouth{opacity:1}.think-dots{opacity:0}.arm{transform-origin:180px 285px}.orbit{position:absolute;inset:16% 4% 17%;border:1px solid rgba(100,211,255,.15);border-radius:50%;z-index:-1}.orbit-a{animation:spin 18s linear infinite}.orbit-b{inset:23% 11% 24%;border-style:dashed;animation:spin 13s linear reverse infinite}.sound-waves{position:absolute;left:50%;bottom:12%;display:flex;align-items:center;gap:5px;height:30px;transform:translateX(-50%);opacity:0}.sound-waves i{display:block;width:4px;height:8px;border-radius:3px;background:var(--cyan);box-shadow:0 0 8px var(--cyan);animation:wave .7s ease-in-out infinite alternate}.sound-waves i:nth-child(2),.sound-waves i:nth-child(4){animation-delay:.16s}.sound-waves i:nth-child(3){animation-delay:.3s}
.transcript,.answer{z-index:3;max-width:340px;margin:-.2vh auto 0;min-height:24px;color:#9fb9d9;font-size:.9rem;line-height:1.45}.answer{display:-webkit-box;max-height:70px;overflow:hidden;color:#e6f4ff;-webkit-line-clamp:3;-webkit-box-orient:vertical}.answer[hidden]{display:none}
.listen-response{min-width:190px;background:linear-gradient(135deg,rgba(22,118,180,.96),rgba(54,89,214,.96))}
.controls{position:relative;display:grid;grid-template-columns:72px 1fr 72px;align-items:center;justify-items:center;max-width:390px;width:100%;margin:0 auto;z-index:4}.secondary{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:56px;border:0;background:transparent;color:#86a5ca;font-size:.68rem}.secondary svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7}.mic{position:relative;display:grid;place-items:center;width:82px;height:82px;border:1px solid rgba(173,241,255,.75);border-radius:50%;background:linear-gradient(145deg,#37c9ff,#386cff);box-shadow:0 0 0 9px rgba(55,154,255,.09),0 0 38px rgba(53,156,255,.66),inset 0 1px 8px rgba(255,255,255,.55);cursor:pointer}.mic svg{width:34px;height:34px;fill:none;stroke:#fff;stroke-width:1.8}.mic-ripple{position:absolute;inset:-1px;border-radius:inherit;border:1px solid rgba(103,230,255,.8);opacity:0}.settings-button{position:absolute;right:15px;top:50%;display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(112,172,235,.2);border-radius:50%;background:rgba(7,24,52,.48);color:#7f9abb;opacity:.72}.settings-button svg{width:21px;fill:none;stroke:currentColor;stroke-width:1.5}.done{position:absolute;left:50%;bottom:calc(113px + env(safe-area-inset-bottom));z-index:7;transform:translateX(-50%);min-width:130px;min-height:45px;border:1px solid rgba(107,225,255,.6);border-radius:99px;background:rgba(8,38,77,.88);box-shadow:0 8px 28px rgba(0,0,0,.3);color:#e9fbff;font-weight:700}.done[hidden]{display:none}
.app[data-state="LISTENING"] .mic-ripple{animation:ripple 1.5s infinite}.app[data-state="LISTENING"] .sound-waves{opacity:1}.app[data-state="LISTENING"] .eye{ry:25}.app[data-state="THINKING"] .head{animation:think 1.8s ease-in-out infinite}.app[data-state="THINKING"] .eye,.app[data-state="THINKING"] .mouth{opacity:0}.app[data-state="THINKING"] .think-dots{opacity:1}.app[data-state="THINKING"] .antenna{animation:antennaFast .65s ease-in-out infinite alternate}.app[data-state="SPEAKING"] .mouth{animation:speak .32s ease-in-out infinite alternate}.app[data-state="SPEAKING"] .body{animation:speakBody .8s ease-in-out infinite alternate}.app[data-state="SPEAKING"] .sound-waves{opacity:1}.app[data-state="SLEEPING"] .eye{ry:2}.app[data-state="SLEEPING"] .mouth{opacity:.35}.app[data-state="SLEEPING"] .lumo-wrap{animation:breath 5s ease-in-out infinite}.app[data-state="ERROR"] .eye{transform:rotate(12deg)}.app[data-expression="HAPPY"] .eye{ry:5;transform:translateY(3px)}.app[data-expression="CURIOUS"] .eye-right{transform:translateY(-7px)}.app[data-expression="CONFUSED"] .head{transform:rotate(-6deg)}
.sheet{width:min(100% - 20px,440px);margin:auto auto 0;border:1px solid rgba(130,195,255,.22);border-radius:26px 26px 0 0;padding:20px 20px calc(22px + env(safe-area-inset-bottom));background:rgba(5,18,41,.97);box-shadow:0 -20px 80px rgba(0,0,0,.5);color:var(--text)}.sheet::backdrop{background:rgba(0,4,13,.7);backdrop-filter:blur(8px)}.sheet-handle{width:42px;height:4px;margin:-8px auto 20px;border-radius:5px;background:#426189}.sheet label,.sheet h2{display:block;margin:0 0 10px;font-size:1rem}.sheet h2{font-size:1.3rem}.sheet textarea,.sheet select{width:100%;border:1px solid rgba(107,167,226,.25);border-radius:15px;padding:14px;background:#091a36;color:#fff;outline:none;resize:none}.sheet textarea:focus,.sheet select:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(83,217,255,.1)}.sheet-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:15px}.sheet-actions button{min-height:44px;border-radius:13px;padding:0 18px;font-weight:700}.ghost{border:1px solid rgba(138,180,224,.25);background:transparent}.primary{border:0;background:linear-gradient(135deg,#42cdff,#3f6dff)}.range-row{margin-top:20px}.range-row input{width:100%;accent-color:#4fd9ff}.dev-panel{position:fixed;left:8px;top:70px;z-index:99;width:240px;padding:10px;border:1px solid #2c9;border-radius:10px;background:#00190fea;color:#7effc4;font:11px/1.4 monospace}.dev-panel pre{white-space:pre-wrap;margin:5px 0 0}
@keyframes float{50%{transform:translateY(-7px) rotate(.6deg)}}@keyframes breath{50%{transform:translateY(3px) scale(.985)}}@keyframes headTilt{15%{transform:rotate(1.5deg)}45%{transform:rotate(-1deg)}80%{transform:rotate(.5deg)}}@keyframes blink{0%,44%,48%,82%,86%,100%{transform:scaleY(1)}46%,84%{transform:scaleY(.08)}}@keyframes antenna{50%{transform:rotate(3deg)}}@keyframes antennaFast{to{transform:rotate(8deg);filter:brightness(1.5)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes wave{to{height:26px}}@keyframes ripple{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.55);opacity:0}}@keyframes speak{to{d:path("M158 194q22 30 44 0")}}@keyframes speakBody{to{transform:translateY(-3px)}}@keyframes think{50%{transform:translateY(-4px) rotate(-3deg)}}@keyframes aurora{to{transform:translate(30%,8%) scale(1.2)}}
@media(min-width:700px){.app{max-width:520px;margin:auto;border-left:1px solid rgba(71,125,194,.16);border-right:1px solid rgba(71,125,194,.16);box-shadow:0 0 120px #000}.stage{padding-top:3vh}.lumo-wrap{width:min(48vh,430px)}.settings-button{right:25px}}
@media(max-height:700px){.stage{padding-top:1vh}.stage h1{font-size:1.5rem}.lumo-wrap{width:min(43vh,330px);margin-top:0}.transcript,.answer{font-size:.82rem}.mic{width:72px;height:72px}.done{bottom:calc(100px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.lumo-wrap{transform:none}}