:root{color-scheme:dark;--night:#071e2b;--blue:#0c3040;--blue2:#164355;--gold:#f3c77d;--deepgold:#ad7c40;--cream:#fff0d2;--muted:#bad0d5;--border:#926f43;--teal:#65cfce;--hot:#ff9e59;--pink:#e57bdf}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--night);color:var(--cream);font:16px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.6}a{color:var(--teal)}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #fff;outline-offset:3px}.skip-link{position:absolute;top:-100px;left:10px;background:white;color:var(--night);padding:8px;z-index:100}.skip-link:focus{top:8px}.review-banner{display:flex;justify-content:center;align-items:center;gap:10px;padding:9px 16px;background:#274758;color:#ffdda6;font-size:.69rem;letter-spacing:.12em;font-weight:800;text-align:center}.tiny-light{height:8px;width:8px;background:#ffac54;border-radius:50%;box-shadow:0 0 12px #ffac54}.boomlab{background:radial-gradient(circle at 89% 8%,#205962 0,transparent 30%),radial-gradient(circle at 10% 35%,#163847 0,transparent 44%),linear-gradient(140deg,#081b29,#0a2a38 63%,#071f2b)}.container{width:min(1270px,calc(100% - 48px));margin:auto}.hero{display:grid;grid-template-columns:minmax(0,1fr) 240px;align-items:center;gap:40px;padding:54px 0 32px}.eyebrow{font-weight:900;text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:var(--gold)}.mini-cap{color:#8fd7d5;font-size:.7rem;font-weight:800;letter-spacing:.14em;margin:20px 0 4px}.hero h1,.section-heading h2,.seq-title h2,.downloads h2{font-family:Georgia,serif;line-height:1.04;letter-spacing:-.026em}.hero h1{font-size:clamp(2.7rem,5.8vw,5.6rem);font-weight:900;margin:0 0 21px;color:#fff0cb;text-shadow:1px 3px 0 #825e36}.hero h1 span{display:block;color:var(--gold)}.lede{font-size:clamp(1.02rem,1.4vw,1.23rem);color:#d0e2e2;max-width:740px}.hero-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.hero-pills span{border:1px solid #657d72;background:#163a43;border-radius:99px;padding:7px 12px;font-size:.72rem;font-weight:800}.hero-aside{font-family:Georgia,serif;color:#f3c78e;font-style:italic;font-size:1.05rem;margin-top:22px}.hero-portrait{margin:0;justify-self:end;max-width:220px;transform:rotate(3deg)}.hero-portrait img{display:block;width:100%;border-radius:27px;border:5px solid #ca9851;box-shadow:0 20px 45px #020f19}.hero-portrait figcaption{text-align:center;font-size:.58rem;font-weight:900;letter-spacing:.14em;margin-top:16px;color:#e6b478}.safety-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;border:1px solid #6b907d;border-radius:15px;background:#153d4a;padding:14px 18px;margin:12px 0 44px}.audio-state{display:flex;gap:12px;align-items:center}.status-dot{width:11px;height:11px;border-radius:50%;background:#f7bb76;box-shadow:0 0 12px #e39f4c}.status-dot.is-on{background:#62d0af;box-shadow:0 0 12px #62d0af}.audio-state strong{display:block;font-size:.77rem;letter-spacing:.07em}.audio-state small{display:block;color:#c9d9db;font-size:.72rem}.master-volume{display:flex;align-items:center;gap:11px;font-size:.78rem;font-weight:800}.master-volume input{width:122px;accent-color:var(--gold)}.master-volume output{min-width:2.2em;font-variant-numeric:tabular-nums}.stop-button,.secondary-button,.quiet-button{border:1px solid #ac8250;background:#102f3b;color:#ffe3ad;padding:10px 17px;border-radius:9px;font-weight:800}.section-heading,.seq-title{display:flex;justify-content:space-between;align-items:center;gap:12px}.section-heading h2,.seq-title h2,.downloads h2{font-size:clamp(2rem,3.3vw,3rem);margin:8px 0 12px}.section-heading p,.seq-title p,.downloads p{color:#c3d7da;margin:0 0 15px}.section-stamp,.gear-stamp{flex-shrink:0;border:1px dashed #c59a62;color:#edc48b;border-radius:10px;padding:12px 15px;font-size:.7rem;font-weight:900;letter-spacing:.08em;transform:rotate(-3deg)}kbd{background:#2b5363;border:1px solid #8a7a58;border-radius:4px;padding:1px 6px;color:white;font:inherit;font-weight:900}.pads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:22px 0 58px}.pad-card{border:1px solid var(--border);background:linear-gradient(152deg,#1d4657,#112d3b);border-radius:20px;padding:22px 18px 16px;min-width:0;display:flex;flex-direction:column;gap:12px;box-shadow:0 14px 30px #03141e55}.pad-card-epic{border:2px solid #f0af61;background:linear-gradient(146deg,#2b5052,#1a303c)}.pad-top{display:flex;justify-content:space-between;align-items:center}.pad-icon{font-size:2.2rem}.pad-number{font-size:.7rem;color:#d5dccd;border:1px solid #63808a;border-radius:6px;padding:3px 6px}.pad-card h3{font-family:Georgia,serif;color:#f8d494;font-size:clamp(1.15rem,1.7vw,1.55rem);line-height:1.15;margin:3px 0 0}.pad-card p{font-size:.82rem;line-height:1.55;color:#cbdce0;margin:0 0 5px;flex:1}.pad-hit{display:flex;gap:8px;align-items:center;justify-content:center;min-height:64px;width:100%;border-radius:14px;border:2px solid #ffd89a;color:#113246;background:linear-gradient(#ffdaa0,#dfa35c);font-weight:950;letter-spacing:.04em;box-shadow:0 5px 0 #815e37;touch-action:manipulation}.pad-hit span{font-size:clamp(.8rem,1.3vw,1rem)}.pad-hit:active,.pad-hit.is-hit{transform:translateY(4px);box-shadow:0 1px 0 #815e37;background:linear-gradient(#fff3c7,#eeae69)}.pad-download{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;border-top:1px solid #50707a;padding-top:12px}.pad-download a{font-size:.74rem;font-weight:800;text-decoration:none;color:#98dfdd}.pad-download a:hover{text-decoration:underline}.sequencer{border:2px solid #b7874d;background:linear-gradient(160deg,#163b48,#0b2431);border-radius:24px;padding:28px 29px;margin-bottom:32px;box-shadow:0 25px 50px #020d16aa}.seq-title h2 span{color:#f7c576}.gear-stamp{text-align:center}.recipe-bar{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin:16px 0 23px}.recipe-label{color:#f8d39d;font-size:.83rem;font-weight:900;margin-right:7px}.preset-button{background:#244953;color:#d4ebeb;border:1px solid #5d7e82;border-radius:9px;padding:9px 13px;font-size:.79rem;font-weight:800}.preset-button:hover,.preset-button.is-selected{background:#edbc77;color:#143444;border-color:#facd91}.sequencer-shell{background:#091d29;border:1px solid #597c84;border-radius:14px;padding:17px}.seq-labels{display:flex;justify-content:space-between;gap:10px;color:#abc9c6;font-size:.68rem;font-weight:700;margin-bottom:8px}.step-scroller{overflow-x:auto;padding-bottom:8px;overscroll-behavior-x:contain}.step-grid{min-width:700px;display:grid;grid-template-columns:136px repeat(16,minmax(31px,1fr));gap:6px;align-items:center}.step-name{display:flex;gap:6px;align-items:center;font-size:.73rem;font-weight:850;color:#f2dfbe;min-height:36px;white-space:nowrap}.step-count{display:flex;align-items:center;justify-content:center;color:#90abb2;font-size:.68rem;font-weight:850;min-height:24px;border-bottom:1px solid #547581}.step-count.is-downbeat{color:#f9d198}.step-count.is-playing{color:#fff;background:#39666b;border-radius:5px}.step{height:38px;min-width:30px;border-radius:7px;background:#224251;border:1px solid #477181;color:transparent;transition:background .08s;touch-action:manipulation}.step.is-downbeat{border-color:#ad925b}.step[aria-pressed="true"]{background:#e6ba73;color:#163340;border-color:#ffdeb0;box-shadow:inset 0 0 0 2px #ffffff32}.step.is-playing{outline:2px solid #77f6df;outline-offset:1px}.step:focus-visible{outline:3px solid #fff;outline-offset:2px}.transport{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin:20px 0}.play-button,.export-button,.download-all{border:2px solid #f2d399;background:linear-gradient(180deg,#f1c785,#d49e59);border-radius:10px;color:#0b293b;font-weight:950;padding:12px 18px;min-height:50px}.play-button.is-playing{background:linear-gradient(#8ee4ca,#5fa995);border-color:#b9ffe4}.tempo-label{display:flex;align-items:center;gap:8px;color:#f9e4bc;font-size:.82rem;font-weight:800;margin-left:auto}.tempo-label input{width:125px;accent-color:#dfb36e}.tempo-label output{min-width:67px;font-variant-numeric:tabular-nums}.quiet-button{border-color:#50747f;color:#b4d5da}.export-panel{display:flex;align-items:center;justify-content:space-between;gap:24px;background:#25444c;border:1px solid #647d70;border-radius:14px;padding:20px}.export-panel strong{color:#f9d7a0}.export-panel p{color:#d0dbdd;font-size:.76rem;max-width:635px;margin:4px 0 0}.export-button{white-space:nowrap}.downloads{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:24px 20px 30px;border-bottom:1px solid #50747b}.downloads>div{max-width:730px}.downloads h2{margin:6px 0 12px}.download-all{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;flex-shrink:0;text-align:center}.lab-status{background:#0d3544;color:#c6e9e5;border-left:4px solid #f0bc78;padding:14px 20px;border-radius:4px;margin:22px 0;font-weight:750;font-size:.83rem}footer{font-size:.76rem;color:#a9bfc6;display:flex;justify-content:space-between;gap:30px;padding:12px 2px 38px}footer p{max-width:830px;margin:0 0 8px}footer a{color:#a9dcde;text-decoration:none}footer span{padding:0 5px}
@media(max-width:980px){.pads{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{grid-template-columns:minmax(0,1fr) 175px;gap:22px}.hero-portrait{max-width:165px}.section-stamp{display:none}.download-all{max-width:260px}.transport .tempo-label{margin-left:0}}
@media(max-width:650px){.container{width:min(100% - 24px,1270px)}.hero{grid-template-columns:1fr;gap:15px;padding:29px 0}.hero-portrait{grid-row:1;justify-self:start;max-width:105px;transform:none;display:flex;align-items:center;gap:10px}.hero-portrait img{border-width:3px;border-radius:16px}.hero-portrait figcaption{line-height:1.4;font-size:.57rem}.hero h1{font-size:2.75rem}.hero-pills span{font-size:.66rem}.hero-aside{font-size:.92rem}.safety-bar{align-items:stretch;flex-direction:column}.master-volume{justify-content:space-between}.master-volume input{flex:1}.pads{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.pad-card{padding:14px 10px 12px;border-radius:12px;gap:9px}.pad-card h3{font-size:1.05rem}.pad-card p{font-size:.72rem}.pad-top .pad-icon{font-size:1.6rem}.pad-hit{min-height:56px}.pad-download a{font-size:.67rem}.sequencer{padding:19px 11px;border-radius:16px}.gear-stamp{display:none}.recipe-bar{gap:7px}.preset-button{font-size:.69rem;padding:8px}.sequencer-shell{padding:11px}.step-grid{min-width:700px}.transport{gap:8px}.tempo-label{width:100%;justify-content:space-between}.tempo-label input{flex:1}.export-panel,.downloads{flex-direction:column;align-items:stretch}.export-button,.download-all{width:100%;max-width:none;white-space:normal}footer{flex-direction:column}}
@media(max-width:390px){.hero h1{font-size:2.36rem}.pads{grid-template-columns:1fr}.pad-card h3{font-size:1.18rem}.pad-hit span{font-size:1rem}.pad-download{justify-content:flex-start}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}

/* v0.2 cPanel integration: standalone navigation */
.boomlab .boomlab-nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0 4px}
.boomlab .boomlab-nav a{color:#f7d59c;font-weight:800;text-decoration:none;font-size:.85rem;border:1px solid #926a3b;border-radius:999px;padding:8px 13px;background:#133441}
.boomlab .boomlab-nav a:hover,.boomlab .boomlab-nav a:focus-visible{color:#fff;background:#246076;outline-offset:3px}
@media(max-width:640px){.boomlab .boomlab-nav{gap:7px}.boomlab .boomlab-nav a{font-size:.72rem;padding:8px 10px}}

@media(max-width:650px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero-text{min-width:0}
  .hero h1{overflow-wrap:anywhere}
  .hero-portrait{max-width:100%}
  .hero-portrait img{width:105px;flex:none}
}