@font-face {
  font-family:"Geist label";
  src:url("media/labels/geist.woff2") format("woff2");
  font-weight:100 900;
  font-display:swap
}

@font-face {
  font-family:"Inter label";
  src:url("media/labels/inter.woff2") format("woff2");
  font-weight:100 900;
  font-display:swap
}

@font-face {
  font-family:"Medeo Sans";
  src:url("fonts/MedeoSansVariable.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:block
}

@font-face {
  font-family:"Medeo Sans";
  src:url("fonts/MedeoSansVariable-Italic.woff2") format("woff2");
  font-weight:100 900;
  font-style:italic;
  font-display:block
}

@font-face {
  font-family:"Medeo Mono";
  src:url("fonts/MedeoMonoVariable.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap
}

@font-face {
  font-family:"Medeo Mono";
  src:url("fonts/MedeoMonoVariable-Italic.woff2") format("woff2");
  font-weight:100 900;
  font-style:italic;
  font-display:swap
}

@font-face {
  font-family:"Medeo Pixel";
  /* WebKit (Safari, the Instagram browser on iPhone) refuses this WOFF: the pixel font packs 50 times over and
     WebKit will not unpack it. It falls through to the release TTF, which the server compresses on the wire. */
  src:url("fonts/MedeoPixelVariable.woff") format("woff"),url("fonts/MedeoPixel-Variable.ttf") format("truetype");
  font-weight:400;
  font-display:swap
}

:root {
  --bg:#0a0a0a;
  --paper:#111;
  --panel:#161616;
  --ink:#ededed;
  --muted:#8f8f8f;
  --line:#242424;
  --line-strong:#3d3d3d;
  --grid:#161616;
  --accent:#e94a32;
  --band:#a3341f;
  --sheet:#f4f4f0;
  --sheet-ink:#141414;
  --nav-bg:rgba(10,10,10,.82);
  --press:#262626;
  --sel:#3a3a3a;
  --hover:rgba(255,255,255,.03);
  --g-old:#4d4d4d;
  --g-gap:#2c2c2c;
  --g-edge:#7a7a7a;
  --poster:#e9e9e6;
  --frame:1369px;
  --c:114px;
  --pad:48px;
  --sec:96px;
  --face:"Medeo Sans";
  --face-style:normal;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  color-scheme:dark
}

/* Light theme: the same sheet in ink on paper; the dark posters keep their own colours. */
html[data-theme=light] {
  --bg:#fafafa;
  --paper:#fff;
  --panel:#f0f0f0;
  --ink:#171717;
  --muted:#666;
  --line:#e5e5e5;
  --line-strong:#c8c8c8;
  --grid:#efefef;
  --nav-bg:rgba(250,250,250,.85);
  --press:#e6e6e6;
  --sel:#d4d4d4;
  --hover:rgba(0,0,0,.03);
  --g-old:#b3b3b3;
  --g-gap:#d6d6d6;
  --g-edge:#8a8a8a;
  --poster:#ececea;
  color-scheme:light
}

*,*::before,*::after {
  box-sizing:border-box
}

html {
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background:var(--bg)
}

body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 17px/1.55 "Medeo Sans",sans-serif;
  font-kerning:normal;
  -webkit-font-smoothing:antialiased
}

h1,h2,h3,p,dl,dd,figure,ul,ol,pre,blockquote {
  margin:0
}

ul,ol {
  padding:0;
  list-style:none
}

a {
  color:inherit
}

button,input,select {
  font:inherit;
  color:inherit
}

button,a,input,select,summary {
  touch-action:manipulation
}

button {
  cursor:pointer
}

[hidden] {
  display:none!important
}

.sr {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap
}

.mono {
  font-family:"Medeo Mono",monospace
}

.sans {
  font-family:"Medeo Sans",sans-serif;
  font-style:normal
}

.pixel,.f-pixel {
  font-family:"Medeo Pixel",monospace;
  font-synthesis:none;
  font-weight:400
}

.face {
  font-family:var(--face),"Medeo Sans",sans-serif;
  font-style:var(--face-style)
}

.accent {
  color:var(--accent)
}

.nw {
  white-space:nowrap
}

::selection {
  background:var(--sel);
  color:var(--ink)
}

:focus-visible {
  outline:2px solid var(--ink);
  outline-offset:4px
}

h2 {
  font-size:clamp(30px,3.2vw,44px);
  font-weight:300;
  line-height:1.06;
  letter-spacing:-.03em;
  text-wrap:balance
}

b,strong {
  font-weight:500
}

/* No word left alone on a last line: running text, captions, list and table cells, small headings. */
p,figcaption,li,dt,dd,td,th,summary,h3,h4,.kicker,.fam-cap,.iu-cap>span,.lang-c {
  text-wrap:pretty
}

/* narrow blocks balance their lines in every engine (WebKit has balance, not pretty) */
.fam-cap,.stats-lead,.ts-lead,.comment-text {
  text-wrap:balance
}

.sets-list label>span {
  text-wrap:balance
}

code {
  font-family:"Medeo Mono",monospace
}

/* The sheet: every section is a run of square cells. The column lines come from the cell size app.js
   sets (--c), so they fall on whole pixels; a small cross marks each corner where sections meet. */
.wrap {
  width:var(--frame);
  margin-inline:auto
}

.frame {
  position:relative;
  border:1px solid var(--line);
  border-bottom:0;
  background-image:linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:var(--c) 100%;
  background-position:-1px 0
}

.frame::before,.frame::after {
  content:"";
  position:absolute;
  top:-6px;
  width:11px;
  height:11px;
  z-index:4;
  pointer-events:none;
  background:linear-gradient(var(--line-strong),var(--line-strong)) center/1px 100% no-repeat,linear-gradient(var(--line-strong),var(--line-strong)) center/100% 1px no-repeat
}

.frame::before {
  left:-6px
}

.frame::after {
  right:-6px
}

.kicker {
  font:400 12px/1.4 "Medeo Mono",monospace;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted)
}

/* Intro: once per browser session the page opens on a letter whose code converges, four corner marks
   step into the cover's lattice, and the red square flies onto the period of «Medeo.». */
body.is-loading {
  overflow:hidden
}

.loader {
  position:fixed;
  inset:0;
  z-index:100;
  background:var(--bg);
  overflow:hidden
}

.loader-field {
  position:absolute;
  inset:0
}

.loader-field i {
  position:absolute;
  width:15px;
  height:15px;
  opacity:0
}

.loader-field b,.lp b {
  position:absolute;
  background:var(--ink)
}

.loader-field b.v {
  left:7px;
  top:0;
  width:1px;
  height:15px
}

.loader-field b.h {
  top:7px;
  left:0;
  height:1px;
  width:15px
}

.loader-stage {
  position:absolute;
  inset:0;
  pointer-events:none
}

.lp {
  position:absolute;
  left:0;
  top:0;
  width:19px;
  height:19px;
  margin:-9px 0 0 -9px
}

.lp b.v {
  left:9px;
  top:0;
  width:1px;
  height:19px
}

.lp b.h {
  top:9px;
  left:0;
  height:1px;
  width:19px
}

.loader-glyph {
  position:absolute;
  left:0;
  top:0;
  font-size:min(30vmin,270px);
  line-height:1;
  font-weight:300;
  transform-origin:center
}

.loader-skip,.loader-code {
  position:absolute;
  left:0;
  right:0;
  margin:0;
  text-align:center;
  font-size:12px;
  letter-spacing:.06em;
  color:var(--muted)
}

.loader-skip {
  bottom:28px
}

.loader-dot {
  position:fixed;
  left:0;
  top:0;
  width:24px;
  height:24px;
  z-index:101;
  pointer-events:none
}

.loader-dot i {
  position:absolute;
  inset:0;
  background:var(--accent);
  transform:scale(0);
  transform-origin:center
}

