:root{
  --bg:#E3E1DC; --surface:#F2F0EC; --ink:#18171B; --muted:#5F5B64; --line:#CBC6BE;
  --amber:#B4741A; --amber-ink:#FFFFFF; --ox:#9E2F2A;
  --stage:#17161D; --stage-2:#24212C; --stage-ink:#F0E6D2; --stage-muted:#9C93A3; --glow:#E8A84A;
  --p1:#2B7A82; --p1-ink:#FFFFFF; --p2:#8E4A8C; --p2-ink:#FFFFFF;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#131217; --surface:#1D1C22; --ink:#EEE8DD; --muted:#9A95A2; --line:#302E37;
    --amber:#E2A549; --amber-ink:#1A1206; --ox:#D3574D; color-scheme:dark;
    --p1:#5DB5BC; --p1-ink:#06181A; --p2:#C98DC6; --p2-ink:#1E0B1D;
  }
}
:root[data-theme="dark"]{
  --bg:#131217; --surface:#1D1C22; --ink:#EEE8DD; --muted:#9A95A2; --line:#302E37;
  --amber:#E2A549; --amber-ink:#1A1206; --ox:#D3574D; color-scheme:dark;
  --p1:#5DB5BC; --p1-ink:#06181A; --p2:#C98DC6; --p2-ink:#1E0B1D;
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0; background:var(--bg); color:var(--ink); font-family:"Oswald","Arial Narrow",system-ui,sans-serif; font-weight:400;
  font-size:16px; line-height:1.4; -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none}
.app{max-width:540px; margin:0 auto; padding:12px 16px 40px}
button{font:inherit; color:inherit; touch-action:manipulation; cursor:pointer}
button:focus-visible{outline:2px solid var(--amber); outline-offset:3px}
[hidden]{display:none !important}
.serif{font-family:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif; font-style:italic}

header{display:flex; align-items:flex-end; justify-content:space-between; margin:4px 2px 12px}
.logo{margin:0; font-family:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif; font-style:italic; font-weight:700; font-size:34px; line-height:1}
.logo small{display:block; font-family:"Oswald",system-ui,sans-serif; font-style:normal; font-weight:400; font-size:14px; color:var(--muted); margin-top:4px; letter-spacing:.02em}
.rec{display:flex; align-items:center; gap:9px; height:44px; padding:0 18px 0 14px; border-radius:22px; border:1px solid var(--line); background:var(--surface);
  font-weight:500; font-size:16px; font-variant-numeric:tabular-nums}
