:root{--cream:#f5f0e8;--cream-dark:#ebe4d8;--cream-deep:#ddd5c5;--ink:#1a1714;--ink-soft:#3d3830;--ink-ghost:#8a8279;--ink-whisper:#b5ada3;--glow-kick:#ff3b3b;--glow-kick-soft:#ff3b3b26;--glow-kick-luminous:#ff3b3b99;--glow-snare:#00e5ff;--glow-snare-soft:#00e5ff26;--glow-snare-luminous:#00e5ff99;--glow-hat:#0f8;--glow-hat-soft:#00ff8826;--glow-hat-luminous:#0f89;--bio-cyan:#78dcff66;--bio-warm:#ffc8964d;--danger-soft:#ff4d3a33;--success-soft:#3dd68c33}*{box-sizing:border-box;margin:0;padding:0}body.visualizer-body{background:#f5f0e8;background:var(--cream);color:#1a1714;color:var(--ink);font-family:DM Mono,monospace;min-height:100vh;overflow-x:hidden;position:relative}body.visualizer-body:before{animation:blobDrift 20s ease-in-out infinite alternate;background:radial-gradient(ellipse at 40% 40%,#78dcff66,#0000 70%);background:radial-gradient(ellipse at 40% 40%,var(--bio-cyan),#0000 70%);border-radius:48% 52% 68% 32%/42% 58% 42% 58%;height:60vw;right:-10%;top:-20%;width:60vw}body.visualizer-body:after,body.visualizer-body:before{content:"";filter:blur(80px);pointer-events:none;position:fixed;z-index:0}body.visualizer-body:after{animation:blobDrift 25s ease-in-out infinite alternate-reverse;background:radial-gradient(ellipse at 60% 60%,#ffc8964d,#0000 70%);background:radial-gradient(ellipse at 60% 60%,var(--bio-warm),#0000 70%);border-radius:62% 38% 46% 54%/52% 36% 64% 48%;bottom:-15%;height:50vw;left:-15%;width:50vw}@keyframes blobDrift{0%{transform:translate(0) rotate(0deg) scale(1)}33%{transform:translate(3%,-2%) rotate(5deg) scale(1.05)}66%{transform:translate(-2%,3%) rotate(-3deg) scale(.95)}to{transform:translate(1%,1%) rotate(2deg) scale(1.02)}}.grain{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");inset:0;opacity:.035;pointer-events:none;position:fixed;z-index:9999}.app{margin:0 auto;max-width:1100px;padding:48px 40px 80px;position:relative;z-index:1}.app-header{margin-bottom:48px;text-align:center}.app-title{color:#1a1714;color:var(--ink);font-family:"Instrument Serif",serif;font-size:clamp(52px,8vw,80px);font-style:italic;font-weight:400;letter-spacing:-2px;line-height:.9}.app-title--midimi{align-items:baseline;display:flex;flex-wrap:wrap;gap:0;justify-content:center}.app-title .glow-letter{display:inline-block;position:relative}.app-title .glow-letter:after{animation:letterGlow 4s ease-in-out infinite;color:#0000;content:attr(data-char);inset:0;opacity:0;pointer-events:none;position:absolute;text-shadow:0 0 40px #ff3b3b99,0 0 80px #ff3b3b26;text-shadow:0 0 40px var(--glow-kick-luminous),0 0 80px var(--glow-kick-soft)}.title-word .glow-letter:nth-child(2):after{animation-delay:.5s}.title-word .glow-letter:nth-child(3):after{animation-delay:1s;text-shadow:0 0 40px #00e5ff99,0 0 80px #00e5ff26;text-shadow:0 0 40px var(--glow-snare-luminous),0 0 80px var(--glow-snare-soft)}.title-word .glow-letter:nth-child(4):after{animation-delay:1.5s;text-shadow:0 0 40px #0f89,0 0 80px #00ff8826;text-shadow:0 0 40px var(--glow-hat-luminous),0 0 80px var(--glow-hat-soft)}.title-word .glow-letter:nth-child(5):after{animation-delay:2s}.title-word .glow-letter:nth-child(6):after{animation-delay:2.5s;text-shadow:0 0 40px #ff3b3b99,0 0 80px #ff3b3b26;text-shadow:0 0 40px var(--glow-kick-luminous),0 0 80px var(--glow-kick-soft)}@keyframes letterGlow{0%,to{opacity:0}50%{opacity:.7}}.subtitle{color:#8a8279;color:var(--ink-ghost);font-family:DM Mono,monospace;font-size:11px;font-weight:300;letter-spacing:3px;margin-top:12px;max-width:100%;text-transform:uppercase}.section-header{align-items:center;display:flex;gap:16px;margin-bottom:24px}.section-title{color:#1a1714;color:var(--ink);font-family:"Instrument Serif",serif;font-size:28px;font-style:italic;font-weight:400;white-space:nowrap}.section-line{background:linear-gradient(90deg,#b5ada3,#0000);background:linear-gradient(to right,var(--ink-whisper),#0000);flex:1 1;height:1px}.section-microcopy{color:#8a8279;color:var(--ink-ghost);font-family:DM Mono,monospace;font-size:10px;font-weight:300;line-height:1.55}.section-microcopy--below{margin-bottom:24px;margin-top:-12px;max-width:52ch}.section-spaced{margin-top:48px}.alert-block{margin-top:24px}.meta-nested{margin-top:20px}.drop-zone-shell{aspect-ratio:1;cursor:pointer;margin:0 auto 48px;position:relative;width:min(300px,82vw)}.drop-zone-blob{animation:blobSpin 18s linear infinite;background:#ebe4d8;background:var(--cream-dark);border-radius:50% 45% 42% 48%/46% 50% 44% 48%;inset:0;overflow:visible;position:absolute;transition:box-shadow .35s ease}.drop-zone-blob:before{animation:blobSpin 8s linear infinite reverse;background:conic-gradient(from 0deg,#96d7ff99,#c8aaff80,#ffb4c873,#ffdc9666,#96d7ff99);inset:-2px;z-index:-1}.drop-zone-blob:after,.drop-zone-blob:before{border-radius:inherit;content:"";position:absolute}.drop-zone-blob:after{background:#ebe4d8;background:var(--cream-dark);inset:0;z-index:0}@keyframes blobSpin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@media (prefers-reduced-motion:reduce){.drop-zone-blob{animation:none}}.drop-zone-content{align-items:center;cursor:pointer;display:flex;flex-direction:column;height:100%;justify-content:center;padding:28px 22px;position:relative;text-align:center;width:100%;z-index:2}.drop-zone-content:focus-visible{border-radius:50%;outline:2px solid #1a1714;outline:2px solid var(--ink);outline-offset:3px}.drop-zone-content .drop-icon,.drop-zone-content .drop-text{color:#3d3830;color:var(--ink-soft)}.drop-zone-content .drop-text strong{color:#1a1714;color:var(--ink)}.drop-zone-content .drop-hint{color:#8a8279;color:var(--ink-ghost)}.drop-icon{display:block;font-family:"Instrument Serif",serif;font-size:28px;font-style:italic;margin-bottom:10px;opacity:.4}.drop-text{color:#8a8279;color:var(--ink-ghost);font-size:12px;font-weight:300;line-height:2}.drop-text strong{color:#3d3830;color:var(--ink-soft);font-weight:500}.drop-hint{color:#b5ada3;color:var(--ink-whisper);font-size:10px;letter-spacing:.5px;margin-top:8px}.visually-hidden-input{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.control-group{align-items:center;background:#ebe4d8;background:var(--cream-dark);border-radius:20px;display:flex;gap:10px;padding:10px 16px}.control-label{color:#8a8279;color:var(--ink-ghost);font-size:9px;font-weight:300}.control-label,.export-btn{letter-spacing:2px;text-transform:uppercase}.export-btn{background:#0000;border:1.5px solid #1a1714;border:1.5px solid var(--ink);border-radius:20px;color:#1a1714;color:var(--ink);cursor:pointer;font-family:DM Mono,monospace;font-size:10px;font-weight:400;padding:10px 20px;transition:all .3s}.export-btn:hover:not(:disabled){background:#1a1714;background:var(--ink);color:#f5f0e8;color:var(--cream)}.export-btn:disabled{cursor:not-allowed;opacity:.45}.export-btn--block{display:block;margin-top:20px;text-align:center;width:100%}.info-card{background:#ebe4d8;background:var(--cream-dark);border-radius:24px;overflow:hidden;padding:24px 20px;position:relative}.info-card:after{background:radial-gradient(circle,#78dcff66,#0000 70%);background:radial-gradient(circle,var(--bio-cyan),#0000 70%);border-radius:50%;bottom:-20px;content:"";height:80px;opacity:.3;position:absolute;right:-20px;width:80px}.info-card-label{color:#8a8279;color:var(--ink-ghost);font-size:9px;font-weight:300;letter-spacing:2px;margin-bottom:10px;text-transform:uppercase}.info-card-value{color:#1a1714;color:var(--ink);font-family:"Instrument Serif",serif;font-size:22px;font-style:italic;font-weight:400;position:relative;word-break:break-word;z-index:1}.info-card-detail{color:#8a8279;color:var(--ink-ghost);font-size:10px;font-weight:300;margin-top:6px;position:relative;z-index:1}.file-meta-grid{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:24px}.pattern-desc{background:#f5f0e8;background:var(--cream);border-radius:20px;font-family:"Instrument Serif",serif;font-size:16px;font-style:italic;font-weight:400;line-height:1.8;margin-top:20px;padding:20px 24px}.pattern-desc,.pattern-desc--error{color:#3d3830;color:var(--ink-soft)}.pattern-desc--error{border:1px solid #ff4d3a33;border:1px solid var(--danger-soft)}.pattern-desc--success{border:1px solid #3dd68c33;border:1px solid var(--success-soft)}.panel-heading{color:#3d3830;color:var(--ink-soft);font-family:DM Mono,monospace;font-size:11px;font-style:normal;font-weight:400;letter-spacing:2px;text-transform:uppercase}.panel-body{margin-top:12px}.text-link{background:none;border:none;color:#3d3830;color:var(--ink-soft);cursor:pointer;font-family:DM Mono,monospace;font-size:11px;font-weight:400;margin-top:16px;text-decoration:underline;text-underline-offset:3px}.text-link:hover{color:#1a1714;color:var(--ink)}.progress-bar{background:#ddd5c5;background:var(--cream-deep);border-radius:3px;height:6px;margin-top:12px;overflow:hidden;width:100%}.progress-bar-fill{background:#1a1714;background:var(--ink);border-radius:3px;height:100%;transition:width .3s ease}.loading-overlay{align-items:center;background:#f5f0e8eb;display:none;inset:0;justify-content:center;position:fixed;z-index:100}.loading-overlay.active{animation:overlayIn .4s ease;display:flex}@keyframes overlayIn{0%{opacity:0}to{opacity:1}}.loading-grid-bg{inset:0;pointer-events:none;position:absolute}.loading-cell{background:#96d7ff;background:var(--cell-color,#96d7ff);border-radius:3px;height:6px;opacity:0;position:absolute;transform:scale(0);transition:opacity .6s ease,transform .45s cubic-bezier(.34,1.56,.64,1);width:6px}.loading-cell.visible{animation:cellBreath 2.4s ease-in-out infinite alternate;box-shadow:0 0 8px #96d7ff;box-shadow:0 0 8px var(--cell-color,#96d7ff);opacity:.85;transform:scale(1)}@keyframes cellBreath{0%{opacity:.35;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.loading-content{align-items:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#f5f0e8d9;border-radius:16px;box-shadow:0 4px 40px #0000000f;display:flex;flex-direction:column;gap:16px;max-width:80vw;padding:32px 28px;position:relative;width:280px;z-index:1}.loading-bar-track{background:#ddd5c5;background:var(--cream-deep);border-radius:3px;height:5px;overflow:hidden;width:100%}.loading-bar-fill{background:#1a1714;background:var(--ink);border-radius:3px;height:100%;transition:width .5s ease}.loading-status{font-size:12px;letter-spacing:1.5px;text-align:center;text-transform:uppercase}.loading-pct,.loading-status{color:#1a1714;color:var(--ink);font-family:DM Mono,monospace}.loading-pct{font-size:28px;font-weight:600;letter-spacing:2px}.app-footer{color:#b5ada3;color:var(--ink-whisper);font-size:10px;font-weight:300;letter-spacing:2px;margin-top:56px;text-align:center;text-transform:uppercase}.hidden{display:none!important}.preset-grid{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));margin-bottom:48px}.preset-btn{background:#ebe4d8;background:var(--cream-dark);border:1px solid #0000;border-radius:20px;color:#1a1714;color:var(--ink);cursor:pointer;font-family:DM Mono,monospace;font-size:12px;font-weight:400;overflow:hidden;padding:18px 16px;position:relative;text-align:left;transition:all .4s cubic-bezier(.23,1,.32,1)}.preset-btn:after{background:radial-gradient(circle at 50% 120%,#78dcff66,#0000 70%);background:radial-gradient(circle at 50% 120%,var(--bio-cyan),#0000 70%);border-radius:inherit;content:"";inset:0;opacity:0;position:absolute;transition:opacity .4s}.preset-btn:hover{border-color:#ddd5c5;border-color:var(--cream-deep);box-shadow:0 12px 32px #0000000f;transform:translateY(-3px)}.preset-btn:hover:after{opacity:.5}.preset-btn.active{background:#1a1714;background:var(--ink);border-color:#1a1714;border-color:var(--ink);box-shadow:0 8px 28px #1a17142e;color:#f5f0e8;color:var(--cream);z-index:1}.preset-btn.active:after{opacity:0}.preset-btn.active .preset-genre{color:#f5f0e8bf}.preset-genre{color:#8a8279;color:var(--ink-ghost);font-size:9px;letter-spacing:1.5px;margin-top:6px;text-transform:uppercase}.preset-genre,.preset-name{position:relative;z-index:1}.transport-section{display:flex;flex-direction:column;gap:10px;margin-bottom:28px}.transport-section .transport{margin-bottom:0}.transport-header{align-items:center;display:flex;gap:14px;justify-content:space-between;min-height:36px}.analysis-badge{background:#3dd68c33;background:var(--success-soft);border-radius:4px;color:#3d3830;color:var(--ink-soft);cursor:default;flex-shrink:0;font-family:DM Mono,monospace;font-size:.65rem;letter-spacing:.04em;padding:2px 8px;text-transform:uppercase}.transport-dismiss{align-items:center;background:#f5f0e8;background:var(--cream);border:1.5px solid #1a1714;border:1.5px solid var(--ink);border-radius:50%;box-shadow:0 2px 10px #1a171414;color:#1a1714;color:var(--ink);cursor:pointer;display:flex;flex-shrink:0;font-size:20px;font-weight:300;height:34px;justify-content:center;line-height:1;margin:0;padding:0;transition:background .25s ease,color .25s ease,box-shadow .25s ease;width:34px}.transport-dismiss:hover{background:#1a1714;background:var(--ink);box-shadow:0 6px 20px #1a17142e;color:#f5f0e8;color:var(--cream)}.transport{align-items:center;background:#ebe4d8;background:var(--cream-dark);border-radius:28px;display:flex;gap:16px;margin-bottom:28px;overflow:hidden;padding:18px 24px;position:relative}.transport:before{background:linear-gradient(90deg,#0000,#b5ada3,#0000);background:linear-gradient(to right,#0000,var(--ink-whisper),#0000);content:"";height:1px;left:0;position:absolute;right:0;top:0}.transport-btn{align-items:center;background:#0000;border:1.5px solid #1a1714;border:1.5px solid var(--ink);border-radius:50%;color:#1a1714;color:var(--ink);cursor:pointer;display:flex;flex-shrink:0;font-size:14px;height:44px;justify-content:center;transition:all .3s;width:44px}.transport-btn:hover{background:#1a1714;background:var(--ink);box-shadow:0 0 24px #1a171426;color:#f5f0e8;color:var(--cream)}.track-name{color:#3d3830;color:var(--ink-soft);font-size:11px;font-weight:300;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-name--header{color:#1a1714;color:var(--ink);flex:1 1;font-size:12px;max-width:none;min-width:0;text-align:left}.waveform-container{background:#ddd5c5;background:var(--cream-deep);border-radius:22px;cursor:pointer;flex:1 1;height:44px;overflow:hidden;position:relative}.waveform-canvas{display:block;height:100%;width:100%}.region-dim{background:#f5f0e8a6;pointer-events:none;z-index:1}.region-dim,.waveform-region{bottom:0;position:absolute;top:0}.waveform-region{background:#78c8ff1a;cursor:grab;z-index:2}.waveform-region:active{cursor:grabbing}.region-handle{background:#1a1714;background:var(--ink);border-radius:2px;bottom:2px;cursor:col-resize;margin-left:-2px;opacity:.7;position:absolute;top:2px;transition:opacity .2s,transform .2s;width:4px;z-index:3}.region-handle:before{content:"";inset:-8px -10px;position:absolute}.region-handle:hover{opacity:1;transform:scaleX(1.5)}.region-label{font-feature-settings:"tnum";color:#b5ada3;color:var(--ink-whisper);font-size:9px;font-variant-numeric:tabular-nums;font-weight:300;letter-spacing:1px;margin:0 0 6px;text-align:center;text-transform:uppercase}.waveform-zoom-bar{gap:6px;justify-content:flex-end;margin-bottom:6px}.waveform-zoom-bar,.zoom-btn{align-items:center;display:flex}.zoom-btn{background:#ebe4d8;background:var(--cream-dark);border:1px solid #8a8279;border:1px solid var(--ink-ghost);border-radius:6px;color:#3d3830;color:var(--ink-soft);cursor:pointer;font-size:16px;height:26px;justify-content:center;line-height:1;padding:0;transition:background .15s,color .15s;width:26px}.zoom-btn:hover:not(:disabled){background:#1a1714;background:var(--ink);color:#f5f0e8;color:var(--cream)}.zoom-btn:disabled{cursor:default;opacity:.35}.zoom-label{font-feature-settings:"tnum";color:#8a8279;color:var(--ink-ghost);font-family:DM Mono,monospace;font-size:10px;font-variant-numeric:tabular-nums;min-width:22px;text-align:center}.waveform-minimap-wrap{border-radius:4px;cursor:crosshair;margin-top:6px;overflow:hidden;position:relative;-webkit-user-select:none;user-select:none;width:100%}.waveform-minimap-wrap:active{cursor:col-resize}.waveform-minimap{background:#ddd5c5;background:var(--cream-deep);display:block;height:28px;width:100%}.minimap-region{background:#96d7ff2e;border-left:1.5px solid #96d7ffb3;border-right:1.5px solid #96d7ffb3}.minimap-playhead,.minimap-region{height:100%;pointer-events:none;position:absolute;top:0}.minimap-playhead{background:#1a1714;background:var(--ink);opacity:.6;transform:translateX(-50%);width:1.5px}.analyze-btn{background:#0000;border:1.5px solid #1a1714;border:1.5px solid var(--ink);border-radius:20px;color:#1a1714;color:var(--ink);cursor:pointer;flex-shrink:0;font-family:DM Mono,monospace;font-size:10px;font-weight:400;height:34px;letter-spacing:2px;padding:0 14px;text-transform:uppercase;transition:all .3s}.analyze-btn:hover:not(:disabled){background:#1a1714;background:var(--ink);box-shadow:0 6px 20px #1a17142e;color:#f5f0e8;color:var(--cream)}.analyze-btn:disabled{cursor:not-allowed;opacity:.45}.playhead{background:#ff3b3b;background:var(--glow-kick);border-radius:1px;bottom:4px;box-shadow:0 0 12px #ff3b3b99;box-shadow:0 0 12px var(--glow-kick-luminous);left:0;pointer-events:none;position:absolute;top:4px;transition:left .05s linear;width:2px;z-index:4}.time-display{font-feature-settings:"tnum";color:#8a8279;color:var(--ink-ghost);flex-shrink:0;font-size:11px;font-variant-numeric:tabular-nums;font-weight:300;min-width:40px;text-align:right}.transport .time-display{align-self:center}.controls-row{align-items:center;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;margin-bottom:28px;width:100%}.controls-row .export-btn{flex-shrink:0;margin-left:auto}@media (max-width:640px){.controls-row{align-items:stretch;flex-direction:column}.controls-row .control-group{justify-content:space-between;width:100%}.controls-row .export-btn{margin-left:0;text-align:center;width:100%}}.grid-select{background:#0000;border:1px solid #ddd5c5;border:1px solid var(--cream-deep);border-radius:12px;color:#1a1714;color:var(--ink);cursor:pointer;font-family:DM Mono,monospace;font-size:11px;font-weight:300;padding:6px 10px}.analysis-info{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(4,1fr);margin-bottom:36px}.analysis-info .info-card:nth-child(2):after{background:radial-gradient(circle,#00e5ff26,#0000 70%);background:radial-gradient(circle,var(--glow-snare-soft),#0000 70%);opacity:.5}.analysis-info .info-card:nth-child(3):after{background:radial-gradient(circle,#00ff8826,#0000 70%);background:radial-gradient(circle,var(--glow-hat-soft),#0000 70%);opacity:.5}.analysis-info .info-card:nth-child(4):after{background:radial-gradient(circle,#ff3b3b26,#0000 70%);background:radial-gradient(circle,var(--glow-kick-soft),#0000 70%);opacity:.5}.analysis-info .info-card-value{font-size:32px}.grid-wrapper{background:#ebe4d8;background:var(--cream-dark);border-radius:32px;box-shadow:inset 0 0 80px #78dcff08;overflow-x:auto;padding:32px;position:relative}.grid-header{align-items:center;display:flex;margin-bottom:10px;padding-left:90px}.beat-label{color:#b5ada3;color:var(--ink-whisper);flex:1 1;font-size:9px;font-weight:300;letter-spacing:1px;text-align:center}.beat-label.downbeat{color:#8a8279;color:var(--ink-ghost);font-weight:500}.grid-row{margin-bottom:6px}.grid-row,.row-label{align-items:center;display:flex}.row-label{color:#8a8279;color:var(--ink-ghost);flex-shrink:0;font-size:10px;font-weight:300;gap:10px;letter-spacing:2px;text-transform:uppercase;width:90px}.row-dot{border-radius:50%;flex-shrink:0;height:10px;position:relative;width:10px}.row-dot:after{animation:dotPulse 3s ease-in-out infinite;border-radius:50%;content:"";inset:-4px;position:absolute}.row-dot.kick{background:#ff3b3b;background:var(--glow-kick);box-shadow:0 0 12px #ff3b3b99;box-shadow:0 0 12px var(--glow-kick-luminous)}.row-dot.kick:after{background:#ff3b3b26;background:var(--glow-kick-soft)}.row-dot.snare{background:#00e5ff;background:var(--glow-snare);box-shadow:0 0 12px #00e5ff99;box-shadow:0 0 12px var(--glow-snare-luminous)}.row-dot.snare:after{animation-delay:1s;background:#00e5ff26;background:var(--glow-snare-soft)}.row-dot.hihat{background:#0f8;background:var(--glow-hat);box-shadow:0 0 12px #0f89;box-shadow:0 0 12px var(--glow-hat-luminous)}.row-dot.hihat:after{animation-delay:2s;background:#00ff8826;background:var(--glow-hat-soft)}@keyframes dotPulse{0%,to{opacity:.6;transform:scale(1)}50%{opacity:0;transform:scale(1.8)}}.grid-cells{display:flex;flex:1 1}.grid-cell{aspect-ratio:1;background:#f5f0e8;background:var(--cream);border:none;border-radius:12px;cursor:pointer;flex:1 1;margin:3px;max-height:40px;overflow:hidden;padding:0;position:relative;transition:all .25s cubic-bezier(.23,1,.32,1)}.grid-cell.downbeat{border-radius:14px;box-shadow:inset 0 0 0 1px #ddd5c5;box-shadow:inset 0 0 0 1px var(--cream-deep)}.grid-cell.active-col{background:#ffffff1f;box-shadow:inset 0 0 0 1px #ffffff2e}.grid-cell.active-col.active-kick{box-shadow:0 0 14px #ff3b3b99,inset 0 0 0 2px #ffffff4d;box-shadow:0 0 14px var(--glow-kick-luminous),inset 0 0 0 2px #ffffff4d}.grid-cell.active-col.active-snare{box-shadow:0 0 14px #00e5ff99,inset 0 0 0 2px #ffffff4d;box-shadow:0 0 14px var(--glow-snare-luminous),inset 0 0 0 2px #ffffff4d}.grid-cell.active-col.active-hihat{box-shadow:0 0 14px #0f89,inset 0 0 0 2px #ffffff4d;box-shadow:0 0 14px var(--glow-hat-luminous),inset 0 0 0 2px #ffffff4d}.grid-cell:hover{transform:scale(1.15);z-index:2}.grid-cell.active-kick{animation:cellGlowKick 2s ease-in-out infinite alternate;background:#ff3b3b;background:var(--glow-kick);border-radius:14px 10px 16px 12px;box-shadow:0 0 20px #ff3b3b99,0 0 40px #ff3b3b26,inset 0 0 12px #fff3;box-shadow:0 0 20px var(--glow-kick-luminous),0 0 40px var(--glow-kick-soft),inset 0 0 12px #fff3}.grid-cell.active-snare{animation:cellGlowSnare 2.5s ease-in-out infinite alternate;background:#00e5ff;background:var(--glow-snare);border-radius:12px 16px 10px 14px;box-shadow:0 0 20px #00e5ff99,0 0 40px #00e5ff26,inset 0 0 12px #ffffff40;box-shadow:0 0 20px var(--glow-snare-luminous),0 0 40px var(--glow-snare-soft),inset 0 0 12px #ffffff40}.grid-cell.active-hihat{animation:cellGlowHat 1.8s ease-in-out infinite alternate;background:#0f8;background:var(--glow-hat);border-radius:16px 12px 14px 10px;box-shadow:0 0 20px #0f89,0 0 40px #00ff8826,inset 0 0 12px #fff3;box-shadow:0 0 20px var(--glow-hat-luminous),0 0 40px var(--glow-hat-soft),inset 0 0 12px #fff3}@keyframes cellGlowKick{0%{box-shadow:0 0 16px #ff3b3b99,0 0 32px #ff3b3b26;box-shadow:0 0 16px var(--glow-kick-luminous),0 0 32px var(--glow-kick-soft)}to{box-shadow:0 0 24px #ff3b3b99,0 0 48px #ff3b3b26;box-shadow:0 0 24px var(--glow-kick-luminous),0 0 48px var(--glow-kick-soft)}}@keyframes cellGlowSnare{0%{box-shadow:0 0 16px #00e5ff99,0 0 32px #00e5ff26;box-shadow:0 0 16px var(--glow-snare-luminous),0 0 32px var(--glow-snare-soft)}to{box-shadow:0 0 24px #00e5ff99,0 0 48px #00e5ff26;box-shadow:0 0 24px var(--glow-snare-luminous),0 0 48px var(--glow-snare-soft)}}@keyframes cellGlowHat{0%{box-shadow:0 0 16px #0f89,0 0 32px #00ff8826;box-shadow:0 0 16px var(--glow-hat-luminous),0 0 32px var(--glow-hat-soft)}to{box-shadow:0 0 24px #0f89,0 0 48px #00ff8826;box-shadow:0 0 24px var(--glow-hat-luminous),0 0 48px var(--glow-hat-soft)}}.grid-cell .velocity-bar{background:#ffffff73;border-radius:2px;bottom:4px;height:3px;left:25%;position:absolute;right:25%}.kbd-hint{color:#b5ada3;color:var(--ink-whisper);font-size:9px;letter-spacing:1px;margin-bottom:28px;margin-top:4px;text-align:center;text-transform:uppercase}@media (max-width:768px){.app{padding:28px 20px 60px}.app-title{font-size:44px}.drop-zone-shell{width:min(260px,86vw)}.drop-zone--inner{padding:22px 16px}.info-card-value{font-size:18px}.analysis-info{grid-template-columns:repeat(2,1fr)}.analysis-info .info-card-value{font-size:24px}.grid-wrapper{border-radius:24px;padding:20px 16px}.row-label{font-size:8px;width:65px}.grid-header{padding-left:65px}.grid-cell{border-radius:8px;margin:2px;max-height:30px}.preset-grid{grid-template-columns:repeat(2,1fr)}.transport{border-radius:20px;gap:10px;padding:12px 16px}.transport-dismiss{font-size:18px;height:30px;width:30px}.transport-header{gap:10px;min-height:32px}}

/*
! tailwindcss v3.3.0 | MIT License | https://tailwindcss.com
*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}html{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}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;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.visible{visibility:visible}.relative{position:relative}.grid{display:grid}.hidden{display:none}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}
/*# sourceMappingURL=main.f6a33c81.css.map*/