/* ─── Design tokens ─────────────────────────────────────────────
   Colours, type and spacing for the whole site. Light theme first,
   dark theme (switched on with the header button) below. --signal is the one accent: meters, #1 ranks,
   the lowest price. Everything else stays neutral.               */
:root{
  color-scheme:light;
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#E9E9E5;
  --ink:#161615;
  --ink-2:#3A3A37;
  --muted:#5E5E59;
  --rule:#DCDCD7;
  --rule-strong:#8A8A84;       /* control borders: 3:1 against the page */
  --signal:#3D9BE0;            /* the light-blue accent: markers, #1 ranks, active tabs */
  --signal-text:#1F7BC0;       /* the accent as small text (a deeper blue, so it stays readable) */
  --signal-soft:#E6F2FB;
  --meter:#3D9BE0;             /* light blue: rating bars and the database counts */
  --led-off:#E3E3DE;
  --display-bg:#171716;        /* the hardware-style readout panel */
  --display-ink:#3D9BE0;
  --display-dim:#8F8F87;
  --free:#1E7446;
  --focus:#161615;
  --cmp-a:#2F86CF;             /* compared plugins (Compare page): blue, orange, green */
  --cmp-b:#D9711F;
  --cmp-c:#23935D;
  --display:"Archivo",ui-sans-serif,system-ui,sans-serif;
  --body:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Martian Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --head-h:60px;
  --gutter:24px;
  /* Corners (design pass 2026-10-06): controls and tags are pills; everything else uses these. */
  --r-sm:8px;                  /* thumbnails, small boxes */
  --r-md:12px;                 /* cards, video thumbnails, text boxes */
  --r-lg:16px;                 /* product image, panels, Discover card */
  --shadow-1:0 1px 2px rgba(20,20,18,.06),0 6px 18px rgba(20,20,18,.07);
  --shadow-2:0 2px 4px rgba(20,20,18,.07),0 14px 32px rgba(20,20,18,.12);
  --frame:#E2E2DC;             /* the panel product screenshots sit on, like gear in a rack */
  --frame-hi:#F1F1ED;
  --shot-shadow:drop-shadow(0 6px 14px rgba(20,20,18,.22));
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#131312; --surface:#1C1C1A; --surface-2:#262624; --ink:#EDEDE8; --ink-2:#C8C8C0; --muted:#9C9C94;
  --rule:#2E2E2B; --rule-strong:#6E6E68; --signal:#5CB8F5; --signal-text:#7CC6F7; --signal-soft:#13283A; --meter:#5CB8F5;
  --led-off:#2E2E2A; --display-bg:#0B0B0A; --display-ink:#5CB8F5; --display-dim:#85857D; --free:#5BC48A; --focus:#EDEDE8;
  --cmp-a:#5CB8F5; --cmp-b:#F29A52; --cmp-c:#4CC48A;
  --shadow-1:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.35);
  --shadow-2:0 2px 4px rgba(0,0,0,.45),0 14px 32px rgba(0,0,0,.5);
  --frame:#0E0E0D; --frame-hi:#1F1F1D; --shot-shadow:drop-shadow(0 6px 16px rgba(0,0,0,.6));
}
@media (max-width:600px){ :root{ --gutter:16px; --head-h:56px; } }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--head-h) + 64px);overflow-x:clip}  /* clip: full-bleed bars (100vw) never make the page scroll sideways */
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;font-variant-numeric:lining-nums}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.wrap{max-width:1320px;margin:0 auto;padding-inline:var(--gutter)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-variant-numeric:tabular-nums lining-nums}

/* Console-style labels: small mono caps, like the silk-screen on a channel strip. */
.lbl{font-family:var(--mono);font-stretch:75%;font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance}
.xl{font-stretch:125%;font-weight:800;letter-spacing:-.025em;line-height:.98}
.tape{display:inline-block;width:14px;height:4px;border-radius:2px;background:var(--c,var(--muted));flex:none}
.catlist .tape{width:9px;height:9px;border-radius:50%;justify-self:center}
.catlist a[aria-current="true"] .tape{box-shadow:0 0 0 2px var(--bg)}

/* ─── Header ─── */
.topbar{position:sticky;top:0;z-index:30;background:var(--bg)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .topbar{background:color-mix(in srgb,var(--bg) 57%,transparent);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}
}
.topbar .wrap{display:flex;align-items:center;gap:24px;height:var(--head-h)}
.logo{display:flex;align-items:center;color:var(--ink);text-decoration:none;line-height:0}
.logo-svg{display:block;height:28px;width:auto}
@media (max-width:600px){.logo-svg{height:24px}}
.nav{display:flex;align-items:stretch;gap:2px;margin-left:auto;height:100%}
.nav a{display:flex;align-items:center;text-decoration:none;color:var(--ink-2);padding:0 12px;font-weight:500;font-size:15px;border-bottom:3px solid transparent;margin-bottom:-1px}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--meter)}
/* Theme button: a knob that turns from min to max as the page scrolls (JS sets the pointer angle). */
.theme{width:36px;height:36px;border:0;padding:0;border-radius:50%;background:transparent;color:var(--ink-2);display:grid;place-items:center;cursor:pointer;flex:none}
.theme:hover{color:var(--ink);background:var(--surface-2)}
.theme svg{width:36px;height:36px;overflow:visible}
.nav a{white-space:nowrap}
@media (max-width:600px){.topbar .wrap{gap:10px}.nav a{padding:0 8px;font-size:14px}}
@media (max-width:420px){.topbar .wrap{gap:8px}.logo{flex:0 1 124px;min-width:0}.logo-svg{width:100%;height:auto;max-height:20px}.nav a{padding:0 5px;font-size:13px}}
@media (max-width:374px){.topbar .wrap{gap:6px}.nav a{padding:0 4px;font-size:12.5px}}

/* ─── Comparison tray (header), Compare button, Compare page ───
   The tray is a little in-tray: the plugins' pictures sit in it, behind its front lip. */
