/* ===========================
   CSS library (2026-10-03): /css/<slug>/ pages and the library blocks on /code-editor.html.
   Pages are generated by _agency_csslib.py. Colours, type and radii come from the homepage
   tokens in /assets/agency.css (--ag-*); do not introduce new brand colours here.
   =========================== */

.cl-page {
  margin: 0;
  padding-top: var(--ag-nav-h, 64px);
  background: var(--ag-bg);
  color: var(--ag-ink);
  font-family: var(--ag-font);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
.cl-page *, .cl-page *::before, .cl-page *::after { box-sizing: border-box; }
.cl-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cl-page code, .cl-hubfeed code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .9em; padding: 1px 5px; border-radius: 5px; background: var(--ag-soft); color: var(--ag-a2); }

/* ---------- library bar ---------- */
/* The bar sits flush under the fixed site nav; .ag-body's usual +24px gap would leave a strip. */
body:has(> .cl-top) { padding-top: var(--ag-nav-h, 64px) !important; }
.cl-top {
  position: sticky; top: var(--ag-nav-h, 64px); z-index: 900;
  display: flex; align-items: center; gap: 18px;
  height: 52px; padding: 0 max(20px, calc((100vw - 1200px) / 2 + 24px));
  background: rgba(14, 17, 24, .9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ag-line);
}
.cl-brand { display: flex; align-items: center; gap: 9px; color: var(--ag-ink); text-decoration: none; font-weight: 800; font-size: 14px; white-space: nowrap; }
.cl-brand em { font-style: normal; font-family: 'JetBrains Mono', monospace; font-weight: 500; color: var(--ag-a2); }
.cl-mark { width: 26px; height: 26px; border-radius: 7px; background: var(--ag-grad); display: grid; place-items: center; }
.cl-mark svg { width: 15px; height: 15px; }
.cl-links { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.cl-links::-webkit-scrollbar { display: none; }
.cl-links a { flex: 0 0 auto; padding: 7px 11px; border-radius: 8px; color: var(--ag-mut); font-size: 13px; font-weight: 600; text-decoration: none; text-transform: uppercase; letter-spacing: .04em; transition: color .15s, background .15s; }
.cl-links a:hover { color: var(--ag-ink); background: rgba(255,255,255,.05); }
.cl-links a.on { color: var(--ag-ink); background: var(--ag-soft); box-shadow: inset 0 -2px 0 var(--ag-accent); }
.cl-lsep { flex: 0 0 1px; height: 18px; margin: 0 6px; background: var(--ag-line2); }
.cl-cta { flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; background: var(--ag-grad); color: var(--ag-ink-on-accent) !important; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.cl-top a:focus-visible, .cl-page button:focus-visible, .cl-page summary:focus-visible, .cl-page input:focus-visible { outline: 2px solid var(--ag-a2); outline-offset: 2px; }

/* ---------- left sidebar (codefronts-style) ---------- */
.cl-layout { display: grid; grid-template-columns: 264px minmax(0, 1fr); align-items: start; }
.cl-layout > .ag-footer { grid-column: 1 / -1; }
.cl-sidenav {
  position: sticky; top: calc(var(--ag-nav-h, 64px) + 52px);
  height: calc(100vh - var(--ag-nav-h, 64px) - 52px);
  overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent;
  padding: 18px 14px 24px; border-right: 1px solid var(--ag-line); background: var(--ag-bg);
  font-family: var(--ag-font);
}
.cl-search-side { height: 44px; max-width: none; padding: 0 8px 0 12px; border-radius: 12px; box-shadow: none; margin-bottom: 18px; }
.cl-search-side input { font-size: 14px; }
.cl-search-side kbd { font-size: 10.5px; padding: 2px 6px; }
.cl-search-side .cl-search-res { left: 0; right: -120px; }
.cl-sn-h { margin: 18px 10px 8px; color: var(--ag-mut2); font: 600 11px 'JetBrains Mono', monospace; letter-spacing: .16em; text-transform: uppercase; }
.cl-sn-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; }
.cl-sn-row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 9px; color: var(--ag-ink2); font-size: 15px; font-weight: 500; cursor: pointer; list-style: none; transition: background .15s, color .15s; }
.cl-sn-tog { display: inline-flex; align-items: center; gap: 12px; margin: -6px -6px -6px 0; padding: 6px; background: none; border: 0; border-radius: 6px; color: inherit; font: inherit; cursor: pointer; }
.cl-sn-tog:focus-visible { outline: 2px solid var(--ag-a2); outline-offset: 1px; }
.cl-sn-grp:not([data-open]) > .cl-sn-sub { display: none; }
.cl-sn-row:hover { background: rgba(255,255,255,.04); color: var(--ag-ink); }
.cl-sn-dot { flex: 0 0 5px; height: 5px; border-radius: 50%; background: var(--cl-dot, var(--ag-mut2)); }
.cl-sn-label { flex: 1; }
.cl-sn-count { color: var(--ag-mut2); font: 500 12px 'JetBrains Mono', monospace; }
.cl-sn-grp[data-open] > .cl-sn-row { color: var(--ag-ink); }
.cl-sn-grp[data-open] > .cl-sn-row .cl-sn-dot { background: var(--cl-dot, var(--ag-a2)); box-shadow: 0 0 0 3px rgba(91,140,255,.18); }
.cl-sn-row.is-soon { cursor: default; color: var(--ag-mut2); }
.cl-sn-row.is-soon:hover { background: none; color: var(--ag-mut2); }
.cl-sn-soon { padding: 1px 7px; border: 1px solid var(--ag-line2); border-radius: 999px; color: var(--ag-mut2); font: 600 10px 'JetBrains Mono', monospace; letter-spacing: .06em; text-transform: uppercase; }
.cl-sn-sub { margin: 2px 0 6px 27px; padding: 0 0 0 12px; list-style: none; border-left: 1px solid var(--ag-line2); display: grid; gap: 1px; }
.cl-sn-sub a { display: block; padding: 6px 10px; border-radius: 8px; color: var(--ag-mut); font-size: 14px; text-decoration: none; }
.cl-sn-sub a:hover { color: var(--ag-ink); background: rgba(255,255,255,.04); }
.cl-sn-sub a.on { color: var(--ag-ink); background: var(--ag-soft); box-shadow: inset 2px 0 0 var(--ag-accent); }
.cl-sn-row:focus-visible, .cl-sn-sub a:focus-visible { outline: 2px solid var(--ag-a2); outline-offset: 1px; }
.cl-sn-promo { margin: 22px 4px 0; padding: 14px; border: 1px solid rgba(91,140,255,.35); border-radius: 12px; background: linear-gradient(180deg, rgba(91,140,255,.1), transparent); }
.cl-sn-ph { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; color: var(--ag-a2); font: 600 11px 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }
.cl-sn-live { width: 7px; height: 7px; border-radius: 50%; background: var(--ag-ok); }
.cl-sn-promo p:not(.cl-sn-ph) { margin: 0 0 8px; color: var(--ag-ink2); font-size: 14px; font-weight: 600; line-height: 1.45; }
.cl-sn-promo a { color: var(--ag-a2); font-size: 13.5px; font-weight: 700; text-decoration: none; }
.cl-burger { display: none; flex: 0 0 auto; flex-direction: column; justify-content: center; gap: 4px; width: 38px; height: 38px; padding: 0 9px; border: 1px solid var(--ag-line2); border-radius: 9px; background: none; cursor: pointer; }
.cl-burger span { height: 2px; border-radius: 2px; background: var(--ag-ink2); }
.cl-scrim { position: fixed; inset: 0; z-index: 940; background: rgba(0,0,0,.55); }

