/* Generated by site/build-site.mjs from brand/brand.dazzle.json — do not edit. */
:root{
  /* brand, sampled out of the mark */
  --ink:#000000; --paper:#F0F0F0; --accent:#DC6E6E; --bone:#F0DCBE;
  --ground:#0b0e14; --raised:#12161f; --hairline:#1f2530; --muted:#8b95a6;

  /* the page, light */
  --bg:#ffffff; --bg-alt:#F0F0F0; --fg:#000000; --fg-2:#4a4f57; --fg-3:#767b84;
  --rule:#e3e3e3; --rule-strong:#c9c9c9;

  --ui:-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono:"Hack Nerd Font Mono", "SF Mono", Menlo, monospace;

  --gutter:24px; --max:1120px;

  /* The mono mark's ground is #FEFEFE, not #FFFFFF, so multiplying it onto a
     white page leaves a one-level square around the zebra — measured on a
     capture, not guessed. contrast(1.04) pivots at 128, so 254 clamps to 255
     and the ground disappears while the black strokes stay black. */
  --stencil:contrast(1.04);
  --stencil-inv:contrast(1.04) invert(1);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0e14; --bg-alt:#12161f; --fg:#F0F0F0; --fg-2:#aab2bf; --fg-3:#8b95a6;
    --rule:#1f2530; --rule-strong:#2b3342;
  }
}

*,*::before,*::after{box-sizing:border-box}
/* The UA sheet gives [hidden] display:none at the lowest possible specificity,
   so ANY display rule beats it. .iform is display:flex, which meant the form
   stayed on screen under the success line after a successful submit. Caught in
   the browser, not in review. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--ui); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.mono{font-family:var(--mono)}

/* --- the stripe rule ------------------------------------------------------
   The mark's own texture, spent as a section rule and nowhere else. One
   gradient with an irregular four-stop period — two bar widths, two gap
   widths — because an even repeat reads as a dashed border and two crossed
   gradients read as a barcode; both were built and looked at first. It also
   has to be TALL enough for the slant to show — at 10px a 103° bar is a dash,
   which is the third thing that was built and looked at. Twenty-two pixels
   tall: a rule you can see is a stripe, and still never a ground. */
.stripes{
  height:22px;border:0;margin:0;
  background:repeating-linear-gradient(100deg,
    var(--fg) 0 19px, transparent 19px 33px,
    var(--fg) 33px 44px, transparent 44px 62px);
}
@media (max-width:640px){
  /* Narrower bars on a phone: the same pitch across a 393px page shows four
     bars and reads as a pattern nobody can identify. */
  .stripes{
    height:16px;
    background:repeating-linear-gradient(100deg,
      var(--fg) 0 13px, transparent 13px 23px,
      var(--fg) 23px 31px, transparent 31px 44px);
  }
}

/* --- the marbling ---------------------------------------------------------
   The ground, drawn by the inline script from each block's own box. Rule 4.

   z-index:-1 puts the texture behind the block's own content and in front of
   the page's background, so nothing inside a marbled block needs a stacking
   rule of its own. The same line, and the same reason, as .marbled in
   public/index.html.

   currentColor rather than a hard-coded white: the app only ever draws this on
   its own near-black ground, and this page has two. Ink on the light page,
   paper on the dark one, and the script picks the matching peak. */
.marbled{position:relative}
.marbled > svg.marbling{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:-1;pointer-events:none;color:var(--fg);
}
/* The dimmest grey does not sit on the texture, and the reason is a number.
   --fg-3 is 4.25:1 on flat white, already under AA for the 12px mono it is
   used for, and 2.90:1 over the busiest pixel of the marbling (measured on a
   capture of this build, not estimated). Every line that uses it on a marbled
   ground moves up one step to --fg-2, which measures 5.56:1 over that same
   pixel: on these two blocks the small grey text is now MORE legible than it
   was on the flat page, not less. It stays --fg-3 everywhere else, where there
   is nothing behind it. What was wrong here was the colour, not the texture. */
