:root {

  --paper:      #FFFFFF;
  --board:      #F6F7F8;
  --dust:       #E4E6E9;
  --chalk:      #C9CFD4;

  --orange:      #F94A00;
  --orange-ink:  #B03200;
  --orange-tint: #FFEDE4;

  --navy:      #13265C;
  --navy-edge: #0C193F;

  --ink:        #1A1D20;
  --ink-soft:   #4B5158;
  --ink-mute:   #6B7178;

  --go-deep:     #0B6B3C;
  --hold-deep:   #7A4F00;
  --danger-deep: #B80D28;

  --font-brand:  "Barlow", "Barlow Semi Condensed", "Helvetica Neue",
                 Arial, system-ui, sans-serif;
  --font-ui:     "IBM Plex Sans", ui-sans-serif, -apple-system,
                 BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:   "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo,
                 Consolas, monospace;

  --t-hero: 64px; --t-h1: 40px; --t-h2: 28px; --t-h3: 21px;
  --t-body: 17px; --t-sm: 15px; --t-xs: 13px; --t-micro: 11px;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;

  --r-sm:3px; --r-md:6px; --r-lg:10px; --r-full:999px;
  --edge: 1px;

  --tap-min: 64px;
  --tap-gap: 10px;

  --dur-1: 90ms; --dur-2: 150ms; --dur-3: 180ms;
  --ease: cubic-bezier(.2, .8, .2, 1);

  --edge-2: 2px;
  --mk-tap-sm: 44px;
  --mk-max: 1080px;
  --mk-article: 720px;
  --mk-device-w: 360px;
  --mk-device-w-sm: 250px;
  --mk-device-head: 200px;
  --mk-device-step: 260px;
  --mk-device-step-sm: 220px;
  --mk-step-node: 56px;
  --mk-step-line-x: 27px;
  --mk-step-line-x-sm: 21px;
  --mk-icon-md: 26px;
  --mk-icon-sm: 22px;
  --mk-hero-h1-sm: 36px;
  --t-h1-sm: 32px;
  --t-h2-sm: 24px;
  --mk-figure-sm: 24px;
  --mk-band-h2-sm: 30px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.ds-wrap { max-width: 1180px; margin: 0 auto; padding: var(--sp-10) var(--sp-8) var(--sp-16); }

.ds-eyebrow {
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute);
}
.ds-title {
  font-family: var(--font-brand); font-weight: 800;
  font-size: var(--t-h2); letter-spacing: -.01em;
  margin: var(--sp-2) 0 var(--sp-1);
}
.ds-lede { color: var(--ink-soft); font-size: var(--t-sm); max-width: 74ch; margin: 0; }
.ds-rule { height: var(--edge); background: var(--dust); border: 0; margin: var(--sp-8) 0; }

.ds-spec {
  margin-top: var(--sp-8);
  border-top: var(--edge) solid var(--dust);
  padding-top: var(--sp-5);
  font-size: var(--t-xs); color: var(--ink-mute);
}
.ds-spec h4 {
  font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: .18em;
  text-transform: uppercase; color: var(--orange-ink); margin: 0 0 var(--sp-2);
}
.ds-spec ul { margin: 0 0 var(--sp-4); padding-left: 1.1em; }
.ds-spec li { margin-bottom: var(--sp-1); }
.ds-spec b { color: var(--ink-soft); font-weight: 600; }

.ds-stage {
  background: var(--board);
  border: var(--edge) solid var(--dust);
  padding: var(--sp-12) var(--sp-8);
}