:root{--cco-ink: #0a0813;--cco-walnut: #4a2a1a;--cco-flame: #f6c15e;--cco-flame-deep: #d68f2c;--cco-cream: #f4e7c8;--cco-cream-dim: #c8b48a;--cco-cream-dimmer: #8b7a5a;--cco-mint: #9bd7b8}body:has(.cco){background:radial-gradient(circle at 50% 0%,#1c0c24 0%,var(--cco-ink) 60%);color:var(--cco-cream);font-family:Inter,-apple-system,system-ui,sans-serif;min-height:100vh}.cco{max-width:1020px;margin:0 auto;padding:48px 24px 80px}.cco__hero{text-align:center;margin-bottom:32px}.cco__kicker{font-family:JetBrains Mono,ui-monospace,monospace;font-size:11px;letter-spacing:.18em;color:var(--cco-flame-deep);text-transform:uppercase;margin:0 0 12px}.cco__title{font-family:Inter Tight,sans-serif;font-weight:900;font-size:clamp(56px,12vw,140px);letter-spacing:-.04em;line-height:.9;margin:0 0 16px;color:var(--cco-flame);text-shadow:0 6px 24px rgba(0,0,0,.45)}.cco__sub{max-width:720px;margin:0 auto;font-size:17px;line-height:1.5;color:var(--cco-cream-dim)}.cco__progression{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}@media(max-width:600px){.cco__progression{grid-template-columns:1fr 1fr}}.cco__slot{position:relative;aspect-ratio:1;border-radius:18px;border:2px dashed rgba(246,193,94,.32);cursor:pointer;transition:transform .1s ease,border-color .1s ease,box-shadow .2s ease;overflow:hidden}.cco__slot--filled{border-style:solid;border-color:transparent}.cco__slot--playing{box-shadow:0 0 40px #f6c15e8c;transform:scale(1.04)}.cco__slot-fill{position:absolute;inset:0;transition:opacity .2s ease}.cco__slot-num{position:absolute;top:10px;left:12px;font-family:JetBrains Mono,monospace;font-size:11px;letter-spacing:.12em;color:#ffffff80;text-shadow:0 1px 2px rgba(0,0,0,.5);pointer-events:none}.cco__slot--filled .cco__slot-num{color:#ffffffd9}.cco__slot-chord{position:absolute;bottom:12px;left:12px;right:12px;font-family:Inter Tight,sans-serif;font-weight:700;font-size:22px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.6);pointer-events:none}.cco__slot-empty{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:JetBrains Mono,monospace;font-size:11px;letter-spacing:.14em;color:#f4e7c880;pointer-events:none}.cco__slot--filled .cco__slot-empty{display:none}.cco__palette{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:22px}@media(max-width:600px){.cco__palette{grid-template-columns:repeat(4,1fr)}}.cco__swatch{position:relative;aspect-ratio:1;border-radius:14px;border:0;cursor:pointer;padding:0;box-shadow:inset 0 -4px 8px #00000029,0 4px 14px #0000004d;transition:transform .1s ease,box-shadow .2s ease}.cco__swatch:hover{transform:translateY(-2px)}.cco__swatch--active{animation:ccoPlay 1.2s ease-out}@keyframes ccoPlay{0%{box-shadow:0 0 #ffffffb3,0 4px 14px #0000004d}40%{box-shadow:0 0 0 12px #fff0,0 4px 14px #0000004d}to{box-shadow:inset 0 -4px 8px #00000029,0 4px 14px #0000004d}}.cco__swatch-name{position:absolute;bottom:8px;left:8px;font-family:JetBrains Mono,monospace;font-size:10px;letter-spacing:.08em;color:#ffffffd9;text-shadow:0 1px 2px rgba(0,0,0,.55);pointer-events:none}.cco__swatch-chord{position:absolute;top:8px;right:10px;font-family:Inter Tight,sans-serif;font-weight:700;font-size:13px;color:#ffffffeb;text-shadow:0 1px 2px rgba(0,0,0,.5);pointer-events:none}.cco__transport{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:32px}.cco__play{display:flex;align-items:center;gap:10px;padding:12px 24px;border-radius:12px;border:0;background:var(--cco-flame);color:var(--cco-walnut);cursor:pointer;font-family:Inter Tight,sans-serif;font-weight:700;font-size:14px;letter-spacing:.04em;box-shadow:0 4px 14px #f6c15e52}.cco__play:hover{background:var(--cco-flame-deep)}.cco__clear,.cco__shuffle,.cco__share{font-family:Inter Tight,sans-serif;font-weight:600;font-size:13px;padding:12px 18px;border-radius:12px;border:1px solid rgba(246,193,94,.32);background:transparent;color:var(--cco-cream);cursor:pointer;transition:background .1s ease}.cco__clear:hover,.cco__shuffle:hover,.cco__share:hover{background:#f6c15e1f}.cco__tempo{flex:1;min-width:240px;display:flex;flex-direction:column;gap:4px}.cco__tempo-label{font-family:JetBrains Mono,monospace;font-size:10px;letter-spacing:.14em;color:var(--cco-cream-dimmer)}.cco__tempo-range{width:100%;accent-color:var(--cco-flame)}.cco__share-status{font-family:JetBrains Mono,monospace;font-size:11px;color:var(--cco-mint)}.cco__about{max-width:740px;margin:0 auto;padding:24px 0 0;border-top:1px solid rgba(246,193,94,.14)}.cco__about-h{font-family:Inter Tight,sans-serif;font-weight:700;font-size:20px;color:var(--cco-cream);margin:0 0 12px}.cco__about p{font-size:15px;line-height:1.6;color:var(--cco-cream-dim);margin:0 0 12px}.cco__about a{color:var(--cco-flame);text-decoration:none}.cco__about a:hover{text-decoration:underline}