:root{color-scheme:dark;font-family:system-ui,"Yu Gothic",sans-serif;background:#10151e;color:#e4eaf3}*{box-sizing:border-box}body{margin:0}main{max-width:1060px;margin:auto;padding:38px 28px}.eyebrow{color:#80c8f9;letter-spacing:.16em;font-size:11px;font-weight:700}h1{font-size:30px;letter-spacing:.02em;margin:8px 0}h1 span{font-size:12px;vertical-align:middle;background:#283750;color:#b8cee8;padding:5px 9px;border-radius:6px}header p{margin:8px 0 28px;color:#b2bfce}.workspace{display:grid;grid-template-columns:285px 1fr;gap:40px}label{display:block;font-size:13px;color:#adbdd0;margin-bottom:8px}select,button{font:inherit;color:inherit;background:#202b3c;border:1px solid #3d4c64;border-radius:7px;padding:11px}select{width:100%;margin-bottom:10px}button{cursor:pointer;touch-action:none}button:hover{background:#2c3b51}button:active,button.pressed{background:#425d7c}button:focus-visible,select:focus-visible{outline:2px solid #81c9ff;outline-offset:3px}button:disabled{opacity:.45;cursor:default}.primary{width:100%;background:#a0d5f8;color:#102031;border-color:#a0d5f8;font-weight:700}.primary:hover{background:#c3e6ff}.note{font-size:12px;line-height:1.9;color:#98a9bd}#status{padding:12px;border:1px solid #3c536c;border-radius:8px;font-size:13px;line-height:1.65;overflow-wrap:anywhere;background:#1a2635}#status.error{color:#ffb4ad;border-color:#964f4a}h2{font-size:15px;margin-top:25px}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:14px 0}.keypad button{min-height:42px;padding:6px}.keypad small{font-size:10px;color:#98a9bd}.viewer{min-width:0;text-align:center}.device{background:#090d14;border:1px solid #39485b;border-radius:19px;padding:20px;display:inline-block;max-width:100%;box-shadow:0 14px 50px #0004}.device-label,.device-footer{font-size:11px;color:#8495ad;display:flex;justify-content:space-between;gap:45px}.device-label{margin-bottom:14px;letter-spacing:.08em}.device-footer{margin-top:13px}canvas{display:block;background:#020305;image-rendering:pixelated;width:480px;max-width:100%;height:auto;outline:none}details{text-align:left;margin-top:25px;border-top:1px solid #2e3b4e;padding-top:16px;font-size:13px;color:#b2c1d6}summary{cursor:pointer}pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:260px;overflow:auto;font-size:11px;color:#aabbd0;text-align:left}footer{border-top:1px solid #2a3443;margin-top:35px;padding-top:18px;color:#7e8da1;font-size:11px;line-height:1.9}@media(max-width:750px){main{padding:24px 16px}.workspace{grid-template-columns:1fr;gap:24px}.controls{display:contents}.viewer{grid-row:4}.keypad{max-width:330px;width:100%;margin:0 auto}.note{margin:0}h1{font-size:25px}}
:root .support{border-left:3px solid #80c8f9;padding:8px 12px;font-size:12px;line-height:1.8;color:#c6d9ec}
.audio-controls{border:1px solid #3d4c64;border-radius:8px;padding:12px;margin:10px 0 14px}.audio-controls input[type="range"]{width:100%}.audio-controls input[type="checkbox"]{accent-color:#a0d5f8}.audio-controls .note{margin:6px 0 0}
.instrument-controls{margin-top:12px;padding-top:10px}.instrument-controls label{margin-top:12px}.instrument-controls input{max-width:100%;font:inherit;font-size:12px}.instrument-controls button{margin-top:10px;font-size:12px}.instrument-controls .note{overflow-wrap:anywhere}
.dropzone{padding:14px;border:1px dashed #6c8aa9;border-radius:9px;background:#182332}.dropzone input{max-width:100%;font:inherit;font-size:12px}.file-list{padding-left:16px;color:#bdd6ed;font-size:12px;overflow-wrap:anywhere;line-height:1.8}#clear-files{font-size:12px;margin-bottom:20px}#app-name{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#export-save{margin:6px 0 0 6px}footer a{color:#a0d5f8}.controls>.note{margin:14px 0}label[for="renderer"]{margin-top:8px}@media(max-width:750px){.controls{display:block}.workspace{display:flex;flex-direction:column}.viewer{order:-1}canvas{width:100%;min-width:240px}}