@font-face{font-family:"New York";src:url(fonts/NewYork.woff) format("woff");font-weight:400 1000;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Machina";src:url(fonts/NeueMachina-Regular.woff2) format("woff2");font-weight:100 450;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Machina";src:url(fonts/NeueMachina-Medium.woff2) format("woff2");font-weight:451 599;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Machina";src:url(fonts/NeueMachina-Bold.woff2) format("woff2");font-weight:600 900;font-style:normal;font-display:swap}
@font-face{font-family:"SF Pro Rounded";src:url(fonts/SFProRounded-Regular.woff) format("woff");font-weight:100 450;font-style:normal;font-display:swap}
@font-face{font-family:"SF Pro Rounded";src:url(fonts/SFProRounded-Medium.woff) format("woff");font-weight:451 550;font-style:normal;font-display:swap}
@font-face{font-family:"SF Pro Rounded";src:url(fonts/SFProRounded-Semibold.woff) format("woff");font-weight:551 650;font-style:normal;font-display:swap}
@font-face{font-family:"SF Pro Rounded";src:url(fonts/SFProRounded-Bold.woff) format("woff");font-weight:651 900;font-style:normal;font-display:swap}
:root{color-scheme:light dark;--flag:#B3122A;--bg:#F1EEFB;--ink:#16102E;--muted:#443A6B;--surface:#fff;--line:rgba(22,16,46,.14);--edge:rgba(255,255,255,.75);--ring:rgba(91,52,224,.16);--accent:#5B34E0;--btn2:#B02FD0;--on-accent:#fff;--f1:#9B7BFF;--f2:#66E0F2;--f3:#F29BE6;--f4:#8FA8FF;--f5:#FFD3A8;--fo:.8;--hg:linear-gradient(95deg,#5B34E0,#0B93BC 32%,#B02FD0 66%,#D4622B);--gut:max(20px,env(safe-area-inset-left));--display-neue:"Neue Machina",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--display:var(--sans);--sans:"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--flag:#FF8D99;--bg:#120E26;--ink:#F3F0FF;--muted:#BDB4E0;--surface:#2A2058;--line:rgba(243,240,255,.09);--edge:rgba(255,255,255,.14);--ring:rgba(200,170,255,.16);--accent:#6A3DF0;--btn2:#B83AD8;--f1:#6A2CFF;--f2:#12A9DC;--f3:#C530C0;--f4:#2B3CD6;--f5:#C9663F;--fo:.85;--hg:linear-gradient(95deg,#C9B8FF,#7FE8FF 32%,#FFA9F0 66%,#FFD2B0)}}
:root[data-theme=light]{color-scheme:light}
:root[data-theme=dark]{color-scheme:dark;--flag:#FF8D99;--bg:#120E26;--ink:#F3F0FF;--muted:#BDB4E0;--surface:#2A2058;--line:rgba(243,240,255,.09);--edge:rgba(255,255,255,.14);--ring:rgba(200,170,255,.16);--accent:#6A3DF0;--btn2:#B83AD8;--f1:#6A2CFF;--f2:#12A9DC;--f3:#C530C0;--f4:#2B3CD6;--f5:#C9663F;--fo:.85;--hg:linear-gradient(95deg,#C9B8FF,#7FE8FF 32%,#FFA9F0 66%,#FFD2B0)}
*{box-sizing:border-box}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 96px);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:1.0625rem/1.55 var(--sans);padding-bottom:env(safe-area-inset-bottom,0px)}
.wrap{width:min(960px,100% - 2 * var(--gut));margin-inline:auto}

/* Functional layer: the only place glass is used */
.glass{position:relative;isolation:isolate;background:color-mix(in srgb,var(--surface) 6%,transparent);-webkit-backdrop-filter:blur(8px) saturate(1.7) brightness(1.04);backdrop-filter:blur(8px) saturate(1.7) brightness(1.04);border:1px solid var(--edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(255,255,255,.14),inset 0 0 14px -4px rgba(255,255,255,.28),0 1px 2px rgba(10,14,36,.1),0 10px 24px -12px rgba(10,14,36,.28)}
.lg-refract .glass{-webkit-backdrop-filter:var(--lg,blur(8px)) blur(3px) saturate(1.6) brightness(1.04);backdrop-filter:var(--lg,blur(8px)) blur(3px) saturate(1.6) brightness(1.04)}
@media(hover:none){.glass{background:color-mix(in srgb,var(--surface) 18%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.9) brightness(1.06);backdrop-filter:blur(18px) saturate(1.9) brightness(1.06)}}
.btn.glass,.cbtn:last-child.glass{background:var(--accent);color:var(--on-accent);border-color:rgba(255,255,255,.2)}
.btn.glass{box-shadow:0 1px 2px rgba(10,14,36,.25)}
.edge{position:fixed;inset:0 0 auto;height:calc(env(safe-area-inset-top,0px) + 96px);z-index:9;pointer-events:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);-webkit-mask-image:linear-gradient(#000 35%,transparent);mask-image:linear-gradient(#000 35%,transparent)}
.nav{position:fixed;z-index:10;top:calc(env(safe-area-inset-top,0px) + 12px);left:50%;translate:-50% 0;width:min(960px,100% - 24px);display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px 6px 20px;border-radius:999px}
.brand{font-family:"New York",Georgia,"Times New Roman",serif;font-optical-sizing:none;font-weight:500;font-size:1.2rem;letter-spacing:0;color:inherit;text-decoration:none}
.nav nav{display:flex;gap:2px}
.link{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;color:var(--ink);text-decoration:none;font-size:.9375rem;font-weight:600}
.picker{position:sticky;top:calc(env(safe-area-inset-top,0px) + 76px);z-index:5;display:flex;align-items:center;gap:6px;width:max-content;max-width:100%;margin:0 0 20px;padding:6px;border-radius:999px;overflow-x:auto;scrollbar-width:none}
.picker[hidden]{display:none}
.picker span{padding:0 12px 0 14px;font-size:.9375rem;font-weight:600;color:var(--muted);white-space:nowrap}
.picker button{font:inherit;font-size:.9375rem;font-weight:600;min-height:44px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--ink);cursor:pointer;white-space:nowrap}
.picker button[aria-pressed=true],.picker button[aria-current=page]{background:color-mix(in srgb,var(--surface) 55%,transparent);box-shadow:inset 1px 1px 1px -.5px rgba(255,255,255,.9),inset 0 0 10px -4px rgba(255,255,255,.6),0 2px 8px -3px rgba(10,14,36,.3)}
.theme{display:inline-grid;place-items:center;width:44px;height:44px;margin-left:2px;padding:0;border-radius:50%;color:var(--ink);cursor:pointer;font:inherit}
.theme[hidden]{display:none}
.theme svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.link,.btn,.picker button,.theme{transition:transform 100ms ease-out}
.link:active,.btn:active,.picker button:active,.theme:active{transform:scale(.97)}

/* Content layer: opaque, never glass */
.hero{padding:calc(env(safe-area-inset-top,0px) + 120px) 0 48px}
h1{font-family:var(--display);max-width:28ch;margin:0 0 16px;font-size:clamp(1.875rem,4.5vw,2.75rem);line-height:1.15;letter-spacing:-.01em;font-weight:700}
h1 .lt{font-weight:400;white-space:nowrap}
h1.gh{font-weight:500}h1.gh .gn{font-weight:700}
h1 .soft{color:var(--muted);background:var(--hg);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.status,.picker span,.meta{text-transform:uppercase;letter-spacing:.08em;font-size:.8125rem}
h2{font-family:var(--display);margin:0 0 12px;font-size:clamp(1.375rem,3vw,1.75rem);line-height:1.2;letter-spacing:-.005em;font-weight:700}
.lede,.sub{max-width:58ch;margin:0 0 28px;color:var(--muted)}
.status{display:inline-block;margin:0 0 22px;padding:6px 14px;border-radius:999px;font-size:.9375rem;font-weight:600}
.actions{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.btn{display:inline-flex;align-items:center;min-height:52px;padding:0 30px;border-radius:999px;color:var(--on-accent);font-weight:650;text-decoration:none}
.text{display:inline-flex;align-items:center;min-height:52px;padding:0 26px;border-radius:999px;color:var(--ink);font-weight:650;text-decoration:none}
.staff{display:block;width:100%;max-width:760px;margin-top:40px;overflow:visible;color:var(--ink)}
.sl,.lg{stroke:currentColor;stroke-width:1.5;stroke-opacity:.4;transform-origin:left;transform-box:fill-box}
.sl{animation:draw .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 70ms)}
.nt{transform-origin:center;transform-box:fill-box;animation:pop .6s cubic-bezier(.3,1.5,.5,1) .55s both}
.nt .lg{stroke-opacity:.7;stroke-width:2}
.nt ellipse{fill:var(--accent)}
@keyframes draw{from{transform:scaleX(0)}}
@keyframes pop{from{transform:scale(.5);opacity:0}}
section{padding:56px 0}
.hero{padding-bottom:24px;position:relative}
@keyframes spin{to{transform:rotate(360deg)}}
.meta{margin:0 0 14px;color:var(--muted);font-size:.9375rem}
.note{margin:-4px 0 14px;color:var(--muted);font-size:.9375rem;line-height:1.45}
.rk{font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.av{display:block;width:56px;height:56px;border-radius:50%;object-fit:cover;border:1px solid var(--edge)}
.mono{display:grid;place-items:center;font-weight:500;font-size:1rem;color:var(--ink);background:color-mix(in srgb,var(--f1) 35%,transparent)}
.nm{font-weight:650;letter-spacing:-.01em;overflow-wrap:anywhere;color:inherit;text-decoration:none}
.empty{padding:24px;border-radius:20px}
.empty[hidden]{display:none}
.empty h3{font-family:var(--display);margin:0 0 6px;font-size:1.2rem;letter-spacing:-.01em}
.empty p{margin:0;max-width:52ch;color:var(--muted)}
.method{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:28px 40px;margin:0}
.method dt{font-family:var(--display);margin-bottom:4px;font-weight:700;letter-spacing:-.01em}
.method dd{max-width:42ch;margin:0;color:var(--muted)}
footer{padding:40px 0 56px;border-top:1px solid var(--line);color:var(--muted);font-size:.9375rem}
footer p{max-width:70ch;margin:0 0 8px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

.flinks{display:flex;flex-wrap:wrap;gap:4px 20px;align-items:center}
.flinks a,.linkbtn{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font:inherit;font-weight:600;text-underline-offset:4px}
.linkbtn{padding:0 16px;cursor:pointer;color:var(--ink);text-decoration:none;border-radius:999px}
.linkbtn[hidden]{display:none}
.consent{position:fixed;z-index:20;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:calc(env(safe-area-inset-bottom,0px) + 12px);max-width:380px;padding:14px 16px;border-radius:24px}
.consent h2{margin:0 0 4px;font-size:1.0625rem;letter-spacing:-.01em}
.consent p{margin:0 0 10px;color:var(--ink);font-size:.9375rem;line-height:1.4}
.consent a{color:var(--ink);text-underline-offset:3px}
.consent-actions{display:flex;gap:8px}
.cbtn{flex:1;font:inherit;font-size:.9375rem;font-weight:650;min-height:44px;padding:0 16px;border-radius:999px;color:var(--ink);cursor:pointer;transition:transform 100ms ease-out}
.cbtn:active{transform:scale(.97)}
.doc{padding:calc(env(safe-area-inset-top,0px) + 112px) 0 40px}
.doc h1{max-width:none}
.doc h2{margin:32px 0 10px;font-size:1.25rem}
.doc p,.doc li{max-width:68ch;color:var(--muted)}
.doc li{margin-bottom:6px}
.doc table{border-collapse:collapse;width:100%;max-width:68ch;margin:12px 0}
.doc th,.doc td{padding:10px 12px;border:1px solid var(--line);text-align:left;vertical-align:top;color:var(--muted)}
.doc th{color:var(--ink)}
.doc a{color:var(--ink);text-underline-offset:3px}
.pg{padding:calc(env(safe-area-inset-top,0px) + 112px) 0 40px}
.pg h1{max-width:28ch}
.link[aria-current=page]{background:color-mix(in srgb,var(--surface) 45%,transparent);box-shadow:inset 1px 1px 1px -.5px rgba(255,255,255,.9),inset 0 0 10px -4px rgba(255,255,255,.6)}
@media(prefers-contrast:more){.link[aria-current=page]{outline:2px solid var(--ink);outline-offset:-2px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::after{animation:none!important;transition:none!important}.link:active,.btn:active,.picker button:active,.cbtn:active,.theme:active,.tbl .lk:active{transform:none}}
@media(prefers-reduced-transparency:reduce){.glass,.link[aria-current=page],.picker button[aria-pressed=true],.picker button[aria-current=page]{background:var(--surface);-webkit-backdrop-filter:none!important;backdrop-filter:none!important}.btn.glass,.cbtn:last-child.glass{background:var(--accent)}.glass::after,.edge{display:none}}
@media(prefers-contrast:more){.btn.glass,.cbtn:last-child.glass{background:var(--accent)}.glass{background:var(--surface);-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-color:var(--ink)}.tbl,.status,.empty{border-color:var(--ink)}.edge{display:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:var(--surface)}.btn.glass,.cbtn:last-child.glass{background:var(--accent)}.edge{display:none}}
/* Quiet controls: 36 px visible, 44 px hit area via ::before */
.btn,.text,.link,.picker button,.cbtn,.theme{position:relative;min-height:36px;font-size:.875rem;font-weight:500}
.btn{padding:0 18px}.text{padding:0 14px}.link{padding:0 12px}.picker button{padding:0 14px}.cbtn{padding:0 14px}
.theme{width:36px;height:36px}
.picker span{font-weight:500}.status{padding:4px 12px;font-size:.8125rem;font-weight:500}
.btn::before,.text::before,.link::before,.picker button::before,.cbtn::before{content:"";position:absolute;inset:-4px 0}.theme::before{content:"";position:absolute;inset:-4px}
.rks{padding-top:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.tbl{border-radius:20px;overflow:hidden}
.tbl[hidden]{display:none}
.tbl table{width:100%;border-collapse:collapse}
.tbl th{padding:10px 14px;text-align:left;font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);border-bottom:1px solid var(--line)}
.tbl td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .c-st,.tbl td.st{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tbl td.st{font-weight:600}
.tbl .rk{width:2.5rem;font-weight:500;color:var(--muted)}
.tbl .nm{font-weight:500}
.wh{display:flex;align-items:center;gap:10px;min-width:0}
.info{display:grid;min-width:0;line-height:1.3}
@media(max-width:480px){.tbl th,.tbl td{padding-left:10px;padding-right:10px}.tbl .rk{width:2.75rem}}
.ver{margin:12px 0 0;font-size:.8125rem;font-variant-numeric:tabular-nums}
.plogo{display:inline-block;height:14px;width:auto;vertical-align:-2px;margin-left:2px}
/* Table columns and phone layout */
.tbl table{table-layout:fixed}
.tbl .c-rk{width:3.25rem}.tbl .c-st{width:8.5rem;white-space:normal;line-height:1.5}
.tbl .nm,.tbl td.who{overflow-wrap:break-word}
@media(max-width:720px){.hero{padding-top:calc(env(safe-area-inset-top,0px) + 84px);padding-bottom:8px}.status{margin-bottom:16px}h1{margin-bottom:12px}.lede,.sub{margin-bottom:16px;font-size:.9375rem;line-height:1.5}.rks{padding-top:0;padding-bottom:40px}.meta{font-size:.75rem;line-height:1.5}.consent{padding:12px 14px}.consent h2{font-size:.9375rem}.consent p{font-size:.8125rem;margin-bottom:8px}}
@media(max-width:480px){.tbl .c-rk{width:2.75rem}.tbl .c-st{width:7.25rem}.tbl .nm{font-size:.9375rem}.picker>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
table.doc{width:100%}table.doc code{overflow-wrap:anywhere}
@media(max-width:720px){table.doc thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}table.doc,table.doc tbody,table.doc tr,table.doc td{display:block;width:100%}table.doc tr{padding:12px 0;border-top:1px solid var(--line)}table.doc td{padding:4px 0;border:0}table.doc td::before{content:attr(data-label);display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}}
/* Podium: places 1 to 3 */
.mdl{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:.8125rem;font-weight:700;line-height:1;color:#2A1D00;font-variant-numeric:tabular-nums;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 1px 2px rgba(10,14,36,.3)}
.mdl.gold{background:linear-gradient(145deg,#FFE27A,#E0A818)}
.mdl.silver{background:linear-gradient(145deg,#F2F4F8,#AEB6C4);color:#1E2430}
.mdl.bronze{background:linear-gradient(145deg,#E9A670,#B8692E);color:#2B1404}
/* Glass rim: a thin specular ring, bright at the top left and bottom right, that brightens near the pointer */
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,0) 32%,rgba(255,255,255,0) 66%,rgba(255,255,255,.6));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask-composite:exclude}
@media(hover:hover){.glass:hover::after{background:radial-gradient(110px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,1),rgba(255,255,255,0) 70%),linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,0) 32%,rgba(255,255,255,0) 66%,rgba(255,255,255,.6))}}
:root[data-theme=dark] .glass::after{opacity:.45}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .glass::after{opacity:.45}}
/* Snapshot picker lives deep on the page, inside a closed details element */
.picker{position:relative;top:auto;z-index:auto;margin:8px 0 0}
.more{margin-top:28px}.more[hidden]{display:none}
.more .mh{margin:0;font-family:var(--sans);font-size:.8125rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* Search, page size and pager */
.tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;margin:0 0 14px}
.tools .picker,.foot .picker{margin:0}
.search{position:relative;display:flex;align-items:center;gap:8px;flex:1 1 220px;min-width:0;max-width:340px;min-height:36px;padding:0 14px;border-radius:999px;color:var(--muted)}
.search::before{content:"";position:absolute;inset:-4px 0}
.search svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round}
.search input{flex:1;width:100%;min-width:0;height:34px;padding:0;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:16px}
.search input::placeholder{color:var(--muted);opacity:1}
.search:focus-within{outline:3px solid var(--accent);outline-offset:3px}
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;margin-top:14px}
.foot[hidden]{display:none}
.tools[hidden]{display:none}
.count{margin:0;color:var(--muted);font-size:.875rem;font-variant-numeric:tabular-nums}
.pager[hidden]{display:none}
.pager button{min-width:36px}
.pager button:disabled{opacity:.4;cursor:default}
.pager .gap{padding:0 2px;font-style:normal;color:var(--muted)}
.tbl td.none{padding:28px 14px;text-align:center;color:var(--muted)}
@media(max-width:480px){.search{max-width:none}}
.tools .sizes{padding:4px}
.search{min-height:44px}
@media(max-width:480px){.sizes>span{position:static;width:auto;height:auto;overflow:visible;clip-path:none}}
/* Pull to refresh indicator (assets/pull.js) */
html{overscroll-behavior-y:contain}
html.ptr-lock{overflow:hidden;touch-action:none}
.ptr{position:fixed;z-index:12;left:50%;top:calc(env(safe-area-inset-top,0px) + 70px);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--ink);opacity:0;transform:translate(-50%,-56px);pointer-events:none;will-change:transform,opacity}
.ptr svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transform:rotate(var(--r,0deg))}
.ptr.back{transition:transform .25s ease-out,opacity .25s ease-out}
.ptr.ready{color:var(--accent)}
.ptr.busy svg{animation:spin .8s linear infinite}
/* Genre switcher under the title */
.genres{margin:22px 0 0}
.genres[hidden]{display:none}
.genres button{padding:0 14px;font-weight:600}
@media(max-width:480px){.genres{margin-top:16px}.genres button{padding:0 11px}}
/* Phone scale (v0.35.0, adjusted v0.37.0): smaller than desktop. Top bar is unchanged from desktop. Visible controls 33 px, hit area stays 44 px via ::before. Search text stays 16 px so iOS does not zoom. */
@media(max-width:600px){
body{font-size:.9375rem;line-height:1.5}
.btn,.text,.picker button,.cbtn{min-height:33px;font-size:.8125rem}
.btn{padding:0 15px}.picker button{padding:0 12px}.cbtn{padding:0 13px}
.btn::before,.text::before,.picker button::before,.cbtn::before{inset:-6px 0}
.hero{padding-top:calc(env(safe-area-inset-top,0px) + 92px)}
h1{font-size:1.625rem;margin-bottom:10px}
.status{padding:3px 10px;font-size:.75rem;margin-bottom:12px}
.picker{padding:4px;gap:4px;margin-bottom:14px}
.tools .sizes{padding:3px}
.picker span,.picker>span{font-size:.6875rem;padding:0 8px 0 10px}
.meta{font-size:.6875rem;margin-bottom:10px}
.note{font-size:.8125rem;margin:-2px 0 10px}
.search{min-height:40px;padding:0 13px;gap:6px}
.search svg{width:14px;height:14px}
.search input{height:32px}
.tools{gap:8px 10px;margin-bottom:10px}
.tbl{border-radius:16px}
.tbl th{padding:7px 10px;font-size:.625rem}
.tbl td{padding:8px 10px;font-size:.875rem}
.tbl .nm{font-size:.875rem}
.tbl td.st{font-size:.9375rem}
.tbl .c-rk{width:2.25rem}.tbl .c-st{width:6.5rem}
.plogo{width:56px;height:auto}
.av{width:44px;height:44px}
.mono{font-size:.8125rem}
.mdl{width:20px;height:20px;font-size:.6875rem}
.count{font-size:.75rem}
.consent{padding:10px 12px;border-radius:20px;left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));bottom:calc(env(safe-area-inset-bottom,0px) + 10px)}
.consent h2{font-size:.875rem}
.consent p{font-size:.75rem;margin-bottom:8px;line-height:1.4}
footer{padding:28px 0 40px;font-size:.8125rem}
.ver{font-size:.6875rem}
.empty{padding:16px}.empty h3{font-size:1rem}
}
.tbl td.st.nodata{color:var(--muted);font-weight:500}
/* Genre without working data yet (genre.pending): the table panel is dark and dimmed so it reads as not working (owner request, v0.48.0) */
.tbl.glass.pending{background:rgba(70,60,105,.24)}
:root[data-theme=dark] .tbl.glass.pending{background:rgba(150,140,185,.12)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .tbl.glass.pending{background:rgba(150,140,185,.12)}}
.tbl.pending thead th,.tbl.pending td.rk,.tbl.pending td.st,.tbl.pending .av,.tbl.pending .nm{opacity:.6;filter:grayscale(1)}
@media(prefers-contrast:more){.tbl.pending thead th,.tbl.pending td.rk,.tbl.pending td.st,.tbl.pending .av,.tbl.pending .nm{opacity:.85}}
/* Headings use SF Pro Rounded for now (owner request, v0.53.0). To bring Neue Machina back: set --display to var(--display-neue) in :root (the @font-face rules and font files are kept) and restore the NeueMachina preloads marked "neue-revert" in the HTML heads. */
/* unverified artists (owner decision, v0.58.0, restyled v0.63.0 and v0.64.0): a red glossy pill with a small "!" mark and white text. Wider than 700 px it sits to the right of the name on one line (no wrap). On phones it shows the short text "Not verified" on the same line as the Spotify link, so the row keeps the height of every other row (full text in the title). The pending dimming above skips .flag so the red stays red */
.av{flex:none}
.tbl .flag{position:relative;flex:none;box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;width:max-content;padding:4px 12px 4px 7px;border-radius:999px;background:linear-gradient(180deg,#FF5A70 0%,#F0173A 55%,#D90E2E 100%);border:1px solid rgba(255,255,255,.38);color:#fff;font-size:.75rem;font-weight:650;letter-spacing:.01em;line-height:1.2;white-space:nowrap;text-shadow:0 1px 1px rgba(110,0,18,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 4px rgba(120,0,20,.25),0 3px 10px -3px rgba(240,23,58,.65)}
.tbl .flag::before{content:"!";flex:none;display:grid;place-items:center;width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.95);color:#E5142F;font-size:.6875rem;font-weight:800;line-height:1;text-shadow:none}
.tbl .flag .fs{display:none}
@media(max-width:700px){.tbl .info{display:contents}.tbl .wh{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:8px;row-gap:0;align-items:center}.tbl .wh .av{grid-column:1;grid-row:1/3;margin-right:2px}.tbl .wh .nm{grid-column:2/4;grid-row:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tbl .wh.hasfl .nm{grid-column:2}.tbl .wh .lks{grid-column:2/4;grid-row:2}.tbl .wh .flag{grid-column:3;grid-row:1;justify-self:end;gap:4px;padding:2px 8px 2px 4px;font-size:.625rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 6px -2px rgba(240,23,58,.6)}.tbl .wh .flag::before{width:11px;height:11px;font-size:.5625rem}.tbl .flag .fl{display:none}.tbl .flag .fs{display:inline}}
/* artist links (v0.61.0, buttons since v0.66.0): the name links to Pandora; under it two small glass pill buttons, Spotify and Pandora, each only when the link exists. Glass-flat (no refraction filter per row), 44 px hit area through ::before */
.tbl .lks{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:4px}
.tbl .lk{display:inline-flex;align-items:center;gap:4px;min-height:22px;padding:0 9px;border-radius:999px;font-size:.75rem;font-weight:500;line-height:1;color:var(--ink);text-decoration:none;white-space:nowrap;transition:transform 100ms ease-out}
.tbl .lk::before{content:"";position:absolute;inset:-11px -2px}
.tbl .lk svg{flex:none;width:8px;height:8px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.6}
.tbl .lk:active{transform:scale(.97)}
@media(max-width:700px){.tbl .lks{gap:5px;margin-top:3px}.tbl .lk{min-height:20px;padding:0 8px;font-size:.6875rem}.tbl .lk::before{inset:-12px -2px}}
/* phones: the listeners column is a little narrower and the buttons drop the arrow so Spotify and Pandora sit side by side in one line (they stack on screens under about 350 px) */
@media(max-width:480px){.tbl .c-st{width:5.75rem}.tbl .lks{gap:4px}.tbl .lk{padding:0 7px}.tbl .lk svg{display:none}}
/* phones, less crowded rows (owner request, v0.68.0): smaller quieter buttons, more air between name and buttons, a little more row padding, a slightly smaller picture */
@media(max-width:700px){.tbl td{padding-top:13px;padding-bottom:13px}.tbl .lks{margin-top:6px}.tbl .lk{min-height:18px;padding:0 7px;font-size:.625rem;font-weight:500;color:var(--muted)}.tbl .wh .av{width:40px;height:40px}}
/* table header (owner requests v0.67.0 and v0.69.0): the full label "28-day listeners on Pandora" in two lines everywhere. Wide screens: "28-day listeners on" on line 1, the Pandora logo on line 2. Phones: "28-day listeners" on line 1, "on" plus the logo on line 2. The # and the rank numbers are centered in their column so the # sits over the medal and the digits */
.tbl .c-rk,.tbl td.rk,.tbl th.c-rk{text-align:center;padding-left:0;padding-right:0}
.tbl .og{display:contents}.tbl .og .plogo{display:block;margin:3px 0 0 auto}
@media(min-width:481px){.tbl .c-st{width:10.5rem;white-space:nowrap}}
@media(max-width:480px){.tbl .c-st{white-space:normal}.tbl .og{display:inline-block;white-space:nowrap}.tbl .og .plogo{display:inline-block;margin:0 0 0 2px}.tbl th.c-st{font-size:.5625rem;letter-spacing:.03em;padding-left:6px;padding-right:8px}.tbl .c-st{width:6.5rem}}
/* coverage cards (owner request, v0.70.0): "Has data" and "Verified" as value / total with a thin bar, two glass-flat cards between the meta line and the search row */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 14px}
.stats[hidden]{display:none}
.stat{display:grid;gap:5px;padding:11px 16px 13px;border-radius:18px}
.stat .k{font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.stat .v{font-size:1.25rem;font-weight:650;line-height:1.2;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.stat .of{font-size:.875rem;font-weight:500;color:var(--muted);letter-spacing:0}
.stat .bar{height:4px;border-radius:999px;overflow:hidden;background:color-mix(in srgb,var(--ink) 10%,transparent)}
.stat .bar i{display:block;width:100%;height:100%;border-radius:inherit;background:var(--accent);transform-origin:left center}
@media(max-width:700px){.stats{gap:8px;margin-bottom:12px}.stat{gap:4px;padding:9px 12px 11px;border-radius:16px}.stat .v{font-size:1.0625rem}.stat .of{font-size:.75rem}.stat .k{font-size:.625rem}}
/* Motion (owner request, v0.73.0): springs live in assets/motion.js, only transform and opacity are animated. The CSS transitions and :active scales of the controls are handed over to it (html.mo), the rules above stay as the fallback when the script does not run. */
.mo a,.mo button,.mo .search{touch-action:manipulation}
.mo .link,.mo .btn,.mo .text,.mo .picker button,.mo .theme,.mo .cbtn,.mo .tbl .lk{transition:none}
.mo .link:active,.mo .btn:active,.mo .picker button:active,.mo .theme:active,.mo .cbtn:active,.mo .tbl .lk:active{transform:none}
.mo .av{touch-action:pan-y;cursor:grab;-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}
.mo .av.drag{position:relative;z-index:3;cursor:grabbing}
/* table row lens: one highlight that glides between rows (translate only), clipped by the rounded panel; the tap ripple lives inside it */
.tbl .rl{position:absolute;z-index:0;left:0;top:0;width:100%;height:0;overflow:hidden;pointer-events:none;opacity:0;background:color-mix(in srgb,var(--accent) 12%,transparent)}
.tbl .rl i{position:absolute;width:180px;height:180px;margin:-90px 0 0 -90px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 42%,transparent),transparent 68%)}
.tbl table{position:relative;z-index:1}
/* segmented controls: one indicator slides to the chosen button (same look the chosen button had) */
.picker.sgd button[aria-pressed=true],.picker.sgd button[aria-current=page]{background:transparent;box-shadow:none}
.picker.sgd button{position:relative;z-index:1}
.picker .sg{position:absolute;left:0;top:0;z-index:0;display:none;border-radius:999px;pointer-events:none;background:color-mix(in srgb,var(--surface) 55%,transparent);box-shadow:inset 1px 1px 1px -.5px rgba(255,255,255,.9),inset 0 0 10px -4px rgba(255,255,255,.6),0 2px 8px -3px rgba(10,14,36,.3)}
@media(prefers-reduced-transparency:reduce){.picker .sg{background:var(--surface)}}
@media(prefers-contrast:more){.picker .sg{outline:2px solid var(--ink);outline-offset:-2px}}
/* settwor pages, history table (v0.81.0): reuses the .tbl glass panel inside .doc, so the plain .doc table rules are switched off here */
.doc .tbl{margin:12px 0 4px}.doc .tbl table{max-width:none;margin:0}
.doc .tbl th,.doc .tbl td{border:0;border-bottom:1px solid var(--line);color:var(--ink)}.doc .tbl th{color:var(--muted)}.doc .tbl tbody tr:last-child td{border-bottom:0}
.doc .tbl td .of{font-size:.8125rem;color:var(--muted);font-variant-numeric:tabular-nums}
.tbl.hist .c-rk{width:4.5rem}.tbl.hist .c-st{width:8.5rem;white-space:normal}.tbl.hist td.rk{font-weight:600;color:var(--ink)}
@media(max-width:480px){.tbl.hist .c-rk{width:3.75rem}.tbl.hist .c-st{width:6.5rem}.tbl.hist th{font-size:.5625rem;letter-spacing:.05em;padding-left:8px;padding-right:8px}.tbl.hist td{padding-left:8px;padding-right:8px}}
/* Per page control (v0.82.1): no sideways scrolling or rubber-band on touch screens, and it fits 320 px wide screens */
.picker.sizes{overflow:hidden;overscroll-behavior:none}
@media(max-width:360px){.picker.sizes button{padding:0 9px}.picker.sizes>span{padding:0 6px 0 8px}}
/* Whole row opens the artist page (v0.82.2) */
.tbl tr.go{cursor:pointer}

/* Large warning for a genre that is unlocked but still raw (genre.devwarn, owner request, v0.84.0). Glass panel, red edge, no opacity animation */
.devwarn{margin:0 0 16px;padding:18px 20px 20px;border-radius:20px;border-left:6px solid #d92d3a}
.devwarn[hidden]{display:none}
.devwarn strong{display:block;margin:0 0 6px;font-size:1.5rem;line-height:1.2;font-weight:700;letter-spacing:.01em;text-transform:uppercase;color:var(--ink)}
.devwarn p{margin:0;font-size:1.125rem;line-height:1.5;font-weight:500;color:var(--ink)}
@media(max-width:700px){.devwarn{padding:14px 16px 16px;border-radius:16px;border-left-width:5px}.devwarn strong{font-size:1.25rem}.devwarn p{font-size:1rem}}

/* Owner request v0.86.0: bolder logo text; hidden status chip; on a phone the "Per page" control moves under the table and pager (desktop unchanged) */
.brand{font-weight:700}
.status[hidden]{display:none}
@media(max-width:700px){
.rks{display:flex;flex-direction:column}
.tools{display:contents}
.rks>.search,.tools .search{flex:none;margin:0 0 12px}
.rks .sizes{order:1;align-self:flex-start;margin:14px 0 0}
.rks>.empty,.rks>.more,.rks>noscript{order:2}
}

.stat{align-content:start}

/* v0.89.0 (owner request): more room between the elements of the ranking page, nothing squeezed. Scoped to the home page (.rks / .hero), artist pages are untouched */
.hero{padding-bottom:32px}
.genres{margin-top:26px}
.rks .meta{margin-bottom:20px}
.rks .stats{gap:14px;margin-bottom:24px}
.rks .stat{gap:8px;padding:16px 20px 18px}
.rks .tools{gap:14px 18px;margin-bottom:20px}
.rks .tbl th{padding:14px 16px}
.rks .tbl td{padding:15px 16px}
.rks .foot{margin-top:22px;gap:14px 18px}
.rks .more{margin-top:36px}
@media(max-width:700px){
h1{margin-bottom:16px}
.genres{margin-top:22px}
.hero{padding-bottom:20px}
.rks .meta{margin-bottom:16px;line-height:1.6}
.rks .stats{gap:12px;margin-bottom:20px}
.rks .stat{gap:7px;padding:14px 16px 16px}
.rks>.search,.rks .tools .search{margin-bottom:18px}
.rks .tbl th{padding:12px 10px}
.rks .tbl td{padding:17px 10px}
.rks .foot{margin-top:20px}
.rks .sizes{margin-top:20px}
.rks .more{margin-top:30px}
}

/* v0.90.0 (owner request): on a phone the text starts a bit lower, so the fixed header does not crowd it (home page and text pages) */
@media(max-width:700px){
.hero,.doc{padding-top:calc(env(safe-area-inset-top,0px) + 120px)}
}

/* v0.93.0 (owner request, "All" froze the iPhone): in a long list (class big, set by assets/app.js) the small link buttons keep their look but lose the blur behind them and the large soft shadow, which were thousands of extra layers */
.tbl.big .lk.glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:color-mix(in srgb,var(--surface) 60%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 2px rgba(10,14,36,.1)}
.rks{overflow-anchor:none}

/* v0.96.0 (owner request), redesigned in v0.98.0: on phones the count and the page buttons are the last row of the table panel (app.js moves #foot into #tbl). Wider screens are unchanged. */
@media(max-width:700px){
.tbl .foot,.rks .tbl .foot{position:relative;z-index:1;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:4px;margin:0;padding:8px 10px 10px;border-top:1px solid var(--line)}
.tbl .foot[hidden]{display:none}
.tbl .foot .count{order:1;margin:0;text-align:center;font-size:.6875rem;line-height:1.2;color:var(--muted)}
.tbl .foot .pager{order:2;display:flex;align-items:center;justify-content:space-between;gap:0;width:100%;max-width:none;margin:0;padding:0;overflow:visible;background:transparent;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.tbl .foot .pager::after{display:none}
.tbl .foot .pager button{flex:none;min-width:40px;min-height:40px;padding:0 10px;font-size:.9375rem}
.tbl .foot .pager button[aria-current=page]{padding:0;width:40px}
.tbl .foot .pager .gap{padding:0}
}
/* v0.98.0: font gate, see assets/theme.js. visibility only, never opacity (glass blur) */
.fw body{visibility:hidden}