:root{--ink: #e7e1d4;--muted: #a39b8c;--bg: #12140f;--panel: #1b1e16;--line: #34382c;--brass: #e4b15a;--brass-deep: #8a6230;--sage: #7d9a78;--danger: #d37a62;color-scheme:dark;font-family:Outfit,Avenir Next,Segoe UI,sans-serif;background:radial-gradient(1200px 500px at 10% -10%,#2a2618 0%,transparent 55%),linear-gradient(180deg,#181b14 0%,var(--bg) 40%);color:var(--ink)}*{box-sizing:border-box}body{margin:0;min-height:100vh}button,input,select,textarea{font:inherit;color:inherit}button{background:#262a20;border:1px solid var(--line);border-radius:999px;padding:.45rem .85rem;cursor:pointer}button:hover{border-color:var(--brass)}button.primary{background:linear-gradient(180deg,#f0c778,var(--brass) 40%,#b7843a);color:#24180a;border-color:#f3d7a2;font-weight:640}.app{width:min(1180px,calc(100% - 2rem));margin:0 auto;padding:1.4rem 0 2.5rem;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.8fr);gap:1.25rem}header{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:flex-end;gap:1rem}.brand{display:flex;flex-direction:column;gap:.15rem}.brand h1{margin:0;font-size:2rem;letter-spacing:.08em;font-weight:640}.brand h1 span{color:var(--brass)}.brand p,.status,.hint,.help{margin:0;color:var(--muted)}.mark{width:2.4rem;height:2.4rem;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff1cc,var(--brass) 42%,var(--brass-deep));box-shadow:inset 0 0 0 3px #3a2a14,0 0 0 4px #2a2418}.stage{display:flex;flex-direction:column;gap:.9rem}.bezel{position:relative;background:#0c0e0a;border-radius:1.6rem;padding:1rem;border:1px solid #3a3426;box-shadow:inset 0 0 0 1px #5c4a2c,0 18px 40px #00000059}.bezel:before,.bezel:after{content:"";position:absolute;width:.7rem;height:.7rem;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f0d7a4,#8a6230);top:.55rem}.bezel:before{left:.7rem}.bezel:after{right:.7rem}.screen-wrap{position:relative;width:min(100%,720px);margin-inline:auto;background:#070806;border-radius:.4rem;overflow:hidden;aspect-ratio:240 / 160}canvas{display:block;width:100%;height:100%;image-rendering:pixelated;background:#f4f1ea}.filter-smooth canvas{image-rendering:auto}.lcd{pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;background:linear-gradient(rgba(0,0,0,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.12) 1px,transparent 1px);background-size:100% 3px,3px 100%;mix-blend-mode:multiply}.filter-lcd .lcd{opacity:1;background:linear-gradient(rgba(8,16,8,.55) 1px,transparent 1px),linear-gradient(90deg,rgba(40,70,40,.35) 1px,transparent 1px);background-size:100% 4px,4px 100%;box-shadow:inset 0 0 40px #28502840}.screen-wrap .hint{position:absolute;left:.7rem;bottom:.6rem;background:#12140fc7;border:1px solid var(--brass);color:var(--brass);border-radius:999px;padding:.25rem .7rem;font-size:.85rem}.empty{margin:0;color:var(--muted);font-size:.9rem}.controls{display:grid;grid-template-columns:1fr auto 1fr;gap:.8rem;align-items:center}.dpad,.face,.shoulders{display:grid;gap:.35rem;justify-items:center}.dpad{grid-template-columns:repeat(3,3.4rem)}.face{grid-template-columns:repeat(2,3.2rem)}.shoulders{grid-template-columns:1fr 1fr}.pad{width:3.4rem;height:3.4rem;border-radius:.9rem;background:#2a2e24;touch-action:none;-webkit-user-select:none;user-select:none;font-size:1.15rem}.pad.a{background:#3d4a38;color:#d5e6cf}.pad.b{background:#4a3b2a;color:#f0d7b0}.pad.wide{width:100%;border-radius:999px}.pad[aria-pressed=true],.pad:active{background:var(--brass);color:#24180a}.toolbar,.row{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}.panel{background:#1b1e16eb;border:1px solid var(--line);border-radius:1.2rem;padding:1rem;display:flex;flex-direction:column;gap:.9rem}.drop{border:1px dashed #6d6248;border-radius:.9rem;padding:.9rem;text-align:center;background:#141710}.drop.hot{border-color:var(--brass);background:#2a2416}.library{display:flex;flex-direction:column;gap:.35rem;max-height:14rem;overflow:auto}.rom{display:flex;justify-content:space-between;gap:.5rem;align-items:center;padding:.4rem .5rem;border-radius:.7rem;background:#14170f}.rom button{padding:.25rem .55rem}label.stack,.stack{display:flex;flex-direction:column;gap:.3rem;font-size:.92rem}select,input[type=range],textarea{width:100%;background:#10130d;border:1px solid var(--line);border-radius:.6rem}textarea{min-height:5.5rem;padding:.5rem;font-family:IBM Plex Mono,ui-monospace,monospace;font-size:.82rem;resize:vertical}.status{font-family:IBM Plex Mono,ui-monospace,monospace;font-size:.78rem}.help summary{cursor:pointer;color:var(--sage)}.help p{margin-top:.4rem;line-height:1.45}.error{color:var(--danger);min-height:1.1rem;font-size:.85rem}@media(max-width:860px){.app{grid-template-columns:1fr;width:min(100% - 1rem,720px)}.dpad{grid-template-columns:repeat(3,2.6rem)}.pad{width:2.6rem;height:2.6rem}}