@font-face{font-family:Arcade;src:url('../assets/arcade-pixel.v6.ttf') format('truetype');font-display:swap}
:root{color-scheme:dark;--ink:#111719;--panel:#1b2629;--line:#43524e;--cream:#f2efdf;--lime:#c6e98b;--muted:#acb9b6}*{box-sizing:border-box}body{margin:0;background:var(--ink);color:var(--cream);font:15px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace}main{max-width:1600px;margin:auto;padding:32px clamp(16px,3vw,48px) 24px}header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px}h1{font:clamp(20px,3vw,34px)/1.4 Arcade,monospace;margin:8px 0}.eyebrow{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--lime)}.intro{margin:8px 0;color:var(--muted)}a{color:var(--cream)}.back{white-space:nowrap;font-size:13px}button,select,input{font:inherit}button,select,input[type=number]{color:var(--cream);border:1px solid var(--line);background:var(--panel);border-radius:3px;min-height:42px;padding:9px 12px}button{cursor:pointer;touch-action:manipulation}button:hover{border-color:var(--lime)}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--lime);outline-offset:3px}.primary{color:var(--ink);background:var(--lime);border-color:var(--lime);min-width:94px}label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted)}select{max-width:100%;font-size:13px}.toolbar{display:flex;align-items:flex-end;flex-wrap:wrap;gap:14px;padding:18px;background:#162023;border:1px solid var(--line)}.toolbar label:first-child{min-width:210px}.check{flex-direction:row;align-items:center;gap:7px;min-height:42px;white-space:nowrap}.check input{accent-color:var(--lime);width:16px;height:16px}.transport{display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px 16px;padding:20px 0}.playback{display:flex;gap:6px}.fps input{width:94px}.timeline{flex:1;min-width:210px;justify-content:center;min-height:42px}.timeline input{width:100%;accent-color:var(--lime)}output{width:100%;font-size:12px;color:var(--muted)}.status{min-height:25px;margin:0 0 10px;font-size:12px;color:var(--lime)}.stage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.stage.single{grid-template-columns:minmax(0,1fr)}.card{min-width:0;border:1px solid var(--line);background:#162023;overflow:hidden}.card header{display:block;padding:16px 18px;margin:0;border-bottom:1px solid var(--line)}.card h2{font-size:16px;margin:0 0 4px}.card p{color:var(--muted);font-size:12px;margin:0}.viewport{display:flex;align-items:center;justify-content:center;min-height:230px;background:#27343a;overflow:auto}.light .viewport{background:#e0e3df}.grid .viewport{background:repeating-conic-gradient(#263237 0% 25%,#334146 0% 50%) 50%/20px 20px}canvas{display:block;width:100%;height:auto;image-rendering:pixelated;max-width:1080px}.single canvas{width:min(100%,960px)}.single .viewport{min-height:360px}.card footer{padding:14px 18px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;min-height:79px}.card footer span{font-size:11px;color:var(--muted);max-width:100%}.card footer button{min-height:38px;font-size:12px}.notes{color:var(--muted);font-size:12px;margin-top:20px}.notes p{margin:8px 0}.shortcuts{opacity:.8}[hidden]{display:none!important}
@media(max-width:1000px){main{padding:20px}.stage{gap:10px}.card header,.card footer{padding:12px}.card h2{font-size:13px}.viewport{min-height:170px}.playback button{font-size:13px;padding:9px}.single .viewport{min-height:280px}}
@media(max-width:700px){header{align-items:flex-start;flex-direction:column;gap:4px}.toolbar{gap:12px;padding:12px}.toolbar label{flex:1 1 140px}.toolbar label:first-child{min-width:0}.stage{grid-template-columns:minmax(0,1fr)}.viewport{min-height:200px}.single .viewport{min-height:250px}.transport{gap:12px}.playback{width:100%}.playback button{flex:1;padding:9px 6px}.timeline{flex-basis:100%}.back{font-size:12px}.card footer{min-height:62px}}