:root{
    --bg:#0B1A14; --bg-2:#10241B; --panel:#142B21; --line:#234136; --line-2:#325A4B;
    --ink:#F4ECDD; --ink-2:#CBDCD3; --mute:#8CA69A; --amber:#E9B84E; --amber-2:#FFD67E; --on-amber:#0B1A14;
    --live:#E8503A; --glow:rgba(233,184,78,.2);
    --bg-rgb:11,26,20; --bg-img-opacity:.95; --dial-veil-1:rgba(11,26,20,.3); --dial-veil-2:rgba(11,26,20,.15); --dial-veil-3:rgba(11,26,20,.55);
    --row-hover:rgba(16,36,27,.8); --panel-glass:rgba(20,43,33,.86); --player-glass:rgba(11,26,20,.92); --shadow:rgba(0,0,0,.45);
    --sans:"Manrope",system-ui,sans-serif; --cond:"Barlow Condensed",Impact,sans-serif;
  }
  html[data-theme="light"]{
    --bg:#EEF4F0; --bg-2:#FFFFFF; --panel:#FFFFFF; --line:#D2E0D8; --line-2:#AFC5B9;
    --ink:#0E1F18; --ink-2:#2C4A3D; --mute:#5F7A6D; --amber:#B7800F; --amber-2:#8E6208; --on-amber:#FFFFFF;
    --live:#C8382A; --glow:rgba(183,128,15,.16);
    --bg-rgb:238,244,240; --bg-img-opacity:.35; --dial-veil-1:rgba(238,244,240,.86); --dial-veil-2:rgba(238,244,240,.8); --dial-veil-3:rgba(238,244,240,.92);
    --row-hover:rgba(255,255,255,.85); --panel-glass:rgba(255,255,255,.88); --player-glass:rgba(238,244,240,.92); --shadow:rgba(10,35,25,.18);
  }
  *{box-sizing:border-box}
  html{background:var(--bg)}
  html,body{margin:0;color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5}
  body::before{content:"";position:fixed;inset:0;z-index:-1;background:url(/assets/bg-72354053.webp) right -14vw center/cover no-repeat;opacity:var(--bg-img-opacity)}
  body::after{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(var(--bg-rgb),0) 0%,rgba(var(--bg-rgb),.3) 45%,rgba(var(--bg-rgb),.7) 100%),linear-gradient(90deg,rgba(var(--bg-rgb),.72) 0%,rgba(var(--bg-rgb),.62) 58%,rgba(var(--bg-rgb),.1) 100%)}
  button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
  button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
  a{color:var(--amber-2)}
  ::selection{background:var(--amber);color:var(--on-amber)}

  /* ---------- custom cursor (GenTake style) ---------- */
  @media (pointer:fine){ body,body *{cursor:none!important} }
  #cur-ring,#cur-dot{position:fixed;left:0;top:0;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);opacity:0;transition:opacity .2s}
  #cur-ring{width:32px;height:32px;border:1px solid var(--amber);opacity:0;border-radius:50%;transition:width .18s,height .18s,opacity .2s,background .18s}
  #cur-ring.hov{width:46px;height:46px;background:var(--glow)}
  #cur-ring.down{width:26px;height:26px}
  #cur-dot{width:6px;height:6px;background:var(--amber);border-radius:50%}
  @media (pointer:coarse),(prefers-reduced-motion:reduce){ #cur-ring,#cur-dot{display:none} body,body *{cursor:auto!important} }

  /* ---------- preloader ---------- */
  #preloader{position:fixed;inset:0;z-index:1000;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .6s ease}
  #preloader.done{opacity:0;pointer-events:none}
  .pl-wheel{width:76px;height:76px;filter:drop-shadow(0 0 18px var(--glow))}
  .pl-wheel .rot{transform-origin:16px 16px;animation:plspin 1.1s cubic-bezier(.45,.05,.55,.95) infinite}
  @keyframes plspin{to{transform:rotate(360deg)}}
  .pl-name{font-family:var(--cond);font-weight:700;font-size:26px;letter-spacing:.02em;color:var(--ink);opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s}
  .pl-name.show{opacity:1;transform:none}
  .pl-track{width:200px;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
  #pl-bar{width:0;height:100%;background:var(--amber);transition:width .15s ease}
  #pl-count{font-size:12px;color:var(--mute);letter-spacing:2px;font-variant-numeric:tabular-nums}
  .pl-credit{position:absolute;bottom:28px;font-size:11px;letter-spacing:.06em;color:var(--mute)}
  @media (prefers-reduced-motion:reduce){.pl-wheel .rot{animation:none}#preloader{transition:none}}

  /* ---------- header ---------- */
  .top{display:flex;align-items:center;gap:14px;padding:18px 24px 6px;max-width:1240px;margin:0 auto}
  .brand{display:flex;flex-direction:column;gap:3px}
  .credit{font-size:10.5px;letter-spacing:.06em;color:var(--mute);text-decoration:none;line-height:1;padding-left:36px;transition:color .15s}
  .credit:hover{color:var(--amber-2)}
  .mark{font-family:var(--cond);font-weight:700;font-size:30px;letter-spacing:.02em;line-height:1;display:flex;align-items:baseline;gap:8px}
  .mark svg{width:28px;height:28px;align-self:center;flex:none}
  .mark small{font-family:var(--sans);font-weight:500;font-size:12px;color:var(--mute);letter-spacing:0}
  .search{margin-left:auto;position:relative;width:min(300px,40vw)}
  .search input{width:100%;background:var(--bg-2);border:1px solid var(--line);color:var(--ink);border-radius:6px;padding:9px 34px 9px 12px;font:inherit}
  .search input::placeholder{color:var(--mute)}
  .search button{position:absolute;right:6px;top:50%;transform:translateY(-50%);color:var(--mute);width:26px;height:26px;display:none}
  .search.has button{display:block}
  .ctl{display:flex;align-items:center;gap:8px}
  .sel{position:relative}
  .sel select{appearance:none;background:var(--bg-2);border:1px solid var(--line);color:var(--ink);border-radius:6px;padding:8px 30px 8px 12px;font:inherit;font-weight:500;cursor:pointer}
  .sel::after{content:"";position:absolute;right:12px;top:50%;width:7px;height:7px;border-right:1.5px solid var(--mute);border-bottom:1.5px solid var(--mute);transform:translateY(-70%) rotate(45deg);pointer-events:none}
  .fl{display:inline-block;width:22px;height:15px;border-radius:2px;overflow:hidden;vertical-align:-2px;box-shadow:0 0 0 1px rgba(0,0,0,.18) inset;flex:none}
  .fl svg{width:100%;height:100%;display:block}
  .cf{width:20px;height:14px;border-radius:2px;vertical-align:-2px;box-shadow:0 0 0 1px rgba(0,0,0,.18) inset;object-fit:cover;margin-right:2px}
  .langbox{position:relative}
  .langbtn{display:flex;align-items:center;gap:9px;background:var(--bg-2);border:1px solid var(--line);color:var(--ink);border-radius:6px;padding:8px 30px 8px 10px;font-weight:500;position:relative;height:40px}
  .langbtn::after{content:"";position:absolute;right:12px;top:50%;width:7px;height:7px;border-right:1.5px solid var(--mute);border-bottom:1.5px solid var(--mute);transform:translateY(-70%) rotate(45deg)}
  .langbtn:hover{border-color:var(--line-2)}
  .langmenu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:170px;display:grid;grid-template-columns:1fr 1fr;gap:2px;margin:0;padding:6px;list-style:none;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 34px var(--shadow)}
  .langmenu[hidden]{display:none}
  @media (max-width:520px){.langmenu{grid-template-columns:1fr}}
  .langmenu li{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:5px;cursor:pointer;font-weight:500}
  .langmenu li:hover,.langmenu li:focus-visible{background:var(--bg-2);outline:none}
  .langmenu li[aria-selected="true"]{color:var(--amber-2)}
  .langmenu li[aria-selected="true"]::after{content:"✓";margin-left:auto;font-size:13px}
  .sel.cty select{padding-left:40px}
  .sel.cty .cf{position:absolute;left:12px;top:50%;transform:translateY(-50%);pointer-events:none}
  .theme{width:40px;height:40px;border-radius:6px;border:1px solid var(--line);background:var(--bg-2);display:grid;place-items:center;color:var(--ink-2)}
  .theme:hover{color:var(--ink);border-color:var(--line-2)}
  .theme svg{width:18px;height:18px}
  .theme .sun{display:none}
  html[data-theme="light"] .theme .sun{display:block}
  html[data-theme="light"] .theme .moon{display:none}

  /* ---------- the dial ---------- */
  .dial{position:relative;margin:10px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    background:linear-gradient(180deg,var(--dial-veil-1),var(--dial-veil-2) 55%,var(--dial-veil-3)),url(/assets/dial-2869fc92.webp) center 50%/cover no-repeat}
  .dial-scroll{overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth}
  .dial-scroll::-webkit-scrollbar{display:none}
  .track{position:relative;display:flex;gap:0;padding:14px 0 20px;min-width:max-content;
    background:
      repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px 14px) 0 100%/100% 8px no-repeat,
      repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px 70px) 0 100%/100% 16px no-repeat}
  .track::before,.track::after{content:"";display:block;width:24px;flex:none}
  .g{position:relative;flex:none;padding:6px 18px 10px;font-family:var(--cond);font-weight:600;font-size:22px;letter-spacing:.01em;color:var(--ink-2);white-space:nowrap;transition:color .2s;text-shadow:0 1px 6px rgba(var(--bg-rgb),.9)}
  .g:hover{color:var(--ink)}
  .g[aria-pressed="true"]{color:var(--amber-2)}
  .needle{position:absolute;top:0;bottom:0;width:2px;background:var(--amber);box-shadow:0 0 14px 2px var(--glow),0 0 2px var(--amber);transform:translateX(-1px);transition:left .35s cubic-bezier(.2,.8,.2,1);pointer-events:none}
  .needle::after{content:"";position:absolute;left:50%;bottom:-1px;width:10px;height:10px;background:var(--amber);transform:translateX(-50%) rotate(45deg)}
  .dial::before,.dial::after{content:"";position:absolute;top:0;bottom:0;width:48px;pointer-events:none;z-index:2}
  .dial::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
  .dial::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
  @media (prefers-reduced-motion:reduce){.needle{transition:none}.dial-scroll{scroll-behavior:auto}}

  /* ---------- filters ---------- */
  .bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;max-width:1240px;margin:0 auto;padding:14px 24px 4px}
  .tab{padding:8px 12px;border-radius:6px;color:var(--mute);font-weight:500;border:1px solid transparent}
  .tab:hover{color:var(--ink)}
  .tab[aria-pressed="true"]{color:var(--ink);background:var(--bg-2);border-color:var(--line)}
  .count{margin-left:auto;color:var(--mute);font-size:13px}
  .rnd{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:6px;border:1px solid var(--amber);color:var(--amber-2);font-weight:600;transition:background .15s,transform .12s}
  .rnd:hover{background:var(--glow)}
  .rnd:active{transform:scale(.97)}
  .rnd svg{width:16px;height:16px}
  .rnd.busy svg{animation:spin .8s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion:reduce){.rnd.busy svg{animation:none}}
  .st.spin{background:var(--row-hover);box-shadow:inset 3px 0 0 var(--amber-2)}
  .st.win{animation:win .9s ease-out}
  @keyframes win{0%{background:var(--glow);box-shadow:inset 3px 0 0 var(--amber),0 0 0 2px var(--amber)}100%{background:var(--row-hover);box-shadow:inset 3px 0 0 var(--amber)}}
  .needle.spinning{animation:wobble .12s ease-in-out infinite alternate}
  @keyframes wobble{from{transform:translateX(-4px)}to{transform:translateX(2px)}}
  .pn.spinning .name{color:var(--amber-2)}
  @media (prefers-reduced-motion:reduce){.needle.spinning,.st.win{animation:none}}

  /* ---------- main ---------- */
  .main{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:32px;max-width:1240px;margin:0 auto;padding:10px 24px 140px}
  .main>section{min-width:0}
  .ph{font-family:var(--cond);font-weight:600;font-size:24px;letter-spacing:.01em;margin:6px 0 10px 8px;color:var(--ink-2)}
  .list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
  .st{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:14px;padding:11px 8px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .15s}
  .st>div{min-width:0}
  .st:hover,.st.on{background:var(--row-hover)}
  .st.on{box-shadow:inset 3px 0 0 var(--amber)}
  .logo{width:42px;height:42px;border-radius:5px;background:var(--panel);overflow:hidden;display:grid;place-items:center;font-family:var(--cond);font-size:18px;color:var(--mute);flex:none}
  .logo img{width:100%;height:100%;object-fit:cover;display:block}
  .name{font-family:var(--cond);font-weight:600;font-size:21px;line-height:1.1;letter-spacing:.005em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .meta{font-size:12.5px;color:var(--mute);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .meta b{font-weight:500;color:var(--ink-2)}
  .fav{width:36px;height:36px;border-radius:50%;color:var(--mute);display:grid;place-items:center}
  .fav:hover{color:var(--ink);background:var(--panel)}
  .fav svg{width:19px;height:19px;fill:transparent;transition:transform .15s}
  .fav.on{color:var(--live)}
  .fav.on svg{fill:currentColor}
  .fav:active svg{transform:scale(.85)}
  .fav.on svg{animation:pop .3s ease}
  @keyframes pop{0%{transform:scale(.7)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
  @media (prefers-reduced-motion:reduce){.fav.on svg{animation:none}}
  .status{padding:34px 8px;color:var(--mute);max-width:52ch}
  .status b{color:var(--ink);font-weight:600}
  .status button{color:var(--amber-2);text-decoration:underline}

  /* ---------- now playing panel ---------- */
  .side{position:sticky;top:20px;align-self:start}
  @media (max-height:860px){.side{position:static}}
  .now{background:var(--panel-glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:10px;padding:22px;min-height:300px}
  .now .big{width:96px;height:96px;border-radius:8px;background:var(--bg-2);overflow:hidden;display:grid;place-items:center;font-family:var(--cond);font-size:40px;color:var(--mute);margin-bottom:16px}
  .now .big img{width:100%;height:100%;object-fit:cover}
  .now .live{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--mute);margin-bottom:6px}
  .now .live i{width:7px;height:7px;border-radius:50%;background:var(--line-2)}
  .now.playing .live i{background:var(--live);box-shadow:0 0 8px var(--live)}
  .now .title{font-family:var(--cond);font-weight:700;font-size:30px;line-height:1.05;margin:0 0 6px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .now .sub{color:var(--mute);font-size:13px;line-height:1.5}
  .now .tags{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px}
  .now .tags span{font-size:12px;color:var(--ink-2);border:1px solid var(--line);border-radius:999px;padding:2px 9px}
  .now .tags span.t{cursor:pointer}
  .now .tags span.t:hover{border-color:var(--amber)}
  .now .link{margin-top:14px;font-size:13px}
  .empty{color:var(--mute);font-size:14px;line-height:1.6}
  .empty img{width:100%;height:150px;object-fit:cover;object-position:center 40%;display:block;border-radius:8px;margin:0 0 14px;box-shadow:0 8px 30px var(--shadow)}
  .empty b{color:var(--ink);font-family:var(--cond);font-size:22px;font-weight:600;display:block;margin-bottom:4px}
  .empty em{font-style:normal;color:var(--amber-2);font-weight:600}
  .empty .cnt{display:block;margin-top:12px;font-family:var(--cond);font-size:20px;font-weight:600;color:var(--amber-2)}

  /* ---------- promo carousel ---------- */
  .promo{position:relative;margin-top:16px;background:var(--panel-glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:10px;overflow:hidden}
  .promo .lbl{position:absolute;top:10px;left:12px;z-index:2;font-size:10.5px;letter-spacing:.06em;color:var(--ink);background:rgba(0,0,0,.45);backdrop-filter:blur(4px);border-radius:999px;padding:3px 9px}
  .promo .slides{position:relative;height:302px}
  .promo .slide{position:absolute;inset:0;opacity:0;transition:opacity .7s ease;pointer-events:none;display:flex;flex-direction:column}
  .promo .slide.on{opacity:1;pointer-events:auto}
  .promo .slide img{width:100%;height:150px;object-fit:cover;display:block}
  .promo .strip{height:150px;overflow:hidden;background:#0a0718;display:flex;justify-content:center}
  .promo .strip.pan{display:block}
  .promo .strip-in{display:flex;gap:3px;height:100%;width:max-content;margin:0 auto}
  .promo .strip-in img{width:auto;height:150px}
  .promo .slide.on .strip.pan .strip-in{animation:strippan var(--dur) ease-in-out forwards}
  @keyframes strippan{0%,12%{transform:translateX(0)}88%,100%{transform:translateX(calc(-100% + 330px))}}
  @media (prefers-reduced-motion:reduce){.promo .slide.on .strip-in{animation:none}}
  .promo .body{padding:12px 16px 16px;display:flex;flex-direction:column;gap:4px;flex:1}
  .promo h3{font-family:var(--cond);font-weight:700;font-size:22px;line-height:1.05;margin:0}
  .promo p{margin:0;font-size:13px;color:var(--mute);line-height:1.45}
  .promo .btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:8px}
  .promo .btn{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:6px;background:var(--amber);color:var(--on-amber);font-weight:600;font-size:13px;text-decoration:none;transition:filter .15s}
  .promo .btn:hover{filter:brightness(1.08)}
  .promo .btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2)}
  .promo .btn svg{width:14px;height:14px}
  .promo .soon{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;border:1px solid var(--amber);color:var(--amber-2);font-weight:600;font-size:12px;letter-spacing:.03em}
  .promo .soon i{width:6px;height:6px;border-radius:50%;background:var(--amber);animation:blink 1.4s ease-in-out infinite}
  @keyframes blink{50%{opacity:.25}}
  .promo .dots{position:absolute;top:12px;right:12px;z-index:2;display:flex;gap:5px}
  .promo .dots button{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4);transition:background .2s,transform .2s}
  .promo .dots button[aria-current="true"]{background:var(--amber);transform:scale(1.25)}
  .promo .pbar{position:absolute;left:0;bottom:0;height:1px;background:var(--amber);opacity:.6;width:0;z-index:3}
  .promo.run .pbar{animation:promobar var(--dur) linear forwards}
  @keyframes promobar{to{width:100%}}
  @media (prefers-reduced-motion:reduce){.promo .soon i{animation:none}}
  @media (max-width:900px){.promo{margin-top:8px}}

  /* ---------- player bar ---------- */
  .player{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--player-glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:10px 24px calc(10px + env(safe-area-inset-bottom))}
  .player .in{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px}
  .play{width:52px;height:52px;border-radius:50%;background:var(--amber);color:var(--on-amber);display:grid;place-items:center;transition:transform .12s,background .15s}
  .play:hover{filter:brightness(1.08)}
  .play:active{transform:scale(.95)}
  .play svg{width:22px;height:22px}
  .play[disabled]{background:var(--line-2);color:var(--mute);cursor:default;filter:none}
  .pn{min-width:0}
  .pn .name{font-size:19px}
  .pn .meta{font-size:12px}
  .pn .meta.err{color:var(--live)}
  .pn .meta.song{color:var(--amber-2);font-weight:600;font-size:13px}
  .now .np{margin-top:8px;color:var(--amber-2);font-weight:600;font-size:14px;line-height:1.35}
  .now .np:empty{display:none}
  .now{padding-bottom:26px}
  .spin-fab{position:absolute;right:16px;bottom:16px;width:48px;height:48px;border-radius:50%;background:var(--amber);color:var(--on-amber);display:grid;place-items:center;box-shadow:0 6px 18px var(--shadow);transition:transform .15s,filter .15s}
  .spin-fab:hover{filter:brightness(1.08);transform:scale(1.06)}
  .spin-fab:active{transform:scale(.94)}
  .spin-fab svg{width:22px;height:22px}
  .spin-fab.busy svg{animation:spin .8s linear infinite}
  .vol{display:flex;align-items:center;gap:8px;color:var(--mute)}
  .mute{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);transition:background .15s,color .15s}
  .mute:hover{background:var(--panel);color:var(--ink)}
  .mute svg{width:20px;height:20px}
  .mute .lo,.mute .hi,.mute .off{display:none}
  .mute[data-level="off"] .off,.mute[data-level="lo"] .lo,.mute[data-level="hi"] .hi{display:block}
  .mute[data-level="off"]{color:var(--mute)}
  .vol input{--v:80%;-webkit-appearance:none;appearance:none;width:120px;height:22px;margin:0;background:transparent;cursor:pointer}
  .vol input::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--amber) var(--v),var(--line-2) var(--v))}
  .vol input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border-radius:50%;background:var(--amber);border:2px solid var(--bg);box-shadow:0 0 0 1px var(--amber);transition:transform .12s}
  .vol input:hover::-webkit-slider-thumb,.vol input:active::-webkit-slider-thumb{transform:scale(1.25)}
  .vol input::-moz-range-track{height:4px;border-radius:2px;background:var(--line-2)}
  .vol input::-moz-range-progress{height:4px;border-radius:2px;background:var(--amber)}
  .vol input::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--amber);border:2px solid var(--bg);box-shadow:0 0 0 1px var(--amber)}
  .vol input:focus-visible{outline:none}
  .vol input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--glow),0 0 0 1px var(--amber)}
  .muted .vol input::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--mute) var(--v),var(--line-2) var(--v))}
  .muted .vol input::-webkit-slider-thumb{background:var(--mute);box-shadow:0 0 0 1px var(--mute)}
  .muted .vol input::-moz-range-progress,.muted .vol input::-moz-range-thumb{background:var(--mute)}
  .muted .bars i{background:var(--mute);animation:none;height:4px}
  .bars{display:inline-flex;align-items:flex-end;gap:2px;height:14px;margin-right:4px;vertical-align:middle}
  .bars i{width:3px;background:var(--amber);height:4px;border-radius:1px}
  .playing .bars i{animation:eq 1s ease-in-out infinite}
  .playing .bars i:nth-child(2){animation-delay:.2s}.playing .bars i:nth-child(3){animation-delay:.4s}
  @keyframes eq{0%,100%{height:4px}50%{height:14px}}
  @media (prefers-reduced-motion:reduce){.playing .bars i{animation:none;height:9px}}

  footer{max-width:1240px;margin:0 auto;padding:24px 24px 150px;color:var(--mute);font-size:12.5px;line-height:1.7;border-top:1px solid var(--line)}
  footer a{color:var(--ink-2)}
  footer .madeby{display:block;margin-top:8px}
  footer .visits{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-family:var(--cond);font-size:16px;color:var(--ink-2);letter-spacing:.02em}
  footer .visits i{width:6px;height:6px;border-radius:50%;background:var(--amber)}
  footer .visits:empty{display:none}

  @media (max-width:900px){
    body::before{background:url(/assets/bg-mobile-72354053.webp) right 20%/auto 110% no-repeat}
    .top{padding:14px 16px 4px;gap:8px;flex-wrap:wrap}
    .mark{font-size:26px}.mark small{display:none}
    .credit{font-size:10px;padding-left:34px}
    .search{width:100%;order:10;margin-left:0}
    .ctl{margin-left:auto}
    #langName{display:none}
    .langbtn{padding-right:26px}
    .bar,.main{padding-left:16px;padding-right:16px}
    .main{grid-template-columns:1fr;padding-bottom:110px}
    .now{display:none}
    .side{position:static}
    .g{font-size:20px;padding:6px 14px 10px}
    .vol input{width:80px}
    .player{padding-left:14px;padding-right:14px}
  }