/* Veyyon — editorial identity.
   JetBrains Mono across the entire site. Near-black ground, silver structure,
   ember-sun accent (veyyōn = the sun). Sharp edges, no gradients. */

@font-face{font-family:"JBM";src:url(./fonts/JetBrainsMono-Regular.woff2) format("woff2");font-weight:400;font-display:block}
@font-face{font-family:"JBM";src:url(./fonts/JetBrainsMono-Medium.woff2) format("woff2");font-weight:500;font-display:block}
@font-face{font-family:"JBM";src:url(./fonts/JetBrainsMono-SemiBold.woff2) format("woff2");font-weight:600;font-display:block}
@font-face{font-family:"JBM";src:url(./fonts/JetBrainsMono-Bold.woff2) format("woff2");font-weight:700;font-display:block}

:root{
  --bg:#000000; --raised:#000000; --inset:#000000; --hover:#000000;
  --fg:#f6f7f9; --fg-2:#b4bac4; --muted:#7c828d; --dim:#4a505a;
  --silver:#c6cbd4; --silver-hi:#e6e9ee;
  --sun:#f0862e; --sun-hi:#fb9e44;   /* ember accent — the sun; kept distinct from --amber warning */
  --green:#7fb98a; --amber:#c9a24b; --red:#d1706e;
  /* Daybreak cool arc — identity & state hues shared with the TUI theme:
     teal = session, violet = modes, indigo = share, rose = info, gold = match */
  --gold:#f5b841; --teal:#3fb6a8; --violet:#9b7ede; --indigo:#6478d8; --rose:#e88aa8;
  --line:rgba(198,203,212,.12); --line-2:rgba(198,203,212,.21);
  --sans:"JBM",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --mono:"JBM",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --maxw:1120px; --pad:32px;
  --ease:cubic-bezier(.22,1,.36,1); --dur:.72s;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);
  font-size:15px;line-height:1.7;letter-spacing:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:rgba(240,134,46,.30);color:#fff}
a{color:var(--sun-hi);text-decoration:none;transition:color .14s}
a:hover{color:var(--silver-hi)}
:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
img{max-width:100%;display:block}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.mono,.inline{font-family:var(--mono)}
.accent{color:var(--sun-hi)}

/* kicker — mono, spaced label */
.kicker{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-weight:500;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--silver)}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 80%,transparent);
  backdrop-filter:saturate(140%) blur(16px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-weight:700;
  letter-spacing:.02em;font-size:15px;color:var(--fg);text-transform:lowercase}
.nav nav{display:flex;gap:30px;align-items:center;font-size:14px}
.nav nav a{color:var(--muted);font-weight:500}
.nav nav a:hover{color:var(--fg)}
.nav-icon{width:16px;height:16px;display:inline-block;vertical-align:-2px}
.nav nav a[aria-current="page"]{color:var(--silver-hi)}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);color:var(--fg);
  padding:9px 17px;font-size:14px;font-weight:500;background:transparent;font-family:var(--sans);
  transition:color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease),background .2s var(--ease)}
