/* The Keeby layer. Loaded after style.css and only re-arranges and re-skins:
   every behavior still comes from app.js. Layout follows getkeeby.com: a
   floating pill bar, the Mac with the pitch and download beside it, then a
   screen you type into with the stats on the right, the words over a life size
   board, and the switch picker and restart on the floor line. Dark, and the
   brand stays ours. */

:root {
  --kb-plate: #0e0e0d;      /* the board, one step up from the page */
  --kb-key: #20201f;        /* key face, sampled off the chrome board render */
  --kb-key-edge: #30302e;   /* the lit top lip of a key */
  --kb-legend: #c9c9c6;     /* 12.4:1 on a key */
  --kb-chrome: #f8f8f8;     /* the specular white on the caps, used for press */
  --kb-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ------------------------------------------------------------- the bar */

.kb-bar {
  gap: 14px;
  padding: 14px var(--pad);
  border-bottom: 0;
}

.kb-claim {
  margin-left: 4px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

/* Centred on the bar itself, not on the gap between its neighbours. The bar is
   fixed, so it is already what the tally positions against. */
.kb-bar .tally { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; }
.kb-bar > .kb-pill { margin-left: auto; }

.kb-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 140ms var(--kb-ease), background-color 140ms var(--kb-ease);
}

.kb-pill-solid { background: var(--kb-chrome); border-color: var(--kb-chrome); color: #000; }
.kb-pill-big { height: 46px; padding: 0 24px; font-size: 15px; }
.kb-pill:active { transform: scale(0.97); }
.kb-pill:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--void), 0 0 0 4px var(--muted); }