.tray-wrap{display:flex;align-items:center;gap:6px;flex:none;position:relative}
.tray-wrap[hidden]{display:none}
.tray{position:relative;display:block;width:56px;height:40px;border:1px solid var(--rule-strong);color:var(--ink);text-decoration:none;flex:none}
.tray:hover,.tray[aria-current="page"]{border-color:var(--ink)}
.tray svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tray .back{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.tray .front{fill:var(--bg);stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.tray .slots{position:absolute;left:0;right:0;top:9px;height:17px}
.tray .slot{position:absolute;top:0;width:14px;height:17px;overflow:hidden;background:var(--surface-2);outline:1px solid var(--ink);transform-origin:50% 100%}
.tray .slot:nth-child(1){left:11px;transform:rotate(-7deg)}
.tray .slot:nth-child(2){left:21px;top:-2px;transform:rotate(2deg)}
.tray .slot:nth-child(3){left:31px;transform:rotate(8deg)}
.tray .slot.empty{visibility:hidden}
.tray .slot img,.tray .slot svg,.tray .slot .spr{display:block;width:100%;height:100%;object-fit:cover;position:static}
.tray-clear{background:none;border:0;padding:4px 0;cursor:pointer;font-family:var(--mono);font-stretch:75%;font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.tray-clear:hover{color:var(--ink)}
@media (max-width:600px){
  .tray{width:46px;height:36px}
  .tray .slots{top:7px}.tray .slot{width:12px;height:15px}
  .tray .slot:nth-child(1){left:7px}.tray .slot:nth-child(2){left:16px}.tray .slot:nth-child(3){left:25px}
  .tray-clear{position:absolute;top:-7px;right:-7px;width:18px;height:18px;padding:0;border-radius:50%;background:var(--ink);color:var(--bg);text-decoration:none;font-size:0;display:grid;place-items:center}
  .tray-clear::before{content:"×";font-family:var(--body);font-size:14px;line-height:1;font-weight:600}
  .tray-clear[hidden]{display:none}
}
.cmp-fly{position:fixed;z-index:60;pointer-events:none;overflow:hidden;background:var(--surface-2);transform-origin:0 0;outline:1px solid var(--ink)}
.cmp-fly img,.cmp-fly svg,.cmp-fly .spr{display:block;width:100%;height:100%;object-fit:contain}

/* The Compare button: the one accent-coloured button on a plugin page. */
.btn.cmp{border-color:var(--signal-text);color:var(--signal-text);background:var(--signal-soft)}
.btn.cmp:hover:not(:disabled){background:var(--signal);border-color:var(--signal);color:#0B1A26}
.btn.cmp[aria-pressed="true"]{background:var(--signal);border-color:var(--signal);color:#0B1A26}
.btn.cmp:disabled{background:var(--surface-2);border-color:var(--rule-strong);color:var(--muted);opacity:1}
.btn.cmp .ti{width:20px;height:15px;flex:none}
.btn.cmp .ti path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.cmp-note{margin:10px 0 0;font-size:14px;color:var(--muted);min-height:1.5em}
.cmp-note a,.linkbtn{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.linkbtn{background:none;border:0;padding:0;font:inherit;cursor:pointer}

/* Compare page */
.cmp-page .eyebrow{display:flex;align-items:center;gap:10px;margin-top:18px}
.cmp-page h1{font-size:clamp(34px,5vw,60px);margin-top:10px}
.cmp-page .lede{color:var(--ink-2);font-size:17px;max-width:46rem;margin:12px 0 0}
.cmp-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}
.cmp-card{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:start;padding:16px 16px 14px;border:1px solid var(--rule);border-top:5px solid var(--k);background:var(--surface)}
.cmp-card .pic{display:block;aspect-ratio:5/3;background:var(--surface-2);overflow:hidden}
.cmp-card .pic img,.cmp-card .pic svg,.cmp-card .pic .spr{display:block;width:100%;height:100%;object-fit:contain}
.cmp-card h2{font-size:20px;font-stretch:112%;font-weight:750;letter-spacing:-.01em;line-height:1.1}
.cmp-card h2 a{color:inherit;text-decoration:none}
.cmp-card h2 a:hover{text-decoration:underline}
.cmp-card .m{margin:4px 0 0;font-size:14px;color:var(--muted)}
.cmp-card .s{margin:8px 0 0;font-size:14px;color:var(--ink-2)}
.cmp-card .s b{font-family:var(--mono);font-stretch:75%;font-weight:600;font-size:15px;color:var(--ink)}
.cmp-card .linkbtn{font-size:13px;margin-top:8px;color:var(--muted)}
.cmp-card.add{display:flex;flex-direction:column;justify-content:center;gap:4px;border:1px dashed var(--rule-strong);background:transparent;color:var(--ink);text-decoration:none;min-height:120px}
.cmp-card.add:hover{border-color:var(--ink)}
.cmp-card.add b{font-size:16px}
.cmp-card.add span{font-size:14px;color:var(--muted)}
.cmp-tools{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.venn-wrap{overflow-x:auto;margin-top:6px;padding-bottom:6px}
.venn{display:block;width:100%;margin:0 auto}
/* On phones the whole diagram is scaled to fit (pinch to zoom), and the keywords are also listed under it. */
.venn .c{fill:var(--k);fill-opacity:.1;stroke:var(--k);stroke-width:1.6}
:root[data-theme="dark"] .venn .c{fill-opacity:.16}
.venn .w{fill:var(--ink);font-family:var(--body);font-weight:500}
.venn .w.all{font-weight:700}
.venn .w.more{fill:var(--muted);font-style:italic}
.venn .nm{fill:var(--ink);font-family:var(--display);font-weight:750;font-stretch:112%;font-size:16px}
.venn .dot{fill:var(--k)}
.venn-lists{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:4px 28px;margin-top:18px}
.venn-lists > div{border-top:1px solid var(--rule);padding:10px 0}
.venn-lists h3{font-family:var(--mono);font-stretch:75%;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;margin:0 0 6px;display:flex;align-items:center;gap:8px}
.venn-lists h3 i{display:inline-flex;gap:2px}
.venn-lists h3 i b{width:9px;height:9px;border-radius:50%;background:var(--k)}
.venn-lists p{margin:0;font-size:15px;color:var(--ink-2)}
.venn-lists.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:720px){.venn-lists.sr{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}}
.cmp-cols{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));grid-template-rows:auto auto auto auto;column-gap:28px;margin-top:8px}
.cmp-col{display:grid;grid-row:span 4;grid-template-rows:subgrid;max-width:none;align-content:start}
.cmp-col > div{min-width:0}
.cmp-col-h{display:flex;align-items:center;gap:10px;padding:12px 0 10px;border-top:5px solid var(--k);border-bottom:1px solid var(--rule);margin-bottom:6px}
.cmp-col-h a{font-family:var(--display);font-stretch:112%;font-weight:750;font-size:20px;letter-spacing:-.01em;color:var(--ink);text-decoration:none;line-height:1.1}
.cmp-col-h a:hover{text-decoration:underline}
.cmp-col-h span{font-size:14px;color:var(--muted);margin-left:auto;text-align:right}
.cmp-col.prose p{font-size:15.5px;line-height:1.55}
.cmp-col.prose ul.pts li{font-size:15px}
.cmp-col h4.cap{font-family:var(--mono);font-stretch:75%;font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);margin:22px 0 12px;display:flex;align-items:center;gap:10px}
.cmp-col h4.cap::before{content:"";width:14px;height:4px;background:var(--signal)}
.cmp-col .said{margin-top:22px}
.cmp-empty{padding:56px 0 24px;max-width:40rem}
.cmp-empty svg{width:96px;height:auto;color:var(--ink);margin-bottom:18px}
.cmp-empty svg path{fill:none;stroke:currentColor;stroke-width:1.2;stroke-linejoin:round}
.cmp-empty .btn{margin-top:22px}
@media (max-width:900px){
  .cmp-cards{grid-template-columns:1fr}
  .cmp-cols{grid-template-columns:repeat(var(--n),minmax(78%,1fr));overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}
  .cmp-col{scroll-snap-align:start}
}

/* ─── Home: intro ─── */
.intro{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end;padding-block:28px 32px;border-bottom:1px solid var(--rule)}
.intro h1{font-size:clamp(34px,4vw,56px);max-width:11ch}
.readout{display:flex;color:var(--ink);align-self:end}
.readout > span{display:flex;flex-direction:column;gap:6px;padding:2px 18px;border-left:1px solid var(--rule)}
.readout > span:first-child{border-left:0;padding-left:0}
.readout > span:last-child{padding-right:0}
.roll .sep{display:block;height:1em;line-height:1}
/* Rolling digits: on first load each digit spins down to its value (see rollDigits) */
.roll{display:inline-flex;height:1em;overflow:hidden;vertical-align:top}
.roll .d{display:block;height:1em;overflow:hidden}
.roll .d > span{display:flex;flex-direction:column;transform:translateY(0);transition:transform 1.6s cubic-bezier(.16,1,.3,1);transition-delay:var(--dl,0ms)}
.roll .d > span > span{display:block;height:1em;line-height:1}
.roll .d.go > span{transform:translateY(calc(var(--n) * -1em))}
.readout b{font-family:var(--mono);font-stretch:75%;font-weight:500;font-size:clamp(24px,2.6vw,34px);line-height:1;letter-spacing:-.02em}
.readout i{font-style:normal;font-family:var(--mono);font-stretch:75%;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
@media (max-width:760px){.intro{grid-template-columns:1fr;padding-block:28px 24px;gap:22px}.readout{justify-self:start}}

/* ─── Home: the console (each category's #1 as a channel strip) ─── */
.console{padding-block:22px 8px}
.sec-bar{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
.sec-bar h2{font-size:22px;font-weight:700;font-stretch:112%;letter-spacing:-.01em}
.strips-nav{display:flex;gap:6px}
/* The #1 row's arrows sit on top of the row, centred vertically on the cards; each one hides at its end of the row. */
.strips-wrap{position:relative}
.sbtn{position:absolute;top:calc(50% - 5px);transform:translateY(-50%);z-index:3;width:40px;height:40px;box-shadow:var(--shadow-2);transition:opacity .18s ease,visibility .18s}
.sbtn.prev{left:8px}.sbtn.next{right:8px}
/* See-through like the header bar (same tint and blur). */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sbtn{background:color-mix(in srgb,var(--bg) 57%,transparent);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}
}
.sbtn.off{opacity:0;visibility:hidden;pointer-events:none}
.sq{width:36px;height:36px;border:1px solid var(--rule-strong);border-radius:50%;background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer;font-size:18px;line-height:1}
.sq:hover:not(:disabled){border-color:var(--ink)}
.sq:disabled{opacity:.35;cursor:default}
.strips{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;gap:12px;padding:6px 2px 16px;scroll-padding-inline:2px;scrollbar-width:none;--fl:0px;--fr:56px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%)}
/* No scroll bar on the #1 plugins row: it scrolls with the arrow buttons, a trackpad/touch swipe or shift+wheel. */
.strips::-webkit-scrollbar{display:none}
.strips.at-start{--fl:0px}.strips:not(.at-start){--fl:40px}.strips.at-end{--fr:0px}
.strip{flex:0 0 164px;scroll-snap-align:start;display:flex;flex-direction:column;background:var(--surface);text-decoration:none;color:inherit;min-width:0;border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden;box-shadow:0 1px 2px rgba(20,20,18,.04)}
.strip:hover{border-color:var(--rule-strong);box-shadow:var(--shadow-2);transform:translateY(-2px)}
.strip .ss{display:block;border-top:4px solid var(--c);padding:8px 10px 7px;border-bottom:1px solid var(--rule);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strip .pic{display:block;aspect-ratio:4/3;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,var(--frame-hi),var(--frame));border-bottom:1px solid var(--rule)}
.strip .pic img,.strip .pic svg,.strip .pic .spr{display:block;width:100%;height:100%;object-fit:cover}
.strip .pic img{object-fit:contain;padding:8px;filter:var(--shot-shadow)}
.strip .body{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;padding:0 10px 12px;margin-top:auto}
.strip .val{display:flex;flex-direction:column;justify-content:flex-end;gap:2px}
.strip .val b{font-family:var(--display);font-stretch:125%;font-weight:800;font-size:30px;line-height:1;letter-spacing:-.03em}
.strip .name{padding:12px 10px 14px}
.strip .name strong{display:block;font-weight:650;font-size:14px;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.strip .name span{display:block;font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strip:hover .name strong{text-decoration:underline;text-underline-offset:3px}

/* Meter: 10 segments from 5.0 to 10.0, half a point each. The number is always printed beside it. */
.meter{display:inline-flex;gap:2px;align-items:center}
.meter i{display:block;width:5px;height:14px;background:var(--led-off);border-radius:1.5px}
.meter i.on{background:var(--meter)}
.meter.v{flex-direction:column-reverse;gap:2px}
.meter.v i{width:22px;height:4px}
.meter.lg i{width:12px;height:26px;border-radius:2px}
@media (max-width:420px){.meter.lg i{width:9px}}
@media (prefers-reduced-motion:no-preference){
  .meter.anim i.on{animation:lamp .01s both;animation-delay:calc(var(--i) * 45ms)}
  @keyframes lamp{from{background:var(--led-off)}to{background:var(--meter)}}
}

/* ─── Category page header ─── */
.cathead{margin-top:20px;padding:26px 28px 28px;border-radius:22px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;
  /* "Liquid glass" panel: soft blobs of the category colour behind a frosted, lit pane. */
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(135deg,color-mix(in srgb,var(--c) 15%,var(--bg)),color-mix(in srgb,var(--c) 5%,var(--bg)) 70%);
  border:1px solid color-mix(in srgb,#fff 60%,var(--c));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 color-mix(in srgb,var(--c) 22%,transparent),inset 0 0 0 1px rgba(255,255,255,.25)}
.cathead::before{content:"";position:absolute;inset:-30%;z-index:-2;pointer-events:none;
  background:radial-gradient(38% 55% at 18% 30%,color-mix(in srgb,var(--c) 55%,transparent),transparent 70%),
    radial-gradient(30% 50% at 82% 75%,color-mix(in srgb,var(--c) 45%,transparent),transparent 70%),
    radial-gradient(26% 40% at 60% 10%,color-mix(in srgb,var(--c) 30%,#fff),transparent 70%);
  filter:blur(36px);opacity:.75}
.cathead::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.62) 0,rgba(255,255,255,.18) 38%,rgba(255,255,255,0) 55%),
    linear-gradient(115deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.35) 50%,rgba(255,255,255,0) 60%);
  -webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%)}
:root[data-theme="dark"] .cathead{background:linear-gradient(135deg,color-mix(in srgb,var(--c) 26%,var(--bg)),color-mix(in srgb,var(--c) 8%,var(--bg)) 70%);
  border-color:color-mix(in srgb,#fff 16%,var(--c) 30%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.35)}
:root[data-theme="dark"] .cathead::before{opacity:.7;background:radial-gradient(38% 55% at 18% 30%,color-mix(in srgb,var(--c) 60%,transparent),transparent 70%),
    radial-gradient(30% 50% at 82% 75%,color-mix(in srgb,var(--c) 45%,transparent),transparent 70%)}
:root[data-theme="dark"] .cathead::after{background:linear-gradient(180deg,rgba(255,255,255,.14) 0,rgba(255,255,255,.04) 38%,rgba(255,255,255,0) 55%),
    linear-gradient(115deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.07) 50%,rgba(255,255,255,0) 60%)}
.cathead .crumbs{padding:0 0 14px}
.cathead h1{font-size:clamp(32px,4.4vw,56px)}
.cathead .tapebar{display:block;width:56px;height:6px;border-radius:3px;background:var(--c);margin-bottom:18px}
@media (max-width:700px){.cathead{grid-template-columns:1fr;padding:18px 18px 20px}}

/* ─── Browse: sidebar + results ─── */
.browse{display:grid;grid-template-columns:248px minmax(0,1fr);gap:40px;padding-block:28px 64px}
.facets{position:sticky;top:calc(var(--head-h) + 20px);align-self:start;max-height:calc(100vh - var(--head-h) - 36px);overflow-y:auto;overscroll-behavior:contain;padding-right:8px;scrollbar-width:thin}
@media (min-width:901px){.facets:not(.at-end){-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 48px),transparent)}}
.fgroup{border-top:1px solid var(--ink);padding:10px 0 16px}
.fgroup > summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:4px 0 8px}
.fgroup > summary::-webkit-details-marker{display:none}
.fgroup > summary::after{content:"+";font-family:var(--mono);font-size:14px;color:var(--ink)}
.fgroup[open] > summary::after{content:"−"}
.fgroup > .lbl{padding:4px 0 8px}
/* Desktop: the first filter group (Category) has no rule above it, and its label's capitals line up with the top of the search bar. */
@media (min-width:901px){.fgroup.fcat{border-top:0;padding-top:0}.fgroup.fcat > summary{padding-top:0;margin-top:-5px}}
.catlist{list-style:none;margin:0;padding:0}
.catlist .sub{padding:12px 0 4px}
/* Effects: only the first FX_SHOWN categories (plus the open one) until "Show all" is pressed. */
.catlist:not(.all-fx) li.xcat{display:none}
.catlist .more-li .morebtn{padding:6px 10px 0}
.catlist a{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:30px;padding:3px 10px;border-radius:999px;text-decoration:none;color:var(--ink-2);font-size:14px}
.catlist a:hover{background:var(--surface-2);color:var(--ink)}
.catlist a[aria-current="true"]{background:var(--ink);color:var(--bg);font-weight:600}
.catlist a[aria-current="true"] .oc{color:inherit;opacity:.75}
.oc{font-family:var(--mono);font-stretch:75%;font-size:11px;color:var(--muted)}
.opts{display:flex;flex-direction:column}
.opt{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:32px;cursor:pointer;font-size:14px;color:var(--ink-2);padding:2px 0}
.opt:hover{color:var(--ink)}
.opt input{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:0;border:1.5px solid var(--rule-strong);background:var(--surface);display:grid;place-items:center;cursor:pointer}
.opt input[type=radio]{border-radius:50%}
.opt input:checked{background:var(--ink);border-color:var(--ink)}
.opt input[type=checkbox]:checked::after{content:"";width:9px;height:5px;border-left:2px solid var(--bg);border-bottom:2px solid var(--bg);transform:translateY(-1px) rotate(-45deg)}
.opt input[type=radio]:checked::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--bg)}
.opt:has(input:checked){color:var(--ink);font-weight:600}
.msearch{width:100%;height:36px;border:1px solid var(--rule-strong);border-radius:999px;background:var(--surface);padding:0 14px;margin:2px 0 8px;font-size:14px}
.msearch:focus{outline:2px solid var(--focus);outline-offset:0}
.morebtn{background:none;border:0;padding:6px 0 0;cursor:pointer;font-size:13px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-align:left}
.sheet-head,.sheet-foot{display:none}

