*{box-sizing:border-box}html{font-family:Arial,Helvetica,sans-serif;color:#304c43;background:#f6f6f2}body{margin:0}button,input,select{font:inherit}button,select{color:inherit}button{border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:disabled{cursor:default}button:focus-visible,select:focus-visible,[role=slider]:focus-visible,input:focus-visible{outline:2px solid var(--accent,#bc3c30);outline-offset:4px}a{color:inherit}button svg{width:20px;height:20px;fill:currentColor}button,input,select{min-height:44px}input[type=range]{accent-color:var(--ink);cursor:pointer}h1,h2,p{margin:0}.review-header{padding:28px 32px;display:flex;justify-content:space-between;font-size:14px}.review-header a{text-decoration:none}.studies{display:grid;grid-template-columns:repeat(4,minmax(280px,1fr));gap:24px;padding:16px 32px 32px;max-width:1600px;margin:auto}.study{--bg:#e6ebea;--ink:#304c43;--muted:#63776e;--track:#ccd7d2;--accent:#bc3c30;--key:#f5f8f3;color:var(--ink)}.study-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;font-size:13px}.study-head h2{font-size:15px;font-weight:500}.surface{background:var(--bg);height:680px;padding:24px 18px 12px;display:flex;flex-direction:column;position:relative}.track-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.track-head h1{font-family:Impact,'Arial Narrow',sans-serif;font-size:44px;font-weight:900;line-height:1;letter-spacing:-1.5px;color:var(--accent)}.mode{display:flex;align-items:center;gap:7px;min-width:68px;justify-content:center;font-size:12px;border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);border-radius:24px;padding:0 12px}.mode-dot{height:5px;width:5px;background:var(--accent);border-radius:100%}.mode-dot.recording{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent)}.timeline{display:flex;align-items:center;gap:12px;font-size:11px;font-variant-numeric:tabular-nums;color:var(--muted);margin-top:16px}.seek{appearance:none;background:transparent;width:100%;margin:0;height:44px}.seek::-webkit-slider-runnable-track{height:2px;background:var(--track)}.seek::-webkit-slider-thumb{appearance:none;width:8px;height:8px;border-radius:100%;background:var(--ink);margin-top:-3px}.seek::-moz-range-track{height:2px;background:var(--track)}.seek::-moz-range-thumb{height:8px;width:8px;border:0;background:var(--ink)}.instrument-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:380px}.readout{display:flex;align-items:baseline;justify-content:center;gap:7px;font-size:12px;min-height:30px;color:var(--muted)}.readout strong{font-weight:500;color:var(--ink)}.performance{width:280px;height:304px;flex-shrink:0;position:relative;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.channel{position:absolute}.channel.top{top:32px;left:116px}.channel.bottom{top:192px;left:116px}.channel.left{top:128px;left:12px}.channel.right{top:128px;left:188px}.control{width:48px;height:80px;display:grid;place-items:center;position:relative;touch-action:none;cursor:grab;border-radius:7px}.control:active{cursor:grabbing}.left .control,.right .control{width:80px;height:48px}.stem-name{position:absolute;white-space:nowrap;min-height:32px;font-size:12px;font-weight:400;padding:4px 0}.top .stem-name{bottom:84px;left:50%;transform:translateX(-50%)}.bottom .stem-name{top:84px;left:50%;transform:translateX(-50%)}.left .stem-name,.right .stem-name{top:50px;width:110px;left:50%;transform:translateX(-50%);font-size:11px}.stem-name.muted{opacity:.45;text-decoration:line-through}.rail{position:relative;width:28px;height:72px;border-radius:5px;background:var(--track);pointer-events:none}.left .rail,.right .rail{width:72px;height:28px}.segments{position:absolute;inset:5px;display:flex;flex-direction:column;gap:3px}.segments i{display:block;flex:1;background:var(--ink);opacity:.12;border-radius:1px}.segments i.on{opacity:.9}.top .segments{flex-direction:column-reverse}.right .segments{flex-direction:row}.left .segments{flex-direction:row-reverse}.fill,.thumb,.wave{display:none}.center-play{position:absolute;width:60px;height:60px;top:122px;left:110px;border-radius:12px;background:var(--accent);color:var(--key);box-shadow:inset 0 0 0 1px #ffffff40,0 2px 0 #00000020;display:grid;place-items:center;touch-action:none;-webkit-touch-callout:none;user-select:none}.center-play svg{width:24px;height:24px}.center-play:active{transform:scale(.96)}.repeating .center-play{box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 16%,transparent)}.gesture-hint{min-height:32px;font-size:11px;text-align:center;color:var(--muted);padding-top:7px;line-height:1.4}.drive-trim{display:flex;align-items:center;gap:10px;font-size:12px;height:44px;position:relative}.drive-trim input{width:114px;height:44px}.drive-trim output{width:40px;text-align:right;font-variant-numeric:tabular-nums}.drive-trim[hidden]{display:none}.utility{display:flex;align-items:center;justify-content:space-between;width:100%;gap:4px}.utility button{min-width:44px;padding:6px;font-size:24px}.utility .motion{font-size:12px;min-width:64px}.motion[aria-pressed=true]{color:var(--accent);font-weight:bold}.utility svg{width:15px;height:15px}.player-status{text-align:center;font-size:10px;line-height:1.4;color:var(--muted);height:32px;padding-top:6px;overflow:hidden}.surface-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--track);margin-top:8px;padding-top:6px}.look-picker{appearance:auto;border:0;background:none;font-size:12px;max-width:140px;padding:0 4px;color:var(--ink)}.help{font-size:13px;width:44px;opacity:.7}.note{font-size:13px;line-height:1.6;color:#66736b;margin-top:16px}.ribbon{--bg:#e0dbea;--ink:#4d3d61;--muted:#756582;--track:#c9bfd5;--accent:#68507d;--key:#fbf9ff}.ribbon .track-head h1{font-family:Arial,sans-serif;letter-spacing:-2px;font-size:36px}.ribbon .rail{box-shadow:inset 1px 2px 5px #69547c25;border-radius:6px}.ribbon .segments{display:none}.ribbon .thumb{display:block;position:absolute;width:38px;height:7px;border-radius:4px;background:#fbf9ff;box-shadow:0 2px 4px #57406330;left:-5px;bottom:calc(4px + var(--value)*60px)}.ribbon .bottom .thumb{bottom:auto;top:calc(4px + var(--value)*60px)}.ribbon .left .thumb,.ribbon .right .thumb{width:7px;height:38px;top:-5px;bottom:auto}.ribbon .right .thumb{left:calc(4px + var(--value)*60px)}.ribbon .left .thumb{left:auto;right:calc(4px + var(--value)*60px)}.ribbon .center-play{border-radius:50%}.scope{--bg:#092c2d;--ink:#a0e5d0;--muted:#7aafa3;--track:#285050;--accent:#c4ed89;--key:#092c2d}.scope .surface{background-image:linear-gradient(#a0e5d004 1px,transparent 1px),linear-gradient(90deg,#a0e5d004 1px,transparent 1px);background-size:24px 24px}.scope .track-head h1{font-family:Arial,sans-serif;font-size:34px;color:var(--ink);letter-spacing:-1.8px}.scope .rail{background:none;border:1px solid var(--track);border-radius:0}.scope .segments{display:none}.scope .wave{display:block;width:100%;height:100%;fill:none;stroke:var(--ink);stroke-width:.7;opacity:.65}.scope .left .wave,.scope .right .wave{width:28px;height:72px;position:absolute;left:21px;top:-23px;transform:rotate(90deg)}.scope .thumb{display:block;position:absolute;background:var(--accent);height:2px;width:32px;left:-3px;bottom:calc(var(--value)*68px)}.scope .bottom .thumb{bottom:auto;top:calc(var(--value)*68px)}.scope .left .thumb,.scope .right .thumb{height:32px;width:2px;top:-3px;bottom:auto;left:calc(var(--value)*68px)}.scope .left .thumb{left:auto;right:calc(var(--value)*68px)}.scope .center-play{background:none;border:1px solid var(--ink);color:var(--ink);border-radius:50%;box-shadow:none}.mosaic{--bg:#d5e97d;--ink:#363cb9;--muted:#525b8b;--track:#bdd569;--accent:#363cb9;--key:#d5e97d}.mosaic .rail{background:none}.mosaic .segments{inset:0;gap:3px}.mosaic .segments i{border-radius:0 4px 0 0}.mosaic .center-play{border-radius:4px;background:#cdc1ee;color:var(--ink);box-shadow:none}.mosaic .track-head h1{font-size:40px}.solo .review-header,.solo .study-head,.solo .note,.solo .study:not(.chosen),.solo .audio-qa{display:none}.solo .studies{display:block;padding:0}.solo .surface{width:100%;max-width:440px;margin:auto;height:100svh;min-height:600px;padding:max(24px,env(safe-area-inset-top)) 24px max(12px,env(safe-area-inset-bottom))}.solo .study{background:var(--bg);min-height:100svh}.solo .track-head h1{font-size:48px}.solo .ribbon .track-head h1,.solo .scope .track-head h1{font-size:38px}.solo .instrument-area{justify-content:center;padding-top:16px}.audio-qa{margin:24px 32px;font-size:12px}.audio-qa pre{white-space:pre-wrap}dialog{border:0;border-radius:14px;background:#f1f4ef;color:#304c43;max-width:430px;width:calc(100% - 32px);padding:28px;max-height:85svh}dialog::backdrop{background:#15322d77}dialog h2{font-size:24px;letter-spacing:-.7px;margin-bottom:24px}dialog p{font-size:13px;line-height:1.6;margin:16px 0}dialog .close{float:right;font-size:24px;width:44px;margin:-16px -16px 0 0}.settings{border-top:1px solid #c7d2ca;margin-top:24px;padding-top:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}.settings label{font-size:13px}.settings input[type=number]{width:65px;border:1px solid #b2c3b6;background:transparent;border-radius:5px;text-align:center}.settings small{font-size:11px;width:100%;color:#6c7e70}.settings .check{width:100%;display:flex;align-items:center;gap:8px}.settings button{border:1px solid #b2c3b6;border-radius:6px;font-size:12px;padding:8px 14px}dialog .footnote{font-size:11px;color:#6c7e70}@media(max-width:1240px){.studies{grid-template-columns:repeat(2,minmax(280px,1fr));max-width:820px}}@media(max-width:640px){.studies{grid-template-columns:1fr;padding:16px 20px}.review-header{padding:20px;gap:20px;font-size:12px}.surface{max-width:440px;margin:auto}.study-head,.note{max-width:440px;margin-left:auto;margin-right:auto}}@media(max-height:700px){.solo .surface{padding-top:16px}.solo .instrument-area{padding-top:0;min-height:350px}.readout{min-height:20px}.timeline{margin-top:6px}.solo .track-head h1{font-size:40px}.player-status{height:24px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

.compare{font-size:11px;color:var(--muted);padding:0 10px}
.study-head{color:#304c43}
/* Parameter markers stay fixed; only the audio-lit notches change. */
.study{--meter:#4e8268}.ribbon{--meter:#8862ad}.scope{--meter:#bce88e}.mosaic{--meter:#363cb9}
.metering .segments i{opacity:.10;background:var(--ink)}
.metering .segments i.on{opacity:.22}
.metering .segments i::after{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--meter);opacity:var(--light,0)}
.metering .segments i{position:relative;opacity:1;background:color-mix(in srgb,var(--ink) 9%,transparent)}
.metering .segments i.on{background:color-mix(in srgb,var(--ink) 22%,transparent)}
.ribbon .segments,.scope .segments{display:flex}
.scope .wave{display:none}
.ribbon .segments{inset:7px 6px;gap:3px}
.ribbon .left .segments,.ribbon .right .segments{inset:6px 7px}
.scope .segments{inset:4px;gap:4px}.scope .segments i{border-radius:0}
.red .thumb,.mosaic .thumb{display:block;position:absolute;width:34px;height:2px;background:var(--ink);box-shadow:0 0 0 1px var(--bg);left:-3px;bottom:calc(var(--value)*68px + 1px);z-index:2}
.red .bottom .thumb,.mosaic .bottom .thumb{bottom:auto;top:calc(var(--value)*68px + 1px)}
.red .left .thumb,.red .right .thumb,.mosaic .left .thumb,.mosaic .right .thumb{height:34px;width:2px;top:-3px;bottom:auto;left:calc(var(--value)*68px + 1px)}
.red .left .thumb,.mosaic .left .thumb{left:auto;right:calc(var(--value)*68px + 1px)}
.thumb{z-index:2}.effect-options{display:none}
[data-mode=FX] .effect-options{position:absolute;left:52px;top:5px;display:flex;height:70px;flex-direction:column;justify-content:space-around;pointer-events:none;white-space:nowrap;font-size:11px;color:var(--muted)}
[data-mode=FX] .effect-options .selected{font-weight:bold;color:var(--ink)}
[data-mode=FX] .effect-options .selected::before{content:'•';position:absolute;left:-8px;color:var(--accent)}
[data-mode=FX] .top .stem-name,[data-mode=FX] .bottom .stem-name{visibility:hidden}
.metering .segments i.on{opacity:1}
/* Reserve trim space so selecting Drive never moves the cross under a finger. */
.drive-trim[hidden]{display:flex;visibility:hidden;pointer-events:none}

/* Light-only controls: the persistent lit extent is the saved setting. */
.thumb{display:none!important}
.metering .segments i.on{background:color-mix(in srgb,var(--meter) 48%,var(--track))}
.metering .segments i:not(.on){background:color-mix(in srgb,var(--ink) 8%,transparent)}
.ribbon .rail{box-shadow:none;background:color-mix(in srgb,var(--track) 30%,transparent)}

/* Performance layout: a larger cross, compact chrome, all look controls up top. */
.studies{grid-template-columns:repeat(4,minmax(352px,1fr));max-width:1660px}
.surface{height:760px;padding:22px 16px 12px}
.track-head{gap:8px;align-items:center}
.track-head h1,.solo .track-head h1{font-size:42px;white-space:nowrap;flex-shrink:0}
.ribbon .track-head h1,.scope .track-head h1,.solo .ribbon .track-head h1,.solo .scope .track-head h1{font-size:29px;letter-spacing:-1.4px}
.header-tools{display:flex;align-items:center;justify-content:flex-end;gap:2px;margin-left:auto}
.look-picker{max-width:111px;font-size:11px;padding:0 2px;min-height:44px}
.compare{font-size:11px;padding:0 6px;white-space:nowrap;min-height:44px}
.timeline{margin-top:8px}
.instrument-area,.solo .instrument-area{padding-top:0;min-height:500px}
.readout{min-height:44px;align-items:center;gap:9px;margin-bottom:8px}
.readout .mode{min-height:36px;font-size:12px;min-width:66px;padding:0 10px}
.readout-title{display:none}
.performance{width:328px;height:372px}
.channel.top{left:136px;top:30px}.channel.bottom{left:136px;top:226px}
.channel.left{left:8px;top:154px}.channel.right{left:212px;top:154px}
.control{width:56px;height:108px}.left .control,.right .control{width:108px;height:56px}
.rail{width:40px;height:96px}.left .rail,.right .rail{width:96px;height:40px}
.segments{inset:6px;gap:4px}
.center-play{left:126px;top:144px;width:76px;height:76px;border-radius:15px}.center-play svg{width:28px;height:28px}
.stem-name{font-size:13px}.top .stem-name{bottom:112px}.bottom .stem-name{top:112px}
.left .stem-name,.right .stem-name{top:59px;font-size:12px;width:120px}
[data-mode=FX] .effect-options{left:60px;top:6px;height:96px;font-size:12px}
.fx-tools{height:44px;display:flex;align-items:center;justify-content:center;gap:14px;flex-shrink:0}
.fx-tools[hidden]{display:flex;visibility:hidden;pointer-events:none}
.motion{min-height:44px;font-size:12px;border:1px solid var(--track);border-radius:20px;padding:0 12px;white-space:nowrap}
.motion[hidden]{display:none}.drive-trim{font-size:11px;gap:5px}.drive-trim input{width:88px}.drive-trim output{width:34px}
.drive-trim[hidden]{display:none}
.utility{width:300px;max-width:100%;margin:0 auto;justify-content:center;gap:5px;height:44px;flex-shrink:0}
.utility button{width:44px;min-width:44px;min-height:44px;padding:6px;touch-action:none;user-select:none;-webkit-touch-callout:none}
.utility .help{font-size:15px}.utility svg{width:19px;height:19px}
.player-status{height:26px;padding-top:3px;flex-shrink:0;font-size:11px}
.solo .surface{padding:max(18px,env(safe-area-inset-top)) 16px max(10px,env(safe-area-inset-bottom));min-height:690px}
@media(max-width:1540px){.studies{grid-template-columns:repeat(2,minmax(352px,1fr));max-width:850px}}
@media(max-width:760px){.studies{grid-template-columns:1fr;padding:16px}.surface{max-width:440px}}
@media(max-width:359px){.solo .surface{padding-left:8px;padding-right:8px}.performance{transform:scale(.92);margin:-15px}.track-head h1,.solo .track-head h1{font-size:36px}.look-picker{max-width:102px}}
@media(max-height:740px){.solo .instrument-area{min-height:490px;justify-content:center}.readout{margin-bottom:0}.solo .surface{padding-top:12px}.timeline{margin-top:2px}}
[data-mode=Repeat] .readout-title,[data-mode=FX] .readout-title{display:inline}

/* Centered mode choices and a balanced five-column transport row. */
.mode-selector{width:252px;display:grid;grid-template-columns:repeat(3,1fr);flex-shrink:0;margin:0 auto 4px;border-bottom:1px solid var(--track)}
.mode-tab{position:relative;min-height:44px;font-size:13px;color:var(--muted);padding:0 8px}
.mode-tab[aria-selected=true]{color:var(--ink);font-weight:600}
.mode-tab[aria-selected=true]::after{content:'';height:2px;position:absolute;bottom:-1px;left:20px;right:20px;background:var(--accent)}
.mode-tab.recording::before{content:'';position:absolute;top:6px;right:14px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.readout{height:26px;min-height:26px;margin:0 0 4px;font-size:12px;gap:7px}
.gesture-hint{display:none}
.utility{display:grid;grid-template-columns:repeat(5,1fr);width:280px;gap:0;align-items:center;justify-items:center}
.utility svg{width:18px;height:18px}.master-level{font-size:12px;font-variant-numeric:tabular-nums;text-align:center;color:var(--muted)}
.header-tools{gap:0}.header-tools .help{min-width:32px;width:32px;height:44px;font-size:14px;padding:0}
.header-tools .look-picker{max-width:105px}.header-tools .compare{padding:0 5px}
.track-head h1,.solo .track-head h1{font-size:40px}.solo .ribbon .track-head h1,.solo .scope .track-head h1{font-size:28px}
.instrument-area,.solo .instrument-area{flex:0 0 auto;min-height:0;margin-top:24px;justify-content:flex-start}
.utility{margin-top:16px}.player-status{margin-top:4px;height:26px}
.solo .surface{justify-content:flex-start;min-height:680px}
@media(min-height:790px){.solo .instrument-area{margin-top:40px}.solo .utility{margin-top:24px}}
@media(max-width:370px){.header-tools .look-picker{font-size:10px;max-width:94px}.header-tools .compare{font-size:10px}.track-head h1,.solo .track-head h1{font-size:38px}.track-head{gap:4px}}

/* Secondary controls stay out of the instrument surface. */
.track-title{font:inherit;letter-spacing:inherit;color:inherit;padding:0;border:0;background:none;text-align:left;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.strips-locked .control{opacity:.4;cursor:default}.strips-locked .motion{visibility:hidden}
.effect-options{display:none!important}
#library{width:min(460px,calc(100vw - 32px));max-height:85dvh;overflow:auto;box-sizing:border-box}
#library button{min-height:44px;cursor:pointer}#library h3{margin-top:24px}.library-row{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid #ccd4d0}.library-row button{border:0;background:none;text-align:left}.library-row button:first-child{flex:1}.library-row button:last-child:not(:first-child){font-size:12px;opacity:.7}.recording-row{display:flex;flex-wrap:wrap;gap:8px;padding:12px 0;border-bottom:1px solid #ccd4d0}.recording-row strong{width:100%;font-size:14px}.recording-row audio{width:100%}#library details{margin-top:24px}#library summary{cursor:pointer;padding:12px 0}#import-track{display:grid;gap:14px}#import-track label{display:grid;gap:6px}#import-track input{box-sizing:border-box;width:100%;min-height:40px}#library .library-status{font-size:14px;min-height:20px}#library>p,#import-track p{font-size:14px;line-height:1.5}.track-head h1{min-width:0}

.unlock{font:inherit;font-size:12px;border:0;background:none;color:var(--ink);cursor:pointer;min-height:30px}.strips-locked .readout strong,.strips-locked .readout-detail{display:none}.strips-locked .control{pointer-events:none}