:root{color-scheme:dark;--ink:#040608;--ivory:#efe9df;--muted:#ada69b;--gold:#d7bb8b;--gold-bright:#efd6ae;--hairline:rgba(235,221,194,.15)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:var(--ink);color:var(--ivory);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
button,input,select{font:inherit}button{cursor:pointer}.hidden{display:none!important}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.od-shell{position:relative;width:100%;height:100dvh;min-height:100dvh;overflow:hidden;isolation:isolate;background:#040608}
.od-stage{position:fixed;inset:0;width:100vw;height:100dvh;overflow:hidden;isolation:isolate;z-index:0;background:radial-gradient(ellipse at 50% 41%,#0b1822 0%,#050a11 45%,#020304 100%)}
#cosmicCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;opacity:.94;transition:opacity 2.3s ease}
.od-stage.revealed #cosmicCanvas{z-index:1;opacity:.14}
.od-star-dust{position:absolute;inset:-15%;background:radial-gradient(ellipse at 44% 38%,rgba(43,68,95,.12),transparent 48%),radial-gradient(ellipse at 70% 52%,rgba(119,76,28,.08),transparent 50%);z-index:0;pointer-events:none;animation:drift 30s ease-in-out infinite alternate}
.od-portrait{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transform:scale(.935);transform-origin:50% 46%;transition:opacity 1.8s cubic-bezier(.16,.72,.2,1),transform 3.4s ease;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.94) 0%,#000 12%,#000 69%,transparent 99%);mask-image:linear-gradient(to bottom,rgba(0,0,0,.94) 0%,#000 12%,#000 69%,transparent 99%)}
.od-stage.forming .od-portrait{opacity:.16;transform:scale(.98)}
.od-stage.revealed .od-portrait{opacity:1;transform:scale(1)}
.od-portrait .v2-face{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 36%;opacity:0;transform:scale(1.018);transition:opacity 1.45s cubic-bezier(.26,.7,.23,1),filter 1.5s ease,transform 6s ease;image-rendering:auto;backface-visibility:hidden;will-change:opacity}
.od-stage[data-face="neutral"] .face-neutral,.od-stage[data-face="listening"] .face-listening,.od-stage[data-face="thinking"] .face-thinking,.od-stage[data-face="speaking"] .face-speaking{opacity:1}
.od-stage[data-face="listening"] .face-listening{filter:brightness(1.045)}
.od-stage[data-face="thinking"] .face-thinking{filter:brightness(.93) saturate(.94)}
.od-stage[data-face="speaking"] .face-speaking{filter:brightness(1.065) saturate(1.06)}
.od-stage[data-voice="speaking"] .v2-face{transition-duration:.9s,1.1s,6s}
.od-stage.revealed .od-portrait{animation:presence 12s ease-in-out infinite}
.od-vignette{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.28) 0%,transparent 17%,transparent 53%,rgba(2,3,5,.25) 64%,rgba(3,4,5,.79) 86%,rgba(3,4,5,.97) 100%),radial-gradient(ellipse at 50% 48%,transparent 30%,rgba(0,0,0,.33) 90%);opacity:1}
.od-awaken{position:absolute;z-index:6;top:45%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:13px;text-align:center;white-space:nowrap;transition:opacity .7s;pointer-events:none;text-shadow:0 2px 15px #000}
.od-awaken-ring{width:82px;height:82px;border:1px solid rgba(230,195,134,.65);border-radius:50%;box-shadow:0 0 38px rgba(167,113,55,.12),inset 0 0 30px rgba(202,147,61,.08);position:relative;animation:glimmer 4s ease-in-out infinite}
.od-awaken-ring:before,.od-awaken-ring:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--gold-bright);border-radius:50%}
.od-awaken-ring:before{width:5px;height:5px;box-shadow:0 0 14px 7px rgba(213,165,90,.31)}
.od-awaken-ring:after{width:1px;height:58px;opacity:.65}
.od-awaken-copy{font-size:18px;letter-spacing:.43em;direction:ltr;margin-right:-.43em;font-weight:350;color:#f0e8d9}
.od-awaken-sub{font-size:13px;color:rgba(227,219,207,.70)}
.od-stage.revealed .od-awaken,.od-stage.forming .od-awaken{opacity:0}
.od-header{position:absolute;top:0;inset-inline:0;z-index:12;display:flex;flex-direction:row-reverse;align-items:center;justify-content:space-between;padding:calc(22px + env(safe-area-inset-top)) clamp(19px,5.3vw,42px) 12px;pointer-events:none}
.od-identity{pointer-events:auto;direction:ltr;display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit}
.od-identity-emblem{font-size:22px;font-weight:200;color:var(--gold-bright);width:37px;height:37px;border:1px solid rgba(219,192,139,.65);border-radius:50%;display:grid;place-items:center;box-shadow:0 0 18px rgba(200,154,81,.09)}
.od-identity strong{display:inline;font-size:18px;font-weight:480;letter-spacing:.22em;line-height:1.0}
.od-identity em{font-size:18px;font-style:normal;font-weight:320;letter-spacing:.18em;color:var(--gold);margin-inline-start:5px}
.od-identity small{display:block;color:rgba(224,216,200,.42);letter-spacing:.18em;font-size:7px;margin-top:6px;white-space:nowrap}
.od-gear{pointer-events:auto;display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(242,230,211,.16);background:rgba(8,9,11,.26);border-radius:50%;color:rgba(232,222,206,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.od-gear svg{width:19px;height:19px}
.od-voice-panel{position:absolute;inset:0;z-index:10;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.od-bottom{width:min(100%,610px);padding:0 clamp(18px,4vw,28px) calc(27px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:13px;pointer-events:none}
.od-conversation-status{display:flex;align-items:center;justify-content:center;gap:9px;color:rgba(233,224,210,.72);font-size:12px;min-height:19px;max-width:96%;letter-spacing:.01em;text-shadow:0 1px 10px #000}
.od-conversation-status #voiceStatus{white-space:nowrap;max-width:80vw;overflow:hidden;text-overflow:ellipsis}
.od-live-indicator{width:6px;height:6px;background:var(--gold);border-radius:50%;box-shadow:0 0 11px rgba(208,165,96,.5);flex-shrink:0}
.od-stage[data-voice="speaking"]~.od-voice-panel .od-live-indicator{animation:glimmer 1.2s ease-in-out infinite}
.od-transcript{width:100%;max-height:90px;overflow-y:auto;display:flex;flex-direction:column;gap:5px;pointer-events:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.od-transcript:empty{display:none}
.od-transcript p{margin:0;font-size:12px;line-height:1.55;padding:9px 13px;border-radius:12px;color:#ded7cd;background:rgba(3,4,6,.54);border:1px solid rgba(220,201,167,.09);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);max-width:100%;text-align:right}
.od-transcript .you{color:rgba(225,213,193,.66)}.od-transcript .ai{color:var(--ivory)}
.od-dock{pointer-events:auto;display:flex;gap:0;align-items:center;width:100%;min-height:74px;padding:7px 12px;border:1px solid var(--hairline);border-radius:26px;background:rgba(15,16,18,.75);box-shadow:0 20px 65px rgba(0,0,0,.52),0 1px 0 rgba(244,227,203,.07) inset;backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px)}
.od-dock button{border:0;outline-offset:4px;-webkit-tap-highlight-color:transparent}
.od-side-button{background:transparent;color:rgba(238,222,198,.70);width:68px;min-width:61px;height:55px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0}
.od-side-button svg{width:21px;height:21px;stroke:currentColor}.od-side-button span{font-size:10px;font-weight:400;white-space:nowrap}
.od-side-button:active{color:var(--gold-bright)}
.od-voice-button{flex:1;min-height:59px;display:flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(115deg,#e0c398,#cda66e);border-radius:19px;color:#181309;font-weight:650;font-size:14px;letter-spacing:.01em;box-shadow:0 6px 25px rgba(161,116,59,.15)}
.od-voice-button svg{width:21px;height:21px}.od-voice-button.stop{background:#242022;color:#e5c6c2;box-shadow:inset 0 0 0 1px rgba(199,141,138,.38)}
.od-footer-hint{font-size:9px;color:rgba(222,207,185,.35);margin:0;letter-spacing:.05em}
.od-login{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:rgba(2,3,5,.67);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:18px}
.od-login-card{width:min(100%,390px);padding:37px 27px 30px;background:linear-gradient(150deg,rgba(25,23,21,.94),rgba(9,10,12,.97));border:1px solid rgba(231,200,144,.20);border-radius:22px;text-align:center;box-shadow:0 30px 100px rgba(0,0,0,.53)}
.od-login-mark{display:block;font-size:27px;color:var(--gold);margin-bottom:11px}
.od-login-card h1{font-size:30px;font-weight:350;letter-spacing:.17em;direction:ltr;margin:0}.od-login-card h1 span{color:var(--gold)}
.od-login-card>p{color:var(--muted);font-size:13px}
#voiceLoginForm{display:grid;gap:12px;margin-top:31px}
#voiceLoginForm label{font-size:12px;color:var(--muted);text-align:right}
#voiceLoginForm input{width:100%;height:50px;border-radius:11px;border:1px solid rgba(237,205,151,.30);background:#080809;color:#fff;text-align:center;font-size:20px;letter-spacing:.20em}
#voiceLoginForm button{background:var(--gold);border:0;border-radius:11px;color:#130f0a;padding:15px;font-weight:650}
#loginError{color:#e4a3a0;font-size:12px;min-height:14px}
.od-toast{position:fixed;z-index:35;bottom:calc(145px + env(safe-area-inset-bottom));left:20px;right:20px;max-width:470px;margin:auto;color:#fff5ea;font-size:13px;text-align:center;background:rgba(14,15,16,.94);border:1px solid rgba(237,203,154,.27);border-radius:12px;padding:11px 14px;transform:translateY(10px);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.od-toast.show{opacity:1;transform:translateY(0)}.od-toast.error{border-color:rgba(236,135,137,.47);color:#ffd6d6}
.od-settings{position:fixed;inset:0;z-index:30;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.50);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.od-sheet{width:min(100%,610px);max-height:92dvh;overflow-y:auto;background:#141413;border-radius:24px 24px 0 0;border:1px solid rgba(231,205,165,.18);border-bottom:none;padding:26px 24px calc(30px + env(safe-area-inset-bottom));box-shadow:0 -15px 45px rgba(0,0,0,.37)}
.od-sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.od-sheet-head small{font-size:10px;letter-spacing:.18em;color:var(--gold)}.od-sheet-head h2{font-size:24px;font-weight:440;margin:6px 0}
.od-sheet-head button{background:transparent;border:1px solid var(--hairline);border-radius:50%;color:var(--ivory);width:38px;height:38px;font-size:14px}
.od-sheet label{display:block;font-size:13px;color:#ded4c4;margin-bottom:11px}
.od-sheet select{width:100%;height:49px;background:#22211e;border-radius:11px;border:1px solid rgba(228,203,168,.21);color:var(--ivory);padding:0 12px}
.od-sheet p{line-height:1.7;font-size:11px;color:rgba(224,216,201,.60);margin:12px 0 19px}
.od-setting-primary{background:var(--gold);color:#18140c;font-weight:670;border:0;border-radius:11px;width:100%;padding:15px}
.od-setting-divider{height:1px;background:var(--hairline);margin:25px 0 17px}
.od-effect-switch,.od-dashboard{display:flex;width:100%;align-items:center;justify-content:space-between;color:var(--ivory);background:transparent;font-size:13px;border:0;text-decoration:none;padding:12px 0}
.od-effect-switch[aria-pressed="true"]{color:var(--gold)}.od-dashboard{border-top:1px solid var(--hairline);margin-top:7px}
.od-sheet-foot{display:block;color:rgba(237,217,188,.38);font-size:10px;margin-top:24px}
#screenWakeStatus{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important}
.v3-particles-canvas{position:absolute!important;inset:0;width:100%!important;height:100%!important;z-index:2;pointer-events:none}
.od-stage[data-avatar-mode="particles"] .od-portrait{opacity:.05!important}
.od-stage.revealed[data-avatar-mode="particles"] .od-portrait{opacity:.24!important}
.od-stage[data-avatar-mode="cinematic"] .v3-particles-canvas{display:none}
@keyframes glimmer{50%{opacity:.58;transform:scale(.97)}}@keyframes presence{50%{filter:brightness(1.025)}}@keyframes drift{to{transform:translate(2%,-1%) rotate(3deg)}}
@media(min-width:720px){.od-portrait{width:min(100vw,760px);height:100dvh;inset-inline:auto;left:50%;transform:translateX(-50%) scale(.935)}.od-stage.revealed .od-portrait{transform:translateX(-50%) scale(1)}.od-stage.forming .od-portrait{transform:translateX(-50%) scale(.98)}}
@media(max-width:370px){.od-dock{padding-inline:6px}.od-side-button{width:58px;min-width:52px}.od-voice-button{font-size:12px}.od-identity strong,.od-identity em{font-size:15px}.od-identity-emblem{width:32px;height:32px}}
@media(max-height:670px){.od-bottom{padding-bottom:calc(9px + env(safe-area-inset-bottom));gap:7px}.od-dock{min-height:59px}.od-voice-button{min-height:49px}.od-portrait .v2-face{object-position:50% 32%}.od-transcript{max-height:65px}}
@media(prefers-reduced-motion:reduce){.od-stage *,.od-stage *::after,.od-stage *::before{animation:none!important;transition-duration:.01ms!important}}

/* Stable iOS compositor path: four full-screen portrait layers must never
   combine large GPU filter animations, masks and backdrop blurs in WebKit. */
.od-portrait,.od-stage.revealed .od-portrait{
  -webkit-mask-image:none!important;
  mask-image:none!important;
  filter:none!important;
  animation:none!important;
}
.od-dock,.od-gear,.od-login,.od-settings,.od-transcript p{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}


/* Approved canvas compositor: no full-screen image/filter stack in WebKit. */
.od-portrait{display:none!important}
#cosmicCanvas,.od-stage.revealed #cosmicCanvas{z-index:2;opacity:1;transition:none}
.od-stage[data-scene="gather"] .od-awaken{opacity:0}
.od-dock{width:auto;gap:14px;min-height:56px;padding:0;border:0;background:transparent;box-shadow:none}
.od-voice-button{flex:none;min-height:48px;padding:0 20px;border-radius:28px;font-size:12px}
.od-side-button{height:48px;width:48px;min-width:48px;border:1px solid var(--hairline)!important;border-radius:50%}
.od-side-button span{display:none}
.od-bottom{gap:10px;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
.od-transcript{max-height:72px}
.od-transcript p{border:0;background:rgba(2,5,9,.5);padding:4px 8px}
.od-vignette{background:linear-gradient(0deg,#020406 0%,rgba(2,4,6,.75) 12%,transparent 36%)}
@media (max-height:500px){.od-transcript{max-height:40px}.od-header{padding-top:10px}.od-bottom{gap:4px}.od-footer-hint{display:none}}

/* Keep wake-lock failure visible, so a system denial is never silent. */
#screenWakeStatus{position:static!important;width:auto!important;height:auto!important;clip-path:none!important;overflow:visible!important;font-size:10px;line-height:1.5;text-align:center;color:#a9bdca;margin:0;max-width:340px}
#screenWakeStatus[data-wake="unavailable"]{color:#e6c48c}

#musicBtn .music-note{display:block;font-size:20px}#musicBtn[data-music="off"]{opacity:.4}#musicBtn[data-ducked="true"]{color:#7ebcd9}#musicVolume{width:100%;accent-color:#d7bb8b}
