/* Countdown -- Manna / Present family look: warm monochrome shell, Inter + Mulish, white cards with a soft lift. */
:root { --bg:#fcfcfb; --card:#fff; --card-hover:#f7f6f3; --line:rgba(20,20,22,.09); --edge:rgba(20,20,22,.17); --text:#15151a; --dim:#63625f; --faint:#8b8983; --accent:#15151a;
  --up:#1a7a3c; --down:#c22e2e; --new:#b8860b; --hot:#e0342b;
  --shadow:0 1px 2px rgba(20,20,22,.045), 0 7px 20px -8px rgba(20,20,22,.14); --ease:cubic-bezier(.4,0,.2,1);
  --body:"Mulish",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --inter:"InterVariable","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
:root[data-theme="dark"] { --bg:#0c0c10; --card:#17171d; --card-hover:#1d1d25; --line:rgba(255,255,255,.09); --edge:rgba(255,255,255,.2); --text:#f3f3f6; --dim:#a4a6b3; --faint:#7b7e8d; --accent:#f3f3f6;
  --up:#4cc273; --down:#ff7a6b; --new:#e0a92e; --hot:#ff5a4f; --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -8px rgba(0,0,0,.65); }
* { box-sizing:border-box; margin:0; padding:0; } html { -webkit-text-size-adjust:100%; }
body { min-height:100vh; background:var(--bg); color:var(--text); font-family:var(--body); -webkit-font-smoothing:antialiased; padding-bottom:calc(30px + env(safe-area-inset-bottom)); }
button, input { font:inherit; color:inherit; } a { color:inherit; }
.top { max-width:1100px; margin:0 auto; padding:calc(14px + env(safe-area-inset-top)) 16px 4px; }
.brand { display:flex; align-items:center; gap:12px; }
.logo { width:clamp(46px,8vw,60px); height:clamp(46px,8vw,60px); filter:drop-shadow(0 3px 8px rgba(255,170,40,.3)); }
h1 { font:1000 clamp(34px,7.5vw,56px)/1 var(--inter); letter-spacing:-.03em; } .tag { font:600 12px/1.2 var(--inter); letter-spacing:.08em; text-transform:uppercase; color:var(--hot); margin-top:4px; }
.tbtn { margin-left:auto; width:42px; height:42px; border-radius:50%; border:1px solid var(--edge); background:var(--card); box-shadow:var(--shadow); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.tbtn img { width:22px; height:22px; }
.swrap { position:relative; margin:14px 0 10px; } .swrap > svg { position:absolute; left:14px; top:13px; width:20px; height:20px; fill:none; stroke:var(--faint); stroke-width:2.2; stroke-linecap:round; pointer-events:none; }
#q, #cq { width:100%; font:500 16px/1 var(--body); background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:14px; padding:13px 44px 13px 42px; }
#q::-webkit-search-cancel-button, #cq::-webkit-search-cancel-button { -webkit-appearance:none; display:none; }
#q::-webkit-search-cancel-button { -webkit-appearance:none; display:none; }
.qx { position:absolute; right:9px; top:50%; transform:translateY(-50%); width:26px; height:26px; border:0; border-radius:50%; cursor:pointer; background:color-mix(in srgb,var(--text) 10%, transparent); color:var(--dim); font-size:19px; line-height:1; } .qx[hidden] { display:none; }
.chips { display:flex; gap:7px; overflow-x:auto; padding:3px 4px 9px; scrollbar-width:none; } .chips::-webkit-scrollbar { display:none; }
.chip { flex:none; cursor:pointer; font:700 12.5px/1 var(--body); background:var(--card); border:1px solid var(--edge); border-radius:999px; padding:9px 14px; display:inline-flex; align-items:center; gap:7px; }
.chip small { font-weight:700; opacity:.6; }
.chips.sub .chip { font-weight:600; padding:7px 12px; border-color:var(--line); }
.chip[aria-pressed="true"] { background:var(--accent); color:var(--bg); border-color:var(--accent); box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.main { max-width:1100px; margin:0 auto; padding:6px 16px 20px; }
.ones { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin:4px 0 18px; }
.one { position:relative; overflow:hidden; text-align:left; cursor:default; background:var(--accent); color:var(--bg); border-radius:18px; padding:18px 18px 16px; box-shadow:var(--shadow); }
.one::after { content:"1"; position:absolute; right:10px; top:-34px; font:1000 190px/1 var(--inter); opacity:.09; pointer-events:none; }
.one .lbl { font:700 11px/1 var(--inter); letter-spacing:.12em; text-transform:uppercase; opacity:.7; }
.one .t { font:900 clamp(24px,5vw,30px)/1.05 var(--inter); letter-spacing:-.02em; margin:10px 0 3px; } .one .a { font:600 15px/1.25 var(--body); opacity:.85; } .one .s { font:600 12.5px/1.3 var(--body); opacity:.65; margin-top:8px; }
.one .btns { margin-top:14px; }
.list { background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); overflow:hidden; }
.row { display:grid; grid-template-columns:54px 1fr auto; gap:12px; align-items:center; padding:12px 14px; border-top:1px solid var(--line); } .row:first-child { border-top:0; }
@media (hover:hover) { .row:hover { background:var(--card-hover); } }
.rk { text-align:center; } .rk b { display:block; font:900 26px/1 var(--inter); letter-spacing:-.03em; }
.mv { font:800 10.5px/1 var(--inter); margin-top:5px; letter-spacing:.02em; } .mv.up { color:var(--up); } .mv.down { color:var(--down); } .mv.same { color:var(--faint); } .mv.new { color:var(--new); }
.sg { min-width:0; } .ti { font:800 16px/1.2 var(--inter); letter-spacing:-.01em; overflow-wrap:anywhere; } .ar { font:500 14px/1.3 var(--body); color:var(--dim); margin-top:2px; overflow-wrap:anywhere; }
.st { font:600 12px/1.3 var(--body); color:var(--faint); margin-top:4px; } .st b { color:var(--text); font-weight:700; }
.acts { display:flex; gap:6px; align-items:center; }
.btn { display:inline-flex; align-items:center; gap:6px; text-decoration:none; cursor:pointer; font:700 13px/1 var(--body); padding:9px 13px; border-radius:999px; border:1px solid var(--edge); background:var(--card); color:var(--text); white-space:nowrap; }
.btn.go { background:var(--hot); border-color:var(--hot); color:#fff; } .btn svg { width:12px; height:12px; fill:currentColor; }
.one .btn { background:transparent; color:var(--bg); border-color:color-mix(in srgb,var(--bg) 45%, transparent); } .one .btn.go { background:var(--hot); border-color:var(--hot); color:#fff; }
.btn:active { transform:translateY(1px); }
.fav { width:36px; height:36px; flex:none; border-radius:50%; border:1px solid var(--line); background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.fav svg { width:17px; height:17px; fill:none; stroke:var(--faint); stroke-width:2; stroke-linejoin:round; } .fav[aria-pressed="true"] svg { fill:var(--new); stroke:var(--new); }
.empty { text-align:center; color:var(--dim); font:600 15px/1.5 var(--body); padding:34px 10px; }
.foot { max-width:1100px; margin:0 auto; padding:6px 16px 0; color:var(--faint); font:600 12px/1.5 var(--body); display:flex; flex-direction:column; gap:3px; } .foot a { text-decoration:underline; }
@media (max-width:560px) { .row { grid-template-columns:42px 1fr auto; padding:12px 12px; } .rk b { font-size:22px; } }

/* collapsible rows: title-only when folded (same three-bar switch as the other sites) */
.crow { display:flex; align-items:center; gap:6px; } .crow .chips { flex:1; min-width:0; }
.fold { flex:none; width:36px; height:24px; border:0; border-radius:12px; background:color-mix(in srgb,var(--text) 7%, transparent); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:0; }
.fold b { display:block; width:16px; height:3px; border-radius:2px; background:var(--faint); opacity:.35; transition:opacity .15s, background .15s; }
.fold.l2 b, .fold.l0 b:first-child { opacity:1; background:var(--text); } .fold.lmix b:nth-child(odd) { opacity:1; background:var(--text); }
@media (hover:hover) { .fold:hover { background:color-mix(in srgb,var(--text) 14%, transparent); } }
.gfold { width:40px; height:34px; border-radius:17px; margin-bottom:6px; } .gfold[hidden] { display:none; }
.row .sg { cursor:pointer; } .bd { cursor:default; } .row.folded .bd { display:none; } .row.folded { padding-top:10px; padding-bottom:10px; } .row.folded .rk b { font-size:20px; } .row.folded .mv { margin-top:3px; }

/* YouTube thumbnail as the song's background */
.list { background:none; border:0; box-shadow:none; overflow:visible; display:flex; flex-direction:column; gap:10px; }
.row, .one { position:relative; isolation:isolate; } .row { background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; } .row:first-child { border-top:1px solid var(--line); }
.th { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; display:block; }
.hasimg::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(8,8,12,.9) 0%,rgba(8,8,12,.72) 55%,rgba(8,8,12,.5) 100%); }
.one.hasimg::before { background:linear-gradient(180deg,rgba(8,8,12,.55) 0%,rgba(8,8,12,.86) 100%); } .one.hasimg::after { color:#fff; opacity:.14; z-index:-1; }
.row.hasimg { color:#fff; border-color:transparent; } .row.hasimg .ti { color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.5); } .row.hasimg .ar { color:rgba(255,255,255,.82); } .row.hasimg .st { color:rgba(255,255,255,.68); } .row.hasimg .st b { color:#fff; }
.row.hasimg .mv.up { color:#6ee79a; } .row.hasimg .mv.down { color:#ff8f84; } .row.hasimg .mv.same { color:rgba(255,255,255,.6); } .row.hasimg .mv.new { color:#ffd166; }
.row.hasimg .btn:not(.go) { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.4); color:#fff; backdrop-filter:blur(4px); }
.row.hasimg .fav { border-color:rgba(255,255,255,.35); background:rgba(0,0,0,.25); } .row.hasimg .fav svg { stroke:rgba(255,255,255,.8); } .row.hasimg .fav[aria-pressed="true"] svg { fill:#ffd166; stroke:#ffd166; }
.row.hasimg .fold { background:rgba(255,255,255,.18); } .row.hasimg .fold b { background:#fff; }
@media (hover:hover) { .row:hover { background:var(--card); } .row.hasimg:hover .th { transform:scale(1.03); } .th { transition:transform .4s var(--ease); } }
@media (min-width:700px) { .row .bd { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:2px; } .row.folded .bd { display:none; } }
.one.hasimg { color:#fff; } .one.hasimg::after { content:none; } .one.hasimg .t { text-shadow:0 1px 8px rgba(0,0,0,.55); }
.one.hasimg .btn:not(.go) { color:#fff; border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.12); backdrop-filter:blur(4px); }
.hasimg::before { background:linear-gradient(90deg,rgba(8,8,12,.84) 0%,rgba(8,8,12,.62) 55%,rgba(8,8,12,.34) 100%); }
.one.hasimg::before { background:linear-gradient(180deg,rgba(8,8,12,.4) 0%,rgba(8,8,12,.82) 100%); }

/* ---- Manna tile layout: name + dim sub-line + trend badge on the left, tinted score-style chip on the right ---- */
:root { --t1:#7c4dff; --t2:#4f6fd6; --t3:#2f9d5a; --t4:#c98a1a; --t1t:#6a3de8; --t2t:#3e5bb8; --t3t:#1f7d45; --t4t:#a06d0e; }
:root[data-theme="dark"] { --t1:#9b6bff; --t2:#8fa8ee; --t3:#8fd0a6; --t4:#e6b565; --t1t:#a98bff; --t2t:#9db4f2; --t3t:#9bd8b0; --t4t:#ecc27a; }
.list { gap:8px; }
.row.tile { grid-template-columns:1fr auto; gap:12px; padding:12px 12px 12px 18px; border-radius:22px; cursor:pointer; align-items:center; min-height:78px; background:var(--card); }
:root[data-theme="dark"] .row.tile { background:#1b1b1f; border-color:rgba(255,255,255,.07); }
.row.tile:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.row.tile .ti { font:800 clamp(18px,4.6vw,24px)/1.15 var(--inter); letter-spacing:-.02em; }
.row.tile.folded .ti { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row.tile .ar { display:flex; align-items:center; gap:8px; margin-top:4px; font:500 14px/1.2 var(--body); letter-spacing:.01em; min-width:0; }
.row.tile .arn { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .row.tile:not(.folded) .arn { white-space:normal; }
.tr { flex:none; font:800 12px/1 var(--inter); padding:4px 7px; border-radius:7px; } .tr.up { color:#6ee79a; background:rgba(60,160,100,.2); } .tr.down { color:#ff8f84; background:rgba(210,70,60,.22); } .tr.new { color:#ffd166; background:rgba(224,169,46,.2); }
:root:not([data-theme="dark"]) .row:not(.hasimg) .tr.up { color:var(--up); } :root:not([data-theme="dark"]) .row:not(.hasimg) .tr.down { color:var(--down); } :root:not([data-theme="dark"]) .row:not(.hasimg) .tr.new { color:var(--new); }
.row.tile .bd { display:block; margin-top:8px; } .row.tile.folded .bd { display:none; } .row.tile .acts { margin-top:10px; flex-wrap:wrap; }
.chip2 { position:relative; z-index:0; flex:none; min-width:84px; padding:6px 14px; border-radius:18px; text-align:center; --c:var(--t4); --ct:var(--t4t);
  background:color-mix(in srgb,var(--c) 22%, transparent); border:1px solid color-mix(in srgb,var(--c) 38%, transparent); box-shadow:0 0 22px -4px color-mix(in srgb,var(--c) 45%, transparent), inset 0 0 0 3px color-mix(in srgb,var(--c) 7%, transparent); }
.chip2 b { display:block; font:900 clamp(36px,10vw,50px)/1.05 var(--inter); letter-spacing:-.05em; color:var(--ct); }
.chip2.t1 { --c:var(--t1); --ct:var(--t1t); } .chip2.t2 { --c:var(--t2); --ct:var(--t2t); } .chip2.t3 { --c:var(--t3); --ct:var(--t3t); } .chip2.t4 { --c:var(--t4); --ct:var(--t4t); }
.row.tile.folded { padding-top:10px; padding-bottom:10px; }
.row.hasimg::before { background:linear-gradient(90deg,rgba(14,14,18,.93) 0%,rgba(14,14,18,.8) 60%,rgba(14,14,18,.6) 100%); }
:root[data-theme="dark"] .row.tile .chip2 b { text-shadow:0 1px 10px rgba(0,0,0,.35); }
.row.hasimg .chip2 b { color:var(--ct); } :root:not([data-theme="dark"]) .row.hasimg .chip2 { --t1t:#b79bff; --t2t:#a7bcf5; --t3t:#a6dfba; --t4t:#f0cd8c; }
@media (hover:hover) { .row.tile:hover { border-color:var(--edge); } }
@media (min-width:700px) { .row.tile .bd { display:block; } .row.tile.folded .bd { display:none; } }
/* tight Manna spacing: tiles nearly touch, the chip fills the tile height */
.list { gap:3px; }
.row.tile { min-height:66px; padding:3px 3px 3px 16px; border-radius:20px; align-items:stretch; }
.row.tile .sg { align-self:center; padding:6px 0; }
.row.tile.folded { padding:3px 3px 3px 16px; }
.row.tile .ti { font-size:clamp(17px,4.4vw,22px); } .row.tile .ar { margin-top:3px; }
.chip2 { align-self:stretch; display:flex; align-items:center; justify-content:center; min-width:82px; border-radius:17px; padding:0 12px; }
.chip2 b { font-size:clamp(32px,9vw,44px); line-height:1; }
.row.tile:not(.folded) .sg { padding:10px 0; }
.row.tile:not(.folded) .chip2 { align-self:flex-start; height:60px; margin-top:3px; }
/* no dark haze over the thumbnails; legibility comes from text shadows instead */
.hasimg::before, .one.hasimg::before, .row.hasimg::before { background:none; content:none; }
.row.hasimg .ti, .row.hasimg .ar, .row.hasimg .st, .row.hasimg .tr, .one.hasimg .t, .one.hasimg .a, .one.hasimg .s, .one.hasimg .lbl { text-shadow:0 1px 2px rgba(0,0,0,.95), 0 0 10px rgba(0,0,0,.8), 0 0 22px rgba(0,0,0,.55); }
.row.hasimg .ar, .row.hasimg .st { color:#fff; } .row.hasimg .st b { color:#fff; }
.row.hasimg .chip2 { backdrop-filter:blur(6px); background-color:color-mix(in srgb,var(--c) 26%, rgba(0,0,0,.35)); } .row.hasimg .chip2 b { text-shadow:0 1px 8px rgba(0,0,0,.6); }
.row.hasimg .tr { background-color:rgba(0,0,0,.45); }
.list { gap:1px; }

/* Watch / Listen = Manna's Inspection / Reputation segmented control, frosted over the thumbnail */
.seg { flex:1 1 220px; max-width:340px; display:flex; gap:4px; padding:3px; border-radius:999px; background:rgba(20,20,22,.06); box-shadow:inset 0 1px 2px rgba(20,20,22,.12); }
.sgb { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; text-decoration:none; cursor:pointer; font:500 14px/1 "InterVariable","Inter",system-ui,sans-serif; letter-spacing:.01em; color:var(--dim); padding:11px 12px; border-radius:999px; white-space:nowrap; }
.sgb svg { width:11px; height:11px; fill:currentColor; }
.sgb.on { background:var(--card); color:var(--text); box-shadow:0 1px 2px rgba(20,20,22,.18), 0 0 0 1px rgba(20,20,22,.05); }
.hasimg .seg, .one .seg { background:rgba(255,255,255,.1); box-shadow:inset 0 1px 2px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.12); -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4); }
.hasimg .sgb, .one .sgb { color:rgba(255,255,255,.88); text-shadow:0 -1px 0 rgba(0,0,0,.65); }
.hasimg .sgb.on, .one .sgb.on { background:rgba(255,255,255,.2); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
:root[data-theme="dark"] .row:not(.hasimg) .seg { background:rgba(255,255,255,.07); box-shadow:inset 0 1px 2px rgba(0,0,0,.5); } :root[data-theme="dark"] .row:not(.hasimg) .sgb.on { background:rgba(255,255,255,.14); box-shadow:none; color:var(--text); }
.row.tile .acts, .one .acts { display:flex; align-items:center; gap:8px; } .one .btns { margin-top:14px; }

/* Present section header above the No. 1 cards */
.sechead { display:flex; align-items:center; gap:10px; margin:2px 0 8px; }
.sechead .rlabel { flex:1; min-width:0; display:flex; align-items:center; gap:9px; font:700 clamp(26px,7vw,32px)/1.1 var(--inter); letter-spacing:-.02em; white-space:nowrap; }
.sechead .rlabel .pr-dna { flex:none; } .sechead .rlabel em { font:400 clamp(20px,5.5vw,26px)/1 var(--body); font-style:normal; color:var(--faint); letter-spacing:.01em; }
.sechead .rtag { margin-left:4px; min-width:0; flex:1 1 0; overflow-x:auto; overflow-y:hidden; white-space:nowrap; font:500 14px/1.2 var(--body); color:var(--dim); scrollbar-width:none; } .sechead .rtag::-webkit-scrollbar { display:none; }
.sechead .rtag::before { content:"\2014"; margin-right:8px; color:var(--faint); }
.sechead .fold { position:static; margin:0; } .ones.folded { display:none; }
.sechead + .ones { margin-top:0; }

 .sechead { margin-top:14px; } .main > .sechead:first-child { margin-top:2px; }

/* three-way section fold: all (l2) -> one scrolling row (l1) -> folded (l0), same switch as Present */
.fold.l1 b:nth-child(-n+2) { opacity:1; background:var(--text); }
.ones.lv0, .list.lv0 { display:none; }
.ones.lv1, .list.lv1 { display:flex; flex-direction:row; gap:8px; overflow-x:auto; scroll-snap-type:x proximity; padding:2px 2px 10px; margin:0 -16px 12px; padding-left:16px; padding-right:16px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.ones.lv1::-webkit-scrollbar, .list.lv1::-webkit-scrollbar { display:none; }
.ones.lv1 > .one { flex:none; width:min(78vw,300px); scroll-snap-align:start; margin:0; }
.list.lv1 > .row.tile { flex:none; width:min(78vw,300px); scroll-snap-align:start; align-items:start; cursor:default; padding:8px 8px 8px 14px; min-height:150px; }
.list.lv1 .row.tile .bd, .list.lv1 .row.tile.folded .bd { display:block; } .list.lv1 .row.tile .ti, .list.lv1 .row.tile.folded .ti { white-space:normal; font-size:18px; }
.list.lv1 .row.tile .acts { flex-wrap:wrap; } .list.lv1 .seg { flex:1 1 100%; max-width:none; } .list.lv1 .chip2, .list.lv1 .row.tile:not(.folded) .chip2 { align-self:flex-start; height:52px; min-width:66px; margin-top:0; } .list.lv1 .chip2 b { font-size:32px; }
.ones.lv1, .list.lv1 { scroll-padding-left:16px; }
/* mini / half-size row (middle setting): compact tiles, roughly half the size of the full cards */
.ones.lv1 > .one { width:min(58vw,210px); padding:11px 12px 10px; border-radius:16px; min-height:0; }
.ones.lv1 .one .lbl { font-size:9px; } .ones.lv1 .one .t { font-size:18px; margin:6px 0 1px; } .ones.lv1 .one .a { font-size:12.5px; } .ones.lv1 .one .s { display:none; }
.ones.lv1 .one .btns { margin-top:9px; } .ones.lv1 .one::after { content:none; }
.list.lv1 > .row.tile { width:min(58vw,210px); min-height:0; padding:6px 6px 6px 12px; border-radius:16px; align-items:center; }
.list.lv1 .row.tile .ti, .list.lv1 .row.tile.folded .ti { font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.list.lv1 .row.tile .ar { font-size:12px; margin-top:2px; } .list.lv1 .row.tile .tr { display:none; }
.list.lv1 .row.tile .st, .list.lv1 .row.tile .fav { display:none; } .list.lv1 .row.tile .bd, .list.lv1 .row.tile.folded .bd { margin-top:7px; }
.list.lv1 .row.tile .acts { margin-top:0; } .list.lv1 .seg { padding:2px; gap:2px; } .list.lv1 .sgb, .ones.lv1 .sgb { font-size:12px; padding:8px 6px; gap:5px; } .ones.lv1 .seg { padding:2px; gap:2px; }
.list.lv1 .chip2, .list.lv1 .row.tile:not(.folded) .chip2 { align-self:flex-start; height:40px; min-width:46px; padding:0 8px; border-radius:13px; } .list.lv1 .chip2 b { font-size:24px; }
.list.lv1 .row.tile .sg { padding:2px 0; min-width:0; }

/* header never runs into the fold button: name shrinks/ellipsizes, count stays, tag drops first */
.sechead .rlabel { overflow:hidden; } .sechead .rlabel .pr-dna { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; } .sechead .rlabel em { flex:none; }
.sechead .fold { flex:none; } .sechead .rtag { flex:1 1 0; min-width:0; }
.sechead .rlabel { font-size:clamp(22px,6.2vw,32px); }

/* four-way section view: regular (l3) -> mini (l2) -> one scrolling row (l1) -> folded (l0) */
.fold.l3 b { opacity:1; background:var(--text); }
.fold.l2 b { opacity:.35; background:var(--faint); } .fold.l2 b:nth-child(-n+2) { opacity:1; background:var(--text); }
.fold.l1 b { opacity:.35; background:var(--faint); } .fold.l1 b:nth-child(2) { opacity:1; background:var(--text); }
.fold.l0 b { opacity:.35; background:var(--faint); } .fold.l0 b:first-child { opacity:1; background:var(--text); }
.ones.lv3 { }
.ones.lv2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ones.lv2 > .one { padding:11px 12px 10px; border-radius:16px; min-height:0; }
.ones.lv2 .one .lbl { font-size:9px; } .ones.lv2 .one .t { font-size:18px; margin:6px 0 1px; } .ones.lv2 .one .a { font-size:12.5px; } .ones.lv2 .one .s { display:none; }
.ones.lv2 .one .btns { margin-top:9px; } .ones.lv2 .one::after { content:none; } .ones.lv2 .sgb { font-size:12px; padding:8px 6px; gap:5px; } .ones.lv2 .seg { padding:2px; gap:2px; }
@media (min-width:700px) { .ones.lv2 { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); } }
/* tighter: tiles touch (shared 1px border), no shadow between them, a little less height */
.list.lv2, .list.lv3 { gap:0; }
.list.lv2 > .row.tile, .list.lv3 > .row.tile { margin-top:-1px; box-shadow:none; min-height:58px; padding:2px 2px 2px 14px; border-radius:15px; }
.list.lv2 > .row.tile:first-child, .list.lv3 > .row.tile:first-child { margin-top:0; }
.list.lv2 > .row.tile.folded, .list.lv3 > .row.tile.folded { padding:2px 2px 2px 14px; }
.list.lv2 .row.tile .sg { padding:4px 0; } .list.lv2 .chip2 { min-width:76px; border-radius:13px; } .list.lv2 .chip2 b { font-size:clamp(30px,8.5vw,40px); }
.list.lv2 .row.tile .ti { font-size:clamp(16px,4.2vw,20px); } .list.lv2 .row.tile .ar { margin-top:2px; font-size:13px; }

/* six-band rank spectrum: purple 1-10, blue 11-25, green 26-45, amber 46-65, orange 66-85, red 86-100 */
:root { --t5:#e0701c; --t6:#d6453d; --t5t:#b85a0c; --t6t:#b8322b; }
:root[data-theme="dark"] { --t5:#f08a4b; --t6:#ff6b62; --t5t:#f5a06a; --t6t:#ff8a82; }
.chip2.t5 { --c:var(--t5); --ct:var(--t5t); } .chip2.t6 { --c:var(--t6); --ct:var(--t6t); }
:root:not([data-theme="dark"]) .row.hasimg .chip2 { --t5t:#f7b27d; --t6t:#ff9a92; }

.chips[hidden] { display:none; } .rsrc { color:inherit; text-decoration:underline; text-decoration-color:var(--faint); text-underline-offset:2px; }

.sortsep { flex:none; width:1px; align-self:stretch; margin:4px 3px; background:var(--edge); }
.chips.sub .sortchip { font-weight:700; }

/* match Present's category-title letter spacing */
.sechead .rlabel, .sechead .rlabel .pr-dna, .sechead .rlabel .pr-dna * { letter-spacing:-.07em; }
.sechead .rlabel em, .sechead .rlabel .rtag, .sechead .rlabel .rtag * { letter-spacing:normal; }

/* custom chart ordering */
.ordhead { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:6px 4px 10px; font:500 14px/1.3 var(--body); color:var(--dim); } .ordhead b { font:800 18px/1 var(--inter); color:var(--text); } .ordhead span { flex:1 1 220px; }
.ordlist { display:flex; flex-direction:column; gap:0; }
.ordrow { display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--edge); margin-top:-1px; padding:6px 10px; min-height:48px; }
.ordn { flex:none; width:2.2em; text-align:right; font:800 13px/1 var(--inter); color:var(--faint); font-variant-numeric:tabular-nums; }
.ordname { flex:1; min-width:0; font:700 16px/1.2 var(--inter); overflow-wrap:anywhere; }
.ordbtns { flex:none; display:flex; gap:6px; } .ordbtns button { width:40px; height:36px; border-radius:10px; border:1px solid var(--edge); background:var(--bg); color:var(--text); font-size:17px; cursor:pointer; } .ordbtns button:disabled { opacity:.3; cursor:default; }

.swrap2 { margin-top:0; }

/* full chart name in section headers: no ellipsis, swipe/scroll sideways */
.sechead .rlabel .pr-dna { overflow-x:auto; overflow-y:hidden; text-overflow:clip; white-space:nowrap; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:4px; margin-bottom:-4px; touch-action:pan-x pan-y; }
.sechead .rlabel .pr-dna::-webkit-scrollbar { display:none; }

/* Play / Listen buttons are <button>s now */
button.sgb { border:0; background:transparent; }
/* in-page player dock */
body.hasdock { padding-bottom:calc(150px + env(safe-area-inset-bottom)); }
.dock { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(8px + env(safe-area-inset-bottom)); width:min(calc(100% - 16px),620px); z-index:60; display:flex; gap:10px; align-items:stretch; padding:8px; border-radius:18px; background:color-mix(in srgb,var(--card) 90%, transparent); border:1px solid var(--edge); box-shadow:0 10px 34px rgba(0,0,0,.28); -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4); }
.dock[hidden] { display:none; }
.dk-v { flex:none; width:200px; height:113px; border-radius:12px; overflow:hidden; background:#000; } .dk-v iframe, .dk-v #ytp { width:100%; height:100%; display:block; border:0; }
.dock:not(.isyt) .dk-v { display:none; }
.dk-i { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:space-between; gap:6px; }
.dk-t b { display:block; font:800 15px/1.2 var(--inter); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .dk-t span { display:block; font:500 13px/1.3 var(--body); color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dk-b { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; }
.dk-btn { width:34px; height:34px; border-radius:50%; border:1px solid var(--edge); background:var(--bg); color:var(--text); font-size:16px; cursor:pointer; display:grid; place-items:center; }
.dk-l { font:600 12px/1 var(--body); color:var(--dim); text-decoration:none; white-space:nowrap; } .dk-l:hover { color:var(--text); text-decoration:underline; }
#dkc { margin-left:auto; }
.dk-bar { height:3px; border-radius:2px; background:var(--line); overflow:hidden; } .dk-bar i { display:block; height:100%; width:0; background:var(--accent); }
.dk-m { font:500 11.5px/1.3 var(--body); color:var(--faint); min-height:0; } .dk-m:empty { display:none; }
.dock.big { flex-direction:column; } .dock.big .dk-v { width:100%; height:auto; aspect-ratio:16/9; }
.dock:not(.isyt) #dks { display:none; }

/* playlist */
.pltools { display:flex; gap:8px; padding:2px 4px 10px; } .ordname small { display:block; font:500 13px/1.3 var(--body); color:var(--dim); }

/* slimmer search fields (font stays 16px so iPhones don't zoom on focus) */
.swrap { margin:10px 0 6px; } .swrap2 { margin-top:0; }
#q, #cq { padding:7px 40px 7px 38px; border-radius:12px; }
.swrap > svg { left:12px; top:8px; width:18px; height:18px; }
.qx { width:22px; height:22px; font-size:16px; right:8px; }

/* chart titles use Present's topic-title type: Inter 700, 25px, 1.3 line, count in 17px body face */
.sechead .rlabel { font-family:"InterVariable","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; font-weight:700; font-size:25px; line-height:1.3; gap:7px; }
.sechead .rlabel .pr-dna { line-height:1.3; padding-bottom:4px; margin-bottom:-4px; }
.sechead .rlabel em { font:400 17px/1.3 var(--body); }

/* app name = Present's wordmark: Inter 1000, 40-60px, -.02em, 1.2 line, stacked 1000/900 outline */
h1 { font-family:var(--inter); font-size:min(8vw,60px); letter-spacing:-.02em; font-weight:1000; line-height:1.2; }
.stack-outline { position:relative; display:inline-block; }
.stack-bottom { font-weight:1000; color:var(--text); }
.stack-top { position:absolute; inset:0; font-weight:900; color:color-mix(in srgb, var(--text) 85%, var(--bg)); }
.sechead .rlabel, .sechead .rlabel .pr-dna, .sechead .rlabel .pr-dna * { font-weight:900; }
.sechead .rlabel em { font-weight:400; }

/* very light frost of the chart group's colour behind each chart section */
.sec { position:relative; isolation:isolate; margin-bottom:12px; --frost:hsl(var(--bh,262) 75% 97.5%); }
:root[data-theme="dark"] .sec { --frost:hsl(var(--bh,262) 35% 9%); }
.sec::before { content:""; position:absolute; z-index:-1; left:-6px; right:-6px; top:2px; bottom:-4px; border-radius:20px; background:var(--frost); }
.main > .sec:first-child > .sechead { margin-top:2px; }
/* clean-up: legible titles (lighter weight, looser tracking, real word gaps) */
.sechead .rlabel, .sechead .rlabel .pr-dna, .sechead .rlabel .pr-dna * { font-weight:800; letter-spacing:-.035em; }
.sechead .rlabel .pr-dna { word-spacing:.16em; }
.sechead .rlabel em, .sechead .rlabel .rtag, .sechead .rlabel .rtag * { font-weight:400; letter-spacing:normal; word-spacing:normal; }
.sechead .rlabel em { font-size:15px; color:var(--faint); }
.sechead .rlabel .rtag { font-size:13px; color:var(--faint); }
:root { --frost-l:98.2%; }
.sec { --frost:hsl(var(--bh,262) 70% 98%); }
.sec::before { border-radius:18px; }
.sec { margin-bottom:6px; }
/* station name on the Now Playing cards: bigger, heavier, full-strength white with a glow so it stands out over the artwork */
.one .lbl, .one.hasimg .lbl { font:900 13px/1.2 var(--inter); letter-spacing:.09em; opacity:1; color:#fff; margin-bottom:2px;
  text-shadow:0 0 6px rgba(255,255,255,.65), 0 0 16px rgba(255,255,255,.4), 0 1px 3px rgba(0,0,0,.95), 0 0 12px rgba(0,0,0,.7); }
.ones.lv1 .one .lbl, .ones.lv2 .one .lbl { font-size:11.5px; }

/* release date under the Play / YouTube / Listen buttons on the Now Playing cards */
.one .rel { margin-top:8px; font:600 12px/1.2 var(--inter); letter-spacing:.02em; color:rgba(255,255,255,.82); }
.one .rel b { font-weight:800; color:#fff; }
.one.hasimg .rel { text-shadow:0 1px 2px rgba(0,0,0,.95), 0 0 10px rgba(0,0,0,.8); }
.ones.lv1 .one .rel, .ones.lv2 .one .rel { margin-top:5px; font-size:11px; }