.intro-seen .loader-stage,.intro-seen .loader-code,.intro-seen .loader-skip,.intro-seen .loader-field,.intro-seen .loader-dot {
  display:none
}

/* Header: the face switch floats in the middle, as a capsule. */
.nav {
  position:sticky;
  top:0;
  z-index:30;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  height:64px;
  padding:0 var(--pad);
  background:var(--nav-bg);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-inline:1px solid var(--line)
}

.brand {
  display:flex;
  align-items:baseline;
  gap:14px
}

.wordmark {
  font-size:22px;
  font-weight:500;
  letter-spacing:-.02em;
  text-decoration:none
}

.by {
  font-size:12px;
  color:var(--muted);
  text-decoration:none
}

.seg {
  position:relative;
  display:flex;
  padding:3px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  background:var(--paper)
}

.seg button {
  position:relative;
  height:32px;
  min-width:68px;
  padding:0 14px;
  border:0;
  border-radius:999px;
  background:none;
  font-size:13px;
  color:var(--muted)
}

.seg .f-mono {
  font-family:"Medeo Mono",monospace
}

.seg-ink {
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  background:var(--ink);
  color:var(--bg);
  clip-path:inset(3px calc(100% - var(--tx,0px) - var(--tw,0px)) 3px var(--tx,0px) round 999px);
  transition:clip-path .28s var(--ease)
}

.seg:not(.ready) .seg-ink {
  transition:none
}

.seg-ink span {
  position:absolute;
  top:3px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px
}

/* Page language: three short codes beside Install, the current one in ink. */
.nav-end {
  justify-self:end;
  display:flex;
  align-items:center;
  gap:14px
}

.page-lang {
  display:flex;
  gap:2px;
  font-size:12px
}

.page-lang button {
  min-width:32px;
  height:32px;
  padding:0 6px;
  border:0;
  border-radius:999px;
  background:none;
  font:inherit;
  letter-spacing:.04em;
  color:var(--muted)
}

.page-lang button:hover {
  color:var(--ink)
}

.page-lang button[aria-pressed=true] {
  color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line-strong)
}

.pill {
  justify-self:end;
  display:inline-flex;
  gap:10px;
  align-items:center;
  min-height:36px;
  padding:0 16px;
  background:var(--ink);
  color:var(--bg);
  text-decoration:none;
  font-size:14px;
  font-weight:500;
  border:1px solid var(--ink);
  border-radius:999px
}

.pill:hover {
  opacity:.86
}

.pill svg {
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.4
}

.pill.ghost {
  background:transparent;
  color:var(--ink);
  border-color:var(--line-strong)
}

.pill.ghost:hover {
  background:var(--panel)
}

/* Cover: square cells, as on vercel.com/font. app.js sizes the word so its cap height spans two cells and its
   baseline sits on a cell line, then draws the metric lines; the last row holds a dithered range. */
.hero {
  --hero-pad:48px;
  height:calc(var(--c) * 7);
  overflow:hidden;
  background-image:linear-gradient(90deg,var(--grid) 1px,transparent 1px),linear-gradient(180deg,var(--grid) 1px,transparent 1px);
  background-size:var(--c) var(--c);
  background-position:-1px -1px
}

.hguides {
  position:absolute;
  inset:0;
  pointer-events:none
}

.hguide {
  position:absolute;
  left:0;
  right:0;
  top:var(--y);
  border-top:1px dashed var(--line-strong)
}

.hguide b {
  position:absolute;
  right:var(--hero-pad);
  top:-9px;
  min-width:40px;
  padding:1px 6px;
  font:400 12px/16px "Medeo Mono",monospace;
  text-align:center;
  background:var(--ink);
  color:var(--bg)
}

.chip {
  position:absolute;
  left:var(--hero-pad);
  top:calc(var(--c) + 14px);
  display:flex;
  align-items:center;
  gap:12px;
  font-size:13px;
  color:var(--muted)
}

.chip-tag {
  padding:2px 9px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  color:var(--ink)
}

.mark {
  position:absolute;
  left:var(--hero-pad);
  top:0;
  margin-left:-.045em;
  font-size:var(--mark-size,240px);
  font-weight:300;
  line-height:1;
  white-space:nowrap
}

/* The large «Medeo» at weight 300: kerning off and each gap set by hand, so M–e, e–d, d–e and e–o all
   measure .055 em (HarfBuzz, wght 300, opsz 32). The values hold for Medeo Sans; Mono and Pixel keep a plain
   tracking. */
.wm {
  font-kerning:none;
  letter-spacing:0
}

.wm b {
  font-weight:inherit
}

.wm b:nth-child(1) {
  letter-spacing:-.055em
}

.wm b:nth-child(2) {
  letter-spacing:-.001em
}

.wm b:nth-child(3) {
  letter-spacing:-.038em
}

.wm b:nth-child(4) {
  letter-spacing:-.006em
}

.wm b:nth-child(5) {
  letter-spacing:-.02em
}

html[data-face=mono] .face .wm b {
  letter-spacing:-.03em
}

html[data-face=pixel] .face .wm b {
  letter-spacing:-.01em
}

canvas.art {
  display:block;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  pointer-events:none
}

.hero-art {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:calc(var(--c) * 2 - 1px);
  -webkit-mask:linear-gradient(transparent,#000 12%);
  mask:linear-gradient(transparent,#000 12%)
}

/* What the family is, in one line, on the left third beside its numbers. */
.stats-lead {
  padding:5px var(--pad) 0;
  max-width:22ch;
  font-size:clamp(20px,2vw,28px);
  line-height:1.25;
  letter-spacing:-.02em
}

/* Numbers as rows, the way a spec sheet reads; the values follow the face switch. */
.stats {
  display:grid;
  grid-template-columns:1fr 2fr;
  padding:var(--sec) 0
}

.stats-list {
  grid-column:2;
  display:grid;
  gap:4px;
  padding:0 var(--pad)
}

.stat {
  display:grid;
  grid-template-columns:32px 1fr auto;
  align-items:center;
  gap:16px;
  padding:5px 0
}

.stat svg {
  width:20px;
  height:20px;
  fill:none;
  stroke:var(--ink);
  stroke-width:1.3
}

.stat dt {
  font-size:clamp(20px,2vw,28px);
  line-height:1.25;
  letter-spacing:-.02em
}

.stat dd {
  font-size:clamp(20px,2vw,28px);
  line-height:1.25;
  letter-spacing:-.02em;
  text-align:right;
  white-space:nowrap;
  font-variant-numeric:tabular-nums
}

/* The idea of the face, shown by a measurement: the same pair at two optical sizes, the gap between the
   inks marked from the font's own units (n: advance, left and right ink edge, wght 400). */
.idea {
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:calc(var(--pad) * 2);
  align-items:center;
  padding:var(--sec) var(--pad)
}

.idea-copy h2 {
  max-width:18ch;
  text-wrap:balance
}

.idea-copy p {
  margin-top:18px;
  max-width:40ch;
  font-size:17px;
  line-height:1.6;
  color:var(--muted)
}

.nn {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 24px
}

.nn-cell {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px
}

.nn-pair {
  position:relative;
  font:400 clamp(96px,11vw,170px)/1 "Medeo Sans",sans-serif;
  font-optical-sizing:none;
  font-variation-settings:"wght" 400,"opsz" var(--o);
  letter-spacing:0
}

.nn-gap {
  position:absolute;
  top:30%;
  bottom:16%;
  left:calc(var(--xmax) * .001em);
  width:calc((var(--adv) - var(--xmax) + var(--xmin)) * .001em);
  border-inline:1px solid var(--muted);
  background:var(--hover)
}

.nn-cap {
  font-size:12px;
  line-height:1.6;
  text-align:center;
  text-transform:uppercase;
  color:var(--muted)
}

.nn-cap b {
  font-weight:400;
  color:var(--ink)
}

.nn-note {
  grid-column:1/-1;
  margin-top:8px;
  font-size:12px;
  text-align:center;
  color:var(--muted)
}

.about {
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:calc(var(--pad) * 2);
  padding:var(--sec) var(--pad)
}

.about-col {
  align-self:center;
  font-size:17px;
  line-height:1.55;
  color:var(--muted);
  max-width:40ch
}

.about-col p+p {
  margin-top:12px
}

.about-col b {
  color:var(--ink)
}

.axes {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  overflow:hidden
}

.axes-word {
  font-size:clamp(60px,8vw,120px);
  line-height:1.05;
  letter-spacing:-.03em;
  font-optical-sizing:none;
  font-variation-settings:"wght" var(--aw,300),"opsz" var(--ao,14)
}

.axes-read {
  display:flex;
  gap:20px;
  font-size:12px;
  text-transform:uppercase;
  color:var(--muted)
}

.axes-read b {
  font-weight:400;
  color:var(--ink);
  display:inline-block;
  min-width:3ch
}

/* Three faces, one cell each. */
.family {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr))
}

