/* Palette: slate ink + teal (data) + amber (outliers). */
:root {
  color-scheme: light;
  --bg:#eef2f7; --y-surface:#ffffff; --y-surface2:#f3f6fa; --y-ink:#152033; --y-ink2:#56627a; --y-line:#dce3ee;
  --y-teal:#0f766e; --y-teal-deep:#0f4c47; --y-teal-soft:#e1f3f0;
  --y-amber:#f5a524; --y-amber-ink:#2a1b00;
  --h0:#eaf0f6; --h1:#d2efea; --h2:#96d8ce; --h3:#4db6a8; --h4:#1f8a7d; --h5:#0f5e57;
  --t-dark:#0f3d39; --t3:#0b2421; --t45:#ffffff; --amber-t:#b45309; --s2:#4a3aa7;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg:#0b111c; --y-surface:#131e2e; --y-surface2:#1b293d; --y-ink:#e8eef6; --y-ink2:#a9b6c9; --y-line:#2b3b52;
    --y-teal:#3db7a8; --y-teal-deep:#0f4c47; --y-teal-soft:#163a3a;
    --y-amber:#f5b83d; --y-amber-ink:#2a1b00;
    --h0:#1b293d; --h1:#12423f; --h2:#19635c; --h3:#2a8c80; --h4:#43b5a6; --h5:#8fe0d3;
    --t-dark:#e8eef6; --t3:#ffffff; --t45:#0b111c; --amber-t:#f5b83d; --s2:#9085e9;
  }
}

* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--y-ink);
       font-family:Manrope, ui-sans-serif, system-ui, "Segoe UI", sans-serif; font-size:15px; line-height:1.45; }
.wrap { max-width:1180px; margin:0 auto; padding:22px 16px 40px; }
a { color:var(--y-teal); }
button, input, select, textarea { font:inherit; color:inherit; }
:focus-visible { outline:2px solid var(--y-teal); outline-offset:2px; }

