/* Vocal Practice AI ??Morphic-style dark cinema canvas
   Surface stack #000 ??#212121 ??#292929 ??#333333, single accent #0075ff. */
:root{
  --bg:#000000; --card:#212121; --raised:#292929; --floating:#333333;
  --line:rgba(229,231,235,.14);
  --txt:#ffffff; --sub:#999999; --dim:#666666;
  --blue:#0075ff;
}
*{box-sizing:border-box;margin:0}
html{color-scheme:dark}
body{
  font-family:Inter,"IBM Plex Sans",Geist,system-ui,sans-serif;
  font-feature-settings:"cv11","ss01";
  background:var(--bg);color:var(--txt);line-height:1.5;
  font-size:14px;letter-spacing:-.01em;
  min-height:100dvh;
}
h1{font-size:clamp(2.2rem,5vw,52px);line-height:1.15;letter-spacing:-.062em;font-weight:700}
h2{font-size:clamp(1.5rem,3vw,40px);line-height:1.15;letter-spacing:-.048em;font-weight:700}
h3{font-weight:600}
.sub{color:var(--sub);font-size:.95rem;font-weight:400}
.center{text-align:center}
/* two-tone headline: signature device ??second line muted */
.grad{color:var(--sub)}
a{color:inherit;text-decoration:none}

/* topbar ??floats on the void, no fill, no border */
.topbar{
  position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:1.2rem;
  padding:.9rem clamp(1rem,4vw,2.5rem);
  background:rgba(0,0,0,.75);backdrop-filter:blur(14px);
}
.brand{font-weight:600;display:flex;align-items:center;gap:.5rem;font-size:1.05rem;letter-spacing:-.022em}
.brand em{font-style:normal;color:var(--txt)}
.logo-dot{width:10px;height:10px;border-radius:100px;background:var(--blue)}
.topbar nav{display:flex;gap:1.1rem;margin-left:auto;font-size:14px;font-weight:500}
.topbar nav a{color:var(--sub);padding:.3rem 0}
.topbar nav a.active,.topbar nav a:hover{color:var(--txt)}

/* buttons ??blue is the only filled chromatic action */
.btn{
  border:none;background:var(--raised);color:var(--txt);
  padding:8px 16px;border-radius:7px;font:inherit;font-weight:500;font-size:14px;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
}
.btn:hover{background:var(--floating)}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:#1f84ff}
.btn-ghost{background:transparent;border:1px solid var(--line)}
.btn-ghost:hover{background:var(--raised)}
.btn-sm{padding:6px 12px;font-size:13px}
.btn-lg{padding:12px 22px;font-size:15px}

/* pages */
.page{max-width:1170px;margin:0 auto;padding:clamp(1rem,4vw,2.5rem)}
.page-head{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;margin-bottom:1.5rem}
.page-head-actions{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px}

