/* Layout idea: a one-screen groovebox that grows with the player.
   Home is a board of loop pads (rows = instruments, columns = song sections). Tap a pad to play it,
   hold it to open its step grid. Anything with many controls opens in a sheet that slides up over
   the board, so the home screen stays small. Each track owns a colour. */
:root{
  --body:#e7e3da; --panel:#f5f2ea; --ink:#1d1b22; --soft:#6a6570; --line:#c9c3b6;
  --cell:#dad5c9; --cell-beat:#cbc5b6;
  --t-drums:#e2481f; --t-bass:#2757d6; --t-lead:#c98a00; --t-pad:#12876a;
  --on-ink:#ffffff; --keyw:#faf8f2; --keyb:#26242c; --scrim:rgba(20,18,24,.38);
  --display:"Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --body:#18171c; --panel:#232128; --ink:#f2eee5; --soft:#a39dab; --line:#3b3743;
    --cell:#322f39; --cell-beat:#403c49;
    --t-drums:#ff6a3d; --t-bass:#5b86ff; --t-lead:#f2b632; --t-pad:#2fc49d;
    --on-ink:#16151a; --scrim:rgba(0,0,0,.55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --body:#18171c; --panel:#232128; --ink:#f2eee5; --soft:#a39dab; --line:#3b3743;
  --cell:#322f39; --cell-beat:#403c49;
  --t-drums:#ff6a3d; --t-bass:#5b86ff; --t-lead:#f2b632; --t-pad:#2fc49d;
  --on-ink:#16151a; --scrim:rgba(0,0,0,.55);
  color-scheme: dark;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%;margin:0}