.marbled .eyebrow,.marbled .herometa,.marbled footer.site .fnote,.marbled .fver{color:var(--fg-2)}
.fver{color:var(--fg-3)}

/* The top block starts at y=0, so its bands would otherwise arrive at full
   strength in the first pixel of the page, with the lockup sitting on them.
   96px of fade is a little more than the masthead is tall: the mark and the
   nav read off clean ground, and the texture arrives as the hero does. The
   bands run off every other edge; this one they fade through. The footer needs
   no such thing, because its top edge is a hairline the page already draws on
   purpose. */
.marbled.top > svg.marbling{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 96px);
          mask-image:linear-gradient(to bottom,transparent 0,#000 96px);
}

/* --- header --- */
header.site{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 0 18px;
}
/* --- the lockup -----------------------------------------------------------
   The FULL COLOUR icon, at 38px.

   It used to be the mono stencil at 26px, and the note here used to argue that
   the rendered zebra is a smudge at that size. That was true and it was the
   wrong conclusion: 26px was the smudge, not the artwork. 2026-09-09, Cédric:
   "Let's use the more high-fidelity logo in the top left as well." So the size
   was measured instead of assumed. Rendered at 2x and inspected at each step:
   at 26 the muzzle, mouth and mane are one dark mass; at 30 the mouth is a
   pink smear with no teeth in it; at 34 the teeth separate from the tongue and
   the mane resolves into strands; at 38 the ear, the teeth and the two mane
   tufts all read without leaning in. 38 is the first size that is comfortably
   past the threshold rather than sitting on it, so 38 is what ships.

   The icon has no alpha and no baked corners (brand/README.md: the OS masks
   it), so the page masks it the way the kit page does, at the same 22%. No
   filter and no blend mode: those existed to composite the stencil's #FEFEFE
   ground away, and there is no ground to remove here. --stencil is still used
   by the kit page, so it stays in :root. */
.brandlink{display:flex;align-items:center;gap:11px;text-decoration:none}
.brandlink img{width:38px;height:38px;border-radius:22%}
.wordmark{font-weight:600;letter-spacing:-.015em;font-size:19px}
nav.site{display:flex;gap:20px;font-family:var(--mono);font-size:13px}
nav.site a{color:var(--fg-3);text-decoration:none}
nav.site a:hover{color:var(--fg)}

/* --- section furniture --- */
section{padding:clamp(56px,8vw,104px) 0}
.label{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-3);margin:0 0 20px;
}
h2{
  font-size:clamp(1.55rem,3.2vw,2.15rem);line-height:1.15;letter-spacing:-.025em;
  font-weight:600;margin:0 0 14px;max-width:22ch;
}
.sectionlede{color:var(--fg-2);max-width:58ch;margin:0 0 40px;font-size:1.02rem}

/* --- hero --- */
.hero{padding-top:clamp(28px,5vw,56px);padding-bottom:clamp(40px,6vw,72px)}
.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--fg-3);
  margin:0 0 22px;
}
h1{
  font-size:clamp(2.5rem,7.4vw,4.6rem);line-height:1.0;letter-spacing:-.042em;
  font-weight:600;margin:0 0 26px;max-width:14ch;
}
.lede{font-size:clamp(1.05rem,1.6vw,1.22rem);line-height:1.5;color:var(--fg-2);max-width:52ch;margin:0 0 30px}
.herometa{
  display:flex;flex-wrap:wrap;gap:8px 18px;font-family:var(--mono);font-size:12px;color:var(--fg-3);
  margin:0 0 40px;padding:0;list-style:none;
}
.herometa li{display:flex;align-items:center;gap:8px}
.herometa li::before{content:"";width:4px;height:4px;background:var(--rule-strong);border-radius:50%}
.cta{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  border:1px solid var(--rule-strong);border-radius:8px;padding:10px 16px;
  font-size:15px;font-weight:500;transition:border-color .18s,color .18s;
}
.cta:hover{border-color:var(--accent);color:var(--accent)}
.cta .arrow{color:var(--accent)}
.herogrid{display:grid;grid-template-columns:1fr;gap:clamp(40px,5vw,64px);align-items:center}
/* A grid item's default min-width is auto, which is its MIN-CONTENT, and the
   feed mock's machine strip has fixed-width columns in it. On a 360px phone
   that made the hero column 340px wide inside a 312px page: four pixels of
   horizontal scroll, hidden by body{overflow-x:hidden} and reachable only by
   scrolling the document with script, which is how it survived. Pre-existing,
   found while measuring this section, fixed here because it is one line. */
