@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');
:root{--gold:#d7b77a;--gold-bright:#f1d7a0;--muted:#858078;--panel:#111211;--line:rgba(215,183,122,.18)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#0c0d0c;color:#f1eee7;font-family:Inter,"Microsoft YaHei",sans-serif}
button{font:inherit;cursor:pointer}.app-shell{height:100vh;min-height:680px;display:grid;grid-template-columns:350px minmax(0,1fr);background:#0b0c0b}
.sidebar{position:relative;z-index:3;background:linear-gradient(160deg,#171816,#10110f 68%);border-right:1px solid rgba(215,183,122,.17);padding:27px 25px 20px;overflow-y:auto;box-shadow:14px 0 45px #0003}
.brand-mark{height:34px;width:34px;border:1px solid #b9995e;color:var(--gold);display:grid;place-items:center;font-family:"Noto Serif SC",serif;font-size:19px;margin-bottom:22px;box-shadow:inset 0 0 13px #d7b77a12}
.eyebrow,.stage-kicker{font-size:9px;letter-spacing:2.2px;color:#a68c5e;margin:0 0 8px}.sidebar h1{font-family:"Noto Serif SC",serif;font-size:29px;font-weight:500;letter-spacing:2px;margin:0 0 13px;color:#f5eddd}.intro{font-size:11px;line-height:1.95;color:#aaa69c;margin:0 0 24px;max-width:280px}
.section-label{font-size:11px;letter-spacing:.5px;color:#d8d0bf;display:flex;align-items:center;gap:8px;margin-bottom:11px}.live-dot,.online-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#b89b63;box-shadow:0 0 10px #c9a76566}.camera-box{height:142px;position:relative;overflow:hidden;background:radial-gradient(ellipse at center,#252620,#0b0c0b 75%);border:1px solid #3a3529;border-radius:3px}
#camera{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);opacity:.78}#cameraOverlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transform:scaleX(-1)}
.camera-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;background:#10110fe8;color:#a8a092;font-size:10px}.camera-placeholder small{font-size:9px;color:#69665e}.camera-icon{font-size:23px;color:#c7a96d}.camera-status{position:absolute;bottom:7px;left:8px;font-size:8px;letter-spacing:1.3px;color:#e0c68d;background:#11130fbd;padding:4px 6px}
.primary-button{width:100%;height:36px;border:1px solid #b79a62;background:linear-gradient(90deg,#b99a60,#d1b57c);color:#171610;font-size:11px;font-weight:600;letter-spacing:.4px;margin-top:9px;text-align:left;padding:0 12px;display:flex;align-items:center;justify-content:space-between}.primary-button:hover{filter:brightness(1.1)}
.stats-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:13px}.stat-card{background:#191a17;border:1px solid #2e2d26;padding:10px 11px 9px;min-height:76px}.stat-name{font-size:10px;color:#9f9a8f;display:block;margin-bottom:5px}.stat-card strong{font-family:"Noto Serif SC",serif;font-size:23px;font-weight:500;color:#e6ca91;line-height:1.1}.stat-card strong span{font-size:11px;color:#777166;margin-left:3px}.stat-card small{display:block;font-size:7px;letter-spacing:1.3px;color:#69665d;margin-top:4px}
.panel-divider{height:1px;background:var(--line);margin:17px 0}.tiny-tag{margin-left:auto;color:#777064;font-size:8px;letter-spacing:1.1px}.music-button{width:100%;height:51px;background:#191a17;border:1px solid #302e26;color:#e8e0cf;display:flex;align-items:center;gap:11px;text-align:left;padding:0 11px}.music-symbol{color:var(--gold);font-size:19px;width:22px}.music-button b{font-size:10px;font-weight:500;display:block}.music-button small{display:block;font-size:9px;color:#817c71;margin-top:4px}.toggle{margin-left:auto;width:27px;height:15px;border-radius:12px;background:#383831;padding:2px;transition:.2s}.toggle:after{content:"";display:block;width:11px;height:11px;border-radius:50%;background:#999184;transition:.2s}.toggle.on{background:#987d4d}.toggle.on:after{transform:translateX(12px);background:#f2d9a4}
.gesture-heading{margin-top:20px}.gesture-list{display:flex;flex-direction:column;gap:12px}.gesture-item{display:flex;align-items:center;gap:10px}.gesture-emoji{width:29px;height:29px;flex:none;border:1px solid #3c3528;color:#d6b77b;background:#1a1a16;display:grid;place-items:center;font-size:15px}.gesture-item b{display:block;font-size:10px;font-weight:500;color:#ddd5c5;margin-bottom:4px}.gesture-item small{display:block;font-size:9px;color:#827d72}.gesture-item kbd{margin-left:auto;font-size:7px;letter-spacing:.7px;color:#7e7053;border:1px solid #383125;padding:4px 5px}.privacy-note{font-size:8px;color:#6f6d63;margin:19px 0 0;letter-spacing:.2px}
.stage{position:relative;min-width:0;overflow:hidden;background:radial-gradient(ellipse at 55% 46%,#29251c 0,#171714 37%,#0d0e0d 76%)}#scene{position:absolute;inset:0;z-index:0}#scene canvas{display:block;width:100%;height:100%}.scene-vignette{pointer-events:none;position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at 54% 48%,transparent 20%,#08090845 75%,#080908b8 130%)}
.stage-top{position:absolute;z-index:2;top:28px;left:35px;right:35px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}.stage-kicker{font-size:8px;letter-spacing:2px}.stage-top h2{font-family:"Noto Serif SC",serif;font-weight:400;font-size:17px;letter-spacing:1px;margin:6px 0;color:#e4dac7}.top-right{display:flex;align-items:center;gap:8px;font-size:9px;color:#8f897d}.top-divider{height:13px;width:1px;background:#5a5141;margin:0 6px}
.scene-caption{position:absolute;z-index:2;left:37px;bottom:84px;display:flex;gap:14px;align-items:flex-start;pointer-events:none}.caption-line{height:58px;width:2px;background:linear-gradient(#e1c58b,transparent)}.scene-caption small{font-size:8px;letter-spacing:2px;color:#ad9565}.scene-caption h3{font-family:"Noto Serif SC",serif;font-weight:500;letter-spacing:1px;font-size:22px;margin:7px 0 5px}.scene-caption p{font-size:10px;color:#a7a092;letter-spacing:.6px;margin:0}
.scene-controls{position:absolute;z-index:3;right:36px;bottom:84px;display:flex;gap:16px;align-items:center;color:#969084;font-size:9px}.control-hint i{font-style:normal;color:#d1b67b;font-size:14px;margin-right:4px}.scene-controls button{background:#191a17a8;border:1px solid #514632;color:#c9b98f;font-size:9px;padding:8px 11px}.scene-controls button:hover{background:#29261e}
.scene-index{position:absolute;z-index:2;right:38px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:9px;color:#726a58;font-size:10px;writing-mode:horizontal-tb}.scene-index #sceneNumber{color:#dfc48c;font-size:17px}.index-rule{height:1px;width:35px;background:#65583e}.bottom-note{position:absolute;z-index:2;left:37px;right:37px;bottom:23px;border-top:1px solid #ffffff13;padding-top:12px;font-size:7px;letter-spacing:1.6px;color:#5f5d54;display:flex;justify-content:space-between;pointer-events:none}.interaction-toast{position:absolute;z-index:5;top:90px;left:50%;transform:translate(-50%,-8px);padding:9px 15px;border:1px solid #b99b5c;background:#19170fdd;color:#ecd39a;font-size:10px;letter-spacing:.7px;opacity:0;transition:.25s;pointer-events:none}.interaction-toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){.app-shell{grid-template-columns:300px minmax(0,1fr)}.sidebar{padding:22px 19px}.scene-controls{right:20px;gap:8px}.stage-top{left:22px;right:20px}.scene-caption{left:22px}.bottom-note{left:22px;right:22px}}
@media(max-width:650px){html,body{overflow:auto}.app-shell{height:auto;min-height:100vh;display:flex;flex-direction:column}.sidebar{overflow:visible;border-right:0;border-bottom:1px solid var(--line)}.stage{height:68vh;min-height:480px}.stage-top{top:18px}.scene-caption{bottom:70px}.scene-controls{bottom:22px;left:20px;right:20px;justify-content:flex-end}.bottom-note{display:none}.scene-index{top:50%;right:18px}}