:root { color-scheme: dark; --bg:#101117; --surface:#1b1d27; --surface-2:#242735; --surface-3:#313446; --border:#343746; --text:#f8f8fb; --muted:#adb1c3; --dim:#7f8499; --pink:#fb728d; --cyan:#7edfd2; --yellow:#ffd586; --purple:#b9a0ff; --blue:#86c4ff; --green:#a9dc9c; font-synthesis:none; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); font:400 15px/1.45 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--text); }
button,input,select { font:inherit; } button { cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; } button:disabled { cursor:not-allowed; opacity:.35; }
button:focus-visible, input:focus-visible, select:focus-visible, label.import-btn:focus-within { outline:3px solid var(--cyan); outline-offset:3px; }
.topbar { border-bottom:1px solid #2e303b; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px max(20px,calc((100% - 1120px)/2)); }
.brand,.head-right { display:flex; align-items:center; gap:12px; } .brand-name { letter-spacing:.085em; font-size:17px; font-weight:850; } .brand-name b { color:var(--pink); } .brand-icon { display:grid;place-items:center; font-size:23px; width:35px;height:35px;background:var(--pink);color:#191721;border-radius:9px; } .brand small { font-size:10px; color:var(--muted); align-self:flex-end; margin-left:-8px; } .saved-status { font-size:12px; color:var(--muted); }
.icon-button { display:grid;place-items:center; width:33px;height:33px; border-radius:50%;background:var(--surface-2);color:var(--muted);border:1px solid var(--border);font-weight:800; }
.wrap { max-width:1160px; margin:auto; padding:26px 20px 20px; } .hero { display:flex;align-items:center;justify-content:space-between; gap:30px;margin:8px 0 24px; } .eyebrow,.panel-label,.mini-label { color:var(--muted); font-size:10px; letter-spacing:.13em; font-weight:850; } .eyebrow {color:var(--pink)} h1,h2,h3,p { margin:0; } h1 { font-size:clamp(27px,4vw,46px); letter-spacing:-.045em;line-height:1.16;margin:6px 0 8px;} h2 { font-size:20px;letter-spacing:-.025em;} h3 {font-size:17px;} .hero p,.editor-top p,.instrument-head p,.section-head p,.export-card p,.section-intro p { color:var(--muted);margin-top:5px; }
.hero-mark { flex:none;display:grid;grid-template-columns:repeat(2,35px); gap:5px;transform:rotate(-15deg);margin-right:40px;}.hero-mark span {font-size:40px;line-height:30px;color:var(--pink)}.hero-mark span:nth-child(2){color:var(--cyan)}.hero-mark span:nth-child(3){color:var(--yellow)}.hero-mark span:nth-child(4){color:var(--purple)}
.transport { background:linear-gradient(120deg,#242633,#1b1c26);border:1px solid var(--border);border-radius:18px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px;margin-bottom:22px;}.play-button {border:0;min-height:54px;padding:0 27px;background:var(--cyan);border-radius:12px;color:#15222c;font-weight:900;letter-spacing:.05em;display:flex;gap:13px;align-items:center;justify-content:center;}.play-button.playing{background:var(--pink)}.play-button #playIcon{font-size:20px}.rec-button{display:flex;gap:9px;align-items:center;min-height:48px;border-radius:11px;background:transparent;color:var(--muted);border:1px solid var(--border);font-size:11px;letter-spacing:.05em;font-weight:800;padding:0 13px;}.rec-dot {width:11px;height:11px;background:#80515e;border-radius:50%;display:inline-block;}.rec-button.active{color:#fff;border-color:var(--pink);background:#472b3a;}.rec-button.active .rec-dot{background:#ff4f77;box-shadow:0 0 0 3px #ff4f772c;}.tempo{display:flex;flex-direction:column;gap:4px;margin-left:auto}.tempo-controls{display:flex;align-items:center;gap:7px}.square-button{width:34px;height:34px;display:grid;place-items:center;background:var(--surface-3);border:1px solid var(--border);border-radius:8px;color:var(--text);font-weight:900;font-size:20px;}.tempo-controls input{width:56px;text-align:center;font-weight:900;font-size:20px;border:0;background:transparent;color:var(--text);-moz-appearance:textfield;}.tempo-controls input::-webkit-inner-spin-button,.tempo-controls input::-webkit-outer-spin-button {-webkit-appearance:none;margin:0}.bpm-unit{color:var(--muted);font-size:11px;font-weight:800}.volume {display:flex;flex-direction:column;gap:8px;min-width:116px;}.volume input {accent-color:var(--cyan);width:120px;}
.tabs {display:flex;gap:8px; border-bottom:1px solid var(--border);margin:0 0 22px;padding-bottom:10px;overflow-x:auto;}.tab{border:0;border-radius:10px;padding:11px 18px;background:transparent;color:var(--muted);white-space:nowrap;font-weight:800;}.tab.active{background:var(--surface-2);color:var(--text);}.page{display:block;}.hidden{display:none!important;}.card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:20px;margin-bottom:16px;}
.pattern-bar{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:15px;}.pattern-left,.pattern-actions,.pattern-buttons{display:flex;align-items:center;gap:10px;}.pattern-buttons{gap:6px;}.pattern-btn{width:43px;height:43px;border-radius:10px;border:1px solid var(--border);color:var(--muted);background:var(--surface-2);font-weight:950;font-size:16px;}.pattern-btn.active{border-color:var(--pink);background:var(--pink);color:#271a22}.subtle-btn{background:transparent;border:1px solid var(--border);border-radius:9px;padding:10px;color:var(--muted);font-size:12px;font-weight:750;min-height:42px;}.subtle-btn.danger{color:#e7a3ae}.soft-badge{font-size:11px;border-radius:20px;padding:4px 8px;background:var(--surface-3);color:var(--muted);vertical-align:middle;font-weight:700;margin-left:7px;}.editor-top,.instrument-head,.section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;}.editor-top{margin-bottom:16px}.editor-top p{font-size:13px}.page-switch{display:none;gap:4px;background:var(--surface-2);border-radius:9px;padding:3px;flex:none}.page-switch button{border:0;color:var(--muted);background:transparent;border-radius:7px;padding:8px;font-size:12px;font-weight:800;}.page-switch button.active{background:var(--pink);color:#1e1b23;}
.tracks,.steps-scale{display:grid;grid-template-columns:122px repeat(16,minmax(22px,1fr));gap:5px;align-items:center;}.steps-scale{margin-bottom:6px;}.step-number{font-size:10px;text-align:center;color:var(--dim);font-weight:850;}.step-number.beat-start{color:var(--text)}.track-name{border:0;border-radius:9px;background:var(--surface-2);color:var(--text);display:flex;align-items:center;text-align:left;gap:8px;padding:7px 6px;min-height:39px;font-size:12px;font-weight:800;white-space:nowrap}.track-name.active{outline:2px solid var(--cyan);outline-offset:-2px}.track-name .track-disc{width:10px;height:10px;border-radius:50%;background:var(--track-color);flex:none}.track-name .track-label{flex:1;overflow:hidden;text-overflow:ellipsis;}.mute-button{border:0;background:transparent;color:#74798f;padding:0 2px;font-size:10px;font-weight:850;border-radius:5px}.mute-button.muted{color:#ff8484;background:#552b37}.step{position:relative;width:100%;min-width:0;height:39px;border:1px solid #353847;background:#303340;border-radius:6px;color:#1b1b22;font-size:10px;font-weight:900;padding:0;overflow:hidden;}.step.quarter{border-left-color:#6a6d7d}.step.on{background:var(--track-color);border-color:transparent;box-shadow:inset 0 -3px 0 #00000022;}.step.now{outline:2px solid white;outline-offset:1px}.step:not(.on).now{background:#626879}.step-name{pointer-events:none;}.track-row{display:contents}.grid-key{display:flex;align-items:center;gap:7px;flex-wrap:wrap;color:var(--dim);font-size:11px;margin-top:16px}.legend-dot{width:9px;height:9px;border-radius:3px;display:inline-block;}.active-dot{background:var(--pink)}.now-dot{background:#fff}.grid-hint{margin-left:auto}.instrument{margin-bottom:22px;}.instrument-head{margin-bottom:17px}.instrument-head h2{margin-top:2px}.instrument-head p{font-size:13px}.instrument-controls{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}.instrument-controls label{display:flex;flex-direction:column;gap:5px;}.instrument-controls select{border:1px solid var(--border);background:var(--surface-2);border-radius:8px;color:var(--text);height:37px;padding:0 9px;font-size:14px}.octave{display:flex;align-items:center;gap:8px}.octave span{min-width:72px;text-align:center;color:var(--muted);font-size:12px}.pads{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:9px;}.pad{position:relative;min-height:88px;border:0;border-radius:12px;background:var(--surface-3);color:var(--text);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;font-size:21px;font-weight:900;user-select:none;touch-action:manipulation;box-shadow:inset 0 -6px 0 #00000025;}.pad small{font-size:9px;font-weight:800;color:var(--muted);}.pad:active,.pad.pressed{transform:translateY(3px);box-shadow:inset 0 -2px 0 #00000030;background:var(--cyan);color:#122127}.pad.selected{outline:2px solid var(--cyan);outline-offset:2px}.pad.drum{background:var(--pad-color);color:#171921}.pad.drum small{color:#292b35}.pad-tip{margin-top:13px;color:var(--dim);font-size:12px}.instrument-controls.controls-hidden{display:none}
.song-card{padding:24px}.section-head{margin-bottom:20px}.insert-patterns{display:flex;gap:10px;margin-bottom:20px}.add-pattern{flex:1;min-height:56px;border:0;border-radius:11px;font-size:17px;font-weight:950;color:#222029}.add-pattern.a,.song-block.a{background:var(--pink)}.add-pattern.b,.song-block.b{background:var(--cyan)}.add-pattern.c,.song-block.c{background:var(--yellow)}.add-pattern.d,.song-block.d{background:var(--purple)}.song-blocks{display:flex;flex-wrap:wrap;gap:8px;min-height:90px;align-content:start;border:1px dashed #545869;border-radius:12px;padding:13px;margin-bottom:12px}.song-block{width:48px;height:55px;border:0;border-radius:9px;font-size:17px;font-weight:900;color:#24202b;position:relative}.song-block::after{content:"×";position:absolute;right:4px;top:0px;font-size:14px;opacity:.55}.song-block.now-song{outline:3px solid #fff;outline-offset:2px}.song-empty{color:var(--muted);align-self:center;margin:auto;text-align:center;font-size:13px}.song-note,.smallprint{color:var(--dim);font-size:12px;margin-bottom:16px}.row-buttons,.export-buttons{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}.primary-btn,.secondary-btn{border-radius:11px;min-height:46px;padding:11px 16px;font-weight:850;display:inline-flex;align-items:center;justify-content:center;gap:5px;text-decoration:none}.primary-btn{border:0;background:var(--cyan);color:#1a292a}.secondary-btn{border:1px solid var(--border);background:var(--surface-2);color:var(--text)}.export-card{display:flex;flex-direction:column;gap:6px}.export-card p{font-size:13px}.export-card .smallprint{margin:3px 0 0}.import-btn{cursor:pointer}.section-intro{margin:12px 0 20px}.section-intro h2{font-size:25px}.sample-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.sample-card{margin-bottom:16px}.sample-head{display:flex;align-items:center;gap:11px;margin-bottom:8px}.sample-symbol{display:grid;place-items:center;width:42px;height:42px;background:#33425a;border-radius:11px;font-size:22px}.sample-card:nth-child(2) .sample-symbol{background:#49395f}.sample-head h3{font-size:18px}.sample-status{font-size:12px;color:var(--muted);margin-top:5px;min-height:22px}.sample-controls{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 6px}.sample-controls button,.file-load{border:1px solid var(--border);background:var(--surface-2);color:var(--text);border-radius:9px;min-height:42px;padding:9px 11px;font-size:12px;font-weight:750;cursor:pointer}.sample-controls .recording{border-color:#ff6087;color:#ffafbd}.sample-controls .remove-sample{color:#e99daa}.tip-card p{margin-top:8px;color:var(--muted);font-size:13px}.tip-card .warning-note{color:#e3cc9f;margin-top:16px}footer{padding:12px 2px 28px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--dim)}footer b{color:var(--muted)}.toast{position:fixed;z-index:999;bottom:20px;left:50%;max-width:min(90vw,560px);transform:translate(-50%,15px);padding:12px 17px;border:1px solid #646a81;background:#292d40;color:#fff;border-radius:12px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;font-size:13px}.toast.show{opacity:1;transform:translate(-50%,0)}dialog{border:1px solid var(--border);border-radius:20px;background:#1c1e29;color:var(--text);max-width:min(540px,92vw);padding:0;}dialog::backdrop{background:#070810c7}.dialog-content{padding:25px}.dialog-content h2{font-size:25px}.dialog-content ol{padding-left:20px;line-height:1.85;color:var(--muted)}.dialog-content p{color:var(--muted);margin:12px 0 18px}
@media(min-width:1100px){.tracks,.steps-scale{grid-template-columns:150px repeat(16,minmax(25px,1fr));}.step,.track-name{height:43px}.pad{min-height:105px}}
@media(max-width:760px){.hero-mark{margin-right:10px}.transport{gap:9px}.volume{min-width:95px}.volume input{width:100px}.tracks,.steps-scale{grid-template-columns:100px repeat(16,minmax(17px,1fr));gap:4px}.track-name{font-size:11px}.step{height:38px}.grid-hint{display:none}.pads{gap:6px}.pad{min-height:75px}.sample-cards{grid-template-columns:1fr}.sample-card{margin-bottom:0}.sample-cards{margin-bottom:16px}}
@media(max-width:620px){.topbar{padding:11px 16px}.wrap{padding:18px 12px}.hero{margin:5px 0 18px}.hero-mark{display:none}.hero p{font-size:13px}.brand-name{font-size:15px}.saved-status{font-size:10px}.transport{padding:11px;border-radius:14px}.play-button{min-height:50px;padding:0 16px}.rec-button{min-height:50px;font-size:10px;flex:1;justify-content:center}.tempo{margin-left:0;flex:1}.volume{flex:1;align-items:flex-end}.volume input{width:100%}.tabs{margin-bottom:16px;gap:4px}.tab{padding:10px 12px;font-size:12px}.card{padding:13px;border-radius:14px}.pattern-bar{gap:10px}.pattern-left{gap:7px}.pattern-actions{gap:6px}.pattern-btn{height:39px;width:38px}.subtle-btn{font-size:11px;padding:8px;min-height:38px}.editor-top{gap:8px;align-items:start;}.editor-top p{font-size:12px}.editor-top h2{font-size:17px}.page-switch{display:flex}.soft-badge{font-size:9px;margin-left:3px}.tracks,.steps-scale{grid-template-columns:83px repeat(8,minmax(0,1fr));gap:4px}.step{height:37px;border-radius:5px;font-size:9px}.track-name{height:37px;min-height:37px;font-size:10px;gap:4px;padding:3px 4px}.track-name .track-disc{width:7px;height:7px}.mute-button{font-size:9px}.instrument-head{flex-direction:column;gap:12px}.instrument-controls{align-items:center}.instrument-controls select{height:32px}.pad{min-height:71px;font-size:18px}.pads{gap:5px}.pad small{font-size:8px}.instrument{margin-top:12px}.song-card{padding:17px}.section-head{gap:4px}.section-head h2{font-size:20px}.add-pattern{min-height:50px}.export-buttons{flex-direction:column}.row-buttons button{flex:1}.sample-card{padding:16px}}
@media(max-width:355px){.tracks,.steps-scale{grid-template-columns:78px repeat(8,minmax(0,1fr));gap:3px}.pattern-bar{flex-wrap:wrap}.pattern-actions{width:100%;justify-content:flex-end}.editor-top p{max-width:190px}.pads{grid-template-columns:repeat(4,1fr)}.play-button{padding:0 12px}.rec-button{padding:0 8px}}
@media(prefers-reduced-motion:reduce){.toast{transition:none}.pad:active,.pad.pressed{transform:none}}
.track-name{display:flex;gap:4px}.select-track{min-width:0;display:flex;align-items:center;gap:6px;flex:1;border:0;background:transparent;text-align:left;color:inherit;padding:0;font-size:inherit;font-weight:inherit;white-space:nowrap;cursor:pointer}.select-track .track-disc{display:inline-block;flex:none}.select-track .track-label{min-width:0;overflow:hidden;text-overflow:ellipsis}.mute-button{min-width:16px;min-height:26px;flex:none}.track-name.active .select-track{color:#fff}

/* AirSynth 0.2 */
.air-intro {display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 18px}
.air-intro h2{font-size:clamp(23px,3vw,33px);margin:3px 0 5px}
.air-intro p,.air-scale-hint{color:var(--muted);font-size:13px}
.air-label-badge{color:var(--purple);font-size:12px;letter-spacing:.2em;font-weight:900;white-space:nowrap}
.air-main{padding:22px}.air-action-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:19px}
.air-sensor{background:var(--purple);color:#201b30;border:0;border-radius:11px;padding:11px 16px;font-weight:900;min-height:46px}
.air-sensor.active{background:#2c3040;color:var(--purple);border:1px solid var(--purple)}
#airSensorStatus{color:var(--muted);font-size:12px;flex:1;min-width:145px}
#airSensorStatus.sensor-ok{color:var(--green)}
.air-playing-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(190px,1fr);gap:23px}
.air-readout{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:4px 0 13px}
.air-note{font-size:53px;font-weight:950;letter-spacing:-.07em;line-height:1}
.air-hz{color:var(--purple);font-size:18px;font-weight:700}
.air-filter-readout{margin-left:auto;color:var(--dim);font-size:11px;letter-spacing:.08em}
.air-filter-readout strong{display:block;color:var(--text);font-size:16px;letter-spacing:0}
.air-xy{height:270px;position:relative;overflow:hidden;border:1px solid #55526d;border-radius:17px;touch-action:none;user-select:none;cursor:crosshair;background:radial-gradient(ellipse at 51% 42%,#46415f 0,#2a293a 55%,#1a1c29 100%)}
.air-xy::before{content:'';position:absolute;inset:0;background-image:linear-gradient(#ffffff14 1px,transparent 1px),linear-gradient(90deg,#ffffff14 1px,transparent 1px);background-size:20% 25%}
.air-grid-h,.air-grid-v{position:absolute;z-index:1;pointer-events:none}
.air-grid-h{top:50%;width:100%;border-top:1px dashed #ffffff66}.air-grid-v{left:50%;height:100%;border-left:1px dashed #ffffff66}
.air-corner{position:absolute;z-index:1;font-size:10px;color:#cecadf;font-weight:800;letter-spacing:.09em;pointer-events:none}
.air-corner.left-top{top:12px;left:14px}.air-corner.left-bottom{bottom:12px;left:14px}.air-corner.right-bottom{bottom:12px;right:14px}
.air-dot{position:absolute;left:50%;top:50%;width:32px;height:32px;transform:translate(-50%,-50%);border:4px solid #e5d6ff;background:#bba3fa;border-radius:50%;z-index:2;box-shadow:0 0 0 9px #c3a6ff22,0 0 24px #d4a5ff88;pointer-events:none;transition:left .055s linear,top .055s linear}
.air-under-xy{display:flex;justify-content:space-between;color:var(--dim);font-size:10px;letter-spacing:.08em;margin-top:6px}
.air-side{display:flex;flex-direction:column;gap:8px;padding:6px 0}
.air-side-title{font-size:11px;color:var(--purple);font-weight:850;letter-spacing:.13em;margin-bottom:7px}
.air-side label{font-size:13px;font-weight:800;display:flex;justify-content:space-between;gap:6px;align-items:center}
.air-side label small{font-size:11px;color:var(--muted);font-weight:500}
.air-side input[type=range],.air-settings input[type=range]{width:100%;accent-color:var(--purple);height:24px;margin-bottom:12px}
.air-play{margin-top:12px;border:0;background:var(--purple);color:#1f1c2d;border-radius:13px;min-height:63px;padding:12px;font-size:17px;font-weight:950;letter-spacing:.04em}
.air-play.active{background:var(--pink)}
.air-note-tip{font-size:12px;color:var(--muted);margin-top:3px}
.air-settings-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin:14px 0}
.air-settings-grid label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:800;color:var(--muted)}
.air-settings-grid select,.air-pattern-label select{min-height:43px;width:100%;background:var(--surface-2);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:8px;font-size:14px}
.air-settings-grid label>span{display:inline}
.air-pattern-label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted);width:70px}
.air-mini-steps{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:6px;margin:20px 0}
.air-step{border:1px solid #4a4c5c;background:#2c3040;color:var(--muted);min-width:0;height:42px;border-radius:7px;font-size:11px;font-weight:850}
.air-step.has-note{background:var(--purple);color:#191725}.air-step.selected{outline:2px solid #fff;outline-offset:2px}
.air-step-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.air-step-actions span{margin-right:auto;color:var(--muted);font-size:12px}
.air-record-hint{font-size:12px;color:var(--yellow);margin-top:14px}
@media(max-width:760px){.air-playing-grid{grid-template-columns:1fr}.air-xy{height:240px}.air-side{display:grid;grid-template-columns:1fr 1fr;column-gap:18px}.air-side-title,.air-play,.air-note-tip{grid-column:1/-1}.air-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.air-mini-steps{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media(max-width:440px){.air-main{padding:13px}.air-sensor{flex:1}.air-action-row .secondary-btn{flex:1}.air-xy{height:225px}.air-side{display:flex}.air-readout{gap:10px}.air-note{font-size:45px}.air-hz{font-size:14px}.air-filter-readout{font-size:9px}.air-filter-readout strong{font-size:13px}.air-sensor{font-size:12px}.air-settings-grid{gap:10px}.air-step-actions button{flex:1}.air-step-actions span{width:100%}.air-intro{align-items:flex-start}.air-label-badge{font-size:10px}}
@media(prefers-reduced-motion:reduce){.air-dot{transition:none}}
/* LOOP LAB 0.3 — performance, track mixing, live loops, pad modes and FX */
.stage-launch{border:1px solid var(--purple);background:#37314b;color:#eee1ff;border-radius:9px;padding:8px 14px;font-size:12px;font-weight:900;min-height:39px}
.add-sample-row{display:flex;align-items:center;gap:13px;flex-wrap:wrap;padding-top:12px;color:var(--dim);font-size:11px}
.add-sample-row button{min-height:42px}.track-name{gap:3px;padding:4px}.select-track .track-label{max-width:105px}.mute-button,.solo-button{border-radius:5px;background:#363847;border:1px solid #45495a;color:#abb0c0;width:19px;min-width:19px;height:25px;display:grid;place-items:center;font-size:10px;font-weight:900;padding:0}.solo-button.solo-active{background:var(--yellow);color:#211b12}.track-name{min-width:0;overflow:hidden}.track-volume{accent-color:var(--cyan);width:41px;min-width:20px;height:18px;margin:0}.tracks,.steps-scale{grid-template-columns:188px repeat(16,minmax(19px,1fr))}.track-name .track-disc{width:8px!important;height:8px!important}.select-track{gap:4px}
.pad-modes{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 15px}.mode-chip{padding:9px 16px;border-radius:20px;border:1px solid var(--border);background:var(--surface-2);color:var(--muted);font-size:12px;font-weight:850;min-height:42px}.mode-chip.active{background:var(--purple);color:#1c1925}
.loop-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.loop-slot{margin:0}.loop-title{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}.loop-title strong{font-size:19px;letter-spacing:.04em}.loop-status{color:var(--purple);font-size:12px}.loop-control{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.loop-control button,.loop-control select{min-height:43px;padding:9px;border-radius:9px;border:1px solid var(--border);color:var(--text);background:var(--surface-2);font-size:12px;font-weight:750}.loop-control select{min-width:90px}.loop-control .loop-record{color:#ffd2dd;border-color:#92506c}.loop-volume{display:flex;align-items:center;gap:14px;margin-top:13px;color:var(--muted);font-size:12px}.loop-volume input{flex:1;accent-color:var(--cyan)}.loop-disclaimer{color:var(--muted);font-size:12px;margin:15px 0 30px}.fx-card>p{color:var(--muted);margin:7px 0 20px}.fx-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.fx-pad{min-height:94px;border-radius:12px;border:1px solid #4c4f63;background:var(--surface-2);color:var(--text);font-size:17px;font-weight:850}.fx-pad.active{background:var(--cyan);color:#142023}.fx-bottom{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:20px 0 10px;color:var(--muted)}.fx-bottom input{flex:1;accent-color:var(--cyan);min-width:140px}
body.stage-open{overflow:hidden}.stage-view{position:fixed;inset:0;z-index:2000;background:#000;color:#ddd;padding:max(15px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:16px;overflow-y:auto;min-height:100dvh;font-family:inherit}.stage-top{display:flex;align-items:center;justify-content:space-between;gap:15px}.stage-logo{font-size:11px;font-weight:850;letter-spacing:.16em;color:#5c5c5c}.stage-top button{border:1px solid #2e2e2e;border-radius:10px;color:#aaa;background:#0d0d0d;min-height:45px;padding:8px 15px;font-weight:800}.stage-readout{text-align:center;flex:1;display:flex;min-height:55px;flex-direction:column;align-items:center;justify-content:center;gap:5px}.stage-readout>span{color:#777;font-size:13px}.stage-readout strong{font-size:clamp(28px,7vw,60px);letter-spacing:.13em;font-weight:950}.stage-readout p{font-size:11px;color:#444}.stage-primary,.stage-secondary,.stage-bottom{display:grid;gap:12px}.stage-primary{grid-template-columns:1fr 1fr}.stage-secondary{grid-template-columns:repeat(3,minmax(0,1fr))}.stage-bottom{grid-template-columns:repeat(3,minmax(0,1fr))}.stage-primary button{border:1px solid #4b4b4b;background:#121212;color:#f4f4f4;min-height:clamp(94px,17vh,175px);border-radius:17px;font-size:clamp(17px,5vw,30px);font-weight:950}.stage-primary #stageRecord.active{border-color:#d55073;color:#ff8aa5;background:#200b12}.stage-secondary button{min-height:clamp(75px,11vh,120px);border:1px solid #333;border-radius:15px;background:#090909;color:#bababa;font-size:clamp(16px,4vw,24px);font-weight:950}.stage-bottom button{min-height:65px;border:1px solid #333;border-radius:10px;background:#080808;color:#808080;font-size:clamp(10px,2.5vw,15px);font-weight:800}.stage-footnote{font-size:10px;text-align:center;color:#373737}.stage-fx-menu{border:1px solid #333;padding:11px;border-radius:12px}.stage-fx-menu p{font-size:12px;margin-bottom:8px}.stage-fx-menu>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.stage-fx-menu button{padding:10px 3px;min-height:49px;border:1px solid #444;border-radius:8px;background:#151515;color:#aaa;font-size:12px;font-weight:800}.stage-fx-menu button.active{color:#fff;border-color:#fff}
.stage-view.bright{background:#fff;color:#070707}.stage-view.bright .stage-logo,.stage-view.bright .stage-readout span,.stage-view.bright .stage-footnote,.stage-view.bright .stage-readout p{color:#555}.stage-view.bright button{background:#fff;color:#000;border-color:#777}.stage-view.bright .stage-primary button{background:#fafafa;border-color:#111}.stage-view.bright .stage-primary #stageRecord.active{background:#ffadbb;color:#400}.stage-view.bright .stage-fx-menu{border-color:#999}
@media(max-width:950px){.tracks,.steps-scale{grid-template-columns:151px repeat(16,minmax(16px,1fr));gap:3px}.track-volume{width:25px;min-width:15px}.select-track .track-label{max-width:68px;font-size:10px}.track-name{gap:2px}.mute-button,.solo-button{width:17px;min-width:17px}}
@media(max-width:620px){.tracks,.steps-scale{grid-template-columns:133px repeat(8,minmax(0,1fr));gap:3px}.track-name{min-height:42px;height:42px}.step{height:42px}.track-volume{width:22px;min-width:15px}.track-name .track-disc{display:none!important}.select-track .track-label{max-width:57px}.mute-button,.solo-button{width:19px;min-width:19px}.loop-slots{grid-template-columns:1fr}.fx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fx-pad{min-height:75px}.stage-readout strong{font-size:26px}.stage-primary button{min-height:102px}.stage-secondary button{min-height:76px}.stage-bottom button{min-height:66px}}
@media(max-width:360px){.tracks,.steps-scale{grid-template-columns:124px repeat(8,minmax(0,1fr));gap:2px}.mute-button,.solo-button{min-width:16px;width:16px}.track-volume{width:19px}.select-track .track-label{max-width:50px}.stage-primary{gap:7px}.stage-secondary,.stage-bottom{gap:6px}.stage-view{gap:9px;padding-left:10px;padding-right:10px}}

.pad-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 13px}.pad-toolbar .pad-modes{margin:0}.selected-track-volume{font-size:10px;color:var(--muted);letter-spacing:.045em;font-weight:800;display:flex;flex-direction:column;gap:5px;min-width:132px;flex:1;max-width:190px}.selected-track-volume span{float:right;color:var(--text)}.selected-track-volume input{width:100%;accent-color:var(--cyan)}@media(max-width:620px){.track-volume{display:none}.select-track .track-label{max-width:70px}.pad-toolbar{align-items:stretch}.selected-track-volume{max-width:none}}

/* 0.4 LIVE: legible pressed states, light/dark performance, big instrument + loop pads */
button:active{filter:brightness(1.18)}
.pad-launch-row{margin:0 0 15px}.pad-launch{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid #596584;border-radius:13px;background:#30374f;color:#edf5ff;font-weight:950;min-height:55px;width:100%;padding:13px 18px;letter-spacing:.045em;text-align:left}.pad-launch span{font-size:24px}
.loop-workflow{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}.loop-workflow .pad-launch{width:auto;flex:1;min-width:245px}.loop-workflow>span{color:var(--muted);font-size:12px;max-width:330px}.loop-toolbar{display:flex;gap:10px;margin:8px 0 15px;flex-wrap:wrap}.loop-toolbar .secondary-btn.active{background:#bb93ff;color:#191023;border-color:#bb93ff}
.loop-performance-pads,.stage-loop-pads{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin:10px 0 20px}.live-loop-pad{--pad-progress:0%;--ring-color:#85869b;position:relative;min-width:0;min-height:190px;background:#222534;color:#eeeefa;border:2px solid #424554;border-radius:22px;padding:15px;display:flex;flex-direction:column;align-items:center;gap:7px;justify-content:center;font-weight:850;transition:background .12s,border-color .12s;touch-action:manipulation}.live-loop-pad strong{font-size:clamp(12px,3vw,17px);letter-spacing:.065em}.live-loop-pad small{font-size:10px;color:#b9bed4}.live-loop-no{position:absolute;top:14px;left:17px;color:#b6b9d0;font-size:11px;letter-spacing:.12em}.live-loop-ring{width:94px;height:94px;border-radius:50%;background:conic-gradient(var(--ring-color) var(--pad-progress),#3c4056 0);padding:8px;display:grid;place-items:center}.live-loop-glyph{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;background:#212333;color:#d5d7e6;font-size:37px;line-height:1}.live-loop-pad.empty{--ring-color:#7d83a0}.live-loop-pad.armed{--ring-color:#ffcb86;border-color:#ffcb86;background:#3b332c}.live-loop-pad.recording{--ring-color:#ff5d84;border-color:#ff587c;background:#47232d;animation:looprec 1s ease-in-out infinite alternate}.live-loop-pad.playing{--ring-color:#7be4ca;border-color:#7be4ca;background:#173933}.live-loop-pad.muted{--ring-color:#74788d;opacity:.83}.live-loop-pad.playing .live-loop-glyph{color:#82ecd4}.live-loop-pad.recording .live-loop-glyph{color:#ff91ac}.live-loop-pad:focus-visible{outline:3px solid white;outline-offset:3px}
@keyframes looprec{from{border-color:#ff587c}to{border-color:#ffbfd0}}
.stage-view{gap:10px;background:#000;color:#f0f0f0}.stage-logo{color:#b4b4b4}.stage-view .stage-top button{border-color:#666;color:#eee}
.stage-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.stage-route{border:1px solid #313131;background:#090909;color:#999;border-radius:10px;min-height:47px;font-weight:900;letter-spacing:.08em;font-size:13px}.stage-route.active{background:#ddd;color:#111;border-color:#fff}
.stage-status{display:flex;align-items:center;gap:9px;justify-content:center;font-size:12px;min-height:24px;color:#b7b7b7}.stage-led{width:8px;height:8px;border-radius:50%;background:#555;flex:none}.stage-led.running{background:#6ac5f9}.stage-led.sounding{background:#72eebf}.stage-led.recording{background:#ff5d78;box-shadow:0 0 0 4px #ff4d682e}
.stage-page{flex:1;min-height:0;display:flex;flex-direction:column;gap:11px}.stage-readout{min-height:60px;flex:1}.stage-readout strong{font-size:clamp(38px,11vw,72px);line-height:1.1}.stage-readout p{color:#929292;font-size:12px}
.stage-primary button{min-height:clamp(84px,14vh,155px)}.stage-air-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}.stage-air-buttons button{min-height:clamp(84px,13vh,140px);font-size:clamp(12px,3.5vw,20px)}.stage-air-bottom{grid-template-columns:repeat(2,minmax(0,1fr))}.stage-air-bottom button{min-height:55px}
.stage-view button.active:not(.stage-route):not(.stage-pad-key):not(.live-loop-pad):not(.stage-pad-mode){background:#7de9c1;color:#07190f;border-color:#8afad4;box-shadow:inset 0 0 0 2px #67c9a6}.stage-primary #stageRecord.active,.stage-pad-transport #stagePadRecord.active{background:#f96389!important;color:#260813!important;border-color:#ff9db9!important}.stage-view #stageMotion.active{background:#a6baff;color:#091831}
.stage-instrument-nav{display:grid;grid-template-columns:58px 1fr 58px;gap:12px;align-items:center}.stage-instrument-nav>button{border-radius:11px;border:1px solid #555;background:#151515;color:#fff;font-size:36px;min-height:55px}.stage-instrument-nav>div{text-align:center;display:flex;flex-direction:column;gap:3px}.stage-instrument-nav span{color:#888;font-size:10px;letter-spacing:.2em}.stage-instrument-nav strong{font-size:clamp(18px,5vw,27px);letter-spacing:.06em}.stage-pad-modes{display:flex;justify-content:center;gap:10px}.stage-pad-mode{flex:1;max-width:230px;min-height:42px;background:#111;border:1px solid #555;border-radius:9px;color:#aaa;font-size:12px;font-weight:850}.stage-pad-mode.active{background:#ded5ff;color:#20182d;border-color:#ded5ff}.stage-pads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:9px;flex:1;min-height:220px}.stage-pads.is-drum{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}.stage-pad-key{background:#22232c;color:#fff;border:2px solid #393b47;border-radius:17px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:88px;touch-action:manipulation;user-select:none}.stage-pad-key strong{font-size:clamp(28px,8vw,57px);line-height:1}.stage-pad-key span{font-size:clamp(9px,2.5vw,12px);font-weight:850;color:#b1b3c0}.stage-pad-key.selected{border-color:#a3f5dd;background:#1d443b}.stage-pad-key.drum{background:var(--tone);border-color:transparent;color:#111}.stage-pad-key.drum span{color:#252333}.stage-pad-key:active{transform:scale(.95)!important;background:#d8f3ed!important;color:#051711!important}.stage-pad-key:active span{color:#132b20!important}.stage-gesture-launch{grid-column:1/-1;grid-row:1/-1;border:1px solid #baa0ff;color:#eee;background:#302444;border-radius:16px;font-size:22px;font-weight:900}
.stage-pad-transport{display:grid;grid-template-columns:1fr 1fr minmax(78px,1fr);gap:8px}.stage-pad-transport>button{min-height:53px;border:1px solid #555;border-radius:9px;background:#151515;color:#fff;font-weight:900;font-size:12px}.stage-pad-transport label{display:flex;flex-direction:column;gap:4px;font-size:10px;font-weight:850;color:#aaa}.stage-pad-transport input{width:100%;accent-color:#75efcf}
.stage-looper-heading{display:flex;justify-content:space-between;gap:9px;align-items:center;flex-wrap:wrap}.stage-looper-heading strong{letter-spacing:.1em}.stage-looper-heading span{font-size:11px;color:#aaa}.stage-loop-pads{flex:1;grid-template-rows:repeat(2,minmax(0,1fr));min-height:250px;margin:0;gap:9px}.stage-loop-pads .live-loop-pad{min-height:122px;padding:8px}.stage-loop-pads .live-loop-ring{width:clamp(67px,19vw,95px);height:clamp(67px,19vw,95px)}.stage-loop-pads .live-loop-no{top:10px;left:11px}.stage-loop-pads .live-loop-pad strong{font-size:12px}.stage-looper-tools{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:7px}.stage-looper-tools button{min-height:55px;background:#161616;border:1px solid #444;border-radius:9px;color:#ddd;font-weight:900;font-size:11px}
.stage-global-tools{display:grid;grid-template-columns:1fr 1fr;gap:8px}.stage-global-tools button{min-height:48px;border:1px solid #555;border-radius:10px;background:#0d0d0d;color:#eee;font-weight:900;font-size:12px}.stage-footnote{color:#757575;font-size:10px}.stage-fx-menu{position:absolute;z-index:10;bottom:max(60px,env(safe-area-inset-bottom));left:12px;right:12px;background:#151518;border:1px solid #aaa;box-shadow:0 0 0 4000px #0009;max-height:60%;overflow-y:auto}.stage-fx-menu>div{grid-template-columns:repeat(3,minmax(0,1fr))}.stage-fx-menu p{display:flex;justify-content:space-between}.stage-fx-amount{display:flex;align-items:center;gap:12px;padding:12px 5px;color:#ccc;font-size:11px}.stage-fx-amount input{flex:1;accent-color:#9ff1d2}
.stage-view.bright{background:#fff;color:#050505}.stage-view.bright .stage-status,.stage-view.bright .stage-instrument-nav span,.stage-view.bright .stage-looper-heading span{color:#333}.stage-view.bright .stage-route.active{background:#000;color:#fff}.stage-view.bright .stage-route:not(.active){background:#fafafa;color:#222;border-color:#999}.stage-view.bright .stage-pad-key:not(.drum){background:#eeeeef;color:#080808}.stage-view.bright .stage-pad-key span{color:#333}.stage-view.bright .live-loop-pad{color:#000}.stage-view.bright .live-loop-pad.empty{background:#eee;color:#000}.stage-view.bright .live-loop-glyph{background:#fff;color:#000}.stage-view.bright .stage-fx-menu{background:#f7f7f7;color:#111}.stage-view.bright .stage-fx-menu button{background:#fff;color:#000}.stage-view.bright .stage-fx-menu button.active{background:#111;color:#fff}.stage-view.bright .stage-fx-amount{color:#000}
.sensor-warning{color:#ffbd83!important}
@media(max-width:620px){.loop-performance-pads .live-loop-pad{min-height:150px}.loop-performance-pads .live-loop-ring{width:75px;height:75px}.stage-view{padding:12px 11px max(12px,env(safe-area-inset-bottom))}.stage-pad-key strong{font-size:clamp(27px,9vw,42px)}.stage-pads{gap:7px}.stage-primary button{min-height:85px}.stage-air-buttons button{min-height:79px}.stage-footnote{font-size:9px}.stage-view{gap:8px}}
@media(max-height:650px){.stage-view{gap:5px}.stage-readout p{display:none}.stage-primary button{min-height:68px}.stage-air-buttons button{min-height:65px}.stage-loop-pads .live-loop-ring{width:65px;height:65px}.stage-loop-pads .live-loop-pad{gap:2px}.stage-pads{min-height:190px}.stage-footnote{display:none}}
@media(prefers-reduced-motion:reduce){.live-loop-pad.recording{animation:none}}

.stage-view.bright .stage-top button{background:#fff;color:#101010;border-color:#555}.stage-view.bright .stage-pad-mode.active{color:#161026}.stage-view.bright .stage-led.recording{box-shadow:0 0 0 4px #ff4d682e}

.loop-source-label{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:11px;font-weight:850;flex-wrap:wrap}.loop-source-label select{border:1px solid #555967;background:#292d3a;color:#fff;border-radius:8px;padding:9px;min-height:45px;font-size:13px}.stage-source-button{background:#292934;color:#fff;border:1px solid #8e8ea5;border-radius:9px;padding:9px 15px;font-size:12px;font-weight:950;min-height:42px}.stage-looper-subtext{color:#aaa;font-size:11px;margin-top:-7px}.stage-view.bright .stage-looper-subtext{color:#333}

/* 0.5 — controlled performances / per-track FX / safe pattern actions */
.track-fx-button{min-width:29px;min-height:31px;border-radius:8px;color:#7a8194;background:#222733;border:1px solid #343949;font-size:19px;font-weight:900;padding:0;flex:none}
.track-fx-button.fx-on{color:#ffe49a;border-color:#ab8764;background:#42342a}
.track-fx-button[aria-pressed="false"]{text-decoration:line-through;text-decoration-thickness:1px}
.copy-targets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:15px 0 20px}
.copy-targets button{min-height:68px;font-size:24px;border-radius:12px;border:1px solid #777d9a;background:#222637;color:#fff;font-weight:850}
.copy-targets button:disabled{opacity:.28;cursor:not-allowed}
.copy-targets .needs-confirm{border-color:#ff808e;background:#602a3a;color:#fff}
button[hidden]{display:none!important}
.pad-gate-switch{display:flex;gap:5px;padding:4px;border:1px solid #45475a;border-radius:11px;background:#191c28;align-items:center}
.pad-gate-switch button{flex:1;min-height:40px;border:0;border-radius:8px;padding:7px 11px;color:#aeb4ca;background:transparent;font-size:12px;font-weight:850}
.pad-gate-switch button.active{background:#a8eccf;color:#132d25}
.stage-pad-options{display:flex;align-items:center;gap:9px;justify-content:space-between;flex-wrap:wrap}
.stage-pad-options>.pad-gate-switch{flex:1}
#stagePadFx{min-height:45px;padding:9px 12px;white-space:nowrap;background:#272431;border:1px solid #5d5169;color:#aba1bc;border-radius:10px;font-weight:900}
#stagePadFx.active{background:#534522;color:#ffe3a3;border-color:#c8a74e}
.stage-pad-key.is-held,.pad.is-held{background:#98e6ca!important;color:#071f18!important;transform:scale(.96);border-color:#bafce4!important;box-shadow:inset 0 0 0 2px #173a31}
.stage-pad-key.is-held span{color:#153629!important}
.permission-diagnostics{border:1px solid #5c5477;background:#27233a;color:#d2c6ff;padding:12px 15px;border-radius:12px;font-size:12px;line-height:1.5}
.stage-looper-tip{font-size:10px;color:#bec5d0;max-width:520px;line-height:1.35;margin:0}
.fx-per-track-info{font-size:13px;color:#b3b8cf}
@media(max-width:620px){.track-name .track-label{max-width:48px!important}.track-fx-button{min-width:22px;min-height:28px;font-size:15px}.track-name{gap:2px}.stage-pad-options>.pad-gate-switch button{padding:5px 7px;font-size:11px}.stage-looper-tip{font-size:9px}}

.stage-loop-bars{display:flex;gap:7px;align-items:center;justify-content:space-between;flex-wrap:wrap}.stage-loop-bars span{font-size:10px;letter-spacing:.08em;color:#b4b8c4;font-weight:850}.stage-loop-bars>div{display:flex;gap:6px;flex:1;justify-content:flex-end}.stage-loop-bars button{min-height:37px;min-width:45px;border-radius:7px;border:1px solid #414654;background:#171922;color:#c3c7d1;padding:7px;font-size:10px;font-weight:850}.stage-loop-bars button.active{background:#d3bcff;color:#1e1332;border-color:#d3bcff}.stage-view.bright .stage-loop-bars span{color:#222}.stage-view.bright .stage-loop-bars button{background:#eee;color:#222}.stage-view.bright .stage-loop-bars button.active{background:#171717;color:#fff}

/* LOOP LAB 0.6: source-choice controls and explicit recording feedback */
.stage-source-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:5px 0 2px}
.stage-source-options button{display:flex;min-width:0;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:78px;border:1px solid #41414a;border-radius:13px;background:#19191e;color:#d1d1d8;font-size:14px;font-weight:900;touch-action:manipulation}
.stage-source-options button small{font-size:9px;letter-spacing:.08em;color:#9595a1;font-weight:750}
.stage-source-options button.active{border:2px solid #8ee4cf;background:#173c34;color:#a8ffe6;box-shadow:inset 0 0 0 1px #398876}
.stage-source-options button.active small{color:#c5ffeb}
.stage-origin-warning{background:#332c18;border:1px solid #998258;border-radius:12px;padding:12px;color:#fff1b0;font-size:12px;line-height:1.55}
.stage-looper-subtext{min-height:38px;line-height:1.5;color:#c7cad3;font-size:12px}
.loop-recording-info{background:#233b37;border:1px solid #547e75;color:#d3f9ed;padding:13px;border-radius:11px;font-size:13px;line-height:1.55;margin:0 0 14px}
.stage-looper-version{font-size:11px;color:#9a9a9a;letter-spacing:.1em}
.live-loop-pad.stopped{border-color:#8e91a0;background:#262735}
.live-loop-pad.stopped .live-loop-glyph{color:#eeeffa}
#stageLoopGoPads{background:#2b354c;color:#fff;border:1px solid #516c9a}
.stage-view.bright .stage-source-options button.active{background:#c2ffe4;color:#144333;border:2px solid #16523f}
.stage-view.bright .stage-source-options button.active small{color:#144333}
.stage-view.bright .stage-origin-warning{background:#fff3d4;color:#51330d}
.stage-view.bright .stage-looper-subtext{color:#3b3b3b}
@media(max-width:370px){.stage-source-options{gap:5px}.stage-source-options button{font-size:12px}.stage-source-options button small{font-size:8px}}

.stage-looper-tools{grid-template-columns:repeat(2,minmax(0,1fr))}.stage-looper-tools #stageLoopBeat.active{background:#153c32;color:#a8ffe0;border-color:#5fbf9e}.stage-view.bright .stage-looper-tools #stageLoopBeat.active{background:#bcf5de;color:#123f30}

@media(max-width:620px){.stage-source-options button{min-height:57px}.stage-source-options{gap:6px}.stage-looper-tip{display:none}.stage-looper-subtext{min-height:22px}.stage-loop-pads .live-loop-pad{min-height:132px}.stage-view .stage-looper-tools button{min-height:46px}}

/* v0.7: Non-destructive waveform trimming and paused loop status. */
.live-loop-pad.paused{--ring-color:#f5bd85;border-color:#c39872;background:#302b2b}
.live-loop-pad.paused .live-loop-glyph{color:#f5c38f}
.trim-dialog{width:min(580px,94vw);max-height:90vh;overflow:auto;background:#202431;color:#f5f5fb;border:1px solid #666c80;border-radius:20px;padding:0;box-sizing:border-box}
.trim-dialog::backdrop{background:#080910cf}
.trim-body{padding:18px;display:grid;gap:15px}
.trim-title{display:flex;align-items:center;justify-content:space-between;gap:16px}
.trim-title h2{font-size:20px;letter-spacing:.09em}
.trim-title button{border:1px solid #565b6e;background:#33394e;color:#fff;min-width:44px;min-height:44px;border-radius:9px}
.trim-body>p{font-size:13px;color:#bdc5d7;margin:0;line-height:1.5}
#trimWave{display:block;width:100%;height:154px;touch-action:none;border:1px solid #596278;border-radius:12px;cursor:ew-resize}
.trim-range{display:grid;gap:12px}
.trim-range label{display:grid;grid-template-columns:1fr auto;gap:7px;font-size:12px;font-weight:800;letter-spacing:.07em}
.trim-range label output{color:#8ce6d4}
.trim-range input{grid-column:1/-1;accent-color:#82e5ce;width:100%;height:32px;touch-action:pan-y}
.trim-body .trim-length{color:#e4edf4;font-weight:700}
.trim-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.trim-actions button{border-radius:10px;border:1px solid #596078;background:#31364b;color:#f5f7fa;min-height:50px;padding:8px;font-size:12px;font-weight:850}
.trim-actions .trim-primary{grid-column:1/-1;background:#82e5ce;border-color:#82e5ce;color:#09251f}
@media(max-width:420px){.trim-body{padding:13px}}

/* 0.8 - REC on the instrument surface: preflight, count-in, state, cancel/finish */
.performance-loop-dock{border:2px solid #cfac63;background:#252115;border-radius:14px;padding:11px 12px;display:grid;gap:8px;flex:none;position:relative;z-index:2;box-shadow:inset 0 0 0 1px #665233;}
.performance-loop-meta{display:flex;align-items:center;justify-content:space-between;gap:7px;flex-wrap:wrap;color:#f3dfab;font-size:12px;font-weight:900;letter-spacing:.035em}
.performance-loop-meta span{font-size:11px;font-weight:750;color:#f5d49e;letter-spacing:0}
.performance-loop-progress{height:4px;border-radius:6px;background:#5b5141;overflow:hidden}
.performance-loop-progress>div{height:100%;width:0%;background:#f3dc8a;transition:width .075s linear}
.performance-loop-actions{display:flex;gap:8px}
.performance-loop-actions>button{min-height:48px;padding:7px 10px;border-radius:9px;border:1px solid #62584b;background:#211f1a;color:#e7dccb;font-size:12px;font-weight:950;flex:1;touch-action:manipulation}
.performance-loop-actions #performanceLoopStart{flex:2;background:#a3f0c9;border-color:#a3f0c9;color:#12291c;font-size:14px}
.performance-loop-actions #performanceLoopFinish{flex:2;background:#ff8c9f;border-color:#ff8c9f;color:#381420;font-size:14px}
.performance-loop-dock.is-counting{border-color:#75b9f7;background:#182635}.performance-loop-dock.is-counting .performance-loop-meta{color:#b8defb}
.performance-loop-dock.is-recording{border-color:#fd5f83;background:#351723;box-shadow:inset 0 0 0 1px #d73c64}
.performance-loop-dock.is-recording .performance-loop-meta{color:#ffacc0}
.performance-loop-dock.is-recording .performance-loop-progress>div{background:#ff7394}
.stage-view.bright .performance-loop-dock{background:#fffbec;border-color:#ae8b4e;color:#171717}
.stage-view.bright .performance-loop-meta,.stage-view.bright .performance-loop-meta span{color:#402c0e}
.stage-view.bright .performance-loop-dock.is-recording{background:#ffe3ec;border-color:#ab355b}
.stage-view.bright .performance-loop-dock.is-recording .performance-loop-meta{color:#8a153a}
.stage-pad-transport .stage-quick-loop{grid-column:1 / -1;background:#452132;color:#ffacc3;border:2px solid #9e4a6c;font-size:15px;min-height:51px}
.stage-bottom #stageAirQuickLoop{background:#482130;color:#ffacc3;border:2px solid #a4496b;font-size:12px}
.stage-air-bottom{grid-template-columns:repeat(3,minmax(0,1fr))}
.stage-view.bright .stage-pad-transport .stage-quick-loop,.stage-view.bright .stage-bottom #stageAirQuickLoop{background:#ffe4eb;color:#67132c;border-color:#a93a64}
.live-loop-pad.ready{border-color:#ebbb6e;background:#3d3228}
@media(max-width:360px){.performance-loop-actions>button{font-size:11px;padding:7px}.stage-air-bottom{gap:5px}}

/* 0.8: explicit recorder target + audio imports */
.performance-target-bar{display:flex;align-items:center;gap:10px;background:#17191d;border:1px solid #474b56;border-radius:11px;padding:9px 11px;flex-wrap:wrap}
.performance-target-label{font-size:10px;letter-spacing:.05em;font-weight:950;color:#e5c6a0;white-space:nowrap}
.performance-target-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;flex:1;min-width:0}
.performance-target-slots button{min-height:43px;border-radius:8px;border:1px solid #626670;background:#252733;color:#d8d8df;font-size:13px;font-weight:950;padding:6px 2px;touch-action:manipulation}
.performance-target-slots button.active{background:#b5f5d5;border-color:#b5f5d5;color:#1b2e24;box-shadow:inset 0 0 0 2px #5f9a7a}
.performance-target-slots button.occupied:not(.active){background:#332934;border-color:#836d7d;color:#f6c8d2}
.live-loop-pad.selected-target{outline:3px solid #b8e5f7;outline-offset:-7px}
.stage-view.bright .performance-target-bar{background:#f7f7f7;border-color:#999}
.stage-view.bright .performance-target-label{color:#2d271a}
.stage-view.bright .performance-target-slots button.active{color:#052115;background:#8bdfb7}
.stage-loop-import{display:flex;align-items:center;gap:8px;justify-content:space-between;flex-wrap:wrap;padding:4px 0}
.stage-loop-import span{font-size:11px;letter-spacing:.02em;color:#adbec9;font-weight:900}
.stage-loop-import button{min-height:44px;padding:9px 12px;font-size:11px;font-weight:850;border:1px solid #646c7e;background:#242831;color:#fff;border-radius:9px;max-width:100%}
.stage-view.bright .stage-loop-import span{color:#292929}
.loop-file-load{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:7px 11px;cursor:pointer;border:1px solid #596274;border-radius:8px;background:#31374a;color:#f3f4f9;font-weight:850;font-size:12px;text-align:center}
@media(max-width:360px){.performance-target-bar{gap:6px;padding:7px}.performance-target-label{width:100%}}

/* v0.8 refinements: performance view scrolls naturally; REC never gets trapped below the pads */
.stage-view{overscroll-behavior:contain}
.stage-page{flex:0 0 auto;min-height:auto}
.performance-target-record{width:100%;min-height:43px;background:#d97599;color:#1b0d14;border:1px solid #eda1ba;border-radius:8px;font-size:13px;font-weight:950;padding:7px}
.performance-target-record:active{background:#fcb1c8}
.stage-view.bright .performance-target-record{background:#ffc1d2;color:#431124;border-color:#ad4a6d}
.stage-loop-import-targets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;width:100%}
.stage-loop-import-targets button{min-height:42px;padding:7px 2px;background:#222631;color:#d9dce5;border:1px solid #545c70;border-radius:7px;font-weight:850;font-size:11px}
.stage-loop-import-targets button.active{background:#b8f0cf;color:#183323;border-color:#8cddb0}
.stage-view.bright .stage-loop-import-targets button.active{background:#b3eac7;color:#183323}
@media(max-width:420px){.stage-loop-import #stageLoopImport{width:100%}}


/* 0.9 multibar patterns & polyphony */
.sample-pad-settings{margin-top:9px;border-top:1px solid var(--border);padding-top:10px}.sample-pad-settings summary{cursor:pointer;color:var(--muted);font-size:12px;font-weight:800;padding:8px}
.sample-pad-mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:9px}
.sample-pad-mode-grid label{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px}
.sample-pad-mode-grid select{min-width:0;flex:1;border:1px solid var(--border);background:var(--surface-2);color:var(--text);padding:7px;border-radius:8px;font-size:11px}
.multibar-controls{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin:2px 0 15px;border-bottom:1px solid var(--border);padding-bottom:14px}
.multibar-controls label{color:var(--muted);font-size:10px;letter-spacing:.05em;font-weight:850;display:flex;flex-direction:column;gap:5px}
.multibar-controls select,.sample-polyphony select{color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:8px 6px;min-height:37px;font-size:12px}
.bar-pager{display:flex;flex:1 0 100%;flex-wrap:wrap;gap:5px;min-width:0;order:3}
.bar-pager button{min-width:36px;flex:1 1 38px;max-width:56px;min-height:39px;padding:4px;border-radius:8px;background:var(--surface-2);border:1px solid var(--border);color:var(--text);font-weight:800}
.bar-pager button.active{background:var(--pink);color:#181520;border-color:var(--pink)}
.bar-pager button.now-bar{box-shadow:inset 0 -4px 0 var(--cyan)}
.bar-pager button[disabled]{opacity:.35}
.stage-loop-bars #stageLoopBarOptions{display:flex;gap:5px;flex-wrap:wrap}.stage-loop-bars #stageLoopBarOptions button{min-height:42px}.bar-info{font-size:11px;color:var(--muted);width:100%}
.step.repeated{opacity:.55;border-style:dashed}
.sample-polyphony{margin-top:7px;color:var(--muted);font-size:11px}
.sample-polyphony label{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.sample-polyphony select{flex:1;min-width:180px}
.choir-options{padding:12px 0;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.choir-options label{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}
.choir-options select{background:var(--surface-2);border:1px solid var(--border);border-radius:9px;color:var(--text);min-height:42px;padding:8px}
@media(max-width:620px){.multibar-controls{gap:7px}.bar-pager button{min-width:35px}.bar-info{order:4}}

/* v0.9.1: differentiate queued launch and end-of-cycle stop from paused playback. */
.live-loop-pad.ending{--ring-color:#f6ba72;border-color:#eeac57;background:#3b3026}
.live-loop-pad.ending .live-loop-glyph{color:#ffe0b5}
.live-loop-pad.launching{--ring-color:#a4b8fa;border-color:#798dc3;background:#262c3e}
.live-loop-pad.launching .live-loop-glyph{color:#d2ddff}

/* 1.0 incremental integration: preserve established layout and touch targets */
.section-status{display:inline-block;font-size:.68rem;color:#8de2d4;letter-spacing:.08em;margin-left:.35rem;min-width:7rem}
.pattern-btn.section-playing{box-shadow:inset 0 -4px 0 #78e6ce}
.pattern-btn.section-pending{outline:2px dashed #ffa97b;outline-offset:2px}
.transport-settings{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:12px 0;padding:12px;background:#202432;border:1px solid #3d4358;border-radius:16px;font-size:.82rem}
.transport-settings label{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.transport-settings select{padding:10px;min-height:44px;max-width:100%;background:#1b1f2b;color:#fff;border:1px solid #626b84;border-radius:8px;font-size:16px}
.transport-settings input{width:21px;height:21px}
.transport-settings span{color:#8de2d4}.transport-settings small{color:#bec6d8}
.track-chain-editor{margin-top:16px;padding:14px;border-radius:14px;background:#1e2230;border:1px solid #475068}
.track-chain-editor h3{font-size:1rem;margin:0 0 14px;color:#ecf0ff}
.track-chain-editor label{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:8px 0}
.track-chain-editor select{min-height:44px;padding:9px;border-radius:8px;background:#151a25;color:#fff;border:1px solid #4d566a;font-size:16px;max-width:100%}
.chain-slots{display:flex;flex-direction:column;gap:10px;margin:12px 0}
.chain-slot{display:flex;gap:7px;align-items:center;flex-wrap:wrap;background:#282e40;padding:8px;border-radius:10px}
.chain-slot select{flex:1;min-width:105px}.chain-slot button{min-height:44px;min-width:44px;border-radius:9px}
.chain-slot .on{background:#4b8c80;color:#fff}.chain-slot .off{background:#474b59;color:#fff}
.song-block-wrap{display:inline-flex;vertical-align:top;flex-direction:column;align-items:center;gap:5px;min-width:60px}
.song-block-controls{display:flex;gap:2px;flex-wrap:wrap;justify-content:center;max-width:125px}
.song-block-controls button{font-size:.85rem;padding:6px;min-width:27px;min-height:35px;border:1px solid #464d5b;border-radius:6px;background:#292d3a;color:#fafaff}
.song-block-controls button:disabled{opacity:.25}
.song-insert{display:inline-flex;flex-direction:column;align-items:center;gap:3px;vertical-align:top}
.song-add-between{border:1px dashed #576175;background:#242b38;color:#8de2d4;min-width:30px;min-height:45px;border-radius:9px}
.song-insert-picks{display:flex;gap:2px;flex-wrap:wrap;max-width:75px}
.song-insert-picks button{min-width:28px;min-height:35px;padding:2px;border-radius:6px}
.song-block.selected-song{outline:2px solid #a5eadb;outline-offset:2px}.song-dragging{opacity:.65}
.song-history{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.track-name button,.song-block-wrap button{touch-action:manipulation;-webkit-user-select:none;user-select:none}
@media(max-width:420px){.transport-settings{font-size:.76rem}.section-status{display:block;margin:6px 0 0}.chain-slot{align-items:stretch}}

#editorBack:not(.hidden){display:inline-flex;align-items:center;justify-content:center}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #8de2d4;outline-offset:3px}
.track-name .mute-button,.track-name .track-fx-button{min-width:22px;min-height:30px}
.pad,.stage-pad-key,.live-loop-pad,.select-track,.mute-button,.track-fx-button{-webkit-touch-callout:none}

main.wrap{touch-action:pan-y}
.song-replace{background:#30374a;color:#fff;border:1px solid #59657c;border-radius:6px;min-height:35px;padding:4px;font-size:16px;max-width:74px}

.instrument-edit{margin-top:10px;min-height:42px;font-size:13px;font-weight:800;letter-spacing:.06em}

/* Audio Engine 2.0: controls live inside the existing instrument editor, never as a permanent dashboard. */
.sound-lab{margin:16px 0;padding:15px;border:1px solid #434556;border-radius:18px;background:#1a1c2a;color:#e8eaf4}
.sound-lab[hidden],.sound-lab [hidden]{display:none!important}
.sound-lab-title{display:flex;gap:12px;justify-content:space-between;align-items:center;margin-bottom:11px;font-size:12px;letter-spacing:.065em;color:#9ce6d8}
.sound-lab-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.sound-lab-grid label{font-size:11px;display:grid;gap:6px;font-weight:700;letter-spacing:.03em;color:#cbd0e0}
.sound-lab-grid select{appearance:auto;max-width:100%;min-width:0;min-height:43px;border:1px solid #454a62;border-radius:10px;background:#282b3e;padding:7px;color:#f4f4ff;font:inherit;font-size:14px}
.sound-import{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:12px}
.sound-import .secondary-btn{display:inline-flex;align-items:center;cursor:pointer;font-size:12px}
.sound-note{font-size:12px;color:#a9b1c5;line-height:1.55;margin:9px 0 0}
@media(max-width:700px){.sound-lab-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sound-lab{padding:12px}.sound-lab-title{flex-wrap:wrap}}
@media(max-width:355px){.sound-lab-grid{grid-template-columns:minmax(0,1fr)}}

.export-quality{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.export-quality label{display:grid;gap:5px;font-size:11px;letter-spacing:.03em;color:#b3bed0}
.export-quality select{padding:9px 12px;border:1px solid #44485c;border-radius:9px;background:#272a38;color:#fff;min-height:44px}

/* LoopLab 1.2: clear multibar ghost state and responsive named project library */
.step.repeated{opacity:.80;border:1px dashed #738298;background:repeating-linear-gradient(135deg,#29313e,#29313e 5px,#353c4d 5px,#353c4d 10px);cursor:cell}
.step.repeated.on{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--track-color) 62%,#303443),color-mix(in srgb,var(--track-color) 62%,#303443) 5px,#484c5a 5px,#484c5a 10px);color:#15151b}
.project-manager-btn{border:1px solid #535c70;border-radius:9px;background:#293040;color:#e8eaf2;min-height:38px;padding:6px 10px;font-size:12px;font-weight:800;max-width:175px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.project-dialog{width:min(560px,calc(100% - 24px));max-height:85%;overflow:auto;color:var(--text);background:#1f222d;border:1px solid #54596e;border-radius:16px;padding:22px;box-sizing:border-box}
.project-dialog::backdrop{background:#000a}.project-dialog-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.project-dialog-header h2{margin:0;font-size:20px}.project-dialog-header button{font-size:25px;background:transparent;border:0;color:inherit;min-width:44px;min-height:44px}
.project-notice{font-size:13px;line-height:1.5;color:#b7bac7}.project-dialog>label{display:block;font-size:12px;font-weight:800}.project-dialog input{width:100%;box-sizing:border-box;min-height:44px;padding:10px;margin-top:5px;background:#303645;color:#fff;border:1px solid #62697b;border-radius:8px;font-size:16px}.project-dialog-actions{display:flex;gap:8px;flex-wrap:wrap;margin:15px 0 25px}.project-dialog-actions button{min-height:44px;padding:10px}.project-dialog h3{font-size:12px;letter-spacing:.08em;color:#bfc9d4}.project-library-row{display:flex;align-items:center;gap:8px;border-top:1px solid #424859;padding:10px 0}.project-library-row span{min-width:0;flex:1;overflow-wrap:anywhere;font-size:13px}.project-library-row button{min-height:40px;padding:8px 10px;border:1px solid #697386;border-radius:9px;background:#383e4f;color:#fff}
@media(max-width:620px){.project-manager-btn{max-width:123px;font-size:11px;padding:6px}.head-right{gap:5px}.project-dialog{padding:15px}}
/* v1.2.1 – explain independent bar lengths without making repeated steps look disabled */
.track-length-chip{flex:none;min-width:23px;min-height:27px;border:1px solid #5b7483;border-radius:6px;background:#263a46;color:#b9ecf4;padding:2px;font-size:9px;font-weight:900;line-height:1;touch-action:manipulation}
.track-length-chip:focus-visible{outline:2px solid #fff;outline-offset:2px}
.step.repeated{opacity:1!important;border:1px dashed #8498a8!important}
.step.repeated:not(.on){background:repeating-linear-gradient(145deg,#293541,#293541 6px,#394752 6px,#394752 12px)}
.sample-pitch-control{margin-top:8px;padding-top:8px;border-top:1px solid #444b5d}
@media(max-width:620px){.tracks,.steps-scale{grid-template-columns:146px repeat(8,minmax(0,1fr))}.track-name{gap:1px}.track-name .track-label{max-width:39px!important}.track-length-chip{min-width:21px;min-height:26px;font-size:9px;padding:1px}}
@media(max-width:360px){.tracks,.steps-scale{grid-template-columns:127px repeat(8,minmax(0,1fr))}.track-length-chip{display:none}}

/* 1.4.1 — compact, discoverable instrument editing; no changes to audio/pad architecture */
.drum-quick-strip{margin:9px 0 13px;padding:11px 13px;border:1px solid #465667;background:#1b2430;border-radius:13px}
.drum-strip-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.drum-strip-head strong{font-size:13px;letter-spacing:.045em;color:#edecf7}.drum-strip-head strong span{font-weight:500;color:#a6b8c8}
.drum-strip-head label{display:flex;gap:6px;align-items:center;font-size:10px;letter-spacing:.08em;color:#aabac8;font-weight:800}
.drum-strip-head select{font-size:13px;min-height:36px;border:1px solid #667587;border-radius:8px;color:#f5f9fc;background:#2a3748;padding:6px 8px;max-width:180px}
.drum-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:10px}
.drum-chip{min-width:0;border:1px solid #445569;background:#263443;color:#d9e2ed;border-radius:9px;min-height:51px;padding:6px 7px;text-align:left;display:flex;flex-direction:column;justify-content:center;gap:3px}
.drum-chip strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drum-chip small{font-size:10px;color:#a3b9c8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drum-chip.active{outline:2px solid #8de2d4;border-color:#8de2d4;background:#254a51}.drum-chip.active small{color:#d5f3ee}
.drum-strip-hint{font-size:11px;margin:8px 0 0;color:#b0bdc9}
.sound-lab{margin:9px 0 12px;padding:12px;border-radius:12px;background:#202532}.sound-lab-title{margin-bottom:5px}
.sound-focus-hint{color:#abbfc8;font-size:12px;line-height:1.4;margin:4px 0 10px}
.sound-advanced{margin-top:8px;border-top:1px solid #455061;padding-top:10px}.sound-advanced summary{cursor:pointer;font-size:11px;letter-spacing:.09em;color:#a8bece;font-weight:850;min-height:30px}
.sound-advanced[open] .sound-lab-grid{margin:8px 0 4px}.sound-shortcuts button{min-height:37px;margin:7px 0 0;padding:5px 10px}.sound-shortcuts button[hidden]{display:none}
.loop-playback-mode{font-size:11px;color:#bdd9db;display:inline-flex;align-items:center;gap:5px;min-height:36px}
.loop-playback-mode select{font-size:12px;min-height:36px;max-width:200px}.loop-actual-duration{font-size:12px;font-weight:800;color:#9ce6d8;white-space:nowrap;display:inline-flex;align-items:center}
.stage-looper-help{margin:4px 0 12px;border:1px solid #444a5e;border-radius:10px;padding:9px 11px}.stage-looper-help summary{font-size:12px;font-weight:800;color:#a8c1cf;cursor:pointer;min-height:24px}
.stage-looper-help .stage-looper-tip{font-size:12px;line-height:1.6;margin:8px 0 1px}
@media(max-width:620px){.drum-quick-strip{padding:9px 9px}.drum-strip-head select{max-width:160px}.drum-chips{gap:5px}.drum-chip{min-height:47px;padding:5px}.drum-chip strong{font-size:11px}.drum-chip small{font-size:9px}.sound-lab-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sound-lab{padding:10px}}

/* Collapsible secondary transport settings: keeps the instrument foremost on mobile. */
.studio-settings-fold{margin:9px 0 13px;border:1px solid #3d4559;border-radius:11px;background:#1c2330}
.studio-settings-fold summary{cursor:pointer;font-size:11px;min-height:39px;color:#b0cad2;font-weight:800;letter-spacing:.055em;padding:10px 12px;list-style-position:inside}
.studio-settings-fold[open] summary{border-bottom:1px solid #3e4758}
.studio-settings-fold .transport-settings{margin:0;border:0;border-radius:0}
@media(max-width:620px){.hero{margin:3px 0 12px}.hero h1{font-size:clamp(22px,6vw,27px);line-height:1.12}.hero p{font-size:12px;line-height:1.35}.transport{padding:10px}.pattern-bar{margin-bottom:9px}.studio-settings-fold{margin:7px 0 11px}.editor-top p{margin-top:3px}.sound-lab{margin-top:8px}}