.results-col{min-width:0}
.searchbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end}
.qbox{position:relative}
.qbox input{width:100%;height:52px;border:1px solid var(--ink);background:var(--surface);padding:0 56px 0 22px;font-size:17px;border-radius:999px}
.qbox input::placeholder{color:var(--muted)}
.qbox input:focus{outline:2px solid var(--focus);outline-offset:2px}
.qbox kbd{position:absolute;right:18px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:11px;border:1px solid var(--rule-strong);border-radius:6px;color:var(--muted);padding:2px 7px;pointer-events:none}
.qbox input:focus + kbd,.qbox input:not(:placeholder-shown) + kbd{display:none}
@media (max-width:900px),(hover:none){.qbox kbd{display:none}.qbox input{padding-right:22px}}
.sortby{display:flex;flex-direction:column;gap:6px}
.sortby select{height:52px;border:1px solid var(--rule-strong);background-color:var(--surface);padding:0 42px 0 20px;font-size:15px;font-weight:600;appearance:none;-webkit-appearance:none;border-radius:999px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 24px) 23px,calc(100% - 19px) 23px;background-size:5px 5px;background-repeat:no-repeat}
.sortby select:focus{outline:2px solid var(--focus);outline-offset:2px}
.mtools{display:none}
.applied{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.applied:empty{display:none}
.achip{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 12px;border:1px solid var(--ink);border-radius:999px;background:var(--surface);font-size:13px;cursor:pointer}
.achip .k{color:var(--muted)}
.achip .x{font-size:15px;line-height:1}
.achip:hover{background:var(--ink);color:var(--bg)}
.achip:hover .k{color:inherit;opacity:.75}
.linkbtn{background:none;border:0;padding:4px 2px;min-height:32px;font-weight:600;font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.count{margin:16px 0 0;color:var(--muted);font-size:14px}
.count:empty{display:none}

/* Groups and rows */
.group{margin-top:28px}
.group-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.group-h h2{font-size:24px;font-weight:750;font-stretch:112%;letter-spacing:-.015em;display:flex;align-items:center;gap:12px}
.group-h h2 a{text-decoration:none}
.group-h h2 a:hover{text-decoration:underline;text-underline-offset:4px}
.group-h .see{font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
.group-h .see:hover{text-decoration:underline;text-underline-offset:3px}
.subhead .lbl{font-family:var(--mono);font-weight:500}
.subhead{display:flex;align-items:center;gap:12px;margin:26px 0 0;padding-bottom:8px;border-bottom:1px solid var(--ink)}
.rows{list-style:none;margin:0;padding:0}
.row{display:grid;grid-template-columns:56px 92px minmax(0,1.45fr) minmax(0,1.45fr) 128px 150px;align-items:center;gap:18px;padding:12px 8px;border-bottom:1px solid var(--rule);text-decoration:none;color:inherit}
.row .chips{max-height:24px;overflow:hidden;row-gap:12px;align-content:flex-start}   /* one line: tags that would wrap are hidden */
.row:hover{background:color-mix(in srgb,var(--surface-2) 45%,var(--surface));border-radius:var(--r-sm)}
.row:hover .nm strong{text-decoration:underline;text-underline-offset:3px}
.rk{display:flex;flex-direction:column;gap:2px}
.rk b{font-family:var(--display);font-stretch:125%;font-weight:800;font-size:28px;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.rk b.top{color:var(--signal)}
.rk .newpill{justify-self:start;font-family:var(--mono);font-stretch:75%;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--signal-text);background:var(--signal-soft);border-radius:999px;padding:4px 9px}
.thumb{width:92px;height:58px;overflow:hidden;display:block;background:var(--surface-2);border-radius:var(--r-sm)}
.thumb svg,.thumb img,.thumb .spr{display:block;width:100%;height:100%;object-fit:cover}
.spr{display:block;width:100%;height:100%;background-repeat:no-repeat}
.nm{min-width:0}
.nm > strong{display:block;font-size:17px;font-weight:650;line-height:1.25}
.nm > span{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.chips{display:flex;flex-wrap:wrap;gap:4px 6px}
.chip{font-size:12px;padding:2px 9px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);white-space:nowrap;border:1px solid transparent}
button.chip{cursor:pointer;border-color:var(--rule-strong);background:transparent;min-height:28px;font-size:13px}
button.chip:hover{border-color:var(--ink);color:var(--ink)}
/* "Best for" and genre chips are pills everywhere (rounded, Apple-style); on plugin pages they get a little more room. */
.facts .chip{border-radius:999px;padding:2px 11px}
.facts span.chip{display:inline-flex;align-items:center;min-height:28px;font-size:13px;background:transparent;border-color:var(--rule-strong)}
.pr{text-align:right;font-variant-numeric:tabular-nums}
.pr b{display:block;font-weight:650;font-size:16px}
.pr span{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr .free{color:var(--free)}
.sc{display:flex;align-items:center;gap:10px;justify-content:flex-end;flex-wrap:wrap;row-gap:4px}
.cmc{font-family:var(--mono);font-stretch:75%;font-size:12px;color:var(--muted);text-decoration:underline;text-decoration-color:var(--rule-strong);text-underline-offset:3px;cursor:pointer;white-space:nowrap}
.cmc:hover,.cmc:focus-visible{color:var(--ink);text-decoration-color:currentColor}
.sc .cmc{flex-basis:100%;text-align:right}
.scoreblock .meta .cmc{align-self:flex-start;font-size:13px}
.scoreblock.un .cmc{margin-top:10px}
.sc b{font-family:var(--mono);font-stretch:75%;font-weight:600;font-size:16px;min-width:3ch;text-align:right}
.sc .un{font-family:var(--mono);font-stretch:75%;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);background:var(--surface-2);border-radius:999px;padding:4px 10px;white-space:nowrap}
@media (max-width:1100px){.row{grid-template-columns:48px 80px minmax(0,1fr) 120px 132px}.row .chips{display:none}.thumb{width:80px;height:50px}}
@media (max-width:640px){
  .row{grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:"rk nm pr" "rk nm sc";row-gap:4px;column-gap:12px;padding:12px 2px}
  .rk{grid-area:rk}.thumb{display:none}.nm{grid-area:nm}.pr{grid-area:pr}.sc{grid-area:sc}
  .rk b{font-size:22px}.sc .meter{display:none}
}

/* #1 in a category page: a larger feature row */
.lead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:28px;padding:22px 0 24px;border-bottom:1px solid var(--rule);text-decoration:none;color:inherit}
.lead .pic{display:block;aspect-ratio:5/3;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,var(--frame-hi),var(--frame));border-radius:var(--r-lg)}
.lead .pic img,.lead .pic svg,.lead .pic .spr{display:block;width:100%;height:100%;object-fit:cover}
.lead .pic img{object-fit:contain;padding:14px;filter:var(--shot-shadow)}
.lead .no{display:flex;align-items:center;gap:10px}
.lead .no b{font-family:var(--display);font-stretch:125%;font-weight:800;font-size:44px;line-height:1;color:var(--signal)}
.lead h3{font-size:clamp(24px,2.6vw,32px);font-stretch:118%;font-weight:800;letter-spacing:-.02em;line-height:1.05;margin-top:12px}
.lead .by{color:var(--muted);margin:6px 0 0;font-size:15px}
.lead p.d{margin:14px 0 0;color:var(--ink-2);max-width:60ch}
.lead .foot{display:flex;align-items:center;gap:18px;margin-top:18px;flex-wrap:wrap}
.lead .foot .big{font-family:var(--display);font-stretch:125%;font-weight:800;font-size:34px;line-height:1}
.lead .foot .big small{font-size:14px;color:var(--muted);font-weight:500;font-stretch:100%}
.lead:hover h3{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
@media (max-width:760px){.lead{grid-template-columns:1fr;gap:16px}}

.more{display:flex;justify-content:center;padding:26px 0 4px}
.empty{padding:56px 16px;text-align:center;color:var(--muted);border-bottom:1px solid var(--rule)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 22px;border:1px solid var(--ink);border-radius:999px;background:transparent;font-weight:650;font-size:15px;text-decoration:none;cursor:pointer;color:var(--ink)}
.btn:hover{background:var(--surface)}
.btn.primary{background:var(--ink);color:var(--bg)}
.btn.primary:hover{background:var(--ink-2);border-color:var(--ink-2)}
.btn .sub{font-weight:500;opacity:.75}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ─── Mobile filters: the sidebar becomes a sheet ─── */
@media (max-width:900px){
  .browse{grid-template-columns:minmax(0,1fr);gap:0}
  .mtools{display:flex;gap:8px;position:sticky;top:var(--head-h);z-index:15;background:var(--bg);padding:10px 0;margin-top:10px;border-bottom:1px solid var(--rule)}
  .mtools .btn{flex:1;min-height:44px}
  .searchbar{grid-template-columns:1fr}
  .searchbar .sortby{display:none}
  .facets{position:fixed;inset:0;z-index:50;max-height:none;align-self:stretch;height:100dvh;background:var(--bg);padding:0 var(--gutter);display:none;flex-direction:column;overflow:hidden}
  .facets.open{display:flex}
  .facets .fscroll{flex:1;overflow-y:auto;overscroll-behavior:contain;padding-bottom:12px}
  .sheet-head{display:flex;align-items:center;justify-content:space-between;height:var(--head-h);border-bottom:1px solid var(--ink);flex:none}
  .sheet-head strong{font-size:18px;font-stretch:112%}
  .sheet-foot{display:flex;gap:10px;padding:12px 0 calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--ink);flex:none;background:var(--bg)}
  .sheet-foot .btn{flex:1}
  .facets .sortgroup{display:block}
}
.sortgroup{display:none}
body.sheet-open{overflow:hidden}

/* ─── Plugin page ─── */
.crumbs{padding-block:22px 4px;font-size:14px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.p-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;padding-block:16px 36px;align-items:start}
@media (max-width:900px){.p-hero{grid-template-columns:1fr;gap:24px}}
.gallery{display:flex;flex-direction:column;gap:10px;min-width:0}
@media (min-width:901px){.gallery{position:sticky;top:calc(var(--head-h) + 24px)}}
.stage{overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,var(--frame-hi),var(--frame));aspect-ratio:5/3;max-width:100%;border-radius:var(--r-lg)}
.stage.plot{background:var(--surface);border:1px solid var(--rule)}
.stage svg,.stage img,.stage .spr{display:block;width:100%;height:100%;object-fit:contain}
.stage img{padding:clamp(12px,2vw,20px);filter:var(--shot-shadow)}
.stage.photo img{object-fit:cover;padding:0;filter:none}
.shots{display:flex;gap:8px}
.shot{width:96px;height:58px;overflow:hidden;border:2px solid transparent;border-radius:var(--r-sm);padding:0;background:var(--surface-2);cursor:pointer;outline-offset:2px}
.shot.plot{background:var(--surface)}
.shot[aria-pressed="true"]{border-color:var(--ink)}
.shot svg,.shot img{display:block;width:100%;height:100%;object-fit:cover}
.caption{font-size:12px;color:var(--muted);margin:0}
.p-head .eyebrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.p-head h1{font-size:clamp(32px,4.2vw,54px);margin-top:14px}
.p-head .by{font-size:18px;color:var(--ink-2);margin:10px 0 0}
.p-head .by a{text-decoration:none;border-bottom:1px solid var(--rule-strong)}
.p-head .by a:hover{border-bottom-color:var(--ink)}
.scoreblock{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 22px;align-items:center;margin-top:26px;padding:18px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.scoreblock .big{font-family:var(--display);font-stretch:125%;font-size:67px;font-weight:800;line-height:.9;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.scoreblock .big small{font-size:18px;color:var(--muted);font-weight:500;letter-spacing:0;font-stretch:100%;margin-left:4px}
.scoreblock .meta{display:flex;flex-direction:column;gap:10px;min-width:0}
.scoreblock .meta span{font-size:14px;color:var(--muted)}
.scoreblock.un{display:block}
.scoreblock.un strong{display:block;font-family:var(--display);font-stretch:112%;font-size:22px;margin-bottom:6px}
.scoreblock.un p{margin:0;color:var(--ink-2);font-size:15px;max-width:52ch}
@media (max-width:420px){.scoreblock .big{font-size:51px}}
.facts{margin:0}
.facts > div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:14px;align-items:baseline;min-height:44px;padding:10px 0;border-bottom:1px solid var(--rule)}
.facts dt{margin:0}
.facts dd{margin:0;font-size:15px}
.facts > div:last-child{border-bottom:0}
/* Keyword cloud (plugin page, under Genres): every keyword the same size, each in an outlined pill.
   Each keyword is a link to a database search for that word, so the pills look and behave like the "Best for" chips. */
.cloud{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.cloud li{display:flex}
.cloud a{white-space:nowrap;font-size:13px;line-height:1.2;color:var(--ink-2);background:transparent;border:1px solid var(--rule-strong);border-radius:999px;padding:5px 11px 6px;text-decoration:none}
.cloud a:hover{border-color:var(--ink);color:var(--ink)}
.cloud[data-open="false"] .x{display:none}
.kw .morebtn{padding-top:9px}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}

.subnav{position:sticky;top:var(--head-h);z-index:20;background:var(--bg)}
/* The line above the tabs spans the content width only (the bar's background stays full width). */
/* ...and it disappears once the bar reaches the header and sticks under it (.stuck, set in the plugin-page scroll handler). */
.subnav.stuck ul{border-top-color:transparent}
/* Once stuck, the header and the tab bar become one see-through bar: both drop their own backgrounds and one
   background (same tint and blur) sits behind the tabs and reaches up behind the header. */
body:has(.subnav.stuck) .topbar{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.subnav.stuck{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.subnav.stuck::before{content:"";position:absolute;inset:calc(-1 * var(--head-h)) 0 0 0;z-index:-1;pointer-events:none;background:var(--bg)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .subnav.stuck::before{background:color-mix(in srgb,var(--bg) 57%,transparent);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}
}
.subnav ul{border-top:1px solid var(--rule);list-style:none;margin:0;padding:0;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.subnav a{display:flex;align-items:center;height:48px;padding:0 12px;text-decoration:none;white-space:nowrap;font-size:14px;font-weight:550;color:var(--ink-2);border-bottom:3px solid transparent}
.subnav a:hover{color:var(--ink)}
.subnav a[aria-current="true"]{color:var(--ink);border-bottom-color:var(--signal)}
/* Full width like the header: the bar reaches both edges of the window, its tabs stay lined up with the page content. */
.subnav{margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%)}
/* See-through like the header bar (same tint and blur). */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .subnav{background:color-mix(in srgb,var(--bg) 57%,transparent);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}
}

.p-body{display:grid;grid-template-columns:minmax(0,46rem) 360px;justify-content:space-between;gap:56px;padding-block:8px 72px}
.p-body > * > .sec:first-child{padding-top:28px}
@media (max-width:1000px){.p-body{grid-template-columns:minmax(0,1fr);gap:0}}
.sec{padding-top:40px}
.sec > h2,.sec-head h2{font-size:28px;font-weight:750;font-stretch:112%;letter-spacing:-.015em;margin-bottom:6px}
.sec .sub{color:var(--muted);font-size:15px;margin:0 0 18px}
.prose{max-width:none}
.prose > h2{margin-bottom:18px}
.prose p{margin:0 0 14px;color:var(--ink-2);font-size:17px;line-height:1.6}
.prose ul.pts{margin:0 0 16px;padding:0;list-style:none;border-top:1px solid var(--rule)}
.prose ul.pts li{margin:0;padding:10px 0 10px 18px;border-bottom:1px solid var(--rule);color:var(--ink-2);font-size:16px;line-height:1.55;position:relative}
.prose ul.pts li::before{content:"";position:absolute;left:0;top:19px;width:8px;height:2px;background:var(--ink)}
.prose ul.pts b{font-weight:700;color:var(--ink)}
.prose h3{font-family:var(--mono);font-stretch:75%;font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);margin:30px 0 12px;display:flex;align-items:center;gap:10px}
.prose h3::before{content:"";width:14px;height:4px;background:var(--signal)}
.prose h3:first-of-type{margin-top:4px}
.prose .said{margin-top:30px;padding:22px 24px 12px;background:color-mix(in srgb,var(--surface-2) 45%,var(--surface));border-radius:var(--r-lg)}
.prose .said h4{font-family:var(--mono);font-stretch:75%;font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;margin:0 0 12px}
.prose .said ul.pts{border-top:0}
.prose .said ul.pts li:last-child{border-bottom:0}
.prose .cite{font-size:14px;color:var(--muted);margin:2px 0 0}
.prose .cite a,.prose .cite-list a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.prose .cite a:hover,.prose .cite-list a:hover{color:var(--ink)}
.prose .cite-list{list-style:none;margin:6px 0 8px;padding:0;font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 16px}

.aside{display:flex;flex-direction:column}
.aside .sec{padding-top:40px}
.aside .sec > h2{font-size:20px;margin-bottom:12px}
.buy{list-style:none;margin:0;padding:10px 0 0;border-top:1px solid var(--rule)}
.buy li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:14px 12px;border-bottom:1px solid var(--rule);align-items:baseline}
.buy .st{font-weight:650}
.buy .note{grid-column:1/-1;font-size:13px;color:var(--muted)}
.buy .p{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;font-size:18px}
.buy .p s{color:var(--muted);font-weight:400;font-size:14px;margin-right:6px}
.buy .p.see{font-weight:500;color:var(--muted);font-size:14px}
.buy a.go{grid-column:1/-1;font-size:13px;font-weight:500;color:var(--signal-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;margin-top:4px;justify-self:start;min-height:24px}
.buy a.go:hover{color:var(--ink)}
.buy .st{font-size:16px}
.buy li.best{background:var(--signal-soft);border-radius:var(--r-md);border-bottom-color:transparent}
/* Price history (2026-10-13): lowest price across the stores, last 12 months, above the store list.
   A step line (prices hold until they change), the accent colour, hairline grid, mono axis labels like the rest of the page. */
.phist{margin:0 0 18px;max-width:440px}
.ph-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.ph-tag{font-family:var(--mono);font-stretch:75%;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--rule-strong);border-radius:999px;padding:1px 7px}
.ph-plot{position:relative;border-radius:var(--r-sm);touch-action:pan-y;cursor:crosshair}
.ph-plot:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.phist svg{display:block;width:100%;height:auto;overflow:visible}
.phist .grid{stroke:var(--rule);stroke-width:1;shape-rendering:crispEdges}
.phist .ax{font-family:var(--mono);font-stretch:75%;font-size:10px;letter-spacing:.06em;fill:var(--muted)}
.phist .area{fill:var(--signal);fill-opacity:.10}
.phist .line{fill:none;stroke:var(--signal);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.phist .mk{fill:var(--signal);stroke:var(--bg);stroke-width:2}
.phist .val{font-family:var(--body);font-size:11.5px;font-weight:700;fill:var(--ink-2);font-variant-numeric:tabular-nums;paint-order:stroke;stroke:var(--bg);stroke-width:3px;stroke-linejoin:round}
.phist .xh{stroke:var(--ink-2);stroke-width:1;shape-rendering:crispEdges}
.phist .hov{display:none}
.ph-plot.on .hov{display:inline}
.ph-tip{position:absolute;top:-6px;transform:translate(-50%,-100%);background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:var(--r-sm);box-shadow:var(--shadow-1);padding:5px 9px;font-size:12px;line-height:1.3;white-space:nowrap;pointer-events:none}
.ph-tip b{display:block;font-size:15px;font-variant-numeric:tabular-nums}
.ph-tip span{color:var(--muted)}
.ph-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0 0;padding:0}
.ph-stats div{margin:0}
.ph-stats dt{margin:0 0 1px}
.ph-stats dd{margin:0;font-weight:700;font-size:17px;font-variant-numeric:tabular-nums}
.ph-stats dd small{display:block;font-weight:400;font-size:12px;color:var(--muted)}
@media (forced-colors:active){.phist .line{stroke:CanvasText}.phist .mk{fill:CanvasText}.phist .area{fill:none}}
.badge{font-family:var(--mono);font-stretch:75%;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--signal-text);margin-left:8px;background:color-mix(in srgb,var(--signal) 18%,transparent);border-radius:999px;padding:2px 8px;vertical-align:2px;font-weight:600}
.fine{font-size:13px;color:var(--muted);margin:10px 0 0}
.fine a{color:var(--ink);font-weight:600}

