/* AI TOOL DB — design system (variant A: "leatherdex-faithful")
   White base, ink #111 text, greys for hierarchy, 1px hairlines instead of boxes and shadows, 2px radii,
   heavy tightly-tracked headings, tiny letter-spaced kickers, square mist tiles for logos, black rectangular buttons
   that invert on hover, links whose underline grows from the left. ONE accent (brick) used only for warnings/differences.
   Status is always symbol + word + tint, never colour alone. */
:root {
  --bg: #fff; --ink: #111; --ink-2: #3a3a3a; --muted: #666; --mist: #f5f5f5; --mist-2: #ebebeb;
  --line: #e8e8e8; --line-strong: #cfcfcf; --field: #767676;
  --accent: #b0431f; --accent-soft: #f8ebe6;
  /* inline text links (not entity-name headings / nav): purple gradient so links read as links at a glance */
  --link: #7c3aed; --link-2: #c026d3; --link-grad: linear-gradient(120deg, #7c3aed, #c026d3); --link-grad-hover: linear-gradient(120deg, #6d28d9, #a21caf);
  --sans: "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, system-ui, sans-serif;
  --hdr: 56px; --ease: cubic-bezier(.2, .6, .2, 1); color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.75 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-break: strict; overflow-wrap: break-word; }
h1, h2, h3, h4 { margin: 0; line-height: 1.3; font-weight: 800; letter-spacing: -.02em; font-feature-settings: "palt"; text-wrap: balance; word-break: auto-phrase; }
p { margin: 0 0 .8em; text-wrap: pretty; }
ul, ol { margin: 0; }
img { max-width: 100%; }
a { color: inherit; text-decoration: none; transition: color .18s ease, opacity .18s ease; }
button { font-family: inherit; }
.num { font-variant-numeric: tabular-nums; letter-spacing: 0; font-feature-settings: normal; }
.muted { color: var(--muted); } .small { font-size: 12.5px; line-height: 1.7; } .mt { margin-top: 28px; } .nowrap { white-space: nowrap; }
.pal { font-feature-settings: "palt"; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 8px; top: 8px; background: var(--bg); padding: 8px 12px; z-index: 99; outline: 2px solid var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Inline text links: coloured with the purple link gradient so they read as links at a glance, plus a persistent underline for colour-blind users.
   `.ul` is applied directly on whichever element actually holds the link text (an <a>, or a nested <span>/<strong> inside one — tile/row/alt-link
   names, footer/nav items, cat-list/use-list labels, feed items) — never on a wrapper — so background-clip:text always has real text to clip. */
.link-grad, .ul, .plain a, .prose a, p a, .fresh a, .callout a, .co a, td a:not(.btn-mini):not(.alt-link):not(.chip), .eol a, .small a, .related a:not(.chip), .facets a,
.src, .alt-cmp, .btn-txt, .hot a, .side-link, .row-cats a, .block-head > a, .top-nav a, .foot a, .crumbs a {
  background-image: var(--link-grad); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  text-decoration-line: underline; text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent); text-decoration-thickness: 1px; text-underline-offset: 1px;
}
.link-grad:hover, .ul:hover, .plain a:hover, .prose a:hover, p a:hover, .fresh a:hover, .callout a:hover, .co a:hover, td a:not(.btn-mini):not(.alt-link):hover, .eol a:hover, .small a:hover,
.src:hover, .alt-cmp:hover, .btn-txt:hover, .hot a:hover, .side-link:hover, .row-cats a:hover, .block-head > a:hover, .top-nav a:hover, .foot a:hover, .crumbs a:hover,
.tile:hover .ul, .row:hover h3 .ul, .alt-link:hover .ul, a:hover > .ul, a:focus-visible > .ul {
  background-image: var(--link-grad-hover); text-decoration-color: var(--link-2);
}
/* Hover animation for every text link: the purple gradient slides across the text while the underline thickens and lifts.
   (background-image itself can't be transitioned, so the gradient is drawn at 200% width and its position is animated.) */
.link-grad, .ul, .plain a, .prose a, p a, .fresh a, .callout a, .co a, td a:not(.btn-mini):not(.alt-link):not(.chip), .eol a, .small a, .related a:not(.chip), .facets a,
.src, .alt-cmp, .btn-txt, .hot a, .side-link, .row-cats a, .block-head > a, .top-nav a, .foot a, .crumbs a {
  background-size: 200% 100%; background-position: 0 0;
  transition: background-position .4s ease, text-decoration-color .25s ease, text-underline-offset .25s ease, text-decoration-thickness .25s ease;
}
.link-grad:hover, .ul:hover, .plain a:hover, .prose a:hover, p a:hover, .fresh a:hover, .callout a:hover, .co a:hover, td a:not(.btn-mini):not(.alt-link):not(.chip):hover, .eol a:hover, .small a:hover, .related a:not(.chip):hover, .facets a:hover,
.src:hover, .alt-cmp:hover, .btn-txt:hover, .hot a:hover, .side-link:hover, .row-cats a:hover, .block-head > a:hover, .top-nav a:hover, .foot a:hover, .crumbs a:hover,
.tile:hover .ul, .row:hover h3 .ul, .alt-link:hover .ul, a:hover > .ul, a:focus-visible > .ul {
  background-position: 100% 0; text-underline-offset: 3px; text-decoration-thickness: 2px;
}
/* current-page nav indicator: solid ink, not purple — it marks "you are here", not a link to follow */
.top-nav a[aria-current] { background: none; color: var(--ink); -webkit-text-fill-color: var(--ink); text-decoration-line: underline; text-decoration-thickness: 2px; text-decoration-color: var(--ink); text-underline-offset: 5px; }
.crumbs span { background: none; color: var(--ink); -webkit-text-fill-color: var(--ink); font-weight: 600; } /* current page, not a link */
/* generated-content icons (arrows etc.) don't inherit the gradient text-fill; give them a solid link colour instead */
.block-head > a::after { color: var(--link); } .block-head > a:hover::after { color: var(--link-2); }
/* Windows High Contrast Mode / forced-colors: gradient text becomes invisible, so fall back to a plain colour + underline */
@media (forced-colors: active) { .link-grad, .ul, .plain a, .prose a, p a, .fresh a, .callout a, .co a, td a, .eol a, .small a, .related a, .facets a, .src, .alt-cmp, .btn-txt, .hot a, .side-link, .row-cats a, .block-head > a, .top-nav a, .foot a, .crumbs a { background: none; -webkit-text-fill-color: LinkText; color: LinkText; } .block-head > a::after { color: LinkText; } .crumbs span { -webkit-text-fill-color: ButtonText; color: ButtonText; } }

/* layout */
.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 16px; } .wrap.wide { max-width: 1360px; }
@media (min-width: 768px) { .wrap { padding: 0 24px; } } @media (min-width: 1280px) { .wrap { padding: 0 32px; } }
main { min-height: 60vh; } main, main.wrap, main.wrap.wide { padding-bottom: 160px; }
main.wrap, main.wrap.wide { padding-top: 20px; }
.kicker, .eyebrow { display: block; margin: 0 0 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); line-height: 1.4; font-feature-settings: normal; }

