.practice-dock{position:fixed;left:var(--pad);bottom:max(20px,env(safe-area-inset-bottom));z-index:21;display:flex;background:rgba(10,10,18,.88);border:1px solid rgba(250,249,247,.3);border-radius:4px;box-shadow:0 6px 24px #0003;backdrop-filter:blur(14px)}
.practice-dock button{min-height:46px;padding:0 18px;border:0;background:none;color:var(--ink);font:400 12px/1.3 var(--mono);cursor:pointer}
.practice-dock button:hover{color:var(--gold)}
.practice-open span{color:var(--gold);padding:0 5px}
.practice-dock .practice-toggle{border-left:1px solid var(--rule);color:var(--gold);min-width:74px}
.experience{position:fixed;inset:0;margin:0;width:100%;max-width:none;height:100vh;height:100dvh;max-height:none;padding:0;border:0;border-radius:0;background:#11121a;color:var(--ink);overflow:hidden;color-scheme:dark}
.experience[open]{display:grid;grid-template-rows:auto auto minmax(0,1fr)}
.experience::backdrop{background:#060810dd}
.experience-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 32px 18px;border-bottom:1px solid var(--rule)}
.experience-head h2{font-size:32px;margin-top:5px;font-weight:600}
.experience-head .label{color:var(--gold);font-size:10px}
.experience-head button{background:#ffffff08;border:1px solid var(--rule);border-radius:50%;color:var(--ink);font-size:28px;line-height:1;width:44px;height:44px;flex-shrink:0;cursor:pointer}
.scene-toolbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,360px);gap:24px;padding:18px 32px;border-bottom:1px solid var(--rule)}
.scene-toolbar .label,.experience-section>.label{display:flex;justify-content:space-between;gap:12px;color:#bdc2c4;font-size:10px;margin-bottom:8px}
.experience select,.experience input[type=search]{display:block;width:100%;min-width:0;min-height:46px;border:1px solid #595961;border-radius:5px;padding:10px 12px;background:#1b1c24;color:var(--ink);font:400 14px/1.4 var(--text);text-overflow:ellipsis}
.experience input[type=search]::placeholder{color:#a9adb6}
.experience-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;min-height:0;overflow:hidden}
.scene-browser{min-height:0;overflow:auto;overscroll-behavior:contain;padding:24px 32px 40px;scrollbar-gutter:stable}
.scene-choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:22px;align-items:start}
.scene-choices button{padding:0;text-align:left;border:2px solid transparent;border-radius:7px;background:#1b1d27;color:var(--ink);overflow:hidden;cursor:pointer;position:relative;min-width:0;transition:border-color .15s}
.scene-choices button[hidden]{display:none}
.scene-choices button[aria-pressed=true]{border-color:var(--gold);background:#29251c}
.scene-choices button[aria-pressed=true]::after{content:'✓';position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;background:var(--gold);color:#11121a;text-align:center;font:700 18px/26px var(--text);box-shadow:0 2px 8px #0008}
.scene-choices button:hover{border-color:#a9925a}
.scene-choices img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#090a10}
.scene-card-caption{display:block;padding:12px 14px 14px}
.scene-card-title{display:block;font:600 15px/1.4 var(--text)}
.scene-card-setting{display:block;margin-top:5px;color:#b1b6ba;font:400 12px/1.4 var(--text)}
.experience-sidebar{min-height:0;overflow:auto;border-left:1px solid var(--rule);padding:24px;background:#15161f;overscroll-behavior:contain}
.scene-preview{width:100%;aspect-ratio:16/9;object-fit:contain;background:#080a10;border-radius:5px;margin-bottom:18px}
.selected-scene .label{font-size:10px;color:var(--gold)}
.scene-selected-title{font:600 17px/1.4 var(--text);margin:6px 0 16px}
.scene-use{width:100%;min-height:44px;border:1px solid var(--gold);border-radius:4px;background:var(--gold);color:#11121a;font:600 14px var(--text);padding:10px 16px;cursor:pointer}
.scene-use:disabled{opacity:.5;cursor:wait}
.music-panel{margin-top:24px;padding-top:24px;border-top:1px solid var(--rule)}
.music-panel summary{display:none}
.experience-note{font:400 12px/1.6 var(--text);color:#b1b6ba;margin:10px 0 0}
.music-controls{display:flex;gap:8px;margin:14px 0}
.music-controls button{min-height:44px;border:1px solid #66636a;border-radius:4px;background:none;color:var(--ink);font:500 13px var(--text);padding:0 12px;cursor:pointer}
.music-controls button:first-child{background:var(--gold);color:#11121a;border-color:var(--gold);flex:1}
.music-controls button:disabled{opacity:.4;cursor:default}
.volume-label{display:flex;justify-content:space-between;font:400 12px var(--text);color:#bdc2c4}
.experience input[type=range]{width:100%;height:32px;accent-color:var(--gold);cursor:pointer;margin:2px 0 0}
.music-source{font:400 11px/1.7 var(--text);color:#d4a23e;text-underline-offset:3px;display:inline-block;margin-top:6px}
.music-source[hidden],#sceneEmpty[hidden]{display:none}
.remember-note{padding-top:16px;border-top:1px solid var(--rule);margin-top:20px;font-size:11px}
.enter-img canvas[hidden]{display:none}
body:has(.experience[open]){overflow:hidden}
.foot{padding-bottom:110px}
@media(min-width:1800px){.experience-body{grid-template-columns:minmax(0,1fr) 380px}.scene-choices{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}}
@media(max-width:1000px) and (min-width:761px){.experience-body{grid-template-columns:minmax(0,1fr) 280px}.scene-browser{padding:20px}.experience-sidebar{padding:20px}.scene-choices{gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}}
@media(max-width:760px){
.experience-head{padding:max(12px,env(safe-area-inset-top)) 16px 12px}.experience-head h2{font-size:25px}.experience-head .label{font-size:9px}
.scene-toolbar{grid-template-columns:minmax(0,1fr);gap:10px;padding:12px 16px}.scene-jump{display:none}
.experience-body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
.scene-browser{padding:16px 16px 24px;scrollbar-gutter:auto}.scene-choices{grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:16px}
.experience-sidebar{border-left:0;border-top:1px solid var(--rule);padding:12px 16px max(12px,env(safe-area-inset-bottom));max-height:45dvh;overflow:auto}
.scene-preview,.remember-note{display:none}.selected-scene{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px}.scene-selected-title{font-size:13px;margin:4px 0 0}.selected-scene .label{font-size:9px}.scene-use{font-size:13px;padding:10px 14px;width:auto}
.music-panel{margin-top:10px;padding-top:8px}.music-panel summary{display:list-item;cursor:pointer;font:500 13px/1.5 var(--text);min-height:32px;padding:5px 0;color:#d4a23e}.music-panel[open] summary{margin-bottom:8px}
.practice-dock{left:16px}.enter-cue{left:auto;right:20px;transform:none;bottom:24px}.practice-dock button{padding:0 13px}
}
@media(prefers-reduced-motion:reduce){.scene-choices button{transition:none}}