.family-kicker {
  grid-column:1/-1;
  padding:var(--sec) var(--pad) 24px
}

.fam {
  all:unset;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:20px;
  min-width:0;
  padding:28px var(--pad) 36px;
  cursor:pointer
}

.fam:first-of-type {
  padding-left:var(--pad)
}

.fam+.fam {
  border-left:1px solid var(--line)
}

.fam:hover {
  background:var(--hover)
}

.fam:focus-visible {
  outline:2px solid var(--ink);
  outline-offset:-4px
}

.fam-name {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  font-weight:500
}

.fam[aria-pressed=true] .fam-name::before {
  content:"";
  width:7px;
  height:7px;
  background:var(--ink)
}

.fam-sample {
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:130px;
  font-size:clamp(40px,4.6vw,68px);
  font-weight:300;
  line-height:1;
  letter-spacing:-.03em;
  white-space:nowrap
}

.fam-prices {
  font-size:clamp(30px,3vw,42px);
  line-height:1.12;
  letter-spacing:0;
  font-variant-numeric:tabular-nums
}

.fam-sample.f-pixel-axis {
  font-size:clamp(40px,4.4vw,64px);
  font-weight:400;
  letter-spacing:0;
  font-variation-settings:"ELSH" var(--elsh,0)
}

.fam-cap {
  font-size:15px;
  line-height:1.5;
  max-width:30ch;
  color:var(--muted)
}

.shapes {
  font-size:12px
}

.shapes b {
  font-weight:400
}

.shapes b.on {
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:3px
}

/* Playground */
.playground {
  padding:32px var(--pad) 44px
}

.presets {
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-bottom:20px
}

.presets button {
  border:1px solid transparent;
  border-radius:999px;
  padding:6px 12px;
  min-height:32px;
  background:transparent;
  font:400 12px "Medeo Mono",monospace;
  color:var(--muted)
}

.presets button[aria-pressed=true] {
  background:var(--ink);
  color:var(--bg)
}

.presets button:not([aria-pressed=true]):hover {
  border-color:var(--line-strong);
  color:var(--ink)
}

.toolbar {
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:center;
  padding:10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--paper)
}

.select select {
  height:36px;
  padding:0 10px;
  border:1px solid var(--line-strong);
  border-radius:8px;
  background:var(--bg);
  font:400 13px "Medeo Mono",monospace
}

.tgroup {
  display:flex;
  border:1px solid var(--line-strong);
  border-radius:8px;
  overflow:hidden
}

.tgroup button {
  display:grid;
  place-items:center;
  width:36px;
  height:34px;
  background:transparent;
  border:0;
  color:var(--muted)
}

.tgroup button+button {
  border-left:1px solid var(--line)
}

.tgroup button[aria-pressed=true] {
  background:var(--press);
  color:var(--ink)
}

.select select:disabled,.tgroup button:disabled {
  opacity:.35;
  cursor:not-allowed
}

.tgroup svg,.reset svg {
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.4
}

.slider {
  display:grid;
  grid-template-columns:1fr auto;
  column-gap:22px;
  font:400 12px "Medeo Mono",monospace;
  color:var(--muted)
}

.slider output {
  color:var(--ink)
}

.slider input {
  grid-column:1/-1;
  width:150px
}

.reset {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  margin-left:auto;
  border:1px solid var(--line-strong);
  border-radius:8px;
  background:transparent
}

.reset.spin svg {
  animation:spin .5s var(--ease)
}

@keyframes spin {
  to {
    transform:rotate(-360deg)
  }
}

.pg-wrap {
  position:relative;
  margin-top:40px;
  min-height:240px;
  display:flex;
  align-items:center
}

.pg-text {
  position:relative;
  z-index:1;
  width:100%;
  padding:20px 0;
  font-size:96px;
  line-height:1.15;
  letter-spacing:0;
  text-align:center;
  overflow-wrap:anywhere;
  text-wrap:balance;
  outline:none
}

.pg-text:focus-visible {
  outline:1px dashed var(--line-strong);
  outline-offset:8px
}

.pg-text:empty::before {
  content:attr(data-placeholder);
  color:var(--muted)
}

.pg-lines {
  position:absolute;
  inset:0;
  pointer-events:none
}

.pg-lines i {
  position:absolute;
  left:0;
  right:0;
  border-top:1px dashed var(--line-strong)
}

input[type=range] {
  appearance:none;
  height:22px;
  background:transparent;
  margin:0;
  cursor:pointer
}

input[type=range]::-webkit-slider-runnable-track {
  height:1px;
  background:var(--line-strong)
}

input[type=range]::-webkit-slider-thumb {
  appearance:none;
  width:12px;
  height:12px;
  margin-top:-5px;
  background:var(--ink);
  border-radius:50%
}

input[type=range]::-moz-range-track {
  height:1px;
  background:var(--line-strong)
}

input[type=range]::-moz-range-thumb {
  width:12px;
  height:12px;
  background:var(--ink);
  border:0;
  border-radius:50%
}

/* Reading sizes in three columns. */
.textset {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  padding:var(--sec) 0
}

.textset-kicker {
  grid-column:1/-1;
  padding:0 var(--pad) 40px
}

.ts-col {
  padding:0 var(--pad)
}

.ts-col:first-of-type {
  padding-left:var(--pad)
}

.ts-spec {
  margin-bottom:20px;
  font-size:12px;
  text-transform:uppercase;
  color:var(--muted)
}

.ts-lead {
  font-size:28px;
  font-weight:500;
  line-height:34px;
  letter-spacing:-.02em;
  max-width:16ch
}

/* two words held together on a wide column only: on a phone they would push past the column */
@media (min-width:600px) {
  .nw-wide {
    white-space:nowrap
  }
}

.ts-body {
  font-size:17px;
  line-height:27px;
  max-width:36ch
}

.ts-body+.ts-body {
  margin-top:16px
}

.ts-small {
  font-size:14px;
  line-height:21px;
  color:var(--muted);
  max-width:32ch
}

.ts-small+.ts-small {
  margin-top:14px
}

.ts-it {
  font-style:italic
}

/* Evidence: the comment, five pairs on one scale, three letters with a lens on what changed. */
.story-top {
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:calc(var(--pad) * 2);
  padding:var(--sec) var(--pad) 48px
}

.story-copy h2 {
  max-width:14ch
}

.story-copy p {
  margin-top:22px;
  max-width:44ch;
  font-size:17px;
  line-height:1.6;
  color:var(--muted)
}

.comment {
  padding:8px 0 0
}

.comment-who {
  display:flex;
  gap:10px;
  align-items:center;
  font-size:13px
}

.avatar {
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  background:var(--ink);
  color:var(--bg);
  border-radius:50%;
  font:400 12px "Medeo Mono",monospace
}

.comment-note {
  font-size:.7em;
  color:var(--muted);
  white-space:nowrap
}