/* header */
.top { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; gap: 16px 28px; min-height: var(--hdr); flex-wrap: wrap; }
.brand { flex: none; font-size: 20px; font-weight: 800; letter-spacing: -.035em; line-height: 1; transition: opacity .2s; font-feature-settings: normal; } .brand:hover { opacity: .6; }
.brand b { font-weight: 800; color: var(--muted); margin-left: .06em; }
.top-search { position: relative; flex: 0 1 300px; display: flex; min-width: 0; }
.top-search svg { position: absolute; left: 12px; top: 50%; margin-top: -8px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.top-search input { width: 100%; min-width: 0; height: 40px; padding: 0 12px 0 36px; border: 1px solid var(--line-strong); border-radius: 2px; background: var(--mist); color: var(--ink); font: 14px var(--sans); transition: background .18s, border-color .18s; }
.top-search input:hover { border-color: var(--field); } .top-search input:focus { background: #fff; border-color: var(--ink); outline: none; }
.top-search input::placeholder { color: var(--muted); }
.top-search button { position: absolute; right: 0; top: 0; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.top-nav { display: flex; gap: 4px 22px; margin-left: auto; align-items: center; }
.top-nav a { flex: none; white-space: nowrap; padding: 6px 0; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--ink-2); }
.top-nav a:hover { color: var(--ink); } .top-nav a[aria-current] { color: var(--ink); background-size: 100% 2px; background-position: 0 calc(100% - 1px); }
.top-tools { display: none; margin-left: auto; gap: 0; } .top-tools .ic { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; color: var(--ink); cursor: pointer; transition: opacity .18s; } .top-tools .ic:hover { opacity: .55; } .top-tools svg { width: 20px; height: 20px; }
@media (max-width: 1023px) {
  .js .top-tools { display: flex; } .js .top-search, .js .top-nav { display: none; flex: 1 1 100%; }
  .js .top.s-open .top-search { display: flex; margin: 0 0 12px; } .js .top.s-open .top-search input { height: 48px; font-size: 16px; background: #fff; border-color: var(--ink); }
  .js .top.m-open .top-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; margin: 0 0 12px; } .js .top.m-open .top-nav a { display: flex; align-items: center; min-height: 48px; font-size: 14px; border-bottom: 1px solid var(--line); background-image: none; }
  .brand { order: 1; } .top-tools { order: 2; } .top-search { order: 3; } .top-nav { order: 4; }
  .top-in { gap: 0 12px; } .top-search { flex: 1 1 100%; } .top-nav { flex: 1 1 100%; overflow-x: auto; margin-left: 0; padding-bottom: 4px; }
  .top-nav a { min-height: 44px; display: flex; align-items: center; }
}

/* page scaffolding */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; margin: 0 0 20px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.crumbs a { display: inline-flex; align-items: center; min-height: 32px; color: var(--muted); } .crumbs a:hover { color: var(--ink); } .crumbs i { margin: 0 7px; font-style: normal; color: var(--line-strong); } .crumbs span { color: var(--ink); font-weight: 600; }
.page-head { margin: 0 0 32px; max-width: 880px; } .page-head h1 { font-size: clamp(26px, 3.6vw, 40px); line-height: 1.22; letter-spacing: -.03em; margin-bottom: 12px; }
.page-head > p.muted { font-size: 14px; color: var(--ink-2); max-width: 74ch; }
.page-head .chips { margin-top: 16px; }
.anchor-nav { margin: 0 0 40px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.anchor-nav .chips { gap: 8px; }
.h-sub { font-size: 16px; margin: 40px 0 12px; } .h-sub .num { font-weight: 500; }
.lead { max-width: 46ch; font-size: 15px; color: var(--ink-2); line-height: 1.85; }

/* buttons: solid ink → inverts on hover; ghost fills ink on hover */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border: 0; border-radius: 2px; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font: 700 14px var(--sans); letter-spacing: .02em; white-space: nowrap; cursor: pointer; transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, opacity .18s ease; }
.btn-primary { background: var(--ink); color: #fff; }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--ink); color: #fff; } .btn-primary:hover { background: #fff; color: var(--ink); } }
.btn:focus-visible { background: var(--ink); color: #fff; } .btn-primary:focus-visible { background: #fff; color: var(--ink); }
.btn[aria-pressed="true"]:not(.btn-txt) { background: var(--ink); color: #fff; }
.btn-txt { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--ink); font: 700 13px var(--sans); cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.btn-txt:hover { text-decoration-color: var(--ink); }
.btn-cmp { min-height: 36px; padding: 0 12px; font-size: 12.5px; font-weight: 700; border: 0; border-radius: 2px; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); cursor: pointer; white-space: nowrap; transition: background-color .18s, color .18s, box-shadow .18s; }
@media (hover: hover) and (pointer: fine) { .btn-cmp:hover { box-shadow: inset 0 0 0 1px var(--ink); } }
.btn-cmp[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.btn-txt.btn-cmp { box-shadow: none; padding: 0 2px; min-height: 44px; }
/* pressed/active text-buttons (＋比較に追加 → ✓比較中, ☆お気に入り → ★済み) turn solid ink, overriding the purple gradient text-fill */
.btn-txt[aria-pressed="true"] { background: none; background-image: none; color: var(--ink); -webkit-text-fill-color: var(--ink); text-decoration-color: var(--line-strong); }
.btn-txt[aria-pressed="true"]:hover { text-decoration-color: var(--ink); }
.btn-mini { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 12.5px; font-weight: 700; white-space: nowrap; transition: background-color .18s, color .18s, box-shadow .18s; }
@media (hover: hover) and (pointer: fine) { .btn-mini:hover { background: var(--ink); color: #fff; box-shadow: none; } }

/* tags (chips), flags, status badges */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 0; font-family: inherit; position: relative; display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 0 12px; border-radius: 2px; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 13px; font-weight: 500; line-height: 1.4; transition: background-color .18s, color .18s, box-shadow .18s; }
a.chip::after, button.chip::after { content: ""; position: absolute; inset: -5px 0; }
@media (hover: hover) and (pointer: fine) { a.chip:hover, button.chip:hover { background: var(--ink); color: #fff; box-shadow: none; } }
a.chip:focus-visible { background: var(--ink); color: #fff; }
.chip-big { min-height: 40px; padding: 0 16px; font-size: 14px; font-weight: 600; }
.chip-static { background: var(--mist); box-shadow: none; color: var(--ink-2); font-weight: 600; }
.chip-accent { background: var(--ink); color: #fff; box-shadow: none; font-weight: 700; } @media (hover: hover) and (pointer: fine) { a.chip-accent:hover { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } }
.chip-ext { color: var(--ink-2); } .chip-on { background: var(--ink); color: #fff; box-shadow: none; cursor: pointer; border: 0; font-family: inherit; }
.flag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 2px; background: var(--mist); color: var(--ink-2); font-size: 11px; font-weight: 700; letter-spacing: .03em; white-space: nowrap; vertical-align: middle; }
.flag-gap { background: var(--accent-soft); color: var(--accent); } .flag-ok { background: #fff; box-shadow: inset 0 0 0 1px var(--line-strong); } .flag-jp, .flag-eol { background: var(--ink); color: #fff; }
.sb { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 2px; font-size: 11.5px; font-weight: 700; line-height: 1; white-space: nowrap; letter-spacing: .02em; }
.sb i { font-style: normal; font-size: 10px; }
.sb-ok { background: var(--ink); color: #fff; } .sb-part { background: var(--mist-2); color: var(--ink); } .sb-no { background: #fff; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-2); } .sb-unk { background: #fff; border: 1px dashed var(--field); color: var(--muted); font-weight: 600; }
.sb-lg { height: 30px; padding: 0 12px; font-size: 14px; gap: 7px; } .sb-lg i { font-size: 12px; }

/* logo → mist square tile. Favicons are ~128px; shown 40–72px, multiplied onto mist so white backgrounds melt away. */
.logo { position: relative; display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 2px; background: var(--mist); overflow: hidden; color: var(--muted); }
.logo .mono { font: 800 16px/1 var(--sans); } .logo:has(img) .mono { visibility: hidden; }
.logo img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 22%; object-fit: contain; mix-blend-mode: multiply; }
.logo-md { width: 56px; height: 56px; } .logo-md .mono { font-size: 20px; }
.logo-lg { width: 96px; height: 96px; } .logo-lg .mono { font-size: 32px; } .logo-lg img { padding: 20%; }
.on-mist .logo, .logo-w { background: #fff; }

/* tile shelves (square mist tile + small brand + name + facts) */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
@media (max-width: 639px) { .tiles.rail { display: flex; gap: 12px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scroll-snap-type: x proximity; scroll-padding-inline: 16px; scrollbar-width: none; } .tiles.rail::-webkit-scrollbar { display: none; } .tiles.rail > .tile { flex: 0 0 42vw; max-width: 200px; scroll-snap-align: start; } }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 16px; } } @media (min-width: 1024px) { .tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 36px 20px; } }
.tile { display: block; min-width: 0; }
.tile-img { display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1; background: var(--mist); transition: background-color .25s ease; }
.tile-img .logo { width: 60px; height: 60px; background: transparent; } .tile-img .logo .mono { font-size: 26px; } .tile-img .logo img { padding: 0; transition: transform .45s var(--ease); }
@media (min-width: 640px) { .tile-img .logo { width: 68px; height: 68px; } }
@media (hover: hover) and (pointer: fine) { .tile:hover .tile-img { background: var(--line); } .tile:hover .tile-img .logo img { transform: scale(1.06); } }
.tile:focus-visible .tile-img { background: var(--line); }
.tile-b { display: block; margin-top: 12px; font-size: 11px; color: var(--muted); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-n { display: block; margin-top: 2px; font-size: 14px; font-weight: 700; line-height: 1.45; letter-spacing: -.01em; }
.tile-m { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 8px; font-size: 12px; } .tile-m b { font-weight: 700; font-size: 12.5px; }
.tile-sub { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
/* use-case tile: 2×2 logo mosaic */
.utile .tile-img { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; place-items: center; padding: 22%; gap: 6px; } .utile .logo { width: 100%; max-width: 44px; height: auto; aspect-ratio: 1; background: transparent; } .utile .logo .mono { font-size: 15px; }
.utile .tile-n { margin-top: 12px; }

/* sections */
.block { margin-top: 56px; } @media (min-width: 768px) { .block { margin-top: 80px; } }
.block-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 20px; margin-bottom: 20px; flex-wrap: wrap; }
.block-head h2 { font-size: 20px; letter-spacing: -.025em; } @media (min-width: 768px) { .block-head h2 { font-size: 24px; } }
.block-head > a { flex: none; display: inline-flex; align-items: center; min-height: 44px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }
.block-head > a::after { content: "→"; margin-left: 6px; transition: transform .2s; } .block-head > a:hover::after { transform: translateX(3px); }
.block-head .kicker { margin-bottom: 4px; }
.block-lead { max-width: 64ch; margin: -6px 0 20px; color: var(--ink-2); }
.band { background: var(--mist); padding: 56px 0; margin-top: 56px; } @media (min-width: 768px) { .band { padding: 80px 0; margin-top: 80px; } } .band .block { margin-top: 0; }
.band + .block, .band + .wrap > .block:first-child { margin-top: 56px; }

/* home hero */
.hero { padding: 28px 0 0; } @media (min-width: 900px) { .hero { padding: 48px 0 0; } }
.hero-in { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; } @media (min-width: 900px) { .hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; } }
.hero h1 { font-size: clamp(30px, 4.4vw, 50px); line-height: 1.2; letter-spacing: -.035em; margin: 0 0 16px; }
.hero .lead { margin: 0 0 24px; }
.hero-search { position: relative; display: flex; height: 56px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--ink); }
.hero-search:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }
.hero-search input { flex: 1; min-width: 0; padding: 0 16px; border: 0; background: transparent; color: var(--ink); font: 500 16px var(--sans); border-radius: 2px 0 0 2px; } .hero-search input:focus { outline: none; } .hero-search input::placeholder { color: var(--muted); }
.hero-search .btn { height: 100%; min-height: 0; padding: 0 28px; font-size: 15px; box-shadow: none; border-radius: 0 2px 2px 0; } .hero-search .btn-primary:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.hot { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; margin-top: 16px; } .hot .kicker { margin: 0; }
.hot a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--ink-2); font-weight: 500; } .hot a:hover { color: var(--ink); }
.hero-vis { background: var(--mist); padding: 20px 20px 8px; } @media (min-width: 640px) { .hero-vis { padding: 28px 32px 12px; } }
.hv-q { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; } .hv-q strong { font-size: 15px; letter-spacing: -.01em; }
.hv-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 8px; } .hv-tags .chip-static { background: #fff; min-height: 24px; padding: 0 8px; font-size: 11.5px; }
.hv-rows { display: flex; flex-direction: column; }
.hv-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line-strong); transition: opacity .2s; }
.hv-row .logo { width: 44px; height: 44px; background: #fff; } .hv-row .n { min-width: 0; } .hv-row .n b { display: block; font-size: 14px; letter-spacing: -.01em; line-height: 1.4; } .hv-row .n small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-row .p { font-size: 12.5px; font-weight: 700; text-align: right; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .hv-rows:hover .hv-row { opacity: .55; } .hv-rows .hv-row:hover { opacity: 1; } }
.hv-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line-strong); min-height: 48px; font-size: 12.5px; } .hv-foot a { font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); margin: 40px 0 0; border-top: 1px solid var(--ink); } @media (min-width: 640px) { .stats { grid-template-columns: repeat(5, 1fr); } }
.stats > div { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); } .stats dt { font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: .04em; } .stats dd { margin: 2px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; } .stats small { font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: 0; }

