:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #050505; }
body { display: grid; place-items: center; }
button, input { font: inherit; }
.room { position: relative; width: 100vw; height: 100dvh; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 50% 24%, #303943 0, #171b20 46%, #050505 100%); box-shadow: 0 0 80px rgba(0,0,0,.7); }
.room:not(.connected) .composer { opacity: 0; visibility: hidden; pointer-events: none; }
.director-video, .avatar { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; background: #050505; }
.director-video, .avatar video, .avatar canvas { width: 100% !important; height: 100% !important; object-fit: contain !important; display: block; }
.shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.22), transparent 20%, transparent 62%, rgba(0,0,0,.54)); }
.status { position: absolute; z-index: 5; top: max(18px, env(safe-area-inset-top)); left: max(18px, env(safe-area-inset-left)); display: flex; align-items: center; gap: 8px; padding: 8px 12px; color: rgba(255,255,255,.92); background: rgba(13,13,13,.48); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; backdrop-filter: blur(12px); font-size: 13px; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #999; box-shadow: 0 0 0 3px rgba(255,255,255,.08); }
.status[data-online="true"]::before { background: #46e28a; box-shadow: 0 0 9px #46e28a; }
.top-actions { position: absolute; z-index: 5; top: max(18px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right)); display: flex; gap: 8px; }
.room > .close { position: absolute; z-index: 5; top: max(18px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right)); }
.round-button { width: 36px; height: 36px; padding: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; color: white; background: rgba(13,13,13,.48); backdrop-filter: blur(12px); font-size: 20px; line-height: 1; cursor: pointer; }
.close { font-size: 23px; }
.danmaku { position: absolute; z-index: 4; left: max(18px, env(safe-area-inset-left)); bottom: 104px; width: min(92%, 680px); height: min(34vh, 360px); display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 7px; overflow: hidden; pointer-events: none; mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 100%); }
.bullet { flex: 0 0 auto; max-width: 100%; padding: 8px 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; background: rgba(15,15,15,.52); border: 1px solid rgba(255,255,255,.1); border-radius: 9px; box-shadow: 0 5px 18px rgba(0,0,0,.15); backdrop-filter: blur(8px); font-size: clamp(14px, 1.8vw, 18px); font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.45); animation: comment-in .28s ease-out both; }
@keyframes comment-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.composer { position: absolute; z-index: 5; left: max(24px, env(safe-area-inset-left)); right: max(24px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); transition: opacity .2s ease; }
.composer input { width: 100%; height: 58px; padding: 0 68px 0 24px; border: 1px solid rgba(255,255,255,.42); border-radius: 20px; outline: 0; color: #fff; background: rgba(30,30,30,.25); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 12px 32px rgba(0,0,0,.18); backdrop-filter: blur(14px); font-size: 17px; }
.composer input::placeholder { color: rgba(255,255,255,.7); }
.composer input:focus { border-color: rgba(255,255,255,.78); background: rgba(20,20,20,.36); }
.composer input:disabled { opacity: .48; }
.send { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; color: #fff; background: #d52c59; box-shadow: 0 6px 16px rgba(0,0,0,.26); font-size: 19px; line-height: 1; cursor: pointer; }
.send:disabled { opacity: .45; cursor: not-allowed; }
.entry { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; background: radial-gradient(circle at center, rgba(72,70,66,.32), rgba(7,7,7,.74)); backdrop-filter: blur(5px); transition: opacity .35s ease, visibility .35s ease; }
.entry.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.entry.direct-entry .avatar-list { display: none; }
.entry.direct-entry .direct-enter:not([hidden]) { display: block; }
.sound-unlock { position:absolute; z-index:8; left:50%; top:50%; transform:translate(-50%,-50%); padding:13px 22px; border:1px solid rgba(255,255,255,.35); border-radius:999px; color:#fff; background:rgba(12,12,14,.72); box-shadow:0 14px 40px rgba(0,0,0,.4); backdrop-filter:blur(14px); font-weight:700; cursor:pointer; }
.sound-unlock[hidden] { display:none; }
.enter { min-width: 172px; padding: 15px 28px; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; color: #fff; background: rgba(255,255,255,.16); box-shadow: 0 15px 48px rgba(0,0,0,.35); backdrop-filter: blur(16px); font-weight: 700; font-size: 18px; cursor: pointer; transition: transform .18s ease, background .18s ease; }
.enter:hover { transform: translateY(-2px); background: rgba(255,255,255,.24); }
.enter:disabled { cursor: wait; opacity: .7; }
@media (max-width: 899px) { html, body { position: fixed; inset: 0; width: 100%; height: 100%; } .room { height: 100%; } }

.agent-demo .bottom-controls-agent { position:absolute; z-index:5; left: max(16px,env(safe-area-inset-left)); right:max(16px,env(safe-area-inset-right)); bottom:max(12px,env(safe-area-inset-bottom)); display:flex; gap:10px; align-items:center; }
.agent-demo .bottom-controls-agent .composer { position:relative; inset:auto; flex:1; min-width:0; }
.agent-demo .play-me { height:58px; padding:0 18px; border:1px solid rgba(255,255,255,.24); border-radius:19px; color:#fff; background:rgba(18,18,20,.48); backdrop-filter:blur(14px); cursor:pointer; white-space:nowrap; }
.agent-demo .dance-video { position:absolute; inset:0; z-index:2; width:100%; height:100%; object-fit:contain; background:#050505; }
.agent-demo .video-fade { position:absolute; inset:0; z-index:3; pointer-events:none; background:#000; opacity:0; transition:opacity .55s ease-in-out; }.agent-demo .video-fade.is-black { opacity:1; }
.agent-demo .avatar-picker { background:radial-gradient(circle at center,rgba(45,48,54,.5),rgba(7,7,7,.9)); }
.avatar-list { width:min(92%,420px); display:grid; gap:12px; }.avatar-list h1 { margin:0 0 8px; color:#fff; text-align:center; font-size:24px; }
#avatar-cards { display:grid; gap:12px; }
.avatar-card { display:flex; align-items:center; gap:14px; width:100%; padding:10px; border:1px solid rgba(255,255,255,.18); border-radius:16px; color:#fff; background:rgba(20,20,22,.62); text-align:left; cursor:pointer; backdrop-filter:blur(14px); }.avatar-card:hover { background:rgba(255,255,255,.16); }.avatar-card img { width:58px; height:58px; border-radius:12px; object-fit:cover; }.avatar-card span { display:grid; gap:4px; }.avatar-card strong { font-size:17px; }.avatar-card small { color:rgba(255,255,255,.65); }
.avatar-card.is-loading { opacity:.72; cursor:wait; }.avatar-card.is-loading::after { content:""; width:16px; height:16px; margin-left:auto; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:avatar-spin .8s linear infinite; }.avatar-picker.is-loading::after { content:"Loading..."; position:absolute; left:50%; bottom:12%; transform:translateX(-50%); color:rgba(255,255,255,.78); font-size:13px; letter-spacing:.08em; }
@keyframes avatar-spin { to { transform: rotate(360deg); } }
.dance-sheet[hidden] { display:none; }.dance-sheet { position:absolute; inset:0; z-index:20; }.dance-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.58); backdrop-filter:blur(5px); }.dance-panel { position:absolute; right:16px; bottom:92px; width:min(92%,360px); padding:22px; border:1px solid rgba(255,255,255,.2); border-radius:22px; background:rgba(25,25,28,.92); box-shadow:0 20px 60px rgba(0,0,0,.45); }.dance-panel p { margin:0; color:rgba(255,255,255,.55); font-size:12px; }.dance-panel h2 { margin:5px 0 16px; font-size:24px; }.dance-close { position:absolute; top:12px; right:14px; border:0; color:#fff; background:none; font-size:24px; cursor:pointer; }.dance-option { display:flex; align-items:center; gap:12px; width:100%; margin-top:10px; padding:14px; border:1px solid rgba(255,255,255,.14); border-radius:14px; color:#fff; background:rgba(255,255,255,.08); text-align:left; cursor:pointer; }.dance-option span { flex:1; font-weight:700; }.dance-option b { font-size:20px; }
.nickname-button { position:absolute; z-index:12; top:max(18px,env(safe-area-inset-top)); right:max(18px,env(safe-area-inset-right)); max-width:160px; padding:8px 14px; overflow:hidden; border:1px solid rgba(255,255,255,.2); border-radius:999px; color:#fff; background:rgba(13,13,13,.5); backdrop-filter:blur(12px); text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.nickname-dialog[hidden] { display:none; }.nickname-dialog { position:absolute; inset:0; z-index:30; display:grid; place-items:center; }.nickname-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.68); backdrop-filter:blur(7px); }.nickname-panel { position:relative; width:min(88%,360px); display:grid; gap:12px; padding:24px; border:1px solid rgba(255,255,255,.18); border-radius:20px; background:rgba(25,25,28,.96); box-shadow:0 24px 70px rgba(0,0,0,.5); }.nickname-panel h2,.nickname-panel p { margin:0; }.nickname-panel p { color:rgba(255,255,255,.58); font-size:13px; }.nickname-panel input { width:100%; height:48px; padding:0 14px; border:1px solid rgba(255,255,255,.25); border-radius:12px; outline:0; color:#fff; background:rgba(255,255,255,.08); }.nickname-panel input:focus { border-color:rgba(255,255,255,.7); }.nickname-panel button { height:46px; border:0; border-radius:12px; color:#161316; background:#fff; font-weight:750; cursor:pointer; }