:root{
  --bg:#050712;
  --glass:rgba(5,9,23,.58);
  --glass-strong:rgba(4,8,21,.82);
  --line:rgba(170,192,255,.30);
  --line-soft:rgba(255,255,255,.10);
  --white:#f8f9ff;
  --muted:#c3c8db;
  --violet:#9b70ff;
  --violet-2:#7356ff;
  --cyan:#6cefff;
  --green:#73f7c3;
  --font:"Space Grotesk",system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);font-family:var(--font);color:var(--white);-webkit-font-smoothing:antialiased}
body{min-height:100svh;overflow:hidden}
button,textarea{font:inherit}
button{color:inherit}
.ai-stage{position:relative;min-height:100svh;background:#050712;overflow:hidden}
/* Full-width ambience: a soft cover layer extends the scene into the side areas. */
.ai-stage::before{content:"";position:absolute;inset:92px 0 0;pointer-events:none;background-image:url("./qntm-ai-background.png");background-position:center center;background-size:cover;background-repeat:no-repeat;filter:blur(18px) brightness(.58) saturate(.92);transform:scale(1.045);opacity:.86;z-index:0}
/* Main image: always fully visible, beginning below the header so its top is never hidden. */
.ai-stage::after{content:"";position:absolute;inset:92px 0 0;pointer-events:none;background-image:url("./qntm-ai-background.png");background-position:center center;background-size:contain;background-repeat:no-repeat;z-index:1}
.site-header{position:absolute;inset:0 0 auto 0;height:92px;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(28px,3.6vw,58px);background:linear-gradient(180deg,rgba(2,5,16,.96),rgba(3,6,17,.86));border-bottom:1px solid rgba(167,181,255,.16);backdrop-filter:blur(18px)}
.brand{display:inline-flex;align-items:center;gap:22px;color:#fff;text-decoration:none;min-width:0}.brand img{width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 0 18px rgba(155,112,255,.35))}.brand span{font-size:clamp(1.2rem,1.9vw,2rem);font-weight:500;letter-spacing:.32em;white-space:nowrap}
.header-actions{display:flex;align-items:center;gap:30px}.language-switch{display:inline-flex;align-items:center;gap:9px}.globe{width:24px;height:24px;display:grid;place-items:center;margin-right:4px;color:#fff}.globe svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.language-switch__btn{border:0;background:transparent;padding:6px 2px;color:#c7cad8;font-size:.96rem;letter-spacing:.06em;cursor:pointer;transition:color .2s var(--ease),text-shadow .2s var(--ease)}.language-switch__btn:hover,.language-switch__btn.is-active{color:#fff;text-shadow:0 0 15px rgba(155,112,255,.55)}.language-divider{color:#667089}.language-switch__btn:disabled{opacity:.45;cursor:wait}.join-btn{min-width:164px;text-align:center;text-decoration:none;padding:15px 25px;border-radius:999px;border:1px solid rgba(157,124,255,.78);color:#f8f4ff;background:rgba(15,12,35,.36);box-shadow:0 0 0 1px rgba(96,218,255,.12) inset,0 0 22px rgba(126,85,255,.24);transition:background .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}.join-btn:hover{background:rgba(116,75,255,.16);box-shadow:0 0 32px rgba(130,88,255,.38);transform:translateY(-1px)}
.experience{position:relative;min-height:100svh;z-index:2}.voice-panel,.chat-panel{position:absolute;inset:0;padding-top:92px}.ai-stage[data-mode="voice"] .chat-panel{display:none}.ai-stage[data-mode="text"] .voice-panel{display:none}
.scene-shade{position:absolute;inset:92px 0 0;pointer-events:none;background:linear-gradient(90deg,rgba(2,5,15,.03) 0%,rgba(2,5,15,0) 47%,rgba(2,5,15,.33) 61%,rgba(2,5,15,.70) 100%);z-index:0}
.orb-wrap{position:absolute;z-index:5;left:48.2%;top:50.8%;width:clamp(320px,25.2vw,455px);aspect-ratio:1;transform:translate(-50%,-50%);display:grid;place-items:center;isolation:isolate;filter:drop-shadow(0 0 18px rgba(116,92,255,.30));touch-action:none}
.orb-wrap::before{content:"";position:absolute;width:75%;height:75%;border-radius:50%;background:radial-gradient(circle,rgba(165,95,255,.40),rgba(94,229,255,.12) 48%,transparent 72%);filter:blur(28px);opacity:.92;transition:.4s var(--ease)}
#orbCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;filter:drop-shadow(0 0 28px rgba(170,100,255,.46)) drop-shadow(0 0 52px rgba(90,220,240,.10))}
.orb-halo{position:absolute;border-radius:50%;pointer-events:none}.orb-halo--one{width:72%;height:72%;border:1px solid rgba(188,165,255,.32);box-shadow:0 0 22px rgba(150,97,255,.14) inset;animation:ringBreath 5.5s ease-in-out infinite}.orb-halo--two{width:82%;height:82%;border:1px solid rgba(120,210,240,.12);animation:ringBreath 7s ease-in-out infinite reverse}
.orb-hit{position:absolute;z-index:10;width:66%;height:66%;border:0;border-radius:50%;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}.orb-core-ui{position:absolute;z-index:9;top:calc(100% + 10px);left:50%;transform:translateX(-50%);display:grid;justify-items:center;gap:8px;pointer-events:none}.orb-mic-ring{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(5,9,24,.36);border:1px solid rgba(239,231,255,.36);box-shadow:0 0 16px rgba(146,95,255,.16),inset 0 0 14px rgba(79,170,255,.06);backdrop-filter:blur(8px);opacity:.82}.orb-mic-ring svg{width:22px;height:22px;fill:none;stroke:rgba(255,255,255,.84);stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}.orb-instruction{font-size:.68rem;font-weight:500;letter-spacing:.16em;color:rgba(255,255,255,.74);text-shadow:0 2px 10px rgba(0,0,0,.45)}
.orb-wrap[data-state="listening"]::before,.orb-wrap[data-state="speaking"]::before{transform:scale(1.13);opacity:1}.orb-wrap[data-state="listening"] .orb-mic-ring{border-color:rgba(108,239,255,.62);box-shadow:0 0 22px rgba(108,239,255,.24),inset 0 0 18px rgba(108,239,255,.08);opacity:.94}.orb-wrap[data-state="speaking"] .orb-mic-ring{border-color:rgba(201,168,255,.62);box-shadow:0 0 24px rgba(163,106,255,.26),inset 0 0 18px rgba(163,106,255,.08);opacity:.94}
@keyframes ringBreath{0%,100%{transform:scale(.96);opacity:.4}50%{transform:scale(1.04);opacity:.95}}
.intro-panel{position:absolute;z-index:8;left:62.2%;top:32.8%;width:min(390px,31vw);text-shadow:0 2px 22px rgba(0,0,0,.55)}.hello-line{margin:0;font-size:clamp(2.3rem,3.1vw,3.8rem);line-height:1;font-weight:500;letter-spacing:-.04em}.intro-panel h1{margin:3px 0 14px;font-size:clamp(2.4rem,3.2vw,4rem);line-height:1.05;font-weight:500;letter-spacing:-.045em;white-space:nowrap}.intro-panel h1 strong{font-weight:600;background:linear-gradient(90deg,#a97eff,#735dff 55%,#75dfff 125%);-webkit-background-clip:text;background-clip:text;color:transparent}.intro-copy{margin:0 0 26px;color:#f3f4fb;font-size:clamp(1.02rem,1.18vw,1.25rem);line-height:1.45}
.quick-actions{display:flex;flex-wrap:wrap;gap:10px;max-width:450px}.quick-actions button{height:42px;padding:0 15px;border-radius:999px;border:1px solid rgba(173,181,244,.58);background:rgba(5,9,26,.42);backdrop-filter:blur(12px);display:inline-flex;align-items:center;gap:9px;color:#f5f6ff;font-size:.87rem;cursor:pointer;box-shadow:0 0 20px rgba(116,81,255,.05);transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}.quick-actions button:hover{background:rgba(114,75,255,.17);border-color:rgba(166,132,255,.88);transform:translateY(-1px)}.quick-actions svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mode-row{margin-top:18px}.mode-switch{display:inline-flex;align-items:center;padding:3px;border:1px solid rgba(173,181,244,.38);border-radius:999px;background:rgba(5,9,24,.36);backdrop-filter:blur(12px)}.mode-switch__btn{height:37px;border:0;background:transparent;color:#b8bfd5;border-radius:999px;padding:0 14px;display:inline-flex;align-items:center;gap:7px;font-size:.78rem;cursor:pointer}.mode-switch__btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.mode-switch__btn.is-active{color:#fff;background:linear-gradient(135deg,rgba(126,83,255,.95),rgba(145,97,255,.76));box-shadow:0 0 18px rgba(127,83,255,.22)}
.voice-feedback{margin-top:15px}.voice-status{display:flex;align-items:center;gap:8px;font-size:.8rem;color:#e7e9f6}.status-dot{width:7px;height:7px;border-radius:50%;background:#9199ad}.voice-panel[data-ui-state="listening"] .status-dot{background:var(--cyan);box-shadow:0 0 0 4px rgba(108,239,255,.10)}.voice-panel[data-ui-state="speaking"] .status-dot{background:#b999ff;box-shadow:0 0 0 4px rgba(185,153,255,.12)}.voice-feedback>p{margin:5px 0 0;color:#adb4c8;font-size:.72rem}.connection-row{margin-top:10px;display:flex;align-items:center;gap:8px}.voice-live-note{font-size:.68rem;color:#aeb5c9;min-width:0}.voice-live-note[data-tone="success"]{color:#bbf7db}.voice-live-note[data-tone="error"]{color:#ffc4d8}.session-toggle{height:28px;border-radius:999px;border:1px solid rgba(172,180,239,.30);background:rgba(6,10,26,.34);padding:0 10px;color:#c7cce0;font-size:.66rem;cursor:pointer}.session-toggle:hover{border-color:rgba(161,128,255,.65);color:#fff}.session-toggle:disabled{opacity:.45;cursor:wait}
.chat-panel{background:rgba(2,5,14,.08)}.chat-scene-shade{position:absolute;inset:92px 0 0;background:linear-gradient(90deg,rgba(2,4,13,.04),rgba(2,4,13,.18) 45%,rgba(2,4,13,.74) 100%);pointer-events:none}.chat-card{position:absolute;z-index:8;top:19%;right:5.2%;width:min(570px,43vw);height:min(660px,70vh);border:1px solid rgba(173,181,244,.34);border-radius:30px;background:linear-gradient(180deg,rgba(7,12,29,.78),rgba(4,8,21,.88));backdrop-filter:blur(22px);box-shadow:0 30px 80px rgba(0,0,0,.32),0 0 40px rgba(118,80,255,.10);display:flex;flex-direction:column;overflow:hidden}.chat-panel__head{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid var(--line-soft)}.chat-kicker{font-size:.66rem;letter-spacing:.18em;color:#9ea8c2}.chat-panel__head h2{margin:4px 0 0;font-size:1.05rem}.messages{flex:1;min-height:0;overflow:auto;padding:22px;display:flex;flex-direction:column;gap:14px}.message{display:flex;gap:10px;align-items:flex-end}.message--user{justify-content:flex-end}.message--user .avatar{display:none}.avatar{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:#19162d;color:#c7a9ff;border:1px solid rgba(163,116,255,.28);font-size:.7rem;font-weight:700}.bubble{max-width:84%;padding:12px 13px;border-radius:17px 17px 17px 5px;background:rgba(22,29,49,.88);border:1px solid rgba(255,255,255,.07)}.bubble strong{font-size:.72rem}.bubble p{margin:4px 0 0;color:#cfd4e6;font-size:.87rem;line-height:1.45}.message--user .bubble{border:0;border-radius:17px 17px 5px 17px;background:linear-gradient(135deg,#8a62ff,#4fcce8)}.message--user .bubble p{color:#fff;margin:0}.chat-footer-tools{display:flex;justify-content:flex-end;padding:0 18px 7px}.clear-btn{border:0;background:transparent;color:#8f99b2;font-size:.68rem;cursor:pointer}.clear-btn:hover{color:#fff}.composer{display:grid;grid-template-columns:1fr 48px;gap:10px;padding:10px 16px 17px;border-top:1px solid rgba(255,255,255,.06)}.composer textarea{resize:none;min-height:48px;max-height:130px;border-radius:16px;border:1px solid rgba(173,181,244,.24);background:rgba(6,11,28,.74);padding:13px 14px;outline:0;color:#fff}.composer textarea::placeholder{color:#8490aa}.composer textarea:focus{border-color:rgba(155,112,255,.64);box-shadow:0 0 0 4px rgba(126,82,255,.08)}.composer button{width:48px;height:48px;border-radius:15px;border:0;background:linear-gradient(135deg,#9b70ff,#6a5cff);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 0 22px rgba(127,82,255,.22)}.composer button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.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}
@media(max-width:1180px){.brand span{font-size:1.35rem}.header-actions{gap:18px}.join-btn{min-width:138px}.orb-wrap{left:47.5%;top:52%;width:clamp(300px,28vw,400px)}.intro-panel{left:61.5%;top:34%;width:34vw}.quick-actions button{height:38px;padding:0 12px;font-size:.78rem}}
@media(max-width:900px){body{overflow:auto}.ai-stage{min-height:100svh}.ai-stage::before,.ai-stage::after{inset:76px 0 0}.ai-stage::before{filter:blur(14px) brightness(.54) saturate(.9);transform:scale(1.05)}.site-header{height:76px;padding:0 18px}.brand{gap:12px}.brand img{width:44px;height:44px}.brand span{font-size:1rem;letter-spacing:.22em}.join-btn{min-width:0;padding:11px 15px}.header-actions{gap:12px}.language-switch{gap:6px}.globe{display:none}.voice-panel,.chat-panel{padding-top:76px}.scene-shade{inset:76px 0 0;background:linear-gradient(180deg,rgba(1,3,10,.05) 30%,rgba(1,3,10,.22) 55%,rgba(1,3,10,.88) 100%)}.orb-wrap{left:55%;top:45%;width:min(390px,58vw)}.intro-panel{left:18px;right:18px;top:auto;bottom:30px;width:auto;max-width:600px}.hello-line{font-size:2.1rem}.intro-panel h1{font-size:2.3rem}.intro-copy{font-size:1rem;margin-bottom:15px}.quick-actions{gap:7px}.quick-actions button{height:35px}.voice-feedback{display:none}.chat-card{top:14%;right:4%;left:4%;width:auto;height:78vh}}
@media(max-width:600px){.brand span{display:none}.language-switch__btn{font-size:.82rem}.join-btn{font-size:.78rem;padding:10px 13px}.orb-wrap{left:58%;top:42%;width:min(330px,76vw)}.orb-core-ui{top:calc(100% + 6px);gap:6px}.orb-mic-ring{width:42px;height:42px}.orb-mic-ring svg{width:18px;height:18px}.orb-instruction{font-size:.62rem}.intro-panel{bottom:18px}.hello-line{font-size:1.6rem}.intro-panel h1{font-size:1.82rem;margin-bottom:8px}.intro-copy{font-size:.87rem}.quick-actions button{height:33px;font-size:.7rem}.mode-row{margin-top:10px}.chat-card{top:12%;height:82vh}.chat-panel__head{padding:16px}.chat-panel__head h2{font-size:.95rem}.mode-switch__btn{padding:0 10px}.mode-switch__btn span{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}