/* home lists */
.cat-cols { display: grid; grid-template-columns: 1fr; gap: 28px 40px; } @media (min-width: 720px) { .cat-cols { grid-template-columns: 1fr 1fr; } } @media (min-width: 1100px) { .cat-cols { grid-template-columns: repeat(4, 1fr); } }
.cat-group h3 { font-size: 13px; margin: 0 0 8px; padding-bottom: 10px; border-bottom: 1px solid var(--ink); letter-spacing: 0; }
.cat-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; } @media (min-width: 1100px) { .cat-list { grid-template-columns: 1fr; } }
.cat-list a { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 44px; border-bottom: 1px solid var(--line); font-size: 13.5px; font-weight: 500; background-image: none; }
@media (min-width: 1100px) { .cat-list a { min-height: 38px; } }
.cat-list .ul { background-position: 0 100%; } .cat-list small { color: var(--muted); font-size: 12px; font-weight: 500; }
.free-kinds { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0 0 28px; border-top: 1px solid var(--ink); } @media (min-width: 720px) { .free-kinds { grid-template-columns: repeat(3, 1fr); gap: 0 32px; } }
.free-kinds > div { padding: 16px 0; border-bottom: 1px solid var(--line); } .free-kinds dt { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; margin-bottom: 4px; } .free-kinds dd { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.7; }
.gap-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 640px) { .gap-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .gap-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.gap-card { display: flex; flex-direction: column; gap: 4px; padding: 20px; background: #fff; min-width: 0; transition: box-shadow .2s; }
@media (hover: hover) and (pointer: fine) { .gap-card:hover { box-shadow: inset 0 0 0 1px var(--ink); } }
.gap-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .gap-card strong { font-size: 15px; letter-spacing: -.01em; line-height: 1.4; } .gap-co { font-size: 11.5px; color: var(--muted); }
.gap-desc { font-size: 12.5px; color: var(--ink-2); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; } .gap-meta { margin-top: auto; padding-top: 10px; }
.two-col { display: grid; grid-template-columns: 1fr; gap: 48px 64px; } @media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; } }
.feed { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ink); } .feed li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 1.65; } .feed time, .feed .d { color: var(--muted); font-size: 12px; padding-top: 1px; }
.feed a { text-decoration: none; font-weight: 600; } .feed .s { color: var(--muted); font-size: 12px; }
.trust-grid { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--ink); } @media (min-width: 720px) { .trust-grid { grid-template-columns: 1fr 1fr; gap: 0 48px; } } @media (min-width: 1100px) { .trust-grid { grid-template-columns: repeat(4, 1fr); } }
.trust-grid > div { padding: 20px 0 24px; border-bottom: 1px solid var(--line); } .trust-grid .n { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--muted); margin-bottom: 10px; display: block; } .trust-grid h3 { font-size: 15px; margin-bottom: 8px; } .trust-grid p { font-size: 13px; color: var(--ink-2); margin: 0; line-height: 1.8; }
.sponsored { padding-top: 0; } .sponsored .kicker { display: flex; gap: 10px; align-items: center; }

