:root{--letterbox:#2b2320;--ink:#3a2e28;--paper:#fffcf5e0;--accent:#e5a74f;--nina:#d5689a;--hunter:#4f7040;--bird:#e0a21a;--title-font:"Cinzel Decorative", Georgia, serif;--text-font:"Nunito", "Trebuchet MS", system-ui, sans-serif}*{box-sizing:border-box}html,body{background:var(--letterbox);height:100%;font-family:var(--text-font);margin:0;overflow:hidden}#app{place-items:center;display:grid;position:fixed;inset:0}.stage{aspect-ratio:16/9;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:#e3cdb4;width:min(100vw,177.778vh);position:relative;overflow:hidden;container-type:inline-size}.stage>svg.world{width:100%;height:100%;position:absolute;inset:0}.overlay{pointer-events:none;position:absolute;inset:0}.caption{background:var(--paper);max-width:78%;color:var(--ink);text-align:center;pointer-events:none;border-radius:1.1em;padding:.7em 1.3em;font-size:2.6cqw;font-weight:600;line-height:1.3;position:absolute;top:3.5%;left:50%;translate:-50%;box-shadow:0 .3cqw 1.2cqw #3c28141f}.caption.who-nina{box-shadow:inset 0 -.35cqw 0 var(--nina), 0 .3cqw 1.2cqw #3c28141f}.caption.who-hunter{box-shadow:inset 0 -.35cqw 0 var(--hunter), 0 .3cqw 1.2cqw #3c28141f}.caption.who-bird{box-shadow:inset 0 -.35cqw 0 var(--bird), 0 .3cqw 1.2cqw #3c28141f;font-style:italic}.caption.thought{background:#ffffffb8;border:.2cqw dashed #3a2e2859;font-style:italic}.caption.who-sfx{box-shadow:none;letter-spacing:.05em;color:#2d2320;-webkit-text-stroke:.15cqw #fff;paint-order:stroke fill;background:0 0;font-size:5cqw;font-weight:800}.controls{opacity:.35;align-items:center;gap:1cqw;transition:opacity .3s;display:flex;position:absolute;bottom:2.5%;left:1.5%;right:1.5%}.stage:hover .controls,.controls:focus-within{opacity:1}@media (hover:none){.controls{opacity:.8}}.ctl{background:var(--paper);min-width:max(44px,4.2cqw);height:max(44px,4.2cqw);color:var(--ink);font:700 max(14px, 1.5cqw) var(--text-font);cursor:pointer;border:0;border-radius:999px;flex:none;padding:0 1.2cqw}.ctl:hover{background:#fff}.ctl.play.on{background:var(--accent);color:#fff}.ctl.music.off{opacity:.45;text-decoration:line-through}.progress{flex:1;gap:.35cqw;height:max(10px,.9cqw);display:flex}.seg{cursor:pointer;background:#fffcf58c;border:0;border-radius:999px;padding:0;position:relative;overflow:hidden}.seg .fill{background:var(--accent);width:0;transition:width .4s;position:absolute;inset:0 auto 0 0}.seg.current{outline:2px solid #fff}.ctl.menu{white-space:nowrap;font-size:max(13px,1.4cqw)}.seg-tip{color:#fff;font:700 max(12px, 1.3cqw) var(--text-font);white-space:nowrap;pointer-events:none;background:#2b2320e0;border-radius:999px;padding:.45em .9em;position:absolute;translate:-50%}.seg-tip[hidden]{display:none}.scene-chip{color:#fff;font:700 max(11px, 1.2cqw) var(--text-font);opacity:0;pointer-events:none;background:#2b23208c;border-radius:999px;padding:.35em .9em;transition:opacity .5s,translate .5s;position:absolute;top:3%;left:1.5%;translate:0 -6px}.scene-chip.show{opacity:1;translate:0}.scene-menu{background:#2b232073;place-items:center;display:grid;position:absolute;inset:0}.scene-menu[hidden]{display:none}.scene-panel{width:min(92%,900px);max-height:86%;color:var(--ink);background:#fffaf2;border-radius:1.4cqw;flex-direction:column;display:flex;overflow:hidden;box-shadow:0 1cqw 3cqw #28140a59}.scene-head{justify-content:space-between;align-items:center;padding:1.2cqw 1.6cqw .6cqw;display:flex}.scene-head h2{font:800 max(18px, 2.2cqw) var(--text-font);margin:0}.scene-list{grid-template-columns:repeat(auto-fill,minmax(max(200px,24cqw),1fr));gap:.7cqw;padding:.6cqw 1.6cqw 1.6cqw;display:grid;overflow-y:auto}.scene-item{min-height:44px;color:var(--ink);font:700 max(13px, 1.45cqw) var(--text-font);text-align:left;cursor:pointer;background:#f3e6d6;border:0;border-radius:.8em;align-items:center;gap:.8em;padding:.5em .8em;display:flex}.scene-item:hover{background:#fdeccd}.scene-item.current{outline:3px solid var(--accent);background:#fff}.scene-item .num{background:var(--accent);color:#fff;border-radius:50%;flex:none;place-items:center;width:2em;height:2em;display:grid}.scene-item .name{flex:1}.scene-item .soon{background:#3a2e281a;border-radius:999px;flex:none;padding:.15em .6em;font-size:.75em;font-weight:600}.start{background:radial-gradient(#fff8eb8c,#5a3c2859);flex-direction:column;justify-content:center;align-items:center;gap:2.5cqw;display:flex;position:absolute;inset:0}.start[hidden]{display:none}.start-title{text-align:center;color:#fff;text-shadow:0 .25cqw 1cqw #3c1e0a8c}.start-title h1{font:700 7cqw/1 var(--title-font);margin:0}.start-title h2{font:600 2.8cqw var(--text-font);margin:.6cqw 0 0}.start-play{background:var(--accent);color:#fff;cursor:pointer;border:0;border-radius:50%;width:11cqw;height:11cqw;padding-left:1cqw;font-size:4.5cqw;transition:transform .2s;box-shadow:0 .6cqw 2cqw #5a320a59}.start-play:hover{transform:scale(1.06)}.start-langs{gap:1cqw;display:flex}.chip{background:var(--paper);min-height:44px;color:var(--ink);font:700 max(14px, 1.6cqw) var(--text-font);cursor:pointer;border:0;border-radius:999px;padding:.6cqw 1.6cqw}.chip.on{outline:.25cqw solid var(--accent);background:#fff}.title-card{color:#fff;text-shadow:0 .25cqw .8cqw #3c1e0a73;position:absolute;bottom:10%;left:3%}.title-card h1{font:700 6.2cqw/1 var(--title-font);margin:0}.title-card h2{font:600 2.8cqw var(--text-font);margin:.4cqw 0 0 .4cqw}.title-card .letter{white-space:pre;display:inline-block}.draft-tag{color:#fff;background:#00000059;border-radius:999px;padding:.3cqw .9cqw;font-size:max(11px,1.1cqw);position:absolute;top:2%;right:1.5%}.lottie-layer{pointer-events:none;position:absolute}.end-card{pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}.end-card h1{color:#fff;font:700 9cqw/1 var(--title-font);text-shadow:0 .3cqw 1cqw #3c1e0a80;margin:0 0 18cqw}.end-card .letter{white-space:pre;display:inline-block}