.comment-text {
  font-size:21px;
  line-height:1.35;
  letter-spacing:0;
  margin:22px 0
}

.comment figcaption {
  font-size:14px
}

.link-arrow {
  text-decoration:none;
  border-bottom:1px solid var(--line-strong);
  padding-bottom:4px
}

.link-arrow:hover {
  border-color:var(--ink)
}

.pairs {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  padding:0 var(--pad) var(--sec);
  gap:28px
}

.pair {
  min-width:0;
  border-top:1px solid var(--line);
  padding-top:16px
}

.pair-label {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:space-between;
  font:400 12px "Medeo Mono",monospace;
  color:var(--muted);
  margin-bottom:16px
}

.pair-name {
  font:400 12px "Medeo Mono",monospace;
  color:var(--muted)
}

.pair svg {
  display:block;
  width:100%;
  height:auto;
  overflow:visible
}

.pair .g-old {
  fill:var(--g-old)
}

.pair .g-new {
  fill:var(--ink)
}

.pair .gap {
  fill:var(--g-gap)
}

.pair .gap-edge {
  stroke:var(--g-edge);
  stroke-width:1;
  vector-effect:non-scaling-stroke
}

.pair .guide {
  stroke:var(--line);
  stroke-width:1;
  vector-effect:non-scaling-stroke
}

.pair .val {
  display:none
}

.pair rect.gap {
  transform-box:fill-box;
  transform-origin:left center
}

.pair-key {
  grid-column:1/-1;
  display:flex;
  gap:28px;
  align-items:center;
  flex-wrap:wrap
}

.pair-key p {
  display:flex;
  gap:10px;
  align-items:center;
  font-size:12px;
  color:var(--muted)
}

.pair-key i {
  display:inline-block;
  width:18px;
  height:10px
}

.k-old {
  background:var(--g-old)
}

.k-new {
  background:var(--ink)
}

.k-gap {
  background:var(--g-gap);
  outline:1px solid var(--g-edge)
}

.pk-note {
  display:none!important
}

.origins {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  padding:var(--sec) var(--pad);
  gap:40px 28px
}

.origin {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px
}

.origin-glyph {
  width:100%;
  height:220px;
  overflow:visible
}

.origin-glyph .g {
  fill:var(--ink)
}

.origin-glyph .focus {
  fill:none;
  stroke:var(--muted);
  stroke-width:1;
  vector-effect:non-scaling-stroke
}

.origin-glyph .lens-bg {
  fill:var(--bg)
}

.origin-glyph .lens-glyph {
  fill:none;
  stroke:var(--ink);
  stroke-width:1;
  vector-effect:non-scaling-stroke
}

.origin-glyph .lens-pt {
  fill:var(--muted)
}

.origins-cap {
  grid-column:1/-1;
  font-size:17px;
  line-height:1.6;
  color:var(--muted)
}

/* Each source signs in its own face: Geist and Inter from two-word subsets of their fonts, Medeo in Medeo. */
.origin-name {
  font-size:20px;
  font-weight:400;
  letter-spacing:0;
  text-align:center
}

.cap-more,.guides {
  display:none
}

/* The name and the languages it was made for. */
.name {
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:calc(var(--pad) * 2);
  padding:var(--sec) var(--pad);
  row-gap:40px
}

.name-head h2 {
  margin-top:18px;
  max-width:13ch
}

.changes {
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:calc(var(--pad) * 2);
  row-gap:40px;
  padding:var(--sec) var(--pad)
}

.name-copy a {
  color:var(--ink)
}

/* Changelog: the date on the left axis, the entry from the half axis, as the greetings hang. */
.log {
  grid-column:1/-1;
  list-style:none
}

.log {
  margin:0 calc(var(--pad) * -1)
}

.log li {
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:calc(var(--pad) * 2);
  align-items:baseline;
  padding:20px var(--pad);
  border-top:1px solid var(--line)
}

#changes code {
  font-size:.85em;
  white-space:nowrap
}

.inst-lead a {
  display:block;
  margin-top:4px
}

.log time,.log-soon {
  font-size:12px;
  color:var(--muted)
}

.log p {
  max-width:52ch;
  font-size:17px;
  line-height:1.6;
  color:var(--muted)
}

.log b {
  font-weight:500;
  color:var(--ink)
}

.name-copy {
  align-self:end;
  padding-left:0;
  max-width:46ch
}

.name-copy p {
  font-size:17px;
  line-height:1.6;
  color:var(--muted)
}

.name-copy p+p {
  margin-top:16px
}

.langs {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  margin:0 calc(var(--pad) * -1)
}

.langs li {
  padding-left:calc(var(--pad) - 40px) !important
}

.langs li {
  display:grid;
  grid-template-columns:28px 1fr;
  align-items:baseline;
  gap:12px;
  padding:20px 0;
  border-top:1px solid var(--line)
}

.langs .lang-en {
  grid-column:1/-1
}

.langs li>.mono {
  font-size:12px;
  color:var(--muted)
}

.langs .face {
  font-size:clamp(20px,1.9vw,26px);
  line-height:1.2;
  letter-spacing:-.025em
}

.lang-c {
  display:block;
  margin-top:6px;
  font:400 13px/1.3 "Medeo Sans",sans-serif;
  letter-spacing:0;
  color:var(--muted)
}

/* Inspector */
.inspector {
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:calc(var(--pad) * 2);
  align-items:start;
  padding:var(--sec) var(--pad)
}

.insp-left {
  position:relative
}

.tabs {
  display:grid;
  grid-template-columns:1fr 1fr;
  border-bottom:1px solid var(--line)
}

.tabs button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:44px;
  border:0;
  background:none;
  font:500 12px/1 "Medeo Mono",ui-monospace,monospace;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--muted);
  cursor:pointer;
  position:relative;
  transition:color .2s
}

.tabs button+button {
  border-left:1px solid var(--line)
}

.tabs button svg {
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.3
}

.tabs button::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  background:var(--ink);
  transform:scaleX(0);
  transition:transform .35s var(--ease)
}

.tabs button[aria-selected=true] {
  color:var(--ink)
}

.tabs button[aria-selected=true]::after {
  transform:scaleX(1)
}

.tabs button[aria-disabled=true] {
  opacity:.45;
  cursor:not-allowed
}

.tab-hint {
  padding:10px 20px 0;
  font-size:12px;
  color:var(--muted)
}

.stage {
  position:relative;
  height:440px
}

.stage-svg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  z-index:1
}

.stage-svg .g-fill {
  fill:var(--ink)
}

.stage-svg .g-outline {
  fill:none;
  stroke:var(--ink);
  stroke-width:1.5;
  vector-effect:non-scaling-stroke
}

.stage-svg .h-line {
  stroke:var(--muted);
  stroke-width:1;
  vector-effect:non-scaling-stroke
}

.stage-svg .p-on {
  fill:var(--ink)
}

.stage-svg .p-off {
  fill:var(--bg);
  stroke:var(--ink);
  stroke-width:1;
  vector-effect:non-scaling-stroke
}

.metric {
  position:absolute;
  left:0;
  right:0;
  height:0;
  border-top:1px dashed var(--line-strong);
  top:var(--y,0)
}

.metric span {
  position:absolute;
  left:8px;
  bottom:5px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--muted);
  background:var(--bg);
  padding:0 4px;
  z-index:2
}

.metric b {
  position:absolute;
  right:0;
  top:-8px;
  z-index:2;
  width:44px;
  height:16px;
  line-height:16px;
  text-align:center;
  font-size:12px;
  font-weight:400;
  background:var(--ink);
  color:var(--bg)
}

.stage-cap {
  padding:18px 0 0;
  font-size:12px;
  line-height:1.5;
  color:var(--muted)
}

.cells-col {
  min-width:0
}

.alph {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:4px;
  margin-bottom:12px
}