@media (hover: hover) { .kb-pill-solid:hover { background: #e6e6e4; } }

/* ------------------------------------------------------------- the hero */

.kb-pitch { display: flex; flex-direction: column; align-items: flex-start; }

.kb-icon {
  width: 84px;
  height: 84px;
  margin-bottom: 26px;
  border-radius: 19px;
}

.kb-pitch .kb-pill-big { margin-top: 28px; }

.kb-req { margin-top: 12px; color: var(--dim); font-size: 13px; }

/* ------------------------------------------------------ the typing screen */

.test { margin-top: clamp(70px, 11vh, 130px); }

.test-bar { padding-bottom: 0; border-bottom: 0; }

.kb-label { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: var(--muted); }

.words { font-size: clamp(28px, 3.7vw, 46px); font-weight: 600; letter-spacing: -0.025em; }

/* ------------------------------------------------------------ the board */

.deck {
  --gap: 6px;
  width: calc(var(--deckw) + 28px);
  padding: 14px;
  border-radius: 16px;
  background: var(--kb-plate);
}

.key {
  height: calc(var(--u) * 0.86 - var(--gap));
  border: 0;
  border-radius: 10px 10px 4px 4px;
  background: var(--kb-key);
  box-shadow: inset 0 1px 0 var(--kb-key-edge);
  color: var(--kb-legend);
  transition: background-color 110ms var(--kb-ease), color 110ms var(--kb-ease), transform 110ms var(--kb-ease);
}

.row-fn .key { height: calc(var(--u) * 0.6 - var(--gap)); }

.stack .key {
  height: calc((var(--u) * 0.86 - var(--gap) - var(--gap)) / 2);
  border-radius: 6px 6px 3px 3px;
}

/* The chrome catching the light, the same move the app icon makes. Two pixels
   of travel, which is what the eye reads on a cap this size. */
.key.on {
  background: var(--kb-chrome);
  color: #000;
  transform: translateY(2px);
}

/* ------------------------------------------------------------ the floor */

.kb-floor {
  /* The deck's own unit, repeated: custom properties do not reach a sibling,
     so without these the floor ran the full width of the window. */
  --u: max(34px, calc((min(100vw, var(--max)) - 2 * var(--pad)) / 14.625));
  --gap: 6px;
  --deckw: calc(14.625 * var(--u) - var(--gap));
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(var(--deckw) + 28px);
  max-width: 100%;
  margin: 22px auto 0;
}

.kb-switcher { position: relative; display: flex; align-items: center; gap: 14px; }

.kb-floor-label { color: var(--muted); font-size: 15px; }

.kb-pick {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.kb-pick:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--void), 0 0 0 4px var(--muted); }

.kb-list {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  z-index: 30;
  width: 280px;
  max-height: 360px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.kb-list-group { padding: 10px 10px 4px; color: var(--dim); font-size: 12px; }

.kb-list-item {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

@media (hover: hover) { .kb-list-item:hover { background: var(--raise); color: var(--text); } }

.kb-list-item[aria-current="true"] { color: var(--text); background: var(--raise); }

/* --------------------------------------------------------------- narrow */

@media (max-width: 820px) {
  .kb-claim { display: none; }
}

@media (max-width: 560px) {
  .kb-bar .tally { display: none; }
  .kb-bar .kb-pill-solid { margin-left: auto; }
  .kb-icon { width: 64px; height: 64px; margin-bottom: 18px; border-radius: 15px; }
  .deck { margin-left: calc((100vw - var(--deckw) - 28px) / 2); }
  .kb-floor { padding: 0 var(--pad); }
  .kb-floor-label { display: none; }
}

/* =======================================================================
   Looks. Tokens only, so every section style above follows. The photographs
   (turntable, keycaps, footer) are shot on pure black, so wherever one sits the
   band stays black no matter the look: that contrast is the point of not being
   all black.
   ======================================================================= */

/* Silver: the dock icon's own material. White tile, chrome, graphite legend. */
:root[data-look="silver"] {
  --void: #ecece9;          /* canvas, sampled off the icon tile's shaded edge */
  --deep: #ecece9;
  --surface: #ffffff;       /* the tile itself */
  --raise: #f4f4f2;
  --line: #d9d9d4;
  --edge: #c4c4be;
  --text: #121211;          /* 16.9:1 on canvas */
  --muted: #55554f;         /* 7.1:1 */
  --dim: #7c7c75;           /* 3.9:1, metadata only */
  color-scheme: light;
}

/* Graphite: dark, but a warm grey step, not the void. */
:root[data-look="graphite"] {
  --void: #171716;
  --deep: #171716;
  --surface: #21211f;
  --raise: #2a2a28;
  --line: #2f2f2c;
  --edge: #3e3e3a;
  --text: #f4f4f1;
  --muted: #a1a19b;
  --dim: #74746f;
}

/* The board is a dark object in both looks, the way a real keyboard sits on a
   light desk. */
:root[data-look] .deck { --kb-plate: #1b1b1a; }
:root[data-look="silver"] .deck { box-shadow: 0 1px 0 #fff, 0 30px 60px -30px rgb(0 0 0 / 0.35); }
:root[data-look="silver"] .words:not(.live) { opacity: 0.55; }

/* --------------------------------------------------------- the big icon */

.kb-icon {
  width: clamp(120px, 11vw, 168px);
  height: auto;
  margin: 0 0 22px -10px;   /* the tile has transparent margin; this aligns its visible edge */
  border-radius: 0;
}

.wordmark img { width: 28px; height: 28px; border-radius: 0; }

/* ------------------------------------------------ show, don't tell: tone */

.tone .sub, .tone-side .read { display: none; }
/* Desktop only: unscoped, this beat style.css's one-column rule at 820px and
   pushed the key buttons off a phone screen. */
@media (min-width: 821px) {
  .tone-wrap { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); align-items: center; }
}

/* The board is wider than a phone on purpose. Clip, not hidden: hidden makes a
   scroll container and breaks the sticky turntable. Without this the overflow
   widened the whole layout viewport and pushed the header's button off screen. */
main { overflow-x: clip; }
.tone-side .taps { margin-top: 0; }


/* --------------------------------------------- show, don't tell: library */

.library .sub { display: none; }

.library .groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  columns: auto;
  margin-top: 30px;
}

.library .group { display: contents; }
.library .group h3 { display: none; }

.library .sw-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 16px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  transition: border-color 140ms var(--kb-ease), transform 140ms var(--kb-ease);
}

.library .sw-row .sw-blurb { display: none; }
.library .sw-row .sw-state { display: none; }
.library .sw-name { font-size: 15px; font-weight: 500; }

.kb-wave {
  width: 100%;
  height: 46px;
  fill: var(--dim);
  transition: fill 140ms var(--kb-ease);
}

@media (hover: hover) {
  .library .sw-row:hover { border-color: var(--edge); }
  .library .sw-row:hover .kb-wave { fill: var(--muted); }
}

.library .sw-row:active { transform: scale(0.98); }

/* Selected reads as the tile going chrome, the same move a pressed key makes. */
.library .sw-row.is-on { border-color: var(--text); background: var(--text); }
.library .sw-row.is-on .sw-name { color: var(--void); text-decoration: none; }
.library .sw-row.is-on .kb-wave { fill: var(--void); }

@media (prefers-reduced-motion: no-preference) {
  .library .sw-row.is-loading .kb-wave { animation: kb-pulse 700ms var(--kb-ease) infinite alternate; }
  @keyframes kb-pulse { to { opacity: 0.35; } }
}

/* ------------------------------------------------- show, don't tell: get */

.kb-get {
  position: relative;
  display: grid;
  place-items: center;
  max-width: none;
  min-height: min(92vh, 860px);
  margin-top: clamp(80px, 12vw, 150px);
  padding: 0 var(--pad);
  overflow: hidden;
  background: #000;
  color: #f4f4f1;
}

.kb-get-photo {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  height: 58%;
  object-fit: cover;
  object-position: 50% 60%;
  pointer-events: none;
}

.kb-get-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 22vh;
}

.kb-get-icon { width: clamp(150px, 16vw, 220px); height: auto; margin-bottom: 26px; }
.kb-get .kb-req { color: #8b8b86; }

footer { margin-top: 0; }

/* On silver the chrome pill vanishes into the canvas, so the solid action is
   graphite there, the color of the board and the letter on the cap. */
:root[data-look="silver"] .kb-pill-solid { background: var(--text); border-color: var(--text); color: #f4f4f1; }
@media (hover: hover) { :root[data-look="silver"] .kb-pill-solid:hover { background: #2a2a28; } }
:root[data-look="silver"] .kb-get .kb-pill-solid { background: #f8f8f8; border-color: #f8f8f8; color: #000; }

/* ------------------------------------------------------------- the footer */

/* Black in every look: the backdrop is a photograph shot on black, and on the
   silver canvas the white wordmark had disappeared entirely. */
footer { background: #000; border-top: 0; color: #f4f4f1; }

/* The wordmark first and readable, the credits under it on the bottom left,
   so the two never share a line. */
/* Credits first, then the wordmark under them: the line reads at the top of the
   footer and the mark still runs off the bottom edge. */
.fwrap { display: flex; flex-direction: column; padding-bottom: 0; }
.bigmark { order: 2; margin: 0; line-height: 0.86; }
.bigmark span { opacity: 0.92; }
.bigmark .soft { opacity: 0.25; }
.credits-line {
  order: 1;
  align-self: flex-start;
  max-width: 62ch;
  margin: 0 0 clamp(26px, 4vw, 44px);
  padding-bottom: 0;
  color: #8b8b86;
}
.credits-line a { color: #b5b5b0; }

/* A switch section form is mounted: the tile grid stays in the DOM, because
   app.js and the picker both read selection from it, but it is not shown. */
:root[data-lib] .library .groups { display: none; }

/* ------------------------------------------------------- the pressable cap */

.kb-cap {
  position: relative;
  display: block;
  margin: 0 0 22px -10px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.kb-cap .kb-icon { position: relative; z-index: 1; margin: 0; }

/* The contact shadow on the desk under the cap. Light on a real object, which
   is the one place a gradient is allowed. */
.kb-cap-floor {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 4%;
  height: 16%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(0 0 0 / 0.28), transparent);
  pointer-events: none;
}

.kb-cap:focus-visible { outline: none; box-shadow: none; }
.kb-cap:focus-visible .kb-icon { filter: drop-shadow(0 0 0 var(--text)) drop-shadow(0 0 2px var(--muted)); }

@media (prefers-reduced-motion: no-preference) {
  .kb-cap .kb-icon { transition: transform 150ms var(--kb-ease); }
  .kb-cap-floor { transition: transform 150ms var(--kb-ease), opacity 150ms var(--kb-ease); }
  /* Down fast, up with the spring of the curve: a key bottoms out instantly. */
  .kb-cap.is-down .kb-icon, .kb-cap.is-down .kb-cap-floor { transition-duration: 40ms; }
}

/* Travel is about 3% of the cap, 6px at 220px wide, which reads as a key going
   down rather than a button shrinking. */
.kb-cap.is-down .kb-icon { transform: translateY(3%) scale(0.99); }
.kb-cap.is-down .kb-cap-floor { transform: scaleX(0.9); opacity: 0.7; }

/* ------------------------------------------------ the stacked hero, <=980px */

/* One column: the pitch is the hero and the demo Mac follows it. Left aligned
   and set big, the way a product page opens, not a centered header stack. */
@media (max-width: 980px) {
  .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-top: clamp(84px, 14vw, 120px);
  }

  .kb-pitch { order: -1; padding-top: 0; }

  /* The icon PNG has a transparent margin of 8% of its width (measured off the
     alpha channel), so pulling left by exactly that puts the chrome on the
     text edge at every width. */
  .kb-cap { margin: 0 0 clamp(16px, 4vw, 28px) calc(min(50vw, 250px) * -0.08); }
  .kb-pitch .kb-icon { width: min(50vw, 250px); height: auto; margin: 0; }

  .kb-pitch h1 {
    max-width: 11ch;
    font-size: clamp(46px, 13.4vw, 104px);
    line-height: 0.92;
    letter-spacing: -0.052em;
  }

  .kb-pitch .lede {
    max-width: 30ch;
    margin-top: clamp(16px, 3.4vw, 24px);
    font-size: clamp(17px, 4.5vw, 21px);
    line-height: 1.4;
  }

  .kb-pitch .kb-pill-big {
    height: 56px;
    margin-top: clamp(24px, 6vw, 34px);
    padding: 0 28px;
    font-size: 16px;
  }

  .kb-pitch .kb-req { margin-top: 14px; }

}

@media (max-width: 560px) {
  .kb-pitch .kb-pill-big { align-self: stretch; }
}

/* =======================================================================
   One radius system. Surfaces 20, the things inside a surface 10 (20 minus
   a 10px inset, so the corners run concentric), keys 8, buttons fully round.
   The demo Mac uses the same numbers rather than its own.
   ======================================================================= */

:root {
  --r-card: 20px;
  --r-in: 10px;
  --r-key: 8px;
  --deck-pad: 12px;
}

/* ------------------------------------------------------------ two bands */

.kb-play {
  margin-top: clamp(64px, 10vw, 130px);
  padding: clamp(48px, 8vw, 100px) 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.kb-play .test { margin-top: 0; }

/* -------------------------------------------------------- the board fits */

/* The unit now subtracts the board's own padding, so the board is exactly the
   content column wide at every size and never runs off an edge. */
.deck, .kb-floor {
  --u: calc((min(100vw, var(--max)) - 2 * var(--pad) - 2 * var(--deck-pad)) / 14.625);
  --gap: 5px;
  --deckw: calc(14.625 * var(--u) - var(--gap));
}

.deck {
  width: calc(var(--deckw) + 2 * var(--deck-pad));
  margin-left: auto;
  margin-right: auto;
  padding: var(--deck-pad);
  border-radius: var(--r-card);
  box-shadow: none;
}

:root[data-look="silver"] .deck { box-shadow: none; }

.kb-floor { width: calc(var(--deckw) + 2 * var(--deck-pad)); }

.key { border-radius: var(--r-key) var(--r-key) calc(var(--r-key) / 2) calc(var(--r-key) / 2); }
.stack .key { border-radius: calc(var(--r-key) * 0.75) calc(var(--r-key) * 0.75) 3px 3px; }

@media (max-width: 560px) {
  .deck { margin-left: auto; }
  .kb-floor { padding: 0; }
}

/* ------------------------------------------------------------- tone card */

.tone-card {
  padding: 10px;
  gap: 10px;
  border-radius: var(--r-card);
  background: var(--surface);
}


/* The taps are keys, so they take the key shape, not a 3px box. */
.tap {
  border-radius: var(--r-key) var(--r-key) calc(var(--r-key) / 2) calc(var(--r-key) / 2);
  background: var(--surface);
}

/* ------------------------------------------------------ library, picker */

.library .sw-row { border-radius: var(--r-card); }
.kb-list { border-radius: var(--r-card); }
.kb-list-item { border-radius: calc(var(--r-card) - 6px); }

/* The video replaces the still; same box, same crop. */
video.kb-get-photo { display: block; background: #000; }

/* The download section stacks: icon, button and line first, the keys video
   under them in normal flow. Positioned over the video, the icon and button
   landed on the return key at 1440x900. */
.kb-get {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  padding: clamp(64px, 9vw, 110px) 0 0;
}
.kb-get-inner { margin: 0 auto clamp(28px, 4vw, 48px); padding: 0 var(--pad); }
.kb-get-photo {
  position: static;
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 313;
  object-fit: cover;
}
.kb-get-inner { order: -1; }

/* The download section sits straight under the black turntable band. The old
   top margin let the light canvas show between the two as a white bar. */
.kb-get { margin-top: 0; }

/* ------------------------------------------------------- browsing switches */

.kb-filter {
  position: sticky;
  top: 62px;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 4px;
  padding: 10px 0;
  background: var(--void);
}

.kb-filter-btn {
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: color 140ms var(--kb-ease), border-color 140ms var(--kb-ease);
}

@media (hover: hover) { .kb-filter-btn:hover { color: var(--text); border-color: var(--edge); } }

.kb-filter-btn[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--void); }
.kb-filter-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--void), 0 0 0 4px var(--muted); }

.kb-count { margin-left: auto; align-self: center; color: var(--dim); font-size: 13px; font-variant-numeric: tabular-nums; }

.library .sw-row[hidden] { display: none; }

/* The maker reads on the tile, so a filtered view still says what it is. */
.library .sw-row .kb-maker {
  color: var(--dim);
  font-size: 12px;
  letter-spacing: -0.005em;
}

.library .sw-row.is-on .kb-maker { color: var(--void); opacity: 0.65; }

/* =======================================================================
   Finish pass, 2026-10-04. CoolDock (cooldock.app) is the bar for craft:
   the Mac is a real black object, not a wireframe; the switches are shot
   like Teenage Engineering's frekvens grid, every object on one studio
   sweep the colour of the page; the footer keeps one thing, the keys.
   ======================================================================= */

/* ---------------------------------------------------------- dark nav */

.kb-bar {
  background: #121211;
  border-bottom: 1px solid #000;
  backdrop-filter: none;
  color: #f4f4f1;
}
.kb-bar .wordmark { color: #f4f4f1; }
.kb-claim { padding: 0; border: 0; border-radius: 0; color: #a1a19b; }   /* 7.3:1 on the bar */
.kb-claim b { color: #f4f4f1; font-weight: 600; }
.kb-bar .tally { color: #74746f; }
.kb-bar .tally-n { color: #f4f4f1; }
:root[data-look="silver"] .kb-bar .kb-pill-solid { background: #f4f4f1; border-color: #f4f4f1; color: #121211; }
@media (hover: hover) { :root[data-look="silver"] .kb-bar .kb-pill-solid:hover { background: #ffffff; } }
.kb-bar .kb-pill:focus-visible { box-shadow: 0 0 0 2px #121211, 0 0 0 4px #a1a19b; }

/* The Apple mark sits on the text's cap height, optically, not the box centre. */
.kb-apple { width: 15px; height: 15px; margin-top: -3px; flex: none; }
.kb-pill-big .kb-apple { width: 18px; height: 18px; }

/* --------------------------------------------------------- it's free */

.kb-cta { display: flex; align-items: center; gap: 20px; margin-top: 28px; }
.kb-pitch .kb-cta .kb-pill-big { margin-top: 0; }
.kb-free { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.kb-pitch .kb-req { max-width: 40ch; }

@media (max-width: 980px) {
  .kb-cta { margin-top: clamp(24px, 6vw, 34px); }
  .kb-pitch .kb-cta .kb-pill-big { margin-top: 0; }
}
@media (max-width: 560px) {
  .kb-cta { flex-direction: column; align-items: stretch; gap: 12px; }
  .kb-free { text-align: center; }
}

/* -------------------------------------- twenty one, on one studio sweep */

/* Teenage Engineering's product sheet: one hairline grid, every object shot the
   same way on the same sweep, the name under it and nothing else. The sweep is
   levelled to the canvas (scripts/site-switches.py), so the cells have no edge
   but the hairline. */
.library .groups {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  margin-top: 34px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--line);
}

.library .sw-row {
  position: relative;
  align-items: stretch;
  gap: 2px;
  padding: 0 0 16px;
  border: 0;
  border-radius: 0;
  background: var(--void);
  text-align: left;
  cursor: pointer;
}

.sw-shot { display: block; aspect-ratio: 1; overflow: hidden; }
.sw-shot img { width: 100%; height: 100%; object-fit: cover; }

.library .sw-name, .library .sw-row .kb-maker { padding: 0 14px; }
.library .sw-name { font-size: 14px; font-weight: 500; line-height: 1.3; }

/* The waveform is the playing tile's state, not decoration on every tile. */
.library .sw-row .kb-wave { display: none; }
.library .sw-row.is-on .kb-wave {
  display: block;
  width: calc(100% - 28px);
  height: 16px;
  margin: 8px 14px 0;
  fill: var(--text);
}

@media (hover: hover) {
  .library .sw-row:hover { border-color: transparent; }
}

.library .sw-row:active { transform: none; }
.library .sw-row:active .sw-shot img { transform: scale(0.97); }

.library .sw-row.is-on { background: var(--void); box-shadow: inset 0 0 0 1.5px var(--text); }
.library .sw-row.is-on .sw-name { color: var(--text); font-weight: 600; }
.library .sw-row.is-on .kb-maker { color: var(--muted); opacity: 1; }
.library .sw-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--text); }

@media (prefers-reduced-motion: no-preference) {
  .sw-shot img { transition: transform 200ms var(--kb-ease); }
  .library .sw-row:active .sw-shot img { transition-duration: 60ms; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .library .sw-row:hover .sw-shot img { transform: scale(1.04); }
}

/* ponytail: 21 sets, so only 7 or 3 across fill every row. A set added or
   dropped changes that; recount before changing either number. */
@media (max-width: 900px)  { .library .groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .library .groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .library .sw-name, .library .sw-row .kb-maker { padding: 0 10px; }
  .library .sw-name { font-size: 13px; }
}


/* ------------------------------------------------ the end: one thing */


.fwrap { padding: clamp(36px, 5vw, 56px) var(--pad) clamp(36px, 5vw, 56px); }
.credits-line { margin-bottom: 18px; }
.flinks { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13px; }
.flinks a { color: #b5b5b0; text-decoration: none; }
@media (hover: hover) { .flinks a:hover { color: #f4f4f1; } }

/* ------------------------------------------------------------ phones */

/* The board shrinks to fit a phone, which left keys 14px tall with their
   legends clipped. Taller keys on a phone, at the legend's floor size. */
@media (max-width: 560px) {
  .deck .key { height: calc(var(--u) * 1.3 - var(--gap)); font-size: 9px; }
  .deck .stack .key { height: calc((var(--u) * 1.3 - var(--gap) - var(--gap)) / 2); }
  .kb-cta { align-self: stretch; }
}

/* The bar is opaque now, so the hero has to start below it. 68px is the bar
   (40px button and 14px padding top and bottom); the rest is air. */
.hero { padding-top: calc(68px + clamp(28px, 5vh, 56px)); }
@media (max-width: 980px) { .hero { padding-top: calc(68px + clamp(24px, 6vw, 44px)); } }


/* ------------------------------------------------- the desk: pad + board */

/* The pad sits on the left of the board it shapes, the way a volume knob sits
   on the left of a keyboard. The board's unit is solved for what is left of
   the row, so it still fits edge to edge. */
.kb-play { --desk: min(100vw - 2 * var(--pad), 1320px); --side: clamp(220px, 21vw, 300px); }
.kb-play .test { max-width: calc(var(--desk) + 2 * var(--pad)); }

.kb-desk {
  display: grid;
  grid-template-columns: var(--side) minmax(0, 1fr);
  gap: 16px;
  width: var(--desk);
  margin: clamp(24px, 3vw, 40px) auto 0;
}

.kb-desk .deck, .kb-desk .kb-floor {
  /* + gap: the last key carries none, so without it the board ends a gap short
     of the column and of the knob card under it. */
  --u: calc((var(--desk) - var(--side) - 16px - 2 * var(--deck-pad) + var(--gap)) / 14.625);
}

/* The board and the switcher are the grid's own items, so the card stretches
   to exactly the board's height and the switcher sits under the board only. */
.kb-desk-main { display: contents; }
.kb-desk .tone-card { grid-column: 1; grid-row: 1; padding: 10px; }
.kb-desk .deck { grid-column: 2; grid-row: 1; margin: 0; }
.kb-desk .kb-floor { grid-column: 2; grid-row: 2; }

@media (max-width: 820px) {
  .kb-desk { grid-template-columns: minmax(0, 1fr); }
  .kb-desk .deck, .kb-desk .kb-floor { --u: calc((var(--desk) - 2 * var(--deck-pad) + var(--gap)) / 14.625); grid-column: 1; }
  .kb-desk .kb-floor { grid-row: 2; }
  .kb-desk .tone-card { grid-column: 1; grid-row: 3; height: 240px; max-width: none; margin-top: 12px; }
}

/* --------------------------------------------- switches, edge to edge */

.library { max-width: none; padding-left: 0; padding-right: 0; }
.library h2, .library .sub { max-width: var(--max); margin-left: auto; margin-right: auto; padding: 0 var(--pad); }
.library .sub { display: block; margin-top: 12px; }
.library .groups { border-left: 0; border-right: 0; border-radius: 0; }

.sw-shot { position: relative; isolation: isolate; }

/* On hover the switch lifts off the sheet: a shadow in its own shape, no box. */
@media (hover: hover) {
  .library .sw-row:hover .sw-shot img { filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.8)); }
}
@media (prefers-reduced-motion: no-preference) {
  .library .sw-row .sw-shot img { transition: transform 200ms var(--kb-ease), filter 200ms var(--kb-ease); }
}

/* ------------------------------------------------------- the very end */

/* Only the chrome keys, straight into the footer. */
.kb-get { padding-top: 0; }

footer { overflow: hidden; }
.fwrap { max-width: none; padding: clamp(28px, 4vw, 44px) var(--pad) 0; }
.credits-line { max-width: none; margin: 0 0 6px; font-size: 12px; line-height: 1.6; font-weight: 400; }
.flinks { order: 2; gap: 4px 20px; font-size: 12px; color: #8b8b86; }

/* The wordmark, half below the fold of the page. Each letter is a key. */
.bigword {
  display: flex;
  justify-content: center;
  margin: clamp(20px, 3vw, 40px) 0 -0.42em;
  font-size: clamp(110px, 27vw, 420px);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.055em;
  user-select: none;
}
.bigword span {
  display: block;
  background: linear-gradient(180deg, #ffffff 0%, #b9b9b4 38%, #4a4a47 52%, #e9e9e6 64%, #8c8c88 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bigword span.is-down { transform: translateY(0.035em); filter: brightness(0.82); }
@media (prefers-reduced-motion: no-preference) {
  .bigword span { transition: transform 160ms var(--kb-ease), filter 160ms var(--kb-ease); }
  .bigword span.is-down { transition-duration: 40ms; }
}

/* =======================================================================
   Dark, 2026-10-04. The page goes back to the pure black it was first built
   on (style.css's tokens), because every chrome render is shot on #000 and
   now meets the page with no seam.
   ======================================================================= */

/* ------------------------------------------------------ dark bands */

/* The band is the page: no lighter ground behind the test. */
.kb-play { border: 0; background: #000; }
.kb-desk .tone-card { background: #161615; border-color: #232322; }

/* The switch sheet is dark like the page; the chrome is the hover. */
.library .groups {
  --void: #0b0b0a;
  --surface: #161615;
  --text: #f4f4f1;
  --muted: #8b8b86;
  --dim: #5c5c58;
  --line: #1c1c1b;
  border-top: 1px solid #1c1c1b;
  background: #1c1c1b;
}

.kb-get-title {
  margin-bottom: 26px;
  font-size: clamp(44px, 7vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: #f4f4f1;
}

/* =======================================================================
   Liquid metal, 2026-10-05. Paper's shader (chrome.js, vendor/paper) in the
   headline's letters and the header download's rim. The fake Mac is gone, so
   the hero is the cap, the line and the button, centred on the cap.
   ======================================================================= */

/* ------------------------------------------------- the bar melts away */

/* The fill and the blur sit on a layer that runs 32px past the bar and fades
   out, so the bar has no bottom edge. Not on the bar itself: a backdrop filter
   there would stop this one seeing the page. */
.kb-bar { isolation: isolate; background: none; backdrop-filter: none; border-bottom: 0; }
.kb-bar::before {
  content: "";
  position: absolute;
  inset: 0 0 -32px;
  z-index: -1;
  background: rgb(0 0 0 / 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-mask-image: linear-gradient(#000 calc(100% - 44px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 44px), transparent);
  pointer-events: none;
}

/* ------------------------------------------------------- metal, shared */

/* Paper's mount rules, moved here from the <style> it would have injected. */
[data-paper-shader] { isolation: isolate; position: relative; }
[data-paper-shader] canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  contain: strict;
}
.lm-layer { position: absolute; pointer-events: none; }

/* ----------------------------------------------------- the header rim */

/* The metal fills the pill and a black face covers all but 2px of it. */
.kb-pill-metal {
  position: relative;
  isolation: isolate;
  border: 0;
  background: #f4f4f1;
  color: #000;
  font-weight: 600;
}
.kb-pill-metal .lm-layer { inset: 0; z-index: -2; border-radius: inherit; overflow: hidden; }
.kb-pill-metal.is-metal { background: none; color: #f4f4f1; }
.kb-pill-metal.is-metal::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  border-radius: inherit;
  background: #000;
}
@media (hover: hover) { .kb-pill-metal.is-metal:hover::before { background: #161615; } }
.kb-pill-metal:active { transform: scale(0.97); }

/* ------------------------------------------------------- the headline */

/* The metal is drawn into the letters' own shapes; the real text stays on top,
   transparent, so it still selects and reads to a screen reader. The layer
   overhangs the box so a descender is never clipped. */
.lm-text { position: relative; isolation: isolate; }
.lm-text .lm-layer { inset: -0.2em -0.1em; z-index: -1; }
.lm-text.is-metal { color: transparent; }

/* ---------------------------------------------------- the hero, alone */

.hero {
  display: flex;
  justify-content: center;
  padding: calc(68px + clamp(24px, 4vh, 48px)) var(--pad) clamp(64px, 9vh, 110px);
}
.kb-pitch { align-items: center; max-width: none; padding: 0; text-align: center; }
.kb-cap { margin: 0 0 clamp(14px, 2vh, 24px); }
.kb-pitch .kb-icon { width: clamp(120px, 13vw, 176px); height: auto; margin: 0; }

.kb-pitch h1 {
  max-width: none;
  font-size: clamp(48px, 9vw, 136px);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.05em;
}

.kb-cta { justify-content: center; gap: 18px; margin-top: clamp(28px, 4vh, 44px); }
.kb-free { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; color: #a1a19b; }

@media (max-width: 980px) {
  .hero { padding-top: calc(68px + clamp(24px, 6vw, 40px)); }
  .kb-cap { margin: 0 0 clamp(14px, 4vw, 24px); }
  .kb-pitch .kb-icon { width: clamp(110px, 30vw, 160px); }
  /* "sound like a switch" is 7.6em wide, so this is the size where it still
     fits between the gutters; the two lines never break into three. */
  .kb-pitch h1 { font-size: min(12.4vw, calc((100vw - 48px) / 7.75), 88px); white-space: nowrap; }
}
@media (max-width: 560px) {
  .kb-cta { flex-direction: column; align-items: center; gap: 12px; align-self: center; }
  .kb-pitch .kb-cta .kb-pill-big { align-self: stretch; }
}

/* -------------------------------------------------- it's free, orbited */

.kb-get { margin: clamp(56px, 8vw, 120px) 0; padding: 0 var(--pad); }
.kb-get-inner {
  position: relative;
  display: grid;
  place-items: center;
  margin: 0;
  padding: clamp(150px, 20vw, 230px) 0;
}
.kb-get-title { position: relative; z-index: 1; margin-bottom: 26px; }
.kb-get .kb-pill { position: relative; z-index: 1; }

.halo { position: absolute; inset: 0 calc(-1 * var(--pad)); pointer-events: none; }
.halo img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(52px, 6vw, 84px);
  height: auto;
  will-change: transform;
}
.halo img[src$="space.webp"] { width: clamp(150px, 17vw, 240px); }
.halo img[src$="ret.webp"] { width: clamp(64px, 7.4vw, 104px); }

/* --------------------------------------------- the wordmark, mostly up */

.bigword { margin-bottom: -0.14em; }

/* ----------------------------------------------- the wordmark, in metal */

/* One shader for the word; a pressed letter is its own shape in shadow. */
.bigword { position: relative; isolation: isolate; }
.bigword .lm-layer { inset: -0.1em -0.05em; z-index: -1; }
.bigword.is-metal span { background: none; color: transparent; }
.bigword.is-metal span.is-down { transform: none; filter: none; }

/* ------------------------------- the floor, from the page's left edge */

/* The switcher starts where the tone card does. */
.kb-desk .kb-floor { grid-column: 1 / -1; width: auto; margin-left: 0; margin-right: var(--gap); }

/* Previous, the name, next: one pill, three targets. */
.kb-cycle {
  display: flex;
  align-items: center;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}
.kb-cycle .kb-pick { display: inline-flex; align-items: center; height: 100%; min-width: 11.5em; justify-content: center; padding: 0 4px; border: 0; background: none; cursor: default; }
.kb-step {
  display: grid;
  place-items: center;
  width: 44px;
  height: 100%;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
@media (hover: hover) { .kb-step:hover { color: var(--text); background: var(--raise); } }
.kb-step:active { transform: scale(0.94); }
.kb-step:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--void), 0 0 0 4px var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .kb-step { transition: color 140ms var(--kb-ease), background-color 140ms var(--kb-ease), transform 100ms var(--kb-ease); }
}

/* ------------------------------------ switch tiles hold their height */

/* The name keeps its weight, so selecting one (hover dwell does) never resizes
   the row. */
.library .sw-row.is-on .sw-name { font-weight: 500; }

/* ------------------------------------------------- the test's header */

.test-bar { align-items: flex-end; gap: 24px; }
.test-head .sub { margin-top: 12px; }

/* The run has stopped: the words blur and a redo card sits over them. Above the
   sink, which otherwise takes every click on the words. */
.test.is-paused .stat b, .test.is-done .stat b { color: var(--muted); }
.words-scroll { transition: filter 0s; }
.test.is-paused .words-scroll, .test.is-done .words-scroll { filter: blur(8px); opacity: 0.6; }
.redo {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px 0 14px;
  border: 1px solid #2a2a28;
  border-radius: var(--r-in);
  background: #161615;
  color: var(--text);
  font: 500 15px/1 inherit;
  letter-spacing: -0.01em;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%);
}
.redo svg { width: 16px; height: 16px; }
.test.is-paused .redo, .test.is-done .redo { opacity: 1; visibility: visible; }
.redo:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--void), 0 0 0 4px var(--text); }
@media (hover: hover) { .redo:hover { background: #20201f; } }
.redo:active { transform: translate(-50%, -50%) scale(0.96); }
@media (prefers-reduced-motion: no-preference) {
  .words-scroll { transition: transform 0.16s var(--ease-out), filter 200ms var(--kb-ease), opacity 200ms var(--kb-ease); }
  .redo { transition: opacity 200ms var(--kb-ease), visibility 200ms, transform 110ms var(--kb-ease); }
}

/* Below the two column desk: the switcher runs the board's width, centred. */
@media (max-width: 820px) {
  .kb-desk .kb-floor { margin-right: 0; }
  .kb-floor-label { display: none; }
}

/* On a phone the switcher takes what restart leaves, so nothing runs off. */
@media (max-width: 820px) {
  .kb-floor { gap: 12px; }
  .kb-switcher, .kb-cycle { flex: 1; min-width: 0; }
  .kb-cycle .kb-pick { flex: 1; min-width: 0; }
}

/* --------------------------------- the footer: note, wordmark, links */

/* The two small blocks flank the wordmark on its own line. On a phone the word
   is the whole width, so they sit above it, one to each side. */
.kb-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "note word links";
  align-items: center;
  column-gap: 24px;
}
.kb-foot .bigword { grid-area: word; }
.foot-note, .foot-links { margin: 0; font-size: 12px; line-height: 1.7; color: #8b8b86; }
.foot-note, .foot-links { align-self: end; padding-bottom: clamp(20px, 3vw, 32px); }
.foot-note { grid-area: note; justify-self: start; padding-left: var(--pad); }
.foot-links { grid-area: links; justify-self: end; display: flex; flex-direction: column; align-items: flex-end; padding-right: var(--pad); }
.foot-links a, .foot-note a { color: #b5b5b0; text-decoration: none; }
@media (hover: hover) { .foot-links a:hover, .foot-note a:hover { color: #f4f4f1; } }
.foot-note a:focus-visible, .foot-links a:focus-visible { outline: 0; border-radius: 4px; box-shadow: 0 0 0 2px #000, 0 0 0 4px #6f6f6c; }

@media (max-width: 760px) {
  .kb-foot { grid-template-columns: 1fr 1fr; grid-template-areas: "note links" "word word"; align-items: start; padding-top: clamp(28px, 4vw, 44px); }
  .foot-note, .foot-links { align-self: start; padding-bottom: 0; }
  .foot-links { flex-direction: row; gap: 18px; }
}

/* ------------------------------------------- the knobs, Moog skirt knobs */

/* Volume big on top, tone and body under it. --a is the pointer angle; only
   .knob-rot turns, so the chrome's light stays put like a lamp over the desk. */
.tone-card.knobs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto;
  gap: 6px 10px;
  padding: 18px 12px 14px;
}
.kn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.kn-big { grid-column: 1 / -1; }
.kn-name, .kn-ends { font-size: 12px; color: var(--dim); letter-spacing: -0.01em; }
.kn-ends { display: flex; justify-content: space-between; width: 92px; }

.knob {
  --s: 62px;
  position: relative;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #232321, #0e0e0d 72%);
  box-shadow: 0 0 0 1px #000, 0 6px 14px rgba(0, 0, 0, 0.75);
  cursor: ns-resize;
  touch-action: none;
}
.kn-big .knob { --s: 96px; }
.knob:focus-visible { outline: 0; box-shadow: 0 0 0 1px #000, 0 0 0 3px #161615, 0 0 0 5px #6f6f6c; }
.knob-cap, .knob-rot { position: absolute; border-radius: 50%; pointer-events: none; }
.knob-cap {
  inset: 26%;
  background: conic-gradient(from 30deg, #e6e6e1, #7d7d78 22%, #f4f4f0 40%, #808079 62%, #d4d4cf 82%, #e6e6e1);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.knob-rot { inset: 0; transform: rotate(var(--a, 0deg)); }
.knob-rot i { position: absolute; left: 50%; top: 4%; width: 2.5px; height: 20%; margin-left: -1.25px; border-radius: 1px; background: #f4f4f1; }
.knob-ticks { position: absolute; inset: -9px; pointer-events: none; }
.knob-ticks i {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1.5px;
  height: 4px;
  margin-left: -0.75px;
  background: #4a4a46;
  transform-origin: 50% calc(var(--s) / 2 + 9px);
}
.knob-ticks i:first-child, .knob-ticks i:last-child { height: 7px; background: #7a7a75; }

/* ------------------------------ the board, a MacBook's: black keys in a well */

.deck { background: linear-gradient(#3b3b3d, #2a2a2c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.key { background: #0b0b0b; box-shadow: 0 0 0 1px #1a1a1b; color: #cfcfcb; border-radius: 5px; }
.stack .key { border-radius: 3px; }
.key.on { background: #f8f8f8; color: #000; }
/* The arrow glyphs run large in every font; a MacBook prints them small. */
.key[data-kc="123"], .key[data-kc="124"], .stack .key { font-size: 8px; }

/* ------------------------------- switches, straight on the page black */

/* No tile fill and no grid lines: the switches sit on the page. The selected
   one is told by its name, the focus ring is for the keyboard only. */
.library .groups { gap: 0; border: 0; background: none; }
.library .sw-row, .library .sw-row.is-on { background: transparent; box-shadow: none; }
.library .sw-row:focus-visible { box-shadow: inset 0 0 0 2px var(--text); }

/* ------------------------------------------- narrow: board and knobs */

/* Legends sized off the key, not the 16px button default they fell back to,
   which overflowed the function row. */
.deck .key { font-size: clamp(9px, calc(var(--u) * 0.3), 14px); }
.deck .row-fn .key { font-size: clamp(8px, calc(var(--u) * 0.26), 12px); }
.deck .key[data-kc="123"], .deck .key[data-kc="124"], .deck .stack .key { font-size: 8px; }

/* Under the board the knobs go into one row, volume in the middle. */
@media (max-width: 820px) {
  .kb-desk .tone-card.knobs {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(20px, 7vw, 56px);
    height: auto;
    padding: 22px 12px 16px;
  }
  .tone-card.knobs .kn-big { order: 2; }
  .tone-card.knobs .kn:nth-child(2) { order: 1; }
  .tone-card.knobs .kn:nth-child(3) { order: 3; }
}
@media (max-width: 420px) {
  .kb-desk .tone-card.knobs { gap: 12px; padding-left: 8px; padding-right: 8px; }
  .tone-card.knobs .kn-big .knob { --s: 80px; }
  .tone-card.knobs .knob { --s: 54px; }
  .tone-card.knobs .kn-name, .tone-card.knobs .kn-ends { font-size: 11px; }
  .tone-card.knobs .kn-ends { width: auto; gap: 10px; }
  /* "cmd" clipped to "cmc" at 9px on a 375 wide board. */
  .deck .key { font-size: 8px; }
}

/* The picked switch sits on liquid metal (chrome.js), behind its picture only,
   so its name stays on black. Paper fades the backdrop out at the edges, which
   is what rounds it. A dark shadow keeps the switch off the bright bands. */
.sw-metal { inset: 0; z-index: -1; }
.library .groups.is-metal .sw-row.is-on .sw-shot img { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.85)); }

/* ------------------------------------------- the two section titles, big */

/* Both titles at display size and centred; the run's figures sit under its
   title, centred with it, on every width. */
.test-bar { flex-direction: column; align-items: center; gap: 14px; }
.test-head { text-align: center; }
.test-head h2, .library h2 {
  font-size: clamp(36px, 6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-align: center;
}
.test-bar .stats { justify-content: center; }

/* The headline is two lines, "Make every key / sound like a switch", until a
   phone is too narrow for that to stay big; then three, "Make every / key
   sound / like a switch". Which breaks show decides it. The widest of the
   three is 4.87em. */
.kb-pitch h1 .br-n { display: none; }
@media (max-width: 400px) {
  .kb-pitch h1 .br-w { display: none; }
  .kb-pitch h1 .br-n { display: inline; }
  .kb-pitch h1 { font-size: calc((100vw - 48px) / 5); }
}