/* DrumScribe — dark studio theme */
:root{
  --bg:#0e1116; --panel:#161b24; --panel2:#1c2330; --line:#2a3342;
  --ink:#e8eef7; --muted:#8a99b3; --accent:#ff9f43; --accent2:#ffd166;
  --cym:#ffd166; --hat:#7dd3fc; --tom:#c4b5fd; --snare:#34d399; --kick:#f87171;
  --play:#22d3ee; --grid:#1f2733; --beat:#283142;
  --radius:12px; --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:radial-gradient(1200px 600px at 70% -10%,#1a2130 0%,var(--bg) 60%);
  color:var(--ink); min-height:100vh; -webkit-font-smoothing:antialiased}
a{color:var(--accent)}
button{font-family:inherit}

/* header */
header{position:sticky; top:0; z-index:30; background:rgba(14,17,22,.86);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.bar{display:flex; align-items:center; gap:18px; max-width:1180px; margin:0 auto;
  padding:12px 20px}
.logo{display:flex; align-items:center; gap:12px}
.logo .kit{font-size:1.7rem; filter:drop-shadow(0 2px 6px rgba(255,159,67,.35))}
.logo .ds{font-weight:800; font-size:1.25rem; letter-spacing:.2px;
  background:linear-gradient(90deg,var(--accent),var(--accent2)); -webkit-background-clip:text;
  background-clip:text; color:transparent; display:block; line-height:1}
.logo small{color:var(--muted); font-size:.72rem; letter-spacing:.3px}
.tabs{margin-left:auto; display:flex; gap:6px}
.navbtn{background:transparent; color:var(--muted); border:1px solid transparent;
  padding:8px 16px; border-radius:999px; cursor:pointer; font-weight:600; font-size:.9rem}
.navbtn:hover{color:var(--ink)}
.navbtn.on{color:#0e1116; background:linear-gradient(90deg,var(--accent),var(--accent2))}

main{max-width:1180px; margin:0 auto; padding:22px 20px 60px}

/* transport */
.transport{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 16px 14px; box-shadow:0 8px 30px rgba(0,0,0,.25)}
.meta{display:flex; gap:12px; margin-bottom:14px; flex-wrap:wrap}
.t-title{flex:1; min-width:220px; background:var(--panel2); border:1px solid var(--line);
  color:var(--ink); border-radius:10px; padding:11px 14px; font-size:1.1rem; font-weight:700}
.t-author{width:180px; background:var(--panel2); border:1px solid var(--line);
  color:var(--ink); border-radius:10px; padding:11px 14px; font-size:.92rem}
input::placeholder{color:#5d6a82}

.ctl-row{display:flex; gap:18px; align-items:flex-end; flex-wrap:wrap}
.ctl label{display:block; color:var(--muted); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.6px; margin-bottom:6px; font-weight:600}
.ctl.grow{flex:1}
.tempo{display:flex; align-items:center; gap:10px}
.tempo input[type=range]{width:150px; accent-color:var(--accent)}
.tempo input[type=number],#sigNum,.sig select{background:var(--panel2); color:var(--ink);
  border:1px solid var(--line); border-radius:8px; padding:7px 8px; width:64px; font-weight:600}
.unit{color:var(--muted); font-size:.8rem}
.sig{display:flex; align-items:center; gap:6px}
.sig .slash{color:var(--muted); font-size:1.2rem}
#sigNum{width:54px; text-align:center}
.sig select{width:60px}
.presets{display:flex; align-items:center; gap:6px; margin-top:8px; flex-wrap:wrap}
.presets span{color:var(--muted); font-size:.74rem}
.chip{background:var(--panel2); color:var(--muted); border:1px solid var(--line);
  border-radius:999px; padding:4px 11px; font-size:.78rem; cursor:pointer; font-family:var(--mono)}
.chip:hover{color:var(--ink); border-color:var(--accent)}

.btn{background:var(--panel2); color:var(--ink); border:1px solid var(--line);
  border-radius:9px; padding:9px 15px; cursor:pointer; font-weight:600; font-size:.9rem}
.btn:hover{border-color:var(--accent); color:#fff}
.btn.play{background:linear-gradient(90deg,#16a34a,#22c55e); border:none; color:#04130a}
.btn.play.on{background:linear-gradient(90deg,#ef4444,#f97316)}
.btn.save{background:linear-gradient(90deg,var(--accent),var(--accent2)); border:none; color:#1a1206}
.btn.ghostbtn{background:transparent}
.playctl{display:flex; align-items:center; gap:10px}
.toggle{display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:.85rem; cursor:pointer}
.toggle input{accent-color:var(--accent)}
.swingctl input[type=range]{width:90px; accent-color:var(--accent); cursor:pointer}
.swingval{font-family:var(--mono); font-size:.78rem; color:var(--accent2); min-width:62px; text-align:left}

/* brush bar */
.brushbar{display:flex; align-items:center; gap:8px; margin-top:16px; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:14px}
.bl{color:var(--muted); font-size:.8rem; font-weight:600}
.brush{display:inline-flex; align-items:center; gap:7px; background:var(--panel2);
  border:1px solid var(--line); border-radius:9px; padding:6px 11px; cursor:pointer; font-size:.85rem}
.brush .g{font-family:var(--mono); font-weight:700; font-size:1rem; width:1.1em; text-align:center}
.brush:hover{border-color:var(--accent)}
.brush.on{border-color:var(--accent); background:#2a2014; box-shadow:0 0 0 1px var(--accent) inset}
.brush small{color:var(--muted)}
.spacer{flex:1}
.hint{color:var(--muted); font-size:.8rem; margin-top:10px}
.hint b{color:var(--accent2); font-family:var(--mono)}

/* sheet */
.sheet-wrap{margin-top:18px; overflow-x:auto; padding-bottom:8px}
.sheet{display:flex; flex-direction:column; gap:0; min-width:max-content}
.measure{margin-bottom:18px}
.mhead{display:flex; align-items:center; gap:10px; margin-bottom:6px; padding-left:118px}
.mhead .mlabel{color:var(--accent2); font-weight:700; font-size:.8rem; font-family:var(--mono)}
.mhead .msig{color:var(--muted); font-size:.78rem}
.mhead .mtools{display:flex; gap:6px; margin-left:auto; padding-right:4px}
.miconbtn{background:var(--panel2); border:1px solid var(--line); color:var(--muted);
  border-radius:7px; padding:3px 9px; font-size:.74rem; cursor:pointer}
.miconbtn:hover{color:var(--ink); border-color:var(--accent)}

.subrow{display:flex; align-items:flex-end; padding-left:118px; margin-bottom:3px}
.subbeat{display:flex; flex-direction:column; align-items:center; border-left:1px solid var(--line);
  padding:0 2px}
.subbeat:first-child{border-left:none}
.subsel{background:var(--panel2); color:var(--muted); border:1px solid var(--line);
  border-radius:6px; font-size:.66rem; padding:1px 3px; margin-bottom:3px; cursor:pointer; font-family:var(--mono)}
.subsel.trip{color:var(--accent); border-color:var(--accent)}

.lane{display:flex; align-items:center; height:30px}
.lane .lname{width:118px; flex:0 0 118px; padding-right:14px; text-align:right;
  font-size:.78rem; font-weight:600; font-family:var(--mono); white-space:nowrap}
.lane .cells{display:flex}
.beatgroup{display:flex; border-left:2px solid var(--beat)}
.beatgroup:first-child{border-left:2px solid var(--line)}
.cell{width:26px; height:26px; margin:1px; border-radius:6px; background:var(--grid);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  font-family:var(--mono); font-weight:700; font-size:.95rem; line-height:1;
  border:1px solid transparent; user-select:none; position:relative}
.cell:hover{background:#243042}
.cell.on{background:#202a39}
.cell.downbeat{background:#1a222e}
.cell.downbeat:hover{background:#243042}
.cell.playing{box-shadow:0 0 0 2px var(--play); background:#10303a}
/* dynamics styling */
.cell .glyph.accent{color:#fff; text-shadow:0 0 8px currentColor; font-size:1.05rem}
.cell .glyph.ghost{opacity:.55; font-size:.8rem}
.cell .glyph.ghost::before{content:"("} .cell .glyph.ghost::after{content:")"}
.cell .glyph.flam::after{content:"ƒ"; font-size:.6em; vertical-align:super; opacity:.8}
/* lane colors */
.lane[data-cat=cymbal] .glyph{color:var(--cym)}
.lane[data-cat=hat] .glyph{color:var(--hat)}
.lane[data-cat=tom] .glyph{color:var(--tom)}
.lane[data-cat=snare] .glyph{color:var(--snare)}
.lane[data-cat=kick] .glyph{color:var(--kick)}
.lane[data-cat=cymbal] .lname{color:var(--cym)}
.lane[data-cat=hat] .lname{color:var(--hat)}
.lane[data-cat=tom] .lname{color:var(--tom)}
.lane[data-cat=snare] .lname{color:var(--snare)}
.lane[data-cat=kick] .lname{color:var(--kick)}

/* legend */
.legend{margin-top:22px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:14px 16px; display:flex; flex-wrap:wrap; gap:14px}
.legend h3{width:100%; margin:0 0 2px; font-size:.8rem; color:var(--muted);
  text-transform:uppercase; letter-spacing:.6px}
.leg{display:flex; align-items:center; gap:7px; font-size:.82rem; color:var(--muted)}
.leg .g{font-family:var(--mono); font-weight:700; color:var(--accent2); width:1.4em; text-align:center}

/* browse */
.browsehead{display:flex; align-items:center; gap:16px; margin-bottom:18px; flex-wrap:wrap}
.browsehead h2{margin:0; font-size:1.3rem}
.search{margin-left:auto; background:var(--panel2); border:1px solid var(--line); color:var(--ink);
  border-radius:10px; padding:10px 14px; width:280px; max-width:60vw}
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px}
.tabcard{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; cursor:pointer; transition:transform .08s,border-color .08s}
.tabcard:hover{transform:translateY(-2px); border-color:var(--accent)}
.tabcard h3{margin:0 0 4px; font-size:1.05rem}
.tabcard .by{color:var(--muted); font-size:.82rem}
.tabcard .specs{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}
.tabcard .pill{background:var(--panel2); border:1px solid var(--line); border-radius:999px;
  padding:3px 10px; font-size:.74rem; color:var(--muted); font-family:var(--mono)}
.empty{color:var(--muted); text-align:center; padding:60px 20px}

/* toast */
.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
  background:#0b0e13; border:1px solid var(--accent); color:var(--ink); padding:12px 18px;
  border-radius:10px; opacity:0; pointer-events:none; transition:.25s; z-index:50; max-width:90vw}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast a{color:var(--accent2)}

footer{max-width:1180px; margin:0 auto; padding:8px 20px 40px; color:var(--muted); font-size:.82rem}

/* ============ STAGE: kit + pedals diagrams ============ */
.stage{display:flex; gap:16px; margin-top:18px; flex-wrap:wrap}
.kit-panel{flex:1 1 380px; min-width:300px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:12px 14px}
.pedal-panel{flex:0 1 250px; min-width:200px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:12px 14px}
.panel-label{color:var(--muted); font-size:.74rem; text-transform:uppercase; letter-spacing:.6px;
  font-weight:700; margin-bottom:8px; display:flex; align-items:center; gap:10px}
.hands-key{text-transform:none; letter-spacing:0; font-weight:500; font-size:.72rem; color:var(--muted);
  display:flex; gap:6px; align-items:center; margin-left:auto}
.hands-key i{font-style:normal; font-family:var(--mono); font-weight:800; border-radius:4px; padding:0 4px; color:#10151f}
.hands-key .kR{background:var(--accent)} .hands-key .kL{background:var(--hat)}
.kitsvg, .pedsvg{width:100%; height:auto; display:block; overflow:visible}

/* kit pieces */
.p-cymbal{color:var(--cym)} .p-hat{color:var(--hat)} .p-tom{color:var(--tom)}
.p-snare{color:var(--snare)} .p-kick{color:var(--kick)}
.piece{transform-box:fill-box; transform-origin:center}
.piece .shell{fill:#161d2a; stroke:currentColor; stroke-width:3}
.piece .head{fill:rgba(255,255,255,.045); stroke:currentColor; stroke-opacity:.35; stroke-width:1.5}
.piece .cym{fill:rgba(255,209,102,.14); stroke:currentColor; stroke-width:2}
.piece .cymring{fill:none; stroke:currentColor; stroke-opacity:.4}
.piece .cymbell{fill:currentColor}
.piece .plabel{fill:currentColor; opacity:.92; font-family:var(--mono); font-weight:700; font-size:13px}
.piece.bounce{animation:dbounce .18s ease-out}
@keyframes dbounce{0%{transform:scale(1)} 35%{transform:scale(1.07)} 100%{transform:scale(1)}}

/* rug + hardware (fill the floor, frame the kit) */
.rug ellipse{fill:rgba(125,150,200,.035); stroke:var(--line); stroke-opacity:.5}
.rug .rug2{fill:rgba(125,150,200,.04); stroke-opacity:.25}
.hw line{stroke:#39455b; stroke-width:3; stroke-linecap:round; opacity:.65}

/* drumsticks (rigid, fixed length; tip strikes the drum, body angles to the hand) */
.stickR{color:var(--accent)} .stickL{color:var(--hat)}
.stick{transition:transform .075s cubic-bezier(.3,.7,.3,1)}
.stick.notrans{transition:none}
.stickbody{stroke:currentColor; stroke-width:5.5; stroke-linecap:round; vector-effect:non-scaling-stroke}
.stickbutt{fill:currentColor}
.sticktip{fill:#fff; opacity:.92}
.stickv.tap{animation:stickTap .12s ease-out}
@keyframes stickTap{0%{transform:translateY(7px)} 55%{transform:translateY(-2px)} 100%{transform:translateY(0)}}
.stick.hit{filter:drop-shadow(0 0 5px currentColor) brightness(1.3)}

/* pedals */
.ped .floor{fill:#0c1119}
.ped .plate{fill:#2b3344; stroke:#3a4459}
.ped .board{transform-box:fill-box; transform-origin:center; transition:transform .05s ease-out}
.ped.press .board{transform:translateY(4px)}
.ped .pedlbl{fill:var(--muted); font-family:var(--mono); font-size:11px; letter-spacing:.04em}
.pedKick .bdrum{fill:#161d2a; stroke:var(--kick); stroke-width:3; transform-box:fill-box; transform-origin:center}
.pedKick.press .bdrum{animation:dbounce .18s ease-out}
.pedKick .beater{transform-box:fill-box; transform-origin:bottom; transition:transform .05s ease-out}
.pedKick.press .beater{transform:translateX(-30px) rotate(-12deg)}
.pedKick .beatrod{stroke:#8a99b3; stroke-width:3} .pedKick .beathead{fill:#c9d3e6}
.pedHat .hhbot{fill:rgba(255,209,102,.16); stroke:var(--cym); stroke-width:2}
.pedHat .hhtop{fill:rgba(255,209,102,.22); stroke:var(--cym); stroke-width:2;
  transform-box:fill-box; transform-origin:center; transition:transform .05s ease-out}
.pedHat.press .hhtop{transform:translateY(11px)}
.pedHat .rod{stroke:#5f6e88; stroke-width:2}

/* sticking row under each measure */
.stickrow{height:24px; margin-top:2px}
.stickrow .lname{color:var(--muted); font-style:italic; font-weight:500}
.stickcell{width:26px; height:20px; margin:1px; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:700; font-size:.74rem; color:#5d6a82; border-radius:4px}
.stickcell.downbeat{background:rgba(255,255,255,.02)}
.stickcell.sR{color:var(--accent)} .stickcell.sL{color:var(--hat)}
.stickcell.foot{color:#5d6a82; opacity:.7}
.stickcell.clk{cursor:pointer}
.stickcell.clk:hover{background:var(--panel2)}