/* SAMPLE LIFE — warm gold on near-black (Rudi Rok brand canon), built to be filmed */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --bg:#060504; --panel:#13110D; --panel2:#1C1813;
  --line:rgba(244,236,224,.07); --line2:rgba(244,236,224,.14);
  --ink:#F3ECDF; --dim:#C5B8A0; --faint:#A89A88;
  --gold:#D4A574; --gold-deep:#B8893F; --gold-lite:#E8CD98;
  --pink:#FF4D8D; --violet:#7C5CFF; --cyan:#35E0FF; --yellow:#FFD23B;
  --orange:#FFA62B; --coral:#FF6B4A; --lav:#D4A574; --mint:#4DFFA6; --magenta:#FF5CF4;
  --red:#FF5C5C;
  --grad:linear-gradient(135deg,#C99A52 0%,#E8CD98 100%);
  --sh-grad:0 6px 26px rgba(212,165,116,.34), 0 2px 40px rgba(212,165,116,.2);
  /* warm palette so instruments stay distinguishable but cohesive on gold/black */
  --c-kick:#E8B873; --c-snare:#C9803E; --c-hihat:#EBCF8E; --c-openhat:#D99A4A;
  --c-clap:#C96A3A; --c-perc:#BFA478; --c-bass:#D4A574; --c-melody:#E6C88A; --c-fx:#CFA94A;
}
/* a11y: keyboard focus is visible (tap-highlight is off above) */
:focus-visible{outline:2px solid var(--cyan); outline-offset:2px; border-radius:4px}
/* photosensitive safety: kill animation + the strobe; JS REDUCE flag no-ops confetti/flash/particles/flight */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.06s !important}
  #pulse, #flash{display:none !important}
}
html{height:100%}
body{
  min-height:100%; background:var(--bg); color:var(--ink);
  font-family:"Space Grotesk",system-ui,sans-serif; font-size:15px; line-height:1.45;
  overscroll-behavior:none; -webkit-font-smoothing:antialiased;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
  touch-action:manipulation;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 40% at 8% -8%, rgba(212,165,116,.2), transparent 58%),
    radial-gradient(54% 38% at 98% 4%, rgba(232,205,152,.1), transparent 60%),
    radial-gradient(80% 50% at 50% 116%, rgba(184,137,63,.22), transparent 62%),
    radial-gradient(120% 90% at 50% 40%, transparent 58%, rgba(0,0,0,.55) 100%);
}
#grain{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
}
#pulse{
  position:fixed; inset:-20%; z-index:0; pointer-events:none; opacity:0;
  background:radial-gradient(60% 45% at 50% 60%, rgba(212,165,116,.2), rgba(184,137,63,.1) 50%, transparent 72%);
}
#flash{position:fixed; inset:0; z-index:58; pointer-events:none; opacity:0}
.mono{font-family:"Space Mono",monospace; letter-spacing:.14em; font-size:10px; color:var(--dim)}
.hidden{display:none!important}
.gtx{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}

#app{max-width:480px; margin:0 auto; position:relative; z-index:1}

/* header */
#top{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:calc(14px + env(safe-area-inset-top)) 18px 10px;
  position:sticky; top:0; z-index:20;
  background:linear-gradient(rgba(6,5,4,.94), rgba(6,5,4,.7) 72%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(212,165,116,.1);
}
.logo{font-family:Anton,sans-serif; font-size:21px; letter-spacing:.05em; color:var(--ink); display:flex; align-items:center}
.logo span{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}

/* mini equalizer — idles gently, dances when anything plays */
.eq{display:inline-flex; align-items:flex-end; gap:2.5px; height:12px; margin-left:9px}
.eq::before,.eq::after{content:""; align-self:stretch; width:3px; border:1.6px solid var(--gold); border-radius:1px}  /* the sample-selection brackets clamp the beat — the SAMPLE LIFE mark */
.eq::before{border-right:0; margin-right:1px}
.eq::after{border-left:0; margin-left:1px}
.eq b{width:3px; height:30%; border-radius:2px; animation:eqb 1.7s ease-in-out infinite}
.eq b:nth-child(1){background:var(--gold-deep)}
.eq b:nth-child(2){background:var(--gold); animation-delay:.28s}
.eq b:nth-child(3){background:var(--gold-lite); animation-delay:.56s}
.eq b:nth-child(4){background:var(--gold); animation-delay:.84s}
.eq b:nth-child(5){background:var(--gold-deep); animation-delay:1.12s}
@keyframes eqb{0%,100%{height:30%}50%{height:100%}}
body.is-playing .eq b{animation-duration:.5s}
.eq.big{height:26px; gap:4.5px; margin:8px 0 0}
.eq.big b{width:5.5px; border-radius:3px}
.eq.big::before,.eq.big::after{width:5px; border-width:2.6px; border-radius:2px}
.eq.big::before{border-right:0; margin-right:3px}
.eq.big::after{border-left:0; margin-left:3px}
#top-status{transition:color .3s}
#top-status.rec{color:var(--red)}
#top-status.live{color:var(--gold)}

main{padding:6px 16px calc(36px + env(safe-area-inset-bottom))}
.view{display:none; animation:vin .3s cubic-bezier(.3,1.2,.4,1)}
.view.active{display:block}
@keyframes vin{from{opacity:0; transform:translateY(12px) scale(.99)}to{opacity:1; transform:none}}
.view-head{margin:10px 2px 16px}
.view-head h2{
  font-family:Anton,sans-serif; font-size:34px; letter-spacing:.02em; font-weight:400; line-height:1.02;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; /* static gold — no idle sheen repaint */
}
.view-head .sub{color:var(--dim); font-size:13px; margin-top:4px; max-width:34ch}
/* the band hero duplicates the sticky logo + the onboarding pitch → collapse it once built (focus on the video), and always on phones */
#view-band.built .view-head{display:none}
@media (max-width:879px){ #view-band .view-head{display:none} }
.row-head{display:flex; align-items:center; justify-content:space-between; gap:12px}
.lbl{display:block; margin:14px 2px 7px}
.hint{text-align:center; margin-top:14px; color:var(--faint)}

/* buttons */
.cta{
  position:relative; overflow:hidden;
  display:block; width:100%; padding:16px; border:0; border-radius:16px; cursor:pointer;
  font:700 14px "Space Grotesk",sans-serif; letter-spacing:.14em; color:#1A1206;
  background:var(--grad);
  box-shadow:inset 0 1px 0 rgba(255,250,240,.55), inset 0 -2px 6px rgba(120,80,20,.25), var(--sh-grad);
  transition:transform .12s ease, box-shadow .25s ease;
}
.cta::after{
  content:""; position:absolute; top:0; bottom:0; width:46%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
  left:-60%; animation:shimmer 3s ease infinite;
}
@keyframes shimmer{0%,55%{left:-60%}90%,100%{left:130%}}
.cta:active{transform:scale(.96)}
.cta.glow{animation:glow 1.2s ease infinite}
@keyframes glow{0%,100%{box-shadow:0 6px 24px rgba(212,165,116,.32)}50%{box-shadow:0 6px 42px rgba(212,165,116,.6), 0 0 60px rgba(184,137,63,.4)}}
.ghost-btn{
  display:block; width:100%; padding:14px; margin-top:12px; cursor:pointer;
  background:rgba(212,165,116,.03); border:1.5px dashed rgba(212,165,116,.32); border-radius:16px;
  color:var(--gold); font:500 13px "Space Grotesk",sans-serif; letter-spacing:.12em;
  transition:transform .12s, border-color .2s;
}
.ghost-btn:active{transform:scale(.96); border-color:var(--lav)}
.link-btn{background:none; border:0; color:var(--dim); font:400 13px "Space Grotesk",sans-serif; text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:10px}
.ibtn{
  width:40px; height:40px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,236,205,.045); border:1px solid rgba(212,165,116,.16); border-radius:13px; color:var(--ink);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  cursor:pointer; transition:transform .12s, background .2s, border-color .2s;
}
.ibtn:active{transform:scale(.86)}
.ibtn.big{width:50px; height:50px; border-radius:16px}
.ibtn svg, #tabs svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.ibtn svg .f, #tabs svg .f{fill:currentColor; stroke:none}
.btn-row{display:flex; gap:10px; margin-top:16px}
.btn-row .ghost-btn{margin-top:0; width:38%}
.btn-row .cta{width:62%}