.alph button i {
  margin-left:1px;
  font:italic 400 1.05em "Medeo Sans",sans-serif;
  color:var(--muted)
}

.alph button[aria-pressed=true] i {
  color:inherit
}

.alph button {
  min-height:30px;
  padding:4px 2px;
  white-space:nowrap;
  border:1px solid transparent;
  border-radius:999px;
  background:none;
  font:400 12px "Medeo Mono",monospace;
  color:var(--muted)
}

.alph button:hover {
  border-color:var(--line-strong);
  color:var(--ink)
}

.alph button[aria-pressed=true] {
  background:var(--ink);
  color:var(--bg)
}

.cells {
  border:1px solid var(--line);
  border-bottom:0;
  background:var(--bg)
}

.cells-group {
  display:grid;
  grid-template-columns:repeat(9,1fr)
}

.cells-label {
  grid-column:1/-1;
  height:40px;
  display:flex;
  align-items:center;
  padding:0 16px;
  font:500 12px/1 "Medeo Mono",monospace;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--muted);
  border-bottom:1px solid var(--line)
}

.cell {
  aspect-ratio:1;
  border:0;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:none;
  font-family:"Medeo Sans",sans-serif;
  font-size:30px;
  cursor:pointer;
  transition:background .1s,color .1s;
  padding:0
}

.cells-group .cell:nth-child(9n+1) {
  border-right:0
}

.cell.empty {
  cursor:default
}

.cell:not(.empty):hover {
  background:var(--panel)
}

.cell[aria-selected=true] {
  background:var(--ink);
  color:var(--bg)
}

.cell:focus-visible {
  outline-offset:-3px;
  outline-color:var(--ink)
}

.cell[aria-selected=true]:focus-visible {
  outline:2px solid var(--bg);
  outline-offset:-6px
}

.cells-more {
  display:block;
  width:100%;
  min-height:48px;
  padding:14px 24px;
  text-align:left;
  font-size:12px;
  line-height:1.5;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink);
  background:none;
  border:0;
  border-bottom:1px solid var(--line);
  cursor:pointer
}

.cells-more:hover {
  background:var(--panel)
}

/* A Mono line runs across the sheet between the inspector and the campaign. */
.ticker {
  overflow:hidden;
  padding:14px 0;
  background:var(--bg)
}

.ticker-run {
  display:flex;
  width:max-content;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
  white-space:nowrap;
  animation:run 60s linear infinite
}

@keyframes run {
  to {
    transform:translateX(-50%)
  }
}

/* Campaign: printed pieces made of letters only. */
.iu-head {
  padding:var(--sec) var(--pad) 24px
}

.iu-posters {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  padding:0 var(--pad) var(--sec)
}

.inuse figure {
  position:relative;
  overflow:hidden;
  container-type:inline-size;
  border:1px solid var(--line)
}

.pp {
  aspect-ratio:4/5;
  background:#0f0f0f;
  color:#f2f2f2
}

.pp::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  opacity:.14;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.6' filter='url(%23n)'/%3E%3C/svg%3E")
}

.pp-art {
  position:absolute;
  left:0;
  right:0;
  top:14%;
  width:100%;
  height:33%;
  -webkit-mask:linear-gradient(transparent,#000 35%);
  mask:linear-gradient(transparent,#000 35%)
}

.pp-top {
  position:absolute;
  left:7cqi;
  right:7cqi;
  top:6cqi;
  display:flex;
  justify-content:space-between;
  gap:16px;
  z-index:3
}

.pp-logo {
  font-size:7cqi;
  font-weight:500;
  letter-spacing:-.03em;
  line-height:1
}

.pp-logo small {
  font:400 12px "Medeo Mono",monospace;
  letter-spacing:0;
  margin-left:8px;
  color:#a8a8a8
}

.pp-meta {
  font-size:12px;
  text-transform:uppercase;
  text-align:right;
  line-height:1.5
}

.pp-pill {
  position:absolute;
  top:32%;
  z-index:3;
  font:400 12px "Medeo Mono",monospace;
  text-transform:uppercase;
  border-bottom:1px solid #8a8a8a;
  padding-bottom:6px
}

.pp-l {
  left:7cqi
}

.pp-r {
  right:7cqi
}

.pp-tint {
  position:absolute;
  left:0;
  right:0;
  top:47%;
  height:13%;
  background:var(--band);
  z-index:2
}

.pp-words {
  position:absolute;
  left:7cqi;
  right:7cqi;
  top:47%;
  height:13%;
  z-index:3;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  align-content:space-evenly;
  gap:6px;
  font:400 max(12px,2cqi)/1.3 "Medeo Mono",monospace;
  color:#fff
}

.pp-head {
  position:absolute;
  left:7cqi;
  right:7cqi;
  top:68%;
  font-size:10cqi;
  line-height:1.02;
  font-weight:500;
  letter-spacing:-.03em;
  z-index:3
}

.pp-row2 {
  display:block
}

.pp-body {
  position:absolute;
  left:7cqi;
  right:7cqi;
  bottom:5cqi;
  z-index:3;
  font-size:13px;
  line-height:1.45;
  color:#bdbdbd
}

.pp-score .iu-board-big {
  position:absolute;
  left:7cqi;
  top:22%;
  z-index:3;
  font-size:24cqi;
  line-height:1;
  font-variation-settings:"ELSH" 20;
  font-variant-numeric:tabular-nums
}

.pp-score .pp-tint {
  top:52%;
  height:28%
}

.iu-board-rows {
  position:absolute;
  left:7cqi;
  right:7cqi;
  top:52%;
  height:28%;
  z-index:3;
  display:grid;
  align-content:space-evenly;
  font-size:4.8cqi;
  line-height:1.6;
  font-variant-numeric:tabular-nums;
  color:#fff
}

.iu-board-rows li {
  display:flex;
  justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.28)
}

.iu-board-rows li:first-child {
  border-top:0
}

.iu-cap {
  position:absolute;
  left:7cqi;
  right:7cqi;
  bottom:5cqi;
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:12px;
  text-transform:uppercase;
  color:#a8a8a8;
  z-index:3
}

.iu-cap span:last-child {
  margin-left:auto
}

/* The caption's two parts wrap as wholes, never into each other. */
.iu-cap {
  flex-wrap:wrap
}

.iu-cap>span {
  white-space:nowrap
}

#changes-h {
  max-width:none
}

.pre {
  opacity:.4
}

.tick {
  user-select:none
}

/* Posters made of the type itself, in the manner of the vercel.com/font gallery: an outline with its
   points, a scale of sizes, the five Pixel dots. */
.pv {
  aspect-ratio:4/5;
  display:flex;
  flex-direction:column;
  padding:7%;
  background:var(--poster);
  color:#141414
}

.inuse .pv {
  border-color:transparent
}

.pv-meta {
  font-size:max(12px,2.8cqi);
  line-height:1.3;
  text-transform:uppercase
}

.pv-foot {
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:auto;
  padding-top:4cqi;
  font-size:12px;
  text-transform:uppercase;
  color:#5c5c5c
}

.pv-glyph {
  flex:none;
  height:66cqi;
  width:100%;
  margin-top:3cqi;
  overflow:visible
}

.pv-glyph .g-outline {
  fill:none;
  stroke:#141414;
  stroke-width:1.2;
  vector-effect:non-scaling-stroke
}

.pv-glyph .h-line {
  stroke:#8a8a8a;
  stroke-width:1;
  vector-effect:non-scaling-stroke
}

.pv-glyph .p-on {
  fill:#141414
}

.pv-glyph .p-off {
  fill:var(--poster);
  stroke:#141414;
  stroke-width:1;
  vector-effect:non-scaling-stroke
}

.pv-steps {
  margin-top:auto
}

.pv-steps li {
  display:grid;
  grid-template-columns:9cqi 1fr;
  align-items:baseline;
  border-top:1px solid #cfcfcb;
  overflow:hidden
}

