:root {
    --bg: #ffffff;
    --panel: #f6f7f8;
    --edge: #e6e8ec;
    --ink: #111318;
    --dim: #5b6472;
    --mono: #646b78;
    --teal: #0c7d70;
    --copper: #a05f33;
    --bezel: #16181d;
    /* theme-varying details, so dark mode only ever overrides tokens */
    --hair-dev: transparent;
    --hair-shot: transparent;
    --hair-frame: transparent;
    --hair-ctl: #c9ced7;
    --shadow-dev: 0 24px 60px rgba(17,19,24,.18);
    --shadow-phone: 0 20px 50px rgba(17,19,24,.16);
    --perf-dot: #dfe2e7;
    --dot-off: #3a3f48;
    --dot-on: #d7dade;
    --pads-op: .8;
    --ic-sun: none;
    --ic-moon: block;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #0a0b0d;
      --panel: #131418;
      --edge: #22252d;
      --ink: #e9eaec;
      --dim: #a3aab5;
      --mono: #8a919c;
      --teal: #2ec4b0;
      --copper: #d08a52;
      --bezel: #101114;
      --hair-dev: #2b2e36;
      --hair-shot: #23262d;
      --hair-frame: #1d2026;
      --hair-ctl: #333844;
      --shadow-dev: 0 24px 60px rgba(0,0,0,.55);
      --shadow-phone: 0 20px 50px rgba(0,0,0,.5);
      --perf-dot: #1e2128;
      --dot-off: #3a3f48;
      --dot-on: #e6e8ec;
      --pads-op: .5;
      --ic-sun: block;
      --ic-moon: none;
    }
  }
  :root[data-theme="dark"] {
    --bg: #0a0b0d;
    --panel: #131418;
    --edge: #22252d;
    --ink: #e9eaec;
    --dim: #a3aab5;
    --mono: #8a919c;
    --teal: #2ec4b0;
    --copper: #d08a52;
    --bezel: #101114;
    --hair-dev: #2b2e36;
    --hair-shot: #23262d;
    --hair-frame: #1d2026;
    --hair-ctl: #333844;
    --shadow-dev: 0 24px 60px rgba(0,0,0,.55);
    --shadow-phone: 0 20px 50px rgba(0,0,0,.5);
    --perf-dot: #1e2128;
    --dot-off: #3a3f48;
    --dot-on: #e6e8ec;
    --pads-op: .5;
    --ic-sun: block;
    --ic-moon: none;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  :focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px; }
  @media (forced-colors: active) { :focus-visible { outline: 2px solid Highlight; } }
  html { scroll-behavior: smooth; }
  section[id], #compatibility, #hosts, #privacy { scroll-margin-top: 18px; }
  body {
    background: var(--bg); color: var(--ink);
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    line-height: 1.6; -webkit-font-smoothing: antialiased;
  }
  .mono { font-family: "IBM Plex Mono", monospace; }
  a { color: inherit; }
  .wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
  .skip {
    position: absolute; left: -9999px; top: 8px;
    background: var(--ink); color: var(--bg); padding: 10px 16px;
    border-radius: 8px; text-decoration: none; font-size: 15px; z-index: 100;
  }
  .skip:focus { left: 28px; }

  /* Header */
  .top {
    display: flex; align-items: center; gap: 28px;
    padding: 26px 0; border-bottom: 1px solid var(--edge);
  }
  .logo {
    font-family: "IBM Plex Mono", monospace; font-weight: 600;
    font-size: 17px; letter-spacing: .28em; text-decoration: none;
  }
  .top nav { margin-left: auto; display: flex; align-items: center; gap: 32px; }
  /* the two icon buttons travel as one item, so they wrap together */
  .nav-tools { display: flex; align-items: center; gap: 14px; margin-left: auto; }
  .top nav a { text-decoration: none; font-size: 16px; color: var(--ink); }
  .top nav a:hover { color: var(--teal); }
  .repo-chip {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--hair-ctl); border-radius: 99px; padding: 6px 14px;
    font-family: "IBM Plex Mono", monospace; font-size: 12.5px; color: var(--dim);
  }
  .repo-chip svg { width: 15px; height: 15px; fill: currentColor; flex: none; }
  .repo-chip:hover { color: var(--teal); border-color: currentColor; }
  .theme-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0; cursor: pointer;
    background: none; color: var(--dim);
    border: 1px solid var(--hair-ctl); border-radius: 99px;
  }
  .theme-btn:hover { color: var(--teal); border-color: currentColor; }
  .theme-btn svg { width: 17px; height: 17px; fill: currentColor; }
  .theme-btn .ic-sun { display: var(--ic-sun); }
  .theme-btn .ic-moon { display: var(--ic-moon); }

  /* Hero */
  .hero {
    display: grid; grid-template-columns: 1.05fr .95fr;
    gap: 56px; align-items: center; padding: 88px 0 76px;
  }
  .eyebrow {
    font-family: "IBM Plex Mono", monospace; font-size: 14px;
    letter-spacing: .3em; color: var(--teal); margin-bottom: 22px;
  }
  h1 {
    font-size: clamp(40px, 5.6vw, 74px); font-weight: 700;
    line-height: 1.06; letter-spacing: -.015em;
  }
  .hero .sub {
    margin-top: 26px; font-size: 19px; color: var(--dim); max-width: 520px;
  }
  .hero .cta {
    margin-top: 34px; display: flex; gap: 16px 28px;
    flex-wrap: wrap; align-items: center;
  }
  .hero .cta a {
    font-weight: 600; font-size: 17px; text-decoration: none;
    border-bottom: 2px solid var(--teal); padding-bottom: 3px;
  }
  .hero .cta a:hover { color: var(--teal); }
  .hero .cta a.btn {
    background: var(--ink); color: var(--bg);
    border: 0; border-radius: 99px; padding: 14px 26px;
  }
  .hero .cta a.btn:hover { background: var(--teal); color: #fff; }
  .cta-note {
    margin-top: 18px; font-family: "IBM Plex Mono", monospace;
    font-size: 12.5px; color: var(--mono);
  }
  .cta-note a { color: var(--mono); text-decoration: underline; text-underline-offset: 2px; }
  .cta-note a:hover { color: var(--teal); }
  :root[data-theme="dark"] .hero .cta a.btn:hover { color: #0a0b0d; }

  /* the release the page is describing, linked to its notes */
  .ver-chip {
    display: inline-flex; align-items: center; gap: 10px;
    margin-bottom: 20px; padding: 5px 15px 5px 5px;
    border: 1px solid var(--hair-ctl); border-radius: 99px;
    font-family: "IBM Plex Mono", monospace; font-size: 12.5px;
    color: var(--dim); text-decoration: none;
  }
  .ver-chip:hover { color: var(--teal); border-color: currentColor; }
  .ver-chip .ver-n {
    background: var(--teal); color: var(--bg); border-radius: 99px;
    padding: 3px 10px; font-weight: 600; letter-spacing: .04em;
  }
  /* can I run it? — answered before the first scroll */
  .host-line {
    margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px;
    font-family: "IBM Plex Mono", monospace; font-size: 11.5px;
  }
  .host-line span {
    border: 1px solid currentColor; border-radius: 99px; padding: 3px 11px;
    letter-spacing: .14em; text-transform: uppercase;
  }
  .host-line b {
    align-self: center; font-weight: 400; color: var(--mono);
    letter-spacing: .14em; text-transform: uppercase;
  }
  .host-line .host-ok { color: var(--teal); }
  .host-line .host-no { color: var(--mono); }

  /* perfboard backdrop behind the device */
  .device-col {
    text-align: center; padding: 34px 0;
    background-image: radial-gradient(circle, var(--perf-dot) 1.3px, transparent 1.3px);
    background-size: 22px 22px; border-radius: 24px;
  }

  /* Device */
  .device {
    display: inline-block; background: var(--bezel);
    border: 1px solid var(--hair-dev);
    border-radius: 44px; padding: 18px;
    box-shadow: var(--shadow-dev);
  }
  .screen {
    position: relative; width: min(400px, 70vw); aspect-ratio: 1;
    container-type: inline-size;
  }
  .screen .frame {
    position: absolute; inset: 0; width: 100%; height: 100%;
    border: 1px solid var(--hair-frame);
    border-radius: 30px; opacity: 0; transition: opacity .6s ease;
  }
  .screen .frame.on { opacity: 1; }

  /* Live HTML replica of the Claude week screen — so the numbers can tick */
  .screen-live {
    background: #000; overflow: hidden; color: #fff; text-align: left;
    display: flex; flex-direction: column;
    padding: 6.2cqw 6.6cqw 4.6cqw;
    font-family: "IBM Plex Sans", system-ui, sans-serif;
  }
  .lv-head {
    display: flex; align-items: center; gap: 2.8cqw;
    padding-bottom: 3.4cqw; border-bottom: 1px solid #2b2e35;
  }
  .lv-ic svg { display: block; width: 7cqw; height: 7cqw; }
  .lv-name { font-weight: 700; font-size: 4.6cqw; letter-spacing: .22em; }
  .lv-right {
    margin-left: auto; font-weight: 600; font-size: 3.1cqw;
    letter-spacing: .14em; color: #c9ccd2;
  }
  .lv-sub {
    margin-top: 4cqw; font-size: 4.4cqw; font-weight: 600;
    letter-spacing: .18em; color: #9a9fa8;
  }
  .lv-big {
    font-size: 33cqw; font-weight: 700; line-height: 1.02;
    letter-spacing: -.01em; margin-top: 1.4cqw;
  }
  .lv-bar {
    position: relative; height: 5.6cqw; border-radius: 99px;
    background: #3a3d44; margin-top: 3cqw;
  }
  .lv-bar i { position: absolute; top: 0; bottom: 0; border-radius: 99px; }
  #lv-fill { left: 0; background: #a05a39; }
  #lv-today { background: #e8956b; }
  #lv-mark {
    position: absolute; top: -1cqw; bottom: -1cqw; width: .9cqw;
    background: #fff; border-radius: 2px;
  }
  .lv-row {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-top: 3cqw; font-weight: 700;
  }
  .lv-plus { color: #e8956b; font-size: 7.4cqw; }
  .lv-reset { font-size: 8cqw; }
  .lv-caps {
    display: flex; justify-content: space-between; margin-top: .6cqw;
    font-size: 3cqw; font-weight: 600; letter-spacing: .16em; color: #8b9098;
  }
  .lv-dots { display: flex; justify-content: center; align-items: center; gap: 2cqw; margin-top: auto; padding-top: 3cqw; }
  .lv-dots i { width: 1.7cqw; height: 1.7cqw; border-radius: 99px; background: #3a3d44; }
  .lv-dots i.on { width: 4.2cqw; background: #d7dade; }
  .dots { display: flex; justify-content: center; gap: 0; padding: 10px 0 0; }
  .dots button {
    width: 24px; height: 24px; padding: 0; border: 0; cursor: pointer;
    background: none; border-radius: 50%; display: grid; place-items: center;
  }
  .dots button::after {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--dot-off);
  }
  .dots button.on { background: none; }
  .dots button.on::after { background: var(--dot-on); }
  .device-cap {
    margin-top: 20px; font-family: "IBM Plex Mono", monospace;
    font-size: 13px; color: var(--mono); line-height: 1.7;
  }

  /* Sections */
  section { padding: 78px 0; border-top: 1px solid var(--edge); }
  .kicker {
    font-family: "IBM Plex Mono", monospace; font-size: 13px;
    letter-spacing: .3em; color: var(--teal); margin-bottom: 14px;
  }
  .kicker .num { color: var(--copper); margin-right: 14px; }
  h2 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 700; letter-spacing: -.01em; }
  .lede { margin-top: 14px; color: var(--dim); font-size: 17.5px; max-width: 640px; }

  /* Demo */
  .demo-phones {
    display: flex; gap: 26px; flex-wrap: wrap;
    justify-content: center; margin-top: 34px;
  }
  .demo-frame {
    background: var(--bezel); border: 1px solid var(--hair-dev);
    border-radius: 34px; padding: 12px;
    box-shadow: var(--shadow-phone);
  }
  .demo-frame iframe {
    display: block; width: min(270px, 76vw); aspect-ratio: 9 / 16;
    border: 0; border-radius: 24px; background: #000;
  }
  .demo-label {
    margin-top: 12px; text-align: center;
    font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--mono);
    letter-spacing: .08em;
  }
  .demo-note { font-family: "IBM Plex Mono", monospace; font-size: 13px; color: var(--mono); margin-top: 16px; }

  /* Apps */
  .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
  .card {
    position: relative; border: 1px solid var(--edge); border-radius: 18px;
    background: var(--bg); padding: 22px;
    display: flex; flex-direction: column; gap: 14px;
  }
  .card .des {
    position: absolute; top: 10px; right: 14px;
    font-family: "IBM Plex Mono", monospace; font-size: 10px;
    letter-spacing: .14em; color: var(--mono); opacity: .55;
  }
  .card img { width: 100%; height: auto; border-radius: 14px; background: #000; border: 1px solid var(--hair-shot); }
  .card .shot-blank {
    aspect-ratio: 1; border-radius: 14px; background: #000;
    display: flex; align-items: center; justify-content: center;
    font-family: "IBM Plex Mono", monospace; color: #55555e; font-size: 20px;
    letter-spacing: .3em;
  }
  /* Solelkollen live card — HTML replica of the app's GETT IDAG view */
  .shot-wrap { container-type: inline-size; }
  .shot-live {
    aspect-ratio: 1; border-radius: 14px; background: #000; color: #fff;
    border: 1px solid var(--hair-shot);
    display: flex; flex-direction: column; text-align: left;
    padding: 8cqw 9cqw 6cqw;
  }
  .sl-title {
    font-family: "IBM Plex Mono", monospace; font-size: 5cqw; font-weight: 600;
    letter-spacing: .2em; color: #9a9fa8;
  }
  .sl-big { margin-top: 6cqw; font-weight: 700; font-size: 24cqw; line-height: 1; }
  .sl-big .sl-unit { font-size: 9cqw; font-weight: 600; color: #9a9fa8; margin-left: 2.5cqw; }
  .sl-stats { display: flex; gap: 14cqw; margin-top: 8cqw; }
  .sl-k {
    font-family: "IBM Plex Mono", monospace; font-size: 3.6cqw; font-weight: 600;
    letter-spacing: .18em; color: #8b9098;
  }
  .sl-v { margin-top: 1cqw; font-weight: 700; font-size: 9.5cqw; }
  .sl-v .sl-u2 { font-size: 5cqw; font-weight: 600; color: #9a9fa8; margin-left: 1.6cqw; }
  .sl-dots { display: flex; justify-content: center; gap: 2.4cqw; margin-top: auto; padding-top: 5cqw; }
  .sl-dots i { width: 2cqw; height: 2cqw; border-radius: 99px; background: #3a3d44; }
  .sl-dots i.on { width: 5cqw; background: #f0c24b; }

  .sl-explain {
    font-family: "IBM Plex Mono", monospace; font-size: 11.5px;
    color: var(--mono) !important; line-height: 1.6;
  }

  /* Needs-you card: Claude render flips to a Codex HTML replica */
  .ny-flip { position: relative; aspect-ratio: 1; }
  .nyf {
    position: absolute; inset: 0; width: 100%; height: 100%;
    border-radius: 14px; opacity: 0; transition: opacity .6s ease;
  }
  .nyf.on { opacity: 1; }
  .ny-codex { background: #000; padding: 2.6cqw; border: 1px solid var(--hair-shot); }
  .nyc-frame {
    height: 100%; border: 1cqw solid #7b82f8; border-radius: 8cqw;
    display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: 5cqw 4cqw 4cqw; color: #fff;
  }
  .nyc-head {
    font-family: "IBM Plex Mono", monospace; font-size: 3.4cqw; font-weight: 600;
    letter-spacing: .34em; color: #7b82f8;
  }
  .nyc-ic { width: 15cqw; height: 15cqw; margin-top: 7cqw; }
  .nyc-big { margin-top: 6cqw; font-weight: 700; font-size: 9.6cqw; letter-spacing: .02em; }
  .nyc-proj {
    margin-top: 4.4cqw; font-family: "IBM Plex Mono", monospace;
    font-size: 4cqw; font-weight: 600; letter-spacing: .3em; color: #7b82f8;
  }
  .nyc-sub {
    margin-top: 2.4cqw; font-family: "IBM Plex Mono", monospace;
    font-size: 2.8cqw; letter-spacing: .22em; color: #8b9098;
  }
  .nyc-tap {
    margin-top: auto; font-family: "IBM Plex Mono", monospace;
    font-size: 2.6cqw; letter-spacing: .26em; color: #6f7480;
  }

  .matrix-title { margin-top: 64px; font-size: 24px; font-weight: 600; }
  .matrix-lede { margin-top: 10px; color: var(--dim); font-size: 16px; max-width: 620px; }
  .m-head {
    margin-top: 30px; padding-bottom: 10px; border-bottom: 2px solid var(--edge);
    font-family: "IBM Plex Mono", monospace; font-size: 11.5px; font-weight: 600;
    letter-spacing: .22em; color: var(--mono);
  }
  .matrix {
    display: grid; gap: 16px; margin-top: 18px;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  }
  .tile { margin: 0; container-type: inline-size; }
  .tile img, .tile .tile-live {
    display: block; width: 100%; height: auto; aspect-ratio: 1;
    border-radius: 14px; background: #000; border: 1px solid var(--hair-shot);
  }
  /* a photo of the glass is never exactly square — crop, never squash */
  .tile img { object-fit: cover; }
  .tile .tile-live { padding: 2.6cqw; }
  .photos {
    display: grid; gap: 20px; margin-top: 20px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    max-width: 780px;
  }
  .photos.wide { max-width: 900px; margin-top: 34px; }
  .photo { margin: 0; }
  .photo img {
    display: block; width: 100%; height: auto; border-radius: 16px;
    border: 1px solid var(--edge);
  }
  .photo-note {
    margin-top: 14px; font-size: 15px; color: var(--dim); max-width: 640px;
  }
  .photo figcaption, .tile figcaption {
    margin-top: 9px; font-family: "IBM Plex Mono", monospace;
    font-size: 11.5px; color: var(--mono); letter-spacing: .04em;
  }

  /* One screen next to its story */
  .feature {
    display: grid; grid-template-columns: minmax(0, 320px) 1fr;
    gap: 20px 46px; margin-top: 26px; align-items: start;
  }
  .feature .mini-dev { margin-top: 0; width: 100%; }
  .feature-text { display: flex; flex-direction: column; gap: 14px; max-width: 620px; }
  .feature-text p { color: var(--dim); font-size: 15.5px; }
  .feature-text .mono { font-size: 13.5px; color: var(--ink); }

  /* The GitHub tile, rebuilt in html so it can carry the live count */
  .gh-live {
    aspect-ratio: 1; background: #000; border-radius: 15px;
    border: 1px solid var(--hair-shot); padding: 5cqw 5.5cqw 4cqw;
    display: flex; flex-direction: column; color: #fff;
    font-family: "IBM Plex Mono", monospace; text-align: center;
  }
  .gh-head { display: flex; align-items: flex-start; justify-content: space-between; }
  .gh-name { font-weight: 600; font-size: 5cqw; letter-spacing: .2em; }
  .gh-meta { display: flex; flex-direction: column; align-items: flex-end; gap: .6cqw; }
  .gh-meta b { font-weight: 600; font-size: 3.9cqw; }
  .gh-meta i {
    font-style: normal; font-size: 3.4cqw; letter-spacing: .18em; color: #9a9fa8;
  }
  .gh-rule { height: 1px; background: #3a3d44; margin-top: 2.6cqw; }
  .gh-rule.low { margin-top: auto; }
  .gh-mid { padding-top: 4cqw; }
  .gh-k { font-size: 4.4cqw; font-weight: 600; letter-spacing: .22em; color: #f0c24b; }
  .gh-big {
    font-family: "IBM Plex Sans", sans-serif; font-weight: 700;
    font-size: 26cqw; line-height: 1.05; letter-spacing: -.02em;
  }
  .gh-foot { padding-top: 3.4cqw; }
  .gh-k2 { font-size: 3.8cqw; font-weight: 600; letter-spacing: .22em; color: #9a9fa8; }
  .gh-small {
    font-family: "IBM Plex Sans", sans-serif; font-weight: 700;
    font-size: 8cqw; line-height: 1.2;
  }
  .gh-live .lv-dots { padding-top: 2.6cqw; margin-top: 2.6cqw; }

  .side-cards { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); max-width: 780px; }
  .side-cards .card { padding: 18px; }
  .side-cards .card h3 { font-size: 17px; }
  .side-cards .card p { font-size: 14px; }
  .side-video { margin-top: 16px; }
  .side-video .demo-frame { padding: 8px; border-radius: 22px; box-shadow: none; }
  .side-video .demo-frame iframe { width: 100%; border-radius: 16px; }
  .side-video .demo-label { margin-top: 8px; text-align: left; }
  .card h3 { font-size: 20px; font-weight: 600; }
  .card .tag {
    font-family: "IBM Plex Mono", monospace; font-size: 10.5px;
    letter-spacing: .16em; text-transform: uppercase; color: var(--teal);
  }
  .card .tag.closed { color: var(--mono); }
  .card p { color: var(--dim); font-size: 15px; }
  .card p a { color: var(--teal); text-decoration: none; }
  .card p a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
  .card p a:hover { text-decoration-thickness: 2px; }
  .face-mini { display: block; width: 100%; aspect-ratio: 1; border-radius: 14px; background: #000; border: 1px solid var(--hair-shot); }
  .eye { animation: blink 4.6s infinite; transform-origin: center; }
  .eye.r { animation-delay: .05s; }
  @keyframes blink { 0%,94%,100%{transform:scaleY(1)} 96.5%{transform:scaleY(.08)} }

  /* Vibecoding */
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
  .step { border: 1px solid var(--edge); border-radius: 18px; padding: 24px; }
  .step .sn {
    font-family: "IBM Plex Mono", monospace; font-size: 10.5px; font-weight: 600;
    letter-spacing: .22em; color: var(--copper); margin-bottom: 10px;
  }
  .step h3 { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
  .step p { color: var(--dim); font-size: 15px; }
  .step p a { color: var(--teal); text-decoration: none; }
  .step p a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
  .step p a:hover { text-decoration-thickness: 2px; }
  #vibecoding pre.term { margin-top: 26px; }
  .star-cta {
    margin-top: 24px; display: flex; align-items: center;
    gap: 18px 22px; flex-wrap: wrap;
  }
  .star-btn {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--ink); color: var(--bg); text-decoration: none;
    border-radius: 99px; padding: 13px 24px;
    font-weight: 600; font-size: 15.5px;
  }
  .star-btn svg { width: 17px; height: 17px; fill: currentColor; flex: none; }
  .star-btn:hover { background: #0b7466; color: #fff; }
  :root[data-theme="dark"] .star-btn:hover { background: var(--teal); color: #0a0b0d; }
  .star-cta p { font-size: 15px; color: var(--dim); max-width: 420px; }
  .ota {
    margin-top: 32px; max-width: 720px;
    background: var(--panel); border-radius: 18px; padding: 26px;
  }
  .ota-head {
    font-family: "IBM Plex Mono", monospace; font-size: 11.5px;
    font-weight: 600; letter-spacing: .22em; color: var(--teal);
  }
  .ota h3 { margin-top: 10px; font-size: 20px; font-weight: 600; }
  .ota p { margin-top: 10px; color: var(--dim); font-size: 15.5px; }
  .vibe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-top: 36px; }
  pre.term {
    background: #0d0d0f; border: 1px solid var(--hair-shot);
    border-radius: 16px; padding: 26px;
    font-family: "IBM Plex Mono", monospace; font-size: 14px;
    line-height: 1.9; color: #d6d9de; overflow-x: auto;
  }
  pre.term .p { color: #7d8492; }
  pre.term .say { color: #7fd8cc; }
  .vibe-points { display: flex; flex-direction: column; gap: 20px; }
  .vibe-points h3 { font-size: 18px; font-weight: 600; }
  .vibe-points p { color: var(--dim); font-size: 15.5px; }

  /* Platform */
  .plat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; margin-top: 36px; }
  pre.code {
    background: #0d0d0f; color: #d6d9de; border: 1px solid var(--hair-shot);
    border-radius: 16px;
    padding: 26px; font-family: "IBM Plex Mono", monospace; font-size: 14px;
    line-height: 1.8; overflow-x: auto;
  }
  pre.code .c { color: #6f7683; } pre.code .t { color: #7fd8cc; }

  /* Hardware / datasheet */
  .hw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 36px; align-items: start; }
  /* the board drawing keeps a minimum width and scrolls; without this the
     column would grow to fit it instead */
  .hw-grid > * { min-width: 0; }
  .hw-right { display: flex; flex-direction: column; gap: 28px; }
  .board-fig { margin: 0; }
  .board-fig svg { width: 100%; height: auto; display: block; }
  .board-fig .ln { stroke: var(--dim); fill: none; stroke-width: 1.5; }
  .board-fig .lead { stroke: var(--edge); stroke-width: 1.2; }
  .board-fig .lbl { font-family: "IBM Plex Mono", monospace; font-size: 12px; fill: var(--ink); font-weight: 600; }
  .board-fig .sub { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; fill: var(--mono); }
  .board-fig .silk { font-family: "IBM Plex Mono", monospace; font-size: 8.5px; fill: var(--mono); letter-spacing: .08em; }
  .board-fig .pin { fill: var(--teal); }
  .board-fig figcaption {
    margin-top: 10px; font-family: "IBM Plex Mono", monospace;
    font-size: 12px; color: var(--mono);
  }

  /* Mini device in the platform section */
  .mini-dev {
    margin-top: 26px; width: min(230px, 100%);
    background: var(--bezel); border-radius: 22px; padding: 9px;
  }
  .mini-dev img { display: block; width: 100%; height: auto; border-radius: 15px; }
  .mini-cap {
    margin-top: 8px; font-family: "IBM Plex Mono", monospace;
    font-size: 11.5px; color: var(--mono);
  }
  .sheet { border: 1px solid var(--edge); border-radius: 16px; overflow: hidden; }
  .sheet .sheet-head {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--panel); padding: 12px 20px;
    font-family: "IBM Plex Mono", monospace; font-size: 11.5px;
    letter-spacing: .18em; color: var(--mono);
  }
  .sheet .row {
    display: flex; justify-content: space-between; gap: 18px;
    padding: 14px 20px; border-top: 1px solid var(--edge); font-size: 15.5px;
  }
  .sheet .row .k { color: var(--dim); }
  .sheet .row .v { font-family: "IBM Plex Mono", monospace; font-size: 13.5px; text-align: right; }

  /* Waveshare collaboration and compatibility roadmap */
  .partner-card, .partner-strip {
    border: 1px solid var(--edge); border-radius: 18px;
    background: var(--panel);
  }
  .partner-card { margin-top: 32px; padding: 28px; }
  .partner-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
  }
  .partner-kicker, .partner-status, .compat-state {
    font-family: "IBM Plex Mono", monospace; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase;
  }
  .partner-kicker { color: var(--teal); font-size: 11.5px; }
  .partner-status {
    color: var(--mono); font-size: 10px; padding: 4px 9px;
    border: 1px solid var(--hair-ctl); border-radius: 99px;
  }
  .partner-card h3, .partner-strip h3 {
    margin-top: 10px; font-size: 22px; line-height: 1.25;
  }
  .partner-card > p { margin-top: 10px; max-width: 780px; color: var(--dim); font-size: 15.5px; }
  .compat-models {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
    gap: 10px; margin-top: 22px;
  }
  .compat-model {
    min-width: 0; padding: 16px; border: 1px solid var(--edge);
    border-radius: 13px; background: var(--bg);
  }
  .compat-model.current { border-color: var(--teal); }
  .compat-state { display: block; color: var(--mono); font-size: 8.5px; line-height: 1.4; }
  .compat-model.current .compat-state { color: var(--teal); }
  .compat-model strong { display: block; margin-top: 13px; font-size: 21px; }
  .compat-model small {
    display: block; margin-top: 2px; color: var(--dim);
    font-family: "IBM Plex Mono", monospace; font-size: 10.5px;
  }
  .partner-card .labs-note {
    margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--edge);
    font-size: 14px;
  }
  .partner-strip {
    display: grid; grid-template-columns: .9fr 1.1fr; gap: 34px;
    align-items: center; margin-top: 28px; padding: 24px 26px;
  }
  .partner-strip h3 { font-size: 19px; }
  .partner-strip p { color: var(--dim); font-size: 15px; }
  .partner-strip a {
    display: inline-block; margin-top: 8px; color: var(--ink);
    font-weight: 600; text-decoration-color: var(--teal);
    text-underline-offset: 3px;
  }
  .partner-strip a:hover { color: var(--teal); }
  .privacy { background: var(--panel); border-radius: 18px; padding: 26px; }
  .privacy h3 { font-size: 18px; font-weight: 600; margin-bottom: 12px; }
  .privacy ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .privacy li { color: var(--dim); font-size: 15px; padding-left: 22px; position: relative; }
  .privacy li::before { content: "—"; position: absolute; left: 0; color: var(--teal); }

  /* Which computer can serve the panel */
  .hosts {
    margin-top: 40px; max-width: 900px; padding: 26px;
    border: 1px solid var(--edge); border-radius: 18px; background: var(--panel);
  }
  .hosts-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
  }
  .hosts-kicker {
    font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 11.5px;
    letter-spacing: .16em; text-transform: uppercase; color: var(--teal);
  }
  .hosts h3 { margin-top: 12px; font-size: 20px; line-height: 1.25; }
  .host-list {
    list-style: none; display: grid; gap: 10px; margin-top: 18px;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  }
  .host {
    min-width: 0; padding: 15px; border: 1px solid var(--edge);
    border-radius: 13px; background: var(--bg);
  }
  .host.ok { border-color: var(--teal); }
  .host-state {
    display: block; font-family: "IBM Plex Mono", monospace; font-weight: 600;
    font-size: 8.5px; line-height: 1.4; letter-spacing: .16em;
    text-transform: uppercase; color: var(--mono);
  }
  .host.ok .host-state { color: var(--teal); }
  .host.no .host-state { color: var(--copper); }
  .host strong { display: block; margin-top: 11px; font-size: 19px; }
  .host small {
    display: block; margin-top: 3px; color: var(--dim);
    font-family: "IBM Plex Mono", monospace; font-size: 10.5px; line-height: 1.5;
  }
  .hosts-note { margin-top: 18px; font-size: 14.5px; color: var(--dim); }
  .hosts-note.alt {
    margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--edge);
  }
  .hosts-note a { color: var(--teal); text-underline-offset: 2px; }

  /* two screens telling one story, side by side */
  .feature.pair { grid-template-columns: minmax(0, 420px) 1fr; }
  .mini-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .mini-pair .mini-dev { margin-top: 0; width: 100%; }

  /* FAQ */
  .faq {
    display: grid; gap: 30px 44px; margin-top: 34px;
    /* min() or a 320px phone gets a 320px column inside a 264px page */
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  }
  .qa h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
  .qa p { color: var(--dim); font-size: 15.5px; }
  .qa pre.code { margin-top: 12px; font-size: 12.5px; padding: 18px; }

  /* Inside the glass */
  .in-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 36px; }
  .in-head {
    font-family: "IBM Plex Mono", monospace; font-size: 11.5px; font-weight: 600;
    letter-spacing: .22em; padding-bottom: 12px; border-bottom: 2px solid var(--edge);
  }
  .in-head.awake { color: var(--teal); }
  .in-head.asleep { color: var(--mono); }
  .in-row { padding: 13px 0; border-bottom: 1px solid var(--edge); }
  .in-row .n { font-family: "IBM Plex Mono", monospace; font-size: 13px; font-weight: 600; }
  .in-row .d { font-size: 13.5px; color: var(--dim); margin-top: 2px; }

  /* Footer with castellated pads */
  .pads {
    height: 10px;
    background: repeating-linear-gradient(90deg,
      #d8b25a 0 26px, transparent 26px 52px);
    border-top: 1px solid var(--edge); opacity: var(--pads-op);
  }
  footer { padding: 40px 0 64px; }
  .foot-top {
    display: flex; align-items: flex-start; gap: 32px; flex-wrap: wrap;
    padding-bottom: 26px;
  }
  .foot-brand { display: flex; align-items: center; gap: 14px; }
  .fb-name {
    font-family: "IBM Plex Mono", monospace; font-weight: 600;
    font-size: 14px; letter-spacing: .26em;
  }
  .fb-by {
    font-family: "IBM Plex Mono", monospace; font-size: 12px;
    color: var(--mono); margin-top: 3px;
  }
  .foot-links {
    margin-left: auto; display: flex; flex-wrap: wrap; gap: 10px;
  }
  .foot-links a {
    display: flex; align-items: center; gap: 8px;
    border: 1px solid var(--hair-ctl); border-radius: 99px;
    padding: 7px 15px 7px 12px; text-decoration: none;
    font-family: "IBM Plex Mono", monospace; font-size: 12.5px;
    color: var(--dim);
  }
  .foot-links a:hover { color: var(--teal); border-color: currentColor; }
  .foot-links svg { width: 15px; height: 15px; fill: currentColor; flex: none; }
  .foot-bottom {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    padding-top: 22px; border-top: 1px solid var(--edge);
    font-family: "IBM Plex Mono", monospace; font-size: 12.5px; color: var(--mono);
  }
  .foot-bottom a { color: var(--mono); }
  .foot-bottom .spacer { flex: 1; }
  @media (max-width: 620px) {
    .foot-links { margin-left: 0; }
  }

  @media (max-width: 920px) {
    .hero { grid-template-columns: 1fr; gap: 48px; padding: 56px 0 48px; }
    .plat-grid, .hw-grid, .vibe-grid, .in-grid, .steps { grid-template-columns: 1fr; }
    .feature, .feature.pair { grid-template-columns: 1fr; gap: 24px; }
    .feature .mini-dev { width: min(300px, 100%); }
    .mini-pair { max-width: 420px; }
    .mini-pair .mini-dev { width: 100%; }
    .cards { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 620px) {
    /* 28px of gutter on a 393px phone is 14% of the screen spent on nothing */
    .wrap { padding: 0 18px; }
    .skip:focus { left: 18px; }
    section { padding: 54px 0; }
    .matrix-title { margin-top: 46px; }
    /* caps at the 40px the base rule already gives — never larger than it
       would be one pixel wider */
    h1 { font-size: clamp(34px, 8.6vw, 40px); }
    .cards { grid-template-columns: 1fr; }
    .top nav { gap: 18px; }
    /* label above value beats two columns fighting over 280px */
    .sheet .row { flex-direction: column; gap: 3px; padding: 12px 18px; }
    .sheet .row .v { text-align: left; overflow-wrap: anywhere; }
    .sheet .sheet-head { padding: 11px 18px; }
    /* five full-width cards for five model numbers is a lot of scrolling */
    .compat-models { grid-template-columns: 1fr 1fr; gap: 8px; }
    .compat-model { padding: 13px; }
    .compat-model strong { margin-top: 9px; font-size: 19px; }
    .host-list { grid-template-columns: 1fr; }
    .host { padding: 13px; }
    /* the callouts are the labels — shrink them and the drawing says nothing,
       so let it keep its size and scroll inside its own figure instead */
    .board-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
    .board-scroll svg { min-width: 430px; }
    .hosts, .privacy, .ota, .follow, .partner-card { padding: 20px; }
    /* a matrix that stacks into one column is not a matrix, it is a pile */
    .matrix { grid-template-columns: 1fr 1fr; gap: 10px; }
    .tile figcaption { font-size: 10.5px; }
    /* three portrait videos stacked cost three screens of scrolling, and
       three side by side are too small to see — swipe through them instead */
    .demo-phones {
      gap: 12px; flex-wrap: nowrap; justify-content: flex-start;
      overflow-x: auto; overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory; padding-bottom: 4px;
    }
    .demo-phones > div { flex: 0 0 auto; scroll-snap-align: start; }
    .demo-frame { padding: 7px; border-radius: 20px; }
    .demo-frame iframe { width: min(230px, 58vw); border-radius: 14px; }
    .demo-label { font-size: 11px; }
    .photos { gap: 14px; }
    .foot-links { margin-left: 0; }
    .foot-bottom .spacer { display: none; }
    .foot-bottom { row-gap: 6px; }
  }
  /* the header runs out of room before the body does — four links, a repo
     chip and the theme button need more than 760px of it */
  @media (max-width: 860px) {
    .top { flex-wrap: wrap; row-gap: 10px; gap: 16px; padding: 18px 0; }
    /* 24px-tall links are half a fingertip; pad them out without moving them */
    .top nav a:not(.repo-chip) { padding: 10px 0; }
    .hero .cta a { padding: 10px 0 8px; }
    .foot-links a { padding: 11px 15px 11px 12px; }
    .top .repo-chip, .theme-btn { width: 44px; height: 44px; }
    .logo { padding: 8px 0; }
    .dots { padding: 6px 0 0; }
    .dots button { width: 32px; height: 32px; }
    .top nav {
      width: 100%; margin-left: 0; gap: 14px;
      justify-content: flex-start; align-items: center;
      /* on a 320px phone the links themselves need a second row */
      flex-wrap: wrap; row-gap: 4px;
    }
    .top nav a { font-size: 15px; }
    .logo { font-size: 15px; letter-spacing: .2em; }
    /* the repo chip becomes an icon button so all five controls fit one row */
    .top .repo-chip { padding: 0; justify-content: center; }
    .top .repo-label { display: none; }
  }
  @media (max-width: 700px) {
    pre.term {
      white-space: pre-wrap; overflow-wrap: anywhere;
      font-size: 12.5px; line-height: 1.7; padding: 18px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .screen .frame { transition: none; }
    .eye { animation: none; }
  }


/* Devlog */
.log { list-style: none; margin-top: 38px; max-width: 720px; }
.entry {
  padding-left: 26px; padding-bottom: 34px; position: relative;
  border-left: 1px solid var(--edge);
}
.entry:last-child { border-left-color: transparent; padding-bottom: 0; }
.entry::before {
  content: ""; position: absolute; left: -5px; top: 7px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--teal);
}
.entry-meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--mono);
}
.chip {
  border: 1px solid currentColor; border-radius: 99px; padding: 2px 9px;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
}
.chip.ship { color: var(--teal); }
.chip.rel  { color: var(--copper); }
.chip.mile { color: var(--teal); }
.chip.feat { color: var(--copper); }
.entry h3 { margin-top: 8px; font-size: 21px; font-weight: 600; }
.entry p { margin-top: 8px; color: var(--dim); font-size: 15.5px; }
.entry-link { font-family: "IBM Plex Mono", monospace; font-size: 13px; }
.entry-link a { color: var(--teal); text-decoration: none; }
.entry-link a:hover { text-decoration: underline; }
.entry-img {
  display: block; width: 100%; max-width: 340px; height: auto;
  margin-top: 14px; border-radius: 14px; border: 1px solid var(--edge);
}

.follow {
  margin-top: 10px; padding: 26px; border-radius: 18px;
  background: var(--panel); max-width: 720px;
}
.follow h3 { font-size: 18px; font-weight: 600; }
.follow p { margin-top: 8px; color: var(--dim); font-size: 15px; }
.follow-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.follow-row .repo-chip { padding: 9px 16px; }
.follow-note { font-size: 14px; }

/* Landing page */
.projects { display: grid; gap: 22px; margin-top: 42px; }
.proj {
  display: grid; grid-template-columns: 300px 1fr; gap: 32px;
  align-items: center;
  border: 1px solid var(--edge); border-radius: 20px; padding: 26px;
}
.proj img, .proj .proj-art {
  width: 100%; height: auto; aspect-ratio: 1; border-radius: 16px;
  background: #000; border: 1px solid var(--hair-shot);
}
.proj h3 { font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.proj .status {
  font-family: "IBM Plex Mono", monospace; font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase;
}
.proj .status.open { color: var(--teal); }
.proj .status.shut { color: var(--mono); }
.proj p { margin-top: 10px; color: var(--dim); font-size: 16px; }
.proj .go {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-weight: 600; text-decoration: none;
  border-bottom: 2px solid var(--teal); padding-bottom: 3px;
}
.proj .go:hover { color: var(--teal); }
.stars {
  font-family: "IBM Plex Mono", monospace; font-size: 12.5px;
  color: var(--mono); margin-left: 12px;
}
  @media (max-width: 760px) {
    .proj { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
    .partner-strip { grid-template-columns: 1fr; gap: 14px; }
    .entry-img { max-width: 100%; }
  }

/* Open source and the live star count */
.lic { color: var(--teal); font-weight: 600; }
.repo-stars {
  margin-left: 8px; padding-left: 8px;
  border-left: 1px solid var(--hair-ctl); color: var(--mono);
}
.stars-line { display: block; margin-top: 4px; color: var(--mono); font-size: 14px; }
@media (max-width: 860px) { .repo-stars { display: none; } }

/* Star button with the count attached, GitHub-style */
.star-pair { display: inline-flex; align-items: stretch; }
.star-pair .star-btn { border-radius: 99px 0 0 99px; padding-right: 20px; }
.star-count {
  display: inline-flex; align-items: center; padding: 0 22px;
  border: 1px solid var(--ink); border-left: 0; border-radius: 0 99px 99px 0;
  font-weight: 700; font-size: 19px; color: var(--ink);
  text-decoration: none; font-variant-numeric: tabular-nums;
}
.star-count:hover { color: var(--teal); border-color: var(--teal); }

/* Star badge on the landing card */
.star-badge {
  display: inline-flex; align-items: center; gap: 7px;
  margin-left: 12px; padding: 3px 12px 3px 9px;
  border: 1px solid var(--hair-ctl); border-radius: 99px;
  font-family: "IBM Plex Mono", monospace; font-size: 13px; font-weight: 600;
  color: var(--ink); text-decoration: none; vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.star-badge svg { width: 13px; height: 13px; fill: #f0c24b; }
.star-badge:hover { border-color: var(--teal); color: var(--teal); }

/* GitHub mark, wherever it earns its place */
.star-btn .gh { width: 18px; height: 18px; fill: currentColor; }
.star-count .st { width: 15px; height: 15px; fill: #f0c24b; margin-right: 8px; }
.star-badge .gh { width: 14px; height: 14px; fill: currentColor; }
.star-badge .st { width: 12px; height: 12px; fill: #f0c24b; }
.follow-row .repo-chip .gh { width: 15px; height: 15px; fill: currentColor; flex: none; }