@import"https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;600;700&display=swap";:root{font-family:Space Grotesk,sans-serif;color:#eef2ff;background:#090d18;--line:#28354b;--muted:#8996af;--lime:#c7f36b;--purple:#a89bff}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% -20%,#1a2643,transparent 60%),#090d18}button,input{font:inherit}button,label{cursor:pointer}header{height:72px;border-bottom:1px solid #202b3d;display:flex;align-items:center;justify-content:space-between;padding:0 max(18px,calc((100vw - 1200px)/2))}.brand{display:flex;align-items:center;gap:11px}.brand>b{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:var(--lime);color:#111827;font-size:22px}.brand strong{font-size:12px;letter-spacing:1.4px}.brand small{display:block;color:var(--muted);font:9px DM Mono;margin-top:4px}.primary,.btn{display:inline-block;border:1px solid #394660;border-radius:8px;background:#172136;color:#eef2ff;padding:11px 14px;font-size:12px;font-weight:600}.primary{background:var(--lime);border-color:var(--lime);color:#111827}.btn input{display:none}main{max-width:1200px;margin:auto;padding:36px 20px}.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:24px}.hero small{font:10px DM Mono;letter-spacing:1.5px;color:var(--lime)}h1{font-size:clamp(34px,5vw,52px);letter-spacing:-2px;line-height:1.04;margin:12px 0}em{color:var(--purple);font-style:normal}.hero p,.muted{font-size:13px;color:#a1adc3}.notice{padding:13px 16px;border:1px solid #373452;background:#171c2d;border-radius:8px;color:#b9c3d8;font-size:12px;margin-bottom:18px}.notice b{color:#d4ccff;margin-right:10px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.panel{background:linear-gradient(145deg,#111a2a,#0e1523);border:1px solid var(--line);border-radius:11px;overflow:hidden;min-width:0}.panel h3{font:10px DM Mono;letter-spacing:1px;color:#c1cbe0;margin:0;padding:17px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:8px}.panel h3 span{font-size:9px;color:#8c9ab2}#screen{aspect-ratio:4/3;margin:18px;background:radial-gradient(ellipse,#20294b,#080b15 70%);border:1px solid #303c57;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden}#screen>b{font-size:38px;letter-spacing:-2px}#screen span{color:var(--lime);margin-left:6px}#screen p{font-size:12px;color:#b0bad0;overflow-wrap:anywhere}#screen small{font:9px DM Mono;color:#65728c;letter-spacing:1px}nav{display:flex;gap:6px;padding:0 18px}nav button{flex:1;border:1px solid #34425b;border-radius:6px;background:#1a2438;color:#d9e1f3;padding:10px 2px;font-size:10px}nav .primary{background:var(--lime);color:#111827}.readout{display:flex;align-items:center;gap:10px;padding:16px 18px;font:9px DM Mono;color:#8794ad}.readout strong{font-size:17px;color:var(--lime)}.readout label{margin-left:auto;font:11px Space Grotesk}.readout input{width:65px;background:#0b1120;border:1px solid #35425b;border-radius:5px;color:#fff;padding:5px}.toolbar{display:flex;justify-content:space-between;align-items:center;padding:14px 16px}.toolbar b{font-size:13px}.toolbar small{display:block;color:#8390a8;font-size:10px;margin-top:4px}.toolbar button{background:#121c2d;color:#c6d0e2;border:1px solid #35425b;border-radius:6px;padding:8px;font-size:10px}#timeline{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;padding:0 16px 16px}.cell{height:42px;border:1px solid #29364c;border-radius:5px;background:#0b1220;color:#8997b1;text-align:left;padding:5px;font:10px DM Mono;display:flex;flex-direction:column;justify-content:space-between}.cell i{height:3px;background:#28364b;border-radius:3px}.cell.input i{background:var(--purple)}.cell.selected{border-color:var(--lime);color:var(--lime)}.cell.selected i{background:var(--lime)}.controller{border-top:1px solid var(--line);padding:18px;display:flex;justify-content:space-around;align-items:center;gap:10px;flex-wrap:wrap}.controller button{min-width:34px;min-height:32px;border:1px solid #35435e;border-radius:6px;background:#1b263c;color:#dce4f4;font-size:11px}.controller button.active{background:var(--lime);color:#111827}.dpad{text-align:center}.dpad div{display:flex;gap:3px}.face{display:grid;grid-template-columns:repeat(2,34px);gap:5px;transform:rotate(-10deg)}.face button{border-radius:50%;background:#28234b}.shoulders{display:grid;grid-template-columns:repeat(2,auto);gap:4px}.shoulders button{font-size:9px;padding:0 6px}.lower{margin-top:16px}.muted{padding:0 17px;line-height:1.6}.mem,.line{display:grid;grid-template-columns:90px 25px 1fr;gap:10px;padding:12px 17px;border-top:1px solid #202b3e;font-size:11px;align-items:center}.mem code{font:11px DM Mono;color:var(--purple)}.mem .ram-address{width:100%;min-width:0;background:#0a0f19;border:1px solid #303b50;border-radius:5px;color:var(--purple);padding:7px 5px;font:11px DM Mono;text-transform:uppercase}.mem .ram-address:focus{outline:1px solid var(--purple)}.mem b{overflow-wrap:anywhere}#ram-status{color:var(--purple)}.mem b{color:#6d7990}.mem small{color:#8290a8}.line{grid-template-columns:1fr 1fr}.line span{color:#8b98b0}.line b{text-align:right;overflow-wrap:anywhere}.actions{padding:15px}footer{display:flex;justify-content:space-between;gap:10px;padding:28px 2px 5px;color:#697791;font:9px DM Mono;letter-spacing:1px}footer span{letter-spacing:0;text-align:right}@media(max-width:760px){header{padding:0 12px}.brand strong{font-size:10px}.brand small{font-size:7px}.brand>b{width:31px;height:31px}.hero{flex-direction:column;align-items:flex-start}.grid{grid-template-columns:1fr}main{padding:25px 12px}.lower{margin-top:14px}#timeline{grid-template-columns:repeat(5,minmax(0,1fr));padding:0 12px 14px}.toolbar{padding:13px}.readout{padding:14px 12px}.hero .btn{align-self:flex-start}footer{flex-direction:column}footer span{text-align:left}}#timeline{display:block;padding:0 12px 16px;overflow-x:auto;overscroll-behavior-x:contain}.piano-roll{min-width:720px;border:1px solid #29364c;border-radius:7px;overflow:hidden}.piano-row{display:grid;grid-template-columns:58px repeat(12,minmax(44px,1fr));min-height:34px}.piano-row+.piano-row{border-top:1px solid #202b3e}.piano-head{position:sticky;top:0;z-index:2;background:#172136;min-height:38px}.frame-label,.key-label{display:flex;align-items:center;justify-content:center;font:10px DM Mono;color:#9aa7bf;border:0;border-right:1px solid #26334a;background:transparent;padding:4px 2px}.frame-label{position:sticky;left:0;z-index:1;background:#131d2f;color:#b7c4da}.piano-head .frame-label{z-index:3;background:#1b263b}.key-label{font-size:10px;color:#b9c4d9}.roll-cell{border:0;border-right:1px solid #202b3e;background:#0b1220;min-width:0;min-height:34px;padding:3px;touch-action:pan-y}.roll-cell.on{background:#c7f36b;box-shadow:inset 0 0 0 2px #c7f36b}.roll-cell:active{filter:brightness(1.15)}.current-frame .frame-label{color:#c7f36b;background:#202b3e}.current-frame .roll-cell{background-color:#111c2e}.current-frame .roll-cell.on{background:#c7f36b}@media(max-width:760px){#timeline{padding:0 10px 14px}.piano-roll{min-width:700px}.piano-row{grid-template-columns:54px repeat(12,minmax(42px,1fr))}.roll-cell{min-height:38px}}#screen.emulator-active{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#000;aspect-ratio:4/3}#game-canvas{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;background:#000}.emulator-loading{padding:24px;text-align:center;color:#c7f36b;font:12px DM Mono;line-height:1.8}.emulator-loading small{color:#8996af}.rom-meta{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:5px 7px;border-radius:4px;background:#090d18cc;color:#c7f36b;font:9px DM Mono}#screen.emulator-active>canvas{max-width:100%;max-height:100%}.length-control{display:flex;align-items:center;justify-content:flex-end;gap:8px;color:#8b98b0;font-size:11px}.length-control input{width:110px;max-width:45vw;padding:8px 9px;border:1px solid #35435e;border-radius:6px;background:#0b1220;color:#e6edf8;font:12px DM Mono;text-align:right}.length-control input:focus{outline:2px solid #c7f36b;outline-offset:1px}.range-editor{margin:0 12px 16px;padding:13px;border:1px solid #303d55;border-radius:8px;background:#0b1220}.range-editor>b{display:block;font-size:12px;color:#e6edf8}.range-editor>small{display:block;margin-top:5px;color:#8996af;font-size:10px;line-height:1.5}.range-fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;margin-top:12px}.range-fields label{display:flex;flex-direction:column;gap:6px;color:#9aa7bf;font-size:10px}.range-fields input,.range-fields select{width:100%;min-width:0;padding:9px 7px;border:1px solid #35435e;border-radius:6px;background:#111b2d;color:#e6edf8;font:11px DM Mono}.range-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.range-actions button{padding:9px 11px;border:1px solid #35435e;border-radius:6px;background:#172136;color:#e6edf8;font-size:10px}.range-actions button.primary{background:var(--lime);border-color:var(--lime);color:#111827}@media(max-width:420px){.range-fields{grid-template-columns:1fr 1fr}.range-fields label:last-child{grid-column:1/-1}.range-editor{margin-left:10px;margin-right:10px}}