/* tashan — the intelligence layer for AI capabilities.
 * Identity: warm stone-black greyscale + jade green (攻玉 — the polished jade), accent reserved for data only.
 * Geist + Geist Mono (data = instrument readout) + an ASCII mountain motif (他山). Cinematic, developer-trustworthy — not an exchange.
 */

@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/assets/fonts/Geist-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "GeistMono"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/assets/fonts/GeistMono-Variable.woff2") format("woff2");
}

:root {
  /* the tashan mark (他山之石 faceted stone) as a reusable image — used for the nav brand, the status-line
     marker, and every dossier section bullet, so the brand shows instead of a generic ◆/□ glyph */
  --logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M17 4 L23 10 L29 22 L18 28 L5 24 L4 13 Z' fill='%2334e0a0'/%3E%3Cpath d='M17 4 L4 13 L14 15 Z' fill='%235cf0c0'/%3E%3Cpath d='M17 4 L23 10 L29 22 L18 28 L14 15 Z' fill='%231f9e78'/%3E%3C/svg%3E");
  --bg:          #0b0b0a;
  --bg-soft:     #0e0e0c;
  --surface:     #131312;   /* card */
  --surface-2:   #1a1a18;   /* elevated / hover */
  --hairline:    rgba(255,255,255,0.08);
  --hairline-soft: rgba(255,255,255,0.05);

  --text:        #edece8;
  --text-dim:    #8a8882;
  --text-faint:  #57564f;

  --jade:       #34e0a0;              /* the one signal color */
  --jade-bright:#5cf0c0;
  --jade-dim:   rgba(52,224,160,0.12);
  --jade-line:  rgba(52,224,160,0.32);
  --green:       #5cf0c0;              /* "fresh / active", used sparingly */
  --red:         #f2604a;             /* "stale / churned" */
  --amber:       #e0a83b;             /* "risk noted", never used for a score */

  --font-sans:  "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  /* Display only. Character where the text is read once and looked at; the workhorse keeps the
     12-15px table text, where neutral letterforms and tabular figures decide whether 5,788 rows
     are scannable. Falls back to the workhorse, so a failed font load changes nothing but flavour. */
  --font-display: "Space Grotesk", "Geist", -apple-system, system-ui, sans-serif;
  --font-mono:  "GeistMono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-serif: ui-serif, "New York", "Iowan Old Style", Georgia, serif;

  --text-display: clamp(2.6rem, min(7vw, 8vh), 5rem);
  --text-h2:      clamp(1.5rem, 3.2vw, 2.1rem);
  --text-lead:    clamp(1.05rem, 1.5vw, 1.2rem);
  /* Type scale. The page had 42 distinct font sizes — that is ad-hoc sizing, not a system. Six
     declarations sat under 10px and roughly forty under 12px, which is the floor below which text
     stops being comfortably readable at arm's length. Seven steps now, and nothing under 12px. */
  --fs-micro: .75rem;    /* 12 — uppercase mono labels, counts, tags */
  --fs-xs:    .8125rem;  /* 13 — dense secondary text */
  --fs-sm:    .875rem;   /* 14 — chips, table cells, nav */
  --fs-base:  .9375rem;  /* 15 — rail rows, list rows */
  --fs-md:    1rem;      /* 16 — body */
  --fs-lg:    1.0625rem; /* 17 — subheads */
  --fs-xl:    1.3rem;    /* 21 — prose h2 */

  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem; --sp-6:1.5rem;
  --nav-h: 3.7rem;   /* measured height of .nav — every sticky layer offsets by this */
  --sp-8:2rem; --sp-12:3rem; --sp-16:4rem; --sp-24:6rem;

  --radius: 12px; --radius-sm: 8px; --radius-pill: 999px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --measure: 42rem;
}

*,*::before,*::after { box-sizing: border-box; }
html,body { margin:0; padding:0; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font-sans); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-synthesis: none;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--jade-dim); color: #fff; }
:focus-visible { outline: 2px solid var(--jade); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: 76rem; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 2.5rem); }
.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }
.jade { color: var(--jade); }
.dim { color: var(--text-dim); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline-soft);
}
.nav__in { display:flex; align-items:center; justify-content:space-between; gap: var(--sp-4); padding-block: var(--sp-4); }
.brand { display:inline-flex; align-items:center; gap: .55rem; font-weight: 600; letter-spacing:-0.01em; font-size: var(--fs-md); }
.brand__mark { width: 16px; height: 16px; flex-shrink:0; background: var(--logo) center/contain no-repeat;
  filter: drop-shadow(0 0 4px rgba(52,224,160,0.4)); }
/* the tashan mark in the status line, in place of a generic ◆ glyph */
.sl-logo { display:inline-block; width:.82em; height:.82em; margin-right:.4em; vertical-align:-.12em;
  background: var(--logo) center/contain no-repeat; }
.brand small { font-family: var(--font-mono); font-size:var(--fs-micro); color: var(--text-faint);
  border:1px solid var(--hairline); border-radius:4px; padding:1px 5px; letter-spacing:.04em; margin-left:.4rem; text-transform:uppercase; }
.nav__links { display:flex; align-items:center; gap: var(--sp-6); font-size:var(--fs-base);
  color: var(--text-dim); }
/* The account is not a fifth link to read. It sits past a hairline, as a glyph, in the corner every
   customer already looks in — so the header states four things and offers one action. */
.nav__acct { display:inline-flex; align-items:center; justify-content:center;
  width:2rem; height:2rem; margin-left:calc(var(--sp-2) - var(--sp-6)); border-radius:50%;
  color: var(--text-dim); border:1px solid transparent;
  transition: color .12s var(--ease), border-color .12s var(--ease), background .12s var(--ease); }
.nav__links .nav__acct { margin-left: var(--sp-2); position:relative; }
.nav__acct::before { content:""; position:absolute; left:calc(var(--sp-3) * -1); top:20%; bottom:20%;
  width:1px; background: var(--hairline); }
.nav__acct svg { width:1.15rem; height:1.15rem; display:block; }
.nav__acct:hover { color: var(--text); border-color: var(--hairline); background: var(--surface); }
.nav__acct[aria-current="page"] { color: var(--jade); border-color: var(--jade-line);
  background: var(--jade-dim); }
.nav__links a:hover { color: var(--text); }
.nav__links a[aria-current="page"] { color: var(--text); }
@media (max-width: 40rem){ .nav__links { gap: var(--sp-4); font-size:var(--fs-sm); } .brand small{ display:none; } }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(var(--sp-16), 12vh, var(--sp-24)) var(--sp-12); }
/* mask band opens higher + reaches lower than the ridge crests, or raising the mountains just clips them */
#ridge { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0 16%, #000 38%, #000 80%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0 16%, #000 38%, #000 80%, transparent 100%); }
.hero__in { position: relative; z-index: 1;
  /* soft dark halo so the copy stays legible over the living mountain behind it */
  /* tight halo hugs each glyph (readability) + a wide soft one (separation). Doing the work here rather
     than in the scrim keeps the mountain visible — a bigger scrim just erases the art. */
  text-shadow: 0 1px 2px rgba(11,11,10,.95), 0 0 10px rgba(11,11,10,.9),
               0 0 26px rgba(11,11,10,.8), 0 2px 34px rgba(11,11,10,.7); }
/* A text-shadow only hugs the glyphs; the ridge still crowds the copy between lines. This is the real
   shadow AREA — a wide scrim behind the hero text, sitting above the canvas but under the words. */
.hero__in::before { content:""; position:absolute; z-index:-1; pointer-events:none;
  left:-4%; right:0; top:-6%; bottom:-8%;
  background: radial-gradient(52% 58% at 20% 46%,
    rgba(11,11,10,.82) 0%, rgba(11,11,10,.52) 40%, rgba(11,11,10,.18) 68%, rgba(11,11,10,0) 100%); }
.hero__eyebrow { font-family: var(--font-mono); font-size:var(--fs-sm); letter-spacing:.12em; text-transform:uppercase;
  color: var(--jade); margin: 0 0 var(--sp-6); display:flex; align-items:center; gap:.6rem; }
.hero__eyebrow::before { content:""; width:22px; height:1px; background: var(--jade-line); display:inline-block; }
.hero h1 {
  font-size: var(--text-display); font-weight: 500; line-height: 1.02; letter-spacing:-0.03em;
  margin: 0; max-width: 18ch; color:#fff; overflow-wrap:anywhere;
}
.hero h1 em { font-style: normal; color: var(--jade); }
/* headline: staggered rise + an amber underline drawn under "works" */
.hero__title .w { display:inline-block; opacity:0; transform: translateY(0.55em);
  animation: heroRise .7s cubic-bezier(.2,.7,.2,1) forwards; }
.hero__title .w:nth-child(1){ animation-delay:.05s } .hero__title .w:nth-child(2){ animation-delay:.13s }
.hero__title .w:nth-child(3){ animation-delay:.21s } .hero__title .w:nth-child(4){ animation-delay:.29s }
/* The headline is now seven words with no full stop, so the per-word stagger needs three more
   steps. .dot is gone with the period it styled. */
