:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0f0a1f;--surface-a:#221a40;--surface-b:#16102c;--surface-flat:#1a1530;--stroke:#ffffff12;--stroke-strong:#ffffff24;--stroke-soft:#ffffff1a;--primary:#7c4dff;--secondary:#b388ff;--tertiary:#00e5ff;--danger-hint:#ffb4b4;--text-primary:#ece6ff;--text-secondary:#9c92bf;--text-muted:#6b608c;--font-head:"Geist", "Inter", system-ui, sans-serif;--font-body:"Inter", system-ui, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace}*{box-sizing:border-box}body{background:var(--bg);color:var(--text-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased;min-height:100vh;margin:0;font-size:14px}button{font-family:inherit}.topbar{background:var(--bg);z-index:10;border-bottom:1px solid #ffffff12;justify-content:space-between;align-items:center;height:56px;padding:0 24px;display:flex;position:sticky;top:0}.brand{align-items:center;gap:24px;display:flex}.logo{font-family:var(--font-head);letter-spacing:.08em;text-transform:uppercase;color:var(--text-primary);font-size:18px;font-weight:700}.status-pill{background:var(--surface-flat);font-family:var(--font-mono);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.02em;border:1px solid #ffffff0d;border-radius:9999px;align-items:center;gap:8px;padding:4px 12px;font-size:12px;display:inline-flex}.status-pill[hidden]{display:none}.status-text{color:var(--text-primary)}.status-dot{background:var(--tertiary);border-radius:9999px;width:8px;height:8px;animation:2s cubic-bezier(.4,0,.6,1) infinite pulse}@keyframes pulse{0%,to{opacity:1;filter:drop-shadow(0 0 2px var(--tertiary))}50%{opacity:.4;filter:none}}.lang-toggle{background:var(--surface-flat);border:1px solid #ffffff12;border-radius:8px;align-items:center;padding:2px;display:inline-flex}.lang-toggle button{color:var(--text-secondary);cursor:pointer;background:0 0;border:0;border-radius:6px;padding:4px 12px;font-size:13px;font-weight:500;transition:color .12s ease-out}.lang-toggle button:hover{color:var(--secondary)}.lang-toggle button.active{background:var(--primary);color:#fff}.stage{grid-template-columns:minmax(0,1fr) 280px;align-items:start;gap:24px;max-width:1280px;margin:0 auto;padding:24px;display:grid}@media (width<=880px){.stage{grid-template-columns:1fr}}.player{flex-direction:column;gap:16px;min-width:0;display:flex}.screen-frame{aspect-ratio:3/2;border:1px solid var(--stroke-strong);background:#000;border-radius:4px;width:100%;max-width:720px;position:relative;overflow:hidden;box-shadow:0 0 40px -10px #7c4dff2e}#screen{width:100%;height:100%;image-rendering:pixelated;outline:none;display:block}#screen:focus{box-shadow:inset 0 0 0 1px var(--primary)}.controls-bar{background:linear-gradient(135deg, var(--surface-a), var(--surface-b));border:1px solid #ffffff12;border-radius:12px;justify-content:space-between;align-items:center;max-width:720px;height:64px;padding:0 16px;display:flex;box-shadow:inset 0 1px #ffffff12}.controls-left,.controls-right{align-items:center;gap:12px;display:flex}.divider{background:#ffffff14;width:1px;height:24px;margin:0 2px}.rom-btn{background:var(--primary);color:#fff;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:8px;align-items:center;padding:8px 18px;font-size:13px;font-weight:600;transition:filter .12s ease-out;display:inline-flex}.rom-btn:hover{filter:brightness(1.1)}.rom-btn input{display:none}.icon-btn{width:40px;height:40px;color:var(--text-secondary);cursor:pointer;background:0 0;border:0;border-radius:8px;justify-content:center;align-items:center;transition:color .12s ease-out,background .12s ease-out;display:inline-flex}.icon-btn:hover:not(:disabled){color:var(--primary);background:#ffffff0a}.icon-btn:disabled{opacity:.3;cursor:not-allowed}.volume{color:var(--text-secondary);background:#00000040;border-radius:8px;align-items:center;gap:10px;padding:6px 12px;display:inline-flex}.volume input[type=range]{appearance:none;cursor:pointer;background:#ffffff1a;border-radius:9999px;outline:none;width:96px;height:4px}.volume input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--primary);cursor:pointer;border:0;border-radius:9999px;width:12px;height:12px}.volume input[type=range]::-moz-range-thumb{background:var(--primary);cursor:pointer;border:0;border-radius:9999px;width:12px;height:12px}.volume-label{font-family:var(--font-mono);color:var(--text-secondary);text-align:right;min-width:36px;font-size:11px}.help{font-family:var(--font-mono);color:var(--text-muted);letter-spacing:.02em;max-width:720px;margin:4px 4px 0;font-size:12px;line-height:1.6}.slots-panel{background:linear-gradient(135deg, var(--surface-a), var(--surface-b));border:1px solid #ffffff12;border-radius:12px;overflow:hidden;box-shadow:inset 0 1px #ffffff12}.slots-head{border-bottom:1px solid #ffffff12;justify-content:space-between;align-items:center;padding:16px;display:flex}.slots-head h2{font-family:var(--font-mono);letter-spacing:.12em;color:var(--text-secondary);text-transform:uppercase;margin:0;font-size:12px;font-weight:500}.slots-counter{font-family:var(--font-mono);font-size:12px}.slots-counter .used{color:var(--primary)}.slots-counter .sep,.slots-counter .total{color:var(--text-muted)}.slot-list{flex-direction:column;gap:8px;margin:0;padding:16px;list-style:none;display:flex}.slot{font-family:var(--font-mono)}.slot.used{background:#7c4dff0d;border:1px solid #7c4dff2e;border-radius:8px;flex-direction:column;gap:8px;padding:8px;display:flex}.slot-meta{align-items:center;gap:12px;display:flex}.slot-thumb{width:60px;height:40px;image-rendering:pixelated;object-fit:cover;background:#000;border:1px solid #ffffff14;border-radius:4px;flex-shrink:0}.slot-thumb.placeholder{background:repeating-linear-gradient(135deg,#ffffff0a 0 4px,#ffffff0f 4px 8px)}.slot-info{flex-direction:column;gap:4px;min-width:0;display:flex}.slot-name{color:var(--text-primary);font-size:12px;line-height:1}.slot-time{color:var(--text-muted);font-size:10px;line-height:1}.slot-actions{grid-template-columns:1fr 1fr;gap:8px;display:grid}.slot-actions button{height:28px;font-family:var(--font-mono);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;font-size:11px;transition:all .12s ease-out;display:inline-flex}.slot-actions .save{color:var(--text-primary);background:0 0;border:1px solid #ffffff1a}.slot-actions .save:hover{color:var(--danger-hint);border-color:#ff8c8c59}.slot-actions .load{color:#fff;background:var(--primary);border:0;font-weight:600}.slot-actions .load:hover{filter:brightness(1.1)}.slot.empty{border-radius:8px;justify-content:space-between;align-items:center;height:36px;padding:0 8px;transition:background .12s ease-out;display:flex}.slot.empty:hover{background:#ffffff08}.slot-empty-left{align-items:center;gap:12px;display:flex}.empty-dot{border:1px solid var(--text-muted);border-radius:9999px;width:6px;height:6px;transition:border-color .12s ease-out}.slot.empty:hover .empty-dot{border-color:var(--text-secondary)}.slot.empty .slot-name{color:var(--text-secondary)}.slot-save-empty{height:24px;font-family:var(--font-mono);color:var(--text-primary);cursor:pointer;background:0 0;border:1px solid #ffffff24;border-radius:6px;align-items:center;padding:0 10px;font-size:11px;transition:background .12s ease-out,border-color .12s ease-out;display:inline-flex}.slot-save-empty:hover{border-color:var(--text-secondary);background:#ffffff0d}