:root{--void: #000000;--bone: #ffffff;--ash: #9a9a9a;--mist: #bdbdbd;--iris: #8052ff;--spark: #ffb829;--verdant: #15846e;--font: "Inter", "Noto Sans SC", ui-sans-serif, system-ui, sans-serif}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;overflow:hidden}body{background:var(--void);color:var(--bone);font-family:var(--font);font-weight:400;-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none}button{font-family:var(--font)}.app{position:relative;height:100%;background:var(--void)}.glass{background:linear-gradient(150deg,#ffffff1a,#ffffff08 42%,#fff1);backdrop-filter:blur(26px) saturate(1.7);-webkit-backdrop-filter:blur(26px) saturate(1.7);border:1px solid rgba(255,255,255,.13);box-shadow:inset 0 1px #ffffff2b,inset 0 -1px #ffffff08,0 12px 40px #0000006b}.hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:2}.hud>*{pointer-events:auto}.hud-header{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:30px 36px}.brand{display:flex;align-items:center;gap:12px}.brand-mark{display:block}.brand-name{font-size:14px;font-weight:600;letter-spacing:.35em;text-transform:uppercase}.hud-header-right{display:flex;align-items:center;gap:14px}.control-cluster{display:flex;align-items:center;gap:16px;height:44px;padding:0 20px;border-radius:999px}.cluster-divider{width:1px;height:14px;background:#ffffff24}.lang-switch{display:flex;gap:14px}.lang-option{border:none;background:none;color:var(--ash);font-size:13px;font-weight:600;letter-spacing:.1em;cursor:pointer;padding:0;transition:color .2s}.lang-option:hover{color:var(--mist)}.lang-option[data-active=true]{color:var(--bone)}.status-bar{display:flex;align-items:center;gap:12px;font-size:13px;letter-spacing:.025em;color:var(--ash);height:44px;padding:0 18px;border-radius:999px;background:linear-gradient(150deg,#ffffff1a,#ffffff08 42%,#fff1);backdrop-filter:blur(26px) saturate(1.7);-webkit-backdrop-filter:blur(26px) saturate(1.7);border:1px solid rgba(255,255,255,.13);box-shadow:inset 0 1px #ffffff2b,0 12px 40px #0000006b}.status-dot{width:6px;height:6px;border-radius:50%;background:var(--ash)}.status-bar[data-conn=connected] .status-dot{background:var(--iris)}.status-bar[data-conn=connecting] .status-dot{background:var(--spark);animation:dot-breathe .9s ease-in-out infinite}.status-bar[data-conn=error] .status-dot{background:var(--spark)}.status-bar[data-conn=reconnecting] .status-dot{background:var(--spark);animation:dot-breathe .9s ease-in-out infinite}@keyframes dot-breathe{50%{opacity:.3}}.status-state{color:var(--bone)}.status-disconnect{border:none;background:none;color:var(--ash);font-size:14px;cursor:pointer;letter-spacing:.025em;padding:6px 0 6px 12px}.status-disconnect:hover{color:var(--bone)}.captions{position:absolute;left:50%;bottom:96px;transform:translate(-50%);width:min(620px,calc(100vw - 440px));display:flex;flex-direction:column;justify-content:flex-end;gap:20px;text-align:center;padding:22px 30px;border-radius:24px;background:linear-gradient(150deg,#0e0c1a99,#03030a8c 45%,#0a081494);backdrop-filter:blur(26px) saturate(1.5);-webkit-backdrop-filter:blur(26px) saturate(1.5);border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px #ffffff24,inset 0 0 60px #8052ff0d,0 12px 40px #0000006b;animation:captions-in .45s cubic-bezier(.22,1,.36,1) both}@keyframes captions-in{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}.caption{animation:caption-in .5s cubic-bezier(.22,1,.36,1) both}@keyframes caption-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.caption[data-latest=false]{opacity:.32}.caption-chip{display:block;margin-bottom:6px;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}.cap-a .caption-chip{color:var(--iris)}.cap-b .caption-chip{color:var(--spark)}.cap-m .caption-chip{color:var(--mist)}.caption-text{font-size:18px;font-weight:200;line-height:1.5;color:var(--bone)}.caret{display:inline-block;width:1px;height:1em;margin-left:4px;vertical-align:-.12em;background:var(--mist);animation:caret-blink 1s step-end infinite}@keyframes caret-blink{50%{opacity:0}}.hint-toast{position:absolute;left:50%;bottom:52px;transform:translate(-50%);font-size:13px;font-weight:400;letter-spacing:.1em;color:var(--spark);white-space:nowrap;padding:9px 20px;border-radius:999px;opacity:0;transition:opacity .4s ease;pointer-events:none}.hint-toast[data-show=true]{opacity:1}.party-slot{position:absolute;bottom:48px}.party-slot-a{left:60px}.party-slot-b{right:60px}.party-button{position:relative;width:168px;height:168px;border:none;background:none;border-radius:50%;color:var(--bone);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;touch-action:none;-webkit-tap-highlight-color:transparent;transition:opacity .3s,transform .15s ease-out}.party-button:active{transform:scale(.97)}.party-button[data-disabled=true]{opacity:.22;cursor:default}.party-tag{font-size:72px;font-weight:400;line-height:.9;letter-spacing:-.03em;color:var(--pc);transition:opacity .3s}.party-label{font-size:13px;font-weight:600;letter-spacing:.25em;text-transform:uppercase;color:var(--ash);transition:color .3s}.party-button[data-holding=true] .party-label{color:var(--pc)}.party-key{font-size:11px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--ash);opacity:.75}.mic-ring{position:absolute;top:10px;right:10px;bottom:10px;left:10px;border-radius:50%;border:1px solid var(--pc);pointer-events:none;opacity:0;will-change:transform,opacity}.pulse-ring{position:absolute;top:10px;right:10px;bottom:10px;left:10px;border-radius:50%;border:1px solid var(--pc);pointer-events:none;opacity:0}.party-button[data-holding=true] .pulse-ring{animation:pulse-out 2s cubic-bezier(.22,1,.36,1) infinite}@keyframes pulse-out{0%{transform:scale(1);opacity:.5}to{transform:scale(1.45);opacity:0}}.connect-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;align-items:center;background:transparent;pointer-events:none}.connect-hero{pointer-events:auto}.connect-hero{padding-left:clamp(36px,9vw,130px);max-width:620px;animation:hero-in .9s cubic-bezier(.22,1,.36,1) both}@keyframes hero-in{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.connect-title{font-size:clamp(56px,7.5vw,104px);font-weight:400;line-height:1.05;letter-spacing:-.04em;margin-bottom:30px;white-space:pre-line}.connect-desc{font-size:18px;font-weight:200;line-height:1.6;color:var(--mist);max-width:460px;margin-bottom:36px}.connect-error{max-width:460px;margin-bottom:24px;font-size:14px;font-weight:400;line-height:1.6;color:var(--spark);word-break:break-all}.connect-button{border:1px solid rgba(255,255,255,.28);background:linear-gradient(150deg,#8052ffd9,#8052ff8c 55%,#8052ffb3);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);color:var(--bone);font-size:14px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;padding:15px 32px;border-radius:999px;cursor:pointer;box-shadow:inset 0 1px #fff6,inset 0 -1px #ffffff14,0 10px 36px #8052ff59;transition:transform .15s ease-out,box-shadow .2s,opacity .2s}.connect-button:hover{transform:translateY(-1px);box-shadow:inset 0 1px #ffffff73,inset 0 -1px #ffffff14,0 14px 44px #8052ff80}.connect-button:active{transform:scale(.98)}.connect-button:disabled{opacity:.5;cursor:wait}.connect-hint{margin-top:24px;font-size:12px;font-weight:400;letter-spacing:.05em;color:var(--ash)}.about-button{display:inline-flex;align-items:center;flex-shrink:0;gap:8px;height:44px;padding:0 18px;border-radius:999px;color:var(--ash);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .15s ease-out}.about-button:hover,.about-button[data-active=true]{background:linear-gradient(150deg,#ffffff29,#ffffff0f 42%,#ffffff1a);border-color:#ffffff38;color:var(--bone)}.about-button:active{transform:scale(.97)}.about-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;display:flex;justify-content:flex-end;pointer-events:auto;padding:24px;background:#06070d4d;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);animation:about-fade-in .3s ease both}@keyframes about-fade-in{0%{opacity:0}to{opacity:1}}.about-panel{position:relative;width:min(680px,100%);height:100%;overflow:hidden;border-radius:24px;animation:about-slide-in .5s cubic-bezier(.22,1,.36,1) both}@keyframes about-slide-in{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}.about-panel-header{padding:42px 52px 28px;border-bottom:1px solid rgba(255,255,255,.12)}.about-eyebrow{color:var(--spark);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}.about-panel h2{margin-top:12px;color:var(--bone);font-size:clamp(30px,4vw,48px);font-weight:300;letter-spacing:-.03em}.about-content{height:calc(100% - 148px);overflow-y:auto;padding:12px 52px 52px;scrollbar-color:rgba(255,255,255,.3) transparent}.about-section{padding:26px 0 12px}.about-section+.about-section{border-top:1px solid rgba(255,255,255,.1)}.about-section h3{margin-bottom:14px;color:var(--bone);font-size:17px;font-weight:500;letter-spacing:.02em;text-transform:uppercase}.about-section p{margin:0 0 15px;color:var(--mist);font-size:15px;font-weight:300;line-height:1.7}.about-close{position:absolute;top:18px;right:22px;z-index:1;width:36px;height:36px;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:#ffffff0f;color:var(--bone);font-size:25px;font-weight:200;line-height:1;cursor:pointer;transition:background .2s,border-color .2s}.about-close:hover{background:#ffffff1f;border-color:#ffffff52}.settings-button{display:flex;align-items:center;gap:8px;border:none;background:none;color:var(--ash);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;padding:0;transition:color .2s}.settings-button:hover,.settings-button[data-active=true]{color:var(--bone)}.char-picker{position:absolute;left:70%;transform:translate(-50%);bottom:44px;display:flex;align-items:center;gap:12px;padding:22px 18px 18px;border-radius:24px;touch-action:pan-y;-webkit-user-select:none;user-select:none;animation:picker-in .6s cubic-bezier(.22,1,.36,1) both}@keyframes picker-in{0%{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%)}}.char-arrow{border:none;background:none;color:var(--ash);font-size:40px;font-weight:200;line-height:1;cursor:pointer;padding:8px 10px;transition:color .2s,transform .15s}.char-arrow:hover{color:var(--bone);transform:scale(1.15)}.char-card{width:240px;text-align:center;animation:char-in .35s cubic-bezier(.22,1,.36,1) both}@keyframes char-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.char-picker-title{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ash);margin-bottom:14px}.char-voice{font-size:12px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;margin-bottom:8px}.char-name{font-size:44px;font-weight:400;letter-spacing:-.02em;line-height:1.05;margin-bottom:8px}.char-tagline{font-size:14px;font-weight:200;line-height:1.5;color:var(--mist);margin-bottom:14px;min-height:42px}.char-preview{display:inline-flex;align-items:center;gap:7px;margin-bottom:16px;padding:8px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:#ffffff0f;color:var(--mist);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:color .2s,background .2s,border-color .2s}.char-preview:hover{color:var(--bone);background:#ffffff1a}.char-preview[data-playing=true]{color:var(--bone);border-color:#8052ff8c;background:#8052ff2e;animation:preview-pulse 1.6s ease-in-out infinite}@keyframes preview-pulse{50%{box-shadow:0 0 18px #8052ff59}}.char-dots{display:flex;justify-content:center;gap:10px}.char-dot{width:8px;height:8px;border-radius:50%;border:none;background:#9a9a9a59;cursor:pointer;padding:0;transition:background .25s,transform .25s}.char-dot[data-active=true]{background:var(--iris);transform:scale(1.25)}.phase-tracker{position:absolute;top:30px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:14px;height:44px;padding:0 20px;border-radius:999px;animation:phase-in .6s cubic-bezier(.22,1,.36,1) both}@keyframes phase-in{0%{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%)}}@media(max-width:1560px){.phase-tracker{top:92px}}.phase-ticks{display:flex;gap:8px}.phase-tick{width:22px;height:3px;border-radius:2px;background:#ffffff24;transition:background .5s,box-shadow .5s}.phase-tick[data-done=true]{background:#8052ff80}.phase-tick[data-current=true]{background:var(--iris);box-shadow:0 0 10px #8052ffa6}.phase-label{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--bone);animation:char-in .35s cubic-bezier(.22,1,.36,1) both}.summary-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:24px;background:#0000008c;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:sum-fade .4s ease both}@keyframes sum-fade{0%{opacity:0}to{opacity:1}}.summary-panel{width:min(680px,100%);max-height:min(82vh,100%);display:flex;flex-direction:column;overflow:hidden;border-radius:28px;padding:36px 40px 26px;animation:sum-in .5s cubic-bezier(.22,1,.36,1) both}.sum-scroll{overflow-y:auto;margin-right:-24px;padding-right:24px}@keyframes sum-in{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.sum-eyebrow{font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ash);margin-bottom:12px}.sum-title{font-size:34px;font-weight:400;letter-spacing:-.02em;line-height:1.15;margin-bottom:14px}.sum-overview{font-size:15px;font-weight:200;line-height:1.65;color:var(--mist)}.sum-positions{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}.sum-section{margin-top:24px}.sum-section p{font-size:14px;font-weight:200;line-height:1.6;color:var(--bone)}.sum-heading{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ash);margin-bottom:8px}.sum-pos-a .sum-heading{color:var(--iris)}.sum-pos-b .sum-heading{color:var(--spark)}.sum-heading[data-accent=true]{color:#3ecfa8}.sum-list{list-style:none}.sum-list li{position:relative;padding-left:18px;font-size:14px;font-weight:200;line-height:1.6;color:var(--bone);margin-bottom:6px}.sum-list li:before{content:"";position:absolute;left:0;top:.65em;width:8px;height:1px;background:var(--ash)}.sum-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;flex-shrink:0}.sum-button{padding:11px 24px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:#ffffff0f;color:var(--mist);font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;cursor:pointer;transition:color .2s,background .2s,border-color .2s}.sum-button:hover{color:var(--bone);background:#ffffff1a}.sum-button-primary{border-color:#ffffff47;background:linear-gradient(150deg,#8052ffd9,#8052ff8c 55%,#8052ffb3);color:var(--bone);box-shadow:inset 0 1px #fff6,0 10px 36px #8052ff4d}.sum-button-primary:hover{background:linear-gradient(150deg,#8052fff2,#8052ffa6 55%,#8052ffcc)}.sum-loading{display:flex;flex-direction:column;align-items:center;gap:20px;padding:44px 0;font-size:15px;font-weight:200;color:var(--mist);text-align:center}.sum-spinner{width:24px;height:24px;border-radius:50%;border:2px solid rgba(255,255,255,.14);border-top-color:var(--iris);animation:sum-spin .9s linear infinite}@keyframes sum-spin{to{transform:rotate(360deg)}}.sum-error{color:var(--spark)}.lang-current,.mobile-style-bar{display:none}@media(max-width:1080px){.about-button{width:44px;padding:0;justify-content:center}.about-button span{display:none}}@media(max-width:900px){.brand-name{display:none}}@media(max-width:820px){.hud-header{padding:14px 16px;padding-top:calc(14px + env(safe-area-inset-top));gap:10px;position:relative;z-index:20}.brand{gap:0}.brand-name{display:none}.hud-header-right{gap:8px}.control-cluster{height:40px;padding:0 14px;gap:12px}.settings-button,.cluster-divider,.char-picker{display:none}.lang-current{display:inline-flex;align-items:center;gap:5px;border:none;background:none;color:var(--bone);font-size:13px;font-weight:600;letter-spacing:.1em;cursor:pointer;padding:12px 8px}.lang-current svg{color:var(--ash);transition:transform .2s}.lang-switch[data-open=true] .lang-current svg{transform:rotate(180deg)}.lang-option{display:none}.lang-switch[data-open=true] .lang-option{display:inline-block;padding:12px 8px}.lang-switch[data-open=true] .lang-current{display:none}.status-bar{white-space:nowrap}.status-bar{height:40px;padding:0 13px;gap:8px;font-size:12px}.status-bar[data-conn=connected] .status-conn{display:none}.status-disconnect{font-size:12px;padding:10px 0 10px 8px}.connect-overlay{align-items:flex-start}.connect-hero{padding:calc(84px + env(safe-area-inset-top)) 24px 0;max-width:100%;animation:hero-in-mobile .9s cubic-bezier(.22,1,.36,1) both}@keyframes hero-in-mobile{0%{opacity:0}to{opacity:1}}.connect-title{font-size:clamp(42px,13vw,54px);margin-bottom:16px}.connect-desc{font-size:15px;line-height:1.65;margin-bottom:14px}.connect-button{position:absolute;left:16px;right:16px;bottom:calc(20px + env(safe-area-inset-bottom));padding:17px;font-size:14px}.connect-hint{margin-top:0;font-size:11px}.about-button{width:40px;height:40px;padding:0;justify-content:center}.about-button span{display:none}.about-backdrop{align-items:flex-end;padding:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}.about-panel{height:min(86vh,760px);border-radius:20px}.about-panel-header{padding:32px 28px 22px}.about-content{height:calc(100% - 126px);padding:8px 28px 32px}.about-section h3{font-size:15px;line-height:1.35}.about-section p{font-size:14px;line-height:1.65}.mobile-style-bar{display:flex;align-items:center;gap:2px;position:absolute;left:16px;right:16px;bottom:calc(86px + env(safe-area-inset-bottom));padding:6px 8px;border-radius:20px;animation:msb-in .6s cubic-bezier(.22,1,.36,1) both}@keyframes msb-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.msb-arrow{width:44px;height:44px;flex-shrink:0;border:none;background:none;color:var(--ash);font-size:28px;font-weight:200;line-height:1;cursor:pointer}.msb-arrow:active{color:var(--bone)}.msb-info{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;animation:char-in .3s cubic-bezier(.22,1,.36,1) both}.msb-eyebrow{font-size:9px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--ash)}.msb-name{font-size:16px;font-weight:400;color:var(--bone)}.msb-name em{font-style:normal;font-size:13px}.msb-listen{width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:#ffffff0f;color:var(--mist);cursor:pointer}.msb-listen[data-playing=true]{color:var(--bone);border-color:#8052ff8c;background:#8052ff2e;animation:preview-pulse 1.6s ease-in-out infinite}.party-slot{bottom:calc(24px + env(safe-area-inset-bottom))}.party-slot-a{left:14px}.party-slot-b{right:14px}.party-button{width:116px;height:116px;gap:6px}.party-tag{font-size:48px}.party-label{font-size:11px}.party-key{display:none}.captions{width:calc(100vw - 28px);bottom:calc(158px + env(safe-area-inset-bottom));padding:16px 18px;gap:14px;border-radius:20px}.caption-text{font-size:15px}.caption-chip{font-size:10px;margin-bottom:4px}.hint-toast{bottom:auto;top:calc(106px + env(safe-area-inset-top));max-width:calc(100vw - 32px);white-space:normal;text-align:center;font-size:12px;padding:8px 16px}.phase-tracker{top:calc(62px + env(safe-area-inset-top));height:34px;padding:0 14px;gap:10px}.phase-tick{width:14px}.phase-label{font-size:10px;letter-spacing:.14em}.summary-overlay{padding:14px;padding-top:calc(14px + env(safe-area-inset-top));padding-bottom:calc(14px + env(safe-area-inset-bottom))}.summary-panel{padding:26px 22px 24px;border-radius:22px;max-height:100%}.sum-title{font-size:26px}.sum-positions{grid-template-columns:1fr;gap:0}}