.hero__title .w:nth-child(5){ animation-delay:.37s } .hero__title .w:nth-child(6){ animation-delay:.45s }
.hero__title .w:nth-child(7){ animation-delay:.53s }
.hero__title em { position:relative; }
.hero__title em::after { content:""; position:absolute; left:0; right:0; bottom:-.04em; height:2px;
  background: var(--jade); transform: scaleX(0); transform-origin:left;
  animation: heroLine .5s cubic-bezier(.2,.7,.2,1) forwards; animation-delay:.95s; box-shadow:0 0 12px var(--jade); }
@keyframes heroRise { to { opacity:1; transform:none; } }
@keyframes heroLine { to { transform: scaleX(1); } }
/* rotating dimension line — the product's four measures cycle in mono amber */
.hero__rot { margin: var(--sp-5) 0 0; font-size:var(--fs-base); color: var(--text-faint); letter-spacing:.02em; }
.rot { display:inline-block; overflow:hidden; height:1.2em; vertical-align:-0.28em; }
.rot > span { display:inline-block; color: var(--jade); will-change: transform, opacity; }
.hero__sub { margin: var(--sp-5) 0 0; max-width: 42rem; font-size: var(--text-lead); color: var(--text-dim); line-height:1.5; }
.hero__cta { margin-top: var(--sp-8); display:flex; gap: var(--sp-3); flex-wrap:wrap; }
.hero__stat { margin-top: var(--sp-8); display:flex; flex-wrap:wrap; gap: var(--sp-8);
  font-family: var(--font-mono); font-size:var(--fs-base); color: var(--text-dim); }
.hero__stat b { color: var(--text); font-weight:500; }
.hero__stat .k { color: var(--jade); }
/* name story + the 他山 ridge — organic, permeating, low-key */
.hero__name { margin: var(--sp-6) 0 0; font-family: var(--font-mono); font-size:var(--fs-sm);
  color: var(--text-faint); letter-spacing:.01em; max-width: 48rem; line-height:1.6; }
.hero__name .zh { color: var(--jade); letter-spacing:.2em; margin-right:.55rem; font-size:var(--fs-md); }
.ascii-range { position:absolute; left:50%; bottom:-2px; transform:translateX(-50%); z-index:0; margin:0;
  pointer-events:none; font-family: var(--font-mono); font-size: clamp(7px, .95vw, 12px); line-height:1.12;
  color: var(--text-dim); opacity:.14; white-space:pre; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .hero__title .w { opacity:1; transform:none; animation:none; }
  .hero__title em::after { transform:scaleX(1); animation:none; }
}

.btn { display:inline-flex; align-items:center; gap:.5em; padding:.7em 1.15em; border-radius: var(--radius-pill);
  text-shadow:none;   /* buttons sit on their own fill — the hero's halo just muddies the label */
  font-size:var(--fs-base); font-weight:500; transition: background .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease); }
