@font-face {font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(../assets/fonts/cormorant-garamond-400i-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face {font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(../assets/fonts/cormorant-garamond-400i-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face {font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/cormorant-garamond-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face {font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/cormorant-garamond-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face {font-family: 'Inter';font-style: normal;font-weight: 400;font-display: swap;src:url(../assets/fonts/inter-400-greek-ext.woff2) format('woff2');unicode-range: U+1F00-1FFF;}
  @font-face {font-family: 'Inter';font-style: normal;font-weight: 400;font-display: swap;src:url(../assets/fonts/inter-400-greek.woff2) format('woff2');unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
  @font-face {font-family: 'Inter';font-style: normal;font-weight: 400;font-display: swap;src:url(../assets/fonts/inter-400-latin-ext.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
  @font-face {font-family: 'Inter';font-style: normal;font-weight: 400;font-display: swap;src:url(../assets/fonts/inter-400-latin.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
  @font-face {font-family: 'Inter';font-style: normal;font-weight: 500;font-display: swap;src:url(../assets/fonts/inter-500-greek-ext.woff2) format('woff2');unicode-range: U+1F00-1FFF;}
  @font-face {font-family: 'Inter';font-style: normal;font-weight: 500;font-display: swap;src:url(../assets/fonts/inter-500-greek.woff2) format('woff2');unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
  @font-face {font-family: 'Inter';font-style: normal;font-weight: 500;font-display: swap;src:url(../assets/fonts/inter-500-latin-ext.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
  @font-face {font-family: 'Inter';font-style: normal;font-weight: 500;font-display: swap;src:url(../assets/fonts/inter-500-latin.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
  @font-face {font-family: 'Inter';font-style: normal;font-weight: 600;font-display: swap;src:url(../assets/fonts/inter-600-greek-ext.woff2) format('woff2');unicode-range: U+1F00-1FFF;}
  @font-face {font-family: 'Inter';font-style: normal;font-weight: 600;font-display: swap;src:url(../assets/fonts/inter-600-greek.woff2) format('woff2');unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
  @font-face {font-family: 'Inter';font-style: normal;font-weight: 600;font-display: swap;src:url(../assets/fonts/inter-600-latin-ext.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
  @font-face {font-family: 'Inter';font-style: normal;font-weight: 600;font-display: swap;src:url(../assets/fonts/inter-600-latin.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
  @font-face {font-family: 'Inter';font-style: normal;font-weight: 700;font-display: swap;src:url(../assets/fonts/inter-700-greek-ext.woff2) format('woff2');unicode-range: U+1F00-1FFF;}
  @font-face {font-family: 'Inter';font-style: normal;font-weight: 700;font-display: swap;src:url(../assets/fonts/inter-700-greek.woff2) format('woff2');unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
  @font-face {font-family: 'Inter';font-style: normal;font-weight: 700;font-display: swap;src:url(../assets/fonts/inter-700-latin-ext.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
  @font-face {font-family: 'Inter';font-style: normal;font-weight: 700;font-display: swap;src:url(../assets/fonts/inter-700-latin.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
  @font-face {font-family:'Frank Ruhl Libre';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/frank-ruhl-libre-400-hebrew.woff2) format('woff2');unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
  @font-face {font-family:'Frank Ruhl Libre';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/frank-ruhl-libre-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face {font-family:'Frank Ruhl Libre';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/frank-ruhl-libre-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face {font-family:'Frank Ruhl Libre';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/frank-ruhl-libre-500-hebrew.woff2) format('woff2');unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
  @font-face {font-family:'Frank Ruhl Libre';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/frank-ruhl-libre-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face {font-family:'Frank Ruhl Libre';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/frank-ruhl-libre-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face {font-family:'Frank Ruhl Libre';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/frank-ruhl-libre-700-hebrew.woff2) format('woff2');unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
  @font-face {font-family:'Frank Ruhl Libre';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/frank-ruhl-libre-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face {font-family:'Frank Ruhl Libre';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/frank-ruhl-libre-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face {font-family:'Heebo';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/heebo-400-hebrew.woff2) format('woff2');unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
  @font-face {font-family:'Heebo';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/heebo-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face {font-family:'Heebo';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/heebo-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face {font-family:'Heebo';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/heebo-500-hebrew.woff2) format('woff2');unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
  @font-face {font-family:'Heebo';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/heebo-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face {font-family:'Heebo';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/heebo-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face {font-family:'Heebo';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/heebo-700-hebrew.woff2) format('woff2');unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
  @font-face {font-family:'Heebo';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/heebo-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face {font-family:'Heebo';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/heebo-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face{font-family:'Material Symbols Outlined';font-style:normal;font-weight:400;font-display:block;src:url(../assets/fonts/material-symbols-subset.woff2) format('woff2')}

  @font-face{font-family:'GFS Didot';font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0370-03FF,U+1F00-1FFF,U+2018-201F,U+2026;src:url(../assets/fonts/gfs-didot-400-greek.woff2) format('woff2')}
  @font-face{font-family:'Didact Gothic';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/didact-gothic-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face{font-family:'Didact Gothic';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/didact-gothic-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face{font-family:'Didact Gothic';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/didact-gothic-400-greek.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
  @font-face{font-family:'Didact Gothic';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/didact-gothic-400-greek-ext.woff2) format('woff2');unicode-range:U+1F00-1FFF}
  *{margin:0;padding:0;box-sizing:border-box}
  :root{
    --theme:#d9aa55; --red:#d22730;
    --disp:'Work Sans','Didact Gothic','Inter','Heebo','Assistant',system-ui,sans-serif;
    --ui:'Work Sans','Inter','Assistant','Heebo',system-ui,sans-serif;
    --theme2:#f1c878; --gold:var(--theme); /* v2: gold retired — chrome follows the song */
    --song-text:color-mix(in srgb, var(--theme2) 72%, #fff);
    --song-glow:color-mix(in srgb, var(--theme) 32%, transparent);

    --cardw:max(150px, min(45vh, 82vw, calc(88svh - clamp(240px, 36svh, 328px))));
    --cardmaxh:none;
    --herow:min(27vw,380px);
    --unw:clamp(260px,24vw,300px);
    --glass:0.76;

    --navy:16,27,42; --navy-deep:12,20,34; --slate:14,15,18; --glass-bd:rgba(255,255,255,.14);
    --vvb:0px;
    --barH:0px; --dockH:0px;
  }

  html{background:#0a1420;scroll-behavior:smooth;overflow:clip}
  body{font-family:var(--disp);background:#0a1420;color:#e8eef5;overflow:hidden;
       -webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;
       height:100vh;height:100svh;position:relative}

  .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}
  a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:6px}
  #scroller:focus-visible{outline:2px solid rgba(255,255,255,.9);outline-offset:-6px}

  #bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:#0a1420}

  .bg-img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;--fx:1;
          transition:opacity .7s var(--ease);transform:scale(1.06) scaleX(var(--fx));filter:saturate(1.05)}
  .bg-img.flip{--fx:-1}
  html[dir="rtl"] .bg-img{--fx:-1}
  html[dir="rtl"] .bg-img.flip{--fx:1}
  .bg-img.on{opacity:1}

  @media (max-width:959px){ .bg-img{background-position:40% center} }

  
  
  
  
  

  .skip-link{position:fixed;top:8px;inset-inline-start:8px;z-index:9999;transform:translateY(-160%);
        padding:10px 16px;border-radius:10px;font-family:var(--ui);font-size:13px;font-weight:600;letter-spacing:.02em;
        color:#0b2742;background:#f7fbff;border:1px solid rgba(11,39,66,.35);text-decoration:none;
        transition:transform .18s var(--ease)}
  .skip-link:focus-visible,.skip-link:focus{transform:translateY(0);outline:2px solid #0b2742;outline-offset:2px}
  #bgTint{position:absolute;inset:0;transition:background .7s var(--ease);
          background:linear-gradient(90deg, rgba(4,13,27,.5) 0%, rgba(4,13,27,.28) 26%, rgba(4,13,27,.06) 46%, rgba(4,13,27,.06) 54%, rgba(4,13,27,.28) 74%, rgba(4,13,27,.5) 100%),
                     linear-gradient(180deg, rgba(4,7,11,.56) 0%, rgba(4,7,11,.38) 34%, rgba(4,7,11,.78) 100%)}
  html[dir="rtl"] #bgTint{background:linear-gradient(90deg, rgba(4,13,27,.5) 0%, rgba(4,13,27,.28) 26%, rgba(4,13,27,.06) 46%, rgba(4,13,27,.06) 54%, rgba(4,13,27,.28) 74%, rgba(4,13,27,.5) 100%),
                     linear-gradient(180deg, rgba(4,7,11,.5) 0%, rgba(4,7,11,.32) 34%, rgba(4,7,11,.72) 100%)}
  #bgTint::after{content:'';position:absolute;inset:0;opacity:.5;mix-blend-mode:soft-light;
          background:radial-gradient(120% 90% at 50% 18%, var(--theme), transparent 70%)}

  
  

  

  /* Focus mode: the scene toggle is a viewing mode,not a customization —
     imagery off entirely (feature removed) */
  
  

  
  
  

  
  

  .wbar{position:fixed;top:calc(10px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:30;
        display:flex;align-items:center;justify-content:space-between;gap:12px;
        width:calc(100% - 20px);max-width:1120px;padding:6px 2px;
        background:transparent;border:none;box-shadow:none}
  .wleft{position:relative;z-index:1;display:flex;align-items:center;gap:8px;min-width:0;padding-inline:4px 0}
  .wbrand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;min-width:0;
          text-transform:uppercase;text-shadow:0 1px 16px rgba(0,0,0,.5)}
  .wbrand img{display:none}

  .wbrand-tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-family:var(--disp);
         font-size:clamp(12px,3.4vw,15px);letter-spacing:clamp(2.4px,1vw,4.8px);font-weight:400;text-shadow:0 1px 14px rgba(0,0,0,.65)}
  .wactions{position:relative;z-index:1;display:flex;align-items:center;gap:7px;flex:0 0 auto}

  .wbtn{font:inherit;cursor:pointer;color:rgba(255,255,255,.8);display:inline-flex;align-items:center;justify-content:center;gap:8px;
        text-decoration:none;white-space:nowrap;border:none;background:none;padding:8px;border-radius:10px;
        transition:color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)}
  @media (hover:hover){ .wbtn:hover{color:#fff;background:rgba(255,255,255,.1)} }
  .wbtn:active{transform:scale(.92)}
  .wbtn:focus-visible{color:#fff;outline:none;background:rgba(255,255,255,.1)}
  .wbtn svg{width:18px;height:18px;fill:currentColor}
  .wactions .wbtn{width:44px;height:44px;padding:0;border-radius:50%;
         background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
         -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  @media (hover:hover){.wactions .wbtn:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.18)}}
  .wactions .wbtn:active{transform:scale(.92)}

  .wnav2{display:none;align-items:center;gap:16px;margin-inline-start:10px}
  .wnav-link{position:relative;font:inherit;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.78);
        background:none;border:0;border-radius:9px;padding:8px 12px;cursor:pointer;white-space:nowrap;
        text-shadow:0 1px 10px rgba(0,0,0,.55);transition:color .2s var(--ease),background .2s var(--ease)}
  .wnav-link:hover,.wnav-link:focus-visible{color:#fff;background:none;outline:none}

  
  #infoBtn{display:none}

  @media (min-width:960px){
    .wbar{max-width:none;left:0;right:0;transform:none;width:auto;margin-inline:clamp(40px,5vw,96px) clamp(16px,2vw,44px);padding:6px 0}
    .wleft{padding-inline:0;gap:26px}
    .wbrand-tx{font-size:21px;letter-spacing:.42em}
    .wactions{gap:9px}
    .wactions .wbtn:hover{transform:none}
    .wnav-link{font-size:12.5px;font-weight:400;letter-spacing:.18em;color:rgba(232,238,245,.66)}
    .wnav-link:hover,.wnav-link:focus-visible{color:#fff}
    .wnav2{display:flex}
    #menuBtn{display:none}
    #viewToggle{display:none}
  }

  
  
  #searchResults{display:flex;flex-direction:column;gap:2px;max-height:min(48vh,420px);overflow-y:auto;scrollbar-width:thin}
  
  
  
  
  
  
  

  #hero{position:relative;width:100%;flex:0 0 auto;
        display:none;flex-direction:column;gap:0;text-align:start;
        padding:10px 12px 9px;border-radius:18px;border:1px solid var(--glass-bd);
        background:linear-gradient(180deg, color-mix(in srgb,var(--theme) 7%, rgba(8,10,14,.34)), rgba(8,10,14,.52) 34%, rgba(8,10,14,.52) 84%, rgba(8,10,14,.32));
        transition:opacity .5s var(--ease)}
  #hero{pointer-events:auto;-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
  #hero *{-webkit-user-select:text;user-select:text}
  .hero-quote,.hero-lyrhead .hlh-title{cursor:text}

  .hero-quote{position:relative;margin:0;padding:6px 2px;width:100%;min-height:96px;display:flex;flex-direction:column;justify-content:center;gap:0;text-align:center}
  .hq-off,.lp-off,.lo-off{display:none;margin:0;font-family:var(--ui);font-size:14px;font-weight:400;line-height:1.5;
        color:rgba(232,238,245,.52);text-wrap:pretty}
  .hq-off{padding:0;text-align:center}





  .hq-wait{display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:0;padding:10px 0 2px}
  .hq-wait .lw-eq{display:none}
  #hero.k-intro .hq-wait{display:flex}

  body.lv-none #hero .hq-wait{display:none!important}
  .lp-off{padding:6px 16px 16px;text-align:center}
  .lo-off{flex:0 0 auto;padding:6px 20px 12px;text-align:center}
  body.lv-none #lyricsPanel .lp-scroll{display:none}
  body.lv-none .hq-off,body.lv-none .lp-off,body.lv-none .lo-off{display:block}
  .hq-text{margin:0;font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(23px,2.2vw,44px);line-height:1.3;letter-spacing:0;max-width:100%;
        color:#f4efe7;overflow-wrap:anywhere;text-wrap:balance;text-shadow:0 2px 20px rgba(0,0,0,.5)}
  .hero-lyrhead{display:none;flex-direction:column;gap:6px;margin:0 0 10px;padding-bottom:0;max-width:none}
  .hlh-row{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:0 6px 6px;margin-bottom:2px}
  .hlh-row::after{content:'';position:absolute;inset-inline-start:6px;bottom:0;
        width:64px;height:1px;background:linear-gradient(to right,var(--theme),transparent)}
  html[dir="rtl"] .hlh-row::after{background:linear-gradient(to left,var(--theme),transparent)}
  .hlh-ctrls{display:flex;align-items:center;flex-wrap:wrap;gap:5px}
  .hlh-ctrls .hero-lyrtools{flex:1 1 auto;min-width:0;grid-auto-columns:1fr;padding:2px;gap:2px;border-radius:10px;
        background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
  .hlh-ctrls .hlt-seg{padding-inline:8px;min-height:28px;font-size:11px;border-radius:7px;background:none;
        -webkit-backdrop-filter:none;backdrop-filter:none;color:rgba(232,238,245,.62)}
  .hlh-ctrls .hlt-seg:hover{color:#fff;background:rgba(255,255,255,.1)}
  .hlh-ctrls .hlt-seg[aria-pressed="true"]{color:#fff;background:color-mix(in srgb,var(--theme) 26%,transparent);
        border-color:color-mix(in srgb,var(--theme) 55%,transparent)}
  .hlh-lang{display:flex;align-items:center;gap:7px}
  .hlh-ctrls .hero-lyrtools{grid-auto-columns:max-content;padding:0;gap:18px;border-radius:0;background:none;border:0}
  .hlh-ctrls .hlt-seg{position:relative;padding:2px 1px;min-height:26px;font-size:11px;letter-spacing:.05em;border:0;border-radius:0;background:none}
  .hlh-ctrls .hlt-seg:hover{color:#fff;background:none}
  .hlh-ctrls .hlt-seg[aria-pressed="true"]{color:#fff;background:none;border:0}
  .hlh-ctrls .hlt-seg::after{content:'';position:absolute;left:1px;right:1px;bottom:2px;height:2px;border-radius:2px;background:var(--theme);filter:brightness(1.3);opacity:0;transition:opacity .2s var(--ease)}
  .hlh-ctrls .hlt-seg[aria-pressed="true"]::after{opacity:1}
  .hlh-ctrls .hlt-seg:focus-visible{outline:1px solid color-mix(in srgb,var(--theme) 70%,#fff);outline-offset:3px}
  .hlh-k{flex:0 0 auto;font-family:var(--ui);font-size:8px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(232,238,245,.45)}
  .hlh-lang .hlt-lang{flex:0 1 auto;width:auto;min-width:0;max-width:100%;min-height:28px;padding:4px 26px 4px 10px}
  .hlh-lang .hlt-lang:dir(rtl){padding:4px 10px 4px 26px}
  .hlh-title{min-width:0;font-family:var(--ui);font-size:12px;font-weight:400;
        letter-spacing:.26em;text-transform:uppercase;color:rgba(232,238,245,.65);text-align:start;
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hlh-lang{position:relative;flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:0 6px;margin-bottom:0}
  .hlh-k{font-family:var(--ui);font-size:11px;font-weight:500;letter-spacing:.01em;text-transform:none;color:rgba(232,238,245,.52)}
  .hero-lyrtools{display:none;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;margin:0;max-width:none}
  #hero .hq-by{display:none}
  .hlt-seg{font:inherit;cursor:pointer;min-height:25px;padding:4px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid transparent;border-radius:8px;
        background:rgba(255,255,255,.07);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
        font-family:var(--ui);font-size:9.5px;letter-spacing:.01em;font-weight:600;
        color:rgba(232,238,245,.9);transition:color .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease)}
  .hlt-seg:hover{color:#fff;background:rgba(255,255,255,.14)}
  .hlt-seg:focus-visible{outline:none;border-color:color-mix(in srgb,var(--theme) 70%,#fff)}
  .hlt-seg[aria-pressed="true"]{color:#fff;font-weight:700;background:color-mix(in srgb,var(--theme) 30%,transparent);
        border-color:color-mix(in srgb,var(--theme) 75%,transparent);filter:none}
  .hlt-lang{max-width:150px}
  #hero:has(.hero-quote.hq-live) .hero-lyrtools{display:grid}
  #hero:has(.hero-quote.hq-live) .hero-lyrhead{display:flex}
  .hq-tr{margin:10px 0 0;font-family:var(--ui);font-weight:400;font-size:clamp(12.5px,1vw,16px);line-height:1.45;max-width:100%;
        color:var(--song-text);text-shadow:0 2px 18px rgba(0,0,0,.55)}
  
  .hero-quote .hq-text{overflow-wrap:break-word}
  .hero-quote.hq-live .hq-text{font-size:clamp(21px,2vw,28px);line-height:1.3;letter-spacing:0}
  .hq-ph{margin:3px 0 0;font-family:var(--ui);font-style:italic;font-weight:300;font-size:clamp(12px,.9vw,15px);letter-spacing:.028em;line-height:1.45;max-width:100%;
        color:rgba(244,239,231,.52);text-shadow:0 2px 18px rgba(0,0,0,.5)}
  body:not(.lv-o) .hero-quote .hq-text{display:none}
  body:not(.lv-ph) .hero-quote .hq-ph{display:none}
  body:not(.lv-tr) .hero-quote .hq-tr{display:none}
  body.lv-o:not(.lv-ph):not(.lv-tr) .hero-quote .hq-text{font-size:clamp(24px,2.2vw,30px)}
  body:not(.lv-o).lv-ph .hero-quote .hq-ph{margin-top:0;font-family:'Cormorant Garamond',serif;font-style:normal;letter-spacing:0;
        font-size:clamp(19px,1.7vw,23px);line-height:1.25;color:#e8eef5}
  body:not(.lv-o):not(.lv-ph).lv-tr .hero-quote .hq-tr{margin-top:0;font-size:clamp(19px,1.7vw,23px);line-height:1.25;color:rgba(255,255,255,.92)}

  @media (prefers-reduced-motion:no-preference){
    .hq-in{animation:hqIn .5s var(--ease) both}
  }
  /* no filter in these keyframes: animating blur re-rasterizes the blurred hero every
     lyric line and flickers the panel (same failure mode as the identity-filter note below) */
  @keyframes hqIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .hero-lyr{display:none;position:relative;align-items:center;justify-content:center;gap:6px;min-height:24px;margin:8px auto 0;padding:4px 10px;
        border-radius:999px;border:1px solid color-mix(in srgb,var(--theme) 20%,rgba(255,255,255,.08));background:none;
        font-family:var(--ui);font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
        color:rgba(232,238,245,.66);cursor:pointer;
        transition:color .2s var(--ease)}
  .hero-lyr>*{position:relative;z-index:1}
  .hero-lyr::before{content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
        background:color-mix(in srgb,var(--theme) 22%,transparent);
        border:1px solid color-mix(in srgb,var(--theme) 65%,transparent);
        opacity:0;transition:opacity .2s var(--ease)}
  .hero-lyr:hover,.hero-lyr:focus-visible{outline:none;color:rgba(238,243,248,.95)}
  .hero-lyr:hover::before,.hero-lyr:focus-visible::before{opacity:1}
  .hero-lyr #heroLyricsT{white-space:nowrap}
  .hero-lyr .hl-chev{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2;
        stroke-linecap:round;stroke-linejoin:round;opacity:.85;transform:rotate(90deg);
        transition:transform .25s var(--ease),opacity .2s var(--ease)}
  .hero-lyr:hover .hl-chev,.hero-lyr:focus-visible .hl-chev{opacity:1;transform:rotate(90deg) translateX(2px)}
  .hero-lyr:focus-visible{text-decoration:underline;text-underline-offset:5px}
  .hero-lyr[aria-expanded="true"] .hl-chev{transform:rotate(-90deg);opacity:1}
  @media (min-width:960px){
    #hero:has(.hero-quote.hq-live) .hero-lyr{display:inline-flex}
    body.lyrics-focus .hero-lyr,body.lyrics-over .hero-lyr{display:inline-flex}
    .wcard.active:not(.lyr-open) .card-player .cp-lyrbtn{display:none}
  }
  .hq-by{position:relative;margin-top:34px;padding-top:13px;font-size:10px;letter-spacing:.34em;
        text-transform:uppercase;color:rgba(232,238,245,.85);text-shadow:0 1px 12px rgba(0,0,0,.7)}
  .hq-by::before{content:'';position:absolute;top:0;inset-inline-start:2px;width:44px;height:1px;
        background:linear-gradient(90deg,var(--theme),color-mix(in srgb,var(--theme) 25%,transparent));
        transition:background .6s var(--ease)}

  .card-player{display:none;flex-direction:column;gap:4px;padding:6px 6px 4px}

  .cp-timeline{display:flex;align-items:center;gap:10px;direction:ltr}
  .cp-timeline .cp-cur,.cp-timeline .cp-rem{flex:0 0 auto;min-width:42px;white-space:nowrap;font-size:12.5px;letter-spacing:.02em;color:rgba(232,238,245,.92);font-variant-numeric:tabular-nums}
  .cp-timeline .cp-cur{text-align:right}.cp-timeline .cp-rem{text-align:left;color:rgba(232,238,245,.65)}
  .cp-progress{position:relative;flex:1;height:36px;cursor:pointer;direction:ltr;display:flex;align-items:center;touch-action:none}
  .cp-progress:focus-visible{outline:none}
  .cp-progress:focus-visible .cp-signal-track{box-shadow:0 0 0 2px color-mix(in srgb,var(--theme) 70%,transparent)}
  .cp-signal-track{position:relative;display:block;width:100%;height:4px;border-radius:2px;background:rgba(255,255,255,.26);
        transition:height .16s var(--ease),background .16s var(--ease)}
  .cp-progress:hover .cp-signal-track,.cp-progress.scrubbing .cp-signal-track{height:7px;background:rgba(255,255,255,.34)}
  .cp-bub{position:absolute;bottom:calc(50% + 12px);transform:translateX(-50%);pointer-events:none;
        padding:2px 7px;border-radius:6px;font-family:var(--ui);font-size:10.5px;font-variant-numeric:tabular-nums;letter-spacing:.04em;
        color:rgba(232,238,245,.9);background:rgba(10,16,26,.85);border:1px solid rgba(255,255,255,.16);opacity:0;visibility:hidden;transition:opacity .14s var(--ease),visibility .14s}
  .cp-bub.on{opacity:1;visibility:visible}
  .cp-signal-fill{position:absolute;inset:0 auto 0 0;width:100%;transform-origin:left center;transform:scaleX(var(--p,0));will-change:transform;border-radius:inherit;background:linear-gradient(90deg,var(--theme),var(--theme2))}
  .cp-signal-head{position:absolute;left:0;top:50%;margin-left:-6px;width:12px;height:12px;border-radius:50%;background:color-mix(in srgb,var(--theme2) 30%,#fff);box-shadow:0 0 8px color-mix(in srgb,var(--theme2) 80%,transparent);transform:translate(var(--hx,0),-50%);will-change:transform;opacity:0;transition:opacity .15s var(--ease)}
  .cp-progress:hover .cp-signal-head,.cp-progress.scrubbing .cp-signal-head,.cp-progress:focus-visible .cp-signal-head{opacity:1}

  .art-play .ap-pause{display:none}
  .wcard.k-playing .art-play .ap-play{display:none}
  .wcard.k-playing .art-play .ap-pause{display:block}

  .cp-controls{display:grid;grid-template-columns:1fr auto 1fr;column-gap:14px;align-items:center;direction:ltr;zoom:var(--cpz,1)}
  .cpc-l{display:flex;align-items:center;gap:6px;justify-content:flex-start;min-width:0}
  .cpc-c{display:flex;align-items:center;gap:clamp(10px,calc(var(--cardw)*.04),16px)}
  .cpc-r{display:flex;align-items:center;gap:clamp(8px,calc(var(--cardw)*.034),22px);justify-content:flex-end;min-width:0}
  .cp-controls .k-tool{width:auto;height:auto;min-width:24px;min-height:24px;border-radius:8px;background:none;color:#e8eef5;opacity:.75;transition:opacity .15s var(--ease),color .15s var(--ease),transform .12s var(--ease)}
  .cp-controls .k-tool:hover,.cp-controls .k-tool:focus-visible{background:none;opacity:1;color:#fff}
  .cp-controls .k-tool:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--theme) 55%,transparent)}
  .cp-controls .k-tool:active{transform:scale(.88)}
  .cp-controls .cp-b10 svg,.cp-controls .cp-f10 svg{width:18px;height:18px}
  .cp-controls .cp-tprev svg,.cp-controls .cp-tnext svg{width:20px;height:20px;fill:currentColor}
  .cp-controls .cp-lyrbtn svg{width:18px;height:18px}
  .cp-controls .cp-queue svg{width:19px;height:19px}
  .cp-controls .k-fullscreen svg{width:17px;height:17px}
  .cp-queue[aria-pressed="false"]{color:rgba(255,255,255,.45)}
  .cp-lyrbtn[aria-expanded="true"]{color:var(--song-text);opacity:1}
  .cp-playbtn{display:grid;place-items:center;cursor:pointer;width:clamp(52px,calc(var(--cardw)*.16),76px);height:clamp(52px,calc(var(--cardw)*.16),76px);border-radius:50%;border:none;
        background:#eef3f8;
        box-shadow:0 14px 36px -14px rgba(0,0,0,.8),0 2px 10px -4px rgba(0,0,0,.5),inset 0 -1px 0 rgba(11,18,32,.12);
        transition:transform .12s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease)}
  .cp-playbtn:hover,.cp-playbtn:focus-visible{outline:none;background:#fff;box-shadow:0 16px 42px -14px rgba(0,0,0,.85),0 2px 10px -4px rgba(0,0,0,.5),0 0 0 6px color-mix(in srgb,var(--theme) 20%,transparent)}
  .cp-playbtn:active{transform:scale(.93)}
  .cp-playbtn svg{grid-area:1/1;width:clamp(22px,calc(var(--cardw)*.052),28px);height:clamp(22px,calc(var(--cardw)*.052),28px);fill:#0b1220;transition:opacity .38s var(--ease-calm,var(--ease))}
  .cp-playbtn .cpb-play{margin-left:3px}
  .k-pending .cp-playbtn{position:relative}
  .k-pending .cp-playbtn::before{content:'';position:absolute;inset:-5px;border-radius:50%;
        border:1.5px solid transparent;border-top-color:rgba(255,255,255,.85);animation:kspin .7s linear infinite}
  @keyframes kspin{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion:reduce){ .k-pending .cp-playbtn::before{animation-duration:1.6s} }
  .k-pending .cp-playbtn .cpb-play{opacity:.45}
  .cp-playbtn .cpb-pause{opacity:0}
  .k-playing .cp-playbtn .cpb-play{opacity:0}
  .k-playing .cp-playbtn .cpb-pause{opacity:1}
  /* play state: static button, no glow or ring */
  .wcard.k-playing .cp-playbtn,#lyricsOverlay.k-playing .cp-playbtn{position:relative;box-shadow:0 14px 36px -14px rgba(0,0,0,.8),0 2px 10px -4px rgba(0,0,0,.5)}
  .wcard.k-playing .cp-playbtn:hover,.wcard.k-playing .cp-playbtn:focus-visible,#lyricsOverlay.k-playing .cp-playbtn:hover,#lyricsOverlay.k-playing .cp-playbtn:focus-visible{box-shadow:0 16px 42px -14px rgba(0,0,0,.85),0 2px 10px -4px rgba(0,0,0,.5),0 0 0 6px color-mix(in srgb,var(--theme) 20%,transparent)}
  @media (prefers-reduced-motion:reduce){ .cp-playbtn svg,.cp-signal-head,.cp-controls .k-tool{transition:none} }
  .k-tools{display:flex;align-items:center;justify-content:flex-end;gap:6px;direction:ltr}
  .k-tool{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:10px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.78);cursor:pointer}
  .k-tool:hover,.k-tool:focus-visible{background:rgba(255,255,255,.15);color:#fff;outline:none}
  .k-tool svg,.k-volume-wrap svg{width:19px;height:19px;fill:currentColor}
  .kt-lbl{display:none;font-family:var(--ui);font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
  .k-youtube:hover,.k-youtube:focus-visible{color:#ff3030}
  .k-volume-wrap{display:flex;align-items:center;gap:6px;color:#cfd8e3}
  .k-volume{-webkit-appearance:none;appearance:none;--kv-h:3px;--kv-fill:color-mix(in srgb,var(--theme2) 55%,#fff);
        width:clamp(48px,calc(var(--cardw)*.16),86px);height:18px;margin:0;padding:0;background:none;border:0;cursor:pointer}
  .k-volume::-webkit-slider-runnable-track{height:var(--kv-h);border-radius:99px;
        background:linear-gradient(to right,var(--kv-fill) 0 var(--kv-pct,80%),rgba(255,255,255,.22) var(--kv-pct,80%) 100%)}
  .k-volume::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;border:0;border-radius:50%;
        background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.45);margin-top:calc((var(--kv-h) - 12px)/2)}
  .k-volume::-moz-range-track{height:var(--kv-h);border-radius:99px;background:rgba(255,255,255,.22)}
  .k-volume::-moz-range-progress{height:var(--kv-h);border-radius:99px;background:var(--kv-fill)}
  .k-volume::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.45)}
  .k-volume:focus-visible{outline:2px solid rgba(255,255,255,.65);outline-offset:3px;border-radius:99px}
  .cp-controls .k-volume-wrap svg{width:20px;height:20px}
  .cl-playback{display:flex;align-items:center;gap:12px}
  .cl-playback .cl-progress{flex:1}
  .k-fs-exit{display:none;position:absolute;z-index:12;top:18px;right:18px;width:44px;height:44px;padding:10px;border:0;border-radius:10px;background:rgba(8,10,14,.78);color:#fff;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.5)}
  .k-fs-exit svg{width:100%;height:100%;fill:currentColor}
  .art.k-fullscreen-video:fullscreen,.art.k-fullscreen-video:-webkit-full-screen{width:100vw!important;height:100vh!important;aspect-ratio:auto!important;border-radius:0!important;background:#000}
  .art.k-fullscreen-video:fullscreen .art-video,.art.k-fullscreen-video:-webkit-full-screen .art-video{z-index:10;opacity:1;visibility:visible;pointer-events:auto}
  .art.k-fullscreen-video:fullscreen>img,.art.k-fullscreen-video:-webkit-full-screen>img{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
  .art.k-fullscreen-video:fullscreen>.k-fs-exit,.art.k-fullscreen-video:-webkit-full-screen>.k-fs-exit{display:block}
  .cp-row{display:flex;align-items:center;justify-content:center;gap:6px}
  .cp-btn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:none;background:none;color:#fff;
        width:42px;height:42px;border-radius:50%;transition:background .18s var(--ease),color .18s var(--ease),transform .14s var(--ease)}
  .cp-btn .material-symbols-outlined{font-size:24px}
  .cp-btn:hover,.cp-btn:focus-visible{background:rgba(255,255,255,.12);outline:none}
  .cp-btn:active{transform:scale(.9)}
  .cp-btn[disabled]{opacity:.3;pointer-events:none}

  .cp-row{direction:ltr}
  .cp-prev,.cp-next{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.25)}
  .cp-cov{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.5) saturate(.85);transition:filter .18s var(--ease)}
  .cp-prev .material-symbols-outlined,.cp-next .material-symbols-outlined{position:relative;z-index:1;font-size:22px;text-shadow:0 1px 6px rgba(0,0,0,.7)}
  .cp-prev:hover .cp-cov,.cp-prev:focus-visible .cp-cov,.cp-next:hover .cp-cov,.cp-next:focus-visible .cp-cov{filter:brightness(.85) saturate(1)}
  .cp-prev:focus-visible,.cp-next:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .cp-none{visibility:hidden}

  @media (max-width:959px){
    .wcard.active:not(.lyr-open) .card-player{display:flex;gap:2px;padding:6px 6px 2px}

    .wcard.active:not(.lyr-open) .card-player .cp-row{display:none}
    .wcard.active:not(.lyr-open) .card-player .cp-queue{display:none}
    .wcard.active:not(.lyr-open) .card-player .cpc-l{display:none}
    .wcard.active:not(.lyr-open) .card-player .cp-tprev{display:none}
    .wcard.active:not(.lyr-open) .card-player .cp-controls{display:flex;flex-direction:column;align-items:center;gap:9px;padding:5px 0 1px}
    .wcard.active:not(.lyr-open) .card-player .cpc-c{gap:18px;flex:0 0 auto}
    .wcard.active:not(.lyr-open) .card-player .cpc-r{gap:7px;justify-content:center;flex:0 0 auto;flex-wrap:nowrap}
    .wcard.active:not(.lyr-open) .card-player .k-tool,
    .wcard.active:not(.lyr-open) .card-player .cp-playbtn{flex:0 0 auto}
    .wcard.active:not(.lyr-open) .card-player .cpc-r .k-tool{gap:6px;min-height:32px;padding:6px 11px;border-radius:999px;
          background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);opacity:1;color:rgba(232,238,245,.9)}
    .wcard.active:not(.lyr-open) .card-player .cpc-r .k-tool:hover,
    .wcard.active:not(.lyr-open) .card-player .cpc-r .k-tool:focus-visible{background:rgba(255,255,255,.15);color:#fff}
    .wcard.active:not(.lyr-open) .card-player .cpc-r .k-tool svg{width:15px;height:15px}
    /* icon-only buttons; names stay in aria-labels */
    .wcard.active:not(.lyr-open) .card-player .cpc-r .kt-lbl{display:none}
    .wcard.active:not(.lyr-open) .card-player .cpc-r .k-tool{width:44px;height:44px;padding:0;border-radius:50%;justify-content:center}
    .wcard.active:not(.lyr-open) .wtext .tag,
    .wcard.active:not(.lyr-open) .wtext h2,
    .wcard.active:not(.lyr-open) .wtext .sub{display:none}
    .wcard.active:not(.lyr-open) .card-lyrics{display:none}
  }

  .cp-title{display:none;text-align:center;padding:8px 4px 6px}
  .cpt-name{font-family:'GFS Didot','Cormorant Garamond',serif;font-size:clamp(18px,calc(var(--cardw) * .06),38px);line-height:1.22;
        letter-spacing:.06em;color:#e8eef5;overflow-wrap:anywhere;text-shadow:0 1px 8px rgba(0,0,0,.5)}

  .cpt-titlerow{padding:0 2px}
  .cpt-subrow .cpt-like svg{width:20px;height:20px}
  .cpt-subrow{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:6px}
  .cpt-sub{font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--song-text);opacity:.8;text-shadow:0 1px 6px rgba(0,0,0,.45)}
  .wcard.active:not(.lyr-open) .cp-title{display:block}

  .np-preview{display:none;flex-direction:column;align-items:center;justify-content:center;gap:3px;
        width:100%;min-height:100px;max-height:100px;overflow:hidden;padding:4px 10px;margin-top:2px;
        font:inherit;border:0;border-radius:12px;background:none;cursor:pointer;text-align:center;transition:background .2s var(--ease)}
  .np-preview:hover,.np-preview:focus-visible{background:rgba(255,255,255,.07);outline:none}

  .np-o{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-width:100%;overflow:hidden;
        font-family:'Cormorant Garamond',serif;font-size:clamp(19px,1.25vw,24px);line-height:1.25;color:#fff;
        text-shadow:0 1px 8px rgba(0,0,0,.5)}
  .np-preview.np-long .np-o{font-size:clamp(16px,1vw,19px)}
  .np-tr{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-width:100%;overflow:hidden;
        font-size:clamp(12.5px,.8vw,15px);line-height:1.3;color:var(--song-text)}

  @media (max-width:959px){
    .wcard.active:not(.lyr-open).k-bound .np-preview{display:flex}

    .wcard.active.k-bound .card-signature-lyric{display:none}
  }

  #lyricsPanel{position:relative;width:100%;flex:0 1 auto;min-height:0;
        max-height:min(76vh,900px);display:none;flex-direction:column;text-align:center;
        border-radius:18px;border:1px solid var(--glass-bd);
        background:linear-gradient(180deg, color-mix(in srgb,var(--theme) 7%, rgba(8,10,14,.34)), rgba(8,10,14,.52) 30%, rgba(8,10,14,.52) 84%, rgba(8,10,14,.32));
        box-shadow:0 18px 44px -18px rgba(0,0,0,.7);overflow:hidden}
  .lp-head{display:grid;grid-template-columns:1fr 34px;align-items:center;gap:8px;padding:12px 13px 8px;border-bottom:none}
  .lp-title{font-size:12px;font-weight:400;letter-spacing:.26em;text-transform:uppercase;color:rgba(232,238,245,.65);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lp-langrow{display:flex;align-items:center;gap:7px;padding:0 13px 10px}
  .lp-langk{flex:0 0 auto;font-family:var(--ui);font-size:11px;font-weight:500;letter-spacing:.01em;text-transform:none;color:rgba(232,238,245,.52)}
  .lp-lang{flex:0 1 auto;min-width:0;max-width:100%}
  .lp-close{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;font-size:13px;border-radius:10px;border:0;background:none;color:rgba(255,255,255,.7);cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease)}
  .lp-close:hover,.lp-close:focus-visible{background:rgba(255,255,255,.12);color:#fff;outline:none}
  .lp-scroll{overflow-y:auto;scrollbar-width:none;padding:8px 13px 13px;overscroll-behavior:contain;
        -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30px,#000 calc(100% - 30px),transparent);
        mask-image:linear-gradient(180deg,transparent 0,#000 30px,#000 calc(100% - 30px),transparent)}
  .lp-scroll::-webkit-scrollbar{display:none}
  .lp-lines{text-align:center}
  .lp-line{position:relative;padding:9px 12px;border-radius:10px;text-align:center;transition:opacity .25s var(--ease),background .25s var(--ease),transform .25s var(--ease)}
  .lp-line span{unicode-bidi:isolate}

  .lp-line .lp-o{display:block;font-family:'Cormorant Garamond',serif;font-size:clamp(20px,1.45vw,34px);line-height:1.3;color:#fbfaf7}
  .lp-line .lp-tr{display:block;font-size:clamp(13px,.92vw,20px);line-height:1.4;color:var(--lv-tr);margin-top:4px}

  #lyricsPanel.k-on .lp-line{opacity:.5;cursor:pointer}
  #lyricsPanel.k-on .lp-line.ll-past{opacity:.35}
  #lyricsPanel .lp-line.ll-active{opacity:1;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--theme) 12%,transparent),transparent);transform:scale(1.02)}
  #lyricsPanel .lp-line.ll-active::before{content:'';position:absolute;inset-inline-start:0;top:22%;bottom:22%;width:2px;border-radius:2px;background:var(--theme);box-shadow:0 0 12px var(--theme)}
  #lyricsPanel .lp-line.ll-active .lp-o{color:#fff;filter:none;text-shadow:0 1px 3px rgba(0,0,0,.8),0 0 22px color-mix(in srgb,var(--theme) 35%,transparent)}
  #lyricsPanel .lp-line.ll-active .lp-tr{color:var(--song-text)}
  #lyricsPanel .lp-line[role="button"]:focus-visible{outline:1px solid color-mix(in srgb,var(--theme) 70%,#fff);outline-offset:2px}





  .lp-wait{display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:0;padding:12px 16px 16px}
  
  body.lv-none #lyricsPanel .lp-wait{display:none}
  .lw-eq{display:flex;align-items:flex-end;gap:4px;height:22px}
  .lw-eq i{width:4px;height:7px;border-radius:2px;background:var(--theme);box-shadow:0 0 12px color-mix(in srgb,var(--theme) 60%,transparent)}
  .lw-eq i:nth-child(2){height:15px}
  .lw-eq i:nth-child(3){height:11px}
  @media (prefers-reduced-motion:no-preference){
    .k-intro .lw-eq i{height:21px;transform-origin:bottom;transform:scaleY(.24);animation:lwbar .9s ease-in-out infinite alternate}
    .k-intro .lw-eq i:nth-child(2){animation-delay:.3s}
    .k-intro .lw-eq i:nth-child(3){animation-delay:.55s}
  }
  @keyframes lwbar{from{transform:scaleY(.24)}to{transform:scaleY(1)}}
  .lw-t{font-size:12.5px;letter-spacing:.05em;color:rgba(232,238,245,.78)}

  /* wrapping flex (was fixed thirds): long labels (de AUSSPRACHE/ÜBERSETZUNG) take a
     second row whole instead of clipping letters in the 212px laptop rail */
  .lp-view{display:flex;flex-wrap:wrap;gap:4px;padding:0 13px 10px}
  .lp-seg{flex:1 1 0;min-width:max-content;min-height:29px;padding:5px 6px;font:inherit;font-size:10.5px;letter-spacing:.02em;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
        color:rgba(255,255,255,.82);border:1px solid transparent;border-radius:10px;background:rgba(255,255,255,.07);cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
  .lp-seg:hover,.lp-seg:focus-visible{background:rgba(255,255,255,.14);outline:none}
  .lp-seg:focus-visible{border-color:color-mix(in srgb,var(--theme) 70%,#fff)}
  .lp-seg[aria-pressed="true"]{background:color-mix(in srgb,var(--theme) 30%,transparent);color:#fff;border-color:color-mix(in srgb,var(--theme) 75%,transparent);font-weight:700}

  .lp-line .lp-ph{display:block;font-size:clamp(12px,.85vw,17px);font-style:italic;font-weight:300;letter-spacing:.028em;line-height:1.35;
        color:var(--lv-ph);margin-top:3px}
  body:not(.lv-o) #lyricsPanel .lp-o{display:none}
  body:not(.lv-ph) #lyricsPanel .lp-ph{display:none}
  body:not(.lv-tr) #lyricsPanel .lp-tr{display:none}
  body.lv-o:not(.lv-ph):not(.lv-tr) #lyricsPanel .lp-o{font-size:clamp(19px,1.4vw,34px)}
  body:not(.lv-o):not(.lv-ph) #lyricsPanel .lp-tr{margin-top:0;font-size:clamp(15px,1.05vw,24px);line-height:1.35}
  body:not(.lv-o).lv-ph #lyricsPanel .lp-ph{margin-top:0;font-style:normal;font-size:clamp(17px,1.15vw,22px);color:rgba(255,255,255,.9)}

  #lyricsOverlay{position:fixed;inset:0;z-index:50;display:none;flex-direction:column;
        background:var(--pan-bg,rgba(14,15,18,.97)), rgb(var(--slate,14,15,18));
        /* solid: cover art moved to .lo-cov thumbnail; no backdrop bleed behind the words */
        transform:translateY(100%);transition:transform .32s var(--ease);
        padding-top:env(safe-area-inset-top);padding-bottom:calc(env(safe-area-inset-bottom) + var(--vvb,0px))}
  
  body.lyrics-over #lyricsOverlay{display:flex}
  @media (prefers-reduced-motion:no-preference){
    body.lyrics-focus #lyricsPanel{animation:lpMorph .34s var(--ease) both}
    body.lyrics-focus #hero{animation:hqMorphOut .2s var(--ease) both}
  }
  @keyframes lpMorph{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:blur(0)}}
  @keyframes hqMorphOut{from{opacity:1}to{opacity:0}}
  #lyricsOverlay.lo-in{transform:translateY(0)}
  @media (prefers-reduced-motion:reduce){ #lyricsOverlay{transition-duration:.01ms} }
  .lo-head{display:flex;align-items:center;gap:10px;padding:12px 12px 6px}
  .lo-cov{flex:0 0 auto;width:36px;height:36px;border-radius:8px;object-fit:cover;display:block;background:rgba(255,255,255,.06);
        border:1px solid var(--glass-bd);box-shadow:0 6px 16px -8px rgba(0,0,0,.7)}
  .lo-cov:not([src]){display:none}
  .lo-title{flex:1;min-width:0;font-size:12px;font-weight:400;letter-spacing:.26em;text-transform:uppercase;color:rgba(232,238,245,.65);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lo-tools{display:flex;align-items:center;gap:2px;flex:0 0 auto}
  .lo-lang{max-width:110px}
  .lo-tool{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:11px;background:none;color:rgba(255,255,255,.72);cursor:pointer;font-size:15px}
  .lo-tool .material-symbols-outlined{font-size:21px}
  .lo-tool:hover,.lo-tool:focus-visible{background:rgba(255,255,255,.1);color:#fff;outline:none}
  .lo-copy.copied{color:var(--theme)}

  .lo-view{display:flex;justify-content:center;gap:5px;padding:2px 14px 10px;width:100%;max-width:620px;margin:0 auto}
  .lo-seg{flex:0 1 190px;min-height:38px;padding:8px;font:inherit;font-size:10.5px;letter-spacing:.02em;font-weight:600;color:rgba(255,255,255,.82);border:0;border-radius:10px;background:rgba(255,255,255,.07);cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease)}
  .lo-seg:hover,.lo-seg:focus-visible{background:rgba(255,255,255,.14);outline:none}
  .lo-seg[aria-pressed="true"]{background:color-mix(in srgb,var(--theme) 20%,transparent);color:#fff;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--theme) 52%,transparent);font-weight:700}

  .lo-scroll{flex:1;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain;padding:12px 18px 48px;
        -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 26px,#000 calc(100% - 26px),transparent);
        mask-image:linear-gradient(180deg,transparent 0,#000 26px,#000 calc(100% - 26px),transparent)}
  .lo-scroll::-webkit-scrollbar{display:none}
  .lo-lines{text-align:center;max-width:620px;margin:0 auto;padding:6vh 0 34vh}
  #lyricsOverlay .lyr-sec{margin:22px 0 6px}
  #lyricsOverlay .lyr-sec:first-child{margin-top:0}
  .lo-line{position:relative;padding:9px 12px;border-radius:12px;text-align:center;transition:opacity .25s var(--ease),transform .25s var(--ease),background .25s var(--ease)}
  .lo-line span{unicode-bidi:isolate}
  .lo-o{display:block;font-family:'Cormorant Garamond',serif;font-size:clamp(23px,6.6vw,31px);line-height:1.22;color:#fff;text-wrap:balance}
  .lo-ph{display:none;font-size:clamp(12.5px,3.6vw,14.5px);line-height:1.3;color:var(--lv-ph);margin-top:2px}
  .lo-tr{display:block;font-size:clamp(14.5px,4.1vw,17px);line-height:1.35;color:var(--lv-tr);margin-top:3px;text-wrap:balance}
  body.lyr-ph #lyricsOverlay .lo-ph{display:block}
  #lyricsOverlay.k-on .lo-line{opacity:.42;cursor:pointer}
  #lyricsOverlay.k-on .lo-line.ll-past{opacity:.26}
  #lyricsOverlay .lo-line.ll-active{opacity:1;transform:scale(1.05);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--theme) 12%,transparent),transparent)}
  #lyricsOverlay .lo-line.ll-active::before{content:'';position:absolute;inset-inline-start:0;top:22%;bottom:22%;width:2px;border-radius:2px;background:var(--theme);box-shadow:0 0 12px var(--theme)}
  #lyricsOverlay .lo-line.ll-active .lo-o{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8),0 0 22px color-mix(in srgb,var(--theme) 38%,transparent)}
  #lyricsOverlay .lo-line.ll-active .lo-tr{color:var(--song-text)}
  #lyricsOverlay .lo-line[role="button"]:focus-visible{outline:1px solid color-mix(in srgb,var(--theme) 70%,#fff);outline-offset:2px}



  .lo-wait{display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;flex:0 0 auto;padding:16px 20px 8px}
  
  body.lv-none #lyricsOverlay .lo-wait{display:none}

  body:not(.lv-o) #lyricsOverlay .lo-o{display:none}
  body:not(.lv-tr) #lyricsOverlay .lo-tr{display:none}
  body.lv-o:not(.lv-ph):not(.lv-tr) #lyricsOverlay .lo-o{font-size:clamp(27px,8vw,38px);line-height:1.18}
  body.lv-o:not(.lv-ph):not(.lv-tr) #lyricsOverlay .lo-line{padding:10px 12px}
  body:not(.lv-o):not(.lv-ph) #lyricsOverlay .lo-tr{margin-top:0;font-size:clamp(21px,6.2vw,29px);line-height:1.25;color:rgba(255,255,255,.85)}
  body:not(.lv-o).lv-ph #lyricsOverlay .lo-ph{margin-top:0;font-size:clamp(19px,5.6vw,26px);line-height:1.25;font-style:normal;color:rgba(255,255,255,.9)}
  /* short landscape phones: keep 3-4 lines in the focus band */
  @media (max-height:540px){ .lo-lines{padding:2vh 0 24vh} .lo-o{font-size:clamp(20px,4.4vh,26px)} body.lv-o:not(.lv-ph):not(.lv-tr) #lyricsOverlay .lo-o{font-size:clamp(23px,5.4vh,30px)} }

  .lo-bar{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:10px 16px 14px;border-top:1px solid rgba(255,255,255,.09);background:rgba(6,9,13,.55)}
  .lo-bar .cp-playbtn{flex:0 0 auto;width:52px;height:52px}
  .lo-bar .cp-timeline{flex:1;min-width:0}
  #lyricsOverlay .cp-playbtn .cpb-pause{display:none}
  #lyricsOverlay.k-playing .cp-playbtn .cpb-play{display:none}
  #lyricsOverlay.k-playing .cp-playbtn .cpb-pause{display:block}

  @media (min-width:960px){ body.lyrics-over #lyricsOverlay{display:none} }
  #sideRail{position:fixed;inset-inline-start:var(--sidex,clamp(16px,2vw,44px));z-index:12;
        top:calc(var(--barH,64px) + 10px + (100svh - var(--barH,64px) - var(--railRes,var(--dockH,72px)) - 20px)/2);transform:translateY(-50%);
        width:var(--abp-w,var(--unw));display:none;flex-direction:column;gap:12px;
        max-height:min(84svh,calc(100svh - var(--barH,64px) - var(--railRes,var(--dockH,72px)) - 20px))}
  #startRail{position:fixed;inset-inline-end:var(--sidex,clamp(40px,5vw,96px));z-index:12;
        top:calc(var(--barH,64px) + 10px + (100svh - var(--barH,64px) - var(--railRes,var(--dockH,72px)) - 20px)/2);transform:translateY(-50%);
        width:var(--herow,min(27vw,380px));display:none;flex-direction:column;gap:12px;
        max-height:min(84svh,calc(100svh - var(--barH,64px) - var(--railRes,var(--dockH,72px)) - 20px))}
  #aboutSong,#upnext{display:flex;flex-direction:column;gap:8px;padding:16px 14px 14px;min-height:0;
        border-radius:18px;border:1px solid var(--glass-bd)}
  #aboutSong{flex:1 1 auto;overflow:hidden}
  #upnext{flex:0 0 auto}
  #sideRail{gap:12px}
  .un-head{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(232,238,245,.9);padding:0 6px 10px}
  .un-item{position:relative;isolation:isolate;display:flex;align-items:center;gap:12px;width:100%;padding:9px;border:1px solid transparent;border-radius:12px;background:none;cursor:pointer;text-align:start;color:#fff}
  .un-item::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
        background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.22);
        opacity:0;transition:opacity .2s var(--ease)}
  .un-item:hover,.un-item:focus-visible{outline:none}
  .un-item:hover::before,.un-item:focus-visible::before{opacity:1}
  .un-item:hover .un-t,.un-item:focus-visible .un-t{color:#fff}
  .un-covw{position:relative;flex:0 0 auto;width:56px;height:56px;border-radius:8px;box-shadow:0 6px 16px -6px rgba(0,0,0,.7)}
  .un-chev{flex:0 0 auto;width:16px;height:16px;margin-inline-start:2px;fill:none;stroke:currentColor;stroke-width:2.4;
        stroke-linecap:round;stroke-linejoin:round;opacity:.4;transition:opacity .2s var(--ease),transform .2s var(--ease)}
  html[dir="rtl"] .un-chev{transform:scaleX(-1)}
  .un-item:hover .un-chev,.un-item:focus-visible .un-chev{opacity:.95;transform:translateX(3px)}
  html[dir="rtl"] .un-item:hover .un-chev,html[dir="rtl"] .un-item:focus-visible .un-chev{transform:scaleX(-1) translateX(3px)}
  .un-cov{display:block;width:100%;height:100%;border-radius:8px;object-fit:cover;filter:brightness(1);transition:filter .18s var(--ease)}

  .un-item:hover .un-cov,.un-item:focus-visible .un-cov{filter:brightness(.8)}

  .cpt-like{display:inline-flex;margin:0;padding:5px;border:0;background:none;cursor:pointer;line-height:0;border-radius:8px}
  .cpt-like svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2;transition:fill .2s var(--ease),stroke .2s var(--ease)}
  .cpt-like:hover svg,.cpt-like:focus-visible svg{stroke:#fff}
  .cpt-like:focus-visible{outline:none;background:rgba(255,255,255,.1)}
  .cpt-like[aria-pressed="true"] svg{fill:var(--theme);stroke:var(--theme);filter:brightness(1.25)}

  #heartPrompt{position:fixed;z-index:46;width:228px;padding:14px;border-radius:14px;text-align:center;color:#fff;
        background:rgba(var(--navy),.94);border:1px solid color-mix(in srgb,var(--theme) 45%,rgba(255,255,255,.14));
        -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
        box-shadow:0 14px 40px rgba(0,0,0,.5);animation:hpSpring .45s var(--ease-snap) both}
  #heartPrompt.hp-closing{animation:hpOut .28s ease both}
  .hp-title{font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--theme);filter:brightness(1.35)}
  .hp-sub{font-size:11.5px;opacity:.75;margin-top:5px;letter-spacing:.03em}
  .hp-links{display:flex;justify-content:center;gap:10px;margin-top:11px}
  .hp-link{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
        border:1px solid rgba(255,255,255,.22);color:#e9eef4;transition:border-color .18s var(--ease),color .18s var(--ease),transform .18s var(--ease)}
  .hp-link svg{width:21px;height:21px;fill:currentColor}
  .hp-link:hover,.hp-link:focus-visible{border-color:var(--theme);outline:none;filter:brightness(1.12)}
  /* brand colors full-time (matches Listen On + connect-links precedent) */
  .hp-link[data-platform="spotify"]{color:#1ED760}
  .hp-link[data-platform="apple"]{color:#FA455C}
  .hp-link[data-platform="youtube"]{color:#ff0000;--yt-tri:#fff}
  .hp-link[data-platform="ytmusic"]{color:#ff0000;--pi-in:#fff}
  .hp-later{font:inherit;background:none;border:0;cursor:pointer;display:inline-block;margin-top:11px;padding:4px 6px;border-radius:6px;
        font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);transition:color .18s var(--ease)}
  .hp-later:hover,.hp-later:focus-visible{color:#fff}
  .cpt-like.hp-burst svg{animation:hpPop .5s ease}
  .hp-burst-layer{position:fixed;z-index:47;pointer-events:none;width:0;height:0}
  .hp-burst-layer svg{position:absolute;left:-6px;top:-9px;width:12px;height:12px;fill:var(--theme)}
  .hp-burst-layer svg:nth-child(1){animation:hpFloat1 .9s ease-out both}
  .hp-burst-layer svg:nth-child(2){width:10px;height:10px;fill:#e8b4c8;animation:hpFloat2 1.05s ease-out both}
  .hp-burst-layer svg:nth-child(3){width:9px;height:9px;fill:#7fb3e8;animation:hpFloat3 .8s ease-out both}
  .hp-burst-layer.hp-burst-cup svg{width:14px;height:14px;left:-7px;top:-10px;fill:#ffdd00}
  .hp-burst-layer.hp-burst-cup svg:nth-child(2){width:12px;height:12px;fill:#ffe97a}
  .hp-burst-layer.hp-burst-cup svg:nth-child(3){width:11px;height:11px;fill:#fff}
  @keyframes hpSpring{0%{opacity:0;transform:translateY(14px) scale(.7)}60%{opacity:1;transform:translateY(-4px) scale(1.05)}100%{opacity:1;transform:none}}
  @media (min-width:960px){
    #heartPrompt{width:312px;padding:20px 18px 16px}
    .hp-title{font-size:12.5px;letter-spacing:.16em}
    .hp-sub{font-size:13.5px;margin-top:7px}
    .hp-links{gap:12px;margin-top:14px}
    .hp-link{width:48px;height:48px}
    .hp-link svg{width:24px;height:24px}
    .hp-later{margin-top:13px;padding:6px 10px;font-size:11px}
  }
  @keyframes hpOut{0%{opacity:1;transform:none}100%{opacity:0;transform:translateY(12px) scale(.85) rotate(2deg)}}
  @keyframes hpPop{0%{transform:scale(1)}35%{transform:scale(1.5) rotate(-8deg)}60%{transform:scale(.9) rotate(6deg)}100%{transform:scale(1)}}
  @keyframes hpFloat1{0%{opacity:1;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(-22px,-46px) scale(1.15) rotate(-18deg)}}
  @keyframes hpFloat2{0%{opacity:1;transform:translate(0,0) scale(.5)}100%{opacity:0;transform:translate(4px,-58px) scale(1.3) rotate(10deg)}}
  @keyframes hpFloat3{0%{opacity:1;transform:translate(0,0) scale(.55)}100%{opacity:0;transform:translate(24px,-42px) scale(1.05) rotate(22deg)}}

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  
  
  .un-item-now{background:rgba(255,255,255,.16)}
  .un-dur{margin-inline-start:auto;flex:0 0 auto;font-size:12.5px;color:rgba(232,238,245,.72);font-variant-numeric:tabular-nums}
  .un-viewall{position:relative;isolation:isolate;margin:12px 2px 0;padding:12px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:none;
        color:rgba(232,238,245,.9);font:inherit;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;
        cursor:pointer;transition:color .2s var(--ease)}
  .un-viewall::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
        background:rgba(255,255,255,.1);border:1px solid color-mix(in srgb, var(--theme) 55%, rgba(255,255,255,.28));
        box-shadow:0 0 14px -7px var(--song-glow);opacity:0;transition:opacity .2s var(--ease)}
  .un-viewall:hover,.un-viewall:focus-visible{color:#fff;outline:none}
  .un-viewall:hover::before,.un-viewall:focus-visible::before{opacity:1}
    .un-eq{position:absolute;inset:0;display:none;align-items:flex-end;justify-content:center;gap:2.5px;padding-bottom:11px;border-radius:8px;background:rgba(0,0,0,.45)}
  .un-eq i{width:3px;height:8px;border-radius:1.5px;background:#fff}
  .un-eq i:nth-child(1){height:13px}
  .un-eq i:nth-child(3){height:16px}
  #upnext.k-on .un-eq{display:flex}
  #upnext.k-on .un-item-now .un-cov{filter:none}
  #upnext.k-on .un-item-now .un-t{color:#fff}
  @media (prefers-reduced-motion:no-preference){
    #upnext.k-on .un-eq i{height:17px;transform-origin:bottom;transform:scaleY(.35);animation:uneq .9s ease-in-out infinite alternate}
    #upnext.k-on .un-eq i:nth-child(2){animation-delay:.3s}
    #upnext.k-on .un-eq i:nth-child(3){animation-delay:.55s}
  }
  @keyframes uneq{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
  .un-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
  .un-t{font-size:15px;font-weight:400;line-height:1.3;overflow-wrap:anywhere;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
  .un-s{font-size:12px;letter-spacing:.04em;color:rgba(232,238,245,.68);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .by-inner{max-width:1440px;margin:0 auto;padding:0 clamp(24px,4vw,64px);text-align:center}
  .by-head{margin:0 0 26px;font-size:12px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.72)}
  .by-quote{max-width:640px;margin:0 auto}
  .by-all{margin-top:40px;display:inline-flex;align-items:center;font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#fff;
        padding:13px 28px;border-radius:999px;cursor:pointer;border:1px solid color-mix(in srgb,var(--theme) 45%,transparent);
        background:color-mix(in srgb,var(--theme) 14%,transparent);transition:background .2s var(--ease),border-color .2s var(--ease)}
  .by-all:hover,.by-all:focus-visible{background:color-mix(in srgb,var(--theme) 26%,transparent);border-color:color-mix(in srgb,var(--theme) 70%,transparent);outline:none}
  .bq-text{margin:0;font-family:'Cormorant Garamond',serif;font-size:clamp(20px,1.6vw,27px);line-height:1.35;color:rgba(255,255,255,.9)}
  .bq-text::before{content:'\201C';display:block;font-size:2.2em;line-height:.6;color:var(--theme);filter:brightness(1.5);margin-bottom:10px}
  .bq-by{margin-top:16px;font-size:10px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.55)}

  @media (min-width:960px){
    #startRail,#sideRail{display:flex}
    body.grid-open :is(#startRail,#sideRail),body.about-open :is(#startRail,#sideRail),body:has(.wcard.lyr-open) :is(#startRail,#sideRail),body.lyrics-over :is(#startRail,#sideRail){display:none}
  }

  @media (min-width:960px){
    /* hero = live-lyrics surface only (idle quote removed in 2026-08 trim): hidden until a session engages */
    #hero.k-intro,#hero:has(.hero-quote.hq-live){display:flex}
    body.grid-open #hero,body.about-open #hero,body:has(.wcard.lyr-open) #hero,body.lyrics-over #hero{display:none!important;opacity:0}
  }

  @media (min-width:960px){
    body{overflow:visible}
    body.lyrics-focus #hero{display:none!important}
    body.lyrics-focus #lyricsPanel{display:flex}
    body.grid-open #lyricsPanel,body.about-open #lyricsPanel,body:has(.wcard.lyr-open) #lyricsPanel{display:none}
    .wcard.active:not(.lyr-open) .wtext .tag,
    .wcard.active:not(.lyr-open) .wtext h2,
    .wcard.active:not(.lyr-open) .wtext .sub{display:none}

    .wcard.active:not(.lyr-open) .card-hero,
    .wcard.active:not(.lyr-open) .card-lyrics{display:none}
    .wcard.active:not(.lyr-open) .wtext{display:flex;flex-direction:column;gap:clamp(11px,1.8vh,19px);padding:clamp(13px,2vh,21px) clamp(14px,calc(var(--cardw)*.055),32px) clamp(19px,2.9vh,32px);color:#e8eef5}
    .wcard.active:not(.lyr-open) .card-player{gap:clamp(12px,1.9vh,18px);padding:0}
    .wcard.active:not(.lyr-open) .cp-title{padding:0}
    .wcard.active:not(.lyr-open) .cpt-name{letter-spacing:.13em}
    .wcard.active:not(.lyr-open) .card-actions{align-items:flex-start;gap:14px;margin-top:10px;padding:0}
    .wcard.active:not(.lyr-open) .card-avail-lbl{margin-top:0}
    .wcard.active:not(.lyr-open) .card-listen{justify-content:flex-start;gap:12px 22px}
    .wcard.active:not(.lyr-open) .card-plat{width:auto;height:auto;font-size:12.5px;font-weight:600}
    .wcard.active:not(.lyr-open) .card-player{display:flex}
    .wcard.active:not(.lyr-open) .card-player .cp-row{display:none}

    .wcard.active:not(.lyr-open) .art{cursor:pointer}

    /* Cover as secondary play control: click toggles (see app.js); on hover the
       artwork dims slightly and the centered translucent play/pause appears. */
    .wcard.active:not(.lyr-open) .art-play{opacity:0;transform:scale(.82);pointer-events:none}
    @media (hover:hover){
      .wcard.active:not(.lyr-open) .art:hover .art-play,
      .wcard.active:not(.lyr-open) .art-play:focus-visible{opacity:1;transform:none;pointer-events:auto}
      .wcard.active:not(.lyr-open) .art:hover img{filter:brightness(.86) saturate(1.02)}
      
    }
  }

  @media (min-width:960px){
    :root{ --sidex:clamp(40px,5vw,96px); --sidew:clamp(252px,21.5vw,430px);
      --lpw:var(--sidew); --lpgap:clamp(24px,2.5vw,44px);
      --lpx:var(--sidex); --herow:var(--sidew);
      --unw:var(--sidew);
      --unx:calc(100vw - var(--sidex) - var(--unw)); }
    body.lyrics-focus #hero{display:none!important}
    body.lyrics-focus #lyricsPanel{display:flex}
    /* full lyrics: the player card stays put (no slide toward the lyrics panel) */
    body.lyrics-focus #lyricsPanel{
      width:100%;
      max-height:min(78svh, calc(100svh - var(--barH) - var(--dockH) - 16px));
    }
    body.lyrics-focus #startRail,body.lyrics-focus #sideRail{display:flex}
    body.lyrics-focus:not(.queue-open) #upnext{display:none}
    body.lyrics-focus.queue-open #upnext,body.lyrics-focus.queue-open #aboutSong{background:rgba(8,10,14,.92)}
    body.lyrics-focus #dock,body.lyrics-focus .wbar{opacity:.45}
    body.lyrics-focus #dock:hover,body.lyrics-focus #dock:focus-within,body.lyrics-focus .wbar:hover,body.lyrics-focus .wbar:focus-within{opacity:1}
  }

  @media (min-width:960px){
    /* One visible source of truth: on desktop the cover's own typography is
       legible, so the HTML metadata is kept for screen readers only. Mobile
       (below 960px) still shows it, where the artwork may crop. */
    .wcard.active:not(.lyr-open) .cp-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;pointer-events:none}
    .wcard.active:not(.lyr-open) .art::after{display:none}
    .wcard.active:not(.lyr-open) .card-badge{top:12px;bottom:auto}
    .wcard.active:not(.lyr-open) .wtext{gap:clamp(8px,1.2vh,13px);padding-top:clamp(10px,1.4vh,15px)}
  }

  @media (min-width:960px){ .showcase-center{transition:none} }
  @media (min-width:960px) and (prefers-reduced-motion:no-preference){ .showcase-center{transition:transform .35s var(--ease)} }

  body:not(:has(.wcard.lyr-open)) .wcard:not(.active){opacity:0;pointer-events:none}

  body:not(:has(.wcard.lyr-open)) .wcard:not(.active) .wtext{display:none}

  #showcase{position:relative;z-index:10;height:100vh;height:100svh;display:block;
            overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;
            padding-top:calc(var(--barH) + 8px);
            padding-bottom:calc(var(--dockH) + 12px);transition:opacity .45s var(--ease)}
  #showcase::-webkit-scrollbar{display:none}

  .showcase-center{min-height:100%;display:flex;flex-direction:column;justify-content:center;justify-content:safe center;align-items:center}

  #showcase:has(.wcard.lyr-open) .showcase-center{justify-content:flex-start}


  html.measuring .wcard{transition:none}

  :root:not(.measured) #showcase{padding-top:calc(46px + env(safe-area-inset-top));padding-bottom:clamp(92px,12svh,150px)}

  .scroller{display:flex;gap:clamp(14px,4vw,40px);width:100%;overflow-x:auto;overflow-y:hidden;touch-action:pan-x pan-y;
            scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
            padding:0 calc(50vw - var(--cardw)/2);align-items:center}
  .scroller::-webkit-scrollbar{display:none}


  .wcard{position:relative;scroll-snap-align:center;flex:0 0 var(--cardw);min-width:0;text-align:center;border-radius:26px;padding:0;
         transition:transform .45s var(--ease),opacity .45s var(--ease),background .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease),flex-basis .5s var(--ease),max-height .5s var(--ease);
         opacity:.5;transform:scale(.86);border:1px solid transparent}

  .wcard.active{opacity:1;transform:scale(1);
            background:var(--pan-bg);
            border-color:var(--glass-bd);
            -webkit-backdrop-filter:var(--pan-blur);backdrop-filter:var(--pan-blur);
            box-shadow:0 30px 80px rgba(0,0,0,.5)}
  
  .wcard .art{width:100%;aspect-ratio:1;border-radius:18px;overflow:hidden;
              box-shadow:0 30px 70px -20px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.1);
              background:linear-gradient(135deg,#1b2434,#0a0e14)}

  
  .wcard.active .art{border-radius:25px 25px 0 0;
              box-shadow:0 16px 44px -26px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.1)}

  .wcard.active.lyr-open .art{border-radius:6px}

  .art img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .6s var(--ease);-webkit-user-drag:none;user-select:none}
  .art img.ld{opacity:1}

  .art-lyric{position:absolute;left:14px;right:14px;bottom:12px;z-index:3;pointer-events:none;text-align:center;
        display:flex;flex-direction:column;gap:2px;
        text-shadow:0 1px 4px rgba(0,0,0,.85),0 2px 14px rgba(0,0,0,.7);
        opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
  .al-o{font-family:'Cormorant Garamond',serif;font-size:clamp(15px,calc(var(--cardw)*.052),21px);line-height:1.3;color:#fff}
  .al-o:lang(el){font-family:'GFS Didot','Cormorant Garamond',serif}
  .al-tr{font-family:var(--disp);font-size:clamp(11px,calc(var(--cardw)*.034),13px);line-height:1.35;color:var(--song-text)}
  .art-lyric.on{opacity:1;transform:none}
  .wcard.lyr-open .art-lyric,body.lyrics-focus .art-lyric,body.lyrics-over .art-lyric{display:none}
  @media (min-width:960px){ .art-lyric{display:none} .art.k-fullscreen-video:fullscreen .art-lyric{display:flex} }
  .art.k-fullscreen-video:fullscreen .art-lyric,.art.k-fullscreen-video:-webkit-full-screen .art-lyric{z-index:11;bottom:6vh}
  .art.k-fullscreen-video:fullscreen .al-o,.art.k-fullscreen-video:-webkit-full-screen .al-o{font-size:clamp(20px,3vw,34px)}
  .art.k-fullscreen-video:fullscreen .al-tr,.art.k-fullscreen-video:-webkit-full-screen .al-tr{font-size:clamp(13px,1.6vw,18px)}
  @media (prefers-reduced-motion:reduce){ .art-lyric{transition:none;transform:none} }
  
  .wtext{padding:13px 15px 15px}

  .load-msg{margin:auto;text-align:center;color:#f4efe7;display:flex;flex-direction:column;align-items:center;gap:18px}
  .load-msg p{font-family:'Cormorant Garamond',serif;font-size:clamp(18px,3vh,26px)}
  .load-retry{font:inherit;cursor:pointer;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:#fff;
    padding:12px 24px;min-height:46px;border-radius:999px;border:1px solid rgba(255,255,255,.32);background:rgba(255,255,255,.08)}
  .load-retry:hover,.load-retry:focus-visible{background:rgba(255,255,255,.18);border-color:#fff;outline:none}

  .wcard.active .wtext{border-radius:0 0 25px 25px}
  .wcard.active:not(.lyr-open) .art::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 72%,rgba(var(--slate),.85) 100%);pointer-events:none}
  
  .art.k-fullscreen-video::after{display:none}

  .wcard .tag{margin-top:0;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--theme);overflow-wrap:anywhere;
              filter:brightness(2);font-weight:700;text-shadow:0 0 3px rgba(0,0,0,.96),0 1px 4px rgba(0,0,0,.96),0 2px 16px rgba(0,0,0,.85)}

  .wcard h2{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(22px,min(4.4vh,7.4vw),46px);line-height:1.05;margin-top:8px;
            color:#fff;overflow-wrap:anywhere;text-shadow:0 1px 3px rgba(0,0,0,.92),0 2px 10px rgba(0,0,0,.8),0 2px 26px rgba(0,0,0,.7)}
  .wcard .sub{font-size:11px;letter-spacing:.26em;text-transform:uppercase;opacity:.95;margin-top:6px;overflow-wrap:anywhere;text-shadow:0 1px 3px rgba(0,0,0,.9),0 1px 10px rgba(0,0,0,.8)}

  .card-badge{position:absolute;bottom:11px;inset-inline-start:11px;z-index:3;
        font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;
        padding:5px 10px;border-radius:999px;white-space:nowrap;
        background:color-mix(in srgb, var(--theme) 82%, rgba(0,0,0,.2));
        border:1px solid rgba(255,255,255,.28);box-shadow:0 6px 18px -8px rgba(0,0,0,.7),0 0 16px -4px var(--theme)}

  .card-cta{position:absolute;left:50%;top:calc(var(--cardw) - 56px);transform:translateX(-50%);z-index:3;
        display:none;align-items:center;gap:7px;cursor:pointer;font:inherit;white-space:nowrap;
        font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#fff;
        padding:9px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.24);
        background:color-mix(in srgb, var(--theme) 66%, rgba(8,10,14,.5));
        -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
        box-shadow:0 10px 26px -10px rgba(0,0,0,.7)}
  .card-cta svg{width:14px;height:14px;fill:currentColor}
  .wcard:not(.active) .card-cta{display:inline-flex;-webkit-backdrop-filter:none;backdrop-filter:none}
  @media (hover:hover){ .wcard:not(.active) .card-cta:hover{background:var(--theme);border-color:transparent} }
  @media (max-width:959px){ .card-cta{display:none !important} }

  .card-actions{display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:center;align-items:center;gap:11px;margin-top:13px;transition:opacity .4s var(--ease)}
  .wcard:not(.active) .card-actions{opacity:0;pointer-events:none}

  .card-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font:inherit;white-space:nowrap;
    font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:#fff;
    padding:11px 18px;min-height:44px;border-radius:13px;border:1px solid transparent;background:rgba(255,255,255,.1);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    transition:background .2s var(--ease),transform .14s var(--ease)}
  .card-btn:hover,.card-btn:focus-visible{outline:none}
  .card-btn:active{transform:scale(.96)}
  .card-btn svg{width:17px;height:17px;fill:currentColor;flex:0 0 auto}

  .card-listen{display:inline-flex;align-items:center;justify-content:center;gap:12px 16px;flex-wrap:wrap}
  .card-plat{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:4px;text-decoration:none;
    font-family:var(--ui);color:rgba(255,255,255,.9);--brand:#fff;
    background:none;border:0;font-size:10.5px;font-weight:500;
    transition:color .22s var(--ease),transform .14s var(--ease)}
  .card-plat:hover,.card-plat:focus-visible{color:var(--brand)}
  .card-plat:active{transform:scale(.96)}
  .card-plat-ic{display:inline-flex;width:21px;height:21px}
  .card-plat-ic svg{width:100%;height:100%;fill:currentColor}
  .card-plat[data-platform="spotify"]{--brand:#1ED760}
  .card-plat[data-platform="apple"]{--brand:#fff}
  .pi-in{fill:var(--pi-in,transparent)}
  .card-plat[data-platform="ytmusic"]:hover,.card-plat[data-platform="ytmusic"]:focus-visible{--pi-in:#fff}
  .card-plat[data-platform="youtube"]{--brand:#ff0000}
  .card-plat[data-platform="ytmusic"]{--brand:#ff0000}
  .yt-tri{fill:var(--yt-tri,transparent)}
  .card-plat[data-platform="youtube"]:hover,.card-plat[data-platform="youtube"]:focus-visible{--yt-tri:#fff}
  .card-plat[aria-disabled="true"]{display:none}

  .card-hero{display:flex;flex-direction:column;align-items:center;gap:11px;width:100%;max-width:420px}
  .card-signature-lyric{margin:0;max-width:32ch;text-align:center;text-shadow:0 1px 4px rgba(0,0,0,.9),0 1px 12px rgba(0,0,0,.72)}
  .card-lyric-o{display:block;font-family:'Cormorant Garamond',serif;font-size:clamp(17px,2.2vh,21px);line-height:1.3;color:#fff}
  .card-lyric-tr{display:block;margin-top:4px;font-size:12px;line-height:1.4;color:rgba(255,255,255,.68)}
  .card-avail-lbl{font-family:var(--ui);font-size:9px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:rgba(232,238,245,.4);
        text-shadow:0 1px 6px rgba(0,0,0,.7)}

  .wcard.lyr-open .card-hero,.wcard.lyr-open .card-avail-lbl{display:none}
  @media (min-width:960px){
    body.__retired .wcard .card-avail-lbl,
    body.__retired .wcard .card-listen{display:none}
  }

  @media (max-width:959px){ .wcard.active:not(.lyr-open) .art-play{opacity:0;pointer-events:none} }

  .lb-t-back{display:none}
  .card-lyrics .lb-ic-back{display:none;font-size:17px}
  .card-lyrics .lb-ic-lyrics{font-size:18px}

  .arrow{position:fixed;top:50%;transform:translateY(-50%);z-index:20;width:52px;height:52px;border-radius:50%;
         border:1px solid rgba(255,255,255,.42);background:rgba(255,255,255,.14);color:#fff;cursor:pointer;

         direction:ltr;unicode-bidi:isolate;
         box-shadow:0 8px 26px -10px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.18);
         transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
         -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);display:none;align-items:center;justify-content:center;font-size:21px}
  .arrow:hover{border-color:rgba(255,255,255,.7)}
  .arrow.prev{left:24px}.arrow.next{right:24px}

  .arrow.gone{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s var(--ease)}
  @media (max-width:959px) and (hover:hover){ .arrow{display:flex} }
  /* 2026: swipe retired; phones switch songs via the transport ⏭ (cp-tnext) and the grid */
  @media (max-width:959px) and (hover:none){
    .arrow,.cp-prev,.cp-tprev{display:none !important}
    .wcard.active:not(.lyr-open) .card-player .cpc-c{gap:6px}
    .wcard.active:not(.lyr-open) .card-player .cpc-c .k-tool{min-width:44px;min-height:44px}
  }

  body.loaded .arrow.prev{animation:arrowNudgeL 1.5s var(--ease) 1s 2}
  body.loaded .arrow.next{animation:arrowNudgeR 1.5s var(--ease) 1s 2}


  #dock{position:fixed;left:50%;right:auto;bottom:calc(14px + env(safe-area-inset-bottom) + var(--vvb,0px));
        transform:translateX(-50%);z-index:30;display:flex;justify-content:center;width:auto;max-width:calc(100vw - 16px);
        overflow:hidden;border:1px solid var(--glass-bd);border-radius:999px;
        background:linear-gradient(180deg, rgba(var(--slate),calc(var(--glass)*.72)), rgba(var(--slate),calc(var(--glass)*.8)) 16%, rgba(var(--slate),calc(var(--glass)*.8)) 84%, rgba(var(--slate),calc(var(--glass)*.72)));
        box-shadow:0 18px 40px -16px rgba(0,0,0,.6);
        transition:opacity .35s var(--ease),transform .35s var(--ease)}
  
  body.grid-open #dock,body.about-open #dock{opacity:0;transform:translateX(-50%) translateY(160%);pointer-events:none}
  #dock .task-inner{display:flex;align-items:stretch;width:auto;padding:0}
  #dock .task-item{flex:0 0 auto;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;
        min-height:44px;padding:8px 18px;cursor:pointer;border:none;background:none;color:#fff;text-decoration:none;
        transition:background .2s var(--ease)}
  #dock .task-item:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:-3px}

  #dock #taskFollow .ti-lbl,#dock #taskContact .ti-lbl,#dock #taskDonate .ti-lbl{transition:color .24s var(--ease)}
  /* vestigial expanded-state label whitening removed (aria-expanded is permanently true
     since the About-rail merge) — labels follow the dock ink in both skies; the
     brand-colored .cl-i icons below keep their aria-expanded hooks. */
  #dock #taskFollow[aria-expanded="true"] .ti-lbl,
  #dock #taskContact[aria-expanded="true"] .ti-lbl,
  #dock #taskDonate[aria-expanded="true"] .ti-lbl{filter:none}
  #dock #taskFollow[aria-expanded="true"] .cl-instagram{color:#e1306c}
  #dock #taskFollow[aria-expanded="true"] .cl-youtube{color:#ff0000;--yt-tri:#fff}
  #dock #taskFollow[aria-expanded="true"] .cl-spotify{color:#1ED760}

  #dock #taskDonate.hp-burst .ti-lbl{animation:donateNudge .42s var(--ease)}
  @keyframes donateNudge{0%{opacity:.9;transform:none}45%{opacity:1;transform:translateY(-1.5px)}100%{opacity:.9;transform:none}}
  @media (prefers-reduced-motion:reduce){ #dock #taskDonate.hp-burst .ti-lbl{animation:none} }

  #dock #taskFollow[aria-expanded="true"] .cl-i{opacity:1}
  #dock .ti-cluster{display:flex;flex-direction:row;align-items:center;gap:0}
  #dock .ti-cluster .cl-i{display:flex;align-items:center;justify-content:center;color:#fff;opacity:.82;
        padding:5px;border-radius:11px;transition:color .2s var(--ease),opacity .2s var(--ease)}
  #dock .ti-cluster .cl-i svg{width:29px;height:29px;fill:currentColor;display:block}

  #dock .task-item .ti-lbl{font-family:var(--ui);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#fff;
        white-space:nowrap;max-width:none;transition:color .24s var(--ease),filter .24s var(--ease)}
  #dock .task-item .ti-txt{display:flex;align-items:center;justify-content:center;min-width:0}
  #dock .task-item[aria-disabled="true"]{opacity:.4;pointer-events:none}

  @media (min-width:960px){
    #dock{bottom:18px}
    #dock .task-inner{padding:0}
    #dock .task-item{padding:clamp(11px,1.5vh,16px) clamp(19px,calc(var(--cardw)*.053),34px)}
    #dock .task-item:first-child{padding-inline-start:clamp(28px,calc(var(--cardw)*.078),48px)}
    #dock .task-item:last-child{padding-inline-end:clamp(28px,calc(var(--cardw)*.078),48px)}
    #dock .task-item .ti-lbl{font-size:clamp(12.5px,calc(var(--cardw)*.035),18px);font-weight:400;letter-spacing:.22em}
    #dock .ti-cluster{gap:clamp(9px,calc(var(--cardw)*.025),16px)}
    #dock .ti-cluster .cl-i svg{width:clamp(29px,calc(var(--cardw)*.075),40px);height:clamp(29px,calc(var(--cardw)*.075),40px)}
  }


  @media (hover:hover){

    #dock .cl-i:hover{opacity:1}
    #dock .cl-instagram:hover{color:#e1306c}
    #dock .cl-tiktok:hover{color:#fff;filter:drop-shadow(-1.5px -1px 0 #25F4EE) drop-shadow(1.5px 1px 0 #FE2C55)}
    #dock .cl-youtube:hover{color:#ff0000;--yt-tri:#fff}
    #dock .cl-spotify:hover{color:#1ED760}
    #dock #taskContact:hover .ti-lbl{filter:none}
    #dock .task-item:hover{background:rgba(255,255,255,.09)}
    #dock .task-item:hover .ti-lbl{color:#fff;filter:none}
  }
  #dock .task-item:active .ti-lbl{color:#fff;filter:none}
  #dock .cl-instagram:active,#dock .cl-instagram:focus-visible{color:#e1306c}
  #dock .cl-youtube:active,#dock .cl-youtube:focus-visible{color:#ff0000;--yt-tri:#fff}
  #dock .cl-spotify:active,#dock .cl-spotify:focus-visible{color:#1ED760}
  #dock .cl-tiktok:active,#dock .cl-tiktok:focus-visible{color:#fff;filter:drop-shadow(-1.5px -1px 0 #25F4EE) drop-shadow(1.5px 1px 0 #FE2C55)}
  #dock #taskContact{transition:opacity .24s var(--ease)}
  #dock #taskContact:active{background:none;transform:none;opacity:.72}
  #dock #taskContact .ti-lbl{transition:color .28s var(--ease),filter .28s var(--ease)}

  #dock .task-sep{flex:0 0 1px;align-self:center;width:1px;height:22px;background:rgba(255,255,255,.16)}


  @media (max-width:959px){
    #dock .task-item{padding:11px 17px;min-height:0;gap:0}
    #dock #taskAbout .ti-lbl,#dock #taskFollow .ti-lbl,#dock #taskContact .ti-lbl,#dock #taskDonate .ti-lbl{display:inline-block;font-size:9px}
    #dock #taskAbout,#dock #taskFollow,#dock #taskContact,#dock #taskDonate{padding:11px 12px}
    #dock .task-item .ti-lbl{display:none}
    #dock .ti-cluster{gap:0}
    #dock .ti-cluster .cl-i{padding:8px}
    #dock .ti-cluster .cl-i svg{width:29px;height:29px}
  }


  body.tasks-top #dock{display:none}
  /* About rail is always on — top nav keeps Lyrics only; the mobile dock still carries these */
  .wnav2 .task-inner{display:none}
  .wnav2 .task-item{display:flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;padding:8px 12px;border-radius:9px;color:rgba(232,238,245,.66);
        text-shadow:0 1px 10px rgba(0,0,0,.55);transition:color .2s var(--ease)}
  .wnav2 .task-item .ti-lbl{font-family:var(--disp);font-size:12.5px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:inherit;white-space:nowrap}
  .wnav2 .task-item:hover,.wnav2 .task-item[aria-expanded="true"]{color:#fff}
  .wnav2 .task-item:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:2px}
  /* One nav family: text = go somewhere. Shared gold start-edge bar (lyrics-panel motif) for hover/active. */
  .wnav-link,.wnav2 .task-item{position:relative}
  .wnav-link::after,.wnav2 .task-item::after{content:'';position:absolute;inset-inline-start:2px;top:26%;bottom:26%;width:2px;border-radius:2px;
        background:var(--gold);box-shadow:0 0 10px var(--gold);
        transform:scaleY(0);opacity:0;transition:transform .18s var(--ease),opacity .18s var(--ease)}
  .wnav-link:hover::after,.wnav-link:focus-visible::after,
  .wnav2 .task-item:hover::after,.wnav2 .task-item:focus-visible::after,.wnav2 .task-item[aria-expanded="true"]::after,
  .wnav2 .task-item[aria-current="true"]::after,body.lyrics-focus #navLyrics::after{transform:scaleY(1);opacity:1}
  .wnav2 .task-item[aria-current="true"],body.lyrics-focus #navLyrics{color:#fff}
  .wnav-link:active,.wnav2 .task-item:active{transform:translateY(1px)}
  @media (prefers-reduced-motion:reduce){ .wnav-link::after,.wnav2 .task-item::after{transition:none} }
  .lf-pills a .bi img{width:16px;height:16px;display:block;border-radius:22%}
  .wnav2 .ti-cluster{display:flex;align-items:center;gap:6px}
  .wnav2 .ti-cluster .cl-i{display:flex;align-items:center;justify-content:center}
  .wnav2 .ti-cluster .cl-i svg{width:18px;height:18px;fill:currentColor;display:block}


  #grid{position:fixed;inset:0;z-index:25;overflow-y:auto;-webkit-overflow-scrolling:touch;
        background:rgba(6,9,13,.86);-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);
        padding:calc(84px + env(safe-area-inset-top)) clamp(16px,5vw,40px) calc(40px + env(safe-area-inset-bottom));
        opacity:0;visibility:hidden;transition:opacity .45s var(--ease)}
  #grid.show{opacity:1;visibility:visible}
  
  #grid h2{text-align:center;font-size:12px;letter-spacing:.4em;text-transform:uppercase;color:var(--red);margin-bottom:30px;font-weight:600}

  .gridwrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,42vw),320px));justify-content:center;
            gap:clamp(16px,4vw,30px);max-width:1080px;margin:0 auto}
  .gcard{cursor:pointer;border:none;background:none;padding:0;text-align:center;color:#e8eef5;font:inherit}

  .gcard .art{width:100%;aspect-ratio:1/1;border-radius:12px;overflow:hidden;transition:transform .35s var(--ease);
              box-shadow:0 18px 44px -16px rgba(0,0,0,.7), 0 0 48px -16px color-mix(in srgb, var(--ac,#fff) 45%, transparent), 0 0 0 1px rgba(255,255,255,.1)}
  .gcard .art img{width:100%;height:100%;object-fit:cover;display:block}
  .gcard .t{font-family:'Cormorant Garamond',serif;font-size:19px;margin-top:11px;line-height:1.12}
  .gcard .s{font-size:10px;letter-spacing:.24em;text-transform:uppercase;opacity:.6;margin-top:4px}

  .info-block{max-width:640px;margin:48px auto 0;text-align:center}
  .info-k{font-size:12px;letter-spacing:.4em;text-transform:uppercase;color:var(--red);margin-bottom:18px;font-weight:600}
  .bio{font-family:var(--ui);font-size:clamp(16px,2vw,20px);line-height:1.62;color:#f4f1ec;font-weight:400}
  .bio p{margin:0 0 14px}
  .bio p:last-child{margin-bottom:0}
  .bio em{font-style:italic;color:#fff}
  .lf-pills{display:flex;flex-wrap:wrap;gap:11px;justify-content:center}
  .lf-pills a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--ui);color:#e8eef5;
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;padding:11px 17px;min-height:42px;border-radius:999px;
    border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);transition:transform .25s var(--ease),background .3s var(--ease),border-color .3s var(--ease)}
  .lf-pills a .bi{display:inline-flex;align-items:center;line-height:0;transition:color .25s var(--ease)}
  .lf-pills a .bi svg{width:38px;height:38px;fill:currentColor;transition:transform .25s var(--ease)}
  .lf-pills a[data-platform="apple"] .bi{color:#fff}
  .lf-pills a[data-platform="youtube"] .bi{--yt-tri:#fff}
  .lf-pills a:hover{background:rgba(255,255,255,.13);border-color:#fff}
  .lf-pills a:hover .bi svg,.lf-pills a:focus-visible .bi svg{transform:scale(1.12)}
  .lf-pills a[data-platform="spotify"]:hover .bi,.lf-pills a[data-platform="spotify"]:focus-visible .bi{color:#1ED760}
  .lf-pills a[data-platform="youtube"]:hover .bi,.lf-pills a[data-platform="youtube"]:focus-visible .bi{color:#ff0000;--yt-tri:transparent}
  .lf-pills a[data-platform="instagram"]:hover .bi,.lf-pills a[data-platform="instagram"]:focus-visible .bi{color:#e1306c}
  .lf-pills a[data-platform="tiktok"]:hover .bi,.lf-pills a[data-platform="tiktok"]:focus-visible .bi{color:#25F4EE}
  .lf-pills a[aria-disabled="true"]{opacity:.38;pointer-events:none}
  .contact{display:inline-flex;align-items:center;gap:9px;width:max-content;margin:40px auto 0;color:#fff;text-decoration:none;
           font-size:13px;font-weight:500;letter-spacing:.02em;text-transform:none;padding:13px 24px;border-radius:999px;
           border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);transition:.3s}
  .contact .bi{display:inline-flex;align-items:center;line-height:0}
  .contact .bi .material-symbols-outlined{font-size:18px}
  .contact:hover{border-color:var(--red);background:var(--red)}
  .contact[aria-disabled="true"]{opacity:.4;pointer-events:none}
  .site-foot{margin:56px auto 8px;text-align:center;color:rgba(232,238,245,.6);font-size:11px;letter-spacing:.06em;line-height:1.7}
  @media (max-height:820px){ #aboutPage .site-foot{margin-top:28px} }
  .site-foot .foot-fine{font-size:10px;color:rgba(232,238,245,.45);margin-top:4px;max-width:520px;margin-left:auto;margin-right:auto}
  .foot-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:0 0 10px}
  .foot-link{appearance:none;background:none;border:0;padding:2px 0;font:inherit;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(232,238,245,.78);text-decoration:none;border-bottom:1px solid rgba(232,238,245,.22);cursor:pointer;transition:color .2s,border-color .2s}
  .foot-link:hover{color:#fff;border-bottom-color:currentColor}
  .foot-dot{color:rgba(232,238,245,.3);font-size:11px}
  body.sky-day .foot-link{color:rgba(16,48,79,.8);border-bottom-color:rgba(16,48,79,.25)}
  body.sky-day .foot-link:hover{color:#0d2b47}
  body.sky-day .foot-dot{color:rgba(16,48,79,.35)}

  html[dir="rtl"] .wbtn,html[dir="rtl"] .info-k,html[dir="rtl"] .wcard .tag,
  html[dir="rtl"] .contact,html[dir="rtl"] .lf-pills a{letter-spacing:.03em}

  html[dir="rtl"] .wbrand,html[dir="rtl"] .wcard h2,html[dir="rtl"] .wcard .sub,html[dir="rtl"] .gcard .t,html[dir="rtl"] .gcard .s{direction:ltr}

  html[lang="he"] .bio{font-family:'Assistant','Heebo',system-ui,sans-serif;font-size:clamp(16px,2.2vw,21px);line-height:1.7}
  html[lang="he"] .mi-label,html[lang="he"] .welc-title,html[lang="ar"] .mi-label{font-weight:700}

  #atmos{position:fixed;inset:0;pointer-events:none;z-index:6;overflow:hidden}

  #vignette{position:absolute;inset:0;opacity:var(--vig-o,1);transition:opacity .7s var(--ease)}
  #vignette::before{content:'';position:absolute;inset:0;
            background:radial-gradient(132% 112% at 50% 40%, transparent 34%, rgba(2,4,7,.44) 74%, rgba(2,4,7,.72) 100%)}
  #vignette::after{content:'';position:absolute;inset:0;background:#04080f;opacity:var(--scrim-o,0);transition:opacity .7s var(--ease)}

  .wcard{will-change:transform}

  .wcard .art{position:relative;transition:box-shadow .22s var(--ease),filter .55s var(--ease),transform .2s var(--ease)}

  .wcard.active .tag{animation:revUp .6s var(--ease) .04s both}
  .wcard.active h2 {animation:revUp .72s var(--ease) .13s both}
  .wcard.active .sub{animation:revUp .62s var(--ease) .23s both}

  .wcard.active .card-actions .card-btn{animation:revUp .5s var(--ease) .22s both}


  #wayfinder{display:none !important;justify-content:center;align-items:center;padding:2px 0 9px;z-index:6}
  #wayfinder .wf-dots{display:flex;align-items:center;gap:11px}

  #wayfinder .seg{position:relative;width:20px;height:5px;border-radius:6px;background:rgba(255,255,255,.34);
             cursor:pointer;border:none;padding:0;box-shadow:0 1px 4px rgba(0,0,0,.5);
             transition:width .45s var(--ease),background-color .45s var(--ease),filter .45s var(--ease)}

  #wayfinder .seg::before{content:'';position:absolute;inset:-15px -7px}
  #wayfinder .seg:hover{background:rgba(255,255,255,.62)}
  #wayfinder .seg.active{width:42px;background:var(--theme);filter:brightness(1.5) saturate(1.1)}

  .wbar{transition:transform .4s var(--ease),opacity .4s var(--ease),
        background .3s var(--ease),border-color .3s var(--ease)}
  #showcase{transition:opacity .9s var(--ease) .18s}
  body:not(.loaded) .wbar{transform:translateX(-50%) translateY(-130%);opacity:0}

  body:not(.loaded) #showcase{opacity:0}

  :root:not(.measured) #showcase{opacity:0}
  body:not(.loaded) #dock{opacity:0;transform:translateX(-50%) translateY(22px)}
  body:not(.loaded) #wayfinder{opacity:0}
  #wayfinder{transition:opacity .8s var(--ease) .5s}

  @media (prefers-reduced-motion:reduce){

    body.loaded .arrow.prev,body.loaded .arrow.next{animation:none}
    .wbar,#showcase{transition-duration:.01ms}
    body:not(.loaded) .wbar{opacity:1;transform:translateX(-50%)}
    body:not(.loaded) #showcase{opacity:1;transform:none}
    body:not(.loaded) #dock{opacity:1;transform:translateX(-50%)}
    body:not(.loaded) #wayfinder{opacity:1}

    html{scroll-behavior:auto}

    .wcard{transition-duration:.01ms}
    .lyr-armed,.wcard.lyr-open .cl-bar{animation:none}
  }

  .wbtn.icon{padding:8px;min-width:44px;height:44px;justify-content:center}
  .wbtn.icon svg{width:17px;height:17px}
  #settingsMenu,#langMenu{--pop-w:min(296px,calc(100vw - 32px));--pop-h:min(520px,calc(100dvh - 84px))}
  
  
  
  
  
  
  
  
  
  
  .fx-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 8px;border-radius:11px;transition:background .2s var(--ease)}
  .fx-row:hover{background:rgba(255,255,255,.05)}
  .fx-row label{font-size:12.5px;letter-spacing:.02em;color:#e8eef5;cursor:pointer;flex:1}
  .sm-ic{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:20px;
    font-size:19px;color:rgba(255,255,255,.55);transition:color .2s var(--ease)}
  .sm-ic svg{width:17px;height:17px;fill:currentColor}
  .sm-item:hover .sm-ic,.sm-item:focus-visible .sm-ic,.fx-row:hover .sm-ic{color:rgba(255,255,255,.85)}
  .sm-chev{flex:0 0 auto;font-size:17px;color:rgba(255,255,255,.38);transition:color .2s var(--ease)}
  .sm-item:hover .sm-chev,.sm-item:focus-visible .sm-chev{color:rgba(255,255,255,.7)}
  html[dir="rtl"] .sm-chev{transform:scaleX(-1)}
  #copyOutBox{position:fixed;z-index:120;inset:auto 4vw 4vh 4vw;display:flex;flex-direction:column;gap:8px;padding:12px;
        border-radius:14px;border:1px solid var(--glass-bd);background:rgba(10,16,26,.96);box-shadow:0 24px 60px -18px rgba(0,0,0,.85)}
  #copyOutBox textarea{width:100%;height:26vh;resize:none;font:12px/1.5 ui-monospace,Menlo,Consolas,monospace;color:#e8eef5;
        background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:10px}
  #copyOutBox button{font:inherit;cursor:pointer;align-self:flex-end;padding:8px 18px;font-size:11px;letter-spacing:.14em;
        text-transform:uppercase;color:#e8eef5;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:999px}
  .fx-field{display:flex;flex-direction:column;gap:6px;padding:6px 8px 9px}
  .fx-field label{font-size:12.5px;color:#e8eef5}
  
  
  
  
  
  
  
  .cl-lang{color-scheme:dark}
  .cl-lang option{background:#141b26;color:#e8eef5}
  .cl-lang optgroup{background:#141b26;color:rgba(232,238,245,.6)}
  .fx-sw{position:relative;flex:0 0 auto;width:40px;height:23px;border-radius:999px;cursor:pointer;border:none;padding:0;
    background:rgba(255,255,255,.18);transition:background .25s var(--ease)}
  .fx-sw::after{content:'';position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;
    box-shadow:0 1px 3px rgba(0,0,0,.45);transition:transform .25s var(--ease)}
  .fx-sw[aria-checked="true"]{background:var(--theme);filter:brightness(1.12)}
  .fx-sw[aria-checked="true"]::after{transform:translateX(17px)}
  

  #langMenu{position:fixed;top:calc(60px + env(safe-area-inset-top));right:clamp(16px,5vw,30px);z-index:41;
    width:var(--pop-w);max-height:var(--pop-h);overflow-y:auto;background:rgba(12,15,21,.62);
    border:1px solid rgba(255,255,255,.14);border-radius:14px;box-shadow:0 26px 64px -20px rgba(0,0,0,.82),inset 0 1px 0 rgba(255,255,255,.10);
    padding:8px;opacity:0;visibility:hidden;transform:translateY(-5px);transform-origin:top right;
    transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s}
  #langMenu.show{opacity:1;visibility:visible;transform:none}
  #langMenu.closing-now{transition:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;opacity:0!important;visibility:hidden!important}
  .lang-item{display:block;width:100%;text-align:left;font:inherit;cursor:pointer;color:#e8eef5;font-size:12.5px;letter-spacing:.01em;
    padding:10px 13px;border-radius:10px;border:none;background:none;transition:background .2s var(--ease)}
  .lang-item:hover{background:rgba(255,255,255,.06)}
  .lang-item[aria-current="true"]{background:var(--theme);color:var(--themeInk,#fff);filter:brightness(1.06);font-weight:700}
  .lang-lyrics-choice{margin-top:7px;padding:10px 5px 3px;border-top:1px solid rgba(255,255,255,.11)}
  .lang-lyrics-label{display:flex;flex-direction:column;gap:7px;color:rgba(232,238,245,.5);font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
  .lang-lyrics-select{width:100%}
  html[dir="rtl"] #langMenu{right:auto;left:clamp(16px,5vw,30px);transform-origin:top left}

  #settingsMenu{position:fixed;top:calc(60px + env(safe-area-inset-top));right:clamp(16px,5vw,30px);z-index:41;
    width:var(--pop-w);height:var(--pop-h);overflow-y:auto;display:flex;flex-direction:column;background:rgba(12,15,21,.62);
    border:1px solid rgba(255,255,255,.14);border-radius:14px;box-shadow:0 26px 64px -20px rgba(0,0,0,.82),inset 0 1px 0 rgba(255,255,255,.10);
    padding:13px 10px;opacity:0;visibility:hidden;transform:translateY(-5px);transform-origin:top right;
    transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s}
  #settingsMenu.show{opacity:1;visibility:visible;transform:none}
  html[dir="rtl"] #settingsMenu{right:auto;left:clamp(16px,5vw,30px);transform-origin:top left}
  /* Large control popovers become bottom sheets on small screens */
  #settingsMenu.as-sheet{inset:auto 0 0 0 !important;width:auto;max-width:none;max-height:min(72dvh,560px);
        border-radius:18px 18px 0 0;transform:translateY(16px);transform-origin:bottom center;
        padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  #settingsMenu.as-sheet.show{transform:translateY(0)}
  .sm-item{display:flex;align-items:center;gap:12px;width:100%;text-align:start;font:inherit;cursor:pointer;color:#e8eef5;
    font-size:12.5px;letter-spacing:.02em;padding:10px 8px;border-radius:11px;border:none;background:none;transition:background .2s var(--ease)}
  .sm-item:hover,.sm-item:focus-visible{background:rgba(255,255,255,.06);outline:none}
  .sm-item .sm-t{flex:1;min-width:0}
  #settingsMenu .fx-row{gap:12px}
  #settingsMenu .fx-row label{margin-inline-start:0}
  .sm-sep{height:1px;background:rgba(255,255,255,.11);margin:7px 6px}
  #settingsMenu>*{flex:0 0 auto}
  #settingsMenu .sm-sep{margin:auto 6px 7px}
    @media (max-width:959px){ #settingsMenu .sm-upnext-row{display:none} }
  @media (max-width:959px){ #settingsMenu .sm-lyrpanel-row:not(.sm-frame-row){display:none} }
  body.hide-lyrpanel #hero{display:none!important}
  .cp-controls .cp-lyrpanel svg{width:19px;height:19px}
  .cp-lyrpanel[aria-pressed="false"]{color:rgba(255,255,255,.45)}
  .card-player .cpc-r .cp-lyrpanel,.card-player .cpc-r .cp-queue{display:none}
  @media (max-width:959px){ .cp-lyrpanel{display:none} }
  /* ── PANEL BACKGROUNDS (Settings) — a SURFACE preference, not a layout mode.
     OFF puts body.panels-bare on <body>, and that class may only take the glass
     away: background, border, shadow, backdrop blur, plus the ink and text-shadow
     the bare photograph needs. It must never change position, width, grid,
     padding, type, content, player geometry, hover language or breakpoints —
     that composition is unconditional (see EDITORIAL COMPOSITION below) and is
     byte-for-byte the same in both states.
     Readability when bare is ONE scene-level treatment on #bgTint. No per-panel
     haze blobs: the photo stays a single continuous image. */
  body.panels-bare :is(#hero,#lyricsPanel,#aboutSong,#upnext){
        border-color:transparent;box-shadow:none;background:none;
        -webkit-backdrop-filter:none;backdrop-filter:none;
        color:rgba(255,255,255,.96);
        text-shadow:0 1px 3px rgba(0,0,0,.35),0 2px 18px rgba(0,0,0,.35)}
  body.panels-bare :is(#hero,#lyricsPanel,#aboutSong,#upnext)::before{content:none!important}
  body.panels-bare :is(#aboutSong) .un-head{color:rgba(240,244,248,.95)}
  body.panels-bare #upnext .un-head{color:#fff}
  body.panels-bare #upnext .un-item{background:none;border-color:transparent}
  body.panels-bare .lw-t{color:rgba(240,244,248,.95)}
  /* bare: chrome that sits straight on the photo takes full-alpha ink (AA) */
  body.panels-bare :is(.wnav-link,.lang-code,.lang-caret,.wbtn,.ln-head,.ln-t){color:#fff;opacity:1}
  body.sky-day.panels-bare :is(.wnav-link,.lang-code,.lang-caret,.wbtn,.ln-head,.ln-t){color:#0b2742;opacity:1}
  /* bare: lyrics chrome and section labels carry full ink instead of alpha */
  body.panels-bare :is(.lp-title,.lp-close,.lp-seg-t,.lp-langk,.lyr-sec){color:rgba(255,255,255,.96);opacity:1}
  body.sky-day.panels-bare :is(.lp-title,.lp-close,.lp-seg-t,.lp-langk,.lyr-sec){color:#123a5e;opacity:1}
  body.panels-bare .lp-line .lp-o{color:#fff}
  body.panels-bare .lp-line .lp-tr,body.panels-bare .lp-line .lp-ph{color:rgba(240,244,248,.88)}
  body.panels-bare #lyricsPanel .lp-line.ll-active{background:rgba(255,255,255,.08)}
  body.panels-bare :is(.lp-seg,.hlt-seg,.lp-close,.cl-lang){background:rgba(255,255,255,.1)}
  body.panels-bare :is(.lp-seg,.hlt-seg)[aria-pressed="true"]{background:rgba(255,255,255,.2)}
  /* ── Text backing (Settings → Soft / Strong) — LOCAL, not scene-wide: the
     haze sits behind the text rails only, so the photograph stays open in the
     middle and along the edges where nothing is written. It rides on the rail
     itself, so it tracks exactly the block of text it backs, and both of its
     axes are feathered to nothing — no visible box, no blur. The old full-
     height edge veil is kept only as a whisper under the bottom furniture
     (tagline, dock). Soft / Strong scale both. */
  /* one fixed, accessibility-ready backing level — no user setting */
  body.panels-bare{--scene:.10;--haze:.34}
  /* Bare mode cannot rely on the photograph being kind: the two outer columns get a
     feathered wash so the ink always meets AA, while the middle third — album art,
     player, sky — stays untouched photograph. */
  body.panels-bare #bgTint{background:
        linear-gradient(90deg,rgba(3,9,18,.84) 0%,rgba(3,9,18,.78) 24%,rgba(3,9,18,.5) 31%,rgba(3,9,18,.12) 39%,rgba(3,9,18,0) 45%,rgba(3,9,18,0) 55%,rgba(3,9,18,.12) 61%,rgba(3,9,18,.5) 69%,rgba(3,9,18,.78) 76%,rgba(3,9,18,.84) 100%),
        linear-gradient(180deg, rgba(4,7,11,.5) 0%, rgba(4,7,11,.34) 34%, rgba(4,7,11,.7) 100%)}
  #bgTint::before{content:'';position:absolute;inset:0;pointer-events:none;
        background:linear-gradient(180deg,rgba(4,7,11,.82) 0%,rgba(4,7,11,.5) 6%,rgba(4,7,11,.1) 13%,rgba(4,7,11,0) 20%,rgba(4,7,11,0) 56%,rgba(4,7,11,.2) 64%,rgba(4,7,11,.55) 76%,rgba(4,7,11,.78) 88%,rgba(4,7,11,.84) 100%);
        transition:background .45s var(--ease)}
  /* The backing is a bloom, not a band: overlapping soft ellipses with a faint
     iridescence, feathered to nothing on every axis and drifting very slowly so
     the light behind the text feels alive rather than like a panel. */
  body.panels-bare :is(#sideRail,#startRail)::before{content:'';position:absolute;z-index:-1;pointer-events:none;
        inset:-38px -44px calc(var(--scrTail,0px) - 38px);
        background:
          radial-gradient(112% 60% at 44% 26%,rgba(6,16,32,calc(var(--haze) * 1.05)) 0%,rgba(6,16,32,calc(var(--haze) * .7)) 40%,rgba(6,16,32,0) 78%),
          radial-gradient(84% 52% at 60% 80%,rgba(12,30,58,calc(var(--haze) * .8)) 0%,rgba(12,30,58,0) 74%),
          radial-gradient(58% 40% at 16% 58%,rgba(44,30,78,calc(var(--haze) * .5)) 0%,rgba(44,30,78,0) 72%);
        filter:blur(10px);
        animation:railBloom 22s ease-in-out infinite alternate;
        transition:background .45s var(--ease)}
  @keyframes railBloom{
        from{transform:translate3d(0,0,0) scale(1);opacity:.92}
        to{transform:translate3d(-6px,8px,0) scale(1.04);opacity:1}}
  @media (prefers-reduced-motion:reduce){
        body.panels-bare :is(#sideRail,#startRail)::before{animation:none}}
  /* ── Day sky, bare: dark ink on the bright scene, shadows become a white glow */
  body.sky-day.panels-bare :is(#hero,#lyricsPanel,#aboutSong,#upnext){
        color:#0d2b47;text-shadow:0 0 2px rgba(255,255,255,.7),0 1px 16px rgba(255,255,255,.75)}
  body.sky-day.panels-bare{--scene:.11;--haze:.38}
  body.sky-day.panels-bare #bgTint,html[dir="rtl"] body.sky-day.panels-bare #bgTint{background:
        linear-gradient(90deg,rgba(248,252,255,.88) 0%,rgba(248,252,255,.82) 24%,rgba(248,252,255,.54) 31%,rgba(248,252,255,.14) 39%,rgba(248,252,255,0) 45%,rgba(248,252,255,0) 55%,rgba(248,252,255,.14) 61%,rgba(248,252,255,.54) 69%,rgba(248,252,255,.82) 76%,rgba(248,252,255,.88) 100%),
        linear-gradient(180deg, rgba(226,240,252,.3) 0%, rgba(226,240,252,.12) 40%, rgba(210,230,248,.4) 100%)}
  body.sky-day #bgTint::before{
        background:linear-gradient(180deg,rgba(248,252,255,.84) 0%,rgba(248,252,255,.52) 6%,rgba(248,252,255,.12) 13%,rgba(248,252,255,0) 20%,rgba(248,252,255,0) 56%,rgba(248,252,255,.22) 64%,rgba(248,252,255,.58) 76%,rgba(248,252,255,.8) 88%,rgba(248,252,255,.86) 100%)}
  body.sky-day.panels-bare :is(#sideRail,#startRail)::before{
        background:
          radial-gradient(112% 60% at 44% 24%,rgba(253,254,255,calc(var(--haze) * 1.12)) 0%,rgba(250,253,255,calc(var(--haze) * .74)) 40%,rgba(250,253,255,0) 78%),
          radial-gradient(80% 52% at 60% 80%,rgba(255,251,246,calc(var(--haze) * .85)) 0%,rgba(255,251,246,0) 74%),
          radial-gradient(58% 40% at 16% 60%,rgba(224,231,255,calc(var(--haze) * .62)) 0%,rgba(224,231,255,0) 72%),
          radial-gradient(50% 34% at 86% 46%,rgba(255,236,246,calc(var(--haze) * .5)) 0%,rgba(255,236,246,0) 70%)}
  body.sky-day.panels-bare :is(#aboutSong) .un-head{color:rgba(13,43,71,.92)}
  body.sky-day.panels-bare #upnext .un-head{color:#0d2b47}
  body.sky-day.panels-bare .lw-t{color:rgba(13,43,71,.92)}
  body.sky-day.panels-bare .lp-line .lp-o{color:#06283f}
  body.sky-day.panels-bare .lp-line .lp-tr,body.sky-day.panels-bare .lp-line .lp-ph{color:rgba(13,43,71,.88)}
  body.sky-day.panels-bare #lyricsPanel .lp-line.ll-active{background:rgba(16,48,79,.07)}
  body.sky-day.panels-bare :is(.lp-seg,.hlt-seg,.lp-close,.cl-lang){background:rgba(16,48,79,.07)}
  body.sky-day.panels-bare :is(.lp-seg,.hlt-seg)[aria-pressed="true"]{background:rgba(16,48,79,.14)}

  /* ═══ EDITORIAL COMPOSITION — the site's one layout, in BOTH panel states ═══
     Serif headline, handwriting, numbered Up Next, tagline, quiet connect rows.
     Nothing below may be qualified by .panels-bare: turning panel backgrounds
     off removes the glass and nothing else. Tints here are currentColor mixes so
     the same rule reads correctly on the night glass, the day glass and the bare
     photo. */
  .ed-script{font-family:'Caveat','Bradley Hand','Segoe Script',cursive;font-weight:600;font-size:clamp(24px,2.1vw,36px);line-height:1.18;letter-spacing:.005em;opacity:.92}
  .un-headrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
  .un-headrow .un-viewall{margin:0 0 6px;padding:6px 12px;font-size:11px}
  body .ed-eyebrow{display:block;font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;padding:0 0 4px;opacity:.9}
  body .ed-title{display:block;margin:0 0 16px;padding:0 0 14px;font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(40px,3.6vw,62px);line-height:1.02;letter-spacing:-.01em;position:relative}
  body .ed-title::after{content:'';position:absolute;left:0;bottom:0;width:60px;height:1px;background:currentColor;opacity:.7}
  html[dir="rtl"] body .ed-title::after{left:auto;right:0}
  /* fixed rail geometry: no auto-widen / columns / zoom (panels.js fit() is bypassed) */
  body #aboutSong{gap:0;overflow:hidden}
  body #aboutSong .abp-scroll{zoom:1;column-count:auto!important;display:flex!important;padding:0;gap:0}
  body #sideRail{width:var(--railL)!important}
  body #aboutSong .un-head,body #aboutSong .abp-hero,body #aboutSong .abp-k{display:none}
  body #aboutSong .bio{font-size:15px;line-height:1.5}
  body #aboutSong .bio p{margin:0 0 10px}
  body .ed-more{display:inline-flex;align-items:center;gap:10px;margin:8px 0 0;width:max-content;padding:11px 20px;border-radius:999px;
        border:1px solid color-mix(in srgb,currentColor 26%,transparent);background:color-mix(in srgb,currentColor 12%,transparent);
        color:inherit;font:inherit;font-size:13.5px;letter-spacing:.02em;cursor:pointer;text-shadow:none;transition:background .35s var(--ease-calm),border-color .35s var(--ease-calm),transform .35s var(--ease-calm)}
  body .ed-more:hover,body .ed-more:focus-visible{background:color-mix(in srgb,currentColor 22%,transparent);outline:none}
  body .ed-more .ed-arrow{font-size:15px;transition:transform .45s var(--ease-calm)}
  body .ed-more:hover .ed-arrow{transform:translateX(3px)}
  html[dir="rtl"] body .ed-more .ed-arrow{transform:scaleX(-1)}
  /* connect: quiet rows with a sub-line, no headings, no pill boxes */
  
  body #aboutSong .abp-connect .abp-k{display:none}
  body #aboutSong .abp-connect{display:flex;flex-direction:column;gap:2px}
  body #aboutSong .abp-connect .lf-pills{gap:2px}
  body #aboutSong .abp-connect .lf-pills a,body #aboutSong .abp-connect .contact{display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto;column-gap:14px;row-gap:0;align-items:center;
        padding:4px 6px;min-height:0;border:none;background:none;border-radius:10px;font-size:15px;font-weight:500;letter-spacing:0;color:inherit;text-shadow:inherit}
  body #aboutSong .abp-connect .lf-pills a .bi,body #aboutSong .abp-connect .contact .bi,body #aboutSong .abp-connect .contact svg{grid-row:1/3;width:24px;height:24px;justify-self:center}
  body #aboutSong .abp-connect :is(.lf-pills a,.contact) .cn-t{grid-column:2;grid-row:1}
  body #aboutSong .abp-connect .lf-pills a::after,body #aboutSong .abp-connect .contact::after{content:attr(data-sub);grid-column:2;font-size:11.5px;font-weight:400;letter-spacing:.01em;opacity:.76}
  body #aboutSong .abp-connect .lf-pills a,body #aboutSong .abp-connect .contact{--hb:currentColor;position:relative;transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease),color .25s var(--ease)}
  body #aboutSong .abp-connect .lf-pills a:hover,body #aboutSong .abp-connect .contact:hover,body #aboutSong .abp-connect .lf-pills a:focus-visible,body #aboutSong .abp-connect .contact:focus-visible{
        background:linear-gradient(90deg,color-mix(in srgb,var(--hb) 22%,transparent),color-mix(in srgb,currentColor 7%,transparent) 70%);
        box-shadow:inset 3px 0 0 var(--hb);transform:translateX(4px);outline:none}
  body #aboutSong .abp-connect .lf-pills a::after,body #aboutSong .abp-connect .contact::after{transition:opacity .25s var(--ease)}
  body #aboutSong .abp-connect .lf-pills a:hover::after,body #aboutSong .abp-connect .contact:hover::after{opacity:1}
  body #aboutSong .abp-connect .lf-pills a .bi,body #aboutSong .abp-connect .contact .bi{transition:transform .3s var(--ease-snap),color .25s var(--ease),filter .3s var(--ease)}
  body #aboutSong .abp-connect .lf-pills a:hover .bi,body #aboutSong .abp-connect .contact:hover .bi{transform:scale(1.1);filter:drop-shadow(0 2px 5px color-mix(in srgb,var(--hb) 40%,transparent))}
  body #aboutSong .abp-connect .lf-pills a[data-platform="instagram"]{--hb:#e1306c}
  body #aboutSong .abp-connect .lf-pills a[data-platform="tiktok"]{--hb:#fe2c55}
  body #aboutSong .abp-connect .lf-pills a[data-platform="bmc"]{--hb:#ffdd00}
  body #aboutSong .abp-connect .contact{--hb:var(--red)}
  html[dir="rtl"] body #aboutSong .abp-connect .lf-pills a:hover,html[dir="rtl"] body #aboutSong .abp-connect .contact:hover{transform:translateX(-4px);box-shadow:inset -3px 0 0 var(--hb)}
  body .ed-script-l{margin:22px 0 0 -6px;transform:rotate(-6deg);transform-origin:left center}
  html[dir="rtl"] body .ed-script-l{transform:rotate(6deg);transform-origin:right center;margin-inline:0 -6px}
  /* up next: editorial list — heading + View all on one rule, numbered rows, one-line blurb */
  body #startRail{width:var(--railR)!important}
  body #upnext{gap:0}
  body .un-headrow{align-items:baseline;justify-content:space-between;gap:12px;padding:0 0 8px;margin:0 0 6px;border-bottom:1px solid color-mix(in srgb,currentColor 38%,transparent)}
  body .un-other-lbl{padding:0;font-size:13px;font-weight:600;letter-spacing:.26em;color:inherit}
  body #upnext .un-viewall{margin:0;padding:0;border:none;background:none;font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:inherit;isolation:auto}
  body #upnext .un-viewall::before{display:none}
  body #upnext .un-viewall:hover,body #upnext .un-viewall:focus-visible{opacity:.75}
  body #upnext .un-list{display:flex;flex-direction:column;gap:6px}
  body #upnext .un-item{display:grid;grid-template-columns:22px 66px 1fr auto;column-gap:14px;align-items:center;padding:8px 6px;border:none;background:none;color:inherit}
  body #upnext .un-item::before{display:none}
  body #upnext .un-item:hover,body #upnext .un-item:focus-visible{background:color-mix(in srgb,currentColor 10%,transparent)}
  body #upnext .un-item-now{background:color-mix(in srgb,currentColor 12%,transparent)}
  body #upnext .un-num{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;color:inherit;opacity:.84;font-variant-numeric:tabular-nums}
  body #upnext .un-covw{width:66px;height:66px;border-radius:10px;box-shadow:0 8px 22px -8px rgba(0,0,0,.6)}
  body #upnext .un-cov{border-radius:10px}
  body #upnext .un-txt{gap:1px;align-self:start;padding-top:2px}
  body #upnext .un-t{font-size:18px;font-weight:500;line-height:1.2;-webkit-line-clamp:1;color:inherit}
  body #upnext .un-s{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:inherit;opacity:.84}
  body #upnext .un-b{display:block;font-size:12.5px;line-height:1.35;color:inherit;opacity:.88;margin-top:3px;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  body #upnext .un-dur{align-self:start;padding-top:22px;font-size:13px;color:inherit;opacity:.9}
  body #upnext .un-chev{display:none}
  body .ed-script-r{margin:26px 0 0 6px;transform:rotate(-14deg);transform-origin:left center;width:max-content;font-size:clamp(26px,2.3vw,40px);line-height:1.08}
  html[dir="rtl"] body .ed-script-r{transform:rotate(14deg);transform-origin:right center}
  /* the tagline lives on the photo, never inside a panel — it carries its own ink */
  body .ed-tag{display:block;position:fixed;inset-inline-end:clamp(40px,5vw,96px);bottom:calc(18px + env(safe-area-inset-bottom));z-index:12;font-family:var(--ui);font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#fff;
        text-shadow:0 1px 3px rgba(0,0,0,.35),0 2px 18px rgba(0,0,0,.35);pointer-events:none}
  body.sky-day .ed-tag{color:#10304f;text-shadow:0 0 2px rgba(255,255,255,.7),0 1px 16px rgba(255,255,255,.75)}
  body:is(.grid-open,.about-open,.lyrics-over) .ed-tag,body:has(.wcard.lyr-open) .ed-tag{display:none}
  @media (max-width:959px){ .ed-tag{display:none!important} }
  /* player: cover floats with the text under it; Listen on is a labelled stack */
  @media (min-width:960px){
    body.panels-bare .wcard.active:not(.lyr-open){background:none;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
    body .wcard.active:not(.lyr-open) .art{border-radius:20px;box-shadow:0 30px 70px -22px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.12)}
    body .wcard.active:not(.lyr-open) .card-player{padding-top:14px}
    body.panels-bare #listenBar{background:none;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
    body.panels-bare.baked-glass #listenBar::before{content:none}
    body .ln-head{position:relative;display:block;width:100%;text-align:center;padding:0 0 6px}
    body .ln-head::before,body .ln-head::after{content:'';position:absolute;top:.55em;width:calc(50% - 60px);height:1px;background:currentColor;opacity:.55}
    body .ln-head::before{left:0} body .ln-head::after{right:0}
    body #listenBar{flex-direction:column;gap:4px;border-radius:22px}
    body.panels-bare .ln-plat{background:none;border-color:transparent;box-shadow:none}
  }

  /* settings row for the haze level */
  #settingsMenu .sm-scrim-row{display:none!important}

  #settingsMenu .sm-scrim-row .sm-t{flex:1;min-width:0;font-size:12.5px;letter-spacing:.02em}
  .sm-segs{display:inline-flex;gap:2px;padding:2px;border-radius:9px;background:rgba(255,255,255,.08)}
  .sm-scrim-seg{font:inherit;font-size:10.5px;font-weight:600;letter-spacing:.02em;color:rgba(232,238,245,.7);background:none;border:none;border-radius:7px;padding:4px 8px;min-height:24px;cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease)}
  .sm-scrim-seg:hover,.sm-scrim-seg:focus-visible{color:#fff;background:rgba(255,255,255,.1);outline:none}
  .sm-scrim-seg[aria-pressed="true"]{color:#fff;background:color-mix(in srgb,var(--theme) 30%,rgba(255,255,255,.08))}
  body.sky-day .sm-segs{background:rgba(16,48,79,.1)}
  body.sky-day .sm-scrim-seg{color:rgba(16,48,79,.75)}
  body.sky-day .sm-scrim-seg:hover,body.sky-day .sm-scrim-seg:focus-visible{color:#0b2a47;background:rgba(16,48,79,.12)}
  body.sky-day .sm-scrim-seg[aria-pressed="true"]{color:#083049;background:rgba(16,48,79,.18)}
  @media (max-width:959px){ #settingsMenu :is(.sm-about-row,.sm-connect-row){display:none} }

  @media (min-width:960px){ body.hide-upnext #upnext{display:none}
    body.hide-aboutsong #aboutSong{display:none}
    body.hide-connect #aboutSong .abp-connect{display:none}
    body.hide-aboutsong.hide-lyrpanel:not(.lyrics-focus) #sideRail{display:none}
    body.hide-upnext #startRail{display:none} }




  html[dir="rtl"] .lang-item{text-align:right}

  .material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:20px;
    line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;
    -webkit-font-feature-settings:'liga';font-feature-settings:'liga';-webkit-font-smoothing:antialiased}
  .wbtn.icon .material-symbols-outlined{font-size:21px}
  .wbtn .lang-code{font-size:12px;font-weight:700;letter-spacing:.1em;line-height:1;direction:ltr}
  .wactions #langBtn{width:auto;min-width:44px;border-radius:10px;background:none;border:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding-inline:8px 4px;gap:1px}
  #langBtn .lang-caret{font-size:17px;opacity:.75;transform:rotate(90deg);transition:transform .2s var(--ease)}
  #langBtn[aria-expanded="true"] .lang-caret{transform:rotate(270deg)}

  #welcome{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;overflow-y:auto;
    padding:calc(40px + env(safe-area-inset-top)) 22px calc(40px + env(safe-area-inset-bottom));
    background:radial-gradient(135% 100% at 50% -8%, #1a2733 0%, #0a0f15 52%, #05080b 100%);
    transition:opacity 1.2s var(--ease-calm),visibility 1.2s}
  #welcome.gone{opacity:0;visibility:hidden;pointer-events:none}
  html.entered #welcome{display:none}

  .welc-bg{position:fixed;inset:0;pointer-events:none;
    background:radial-gradient(58% 42% at 50% 28%, rgba(210,39,48,.26), transparent 68%);
    animation:welcPulse 7s ease-in-out infinite}
  .welc-scrim{position:fixed;inset:0;pointer-events:none;
    background:radial-gradient(120% 120% at 50% 50%, transparent 52%, rgba(0,0,0,.6) 100%)}
  @keyframes welcPulse{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}

  .welc-stage{position:relative;z-index:1;width:min(400px,92vw);animation:welcIn .85s var(--ease) both}
  @keyframes welcIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

  .welc-head{text-align:center;margin-bottom:clamp(24px,5vh,40px)}
  .welc-logo{width:78px;height:78px;padding:15px;border-radius:21px;
    background:linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.14);box-shadow:0 14px 36px -12px rgba(210,39,48,.75),inset 0 1px 0 rgba(255,255,255,.2);
    animation:welcFloat 5s ease-in-out infinite}

  .welc-title{font-family:var(--disp);font-weight:700;color:#fff;margin:18px 0 0;
    font-size:clamp(25px,7vw,40px);letter-spacing:.14em;line-height:1}
  .welc-tag{margin:9px 0 0;font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.5)}

  .welc-menu{display:flex;flex-direction:column;gap:14px}
  .mi{position:relative;display:flex;align-items:center;gap:14px;width:100%;
    border:none;background:none;cursor:pointer;font:inherit;text-align:left;color:#fff;
    transition:background .2s var(--ease),transform .15s var(--ease),box-shadow .25s var(--ease)}
  .mi-ic{flex:0 0 auto;font-size:21px;color:#fff;line-height:1}
  .mi-label{flex:1 1 auto;font-family:var(--disp);font-weight:600;font-size:15.5px;letter-spacing:.01em}
  .mi-val{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.62)}
  .mi-chev{flex:0 0 auto;font-size:21px;color:rgba(255,255,255,.32)}

  .mi-enter{justify-content:center;gap:10px;min-height:58px;border-radius:16px;
    background:linear-gradient(180deg, #e3343d, #bf1e27);
    box-shadow:0 16px 38px -14px rgba(210,39,48,.9),inset 0 1px 0 rgba(255,255,255,.25)}
  .mi-enter .mi-ic{font-size:22px}
  .mi-enter .mi-label{flex:0 0 auto;font-weight:700;font-size:16px;letter-spacing:.1em;text-transform:uppercase}
  .mi-enter.sel,.mi-enter:hover,.mi-enter:focus-visible{outline:none;
    box-shadow:0 22px 50px -14px rgba(210,39,48,1),inset 0 1px 0 rgba(255,255,255,.32)}

  .mi-group{border-radius:16px;overflow:hidden;background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
  .mi-group .mi{padding:15px 16px}
  .mi-group .mi + .mi{box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
  .mi-group .mi .mi-ic{width:33px;height:33px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;
    font-size:19px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.08)}
  .mi-group .mi.sel,.mi-group .mi:hover,.mi-group .mi:focus-visible{background:rgba(255,255,255,.1);outline:none}
  .mi-group .mi.sel .mi-chev,.mi-group .mi:hover .mi-chev,.mi-group .mi:focus-visible .mi-chev{color:rgba(255,255,255,.7)}

  .welc-langpanel{animation:welcIn .35s var(--ease) both}
  .welc-langpanel[hidden]{display:none}
  .welc-back{gap:9px;min-height:44px;padding:0 2px 12px;color:rgba(255,255,255,.72)}
  .welc-back .mi-ic{font-size:23px}
  .welc-back .mi-label{flex:0 0 auto;font-weight:600;font-size:14px;letter-spacing:.03em}
  .welc-back.sel,.welc-back:hover,.welc-back:focus-visible{color:#fff;background:none;outline:none}
  .welc-lp-head{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.45);padding:0 4px 14px;text-align:center}
  .welc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
  .welc-lang{display:flex;align-items:center;gap:11px;padding:13px;border-radius:14px;cursor:pointer;text-align:left;
    border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:#e8eef5;font:inherit;font-size:14px;
    transition:background .2s var(--ease),border-color .2s var(--ease),transform .15s var(--ease),box-shadow .2s var(--ease)}
  .welc-lang:hover,.welc-lang.sel,.welc-lang:focus-visible{background:rgba(255,255,255,.1);outline:none}
  .welc-lang[aria-selected="true"]{border-color:var(--red);background:rgba(210,39,48,.16);box-shadow:0 0 0 1px var(--red),0 8px 24px -12px rgba(210,39,48,.6)}

  .welc-foot{margin-top:20px;text-align:center;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55)}
  .welc-foot kbd{font:inherit;color:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.18);border-radius:5px;padding:1px 6px;margin:0 1px}
  @media (max-width:959px){.welc-foot{display:none}}

  html[dir="rtl"] .mi,html[dir="rtl"] .welc-lp-head{text-align:right}
  html[dir="rtl"] .mi-chev,html[dir="rtl"] .welc-back .mi-ic{transform:scaleX(-1)}

  html[dir="rtl"] .welc-grid{direction:ltr}
  html[dir="rtl"] .welc-grid .welc-lang{text-align:left}
  @media (prefers-reduced-motion:reduce){.welc-bg,.welc-logo,.welc-stage,.welc-langpanel{animation:none}}

  #aboutPage{position:fixed;inset:0;z-index:120;overflow-y:auto;-webkit-overflow-scrolling:touch;
    opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s;
    background:var(--page-bg);
    padding:calc(86px + env(safe-area-inset-top)) 24px calc(60px + env(safe-area-inset-bottom))}
  #aboutPage::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;
    background:radial-gradient(60% 40% at 50% 4%, rgba(210,39,48,.16), transparent 70%)}
  #aboutPage.show{opacity:1;visibility:visible}

  .ab-close{position:fixed;top:calc(20px + env(safe-area-inset-top));right:clamp(16px,5vw,30px);z-index:122;
    width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(10,12,16,.5);
    color:#fff;cursor:pointer;font-size:17px;display:flex;align-items:center;justify-content:center;
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:background .25s var(--ease),transform .35s var(--ease)}
  .ab-close:hover{background:rgba(255,255,255,.16)}
  html[dir="rtl"] .ab-close{right:auto;left:clamp(16px,5vw,30px)}
  .about-wrap{max-width:640px;margin:0 auto}
  .about-hero{text-align:center;margin-bottom:8px}
  .about-logo{width:clamp(48px,11vw,66px);height:auto;filter:drop-shadow(0 0 18px rgba(210,39,48,.6))}
  .about-word{font-family:var(--disp);font-weight:700;letter-spacing:.18em;font-size:clamp(20px,5vw,30px);color:#fff;margin-top:12px}
  #aboutPage .info-block:first-of-type{margin-top:30px}
  .about-follow{margin-top:46px;padding-top:38px}
  .about-follow .contact{margin-top:28px}
  @media (min-width:960px){
    #aboutPage{padding-top:calc(28px + env(safe-area-inset-top));padding-bottom:calc(20px + env(safe-area-inset-bottom))}
    #aboutPage .about-wrap{max-width:940px}
    #aboutPage .about-logo{width:40px}
    #aboutPage .about-word{font-size:18px;margin-top:6px}
    #aboutPage .about-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;align-items:start}
    #aboutPage .info-block{margin-top:20px;max-width:none}
    #aboutPage .info-block:first-of-type{margin-top:20px}
    #aboutPage .info-k{margin-bottom:8px}
    #aboutPage .bio{font-size:clamp(15px,1.4vw,17px);line-height:1.62}
    #aboutPage .contact{margin-top:18px;padding:10px 22px}
    #aboutPage .site-foot{margin:16px auto 0;line-height:1.5}
  }
  @media (prefers-reduced-motion:reduce){ #aboutPage{transition-duration:.01ms} }

  body.about-open #dock,body.about-open #wayfinder{opacity:0;pointer-events:none}

  #a11yPage{position:fixed;inset:0;z-index:120;overflow-y:auto;-webkit-overflow-scrolling:touch;
    opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s;
    background:var(--page-bg);
    padding:calc(86px + env(safe-area-inset-top)) 24px calc(60px + env(safe-area-inset-bottom))}
  #a11yPage.show{opacity:1;visibility:visible}
  #a11yPage .info-block:first-of-type{margin-top:30px}
  #a11yPage .bio{text-align:start}
  .a11y-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px;text-align:start}
  .a11y-list li{position:relative;padding-inline-start:22px}
  .a11y-list li::before{content:'\203A';position:absolute;inset-inline-start:0;color:var(--red);font-weight:700}
  @media (prefers-reduced-motion:reduce){ #a11yPage{transition-duration:.01ms} }

  #infoMenu{position:fixed;top:calc(54px + env(safe-area-inset-top));inset-inline-end:clamp(12px,3vw,24px);z-index:115;
    min-width:208px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 70px);overflow-y:auto;padding:7px;border-radius:14px;border:1px solid var(--trim);
    box-shadow:0 20px 54px -16px rgba(0,0,0,.72);opacity:0;visibility:hidden;transform:translateY(-5px);
    transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s}
  #infoMenu.show{opacity:1;visibility:visible;transform:translateY(0)}
  .info-item{display:flex;align-items:center;gap:11px;width:100%;padding:11px 12px;border:none;background:none;
    color:#fff;font:inherit;font-size:13px;letter-spacing:.02em;cursor:pointer;border-radius:10px;text-align:start;
    transition:background .18s var(--ease)}
  .info-item:hover,.info-item:focus-visible{background:rgba(255,255,255,.1);outline:none}
  .info-item .material-symbols-outlined{font-size:20px;opacity:.85}

  

  

  .wcard:not(.active) .art{filter:brightness(.64) saturate(.92)}

  .wcard.active.lyr-open{max-height:calc(100svh - (46px + env(safe-area-inset-top)) - (84px + env(safe-area-inset-bottom)));
        overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .wcard.active.lyr-open::-webkit-scrollbar{display:none}

  #showcase:has(.wcard.lyr-open) .scroller,#showcase:has(.wcard.lyr-anim) .scroller{scroll-snap-type:none;touch-action:pan-y}

  #showcase:has(.wcard.lyr-open) .wcard:not(.lyr-open){opacity:.4;pointer-events:none;transition:opacity .45s var(--ease),transform .5s var(--ease)}
  #showcase:has(.wcard.lyr-open) .wcard.lyr-open ~ .wcard{transform:translateX(18%) scale(.85) !important}

  body:has(.wcard.lyr-open) .arrow{display:none}
  .wcard-face{display:flex;flex-direction:column;position:relative}

  .card-lyr{max-height:0;overflow:hidden;opacity:0;direction:ltr;touch-action:pan-y;text-align:center;
        transition:max-height .55s var(--ease),opacity .4s var(--ease),margin-top .4s var(--ease)}
  .wcard.active.lyr-open .card-lyr{max-height:1200px;opacity:1;margin-top:14px}

  .cl-body{cursor:text}
  .cl-body, .cl-body *{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}

  @media (max-width:959px){ .wcard.lyr-open #wayfinder{pointer-events:none} }

  .cl-bar{position:sticky;top:0;z-index:6;display:flex;flex-direction:column;gap:9px;padding:13px 14px 11px;
        background:linear-gradient(180deg, rgba(9,12,18,.97), rgba(9,12,18,.9) 62%, rgba(9,12,18,0));
        -webkit-backdrop-filter:blur(13px);backdrop-filter:blur(13px)}

  .cl-bar-row{display:flex;align-items:center;justify-content:space-between;gap:8px 10px;flex-wrap:wrap}
  .cl-bar-row .cl-toggles{flex:0 1 auto}

  .cl-sections{display:flex;justify-content:center;padding:1px 2px 3px}
  .cl-sections:empty{display:none}
  .cl-sec{display:none;font:inherit;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;font-weight:600;
        border:0;border-radius:9px;padding:6px 12px;background:none}
  .cl-sec[aria-current="true"]{display:block;color:#fff;background:color-mix(in srgb, var(--theme) 40%, rgba(255,255,255,.05));pointer-events:none}

  .cl-back{display:none;font:inherit;cursor:pointer;align-items:center;gap:7px;color:#fff;background:rgba(255,255,255,.07);
        border:0;border-radius:10px;padding:7px 14px;min-height:34px;font-size:9.5px;
        letter-spacing:.16em;text-transform:uppercase;font-weight:600;transition:background .2s var(--ease)}
  .cl-back .material-symbols-outlined{font-size:17px}
  html[dir="rtl"] .cl-back .material-symbols-outlined{transform:scaleX(-1)}
  .cl-back:hover,.cl-back:focus-visible{background:rgba(255,255,255,.15);outline:none}

  @media (max-width:959px){
    .wcard.active.lyr-open{flex:0 0 94vw}

    .wcard.active.lyr-open .art{ width:min(100%, 60vh); height:auto; aspect-ratio:1; margin-left:auto; margin-right:auto; }
    .cl-back{display:inline-flex}

    .wcard.lyr-open .card-actions .card-lyrics{ display:none; }
    .cl-back{ min-height:40px; padding:9px 18px; font-size:10.5px; gap:9px; border-radius:11px;
        background:color-mix(in srgb, var(--theme) 36%, rgba(255,255,255,.06)); }
    .cl-back:hover,.cl-back:focus-visible{ background:color-mix(in srgb, var(--theme) 50%, rgba(255,255,255,.06)); }
    .cl-back .material-symbols-outlined{ font-size:19px; }

    .cl-bar-row .cl-back{ order:1; }
    .cl-bar-row .cl-copy{ order:2; }
    .cl-bar-row .cl-toggles{ order:3; flex-basis:100%; width:100%; gap:6px; margin-top:1px; }
    .cl-bar-row .cl-toggles .cl-tg, .cl-bar-row .cl-toggles .cl-lang{ flex:1 1 0; min-width:0; justify-content:center; gap:5px; letter-spacing:.05em; padding-left:7px; padding-right:7px; }
    .cl-bar-row .cl-toggles .cl-lang{ padding-inline-end:24px; }
    .cl-bar-row .cl-toggles .cl-tg .cl-tg-t{ overflow:hidden; text-overflow:ellipsis; }
    .cl-bar{border-bottom:1px solid rgba(255,255,255,.12)}
    .card-lyr .cl-body{max-width:560px;margin:0 auto;padding:14px 16px 22px}

    .wcard.active.lyr-open .card-lyr{ overflow:visible; max-height:none; }
  }

  @media (min-width:960px){
    .wcard.active.lyr-open{display:flex;flex-direction:row;align-items:stretch;gap:0;flex-basis:min(1400px,95vw);
          max-height:calc(100svh - 180px);overflow:hidden}

    .wcard.active:not(.lyr-open){max-height:var(--cardmaxh,calc(min(52svh,840px) + 310px))}

    .wcard.active.lyr-open .wcard-face{flex:0 0 var(--cardw);overflow-y:auto;scrollbar-width:none;padding-bottom:14px;justify-content:center}
    .wcard.active.lyr-open .wcard-face::-webkit-scrollbar{display:none}
    .wcard.active .card-lyr{transition:flex-basis .5s var(--ease),opacity .4s var(--ease)}

    .wcard.active.lyr-open .card-lyr{flex:1 1 auto;max-height:none;opacity:1;margin-top:0;overflow-y:auto;
          -webkit-overflow-scrolling:touch;scrollbar-width:none;transform:none;
          border-inline-start:1px solid rgba(255,255,255,.14);padding:0}
    .wcard.active:not(.lyr-open) .card-lyr{transform:none}

    .wcard.active.lyr-open .card-lyr .cl-body{max-width:720px;margin:0 auto;padding:6px clamp(22px,3.2vw,52px) 38px}
    .cl-bar{padding:16px clamp(22px,3.2vw,52px) 12px}

    .wcard.active.lyr-open.lyr-armed{flex-basis:var(--cardw);max-height:var(--cardmaxh,calc(min(52svh,840px) + 310px))}

    .wcard.active.lyr-open.lyr-armed .wcard-face{flex:0 0 var(--cardw)}
    .wcard.active.lyr-open.lyr-armed .card-lyr{opacity:0}

    .wcard.active.lyr-open:not(.lyr-anim) .cl-body{opacity:1;transition:opacity .45s var(--ease)}
    .wcard.lyr-anim .cl-body,.wcard.lyr-anim .cl-bar{opacity:0;transition:none}
    .wcard.active.lyr-open:not(.lyr-anim) .cl-bar{animation:lyrCtlIn .45s var(--ease) both}
    @keyframes lyrCtlIn{from{opacity:0}to{opacity:1}}
    .wcard.active.lyr-open .card-lyr::-webkit-scrollbar{display:none}
  }

  .cl-toggles{display:flex;gap:7px;justify-content:center;align-items:center;flex-wrap:wrap}
  .cl-tg{display:inline-flex;align-items:center;gap:6px;font:inherit;cursor:pointer;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.9);white-space:nowrap;
        padding:7px 13px;min-height:34px;border-radius:10px;border:0;background:rgba(255,255,255,.07);
        transition:background .2s var(--ease),color .2s var(--ease)}
  .cl-tg:hover,.cl-tg:focus-visible{background:rgba(255,255,255,.14);outline:none}
  .cl-tg .cl-tg-ic{font-size:15px}
  .cl-tg[aria-pressed="true"]{background:var(--theme);color:var(--themeInk,#fff);filter:brightness(1.06);font-weight:700}

  .cl-tg[aria-pressed="true"] .cl-tg-ic{display:none}
  .cl-tg[aria-pressed="true"]::before{content:'\2713';font-size:14px;font-weight:700}

  /* ONE lyrics-language trigger everywhere (hero, lyrics panel, overlay,
     view-all bar, language menu) — contexts may size it, never re-skin it. */
  .cl-lang{font:inherit;cursor:pointer;font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:rgba(232,238,245,.9);
        text-align:start;padding:7px 26px 7px 12px;min-height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.12);
        box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
        background-color:rgba(255,255,255,.07);-webkit-appearance:none;appearance:none;
        background-image:linear-gradient(45deg,transparent 50%,rgba(232,238,245,.7) 50%),linear-gradient(135deg,rgba(232,238,245,.7) 50%,transparent 50%);
        background-position:calc(100% - 13px) 55%,calc(100% - 9px) 55%;background-size:4px 4px,4px 4px;background-repeat:no-repeat;
        transition:background-color .2s var(--ease),color .2s var(--ease)}
  .cl-lang:dir(rtl){padding:7px 12px 7px 26px;background-position:9px 55%,13px 55%}
  .cl-lang:hover,.cl-lang:focus-visible{background-color:rgba(255,255,255,.14);color:#fff;outline:none}
  .cl-lang:focus-visible{border-color:color-mix(in srgb,var(--theme) 60%,rgba(255,255,255,.25))}
  .cl-lang option{color:#e8eef5;background:#141b26}

  .cl-copy{display:inline-flex;align-items:center;gap:6px;font:inherit;cursor:pointer;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
        color:rgba(255,255,255,.9);white-space:nowrap;padding:7px 13px;min-height:34px;border-radius:10px;border:0;
        background:rgba(255,255,255,.07);transition:background .2s var(--ease)}
  .cl-copy:hover,.cl-copy:focus-visible{background:rgba(255,255,255,.14);outline:none}
  .cl-copy .material-symbols-outlined{font-size:15px}
  .cl-copy .cl-copy-chev{font-size:15px;transition:transform .25s var(--ease)}
  .cl-copy[aria-expanded="true"] .cl-copy-chev{transform:rotate(180deg)}
  .cl-copy.copied{background:color-mix(in srgb, var(--theme) 36%, transparent);color:#fff;font-weight:700}

  .cl-copy-menu{position:fixed;left:0;top:0;z-index:120;min-width:190px;display:flex;flex-direction:column;gap:2px;padding:7px;border-radius:14px;
        background:rgba(12,15,21,.98);-webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);
        border:1px solid rgba(255,255,255,.16);box-shadow:0 24px 58px -16px rgba(0,0,0,.85);
        opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px) scale(.98);transform-origin:top center;
        transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s linear .18s}
  .cl-copy-menu.show{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1);transition-delay:0s}
  .cl-copy-menu.up{transform-origin:bottom center}
  .cl-copy-item{display:flex;align-items:center;gap:11px;font:inherit;cursor:pointer;text-align:start;color:#fff;font-size:12px;letter-spacing:.02em;
        padding:10px 12px;border-radius:10px;border:0;background:none;transition:background .16s var(--ease);width:100%}
  .cl-copy-item:hover,.cl-copy-item:focus-visible{background:rgba(255,255,255,.1);outline:none}
  .cl-copy-item .material-symbols-outlined{font-size:18px;flex:0 0 auto;opacity:.85}

  @media (min-width:960px){
    .wcard.lyr-open .card-lyrics .lb-t-lyrics,.wcard.lyr-open .card-lyrics .lb-ic-lyrics{display:none}
    .wcard.lyr-open .card-lyrics .lb-ic-back{display:inline-flex}
    .wcard.lyr-open .card-lyrics .lb-t-back{display:inline}
  }
  html[dir="rtl"] .card-lyrics .lb-ic-back{transform:scaleX(-1)}

  .card-lyr .lyr-stanza{margin:0 0 34px;scroll-margin-top:74px}
  .card-lyr .lyr-stanza:last-of-type{margin-bottom:0}

  .lyr-sec{margin:26px 0 9px;font-size:8px;letter-spacing:.26em;text-transform:uppercase;font-weight:500;
        color:rgba(255,255,255,.22)}
  .lyr-sec:first-child{margin-top:0}
  .card-lyr .lyr-label{display:flex;align-items:center;justify-content:center;gap:12px;
        font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.46);
        background:none;border:0;border-radius:0;padding:0;margin:0 0 16px}
  .card-lyr .lyr-label::before,.card-lyr .lyr-label::after{content:'';width:26px;height:1px;flex:0 0 auto}
  .card-lyr .lyr-label::before{background:linear-gradient(90deg, transparent, rgba(255,255,255,.2))}
  .card-lyr .lyr-label::after{background:linear-gradient(90deg, rgba(255,255,255,.2), transparent)}

  .card-lyr .lyr-line{margin:0 0 20px}
  body:not(.lyr-en):not(.lyr-ph) .card-lyr .lyr-line{margin-bottom:12px}

  .card-lyr .lyr-line .ll-o{display:block;font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(20px,2.55vh,27px);line-height:1.4;letter-spacing:.004em;color:#f3eee5}
  .card-lyr .lyr-line .ll-ph{display:none;font-size:12px;font-style:italic;letter-spacing:.035em;line-height:1.35;color:var(--lv-ph);margin-top:3px}
  .card-lyr .lyr-line .ll-en{display:none;font-family:var(--disp);font-size:14.5px;letter-spacing:.008em;line-height:1.5;color:var(--lv-tr);margin-top:9px}
  body.lyr-ph .card-lyr .ll-ph{display:block}
  body:not(.lv-o) .card-lyr .ll-o{display:none}
  body.lyr-en .card-lyr .ll-en{display:block}
  .card-lyr .lyr-foot{margin-top:26px;text-align:center;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.4)}
  @media (prefers-reduced-motion:reduce){ .card-lyr{transition-duration:.01ms} }

  
  
  

  :root{
    --tglow: color-mix(in srgb, var(--theme) 55%, transparent);
    --tedge: color-mix(in srgb, var(--theme) 70%, #ffffff);
    --trim:  color-mix(in srgb, var(--theme) 40%, rgba(255,255,255,.16));
  }

  #langMenu,#infoMenu,#settingsMenu,.dock-folder{ border-color:var(--trim);
    box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 24px -6px var(--tglow); }

  a:focus-visible,button:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--tedge); outline-offset:3px; box-shadow:0 0 0 5px color-mix(in srgb,var(--theme) 22%, transparent); }

  .wbtn.icon{ transition:color .2s var(--ease),background .2s var(--ease),transform .12s var(--ease); }
  @media (hover:hover){ .wbtn.icon:hover{ background:rgba(255,255,255,.08); } }
  .wbtn:active{ transform:scale(.9); }

  .card-btn{ box-shadow:inset 0 1px 0 rgba(255,255,255,.18); }

  #dock .task-sep{ background:linear-gradient(180deg, transparent, rgba(255,255,255,.28) 50%, transparent); }
  #dock .task-item:active{ transform:scale(.96); }
  #dock .task-item .ti-lbl{ letter-spacing:.17em; }

  .fx-sw{ box-shadow:inset 0 1px 2px rgba(0,0,0,.4); }
  .fx-sw[aria-checked="true"]{ background:var(--theme); box-shadow:0 0 14px -2px var(--tglow), inset 0 1px 0 rgba(255,255,255,.25); }
  .fx-sw[aria-checked="true"]::after{ box-shadow:0 0 8px rgba(255,255,255,.55),0 1px 3px rgba(0,0,0,.4); }

  .mi-enter{ background:linear-gradient(180deg,#ef3b44,#c41f28); box-shadow:0 18px 42px -14px rgba(210,39,48,.95), inset 0 1px 0 rgba(255,255,255,.38), inset 0 -2px 7px rgba(0,0,0,.28); position:relative; overflow:hidden; }
  .mi-enter::after{ content:''; position:absolute; top:0; left:-60%; width:50%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-18deg); opacity:0; }
  @keyframes sheenSweep{ from{left:-60%} to{left:130%} }
  @media (prefers-reduced-motion:reduce){ .mi-enter:hover::after{ animation:none; opacity:0; } }

  .cl-tg[aria-pressed="true"]{ box-shadow:0 0 12px -3px var(--tglow); }
  #wayfinder .seg.active{ box-shadow:0 0 12px -1px var(--tglow); }
  .lang-item[aria-current="true"]{ box-shadow:0 0 14px -3px var(--tglow); }

  :root{ --dur:.26s; --dur-fast:.15s; --eyebrow:.28em; }

  .fx-sw,.cl-tg,.card-btn,.cl-copy,.lang-item,.mi,.ff-item,.info-item{
    transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur-fast) var(--ease),box-shadow var(--dur) var(--ease);
  }
  .fx-sw:active,.cl-tg:active,.cl-copy:active,.lang-item:active,.mi:active,.ff-item:active,.info-item:active{ transform:scale(.96); }
  .arrow:active{ transform:translateY(-50%) scale(.94); }

  .wcard .sub,#dock .task-item .ti-lbl,#relHead{ letter-spacing:var(--eyebrow); }

  .wcard.active .tag{ position:relative; }

  #langMenu,#infoMenu,#settingsMenu,.dock-folder{ -webkit-backdrop-filter:blur(26px) saturate(150%); backdrop-filter:blur(26px) saturate(150%); }

  #bgTint::after{ opacity:.58; }


  :root{ --ease: cubic-bezier(.38,.12,.24,1); --ease-calm: cubic-bezier(.42,0,.2,1); --ease-snap: cubic-bezier(.2,.8,.2,1); }

  .bg-img,#bgTint{ transition-duration:calc(1s * var(--mo,1)); }

  .scroller{ gap:clamp(8px,2vw,22px); perspective:none; }
  @media (max-width:959px){ .scroller{ gap:clamp(6px,2vw,16px); } }
  .wcard{ transition:transform .62s var(--ease-calm), opacity .62s var(--ease-calm), background .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease), flex-basis .55s var(--ease), max-height .55s var(--ease); }

  @media (prefers-reduced-motion:reduce){
    .wcard{ transition-property:transform,opacity,background,box-shadow,border-color; }
  }
  .wcard:not(.active){ opacity:.5; }

  @keyframes revUp{ from{opacity:0;transform:translateY(9px)} to{opacity:1;transform:translateY(0)} }
  .wcard.active .tag{ animation-duration:.5s; }
  .wcard.active h2{ animation-duration:.55s; }
  .wcard.active .sub{ animation-duration:.5s; }

  @keyframes arrowNudgeL{0%,100%{transform:translateY(-50%) translateX(0)}46%{transform:translateY(-50%) translateX(-3px)}}
  @keyframes arrowNudgeR{0%,100%{transform:translateY(-50%) translateX(0)}46%{transform:translateY(-50%) translateX(3px)}}
  body.loaded .arrow.prev{ animation:arrowNudgeL 2.6s var(--ease) 1.2s 2; }
  body.loaded .arrow.next{ animation:arrowNudgeR 2.6s var(--ease) 1.2s 2; }

  .wbtn:active{ transform:scale(.94); }

  @keyframes welcFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
  .welc-logo{ animation-duration:7s; }
  .welc-bg{ animation-duration:11s; }
  .welc-stage{ animation-duration:2s; animation-timing-function:var(--sw-in,cubic-bezier(.12,.9,.22,1)); }

  #langMenu,#infoMenu,#settingsMenu{ transition-duration:.17s; }
  .dock-folder{ transition-duration:.32s; }
  #aboutPage, #a11yPage{ transition-duration:.7s; }

  @media (max-width:959px){
    /* Cover budget = viewport minus what always surrounds it on a phone:
       controls block under the cover ~334px + fixed header ~66px + dock ~80px
       + breathing room. 360px was short by ~130px — the card clipped behind
       the header buttons at the top and the dock at the bottom. */
    :root{ --cardw:max(140px, min(44vh, 76vw, calc(100svh - 470px))); }
    .wtext{ padding:14px 16px 16px; }

    .card-actions{ gap:8px; margin-top:15px; }
    .card-btn{ padding:10px 16px; }
  }

  /* YouTube-style play button: dark rounded rect, red on hover — one control, one purpose */
  .art-play{position:absolute;inset:0;margin:auto;width:clamp(64px,26%,92px);height:auto;aspect-ratio:68/48;
    display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;border-radius:18%/25.5%;color:#fff;
    background:rgba(18,18,18,.8);
    box-shadow:0 12px 34px -12px rgba(0,0,0,.72);
    opacity:0;transform:scale(.82);pointer-events:none;
    transition:opacity .3s var(--ease),transform .3s var(--ease),background .18s var(--ease),box-shadow .25s var(--ease)}
  .wcard.active .art-play{opacity:1;transform:none;pointer-events:auto}

  .wcard.active.lyr-open .art-play{opacity:1;transform:none;pointer-events:auto}
  .art-play:hover{background:#f00}
  .art-play:focus-visible{background:#f00;outline:none;
    box-shadow:0 12px 34px -12px rgba(0,0,0,.72),0 0 0 3px rgba(255,255,255,.55)}
  .art-play svg{width:46%;height:58%;fill:currentColor;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
  @media (prefers-reduced-motion:reduce){ .art-play{transition-duration:.01ms} }

  .art-video{position:absolute;inset:0;z-index:-1;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s ease;background:#000}
  /* Playing: show the real YouTube surface in the cover slot so its native UI (incl. Skip Ad) is visible and clickable */
  .wcard.k-video .art .art-video{z-index:3;opacity:1;visibility:visible;pointer-events:auto}
  .wcard.k-video .art>img,.wcard.k-video .art .art-play,.wcard.k-video .art .art-lyric{opacity:0!important;pointer-events:none;transition:opacity .45s ease}
  .art-video iframe,.art-video>div{position:absolute;inset:0;width:100%;height:100%;border:0}

  .cl-progress{position:relative;height:4px;border-radius:3px;margin:1px 0 0;background:rgba(255,255,255,.14);cursor:pointer}
  .cl-progress-fill{position:absolute;left:0;top:0;height:100%;width:100%;transform-origin:left center;transform:scaleX(var(--p,0));will-change:transform;border-radius:3px;background:var(--theme);transition:transform .12s linear}

  .wcard.has-karaoke .card-lyr .lyr-line[role="button"]{cursor:pointer;border-radius:9px}
  .wcard.has-karaoke .card-lyr .lyr-line[role="button"]:focus-visible{outline:1px solid color-mix(in srgb,var(--theme) 70%,#fff);outline-offset:5px}
  .wcard.has-karaoke.k-playing .card-lyr .lyr-line{opacity:.42;transition:opacity .35s var(--ease),transform .25s var(--ease)}
  .wcard.has-karaoke.k-playing .card-lyr .lyr-line.ll-active{opacity:1}
  .card-lyr .lyr-line.ll-active{transform:scale(1.015)}
  .card-lyr .lyr-line.ll-active .ll-o{color:#fff;text-shadow:0 0 16px color-mix(in srgb, var(--theme) 55%, transparent)}
  @media (prefers-reduced-motion:reduce){#lyricsPanel .lp-line,#lyricsOverlay .lo-line,.wcard.has-karaoke .card-lyr .lyr-line{transition:none;transform:none!important}}

  .cl-sync-btn{display:none}
  body.creator .cl-sync-btn{display:inline-flex}
  .cl-sync-bar{display:none;flex-direction:column;gap:9px;padding:11px 12px;margin:9px 0 0;border-radius:12px;
    background:color-mix(in srgb, var(--theme) 24%, rgba(8,11,16,.72));border:1px solid rgba(255,255,255,.14)}
  .wcard.cl-syncing .cl-sync-bar{display:flex}
  .cl-sync-hint{font-size:10.5px;letter-spacing:.03em;line-height:1.4;color:rgba(255,255,255,.92);text-align:center}
  .cl-sync-ctl{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center}
  .cl-sync-tap{flex:1 1 100%;order:-1;font:inherit;cursor:pointer;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    color:var(--themeInk,#fff);background:var(--theme);border:none;border-radius:11px;padding:11px 14px}
  .cl-sync-tap:hover,.cl-sync-tap:focus-visible{filter:brightness(1.08);outline:none}
  .cl-sync-b{font:inherit;cursor:pointer;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.9);
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:9px;padding:6px 10px}
  .cl-sync-b:hover,.cl-sync-b:focus-visible{background:rgba(255,255,255,.16);outline:none}
  .cl-sync-save.ready{background:var(--theme);color:var(--themeInk,#fff);border-color:transparent;font-weight:700}
  .wcard.cl-syncing .card-lyr .lyr-line{cursor:pointer;opacity:.5;border-radius:8px;transition:opacity .2s var(--ease),background .2s var(--ease)}
  .wcard.cl-syncing .card-lyr .lyr-line.ll-timed{opacity:.85}
  .wcard.cl-syncing .card-lyr .lyr-line.ll-timed .ll-o::after{content:' \2713';color:var(--theme);font-size:.7em;vertical-align:middle}
  .wcard.cl-syncing .card-lyr .lyr-line.ll-target{opacity:1;background:color-mix(in srgb, var(--theme) 20%, transparent);
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--theme) 60%, transparent)}
  .lp-sync{display:none;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;border:0;background:none;color:rgba(255,255,255,.7);cursor:pointer}
  .lp-sync .material-symbols-outlined{font-size:19px}
  .lp-sync:hover,.lp-sync:focus-visible{background:rgba(255,255,255,.12);color:#fff;outline:none}
  .lp-sync[aria-pressed="true"]{background:color-mix(in srgb,var(--theme) 30%,transparent);color:#fff}
  body.creator #lyricsPanel .lp-head{grid-template-columns:1fr 34px 34px}
  body.creator #lyricsPanel .lp-sync{display:inline-flex}
  #lyricsPanel .cl-sync-bar{margin:0 13px 11px;flex:0 0 auto}
  #lyricsPanel.cl-syncing .cl-sync-bar{display:flex}
  #lyricsPanel.cl-syncing .lp-wait,#lyricsPanel.cl-syncing .lp-view,#lyricsPanel.cl-syncing .lp-langrow{display:none!important}
  #lyricsPanel.cl-syncing .lp-line{cursor:pointer;opacity:.5}
  #lyricsPanel.cl-syncing .lp-line.ll-timed{opacity:.85}
  #lyricsPanel.cl-syncing .lp-line.ll-timed .lp-o::after{content:' \2713';color:var(--theme);font-size:.7em;vertical-align:middle}
  #lyricsPanel.cl-syncing .lp-line.ll-target{opacity:1;background:color-mix(in srgb,var(--theme) 20%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--theme) 60%,transparent)}

  body.pointing, body.pointing *{cursor:crosshair !important}

  body.pointing *:not(.pt-ui):not(.pt-ui *){pointer-events:auto !important}
  .pt-hi{position:fixed;z-index:99998;pointer-events:none;display:none;left:0;top:0;
    border:2px solid var(--red);background:color-mix(in srgb, var(--red) 12%, transparent);box-shadow:0 0 0 1px rgba(0,0,0,.45)}
  .pt-hint{position:fixed;z-index:99999;top:12px;left:50%;transform:translateX(-50%);pointer-events:none;white-space:nowrap;
    background:rgba(10,12,16,.92);color:#e8eef5;font:600 12px/1.3 var(--disp,sans-serif);letter-spacing:.02em;
    padding:8px 15px;border-radius:999px;border:1px solid rgba(255,255,255,.14)}
  .pt-panel{position:fixed;z-index:99999;left:12px;bottom:12px;width:min(460px,92vw);max-height:64vh;
    display:flex;flex-direction:column;pointer-events:auto;
    background:rgba(10,12,16,.96);color:#e8eef5;border:1px solid rgba(255,255,255,.14);border-radius:12px;
    box-shadow:0 12px 40px rgba(0,0,0,.5);overflow:hidden}
  .pt-head{display:flex;align-items:center;gap:6px;padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.10);
    font:600 12px/1.2 var(--disp,sans-serif)}
  .pt-head .pt-sp{flex:1}
  .pt-count{background:var(--red);color:#fff;border-radius:999px;min-width:18px;height:18px;padding:0 5px;
    display:inline-flex;align-items:center;justify-content:center;font-size:11px}
  .pt-title{letter-spacing:.06em}
  .pt-btn{font:600 11px/1 var(--disp,sans-serif);letter-spacing:.02em;color:#e8eef5;background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:6px 9px;cursor:pointer;white-space:nowrap}
  .pt-btn:hover,.pt-btn:focus-visible{background:rgba(255,255,255,.16);outline:none}
  .pt-btn.on{background:var(--red);border-color:transparent;color:#fff}
  .pt-status{padding:5px 10px;min-height:1.3em;font:11px/1.3 var(--disp,sans-serif);color:#9fd0e0;border-bottom:1px solid rgba(255,255,255,.08)}
  .pt-status:empty{display:none}
  .pt-list{margin:0;padding:6px 10px 10px;list-style:none;overflow:auto;display:flex;flex-direction:column;gap:6px}
  .pt-list li{display:flex;gap:6px;align-items:flex-start}
  .pt-li-desc{flex:1;font:12px/1.35 var(--disp,sans-serif);word-break:break-word}
  .pt-li-x{flex:none;font:14px/1 sans-serif;color:rgba(255,255,255,.55);background:none;border:none;cursor:pointer;padding:0 2px}
  .pt-li-x:hover{color:var(--red)}

  html.pt-frozen *, html.pt-frozen *::before, html.pt-frozen *::after{animation-play-state:paused !important}

  ::view-transition-old(root),::view-transition-new(root){animation-duration:.32s;animation-timing-function:var(--ease)}
  @media (prefers-reduced-motion:no-preference){ body{transition:opacity .16s var(--ease)} }
  html.lang-veil body{opacity:0}

  @media (prefers-reduced-motion:reduce){
    .card-plat:active,.wbtn:active,
    .fx-sw:active,.cl-tg:active,.card-btn:active,.cl-copy:active,.lang-item:active,.mi:active,.ff-item:active,.info-item:active{transform:none}
  }

  :root{--lv-o:#fff;--lv-ph:color-mix(in srgb,var(--theme) 55%,rgba(255,255,255,.78));--lv-tr:var(--song-text)}
  .lv-tg[data-lv="o"]{--lvc:var(--lv-o)}
  .lv-tg[data-lv="ph"]{--lvc:var(--lv-ph)}
  .lv-tg[data-lv="tr"]{--lvc:var(--lv-tr)}
  .cl-tg[data-tg="ph"]{--lvc:var(--lv-ph)}
  .cl-tg[data-tg="en"]{--lvc:var(--lv-tr)}
  .hlh-ctrls .hlt-seg[aria-pressed="true"],.hlt-seg[aria-pressed="true"]{color:var(--lvc,#fff);background:color-mix(in srgb,var(--lvc,var(--theme)) 22%,transparent);border-color:color-mix(in srgb,var(--lvc,var(--theme)) 60%,transparent)}
  .lp-seg[aria-pressed="true"]{color:var(--lvc,#fff);background:color-mix(in srgb,var(--lvc,var(--theme)) 22%,transparent);border-color:color-mix(in srgb,var(--lvc,var(--theme)) 60%,transparent)}
  .lo-seg[aria-pressed="true"]{color:var(--lvc,#fff);background:color-mix(in srgb,var(--lvc,var(--theme)) 18%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lvc,var(--theme)) 55%,transparent)}
  .cl-tg[aria-pressed="true"]{background:color-mix(in srgb,var(--lvc,var(--theme)) 24%,transparent);color:var(--lvc,#fff);filter:none;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lvc,var(--theme)) 55%,transparent),0 0 12px -3px var(--tglow)}

  @media (forced-colors:active){
    :is(a,button,[tabindex],input):focus-visible{outline:2px solid CanvasText !important;outline-offset:2px}
  }

  :root{
    /* ONE surface for every panel = the player card's glass ramp (user call 2026-08-16) */
    --pan-bg:linear-gradient(180deg, rgba(var(--slate),calc(var(--glass)*.72)), rgba(var(--slate),calc(var(--glass)*.8)) 16%, rgba(var(--slate),calc(var(--glass)*.8)) 84%, rgba(var(--slate),calc(var(--glass)*.72)));
    --pan-blur:blur(18px);
    --pan-shadow:0 30px 80px rgba(0,0,0,.5);
    --page-bg:radial-gradient(120% 80% at 50% -6%, rgb(24,25,31) 0%, #0b0c10 52%, #050608 100%);
  }
  

  #dock,.dock-folder,#langMenu,#settingsMenu,#infoMenu,.cl-copy-menu,#hero,#lyricsPanel,#aboutSong,#upnext{
    background:var(--pan-bg);
    border-color:var(--glass-bd);
    -webkit-backdrop-filter:var(--pan-blur);backdrop-filter:var(--pan-blur);
    box-shadow:var(--pan-shadow);
  }

  .lang-item{position:relative}
  .lang-item[aria-current="true"]{background:none;color:var(--song-text);filter:none;font-weight:600;box-shadow:none}
  .lang-item[aria-current="true"]::after{content:'✓';position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--song-text)}
  
  
  .fx-sw[aria-checked="true"]{background:color-mix(in srgb,var(--gold) 62%,#151a22);filter:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}

  html.pt-slowmo *, html.pt-slowmo *::before, html.pt-slowmo *::after{transition-duration:2200ms !important;animation-duration:2200ms !important}


  /* Shadow-glitch fixes: hover/state styles that ADD a filter forced the browser to
     re-rasterize the element (shadows flickered). Start every such element on an
     identity filter so the render path never flips. */
  .hero-lyr,.hp-link,.cp-lyrbtn,.cpt-like svg,.cl-sync-tap,.cl-tg,.lang-item,.fx-sw{filter:brightness(1)}
  .hero-lyr{transition:color .2s var(--ease)}
  .hp-link{transition:border-color .18s var(--ease),color .18s var(--ease),transform .18s var(--ease),filter .18s var(--ease)}
  .cp-lyrbtn{transition:background .18s var(--ease),color .18s var(--ease),transform .14s var(--ease),filter .2s var(--ease)}
  #dock .cl-tiktok{filter:drop-shadow(0 0 0 rgba(37,244,238,0)) drop-shadow(0 0 0 rgba(254,44,85,0))}
  .wcard .art{filter:brightness(1) saturate(1)}
  .art img{filter:brightness(1) saturate(1);transition:opacity .6s var(--ease),filter .5s var(--ease)}

  /* Settings menu: section headers */
  .sm-sec{font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(232,238,245,.5);padding:9px 8px 3px}
  

  #bg{filter:brightness(1) saturate(1) sepia(0);transition:filter 1.1s var(--ease)}
  #bgTint::after{transition:opacity 1.1s var(--ease)}
  
  
  
  

  


  /* ═══ Hovering a glass surface — read this before adding a :hover ═══════════
     If an element carries its OWN backdrop-filter,do NOT animate its own
     background / border-color on :hover. Repainting the box makes the browser
     re-run the blur against a freshly sampled backdrop,and for a frame the
     artwork behind it flashes dark. Paint the highlight on an inset ::before
     overlay instead: a child paints ABOVE the blur,so the cached backdrop is
     reused and nothing re-samples. Match the composite alpha (base .10 +
     overlay .09 ≈ .18) so the look is unchanged.

     Two traps that come with this pattern:
       1. Never put will-change / transform / filter on that overlay. Promoting
          it to its own compositor layer re-introduces the very re-sample the
          overlay exists to avoid — that was the Contact-button flash,where
          the dock highlight got promoted inside #dock's blur.
       2. Use ::before,not ::after. ::after is already the tooltip on the bar
          and player buttons (content:attr(aria-label)); a second ::after rule
          silently overwrites its content and inset and the tooltip vanishes.

     Elements WITHOUT their own backdrop-filter — dock items,.k-tool,.ff-item — are content inside a blurred box,not the blurred box itself.
     They can animate background normally; no overlay needed. */
  .wactions .wbtn{position:relative}
  .wactions .wbtn::before{content:'';position:absolute;inset:0;border-radius:inherit;
    background:rgba(255,255,255,.09);opacity:0;pointer-events:none;
    transition:opacity .2s var(--ease)}
  @media (hover:hover){
    .wactions .wbtn:hover::before{opacity:1}
  }

  .card-btn{position:relative}
  .card-btn::before{content:'';position:absolute;inset:0;border-radius:inherit;
    background:rgba(255,255,255,.1);opacity:0;pointer-events:none;transition:opacity .2s var(--ease)}
  .card-btn:hover::before,.card-btn:focus-visible::before{opacity:1}
  .card-btn > *{position:relative}

  .arrow::before{content:'';position:absolute;inset:0;border-radius:inherit;
    background:rgba(255,255,255,.116);opacity:0;pointer-events:none;transition:opacity .2s var(--ease)}
  .arrow:hover::before{opacity:1}


  /* ============ Fixes: settings popovers hug their content ============ */
  #settingsMenu{height:auto;max-height:var(--pop-h)}
  
  #settingsMenu .sm-sep{margin:10px 6px}

  /* ============ Fix: compact landscape layout ============
     Short windows (landscape phones, half-height desktop windows) used to
     stack the full player under a floor-width card and overflow the screen.
     Below 960px wide AND 640px tall, the active card lays out as a row:
     cover on the left, title + player + platforms beside it. */
  /* Also applies to any window wider than it is tall (small tablets, landscape
     phones): stacking a square cover above the controls leaves the card tiny
     with dead space either side — 29% of a 768px window before this.
     Landscape proportions only: a short PORTRAIT window (a phone with the
     browser chrome open, an embedded preview) must keep the stacked layout —
     the row squeezed the title into a 100px column there. */
  @media (max-width:959px) and (min-aspect-ratio:1/1){
    .wcard.active:not(.lyr-open){
      flex-basis:min(92vw, 620px);
      max-height:none}
    .wcard.active:not(.lyr-open) .wcard-face{
      flex-direction:row;align-items:center;gap:6px;
      padding:clamp(10px,2.4vh,16px)}
    .wcard.active:not(.lyr-open) .art{
      width:clamp(120px, 38vh, 260px);flex:0 0 auto;align-self:center;
      border-radius:14px}
    .wcard.active:not(.lyr-open) .art::after{display:none}
    .wcard.active:not(.lyr-open) .wtext{
      flex:1 1 auto;min-width:0;align-self:stretch;
      display:flex;flex-direction:column;justify-content:center;
      gap:clamp(6px,1.6vh,12px);padding:2px 12px 2px 14px}
    .wcard.active:not(.lyr-open) .cp-title{padding:0;order:-1}
    .wcard.active:not(.lyr-open) .cpt-name{
      font-size:clamp(17px,4.6vh,27px);letter-spacing:.05em;
      display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
    .wcard.active:not(.lyr-open) .cpt-subrow{margin-top:2px}
    .wcard.active:not(.lyr-open) .card-player{gap:5px;padding:0}
    .wcard.active:not(.lyr-open) .card-player .cp-controls{gap:9px;padding:2px 0 0}
    .wcard.active:not(.lyr-open) .card-player .cpc-r{flex-wrap:wrap;gap:6px}
    .wcard.active:not(.lyr-open) .card-player .cpc-r .k-tool{min-height:29px;padding:5px 10px}
    .wcard.active:not(.lyr-open) .card-actions{margin-top:2px;gap:8px;align-items:center;padding:0}
    .wcard.active:not(.lyr-open) .card-hero{display:none}
    .wcard.active:not(.lyr-open) .np-preview,
    .wcard.active:not(.lyr-open).k-bound .np-preview{display:none}
    .wcard.active:not(.lyr-open) .card-avail-lbl{display:none}
    .wcard.active:not(.lyr-open) .card-listen{gap:8px 14px;justify-content:center}
    .wcard.active:not(.lyr-open) .card-plat{font-size:10.5px}
    .wcard.active:not(.lyr-open) .card-plat-ic{width:18px;height:18px}
  }


  /* Menus ride the shared --pan-bg glass — one surface across menus, rails and dock,
     matched to the player card (user call 2026-08-16). */
  

  /* ═══ Discover + About are one place ══════════════════════════════════════
     The old #beyond strip (a scroll-down "Discover" band) and the About page
     said the same thing in two places,reached from one dock button. */
  .about-discover{text-align:center;margin:0 0 46px;padding:0 0 38px}
  .about-discover .by-head{margin:0 0 22px;font-family:var(--ui);font-size:11px;font-weight:600;
    letter-spacing:var(--eyebrow);text-transform:uppercase;color:var(--theme)}
  .about-discover .bq-text{margin:0;font-family:var(--display,'Cormorant Garamond',serif);
    font-style:italic;font-size:clamp(20px,2.4vw,29px);line-height:1.45;color:rgba(255,255,255,.92);
    text-wrap:pretty}
  .about-discover .bq-by{margin:12px 0 0;font-family:var(--ui);font-size:10px;font-weight:600;
    letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.45)}
  .about-discover .by-all{margin:26px auto 0;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
    min-height:44px;padding:12px 30px;cursor:pointer;font:inherit;font-family:var(--ui);font-size:11px;
    font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#fff;
    border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(255,255,255,.06);
    transition:background .2s var(--ease),border-color .2s var(--ease)}
  .about-discover .by-all:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5)}
  .about-discover .by-all:focus-visible{outline:2px solid var(--theme);outline-offset:2px}


  /* ═══ Phone layout ═══════════════════════════════════════════════════════
     The card was laid out like a desktop card scaled down: a 247px cover on a
     390px screen, with 400px of chrome stacked under it. On a phone the cover
     IS the page, so everything below it earns its place or goes:
       • the decorative signature lyric is a duplicate of the lyrics reader
       • "Available on" is self-evident above four platform logos
       • the volume slider was a 3px-tall track — phones have hardware volume
     That buys ~110px, which goes straight into the cover.
     Every remaining control is sized to a 44px minimum touch target. */
  @media (max-width:959px){
    .wcard.active .card-hero{display:none}
    .wcard.active .card-avail-lbl{display:none}

    .wcard.active .card-listen{display:flex;flex-wrap:nowrap;justify-content:center;gap:6px}
    .wcard.active .card-plat{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
      width:44px;height:44px;padding:0;border-radius:50%;background:rgba(255,255,255,.07)}
    .wcard.active .card-plat .card-plat-t{display:none}
    .wcard.active .card-plat .card-plat-ic{width:21px;height:21px}
    .wcard.active .card-plat svg{width:21px;height:21px}

    .card-player .cpc-l{display:none}

    .cp-controls .k-tool.cp-tprev,.cp-controls .k-tool.cp-tnext{min-width:44px;min-height:44px}
    .cp-controls .cp-tprev svg,.cp-controls .cp-tnext svg{width:22px;height:22px}
    .cp-playbtn{min-width:52px;min-height:52px}
    .cpt-like{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center}
    .cpt-like svg{width:21px;height:21px}
    .cp-controls .k-tool{min-height:44px}

    .cl-tg,.cl-lang,.cl-copy,.cl-back{min-height:44px}
    .hlh-lang .hlt-lang{min-height:44px}
    .lp-seg,.lo-seg,.hlt-seg{min-height:44px}
    .lo-tool{min-width:44px;min-height:44px}
    .wactions .wbtn,#menuBtn{width:44px;height:44px}
    #wayfinder .seg{min-width:24px;min-height:24px}

    /* these lose to more specific card rules unless matched at the same weight */
    .wcard.active:not(.lyr-open) .card-player .cpc-r .k-tool{min-height:44px;padding:8px 14px}
    .k-tools .k-tool,.cl-playback .k-tool{width:44px;height:44px}
    .k-volume-wrap{display:none}
    #dock .task-item{min-height:44px}
    .wbrand{min-height:44px;display:inline-flex;align-items:center}
  }

  /* If the card still can't fit (very short viewports), overflow from the
     bottom instead of clipping equally at both ends behind the fixed header. */
  @media (max-width:959px){ .scroller{align-items:safe center} }

  /* Short portrait viewports: compress the controls block — the title alone
     was an 86px block — so more of it survives above the dock. */
  @media (max-width:959px) and (max-height:620px) and (orientation:portrait){
    .cp-title{padding:4px 4px 2px}
    .cpt-name{font-size:16px}
    .card-actions{margin-top:8px}
    .wtext{padding:10px 14px 12px}
  }

  /* Very narrow screens: drop the wordmark text (logo stays) instead of
     showing a truncated "KAHALAN…" next to the header buttons. */
  @media (max-width:399px){ .wbrand-tx{display:none} }

  /* ---- Sizing pass: pointer targets + readable label floor ----
     Desktop controls that sat well under a comfortable click size,and the
     handful of 12px labels people actually read (as opposed to the uppercase
     micro-type,which stays where it is). Hit areas are grown with padding or
     a transparent ::before so no visual proportion changes. */

  /* Display panel: back arrow 27→34{width:34px;height:34px;margin-inline:-6px 2px}
  

  /* Toggle switch keeps its 40×23 track; the tappable area becomes 48×45 */
  .fx-sw::before{content:'';position:absolute;inset:-11px -4px;border-radius:999px}

  
  .wnav-link{display:inline-flex;align-items:center;min-height:36px}
  .wbrand{display:inline-flex;align-items:center;min-height:36px}

  /* Readable labels off the 12px floor */
  .un-s{font-size:12.5px}
  #heroLyrics .hlv-t,#heroLyricsT{font-size:13px}

  /* Wayfinder: 20×5 pill visually, 44×44 to the finger.
     Replaces the min-width/min-height override above, which inflated the
     pill itself into a 24px block on touch instead of just its hit area. */
  @media (max-width:959px){
    #wayfinder .seg{min-width:0;min-height:0}
    #wayfinder .seg::before{content:'';position:absolute;left:50%;top:50%;
      width:44px;height:44px;transform:translate(-50%,-50%)}
    #wayfinder .wf-dots{gap:14px}
  }

  /* Two-song catalog: Next always means "the other song"; Previous is redundant. */
  body.two-tracks .cp-prev,body.two-tracks .cp-tprev{display:none}

  /* ±10s skip: shown only in the two-song layout (desktop), where Previous is gone. */
  .cp-b10,.cp-f10{display:none}
  body.two-tracks .cp-b10,body.two-tracks .cp-f10{display:inline-flex}

  /* About-this-song story block in the right panel */
  .un-story{padding:2px 6px 4px}
  /* About panel (artist) */
  .abp-scroll{display:flex;flex-direction:column;gap:10px;min-height:0;overflow-y:auto;padding:0 6px 4px;scrollbar-width:thin;zoom:var(--abp-zoom,1)}
  /* Auto-fit column mode: on short/scaled viewports the rail widens and the content
     flows into two balanced columns so everything reads without scrolling. */
  #aboutSong.abp-cols .abp-scroll{display:block;column-count:2;column-gap:28px}
  #aboutSong.abp-cols .abp-scroll>*+*{margin-top:10px}
  #aboutSong.abp-cols .abp-hero{break-inside:avoid;break-after:avoid-column}
  #aboutSong.abp-cols .abp-k{break-inside:avoid;break-after:avoid-column}
  #aboutSong.abp-cols .lf-pills a,#aboutSong.abp-cols .contact{break-inside:avoid}
  .abp-hero{display:flex;align-items:center;gap:10px}
  .abp-logo{width:24px;height:24px;display:block}
  .abp-word{font-family:var(--disp);font-size:13px;letter-spacing:.32em;color:#fff}
  .abp-k{margin:6px 0 0;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(232,238,245,.82)}
  #aboutSong .bio{font-size:14px;line-height:1.55;color:rgba(232,238,245,.92)}
  #aboutSong #abpWhatHead{display:none} /* rail reads as one flow — fewer heading levels (critique pass) */
  #aboutSong .bio p{margin:0 0 8px}
  #aboutSong .bio p:last-child{margin-bottom:0}
  /* Connect: quiet flat links — no pill-on-panel boxes */
  .abp-connect{display:flex;flex-direction:column;gap:2px;margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1)}
  .abp-connect .abp-k{margin:14px 0 4px}
  .abp-connect .abp-k:first-child{margin-top:0}
  .abp-connect .lf-pills{flex-direction:column;align-items:stretch;gap:1px}
  .abp-connect .lf-pills a,.abp-connect .contact{display:flex;align-items:center;gap:12px;margin:0;padding:8px;min-height:38px;font-size:11.5px;width:auto;max-width:none;
        background:none;border:0;border-radius:11px;color:rgba(232,238,245,.88);overflow-wrap:anywhere;
        transition:background .2s var(--ease),color .2s var(--ease)}
  /* rows span the panel like settings-menu rows; the wash bleeds 8px past the heading line */
  .abp-connect .lf-pills,.abp-connect .contact{margin-inline:-8px}
  .abp-connect .lf-pills a .bi,.abp-connect .contact .bi{flex:0 0 auto;width:20px;display:inline-flex;align-items:center;justify-content:center}
  .abp-connect .lf-pills a:hover,.abp-connect .contact:hover,
  .abp-connect .lf-pills a:focus-visible,.abp-connect .contact:focus-visible{background:rgba(255,255,255,.07);color:#fff;text-decoration:none;outline:none}
  .abp-connect .lf-pills a .bi img{width:17px;height:17px}
  .abp-connect .lf-pills a .bi svg{width:17px;height:17px}
  /* flat links carry their brand colors full-time (hover adds the shared panel-row wash) */
  .abp-connect .lf-pills a[data-platform="instagram"] .bi{color:#e1306c}
  /* TikTok: the brand cyan is unreadable on the photo — rest as panel ink, the cyan/red offset appears on hover */
  .abp-connect .lf-pills a[data-platform="tiktok"] .bi{color:inherit}
  body #aboutSong .abp-connect .lf-pills a[data-platform="tiktok"] .bi{color:#000;filter:drop-shadow(-1px -.6px 0 #25F4EE) drop-shadow(1px .6px 0 #FE2C55)}
  .abp-connect .lf-pills a[data-platform="tiktok"]:hover .bi,.abp-connect .lf-pills a[data-platform="tiktok"]:focus-visible .bi{color:#fff;filter:drop-shadow(-1.2px -.8px 0 #25F4EE) drop-shadow(1.2px .8px 0 #FE2C55)}
  body.sky-day .abp-connect .lf-pills a[data-platform="tiktok"]:hover .bi,body.sky-day .abp-connect .lf-pills a[data-platform="tiktok"]:focus-visible .bi{color:#06283f}
  .abp-connect .contact .bi{color:var(--red);filter:brightness(1.35)}
  .un-story-t{font-family:'GFS Didot','Cormorant Garamond',serif;font-size:17px;letter-spacing:.04em;color:#fff;line-height:1.25;overflow-wrap:anywhere}
  .un-story-s{margin-top:3px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(232,238,245,.66)}
  .un-story-b{margin:9px 0 0;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:14.5px;line-height:1.5;color:rgba(232,238,245,.85);text-wrap:pretty}
  .un-other-lbl{padding:0 6px 6px;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(232,238,245,.8)}

  /* Control row: one hero Play; satellites are quiet line icons that pick up
     the song accent only on interaction (hover/active) */
  @media (min-width:960px){
    .cp-controls .k-tool{min-width:52px;min-height:52px}
    .cp-controls .cpc-c{gap:14px}
    .cp-controls .cpc-c .k-tool{width:52px;height:52px;border-radius:50%;
      background:none;border:0;opacity:1;color:rgba(232,238,245,.72);
      transition:background .18s var(--ease),color .18s var(--ease)}
    .cp-controls .cpc-c .k-tool:hover,.cp-controls .cpc-c .k-tool:focus-visible{background:rgba(255,255,255,.07);
      color:color-mix(in srgb,var(--theme) 60%,#fff)}
    .cp-controls .cp-tnext svg,.cp-controls .cp-tprev svg{width:28px;height:28px}
    .cp-controls .cp-b10 svg,.cp-controls .cp-f10 svg{width:32px;height:32px}
    .cp-controls .k-volume-wrap svg{width:24px;height:24px}
    .cp-controls .k-volume{--kv-h:5px}
    .wcard.active:not(.lyr-open) .card-player .cpc-r .k-tool{min-height:44px;padding:9px 14px}
    .wcard.active:not(.lyr-open) .card-player .cpc-r .k-tool svg{width:19px;height:19px}
  }

  /* Volume: longer track for fine 1% adjustments + live readout; center cluster nudged right */
  @media (min-width:960px){
    .cp-controls .cpc-l{min-width:0}
    .cp-controls .k-volume-wrap{position:relative;min-width:0;flex:1 1 auto;max-width:170px}
    .cp-controls .k-volume{width:auto;flex:1 1 auto;min-width:56px}
    /* % readout floats above the slider while adjusting — costs no row width */
    .k-vol-pct{position:absolute;z-index:6;left:50%;top:-26px;transform:translateX(-50%);padding:2px 7px;border-radius:6px;
      background:rgba(10,16,26,.85);border:1px solid rgba(255,255,255,.16);
      font-size:10.5px;font-variant-numeric:tabular-nums;letter-spacing:.04em;color:rgba(232,238,245,.9);
      opacity:0;pointer-events:none;transition:opacity .15s var(--ease)}
    .k-volume-wrap:hover .k-vol-pct,.k-volume-wrap:focus-within .k-vol-pct{opacity:1}
    /* right corner: heart holds its own against the volume cluster */
    .cp-controls .cpt-like{opacity:1}
    .cp-controls .cpt-like svg{width:26px;height:26px}
  }
  @media (max-width:959px){ .k-vol-pct{display:none} }

  /* Loading feedback on the cover play button, matching the main button's ring */
  .k-pending .art-play{position:relative}
  .k-pending .art-play::before{content:'';position:absolute;inset:0;border-radius:inherit;
    background:rgba(255,255,255,.25);animation:ytpend 1s ease-in-out infinite}
  @keyframes ytpend{0%,100%{opacity:.1}50%{opacity:.65}}
  .k-pending .art-play .ap-play{opacity:.45}
  @media (prefers-reduced-motion:reduce){ .k-pending .art-play::before{animation-duration:1.6s} }

  /* Player finish: idle timeline rests dimmer until real playback has started (k-live);
     k-error swaps the timeline for a quiet fallback line. */
  .wcard .card-player .cp-timeline{opacity:.55;transition:opacity .3s var(--ease)}
  .wcard.k-live .card-player .cp-timeline{opacity:1}
  .cp-err{display:none;min-height:24px;align-items:center;justify-content:center;gap:4px;
    font-family:var(--ui);font-size:12px;letter-spacing:.02em;color:rgba(232,238,245,.72);text-align:center;text-wrap:pretty}
  .cp-err a{color:#fff;text-decoration:underline;text-underline-offset:3px;border-radius:4px}
  .wcard.k-error .card-player .cp-err{display:flex}
  .wcard.k-error .card-player .cp-timeline{display:none}


/* ================= v2 — song-theme redesign: single-song stage ================= */
.wcard:not(.active){display:none !important}
.scroller{overflow-x:hidden;scroll-snap-type:none;justify-content:center;padding:0}
#wayfinder,.arrow{display:none !important}
@media (min-width:960px){ #dock{display:none !important} }
@media (prefers-reduced-motion:no-preference){ body.swapped .wcard.active.enter{animation:v2CardIn .55s var(--ease-calm)} }
@keyframes v2CardIn{from{opacity:0}to{opacity:1}}

/* Backdrop-filter cross-talk fix: the four glass panels share one backdrop
   snapshot, so a hover repaint inside any one (Up Next row, lyric line, hero
   pill) made Chromium re-sample ALL of them — a transient band flashing across
   the other panels. Promoting each panel to its own compositor layer gives it
   an independent backdrop, so a repaint in one no longer dirties the rest.
   translateZ(0) is safe with backdrop-filter and doesn't clip shadows/tooltips
   (unlike contain:paint). The card already owns a layer via will-change. */
#hero,#upnext,#aboutSong{transform:translate3d(0,var(--snapY,0px),0);isolation:isolate;-webkit-backface-visibility:hidden;backface-visibility:hidden;will-change:backdrop-filter}
#lyricsPanel{transform:translate3d(0,var(--snapY,0px),0);isolation:isolate;will-change:backdrop-filter}
#dock,#listenBar{will-change:backdrop-filter}
/* Per-frame updaters (time readouts ~7Hz, live lyric text, auto-scrolling lyric lists)
   get their OWN raster layer: without it each update invalidates the whole blurred
   panel raster and Chrome's re-tiling shows as transient seam lines during playback. */
.cp-timeline,.hero-quote,.lp-scroll,.lo-scroll,.cl-body,.np-preview{transform:translateZ(0)}

/* Rails share the card's live glass, verbatim (user call 2026-08-16: every panel =
   player-card style; supersedes the opaque seam fix — see DESIGN-LOCK). The old opaque
   !important override also silently broke Settings → Panel backgrounds
   (body.panels-bare's background:none lost to !important). Trade accepted: blur
   everywhere, toggle works again; overlay hovers, grid-snap, isolation and short rail
   shadows below all remain to damp blur cross-talk. */
/* Player card leads the composition: side panels sit a step quieter (critique pass) */
.wcard.active{box-shadow:0 36px 90px -32px rgba(0,0,0,.78), 0 0 64px -30px var(--song-glow)}

@media (min-width:960px) and (hover:hover){
  .wcard.active:not(.lyr-open):not(.k-video) .art:hover>img.ld{opacity:.8}
}

/* soft song presence on the live player shell (state-driven only — never :hover on the
   blurred card itself; see the glass-hover rule above) */
.wcard.active.k-playing{border-color:color-mix(in srgb, var(--theme) 30%, var(--glass-bd));
  box-shadow:0 30px 80px rgba(0,0,0,.5), 0 0 46px -10px var(--song-glow)}

/* LISTEN ON — compact row under the player: destination links, not a destination.
   2026 finish: crafted glass (deeper fill, inset top-light), calm 50ms staggered
   fade-in on song switch (delay set in renderListenOn), press veil via ::after
   opacity (seam-safe), accent keyboard ring, lang-aware label tracking. */
#listenBar{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 4px;margin-top:clamp(8px,1.2vh,14px);max-width:min(92vw,760px);
  padding:5px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(8,13,20,.5);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ln-head{padding-inline:14px 8px}
.ln-head{font-family:var(--ui);font-size:10px;font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:var(--song-text);opacity:.9;text-shadow:0 1px 10px rgba(0,0,0,.65)}
.ln-head:lang(he),.ln-head:lang(ar){letter-spacing:.08em} /* heavy caps tracking is Latin-only */
.ln-head:lang(ja){letter-spacing:.14em}
.ln-plats{display:flex;flex-wrap:wrap;justify-content:center;gap:9px}
.ln-plat{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:38px;padding:9px 15px;border-radius:9px;
  border:0;background:none;
  text-decoration:none;color:rgba(255,255,255,.9);font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.04em;white-space:nowrap;
  transition:color .2s var(--ease),opacity .15s var(--ease);animation:lnIn .5s var(--ease) both}
@keyframes lnIn{from{opacity:0}to{opacity:1}}
.ln-ic{display:inline-flex;width:18px;height:18px;flex:0 0 auto;color:rgba(255,255,255,.92)}
.ln-ic svg{width:100%;height:100%;fill:currentColor}
/* no pill shapes (user call): quiet flat links inside the one glass — hover = accent underline */
.ln-plat:hover,.ln-plat:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb, var(--theme) 65%, transparent)}
.ln-plat:active{opacity:.7}
.ln-plat:focus-visible{outline:2px solid color-mix(in srgb, var(--theme) 70%, #fff);outline-offset:2px}
.ln-plat[data-platform="spotify"] .ln-ic{color:#1ED760}
.ln-plat[data-platform="apple"] .ln-ic{color:#FA455C}
.ln-plat[data-platform="youtube"] .ln-ic,.ln-plat[data-platform="ytmusic"] .ln-ic{color:#ff0000}
.ln-plat[data-platform="youtube"] .yt-tri{fill:#fff}
@media (hover:none){ .ln-plat{min-height:44px} }
@media (prefers-reduced-motion:reduce){ .ln-plat{animation:none} }
body.grid-open #listenBar,body.about-open #listenBar,body.lyrics-over #listenBar,body:has(.wcard.lyr-open) #listenBar{display:none}

/* desktop card stays lean: platforms live in the LISTEN ON panel */
.wcard .card-avail-lbl,.wcard .card-listen{display:none !important}

/* Explore-all CTA hover is handled by its ::before overlay (see .un-viewall::before) —
   compositor-only opacity, so it never repaints the blurred #upnext box. */

/* shadow system fix: rail panels are TRANSLUCENT and stacked 12px apart — any shadow
   thrown further than the gap is re-sampled by the next panel's backdrop blur and
   shows through it as a dark band. Keep rail shadows' vertical extent under 12px
   (offset + blur − |spread| ≤ ~8px); pan-shadow stays for solitary floating surfaces
   (player card, menus, sheets). */
#startRail>aside,#sideRail>aside{box-shadow:0 4px 12px -8px rgba(0,0,0,.6)}
#listenBar{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 26px -14px rgba(0,0,0,.5)}


/* ═══ CYCLADIC DAY SKY — per-song skies (user-approved direction 1b, 2026-08-16) ═══
   A track with sky:"day" in the manifest (A Thousand Seas) sets body.sky-day via
   applySongTheme: the whole chrome turns Greece white-and-blue. Japón has no flag
   and keeps the night glass untouched. Token flips first (they drive --pan-bg, the
   card, dock and menus through the shared --slate formula), then ink overrides.
   Ink ramp: #0d2b47 strong · rgba(16,48,79,.66) secondary · #1e5a96 eyebrows ·
   #2563a8 dome-blue lead. Seam rules unchanged: opaque surfaces, overlay hovers. */
body.sky-day{
  --slate:250,252,255;
  --glass-bd:rgba(24,74,128,.2);
  --pan-shadow:0 24px 60px -30px rgba(16,40,72,.38);
  --page-bg:radial-gradient(120% 80% at 50% -6%, #fdfeff 0%, #eaf2f9 52%, #dce8f2 100%);
  --song-text:color-mix(in srgb, var(--theme) 36%, #10304f);
  --song-glow:color-mix(in srgb, var(--theme) 26%, transparent);
  --lv-tr:rgba(16,48,79,.74);
  --glass:0.95;
  --lv-ph:rgba(16,48,79,.62);
  /* --pan-bg must be REDECLARED here: var(--slate) inside a custom property bakes at the
     declaring element (:root, night slate), so the body-level --slate flip never reaches
     it. Re-baking the same formula at body picks up the day slate for #dock & sheets. */
  --pan-bg:linear-gradient(180deg, rgba(var(--slate),calc(var(--glass)*.72)), rgba(var(--slate),calc(var(--glass)*.8)) 16%, rgba(var(--slate),calc(var(--glass)*.8)) 84%, rgba(var(--slate),calc(var(--glass)*.72)));
  color:#10304f;
}
/* morning atmosphere: bright art, soft blue floor for depth */
body.sky-day #bgTint,html[dir="rtl"] body.sky-day #bgTint{background:linear-gradient(90deg, rgba(244,250,255,.5) 0%, rgba(244,250,255,.22) 26%, rgba(244,250,255,.04) 46%, rgba(244,250,255,.04) 54%, rgba(244,250,255,.22) 74%, rgba(244,250,255,.5) 100%),linear-gradient(180deg, rgba(248,252,255,.42) 0%, rgba(248,252,255,.1) 34%, rgba(198,220,238,.42) 100%)}
body.sky-day #vignette::before{background:radial-gradient(132% 112% at 50% 40%, transparent 40%, rgba(30,70,110,.15) 78%, rgba(20,50,85,.28) 100%)}

/* ===== Baked glass (desktop): pre-blurred background per panel =====
   Fixes the playback seam-line bug for good: live backdrop-filter over playing
   video re-tiles every frame in Chrome, so persistent panels instead paint their
   own pre-blurred pixel-aligned copy of the static bg photo + tint (::before,
   geometry fed by js/glass.js). Identical look, immune to video. Keep song
   backgrounds static images. Transient popovers (menus) keep true live blur. */
:root{
  --gtA:linear-gradient(90deg, rgba(4,13,27,.5) 0%, rgba(4,13,27,.28) 26%, rgba(4,13,27,.06) 46%, rgba(4,13,27,.06) 54%, rgba(4,13,27,.28) 74%, rgba(4,13,27,.5) 100%);
  --gtB:linear-gradient(180deg, rgba(4,7,11,.56) 0%, rgba(4,7,11,.38) 34%, rgba(4,7,11,.78) 100%);
}
html[dir="rtl"]{--gtB:linear-gradient(180deg, rgba(4,7,11,.5) 0%, rgba(4,7,11,.32) 34%, rgba(4,7,11,.72) 100%)}
body.sky-day{
  --gtA:linear-gradient(90deg, rgba(244,250,255,.5) 0%, rgba(244,250,255,.22) 26%, rgba(244,250,255,.04) 46%, rgba(244,250,255,.04) 54%, rgba(244,250,255,.22) 74%, rgba(244,250,255,.5) 100%);
  --gtB:linear-gradient(180deg, rgba(248,252,255,.42) 0%, rgba(248,252,255,.1) 34%, rgba(198,220,238,.42) 100%);
}
@media (min-width:960px){
  body.baked-glass :is(#hero,#lyricsPanel,#aboutSong,#upnext,#listenBar){
    -webkit-backdrop-filter:none;backdrop-filter:none;background:none;
    position:relative;isolation:isolate;will-change:auto}
  body.baked-glass :is(#hero,#lyricsPanel,#aboutSong,#upnext,#listenBar)::before{
    content:'';position:absolute;inset:-48px;z-index:-1;pointer-events:none;
    clip-path:inset(48px round var(--gr,18px));
    background-image:var(--gveil,var(--pan-bg)),var(--gtA),var(--gtB),var(--gbg,none);
    background-size:100% 100%,var(--gsv,100vw 100svh),var(--gsv,100vw 100svh),var(--gsp,cover);
    background-position:0 0,var(--gpv,0 0),var(--gpv,0 0),var(--gpp,center);
    background-repeat:no-repeat;
    filter:blur(18px) saturate(1.05)}
  body.baked-glass.gflip :is(#hero,#lyricsPanel,#aboutSong,#upnext,#listenBar)::before{transform:scaleX(-1)}
  body.baked-glass #listenBar{--gr:999px;
    --gveil:linear-gradient(rgba(8,13,20,.5),rgba(8,13,20,.5))}
  body.sky-day.baked-glass #listenBar{--gveil:linear-gradient(rgba(255,255,255,.78),rgba(255,255,255,.78))}
  body.baked-glass #listenBar::before{filter:blur(10px) saturate(1.05)}
  /* queue-open solidification: veil goes in the pseudo, element bg stays none */
  body.baked-glass.lyrics-focus.queue-open :is(#upnext,#aboutSong){background:none;
    --gveil:linear-gradient(rgba(8,10,14,.92),rgba(8,10,14,.92))}
}
body.sky-day a:focus-visible,body.sky-day button:focus-visible,body.sky-day [tabindex]:focus-visible{outline-color:#10304f}
/* nav */
/* AA ink: chrome that used alpha-muted navy now carries full ink in both panel modes */
body.sky-day :is(.wnav-link,.lang-code,.lang-caret,.wbtn,.hlh-title,.hlh-k,.hero-lyr,.lp-title,.lp-langk,.lp-seg-t,.lyr-sec,.un-dur,.un-s,.un-num,.ln-head,.ln-t){color:#0b2742}
body.sky-day :is(.un-other-lbl,.un-head,.abp-k){color:#134070}
body.sky-day .wbrand-tx{color:#2f6bc4;text-shadow:0 1px 12px rgba(255,255,255,.6)}
body.sky-day .wnav-link{color:rgba(16,48,79,.74);text-shadow:0 1px 10px rgba(255,255,255,.5)}
body.sky-day .wnav-link:hover,body.sky-day .wnav-link:focus-visible{color:#0b2a47}
body.sky-day .wbtn{color:rgba(16,48,79,.82)}
@media (hover:hover){ body.sky-day .wbtn:hover{color:#0b2a47;background:rgba(16,48,79,.08)} }
body.sky-day .wbtn:focus-visible{color:#0b2a47;background:rgba(16,48,79,.08)}
body.sky-day .wactions .wbtn::before{background:rgba(16,48,79,.08)}
/* hero panel */
body.sky-day #hero{color:#10304f}
body.sky-day .hq-text{color:#0d2b47;text-shadow:none}
body.sky-day .hq-tr{text-shadow:none}
body.sky-day .hq-ph{color:rgba(16,48,79,.66);text-shadow:none}
body.sky-day .hlh-title{color:rgba(16,48,79,.74)}
body.sky-day .hlh-k{color:rgba(16,48,79,.7)}
body.sky-day .hlt-seg{background:rgba(16,48,79,.06);color:rgba(16,48,79,.8)}
body.sky-day .hlt-seg:hover{color:#0b2a47;background:rgba(16,48,79,.12)}
body.sky-day .hlt-seg[aria-pressed="true"]{color:#083049}
body.sky-day .hlh-ctrls .hlt-seg{background:none;color:rgba(16,48,79,.62)}
body.sky-day .hlh-ctrls .hlt-seg:hover{color:#0b2a47;background:none}
body.sky-day .hlh-ctrls .hlt-seg[aria-pressed="true"]{color:#083049;background:none}
body.sky-day .cl-lang{background-color:rgba(255,255,255,.72);border-color:rgba(24,74,128,.24);color:#10304f;background-image:linear-gradient(45deg,transparent 50%,rgba(16,48,79,.75) 50%),linear-gradient(135deg,rgba(16,48,79,.75) 50%,transparent 50%)}
body.sky-day .cl-lang{box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 1px 3px rgba(16,40,72,.10)}
body.sky-day .cl-lang:hover,body.sky-day .cl-lang:focus-visible{color:#0b2a47;background-color:rgba(255,255,255,.85)}
body.sky-day .cl-lang:focus-visible{border-color:color-mix(in srgb,var(--theme) 55%,rgba(24,74,128,.4))}
body.sky-day .hero-lyr{color:rgba(16,48,79,.78)}
body.sky-day .hero-lyr:hover,body.sky-day .hero-lyr:focus-visible{color:#0b2a47}
body.sky-day .hero-lyr::before{background:rgba(16,48,79,.05)}
/* player card */
body.sky-day .wcard.active{box-shadow:0 30px 70px -30px rgba(16,40,72,.5), 0 0 56px -28px var(--song-glow)}
body.sky-day .wcard.active.k-playing{border-color:color-mix(in srgb, var(--theme) 38%, var(--glass-bd));box-shadow:0 26px 64px -28px rgba(16,40,72,.5), 0 0 44px -10px var(--song-glow)}
body.sky-day .cpt-name{color:#0d2b47;text-shadow:none}
body.sky-day .cp-cur{color:rgba(13,43,71,.92)}
body.sky-day .cp-timeline .cp-rem{color:rgba(16,48,79,.72)}
body.sky-day .k-volume::-webkit-slider-thumb{background:#2563a8;box-shadow:0 1px 4px rgba(16,40,72,.4)}
body.sky-day .k-volume::-moz-range-thumb{background:#2563a8;box-shadow:0 1px 4px rgba(16,40,72,.4)}
body.sky-day .cp-signal-track{background:rgba(16,60,110,.24)}
body.sky-day .cp-controls .k-tool{color:#12405c}
body.sky-day .cp-controls .k-tool:hover,body.sky-day .cp-controls .k-tool:focus-visible{color:#083049}
body.sky-day .k-tool{background:rgba(16,48,79,.07);color:rgba(16,48,79,.82)}
body.sky-day .k-tool:hover,body.sky-day .k-tool:focus-visible{background:rgba(16,48,79,.13);color:#083049}
body.sky-day .k-volume-wrap{color:rgba(16,48,79,.75)}
body.sky-day .k-volume{--kv-fill:color-mix(in srgb,var(--theme) 65%,#0d2b47)}
body.sky-day .cp-queue[aria-pressed="false"]{color:rgba(16,48,79,.45)}
body.sky-day .cp-playbtn{background:#2563a8;box-shadow:0 14px 32px -14px rgba(23,64,112,.75),0 2px 10px -4px rgba(16,40,72,.4),inset 0 -1px 0 rgba(8,24,44,.28)}
body.sky-day .cp-playbtn svg{fill:#fff}
body.sky-day .cp-playbtn:hover,body.sky-day .cp-playbtn:focus-visible{background:#2e70b8;box-shadow:0 16px 38px -14px rgba(23,64,112,.8),0 2px 10px -4px rgba(16,40,72,.4),0 0 0 6px color-mix(in srgb,var(--theme) 22%,transparent)}
body.sky-day .k-pending .cp-playbtn::before{border-top-color:rgba(255,255,255,.9)}
body.sky-day .wcard.k-playing .cp-playbtn{box-shadow:0 14px 32px -14px rgba(23,64,112,.75),0 2px 10px -4px rgba(16,40,72,.4)}
@media (max-width:959px) and (min-aspect-ratio:1/1){
  body.sky-day .wcard.active:not(.lyr-open) .card-player .cpc-r .k-tool{background:rgba(16,48,79,.07);border-color:rgba(24,74,128,.22);color:rgba(16,48,79,.85)}
}
@media (max-width:959px){
  body.sky-day .wcard.active:not(.lyr-open) .card-player .cpc-r .k-tool{background:rgba(16,48,79,.07);border:1px solid rgba(24,74,128,.22);color:rgba(16,48,79,.85)}
}
/* lyrics panel */
body.sky-day .lp-line .lp-o{color:#123a5c}
body.sky-day #lyricsPanel .lp-line.ll-active .lp-o{color:#06283f;text-shadow:0 0 22px color-mix(in srgb,var(--theme) 28%,transparent)}
body.sky-day.lv-ph:not(.lv-o) #lyricsPanel .lp-ph{color:rgba(13,43,71,.9)}
body.sky-day .lp-title{color:rgba(16,48,79,.74)}
body.sky-day .lp-langk{color:rgba(16,48,79,.7)}
body.sky-day .lp-seg{background:rgba(16,48,79,.06);color:rgba(16,48,79,.82)}
body.sky-day .lp-seg:hover,body.sky-day .lp-seg:focus-visible{background:rgba(16,48,79,.12)}
body.sky-day .lp-seg[aria-pressed="true"]{color:#083049;background:rgba(16,48,79,.14);border-color:rgba(16,48,79,.32)}
body.sky-day .lp-close{color:rgba(16,48,79,.7)}
body.sky-day .lp-close:hover,body.sky-day .lp-close:focus-visible{background:rgba(16,48,79,.1);color:#083049}
/* up next */
body.sky-day .un-item{color:#0d2b47}
body.sky-day .un-item::before{background:rgba(16,48,79,.06);border-color:rgba(16,48,79,.22)}
body.sky-day .un-item:hover .un-t,body.sky-day .un-item:focus-visible .un-t{color:#06283f}
body.sky-day #upnext.k-on .un-item-now .un-t{color:#06283f}
body.sky-day .un-item-now{background:rgba(16,48,79,.1)}
body.sky-day .un-s{color:rgba(16,48,79,.74)}
/* panels off: sub-labels and the mail glyph carry no glass, so they take full ink */
body.panels-bare :is(#upnext,#startRail) :is(.un-s,.un-num){opacity:1}
body.sky-day.panels-bare :is(#upnext,#startRail) :is(.un-s,.un-num){color:#0d2b47}
body.sky-day.panels-bare #sideRail :is(.lf-pills a,.contact) .material-symbols-outlined{color:#8d1a20}
/* panels off, day sky: the connect list sits straight on a bright photo — full ink,
   a readable sub-line and a tight white halo instead of a plate */
body.sky-day.panels-bare #sideRail :is(.lf-pills a,.contact){
      color:#0b2742;font-weight:600;text-shadow:0 0 3px rgba(255,255,255,.95),0 1px 10px rgba(255,255,255,.85)}
body.sky-day.panels-bare #sideRail #aboutSong.abp-cn-compact :is(.lf-pills a,.contact){text-shadow:none;font-weight:700}
body.sky-day.panels-bare #sideRail :is(.lf-pills a,.contact)::after{
      color:#123a5e;font-size:12px;font-weight:500;opacity:1}
body.sky-day .un-dur{color:rgba(16,48,79,.7)}
body.sky-day .un-head{color:#1e5a96}
body.sky-day .un-viewall{border-color:rgba(24,74,128,.34);color:rgba(13,43,71,.9)}
body.sky-day .un-viewall::before{background:rgba(16,48,79,.06)}
/* about rail */
body.sky-day .abp-word{color:#0d2b47}
body.sky-day .abp-k{color:#1e5a96}
body.sky-day #aboutSong .bio{color:rgba(13,43,71,.94)}
body.sky-day #aboutSong{color:#10304f}
body.sky-day .bio em{color:#06283f}
body.sky-day .abp-connect{border-top-color:rgba(24,74,128,.18)}
body.sky-day .abp-connect .lf-pills a,body.sky-day .abp-connect .contact{color:rgba(13,43,71,.94)}
body.sky-day .abp-connect .lf-pills a:hover,body.sky-day .abp-connect .contact:hover,
body.sky-day .abp-connect .lf-pills a:focus-visible,body.sky-day .abp-connect .contact:focus-visible{color:#06283f;background:rgba(16,48,79,.07)}
body.sky-day .un-story-t{color:#0d2b47}
body.sky-day .un-story-s{color:rgba(16,48,79,.68)}
body.sky-day .un-story-b{color:rgba(13,43,71,.92)}
body.sky-day .un-other-lbl{color:#1e5a96}
/* bare-panel floating-text ink */
body.sky-day.panels-bare #aboutSong .un-head{color:rgba(13,43,71,.9)}
/* listen on — one glass bar; links are quiet segments inside it */
body.sky-day #listenBar{background:rgba(255,255,255,.78);border-color:rgba(24,74,128,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 10px 26px -14px rgba(16,40,72,.45)}
body.sky-day .ln-head{text-shadow:none}
body.sky-day .ln-plat{color:#10304f}
body.sky-day .ln-plat:hover,body.sky-day .ln-plat:focus-visible{color:#06283f;text-decoration-color:color-mix(in srgb, var(--theme) 70%, #10304f)}
body.sky-day .ln-plat:focus-visible{outline-color:color-mix(in srgb, var(--theme) 55%, #0b2a47)}
/* menus & popovers (shared glass; day ink) */
body.sky-day #settingsMenu,body.sky-day #langMenu,body.sky-day #infoMenu,body.sky-day .cl-copy-menu{color:#123a5c}
body.sky-day .fx-row label{color:rgba(13,43,71,.88)}
body.sky-day .sm-ic{color:rgba(16,48,79,.55)}
body.sky-day .sm-chev{color:rgba(16,48,79,.38)}
body.sky-day .sm-item:hover .sm-ic,body.sky-day .sm-item:focus-visible .sm-ic,body.sky-day .fx-row:hover .sm-ic{color:rgba(13,43,71,.85)}
body.sky-day .sm-item:hover .sm-chev,body.sky-day .sm-item:focus-visible .sm-chev{color:rgba(16,48,79,.7)}
body.sky-day .fx-row:hover{background:rgba(16,48,79,.05)}
body.sky-day .sm-sec{color:rgba(16,48,79,.55)}
body.sky-day .sm-item,body.sky-day .lang-item,body.sky-day .info-item,body.sky-day .cl-copy-item,body.sky-day .fx-row{color:rgba(13,43,71,.88)}
body.sky-day .lang-lyrics-choice{border-top-color:rgba(24,74,128,.18)}
body.sky-day .lang-lyrics-label{color:rgba(16,48,79,.62)}
body.sky-day .sm-item:hover,body.sky-day .lang-item:hover,body.sky-day .info-item:hover,body.sky-day .cl-copy-item:hover{background:rgba(16,48,79,.07);color:#06283f}
body.sky-day .fx-sw{background:rgba(16,48,79,.22)}
body.sky-day .fx-sw[aria-checked="true"]{background:color-mix(in srgb,var(--gold) 65%,#e6f0f8)}
/* dock (mobile) */
body.sky-day #dock{color:#10304f}
body.sky-day #dock .task-item{color:#10304f}
body.sky-day #dock .task-item .ti-lbl{color:#10304f}
body.sky-day #dock .task-item:hover{background:rgba(16,48,79,.08)}
body.sky-day #dock .task-item:hover .ti-lbl,body.sky-day #dock .task-item:active .ti-lbl{color:#06283f;filter:none}
body.sky-day #dock .task-item:focus-visible{outline-color:rgba(16,48,79,.75)}
body.sky-day #dock .task-sep{background:linear-gradient(180deg, transparent, rgba(16,48,79,.35) 50%, transparent)}
/* top-nav LYRICS task (wnav2 family) */
body.sky-day .wnav2 .task-item{color:rgba(16,48,79,.74);text-shadow:0 1px 10px rgba(255,255,255,.5)}
body.sky-day .wnav2 .task-item:hover,body.sky-day .wnav2 .task-item[aria-expanded="true"],body.sky-day .wnav2 .task-item[aria-current="true"],body.sky-day.lyrics-focus #navLyrics{color:#0b2a47}
body.sky-day .wnav2 .task-item:focus-visible{outline-color:rgba(16,48,79,.75)}
/* menu chrome details */
body.sky-day #settingsMenu,body.sky-day #langMenu,body.sky-day #infoMenu,body.sky-day .cl-copy-menu{border-color:rgba(24,74,128,.22);box-shadow:0 20px 54px -18px rgba(16,40,72,.4)}
body.sky-day .k-vol-pct,body.sky-day .cp-bub{background:rgba(247,250,253,.94);border-color:rgba(24,74,128,.22);color:#0d2b47}
body.sky-day .sm-sep{background:rgba(16,48,79,.14)}
body.sky-day .sm-item{color:rgba(13,43,71,.88)}
/* heart prompt */
body.sky-day #heartPrompt{color:#10304f;background:rgba(250,252,255,.96);border-color:color-mix(in srgb,var(--theme) 40%,rgba(24,74,128,.22));box-shadow:0 14px 40px rgba(16,40,72,.35)}
body.sky-day .hp-title{color:var(--song-text);filter:none}
body.sky-day .hp-link{border-color:rgba(16,48,79,.28)}
body.sky-day .hp-later{color:rgba(16,48,79,.6)}
body.sky-day .hp-later:hover,body.sky-day .hp-later:focus-visible{color:#06283f}
/* explore-all grid */
body.sky-day #grid{background:rgba(236,244,250,.9);color:#10304f}
body.sky-day .gcard{color:#10304f}
body.sky-day .gcard .t{color:#0d2b47}
body.sky-day .gcard .s{color:rgba(16,48,79,.6)}
/* about & a11y pages */
body.sky-day #aboutPage,body.sky-day #a11yPage{color:#123a5c}
body.sky-day .about-word{color:#0d2b47}
body.sky-day .bio{color:#123a5c}
body.sky-day .site-foot{color:rgba(16,48,79,.55)}
body.sky-day .site-foot .foot-fine{color:rgba(16,48,79,.5)}
body.sky-day .about-discover .bq-text{color:rgba(13,43,71,.92)}
body.sky-day .about-discover .bq-by{color:rgba(16,48,79,.5)}
body.sky-day .about-discover .by-all{color:#fff;background:#2563a8;border-color:#2563a8}
body.sky-day .ab-close{background:rgba(16,48,79,.08);color:#10304f;border-color:rgba(24,74,128,.24)}
/* About/a11y page pills & contact CTA (white literals) */
body.sky-day .lf-pills a{color:#10304f;border-color:rgba(24,74,128,.24);background:rgba(16,48,79,.05)}
body.sky-day .contact{color:#10304f;border-color:rgba(24,74,128,.34);background:rgba(16,48,79,.06)}
/* the rail's connect links stay QUIET FLAT (no pill boxes) in day too */
body.sky-day .abp-connect .lf-pills a,body.sky-day .abp-connect .contact{background:none;border:0}
/* lyrics overlay (mobile reader) */
body.sky-day #lyricsOverlay{background:var(--pan-bg), rgb(var(--slate))}
body.sky-day .lo-cov{box-shadow:0 6px 16px -8px rgba(16,40,72,.4)}
body.sky-day .lo-title{color:rgba(16,48,79,.74)}
body.sky-day .lo-tool{color:rgba(16,48,79,.72)}
body.sky-day .lo-tool:hover,body.sky-day .lo-tool:focus-visible{background:rgba(16,48,79,.1);color:#06283f}
body.sky-day .lo-seg{color:rgba(16,48,79,.8);background:rgba(16,48,79,.06)}
body.sky-day .lo-seg:hover,body.sky-day .lo-seg:focus-visible{background:rgba(16,48,79,.12)}
body.sky-day .lo-seg[aria-pressed="true"]{color:#06283f;background:rgba(16,48,79,.13);box-shadow:inset 0 0 0 1px rgba(16,48,79,.38)}
body.sky-day .lo-line .lo-o{color:#123a5c}
body.sky-day #lyricsOverlay .lo-line.ll-active .lo-o{color:#06283f;text-shadow:0 0 22px color-mix(in srgb,var(--theme) 28%,transparent)}
/* single-row views (Original off): the night rules promote the surviving row to white — re-ink for day */
body.sky-day:not(.lv-o):not(.lv-ph) #lyricsOverlay .lo-tr{color:rgba(13,43,71,.9)}
body.sky-day:not(.lv-o).lv-ph #lyricsOverlay .lo-ph{color:rgba(13,43,71,.9)}
/* section markers (Verse/Chorus) are shared by overlay, panel and in-card reader: 22% white vanished on day */
body.sky-day .lyr-sec{color:rgba(16,48,79,.42)}
/* in-card lyrics reader (desktop / creator) had NO day rules: night bar gradient, white chrome,
   cream lines and 46%-white section labels sat on the pale day card. Same ink ramp as the panel. */
body.sky-day .cl-bar{background:linear-gradient(180deg,rgba(250,252,255,.97),rgba(250,252,255,.9) 62%,rgba(250,252,255,0));border-bottom-color:rgba(24,74,128,.18)}
body.sky-day :is(.cl-tg,.cl-copy,.cl-back){color:rgba(16,48,79,.85);background:rgba(16,48,79,.07)}
body.sky-day :is(.cl-tg,.cl-copy,.cl-back):hover,body.sky-day :is(.cl-tg,.cl-copy,.cl-back):focus-visible{color:#083049;background:rgba(16,48,79,.13)}
body.sky-day .cl-tg[aria-pressed="true"]{color:#06283f;background:color-mix(in srgb,var(--theme) 22%,rgba(16,48,79,.05));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--theme) 45%,rgba(16,48,79,.2))}
body.sky-day .cl-copy.copied{color:#06283f}
body.sky-day .cl-sec[aria-current="true"]{color:#06283f;background:color-mix(in srgb,var(--theme) 22%,rgba(16,48,79,.05))}
body.sky-day .card-lyr .lyr-label{color:rgba(16,48,79,.6)}
body.sky-day .card-lyr .lyr-label::before{background:linear-gradient(90deg,transparent,rgba(16,48,79,.28))}
body.sky-day .card-lyr .lyr-label::after{background:linear-gradient(90deg,rgba(16,48,79,.28),transparent)}
body.sky-day .card-lyr .lyr-line .ll-o{color:#123a5c}
body.sky-day .card-lyr .lyr-line.ll-active .ll-o{color:#06283f;text-shadow:0 0 16px color-mix(in srgb,var(--theme) 28%,transparent)}
body.sky-day .card-lyr .lyr-foot{color:rgba(16,48,79,.55)}
body.sky-day .wcard.active.lyr-open .card-lyr{border-inline-start-color:rgba(24,74,128,.18)}
/* card face beside the reader: title block was white-on-black-shadow (image treatment) over the pale card */
body.sky-day .wcard.lyr-open .wtext h2{color:#0d2b47;text-shadow:none}
body.sky-day .wcard.lyr-open .wtext .sub{color:rgba(16,48,79,.72);text-shadow:none}
body.sky-day .wcard.lyr-open .wtext .tag{color:#1e5a96;filter:none;text-shadow:none}
body.sky-day .card-btn{color:rgba(16,48,79,.85);background:rgba(16,48,79,.07);box-shadow:none}
body.sky-day .card-btn::before{background:rgba(16,48,79,.07)}
body.sky-day .lo-bar{border-top-color:rgba(24,74,128,.18);background:rgba(244,250,254,.72)}
/* day-ink gaps: wait line, all-rows-off notes, overlay language select (were white/cream on white) */
body.sky-day .lw-t{color:rgba(13,43,71,.82)}
body.sky-day :is(.hq-off,.lp-off,.lo-off){color:rgba(16,48,79,.62)}
body.sky-day .cl-lang{color-scheme:light}
body.sky-day .cl-lang option,body.sky-day .cl-lang optgroup{background:#fff;color:#10304f}

/* ============ Customizable <select> pickers ============
   The native option popup ignores the site's glass language, so where the
   browser supports base-select the dropdown is restyled on the SAME surface
   as #langMenu/#settingsMenu: --pan-bg glass, --glass-bd trim, .lang-item
   rows, ✓ on the current choice. Non-supporting browsers keep the native
   popup + the option color rules above. Triggers keep their existing look
   (picker-icon hidden — the chevron treatments stay as designed). */
@supports (appearance:base-select){
  .cl-lang,.cl-lang::picker(select){appearance:base-select}
  .cl-lang::picker-icon{display:none}
  .cl-lang::picker(select){
    inline-size:max-content;min-inline-size:anchor-size(self-inline,150px);max-inline-size:min(280px,calc(100dvw - 24px));
    max-block-size:min(420px,60dvh);overflow-y:auto;
    margin-block-start:6px;padding:8px;
    background:var(--pan-bg);border:1px solid var(--glass-bd);border-radius:14px;
    box-shadow:var(--pan-shadow,0 26px 64px -20px rgba(0,0,0,.82));
    -webkit-backdrop-filter:blur(26px) saturate(150%);backdrop-filter:blur(26px) saturate(150%)}
  .cl-lang option{
    display:flex;align-items:center;gap:14px;cursor:pointer;
    font-size:12.5px;font-weight:400;letter-spacing:.01em;text-transform:none;text-align:start;
    padding:10px 13px;border-radius:10px;border:none;background:none;color:#e8eef5;
    transition:background .2s var(--ease)}
  .cl-lang optgroup{background:none;color:rgba(232,238,245,.5)}
  .cl-lang option:hover,.cl-lang option:focus-visible{background:rgba(255,255,255,.06);outline:none}
  .cl-lang option:checked{font-weight:600;color:var(--song-text)}
  .cl-lang option::checkmark{order:1;margin-inline-start:auto;font-size:12px;color:var(--song-text)}
  .cl-lang:open{background-color:rgba(255,255,255,.14)}
  body.sky-day .cl-lang::picker(select){border-color:rgba(24,74,128,.22);box-shadow:0 20px 54px -18px rgba(16,40,72,.4)}
  body.sky-day .cl-lang option{background:none;color:rgba(13,43,71,.88)}
  body.sky-day .cl-lang optgroup{background:none;color:rgba(16,48,79,.55)}
  body.sky-day .cl-lang option:hover,body.sky-day .cl-lang option:focus-visible{background:rgba(16,48,79,.07);color:#06283f}
  body.sky-day .cl-lang option:checked{color:var(--song-text)}
  body.sky-day .cl-lang:open{background-color:rgba(255,255,255,.85)}
  @media (pointer:coarse){.cl-lang option{min-block-size:44px}}
  @media (prefers-reduced-motion:no-preference){
    .cl-lang::picker(select){opacity:0;transform:translateY(-5px);
      transition:opacity .17s var(--ease),transform .17s var(--ease),overlay .17s allow-discrete,display .17s allow-discrete}
    .cl-lang:open::picker(select){opacity:1;transform:none}
    @starting-style{.cl-lang:open::picker(select){opacity:0;transform:translateY(-5px)}}
  }
}


/* ═══ Legibility + finish pass (pasted critique, 2026-08-16) ═══════════════
   Times are hidden until real playback exists (no "0:00 / --:--" at rest);
   laptop tier narrows the rails so the player keeps the lead; RTL isolates
   Latin metadata; heavy caps tracking is Latin-only. */
@media (min-width:960px){
  #showcase{padding-bottom:calc(var(--dockH) + clamp(18px,2.6svh,34px))}
  .cp-controls .cpt-like{min-width:44px;min-height:44px;justify-content:center}
  .cp-controls .k-volume{height:36px}
}
.cp-timeline .cp-cur,.cp-timeline .cp-rem{transition:opacity .35s var(--ease),visibility .35s}
.wcard:not(.k-live) .card-player :is(.cp-cur,.cp-rem){opacity:0;visibility:hidden}
#lyricsOverlay:not(.k-live) :is(.cp-cur,.cp-rem){opacity:0;visibility:hidden}
html[dir="rtl"] :is(.un-head,.abp-k,.un-other-lbl,.un-story-s){letter-spacing:.03em}
html[dir="rtl"] :is(.un-viewall,.wnav-link,.wnav2 .task-item .ti-lbl,#dock .task-item .ti-lbl,.cpt-sub,.card-avail-lbl){letter-spacing:.05em}
html[lang="ja"] :is(.un-head,.abp-k,.un-other-lbl){letter-spacing:.1em}
html[dir="rtl"] :is(.cpt-name,.cpt-sub,.un-t,.un-s,.un-story-t){unicode-bidi:isolate}
@media (min-width:960px) and (max-width:1279px){
  :root{--sidex:clamp(20px,2.5vw,44px);--sidew:clamp(212px,20vw,256px)}
  #aboutSong .bio{font-size:13.5px}
  /* 212px rail: the row budget goes to cover+title — decorative chevron and
     duration bow out; titles keep 2 clean lines at full size */
  .un-covw{width:48px;height:48px}
  .un-item{gap:10px}
  .un-chev,.un-dur{display:none}
  .un-s{letter-spacing:.02em}
}
/* Day player: played fill + scrub head + volume track need day-ink contrast */
body.sky-day .cp-signal-fill{background:linear-gradient(90deg,var(--theme),color-mix(in srgb,var(--theme) 62%,#0d2b47))}
body.sky-day .cp-signal-head{background:color-mix(in srgb,var(--theme) 70%,#0d2b47);box-shadow:0 0 8px color-mix(in srgb,var(--theme) 55%,transparent)}
body.sky-day .k-volume::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--kv-fill) 0 var(--kv-pct,80%),rgba(16,60,110,.22) var(--kv-pct,80%) 100%)}
body.sky-day .k-volume::-moz-range-track{background:rgba(16,60,110,.22)}
body.sky-day .cp-controls .k-tool{opacity:.92}
body.sky-day .un-other-lbl{color:#1e5a96}

/* ============ MOBILE HOME — phone player screen (user mockup, 2026-09-12) ============
   One screen, top to bottom: inset cover · progress bar with times under it · five-button
   transport (prev · −10 · play · +10 · next) · lyrics + like · title · live-lyric quote pill ·
   Listen On pill grid · full-width wave nav band. Shuffle/repeat from the mockup were dropped
   (two-track catalog). Everything below is phone-only; desktop is untouched. */
@media (max-width:959px){
  /* card width is the phone's, cover width is the fit budget (--cardw): the text block
     no longer squeezes the cover to a stamp on short screens */
  .wcard{flex-basis:min(92vw,440px)}
  .wcard.active:not(.lyr-open) .wcard-face{padding:12px 12px 0}
  .wcard.active:not(.lyr-open) .art{width:min(100%,var(--cardw));margin:0 auto;border-radius:20px}
  .wcard:not(.active) .art{width:min(100%,var(--cardw));margin:0 auto}
  .wcard.active:not(.lyr-open) .art::after{display:none}
  .wcard.active:not(.lyr-open) .wtext{padding:10px 16px 16px}

  /* progress: bar first, times on their own row beneath it */
  .wcard.active:not(.lyr-open) .card-player{padding:2px 6px 2px}
  .wcard.active:not(.lyr-open) .card-player .cp-timeline{flex-wrap:wrap;gap:0;padding:0 4px;opacity:1}
  .wcard.active:not(.lyr-open) .card-player .cp-progress{flex:1 0 100%;order:-1;height:26px}
  .wcard.active:not(.lyr-open) .card-player .cp-cur,
  .wcard.active:not(.lyr-open) .card-player .cp-rem{min-width:0;font-size:12px;line-height:1}
  .wcard.active:not(.lyr-open) .card-player .cp-cur{text-align:start}
  .wcard.active:not(.lyr-open) .card-player .cp-rem{margin-inline-start:auto;text-align:end}
  .wcard:not(.k-live) .card-player .cp-signal-track{opacity:.75}

  /* transport: five equal satellites around one hero play */
  body.two-tracks .wcard.active:not(.lyr-open) .card-player .cp-tprev{display:inline-flex}
  .wcard.active:not(.lyr-open) .card-player .cp-controls{gap:10px;padding:2px 0 0}
  .wcard.active:not(.lyr-open) .card-player .cpc-c{gap:clamp(6px,2vw,12px)}
  .wcard.active:not(.lyr-open) .card-player .cpc-c .k-tool{--sat:clamp(50px,13.5vw,64px);width:var(--sat);height:var(--sat);min-width:var(--sat);padding:0;border-radius:50%;justify-content:center;
        background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);color:rgba(232,238,245,.9);opacity:1}
  .wcard.active:not(.lyr-open) .card-player .cpc-c .k-tool svg{width:clamp(24px,6.4vw,30px);height:clamp(24px,6.4vw,30px)}
  .wcard.active:not(.lyr-open) .card-player .cpc-c .k-tool:hover,
  .wcard.active:not(.lyr-open) .card-player .cpc-c .k-tool:focus-visible{background:rgba(255,255,255,.15);color:#fff}
  .wcard.active:not(.lyr-open) .card-player .cp-playbtn{--play:clamp(72px,18.5vw,88px);min-width:var(--play);min-height:var(--play);width:var(--play);height:var(--play)}
  .wcard.active:not(.lyr-open) .card-player .cp-playbtn svg{width:clamp(32px,8vw,38px);height:clamp(32px,8vw,38px)}
  .wcard.active:not(.lyr-open) .card-player .cpc-r{gap:14px}
  .wcard.active:not(.lyr-open) .card-player .cpc-r .k-tool{--sat:clamp(50px,13.5vw,64px);width:var(--sat);height:var(--sat);min-height:var(--sat)}
  .wcard.active:not(.lyr-open) .card-player .cpc-r .k-tool svg{width:clamp(23px,6vw,28px);height:clamp(23px,6vw,28px)}
  /* edges of the two-song catalog: previous on the first song / next on the last read quiet but still wrap */
  .scroller .wcard:first-child .cp-tprev,.scroller .wcard:last-child .cp-tnext{opacity:.42}
  .scroller .wcard:first-child .cp-tprev:hover,.scroller .wcard:last-child .cp-tnext:hover,
  .scroller .wcard:first-child .cp-tprev:focus-visible,.scroller .wcard:last-child .cp-tnext:focus-visible{opacity:.7}

  /* title: no mid-word breaks, calmer tracking */
  .wcard.active:not(.lyr-open) .cp-title{padding:6px 4px 2px}
  .cpt-name{overflow-wrap:normal;word-break:keep-all;letter-spacing:.05em;text-wrap:balance}
  .cpt-sub{letter-spacing:.22em}

  /* live lyric as a quote pill under the title */
  .wcard.active:not(.lyr-open).k-bound .np-preview{position:relative;min-height:0;max-height:none;margin:8px 0 0;padding:11px 42px 12px;
        border-radius:22px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
  .wcard.active:not(.lyr-open).k-bound .np-preview::before,
  .wcard.active:not(.lyr-open).k-bound .np-preview::after{content:'\201C';position:absolute;top:2px;inset-inline-start:14px;
        font-family:'Cormorant Garamond',serif;font-size:36px;line-height:1;color:var(--theme);opacity:.75;pointer-events:none}
  .wcard.active:not(.lyr-open).k-bound .np-preview::after{content:'\201D';top:auto;bottom:-6px;inset-inline-start:auto;inset-inline-end:14px}
  .np-o{font-size:clamp(18px,5vw,22px)}
  .np-preview.np-long .np-o{font-size:clamp(15px,4.2vw,18px)}

  /* Listen On: label between hairlines, four pills in a 2×2 grid */
  #listenBar{flex-direction:column;gap:9px;padding:11px 12px 12px;border-radius:22px;max-width:min(92vw,520px);width:min(92vw,520px)}
  .ln-head{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:0}
  .ln-head::before,.ln-head::after{content:'';flex:0 1 72px;height:1px;background:currentColor;opacity:.35}
  .ln-plats{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  .ln-plat{justify-content:center;min-height:clamp(48px,12vw,56px);padding:8px 12px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);font-size:clamp(12.5px,3.4vw,14.5px)}
  .ln-plat .ln-ic{width:clamp(18px,5vw,22px);height:clamp(18px,5vw,22px)}
  .ln-plat:hover,.ln-plat:focus-visible{text-decoration:none;background:rgba(255,255,255,.15)}
  body.sky-day .ln-plat{background:rgba(255,255,255,.62);border-color:rgba(24,74,128,.16)}
  body.sky-day .ln-plat:hover,body.sky-day .ln-plat:focus-visible{background:rgba(255,255,255,.9)}

  /* nav: full-width band with a wave crest instead of a floating pill */
  #dock{left:0;right:0;bottom:0;width:100%;max-width:none;transform:none;overflow:visible;
        border:0;border-radius:0;background:none;box-shadow:none;
        padding:26px 0 calc(8px + env(safe-area-inset-bottom) + var(--vvb,0px))}
  #dock::before{content:'';position:absolute;inset:0;z-index:-1;
        background:linear-gradient(180deg, rgba(var(--slate),calc(var(--glass)*.8)), rgba(var(--slate),calc(var(--glass)*.92)) 40%);
        -webkit-backdrop-filter:var(--pan-blur,blur(18px));backdrop-filter:var(--pan-blur,blur(18px));
        -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'><path d='M0 6 C 18 -4 30 30 52 22 S 84 4 100 18 V30 H0Z'/></svg>") top center/100% 31px no-repeat,
              linear-gradient(#000,#000) 0 30px/100% calc(100% - 30px) no-repeat;
        mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'><path d='M0 6 C 18 -4 30 30 52 22 S 84 4 100 18 V30 H0Z'/></svg>") top center/100% 31px no-repeat,
              linear-gradient(#000,#000) 0 30px/100% calc(100% - 30px) no-repeat}
  body.sky-day #dock::before{background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(250,253,255,.94) 40%)}
  body.grid-open #dock,body.about-open #dock{transform:translateY(120%)}
  #dock .task-inner{width:100%;justify-content:center}
  #dock .task-item{position:relative;min-height:clamp(48px,12vw,56px);padding:10px clamp(8px,3vw,18px)}
  #dock .task-item .ti-lbl{font-size:clamp(12.5px,3.6vw,15px);font-weight:600;letter-spacing:.14em}
  #dock .task-item + .task-item::before{content:'';position:absolute;inset-inline-start:0;top:50%;width:1px;height:16px;transform:translateY(-50%);background:rgba(255,255,255,.28)}
  body.sky-day #dock .task-item + .task-item::before{background:rgba(16,48,79,.28)}
  #dock .task-item:hover{background:none}

  /* day ink for the new circular satellites */
  body.sky-day .wcard.active:not(.lyr-open) .card-player .cpc-c .k-tool{background:rgba(16,48,79,.07);border-color:rgba(24,74,128,.22);color:rgba(16,48,79,.85)}
  body.sky-day .wcard.active:not(.lyr-open) .card-player .cpc-c .k-tool:hover,
  body.sky-day .wcard.active:not(.lyr-open) .card-player .cpc-c .k-tool:focus-visible{background:rgba(16,48,79,.13);color:#083049}
  body.sky-day .wcard.active:not(.lyr-open).k-bound .np-preview{background:rgba(16,48,79,.06);border-color:rgba(24,74,128,.2)}
  body.sky-day .np-o{color:#0d2b47;text-shadow:none}
  body.sky-day .np-tr{color:rgba(16,48,79,.78)}
}

/* Short phones (≈360×690 Android with browser chrome): same screen, compact tier —
   Listen On collapses to one row of icon circles (names stay in aria-labels), controls
   step down a size, card padding tightens. Everything must sit above the band. */
@media (max-width:959px) and (max-height:740px){
  .wcard.active:not(.lyr-open) .wcard-face{padding:10px 10px 0}
  .wcard.active:not(.lyr-open) .wtext{padding:6px 14px 12px}
  .wcard.active:not(.lyr-open) .card-player .cp-progress{height:22px}
  .wcard.active:not(.lyr-open) .card-player .cp-controls{gap:8px}
  .wcard.active:not(.lyr-open) .card-player .cpc-c .k-tool,
  .wcard.active:not(.lyr-open) .card-player .cpc-r .k-tool{--sat:48px}
  .wcard.active:not(.lyr-open) .card-player .cp-playbtn{--play:64px}
  .wcard.active:not(.lyr-open) .cp-title{padding:4px 4px 0}
  .wcard.active:not(.lyr-open).k-bound .np-preview{margin-top:6px;padding:8px 36px 9px}
  .np-o{font-size:clamp(16px,4.6vw,19px)}
  #listenBar{gap:7px;padding:9px 12px 10px}
  .ln-plats{display:flex;justify-content:center;gap:10px}
  .ln-plat{width:48px;min-height:48px;padding:0;border-radius:50%;flex:0 0 auto}
  .ln-plat .ln-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .ln-plat .ln-ic{width:22px;height:22px}
  #dock{padding-top:22px}
  #dock .task-item{min-height:44px}
}


  /* ═══ REFERENCE PHOTO MATCH — editorial day layout (desktop) ═══
     Pass that lines the live page up with the art-directed reference:
     one-line headline, quiet connect rows, wider Up Next column, bigger
     cover, prev/play/next transport on a white disc, unboxed Listen on. */
  @media (min-width:960px){
    /* ── left rail: headline runs on one line past the text measure */
    body #sideRail{width:var(--railL)!important}
    body #aboutSong{overflow:visible}
    body .ed-title{white-space:nowrap;font-size:clamp(40px,2.95vw,56px);margin:0 0 18px}
    body #aboutSong .abp-scroll,body #aboutSong .bio{max-width:336px;overflow:visible}
    body #aboutSong #abpWhatHead,body #aboutSong #abpBioWhat{display:none}
    body #aboutSong .bio p:last-child{margin-bottom:0}
    /* ── connect: follow before support, sentence case, text-width rows */
    body #aboutSong .abp-connect .lf-pills a,body #aboutSong .abp-connect .contact{text-transform:none;max-width:336px}
    body #aboutSong #cnFollowPills{order:1}
    body #aboutSong #cnSupportPills{order:2}
    body #aboutSong #cnContact{order:3}
    /* ── up next: wider editorial column */
    body #startRail{width:var(--railR)!important}
    /* ── cover: the reference sits a little larger in frame */
    body{--cardw:clamp(var(--cw-floor),min(50vh,82vw,calc(88svh - clamp(240px,36svh,328px))),var(--cw-cap))}
    body .cpt-name{font-size:clamp(22px,calc(var(--cardw)*.08),36px)}
    /* ── transport: previous · play · next (the ±10s pair lives in the full player) */
    body .wcard.active:not(.lyr-open) .card-player .cp-tprev{display:inline-flex;align-items:center;justify-content:center}
    body .wcard.active:not(.lyr-open) .card-player :is(.cp-b10,.cp-f10){display:none}
    body .wcard.active:not(.lyr-open) .card-player .cpc-c{gap:clamp(20px,calc(var(--cardw)*.1),46px)}
    /* ── play: white disc, deep-sea glyph (player looks the same in both panel states) */
    body.sky-day .wcard .cp-playbtn{background:#fff;box-shadow:0 14px 34px -14px rgba(16,40,72,.55),0 2px 10px -4px rgba(16,40,72,.28),inset 0 -1px 0 rgba(11,18,32,.08)}
    body.sky-day .wcard .cp-playbtn svg{fill:#12324f}
    body.sky-day .wcard .cp-playbtn:hover,body.sky-day .wcard .cp-playbtn:focus-visible{background:#fff;box-shadow:0 16px 40px -14px rgba(16,40,72,.6),0 2px 10px -4px rgba(16,40,72,.3),0 0 0 6px color-mix(in srgb,var(--theme) 20%,transparent)}
    body.sky-day .wcard.k-playing .cp-playbtn{box-shadow:0 14px 34px -14px rgba(16,40,72,.55),0 2px 10px -4px rgba(16,40,72,.3)}
    /* ── listen on, bare only: no bar, white ink over the water */
    body.sky-day.panels-bare #listenBar{background:none;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
    body.sky-day.panels-bare .ln-plat{background:none;border-color:transparent;box-shadow:none;color:#fff;text-shadow:0 1px 3px rgba(8,24,44,.45),0 2px 16px rgba(8,24,44,.35)}
    body.sky-day.panels-bare .ln-plat:hover,body.sky-day.panels-bare .ln-plat:focus-visible{background:none;color:#fff}
    body.sky-day.panels-bare .ln-head{color:#fff;text-shadow:0 1px 3px rgba(8,24,44,.45),0 2px 16px rgba(8,24,44,.35)}
    /* ── header: wordmark · rule · Lyrics, and a soft disc under settings */
    .wbrand-tx{font-size:24px}
    .wnav2::before{content:'';flex:0 0 auto;width:1px;height:19px;background:currentColor;opacity:.38;margin-inline-end:2px}
    body.sky-day #settingsBtn{border-radius:50%;background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 8px 20px -12px rgba(16,40,72,.55)}
    body.sky-day #settingsBtn:hover,body.sky-day #settingsBtn:focus-visible{background:rgba(255,255,255,.72)}
  }

  @media (min-width:960px){
    /* dock is hidden in tasks-top mode — reclaim its reserved strip so the
       cover/player/Listen-on stack sits where the reference has it */
    body.tasks-top #showcase{padding-bottom:clamp(18px,2.6svh,34px)}
    /* Up Next hugs the top-right corner, as in the reference */
    body:not(.lyrics-focus) #startRail{top:calc(var(--barH,64px) + 46px);transform:none}
  }

  @media (min-width:960px){
    /* Up Next numbers count the list, not the catalogue (01, 02, 03…) */
    body #upnext .un-list{counter-reset:unrow}
    body #upnext .un-item{counter-increment:unrow}
    body #upnext .un-num{font-size:0}
    body #upnext .un-num::before{content:counter(unrow,decimal-leading-zero);font-size:12px}
  }


/* ═══════════════════════════════════════════════════════════════════════════
   LOCKED RULES — PANELS & SCENERY
   Panel backgrounds is a PRESENTATION preference, not a layout mode.
     ON  = this composition + glass surface
     OFF = this composition + transparent surface (body.panels-bare)
   .panels-bare may only set: background, border-color, box-shadow,
   backdrop-filter, colour, text-shadow. It may never change width, grid,
   padding, type, content, player geometry, hover language or breakpoints.
   The scenery stays one continuous photograph: readability when bare is a
   single scene-level treatment on #bgTint (Settings → Text backing), never a
   blurred haze blob per panel.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT TIERS — the three allocated spaces and what happens as they shrink.
   navigation.js puts exactly one zt-* class on <body> from the viewport alone;
   every token below flows one way: tier → column widths → cover → type.
   Nothing here measures anything, so zoom steps land in a single frame.
   Ladder, in order: zt-cinema → zt-tight → zt-condensed →
     zt-duo (Up Next below the player) → zt-focus (one column).
   A tier needs BOTH its min width and its min height (_TIERS in navigation.js),
   +24px hysteresis when stepping up, so which zoom % lands where depends on the
   window's aspect. Measured on a short 1864×843 window: 100% cinema,
   125% condensed, 150% and 175% duo, 200% (932px wide) drops under the 960px
   desktop floor into the mobile stack — tight and focus are the tall-window
   path. Below 960px navigation.js clears every zt-* class.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width:960px){
  /* the player's hard visual floor: below this we change composition, not size */
  body{--cover-min-desktop:404px;--cw-floor:var(--cover-min-desktop);--cw-cap:560px;
        --railL:340px;--railR:380px;--colgap:40px}

  body.zt-cinema{--sidex:clamp(40px,5vw,96px);--railL:452px;--railR:496px;--colgap:44px;--cw-cap:560px}
  body.zt-tight{--sidex:40px;--railL:360px;--railR:392px;--colgap:26px;--cw-cap:520px}
  body.zt-condensed{--sidex:28px;--railL:312px;--railR:330px;--colgap:20px;--cw-cap:480px}
  /* compact: three columns stay put; the cover and both rails share the width fluidly */
  body.zt-compact{--sidex:14px;--colgap:18px;--cw-cap:clamp(320px,36vw,480px);--cw-floor:320px;
        --railL:calc((100vw - 2*var(--sidex) - 2*var(--colgap) - var(--cw-cap) - 40px)/2);--railR:var(--railL)}

  /* ── 150%: secondary copy gives up space before the cover does */
  body.zt-condensed #upnext .un-b{-webkit-line-clamp:1}
  body.zt-condensed #aboutSong .abp-scroll,body.zt-condensed #aboutSong .bio,
  body.zt-condensed #aboutSong .abp-connect .lf-pills a,body.zt-condensed #aboutSong .abp-connect .contact{max-width:100%}
  body.zt-condensed .ed-title{font-size:clamp(34px,2.6vw,44px);margin-bottom:14px}
  body.zt-tight #aboutSong .abp-scroll,body.zt-tight #aboutSong .bio,
  body.zt-tight #aboutSong .abp-connect .lf-pills a,body.zt-tight #aboutSong .abp-connect .contact{max-width:100%}

  /* ── 175% / 200%: same three columns, tighter copy; nothing changes place */
  body.zt-compact #upnext .un-b{-webkit-line-clamp:1}
  body.zt-compact #aboutSong .abp-scroll,body.zt-compact #aboutSong .bio,
  body.zt-compact #aboutSong .abp-connect .lf-pills a,body.zt-compact #aboutSong .abp-connect .contact{max-width:100%}
  body.zt-compact .ed-title{white-space:normal;font-size:clamp(26px,2.6vw,40px);margin-bottom:12px}
  body.zt-compact .un-chev,body.zt-compact .un-dur{display:none}
  body.zt-compact #upnext .un-item{grid-template-columns:22px 52px 1fr;column-gap:10px}
  body.zt-compact #upnext .un-covw{width:52px;height:52px}
  body.zt-compact #startRail,body.zt-compact #sideRail{overflow-y:auto;scrollbar-width:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PANEL BACKGROUNDS — the rest of the surface, at every width.
   The player card and the Listen On bar used to lose their glass only inside
   @media (min-width:960px), so on a phone the setting half-worked: rails and
   lyrics went bare while the card and the bar kept their glass. These sit at
   the end of the sheet on purpose — body.sky-day #listenBar (day glass) has
   the same specificity and comes later, so an earlier copy would lose.
   Surface + ink only, per the locked rule: no geometry here.
   ═══════════════════════════════════════════════════════════════════════════ */
body.panels-bare :is(.wcard.active:not(.lyr-open),#listenBar,.ln-plat,.ln-plat:hover,.ln-plat:focus-visible){
      background:none;border-color:transparent;box-shadow:none;
      -webkit-backdrop-filter:none;backdrop-filter:none}
body.panels-bare.baked-glass :is(.wcard.active:not(.lyr-open),#listenBar)::before{content:none}
body.panels-bare :is(#listenBar,.ln-head,.ln-plat){color:rgba(255,255,255,.96);
      text-shadow:0 1px 3px rgba(0,0,0,.35),0 2px 18px rgba(0,0,0,.35)}
body.sky-day.panels-bare :is(#listenBar,.ln-head,.ln-plat){color:#fff;
      text-shadow:0 1px 3px rgba(8,24,44,.45),0 2px 16px rgba(8,24,44,.35)}

/* ═══ ACCENT (Settings) — Song follows the track, the rest pin the palette ═══ */
.sm-accent-row .sm-t{flex:1;min-width:0;font-size:12.5px;letter-spacing:.02em}
.sm-swatches{display:inline-flex;align-items:center;gap:7px}
.sm-sw{width:24px;height:24px;min-height:24px;flex:0 0 auto;padding:0;border-radius:50%;cursor:pointer;
      border:1px solid rgba(255,255,255,.28);background:linear-gradient(135deg,var(--sa) 0%,var(--sb) 100%);
      transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.sm-sw-auto{background:conic-gradient(from 210deg,var(--theme),var(--theme2),var(--theme))}
.sm-sw:hover,.sm-sw:focus-visible{transform:scale(1.12);outline:none}
.sm-sw[aria-pressed="true"]{box-shadow:0 0 0 2px rgba(255,255,255,.92),0 2px 10px -2px rgba(0,0,0,.6)}
body.sky-day .sm-sw{border-color:rgba(16,48,79,.3)}
body.sky-day .sm-sw[aria-pressed="true"]{box-shadow:0 0 0 2px rgba(16,48,79,.8)}
@media (pointer:coarse){ .sm-sw{width:30px;height:30px;min-height:30px} .sm-swatches{gap:9px} }

/* ═══ TEXT BACKING follows the composition ═══════════════════════════════════
   The scene treatment used to be lateral only — dark at the left and right
   edges, nothing between 30% and 70%. That is right when the text lives in the
   side rails (three-column desktop), but on a phone and in the zt-duo/zt-focus
   stacks the text is centred, so the setting appeared to do nothing. Centred
   compositions get a vertical veil instead — and since there is no rail to
   carry the local haze, they keep the fuller --scene the rails no longer need.
   ═════════════════════════════════════════════════════════════════════════ */
body.panels-bare:is(.zt-stack,.zt-focus){--scene:.34}
body.sky-day.panels-bare:is(.zt-stack,.zt-focus){--scene:.38}
body.panels-bare.zt-stack #bgTint::before,
body.panels-bare.zt-focus #bgTint::before{
      background:linear-gradient(180deg,rgba(4,7,11,calc(var(--scene,0) * .85)) 0%,
                 rgba(4,7,11,calc(var(--scene,0) * .5)) 24%,
                 rgba(4,7,11,calc(var(--scene,0) * .5)) 62%,
                 rgba(4,7,11,calc(var(--scene,0) * .95)) 100%)}
body.sky-day.panels-bare.zt-stack #bgTint::before,
body.sky-day.panels-bare.zt-focus #bgTint::before{
      background:linear-gradient(180deg,rgba(250,253,255,calc(var(--scene,0) * .8)) 0%,
                 rgba(250,253,255,calc(var(--scene,0) * .45)) 24%,
                 rgba(250,253,255,calc(var(--scene,0) * .45)) 62%,
                 rgba(250,253,255,calc(var(--scene,0) * .9)) 100%)}
@media (max-width:959px){
  body.panels-bare{--scene:.34}
  body.sky-day.panels-bare{--scene:.38}
  body.panels-bare #bgTint::before{
      background:linear-gradient(180deg,rgba(4,7,11,calc(var(--scene,0) * .85)) 0%,
                 rgba(4,7,11,calc(var(--scene,0) * .5)) 24%,
                 rgba(4,7,11,calc(var(--scene,0) * .5)) 62%,
                 rgba(4,7,11,calc(var(--scene,0) * .95)) 100%)}
  body.sky-day.panels-bare #bgTint::before{
      background:linear-gradient(180deg,rgba(250,253,255,calc(var(--scene,0) * .8)) 0%,
                 rgba(250,253,255,calc(var(--scene,0) * .45)) 24%,
                 rgba(250,253,255,calc(var(--scene,0) * .45)) 62%,
                 rgba(250,253,255,calc(var(--scene,0) * .9)) 100%)}
}

/* ═══ ABOUT PANEL CONTAINMENT ════════════════════════════════════════════════
   The editorial pass set #aboutSong to overflow:visible, so a long bio spilled
   out of its box and printed on top of the "More about me" pill and the
   Connect rows below it (measured 169x43 and 282x36 of live overlap). The copy
   now scrolls inside its own area; the pill keeps its place at the bottom.
   The handwriting is rotated, so its painted box laps the row above — it gets
   a little clearance and stops eating clicks.
   ═════════════════════════════════════════════════════════════════════════ */
/* Rail bio is a short teaser: a whole number of lines, then "More about me" */
body:not(.zt-stack) #aboutSong .abp-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin}
body:not(.zt-stack) #aboutSong #abpBioWho{display:block;max-height:none;overflow:visible;
      -webkit-mask-image:none;mask-image:none}
@media (max-height:820px){ body:not(.zt-stack) #aboutSong{--bioLines:3} }
body.zt-stack #aboutSong #abpBioWho{display:block;-webkit-line-clamp:none}
body.zt-stack #aboutSong .abp-scroll{flex:0 1 auto;min-height:0;overflow:visible;-webkit-mask-image:none;mask-image:none}
body #aboutSong .ed-more{flex:0 0 auto}
body :is(.ed-script-l,.ed-script-r){margin-top:clamp(20px,2.6vh,32px)}
body .ed-script-r{margin-top:clamp(20px,2.6vh,32px)}
/* handwriting sits bare on the photo — no plate, no blur */
body.sky-day.panels-bare :is(.ed-script-l,.ed-script-r){width:max-content;max-width:100%;
      padding:0;border-radius:0;
      background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
/* the glyphs are rotated, so the layout box no longer matches what you see:
   pivot from the middle and nudge the painted text down into its own space */
@media (min-width:960px){
  body .ed-script-r{transform:translateY(clamp(12px,2vh,26px)) rotate(-14deg);transform-origin:center}
  html[dir="rtl"] body .ed-script-r{transform:translateY(clamp(12px,2vh,26px)) rotate(14deg);transform-origin:center}
}
/* handwriting sits straight on the photo: day ink only, no plate, no halo */
body.sky-day.panels-bare :is(.ed-script-l,.ed-script-r,.ed-script){color:#0d2b47;opacity:1;text-shadow:none}
/* not panel copy — its own space below the rail, at its own measure */
@media (min-width:960px){
  body :is(.ed-script-l,.ed-script-r){width:max-content;position:relative;z-index:2;text-wrap:normal}
  body .ed-script-l{max-width:calc(100% + clamp(70px,11vw,210px))}
  body .ed-script-r{max-width:calc(100% + var(--sidex,5vw) - 12px)}
  html[dir="rtl"] body .ed-script-l{max-width:calc(100% + var(--sidex,5vw) - 12px)}
  html[dir="rtl"] body .ed-script-r{max-width:calc(100% + clamp(70px,11vw,210px))}
}

/* ═══ LISTEN ON legibility in DAY + BARE ═════════════════════════════════════
   Bare mode strips the glass pill, so in day sky the white ink sat on white
   stone and pale water — measured near-zero contrast. Deep-navy ink over an
   edgeless white haze reads over both the bright stone and the darker water
   without bringing the pill (and its border) back. Surface + ink only.
   ═════════════════════════════════════════════════════════════════════════ */
body.sky-day.panels-bare #listenBar{position:relative;isolation:isolate}
body.sky-day.panels-bare #listenBar::before{content:'';position:absolute;inset:-10px -40px;z-index:-1;pointer-events:none;
      border-radius:999px;filter:none;
      background:radial-gradient(70% 100% at 50% 50%,rgba(255,255,255,.42) 0%,rgba(255,255,255,.22) 45%,rgba(255,255,255,0) 82%)}
body.sky-day.panels-bare :is(#listenBar,.ln-head,.ln-plat){color:#0d2b47;text-shadow:none}
body.sky-day.panels-bare .ln-head{opacity:.7}
body.sky-day.panels-bare :is(.ln-plat:hover,.ln-plat:focus-visible){color:#08203a}

/* Same problem one row up: with the card's glass gone, the transport sat on the
   bright water at 55% opacity. Full-strength day ink + a faint haze behind the
   block; geometry untouched. */
body.sky-day.panels-bare .wcard.active:not(.lyr-open) .card-player{position:relative;isolation:isolate}
body.sky-day.panels-bare .wcard.active:not(.lyr-open) .card-player::before{content:'';position:absolute;inset:-10px -22px -14px;z-index:-1;pointer-events:none;
      border-radius:26px;filter:blur(16px);
      background:radial-gradient(66% 116% at 50% 50%,rgba(255,255,255,.44) 0%,rgba(255,255,255,.26) 58%,rgba(255,255,255,0) 100%)}
body.sky-day.panels-bare .card-player .cp-timeline{opacity:1}
body.sky-day.panels-bare .card-player :is(.cp-cur,.cp-rem){color:#0d2b47}
body.sky-day.panels-bare .card-player .cp-signal-track{background:rgba(16,60,110,.32)}
body.sky-day.panels-bare .card-player :is(.k-tool,.k-volume-wrap){color:#0d2b47;opacity:1}
body.sky-day.panels-bare .card-player .cp-queue[aria-pressed="false"]{color:rgba(13,43,71,.6)}

/* ── AA ink floor (appended last so it wins over the day-ink ramp above).
   Chrome that sits on the photograph or on light glass carries full ink. */
body.sky-day :is(.wnav-link,.lang-code,.lang-caret,.wbtn,.hlh-title,.hlh-k,.hero-lyr,.lp-title,.lp-langk,.lp-seg-t,.lyr-sec,.un-dur,.un-s,.un-num,.ln-head,.ln-t,.un-viewall,.un-b){color:#0b2742}
body.sky-day :is(.un-other-lbl,.un-head,.abp-k){color:#134070}
body.sky-day :is(.lf-pills a,.contact) .material-symbols-outlined{color:#8d1a20}
body:not(.sky-day) :is(.wnav-link,.lang-code,.lang-caret,.wbtn,.ln-head,.ln-t){color:#fff}


/* ═══ About rail: expand in place ═══
   "More about me" unfolds the full bio inside the rail. The rail has room for
   one editorial column at a time, so Connect steps aside while the bio is open
   and returns on "Show less". */
@media (min-width:960px){
  body.abp-open #aboutSong{flex:1 1 auto}
  body.abp-open #aboutSong .abp-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-bottom:4px}
  body.abp-open #aboutSong #abpBioWho{display:block;max-height:none;-webkit-mask-image:none;mask-image:none}
  body.abp-open #aboutSong #abpWhatHead{display:none}
  body.abp-open #aboutSong #abpBioWhat{display:block}
  /* motion: the bio grows, Connect folds away — no jump cut */
  #aboutSong .abp-scroll{transition:max-height .8s var(--ease-calm)}
  body.abp-anim #aboutSong .abp-scroll{overflow:hidden}
  body.abp-open #aboutSong :is(#abpWhatHead,#abpBioWhat){animation:abpFade .7s var(--ease-calm) .25s both}
  /* Connect doesn't vanish while the bio is open — it condenses to an icon strip,
     so every link stays one click away. */
  
    /* short windows: connect reads like LISTEN ON — quiet flat links in one row under a hairline,
     brand-coloured glyph, accent underline + icon lift on hover. No boxes. */
  body #aboutSong.abp-cn-compact .abp-connect{padding:10px 0 0;margin-top:10px;overflow:visible;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:2px 8px;
        border-top:1px solid color-mix(in srgb,currentColor 38%,transparent)}
  body #aboutSong.abp-cn-compact .lf-pills{display:contents}
  body #aboutSong.abp-cn-compact :is(.lf-pills a,.contact){display:inline-flex;flex-direction:row;align-items:center;gap:8px;min-width:0;
        padding:9px 6px;min-height:38px;border:0;border-radius:9px;background:none;box-shadow:none;
        font-size:12px;font-weight:600;letter-spacing:.04em;line-height:1;text-transform:uppercase;white-space:nowrap;color:inherit;
        transition:color .25s var(--ease),text-decoration-color .25s var(--ease)}
  body #aboutSong.abp-cn-compact :is(.lf-pills a,.contact)::after{content:none}
  body #aboutSong.abp-cn-compact :is(.lf-pills a .bi,.contact .bi){order:1;flex:0 0 auto;width:20px;height:20px;transition:transform .3s var(--ease-snap),filter .3s var(--ease)}
  body #aboutSong.abp-cn-compact .contact .cn-t,body #aboutSong.abp-cn-compact #bmcPillT2{display:none}
  body #aboutSong.abp-cn-compact .lf-pills a .cn-t{order:2}
  body #aboutSong.abp-cn-compact .contact::before,body #aboutSong.abp-cn-compact [data-platform="bmc"]::before{content:attr(data-short);order:2}
  body #aboutSong.abp-cn-compact :is(.lf-pills a,.contact):hover,body #aboutSong.abp-cn-compact :is(.lf-pills a,.contact):focus-visible{
        background:none;box-shadow:none;transform:none;color:inherit;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;
        text-decoration-color:color-mix(in srgb,var(--hb) 70%,currentColor);text-shadow:inherit;outline:none}
  body #aboutSong.abp-cn-compact :is(.lf-pills a,.contact):hover .bi{transform:translateY(-2px) scale(1.1);filter:drop-shadow(0 2px 5px color-mix(in srgb,var(--hb) 40%,transparent))}
  body #aboutSong.abp-cn-compact .contact:hover .bi{filter:drop-shadow(0 2px 5px color-mix(in srgb,var(--hb) 40%,transparent))}
  body #aboutSong.abp-cn-compact .lf-pills a[data-platform="tiktok"]:hover .bi{filter:drop-shadow(-1px -.6px 0 #25F4EE) drop-shadow(1px .6px 0 #FE2C55) drop-shadow(0 2px 5px rgba(0,0,0,.25))}
  body #aboutSong.abp-cn-compact :is(.lf-pills a,.contact):focus-visible{outline:2px solid color-mix(in srgb,var(--theme) 70%,#fff);outline-offset:2px}
  html[dir="rtl"] body #aboutSong.abp-cn-compact :is(.lf-pills a,.contact):hover{transform:none;box-shadow:none}
  /* mail: a filled glyph at the same 20px as the brand logos, brand red like the others carry their colours */
  body #aboutSong.abp-cn-compact .contact .bi{color:var(--red);filter:none}
  body #aboutSong.abp-cn-compact .contact .bi .material-symbols-outlined{font-size:20px;width:20px;height:20px;color:inherit;font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 20}
  body.sky-day #aboutSong.abp-cn-compact .contact .bi .material-symbols-outlined{color:inherit}
  /* labels: plain ink, no white halo — the glow made the small caps hard to read */
  body #aboutSong.abp-cn-compact :is(.lf-pills a,.contact),body #aboutSong.abp-cn-compact :is(.lf-pills a,.contact) .cn-t,
  body #aboutSong.abp-cn-compact :is(.lf-pills a,.contact)::before{text-shadow:none;font-weight:700}
  body.sky-day #aboutSong.abp-cn-compact :is(.lf-pills a,.contact){color:#0b2742}
  /* at rest the glyphs sit clean like LISTEN ON: no halo, no shadow — only hover adds the lift */
  body #aboutSong.abp-cn-compact :is(.lf-pills a,.contact) .bi,body #aboutSong.abp-cn-compact :is(.lf-pills a,.contact) .bi *{text-shadow:none}
  body #aboutSong.abp-cn-compact .lf-pills a:not(:hover):not(:focus-visible) .bi{filter:none}
  body #aboutSong.abp-cn-compact .lf-pills a[data-platform="tiktok"]:not(:hover):not(:focus-visible) .bi{filter:drop-shadow(-1px -.6px 0 #25F4EE) drop-shadow(1px .6px 0 #FE2C55)}
  body #aboutSong.abp-cn-compact .contact:not(:hover):not(:focus-visible) .bi{filter:none}
body.abp-open #aboutSong .abp-connect{padding:0;overflow:hidden}
  body.abp-open #aboutSong .abp-connect{flex-direction:row;align-items:center;gap:4px}
  body.abp-open #aboutSong .lf-pills{flex-direction:row;gap:4px}
  body.abp-open #aboutSong :is(.lf-pills a,.contact){grid-template-columns:auto;grid-template-rows:auto;width:38px;height:38px;padding:0;justify-items:center;font-size:0;letter-spacing:0}
  body.abp-open #aboutSong :is(.lf-pills a,.contact)::after{content:none}
  body.abp-open #aboutSong :is(.lf-pills a .bi,.contact .bi,.contact svg){grid-row:1;width:22px;height:22px}
  @media (prefers-reduced-motion:reduce){
    #aboutSong .abp-scroll{transition:none}
    body.abp-open #aboutSong :is(#abpWhatHead,#abpBioWhat){animation:none}
  }
  body.abp-open .ed-more .ed-arrow{transform:rotate(-90deg)}
  body.abp-open .ed-more:hover .ed-arrow{transform:rotate(-90deg) translateX(2px)}
}

@keyframes abpFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}


/* ── Hover motion layer (pointer devices only, reduced-motion safe) ── */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  /* Grid cards: lift + cover zoom + brighter glow */
  /* Grid cards: cursor tilt (JS sets --rx/--ry/--mx/--my), theme-color bleed, cursor spotlight */
  .gcard .art{position:relative;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));
    transition:transform .5s var(--ease-calm,var(--ease)),box-shadow .5s var(--ease)}
  .gcard.tilting .art{transition:transform .08s linear,box-shadow .5s var(--ease)}
  .gcard .art img{transition:transform .6s var(--ease-calm,var(--ease)),filter .4s var(--ease)}
  .gcard .art::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s var(--ease);
    background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.22),transparent 60%)}
  .gcard:hover .art,.gcard:focus-visible .art{--lift:-6px;
    box-shadow:0 28px 56px -18px rgba(0,0,0,.8),0 0 72px -10px color-mix(in srgb,var(--ac,#fff) 70%,transparent),0 0 0 1px color-mix(in srgb,var(--ac,#fff) 55%,transparent)}
  .gcard:hover .art::after{opacity:1}
  .gcard:hover .art img,.gcard:focus-visible .art img{filter:brightness(1.05) saturate(1.1)}
  .gcard .t{transition:color .3s var(--ease),transform .4s var(--ease)}
  .gcard:hover .t{color:#fff;transform:translateY(-2px)}

  /* Active song card cover: gentle zoom on hover */

  /* Listen / platform pills: sheen sweep + icon nudge */
  .lf-pills a:not(.abp-connect *){position:relative;overflow:hidden;isolation:isolate}
  .lf-pills a:not(.abp-connect *)>*{position:relative;z-index:1}
  .lf-pills a:not(.abp-connect *)::before{content:'';position:absolute;z-index:0;top:-30%;bottom:-30%;left:-60%;width:40%;pointer-events:none;
    background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.22) 50%,transparent 100%);transform:skewX(-14deg);opacity:0}
  .ln-plat .ln-ic,.card-plat .card-plat-ic,.lf-pills a .bi{transition:transform .3s var(--ease-snap)}
  .ln-plat:hover .ln-ic,.card-plat:hover .card-plat-ic,.lf-pills a:not(.abp-connect *):hover .bi{transform:translateY(-2px) scale(1.12)}
  .lf-pills a:not(.abp-connect *):hover{transform:translateY(-2px)}
  .lf-pills a:not(.abp-connect *):active{transform:translateY(0) scale(.97)}

  /* CTAs: arrow slides, tracking widens */
  .ed-more .ed-arrow{display:inline-block;transition:transform .45s var(--ease-calm)}
  .ed-more:hover .ed-arrow{transform:translateX(4px)}
  html[dir="rtl"] .ed-more:hover .ed-arrow{transform:scaleX(-1) translateX(4px)}
  /* CTAs: text mask reveal — label slides up, duplicate slides in from below */
  /* .mrw = inner clip box wrapping two stacked labels; sized by the first, duplicate absolutely on top */
  #edMoreT,#heroLyricsT{transition:opacity .28s var(--ease)}
  #edMoreT.swap,#heroLyricsT.swap{opacity:0}
  .mrw{position:relative;display:inline-block;overflow:hidden;vertical-align:bottom}
  .mrw>.mr{display:block;transition:transform .4s cubic-bezier(.7,0,.2,1)}
  .mrw>.mr+.mr{position:absolute;left:0;top:0;width:100%;transform:translateY(105%)}
  :is(.un-viewall,.by-all,.ed-more,.card-cta,.hero-lyr):hover .mrw>.mr{transform:translateY(-105%)}
  :is(.un-viewall,.by-all,.ed-more,.card-cta,.hero-lyr):hover .mrw>.mr+.mr{transform:translateY(0)}
  .un-viewall:hover,.by-all:hover{border-color:color-mix(in srgb,var(--theme) 70%,#fff);box-shadow:0 0 22px -8px var(--theme)}
  .card-cta svg{transition:transform .3s var(--ease-snap)}
  .card-cta:hover svg{transform:scale(1.25)}
  .hero-lyr .hl-chev{transition:transform .3s var(--ease)}
  .hero-lyr:hover .hl-chev{transform:translateX(4px)}
  html[dir="rtl"] .hero-lyr:hover .hl-chev{transform:translateX(-4px) scaleX(-1)}

  /* Top-bar icon buttons: settle bounce */
  .wbtn.icon .material-symbols-outlined{transition:transform .35s var(--ease-snap)}
  .wbtn.icon:hover .material-symbols-outlined{transform:scale(1.15)}

  /* Welcome menu items: chevron slides in, icon nudges */
  .mi .mi-chev{transition:transform .28s var(--ease),opacity .28s var(--ease)}
  .mi:hover .mi-chev{transform:translateX(4px)}
  html[dir="rtl"] .mi:hover .mi-chev{transform:translateX(-4px)}
  .mi .mi-ic{transition:transform .3s var(--ease-snap)}
  .mi:hover .mi-ic{transform:scale(1.15)}

  /* Up-next rows: cover tilts forward, title brightens */
  .un-item .un-cov{transition:transform .4s var(--ease),filter .3s var(--ease)}
  .un-item:hover .un-cov{transform:scale(1.04)}
  /* Hover equalizer: reuse the playing motif on any non-playing row */
  .un-item:not(.un-item-now) .un-covw{position:relative}
  .un-item:not(.un-item-now) .un-covw::after{content:'';position:absolute;inset:0;border-radius:8px;opacity:0;transition:opacity .25s var(--ease);
    background:linear-gradient(to top,rgba(0,0,0,.55),transparent 60%)}
  .un-item:not(.un-item-now):hover .un-covw::after{opacity:1}
  .un-item:not(.un-item-now) .un-heq{position:absolute;left:0;right:0;bottom:9px;display:flex;justify-content:center;align-items:flex-end;gap:2.5px;height:18px;opacity:0;transition:opacity .25s var(--ease);pointer-events:none;z-index:1}
  .un-item:not(.un-item-now) .un-heq i{width:3px;height:17px;border-radius:1.5px;background:#fff;transform-origin:bottom;transform:scaleY(.3)}
  .un-item:not(.un-item-now):hover .un-heq{opacity:1}
  .un-item:not(.un-item-now):hover .un-heq i{animation:uneq .8s ease-in-out infinite alternate}
  .un-item:not(.un-item-now):hover .un-heq i:nth-child(2){animation-delay:.25s}
  .un-item:not(.un-item-now):hover .un-heq i:nth-child(3){animation-delay:.5s}
  .ln-plat,.card-plat{--hb:var(--brand,var(--theme))}
  .ln-plat:hover,.card-plat:hover{text-shadow:0 0 14px color-mix(in srgb,var(--hb) 55%,transparent)}
  .ln-plat .ln-ic,.card-plat .card-plat-ic{transition:transform .3s var(--ease-snap),filter .3s var(--ease)}
  .ln-plat:hover .ln-ic,.card-plat:hover .card-plat-ic{filter:drop-shadow(0 0 8px color-mix(in srgb,var(--hb) 70%,transparent))}
  .lf-pills a:not(.abp-connect *):hover{border-color:color-mix(in srgb,var(--theme) 60%,#fff);box-shadow:0 8px 24px -12px var(--theme)}
  /* Magnetic: JS sets --mgx/--mgy on arrows and the play button */
  .arrow.prev:hover,.arrow.next:hover{transform:translateY(-50%) translate(var(--mgx,0px),var(--mgy,0px)) scale(1.08)}
  .cp-playbtn,.art-play{transition:transform .25s var(--ease),box-shadow .3s var(--ease)}
  .cp-playbtn:hover,.art-play:hover{transform:translate(var(--mgx,0px),var(--mgy,0px)) scale(1.06)}
  .un-item .un-t{transition:color .25s var(--ease)}
  .un-item:hover .un-t{color:#fff}

  /* Lyric lines: soft highlight */
  #lyricsPanel .lp-line,#lyricsOverlay .lo-line,.card-lyr .lyr-line{border-radius:8px}
  #lyricsPanel .lp-line:hover,#lyricsOverlay .lo-line:hover,.card-lyr .lyr-line:hover{background:rgba(255,255,255,.06)}

  /* Prev/next arrows: nudge in travel direction */
  .arrow:not(.gone){transition:transform .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease)}
  .arrow.prev:hover,.arrow.next:hover{animation:none}
}


/* ── Motion layer: cinematic, light. Film easing, staggered reveals, ambient drift. ── */
@media (prefers-reduced-motion:no-preference){
  /* Ambient drift retired: the world holds still (crossfade only) */
  @keyframes bgDrift{
    0%{transform:scale(1.10) translate3d(0,0,0) scaleX(var(--fx))}
    12%{transform:scale(1.06) translate3d(0,0,0) scaleX(var(--fx))}
    100%{transform:scale(1.09) translate3d(-1.2%,.6%,0) scaleX(var(--fx))}}
  @keyframes vigBreathe{from{opacity:1}to{opacity:.82}}

  /* Intro choreography: bar → card → rails → listen bar → arrows */
  body:not(.loaded) :is(#startRail,#sideRail,#listenBar,#scroller){opacity:0}
  .arrow:not(.gone){transition:opacity .6s var(--ease) .9s,transform .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease)}
  body:not(.loaded) .arrow{opacity:0}
  @media (prefers-reduced-motion:no-preference){
  body.loaded .ed-eyebrow{animation:revUp .6s var(--ease-calm) .6s both}
  body.loaded .ed-title{animation:revUp .6s var(--ease-calm) .66s both}
  body.loaded .ed-title::after{animation:ruleIn .6s var(--ease-calm) .78s both;transform-origin:left}
  html[dir="rtl"] body.loaded .ed-title::after{transform-origin:right}
  body.loaded .ed-script-l{animation:scriptIn .8s var(--ease-calm) .84s backwards}
  body.loaded .ed-script-r{animation:scriptInR .8s var(--ease-calm) .9s backwards}
  }
  @keyframes titleIn{from{opacity:0;transform:translateY(14px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(-20% 0 -20% 0)}}
  @keyframes ruleIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes scriptIn{from{opacity:0}to{opacity:.92}}
  @keyframes scriptInR{from{opacity:0}to{opacity:.92}}

  /* Song switch: the active card's content re-enters in a stagger (class toggle restarts these) */
  .wcard.active.enter .art{animation:coverIn .8s var(--ease-calm) backwards}
  @keyframes coverIn{from{opacity:.4}to{opacity:1}}
  .wcard.active.enter .cp-title{animation:revUp .6s var(--ease-calm) .12s both}
  .wcard.active.enter .card-player .cp-timeline,.wcard.active.enter .card-player .cp-controls{animation:revUp .6s var(--ease-calm) .2s both}
  .wcard.active.enter .card-hero{animation:revUp .7s var(--ease-calm) .26s both}
  .wcard.active.enter .card-avail-lbl{animation:revUp .6s var(--ease-calm) .34s both}
  .wcard.active.enter .card-listen .card-plat{animation:revUp .6s var(--ease-calm) backwards;animation-delay:calc(.38s + var(--n,0)*.05s)}
  .card-listen .card-plat:nth-child(2){--n:1}.card-listen .card-plat:nth-child(3){--n:2}.card-listen .card-plat:nth-child(4){--n:3}.card-listen .card-plat:nth-child(5){--n:4}
  .wcard.active.enter .card-lyrics{animation:revUp .6s var(--ease-calm) .5s backwards}
  #upnext.enter .un-item{animation:revUp .55s var(--ease-calm) backwards;animation-delay:calc(var(--n,0)*.06s)}
  #upnext .un-item:nth-child(2){--n:1}#upnext .un-item:nth-child(3){--n:2}#upnext .un-item:nth-child(4){--n:3}#upnext .un-item:nth-child(5){--n:4}#upnext .un-item:nth-child(6){--n:5}

  /* Welcome menu: head settles, then items cascade */
  .welc-head{animation:welcFade .7s var(--ease-calm) .1s both}
  .welc-menu .mi{animation:welcFade .6s var(--ease-calm) backwards;animation-delay:calc(.25s + var(--n,0)*.07s)}
  @keyframes welcFade{from{opacity:0}to{opacity:1}}
  .welc-menu .mi-group .mi:nth-child(1){--n:1}.welc-menu .mi-group .mi:nth-child(2){--n:2}.welc-menu .mi-group .mi:nth-child(3){--n:3}
  .welc-foot{animation:welcFade .6s var(--ease-calm) .6s both}

  /* All Releases grid: cards rise in a wave */
  #grid.show .gcard{animation:gridIn .7s var(--ease-calm) backwards;animation-delay:calc(.08s + var(--n,0)*.06s)}
  .gridwrap .gcard:nth-child(2){--n:1}.gridwrap .gcard:nth-child(3){--n:2}.gridwrap .gcard:nth-child(4){--n:3}.gridwrap .gcard:nth-child(5){--n:4}.gridwrap .gcard:nth-child(6){--n:5}.gridwrap .gcard:nth-child(7){--n:6}.gridwrap .gcard:nth-child(8){--n:7}.gridwrap .gcard:nth-child(n+9){--n:8}
  @keyframes gridIn{from{opacity:0;transform:translateY(22px) scale(.96)}to{opacity:1;transform:none}}
  #grid.show #relHead{animation:revUp .6s var(--ease-calm) both}

  /* About / Accessibility pages: hero, then blocks */
  #aboutPage.show .about-hero,#a11yPage.show .about-hero{animation:revUp .8s var(--ease-calm) .1s both}
  #aboutPage.show .about-cols>.info-block,#aboutPage.show .about-discover,#aboutPage.show .about-support,#aboutPage.show .about-follow,#aboutPage.show .site-foot,
  #a11yPage.show .info-block,#a11yPage.show .site-foot{animation:revUp .8s var(--ease-calm) both;animation-delay:calc(.22s + var(--n,0)*.09s)}
  #aboutPage.show .about-cols>.info-block:nth-child(2){--n:1}#aboutPage.show .about-discover{--n:2}#aboutPage.show .about-support{--n:3}#aboutPage.show .about-follow{--n:4}#aboutPage.show .site-foot{--n:5}
  #a11yPage.show .info-block:nth-of-type(2){--n:1}#a11yPage.show .info-block:nth-of-type(3){--n:2}#a11yPage.show .info-block:nth-of-type(4){--n:3}#a11yPage.show .site-foot{--n:4}

  /* Karaoke: the active line breathes a soft glow */
  @keyframes lineGlow{from{text-shadow:0 0 10px color-mix(in srgb,var(--theme) 35%,transparent)}to{text-shadow:0 0 22px color-mix(in srgb,var(--theme) 70%,transparent)}}

  /* Play button: soft ring while a track is live */
  .wcard.k-playing .cp-playbtn{position:relative}
  @keyframes ringOut{0%{opacity:.7;transform:scale(.85)}70%,100%{opacity:0;transform:scale(1.35)}}
}
@media (prefers-reduced-motion:reduce){
  body:not(.loaded) :is(#startRail,#sideRail,#listenBar,.arrow){opacity:1}
}
/* Settings › Reduce motion: no fly-outs, no staged entrances, no welcome cascade — content still crossfades */
body.reduce-motion :is(#startRail,#sideRail,#listenBar,#scroller,.wcard,.welc-stage,.welc-head,.welc-menu .mi,.welc-foot,.welc-langpanel,.ed-title,.ed-eyebrow,.ed-script-l,.ed-script-r){animation:none!important}
body.reduce-motion:not(.loaded) :is(#startRail,#sideRail,#listenBar,#scroller){opacity:1}
body.reduce-motion #welcome{transition-duration:.35s}
body.reduce-motion :is(#startRail,#sideRail,#listenBar,#scroller){transition:opacity .5s var(--ease)}

/* ── Song switch: a slow, staged exit — bar, rails, then the card — a beat of empty stage while the
   world crossfades, then everything returns in reverse order on a long settling ease.
   Standalone `translate`/`scale` compose with each panel's own transform. ── */
@media (min-width:960px) and (prefers-reduced-motion:no-preference){
  body{--swx:1;--sw-out:cubic-bezier(.6,.02,.72,.5);--sw-in:cubic-bezier(.12,.9,.22,1)}
  html[dir="rtl"] body{--swx:-1}
  body.song-swap :is(#listenBar,#startRail,#sideRail,#scroller){animation:swapFade .7s linear both}
  body.song-swap :is(#startRail,#sideRail,.wcard){transition:none}
  @keyframes swapFade{0%{opacity:1;animation-timing-function:var(--sw-out)}40%{opacity:0;animation-timing-function:linear}55%{opacity:0;animation-timing-function:var(--sw-in)}100%{opacity:1}}
  /* Page load: same choreography as a song switch's return — card settles first, rails, then the bar.
     `.swapped` (set on the first song switch) retires these so dropping .song-swap can't replay them. */
  body.loaded:not(.swapped) #scroller{animation:enterCard 1.1s var(--sw-in) .1s both}
  body.loaded:not(.swapped) #sideRail{animation:enterRailL 1s var(--sw-in) .3s both}
  body.loaded:not(.swapped) #startRail{animation:enterRailR 1s var(--sw-in) .4s both}
  body.loaded:not(.swapped) #listenBar{animation:enterBar 1s var(--sw-in) .55s both}
  @keyframes enterCard{from{opacity:0}to{opacity:1}}
  @keyframes enterRailL{from{opacity:0}to{opacity:1}}
  @keyframes enterRailR{from{opacity:0}to{opacity:1}}
  @keyframes enterBar{from{opacity:0}to{opacity:1}}
}


/* About rail title matches the Up-next label: same UI face, size, tracking and rule */
body #aboutSong .ed-title{font-family:var(--ui);font-size:13px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;line-height:1.3;white-space:normal;
  margin:0 0 10px;padding:0 0 8px;border-bottom:1px solid color-mix(in srgb,currentColor 38%,transparent);color:inherit}
body #aboutSong .ed-title::after{display:none}
body #aboutSong .ed-eyebrow:empty{display:none}
@media (prefers-reduced-motion:no-preference){ body.loaded #aboutSong .ed-title{animation:revUp .7s var(--ease-calm) .8s both} }


/* About rail: teaser = intro bio; "More about me" unfolds the full text in place */
@media (min-width:960px){
  body #aboutSong #abpBioWho{display:block;max-height:none;overflow:visible;-webkit-line-clamp:none;-webkit-mask-image:none;mask-image:none}
  body:not(.abp-open) #aboutSong #abpBioWhat{display:none}
  body #aboutSong .abp-scroll{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-bottom:4px;-webkit-mask-image:none;mask-image:none}
  body #aboutSong #abpBioWhat{margin-top:10px}
}


/* No scrolling in the About rail: the panel takes its natural height; JS steps the bio size down to fit */
@media (min-width:960px){
  body #sideRail{max-height:none}
  body #aboutSong{flex:0 0 auto;overflow:visible}
  body #aboutSong .abp-scroll{flex:0 0 auto;overflow:visible;max-height:none;padding-bottom:0}
  body #aboutSong .bio{font-size:var(--bioFs,15px);line-height:1.5}
}


/* Rail overflow (browser zoom / short windows): bio shrinks, then the whole bio scrolls inside the rail — nothing is ever cut */
@media (min-width:960px){
  body #sideRail:has(#aboutSong.abp-scrolls){max-height:var(--railAvail,84svh)}
  body #aboutSong.abp-scrolls{flex:1 1 auto;min-height:0;overflow:hidden}
  body #aboutSong.abp-scrolls .abp-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;padding-bottom:4px}

  body #aboutSong .ed-script-l{flex:0 0 auto}

}


/* ═══════════════════════════════════════════════════════════════════
   LOGO PASS — one rule set for every brand mark (appended last; wins).
   Rest: true brand colours, one optical size per context, centred on
   the label baseline. Hover: a quiet background wash — no lift, no glow,
   no underline, no sheen. Focus keeps a visible ring.
   ═══════════════════════════════════════════════════════════════════ */
:root{--bc-spotify:#1ED760;--bc-apple:#FA243C;--bc-yt:#FF0000;--bc-ig:#E1306C;--bc-bmc:#FFDD00;
      --wash:rgba(255,255,255,.10);--wash-strong:rgba(255,255,255,.16)}
body.sky-day{--wash:rgba(16,48,79,.08);--wash-strong:rgba(16,48,79,.13)}

/* icon boxes */
.ln-ic,.card-plat-ic,.hero-plat-ic,.lf-pills a .bi,.contact .bi,#dock .cl-i,.wnav2 .cl-i{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;line-height:0;aspect-ratio:1}
:is(.ln-ic,.card-plat-ic,.hero-plat-ic,.lf-pills a .bi,.contact .bi,#dock .cl-i,.wnav2 .cl-i) svg,
:is(.lf-pills a .bi,.contact .bi) img,.hp-link svg{width:100%;height:100%;display:block;fill:currentColor;border-radius:0}
.lf-pills a .bi .material-symbols-outlined,.contact .bi .material-symbols-outlined{font-size:inherit;line-height:1;width:1em;height:1em;display:block}
/* optical balance: marks that don't fill their viewBox get nudged up to the same visual weight */
[data-platform="spotify"] svg{transform:scale(1.08)}
[data-platform="youtube"] svg{transform:scale(1.06)}
[data-platform="tiktok"] svg{transform:scale(.94)}
/* sizes per context */
.ln-ic{width:20px;height:20px}
.card-plat-ic,.hero-plat-ic{width:20px;height:20px}
.lf-pills a .bi,.contact .bi{width:20px;height:20px;font-size:20px}
body #aboutSong .abp-connect :is(.lf-pills a,.contact) .bi{width:22px;height:22px;font-size:22px;grid-row:1/3;align-self:center;justify-self:center}
body #aboutSong .abp-connect :is(.lf-pills a,.contact) .bi svg,body #aboutSong .abp-connect :is(.lf-pills a,.contact) .bi img{width:100%;height:100%}
body #aboutSong .abp-connect .contact svg{width:22px;height:22px}
.hp-link svg{width:20px;height:20px}
@media (min-width:960px){ .hp-link svg{width:22px;height:22px} }
@media (max-width:959px){ .ln-plat .ln-ic{width:24px;height:24px} }

/* rest colours: brand marks are always brand */
:is(.ln-plat,.card-plat,.hero-plat,.lf-pills a,.hp-link,#dock .cl-i)[data-platform="spotify"],
:is(.ln-plat,.card-plat,.hero-plat,.lf-pills a)[data-platform="spotify"] :is(.ln-ic,.card-plat-ic,.hero-plat-ic,.bi),
#dock .cl-spotify,.wnav2 .cl-spotify{color:var(--bc-spotify)}
:is(.ln-plat,.card-plat,.hero-plat,.lf-pills a)[data-platform="apple"] :is(.ln-ic,.card-plat-ic,.hero-plat-ic,.bi),.hp-link[data-platform="apple"]{color:var(--bc-apple)}
:is(.ln-plat,.card-plat,.hero-plat,.lf-pills a)[data-platform="youtube"] :is(.ln-ic,.card-plat-ic,.hero-plat-ic,.bi),
:is(.ln-plat,.card-plat,.hero-plat,.lf-pills a)[data-platform="ytmusic"] :is(.ln-ic,.card-plat-ic,.hero-plat-ic,.bi),
.hp-link[data-platform="youtube"],.hp-link[data-platform="ytmusic"],#dock .cl-youtube,.wnav2 .cl-youtube{color:var(--bc-yt)}
:is(.ln-plat,.card-plat,.hero-plat,.lf-pills a)[data-platform="instagram"] :is(.ln-ic,.card-plat-ic,.hero-plat-ic,.bi),#dock .cl-instagram,.wnav2 .cl-instagram{color:var(--bc-ig)}
/* YouTube: white play glyph; YouTube Music: white ring + glyph — always, not only on hover */
.yt-tri,[data-platform="youtube"] .yt-tri,.cl-youtube .yt-tri{fill:#fff;--yt-tri:#fff}
.pi-in,[data-platform="ytmusic"] .pi-in{fill:#fff;--pi-in:#fff}
/* TikTok: ink glyph with the cyan/red offset that is the mark */
body:not(.sky-day) :is(.lf-pills a,.ln-plat,.card-plat)[data-platform="tiktok"] .bi,body:not(.sky-day) #dock .cl-tiktok{color:#fff;filter:drop-shadow(-1px -.6px 0 #25F4EE) drop-shadow(1px .6px 0 #FE2C55)}
body.sky-day :is(.lf-pills a,.ln-plat,.card-plat)[data-platform="tiktok"] .bi,body.sky-day #dock .cl-tiktok{color:#010101;filter:drop-shadow(-1px -.6px 0 #25F4EE) drop-shadow(1px .6px 0 #FE2C55)}
body #aboutSong .abp-connect .lf-pills a[data-platform="tiktok"] .bi{color:inherit}
body:not(.sky-day) #aboutSong .abp-connect .lf-pills a[data-platform="tiktok"] .bi{color:#fff}
body.sky-day #aboutSong .abp-connect .lf-pills a[data-platform="tiktok"] .bi{color:#010101}
/* Buy Me a Coffee: the yellow cup as supplied, no tint, no rounding */
.lf-pills a[data-platform="bmc"] .bi{color:var(--bc-bmc)}
.lf-pills a[data-platform="bmc"] .bi img{border-radius:0;object-fit:contain}
/* mail: brand red, full ink */
.contact .bi,.contact .bi .material-symbols-outlined,.abp-connect .contact .bi{color:var(--red);filter:none!important}
body.sky-day :is(.lf-pills a,.contact) .material-symbols-outlined{color:var(--red)}

/* labels sit on the icon's centre line */
.ln-plat,.card-plat,.hero-plat,.lf-pills a:not(.abp-connect *),.contact:not(.abp-connect *){align-items:center;gap:9px}
.ln-plat .ln-t,.card-plat .card-plat-t,.hero-plat .hero-plat-t{line-height:1;transform:translateY(.5px)}

/* header: the K mark returns beside the wordmark */
.wbrand img{display:block;width:24px;height:24px;object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 1px 4px rgba(0,0,0,.25))}
body.sky-day .wbrand img{filter:none}

/* hover / focus: wash only */
:is(.ln-plat,.card-plat,.hero-plat,.lf-pills a,.contact,.hp-link,#dock .task-item,#dock .cl-i,.wnav2 .cl-i){
  transition:background-color .2s var(--ease),color .2s var(--ease)}
:is(.ln-plat,.card-plat,.hero-plat,.lf-pills a,.contact,.hp-link,#dock .task-item,#dock .cl-i,.wnav2 .cl-i):is(:hover,:focus-visible,:active){
  transform:none!important;translate:none!important;scale:none!important;
  text-decoration:none!important;text-shadow:none!important;box-shadow:none!important;
  border-color:transparent!important;opacity:1!important}
:is(.ln-plat,.card-plat,.hero-plat,.lf-pills a,.contact,.hp-link,#dock .task-item,#dock .cl-i,.wnav2 .cl-i):is(:hover,:focus-visible) {background:var(--wash)!important}
:is(.ln-plat,.card-plat,.hero-plat,.lf-pills a,.contact,.hp-link,#dock .task-item,#dock .cl-i,.wnav2 .cl-i):active{background:var(--wash-strong)!important}
:is(.ln-plat,.card-plat,.hero-plat,.lf-pills a,.contact,.hp-link,#dock .task-item):is(:hover,:focus-visible,:active) :is(.ln-ic,.card-plat-ic,.hero-plat-ic,.bi,svg,img){
  transform:none!important;translate:none!important;scale:none!important;text-shadow:none!important;animation:none!important}
:is(.ln-plat,.card-plat,.hero-plat,.lf-pills a,.contact,.hp-link):is(:hover,:focus-visible,:active) :is(.ln-ic,.card-plat-ic,.hero-plat-ic,.bi):not([data-platform="tiktok"] *){filter:none!important}
:is(.ln-plat,.card-plat,.hero-plat,.lf-pills a,.contact,.hp-link):is(:hover,:focus-visible,:active) [data-platform="spotify"] svg,
[data-platform="spotify"]:is(:hover,:focus-visible,:active) svg{transform:scale(1.08)!important}
[data-platform="youtube"]:is(:hover,:focus-visible,:active) svg{transform:scale(1.06)!important}
[data-platform="tiktok"]:is(:hover,:focus-visible,:active) svg{transform:scale(.94)!important}
/* the marks keep their brand on hover too (no grey→brand flip, no white-out) */
[data-platform="spotify"]:is(:hover,:focus-visible) :is(.ln-ic,.card-plat-ic,.hero-plat-ic,.bi),.hp-link[data-platform="spotify"]:is(:hover,:focus-visible){color:var(--bc-spotify)!important}
[data-platform="apple"]:is(:hover,:focus-visible) :is(.ln-ic,.card-plat-ic,.hero-plat-ic,.bi),.hp-link[data-platform="apple"]:is(:hover,:focus-visible){color:var(--bc-apple)!important}
:is([data-platform="youtube"],[data-platform="ytmusic"]):is(:hover,:focus-visible) :is(.ln-ic,.card-plat-ic,.hero-plat-ic,.bi),.hp-link:is([data-platform="youtube"],[data-platform="ytmusic"]):is(:hover,:focus-visible){color:var(--bc-yt)!important}
[data-platform="instagram"]:is(:hover,:focus-visible) .bi{color:var(--bc-ig)!important}
[data-platform="youtube"]:is(:hover,:focus-visible) .yt-tri{fill:#fff!important;--yt-tri:#fff}
[data-platform="ytmusic"]:is(:hover,:focus-visible) .pi-in{fill:#fff!important;--pi-in:#fff}
body:not(.sky-day) [data-platform="tiktok"]:is(:hover,:focus-visible) .bi{color:#fff!important}
body.sky-day [data-platform="tiktok"]:is(:hover,:focus-visible) .bi{color:#010101!important}
.contact:is(:hover,:focus-visible) .bi,.contact:is(:hover,:focus-visible) .bi .material-symbols-outlined{color:var(--red)!important}
/* label ink on hover stays the panel ink (no white flash on day) */
body.sky-day :is(.ln-plat,.lf-pills a,.contact,#dock .task-item):is(:hover,:focus-visible){color:#0b2742!important}
body.sky-day :is(.ln-plat,.lf-pills a,.contact):is(:hover,:focus-visible) :is(.ln-t,.cn-t){color:#0b2742!important}
body:not(.sky-day) :is(.ln-plat,.lf-pills a,.contact,#dock .task-item):is(:hover,:focus-visible){color:#fff!important}
/* rounded wash on the flat desktop rows and the pills */
.ln-plat{border-radius:10px}
body #aboutSong .abp-connect :is(.lf-pills a,.contact){border-radius:10px}
body #aboutSong .abp-connect :is(.lf-pills a,.contact)::after{opacity:.76!important}
.lf-pills a:not(.abp-connect *)::before{content:none!important}
/* keyboard focus ring survives the wash */
:is(.ln-plat,.card-plat,.hero-plat,.lf-pills a,.contact,.hp-link,#dock .task-item,#dock .cl-i):focus-visible{
  outline:2px solid color-mix(in srgb,var(--theme) 70%,#fff)!important;outline-offset:2px}
body.sky-day :is(.ln-plat,.card-plat,.hero-plat,.lf-pills a,.contact,.hp-link,#dock .task-item,#dock .cl-i):focus-visible{
  outline-color:color-mix(in srgb,var(--theme) 55%,#0b2a47)!important}
@media (prefers-reduced-motion:reduce){ :is(.ln-plat,.card-plat,.hero-plat,.lf-pills a,.contact,.hp-link,#dock .task-item){transition:none} }


/* ── About rail polish: width-robust ─────────────────────────────────────── */
/* no dead space from the empty "My music" body in the teaser state */
#aboutSong #abpBioWhat:empty{display:none;margin:0}
/* short measures: no orphaned last words, slightly airier lines */
#aboutSong .bio p{text-wrap:pretty;line-height:1.55}
/* connect strip: columns collapse to one when the rail can't fit two labels; labels never clip */
body #aboutSong.abp-cn-compact .abp-connect{grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:4px 8px}
body #aboutSong.abp-cn-compact :is(.lf-pills a,.contact){min-width:0;overflow:hidden;font-size:11.5px;letter-spacing:.08em}
body #aboutSong.abp-cn-compact :is(.lf-pills a,.contact),body #aboutSong.abp-cn-compact :is(.lf-pills a,.contact) .cn-t,
body #aboutSong.abp-cn-compact :is(.lf-pills a,.contact)::before{font-weight:600}
/* one glyph size everywhere in the rail (svg, img and the mail symbol) */
body #aboutSong .abp-connect :is(.lf-pills a,.contact) .bi{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center}
body #aboutSong .abp-connect :is(.lf-pills a,.contact) .bi :is(svg,img){width:20px;height:20px}
body #aboutSong .abp-connect .contact .bi .material-symbols-outlined{font-size:20px;width:20px;height:20px;line-height:1}
body #aboutSong .ed-more .ed-arrow{font-size:14px;line-height:1}
body #aboutSong.abp-cn-compact :is(.lf-pills a .cn-t,.contact::before,[data-platform="bmc"]::before){overflow:hidden;text-overflow:ellipsis}

/* ── "More about me" unfolds in place on desktop ─────────────────────────── */
@media (min-width:960px){
  body #aboutSong .ed-more{display:inline-flex;margin:12px 0 0;padding:9px 16px;font-size:12.5px;align-self:flex-start}
  body #aboutSong .ed-more .ed-arrow{transition:transform .45s var(--ease-calm)}
  body.abp-open #aboutSong .ed-more .ed-arrow{transform:rotate(-90deg)}
  body.abp-open #aboutSong .ed-more:hover .ed-arrow{transform:rotate(-90deg) translateX(2px)}
  html[dir="rtl"] body.abp-open #aboutSong .ed-more .ed-arrow{transform:scaleX(-1) rotate(-90deg)}
  /* open: the rail grows to the full available height, "My music" body appears */
  body.abp-open #sideRail{max-height:calc(100svh - var(--barH,64px) - var(--railRes,var(--dockH,72px)) - 20px)}
  body.abp-open #aboutSong{flex:1 1 auto;min-height:0}
  body.abp-open #aboutSong #abpWhatHead{display:none}
  body.abp-open #aboutSong #abpBioWhat:not(:empty){display:block;margin-top:10px}
  body.abp-open #aboutSong .abp-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin;
        -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 22px),transparent)}
  /* open: connect condenses to an icon row — labels drop, glyphs stay 20px, hit targets stay 38px */
  body.abp-open #aboutSong .abp-connect,body.abp-open #aboutSong.abp-cn-compact .abp-connect{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 0 0;margin-top:10px;overflow:visible;
        border-top:1px solid color-mix(in srgb,currentColor 38%,transparent)}
  body.abp-open #aboutSong .abp-connect .lf-pills{display:contents}
  body.abp-open #aboutSong .abp-connect :is(.lf-pills a,.contact){display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;min-height:0;max-width:none;padding:0;margin:0;
        border-radius:10px;background:none;border:0;font-size:0;letter-spacing:0}
  body.abp-open #aboutSong .abp-connect :is(.lf-pills a,.contact)::before,body.abp-open #aboutSong .abp-connect :is(.lf-pills a,.contact)::after{content:none}
  body.abp-open #aboutSong .abp-connect :is(.lf-pills a,.contact) .cn-t{display:none}
  body.abp-open #aboutSong .abp-connect :is(.lf-pills a,.contact) .bi{width:20px;height:20px}
  body.abp-open #aboutSong .abp-connect :is(.lf-pills a,.contact):hover,body.abp-open #aboutSong .abp-connect :is(.lf-pills a,.contact):focus-visible{background:color-mix(in srgb,currentColor 10%,transparent);text-decoration:none;transform:none;box-shadow:none}
  body.abp-open #aboutSong .abp-connect :is(.lf-pills a,.contact):hover .bi{transform:translateY(-2px) scale(1.1)}
  body.abp-open #aboutSong .abp-connect :is(.lf-pills a,.contact):focus-visible{outline:2px solid color-mix(in srgb,var(--theme) 70%,#fff);outline-offset:2px}
  body.abp-open #aboutSong .ed-script-l{display:none}
}

/* ── About rail: no stray scrollbars, one-line CTA ─────────────────────────── */
@media (min-width:960px){
  /* rows were 8px wider than the panel on each side (negative margins) → horizontal scrollbar */
  body #aboutSong .abp-scroll{overflow-x:hidden}
  body #aboutSong .abp-connect .lf-pills,body #aboutSong .abp-connect .contact{margin-inline:0}
  body #aboutSong .abp-connect :is(.lf-pills a,.contact){max-width:100%;min-width:0}
  body #aboutSong .abp-connect :is(.lf-pills a,.contact) .cn-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body #aboutSong .abp-connect :is(.lf-pills a,.contact)::after{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* closed: teaser never scrolls — it's one finished paragraph */
  body:not(.abp-open) #aboutSong .abp-scroll{overflow:visible}
  /* CTA on one line */
  body #aboutSong .ed-more{white-space:nowrap;flex-wrap:nowrap}
  body #aboutSong .ed-more #edMoreT{white-space:nowrap}
  /* the magnetic pull is gone: keep the play buttons perfectly still */
  .cp-playbtn,.art-play{--mgx:0px;--mgy:0px}
}

@media (min-width:960px){
  body #aboutSong .abp-scroll .ed-more{margin:10px 0 4px;align-self:flex-start;order:0}
}

/* ── Composition pass ───────────────────────────────────────────────────────── */
@media (min-width:960px){
  /* both handwritten notes: the left one returns under the About rail */
  /* "More about me" matches "View all": quiet uppercase text link with arrow, no pill */
  body #aboutSong .ed-more,body #aboutSong .abp-scroll .ed-more{margin:8px 0 2px;padding:0;border:0;background:none;border-radius:0;
        font-family:var(--ui);font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:inherit;gap:8px;transition:opacity .25s var(--ease-snap)}
  body #aboutSong .ed-more:hover,body #aboutSong .ed-more:focus-visible{background:none;opacity:.75;outline:none}
  body #aboutSong .ed-more:focus-visible{outline:2px solid color-mix(in srgb,var(--theme) 70%,#fff);outline-offset:3px}
  body #aboutSong .ed-more .ed-arrow{font-size:12px}
  /* mail glyph in panel ink like TikTok — red read as an error state */
  body #aboutSong .abp-connect .contact .bi,body #aboutSong.abp-cn-compact .contact .bi,body.abp-open #aboutSong .abp-connect .contact .bi{color:inherit;filter:none}
  body #aboutSong .abp-connect .contact{--hb:currentColor}
  /* rails share one top edge so the composition reads as one row */
  body:not(.lyrics-focus) #sideRail,body:not(.lyrics-focus) #startRail{top:calc(var(--barH,64px) + 46px);transform:none}
}

/* ── "More about me" → "Show less": the button rides at the bottom of the unfolded bio and its arrow turns ── */
@media (min-width:960px){
  body #aboutSong .abp-scroll{display:flex;flex-direction:column}
  body #aboutSong .abp-scroll .ed-more{order:0}
  body #aboutSong .abp-scroll #abpBioWhat,body #aboutSong .abp-scroll #abpWhatHead{order:-1}
  body #aboutSong .abp-scroll #abpBioWho{order:-2}
  body #aboutSong .abp-scroll .abp-connect{order:1}
  body #aboutSong .ed-more .ed-arrow{display:inline-block;transition:transform .25s var(--ease-snap)}
  body:not(.abp-open) #aboutSong .ed-more:hover .ed-arrow{transform:translateX(3px)}
  body.abp-open #aboutSong .ed-more .ed-arrow{transform:rotate(-90deg)}
  body.abp-open #aboutSong .ed-more:hover .ed-arrow{transform:rotate(-90deg) translateX(2px)}
  html[dir="rtl"] body:not(.abp-open) #aboutSong .ed-more .ed-arrow{transform:scaleX(-1)}
  html[dir="rtl"] body:not(.abp-open) #aboutSong .ed-more:hover .ed-arrow{transform:scaleX(-1) translateX(3px)}
  html[dir="rtl"] body.abp-open #aboutSong .ed-more .ed-arrow{transform:scaleX(-1) rotate(-90deg)}
  /* the unfolded paragraphs fade/slide in under the teaser */
  @media (prefers-reduced-motion:no-preference){
    body.abp-open #aboutSong #abpBioWhat{animation:abpFade .55s var(--ease-calm) .12s both}
  }
}

/* ── no scrollbar flash while the bio unfolds ── */
@media (min-width:960px){
  body #aboutSong .abp-scroll{scrollbar-width:none}
  body #aboutSong .abp-scroll::-webkit-scrollbar{display:none}
  body.abp-anim #aboutSong .abp-scroll,body.abp-anim #aboutSong{overflow:hidden!important}
  body.abp-open #aboutSong .abp-scroll{overflow-x:hidden;overflow-y:auto;-webkit-mask-image:none;mask-image:none}
}

/* ── reveal: unfolded paragraphs cascade in one after another ── */
@media (min-width:960px) and (prefers-reduced-motion:no-preference){
  body.abp-open #aboutSong #abpBioWhat{animation:none}
  body.abp-open #aboutSong #abpBioWhat p{animation:abpReveal .6s var(--ease-calm) both;animation-delay:calc(.1s + var(--i,0) * .11s)}
  body.abp-open #aboutSong #abpBioWhat p:nth-child(1){--i:0} body.abp-open #aboutSong #abpBioWhat p:nth-child(2){--i:1}
  body.abp-open #aboutSong #abpBioWhat p:nth-child(3){--i:2} body.abp-open #aboutSong #abpBioWhat p:nth-child(4){--i:3}
  body.abp-open #aboutSong #abpBioWhat p:nth-child(5){--i:4} body.abp-open #aboutSong #abpBioWhat p:nth-child(n+6){--i:5}
  body.abp-open #aboutSong .abp-scroll .ed-more{animation:abpReveal .5s var(--ease-calm) .42s both}
  body.abp-open #aboutSong .abp-connect{animation:abpReveal .5s var(--ease-calm) .5s both}
}
@keyframes abpReveal{from{opacity:0;transform:translateY(10px);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}

/* ── PHONE PASS (≤959px): one screen, cover first ─────────────────────────── */
@media (max-width:959px){
  /* 1+2. compact transport: one row (prev · play · next · lyrics · like) so the cover gets the height back */
  .wcard.active:not(.lyr-open) .card-player .cp-controls{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;gap:clamp(6px,2vw,10px);padding:2px 0 0}
  .wcard.active:not(.lyr-open) .card-player .cpc-c,.wcard.active:not(.lyr-open) .card-player .cpc-r{display:contents}
  .wcard.active:not(.lyr-open) .card-player .cpc-c .k-tool,.wcard.active:not(.lyr-open) .card-player .cpc-r .k-tool{--sat:clamp(44px,11.5vw,52px);width:var(--sat);height:var(--sat);min-width:var(--sat);min-height:var(--sat)}
  .wcard.active:not(.lyr-open) .card-player .cpc-c .k-tool svg,.wcard.active:not(.lyr-open) .card-player .cpc-r .k-tool svg{width:clamp(20px,5.4vw,24px);height:clamp(20px,5.4vw,24px)}
  .wcard.active:not(.lyr-open) .card-player .cp-playbtn{--play:clamp(60px,15.5vw,68px);order:0}
  .wcard.active:not(.lyr-open) .card-player .cp-playbtn svg{width:clamp(26px,7vw,30px);height:clamp(26px,7vw,30px)}
  .wcard.active:not(.lyr-open) .card-player .cp-tprev{order:-2} .wcard.active:not(.lyr-open) .card-player .cp-b10{order:-1}
  .wcard.active:not(.lyr-open) .card-player .cp-f10{order:1} .wcard.active:not(.lyr-open) .card-player .cp-tnext{order:2}
  .wcard.active:not(.lyr-open) .card-player .cpc-r .k-tool{order:3}
  /* live-lyric pill: two lines max */
  .wcard.active:not(.lyr-open).k-bound .np-preview{margin-top:6px;padding:8px 34px 9px;max-height:64px}
  .wcard.active:not(.lyr-open) .cp-title{padding:4px 4px 0}
  /* Listen on: one row of four round icons (labels stay for screen readers) */
  #listenBar{gap:6px;padding:8px 12px 10px}
  .ln-plats{display:flex;justify-content:center;gap:clamp(8px,2.6vw,12px)}
  .ln-plat{width:48px;min-height:48px;padding:0;border-radius:50%;flex:0 0 auto;justify-content:center}
  .ln-plat .ln-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .ln-plat .ln-ic{width:22px;height:22px}
  /* 1. never under the dock: the stage reserves the dock and the bar sits above it */
  #showcase{padding-bottom:calc(var(--dockH,82px) + 10px)}
  /* 3. song position dots under the cover (the two-song catalog) */
  #wayfinder{display:flex !important;padding:6px 0 2px}
  /* 4. 44px hit areas for the small settings controls */
  .fx-sw::before,.sm-sw::before{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
  .sm-sw{position:relative}
  /* 5. type scale: 12 · 13 · 15 · 17 · 22 */
  .wcard.active:not(.lyr-open) .card-player .cp-cur,.wcard.active:not(.lyr-open) .card-player .cp-rem{font-size:12px}
  .wcard.active:not(.lyr-open) .cpt-name{font-size:22px}
  .wcard.active:not(.lyr-open) .cpt-sub,.wcard.active:not(.lyr-open) .cpt-subrow{font-size:13px}
  .np-o{font-size:17px} .np-tr{font-size:13px}
  .ln-head{font-size:12px}
  /* 6. brand hits 44px */
  .wbrand{min-height:44px}
}

@media (max-width:959px){
  .wcard.active:not(.lyr-open) .card-player :is(.cp-b10,.cp-f10){display:none}
  .wcard.active:not(.lyr-open) .card-player .cp-controls{gap:clamp(8px,2.8vw,14px);zoom:1}
  .wcard.active:not(.lyr-open) .card-player .cpc-c .k-tool,.wcard.active:not(.lyr-open) .card-player .cpc-r .k-tool{--sat:clamp(46px,12.5vw,54px)}
}

/* ── PHONE LEGIBILITY: text always sits on a surface; no alpha-faded ink; 13px floor ── */
@media (max-width:959px){
  /* 1. frosted plates regardless of the "bare panels" setting */
  body #showcase .wcard.active:not(.lyr-open),body.panels-bare #showcase .wcard.active:not(.lyr-open){
        background:var(--pan-bg,rgba(14,15,18,.72));border:1px solid var(--glass-bd);
        -webkit-backdrop-filter:var(--pan-blur,blur(18px));backdrop-filter:var(--pan-blur,blur(18px));
        box-shadow:0 18px 44px -18px rgba(0,0,0,.5)}
  body.panels-bare :is(#listenBar),body:not(.panels-bare) :is(#listenBar),body.sky-day.panels-bare :is(#listenBar){
        background:var(--pan-bg,rgba(14,15,18,.72));border:1px solid var(--glass-bd);
        -webkit-backdrop-filter:var(--pan-blur,blur(18px));backdrop-filter:var(--pan-blur,blur(18px));box-shadow:0 10px 26px -14px rgba(0,0,0,.5)}
  body.sky-day.panels-bare #listenBar::before{content:none}
  body.panels-bare :is(.ln-plat,.ln-head,#listenBar){color:#e8eef5;text-shadow:none}
  body.sky-day.panels-bare :is(.ln-plat,.ln-head,#listenBar){color:#10304f;text-shadow:none}
  body.panels-bare #listenBar .ln-plat{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12)}
  body.sky-day.panels-bare #listenBar .ln-plat{background:rgba(16,48,79,.06);border-color:rgba(16,48,79,.18)}
  body .wcard.active:not(.lyr-open) .wtext,body #listenBar,body .wcard.active:not(.lyr-open) .card-player{text-shadow:none}
  /* 4. live-lyric pill on a real plate */
  .wcard.active:not(.lyr-open).k-bound .np-preview{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.16)}
  body.sky-day .wcard.active:not(.lyr-open).k-bound .np-preview{background:rgba(16,48,79,.1);border-color:rgba(16,48,79,.22)}
  /* 2. full ink; hierarchy by weight, not transparency */
  .cpt-sub,.wcard.active:not(.lyr-open) .cpt-sub{opacity:1;text-shadow:none;font-weight:500}
  .ln-head,#lnHead{opacity:1}
  .np-tr{color:rgba(232,238,245,.96)} body.sky-day .np-tr{color:#10304f}
  .wcard.active:not(.lyr-open) .card-player .cp-cur,.wcard.active:not(.lyr-open) .card-player .cp-rem{opacity:1}
  .sm-sec,body.sky-day .sm-sec{color:rgba(232,238,245,.85);font-size:11px} body.sky-day .sm-sec{color:#10304f}
  .sm-ic,body.sky-day .sm-ic{color:inherit;opacity:.9}
  .fx-row label,.sm-item,.lang-item,.info-item,.sm-accent-row .sm-t,.lang-lyrics-label-text{color:#e8eef5}
  body.sky-day .fx-row label,body.sky-day .sm-item,body.sky-day .lang-item,body.sky-day .info-item,body.sky-day .fx-row,body.sky-day .lang-lyrics-label-text{color:#0d2b47}
  .cl-tg-t,.cl-back-t,.cl-copy-t{opacity:1} body.sky-day :is(.cl-tg-t,.cl-back-t,.cl-copy-t){color:#0d2b47}
  /* 3. type floor: 13px UI, 14px menu rows */
  .fx-row label,.sm-item,.lang-item,.sm-accent-row .sm-t,.lang-lyrics-label-text{font-size:14px}
  .ln-head,.cp-cur,.cp-rem,.cl-tg-t,.cl-back-t,.cl-copy-t,#langBtnCode{font-size:13px}
  .wcard.active:not(.lyr-open) .card-player .cp-cur,.wcard.active:not(.lyr-open) .card-player .cp-rem{font-size:13px}
  .wcard.active:not(.lyr-open) .cpt-sub,.wcard.active:not(.lyr-open) .cpt-subrow{font-size:13px}
  .np-tr{font-size:14px}
  /* 5. dock labels: 13px on a solid band */
  #dock .task-item .ti-lbl,#dock #taskAbout .ti-lbl,#dock #taskFollow .ti-lbl,#dock #taskContact .ti-lbl,#dock #taskDonate .ti-lbl{font-size:13px;font-weight:600;letter-spacing:.12em;color:#fff}
  body.sky-day #dock .task-item .ti-lbl,body.sky-day #dock #taskAbout .ti-lbl,body.sky-day #dock #taskFollow .ti-lbl,body.sky-day #dock #taskContact .ti-lbl,body.sky-day #dock #taskDonate .ti-lbl{color:#10304f}
  #dock::before{background:linear-gradient(180deg, rgba(var(--slate),.9), rgba(var(--slate),.96) 40%)}
  body.sky-day #dock::before{background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(250,253,255,.98) 40%)}
}

/* ── PHONE TEXT PASS (≤959px): everything readable at arm's length ────────── */
@media (max-width:959px){
  /* 1. About/Next sheets: 12px eyebrows/labels → 14px */
  .ed-eyebrow,.abp-k,.cn-k,.lf-k,#aboutSong .ed-title,#upnext .un-head{font-size:14px;letter-spacing:.05em}
  /* 2. body copy: 15px on a 1.55 leading, comfortable measure */
  #aboutSong .bio p,#upnext .un-sub,.lo-lines .lo-tr,.lo-ph{font-size:15px;line-height:1.55;text-wrap:pretty}
  /* 3. connect/follow rows: full-size labels, 48px rows, never two columns */
  .abp-connect{grid-template-columns:1fr}
  .lf-pills a,.contact{min-height:48px;font-size:14px;letter-spacing:.06em;font-weight:600;justify-content:flex-start}
  .lf-pills a .cn-t{overflow:visible}
  /* 4. lyric overlay: original 20px/translation 15px, never below */
  .lo-lines .lo-o,.np-o{font-size:clamp(18px,4.9vw,20px);line-height:1.4}
  /* 5. footnotes/timestamps floor at 13px */
  .cp-cur,.cp-rem,.ln-head,.un-time,.wf-dots + *,.sm-k,.sm-hint,.fx-k{font-size:13px}
  /* 6. nav and menu items 15–16px with 48px rows */
  .sm-row,.sm-toggle,.wnav-link,.lo-seg,.lp-seg{font-size:15px;min-height:48px}
  .sm-title{font-size:16px}
  /* 7. muted ink never below 4.5:1 on the glass */
  body.sky-day :is(.ed-eyebrow,.abp-k,.cn-k,.un-head,.cpt-sub,.cpt-subrow,.cp-cur,.cp-rem,.ln-head,.sm-hint){color:color-mix(in srgb,var(--ink) 78%,transparent)}
  body:not(.sky-day) :is(.ed-eyebrow,.abp-k,.cn-k,.un-head,.cpt-sub,.cpt-subrow,.cp-cur,.cp-rem,.ln-head,.sm-hint){color:color-mix(in srgb,#fff 82%,transparent)}
  /* 8. script/handwriting notes: hidden — they're decoration and too small to read on a phone */
  .ed-script{display:none}
}


/* ═══ RTL parity: every directional glyph and physical offset mirrors with the document ═══ */
html[dir="rtl"] .fx-sw::after{left:auto;right:3px}
html[dir="rtl"] .fx-sw[aria-checked="true"]::after{transform:translateX(-17px)}
html[dir="rtl"] .a11y-list li::before{content:'\2039'}
html[dir="rtl"] .card-lyr :is(.cl-bar-row,.cl-toggles,.cl-back,.cl-copy){direction:rtl}
html[dir="rtl"] .card-lyr .cl-playback{direction:ltr}
html[dir="rtl"] :is(.lp-head,.lo-head,.lo-tools,.un-headrow,.abp-connect,.lf-pills){direction:rtl}
/* the media transport reads left→right in every language (timeline, ⏮ ▶ ⏭), like every player */
.card-player .cp-controls,.card-player .cp-row,.card-player .cp-timeline,.lo-bar,.cl-playback,.k-tools{direction:ltr}
/* arrows drawn as text follow the reading direction */
html[dir="rtl"] .un-viewall .un-arrow,html[dir="rtl"] .ed-arrow{display:inline-block;transform:scaleX(-1)}

/* ═══ Reduced motion — one rulebook for the OS preference and Settings › Reduce motion (html.rm).
   Nothing translates, scales, blurs or loops; state changes still crossfade briefly so the UI
   never pops. Essential progress indicators keep spinning. ═══ */
html.rm *,html.rm *::before,html.rm *::after{
  animation-name:none!important;
  transition-property:opacity,background-color,color,border-color,box-shadow,visibility!important;
  transition-duration:.22s!important;transition-delay:0s!important;
  scroll-behavior:auto!important}
html.rm .k-pending .cp-playbtn::before{animation-name:kspin!important}
html.rm .k-pending .art-play::before{animation-name:ytpend!important}
html.rm ::view-transition-old(root),html.rm ::view-transition-new(root){animation:none!important}
/* intro: everything is already in place — it only fades up */
html.rm body:not(.loaded) :is(#startRail,#sideRail,#listenBar,#scroller,.arrow,#dock,#wayfinder){opacity:0}
html.rm body:not(.loaded) .wbar{opacity:0;transform:translateX(-50%)}
@media (min-width:960px){ html.rm body:not(.loaded) .wbar{transform:none} }
html.rm .bg-img{transition-duration:.45s!important}
html.rm .welc-stage,html.rm .welc-head,html.rm .welc-menu .mi,html.rm .welc-foot{opacity:1;filter:none}
html.rm .mrw>.mr+.mr{display:none}
html.rm :is(.un-viewall,.by-all,.ed-more,.card-cta,.hero-lyr):hover .mrw>.mr{transform:none}
html.rm .gcard{transform:none!important}
html.rm .arrow{--mgx:0px;--mgy:0px}


/* ═══ Event-driven entrances: keyframes ride the one-shot .enter token (navigation.js markEnter);
   a same-content refresh (language, settings, boot's second pass) runs under body.rerender and never replays. ═══ */
body.rerender *,body.rerender *::before,body.rerender *::after{animation:none!important;transition:none!important}
#listenBar:not(.enter) .ln-plat{animation:none}


/* ═══ Settings v2: two groups, switches only ═══ */
#settingsMenu{padding:14px 12px 12px;gap:0;background:rgba(12,15,21,.78);-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%)}
#settingsMenu .fx-head{display:flex;align-items:center;justify-content:space-between;padding:2px 6px 12px}
#settingsMenu .fx-title{font-size:13px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(232,238,245,.9)}
#settingsMenu .sm-group{display:flex;flex-direction:column;gap:2px;padding:6px;border-radius:14px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07)}
#settingsMenu .sm-group+.sm-group{margin-top:10px}
#settingsMenu .sm-sec{padding:6px 8px 6px;font-size:9.5px;letter-spacing:.2em;color:rgba(232,238,245,.55)}
#settingsMenu .fx-row{padding:9px 8px;gap:12px;border-radius:10px;min-height:44px}
#settingsMenu .fx-row label{font-size:13px;letter-spacing:.01em}
#settingsMenu .sm-ic{width:22px;color:rgba(255,255,255,.62)}
#settingsMenu .fx-sw{width:42px;height:24px}
#settingsMenu .fx-sw::after{top:3px;left:3px;width:18px;height:18px}
#settingsMenu .fx-sw[aria-checked="true"]::after{transform:translateX(18px)}
html[dir="rtl"] #settingsMenu .fx-sw::after{left:auto;right:3px}
html[dir="rtl"] #settingsMenu .fx-sw[aria-checked="true"]::after{transform:translateX(-18px)}
body.sky-day #settingsMenu{background:rgba(247,250,253,.9)}
body.sky-day #settingsMenu .fx-title{color:#0d2b47}
body.sky-day #settingsMenu .sm-group{background:rgba(16,48,79,.05);border-color:rgba(24,74,128,.14)}
body.sky-day #settingsMenu .sm-sec{color:rgba(16,48,79,.6)}
/* phones have no side panels: the whole Panels group goes, not just its rows */
@media (max-width:959px){ #settingsMenu .sm-group:has(.sm-sec-panels){display:none} #settingsMenu .sm-group+.sm-group{margin-top:0} }


/* ═══ Goal-driven cues (both retire themselves; both respect reduced motion) ═══
   1. Idle Play ring — before the session's first play, the primary action breathes three times, then rests.
   2. Listen-on nudge — 6 s into real playback the platform links pulse once: that click is the conversion. */
.cp-playbtn{position:relative}
@media (min-width:960px) and (prefers-reduced-motion:no-preference){
  body:not(.has-played) .wcard.active:not(.k-playing):not(.k-pending):not(.lyr-open) .card-player .cp-playbtn::after{
    content:'';position:absolute;inset:-6px;border-radius:50%;pointer-events:none;opacity:0;
    border:1.5px solid color-mix(in srgb,var(--theme) 70%,#fff);
    animation:playCue 2.8s var(--ease-calm) 2s 3}
  @keyframes playCue{0%{opacity:0;transform:scale(.92)}22%{opacity:.8;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.28)}}
}
@media (prefers-reduced-motion:no-preference){
  .ln-plat{animation-delay:calc(var(--i,0) * 50ms)}
  #listenBar.nudge .ln-plat{animation:lnNudge 1.1s var(--ease-calm) both;animation-delay:calc(var(--i,0) * .09s)}
  @keyframes lnNudge{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--theme) 45%,transparent)}30%{box-shadow:0 0 0 7px color-mix(in srgb,var(--theme) 26%,transparent)}100%{box-shadow:0 0 0 0 transparent}}
  #listenBar.nudge .ln-head{animation:lnHead 1.4s var(--ease-calm) both}
  @keyframes lnHead{0%,100%{opacity:.7}40%{opacity:1}}
}

/* ═══ About rail: the bio may overflow for a frame while the type re-fits — it scrolls, but never shows a bar ═══ */
@media (min-width:960px){
  body #aboutSong .abp-scroll,body.abp-open #aboutSong .abp-scroll,body #aboutSong.abp-scrolls .abp-scroll{scrollbar-width:none!important}
  body #aboutSong .abp-scroll::-webkit-scrollbar{display:none!important}
  body #sideRail,body #startRail{scrollbar-width:none}
  body #sideRail::-webkit-scrollbar,body #startRail::-webkit-scrollbar{display:none}
}


/* ═══ Lyrics panel is always on stage (desktop): idle = the song's signature line + a play hint; live = karaoke ═══ */
@media (min-width:960px){
  #hero{display:flex}
  body.hide-lyrpanel #hero,body.grid-open #hero,body.about-open #hero,body:has(.wcard.lyr-open) #hero,body.lyrics-over #hero,body.lyrics-focus #hero{display:none!important}
  #hero .hero-lyrhead{display:flex}
  #hero .hero-lyr{display:inline-flex}
  #hero:not(:has(.hero-quote.hq-live)) .hero-lyrtools,#hero:not(:has(.hero-quote.hq-live)) .hlh-lang{display:none}
  .hq-idle-hint{display:none;margin:2px 0 0;text-align:center;font-family:var(--ui);font-size:11px;letter-spacing:.06em;color:rgba(232,238,245,.55)}
  #hero:has(.hero-quote.hq-idle):not(.k-intro):not(.k-playing) .hq-idle-hint{display:block}
  body.sky-day .hq-idle-hint{color:rgba(16,48,79,.62)}
  .hero-quote.hq-idle .hq-text{font-size:clamp(20px,1.8vw,26px)}
  .hero-quote.hq-idle .hq-tr{display:block}
}


/* ═══ Settings icons: ink follows the row (night = light ink, day = navy) — never a fixed white ═══ */
#settingsMenu .fx-row{color:#e8eef5}
#settingsMenu .fx-row label{color:inherit}
#settingsMenu .sm-ic,#settingsMenu .sm-ic svg{color:inherit;fill:currentColor;opacity:.72}
#settingsMenu .fx-row:hover .sm-ic{opacity:1;color:inherit}
body.sky-day #settingsMenu .fx-row,body.sky-day #settingsMenu .fx-row label{color:#0d2b47}
body.sky-day #settingsMenu .fx-title{color:#0d2b47}

/* ═══ One lyric surface: the panel owns the line. The card never repeats it (signature quote, live pill),
   and the "lyrics coming up" wait message is gone — the idle line simply stays until the first live line. ═══ */
@media (min-width:960px){
  body:not(.hide-lyrpanel) .wcard.active:not(.lyr-open) .card-hero,
  body:not(.hide-lyrpanel) .wcard.active:not(.lyr-open) .np-preview,
  body:not(.hide-lyrpanel) .wcard.active:not(.lyr-open).k-bound .np-preview{display:none!important}
  #hero .hq-wait,#hero.k-intro .hq-wait{display:none!important}
  #hero.k-intro .hero-quote.hq-idle{display:flex!important}
}


/* ═══ Lyrics settings — ONE panel, twice. The small panel (#hero) and the full panel (#lyricsPanel) share
   the same gear-revealed block: three switch rows (Original · Pronunciation · Translation) and "Translate to".
   Both start folded; the gear opens them. Logical properties only, so the rows mirror cleanly in RTL. ═══ */
#hero .hlh-row{justify-content:space-between}
.hl-gear{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;margin-inline-start:auto;padding:0;border:0;border-radius:9px;
  background:none;color:inherit;opacity:.62;cursor:pointer;transition:opacity .2s var(--ease),background .2s var(--ease)}
.hl-gear:hover,.hl-gear:focus-visible{opacity:1;background:rgba(255,255,255,.1);outline:none}
.hl-gear[aria-expanded="true"]{opacity:1;background:rgba(255,255,255,.14)}
body.sky-day .hl-gear:hover,body.sky-day .hl-gear:focus-visible,body.sky-day .hl-gear[aria-expanded="true"]{background:rgba(16,48,79,.1)}
.hl-gear .material-symbols-outlined{font-size:18px}
#hero .hlh-ctrls{display:none;flex-direction:column;align-items:stretch;gap:0;padding:2px 6px 6px}
#hero.hl-settings .hlh-ctrls{display:flex}
#hero .hero-lyrtools{display:grid!important;grid-auto-flow:row;grid-auto-columns:auto;gap:0;padding:0;background:none;border:0}
#lyricsPanel .lp-view{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;padding:2px 13px 0}
/* switch rows (iOS-style): label at the start, switch at the end */
#hero .hlt-seg,#lyricsPanel .lp-seg{display:flex;flex:0 0 auto;align-items:center;justify-content:space-between;gap:12px;width:100%;min-width:0;min-height:30px;margin:0;padding:2px 0;
  border:0;border-radius:0;background:none;box-shadow:none;filter:none;font-family:var(--ui);font-size:12px;font-weight:500;letter-spacing:.01em;text-transform:none;text-align:start;
  color:inherit;opacity:.92;overflow:visible;white-space:nowrap;-webkit-backdrop-filter:none;backdrop-filter:none}
#hero .hlt-seg:hover,#lyricsPanel .lp-seg:hover,#hero .hlt-seg:focus-visible,#lyricsPanel .lp-seg:focus-visible{background:none;color:inherit;opacity:1;outline:none;border:0}
#hero .hlt-seg[aria-pressed="true"],#lyricsPanel .lp-seg[aria-pressed="true"]{background:none;border:0;color:inherit;font-weight:500;filter:none}
#lyricsPanel .lp-seg .lp-seg-t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:start;color:inherit}
#hero .hlt-seg::before,#lyricsPanel .lp-seg::before{display:none}
#hero .hlt-seg::after,#lyricsPanel .lp-seg::after{content:'';position:static;inset:auto;flex:0 0 auto;width:36px;height:20px;border-radius:999px;opacity:1;filter:none;
  background-color:rgba(255,255,255,.22);box-shadow:inset 0 1px 2px rgba(0,0,0,.35);transition:background-color .25s var(--ease),box-shadow .2s var(--ease);
  background-image:radial-gradient(circle at 10px 50%,#fff 0 7px,transparent 7.5px)}
#hero .hlt-seg[aria-pressed="true"]::after,#lyricsPanel .lp-seg[aria-pressed="true"]::after{background-color:var(--theme);background-image:radial-gradient(circle at 26px 50%,#fff 0 7px,transparent 7.5px)}
#hero .hlt-seg:focus-visible::after,#lyricsPanel .lp-seg:focus-visible::after{box-shadow:inset 0 1px 2px rgba(0,0,0,.35),0 0 0 2px color-mix(in srgb,var(--theme) 70%,#fff)}
html[dir="rtl"] :is(#hero .hlt-seg,#lyricsPanel .lp-seg)::after{background-image:radial-gradient(circle at 26px 50%,#fff 0 7px,transparent 7.5px)}
html[dir="rtl"] :is(#hero .hlt-seg,#lyricsPanel .lp-seg)[aria-pressed="true"]::after{background-image:radial-gradient(circle at 10px 50%,#fff 0 7px,transparent 7.5px)}
body.sky-day :is(#hero .hlt-seg,#lyricsPanel .lp-seg)::after{background-color:rgba(16,48,79,.22)}
body.sky-day :is(#hero .hlt-seg,#lyricsPanel .lp-seg)[aria-pressed="true"]::after{background-color:var(--theme)}
body.sky-day :is(#hero .hlt-seg,#lyricsPanel .lp-seg),body.sky-day #lyricsPanel .lp-seg .lp-seg-t{color:#0b2742}
/* "Translate to" row: label at the start, select at the end */
#hero .hlh-lang,#lyricsPanel .lp-langrow{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:30px}
#hero .hlh-lang{padding:0}
#lyricsPanel .lp-langrow{padding:2px 13px 10px}
#hero .hlh-k,#lyricsPanel .lp-langk{flex:1 1 auto;min-width:0;font-size:12px;font-weight:500;letter-spacing:.01em;text-transform:none;text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hero .hlh-lang .hlt-lang,#lyricsPanel .lp-langrow .lp-lang{flex:0 1 auto;width:auto;min-width:0;max-width:60%}
/* full panel: flex header so the gear fits; the gear folds the block (folded by default, like the small panel) */
#lyricsPanel .lp-head{display:flex;align-items:center;gap:6px}
#lyricsPanel .lp-title{flex:1 1 auto;min-width:0}
#lyricsPanel.lp-tools-hidden :is(.lp-view,.lp-langrow){display:none}


/* ═══ "Now playing" reads as a song, not a file: artist · tagline under the subtitle ═══ */
.cpt-meta{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:5px;font-family:var(--ui);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(232,238,245,.72)}
.cpt-artist{font-weight:600;letter-spacing:.3em}
body.sky-day .cpt-meta{color:rgba(16,48,79,.78)}
@media (max-width:959px){ .cpt-meta{display:none} }

/* ═══ Share sits beside the heart; "copied" confirms in the song colour and says so in a small bubble ═══ */
.cpt-share svg{width:23px;height:23px;fill:currentColor}
.cpt-share.copied{color:var(--theme)!important;opacity:1}
.cp-controls .cpt-share{position:relative;width:48px;height:48px;min-width:48px;min-height:48px;justify-content:center}
.cpt-sharepop{position:fixed;left:0;top:0;z-index:2200;width:min(84vw,300px);
  display:grid;gap:10px;padding:12px;border-radius:12px;font-family:var(--ui);
  background:rgba(10,16,26,.95);border:1px solid rgba(255,255,255,.16);box-shadow:0 18px 40px -20px rgba(0,0,0,.75);
  animation:sharePop .18s var(--ease) both}
@keyframes sharePop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.cpt-sharepop .shp-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cpt-sharepop .shp-t{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.cpt-sharepop .shp-x{width:26px;height:26px;display:grid;place-items:center;border:0;border-radius:7px;cursor:pointer;
  background:rgba(255,255,255,.08);color:#fff;font-size:12px;line-height:1}
.cpt-sharepop .shp-x:hover{background:rgba(255,255,255,.16)}
.cpt-sharepop .shp-links{display:flex;flex-wrap:wrap;gap:6px}
.cpt-sharepop .shp-links a{padding:7px 11px;border-radius:999px;font-size:12.5px;text-decoration:none;
  background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.12)}
.cpt-sharepop .shp-links a:hover{background:rgba(255,255,255,.18);color:#fff}
.cpt-sharepop .shp-row{display:flex;align-items:center;gap:8px;padding:5px 5px 5px 10px;border-radius:9px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.cpt-sharepop .shp-row input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#fff;font-family:var(--ui);font-size:12px}
.cpt-sharepop .shp-copy{flex:none;padding:6px 10px;border:0;border-radius:7px;cursor:pointer;
  background:var(--theme,#2563a8);color:#fff;font-family:var(--ui);font-size:12px;font-weight:600}
body.sky-day .cpt-sharepop{background:rgba(255,255,255,.97);border-color:rgba(24,74,128,.22);box-shadow:0 18px 40px -20px rgba(16,40,72,.45)}
body.sky-day .cpt-sharepop .shp-t{color:rgba(13,43,71,.7)}
body.sky-day .cpt-sharepop .shp-x,body.sky-day .cpt-sharepop .shp-links a,body.sky-day .cpt-sharepop .shp-row{background:rgba(16,48,79,.06);border-color:rgba(24,74,128,.18);color:#0b2742}
body.sky-day .cpt-sharepop .shp-links a{color:#0b2742}
body.sky-day .cpt-sharepop .shp-row input{color:#0b2742}
body.sky-day .cpt-sharepop .shp-copy{color:#fff}
.cp-controls .cpt-share.copied::after{content:attr(aria-label);position:absolute;left:50%;bottom:calc(100% + 8px);z-index:6;transform:translateX(-50%);white-space:nowrap;pointer-events:none;
  padding:4px 9px;border-radius:7px;background:rgba(10,16,26,.9);border:1px solid rgba(255,255,255,.16);box-shadow:0 8px 20px -12px rgba(0,0,0,.6);
  font-family:var(--ui);font-size:11px;font-weight:500;letter-spacing:.02em;text-transform:none;color:#fff;animation:shareTip .2s var(--ease) both}
@keyframes shareTip{from{opacity:0;transform:translate(-50%,4px)}to{opacity:1;transform:translate(-50%,0)}}
body.sky-day .cp-controls .cpt-share.copied::after{background:rgba(255,255,255,.96);border-color:rgba(24,74,128,.22);color:#0b2742;box-shadow:0 8px 20px -12px rgba(16,40,72,.45)}
@media (prefers-reduced-motion:reduce){ .cp-controls .cpt-share.copied::after{animation:none} }

/* ═══ Lyrics as a first-class surface: the languages on offer sit in the panel title ═══ */
.hlh-langs{flex:1 1 auto;min-width:0;font-family:var(--ui);font-size:10.5px;letter-spacing:.06em;color:rgba(232,238,245,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.sky-day .hlh-langs{color:rgba(16,48,79,.7)}
#hero .hlh-row{gap:8px}
#hero .hlh-title{flex:0 0 auto}

/* ═══ Alive, not a screensaver: the world drifts imperceptibly (transform only, 60 s, desktop, motion allowed) ═══ */
@media (min-width:960px) and (prefers-reduced-motion:no-preference){
  .bg-img.on{animation:worldDrift 60s ease-in-out infinite alternate}
  @keyframes worldDrift{from{transform:scale(1.06) scaleX(var(--fx)) translate3d(0,0,0)}to{transform:scale(1.09) scaleX(var(--fx)) translate3d(-.6%,.4%,0)}}
}

/* ═══ Contrast pass (+15–25 % on secondary text, night and day) ═══ */
.cpt-sub{opacity:1;color:rgba(232,238,245,.9)}
.un-s,.un-dur{color:rgba(232,238,245,.86)}
.hq-tr{color:rgba(232,238,245,.9)}
.hq-ph{color:rgba(244,239,231,.72)}
.lp-tr,.lo-tr,.card-lyric-tr{color:rgba(232,238,245,.86)}
.cp-timeline .cp-rem{color:rgba(232,238,245,.82)}
.hlh-title,.lp-title{color:rgba(232,238,245,.82)}
.hlh-k,.lp-langk{color:rgba(232,238,245,.72)}
#settingsMenu .sm-sec{color:rgba(232,238,245,.68)}
body.sky-day .cpt-sub{color:#10304f}
body.sky-day :is(.un-s,.un-dur,.hq-tr,.lp-tr,.lo-tr,.card-lyric-tr){color:rgba(13,43,71,.9)}
body.sky-day .hq-ph{color:rgba(13,43,71,.72)}
body.sky-day :is(.hlh-title,.lp-title,.hlh-k,.lp-langk){color:rgba(13,43,71,.82)}
body.sky-day .cp-timeline .cp-rem{color:rgba(13,43,71,.82)}
body.sky-day #aboutSong .bio,body.sky-day .bio{color:#0f3352}


/* ═══ Short desktops (≤ 760 px tall): the same composition, denser — decoration yields first ═══ */
@media (min-width:960px) and (max-height:760px){
  .ed-script,body #aboutSong .ed-script-l,body .ed-script-r{display:none!important}
  .cpt-meta,.hlh-langs,.hq-idle-hint{display:none!important}
  #startRail,#sideRail{gap:8px}
  body:not(.lyrics-focus) #startRail{top:calc(var(--barH,64px) + 22px)}
  /* small lyrics panel */
  #hero{padding:8px 10px 8px}
  #hero .hero-lyrhead{margin-bottom:2px}
  #hero .hlh-row{padding:0 4px 4px}
  .hero-quote{min-height:0;padding:2px}
  .hero-quote .hq-text,.hero-quote.hq-live .hq-text,.hero-quote.hq-idle .hq-text{font-size:clamp(17px,1.45vw,21px);line-height:1.25}
  .hq-tr{margin-top:4px;font-size:12.5px;line-height:1.35}
  .hq-ph{margin-top:2px;font-size:12px}
  #hero .hero-lyr{margin-top:6px;min-height:22px;padding:3px 9px}
  /* up next */
  #upnext,body #upnext{padding:10px 12px 10px}
  body .un-headrow{padding:0 0 5px;margin:0 0 4px}
  body #upnext .un-b{display:none}
  body #upnext .un-item{padding:6px}
  body #upnext .un-covw{width:44px;height:44px}
  body #upnext .un-t{font-size:15px}
  body #upnext .un-dur{padding-top:12px}
  /* about rail */
  #aboutSong,body #aboutSong{padding:10px 12px 10px}
  body #aboutSong .bio{font-size:13.5px;line-height:1.45}
  body #aboutSong .bio p{margin:0 0 6px}
  body #aboutSong .ed-title{margin:0 0 6px;padding:0 0 5px}
  body #aboutSong .ed-more{margin:4px 0 0}
  /* player card + listen bar */
  .wcard.active:not(.lyr-open) .card-player{gap:8px}
  #listenBar{margin-top:6px;padding:8px 10px 9px}
}
@media (min-width:960px) and (max-height:640px){
  .hero-quote .hq-text,.hero-quote.hq-live .hq-text,.hero-quote.hq-idle .hq-text{font-size:17px}
  .hq-ph{display:none!important}
  body #upnext .un-s{display:none}
}


/* mini-panel gear works in the idle state too (earlier rules hide the tools until a song is live) */
#hero.hl-settings .hlh-ctrls,#hero.hl-settings .hlh-lang{display:flex!important}
#hero.hl-settings .hero-lyrtools{display:grid!important}

/* ═══ Player transport on narrow cards: the ±10 s pair yields so play · prev · next · lyrics · like · share fit ═══ */
@media (min-width:960px) and (max-height:820px){
  .wcard.active:not(.lyr-open) .card-player :is(.cp-b10,.cp-f10){display:none!important}
  .wcard.active:not(.lyr-open) .card-player .cp-controls{gap:22px;padding:4px 0 2px}
  .wcard.active:not(.lyr-open) .card-player .cpc-c{gap:clamp(18px,calc(var(--cardw)*.08),32px)}
  .wcard.active:not(.lyr-open) .card-player .cpc-r{gap:14px;margin-inline-start:6px}
  .wcard.active:not(.lyr-open) .card-player .cpc-r .k-tool{width:48px;height:48px;min-width:48px;min-height:48px}
  .wcard.active:not(.lyr-open) .card-player .cpc-r .k-tool svg{width:23px;height:23px}
  .cp-controls .cpt-like,.cp-controls .cpt-share{width:48px;height:48px;min-width:48px;min-height:48px}
}
@media (min-width:960px) and (max-height:700px){
  .wcard.active:not(.lyr-open) .card-player .cpc-r .k-tool{width:44px;height:44px;min-width:44px;min-height:44px}
  .cp-controls .cpt-like,.cp-controls .cpt-share{width:44px;height:44px;min-width:44px;min-height:44px}
  .cp-controls .cpt-like svg{width:22px;height:22px}
}

/* ═══ Transport row on narrow desktop cards: the side columns can no longer collapse under their content
   (the volume slider used to slide under Previous). Left column = speaker + a 46px track minimum, right
   column = its buttons; the transport gap breathes with the cover. When even that outgrows the card the
   whole row zooms down as one piece (fitControls in cards.js), so spacing stays proportional. ═══ */
@media (min-width:960px){
  .cp-controls{grid-template-columns:minmax(76px,1fr) auto minmax(max-content,1fr);column-gap:16px}
  .cp-controls .k-volume{min-width:46px}
  body .wcard.active:not(.lyr-open) .card-player .cpc-c{gap:clamp(14px,calc(var(--cardw)*.12 - 22px),46px)}
}