body{background:var(--body);color:var(--ink);font-family:var(--mono);font-size:13px;line-height:1.35;
  overflow:hidden;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
button,select,input{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{opacity:.4;cursor:default}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.app{height:100%;max-width:900px;margin:0 auto;padding:10px 16px 12px;display:flex;flex-direction:column;gap:8px}
.main{flex:1 1 0;min-height:0;display:flex;flex-direction:column;gap:8px}

/* transport */
.top{flex:none;display:flex;align-items:center;gap:8px}
h1{font-family:var(--display);font-weight:800;font-size:22px;line-height:1;margin:0;letter-spacing:-0.03em}
.songbtn{margin-left:auto;min-width:0;height:36px;border:1px solid var(--line);background:var(--panel);border-radius:18px;
  padding:0 12px;font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.play{flex:none;min-width:84px;height:44px;border:0;border-radius:22px;background:var(--ink);color:var(--body);
  font-family:var(--display);font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;gap:8px}
.play .ico{width:0;height:0;border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}
.play.going{background:var(--t-drums);color:var(--on-ink)}
.play.going .ico{width:11px;height:11px;border:0;background:currentColor;border-radius:2px}
.banner{flex:none;background:var(--t-drums);color:var(--on-ink);padding:8px 12px;border-radius:10px}

/* shared small parts */
.row{flex:none;display:flex;gap:6px;align-items:center;min-width:0}
.row.wrap{flex-wrap:wrap}
.lbl{flex:none;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.btn{flex:1 1 0;min-width:0;height:36px;border:1px solid var(--ink);background:transparent;border-radius:9px;padding:0 8px;
  font-weight:600;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn.fill,.btn[aria-pressed="true"]{background:var(--ink);color:var(--panel)}
.btn.quiet{border-color:var(--line);font-weight:400}
.btn.small{height:32px}
.btn.fix{flex:0 0 auto;padding:0 12px}
.btn.more{flex:0 0 60px}
.chip{flex:1 1 auto;min-width:0;height:30px;border:1px solid var(--line);background:transparent;border-radius:8px;padding:0 6px;
  font-size:11.5px;white-space:nowrap;overflow:hidden}
.chip.active{background:var(--ink);border-color:var(--ink);color:var(--panel);font-weight:600}
.chip.mine{border-style:dashed}
.chip.custom{flex:0 0 auto;display:flex;align-items:center}
.hint{margin:0;color:var(--soft);font-size:11.5px;line-height:1.35}
.val{font-weight:600;font-variant-numeric:tabular-nums;font-size:12px}
input[type=range]{width:100%;accent-color:var(--ink);margin:0;height:22px}

/* home: the loop board */
.pads{flex:1 1 0;min-height:0;display:grid;grid-template-columns:78px repeat(4,minmax(0,1fr));
  grid-template-rows:30px repeat(var(--n),minmax(38px,64px));gap:5px;align-content:start}
.scene{min-width:0;border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:0;font-family:var(--display);font-weight:800;font-size:14px}
.scene.live{background:var(--ink);border-color:var(--ink);color:var(--panel)}
.tl{min-width:0;border:1px solid var(--line);border-left:5px solid var(--tc);background:var(--panel);border-radius:9px;padding:0 7px;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:1px;text-align:left;overflow:hidden}
.tl b{font-size:12px;white-space:nowrap}
.tl small{font-size:10px;color:var(--soft);white-space:nowrap}
.pad{position:relative;min-width:0;min-height:0;border:1px dashed var(--line);border-radius:9px;background:transparent;color:var(--tc);padding:5px;
  overflow:hidden;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  display:flex;align-items:center;justify-content:center}
.pad.has{border-style:solid;background:var(--cell)}
.pad.on{background:var(--tc);border-color:var(--tc);color:var(--on-ink)}
.pad.sel{outline:2px solid var(--ink);outline-offset:1px}
.pad svg{width:100%;height:100%;display:block;pointer-events:none}
.pad .plus{color:var(--soft);font-size:18px;line-height:1}
.pad .prog{position:absolute;left:0;bottom:0;height:4px;width:0;background:var(--on-ink);opacity:.85}
.selbar{flex:none;background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--tc);border-radius:12px;padding:10px;
  display:flex;flex-direction:column;gap:8px}
.selbar .what{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.selbar .what b{font-family:var(--display);font-size:15px}
.chordsbtn{display:flex;align-items:center;justify-content:center;gap:8px}
.chordsbtn span{font-weight:400;color:var(--soft)}

/* editor: the step grid for one loop */
.edhead{flex:none;display:flex;align-items:center;gap:8px}
.edtitle{flex:1 1 0;min-width:0;font-family:var(--display);font-weight:800;font-size:16px;display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden}
.edtitle i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--tc)}
.stage{flex:1 1 0;min-height:0;display:flex;align-items:center;background:var(--panel);border:1px solid var(--line);
  border-top:4px solid var(--tc);border-radius:12px;padding:8px}
.grid{flex:1;min-width:0;height:100%;max-height:calc(var(--rows) * 58px + 44px);display:grid;
  grid-template-columns:40px repeat(16,minmax(0,1fr));grid-template-rows:34px repeat(var(--rows),minmax(0,1fr));
  gap:3px;touch-action:none;user-select:none;-webkit-user-select:none}
.pg{visibility:hidden;position:relative;border:1px solid var(--line);background:transparent;border-radius:6px;padding:0;font-size:10px;font-weight:600}
.pg.live::after{content:"";position:absolute;right:-3px;top:-3px;width:9px;height:9px;border-radius:50%;background:var(--tc)}
.hd{grid-column:span 4;min-width:0;border:1px solid var(--line);border-bottom:3px solid var(--q);background:transparent;border-radius:6px;
  padding:0 6px;display:flex;align-items:center;justify-content:space-between;gap:4px}
.hd b{font-size:13px}
.hd small{font-size:10px;color:var(--soft)}
.hd.live{background:var(--cell-beat)}
.rl{font-size:11px;color:var(--soft);display:flex;align-items:center;white-space:nowrap;overflow:hidden;min-height:0}
.rl.root{color:var(--ink);font-weight:600}
.rl small{margin-left:4px;font-size:9px;opacity:.7;font-weight:400}
.c{appearance:none;border:0;padding:0;min-width:0;min-height:0;border-radius:5px;background:var(--cell)}
.c.beat{background:var(--cell-beat)}
.c.on{background:var(--tc)}
.c.now{box-shadow:inset 0 0 0 2px var(--ink)}
.c.safe::after{content:"";display:block;width:6px;height:6px;border-radius:50%;margin:0 auto;background:var(--soft);opacity:.75}
.c.safe.on::after{background:var(--on-ink);opacity:1}
@media (max-width:600px){
  .grid{grid-template-columns:40px repeat(8,minmax(0,1fr));gap:4px}
  .grid[data-page="0"] [data-h="1"], .grid[data-page="1"] [data-h="0"]{display:none}
  .pg{visibility:visible}
}
.q-major{--q:var(--t-lead)}.q-minor{--q:var(--t-bass)}.q-dim,.q-aug{--q:var(--soft)}
.tray{flex:none;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px}

/* sheets: bigger controls that slide up over the board */
.sheetwrap{position:fixed;inset:0;z-index:10;display:flex;align-items:flex-end;justify-content:center}
.scrim{position:absolute;inset:0;background:var(--scrim)}
.sheet{position:relative;width:100%;max-width:560px;max-height:calc(100% - 56px);background:var(--panel);border:1px solid var(--line);border-bottom:0;
  border-top:4px solid var(--tc,var(--ink));border-radius:16px 16px 0 0;padding:10px 16px 16px;display:flex;flex-direction:column;gap:9px;overflow:hidden}
.shead{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px}
.shead h2{margin:0;font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:-0.02em}
@media (prefers-reduced-motion:no-preference){
  .sheet{animation:up .16s ease-out}
  @keyframes up{from{transform:translateY(28px);opacity:.5}to{transform:none;opacity:1}}
  .pad.queued{animation:blink .45s steps(2,jump-none) infinite}
  @keyframes blink{from{opacity:1}to{opacity:.45}}
  .c{transition:background-color .06s}
}
.pad.queued{outline:2px dashed var(--tc);outline-offset:1px}

/* sound sheet */
.waves{flex:none;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:5px}
.wave{height:50px;min-width:0;border:1px solid var(--line);background:transparent;border-radius:9px;padding:4px 2px 3px;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;font-size:11px}
.wave svg{width:80%;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.wave.active{background:var(--ink);border-color:var(--ink);color:var(--panel);font-weight:600}
.env{flex:none;display:block;width:100%;height:92px;border:1px solid var(--line);border-radius:10px;background:var(--cell);touch-action:none}
.env .area{fill:var(--tc);opacity:.22}
.env .line{fill:none;stroke:var(--tc);stroke-width:2.5;stroke-linejoin:round}
.env .h{fill:var(--tc);stroke:var(--panel);stroke-width:3;cursor:grab}
.env .hit{fill:transparent;cursor:grab}
.envwords{flex:none;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;font-size:11px}
.envwords span{white-space:nowrap;overflow:hidden}
.envwords b{font-weight:600}
.envwords i{font-style:normal;color:var(--soft)}
.shape{flex:none;display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:10px}
.xy{position:relative;height:118px;border-radius:10px;border:1px solid var(--line);touch-action:none;overflow:hidden;cursor:crosshair;
  background:
    linear-gradient(var(--line) 1px,transparent 1px) 0 0/100% 25%,
    linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/12.5% 100%,
    var(--cell)}
.xy .dot{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:var(--tc);border:3px solid var(--panel);pointer-events:none}
.xy span{position:absolute;font-size:10px;color:var(--soft);pointer-events:none}
.xy .l1{left:6px;bottom:4px}.xy .l2{right:6px;bottom:4px}.xy .l3{left:6px;top:4px}
.side{min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:6px}
.sliders{flex:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 14px}
.sl{min-width:0;height:36px;display:flex;flex-direction:column;justify-content:space-between}
.sl .r{display:flex;justify-content:space-between;align-items:baseline;gap:4px;white-space:nowrap;overflow:hidden}
.sl label{font-size:11px;font-weight:600}
.sl span{font-size:10.5px;color:var(--soft)}
.name{flex:1 1 0;min-width:0;height:32px;border:1px solid var(--line);border-radius:8px;background:transparent;padding:0 8px;font-size:12px}

/* chords sheet */
.palette{flex:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.slots{flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.chord{height:44px;min-width:0;border:1px solid var(--line);border-bottom:3px solid var(--q);background:transparent;border-radius:8px;padding:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.chord b{font-size:13px;line-height:1.2}
.chord small{font-size:9.5px;color:var(--soft);white-space:nowrap;line-height:1.2}
.chord.sel{background:var(--ink);color:var(--panel);border-color:var(--ink);border-bottom-color:var(--q)}
.chord.sel small{color:inherit}
.chord.armed{outline:2px solid var(--ink);outline-offset:1px}
.chord.live{background:var(--cell-beat)}
.piano{flex:none;position:relative;display:flex;gap:1px;height:64px;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--line)}
.piano .w{flex:1;background:var(--keyw)}
.piano .b{position:absolute;top:0;height:60%;width:4.4%;transform:translateX(-50%);background:var(--keyb);border-radius:0 0 3px 3px}
.piano .lit{background:var(--q)}

/* song + add sheets */
.keys{flex:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
.keys .chip{height:34px;font-weight:600}
.scales{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:5px}
.pick{min-width:0;min-height:46px;border:1px solid var(--line);border-left:5px solid var(--tc,var(--line));background:transparent;border-radius:9px;padding:6px 10px;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;text-align:left}
.pick b{font-size:13px}
.pick small{font-size:10.5px;color:var(--soft);line-height:1.3}
.pick.active{background:var(--ink);border-color:var(--ink);color:var(--panel)}
.pick.active small{color:inherit}
.pick .tag{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--tc);font-weight:600}
.picks{flex:none;display:flex;flex-direction:column;gap:6px}
.stepper{flex:none;display:flex;align-items:center;gap:8px}
.stepper button{flex:none;width:36px;height:36px;border:1px solid var(--line);background:transparent;border-radius:9px;font-size:18px;font-weight:600}

/* help mode */
.helpbtn{flex:none;position:relative;z-index:30;width:36px;height:36px;padding:0;border-radius:50%;border:1px solid var(--line);background:var(--panel);
  font-family:var(--display);font-weight:800;font-size:16px}
.helpbtn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--panel)}
.veil{position:fixed;inset:0;z-index:20;cursor:help}
.ring{position:fixed;z-index:25;border:2px solid var(--ink);border-radius:9px;box-shadow:0 0 0 3px var(--panel);pointer-events:none}
.bubble{position:fixed;z-index:40;width:min(300px,calc(100vw - 24px));background:var(--ink);color:var(--panel);border-radius:12px;padding:12px;
  display:flex;flex-direction:column;gap:8px;font-size:12.5px;line-height:1.4;pointer-events:none}
.bubble p{margin:0}
.bubble .again{font-weight:600;opacity:.8}

/* very short windows (a phone held sideways): let the page scroll instead of crushing things */
@media (max-height:520px){
  html,body{height:auto}
  body{overflow:auto}
  .app{height:auto}
  .main{flex:none}
  .pads{flex:none}
  .stage{flex:none;height:300px}
  .sheet{overflow:auto}
}