:root{--bg: #020617;--card: #080e20;--card-a: #080e20;--card-b: #151c34;--text: #ffffff;--dim: #9295a0;--faint: #42444f;--rule: #171d32;--gold: #f4c430;--gold-lo: rgba(244, 196, 48, .06);--gold-b: rgba(244, 196, 48, .18);--font: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--live-dot: #ef4444;--sp-xxs: 2px;--sp-xs: 4px;--sp-sm: 8px;--sp-md: 16px;--sp-lg: 24px;--sp-xl: 32px;--sp-xxl: 48px;--r-sm: 8px;--r-md: 12px;--r-lg: 16px;--r-xl: 24px;--r-pill: 999px;--motion-ease: cubic-bezier(.22, 1, .36, 1);--motion-ease-out-back: cubic-bezier(.33, 1.08, .64, 1);--motion-ease-in-out: cubic-bezier(.45, .02, .55, .98);--motion-micro: .14s;--motion-fast: .18s;--motion-base: .24s;--motion-relaxed: .4s}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}img{display:block;max-width:100%}picture{display:contents}a{color:var(--gold);text-decoration:none}a:hover{text-decoration:underline}.wrap{max-width:560px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}.wrap-wide{max-width:960px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}.nav{position:sticky;top:0;z-index:10;background:#020617c7;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--rule)}.nav-bar{display:flex;align-items:center;justify-content:space-between;height:56px}.nav-logo{display:flex;align-items:center;gap:8px;text-decoration:none}.nav-mark{width:26px;height:26px;border-radius:6px}.nav-name{font-size:.9375rem;font-weight:700;color:var(--text);letter-spacing:-.01em}.nav-links{display:flex;gap:20px}.nav-links a{font-size:.8125rem;font-weight:500;color:var(--dim);transition:color var(--motion-micro) var(--motion-ease)}.nav-links a:hover{color:var(--text);text-decoration:none}.nav-links a.nav-active{color:var(--text)}.nav-active{color:var(--text)!important}.nav-burger{display:none;background:none;border:none;cursor:pointer;padding:6px;flex-direction:column;gap:5px;z-index:12}.nav-burger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:transform var(--motion-base) var(--motion-ease-out-back),opacity var(--motion-fast) var(--motion-ease)}.nav-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}.nav-burger.is-open span:nth-child(2){opacity:0}.nav-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.footer{border-top:1px solid var(--rule);padding:24px 0 calc(24px + env(safe-area-inset-bottom,0px))}.footer-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}.footer-copy{font-size:.8125rem;color:var(--faint)}.footer-links{display:flex;gap:20px}.footer-links a{font-size:.8125rem;color:var(--dim)}.footer-links a:hover{color:var(--text);text-decoration:none}[hidden]{display:none!important}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.chip{flex-shrink:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:8px 18px;border-radius:999px;border:1px solid var(--card-b);background:var(--card);font-family:var(--font);font-size:.8125rem;font-weight:600;color:var(--dim);cursor:pointer;white-space:nowrap;transition:border-color var(--motion-fast) var(--motion-ease),color var(--motion-fast) var(--motion-ease),background var(--motion-fast) var(--motion-ease),transform var(--motion-micro) var(--motion-ease-out-back)}.chip:hover{border-color:var(--faint);color:var(--text)}.chip:active{transform:scale(.97)}.chip--active{border-color:#f4c43073;color:var(--gold);background:var(--gold-lo)}.genre-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:10px}.genre-tile{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:flex;align-items:center;justify-content:center;padding:12px 10px;border-radius:10px;border:1px solid var(--card-b);background:var(--card);font-family:var(--font);cursor:pointer;transition:border-color var(--motion-base) var(--motion-ease),background var(--motion-base) var(--motion-ease),transform var(--motion-base) var(--motion-ease-out-back),box-shadow var(--motion-base) var(--motion-ease)}.genre-tile:hover{border-color:var(--faint);background:#ffffff0a}@media(hover:hover)and (pointer:fine){.genre-tile:hover{transform:translateY(-2px);box-shadow:0 8px 22px #00000047}}.genre-tile:active{transform:scale(.98)}.genre-tile--active{border-color:#f4c43073;background:var(--gold-lo)}.genre-tile-name{font-size:.8125rem;font-weight:600;color:var(--dim)}.genre-tile--active .genre-tile-name{color:var(--gold)}.section-title{font-size:clamp(1.75rem,5vw,2.5rem);font-weight:800;letter-spacing:-.04em;line-height:1.1;text-align:center;margin-bottom:16px}.section-sub{font-size:1rem;line-height:1.7;color:var(--dim);text-align:center;max-width:480px;margin:0 auto 56px}.gold{color:var(--gold);-webkit-text-fill-color:var(--gold)}:focus-visible{outline:2px solid var(--gold);outline-offset:2px}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[role=tab]:focus-visible,[role=button]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}