:root{color-scheme:dark;--bg:#0c0e11;--surface:#191d20;--text:#f3f1ec;--muted:#929a9e;--accent:#e8a020;--line:rgba(255,255,255,.11);font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:weight}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{color:inherit;cursor:pointer}button{border:0}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:5px}button:disabled{cursor:wait;opacity:.6}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}button{user-select:none}button, a{transition:background .18s,color .18s,border-color .18s,box-shadow .18s}button:hover{color:#fff}button:active{filter:brightness(1.12)}[hidden]{display:none!important}.site-header{height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:23px;margin:0 3.4%;position:relative;z-index:3}.brand{display:flex;align-items:center;gap:10px;font-size:30px;font-weight:760;letter-spacing:-1.5px;line-height:1}.brand-icon{display:grid;place-items:center;width:27px;height:31px;border:1.5px solid var(--accent);border-radius:50%;color:var(--accent);font-size:27px;font-weight:600;transform:rotate(-16deg)}.brand-period{color:var(--accent)}.header-divider{height:22px;width:1px;background:var(--line)}.studio-name{font-size:14px;letter-spacing:.02em;color:#b1b7ba}.header-actions{margin-left:auto;display:flex;align-items:center;gap:32px}.quiet-button{background:none;display:flex;align-items:center;gap:9px;color:#b3b9bc;font-size:14px;padding:10px 0}.help-symbol{border:1px solid #70787e;border-radius:50%;display:grid;place-items:center;width:18px;height:18px;font-size:12px}.catalog-link{font-size:14px}.catalog-link span{margin-left:12px;color:var(--accent);font-size:19px}.stage{position:relative;height:calc(100svh - 295px);min-height:450px;max-height:900px;overflow:hidden;isolation:isolate}.stage:after{content:"";position:absolute;inset:auto 0 0;height:62px;background:linear-gradient(transparent,var(--bg));pointer-events:none;z-index:1}#drum-canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}.stage-intro{position:absolute;left:5%;top:32px;z-index:2;pointer-events:none}.eyebrow{font-size:11px;letter-spacing:.15em;font-weight:600;color:var(--accent);margin:0 0 18px;line-height:1.5}.stage-intro h1{font-size:clamp(32px,3.4vw,53px);letter-spacing:-.055em;font-weight:500;line-height:1.04;margin:0}.stage-intro em{font-family:Georgia,"Times New Roman",serif;font-weight:400;color:var(--accent);letter-spacing:-.02em}.intro-hint{color:var(--muted);font-size:14px;margin:16px 0}.stage-meta{position:absolute;right:5%;top:37px;z-index:2;text-align:right;display:flex;flex-direction:column;gap:9px;pointer-events:none}.kit-tag{font-size:12px;letter-spacing:.12em;color:#b4babd}.kit-description{font-size:12px;color:#727c80}.scene-loading{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;gap:14px;font-size:14px;color:var(--muted);background:var(--bg);z-index:1}.loading-ring{width:22px;height:22px;border:1px solid #3c4246;border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.scene-error{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,85%);background:#1a2025;border:1px solid var(--line);border-radius:18px;padding:26px;z-index:3}.scene-error p{color:var(--muted);font-size:14px;line-height:1.6}.small-button{background:#363e42;padding:10px 16px;border-radius:8px;font-size:14px}.stage-bottom{position:absolute;left:5%;right:5%;bottom:18px;display:flex;align-items:center;justify-content:space-between;z-index:2;gap:16px}.hit-readout{display:flex;align-items:center;gap:10px;color:#899399;font-size:13px}.hit-readout.playing{color:var(--accent)}.sound-wave{display:flex;align-items:center;gap:3px;height:20px}.sound-wave i{width:2px;height:5px;border-radius:2px;background:currentColor;transition:height .12s}.sound-wave i:nth-child(2),.sound-wave i:nth-child(4){height:10px}.sound-wave i:nth-child(3){height:16px}.playing .sound-wave i{animation:wave .15s alternate infinite}.playing .sound-wave i:nth-child(2){animation-delay:.03s}.playing .sound-wave i:nth-child(4){animation-delay:.08s}@keyframes wave{to{height:3px}}.view-actions{display:flex;gap:6px}.view-button{font-size:13px;color:#9ca6ab;padding:9px 12px;background:#14191bb0;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;gap:8px}.view-button:hover,.view-button[aria-pressed=true]{background:#242a2d;color:var(--accent);border-color:#6c5841}.view-button svg{width:17px;height:17px}.icon-only{padding:9px}.instrument-labels{position:absolute;inset:0;pointer-events:none;z-index:1}.instrument-label{position:absolute;top:0;left:0;transform:translate(-50%,-50%);display:flex;gap:7px;align-items:center;white-space:nowrap;color:#f2ece3;background:#111619b0;border:1px solid #d6c6ab4f;border-radius:7px;padding:5px 8px;box-shadow:0 2px 16px #0004;backdrop-filter:blur(6px);opacity:.87;transition:background .1s,border-color .1s}.instrument-label kbd{font:500 12px "Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--accent);min-width:9px}.instrument-label span{font-size:11px;color:#c3c7c7}.instrument-label.active{background:#e8a020e6;color:#161a1d;border-color:var(--accent)}.instrument-label.active kbd,.instrument-label.active span{color:#161a1d}.performance{width:90%;max-width:1440px;margin:0 auto;background:linear-gradient(155deg,#23282c,#191d20 55%);border:1px solid #373e42;border-radius:16px;padding:16px 20px 11px;position:relative;z-index:3;box-shadow:0 24px 65px #0004}.console-top{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:15px;min-height:30px}.sound-status{display:flex;align-items:center;gap:10px;min-width:180px}.sound-enable{background:transparent;font-size:13px;padding:6px 0;display:flex;align-items:center;gap:8px;color:var(--accent);white-space:nowrap}.sound-enable svg{width:16px;height:16px}.sound-enable[data-ready=true]{color:#b6bdc1}.loading-progress{font-size:12px;color:var(--muted)}.console-controls{display:flex;align-items:center;gap:28px}.metronome-control{display:flex;gap:11px;align-items:center}.metronome-button{display:flex;align-items:center;gap:7px;background:none;color:#abb3b7;font-size:13px;padding:3px 0}.metronome-button[aria-pressed=true]{color:var(--accent)}.metronome-button svg{width:16px;height:16px}.tempo-label{display:flex;align-items:center;gap:5px;padding-left:10px;border-left:1px solid var(--line)}.tempo-label input{width:43px;background:transparent;color:var(--text);border:0;padding:4px 2px;appearance:textfield;-moz-appearance:textfield;text-align:right;font-size:14px}.tempo-label input::-webkit-inner-spin-button,.tempo-label input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.tempo-label>span{font-size:10px;color:#899298}.beat-leds{display:flex;gap:4px}.beat-leds i{width:4px;height:4px;background:#4b555b;border-radius:50%;transition:background .05s}.beat-leds i.active{background:var(--accent);box-shadow:0 0 7px #e8a020}.volume-control{display:flex;align-items:center;gap:9px}.icon-button{background:none;display:grid;place-items:center;padding:4px;color:#b1bac0}.icon-button[aria-pressed=true]{color:#b66b57}.volume-control input{width:85px}.volume-control output{font-size:12px;color:#a1a9ae;min-width:31px}input[type=range]{appearance:none;-webkit-appearance:none;height:3px;background:linear-gradient(to right,var(--accent) 75%,#434a4f 75%);border-radius:2px;cursor:pointer;touch-action:pan-y}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:11px;height:11px;background:#eae0d1;border-radius:50%;border:2px solid #292c2e;box-shadow:0 0 0 1px #8d7b62}input[type=range]::-moz-range-thumb{width:9px;height:9px;background:#eae0d1;border:1px solid #8d7b62;border-radius:50%}.drum-pads{display:grid;grid-template-columns:repeat(5,1fr) 1.65fr repeat(3,1fr);gap:8px}.drum-pad{min-width:0;position:relative;background:linear-gradient(#2a3035,#22272c);border:1px solid #454b50;border-bottom:3px solid #101417;border-radius:9px;height:73px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;touch-action:none;-webkit-user-select:none;user-select:none;box-shadow:inset 0 1px 0 #ffffff08,0 3px 5px #0003}.drum-pad:hover{background:#323a40;border-top-color:#68747b}.drum-pad kbd{font:500 21px "Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1;color:#e8e9e8}.drum-pad>span:not(.pad-accent){font-size:14px;color:#9da7ad;line-height:1.2}.drum-pad .pad-accent{height:2px;width:16px;position:absolute;bottom:0;background:#a5845980}.drum-pad.active{background:linear-gradient(#806241,#42392e);border-color:#b98d57;transform:translateY(2px);box-shadow:inset 0 0 15px #c79f5a26,0 0 20px #e8a02010}.drum-pad.active kbd,.drum-pad.active>span{color:#fff0d8}.drum-pad.active .pad-accent{background:var(--accent);width:38px}.kick-pad{border-color:#76624b;background:linear-gradient(#3d3831,#2c2925)}.kick-pad kbd{font-size:12px;letter-spacing:.12em}.kick-pad>span:not(.pad-accent){color:#c3ae92}.console-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}.keyboard-tip{font-size:12px;color:#858f94;margin:0;line-height:1.4}.keyboard-tip>span{font-size:15px;margin-right:7px;color:#b1a18b}.finish-control{display:flex;align-items:center;gap:8px}.finish-control>span{font-size:11px;color:#899399;margin-right:2px}.finish-swatch{width:18px;height:18px;border-radius:50%;box-shadow:0 0 0 3px #1c2023;border:1px solid #ffffff20}.finish-swatch[aria-pressed=true]{outline:1px solid #c4ae8d;outline-offset:3px}.walnut{background:linear-gradient(100deg,#3a1a0b,#ad7444 48%,#502c15)}.midnight{background:linear-gradient(100deg,#06121c,#306b87 48%,#112638)}.site-footer{width:90%;max-width:1440px;margin:auto;display:flex;align-items:center;justify-content:space-between;height:43px;color:#657078}.site-footer>span{font-size:9px;letter-spacing:.13em}.site-footer p{font-size:11px;display:flex;align-items:center;gap:9px;margin:0}.site-footer svg{width:13px;height:13px}dialog{max-width:530px;width:calc(100% - 32px);padding:35px;background:#20262a;color:var(--text);border:1px solid #444d52;border-radius:20px;box-shadow:0 25px 100px #000a}dialog::backdrop{background:#050a0dd1;backdrop-filter:blur(8px)}.dialog-close{position:absolute;top:12px;right:12px;font-size:28px;width:35px;height:35px;background:none;color:var(--muted)}dialog h2{font-size:30px;line-height:1.15;letter-spacing:-.04em;margin:12px 0 20px}dialog p:not(.eyebrow){color:#b6bfc3;font-size:16px;line-height:1.7}dialog kbd{display:inline-block;background:#313c43;border:1px solid #5a656e;padding:0 6px;border-radius:4px;font:inherit;color:var(--accent)}.help-beat{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:25px 0}.help-beat>span{padding:15px 5px;text-align:center;background:#2b3237;border-radius:9px;font-size:22px;color:var(--accent)}.help-beat small{display:block;font-size:10px;color:#a6b1b8;margin-top:10px}.primary-button{width:100%;padding:14px;margin-top:10px;border-radius:9px;background:var(--accent);color:#1a1916;font-size:15px;font-weight:600}.primary-button:hover{color:#000;background:#f3c999}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.noscript{position:fixed;bottom:20px;left:20px;background:#682b1a;color:white;padding:20px;z-index:100}
@media(min-width:1650px){.stage-intro{left:8%}.stage-meta{right:8%}.performance{padding:20px 24px 14px}.drum-pad{height:80px}.stage{height:calc(100svh - 320px)}}
@media(max-width:1000px){.stage-intro h1{font-size:34px}.eyebrow{font-size:9px}.stage-intro{top:28px}.stage-meta{top:31px}.performance{width:94%;padding:14px 13px 10px}.stage-bottom{left:3%;right:3%}.console-controls{gap:20px}.sound-status{min-width:155px}.beat-leds{display:none}.drum-pads{gap:6px}.drum-pad>span:not(.pad-accent){font-size:12px}.stage{min-height:430px}.studio-name{font-size:13px}}
@media(max-width:650px){.site-header{height:62px;margin:0 18px;gap:12px}.brand{font-size:27px}.brand-icon{height:25px;width:22px;font-size:22px}.studio-name{font-size:12px}.header-divider{height:17px}.header-actions{gap:12px}.quiet-button>span:not(.help-symbol),.catalog-link{display:none}.quiet-button{padding:10px}.stage{height:400px;min-height:0;max-height:none}.stage-intro{left:20px;top:20px}.stage-intro .eyebrow{font-size:8px;letter-spacing:.11em;margin-bottom:10px}.stage-intro h1{font-size:30px;line-height:.98}.intro-hint{display:none}.stage-meta{right:20px;top:24px}.kit-tag{font-size:10px}.kit-description{font-size:9px}.stage-bottom{left:16px;right:16px;bottom:10px;align-items:flex-end}.hit-readout{font-size:11px;max-width:120px;gap:6px;line-height:1.4}.sound-wave{gap:2px}.view-button{padding:8px;font-size:10px;gap:5px}.view-button svg{width:14px;height:14px}.view-actions{gap:4px}.instrument-label{padding:4px 6px;border-radius:5px}.instrument-label kbd{font-size:10px}.instrument-label span{display:none}.instrument-labels{display:none}.performance{width:calc(100% - 24px);border-radius:14px;padding:11px}.console-top{flex-direction:column;align-items:stretch;gap:10px;margin-bottom:13px}.sound-status{justify-content:center;height:20px}.sound-enable{font-size:12px}.console-controls{justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:10px}.metronome-control{gap:8px}.metronome-button{font-size:12px}.tempo-label{gap:3px;padding-left:4px}.tempo-label input{font-size:13px;width:34px}.tempo-label>span{font-size:8px}.volume-control{gap:5px}.volume-control input{width:56px}.volume-control output{font-size:10px;min-width:25px}.volume-control svg{width:17px;height:17px}.drum-pads{grid-template-columns:repeat(3,1fr);gap:7px}.drum-pad{height:58px;gap:5px}.drum-pad kbd{font-size:17px}.drum-pad>span:not(.pad-accent){font-size:14px}.kick-pad kbd{font-size:9px}.console-bottom{margin-top:13px}.keyboard-tip{font-size:10px;max-width:190px}.finish-control>span{display:none}.finish-control{gap:12px;padding:0 4px}.finish-swatch{width:16px;height:16px}.site-footer{height:40px;width:calc(100% - 36px)}.site-footer>span{font-size:8px}.site-footer p{font-size:10px}.help-beat small{font-size:9px}dialog{padding:28px 22px}dialog h2{font-size:27px}dialog p:not(.eyebrow){font-size:14px}}
@media(max-height:520px) and (min-width:651px){.site-header{height:52px}.stage{height:420px;min-height:420px}.stage-intro h1{font-size:30px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* Intrinsic embedded layout: the CMS page owns the heading and page scroll. */
html{overflow-x:hidden}body{overflow:hidden}
.site-header{height:44px;margin:0 20px;gap:14px}
.brand{font-size:17px;letter-spacing:-.4px;gap:7px;white-space:nowrap}
.brand-icon{width:20px;height:24px;font-size:20px}
.header-actions{gap:22px}.quiet-button,.catalog-link{font-size:12px}
.quiet-button{padding:9px 0}.catalog-link span{margin-left:5px;font-size:15px}
.stage{height:480px;min-height:480px;max-height:480px}
.stage-meta{top:18px;right:4%;gap:6px}.kit-tag{font-size:10px}.kit-description{font-size:11px}
.performance{width:94%;max-width:1440px}.site-footer{width:94%}
html:fullscreen body{min-height:100dvh;display:flex;flex-direction:column}
html:fullscreen main{flex:1;display:flex;flex-direction:column}
html:fullscreen .stage{flex:1;max-height:none}
dialog{max-height:calc(100% - 32px);overflow-y:auto}
@media(max-width:900px) and (min-width:651px){
  .console-top{flex-wrap:wrap;gap:8px;margin-bottom:12px}
  .console-controls{margin-left:auto;gap:16px}
  .drum-pad>span:not(.pad-accent){font-size:11px}
  .keyboard-tip{font-size:11px}
}
@media(max-width:650px){
  .site-header{height:44px;margin:0 14px;gap:10px}.brand{font-size:16px}
  .brand-icon{width:18px;height:22px;font-size:18px}
  .header-actions{gap:12px}.quiet-button{padding:9px 0}
  .quiet-button>span:not(.help-symbol){display:inline}.catalog-link{display:none}
  .stage{height:370px;min-height:370px;max-height:370px}
  .stage-meta{right:16px;top:14px}.kit-tag{font-size:9px}.kit-description{font-size:10px}
  .performance{width:calc(100% - 24px)}.site-footer{width:calc(100% - 36px)}
  html:fullscreen .stage{min-height:370px}
}