:root{--bg:#16171a;--panel:#1e2024;--line:#2e3138;--text:#cfcabc;--dim:#7d7a71;--accent:#b9a77e}*{box-sizing:border-box}html,body{height:100%}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overscroll-behavior:none;margin:0;font:13px/1.6 Hiragino Sans,Noto Sans JP,system-ui,sans-serif}#app{height:100dvh}.app{height:100%;display:flex}.stage{flex:1;justify-content:center;align-items:center;min-width:0;display:flex;overflow:hidden}.screen{image-rendering:pixelated;touch-action:none;cursor:crosshair;background:#000;display:block}.panel{background:var(--panel);border-left:1px solid var(--line);flex:none;width:268px;padding:18px;transition:opacity .5s;overflow-y:auto}.panel[data-hidden=true]{opacity:0;pointer-events:none}h1{letter-spacing:.08em;margin:0 0 2px;font-size:14px;font-weight:600}.sub{color:var(--dim);margin:0 0 18px;font-size:11px}h2{color:var(--accent);letter-spacing:.16em;border-bottom:1px solid var(--line);margin:20px 0 8px;padding-bottom:5px;font-size:11px;font-weight:600}.tools{grid-template-columns:repeat(3,1fr);gap:5px;display:grid}.tools button{font:inherit;color:var(--text);border:1px solid var(--line);cursor:pointer;background:#26292f;border-radius:3px;padding:7px 6px;font-size:11.5px}.tools button:hover{background:#2f333a;border-color:#444}.tools button.on{border-color:var(--accent);color:#e8dcc0;background:#3a3527}.row{margin:9px 0}.row label{color:var(--dim);justify-content:space-between;font-size:11.5px;display:flex}.row label span{color:var(--text);font-variant-numeric:tabular-nums}.row input[type=range]{width:100%;accent-color:var(--accent);margin:3px 0 0}.check{color:var(--dim);cursor:pointer;align-items:center;gap:7px;margin:7px 0;font-size:11.5px;display:flex}.check input{accent-color:var(--accent)}.facts{grid-template-columns:auto 1fr;gap:4px 12px;margin:0 0 16px;font-size:11.5px;display:grid}.facts dt{color:var(--dim)}.facts dd{font-variant-numeric:tabular-nums;margin:0}.dim{color:var(--dim)}.btns{gap:6px;margin-bottom:8px;display:flex}.btns button{font:inherit;color:var(--text);border:1px solid var(--line);cursor:pointer;background:#26292f;border-radius:3px;flex:1;padding:7px 6px;font-size:11.5px}.btns button:hover{background:#2f333a;border-color:#444}.note{color:#8d8878;border-top:1px solid var(--line);margin:16px 0 0;padding-top:12px;font-size:10.5px;line-height:1.6}@media (max-width:760px){.app{flex-direction:column}.panel{border-left:none;border-top:1px solid var(--line);width:auto;max-height:42dvh;padding:14px 16px calc(14px + env(safe-area-inset-bottom))}}