.pv-steps span {
  font-size:12px;
  color:#5c5c5c
}

.pv-steps b {
  font-weight:var(--w);
  font-size:max(12px,calc(var(--s) * .3cqi));
  line-height:1.12;
  letter-spacing:0;
  white-space:nowrap
}

.pv-pixel {
  background:#0f0f0f;
  color:#f2f2f2
}

.pv-pixel .pv-foot {
  color:#a8a8a8
}

.pv-shapes {
  margin-top:auto
}

.pv-shapes li {
  display:flex;
  align-items:center;
  gap:5cqi;
  padding:1.2cqi 0;
  border-top:1px solid #2a2a2a
}

.pv-shapes b {
  font-size:13cqi;
  line-height:1;
  font-variation-settings:"ELSH" var(--e)
}

.pv-shapes span {
  font-size:12px;
  text-transform:uppercase;
  color:#a8a8a8
}

/* The white sheet: the mark in the middle, four letters of the region in the corners. */
.pw {
  aspect-ratio:4/5;
  background:var(--sheet);
  color:var(--sheet-ink)
}

.inuse .pw {
  border-color:var(--sheet)
}

.pw-mark {
  position:absolute;
  left:50%;
  top:50%;
  translate:-50% -50%;
  font-size:19cqi;
  font-weight:300;
  line-height:1;
  white-space:nowrap
}

.pw-mark sup {
  font-size:12px;
  letter-spacing:0;
  vertical-align:3em;
  margin-left:8px
}

.pw-item {
  position:absolute;
  width:20cqi
}

.pw-glyph {
  display:grid;
  place-items:center;
  aspect-ratio:1;
  border:1px solid #d6d6d0;
  font-size:11cqi;
  font-weight:300;
  line-height:1
}

.pw-glyph.pixel {
  font-variation-settings:"ELSH" 20
}

.pw-1 {
  left:6cqi;
  top:6cqi
}

.pw-2 {
  right:6cqi;
  top:6cqi
}

.pw-3 {
  left:6cqi;
  bottom:9cqi
}

.pw-4 {
  right:6cqi;
  bottom:9cqi
}

.pw-cap {
  margin-top:8px;
  font-size:12px;
  line-height:1.2;
  text-transform:uppercase;
  white-space:nowrap
}

.pw-side {
  position:absolute;
  top:39%;
  font:400 12px "Medeo Mono",monospace;
  text-transform:uppercase
}

.pw-side-l {
  left:6cqi
}

.pw-side-r {
  right:6cqi
}

.pw-foot {
  position:absolute;
  left:50%;
  bottom:4cqi;
  translate:-50% 0;
  font-size:12px;
  text-transform:uppercase;
  color:#6b6b66;
  white-space:nowrap
}

.inst-lead {
  margin-top:14px;
  font-size:17px;
  color:var(--muted)
}

/* Install: four cells on the sheet, as on vercel.com/font: npm, CDN, what each way gives, the archive. */
.install {
  padding:var(--sec) 0 0
}

.inst-intro {
  position:relative;
  padding:0 var(--pad) calc(var(--c) + 40px)
}

.inst-art {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:var(--c);
  -webkit-mask:linear-gradient(transparent,#000 20%);
  mask:linear-gradient(transparent,#000 20%)
}

.inst-intro h2 {
  margin-top:18px
}

.inst-grid {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line)
}

.inst-cell {
  min-width:0;
  padding:72px var(--pad) 80px;
  background:var(--bg);
  border-bottom:1px solid var(--line)
}

.inst-cell:nth-child(odd) {
  border-right:1px solid var(--line)
}

.inst-cell:nth-last-child(-n+2) {
  border-bottom:0
}

.install h3 {
  font-size:20px;
  font-weight:500;
  line-height:1.2;
  letter-spacing:-.01em
}

.install h4 {
  margin:32px 0 0;
  font-size:15px;
  font-weight:500
}

.install p {
  margin-top:16px;
  font-size:17px;
  line-height:1.6;
  color:var(--muted);
  max-width:48ch
}

.install p code,.inst-note code {
  font-size:.85em;
  color:var(--ink);
  white-space:nowrap
}

.install p a {
  text-underline-offset:3px
}

.inst-head {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:16px
}

.dl {
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:44px;
  padding:0 20px 0 16px;
  border-radius:999px;
  background:var(--ink);
  color:var(--bg);
  font-size:15px;
  font-weight:500;
  text-decoration:none;
  white-space:nowrap
}

.dl:hover {
  opacity:.88
}

.dl svg {
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.3
}

.inst-more {
  margin-top:24px;
  border-top:1px solid var(--line);
  padding-top:16px
}

.inst-more summary {
  cursor:pointer;
  font-size:15px;
  min-height:30px
}

.inst-more p {
  font-size:15px
}

.files {
  margin-top:16px
}

.files a {
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:12px 0;
  border-top:1px solid var(--line);
  text-decoration:none;
  font-size:14px;
  overflow-wrap:anywhere
}

.files a:hover {
  background:var(--panel)
}

.files .mono {
  font-size:12px;
  color:var(--muted)
}

.code {
  position:relative;
  margin-top:16px;
  background:var(--paper);
  padding-right:44px;
  border:1px solid var(--line);
  border-radius:10px
}

.code pre {
  padding:14px 16px;
  overflow:auto;
  white-space:pre;
  scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)
}

.code code {
  font:400 13px/1.65 "Medeo Mono",monospace
}

.code-cmd code::before {
  content:"$ ";
  color:var(--muted)
}

.copy {
  position:absolute;
  right:6px;
  top:6px;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:6px;
  background:var(--paper);
  color:var(--muted)
}

.copy:hover {
  background:var(--panel);
  color:var(--ink)
}

.copy.done {
  color:var(--ink)
}

.copy svg {
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.3
}

.copy-status {
  min-height:20px;
  font-size:12px!important
}

.ways {
  width:100%;
  margin-top:24px;
  border-collapse:collapse;
  table-layout:fixed;
  font-size:13px
}

/* one step for the three ways: the feature column, then three equal columns */
.ways thead th:first-child {
  width:34%
}

.ways th,.ways td {
  padding:12px 8px;
  border-top:1px solid var(--line);
  text-align:left;
  font-weight:400;
  white-space:nowrap
}

.ways td {
  color:var(--ink)
}

.ways thead th {
  border-top:0;
  font:400 12px "Medeo Mono",monospace;
  text-transform:uppercase;
  color:var(--muted)
}

.ways tbody th {
  color:var(--muted);
  padding-left:0;
  white-space:nowrap
}

/* (i): the note behind a one-word cell, on hover, focus or tap. */
.info {
  position:relative;
  display:inline-grid;
  place-items:center;
  width:20px;
  height:20px;
  margin-left:6px;
  padding:0;
  border:0;
  background:none;
  color:var(--muted);
  vertical-align:-4px;
  cursor:help
}

.info svg {
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.3
}

.info:hover,.info:focus-visible,.info.open {
  color:var(--ink)
}

.info::after {
  content:attr(data-tip);
  position:absolute;
  left:50%;
  bottom:calc(100% + 8px);
  z-index:20;
  width:max-content;
  max-width:240px;
  padding:8px 10px;
  border:1px solid var(--line-strong);
  border-radius:8px;
  background:var(--paper);
  color:var(--ink);
  font:400 13px/1.45 "Medeo Sans",sans-serif;
  text-align:left;
  text-transform:none;
  white-space:pre-line;
  display:none;
  opacity:0;
  transform:translate(-50%,4px);
  pointer-events:none;
  transition:opacity .15s,transform .15s
}

.info:hover::after,.info:focus-visible::after,.info.open::after {
  display:block;
  opacity:1;
  transform:translate(-50%,0)
}

/* near the table's edges the note opens inward */
.ways th .info::after {
  left:-4px;
  transform:translate(0,4px)
}

