.drop{border-style:dashed;border-color:var(--border-strong);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 24px;transition:border-color .15s,background .15s;display:flex}.drop h2{margin-bottom:4px}.drop p{margin:0;font-size:.9rem}.drop.over{border-color:var(--accent);background:var(--accent-soft)}.drop-actions{flex-wrap:wrap;gap:8px;display:flex}.drop .error{color:#ff6b6b;flex-basis:100%;font-size:.9rem}.drop.busy .drop-actions .btn{opacity:.45;pointer-events:none}.rec-dot{background:#ff3b30;border-radius:50%;width:8px;height:8px;margin-right:8px;box-shadow:0 0 6px #ff3b30b3}.recorder,.progress{flex-basis:100%}.recorder{flex-wrap:wrap;align-items:center;gap:12px 16px;display:flex}.recorder[hidden],.progress[hidden]{display:none}.recorder .rec-dot{animation:1s steps(2,start) infinite rec}@keyframes rec{to{visibility:hidden}}.meter{background:var(--surface-2);border:1px solid var(--border);border-radius:5px;flex:1;min-width:140px;height:10px;overflow:hidden}.meter i{background:linear-gradient(to right, var(--ok) 60%, #ffb020 85%, #ff4d4d);background-size:var(--meter-w,300px) 100%;width:0;height:100%;transition:width 60ms linear;display:block}.progress-row{color:var(--text-2);justify-content:space-between;gap:12px;margin-bottom:8px;font-size:.88rem;display:flex}.progress .bar{background:var(--surface-2);border-radius:3px;height:6px;overflow:hidden}.progress .bar i{background:var(--accent);width:0;height:100%;box-shadow:0 0 10px var(--accent-glow);transition:width .2s;display:block}.progress.indeterminate .bar i{width:30%;animation:1.2s ease-in-out infinite sweep}@keyframes sweep{0%{transform:translate(-100%)}to{transform:translate(340%)}}.lcd{background:#0a0605;border:1px solid #2a1810;border-radius:8px;flex-wrap:wrap;gap:10px 22px;padding:10px 16px 8px;display:flex;box-shadow:inset 0 0 18px #ff5a1f1f,inset 0 1px 6px #0009}:root[data-theme=light] .lcd{background:#1a0f0a}.lcd>div{flex-direction:column;min-width:3.4em;display:flex}.lcd .label{color:#8a5a44;margin-bottom:2px}.lcd .v{font-family:var(--lcd);color:#ff7a3d;text-shadow:0 0 8px #ff6a33b3;white-space:nowrap;font-size:1.45rem;font-weight:700;line-height:1.1}.lcd .wide{min-width:6em}.lcd .pos{margin-left:auto}.settings{flex-wrap:wrap;align-items:flex-start;gap:16px 22px;display:flex}.settings .check{align-self:flex-end}.field{flex-direction:column;min-width:0;display:flex}.field b{color:var(--text);font-weight:500;font-family:var(--mono);letter-spacing:0;margin-left:4px}.field input[type=range]{width:170px;accent-color:var(--accent);height:22px;margin:0}.field .hint{color:var(--text-3);justify-content:space-between;font-size:.7rem;display:flex}.field select{max-width:100%;height:34px}.tempo-field input{width:84px;height:34px}.check{color:var(--text-2);align-items:center;gap:7px;height:34px;font-size:.88rem;display:inline-flex}.seg{border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface-2);display:inline-flex;overflow:hidden}.seg label{cursor:pointer;position:relative}.seg label+label{border-left:1px solid var(--border-strong)}.seg input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.seg span{min-height:34px;color:var(--text-2);flex-direction:column;justify-content:center;padding:6px 14px;font-size:.86rem;display:flex}.seg strong{color:inherit;font-weight:500}.seg small{color:var(--text-3);font-size:.72rem}.seg input:checked+span{background:var(--accent-soft);color:var(--accent-ink);box-shadow:inset 0 -2px 0 var(--accent)}.seg input:focus-visible+span{outline:2px solid var(--accent);outline-offset:-2px}.seg.small span{min-height:32px;padding:4px 12px}.result{flex-direction:column;gap:14px;display:flex}.result .panel-head{margin-bottom:0}.tool h2.file-name{font-family:var(--mono);letter-spacing:0;text-transform:none;color:var(--text);overflow-wrap:anywhere;font-size:1rem}.head-actions{gap:8px;display:flex}.result .notice{margin:0}.transport{flex-wrap:wrap;align-items:center;gap:10px 14px;display:flex}.transport .play{min-width:84px}.zoom{gap:6px;margin-left:auto;display:flex}.zoom .btn{justify-content:center;width:32px;padding:0;font-size:1rem}.roll-box{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);position:relative;overflow:auto hidden}.roll-box canvas{cursor:crosshair;display:block;position:sticky;left:0}.roll-box .spacer{height:1px;margin-top:-1px}.readout{color:var(--text-3);min-height:1.3em;margin:0;font-size:.8rem}.credit{margin-top:2rem;font-size:.82rem}@media (width<=640px){.seg span{padding:6px 10px}.field input[type=range]{width:100%}.settings .field{flex:140px}.settings .mode-field{flex-basis:100%}.lcd .pos{margin-left:0}}