/* kit slots */
#kit-list{display:flex; flex-direction:column; gap:10px}
.slot{
  display:flex; align-items:center; gap:13px; padding:13px;
  background:linear-gradient(180deg, rgba(255,236,205,.055), rgba(255,236,205,.018));
  border:1px solid rgba(212,165,116,.13);
  border-radius:18px;
  backdrop-filter:blur(10px) saturate(1.1); -webkit-backdrop-filter:blur(10px) saturate(1.1);
  box-shadow:inset 0 1px 0 rgba(255,247,232,.05), 0 10px 26px rgba(0,0,0,.38);
  transition:transform .14s ease, border-color .25s, box-shadow .25s;
}
.slot:active{transform:scale(.985)}
.slot.flash{border-color:var(--ta); box-shadow:0 0 0 1.5px var(--ta), 0 0 30px color-mix(in srgb, var(--ta) 40%, transparent)}
.slot.start{border-color:rgba(212,165,116,.6); animation:slotpulse 1.5s ease infinite}
@keyframes slotpulse{0%,100%{box-shadow:0 0 0 rgba(212,165,116,0)}50%{box-shadow:0 0 28px rgba(212,165,116,.4)}}
#kit-demo{display:block; margin:8px auto 0}
.slot-vis{
  width:78px; height:44px; flex:0 0 auto; border-radius:11px; overflow:hidden;
  background:rgba(246,246,255,.045); display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.slot-vis canvas{width:100%; height:100%; display:block}
.slot-vis.empty{border:1.5px dashed var(--line2); color:var(--ta,var(--faint))}
.slot-vis.empty svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round}
.slot-body{flex:1; min-width:0; cursor:pointer}
.slot-name{font:700 14px "Space Grotesk",sans-serif; letter-spacing:.1em; display:flex; align-items:center; gap:7px; white-space:nowrap}
.slot-name b{width:7px; height:7px; border-radius:50%; background:var(--ta,var(--dim)); box-shadow:0 0 8px var(--ta,transparent); flex:0 0 auto}
.slot-meta{font-family:"Space Mono",monospace; font-size:9.5px; letter-spacing:.1em; color:var(--faint); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.slot-acts{display:flex; gap:7px}
.slot-acts .ibtn.rec{
  color:var(--ta,var(--pink));
  border-color:color-mix(in srgb, var(--ta,var(--pink)) 35%, transparent);
  background:color-mix(in srgb, var(--ta,var(--pink)) 9%, var(--panel2));
}
[data-type=kick]{--ta:var(--c-kick)}[data-type=snare]{--ta:var(--c-snare)}[data-type=hihat]{--ta:var(--c-hihat)}
[data-type=openhat]{--ta:var(--c-openhat)}[data-type=clap]{--ta:var(--c-clap)}[data-type=perc]{--ta:var(--c-perc)}
[data-type=bass]{--ta:var(--c-bass)}[data-type=melody]{--ta:var(--c-melody)}[data-type=fx]{--ta:var(--c-fx)}

/* pads */
#pad-grid{display:grid; gap:11px}
#pad-grid.g4{grid-template-columns:repeat(2,1fr)}
#pad-grid.g6{grid-template-columns:repeat(2,1fr)}
#pad-grid.g9{grid-template-columns:repeat(3,1fr)}
#pad-grid.g16{grid-template-columns:repeat(4,1fr)}
.pad{
  position:relative; aspect-ratio:1; border-radius:24px; touch-action:none; cursor:pointer;
  background:
    radial-gradient(130% 130% at 28% 18%, rgba(246,246,255,.06), transparent 55%),
    linear-gradient(180deg, #1D1D2C, #15151F);
  border:1.5px solid var(--line2);
}
.pad::before{
  content:""; position:absolute; inset:0; border-radius:22px; opacity:0;
  background:radial-gradient(80% 80% at 50% 50%, var(--ta,#fff), transparent 75%);
}
.pad.empty{border-style:dashed; opacity:.5}
.pad-label{
  position:absolute; left:13px; bottom:11px; right:8px;
  font-family:"Space Mono",monospace; font-size:9px; letter-spacing:.12em; color:var(--ta,var(--dim));
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pad-dot{position:absolute; top:12px; right:12px; width:8px; height:8px; border-radius:50%; background:var(--ta,var(--faint)); box-shadow:0 0 10px var(--ta,transparent)}
.pad.hit{animation:padpop .26s cubic-bezier(.34,1.56,.64,1); border-color:var(--ta); box-shadow:0 0 0 1.5px var(--ta), 0 0 calc(16px + var(--hv,1) * 30px) color-mix(in srgb, var(--ta) calc(30% + var(--hv,1) * 35%), transparent)}
.pad.hit::before{animation:padflash .26s ease-out}
@keyframes padpop{0%{transform:scale(.9)}55%{transform:scale(1.045)}100%{transform:scale(1)}}
@keyframes padflash{0%{opacity:.4}100%{opacity:0}}
.pad.hit .pad-label{color:var(--ink)}
.pad-plus{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font:300 34px "Space Grotesk",sans-serif; color:var(--faint); padding-bottom:10px;
}
.ptc{position:absolute; left:50%; top:50%; width:7px; height:7px; border-radius:50%; pointer-events:none; z-index:3}

/* pad looper */
#loop-bar{display:flex; align-items:center; gap:7px; margin:2px 0 8px}
#lp-bars{margin-left:auto}
.seg.mini button{padding:6px 11px; font-size:11px}
/* hierarchy: REC is the hero, play medium, undo/clear quiet */
.lpb{color:var(--dim)}
.lpb[disabled]{opacity:.28; pointer-events:none}
#lp-undo, #lp-clear{width:34px; height:34px; border-radius:11px; color:var(--faint)}
#lp-play{color:var(--ink)}
#lp-rec{
  width:48px; height:48px; border-radius:15px; color:var(--red); flex:0 0 auto;
  border-color:color-mix(in srgb, var(--red) 45%, transparent);
  background:color-mix(in srgb, var(--red) 12%, var(--panel2));
}
#lp-rec svg{width:22px; height:22px}
#lp-rec.armed{background:linear-gradient(135deg,#FF8C7B,#FF5C5C); border-color:transparent; color:#fff; box-shadow:0 0 24px rgba(255,92,92,.55)}
#lp-rec.rec-live{animation:recblink 1s ease infinite}
@keyframes recblink{50%{box-shadow:0 0 36px rgba(255,92,92,.9)}}
#lp-status{margin:0 2px 8px}
#lp-progress{height:4px; border-radius:2px; background:rgba(246,246,255,.08); overflow:hidden; margin-bottom:12px}
#lp-fill{height:100%; width:0%; background:var(--grad); border-radius:2px}

/* chips + seg */
.chips{display:flex; gap:8px; overflow-x:auto; padding:2px; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto; padding:9px 14px; border-radius:999px; cursor:pointer;
  background:rgba(255,236,205,.04); border:1px solid rgba(212,165,116,.14);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:var(--dim); font:600 12px "Space Grotesk",sans-serif; letter-spacing:.08em;
  transition:transform .15s, color .15s, border-color .2s, background .2s;
}
.chip:active{transform:scale(.93)}
.chip em{font-style:normal; font-family:"Space Mono",monospace; font-size:9px; color:var(--faint); margin-left:6px}
.chip.on{background:var(--grad); color:#1A1206; border-color:transparent; box-shadow:0 3px 18px rgba(212,165,116,.4); animation:chippop .25s cubic-bezier(.34,1.56,.64,1)}
@keyframes chippop{0%{transform:scale(.92)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
.chip.on em{color:rgba(255,255,255,.7)}
.chips.small .chip{padding:7px 12px; font-size:11px}
.row-tag{flex:0 0 auto; align-self:center; font:400 9px "Space Mono",monospace; letter-spacing:.16em; color:var(--faint); padding-right:2px}
/* GENRE dropdown — compact trigger + a menu that opens cleanly so the view stays tidy */
#band-genre-wrap{margin:0 auto 10px; text-align:center}
.genre-btn{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer; max-width:100%;
  padding:10px 15px; border-radius:13px;
  background:rgba(255,236,205,.05); border:1px solid rgba(212,165,116,.18);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,250,240,.06), 0 2px 14px rgba(0,0,0,.3);
}
.genre-btn:active{transform:scale(.97)}
.genre-btn .gb-tag{font:400 9px "Space Mono",monospace; letter-spacing:.18em; color:var(--faint)}
.genre-btn b{font-family:"Anton",sans-serif; font-weight:400; letter-spacing:.04em; color:var(--gold); font-size:16px}
.genre-btn .gb-bpm{font:400 10px "Space Mono",monospace; color:var(--faint)}
.genre-btn .chev{margin-left:1px; color:var(--gold); font-size:11px; transition:transform .25s}
.genre-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.genre-menu{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0 auto; max-width:520px;
  max-height:0; opacity:0; overflow:hidden; padding:0;
  transition:max-height .3s ease, opacity .22s ease, margin-top .22s ease;
}
.genre-menu.open{max-height:60vh; opacity:1; overflow-y:auto; padding:2px; margin-top:10px}
.seg{display:flex; background:rgba(255,236,205,.04); border:1px solid rgba(212,165,116,.14); border-radius:13px; padding:3px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.seg button{
  border:0; background:transparent; color:var(--dim); padding:7px 13px; border-radius:10px;
  font:700 12px "Space Mono",monospace; cursor:pointer; transition:color .15s;
}
.seg button.on{background:var(--grad); color:#1A1206; animation:chippop .25s cubic-bezier(.34,1.56,.64,1)}

/* song controls */
#genre-row{flex-wrap:wrap; overflow:visible; margin-bottom:6px} /* wrap all 8 genres into view — no off-screen horizontal scroll */
.row2{display:grid; grid-template-columns:1.1fr 1fr; gap:16px; align-items:start; margin:16px 0 18px}
.bpm-box{background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:12px 14px 6px}
.bpm-box .lbl{margin-top:0}
.big-num{font-family:Anton,sans-serif; font-size:52px; line-height:1; color:var(--ink); letter-spacing:.02em}
.big-num span{display:inline-block}
.big-num span.pop{animation:numpop .18s cubic-bezier(.34,1.56,.64,1)}
@keyframes numpop{0%{transform:scale(1)}45%{transform:scale(1.14)}100%{transform:scale(1)}}
.big-num em{font:400 10px "Space Mono",monospace; color:var(--pink); margin-left:6px; letter-spacing:.14em}
.stack .lbl:first-child{margin-top:0}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:34px; background:transparent; --fill:50%}
input[type=range]::-webkit-slider-runnable-track{
  height:5px; border-radius:3px; background-color:rgba(246,246,255,.12);
  background-image:var(--grad); background-size:var(--fill) 100%; background-repeat:no-repeat;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:24px; height:24px; border-radius:50%; margin-top:-10px;
  background:#fff; box-shadow:0 2px 14px rgba(255,77,141,.6);
}
input[type=range]::-moz-range-track{height:5px; border-radius:3px; background:rgba(246,246,255,.12)}
input[type=range]::-moz-range-progress{height:5px; border-radius:3px; background:#FF4D8D}
input[type=range]::-moz-range-thumb{width:24px; height:24px; border:0; border-radius:50%; background:#fff}
.empty-box{background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:22px 18px; text-align:center}
.empty-box p{color:var(--dim); margin-bottom:16px}

/* themes */
#theme-list{display:flex; flex-direction:column; gap:10px}
.theme-card{
  display:flex; align-items:center; gap:13px; padding:15px 14px; width:100%; text-align:left; cursor:pointer;
  background:linear-gradient(180deg, var(--panel), #14141F); border:1px solid var(--line);
  border-radius:18px; color:var(--ink); transition:transform .12s, border-color .2s;
}
.theme-card:active{transform:scale(.98); border-color:var(--tc)}
.theme-card b{width:12px; height:12px; border-radius:50%; background:var(--tc); box-shadow:0 0 14px var(--tc); flex:0 0 auto}
.th-body{flex:1; min-width:0}
.th-name{font:700 15px "Space Grotesk",sans-serif; letter-spacing:.08em; display:flex; align-items:center; gap:8px}
.th-done{font:700 8.5px "Space Mono",monospace; letter-spacing:.12em; color:#0E0E16; background:var(--mint); border-radius:6px; padding:3px 6px}
.th-desc{font-size:12px; color:var(--dim); margin-top:2px}
.th-meta{text-align:right; line-height:1.5; flex:0 0 auto}
.theme-card.done{border-color:color-mix(in srgb, var(--mint) 30%, transparent)}

/* player */
#player{position:relative; margin-top:22px; background:linear-gradient(180deg,var(--panel),#13131E); border:1px solid var(--line2); border-radius:22px; padding:16px 14px 14px; transition:box-shadow .4s}
#player.live{box-shadow:0 0 50px rgba(124,92,255,.18), 0 0 24px rgba(255,77,141,.1)}
#song-head{display:flex; align-items:center; gap:13px; margin-bottom:13px}
#song-cover{
  width:64px; height:64px; flex:0 0 auto; border-radius:15px;
  box-shadow:0 6px 22px rgba(0,0,0,.5), 0 0 0 1px rgba(246,246,255,.1);
}
.song-meta{min-width:0}
#song-kicker{margin-bottom:3px}
#song-name{font-family:Anton,sans-serif; font-size:24px; line-height:1.08; letter-spacing:.03em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
#seq{display:flex; flex-direction:column; gap:7px; margin-bottom:14px}
.seq-row{--rc:#fff}
.seq-row[data-role=kick]{--rc:var(--c-kick)} .seq-row[data-role=snare]{--rc:var(--c-snare)}
.seq-row[data-role=clap]{--rc:var(--c-clap)} .seq-row[data-role=hihat]{--rc:var(--c-hihat)}
.seq-row[data-role=openhat]{--rc:var(--c-openhat)} .seq-row[data-role=perc]{--rc:var(--c-perc)}
.seq-row[data-role=bass]{--rc:var(--c-bass)} .seq-row[data-role=melody]{--rc:var(--c-melody)}
.seq-row[data-role=fx]{--rc:var(--c-fx)}
.seq-row.mut{opacity:.18}
.seq-lab{font-family:"Space Mono",monospace; font-size:8.5px; letter-spacing:.16em; color:var(--rc); opacity:.8; margin-bottom:3px}
.seq-cells{display:grid; grid-template-columns:repeat(16,1fr); gap:3px}
.cell{height:14px; border-radius:4.5px; background:rgba(246,246,255,.05); transition:transform .1s}
.cell:nth-child(4n+1){background:rgba(246,246,255,.08)}
.cell.on{background:var(--rc); opacity:.32}
.cell.ph{background:rgba(246,246,255,.16)}
.cell.on.ph{opacity:1; transform:scale(1.3); box-shadow:0 0 12px var(--rc); z-index:2}
#play-info{display:flex; align-items:center; gap:10px; margin-bottom:14px}
#progress{flex:1; height:4px; border-radius:2px; background:rgba(246,246,255,.1); overflow:hidden}
#progress-fill{height:100%; width:0%; background:var(--grad); border-radius:2px}
#sec-label{color:var(--pink)}
#transport{display:flex; align-items:center; justify-content:center; gap:22px; margin:4px 0 10px}
.play-big{
  width:76px; height:76px; border-radius:50%; border:0; cursor:pointer;
  background:var(--grad); box-shadow:var(--sh-grad); color:#1A1206;
  display:flex; align-items:center; justify-content:center; transition:transform .12s;
}
.play-big:active{transform:scale(.9)}
.play-big svg{width:27px; height:27px}
.play-big svg .f{fill:#fff; stroke:none}
.play-big.pulsing{animation:beatpulse .5s ease-in-out infinite}
@keyframes beatpulse{0%,100%{transform:scale(1)}30%{transform:scale(1.07)}}
.loop-row{display:flex; justify-content:center; margin-bottom:12px}
#btn-video{margin-top:4px}
#share-hint{text-align:center; color:var(--faint); margin:8px 2px 2px}
.loop-row .chip{font-family:"Space Mono",monospace; font-size:10px}
#tracks{display:flex; flex-direction:column; gap:6px}
.trow{--rc:#fff; display:flex; align-items:center; gap:10px; padding:9px 11px; background:rgba(246,246,255,.035); border-radius:12px}
.trow[data-role=kick]{--rc:var(--c-kick)} .trow[data-role=snare]{--rc:var(--c-snare)}
.trow[data-role=clap]{--rc:var(--c-clap)} .trow[data-role=hihat]{--rc:var(--c-hihat)}
.trow[data-role=openhat]{--rc:var(--c-openhat)} .trow[data-role=perc]{--rc:var(--c-perc)}
.trow[data-role=bass]{--rc:var(--c-bass)} .trow[data-role=melody]{--rc:var(--c-melody)}
.trow[data-role=fx]{--rc:var(--c-fx)}
.tname{font:700 11px "Space Mono",monospace; letter-spacing:.12em; min-width:74px; color:var(--rc)}
.tnote{flex:1; font-size:11px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tmute{
  border:1px solid var(--line2); background:transparent; color:var(--faint); cursor:pointer;
  font:700 9px "Space Mono",monospace; letter-spacing:.12em; padding:6px 10px; border-radius:9px; transition:all .15s;
}
.tmute.on{background:var(--red); border-color:var(--red); color:#fff}

/* library */
#lib-list{display:flex; flex-direction:column; gap:9px}
.lrow{display:flex; align-items:center; gap:12px; padding:10px 12px; background:var(--panel); border:1px solid var(--line); border-radius:16px; transition:transform .1s, border-color .2s}
.lbody{flex:1; min-width:0; cursor:pointer}
.lname{font:500 13.5px "Space Grotesk",sans-serif; letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lmeta{font-family:"Space Mono",monospace; font-size:9px; letter-spacing:.1em; color:var(--faint); margin-top:3px}
.ltag{font:700 8.5px "Space Mono",monospace; letter-spacing:.12em; color:var(--ta,var(--lav)); border:1px solid color-mix(in srgb, var(--ta,var(--lav)) 35%, transparent); padding:4px 7px; border-radius:7px; flex:0 0 auto}
.lrow .ibtn{width:38px; height:38px; border-radius:11px; color:var(--dim)}
.lplay{
  width:46px; height:46px; flex:0 0 auto; border:0; border-radius:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:#14141F;
  background:var(--ta,#fff); box-shadow:0 3px 16px color-mix(in srgb, var(--ta,#fff) 45%, transparent);
  transition:transform .14s cubic-bezier(.34,1.56,.64,1);
}
.lplay svg{width:18px; height:18px}
.lplay svg .f{fill:#14141F}
.lplay:active{transform:scale(.9)}
.lplay.playing{animation:lplaypop .22s cubic-bezier(.34,1.56,.64,1)}
@keyframes lplaypop{0%{transform:scale(1)}45%{transform:scale(1.14)}100%{transform:scale(1)}}
.empty-lib{color:var(--faint); text-align:center; padding:40px 20px; font-size:13px}

/* tabs */
#tabs{ display:none } /* SAMPLE LIFE is a single-purpose app — no bottom nav, the video band IS the app */
#tabs.__unused{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%); z-index:30;
  width:min(100%,480px);
  background:rgba(16,16,25,.88); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--line);
  padding:8px 8px calc(8px + env(safe-area-inset-bottom));
}
#tabs button{
  position:relative; flex:1; background:none; border:0; cursor:pointer; color:var(--faint);
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:9px 0 7px; transition:color .2s, transform .15s;
}
#tabs button:active{transform:scale(.9)}
#tabs button span{font-family:"Space Mono",monospace; font-size:8.5px; letter-spacing:.16em}
#tabs button.on{color:#fff}
#tabs button.on::before{content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:20px; height:3px; border-radius:2px; background:var(--grad)}
#tabs button.nudge svg{animation:tabnudge .6s cubic-bezier(.34,1.56,.64,1) 4}
@keyframes tabnudge{0%,100%{transform:none}40%{transform:translateY(-6px) scale(1.2)}}
#tab-dot{position:absolute; top:6px; right:calc(50% - 18px); width:6px; height:6px; border-radius:50%; background:var(--pink); opacity:0; transition:opacity .2s}
#tab-dot.show{opacity:1; animation:blink 1s ease infinite}
@keyframes blink{50%{opacity:.3}}

/* sheets */
#backdrop{position:fixed; inset:0; z-index:40; background:rgba(8,8,14,.66); opacity:0; pointer-events:none; transition:opacity .28s}
#backdrop.show{opacity:1; pointer-events:auto}
.sheet{
  position:fixed; left:50%; bottom:0; transform:translate(-50%,105%); z-index:50;
  width:min(100%,480px); max-height:88vh; overflow-y:auto;
  background:rgba(24,24,38,.97); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--line2); border-bottom:0; border-radius:26px 26px 0 0;
  padding:10px 18px calc(26px + env(safe-area-inset-bottom));
  transition:transform .38s cubic-bezier(.3,1.25,.4,1);
}
.sheet.open{transform:translate(-50%,0)}
.sheet-handle{width:38px; height:4px; border-radius:2px; background:rgba(246,246,255,.18); margin:4px auto 12px}
.sheet-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.sheet-title{font-family:Anton,sans-serif; font-size:19px; letter-spacing:.04em}
.sheet-list{display:flex; flex-direction:column; gap:8px}
.sheet-list .srow{
  display:flex; align-items:center; gap:10px; padding:13px 14px; cursor:pointer;
  background:var(--panel2); border:1px solid var(--line); border-radius:14px;
  font:500 13px "Space Grotesk",sans-serif; letter-spacing:.06em; color:var(--ink);
  transition:transform .1s, border-color .15s; width:100%; text-align:left;
}
.sheet-list .srow:active{transform:scale(.97); border-color:var(--ta,var(--lav))}
.sheet-list .srow small{margin-left:auto; font-family:"Space Mono",monospace; font-size:9px; color:var(--faint); letter-spacing:.1em}
.sheet-list .srow.danger{color:var(--red)}
.sheet-list .srow b{width:8px; height:8px; border-radius:50%; background:var(--ta,var(--faint)); box-shadow:0 0 8px var(--ta,transparent); flex:0 0 auto}

/* add grid */
#add-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:9px}
#add-grid button{
  padding:17px 6px 14px; background:var(--panel2); border:1px solid var(--line); border-radius:16px;
  color:var(--ink); cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:7px;
  font:700 11px "Space Grotesk",sans-serif; letter-spacing:.1em; transition:transform .12s, border-color .15s;
}
#add-grid button:active{transform:scale(.93); border-color:var(--ta)}
#add-grid button b{width:10px; height:10px; border-radius:50%; background:var(--ta,var(--lav)); box-shadow:0 0 10px var(--ta,transparent)}
#add-grid button small{font:400 8.5px "Space Mono",monospace; color:var(--faint); letter-spacing:.1em}
#add-grid .add-group{grid-column:1 / -1; font:400 9px "Space Mono",monospace; letter-spacing:.2em; color:var(--gold); opacity:.8; padding:6px 2px 0; text-align:left}
#add-grid .add-group:first-child{padding-top:0}

/* record sheet */
#rec-stage{display:flex; flex-direction:column; align-items:center; gap:16px; padding:8px 0 6px}
#rec-wave{width:100%; height:60px; border-radius:14px; background:rgba(246,246,255,.04)}
#rec-btn{
  position:relative; width:110px; height:110px; border-radius:50%; border:0; cursor:pointer; margin-top:6px;
  background:var(--grad); box-shadow:var(--sh-grad); transition:transform .12s;
}
#rec-btn:not(.rec){animation:breathe 2.6s ease-in-out infinite}
#rec-btn.no-mic{animation:none; opacity:.35; pointer-events:none}
@keyframes breathe{
  0%,100%{box-shadow:0 6px 26px rgba(255,77,141,.35), 0 2px 40px rgba(124,92,255,.25)}
  50%{box-shadow:0 6px 44px rgba(255,77,141,.6), 0 2px 64px rgba(124,92,255,.45)}
}
#rec-btn::after{
  content:""; position:absolute; inset:36px; border-radius:50%;
  background:#14141F; transition:all .28s cubic-bezier(.3,1.25,.4,1);
}
#rec-btn:active{transform:scale(.93)}
#rec-btn.rec{background:radial-gradient(circle at 35% 28%, #FF8C8C, var(--red) 55%, #C23B3B); box-shadow:0 4px 34px rgba(255,92,92,.55)}
#rec-btn.rec::after{inset:42px; border-radius:10px}
#rec-btn.rec::before{
  content:""; position:absolute; inset:-14px; border-radius:50%;
  border:2.5px solid rgba(255,92,92,.55); animation:ring 1.1s ease-out infinite;
}
@keyframes ring{from{transform:scale(.82); opacity:1}to{transform:scale(1.2); opacity:0}}
#rec-hint{margin-top:2px}
#rec-tip{font:600 13px "Space Grotesk",sans-serif; letter-spacing:.06em; color:var(--mint); text-align:center; max-width:32ch; margin:0 auto; min-height:18px}
#rec-skip{display:block; margin:8px auto 0}
#rec-timer{color:var(--pink); height:14px}
#rec-review{display:flex; flex-direction:column; gap:12px; padding:6px 0}
#rev-wave{width:100%; height:90px; border-radius:16px; background:rgba(246,246,255,.04)}
#rev-meta{text-align:center; color:var(--mint)}

/* onboarding */
#onboard{
  position:fixed; inset:0; z-index:80; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  padding:30px; text-align:center; transition:opacity .4s, visibility .4s;
}
#onboard.gone{opacity:0; visibility:hidden; pointer-events:none}
.ob-glow{position:absolute; inset:0; pointer-events:none; background:
  radial-gradient(40% 28% at 22% 26%, rgba(212,165,116,.2), transparent 70%),
  radial-gradient(36% 26% at 80% 30%, rgba(232,205,152,.12), transparent 70%),
  radial-gradient(50% 34% at 50% 88%, rgba(184,137,63,.22), transparent 70%)}
.ob-logo{font-family:Anton,sans-serif; font-size:64px; letter-spacing:.04em; line-height:1}
.ob-logo .l{display:inline-block; animation:bin .55s cubic-bezier(.34,1.56,.64,1) backwards; animation-delay:calc(var(--i)*70ms)}
.ob-logo .g{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
@keyframes bin{from{transform:translateY(30px) scale(.6) rotate(6deg); opacity:0}}
.ob-tag{color:var(--gold); margin-top:-4px}
.ob-copy{color:var(--dim); font-size:14.5px; line-height:1.75; margin:14px 0 18px}
#onboard .cta{width:min(78%,300px)}

/* juice */
#combo{
  position:fixed; top:17%; left:50%; transform:translate(-50%,0); z-index:66;
  font-family:Anton,sans-serif; font-size:58px; letter-spacing:.02em;
  opacity:0; transition:opacity .15s; pointer-events:none;
  text-shadow:0 4px 30px rgba(0,0,0,.5);
}
#combo.show{opacity:1}
.cfp{position:fixed; top:-20px; width:8px; height:13px; border-radius:3px; z-index:65; pointer-events:none}

/* video band — film sheet */
#vid-stage{display:flex; flex-direction:column; align-items:center; gap:14px; padding:6px 0}
#vid-frame{
  position:relative; width:auto; height:min(44vh,360px); aspect-ratio:9/16; border-radius:24px; overflow:hidden;
  background:#14141F; border:1px solid var(--line2);
}
#vid-preview, #vid-review{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#14141F}
#vid-frame.front #vid-preview, #vid-frame.front #vid-review{transform:scaleX(-1)} /* mirror only the front cam */
#vid-flip{position:absolute; top:10px; right:10px; width:38px; height:38px; background:rgba(8,8,14,.6); backdrop-filter:blur(6px); z-index:3}
#vid-count{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:2;
  font-family:Anton,sans-serif; font-size:96px; color:#fff; text-shadow:0 4px 24px rgba(0,0,0,.5); opacity:0;
}
#vid-count.show{opacity:1; animation:numpop .5s ease}
#vid-btn{
  position:relative; width:84px; height:84px; border-radius:50%; border:0; cursor:pointer;
  background:radial-gradient(circle at 35% 28%, #FF8C8C, var(--red) 55%, #C23B3B); box-shadow:0 4px 30px rgba(255,92,92,.45); transition:transform .12s;
}
#vid-btn::after{content:""; position:absolute; inset:26px; border-radius:50%; background:#14141F; transition:all .25s cubic-bezier(.3,1.25,.4,1)}
#vid-btn.rec::after{inset:30px; border-radius:8px}
#vid-btn.rec::before{content:""; position:absolute; inset:-10px; border-radius:50%; border:2.5px solid rgba(255,92,92,.5); animation:ring 1.1s ease-out infinite}
#vid-btn:active{transform:scale(.93)}
#vid-hint{margin-top:2px}
#vid-tip{font:600 13px "Space Grotesk",sans-serif; letter-spacing:.06em; color:var(--mint); text-align:center; max-width:30ch; min-height:18px}
#vid-stage-btns{display:flex; justify-content:center}
#sheet-film.cam-rec #vid-flip{display:none}

/* video band — genre row + grid + player */
#band-build-wrap{margin-bottom:10px}
#band-build-hint{text-align:center; color:var(--faint); margin-top:8px}
#band-genre{flex-wrap:wrap; overflow:visible; margin:0 0 12px}
/* the grid is the shareable frame: a true 9:16, seamless, no borders, no flashing */
/* the grid + a transparent overlay canvas share one positioned stage so the live preview can show the export's hook/flash */
#band-stage{
  position:relative; margin:0 auto 14px; width:100%; max-width:min(100%, 52vh * 9 / 16);
  aspect-ratio:9/16; max-height:58vh;
}
#band-grid{
  display:grid; gap:3px; width:100%; height:100%;
  border-radius:18px; overflow:hidden; background:#000;
  box-shadow:0 0 0 1px rgba(212,165,116,.18), 0 18px 50px rgba(0,0,0,.5); /* lift the preview off the black bg → it reads as the hero (live only; export canvas unaffected) */
}
#band-overlay{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; border-radius:18px; z-index:4}
/* the video + its controls only appear once the band is BUILT */
#view-band:not(.built) .post-build{display:none}
#band-cols{display:flex; flex-direction:column}      /* mobile: stacks; order set per build-state below */
.band-col{min-width:0}
/* TUNE pill (mobile, post-build): a single pinned pill that opens the settings sheet, so the core loop never needs scrolling */
/* MOBILE bottom toolbar — one focused sheet per feature. Hidden by default; shown only on phones once .built (rule below). */
#band-dock{display:none}
.dock-btn{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  position:relative; background:none; border:0; padding:7px 2px 5px; cursor:pointer;
  color:var(--dim); font:700 9px "Space Mono",monospace; letter-spacing:.14em;
  transition:color .18s, transform .1s;
}
.dock-btn svg{width:22px; height:22px; display:block; stroke:currentColor}
.dock-primary{color:var(--gold)}                 /* SOUNDS — the privileged creative surface, gold at rest */
.dock-btn.on{color:var(--gold-lite)}             /* the open sheet's button lights up */
.dock-btn.on::before{content:""; position:absolute; top:-7px; left:20%; right:20%; height:3px; border-radius:0 0 4px 4px; background:var(--grad)}
.dock-btn:active{transform:scale(.93)}
#backdrop.soft{background:rgba(8,8,14,.32)}   /* lighter dim for the TUNE sheet so the peeking 9:16 video stays visible */
/* PHONES (the target device): once built, lead with the VIDEO + transport, then EXPORT + the finished clip + instrument cards, then the tweak settings.
   Pre-build keeps DOM order (film the cards → build). Gated to <880px so the desktop 3-col (its own ≥880px query) is untouched. */
@media (max-width:879px){
  #view-band.built #band-col-center{order:1}  /* big video preview + play/rebuild/mute, right at the top */
  #view-band.built #band-col-right{order:2}   /* EXPORT (first child) + result + instrument cards */
  #view-band.built #band-col-left{order:3}    /* genre/length/energy/cut/tempo/intro — secondary, below */
  #view-band.built #band-cols{min-height:calc(100svh - 146px); justify-content:center}  /* center video+transport+export between the sticky header and the dock — no more top-heavy gap */
  .slot-meta{white-space:normal; overflow:visible; text-overflow:clip; line-height:1.35}  /* full clip status, no "FILM O…" */
  #band-kit .slot-acts{gap:8px; flex-wrap:nowrap}  /* the 4 card actions stay on one row */
  #view-band.built #band-dock{display:flex; position:fixed; left:50%; transform:translateX(-50%); bottom:0; z-index:45;
    width:min(100%,520px); border-top:1px solid var(--line2); border-radius:16px 16px 0 0;
    background:rgba(20,18,14,.94); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    padding:7px 6px calc(7px + env(safe-area-inset-bottom))}    /* show the pinned dock once built */
  #view-band.built .dock-primary{flex:1.22}        /* SOUNDS is the widest cell */
  main{padding-bottom:calc(86px + env(safe-area-inset-bottom))}  /* clear the fixed dock so the last element isn't hidden */
  #sheet-sounds, #sheet-groove, #sheet-shape, #sheet-scene, #sheet-frame{max-height:62vh}  /* PEEK: a strip of the 9:16 video stays visible above each sheet → live feedback */
  .sheet-body{display:flex; flex-direction:column; gap:14px}  /* relocated control blocks stack with breathing room */
  .sheet-body > *{width:100%}
}
/* DESKTOP: video centred & big · all settings on the left · instruments + export on the right */
@media (min-width:880px) and (min-height:560px){
  #app{max-width:1180px}
  main{padding-left:26px; padding-right:26px}
  #view-band .view-head{text-align:center; margin-bottom:14px}
  #view-band .view-head h2{font-size:34px}
  #view-band .view-head .sub{margin-left:auto; margin-right:auto}
  #band-cols{flex-direction:row; align-items:flex-start; justify-content:center; gap:34px}
  #band-col-left{flex:1 1 0; max-width:344px; order:1}
  #band-col-left .chips{flex-wrap:wrap; overflow:visible}   /* narrow column → wrap chips so none clip */
  #band-col-center{flex:0 0 auto; order:2; display:flex; flex-direction:column; align-items:center}
  #band-col-right{flex:1 1 0; max-width:344px; order:3}
  #band-col-right #band-kit{margin-top:6px}
  /* compact cards so labels never truncate in the 344px column */
  #band-col-right #band-kit .slot{padding:9px 10px; gap:9px}
  #band-col-right #band-kit .slot-vis{width:48px}
  #band-col-right #band-kit .slot-acts{gap:4px; flex-wrap:nowrap}
  #band-col-right #band-kit .slot-acts .ibtn{width:33px; height:33px}
  #band-stage{width:auto; height:min(62vh,632px); max-width:none; max-height:none; margin:0 0 12px}  /* big centred hero, fits short screens */
  /* center column hugs the video — the long feat-hint wraps instead of widening it */
  #band-col-center #band-feat-hint{max-width:300px; margin-left:auto; margin-right:auto}
  #band-build-wrap{margin-top:24vh}       /* before build, the BUILD button sits where the video will be */
}
#band-grid.n1{grid-template-columns:1fr; grid-template-rows:1fr}
#band-grid.n2{grid-template-columns:1fr 1fr; grid-template-rows:1fr}
#band-grid.n3{grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr}
#band-grid.n3 .band-cell:first-child{grid-column:1 / 3}
#band-grid.n4{grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr}
/* 5–6 members = 2×3 (n5 spans the top cell, like n3) — only ~3 videos ever decode at once (pool) */
#band-grid.n5{grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr 1fr}
#band-grid.n5 .band-cell:first-child{grid-column:1 / 3}
#band-grid.n6{grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr 1fr}
#band-mode{width:max-content; margin:0 auto 10px}
/* GRID/SOLO seg + the discreet WIND-UP toggle share one centered row */
#band-bar{display:flex; align-items:center; justify-content:center; gap:10px; margin:0 auto 10px; flex-wrap:wrap}
#band-bar #band-mode{margin:0}
.toggle-pill{
  flex:0 0 auto; white-space:nowrap; cursor:pointer;
  border:1px solid rgba(212,165,116,.16); background:rgba(255,236,205,.04); color:var(--dim);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font:600 11px "Space Grotesk",sans-serif; letter-spacing:.08em; padding:7px 13px; border-radius:11px;
}
.toggle-pill:active{transform:scale(.93)}
/* ON/OFF toggle: gold OUTLINE + a ✓ (not the solid-gold fill, which is reserved for "pick-one" segments/chips) → instant grammar, state isn't color-only */
.toggle-pill.on{background:rgba(212,165,116,.13); color:var(--gold-lite); border-color:var(--gold); box-shadow:inset 0 0 0 1px rgba(212,165,116,.3)}
.toggle-pill.on::after{content:'✓'; margin-left:6px; font-size:10px; opacity:.9}
/* tempo + new-rhythm row: change BPM (keeps the groove) or roll a fresh rhythm */
#band-tempo{display:flex; align-items:center; justify-content:center; gap:8px; margin:0 auto 12px; flex-wrap:wrap}
.tempo-btn{
  width:34px; height:34px; flex:0 0 auto; cursor:pointer; border-radius:11px;
  background:rgba(255,236,205,.045); border:1px solid rgba(212,165,116,.16); color:var(--ink);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font:400 20px/1 "Space Grotesk",sans-serif; display:flex; align-items:center; justify-content:center;
}
.tempo-btn:active{transform:scale(.9)}
.tempo-val{min-width:78px; text-align:center; font:400 11px "Space Mono",monospace; letter-spacing:.1em; color:var(--dim)}
.tempo-val b{font-family:"Anton",sans-serif; font-weight:400; font-size:18px; color:var(--ink); letter-spacing:.02em; margin-right:4px}
/* a muted instrument: dimmed card, red mute toggle — it's dropped from the grid until unmuted */
.slot.muted{opacity:.55}
.slot.muted .slot-vis{filter:grayscale(.75)}
.ibtn.mute-tog.on{background:var(--red); border-color:var(--red); color:#fff}
/* band cards carry 4 actions (film · upload · wind-up · mute) — shrink them to fit, wrap if truly narrow */
#band-kit .slot{padding:11px}
#band-kit .slot-vis{width:64px}
#band-kit .slot-acts{gap:6px; flex-wrap:wrap; justify-content:flex-end}
#band-kit .slot-acts .ibtn{width:36px; height:36px; border-radius:11px}
#band-kit .slot-acts .ibtn svg{width:17px; height:17px}
.ibtn.windup-tog.on{background:var(--grad); border-color:transparent; color:#1A1206}
.ibtn.windup-tog.off{opacity:.4} /* master wind-up is off → per-instrument toggles are dimmed */
.band-cell{position:relative; overflow:hidden; background:#14141F}
.band-cell video,.band-cell .poster{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
/* poster = the frozen onset still; the live <video> sits on top and only shows while it actually plays */
.band-cell .poster{z-index:0}
.band-cell video{z-index:1}
.band-cell.front video,.band-cell.front .poster{transform:scaleX(-1)}
/* SOLO: one full-frame clip at a time — only the spotlight (currently-sounding) cell shows */
#band-grid.solo{display:block; position:relative}
#band-grid.solo .band-cell{position:absolute; inset:0; opacity:0; pointer-events:none}
#band-grid.solo .band-cell.spotlight{opacity:1; pointer-events:auto} /* only the visible clip takes the tap in solo */
.band-cell{cursor:pointer} /* tap a video to feature it — it stays clear / wins the cut when the beat gets busy */
#band-feat-hint{text-align:center; color:var(--faint); margin:-6px 0 12px}
/* FEATURE: the pinned cell loops continuously + is marked with an inset ring + ★ (live UI only; not in the export) */
.band-cell.feat{box-shadow:inset 0 0 0 2px var(--lav); z-index:2}
.band-cell.feat::after{content:'★'; position:absolute; top:8px; right:10px; font-size:14px; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.65); pointer-events:none}
.slot.is-featured{border-color:color-mix(in srgb, var(--lav) 60%, transparent); box-shadow:0 0 0 1px color-mix(in srgb, var(--lav) 45%, transparent)}
.band-cell.idle-tile{display:flex; align-items:center; justify-content:center; background:#101019}
.band-cell.idle-tile .badum{width:46%; max-width:90px; opacity:.85}
#band-transport{display:flex; align-items:center; justify-content:center; gap:22px; margin:4px 0 14px}
#band-mute.on{background:var(--red); border-color:var(--red); color:#fff}
#band-export-hint{text-align:center; color:var(--faint); margin:8px 2px 2px}
#band-export-hint span{white-space:nowrap}   /* wrap at the · separators, never mid-name */
/* intro-clip control — sits above the export buttons */
#band-intro-row{display:flex; align-items:center; justify-content:center; gap:8px; margin:0 auto 10px; flex-wrap:wrap}
#band-intro-row .ibtn{width:38px; height:38px}
/* length + energy chips (build params, exposed in the band) */
#band-shape{display:flex; gap:14px; justify-content:center; align-items:center; margin:0 auto 12px; flex-wrap:wrap}
#band-shape .chips{flex:0 1 auto}
/* hook caption editor */
#band-hook-row{margin:0 0 12px}
#band-hook-input{
  width:100%; padding:13px 15px; border-radius:13px; color:var(--ink);
  background:rgba(255,236,205,.05); border:1px solid rgba(212,165,116,.2);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font:600 14px "Space Grotesk",sans-serif; letter-spacing:.01em; margin-bottom:9px;
}
#band-hook-input::placeholder{color:var(--faint)}
#band-hook-input:focus{outline:none; border-color:rgba(212,165,116,.5)}
/* one EXPORT → SHARE / SAVE result row (both reuse the single render) */
#band-result{display:flex; flex-wrap:wrap; gap:10px; align-items:stretch}
#band-review{flex-basis:100%; width:100%; max-width:190px; margin:0 auto 2px; aspect-ratio:9/16; object-fit:cover; border-radius:14px; border:1px solid rgba(212,165,116,.22); box-shadow:0 8px 30px rgba(0,0,0,.5); display:block; background:#0c0a07; cursor:pointer}
#band-review.hidden{display:none}
#band-result .cta{flex:1 1 100%; margin-top:0}
#band-result .ghost-btn{flex:1 1 40%; min-width:120px; margin-top:0; display:flex; align-items:center; justify-content:center}
#band-caption-fallback{flex-basis:100%; width:100%; height:88px; margin-top:2px; padding:10px 12px; border-radius:12px; background:rgba(255,236,205,.05); border:1px solid rgba(212,165,116,.18); color:#EDE6D8; font:12px/1.45 "Space Mono", monospace; resize:none; -webkit-user-select:all; user-select:all}
#band-caption-fallback.hidden{display:none}

/* my tracks shelf */
#tracks-shelf{margin-top:24px}
#tracks-shelf .shelf-head{color:var(--dim); letter-spacing:.18em; margin:0 2px 10px}
#shelf-strip{display:flex; gap:12px; overflow-x:auto; padding:2px 2px 8px; scrollbar-width:none}
#shelf-strip::-webkit-scrollbar{display:none}
.shelf-card{
  position:relative; flex:0 0 auto; width:118px; padding:0; cursor:pointer; text-align:left;
  background:none; border:0;
}
.shelf-cover{width:118px; height:118px; border-radius:15px; display:block; box-shadow:0 4px 16px rgba(0,0,0,.45), 0 0 0 1px var(--line)}
.shelf-card:active .shelf-cover{transform:scale(.96); transition:transform .1s}
.shelf-name{font:700 12px "Space Grotesk",sans-serif; letter-spacing:.04em; color:var(--ink); margin-top:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:118px}
.shelf-meta{font-size:9px; color:var(--faint); margin-top:2px}
.shelf-del{
  position:absolute; top:6px; right:6px; width:24px; height:24px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(8,8,14,.7); color:#fff; font:400 16px/1 "Space Grotesk",sans-serif; backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
}

/* rename sheet */
#rename-input{
  width:100%; padding:14px 16px; margin-bottom:12px; border-radius:13px;
  background:var(--panel2); border:1px solid var(--line2); color:var(--ink);
  font:500 16px "Space Grotesk",sans-serif; letter-spacing:.04em; -webkit-user-select:text; user-select:text;
}
#rename-input:focus{outline:none; border-color:var(--cyan)}

/* badum the parrot */
.badum{width:64px; pointer-events:none}
.badum svg{display:block; width:100%; overflow:visible}
.badum .bd-all, .badum .bd-jaw, .badum .bd-c1, .badum .bd-c2, .badum .bd-c3, .badum .bd-lid, .badum .bd-t{transform-box:fill-box}
.bd-all{transform-origin:50% 78%; transition:transform .3s cubic-bezier(.3,1.4,.4,1)}
.bd-c1,.bd-c2,.bd-c3{transform-origin:100% 100%; transition:transform .3s cubic-bezier(.3,1.4,.4,1)}
.bd-jaw{transform-origin:8% 15%; transition:transform .22s cubic-bezier(.3,1.4,.4,1)}
.bd-lid{transform-origin:50% 0%; transform:scaleY(0); animation:bdblink 4.8s infinite}
@keyframes bdblink{0%,93%,100%{transform:scaleY(0)}95%,97%{transform:scaleY(1)}}
.badum.idle .bd-all{animation:bdbob 3.4s ease-in-out infinite}
@keyframes bdbob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.badum.listen .bd-all{transform:rotate(-8deg)}
.badum.listen .bd-c1{transform:rotate(-9deg)}
.badum.listen .bd-c2{transform:rotate(-6deg)}
.badum.listen .bd-c3{transform:rotate(-4deg)}
.badum.vibe .bd-all{animation:bdvibe var(--beat,.55s) ease-in-out infinite}
@keyframes bdvibe{0%,100%{transform:translateY(0) scaleY(1)}35%{transform:translateY(-8px) scaleY(1.03)}70%{transform:translateY(2px) scaleY(.985)}}
.badum.vibe .bd-t1{animation:bdtail calc(var(--beat,.55s)*2.5) ease-in-out infinite}
.badum.vibe .bd-t2{animation:bdtail calc(var(--beat,.55s)*2.5) ease-in-out calc(var(--beat,.55s)*.5) infinite}
.badum.vibe .bd-t3{animation:bdtail calc(var(--beat,.55s)*2.5) ease-in-out calc(var(--beat,.55s)*1) infinite}
.badum.vibe .bd-t4{animation:bdtail calc(var(--beat,.55s)*2.5) ease-in-out calc(var(--beat,.55s)*1.5) infinite}
.badum.vibe .bd-t5{animation:bdtail calc(var(--beat,.55s)*2.5) ease-in-out calc(var(--beat,.55s)*2) infinite}
@keyframes bdtail{0%,100%{opacity:1}50%{opacity:.45}}
.badum.drop .bd-all{animation:bdvibe calc(var(--beat,.5s)*.5) ease-in-out infinite}
.badum.drop .bd-jaw{transform:rotate(18deg)}
.badum.drop .bd-c1{transform:rotate(-20deg)}
.badum.drop .bd-c2{transform:rotate(-14deg)}
.badum.drop .bd-c3{transform:rotate(-9deg)}
#badum-ob{width:88px; margin:0 auto -4px}
#guide-row{display:flex; align-items:flex-start; gap:10px; width:100%; max-width:340px; margin:2px auto 0}
#badum-rec{width:56px; flex:0 0 auto; margin-top:-8px}
#guide-row #rec-tip{
  flex:1; text-align:left; max-width:none; margin:6px 0 0; position:relative;
  background:#1A1A28; border:1px solid #2A2A3C; border-radius:13px; padding:10px 12px;
}
#guide-row #rec-tip::before{content:""; position:absolute; left:-7px; top:16px; border:7px solid transparent; border-right-color:#1A1A28; border-left:0}
.badum.mini{position:absolute; top:-58px; right:16px; width:46px}
.view-head{position:relative}
.badum.tiny{position:absolute; top:-14px; right:2px; width:38px}
#badum-bubble{
  position:absolute; top:-46px; right:72px; z-index:2; max-width:210px;
  background:#1A1A28; border:1px solid #2A2A3C; border-radius:12px; padding:8px 12px;
  font:700 11px "Space Grotesk",sans-serif; letter-spacing:.08em; color:var(--ink);
  animation:chippop .3s cubic-bezier(.34,1.56,.64,1);
}
#badum-bubble::after{
  content:""; position:absolute; right:-7px; top:16px;
  border:7px solid transparent; border-left-color:#1A1A28; border-right:0;
}
#guide-row #rec-tip b{display:block; color:var(--ink); margin-bottom:4px; letter-spacing:.08em}

/* Badum always faces INTO the app: right-edge perches are mirrored */
#badum-kit svg, #badum-player svg{transform:scaleX(-1)}
#badum-flyer.flipped svg{transform:scaleX(-1)}

/* flight */
#badum-flyer{position:fixed; left:0; top:0; z-index:62; pointer-events:none}
#badum-flyer svg{display:block; width:100%; overflow:visible}
#badum-flyer .bd-all, #badum-flyer .bd-wing, #badum-flyer .bd-lid{transform-box:fill-box}
#badum-flyer .bd-lid{transform-origin:50% 0%; transform:scaleY(0)}
#badum-flyer.fly .bd-all{transform:rotate(-13deg); transform-origin:50% 50%}
#badum-flyer.fly .bd-wing{transform-origin:25% 12%; animation:bdflap .16s ease-in-out infinite alternate}
@keyframes bdflap{from{transform:rotate(8deg)}to{transform:rotate(-42deg)}}
.fly-target{animation:flytarget 1.1s ease 2}
@keyframes flytarget{0%,100%{box-shadow:none}40%{box-shadow:0 0 0 3px rgba(255,77,141,.65), 0 0 26px rgba(255,77,141,.5)}}

/* video export */
#video-overlay{
  position:fixed; inset:0; z-index:76; background:rgba(6,5,4,.94);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  padding:24px;
}
#video-canvas{
  height:min(62vh,560px); aspect-ratio:9/16; width:auto;
  border-radius:18px; border:1px solid rgba(212,165,116,.22);
  box-shadow:0 10px 60px rgba(0,0,0,.6), 0 0 50px rgba(212,165,116,.18);
}
/* premium determinate render bar */
#video-bar{width:min(62vh*9/16,300px); height:4px; border-radius:2px; background:rgba(212,165,116,.14); overflow:hidden}
#video-fill{height:100%; width:0%; background:var(--grad); border-radius:2px; transition:width .25s linear}
#video-status{color:var(--gold); letter-spacing:.18em}
#video-hint{color:rgba(169,156,134,.7); font-size:12px; letter-spacing:.1em; margin-top:-6px; text-align:center}
#video-cancel{width:auto; padding:12px 26px; margin-top:0}

/* toast */
#toast{
  position:fixed; bottom:calc(96px + env(safe-area-inset-bottom)); left:50%; transform:translate(-50%,14px) scale(.95);
  z-index:70; max-width:88%; padding:11px 18px; border-radius:999px;
  background:rgba(26,26,42,.96); border:1px solid var(--line2); color:var(--ink);
  font:600 12.5px "Space Grotesk",sans-serif; letter-spacing:.05em; text-align:center;
  opacity:0; pointer-events:none; transition:all .32s cubic-bezier(.3,1.4,.4,1);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
#toast.show{opacity:1; transform:translate(-50%,0) scale(1)}

@media (min-width:560px){
  body{font-size:16px}
  #pad-grid.g4 .pad, #pad-grid.g6 .pad{max-height:200px}
}