/* Site-wide wide layout and larger type. Loaded after each page's own styles. */
:root{--wide:1360px}
body{font-family:'IBM Plex Sans',system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-size:18px;line-height:1.65}
.wrap,.shell{max-width:var(--wide);padding-left:clamp(16px,3.5vw,48px);padding-right:clamp(16px,3.5vw,48px)}
.wrap{padding-top:28px}
nav,nav.top{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:15px;letter-spacing:.04em;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:32px}
.kicker{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:14px}
h1{font-size:clamp(52px,6.4vw,104px);margin-bottom:22px}
h2{font-size:clamp(36px,3vw,48px);margin-top:56px}
.wrap>p,.wrap>ul,.wrap>ol,section>p{max-width:1000px}
.wrap>p:first-of-type{font-size:20px}
.legend,.src,.card,.links a,.soon,.fam-sub{font-size:16px}
.links a small,.card .lv{font-size:13px}
.card b{font-size:32px}
.links{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.links a{padding:14px 16px}
.cards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.card{padding:20px}
.pl{padding:22px;border-radius:14px}
.counts .c{font-size:16px;min-width:36px}
.counts.sm .c{font-size:14px;min-width:26px}
.tempo{font-size:16px}
.staff svg{max-height:420px}
table{font-size:17px}
th{font-size:14px}
ol.steps li{grid-template-columns:56px 1fr;padding:16px 0}
section.step{padding:24px}
section.step h2{font-size:clamp(32px,2.6vw,42px)}
.try{font-size:24px;min-height:52px}
.go{font-size:26px;min-height:52px}
@media(max-width:700px){body{font-size:17px}.wrap>p:first-of-type{font-size:18px}.links{grid-template-columns:1fr}}
.kitstage{max-width:1200px}
section.step h2{line-height:1.05}@media(max-width:700px){section.step{padding:18px}}

/* ===== Lab skin: every page gets the Drum Lab look. Theme via <html data-lab="cyan|gold|red">; default gold. ===== */
:root{--lab-bg:#0d0b06;--lab-bg2:#15110a;--lab-p1:#1e180d;--lab-p2:#16120a;--lab-line:#3a2f1b;--lab-line2:#54442a;--lab-ink:#fbf4e6;--lab-mut:#bfae8c;--lab-acc:#f2b93b;--lab-acc2:#ffd98a;--lab-glow:242,185,59;--lab-halo:#2a1f08;
 --bg:var(--lab-bg);--ink:var(--lab-ink);--muted:var(--lab-mut);--line:var(--lab-line);--gold:var(--lab-acc);--gold2:var(--lab-acc2)}
html[data-lab=cyan]{--lab-bg:#060e1c;--lab-bg2:#0a1628;--lab-p1:#10223b;--lab-p2:#0c1a2f;--lab-line:#1b3252;--lab-line2:#25446c;--lab-ink:#eaf2ff;--lab-mut:#8fa6c4;--lab-acc:#38d6ff;--lab-acc2:#8ee9ff;--lab-glow:56,214,255;--lab-halo:#0f2544}
html[data-lab=red]{--lab-bg:#0b0404;--lab-bg2:#140606;--lab-p1:#220a0a;--lab-p2:#170707;--lab-line:#3a1515;--lab-line2:#5a1f1f;--lab-ink:#f7f1f0;--lab-mut:#b8a9a7;--lab-acc:#e10600;--lab-acc2:#ff3b30;--lab-glow:225,6,0;--lab-halo:#3a0404}
html[data-lab=orange]{--lab-bg:#0d0905;--lab-bg2:#150d06;--lab-p1:#22160a;--lab-p2:#170f08;--lab-line:#3a2714;--lab-line2:#56391b;--lab-ink:#fbf4ea;--lab-mut:#bfa98f;--lab-acc:#e77500;--lab-acc2:#ff9a2e;--lab-glow:231,117,0;--lab-halo:#2e1602}
body{background:radial-gradient(1200px 620px at 25% -10%,var(--lab-halo) 0%,transparent 62%),radial-gradient(900px 500px at 100% 0%,rgba(var(--lab-glow),.06),transparent 60%),var(--lab-bg);background-attachment:fixed;color:var(--lab-ink)}
a{color:var(--lab-acc)}a:hover{color:var(--lab-acc2)}
nav,nav.top{border-bottom-color:var(--lab-line)}
.kicker{color:var(--lab-acc2);letter-spacing:.35em}
h2{border-bottom:1px solid var(--lab-line);box-shadow:0 1px 0 rgba(var(--lab-glow),.25)}
b{color:var(--lab-acc)}
.pl,section.step,.card,.spec,.box,.buy,.gearbox,.links a,.inst,.fam .inst,.loop,.row-card{background:linear-gradient(180deg,var(--lab-p1),var(--lab-p2));border:1px solid var(--lab-line)!important;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.links a{border-radius:10px}
.links a:hover,.card:hover,.buy:hover{border-color:var(--lab-acc)!important;box-shadow:0 0 0 1px rgba(var(--lab-glow),.35),0 0 22px rgba(var(--lab-glow),.18)}
.spec h3,.box h3,.box>h3{background:rgba(var(--lab-glow),.14);color:var(--lab-acc2);border-bottom:1px solid var(--lab-line)}
section.step h2{box-shadow:none;border:0}
section.step h2 .n{color:var(--lab-acc)}
.go,.try.solid,.levelnav a.here{background:linear-gradient(180deg,var(--lab-acc2),var(--lab-acc));border-color:var(--lab-acc)!important;color:#140d02;box-shadow:0 6px 22px rgba(var(--lab-glow),.28)}
.try,.jump a,.levelnav a{border-color:var(--lab-line2)!important;color:var(--lab-ink)}
.try:hover,.jump a:hover,.levelnav a:hover{border-color:var(--lab-acc)!important;color:var(--lab-acc2);box-shadow:0 0 16px rgba(var(--lab-glow),.2)}
.counts .c{border-color:var(--lab-line)}.counts .c.on{background:var(--lab-acc);border-color:var(--lab-acc);box-shadow:0 0 12px rgba(var(--lab-glow),.6)}
.tempo input{accent-color:var(--lab-acc)}
.src{border-left-color:var(--lab-acc)}
td{border-top-color:var(--lab-line)}
html[data-lab=red] .go,html[data-lab=red] .try.solid,html[data-lab=red] .levelnav a.here{color:#fff}
html[data-lab=orange] .go,html[data-lab=orange] .try.solid,html[data-lab=orange] .levelnav a.here{color:#1a0d00}

/* page-specific controls */
.ex,.bubble{background:linear-gradient(180deg,var(--lab-p1),var(--lab-p2));border:1px solid var(--lab-line2)!important;border-radius:14px;box-shadow:0 0 24px rgba(var(--lab-glow),.08)}
.box .bh{background:rgba(var(--lab-glow),.16);color:var(--lab-acc2)}
.chip,.feel,.var,.snd,button.step,.exc button,.scale,.seg button,.opts select,.find,.find input{background:rgba(255,255,255,.02);border-color:var(--lab-line2)!important;color:var(--lab-ink)}
.chip:hover,.feel:hover,.var:hover,.snd:hover,button.step:hover,.exc button:hover,.scale:hover,.seg button:hover{border-color:var(--lab-acc)!important;box-shadow:0 0 14px rgba(var(--lab-glow),.2)}
.chip.sel,.chip.on,.feel.on,.var.on,.play.on,.exc button.pl,.seg button.on,.seg button[aria-pressed=true],.chip[aria-pressed=true]{background:linear-gradient(180deg,var(--lab-acc2),var(--lab-acc));border-color:var(--lab-acc)!important;color:#140d02;box-shadow:0 0 16px rgba(var(--lab-glow),.3)}
.play{border-color:var(--lab-acc)!important;box-shadow:0 0 18px rgba(var(--lab-glow),.25)}
.exsvg svg{width:100%!important;max-width:1400px;height:auto}
.box.tip>h3,.box.tip h3{background:linear-gradient(180deg,var(--lab-acc2),var(--lab-acc));color:#140d02}