/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.relative{position:relative}.start{inset-inline-start:var(--spacing)}.table{display:table}}:root{--black:#0c0c0c;--paper:#f2eee5;--orange:#ff5a36;--acid:#d6ef43;--blue:#8bd3f7}*{box-sizing:border-box}html,body{overscroll-behavior:none;width:100%;height:100%}body{background:var(--black);color:var(--paper);font-family:var(--font-geist-sans), Arial, sans-serif;-webkit-font-smoothing:antialiased;margin:0;overflow:hidden}button{font:inherit}.drum-machine{background:var(--black);isolation:isolate;grid-template-rows:62px minmax(0,1fr);width:100%;height:100dvh;min-height:440px;display:grid;position:relative}.topbar{z-index:10;border-bottom:3px solid var(--black);background:var(--black);min-width:0;color:var(--paper);text-transform:uppercase;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 clamp(14px,2vw,28px);display:grid;position:relative}.brand{align-items:center;gap:12px;min-width:0;display:flex}.brand-mark{letter-spacing:-.12em;white-space:nowrap;align-items:baseline;font-size:24px;font-weight:900;line-height:1;display:inline-flex}.brand-mark span{color:var(--orange);letter-spacing:0;font-size:.72em}.brand-name,.topbar-instruction,.sound-status{font-family:var(--font-geist-mono), monospace;letter-spacing:.12em;font-size:10px;font-weight:650}.brand-name{color:#aaa79f;white-space:nowrap}.topbar-instruction{color:#aaa79f;text-align:center;margin:0}.sound-status{white-space:nowrap;justify-self:end;align-items:center;gap:8px;display:flex}.status-light{background:0 0;border:1px solid #7b7973;border-radius:50%;width:7px;height:7px;transition:background .18s,box-shadow .18s}.sound-status.is-ready .status-light{border-color:var(--acid);background:var(--acid);box-shadow:0 0 10px #d6ef43a6}.pad-grid{background:var(--black);grid-template-rows:repeat(2,minmax(0,1fr));grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;min-width:0;min-height:0;display:grid}.drum-pad{--pad-bg:var(--paper);--pad-ink:var(--black);--hit:var(--orange);background:var(--pad-bg);min-width:0;min-height:0;color:var(--pad-ink);cursor:pointer;text-align:left;touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;border:0;border-radius:0;padding:clamp(18px,2.3vw,34px);display:block;position:relative;overflow:hidden}.drum-pad:before{content:"";opacity:.72;pointer-events:none;background:radial-gradient(circle at 50% 54%,#0000 0 28%,#0c0c0c09 29% 29.5%,#0000 30%),linear-gradient(135deg,#ffffff29,#0000 52%);position:absolute;inset:0}.drum-pad:after{background:var(--hit);content:"";opacity:0;pointer-events:none;transition:opacity 90ms,transform 90ms;position:absolute;inset:0;transform:scale(.76)}.drum-pad--kick{--pad-bg:var(--paper);--hit:#ffc6a7}.drum-pad--snare{--pad-bg:var(--orange);--hit:#ff9c79}.drum-pad--hat{--pad-bg:var(--acid);--hit:#f3ff9f}.drum-pad--cymbal{--pad-bg:var(--blue);--hit:#c8ecff}.drum-pad:hover:before{opacity:1}.drum-pad:focus-visible{z-index:5;outline-offset:-7px;outline:4px solid #fff}.drum-pad.is-active:after{opacity:.65;transform:scale(1)}.drum-pad.is-active .instrument{transform:translate(-50%,-50%)scale(.89)}.pad-meta,.pad-copy,.hit-count,.instrument{z-index:2;position:absolute}.pad-meta{font-family:var(--font-geist-mono), monospace;letter-spacing:.13em;justify-content:space-between;align-items:center;font-size:10px;font-weight:750;display:flex;top:clamp(18px,2.3vw,34px);left:clamp(18px,2.3vw,34px);right:clamp(18px,2.3vw,34px)}.keycap{letter-spacing:0;border:1px solid;border-radius:50%;place-items:center;width:29px;height:29px;font-size:11px;display:grid}.instrument{aspect-ratio:1;border:clamp(2px,.25vw,4px) solid;border-radius:50%;width:clamp(88px,14vmin,168px);transition:transform 85ms cubic-bezier(.2,.85,.3,1.35);top:49%;left:50%;transform:translate(-50%,-50%)}.instrument:before,.instrument:after,.instrument-core{content:"";position:absolute}.drum-pad--kick .instrument{box-shadow:inset 0 0 0 clamp(3px, .4vw, 6px) var(--pad-bg), inset 0 0 0 clamp(5px, .7vw, 10px) currentColor;border-width:clamp(7px,.8vw,12px)}.drum-pad--kick .instrument:before{border:2px solid;border-radius:50%;inset:22%}.drum-pad--kick .instrument-core{transform-origin:bottom;background:currentColor;border-radius:999px;width:9%;height:26%;bottom:-19%;right:11%;transform:rotate(-31deg)}.drum-pad--snare .instrument{background:repeating-radial-gradient(circle,#0000 0 11px,#0c0c0c24 12px 13px)}.drum-pad--snare .instrument:before,.drum-pad--snare .instrument:after{background:currentColor;width:126%;height:2px;top:50%;left:-13%;transform:rotate(18deg)}.drum-pad--snare .instrument:after{transform:rotate(-18deg)}.drum-pad--snare .instrument-core{background:currentColor;border-radius:50%;width:10px;height:10px;top:50%;left:50%;transform:translate(-50%,-50%)}.drum-pad--hat .instrument{aspect-ratio:auto;border-width:3px 0 0;border-radius:50%;height:clamp(58px,8vmin,92px)}.drum-pad--hat .instrument:before,.drum-pad--hat .instrument:after{border-top:3px solid;border-bottom:3px solid;border-radius:50%;width:100%;height:53%;top:15%;left:0}.drum-pad--hat .instrument:after{border-top:0;top:24%}.drum-pad--hat .instrument-core{background:currentColor;width:3px;height:165%;top:-41%;left:50%;transform:translate(-50%)}.drum-pad--cymbal .instrument{background:repeating-conic-gradient(#0000 0deg 12deg,#0c0c0c1a 13deg 14deg)}.drum-pad--cymbal .instrument:before{opacity:.55;border:1px solid;border-radius:50%;inset:9%}.drum-pad--cymbal .instrument:after{aspect-ratio:1;background:var(--pad-bg);border:3px solid;border-radius:50%;width:24%;top:50%;left:50%;transform:translate(-50%,-50%)}.drum-pad--cymbal .instrument-core{background:currentColor;width:3px;height:17%;top:-17%;left:50%;transform:translate(-50%)}.pad-copy{justify-content:space-between;align-items:baseline;gap:16px;display:flex;bottom:clamp(18px,2.3vw,30px);left:clamp(18px,2.3vw,34px);right:clamp(18px,2.3vw,34px)}.pad-name{letter-spacing:-.075em;text-transform:uppercase;font-size:clamp(34px,5.1vw,82px);font-weight:890;line-height:.8}.pad-detail{font-family:var(--font-geist-mono), monospace;letter-spacing:.08em;text-transform:uppercase;flex:none;font-size:clamp(8px,.78vw,11px);font-weight:700}.hit-count{font-family:var(--font-geist-mono), monospace;letter-spacing:.13em;opacity:.55;transform-origin:0 0;font-size:9px;font-weight:700;top:50%;left:clamp(18px,2.3vw,34px);transform:translateY(-50%)rotate(-90deg)}.footer-note{z-index:20;border:2px solid var(--black);background:var(--paper);color:var(--black);font-family:var(--font-geist-mono), monospace;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;pointer-events:none;border-radius:999px;align-items:center;gap:10px;margin:0;padding:7px 11px;font-size:8px;font-weight:750;line-height:1;display:flex;position:absolute;bottom:50%;right:50%;transform:translate(50%,50%)}@media (width<=760px){.drum-machine{grid-template-rows:50px minmax(0,1fr);min-height:380px}.topbar{grid-template-columns:1fr auto}.topbar-instruction,.brand-name{display:none}.sound-status{font-size:8px}.drum-pad{padding:14px}.pad-meta{top:13px;left:13px;right:13px}.keycap{width:25px;height:25px}.instrument{width:clamp(74px,25vw,125px);top:46%}.drum-pad--hat .instrument{height:clamp(48px,15vw,72px)}.pad-copy{display:block;bottom:16px;left:13px;right:13px}.pad-name{font-size:clamp(29px,9vw,48px);display:block}.pad-detail{margin-top:8px;font-size:7px;display:block}.hit-count{left:13px}.footer-note{display:none}}@media (height<=590px){.drum-machine{grid-template-rows:44px minmax(0,1fr);min-height:330px}.brand-mark{font-size:20px}.instrument{width:clamp(64px,18vmin,112px);top:45%}.drum-pad--hat .instrument{height:clamp(42px,10vmin,64px)}.pad-name{font-size:clamp(27px,5vw,52px)}.pad-detail,.hit-count,.footer-note{display:none}}@media (prefers-reduced-motion:reduce){.drum-pad:after,.instrument,.status-light{transition:none}}