:root{--page: #17100f;--paper: #f3e9d6;--paper-dim: #e4d6bc;--ink: #2b2620;--ink-soft: #5c5348;--accent: #8f3f2b;--gold: #c9a35c}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;background:var(--page);font-family:Poppins,system-ui,sans-serif;color:var(--paper)}#stage{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}.topbar{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px max(18px,env(safe-area-inset-right)) 12px max(18px,env(safe-area-inset-left));z-index:10;pointer-events:none}.topbar>*{pointer-events:auto}.brand{display:flex;align-items:center;gap:10px;min-width:0}.brand .home{display:flex;align-items:center;gap:8px;color:var(--paper);text-decoration:none;font-weight:500;font-size:.92rem;opacity:.9}.brand .home:hover{opacity:1}.brand .home img{width:26px;height:26px;object-fit:contain}.brand .tld{color:var(--gold);font-weight:600}.brand .sep{opacity:.4}.brand .crumb{font-size:.98rem;font-weight:600;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.tag{font-size:.78rem;font-weight:300;opacity:.65;text-align:center;flex:1}.how-link{font-size:.8rem;font-weight:500;color:var(--paper);text-decoration:none;border:1px solid rgba(243,233,214,.25);border-radius:999px;padding:6px 14px;background:#17100f8c;white-space:nowrap}.how-link:hover{border-color:var(--gold);color:var(--gold)}#panel{position:fixed;top:64px;right:14px;width:248px;max-height:calc(100vh - 88px);overflow-y:auto;background:var(--paper);color:var(--ink);border-radius:12px;border:2px solid rgba(43,38,32,.85);box-shadow:0 10px 30px #00000073;padding:4px 14px 14px;z-index:20;scrollbar-width:thin}#panel.hidden{display:none}.panel-section{padding-top:12px}.panel-section+.panel-section{margin-top:12px;border-top:1px dashed rgba(43,38,32,.3)}.panel-section h3{font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;font-weight:600;color:var(--ink-soft);margin-bottom:8px}.chips{display:flex;flex-wrap:wrap;gap:6px}.chips button{font-family:inherit;font-size:.78rem;padding:4px 10px;border-radius:999px;border:1.5px solid rgba(43,38,32,.6);background:transparent;color:var(--ink);cursor:pointer;transition:background .15s ease,color .15s ease}.chips button:hover{background:#2b26201a}.chips button.active{background:var(--ink);color:var(--paper)}.slider{display:block;margin-bottom:7px}.slider-head{display:flex;justify-content:space-between;align-items:baseline;font-size:.78rem;font-weight:500}.slider-head .ends{font-size:.62rem;color:var(--ink-soft);font-weight:400}.slider input[type=range]{width:100%;height:20px;accent-color:var(--accent);cursor:pointer}.perf-row{display:flex;gap:8px}.perf-row button{flex:1;font-family:inherit;font-size:.85rem;font-weight:600;padding:8px 10px;border-radius:8px;border:2px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}.perf-row button.perform{background:var(--accent);border-color:var(--accent);color:var(--paper)}.perf-row button:hover{filter:brightness(1.1)}.hud-transport{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translate(-50%);display:flex;gap:8px;z-index:16}.hud-transport .t-btn{font-family:inherit;font-size:.86rem;font-weight:600;color:var(--paper);background:#17100fd1;border:1px solid rgba(243,233,214,.3);border-radius:999px;padding:9px 18px;min-height:44px;cursor:pointer;white-space:nowrap;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.hud-transport .t-btn.play{background:var(--accent);border-color:var(--accent)}.hud-transport .t-btn.playing{background:#17100fe6;border-color:var(--gold);color:var(--gold)}.hud-transport .t-btn:hover{filter:brightness(1.12)}.hud-help{position:fixed;left:50%;bottom:70px;transform:translate(-50%);display:flex;gap:16px;background:#17100fd1;border:1px solid rgba(243,233,214,.25);border-radius:999px;padding:7px 18px;font-size:.74rem;font-weight:300;z-index:15;transition:opacity 1.2s ease;white-space:nowrap}.hud-help b{font-weight:600;color:var(--gold)}.hud-help.faded{opacity:0;pointer-events:none}#panel-toggle{position:fixed;top:12px;right:14px;z-index:30;display:none;font-family:inherit;font-size:.8rem;font-weight:600;padding:6px 12px;border-radius:999px;border:1.5px solid rgba(243,233,214,.5);background:#17100fcc;color:var(--paper);cursor:pointer}@media(max-width:900px){.tag{display:none}#panel-toggle{display:block}#panel{top:52px}#panel:not(.open){display:none}}@media(max-width:720px){.topbar{gap:8px}.how-link{position:fixed;top:12px;right:56px;z-index:31;padding:6px 9px}.how-link .label,#panel-toggle .label{display:none}#panel-toggle{padding:6px 9px}#panel{width:min(340px,calc(100vw - 20px))}.hud-help{gap:10px;max-width:calc(100vw - 24px);bottom:calc(max(16px,env(safe-area-inset-bottom)) + 58px);justify-content:center;flex-wrap:wrap;white-space:normal;text-align:center;padding:7px 14px}.hud-transport .t-btn{font-size:.82rem;padding:9px 14px}#t-xray .t-label{display:none}#panel.open~#help,#panel.open~#transport{display:none}}