/* Where this plugin sits among the rated plugins in its category */
.pos{margin:4px 0 16px}
.pos .track{position:relative;height:56px;margin:0 8px;border-bottom:1px solid var(--ink-2)}
.pos .dotm{position:absolute;bottom:0;transform:translate(-50%,50%);width:14px;height:14px;border-radius:50%;background:var(--muted);border:2px solid var(--bg);display:block;box-sizing:border-box}
.pos .dotm{cursor:pointer}
.pos .dotm:hover{background:var(--ink);z-index:2}
.pos .dotm.me{width:20px;height:20px;background:var(--signal);z-index:1}
.pos .dotm .tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);font-size:12px;font-weight:600;padding:4px 7px;white-space:nowrap;pointer-events:none;opacity:0}
.pos .dotm:hover .tip{opacity:1}
.pos .dotm.me .tip{opacity:1;background:transparent;color:var(--ink);padding:0;bottom:calc(100% + 6px)}
.pos .dotm.me:hover .tip{background:transparent}
.pos .ticks{position:relative;height:22px;margin:0 8px}
.pos .ticks span{position:absolute;top:8px;transform:translateX(-50%);font-family:var(--mono);font-stretch:75%;font-size:11px;color:var(--muted)}

.related{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.related a{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:48px;padding:6px 8px;border-bottom:1px solid var(--rule);text-decoration:none}
.related a:hover strong{text-decoration:underline;text-underline-offset:3px}
.related .r{font-family:var(--mono);font-stretch:75%;color:var(--muted);font-size:12px}
.related strong{font-weight:650;font-size:14px;display:block;line-height:1.3}
.related span.m{font-size:12px;color:var(--muted)}
.related .s{font-family:var(--mono);font-stretch:75%;font-size:13px;font-weight:600}
.related a[aria-current="page"]{background:var(--ink);color:var(--bg)}
.related a[aria-current="page"] .r,.related a[aria-current="page"] span.m{color:inherit;opacity:.75}
/* Similar plugins (plugin page sidebar) */
.aside .sec > p.sub{margin:-6px 0 12px;font-size:13px;color:var(--muted)}
.similar{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.similar a{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 8px 8px 0;border-bottom:1px solid var(--rule);text-decoration:none;color:inherit}
.similar a:hover strong{text-decoration:underline;text-underline-offset:3px}
.similar .th{width:72px;height:46px;overflow:hidden;display:block;background:var(--surface-2);border-radius:var(--r-sm)}
.similar .th img,.similar .th svg,.similar .th .spr{display:block;width:100%;height:100%;object-fit:cover}
.similar strong{font-weight:650;font-size:14px;display:block;line-height:1.3}
.similar span.m{display:block;font-size:12px;color:var(--muted);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.similar .s{font-family:var(--mono);font-stretch:75%;font-size:13px;font-weight:700;line-height:1;color:var(--signal-text);background:var(--signal-soft);border-radius:999px;padding:4px 8px}
.similar .v{display:flex;flex-direction:column;align-items:flex-end;gap:5px;text-align:right}
.similar .sp{font-size:12.5px;font-weight:500;color:var(--ink-2);white-space:nowrap}
.similar .sp.free{color:var(--free)}

.vids{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:760px){.vids{grid-template-columns:1fr}}
.vid{display:flex;flex-direction:column;gap:10px;text-decoration:none;min-width:0}
.vid .tn{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--surface-2);border-radius:var(--r-md)}
.vid .tn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vid .tn .play{position:absolute;left:10px;bottom:10px;display:flex;align-items:center;gap:6px;background:var(--ink);color:var(--bg);font-family:var(--mono);font-stretch:75%;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:999px}
.vid .tn .ph{position:absolute;inset:0}
.vid .tn .ph svg{width:100%;height:100%;display:block}
.vid .t{font-weight:650;font-size:15px;line-height:1.35}
.vid .ch{font-size:13px;color:var(--muted)}
.vid:hover .t{text-decoration:underline;text-underline-offset:3px}
.novid{background:color-mix(in srgb,var(--surface-2) 45%,var(--surface));border-radius:var(--r-md);padding:20px;color:var(--ink-2)}
.novid a{font-weight:650}

.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.ig-nav{display:flex;gap:6px;margin-bottom:12px}
.igs{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;padding-bottom:0;scrollbar-width:none;align-items:flex-start}
.igs::-webkit-scrollbar{display:none}
/* Instagram row: same overlay arrows as the #1 row (.strips-wrap/.sbtn), centred on the posts. */
.ig-wrap .sbtn{top:50%}
.igs>*{flex:0 0 min(328px,86%);scroll-snap-align:start;min-width:0}
.igs .ig-frame{display:block;box-sizing:content-box;width:calc(100% - 2px);height:560px;border:1px solid var(--rule);border-radius:var(--r-md);background:#fff}
/* content-box: the height Instagram reports is the post's own height, the 1px border goes outside it (otherwise every post scrolled by 2px). */
@media (prefers-reduced-motion:reduce){.igs{scroll-behavior:auto}}
.ig-card{display:flex;flex-direction:column;gap:8px;padding:18px;border:1px solid var(--rule-strong);border-radius:var(--r-md);background:var(--surface);text-decoration:none;color:inherit;min-height:150px}
.ig-card .h{font-family:var(--mono);font-stretch:75%;font-size:12px;color:var(--muted)}
.ig-card .t{font-weight:650;font-size:17px;line-height:1.3;flex:1}
.ig-card .l{font-size:13px;font-weight:600}
.ig-card:hover{border-color:var(--ink)}
.ig-card:hover .t{text-decoration:underline;text-underline-offset:3px}
.rd-sent{margin:0 0 20px;padding:16px 18px;background:var(--surface);border-radius:var(--r-md)}
.rd-sent h3{margin:0 0 6px;font-size:13px;font-family:var(--mono);font-stretch:75%;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:600}
.rd-sent p{margin:0;font-size:16px;line-height:1.55}
.rd-sent p.m{margin-top:8px;font-size:12px;color:var(--muted)}
.rd-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.rd-list li{border-bottom:1px solid var(--rule)}
.rd-list a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:4px 16px;padding:14px 10px;margin-inline:-10px;border-radius:var(--r-sm);text-decoration:none;color:inherit}
.rd-list .t{font-weight:650;font-size:16px;line-height:1.35;min-width:0}
.rd-list .m{font-family:var(--mono);font-stretch:75%;font-size:12px;color:var(--muted);white-space:nowrap}
.rd-list a:hover{background:var(--surface)}
.rd-list a:hover .t{text-decoration:underline;text-underline-offset:3px}
@media (max-width:520px){.rd-list a{grid-template-columns:1fr}}

.community{border:1px solid var(--rule);border-radius:var(--r-lg);padding:24px;background:color-mix(in srgb,var(--surface-2) 30%,var(--surface))}
.cm-top{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.cm-top .avg{font-family:var(--display);font-stretch:125%;font-size:36px;font-weight:800;line-height:1;white-space:nowrap}
.cm-top .avg .none{color:var(--muted);font-weight:500}
.cm-top .avg small{font-size:14px;color:var(--muted);font-weight:500;margin-left:2px;font-stretch:100%}
.rt{flex:1 1 220px;min-width:0;max-width:420px;display:flex;flex-direction:column;gap:6px}
.rt-bar{position:relative;height:10px;background:var(--led-off);overflow:hidden;border-radius:3px}
.rt-bar i{position:absolute;inset:0 auto 0 0;background:var(--meter)}
.rt-bar::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 2px),var(--surface) calc(10% - 2px) 10%)}
.rt-scale{display:flex;justify-content:space-between;font-family:var(--mono);font-stretch:75%;font-size:11px;color:var(--muted)}
.cm-rate{margin-top:18px;display:flex;flex-direction:column;gap:8px}
.cm-rate .rt-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cm-rate input[type=range]{flex:1 1 200px;max-width:420px;min-width:0;accent-color:var(--signal);height:28px;margin:0;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
.cm-rate input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(90deg,var(--signal) 0 var(--v,50%),var(--led-off) var(--v,50%) 100%)}
.cm-rate input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:var(--led-off)}
.cm-rate input[type=range]::-moz-range-progress{height:6px;border-radius:999px;background:var(--signal)}
.cm-rate input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-7px;border-radius:50%;background:var(--surface);border:2px solid var(--signal);box-shadow:var(--shadow-1)}
.cm-rate input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--surface);border:2px solid var(--signal)}
.cm-rate input[type=range]:disabled{opacity:.6;cursor:not-allowed}
.cm-rate output{font-family:var(--mono);font-stretch:75%;font-size:15px;min-width:5ch}
.cm-top p{margin:0;color:var(--muted);font-size:14px}
.pill{font-family:var(--mono);font-stretch:75%;font-size:11px;text-transform:uppercase;letter-spacing:.08em;padding:4px 11px;border-radius:999px;background:var(--surface-2);color:var(--ink-2)}
.cm-form{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.cm-form textarea{min-height:88px;border:1px solid var(--rule-strong);border-radius:var(--r-md);background:var(--bg);padding:12px 14px;resize:vertical;width:100%}
.cm-form textarea:disabled{opacity:.6;cursor:not-allowed}
.cm-form .row2{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.cm-list{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--rule)}
.cm-list li{padding:12px 0;border-bottom:1px solid var(--rule);font-size:15px}
.cm-auth{margin-top:18px;display:flex;flex-direction:column;gap:8px}
.cm-auth .rt-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cm-auth input{flex:1 1 220px;max-width:360px;min-width:0;height:44px;border:1px solid var(--rule-strong);border-radius:999px;background:var(--bg);padding:0 18px;font-size:16px;color:var(--ink)}
.cm-auth input:focus,.cm-form textarea:focus{outline:2px solid var(--signal);outline-offset:1px}
.cm-auth .fine,.cm-rate .fine{margin:0}
.cm-ts:empty{display:none}
.cm-msg:empty{display:none}
.cm-acct{margin:16px 0 0}
.cm-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cm-meta .fine{margin:0}
.cm-sc{font-family:var(--mono);font-stretch:75%;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--ink);color:var(--bg)}
.cm-act{margin-left:auto;font-size:13px;color:var(--muted)}
.cm-body{margin-top:6px;white-space:pre-wrap;overflow-wrap:anywhere}
.cm-empty{color:var(--muted);font-size:14px;padding:14px 0 2px;margin:0}

