@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap";:root{--cj-bg: #0a0610;--cj-walnut: #5a3422;--cj-flame: #f6c15e;--cj-cream: #f4e7c8;--cj-velvet: #1a0820;--cj-line: rgba(244,231,200,.1);--cj-text: #f4e7c8;--cj-text-mute: rgba(244,231,200,.62);--cj-text-quiet: rgba(244,231,200,.38);--cj-display: "Inter Tight", system-ui, sans-serif;--cj-body: "Inter", system-ui, sans-serif;--cj-mono: "JetBrains Mono", ui-monospace, monospace}body{background:var(--cj-bg);color:var(--cj-text);font-family:var(--cj-body)}.cj{max-width:920px;margin:0 auto;padding:36px 22px 60px;display:flex;flex-direction:column;gap:28px;position:relative;isolation:isolate}.cj:before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(80% 60% at 50% 30%,var(--ambient-c, #5a3422) 0%,transparent 60%),linear-gradient(180deg,#0a0610,#170a14);filter:blur(60px) saturate(1);transform:scale(1.05);transition:--ambient-c 1.6s ease}.cj__hero{padding-top:6px}.cj__kicker{font-family:var(--cj-mono);font-size:11px;letter-spacing:.7px;color:var(--cj-flame);text-transform:uppercase;margin:0 0 12px}.cj__title{font-family:var(--cj-display);font-weight:800;font-size:clamp(48px,8vw,76px);line-height:.94;letter-spacing:-.025em;margin:0 0 12px;color:var(--cj-text)}.cj__sub{font-family:var(--cj-body);font-size:15px;line-height:1.55;color:var(--cj-text-mute);max-width:600px;margin:0}.cj__section-label{font-family:var(--cj-mono);font-size:10px;letter-spacing:.7px;color:var(--cj-text-quiet);text-transform:uppercase;margin:0 0 12px}.cj__section-label span{color:var(--cj-flame)}.cj__tracks{padding:18px 20px;background:#f4e7c808;border:1px solid var(--cj-line);border-radius:12px}.cj__track-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}@media(max-width:720px){.cj__track-row{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){.cj__track-row{grid-template-columns:1fr}}.cj__track{background:linear-gradient(135deg,var(--track-c, var(--cj-walnut)) 0%,var(--cj-velvet) 100%);border:2px solid transparent;border-radius:10px;padding:12px 14px;cursor:pointer;display:flex;align-items:center;gap:12px;text-align:left;transition:transform .18s ease,border-color .18s ease}.cj__track:hover{transform:translateY(-2px)}.cj__track--active{border-color:var(--cj-flame);box-shadow:0 0 0 4px #f6c15e29}.cj__track-noun{width:40px;height:40px;border-radius:50%;background:#0000004d;display:grid;place-items:center;flex-shrink:0}.cj__track-noun img{width:80%;image-rendering:pixelated}.cj__track-meta{flex:1;min-width:0}.cj__track-name{font-family:var(--cj-display);font-weight:700;font-size:14px;color:#fff;margin:0 0 2px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cj__track-info{font-family:var(--cj-mono);font-size:10.5px;color:#ffffffb3;margin:0;letter-spacing:.2px}.cj__transport{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:16px 20px;background:#f4e7c808;border:1px solid var(--cj-line);border-radius:12px}@media(max-width:560px){.cj__transport{grid-template-columns:auto 1fr}.cj__vol{grid-column:1 / -1;justify-content:center}}.cj__play{width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 30% 25%,var(--play-c, var(--cj-flame)) 0%,var(--cj-walnut) 70%,var(--cj-velvet) 100%);border:2px solid rgba(244,231,200,.18);cursor:pointer;display:grid;place-items:center;color:var(--cj-velvet);font-size:26px;font-weight:800;padding-left:4px;transition:transform .15s ease,background .4s ease}.cj__play:hover{transform:scale(1.06)}.cj__play:focus-visible{outline:3px solid var(--cj-flame);outline-offset:4px}.cj__play--on .cj__play-icon{padding-left:0}.cj__transport-meta{min-width:0}.cj__transport-name{font-family:var(--cj-display);font-weight:700;font-size:16px;margin:0;color:var(--cj-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cj__transport-sub{font-family:var(--cj-mono);font-size:11px;color:var(--cj-text-mute);margin:4px 0 0;letter-spacing:.3px}.cj__vol{display:flex;align-items:center;gap:10px}.cj__vol-icon{font-size:14px;color:var(--cj-text-mute)}.cj__vol-slider{width:96px;-webkit-appearance:none;appearance:none;height:4px;background:#f4e7c829;border-radius:2px;outline:0;cursor:pointer}.cj__vol-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--cj-flame);cursor:pointer}.cj__vol-slider:focus-visible::-webkit-slider-thumb{outline:2px solid var(--cj-flame);outline-offset:3px}.cj__keyboard-wrap{padding:22px 22px 18px;background:linear-gradient(180deg,#f4e7c80a,#f4e7c803);border:1px solid var(--cj-line);border-radius:14px}.cj__keyboard{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin:14px 0 8px;height:200px}@media(max-width:560px){.cj__keyboard{height:160px;gap:4px}}.cj__key{background:linear-gradient(180deg,var(--key-c, var(--cj-cream)) 0%,color-mix(in srgb,var(--key-c, var(--cj-cream)) 70%,#000) 100%);border:2px solid rgba(0,0,0,.3);border-radius:10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:10px 4px;transition:transform .06s ease,filter .06s ease,box-shadow .06s ease;font-family:var(--cj-mono);color:var(--cj-velvet);box-shadow:0 4px 12px #00000040,0 -2px 4px #00000026 inset}.cj__key:focus-visible{outline:2px solid var(--cj-flame);outline-offset:3px}.cj__key:active,.cj__key--press{transform:translateY(2px) scale(.98);filter:brightness(1.18);box-shadow:0 1px 3px #0006,0 -1px 2px #0003 inset}.cj__key--ringing{animation:cj-ring .32s ease-out}@keyframes cj-ring{0%{filter:brightness(1.4)}to{filter:brightness(1)}}.cj__key-letter{font-size:18px;font-weight:700;opacity:.85}.cj__key-note{font-size:10px;opacity:.55;letter-spacing:.3px}.cj__key-root .cj__key-letter{color:#fff}.cj__key-root{background:linear-gradient(180deg,var(--cj-flame) 0%,color-mix(in srgb,var(--cj-flame) 60%,#000) 100%);color:var(--cj-velvet)}.cj__keyboard-hint{font-family:var(--cj-mono);font-size:10.5px;color:var(--cj-text-quiet);margin:8px 0 0;text-align:center;letter-spacing:.3px}.cj__foot{padding-top:24px;border-top:1px solid var(--cj-line);font-family:var(--cj-mono);font-size:11px;color:var(--cj-text-quiet);line-height:1.7;text-align:center}.cj__foot a{color:var(--cj-flame);text-decoration:none}.cj__foot a:hover{text-decoration:underline}