:root{
  --sun1:#ffd86f; --sun2:#fc6262;
  --sea1:#0b3866; --sea2:#061b33;
  --paper:#fdf6ec; --muted:#93a7c4;
  --gold:#ffce54; --teal:#3ec6c6;
  --card:rgba(8,18,38,.62);
  --line:rgba(255,255,255,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Outfit',system-ui,sans-serif;color:var(--paper);
  background:linear-gradient(180deg,#160929 0%,#2b1055 26%,#7b4397 52%,#fc6262 74%,#ffd86f 90%,#ffb75e 100%);
  background-attachment:fixed;min-height:100vh;overflow-x:hidden;position:relative;
  -webkit-font-smoothing:antialiased;
}
.sun{position:fixed;left:50%;top:72%;transform:translate(-50%,-50%);
  width:min(38vw,340px);height:min(38vw,340px);border-radius:50%;
  background:linear-gradient(180deg,var(--sun1),var(--sun2));
  box-shadow:0 0 110px 34px rgba(252,98,98,.32);z-index:0;opacity:.8;
  -webkit-mask:repeating-linear-gradient(180deg,#000 0 88%,transparent 88% 90%);
          mask:repeating-linear-gradient(180deg,#000 0 88%,transparent 88% 90%);}
.sea{position:fixed;left:0;right:0;bottom:0;height:34vh;z-index:1;
  background:linear-gradient(180deg,rgba(11,56,102,.4),var(--sea1) 32%,var(--sea2));
  border-top:1px solid rgba(255,255,255,.22);}
.sea::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(180deg,transparent 0 22px,rgba(255,255,255,.05) 22px 23px);}
.grid{position:fixed;left:0;right:0;bottom:0;height:34vh;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 58px,rgba(62,198,198,.12) 58px 59px);
  transform:perspective(320px) rotateX(62deg);transform-origin:bottom;}

/* Sticky top bar. It spans the full viewport so its backdrop covers everything
   scrolling underneath, while the horizontal padding keeps the contents aligned
   to the same 880px column as the rest of the page. */
nav{position:sticky;top:0;z-index:100;display:flex;justify-content:space-between;
  align-items:center;gap:10px;
  padding:12px max(22px,calc((100% - 880px)/2));
  background:rgba(12,7,30,.72);backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid rgba(255,255,255,.10);
  box-shadow:0 6px 26px rgba(0,0,0,.28)}
.navright{display:flex;align-items:center;gap:10px}
.brand{font-weight:800;font-size:17px;letter-spacing:-.02em;color:var(--paper);text-decoration:none}
.navlink{font-size:13.5px;color:var(--gold);text-decoration:none;padding:7px 14px;border-radius:20px;
  border:1px solid rgba(255,206,84,.32);transition:background .2s;white-space:nowrap}
.navlink:hover{background:rgba(255,206,84,.14)}

/* screen-reader-only label */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* secondary action: readable but visibly not the primary CTA */
.ghost{margin-top:14px;background:transparent;border:1px solid var(--line);color:var(--muted);
  font:400 12.5px 'Outfit';padding:8px 14px;border-radius:9px;cursor:pointer;
  transition:border-color .2s,color .2s}
.ghost:hover{border-color:rgba(255,206,84,.45);color:var(--gold);transform:none;filter:none}

.wrap{position:relative;z-index:5;max-width:880px;margin:0 auto;padding:34px 22px 90px}
/* anchors/deep links shouldn't land under the sticky bar */
:target{scroll-margin-top:70px}
header{text-align:center;margin-bottom:30px}
h1{font-size:clamp(38px,7.5vw,68px);font-weight:800;letter-spacing:-.035em;line-height:1;
  text-shadow:0 2px 34px rgba(10,4,30,.5)}
h1 em{font-style:normal;background:linear-gradient(92deg,var(--gold),#fff 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sub{margin-top:14px;font-weight:300;font-size:16.5px;color:#efe4ff;
  text-shadow:0 1px 12px rgba(10,4,30,.85)}
.credit{max-width:520px;margin:12px auto 0;font-size:13.5px;font-weight:300;line-height:1.55;
  color:rgba(255,255,255,.72);text-shadow:0 1px 10px rgba(10,4,30,.8)}
.credit a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(255,206,84,.4)}
.credit a:hover{background:rgba(255,206,84,.12)}

.card{background:var(--card);backdrop-filter:blur(16px);border:1px solid var(--line);
  border-radius:20px;padding:20px;box-shadow:0 22px 60px rgba(0,0,0,.34)}
form{display:flex;gap:10px;flex-wrap:wrap}
input[type=url],input[type=text]{flex:1 1 280px;background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.18);
  color:var(--paper);padding:15px 17px;border-radius:12px;font-size:15px;font-family:inherit;
  outline:none;transition:border-color .2s,box-shadow .2s}
input[type=url]::placeholder,input[type=text]::placeholder{color:#8397b4}
input[type=url]:focus,input[type=text]:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,206,84,.18)}
button{background:linear-gradient(135deg,var(--gold),#ff9f45);color:#2a1a05;border:0;
  padding:15px 28px;border-radius:12px;font:600 15px 'Outfit';cursor:pointer;
  transition:transform .12s,filter .2s;white-space:nowrap}
button:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.06)}
button:disabled{opacity:.5;cursor:not-allowed}
/* chips on the left, support button tucked to the right of the same row */
.hint{margin-top:13px;display:flex;gap:10px;align-items:center;justify-content:space-between;
  flex-wrap:wrap}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:rgba(255,255,255,.08);border:1px solid var(--line);padding:5px 12px;
  border-radius:20px;cursor:pointer;font-size:12.5px;transition:background .2s,border-color .2s}
