/* Local community prototype. Existing ZECTRIX assets and brand fonts are reused. */
@font-face { font-family: "Inter"; src: url("/dist/assets/inter-latin-400-normal-C38fXH4l.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/dist/assets/inter-latin-600-normal-LgqL8muc.woff2") format("woff2"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/dist/assets/inter-latin-700-normal-Yt3aPRUw.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/dist/assets/space-grotesk-latin-500-normal-lFbtlQH6.woff2") format("woff2"); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/dist/assets/space-grotesk-latin-600-normal-DjKNqYRj.woff2") format("woff2"); font-style: normal; font-weight: 600; font-display: swap; }
:root {
  color-scheme: light;
  --page: #f7f6f2;
  --surface: #fff;
  --surface-soft: #efeee9;
  --ink: #171817;
  --muted: #64645d;
  --faint: #66685f;
  --line: #deded6;
  --accent: #bd4918;
  --accent-dark: #94380f;
  --accent-soft: #f7e9e1;
  --radius: 10px;
  --body-font: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --display-font: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* The header is in normal flow; anchor actions need only a small reading margin. */
html { scroll-padding-top: 24px; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body.community-page { margin: 0; color: var(--ink); background: var(--page); font: 15px/1.65 var(--body-font); -webkit-font-smoothing: antialiased; }
body.modal-open { overflow: hidden; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button { color: inherit; }
button:disabled { cursor: not-allowed; opacity: .5; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
::selection { color: var(--ink); background: #ecd9bc; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--display-font); font-weight: 600; }
button { touch-action: manipulation; }
.shell { width: min(1280px, calc(100% - 64px)); margin-inline: auto; }
.visually-hidden, .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: 8px; left: 12px; z-index: 150; padding: 10px 16px; background: var(--surface); border: 1px solid var(--ink); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

/* Preview status; global navigation/footer come from the main site. */

.intro { padding: 48px 0 30px; }
.intro h1 { font-size: clamp(32px, 3.4vw, 46px); line-height: 1.15; letter-spacing: -.03em; }
.intro > p { max-width: 700px; margin-top: 15px; color: var(--muted); font-size: 15px; }
.kicker { display: block; color: var(--accent-dark); font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: .04em; }
.intro .kicker { margin-bottom: 13px; }
.intro > .kicker, .detail-heading > .kicker { margin-top: 0; color: var(--accent-dark); font-size: 11px; font-weight: 600; line-height: 1.5; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.section-heading h2 { font-size: 20px; letter-spacing: -.025em; }
.section-heading p, .section-heading > a { color: var(--muted); font-size: 12px; }
.section-heading > a { min-height: 44px; display: inline-flex; align-items: center; color: var(--accent-dark); }
.featured-section { margin-bottom: 48px; }
.featured-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.featured-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: border-color .18s ease, transform .18s ease; }
.featured-card:first-child { grid-column: span 2; }
.featured-card:hover { border-color: #aaa99d; transform: translateY(-3px); }
.feature-image { position: relative; height: 222px; overflow: hidden; background: var(--surface-soft); }
.feature-image img { width: 100%; height: 100%; object-fit: contain; background: var(--surface-soft); transition: transform .35s ease; }
.featured-card:hover .feature-image img { transform: none; }
.feature-image img.contain, .feature-image.contain img { object-fit: contain; background: #fff; }
.feature-body { display: flex; flex: 1; flex-direction: column; padding: 18px 20px; }
.feature-body h3 { margin-top: 7px; font-size: 20px; line-height: 1.35; letter-spacing: -.025em; }
.featured-card:first-child .feature-body h3 { font-size: 24px; }
.feature-body > p:not(.kicker):not(.feature-meta) { margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.feature-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 17px; color: var(--muted); font-size: 11px; }
.feature-meta > span:last-child { margin-left: auto; }

/* The directory prioritizes scene browsing, then installation requirements. */
.library-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: start; gap: 34px; }
.filters-side { position: sticky; top: 24px; padding-top: 5px; }
.filters-side h2, .filters-side h3, .filters-side .filter-heading { margin-bottom: 12px; font: 600 12px/1.5 var(--body-font); color: var(--muted); }
.scene-list { display: grid; gap: 3px; }
.scene-list button { display: flex; align-items: center; justify-content: space-between; min-height: 44px; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 6px; background: transparent; text-align: left; font-size: 13px; }
.scene-list button:hover { background: #eeede7; }
.scene-list button[aria-pressed="true"], .scene-list button.active, .scene-list button.is-active { color: var(--accent-dark); background: var(--accent-soft); font-weight: 600; }
.filter-count { color: var(--muted); font-size: 11px; font-weight: 400; font-variant-numeric: tabular-nums; }
.filter-divider { height: 1px; margin: 23px 0; border: 0; background: var(--line); }
.device-options { display: flex; gap: 7px; flex-wrap: wrap; }
.device-options button { min-height: 44px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 5px; background: transparent; font-size: 11px; white-space: nowrap; }
.device-options button:hover { border-color: #99998e; }
.device-options button[aria-pressed="true"], .device-options button.active, .device-options button.is-active { color: var(--surface); border-color: var(--ink); background: var(--ink); }
.filter-help { margin-top: 22px; color: var(--muted); font-size: 11px; line-height: 1.8; }
.filter-help a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.library-main { min-width: 0; }
.catalog-toolbar { display: flex; gap: 12px; margin-bottom: 18px; }
.search-field { position: relative; display: flex; flex: 1; align-items: center; min-width: 0; }
.search-field > svg { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.search-field input { width: 100%; height: 46px; padding: 10px 15px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: 13px; }
.search-field:has(svg) input { padding-left: 43px; }
input::placeholder, textarea::placeholder { color: #66685f; opacity: 1; }
.catalog-toolbar select { width: 158px; height: 46px; padding: 9px 32px 9px 13px; border: 1px solid var(--line); border-radius: 6px; background-color: transparent; color: var(--ink); font-size: 12px; }
.type-tabs { display: flex; gap: 24px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.type-tabs::-webkit-scrollbar { display: none; }
.type-tabs button { position: relative; min-height: 44px; padding: 3px 0 11px; border: 0; background: transparent; color: var(--muted); font-size: 12px; white-space: nowrap; }
.type-tabs button:hover { color: var(--ink); }
.type-tabs button[aria-pressed="true"], .type-tabs button[aria-selected="true"], .type-tabs button.active, .type-tabs button.is-active { color: var(--ink); font-weight: 600; }
.type-tabs button[aria-pressed="true"]::after, .type-tabs button[aria-selected="true"]::after, .type-tabs button.active::after, .type-tabs button.is-active::after { position: absolute; bottom: -1px; left: 0; width: 100%; height: 3px; background: var(--accent); content: ""; }
.results-line { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; color: var(--muted); font-size: 11px; }
.results-line > div { display: flex; align-items: center; gap: 14px; }
.result-count { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.method-filter select { width: 152px; min-height: 44px; padding: 5px 0; border: 0; background-color: transparent; color: var(--muted); font-size: 11px; }
.results-line button { min-height: 44px; padding: 6px 0; border: 0; background: transparent; color: var(--accent-dark); font-size: 11px; }
.load-more-wrap { display: flex; justify-content: center; margin-top: 27px; }
.load-more-wrap button { min-width: 164px; }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.project-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: border-color .18s ease, box-shadow .18s ease; }
.project-card:hover { border-color: #b7b6aa; box-shadow: 0 5px 18px #17181706; }
.project-image { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.project-image img { width: 100%; height: 100%; object-fit: contain; background: var(--surface-soft); transition: transform .3s ease; }
.project-image:hover img { transform: none; }
.project-image img.contain, .project-image.contain img { object-fit: contain; background: #fff; }
.project-image.image-fallback { flex-direction: column; gap: 8px; padding: 20px; color: var(--muted); background: #e9e8e2; text-align: center; }
.image-fallback strong { color: #464840; font-family: var(--display-font); font-size: 28px; font-weight: 500; letter-spacing: -.03em; }
.image-fallback span, .image-fallback small { font-size: 11px; }
.project-body { display: flex; flex: 1; flex-direction: column; padding: 17px 17px 12px; }
.project-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.project-tags span { padding: 3px 7px; border-radius: 3px; color: #5a5d53; background: #f0f1eb; font-size: 10px; line-height: 1.5; white-space: nowrap; }
.project-tags .tag-firmware, .project-tags .tag-flash { color: var(--accent-dark); background: var(--accent-soft); }
.project-tags .tag-device { color: var(--ink); background: #efeee9; }
.project-tags .tag-verified { color: #404637; background: #ebeee4; }
.project-byline { margin-bottom: 6px; color: var(--muted); font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.project-body h3 { font-size: 17px; line-height: 1.4; letter-spacing: -.025em; overflow-wrap: anywhere; }
.project-body h3 a:hover { color: var(--accent-dark); }
.project-summary { margin-top: 9px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.project-dependency { margin-top: 13px; padding-top: 12px; border-top: 1px solid #ecece5; color: #6a6a61; font-size: 10px; line-height: 1.7; }
.project-dependency strong { color: #474840; font-weight: 500; }
.project-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 14px; }
.project-bottom > .project-install-button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 6px; width: auto; min-height: 36px; padding: 7px 12px; color: #fff; font-size: 12px; font-weight: 600; }
.project-bottom > .view-stat { margin-left: auto; }
.empty-state { padding: 70px 24px; border: 1px dashed #c7c6b9; border-radius: var(--radius); text-align: center; }
.empty-state h3 { margin-bottom: 10px; font-size: 22px; }
.empty-state p { color: var(--muted); font-size: 13px; }
.empty-state button { margin-top: 20px; }
.contribute-banner { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin: 52px 0 0; padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.contribute-banner h2 { font-size: 21px; letter-spacing: -.035em; }
.contribute-banner p { margin-top: 8px; color: var(--muted); font-size: 12px; }
.contribute-banner button, .contribute-banner > a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; flex-shrink: 0; padding: 9px 19px; border: 1px solid var(--ink); border-radius: 6px; background: transparent; font-size: 12px; font-weight: 600; white-space: nowrap; }
.contribute-banner button:hover, .contribute-banner > a:hover { color: #fff; background: var(--ink); }

/* Individual project pages use the same typography and install vocabulary. */
.breadcrumbs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 22px 0; color: var(--muted); font-size: 11px; }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 32px; }
.breadcrumbs a:hover { color: var(--accent-dark); }
.breadcrumbs > span:not(:last-child) { color: #949487; }
.detail-heading { margin-bottom: 28px; max-width: 830px; }
.detail-heading .kicker { margin-bottom: 11px; }
.detail-heading h1 { margin-bottom: 14px; font-size: clamp(32px, 3.5vw, 46px); line-height: 1.2; letter-spacing: -.03em; overflow-wrap: anywhere; }
.detail-heading > p { max-width: 730px; color: var(--muted); font-size: 15px; line-height: 1.8; }
.detail-byline { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-top: 17px; color: var(--muted); font-size: 11px; }
.detail-byline a { color: var(--accent-dark); text-underline-offset: 3px; }
.detail-byline .project-tags { margin: 0; }
.text-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 11px; }
.text-link:hover { color: var(--accent-dark); }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; align-items: start; gap: 38px; }
.detail-main { min-width: 0; }
.detail-gallery { margin: 0; overflow: hidden; border-radius: var(--radius); background: #ebeae4; }
.detail-gallery img { width: 100%; max-height: 540px; object-fit: contain; }
.detail-gallery figcaption, .detail-gallery > p { padding: 10px 14px; color: var(--muted); background: #efeee8; font-size: 11px; }
.detail-tabs { position: relative; display: flex; align-items: center; gap: 27px; overflow-x: auto; margin-top: 24px; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.detail-tabs::-webkit-scrollbar { display: none; }
.detail-tabs a { display: inline-flex; align-items: center; min-height: 50px; padding: 9px 0; color: var(--muted); font-size: 12px; white-space: nowrap; }
.detail-tabs a:hover, .detail-tabs a[aria-current], .detail-tabs a.active { color: var(--accent-dark); }
.detail-section { padding-top: 34px; scroll-margin-top: 30px; }
.detail-section h2 { margin-bottom: 16px; font-size: 23px; line-height: 1.35; letter-spacing: -.03em; }
.detail-section h3 { margin: 20px 0 10px; font-size: 16px; line-height: 1.5; }
.detail-section > p, .detail-section > ul, .detail-section > ol { margin-bottom: 14px; color: #5b5e54; font-size: 13px; line-height: 1.9; }
.detail-section a:not(.primary-button):not(.secondary-button):not(.project-image):not(.project-bottom a) { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.detail-section .project-card h3 a { color: var(--ink); text-decoration: none; }
.feature-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; padding: 0; list-style: none; }
.feature-list > div, .feature-list > li { padding: 15px 0; border-top: 1px solid var(--line); color: #5b5e54; font-size: 13px; line-height: 1.85; }
.feature-list h3, .feature-list strong { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.feature-list p, .feature-list span { color: var(--muted); font-size: 12px; line-height: 1.8; }
.setup-list { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.dependency-panel + .setup-list { margin-top: 23px; }
.setup-list li { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: start; gap: 14px; }
.step-number { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid #c9cabe; border-radius: 50%; font-size: 12px; font-weight: 500; }
.setup-list h3 { margin: 2px 0 6px; font-size: 14px; }
.setup-list p { color: var(--muted); font-size: 12px; line-height: 1.9; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-of-type { border-top: 1px solid var(--line); }
.faq-item summary { position: relative; min-height: 56px; padding: 16px 28px 16px 0; font-size: 13px; font-weight: 500; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { position: absolute; right: 3px; top: 15px; color: var(--muted); font-size: 19px; font-weight: 400; content: "+"; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { margin: 0 0 20px; padding-right: 20px; color: var(--muted); font-size: 12px; line-height: 1.9; }
.dependency-panel { margin-top: 24px; padding: 20px 23px; border-left: 3px solid #aaa98e; background: #ecece3; }
.dependency-panel h3, .dependency-panel strong { display: block; margin: 0 0 7px; color: var(--ink); font-size: 13px; }
.dependency-panel p { color: #5b5e54; font-size: 12px; line-height: 1.9; }
.dependency-panel ul { padding-left: 18px; color: #5b5e54; font-size: 12px; }
.install-panel { position: sticky; top: 24px; padding: 25px; border: 1px solid #cecec1; border-radius: var(--radius); background: var(--surface); }
.install-eyebrow { margin-bottom: 11px; color: var(--accent-dark); font-size: 10px; font-weight: 600; letter-spacing: .05em; }
.install-title { margin-bottom: 10px; font-size: 23px; line-height: 1.3; letter-spacing: -.035em; }
.install-description { color: var(--muted); font-size: 12px; line-height: 1.85; }
.compatibility-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 12px; margin: 22px 0; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.compatibility-grid > div { min-width: 0; }
.compatibility-grid dt { margin-bottom: 5px; color: var(--muted); font-size: 10px; }
.compatibility-grid dd { margin: 0; color: var(--ink); font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
.install-note { margin: 16px 0; padding: 12px 14px; border-radius: 5px; color: #6c4d30; background: #f6f0e5; font-size: 11px; line-height: 1.85; }
.install-note strong { color: #674127; font-weight: 600; }
.install-form { display: grid; gap: 14px; margin: 18px 0; }
.install-form > label:not(.check-label) { display: grid; gap: 6px; color: var(--muted); font-size: 11px; }
.install-form select { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid #cacbbd; border-radius: 5px; color: var(--ink); background: var(--surface); font-size: 12px; }
.install-form .check-label, .install-form label:has(input[type="checkbox"]), .submission-form .check-label { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; color: var(--muted); font-size: 11px; line-height: 1.8; cursor: pointer; }
input[type="checkbox"] { width: 17px; height: 17px; flex-shrink: 0; margin: 3px 0 0; accent-color: var(--accent); cursor: pointer; }
.primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 11px 19px; border: 1px solid var(--accent); border-radius: 6px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.6; text-align: center; transition: background .15s ease, border-color .15s ease; }
.primary-button:hover { border-color: var(--accent-dark); background: var(--accent-dark); }
.secondary-button { border-color: #c7c8ba; color: var(--ink); background: transparent; }
.secondary-button:hover { border-color: #999b89; background: #f3f4ec; }
.install-panel > .primary-button, .install-panel > .secondary-button, .install-form .primary-button, .install-form .secondary-button { width: 100%; }
.install-panel > .secondary-button { margin-top: 10px; }
.install-panel .text-link { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 8px; color: var(--muted); font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
.install-panel .text-link:hover { color: var(--accent-dark); }
.install-panel .form-result { margin-top: 10px; }
.install-status { margin: 12px 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.preflight-status, .verification-label { color: var(--muted); font-size: 10px; line-height: 1.8; }
.verification-label { padding-top: 15px; border-top: 1px solid var(--line); }
.installer-host { margin-top: 23px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); scroll-margin-top: 24px; }
.detail-section.installer-host { padding: 20px; }
.detail-section.installer-host > p { margin-bottom: 16px; font-size: 11px; }
.installer-host .section-heading { margin-bottom: 10px; }
.installer-host .section-heading h2 { margin-bottom: 0; }
.installer-host iframe { display: block; width: 100%; min-height: 1050px; border: 0; background: var(--surface); }
.installer-heading { padding: 17px 20px; border-bottom: 1px solid var(--line); }
.installer-heading h3 { margin: 0 0 6px; font-size: 16px; }
.installer-heading p { color: var(--muted); font-size: 11px; }
.installer-host .installer-fallback { padding: 16px 20px; color: var(--muted); font-size: 11px; }
.commands { position: relative; margin: 16px 0 22px; }
.commands pre { overflow-x: auto; margin: 0; padding: 21px 18px 24px; border: 1px solid var(--line); border-radius: 6px; background: #eeeee7; color: #3e4637; font: 11px/1.9 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.commands:has(.copy-button) pre { padding-top: 48px; }
.copy-button { position: absolute; right: 7px; top: 4px; min-width: 44px; min-height: 44px; padding: 6px 11px; border: 0; border-radius: 4px; color: var(--muted); background: transparent; font-size: 10px; }
.copy-button:hover { color: var(--ink); background: #e1e3d6; }
.related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.related-grid .project-body h3 { margin: 0; font-size: 16px; }
.related-grid .project-image { aspect-ratio: 4 / 3; }
.related-grid .project-bottom a { text-decoration: none; }
.related-section { margin-top: 46px; padding-top: 27px; border-top: 1px solid var(--line); }
.related-section .related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.author-section > .text-link { margin-right: 21px; }
.mobile-install-bar { display: none; }

/* Submission is an actual form, with room for clear consent and result states. */
dialog.modal { position: fixed; width: min(680px, calc(100% - 40px)); max-height: calc(100dvh - 60px); margin: auto; padding: 30px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--page); color: var(--ink); box-shadow: 0 24px 100px #17181726; }
dialog.modal::backdrop { background: #17181765; }
.modal:not(dialog) { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; background: #17181765; }
.modal:not(dialog) > .modal-content { width: min(680px, 100%); max-height: calc(100dvh - 48px); overflow-y: auto; padding: 30px; border-radius: 12px; background: var(--page); }
.modal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 21px; }
.modal-heading h2 { font-size: 27px; line-height: 1.3; letter-spacing: -.04em; }
.modal-heading p { margin-top: 8px; max-width: 470px; color: var(--muted); font-size: 12px; }
.modal .icon-button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; padding: 6px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: transparent; font-size: 22px; }
.modal .icon-button:hover { color: var(--ink); background: var(--surface-soft); }
.submission-form { display: grid; gap: 19px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid > label { display: grid; align-content: start; gap: 7px; min-width: 0; color: var(--ink); font-size: 11px; font-weight: 500; }
.form-grid label.full-width, .form-grid label.wide, .form-grid .field-wide, .form-grid label:has(textarea) { grid-column: 1 / -1; }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #cacbbd; border-radius: 5px; color: var(--ink); background: var(--surface); font-size: 12px; font-weight: 400; }
.form-grid textarea { min-height: 104px; resize: vertical; }
.form-help { color: var(--muted); font-size: 11px; line-height: 1.8; }
.modal > .form-help { margin-bottom: 20px; }
.form-help a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.form-result { padding: 13px 15px; border-left: 3px solid #6e7557; color: #424b34; background: #edf0e5; font-size: 11px; line-height: 1.8; }
.form-result[data-state="error"], .form-result.error { border-color: var(--accent); color: #7d3519; background: var(--accent-soft); }
.form-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.toast { position: fixed; bottom: 26px; left: 50%; z-index: 120; max-width: calc(100% - 40px); padding: 13px 20px; border: 1px solid #c4c7b7; border-radius: 7px; background: var(--surface); color: var(--ink); box-shadow: 0 8px 32px #17181715; font-size: 12px; line-height: 1.5; transform: translateX(-50%); }

@media (min-width: 1440px) {
  .feature-image { height: 242px; }
  .library-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 40px; }
  .project-body { padding: 19px 20px 13px; }
}

@media (max-width: 1100px) {
  .shell { width: calc(100% - 48px); }
  .library-layout { grid-template-columns: 164px minmax(0, 1fr); gap: 24px; }
  .project-grid { gap: 15px; }
  .project-body { padding: 14px 14px 10px; }
  .project-body h3 { font-size: 16px; }
  .featured-grid { gap: 15px; }
  .feature-body { padding: 17px; }
  .feature-image { height: 190px; }
  .feature-body h3 { font-size: 18px; }
  .featured-card:first-child .feature-body h3 { font-size: 22px; }
  .detail-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 27px; }
  .install-panel { padding: 22px; }
}

@media (max-width: 900px) {
  .featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .featured-card:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 1fr; }
  .featured-card:first-child .feature-image { height: 230px; }
  .featured-card:first-child .feature-body { padding: 26px; }
  .feature-image { height: 190px; }
  .library-layout { grid-template-columns: 154px minmax(0, 1fr); gap: 23px; }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
  .type-tabs { gap: 19px; }
  .detail-layout { grid-template-columns: minmax(0, 1fr) 290px; gap: 23px; }
  .install-panel { padding: 20px; }
  .install-title { font-size: 21px; }
  .feature-list { grid-template-columns: 1fr; gap: 5px; }
  .related-grid { gap: 15px; }
}

@media (max-width: 767px) {
  html { scroll-padding-top: 24px; }
  .shell { width: calc(100% - 40px); }
  .intro { padding: 33px 0 26px; }
  .intro h1 { font-size: 34px; }
  .intro > p { margin-top: 12px; font-size: 13px; line-height: 1.85; }
  .intro .kicker { font-size: 10px; margin-bottom: 10px; }
  .section-heading { gap: 16px; margin-bottom: 14px; }
  .section-heading h2 { font-size: 18px; }
  .section-heading p { font-size: 11px; }
  .featured-section { margin-bottom: 31px; }
  .featured-grid { display: flex; gap: 14px; margin-inline: -20px; padding: 0 20px 7px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .featured-grid::-webkit-scrollbar { display: none; }
  .featured-card, .featured-card:first-child { display: flex; flex: 0 0 min(320px, 84vw); scroll-snap-align: start; scroll-margin-left: 20px; }
  .feature-image, .featured-card:first-child .feature-image { height: 202px; }
  .feature-body, .featured-card:first-child .feature-body { padding: 17px 18px; }
  .feature-body h3, .featured-card:first-child .feature-body h3 { font-size: 21px; }
  .feature-body > p:not(.kicker):not(.feature-meta) { font-size: 12px; }
  .feature-meta { padding-top: 13px; }
  .library-layout { grid-template-columns: 1fr; gap: 22px; }
  .filters-side { position: static; display: grid; gap: 12px; padding-top: 0; min-width: 0; }
  .filters-side h2, .filters-side h3, .filters-side .filter-heading { margin-bottom: 2px; font-size: 11px; }
  .scene-list { display: flex; gap: 8px; margin-inline: -20px; padding-inline: 20px; overflow-x: auto; scrollbar-width: none; }
  .scene-list::-webkit-scrollbar { display: none; }
  .scene-list button { width: auto; flex-shrink: 0; min-height: 44px; padding: 9px 12px; border: 1px solid var(--line); font-size: 12px; white-space: nowrap; }
  .scene-list button[aria-pressed="true"], .scene-list button.active, .scene-list button.is-active { border-color: #d3b9a8; }
  .filter-count { font-size: 10px; }
  .filter-divider { display: none; }
  .device-options { display: flex; flex-wrap: nowrap; gap: 8px; margin-inline: -20px; padding-inline: 20px; overflow-x: auto; scrollbar-width: none; }
  .device-options::-webkit-scrollbar { display: none; }
  .device-options button { flex-shrink: 0; padding-inline: 14px; }
  .filter-help { margin-top: 0; font-size: 10px; line-height: 1.7; }
  .catalog-toolbar { gap: 9px; margin-bottom: 10px; }
  .search-field input { font-size: 12px; }
  .catalog-toolbar select { width: 124px; padding-left: 9px; font-size: 11px; }
  .type-tabs { gap: 22px; }
  .type-tabs button { font-size: 11px; }
  .results-line { min-height: 49px; font-size: 10px; }
  .results-line > div { gap: 10px; }
  .method-filter select { width: 128px; font-size: 10px; }
  .results-line button { font-size: 10px; }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .project-body { padding: 15px 15px 10px; }
  .project-summary { font-size: 11px; }
  .project-dependency { font-size: 10px; }
  .contribute-banner { align-items: flex-start; gap: 21px; margin-top: 32px; padding: 25px 0; }
  .contribute-banner h2 { font-size: 18px; }
  .contribute-banner p { font-size: 11px; }
  .contribute-banner button, .contribute-banner > a { padding-inline: 12px; font-size: 11px; }
  .breadcrumbs { padding: 16px 0; font-size: 10px; }
  .detail-heading { margin-bottom: 22px; }
  .detail-heading h1 { margin-bottom: 12px; font-size: 34px; }
  .detail-heading > p { font-size: 13px; }
  .detail-byline { gap: 8px 14px; margin-top: 15px; font-size: 10px; }
  .detail-layout { display: grid; grid-template-columns: 1fr; gap: 25px; }
  .detail-layout > .install-panel, .detail-layout > .detail-aside { order: 0; }
  .detail-layout > .detail-main { order: 1; }
  .install-panel { position: static; padding: 22px; }
  .install-description { font-size: 12px; }
  .compatibility-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 17px 0; padding: 15px 0; }
  .install-form { gap: 12px; }
  .install-note { margin: 13px 0; }
  .detail-gallery img { max-height: 430px; }
  .detail-tabs { margin-top: 17px; gap: 25px; }
  .detail-section { padding-top: 28px; }
  .detail-section h2 { font-size: 21px; }
  .detail-section > p { font-size: 12px; }
  .feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 21px; }
  .feature-list h3, .feature-list strong { font-size: 13px; }
  .feature-list p, .feature-list span { font-size: 11px; }
  .setup-list { gap: 20px; }
  .dependency-panel { padding: 18px; }
  .installer-host iframe { min-height: 1120px; }
  .detail-section.installer-host { padding: 16px; }
  .installer-heading { padding: 17px; }
  .installer-host .installer-fallback { padding: 14px 17px; }
  .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .related-section { margin-top: 32px; padding-top: 24px; }
  .related-section .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related-grid .project-body { padding: 13px; }
  .related-grid .project-body h3 { font-size: 14px; }
  .related-grid .project-summary { font-size: 10px; }
  .related-grid .project-dependency { font-size: 9px; }
  .mobile-install-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 20px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #f7f6f2f5; }
  .mobile-install-bar strong { display: block; font-size: 12px; line-height: 1.5; }
  .mobile-install-bar span, .mobile-install-bar p { color: var(--muted); font-size: 10px; }
  .mobile-install-bar > a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; flex-shrink: 0; padding: 8px 18px; border-radius: 6px; color: #fff; background: var(--accent); font-size: 12px; font-weight: 600; }
  body:has(.mobile-install-bar) .toast { bottom: calc(94px + env(safe-area-inset-bottom)); }
  dialog.modal { width: calc(100% - 28px); max-height: calc(100dvh - 30px); padding: 23px 20px; }
  .modal:not(dialog) { padding: 14px; }
  .modal:not(dialog) > .modal-content { max-height: calc(100dvh - 28px); padding: 23px 20px; }
  .modal-heading { gap: 12px; }
  .modal-heading h2 { font-size: 25px; }
  .modal-heading p { font-size: 11px; }
  .form-grid { gap: 14px; }
  .form-grid input, .form-grid select, .form-grid textarea { font-size: 16px; }
  .install-form select, .search-field input { font-size: 16px; }
  .search-field input::placeholder { font-size: 12px; }
}

@media (max-width: 520px) {
  .intro h1 { font-size: 32px; }
  .section-heading { align-items: center; }
  .section-heading p { max-width: 150px; text-align: right; font-size: 10px; }
  .project-grid { grid-template-columns: 1fr; gap: 19px; }
  .project-image { aspect-ratio: 1.46 / 1; }
  .project-body { padding: 18px 19px 13px; }
  .project-body h3 { font-size: 19px; }
  .project-summary { font-size: 12px; }
  .project-byline { font-size: 11px; }
  .project-tags { margin-bottom: 10px; }
  .project-tags span { font-size: 10px; }
  .project-dependency { margin-top: 14px; font-size: 11px; }
  .project-bottom { padding-top: 9px; }
  .contribute-banner { flex-direction: column; gap: 17px; }
  .contribute-banner h2 { font-size: 21px; }
  .contribute-banner p { font-size: 12px; }
  .contribute-banner button, .contribute-banner > a { padding-inline: 17px; }
  .detail-heading h1 { font-size: 31px; }
  .feature-list { grid-template-columns: 1fr; gap: 3px; }
  .feature-list h3, .feature-list strong { font-size: 14px; }
  .feature-list p, .feature-list span { font-size: 12px; }
  .related-grid { grid-template-columns: 1fr; gap: 17px; }
  .related-section .related-grid { grid-template-columns: 1fr; }
  .related-grid .project-body { padding: 18px; }
  .related-grid .project-body h3 { font-size: 18px; }
  .related-grid .project-summary { font-size: 12px; }
  .related-grid .project-dependency { font-size: 11px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid > label { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .featured-card:hover { transform: none; }
  .featured-card:hover .feature-image img, .project-image:hover img { transform: none; }
}

/* V2: two project families and a concise AI installation handoff. */
.intro-v2 { padding: 36px 0 27px; }
.intro-v2 h1 { font-size: clamp(30px, 3vw, 40px); line-height: 1.2; }
.intro-v2 > p:not(.kicker) { margin-top: 10px; font-size: 13px; }
.intro-v2 .kicker { margin-bottom: 10px; }
.category-entries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 38px; }
.category-entry { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; min-width: 0; padding: 23px 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: border-color .15s ease, background .15s ease; }
.category-entry[aria-current="page"] { border-color: #c07550; background: #fdfbf7; }
.category-entry:hover { border-color: var(--accent); }
.category-label { display: flex; align-items: baseline; gap: 12px; font-family: var(--display-font); font-size: 22px; font-weight: 600; line-height: 1.4; }
.category-entry[aria-current="page"] .category-label { color: var(--accent-dark); }
.category-label small { color: var(--muted); font-family: var(--body-font); font-size: 11px; font-weight: 400; white-space: nowrap; }
.category-entry h2 { margin-top: 12px; font-size: 18px; line-height: 1.5; letter-spacing: -.02em; }
.category-entry p { margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.category-entry > span { padding-top: 2px; color: var(--muted); font-size: 24px; line-height: 1.4; }
.category-entry[aria-current="page"] > span { color: var(--accent-dark); }
.catalog-family { color: var(--accent-dark); font-size: 11px; white-space: nowrap; }
.install-panel-v2 { padding: 25px; }
.quick-path { display: grid; gap: 10px; margin: 21px 0 23px; padding-left: 19px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.quick-path li { padding-left: 4px; }
.quick-path li::marker { color: var(--accent-dark); font-size: 11px; }
.quick-compat { margin-top: 13px; color: var(--muted); font-size: 10px; text-align: center; }
.install-panel-v2 .text-link { margin-top: 10px; }
.ai-install-section { padding-top: 42px; }
.ai-section-heading { margin-bottom: 23px; }
.ai-section-heading .kicker { margin: 0 0 10px; font-size: 10px; }
.ai-section-heading h2 { margin: 0 0 12px; font-size: 26px; }
.ai-section-heading > p:not(.kicker) { max-width: 650px; color: var(--muted); font-size: 13px; line-height: 1.85; }
.ai-install-workspace { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.ai-step { padding: 25px; }
.ai-step + .ai-step { border-top: 1px solid var(--line); }
.ai-step-title { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.ai-step-title > span { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border: 1px solid #c5c7b9; border-radius: 50%; color: var(--ink); font-size: 11px; font-variant-numeric: tabular-nums; }
.ai-step-title h3 { margin: 0; font-size: 17px; line-height: 1.5; letter-spacing: -.02em; }
.ai-context-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ai-context-fields > label, .agent-choice { display: grid; gap: 7px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.ai-context-fields select, .agent-choice select { width: 100%; min-width: 0; min-height: 46px; padding: 10px 34px 10px 12px; border: 1px solid #cacbbd; border-radius: 5px; color: var(--ink); background-color: var(--surface); font-size: 12px; line-height: 1.6; }
.agent-choice { max-width: 370px; }
.model-status { margin-top: 12px; color: var(--muted); font-size: 11px; line-height: 1.85; }
.model-status[data-state="error"], .model-status[data-state="incompatible"], .model-status.is-incompatible { color: var(--accent-dark); }
.usb-detect { margin-top: 19px; padding: 18px; border: 1px solid #e0e1d6; border-radius: 6px; background: #f7f7f1; }
.detect-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.detect-top h4 { margin: 0 0 5px; font-size: 13px; font-weight: 600; line-height: 1.6; }
.detect-top p { max-width: 400px; color: var(--muted); font-size: 11px; line-height: 1.8; }
.detect-top button { flex-shrink: 0; font-size: 11px; }
.detect-caution { margin-top: 14px; color: var(--muted); font-size: 10px; line-height: 1.8; }
.device-detection-result { margin-top: 14px; padding-top: 14px; border-top: 1px solid #dedfd2; }
.device-detection-result > p { color: #545b48; font-size: 11px; line-height: 1.85; }
.device-detection-result[data-state="error"] > p { color: var(--accent-dark); }
.device-detection-result dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 20px; margin: 15px 0 0; }
.device-detection-result dl > div { min-width: 0; }
.device-detection-result dt { margin: 0 0 3px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.device-detection-result dd { margin: 0; color: var(--ink); font-size: 12px; font-weight: 500; line-height: 1.7; overflow-wrap: anywhere; }
.device-detection-result dl:not(:has(> div)) { grid-template-columns: 90px minmax(0, 1fr); align-items: baseline; gap: 7px 14px; }
.plugin-prep { margin-top: 18px; padding: 16px 18px; border-left: 2px solid #b6baa5; background: #f2f3eb; }
.plugin-prep > strong { display: block; margin-bottom: 6px; color: var(--ink); font-size: 12px; font-weight: 600; }
.plugin-prep > p { color: var(--muted); font-size: 11px; line-height: 1.9; }
.plugin-prep ul { margin: 9px 0 0; padding-left: 17px; color: var(--muted); font-size: 11px; line-height: 1.9; overflow-wrap: anywhere; }
.agent-capability { margin-top: 12px; color: var(--muted); font-size: 11px; line-height: 1.85; }
.agent-capability[data-state="cloud"], .agent-capability[data-mode="cloud"] { color: #6b503a; }
.handoff-summary { margin-top: 20px; padding-left: 14px; border-left: 2px solid #c3c5b5; }
.handoff-summary > strong { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; }
.handoff-summary > p { color: var(--muted); font-size: 12px; line-height: 1.9; }
.agent-actions { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin-top: 21px; }
.agent-actions > button, .agent-actions > a { min-width: 164px; }
.agent-next { margin-top: 13px; color: #5c614e; font-size: 11px; line-height: 1.85; }
.agent-next[data-state="error"] { color: var(--accent-dark); }
.task-preview { margin-top: 17px; padding-top: 7px; border-top: 1px solid #e6e6df; }
.task-preview > summary, .manual-details > summary { position: relative; display: flex; align-items: center; min-height: 46px; padding: 10px 28px 10px 0; color: var(--muted); font-size: 11px; line-height: 1.8; cursor: pointer; list-style: none; }
.task-preview > summary::-webkit-details-marker, .manual-details > summary::-webkit-details-marker { display: none; }
.task-preview > summary::after, .manual-details > summary::after { position: absolute; right: 2px; top: 8px; color: var(--muted); font-size: 20px; line-height: 1.5; content: "+"; }
.task-preview[open] > summary::after, .manual-details[open] > summary::after { content: "−"; }
.task-preview > label { display: block; margin-top: 5px; }
.task-preview textarea { display: block; width: 100%; min-height: 260px; max-height: 560px; padding: 15px; border: 1px solid #d4d6c9; border-radius: 5px; background: #f6f7f0; color: #41483a; font: 11px/1.9 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "PingFang SC", monospace; resize: vertical; }
.task-preview > p { margin-top: 10px; color: var(--muted); font-size: 10px; line-height: 1.85; }
.ai-finish { background: #fbfcf7; }
.ai-finish .ai-step-title { margin-bottom: 12px; }
.ai-finish > p { max-width: 630px; color: #454c3b; font-size: 12px; line-height: 1.9; }
.ai-finish > .finish-help { margin-top: 10px; color: var(--muted); font-size: 11px; }
.manual-details { margin-top: 16px; border-bottom: 1px solid var(--line); }
.manual-details > summary { min-height: 51px; color: #5c5f53; font-size: 11px; }
.manual-details > summary::after { top: 12px; }
.manual-details > summary:hover, .task-preview > summary:hover { color: var(--ink); }
.manual-content { padding: 5px 0 23px; }
.manual-content > p { margin-bottom: 18px; color: var(--muted); font-size: 12px; line-height: 1.9; }
.manual-content .setup-list { margin-top: 20px; }
.manual-content > .text-link { margin-right: 22px; }
.manual-content .commands > div { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 44px; }
.manual-content .commands strong { color: var(--ink); font-size: 12px; font-weight: 500; }
.manual-content .copy-button { position: static; flex-shrink: 0; }
.manual-content .commands pre { padding: 17px; }
.manual-content .install-form { max-width: 520px; }
.manual-content .install-form > .primary-button { width: auto; }
.ai-install-section > .verification-label { margin-top: 18px; padding-top: 0; border: 0; color: var(--faint); }

@media (max-width: 900px) {
  .category-entries { gap: 16px; }
  .category-entry { padding: 21px; gap: 15px; }
  .category-entry h2 { font-size: 17px; }
  .category-entry p { font-size: 11px; }
  .ai-step { padding: 21px; }
  .detect-top { align-items: flex-start; flex-direction: column; gap: 12px; }
  .detect-top button { min-width: 164px; }
}

@media (max-width: 767px) {
  .intro-v2 { padding: 29px 0 22px; }
  .intro-v2 h1 { font-size: 30px; }
  .intro-v2 > p:not(.kicker) { margin-top: 10px; font-size: 12px; }
  .category-entries { gap: 11px; margin-bottom: 26px; }
  .category-entry { position: relative; flex-direction: column; gap: 14px; padding: 18px; }
  .category-label { align-items: flex-start; flex-direction: column; gap: 3px; font-size: 21px; }
  .category-label small { font-size: 10px; }
  .category-entry h2 { margin-top: 10px; font-size: 14px; }
  .category-entry p { font-size: 10px; }
  .category-entry > span { position: absolute; top: 19px; right: 17px; padding: 0; font-size: 20px; }
  .catalog-family { font-size: 10px; }
  .install-panel-v2 { display: none; }
  .detail-layout:has(.install-panel-v2) { gap: 0; }
  .ai-install-section { padding-top: 34px; }
  .ai-section-heading { margin-bottom: 20px; }
  .ai-section-heading h2 { font-size: 23px; }
  .ai-section-heading > p:not(.kicker) { font-size: 12px; }
  .ai-step { padding: 20px; }
  .ai-step-title { gap: 11px; margin-bottom: 18px; }
  .ai-step-title h3 { font-size: 16px; }
  .ai-context-fields { gap: 13px; }
  .ai-context-fields select, .agent-choice select { font-size: 16px; }
  .agent-choice { max-width: none; }
  .usb-detect { padding: 16px; }
  .detect-top { flex-direction: row; align-items: center; gap: 14px; }
  .detect-top button { min-width: 0; padding-inline: 13px; }
  .detect-top h4 { font-size: 12px; }
  .plugin-prep { padding: 15px; }
  .handoff-summary > p { font-size: 11px; }
  .agent-actions > button, .agent-actions > a { min-width: 150px; }
  .manual-details > summary { font-size: 11px; }
  .task-preview textarea { min-height: 290px; font-size: 12px; }
}

@media (max-width: 520px) {
  .category-entry { padding: 16px; }
  .category-entry > span { top: 17px; right: 13px; }
  .category-entry h2 { font-size: 13px; }
  .category-entry p { font-size: 10px; line-height: 1.9; }
  .ai-step { padding: 18px; }
  .ai-step-title h3 { font-size: 15px; }
  .ai-context-fields { grid-template-columns: 1fr; gap: 15px; }
  .detect-top { align-items: flex-start; flex-direction: column; gap: 13px; }
  .detect-top button { width: 100%; }
  .usb-detect { padding: 15px; }
  .agent-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .agent-actions > button, .agent-actions > a { width: 100%; }
  .task-preview textarea { padding: 12px; }
  .manual-content > .text-link { display: flex; margin-right: 0; }
  .manual-content .install-form > .primary-button { width: 100%; }
}

/* Keep the desktop introduction short so projects stay near the first fold. */
@media (min-width: 761px) {
  .intro { padding-top: 32px; padding-bottom: 24px; }
  .intro h1 br, .intro > p:not(.kicker) br { display: none; }
}

/* On a phone, show projects before the optional filters. */
.mobile-filter-toggle { display: none; }
.filter-controls { display: contents; }
@media (max-width: 767px) {
  .mobile-filter-toggle { display: flex; align-items: center; justify-content: space-between; min-height: 44px; width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 6px; background: transparent; font-size: 12px; text-align: left; }
  .filter-controls { display: none; }
  .mobile-filter-open .filter-controls { display: grid; gap: 12px; }
}

/* V3: one reusable local connection, native ink-card previews, concise setup. */
.connection-intro { max-width: 760px; padding: 14px 0 26px; }
.connection-intro .kicker { margin-bottom: 12px; }
.connection-intro h1 { font-size: clamp(30px, 3.3vw, 42px); line-height: 1.2; letter-spacing: -.035em; }
.connection-intro > p:not(.kicker) { max-width: 630px; margin-top: 14px; color: var(--muted); font-size: 14px; line-height: 1.85; }
.connection-page-layout { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 300px); align-items: start; gap: 54px; width: 100%; max-width: 954px; margin-top: 12px; }
.connection-page-form { min-width: 0; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.plugin-connection { min-width: 0; max-width: 600px; }
.connection-route { margin-bottom: 22px; padding-left: 14px; border-left: 3px solid var(--accent); }
.connection-route > strong { display: block; color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.65; }
.connection-route > p { margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.85; }
.connection-source { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 23px; }
.connection-source > label { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); background: var(--surface); font-size: 12px; line-height: 1.7; cursor: pointer; }
.connection-source > label:hover { border-color: #b7b5a9; color: var(--ink); }
.connection-source > label:has(input:checked) { border-color: #c78160; color: var(--accent-dark); background: var(--accent-soft); }
.connection-source > label:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.connection-source input[type="radio"] { width: 16px; height: 16px; flex: 0 0 16px; margin: 0; accent-color: var(--accent); }
.connection-key-label, .connection-page-label, .optional-mac > label { display: grid; gap: 8px; color: var(--ink); font-size: 12px; font-weight: 600; line-height: 1.7; }
.plugin-connection input[type="password"], .plugin-connection input[type="text"], .plugin-connection select { display: block; width: 100%; min-width: 0; min-height: 46px; padding: 10px 12px; border: 1px solid #c5c5b9; border-radius: 5px; color: var(--ink); background-color: var(--surface); font-size: 14px; font-weight: 400; line-height: 1.7; }
.plugin-connection input[data-connection-mac] { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; letter-spacing: .035em; }
.plugin-connection select { padding-right: 32px; }
.plugin-connection input:focus-visible, .plugin-connection select:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; }
.plugin-connection input[aria-invalid="true"] { border-color: #a93f27; }
.key-help { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0 24px; margin-top: 5px; }
.key-help > a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-dark); font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
.key-help > details { min-width: 0; flex: 1 1 180px; }
.key-help details > summary, .optional-mac > summary, .plugin-run-settings > summary { position: relative; display: flex; align-items: center; min-height: 44px; padding: 10px 25px 10px 0; color: var(--muted); font-size: 11px; line-height: 1.8; list-style: none; cursor: pointer; }
.key-help details > summary::-webkit-details-marker, .optional-mac > summary::-webkit-details-marker, .plugin-run-settings > summary::-webkit-details-marker { display: none; }
.key-help details > summary::after, .optional-mac > summary::after, .plugin-run-settings > summary::after { position: absolute; top: 8px; right: 0; color: var(--muted); font-size: 20px; line-height: 1.5; content: "+"; }
.key-help details[open] > summary::after, .optional-mac[open] > summary::after, .plugin-run-settings[open] > summary::after { content: "−"; }
.key-help details > summary:hover, .optional-mac > summary:hover, .plugin-run-settings > summary:hover { color: var(--ink); }
.key-help details > p { margin: 4px 0 10px; color: var(--muted); font-size: 11px; line-height: 1.85; }
.planned-entry { color: #70563f; font-size: 11px; line-height: 1.85; }
.key-help details > .planned-entry { color: #70563f; }
.optional-mac { margin: 16px 0 20px; padding-top: 3px; border-top: 1px solid var(--line); }
.optional-mac > label { margin: 7px 0 10px; }
.optional-mac > p, .slot-help { color: var(--muted); font-size: 11px; line-height: 1.85; }
.optional-mac > p { padding-bottom: 5px; }
.connection-page-label { max-width: 330px; }
.slot-help { margin-top: 8px; }
.connection-status { margin-top: 20px; color: var(--muted); font-size: 11px; line-height: 1.9; overflow-wrap: anywhere; }
.connection-status[data-state="error"], .connection-status.is-error { color: #a03c23; }
.connection-status[data-state="saved"], .connection-status[data-state="ready"], .connection-status[data-state="success"], .connection-status.is-saved { color: #4b5940; }
.connection-saved { margin-top: 19px; padding-left: 14px; border-left: 2px solid #919d81; }
.connection-saved > strong { display: block; color: var(--ink); font-size: 12px; font-weight: 600; line-height: 1.8; }
.connection-saved > p { margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.85; }
.connection-saved > .text-link { min-height: 44px; margin-top: 3px; color: var(--accent-dark); font-size: 11px; }
.connection-docs { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 15px; }
.connection-docs > a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-dark); font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
.plugin-connection > .primary-button { margin-top: 13px; }
.connection-plan { min-width: 0; padding: 4px 0 4px 25px; border-left: 1px solid var(--line); }
.connection-plan h2 { font-size: 19px; line-height: 1.5; letter-spacing: -.025em; }
.connection-plan h3 { margin-top: 27px; font-size: 15px; line-height: 1.6; }
.connection-plan ol { display: grid; gap: 10px; margin: 19px 0 17px; padding-left: 19px; color: var(--muted); font-size: 12px; line-height: 1.85; }
.connection-plan ol li { padding-left: 3px; }
.connection-plan ol li::marker { color: var(--accent-dark); }
.connection-plan > p { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.9; }
.connection-plan > .planned-entry { color: #70563f; font-size: 11px; }
.connection-plan > .secondary-button { margin-top: 18px; }
.connection-local-note { max-width: 940px; margin-top: 25px; color: var(--muted); font-size: 11px; line-height: 1.85; }

.project-image.inkcard-preview { aspect-ratio: 4 / 3; background: #fff; }
.project-image.inkcard-preview img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.inkcard-detail { padding: 25px; border: 1px solid var(--line); background: #fff; }
.inkcard-detail figure { margin: 0; }
.inkcard-detail img { width: 400px; max-width: 100%; height: auto; max-height: none; aspect-ratio: 4 / 3; margin-inline: auto; object-fit: contain; background: #fff; }
.inkcard-detail figcaption { margin-top: 18px; padding: 12px 0 0; border-top: 1px solid #e8e8e1; color: var(--muted); background: transparent; font-size: 11px; line-height: 1.8; text-align: center; }
.inkcard-empty { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; padding: 24px; color: var(--muted); background: #faf9f6; text-align: center; }
.inkcard-empty > strong { max-width: 270px; color: var(--ink); font-family: var(--display-font); font-size: 19px; font-weight: 600; line-height: 1.5; letter-spacing: -.025em; }
.inkcard-empty > p, .inkcard-empty > span, .inkcard-empty > small { max-width: 260px; font-size: 11px; line-height: 1.85; }
.inkcard-empty > .kicker { color: var(--accent-dark); font-size: 10px; }
.inkcard-detail.inkcard-empty { min-height: 300px; }
.plugin-start-banner { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin: 4px 0 30px; padding: 21px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.plugin-start-banner > div { min-width: 0; }
.plugin-start-banner h2, .plugin-start-banner strong { font-family: var(--display-font); font-size: 18px; font-weight: 600; line-height: 1.6; letter-spacing: -.025em; }
.plugin-start-banner p { max-width: 680px; margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.85; }
.plugin-start-banner > a, .plugin-start-banner > button { min-height: 44px; flex-shrink: 0; }
.plugin-run-settings { margin-top: 21px; padding-top: 4px; border-top: 1px solid var(--line); }
.plugin-run-settings > summary { min-height: 48px; }
.plugin-run-settings > summary::after { top: 10px; }
.plugin-run-settings > .ai-context-fields { margin: 10px 0 19px; }
.plugin-run-settings > p { margin: 3px 0 14px; color: var(--muted); font-size: 11px; line-height: 1.85; }

@media (max-width: 1000px) {
  .connection-page-layout { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 30px; }
  .connection-page-form { padding: 24px; }
  .connection-plan { padding-left: 22px; }
}

@media (max-width: 767px) {
  .connection-intro { padding: 6px 0 24px; }
  .connection-intro h1 { font-size: 30px; }
  .connection-intro > p:not(.kicker) { font-size: 13px; }
  .connection-page-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 5px; }
  .connection-page-form { padding: 21px; }
  .plugin-connection { max-width: none; }
  .plugin-connection input[type="password"], .plugin-connection input[type="text"], .plugin-connection select { min-height: 48px; font-size: 16px; }
  .connection-key-label, .connection-page-label, .optional-mac > label { font-size: 13px; }
  .connection-route > strong { font-size: 15px; }
  .connection-source > label { min-height: 46px; padding-inline: 12px; font-size: 12px; }
  .connection-plan { padding: 23px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .connection-plan > p { max-width: 570px; }
  .connection-plan ol { gap: 7px; }
  .connection-plan h3 { margin-top: 21px; }
  .connection-local-note { margin-top: 23px; }
  .inkcard-detail { padding: 18px; }
  .inkcard-detail figcaption { margin-top: 15px; font-size: 10px; }
  .plugin-start-banner { align-items: flex-start; gap: 18px; padding: 19px 0; }
  .plugin-start-banner h2, .plugin-start-banner strong { font-size: 17px; }
  .plugin-start-banner p { font-size: 11px; }
}

@media (max-width: 520px) {
  .connection-page-form { padding: 19px 17px; }
  .connection-route { margin-bottom: 18px; padding-left: 12px; }
  .connection-source { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 21px; }
  .key-help { display: block; }
  .key-help > details { width: 100%; }
  .optional-mac { margin-top: 14px; }
  .connection-page-label { max-width: none; }
  .connection-docs { gap: 0 18px; }
  .plugin-connection > .primary-button { width: 100%; }
  .inkcard-detail { padding: 13px; }
  .inkcard-empty { padding: 22px 18px; }
  .inkcard-empty > strong { font-size: 18px; }
  .inkcard-detail.inkcard-empty { min-height: 250px; }
  .plugin-start-banner { align-items: stretch; flex-direction: column; gap: 14px; }
  .plugin-start-banner > a, .plugin-start-banner > button { align-self: flex-start; }
}

/* Keep the actual plugin output in view on small screens. */
.plugin-connection .plugin-agent-controls { margin-top: 22px; }
@media (max-width: 520px) {
  .connection-source { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .connection-source > label { padding-inline: 10px; gap: 7px; }
  .key-help { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .key-help > details { width: auto; }
  .key-help > details[open] { grid-column: 1 / -1; }
  [data-page="catalog"][data-family="plugins"] .intro-v2 { padding: 23px 0 20px; }
  [data-page="catalog"][data-family="plugins"] .intro-v2 > p:not(.kicker) { display: none; }
  [data-page="catalog"][data-family="plugins"] .category-entries { margin-bottom: 18px; }
  [data-page="catalog"][data-family="plugins"] .category-entry { padding: 14px; }
  [data-page="catalog"][data-family="plugins"] .category-label { flex-direction: row; align-items: baseline; gap: 6px; font-size: 19px; }
  [data-page="catalog"][data-family="plugins"] .category-entry h2 { margin-top: 7px; font-size: 12px; }
  [data-page="catalog"][data-family="plugins"] .category-entry p { display: none; }
  [data-page="catalog"][data-family="plugins"] .category-entry > span { top: 13px; right: 11px; font-size: 18px; }
  .plugin-start-banner { flex-direction: row; align-items: center; gap: 14px; margin-bottom: 20px; padding: 11px 0; }
  .plugin-start-banner strong { font-size: 12px; }
  .plugin-start-banner p { display: none; }
  .plugin-start-banner > a { padding-inline: 10px; font-size: 11px; }
}

/* Shared project download totals: catalogs, detail headers and related cards. */
.project-meta { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 5px 12px; margin-bottom: 6px; }
.project-meta .project-byline { margin: 0; }
.view-stat { display: inline-flex; align-items: center; flex-shrink: 0; gap: 4px; color: var(--muted); font-size: 11px; line-height: 1.5; white-space: nowrap; }
.view-stat svg { flex-shrink: 0; align-self: center; }
.view-stat strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.view-stat-detail { gap: 6px; font-size: 12px; }

/* Compact category navigation, separate from the firmware/plugin entry cards. */
.plugin-type-tabs { display: flex; flex-wrap: wrap; gap: 6px; overflow: visible; padding: 5px; border: 1px solid var(--line); border-radius: 9px; background: #efeee8; }
.plugin-type-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 13px; border-radius: 6px; font-size: 12px; line-height: 1.4; }
.plugin-type-tabs button[aria-pressed="true"] { color: var(--accent-dark); background: var(--surface); box-shadow: 0 1px 3px #1718170c; }
.plugin-type-tabs button[aria-pressed="true"]::after { display: none; }
.plugin-type-tabs button:last-child { margin-left: auto; }
.type-count { font-size: 10px; font-weight: 400; font-variant-numeric: tabular-nums; color: var(--muted); }
.plugin-connection-help, .plugin-local-help { margin-top: 12px; color: var(--muted); font-size: 12px; line-height: 1.9; }
.plugin-local-help strong { margin-right: 8px; color: var(--ink); font-weight: 500; }
.plugin-connection-help a { display: inline-block; color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.local-install-status { margin: 24px 0; padding: 18px 20px; border-left: 3px solid var(--accent); background: var(--surface-soft); }
.local-install-status strong { display: block; margin-bottom: 7px; font-size: 14px; }
.local-install-status p { margin: 5px 0; font-size: 12px; color: var(--muted); line-height: 1.8; }
.local-install-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.local-task-help { margin: 10px 0 20px; color: var(--muted); font-size: 12px; }
.local-task-text { padding: 20px; max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.9 var(--body-font); }
.local-availability { margin: 16px 0; padding: 8px 10px; border-radius: 5px; background: var(--surface-soft); color: var(--muted); font-size: 11px; }
.retired-project { padding: 65px 0; }
.retired-project h1 { margin: 12px 0; }
.retired-project > p { margin-bottom: 24px; }
@media (max-width: 520px) {
  .plugin-type-tabs { gap: 3px; padding: 4px; }
  .plugin-type-tabs button { flex: 1; gap: 4px; min-height: 44px; padding: 7px 6px; font-size: 11px; }
  .plugin-type-tabs button:last-child { flex: 0 1 auto; margin-left: 0; padding-inline: 9px; }
  .type-count { font-size: 9px; }
  .local-install-status { padding: 15px; }
  .local-install-actions { flex-direction: column; }
}