/* ============================================================
   Vezo Music
   Brand palette: midnight violet base, Vezo violet to magenta
   signal gradient, warm gold accent, lavender paper.
   ============================================================ */
:root{
  /* backdrop, darkest to lightest */
  --bg-0:#0A0714; --bg-1:#140D24; --bg-2:#221539;

  /* brand signal */
  --brand:#7C5CFF;        /* Vezo violet  */
  --brand-soft:#A98BFF;
  --magenta:#FF4D9D;      /* Vezo pink    */
  --gold:#FFC46B;         /* warm accent  */

  --tint:#E4DAFF;
  --paper:#F6F2FF;

  --text:#E4DAFF;
  --muted:rgba(228,218,255,.62);
  --faint:rgba(228,218,255,.30);
  --line:rgba(228,218,255,.14);

  --bar-h:76px;
  --maxw:1120px;
  --readw:720px;

  --display:"Fraunces",Georgia,serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* 2:00 AM mode, the whole station dims down */
body.late{
  --bg-0:#05030C; --bg-1:#0D0819; --bg-2:#180F2A;
  --brand:#6B4CE0; --magenta:#E04487;
  --text:#D6CAF5;
  --muted:rgba(214,202,245,.54);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;min-height:100svh;
  background:var(--bg-0);color:var(--text);
  font-family:var(--body);font-size:16px;line-height:1.62;
  padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom));
  overflow-x:hidden;
  transition:background-color .8s ease,color .8s ease;
  background-image:
    radial-gradient(120% 70% at 50% 100%,rgba(255,196,107,.10),transparent 60%),
    linear-gradient(180deg,var(--bg-0),var(--bg-1) 55%,var(--bg-2));
  background-attachment:fixed;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--brand-soft);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.015em}

.skip{position:absolute;left:-9999px;top:8px;z-index:50;padding:10px 16px;
  background:var(--paper);color:#221539;border-radius:999px;font-size:13px}
.skip:focus{left:16px}

.grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.20;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>")}

/* ---------- top bar ---------- */
.topbar{position:relative;z-index:6;display:flex;align-items:center;gap:16px;
  max-width:var(--maxw);margin:0 auto;padding:16px 20px}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;flex:0 0 auto}
.brand-mark{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:rgba(255,77,157,.18);border:1px solid rgba(169,139,255,.4)}
.brand-mark svg{width:16px;height:16px}
.brand-name{font-family:var(--display);font-size:17px;letter-spacing:.01em}
.nav{display:flex;gap:18px;margin-left:auto;font-size:13.5px}
.nav a{color:var(--muted);text-decoration:none;transition:color .2s}
.nav a:hover{color:var(--paper)}
.topbar-right{display:flex;align-items:center;gap:10px}
.live{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.beat{width:8px;height:8px;border-radius:50%;background:var(--magenta);flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(255,77,157,.55);animation:beat 2.4s ease-out infinite}
@keyframes beat{0%{box-shadow:0 0 0 0 rgba(255,77,157,.5)}70%{box-shadow:0 0 0 11px rgba(255,77,157,0)}100%{box-shadow:0 0 0 0 rgba(255,77,157,0)}}
.pill{display:inline-flex;align-items:center;padding:7px 14px;border-radius:999px;
  border:1px solid var(--line);font-size:12.5px;text-decoration:none;color:var(--muted);
  background:rgba(10,7,20,.42);backdrop-filter:blur(6px);transition:color .2s,border-color .2s}
.pill:hover{color:var(--paper);border-color:rgba(169,139,255,.5)}

/* ---------- hero ---------- */
.hero{position:relative;z-index:1;overflow:hidden;
  padding:clamp(26px,5vh,44px) 20px clamp(50px,8vh,80px);
  min-height:min(94svh,900px);display:flex;flex-direction:column}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:38% 42%;
  filter:saturate(1.02) contrast(1.03)}
.hero-shade{position:absolute;inset:0;
  background:
    radial-gradient(78% 62% at 50% 58%,rgba(10,7,20,.30),rgba(10,7,20,.80) 78%),
    linear-gradient(180deg,rgba(5,3,12,.86) 0%,rgba(10,7,20,.52) 26%,rgba(10,7,20,.72) 62%,var(--bg-0) 97%)}
