:root {
  --night:#281f34; --deep:#1c1726; --plum:#42304f;
  --lilac:#d8bfdc; --pearl:#f4e7f0; --subtle:#bba9c3;
  --border:rgba(224,199,227,.18);
  --serif:'Fraunces',Georgia,serif;
  --italian:'Italiana','Times New Roman',serif;
  --sans:'DM Sans',Arial,sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:0; background:var(--night); color:var(--pearl); font-family:var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
button, input { font:inherit; }
button { cursor:pointer; -webkit-tap-highlight-color:transparent; }
button:focus-visible, input:focus-visible { outline:2px solid #e9bfdc; outline-offset:4px; }
.ambient { position:fixed; inset:0; z-index:-1; pointer-events:none; background:
  radial-gradient(ellipse at 50% 10%,rgba(150,108,163,.26),transparent 53%),
  radial-gradient(ellipse at 10% 70%,rgba(111,83,142,.18),transparent 55%),
  radial-gradient(ellipse at 95% 75%,rgba(174,113,150,.14),transparent 45%),
  linear-gradient(155deg,#33273e 0%,#261d31 48%,#1b1625 100%); }
.site { width:min(100% - 48px,940px); margin:auto; }
.hero { text-align:center; padding:76px 0 65px; }
.artist { font-family:var(--serif); font-size:clamp(2.9rem,8.5vw,6.5rem); letter-spacing:-.055em; font-weight:600; line-height:1.14; margin:0 0 12px; text-wrap:balance; }
.cover-stage { position:relative; width:min(100%,680px); margin:0 auto -18px; }
.cover-stage::before { content:""; position:absolute; inset:8% 7%; border-radius:50%; background:#b485b6; filter:blur(65px); opacity:.19; }
.cover { display:block; position:relative; width:100%; height:auto; object-fit:contain; opacity:.93;
  -webkit-mask-image:radial-gradient(ellipse 66% 65% at 50% 49%,#000 46%,rgba(0,0,0,.9) 67%,transparent 99%);
  mask-image:radial-gradient(ellipse 66% 65% at 50% 49%,#000 46%,rgba(0,0,0,.9) 67%,transparent 99%);
}
.album { position:relative; z-index:1; font-family:var(--italian); font-style:normal; font-weight:400; font-size:clamp(2.65rem,8.5vw,6.15rem); line-height:1.12; letter-spacing:-.035em; margin:0; text-wrap:balance; overflow-wrap:anywhere; }
.year { color:var(--subtle); letter-spacing:.42em; font-size:.73rem; margin:23px 0 0; }
.music { width:min(100%,780px); margin:25px auto 85px; }
.music-heading { font-family:var(--serif); font-size:clamp(3.25rem,7vw,5.3rem); font-weight:400; letter-spacing:-.06em; margin:0 0 27px; line-height:1.1; }
.music-heading span { color:#d8a8cf; }
.player { padding:39px 44px 26px; border:1px solid var(--border); border-radius:22px; background:linear-gradient(145deg,rgba(79,58,91,.94),rgba(38,30,49,.96)); box-shadow:0 24px 65px rgba(12,7,23,.28); }
.player-now { text-align:center; padding:10px 0 27px; }
.label { color:#dfbed9; font-size:.66rem; text-transform:uppercase; letter-spacing:.23em; }
#nowPlaying { margin:18px 0 8px; font-family:var(--serif); font-size:clamp(1.8rem,5vw,3rem); font-weight:400; letter-spacing:-.035em; line-height:1.2; overflow-wrap:anywhere; }
.byline { color:var(--subtle); font-size:.76rem; }
.scrub { padding-top:20px; }
#progress { display:block; width:100%; margin:0; height:6px; background:rgba(235,207,233,.2); appearance:none; -webkit-appearance:none; border-radius:20px; cursor:pointer; touch-action:manipulation; accent-color:#ebcce6; }
#progress::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; background:#efcce5; border-radius:50%; box-shadow:0 0 13px rgba(235,190,219,.3); }
#progress::-moz-range-thumb { width:16px; height:16px; border:0; border-radius:50%; background:#efcce5; }
.times { display:flex; justify-content:space-between; margin-top:12px; color:#c2afc9; font-size:.69rem; font-variant-numeric:tabular-nums; }
.controls { display:flex; justify-content:center; align-items:center; gap:27px; padding:25px 0 13px; }
.control { display:grid; place-items:center; border:0; flex-shrink:0; transition:transform .2s,background .2s; }
.control:hover { transform:scale(1.07); }
.control.secondary { width:48px; height:48px; color:#f0e0ee; background:transparent; border-radius:50%; }
.control.primary { width:66px; height:66px; border-radius:50%; color:#30233b; background:#e5c9e0; box-shadow:0 12px 24px #160e2040; }
.control svg { width:25px; height:25px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.control.primary svg { width:29px; height:29px; fill:currentColor; stroke:currentColor; }
.status { text-align:center; min-height:18px; margin:5px 0 18px; color:#ffd3e2; font-size:.77rem; }
.tracklist { border-top:1px solid var(--border); }
.track { width:100%; min-height:62px; display:flex; align-items:center; gap:18px; padding:15px 6px; border:0; border-bottom:1px solid var(--border); color:var(--pearl); background:transparent; text-align:left; transition:background .2s; }
.track:hover { background:rgba(235,202,230,.06); }
.track.active { color:#f4cde7; }
.track-number { color:#ad9ab6; width:28px; flex-shrink:0; font-size:.7rem; font-variant-numeric:tabular-nums; }
.track-title { flex:1; min-width:0; font-family:var(--serif); font-size:1.2rem; line-height:1.3; font-weight:400; }
.track-icon { display:grid; place-items:center; flex-shrink:0; width:28px; height:28px; color:#e4c1df; }
.track-icon svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.credits { max-width:780px; margin:auto; text-align:center; padding:70px 10px 100px; border-top:1px solid var(--border); }
.credit-intro { font-size:.89rem; line-height:1.7; color:#e5d0e3; }
.credit-main { font-family:var(--serif); font-size:clamp(1.9rem,5vw,3.2rem); font-weight:400; letter-spacing:-.045em; color:var(--pearl); line-height:1.2; margin:13px 0 32px; }
.fine-rule { width:110px; height:1px; margin:0 auto 28px; background:linear-gradient(90deg,transparent,#d6a4cc,transparent); }
.credits p:not(.credit-intro):not(.credit-main) { color:#bbaac3; font-size:.76rem; line-height:1.9; margin:8px 0; }
@media (max-width:650px) {
  .site { width:calc(100% - 30px); }
  .hero { padding:48px 0 55px; }
  .artist { font-size:clamp(2.35rem,9vw,4.2rem); }
  .cover-stage { width:min(100%,470px); margin:0 auto -7px; }
  .album { font-size:clamp(2.1rem,9vw,4.1rem); }
  .music { margin:18px auto 66px; }
  .player { padding:27px 23px 18px; border-radius:17px; }
  .track { gap:12px; min-height:57px; }
  .track-title { font-size:1.04rem; }
  .credits { padding:53px 4px 78px; }
}
@media (max-width:380px) {
  .site { width:calc(100% - 22px); }
  .player { padding:22px 15px 15px; }
  .artist { font-size:clamp(2rem,9vw,2.5rem); }
  .album { font-size:clamp(1.85rem,8.6vw,2.4rem); }
  .controls { gap:18px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; scroll-behavior:auto !important; } }