:root {
      color-scheme: light dark;
      --bg: #eef2ed;
      --paper: #fbfcf8;
      --paper-raised: #ffffff;
      --ink: #13221f;
      --muted: #50615d;
      --line: #d8dfd9;
      --soft: #e7eee8;
      --brand: #145b4d;
      --brand-strong: #0c4439;
      --brand-wash: #dcebe2;
      --accent: #bf6f35;
      --accent-wash: #f6e8db;
      --shadow: 0 24px 70px rgba(32, 57, 49, .12);
      --serif: Georgia, "Times New Roman", serif;
      --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --bg: #0c1211;
        --paper: #111a18;
        --paper-raised: #16221f;
        --ink: #edf4ef;
        --muted: #aabbb5;
        --line: #2a3a36;
        --soft: #1b2925;
        --brand: #75c7ad;
        --brand-strong: #9cdcc7;
        --brand-wash: #17372f;
        --accent: #e0a06c;
        --accent-wash: #37251a;
        --shadow: 0 24px 70px rgba(0, 0, 0, .3);
      }
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      font-family: var(--sans);
      font-size: 16px;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
    }
    a { color: var(--brand); text-underline-offset: .18em; text-decoration-thickness: 1px; }
    a:hover { color: var(--brand-strong); }
    button, a { -webkit-tap-highlight-color: transparent; }
    ::selection { background: var(--brand-wash); }

    .progress {
      position: fixed;
      inset: 0 0 auto 0;
      height: 3px;
      z-index: 20;
      background: transparent;
    }
    .progress span {
      display: block;
      width: 0;
      height: 100%;
      background: var(--accent);
      transition: width .1s linear;
    }

    .masthead {
      background: #123b35;
      color: #f6fbf8;
      padding: clamp(52px, 8vw, 104px) 24px clamp(72px, 10vw, 124px);
      position: relative;
      overflow: hidden;
    }
    .masthead::after {
      content: "";
      position: absolute;
      width: 470px;
      height: 470px;
      right: -210px;
      bottom: -300px;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 50%;
      box-shadow: 0 0 0 74px rgba(255,255,255,.035), 0 0 0 148px rgba(255,255,255,.025);
      pointer-events: none;
    }
    .mast-inner {
      width: min(1100px, 100%);
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }
    .app-label {
      margin: 0 0 18px;
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: #b7d7cc;
    }
    h1 {
      font-family: var(--serif);
      font-weight: 600;
      font-size: clamp(3.35rem, 8vw, 6.9rem);
      line-height: .94;
      letter-spacing: -.045em;
      max-width: 760px;
      margin: 0;
    }
    .dek {
      max-width: 700px;
      margin: 30px 0 0;
      color: #dceae5;
      font-size: clamp(1.05rem, 2vw, 1.28rem);
      line-height: 1.6;
    }
    .meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 28px;
      margin-top: 38px;
      font-size: .88rem;
      color: #b7d7cc;
    }
    .meta strong { color: #fff; font-weight: 600; }

    .shell {
      width: min(1100px, calc(100% - 32px));
      margin: -46px auto 68px;
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 230px minmax(0, 1fr);
      gap: 28px;
      align-items: start;
    }
    .sidebar {
      position: sticky;
      top: 24px;
      background: var(--paper-raised);
      border: 1px solid var(--line);
      padding: 22px 18px;
      box-shadow: var(--shadow);
    }
    .sidebar-title {
      margin: 0 0 12px;
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .sidebar a {
      display: block;
      padding: 7px 8px;
      margin: 1px 0;
      border-radius: 6px;
      color: var(--muted);
      text-decoration: none;
      font-size: .84rem;
      line-height: 1.3;
      transition: color .18s ease, background .18s ease;
    }
    .sidebar a:hover,
    .sidebar a.active {
      color: var(--brand-strong);
      background: var(--brand-wash);
    }

    .document {
      min-width: 0;
      background: var(--paper);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      padding: clamp(30px, 6vw, 76px);
    }
    .summary {
      margin-bottom: 56px;
    }
    .summary h2 {
      font-family: var(--serif);
      font-size: clamp(1.9rem, 4vw, 2.75rem);
      line-height: 1.08;
      letter-spacing: -.02em;
      margin: 0 0 14px;
    }
    .summary > p {
      max-width: 680px;
      color: var(--muted);
      margin: 0 0 28px;
    }
    .principles {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }
    .principle {
      padding: 24px 24px 24px 0;
    }
    .principle:nth-child(even) {
      border-left: 1px solid var(--line);
      padding-left: 24px;
      padding-right: 0;
    }
    .principle:nth-child(n+3) { border-top: 1px solid var(--line); }
    .number {
      display: block;
      margin-bottom: 7px;
      color: var(--accent);
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: .1em;
    }
    .principle strong { display: block; font-size: .98rem; }
    .principle p { margin: 5px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.55; }

    .mobile-toc {
      display: none;
      margin-bottom: 38px;
      border: 1px solid var(--line);
      background: var(--paper-raised);
    }
    .mobile-toc summary {
      cursor: pointer;
      padding: 15px 17px;
      color: var(--brand-strong);
      font-weight: 700;
      list-style: none;
    }
    .mobile-toc summary::-webkit-details-marker { display: none; }
    .mobile-toc summary::after { content: "+"; float: right; }
    .mobile-toc[open] summary::after { content: "−"; }
    .mobile-toc nav { padding: 0 17px 15px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px 18px; }
    .mobile-toc a { font-size: .84rem; text-decoration: none; color: var(--muted); }

    .policy-section {
      scroll-margin-top: 28px;
      padding: 10px 0 42px;
      margin-bottom: 32px;
      border-bottom: 1px solid var(--line);
    }
    .policy-section:last-of-type { border-bottom: 0; margin-bottom: 0; }
    .section-no {
      display: inline-block;
      color: var(--accent);
      font-size: .76rem;
      font-weight: 700;
      letter-spacing: .1em;
      vertical-align: .18em;
      margin-right: 10px;
    }
    h2.section-title {
      display: inline;
      font-family: var(--serif);
      font-weight: 600;
      font-size: clamp(1.8rem, 3.8vw, 2.45rem);
      line-height: 1.15;
      letter-spacing: -.02em;
    }
    h3 {
      margin: 28px 0 8px;
      font-size: 1rem;
      line-height: 1.4;
    }
    p { margin: 13px 0; }
    .policy-section p, .policy-section li { color: var(--muted); }
    ul {
      margin: 14px 0 0;
      padding: 0;
      list-style: none;
    }
    li {
      position: relative;
      padding-left: 19px;
      margin: 10px 0;
    }
    li::before {
      content: "";
      position: absolute;
      left: 0;
      top: .72em;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
    }
    .note {
      margin: 26px 0 8px;
      padding: 18px 20px;
      background: var(--brand-wash);
      color: var(--ink);
      border-radius: 3px;
      font-size: .93rem;
    }
    .note strong { color: var(--brand-strong); }
    .definition {
      margin-top: 22px;
      padding: 18px 20px;
      border-left: 3px solid var(--accent);
      background: var(--soft);
    }
    .definition p { margin: 0; }

    .placeholder-panel {
      margin-top: 26px;
      background: var(--accent-wash);
      border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
      padding: 22px;
    }
    .placeholder-panel .flag {
      color: var(--accent);
      font-size: .76rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      margin: 0 0 14px;
    }
    .field {
      display: grid;
      grid-template-columns: 145px 1fr;
      gap: 16px;
      padding: 11px 0;
      border-top: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
    }
    .field:first-of-type { border-top: 0; }
    .field-label { color: var(--muted); font-size: .84rem; }
    .field-value {
      color: var(--ink);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: .84rem;
      font-weight: 600;
      overflow-wrap: anywhere;
    }

    .footer {
      width: min(1100px, calc(100% - 40px));
      margin: 0 auto;
      padding: 0 0 max(46px, env(safe-area-inset-bottom));
      display: flex;
      justify-content: space-between;
      gap: 20px;
      color: var(--muted);
      font-size: .82rem;
    }
    .footer p { margin: 0; }

    :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

    @media (max-width: 860px) {
      .shell { display: block; margin-top: -34px; }
      .sidebar { display: none; }
      .mobile-toc { display: block; }
      .document { padding: clamp(28px, 7vw, 54px); }
    }
    @media (max-width: 560px) {
      .masthead { padding-left: 20px; padding-right: 20px; }
      h1 { font-size: clamp(3.2rem, 17vw, 4.6rem); }
      .shell { width: min(100% - 20px, 1100px); margin-bottom: 44px; }
      .document { padding: 28px 20px; }
      .principles { grid-template-columns: 1fr; }
      .principle,
      .principle:nth-child(even) { padding: 19px 0; border-left: 0; }
      .principle:nth-child(n+2) { border-top: 1px solid var(--line); }
      .mobile-toc nav { grid-template-columns: 1fr; }
      .field { grid-template-columns: 1fr; gap: 3px; }
      .footer { display: block; }
      .footer p + p { margin-top: 6px; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { transition-duration: .01ms !important; }
    }