:root {
  color-scheme: light;

  --ground: #D6DBD6;
  --ink: #14181A;
  --ink-2: #3C4548;
  --white: #F8F9F6;
  --red: #A81E0A;

  --h-exposed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M-1 1L1 -1M0 6L6 0M5 7L7 5M-1 5L1 7M0 0L6 6M5 -1L7 1' stroke='%2314181A' stroke-width='1.25'/%3E%3C/svg%3E");
  --h-race: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M-1 1L1 -1M0 6L6 0M5 7L7 5' stroke='%2314181A' stroke-width='1.3'/%3E%3C/svg%3E");
  --h-limited: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M-1 1L1 -1M0 11L11 0M10 12L12 10' stroke='%2314181A' stroke-width='.9'/%3E%3C/svg%3E");
  --h-caution: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M-1 1L1 -1M0 18L18 0M17 19L19 17' stroke='%2314181A' stroke-width='.9'/%3E%3C/svg%3E");
  --h-rules: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='10'%3E%3Cpath d='M0 5.5H8' stroke='%2314181A' stroke-width='1'/%3E%3C/svg%3E");

  --display: 'Besley', 'Charis SIL', 'Clarendon', Georgia, serif;
  --text: 'Charis SIL', Charter, Georgia, serif;
  --mono: 'Sometype Mono', 'SF Mono', Menlo, Consolas, monospace;

  --fs-title: clamp(54px, min(7.7vw, 12vh), 136px);
  --fs-outcome: clamp(46px, 4.3vw, 72px);
  --fs-numeral: 44px;
  --fs-tool: 40px;
  --fs-lead: 31px;
  --fs-step: 24px;
  --fs-sub: 21px;
  --fs-block: 19px;

  --fs-large: 18px;
  --fs-body: 17px;
  --fs-claim: 16.5px;
  --fs-small: 15px;
  --fs-label: 14px;
  --fs-min: 13px;

  --fs-code: 14px;
  --fs-code-l: 15px;

  --m: 44px;
  --gut: 136px;
  --gap: 22px;
  --plate: clamp(640px, 46.6vw, 860px);
}

@media (max-width: 1360px) {
  :root {
    --m: 32px;
    --gut: 112px;
    --gap: 18px;
    --plate: clamp(520px, 47vw, 640px);
  }
}

@media (max-width: 1080px) {
  :root {
    --fs-outcome: clamp(46px, 8vw, 72px);
  }
}

@media (max-width: 720px) {
  :root {
    --fs-title: clamp(50px, 15.4vw, 62px);
    --fs-outcome: clamp(38px, 12.4vw, 48px);
    --fs-numeral: 36px;
    --fs-tool: 32px;
    --fs-lead: 25px;
    --fs-step: 22px;
    --fs-large: 16.5px;
    --fs-body: 16.5px;

    --m: 16px;
    --gut: 0px;
    --gap: 0px;
  }
}

html,
body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--text);
}