.ways th .info:is(:hover,:focus-visible,.open)::after {
  transform:none
}

.ic {
  width:16px;
  height:16px;
  margin-right:8px;
  vertical-align:-3px;
  fill:none;
  stroke-width:1.3
}

.ic-yes {
  stroke:var(--ink)
}

.ic-no,.ic-part {
  stroke:var(--muted)
}

/* Footer: credits in two lines, the release line, the studio and the theme switch. */
.foot {
  padding:28px var(--pad) 28px;
  border-bottom:1px solid var(--line);
  background:var(--bg)
}

.foot-credit {
  font-size:13px;
  line-height:1.6;
  color:var(--muted)
}

.foot-credit span {
  display:block
}

.foot a {
  text-underline-offset:3px
}

.foot-line {
  display:grid;
  grid-template-columns:calc(50% + var(--pad) - 24px) 1fr auto;
  align-items:center;
  column-gap:24px;
  margin-top:18px;
  font-size:12px;
  color:var(--muted);
  flex-wrap:wrap
}



.theme {
  display:inline-flex;
  width:auto;
  justify-self:start;
  align-self:start;
  padding:2px;
  border:1px solid var(--line-strong);
  border-radius:999px
}

.theme button {
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border:0;
  border-radius:50%;
  background:none;
  color:var(--muted)
}

.theme button[aria-checked=true] {
  background:var(--press);
  color:var(--ink)
}

.theme svg {
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.3
}

.js .rise {
  opacity:1
}

html[data-face=mono] #mark-dot {
  margin-left:-.185em
}

@media(min-width:901px) {
  .pair:not(:first-child):not(.pair-key) .pair-name {
    visibility:hidden
  }
}

@media(max-width:1100px) and (min-width:901px) {
  .stats-lead {
    padding-right:24px
  }

  /* the table and the archive take the full width; npm and CDN stay side by side */
  .inst-cell:nth-child(n+3) {
    grid-column:1/-1;
    border-right:0
  }

  .inst-cell:nth-child(3) {
    border-bottom:1px solid var(--line)
  }

  .iu-posters {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .textset {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }

  .pairs {
    gap:18px
  }
}

/* Phone: four cells across, one column of content. */
@media(max-width:900px) {
  :root {
    --pad:20px;
    --sec:64px
  }

  body {
    font-size:16px
  }

  .nav {
    height:56px;
    grid-template-columns:1fr auto 1fr;
    gap:10px
  }

  .nav .seg {
    justify-self:center
  }

  .nav {
    padding:0 14px;
    gap:6px
  }

  .wordmark {
    font-size:20px
  }

  .nav-end {
    gap:8px
  }

  .page-lang {
    gap:0
  }

  .page-lang button {
    min-width:0;
    height:30px;
    padding:0 4px
  }

  .by,.pill-long,.zip-long {
    display:none
  }

  .seg button {
    min-width:0;
    padding:0 8px;
    height:30px;
    font-size:12px
  }

  .seg-ink span {
    height:30px;
    font-size:12px
  }

  .nav .pill {
    width:32px;
    min-height:32px;
    padding:0;
    justify-content:center
  }

  .hero {
    --hero-pad:20px;
    height:calc(var(--c) * 5)
  }

  .chip {
    top:16px
  }

  .hguide:nth-child(2n) {
    display:none
  }

  .hguide:nth-child(3) b {
    top:5px
  }

  .stats {
    grid-template-columns:1fr;
    padding:var(--sec) var(--pad)
  }

  .stats-list {
    grid-column:1
  }

  .stat {
    grid-template-columns:26px 1fr auto;
    gap:12px;
    padding:4px 0
  }

  .stat svg {
    width:18px;
    height:18px
  }

  .stat dt,.stat dd {
    font-size:20px
  }

  .idea {
    grid-template-columns:1fr;
    row-gap:28px;
    padding:40px var(--pad)
  }

  .nn-pair {
    font-size:80px
  }

  .about {
    grid-template-columns:1fr;
    gap:28px;
    padding:var(--sec) var(--pad)
  }

  .family {
    grid-template-columns:1fr
  }

  .family-kicker {
    padding:var(--sec) var(--pad) 16px
  }

  /* the sample over its caption, the caption the card's full width: a half column is too narrow to set */
  .fam,.fam:first-of-type {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:10px 16px;
    padding:20px var(--pad)
  }

  .fam+.fam {
    border-left:0;
    border-top:1px solid var(--line)
  }

  .fam-name {
    grid-column:1/-1
  }

  .fam-sample,.fam-sample.f-pixel-axis {
    min-height:0;
    font-size:40px
  }

  .fam-prices {
    font-size:26px
  }

  .fam-cap {
    font-size:14px
  }

  .playground {
    padding:32px var(--pad) var(--sec)
  }

  .toolbar {
    gap:12px
  }

  .slider input {
    width:120px
  }

  .pg-wrap {
    margin-top:24px;
    min-height:160px
  }

  .textset {
    grid-template-columns:1fr;
    row-gap:32px;
    padding:var(--sec) var(--pad)
  }

  .textset-kicker {
    padding:0
  }

  .ts-col,.ts-col:first-of-type {
    padding:0
  }

  .story-top {
    grid-template-columns:1fr;
    gap:28px;
    padding:var(--sec) var(--pad) 32px
  }

  .comment {
    padding:0
  }

  .comment-text {
    font-size:20px;
    margin:16px 0
  }

  .pairs {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px 16px;
    padding:0 var(--pad) var(--sec)
  }

  .pair-key {
    gap:14px
  }

  .origins {
    gap:24px 8px;
    padding:var(--sec) var(--pad)
  }

  .origin-name {
    font-size:16px
  }

  .origin-glyph {
    height:110px
  }

  .name {
    grid-template-columns:1fr;
    row-gap:24px;
    padding:var(--sec) var(--pad)
  }

  .name-copy {
    padding:0
  }

  .name-copy p {
    font-size:16px
  }

  .langs {
    grid-template-columns:1fr
  }

  .langs li {
    padding:14px 0
  }

  .inspector {
    grid-template-columns:1fr;
    gap:24px;
    padding:var(--sec) var(--pad)
  }

  .stage {
    height:min(340px,90vw)
  }

  .cells-group {
    grid-template-columns:repeat(4,1fr)
  }

  .alph {
    grid-template-columns:repeat(5,minmax(0,1fr))
  }

  .cells-group .cell:nth-child(9n+1) {
    border-right:1px solid var(--line)
  }

  .cells-group .cell:nth-child(4n+1) {
    border-right:0
  }

  .cell {
    font-size:20px
  }

  .iu-head {
    padding:var(--sec) var(--pad) 16px
  }

  .iu-posters {
    grid-template-columns:1fr;
    gap:16px;
    padding:0 var(--pad) var(--sec)
  }

  .iu-long,.pw-side,.pw-foot {
    display:none
  }



  .install {
    padding-top:var(--sec)
  }

  .inst-grid {
    grid-template-columns:1fr
  }

  .inst-cell,.inst-cell:nth-last-child(-n+2) {
    padding:40px var(--pad) 44px;
    border-right:0;
    border-bottom:1px solid var(--line)
  }

  .inst-cell:last-child {
    border-bottom:0
  }

  .ways {
    table-layout:fixed;
    font-size:13px
  }

  .ways th,.ways td {
    padding:10px 4px;
    white-space:normal
  }

  .ways thead th:first-child {
    width:40%
  }

  .ic {
    display:block;
    margin:0 0 4px
  }

  .foot-line p:nth-child(2) {
    margin-left:0
  }






}

@media(prefers-reduced-motion:reduce) {
  .loader {
    display:none
  }

  body.is-loading {
    overflow:auto
  }

  html {
    scroll-behavior:auto
  }

  .ticker-run {
    animation:none
  }

  .seg-ink,.tabs button::after {
    transition:none
  }
}

/* Anchors land below the sticky header. */
main section,#download,#glyphs {
  scroll-margin-top:64px
}

