body.typography-page {
    --fontRatio: calc(32 / 27);
    --rootPx: 9.8;
    --minFontSize: calc((var(--rootPx) / var(--fontRatio)) * 1px);
    --fontSizeGrow: calc((var(--rootPx) / 9.8) * 0.55vw);
    --note00: clamp(var(--minFontSize), var(--fontSizeGrow), 1000000000px);
    --note01: calc(var(--note00) * var(--fontRatio));
    --note02: calc(var(--note01) * var(--fontRatio));
    --note03: calc(var(--note02) * var(--fontRatio));
    --note04: calc(var(--note03) * var(--fontRatio));
    --note05: calc(var(--note04) * var(--fontRatio));
    --note06: calc(var(--note05) * var(--fontRatio));
    --note07: calc(var(--note06) * var(--fontRatio));
    --note08: calc(var(--note07) * var(--fontRatio));
    --note09: calc(var(--note08) * var(--fontRatio));
    --note10: calc(var(--note09) * var(--fontRatio));
    --note11: calc(var(--note10) * var(--fontRatio));
    --note12: calc(var(--note11) * var(--fontRatio));
    --note13: calc(var(--note12) * var(--fontRatio));
    --note14: calc(var(--note13) * var(--fontRatio));
    --note15: calc(var(--note14) * var(--fontRatio));
    --note16: calc(var(--note15) * var(--fontRatio));
    --minFontSizeVW: calc((var(--rootPx) / var(--fontRatio)) * 1vw);
    --note00VW: clamp(var(--minFontSizeVW), 1vw, 1000000000px);
    --note01VW: calc(var(--note00VW) * var(--fontRatio));
    --bodyMinWidth: calc(100 / var(--fontRatio) * var(--note01) / 2);
    --bodyMinWidthVW: calc(100 / var(--fontRatio) * var(--note01VW) / 2);
    --type-small: var(--note02);
    --type-code: var(--note03);
    --type-body: var(--note03);
    --type-subtitle: var(--note04);
    --type-tertiary: var(--note02);
    --type-section: var(--note07);
    --type-title: var(--note10);
    --rhythm: var(--note06);
    --type-small-lines: 1;
    --type-code-lines: 1;
    --type-body-lines: 1;
    --type-subtitle-lines: 1;
    --type-tertiary-lines: 1;
    --type-section-lines: 2;
    --type-title-lines: 2;
    --type-small-line: var(--note04);
    --type-code-line: var(--note05);
    --type-body-line: var(--note06);
    --type-subtitle-line: var(--note07);
    --type-tertiary-line: var(--note04);
    --type-section-line: var(--note08);
    --type-title-line: var(--note11);
    --space-paragraph-lines: 1;
    --space-section-lines: 2;
    --space-rule-lines: 2;
    --space-page-lines: 3;
    --space-page-end-lines: 4;
    --space-code-lines: 1;
    --space-tight: var(--note03);
    --space-paragraph: var(--note04);
    --space-meta: var(--note05);
    --space-project: var(--space-paragraph);
    --space-subsection: var(--note07);
    --space-section: var(--note11);
    --space-rule: var(--note10);
    --space-rule-thin: var(--note08);
    --space-page: var(--note13);
    --space-page-end: var(--note14);
    --space-code: var(--note04);
    --page-measure: max(720px, calc(var(--type-title) * 15.5));

    width: min(var(--page-measure), calc(100vw - 48px));
    min-width: 0;
    max-width: none;
    padding: var(--space-page) var(--note09) var(--space-page-end);
}

body.typography-page .back {
    font-size: var(--type-small);
    line-height: var(--type-small-line);
    margin-bottom: var(--note10);
}

body.typography-page .doc-label {
    font-size: var(--type-small);
    line-height: var(--type-small-line);
    margin-bottom: var(--note03);
}

body.typography-page h1 {
    font-size: var(--type-title);
    line-height: var(--type-title-line);
    margin: 0 0 var(--space-paragraph);
}

body.typography-page h2 {
    font-size: var(--type-section);
    line-height: var(--type-section-line);
    margin: var(--space-section) 0 var(--space-paragraph);
}

body.typography-page h3 {
    font-size: var(--type-tertiary);
    line-height: var(--type-tertiary-line);
    margin: var(--space-subsection) 0 var(--note01);
}

body.typography-page p {
    font-size: var(--type-body);
    line-height: var(--type-body-line);
    margin: 0 0 var(--space-paragraph);
}

body.typography-page .subtitle {
    font-size: var(--type-subtitle);
    line-height: var(--type-subtitle-line);
    margin-bottom: var(--space-meta);
}

body.typography-page .meta,
body.typography-page .status-line {
    font-size: var(--type-small);
    line-height: var(--type-small-line);
    margin-bottom: var(--space-meta);
}

body.typography-page .project-links {
    gap: var(--space-project);
    margin-top: var(--space-paragraph);
}

body.typography-page .project-links a {
    font-size: var(--type-small);
    line-height: var(--type-small-line);
}

body.typography-page hr {
    margin: var(--space-rule) 0;
}

body.typography-page hr.thin {
    margin: var(--space-rule-thin) 0;
}

body.typography-page code {
    background-color: #282e39;
    color: #f0f0f0;
    font-size: var(--type-code);
    line-height: var(--type-code-line);
    padding: calc(var(--type-code) * 0.08) calc(var(--type-code) * 0.36);
}

body.typography-page code::selection,
body.typography-page .code-block pre::selection {
    background-color: rgb(166, 184, 150, 0.99);
    color: #17181b;
}

body.typography-page code::-moz-selection,
body.typography-page .code-block pre::-moz-selection {
    background-color: rgb(166, 184, 150, 0.99);
    color: #17181b;
}

