*{box-sizing:border-box}body{margin:0;background:#eee9dc;color:#28382d;font:16px/1.5 system-ui,sans-serif}main{max-width:1040px;margin:auto;padding:52px 24px}header{max-width:670px;margin:0 0 42px}.eyebrow{color:#9a6748;font-size:11px;font-weight:800;letter-spacing:.18em}h1{font:500 clamp(42px,7vw,72px)/1.02 Georgia,serif;letter-spacing:-.04em;margin:10px 0 20px}h1 em{font-weight:400;color:#9a6748}h2{font:400 28px Georgia,serif;margin:0}p{color:#5d685c}.panel{background:#faf8f1;border:1px solid #d9d6c8;border-radius:18px;padding:28px;margin:18px 0;box-shadow:0 9px 25px #4b463309}.heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.heading .eyebrow{margin:0 0 4px}button{border:1px solid #334e3b;background:#334e3b;color:white;padding:12px 16px;border-radius:9px;cursor:pointer;font:600 14px system-ui}button:hover{filter:brightness(1.13)}button:focus-visible,input:focus-visible{outline:3px solid #db9b58;outline-offset:2px}.quiet{color:#344b39;background:#f7f4eb;border-color:#c9d0c2}kbd{font:11px system-ui;border:1px solid #aeb9a9;padding:2px 4px;border-radius:3px}.keys{display:grid;grid-template-columns:repeat(13,1fr);gap:4px;margin:24px 0;touch-action:none}.key{min-width:0;height:132px;padding:8px 0;display:flex;flex-direction:column;justify-content:end;gap:6px;background:linear-gradient(90deg,#a66743,#c5946a 50%,#a9714f);border:1px solid #96613f;color:#fff7e9;border-radius:4px 4px 10px 10px;box-shadow:inset 0 5px 10px #fff3,0 4px 0 #805036}.key.sharp{background:linear-gradient(90deg,#76513b,#98735a,#76513b)}.key.active{transform:translateY(3px);box-shadow:0 1px 0 #805036;filter:brightness(1.2)}.key small{font-size:10px}.transport,.presets{display:flex;flex-wrap:wrap;gap:8px}.hint,small{font-size:13px;color:#788274}.controls{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 34px;margin-top:28px}.controls label{font-weight:650}.controls small{display:block;font-weight:400}.controls output{float:right;color:#9a6748;font-size:13px}input[type=range]{width:100%;accent-color:#98704e;display:block;margin:10px 0}.options{display:flex;gap:24px;flex-wrap:wrap;margin-top:24px}input[type=checkbox]{accent-color:#46654d}footer{font-size:12px;color:#8b8d7f;text-align:center;margin:36px}@media(max-width:600px){main{padding:25px 12px}.panel{padding:18px}.controls{grid-template-columns:1fr}.keys{gap:2px}.key{height:105px;font-size:10px}.key small{font-size:9px}.heading{align-items:start}}

select{font:inherit;color:#334e3b;background:#fffdf6;border:1px solid #bdc6b8;border-radius:7px;padding:8px;max-width:100%}.voice-label{display:block;margin:22px 0 8px}.midi{margin-top:16px}.file{border:1px solid #c9d0c2;padding:10px;border-radius:9px;font-size:13px}.file input{max-width:190px;margin-left:8px}input:disabled{opacity:.35}.options label{max-width:100%}.controls small{line-height:1.5;margin-top:6px}.key span{color:#fff7e9}@media(max-width:600px){.options{gap:12px}.file input{max-width:150px}.key{font-size:9px}.transport button{flex:1}}

.engines{display:flex;flex-wrap:wrap;gap:0 28px}.legacy{display:block;margin-top:12px;font-size:14px;color:#5d685c}.legacy select{margin-left:6px}
.spectrum{margin:18px 0 6px;padding:14px 14px 10px;background:#f3efe4;border:1px solid #e1dccd;border-radius:12px}.spectrum svg{display:block;width:100%;height:auto}
.spectrum text{font:10px system-ui;fill:#8b8d7f}.spectrum .grid{stroke:#ddd7c6;stroke-width:1}.spectrum .p{stroke-width:3.2;stroke-linecap:butt}
.spectrum .bar{stroke:#c5946a}.spectrum .fast{stroke:#e2bf98}.spectrum .body{stroke:#6f8f72}.spectrum .later{stroke:#6e4a33;stroke-width:3.2}
.spectrum .noise{fill:#db9b58;fill-opacity:.08;stroke:#db9b58;stroke-opacity:.55;stroke-width:1.1}.spectrum .contact{fill:none;stroke:#7d8a79;stroke-width:1.3;stroke-dasharray:4 3}
.spectrum figcaption{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;font-size:12px;color:#6c7569}.spectrum figcaption span::before{content:"";display:inline-block;width:12px;height:8px;margin-right:5px;border-radius:2px;vertical-align:0}
.key-bar::before{background:#c5946a}.key-later::before{background:#6e4a33}.key-fast::before{background:#e2bf98}.key-body::before{background:#6f8f72}.key-noise::before{background:#db9b5820;border:1px solid #db9b58}.key-contact::before{height:0!important;border-top:1.5px dashed #7d8a79}
.spectrum #shares{margin:8px 0 0}
.riff-tools{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin:16px 0}.riff-tools label,.match{font-size:14px;display:inline-flex;align-items:center;gap:6px}.riff-tools input[type=number]{width:72px;padding:8px;border-radius:7px;border:1px solid #bdc6b8;font:inherit}.match{padding:8px}.roll-wrap{overflow-x:auto;margin:16px 0}.riff-panel{min-width:0}#roll{min-width:560px;display:grid;grid-template-columns:38px repeat(16,minmax(24px,1fr));gap:3px}.pitch,.beat{font-size:12px;color:#526550;text-align:center;align-self:center}.pitch{position:sticky;left:0;background:#faf8f1;z-index:1}.step{height:24px;padding:0;border-radius:3px;background:#edeae0;border:1px solid #dad9c9;color:#fff;font-size:12px}.step.downbeat{border-left:2px solid #a4ad9d}.step[aria-pressed=true]{background:#58765b;border-color:#49644c}.step[data-strength="0.45"]{background:#718b73}.step[data-strength="1"]{background:#a2613b}.step.now{box-shadow:inset 0 -3px #deae65}.export-state{position:sticky;bottom:12px;margin:auto;background:#28382d;color:white;padding:12px 18px;border-radius:12px;z-index:4}.export-state[hidden], [hidden]{display:none!important}button:disabled{opacity:.45;cursor:default}#barPage{font-size:14px;color:#526550}