:root{--cp-walnut: #5a3422;--cp-walnut-dark: #2f1a0e;--cp-flame: #f6c15e;--cp-flame-deep: #d68f2c;--cp-cream: #f4e7c8;--cp-cream-dim: #d9c89e;--cp-ink: #1a0820;--cp-rose: #e6788c;--cp-mint: #9bd7b8}body:has(.cp){background:radial-gradient(circle at 30% 0%,#2a160c 0%,var(--cp-ink) 60%);color:var(--cp-cream);font-family:Inter,-apple-system,system-ui,sans-serif;min-height:100vh}.cp{max-width:980px;margin:0 auto;padding:48px 24px 80px}.cp__hero{text-align:center;margin-bottom:36px}.cp__kicker{font-family:JetBrains Mono,ui-monospace,monospace;font-size:11px;letter-spacing:.18em;color:var(--cp-flame-deep);text-transform:uppercase;margin:0 0 12px}.cp__title{font-family:Inter Tight,Inter,sans-serif;font-weight:900;font-size:clamp(56px,12vw,128px);letter-spacing:-.04em;line-height:.9;margin:0 0 16px;color:var(--cp-flame);text-shadow:0 6px 24px rgba(0,0,0,.4)}.cp__sub{max-width:620px;margin:0 auto;font-size:17px;line-height:1.5;color:var(--cp-cream-dim)}.cp__transport{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;margin:0 auto 32px;max-width:720px;padding:16px 20px;background:#00000040;border:1px solid rgba(246,193,94,.18);border-radius:20px}.cp__play{width:72px;height:72px;border-radius:50%;border:0;background:var(--cp-flame);color:var(--cp-walnut-dark);font-size:28px;cursor:pointer;box-shadow:0 6px 18px #f6c15e59;transition:transform .1s ease,background .1s ease}.cp__play:hover{transform:scale(1.04)}.cp__play:active{transform:scale(.96)}.cp__tempo-wrap{display:flex;align-items:baseline;gap:6px;padding:8px 16px;background:#f6c15e14;border-radius:12px}.cp__tempo-label{font-family:JetBrains Mono,monospace;font-size:10px;letter-spacing:.16em;color:var(--cp-cream-dim)}.cp__tempo-val{font-family:Inter Tight,sans-serif;font-weight:700;font-size:28px;color:var(--cp-flame)}.cp__tempo-unit{font-family:JetBrains Mono,monospace;font-size:11px;color:var(--cp-cream-dim)}.cp__fill,.cp__clear{font-family:JetBrains Mono,monospace;font-size:11px;letter-spacing:.14em;padding:10px 16px;border-radius:10px;border:1px solid rgba(246,193,94,.32);background:transparent;color:var(--cp-cream);cursor:pointer;transition:background .1s ease}.cp__fill:hover,.cp__clear:hover{background:#f6c15e1f}.cp__vol-wrap{display:flex;align-items:center;gap:8px}.cp__vol-icon{color:var(--cp-flame-deep);font-size:16px}.cp__vol{width:90px;accent-color:var(--cp-flame)}.cp__grid-wrap{background:#0000004d;border:1px solid rgba(246,193,94,.16);border-radius:20px;padding:18px 16px 22px;margin-bottom:28px}.cp__beat-ribbon{display:grid;grid-template-columns:80px repeat(16,1fr);gap:4px;margin-bottom:8px}.cp__beat-marker{font-family:JetBrains Mono,monospace;font-size:9px;letter-spacing:.12em;color:var(--cp-cream-dim);text-align:center;padding:2px 0;border-radius:4px;transition:background 80ms linear,color 80ms linear}.cp__beat-marker--downbeat{color:var(--cp-flame-deep)}.cp__beat-marker--active{background:var(--cp-flame);color:var(--cp-walnut-dark)}.cp__rows{display:flex;flex-direction:column;gap:6px}.cp__row{display:grid;grid-template-columns:80px repeat(16,1fr);gap:4px;align-items:center}.cp__row-label{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding-left:4px}.cp__row-name{font-family:Inter Tight,sans-serif;font-weight:700;font-size:14px;color:var(--cp-cream)}.cp__row-hint{font-family:JetBrains Mono,monospace;font-size:9px;letter-spacing:.1em;color:var(--cp-cream-dim)}.cp__step{aspect-ratio:1 / 1;min-height:28px;border-radius:6px;border:0;background:#f4e7c80f;cursor:pointer;transition:background 80ms ease,transform 60ms ease,box-shadow 80ms ease;padding:0}.cp__step:hover{background:#f4e7c824}.cp__step--downbeat{background:#f4e7c81a}.cp__step--on{background:var(--cp-flame);box-shadow:0 2px 8px #f6c15e66}.cp__step--on.cp__step--kick{background:var(--cp-flame)}.cp__step--on.cp__step--snare{background:var(--cp-rose);box-shadow:0 2px 8px #e6788c66}.cp__step--on.cp__step--hat{background:var(--cp-cream);box-shadow:0 2px 8px #f4e7c866}.cp__step--on.cp__step--perc{background:var(--cp-mint);box-shadow:0 2px 8px #9bd7b866}.cp__step--playing{transform:scale(1.18);outline:2px solid var(--cp-flame)}.cp__sliders{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:28px;padding:0 8px}@media(max-width:600px){.cp__sliders{grid-template-columns:1fr}}.cp__slide-label{display:block;font-family:JetBrains Mono,monospace;font-size:10px;letter-spacing:.14em;color:var(--cp-cream-dim);margin-bottom:6px}.cp__slide-range{width:100%;accent-color:var(--cp-flame)}.cp__patterns{background:#00000038;border:1px solid rgba(246,193,94,.14);border-radius:18px;padding:18px 20px;margin-bottom:28px}.cp__patterns-label{font-family:JetBrains Mono,monospace;font-size:10px;letter-spacing:.16em;color:var(--cp-cream-dim);margin:0 0 10px}.cp__patterns-label--save{margin-top:18px}.cp__patterns-row,.cp__slots-row{display:flex;flex-wrap:wrap;gap:8px}.cp__preset{font-family:Inter Tight,sans-serif;font-weight:600;font-size:13px;padding:8px 14px;border-radius:10px;border:1px solid rgba(246,193,94,.28);background:transparent;color:var(--cp-cream);cursor:pointer;transition:background .1s ease,transform 60ms ease}.cp__preset:hover{background:#f6c15e24}.cp__preset:active{transform:scale(.97)}.cp__slot{flex:1;min-width:80px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 12px;border-radius:12px;border:1px solid rgba(246,193,94,.24);background:transparent;color:var(--cp-cream);cursor:pointer;transition:background .1s ease}.cp__slot:hover{background:#f6c15e1a}.cp__slot--filled{border-color:var(--cp-flame);background:#f6c15e14}.cp__slot-num{font-family:Inter Tight,sans-serif;font-weight:700;font-size:18px;color:var(--cp-flame)}.cp__slot-state{font-family:JetBrains Mono,monospace;font-size:9px;letter-spacing:.12em;color:var(--cp-cream-dim)}.cp__slot-hint{font-family:JetBrains Mono,monospace;font-size:11px;color:var(--cp-cream-dim);margin:12px 0 0;line-height:1.5}.cp__footer{margin-top:36px;padding-top:24px;border-top:1px solid rgba(246,193,94,.14);text-align:center}.cp__footer-line{font-family:JetBrains Mono,monospace;font-size:11px;color:var(--cp-cream-dim);line-height:1.6;margin:0 0 8px}.cp__footer-line a{color:var(--cp-flame);text-decoration:none}.cp__footer-line a:hover{text-decoration:underline}@media(max-width:720px){.cp__beat-ribbon,.cp__row{grid-template-columns:60px repeat(16,1fr);gap:3px}.cp__step{min-height:22px;border-radius:4px}.cp__row-name{font-size:12px}.cp__row-hint{font-size:8px}}