:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#eae6dc;--panel:#f4f1e9;--ink:#14130f;--line:#14130f;--dim:#6f6b60;--accent:#ff5b1f;--accent-ink:#14130f;--screen-bg:#1c1c18;--screen-fg:#ff9a4d;--screen-dim:#6b4a30;--danger:#e24b3f;--shadow-offset:4px;font-family:Helvetica Neue,Arial,system-ui,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle, #14130f14 1px, transparent 1px) 0 0 / 14px 14px, var(--bg);min-height:100vh;color:var(--ink);justify-content:center;margin:0;padding:2.5rem 1rem;display:flex}.metronome{flex-direction:column;gap:1.25rem;width:100%;max-width:420px;display:flex}.brand{align-items:center;gap:.6rem;display:flex}.brand h1{letter-spacing:.12em;flex:1;margin:0;font-size:1.05rem;font-weight:800}.brand-tag{letter-spacing:.08em;color:var(--dim);border:1.5px solid var(--line);border-radius:3px;padding:.1rem .35rem;font-size:.7rem;font-weight:700}.power-led{border:1.5px solid var(--line);background:#b9b4a6;border-radius:50%;flex-shrink:0;width:.6rem;height:.6rem;transition:background-color .1s,box-shadow .1s}.power-led.on{background:var(--accent);box-shadow:0 0 8px #ff5b1fb3}.panel{background:var(--panel);border:1.5px solid var(--line);box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--line);border-radius:10px;flex-direction:column;gap:.85rem;padding:1rem;display:flex}.chassis{background:var(--panel);border:1.5px solid var(--line);box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--line);border-radius:10px;overflow:hidden}.chassis>section{border-bottom:1.5px dashed #14130f40;flex-direction:column;gap:.85rem;padding:1rem;display:flex}.chassis>section:last-child{border-bottom:none}.chassis>.screen{background:var(--screen-bg);border-bottom:1.5px solid var(--line);gap:.9rem}.screen-row{gap:.75rem;display:flex}.screen-block{flex-direction:column;gap:.2rem;display:flex}.screen-block--main{flex:1}.screen-label{letter-spacing:.14em;color:var(--screen-dim);font-size:.65rem;font-weight:700}.screen-value{color:var(--screen-fg);font-variant-numeric:tabular-nums;text-shadow:0 0 10px #ff9a4d59;font-family:SF Mono,Roboto Mono,ui-monospace,monospace;font-size:2.75rem;font-weight:700;line-height:1}.screen-value--sig{align-self:flex-end;padding-bottom:.35rem;font-size:1.6rem}.beat-dots{flex-wrap:wrap;justify-content:center;gap:.5rem;min-height:1rem;display:flex}.beat-dot{border:1.5px solid var(--screen-dim);background:0 0;border-radius:2px;width:.85rem;height:.85rem}.beat-dot.accent{width:1.1rem;height:1.1rem}.beat-dot.active{background:var(--screen-fg);border-color:var(--screen-fg);box-shadow:0 0 8px #ff9a4db3}.beat-dot.accent.active{background:var(--accent);border-color:var(--accent)}label{letter-spacing:.08em;color:var(--dim);font-size:.7rem;font-weight:700}input[type=range]{width:100%;accent-color:var(--accent)}.sync-toggle{align-items:center;gap:.45rem;display:flex}.sync-toggle input[type=checkbox]{accent-color:var(--accent);width:1rem;height:1rem}.key-hints{letter-spacing:.06em;color:var(--dim);margin:0;font-family:SF Mono,Roboto Mono,ui-monospace,monospace;font-size:.65rem;font-weight:700}.bpm-row{gap:.6rem;display:flex}input[type=number],input[type=text],select{border:1.5px solid var(--line);color:var(--ink);background:#fff;border-radius:6px;width:100%;padding:.55rem .6rem;font-size:1rem;font-weight:600}button{border:1.5px solid var(--line);background:var(--panel);color:var(--ink);letter-spacing:.04em;cursor:pointer;box-shadow:3px 3px 0 var(--line);border-radius:6px;padding:.6rem 1rem;font-size:.85rem;font-weight:700;transition:transform 60ms,box-shadow 60ms}button:active{box-shadow:0 0 0 var(--line);transform:translate(3px,3px)}.btn-block{background:#fff;flex-shrink:0}.quick-signatures{flex-wrap:wrap;gap:.5rem;display:flex}.chip{background:#fff;flex:1;min-width:3.5rem;font-family:SF Mono,Roboto Mono,ui-monospace,monospace}.custom-signature{align-items:end;gap:.5rem;display:flex}.custom-signature label{flex-direction:column;flex:1;gap:.3rem;display:flex}.custom-signature .slash{color:var(--dim);padding-bottom:.4rem;font-size:1.4rem;font-weight:700}.start-stop{letter-spacing:.12em;background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--line);padding:1.15rem;font-size:1.15rem;font-weight:800}.start-stop:active{transform:translate(var(--shadow-offset), var(--shadow-offset));box-shadow:0 0 0 var(--line)}.start-stop.running{background:var(--danger)}.panel h2{letter-spacing:.12em;color:var(--dim);margin:0;font-size:.75rem;font-weight:800}.drum-keys{gap:.75rem;display:flex}.key-cap{background:#fff;flex:1;justify-content:center;align-items:baseline;gap:.4rem;font-family:SF Mono,Roboto Mono,ui-monospace,monospace;font-size:1.3rem;display:flex}.key-cap-label{letter-spacing:.08em;color:var(--dim);font-family:Helvetica Neue,Arial,system-ui,sans-serif;font-size:.65rem;font-weight:700}.preset-save{gap:.5rem;display:flex}.preset-save input{text-transform:uppercase}#preset-list{flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}#preset-list li{gap:.5rem;display:flex;overflow:hidden}.preset-load{text-align:left;letter-spacing:normal;text-transform:none;background:#fff;flex:1;font-weight:600}.preset-delete{background:#fff;flex-shrink:0}