.pager{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);margin-top:48px}
.pager a{display:flex;flex-direction:column;gap:4px;padding:18px 16px;background:var(--bg);text-decoration:none}
.pager a:hover{background:var(--surface)}
.pager a:hover strong{text-decoration:underline;text-underline-offset:3px}
.pager a.next{text-align:right;align-items:flex-end;grid-column:2}
.pager .gap{background:var(--bg)}
.pager.one{grid-template-columns:1fr}
.pager.one a.next{grid-column:1}
.pager strong{font-size:18px;font-stretch:112%;font-weight:700}

/* ─── Method page ─── */
.method{padding-block:40px 72px;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:64px}
@media (max-width:960px){.method{grid-template-columns:1fr;gap:24px}}
.method h1{font-size:clamp(32px,4.2vw,52px);margin:14px 0 22px;max-width:14ch}
.method h2{font-size:24px;font-weight:750;font-stretch:112%;margin:36px 0 10px}
.method p,.method li{color:var(--ink-2);max-width:44rem;font-size:17px;line-height:1.6}
.method h1 + p{font-size:20px;color:var(--ink);line-height:1.5}
.method p.lbl{font-size:12px;color:var(--muted)}
.method .weights{padding:0}
.method .weights li{max-width:none;font-size:15px;line-height:1.4}
.method ol,.method ul{padding-left:20px}
.weights{list-style:none;padding:0;margin:0;border-top:2px solid var(--ink)}
.weights li{display:grid;grid-template-columns:minmax(0,1fr) 52px;gap:8px 12px;padding:14px 0;border-bottom:1px solid var(--rule);font-size:15px;color:var(--ink)}
.weights .bar{grid-column:1/-1;display:flex;gap:2px}
.weights .bar i{display:block;flex:1;height:12px;background:var(--led-off);border-radius:2px}
.weights .bar i.on{background:var(--meter)}
.weights b{font-family:var(--mono);font-stretch:75%;font-weight:600;text-align:right}
.srcs{font-size:15px}
.srcs li{margin-bottom:6px}
.method aside .inner{position:sticky;top:calc(var(--head-h) + 24px)}
.about{grid-template-columns:minmax(0,1fr) 340px;align-items:start}
.about-stats{display:grid;gap:0;border-radius:var(--r-lg);background:color-mix(in srgb,var(--surface-2) 40%,var(--surface));padding:8px 24px;margin-top:22px}
.about-stats > span{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:18px 0;border-bottom:1px solid var(--rule)}
.about-stats > span:last-child{border-bottom:0}
.about-stats b{font-family:var(--mono);font-stretch:75%;font-weight:500;font-size:40px;line-height:1;letter-spacing:-.02em}
.about-stats i{font-style:normal;font-family:var(--mono);font-stretch:75%;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
@media (max-width:960px){.about-stats{margin-top:0}}
.about h1{margin-top:0}
/* Privacy Policy: one text column. */
.privacy{grid-template-columns:minmax(0,1fr)}
.privacy h1{margin-top:0;max-width:none}
.privacy a{color:inherit}
.privacy ul{margin:0 0 12px}
.privacy li{margin:0 0 8px}
.about a{color:inherit}

/* ─── Discover page: category bubbles + a deck of random plugin cards ─── */
.disc{padding-block:28px 72px}
.disc-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;padding-bottom:20px;border-bottom:1px solid var(--rule)}
.disc-head h1{font-size:clamp(34px,3.8vw,46px)}
.disc-head p{margin:10px 0 0;color:var(--ink-2);font-size:16px;max-width:60ch}
@media (max-width:760px){.disc-head{grid-template-columns:1fr;gap:18px}.disc-head .readout{display:none}}
.bubbles{display:flex;flex-wrap:wrap;gap:7px 6px;padding:16px 0 4px}
.bubble{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 12px 0 10px;border:1px solid var(--rule-strong);border-radius:999px;background:var(--surface);font-size:13.5px;font-weight:550;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.bubble .dot{width:9px;height:9px;border-radius:50%;background:var(--c,var(--ink));flex:none}
.bubble .oc{margin-left:2px}
.bubble:hover{border-color:var(--ink);color:var(--ink)}
.bubble[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.bubble[aria-pressed="true"] .oc{color:inherit;opacity:.7}
.bubble[aria-pressed="true"] .dot{box-shadow:0 0 0 2px var(--bg)}
@media (max-width:700px){
  .bubbles{display:grid;grid-template-rows:repeat(2,auto);grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
  .bubbles::-webkit-scrollbar{display:none}
}
.disc-stage{display:grid;grid-template-columns:minmax(0,560px);justify-content:center;padding-top:32px}
@media (min-width:900px){.disc-stage{grid-template-columns:minmax(0,940px)}}
.deck{position:relative;display:grid;touch-action:pan-y;margin-bottom:28px}
.dcard{grid-area:1/1;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--rule-strong);border-top:5px solid var(--c);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-1);text-decoration:none;color:inherit;transform-origin:50% 100%;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;
  transform:translateY(calc(var(--d) * 14px)) scale(calc(1 - var(--d) * .04));z-index:calc(10 - var(--d))}
.dcard[data-d="0"]{--d:0;cursor:grab}
.dcard[data-d="1"]{--d:1;pointer-events:none}
.dcard[data-d="2"]{--d:2;pointer-events:none}
.dcard[data-d="3"]{--d:3;pointer-events:none;opacity:0}
.dcard:not([data-d="0"]) > *{visibility:hidden}
.dcard.drag{cursor:grabbing}
.dcard.fly{pointer-events:none;z-index:20}
.dcard .top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1px solid var(--rule)}
.dcard .top .lbl:last-child{color:var(--ink-2)}
.dcard .pic{display:block;aspect-ratio:16/10;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,var(--frame-hi),var(--frame));border-bottom:1px solid var(--rule)}
.dcard .pic img,.dcard .pic svg,.dcard .pic .spr{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.dcard .pic img{padding:clamp(12px,2vw,20px);filter:var(--shot-shadow)}
.dcard .txt{padding:18px 18px 0}
.dcard h2{font-size:clamp(24px,3.6vw,32px);font-stretch:118%;font-weight:800;letter-spacing:-.02em;line-height:1.02}
.dcard .by{margin:6px 0 0;color:var(--muted);font-size:15px}
.dcard .d{margin:12px 0 0;color:var(--ink-2);font-size:16px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dcard .chips{margin-top:14px}
.dcard .foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:auto;padding:16px 18px;border-top:1px solid var(--rule)}
.dcard .foot > span{display:flex;align-items:center;gap:12px}
.dcard .big{font-family:var(--display);font-stretch:125%;font-weight:800;font-size:34px;line-height:1;letter-spacing:-.03em}
.dcard .big small{font-size:14px;color:var(--muted);font-weight:500;font-stretch:100%;letter-spacing:0}
.dcard .unr{font-family:var(--mono);font-stretch:75%;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);background:var(--surface-2);border-radius:999px;padding:5px 11px}
.dcard .price{text-align:right;font-variant-numeric:tabular-nums}
.dcard .price b{display:block;font-size:17px;font-weight:650}
.dcard .price b.free{color:var(--free)}
.dcard .price span{font-size:12px;color:var(--muted)}
.dcard .open{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:var(--ink);color:var(--bg);font-weight:650;font-size:15px}
.dcard[data-d="0"]:hover h2{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
@media (min-width:900px){
  .dcard{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:auto 1fr auto auto;min-height:380px}
  .dcard .pic{grid-column:1;grid-row:1/-1;aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--rule)}
  .dcard .top,.dcard .txt,.dcard .foot,.dcard .open{grid-column:2}
  .dcard .foot{margin-top:18px}
}
@media (max-width:700px){
  .disc-stage{padding-top:22px}
  .dcard .pic{aspect-ratio:16/9}
  .dcard .txt{padding:14px 16px 0}.dcard .foot{padding:14px 16px}.dcard .open{padding:11px 16px}
  .dcard .d{-webkit-line-clamp:2;font-size:15px}
  .deck-ctl{position:sticky;bottom:0;z-index:12;background:var(--bg);padding:10px 0 calc(10px + env(safe-area-inset-bottom));margin-top:12px}
}
.deck-ctl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;margin-top:0}
.deck-ctl .btn{min-height:52px}
.deck-ctl .btn.primary{font-size:16px}
.deck-ctl .ar{display:none}
.disc-play{position:relative}
/* Wide screens: Back and Next sit either side of the card, so the whole deck fits on screen. */
@media (min-width:1180px){
  .deck-ctl{display:contents}
  .deck-note{margin-top:0}
  .deck-ctl .btn{position:absolute;top:190px;transform:translateY(-50%);width:64px;height:64px;min-height:0;padding:0;font-size:24px}
  #dc-prev{left:-88px}
  #dc-next{right:-88px}
  .deck-ctl .t,.deck-ctl kbd{display:none}
  .deck-ctl .ar{display:inline}
}
.deck-ctl kbd{font-family:var(--mono);font-size:11px;border:1px solid currentColor;opacity:.6;padding:1px 6px;font-weight:500}
.deck-note{min-height:20px;margin:12px 0 0;text-align:center;font-size:13px;color:var(--muted)}
.deck-note b{color:var(--ink);font-weight:600}
@media (hover:none){.deck-ctl kbd{display:none}}
@media (prefers-reduced-motion:no-preference){
  .dcard{transition:transform .26s cubic-bezier(.2,.8,.2,1),opacity .26s ease}
  .dcard.drag{transition:none}
  .bubble{transition:background-color .12s ease,color .12s ease,border-color .12s ease}
}