/* hero */
.hero{position:relative;text-align:center;padding:clamp(2.5rem,10vh,6rem) 0 2rem}
.hero-glow{display:none}
.eyebrow{color:var(--sub);font-weight:500;font-size:12px;margin-bottom:1.2rem;display:inline-flex;align-items:center;gap:.5rem}
.eyebrow::before{content:"New";background:var(--blue);color:#fff;font-weight:500;padding:4px 8px;border-radius:7px;text-transform:none;letter-spacing:0}
.hero .sub{max-width:34rem;margin:1.4rem auto 0;font-size:16px;letter-spacing:-.015em;line-height:1.5}
.hero-cta{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:2.2rem}
.hero-mock{max-width:640px;margin:4rem auto 0;display:grid;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px}
.mock-track{display:flex;align-items:center;gap:1rem;font-size:12px;color:var(--sub)}
.mock-track span{width:6.5rem;text-align:left;flex-shrink:0}
.mock-wave{flex:1;height:52px;position:relative;opacity:.92;overflow:hidden}
.mock-wave::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(148,163,184,.13);translate:0 -50%;pointer-events:none}
.mock-wave canvas{display:block;width:100%;height:100%;
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 38%,#000 62%,transparent 100%);
          mask:linear-gradient(180deg,transparent 0,#000 38%,#000 62%,transparent 100%)}
.mock-wave.v{color:#d8dde5}.mock-wave.i{color:#59616c;opacity:.68}
.hero-mock:has(.mock-track:hover) .mock-wave{opacity:.38}
.hero-mock .mock-track:hover .mock-wave{opacity:1}
.hero-mock .mock-track:hover .mock-wave.i{color:#d8dde5} /* canvas re-reads color each frame */

/* features & pricing */
.tools-launcher{margin:112px 0 0;scroll-margin-top:88px}
.tools-heading{max-width:720px;margin:0 0 28px}
.tools-kicker{display:block;color:#6aaeff;font-size:11px;font-weight:800;letter-spacing:.16em;margin-bottom:12px}
.tools-heading h2{font-size:clamp(32px,4vw,52px);line-height:1;letter-spacing:-.05em;margin:0}
.tools-heading p{color:var(--sub);font-size:15px;line-height:1.6;margin:15px 0 0}
/* full width so the tab bar shares both edges with .tool-grid below — at max-content it orphaned itself against the 1280px grid */
.source-tabs{position:relative;width:100%;display:flex;gap:5px;padding:5px;margin:0 0 20px;border:1px solid var(--line);border-radius:18px;background:#111}
.source-tabs{--card-bg:#111;--glow-padding:20px}   /* rb-glow tuned for the thin frame: match its solid bg, smaller bloom */
.source-tabs>.border-glow-inner{flex-direction:row;gap:5px;flex:1}
.source-tab{flex:1;min-width:0;min-height:58px;padding:9px 16px;display:flex;align-items:center;justify-content:center;gap:11px;border:0;border-radius:13px;background:transparent;color:var(--sub);font:inherit;text-align:left;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.source-tab svg{flex:none;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.source-tab span{font-size:13px;font-weight:750;line-height:1.1}
.source-tab small{display:block;margin-bottom:3px;color:inherit;font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.source-tab:hover{color:#fff;background:#1d1d1d}
.source-tab.on{color:#fff;background:#1c1c1e;box-shadow:0 6px 18px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08)}   /* matches the tool cards' surface grey */
.source-tab.on:first-child{color:#69b5ff}
.source-tab.on:nth-child(2){color:#58ded8}
.source-tab.on:nth-child(3){color:#b69cff}
.tool-panel{animation:tool-panel-in .24s ease}
@keyframes tool-panel-in{from{opacity:.25;transform:translateY(8px)}to{opacity:1;transform:none}}
.tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.home-tool-card,.converter-card{--accent:#0075ff;position:relative;isolation:isolate;border:1px solid rgba(255,255,255,.08);color:#fff;background:linear-gradient(162deg,#1c1c1e,#111112);box-shadow:0 18px 46px rgba(0,0,0,.45)}
/* accent corner glow lives in the card background (::before is used by BorderGlow) */
.converter-card{background:radial-gradient(70% 60% at 88% -4%,color-mix(in srgb,var(--accent) 28%,transparent),transparent 55%),linear-gradient(162deg,#1c1c1e,#111112)}
.tool-blue{--accent:#0075ff}.tool-purple{--accent:#a855f7}.tool-transcribe{--accent:#c98749}.tool-teal{--accent:#22c55e}.tool-pink{--accent:#f59e0b}
.home-tool-card{min-height:292px;padding:28px 30px 26px;display:flex;flex-direction:column;border-radius:23px;transition:transform .22s ease,box-shadow .22s ease;background:radial-gradient(85% 75% at 88% -6%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 58%),linear-gradient(162deg,#1c1c1e,#111112)}
.home-tool-card:hover{transform:translateY(-4px);box-shadow:0 24px 58px rgba(0,0,0,.5)}
.tool-card-top{height:0;position:relative}
.tool-card-icon{width:48px;height:48px;display:grid;place-items:center;color:color-mix(in srgb,var(--accent),#fff 30%);border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);border-radius:15px;background:color-mix(in srgb,var(--accent) 15%,transparent);box-shadow:0 0 22px -8px var(--accent),inset 0 1px 0 rgba(255,255,255,.1)}
.tool-card-icon svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tool-card-art{--art-image:none;position:absolute;right:-4px;bottom:10px;width:43%;height:43%;display:block;background:color-mix(in srgb,var(--accent),#fff 20%);-webkit-mask-image:var(--art-image);mask-image:var(--art-image);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;transform-origin:right center;transform:perspective(380px) rotateY(-27deg) skewY(3.6deg) rotateZ(1.8deg);filter:drop-shadow(0 0 7px var(--accent)) drop-shadow(0 0 18px color-mix(in srgb,var(--accent) 72%,transparent));opacity:.72;pointer-events:none}
.art-separate{--art-image:url('assets/icons/waveform-microphone.svg')}
.art-transcribe{--art-image:url('assets/icons/music-to-sheet.svg?v=3')}
.art-clean{--art-image:url('assets/icons/headphones-waveform.svg')}
.art-guitar{--art-image:url('assets/icons/pick-waveform.svg')}
.border-glow-inner>:not(.tool-card-art){position:relative;z-index:1}
@media(max-width:640px){.tool-card-art{right:-16px;bottom:14px;width:45%;height:38%;opacity:.42;transform:perspective(320px) rotateY(-25deg) skewY(3.6deg) rotateZ(1.8deg)}}
.tool-card-tag{position:absolute;top:0;right:0;padding:7px 10px;border:1px solid color-mix(in srgb,var(--accent) 42%,transparent);border-radius:999px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:color-mix(in srgb,var(--accent),#fff 40%);font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.home-tool-card h3{margin:0 0 12px;padding-right:130px;color:#fff;font-size:clamp(25px,2.5vw,34px);line-height:1;letter-spacing:-.045em}
.home-tool-card>p{max-width:510px;margin:0;color:rgba(255,255,255,.72);font-size:13px;line-height:1.55}
.tool-flow,.converter-flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tool-flow{margin:20px 0 0}
.tool-flow span,.converter-flow span{padding:6px 8px;border:1px solid rgba(255,255,255,.14);border-radius:7px;background:rgba(255,255,255,.05);font-size:9px;font-weight:800;letter-spacing:.06em}
.tool-flow i,.converter-flow i{width:20px;height:1px;background:rgba(255,255,255,.56);position:relative}
.tool-flow i::after,.converter-flow i::after{content:"";position:absolute;right:0;top:-3px;border-left:5px solid rgba(255,255,255,.7);border-top:3px solid transparent;border-bottom:3px solid transparent}
.tool-card-actions{display:flex;align-items:center;gap:9px;margin-top:auto;padding-top:20px}
.tool-primary,.tool-secondary{min-height:40px;padding:0 15px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font:inherit;font-size:11px;font-weight:800;white-space:nowrap;cursor:pointer;transition:transform .18s ease,background .18s ease}
.tool-primary{border:1px solid #fff;background:#fff;color:#101828}
.tool-secondary{border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.05);color:#fff}
.tool-primary:hover,.tool-secondary:hover{transform:translateY(-2px)}
.tool-secondary:hover{background:rgba(255,255,255,.16)}
.tool-output-note{color:rgba(255,255,255,.72);font-size:10px;font-weight:650}
.converter-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:16px}
.converter-card{min-height:390px;padding:42px;border-radius:24px;display:flex;flex-direction:column;align-items:flex-start}
.converter-eyebrow{font-size:10px;font-weight:800;letter-spacing:.14em;opacity:.78}
.converter-card h3{max-width:610px;margin:24px 0 13px;color:#fff;font-size:clamp(30px,4vw,48px);line-height:.98;letter-spacing:-.05em}
.converter-card>p{max-width:610px;margin:0;color:rgba(255,255,255,.86);font-size:14px;line-height:1.6}
.converter-flow{margin:29px 0}.converter-flow b{font-size:14px}
.converter-card>.border-glow-inner>.tool-primary{margin-top:auto}
.tool-guide{min-height:390px;padding:32px 28px;display:grid;grid-template-columns:38px 1fr;align-content:center;gap:25px 12px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,#202020,#171717)}
.tool-guide-number{width:34px;height:34px;display:grid;place-items:center;border:1px solid #3b3b3b;border-radius:10px;color:#8abfff;font-size:10px;font-weight:800}
.tool-guide strong{display:block;font-size:13px;margin-bottom:5px}.tool-guide p{margin:0;color:var(--sub);font-size:11px;line-height:1.5}
@media(max-width:900px){.tool-grid{grid-template-columns:1fr}.converter-layout{grid-template-columns:1fr}.converter-card,.tool-guide{min-height:auto}.tool-guide{padding:27px}.source-tab{min-width:0;flex:1}.source-tabs{width:100%}}
@media(max-width:640px){.tools-launcher{margin-top:80px}.tools-heading{text-align:center;margin-bottom:23px}.tools-heading h2{font-size:36px}.source-tabs{padding:4px;gap:3px;border-radius:15px}.source-tab{min-height:55px;padding:8px;justify-content:center;text-align:center}.source-tab svg{display:none}.source-tab span{font-size:11px}.source-tab small{font-size:8px}.home-tool-card{min-height:340px;padding:24px 22px}.home-tool-card h3{font-size:28px}.tool-card-actions{align-items:flex-start;flex-wrap:wrap}.tool-output-note{width:100%}.converter-card{padding:30px 24px;min-height:390px}.converter-card h3{font-size:34px}.converter-flow{gap:6px}.tool-guide{grid-template-columns:36px 1fr}}
.pricing{margin:96px 0 2rem;text-align:center}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px;margin-top:2rem;text-align:left}
.plan{display:flex;flex-direction:column;gap:.8rem;position:relative;transition:transform .2s ease,box-shadow .2s ease}
.plan:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.28);box-shadow:0 20px 45px rgba(0,0,0,.38)}
/* .featured is the selected plan — JS moves it on click so only one card is ever blue. Defaults to Pro in the markup. */
.plan{cursor:pointer}
.plan.featured{border-color:var(--blue)}
.plan.featured:hover{border-color:var(--blue);box-shadow:0 20px 48px rgba(0,117,255,.18)}
.plan.featured .btn{background:var(--blue);border-color:var(--blue);color:#fff}
.plan .badge{position:absolute;top:-12px;left:50%;translate:-50%;background:var(--blue);color:#fff;font-size:12px;font-weight:500;padding:4px 8px;border-radius:7px}
.plan:not(.featured) .badge{background:var(--raised);color:var(--sub)}
.price{font-size:2.2rem;font-weight:700;letter-spacing:-.03em}
.price span{font-size:.9rem;color:var(--sub);font-weight:400}
.plan ul{list-style:none;color:var(--sub);font-size:13px;display:grid;gap:.45rem;flex:1}
.plan ul li::before{content:"✓";color:var(--txt)}

/* reactbits BorderGlow — colors + logic ported verbatim (glowColor 40 80 80; mesh #c084fc/#f472b6/#38bdf8). edge-proximity & cursor-angle set by JS in index.html. JS tags each card with .rb-glow (.plan, .home-tool-card, .converter-card). */
.rb-glow{
  --edge-proximity:0;--cursor-angle:45deg;--edge-sensitivity:30;
  --color-sensitivity:calc(var(--edge-sensitivity) + 20);
  --glow-padding:40px;--cone-spread:25;--fill-opacity:.5;--card-bg:var(--card);
  --gradient-one:radial-gradient(at 80% 55%, #c084fc 0px, transparent 50%);
  --gradient-two:radial-gradient(at 69% 34%, #f472b6 0px, transparent 50%);
  --gradient-three:radial-gradient(at 8% 6%, #38bdf8 0px, transparent 50%);
  --gradient-four:radial-gradient(at 41% 38%, #c084fc 0px, transparent 50%);
  --gradient-five:radial-gradient(at 86% 85%, #f472b6 0px, transparent 50%);
  --gradient-six:radial-gradient(at 82% 18%, #38bdf8 0px, transparent 50%);
  --gradient-seven:radial-gradient(at 51% 4%, #f472b6 0px, transparent 50%);
  --gradient-base:linear-gradient(#c084fc 0 100%);
  isolation:isolate;transform:translate3d(0,0,.01px)
}
.rb-glow::before,.rb-glow::after,.rb-glow>.edge-light{content:"";position:absolute;inset:0;border-radius:inherit;transition:opacity .25s ease-out;z-index:-1}
.rb-glow:not(:hover)::before,.rb-glow:not(:hover)::after,.rb-glow:not(:hover)>.edge-light{opacity:0;transition:opacity .75s ease-in-out}
.rb-glow::before{
  border:1px solid transparent;
  background:linear-gradient(var(--card-bg) 0 100%) padding-box,linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,var(--gradient-one) border-box,var(--gradient-two) border-box,var(--gradient-three) border-box,var(--gradient-four) border-box,var(--gradient-five) border-box,var(--gradient-six) border-box,var(--gradient-seven) border-box,var(--gradient-base) border-box;
  opacity:calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mask-image:conic-gradient(from var(--cursor-angle) at center,black calc(var(--cone-spread) * 1%),transparent calc((var(--cone-spread) + 15) * 1%),transparent calc((100 - var(--cone-spread) - 15) * 1%),black calc((100 - var(--cone-spread)) * 1%))
}
.rb-glow::after{
  border:1px solid transparent;
  background:var(--gradient-one) padding-box,var(--gradient-two) padding-box,var(--gradient-three) padding-box,var(--gradient-four) padding-box,var(--gradient-five) padding-box,var(--gradient-six) padding-box,var(--gradient-seven) padding-box,var(--gradient-base) padding-box;
  mask-image:linear-gradient(to bottom, black, black),radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
  mask-composite:subtract, add, add, add, add, add;
  opacity:calc(var(--fill-opacity) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mix-blend-mode:soft-light
}
.rb-glow>.edge-light{
  inset:calc(var(--glow-padding) * -1);pointer-events:none;z-index:1;
  mask-image:conic-gradient(from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);
  opacity:calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mix-blend-mode:plus-lighter
}
.rb-glow>.edge-light::before{
  content:"";position:absolute;inset:var(--glow-padding);border-radius:inherit;
  box-shadow:inset 0 0 0 1px hsl(40deg 80% 80% / 100%),inset 0 0 1px 0 hsl(40deg 80% 80% / 60%),inset 0 0 3px 0 hsl(40deg 80% 80% / 50%),inset 0 0 6px 0 hsl(40deg 80% 80% / 40%),inset 0 0 15px 0 hsl(40deg 80% 80% / 30%),inset 0 0 25px 2px hsl(40deg 80% 80% / 20%),inset 0 0 50px 2px hsl(40deg 80% 80% / 10%),0 0 1px 0 hsl(40deg 80% 80% / 60%),0 0 3px 0 hsl(40deg 80% 80% / 50%),0 0 6px 0 hsl(40deg 80% 80% / 40%),0 0 15px 0 hsl(40deg 80% 80% / 30%),0 0 25px 2px hsl(40deg 80% 80% / 20%),0 0 50px 2px hsl(40deg 80% 80% / 10%)
}
.border-glow-inner{display:flex;flex-direction:column;flex:1;position:relative;z-index:1}
.plan>.border-glow-inner{gap:.8rem}   /* plans spaced by gap; tool/converter cards use their own margins */
.converter-card>.border-glow-inner{align-items:flex-start;width:100%}
/* tool + converter cards have a gradient bg (not a solid), so the ::before interior cover must match it */
.home-tool-card::before,.converter-card::before{background:linear-gradient(162deg,#1c1c1e,#111112) padding-box,linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,var(--gradient-one) border-box,var(--gradient-two) border-box,var(--gradient-three) border-box,var(--gradient-four) border-box,var(--gradient-five) border-box,var(--gradient-six) border-box,var(--gradient-seven) border-box,var(--gradient-base) border-box}
.footer{text-align:center;color:var(--dim);font-size:12px;padding:96px 0 1.5rem}

/* dashboard */
.song-list{display:grid;gap:8px}
.song{display:flex;align-items:center;gap:1rem;padding:12px 16px;cursor:pointer}
.song:hover{background:var(--raised)}
.song .art{width:44px;height:44px;border-radius:7px;background:var(--raised);display:grid;place-items:center;font-size:1.2rem;flex-shrink:0}
.song .info{flex:1;min-width:0}
.song .info strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.song .pill{font-size:12px;font-weight:500;padding:4px 12px;border-radius:100px;border:1px solid var(--line);color:var(--sub);white-space:nowrap}
.song .pill.ok{color:var(--txt)}
.song .del{background:none;border:none;color:var(--dim);font-size:1rem;cursor:pointer;padding:.4rem}
.song .del:hover{color:var(--txt)}
.empty{text-align:center;padding:3rem 1.5rem;display:grid;gap:.5rem;justify-items:center}

/* ============ studio: DAW-lite editor ============ */
.page-full{max-width:none;padding:0}
.daw{display:flex;flex-direction:column;height:calc(100dvh - 57px)} /* under topbar */

/* top bar */
.daw-top{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line)}
.back{color:var(--sub);font-weight:500;font-size:13px;white-space:nowrap}
.back:hover{color:var(--txt)}
.daw-title{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px;overflow:hidden}
.daw-title h2{font-size:15px;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.daw-title .sub{font-size:12px;white-space:nowrap}

/* transport bar */
.daw-transport{display:flex;align-items:center;gap:8px;padding:8px 16px;border-bottom:1px solid var(--line);background:#0a0a0a;flex-wrap:wrap}
.tbtn{width:30px;height:30px;border-radius:7px;border:1px solid var(--line);background:transparent;color:var(--txt);font-size:11px;font-weight:500;cursor:pointer}
.tbtn:hover{background:var(--raised)}
.tbtn-play{width:38px;height:30px;background:var(--blue);border:none;color:#fff;font-size:13px}
.tbtn-play:hover{background:#1f84ff}
.tbtn-record{width:30px;height:30px;border-color:rgba(239,68,68,.55);color:#fff;background:#7f1d1d;font-size:13px}
.tbtn-record:hover{background:#991b1b}
.tbtn-record.recording{background:#ef4444;border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.18)}
.rec-status{font-size:12px;font-weight:600;color:#fca5a5;min-width:72px;font-variant-numeric:tabular-nums}
.t-time{font-variant-numeric:tabular-nums;font-size:13px;margin-left:6px}
.t-sep{color:var(--dim);margin:0 4px}
.t-time #t-dur{color:var(--sub)}
.t-spacer{flex:1}
.t-item{display:flex;align-items:center;gap:4px}
.t-val{font-size:12px;font-weight:500}
.dim{color:var(--dim)}
.tool-label{font-size:11px;color:var(--dim);font-weight:500;text-transform:uppercase;letter-spacing:.02em}
.tool-select{background:var(--raised);color:var(--txt);border:1px solid var(--line);border-radius:7px;font:inherit;font-size:12px;font-weight:500;padding:3px 6px}
.tool-select:disabled{color:var(--dim)}
.chip{border:1px solid var(--line);background:transparent;color:var(--sub);border-radius:7px;padding:4px 10px;font-size:12px;font-weight:500;cursor:pointer}
.chip:hover:not(:disabled){background:var(--raised);color:var(--txt)}
.chip.on{background:var(--blue);color:#fff;border-color:transparent}
.chip:disabled{opacity:.4;cursor:default}
.chip.tiny{padding:2px 7px;font-size:11px}

/* edit toolbar */
.daw-toolbar{display:flex;align-items:center;gap:4px;padding:6px 16px;border-bottom:1px solid var(--line);background:#0a0a0a;flex-wrap:wrap}
.daw-toolbar .chip:disabled{opacity:.35}
.ibtn{width:28px;height:28px;border-radius:7px;border:1px solid transparent;background:transparent;color:var(--sub);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.ibtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.ibtn:hover:not(:disabled){background:var(--raised);color:var(--txt)}
.ibtn.on{background:var(--blue);color:#fff}
.ibtn:disabled{opacity:.35;cursor:default}
.t-div{width:1px;height:18px;background:var(--line);margin:0 4px}
.tool-hint{font-size:11px;margin-left:8px;white-space:nowrap}
.tool-hint.flash{color:var(--blue);font-weight:600}

/* clip trim handles */
.clip-handle{
  position:absolute;top:6px;bottom:6px;width:8px;z-index:3;cursor:ew-resize;
  background:#fff;border-radius:3px;opacity:.9;
}
.clip-handle:hover{opacity:1;box-shadow:0 0 6px rgba(255,255,255,.7)}

/* track area: fixed header column + horizontally scrollable lane column */
.daw-tracks{flex:1;overflow:auto;display:flex;background:#0a0a0a;align-items:flex-start;user-select:none;-webkit-user-select:none}
.daw-heads{width:230px;flex-shrink:0;border-right:1px solid var(--line);background:#0a0a0a;position:sticky;left:0;z-index:4}
.daw-corner{height:28px;font-size:9px;line-height:1.3;display:flex;align-items:center;padding:0 10px;color:var(--dim);border-bottom:1px solid var(--line)}
.lanescol{flex:1;overflow-x:auto;min-width:0}
.lanes-inner{position:relative;width:100%;min-width:100%}
#ruler{display:block;width:100%;height:28px;border-bottom:1px solid var(--line);cursor:col-resize;touch-action:none}
/* chord strip floats under the ruler as an overlay ??takes no layout space,
   so track heads and lanes never shift when it toggles */
#chord-strip{position:absolute;top:34px;left:0;width:100%;height:22px;z-index:6;pointer-events:none}
#chord-strip[hidden]{display:none}
.live-chord{display:inline-flex;align-items:baseline;gap:6px;padding:4px 10px;border:1px solid var(--line);border-radius:7px;font-variant-numeric:tabular-nums}
.live-chord b{color:#66aaff;font-size:14px;min-width:2.5em}
.live-chord .sub{font-size:11px}
.lc-next{color:var(--dim);font-size:11px}
.track-lane{height:64px;border-bottom:1px solid var(--line);position:relative}
.track-lane canvas{display:block;width:100%;height:100%;touch-action:none}
.live-recording-clip{position:absolute;top:4px;bottom:4px;min-width:3px;border:1px solid #ef4444;background:rgba(127,29,29,.72);color:#fecaca;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.live-recording-wave{position:absolute;inset:0;width:100%;height:100%;opacity:.92}
.live-recording-clip span{position:absolute;top:6px;left:8px;font-size:10px;font-weight:700;letter-spacing:.08em;white-space:nowrap}
.live-recording-clip i{position:absolute;right:0;top:0;bottom:0;width:2px;background:#f87171;box-shadow:0 0 8px #ef4444;animation:recPulse .8s ease-in-out infinite alternate}
@keyframes recPulse{to{opacity:.35}}
#lane-stack{cursor:text}
.lane-err{display:flex;align-items:center;height:100%;padding:0 12px;font-size:11px}

.t-head{position:relative;height:64px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;gap:5px;padding:6px 10px 6px 14px;cursor:pointer}
.t-head::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--tc,#64748B)} /* color strip */
.t-head:hover{background:rgba(255,255,255,.03)}
.t-head.sel{background:color-mix(in srgb,var(--tc,#64748B) 9%,transparent)}
.t-head.sel::before{width:4px;box-shadow:0 0 8px var(--tc)}
.t-head.err{opacity:.5}
.t-head.silent .t-name{color:var(--dim)}
.t-head.silent::before{opacity:.35}
.t-head-top{display:flex;align-items:center;gap:6px}
.track-delete{color:#737373}.track-delete:hover{color:#f87171;border-color:#7f1d1d;background:rgba(127,29,29,.28)}
.t-ic{color:var(--sub);display:flex;flex-shrink:0}
.t-head.sel .t-ic{color:var(--tc,var(--blue))}
.t-name{font-size:12px;font-weight:600;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-head-bot{display:flex;align-items:center;gap:8px}
.vol,.pan{accent-color:var(--blue);min-width:0;height:14px}
.vol{flex:1.6}
.pan{flex:1;accent-color:#737373}

/* selected track lane: colored outline glow */
.track-lane.sel{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tc,#64748B) 60%,transparent)}

/* overlays (inside .lanes-inner) ??must stay visible above colored clips */
#playhead,#loop-region,#sel-region{position:absolute;top:0;bottom:0;pointer-events:none;z-index:2}
#playhead{width:1px;background:#fff;box-shadow:0 0 4px rgba(255,255,255,.6)}
#playhead::before{content:"";position:absolute;top:0;left:-4px;border:5px solid transparent;border-top:6px solid #fff}
#loop-region{background:rgba(0,117,255,.12);border-left:1px solid rgba(0,117,255,.85);border-right:1px solid rgba(0,117,255,.85)}
#sel-region{background:rgba(255,255,255,.08);border-left:1px dashed rgba(255,255,255,.5);border-right:1px dashed rgba(255,255,255,.5)}

/* bottom panel */
.daw-bottom{display:flex;align-items:center;gap:16px;padding:8px 16px;border-top:1px solid var(--line);font-size:12px;flex-wrap:wrap}
.daw-info{white-space:nowrap}
.daw-insp{flex:1;display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;overflow:hidden}
.daw-insp svg{color:var(--sub);flex-shrink:0}
.daw-actions{display:flex;gap:6px}

/* sticky bottom for guitar panel + status bar */
.daw-sticky-bottom{position:sticky;bottom:0;z-index:20;background:#0a0a0a}

/* guitar cleanup panel (Stage 1.5) */
.guitar-panel{display:flex;align-items:center;gap:14px;padding:8px 16px;border-top:1px solid var(--line);background:#0a0a0a;flex-wrap:wrap;font-size:12px}
.gp-title{font-weight:600;color:var(--txt)}
.gp-seg{width:auto}
.gp-seg .seg-btn{flex:none;padding:5px 14px;font-size:12px}
.gp-seg .seg-btn:disabled{opacity:.4;cursor:default}
.gp-ctl{display:flex;align-items:center;gap:6px;color:var(--sub)}
.gp-ctl input[type=range]{accent-color:#EC4899;width:130px}
.gp-ctl span{font-variant-numeric:tabular-nums;width:3em}
.gp-status{color:var(--sub);flex:1;min-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exp-tag{font-size:9px;font-weight:700;background:#A21CAF;color:#fff;border-radius:4px;padding:1px 4px;margin-left:4px;vertical-align:middle}
.guitar-analysis{display:flex;align-items:center;gap:12px;padding:6px 16px 10px;background:#0a0a0a;flex-wrap:wrap;font-size:11px}
.ga-label{color:var(--sub);white-space:nowrap}
.ga-ribbon{flex:1;min-width:200px;height:16px;border-radius:4px;display:block}
.ga-legend{display:flex;align-items:center;gap:6px;color:var(--sub);white-space:nowrap}
.ga-legend i{width:10px;height:10px;border-radius:2px;display:inline-block;margin-left:8px}
.ga-legend .ga-lead{background:#F472B6}
.ga-legend .ga-rhythm{background:#A21CAF}
.ga-legend .ga-mixed{background:#525252}
.ga-legend .ga-unc{background:#2a2a2a;border:1px solid var(--line)}

/* settings */
.settings{display:grid;gap:.2rem;margin-bottom:8px;padding:4px 16px}
.setting{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:14px 0;border-bottom:1px solid var(--line)}
.setting:last-child{border-bottom:none}
.setting select,.setting input[type=range]{accent-color:var(--blue)}
.setting select{background:var(--raised);color:var(--txt);border:1px solid var(--line);border-radius:7px;padding:6px 10px;font:inherit;font-size:13px}
.setting input[type=checkbox]{width:18px;height:18px;accent-color:var(--blue)}

/* modals */
.modal{border:none;border-radius:24px;background:var(--card);color:var(--txt);padding:0;max-width:520px;width:calc(100% - 2rem)}
.modal::backdrop{background:rgba(0,0,0,.7);backdrop-filter:blur(4px)}
#sheet-midi-modal{margin:auto}
#upload-modal,#export-modal,#score-modal,#midi-editor-modal{margin:10px auto auto}
.modal-body{padding:24px;display:grid;gap:12px;justify-items:center;text-align:center}
.modal-body h2{font-size:20px;letter-spacing:-.022em}
.dropzone{
  width:100%;border:1px dashed var(--line);border-radius:10px;
  padding:2rem 1rem;display:grid;gap:.3rem;justify-items:center;cursor:pointer;
}
.dropzone:hover,.dropzone.over{border-color:var(--blue);background:var(--raised)}
.progress{width:100%;height:6px;border-radius:100px;background:var(--raised);overflow:hidden}
.progress-fill{height:100%;width:0;background:var(--blue);border-radius:100px;transition:width .3s}
.proc-stage{color:var(--sub);font-size:13px;min-height:1.4em}
.error-msg{color:var(--txt);font-size:13px}
.sheet-result-list{display:grid;gap:8px;width:100%;max-height:min(50vh,420px);overflow:auto}
.sheet-result-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:12px;background:var(--raised);border:1px solid var(--line);border-radius:8px;text-align:left}
.sheet-result-row strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.sheet-result-actions{display:flex;gap:8px;flex:0 0 auto}
.export-opts{display:grid;gap:8px;width:100%}
.export-opt{display:grid;gap:.15rem;text-align:left;cursor:pointer;padding:12px 16px;font:inherit;color:var(--txt);font-size:14px}
.export-opt:hover{background:var(--raised)}
.export-opt strong{font-weight:600}

.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
/* beui.dev Loader — "bars" variant, ported verbatim (no motion/react).
   4 bars; width size*.16, gap size*.1, height size, originY 1;
   scaleY .3→1→.3 over `speed`, delay i*speed*.12, EASE_IN_OUT [.77,0,.175,1] */
.loader-bars{--loader-size:32px;--loader-speed:1s;
  display:inline-flex;align-items:center;gap:calc(var(--loader-size)*.1);height:var(--loader-size)}
.loader-bars>i{display:block;width:calc(var(--loader-size)*.16);height:var(--loader-size);
  border-radius:9999px;background:currentColor;transform-origin:center bottom;
  animation:loader-bars var(--loader-speed) cubic-bezier(.77,0,.175,1) infinite}
.loader-bars>i:nth-child(2){animation-delay:calc(var(--loader-speed)*.12)}
.loader-bars>i:nth-child(3){animation-delay:calc(var(--loader-speed)*.24)}
.loader-bars>i:nth-child(4){animation-delay:calc(var(--loader-speed)*.36)}
@keyframes loader-bars{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
/* reduced motion: calm opacity pulse, no transform (matches the component's REDUCED) */
@media(prefers-reduced-motion:reduce){
  .loader-bars>i{transform:none;animation:loader-bars-calm 1.4s cubic-bezier(.77,0,.175,1) infinite}
}
@keyframes loader-bars-calm{0%,100%{opacity:.4}50%{opacity:1}}

/* song upload wizard */
body:has(#upload-modal[open]){overflow:hidden}
#upload-modal{box-sizing:border-box;max-width:560px;max-height:calc(100vh - 20px);overflow:auto;background:#1c1c1d;border:1px solid #343437;border-radius:24px}
.upload-wizard{padding:26px 28px;gap:20px;justify-items:stretch;text-align:left}
.wizard-progress{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;width:min(340px,100%);margin:0 auto}
.wizard-progress>i{height:1px;background:#3b3b3e}
.wizard-progress-item{display:flex;align-items:center;gap:7px;color:#77777d}
.wizard-progress-item b{width:22px;height:22px;display:grid;place-items:center;border:1px solid #48484d;border-radius:50%;font-size:9px}
.wizard-progress-item em{font-style:normal;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.wizard-progress-item.on{color:#8cbcff}.wizard-progress-item.on b{border-color:#3b8ef6;background:#176bcf;color:#fff}
.wizard-progress-item.done{color:#8d969f}.wizard-progress-item.done b{border-color:#52606e;background:#303942}
.upload-wizard-page{display:grid;gap:18px}
.upload-chooser-head{display:grid;gap:8px;text-align:center;padding:2px 16px}
.upload-chooser-head h2{font-size:27px;line-height:1.1;letter-spacing:-.04em}
.upload-chooser-head .sub{margin:0;color:#9999a0;font-size:12px;line-height:1.45}
.upload-kicker{color:#70a9fa;font-size:9px;font-weight:800;letter-spacing:.15em}
.stem-choice-section{display:grid;gap:7px;padding:11px;border:1px solid #39434e;border-radius:19px;background:#222930}
.vocal-karaoke-choice,.stem-choice-card{width:100%;border:1px solid #3b4651;background:#28313a;color:var(--txt);font:inherit;cursor:pointer;transition:border-color .18s ease,background .18s ease}
.vocal-karaoke-choice:hover,.stem-choice-card:hover{border-color:#566574;background:#2d3741}
.vocal-karaoke-choice{display:grid;grid-template-columns:43px minmax(0,1fr) 21px;align-items:center;gap:12px;padding:11px 12px;border-radius:14px;text-align:left}
.vocal-karaoke-choice.on{border-color:#3b8ff5;background:#2c3d50;box-shadow:inset 0 0 0 1px rgba(59,143,245,.12)}
.vocal-choice-copy{display:grid;gap:3px;min-width:0}.vocal-choice-copy strong{font-size:14px}.vocal-choice-copy>span{color:#b1bac4;font-size:10px;line-height:1.4}
.stem-choice-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--stem-color,#3b82f6) 16%,#35414d);color:var(--stem-color,#78b2ff)}
.stem-choice-icon svg{width:20px;height:20px}
.stem-choice-check{width:19px;height:19px;border:1px solid #667481;border-radius:50%;display:grid;place-items:center}
.on .stem-choice-check{border-color:#398df3;background:#237eea}.on .stem-choice-check::after{content:"";width:7px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-1px) rotate(-45deg)}
.stem-picker-heading{display:flex;align-items:center;justify-content:space-between;padding:3px 3px 0}.stem-picker-heading strong{font-size:11px}.stem-picker-heading span{color:#7e8993;font-size:8px;text-transform:uppercase;letter-spacing:.11em}
.stem-choice-grid{display:grid;grid-template-columns:1fr;gap:6px}
.stem-choice-card{min-height:48px;padding:5px 10px;border-radius:12px;display:grid;grid-template-columns:36px minmax(0,1fr) 20px;align-items:center;gap:10px;text-align:left}
.stem-choice-card .stem-choice-icon{width:33px;height:33px}.stem-choice-card .stem-choice-icon svg{width:18px;height:18px}.stem-choice-card strong{font-size:12px}
.stem-choice-card.on{border-color:color-mix(in srgb,var(--stem-color) 62%,#718096);background:color-mix(in srgb,var(--stem-color) 9%,#2a343e)}
.stem-choice-card.on .stem-choice-check{border-color:var(--stem-color);background:var(--stem-color)}
.upload-result{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;padding:8px 9px;border:0;border-top:1px solid #3b4651;background:transparent}
.upload-result-label{color:#84919d;font-size:8px;font-weight:800;letter-spacing:.12em}
.upload-result-tracks{display:flex;align-items:center;justify-content:flex-end;gap:5px;flex-wrap:wrap}.upload-result-tracks>i{color:#77838e;font-style:normal;font-size:9px}
.result-track{display:inline-flex;align-items:center;gap:4px;padding:5px 7px;border:1px solid color-mix(in srgb,var(--track-color) 36%,#45525e);border-radius:999px;background:color-mix(in srgb,var(--track-color) 8%,#273038)}
.result-track svg{width:11px;height:11px}.result-track b{color:#eef0f2;font-size:9px}
.wizard-actions{display:flex;align-items:center;justify-content:center;gap:12px}
.wizard-back,.wizard-next{min-height:39px;padding:0 20px;border-radius:999px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.wizard-back{border:1px solid transparent;background:transparent;color:#b7b7bd}.wizard-back:hover{background:#272729}
.wizard-next{border:0;background:#197df0;color:#fff;box-shadow:0 8px 20px rgba(25,125,240,.2)}.wizard-next:hover{background:#288bfa}.wizard-next:disabled{background:#45454a;color:#85858a;box-shadow:none;cursor:not-allowed}
.wizard-dropzone{width:100%;min-height:245px;padding:28px 22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;border:1px dashed #4a5968;border-radius:18px;background:#222930;text-align:center}
.wizard-dropzone:hover,.wizard-dropzone.over{border-color:#4b94ec;background:#26313c}.wizard-dropzone.has-file{display:none}
.wizard-upload-icon{width:64px;height:64px;display:grid;place-items:center;border-radius:17px;background:#344454;color:#9bc8ff}
.wizard-upload-icon svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.wizard-dropzone strong{font-size:15px}.wizard-dropzone>span:not(.wizard-upload-icon){color:#a9b1ba;font-size:12px}.wizard-dropzone small{color:#737e88;font-size:10px}
.queued-file{display:grid;grid-template-columns:46px minmax(0,1fr) 30px;align-items:center;gap:12px;padding:14px;border:1px solid #405064;border-radius:15px;background:#26313c}
.queued-file-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:#34475a;color:#94c5ff;font-size:20px}
.queued-file>span:nth-child(2){display:grid;gap:4px;min-width:0}.queued-file strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.queued-file small{color:#8c98a4;font-size:10px}
.queued-file button{width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:#a8b0b8;font-size:20px;cursor:pointer}.queued-file button:hover{background:#394652;color:#fff}
.fixed-upload-note{display:grid;gap:5px;padding:14px;border:1px solid #3b4855;border-radius:14px;background:#232c34}.fixed-upload-note strong{font-size:13px}.fixed-upload-note span{color:#a7b0b9;font-size:10px;line-height:1.45}
@media(max-width:640px){
  #upload-modal{width:calc(100% - 14px);max-height:calc(100vh - 12px);margin:6px auto auto;border-radius:20px}
  .upload-wizard{padding:20px 15px;gap:15px}.wizard-progress-item em{display:none}.wizard-progress{width:150px}
  .upload-wizard-page{gap:14px}.upload-chooser-head{padding:0 7px}.upload-chooser-head h2{font-size:25px}
  .stem-choice-section{padding:9px}.vocal-karaoke-choice{padding:10px}
  .wizard-dropzone{min-height:230px}.upload-result{grid-template-columns:1fr;gap:7px}.upload-result-tracks{justify-content:flex-start}
}

/* model selector & modes */
.seg{display:flex;background:var(--raised);border-radius:7px;padding:3px;gap:3px;width:100%}
.seg-btn{flex:1;border:none;background:transparent;color:var(--sub);font:inherit;font-weight:500;font-size:13px;padding:8px;border-radius:7px;cursor:pointer}
.seg-btn.on{background:var(--floating);color:var(--txt)}
.model-section{width:100%;display:grid;gap:8px;text-align:left}
.model-title{font-size:14px;font-weight:600}
.model-list{display:grid;gap:8px;max-height:min(38vh,340px);overflow-y:auto}
.model-card{
  display:grid;gap:.3rem;text-align:left;font:inherit;color:var(--txt);cursor:pointer;
  background:var(--raised);border:1px solid var(--line);border-radius:10px;padding:12px;
}
.model-card:hover{background:var(--floating)}
.model-card.on{border-color:var(--blue)}
.model-card .mc-head{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.model-card .mc-head strong{font-size:14px;font-weight:600}
.model-card .mc-desc{color:var(--sub);font-size:12px}
.model-card .mc-stems{color:var(--dim);font-size:12px}
.badge-sm{font-size:12px;font-weight:500;padding:4px 12px;border-radius:100px;border:1px solid var(--line);color:var(--txt)}
.badge-sm.cyan{color:var(--sub)}
.badge-sm.warn{color:var(--sub)}
.warn{font-size:12px}
.txt-input{background:var(--raised);color:var(--txt);border:1px solid var(--line);border-radius:7px;padding:6px 10px;font:inherit;font-size:13px;width:min(230px,50vw)}

/* Jianpu score modal paper style */
.score-modal{max-width:min(1000px,94vw);width:94vw}
#score-modal[open]:has(.flat-score-body){
  display:flex;flex-direction:column;width:98vw;max-width:min(1500px,98vw);
  height:96vh;max-height:96vh;overflow:hidden;margin:2vh auto 0
}
#score-modal:has(.flat-score-body) .score-head{flex:0 0 auto}
#score-modal:has(.flat-score-body) .score-body.flat-score-body{
  flex:1 1 auto;height:auto;max-height:none;min-height:480px;margin:0 12px 12px
}
.score-head{display:flex;flex-direction:column;gap:9px;padding:14px 20px 10px}
.score-command-row,.score-settings-row{display:flex;align-items:center;gap:10px;width:100%;min-width:0}
.score-command-row{min-height:38px}
.score-command-row>strong{flex:0 1 190px;min-width:120px;font-size:15px;line-height:1.25}
.score-command-row>.btn{flex:0 0 auto;white-space:nowrap}
.score-command-row>.t-spacer{min-width:0}
.score-settings-row{flex-wrap:wrap;gap:8px}
#score-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.score-ctl{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--sub);white-space:nowrap}
#note-edit .chip.tiny{width:24px;height:24px;min-width:24px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:13px;line-height:1;color:var(--txt)}
.score-bpm{width:60px;padding:3px 6px}
.score-audio{flex:1 1 300px;min-width:260px;max-width:430px}
.score-audio .abcjs-inline-audio{display:flex;align-items:center;gap:7px;width:100%;min-height:36px;box-sizing:border-box;padding:4px 8px;border:1px solid var(--line);border-radius:7px;background:var(--raised);color:var(--txt)}
.score-audio .abcjs-btn{flex:0 0 28px;width:28px;height:28px;padding:4px;border:0;border-radius:5px;background:transparent;color:inherit;cursor:pointer}
.score-audio .abcjs-btn:hover{background:var(--floating)}
.score-audio .abcjs-btn svg{width:100%;height:100%;fill:currentColor;stroke:currentColor}
.score-audio .abcjs-midi-progress-background{flex:1 1 auto;min-width:80px;height:6px;border-radius:3px;background:var(--line);cursor:pointer}
.score-audio .abcjs-midi-progress-indicator{height:100%;border-radius:inherit;background:var(--blue)}
.score-audio .abcjs-midi-clock{flex:0 0 auto;min-width:72px;font-size:11px;white-space:nowrap;color:var(--sub)}
.score-audio .abcjs-tempo-wrapper,.score-audio .abcjs-midi-loop{display:none}
.score-hint{padding:0 20px 10px;font-size:11px}
.score-chooser{display:flex;flex-direction:column;gap:14px;padding:10px 20px 24px;max-width:520px}
.score-chooser h3{margin:0;font-size:15px}
.chooser-engines{display:flex;flex-direction:column;gap:8px}
.chooser-card{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line,#2a2a2a);border-radius:8px;cursor:pointer}
.chooser-card:has(input:checked){border-color:var(--accent,#3B82F6);background:rgba(59,130,246,.08)}
.chooser-card input{margin-top:3px}
.chooser-card div{display:flex;flex-direction:column;gap:2px}
.chooser-card .sub{font-size:11px}
.score-profile-card{cursor:default;background:rgba(59,130,246,.08);border-color:rgba(59,130,246,.55)}
.score-profile-chip{white-space:nowrap;color:#dbeafe;border-color:rgba(59,130,246,.45);background:rgba(59,130,246,.1)}
.chooser-lang{display:flex;flex-direction:column;gap:6px}
.chooser-lang .seg{flex-wrap:wrap}
#score-generate{align-self:flex-start}
.midi-editor-modal{width:96vw;height:92vh;max-width:none;max-height:none;padding:0;flex-direction:column}
.midi-editor-modal[open]{display:flex}   /* display only when open — an unconditional display:flex here leaks the dialog onto the page */
.midi-editor-head{
  display:flex;align-items:center;gap:10px;padding:8px 14px;
  border-bottom:1px solid var(--line,#2a2a2a);overflow-x:auto;overflow-y:hidden;
  scrollbar-width:thin
}
.midi-editor-head>strong,
.midi-editor-head>.btn,
.midi-editor-head>#midi-key-chip{flex:0 0 auto;white-space:nowrap}
.midi-editor-head #audio-mode-seg{flex:1 1 360px;min-width:220px}
.midi-editor-head #audio-mode-seg .seg-btn{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.midi-editor-head .live-chord{flex:0 1 250px;min-width:0;max-width:250px;overflow:hidden;white-space:nowrap}
.midi-editor-head .live-chord>*{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.midi-editor-head #midi-editor-status{min-width:0;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.midi-editor-head .t-spacer{min-width:0}
@media(max-width:1100px){
  .midi-editor-head .lc-next{display:none}
  .midi-editor-head .live-chord{flex-basis:150px;max-width:150px}
  .midi-editor-head #midi-editor-status:empty{display:none}
}
@media(max-width:760px){
  .midi-editor-head{flex-wrap:wrap;align-content:center}
  .midi-editor-head #audio-mode-seg{order:5;flex-basis:100%;min-width:100%}
  .midi-editor-head .live-chord{margin-left:auto}
  .midi-editor-head .t-spacer{display:none}
}
.midi-editor-frame{flex:1;width:100%;border:0;background:#111}
.score-print-title{display:none}
.score-body{
  position:relative;margin:0 20px 20px;padding:28px 34px;border-radius:8px;
  background:#fdfdfa;color:#1a1a1a;
  max-height:62vh;overflow-y:auto;
  font-size:18px;font-variant-numeric:tabular-nums;user-select:none;
}
.staff-out svg{max-width:100%;height:auto}
.jn-meta{font-size:14px;font-weight:600;margin-bottom:20px}
.jn-ts{letter-spacing:.05em;margin:0 6px}
.jn-line{position:relative;display:flex;align-items:stretch;width:100%;margin-bottom:26px}
.jn-bar{
  flex:1;display:flex;align-items:center;gap:2px;min-width:0;
  border-right:1.5px solid #1a1a1a;padding:0 8px;column-gap:5px;
}
.jn-line .jn-bar:first-child{border-left:1.5px solid #1a1a1a}
.jn{
  display:inline-grid;grid-template-rows:9px 24px 9px;justify-items:center;align-content:center;
  flex-basis:0;line-height:1.05;padding:2px 2px;border-radius:4px;cursor:pointer;min-width:19px;
}
.jn:hover{background:rgba(0,117,255,.1)}
.jn.sel{background:var(--blue);color:#fff}
.jn.playing{background:#ffcc33;color:#111}
.jn.rest,.jn.dash{color:#777;cursor:default}
.jn.dash:hover{background:none}
.jn b{grid-row:2;display:block;box-sizing:border-box;height:24px;line-height:18px;font-weight:500;padding:0 2px 3px;border-bottom:4.5px double transparent;font-family:Georgia,'Times New Roman',serif}
.jn.u1 b{border-bottom:1.5px solid currentColor}
.jn.u2 b{border-bottom:4.5px double currentColor}
.jn .up,.jn .dn{font-style:normal;font-size:10px;height:9px;line-height:9px;color:inherit;font-weight:700}
.jn .up{grid-row:1}.jn .dn{grid-row:3}
.jn-piano{display:grid;gap:28px}
.jn-piano-system{display:grid;gap:8px;padding-bottom:18px;border-bottom:1px solid #ddd;break-inside:avoid;page-break-inside:avoid}
.jn-piano-system:last-child{padding-bottom:0;border-bottom:0}
.jn-hand{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:start}
.jn-hand-label{font-size:11px;line-height:1;padding-top:17px;color:#555}
.jn-hand-score{min-width:0}
.jn-hand .jn-line{margin-bottom:0}
.jn:has(.jn-chord-stack){min-height:58px;grid-template-rows:minmax(52px,auto);align-self:center}
.jn-chord-stack{grid-row:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:52px}
.jn-chord-tone{display:grid;grid-template-columns:8px minmax(12px,auto) 8px;align-items:center;justify-items:center;min-height:16px;font:500 15px/1 Georgia,'Times New Roman',serif}
.jn-chord-tone i{font:700 8px/1 Inter,sans-serif}
.jn.u1 .jn-chord-stack{border-bottom:1.5px solid currentColor}
.jn.u2 .jn-chord-stack{border-bottom:4.5px double currentColor}
.jn-ties{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}
.jn-ties path{fill:none;stroke:#1a1a1a;stroke-width:1.2}
.jn.sel .up,.jn.sel .dn{color:#fff}
.jn.playing .up,.jn.playing .dn{color:#111}
.jn .lyr{grid-row:4;font-style:normal;font-size:12px;height:16px;line-height:16px;color:#333;font-family:inherit}
.staff-out .score-playing path,.staff-out .score-playing ellipse,.staff-out .score-playing polygon{fill:#e6a700!important;stroke:#e6a700!important}
.score-playback-paper{position:absolute;left:-10000px;top:0;width:900px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.score-lyrics{
  margin:0 20px 10px;width:calc(100% - 40px);resize:vertical;
  background:var(--raised);color:var(--txt);border:1px solid var(--line);border-radius:7px;
  padding:8px 10px;font:inherit;font-size:12px;
}

/* mobile */
@media (max-width:640px){
  .topbar{gap:.7rem;flex-wrap:wrap}
  .topbar nav{gap:.8rem;font-size:13px}
  #nav-upload{display:none}
  .daw-corner,.t-head{width:150px}
  .t-head .pan{display:none}
  .daw-title .sub{display:none}
  .daw-info{display:none}
  .setting{flex-wrap:wrap}
}

@media (max-width:900px){
  .score-command-row{flex-wrap:wrap}
  .score-command-row>.score-audio{order:3;flex-basis:100%;max-width:none}
}
@media (max-width:560px){
  .score-head{padding:12px}
  .score-command-row>strong{flex:1 1 auto}
  .score-command-row>.t-spacer{display:none}
  .score-command-row>.btn{flex:1 1 auto;text-align:center}
  #score-controls{gap:6px}
}

@media print{
  @page{size:A4 portrait;margin:12mm 11mm 14mm}
  html,body{background:#fff!important;color:#111!important;height:auto!important;overflow:visible!important}
  body>*{display:none!important}
  #score-modal[open]{display:block!important;position:static!important;inset:auto!important;width:100%!important;max-width:none!important;box-sizing:border-box!important;height:auto!important;max-height:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:#fff!important;color:#111!important;box-shadow:none!important;overflow:visible!important}
  #score-modal::backdrop{display:none!important}
  #score-modal .score-head,#score-modal .score-hint,#score-modal .score-lyrics{display:none!important}
  #score-modal .score-body{display:block!important;position:static!important;width:100%!important;box-sizing:border-box!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:#fff!important;color:#111!important;max-height:none!important;overflow:visible!important;font-size:13pt!important;user-select:text!important}
  #score-modal .score-print-title{display:block!important;font:700 18pt/1.25 Arial,sans-serif;margin:0 0 5mm;color:#111}
  #score-modal .jn-meta{font-size:10.5pt!important;margin-bottom:7mm}
  #score-modal .jn-line{display:flex!important;width:100%!important;break-inside:avoid;page-break-inside:avoid;margin-bottom:8mm}
  #score-modal .jn-bar{flex:1 1 0!important}
  #score-modal .jn{cursor:default!important}
  #score-modal .jn:hover,#score-modal .jn.sel{background:transparent!important;color:inherit!important}
  #score-modal .jn-ties{inset:0!important;width:100%!important;height:100%!important;overflow:visible!important}
  #score-modal .staff-out svg{break-inside:avoid;page-break-inside:avoid;margin-bottom:2mm}
}

/* 2026 studio redesign */
body:has([data-page="/studio"]:not([hidden])){overflow:hidden;background:#05080d}
.topbar{height:74px;padding:0 18px 0 28px;background:linear-gradient(180deg,#070a0f,#04070b);border-bottom:1px solid #1c2633;box-shadow:0 8px 28px #0005}
.brand{gap:13px;font-size:18px;font-weight:700;letter-spacing:-.035em}.brand-wave{width:32px;height:34px;display:flex;align-items:center;justify-content:center;gap:3px;color:#1687ff}.brand-wave i{display:block;width:3px;border-radius:4px;background:currentColor;box-shadow:0 0 10px #1687ff66}.brand-wave i:nth-child(1),.brand-wave i:nth-child(5){height:16px}.brand-wave i:nth-child(2),.brand-wave i:nth-child(4){height:26px}.brand-wave i:nth-child(3){height:36px}
.topbar nav{position:absolute;left:50%;translate:-50%;margin:0;gap:42px;height:100%;align-items:stretch}.topbar nav a{display:flex;align-items:center;position:relative;padding:0 5px;font-size:15px;color:#9299a5}.topbar nav a.active{color:#f6f8fb}.topbar nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:3px;border-radius:3px;background:#1677ff;box-shadow:0 0 10px #1677ff88}
.cloud-upload{width:44px;height:42px;margin-left:auto;border:1px solid #202b39;border-radius:10px;background:#0e141d;color:#dce6f4;display:grid;place-items:center;cursor:pointer}.cloud-upload:hover{background:#172231}.cloud-upload svg{width:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}#nav-upload{height:42px;padding:0 24px;border-radius:9px;font-weight:650;background:linear-gradient(#1479ff,#0661df);box-shadow:0 8px 24px #0066ff33}
.daw{height:calc(100dvh - 74px);background:#05080d;padding:8px 14px 10px;gap:8px}.daw-top{display:none}.daw-transport,.daw-toolbar{border:1px solid #1d2836;background:linear-gradient(#0c121a,#090e15);border-radius:12px;padding:9px 13px;min-height:72px;box-shadow:inset 0 1px #ffffff08,0 10px 25px #0003}.daw-transport{gap:8px;flex-wrap:nowrap}.daw-toolbar{min-height:48px;padding:7px 12px}.tbtn{width:46px;height:48px;border-radius:9px;background:linear-gradient(#141c27,#0d141d);border-color:#202c3b}.tbtn-play{width:56px;background:linear-gradient(#197dfb,#075ccd);font-size:17px}.tbtn-record{background:linear-gradient(#24191c,#171216);border-color:#4c292f;color:#ff6046}.t-time{font-size:16px;font-weight:600;margin:0 12px;min-width:104px}.t-time #t-dur{font-weight:400;color:#788393}.t-item{min-height:48px;padding:4px 15px;border-left:1px solid #202a37;gap:9px}.t-item .tool-label{font-size:10px}.t-val,.tool-select{font-size:14px}.tool-select{background:transparent;border:0;padding:2px 8px}.chip{border-color:#263343;background:#0e151e;color:#d4dbe5;border-radius:8px;padding:7px 12px}.chip.on{background:#12386a;border-color:#226dc8}.ibtn{width:32px;height:32px}.ibtn.on{background:#126cec}.tool-label{color:#8590a0}
.daw-tracks{border:1px solid #1d2938;border-radius:12px;background:#071019;overflow:auto;box-shadow:0 12px 30px #0006}.daw-heads{width:310px;background:#071019;border-right:1px solid #435164;padding:0 8px 8px 0}.daw-corner{height:34px;color:#8693a3;background:#0b1119;border-bottom-color:#233142;padding:0 16px;font-size:10px;line-height:1}.lanescol{background-color:#071019;background-image:linear-gradient(#29445e1f 1px,transparent 1px),linear-gradient(90deg,#29445e1f 1px,transparent 1px);background-size:22px 22px}#ruler{height:34px;background:#0b1119;border-bottom-color:#263446}.t-head,.track-lane{height:88px}.t-head{margin:5px 8px 0;padding:10px 12px 10px 76px;border:1px solid color-mix(in srgb,var(--tc,#64748b) 34%,#223044);border-radius:9px;background:linear-gradient(90deg,color-mix(in srgb,var(--tc,#64748b) 10%,#0b131d),#0b131d);gap:10px;overflow:hidden}.t-head::before{width:4px;border-radius:9px 0 0 9px}.t-head.sel{background:linear-gradient(90deg,color-mix(in srgb,var(--tc,#64748b) 18%,#0b131d),#0b131d)}
.t-ic{position:absolute;left:12px;top:12px;width:50px;height:50px;border-radius:9px;background:#101b28 center/cover;box-shadow:0 6px 16px #0007}.t-ic svg{display:none}.t-head[data-ch="bass"] .t-ic{background-image:url('assets/stem-bass.png')}.t-head[data-ch="drums"] .t-ic{background-image:url('assets/stem-drums.png')}.t-head[data-ch="vocals"] .t-ic,.t-head[data-ch^="recording"] .t-ic{background-image:url('assets/stem-vocals.png')}.t-head[data-ch="guitar"] .t-ic,.t-head[data-ch^="guitar_"] .t-ic{background-image:url('assets/stem-guitar.png')}.t-head[data-ch^="guitar_lead"] .t-ic,.t-head[data-ch^="guitar_rhythm"] .t-ic{background-image:url('assets/stem-guitar.png')} .t-head[data-ch^="guitar_lead"] .t-ic::after,.t-head[data-ch^="guitar_rhythm"] .t-ic::after{position:absolute;right:-4px;bottom:-4px;display:grid;place-items:center;width:19px;height:19px;border:2px solid #101820;border-radius:50%;background:var(--tc,#ec4899);color:#fff;font:800 10px/1 var(--font-sans,Arial,sans-serif);box-shadow:0 2px 7px #0009} .t-head[data-ch^="guitar_lead"] .t-ic::after{content:'L'} .t-head[data-ch^="guitar_rhythm"] .t-ic::after{content:'R'}.t-head[data-ch="piano"] .t-ic{background-image:url('assets/stem-piano.png')}.t-name{font-size:14px;color:#f4f7fb}.t-head-top{gap:7px}.t-head-top .chip{padding:3px 7px;background:#16212d}.t-head-top .dl,.t-head-top .score-btn,.track-delete{opacity:0;width:0;padding:0;border:0;overflow:hidden}.t-head:hover .dl,.t-head:hover .track-delete{opacity:1;width:auto;padding:3px 6px}.t-head-top .score-btn,.t-head:hover .score-btn{opacity:1;width:28px;height:28px;min-width:28px;padding:0;border:1px solid #263343;display:grid;place-items:center;overflow:visible;font-size:16px;line-height:1}.t-head-bot{gap:8px}.vol{flex:1.9;accent-color:var(--tc,var(--blue))}.pan{display:none}.track-lane{border-bottom-color:#1d2a39;background:linear-gradient(#0a141e6b,#050c13aa)}.track-lane.sel{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tc,#64748B) 45%,transparent)}#playhead{background:#e9f3ff;box-shadow:0 0 7px #fff}.daw-sticky-bottom{background:#070b11;border-radius:10px}.daw-bottom{padding:7px 14px;border:1px solid #1c2735;border-radius:10px;background:#0a1018}.guitar-panel,.guitar-analysis{background:#0a1018}
@media(max-width:900px){.topbar nav{position:static;translate:0;margin-left:auto;gap:15px}.cloud-upload{display:none}.daw{padding:6px}.daw-transport{overflow-x:auto}.daw-toolbar{display:none}.daw-heads{width:220px}.t-head{padding-left:58px}.t-ic{width:40px;height:40px}.t-head-top .dl,.t-head-top .score-btn,.track-delete{display:none}}
[hidden]{display:none!important}

/* Studio command bar + exact row alignment */
.daw-transport{
  display:grid;grid-template-columns:minmax(350px,1.05fr) minmax(300px,.9fr) minmax(460px,1.22fr) minmax(250px,.78fr);
  align-items:stretch;gap:12px;padding:0;border:0;background:transparent;border-radius:0;min-height:74px;box-shadow:none;overflow-x:auto;
}
.transport-cluster{
  min-width:0;height:74px;display:flex;align-items:center;
  border:1px solid #1d2836;border-radius:12px;background:linear-gradient(180deg,#0c121a,#090e15);
  box-shadow:inset 0 1px rgba(255,255,255,.025),0 8px 22px rgba(0,0,0,.18);overflow:hidden;
}
.transport-main{gap:8px;padding:10px 14px}.transport-main .t-time{margin-left:10px;white-space:nowrap}
.transport-params{padding:0 10px}.transport-params .t-item{height:52px;min-height:52px;flex:1;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;padding:0 14px;border-left:1px solid #202a37}.transport-params .t-item:first-child{border-left:0}.transport-params .tool-label{font-size:10px}.transport-params .t-val,.transport-params .tool-select{font-size:15px;font-weight:600}
.transport-practice{padding:0 8px}.loop-set{height:52px;display:flex;align-items:center;padding:0 8px;gap:2px}.loop-set .chip{height:38px;border:0;background:transparent;padding:0 12px;font-size:14px}.loop-set .loop-toggle{border:1px solid #273344;background:#101721;margin-left:3px}.practice-button{height:52px;flex:1;border:0;border-left:1px solid #27313e;border-radius:0;background:transparent;padding:0 15px;color:#edf2f8;white-space:nowrap}.practice-button:disabled{opacity:.72}.practice-icon{width:18px;height:18px;margin-right:7px;fill:none;stroke:#c8d3df;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.transport-zoom{gap:8px;padding:0 12px}.zoom-label{font-size:13px;font-weight:600;color:#d8e0ea;margin-right:3px}.transport-zoom .chip{flex:0 0 auto}.zoom-meter{position:relative;width:64px;height:4px;border-radius:9px;background:#3a4655}.zoom-meter::before{content:"";position:absolute;left:0;top:0;width:54%;height:100%;border-radius:inherit;background:#1677ff}.zoom-meter i{position:absolute;left:48%;top:50%;translate:-50% -50%;width:14px;height:14px;border-radius:50%;background:#2d8cff;border:2px solid #9dc9ff}.transport-zoom #zoom-val{display:none}.fullscreen-control{margin-left:auto;width:38px;height:42px;padding:0;font-size:19px}
.daw-toolbar{display:none}
.daw-heads{padding-bottom:0}
.daw-corner,#ruler{height:34px;min-height:34px}
#track-heads{display:flex;flex-direction:column}
.t-head{box-sizing:border-box;height:78px;min-height:78px;flex:0 0 78px;margin:5px 8px}
.track-lane{box-sizing:border-box;height:88px;min-height:88px;margin:0}
@media(max-width:1450px){.daw-transport{grid-template-columns:330px 270px 400px 210px}.transport-cluster{height:70px}.daw-transport{min-height:70px}}

/* Reference transport buttons + functional metronome */
.transport-main .tbtn{width:52px;height:52px;border-radius:10px;border:1px solid #202c3b;background:linear-gradient(180deg,#141c27,#0d141d);display:grid;place-items:center;padding:0;color:#f7fbff;flex:0 0 52px}
.transport-main .tbtn svg{width:25px;height:25px;fill:currentColor;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.transport-main .tbtn-play{width:58px;flex-basis:58px;background:linear-gradient(180deg,#147cff,#075ccd);border-color:#268bff;box-shadow:inset 0 1px rgba(255,255,255,.16),0 0 0 1px rgba(0,82,206,.5)}
.transport-main .tbtn-record{position:relative;width:54px;flex-basis:54px;background:linear-gradient(180deg,#21191c,#131216);border-color:#563038}
.record-dot{width:21px;height:21px;border-radius:50%;background:linear-gradient(180deg,#ff6b3f,#f4482e);box-shadow:0 0 12px rgba(255,75,46,.22)}.record-stop{display:none;width:18px;height:18px;border-radius:3px;background:#ff5438}
.tbtn-record.recording .record-dot{display:none}.tbtn-record.recording .record-stop{display:block}.tbtn-record.recording{border-color:#ff563e;box-shadow:0 0 0 2px rgba(255,77,52,.13)}
#btn-play .icon-pause{display:none}#btn-play.playing .icon-play{display:none}#btn-play.playing .icon-pause{display:block}
.bpm-control{min-width:78px}.bpm-input{width:58px;border:0;background:transparent;color:#fff;font:inherit;font-size:15px;font-weight:650;padding:0;outline:0;font-variant-numeric:tabular-nums}.bpm-input::-webkit-inner-spin-button{opacity:.75}
.metronome-icon{filter:invert(88%) sepia(8%) saturate(371%) hue-rotate(172deg) brightness(98%);object-fit:contain}
#btn-metronome.on{color:#fff;background:rgba(22,119,255,.16);box-shadow:inset 0 -2px #1677ff}#btn-metronome.on .metronome-icon{filter:invert(48%) sepia(97%) saturate(2981%) hue-rotate(200deg) brightness(101%)}

/* Restored DAW edit toolbar */
.daw-toolbar{
  display:flex!important;align-items:center;gap:5px;min-height:48px;padding:7px 10px;
  flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;
  border:1px solid #1d2836;border-radius:12px;background:linear-gradient(180deg,#0c121a,#090e15);
}
.daw-toolbar .ibtn{width:auto;min-width:max-content;height:32px;padding:0 10px;gap:7px;border:1px solid transparent}
.daw-toolbar .ibtn svg{flex:0 0 15px}
.daw-toolbar .ibtn::after{font-size:11px;font-weight:600;white-space:nowrap}
#tool-pointer::after{content:"Select"}#tool-split::after{content:"Split"}#tool-trimL::after{content:"Trim Left"}#tool-trimR::after{content:"Trim Right"}#tool-del::after{content:"Delete"}#tool-rdel::after{content:"Ripple"}#tool-undo::after{content:"Undo"}#tool-redo::after{content:"Redo"}
.daw-toolbar #tool-exportrange{height:32px;padding:0 11px;white-space:nowrap}
.daw-toolbar #tool-exportrange::before{content:"Export "}
.daw-toolbar .tool-hint{min-width:180px;overflow:hidden;text-overflow:ellipsis}
@media(max-width:900px){.daw-toolbar{display:flex!important}.daw-toolbar .tool-hint{display:none}}

@media(max-width:720px){
  .topbar .sheet-midi-trigger{order:3;margin-left:auto}
  .sheet-result-row{align-items:flex-start;flex-direction:column}
  .sheet-result-actions{width:100%}
  .sheet-result-actions .btn{flex:1;text-align:center}
}
@media(max-width:640px){
  .topbar{height:112px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:64px 48px;gap:0 8px;padding:0 12px}
  .topbar .brand{grid-column:1;grid-row:1;min-width:0;font-size:16px;white-space:nowrap;overflow:hidden}
  .topbar .brand-wave{flex:0 0 32px}
  .topbar .sheet-midi-trigger{grid-column:2;grid-row:1;order:initial;margin:0;white-space:nowrap}
  .topbar .cloud-upload,.topbar #nav-upload{display:none}
  .topbar nav{grid-column:1 / -1;grid-row:2;position:static;translate:none;width:100%;height:48px;margin:0;gap:0;justify-content:space-around}
  .topbar nav a{flex:1;justify-content:center;padding:0;font-size:13px}
  .topbar nav a.active::after{bottom:0}
  .daw{height:calc(100dvh - 112px)}
}
.score-flat-app-id{width:170px;min-width:120px}
.score-body.flat-score-body{height:62vh;max-height:62vh;padding:0;overflow:hidden;background:#fff}
.flat-score-host{width:100%;height:100%;min-height:420px}
.flat-score-setup{height:100%;display:grid;place-content:center;gap:10px;padding:24px;text-align:center;color:#333}
@media(max-width:760px){.score-flat-app-id{width:125px}.score-body.flat-score-body{height:68vh;max-height:68vh}.flat-score-host{min-height:360px}}
@media(max-width:760px){
  #score-modal[open]:has(.flat-score-body){
    width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0
  }
  #score-modal:has(.flat-score-body) .score-body.flat-score-body{
    min-height:0;margin:0 6px 6px
  }
}

@media(prefers-reduced-motion:reduce){.plan{transition:border-color .2s ease,box-shadow .2s ease}.plan:hover{transform:none}}

/* Upload wizard — restrained pro-audio treatment */
#upload-modal{
  max-width:640px;background:#191919;border:1px solid #353535;border-radius:16px;
  box-shadow:0 24px 70px rgba(0,0,0,.55)
}
#upload-modal::backdrop{background:rgba(0,0,0,.78);backdrop-filter:blur(2px)}
.upload-wizard{padding:30px 32px 28px;gap:25px}
/* ── reactbits Stepper, ported verbatim from Stepper.css + Stepper.jsx (no motion/react needed) ──
   accent #5227FF; indicator 2rem circle, no border; active dot .75rem; connector .125rem #52525b */
.wizard-progress{width:100%;margin:0;grid-template-columns:auto 1fr auto;gap:0}
.wizard-progress>i{position:relative;overflow:hidden;height:.125rem;margin:0 .5rem;border-radius:.25rem;background:#52525b}
.wizard-progress>i::after{content:"";position:absolute;left:0;top:0;height:100%;width:0;background:#5227ff;transition:width .4s ease}
.wizard-progress:has(.wizard-progress-item.done)>i::after{width:100%}
.wizard-progress-item{color:#a3a3a3;gap:8px}
.wizard-progress-item b{position:relative;width:2rem;height:2rem;border:0;border-radius:9999px;background:#222;color:#a3a3a3;font-size:.875rem;font-weight:600;transition:background-color .3s ease,color .3s ease}
/* the number is still a grid item even at font-size:0, so centre the dot/check absolutely instead */
.wizard-progress-item.on b::after,.wizard-progress-item.done b::after{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.wizard-progress-item em{font-size:9px;letter-spacing:.1em}
.wizard-progress-item.on b{background:#5227ff;font-size:0}
.wizard-progress-item.on b::after{content:"";height:.75rem;width:.75rem;border-radius:9999px;background:#fff}
.wizard-progress-item.done{cursor:pointer}
.wizard-progress-item.done b{background:#5227ff;font-size:0}
.wizard-progress-item.done b::after{content:"";height:1rem;width:1rem;background:#fff;
  -webkit-mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E")}

/* .step-content-default + stepVariants: enter -100%/100%, exit 50%/-50%, 0.4s; height spring 0.4s */
.wizard-content{position:relative;overflow:hidden;transition:height .4s cubic-bezier(.4,0,.2,1)}
.wizard-content.animating>.upload-wizard-page{position:absolute;left:0;right:0;top:0}
@keyframes step-enter-fwd{from{transform:translateX(-100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes step-enter-back{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes step-exit-fwd{from{transform:translateX(0);opacity:1}to{transform:translateX(50%);opacity:0}}
@keyframes step-exit-back{from{transform:translateX(0);opacity:1}to{transform:translateX(-50%);opacity:0}}
.upload-wizard-page.enter-fwd{animation:step-enter-fwd .4s both}
.upload-wizard-page.enter-back{animation:step-enter-back .4s both}
.upload-wizard-page.exit-fwd{animation:step-exit-fwd .4s both}
.upload-wizard-page.exit-back{animation:step-exit-back .4s both}
@media(prefers-reduced-motion:reduce){.upload-wizard-page[class*="enter-"],.upload-wizard-page[class*="exit-"]{animation:none}.wizard-content{transition:none}}
.upload-wizard-page{gap:22px}
.upload-chooser-head{padding:0;text-align:left;gap:6px}
.upload-chooser-head h2{font-size:26px;line-height:1.13;letter-spacing:-.035em}
.upload-chooser-head .sub{font-size:12px;color:#969696}
.upload-kicker{display:none}
.stem-choice-section{padding:0;gap:10px;border:0;border-radius:0;background:transparent}
.vocal-karaoke-choice,.stem-choice-card{
  border:1px solid #3a3a3a;background:#202020;color:#f1f1f1;
  transition:border-color .14s ease,background .14s ease,color .14s ease
}
.vocal-karaoke-choice:hover,.stem-choice-card:hover{border-color:#595959;background:#252525}
.vocal-karaoke-choice{grid-template-columns:34px minmax(0,1fr) 20px;gap:13px;padding:15px 16px;border-radius:10px}
.vocal-karaoke-choice.on{border-color:var(--blue);background:rgba(0,117,255,.12);color:#fff;box-shadow:none}
.vocal-karaoke-choice.on .vocal-choice-copy>span{color:#a9c6ea}
.vocal-choice-copy{gap:4px}.vocal-choice-copy strong{font-size:14px}.vocal-choice-copy>span{font-size:10px;color:#999}
.stem-choice-icon,.stem-choice-card .stem-choice-icon{
  width:28px;height:28px;border-radius:0;background:transparent!important;color:#bdbdbd!important
}
.vocal-karaoke-choice.on .stem-choice-icon,.stem-choice-card.on .stem-choice-icon{color:#6ab0ff!important}
.stem-choice-icon svg,.stem-choice-card .stem-choice-icon svg{width:21px;height:21px}
.stem-icon-art{display:inline-block;width:1.25em;height:1.25em;flex:0 0 auto;background:currentColor;-webkit-mask:var(--stem-icon) center/contain no-repeat;mask:var(--stem-icon) center/contain no-repeat}
.stem-choice-icon .stem-icon-art,.stem-choice-card .stem-icon-art{width:22px;height:22px}
.result-track .stem-icon-art{width:14px;height:14px;color:#6ab0ff}
.stem-choice-check{width:18px;height:18px;border-color:#626262;background:transparent}
.on .stem-choice-check,.stem-choice-card.on .stem-choice-check{border-color:var(--blue);background:var(--blue)}
.stem-picker-heading{padding:7px 1px 0}.stem-picker-heading strong{font-size:11px}.stem-picker-heading span{color:#737373}
.stem-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.stem-choice-card{min-height:56px;padding:8px 13px;border-radius:10px;grid-template-columns:28px minmax(0,1fr) 19px;gap:10px}
.stem-choice-card strong{font-size:12px}
.stem-choice-card.on{border-color:var(--blue);background:rgba(0,117,255,.12);color:#fff}
.upload-result{margin-top:4px;padding:14px 1px 0;border-top-color:#343434}
.upload-result-label{color:#747474}
.result-track{padding:5px 8px;border-color:rgba(0,117,255,.42)!important;background:rgba(0,117,255,.1)!important;color:#bdbdbd!important}
.result-track b{color:#e8f0fb}.result-track svg{color:#6ab0ff}
.wizard-actions{justify-content:flex-end;gap:9px}
.wizard-back,.wizard-next{min-height:40px;padding:0 18px;border-radius:9px;font-size:12px}
/* reactbits .back-button / .next-button */
.wizard-back{border:0;border-radius:.25rem;padding:.25rem .5rem;background:transparent;color:#a3a3a3;transition:all 350ms}
.wizard-back:hover{color:#e4e4e4;background:transparent}
.wizard-next{border:0;border-radius:9999px;padding:.375rem .875rem;background:#5227ff;color:#fff;font-weight:500;letter-spacing:-.025em;box-shadow:none;transition:all 350ms}
.wizard-next:hover{background:#5227ff}
.wizard-next:disabled{background:#303030;color:#6f6f6f}
.wizard-dropzone{min-height:230px;border-color:#444;border-radius:11px;background:#202020}
.wizard-dropzone:hover,.wizard-dropzone.over{border-color:#777;background:#242424}
.wizard-upload-icon{width:54px;height:54px;border-radius:0;background:transparent;color:#bbb}
.queued-file,.fixed-upload-note{border-color:#3d3d3d;border-radius:10px;background:#202020}
.queued-file-icon{border-radius:8px;background:#2d2d2d;color:#ccc}
@media(max-width:640px){
  #upload-modal{border-radius:13px}.upload-wizard{padding:22px 18px 20px;gap:19px}
  .wizard-progress{width:100%}.wizard-progress-item em{display:block}
  .upload-chooser-head h2{font-size:24px}.stem-choice-grid{grid-template-columns:1fr}
  .vocal-karaoke-choice{padding:13px}.wizard-actions{justify-content:stretch}
  .wizard-actions>*{flex:1}.wizard-dropzone{min-height:220px}
}
.upload-result-empty{color:#858585;font-size:10px;font-weight:600;letter-spacing:.02em}

/* transcription intent: one target, shared editable-note pipeline */
.transcription-input{display:grid;gap:9px}.transcription-input-head{display:grid;gap:3px}.transcription-input-head span{color:#848484;font-size:8px;font-weight:800;letter-spacing:.13em}.transcription-input-head strong{font-size:13px}
.transcription-input-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.transcription-input-grid button{min-height:70px;padding:12px 14px;border:1px solid #3d3d3d;border-radius:11px;background:#1c1c1c;color:#a6a6a6;text-align:left;font:inherit;cursor:pointer}.transcription-input-grid button:hover{border-color:#606060;background:#222}.transcription-input-grid button.on{border-color:#c98749;background:#2a211a;color:#fff}.transcription-input-grid strong,.transcription-input-grid span,.transcription-input-grid small{display:block}.transcription-input-grid strong{font-size:13px}.transcription-input-grid span{margin-top:4px;font-size:10px}.transcription-input-grid small{margin-top:3px;color:#7f7f7f;font-size:8px}.transcription-input-grid button.on small{color:#bd9a7a}
.transcription-output{display:grid;gap:10px;padding-top:2px}
.transcription-output-head{display:flex;align-items:end;justify-content:space-between;gap:18px}
.transcription-output-head>div{display:grid;gap:3px}.transcription-output-head span{color:#848484;font-size:8px;font-weight:800;letter-spacing:.13em}.transcription-output-head strong{font-size:13px}.transcription-output-head small{color:#787878;font-size:9px}
.transcription-output-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.transcription-output-grid button{min-height:78px;padding:12px;border:1px solid #3d3d3d;border-radius:11px;background:#1c1c1c;color:#a6a6a6;text-align:left;font:inherit;cursor:pointer;transition:border-color .18s ease,background .18s ease,color .18s ease}
.transcription-output-grid button:hover{border-color:#606060;background:#222}.transcription-output-grid button.on{border-color:#c98749;background:#2a211a;color:#fff}
.transcription-output-grid span,.transcription-output-grid strong,.transcription-output-grid small{display:block}.transcription-output-grid span{margin-bottom:7px;font-size:11px;font-weight:700}.transcription-output-grid strong{font-size:13px}.transcription-output-grid small{margin-top:3px;color:#767676;font-size:8px}.transcription-output-grid button.on small{color:#bd9a7a}
.transcription-result{border-color:#514132!important;background:#231d18!important;color:#e0b386!important}.transcription-output:not([hidden])+.wizard-actions .wizard-next{background:#f3f1ed;color:#171717;box-shadow:none}.transcription-output:not([hidden])+.wizard-actions .wizard-next:hover{background:#fff}
@media(max-width:640px){.transcription-input-grid{grid-template-columns:1fr}.transcription-output-head{align-items:start;flex-direction:column;gap:4px}.transcription-output-grid{grid-template-columns:1fr}.transcription-output-grid button{min-height:62px}}

/* Studio product tour */
/* anchored coach-mark: the spotlight dims everything EXCEPT the control the tip is
   about (giant box-shadow = cutout), so the user can see what's being described */
.studio-tour{position:fixed;inset:0;z-index:120}
.studio-tour[hidden]{display:none}
.studio-tour-spot{position:fixed;top:50%;left:50%;width:0;height:0;border-radius:10px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(0,0,0,.72),inset 0 0 0 2px #f2f1ed;
  transition:top .3s ease,left .3s ease,width .3s ease,height .3s ease}
.studio-tour-spot[hidden]{display:block}   /* keeps dimming the page; just no cutout */
.studio-tour-card{position:fixed;width:min(420px,calc(100vw - 24px));display:grid;gap:0;
  padding:26px 28px 22px;border-radius:16px;background:#f2f1ed;color:#171717;text-align:left;
  box-shadow:0 28px 80px rgba(0,0,0,.58);transition:top .3s ease,left .3s ease}
.studio-tour-card.centred{top:50%;left:50%;transform:translate(-50%,-50%)}
.studio-tour-close{position:absolute;top:12px;right:14px;width:32px;height:32px;border:0;background:transparent;color:#777;font:300 28px/1 Arial,sans-serif;cursor:pointer}
.studio-tour-close:hover{color:#111}
.studio-tour-eyebrow{margin:0 0 12px;color:#9a592b;font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.studio-tour h2{margin:0;font-size:21px;line-height:1.2;letter-spacing:-.03em;color:#171717}
.studio-tour-copy{margin:11px 0 20px;color:#4f4f4c;font-size:13.5px;line-height:1.55}
.studio-tour-footer{display:flex;align-items:center;justify-content:space-between;gap:18px}
#studio-tour-progress{color:#8b8a85;font-size:11px;font-weight:700;letter-spacing:.08em}
.studio-tour-next{min-height:38px;padding:0 18px;border:1px solid #171717;border-radius:9px;background:#171717;color:#fff;font:inherit;font-size:12.5px;font-weight:750;cursor:pointer}
.studio-tour-next:hover{background:#333;border-color:#333}
#btn-tour{color:#c7d0da;border-color:#2c3948;background:#0e151e}
#btn-tour:hover{color:#fff;border-color:#526174;background:#17212d}
@media(max-width:640px){
  .studio-tour-card{padding:24px 20px 18px;border-radius:13px}
  .studio-tour h2{font-size:19px}
  .studio-tour-copy{font-size:13px}.studio-tour-footer{align-items:flex-end}
}
/* Upload metadata */
.upload-metadata{display:grid;gap:13px;padding:15px 0 2px;border-top:1px solid #343434}
.upload-metadata-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.upload-metadata-heading strong{font-size:12px;color:#ededed}
.upload-metadata-heading span{font-size:9px;color:#777;text-transform:uppercase;letter-spacing:.08em}
.upload-metadata-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.upload-metadata-grid label{display:grid;gap:6px}
.upload-metadata-grid label>span{color:#aaa;font-size:10px;font-weight:650}
.upload-metadata-grid label>span b{color:#d2a171}
.upload-metadata-grid input{box-sizing:border-box;width:100%;height:42px;border:1px solid #404040;border-radius:9px;background:#202020;color:#f1f1f1;padding:0 12px;font:inherit;font-size:12px;outline:0}
.upload-metadata-grid input::placeholder{color:#686868}
.upload-metadata-grid input:focus{border-color:#8b8b8b;background:#232323}
.upload-rights{display:grid;grid-template-columns:18px minmax(0,1fr);align-items:start;gap:9px;color:#a8a8a8;font-size:10px;line-height:1.45;cursor:pointer}
.upload-rights input{width:16px;height:16px;margin:0;accent-color:#e7e7e7}
@media(max-width:640px){.upload-metadata-grid{grid-template-columns:1fr}.upload-metadata-heading span{display:none}}
.song-author{display:block;margin-top:2px}

/* Pricing layout — keeps the existing rb-glow and hover effects */
.pricing{max-width:1160px;margin:112px auto 2rem;text-align:center}
.pricing-heading{max-width:650px;margin:0 auto}
.pricing-heading>span{display:block;margin-bottom:12px;color:#8abfff;font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.pricing-heading h2{margin:0;font-size:clamp(31px,4vw,46px);line-height:1.05;letter-spacing:-.045em}
.pricing-heading p{margin:15px 0 0;color:var(--sub);font-size:14px;line-height:1.55}
.billing-switch{width:max-content;display:flex;align-items:center;gap:4px;margin:28px auto 0;padding:4px;border:1px solid #303030;border-radius:999px;background:#111}
.billing-switch button{min-height:38px;padding:0 17px;border:0;border-radius:999px;background:transparent;color:#8e8e94;font:inherit;font-size:12px;font-weight:650;cursor:pointer}
.billing-switch button.on{background:#ededed;color:#171717}
.billing-switch small{margin-left:5px;color:#ae7847;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.billing-switch button.on small{color:#87522e}
.plans{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:34px auto 0;text-align:left}
.plan{min-height:485px;padding:30px;border-radius:16px;gap:0;overflow:visible}
.plan>.border-glow-inner{width:100%;gap:0}
.plan header{margin:0 0 26px}.plan header h3{margin:0;font-size:23px;letter-spacing:-.03em}.plan header p{margin:7px 0 0;color:var(--sub);font-size:12px}
.price{display:flex;align-items:baseline;gap:5px;font-size:inherit;line-height:1}
.price-currency{font-size:22px;font-weight:650;transform:translateY(-12px)}
.price-value{font-size:54px;font-weight:720;letter-spacing:-.055em;color:var(--txt)}
.price-period{font-size:12px;color:var(--sub);font-weight:500}
.price-note{min-height:18px;margin:9px 0 0;color:#8c8c92;font-size:11px}
.plan hr{width:100%;height:1px;margin:27px 0;border:0;background:#393939}
.plan ul{margin:0 0 28px;padding:0;gap:17px;color:#d5d5d8;font-size:12px}
.plan ul li{display:grid;grid-template-columns:17px minmax(0,1fr);align-items:start;gap:9px;line-height:1.45}
.plan ul li::before{content:"✓";width:15px;height:15px;display:grid;place-items:center;border:1px solid #777;border-radius:50%;color:#dedede;font-size:8px;line-height:1}
.plan-cta{width:100%;min-height:44px;margin-top:auto;display:flex;align-items:center;justify-content:center;gap:11px;border-radius:9px;font-weight:650}
.plan-cta span{font-size:17px;line-height:1;transition:transform .16s ease}.plan-cta:hover span{transform:translateX(3px)}
.plan .badge{top:-13px;left:50%;translate:-50%;padding:5px 10px;border-radius:999px;font-size:9px;font-weight:750;letter-spacing:.06em;text-transform:uppercase}
@media(max-width:920px){.plans{grid-template-columns:minmax(0,420px);justify-content:center}.plan{min-height:455px}}
@media(max-width:520px){.pricing{margin-top:88px}.pricing-heading h2{font-size:32px}.billing-switch button{padding:0 13px}.plans{grid-template-columns:minmax(0,1fr)}.plan{padding:26px 23px;min-height:440px}}
/* Keep decorative glow from widening the page */
body{overflow-x:hidden}

/* Library file-table layout */
.library-empty-icon {
  display: grid;
  width: 44px;
  height: 44px;
  margin-inline: auto;
  place-items: center;
  color: #61a8ff;
  border: 1px solid rgba(54, 146, 255, 0.32);
  border-radius: 12px;
  background: rgba(28, 113, 216, 0.12);
}

.library-empty-icon svg {
  width: 23px;
  height: 23px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.library-page{max-width:1440px;padding:34px clamp(20px,4vw,54px) 64px}
.library-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding-bottom:28px}
.library-kicker{display:block;margin-bottom:7px;color:#6aaeff;font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.library-head h1{margin:0;font-size:34px;letter-spacing:-.04em}.library-head p{margin:7px 0 0;color:var(--sub);font-size:12px}
.library-head-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.library-search{width:min(320px,38vw);height:43px;display:flex;align-items:center;gap:9px;padding:0 13px;border:1px solid #30343b;border-radius:10px;background:#111319;color:#778398}
.library-search:focus-within{border-color:#397ecb;box-shadow:0 0 0 3px rgba(29,117,221,.1)}
.library-search svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.library-search input{min-width:0;flex:1;border:0;background:transparent;color:#edf3fb;font:inherit;font-size:12px;outline:0}.library-search input::placeholder{color:#707986}
.library-filters{min-height:58px;display:flex;align-items:center;gap:9px;padding:9px 13px;border:1px solid #282d34;border-radius:11px 11px 0 0;background:#0e1116}
.library-filters>span{margin-right:4px;color:#7d8795;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.library-filters select{height:35px;padding:0 31px 0 12px;border:1px solid #343a43;border-radius:999px;background:#171a20;color:#c6cdd7;font:inherit;font-size:10px;outline:0;cursor:pointer}
.library-table{border:1px solid #282d34;border-top:0;border-radius:0 0 11px 11px;overflow:visible;background:#090b0f}
.library-table-head,.library-row{display:grid;grid-template-columns:minmax(280px,1fr) 150px 125px 42px;align-items:center;column-gap:18px}
.library-table-head{min-height:42px;padding:0 16px;border-bottom:1px solid #272c33;background:#121821;color:#778394;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.song-list{display:block}.library-row{min-height:78px;padding:10px 16px;border-bottom:1px solid #22262c;background:#0d0f13;cursor:pointer;transition:background .15s ease}
.library-row:last-child{border-bottom:0}.library-row:hover,.library-row:focus-within{background:#121b28}
.library-name{min-width:0;display:flex;align-items:center;gap:13px}.library-art{width:45px;height:45px;flex:0 0 45px;display:grid;place-items:center;border:1px solid #245c9d;border-radius:9px;background:#102b4c;color:#58a6ff}
.library-art svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.library-title{min-width:0;display:grid;gap:4px}.library-title strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f0f3f7;font-size:13px;font-weight:650}.library-title span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#858f9d;font-size:10px}
.library-updated{color:#aab3bf;font-size:11px}.library-status{display:inline-flex;align-items:center;gap:7px;color:#abb4c0;font-size:10px}.library-status::before{content:"";width:7px;height:7px;border-radius:50%;background:#69717b}.library-status.ready::before{background:#2d8cff;box-shadow:0 0 0 3px rgba(45,140,255,.12)}
.library-actions{position:relative;justify-self:end}.library-actions summary{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;color:#aeb7c4;font-size:18px;line-height:1;list-style:none;cursor:pointer}.library-actions summary::-webkit-details-marker{display:none}.library-actions summary:hover,.library-actions[open] summary{background:#1d2633;color:#fff}
.library-action-menu{position:absolute;right:0;top:39px;z-index:20;width:132px;display:grid;padding:5px;border:1px solid #303844;border-radius:9px;background:#151a21;box-shadow:0 14px 32px rgba(0,0,0,.5)}
.library-action-menu button{height:34px;border:0;border-radius:6px;background:transparent;color:#d4dbe4;text-align:left;padding:0 9px;font:inherit;font-size:10px;cursor:pointer}.library-action-menu button:hover{background:#222b37}.library-action-menu .danger{color:#ef8d8d}
.library-no-results{padding:50px 20px;text-align:center;color:#777f8b;font-size:12px}.library-empty{margin-top:0;padding:70px 24px;border:1px solid #282d34;border-radius:0 0 11px 11px;background:#0d0f13;text-align:center;display:grid;gap:8px;justify-items:center}
.library-empty .feat-ic{background:#102b4c;color:#58a6ff}.song-author{display:block;margin-top:2px}
@media(max-width:900px){
  .library-head{align-items:stretch;flex-direction:column}.library-head-actions{justify-content:flex-start}.library-search{width:min(100%,420px)}
  .library-table-head{display:none}.library-table{border-top:1px solid #282d34;border-radius:11px}
  .library-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name actions" "updated status";row-gap:9px;min-height:98px}
  .library-name{grid-area:name}.library-updated{grid-area:updated;padding-left:58px}.library-status{grid-area:status}.library-actions{grid-area:actions}
}
@media(max-width:600px){
  .library-page{padding:24px 12px 48px}.library-head h1{font-size:30px}.library-head-actions{display:grid;grid-template-columns:1fr 1fr}.library-search{width:100%;grid-column:1/-1}.library-head-actions .btn{width:100%}
  .library-filters{overflow-x:auto;border-radius:10px;margin-bottom:10px}.library-filters>span{display:none}.library-filters label{flex:0 0 auto}
  .library-row{padding:11px 12px}.library-updated{padding-left:58px}
}
/* Library grey surface correction */
.library-page {
  min-height: calc(100dvh - 70px);
  background: #1c1c1c;
  box-shadow: 0 0 0 100vmax #1c1c1c;
  clip-path: inset(0 -100vmax);
}
.library-search { background: #292929; border-color: #3a3a3a; }
.library-filters { background: #242424; border-color: #3a3a3a; }
.library-filters select { background: #303030; border-color: #454545; }
.library-table { background: #212121; border-color: #3a3a3a; }
.library-table-head { background: #292929; border-bottom-color: #3b3b3b; }
.library-row { background: #242424; border-bottom-color: #393939; }
.library-row:hover,
.library-row:focus-within { background: #2d2d2d; }
.library-empty { background: #242424; border-color: #3a3a3a; }
.library-action-menu { background: #292929; border-color: #444; }
.library-action-menu button:hover { background: #373737; }
/* Library design-system typography correction */
.library-page,
.library-page button,
.library-page input,
.library-page select { font-family: inherit; letter-spacing: inherit; }
.library-kicker { font-size: 12px; font-weight: 500; letter-spacing: normal; text-transform: none; }
.library-head h1 { font-size: 34px; font-weight: 700; letter-spacing: -.04em; }
.library-head p { font-size: 13px; }
.library-search input { font-size: 13px; }
.library-filters > span { font-size: 12px; font-weight: 500; letter-spacing: normal; text-transform: none; }
.library-filters select { font-size: 13px; font-weight: 500; }
.library-table-head { font-size: 11px; font-weight: 500; letter-spacing: .02em; }
.library-title strong { font-size: 14px; font-weight: 600; }
.library-title span,
.library-updated,
.library-status { font-size: 12px; }
.library-action-menu button { font-size: 13px; font-weight: 500; }
/* Guitar editorial modes */
.guitar-editorial {
  width: min(64%, 370px);
  margin-top: 18px;
  border-top: 1px solid rgba(255,255,255,.16);
}
.guitar-editorial-label {
  display: block;
  padding: 8px 0 6px;
  color: color-mix(in srgb,var(--accent),#fff 38%);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.guitar-editorial-row {
  display: grid;
  grid-template-columns: 24px minmax(0,1fr);
  column-gap: 8px;
  align-items: baseline;
  padding: 5px 0;
  border-top: 1px solid rgba(255,255,255,.09);
}
.guitar-editorial-row em {
  grid-row: 1 / span 2;
  color: color-mix(in srgb,var(--accent),#fff 24%);
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
}
.guitar-editorial-row strong {
  color: #fff;
  font-size: 11px;
  font-weight: 650;
}
.guitar-editorial-row small {
  color: rgba(255,255,255,.55);
  font-size: 9px;
}
@media(max-width:640px){
  .guitar-editorial{width:72%}
}
/* Project library and output centre */
.library-page,
.project-page {
  min-height: calc(100dvh - 70px);
  background: #1c1c1c;
  box-shadow: 0 0 0 100vmax #1c1c1c;
  clip-path: inset(0 -100vmax);
}
.library-page { max-width: 1480px; padding: 42px clamp(22px,4vw,58px) 72px; }
.library-head { padding-bottom: 34px; }
.library-head h1 { font-size: clamp(36px,4vw,48px); line-height: 1; }
.library-head p { margin-top: 11px; color: #9b9b9b; }
.library-kicker { color: #71adf5; }
.library-search { width: min(360px,40vw); background: #252525; border-color: #3b3b3b; }
.library-filters { min-height: 64px; padding-inline: 18px; background: #222; border-color: #3b3b3b; }
.library-filters select { height: 38px; background: #2d2d2d; border-color: #474747; }
.library-table { background: #202020; border-color: #3b3b3b; }
.library-table-head,
.library-row { grid-template-columns: minmax(300px,1.35fr) minmax(220px,.8fr) 140px 44px; }
.library-table-head { min-height: 46px; padding-inline: 20px; background: #292929; color: #8e8e8e; }
.library-row { min-height: 92px; padding: 14px 20px; background: #242424; border-bottom-color: #393939; }
.library-row:hover,
.library-row:focus-visible { background: #2b2b2b; outline: 0; }
.library-art { width: 48px; height: 48px; flex-basis: 48px; border-color: #3a6695; border-radius: 10px; background: #20354a; color: #72b5f5; }
.library-title { gap: 5px; }
.library-title strong { font-size: 15px; }
.library-title span { color: #949494; }
.library-outputs { color: #d0d0d0; font-size: 12px; }
.library-updated { color: #aaa; }
.library-actions summary { color: #bbb; }
.library-action-menu { width: 148px; background: #292929; border-color: #484848; }
.library-action-menu button:hover { background: #383838; }

.project-page { max-width: 1320px; padding: 36px clamp(22px,4vw,58px) 80px; }
.project-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 30px; color: #a5a5a5; font-size: 13px; text-decoration: none; }
.project-back::before { content: "\2190"; }
.project-back:hover { color: #fff; }
.project-head { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-bottom: 34px; border-bottom: 1px solid #383838; }
.project-identity { min-width: 0; display: flex; align-items: center; gap: 18px; }
.project-source-icon { width: 58px; height: 58px; flex: 0 0 58px; display: grid; place-items: center; border: 1px solid #426b96; border-radius: 13px; background: #20354a; color: #7bbcff; }
.project-source-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.project-head h1 { margin: 4px 0 7px; color: #f5f5f5; font-size: clamp(30px,4vw,42px); line-height: 1.05; letter-spacing: -.04em; }
.project-head p { margin: 0; color: #999; font-size: 13px; }
.project-head-actions { display: flex; align-items: center; gap: 10px; }
.project-source-warning { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; padding: 17px 18px; border: 1px solid #705b36; border-radius: 11px; background: #2d281f; }
.project-source-warning[hidden] { display: none; }
.project-source-warning strong { color: #f0d59b; font-size: 13px; }
.project-source-warning p { margin: 4px 0 0; color: #b4a98f; font-size: 12px; }
.project-groups { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin-top: 28px; }
.project-group { min-width: 0; overflow: hidden; border: 1px solid #3b3b3b; border-radius: 13px; background: #232323; }
.project-group > header { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px; border-bottom: 1px solid #383838; }
.project-group h2 { margin: 0; color: #eee; font-size: 15px; font-weight: 650; }
.project-group > header > span { min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 999px; background: #303030; color: #aaa; font-size: 11px; }
.project-asset-list { display: grid; }
.project-asset { min-height: 74px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid #343434; }
.project-asset:last-child { border-bottom: 0; }
.project-asset-icon { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid #424242; border-radius: 9px; background: #2d2d2d; color: #b9cce0; }
.project-asset-icon svg { width: 19px; height: 19px; }
.project-asset-copy { min-width: 0; display: grid; gap: 4px; }
.project-asset-copy strong { overflow: hidden; color: #ececec; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.project-asset-copy span { overflow: hidden; color: #929292; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.project-asset-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.project-asset-actions .btn { min-height: 32px; padding-inline: 10px; }
.project-local-note { max-width: 100px; color: #888; font-size: 10px; text-align: right; }
.project-output-empty { grid-column: 1/-1; padding: 64px 24px; border: 1px solid #3b3b3b; border-radius: 13px; background: #232323; text-align: center; }
.project-output-empty strong { color: #eee; }
.project-output-empty p { margin: 7px 0 0; color: #999; font-size: 12px; }
.project-danger-zone { display: flex; justify-content: flex-end; margin-top: 34px; padding-top: 20px; border-top: 1px solid #363636; }
.project-delete { border: 0; background: transparent; color: #c98585; font: inherit; font-size: 12px; cursor: pointer; }
.project-delete:hover { color: #ffaaaa; }

@media(max-width:900px) {
  .library-table-head { display: none; }
  .library-row { grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "name actions" "outputs updated"; row-gap: 10px; }
  .library-name { grid-area: name; }
  .library-outputs { grid-area: outputs; padding-left: 61px; }
  .library-updated { grid-area: updated; padding: 0; text-align: right; }
  .library-actions { grid-area: actions; }
  .project-groups { grid-template-columns: 1fr; }
}
@media(max-width:640px) {
  .library-page,.project-page { padding: 24px 14px 52px; }
  .library-head-actions { grid-template-columns: 1fr; }
  .library-search { width: 100%; }
  .library-filters { margin-bottom: 10px; border-radius: 10px; overflow-x: auto; }
  .library-row { padding: 13px; }
  .library-outputs { padding-left: 61px; }
  .project-head { align-items: flex-start; flex-direction: column; }
  .project-head-actions { width: 100%; }
  .project-head-actions .btn { flex: 1; }
  .project-source-warning { align-items: stretch; flex-direction: column; }
  .project-asset { grid-template-columns: 36px minmax(0,1fr); }
  .project-asset-actions { grid-column: 2; justify-content: flex-start; }
}
/* Editorial project workspace v2 */
.dev-qa-button { border-color: #5f563d; background: #28251d; color: #e6c777; }
.dev-qa-button span { margin-right: 5px; color: #ad9861; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.project-page { max-width: 1520px; padding-top: 30px; }
.project-back { margin-bottom: 34px; }
.project-head { min-height: 126px; padding: 0 0 34px; }
.project-identity { gap: 20px; }
.project-source-icon { width: 66px; height: 66px; flex-basis: 66px; border-color: #476d91; background: #203448; }
.project-source-icon svg { width: 31px; height: 31px; }
.project-head h1 { margin-top: 6px; font-size: clamp(38px,4vw,52px); }
.project-head-actions .btn { min-width: 112px; }
.project-overview { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 24px 0 0; border: 1px solid #383838; border-radius: 12px; background: #222; overflow: hidden; }
.project-overview > div { min-height: 76px; display: grid; align-content: center; gap: 7px; padding: 0 20px; border-right: 1px solid #393939; }
.project-overview > div:last-child { border-right: 0; }
.project-overview span { color: #858585; font-size: 10px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.project-overview strong { color: #ededed; font-size: 14px; font-weight: 600; }
.project-source-warning { margin-top: 14px; }
.project-groups { display: grid; grid-template-columns: minmax(0,1fr); gap: 32px; margin-top: 40px; }
.project-group { overflow: visible; border: 0; border-radius: 0; background: transparent; }
.project-group > header { min-height: auto; margin-bottom: 15px; padding: 0 0 13px; border-bottom: 1px solid #3a3a3a; }
.project-group h2 { font-size: 18px; letter-spacing: -.015em; }
.project-group > header > span { background: #292929; }
.project-asset-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.project-asset { position: relative; min-height: 142px; display: grid; grid-template-columns: 42px minmax(0,1fr); grid-template-rows: auto 1fr auto; align-items: start; gap: 12px; padding: 18px; overflow: hidden; border: 1px solid #3b3b3b; border-radius: 12px; background: #232323; transition: transform .16s ease,border-color .16s ease,background .16s ease; }
.project-asset::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--asset-accent,#71859b); }
.project-asset:hover { transform: translateY(-2px); border-color: #555; background: #282828; }
.project-asset:last-child { border-bottom: 1px solid #3b3b3b; }
.project-asset-icon { width: 40px; height: 40px; border-color: color-mix(in srgb,var(--asset-accent),#555 55%); background: color-mix(in srgb,var(--asset-accent),transparent 86%); color: color-mix(in srgb,var(--asset-accent),#fff 28%); }
.project-asset-copy { align-self: center; gap: 5px; }
.project-asset-copy strong { font-size: 15px; }
.project-asset-copy span { color: #8f8f8f; font-size: 11px; }
.project-asset-actions { grid-column: 1/-1; align-self: end; justify-content: flex-end; padding-top: 8px; }
.project-asset-actions .btn { min-height: 31px; border-color: #454545; background: #292929; color: #d8d8d8; }
.project-asset-actions .btn:hover { border-color: var(--asset-accent,#666); color: #fff; }
.project-danger-zone { margin-top: 48px; }
@media(max-width:1000px) { .project-asset-list { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) {
  .project-overview { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .project-overview > div:nth-child(2) { border-right: 0; }
  .project-overview > div:nth-child(-n+2) { border-bottom: 1px solid #393939; }
  .project-asset-list { grid-template-columns: 1fr; }
}
/* Keep the expanded development command bar clear at laptop widths */
@media(max-width:1400px) and (min-width:901px) {
  .topbar nav { position: static; translate: 0; margin-left: auto; gap: 20px; }
  .cloud-upload { margin-left: 0; }
  .topbar { gap: 10px; }
  .topbar .btn-sm { padding-inline: 10px; }
}
/* Project library sidebar */
.library-page,.project-page { max-width: none; padding: 0; }
.project-shell { display: grid; grid-template-columns: 232px minmax(0,1fr); min-height: calc(100dvh - 74px); }
.project-sidebar { position: sticky; top: 74px; height: calc(100dvh - 74px); box-sizing: border-box; display: flex; flex-direction: column; padding: 24px 14px 18px; border-right: 1px solid #303030; background: #181818; }
.project-sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 0 10px 22px; color: #f0f0f0; }
.project-sidebar-head strong { font-size: 17px; letter-spacing: -.02em; }
.sidebar-close { display: none; border: 0; background: transparent; color: #888; font: inherit; font-size: 11px; cursor: pointer; }
.project-sidebar nav { display: grid; gap: 3px; }
.project-sidebar nav p { margin: 19px 10px 7px; color: #707070; font-size: 9px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.project-sidebar nav p:first-child { margin-top: 0; }
.project-sidebar nav button,.sidebar-qa-load { position: relative; width: 100%; min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 10px 0 13px; border: 0; border-radius: 8px; background: transparent; color: #aaa; font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.project-sidebar nav button::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px; border-radius: 4px; background: transparent; }
.project-sidebar nav button:hover,.project-sidebar nav button.active { background: #242424; color: #f0f0f0; }
.project-sidebar nav button.active::before { background: #4d9bea; }
.project-sidebar nav em { min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px; background: #282828; color: #858585; font-size: 9px; font-style: normal; }
.sidebar-developer { margin-top: auto; padding-top: 15px; border-top: 1px solid #303030; }
.sidebar-developer small { display: block; margin: 0 10px 7px; color: #71684f; font-size: 9px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.sidebar-qa-load { background: #25231d; color: #d4bd7a; }
.sidebar-qa-load:hover { background: #2d2a21; }
.sidebar-qa-load b { color: #8e7c4c; font-size: 8px; letter-spacing: .08em; }
.project-content { min-width: 0; width: 100%; max-width: 1480px; box-sizing: border-box; padding: 38px clamp(28px,4vw,58px) 72px; }
.library-content { max-width: 1600px; }
.sidebar-toggle { display: none; margin-bottom: 18px; border: 1px solid #3b3b3b; border-radius: 8px; background: #242424; color: #ddd; padding: 8px 12px; font: inherit; font-size: 12px; cursor: pointer; }
.project-detail-content .project-back { margin-top: 0; }
@media(max-width:900px) {
  .project-shell { display: block; }
  .project-sidebar { position: fixed; z-index: 50; left: 0; top: 74px; width: min(290px,86vw); height: calc(100dvh - 74px); transform: translateX(-102%); transition: transform .2s ease; box-shadow: 18px 0 45px #0009; }
  .project-shell.sidebar-open .project-sidebar { transform: translateX(0); }
  .sidebar-close,.sidebar-toggle { display: inline-flex; }
  .project-content { padding: 24px 18px 56px; }
}
/* Mobile sidebar header offset */
@media(max-width:640px){.project-sidebar{top:112px;height:calc(100dvh - 112px)}}
/* Icon-only stem mute and solo controls */
.t-head-top .stem-control{width:30px;height:30px;min-width:30px;padding:0;display:grid;place-items:center;border:1px solid #2b3745;border-radius:7px;background:#111923;color:#aeb8c5;line-height:1}
.t-head-top .stem-control:hover:not(:disabled){background:#182331;color:#f4f7fb;border-color:#405267}
.track-control-icon{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.t-head-top .m-mute.on{background:#0c2948;border-color:#176bc0;color:#3a9cff;box-shadow:inset 0 0 0 1px #1377d733}
.t-head-top .m-solo.on{background:#173451;border-color:#4a87bd;color:#eaf5ff;box-shadow:inset 0 0 0 1px #7fc3ff22}
.t-head-top .stem-control:disabled{opacity:.34}
/* Frozen timeline header inside the scrolling stem panel */
.daw-tracks .daw-heads{z-index:9}
.daw-tracks .daw-corner{position:sticky;top:0;z-index:10;background:#0b1119}
.daw-tracks .lanescol{overflow:visible}
.daw-tracks #ruler{position:sticky;top:0;z-index:8;background:#0b1119}
/* Studio channel equalizer */
.daw{position:relative}.daw-tracks{transition:margin-right .2s ease}.daw.channel-panel-open .daw-tracks{margin-right:352px}
.channel-panel{--channel-accent:#4d9bea;position:absolute;z-index:35;right:14px;top:142px;bottom:66px;width:334px;box-sizing:border-box;overflow:auto;padding:18px;border:1px solid #303b48;border-radius:13px;background:#11171e;color:#eef3f8;box-shadow:0 24px 70px #000b}
.channel-panel-head{display:flex;align-items:flex-start;justify-content:space-between;padding-bottom:15px;border-bottom:1px solid #28323d}.channel-panel-head span{display:block;color:#778493;font-size:9px;font-weight:750;letter-spacing:.13em}.channel-panel-head strong{display:block;margin-top:4px;font-size:22px;letter-spacing:-.035em}.channel-panel-close{width:30px;height:30px;border:1px solid #303b48;border-radius:8px;background:#171f28;color:#9ba8b5;font-size:20px;cursor:pointer}.channel-panel-close:hover{color:#fff;background:#202b36}
.channel-panel-meta{display:flex;align-items:center;justify-content:space-between;padding:13px 0 10px;color:#aeb9c4;font-size:11px}.channel-panel-meta span{display:flex;align-items:center;gap:7px}.channel-panel-meta i{width:7px;height:7px;border-radius:50%;background:var(--channel-accent);box-shadow:0 0 10px color-mix(in srgb,var(--channel-accent) 65%,transparent)}.channel-panel-meta button{border:1px solid #35414e;border-radius:999px;background:transparent;color:#8895a2;padding:5px 10px;font:inherit;font-size:10px;cursor:pointer}.channel-panel-meta button.on{border-color:#63717f;color:#e6ebf0;background:#222b34}
.eq-graph{height:128px;padding:9px 10px 4px;border:1px solid #29333e;border-radius:10px;background:#0b1016}.eq-graph svg{display:block;width:100%;height:100px;overflow:visible}.eq-grid{fill:none;stroke:#202a35;stroke-width:1}.eq-spectrum{fill:color-mix(in srgb,var(--channel-accent) 18%,transparent);stroke:color-mix(in srgb,var(--channel-accent) 48%,transparent);stroke-width:1;transition:fill .15s ease}.eq-zero{fill:none;stroke:#46525e;stroke-width:1;stroke-dasharray:4 4}.eq-curve{fill:none;stroke:var(--channel-accent);stroke-width:2.4;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--channel-accent) 55%,transparent))}.eq-graph circle{fill:#11171e;stroke:var(--channel-accent);stroke-width:2}.eq-graph>span{display:inline-block;width:33.333%;color:#596572;font-size:8px}.eq-graph>span:nth-of-type(2){text-align:center}.eq-graph>span:last-child{text-align:right}
.eq-preset-row{display:flex;align-items:center;justify-content:space-between;margin:13px 0 6px}.eq-preset-row label{color:#7f8c99;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.eq-preset-row select{border:1px solid #303b47;border-radius:7px;background:#171f27;color:#d7dee5;padding:6px 9px;font:inherit;font-size:10px}
.eq-controls{display:grid}.eq-controls label{display:grid;grid-template-columns:72px minmax(0,1fr) 54px;align-items:center;gap:9px;min-height:54px;border-bottom:1px solid #252f39}.eq-controls label>span{display:grid;gap:2px}.eq-controls b,.channel-pan-control b{font-size:10px;letter-spacing:.08em}.eq-controls small,.channel-pan-control small{color:#65727f;font-size:8px;font-weight:500}.eq-controls input,.channel-pan-control input{width:100%;accent-color:var(--channel-accent)}.eq-controls output{color:#b9c4ce;font-size:9px;text-align:right;font-variant-numeric:tabular-nums}
.channel-pan-control{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:9px;min-height:58px}.channel-pan-control>span{display:grid;gap:3px}.channel-panel footer{display:flex;justify-content:space-between;gap:10px;padding-top:11px;border-top:1px solid #28323d}.channel-panel footer button{border:1px solid #35414d;border-radius:8px;background:transparent;color:#aab5bf;padding:8px 12px;font:inherit;font-size:10px;cursor:pointer}.channel-panel footer .eq-done{border-color:var(--channel-accent);background:var(--channel-accent);color:#071019;font-weight:700}
.t-head-top .eq-btn{width:30px;height:30px;min-width:30px;padding:0;display:grid;place-items:center;border:1px solid #2b3745;border-radius:7px;background:#111923;color:#aeb8c5}.t-head-top .eq-btn:hover,.t-head-top .eq-btn.on{border-color:var(--tc,var(--blue));color:var(--tc,var(--blue));background:color-mix(in srgb,var(--tc,var(--blue)) 12%,#111923)}.eq-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
@media(max-width:900px){.daw.channel-panel-open .daw-tracks{margin-right:0}.channel-panel{position:fixed;left:8px;right:8px;top:auto;bottom:8px;width:auto;max-height:72dvh}.t-head-top .eq-btn{display:grid}}


/* Guitar output dropdown - drops directly below the Guitar stem card */
.guitar-output-choices{width:calc(50% - 4px);margin:-1px 0 0 calc(50% + 4px);overflow:hidden;border:1px solid #454545;border-top-color:#353535;border-radius:0 0 10px 10px;background:#292929;box-shadow:0 12px 28px rgba(0,0,0,.28)}
.guitar-output-grid{display:grid}.guitar-output-grid button{position:relative;min-height:58px;padding:10px 12px;border:0;border-bottom:1px solid #3d3d3d;background:transparent;color:#aaa;text-align:left;font:inherit;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto 18px;align-items:center;gap:9px;transition:background .14s ease,color .14s ease}.guitar-output-grid button:last-child{border-bottom:0}.guitar-output-grid button:hover{background:#313131}.guitar-output-grid button.on{background:#34302a;color:#fff}.guitar-output-copy{display:grid;gap:3px}.guitar-output-copy strong{font-size:11px;line-height:1.3}.guitar-output-copy small{color:#858585;font-size:8px}.guitar-output-grid button em{color:#858585;font-size:8px;font-style:normal;white-space:nowrap}.guitar-output-radio{width:17px;height:17px;border:1.5px solid #777;border-radius:50%;display:grid;place-items:center}.guitar-output-grid button.on .guitar-output-radio{border-color:#d79a45;background:#d79a45}.guitar-output-grid button.on .guitar-output-radio::after{content:'';width:6px;height:3px;border-left:2px solid #161616;border-bottom:2px solid #161616;transform:rotate(-45deg) translateY(-1px)}
@media(max-width:640px){.guitar-output-choices{width:100%;margin:-1px 0 0}.guitar-output-grid button{min-height:56px}}