.btn:hover{border-color:var(--silver);color:var(--silver-hi);transform:translateY(-1px)}
.btn.primary{background:var(--silver-hi);color:#08090b;border-color:var(--silver-hi);font-weight:600}
.btn.primary:hover{background:#fff;border-color:#fff;color:#08090b}
.btn.arrow::after{content:"→";color:currentColor;opacity:.8}

/* ---------- home hero ----------
   A normal section, not a scroll runway. The sun canvas (sun.js) is absolutely
   positioned inside it and sized to the section box, so it scrolls away with the
   hero and can never ghost over later content. Copy sits in a column on the left
   at the wide breakpoint; the sun docks to the right of it. */
.hero{position:relative;overflow:hidden;padding:104px 0 96px;border-top:none}
/* the disc is atmosphere, so it renders under the copy and at partial opacity —
   the ember bands still read on black, but nothing here outshines the h1 */
#sun{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero-inner{position:relative;z-index:1;max-width:var(--maxw)}
.hero-inner .eyebrow{display:inline-flex;font-family:var(--mono);font-weight:500;
  font-size:12px;letter-spacing:.04em;color:var(--fg-2);margin-bottom:26px}
.hero-inner h1{font-family:var(--mono);font-weight:700;font-size:clamp(40px,6.4vw,76px);line-height:1.02;
  letter-spacing:-.045em;margin:0 0 26px;max-width:14ch;text-wrap:balance}
.hero-inner .lede{max-width:52ch}

/* the demo capture sits directly under the hero. The band closes with the page's
   hairline so the next section starts on a rule instead of floating in the void
   (section.plain has no top border, since elsewhere it follows a .page-head). */
.demo-band{padding:0 0 88px;border-top:none;border-bottom:1px solid var(--line)}
/* the capture fills the reading column: at 720px it left a third of the row
   empty next to it, which read like a broken layout rather than a choice */
.demo-band .showcase{margin:0;max-width:none}

.lede{font-size:clamp(17px,1.8vw,20px);color:var(--fg-2);margin:0 0 36px;max-width:48ch;line-height:1.55;text-wrap:pretty}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:40px}
.cta .btn{padding:12px 22px;font-size:14.5px}
.install-picker{display:inline-flex;flex-direction:column;align-items:flex-start;gap:9px}
.install-platforms{display:flex;gap:6px;flex-wrap:wrap}
.install-platform{border:1px solid var(--line-2);background:transparent;color:var(--muted);padding:6px 11px;
  font:600 10.5px/1 var(--mono);letter-spacing:.07em;cursor:pointer;transition:.14s}
.install-platform:hover{border-color:var(--silver);color:var(--silver-hi)}
.install-platform[aria-pressed="true"]{border-color:var(--sun-hi);background:var(--sun-dim);color:var(--fg)}
.install-platform:focus-visible,.install button:focus-visible{outline:2px solid var(--sun-hi);outline-offset:2px}
.install{display:inline-flex;align-items:center;gap:16px;border:1px solid var(--line-2);background:var(--inset);
  padding:13px 18px;font-family:var(--mono);font-size:14px}
.install .p{color:var(--sun-hi)}
.install code{color:var(--fg);white-space:nowrap;overflow:auto}
.install button{background:none;border:1px solid var(--line-2);color:var(--muted);padding:5px 12px;
  font-size:10.5px;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:.14s}
.install button:hover{border-color:var(--silver);color:var(--silver-hi)}
.run-hint{margin-top:15px;font-family:var(--mono);font-size:13px;color:var(--muted);letter-spacing:.01em}
.run-hint b{color:var(--sun-hi);font-weight:500}

/* the one product surface under the hero */
.showcase{margin-top:64px;border:1px solid var(--line-2);background:var(--raised)}
.showcase .capture{display:block;width:100%;height:auto;border:0;background:#000}
.term{font-family:var(--mono);font-size:13.5px;line-height:1.8}
.term .bar{display:flex;align-items:center;gap:9px;padding:12px 18px;border-bottom:1px solid var(--line);
  color:var(--muted);font-size:12px}
.term .bar .dot{width:8px;height:8px;background:var(--dim);flex:none}
.term .bar .path{color:var(--fg-2);margin-left:4px}
.term .bar .rt{margin-left:auto;color:var(--sun-hi)}
.term .body{padding:22px 22px 24px;white-space:pre;overflow-x:auto;color:var(--fg-2);tab-size:2}
.term .pr{color:var(--sun-hi)} .term .u{color:var(--fg)}
.term .tc{color:var(--silver)} .term .ok{color:var(--green)} .term .ru{color:var(--amber)}
.term .tk{color:var(--dim)} .term .hint{color:var(--dim)}

/* ---------- non-home page intro ---------- */
.page-head{padding:88px 0 60px;border-bottom:1px solid var(--line)}
.page-head .kicker{margin-bottom:20px}
.page-head h1{font-family:var(--mono);font-weight:700;font-size:clamp(34px,5vw,54px);letter-spacing:-.038em;
  margin:0 0 20px;max-width:18ch;line-height:1.05;text-wrap:balance}
.page-head p{color:var(--fg-2);max-width:60ch;font-size:clamp(16px,1.7vw,18.5px);margin:0;line-height:1.55;text-wrap:pretty}
.page-head .install-picker{margin-top:34px}

/* ---------- sections ---------- */
section{padding:96px 0;border-top:1px solid var(--line)}
section.plain{border-top:none}
.lead{margin-bottom:52px;max-width:64ch}
.lead .kicker{margin-bottom:20px}
h2{font-family:var(--mono);font-weight:600;font-size:clamp(24px,3.2vw,34px);letter-spacing:-.03em;
  margin:0 0 16px;line-height:1.14;max-width:22ch;text-wrap:balance}
h3{text-wrap:balance;letter-spacing:-.015em}
.sub{color:var(--muted);max-width:60ch;margin:0;font-size:16.5px;line-height:1.6;text-wrap:pretty}
.sub a{color:var(--sun-hi)}
.section-link{margin-top:26px;display:inline-flex;font-family:var(--mono);font-size:13.5px;color:var(--sun-hi)}
.section-link::after{content:"→";margin-left:8px}

/* value row — hairline-ruled, calm */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.values>div{padding:0 40px 0 0}
.values>div+div{padding-left:40px;border-left:1px solid var(--line)}
.values .kicker{margin-bottom:18px}
.values h3{margin:0 0 10px;font-size:18px;font-weight:600;color:var(--fg)}
.values p{margin:0;color:var(--muted);font-size:15px;line-height:1.6}

/* split panel — flagship */
.panel{border:1px solid var(--line-2);display:grid;grid-template-columns:1fr 1fr;background:var(--raised)}
.panel .copy{padding:44px 42px}
.panel .copy ul{list-style:none;padding:0;margin:0}
.panel .copy li{padding:17px 0 17px 24px;position:relative;color:var(--fg-2);border-top:1px solid var(--line);font-size:15px;line-height:1.5}
.panel .copy li:first-child{border-top:none}
.panel .copy li::before{content:"";position:absolute;left:0;top:24px;width:4px;height:4px;background:var(--silver)}
.panel .copy li b{color:var(--fg);font-weight:600}
.panel .demo{background:var(--inset);border-left:1px solid var(--line-2);padding:34px 32px;
  font-family:var(--mono);font-size:13px;line-height:2.05;color:var(--fg-2);overflow-x:auto;
  font-variant-numeric:tabular-nums;white-space:pre;margin:0;tab-size:2}
.demo .k{color:var(--sun-hi)} .demo .c{color:var(--dim)} .demo .s{color:var(--silver)} .demo .g{color:var(--green)}

/* feature grid — sharp hairline cells, no fill/glow */
.grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.grid.two{grid-template-columns:repeat(2,1fr)}
.card{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:34px 30px;transition:border-color .14s}
.card:hover{border-right-color:var(--line-2);border-bottom-color:var(--line-2)}
.card .ic{width:28px;height:28px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:var(--silver)}
.card .ic svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.35;fill:none;stroke-linecap:round;stroke-linejoin:round}
.card h3{margin:0 0 9px;font-size:16.5px;font-weight:600}
.card p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6}
.card .inline{color:var(--fg-2)}