body.typography-page .code-block {
    background-color: #282e39;
    border-left-color: rgb(166, 184, 150, 0.99);
    padding: var(--space-code) calc(var(--space-code) * var(--fontRatio));
    margin: var(--space-code) 0 var(--space-meta);
}

body.typography-page .code-block pre {
    color: #f0f0f0;
    font-size: var(--type-code);
    line-height: var(--type-code-line);
    margin: 0;
}

body.typography-page .code-caption {
    font-size: var(--type-small);
    line-height: var(--type-small-line);
    margin-top: calc(var(--space-tight) * -0.5);
    margin-bottom: var(--space-paragraph);
    padding-left: calc(var(--space-code) * var(--fontRatio));
}

body.typography-page .sources {
    margin: var(--space-tight) 0 var(--space-meta);
}

body.typography-page .sources li {
    font-size: var(--type-body);
    line-height: var(--type-body-line);
    padding-left: var(--space-meta);
    margin-bottom: var(--space-tight);
}

body.typography-page footer {
    margin-top: var(--note12);
    padding-top: var(--note06);
}

body.typography-page footer p {
    font-size: var(--type-small);
    line-height: var(--type-small-line);
}

body.typography-page .type-controls {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 20;
    width: min(320px, calc(100vw - 48px));
    border: 1px solid var(--rule);
    border-radius: 6px;
    background: rgba(250, 250, 248, 0.96);
    box-shadow: 0 18px 48px rgba(17, 17, 17, 0.08);
    margin: 0;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 12px;
    backdrop-filter: blur(12px);
}

body.typography-page .type-controls-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

body.typography-page .type-controls h2 {
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
}

body.typography-page .type-reset {
    border: 1px solid var(--rule);
    border-radius: 3px;
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
    font-size: 9.5px;
    letter-spacing: 0.14em;
    line-height: 1;
    padding: 6px 8px;
    text-transform: uppercase;
    transition:
        border-color 0.15s ease,
        color 0.15s ease;
}

body.typography-page .type-reset:hover {
    border-color: var(--ink);
    color: var(--ink);
}

body.typography-page .type-mode {
    border: 1px solid var(--rule);
    border-radius: 4px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0 0 10px;
    min-width: 0;
    padding: 2px;
}

body.typography-page .type-mode-option {
    color: var(--muted);
    cursor: pointer;
    font-size: 10px;
    line-height: 1;
    min-width: 0;
    position: relative;
    text-align: center;
}

body.typography-page .type-mode-option input {
    opacity: 0;
    position: absolute;
}

body.typography-page .type-mode-option span {
    border-radius: 3px;
    display: block;
    padding: 6px 5px;
}

body.typography-page .type-mode-option input:checked + span {
    background: var(--ink);
    color: var(--paper);
}

body.typography-page .type-mode-option input:focus-visible + span {
    outline: 1px solid var(--ink);
    outline-offset: 2px;
}

body.typography-page .type-control-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

body.typography-page .linked-readouts {
    border-top: 1px solid var(--rule);
    display: grid;
    gap: 4px 6px;
    grid-template-columns: 1fr;
    margin-top: 10px;
    padding-top: 10px;
}

body.typography-page .linked-readouts span {
    color: var(--muted);
    font-family: "Inconsolata", "Courier New", monospace;
    font-size: 10.5px;
    line-height: 1.2;
    min-width: 0;
    text-align: left;
}

body.typography-page .free-controls {
    display: none;
}

body.typography-page[data-type-mode="free"] .free-controls {
    display: block;
}

body.typography-page[data-type-mode="free"] .linked-readouts,
body.typography-page[data-type-mode="free"] [data-linked-only] {
    display: none;
}

body.typography-page .role-controls,
body.typography-page .line-controls,
body.typography-page .spacing-controls {
    border-top: 1px solid var(--rule);
    display: grid;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
}

body.typography-page .role-controls,
body.typography-page .line-controls,
body.typography-page .spacing-controls {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

body.typography-page .role-controls > .type-control,
body.typography-page .line-controls > .type-control,
body.typography-page .spacing-controls > .type-control {
    grid-column: span 3;
}

body.typography-page .role-controls > .type-control-third,
body.typography-page .spacing-controls > .type-control-third {
    grid-column: span 2;
}

body.typography-page .type-control {
    display: grid;
    gap: 4px;
    min-width: 0;
}

body.typography-page .type-control-label,
body.typography-page .type-control-value {
    font-size: 11px;
    line-height: 1.25;
}

body.typography-page .type-control-label {
    color: var(--ink);
    font-weight: 500;
}

body.typography-page .type-control-value {
    color: var(--muted);
    font-family: "Inconsolata", "Courier New", monospace;
}

body.typography-page .type-control input[type="range"] {
    accent-color: var(--ink);
    width: 100%;
}

body.typography-page .type-control.is-linked-dependent {
    opacity: 0.5;
}

body.typography-page .type-control.is-linked-dependent input[type="range"] {
    cursor: not-allowed;
}

@media only screen and (max-width: 767px) {
    body.typography-page {
        min-width: 0;
        width: auto;
    }
}

@media (max-width: 640px) {
    body.typography-page {
        padding: var(--space-page) var(--note06) var(--space-page-end);
    }

    body.typography-page .type-controls {
        top: 12px;
        right: 12px;
        width: min(300px, calc(100vw - 24px));
        padding: 12px;
    }

    body.typography-page .role-controls,
    body.typography-page .line-controls,
    body.typography-page .spacing-controls,
    body.typography-page .linked-readouts {
        grid-template-columns: 1fr;
    }

    body.typography-page .role-controls > .type-control,
    body.typography-page .line-controls > .type-control,
    body.typography-page .spacing-controls > .type-control {
        grid-column: auto;
    }
}