body:has(#sequencer.active) main{max-width:1240px}
#sequencer{color:#fff;min-width:0}#sequencer .sq-shell{background:#142b3b;border-radius:12px;padding:16px;max-width:1200px;margin:auto}
#sequencer button,#sequencer input,#sequencer select{min-height:44px;font-size:14px}#sequencer button{padding:9px 12px}#sequencer button:disabled,#sequencer select:disabled{opacity:.55}
#sequencer .sq-transport,#sequencer .sq-output,#sequencer .sq-bottom,#sequencer .sq-grid-navigation{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0}
#sequencer label{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-weight:700}#sequencer #sq-bpm{width:76px}#sequencer #sq-name{width:170px}#sequencer #sq-master{width:130px}#sequencer #sq-meter{min-width:82px}
#sequencer .sq-resolution-control{display:grid;gap:6px;padding:9px 11px;border:1px solid #53778a;border-radius:8px;background:#1b394b;font-weight:800}#sequencer .sq-resolution-control>div{display:flex;flex-wrap:wrap;gap:6px}#sequencer .sq-resolution-control button{min-width:94px;display:flex;align-items:center;justify-content:center;gap:5px}#sequencer .sq-resolution-control button[aria-pressed=true]{background:#ff9e3a;color:#132e3f;border-color:#ffd28b}#sequencer .sq-resolution-control button small{font-size:11px}#sequencer #sq-grid-summary{font-size:12px;color:#c5e6f4;font-weight:600}
#sequencer #sq-unsaved{color:#ffd581;font-size:13px}#sequencer #sq-status{min-height:22px;color:#bde8fc;overflow-wrap:anywhere}#sequencer #sq-recovery{background:#375365;border:2px solid #ffbc5b;padding:10px;margin:10px 0}#sequencer #sq-recovery[hidden]{display:none}
#sequencer .sq-grid-navigation{justify-content:flex-end}#sequencer #sq-grid-map{margin-right:auto;color:#cbe7f4;font-size:13px;font-weight:800}#sequencer .sq-grid-navigation button{min-width:140px}
#sequencer .sq-scroll{overflow:auto;max-width:100%;border:1px solid #7eacc3;border-radius:8px;isolation:isolate;overscroll-behavior-x:contain}#sequencer #sq-grid{width:max-content;min-width:100%}
#sequencer .sq-line{display:grid;grid-template-columns:260px repeat(var(--step-count,16),minmax(48px,1fr));align-items:stretch;gap:2px;padding:4px 6px;background:#203e52;border-bottom:1px solid #617e8c}
#sequencer .sq-row-info{position:sticky;left:0;z-index:3;background:#203e52;display:grid;grid-template-columns:1fr 44px 64px;gap:4px;align-content:center;padding:4px 8px 4px 0;box-shadow:3px 0 3px #0004}
#sequencer .sq-choose{grid-column:1/3;text-align:left;white-space:normal;overflow-wrap:anywhere;background:#315b70;border-color:#172f3e}#sequencer .sq-preview{grid-column:3;grid-row:1}#sequencer .sq-mute{grid-column:1;font-size:12px}#sequencer .sq-row-info input{grid-column:2/4;width:100%;max-width:100%}#sequencer .sq-row-info output{grid-column:2/4;font-size:11px;text-align:right}#sequencer .sq-missing{grid-column:1/4;color:#ffdc91;min-height:0;font-size:12px}
#sequencer .sq-beat-head{background:#18364a;padding-top:7px;padding-bottom:7px}#sequencer .sq-beat-head strong,#sequencer .sq-step-head strong{position:sticky;left:0;z-index:4;background:#203e52;padding:10px;box-shadow:3px 0 3px #0004}#sequencer .sq-beat-group{display:flex;align-items:center;justify-content:center;text-align:center;min-width:0;padding:7px 2px;background:#31546a;border-left:4px solid #b4daf0;border-radius:3px;font-weight:850;font-size:13px;white-space:normal}#sequencer .sq-beat-group.sq-current{outline:3px solid #fff;outline-offset:-3px;background:#52798a}
#sequencer .sq-step{min-width:44px;min-height:52px;margin:auto 0!important;background:#142c3e;border:2px solid #7096a9;border-bottom:4px solid #102331;font-size:20px;font-weight:900;color:#d5e7f1;border-radius:5px;padding:6px!important}#sequencer .sq-step[aria-pressed=true]{background:#ff9e3a;color:#132e3f;border-color:#ffc988}#sequencer .sq-beat-start{border-left:4px solid #b4daf0}#sequencer .sq-current{outline:3px solid #fff;outline-offset:-3px;box-shadow:inset 0 -6px #8be9c1}#sequencer .sq-number{text-align:center;padding:10px 2px;font-weight:800}#sequencer .sq-number.sq-current:before{content:'▼';display:block;font-size:10px;line-height:10px}
#sequencer .sq-hint{font-size:13px;line-height:1.5;color:#cae5f0}#sequencer #sq-picker{color:white;background:#18394b;border:2px solid #92d7ee;border-radius:10px;width:min(480px,92vw);max-height:85dvh;overflow:auto;padding:16px}#sequencer #sq-picker::backdrop{background:#071c2ed4}#sequencer .sq-picker-tabs{display:flex;gap:8px;margin:10px 0}#sequencer .sq-picker-tabs [aria-selected=true]{background:#ff9e3a;color:#173348}#sequencer .sq-sounds{height:300px;overflow:auto;margin:10px 0;display:flex;flex-direction:column;gap:6px}#sequencer .sq-sound-choice{display:grid;grid-template-columns:110px 1fr;gap:6px}#sequencer .sq-sound-choice button{text-align:left;white-space:normal}#sequencer .sq-bottom button{min-height:44px}
@media(max-width:700px){#sequencer .sq-shell{padding:10px}#sequencer .sq-line{grid-template-columns:190px repeat(var(--step-count,16),48px)}#sequencer .sq-row-info{grid-template-columns:1fr 44px 52px}#sequencer .sq-row-info button{font-size:12px;padding:6px}#sequencer .sq-transport label{font-size:13px}#sequencer .sq-grid-navigation{justify-content:space-between}#sequencer .sq-grid-navigation button{min-width:0;flex:1}#sequencer .sq-beat-group{font-size:12px}}
@media(max-width:420px){#sequencer .sq-resolution-control button{min-width:0;flex:1}#sequencer .sq-grid-navigation button{font-size:12px;padding:6px}#sequencer .sq-output>small{font-size:12px;line-height:1.4}}