@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;overflow-x:hidden}:root{--bg-primary: #0a0a1a;--bg-secondary: #12122a;--bg-surface: rgba(255, 255, 255, .04);--bg-surface-hover: rgba(255, 255, 255, .08);--bg-glass: rgba(255, 255, 255, .06);--bg-glass-border: rgba(255, 255, 255, .1);--text-primary: #e8e8f0;--text-secondary: #8888a8;--text-muted: #555570;--text-accent: #00d4ff;--color-cymbal: #00d4ff;--color-cymbal-glow: rgba(0, 212, 255, .35);--color-cymbal-dim: rgba(0, 212, 255, .12);--color-snare: #ff006e;--color-snare-glow: rgba(255, 0, 110, .35);--color-snare-dim: rgba(255, 0, 110, .12);--color-kick: #ffbe0b;--color-kick-glow: rgba(255, 190, 11, .35);--color-kick-dim: rgba(255, 190, 11, .12);--color-tom: #8338ec;--color-tom-glow: rgba(131, 56, 236, .35);--color-tom-dim: rgba(131, 56, 236, .12);--color-crash: #fb5607;--color-crash-glow: rgba(251, 86, 7, .35);--color-crash-dim: rgba(251, 86, 7, .12);--playhead-color: rgba(255, 255, 255, .15);--playhead-active: rgba(255, 255, 255, .25);--cell-size: 28px;--cell-gap: 3px;--cell-radius: 5px;--cell-bg: rgba(255, 255, 255, .03);--cell-bg-hover: rgba(255, 255, 255, .07);--cell-border: rgba(255, 255, 255, .06);--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 24px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);--shadow-md: 0 4px 16px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .5);--shadow-glow: 0 0 20px rgba(0, 212, 255, .15);--transition-fast: .12s ease;--transition-normal: .2s ease;--transition-slow: .35s ease-out;--font-mono: "JetBrains Mono", "Fira Code", monospace}.glass-panel{background:var(--bg-glass);border:1px solid var(--bg-glass-border);border-radius:var(--radius-lg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#fff3}::selection{background:#00d4ff4d;color:var(--text-primary)}@media(max-width:768px){:root{--cell-size: 22px;--cell-gap: 2px;--space-md: 12px;--space-lg: 16px;--space-xl: 20px}}@media(max-width:480px){:root{--cell-size: 18px;--space-md: 8px}}.grid-wrapper{overflow-x:auto;padding:var(--space-md) 0 var(--space-md) var(--space-md);scrollbar-width:thin;-webkit-overflow-scrolling:touch;position:relative}.grid-container{display:flex;flex-direction:column;gap:var(--cell-gap);min-width:fit-content}.measure-header{display:flex;align-items:center;gap:var(--cell-gap);margin-bottom:var(--space-xs)}.measure-header__label-spacer{width:110px;flex-shrink:0}.measure-header__measures{display:flex;gap:var(--space-md)}.measure-header__measure{display:flex;flex-direction:column;gap:2px}.measure-header__title{font-family:var(--font-mono);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);text-align:center;padding-bottom:2px}.measure-header__beats,.measure-header__beat-group{display:flex;gap:var(--cell-gap)}.measure-header__beat-group:not(:last-child){margin-right:4px}.measure-header__step{width:var(--cell-size);height:18px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:9px;font-weight:500;color:#ffffff38;border-radius:3px}.measure-header__step--downbeat{color:var(--text-secondary);font-weight:700;font-size:10px;background:#ffffff0d}.grid-row{display:flex;align-items:center;gap:var(--cell-gap)}.grid-row__label{width:110px;flex-shrink:0;display:flex;align-items:center;gap:var(--space-sm);padding:0 var(--space-sm);cursor:pointer;user-select:none;transition:opacity var(--transition-normal)}.grid-row__label:hover{opacity:.8}.grid-row__label--muted{opacity:.35}.grid-row__label-icon{width:8px;height:8px;border-radius:50%;flex-shrink:0;transition:box-shadow var(--transition-normal)}.grid-row__label-text{font-size:12px;font-weight:500;color:var(--text-secondary);white-space:nowrap;transition:color var(--transition-normal)}.grid-row__label:hover .grid-row__label-text{color:var(--text-primary)}.grid-row__label-alt{font-size:9px;font-weight:400;color:var(--text-muted);font-style:italic}.grid-row__cells{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--cell-gap);flex:1;min-width:0}.grid-row__measure-block{display:flex;flex-direction:column;gap:2px}.grid-row__measure-label{display:none;font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:1px;color:var(--text-muted);text-transform:uppercase;padding-left:2px}.grid-row__measure-steps{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--cell-gap)}.grid-row__measure-separator{width:var(--space-md);flex-shrink:0}.grid-row__beat-group{display:flex;gap:var(--cell-gap)}.grid-row__beat-group:not(:last-child){margin-right:4px}.grid-cell{width:var(--cell-size);height:var(--cell-size);border-radius:var(--cell-radius);background:var(--cell-bg);border:1px solid var(--cell-border);cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast);position:relative;overflow:hidden}.grid-cell:hover{background:var(--cell-bg-hover);border-color:#ffffff1f;transform:scale(1.08)}.grid-cell:active{transform:scale(.92)}.grid-cell--active[data-color=cymbal]{background:var(--color-cymbal-dim);border-color:var(--color-cymbal);box-shadow:0 0 8px var(--color-cymbal-glow),inset 0 0 6px var(--color-cymbal-dim)}.grid-cell--active[data-color=snare]{background:var(--color-snare-dim);border-color:var(--color-snare);box-shadow:0 0 8px var(--color-snare-glow),inset 0 0 6px var(--color-snare-dim)}.grid-cell--active[data-color=kick]{background:var(--color-kick-dim);border-color:var(--color-kick);box-shadow:0 0 8px var(--color-kick-glow),inset 0 0 6px var(--color-kick-dim)}.grid-cell--active[data-color=tom]{background:var(--color-tom-dim);border-color:var(--color-tom);box-shadow:0 0 8px var(--color-tom-glow),inset 0 0 6px var(--color-tom-dim)}.grid-cell--active[data-color=crash]{background:var(--color-crash-dim);border-color:var(--color-crash);box-shadow:0 0 8px var(--color-crash-glow),inset 0 0 6px var(--color-crash-dim)}.grid-cell--alt[data-color=cymbal]{background:#00d4ff33;border-color:var(--color-cymbal);box-shadow:0 0 12px var(--color-cymbal-glow),inset 0 0 8px var(--color-cymbal-dim)}.grid-cell--alt[data-color=snare]{background:#ff006e33;border-color:var(--color-snare);box-shadow:0 0 12px var(--color-snare-glow),inset 0 0 8px var(--color-snare-dim)}.grid-cell--alt[data-color=tom]{background:#8338ec33;border-color:var(--color-tom);box-shadow:0 0 12px var(--color-tom-glow),inset 0 0 8px var(--color-tom-dim)}.grid-cell--alt:after{content:"";position:absolute;bottom:3px;right:3px;width:5px;height:5px;border-radius:50%;background:#fff;opacity:.6}.grid-cell--playing{border-color:#ffffff4d!important;background:var(--playhead-active)!important}.grid-cell--playing.grid-cell--active,.grid-cell--playing.grid-cell--alt{transform:scale(1.12)}.add-measure-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);margin:var(--space-md) auto 0;background:var(--bg-surface);border:1px dashed var(--bg-glass-border);border-radius:var(--radius-md);color:var(--text-muted);font-family:Inter,sans-serif;font-size:12px;cursor:pointer;transition:all var(--transition-normal)}.add-measure-btn:hover{background:var(--bg-surface-hover);border-color:var(--text-muted);color:var(--text-secondary)}.add-measure-controls{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);margin-top:var(--space-md)}.measure-control-btn:hover{background:var(--bg-surface-hover);color:var(--text-secondary);border-color:var(--text-muted)}.measure-control-btn--remove{border-color:#ff3c3c33}@media(max-width:600px){html,body{overflow-x:hidden;max-width:100vw}.controls-bar{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;justify-content:flex-start;padding:var(--space-sm) var(--space-md);gap:8px}.controls-bar::-webkit-scrollbar{display:none}.controls-bar>*{flex-shrink:0}.drum-machine{padding:0 0 var(--space-xl)}.drum-machine__controls-panel,.drum-machine__grid-panel{border-radius:0;margin:0 0 4px}.drum-machine__grid-panel{padding:var(--space-sm)}.app-header__budgie{width:48px;height:48px;left:var(--space-sm)}.grid-wrapper{overflow:visible;padding:0}.grid-container{min-width:unset!important;width:100%;gap:0}.measure-controls{display:flex;flex-direction:row;justify-content:flex-end;gap:6px;padding:4px 0 8px;margin:0}.measure-controls .measure-control-btn{font-size:11px;padding:4px 10px;height:30px}.measure-header{display:none}.grid-row{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.05)}.grid-row__label{width:100%;flex-shrink:0;padding:0 4px 2px;height:auto;min-height:18px}.grid-row__label-text{font-size:11px}.grid-row__label-alt{font-size:9px}.grid-row__cells{display:flex;flex-direction:column;flex-wrap:nowrap;gap:4px;width:100%;padding:2px 0 4px;overflow:visible}.grid-row__measure-block{display:flex;flex-direction:column;gap:2px;width:100%}.grid-row__measure-label{display:block}.grid-row__measure-steps{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--cell-gap);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}.grid-row__measure-steps::-webkit-scrollbar{display:none}.grid-row__beat-group{flex-shrink:0}.grid-cell{flex-shrink:0;width:var(--cell-size);height:var(--cell-size)}}.app-header{text-align:center;padding:var(--space-xl) var(--space-md) var(--space-md);position:relative;display:flex;flex-direction:column;align-items:center}.app-header__budgie{position:absolute;left:16px;bottom:4px;width:56px;height:56px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 2px 8px rgba(0,212,255,.25));pointer-events:none;user-select:none;opacity:.9}.app-header__title{font-size:28px;font-weight:700;background:linear-gradient(135deg,var(--color-cymbal),var(--color-snare),var(--color-kick));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.5px}.app-header__subtitle{font-size:13px;color:var(--text-muted);margin-top:var(--space-xs)}.drum-machine{max-width:1200px;margin:0 auto;padding:0 var(--space-md) var(--space-2xl)}.drum-machine__grid-panel{padding:var(--space-lg);margin-bottom:var(--space-md)}.drum-machine__controls-panel{padding:var(--space-sm) var(--space-lg)}.controls-bar{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--space-md);padding:var(--space-md) var(--space-lg)}.transport{display:flex;align-items:center;gap:var(--space-sm)}.transport__btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:none;border-radius:var(--radius-md);cursor:pointer;font-size:18px;transition:all var(--transition-normal);position:relative;overflow:hidden}.transport__btn--play{background:linear-gradient(135deg,var(--color-cymbal),#0099cc);color:#fff;box-shadow:0 4px 16px #00d4ff4d}.transport__btn--play:hover{box-shadow:0 4px 24px #00d4ff80;transform:translateY(-1px)}.transport__btn--play:active{transform:translateY(0)}.transport__btn--play.is-playing{background:linear-gradient(135deg,#ff006e,#c05);box-shadow:0 4px 16px #ff006e4d}.transport__btn--play.is-playing:hover{box-shadow:0 4px 24px #ff006e80}.bpm-control{display:flex;align-items:center;gap:var(--space-sm);background:var(--bg-surface);border:1px solid var(--bg-glass-border);border-radius:var(--radius-md);padding:var(--space-xs) var(--space-md);height:44px}.bpm-control__label{font-family:var(--font-mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted)}.bpm-control__input{width:52px;background:transparent;border:none;color:var(--text-primary);font-family:var(--font-mono);font-size:16px;font-weight:600;text-align:center;outline:none}.bpm-control__input:focus{color:var(--color-cymbal)}.bpm-control__input::-webkit-inner-spin-button,.bpm-control__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.bpm-control__input[type=number]{-moz-appearance:textfield}.bpm-control__slider{width:80px;height:4px;-webkit-appearance:none;appearance:none;background:#ffffff1a;border-radius:2px;outline:none}.bpm-control__slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--color-cymbal);cursor:pointer;box-shadow:0 0 8px #00d4ff66}.bpm-control__slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--color-cymbal);cursor:pointer;border:none}.swing-control{display:flex;align-items:center;gap:var(--space-sm);background:var(--bg-surface);border:1px solid var(--bg-glass-border);border-radius:var(--radius-md);padding:var(--space-xs) var(--space-md);height:44px;cursor:pointer;transition:all var(--transition-normal)}.swing-control:hover{border-color:#ffffff26}.swing-control__label{font-family:var(--font-mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted)}.swing-control__toggle{width:36px;height:20px;border-radius:10px;background:#ffffff1a;position:relative;transition:background var(--transition-normal)}.swing-control__toggle--active{background:var(--color-cymbal)}.swing-control__toggle:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform var(--transition-normal)}.swing-control__toggle--active:after{transform:translate(16px)}.action-btn{display:flex;align-items:center;justify-content:center;gap:6px;height:44px;padding:0 var(--space-md);background:var(--bg-surface);border:1px solid var(--bg-glass-border);border-radius:var(--radius-md);color:var(--text-secondary);font-family:Inter,sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:all var(--transition-normal);white-space:nowrap}.action-btn:hover{background:var(--bg-surface-hover);border-color:#ffffff26;color:var(--text-primary)}.action-btn--clear:hover{border-color:#ff3c3c66;color:#ff6b6b}.action-btn--share{background:linear-gradient(135deg,#00d4ff1a,#8338ec1a);border-color:#00d4ff33}.action-btn--share:hover{background:linear-gradient(135deg,#00d4ff33,#8338ec33);border-color:var(--color-cymbal);color:var(--color-cymbal)}.action-btn--share.is-copied{background:#32cd3226;border-color:#32cd3266;color:#32cd32}.preset-select{height:44px;padding:0 32px 0 var(--space-md);background:var(--bg-surface);border:1px solid var(--bg-glass-border);border-radius:var(--radius-md);color:var(--text-secondary);font-family:Inter,sans-serif;font-size:13px;cursor:pointer;outline:none;appearance:none;-webkit-appearance:none}.preset-select:hover{border-color:#ffffff26}.preset-select:focus{border-color:var(--color-cymbal)}.preset-select option{background:#1a1a2e;color:var(--text-primary)}.transport-group{display:flex;align-items:center;gap:var(--space-sm)}.select-wrapper{position:relative;display:inline-flex;align-items:center}.control-select{height:44px;padding:0 30px 0 var(--space-md);background:var(--bg-surface);border:1px solid var(--bg-glass-border);border-radius:var(--radius-md);color:var(--text-secondary);font-family:Inter,sans-serif;font-size:13px;font-weight:500;cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;transition:border-color var(--transition-normal),color var(--transition-normal);min-width:80px}.control-select:hover{border-color:#ffffff26;color:var(--text-primary)}.control-select:focus{border-color:var(--color-cymbal);box-shadow:0 0 0 2px #00d4ff26}.control-select option{background:#1a1a2e;color:var(--text-primary)}.select-icon{position:absolute;right:9px;pointer-events:none;color:var(--text-muted);font-size:13px;line-height:1;top:50%;transform:translateY(-50%)}.measure-controls{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);margin-top:var(--space-md)}.measure-control-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 14px;background:var(--bg-surface);border:1px solid var(--bg-glass-border);border-radius:var(--radius-sm);color:var(--text-muted);font-family:Inter,sans-serif;font-size:12px;cursor:pointer;transition:all var(--transition-normal)}.measure-control-btn:hover{background:var(--bg-surface-hover);border-color:var(--text-muted);color:var(--text-secondary)}.measure-control-btn--remove:hover{border-color:#ff3c3c80;color:#ff6b6b;background:#ff3c3c14}@media(max-width:600px){.controls-bar{justify-content:flex-start;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}.controls-bar::-webkit-scrollbar{display:none}.transport-group,.action-btn,.bpm-control,.swing-control{flex-shrink:0}.bpm-control__slider{width:56px}.control-select{min-width:68px;font-size:12px}}@keyframes pulse-glow{0%,to{opacity:1}50%{opacity:.7}}@keyframes ripple{0%{transform:scale(0);opacity:.6}to{transform:scale(2.5);opacity:0}}@keyframes playhead-sweep{0%{opacity:.3}to{opacity:.1}}@keyframes fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes toast-in{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes toast-out{0%{transform:translateY(0);opacity:1}to{transform:translateY(-20px);opacity:0}}.grid-cell .ripple{position:absolute;border-radius:50%;background:#ffffff4d;animation:ripple .4s ease-out forwards;pointer-events:none}.grid-cell--playing.grid-cell--active,.grid-cell--playing.grid-cell--alt{animation:pulse-glow .2s ease-out}.drum-machine{animation:fade-in .6s ease-out}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);background:#32cd3226;border:1px solid rgba(50,205,50,.3);backdrop-filter:blur(12px);color:#32cd32;padding:10px 24px;border-radius:12px;font-size:13px;font-weight:500;z-index:1000;animation:toast-in .3s ease-out;pointer-events:none}.toast--out{animation:toast-out .3s ease-out forwards}body:before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse at 20% 50%,rgba(0,212,255,.04) 0%,transparent 60%),radial-gradient(ellipse at 80% 50%,rgba(131,56,236,.04) 0%,transparent 60%),radial-gradient(ellipse at 50% 100%,rgba(255,0,110,.03) 0%,transparent 50%);pointer-events:none;z-index:-1}