:root{--bg:#060607;--fg:#f2e4e6;--dim:#9a8488;--acc:#ff2f4e;--acc2:#ff8a3d;--line:#2a1418;--panel:#0e0b0c}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.4 system-ui,sans-serif}
main{padding:12px;max-width:760px;margin:0 auto}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible{outline:2px solid var(--acc2);outline-offset:2px}
.start{display:block;width:100%;min-height:96px;background:var(--panel);border:1px solid var(--acc);border-radius:10px;color:var(--acc);font-size:18px}
.start:hover{background:#1a0e10}
.ctl{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-bottom:12px}
.ctl label{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--dim);flex:1 1 110px}
.ctl input{width:100%;accent-color:var(--acc)}
.oct{display:flex;align-items:center;gap:6px}
.oct button{width:36px;height:36px;background:var(--panel);border:1px solid var(--line);border-radius:6px}
.keys{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:10px}
.keys button{flex:1 1 38px;min-height:64px;background:var(--fg);color:#111;border:0;border-radius:6px;font-weight:600;touch-action:none}
.keys button.black{background:#1a0e10;color:var(--fg);border:1px solid var(--line)}
.pads{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:6px}
.pads button{min-height:56px;background:var(--panel);border:1px solid var(--line);border-radius:8px;touch-action:none}
.pads b{color:var(--acc);margin-right:6px}
.keys button.on,.pads button.on{background:var(--acc2);color:#111;border-color:var(--acc2)}
.hint,.credit{color:var(--dim);font-size:12px;margin:8px 0 0}
.credit a{color:var(--dim)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}