/* index pages (use-cases / features / …) */
.use-list { display: grid; grid-template-columns: 1fr; column-gap: 40px; } @media (min-width: 640px) { .use-list { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .use-list { grid-template-columns: repeat(3, 1fr); } }
.use-list a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; padding: 6px 0; border-bottom: 1px solid var(--line); background-image: none; }
.use-list strong { font-size: 14.5px; font-weight: 600; line-height: 1.5; } .use-list .ul { background-position: 0 100%; } .use-list span.num { font-size: 12px; color: var(--muted); white-space: nowrap; }
.grid-region { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 24px; } @media (min-width: 768px) { .grid-region { grid-template-columns: repeat(3, 1fr); } }
.card-region { display: flex; flex-direction: column; gap: 2px; padding: 20px 0; border-top: 1px solid var(--ink); } .card-region .code { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; color: var(--muted); } .card-region strong { font-size: 20px; letter-spacing: -.02em; } .card-region span:last-child { font-size: 12.5px; color: var(--muted); }
.section-idx { margin-bottom: 48px; }

/* tool rows: hairline-separated, columnar facts (dense, scannable) */
.rows { display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
#rows-head-slot:empty { display: none; }
.rows-head { display: grid; grid-template-columns: 72px minmax(0, 1fr) 372px 84px; gap: 4px 24px; align-items: end; padding: 0 0 8px; border-bottom: 1px solid var(--ink); }
.rows-head .rh-facts { display: grid; grid-template-columns: 96px 88px 1fr; gap: 8px 12px; }
.rows-head span, .rows-head .rh-facts > span { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .04em; line-height: 1.3; }
.rows-head i { display: block; font-style: normal; font-weight: 500; color: var(--field); font-size: 10.5px; margin-top: 2px; }
.row { display: grid; grid-template-columns: 72px minmax(0, 1fr) 372px 84px; gap: 4px 24px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); transition: background-color .2s, box-shadow .2s; }
@media (hover: hover) and (pointer: fine) { .row:hover { background: var(--mist); box-shadow: -12px 0 0 var(--mist), 12px 0 0 var(--mist); } }
.row-logo .logo { width: 72px; height: 72px; } .row-logo .logo .mono { font-size: 26px; } .row-logo .logo img { padding: 20%; }
.row-main { min-width: 0; } .row h3 { display: inline; font-size: 17px; letter-spacing: -.02em; line-height: 1.4; } .row h3 a { background-position: 0 100%; } .row .co { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.row-flags { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; vertical-align: middle; }
.row-desc { margin: 6px 0 6px; font-size: 13px; line-height: 1.7; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row-cats { margin: 0; font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; } .row-cats a { display: inline-flex; align-items: center; min-height: 28px; color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; } .row-cats a:hover { color: var(--ink); text-decoration-color: var(--ink); } .row-cats i { font-style: normal; margin: 0 7px; color: var(--line-strong); }
.row-facts { display: grid; grid-template-columns: 96px 88px 1fr; gap: 8px 12px; margin: 0; } .row-facts dt { font-size: 11px; color: var(--muted); font-weight: 600; margin-bottom: 4px; letter-spacing: .04em; } .row-facts dd { margin: 0; font-size: 13px; font-weight: 700; white-space: nowrap; line-height: 22px; }
.row-act { justify-self: end; }
/* price cell: bold tabular USD is the headline number, yen stays a small labelled reference */
.price { display: inline-flex; flex-wrap: wrap; align-items: baseline; max-width: 100%; line-height: 1.25; }
.price b { font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.price small { font-size: 11px; font-weight: 600; color: var(--ink-2); margin-left: 1px; }
.price-jp { flex-basis: 100%; font-size: 11px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 1px; }
.price.is-na b { color: var(--muted); font-size: 13px; font-weight: 600; } .price.is-na small { margin-left: 6px; color: var(--muted); }
.price-lg b { font-size: 26px; letter-spacing: -.02em; line-height: 1.15; } .price-lg small { font-size: 12.5px; } .price-lg.is-na b { font-size: 19px; } .price-lg .price-jp { font-size: 12px; }
/* desktop: the sticky-feeling rows-head above supplies the column labels once, so the per-row dt is visually hidden (kept for a11y) */
@media (min-width: 1024px) {
  .row-facts dt.cl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .row-facts dd { line-height: 1.3; }
}

/* DB page */
.dbwrap { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 48px; align-items: start; }
.facets { position: sticky; top: calc(var(--hdr) + 16px); max-height: calc(100vh - var(--hdr) - 32px); overflow: auto; padding-right: 8px; scrollbar-width: thin; }
.sheet-btn, .sheet-close { display: none; }
.facet { border-top: 1px solid var(--line); padding: 4px 0 8px; } .facet:first-child, .facet-body > .facet:first-child { border-top: 1px solid var(--ink); }
.facet h4, .facet summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .02em; cursor: pointer; list-style: none; } .facet summary::-webkit-details-marker { display: none; }
.facet summary::after { content: "+"; font-size: 16px; font-weight: 400; color: var(--muted); } .facet[open] > summary::after { content: "−"; } .facet h4 { cursor: default; min-height: 36px; }
.facet label { display: flex; align-items: center; gap: 10px; min-height: 34px; font-size: 13.5px; cursor: pointer; line-height: 1.45; } .facet label span.n { margin-left: auto; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.facet input[type="checkbox"] { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--ink); }
.facet select, .facet-select { width: 100%; height: 44px; padding: 0 36px 0 12px; border: 1px solid var(--field); border-radius: 2px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center; -webkit-appearance: none; appearance: none; color: var(--ink); font: 13.5px var(--sans); }
.facet-scroll { max-height: 236px; overflow: auto; padding-bottom: 6px; scrollbar-width: thin; }
.facet-body p { margin: 16px 0 0; } .facet-body .btn { width: 100%; min-height: 44px; }
.bar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.bar input { flex: 1 1 260px; height: 52px; padding: 0 16px; border: 0; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--ink); background: #fff; color: var(--ink); font: 500 16px var(--sans); } .bar input:focus { outline: 2px solid var(--ink); outline-offset: 3px; } .bar input::placeholder { color: var(--muted); }
.sort { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--muted); } .sort select { height: 44px; padding: 0 34px 0 12px; border: 1px solid var(--field); border-radius: 2px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center; -webkit-appearance: none; appearance: none; color: var(--ink); font: 600 13px var(--sans); }
.count { font-size: 13px; color: var(--muted); margin: 0 0 12px; } .count b { color: var(--ink); font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin-right: 2px; }
.parsed { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 12px 16px; margin: 0 0 16px; background: var(--mist); font-size: 13px; line-height: 1.6; } .parsed strong { font-size: 12px; letter-spacing: .04em; margin-right: 2px; } .parsed .chip-static { background: #fff; min-height: 26px; padding: 0 10px; font-size: 12.5px; }
.parsed .small { flex: 1 1 100%; color: var(--muted); }
#parsed:empty, #active:empty { display: none; } #active { margin-bottom: 16px; }
.empty { padding: 48px 24px; text-align: center; background: var(--mist); color: var(--ink-2); border-radius: 2px; } .empty .chips { margin: 8px 0 16px; }
#more { margin-top: 24px; }

/* tool page */
.tool-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 28px; align-items: center; margin-bottom: 28px; } @media (min-width: 1024px) { .tool-head { grid-template-columns: auto minmax(0, 1fr) auto; } }
.tool-head > .logo { width: 72px; height: 72px; } @media (min-width: 640px) { .tool-head > .logo { width: 104px; height: 104px; } .tool-head > .logo .mono { font-size: 36px; } }
.tool-title h1 { font-size: clamp(28px, 4.4vw, 46px); line-height: 1.15; letter-spacing: -.035em; margin-bottom: 8px; } .tool-title .co { color: var(--muted); margin: 0 0 12px; font-size: 13.5px; } .tool-title .co a { color: var(--ink-2); }
.tool-title .chips { gap: 6px; }
.tool-cta { grid-column: 1 / -1; display: flex; gap: 4px 12px; flex-wrap: wrap; align-items: center; } @media (min-width: 1024px) { .tool-cta { grid-column: auto; flex-direction: column; align-items: stretch; min-width: 236px; } .tool-cta .btn-txt { justify-content: flex-start; } }
.tool-cta .btn { flex: 1 1 auto; } @media (min-width: 1024px) { .tool-cta .btn { flex: none; } } .tool-cta .txt-row { display: flex; gap: 20px; flex-wrap: wrap; }
.lead-sm { font-size: 16px; line-height: 1.9; max-width: 68ch; margin: 0 0 20px; color: var(--ink-2); word-break: auto-phrase; }
.callout { display: block; padding: 14px 18px; margin: 0 0 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-strong), inset 3px 0 0 var(--accent); font-size: 13.5px; line-height: 1.8; }
.eol { padding: 20px 24px; background: var(--mist); box-shadow: inset 3px 0 0 var(--ink); margin-bottom: 24px; } .eol strong { font-size: 16px; } .eol ul { margin: 8px 0; }
.shot { margin: 20px 0; } .shot img { border-radius: 2px; border: 1px solid var(--line); }
.quick { display: grid; grid-template-columns: repeat(2, 1fr); margin: 28px 0 0; border-top: 1px solid var(--ink); } @media (min-width: 900px) { .quick { grid-template-columns: repeat(5, 1fr); } }
.quick > div { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; } @media (min-width: 900px) { .quick > div { border-bottom: 0; padding-right: 20px; } .quick > div + div { padding-left: 20px; border-left: 1px solid var(--line); } }
.quick span.k { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--muted); } .quick strong.big { font-size: 22px; font-weight: 800; letter-spacing: -.025em; line-height: 1.3; } .quick small { font-size: 12px; color: var(--muted); line-height: 1.6; }
.quick > div:last-child:nth-child(odd) { grid-column: 1 / -1; } @media (min-width: 900px) { .quick > div:last-child:nth-child(odd) { grid-column: auto; } }
.fresh { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 8px; padding: 12px 0; font-size: 12px; line-height: 1.7; color: var(--muted); border-bottom: 1px solid var(--line); } .fresh strong { color: var(--ink); font-weight: 700; } .fresh > span { min-width: 0; }
.tool-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 56px; align-items: start; margin-top: 8px; } @media (min-width: 1024px) { .tool-grid { grid-template-columns: minmax(0, 1fr) 280px; } }
.block-sm { padding: 32px 0 8px; margin-bottom: 8px; scroll-margin-top: 132px; border-top: 1px solid var(--line); } .tool-grid > div > .block-sm:first-child { border-top: 0; padding-top: 24px; }
.block-sm h2 { font-size: 20px; letter-spacing: -.025em; margin-bottom: 16px; } .block-sm h3 { font-size: 12px; color: var(--muted); font-weight: 700; letter-spacing: .04em; margin: 20px 0 8px; }
.block-sm > p.small.muted:last-child { margin-top: 12px; }
.block-sm .chips + .small, .block-sm .chips + p.small { margin-top: 12px; }
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.spec, .usetable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.spec th, .spec td, .usetable th, .usetable td { padding: 12px 20px 12px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.65; }
.spec thead th, .usetable thead th { padding-top: 0; padding-bottom: 10px; font-size: 11px; color: var(--muted); font-weight: 700; letter-spacing: .04em; border-bottom: 1px solid var(--ink); white-space: nowrap; }
.spec tbody th { width: 168px; font-weight: 700; color: var(--ink-2); font-size: 13px; } .usetable tbody th { font-weight: 500; }
.usetable th small { display: block; margin-top: 6px; }
.plans th, .plans td { font-size: 13px; white-space: nowrap; } .plans td.small { white-space: normal; min-width: 140px; } .srccell { width: 200px; font-size: 12px; }
.src { display: inline-flex; align-items: center; min-height: 24px; margin-right: 8px; font-weight: 700; font-size: 12px; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.st { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 2px; font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap; background: #fff; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-strong); }
.st::before { content: "△"; font-size: 9px; } .st-unverified { box-shadow: none; border: 1px dashed var(--field); } .st-url_alive { color: var(--ink); } .st-url_alive::before { content: "○"; }
.st-verified { background: var(--ink); color: #fff; box-shadow: none; } .st-verified::before { content: "●"; } .st-broken { background: var(--accent-soft); color: var(--accent); box-shadow: none; } .st-broken::before { content: "×"; font-size: 11px; } .st-stale::before { content: "△"; }
.alts { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ink); }
.alts li { display: grid; grid-template-columns: minmax(150px, 240px) 1fr auto; gap: 8px 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.alt-link { display: flex; align-items: center; gap: 14px; min-height: 44px; } .alt-link strong { font-size: 14.5px; letter-spacing: -.01em; } .alt-link .ul { background-position: 0 100%; }
.alt-why { display: flex; flex-wrap: wrap; gap: 4px 6px; } .alt-why em { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 2px; background: var(--mist); font-style: normal; font-size: 12px; color: var(--ink-2); } .alt-why em.muted { background: none; padding: 0; color: var(--muted); }
.alt-cmp { font-size: 12.5px; font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.side { position: sticky; top: calc(var(--hdr) + 24px); display: flex; flex-direction: column; gap: 28px; padding-top: 24px; }
.card-side { border-top: 1px solid var(--ink); padding-top: 12px; } .card-side h3 { font-size: 12px; letter-spacing: .04em; margin-bottom: 8px; } .card-side h4 { font-size: 11px; color: var(--muted); font-weight: 700; letter-spacing: .06em; margin: 16px 0 6px; } .card-side .chips { gap: 6px; } .card-side .chip { min-height: 32px; font-size: 12.5px; } .card-side p { font-size: 12.5px; line-height: 1.75; }
ul.plain { padding: 0; list-style: none; margin: 0; } ul.plain li { padding: 8px 0; border-bottom: 1px solid var(--line); line-height: 1.7; } ul.plain.cols { columns: 2; column-gap: 32px; } ul.plain.cols li { break-inside: avoid; }
ul.vids { list-style: none; padding: 0; margin: 0; } ul.vids a { display: flex; gap: 14px; align-items: center; padding: 8px 0; text-decoration: none; } ul.vids img { border-radius: 2px; flex: none; } ul.vids small { display: block; color: var(--muted); font-size: 12px; }
.yt-frame { width: 100%; aspect-ratio: 16/9; border: 0; }
.flow { position: sticky; top: var(--hdr); z-index: 20; display: flex; gap: 0; list-style: none; padding: 0; margin: 0 -16px 32px; padding: 0 16px; background: #fff; border-bottom: 1px solid var(--line); counter-reset: s; overflow-x: auto; scrollbar-width: none; } .flow::-webkit-scrollbar { display: none; } @media (min-width: 768px) { .flow { margin: 0 -24px 32px; padding: 0 24px; } } @media (min-width: 1280px) { .flow { margin: 0 -32px 32px; padding: 0 32px; } }
.flow li { counter-increment: s; flex: none; } .flow a { display: flex; align-items: center; min-height: 48px; padding: 0 20px 0 0; margin-right: 8px; font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--ink-2); } .flow a::before { content: counter(s, decimal-leading-zero); margin-right: 8px; font-size: 10.5px; letter-spacing: .1em; color: var(--muted); font-weight: 700; } .flow a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.ladder { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0 32px; } .ladder li { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; min-width: 180px; padding: 10px 0; border-bottom: 1px solid var(--line); flex: 1 1 180px; } .ladder .num { font-weight: 800; }
.flow + .block-sm { border-top: 0; padding-top: 8px; } .usetable .chip { min-height: 26px; padding: 0 8px; font-size: 12px; }
.related h2 { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 32px 0 10px; }

/* compare */
.cmp-wrap { border-top: 1px solid var(--ink); } .cmp { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13.5px; table-layout: fixed; }
.cmp th, .cmp td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.7; overflow-wrap: anywhere; }
.cmp thead th { position: sticky; top: var(--hdr); z-index: 5; background: #fff; border-bottom: 1px solid var(--ink); padding-top: 16px; }
.cmp tbody th { width: 168px; color: var(--muted); font-weight: 700; font-size: 12.5px; } .cmp thead th:first-child { width: 168px; }
.cmp .cmp-h { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .cmp .cmp-h .logo { width: 56px; height: 56px; } .cmp .cmp-h strong { font-size: 16px; letter-spacing: -.02em; }
.cmp tr.diff td, .cmp tr.diff th { background: var(--accent-soft); } .cmp tr.diff th::after { content: "違い"; display: inline-block; margin-left: 8px; padding: 0 6px; border-radius: 2px; background: var(--accent); color: #fff; font-size: 10.5px; line-height: 18px; letter-spacing: .05em; vertical-align: 1px; }
.cmp-add { position: relative; margin: 20px 0; max-width: 460px; } .cmp-add input { width: 100%; height: 48px; padding: 0 16px; border: 0; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--ink); background: #fff; color: var(--ink); font: 500 15px var(--sans); } .cmp-add input:focus { outline: 2px solid var(--ink); outline-offset: 3px; } .cmp-add .sug { right: 0; }
.diff-toggle { display: inline-flex; gap: 10px; align-items: center; min-height: 44px; margin: 0 0 8px; font-size: 13px; font-weight: 700; cursor: pointer; } .diff-toggle input { accent-color: var(--ink); width: 16px; height: 16px; margin: 0; }
.cmp-wrap.diff-only tbody tr:not(.diff) { display: none; }
.sug { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 45; margin: 0; padding: 4px 0; list-style: none; background: #fff; box-shadow: inset 0 0 0 1px var(--ink); max-height: 60vh; overflow: auto; }
.hero-search .sug { left: 0; right: 0; top: calc(100% + 6px); }
.sug li a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 0 16px; color: var(--ink); font-size: 14px; } .sug li a:hover, .sug li a[aria-selected="true"] { background: var(--mist); }
.sug small { color: var(--muted); font-size: 12px; } .sug .sug-h { padding: 10px 16px 2px; font-size: 10.5px; font-weight: 700; color: var(--muted); letter-spacing: .12em; }

/* prose, footer, tray, sticky CTA */
.prose { max-width: 740px; } .prose h1 { font-size: clamp(26px, 3.6vw, 36px); margin-bottom: 20px; } .prose h2 { font-size: 19px; margin: 44px 0 12px; padding-top: 20px; border-top: 1px solid var(--line); } .prose p, .prose li { line-height: 1.95; } .prose li { margin-bottom: 8px; } .prose ul { padding-left: 20px; } .prose pre { padding: 16px; background: var(--mist); border-radius: 2px; overflow: auto; font-size: 13px; line-height: 1.6; } .prose code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .92em; } .prose .st { margin-right: 4px; }
.foot { margin-top: 0; background: var(--mist); padding: 56px 0 48px; font-size: 13px; }
.foot-in { display: grid; grid-template-columns: 1fr; gap: 36px; } @media (min-width: 900px) { .foot-in { grid-template-columns: 1.3fr 1fr 1.4fr; gap: 56px; } }
.foot-brand { font-size: 20px; font-weight: 800; letter-spacing: -.035em; display: block; margin-bottom: 12px; }
.foot h4 { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.foot-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; } .foot-links a { display: flex; align-items: center; min-height: 40px; } .foot p { color: var(--ink-2); line-height: 1.85; }
.tray { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 20px; background: var(--ink); color: #fff; border-radius: 2px; font-size: 14px; font-weight: 700; white-space: nowrap; max-width: calc(100vw - 24px); }
.tray[hidden] { display: none; } .tray .btn { min-height: 44px; padding: 0 20px; } .tray .btn-primary { background: #fff; color: var(--ink); } .tray .btn-primary:hover { background: var(--mist-2); color: var(--ink); }
.tray .btn:not(.btn-primary) { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); } .tray .btn:not(.btn-primary):hover { background: #fff; color: var(--ink); }
.cta-bar { display: none; }

@media (max-width: 1023px) {
  .rows-head { display: none; }
  .row { grid-template-columns: 56px minmax(0, 1fr); gap: 10px 16px; margin: 0; padding: 20px 0; align-items: start; }
  .row-logo .logo { width: 56px; height: 56px; } .row-main { grid-column: 2; } .row-desc { -webkit-line-clamp: 3; }
  .row-facts { grid-column: 1 / -1; grid-template-columns: 96px 88px 1fr; padding-top: 12px; border-top: 1px solid var(--line); margin-top: 4px; } .row-act { grid-column: 1 / -1; justify-self: stretch; } .row .btn-cmp { width: 100%; min-height: 44px; }
  .alts li { grid-template-columns: 1fr auto; } .alt-why { grid-column: 1 / -1; order: 3; }
  ul.plain.cols { columns: 1; } .spec tbody th { width: 116px; } .srccell { width: 130px; }
}
@media (max-width: 900px) {
  .dbwrap { grid-template-columns: 1fr; }
  .sheet-btn { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; width: 100%; min-height: calc(56px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); border-radius: 0; background: var(--ink); color: #fff; box-shadow: none; }
  .sheet-btn:hover { background: var(--ink); color: #fff; }
  .facets { position: fixed; inset: auto 0 0 0; z-index: 60; max-height: 86vh; background: #fff; padding: 0 16px calc(24px + env(safe-area-inset-bottom)); transform: translateY(105%); transition: transform .26s var(--ease); border-top: 1px solid var(--ink); visibility: hidden; }
  body.sheet-open .facets { transform: none; visibility: visible; } body.sheet-open::after { content: ""; position: fixed; inset: 0; background: rgba(17, 17, 17, .45); z-index: 55; }
  .facets .sheet-close { display: flex; position: sticky; top: 0; z-index: 2; width: 100%; margin: 12px 0 0; background: var(--ink); color: #fff; }
  .facet label { min-height: 44px; } .facet input[type="checkbox"] { width: 20px; height: 20px; }
  .tool-grid .side { position: static; padding-top: 8px; }
  main, main.wrap, main.wrap.wide { padding-bottom: 184px; } /* = desktop 160px + the same +24px headroom mobile already had for the fixed .cta-bar */
  .cta-bar { display: flex; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); }
  .cta-bar .btn-primary { flex: 1; } .cta-bar .btn-cmp { min-height: 48px; padding: 0 16px; }
  body:has(.cta-bar) .tray { bottom: 76px; } body:has(.sheet-btn) .tray { bottom: 68px; } .tray { bottom: 16px; font-size: 13px; padding-left: 16px; }
  .cmp { table-layout: auto; } .cmp th, .cmp td { min-width: 136px; width: 136px; padding: 12px 9px; } .cmp tbody th, .cmp thead th:first-child { min-width: 84px; width: 84px; font-size: 12px; position: sticky; left: 0; z-index: 3; background: #fff; }
  .cmp thead th { position: static; } .cmp tr.diff th::after { display: block; width: max-content; margin: 4px 0 0; }
  .cmp-wrap { overflow-x: auto; }
  .stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .stack, .stack tbody { display: block; } .stack tr { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; padding: 18px 0; border-bottom: 1px solid var(--line); } .stack tbody tr:first-child { border-top: 1px solid var(--ink); }
  .stack th { grid-column: 1 / -1; padding: 0; border: 0; } .stack td { display: block; padding: 0; border: 0; min-width: 0; } .stack td[data-l]::before { content: attr(data-l); display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
  .stack td.e { display: none; }
  .stack td.wide { grid-column: 1 / -1; } .stack td.act { grid-column: 1 / -1; display: flex; gap: 8px; } .stack td.act .btn-cmp, .stack td.act .btn-mini { flex: 1; justify-content: center; min-height: 44px; }
}
@media (max-width: 559px) {
  .btn { padding: 0 20px; } .hero-search .btn { padding: 0 20px; } .tool-head { grid-template-columns: auto minmax(0, 1fr); } .tool-cta .btn { flex: 1 1 100%; }
  .row-facts { display: flex; flex-wrap: wrap; gap: 10px 18px; } .row .btn-cmp { width: auto; justify-self: start; padding: 0 20px; }
  .quick strong.big { font-size: 19px; } .feed li { grid-template-columns: 76px minmax(0, 1fr); } .plans td.small { min-width: 180px; }
  .spec:not(.plans) tbody tr { display: grid; grid-template-columns: 1fr; padding: 12px 0; border-bottom: 1px solid var(--line); } .spec:not(.plans) tbody th, .spec:not(.plans) tbody td { display: block; width: auto; padding: 0; border: 0; } .spec:not(.plans) tbody th { font-size: 11.5px; color: var(--muted); } .spec:not(.plans) thead { display: none; } .spec:not(.plans) .srccell { width: auto; padding-top: 6px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; } .tile:hover .tile-img .logo img { transform: none; } }
details[open] > :not(summary) { animation: acc .24s var(--ease) both; } @keyframes acc { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.block, .block-sm { content-visibility: auto; contain-intrinsic-size: auto 400px; }
.cmp .sb { height: auto; min-height: 22px; padding: 4px 8px; white-space: normal; line-height: 1.45; align-items: flex-start; }

.row-vf { margin: 4px 0 0; font-size: 11.5px; color: var(--muted); } .row-vf.vf-v { color: var(--ink); font-weight: 600; }
.res-h { margin: 28px 0 4px; font-size: 15px; letter-spacing: 0; padding-bottom: 8px; border-bottom: 1px solid var(--ink); }
.row-note { margin: 6px 0 0; font-size: 12px; color: var(--ink-2); line-height: 1.6; }
.relax .chip { min-height: 40px; } .relax .num { margin-left: 4px; color: var(--muted); }
.parsed .chip { margin: 2px 4px 2px 0; }
.tile-use { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.5; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hv-more { display: none; }
@media (max-width: 767px) {
  .hv-rows:not(.is-open) .hv-extra { display: none; } .hv-more { display: inline-flex; }
  .row-cats a { min-height: 44px; padding: 0 4px; } .row-cats i { margin: 0 3px; }
}
.defs { margin: 16px 0 0; } .defs dt { font-weight: 700; margin-top: 8px; } .defs dd { margin: 2px 0 0; color: var(--ink-2); line-height: 1.7; }

.hv-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 8px; }

/* hero example rows: name on the first line, price / free / Japanese badges wrap on the second line at every width */
.hv-row { grid-template-columns: 44px minmax(0, 1fr); align-items: start; } .hv-row .hv-meta { grid-column: 2; justify-content: flex-start; margin-top: 4px; } .hv-row .n b { overflow-wrap: anywhere; }
.steps { padding-left: 1.4em; line-height: 1.8; } .steps li { margin: 10px 0; }
.gloss dt { scroll-margin-top: 90px; }
.gl { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.facet-help { margin: 2px 0 8px; }
.startbox { margin: 20px 0 8px; padding: 16px 20px; background: var(--mist); } .startbox h2 { margin: 0 0 8px; font-size: 15px; letter-spacing: 0; } .startbox ul { margin: 0; padding-left: 1.2em; line-height: 1.8; font-size: 14px; }
.for-use { margin: 4px 0 12px; font-size: 14px; }
.feat-more { margin: 14px 0 4px; } .feat-more summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--ink-2); min-height: 44px; display: flex; align-items: center; } .feat-more .chips { margin-top: 8px; }
.ja-break { margin-top: 24px; } .block-sm h3 { margin-top: 24px; }
/* accordion: <details class="feat-more"> — chevron that rotates, bordered header, 44px tap target */
.feat-more { margin: 16px 0 8px; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.feat-more summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 4px; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--ink); transition: background-color .2s; }
.feat-more summary::-webkit-details-marker { display: none; }
.feat-more summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .25s ease; }
.feat-more[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.feat-more summary:hover { background: var(--mist); }
.feat-more summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.feat-more > .chips, .feat-more > p { padding: 4px 4px 0; } .feat-more > p:last-child { padding-bottom: 16px; }
@media (prefers-reduced-motion: reduce) { .feat-more summary::after { transition: none; } }
/* share row + follow */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 16px 0 4px; }
.share-l { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .04em; margin-right: 2px; }
.share-b { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border: 0; border-radius: 2px; background: #fff; color: var(--ink); font: 700 13px var(--sans); box-shadow: inset 0 0 0 1px var(--line-strong); cursor: pointer; transition: background-color .2s, box-shadow .2s; }
.share-b:hover { background: var(--mist); box-shadow: inset 0 0 0 1px var(--ink); } .share-b:focus-visible, .share-follow:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.share-follow { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.foot-social { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 8px 0 12px; font-weight: 700; } .foot-social a { min-height: 32px; display: inline-flex; align-items: center; }
/* news */
.ntag { display: inline-block; padding: 0 6px; margin-right: 4px; border-radius: 2px; background: var(--mist); font-size: 10.5px; font-weight: 700; color: var(--ink-2); line-height: 18px; vertical-align: 1px; }
.nwhy { display: block; margin-top: 3px; font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.colgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px 20px; margin-bottom: 20px; }
.colcard { display: block; } .colcard img, .colimg { display: block; width: 100%; aspect-ratio: 40 / 21; object-fit: cover; background: var(--mist); border-radius: 2px; margin-bottom: 10px; }
.coltxt { display: flex; flex-direction: column; gap: 4px; } .coltxt strong { font-size: 15px; line-height: 1.5; letter-spacing: -.01em; }
.btnrow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
/* buttons inside paragraphs/prose must not inherit the gradient text-link treatment (text became transparent) */
p a.btn, .small a.btn, .prose a.btn, .callout a.btn, td a.btn { background-image: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; text-decoration: none; }
p a.btn:not(.btn-primary), .small a.btn:not(.btn-primary), .prose a.btn:not(.btn-primary) { color: var(--ink); }
/* spacing under card lists */
.more-link { margin: 24px 0 8px; } .alts + .more-link, .more-link + p, .more-link + .small { margin-top: 24px; }
/* stable layout while switching pages: reserve the scrollbar gutter so the content width never jumps */
html { scrollbar-gutter: stable; }
/* image hover: gentle zoom inside a clipped frame, never a layout shift */
.colcard { overflow: hidden; } .colcard img { transition: transform .45s var(--ease, ease), filter .3s ease; } .colcard:hover img, .colcard:focus-visible img { transform: scale(1.05); filter: brightness(1.04); }
.tile-img { overflow: hidden; } .tile:hover .tile-img .logo img, .tile:focus-visible .tile-img .logo img { transform: scale(1.1); }
.row .logo img, .hv-row .logo img, .alt-link .logo img, .cmp-h .logo img { transition: transform .35s var(--ease, ease); }
.row:hover .logo img, .hv-row:hover .logo img, .alt-link:hover .logo img, .cmp-h a:hover ~ .logo img, .cmp-h:hover .logo img { transform: scale(1.1); }
.shot img { transition: transform .45s ease, box-shadow .3s ease; } .shot img:hover { transform: scale(1.015); box-shadow: 0 6px 24px rgb(0 0 0 / .12); }
.faq { border-top: 1px solid var(--line-strong); } .faq-item { border-bottom: 1px solid var(--line-strong); }
.faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 4px; cursor: pointer; font-size: 14px; font-weight: 700; } .faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .25s ease; } .faq-item[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq-item summary:hover { background: var(--mist); } .faq-item summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .faq-item p { margin: 0; padding: 4px 4px 18px; line-height: 1.8; }
/* hero example rows: tighter space between the name/company block and the price / free / Japanese badges */
.hv-row { row-gap: 0; } .hv-row .hv-meta { margin-top: 2px; gap: 4px 8px; }
.hv-row > .logo { grid-row: 1 / span 2; align-self: start; }   /* the logo spans both rows so the first row is only as tall as the text */
/* tabs (news page) */
.tablist { display: flex; gap: 4px; margin: 8px 0 0; border-bottom: 1px solid var(--line-strong); }
.tablist [role="tab"] { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 20px; border: 0; background: none; color: var(--muted); font: 700 15px var(--sans); cursor: pointer; transition: color .2s, background-color .2s; }
.tablist [role="tab"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); transform: scaleX(0); transition: transform .25s ease; }
.tablist [role="tab"]:hover { color: var(--ink); background: var(--mist); } .tablist [role="tab"][aria-selected="true"] { color: var(--ink); } .tablist [role="tab"][aria-selected="true"]::after { transform: scaleX(1); }
.tablist [role="tab"]:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.tab-n { font-size: 12px; font-weight: 700; color: var(--muted); padding: 1px 7px; background: var(--mist); border-radius: 10px; } [aria-selected="true"] .tab-n { background: var(--ink); color: #fff; }
.tabpanel { padding-top: 8px; } .tabpanel[hidden] { display: none; }
@media (max-width: 480px) { .tablist [role="tab"] { flex: 1; justify-content: center; padding: 0 8px; } }
@media (prefers-reduced-motion: reduce) { .tablist [role="tab"]::after { transition: none; } }
/* ad slots: labelled, fixed-height box (no layout shift), clearly separated from content, never inside lists */
.ad-slot { position: relative; margin: 40px 0; padding: 22px 0 0; min-height: 280px; contain: layout; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; overflow: hidden; }
.ad-label { position: absolute; top: 4px; left: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: var(--muted); }
.ad-slot ins.adsbygoogle { min-height: 250px; } @media (min-width: 768px) { .ad-slot { min-height: 280px; } }
.ad-preview .ad-ph { display: flex; align-items: center; justify-content: center; min-height: 250px; background: var(--mist); color: var(--muted); font-size: 13px; }

/* finder (診断) */
.finder { display: grid; gap: 18px; max-width: 560px; margin: 8px 0 20px; }
.finder .fld { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; }
.finder .fld > span, .finder legend { font-weight: 600; padding: 0; margin-bottom: 4px; }
.finder select { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg, transparent); color: inherit; font: inherit; }
.finder fieldset label { display: flex; gap: 8px; align-items: center; padding: 6px 0; cursor: pointer; }

/* guide comparison table (tools as rows) */
.gtbl-wrap { overflow-x: auto; margin: 12px 0; border-top: 1px solid var(--ink); }
.gtbl { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 620px; }
.gtbl th, .gtbl td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.gtbl thead th { font-size: 12px; color: var(--muted, inherit); font-weight: 600; white-space: nowrap; }
.gtbl tbody th { font-weight: 600; white-space: nowrap; }

/* news language filter */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin: 4px 0 14px; }
.seg button { appearance: none; border: 0; background: transparent; color: inherit; font: inherit; font-size: 13.5px; padding: 7px 16px; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--ink); color: var(--bg, #fff); }
.seg button .num { margin-left: 6px; opacity: .7; font-size: 12px; }
.feed li[hidden] { display: none; }