*{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 calc(26px + 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;height:auto;min-height:max(680px,100svh)}
@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}

#orientation-tip{width:min(360px,calc(100vw - 40px));padding:28px;border-radius:18px;background:#e6ebea;color:#304c43;box-shadow:0 16px 64px #10241d33;max-height:calc(100dvh - 32px);overflow:auto}#orientation-tip::backdrop{background:#15322d88;backdrop-filter:blur(5px)}#orientation-tip .orientation-icon{display:block;width:48px;height:48px;color:#bc3c30;margin-bottom:22px}#orientation-tip h2{font-size:28px;font-weight:600;letter-spacing:-1px;margin:0 0 12px;line-height:1.1}#orientation-tip p{font-size:14px;line-height:1.5;margin:0}#orientation-tip .orientation-guide{border-top:1px solid #c3ceca;margin-top:22px;padding-top:18px}#orientation-tip .orientation-guide strong{font-size:12px;display:block;margin-bottom:6px}#orientation-tip .orientation-instruction{font-size:13px;color:#52685e}#orientation-tip button{width:100%;min-height:46px;border-radius:8px;font-size:14px}#orientation-tip .orientation-done{background:#bc3c30;color:#fff9ef;margin-top:22px}#orientation-tip .orientation-lock{border:1px solid #7f968a;margin-top:18px}#orientation-tip .orientation-lock[hidden]{display:none}#orientation-tip .orientation-status:not(:empty){margin-top:14px;font-size:12px}#orientation-tip .orientation-footer{font-size:11px;text-align:center;color:#63776e;margin-top:12px}#orientation-tip button:disabled{opacity:.55}
/* Rugged: the screen is the painted instrument face, without an outer device shell. */
.study.rugged{--bg:#555b50;--ink:#efead9;--muted:#d0cfbd;--track:#777c6b;--accent:#d15b40;--key:#fff0ce;--meter:#ffc26b}
.rugged .surface{isolation:isolate;background:radial-gradient(ellipse at 48% 38%,#92927a22,transparent 65%),linear-gradient(118deg,#606657,#50574b 65%,#484e43);box-shadow:inset 0 0 55px #17201730}
.rugged .surface::before{content:'';position:absolute;inset:0;background:url('./rugged-patina.svg') center/100% 100%;pointer-events:none;z-index:-1}
.rugged .track-head h1,.solo .rugged .track-head h1{color:var(--ink);text-shadow:1px 1px #242c24;letter-spacing:-1px}
.rugged .timeline,.rugged .stem-name,.rugged .master-level,.rugged .mode-tab,.rugged .player-status{font-family:'Courier New',monospace}
.rugged .stem-name{font-weight:700;text-shadow:0 1px #30382c;letter-spacing:-.4px}
.rugged .header-tools select{color-scheme:dark}
.rugged .mode-selector{border-bottom-color:#272f27;box-shadow:0 1px #c4c3a32b}
.rugged .mode-tab[aria-selected=true]::after{background:#edb765;box-shadow:0 0 5px #edb76544}
.rugged .rail{background:linear-gradient(100deg,#141b16,#252c22);border:1px solid #222a21;border-radius:4px;box-shadow:inset 1px 2px 4px #000b,0 1px 0 #d3cfab77,0 -1px 0 #192318;overflow:hidden}
.rugged .rail::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,#ffffff09,transparent 42%,#0002);pointer-events:none}
.rugged .segments i,.rugged.metering .segments i:not(.on){background:#45412c;opacity:.55;border-radius:1px}
.rugged .segments i.on,.rugged.metering .segments i.on{background:#a77d3d;opacity:1;box-shadow:0 0 3px #c0832520}
.rugged .segments i::after{box-shadow:0 0 6px #ffb44288}
.rugged .center-play{border-radius:9px;border:1px solid #62291c;background:linear-gradient(145deg,#cc6249,#a33d2b 80%);box-shadow:inset 0 1px 0 #ffce9b88,inset 1px 0 0 #f0a57466,inset -1px -2px 2px #611d1ba6,0 3px 0 #272d24,0 4px 6px #17201988;text-shadow:0 1px #722a20}
.rugged .center-play::after{content:'';position:absolute;inset:2px;border-radius:7px;border-top:1px solid #f1b48377;border-left:1px solid #e7bc8655;background:url('./rugged-patina.svg') 34% 80%/180px 350px;pointer-events:none;opacity:.7}
.rugged .center-play:active{transform:translateY(2px);box-shadow:inset 0 1px 3px #5c261b99,0 1px 0 #252c22}
.rugged.repeating .center-play{outline:2px solid #e7b771;outline-offset:4px}
.rugged .utility{border-top:1px solid #30382d;padding-top:9px;height:54px;box-shadow:inset 0 1px #c9c6a333}
.rugged .utility button{border-radius:5px;background:linear-gradient(#777c6b40,#202b2433);box-shadow:inset 0 1px #dbd6b533,0 1px 1px #1d261c55}
.rugged .utility button:active{background:#26302755;box-shadow:inset 0 1px 2px #18231877}
.rugged .motion[aria-pressed=true]{color:#ffd393}
.rugged :focus-visible{outline-color:#ffd393}
/* Credits use the supplied brand mark; monochrome follows each skin's contrast. */
.track-identity{min-width:0;flex-shrink:0}
.artist-credit{font:10px/1.4 Arial,sans-serif;white-space:nowrap;color:var(--muted);margin-top:4px}
.design-credit{margin-top:auto;padding-top:10px;display:flex;align-items:center;justify-content:center;gap:3px;min-height:40px;flex-shrink:0;color:#000;font:10px/1.4 Arial,sans-serif}
.design-credit img{width:36px;height:36px;object-fit:contain;filter:brightness(0)}
.scope .design-credit,.rugged .design-credit,.darkred .design-credit{color:#fff}
.scope .design-credit img,.rugged .design-credit img,.darkred .design-credit img{filter:brightness(0) invert(1)}
.player-status:empty{display:none}
.study.darkred{--bg:#191b1b;--ink:#e4e4dd;--muted:#a8aaa6;--track:#363a38;--accent:#d3483d;--key:#f4e9dc;--meter:#f36c56}
.darkred .rail{background:#282b29;box-shadow:inset 0 1px 4px #0007}
.darkred .center-play{background:#b83b30}
.darkred .header-tools select{color-scheme:dark}
.darkred .segments i.on{background:#b54737}
.darkred .motion[aria-pressed=true]{color:#ff8a77}
@media(max-width:370px){.artist-credit{font-size:9px}.header-tools .look-picker{max-width:88px}}
@media(max-height:790px){.solo .instrument-area{margin-top:16px}.solo .utility{margin-top:8px}.solo .design-credit{padding-top:4px;min-height:40px}}
/* Approved material skins: photographed paint and rubber, live DOM controls. */
.study.worn.red{--bg:#fffdf8;--ink:#242820;--muted:#4d5147;--track:#a9a99b;--accent:#b94331;--key:#f5e8ce;--meter:#bcf074}
.study.worn.ribbon{--bg:#dccde9;--ink:#3b284e;--muted:#55405c;--track:#a69baa;--accent:#573074;--key:#f5e8ce;--meter:#f0e5ff}
.study.worn.scope{--bg:#1d5459;--ink:#b1edda;--muted:#b0d2c7;--track:#578079;--accent:#9ae5cd;--key:#f5e8ce;--meter:#9bf3d8}
.study.worn.mosaic{--bg:#e8ed6c;--ink:#2639a7;--muted:#394844;--track:#a3ac54;--accent:#293bb3;--key:#f5e8ce;--meter:#6e98ff}
.study.worn.olive{--bg:#65685a;--ink:#f3ecda;--muted:#e2dbc7;--track:#8e917a;--accent:#eee1c3;--key:#f5e8ce;--meter:#ffc46a}
.study.worn.darkred{--bg:#141616;--ink:#efeadf;--muted:#d1cec3;--track:#5b5f57;--accent:#db4b3e;--key:#f5e8ce;--meter:#ff6c59}
.study.worn .surface{background:var(--bg) url('./paint-texture.webp') center/100% 100%;background-blend-mode:multiply;box-shadow:none;isolation:isolate}
body:not(.solo) .study.worn .surface{height:790px}
.study.worn .track-head h1,.solo .study.worn .track-head h1{font-family:Impact,'Arial Narrow',sans-serif;font-size:40px;font-weight:900;letter-spacing:-1px;color:var(--accent)}
.study.worn .timeline,.study.worn .stem-name,.study.worn .mode-tab,.study.worn .master-level{font-family:'Courier New',monospace}
.study.worn .stem-name{font-weight:600;letter-spacing:-.5px}
.study.worn .artist-credit{color:var(--ink)}
.study.worn .rail{background:linear-gradient(115deg,#292c22,#11170f);border:1px solid #151c12;border-radius:5px;box-shadow:inset 1px 2px 3px #000b,0 1px 0 #f0e7c980,0 0 0 2px #242a1e44,0 2px 3px #14190e66;overflow:hidden}
.study.worn .segments{display:flex;inset:6px;gap:4px}
.study.worn .segments i{border-radius:1px;position:relative;opacity:1;box-shadow:inset 0 1px 2px #0006}
.study.worn.metering .segments i.on{background:color-mix(in srgb,var(--meter) 55%,#151a0d)}
.study.worn.metering .segments i:not(.on){background:color-mix(in srgb,var(--meter) 9%,#14180e);opacity:.55}
.study.worn .segments i::after{background:linear-gradient(180deg,color-mix(in srgb,var(--meter) 70%,white),var(--meter));box-shadow:0 0 5px color-mix(in srgb,var(--meter) 65%,transparent)}
.study.worn .rail::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(125deg,#ffffff13,transparent 40%,#0003);pointer-events:none}
.study.worn .center-play{border:1px solid #692b21;border-radius:9px;background:#b74735 url('./rubber-texture.webp') center/cover;color:var(--key);box-shadow:inset 0 1px 1px #ffdfb39c,inset -1px -2px 2px #5d201ba6,0 0 0 2px #30281d80,0 3px 0 #27291e,0 4px 6px #17190e66}
.study.worn .center-play:active{transform:translateY(2px);box-shadow:inset 0 1px 3px #5c261b99,0 1px 0 #252c22}
.study.worn.repeating .center-play{outline:2px solid var(--meter);outline-offset:4px}
.study.worn .mode-selector{border-color:color-mix(in srgb,var(--ink) 45%,transparent);box-shadow:0 1px #f0ead340}
.study.worn .mode-tab[aria-selected=true]::after{background:var(--meter);box-shadow:0 0 3px var(--meter)}
.study.worn .utility{border-top:1px solid color-mix(in srgb,var(--ink) 35%,transparent);padding-top:8px;height:52px}
.study.worn .utility button{width:42px;border-radius:5px;border:1px solid #1b211b;background:#242925 url('./paint-texture.webp') center/180px 360px;background-blend-mode:multiply;color:#f0e9d7;box-shadow:inset 0 1px #e8d9bf66,0 1px 0 #12170e,0 2px 3px #1b201d66}
.study.worn .utility button:active{transform:translateY(1px);box-shadow:inset 0 1px 2px #000a}
.study.worn .motion[aria-pressed=true]{color:var(--meter)}
.olive .header-tools select{color-scheme:dark}
.olive .design-credit{color:#fff}.olive .design-credit img{filter:brightness(0) invert(1)}
.study.worn :focus-visible{outline-color:var(--ink)}
.studies{grid-template-columns:repeat(3,minmax(352px,1fr));max-width:1260px}
@media(max-width:1150px){.studies{grid-template-columns:repeat(2,minmax(352px,1fr));max-width:850px}}
@media(max-width:760px){.studies{grid-template-columns:1fr;padding:16px}.study.worn .surface{max-width:440px}}
@media(max-width:370px){.study.worn .track-head h1,.solo .study.worn .track-head h1{font-size:38px}}
@media(max-height:790px){.solo .study.worn .utility{margin-top:4px}}

.artist-credit a{color:inherit;text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:2px}.design-credit a{display:flex;align-items:center;gap:3px;color:inherit;min-height:36px;text-decoration:none}.design-credit a:hover span{text-decoration:underline;text-underline-offset:2px}

/* Keep the lower controls and linked credit clear of phone browser chrome. */
.solo .performance{height:356px}
.design-credit,.solo .design-credit{padding-top:20px;min-height:56px}

@media(max-height:790px){.solo .performance{height:340px}}

.study.worn .surface{padding-bottom:calc(26px + env(safe-area-inset-bottom))}
body:not(.solo) .study.worn .surface{height:auto;min-height:790px}

/* Active FX recessed display.  Both use the existing cross and gestures. */
.fx-state,.pulse-speed{display:none}
[data-mode=FX] .readout{position:relative;width:288px;box-sizing:border-box;height:66px;min-height:66px;margin:6px auto 4px;display:grid;grid-template-columns:1fr auto;grid-template-rows:14px 28px;gap:2px 14px;padding:9px 14px;align-items:center;border-radius:5px;background:linear-gradient(135deg,#242926,#101411);box-shadow:inset 0 2px 4px #000b,0 1px 0 #fff5;border:1px solid #101610;color:var(--meter)}
[data-mode=FX] .readout .fx-state{display:block;grid-column:1;grid-row:1;font:9px/1 'Courier New',monospace;letter-spacing:1.3px;opacity:.7}
[data-mode=FX] .readout-title{display:block;grid-column:1;grid-row:2;font:bold 23px/1 'Courier New',monospace;letter-spacing:-1px;text-shadow:0 0 8px color-mix(in srgb,var(--meter) 30%,transparent)}
[data-mode=FX] .readout-detail{grid-column:2;grid-row:2;font:bold 19px/1 'Courier New',monospace}
[data-mode=FX] .pulse-speed:not(:empty){display:block;grid-column:2;grid-row:1;font:10px/1 'Courier New',monospace;white-space:nowrap}
[data-mode=FX][data-fx-active=false] .readout{color:#b0b6ac}
@media(max-height:790px){.solo .instrument-area{margin-top:4px}.solo .utility{margin-top:0}.solo .fx-tools{min-height:38px;height:38px}.solo .gesture-hint{margin-top:0}}
.study.worn[data-mode=FX] .readout-title,.study.worn[data-mode=FX] .readout-detail{color:inherit;opacity:1}
@media(max-height:750px){.solo .instrument-area{margin-top:0}.solo [data-mode=FX] .readout{height:56px;min-height:56px;padding-top:4px;padding-bottom:4px;margin-top:2px}.solo .utility{height:44px;padding-top:0}.solo .design-credit{min-height:36px;padding-top:0}}
.study.worn[data-mode=FX] .segments i.on{background:color-mix(in srgb,var(--meter) 75%,#151a0d);box-shadow:0 0 4px color-mix(in srgb,var(--meter) 30%,transparent)}
.study.worn[data-mode=FX] .segments i:not(.on){background:color-mix(in srgb,var(--meter) 9%,#14180e);opacity:.55}
.strips-locked .fx-state,.strips-locked .pulse-speed{display:none}

/* Decorative only: no pointer hit areas, no backing disc. */
.performance{isolation:isolate}
.crosshair{position:absolute;inset:0;width:328px;height:372px;z-index:-1;pointer-events:none;overflow:visible;fill:none;color:var(--ink);stroke:currentColor;stroke-width:1}
.crosshair .ring-inner,.crosshair .ring-arcs,.crosshair .ring-ticks{display:none}

/* Three alternatives to the selected open-arc concept. */
.crosshair .ring-main,.crosshair .ring-inner,.crosshair .ring-dots{display:none}
.crosshair .ring-arcs{display:block}
.crosshair{color:var(--accent);opacity:.7;stroke-width:1;stroke-linecap:round}
[data-ring=industrial] .crosshair{stroke-width:3.5;opacity:.7;stroke-linecap:butt}
[data-ring=industrial] .crosshair .ring-ticks{display:block;stroke-width:3.5}
/* Keep the paint wear legible against the deeper black finish. */
.study.worn.darkred .surface{background-color:#090b0b;background-blend-mode:soft-light}
/* Give the tilt control its full touch height and space above the utility rule. */
.solo .fx-tools{height:52px;min-height:52px;padding-bottom:8px;box-sizing:border-box;align-items:center}
.solo .study.worn .utility{margin-top:8px}
.welcome-tour{box-sizing:border-box;width:calc(100% - 32px);max-width:390px;padding:26px;background:#171a19;color:#efeadf;border:1px solid #474d49;border-radius:12px;box-shadow:0 20px 80px #0008}
.welcome-tour::backdrop{background:#0008;backdrop-filter:blur(3px)}
.welcome-tour h2{font:600 25px/1.15 system-ui;margin:12px 0 16px;letter-spacing:-.6px}
.welcome-tour .tour-copy{font:15px/1.6 system-ui;margin:0 0 26px;color:#cccfc8}
.tour-progress{font:11px/1.4 monospace;color:#e25a4a;letter-spacing:2px}
.tour-actions{display:flex;align-items:center;gap:8px}
.tour-actions button{min-height:44px;padding:0 14px;border:1px solid #4f5650;border-radius:6px;color:#efeadf;background:transparent;font:14px system-ui;cursor:pointer}
.tour-actions .tour-skip{margin-right:auto;padding-left:0;border-color:transparent;color:#bcc2b9}
.tour-actions .tour-next{background:#b83d30;border-color:#b83d30}
.tour-actions [hidden]{display:none}
@media(max-height:750px){.solo .fx-tools{height:52px;min-height:52px}.solo .instrument-area{margin-top:0}.solo .gesture-hint{margin-top:4px;margin-bottom:4px}}

/* A fixed, compact readout keeps the cross at the same height in every mode. */
.study.worn .readout,.solo .study.worn .readout{height:34px;min-height:34px;flex-shrink:0;margin:4px auto 6px}
.study.worn:is([data-mode=FX],[data-mode=Repeat]) .readout,.solo .study.worn:is([data-mode=FX],[data-mode=Repeat]) .readout{width:252px;display:grid;grid-template-columns:6px 1fr auto auto;grid-template-rows:1fr;gap:8px;padding:5px 10px;align-items:center;border-radius:5px;background:linear-gradient(135deg,#242926,#101411);border:1px solid #101610;color:var(--meter);box-shadow:inset 0 1px 3px #0008,0 1px 0 #ffffff25}
.study.worn:is([data-mode=FX],[data-mode=Repeat]) .readout .fx-state{grid-column:1;grid-row:1;width:4px;height:4px;display:block;font-size:0;border-radius:50%;background:currentColor;opacity:.9}
.study.worn:is([data-mode=FX],[data-mode=Repeat]) .readout-title{grid-column:2;grid-row:1;font:bold 16px/1 'Courier New',monospace;letter-spacing:-.4px;text-align:left}
.study.worn:is([data-mode=FX],[data-mode=Repeat]) .readout-detail{grid-column:4;grid-row:1;font:bold 13px/1 'Courier New',monospace}
.study.worn[data-mode=FX] .pulse-speed:not(:empty){grid-column:3;grid-row:1;font:9px/1 'Courier New',monospace}
.study.worn[data-mode=FX][data-fx-active=false] .fx-state{opacity:.35}

.study.worn[data-mode=Repeat]:not(.repeating) .readout{color:#b0b6ac}
.study.worn[data-mode=Repeat]:not(.repeating) .readout .fx-state{opacity:.35}
.study.worn[data-mode=Repeat] .readout-title,.study.worn[data-mode=Repeat] .readout-detail{color:inherit;opacity:1}
.study.worn[data-mode=Repeat] .pulse-speed{display:none}
/* Smoked-glass mode selector: proposed visual treatment only. */
.study.worn .mode-selector{position:relative;isolation:isolate;box-sizing:border-box;width:252px;height:46px;border:1px solid color-mix(in srgb,var(--ink) 24%,transparent);border-radius:9px;overflow:hidden;background:linear-gradient(165deg,#ffffff10,transparent 50%),color-mix(in srgb,var(--bg) 76%,#121719);box-shadow:inset 0 1px 1px #ffffff15,inset 0 -1px 2px #0005,0 2px 5px #0002;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.study.worn .mode-selector::before{content:'';position:absolute;z-index:-1;top:3px;bottom:3px;left:3px;width:calc((100% - 6px)/3);box-sizing:border-box;border:1px solid color-mix(in srgb,var(--ink) 25%,transparent);border-radius:6px;background:linear-gradient(120deg,#ffffff21,#ffffff08 44%,#00000012),color-mix(in srgb,var(--accent) 9%,transparent);box-shadow:inset 0 1px 0 #ffffff21,inset 0 -1px 1px #0005,0 2px 3px #0003;transform:translateX(0);transition:transform 220ms cubic-bezier(.22,.7,.2,1)}
.study.worn[data-mode=Repeat] .mode-selector::before{transform:translateX(100%)}
.study.worn[data-mode=FX] .mode-selector::before{transform:translateX(200%)}
.study.worn .mode-selector::after{content:'';pointer-events:none;position:absolute;inset:0;z-index:2;background:url('./paint-texture.webp') 63% 42%/380px 620px;opacity:.08;mix-blend-mode:multiply}
.study.worn.darkred .mode-selector::after,.study.worn.scope .mode-selector::after,.study.worn.olive .mode-selector::after{mix-blend-mode:screen;opacity:.065}
.study.worn .mode-tab{min-height:44px;z-index:1;font-size:13px;letter-spacing:.1px;color:color-mix(in srgb,var(--ink) 67%,transparent);border-radius:7px;transition:color 160ms ease;background:transparent}
.study.worn .mode-tab[aria-selected=true]{color:var(--ink);font-weight:700;text-shadow:0 0 10px color-mix(in srgb,var(--accent) 16%,transparent)}
.study.worn .mode-tab[aria-selected=true]::after{display:none}
.study.worn .mode-tab:focus-visible{outline:1px solid var(--ink);outline-offset:-5px}
@media(prefers-reduced-motion:reduce){.study.worn .mode-selector::before,.study.worn .mode-tab{transition:none}}

/* Stencil-cut help mark: a graphic key rather than a boxed text glyph. */
.study.worn .header-tools{gap:0}
.study.worn .header-tools .help{position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;opacity:1;border:0;border-radius:3px;background:transparent;color:#d8dbd0;box-shadow:none}
.study.worn .header-tools .help svg{width:26px;height:26px;filter:drop-shadow(0 1px 0 #0009)}
.study.worn .header-tools .help .help-dot{fill:var(--accent)}
.study.worn .header-tools .help:active{color:var(--accent);transform:translateY(1px)}

/* Fit the preview instrument above its compact recording dock. */
@media(max-height:740px){
 .solo .surface{min-height:100svh;padding-top:10px;padding-bottom:8px}
 .solo .instrument-area{min-height:0;margin-top:0}
 .solo .performance{height:340px}
 .solo .player-status{height:18px;margin-top:0;font-size:10px}
 .solo .design-credit{padding-top:0;min-height:30px}
 .solo .timeline{margin-top:0}
}
@media(max-height:640px){
 .solo .study.worn .surface{padding:8px 12px;min-height:100svh}
 .solo .track-head h1{font-size:32px}
 .solo .instrument-area{padding:0}
 .solo .performance{transform:scale(.9);transform-origin:center center;margin:-18px 0;height:372px}
 .solo .fx-tools[hidden]{display:none}
 .solo .study.worn .utility{margin-top:4px;padding-top:0;height:44px}
 .solo .design-credit{display:none}
 .solo .study.worn .readout{margin-top:0;margin-bottom:0;height:34px;min-height:34px}
}

@media(max-height:640px){.solo .fx-tools:not([hidden]){position:absolute;top:12px;right:56px;height:44px;min-height:44px;padding:0;z-index:2}.solo .fx-tools .motion{font-size:11px;padding:0 10px}}
@media(max-height:640px){.solo .timeline,.solo .seek{height:36px;min-height:36px}.solo .study.worn .surface{padding-bottom:0}.solo .welcome-tour{max-height:calc(100svh - 24px);overflow:auto}}

@media(max-height:580px){.solo .performance{transform:scale(.75);margin:-46.5px 0}.solo .study.worn .surface{padding-top:4px}.solo .track-head h1{font-size:30px}}

@media(min-height:610px) and (max-height:640px){.solo .design-credit{display:flex;min-height:36px}}