.btn--primary { background: var(--text); color:#000; }
.btn--primary:hover { background:#fff; }
.btn--ghost { border:1px solid var(--jade-line); color: var(--jade); }
.btn--ghost:hover { border-color: var(--jade); background: var(--jade-dim); color: var(--jade-bright); }
.btn:active { transform: translateY(1px); }

/* ---------- section shell ---------- */
.section { padding-block: var(--sp-16); border-top: 1px solid var(--hairline-soft); }
.section__head { display:flex; align-items:flex-end; justify-content:space-between; gap: var(--sp-4); margin-bottom: var(--sp-8); flex-wrap:wrap; }
.section__head h2 { font-size: var(--text-h2); font-weight:600; letter-spacing:-0.02em; margin:0; color:#fff; }
.section__head p { margin:.4rem 0 0; color: var(--text-dim); max-width: 46ch; }
.kicker { font-family: var(--font-mono); font-size:var(--fs-xs); letter-spacing:.12em; text-transform:uppercase; color: var(--jade); margin:0 0 .5rem; }

/* ---------- filter chips ---------- */
.chips { display:flex; gap: var(--sp-2); flex-wrap:wrap; }
.chip { font-family: var(--font-mono); font-size:var(--fs-sm); padding:.32rem .7rem; border-radius: var(--radius-pill);
  border:1px solid var(--hairline); color: var(--text-dim); background:transparent; cursor:pointer;
  transition: color .15s, border-color .15s, background .15s; }
.chip:hover { color: var(--text); }
.chip[aria-pressed="true"] { color:#000; background: var(--jade); border-color: var(--jade); font-weight:500; }
.chip--on { color:#000; background: var(--jade); border-color: var(--jade); font-weight:500; }  /* static (paginated hubs) */

/* ---------- generated hub pages (category / skills) ---------- */
.muted { color: var(--text-faint); font-weight:400; font-size:var(--fs-xs); font-family: var(--font-mono); }
.note { color: var(--text-faint); font-size:var(--fs-base); max-width:62ch; margin-top: var(--sp-4); }
/* One catalog: a capability we can't rate is still listed, it just says so instead of showing a number
   we didn't earn. Deliberately quiet — this is an absence of evidence, not a warning about the item. */
.unrated { font-family: var(--font-mono); font-size:var(--fs-xs); font-weight:400; color: var(--text-faint);
  letter-spacing:.02em; white-space:nowrap; }
.tag--skill { color: var(--jade); border-color: var(--jade-line); }
.tag--server { color: var(--text-faint); }

/* ---------- category catalog — measured cards (each previews its trust leader) ---------- */
.catgrid { display:grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: var(--sp-3); }
.catcard { display:flex; flex-direction:column; gap:.45rem; text-align:left;
  padding: .7rem .8rem; border:1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--text-dim); cursor:pointer; transition: border-color .15s, background .15s, transform .12s, box-shadow .15s; }
.catcard:hover { border-color: var(--jade-line); background: var(--surface-2); transform: translateY(-2px);
  box-shadow: 0 6px 20px -12px rgba(0,0,0,.7); }
.catcard.is-on { border-color: var(--jade); background: var(--jade-dim); }
.catcard__hd { display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; }
.catcard__n { font-size:var(--fs-base); font-weight:500; line-height:1.15; color: var(--text); }
.catcard__c { font-size:var(--fs-sm); color: var(--text-faint); flex-shrink:0; }
.catcard.is-on .catcard__c { color: var(--jade); }
.catcard__top { font-size:var(--fs-micro); color: var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.catcard__t { color: var(--jade); }

/* ---------- two-axis Index: category rail (side) + facet toolbar (top) + board (focus) ---------- */
.index-layout { display:grid; grid-template-columns: 236px 1fr; gap: var(--sp-6); align-items:start; }
.index-main { min-width:0; }                       /* let the table scroll instead of blowing out the grid */
/* The rail is ~5x the viewport tall (95 rows across the task and domain axes). A sticky element
   taller than the screen pins its TOP and puts everything past the fold permanently out of reach —
   74 of those rows, including the whole tail of the category list, could not be scrolled to or
   clicked. It needs its own scrollport, and it must start BELOW the nav rather than under it. */
.catrail {
  position:sticky; top: calc(var(--nav-h) + var(--sp-3));
  max-height: calc(100vh - var(--nav-h) - var(--sp-6));
  overflow-y:auto; overscroll-behavior: contain; scrollbar-width: thin;
  padding-right: var(--sp-2);
}
.catrail__h { font-size:var(--fs-micro); letter-spacing:.08em; text-transform:uppercase; color: var(--text-faint); margin:0 0 var(--sp-3); padding-left:.3rem; }
/* The task rail is the primary browse axis, so the domain rail below it is visibly secondary — one
   heading leads, the other is a fallback for people who think in technologies rather than in jobs. */
.catrail__h--row { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.combtog { font-family: var(--font-mono); font-size:var(--fs-micro); letter-spacing:.06em; text-transform:uppercase;
  color: var(--text-faint); background:transparent; border:1px solid var(--hairline); border-radius: var(--radius-pill);
  padding:.1rem .45rem; cursor:pointer; transition: color .15s var(--ease), border-color .15s var(--ease); }
.combtog:hover { color: var(--text-dim); border-color: var(--hairline); }
.combtog.is-on { color: var(--jade); border-color: var(--jade-line); background: var(--jade-dim); }
.catrail__h--sub { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top:1px solid var(--hairline); }
.trole { margin-bottom: var(--sp-4); }
.trole__h { font-size:var(--fs-micro); letter-spacing:.09em; text-transform:uppercase; color: var(--text-faint);
            margin:0 0 .25rem; padding-left:.3rem; opacity:.75; }
.catrail #catrail { display:flex; flex-direction:column; gap:1px; }
.crow { display:flex; align-items:center; justify-content:space-between; gap:.5rem; text-align:left;
  padding:.42rem .55rem; border:1px solid transparent; border-radius: var(--radius-sm); background:transparent;
  color: var(--text-dim); cursor:pointer; font-size:var(--fs-base); transition: background .12s, color .12s, border-color .12s; }
.crow:hover { background: var(--surface); color: var(--text); }
.crow.is-on { background: var(--jade-dim); color: var(--text); border-color: var(--jade-line); }
/* crow__l is the label (flexes), crow__c the count (fixed). `crow__n` is gone: it named the count in
   one rail and the label in the other, which is how the two rails ended up looking unrelated. */
.crow__l { line-height:1.2; }
.crow__c { font-size:var(--fs-xs); color: var(--text-faint); flex-shrink:0; }
.crow.is-on .crow__c { color: var(--jade); }
@media (max-width: 900px) {
  .index-layout { grid-template-columns: 1fr; gap: var(--sp-4); }
  .catrail { position:static; max-height:none; overflow:visible; padding-right:0; }
  .catrail__h { display:none; }
  .catrail #catrail { flex-direction:row; flex-wrap:wrap; gap:.4rem; }
  .crow { border:1px solid var(--hairline); border-radius: var(--radius-pill); padding:.3rem .7rem; }
}
.cattag { font-family: var(--font-mono); font-size:var(--fs-micro); color: var(--text-faint); border:1px solid var(--hairline-soft);
  border-radius:3px; padding:.02em .34em; margin-left:.5rem; }
.clearcat { font-family: var(--font-mono); font-size:var(--fs-xs); color: var(--jade); background: var(--jade-dim);
  border:1px solid var(--jade-line); border-radius: var(--radius-pill); padding:.1rem .6rem; cursor:pointer; }
.clearcat:hover { background: var(--jade); color:#000; }

/* ---------- filter toolbar (faceted: sort-once + refine-many) ---------- */
.toolbar { display:flex; flex-wrap:wrap; align-items:center; gap: var(--sp-3) var(--sp-6); margin: var(--sp-6) 0 var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border:1px solid var(--hairline); border-radius: var(--radius); background: var(--surface);
  position:sticky; top: var(--nav-h); z-index:5; }
.tgroup { display:flex; align-items:center; gap:.3rem; flex-wrap:wrap; }
.tgroup__l { font-size:var(--fs-micro); letter-spacing:.08em; text-transform:uppercase; color: var(--text-faint); margin-right:.15rem; }
.fpill { display:inline-flex; align-items:center; gap:.4rem; font-family: var(--font-mono); font-size:var(--fs-xs);
  padding:.26rem .6rem; border-radius: var(--radius-pill); border:1px solid var(--hairline); color: var(--text-dim);
  background:transparent; cursor:pointer; transition: color .12s, border-color .12s, background .12s; }
.fpill:hover { color: var(--text); border-color: var(--jade-line); }
.fpill.is-on { color:#000; background: var(--jade); border-color: var(--jade); font-weight:500; }
.fpill__c { font-size:var(--fs-micro); opacity:.6; }
.fpill.is-on .fpill__c { opacity:.8; }
.fpill--toggle { border-style:dashed; }
.sortsel { display:inline-flex; align-items:center; gap:.4rem; margin-left:auto; font-family: var(--font-mono); font-size:var(--fs-xs); color: var(--text-faint); }
.sortsel select { font-family: var(--font-mono); font-size:var(--fs-sm); color: var(--text); background: var(--surface-2);
  border:1px solid var(--hairline); border-radius: var(--radius-sm); padding:.28rem .5rem; cursor:pointer; }
/* active-refinements bar */
.activebar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap: var(--sp-3);
  margin-bottom: var(--sp-3); }
.activebar__chips { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.achip { display:inline-flex; align-items:center; gap:.4rem; font-family: var(--font-mono); font-size:var(--fs-xs);
  padding:.22rem .55rem; border-radius: var(--radius-pill); border:1px solid var(--jade-line); background: var(--jade-dim);
  color: var(--jade); cursor:pointer; }
.achip:hover { background: var(--jade); color:#000; }
.achip__x { font-size:var(--fs-micro); opacity:.7; }
.activebar__clear { font-family: var(--font-mono); font-size:var(--fs-xs); color: var(--text-dim); background:transparent;
  border:0; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.activebar__clear:hover { color: var(--text); }
.activebar__count { font-size:var(--fs-xs); color: var(--text-faint); white-space:nowrap; }
.linkbtn { font-family: var(--font-mono); color: var(--jade); background:none; border:0; cursor:pointer; text-decoration:underline; }
@media (max-width: 640px) { .toolbar { position:static; } .tgroup__l { width:100%; } }

/* ---------- the Index (leaderboard) ---------- */
.board { border:1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.board__scroll { overflow-x:auto; }
table.board__t { width:100%; border-collapse: collapse; font-size:var(--fs-base); min-width: 720px; }
.board__t thead th { font-family: var(--font-mono); font-size:var(--fs-micro); letter-spacing:.08em; text-transform:uppercase;
  color: var(--text-faint); text-align:left; font-weight:500; padding: .8rem 1rem; border-bottom:1px solid var(--hairline);
  background: var(--surface); white-space:nowrap; }
  /* No position:sticky here. .board__scroll sets overflow-x:auto, which forces overflow-y to auto,
     making IT the scrollport rather than the viewport — the header never stuck to the top of the
     screen, it just scrolled away with the table while claiming otherwise. */
.board__t thead th.num, .board__t td.num { text-align:right; }
.board__t tbody tr { border-bottom:1px solid var(--hairline-soft); cursor:pointer; transition: background .12s; }
.board__t tbody tr:last-child { border-bottom:0; }
.board__t tbody tr:hover { background: var(--surface-2); }
.board__t td { padding: .85rem 1rem; vertical-align: middle; }
.rank { font-family: var(--font-mono); color: var(--text-faint); font-size:var(--fs-sm); width: 2.5rem; }
.cap__name { font-weight:500; color: var(--text); letter-spacing:-0.01em; }
.cap__link { color: inherit; text-decoration: none; }
.cap__link:hover { color: var(--jade-bright); }
.board__more td { text-align:center; padding: 1.1rem 0; cursor:auto; }
.board__more:hover { background: transparent; }
.cap__id { font-family: var(--font-mono); font-size:var(--fs-xs); color: var(--text-faint); margin-top:1px; word-break:break-all; }
.tag { font-family: var(--font-mono); font-size:var(--fs-micro); padding:.12rem .4rem; border-radius:4px; border:1px solid var(--hairline);
  color: var(--text-dim); text-transform:uppercase; letter-spacing:.03em; }
.num { font-family: var(--font-mono); font-feature-settings:"tnum" 1; color: var(--text); }
.num--dim { color: var(--text-dim); }
/* adoption bar */
.sig { display:flex; align-items:center; gap:.6rem; justify-content:flex-end; }
.sig__val { font-family: var(--font-mono); color: var(--jade); font-size:var(--fs-md); min-width: 2.4rem; text-align:right; }
.bar { width: 74px; height:6px; border-radius:3px; background: rgba(255,255,255,0.07); overflow:hidden; flex-shrink:0; }
.bar > i { display:block; height:100%; background: linear-gradient(90deg, var(--jade-line), var(--jade)); border-radius:3px; }
.sig--none .sig__val { color: var(--text-faint); }
.unit { color: var(--text-faint); font-size:var(--fs-xs); }
/* raw public signal beside the score — the part a competitor cannot show, so it reads as data not chrome */
.ev { font-family: var(--font-mono); font-size:var(--fs-sm); color: var(--text-dim); white-space:nowrap; }
/* Adoption cell: score on top, the raw evidence it was derived from underneath. The evidence is the
   provenance for a number that is otherwise unfalsifiable, so it stays on the row, not in a tooltip. */
td.num .unit { display:block; line-height:1.25; white-space:nowrap; }
.cap-desc { color: var(--text-dim); font-size:var(--fs-md); line-height:1.6; margin: var(--sp-4) 0 0; max-width: 62ch; }
.cap-meta { color: var(--text-faint); font-size:var(--fs-sm); margin-top: var(--sp-6); }
.cap-meta code { color: var(--text-dim); }
/* expertise verdict chip — the signal no directory has */
.vd { font-family: var(--font-mono); font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:.06em;
  padding:.1em .42em; border-radius:4px; border:1px solid var(--hairline); color: var(--text-dim); white-space:nowrap; }
.vd--deep { color: var(--green); border-color: rgba(79,208,138,.4); background: rgba(79,208,138,.08); }
.vd--solid { color: var(--jade); border-color: var(--jade-line); background: var(--jade-dim); }
.vd--thin { color: var(--text-dim); border-color: var(--hairline); }
.vd--wrapper { color: var(--red); border-color: rgba(242,96,74,.32); }
.vd--slop { color: var(--red); border-color: rgba(242,96,74,.5); background: rgba(242,96,74,.08); }
.expert-read { margin-top: var(--sp-8); padding: var(--sp-6) var(--sp-8); border:1px solid var(--hairline);
  border-left:2px solid var(--jade); border-radius: var(--radius); background: var(--surface); }
.expert-read p { font-family: var(--font-serif); font-size:1.18rem; line-height:1.5; color: var(--text); margin:.7rem 0 .5rem; }
.expert-read__by { color: var(--text-faint); font-size:var(--fs-xs); }
/* badge embed — the growth loop's activation surface */
.embed { margin-top: var(--sp-12); padding: var(--sp-6) var(--sp-8); border:1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); }
.embed__h { font-size:var(--fs-lg); font-weight:600; color:#fff; margin:0; }
.embed__p { color: var(--text-dim); font-size:var(--fs-base); margin:.4rem 0 var(--sp-5); max-width:52ch; }
.embed__badge { display:block; height:20px; margin-bottom: var(--sp-4); }
.embed__code { display:flex; align-items:stretch; border:1px solid var(--hairline); border-radius:8px; overflow:hidden; background: var(--bg); }
.embed__code code { flex:1; min-width:0; font-family: var(--font-mono); font-size:var(--fs-xs); color: var(--text-dim); padding:.7rem .8rem; overflow-x:auto; white-space:nowrap; }
.embed__copy { border:0; border-left:1px solid var(--hairline); background: var(--surface-2); color: var(--jade);
  font-family: var(--font-mono); font-size:var(--fs-xs); padding:0 1rem; cursor:pointer; white-space:nowrap; }
.embed__copy:hover { background: var(--jade-dim); }
/* official model-company tag */
.official { font-family: var(--font-mono); font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:.05em;
  color: var(--jade); border:1px solid var(--jade-line); background: var(--jade-dim); border-radius:4px; padding:.1em .4em; white-space:nowrap; }
/* install path + links to original */
.install { margin: var(--sp-8) 0; padding: var(--sp-6) var(--sp-8); border:1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); }
.install__hd { display:flex; align-items:baseline; justify-content:space-between; gap: var(--sp-4); flex-wrap:wrap; margin-bottom: var(--sp-4); }
.install__hd h2 { font-size:var(--fs-lg); font-weight:600; color:#fff; margin:0; }
.install__links { font-family: var(--font-mono); font-size:var(--fs-sm); color: var(--text-faint); }
.install__cmd { display:flex; align-items:stretch; border:1px solid var(--hairline); border-radius:8px; overflow:hidden; background: var(--bg); }
.install__cmd code { flex:1; min-width:0; font-family: var(--font-mono); font-size:var(--fs-sm); color: var(--jade); padding:.7rem .8rem; overflow-x:auto; white-space:nowrap; }
.install__copy { border:0; border-left:1px solid var(--hairline); background: var(--surface-2); color: var(--text-dim);
  font-family: var(--font-mono); font-size:var(--fs-xs); padding:0 1rem; cursor:pointer; white-space:nowrap; }
.install__copy:hover { background: var(--jade-dim); color: var(--jade); }
.install__lbl { color: var(--text-faint); font-size:var(--fs-sm); margin: var(--sp-4) 0 var(--sp-3); }
.install__lbl code { color: var(--text-dim); }
.install__snip { position:relative; margin:0; border:1px solid var(--hairline); border-radius:8px; background: var(--bg); overflow:auto; }
.install__snip code { display:block; font-family: var(--font-mono); font-size:var(--fs-sm); color: var(--text-dim); padding:.8rem 1rem; white-space:pre; }
.install__copy--pre { position:absolute; top:6px; right:6px; border:1px solid var(--hairline); border-radius:5px; padding:.15rem .5rem; }
.fresh { font-family: var(--font-mono); font-size:var(--fs-sm); }
.fresh--hot { color: var(--green); }
.fresh--warm { color: var(--text-dim); }
.fresh--cold { color: var(--red); }
.loading, .empty { padding: var(--sp-12); text-align:center; color: var(--text-faint); font-family: var(--font-mono); font-size:var(--fs-sm); }

/* ---------- trust band ---------- */
.trust { display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: var(--sp-4); }
.trust .card { border:1px solid var(--hairline); border-radius: var(--radius); padding: var(--sp-6); background: var(--surface); }
.trust .card h3 { margin:0 0 .4rem; font-size:var(--fs-md); font-weight:600; display:flex; align-items:center; gap:.5rem; }
.trust .card h3::before { content:""; width:7px; height:7px; border-radius:2px; background: var(--jade); }
.trust .card p { margin:0; color: var(--text-dim); font-size:var(--fs-base); }

/* ---------- prose (methodology / about) ---------- */
.prose { max-width: var(--measure); margin-inline:auto; padding-block: var(--sp-16); }
.prose h1 { font-size: clamp(2rem,5vw,2.8rem); font-weight:600; letter-spacing:-0.02em; margin:0 0 var(--sp-2); color:#fff; }
.prose .lede { font-size: var(--text-lead); color: var(--text); margin: 0 0 var(--sp-8); line-height:1.55; }
.prose h2 { font-size:var(--fs-xl); font-weight:600; margin: var(--sp-12) 0 var(--sp-3); color:#fff; letter-spacing:-0.01em; }
.prose h3 { font-size:var(--fs-md); font-weight:600; margin: var(--sp-8) 0 var(--sp-2); color:#fff; }
.prose p { color: var(--text-dim); margin:0 0 var(--sp-4); }
.prose strong { color: var(--text); font-weight:600; }
.prose a.link { color: var(--jade); border-bottom:1px solid var(--jade-line); }
.prose a.link:hover { border-bottom-color: var(--jade); }
.prose ul { color: var(--text-dim); padding-left: 1.1rem; margin:0 0 var(--sp-4); }
.prose li { margin: .3rem 0; }
.prose li b { color: var(--text); }
.prose .updated { font-family: var(--font-mono); font-size:var(--fs-sm); color: var(--text-faint); margin: 0 0 var(--sp-8); }
.callout { border:1px solid var(--jade-line); background: var(--jade-dim); border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-6); margin: var(--sp-8) 0; color: var(--text); font-size:var(--fs-md); }
.callout b { color: var(--jade); }
.callout.firewall { border-color: rgba(224,168,59,.4); background: rgba(224,168,59,.06); margin-top: var(--sp-8); }
.callout.firewall b { color: var(--amber); }
.reqtable td b { color:#fff; }
.pull { font-family: var(--font-serif); font-size: clamp(1.4rem,3vw,1.9rem); line-height:1.35; color:#fff;
  margin: var(--sp-12) 0; padding-left: var(--sp-6); border-left: 2px solid var(--jade); font-style: italic; }

/* ---------- capability detail ---------- */
.cap-hd { padding-block: var(--sp-12) var(--sp-6); }
.cap-hd .back { font-family: var(--font-mono); font-size:var(--fs-sm); color: var(--text-dim); }
.cap-hd .back:hover { color: var(--jade); }
.cap-hd h1 { font-size: clamp(1.8rem,4vw,2.6rem); font-weight:600; letter-spacing:-0.02em; margin:.6rem 0 .3rem; color:#fff; word-break:break-word; }
.cap-hd .cid { font-family: var(--font-mono); font-size:var(--fs-sm); color: var(--text-faint); word-break:break-all; }
.stats { display:grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: var(--sp-3); margin: var(--sp-8) 0; }
.stat { border:1px solid var(--hairline); border-radius: var(--radius); padding: var(--sp-6); background: var(--surface); }
.stat .l { font-family: var(--font-mono); font-size:var(--fs-micro); letter-spacing:.08em; text-transform:uppercase; color: var(--text-faint); margin:0 0 .5rem; }
.stat .v { font-family: var(--font-mono); font-size:1.7rem; color:#fff; line-height:1; }
.stat .v.jade { color: var(--jade); }
.stat .s { font-size:var(--fs-sm); color: var(--text-dim); margin-top:.4rem; }
.colist { display:flex; flex-wrap:wrap; gap: var(--sp-2); }
.colist a { font-family: var(--font-mono); font-size:var(--fs-sm); padding:.3rem .6rem; border:1px solid var(--hairline);
  border-radius: var(--radius-pill); color: var(--text-dim); }
.colist a:hover { color: var(--text); border-color: var(--jade-line); }

/* ---------- capability detail: rich-listing components ---------- */
/* vitality chip (Active / Stable / Abandoned — "finished != dead") */
.vchip { font-family: var(--font-mono); font-size:var(--fs-xs); font-weight:500; vertical-align:.28em;
  padding:.16rem .5rem; border-radius: var(--radius-pill); border:1px solid var(--hairline); white-space:nowrap; }
.riskflag { font-family: var(--font-mono); font-size:var(--fs-micro); color: var(--amber); border:1px solid rgba(224,168,59,.32);
  border-radius:4px; padding:.05rem .4rem; margin-left:.3rem; }
/* tashan's read — one key verdict + one decision line. No brand tax; it exists to shorten the decision. */
.take { margin: var(--sp-6) 0; padding: var(--sp-4) var(--sp-6); border:1px solid var(--hairline);
  border-left:3px solid var(--jade); border-radius: var(--radius); background: var(--surface); }
.take--good { border-left-color: var(--jade); } .take--ok { border-left-color: var(--text-dim); }
.take--warn { border-left-color: var(--red); }
.take__v { font-size:var(--fs-lg); font-weight:600; color:#fff; letter-spacing:-0.01em; }
.take--good .take__v { color: var(--jade); } .take--warn .take__v { color: var(--red); }
.take__t { margin:.3rem 0 0; color: var(--text-dim); font-size:var(--fs-md); line-height:1.5; }
.take__risk { color: var(--amber); }
/* Works-with — the agent clients a capability runs in */
.worksrow { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin: var(--sp-5) 0 0; }
.worksrow__l { font-size:var(--fs-micro); letter-spacing:.06em; text-transform:uppercase; color: var(--text-faint); margin-right:.3rem; }
.wchip { font-family: var(--font-mono); font-size:var(--fs-xs); color: var(--text-dim); border:1px solid var(--hairline-soft);
  border-radius: var(--radius-pill); padding:.12rem .55rem; }
/* a titled section on the detail page */
.capsec { margin-top: var(--sp-12); }
.capsec__hd { display:flex; align-items:baseline; justify-content:space-between; gap: var(--sp-4); flex-wrap:wrap;
  border-bottom:1px solid var(--hairline-soft); padding-bottom: var(--sp-2); margin-bottom: var(--sp-4); }
.capsec__hd h2 { font-size:var(--fs-lg); font-weight:600; color:#fff; margin:0; }
.capsec__aside { font-size:var(--fs-sm); color: var(--text-faint); }
.capsec__aside a.link { color: var(--text-dim); } .capsec__aside a.link:hover { color: var(--jade); }
.capsec__sub { color: var(--text-dim); font-size:var(--fs-base); margin:0 0 var(--sp-4); max-width: 62ch; }
/* repo-health stat strip */
.hstats { display:grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap: var(--sp-3); }
.hstat { display:flex; flex-direction:column; gap:.15rem; padding: var(--sp-4); border:1px solid var(--hairline);
  border-radius: var(--radius-sm); background: var(--surface); }
.hstat__v { font-size:1.15rem; color:#fff; font-variant-numeric: tabular-nums; }
.hstat__l { font-family: var(--font-mono); font-size:var(--fs-micro); letter-spacing:.06em; text-transform:uppercase; color: var(--text-faint); }
.hstat__s { font-size:var(--fs-xs); color: var(--text-dim); }
.topics { display:flex; flex-wrap:wrap; gap:.35rem; margin-top: var(--sp-4); }
.topic { font-family: var(--font-mono); font-size:var(--fs-xs); color: var(--text-dim); border:1px solid var(--hairline-soft);
  border-radius: var(--radius-pill); padding:.12rem .55rem; }
.repo__warn { margin: var(--sp-4) 0 0; font-size:var(--fs-sm); color: var(--red); }
/* cross-links & community — the "point outward" rows */
.xlinks { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.xlink { font-family: var(--font-mono); font-size:var(--fs-sm); color: var(--text-dim); border:1px solid var(--hairline);
  border-radius: var(--radius-sm); padding:.32rem .6rem; transition: border-color .12s, color .12s; }
.xlink:hover { color: var(--text); border-color: var(--jade-line); background: var(--surface-2); }
.xlink__a { color: var(--text-faint); }
.xlinks__sep { font-family: var(--font-mono); font-size:var(--fs-micro); color: var(--text-faint); margin:0 .3rem; letter-spacing:.04em; }
.commgrid { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: var(--sp-6); }
.commcol__h { font-size:var(--fs-micro); letter-spacing:.06em; text-transform:uppercase; color: var(--text-faint); margin:0 0 var(--sp-3); }
/* per-client install tabs */
.tabs__hd { display:flex; flex-wrap:wrap; gap:.2rem; margin-bottom: var(--sp-4); border-bottom:1px solid var(--hairline-soft); }
.tab { font-family: var(--font-mono); font-size:var(--fs-sm); color: var(--text-faint); background:transparent; border:0;
  border-bottom:2px solid transparent; padding:.4rem .7rem; cursor:pointer; margin-bottom:-1px; }
.tab:hover { color: var(--text-dim); }
.tab.is-on { color: var(--jade); border-bottom-color: var(--jade); }
.tabpane { display:none; } .tabpane.is-on { display:block; }

/* ---------- ASCII visual language (extends the ◆ terminal vocabulary into content) ---------- */
/* the tashan mark bullets every dossier section — ties detail sections to the nav brand + status line */
.capsec__hd h2::before { content: ""; display:inline-block; width:.62em; height:.62em; margin-right:.5rem;
  vertical-align:baseline; background: var(--logo) center/contain no-repeat; }
/* an ASCII rule: a monospace dotted line with a centered jade node — drop between major sections */
.rule { display:flex; align-items:center; gap:1rem; margin: var(--sp-8) 0; color: var(--hairline);
  font-family: var(--font-mono); font-size:var(--fs-sm); user-select:none; }
.rule::before, .rule::after { content:""; flex:1; height:0; border-top:1px dotted var(--hairline); }
.rule__node { color: var(--jade); letter-spacing:.3em; font-size:var(--fs-xs); }
/* loading = a blinking monospace caret; empty = a bracketed terminal line */
.loading::after { content:"▊"; margin-left:.1rem; color: var(--jade); animation: cblink 1.1s step-end infinite; }
@keyframes cblink { 50% { opacity:0; } }
.empty { border:1px dashed var(--hairline); border-radius: var(--radius); }
@media (prefers-reduced-motion: reduce) { .loading::after { animation:none; } }

/* ---------- footer ---------- */
.footer { border-top:1px solid var(--hairline-soft); margin-top: var(--sp-16); }
.footer__in { display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--sp-8); padding-block: var(--sp-12) var(--sp-8); }
.footer__brand .brand { font-size:var(--fs-md); }
.footer__tag { color: var(--text-dim); font-size:var(--fs-base); margin:.6rem 0 .3rem; max-width: 22rem; }
.footer__meta { font-family: var(--font-mono); font-size:var(--fs-xs); color: var(--text-faint); margin:0; }
.footer__col { display:flex; flex-direction:column; gap:.5rem; }
.footer__h { font-family: var(--font-mono); font-size:var(--fs-micro); letter-spacing:.08em; text-transform:uppercase; color: var(--text-faint); margin:0 0 .3rem; }
.footer__col a { color: var(--text-dim); font-size:var(--fs-base); }
.footer__col a:hover { color: var(--text); }
.footer__bar { display:flex; flex-wrap:wrap; gap: var(--sp-4) var(--sp-8); justify-content:space-between;
  padding-block: var(--sp-5); border-top:1px solid var(--hairline-soft); font-family: var(--font-mono);
  font-size:var(--fs-xs); color: var(--text-faint); }
@media (max-width: 720px) { .footer__in { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }

/* ============ terminal frame: ticker · status line · command palette ============ */
body { padding-bottom: 30px; }
/* top ticker */
.ticker { overflow:hidden; border-bottom:1px solid var(--hairline); background:#0b0b0e;
  font-family: var(--font-mono); font-size:var(--fs-xs); white-space:nowrap; position:relative; }
.ticker::after { content:""; position:absolute; inset:0 0 0 auto; width:64px; pointer-events:none;
  background: linear-gradient(90deg, transparent, #0b0b0e); }
.ticker__track { display:inline-block; padding-block:5px; animation: tick 80s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes tick { from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.tk-lead { color: var(--jade); margin:0 1.4rem 0 1rem; letter-spacing:.08em; }
.tk { color: var(--text-dim); } .tk-n { color: var(--text); } .tk-t { color: var(--jade); }
.tk-sep { color: var(--text-faint); margin:0 1rem; }
.tk-v { text-transform:uppercase; font-size:var(--fs-micro); letter-spacing:.05em; margin-left:.15rem; }
.tk-v--deep{color:var(--green)} .tk-v--solid{color:var(--jade)} .tk-v--thin{color:var(--text-faint)}
.tk-v--wrapper,.tk-v--slop{color:var(--red)}
/* bottom status line (tmux-style) */
.statusline { position:fixed; left:0; right:0; bottom:0; z-index:60; height:30px;
  display:flex; align-items:center; gap: var(--sp-6); padding:0 var(--sp-6);
  background:#0b0b0e; border-top:1px solid var(--hairline); font-family: var(--font-mono);
  font-size:var(--fs-xs); color: var(--text-faint); overflow:hidden; }
.statusline b { color: var(--text-dim); font-weight:600; }
.sl-a { color: var(--jade); font-weight:600; letter-spacing:.02em; }
.sl-i { white-space:nowrap; } .sl-sp { flex:1; } .sl-k { color: var(--text-dim); } .sl-dim { color: var(--text-faint); }
kbd { font-family: var(--font-mono); border:1px solid var(--hairline); border-bottom-width:2px;
  border-radius:4px; padding:0 .35em; color: var(--text-dim); font-size:var(--fs-micro); }
@media (max-width:720px){ .sl-i:nth-child(n+4), .sl-dim { display:none; } }
/* The ⌘K hint survived the 720px rule and overflowed the fixed status bar on phones — where it is also
   pointless, since there is no keyboard shortcut to press. Measured at 390px before removing. */
@media (max-width:560px){ .sl-k { display:none; } .statusline { font-size:var(--fs-xs); } }
/* command palette */
.pal { position:fixed; inset:0; z-index:100; background: rgba(6,6,8,.72);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display:flex; align-items:flex-start; justify-content:center; padding-top:12vh; }
.pal[hidden]{ display:none; }
.pal__box { width:min(640px,92vw); background: var(--surface); border:1px solid var(--hairline);
  border-radius:12px; box-shadow:0 24px 80px rgba(0,0,0,.6); overflow:hidden; }
.pal__head { display:flex; align-items:center; gap:.6rem; padding:14px 16px; border-bottom:1px solid var(--hairline); }
.pal__prompt { font-family: var(--font-mono); color: var(--jade); font-size:var(--fs-base); white-space:nowrap; }
.pal__input { flex:1; background:none; border:0; outline:none; color: var(--text); font-family: var(--font-mono); font-size:var(--fs-md); }
.pal__input::placeholder{ color: var(--text-faint); }
.pal__list { max-height:46vh; overflow-y:auto; }
.pal__row { display:flex; align-items:center; gap:.7rem; padding:9px 16px; cursor:pointer; font-size:var(--fs-base); }
.pal__row.is-sel { background: var(--jade-dim); }
.pal__row:hover { background: var(--surface-2); }
.pal__badge { font-family: var(--font-mono); color: var(--jade); min-width:2.2ch; text-align:right; }
.pal__go { font-family: var(--font-mono); font-size:var(--fs-micro); color: var(--text-faint); text-transform:uppercase; min-width:2.2ch; text-align:right; }
.pal__nm { color: var(--text); }
.pal__id { font-family: var(--font-mono); color: var(--text-faint); font-size:var(--fs-xs); margin-left:auto;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:44%; }
.pal__empty { padding:18px 16px; color: var(--text-dim); font-size:var(--fs-sm); }
.pal__foot { display:flex; gap: var(--sp-4); padding:9px 16px; border-top:1px solid var(--hairline);
  font-family: var(--font-mono); font-size:var(--fs-micro); color: var(--text-faint); }
.pal__by { margin-left:auto; color: var(--text-faint); }
body.pal-open { overflow:hidden; }
/* hero terminal caret */
.caret { display:inline-block; width:.55ch; height:1.05em; background: var(--jade); vertical-align:-.14em;
  margin-left:.15rem; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50%{ opacity:0 } }

/* ============ pricing ============ */
.phead { max-width:46rem; margin: var(--sp-16) 0 var(--sp-12); }
.phead__h { font-size: clamp(2rem,4.5vw,3rem); font-weight:500; letter-spacing:-0.03em; line-height:1.05; margin:.4rem 0 0; color:#fff; }
.phead__sub { margin: var(--sp-5) 0 0; color: var(--text-dim); font-size: var(--text-lead); line-height:1.55; }
.plans { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--sp-6); margin-bottom: var(--sp-8); }
@media (max-width:720px){ .plans { grid-template-columns:1fr; } }
.plan { position:relative; border:1px solid var(--hairline); border-radius: var(--radius); background: var(--surface);
  padding: var(--sp-8); display:flex; flex-direction:column; }
.plan--pro { border-color: var(--jade-line); box-shadow:0 0 0 1px var(--jade-line), 0 20px 60px rgba(52,224,160,.07); }
.plan__flag { position:absolute; top:-10px; right: var(--sp-6); background: var(--jade); color:#000;
  font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:.08em; padding:2px 8px; border-radius:4px; font-weight:700; }
.plan__top { display:flex; align-items:baseline; justify-content:space-between; gap: var(--sp-4); }
.plan__name { font-weight:600; font-size:var(--fs-lg); }
.plan__price { font-family: var(--font-mono); font-size:1.9rem; color:#fff; font-weight:500; }
.plan__price small { font-size:var(--fs-sm); color: var(--text-faint); font-weight:400; }
.plan--pro .plan__price { color: var(--jade); }
.plan__for { color: var(--text-dim); font-size:var(--fs-base); margin: var(--sp-3) 0 var(--sp-6); }
.plan__feat { list-style:none; padding:0; margin:0 0 var(--sp-8); display:flex; flex-direction:column; gap:.6rem; }
.plan__feat li { position:relative; padding-left:1.4rem; color: var(--text-dim); font-size:var(--fs-base); line-height:1.4; }
.plan__feat li::before { content:"▸"; position:absolute; left:0; color: var(--jade); font-size:var(--fs-sm); }
.plan__feat b { color: var(--text); }
.plan__cta { margin-top:auto; justify-content:center; }
.plan__note { text-align:center; color: var(--text-faint); font-size:var(--fs-xs); margin: var(--sp-3) 0 0; }
/* A roadmap item inside a tier you can BUY has to look different from a feature you are paying for,
   or the list quietly overstates the product — the exact defect the free tier was just fixed for. */
.plan__soon { color: var(--text-faint); }
.plan__soon .mono { font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:.06em; opacity:.85; }
.guarantee { margin: var(--sp-6) 0 var(--sp-16); }
.pfaq-lead { margin-bottom: var(--sp-5); }
.pfaq { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--sp-8) var(--sp-12); }
@media (max-width:720px){ .pfaq { grid-template-columns:1fr; } }
.pfaq h3 { font-size:var(--fs-md); font-weight:600; color: var(--text); margin:0 0 .4rem; }
.pfaq p { color: var(--text-dim); font-size:var(--fs-base); line-height:1.5; margin:0; }

@media (prefers-reduced-motion: reduce){ * { animation:none!important; transition:none!important; } }

/* Requests board is illustrative until grade-bounties are live. The banner is deliberately loud —
   a quiet disclaimer under dollar amounts still reads as real to someone skimming, and fabricated
   figures are the one thing this product cannot afford to have mistaken for measurement. */
.preview-banner { border-color: #b98900; background: rgba(185,137,0,.10); color: var(--text); }
.preview-banner b { color: #ffc94d; }
.is-preview { opacity:.72; }
.is-preview .btn { pointer-events:none; opacity:.5; }

/* ---------- the three jobs (homepage) ----------
   A visitor should not have to infer what this site does for them. Three cards, three real questions,
   in the order people actually arrive with them — audit first, because it is the one thing nobody else
   answers and it needs no prior knowledge of the catalog. */
.section--jobs { padding-block: var(--sp-12) 0; }
.jobs { display:grid; gap: var(--sp-4); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 60rem){ .jobs { grid-template-columns: 1fr; } }
.job { display:block; padding: var(--sp-6); border:1px solid var(--hairline); border-radius: var(--radius);
  background: var(--surface); transition: border-color .18s var(--ease), background .18s var(--ease); }
.job:hover { border-color: var(--jade-line); background: var(--surface-2); }
.job__k { font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; color: var(--text-faint); margin:0 0 var(--sp-3); }
.job__h { font-size:var(--fs-lg); font-weight:500; margin:0 0 var(--sp-2); letter-spacing:-.01em; }
.job__d { font-size:var(--fs-base); color: var(--text-dim); line-height:1.55; margin:0 0 var(--sp-4); }
.job__cta { font-size:var(--fs-sm); color: var(--jade); margin:0; }

/* doctor legend on /start — mirrors the CLI's own marks so the page and the terminal agree */
.legend { list-style:none; padding:0; margin: var(--sp-4) 0 0; max-width:none; }
.legend li { padding: var(--sp-2) 0; color: var(--text-dim); font-size:var(--fs-base); }
.legend b { font-family: var(--font-mono); display:inline-block; width:1.2em; }
.lv-alert { color: var(--red); } .lv-warn { color:#e3b341; } .lv-dim { color: var(--text-faint); }

/* ---------- responsive repair (2026-07-28 UI pass) ----------
   The nav gained a fifth link ("Use it") and stopped fitting at phone widths. A flex row that cannot
   fit does not shrink — it overflows, which widens the document, which clips EVERY element on the page
   to the right. The mobile capture showed body copy cut mid-word; the cause was up here, not in the
   prose. Wrapping is preferred over horizontal scroll: five short labels read fine on two lines and a
   scrolling nav hides destinations. */
.nav__in { flex-wrap: wrap; row-gap: var(--sp-2); }
.nav__links { flex-wrap: wrap; row-gap: var(--sp-1); min-width: 0; }
@media (max-width: 30rem){
  .nav__in { gap: var(--sp-2); flex-wrap:nowrap; }
  .nav__links { gap: var(--sp-3); font-size: var(--fs-sm); flex-wrap:nowrap; }
  /* The header is 526px wide intrinsically — wider than any phone — so it wrapped onto two rows and
     the account glyph could land off the corner, which is the one place it has to be. Methodology is
     the longest label at 92px and sits one tap away in the footer; dropping it here keeps the brand,
     three links and the glyph on a single row down to 375px. */
  .nav__links a[href="/methodology.html"] { display:none; }
}
/* belt and braces: nothing in normal flow may exceed the viewport */
.wrap > * { min-width: 0; }
pre, code, .install__snip { max-width: 100%; }

/* ---------- /start: usage page polish ----------
   Problems found in the capture: the h1 ran straight into the lede with no separation; body copy wrapped
   at ~62ch while code blocks and callouts spanned the full 1130px, so the eye had two different column
   widths on one page; and the privacy callout was visually louder than the instruction it annotates. */
.phead__sub { margin-top: var(--sp-5); }
.use-step { max-width: 60rem; }
.use-step .install__snip { max-width: 46rem; }
.use-step .capsec__sub { max-width: 46rem; }
.use-note { max-width: 46rem; border-color: var(--hairline); background: var(--surface);
  font-size: var(--fs-base); color: var(--text-dim); }
.use-note b { color: var(--text); }
.legend { max-width: 46rem; }

/* ---------- browse.html: the parent index for every category and task hub ---------- */
.browsegrid { display:grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: var(--sp-3);
  margin: var(--sp-4) 0 var(--sp-8); }
/* Grid, not wrapping flex. With flex the row fitted in 183px of a 186px box — three pixels of
   slack — so any label a hair wider bumped the count onto its own line and the card grew taller
   than its neighbours. A grid track sizes the label as 1fr and it truncates instead of pushing. */
.browsecard { display:grid; grid-template-columns: auto minmax(0,1fr) auto; align-items:center;
  column-gap:.5rem; row-gap:.15rem; padding: var(--sp-3) var(--sp-4);
  border:1px solid var(--hairline); border-radius: var(--radius); background: var(--surface);
  color: var(--text); text-decoration:none; transition: border-color .12s, background .12s; }
.browsecard:not(:has(.icon)) { grid-template-columns: minmax(0,1fr) auto; }
.browsecard:hover { border-color: var(--jade-line); background: var(--surface-2); }
/* The icon costs width, and without min-width:0 a long label refuses to shrink, so the count wraps
   to a second line and the card grows. Let the label truncate instead — the count is the comparable
   number and must stay on the label's row. */
.browsecard__t { font-weight:500; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.browsecard__c { color: var(--jade); font-size:var(--fs-sm); justify-self:end; }
.browsecard__lead { grid-column:1/-1; font-size:var(--fs-xs); color: var(--text-faint); }
.browserole { margin-bottom: var(--sp-6); }
.browserole__h { font-size:var(--fs-micro); letter-spacing:.08em; text-transform:uppercase; color: var(--text-faint);
  margin:0 0 var(--sp-2); }
/* One item component for both halves of the page. Categories were aligned grid cards and tasks were
   wrapping pills, so the two sections read as unrelated and — worse — the task counts never lined up
   in a column, which is the only thing that makes 97 of them comparable at a glance. */
.browsegrid--tight { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-2);
  margin-bottom: var(--sp-2); }
.browsegrid--tight .browsecard { padding: var(--sp-2) var(--sp-3); }
/* A task below the publish floor has no page of its own — it links back into the filtered Index
   instead, and says so by being visibly quieter rather than looking identical and 404-ing. */
.browsecard--thin { border-style: dashed; }
.browsecard--thin .browsecard__t { color: var(--text-dim); }
.hubnote { font-size:var(--fs-base); color: var(--text-faint); max-width: 62ch; margin: 0 0 var(--sp-4); }
/* the rail's escape hatch to the full list */
.crow--more { justify-content:flex-start; color: var(--text-faint); font-family: var(--font-mono);
  font-size:var(--fs-xs); text-decoration:none; margin-top:.2rem; }
.crow--more:hover { color: var(--jade); background: var(--surface); }

/* ---------- display typeface ---------- */
h1, h2,
.hero h1, .hero__rot,
.prose h1, .prose h2, .pull,
.cap-hd h1, .capsec__hd h2,
.phead__h, .section__head h2,
.hubhead h1, .hubh2,
.brand, .plan__price, .plan__name,
.stat .v, .hstat__v, .take__v {
  font-family: var(--font-display);
  letter-spacing: -0.015em;
}

/* ---------- security audit (capability page) ---------- */
/* Every finding is legible to a free reader; only the analysis is behind the unlock. A row that
   hid whether a vulnerability EXISTS would make the product untrustworthy, which is the one thing
   it is selling. */
.sec { border:1px solid var(--hairline); border-radius: var(--radius); overflow:hidden; }
.secrow { display:grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1.1fr); gap: var(--sp-4);
  align-items:center; padding: var(--sp-3) var(--sp-4); border-bottom:1px solid var(--hairline-soft); }
.secrow:last-child { border-bottom:0; }
.secrow--alert { background: color-mix(in srgb, var(--red, #e5484d) 7%, transparent); }
.secrow--warn  { background: var(--surface); }
.secrow__l { font-size: var(--fs-sm); color: var(--text); min-width:0; }
.secrow__v { font-size: var(--fs-micro); color: var(--text-faint); white-space:nowrap; }
.secrow__d { font-size: var(--fs-micro); color: var(--text-faint); text-align:right; min-width:0; }
.secrow__ok { color: var(--text-faint); }
.sev { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing:.04em;
  border-radius:3px; padding:.1em .45em; border:1px solid currentColor; }
.sev--mal  { color:#ff6b6b; background: color-mix(in srgb, #ff6b6b 14%, transparent); font-weight:600; }
.sev--crit { color:#ff8a5b; }
.sev--high { color:#ffb454; }
.sev--mod  { color:#e0c060; }
.sev--low  { color: var(--text-dim); }
.sev--none { color: var(--jade); border-color: var(--jade-line); }
/* The unlock is a link, not a wall: it sits beside a finding the reader can already see. */
.unlock { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--jade);
  border:1px solid var(--jade-line); background: var(--jade-dim); border-radius: var(--radius-pill);
  padding:.14em .6em; text-decoration:none; white-space:nowrap; }
.unlock:hover { background: var(--jade); color:#000; }
@media (max-width: 640px) {
  .secrow { grid-template-columns: 1fr auto; }
  .secrow__d { grid-column: 1 / -1; text-align:left; }
}

/* ---------- taxonomy icons (pipeline/icons.py -> web/assets/icons.svg) ---------- */
/* The sprite is inlined once per page and hidden; every reference is a <use>. Stroke-only and
   currentColor, so one icon serves the rail, a jade chip and a card without needing variants. */
.icon-sprite { position:absolute; width:0; height:0; overflow:hidden; }
.icon { width:1.15em; height:1.15em; flex-shrink:0; vertical-align:-0.15em;
        color: var(--text-dim); transition: color .12s var(--ease); }
.crow .icon { width:1.2em; height:1.2em; margin-right:.55rem; }
.crow:hover .icon, .crow.is-on .icon { color: var(--jade); }
.browsecard .icon { width:1.05em; height:1.05em; margin-right:.1rem; }
.browsecard:hover .icon { color: var(--jade); }
.browserole__h .icon { width:1.15em; height:1.15em; margin-right:.45rem; color: var(--text-dim); }
.hubhead .icon, .cap-hd .icon { width:1em; height:1em; margin-right:.4rem; }
/* the rail row is a flex button; the icon must not squash the label */
.crow__l { display:flex; align-items:center; min-width:0; }

/* ---- the account centre (/account.html) --------------------------------------------------------
   A card with an identity header and definition rows — the shape every account page has had since
   before the web, chosen precisely because it is not a shape we invented. The four rejected
   versions of this page were prose in the .prose container; prose is what you write when the page
   has no state to show, and this one does. */
.acct { max-width: 40rem; padding-block: var(--sp-12) var(--sp-24); }
.acct__card { background: var(--surface); border:1px solid var(--hairline); border-radius: var(--radius); padding: var(--sp-6); }
.acct__card--in { text-align:center; padding: var(--sp-8) var(--sp-6); }
/* a card heading, not a page banner — the display scale here made a 40rem card shout */
.acct__card--in h1 { font-size: var(--fs-xl); letter-spacing:-.01em; }

.acct__id { display:flex; align-items:center; gap: var(--sp-4); padding-bottom: var(--sp-5);
  border-bottom:1px solid var(--hairline); }
.acct__idt { flex:1; min-width:0; }
.acct__em { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acct__st { margin-top:.2rem; }
.acct__out { padding:.45em .9em; font-size:var(--fs-sm); flex:none; }

/* The brand mark, not a photo we do not have and not a letter avatar, which would be one more
   invented thing on a page whose whole problem was invented things. */
.acct__av { flex:none; width:2.5rem; height:2.5rem; border-radius:50%; background: var(--surface-2);
  border:1px solid var(--hairline); background-image: var(--logo); background-size:1.15rem;
  background-repeat:no-repeat; background-position:center; }
.acct__av--lg { display:block; margin:0 auto var(--sp-4); width:3rem; height:3rem; background-size:1.4rem; }

.acct__badge { display:inline-block; font-family: var(--font-mono); font-size:var(--fs-xs);
  letter-spacing:.03em; color: var(--text-dim); border:1px solid var(--hairline);
  border-radius: var(--radius-pill); padding:.1rem .55rem; }
.acct__badge--on { color: var(--jade); border-color: var(--jade-line); background: var(--jade-dim); }

.acct__dl { margin: 0; }
.acct__row { display:grid; grid-template-columns: 9rem 1fr; gap: var(--sp-4); align-items:baseline;
  padding: var(--sp-4) 0; border-bottom:1px solid var(--hairline-soft); }
.acct__row:last-child { border-bottom:0; }
.acct__k { color: var(--text-dim); font-size:var(--fs-sm); }
.acct__v { margin:0; min-width:0; overflow-wrap:anywhere; }
.acct__x { color: var(--text-faint); font-size:var(--fs-xs); margin-left:.35rem; }

.acct__acts { display:flex; flex-wrap:wrap; align-items:center; gap: var(--sp-5); margin-top: var(--sp-6); }
/* cancelling is findable but never dressed as a call to action — a button in the accent colour
   beside 'Billing' would read as the thing we want you to press */
.acct__quiet { color: var(--text-dim); font-size:var(--fs-sm); border-bottom:1px solid transparent; }
.acct__quiet:hover { color: var(--text); border-bottom-color: var(--hairline); }
.acct__wide { display:flex; justify-content:center; width:100%; }
.acct__foot { color: var(--text-faint); font-size:var(--fs-sm); margin-top: var(--sp-5); }
.acct__note { color: var(--text-dim); font-size:var(--fs-sm); margin-top: var(--sp-5); }
.acct__lede { color: var(--text-dim); margin: var(--sp-3) auto var(--sp-6); max-width: 26rem; }
.acct__err { color: var(--red); font-size:var(--fs-sm); margin-bottom: var(--sp-5); }

.acct__way { text-align:left; }
.acct__wayh { font-size:var(--fs-sm); color: var(--text-dim); margin-bottom: var(--sp-3); }
.acct__wayd { font-size:var(--fs-sm); color: var(--text-faint); margin-top: var(--sp-3); text-align:left; }
/* a rule with the word sitting in the gap, rather than a bare "or" floating between two buttons */
.acct__or { display:flex; align-items:center; gap: var(--sp-4); margin: var(--sp-6) 0;
  color: var(--text-faint); font-size:var(--fs-sm); }
.acct__or::before, .acct__or::after { content:""; flex:1; height:1px; background: var(--hairline); }

@media (max-width: 30rem) {
  .acct__row { grid-template-columns: 1fr; gap: .15rem; }
  .acct__acts .btn { flex:1; justify-content:center; }
}

/* The canonical id. It led the dossier's metadata line — one long restatement of the <h1> right
   above it, with the same string a third time in the install command below. Three copies of one
   name across the most valuable screen the page has. It is a machine key, so it sits with the
   other machine affordances now, selectable and quiet. */
.capid { font-family: var(--font-mono); font-size:var(--fs-xs); color: var(--text-faint);
  user-select:all; word-break:break-all; }

/* Paid detail, revealed in place. Deliberately NOT accented: the accent colour is reserved for
   measured data, and "which advisory" is the same measurement the free tier already counted — a
   licence changes how much of it you see, never what it says. */
.paid { color: var(--text); font-size:var(--fs-sm); }
code.paid { font-family: var(--font-mono); font-size:var(--fs-xs); color: var(--jade);
  background: var(--bg); border:1px solid var(--hairline); border-radius:5px; padding:.1rem .4rem;
  overflow-wrap:anywhere; }


/* ── CSP-safe presentation classes ────────────────────────────────────────────────────
   Production sends `Content-Security-Policy: style-src 'self'` (web/_headers), which blocks
   every inline style ATTRIBUTE. pipeline/serve.py sends no such header, so a blocked
   declaration renders perfectly in local preview and is dead on tashan.sh — ~33,000 of them
   were, including every score bar on the board and every hub, which all rendered full.
   CSSOM assignment (el.style.width = x) is NOT blocked; a style="" attribute always is.
   So: declarations live here, and tests/test_site.py fails the build if `style="` returns. */
.fs-xs { font-size: var(--fs-xs); }
.fs-sm { font-size: var(--fs-sm); }
.fs-base { font-size: var(--fs-base); }
.faint { color: var(--text-faint); }
.mt-3 { margin-top: var(--sp-3); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mt-12 { margin-top: var(--sp-12); }
.mb-4 { margin-bottom: var(--sp-4); }
.ml-3 { margin-left: var(--sp-3); }
.ml-4 { margin-left: var(--sp-4); }
.sec-gap { margin: var(--sp-16) 0 var(--sp-12); }
.ta-r { text-align: right; }
.o-50 { opacity: .5; }
.o-55 { opacity: .55; }
.prose--wide { max-width: none; }
.card--link { display: block; text-decoration: none; }
.card__h { margin: 0 0 .4rem; }
.card__desc { margin: 0; color: var(--text-dim); font-size: var(--fs-base); }

/* Score-bar fill. Data-driven, so one rule per whole percent — the alternative is an inline
   style attribute, which CSP kills, or 'unsafe-inline', which trades the policy we publish
   for a bar chart. Scores are integers 0-100, so this set is closed and never grows. */
.bar > i { width: 0; }
.bar[data-w="0"]>i{width:0%}.bar[data-w="1"]>i{width:1%}.bar[data-w="2"]>i{width:2%}.bar[data-w="3"]>i{width:3%}.bar[data-w="4"]>i{width:4%}.bar[data-w="5"]>i{width:5%}.bar[data-w="6"]>i{width:6%}.bar[data-w="7"]>i{width:7%}.bar[data-w="8"]>i{width:8%}.bar[data-w="9"]>i{width:9%}
.bar[data-w="10"]>i{width:10%}.bar[data-w="11"]>i{width:11%}.bar[data-w="12"]>i{width:12%}.bar[data-w="13"]>i{width:13%}.bar[data-w="14"]>i{width:14%}.bar[data-w="15"]>i{width:15%}.bar[data-w="16"]>i{width:16%}.bar[data-w="17"]>i{width:17%}.bar[data-w="18"]>i{width:18%}.bar[data-w="19"]>i{width:19%}
.bar[data-w="20"]>i{width:20%}.bar[data-w="21"]>i{width:21%}.bar[data-w="22"]>i{width:22%}.bar[data-w="23"]>i{width:23%}.bar[data-w="24"]>i{width:24%}.bar[data-w="25"]>i{width:25%}.bar[data-w="26"]>i{width:26%}.bar[data-w="27"]>i{width:27%}.bar[data-w="28"]>i{width:28%}.bar[data-w="29"]>i{width:29%}
.bar[data-w="30"]>i{width:30%}.bar[data-w="31"]>i{width:31%}.bar[data-w="32"]>i{width:32%}.bar[data-w="33"]>i{width:33%}.bar[data-w="34"]>i{width:34%}.bar[data-w="35"]>i{width:35%}.bar[data-w="36"]>i{width:36%}.bar[data-w="37"]>i{width:37%}.bar[data-w="38"]>i{width:38%}.bar[data-w="39"]>i{width:39%}
.bar[data-w="40"]>i{width:40%}.bar[data-w="41"]>i{width:41%}.bar[data-w="42"]>i{width:42%}.bar[data-w="43"]>i{width:43%}.bar[data-w="44"]>i{width:44%}.bar[data-w="45"]>i{width:45%}.bar[data-w="46"]>i{width:46%}.bar[data-w="47"]>i{width:47%}.bar[data-w="48"]>i{width:48%}.bar[data-w="49"]>i{width:49%}
.bar[data-w="50"]>i{width:50%}.bar[data-w="51"]>i{width:51%}.bar[data-w="52"]>i{width:52%}.bar[data-w="53"]>i{width:53%}.bar[data-w="54"]>i{width:54%}.bar[data-w="55"]>i{width:55%}.bar[data-w="56"]>i{width:56%}.bar[data-w="57"]>i{width:57%}.bar[data-w="58"]>i{width:58%}.bar[data-w="59"]>i{width:59%}
.bar[data-w="60"]>i{width:60%}.bar[data-w="61"]>i{width:61%}.bar[data-w="62"]>i{width:62%}.bar[data-w="63"]>i{width:63%}.bar[data-w="64"]>i{width:64%}.bar[data-w="65"]>i{width:65%}.bar[data-w="66"]>i{width:66%}.bar[data-w="67"]>i{width:67%}.bar[data-w="68"]>i{width:68%}.bar[data-w="69"]>i{width:69%}
.bar[data-w="70"]>i{width:70%}.bar[data-w="71"]>i{width:71%}.bar[data-w="72"]>i{width:72%}.bar[data-w="73"]>i{width:73%}.bar[data-w="74"]>i{width:74%}.bar[data-w="75"]>i{width:75%}.bar[data-w="76"]>i{width:76%}.bar[data-w="77"]>i{width:77%}.bar[data-w="78"]>i{width:78%}.bar[data-w="79"]>i{width:79%}
.bar[data-w="80"]>i{width:80%}.bar[data-w="81"]>i{width:81%}.bar[data-w="82"]>i{width:82%}.bar[data-w="83"]>i{width:83%}.bar[data-w="84"]>i{width:84%}.bar[data-w="85"]>i{width:85%}.bar[data-w="86"]>i{width:86%}.bar[data-w="87"]>i{width:87%}.bar[data-w="88"]>i{width:88%}.bar[data-w="89"]>i{width:89%}
.bar[data-w="90"]>i{width:90%}.bar[data-w="91"]>i{width:91%}.bar[data-w="92"]>i{width:92%}.bar[data-w="93"]>i{width:93%}.bar[data-w="94"]>i{width:94%}.bar[data-w="95"]>i{width:95%}.bar[data-w="96"]>i{width:96%}.bar[data-w="97"]>i{width:97%}.bar[data-w="98"]>i{width:98%}.bar[data-w="99"]>i{width:99%}
.bar[data-w="100"]>i{width:100%}