:root{--bg: #0c0d12;--fg: #e8e6e1;--muted: #8a8a8a;--accent: #f8b400;--accent-dim: #b27e00;--tile-accent: #9a9a9a;--tile-accent-strong: #cfcdc7;--tile-accent-dim: #5c5c63;--panel: #15171f;--border: #2a2c36;--good: #6ace5a;--bad: #ff6b6b}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:ui-monospace,SF Mono,Cascadia Mono,Menlo,monospace;font-size:15px;line-height:1.55}body{max-width:760px;margin:0 auto;padding:48px 24px 96px}header{padding-bottom:24px;margin-bottom:32px}h1{margin:0;font-size:32px;letter-spacing:-.02em}.tagline{margin:4px 0 0;color:var(--accent);font-size:14px;letter-spacing:.04em}h2{font-size:18px;margin-top:36px;margin-bottom:12px;color:var(--accent)}main p{color:var(--fg)}main p.byo-rom{color:var(--muted);font-size:14px}body.landing main{text-align:center;padding-top:32px}body.landing h1{font-size:48px;margin-bottom:8px}body.landing .lede{max-width:540px;margin:16px auto;text-align:left}.cta{display:inline-block;margin:32px 0 12px;padding:14px 36px;border:1px solid var(--accent-dim);background:var(--accent);color:#1a1500!important;border-radius:4px;font-family:inherit;font-size:16px;font-weight:600;text-decoration:none;transition:filter .12s}.cta:hover{filter:brightness(1.1);color:#1a1500!important}body.landing .byo-rom{text-align:center;margin-top:4px}main ul{padding-left:20px;color:var(--fg)}main ul li{margin:8px 0}a,a:visited{color:var(--accent)}a:hover{color:var(--fg)}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#00000073;z-index:1}.overlay.hidden{display:none}.load-button{cursor:pointer;padding:12px 24px;border:1px solid var(--accent-dim);background:var(--accent);color:#1a1500;border-radius:4px;font-family:inherit;font-size:14px;font-weight:600;transition:filter .12s}.load-button:hover{filter:brightness(1.1)}.picker-modal{background:var(--panel);color:var(--fg);border:1px solid var(--border);border-radius:6px;padding:0;max-width:460px;width:90vw;font-family:inherit}.picker-modal::backdrop{background:#0009}.picker-body{max-height:56vh;overflow-y:auto}.picker-folder{margin-bottom:10px}.picker-folder:last-child{margin-bottom:0}.picker-folder-head{display:flex;align-items:center;gap:8px;padding:4px 6px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em}.picker-folder-name{font-weight:600}.picker-folder-count{margin-left:auto;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:0 7px;font-size:11px;line-height:16px}.picker-row{display:flex;align-items:center;gap:8px;width:100%;margin:2px 0;padding:7px 10px 7px 18px;background:transparent;border:1px solid transparent;border-radius:4px;color:var(--fg);font-family:inherit;font-size:13px;text-align:left;cursor:pointer}.picker-row:hover{background:var(--bg);border-color:var(--accent)}.picker-row-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.picker-icon{display:inline-flex;flex:0 0 auto;color:var(--muted)}.picker-row:hover .picker-icon{color:var(--fg)}.picker-empty{margin:8px 4px;color:var(--muted);font-size:13px}.picker-modal .modal-footer{margin-top:0;padding:12px 20px}.picker-note{margin:0;padding:10px 20px;color:var(--bad);font-size:12px;border-top:1px solid var(--border)}.screen-wrap{background:#000;border:1px solid var(--border);border-radius:4px;padding:0;width:fit-content;margin:0 auto;position:relative}:root{--devtools-width: 400px}#devtools-root{position:fixed;top:0;right:0;width:var(--devtools-width);height:100vh;z-index:100}#devtools-root[hidden]{display:none}#devtools-root.floating{top:auto;right:auto;height:auto;box-shadow:0 8px 32px #0009,0 2px 6px #0006}body.with-devtools,body.with-devtools-floating{max-width:none}body.with-devtools .stage{width:calc(100% - var(--devtools-width))}canvas#screen{display:block;width:512px;height:480px;image-rendering:pixelated;image-rendering:crisp-edges}.stage{position:relative;width:100%;height:100vh;height:100dvh;padding:20px 30px 0}html.player-page{overflow:hidden}body.player{max-width:none;padding:0}body.player main{margin:0}.tiles{display:grid;width:100%;height:100%;column-gap:8px;row-gap:22px;justify-content:space-evenly;align-content:space-evenly}.screen-tile{position:relative;background:#000;border:1px solid var(--border);border-radius:4px}.screen-crop{overflow:hidden;line-height:0}.tile-add{position:absolute;display:flex;align-items:center;justify-content:center;background:var(--panel);color:var(--muted);border:1px solid var(--border);border-radius:3px;font-family:inherit;font-size:15px;line-height:1;cursor:pointer;opacity:.55;z-index:2;transition:opacity .12s,border-color .12s,color .12s,background .12s,border-radius .16s ease,transform .16s ease}.tile-add:hover{opacity:1;border-color:var(--tile-accent);color:var(--tile-accent-strong);background:var(--bg)}body.pre-rom .tile-add{display:none}.tile-add.south{width:28px;height:19px;top:100%;left:50%;transform:translate(-50%);border-top:1px solid transparent;border-radius:0 0 4px 4px}.tile-add.west{width:19px;height:28px;right:100%;top:50%;transform:translateY(-50%);border-right:none;border-radius:4px 0 0 4px}.screen-tile.south-peek .tile-add.south{transform:translate(-50%,-28px);border-top-color:var(--border);border-radius:4px}.screen-tile .tile-add.south:hover{border-top-color:var(--tile-accent)}.tile-add.east{width:19px;height:28px;left:100%;top:50%;transform:translateY(-50%);border-left:none;border-radius:0 4px 4px 0}.screen-tile canvas{display:block;width:512px;height:480px;image-rendering:pixelated;image-rendering:crisp-edges}.tile-tag{display:flex;align-items:center;padding:3px 6px 4px;font-size:11px;font-weight:600;line-height:1;color:var(--tile-accent);user-select:none}.tiles.single-tile .tile-tag{display:none}.tile-header{position:absolute;bottom:100%;left:6px;right:6px;display:flex;align-items:flex-end;gap:3px;z-index:2}.tile-tab{background:var(--panel);border:1px solid var(--border);border-bottom:none;border-radius:4px 4px 0 0;color:var(--muted);font-family:inherit;font-size:11px;line-height:1;padding:3px 9px 4px;cursor:pointer;transition:border-color .12s,color .12s,background .12s}.tile-tab:not(:disabled):hover{border-color:var(--tile-accent);color:var(--tile-accent-strong);background:var(--bg)}.tile-tab:disabled{opacity:.4;cursor:not-allowed}html.zen .tile-tab,html.zen .tile-add{display:none}.fullscreen-toggle{position:fixed;right:14px;bottom:12px;z-index:10;width:30px;height:30px;display:flex;align-items:center;justify-content:center;padding:0;background:var(--panel);border:1px solid var(--border);border-radius:5px;color:var(--tile-accent);font-size:16px;line-height:1;cursor:pointer;opacity:.28;transition:opacity .14s,color .14s,border-color .14s}.fullscreen-toggle:hover{opacity:1;color:var(--tile-accent-strong);border-color:var(--tile-accent)}.tile-tab-exit:not(:disabled):hover{border-color:var(--bad);color:var(--bad)}.tile-tab-cog{font-size:13px;padding-left:7px;padding-right:7px;margin-left:auto}.tile-tab-devtools{font-size:11px;letter-spacing:-.5px;padding-left:6px;padding-right:6px}.player-tabs{display:flex;gap:4px;margin-bottom:14px;flex-wrap:wrap}.player-tab{background:var(--bg);border:1px solid var(--border);color:var(--muted);font-family:inherit;font-size:12px;padding:5px 12px;border-radius:3px;cursor:pointer;transition:border-color .12s,color .12s}.player-tab:hover{border-color:var(--accent);color:var(--fg)}.player-tab.active{border-color:var(--accent);color:var(--accent);background:var(--panel)}.pad-assign{display:flex;align-items:center;gap:10px;margin-bottom:14px}.pad-assign-label{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em}.pad-select{flex:1;background:var(--bg);color:var(--fg);border:1px solid var(--border);border-radius:3px;font-family:inherit;font-size:12px;padding:5px 8px;cursor:pointer}.tile-tab-volume{display:flex;align-items:center;gap:5px;padding:2px 9px 3px;cursor:default}.vol-mute{background:transparent;border:none;padding:0;color:var(--tile-accent);font-size:13px;line-height:1;cursor:pointer;transition:color .12s}.vol-mute:hover{color:var(--tile-accent-strong)}.tile-vol{-webkit-appearance:none;appearance:none;width:64px;height:4px;background:var(--border);border-radius:2px;outline:none;cursor:pointer}.tile-vol::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:var(--tile-accent);border:1px solid var(--tile-accent-dim);cursor:pointer}.tile-vol::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--tile-accent);border:1px solid var(--tile-accent-dim);cursor:pointer}.controls-modal{background:var(--panel);color:var(--fg);border:1px solid var(--border);border-radius:6px;padding:0;max-width:560px;width:90vw;font-family:inherit}.controls-modal::backdrop{background:#0009}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border)}.modal-head h2{margin:0;font-size:16px;color:var(--accent)}.modal-close{background:transparent;border:none;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;padding:0 4px}.modal-close:hover{color:var(--fg)}.modal-body{padding:16px 20px 20px}.bindings-table{width:100%;border-collapse:collapse;font-size:13px}.bindings-table th{text-align:left;color:var(--muted);font-weight:400;font-size:11px;text-transform:uppercase;letter-spacing:.05em;padding:4px 8px;border-bottom:1px solid var(--border)}.bindings-table td{padding:8px;vertical-align:middle;border-bottom:1px solid var(--border)}.bindings-table tbody tr:last-child td{border-bottom:none}.btn-name{color:var(--accent);font-weight:600;width:70px}.binding-chips{display:inline-flex;flex-wrap:wrap;gap:4px;margin-right:6px}.binding-chip{display:inline-flex;align-items:center;gap:4px;background:var(--bg);border:1px solid var(--border);border-radius:3px;padding:2px 4px 2px 6px;font-size:12px}.chip-remove{background:transparent;border:none;color:var(--muted);font-size:14px;line-height:1;cursor:pointer;padding:0 4px}.chip-remove:hover{color:var(--bad)}.binding-empty{color:var(--muted);margin-right:6px}.add-binding{background:transparent;border:1px dashed var(--border);color:var(--muted);font-family:inherit;font-size:11px;padding:2px 8px;border-radius:3px;cursor:pointer}.add-binding:hover{border-color:var(--accent);border-style:solid;color:var(--fg)}.add-binding.capturing{border-style:solid;border-color:var(--accent);color:var(--accent);background:var(--bg)}.modal-footer{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}.primary-btn{background:var(--accent);border:1px solid var(--accent-dim);color:#1a1500;font-family:inherit;font-size:13px;font-weight:600;padding:8px 18px;border-radius:3px;cursor:pointer}.primary-btn:hover{filter:brightness(1.1)}.secondary-btn{background:transparent;border:1px solid var(--border);color:var(--muted);font-family:inherit;font-size:12px;padding:8px 14px;border-radius:3px;cursor:pointer}.secondary-btn:hover{border-color:var(--bad);color:var(--bad)}