:root {
        color-scheme: light;
        --bg: #f4f7f8;
        --paper: #ffffff;
        --ink: #17181c;
        --muted: #5f6670;
        --line: #cfd8df;
        --accent: #0f766e;
        --accent-2: #9a3412;
        --accent-3: #1d4ed8;
        --soft: #e4f2ef;
        --soft-2: #eef2ff;
        --warn: #fff7ed;
        --code-bg: #20242c;
        --code-ink: #f6f7fb;
        --measure: 1180px;
        --font-base: 24px;
        --font-small: 19px;
        --font-table: 1.18rem;
        --font-compact-table: 1.12rem;
        --font-data-table: 1.24rem;
      }

      * {
        box-sizing: border-box;
      }

      html {
        min-height: 100%;
        scroll-padding-block-start: 0;
        scroll-behavior: smooth;
        background: var(--bg);
      }

      body {
        margin: 0;
        min-height: 100%;
        color: var(--ink);
        background:
          linear-gradient(180deg, rgba(15, 118, 110, 0.08), transparent 34rem),
          var(--bg);
        font-family:
          -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Noto Sans JP",
          "Segoe UI", sans-serif;
        font-size: var(--font-base);
        line-height: 1.56;
      }

      .talk {
        width: 100%;
      }

      .screen,
      .flow {
        width: min(var(--measure), calc(100% - 40px));
        margin: 0 auto;
        padding: 44px 0;
        min-height: 100svh;
      }

      .screen {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
      }

      .center {
        align-items: center;
        justify-content: center;
        text-align: center;
      }

      h1,
      h2,
      h3 {
        margin-top: 0;
        line-height: 1.24;
        letter-spacing: 0;
      }

      h1 {
        max-width: 12.5em;
        margin-bottom: 16px;
        font-size: clamp(2.9rem, 6.6vw, 5.7rem);
      }

      h2 {
        margin-bottom: 18px;
        font-size: clamp(2.25rem, 4.3vw, 3.95rem);
      }

      h3 {
        margin-bottom: 8px;
        font-size: 1.45rem;
      }

      p,
      ul,
      ol,
      table,
      pre {
        margin-top: 0;
        margin-bottom: 0.88rem;
      }

      a {
        color: var(--accent-3);
      }

      code {
        font-family: SFMono-Regular, Consolas, "Liberation Mono", monospace;
        font-size: 0.92em;
      }

      ruby {
        ruby-align: center;
      }

      rt {
        color: var(--muted);
        font-size: 0.48em;
        font-weight: 520;
        letter-spacing: 0;
      }

      :not(pre) > code {
        background: #e8edf2;
        padding: 0.12em 0.32em;
      }

      pre {
        max-width: 100%;
        max-height: 70svh;
        overflow: auto;
        border: 1px solid #394150;
        background: var(--code-bg);
        color: var(--code-ink);
        padding: 18px;
        font-size: 1rem;
        line-height: 1.5;
      }

      table {
        width: 100%;
        border-collapse: collapse;
        background: var(--paper);
        font-size: var(--font-table);
      }

      .compact-table {
        font-size: var(--font-compact-table);
        line-height: 1.45;
      }

      .data-table {
        font-size: var(--font-data-table);
        line-height: 1.5;
      }

      .data-table th,
      .data-table td {
        padding: 11px 13px;
      }

      .data-table td:nth-child(2) {
        font-size: 1.22rem;
        font-weight: 800;
        white-space: nowrap;
      }

      th,
      td {
        border: 1px solid var(--line);
        padding: 9px 11px;
        vertical-align: top;
      }

      th {
        background: #e8edf2;
        text-align: left;
      }

      .kicker {
        margin-bottom: 10px;
        color: var(--accent-2);
        font-size: 1rem;
        font-weight: 700;
        text-transform: uppercase;
      }

      .lead {
        max-width: 980px;
        color: var(--muted);
        font-size: clamp(1.32rem, 2.35vw, 1.8rem);
      }

      .title-stack {
        display: grid;
        gap: 14px;
        margin-bottom: 20px;
      }

      .paper-title {
        max-width: 13em;
        margin: 0;
        font-size: clamp(2.5rem, 6vw, 5.1rem);
        line-height: 1.12;
      }

      .paper-title + .paper-title {
        padding-top: 14px;
        border-top: 1px solid var(--line);
      }

      .byline {
        margin: 0;
        color: var(--muted);
        font-size: clamp(1.16rem, 1.9vw, 1.45rem);
        line-height: 1.7;
      }

      .muted-cell {
        color: var(--muted);
        font-size: 0.9em;
        font-weight: 500;
      }

      .note {
        margin: 18px 0;
        border-left: 4px solid var(--accent);
        background: var(--soft);
        padding: 14px 16px;
        color: #183d38;
      }

      .warn {
        border-left-color: var(--accent-2);
        background: var(--warn);
        color: #57270b;
      }

      .two-col {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 20px;
        align-items: start;
      }

      .three-col {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
      }

      .panel {
        border: 1px solid var(--line);
        background: var(--paper);
        padding: 15px;
      }

      .panel strong {
        display: block;
        margin-bottom: 7px;
      }

      .tag-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 0;
        list-style: none;
      }

      .tag-list li {
        border: 1px solid var(--line);
        background: var(--paper);
        padding: 5px 10px;
        font-size: 1rem;
      }

      .axis {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 18px;
        align-items: center;
      }

      .arrow {
        color: var(--accent);
        font-size: 2.4rem;
        line-height: 1;
      }

      .scale {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 8px;
        counter-reset: step;
      }

      .scale div {
        counter-increment: step;
        min-height: 132px;
        border-top: 4px solid var(--accent-3);
        background: var(--paper);
        padding: 12px;
      }

      .scale div::before {
        content: counter(step);
        display: inline-grid;
        place-items: center;
        width: 28px;
        height: 28px;
        margin-bottom: 10px;
        border-radius: 999px;
        background: var(--accent-3);
        color: white;
        font-weight: 700;
      }

      .diagram-block {
        display: grid;
        gap: 18px;
      }

      .diagram-svg {
        width: 100%;
        height: auto;
        border: 1px solid var(--line);
        background: var(--paper);
      }

      .diagram-svg text {
        fill: var(--ink);
        font-family:
          -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Noto Sans JP",
          "Segoe UI", sans-serif;
        letter-spacing: 0;
      }

      .diagram-svg .small {
        fill: var(--muted);
        font-size: var(--font-small);
      }

      .diagram-svg .label {
        font-size: 21px;
        font-weight: 700;
      }

      .diagram-svg .caption {
        fill: var(--muted);
        font-size: var(--font-small);
      }

      .diagram-svg .box {
        fill: #ffffff;
        stroke: #9fb1bd;
        stroke-width: 1.4;
      }

      .diagram-svg .soft-fill {
        fill: var(--soft);
      }

      .diagram-svg .blue-fill {
        fill: var(--soft-2);
      }

      .diagram-svg .warn-fill {
        fill: var(--warn);
      }

      .diagram-svg .stream {
        fill: none;
        stroke: var(--accent);
        stroke-width: 9;
        stroke-linecap: round;
      }

      .diagram-svg .arrow-line {
        fill: none;
        stroke: var(--accent-3);
        stroke-width: 2.5;
        marker-end: url(#arrowhead);
      }

      .diagram-svg .write-line {
        fill: none;
        stroke: var(--accent-2);
        stroke-width: 2.5;
        marker-end: url(#arrowhead-warn);
      }

      .diagram-notes {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .diagram-notes li {
        border-top: 3px solid var(--accent);
        background: var(--paper);
        padding: 10px 12px;
        font-size: 1rem;
      }

      .source-figure {
        display: grid;
        gap: 14px;
        margin: 18px 0;
      }

      .source-figure img {
        display: block;
        width: 100%;
        max-height: 68svh;
        object-fit: contain;
        border: 1px solid var(--line);
        background: var(--paper);
      }

      .source-figure figcaption {
        color: var(--muted);
        font-size: 0.92rem;
        line-height: 1.45;
      }

      .source-figure.compact-source img {
        max-height: 58svh;
      }

      .shape-note {
        display: inline-block;
        border: 1px solid var(--line);
        background: #f8fafc;
        padding: 0.28em 0.5em;
        font-family: SFMono-Regular, Consolas, "Liberation Mono", monospace;
        font-size: 0.9em;
      }

      .refs li {
        margin-bottom: 0.5rem;
      }

      @media (max-width: 760px) {
        body {
          font-size: var(--font-small);
        }

        .screen,
        .flow {
          width: min(100% - 24px, var(--measure));
          padding: 32px 0;
        }

        .screen {
          justify-content: flex-start;
        }

        .two-col,
        .three-col,
        .axis,
        .scale,
        .diagram-notes {
          grid-template-columns: 1fr;
        }

        .arrow {
          transform: rotate(90deg);
          justify-self: center;
        }
      }

      @media print {
        html,
        html.present {
        }

        body {
          background: #fff;
          font-size: 12pt;
        }

        .screen,
        .flow {
          width: auto;
          min-height: auto;
          padding: 24pt 0;
          page-break-inside: avoid;
        }
      }

      .kicker > :last-child,
      .lead > :last-child,
      .note > :last-child {
        margin-bottom: 0;
      }

      .compact-table table {
        font-size: inherit;
        line-height: inherit;
      }

      .quote {
        margin: 24px 0 0;
        border-left: 5px solid var(--accent-2);
        background: var(--warn);
        padding: 15px 18px;
        color: #57270b;
      }

      .quote strong {
        display: block;
        margin-bottom: 8px;
      }

      .case-tags ul {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin: 8px 0 24px;
        padding: 0;
        list-style: none;
      }

      .case-tags li {
        border: 1px solid #b9c8d2;
        background: #f8fafc;
        color: var(--muted);
        padding: 3px 9px;
        font-size: 0.9rem;
        font-weight: 700;
        line-height: 1.45;
      }

      .case-tags li:first-child {
        border-color: var(--accent);
        background: var(--soft);
        color: var(--accent);
      }