@font-face {
      font-family: Sora;
      font-style: normal;
      font-weight: 400 700;
      font-display: optional;
      src: url("/fonts/sora-v17-latin.woff2") format("woff2");
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: "IBM Plex Mono";
      font-style: normal;
      font-weight: 400;
      font-display: optional;
      src: url("/fonts/ibm-plex-mono-v20-latin-400.woff2") format("woff2");
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: "IBM Plex Mono";
      font-style: normal;
      font-weight: 600;
      font-display: optional;
      src: url("/fonts/ibm-plex-mono-v20-latin-600.woff2") format("woff2");
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    :root {
      --bg: #ffffff;
      --ink: #1c1714;
      --muted: #6a6158;
      --line: #e4ddd4;
      --card: #faf7f3;
      --rust: #c24716;
      --brass: #9a5a16;
      --ok: #2f4a28;
      --err: #b42318;
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    body {
      font-family: Sora, "Segoe UI", sans-serif;
      font-size: 18px;
      background: var(--bg);
      color: var(--ink);
      line-height: 1.5;
    }
    a { color: var(--brass); }
    header, main, footer { width: min(960px, calc(100% - 32px)); margin-inline: auto; }
    header { padding: 28px 0 8px; }
    .site-nav {
      display: flex;
      justify-content: space-between;
      padding: 14px 0;
      border-bottom: 1px solid var(--line);
      margin-bottom: 20px;
    }
    .site-nav-home {
      font-family: Sora, "Segoe UI", sans-serif;
      font-weight: 700;
      font-size: 17px;
      color: var(--ink);
      text-decoration: none;
    }
    .site-nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      gap: 4px 14px;
      flex-wrap: wrap;
    }
    .site-nav li a {
      font-size: 15px;
      color: var(--muted);
      text-decoration: none;
    }
    .site-nav li a:hover,
    .site-nav li a[aria-current] {
      color: var(--rust);
    }
    .site-nav li a[aria-current] {
      font-weight: 600;
    }
    .next-step {
      font-size: 16px;
      color: var(--muted);
      margin: 16px 0 0;
    }
    .mark {
      font-family: "IBM Plex Mono", monospace;
      font-size: 14px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--rust);
    }
    h1 {
      font-size: clamp(30px, 6vw, 44px);
      line-height: 1.15;
      margin: 8px 0 10px;
    }
    .lede { color: var(--muted); margin: 0 0 24px; }
    .tool {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 20px;
    }
    .row {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 12px;
    }
    label {
      display: block;
      font-size: 15px;
      color: var(--muted);
      margin-bottom: 6px;
    }
    input[type="number"], select {
      width: 100%;
      background: #ffffff;
      color: var(--ink);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 12px 12px;
      font: 600 22px/1 "IBM Plex Mono", monospace;
    }
    input:focus, select:focus {
      outline: 2px solid var(--rust);
      outline-offset: 2px;
    }
    .units {
      display: flex;
      gap: 8px;
      margin: 14px 0 4px;
    }
    .units button, .preset {
      background: transparent;
      color: var(--ink);
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 8px 12px;
      font: 600 15px/1 Sora, sans-serif;
      cursor: pointer;
    }
    .units button[aria-pressed="true"] {
      background: var(--rust);
      border-color: var(--rust);
      color: #ffffff;
    }
    .preset { margin-top: 12px; color: var(--muted); }
    .result {
      margin-top: 18px;
      padding-top: 16px;
      border-top: 1px solid var(--line);
    }
    .result strong {
      display: block;
      font-family: "IBM Plex Mono", monospace;
      font-size: clamp(42px, 10vw, 66px);
      letter-spacing: -0.03em;
      color: var(--brass);
    }
    .hint, .err { font-size: 16px; color: var(--muted); margin: 6px 0 0; }
    .err { color: var(--err); }
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 14px;
      font-size: 16px;
    }
    th, td {
      text-align: left;
      padding: 8px 0;
      border-bottom: 1px solid var(--line);
      font-family: "IBM Plex Mono", monospace;
    }
    th { color: var(--muted); font-weight: 400; }
    article { padding: 28px 0 8px; color: var(--muted); }
    article h2 { color: var(--ink); font-size: 22px; margin: 28px 0 10px; }
    article h3 { color: var(--ink); font-size: 18px; margin: 20px 0 8px; }
    article p { margin: 0 0 14px; }
    article ul { margin: 0 0 14px; padding-left: 20px; }
    article li { margin: 0 0 6px; }
    article code {
      color: var(--brass);
      font-family: "IBM Plex Mono", monospace;
      font-size: 15px;
    }
    .sources { font-size: 15px; }
    footer {
      padding: 24px 0 40px;
      color: var(--muted);
      font-size: 15px;
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }
    @media (max-width: 520px) {
      .row { grid-template-columns: 1fr; }
      .site-nav {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
      }
      .site-nav ul {
        overflow-x: auto;
        flex-wrap: nowrap;
        white-space: nowrap;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      * { transition: none !important; }
    }
    .more {
      padding: 28px 0;
      border-top: 1px solid var(--line);
    }
    .more h2 {
      color: var(--ink);
      font-size: 22px;
    }
    .more ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px 24px;
    }
    .more li a { font-weight: 700; }
    .more li span {
      display: block;
      color: var(--muted);
      font-size: 15px;
    }
    @media (max-width: 520px) {
      .more ul { grid-template-columns: 1fr; }
    }