/* ---------- page grid ---------- */
.cl-wrap { max-width: 1200px; margin: 0 auto; padding: 36px 24px 72px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.cl-main { min-width: 0; }
.cl-path { margin: 0 0 14px; color: var(--ag-mut2); font: 500 13px 'JetBrains Mono', monospace; }
.cl-path b { color: var(--ag-a2); font-weight: 500; }
.cl-path b::after { content: ""; display: inline-block; width: 7px; height: 14px; margin-left: 2px; vertical-align: -2px; background: var(--ag-a2); animation: cl-caret 1.1s steps(1) infinite; }
@keyframes cl-caret { 50% { opacity: 0; } }
.cl-h1 { margin: 0 0 12px; font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.4rem); font-weight: 800; line-height: 1.05; letter-spacing: -.035em; }
.cl-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 18px; color: var(--ag-mut2); font: 500 12.5px 'JetBrains Mono', monospace; }
.cl-meta span + span::before { content: "·"; margin-right: 14px; color: var(--ag-line2); }
.cl-lead { max-width: 760px; margin: 0 0 20px; color: var(--ag-ink2); font-size: 17px; line-height: 1.65; }
.cl-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 26px; }
.cl-chips > span { color: var(--ag-mut2); font: 600 11px 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; margin-right: 4px; }
.cl-chip { padding: 6px 12px; border: 1px solid var(--ag-line2); border-radius: 999px; color: var(--ag-a2); font-size: 13px; font-weight: 600; text-decoration: none; }
.cl-chip:hover { background: var(--ag-soft); border-color: rgba(91,140,255,.45); }

