:root { --ink:#203045; --muted:#718097; --paper:#f4f2ed; --line:rgba(32,48,69,.13); --gold:#a47941; --blue:#476981; }
* { box-sizing:border-box; }
html { background:var(--paper); }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Georgia,"Noto Serif SC","Songti SC",serif; }
button { font:inherit; }
main { position:relative; min-height:100vh; overflow:hidden; padding:78px max(24px,calc((100vw - 960px)/2)) 44px; }
.orb { position:absolute; border-radius:50%; filter:blur(2px); pointer-events:none; opacity:.56; }
.orb-one { width:420px; height:420px; background:#d4e0df; right:-165px; top:-170px; }
.orb-two { width:330px; height:330px; background:#eadcc5; left:-210px; bottom:100px; }
.hero,.player-card,.tap-hint,.album-grid,.album-button,footer { position:relative; z-index:1; }
.hero { margin-bottom:48px; }
.eyebrow,.section-kicker,.now-playing p { margin:0; font-family:Arial,sans-serif; letter-spacing:.17em; font-size:11px; color:var(--gold); font-weight:700; }
h1 { margin:13px 0 10px; font-size:clamp(42px,8vw,78px); letter-spacing:-.07em; line-height:.92; font-weight:500; }
h1 span { color:var(--gold); padding:0 .08em; }
.subtitle { color:var(--muted); font-size:16px; margin:0; letter-spacing:.02em; }
.player-card { background:rgba(255,255,255,.57); border:1px solid rgba(255,255,255,.85); box-shadow:0 18px 50px rgba(35,49,67,.09); border-radius:24px; padding:25px; display:grid; grid-template-columns:92px 1fr; column-gap:22px; align-items:center; backdrop-filter:blur(9px); }
.record { width:92px; height:92px; border-radius:50%; display:grid; place-items:center; color:#eef0ed; background:radial-gradient(circle,#f1ece2 0 9%,#30495d 10% 15%,#172a3b 16% 44%,#345269 45% 48%,#172a3b 49%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); }
.record span { font:700 14px Arial,sans-serif; color:#d8bb8e; }
.record.side-22 { background:radial-gradient(circle,#e8e1d7 0 9%,#657b8f 10% 15%,#253946 16% 44%,#91a9ad 45% 48%,#253946 49%); }
.record.side-album { background:radial-gradient(circle,#f0e6d5 0 9%,#be9c6b 10% 15%,#283e52 16% 44%,#cbb183 45% 48%,#283e52 49%); }
.now-playing h2 { margin:4px 0 1px; font-size:clamp(20px,3.6vw,29px); font-weight:500; letter-spacing:-.035em; }
.now-playing span { color:var(--muted); font-size:13px; }
audio { grid-column:1/-1; width:100%; margin-top:22px; height:38px; accent-color:var(--blue); }
.tap-hint { margin:15px 4px 45px; color:var(--muted); font:13px Arial,sans-serif; }
.album-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.track-section { min-width:0; }
.section-kicker { padding-bottom:13px; border-bottom:1px solid var(--line); }
.track-list { display:flex; flex-direction:column; }
.track { background:transparent; border:0; border-bottom:1px solid var(--line); text-align:left; padding:15px 2px; cursor:pointer; display:grid; grid-template-columns:30px 1fr 18px; column-gap:10px; color:var(--ink); transition:padding .2s,color .2s,background .2s; }
.track:hover,.track.active { padding-left:10px; padding-right:8px; background:rgba(255,255,255,.48); color:var(--blue); }
.track-number,.track-arrow { font:12px Arial,sans-serif; color:var(--gold); padding-top:3px; }
.track-copy { min-width:0; display:flex; flex-direction:column; gap:4px; }
.track-copy strong { font-size:17px; line-height:1.08; font-weight:500; overflow-wrap:anywhere; }
.track-copy small { font-family:Arial,sans-serif; color:var(--muted); font-size:11px; }
.track-arrow { opacity:0; transition:opacity .2s; }
.track:hover .track-arrow,.track.active .track-arrow { opacity:1; }
.album-button { width:100%; margin-top:38px; border:1px solid rgba(71,105,129,.35); border-radius:16px; padding:18px 20px; background:#e7edef; color:var(--ink); cursor:pointer; display:flex; align-items:center; gap:14px; text-align:left; transition:background .2s; }
.album-button:hover,.album-button.active { background:#d8e4e6; }
.album-button span { color:var(--gold); font:700 13px Arial,sans-serif; }
.album-button strong { font-size:17px; font-weight:500; }
.album-button em { margin-left:auto; font:12px Arial,sans-serif; color:var(--muted); font-style:normal; }
footer { padding:72px 0 12px; text-align:center; color:var(--blue); font-size:16px; letter-spacing:.06em; }
@media(max-width:640px) { main{padding:48px 19px 28px}.hero{margin-bottom:34px}.player-card{padding:20px;grid-template-columns:72px 1fr;column-gap:16px;border-radius:20px}.record{width:72px;height:72px}.album-grid{grid-template-columns:1fr;gap:40px}.track-copy strong{font-size:16px}.tap-hint{margin-bottom:38px}footer{padding-top:52px;font-size:14px} }