@layer tokens, base, layout, components, responsive;
@layer tokens {
  :root { color-scheme: dark; --bg:#131413; --surface:#1b1c1b; --surface-hover:#242624; --text:#f1f2ed; --muted:#91958d; --accent:#c4f567; --line:#32352e; --font:"MiSans","Microsoft YaHei","PingFang SC",sans-serif; --mono:var(--font); --weight-body:400; --weight-heading:400; --weight-emphasis:500; --touch-target:44px;--text-66px:66px;--text-44px:44px;--text-39px:39px;--text-7px:7px;--text-76px:76px;--text-52px:52px;--text-20px:20px;--text-25px:25px;--text-16px:16px;--text-30px:30px;--text-32px:32px;--text-28px:28px;--text-29px:29px;--text-62px:62px;--text-27px:27px;--text-9px:9px;--text-15px:15px;--text-33px:33px;--text-35px:35px;--text-34px:34px;--text-24px:24px;--text-14px:14px;--text-23px:23px;--text-5px:5px;--text-37px:37px;--text-6px:6px;--text-8px:8px;--text-10px:10px;--text-12px:12px;--text-17px:17px;--text-11px:11px;--text-13px:13px;--palette-0:#c4f56709;--palette-1:#c4f52222;--palette-2:#798e4a66;--palette-3:#a8c47319;--palette-4:#e0f7ce1c;--palette-5:#e0f7ce24;--palette-6:#ffffff50;--palette-7:#29253588;--palette-8:#58644844;--palette-9:#24190ddb;--palette-10:#ffffff18;--palette-11:#1b1d19f5;--palette-12:#23291d;--palette-13:#d3ff87;--palette-14:#70766b;--palette-15:#afb79e;--palette-16:#737e5c;--palette-17:#181c17;--palette-18:#32362d;--palette-19:#191d18;--palette-20:#22330b;--palette-21:#10150e;--palette-22:#809b49;--palette-23:#a1aa91;--palette-24:#babfb3;--palette-25:#5f597e;--palette-26:#f0eee4;--palette-27:#cbc6cf;--palette-28:#7c788c;--palette-29:#2c2b3d;--palette-30:#151420;--palette-31:#242039;--palette-32:#c5ccbc;--palette-33:#253929;--palette-34:#425e49;--palette-35:#84957c;--palette-36:#ccd3bf;--palette-37:#627b59;--palette-38:#c16242;--palette-39:#251b13;--palette-40:#f4e8d4;--palette-41:#81867b;--palette-42:#292b26;--palette-43:#20251b;--palette-44:#a4ab99;--palette-45:#73796b;--palette-46:#b9beb1;--palette-47:#404534;--palette-48:#505744;--palette-49:#abb79b;--palette-50:#0009;--palette-51:#0007;--palette-52:#0002;--palette-53:#0005;--palette-54:#000b;--palette-55:#0003;--palette-56:#fff;--palette-57:#000; --safe-bottom:env(safe-area-inset-bottom,0px); --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:88px; --radius-sm:6px; --radius-md:12px; --radius-pill:99px; --content:1320px; --page-gutter:64px; --player-height:100px; --player-launcher-size:56px; --player-clearance:16px; --transition:180ms ease; --field-focus-line:#87977a; --range-track:#7a856e; }
}
@layer base {
  html,body,body *{scrollbar-width:none}html::-webkit-scrollbar,body::-webkit-scrollbar,body *::-webkit-scrollbar{display:none;width:0;height:0}

  
  
  *{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:35px;scroll-padding-bottom:calc(var(--player-height) + var(--safe-bottom) + var(--player-clearance))}body{margin:0;background:var(--bg);color:var(--text);font:var(--weight-body) var(--body-size,var(--text-14px))/1.6 var(--font);padding-bottom:calc(var(--player-height) + var(--safe-bottom))}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{color:inherit;cursor:pointer}button{border:0}a{color:inherit;text-decoration:none}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:var(--weight-heading)}strong,b{font-weight:var(--weight-emphasis)}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}::selection{background:var(--accent);color:var(--bg)}[hidden]{display:none!important}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}.accent{color:var(--accent)}.mono{font-family:var(--mono)}.eyebrow{font:var(--text-10px)/1.5 var(--mono);letter-spacing:1.7px;color:var(--muted)}
}
@layer layout {
  .site-header,main,.site-footer{max-width:var(--content);margin:auto}.site-header{height:100px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--page-gutter)}.site-header nav{display:flex;gap:36px;color:var(--muted);font-size:var(--text-13px)}.site-header nav a{position:relative}.site-header nav a:hover,.site-header nav a.active{color:var(--text)}.site-header nav a.active:after{content:"";position:absolute;bottom:-11px;left:50%;width:4px;height:4px;border-radius:50%;background:var(--accent)}.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:var(--s7);padding:42px var(--page-gutter) 58px;min-height:552px}.hero-copy{padding-top:13px}.hero-art{position:relative;overflow:hidden;min-height:440px;background:var(--palette-12);border-radius:var(--radius-sm)}.ticker{height:64px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px;padding:0 var(--page-gutter);overflow:hidden;white-space:nowrap}.section{padding:var(--section-space,var(--s8)) var(--page-gutter)}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:var(--s6)}.featured-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}.about{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);border-top:1px solid var(--line)}.contact{border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.site-footer{padding:25px var(--page-gutter) 40px;display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:var(--text-11px);border-top:1px solid var(--line)}
}
@layer components {
  .scroll-hint{font-size:var(--text-12px);color:var(--muted);margin-bottom:var(--s3)}
  .player-toggle{position:static;grid-column:4;grid-row:1;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--muted);justify-self:end}
  .player-toggle:hover{color:var(--text);background:var(--surface-hover)}
  .player-toggle svg{width:18px;height:18px;stroke-width:1.6}

  .hero h1>span{color:var(--accent)}
  .hero-description,#about h2,.about-copy p{white-space:pre-line}
  #hero-title>strong{font-weight:var(--weight-heading)}
  .hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.65)}
  .hero-art.has-image .vinyl,.hero-art.has-image .orbital,.hero-art.has-image .art-cross{display:none}
  .cover.custom-cover{background-size:cover;background-position:center}.cover.custom-cover:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent,var(--palette-50))}
  .cover.custom-cover .night-orb,.cover.custom-cover .float-shape,.cover.custom-cover .city-lines{display:none}
  .cover.custom-cover .cover-word,.cover.custom-cover .cover-tag,.cover.custom-cover .cover-code{color:var(--palette-56)}
  .cover .cover-word.dynamic-title{font-size:clamp(var(--text-20px),2.2vw,var(--text-30px));line-height:1.3;max-width:85%;overflow-wrap:anywhere;top:65px}

  #shuffle{position:relative}#shuffle[aria-pressed=true]:after{content:"";position:absolute;bottom:1px;left:calc(50% - 2px);width:4px;height:4px;border-radius:50%;background:var(--accent)}
  .lyrics-panel{position:fixed;z-index:30;right:24px;bottom:calc(var(--player-height) + var(--safe-bottom) + 12px);width:420px;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:24px;box-shadow:0 12px 40px var(--palette-51)}
  .lyrics-panel .queue-heading{gap:12px;align-items:start}.lyrics-panel h3{font-size:var(--text-17px);margin-top:6px;overflow-wrap:anywhere}.lyrics-panel .queue-heading>div{min-width:0}
  #lyrics-status{font-size:var(--text-12px);color:var(--muted);line-height:1.8}
  .lyrics-lines{position:relative;max-height:min(42vh,360px);overflow-y:auto;overscroll-behavior:contain;margin-top:16px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  .lyric-line{display:block;width:100%;background:none;text-align:left;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--muted);font-size:var(--text-17px);font-weight:var(--weight-body);line-height:1.8;padding:12px 8px;border-radius:var(--radius-sm);min-height:48px;transition:color var(--transition),background var(--transition)}
  button.lyric-line:hover{background:var(--surface-hover);color:var(--text)}.lyric-line.active{color:var(--accent);background:var(--palette-0)}
  #lyrics-button[aria-expanded=true]{color:var(--accent)}.availability{display:flex;gap:9px;align-items:center;font-size:var(--text-11px)}.availability svg{width:14px;margin-left:8px}.status-dot{display:inline-block;width:6px;height:6px;background:var(--accent);border-radius:50%;box-shadow:0 0 9px var(--palette-1);flex-shrink:0}.short-line{display:inline-block;width:23px;height:1px;background:var(--accent);vertical-align:middle;margin-right:9px}.hero h1{position:relative;font-size:clamp(var(--text-52px),5.5vw,var(--hero-size,var(--text-76px)));font-weight:var(--weight-heading);letter-spacing:-3px;line-height:1.27;margin:27px 0 23px}.hero-description{color:var(--muted);font-size:var(--text-13px);line-height:2}.hero-actions{display:flex;align-items:center;gap:30px;margin-top:28px}.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:14px 21px;border-radius:var(--radius-sm);font-weight:var(--weight-emphasis);font-size:var(--text-12px);transition:background var(--transition),transform var(--transition)}.button:hover{transform:translateY(-2px)}.primary{background:var(--accent);color:var(--bg)}.primary:hover{background:var(--palette-13)}.text-link{display:flex;align-items:center;gap:12px;font-size:var(--text-12px)}.text-link svg{width:15px}.hero-foot{display:flex;align-items:center;gap:20px;color:var(--muted);font-size:var(--text-10px);margin-top:39px}.hero-foot .mono{font-size:var(--text-8px);letter-spacing:.7px;border-left:1px solid var(--line);padding-left:20px}.art-top,.art-bottom{position:absolute;left:25px;right:25px;display:flex;align-items:center;justify-content:space-between;z-index:3}.art-top{top:23px;font-size:var(--text-8px);letter-spacing:1px;color:var(--palette-15)}.pill{border:1px solid var(--palette-16);padding:4px 8px;border-radius:var(--radius-pill);font-size:var(--text-8px)}.hero-art:before{content:"";position:absolute;inset:0;opacity:.2;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23ffffff' filter='url(%23n)' opacity='.3' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}.orbital{position:absolute;left:50%;top:48%;width:480px;height:225px;border:1px solid var(--palette-2);border-radius:50%;transform:translate(-50%,-50%) rotate(-30deg)}.orbital-two{transform:translate(-50%,-50%) rotate(50deg);width:440px;height:310px}.vinyl{position:absolute;width:310px;height:310px;left:50%;top:48%;transform:translate(-50%,-50%) rotate(-15deg);border-radius:50%;background:repeating-radial-gradient(circle at center,var(--palette-17) 0,var(--palette-17) 1px,var(--palette-18) 2px,var(--palette-19) 3px,var(--palette-19) 5px);box-shadow:19px 23px 38px var(--palette-50),-6px -6px 13px var(--palette-3);display:grid;place-items:center}.vinyl:after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(transparent 15deg,var(--palette-4) 55deg,transparent 90deg,transparent 160deg,var(--palette-5) 210deg,transparent 250deg);pointer-events:none}.vinyl-label{width:139px;height:139px;border-radius:50%;background:var(--accent);color:var(--palette-20);display:flex;flex-direction:column;align-items:center;padding-top:15px;text-align:center}.vinyl-label>span{font-size:var(--text-6px);letter-spacing:1px}.vinyl-label strong{font-size:var(--text-37px);font-weight:var(--weight-emphasis);letter-spacing:-3px;line-height:1.4}.vinyl-label small{font-size:var(--text-5px);letter-spacing:1px}.vinyl-label i{width:10px;height:10px;border-radius:50%;background:var(--palette-21);margin-top:5px;border:2px solid var(--palette-22)}.vinyl-label .label-bottom{margin-top:9px;font-size:var(--text-5px)}.art-cross{position:absolute;color:var(--accent);font-size:var(--text-23px);font-weight:200}.cross-one{top:95px;left:25px}.cross-two{right:25px;bottom:100px}.art-bottom{bottom:24px}.tiny-label{display:block;font:var(--text-7px) var(--mono);letter-spacing:1px;color:var(--palette-23);margin-bottom:6px}.art-bottom strong{font-size:var(--text-14px);letter-spacing:1px}.sound-bars{display:flex;height:31px;align-items:center;gap:3px}.sound-bars i{height:17px;width:2px;background:var(--accent)}.sound-bars i:nth-child(3n){height:30px}.sound-bars i:nth-child(3n+1){height:9px}.ticker span{font-size:var(--text-12px);letter-spacing:2px;color:var(--palette-24)}.ticker b{color:var(--accent);font-size:var(--text-24px);font-weight:400}.section-heading h2{font-size:var(--text-34px);letter-spacing:-1px;margin-top:9px}.section-heading p{font-size:var(--text-12px);color:var(--muted);padding-bottom:6px}.release-card{background:none;text-align:left;padding:0;min-width:0}.cover{position:relative;height:255px;overflow:hidden;border-radius:var(--radius-sm);isolation:isolate;transition:filter var(--transition)}.release-card:hover .cover{filter:brightness(1.12)}.cover-tag{position:absolute;top:18px;left:19px;font:var(--text-8px) var(--mono);letter-spacing:1.5px;z-index:2}.cover-code{position:absolute;bottom:16px;left:19px;font:var(--text-6px) var(--mono);letter-spacing:1px;z-index:2}.cover-word{position:absolute;top:75px;left:24px;font:400 var(--text-39px)/1.05 var(--font);letter-spacing:-1.5px;z-index:2}.cover-word>span{display:block;font:var(--text-11px) var(--font);letter-spacing:5px;margin-top:15px}.cover-play{position:absolute;bottom:20px;right:18px;border-radius:50%;border:1px solid var(--palette-6);display:grid;place-items:center;width:35px;height:35px;z-index:3;transition:background var(--transition)}.release-card:hover .cover-play{background:var(--accent);color:var(--bg);border-color:var(--accent)}.cover-night{background:var(--palette-25);color:var(--palette-26)}.night-orb{position:absolute;width:255px;height:255px;right:-24px;top:18px;border-radius:50%;background:radial-gradient(circle at 35% 27%,var(--palette-27),var(--palette-28) 33%,var(--palette-29) 66%,var(--palette-30) 77%);box-shadow:8px 15px 30px var(--palette-31)}.night-orb:after{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,var(--palette-7) 4px,transparent 5px)}.cover-float{background:var(--palette-32);color:var(--palette-33)}.cover-float .cover-word{top:118px;font-size:var(--text-35px)}.float-shape{position:absolute;width:250px;height:200px;right:-17px;top:10px;background:repeating-radial-gradient(ellipse at 65% 40%,var(--palette-34) 0px,var(--palette-35) 2px,var(--palette-36) 4px,var(--palette-37) 7px);border-radius:40% 60% 40% 60%;transform:rotate(-35deg);box-shadow:-15px 25px 35px var(--palette-8)}.cover-city{background:var(--palette-38);color:var(--palette-39)}.city-lines{position:absolute;inset:-50%;transform:rotate(-29deg);background:repeating-linear-gradient(90deg,transparent 0,transparent 17px,var(--palette-9) 18px,var(--palette-9) 29px,transparent 30px,transparent 42px);mask-image:linear-gradient(0deg,var(--palette-57) 15%,transparent 87%)}.cover-city .cover-word{font-size:var(--text-33px);color:var(--palette-40);top:86px}.release-info{display:flex;align-items:center;justify-content:space-between;padding:18px 0 0}.release-info h3{font-size:var(--text-15px);font-weight:var(--weight-emphasis);margin-bottom:3px}.release-info p{font-size:var(--text-10px);color:var(--muted)}.release-info p span{margin:0 6px}.release-year{display:flex;gap:10px;align-items:center;font:var(--text-10px) var(--mono);color:var(--muted)}.release-year svg{width:14px}.library-heading{display:flex;align-items:center;justify-content:space-between;margin-top:49px;margin-bottom:18px}.library-title{display:flex;align-items:center;gap:10px}.library-title h3{font-size:var(--text-17px)}.count{background:var(--surface);color:var(--muted);padding:1px 7px;border-radius:4px;font:var(--text-10px)/1.6 var(--mono)}.sync-info{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:var(--text-10px)}.icon-button{display:grid;place-items:center;background:none;width:32px;height:32px;padding:6px;border-radius:var(--radius-sm);color:var(--muted)}.icon-button:hover{color:var(--text);background:var(--surface-hover)}.icon-button[aria-pressed=true]{color:var(--accent)}.icon-button svg{width:17px;height:17px}.library-tools{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);margin-bottom:20px}.filters{display:flex;gap:7px;flex-wrap:wrap}.filter{padding:7px 14px;border-radius:var(--radius-sm);background:none;color:var(--muted);font-size:var(--text-11px)}.filter:hover{background:var(--surface)}.filter.active{background:var(--accent);color:var(--bg)}.search-box{border:1px solid var(--line);border-radius:var(--radius-sm);display:flex;align-items:center;gap:8px;padding:7px 11px;color:var(--muted)}.search-box svg{width:15px;height:15px}.search-box input{background:none;border:none;color:var(--text);width:159px;outline:none;font-size:var(--text-11px)}.search-box:focus-within{border-color:var(--field-focus-line)}.table-head,.track-row{display:grid;grid-template-columns:42px minmax(0,1fr) 150px 80px 70px 34px;align-items:center;gap:10px}.table-head{font:var(--text-9px) var(--mono);color:var(--palette-41);padding:12px 15px;border-bottom:1px solid var(--line)}.track-row{padding:13px 15px;border-bottom:1px solid var(--palette-42);transition:background var(--transition);border-radius:4px;min-height:73px}.track-row:hover,.track-row.current{background:var(--palette-43)}.track-number{color:var(--muted);font:var(--text-11px) var(--mono);background:none;width:28px;height:28px;display:grid;place-items:center}.track-number svg{width:19px}.track-row.current .track-number,.track-row.current .track-title{color:var(--accent)}.track-name{display:flex;gap:13px;align-items:center;min-width:0}.track-title{background:none;text-align:left;display:block;padding:0;font-size:var(--text-12px);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-subtitle{display:block;color:var(--muted);font-size:var(--text-10px);margin-top:2px}.track-name>div:last-child{min-width:0}.mini-cover{height:39px;width:39px;flex-shrink:0;border-radius:4px;background-image:repeating-radial-gradient(ellipse at 60% 40%,transparent 0,var(--palette-10) 2px,transparent 3px,transparent 6px)}.genre-tag{font-size:var(--text-10px);color:var(--palette-44);padding:3px 8px;border:1px solid var(--line);border-radius:4px;width:fit-content}.track-year,.track-duration{font:var(--text-10px) var(--mono);color:var(--muted)}.library-bottom{display:flex;justify-content:space-between;color:var(--muted);font-size:var(--text-9px);margin-top:19px}.library-bottom .mono{font-size:var(--text-8px);letter-spacing:1px}.empty-state{padding:45px 20px;text-align:center;color:var(--muted);font-size:var(--text-13px)}.about h2{font-size:var(--text-34px);line-height:1.65;letter-spacing:-1px;margin-top:17px}.about-copy{padding-top:28px;font-size:var(--text-12px);line-height:2.1;color:var(--muted)}.about-copy p{text-wrap:balance;overflow-wrap:break-word}.about-copy p+p{margin-top:var(--s4)}.skill-tags{display:flex;gap:10px;margin-top:22px}.skill-tags span{border:1px solid var(--line);padding:3px 12px;border-radius:var(--radius-pill);font-size:var(--text-10px);color:var(--palette-46)}.contact h2{font-size:var(--text-35px);margin-top:15px;display:flex;align-items:center;gap:22px}.contact h2 svg{color:var(--accent);width:34px;height:34px}.contact p{font-size:var(--text-12px);color:var(--muted);margin-top:12px}.player{position:fixed;z-index:20;bottom:0;left:0;right:0;height:var(--player-height);background:var(--palette-11);backdrop-filter:blur(20px);border-top:1px solid var(--palette-47);display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,1.25fr) auto 44px;gap:30px;align-items:center;padding:12px max(24px,calc((100vw - 1192px)/2));box-shadow:0 -8px 35px var(--palette-52)}.now-playing{display:flex;gap:13px;align-items:center;min-width:0}.now-playing>div:last-child{min-width:0}.now-playing .mini-cover{width:47px;height:47px}.now-playing strong{display:block;font-size:var(--text-12px);font-weight:var(--weight-emphasis);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.now-playing span{display:block;font-size:var(--text-10px);color:var(--muted);margin-top:4px}.player-controls{display:flex;gap:20px;align-items:center;justify-content:center}.previous svg{transform:rotate(180deg)}.main-play{border-radius:50%;width:34px;height:34px;display:grid;place-items:center;background:var(--accent);color:var(--bg)}.timeline{display:flex;gap:12px;align-items:center;font:var(--text-9px) var(--mono);color:var(--muted);margin-top:9px}.timeline input{flex:1;width:100%}input[type=range]:focus-visible{outline:1px solid var(--field-focus-line);outline-offset:2px}input[type=range]{appearance:none;height:var(--touch-target);background:linear-gradient(var(--range-track),var(--range-track)) center / 100% 3px no-repeat;accent-color:var(--accent);cursor:pointer;border-radius:4px}input[type=range]::-webkit-slider-runnable-track{height:3px}input[type=range]::-moz-range-track{height:3px;background:var(--range-track)}input[type=range]::-moz-range-thumb{border:0;width:13px;height:13px;background:var(--accent);border-radius:50%}input[type=range]::-webkit-slider-thumb{margin-top:-5px;appearance:none;width:13px;height:13px;border-radius:50%;background:var(--accent)}.player-end{display:flex;gap:12px;align-items:center;justify-content:end}.player-end input{width:70px}.audio-label{font:var(--text-7px) var(--mono);letter-spacing:1px;border:1px solid var(--palette-48);border-radius:3px;color:var(--palette-49);padding:2px 5px}.queue-panel{position:fixed;right:24px;bottom:calc(var(--player-height) + var(--safe-bottom) + 12px);width:340px;max-height:60vh;overflow:auto;z-index:30;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:18px;box-shadow:0 12px 40px var(--palette-51)}.queue-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.queue-heading h3{font-size:var(--text-15px)}.queue-track{display:flex;width:100%;align-items:center;gap:13px;text-align:left;background:none;padding:12px 8px;border-radius:var(--radius-sm);font-size:var(--text-12px)}.queue-track:hover{background:var(--surface-hover)}.queue-track.current{color:var(--accent)}.queue-track>span:first-child{font:var(--text-10px) var(--mono);color:var(--muted)}.toast{position:fixed;bottom:calc(var(--player-height) + var(--safe-bottom) + 18px);left:50%;transform:translateX(-50%);z-index:40;background:var(--accent);color:var(--bg);padding:12px 22px;border-radius:var(--radius-sm);max-width:90vw;font-size:var(--text-12px);box-shadow:0 5px 25px var(--palette-53)}dialog{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:var(--radius-md);padding:44px;max-width:calc(100vw - 32px)}dialog::backdrop{background:var(--palette-54);backdrop-filter:blur(5px)}dialog h2{font-size:var(--text-27px);margin:15px 0}dialog p{color:var(--muted);font-size:var(--text-12px);line-height:2;margin-bottom:24px}.dialog-close{position:absolute;right:12px;top:12px}.playing .vinyl{animation:spin 24s linear infinite}@keyframes spin{to{transform:translate(-50%,-50%) rotate(345deg)}}
}
@layer responsive {
  @media(min-width:1500px){.hero{padding-top:58px;padding-bottom:74px}.hero-art{min-height:475px}.hero-copy{padding-top:26px}.cover{height:275px}}
  @media(max-width:1050px){:root{--page-gutter:32px}.hero{gap:25px}.hero h1{font-size:var(--text-62px)}.vinyl{width:275px;height:275px}.cover{height:225px}.cover-word{font-size:var(--text-33px);left:18px}.cover-float .cover-word{font-size:var(--text-29px)}.cover-city .cover-word{font-size:var(--text-28px)}.hero-foot .mono{display:none}.player{gap:16px;padding-inline:24px}.audio-label{display:none}.table-head,.track-row{grid-template-columns:30px minmax(0,1fr) 120px 60px 50px 25px}.ticker{gap:25px}.ticker span{font-size:var(--text-10px)}.player-controls{gap:12px}}
  @media(max-width:760px) {
    :root { --page-gutter:20px; --s8:40px; --player-height:164px; }
    html { scroll-padding-top:20px; } .section{padding-block:var(--s8)} .cover .cover-word.dynamic-title{font-size:var(--text-24px);}
    .site-header { height:auto; min-height:92px; padding-block:12px; gap:4px 12px; flex-wrap:wrap; }
    .site-header nav { gap:16px; font-size:var(--text-12px); }
    .site-header nav a { display:flex; align-items:center; min-height:var(--touch-target); }
    .site-header nav a.active:after { bottom:0; }
    .availability { display:none; }
    .hero { grid-template-columns:minmax(0,1fr); min-height:auto; padding-top:16px; padding-bottom:28px; gap:24px; }
    .hero-copy { padding-top:0; }
    .hero h1 { font-size:clamp(var(--text-44px),12vw,var(--text-66px)); line-height:1.2; margin:18px 0; letter-spacing:-2px; }
    .hero-description { font-size:var(--text-13px); line-height:1.9; }
    .hero-actions { margin-top:20px; gap:22px; }
    .button,.text-link { min-height:var(--touch-target); font-size:var(--text-13px); }
    .hero-foot { margin-top:18px; font-size:var(--text-11px); }
    .hero-art { min-height:260px; } .vinyl { width:205px; height:205px; top:49%; }
    .vinyl-label { transform:scale(.8); } .art-top { top:14px; left:16px; right:16px; }
    .art-bottom { bottom:14px; left:16px; right:16px; } .art-bottom strong { font-size:var(--text-12px); }
    .tiny-label { font-size:var(--text-6px); } .cross-one { top:60px; left:16px; } .cross-two { bottom:65px; right:16px; }
    .ticker { height:48px; justify-content:start; gap:20px; } .ticker span { font-size:var(--text-10px); }
    .section-heading { align-items:start; flex-direction:column; gap:8px; margin-bottom:24px; }
    .section-heading h2 { font-size:var(--text-29px); } .section-heading p { font-size:var(--text-12px); padding:0; }
    .featured-grid { grid-template-columns:minmax(0,1fr); gap:26px; }
    .cover { height:auto; aspect-ratio:1.65; }
    .cover-word { top:64px; font-size:var(--text-34px); } .cover-float .cover-word { top:90px; font-size:var(--text-32px); }
    .cover-city .cover-word { top:65px; font-size:var(--text-30px); }
    .cover-word>span { font-size:var(--text-11px); margin-top:10px; }
    .cover-play { width:44px; height:44px; } .cover-code { font-size:var(--text-6px); }
    .release-info { padding-top:12px; gap:12px; } .release-info h3 { font-size:var(--text-15px); }
    .release-info p { font-size:var(--text-12px); } .release-year { font-size:var(--text-11px); }
    .library-heading { margin-top:32px; margin-bottom:12px; } .sync-info { font-size:var(--text-11px); gap:5px; }
    .library-tools { flex-direction:column; align-items:stretch; gap:12px; }
    .filters { gap:var(--s1); flex-wrap:nowrap; min-width:0; max-width:100%; overflow-x:auto; padding:var(--s1); scroll-padding-inline:var(--s1); } .filter { flex:0 0 auto; white-space:nowrap; min-height:var(--touch-target); padding:8px 14px; font-size:var(--text-13px); }
    .search-box { min-height:48px; } .search-box input { width:100%; min-width:0; font-size:var(--text-16px); }
    .table-head { display:none; }
    .track-row { grid-template-columns:36px minmax(0,1fr) 44px; gap:8px; padding:12px 0; }
    .track-row .genre-tag,.track-row .track-year,.track-row .track-queue { display:none; }
    .track-number { width:36px; height:48px; font-size:var(--text-12px); }
    .track-name { gap:9px; } .track-title { font-size:var(--text-13px); min-height:30px; }
    .track-subtitle { font-size:var(--text-11px); } .mini-cover { width:38px; height:38px; }
    .track-duration { font-size:var(--text-11px); text-align:right; }
    .library-bottom { font-size:var(--text-11px); } .library-bottom .mono { display:none; }
    .about { grid-template-columns:minmax(0,1fr); gap:18px; } .about h2 { font-size:var(--text-28px); }
    .about-copy { padding-top:0; font-size:var(--text-14px); line-height:1.9; } .about-copy p { text-wrap:pretty; } .skill-tags span { font-size:var(--text-12px); }
    .contact { flex-direction:column; align-items:start; gap:24px; }
    .contact h2 { font-size:clamp(var(--text-23px),6.6vw,var(--text-30px)); gap:8px; } .contact h2 svg { width:26px; }
    .contact p { font-size:var(--text-13px); } .contact .button { width:100%; }
    .site-footer { flex-wrap:wrap; gap:16px; padding-bottom:28px; font-size:var(--text-11px); }
    .site-footer>span { order:3; width:100%; }
    .player { height:calc(var(--player-height) + var(--safe-bottom)); padding:10px 16px calc(8px + var(--safe-bottom)); grid-template-columns:minmax(0,1fr) repeat(3,44px); grid-template-rows:44px 48px 32px; gap:4px 8px; }
    .now-playing { grid-column:1; grid-row:1; gap:10px; }
    .now-playing .mini-cover { width:40px; height:40px; }
    .now-playing strong { font-size:var(--text-13px); } .now-playing span { font-size:var(--text-11px); }
    .player-center { display:contents; }
    .player-controls { grid-column:1/-1; grid-row:2; gap:clamp(8px,5vw,26px); }
    .icon-button { width:var(--touch-target); height:var(--touch-target); }
    .player-controls .main-play { width:44px; height:44px; }
    .player-controls .icon-button svg { width:20px; height:20px; }
    .timeline { grid-column:1/-1; grid-row:3; margin:0; font-size:var(--text-11px); gap:10px; }
    .timeline input { height:6px; border-top:10px solid transparent; border-bottom:10px solid transparent; box-sizing:content-box; background-clip:padding-box!important; }
    input[type=range]::-webkit-slider-thumb { width:13px; height:13px; }
    .player-end { display:contents; }
    .player-end .audio-label,.player-end #mute,.player-end #volume { display:none; }
    #lyrics-button { grid-column:2; grid-row:1; }
    #queue-button { grid-column:3; grid-row:1; }
    .lyrics-panel { right:12px; width:calc(100% - 24px); max-width:none; padding:20px; }
    .lyrics-lines { max-height:clamp(100px,calc(100dvh - var(--player-height) - var(--safe-bottom) - 180px),380px); }
    .queue-panel { right:12px; width:calc(100% - 24px); max-height:calc(100dvh - var(--player-height) - var(--safe-bottom) - 40px); }
    .queue-track { min-height:48px; font-size:var(--text-14px); } .queue-heading h3 { font-size:var(--text-17px); }
    .toast { width:max-content; max-width:calc(100% - 24px); font-size:var(--text-13px); text-align:center; }
    dialog { padding:36px 24px 24px; } dialog h2 { font-size:var(--text-25px); } dialog p { font-size:var(--text-14px); }
    .eyebrow { font-size:var(--text-9px); letter-spacing:1px; }
  }
  @media(max-width:360px) {
    :root { --page-gutter:16px; }
    .site-header nav { gap:10px; font-size:var(--text-11px); }
    .hero-actions { gap:14px; } .hero-actions .button { padding-inline:14px; }
    .hero-description { font-size:var(--text-12px); }
    .cover-word { top:53px; font-size:var(--text-30px); } .cover-city .cover-word { top:53px; font-size:var(--text-27px); }
    .cover-float .cover-word { top:80px; font-size:var(--text-28px); }
    .track-name .mini-cover { display:none; }
  }
  :root.player-collapsed{--player-height:0px}
  .player-collapsed body{padding-bottom:0}
  .player-collapsed .player{position:fixed;top:auto;bottom:calc(12px + var(--safe-bottom));left:auto;right:max(12px,env(safe-area-inset-right,0px));width:var(--player-launcher-size);height:var(--player-launcher-size);margin:0;padding:0;display:block;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);box-shadow:0 4px 16px var(--palette-55)}
  .player-collapsed .player>:not(.player-toggle){display:none}
  .player-collapsed .player-toggle{width:100%;height:100%;border-radius:inherit}
  .player-collapsed .player-toggle svg{width:22px;height:22px}
  .player-collapsed .playing .player-toggle{color:var(--accent)}
  .player-toggle:focus-visible{outline:1px solid var(--muted);outline-offset:2px}
  #shuffle svg{width:20px;height:20px;stroke-width:1.7}
  #shuffle[aria-pressed=true]{background:var(--surface-hover)}
  @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
}