:root{color-scheme:dark;--bg:#0c120f;--panel:#17221a;--line:#344632;--muted:#91a184;--ink:#e6edda;--green:#bbeb73;--yellow:#e9bf6d}*{box-sizing:border-box}body{margin:0;color:var(--ink);font:15px/1.5 system-ui,sans-serif;background:radial-gradient(ellipse at 20% 0,#243622 0,transparent 55%),var(--bg)}header,main,footer{max-width:1280px;margin:auto;padding:22px 28px}header{display:flex;justify-content:space-between;border-bottom:1px solid var(--line)}a{color:var(--green);text-decoration:none}a:hover{text-decoration:underline}.version,.eyebrow{font-size:11px;letter-spacing:.17em;color:var(--green);font-weight:700}.heading{display:flex;justify-content:space-between;align-items:center;margin:14px 0 32px}.heading h1{margin:8px 0 0;font:900 clamp(28px,4vw,52px)/1.1 monospace;letter-spacing:-.04em;text-shadow:3px 3px 0 #334d25;color:var(--green)}.heading h1 span{color:#e1e8d1}.heading p{color:var(--muted);margin:10px 0 0}.layout{display:grid;grid-template-columns:minmax(0,800px) 300px;gap:26px;align-items:start}.machine{border:2px solid #43543b;border-top:5px solid #a0c66a;background:linear-gradient(#202c20,#141c17);padding:22px;box-shadow:0 12px 0 #070c08,0 24px 60px #0006}.machine-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.brand{font:900 18px monospace;letter-spacing:.08em;color:var(--green)}.brand span{color:#92a083;font-size:11px;margin-left:10px}.lamp{font:10px monospace;color:#9c967b}.lamp.on{color:var(--green)}.console{display:grid;grid-template-columns:minmax(220px,360px) 1fr;gap:22px}.screen-frame{background:#030706;padding:8px;border:2px solid #4b573c;box-shadow:inset 0 0 0 4px #101b12,0 4px 0 #080e09;position:relative;aspect-ratio:1}canvas{width:100%;height:100%;display:block;image-rendering:pixelated;background:#07120b}.screen-frame #start{position:absolute;inset:20% 10%;background:#1f351df0;border:2px solid var(--green);color:var(--green);font:700 16px monospace;box-shadow:0 5px 0 #071008;cursor:pointer}#start span{display:block;font:12px system-ui;margin-top:12px;color:#c5d5b4}button,input{font:inherit}button{cursor:pointer;color:var(--ink);border:1px solid #526146;background:#253225;border-bottom:3px solid #101b12;transition:background .08s}button:hover{background:#344b2c}button:focus-visible,input:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}button:disabled{opacity:.4;cursor:default}.encoder{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#131e16;padding:8px 10px;border:1px solid #33432f}.encoder span{font:11px monospace;color:#abbc98;min-width:82px}.encoder button{width:32px;height:31px;font-weight:800}.encoder .dial{width:20px;height:20px;background:repeating-conic-gradient(#a9ba8a 0 10deg,#485d3d 10deg 20deg);border:4px solid #394a32;box-shadow:0 2px 0 #030803;border-radius:50%}.encoders{display:grid;gap:5px}.toolbar{display:flex;gap:15px;justify-content:space-between;align-items:center;margin:22px 0;font-size:12px;color:var(--muted)}.latch{display:flex;gap:7px;align-items:center}.latch input{accent-color:var(--green)}.volume{display:flex;align-items:center;gap:10px;font:11px monospace}.volume input{width:100px;accent-color:var(--green)}.buttons{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin:18px 0 24px}.buttons button{font:700 11px monospace;min-height:41px;padding:8px 2px}.buttons button[data-bit='10']{color:var(--green)}.buttons button[data-bit='11']{color:#ef9d85}.buttons button.lit{box-shadow:inset 0 2px 0 var(--green)}.buttons button.held{background:var(--green);color:#172316}.keyboard{height:124px;position:relative;user-select:none;touch-action:none}.key{position:absolute;bottom:0;height:100%;border:1px solid #26331e;background:linear-gradient(#c8d0b6,#e3e8d5 82%,#acb499);color:#4d5842;z-index:1;border-bottom:6px solid #7b8568;font:9px monospace;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px}.key.black{height:62%;top:0;bottom:auto;background:linear-gradient(#354031,#0a110c);border:1px solid #081009;border-bottom:5px solid #000;z-index:2;color:#b7c69c}.key.held,.key.lit{background:var(--green);color:#14200d}.key.black.held{background:#709d49}.bottom{display:flex;justify-content:space-between;align-items:center;font:10px monospace;color:#718069;margin-top:16px}.bottom button{font-size:10px;padding:5px 9px}.guide{padding:18px 20px;background:#141e16;border:1px solid #2d3d29;margin-bottom:14px}.guide h2{font:700 17px monospace;margin:4px 0 16px;color:#c7dcaa}.guide ol{padding-left:19px;margin:0}.guide li{margin:12px 0;color:#abb9a1}.guide li b{color:var(--ink)}dl{margin:0}dt{color:#d4e1c4;font-size:12px;margin-top:11px}dd{margin:4px 0;color:#90a083;font-size:12px}.note{color:#83947b;font-size:12px;padding:12px 4px}.note b{color:#b7c9a8}.status{font:12px monospace;padding:18px;border-left:3px solid var(--green);background:#142017;margin-top:26px;color:#c9dcad}.status.error{border-color:#dd8470;color:#eea48e}footer{font-size:11px;color:#71806b;padding-bottom:40px}@media(max-width:1000px){.layout{grid-template-columns:1fr}aside{display:grid;grid-template-columns:1fr 1fr;gap:14px}.note{grid-column:1/-1}}@media(max-width:650px){header,main,footer{padding:16px}.heading{display:block}.heading>a{display:inline-block;margin-top:16px}.machine{padding:12px}.console{grid-template-columns:1fr}.screen-frame{max-width:340px;margin:auto;width:100%}.encoders{grid-template-columns:1fr 1fr}.encoder{padding:7px}.encoder span{min-width:45px;font-size:10px}.encoder .dial{display:none}.toolbar{align-items:flex-start;flex-direction:column}.keyboard{height:100px}.key{font-size:7px}.buttons{gap:4px}.buttons button{font-size:9px}aside{display:block}}

.roll-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:14px 0}.roll-tools button{padding:10px;font-size:11px}.roll-tools button[aria-pressed="true"]{background:#506b30;border-color:#b7df71}.roll-tools span{color:#a4bc86;font-size:11px}.key{font-size:8px;overflow:hidden;text-overflow:ellipsis}.key.black{font-size:7px}

.key:not(.black){white-space:normal;overflow-wrap:anywhere;line-height:1.1;padding:4px 1px}

.sound-bank{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:16px 0}.sound-bank label{display:grid;gap:8px;font-size:11px;color:#bbcf9e}.sound-bank select{background:#182418;color:#e4f0cc;padding:10px;max-width:100%;border:1px solid #6d8852}.sound-bank a{font-size:12px}

.key.lit,.key.black.lit{background:#c5ef7d;color:#17200d;box-shadow:0 0 16px #a6de6566,inset 0 -3px #657b40}