/* NAV: floating pill that shrinks to the logo on scroll and opens on hover (desktop only) */
@media (min-width:901px){
  header{background:transparent !important;border-bottom:0 !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
    padding:12px 0 11px;pointer-events:none;}
  html.neon header{background:transparent !important;border-bottom:0 !important;}
  header::after{display:none !important;}
  #siteNav{pointer-events:auto;margin:0 auto;padding:11px 26px;border-radius:999px;
    width:min(var(--maxw),calc(100% - 48px));
    background:rgba(238,244,240,.78);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
    border:1px solid rgba(34,62,57,.12);box-shadow:0 10px 30px -14px rgba(30,60,50,.28),inset 0 1px 0 rgba(255,255,255,.7);
    transition:width .65s cubic-bezier(.65,0,.25,1),padding .65s cubic-bezier(.65,0,.25,1),background .4s,box-shadow .4s,border-color .4s;}
  html.neon #siteNav{background:rgba(12,14,26,.62);border-color:rgba(125,140,255,.28);
    box-shadow:0 10px 34px -12px rgba(0,0,0,.7),0 0 0 1px rgba(46,242,224,.06),0 0 22px -6px rgba(46,242,224,.22),inset 0 1px 0 rgba(255,255,255,.06);}
  #siteNav .nav-right,#siteNav .nav-actions,#siteNav .now-playing{transition:opacity .3s ease .25s,visibility 0s linear 0s;}
  html.nav-mini #siteNav:not(.nav-open):not(:has(:focus-visible)){width:var(--navcw,190px);padding-left:22px;padding-right:22px;}
  html.nav-mini #siteNav:not(.nav-open):not(:has(:focus-visible)) .nav-right,
  html.nav-mini #siteNav:not(.nav-open):not(:has(:focus-visible)) .nav-actions,
  html.nav-mini #siteNav:not(.nav-open):not(:has(:focus-visible)) .now-playing{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility 0s linear .2s;}
  #siteNav .nav-brand{flex-shrink:0;}
  #siteNav .nav-right,#siteNav .nav-actions{flex-shrink:0;white-space:nowrap;}
  html.nav-mini #siteNav:not(.nav-open):not(:has(:focus-visible)){cursor:pointer;}
}
@media (prefers-reduced-motion:reduce){#siteNav,#siteNav .nav-right,#siteNav .nav-actions,#siteNav .now-playing{transition:none !important;}}
/* ===== while music plays: the small pill keeps a little live equalizer next to the logo; tap it to pause ===== */
#siteNav .nav-mini-eq{display:none;}
@media (min-width:901px){
  #siteNav .nav-mini-eq{display:flex;align-items:flex-end;gap:2px;position:absolute;right:20px;top:50%;transform:translateY(-50%);
    width:46px;height:20px;padding:0;margin:0;border:0;background:none;cursor:pointer;opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .2s ease,visibility 0s linear .2s;}
  html.nav-mini #siteNav.is-playing:not(.nav-open):not(:has(:focus-visible)) .nav-mini-eq{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .35s ease .4s,visibility 0s;}
  .nav-mini-eq i{width:3px;border-radius:1.5px;display:block;height:4px;animation-timing-function:ease-in-out;animation-iteration-count:infinite;}
  .nav-mini-eq i:nth-child(5n+1){background:#ffd166;animation-name:eqBounceA;}
  .nav-mini-eq i:nth-child(5n+2){background:#ff9fc2;animation-name:eqBounceB;}
  .nav-mini-eq i:nth-child(5n+3){background:#8fe0cf;animation-name:eqBounceC;}
  .nav-mini-eq i:nth-child(5n+4){background:#9ec2f0;animation-name:eqBounceA;}
  .nav-mini-eq i:nth-child(5n+5){background:#c9a6f0;animation-name:eqBounceB;}
  .nav-mini-eq i:nth-child(6n+1){animation-duration:.58s;}.nav-mini-eq i:nth-child(6n+2){animation-duration:.65s;}
  .nav-mini-eq i:nth-child(6n+3){animation-duration:.72s;}.nav-mini-eq i:nth-child(6n+4){animation-duration:.6s;}
  .nav-mini-eq i:nth-child(6n+5){animation-duration:.78s;}.nav-mini-eq i:nth-child(6n+6){animation-duration:.68s;}
  .nav-mini-eq i:nth-child(4n+2){animation-delay:.08s;}.nav-mini-eq i:nth-child(4n+3){animation-delay:.16s;}.nav-mini-eq i:nth-child(4n+4){animation-delay:.24s;}
  html.nav-mini #siteNav.is-playing:not(.nav-open):not(:has(:focus-visible)){width:var(--navcwp,260px);}
}
/* ===== day / night button (desktop, bottom right): same dress as the nav icons (cream chip by day, lit neon tube ring at night), still round ===== */
@media (min-width:901px){
  .neon-toggle:not(.in-nav){
    width:45px;height:45px;isolation:isolate;border:none;backdrop-filter:none;-webkit-backdrop-filter:none;
    --nn:200,215,255;color:#8a6f3d;
    background:linear-gradient(160deg,#fbf3e4 0%,#f2e2c3 100%);
    box-shadow:0 7px 12px -4px rgba(190,150,75,.26),0 2px 5px rgba(190,150,75,.18),inset 0 2px 3px rgba(255,255,255,.65),inset 0 -3px 5px rgba(190,150,75,.14);
    transition:transform .25s ease,box-shadow .25s ease,color .6s ease;
  }
  .neon-toggle:not(.in-nav)::before{
    content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;opacity:0;
    background:radial-gradient(130% 120% at 30% 0%,rgba(var(--nn),.24),transparent 62%),linear-gradient(160deg,#15183a 0%,#0c0e25 100%);
    box-shadow:0 0 0 1.5px rgba(var(--nn),.78),0 0 12px 1px rgba(var(--nn),.5),0 0 30px 3px rgba(var(--nn),.26),inset 0 0 11px rgba(var(--nn),.34),inset 0 1px 0 rgba(255,255,255,.14);
    transition:opacity .6s ease;
  }
  html.neon .neon-toggle:not(.in-nav){
    color:#e3e9ff;border:none;box-shadow:none;background:linear-gradient(160deg,#fbf3e4 0%,#f2e2c3 100%);
    filter:drop-shadow(0 0 8px rgba(var(--nn),.45));
  }
  html.neon .neon-toggle:not(.in-nav)::before{opacity:1;}
  html.neon .neon-toggle:not(.in-nav) svg{filter:drop-shadow(0 0 3px rgba(var(--nn),.9));}
  .neon-toggle:not(.in-nav) svg{width:21px;height:21px;margin:-10.5px 0 0 -10.5px;}
}

/* ===== night: no live blur behind the pill (the page behind is dark anyway, and a blur that re-renders every frame can make the bar shimmer
   while the glow and the equalizer move). The pink equalizer bars were almost black at night (#300e1a), so they seemed to blink out: lit again. ===== */
@media (min-width:901px){
  html.neon #siteNav{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(12,14,26,.84);}
}
html.neon .music-eq-burst i:nth-child(5n+2){background:#ff8fc8;}

/* ===== the equalizer bars kept animating all the time, even while hidden (music off), so the bar was repainted every frame: that is what made the name and
   the icons shimmer at night. They now only move while the music plays, and their repaints stay inside their own box. ===== */
#siteNav:not(.is-playing) .music-eq-burst i{animation-play-state:paused;}
.eq-bars,.nav-mini-eq{contain:paint;}
@media (min-width:901px){
  .nav-mini-eq i{animation-play-state:paused;}
  html.nav-mini #siteNav.is-playing:not(.nav-open) .nav-mini-eq i{animation-play-state:running;}
}

/* ===== night: one even rim all round the pill (same colour on the top, both ends and the bottom), the bottom edge only a little lighter. The outer glow is a single soft
   violet-blue haze instead of a separate cyan ring, so the ends no longer look different from the rest. The left padding is a hair smaller because the neon R has some space of its own. ===== */
@media (min-width:901px){
  html.neon #siteNav{
    border-color:rgba(140,155,255,.27);border-bottom-color:rgba(165,180,255,.35);
    box-shadow:inset 0 -1px 0 rgba(255,255,255,.05),0 10px 34px -12px rgba(0,0,0,.7),0 0 24px -8px rgba(120,150,255,.22);
    padding-left:25px;
  }
}

/* ===== PHONE: the same floating pill. On the way down it shrinks to the name (and the menu button where there is one), on the way up or on a tap it opens again ===== */
@media (max-width:900px){
  header{background:transparent !important;border-bottom:0 !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
    padding:10px 10px 8px;pointer-events:none;}
  html.neon header{background:transparent !important;border-bottom:0 !important;}
  header::after{display:none !important;}
  #siteNav{pointer-events:auto;margin:0 auto;padding:9px 14px 9px 18px;border-radius:999px;width:100%;max-width:none;
    background:rgba(238,244,240,.9);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
    border:1px solid rgba(34,62,57,.12);box-shadow:0 10px 26px -14px rgba(30,60,50,.3),inset 0 1px 0 rgba(255,255,255,.7);
    transition:width .6s cubic-bezier(.65,0,.25,1),padding .6s cubic-bezier(.65,0,.25,1),background .4s,box-shadow .4s,border-color .4s;}
  html.neon #siteNav{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(12,14,26,.93);
    border-color:rgba(140,155,255,.27);border-bottom-color:rgba(165,180,255,.35);
    box-shadow:inset 0 -1px 0 rgba(255,255,255,.05),0 10px 30px -12px rgba(0,0,0,.7),0 0 20px -8px rgba(120,150,255,.22);}
  #siteNav .nav-brand{flex-shrink:0;}
  /* the dropdown menu hangs under the pill, lined up with its right end */
  #siteNav .nav-links{right:6px;}
  /* small pill */
  html.nav-m-mini #siteNav{width:var(--navcwm,170px);padding-left:16px;padding-right:12px;}
  #siteNav .nav-right,#siteNav .nav-actions,#siteNav .mobile-actions{transition:gap .5s cubic-bezier(.65,0,.25,1);}
  #siteNav .nav-coffee,#siteNav .neon-toggle.in-nav,#siteNav .nav-actions{transition:opacity .25s ease .2s,visibility 0s linear 0s,width .5s cubic-bezier(.65,0,.25,1),margin .5s cubic-bezier(.65,0,.25,1);}
  html.nav-m-mini #siteNav .nav-coffee,html.nav-m-mini #siteNav .neon-toggle.in-nav{opacity:0;visibility:hidden;pointer-events:none;width:0 !important;min-width:0;margin:0;overflow:hidden;transition:opacity .15s ease,visibility 0s linear .16s,width .5s cubic-bezier(.65,0,.25,1);}
  html.nav-m-mini #siteNav .mobile-actions{gap:0;}
  html.nav-m-mini #siteNav .nav-actions{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,visibility 0s linear .16s;}
  html.nav-m-mini #siteNav .now-playing{display:none;}
}
@media (prefers-reduced-motion:reduce){#siteNav,#siteNav *{transition:none !important;}}