:root{color-scheme:dark;--bg:#102f2a;--ink:#f7f0df;--mint:#91d6ae;--muted:#b0c3b8;--gold:#d8b876;--grid:#315047;--popover:#193e35}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}.page{max-width:1440px;margin:auto;padding:68px 70px 32px}.hero{position:relative}.eyebrow,.artist,.axis-label{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}.eyebrow{color:var(--gold);margin:0 0 34px}h1{font:400 clamp(62px,7.8vw,112px)/1.08 Georgia,'Times New Roman',serif;letter-spacing:-.04em;margin:0 0 44px;position:relative;z-index:1}h1 span{white-space:nowrap}.stars{position:absolute;right:12px;top:-15px;width:195px;height:130px;color:var(--gold);pointer-events:none}.stars span{position:absolute;font-size:58px}.stars span:nth-child(1){left:0;top:0}.stars span:nth-child(2){right:0;top:-18px;font-size:36px}.stars span:nth-child(3){right:65px;bottom:0;font-size:22px}.song-row{display:flex;justify-content:space-between;gap:30px;align-items:center;margin-bottom:50px}.artist{color:var(--mint);margin:0 0 12px}h2{font-weight:400;font-size:clamp(19px,2.1vw,28px);line-height:1.35;margin:0}.spotify{font-size:12px;color:var(--muted);text-decoration:none;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}.spotify:hover{color:var(--ink)}.spotify span{font-size:18px;margin-left:8px}.chart-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:10px}.axis-label{font-weight:400;color:var(--muted);letter-spacing:.065em;margin:0 0 7px}.range-label{color:var(--muted);font-size:12px;margin:0}.period-label{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--muted)}select{font:inherit;font-size:13px;background:#183d33;color:var(--ink);border:1px solid #456359;border-radius:6px;padding:10px 32px 10px 12px;max-width:100%}select:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:5px}.chart{position:relative;min-height:340px;width:100%}.chart svg{display:block;max-width:100%;touch-action:pan-y}.chart text{fill:var(--muted);font-family:Arial,Helvetica,sans-serif;font-size:12px}.chart .peak-label{fill:var(--ink);font-size:13px;font-weight:600}.chart .domain{display:none}.chart .tick line{stroke:var(--grid)}.chart .axis-x .tick line{display:none}.chart-detail{min-height:25px;font-size:13px;color:var(--mint);font-variant-numeric:tabular-nums}.status-row{display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:12px;margin-top:14px}.status-row p{margin:0;line-height:1.5}#latest strong{color:var(--ink);font-weight:500}.loading{padding:100px 0;text-align:center;color:var(--muted)}footer{display:flex;justify-content:space-between;gap:20px;margin-top:44px;padding-top:24px;border-top:1px solid var(--grid);color:var(--muted);font-size:11px;letter-spacing:.03em}.error{font-size:13px;color:var(--gold);line-height:1.5}.tooltip{position:absolute;z-index:5;pointer-events:none;background:var(--popover);color:var(--ink);border:1px solid #547364;border-radius:7px;padding:11px 14px;font-size:12px;line-height:1.6;box-shadow:0 4px 16px #0002;max-width:235px}.tooltip strong{display:block;font-size:15px;font-variant-numeric:tabular-nums}.tooltip small{color:var(--muted)}[hidden]{display:none!important}
@media(min-width:1100px){.chart{min-height:400px}}@media(max-width:700px){.page{padding:34px 22px 24px}.eyebrow{font-size:10px;margin-bottom:28px}h1{font-size:clamp(54px,11vw,76px);margin-bottom:30px}.stars{width:85px;right:0;top:0;opacity:.65}.stars span:first-child{font-size:25px;left:3px;top:-3px}.stars span:nth-child(2){font-size:18px;top:30px}.stars span:nth-child(3){display:none}.song-row{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:34px}.artist{font-size:11px}.spotify{font-size:10px}.chart-toolbar{align-items:flex-start;flex-direction:column;gap:14px}.period-label{width:100%;justify-content:space-between}select{max-width:78%}.chart{min-height:310px}.status-row{flex-direction:column;gap:8px}footer{margin-top:30px;flex-direction:column;gap:9px}.axis-label{font-size:10px}.chart text{font-size:11px}.tooltip{font-size:11px}.chart-detail{font-size:12px;min-height:35px}}