footer{border-top:1px solid var(--rule);padding-block:48px 36px;color:var(--muted);font-size:14px;background:color-mix(in srgb,var(--surface-2) 30%,var(--bg))}
footer a{color:var(--ink-2);text-decoration:none}
footer a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.55fr) minmax(0,2.6fr) minmax(0,1fr);gap:32px 40px}
.foot-brand .logo-svg{height:24px;width:auto;color:var(--ink);margin-bottom:14px}
.foot-brand p{margin:0 0 10px;max-width:32ch;line-height:1.5}
.foot-col h2{font-family:var(--mono);font-stretch:75%;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);margin:4px 0 12px}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li{margin:0 0 7px;break-inside:avoid}
.foot-col.cols ul{columns:3;column-gap:28px}
@media (max-width:1200px){.foot-col.cols ul{columns:2}}
.foot-base{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-top:36px;padding-top:18px;border-top:1px solid var(--rule);font-size:13px}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}.foot-col.cols ul{columns:2}}

@media (prefers-reduced-motion:no-preference){
  .row,.btn,.achip,.catlist a,.rd-list a,.cloud a,button.chip{transition:background-color .12s ease,color .12s ease,border-color .12s ease}
  .strip{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
  .strip .pic img,.lead .pic img,.thumb img,.similar .th img{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
  .strip:hover .pic img,.lead:hover .pic img,.row:hover .thumb img,.similar a:hover .th img{transform:scale(1.03)}
  .pos .dotm .tip{transition:opacity .12s ease}
}
:root[data-theme="dark"] .meter i.on,:root[data-theme="dark"] .weights .bar i.on{box-shadow:0 0 6px color-mix(in srgb,var(--meter) 65%,transparent),0 0 1px var(--meter)}
:root[data-theme="dark"] .thumb svg,:root[data-theme="dark"] .similar .th svg,:root[data-theme="dark"] .strip .pic svg,:root[data-theme="dark"] .stage:not(.plot) svg,:root[data-theme="dark"] .vid .ph svg,:root[data-theme="dark"] .dcard .pic svg{filter:brightness(.8)}

/* Pre-rendered page content: tools/build-pages.js writes it into each page for search engines and
   link previews; the app replaces it as soon as the data has loaded. */
.ssr{padding-block:26px 60px}
.ssr h1{font-size:clamp(30px,5vw,48px);font-weight:800;line-height:1.05;margin:10px 0 8px}
.ssr h2{font-size:20px;font-weight:650;margin:30px 0 8px}
.ssr p,.ssr li{color:var(--ink-2);max-width:70ch}
.ssr .lede{font-size:18px}
.ssr .score{font-size:20px;font-weight:700;color:var(--ink)}
.ssr img{display:block;max-width:min(100%,560px);height:auto;border:1px solid var(--rule);margin:16px 0}
.ssr ul,.ssr ol{padding-left:20px}
.ssr a{color:inherit}
.ssr .muted{color:var(--muted)}
@media (forced-colors:active){
  .meter i.on,.weights .bar i.on,.rt-bar i{background:CanvasText}
  .pos .dotm.me{background:Highlight}
}