.clock{font-family:var(--mono);font-size:clamp(30px,7vw,42px);font-weight:300;line-height:1;
  letter-spacing:.01em;color:var(--paper);margin:0;text-shadow:0 2px 24px rgba(0,0,0,.6)}
.clock small{font-size:14px;letter-spacing:.14em;color:var(--faint);margin-left:8px}
.datestamp{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:8px 0 0}
.hero-inner{position:relative;z-index:2;max-width:var(--maxw);width:100%;margin:auto;
  text-align:center;padding-top:clamp(26px,5vh,54px)}
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brand-soft);opacity:.85;margin:0 0 10px;display:block}
h1{font-size:clamp(54px,14vw,120px);line-height:.86;margin:0;
  font-variation-settings:"SOFT" 40,"WONK" 1;letter-spacing:-.025em;
  background:linear-gradient(168deg,var(--paper) 6%,var(--tint) 42%,var(--brand-soft) 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 30px rgba(0,0,0,.55))}
h1 em{font-style:italic;font-variation-settings:"SOFT" 90,"WONK" 1}
.tagline{font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(15px,3.6vw,20px);color:var(--tint);opacity:.86;
  margin:16px auto 0;max-width:34ch;text-shadow:0 2px 18px rgba(0,0,0,.7)}

/* ---------- the dial ---------- */
.dial{position:relative;max-width:620px;margin:clamp(28px,5vh,46px) auto 0;padding:14px 6px 0;
  touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none}
.dial:active,.dial.dragging{cursor:grabbing}
.scale{position:relative;height:44px;
  background:
    repeating-linear-gradient(90deg,var(--faint) 0 1px,transparent 1px 14px) bottom/100% 12px no-repeat,
    repeating-linear-gradient(90deg,rgba(228,218,255,.42) 0 1px,transparent 1px 70px) bottom/100% 22px no-repeat;
  border-bottom:1px solid var(--line)}
.marks{display:flex;justify-content:space-between;margin-top:9px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--faint)}
.needle{position:absolute;top:-8px;bottom:22px;left:50%;width:2px;
  background:linear-gradient(to bottom,transparent,var(--magenta) 22%,var(--magenta));
  box-shadow:0 0 16px 2px rgba(255,77,157,.6);transform:translateX(-50%);
  transition:left .18s ease-out;animation:drift 13s ease-in-out infinite}
@keyframes drift{0%,100%{left:47.4%}50%{left:52.2%}}
body.tuned .needle{animation:none}
.dial.dragging .needle{transition:none}
.freq{position:absolute;top:-30px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--brand-soft)}
.dial-hint{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);margin:12px 0 0;min-height:1.2em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- tune in ---------- */
.tune{position:relative;display:inline-flex;align-items:center;gap:13px;
  margin-top:clamp(26px,5vh,42px);padding:15px 30px 15px 20px;border-radius:999px;
  border:1px solid rgba(169,139,255,.42);
  background:linear-gradient(150deg,rgba(255,77,157,.26),rgba(255,196,107,.14));
  backdrop-filter:blur(4px);color:var(--paper);font-size:15.5px;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s}
.tune:hover:not(:disabled){transform:translateY(-2px);border-color:var(--brand-soft);
  box-shadow:0 14px 42px -14px rgba(255,77,157,.7)}
.tune:disabled{opacity:.5;cursor:progress}
.knob{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--magenta);color:#150B28}
.knob svg{width:15px;height:15px;fill:currentColor}
.nowline{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);margin:18px 0 0;min-height:1.2em}

/* ---------- now playing card ---------- */
.now{display:flex;align-items:center;gap:18px;text-align:left;
  max-width:940px;margin:clamp(30px,5vh,48px) auto 0;padding:14px 20px 14px 14px;
  border-radius:20px;border:1px solid rgba(255,196,107,.28);
  background:linear-gradient(120deg,rgba(10,7,20,.90),rgba(20,13,36,.82));
  backdrop-filter:blur(10px);box-shadow:0 30px 70px -34px rgba(0,0,0,.9)}
.now[hidden]{display:none}
.now-art{width:76px;height:76px;flex:0 0 auto;border-radius:12px;object-fit:cover;
  background:rgba(228,218,255,.06)}