.rec i{width:12px; height:12px; border-radius:50%; background:var(--ox)}
.rec.on{background:var(--ox); border-color:var(--ox); color:#fff}
.rec.on i{background:#fff; border-radius:2px}

.intro{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px 18px; margin-bottom:12px}
.intro h2{margin:0 0 6px; font-family:"Bodoni Moda",Georgia,serif; font-style:italic; font-weight:600; font-size:22px}
.intro ol{margin:0 0 14px; padding-left:20px; color:var(--muted)}
.intro li{margin:4px 0} .intro li b{color:var(--ink); font-weight:500}

/* The club */
.stage{position:relative; overflow:hidden; border-radius:20px; color:var(--stage-ink); padding:16px 16px 14px;
  background:radial-gradient(90% 60% at 70% -5%, rgba(232,168,74,.28), rgba(232,168,74,0) 65%), linear-gradient(170deg,var(--stage-2),var(--stage) 70%)}
.smoke{position:absolute; inset:-30%; pointer-events:none; opacity:.5;
  background:radial-gradient(35% 22% at 30% 60%, rgba(240,230,210,.10), transparent 70%), radial-gradient(30% 18% at 70% 40%, rgba(240,230,210,.08), transparent 70%), radial-gradient(40% 25% at 55% 80%, rgba(240,230,210,.07), transparent 70%);
  filter:blur(8px); animation:drift 38s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate(-4%,3%) rotate(0deg)}to{transform:translate(5%,-4%) rotate(8deg)}}
.club{display:flex; justify-content:space-between; align-items:baseline; position:relative; font-size:13px; color:var(--stage-muted)}
.club b{font-family:"Bodoni Moda",Georgia,serif; font-style:italic; font-weight:600; font-size:17px; color:var(--stage-ink)}
.now{position:relative; display:flex; align-items:flex-end; gap:14px; margin:6px 0 10px; min-height:84px}
.chord{font-family:"Bodoni Moda","Didot",Georgia,serif; font-style:italic; font-weight:700; font-size:clamp(64px,20vw,92px); line-height:.9; color:var(--glow); white-space:nowrap}
.side{padding-bottom:8px; display:flex; flex-direction:column; gap:7px; font-size:14px; color:var(--stage-muted)}
.side b{color:var(--stage-ink); font-weight:500}
.beats{display:flex; gap:6px} .beats i{width:9px; height:9px; border-radius:50%; background:rgba(240,230,210,.18)} .beats i.on{background:var(--glow)}
.band{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.mem{border:0; background:rgba(240,230,210,.05); border-radius:12px; padding:9px 4px 8px; color:var(--stage-ink); display:flex; flex-direction:column; align-items:center; gap:6px; position:relative}
.mem .meter{width:30px; height:40px; border-radius:4px; background:rgba(240,230,210,.08); position:relative; overflow:hidden}
.mem .lvl{position:absolute; left:0; right:0; bottom:0; height:0; transition:height .5s ease-out;
  background:repeating-linear-gradient(to top, var(--glow) 0 4px, transparent 4px 6px)}
.mem .nm{font-size:14px; font-weight:500; line-height:1.1}
.mem .st{font-size:11px; color:var(--stage-muted); line-height:1}
.mem.out{opacity:.55} .mem.out .lvl{display:none}
.prog{position:relative; display:flex; gap:3px; margin-top:12px}
.blk{flex-basis:0; height:22px; border-radius:4px; background:rgba(240,230,210,.07); font-size:11px; line-height:22px; text-align:center; overflow:hidden; white-space:nowrap; color:var(--stage-muted)}
.blk.on{background:var(--glow); color:#1A1206}
.count{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; opacity:0;
  font-family:"Bodoni Moda",Georgia,serif; font-style:italic; font-weight:700; font-size:120px; color:var(--glow)}
.count.show{animation:pop .55s ease-out}
@keyframes pop{0%{opacity:0; transform:scale(.8)}25%{opacity:1; transform:scale(1.04)}100%{opacity:0; transform:scale(1)}}
.flash{position:absolute; inset:0; pointer-events:none; background:rgba(232,168,74,.18); opacity:0}
.flash.show{animation:fl .35s ease-out}
@keyframes fl{0%{opacity:1}100%{opacity:0}}

/* Keys */
.keys{display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin-top:14px; touch-action:none}
.key{border:1px solid var(--line); background:var(--surface); border-radius:10px; height:84px; display:flex; flex-direction:column; justify-content:flex-end; align-items:center;
  padding-bottom:8px; font-size:11px; color:var(--muted); touch-action:none; transition:transform .06s, box-shadow .15s, background .15s}
.key.good{background:linear-gradient(180deg, color-mix(in srgb, var(--amber) 26%, var(--surface)), var(--surface)); border-color:var(--amber); color:var(--ink)}
.key.good::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--amber); margin-bottom:auto; margin-top:12px; box-shadow:0 0 10px var(--amber)}
.key.on{transform:translateY(2px); background:var(--amber); color:var(--amber-ink); border-color:var(--amber); box-shadow:0 0 22px color-mix(in srgb, var(--amber) 60%, transparent)}
.key.on::before{background:var(--amber-ink); box-shadow:none}
.rowlabel{display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin:6px 2px 0}
.tip{min-height:44px; margin:8px 2px 0; color:var(--muted); font-size:15px}

/* Moves */
.transport{display:grid; grid-template-columns:84px 1fr; gap:10px; margin-top:6px; align-items:stretch}
.play{border:0; border-radius:18px; background:var(--amber); color:var(--amber-ink); display:grid; place-items:center}
.play svg{width:30px; height:30px}
.moves{display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
.move{border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:8px 6px; text-align:left; display:flex; flex-direction:column; gap:1px; min-height:58px}
.move b{font-weight:500; font-size:15px; line-height:1.15}
.move span{font-size:11.5px; color:var(--muted); line-height:1.2}
.move:disabled{opacity:.38; cursor:default}
.move[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.move[aria-pressed="true"] span{color:inherit; opacity:.7}

.take{margin-top:16px; background:var(--surface); border:1px solid var(--amber); border-radius:16px; padding:16px}
.take h2{margin:0 0 10px; font-family:"Bodoni Moda",Georgia,serif; font-style:italic; font-weight:600; font-size:24px}
.take audio{width:100%; margin-bottom:12px}
.take .row{display:flex; gap:8px; flex-wrap:wrap}
.btn{border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:11px 18px; font-weight:500; font-size:16px}
.btn.main{background:var(--amber); color:var(--amber-ink); border-color:var(--amber)}
.msg{margin:10px 0 0; color:var(--muted); font-size:14px}

section.sec{margin-top:26px}
.sec h2{margin:0 0 2px; font-family:"Bodoni Moda",Georgia,serif; font-style:italic; font-weight:600; font-size:22px}
.sec p.sub{margin:0 0 10px; color:var(--muted); font-size:14px}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:6px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
.opt{border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:10px 12px; text-align:left; display:flex; flex-direction:column; gap:1px}
.opt b{font-weight:500; font-size:16px; line-height:1.2}
.opt span{font-size:12px; color:var(--muted); line-height:1.25}
.opt[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.opt[aria-pressed="true"] span{color:inherit; opacity:.7}
.opt:disabled{opacity:.4}
.seg{display:flex; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface)}
.seg button{flex:1; border:0; background:transparent; padding:11px; font-weight:500; font-size:16px}
.seg button + button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
.licks{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:12px}
.lick{border:1px solid var(--amber); background:transparent; border-radius:12px; padding:9px 10px; text-align:left; display:flex; flex-direction:column; gap:1px; min-height:56px; transition:background .1s}
.lick b{font-weight:500; font-size:15px; line-height:1.15} .lick span{font-size:11.5px; color:var(--muted); line-height:1.2}
.lick:active,.lick.on{background:color-mix(in srgb, var(--amber) 22%, transparent)}
.key.best{box-shadow:inset 0 0 0 2px var(--amber), 0 0 0 2px var(--amber)}
.coach{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--stage-ink)}
.coach i{width:8px; height:8px; border-radius:50%; background:var(--stage-muted)}
.coach.go i{background:var(--glow); box-shadow:0 0 8px var(--glow)}
.slider{display:flex; align-items:center; gap:12px; margin-top:12px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--surface)}
.slider span{font-weight:500; white-space:nowrap} .slider input{flex:1; accent-color:var(--amber); height:32px} .slider output{width:2.2em; text-align:right; color:var(--muted); font-variant-numeric:tabular-nums}
.credit{margin-top:30px; color:var(--muted); font-size:12px; text-align:center}
/* Several instruments: one pad set per instrument, each in its own color */
.pads{margin-top:14px; display:flex; flex-direction:column; gap:14px}
.pads .keys{margin-top:0}
.strip[data-c="1"]{--amber:var(--p1); --amber-ink:var(--p1-ink)}
.strip[data-c="2"]{--amber:var(--p2); --amber-ink:var(--p2-ink)}
.strip-head{display:none}
.multi .strip-head{display:flex; align-items:center; gap:8px; margin:0 0 6px}
.strip-head .pick{display:flex; align-items:center; gap:8px; min-height:36px; border:0; background:none; padding:0 2px; font-weight:500; font-size:15px; color:var(--muted)}
.strip-head .pick i{width:10px; height:10px; border-radius:50%; background:var(--amber); flex:none}
.strip-head .tag{font-size:12px; color:var(--muted); display:none}
.strip.on .strip-head .pick{color:var(--ink)}
.strip.on .strip-head .tag{display:inline}
.strip-head .rm{margin-left:auto; width:36px; height:36px; flex:none; display:grid; place-items:center; padding:0; border-radius:18px; border:1px solid var(--line); background:var(--surface); color:var(--muted); font-size:20px; line-height:1}
.multi .strip.on .keys{outline:2px solid var(--amber); outline-offset:5px; border-radius:12px}
.addpart{display:block; width:100%; margin-top:10px; min-height:44px; border:1px dashed var(--line); background:transparent; border-radius:12px; padding:8px 12px; color:var(--muted); font-weight:500; font-size:15px}

/* Header buttons, intro choice */
.hbtns{display:flex; align-items:center; gap:8px}
.ibtn{width:44px; height:44px; flex:none; border-radius:22px; border:1px solid var(--line); background:var(--surface); display:grid; place-items:center; padding:0; font-size:22px; line-height:1}
.ibtn svg{width:20px; height:20px}
.ibtn.q{font-family:"Bodoni Moda",Georgia,serif; font-style:italic; font-weight:700; font-size:21px}
.intro p{margin:0 0 14px; color:var(--muted)}
.intro .row{display:flex; gap:8px; flex-wrap:wrap}
kbd:empty{display:none !important}

/* Settings sheet */
.sheet{border:1px solid var(--line); border-radius:18px; background:var(--bg); color:var(--ink); padding:0; width:min(560px, calc(100vw - 24px)); max-height:min(88vh, 880px); overflow:auto; overscroll-behavior:contain}
.sheet::backdrop{background:rgba(10,9,12,.55)}
.sheet-head{position:sticky; top:0; z-index:1; display:flex; justify-content:space-between; align-items:center; padding:12px 14px 10px 20px; background:var(--bg); border-bottom:1px solid var(--line)}
.sheet-head h2{margin:0; font-family:"Bodoni Moda",Georgia,serif; font-style:italic; font-weight:600; font-size:24px}
.sset{padding:2px 20px 18px}
.sset + .sset{border-top:1px solid var(--line)}
.sset h3{margin:14px 0 2px; font-weight:500; font-size:18px}
.sset .sub{margin:2px 0 4px; color:var(--muted); font-size:14px}
.sset .slider{margin-top:8px}
.sset .slider span{flex:0 0 8.6em}
.krow-label{margin:12px 0 0; font-size:13px; color:var(--muted)}
.kgrid{display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin-top:6px}
.bind{border:1px solid var(--line); background:var(--surface); border-radius:10px; min-height:44px; padding:4px; font-weight:500; font-size:15px; font-variant-numeric:tabular-nums}
.bind.none{color:var(--muted); font-weight:400}
.bind.wait{border-color:var(--amber); background:color-mix(in srgb, var(--amber) 18%, var(--surface)); font-size:11px; line-height:1.15}
.lbinds{display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; margin-top:6px}
.lbind{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:15px}
.lbind .bind{min-width:72px}
.bindmsg{min-height:20px; margin:10px 0 8px; font-size:14px; color:var(--muted)}
@media (hover:none) and (pointer:coarse){ .kbonly{display:none} }

/* Guided tour */
.tour-spot{position:fixed; z-index:50; border-radius:16px; box-shadow:0 0 0 9999px rgba(10,9,12,.62); outline:2px solid var(--glow); pointer-events:none; transition:top .25s ease, left .25s ease, width .25s ease, height .25s ease}
.tour-card{position:fixed; z-index:51; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:16px; padding:14px 16px 12px; box-shadow:0 14px 44px rgba(0,0,0,.4); transition:top .25s ease, left .25s ease}
.tour-card .n{margin:0; font-size:12px; color:var(--muted); letter-spacing:.05em}
.tour-card h3{margin:2px 0 6px; font-family:"Bodoni Moda",Georgia,serif; font-style:italic; font-weight:600; font-size:21px}
.tour-card .d{margin:0 0 12px; font-size:15px; line-height:1.4; color:var(--muted)}
.tour-nav{display:flex; gap:8px; align-items:center}
.tour-nav .skip{margin-right:auto; border:0; background:none; padding:10px 2px; color:var(--muted); font-size:14px; text-decoration:underline; text-underline-offset:3px}
.tour-nav .btn{padding:9px 16px}

/* Adaptive layout: phone first, then tablet, desktop, and short landscape screens */
.deck,.setup{min-width:0}
kbd{display:none}
@media (hover:hover) and (pointer:fine){
  .key,.lick,.move,.play{position:relative}
  .key kbd,.lick kbd,.move kbd,.play kbd{display:block; position:absolute; font:500 10px/1 "Oswald",system-ui,sans-serif; letter-spacing:.04em; color:var(--muted); opacity:.8}
  .key kbd{top:7px; left:8px} .lick kbd,.move kbd{top:8px; right:9px}
  .play kbd{bottom:8px; left:0; right:0; text-align:center; color:var(--amber-ink)}
  .move[aria-pressed="true"] kbd{color:inherit}
  .key.on kbd{color:inherit}
  .key:hover{border-color:var(--amber)}
  .move:not(:disabled):hover,.opt:not(:disabled):hover,.btn:hover,.rec:hover,.seg button:hover,.addpart:hover,.strip-head .rm:hover{border-color:var(--muted)}
  .strip-head .pick:hover{color:var(--ink)}
}
@media (max-width:420px){
  .app{padding:10px 12px 32px}
  .logo{font-size:30px} .logo small{font-size:12px; max-width:9.5em}
  .hbtns{gap:6px} .ibtn{width:40px; height:40px} .rec{height:40px; padding:0 14px 0 12px; gap:7px}
  .lbinds{grid-template-columns:1fr}
  .blk{font-size:10px; letter-spacing:-.02em}
  .keys{gap:5px} .key{height:78px}
}
@media (max-width:359px){
  header{flex-wrap:wrap; gap:10px}
  .transport{grid-template-columns:64px 1fr}
  .moves,.licks,.grid3{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:700px){
  .app{max-width:780px; padding:20px 28px 48px}
  .logo{font-size:40px}
  .keys{gap:8px} .key{height:104px; font-size:13px; border-radius:12px}
  .transport{grid-template-columns:100px 1fr}
  .setup{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:24px; align-items:start}
  .setup .credit{grid-column:1/-1}
}
@media (min-width:1024px){
  .app{max-width:1280px; display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,380px); column-gap:36px; align-items:start; padding:20px 32px 48px}
  .app>header{grid-column:1/-1}
  .setup{display:block; position:sticky; top:16px; max-height:calc(100vh - 32px); overflow-y:auto; overscroll-behavior:contain;
    padding:0 6px 16px 2px; scrollbar-width:thin; scrollbar-color:var(--line) transparent}
  .setup .sec:first-child{margin-top:4px}
  .chord{font-size:104px}
  .key{height:112px}
}
@media (min-width:1440px){
  .app{grid-template-columns:minmax(0,1fr) 420px}
}
@media (orientation:landscape) and (max-height:500px){
  .band{display:none}
  .stage{padding:10px 14px}
  .now{min-height:0; margin:2px 0 6px}
  .chord{font-size:56px}
  .key{height:68px}
}
@media (prefers-reduced-motion:reduce){ .tour-spot,.tour-card{transition:none} .smoke{animation:none} .count.show{animation:none; opacity:1} .flash.show{animation:none} .mem .lvl{transition:none} }