/* header */
.top { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:14px; }
.mark { width:44px; height:44px; border-radius:12px; background:var(--y-teal); color:#fff; flex:none;
        display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.top h1 { margin:0; font-size:1.55rem; font-weight:800; letter-spacing:-.02em; }
.top p { margin:2px 0 0; font-size:.9rem; color:var(--y-ink2); }
.zone { display:flex; flex-direction:column; gap:4px; font-size:.78rem; color:var(--y-ink2); }

select, input[type=text], textarea {
  background:var(--y-surface); border:1px solid var(--y-line); border-radius:10px; padding:10px 12px; }
select { padding:8px 10px; }
textarea { width:100%; resize:vertical; }

/* tabs */
.tabs { display:flex; gap:4px; margin:20px 0 14px; padding:4px; border-radius:12px; width:fit-content; max-width:100%;
        background:var(--y-surface); border:1px solid var(--y-line); overflow-x:auto; }
.tabs button { border:0; background:none; padding:8px 14px; border-radius:9px; cursor:pointer; color:var(--y-ink2);
               font-weight:700; white-space:nowrap; }
.tabs button[aria-selected=true] { background:var(--y-teal); color:#fff; }

.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.row input[type=text] { flex:1; min-width:220px; }
.row.end { justify-content:flex-end; margin-top:10px; }
.row.opts { margin-top:10px; gap:16px; font-size:.85rem; color:var(--y-ink2); }
.row.opts label { display:flex; align-items:center; gap:8px; }
.go { background:var(--y-teal); color:#fff; border:0; border-radius:10px; padding:10px 20px; font-weight:800; cursor:pointer; }
.go:disabled { opacity:.6; cursor:progress; }
.hint { font-size:.82rem; color:var(--y-ink2); margin:8px 0 0; }
.loading { margin-top:14px; padding:14px 16px; border-radius:12px; background:var(--y-surface); border:1px solid var(--y-line);
           color:var(--y-ink2); }
footer { margin-top:30px; font-size:.75rem; color:var(--y-ink2); text-align:center; }

/* cards */
.card { display:flex; gap:20px; flex-wrap:wrap; padding:20px; border-radius:14px; margin-top:14px;
        border:1px solid var(--y-line); background:var(--y-surface); }
.card > img { width:320px; max-width:100%; border-radius:10px; align-self:flex-start; }
.card .info { flex:1; min-width:240px; }
.card h2 { margin:0 0 4px; font-size:1.2rem; font-weight:700; }
.card .ch { color:var(--y-ink2); }
.card .ch a { text-decoration:none; font-weight:700; }
.big { margin:14px 0; padding:16px 18px; border-radius:12px; color:#fff; background:var(--y-teal-deep); }
.big .when { font-size:1.3rem; font-weight:800; letter-spacing:-.01em; }
.big .ago { opacity:.85; margin-top:3px; font-size:.9rem; }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(105px,1fr)); gap:10px; margin-top:10px; }
.stat { text-align:center; padding:10px 6px; border-radius:10px; background:var(--y-surface2); }
.stat b { display:block; font-size:1.1rem; font-variant-numeric:tabular-nums; }
.stat span { font-size:.75rem; color:var(--y-ink2); }
.chip { display:inline-block; margin:3px 4px 0 0; padding:2px 10px; font-size:.75rem; border-radius:99px;
        background:var(--y-teal-soft); color:var(--y-teal); }
.err { margin-top:14px; padding:14px 16px; border-radius:12px; background:var(--y-surface); border:1px solid var(--y-line);
       border-left:4px solid var(--y-amber); }
.chead { align-items:center; flex-wrap:nowrap; }
.chead h2 { font-size:1.35rem; }
.chead .meta { color:var(--y-ink2); font-size:.88rem; }
.card > img.logo, .logo { width:72px; height:72px; border-radius:50%; object-fit:cover; flex:none; }
.logo.ph { display:flex; align-items:center; justify-content:center; font-size:2rem; font-weight:800;
           color:#fff; background:var(--y-teal); }

/* KPI strip */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); margin-top:14px;
        background:var(--y-surface); border:1px solid var(--y-line); border-radius:14px; overflow:hidden; }
.kpi { padding:14px 16px; box-shadow:1px 0 0 var(--y-line), 0 1px 0 var(--y-line); }
.kpi .k { display:block; font-size:.78rem; color:var(--y-ink2); }
.kpi b { display:block; margin:3px 0 2px; font-size:1.35rem; font-weight:800; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.kpi .d { display:block; font-size:.78rem; color:var(--y-ink2); line-height:1.3; overflow-wrap:anywhere; }
.kpi.hot b { color:var(--y-teal); }

/* chart panels */
.viz { background:var(--y-surface); border:1px solid var(--y-line); border-radius:14px; padding:18px 20px; margin-top:14px; min-width:0; }
.viz h3 { margin:0; font-size:1.02rem; font-weight:700; }
.viz .sub { margin:3px 0 0; font-size:.82rem; color:var(--y-ink2); line-height:1.4; }
.heat-scroll { overflow-x:auto; margin-top:16px; padding:4px 2px 2px; }
.heat { display:grid; grid-template-columns:56px repeat(24,minmax(26px,1fr)) 54px; gap:3px; min-width:820px; }
.heat .band { font-size:.72rem; font-weight:700; color:var(--y-ink2); padding:0 0 4px 6px; margin-left:3px;
              border-left:2px solid var(--y-line); }
.heat .hr { font-size:.72rem; color:var(--y-ink2); text-align:center; font-variant-numeric:tabular-nums; padding-bottom:2px; }
.heat .lab { font-size:.85rem; font-weight:700; display:flex; align-items:center; }
.heat .lab.sm { font-size:.7rem; font-weight:600; color:var(--y-ink2); }
.heat .tot-h { font-size:.7rem; color:var(--y-ink2); text-align:right; align-self:end; padding-bottom:2px; }
.heat .tot { font-size:.85rem; font-weight:800; text-align:right; display:flex; align-items:center; justify-content:flex-end;
             font-variant-numeric:tabular-nums; }
.heat .start { margin-left:6px; }
.c { position:relative; height:38px; border-radius:6px; background:var(--h0); display:flex; align-items:center;
     justify-content:center; font-size:.82rem; font-weight:800; font-variant-numeric:tabular-nums; cursor:default; }
.c.l1, .sw.l1 { background:var(--h1); color:var(--t-dark); } .c.l2, .sw.l2 { background:var(--h2); color:var(--t-dark); }
.c.l3, .sw.l3 { background:var(--h3); color:var(--t3); }     .c.l4, .sw.l4 { background:var(--h4); color:var(--t45); }
.c.l5, .sw.l5 { background:var(--h5); color:var(--t45); }    .sw.l0 { background:var(--h0); }
.c.best { box-shadow:0 0 0 2px var(--y-surface), 0 0 0 4px var(--y-ink); z-index:2; }
.colbar { position:relative; height:30px; display:flex; align-items:flex-end; margin-top:4px; }
.colbar i { display:block; width:100%; background:var(--y-teal); opacity:.55; border-radius:3px 3px 0 0; }
.colbar:hover i { opacity:1; }
.colbar:hover::after { content:attr(data-tip); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
  white-space:nowrap; padding:5px 9px; font-size:.75rem; border-radius:8px; background:var(--y-ink); color:var(--y-surface); z-index:10; }
.legend { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:12px; font-size:.78rem; color:var(--y-ink2); }
.legend .sw { width:22px; height:14px; border-radius:4px; display:inline-block; margin-left:6px; }
.c:hover::after, .bar:hover::after { content:attr(data-tip); position:absolute; bottom:calc(100% + 6px); left:50%;
  transform:translateX(-50%); white-space:nowrap; padding:5px 9px; font-size:.75rem; border-radius:8px;
  background:var(--y-ink); color:var(--y-surface); pointer-events:none; z-index:10; }
.bars { position:relative; display:flex; align-items:flex-end; gap:2px; height:170px; margin-top:32px;
        border-bottom:1px solid var(--y-line); }
.bar { position:relative; flex:1; min-width:3px; background:var(--y-teal); border-radius:4px 4px 0 0; opacity:.5; }
.bar.top { opacity:1; }
.bar.hot { background:var(--y-amber); opacity:1; }
.bar:hover { opacity:1; }
.bar .v { position:absolute; bottom:calc(100% + 3px); left:50%; transform:translateX(-50%); font-size:.7rem;
          font-weight:700; white-space:nowrap; }
.ref { position:absolute; left:0; right:0; border-top:2px dashed var(--y-ink2); pointer-events:none; z-index:3; }
.ref span { position:absolute; right:0; bottom:2px; font-size:.68rem; color:var(--y-ink2); background:var(--y-surface); padding:0 4px; }
.xl { display:flex; gap:2px; margin-top:4px; }
.xends { display:flex; justify-content:space-between; margin-top:6px; font-size:.72rem; color:var(--y-ink2); }
.xl span { flex:1; min-width:3px; font-size:.68rem; color:var(--y-ink2); text-align:center; white-space:nowrap; }
.three { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; }

/* outlier marks: ★ = 3x typical or more */
.amber { color:var(--amber-t); }
.hstar, .lg-star b { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%;
  background:var(--y-amber); color:var(--y-amber-ink); font-size:.6rem; font-weight:900; line-height:1;
  box-shadow:0 0 0 2px var(--y-surface); }
.hstar { position:absolute; top:2px; right:2px; z-index:3; width:14px; height:14px; font-size:.55rem; box-shadow:none; }
.lg-star { display:inline-flex; align-items:center; gap:6px; margin-left:auto; }
.bar.star { box-shadow:0 0 0 2px var(--y-surface), 0 0 0 3px var(--y-amber); }
.bar .v em { font-style:normal; color:var(--amber-t); margin-right:2px; }
.bars.tall { height:240px; }
.key { display:inline-flex; align-items:center; gap:5px; margin-left:10px; white-space:nowrap; }
.key i.k-amber { width:12px; height:12px; border-radius:3px; background:var(--y-amber); }
.key b { color:var(--amber-t); }

/* video cards */
.gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:18px; margin-top:16px; }
.vt { display:flex; flex-direction:column; text-decoration:none; color:var(--y-ink); border-radius:14px; overflow:hidden;
      background:var(--y-surface2); border:1px solid var(--y-line); transition:border-color .15s; }
.vt:hover, .vt:focus-visible { border-color:var(--y-teal); outline:none; }
.vt.star { border:2px solid var(--y-amber); }
.vt img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background:var(--y-line); }
.th { position:relative; }
.dur { position:absolute; right:8px; bottom:8px; padding:2px 7px; border-radius:6px; font-size:.75rem; font-weight:700;
       background:rgba(10,14,22,.82); color:#fff; font-variant-numeric:tabular-nums; }
.badge { position:absolute; top:10px; left:10px; padding:4px 11px; border-radius:99px; font-size:.82rem;
         font-weight:800; background:var(--y-amber); color:var(--y-amber-ink); box-shadow:0 1px 4px rgba(0,0,0,.35); }
.badge.star { font-size:.9rem; padding:5px 12px; box-shadow:0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.4); }
.badge.up { background:var(--y-teal-deep); color:#fff; }
.badge.low { background:rgba(20,28,40,.78); color:#e8eef6; }
.vb { padding:12px 14px 14px; display:flex; flex-direction:column; gap:6px; flex:1; }
.vt .t { font-size:.95rem; font-weight:800; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2;
         -webkit-box-orient:vertical; overflow:hidden; }
.vt .when { font-size:.78rem; color:var(--y-ink2); }
.facts { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:auto; padding-top:4px; font-size:.85rem; }
.pill { display:inline-block; padding:2px 10px; border-radius:99px; font-size:.78rem; font-weight:800; white-space:nowrap;
        background:var(--y-surface); border:1px solid var(--y-line); color:var(--y-ink); }
.pill.hot { background:var(--y-amber); border-color:transparent; color:var(--y-amber-ink); }
.pill.up { background:var(--y-teal-soft); border-color:transparent; color:var(--y-teal); }
.pill.low { color:var(--y-ink2); }
.meter { height:6px; border-radius:99px; background:var(--y-line); overflow:hidden; }
.meter i { display:block; height:100%; border-radius:99px; background:var(--y-teal); opacity:.6; }
.meter i.hot { background:var(--y-amber); opacity:1; } .meter i.up { opacity:1; }

/* tables */
.tbl-wrap { overflow-x:auto; margin-top:14px; }
table.tbl { width:100%; border-collapse:collapse; font-size:.85rem; }
.tbl th, .tbl td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--y-line); vertical-align:middle; }
.tbl th { color:var(--y-ink2); font-weight:700; white-space:nowrap; font-size:.78rem; }
.tbl td.n, .tbl th.n { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tbl tbody tr:hover { background:var(--y-surface2); }
.tbl tr.star td:first-child { box-shadow:inset 3px 0 0 var(--y-amber); }
.tbl .rank { color:var(--y-ink2); width:36px; font-variant-numeric:tabular-nums; }
.tbl .nw { white-space:nowrap; }
.tbl .muted { color:var(--y-ink2); }
.vid { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--y-ink); min-width:280px; }
.vid img { width:104px; height:58px; object-fit:cover; border-radius:8px; flex:none; background:var(--y-line); }
.vid span { font-weight:700; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vid:hover span { color:var(--y-teal); }
.sorth { background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer; text-decoration:underline dotted; text-underline-offset:3px; }
.sorth.on { color:var(--y-teal); text-decoration:none; }
.tbl-head { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.dl { background:none; border:1px solid var(--y-line); border-radius:10px; padding:7px 14px; cursor:pointer; font-weight:700; color:var(--y-teal); }
.dl:hover { border-color:var(--y-teal); }
.two { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:14px; }

/* shorts / long switch */
.seg { display:flex; gap:4px; margin-top:14px; padding:4px; border-radius:12px; width:fit-content; max-width:100%; overflow-x:auto;
       background:var(--y-surface); border:1px solid var(--y-line); }
.seg button { border:0; background:none; padding:8px 14px; border-radius:9px; cursor:pointer; color:var(--y-ink2); font-weight:700; white-space:nowrap; }
.seg button[aria-pressed=true] { background:var(--y-ink); color:var(--y-surface); }
.tshort { position:absolute; left:10px; bottom:8px; padding:2px 8px; border-radius:6px; font-size:.72rem; font-weight:800;
          background:#e34948; color:#fff; font-style:normal; }
.tshort.inline { position:static; display:inline-block; padding:1px 6px; font-size:.66rem; vertical-align:2px; }
.muted { color:var(--y-ink2); }

/* music */
.music { font-size:.78rem; color:var(--y-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.music.sm { margin:4px 0 0 116px; color:var(--y-ink2); max-width:340px; }
.big-music { margin-top:12px; white-space:normal; font-size:.9rem; }
.mlist { margin:12px 0 0; padding-left:22px; display:grid; gap:6px; font-size:.86rem; }
.mlist li { display:flex; justify-content:space-between; gap:10px; }
.mlist li span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* best-time bars: groups with a single video are unreliable */
.bar.few { opacity:.28; background-image:repeating-linear-gradient(45deg, transparent 0 4px, rgba(255,255,255,.35) 4px 6px); }
.key i.k-few { width:12px; height:12px; border-radius:3px; background:var(--y-teal); opacity:.3; }

/* what big hits have in common */
.viz h4 { margin:0; font-size:.92rem; }
.two.tight { margin-top:14px; gap:24px; align-items:start; }
.traits td:first-child { color:var(--y-ink2); }
.traits tr.diff td { background:var(--y-teal-soft); }
.traits tr.diff td:first-child { color:var(--y-ink); font-weight:700; }
.words { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.wchip { display:inline-flex; align-items:baseline; gap:6px; padding:6px 12px; border-radius:99px; font-size:.82rem;
         background:var(--y-surface2); border:1px solid var(--y-line); }
.wchip small { color:var(--y-ink2); font-size:.7rem; }
.wchip.hot { background:var(--y-amber); border-color:transparent; color:var(--y-amber-ink); }
.wchip.hot small { color:var(--y-amber-ink); opacity:.75; }
.wchip.up { background:var(--y-teal-soft); border-color:transparent; }

/* compare */
.cmp-head { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; }
.cmp td.win { color:var(--y-teal); font-weight:800; }
.cmp td.win::before { content:"▲ "; font-size:.7rem; }
.bars.grouped { gap:14px; }
.grp { flex:1; display:flex; align-items:flex-end; gap:3px; height:100%; }
.grp .bar { opacity:1; }
.bar.s1, .key i.k-s1 { background:var(--y-teal); }
.bar.s2, .key i.k-s2 { background:var(--s2); }
.key i.k-s1, .key i.k-s2 { width:12px; height:12px; border-radius:3px; }
#tab-compare .row input[type=text] { min-width:200px; }

@media (max-width:640px) {
  .music.sm { margin-left:0; }
  .chead { flex-wrap:wrap; }
  .card > img { width:100%; }
  .big .when { font-size:1.1rem; }
  .tabs button { padding:8px 10px; font-size:.86rem; }
}