.now-body{flex:1 1 auto;min-width:0}
.now-title{font-size:clamp(15px,2.4vw,21px);font-weight:600;color:var(--paper);margin:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.now-sub{font-size:13.5px;color:var(--muted);margin:3px 0 0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.now-timeline{display:flex;align-items:center;gap:12px;margin-top:12px}
.now-time{font-family:var(--mono);font-size:11px;color:var(--faint);flex:0 0 auto}
.now-track{position:relative;flex:1 1 auto;height:4px;border-radius:2px;
  background:rgba(228,218,255,.16);cursor:pointer}
.now-track::after{content:"";position:absolute;inset:-10px 0}
.now-fill{height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--magenta),var(--gold))}
.now-ctrls{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.round{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:rgba(228,218,255,.08);color:var(--tint);transition:background .2s,transform .2s}
.round:hover{background:rgba(228,218,255,.16)}
.round svg{width:16px;height:16px;fill:currentColor}
.round.big{width:56px;height:56px;background:var(--gold);color:#150B28}
.round.big svg{width:20px;height:20px}
.round.big:hover{background:#FFBE72;transform:scale(1.04)}

/* ---------- SEO intro ---------- */
.intro{max-width:var(--readw);margin:clamp(34px,6vh,56px) auto 0;text-align:left}
.intro p{font-size:15px;color:var(--muted);margin:0 0 14px}
.intro p:last-child{margin-bottom:0}

/* ---------- letter ---------- */
.letter{position:relative;z-index:1;max-width:560px;margin:clamp(56px,10vh,96px) auto 0;padding:0 20px}
.card{position:relative;padding:34px 30px 26px;border-radius:3px;
  background:linear-gradient(168deg,rgba(246,242,255,.96),rgba(228,218,255,.9));
  color:#221539;transform:rotate(-1.1deg);box-shadow:0 26px 60px -30px rgba(0,0,0,.75)}
.stamp{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(34,21,57,.45);margin:0}
.line{font-family:var(--display);font-style:italic;font-size:clamp(20px,5vw,27px);
  line-height:1.34;margin:16px 0 22px;min-height:2.6em;transition:opacity .4s ease}
.turn{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(34,21,57,.6);border-bottom:1px solid rgba(34,21,57,.3);padding-bottom:2px}
.turn:hover{color:#221539;border-color:#221539}

/* ---------- station notes ---------- */
.station{position:relative;z-index:1;max-width:var(--maxw);margin:clamp(56px,10vh,100px) auto 0;
  padding:0 20px;display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.note h2{font-size:22px;margin:0 0 10px}
.note p{font-size:14.6px;color:var(--muted);margin:0 0 10px}
.note p:last-child{margin-bottom:0}

/* ---------- section heads ---------- */
.section-head{max-width:var(--readw);margin:0 auto clamp(24px,4vh,38px)}
.section-head h2{font-size:clamp(26px,5vw,36px);margin:0}
.section-sub{font-size:14.6px;color:var(--muted);margin:12px 0 0}

/* ---------- song list ---------- */
.songs{position:relative;z-index:1;max-width:var(--maxw);margin:clamp(64px,12vh,120px) auto 0;padding:0 20px}
.song-list{list-style:none;counter-reset:song;margin:0;padding:0;
  display:grid;gap:2px;grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.song{counter-increment:song;display:flex;align-items:center;gap:14px;width:100%;
  padding:11px 14px;border-radius:10px;text-align:left;
  border:1px solid transparent;transition:background .2s,border-color .2s}
.song:hover{background:rgba(228,218,255,.06);border-color:var(--line)}
.song::before{content:counter(song,decimal-leading-zero);font-family:var(--mono);font-size:11px;
  color:var(--faint);flex:0 0 auto;width:24px}
.song-name{flex:1 1 auto;min-width:0;font-size:14.5px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s}
.song:hover .song-name{color:var(--paper)}
.song-play{flex:0 0 auto;width:22px;height:22px;display:grid;place-items:center;
  opacity:0;transition:opacity .2s}
.song-play svg{width:11px;height:11px;fill:var(--magenta)}
.song:hover .song-play,.song[aria-current="true"] .song-play{opacity:1}
.song[aria-current="true"]{background:rgba(255,77,157,.14);border-color:rgba(169,139,255,.35)}
.song[aria-current="true"] .song-name{color:var(--paper);font-weight:500}
.song[aria-current="true"]::before{color:var(--brand-soft)}
.song-empty,.song-status{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);padding:10px 0}
.song-status{margin:14px 0 0}

/* ---------- FAQ ---------- */
.faq{position:relative;z-index:1;max-width:var(--readw);margin:clamp(64px,12vh,120px) auto 0;padding:0 20px}
.faq-list details{border-top:1px solid var(--line);padding:4px 0}
.faq-list details:last-child{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;padding:16px 30px 16px 0;position:relative;
  font-size:16.5px;color:var(--tint);transition:color .2s}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:hover{color:var(--paper)}
.faq-list summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:1.5px solid var(--brand-soft);border-bottom:1.5px solid var(--brand-soft);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s}
.faq-list details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq-list p{font-size:14.6px;color:var(--muted);margin:0 0 18px;padding-right:30px}

/* ---------- inner pages ---------- */
.prose{position:relative;z-index:1;max-width:var(--readw);margin:0 auto;
  padding:clamp(30px,7vh,70px) 20px 0}
.page-title{font-size:clamp(34px,7vw,54px);line-height:1.02;margin:0 0 22px;
  font-variation-settings:"SOFT" 40,"WONK" 1;
  background:linear-gradient(168deg,var(--paper),var(--brand-soft));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-family:var(--display);font-style:italic;font-size:clamp(17px,3.4vw,21px);
  line-height:1.5;color:var(--tint);opacity:.9;margin:0 0 8px}
.muted-note{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin:0 0 34px}
.prose h2{font-size:clamp(21px,4vw,27px);margin:38px 0 12px}
.prose p,.prose li{font-size:15.2px;color:var(--muted);margin:0 0 13px}
.prose ul{padding-left:20px;margin:0 0 16px}
.prose li{margin:0 0 7px}
.prose a{color:var(--brand-soft)}
.back{margin:44px 0 0;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase}
.back a{color:var(--muted);text-decoration:none}
.back a:hover{color:var(--paper)}

/* ---------- footer ---------- */
.site-footer{position:relative;z-index:1;max-width:var(--maxw);margin:clamp(70px,13vh,130px) auto 0;
  padding:34px 20px 40px;border-top:1px solid var(--line)}
.footer-grid{display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.footer-brand{font-family:var(--display);font-size:19px;color:var(--tint);margin:0 0 10px}
.footer-head{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brand-soft);opacity:.75;margin:0 0 12px}
.site-footer p{font-size:13px;color:var(--faint);margin:0 0 10px;max-width:46ch}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--paper)}
.footer-links{list-style:none;margin:0;padding:0}
.footer-links li{margin:0 0 7px}
.footer-links a{font-size:13px;text-decoration:none}
.copyright{margin-top:30px !important;padding-top:20px;border-top:1px solid var(--line);
  font-size:12.5px}
.sign{color:var(--brand-soft);opacity:.7;font-style:italic}

/* ---------- player bar ---------- */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:20;height:var(--bar-h);
  padding:0 16px calc(env(safe-area-inset-bottom)) 16px;
  display:flex;align-items:center;gap:14px;
  background:linear-gradient(to top,rgba(5,3,12,.97),rgba(10,7,20,.88));
  border-top:1px solid var(--line);backdrop-filter:blur(14px)}
.progress{position:absolute;top:-1px;left:0;right:0;height:3px;
  background:rgba(228,218,255,.1);cursor:pointer}
.progress::after{content:"";position:absolute;inset:-9px 0}
.fill{height:100%;width:0;background:linear-gradient(90deg,var(--magenta),var(--gold));
  transition:width .25s linear}
.ctrl{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  color:var(--muted);flex:0 0 auto;transition:color .2s,background .2s}
.ctrl:hover:not(:disabled){color:var(--paper);background:rgba(228,218,255,.08)}
.ctrl:disabled{opacity:.3;cursor:default}
.ctrl svg{width:16px;height:16px;fill:currentColor}
.ctrl.main{width:44px;height:44px;background:var(--magenta);color:#150B28}
.ctrl.main:hover:not(:disabled){background:var(--brand-soft)}
.meta{flex:1 1 auto;min-width:0}
.track{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.time{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--faint)}
.vol{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.volume-icon{width:16px;height:16px;fill:var(--muted)}
.vol input{-webkit-appearance:none;appearance:none;width:82px;height:3px;border-radius:2px;
  background:rgba(228,218,255,.18);cursor:pointer}
.vol input::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;
  background:var(--tint)}
.vol input::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:var(--tint)}

#stage{position:fixed;width:1px;height:1px;bottom:0;left:0;opacity:.01;pointer-events:none}

.toast{position:fixed;left:50%;bottom:calc(var(--bar-h) + 22px);transform:translate(-50%,14px);
  padding:10px 18px;border-radius:999px;background:rgba(246,242,255,.95);color:#221539;
  font-size:13px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:30;
  max-width:82vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .nav{gap:14px;font-size:13px}
  .now{flex-wrap:wrap;gap:14px}
  .now-body{order:3;flex:1 0 100%}
  .now-ctrls{margin-left:auto}
}
@media (max-width:640px){
  :root{--bar-h:72px}
  .topbar{flex-wrap:wrap;gap:10px 14px;padding-top:14px}
  .nav{order:3;width:100%;margin-left:0;justify-content:space-between}
  .topbar-right{margin-left:auto}
  .live{font-size:10px;letter-spacing:.06em}
  .hero{min-height:auto;padding-bottom:44px}
  .hero-bg img{object-position:44% 40%}
  .vol{display:none}
  .card{padding:28px 22px 22px}
  .song-list{grid-template-columns:1fr}
  .now-art{width:58px;height:58px}
  .now .round{width:38px;height:38px}
  .now .round.big{width:48px;height:48px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
}

/* ============================================================
   Support the station
   ============================================================ */
.hero-top{position:relative;z-index:2;max-width:var(--maxw);width:100%;margin:0 auto;
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.hero-clock{flex:0 0 auto}

/* A solid pill that reads as a button at a glance. flex-shrink:0 and
   nowrap keep it on one line instead of collapsing to a word per row. */
.support-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  flex:0 0 auto;white-space:nowrap;
  padding:13px 26px;border-radius:999px;
  font-size:14.5px;font-weight:600;line-height:1.2;letter-spacing:.005em;
  color:#150B28;border:0;
  background:linear-gradient(135deg,var(--gold) 0%,#FFD79A 55%,var(--gold) 100%);
  box-shadow:0 12px 30px -12px rgba(255,196,107,.75),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s,filter .22s}
.support-btn:hover{transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:0 18px 40px -14px rgba(255,196,107,.9),inset 0 1px 0 rgba(255,255,255,.45)}
.support-btn:active{transform:translateY(0);box-shadow:0 8px 20px -12px rgba(255,196,107,.8)}
.support-btn-icon{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  flex:0 0 auto;background:rgba(21,11,40,.18)}
.support-btn-icon svg{width:12px;height:12px;fill:#150B28}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 20px;border-radius:999px;font-size:14px;font-weight:600;
  text-decoration:none;color:var(--tint);border:1px solid var(--line);
  background:rgba(228,218,255,.07);transition:background .2s,transform .2s,color .2s}
.btn:hover{background:rgba(228,218,255,.14);color:var(--paper)}
.btn.primary{background:var(--gold);color:#150B28;border-color:transparent}
.btn.primary:hover{background:#FFBE72;transform:translateY(-1px);color:#150B28}
.btn-row{display:flex;flex-wrap:wrap;gap:10px}

.linkish{font-size:13px;color:var(--muted);padding:0;text-align:left}
.linkish:hover{color:var(--paper)}

/* ---------- sheets, used by support and install ---------- */
.sheet{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px}
.sheet[hidden]{display:none}
.sheet-veil{position:absolute;inset:0;background:rgba(6,2,5,.78);backdrop-filter:blur(5px);
  animation:veil .25s ease-out}
@keyframes veil{from{opacity:0}to{opacity:1}}
.sheet-body{position:relative;width:100%;max-width:620px;max-height:88svh;overflow-y:auto;
  padding:30px 30px 26px;border-radius:20px;
  border:1px solid rgba(255,196,107,.34);
  background:linear-gradient(160deg,#1B0713,#2C0D1F);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95);animation:rise .3s cubic-bezier(.2,.7,.3,1)}
.sheet-body.narrow{max-width:460px}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.sheet-body h2{font-size:clamp(20px,4vw,26px);line-height:1.24;margin:0 0 14px;color:var(--paper);
  max-width:30ch}
.sheet-close{position:absolute;top:14px;right:14px;display:grid;place-items:center;
  width:34px;height:34px;border-radius:50%;color:var(--muted);background:rgba(228,218,255,.07)}
.sheet-close:hover{color:var(--paper);background:rgba(228,218,255,.15)}
.sheet-close svg{width:14px;height:14px;fill:currentColor}
.sheet-note{font-size:14px;color:var(--muted);margin:0 0 22px}
.sheet-fine{font-size:12px;color:var(--faint);margin:22px 0 0}

.pay{display:flex;gap:24px;align-items:flex-start}
.pay-qr{margin:0;flex:0 0 190px}
.pay-qr img{width:190px;height:190px;border-radius:12px;background:#fff;padding:8px}
.pay-qr figcaption{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin-top:10px;text-align:center}
.pay-side{flex:1 1 auto;min-width:0}
.pay-label{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brand-soft);opacity:.8;margin:0 0 8px}
.pay-id{display:flex;align-items:center;gap:8px;margin:0 0 20px;
  padding:8px 8px 8px 12px;border-radius:10px;border:1px solid var(--line);
  background:rgba(228,218,255,.05)}
.pay-id code{flex:1 1 auto;min-width:0;font-family:var(--mono);font-size:13px;color:var(--tint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.copy{flex:0 0 auto;padding:6px 12px;border-radius:7px;font-size:12px;
  background:rgba(228,218,255,.1);color:var(--tint)}
.copy:hover{background:rgba(228,218,255,.2);color:var(--paper)}
.amount-field{display:flex;align-items:center;gap:8px;padding:0 14px;border-radius:12px;
  border:1px solid var(--line);background:rgba(228,218,255,.05);
  transition:border-color .2s,background .2s}
.amount-field:focus-within{border-color:var(--magenta);background:rgba(255,77,157,.10)}
.amount-field .rupee{font-family:var(--mono);font-size:16px;color:var(--brand-soft);flex:0 0 auto}
.amount-field input{flex:1 1 auto;width:100%;padding:12px 0;border:0;outline:none;
  background:none;color:var(--paper);font-family:var(--body);font-size:16px}
.amount-field input::placeholder{color:var(--faint);font-size:14.5px}
/* The spinner arrows crowd a field this size. */
.amount-field input::-webkit-outer-spin-button,
.amount-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.amount-field input[type=number]{-moz-appearance:textfield;appearance:textfield}
.amount-note{font-size:12px;color:var(--faint);margin:8px 0 18px;min-height:1.2em}
.pay-side .btn{width:100%}
.pay-hint{font-size:12.5px;color:var(--faint);margin:12px 0 0}
.pay-alt{margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}

.steps{list-style:none;margin:0;padding:0;counter-reset:step}
.steps li{counter-increment:step;position:relative;padding-left:34px;margin:0 0 14px;
  font-size:14.5px;color:var(--muted)}
.steps li::before{content:counter(step);position:absolute;left:0;top:1px;
  display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  font-family:var(--mono);font-size:11px;color:var(--brand-soft);
  background:rgba(255,77,157,.16);border:1px solid rgba(169,139,255,.35)}

.pill.accent{color:var(--paper);border-color:rgba(255,196,107,.6);background:rgba(255,196,107,.16);gap:6px}
.pill.accent:hover{background:rgba(255,196,107,.28)}
.pill.accent svg{width:13px;height:13px;fill:var(--gold)}
.pill[hidden]{display:none}

@media (max-width:900px){
  .support-btn{font-size:13.5px;padding:12px 20px}
}
@media (max-width:560px){
  .sheet{padding:12px}
  .sheet-body{padding:26px 20px 22px}
  .pay{flex-direction:column;align-items:center;gap:18px}
  .pay-qr{flex:0 0 auto}
  .pay-side{width:100%}
  .hero-top{flex-direction:column;align-items:stretch;gap:16px}
  .support-btn{width:100%;white-space:normal;text-align:center;
    font-size:13.5px;padding:12px 18px}
}