/* data table */
.tbl-wrap{border:1px solid var(--line-2);overflow-x:auto}
.tbl{width:100%;min-width:600px;border-collapse:collapse;font-size:14.5px}
.tbl th,.tbl td{text-align:left;padding:15px 20px;border-bottom:1px solid var(--line)}
.tbl th{color:var(--silver);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.tbl td{color:var(--fg-2)}
.tbl td:first-child{color:var(--fg);font-weight:500}
.tbl .m{font-family:var(--mono);font-size:13px;color:var(--silver)}
.tbl tr:last-child td{border-bottom:none}

/* thesis — quiet */
.thesis{text-align:center}
.thesis .kicker{margin-bottom:24px}
.thesis h2{max-width:26ch;margin:0 auto 18px;font-size:clamp(24px,3.4vw,34px)}
.thesis p{max-width:58ch;margin:0 auto;color:var(--muted);font-size:16.5px}

/* steps — mono index */
.steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.step{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:32px 30px}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--mono);
  font-weight:500;font-size:12px;color:var(--silver);letter-spacing:.1em}
.steps{counter-reset:s}
.step h3{margin:16px 0 8px;font-size:16px;font-weight:600}
.step p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.58}
.step .inline{color:var(--fg-2)}

/* changelog — a timeline down a single ember rail */
.changelog{position:relative;padding-left:28px}
.changelog::before{content:"";position:absolute;left:4px;top:6px;bottom:6px;width:1px;
  background:linear-gradient(var(--line-2),var(--line) 40%,transparent)}
