:root {
  --bg: var(--qz-canvas, #f7f8fa);
  --bg-soft: var(--qz-surface-muted, #f0f2f5);
  --surface: var(--qz-surface, #fcfcfd);
  --ink: var(--qz-ink, #17191d);
  --ink-2: var(--qz-ink-secondary, #555b66);
  --ink-3: var(--qz-ink-tertiary, #68707c);
  --blue: var(--qz-accent, #2563eb);
  --blue-strong: var(--qz-accent-hover, #1d4ed8);
  --blue-soft: var(--qz-accent-soft, rgba(37, 99, 235, .08));
  --hair: var(--qz-line, rgba(0, 0, 0, .09));
  --nav-bg: rgba(247, 248, 250, .8);
  --star: #a86500;
  --shadow: var(--qz-shadow-float, 0 12px 30px rgba(40, 47, 58, .1));
  --shadow-hover: var(--qz-shadow-menu, 0 18px 48px rgba(40, 47, 58, .12));
}

html.dark {
  --bg: var(--qz-canvas, #111318);
  --bg-soft: var(--qz-surface-muted, #20242c);
  --surface: var(--qz-surface, #171a20);
  --ink: var(--qz-ink, #f1f3f6);
  --ink-2: var(--qz-ink-secondary, #b8bec8);
  --ink-3: var(--qz-ink-tertiary, #929aa7);
  --blue: var(--qz-accent, #58a8f7);
  --blue-strong: var(--qz-accent-hover, #78b9f9);
  --blue-soft: var(--qz-accent-soft, #102a43);
  --hair: var(--qz-line, rgba(255, 255, 255, .12));
  --nav-bg: rgba(18, 18, 20, .78);
  --star: #ffd60a;
  --shadow: var(--qz-shadow-float, 0 14px 34px rgba(4, 6, 10, .38));
  --shadow-hover: var(--qz-shadow-menu, 0 20px 52px rgba(4, 6, 10, .46));
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  min-width: 320px;
  background: var(--bg);
  color: var(--ink);
  font-family:var(--qz-font-sans);
  font-size:var(--qz-font-size-14);
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button, input, select { color: inherit; font: inherit; }
button { border: 0; background: none; cursor: pointer; }
:focus-visible { outline: 2px solid color-mix(in srgb, var(--blue) 52%, transparent); outline-offset: 2px; border-radius: var(--qz-radius-control,10px); }
::selection { background: rgba(0, 113, 227, .22); }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link {
  position: fixed;
  z-index: 500;
  top: 8px;
  left: 12px;
  min-height: 44px;
  padding: 11px 16px;
  border-radius: var(--qz-radius-control,10px);
  background: var(--ink);
  color: var(--bg);
  transform: translateY(-150%);
}
.skip-link:focus { transform: none; }

#categoryMain { min-height: calc(100vh - 180px); }
.loading-state { display: flex; align-items: center; justify-content: center; min-height: 58vh; gap: 12px; color: var(--ink-3); }
.loading-state[hidden] { display: none; }
.loading-state span { width: 18px; height: 18px; border: 2px solid var(--hair); border-top-color: var(--blue); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.category-shell, .error-shell { --category-gutter: 22px; max-width: 1080px; margin: 0 auto; padding-right: var(--category-gutter); padding-left: var(--category-gutter); }
.category-hero { max-width: 760px; padding: 36px 0 38px; }
.breadcrumb { display: flex; align-items: center; min-height: 44px; gap: 8px; color: var(--ink-3); font-size:var(--qz-font-size-14); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); }
.breadcrumb a:hover { color: var(--blue); }
.hero-copy { padding-top: 22px; }
.hero-copy h1 { max-width: 760px; font-size: clamp(44px, 5.2vw, 64px); font-weight:600; line-height: 1.05; letter-spacing: -.04em; text-wrap: balance; }
.hero-copy p { display: -webkit-box; max-width: 620px; overflow: hidden; margin-top: 16px; color: var(--ink-2); font-size:var(--qz-font-size-16); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.hero-facts { display: flex; flex-wrap: wrap; margin-top: 20px; gap: 16px; }
.hero-fact { display: inline-flex; align-items: center; min-height: 28px; color: var(--ink-3); font-size:var(--qz-font-size-14); }
.hero-fact b { margin-right: 4px; color: var(--ink); font-variant-numeric: tabular-nums; }
.guide-panel { margin: 4px 0 22px; overflow: hidden; border: 1px solid var(--hair); border-radius: var(--qz-radius-surface,14px); background: var(--surface); }
.guide-panel summary { display: flex; align-items: center; min-height: 50px; padding: 0 14px; cursor: pointer; list-style: none; }
.guide-panel summary::-webkit-details-marker { display: none; }
.guide-panel summary span { font-size:var(--qz-font-size-14); font-weight:600; }
.guide-panel summary small { margin-left: 8px; color: var(--ink-3); font-size:var(--qz-font-size-14); }
.guide-panel summary i { margin-left: auto; color: var(--ink-3); font-style: normal; transition: transform var(--qz-duration-fast,.14s); }
.guide-panel[open] summary i { transform: rotate(180deg); }
.guide-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 18px 14px 20px; border-top: 1px solid var(--hair); gap: 28px; }
.guide-panel h2 { font-size:var(--qz-font-size-14); }
.guide-group + .guide-group { border-left: 1px solid var(--hair); padding-left: 28px; }
.guide-panel ul { display: grid; margin-top: 12px; gap: 9px; list-style: none; }
.guide-panel li { position: relative; padding-left: 20px; color: var(--ink-2); font-size:var(--qz-font-size-14); }
.guide-panel li::before { position: absolute; top: 7px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); content: ""; }

.scenario-filter { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; margin-top: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--hair); gap: 10px; }
.scenario-filter::after { position: absolute; right: 0; bottom: 16px; width: 34px; height: 44px; background: linear-gradient(90deg, transparent, var(--bg)); content: ""; opacity: 0; pointer-events: none; transition: opacity var(--qz-duration-fast,.14s) ease; }
.scenario-filter[data-overflow="true"][data-at-end="false"]::after { opacity: 1; }
.scenario-label { display: flex; min-height: 44px; align-items: center; color: var(--ink-3); font-size:var(--qz-font-size-14); gap: 7px; }
.scenario-label::after { display: none; color: var(--blue); content: "→"; font-size:var(--qz-font-size-14); }
.scenario-filter[data-overflow="true"][data-at-end="false"] .scenario-label::after { display: inline; }
.scenario-chips { display: flex; min-width: 0; overflow-x: auto; flex-wrap: nowrap; gap: 7px; scroll-padding-inline: 10px; scroll-snap-type: x proximity; scrollbar-width: none; }
.scenario-chips::-webkit-scrollbar { display: none; }
.scenario-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font-size:var(--qz-font-size-14);
  transition: background-color var(--qz-duration-fast,.14s), color var(--qz-duration-fast,.14s), transform var(--qz-duration-fast,.14s);
  scroll-snap-align: start;
}
.scenario-chip:hover { color: var(--blue); }
.scenario-chip:active { transform: scale(.97); }
.scenario-chip[aria-pressed="true"] { background: var(--blue-soft); color: var(--blue); font-weight:600; }

.directory { scroll-margin-top: 68px; padding: 24px 0 82px; border-top: 1px solid var(--hair); }
.directory-toolbar { display: grid; grid-template-columns: minmax(280px, 1fr) auto; align-items: center; gap: 16px; }
.category-search { position: relative; min-width: 0; }
.category-search svg { position: absolute; top: 50%; left: 17px; width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; transform: translateY(-50%); }
.category-search input { width: 100%; height: 48px; padding: 0 48px 0 46px; border: 1px solid transparent; outline: 0; border-radius: var(--qz-radius-surface,14px); background: var(--bg-soft); transition: border-color var(--qz-duration-fast,.14s) ease, background-color var(--qz-duration-fast,.14s) ease, box-shadow var(--qz-duration-fast,.14s) ease; }
.category-search input:focus { border-color: color-mix(in srgb, var(--blue) 38%, var(--hair)); background: var(--surface); box-shadow: 0 8px 24px rgba(0, 0, 0, .07); }
.category-search input::placeholder { color: var(--ink-3); }
.clear-search { position: absolute; top: 2px; right: 2px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink-3); }
.clear-search:hover { color: var(--ink); }
.clear-search[hidden] { display: none; }
.directory-controls { display: flex; align-items: center; gap: 8px; }
.sort-select { min-width: 112px; height: 44px; padding: 0 34px 0 12px; border: 1px solid var(--hair); border-radius: var(--qz-radius-surface,14px); outline: 0; background: var(--surface); }
.favorites-filter, .reset-filters { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 13px; border: 1px solid var(--hair); border-radius: var(--qz-radius-surface,14px); background: var(--surface); color: var(--ink-2); white-space: nowrap; }
.favorites-filter:hover, .favorites-filter[aria-pressed="true"] { border-color: rgba(0, 113, 227, .28); background: var(--blue-soft); color: var(--blue); }
.favorites-filter b { display: grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 4px; border-radius: 999px; background: var(--bg-soft); font-size:var(--qz-font-size-14); font-variant-numeric: tabular-nums; }
.reset-filters { color: var(--blue); }
.reset-filters[hidden] { display: none; }
.result-line { display: flex; align-items: center; justify-content: space-between; min-height: 48px; gap: 16px; color: var(--ink-3); font-size:var(--qz-font-size-14); }
.result-line strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.result-line span:last-child { text-align: right; }
.catalog-note { margin: -7px 0 17px; color: var(--ink-3); font-size:var(--qz-font-size-14); line-height: 1.5; }

.tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tool-card { position: relative; min-width: 0; min-height: 174px; border: 1px solid var(--hair); border-radius: var(--qz-radius-surface,14px); background: var(--surface); transition: transform var(--qz-duration,.22s) cubic-bezier(.2, .8, .2, 1), border-color var(--qz-duration,.22s) ease, box-shadow var(--qz-duration,.22s) ease; }
.tool-card:hover { border-color: rgba(0, 113, 227, .3); transform: translateY(-2px); }
.tool-card:active { transform: scale(.992); }
.tool-link { display: flex; min-height: 174px; padding: 16px 15px 14px; flex-direction: column; }
.tool-head { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; padding-right: 38px; gap: 11px; }
.tool-logo { position: relative; display: grid; place-items: center; width: 42px; height: 42px; overflow: hidden; border-radius: var(--qz-radius-surface,14px); background: var(--bg-soft); color: var(--blue); font-size:var(--qz-font-size-14); font-weight: 700; transition: transform var(--qz-duration-fast,.14s) cubic-bezier(.2, .8, .2, 1); }
.tool-logo img { position: absolute; inset: 0; width: 42px; height: 42px; object-fit: cover; border-radius: var(--qz-radius-surface,14px); background: #fff; }
html.dark .tool-logo img { background: #333; }
.tool-logo img.failed { display: none; }
.tool-head h2 { overflow: hidden; font-size:var(--qz-font-size-14); font-weight:600; line-height: 1.3; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.tool-description { display: -webkit-box; overflow: hidden; margin-top: 12px; color: var(--ink-2); font-size:var(--qz-font-size-14); line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.tool-foot { display: flex; align-items: center; min-width: 0; margin-top: auto; padding-top: 12px; gap: 9px; color: var(--ink-3); font-size:var(--qz-font-size-14); }
.tool-domain { overflow: hidden; min-width: 0; color: var(--blue); text-overflow: ellipsis; white-space: nowrap; }
.tool-open { margin-left: auto; flex: 0 0 auto; transition: color var(--qz-duration-fast,.14s), transform var(--qz-duration-fast,.14s); }
.tool-card:hover .tool-logo { transform: scale(1.035); }
.tool-card:hover .tool-open { color: var(--blue); transform: translateX(2px); }
.favorite-button { position: absolute; z-index: 2; top: 4px; right: 4px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink-3); }
.favorite-button:hover { background: var(--bg-soft); color: var(--star); }
.favorite-button[aria-pressed="true"] { color: var(--star); }
.favorite-button svg { width: 16px; height: 16px; }
.favorite-button[aria-pressed="true"] svg { fill: currentColor; }

.empty-state { display: grid; place-items: start; min-height: 310px; padding: 58px 0; border-top: 1px solid var(--hair); }
.empty-state[hidden] { display: none; }
.empty-state h2 { font-size:var(--qz-font-size-24); letter-spacing: -.02em; }
.empty-state p { max-width: 580px; margin: 10px 0 20px; color: var(--ink-2); }
.empty-state button, .load-more, .error-shell a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border-radius: var(--qz-radius-surface,14px); background: var(--blue); color: #fff; font-weight:600; }
.empty-state button:hover, .load-more:hover { background: var(--blue-strong); }
.load-zone { display: grid; place-items: center; padding-top: 28px; }
.load-zone[hidden] { display: none; }
.load-more { min-width: 184px; }

.error-shell { display: grid; place-items: start; min-height: 64vh; padding-top: 110px; padding-bottom: 90px; }
.error-shell h1 { max-width: 760px; font-size: clamp(38px, 6vw, 70px); line-height: 1.05; letter-spacing: -.04em; }
.error-shell p { max-width: 620px; margin: 20px 0 28px; color: var(--ink-2); font-size:var(--qz-font-size-16); }
.site-footer { display: flex; align-items: center; justify-content: space-between; max-width: 1080px; margin: 0 auto; padding: 28px 22px 40px; border-top: 1px solid var(--hair); gap: 28px; color: var(--ink-3); font-size:var(--qz-font-size-14); }
.site-footer b { color: var(--ink); }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); font-weight: 600; }
.site-footer a:hover { color: var(--blue); }

.reveal-ready { opacity: 0; transform: translateY(16px); transition: opacity .46s cubic-bezier(.16, 1, .3, 1), transform .46s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--reveal-delay, 0ms); }
.reveal-delay-1 { --reveal-delay: 24ms; }
.reveal-delay-2 { --reveal-delay: 48ms; }
.reveal-delay-3 { --reveal-delay: 72ms; }
.reveal-delay-4 { --reveal-delay: 96ms; }
.reveal-delay-5 { --reveal-delay: 120ms; }
.reveal-ready.is-revealed { opacity: 1; transform: none; }
.scenario-chip, .favorites-filter, .reset-filters, .clear-search, .sort-select, .favorite-button, .load-more, .empty-state button { transition: color var(--qz-duration-fast,.14s) ease, background-color var(--qz-duration-fast,.14s) ease, border-color var(--qz-duration-fast,.14s) ease, box-shadow var(--qz-duration-fast,.14s) ease, transform var(--qz-duration-fast,.14s) cubic-bezier(.2, .8, .2, 1); }
.favorites-filter:active, .reset-filters:active, .clear-search:active, .favorite-button:active, .load-more:active, .empty-state button:active { transform: scale(.96); }

@media (max-width: 1200px) {
  .category-shell, .error-shell { --category-gutter: 18px; }
  .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .category-hero { padding-top: 20px; padding-bottom: 28px; }
  .directory-toolbar { grid-template-columns: 1fr; }
  .directory-controls { overflow-x: auto; padding: 1px 0 4px; scrollbar-width: none; }
  .directory-controls::-webkit-scrollbar { display: none; }
  .sort-select, .favorites-filter, .reset-filters { flex: 0 0 auto; }
}

@media (max-width: 720px) {
  .category-shell, .error-shell { --category-gutter: 16px; }
  .category-hero { padding-bottom: 24px; }
  .breadcrumb { overflow: hidden; white-space: nowrap; }
  .hero-copy h1 { font-size: clamp(34px, 10vw, 42px); }
  .hero-copy p { display: -webkit-box; overflow: hidden; font-size:var(--qz-font-size-14); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .hero-facts { margin-top: 18px; }
  .scenario-filter { grid-template-columns: 1fr; align-items: start; margin-top: 14px; gap: 8px; }
  .scenario-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--category-gutter)); padding: 0 var(--category-gutter) 5px; scrollbar-width: none; }
  .scenario-filter::after { right: calc(-1 * var(--category-gutter)); bottom: 5px; height: 49px; }
  .scenario-chips::-webkit-scrollbar { display: none; }
  .scenario-chip { flex: 0 0 auto; }
  .directory { padding-bottom: 58px; }
  .tool-grid { grid-template-columns: 1fr; }
  .tool-card, .tool-link { min-height: 174px; }
  .guide-content { grid-template-columns: 1fr; gap: 16px; }
  .guide-group + .guide-group { padding-top: 16px; padding-left: 0; border-top: 1px solid var(--hair); border-left: 0; }
  .result-line { align-items: flex-start; flex-direction: column; justify-content: center; gap: 2px; }
  .result-line span:last-child { text-align: left; }
  .site-footer { align-items: flex-start; flex-direction: column; padding-right: 16px; padding-left: 16px; }
}

@media (max-width: 480px) {
  .category-shell, .error-shell { --category-gutter: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .loading-state span { animation: none; }
  .reveal-ready { opacity: 0; transform: none; transition: opacity var(--qz-duration-fast,.14s) ease; }
  .reveal-ready.is-revealed { opacity: 1; }
  .category-search input, .scenario-chip, .favorites-filter, .reset-filters, .clear-search, .sort-select, .tool-card, .tool-logo, .tool-open, .favorite-button, .load-more, .empty-state button { transition-duration: var(--qz-duration-fast,.14s); }
  .scenario-chip:active, .favorites-filter:active, .reset-filters:active, .clear-search:active, .tool-card:hover, .tool-card:active, .tool-card:hover .tool-logo, .tool-card:hover .tool-open, .favorite-button:active, .load-more:active, .empty-state button:active { transform: none; }
}

/* Align all category work surfaces with the redesigned home, without changing content. */
body[data-category-id] { --bg: var(--qz-canvas); --bg-soft: var(--qz-surface-muted); --surface: var(--qz-surface); --ink: var(--qz-ink); --ink-2: var(--qz-ink-secondary); --ink-3: var(--qz-ink-tertiary); --blue: var(--qz-accent); --blue-soft: var(--qz-accent-soft); --blue-strong: var(--qz-accent-hover); --hair: var(--qz-line); }
.category-shell, .error-shell, .site-footer { max-width: var(--qz-container); }
.category-hero { max-width: 860px; padding: 20px 0 28px; }
.breadcrumb { font-size:var(--qz-font-size-14); flex-wrap: wrap; white-space: normal; }
.hero-copy { padding-top: 14px; }
.hero-copy h1 { font-size: clamp(1.75rem, 3.3vw, 2.5rem); line-height: 1.3; letter-spacing: -.03em; }
.hero-copy p { display: block; max-width: 760px; margin-top: 12px; font-size:var(--qz-font-size-16); line-height: 1.75; }
.hero-facts { margin-top: 14px; gap: 18px; }
.hero-fact, .scenario-label, .scenario-chip, .result-line, .catalog-note, .guide-panel summary span, .guide-panel li { font-size:var(--qz-font-size-14); }
.directory { scroll-margin-top: calc(var(--qz-header-height) + 16px); padding-top: 24px; }
.category-search input { height: 52px; border: 1px solid var(--hair); border-radius: 11px; background: var(--surface); font-size:var(--qz-font-size-16); }
.clear-search { top: 4px; right: 4px; }
.directory-controls { flex-wrap: wrap; font-size:var(--qz-font-size-14); overflow: visible; }
.sort-select, .favorites-filter, .reset-filters { border-radius: var(--qz-radius-control,10px); }
.scenario-chips { flex-wrap: wrap; overflow: visible; }
.scenario-filter::after, .scenario-label::after { display: none !important; }
.scenario-chip { border-radius: var(--qz-radius-control,10px); padding: 8px 12px; background: var(--surface); }
.guide-panel { margin-top: 6px; background: var(--surface); }
.guide-panel summary { min-height: 52px; padding-inline: 18px; }
.guide-panel summary small { font-size:var(--qz-font-size-14); }
.tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tool-card { border-radius: var(--qz-radius-surface,14px); }
.tool-link { padding: 20px; min-height: 188px; }
.tool-head h2 { white-space: normal; overflow-wrap: anywhere; font-size:var(--qz-font-size-16); line-height: 1.5; }
.tool-description { font-size:var(--qz-font-size-14); line-height: 1.75; margin-top: 14px; }
.tool-foot { font-size:var(--qz-font-size-14); padding-top: 16px; }
.favorite-button { top: 10px; right: 10px; }
.empty-state { min-height: 230px; margin-top: 16px; padding: 32px; border: 1px solid var(--hair); border-radius: var(--qz-radius-lg,18px); background: var(--surface); }
.empty-state h2 { font-size:var(--qz-font-size-20); }
.empty-state p { font-size:var(--qz-font-size-16); line-height: 1.75; }
html.dark .empty-state button, html.dark .error-shell a { color: #111318; }
.site-footer { font-size:var(--qz-font-size-14); }
@media (max-width: 1000px) { .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .category-shell, .error-shell { --category-gutter: 16px; }
  .directory-toolbar { gap: 12px; }
  .scenario-chips { margin: 0; padding: 0; gap: 6px; }
  .scenario-chip { padding-inline: 10px; }
  .hero-copy p { font-size:var(--qz-font-size-14); }
  .guide-panel summary { flex-wrap: wrap; gap: 4px; padding-block: 10px; }
  .tool-link { padding: 16px; }
}
@media (max-width: 520px) { .tool-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .reveal-ready { opacity: 1; transform: none; transition: none; } }

/* Category pages use the same left navigation / right directory work surface. */
.category-shell { display:grid; grid-template-columns:216px minmax(0,1fr); gap:24px; width:min(calc(100% - 48px),var(--qz-container)); margin:24px auto 40px; padding:0; }
.category-workspace { min-width:0; }
.category-hero { max-width:none; padding:0 0 18px; }
.hero-copy { padding-top:6px; }
.hero-copy h1 { font-size:var(--qz-page-title); line-height:1.3; }
.hero-copy p { max-width:68ch; margin-top:12px; font-size:var(--qz-font-size-14); }
.hero-facts { margin-top:10px; }
.breadcrumb { min-height:32px; font-size:var(--qz-font-size-14); }
.breadcrumb a { min-height:32px; }
.directory { padding-top:16px; }
.directory-toolbar { grid-template-columns:minmax(220px,1fr) auto; gap:12px; }
.scenario-filter { grid-template-columns:minmax(0,1fr); gap:0; margin-top:12px; padding-bottom:12px; }
.scenario-label { min-height:30px; font-size:var(--qz-font-size-14); }
.scenario-chips { gap:6px; }
.scenario-chip { min-height:40px; padding:6px 10px; font-size:var(--qz-font-size-14); gap:6px; }
.scenario-chip small { font-size:var(--qz-font-size-14); color:var(--ink-2); font-variant-numeric:tabular-nums; }
.result-line { min-height:38px; flex-wrap:wrap; gap:4px 16px; }
.catalog-note { margin:0 0 8px; font-size:var(--qz-font-size-14); }
.tool-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.tool-card:hover { transform:none; }
.guide-panel { margin-top:24px; }
@media(max-width:1100px) {
  .category-shell { grid-template-columns:196px minmax(0,1fr); gap:18px; }
  .directory-toolbar { grid-template-columns:minmax(0,1fr); }
  .tool-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:800px) {
  .category-shell { display:flex; flex-direction:column; gap:16px; }
  .category-workspace { width:100%; }
  .hero-copy h1 { font-size:var(--qz-font-size-28); }
}
@media(max-width:540px) {
  .category-shell { width:calc(100% - 32px); margin-top:16px; }
  .tool-grid { grid-template-columns:minmax(0,1fr); }
  .scenario-chips { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .scenario-chip { white-space:normal; justify-content:space-between; text-align:left; }
  .result-line span:last-child { text-align:left; }
}
.category-scenario-panel {margin:8px 0 12px;border-bottom:1px solid var(--qz-line)}
.category-scenario-panel summary {min-height:48px;cursor:pointer;font-weight:500;line-height:1.5;padding:12px 0;color:var(--qz-ink-secondary)}
.category-scenario-panel summary:hover {color:var(--qz-accent)}
.category-scenario-panel summary span {font-size:var(--qz-font-size-14);font-weight:400;color:var(--qz-ink-secondary);margin-left:8px}
.category-scenario-panel .scenario-filter {padding-top:8px}