.herogrid > *{min-width:0}
@media (min-width:900px){ .herogrid{grid-template-columns:minmax(0,1fr) 380px} }

/* --- the phone mock --- */
.phone{
  width:100%;max-width:340px;margin:0 auto;
  background:var(--ground);border:1px solid #303948;border-radius:34px;padding:10px;
  box-shadow:0 30px 70px -42px rgba(0,0,0,.5);
}
.phone-screen{
  background:var(--ground);border-radius:26px;overflow:hidden;
  font-size:12px;line-height:1.35;color:#F0F0F0;
  padding:10px 10px 14px;
}
.pbar{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 10px}
.pw{font-weight:600;font-size:14px;letter-spacing:-.01em}
.pchip{
  font-family:var(--mono);font-size:10px;color:#8b95a6;
  border:1px solid #1f2530;border-radius:5px;padding:2px 6px;
}
.mstrip{border-top:1px solid #1f2530;border-bottom:1px solid #1f2530;padding:7px 2px;margin-bottom:10px}
.mrow{display:flex;align-items:center;gap:8px;font-size:11px;padding:2px 0;color:#8b95a6}
.mrow .mname{color:#F0F0F0;min-width:64px}
.mrow .mos{min-width:52px}
.mrow.warn .mdet{color:#ff9f0a}
.mk{width:8px;height:8px;flex:none;display:inline-block}
.mk-ring{border:1.5px solid #8b93a7;border-radius:50%}
.mk-dot{border-radius:50%}
.mk-dot.working{background:#30d158}
.mk-dot.quiet{background:#8b93a7}
.mk-ring.stale{border-color:#5a6270}
.mk-tri{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:9px solid #ff9f0a}
.mrow .mk-tri{border-bottom-color:#ff9f0a}
.ftier{
  font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;
  color:#5a6270;margin:12px 2px 6px;
}
/* NOT .ftier:first-of-type — that means "first sibling of type div", and the
   first div in here is .pbar, so the rule matched nothing and the top tier
   label kept a margin it was supposed to lose. */
.mstrip + .ftier{margin-top:0}
.fcard{
  border:1px solid color-mix(in srgb, var(--sa) 55%, transparent);
  background:color-mix(in srgb, var(--sa) 7%, #12161f);
  border-radius:9px;padding:8px 9px;margin-bottom:7px;
}
.fcard.stale,.fcard.quiet{opacity:.72}
.fhead{display:flex;align-items:center;gap:7px}
.fname{font-weight:600;font-size:12px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fage{font-family:var(--mono);font-size:10px;color:#8b95a6}
.fmeta{font-family:var(--mono);font-size:9.5px;color:#8b95a6;margin:2px 0 5px;padding-left:15px}
/* The output lines are whatever the program printed. The app renders the
   pane's own SGR colours here and tints nothing itself, so neither does this. */
.fline{
  font-family:var(--mono);font-size:10px;color:#c3cad6;padding-left:15px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* --- the six features -----------------------------------------------------
   Alternating full-width rows: the picture on one side, the sentence on the
   other, sides swapping every row. This was a three-up grid of phone frames at
   284px, and it was the wrong shape for the content: three columns is what
   made each shot small, and every one of these shots is a screen of terminal
   text. One row per feature buys the picture the whole width of a column
   instead of a third of one.

   Two frames, because there are two kinds of picture (see shotView above):

     .shot.device   the whole phone, in a phone. 460px, which is as wide as a
                    2556px-tall portrait can be before the row is taller than a
                    laptop screen. Only the feed uses it, because the feed is
                    the one feature whose subject IS the whole screen.
     .shot.crop     a cut from the same full-resolution PNG, at the full width
                    of the column and its own aspect ratio. No bezel: a crop is
                    a detail, not a device, and drawing a phone around half a
                    phone is a lie about what you are looking at.

   Both reserve their space with aspect-ratio, so a slot with no PNG in it yet
   still occupies exactly the rectangle the real one will. */
.features{display:grid;grid-template-columns:1fr;gap:clamp(52px,7vw,88px);margin:0}
.feat{display:grid;grid-template-columns:1fr;gap:24px;align-items:center;min-width:0}
/* 1000px, and the number was measured rather than picked. Below it the row is
   one column and the picture gets the whole page, which is the bigger picture,
   so the two-column layout has to earn the swap: at 1000 the media column is
   525px, still comfortably past the 460px the old three-up grid could never
   reach. Splitting at 860 put it at 442px, which was SMALLER than the
   single-column row it replaced at 859. A breakpoint that makes the thing it
   is fixing worse is the wrong breakpoint. */
@media (min-width:1000px){
  /* 1.35fr / 1fr on 1120 with a 72px gap is a 602px picture beside a 446px
     column of text. The picture leads; the paragraph is a caption with room. */
  .feat{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(38px,5vw,72px)}
  /* nth-child, not a class, so the alternation cannot drift out of step with
     the array when a feature is added or moved. Explicit grid-column on BOTH
     children rather than the order property: order would swap which COLUMN
     each child lands in, and the columns are different widths, so the picture
     would come back at 446px on every second row. */
  .feat:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
  .feat:nth-child(even) .feat-media{grid-column:2;grid-row:1}
  .feat:nth-child(even) .feat-copy{grid-column:1;grid-row:1}
}
.feat-media{min-width:0}
.feat-copy{min-width:0}
.shot{
  width:100%;margin:0 auto;
  background:var(--ground);border:1px solid #303948;
  box-shadow:0 24px 56px -40px rgba(0,0,0,.5);
}
.shot.device{max-width:460px;border-radius:34px;padding:8px}
.shot.device > img,.shot.device > .ph{border-radius:27px}
.shot.crop{border-radius:14px;padding:0;overflow:hidden}
/* A crop that is taller than it is wide is still a column of phone screen, so
   it gets the portrait cap rather than the full 602px, or one feature would be
   a metre tall on its own. */
.shot.crop.tall{max-width:500px}
.shot > img,.shot > .ph{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:top center;
}
/* The placeholder is deliberately flat and quiet: it is a reserved rectangle,
   not a decoration, and anything drawn in it would have to be undrawn later. */
.shot > .ph{
  background:var(--raised);
  display:flex;align-items:flex-end;justify-content:center;padding:0 0 22px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:#5a6270;   /* the same dimmest-label grey the mock's tier labels use */
}
/* On a phone the gutter is 24px on each side of a 393px screen, which is 12%
   of the only axis these pictures are short of. A crop takes it back: it runs
   edge to edge and squares off, because a rounded card floating in a gutter is
   worth less here than the pixels. The device keeps its gutter and its bezel,
   since a phone drawn to the edge of a phone reads as a rendering bug. */
@media (max-width:679px){
  .shot.crop{
    margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);
    width:auto;max-width:none;border-radius:0;border-left:0;border-right:0;
  }
}
.feat .k{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg-3);display:block;margin-bottom:10px;
}
.feat h3{font-size:clamp(1.18rem,2vw,1.42rem);font-weight:600;letter-spacing:-.02em;margin:0 0 10px;line-height:1.2}
.feat p{margin:0;color:var(--fg-2);font-size:1rem;line-height:1.55;max-width:46ch}

/* --- the interest form --- */
.interest{max-width:540px}
.iform{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.iform input[type=email]{
  flex:1 1 240px;min-width:0;font:inherit;font-size:16px;
  padding:11px 14px;border:1px solid var(--rule-strong);border-radius:8px;
  background:var(--bg);color:var(--fg);
}
.iform input[type=email]::placeholder{color:var(--fg-3)}
.iform button{
  font:inherit;font-size:15px;font-weight:500;padding:11px 22px;cursor:pointer;
  border:1px solid var(--fg);border-radius:8px;background:var(--fg);color:var(--bg);
  transition:opacity .18s;
}
.iform button:hover{opacity:.85}
.iform button[disabled]{opacity:.45;cursor:default}
/* The honeypot, and the visually-hidden label, share their geometry.
   Off-screen rather than display:none, because a bot that reads the
   stylesheet skips display:none and fills this one anyway. */
.hp,.vh{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.istatus{margin:0;font-size:.95rem;min-height:1.5em;color:var(--fg-2)}
/* NOT the accent for the error. The kit gives the accent one job (the
   needs-you signal and destructive confirms) and a failed form submission is
   neither. Weight, not colour — brand/README.md, "No second accent". */
.istatus.err{color:var(--fg);font-weight:600}
.inote{margin:10px 0 0;font-size:.88rem;color:var(--fg-3)}

/* --- footer --- */
footer.site{border-top:1px solid var(--rule);padding:36px 0 56px}
footer.site .fnote{color:var(--fg-3);font-size:.92rem;max-width:56ch;margin:0 0 18px}
footer.site .flinks{display:flex;flex-wrap:wrap;gap:18px;font-family:var(--mono);font-size:12.5px}
footer.site a{color:var(--fg-3);text-decoration:none}
footer.site a:hover{color:var(--accent)}

/* ======================= brand kit page ======================= */
.kitintro{max-width:60ch}
.kitintro p{color:var(--fg-2)}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:18px;margin:0}
.sw{border:1px solid var(--rule);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.sw .chip{height:92px;border-bottom:1px solid var(--rule)}
.sw .body{padding:13px 14px 15px}
.sw .nm{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px}
.sw .nm b{font-size:.98rem;font-weight:600}
.sw .nm code{font-family:var(--mono);font-size:11.5px;color:var(--fg-3)}
.sw .role{font-size:.87rem;color:var(--fg-2);margin:0 0 9px;line-height:1.45}
.sw .tag{
  font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  border:1px solid var(--rule);border-radius:4px;padding:2px 6px;color:var(--fg-3);
}
/* NOT the accent. The accent means "look here, you are about to destroy
   something", and a page that spends it on a metadata pill while explaining
   that rule two sections later is not following its own kit. */
.sw .tag.yes{border-color:var(--fg);color:var(--fg)}
table.kit{width:100%;border-collapse:collapse;font-size:.93rem}
table.kit th,table.kit td{text-align:left;padding:11px 14px 11px 0;border-bottom:1px solid var(--rule);vertical-align:top}
table.kit th{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-3);font-weight:400;
}
table.kit td.num{font-family:var(--mono);white-space:nowrap}
table.kit td .ok{color:var(--fg-2)}
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rules{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--rule);margin:0;padding:0;list-style:none}
@media (min-width:760px){ .rules{grid-template-columns:1fr 1fr} }
.rules li{padding:20px 0;border-bottom:1px solid var(--rule)}
@media (min-width:760px){
  .rules li{padding:22px 28px 24px;border-right:1px solid var(--rule)}
  .rules li:nth-child(2n){border-right:0;padding-right:0}
  .rules li:nth-child(2n+1){padding-left:0}
}
.rules b{display:block;font-size:.99rem;margin-bottom:6px}
.rules span{color:var(--fg-2);font-size:.93rem}
/* --- the answer page ------------------------------------------------------
   The one prose surface on either origin, and it is deliberately narrow: 66ch
   is about eleven words a line, which is the measure the rest of this site
   already sets its ledes at, one step wider because there is more of it. No
   marbling here and no phone mock: the texture goes where the mark is allowed
   to stand, and a page of paragraphs is the site's pane, not its empty state. */
.prose{max-width:66ch}
.prose h2{font-size:clamp(1.3rem,2.4vw,1.6rem);margin:44px 0 12px;max-width:30ch}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--fg-2);margin:0 0 14px}
.prose ul{color:var(--fg-2);margin:0 0 14px;padding-left:20px}
.prose li{margin:0 0 8px}
.prose code{font-family:var(--mono);font-size:.88em;color:var(--fg)}
.prose b{color:var(--fg);font-weight:600}
.prose a{color:var(--fg);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule-strong)}
.prose a:hover{text-decoration-color:var(--fg)}
.prose blockquote{
  margin:0 0 16px;padding:2px 0 2px 16px;border-left:2px solid var(--rule-strong);
  color:var(--fg-2);font-style:normal;
}
.band{background:var(--bg-alt)}
.marks{display:grid;grid-template-columns:1fr;gap:22px}
@media (min-width:700px){ .marks{grid-template-columns:1fr 1fr} }
.markcard{border:1px solid var(--rule);border-radius:12px;overflow:hidden}
.markcard .art{display:flex;align-items:center;justify-content:center;padding:34px;background:var(--bg-alt)}
/* NOT .markcard.mono (no backticks in here, this is a template literal):
   .mono is the monospace utility class on this page, so naming the card that
   silently set its whole body in the terminal face.
   The mono mark has no alpha, so a kit that shows it once shows it on ONE
   ground and looks broken on the other. Show it on both, and composite it:
   multiply drops the white on paper, invert+screen drops the black on ink. */
.markcard.stencil .art.split{padding:0;background:none}
.markcard.stencil .half{flex:1;display:flex;align-items:center;justify-content:center;padding:30px 10px}
.markcard.stencil .half.on-paper{background:#F0F0F0}
.markcard.stencil .half.on-ink{background:#000000}
.markcard.stencil .half.on-paper img{filter:var(--stencil);mix-blend-mode:multiply}
.markcard.stencil .half.on-ink img{filter:var(--stencil-inv);mix-blend-mode:screen}
.markcard .art img{width:150px;height:150px;border-radius:0}
.markcard.icon .art img{border-radius:22%}
.markcard .meta{padding:16px 18px 18px;border-top:1px solid var(--rule)}
.markcard .meta b{display:block;margin-bottom:6px}
.markcard .meta p{margin:0 0 10px;color:var(--fg-2);font-size:.92rem}
.markcard .meta a{font-family:var(--mono);font-size:11.5px;color:var(--fg-3);text-decoration:none;margin-right:14px}
.markcard .meta a:hover{color:var(--accent)}
.hues{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0;list-style:none}
.hues li{
  display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;color:var(--fg-3);
  border:1px solid var(--rule);border-radius:6px;padding:4px 8px 4px 6px;
}
.hues i{width:11px;height:11px;border-radius:3px;display:block}
.typespec{border-top:1px solid var(--rule)}
.typespec > div{padding:24px 0;border-bottom:1px solid var(--rule)}
.typespec .sample{font-size:1.5rem;margin:0 0 10px;letter-spacing:-.015em}
.typespec .sample.m{font-family:var(--mono);font-size:1.15rem;letter-spacing:0}
.typespec code{font-family:var(--mono);font-size:11.5px;color:var(--fg-3);word-break:break-word}
.callout{
  border:1px solid var(--rule);border-left:3px solid var(--accent);border-radius:0 10px 10px 0;
  padding:18px 20px;margin:0 0 30px;background:var(--bg-alt);
}
.callout b{display:block;margin-bottom:6px}
.callout p{margin:0;color:var(--fg-2);font-size:.95rem}
.callout p + p{margin-top:10px}
.unlisted{
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--fg-3);border:1px solid var(--rule);border-radius:5px;padding:3px 8px;
}

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