.release{position:relative;padding:30px 0}
.release+.release{border-top:1px solid var(--line)}
.release::before{content:"";position:absolute;left:-27px;top:38px;width:9px;height:9px;border-radius:50%;
  background:var(--dim);box-shadow:0 0 0 4px var(--bg)}
.release.latest::before{background:var(--sun);box-shadow:0 0 0 4px var(--bg),0 0 14px 2px color-mix(in srgb,var(--sun) 55%,transparent)}
.release.unreleased::before{background:transparent;border:1.5px solid color-mix(in srgb,var(--sun) 70%,transparent)}
.release-head{display:flex;align-items:baseline;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.release-head h2{margin:0;font-family:var(--mono);font-weight:700;font-size:25px;letter-spacing:-.02em}
.release-head h2 a{color:var(--sun-hi)}
.release-head h2 a:hover{color:var(--fg)}
.release-head .date{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;color:var(--dim)}
.release-head .pill{font-family:var(--mono);font-weight:600;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sun-hi);border:1px solid color-mix(in srgb,var(--sun) 45%,transparent);border-radius:999px;padding:2px 9px}
.release-head .pill.pending{color:var(--muted);border-color:color-mix(in srgb,var(--muted) 40%,transparent)}
.release-head .gh-link{margin-left:auto;font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--dim);white-space:nowrap}
.release-head .gh-link:hover{color:var(--sun-hi)}
.sec{display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;align-items:start;padding:9px 0}
.sec+.sec{border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.notes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;min-width:0}
.notes li{color:var(--fg-2);font-size:14.5px;line-height:1.55;padding-left:16px;position:relative;overflow-wrap:anywhere}
.notes li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:1px;
  background:var(--line-2)}
.notes li.more{padding-left:0}
.notes li .inline{color:var(--sun-hi)}
.notes li a{color:var(--sun-hi)}
.tag{align-self:start;font-family:var(--mono);font-weight:600;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line-2);border-radius:4px;padding:3px 9px;color:var(--muted);white-space:nowrap}
.tag.add{color:var(--green);border-color:color-mix(in srgb,var(--green) 45%,transparent)}
.tag.chg{color:var(--sun-hi);border-color:color-mix(in srgb,var(--sun) 45%,transparent)}
.tag.fix{color:var(--silver);border-color:var(--line-2)}
.tag.rm{color:var(--muted);border-color:var(--line-2)}
.tag.sec{color:var(--sun);border-color:color-mix(in srgb,var(--sun) 45%,transparent)}
.tag.break{color:var(--red);border-color:color-mix(in srgb,var(--red) 45%,transparent)}
.upstream-note{margin-top:34px;padding-top:24px;border-top:1px solid var(--line)}
.upstream-note p{margin:0;color:var(--dim);font-size:13.5px;line-height:1.65}
.upstream-note a{color:var(--sun-hi)}
@media (max-width:560px){.sec{grid-template-columns:minmax(0,1fr);gap:8px}.changelog{padding-left:20px}}

