:root{--ink:#f4e7cd;--ink-dim:#cdb894;--gold:#d9a441;--gold-hi:#f2c76b;--panel:#160d07bd;--line:#d9a44147;--serif:var(--font-serif), "Cormorant Garamond", "Iowan Old Style", Georgia, serif;--sans:var(--font-sans), "Inter", system-ui, -apple-system, "Segoe UI", sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}html,body{min-height:100%;color:var(--ink);font-family:var(--sans);background:#0b0604;margin:0;font-size:14px}#stage{cursor:crosshair;width:100vw;height:100vh;display:block;position:fixed;inset:0}#video{display:none}.panel{background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(10px)saturate(1.2);border-radius:14px;box-shadow:0 20px 60px #00000073}.intro{width:min(420px,100vw - 32px);padding:28px 28px 22px;transition:opacity .5s,transform .5s;position:fixed;top:50%;left:max(16px,4vw);transform:translateY(-50%)}.intro.gone{opacity:0;pointer-events:none;transform:translate(-24px,-50%)}.eyebrow{color:var(--gold);letter-spacing:.22em;text-transform:uppercase;margin:0 0 6px;font-size:11px;font-weight:600}h1.wayang-title{font-family:var(--serif);color:#fbeed3;margin:0 0 10px;font-size:38px;font-weight:600;line-height:1.02}.lede{color:var(--ink-dim);margin:0 0 18px;line-height:1.5}.howto{gap:9px;margin:0 0 20px;padding:0;list-style:none;display:grid}.howto li{color:var(--ink);grid-template-columns:118px 1fr;gap:10px;line-height:1.4;display:grid}.howto .k{color:var(--gold-hi);padding-top:1px;font-size:12px;font-weight:600}.actions{flex-wrap:wrap;gap:10px;display:flex}.btn{appearance:none;border:1px solid var(--line);color:var(--ink);font:600 14px/1 var(--sans);cursor:pointer;background:#ffebc80d;border-radius:999px;padding:12px 18px;transition:background .2s,border-color .2s,transform .1s}.btn:hover{background:#ffebc81a;border-color:#d9a4418c}.btn:active{transform:translateY(1px)}.btn.primary{color:#2a1606;background:linear-gradient(#e7b556,#b9822c);border-color:#f0c979}.btn.primary:hover{background:linear-gradient(#f0c266,#c48d34)}.btn:disabled{opacity:.6;cursor:progress}.status-line{min-height:1.2em;color:var(--ink-dim);margin:14px 0 0;font-size:13px}.status-line.err{color:#ffb39a}.hud{pointer-events:none;flex-wrap:wrap;align-items:center;gap:14px;transition:opacity .3s;display:flex;position:fixed;bottom:16px;left:16px}.pill{background:var(--panel);border:1px solid var(--line);border-radius:999px;align-items:center;gap:8px;padding:7px 12px;font-size:12px;font-weight:500;display:inline-flex}.dot{background:#8a7a60;border-radius:50%;width:8px;height:8px}.pill.live .dot{background:#8fdc7a;box-shadow:0 0 8px #8fdc7a}.pill.warn .dot{background:#f0b24a;box-shadow:0 0 8px #f0b24a}.keys{color:#f4e7cdb3;text-shadow:0 1px 3px #000;margin:0;font-size:12px}kbd{min-width:18px;font:600 11px/1.4 var(--sans);text-align:center;border:1px solid #f4e7cd59;border-radius:4px;margin:0 3px 0 8px;padding:1px 5px;display:inline-block}kbd:first-child{margin-left:0}.icon-btn{border:1px solid var(--line);background:var(--panel);width:38px;height:38px;color:var(--ink);cursor:pointer;z-index:50;border-radius:50%;place-items:center;transition:opacity .3s,border-color .2s;display:grid;position:fixed;top:16px;right:16px}.icon-btn:hover{border-color:#d9a44199}.sound-btn{right:62px}.sound-btn .off,.sound-btn[aria-pressed=true] .on{display:none}.sound-btn[aria-pressed=true] .off{display:block}.settings{z-index:50;gap:12px;width:min(290px,100vw - 32px);padding:16px 18px;display:grid;position:fixed;top:62px;right:16px}.settings h2{font-family:var(--serif);margin:0;font-size:22px;font-weight:600}.settings label{color:var(--ink-dim);gap:6px;font-size:12px;display:grid}.settings label.row{color:var(--ink);align-items:center;gap:8px;display:flex}.settings select,.settings input[type=range]{width:100%;accent-color:var(--gold)}.settings select{color:var(--ink);border:1px solid var(--line);font:13px var(--sans);background:#ffebc80f;border-radius:8px;padding:7px 8px}.settings select option{background:#1e120a}.settings input[type=checkbox]{accent-color:var(--gold)}#preview-box{z-index:40;width:min(240px,38vw);transition:opacity .3s;position:fixed;bottom:16px;right:16px}#preview{aspect-ratio:16/9;border:1px solid var(--line);background:#000;border-radius:10px;width:100%;height:auto;display:block;box-shadow:0 10px 30px #00000080}.popout-btn{border:1px solid var(--line);background:var(--panel);width:30px;height:30px;color:var(--ink);cursor:pointer;opacity:0;border-radius:8px;place-items:center;transition:opacity .2s,border-color .2s;display:grid;position:absolute;top:6px;right:6px}#preview-box:hover .popout-btn,.popout-btn:focus-visible{opacity:1}.popout-btn:hover{border-color:#d9a44199}.btn.small{padding:9px 14px;font-size:13px}.toast{background:var(--panel);border:1px solid var(--line);font-family:var(--serif);color:var(--gold-hi);letter-spacing:.02em;opacity:0;pointer-events:none;white-space:nowrap;z-index:60;border-radius:999px;padding:8px 18px;font-size:20px;font-style:italic;font-weight:600;transition:opacity .4s,transform .4s;position:fixed;top:22px;left:50%;transform:translate(-50%,-8px)}.toast.show{opacity:1;transform:translate(-50%)}body.ui-hidden .toast{opacity:0}.error{z-index:70;max-width:min(480px,100vw - 32px);padding:20px 24px;line-height:1.5;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}body.ui-hidden .hud,body.ui-hidden .icon-btn,body.ui-hidden #preview-box,body.ui-hidden .settings{opacity:0;pointer-events:none}@media (max-width:640px){.intro{padding:20px;top:auto;bottom:16px;transform:none}.intro.gone{transform:translateY(24px)}h1.wayang-title{font-size:30px}.howto li{grid-template-columns:96px 1fr}.keys{display:none}}.edge-fade-top:before{content:"";pointer-events:none;z-index:5;background:linear-gradient(#0a0a0abf,#0a0a0a4d 50%,#0000);height:clamp(3rem,8vw,8rem);position:absolute;top:0;left:0;right:0}.edge-fade-bottom:after{content:"";pointer-events:none;z-index:5;background:linear-gradient(#0000,#0a0a0a4d 50%,#0a0a0abf);height:clamp(3rem,8vw,8rem);position:absolute;bottom:0;left:0;right:0}