:root {
  color-scheme: light;
  --paper: #f3efea; --surface: #fbf9f6; --soft: #e9e3dc;
  --ink: #262122; --muted: #71676a; --line: #dcd5cf;
  --accent: #6b5059; --accent-hover: #533b43; --on-accent: #fffaf7;
  --selected: #e5d9da; --warning: #956127; --radius: 12px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #181617; --surface: #211e1f; --soft: #2b2728;
  --ink: #ebe5e2; --muted: #bdb3b2; --line: #40383b;
  --accent: #dcc3c8; --accent-hover: #eedade; --on-accent: #33262a;
  --selected: #3a3033; --warning: #d9b093;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 86px; -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 15px/1.6 var(--font); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
body:has(dialog[open]) { overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
button, select, summary { cursor: pointer; }
button { touch-action: manipulation; }
button:disabled { opacity: .45; cursor: not-allowed; }
a { color: inherit; text-underline-offset: 4px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
h1, h2, h3, p, figure, dl { margin: 0; }
h1, h2, h3 { line-height: 1.2; }
h1, h2 { letter-spacing: -.045em; }
code, kbd, pre { font-family: var(--mono); }
.shell { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 40px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 100; padding: 12px; color: var(--paper); background: var(--ink); }
.skip-link:focus { top: 12px; }
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.site-header { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s; }
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 4px 24px #26212205; }
.reading-progress { position: fixed; top: 0; left: 0; z-index: 50; width: 100%; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.header-inner { min-height: 64px; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; font: 600 17px var(--mono); background: var(--accent); color: var(--on-accent); }
.brand-short { font-weight: 700; font-size: 17px; }
.brand-divider { color: var(--muted); }
.brand-name { font-size: 12px; color: var(--muted); }
.desktop-nav { position: relative; display: flex; align-items: center; gap: 26px; margin-right: auto; }
.desktop-nav a { position: relative; z-index: 1; color: var(--muted); text-decoration: none; font-size: 13px; padding-block: 14px; }
.nav-ink { position: absolute; top: 0; left: 0; background: var(--soft); border-radius: 8px; opacity: 0; pointer-events: none; transition: transform .45s cubic-bezier(.2,.85,.25,1.12), width .45s cubic-bezier(.2,.85,.25,1.12), opacity .2s; }
.nav-ink.is-visible { opacity: 1; }
.desktop-nav a:hover, .text-link:hover { color: var(--ink); }
.header-actions { display: flex; margin-left: auto; gap: 2px; }
.button, .icon-button { display: inline-flex; justify-content: center; align-items: center; gap: 10px; min-height: 44px; border: 1px solid transparent; border-radius: 10px; padding: 9px 16px; background: transparent; font-size: 13px; font-weight: 600; text-decoration: none; transition: background-color .2s, transform .2s, border-color .2s; }
.icon-button { min-width: 44px; padding: 10px; }
.icon-button:hover { background: var(--soft); }
.button:hover { transform: translateY(-2px); }
.primary { color: var(--on-accent); background: var(--accent); }
.primary:hover { background: var(--accent-hover); }
.secondary { background: var(--surface); border-color: var(--line); }
.secondary:hover { border-color: var(--accent); }
.quiet { color: var(--muted); }
.text-button { border: 0; background: none; color: var(--accent); min-height: 44px; padding: 8px 0; font-size: 12px; text-align: left; }
.text-link { color: var(--accent); font-size: 13px; text-decoration: none; }
.menu-button, .mobile-nav { display: none; }
.intro { position: relative; overflow: clip; }
.hero-inner { position: relative; padding-top: 72px; }
.hero-inner > :not(.hero-field) { position: relative; z-index: 1; }
.release-badge { display: inline-flex; gap: 12px; align-items: center; font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px; text-decoration: none; background: var(--paper); }
.release-badge span:first-child { color: var(--accent); font-size: 9px; }
.hero-inner h1 { font-size: clamp(44px, 7.4vw, 96px); font-weight: 750; line-height: 1.04; letter-spacing: -.05em; margin-block: 36px 26px; position: relative; z-index: 1; }
.hero-inner h1 > span { display: block; width: fit-content; }
.hero-inner h1 .hero-second { font-size: 1.04em; margin-top: 12px; color: var(--muted); }
#hero-agent { font: inherit; letter-spacing: inherit; color: var(--accent); border: 0; background: none; padding: 0; text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 3px; text-underline-offset: 11px; max-width: 100%; }
#hero-agent:hover { text-decoration-color: var(--accent); }
#hero-agent.agent-reel { display: inline-block; position: relative; height: 1.14em; vertical-align: -.14em; overflow: clip; text-decoration: none; border-bottom: 3px solid var(--line); }
#hero-agent.agent-reel:hover { border-color: var(--accent); }
.agent-track { display: flex; align-items: flex-start; flex-direction: column; width: max-content; will-change: transform; }
.agent-track > span { display: block; flex: 0 0 auto; height: 1.14em; line-height: 1.14; padding-right: .08em; white-space: nowrap; }
.hero-wordmark { white-space: nowrap; }
.hero-letter { display: inline-block; }
.intro-description { font-size: 17px; line-height: 1.7; color: var(--muted); max-width: 550px; position: relative; z-index: 1; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero-actions .primary { min-height: 58px; padding-inline: 20px; font-size: 14px; text-align: left; }
.hero-actions .primary { transition: translate .45s cubic-bezier(.2,.85,.25,1.12), transform .25s, background-color .2s; }
.hero-actions .primary > span:first-child { font-size: 22px; }
.hero-actions small { display: block; font-size: 11px; font-weight: 400; opacity: .85; }
.hero-field { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero-field i { position: absolute; display: block; height: 38px; width: 140px; border-radius: 40px; transform: rotate(-30deg); opacity: .8; }
.field-capsule { position: absolute; top: 0; left: 0; border-radius: 100px; transform-origin: center; will-change: transform, opacity; }
.hero-field i:nth-child(1) { top: 15px; right: 38%; background: #d9ccb8; width: 150px; }
.hero-field i:nth-child(2) { top: 48px; right: 31%; background: #aca4c1; width: 165px; }
.hero-field i:nth-child(3) { top: 22px; right: 21%; background: #c3a1a8; width: 65px; }
.hero-field i:nth-child(4) { top: 142px; right: 8%; background: #aca4c1; width: 110px; }
.hero-field i:nth-child(5) { top: 280px; right: 1%; background: #7d79b0; width: 170px; }
.hero-field i:nth-child(6) { top: 344px; right: 3%; background: #58738f; width: 100px; }
.hero-field i:nth-child(7) { top: 360px; right: -12%; background: #a2b09b; width: 165px; }
.hero-field i:nth-child(8) { top: 411px; right: 8%; background: #92b1ca; width: 40px; height: 40px; }
:root[data-theme="dark"] .hero-field { opacity: .5; }
.library-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 80px; border-block: 1px solid var(--line); padding-block: 28px; }
.library-stats dt { font-size: 14px; font-weight: 650; }
.library-stats dd { margin: 7px 0 0; font-size: 12px; color: var(--muted); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 30px; }
.section-heading h2 { font-size: 36px; font-weight: 650; }
.section-heading p:not(.section-number) { color: var(--muted); font-size: 14px; margin-top: 12px; max-width: 680px; }
.section-number { font: 12px var(--mono); color: var(--accent); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.section-number::before { content: ''; width: 22px; height: 6px; border-radius: 6px; background: #aca4c1; transform: rotate(-25deg); }
.catalog { padding-top: 84px; }
.search-form { display: flex; align-items: center; min-height: 56px; gap: 14px; padding-inline: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.search-form:focus-within { border-color: var(--accent); }
.search-form .icon { color: var(--accent); }
.search-form input { width: 100%; min-width: 0; height: 54px; padding: 0; border: 0; background: transparent; outline: none; font-size: 15px; }
.search-form input::placeholder { color: var(--muted); }
.search-form input::-webkit-search-cancel-button { display: none; }
.search-form kbd { font-size: 11px; border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; color: var(--muted); white-space: nowrap; }
.search-suggestions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-block: 12px 30px; font-size: 11px; color: var(--muted); }
.search-suggestions > span { margin-right: 5px; }
.search-suggestions button { min-height: 32px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); font: 11px var(--mono); }
.search-suggestions button:hover { border-color: var(--accent); color: var(--accent); }
.catalog-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; }
.catalog-sidebar { align-self: start; }
.sidebar-heading h2, .sidebar-field > label, .source-filters legend { display: block; color: var(--muted); text-transform: uppercase; font-size: 10px; letter-spacing: .055em; font-weight: 500; margin-bottom: 12px; }
.category-navigation { display: flex; flex-direction: column; gap: 2px; }
.category-navigation button { display: flex; justify-content: space-between; gap: 12px; align-items: center; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; text-align: left; font-size: 12px; }
.category-navigation button > span:last-child { color: var(--muted); font: 11px var(--mono); }
.category-navigation button:hover { background: var(--soft); }
.category-navigation button[aria-pressed="true"] { color: var(--accent); background: var(--selected); font-weight: 600; }
.sidebar-field { margin-top: 24px; }
select, input[type="text"] { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); font-size: 12px; }
input[aria-invalid="true"] { border-color: var(--warning); }
.source-filters { border: 0; padding: 0; margin: 24px 0 0; }
.source-filters label { display: flex; align-items: center; gap: 9px; min-height: 44px; font-size: 12px; cursor: pointer; }
.source-filters input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.source-filters label > span:last-child { margin-left: auto; color: var(--muted); font: 11px var(--mono); }
.sidebar-help { background: var(--surface); border: 1px solid var(--line); padding: 16px; border-radius: var(--radius); margin-top: 24px; }
.sidebar-help .icon { color: var(--accent); margin-bottom: 10px; }
.sidebar-help h3 { font-size: 12px; }
.sidebar-help p { color: var(--muted); font-size: 11px; margin-block: 8px; }
.sidebar-help a { color: var(--accent); text-decoration: none; font-size: 11px; }
.catalog-main { min-width: 0; }
.results-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; }
#results-status { font-size: 14px; font-weight: 550; }
.results-controls { display: flex; align-items: center; gap: 10px; }
.results-controls select { width: auto; max-width: 200px; min-height: 40px; padding: 7px 10px; font-size: 11px; }
.view-switch { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 2px; background: var(--surface); }
.view-switch .icon-button { min-width: 36px; min-height: 36px; padding: 8px; border-radius: 7px; }
.view-switch .icon { width: 16px; height: 16px; }
.view-switch button[aria-pressed="true"] { color: var(--accent); background: var(--selected); }
.filter-summary { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-block: 8px 18px; min-height: 36px; font-size: 11px; color: var(--muted); }
#filter-description { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filter-chip { border: 0; padding: 4px 8px; background: var(--selected); color: var(--accent); border-radius: 6px; font-size: 10px; }
button.filter-chip { min-height: 32px; }
.filter-summary > button { flex-shrink: 0; }
.skills-results { display: flex; flex-direction: column; gap: 12px; }
.skill-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: start; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 22px; }
.skill-row:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.skill-symbol { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--soft); color: var(--accent); flex-shrink: 0; }
.skill-symbol .icon { width: 19px; height: 19px; }
.skill-info { min-width: 0; }
.skill-name { padding: 0; border: 0; background: none; text-align: left; font: 600 13px/1.4 var(--mono); overflow-wrap: anywhere; }
.skill-name:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.skill-description { color: var(--muted); font-size: 12px; margin-top: 8px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.skill-metadata { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.skill-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.skill-tags span, .skill-tag { background: var(--soft); border-radius: 5px; padding: 3px 7px; color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.skill-author { color: var(--muted); font-size: 10px; }
.skill-open { min-height: 40px; padding: 8px 10px; font-size: 10px; white-space: nowrap; }
.skills-results.is-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.is-grid .skill-row { grid-template-columns: 36px minmax(0, 1fr); }
.is-grid .skill-open { grid-column: 1 / -1; justify-self: end; }
.pagination { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 24px; font-size: 11px; color: var(--muted); }
.catalog-note { color: var(--muted); font-size: 10px; margin-top: 24px; max-width: 85ch; }
.loading-skeleton > div { height: 130px; border-radius: 12px; background: var(--soft); opacity: .6; margin-bottom: 12px; }
.empty-state { text-align: center; padding: 40px 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.empty-state h3, .empty-state h2 { font-size: 20px; margin-block: 14px; }
.empty-state p { color: var(--muted); font-size: 13px; margin-bottom: 20px; }
.empty-state > a { display: block; margin-top: 16px; }
.support-section { margin-top: 88px; padding-block: 60px; border-block: 1px solid var(--line); }
.collection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.collection-card { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 24px; }
.collection-card > .icon { color: var(--accent); margin-bottom: 20px; }
.collection-card h3 { font-size: 17px; font-weight: 550; }
.collection-card p { color: var(--muted); font-size: 12px; margin-block: 10px 16px; }
.collection-card button { display: inline-block; min-height: 32px; padding: 5px 8px 5px 0; border: 0; background: none; color: var(--accent); font: 10px var(--mono); text-align: left; overflow-wrap: anywhere; max-width: 100%; }
.collection-card button:hover { text-decoration: underline; }
.collection-sources { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 18px; }
.blender-note { display: flex; justify-content: space-between; align-items: center; gap: 32px; border-top: 1px solid var(--line); padding-top: 28px; margin-top: 24px; }
.blender-note h3 { font-size: 17px; }
.blender-note p { color: var(--muted); font-size: 12px; margin-top: 10px; max-width: 680px; }
.blender-note > button { flex-shrink: 0; }
.quickstart { padding-top: 64px; padding-bottom: 64px; }
.steps { padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-block: 32px; }
.steps li { display: flex; align-items: start; gap: 14px; }
.steps li > span { color: var(--accent); font: 11px var(--mono); padding-top: 3px; }
.steps h3 { font-size: 14px; }
.steps p { color: var(--muted); font-size: 12px; margin-top: 10px; }
.quickstart-details { border: 1px solid var(--line); border-radius: 12px; padding: 0 20px; background: var(--surface); }
.quickstart-details summary { min-height: 52px; padding-block: 14px; font-size: 13px; }
.quickstart-commands { padding: 12px 0 24px; display: grid; gap: 24px; }
.quickstart-commands h3 { font-size: 14px; margin-bottom: 12px; }
.quickstart-commands > p { color: var(--muted); font-size: 12px; }
.command-box { display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); min-width: 0; }
.command-box code { flex: 1; min-width: 0; white-space: pre-wrap; font-size: 12px; overflow-wrap: anywhere; }
.site-footer { border-top: 1px solid var(--line); padding-block: 32px; }
.footer-inner { display: flex; justify-content: space-between; gap: 24px; align-items: center; font-size: 11px; }
.footer-inner > p { color: var(--muted); }
.footer-inner > div { display: flex; flex-wrap: wrap; gap: 16px; color: var(--accent); }
.footer-inner a { text-decoration: none; }
.detail-view { padding-top: 36px; padding-bottom: 64px; min-height: 70vh; }
.breadcrumb { display: flex; gap: 16px; align-items: center; color: var(--muted); font-size: 12px; margin-bottom: 32px; }
.breadcrumb button { border: 0; background: none; padding: 0; min-height: 44px; font-size: 12px; }
.breadcrumb code { font-size: 11px; overflow-wrap: anywhere; }
.detail-heading { display: flex; justify-content: space-between; gap: 28px; align-items: center; }
.detail-title-group { display: flex; align-items: center; gap: 18px; min-width: 0; }
.detail-title-group > .skill-symbol { width: 56px; height: 56px; }
.eyebrow { font: 10px var(--mono); color: var(--muted); text-transform: uppercase; margin-bottom: 10px; }
.detail-heading h1 { font: 650 32px/1.25 var(--mono); letter-spacing: -.04em; overflow-wrap: anywhere; }
.detail-actions { display: flex; gap: 8px; flex-shrink: 0; }
.detail-description { font-size: 14px; color: var(--muted); max-width: 880px; margin-top: 24px; }
.detail-provenance { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; font-size: 11px; margin-block: 22px 32px; }
.detail-provenance a { color: var(--accent); overflow-wrap: anywhere; }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.detail-layout > div { min-width: 0; }
.runbook-panel { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.runbook-panel > header { display: flex; align-items: center; gap: 10px; padding: 16px 24px; border-bottom: 1px solid var(--line); font-size: 11px; }
.runbook-panel > header > span { margin-left: auto; color: var(--muted); font-size: 10px; }
.runbook-content { padding: 28px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.runbook-content h2, .runbook-content h3, .runbook-content h4, .runbook-content h5, .runbook-content h6 { margin: 30px 0 14px; color: var(--ink); scroll-margin-top: 90px; letter-spacing: -.015em; }
.runbook-content > :first-child { margin-top: 0; }
.runbook-content h2 { font-size: 23px; }
.runbook-content h3 { font-size: 19px; }
.runbook-content h4, .runbook-content h5, .runbook-content h6 { font-size: 16px; }
.runbook-content p { margin-block: 12px; }
.runbook-content ul, .runbook-content ol { padding-left: 22px; margin-block: 14px; }
.runbook-content li { margin-block: 7px; }
.runbook-content a { color: var(--accent); }
.runbook-content code { font-size: .9em; background: var(--soft); padding: 2px 4px; border-radius: 4px; }
.runbook-content pre { overflow-x: auto; padding: 16px; line-height: 1.7; font-size: 11px; margin: 0; background: var(--paper); }
.runbook-content pre code { padding: 0; background: none; border-radius: 0; font-size: inherit; }
.code-block { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; margin-block: 18px; }
.code-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10px; color: var(--muted); }
.code-block .code-heading { padding-inline: 14px; min-height: 40px; border-bottom: 1px solid var(--line); }
.code-heading > span { font: 9px var(--mono); }
.code-block .text-button { min-height: 36px; font-size: 10px; }
.runbook-content blockquote { margin: 18px 0; padding: 12px 16px; background: var(--selected); border-left: 3px solid var(--accent); border-radius: 6px; }
.runbook-content hr { border: 0; border-top: 1px solid var(--line); margin-block: 24px; }
.table-scroll { overflow-x: auto; margin-block: 20px; }
.runbook-content table { border-collapse: collapse; min-width: 100%; font-size: 11px; }
.runbook-content th, .runbook-content td { border: 1px solid var(--line); padding: 10px; text-align: left; }
.runbook-content th { background: var(--soft); color: var(--ink); }
.install-panel, .runbook-toc { padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.install-panel h2 { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 550; letter-spacing: -.02em; }
.install-panel h2 .icon { color: var(--accent); }
.install-panel > p { font-size: 11px; color: var(--muted); margin-top: 12px; }
.install-panel label { display: block; font-size: 11px; font-weight: 600; margin: 20px 0 8px; }
.install-panel input[type="text"] { font-family: var(--mono); font-size: 11px; }
.install-panel .field-help { font-size: 10px; color: var(--muted); margin-top: 10px; }
.install-panel .mode-note { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-block: 22px; font-size: 10px; }
.mode-note code { font-size: 10px; background: var(--selected); color: var(--accent); border-radius: 5px; padding: 4px 7px; }
.code-heading label { margin: 0; }
.installation-code { margin: 10px 0; padding: 15px; background: var(--paper); border: 1px solid var(--line); border-radius: 9px; font-size: 11px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.copy-install { width: 100%; }
.runbook-toc { margin-top: 24px; }
.runbook-toc h2 { text-transform: uppercase; color: var(--muted); font-size: 10px; letter-spacing: .025em; margin-bottom: 12px; }
.runbook-toc a { display: block; padding-block: 9px; font-size: 11px; color: var(--muted); text-decoration: none; }
.runbook-toc a:hover { color: var(--accent); }
.detail-source-note { display: flex; align-items: start; gap: 10px; color: var(--muted); font-size: 10px; margin-top: 24px; }
.next-skills { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px; margin-top: 24px; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; }
.next-skills h2 { font-size: 14px; letter-spacing: 0; }
.next-skills p { color: var(--muted); font-size: 11px; margin-top: 6px; }
.next-skills .button { white-space: nowrap; }
.mobile-filter-button { display: none; }
.filters-dialog { width: min(440px, 100%); max-height: min(90dvh, 960px); border: 1px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--ink); padding: 0; }
.filters-dialog::backdrop { background: #26212266; }
.dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; margin: 0; border-bottom: 1px solid var(--line); }
.dialog-heading h2 { font-size: 20px; letter-spacing: -.02em; }
.dialog-heading button { font-size: 26px; font-weight: 400; }
#mobile-filter-content { padding: 18px 20px; overflow-y: auto; max-height: calc(90dvh - 168px); }
#mobile-filter-content h3, #mobile-filter-content > label { font-size: 13px; font-weight: 600; display: block; margin-bottom: 12px; }
#mobile-filter-content .category-navigation { margin-bottom: 24px; }
#mobile-filter-content .category-navigation button { min-height: 44px; font-size: 13px; }
#mobile-filter-content .source-filters legend { text-transform: none; color: var(--ink); font-size: 13px; font-weight: 600; }
.dialog-actions { display: flex; gap: 12px; padding: 16px 20px; background: var(--surface); border-top: 1px solid var(--line); }
.dialog-actions button { flex: 1; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); padding: 12px 20px; max-width: calc(100% - 32px); background: var(--ink); color: var(--paper); border-radius: 12px; font-size: 12px; z-index: 100; box-shadow: 0 8px 30px #0002; }
.manual-copy { position: fixed; bottom: 20px; right: 20px; width: min(480px, calc(100vw - 40px)); padding: 20px; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; z-index: 100; box-shadow: 0 8px 30px #0003; font-size: 13px; }
.manual-copy textarea { display: block; width: 100%; margin-block: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); font: 12px var(--mono); resize: vertical; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .release-badge { animation: appear-up .8s cubic-bezier(.2,.85,.25,1.12) .08s backwards; }
  .release-badge > span:first-child { animation: signal-pulse 2.4s ease-in-out infinite; }
  .hero-letter { animation: letter-enter .85s cubic-bezier(.2,.85,.25,1.12) calc(.12s + var(--letter) * 35ms) backwards; transition: transform .6s cubic-bezier(.2,.85,.25,1.3); }
  .hero-letter:hover { transform: translateY(-.08em) rotate(-5deg); transition-duration: .15s; }
  .hero-letter:nth-child(even):hover { transform: translateY(-.08em) rotate(5deg); }
  .hero-second { animation: appear-up .85s cubic-bezier(.2,.85,.25,1.12) .35s backwards; }
  .intro-description { animation: appear-up .8s cubic-bezier(.2,.85,.25,1.12) .5s backwards; }
  .hero-actions { animation: appear-up .8s cubic-bezier(.2,.85,.25,1.12) .6s backwards; }
  [data-reveal="pending"] { opacity: 0; translate: 0 22px; }
  [data-reveal="shown"] { animation: appear-up .7s cubic-bezier(.2,.85,.25,1.12) var(--reveal-delay, 0ms) backwards; }
  .skill-row, .collection-card { transition: transform .45s cubic-bezier(.2,.85,.25,1.12), border-color .2s, box-shadow .3s; }
  .skill-row:hover, .collection-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 10px 24px #26212208; }
  .skill-open:hover > span, .hero-actions .primary:hover > span:first-child { animation: arrow-nudge .65s cubic-bezier(.2,.85,.25,1.12); }
  .filters-dialog[open] { animation: dialog-enter .5s cubic-bezier(.2,.85,.25,1.12); }
  .filters-dialog[open]::backdrop { animation: backdrop-enter .3s ease-out; }
  .toast:not([hidden]) { animation: toast-enter .5s cubic-bezier(.2,.85,.25,1.12); }
  .detail-heading { animation: appear-up .55s cubic-bezier(.2,.85,.25,1.12) backwards; }
}
@keyframes appear-up { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes letter-enter { from { opacity: 0; translate: 0 .55em; rotate: 7deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes signal-pulse { 50% { opacity: .4; scale: .75; } }
@keyframes arrow-nudge { 40% { transform: translateY(5px); } 70% { transform: translateY(-2px); } }
@keyframes dialog-enter { from { opacity: 0; translate: 0 42px; scale: .98; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes backdrop-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes toast-enter { from { opacity: 0; translate: 0 18px; scale: .94; } to { opacity: 1; translate: 0 0; scale: 1; } }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }
@media (max-width: 1100px) {
  .brand-name, .brand-divider { display: none; }
  .hero-field { opacity: .55; }
  .hero-field i:nth-child(4) { right: -1%; }
  .hero-field i:nth-child(5) { right: -9%; }
  .catalog-layout { grid-template-columns: 190px minmax(0, 1fr); gap: 24px; }
  .skill-row { grid-template-columns: 32px minmax(0, 1fr); padding: 18px; gap: 12px; }
  .skill-open { grid-column: 2; justify-self: start; }
  .detail-layout { grid-template-columns: minmax(0, 1fr) 310px; gap: 20px; }
}
@media (max-width: 800px) {
  .shell { padding-inline: 24px; }
  .desktop-nav { gap: 16px; }
  .hero-inner { padding-top: 44px; }
  .hero-field { opacity: .35; }
  .hero-field i:nth-child(1), .hero-field i:nth-child(2), .hero-field i:nth-child(3) { display: none; }
  .library-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 52px; }
  .catalog { padding-top: 56px; }
  .catalog-layout { grid-template-columns: 1fr; }
  .catalog-sidebar { display: none; }
  .mobile-filter-button { display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 10px; color: var(--accent); background: var(--selected); font-size: 13px; font-weight: 600; }
  .mobile-filter-button > span { background: var(--accent); color: var(--on-accent); padding: 1px 7px; border-radius: 12px; font-size: 11px; }
  .skill-row { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .skill-open { grid-column: 3; }
  .detail-heading { align-items: start; flex-direction: column; }
  .detail-layout { grid-template-columns: 1fr; }
  .detail-sidebar { grid-row: 1; }
  .runbook-toc, .detail-source-note { display: none; }
  .collection-grid { grid-template-columns: 1fr; }
  .collection-card { padding: 22px; }
  .steps { gap: 20px; }
  .footer-inner { flex-wrap: wrap; }
}
@media (max-width: 540px) {
  .shell { padding-inline: 20px; }
  .header-inner { min-height: 60px; gap: 12px; }
  .desktop-nav { gap: 14px; }
  .desktop-nav a { font-size: 11px; }
  .desktop-nav a:nth-of-type(2), .desktop-nav a:nth-of-type(4), #focus-search { display: none; }
  .header-actions { gap: 0; }
  .brand { gap: 7px; }
  .brand-mark { width: 26px; height: 26px; font-size: 14px; }
  .brand-short { font-size: 14px; }
  .icon-button { min-width: 44px; padding: 8px; }
  .hero-inner { padding-top: 36px; }
  .release-badge { font-size: 10px; gap: 8px; padding: 6px 10px; }
  .hero-inner h1 { font-size: clamp(28px, 8.5vw, 46px); margin-block: 28px 20px; line-height: 1.08; letter-spacing: -.04em; }
  .hero-inner h1 .hero-second { font-size: 1.4em; margin-top: 15px; }
  #hero-agent { text-underline-offset: 7px; text-decoration-thickness: 2px; }
  #hero-agent.agent-reel { border-bottom-width: 2px; }
  .intro-description { font-size: 14px; max-width: 95%; }
  .intro-description br { display: none; }
  .hero-actions { gap: 8px; margin-top: 24px; }
  .hero-actions .primary { min-height: 54px; padding-inline: 14px; font-size: 12px; }
  .hero-actions .quiet { padding-inline: 8px; font-size: 11px; }
  .hero-field i { width: 85px; height: 24px; }
  .hero-field i:nth-child(4) { top: 10px; right: -6%; }
  .hero-field i:nth-child(5), .hero-field i:nth-child(6), .hero-field i:nth-child(7), .hero-field i:nth-child(8) { display: none; }
  .library-stats { margin-top: 36px; gap: 20px 18px; padding-block: 24px; }
  .library-stats dt { font-size: 12px; }
  .library-stats dd { font-size: 10px; }
  .section-heading { align-items: start; gap: 18px; flex-direction: column; }
  .section-heading h2 { font-size: 30px; }
  .section-heading p:not(.section-number) { font-size: 12px; }
  .catalog { padding-top: 44px; }
  .catalog-heading > a { display: none; }
  .search-form { min-height: 52px; padding-inline: 12px; gap: 10px; }
  .search-form input { height: 50px; font-size: 13px; }
  .search-form kbd { display: none; }
  .search-suggestions { gap: 7px; padding-bottom: 20px; }
  .search-suggestions > span { display: none; }
  .search-suggestions button { min-height: 44px; font-size: 10px; }
  .results-controls { gap: 6px; }
  .results-controls select { max-width: 160px; font-size: 10px; min-height: 44px; }
  .view-switch { display: none; }
  #results-status { font-size: 12px; }
  .filter-summary { align-items: start; margin-bottom: 12px; }
  .filter-summary > button { min-height: 32px; font-size: 10px; }
  #filter-description { font-size: 10px; }
  .skill-row { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 12px; }
  .skill-row > .skill-symbol { display: none; }
  .skill-name { font-size: 12px; }
  .skill-description { font-size: 12px; -webkit-line-clamp: 3; }
  .skill-metadata { margin-top: 10px; gap: 8px; }
  .skill-open { grid-column: 1; width: 100%; min-height: 44px; font-size: 12px; }
  .skills-results.is-grid { grid-template-columns: 1fr; }
  .pagination { font-size: 10px; gap: 10px; }
  .pagination .button { padding-inline: 12px; font-size: 11px; }
  .catalog-note { font-size: 9px; }
  .support-section { margin-top: 56px; padding-block: 40px; }
  .blender-note { flex-direction: column; align-items: start; gap: 20px; }
  .quickstart { padding-block: 44px; }
  .steps { grid-template-columns: 1fr; gap: 26px; }
  .command-box { flex-direction: column; align-items: stretch; }
  .quickstart-details { padding-inline: 14px; }
  .footer-inner { align-items: start; gap: 16px; flex-direction: column; }
  .footer-inner > p { font-size: 10px; }
  .detail-view { padding-top: 24px; }
  .breadcrumb { font-size: 11px; margin-bottom: 20px; gap: 10px; }
  .detail-title-group { gap: 12px; }
  .detail-title-group > .skill-symbol { width: 42px; height: 42px; }
  .detail-heading h1 { font-size: 22px; }
  .detail-actions { flex-wrap: wrap; }
  .detail-actions .button { font-size: 11px; }
  .detail-description { font-size: 12px; }
  .detail-provenance { gap: 10px 16px; }
  .install-panel, .runbook-toc { padding: 20px; }
  .runbook-content { padding: 20px; font-size: 12px; }
  .runbook-content h2 { font-size: 21px; }
  .runbook-content h3 { font-size: 18px; }
  .runbook-panel > header { padding-inline: 20px; }
  .next-skills { flex-direction: column; align-items: start; padding: 20px; }
  .filters-dialog { margin: auto 0 0; max-width: 100%; width: 100%; max-height: 93dvh; border-radius: 22px 22px 0 0; }
  #mobile-filter-content { max-height: calc(93dvh - 170px); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

.filters-dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
.filters-dialog .dialog-heading, .filters-dialog .dialog-actions { flex-shrink: 0; }
#mobile-filter-content { min-height: 0; }