*{box-sizing:border-box}html,body{margin:0;padding:0;background:transparent;color:#202938;font:16px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body{padding:2px}main{border:1px solid #dbe1e8;border-radius:14px;background:#f7f9fc;padding:22px}h2{font-size:19px;line-height:1.3;margin:0 0 8px;font-weight:700}p{margin:0 0 16px}.cue{color:#435066;font-size:15px}.variants{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}button{font:inherit;cursor:pointer;touch-action:manipulation;border:1px solid #bcc8d8;border-radius:8px;min-height:44px;padding:9px 15px;color:#26364c;background:#fff;font-weight:600}button[aria-pressed=true]{border-color:#244b7d;background:#e2ecfa;color:#173f73;box-shadow:inset 0 0 0 1px #244b7d}button:hover{border-color:#244b7d}button:focus-visible,input:focus-visible{outline:3px solid #b35c05;outline-offset:3px}button:disabled{cursor:default;opacity:.5}.description{font-size:14px;min-height:42px;margin-bottom:13px;color:#435066}.transport{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.play{background:#244b7d;color:white;border-color:#244b7d;min-width:112px;display:inline-flex;align-items:center;justify-content:center;gap:8px}.play svg{width:16px;height:16px;fill:currentColor}.volume{display:flex;align-items:center;gap:8px;font-size:13px;margin-left:auto}.volume input{width:78px;accent-color:#244b7d;min-height:36px}.progress{height:5px;border-radius:5px;background:#dce4ef;margin-top:18px;overflow:hidden}.progress span{height:100%;width:0;display:block;background:#244b7d}.status{display:flex;justify-content:space-between;font-size:12px;color:#526078;margin:6px 0 0;gap:10px;font-variant-numeric:tabular-nums}.layers{display:flex;gap:14px;flex-wrap:wrap;border:0;padding:0;margin:12px 0}.layers legend{font-size:13px;margin-bottom:5px;color:#526078}.layers label{font-size:14px;min-height:32px;display:flex;gap:6px;align-items:center}.layers input{width:18px;height:18px;accent-color:#244b7d}.counts{margin:14px 0}.count-row{display:flex;align-items:center;gap:10px;margin-top:7px}.count-name{font-size:12px;width:115px;flex-shrink:0;color:#435066}.steps{display:flex;gap:4px;flex:1}.step{flex:1;text-align:center;border:1px solid #cbd6e3;border-radius:5px;font-size:13px;padding:4px 0;background:white;min-width:0}.step.active{background:#244b7d;color:white;border-color:#244b7d;font-weight:700;text-decoration:underline;text-underline-offset:3px}.error{color:#95291f;margin-top:10px;font-size:14px}.note{font-size:12px;color:#526078;margin-top:12px;margin-bottom:0}@media(max-width:480px){main{padding:17px 14px}h2{font-size:18px}.variants button{flex:1 1 auto;padding:9px 10px;font-size:14px}.description{min-height:0}.count-row{display:block}.count-name{display:block;width:auto;margin-bottom:4px}.volume{margin-left:0}.transport{justify-content:center}.steps{gap:3px}.step{font-size:12px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.steps.long{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}.transport{justify-content:center}.volume{margin-left:0}
.keyboard{height:100px;position:relative;margin:14px 0;border:1px solid #526078;border-radius:4px;overflow:hidden}.key{position:absolute;display:flex;align-items:flex-end;justify-content:center;font-size:11px;padding-bottom:6px;bottom:0;border:1px solid #8190a4;border-top:0}.key.white{height:100%;background:#fff}.key.black{height:62%;top:0;background:#253044;color:white;z-index:1;font-size:10px;padding-bottom:5px;border-radius:0 0 3px 3px}.key.active{background:#f7d474;color:#172033;font-weight:800;box-shadow:inset 0 0 0 2px #815a00;text-decoration:underline}@media(max-width:360px){.key{font-size:9px}.key.black{font-size:8px}}
.layer-pair{display:flex;align-items:center;gap:7px}.solo{font-size:12px;padding:4px 9px}.adjust{display:flex;align-items:center;justify-content:center;gap:10px;font-size:14px;margin:12px 0;flex-wrap:wrap}.adjust button{min-width:44px}.adjust output{min-width:32px;text-align:center}.adjust input{max-width:160px}.waveform canvas{width:100%;height:100px;display:block;border:1px solid #cad4df;border-radius:4px;background:white}.waveform{margin:10px 0}.waveform p{margin:0 0 6px}.status{min-height:18px}
[hidden]{display:none!important}

.compact main{padding:16px}.transport{margin:12px 0 16px}.compact .description{min-height:0;margin-bottom:10px}.compact .transport{margin-top:0}