.fam-cap-pixel .shapes {
  display:block;
  margin-top:4px
}

html[data-theme=light] .inuse .pv,html[data-theme=light] .inuse .pw {
  border-color:var(--line-strong)
}

/* Stylistic sets of the tester: a small menu of the face's own sets. */
.sets {
  position:relative
}

.sets summary {
  display:flex;
  align-items:center;
  gap:6px;
  height:36px;
  padding:0 12px;
  border:1px solid var(--line-strong);
  border-radius:8px;
  font-size:13px;
  cursor:pointer;
  list-style:none
}

.sets summary::-webkit-details-marker {
  display:none
}

.sets summary b {
  font-weight:400;
  color:var(--muted)
}

.sets-list {
  position:absolute;
  top:42px;
  right:0;
  left:auto;
  max-width:calc(100vw - 32px);
  z-index:10;
  display:grid;
  gap:2px;
  min-width:420px;
  padding:8px;
  border:1px solid var(--line-strong);
  border-radius:10px;
  background:var(--paper)
}

.sets-list label {
  display:grid;
  grid-template-columns:16px 40px 1fr auto;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border-radius:6px;
  font-size:14px;
  cursor:pointer
}

.sets-list label:hover {
  background:var(--panel)
}

.ss-demo {
  font:400 24px/1 "Medeo Sans",sans-serif;
  white-space:nowrap;
  color:var(--muted)
}

.ss-demo i {
  margin:0 6px;
  font-style:normal;
  color:var(--muted)
}

.ss-demo b {
  font-weight:inherit;
  color:var(--ink)
}

.sets-list .mono {
  font-size:12px;
  color:var(--muted)
}

@media(max-width:1100px) {
  .toolbar {
    position:relative
  }

  .sets {
    position:static
  }

  .sets-list {
    left:10px;
    right:auto;
    top:calc(100% + 6px)
  }
}

@media(max-width:900px) {
  .pairs .pair:nth-child(5) {
    grid-column:1/-1
  }

  .stats-list {
    grid-column:1;
    padding:0
  }

  .stats-lead {
    padding:0 0 32px;
    max-width:none;
    font-size:22px
  }

  .idea,.about,.story-top,.name,.inspector {
    grid-template-columns:1fr
  }

  .textset {
    grid-template-columns:1fr
  }

  .sets-list {
    left:0;
    right:0;
    min-width:0
  }
}

@media(max-width:900px) {
  .hero {
    height:calc(var(--c) * 4)
  }

  .hero-art {
    height:calc(var(--c) * 1.5 - 1px)
  }

  .presets {
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none
  }

  .pv-foot span:first-child {
    white-space:nowrap
  }

  .langs {
    margin:0
  }

  .langs li {
    padding-left:0 !important
  }

  .foot-line {
    grid-template-columns:1fr
  }

}

/* A narrow phone: the language codes become one compact menu. */
.page-lang-select {
  display:none;
  -webkit-appearance:none;
  appearance:none;
  padding-right:22px !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238f8f8f' stroke-width='1.3'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 8px center !important;
  background-size:9px 6px !important
}

@media(max-width:430px) {
  .page-lang {
    display:none
  }

  .ss-demo {
    font-size:20px
  }

  /* a narrow phone: the sample goes under its name, the name keeps the row */
  .sets-list label {
    grid-template-columns:16px 40px 1fr
  }

  .sets-list .ss-demo {
    grid-column:3
  }

  .idea-copy h2 {
    font-size:min(26px,6.9vw)
  }

  .nn-note br {
    display:none
  }

  .nn-note {
    text-wrap:balance
  }

  .origin-glyph .focus,.origin-glyph .lens-glyph {
    stroke-width:1.5
  }

  /* the five dot shapes stack one per line, without the separators */
  .fam-cap-pixel .shapes {
    font-size:0
  }

  .fam-cap-pixel .shapes b {
    display:block;
    font-size:12px
  }

  .ss-demo i {
    margin:0 3px
  }

  .page-lang-select {
    display:block;
    height:30px;
    padding:0 6px;
    border:1px solid var(--line-strong);
    border-radius:999px;
    background:var(--paper);
    color:var(--ink);
    font:400 12px "Medeo Mono",monospace
  }

  .nav {
    gap:6px
  }
}

/* Phone, after the mobile vercel.com/font: on scroll only the face switch stays, floating; the specs
   read in two columns from the middle line; the inspector keeps the big glyph beside the grid; the
   posters step down one column instead of scrolling sideways. */
@media(max-width:900px) {
  .brand,.nav-end {
    transition:opacity .2s var(--ease)
  }

  .nav.floating {
    background:transparent;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    border-color:transparent
  }

  .nav.floating {
    pointer-events:none
  }

  .nav.floating .seg,.nav.floating .pill,.nav.floating .page-lang-select {
    pointer-events:auto
  }

  .nav.floating .brand,.nav.floating .page-lang {
    opacity:0;
    visibility:hidden;
    transition:opacity .2s var(--ease),visibility 0s .2s
  }

  /* floating, the page language stays in view: the compact menu joins the switch and Install */
  .nav.floating .page-lang {
    display:none
  }

  .nav.floating .page-lang-select {
    display:block;
    height:30px;
    padding:0 6px;
    border:1px solid var(--line-strong);
    border-radius:999px;
    background:var(--paper);
    color:var(--ink);
    font:400 12px "Medeo Mono",monospace;
    box-shadow:0 4px 16px rgb(0 0 0 / .18)
  }

  .nav .page-lang-select {
    transform:translateX(var(--lang-dx,0px));
    transition:transform .25s var(--ease)
  }

  .nav .page-lang,.nav .page-lang-select {
    transition:opacity .2s var(--ease)
  }

  .nav .seg {
    transform:translateX(var(--seg-dx,0px));
    transition:transform .25s var(--ease)
  }

  .nav.floating .seg,.nav.floating .pill {
    box-shadow:0 4px 16px rgb(0 0 0 / .18)
  }

  .nav .pill {
    transform:translateX(var(--pill-dx,0px));
    transition:transform .25s var(--ease)
  }

  .metric[data-v="530"] b,.metric[data-v="-150"] b {
    display:none
  }

  .stat {
    grid-template-columns:24px minmax(0,1fr) auto;
    gap:12px;
    padding:6px 0
  }

  .stat dt,.stat dd {
    font-size:17px;
    letter-spacing:0
  }


  .idea {
    padding:var(--sec) var(--pad)
  }

  .inspector {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"alph alph" "left cells";
    column-gap:16px;
    row-gap:20px
  }

  .cells-col {
    display:contents
  }

  .alph {
    grid-area:alph;
    margin:0
  }

  .cells {
    grid-area:cells
  }

  .insp-left {
    grid-area:left;
    position:sticky;
    top:64px
  }

  .tabs button span {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap
  }

  .stage {
    height:220px
  }

  .metric span,.cl-alph {
    display:none
  }

  .stage-svg {
    width:calc(100% - 46px)
  }

  .metric b {
    width:36px
  }

  .cells-label {
    height:auto;
    min-height:40px;
    padding:8px 10px;
    line-height:1.4
  }

  .iu-posters {
    grid-template-columns:1fr;
    gap:20px
  }


  .changes,.log li {
    grid-template-columns:1fr;
    row-gap:24px
  }

  .log li {
    row-gap:6px;
    padding:16px var(--pad)
  }

  .foot .theme {
    margin-top:16px
  }

  .fam:last-of-type {
    padding-bottom:var(--sec)
  }

  .story-copy p {
    max-width:none
  }

  .ts-lead {
    text-wrap:pretty
  }

  .fam-cap {
    max-width:none
  }

  .inst-intro .kicker {
    margin-top:0
  }

}