@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{--cs-bg: #0a0408;--cs-bg-2: #16080f;--cs-walnut: #5a3422;--cs-brass: #d4a437;--cs-flame: #f6c15e;--cs-cream: #f4e7c8;--cs-velvet: #1a0820;--cs-glass: rgba(244,231,200,.04);--cs-glass-hi: rgba(244,231,200,.08);--cs-line: rgba(244,231,200,.1);--cs-text: #f4e7c8;--cs-text-mute: rgba(244,231,200,.62);--cs-text-quiet: rgba(244,231,200,.38);--cs-display: "Inter Tight", system-ui, sans-serif;--cs-body: "Inter", system-ui, sans-serif;--cs-mono: "JetBrains Mono", ui-monospace, monospace;--cs-shadow-md: 0 8px 24px rgba(0,0,0,.42);--cs-shadow-lg: 0 24px 60px rgba(0,0,0,.55)}body{background:var(--cs-bg);color:var(--cs-text);font-family:var(--cs-body)}.cs{position:relative;min-height:100vh;padding-bottom:92px;overflow:hidden;isolation:isolate}.cs__ambient{position:fixed;inset:0;z-index:-1;background:radial-gradient(80% 60% at 20% 30%,var(--ambient-c1, #5a3422) 0%,transparent 60%),radial-gradient(60% 50% at 80% 80%,var(--ambient-c2, #1a0820) 0%,transparent 60%),linear-gradient(180deg,#0a0408,#16080f);filter:blur(40px) saturate(1.05);transform:scale(1.05);transition:--ambient-c1 1.6s ease,--ambient-c2 1.6s ease}.cs__shell{display:grid;grid-template-columns:280px 1fr;gap:8px;padding:8px 8px 0;height:calc(100vh - 92px);min-height:600px}@media(max-width:800px){.cs__shell{grid-template-columns:1fr}.cs__side{display:none}}.cs__side{background:linear-gradient(180deg,#16080ff5,#0a0408f5);border:1px solid var(--cs-line);border-radius:14px;padding:18px 14px;overflow-y:auto;backdrop-filter:blur(12px)}.cs__side::-webkit-scrollbar{width:6px}.cs__side::-webkit-scrollbar-thumb{background:#f4e7c81a;border-radius:3px}.cs__brand{display:flex;align-items:center;gap:12px;margin-bottom:22px;padding:0 4px}.cs__brand-mark{width:40px;height:40px;background:var(--cs-velvet);border-radius:8px;display:grid;place-items:center;box-shadow:0 2px 8px #0000004d}.cs__brand-name{font-family:var(--cs-display);font-weight:800;font-size:17px;line-height:1;margin:0 0 3px;letter-spacing:-.01em}.cs__brand-tag{font-family:var(--cs-mono);font-size:9.5px;color:var(--cs-text-quiet);letter-spacing:.4px;margin:0;text-transform:uppercase}.cs__nav{display:flex;flex-direction:column;gap:2px;margin-bottom:22px}.cs__nav-btn{display:flex;align-items:center;gap:14px;background:transparent;border:0;padding:11px 12px;color:var(--cs-text-mute);font-family:var(--cs-body);font-weight:600;font-size:13.5px;border-radius:8px;cursor:pointer;text-align:left;transition:all .18s ease}.cs__nav-btn:hover{background:var(--cs-glass);color:var(--cs-text);transform:translate(2px)}.cs__nav-btn--active{background:var(--cs-glass-hi);color:var(--cs-flame)}.cs__nav-icon{font-size:16px;width:20px;display:inline-block;text-align:center}.cs__side-section{margin-bottom:22px;padding:0 4px}.cs__side-label{font-family:var(--cs-mono);font-size:10px;letter-spacing:.6px;color:var(--cs-text-quiet);margin:0 0 10px;text-transform:uppercase}.cs__chain{display:flex;flex-direction:column;gap:4px}.cs__chain-step{font-family:var(--cs-mono);font-size:11px;color:var(--cs-text-mute);border-left:2px solid var(--cs-walnut);padding:6px 8px 6px 10px}.cs__chain-step span{color:var(--cs-flame);margin-right:6px}.cs__side-note{font-family:var(--cs-body);font-size:12px;color:var(--cs-text-mute);line-height:1.55;margin:0}.cs__side-foot{margin-top:24px;padding:12px 4px 4px;border-top:1px solid var(--cs-line);font-family:var(--cs-mono);font-size:10px;color:var(--cs-text-quiet);line-height:1.6}.cs__side-link{color:var(--cs-flame);text-decoration:none}.cs__side-link:hover{text-decoration:underline}.cs__main{background:linear-gradient(180deg,#16080feb,#0a0408eb 70%);border:1px solid var(--cs-line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;backdrop-filter:blur(12px)}.cs__view{flex:1;overflow-y:auto;padding:0;animation:cs-view-in .34s cubic-bezier(.2,.8,.2,1)}.cs__view::-webkit-scrollbar{width:8px}.cs__view::-webkit-scrollbar-thumb{background:#f4e7c81f;border-radius:4px}@keyframes cs-view-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.cs__hero{padding:44px 32px 24px;background:linear-gradient(180deg,var(--hero-c, #5a3422) 0%,transparent 100%)}.cs__hero-kicker{font-family:var(--cs-mono);font-size:11px;letter-spacing:.7px;color:#ffffffc7;margin:0 0 10px;text-transform:uppercase}.cs__hero-title{font-family:var(--cs-display);font-weight:800;font-size:clamp(40px,6vw,72px);line-height:.96;letter-spacing:-.02em;margin:0 0 14px;color:#fff}.cs__hero-sub{font-family:var(--cs-body);font-size:15px;color:#ffffffd6;max-width:620px;line-height:1.55;margin:0}.cs__section{padding:28px 32px}.cs__section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px}.cs__section-title{font-family:var(--cs-display);font-weight:700;font-size:22px;letter-spacing:-.01em;margin:0}.cs__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}.cs__card{cursor:pointer;padding:16px;background:linear-gradient(135deg,var(--card-c1, var(--cs-walnut)) 0%,var(--cs-velvet) 100%);border-radius:10px;transition:transform .22s ease,box-shadow .22s ease;box-shadow:var(--cs-shadow-md);position:relative;overflow:hidden;display:flex;align-items:center;gap:14px}.cs__card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.1) 0%,transparent 50%);pointer-events:none}.cs__card:hover{transform:translateY(-3px);box-shadow:var(--cs-shadow-lg)}.cs__card--playing{outline:2px solid var(--cs-flame);outline-offset:-2px}.cs__card-art{width:64px;height:64px;border-radius:6px;flex-shrink:0;background:#0000004d;display:grid;place-items:center;box-shadow:var(--cs-shadow-md)}.cs__card-art img{width:80%;image-rendering:pixelated;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}.cs__card-meta{flex:1;min-width:0;position:relative}.cs__card-name{font-family:var(--cs-display);font-weight:700;font-size:16px;color:#fff;margin:0 0 4px;line-height:1.2}.cs__card-artist{font-family:var(--cs-body);font-size:12.5px;color:#ffffffc7;margin:0 0 6px}.cs__card-tags{display:flex;gap:6px}.cs__card-tag{font-family:var(--cs-mono);font-size:9.5px;padding:2px 7px;background:#0000004d;color:#ffffffb8;border-radius:999px;letter-spacing:.3px;text-transform:uppercase}.cs__card-play{width:40px;height:40px;border-radius:50%;background:#0006;border:1px solid rgba(255,255,255,.18);color:#fff;cursor:pointer;display:grid;place-items:center;font-size:14px;transition:background .18s ease,transform .18s ease;flex-shrink:0;padding-left:2px}.cs__card-play:hover{background:var(--cs-flame);color:var(--cs-velvet);transform:scale(1.06)}.cs__card--playing .cs__card-play{background:var(--cs-flame);color:var(--cs-velvet)}.cs__detail{padding:28px 32px}.cs__detail-head{display:flex;gap:24px;align-items:flex-end;margin-bottom:24px}.cs__detail-art{width:180px;height:180px;border-radius:12px;background:linear-gradient(135deg,var(--detail-c, var(--cs-walnut)),var(--cs-velvet));display:grid;place-items:center;box-shadow:var(--cs-shadow-lg);flex-shrink:0}.cs__detail-art img{width:78%;image-rendering:pixelated;filter:drop-shadow(0 6px 12px rgba(0,0,0,.5))}.cs__detail-meta{flex:1;min-width:0}.cs__detail-kicker{font-family:var(--cs-mono);font-size:11px;color:var(--cs-text-quiet);letter-spacing:.5px;margin:0 0 8px;text-transform:uppercase}.cs__detail-name{font-family:var(--cs-display);font-weight:800;font-size:clamp(32px,4vw,52px);line-height:1;letter-spacing:-.02em;margin:0 0 10px;color:var(--cs-text)}.cs__detail-artist{font-family:var(--cs-body);font-size:15px;color:var(--cs-text-mute);margin:0}.cs__detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px}@media(max-width:720px){.cs__detail-grid{grid-template-columns:1fr}}.cs__detail-card{background:var(--cs-glass);border:1px solid var(--cs-line);border-radius:10px;padding:14px 16px}.cs__detail-card-label{font-family:var(--cs-mono);font-size:10px;color:var(--cs-text-quiet);margin:0 0 6px;letter-spacing:.5px;text-transform:uppercase}.cs__detail-card-val{font-family:var(--cs-display);font-weight:700;font-size:22px;color:var(--cs-text);margin:0 0 4px;line-height:1;letter-spacing:-.01em}.cs__detail-card-sub{font-family:var(--cs-body);font-size:12px;color:var(--cs-text-mute);margin:0}.cs__chord-strip{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin-bottom:14px}.cs__chord-cell{padding:14px 6px;background:var(--cs-glass);border:1px solid var(--cs-line);border-radius:6px;text-align:center;font-family:var(--cs-display);font-weight:700;font-size:14px;color:var(--cs-text);transition:background .2s ease,border-color .2s ease}.cs__chord-cell--active{background:var(--cs-flame);color:var(--cs-velvet);border-color:var(--cs-flame)}.cs__chord-num{font-family:var(--cs-mono);font-size:9px;color:var(--cs-text-quiet);display:block;margin-bottom:4px;font-weight:500;letter-spacing:.5px}.cs__chord-cell--active .cs__chord-num{color:#1a0820a6}.cs__step-grid{display:grid;grid-template-rows:repeat(5,auto);gap:6px;margin-top:14px}.cs__step-row{display:grid;grid-template-columns:64px repeat(16,1fr);gap:3px;align-items:center}.cs__step-label{font-family:var(--cs-mono);font-size:10px;color:var(--cs-text-mute);text-transform:uppercase;letter-spacing:.4px}.cs__step{aspect-ratio:1;background:#f4e7c80a;border-radius:3px;transition:background .12s ease,transform .12s ease}.cs__step--on{background:var(--cs-walnut)}.cs__step--on.cs__step--row-kick{background:#d4a437}.cs__step--on.cs__step--row-snare{background:#f6c15e}.cs__step--on.cs__step--row-hat{background:#9ed6f0}.cs__step--on.cs__step--row-bass{background:#ff5f7a}.cs__step--on.cs__step--row-lead{background:#a8ff3a}.cs__step--cur{outline:1px solid var(--cs-flame);outline-offset:1px}.cs__bars-mark{display:flex;justify-content:space-around;margin-top:4px;padding-left:67px}.cs__bars-mark span{font-family:var(--cs-mono);font-size:9px;color:var(--cs-text-quiet)}.cs__lyrics-block{background:linear-gradient(180deg,var(--cs-glass) 0%,transparent 100%);border-radius:10px;padding:22px;margin-top:22px}.cs__lyrics-line{font-family:var(--cs-display);font-weight:600;font-size:19px;line-height:1.45;margin:0 0 6px;color:var(--cs-text-quiet);transition:color .4s ease,transform .4s ease}.cs__lyrics-line--active{color:var(--cs-text);transform:translate(4px)}.cs__artists{padding:28px 32px}.cs__artists-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}.cs__artist{background:linear-gradient(135deg,var(--art-c, var(--cs-walnut)) 0%,var(--cs-velvet) 100%);border-radius:12px;padding:18px;box-shadow:var(--cs-shadow-md);transition:transform .22s ease,box-shadow .22s ease}.cs__artist:hover{transform:translateY(-3px);box-shadow:var(--cs-shadow-lg)}.cs__artist-portrait{width:72px;height:72px;border-radius:50%;background:#0000004d;display:grid;place-items:center;margin-bottom:14px}.cs__artist-portrait img{width:80%;image-rendering:pixelated}.cs__artist-name{font-family:var(--cs-display);font-weight:700;font-size:18px;color:#fff;margin:0 0 4px}.cs__artist-id{font-family:var(--cs-mono);font-size:10.5px;color:#ffffff9e;margin:0 0 10px;letter-spacing:.5px}.cs__artist-kit{font-family:var(--cs-body);font-size:12px;color:#ffffffc7;line-height:1.5;margin:0 0 12px}.cs__artist-tracks{font-family:var(--cs-mono);font-size:10.5px;color:#ffffff9e;margin:0;padding-top:10px;border-top:1px solid rgba(255,255,255,.12)}.cs__meters-page{padding:28px 32px}.cs__meters-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:18px}.cs__meters-card{background:var(--cs-glass);border:1px solid var(--cs-line);border-radius:12px;padding:18px}.cs__meters-card h3{font-family:var(--cs-display);font-weight:700;font-size:15px;margin:0 0 6px}.cs__meters-card p{font-family:var(--cs-body);font-size:12.5px;color:var(--cs-text-mute);margin:0 0 14px;line-height:1.55}.cs__big-meter{display:flex;gap:6px;height:120px;align-items:flex-end}.cs__big-meter-bar{flex:1;background:linear-gradient(180deg,#ff5f7a 0%,var(--cs-flame) 40%,var(--cs-brass) 100%);border-radius:2px;transition:height .06s linear;min-height:2px}.cs__bar{position:fixed;bottom:0;left:0;right:0;height:92px;background:linear-gradient(180deg,#0a0408f5,#040107fc);border-top:1px solid var(--cs-line);display:grid;grid-template-columns:1fr 1.2fr 1fr;align-items:center;padding:0 18px;gap:16px;z-index:90;backdrop-filter:blur(20px)}.cs__bar-l{display:flex;align-items:center;gap:14px;min-width:0}.cs__bar-art-frame{width:60px;height:60px;flex-shrink:0;border-radius:6px;overflow:hidden;background:linear-gradient(135deg,var(--art-c1, var(--cs-walnut)),var(--cs-velvet));display:grid;place-items:center;box-shadow:var(--cs-shadow-md)}.cs__bar-art-frame img{width:78%;image-rendering:pixelated;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}.cs__bar-meta{min-width:0;flex:1}.cs__bar-name{font-family:var(--cs-body);font-weight:600;font-size:13.5px;color:var(--cs-text);margin:0 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cs__bar-artist{font-family:var(--cs-body);font-size:11.5px;color:var(--cs-text-mute);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cs__bar-c{display:flex;flex-direction:column;align-items:center;gap:6px}.cs__bar-controls{display:flex;align-items:center;gap:16px}.cs__bar-btn{background:transparent;border:0;color:var(--cs-text-mute);cursor:pointer;font-size:18px;transition:color .15s ease,transform .15s ease;padding:4px}.cs__bar-btn:hover{color:var(--cs-text);transform:scale(1.1)}.cs__bar-play{width:36px;height:36px;border-radius:50%;background:var(--cs-text);color:var(--cs-velvet);border:0;cursor:pointer;display:grid;place-items:center;transition:transform .18s ease,background .18s ease}.cs__bar-play:hover{transform:scale(1.1);background:#fff}.cs__bar-prog{display:flex;align-items:center;gap:10px;width:100%;max-width:540px}.cs__bar-time{font-family:var(--cs-mono);font-size:10.5px;color:var(--cs-text-quiet);width:36px;text-align:center}.cs__bar-prog-track{flex:1;height:4px;background:#f4e7c829;border-radius:2px;position:relative;overflow:hidden}.cs__bar-prog-fill{height:100%;background:var(--cs-text);border-radius:2px;width:0%;pointer-events:none}.cs__bar-prog-bars{position:absolute;inset:0;display:flex;pointer-events:none}.cs__bar-prog-bars span{flex:1;border-right:1px solid rgba(0,0,0,.4)}.cs__bar-prog-bars span:last-child{border-right:0}.cs__bar-r{display:flex;align-items:center;gap:14px;justify-content:flex-end}.cs__meter{display:flex;gap:3px;height:18px}.cs__meter-l{width:5px;height:100%;background:#f4e7c81f;border-radius:1px;overflow:hidden;position:relative}.cs__meter-fill{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(180deg,#ff5f7a 0%,var(--cs-flame) 40%,var(--cs-brass) 100%);height:0%;transition:height .06s linear}.cs__bar-vol{display:flex;align-items:center;gap:8px}.cs__bar-vol-icon{font-size:14px;color:var(--cs-text-mute)}.cs__bar-vol-slider{width:96px;-webkit-appearance:none;appearance:none;height:4px;background:#f4e7c829;border-radius:2px;outline:0;cursor:pointer}.cs__bar-vol-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:var(--cs-text);cursor:pointer}.cs__intro{padding:28px 32px;background:var(--cs-glass);border:1px dashed var(--cs-line);margin:22px 32px;border-radius:12px}.cs__intro-title{font-family:var(--cs-display);font-weight:700;font-size:18px;margin:0 0 8px}.cs__intro-body{font-family:var(--cs-body);font-size:13.5px;color:var(--cs-text-mute);line-height:1.6;margin:0}.cs__intro-body code{font-family:var(--cs-mono);background:var(--cs-velvet);padding:1px 6px;border-radius:3px;color:var(--cs-flame);font-size:12px}