.chip:hover{background:rgba(255,206,84,.18);border-color:rgba(255,206,84,.4)}
#status{margin-top:14px;text-align:center;font-size:14px;color:var(--gold);min-height:20px}
.dots::after{content:'';animation:dots 1.3s steps(4,end) infinite}
@keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
.err{color:#ffbcbc;background:rgba(120,20,20,.36);border:1px solid rgba(255,120,120,.34);
  padding:12px 16px;border-radius:12px;font-size:14px;text-align:left}

/* ---------- result ---------- */
#result{max-height:0;opacity:0;overflow:hidden;transition:opacity .45s ease}
#result.show{max-height:none;opacity:1;margin-top:22px;animation:rise .5s cubic-bezier(.2,.8,.3,1)}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.scorecard{background:var(--card);backdrop-filter:blur(16px);border:1px solid var(--line);
  border-radius:22px;padding:24px;box-shadow:0 22px 60px rgba(0,0,0,.36)}
.song{display:flex;gap:14px;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--line)}
.song img{width:82px;height:62px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.songtext h2{font-size:18px;font-weight:600;line-height:1.3}
.songtext p{font-size:13px;color:var(--muted);margin-top:3px}
.hero{display:flex;gap:30px;align-items:center;flex-wrap:wrap;justify-content:center;padding:26px 0 10px}
.gauge{position:relative;width:240px;height:240px;flex:0 0 auto}
#arc{transition:stroke-dashoffset 1.15s cubic-bezier(.2,.8,.3,1)}
.gauge .val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gauge .num{font:800 66px 'Outfit';line-height:.95;letter-spacing:-.04em}
.gauge .lbl{font-family:'Space Mono',monospace;font-size:11px;color:var(--muted);margin-top:6px}
.verdict{flex:1 1 210px;min-width:190px}
.verdict .big{font:800 34px 'Outfit';letter-spacing:-.025em;line-height:1.05;
  background:linear-gradient(92deg,var(--gold),#fff);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.verdict .blurb{font-size:15px;font-weight:300;margin-top:9px;opacity:.92;line-height:1.45}
.badges{margin-top:14px;display:flex;gap:7px;flex-wrap:wrap}
.badge{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.05em;
  background:rgba(255,255,255,.09);border:1px solid var(--line);padding:5px 10px;border-radius:20px;
  color:var(--muted)}
.badge.cv{background:rgba(62,198,198,.14);border-color:rgba(62,198,198,.4);color:var(--teal)}
.badge.alt{background:rgba(255,206,84,.14);border-color:rgba(255,206,84,.38);color:var(--gold)}

.scale{margin-top:8px}
.scalebar{position:relative;height:9px;border-radius:20px;
  background:linear-gradient(90deg,#3ec6c6,#ffce54 52%,#fc6262)}
.marker{position:absolute;top:50%;width:20px;height:20px;border-radius:50%;background:#fff;
  border:3px solid #1a0b33;transform:translate(-50%,-50%);transition:left 1.1s cubic-bezier(.2,.8,.3,1);
  box-shadow:0 3px 12px rgba(0,0,0,.5)}
.scalelabels{display:flex;justify-content:space-between;margin-top:8px;
  font-family:'Space Mono',monospace;font-size:10.5px;color:var(--muted)}

.more{margin-top:22px;border-top:1px solid var(--line);padding-top:14px}
.more summary{cursor:pointer;font-size:13.5px;color:var(--gold);list-style:none;
  font-family:'Space Mono',monospace;letter-spacing:.06em}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:'▸ ';transition:transform .2s}
.more[open] summary::before{content:'▾ '}
.mbody{margin-top:14px}
.mrow{display:flex;justify-content:space-between;font-size:13.5px;padding:8px 0;
  border-bottom:1px dashed rgba(255,255,255,.09);color:var(--muted)}
.mrow b{color:var(--paper)}
.nb{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 12px;
  background:rgba(255,255,255,.05);border-radius:10px;margin-top:7px;font-size:13px}
.nb .t{font-weight:600}.nb .y{color:var(--muted);font-size:11.5px;margin-top:2px}
.nb .s{font-family:'Space Mono',monospace;font-size:12px;color:var(--teal)}
.mlink{display:inline-block;margin-top:16px;font-size:13px;color:var(--gold);text-decoration:none}
.mlink:hover{text-decoration:underline}

/* This block sits over the brightest part of the sunset gradient, where
   translucent-white styling washes out completely. It gets its own dark panel so
   the label and chips have a consistent surface to sit on regardless of what is
   behind them. */
.recent:not(:empty){margin-top:26px;display:flex;gap:8px;flex-wrap:wrap;
  align-items:center;justify-content:center;
  background:rgba(8,18,38,.62);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:18px;padding:16px 18px;
  box-shadow:0 14px 40px rgba(0,0,0,.3)}
.rtitle{width:100%;text-align:center;font-family:'Space Mono',monospace;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;
  opacity:.95}
.rchip{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.2);
  color:var(--paper);padding:7px 13px;border-radius:20px;font:400 12.5px 'Outfit';
  cursor:pointer;transition:background .2s,border-color .2s;
  text-shadow:0 1px 6px rgba(0,0,0,.5)}
.rchip:hover:not(:disabled){background:rgba(255,206,84,.2);
  border-color:rgba(255,206,84,.5);transform:none;filter:none}
.rchip b{color:var(--gold);margin-left:6px;font-weight:700}

/* Buy Me a Coffee injects a fixed-size anchor (254x60) with inline styles, so
   scale the wrapper rather than fighting them. The negative margin absorbs the
   whitespace the un-scaled height would otherwise leave behind. */
/* Buy Me a Coffee lives in the nav: always visible, never adjacent to the
   primary CTA. BMC injects a fixed 254x60 anchor with inline styles, so the
   wrapper is scaled rather than fighting them. */
.support{display:flex;align-items:center;transform:scale(.55);
  /* origin MUST be left: the injected anchor is 254px wide and anchored to the
     wrapper's left edge, so scaling from the right pushes it past the wrapper
     (overflowed the nav by 40px before this). */
  transform-origin:left center;
  width:140px;height:33px;overflow:visible}
.support img{max-width:100%}
.support a{box-shadow:0 4px 16px rgba(0,0,0,.35)!important}

@media(max-width:620px){
  /* keep the sticky bar a single compact row on phones -- wrapping would eat a
     large slice of a short viewport */
  nav{gap:6px;padding:9px 14px}
  .navright{gap:6px}
  .brand{font-size:15px}
  .navlink{font-size:12px;padding:6px 10px}
  .support{transform:scale(.46);transform-origin:left center;width:117px;height:28px}
}

footer{text-align:center;margin-top:26px;font-size:13px;color:rgba(255,255,255,.72)}
footer a{color:var(--gold);text-decoration:none}
footer a:hover{text-decoration:underline}
.disclaimer{margin-top:6px;font-size:12px;color:rgba(255,255,255,.5)}
@media(max-width:560px){
  .hero{gap:18px}.gauge{width:200px;height:200px}.gauge svg{width:200px;height:200px}
  .gauge .num{font-size:56px}.verdict{text-align:center}
}


/* ---------- song search results (Deezer) ---------- */
.results:not(:empty){margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.rhead{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.track{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:rgba(255,255,255,.055);border:1px solid var(--line);border-radius:12px;
  padding:9px 12px;margin-bottom:7px;cursor:pointer;color:var(--paper);
  font-family:inherit;font-weight:400;transition:background .18s,border-color .18s}
.track:hover:not(:disabled){background:rgba(255,206,84,.14);
  border-color:rgba(255,206,84,.42);transform:none;filter:none}
.track img{border-radius:7px;flex:0 0 auto;background:rgba(0,0,0,.3)}
.tmeta{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.tmeta b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tmeta i{font-style:normal;font-size:12px;color:var(--muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.tgo{font-family:'Space Mono',monospace;font-size:11px;color:var(--gold);flex:0 0 auto;opacity:.85}
.badge.deezer{background:rgba(62,198,198,.15);border-color:rgba(62,198,198,.4);color:var(--teal)}