::selection{background:#fb9e44;color:#000}

/* scrollbar — thin, dark, silver thumb */
html{scrollbar-color:#232327 #000}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#000}
::-webkit-scrollbar-thumb{background:#1e1e22;border:3px solid #000;border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:#2d2d33}

/* mobile nav — zero-JS disclosure menu; desktop nav is hidden under 860px */
.nav-menu{display:none;position:relative}
.nav-menu summary{list-style:none;cursor:pointer;font-family:var(--mono);font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--silver);padding:8px 2px;user-select:none}
.nav-menu summary::-webkit-details-marker{display:none}
.nav-menu summary::before{content:"+ ";color:var(--sun-hi)}
.nav-menu[open] summary::before{content:"− "}
.nav-menu nav{position:absolute;right:0;top:calc(100% + 8px);z-index:70;display:flex;flex-direction:column;
  min-width:180px;max-height:calc(100vh - 66px);max-height:calc(100dvh - 66px);overflow-y:auto;overscroll-behavior:contain;background:var(--bg);border:1px solid var(--line-2);padding:8px 0}
.nav-menu nav a{color:var(--fg-2);font-size:14px;font-weight:500;padding:10px 18px}
.nav-menu nav a:hover{color:var(--silver-hi);background:#050506}
.nav-menu nav a.btn{margin:8px 12px 4px;justify-content:center;color:var(--fg)}

/* ledger — numbered value-prop rows, hairline-ruled */
.ledger{border-top:1px solid var(--line)}
.ledger-row{display:grid;grid-template-columns:72px 1fr;gap:28px;padding:36px 0;border-bottom:1px solid var(--line);
  transition:background .25s ease}
.ledger-row:hover{background:#060607}
.ledger-row:hover .ledger-idx{color:var(--sun-hi)}
.ledger-row:hover h3{color:var(--silver-hi)}
.ledger-idx{font-family:var(--mono);font-weight:500;font-size:12px;color:var(--silver);letter-spacing:.1em;padding-top:6px}
.ledger-row h3{margin:0 0 10px;font-size:19px;font-weight:600;color:var(--fg);letter-spacing:-.015em}
.ledger-row p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.68;max-width:70ch;text-wrap:pretty}
.ledger-row p b{color:var(--fg-2);font-weight:600}
.ledger-row p .inline{color:var(--fg-2)}
@media(max-width:560px){.ledger-row{grid-template-columns:44px 1fr;gap:16px}}

/* final call-to-action band */
.cta-band{text-align:center;padding:112px 0 120px}
.cta-band h2{margin-left:auto;margin-right:auto}
.cta-band p{margin:0 auto;color:var(--muted);max-width:52ch;font-size:16.5px;line-height:1.6}
.cta-band .cta{justify-content:center;margin:36px 0 0}

/* ——— the sun as a brand, outside the journey ——— */
/* the sunset: a blood-orange pixel sky closing the page; the ember horizon line is
   drawn in-canvas, so the footer's own hairline is dropped when they meet */
.sunset{position:relative;height:250px;overflow:hidden}
.sunset.tall{height:430px}
.sunset canvas{position:absolute;inset:0;display:block}
.sunset + footer.site{border-top:none}
@media(max-width:860px){.sunset{height:210px}.sunset.tall{height:330px}}
/* 404 */
.night{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  min-height:74vh;text-align:center;padding:64px 24px}
.night h1{margin:0;font-size:clamp(56px,9vw,96px);font-weight:600;letter-spacing:-.05em}
.night p{margin:0;color:var(--muted);font-size:17px;max-width:40ch}
.night .cta{justify-content:center;margin-top:8px}

/* footer */
footer.site{border-top:1px solid var(--line);padding:52px 0;color:var(--dim);font-size:13.5px}
.foot{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
.foot nav{display:flex;gap:14px 24px;font-size:13.5px;flex-wrap:wrap}
.foot nav a{color:var(--muted)}
.attrib{color:var(--dim);margin-top:14px;max-width:46ch;line-height:1.55}

@media(max-width:860px){
  :root{--pad:22px}
  .values,.grid,.grid.two,.steps{grid-template-columns:1fr;border-left:none}
  .values>div{padding:0 0 24px;border-left:none!important}
  .values>div+div{padding-top:24px;border-top:1px solid var(--line)}
  .card,.step{border-left:1px solid var(--line)}
  .panel{grid-template-columns:1fr}
  .panel .demo{border-left:none;border-top:1px solid var(--line-2)}
  .nav > nav{display:none}
  .nav-menu{display:block}
  section{padding:64px 0}
  .hero{padding:64px 0 48px}
  .demo-band{padding:0 0 64px}
  .showcase{margin-top:44px}
  /* no room beside the copy: sun.js clips the disc into the top-right corner and
     it fades back so it reads as texture above the eyebrow, never as a subject */
  #sun{opacity:.34}
  /* the install command is one long unbreakable token, so the row has to be a
     shrinkable flex line with the code scrolling inside it — an inline-flex box
     with a nowrap child pushed the whole row past the viewport edge on phones */
  .install-picker{display:flex;width:100%}
  .install-platforms{width:100%}
  .install{display:flex;width:100%;gap:12px}
  .install code{flex:1;min-width:0;overflow-x:auto;font-size:13px}
  .install button{flex:none}
  .term .body{font-size:11px}
}

/* interactions — link arrows and card hovers only, no scroll reveal. */
.section-link::after,.btn.arrow::after{transition:transform .22s var(--ease)}
.section-link:hover::after,.btn.arrow:hover::after{transform:translateX(5px)}
.card{transition:border-color .25s var(--ease),background .25s var(--ease)}
.card:hover{background:#050506}

/* reduced motion: the hero is already a static section, so only the sun's
   animation stops (sun.js draws a single frame). Nothing to collapse. */


/* ---------- models catalog ---------- */
.cat-controls{padding:40px 0 0}
.cat-search{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cat-search input[type="search"]{
  flex:1;min-width:200px;max-width:420px;
  background:var(--inset);border:1px solid var(--line-2);color:var(--fg);
  font-family:var(--mono);font-size:14px;padding:11px 16px;
  transition:border-color .14s,box-shadow .14s}
.cat-search input[type="search"]:focus{outline:none;border-color:var(--sun-hi);
  box-shadow:0 0 0 1px var(--sun-hi)}
.cat-search input[type="search"]::placeholder{color:var(--dim)}
.cat-filters{display:flex;gap:8px;flex-wrap:wrap}
.cat-chip{
  border:1px solid var(--line-2);background:transparent;color:var(--muted);
  padding:7px 14px;font:500 12px/1 var(--mono);letter-spacing:.04em;
  cursor:pointer;transition:.14s}
.cat-chip:hover{border-color:var(--silver);color:var(--silver-hi)}
.cat-chip[aria-pressed="true"]{border-color:var(--sun-hi);background:rgba(240,134,46,.12);color:var(--fg)}
.cat-meta{margin:18px 0 0;font-family:var(--mono);font-size:12px;color:var(--dim);letter-spacing:.02em}
.cat-results{padding-top:24px}
.catalog{display:flex;flex-direction:column;gap:0}
.cat-prov{border-top:1px solid var(--line)}
.cat-prov:last-child{border-bottom:1px solid var(--line)}
.cat-prov-head{
  display:flex;align-items:center;gap:14px;padding:16px 4px;cursor:pointer;
  transition:background .14s;user-select:none}
.cat-prov-head:hover{background:rgba(255,255,255,.015)}
.cat-prov-head:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
.cat-prov-name{font-weight:600;font-size:15.5px;color:var(--fg);flex:none}
.cat-prov-count{
  font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.06em;
  border:1px solid var(--line);padding:3px 8px;flex:none}
.cat-prov-chevron{font-family:var(--mono);font-size:16px;color:var(--dim);flex:none;width:18px;text-align:center;margin-left:auto}
.cat-prov-body{padding:0 4px 20px;overflow-x:auto}
.cat-tbl{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
.cat-tbl th{text-align:left;padding:8px 14px 10px;border-bottom:1px solid var(--line);
  color:var(--silver);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:500}
.cat-tbl th:nth-child(n+3){text-align:right}
.cat-tbl td{padding:7px 14px;border-bottom:1px solid rgba(198,203,212,.06);color:var(--fg-2)}
.cat-tbl td:nth-child(n+3){text-align:right}
.cat-tbl tr:last-child td{border-bottom:none}
.cat-tbl tr:hover td{background:rgba(255,255,255,.02)}
.m-name{color:var(--fg);font-weight:500}
.m-id{font-family:var(--mono);font-size:11px;color:var(--dim);margin-left:8px}
.m-num{font-family:var(--mono);font-size:12.5px;color:var(--silver)}
.mb{display:inline-block;font-family:var(--mono);font-size:9.5px;font-weight:600;
  padding:2px 5px;margin-right:4px;letter-spacing:.05em;vertical-align:1px}
.mb-r{background:rgba(240,134,46,.14);color:var(--sun-hi)}
.mb-v{background:rgba(63,182,168,.14);color:var(--teal)}
.cat-local{color:var(--muted);font-size:14px;line-height:1.6;max-width:52ch;margin:4px 0 0}
.cat-empty{color:var(--muted);font-family:var(--mono);font-size:15px;padding:40px 0}
.cat-loading{color:var(--muted);font-family:var(--mono);font-size:15px;padding:40px 0}
@media(max-width:860px){
  .cat-search{flex-direction:column;align-items:stretch}
  .cat-search input[type="search"]{max-width:none}
}