@charset "UTF-8";:root{--primary-color:oklch(0.6245671680976917 0.1999883053853938 139.7675052968717);--secondary-color:oklch(0.999999836606709 8.668634299184126e-05 263.28309924165114);--primary-color-50:oklch(0.6245671680976917 0.1999883053853938 139.7675052968717 / 0.5);--secondary-color-50:oklch(0.999999836606709 8.668634299184126e-05 263.28309924165114 / 0.5);--primary-color-25:oklch(0.6245671680976917 0.1999883053853938 139.7675052968717 / 0.25);--secondary-color-25:oklch(0.999999836606709 8.668634299184126e-05 263.28309924165114 / 0.25);--primary-color-10:oklch(0.6245671680976917 0.1999883053853938 139.7675052968717 / 0.1);--secondary-color-10:oklch(0.999999836606709 8.668634299184126e-05 263.28309924165114 / 0.1);--primary-color-05:oklch(0.6245671680976917 0.1999883053853938 139.7675052968717 / 0.05);--secondary-color-05:oklch(0.999999836606709 8.668634299184126e-05 263.28309924165114 / 0.05);--primary-CMS-color:#33a200;--secondary-CMS-color:#FFFFFF;--bg-color:#ffffff}.primary{background-color:var(--primary-color)}.secondary{background-color:var(--secondary-color)}:root{--gradient-diagonal-medium-smooth:linear-gradient(
    51deg in oklab,
    oklch(0.9 0.8 190) 26%,
    oklch(0.25 0.25 270) 100%
  );--gradient-diagonal-bold-contrasted:linear-gradient(
    135deg in oklab,
    oklch(0.81 0.8 190) 0%,
    oklch(0.25 0.2 270) 100%
  );--gradient-vertical-subtle-soft:linear-gradient(
    180deg in oklab,
    oklch(1.75 0.24 190) 0%,
    oklch(1.7000000000000002 0.4 190) 100%
  );--gradient-horizontal-medium-shifted:linear-gradient(
    90deg in oklab,
    oklch(0.9 0.8 190) 0%,
    oklch(0.9 0.8 160) 100%
  );--gradient-radial-subtle-ambient:radial-gradient(
    ellipse at top right,
    oklch(0.25 0.05 270 / 0.1) 0%,
    transparent 70%
  );--gradient-diagonal-light-translucent:linear-gradient(
    45deg in oklab,
    oklch(0.9 0.8 190 / 0.15) 0%,
    oklch(0.25 0.25 270 / 0.15) 100%
  );--gradient-diagonal-dark-inverted:linear-gradient(
    171deg in oklab,
    oklch(0.075 0.25 270) 0%,
    oklch(0.225 0.8 190) 100%
  );--gradient-radial-medium-multispot:radial-gradient(at 27% 37%, oklch(0.9 0.8 190 / 0.3) 0%, transparent 50%),
    radial-gradient(at 97% 21%, oklch(0.25 0.25 270 / 0.25) 0%, transparent 50%),
    radial-gradient(at 52% 99%, oklch(0.9 0.6400000000000001 220 / 0.2) 0%, transparent 50%)}@font-face{font-family:berkeley mono;src:url(/fonts/berkeley-mono-variable.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}:root{--primary-font:'Berkeley Mono', sans-serif}*,*::before,*::after{box-sizing:border-box}body{margin:0;font-family:var(--primary-font,monospace);background:#0a0a0a;color:#e8e8e8}a{color:var(--primary-color,#e8e8e8);text-decoration:none}a:hover{text-decoration:underline}.site-header{padding:1.5rem 2rem;border-bottom:1px solid #222;display:flex;align-items:center;gap:.6rem}.site-header a{font-size:1.25rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--primary-color,#e8e8e8);text-decoration:none}.site-header a:hover{text-decoration:none;opacity:.8}.site-header .site-header-rune{font-size:1.1rem;color:#444;letter-spacing:0;font-weight:400;transition:color .15s}.site-header .site-header-rune:hover{color:var(--primary-color,#6fff6f);opacity:1}main{padding:2rem;max-width:1200px;margin:0 auto}.site-footer{padding:2rem;border-top:1px solid #222;font-size:.75rem;color:#555;text-align:center;margin-top:4rem}.site-footer p{margin:0 0 .75rem}.footer-nav{display:flex;align-items:center;justify-content:center;gap:1.5rem}.footer-nav-icon{font-size:1.1rem;color:#444;text-decoration:none;line-height:1;transition:color .15s}.footer-nav-icon:hover{color:var(--primary-color,#6fff6f);text-decoration:none}.footer-easter-egg{font-size:.6rem;color:#2a2a2a;text-decoration:none;letter-spacing:.1em;transition:color .15s}.footer-easter-egg:hover{color:#555;text-decoration:none}.collider-header{margin-bottom:2.5rem}.collider-header h1{margin-bottom:.25rem}.collider-header .collider-desc{color:#555;font-size:.8rem;margin:0}.collider-controls{display:flex;flex-wrap:wrap;gap:1.5rem;margin-bottom:2rem;align-items:flex-end}.collider-selector{flex:1;min-width:200px}.collider-label{display:block;font-size:.65rem;letter-spacing:.12em;color:#555;margin-bottom:.4rem}.collider-select{width:100%;background:#111;border:1px solid #333;color:#e8e8e8;font-family:var(--primary-font,monospace);font-size:.75rem;padding:.5rem .75rem;appearance:none;cursor:pointer}.collider-select:focus{outline:1px solid #444}.collider-bpm{width:80px;flex-shrink:0}.collider-bpm-input{width:100%;background:#111;border:1px solid #333;color:#e8e8e8;font-family:var(--primary-font,monospace);font-size:.85rem;padding:.5rem .75rem;text-align:center}.collider-bpm-input:focus{outline:1px solid #444}.collider-player-row{display:flex;align-items:center;gap:0;margin-bottom:1rem}.collider-midi-player{flex:1;margin-bottom:0!important}.collider-actions{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.collider-play-btn{background:#1a1a1a;border:1px solid #444;color:#e8e8e8;font-family:var(--primary-font,monospace);font-size:.8rem;letter-spacing:.1em;padding:.6rem 1.5rem;cursor:pointer;transition:background .15s,border-color .15s}.collider-play-btn:hover{background:#2a2a2a;border-color:var(--primary-color,#6fff6f)}.collider-play-btn:disabled{opacity:.4;cursor:wait}.collider-status{font-size:.7rem;color:#555;margin:0;min-height:1rem}.home-header{margin-bottom:2rem}.home-desc{font-size:.8rem;color:#555;margin:0 0 1.25rem;letter-spacing:.05em}.home-filters{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.5rem}.home-filters .filter-tag{font-size:.65rem;padding:.2rem .6rem;border:1px solid #2a2a2a;border-radius:2px;color:#555;text-transform:uppercase;letter-spacing:.1em;text-decoration:none;transition:border-color .1s,color .1s}.home-filters .filter-tag .filter-count{margin-left:.4rem;color:#333}.home-filters .filter-tag:hover{border-color:#444;color:#999;text-decoration:none}.home-filters .filter-tag.active{border-color:var(--primary-color,#6fff6f);color:var(--primary-color,#6fff6f)}.beats-table{width:100%;border-collapse:collapse;font-size:.8rem}.beats-table thead tr{border-bottom:1px solid #222}.beats-table th{font-size:.6rem;font-weight:700;letter-spacing:.12em;color:#444;text-align:left;padding:0 .75rem .5rem 0;white-space:nowrap}.beats-table .beat-row{border-bottom:1px solid #111;cursor:pointer;transition:background .1s}.beats-table .beat-row:hover{background:#111}.beats-table .beat-row:hover td.col-title a{color:var(--primary-color,#e8e8e8)}.beats-table td{padding:.7rem .75rem .7rem 0;vertical-align:middle;color:#777}.beats-table .col-num{width:2rem;color:#333;font-variant-numeric:tabular-nums}.beats-table .col-title{white-space:nowrap}.beats-table .col-title a{color:#ccc;text-decoration:none;font-weight:600;letter-spacing:.03em}.beats-table .col-bpm{font-variant-numeric:tabular-nums;color:#666;white-space:nowrap}.beats-table .col-bpm::after{content:" BPM";font-size:.65em;color:#444}.beats-table .col-kit{font-size:.72rem;color:#555}.beats-table .col-swing{font-size:.72rem;color:#444;font-variant-numeric:tabular-nums}.beats-table .col-genre{white-space:nowrap}.beats-table .col-genre .tag{font-size:.65rem;color:#555;text-transform:uppercase;letter-spacing:.08em;text-decoration:none;border:none;padding:0}.beats-table .col-genre .tag:hover{color:#999;text-decoration:none}.beat-count{font-size:.65rem;color:#333;letter-spacing:.1em;text-transform:uppercase;margin-top:1rem;text-align:right}.pattern-list{list-style:none;padding:0;margin:0}.pattern-list li{padding:.75rem 0;border-bottom:1px solid #1a1a1a;display:flex;gap:1.5rem;align-items:baseline}.pattern-list .pattern-title{font-weight:600;min-width:160px}.pattern-list .pattern-meta{font-size:.8rem;color:#777}.pattern-header h1{font-size:2rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin:0 0 .5rem}.pattern-meta-line{font-size:.8rem;color:#777;margin-bottom:.75rem;letter-spacing:.05em}.pattern-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}.pattern-tags .tag{font-size:.7rem;padding:.2rem .5rem;border:1px solid #333;border-radius:2px;color:#888;text-transform:lowercase;text-decoration:none}.pattern-tags .tag:hover{border-color:#555;color:#bbb;text-decoration:none}.midi-download{display:inline-block;margin-bottom:2rem;font-size:.8rem;padding:.4rem .8rem;border:1px solid #444;border-radius:2px;color:#aaa}.midi-download:hover{border-color:var(--primary-color,#aaa);color:var(--primary-color,#fff);text-decoration:none}.bass-section{margin-bottom:2rem}.bass-pattern-table td.step-cell{min-width:3.5rem}.bass-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:.3rem .2rem;min-height:3rem}.bass-cell .bass-note{font-size:.65rem;font-weight:700;letter-spacing:.02em;color:#0a0a0a;line-height:1}.bass-cell .bass-vel{font-size:.55rem;color:rgba(0,0,0,.6);line-height:1}.grid-legend{display:flex;align-items:center;gap:1.5rem;margin-top:1.25rem;padding:.6rem 0;border-top:1px solid #1e1e1e;font-family:monospace;font-size:.6rem;letter-spacing:.1em;color:#444;text-transform:uppercase}.legend-item{display:flex;align-items:center;gap:.4rem}.legend-swatch{display:inline-block;width:10px;height:10px;border-radius:1px;flex-shrink:0}.legend-swatch.accent{background:var(--primary-color,#6fff6f)}.legend-swatch.hit{background:#3a3a3a}.legend-swatch.ghost{background:#1e1e1e;border:1px solid #2a2a2a}.legend-sep{width:1px;height:12px;background:#222}.legend-note{color:#333}@keyframes led-blink{0%,14%{opacity:1}15%,100%{opacity:.08}}.pattern-title-row{display:flex;align-items:center;justify-content:space-between}.bpm-led{display:block;width:5px;height:5px;flex-shrink:0;background:var(--primary-color,#6fff6f);opacity:.08}.bpm-led.active{animation:led-blink var(--bpm-dur,.5s)linear infinite}.player-row{display:flex;align-items:center;gap:0;margin-bottom:2rem}midi-player.midi-player{display:block;flex:1;margin-bottom:0;filter:invert(1)brightness(.85)}.stop-btn{flex-shrink:0;width:2.5rem;height:2.5rem;background:#1a1a1a;border:1px solid #333;border-left:none;color:#e8e8e8;font-size:.75rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}.stop-btn:hover{background:#2a2a2a;color:#fff}.stop-btn:active{background:#333}#pattern-grid{overflow-x:auto}.section-wrap{margin-bottom:2.5rem}.section-label{font-size:.65rem;font-weight:700;letter-spacing:.15em;color:#555;text-transform:uppercase;padding-bottom:.4rem;border-top:2px solid #333;padding-top:.4rem;margin-bottom:0}.pattern-table{border-collapse:collapse;width:100%;table-layout:fixed}.pattern-table th,.pattern-table td{padding:0}.pattern-table .beat-header{font-size:.6rem;color:#444;text-align:center;padding-bottom:.25rem;font-weight:400}.pattern-table .beat-header.beat-start{color:#666;font-weight:600}.voice-label{text-align:right;width:36px;padding-right:8px;font-size:.65rem;color:#666;font-weight:600;letter-spacing:.05em;white-space:nowrap}.voice-label-inner{position:relative;cursor:default}.voice-label-inner::after{content:attr(data-name);position:absolute;right:calc(100% + 8px);top:50%;transform:translateY(-50%);background:#1a1a1a;color:#ccc;font-size:.6rem;font-weight:400;font-family:monospace;padding:3px 7px;border-radius:2px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .1s;border:1px solid #333;letter-spacing:.05em;z-index:10}.voice-label-inner:hover::after{opacity:1}.step-cell{height:36px;border-left:1px solid transparent}.step-cell.beat-start{border-left:2px solid #333}.step-cell.eighth{border-left:1px solid #1e1e1e}.cell-inner{width:calc(100% - 4px);height:28px;border-radius:2px;margin:4px auto;display:flex;align-items:center;justify-content:center;font-size:9px}.cell-inner.hit{background:#3a3a3a;color:#888}.cell-inner.accent{background:var(--primary-color,#e8a820);color:#0a0a0a;font-weight:700}.cell-inner.ghost{background:#1e1e1e;color:#555;border:1px solid #2a2a2a}.vel{font-size:8px;line-height:1;opacity:.8}.site-header,main,.site-footer{position:relative;z-index:2}body::after{content:'';position:fixed;inset:0;z-index:1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,3%) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,3%) 1px,transparent 1px);background-size:40px 40px}#bg-glow{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}.glow-orb{position:absolute;border-radius:50%;width:70vw;height:70vw;background:radial-gradient(circle,rgba(111,255,111,9%) 0%,rgba(111,255,111,3%) 45%,transparent 70%);will-change:transform;transition:filter .08s ease-out}.orb-1{top:-20%;left:-15%;animation:orb-drift-1 14s ease-in-out infinite}.orb-2{top:30%;right:-20%;animation:orb-drift-2 18s ease-in-out infinite}.orb-3{bottom:-20%;left:25%;animation:orb-drift-3 11s ease-in-out infinite}@keyframes orb-drift-1{0%,100%{transform:translate(0,0)}33%{transform:translate(8vw,6vh)}66%{transform:translate(-4vw,12vh)}}@keyframes orb-drift-2{0%,100%{transform:translate(0,0)}50%{transform:translate(-10vw,-8vh)}}@keyframes orb-drift-3{0%,100%{transform:translate(0,0)}40%{transform:translate(-6vw,-10vh)}80%{transform:translate(10vw,-4vh)}}