.cl-filter { position: relative; display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.cl-filter input { flex: 1; height: 44px; padding: 0 16px; border: 1px solid var(--ag-line2); border-radius: 12px; background: var(--ag-bg2); color: var(--ag-ink); font: 500 15px var(--ag-font); }
.cl-filter input::placeholder { color: var(--ag-mut2); }
.cl-count { color: var(--ag-mut2); font: 500 12.5px 'JetBrains Mono', monospace; white-space: nowrap; }

/* ---------- demo cards ---------- */
.cl-list { display: grid; gap: 18px; }
.cl-demo { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); border: 1px solid var(--ag-line); border-radius: var(--ag-r2); background: var(--ag-card); overflow: hidden; scroll-margin-top: calc(var(--ag-nav-h, 64px) + 70px); }
.cl-demo[hidden] { display: none; }
.cl-prev { position: relative; min-height: 240px; border-right: 1px solid var(--ag-line); }
.cl-bg-dark { background: #0E1118; }
.cl-bg-light { background: #F3F5F9; }
.cl-prev iframe, .cl-fprev iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; }
.cl-info { padding: 22px 24px; display: flex; flex-direction: column; }
.cl-info h2 { margin: 0 0 8px; font-size: 19px; font-weight: 800; letter-spacing: -.015em; line-height: 1.3; }
.cl-info h2 span { color: var(--ag-a2); font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 15px; }
.cl-tags { display: flex; gap: 6px; margin: 0 0 10px; }
.cl-tag { padding: 3px 8px; border-radius: 6px; background: rgba(139,92,246,.14); color: #B79CFA; font: 600 11px 'JetBrains Mono', monospace; }
.cl-info p { margin: 0 0 16px; color: var(--ag-mut); font-size: 14.5px; line-height: 1.6; }
.cl-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.cl-act { min-height: 36px; padding: 0 12px; border: 1px solid var(--ag-line2); border-radius: 9px; background: var(--ag-bg2); color: var(--ag-ink); font: 600 13px var(--ag-font); cursor: pointer; transition: background .15s, border-color .15s; }
.cl-act:hover { background: var(--ag-card2); border-color: rgba(255,255,255,.24); }
.cl-act.is-done { border-color: rgba(34,197,94,.5); color: #4ade80; }
.cl-open { background: var(--ag-grad); border-color: transparent; color: var(--ag-ink-on-accent); font-weight: 700; }
.cl-open:hover { filter: brightness(1.08); background: var(--ag-grad); }
.cl-src { grid-column: 1 / -1; border-top: 1px solid var(--ag-line); }
.cl-src summary { padding: 12px 24px; color: var(--ag-mut); font: 600 12px 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; list-style: none; }
.cl-src summary::-webkit-details-marker { display: none; }
.cl-src summary::before { content: "+ "; color: var(--ag-a2); }
.cl-src[open] summary::before { content: "− "; }
.cl-ctabs { display: flex; gap: 4px; padding: 0 20px; border-bottom: 1px solid var(--ag-line); }
.cl-ctab { padding: 9px 12px; border: 0; background: none; color: var(--ag-mut2); font: 600 12.5px 'JetBrains Mono', monospace; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.cl-ctab.on { color: var(--ag-ink); border-bottom-color: var(--ag-accent); }
.cl-code { display: none; margin: 0; max-height: 420px; overflow: auto; padding: 16px 24px; background: var(--ag-bg2); color: #cfd6e4; font: 13px/1.65 'JetBrains Mono', monospace; tab-size: 2; }
.cl-code.on { display: block; }
.cl-code code { background: none; padding: 0; color: inherit; font-size: inherit; }

/* ---------- guide + faq ---------- */
.cl-guide { max-width: 760px; margin-top: 56px; }
.cl-guide h2 { margin: 40px 0 14px; font-size: var(--ag-h2-section, 1.625rem); font-weight: 800; letter-spacing: -.02em; }
.cl-guide h3 { margin: 26px 0 8px; font-size: 1.125rem; font-weight: 700; }
.cl-guide p { margin: 0 0 14px; color: var(--ag-mut); font-size: 16px; line-height: 1.7; }
.cl-faq { display: grid; gap: 10px; }
.cl-faq details { border: 1px solid var(--ag-line); border-radius: 12px; background: var(--ag-card); }
.cl-faq summary { padding: 15px 18px; font-weight: 700; cursor: pointer; }
.cl-faq details p { padding: 0 18px 16px; margin: 0; }

/* ---------- sidebar ---------- */
.cl-side { position: sticky; top: calc(var(--ag-nav-h, 64px) + 72px); display: grid; gap: 16px; }
.cl-box { padding: 18px; border: 1px solid var(--ag-line); border-radius: var(--ag-r2); background: var(--ag-card); }
.cl-box-h { margin: 0 0 12px; color: var(--ag-a2); font: 600 11px 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; }
.cl-toc { margin: 0; padding-left: 22px; display: grid; gap: 6px; color: var(--ag-mut2); font: 500 12px 'JetBrains Mono', monospace; max-height: 40vh; overflow: auto; }
.cl-toc a { color: var(--ag-mut); font: 500 13.5px var(--ag-font); text-decoration: none; }
.cl-toc a:hover { color: var(--ag-ink); }
.cl-more { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.cl-more li { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.cl-more a { color: var(--ag-ink2); font-size: 14px; font-weight: 600; text-decoration: none; }
.cl-more a:hover { color: var(--ag-a2); }
.cl-more span { color: var(--ag-mut2); font: 500 11px 'JetBrains Mono', monospace; }
.cl-hire p { margin: 0 0 12px; color: var(--ag-mut); font-size: 14px; }
.cl-hire a { color: var(--ag-a2); font-weight: 700; font-size: 14px; text-decoration: none; }

/* ---------- generators ---------- */
.cl-gen { display: grid; grid-template-columns: 320px minmax(0, 1fr); border: 1px solid var(--ag-line); border-radius: var(--ag-r); background: var(--ag-card); overflow: hidden; }
.cl-gctl { padding: 22px; border-right: 1px solid var(--ag-line); display: grid; gap: 16px; align-content: start; }
.cl-field { display: grid; gap: 7px; }
.cl-field label, .cl-flabel { display: flex; justify-content: space-between; color: var(--ag-ink2); font-size: 13.5px; font-weight: 600; }
.cl-field output { color: var(--ag-a2); font: 500 12.5px 'JetBrains Mono', monospace; }
.cl-field input[type=range] { width: 100%; accent-color: var(--ag-accent); height: 24px; }
.cl-colorf { grid-template-columns: 1fr auto; align-items: center; }
.cl-field input[type=color] { width: 44px; height: 32px; padding: 2px; border: 1px solid var(--ag-line2); border-radius: 8px; background: var(--ag-bg2); cursor: pointer; }
.cl-on { display: inline-flex; align-items: center; gap: 8px; color: var(--ag-mut); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.cl-on input { width: 16px; height: 16px; accent-color: var(--ag-accent); }
.cl-seg { display: flex; padding: 3px; border-radius: 10px; background: var(--ag-bg2); border: 1px solid var(--ag-line); }
.cl-seg label { flex: 1; }
.cl-seg input { position: absolute; opacity: 0; pointer-events: none; }
.cl-seg span { display: block; padding: 7px 12px; border-radius: 7px; color: var(--ag-mut); font-size: 13px; font-weight: 600; text-align: center; cursor: pointer; }
.cl-seg input:checked + span { background: var(--ag-card2); color: var(--ag-ink); box-shadow: 0 0 0 1px rgba(91,140,255,.45); }
.cl-seg input:focus-visible + span { outline: 2px solid var(--ag-a2); }
.cl-stops { display: grid; gap: 12px; }
.cl-stop { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--ag-line); border-radius: 12px; background: var(--ag-bg2); }
.cl-stop.is-off { opacity: .55; }
.cl-gout { display: grid; grid-template-rows: minmax(300px, 1fr) auto; min-width: 0; }
.cl-gprev { min-height: 300px; }
.cl-gcode { border-top: 1px solid var(--ag-line); background: var(--ag-bg2); }
.cl-gcode-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--ag-line); }
.cl-gcode-h > span { color: var(--ag-mut2); font: 600 11px 'JetBrains Mono', monospace; letter-spacing: .14em; }
.cl-gcode-h div { display: flex; gap: 8px; flex-wrap: wrap; }
.cl-gcode pre { margin: 0; padding: 16px; overflow: auto; color: #cfd6e4; font: 13px/1.65 'JetBrains Mono', monospace; white-space: pre-wrap; word-break: break-word; }
.cl-gcode pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
.cl-sstage { display: grid; place-items: center; min-height: 300px; background: #F3F5F9; transition: background .2s; }
.cl-sstage.is-dark { background: #0E1118; }
.cl-sbox { display: grid; place-items: center; width: 200px; height: 140px; border-radius: 18px; background: #fff; color: #475569; font-weight: 700; }
.cl-sstage.is-dark .cl-sbox { background: #1b2232; color: var(--ag-mut); }
.cl-xstage { position: relative; display: grid; place-items: center; min-height: 320px; overflow: hidden; background: #0E1118; }
.cl-xstage span { position: absolute; border-radius: 50%; }
.cl-xstage .b1 { width: 220px; height: 220px; left: 12%; top: 10%; background: #2E4DA6; }
.cl-xstage .b2 { width: 180px; height: 180px; right: 14%; bottom: 8%; background: #5B3AAE; }
.cl-xstage .b3 { width: 110px; height: 110px; right: 34%; top: 14%; background: #0A7A90; }
.cl-xglass { position: relative; width: min(300px, 80%); padding: 24px; color: #fff; }
.cl-xglass p { margin: 0; }
.cl-xglass .k { font-size: 13px; }
.cl-xglass .v { margin: 4px 0 6px; font-size: 24px; font-weight: 800; }
.cl-xglass .d { font-size: 14px; }

/* ---------- hub (code-editor.html) ---------- */
.cl-hero { max-width: 1200px; margin: 0 auto; padding: 56px 24px 36px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: center; }
.cl-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--ag-line2); border-radius: 999px; color: var(--ag-mut); font-size: 13px; font-weight: 600; }
.cl-pdot { width: 7px; height: 7px; border-radius: 50%; background: var(--ag-ok); box-shadow: 0 0 0 4px rgba(34,197,94,.15); }
.cl-hero h1 { margin: 18px 0 14px; font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.2rem); font-weight: 800; line-height: 1.02; letter-spacing: -.04em; color: var(--ag-ink); text-wrap: balance; }
.cl-sub { max-width: 620px; margin: 0 0 24px; color: var(--ag-mut); font-size: 17.5px; line-height: 1.65; }
.cl-search { position: relative; display: flex; align-items: center; gap: 12px; max-width: 620px; height: 56px; padding: 0 12px 0 18px; border: 1px solid var(--ag-line2); border-radius: 14px; background: var(--ag-bg2); box-shadow: 0 18px 44px -26px rgba(91,140,255,.5); }
.cl-search:focus-within { border-color: rgba(91,140,255,.6); }
.cl-search svg { flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: var(--ag-mut2); stroke-width: 2; stroke-linecap: round; }
.cl-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--ag-ink); font: 500 16px var(--ag-font); outline: none; }
.cl-search input::placeholder { color: var(--ag-mut2); }
.cl-search kbd { padding: 3px 7px; border: 1px solid var(--ag-line2); border-radius: 6px; color: var(--ag-mut2); font: 500 11.5px 'JetBrains Mono', monospace; white-space: nowrap; }
.cl-search-res { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 50; max-height: 340px; overflow: auto; margin: 0; padding: 6px; list-style: none; border: 1px solid var(--ag-line2); border-radius: 14px; background: var(--ag-card); box-shadow: var(--ag-sh); }
.cl-search-res a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 9px; color: var(--ag-ink); font-size: 14.5px; font-weight: 600; text-decoration: none; }
.cl-search-res a span { color: var(--ag-mut2); font: 500 11.5px 'JetBrains Mono', monospace; white-space: nowrap; }
.cl-search-res a:hover, .cl-search-res a.is-active { background: var(--ag-soft); }
.cl-search-res .cl-none { padding: 12px; color: var(--ag-mut); font-size: 14px; }
.cl-try { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 10px; }
.cl-try span { color: var(--ag-mut2); font-size: 13px; margin-right: 2px; }
.cl-try button { padding: 5px 12px; border: 1px solid var(--ag-line2); border-radius: 999px; background: none; color: var(--ag-ink2); font: 500 13px var(--ag-font); cursor: pointer; }
.cl-try button:hover { border-color: rgba(91,140,255,.5); color: var(--ag-ink); }
.cl-stats { margin: 0 0 26px; color: var(--ag-mut2); font: 500 13px 'JetBrains Mono', monospace; }
.cl-stats b { color: var(--ag-ink); font-weight: 600; }
.cl-stats i { font-style: normal; margin: 0 6px; color: var(--ag-line2); }
.cl-hero-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.cl-hero-r { display: grid; gap: 16px; min-width: 0; }
.cl-welcome .pen-thumb { aspect-ratio: 16 / 10; }
.cl-ships { padding: 18px 20px; border: 1px solid var(--ag-line); border-radius: var(--ag-r2); background: var(--ag-card); }
.cl-ships-h { margin: 0 0 12px; color: var(--ag-a2); font: 600 11px 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; }
.cl-ships ul { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 0; padding: 0; list-style: none; }
.cl-ships li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--ag-bg2); border: 1px solid var(--ag-line); }
.cl-ships b { color: var(--ag-ink); font-size: 14px; }
.cl-ships li span { color: var(--ag-mut2); font-size: 12.5px; line-height: 1.45; }

.cl-hubfeed { max-width: 1200px; margin: 0 auto; padding: 28px 24px 24px; }
.cl-hubhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; margin-bottom: 18px; }
.cl-hubhead h2 { margin: 0; font-size: var(--ag-h2-section, 1.625rem); font-weight: 800; letter-spacing: -.02em; color: var(--ag-ink); }
.cl-hubhead p { margin: 0; max-width: 620px; color: var(--ag-mut); font-size: 15px; }
.cl-fgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cl-fcard { display: flex; flex-direction: column; border: 1px solid var(--ag-line); border-radius: var(--ag-r2); background: var(--ag-card); overflow: hidden; color: inherit; text-decoration: none; transition: border-color .2s, transform .2s; }
.cl-fcard:hover { border-color: rgba(91,140,255,.45); transform: translateY(-2px); }
.cl-fcard:focus-visible { outline: 2px solid var(--ag-a2); outline-offset: 3px; }
.cl-fprev { position: relative; aspect-ratio: 16 / 9; border-bottom: 1px solid var(--ag-line); pointer-events: none; }
.cl-fbody { padding: 16px 18px 18px; }
.cl-fmeta { display: flex; gap: 10px; margin: 0 0 6px; color: var(--ag-mut2); font: 500 11.5px 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }
.cl-fmeta span:first-child { color: var(--ag-a2); }
.cl-fbody h3 { margin: 0 0 6px; color: var(--ag-ink); font-size: 18px; font-weight: 800; }
.cl-fbody p { margin: 0; color: var(--ag-mut); font-size: 14px; line-height: 1.55; }
.cl-subh { margin: 30px 0 14px; color: var(--ag-ink); font-size: 1.125rem; font-weight: 800; }
.cl-ggrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cl-gcard { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1px solid var(--ag-line); border-radius: var(--ag-r2); background: var(--ag-card); color: inherit; text-decoration: none; transition: border-color .2s; }
.cl-gcard:hover { border-color: rgba(91,140,255,.45); }
.cl-gcard b { display: block; margin-bottom: 4px; color: var(--ag-ink); font-size: 15px; }
.cl-gcard small { display: block; color: var(--ag-mut); font-size: 13px; line-height: 1.5; }
.cl-gic { flex: 0 0 40px; height: 40px; border-radius: 10px; }
.cl-gic-gradient { background: linear-gradient(135deg, #7DA3FF, #5B8CFF 50%, #8B5CF6); }
.cl-gic-shadow { background: #1b2232; box-shadow: 0 8px 16px -4px rgba(91,140,255,.55); }
.cl-gic-glass { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.08)), #5B8CFF; border: 1px solid rgba(255,255,255,.3); }

/* ---------- generator previews (2026-10-03, batch 2) ---------- */
.cl-ghead { margin: 6px 0 -4px; color: var(--ag-a2); font: 600 11px 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; }
.cl-ghint { color: var(--ag-mut2); font: 500 11px var(--ag-font); letter-spacing: 0; text-transform: none; margin-left: 6px; }
.cl-numf input, .cl-field input[type=text], .cl-field input[type=url], .cl-field select { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--ag-line2); border-radius: 9px; background: var(--ag-bg2); color: var(--ag-ink); font: 500 14px var(--ag-font); }
.cl-field select { cursor: pointer; }
.cl-gstage { position: relative; display: grid; place-items: center; min-height: 320px; overflow: hidden; background: #0E1118; }
.cl-gp-fill { position: absolute; inset: 0; }
.cl-gp-box { color: var(--ag-mut); }
.cl-gstage-palette, .cl-gstage-spacing { place-items: stretch; align-content: start; padding: 18px; }
.cl-swh { margin: 4px 0 8px; color: var(--ag-mut2); font: 600 11px 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }
.cl-swrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 6px; margin-bottom: 14px; }
.cl-swscale { grid-template-columns: repeat(5, 1fr); }
.cl-sw { display: grid; gap: 2px; padding: 12px 10px; border-radius: 10px; font-size: 12px; }
.cl-sw b { font-size: 13px; }
.cl-sw span { font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.cl-gstage-wave { place-items: stretch; }
.cl-wstage { width: 100%; }
.cl-wsec { position: relative; color: #fff; font-weight: 700; text-align: center; }
.cl-wsec p { margin: 0; }
.cl-nstage, .cl-bstage, .cl-tstage, .cl-astage, .cl-rstage, .cl-cstage, .cl-ostage, .cl-trstage, .cl-anstage { display: grid; place-items: center; width: 100%; min-height: 320px; padding: 24px; }
.cl-nstage { transition: background .2s; }
.cl-nbox { transition: box-shadow .15s; }
.cl-gtext { margin: 0; color: #fff; text-align: center; overflow-wrap: anywhere; font-family: var(--ag-font); }
.cl-grid-demo, .cl-flex-demo { width: 100%; min-height: 300px; align-self: stretch; padding: 16px; display: grid; }
.cl-flex-demo { display: flex; border: 1px dashed rgba(255,255,255,.12); margin: 16px; width: calc(100% - 32px); min-height: 280px; }
.cl-gstage-grid, .cl-gstage-flex { place-items: stretch; }
.cl-gitem, .cl-fitem, .cl-sitem { display: grid; place-items: center; min-height: 48px; padding: 8px; border-radius: 10px; background: linear-gradient(135deg, rgba(125,163,255,.9), rgba(91,140,255,.9)); color: #080A0F; font: 800 14px var(--ag-font); }
.cl-abox { display: grid; place-items: center; border-radius: 12px; background: linear-gradient(135deg, #5B8CFF, #8B5CF6); color: #fff; font: 800 15px 'JetBrains Mono', monospace; text-align: center; padding: 8px; transition: width .2s, height .2s; }
.cl-rbox { background: linear-gradient(135deg, #7DA3FF, #5B8CFF 60%, #8B5CF6); transition: border-radius .15s; }
.cl-cbox { width: min(300px, 80%); aspect-ratio: 7 / 5; }
.cl-scstage { width: 100%; padding: 24px; }
.cl-scbox { height: 240px; overflow-y: auto; padding: 0 16px; border: 1px solid var(--ag-line2); border-radius: 12px; background: #121722; color: var(--ag-ink2); font-size: 14px; line-height: 1.7; }
.cl-custage { display: grid; place-items: center; align-content: center; gap: 8px; width: calc(100% - 48px); min-height: 260px; margin: 24px; border: 1px dashed rgba(255,255,255,.18); border-radius: 16px; color: var(--ag-mut); }
.cl-custage p { margin: 0; }
.cl-custage span { color: var(--ag-a2); font: 600 14px 'JetBrains Mono', monospace; }
.cl-trghost, .cl-trbox { grid-area: 1 / 1; width: 140px; height: 100px; border-radius: 14px; }
.cl-trghost { border: 2px dashed rgba(255,255,255,.2); }
.cl-trbox { display: grid; place-items: center; background: linear-gradient(135deg, #7DA3FF, #5B8CFF); color: #080A0F; font-weight: 800; transition: transform .15s; }
.cl-bzstage { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; width: 100%; padding: 20px; }
.cl-bzstage canvas { width: 220px; height: 220px; border-radius: 12px; background: #0b0e15; }
.cl-bzrun { display: grid; gap: 12px; }
.cl-bztrack { position: relative; height: 34px; border-radius: 17px; background: #1b2232; }
.cl-bzball { position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; background: #7DA3FF; }
.cl-bztrack.lin .cl-bzball { background: #7F8899; }
.cl-bzleg { display: flex; justify-content: space-between; margin: 0; color: var(--ag-mut2); font: 500 12px 'JetBrains Mono', monospace; }
.cl-obox { padding: 22px 32px; background: #121722; color: #fff; font-weight: 700; }
.cl-tsstage { display: grid; place-items: center; width: 100%; min-height: 320px; padding: 24px; background: #0E1118; transition: background .2s; }
.cl-tsstage.is-light { background: #F3F5F9; }
.cl-tstext { margin: 0; font: 800 clamp(32px, 6vw, 64px)/1.1 var(--ag-font); text-align: center; overflow-wrap: anywhere; }
.cl-patstage { position: absolute; inset: 0; }
.cl-fistage { display: grid; place-items: center; width: 100%; min-height: 320px; padding: 24px; }
.cl-fiimg { width: min(360px, 100%); height: auto; border-radius: 14px; }
.cl-anbox { padding: 26px 34px; border-radius: 14px; background: linear-gradient(135deg, #7DA3FF, #5B8CFF); color: #080A0F; font-weight: 800; }
.cl-anstage { gap: 18px; }
.cl-fpstage { width: 100%; padding: 28px; background: #F7F8FA; color: #111827; align-self: stretch; }
.cl-fpstage p { margin: 0 0 14px; }
.cl-fph { line-height: 1.15; }
.cl-fpname { color: #6b7280; font: 600 12px 'JetBrains Mono', monospace !important; }
.cl-sprow { display: grid; grid-template-columns: 90px 1fr auto; gap: 12px; align-items: center; margin-bottom: 8px; color: var(--ag-mut); font: 500 12px 'JetBrains Mono', monospace; }
.cl-sprow i { display: block; height: 14px; border-radius: 4px; background: linear-gradient(90deg, #7DA3FF, #5B8CFF); }
.cl-sprow b { color: var(--ag-ink2); font-weight: 500; }
.cl-lsstage { width: 100%; padding: 28px; color: var(--ag-ink); align-self: stretch; }
.cl-lsstage p { margin: 0 0 16px; max-width: 62ch; color: var(--ag-ink2); }
.cl-lsh { color: var(--ag-ink) !important; }
.cl-lstage { display: grid; place-items: center; width: 100%; min-height: 300px; }

/* ---------- tools ---------- */
.cl-tool { border: 1px solid var(--ag-line); border-radius: var(--ag-r); background: var(--ag-card); overflow: hidden; }
.cl-topts { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: end; padding: 16px 18px; border-bottom: 1px solid var(--ag-line); }
.cl-topts .cl-field { min-width: 180px; }
.cl-tio { display: grid; grid-template-columns: 1fr 1fr; }
.cl-tpane { display: flex; flex-direction: column; min-width: 0; }
.cl-tpane + .cl-tpane { border-left: 1px solid var(--ag-line); }
.cl-tpane-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 52px; padding: 8px 12px 8px 16px; border-bottom: 1px solid var(--ag-line); }
.cl-tpane-h label { color: var(--ag-ink2); font-size: 13.5px; font-weight: 700; }
.cl-tpane-h div { display: flex; gap: 6px; flex-wrap: wrap; }
.cl-tpane textarea { flex: 1; width: 100%; min-height: 360px; padding: 14px 16px; border: 0; resize: vertical; background: var(--ag-bg2); color: #cfd6e4; font: 13px/1.65 'JetBrains Mono', monospace; tab-size: 2; }
.cl-tpane textarea:focus { outline: 2px solid rgba(91,140,255,.55); outline-offset: -2px; }
.cl-tnote { margin: 0; padding: 12px 18px; border-top: 1px solid var(--ag-line); color: var(--ag-mut); font: 500 13px/1.6 var(--ag-font); white-space: pre-wrap; }
.cl-tnote:empty { display: none; }
.cl-tnote.is-err { color: #ff8a80; }
.cl-tool-custom { padding: 0; }
.cl-sheet { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.cl-sheet-ctl { display: grid; gap: 10px; align-content: start; padding: 18px; border-right: 1px solid var(--ag-line); }
.cl-prow { display: grid; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--ag-line); }
.cl-prow code { justify-self: start; }
.cl-prow p { margin: 0; color: var(--ag-mut2); font-size: 13px; }
.cl-vals { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-vals button { padding: 6px 10px; border: 1px solid var(--ag-line2); border-radius: 8px; background: var(--ag-bg2); color: var(--ag-mut); font: 500 12.5px 'JetBrains Mono', monospace; cursor: pointer; }
.cl-vals button:hover { color: var(--ag-ink); }
.cl-vals button.on { border-color: rgba(91,140,255,.6); background: var(--ag-soft); color: var(--ag-ink); }
.cl-sheet-out { position: sticky; top: calc(var(--ag-nav-h, 64px) + 64px); align-self: start; }
.cl-sheet-demo { min-height: 300px; margin: 16px; padding: 12px; border: 1px dashed rgba(255,255,255,.16); border-radius: 12px; gap: 10px; }
.cl-sitem { border: 0; cursor: pointer; }
.cl-sitem.is-sel { box-shadow: 0 0 0 3px #22D3EE; }
.cl-ct { display: grid; gap: 0; }
.cl-ct-in { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; padding: 18px; border-bottom: 1px solid var(--ag-line); }
.cl-cpair { display: flex; gap: 8px; }
.cl-cpair input[type=color] { width: 46px; height: 38px; padding: 2px; border: 1px solid var(--ag-line2); border-radius: 9px; background: var(--ag-bg2); }
.cl-cpair input[type=text] { width: 150px; height: 38px; padding: 0 10px; border: 1px solid var(--ag-line2); border-radius: 9px; background: var(--ag-bg2); color: var(--ag-ink); font: 500 14px 'JetBrains Mono', monospace; }
.cl-ct-res { padding: 18px; border-bottom: 1px solid var(--ag-line); display: grid; gap: 14px; }
.cl-ct-ratio { display: flex; align-items: baseline; gap: 14px; }
.cl-ct-ratio span { color: var(--ag-mut); font-weight: 600; }
.cl-ct-ratio b { font-size: 40px; font-weight: 800; letter-spacing: -.02em; }
.cl-ct-badges { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.cl-ct-badges div { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--ag-line); border-radius: 12px; background: var(--ag-bg2); }
.cl-ct-badges span { color: var(--ag-mut); font-size: 12.5px; }
.cl-ct-badges b { font-size: 16px; }
.cl-ct-badges small { color: var(--ag-mut2); font: 500 11px 'JetBrains Mono', monospace; }
.cl-ct-badges .is-pass { color: #4ade80; }
.cl-ct-badges .is-fail { color: #ff8a80; }
.cl-ct-res .cl-tnote, .cl-cc .cl-tnote { border: 0; padding: 0; }
.cl-ct-prev { padding: 26px; }
.cl-ct-prev p { margin: 0 0 12px; font-size: 16px; }
.cl-ct-big { font-size: 24px !important; font-weight: 700; }
.cl-ct-small { font-size: 13px !important; }
.cl-ct-btn { display: inline-block; padding: 8px 14px; border: 2px solid; border-radius: 9px; font-weight: 700; }
.cl-px, .cl-cc, .cl-un, .cl-vp, .cl-tw { padding: 18px; display: grid; gap: 14px; }
.cl-px-row, .cl-un-ctx, .cl-cc-in { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.cl-px-row .cl-field, .cl-un-ctx .cl-field { min-width: 150px; flex: 1; }
.cl-px-eq { padding-bottom: 8px; color: var(--ag-mut2); font-size: 20px; }
.cl-px-table table { width: 100%; border-collapse: collapse; font: 500 13px 'JetBrains Mono', monospace; }
.cl-px-table th, .cl-px-table td { padding: 6px 10px; border-bottom: 1px solid var(--ag-line); text-align: left; color: var(--ag-ink2); }
.cl-px-table th { color: var(--ag-mut2); }
.cl-px .cl-tio { border: 1px solid var(--ag-line); border-radius: 12px; overflow: hidden; }
.cl-px .cl-tpane textarea { min-height: 220px; }
.cl-cc-in input[type=color] { width: 56px; height: 56px; padding: 2px; border: 1px solid var(--ag-line2); border-radius: 12px; background: var(--ag-bg2); }
.cl-cc-in .cl-field { flex: 1; min-width: 220px; }
.cl-cc-sw { width: 56px; height: 56px; border-radius: 12px; border: 1px solid var(--ag-line2); }
.cl-cc-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.cl-cc-list li { display: grid; grid-template-columns: 170px 1fr auto; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--ag-line); border-radius: 10px; background: var(--ag-bg2); }
.cl-cc-list li span { color: var(--ag-mut); font-size: 13px; font-weight: 600; }
.cl-cc-list li code { overflow-wrap: anywhere; background: none; color: var(--ag-ink); padding: 0; }
.cl-tw { grid-template-columns: 300px minmax(0, 1fr); }
.cl-tw-ctl { display: grid; gap: 12px; align-content: start; }
.cl-tw-out { min-width: 0; display: grid; gap: 12px; align-content: start; }
.cl-tw-row { display: grid; grid-template-columns: 70px repeat(11, 1fr); align-items: center; gap: 3px; margin-bottom: 6px; }
.cl-tw-row b { color: var(--ag-mut); font: 600 12px 'JetBrains Mono', monospace; }
.cl-tw-row span { height: 28px; border-radius: 5px; }
.cl-tw-out .cl-gcode { border: 1px solid var(--ag-line); border-radius: 12px; overflow: hidden; }
.cl-tw-out .cl-gcode pre { max-height: 420px; }
.cl-vp .cl-gcode { border: 1px solid var(--ag-line); border-radius: 12px; overflow: hidden; }
.cl-vp-prev { display: grid; gap: 6px; }
.cl-vp-row { display: grid; grid-template-columns: 140px 1fr 80px; align-items: center; gap: 12px; padding: 6px 10px; border-bottom: 1px solid var(--ag-line); color: var(--ag-mut); font-size: 13px; }
.cl-vp-row b { color: var(--ag-ink); line-height: 1; }
.cl-vp-row em { color: var(--ag-mut2); font: 500 12px 'JetBrains Mono', monospace; font-style: normal; }
.cl-bp { padding: 18px; display: grid; gap: 14px; }
.cl-bp-bar { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: end; }
.cl-bp-range { flex: 1; min-width: 220px; }
.cl-bp-frames { display: flex; gap: 16px; justify-content: center; min-height: 200px; overflow: hidden; }
.cl-bp-frames.is-multi { justify-content: space-between; align-items: flex-start; }
.cl-bp-frame p { margin: 0 0 6px; color: var(--ag-mut2); font: 500 12px 'JetBrains Mono', monospace; }
.cl-bp-box { position: relative; overflow: hidden; border: 1px solid var(--ag-line2); border-radius: 10px; background: #fff; }
.cl-bp-box iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; background: #fff; }
.cl-bp-src summary { cursor: pointer; color: var(--ag-ink2); font-weight: 700; margin-bottom: 10px; }
.cl-bp-src .cl-tpane { border: 1px solid var(--ag-line); border-radius: 12px; overflow: hidden; }
.cl-bp-src .cl-tpane textarea { min-height: 200px; }
.cl-bp-url { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.cl-bp-url label { color: var(--ag-mut); font-size: 13.5px; font-weight: 600; }
.cl-bp-url input { flex: 1; min-width: 200px; height: 38px; padding: 0 10px; border: 1px solid var(--ag-line2); border-radius: 9px; background: var(--ag-bg2); color: var(--ag-ink); }
.cl-bp-src .cl-tnote { border: 0; padding: 8px 0 0; }

/* ---------- hub: category views (#cat-<slug>) ---------- */
body.cl-catmode main.main > :not(.cl-cats) { display: none !important; }
.cl-cats { max-width: 1200px; margin: 0 auto; padding: 36px 24px 56px; }
/* keep the hub's main column at least as tall as the sticky sidebar, so short category views
   never let the footer slide underneath it */
.cl-layout > main.main { min-height: calc(100vh - var(--ag-nav-h, 64px) - 52px); }
.cl-cats[hidden], .cl-cat[hidden] { display: none; }
.cl-cat h2.cl-h1 { outline: none; }
.cl-cat-back { display: inline-block; margin-bottom: 18px; color: var(--ag-a2); font-size: 14px; font-weight: 600; text-decoration: none; }
.cl-cat-back:hover { text-decoration: underline; }
.cl-cat .cl-subh { margin-top: 26px; }
.cl-cat-g { margin: 18px 0 10px; color: var(--ag-mut); font: 600 12px 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }
.cl-fbody h4 { margin: 0 0 6px; color: var(--ag-ink); font-size: 18px; font-weight: 800; }
.cl-sn-row a.cl-sn-label { color: inherit; text-decoration: none; }
.cl-sn-row a.cl-sn-label:hover { color: var(--ag-ink); text-decoration: underline; text-underline-offset: 3px; }
.cl-sn-row a.cl-sn-label:focus-visible { outline: 2px solid var(--ag-a2); outline-offset: 2px; border-radius: 4px; }
.cl-sn-chev { width: 7px; height: 7px; margin-left: 2px; border: solid var(--ag-mut2); border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform .15s; }
.cl-sn-grp[data-open] > .cl-sn-row .cl-sn-chev { transform: rotate(45deg); }
.cl-sn-grp.is-cat > .cl-sn-row { background: var(--ag-soft); color: var(--ag-ink); }

/* ---------- hub: generator and tool mini cards ---------- */
.cl-subh span { margin-left: 6px; color: var(--ag-mut2); font: 500 13px 'JetBrains Mono', monospace; }
.cl-mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.cl-mcard { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid var(--ag-line); border-radius: 12px; background: var(--ag-card); color: inherit; text-decoration: none; transition: border-color .2s, background .2s; }
.cl-mcard:hover { border-color: rgba(91,140,255,.45); background: var(--ag-card2); }
.cl-mcard b { color: var(--ag-ink); font-size: 14px; }
.cl-mcard small { color: var(--ag-mut2); font: 500 11.5px 'JetBrains Mono', monospace; }
.cl-mcard:focus-visible { outline: 2px solid var(--ag-a2); outline-offset: 2px; }

/* ---------- responsive ---------- */
@media (max-width: 1360px) {
  .cl-wrap { grid-template-columns: minmax(0, 1fr); }
  .cl-side { position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .cl-side .cl-box:has(.cl-toc) { display: none; }
  .cl-hero { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .cl-hero-r { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
@media (max-width: 1023px) {
  .cl-layout { grid-template-columns: minmax(0, 1fr); }
  .cl-burger { display: inline-flex; }
  .cl-sidenav {
    position: fixed; top: var(--ag-nav-h, 64px); left: 0; bottom: 0; z-index: 950; height: auto; width: min(300px, 86vw);
    transform: translateX(-102%); transition: transform .25s ease; box-shadow: var(--ag-sh3);
    padding-top: 22px;
  }
  .cl-sidenav.is-open { transform: none; }
  .cl-search-side .cl-search-res { right: 0; }
  .cl-hero-r { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1080px) {
  .cl-wrap { grid-template-columns: minmax(0, 1fr); }
  .cl-side { position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .cl-side .cl-box:has(.cl-toc) { display: none; }
  .cl-hero { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 40px; }
  .cl-fgrid, .cl-ggrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .cl-tio, .cl-sheet, .cl-tw, .cl-bzstage { grid-template-columns: minmax(0, 1fr); }
  .cl-tpane + .cl-tpane { border-left: 0; border-top: 1px solid var(--ag-line); }
  .cl-tpane textarea { min-height: 240px; }
  .cl-sheet-ctl { border-right: 0; border-bottom: 1px solid var(--ag-line); }
  .cl-sheet-out { position: static; }
  .cl-cc-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .cl-cc-list li span { grid-column: 1 / -1; }
  .cl-bzstage canvas { justify-self: center; }
  .cl-swscale { grid-template-columns: repeat(2, 1fr); }
  .cl-gen { grid-template-columns: minmax(0, 1fr); }
  .cl-gctl { border-right: 0; border-bottom: 1px solid var(--ag-line); }
  .cl-demo { grid-template-columns: minmax(0, 1fr); }
  .cl-prev { border-right: 0; border-bottom: 1px solid var(--ag-line); min-height: 220px; }
}
@media (max-width: 640px) {
  .cl-top { gap: 10px; padding: 0 12px; }
  .cl-brand > span:not(.cl-mark), .cl-brand em { display: none; }
  .cl-cta { padding: 7px 11px; font-size: 12px; }
  .cl-wrap { padding: 24px 16px 56px; }
  .cl-fgrid, .cl-ggrid, .cl-ships ul { grid-template-columns: minmax(0, 1fr); }
  .cl-hero { padding: 32px 16px 24px; }
  .cl-hubfeed { padding: 20px 16px; }
  .cl-search kbd { display: none; }
  .cl-info { padding: 18px; }
  .cl-src summary { padding: 12px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .cl-path b::after { animation: none; }
  .cl-sidenav { transition: none; }
  .cl-fcard, .cl-fcard:hover { transition: none; transform: none; }
}

/* ===== One card for every library item (2026-10-04): collections, generators and tools share
   .cl-fcard - a preview with a label, badges, title, description. Used by the hub feed and every
   sidebar category view (#cat-<slug>), so each category looks the same. ===== */
.cl-fgrid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.cl-fprev { overflow: hidden; }
.cl-fcard .cl-fprev iframe { top: 34px; height: calc(100% - 34px); }
.cl-ftag { position: absolute; z-index: 2; top: 10px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 24px);
  padding: 4px 10px; border-radius: 999px; background: rgba(8,10,15,.62); color: #fff; font-size: 12.5px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cl-ftag b { color: #FFD166; margin-right: 2px; }
.cl-fbadges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.cl-fb { padding: 2px 8px; border: 1px solid var(--ag-line2); border-radius: 999px; color: var(--ag-ink2); font: 600 11px "JetBrains Mono", monospace; letter-spacing: .02em; }
.cl-fb.is-key { border-color: rgba(125,163,255,.45); background: rgba(91,140,255,.12); color: var(--ag-a2); }
.cl-fbody h3, .cl-fbody h4 { font-size: 17px; }
.cl-fbody > p:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cl-fcard { height: 100%; }
.cl-cat-n { margin-left: 8px; color: var(--ag-mut2); font: 600 .45em "JetBrains Mono", monospace; vertical-align: middle; }
.cl-cchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 4px; }
.cl-cchip { padding: 7px 12px; border: 1px solid var(--ag-line2); border-radius: 999px; background: var(--ag-card); color: var(--ag-ink2); font: 600 13px Inter, system-ui, sans-serif; cursor: pointer; }
.cl-cchip span { margin-left: 4px; color: var(--ag-mut2); font: 500 11.5px "JetBrains Mono", monospace; }
.cl-cchip:hover { border-color: rgba(91,140,255,.45); color: var(--ag-ink); }
.cl-cchip:focus-visible { outline: 2px solid var(--ag-a2); outline-offset: 2px; }
.cl-cat .cl-subh { scroll-margin-top: calc(var(--ag-nav-h, 64px) + 60px); }
/* headings receive focus (tabindex=-1) when a view opens or a chip jumps, for screen readers; they are not controls */
.cl-cat [tabindex="-1"]:focus { outline: none; }

/* --- generator / tool thumbnails (decorative, aria-hidden) --- */
.cl-th { position: absolute; inset: 0; display: grid; place-items: center; padding: 34px 16px 14px; background: radial-gradient(120% 90% at 20% 0%, var(--th1), transparent 70%), linear-gradient(135deg, var(--th1), var(--th2)); color: #fff; }
.cl-th i, .cl-th b { font-style: normal; }
.t-grad { width: 70%; height: 62%; border-radius: 14px; background: linear-gradient(135deg, #5B8CFF, #8B5CF6 55%, #22D3EE); box-shadow: 0 12px 30px -12px rgba(0,0,0,.6); }
.t-pal { display: flex; width: 78%; height: 46%; border-radius: 12px; overflow: hidden; box-shadow: 0 12px 30px -12px rgba(0,0,0,.6); }
.t-pal i { flex: 1; }
.t-shadow { width: 46%; height: 52%; border-radius: 14px; background: #f4f6fb; box-shadow: 0 18px 40px -10px rgba(0,0,0,.65), 0 4px 10px rgba(0,0,0,.25); }
.t-glassbox { position: relative; width: 80%; height: 78%; }
.t-glassbox span { position: absolute; border-radius: 50%; }
.t-glassbox .o1 { width: 42%; aspect-ratio: 1; left: 6%; top: 4%; background: #5B8CFF; }
.t-glassbox .o2 { width: 32%; aspect-ratio: 1; right: 8%; bottom: 2%; background: #22D3EE; }
.t-glass { position: absolute; inset: 16% 18%; display: grid; align-content: center; gap: 6px; padding: 0 14px; border: 1px solid rgba(255,255,255,.35); border-radius: 14px; background: rgba(255,255,255,.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.t-glass b { height: 9px; width: 50%; border-radius: 4px; background: rgba(255,255,255,.9); }
.t-glass i { height: 6px; border-radius: 3px; background: rgba(255,255,255,.55); }
.t-glass i + i { width: 70%; }
.t-wave { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 62%; }
.t-ring { width: 56px; height: 56px; border: 6px solid rgba(255,255,255,.18); border-top-color: #7DA3FF; border-radius: 50%; animation: cl-th-spin 1s linear infinite; }
@keyframes cl-th-spin { to { transform: rotate(360deg); } }
.t-neubox { display: grid; place-items: center; width: 70%; height: 74%; border-radius: 16px; background: #e3e8f0; }
.t-neu { width: 38%; aspect-ratio: 1; border-radius: 22px; background: #e3e8f0; box-shadow: 8px 8px 16px #bec4cf, -8px -8px 16px #ffffff; }
.t-btn { padding: 12px 22px; border-radius: 12px; background: linear-gradient(135deg, #5B8CFF, #8B5CF6); color: #fff; font: 700 15px Inter, system-ui, sans-serif; box-shadow: 0 12px 26px -10px rgba(91,140,255,.8); }
.t-gtext { font: 900 clamp(30px, 4vw, 44px)/1 Inter, system-ui, sans-serif; letter-spacing: -.03em; background: linear-gradient(90deg, #7DA3FF, #F472B6, #FBBF24); -webkit-background-clip: text; background-clip: text; color: transparent; }
.t-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 6px; width: 72%; height: 70%; }
.t-grid i, .t-flex i { border-radius: 6px; background: rgba(125,163,255,.75); }
.t-grid .w { grid-column: span 2; background: rgba(139,92,246,.85); }
.t-grid .t { grid-row: span 2; background: rgba(34,211,238,.8); }
.t-flex { display: flex; justify-content: space-between; align-items: center; width: 72%; height: 64%; padding: 8px; border: 1px dashed rgba(255,255,255,.3); border-radius: 10px; }
.t-flex i { width: 24%; height: 50%; }
.t-flex .tall { height: 90%; background: rgba(139,92,246,.85); }
.t-aspect { position: relative; width: 74%; height: 76%; }
.t-aspect i { position: absolute; left: 0; bottom: 0; display: grid; place-items: start end; padding: 4px 6px; border: 1.5px solid; border-radius: 6px; font: 600 11px "JetBrains Mono", monospace; }
.t-aspect .a { width: 100%; height: 100%; border-color: #7DA3FF; color: #7DA3FF; }
.t-aspect .b { height: 76%; aspect-ratio: 4 / 3; border-color: #C4B5FD; color: #C4B5FD; }
.t-aspect .c { height: 46%; aspect-ratio: 1; border-color: #67E8F9; color: #67E8F9; }
.t-radius { width: 46%; height: 60%; border-radius: 40px 8px 40px 8px; background: linear-gradient(135deg, #7DA3FF, #8B5CF6); }
.t-clip { display: flex; gap: 14px; align-items: center; }
.t-clip i { width: 58px; height: 58px; background: linear-gradient(135deg, #7DA3FF, #22D3EE); }
.t-clip .hex { clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); }
.t-clip .star { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); background: linear-gradient(135deg, #FBBF24, #F472B6); }
.t-clip .tri { clip-path: polygon(50% 6%, 96% 92%, 4% 92%); background: linear-gradient(135deg, #8B5CF6, #7DA3FF); }
.t-scroll { display: flex; gap: 8px; width: 66%; height: 72%; padding: 10px; border-radius: 10px; background: rgba(8,10,15,.55); }
.t-scroll .lines { flex: 1; display: grid; align-content: start; gap: 8px; }
.t-scroll .lines i { height: 7px; border-radius: 4px; background: rgba(255,255,255,.22); }
.t-scroll .lines i:nth-child(odd) { width: 72%; }
.t-scroll .bar { width: 9px; border-radius: 6px; background: rgba(255,255,255,.1); }
.t-scroll .bar b { display: block; height: 42%; margin-top: 18%; border-radius: 6px; background: linear-gradient(#7DA3FF, #8B5CF6); }
.t-cursor { position: relative; width: 90px; height: 70px; }
.t-cursor svg { position: absolute; left: 34px; top: 18px; width: 38px; height: 38px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
.t-cursor span { position: absolute; left: 22px; top: 6px; width: 30px; height: 30px; border: 2px solid #7DA3FF; border-radius: 50%; }
.t-tf { position: relative; width: 70px; height: 70px; }
.t-tf i { position: absolute; inset: 0; border-radius: 12px; }
.t-tf .ghost { border: 2px dashed rgba(255,255,255,.35); }
.t-tf .moved { background: linear-gradient(135deg, #7DA3FF, #8B5CF6); transform: translate(18px, -8px) rotate(18deg) skewX(-8deg) scale(.9); }
.t-bez { width: auto; height: 80%; aspect-ratio: 1; }
.t-border { width: 46%; height: 56%; border: 4px dashed #7DA3FF; border-radius: 12px; outline: 2px solid #F472B6; outline-offset: 7px; }
.t-tshadow { color: #fff; font: 900 clamp(30px, 4vw, 42px)/1 Inter, system-ui, sans-serif; text-shadow: 3px 3px 0 #8B5CF6, 6px 6px 0 rgba(34,211,238,.6); }
.t-pattern { width: 76%; height: 74%; border-radius: 12px; background-color: #121a33; background-image: radial-gradient(rgba(125,163,255,.85) 1.6px, transparent 1.8px); background-size: 14px 14px; }
.t-filter { display: flex; gap: 12px; width: 76%; height: 62%; }
.t-filter i { flex: 1; border-radius: 10px; background: linear-gradient(135deg, #F472B6, #FBBF24 50%, #22D3EE); }
.t-filter .f { filter: grayscale(1) contrast(1.2); }
.t-anim { display: flex; align-items: flex-end; justify-content: center; width: 70%; height: 70%; border-bottom: 2px solid rgba(255,255,255,.25); }
.t-anim i { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #7DA3FF, #8B5CF6); animation: cl-th-bounce 1.2s cubic-bezier(.3,.7,.4,1) infinite alternate; }
@keyframes cl-th-bounce { from { transform: translateY(0); } to { transform: translateY(-46px); } }
.t-fonts { display: flex; align-items: center; gap: 16px; width: 74%; }
.t-fonts b { font: 700 48px/1 Georgia, "Times New Roman", serif; }
.t-fonts span { flex: 1; display: grid; gap: 7px; }
.t-fonts span i { height: 7px; border-radius: 4px; background: rgba(255,255,255,.4); }
.t-fonts span .s { width: 60%; }
.t-space { display: grid; gap: 7px; width: 72%; }
.t-space i { height: 12px; border-radius: 4px; background: linear-gradient(90deg, #7DA3FF, #8B5CF6); }
.t-ls { font: 800 clamp(20px, 3vw, 28px)/1 Inter, system-ui, sans-serif; letter-spacing: .32em; white-space: nowrap; }
.t-scale { position: relative; display: flex; width: 84%; height: 44%; border-radius: 10px; overflow: hidden; }
.t-scale i { flex: 1; }
.t-scale span { position: absolute; left: 8px; bottom: 6px; padding: 1px 6px; border-radius: 4px; background: rgba(8,10,15,.6); color: #fff; font: 600 11px "JetBrains Mono", monospace; }
.t-devices { display: flex; align-items: flex-end; gap: 10px; width: 80%; height: 72%; }
.t-devices i { border: 2px solid rgba(255,255,255,.7); border-radius: 6px; background: rgba(125,163,255,.18); }
.t-devices .d { width: 52%; height: 82%; }
.t-devices .t { width: 26%; height: 70%; }
.t-devices .p { width: 13%; height: 52%; border-radius: 8px; }
.t-io { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; width: 100%; height: 100%; }
.t-pane { display: grid; align-content: start; gap: 6px; height: 100%; padding: 8px 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: rgba(8,10,15,.6); overflow: hidden; }
.t-pane.o { border-color: rgba(125,163,255,.45); }
.t-pane i { color: rgba(255,255,255,.62); font: 600 10px "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.t-pane code { color: #e6ebf7; font: 500 10.5px/1.45 "JetBrains Mono", monospace; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.t-pane.o code { color: #a5f3c4; }
.t-arrow { color: #7DA3FF; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .cl-th * { animation: none !important; } }