@import"https://fonts.googleapis.com/css2?family=Arvo:ital@0;1&family=JetBrains+Mono:wght@400;700&family=Sora&display=swap";:root{--text: #f9f9f9;--bg: #0e0e0e;--dark-grey: #1a1a1a;--mid-grey: #454545;--grey: #808080;--light-grey: #ccc;--border: #2a2a2a;--interval: #f3f78c;--c-maj: #ff3b84;--c-maj-border: #780f40;--c-maj-bg: #2d0018;--c-min: #60a5fa;--c-min-border: #1e3a5f;--c-min-bg: #0a1f3d;--c-aug: #34d399;--c-aug-border: #134e4a;--c-aug-bg: #052e2b;--c-dom7: #fb923c;--c-dom7-border: #7c2d12;--c-dom7-bg: #3d1200;--c-maj7: #facc15;--c-maj7-border: #713f12;--c-maj7-bg: #3a1f00;--c-dim7: #c084fc;--c-dim7-border: #3b0764;--c-dim7-bg: #230540;--c-min7: #93c5fd;--c-min7-border: #1e3a5f;--c-min7-bg: #0a1f3d;--c-m7b5: #5eead4;--c-m7b5-border: #042f2e;--c-m7b5-bg: #011e1d;--c-sus2: #bef264;--c-sus2-border: #365314;--c-sus2-bg: #1a2e00;--c-add9: #f0abfc;--c-add9-border: #6b21a8;--c-add9-bg: #2e1065;--cell-beat: #242424;--cell-and: #151515;--cell-sub: #212121;--cell-active: var(--track-color, #eecb42);--cell-current: rgba(255, 255, 255, .06)}*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:JetBrains Mono,monospace;background:var(--bg);color:var(--text);overflow-x:hidden}.container{padding:1.5rem 1.5rem 3rem;max-width:1100px;margin:auto}.title{font-family:Arvo,serif;font-size:clamp(1.2rem,5vw,1.8rem);font-weight:700;margin-bottom:1.25rem;letter-spacing:-.02em}.transport{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-bottom:.9rem;padding:.75rem 1rem;background:var(--dark-grey);border:1px solid var(--border);border-radius:10px}.play-btn{display:flex;align-items:center;gap:.45rem;padding:.45rem 1.1rem;background:transparent;color:var(--c-aug);border:1.5px solid var(--c-aug);border-radius:6px;font-family:inherit;font-size:.85rem;font-weight:700;cursor:pointer;transition:all .15s;white-space:nowrap}.play-btn:hover{background:var(--c-aug);color:var(--bg)}.play-btn.playing{color:var(--c-maj);border-color:var(--c-maj)}.play-btn.playing:hover{background:var(--c-maj);color:var(--bg)}.play-btn.loading{color:var(--grey);border-color:var(--mid-grey);cursor:wait;opacity:.7}.bpm-wrap{display:flex;align-items:center;gap:.5rem;flex:1;min-width:200px}.bpm-label{font-size:.75rem;color:var(--grey);white-space:nowrap}.bpm-slider{flex:1;accent-color:var(--interval);cursor:pointer}.bpm-input{width:52px;padding:.3rem .4rem;background:#111;color:var(--text);border:1px solid var(--mid-grey);border-radius:5px;font-family:inherit;font-size:.85rem;text-align:center;-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}.bpm-input::-webkit-inner-spin-button{display:none}.tap-btn{padding:.3rem .65rem;background:transparent;color:var(--interval);border:1px solid var(--interval);border-radius:6px;font-family:inherit;font-size:.75rem;cursor:pointer;transition:all .13s;white-space:nowrap}.tap-btn:hover{background:var(--interval);color:var(--bg)}.tap-btn:active{transform:scale(.94)}.timesig-wrap{display:flex;gap:.3rem;flex-wrap:wrap}.timesig-btn{padding:.28rem .55rem;background:transparent;color:var(--grey);border:1px solid var(--mid-grey);border-radius:5px;font-family:inherit;font-size:.75rem;cursor:pointer;transition:all .13s;white-space:nowrap}.timesig-btn:hover{color:var(--text);border-color:var(--grey)}.timesig-btn.active{background:var(--mid-grey);color:var(--text);border-color:var(--mid-grey)}.options-box{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.75rem;background:var(--dark-grey);border:1px solid var(--border);border-radius:10px;padding:.4rem .5rem}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem .65rem;cursor:pointer;-webkit-user-select:none;user-select:none;flex:1 1 160px;min-width:150px;border-radius:8px;height:40px;background:#ffffff0a;transition:background .13s}.toggle-label{font-size:.8rem;color:var(--light-grey)}.toggle-switch{flex-shrink:0;width:38px;height:21px;border-radius:99px;background:var(--mid-grey);border:none;cursor:pointer;position:relative;transition:background .2s;padding:0}.toggle-switch.on{background:var(--c-maj)}.toggle-thumb{position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;border-radius:50%;background:var(--text);transition:transform .2s cubic-bezier(.34,1.56,.64,1);pointer-events:none}.toggle-switch.on .toggle-thumb{transform:translate(17px)}.clave-select{margin-left:.5rem;padding:.3rem .6rem;background:#111;color:var(--text);border:1px solid var(--mid-grey);border-radius:6px;font-family:inherit;font-size:.78rem;cursor:pointer}.grid-section{background:var(--dark-grey);border:1px solid var(--border);border-radius:12px;padding:.75rem .75rem .5rem;overflow-x:auto;-webkit-overflow-scrolling:touch}.rc-row,.track-row{display:flex;align-items:center;gap:0;margin-bottom:3px;min-width:max-content}.track-label{min-width:160px;display:flex;gap:3px;flex-shrink:0}.track-name{font-size:.72rem;color:var(--text);font-family:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:2px;min-width:80px}.track-btns{display:flex;gap:3px;align-items:center}.track-btn{padding:.18rem .4rem;background:transparent;color:var(--grey);border:1px solid var(--mid-grey);border-radius:4px;font-family:inherit;font-size:.65rem;font-weight:600;cursor:pointer;transition:all .13s;line-height:1}.track-btn:hover{color:var(--text);border-color:var(--grey)}.mute-btn.active{background:var(--mid-grey);color:var(--text);border-color:var(--grey)}.solo-btn.active{background:#facc15;color:#0a0a0a;border-color:#facc15}.track-row.muted .cells-row{opacity:.3}.track-row.solo-inactive .cells-row{opacity:.2}.track-row.solo-inactive .track-name{opacity:.4}.rc-label{font-size:.62rem;color:var(--grey);text-transform:uppercase;letter-spacing:.08em;padding-right:8px;align-self:center}.clear-btn{flex-shrink:0;padding:.25rem .3rem;background:transparent;color:var(--mid-grey);border:none;cursor:pointer;display:flex;align-items:center;transition:color .13s}.clear-btn:hover{color:var(--c-maj)}.cells-row{display:flex;gap:4px}.rc-cell{width:38px;height:22px;display:flex;align-items:center;justify-content:center;font-size:.62rem;color:var(--grey);flex-shrink:0;border-radius:3px;-webkit-user-select:none;user-select:none}.rc-cell.rc-state-dot{color:var(--interval);font-size:1.1rem;font-weight:700;line-height:1}.rc-cell.rc-state-line{color:#444;font-size:.85rem;letter-spacing:-1px}.rc-cell.rc-state-cross{color:var(--c-maj);font-size:.78rem;font-weight:700;opacity:.85}.rc-cell.rc-clave-hit{color:var(--c-aug);font-size:.9rem;font-weight:700}.rc-cell.rc-clave-empty{color:#2a2a2a;font-size:.6rem}.cell{width:38px;height:38px;border-radius:5px;cursor:pointer;background:var(--cell-sub);border:1px solid transparent;flex-shrink:0;position:relative;transition:background .08s,border-color .08s,transform .08s;-webkit-user-select:none;user-select:none}.cell:hover{border-color:var(--mid-grey)}.cell:active{transform:scale(.9)}.cell.cell-beat{background:var(--cell-beat)}.cell.cell-and{background:var(--cell-and)}.cell.cell-sub{background:var(--cell-sub)}.cell.active{background:var(--cell-active)}.cell.current:not(.active){border-color:#fff3;background:#ffffff0f}.cell.active.current{filter:brightness(1.3);box-shadow:0 0 14px var(--cell-active)}.rc-marker,.rc-marker.both:after{position:absolute;width:5px;height:5px;border-radius:50%;pointer-events:none}.rc-marker.stop,.rc-marker.both{top:2px;right:2px;background:#eb5a5a}.rc-marker.anti{top:2px;right:2px;background:#fcffb7}.rc-marker.both:after{content:"";right:4px;background:#fcffb7;transform:translate(-50%)}.cells-row .cell:nth-child(4n+1){margin-left:2px}.cells-row .cell:first-child{margin-left:0}.rc-row .cells-row .rc-cell:nth-child(4n+1){margin-left:2px}.rc-row .cells-row .rc-cell:first-child{margin-left:0}.analysis-panel{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem;margin:.6rem 0;padding:.55rem 1rem;background:#f3f78c0d;border:1px solid rgba(243,247,140,.15);border-radius:8px}.analysis-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--interval)}.analysis-stats{display:flex;align-items:center;flex-wrap:wrap;gap:1rem}.stat{display:flex;align-items:center;gap:.35rem;font-size:.78rem;color:var(--grey)}.stat strong{color:var(--text)}.stat-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.stop-dot{background:#fd6565}.anti-dot{background:var(--interval)}.badge{padding:.15rem .5rem;background:#f3f78c1f;border:1px solid rgba(243,247,140,.25);border-radius:99px;font-size:.7rem;color:var(--interval)}.section-card{margin-top:.9rem;padding:1rem 1.1rem;background:var(--dark-grey);border:1px solid var(--border);border-radius:12px}.section-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.85rem}.section-card-title{font-family:Sora,sans-serif;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--grey)}.clear-all-btn{display:flex;align-items:center;gap:.4rem;background:transparent;border:1px solid var(--mid-grey);color:var(--grey);padding:.2rem .6rem;border-radius:6px;font-family:inherit;font-size:.75rem;cursor:pointer;transition:all .13s}.clear-all-btn:hover{border-color:var(--c-maj);color:var(--c-maj)}.preset-group{margin-bottom:.7rem}.preset-group-label{display:block;font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;color:var(--grey);margin-bottom:.4rem}.preset-btns{display:flex;flex-wrap:wrap;gap:.35rem}.preset-btn{padding:.32rem .75rem;background:#111;color:var(--light-grey);border:1px solid var(--mid-grey);border-radius:6px;font-family:inherit;font-size:.78rem;cursor:pointer;transition:all .13s;white-space:nowrap}.preset-btn:hover{border-color:var(--interval);color:var(--interval);transform:translateY(-1px)}.rand-controls{display:flex;flex-wrap:wrap;gap:1rem}.rand-group{display:flex;align-items:center;gap:.4rem}.rand-label{font-size:.72rem;color:var(--grey);white-space:nowrap;margin-right:.25rem}.rand-btn{padding:.28rem .65rem;background:transparent;color:var(--grey);border:1px solid var(--mid-grey);border-radius:99px;font-family:inherit;font-size:.75rem;cursor:pointer;transition:all .13s}.rand-btn:hover{color:var(--text);border-color:var(--grey)}.rand-btn.active{background:var(--mid-grey);color:var(--text);border-color:var(--mid-grey)}.generate-btn{display:flex;align-items:center;gap:.5rem;padding:.38rem .9rem;background:transparent;color:var(--c-dim7);border:1.5px solid var(--c-dim7);border-radius:6px;font-family:inherit;font-size:.82rem;cursor:pointer;transition:all .13s;white-space:nowrap}.generate-btn:hover{background:var(--c-dim7);color:var(--bg)}.export-row{display:flex;align-items:center;gap:1rem;margin-top:.9rem;flex-wrap:wrap}.export-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1.1rem;background:transparent;color:var(--c-maj7);border:1.5px solid var(--c-maj7);border-radius:6px;font-family:inherit;font-size:.82rem;cursor:pointer;transition:all .13s;white-space:nowrap}.export-btn:hover{background:var(--c-maj7);color:var(--bg)}.export-note{font-size:.72rem;color:var(--grey)}.groove-score{display:flex;align-items:center;gap:.4rem;margin-left:.5rem}.groove-label{font-size:.65rem;color:var(--score-color);opacity:.85;font-style:italic}.groove-bar-wrap{width:60px;height:4px;background:var(--mid-grey);border-radius:2px;overflow:hidden;position:relative}.groove-bar-fill{height:100%;border-radius:2px;transition:width .3s ease;display:block}.footer{margin-top:3rem;padding-top:1.25rem;border-top:1px solid var(--border);font-size:.75rem;color:var(--grey);text-align:center;letter-spacing:.03em}.footer strong{color:var(--light-grey);font-weight:600}@media (min-width: 600px){.toggle-row{max-width:50%}.toggle-row.kit{max-width:100%;flex:1 1 100%}}@media (max-width: 600px){.toggle-row{height:auto}.container{padding:1rem .75rem 3rem}.transport{gap:.5rem;padding:.6rem .75rem}.bpm-wrap{min-width:150px;flex:1 1 100%}.cell{width:32px;height:32px}.rc-cell{width:32px}.mute-btn{font-size:.65rem}.rand-controls{gap:.6rem}}