@font-face {
    font-family: "Orchard New Computer Modern";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/newcm/NewCM10-Book.otf") format("opentype");
}

@font-face {
    font-family: "Orchard New Computer Modern";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/newcm/NewCM10-BookItalic.otf") format("opentype");
}

:root {
    --influence-ink: #18201d;
    --influence-muted: #5e6863;
    --influence-paper: #f4f2ec;
    --influence-panel: #ffffff;
    --influence-rule: #d2d7d3;
    --influence-accent: #b43b2f;
    --influence-deep: #174f44;
    --influence-math-font: "Orchard New Computer Modern", "Latin Modern Math", "STIX Two Math", "Cambria Math", "Times New Roman", serif;
    --influence-math-size: 1.2rem;
    --influence-math-size-mobile: 1.1rem;
    --influence-figure-label-size: var(--influence-math-size);
    --influence-figure-label-size-mobile: var(--influence-math-size-mobile);
}

.influence-page {
    color: var(--influence-ink);
    margin: 0 auto;
    max-width: 1120px;
    padding: clamp(0.75rem, 2vw, 1.25rem) 1.25rem clamp(2rem, 6vw, 5rem);
}

.influence-header {
    border-bottom: 1px solid var(--influence-rule);
    max-width: 780px;
    padding-bottom: 2rem;
}

.language-switch {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.language-switch-icon {
    color: var(--influence-muted);
    flex: 0 0 1.25rem;
    height: 1.25rem;
    width: 1.25rem;
}

.language-switch select {
    background: var(--influence-panel);
    border: 1px solid var(--influence-rule);
    border-radius: 0.25rem;
    color: var(--influence-ink);
    font: inherit;
    letter-spacing: inherit;
    padding: 0.35rem 1.8rem 0.35rem 0.5rem;
    text-transform: inherit;
}

.language-switch select:focus-visible {
    border-color: var(--influence-accent);
    outline: 2px solid var(--influence-accent);
    outline-offset: 2px;
}

.language-switch select:hover {
    border-color: var(--influence-accent);
}

.language-switch .language-switch-current {
    color: var(--influence-ink);
    border-bottom: 2px solid var(--influence-accent);
}

.portal-masthead {
    align-items: center;
    color: var(--influence-deep);
    display: flex;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.75rem, 6vw, 5.5rem);
    font-weight: 700;
    gap: 0.4em;
    line-height: 1;
    margin-bottom: 2rem;
    text-decoration: none;
    width: fit-content;
}

.portal-masthead img {
    display: block;
    height: 1cap;
    width: auto;
}

.portal-masthead:focus-visible {
    outline: 2px solid var(--influence-accent);
    outline-offset: 4px;
}

.portal-sticky-header {
    position: sticky;
    top: 0;
    z-index: 10;
    isolation: isolate;
    background: var(--influence-paper);
    box-shadow: 0 0 0 100vmax var(--influence-paper);
    clip-path: inset(0 -100vmax);
    margin: 0 0 2rem;
    padding: 0.75rem 0;
}

.portal-sticky-header::before,
.portal-sticky-header::after,
.portal-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    height: 1px;
    z-index: -1;
    pointer-events: none;
    background: var(--influence-rule);
    box-shadow: 0 0 0 100vmax var(--influence-rule);
    clip-path: inset(0 -100vmax);
}

.portal-sticky-header::after {
    top: auto;
}

.portal-sticky-header-content {
    align-items: center;
    display: flex;
    width: 100%;
}

.portal-header-navigation {
    align-items: center;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.6rem 1.5rem;
    width: 100%;
}

.portal-header-navigation .theory-breadcrumb {
    grid-column: 1;
    grid-row: 1;
    flex-wrap: wrap;
    min-width: 0;
    overflow-wrap: anywhere;
    margin: 0;
}

.portal-header-navigation .influence-kicker {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
    text-align: left;
}

.portal-header-navigation .language-switch {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    margin: 0;
}

.influence-kicker,
.influence-label {
    color: var(--influence-accent);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
    margin: 0 0 0.65rem;
    text-transform: uppercase;
}

.influence-header h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.25rem, 5vw, 4.75rem);
    font-weight: 500;
    line-height: 1.02;
    margin: 0;
}

.influence-header > p:last-child {
    color: var(--influence-muted);
    font-size: 1.1rem;
    line-height: 1.65;
    margin: 1.25rem 0 0;
    max-width: 680px;
}

.influence-controls {
    align-items: center;
    background: var(--influence-paper);
    display: grid;
    column-gap: 0.6rem;
    grid-auto-flow: row;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: auto repeat(3, minmax(2.75rem, auto));
    margin: 2rem 0;
    padding: 1.25rem;
    row-gap: 0.2rem;
}

.influence-controls label {
    display: block;
}

.influence-controls .influence-section[hidden] {
    display: contents;
}

.influence-controls .influence-section[hidden] > * {
    visibility: hidden;
}

.influence-parameter-group {
    min-width: 0;
}

.influence-response-title {
    font-size: 0.85rem;
    font-weight: 700;
    grid-column: 1 / span 2;
    grid-row: 1;
}

.influence-parameter-title {
    font-size: 0.85rem;
    font-weight: 700;
    margin: 0;
    min-width: 0;
}

.influence-controls input[type="number"],
.influence-controls select {
    background: var(--influence-panel);
    border: 1px solid #adb6b1;
    border-radius: 3px;
    color: var(--influence-ink);
    min-height: 2.75rem;
    padding: 0.55rem 0.7rem;
    width: 100%;
}

.influence-controls input[type="range"] {
    accent-color: var(--influence-accent);
    align-self: center;
    min-width: 0;
    width: 100%;
}

.influence-controls button {
    background: var(--influence-deep);
    border: 0;
    border-radius: 3px;
    color: #ffffff;
    cursor: pointer;
    font-weight: 700;
    min-height: 2.75rem;
    overflow-wrap: anywhere;
    padding: 0.45rem 0.55rem;
    width: 100%;
}

.influence-errors:empty {
    display: none;
}

.influence-errors {
    border-left: 4px solid var(--influence-accent);
    color: #7d241c;
    margin: 1rem 0;
    padding: 0.5rem 1rem;
}

.influence-result {
    background: var(--influence-panel);
    border: 1px solid var(--influence-rule);
    padding: clamp(1rem, 3vw, 2rem);
}

.influence-settings {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.influence-settings summary {
    cursor: pointer;
    font-weight: 700;
}

.influence-settings label {
    font-size: 0.9rem;
}

.influence-settings select {
    background: var(--influence-panel);
    border: 1px solid #adb6b1;
    border-radius: 3px;
    color: var(--influence-ink);
    min-height: 2.5rem;
    padding: 0.4rem 0.6rem;
}

.influence-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.influence-workspace[data-toolbar-position="side"] {
    align-items: start;
    gap: 1rem;
    grid-template-columns: minmax(270px, 0.42fr) minmax(0, 1fr);
}

.influence-workspace[data-toolbar-position="side"] .influence-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto repeat(4, minmax(2.75rem, auto)) auto auto auto;
}

.influence-controls button[data-quantity="LeftReaction"] { grid-column: 1; grid-row: 2; }
.influence-controls button[data-quantity="RightReaction"] { grid-column: 2; grid-row: 2; }
.influence-controls button[data-quantity="SectionShear"] { grid-column: 1; grid-row: 3; }
.influence-controls button[data-quantity="SectionMoment"] { grid-column: 2; grid-row: 3; }
.influence-controls button[data-quantity="ShearDiagram"] { grid-column: 1; grid-row: 4; }
.influence-controls button[data-quantity="MomentDiagram"] { grid-column: 2; grid-row: 4; }
#auto-run-toggle { grid-column: 3; grid-row: 2; }
#run-button { grid-column: 3; grid-row: 3; }
#report-button { grid-column: 3; grid-row: 4; }

.influence-span,
.influence-load,
.influence-section.influence-parameter-group {
    display: contents;
}

.influence-span .influence-parameter-title { grid-column: 4; grid-row: 1; }
.influence-load .influence-parameter-title { grid-column: 5; grid-row: 1; }
.influence-section.influence-parameter-group .influence-parameter-title { grid-column: 6; grid-row: 1; }
.influence-span-input { grid-column: 4; grid-row: 2; }
.influence-load-input { grid-column: 5; grid-row: 2; }
.influence-section-input { grid-column: 6; grid-row: 2; }
.influence-span-slider { grid-column: 4; grid-row: 3; }
.influence-load-slider { grid-column: 5; grid-row: 3; }
.influence-section-slider { grid-column: 6; grid-row: 3; }

.influence-workspace[data-toolbar-position="side"] .influence-parameter-group {
    align-items: center;
    display: grid;
    grid-column: 1 / span 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto minmax(2.75rem, auto);
    row-gap: 0;
}

.influence-workspace[data-toolbar-position="side"] .influence-parameter-group .influence-parameter-title {
    grid-column: 1 / span 2;
    margin: 0.4rem 0 0;
}

.influence-workspace[data-toolbar-position="side"] #auto-run-toggle { grid-column: 1; grid-row: 5; }
.influence-workspace[data-toolbar-position="side"] #run-button { grid-column: 2; grid-row: 5; }
.influence-workspace[data-toolbar-position="side"] #report-button { grid-column: 1 / span 2; grid-row: 6; }
.influence-workspace[data-toolbar-position="side"] .influence-span { grid-row: 7 / span 2; }
.influence-workspace[data-toolbar-position="side"] .influence-load { grid-row: 9 / span 2; }
.influence-workspace[data-toolbar-position="side"] .influence-section.influence-parameter-group { grid-row: 11 / span 2; }

.influence-workspace[data-toolbar-position="side"] .influence-span-input,
.influence-workspace[data-toolbar-position="side"] .influence-load-input,
.influence-workspace[data-toolbar-position="side"] .influence-section-input {
    grid-column: 1;
    grid-row: 2;
}

.influence-workspace[data-toolbar-position="side"] .influence-span-slider,
.influence-workspace[data-toolbar-position="side"] .influence-load-slider,
.influence-workspace[data-toolbar-position="side"] .influence-section-slider {
    grid-column: 2;
    grid-row: 2;
}

.influence-result-heading {
    align-items: start;
    display: flex;
    gap: 2rem;
    justify-content: space-between;
}

.influence-result h2,
.influence-notes h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 500;
    margin: 0;
}

.influence-formula {
    background: var(--influence-paper);
    margin: 0;
    max-width: 560px;
    overflow-x: auto;
    font-size: var(--influence-math-size);
    padding: 0.75rem 1rem;
}

.influence-result-summary {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    margin-top: 1.5rem;
}

.influence-result-summary .influence-values {
    flex: 1;
    margin: 0;
}

.influence-result-summary .influence-formula {
    align-content: center;
    flex: 0 1 auto;
    min-width: 0;
}

.influence-result figure {
    margin: 2rem 0 1rem;
}

.influence-chart {
    background: #fbfcfa;
    border-bottom: 1px solid var(--influence-rule);
    display: block;
    height: auto;
    width: 100%;
}

.chart-axis {
    stroke: #7e8883;
    stroke-width: 1.5;
}

.chart-support {
    stroke: #c4cac7;
    stroke-dasharray: 4 5;
    stroke-width: 1;
}

.chart-line {
    fill: none;
    stroke: var(--influence-accent);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4;
}

.chart-dimension-line,
.chart-dimension-dot {
    fill: #8d9792;
    stroke: #8d9792;
    stroke-width: 1.25;
}

.influence-chart .chart-dimension-label {
    fill: var(--influence-muted);
    font-size: 12px;
    font-style: italic;
    paint-order: stroke;
    stroke: #fbfcfa;
    stroke-linejoin: round;
    stroke-width: 4px;
}

.influence-chart text {
    fill: var(--influence-muted);
    font-family: var(--influence-math-font);
    font-size: 14px;
}

.influence-result figcaption,
.influence-notes {
    color: var(--influence-muted);
    line-height: 1.65;
}

.influence-values {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 1.5rem 0 0;
}

.influence-values > div {
    background: var(--influence-paper);
    padding: 1rem;
}

.influence-values dt {
    color: var(--influence-muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.influence-values dd {
    font-family: var(--influence-math-font);
    font-size: 1.35rem;
    font-variant-numeric: lining-nums tabular-nums;
    margin: 0.35rem 0 0;
}

.influence-notes {
    max-width: 760px;
    padding: 2.5rem 0 0;
}

.theory-link,
.theory-breadcrumb a,
.theory-toc a {
    color: var(--influence-deep);
    font-weight: 700;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.theory-link {
    display: inline-block;
    margin-top: 0.75rem;
}

.theory-page {
    color: var(--influence-ink);
    margin: 0 auto;
    max-width: 1240px;
    padding: clamp(0.75rem, 2vw, 1.25rem) 1.25rem 7rem;
}

.theory-breadcrumb {
    align-items: center;
    color: var(--influence-muted);
    display: flex;
    font-size: 0.88rem;
    gap: 0.65rem;
    margin-bottom: 3rem;
}

.theory-page-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    margin: -1.75rem 0 2.5rem;
}

.theory-page-switch a {
    color: var(--influence-deep);
    font-size: 0.92rem;
    font-weight: 700;
    text-underline-offset: 0.2em;
}

.theory-header {
    border-bottom: 1px solid var(--influence-rule);
    max-width: 900px;
    padding-bottom: 2.5rem;
}

.theory-header h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.4rem, 5vw, 5rem);
    font-weight: 500;
    line-height: 1.02;
    margin: 0;
}

.theory-header > p:last-child {
    color: var(--influence-muted);
    font-size: 1.15rem;
    line-height: 1.7;
    margin: 1.4rem 0 0;
    max-width: 760px;
}

.theory-layout {
    display: grid;
    gap: clamp(2rem, 6vw, 6rem);
    grid-template-columns: minmax(0, 850px) 210px;
    margin-top: 3.5rem;
}

.theory-article section {
    border-top: 1px solid var(--influence-rule);
    padding: 3.5rem 0 1rem;
}

.theory-article section:first-child {
    border-top: 0;
    padding-top: 0;
}

.theory-section-number {
    color: var(--influence-accent);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 3rem;
    margin: 0 0 0.65rem;
}

.theory-article h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.8rem, 4vw, 2.75rem);
    font-weight: 500;
    line-height: 1.15;
    margin: 0 0 1.4rem;
}

.theory-article h3 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.35rem;
    font-weight: 500;
    margin: 2rem 0 0.6rem;
}

.theory-article > section > p,
.theory-checks {
    color: #3f4944;
    font-size: 1.03rem;
    line-height: 1.8;
    max-width: 760px;
}

.theory-equation {
    font-size: var(--influence-math-size);
    margin: 1.5rem 0;
    max-width: 820px;
    overflow-x: auto;
    padding: 0.5rem 0;
}

.theory-equation mjx-container {
    font-family: var(--influence-math-font);
    font-size: var(--influence-math-size);
}

.theory-equation--result {
    background: var(--influence-paper);
    border-left: 4px solid var(--influence-accent);
    padding: 1rem clamp(0.75rem, 3vw, 1.75rem);
}

.notation-list {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 2rem 0;
}

.notation-list > div {
    background: var(--influence-paper);
    display: grid;
    gap: 1rem;
    grid-template-columns: 4rem 1fr;
    padding: 1rem;
}

.notation-list dt {
    font-weight: 700;
}

.notation-list dd {
    color: var(--influence-muted);
    margin: 0;
}

.theory-callout {
    border: 1px solid var(--influence-rule);
    margin: 2rem 0;
    max-width: 760px;
    padding: 1.25rem 1.5rem;
}

.theory-callout p {
    color: var(--influence-muted);
    line-height: 1.65;
    margin: 0.45rem 0 0;
}

.load-case-grid {
    margin: 2rem 0;
}

.load-case-grid .statics-figure,
.theory-figure-comparison .statics-figure {
    margin: 0 auto 2rem;
    width: var(--theory-figure-width);
}

.theory-figure-comparison {
    margin: 2rem 0;
}

.theory-figure-comparison--single {
    max-width: none;
}

.statics-figure {
    border: 1px solid var(--influence-rule);
    margin: 0;
    min-width: 0;
}

.statics-figure svg {
    background: #fbfcfa;
    display: block;
    height: auto;
    width: 100%;
}

.tikz-figure {
    background: #fbfcfa;
    display: block;
    height: auto;
    width: 100%;
}

.statics-figure figcaption {
    border-top: 1px solid var(--influence-rule);
    color: var(--influence-muted);
    line-height: 1.5;
    padding: 1rem;
}

.beam-member {
    stroke: var(--influence-ink);
    stroke-width: 8;
}

.structural-member,
.section-outline {
    fill: none;
    stroke: var(--influence-ink);
    stroke-width: 4;
}

.structural-member--truss {
    stroke-width: 3;
}

.structural-member--brace {
    stroke: var(--influence-deep);
}

.section-outline--filled {
    fill: color-mix(in srgb, var(--influence-deep) 12%, transparent);
}

.structural-node {
    fill: var(--influence-ink);
}

.structural-support {
    fill: var(--influence-paper);
    stroke: var(--influence-ink);
    stroke-width: 2;
}

.member-label {
    fill: var(--influence-muted);
    font-family: var(--influence-math-font);
    font-size: var(--influence-figure-label-size);
}

.beam-support {
    fill: var(--influence-paper);
    stroke: var(--influence-ink);
    stroke-width: 3;
}

.ground-line {
    stroke: var(--influence-ink);
    stroke-width: 3;
}

.force-arrow {
    stroke-width: 3;
}

.force-arrow--reaction {
    stroke: var(--influence-deep);
}

.force-arrow--load {
    stroke: var(--influence-accent);
}

.arrow-marker--reaction {
    fill: var(--influence-deep);
}

.force-arrow + text,
.force-label {
    fill: var(--influence-ink);
    font-family: var(--influence-math-font);
    font-size: var(--influence-figure-label-size);
}

.statics-figure text {
    font-style: normal;
}

.statics-figure .math-symbol {
    font-style: italic;
}

.statics-figure marker path {
    fill: var(--influence-ink);
}

.section-cut {
    stroke: var(--influence-accent);
    stroke-dasharray: 8 6;
    stroke-width: 3;
}

.section-label,
.support-label,
.dimension-label {
    fill: var(--influence-muted);
    font-family: var(--influence-math-font);
    font-size: var(--influence-figure-label-size);
}

.dimension-line {
    stroke: #8d9792;
    stroke-width: 1.5;
}

circle.dimension-line {
    fill: #8d9792;
    stroke: none;
}

.influence-line {
    fill: none;
    stroke: var(--influence-accent);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4;
}

.influence-line-fill {
    fill: var(--influence-accent);
    fill-opacity: 0.14;
    stroke: none;
}

.influence-line-discontinuity {
    stroke: var(--influence-accent);
    stroke-dasharray: 6 5;
    stroke-width: 2.5;
}

.influence-line-guide {
    fill: none;
    stroke: #8d9792;
    stroke-dasharray: 3 4;
    stroke-width: 2;
}

.influence-line-point {
    fill: var(--influence-ink);
    stroke: var(--influence-ink);
}

.influence-line-load-value,
.influence-line-ordinate-label {
    fill: var(--influence-deep);
    font-family: var(--influence-math-font);
    font-size: var(--influence-figure-label-size);
    font-variant-numeric: lining-nums tabular-nums;
}

.influence-line-ordinate-label {
    dominant-baseline: middle;
    fill: var(--influence-muted);
}

@media (max-width: 760px) {
    .force-arrow + text,
    .force-label {
        font-size: var(--influence-figure-label-size-mobile);
    }

    .section-label,
    .support-label,
    .dimension-label,
    .influence-line-load-value,
    .influence-line-ordinate-label {
        font-size: var(--influence-figure-label-size-mobile);
    }
}

.theory-checks {
    padding-left: 1.25rem;
}

.theory-checks li {
    margin-bottom: 0.6rem;
    padding-left: 0.35rem;
}

.theory-toc {
    align-self: start;
    border-left: 1px solid var(--influence-rule);
    display: grid;
    gap: 0.75rem;
    padding-left: 1.25rem;
    position: sticky;
    top: calc(var(--portal-header-height, 0px) + 1rem);
    max-height: calc(100dvh - var(--portal-header-height, 0px) - 2rem);
    overflow-y: auto;
}

.theory-toc p {
    font-size: 0.78rem;
    font-weight: 700;
    margin: 0 0 0.3rem;
    text-transform: uppercase;
}

.theory-toc a {
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
}

.theory-toc a:hover {
    text-decoration: underline;
}

.theory-toc .theory-toc-calculator {
    border-top: 1px solid var(--influence-rule);
    color: var(--influence-accent);
    font-weight: 700;
    margin-top: 0.5rem;
    padding-top: 1rem;
}

.article-content {
    color: #3f4944;
    font-size: 1.03rem;
    line-height: 1.8;
    min-width: 0;
    overflow-wrap: anywhere;
}

.article-content p,
.article-content ul,
.article-content ol {
    max-width: 760px;
}

.article-content li {
    margin-bottom: 0.75rem;
}

.article-content ol[type="a"] > li::marker {
    content: counter(list-item, lower-alpha) ") ";
}

.article-content .theory-section-number {
    display: block;
}

.article-content h3 .theory-section-number {
    display: inline;
    font-size: inherit;
    margin-right: 0.25rem;
}

.article-content section section {
    border: 0;
    padding: 1rem 0 0;
}

.article-content figure {
    margin: 2rem 0;
}

.article-content figure img {
    display: block;
    height: auto;
    max-width: 100%;
    margin: 0 auto;
}

.article-content figcaption {
    color: var(--influence-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-top: 0.75rem;
}

.article-actions {
    margin-top: 1.5rem;
}

.article-toc-subsection {
    padding-left: 0.75rem;
}

.article-mobile-toc {
    display: none;
}

.article-related {
    border-top: 1px solid var(--influence-rule);
    margin-top: 3rem;
    padding-top: 2rem;
}

@media (max-width: 760px) {
    .article-mobile-toc {
        border-bottom: 1px solid var(--influence-rule);
        display: block;
        margin-top: 1.5rem;
        padding-bottom: 1rem;
    }

    .article-mobile-toc summary {
        cursor: pointer;
        font-weight: 700;
    }

    .article-mobile-toc nav {
        display: grid;
        gap: 0.75rem;
        padding-top: 1rem;
    }
}

@media print {
    .article-page .portal-masthead,
    .article-page .portal-sticky-header,
    .article-page .theory-toc,
    .article-mobile-toc,
    .article-actions,
    .article-related {
        display: none;
    }

    .article-page .theory-layout {
        display: block;
    }

    .article-content figure {
        break-inside: avoid;
    }
}

@media (max-width: 760px) {
    .influence-workspace[data-toolbar-position="side"] {
        grid-template-columns: minmax(0, 1fr);
    }

    .influence-workspace[data-toolbar-position="top"] .influence-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto repeat(4, minmax(2.75rem, auto)) auto auto auto;
    }

    .influence-workspace[data-toolbar-position="top"] #auto-run-toggle {
        grid-column: 1;
        grid-row: 5;
    }

    .influence-workspace[data-toolbar-position="top"] #run-button {
        grid-column: 2;
        grid-row: 5;
    }

    .influence-workspace[data-toolbar-position="top"] #report-button {
        grid-column: 1 / span 2;
        grid-row: 6;
    }

    .influence-workspace[data-toolbar-position="top"] .influence-parameter-group {
        align-items: center;
        display: grid;
        grid-column: 1 / span 2;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto minmax(2.75rem, auto);
        row-gap: 0;
    }

    .influence-workspace[data-toolbar-position="top"] .influence-parameter-title {
        grid-column: 1 / span 2;
        margin: 0.4rem 0 0;
    }

    .influence-workspace[data-toolbar-position="top"] .influence-span { grid-row: 7 / span 2; }
    .influence-workspace[data-toolbar-position="top"] .influence-load { grid-row: 9 / span 2; }
    .influence-workspace[data-toolbar-position="top"] .influence-section.influence-parameter-group { grid-row: 11 / span 2; }

    .influence-workspace[data-toolbar-position="top"] .influence-span-input,
    .influence-workspace[data-toolbar-position="top"] .influence-load-input,
    .influence-workspace[data-toolbar-position="top"] .influence-section-input {
        grid-column: 1;
        grid-row: 2;
    }

    .influence-workspace[data-toolbar-position="top"] .influence-span-slider,
    .influence-workspace[data-toolbar-position="top"] .influence-load-slider,
    .influence-workspace[data-toolbar-position="top"] .influence-section-slider {
        grid-column: 2;
        grid-row: 2;
    }

    .influence-result-summary {
        flex-direction: column;
    }

    .influence-result-heading {
        display: block;
    }

    .influence-formula {
        margin-top: 1rem;
    }

    .influence-values {
        grid-template-columns: 1fr;
    }

    .theory-layout {
        display: block;
    }

    .theory-toc {
        display: none;
    }

    .notation-list {
        grid-template-columns: 1fr;
    }

    .theory-equation {
        font-size: var(--influence-math-size-mobile);
    }

    .theory-equation mjx-container {
        font-size: var(--influence-math-size-mobile);
    }
}

.influence-slider {
    display: block;
    margin: 0;
}

.influence-controls button[data-quantity] {
    background: var(--influence-panel);
    border: 1px solid #adb6b1;
    border-radius: 3px;
    color: var(--influence-ink);
    cursor: pointer;
    font-weight: 700;
    min-height: 2.75rem;
    overflow-wrap: anywhere;
    padding: 0.55rem 0.7rem;
    width: 100%;
}

.influence-controls button[data-quantity][aria-pressed="true"] {
    background: var(--influence-deep);
    border-color: var(--influence-deep);
    color: #ffffff;
}

#run-button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

#auto-run-toggle[aria-pressed="true"] {
    background: var(--influence-accent);
}

.chart-discontinuity {
    stroke: var(--influence-accent);
    stroke-width: 2.5;
}

.chart-load,
.chart-load-guide {
    fill: none;
    stroke: var(--influence-deep);
    stroke-linecap: round;
    stroke-width: 2;
}

.chart-load-guide {
    stroke: #8d9792;
    stroke-dasharray: 3 4;
}

.chart-load-head {
    fill: var(--influence-deep);
    stroke: var(--influence-deep);
}

.chart-load-point {
    fill: var(--influence-ink);
    stroke: var(--influence-ink);
}

.chart-load-label,
.chart-load-value {
    fill: var(--influence-deep);
    font-size: 16px;
    font-weight: 700;
}

.influence-chart .beam-support,
.influence-chart .ground-line,
.influence-chart .section-cut {
    stroke-width: 2;
}

.influence-chart .support-label,
.influence-chart .section-label {
    font-size: 16px;
}

.portal-page {
    color: var(--influence-ink);
    margin: 0 auto;
    max-width: 1120px;
    padding: clamp(0.75rem, 2vw, 1.25rem) 1.25rem clamp(2rem, 6vw, 5rem);
}

.portal-hero {
    align-items: center;
    border-bottom: 1px solid var(--influence-rule);
    display: grid;
    gap: clamp(2rem, 7vw, 7rem);
    grid-template-columns: 1fr;
    min-height: 28rem;
    padding: 2rem 0 clamp(3rem, 7vw, 6rem);
}

.portal-author-hero {
    align-items: center;
    border-bottom: 1px solid var(--influence-rule);
    display: grid;
    gap: clamp(1.5rem, 5vw, 4rem);
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
    padding: 1rem 0 3rem;
}

.portal-author-photo {
    border: 1px solid var(--influence-rule);
    border-radius: 4px;
    display: block;
    height: auto;
    width: 100%;
}

.portal-author-hero h1,
.portal-author-resume h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 500;
    line-height: 1.15;
    margin: 0;
}

.portal-author-hero h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    overflow-wrap: anywhere;
}

.portal-author-credentials {
    color: var(--influence-deep);
    font-size: 1.1rem;
    margin: 1rem 0 0;
}

.portal-author-resume {
    max-width: 52rem;
}

.portal-author-resume section {
    border-bottom: 1px solid var(--influence-rule);
    padding: 2rem 0;
}

.portal-author-resume h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.portal-author-resume p {
    color: var(--influence-muted);
    font-size: 1.05rem;
    line-height: 1.75;
    margin: 1rem 0 0;
}

.portal-hero h1,
.portal-mission h2,
.portal-section-heading h2,
.portal-supporting-practice h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 500;
    line-height: 1.05;
    margin: 0;
}

.portal-hero h1 {
    font-size: clamp(3.5rem, 10vw, 7.75rem);
    letter-spacing: 0;
}

.portal-introduction {
    color: var(--influence-muted);
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    line-height: 1.65;
    margin: 1.5rem 0 0;
    max-width: 42rem;
}

.portal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

.portal-button {
    align-items: center;
    border: 1px solid var(--influence-deep);
    border-radius: 3px;
    display: inline-flex;
    font-size: 0.92rem;
    font-weight: 700;
    min-height: 2.9rem;
    padding: 0.55rem 1rem;
    text-decoration: none;
}

.portal-button-primary {
    background: var(--influence-deep);
    color: #ffffff;
}

.portal-button-secondary {
    color: var(--influence-deep);
}

.portal-button:hover {
    border-color: var(--influence-accent);
}

.portal-button-primary:hover {
    background: var(--influence-accent);
}

.portal-button-secondary:hover {
    color: var(--influence-accent);
}

.portal-hero-logo {
    align-self: start;
    display: block;
    height: auto;
    margin: 1.5rem 0;
    max-width: 42rem;
    width: 100%;
}

.portal-footer {
    align-items: center;
    background: var(--influence-paper);
    box-shadow: 0 0 0 100vmax var(--influence-paper);
    clip-path: inset(0 -100vmax);
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem clamp(1.5rem, 4vw, 4rem);
    isolation: isolate;
    justify-content: flex-start;
    margin: 3rem auto 0;
    max-width: 1120px;
    padding: 1rem 1.25rem;
    position: relative;
}

.theory-page + .portal-footer {
    max-width: 1240px;
}

.portal-footer-brand {
    display: block;
    flex: 0 0 10rem;
}

.portal-footer-brand img {
    display: block;
    height: auto;
    width: 100%;
}

.portal-footer-details {
    color: var(--influence-muted);
    font-size: 1.56rem;
    line-height: 1.45;
}

.portal-footer-details a {
    color: var(--influence-deep);
    font-weight: 700;
}

.portal-footer-details p {
    margin: 0.15rem 0 0;
}

.portal-footer-details nav {
    font-size: 1rem;
    margin: 0.4rem 0;
}

.portal-footer-sponsor {
    color: var(--influence-muted);
    flex: 0 1 14rem;
    text-align: center;
}

.portal-footer-sponsor p {
    margin: 0 0 0.75rem;
}

.portal-footer-sponsor a,
.portal-footer-sponsor img {
    display: block;
}

.portal-footer-sponsor img {
    height: auto;
    width: 100%;
}

@media print {
    .portal-footer {
        margin-top: 2rem;
    }
}

.portal-mission {
    border-bottom: 1px solid var(--influence-rule);
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: clamp(3rem, 7vw, 6rem) 0;
}

.portal-mission h2,
.portal-section-heading h2,
.portal-supporting-practice h2 {
    font-size: clamp(2rem, 4vw, 3.4rem);
}

.portal-mission > p,
.portal-section-heading > p,
.portal-supporting-practice > p {
    color: var(--influence-muted);
    font-size: 1.05rem;
    line-height: 1.65;
    margin: 0;
}

.portal-mission > .portal-button {
    justify-self: start;
}

.portal-library {
    padding: clamp(3rem, 7vw, 6rem) 0;
}

.portal-index-page .theory-breadcrumb {
    margin-bottom: 2rem;
}

.portal-index-header {
    border-bottom: 1px solid var(--influence-rule);
    max-width: 780px;
    padding-bottom: clamp(2rem, 5vw, 4rem);
}

.portal-index-header h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.8rem, 7vw, 5.5rem);
    font-weight: 500;
    line-height: 1.02;
    margin: 0;
}

.portal-index-header > p:last-child {
    color: var(--influence-muted);
    font-size: 1.1rem;
    line-height: 1.65;
    margin: 1.25rem 0 0;
}

.portal-index-page .portal-card-grid {
    margin-top: clamp(2rem, 5vw, 4rem);
}

.portal-section-heading {
    align-items: end;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    margin-bottom: 2rem;
}

.portal-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.portal-card {
    border: 1px solid var(--influence-rule);
    color: inherit;
    display: flex;
    flex-direction: column;
    min-height: 17rem;
    padding: 1.4rem;
    text-decoration: none;
}

.portal-card:not(:first-child) {
    border-left: 0;
}

.portal-card:nth-child(3n + 1) {
    border-left: 1px solid var(--influence-rule);
}

.portal-card:nth-child(n + 4) {
    border-top: 0;
}

.portal-card h2,
.portal-card h3 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.55rem;
    font-weight: 500;
    line-height: 1.15;
    margin: auto 0 0.8rem;
}

.portal-card p {
    color: var(--influence-muted);
    line-height: 1.55;
    margin: 0;
}

.portal-card-index,
.portal-card-status,
.portal-card-link {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.portal-card-index,
.portal-card-status {
    color: var(--influence-muted);
}

.portal-card-link {
    color: var(--influence-accent);
    margin-top: 1.25rem;
}

.portal-card:not(.portal-card-future):hover {
    background: var(--influence-deep);
    border-color: var(--influence-deep);
    color: #ffffff;
}

.portal-card:not(.portal-card-future):hover p,
.portal-card:not(.portal-card-future):hover .portal-card-index {
    color: #d9e4df;
}

.portal-card:not(.portal-card-future):hover .portal-card-link {
    color: #ffffff;
}

.portal-card-future {
    background: var(--influence-paper);
}

.portal-supporting-practice {
    align-items: center;
    background: var(--influence-deep);
    color: #ffffff;
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin-bottom: 1rem;
    padding: clamp(1.5rem, 4vw, 3rem);
}

.portal-supporting-practice .influence-kicker {
    color: #f1b3aa;
}

.portal-supporting-practice > p {
    color: #d9e4df;
}
}

.uniform-load-workspace[data-toolbar-position="side"] > .uniform-load-controls {
grid-column: 1;
grid-row: 1;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: none;
min-width: 0;
width: 100%;
}

.uniform-load-workspace[data-toolbar-position="side"] > #uniform-load-output {
grid-column: 2;
grid-row: 1;
min-width: 0;
}

.uniform-load-workspace[data-toolbar-position="side"] .uniform-load-controls > * {
grid-column: 1;
grid-row: auto;
}

.uniform-load-workspace[data-toolbar-position="side"] .uniform-load-controls > button[data-diagram] {
grid-column: 1;
grid-row: auto;
}

.uniform-load-workspace[data-toolbar-position="side"] #auto-run-toggle,
.uniform-load-workspace[data-toolbar-position="side"] #run-button {
grid-column: 1;
grid-row: auto;
}

.uniform-load-workspace[data-toolbar-position="side"] #span-group,
.uniform-load-workspace[data-toolbar-position="side"] #load-group,
.uniform-load-workspace[data-toolbar-position="side"] #section-group {
grid-column: 1;
grid-row: auto;
}

.uniform-load-result .influence-chart .diagram-reaction-value,
.uniform-load-result .influence-chart .diagram-section-force-label,
.uniform-load-result .influence-chart .diagram-extreme-label {
fill: var(--influence-deep);
font-size: 14px;
font-weight: 700;
}

@media (max-width: 600px) {
.uniform-load-workspace[data-toolbar-position="side"] {
    grid-template-columns: minmax(0, 1fr);
}

.uniform-load-workspace[data-toolbar-position="side"] > #uniform-load-output {
    grid-column: 1;
    grid-row: 2;
}
}

.uniform-load-workspace {
display: grid;
grid-template-columns: minmax(0, 1fr);
}

.uniform-load-workspace[data-toolbar-position="side"] {
align-items: start;
gap: 1rem;
grid-template-columns: minmax(270px, 0.42fr) minmax(0, 1fr);
}

.uniform-load-controls {
align-items: end;
background: var(--influence-paper);
display: grid;
gap: 0.65rem;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin: 2rem 0;
padding: 1.25rem;
}

.uniform-load-controls > button {
background: var(--influence-deep);
border: 0;
border-radius: 3px;
color: #ffffff;
cursor: pointer;
font-weight: 700;
min-height: 2.75rem;
padding: 0.45rem 0.55rem;
width: 100%;
}

.uniform-load-controls > button[aria-pressed="true"] {
background: var(--influence-accent);
}

.uniform-load-controls > button:disabled {
cursor: default;
opacity: 0.7;
}

.uniform-load-response-title {
align-self: end;
font-size: 0.85rem;
font-weight: 700;
grid-column: 1;
}

.uniform-load-controls > button[data-diagram="ShearForce"] { grid-column: 1; grid-row: 2; }
.uniform-load-controls > button[data-diagram="BendingMoment"] { grid-column: 2; grid-row: 2; }
#auto-run-toggle { grid-column: 3; grid-row: 1; }
#run-button { grid-column: 3; grid-row: 2; }

.uniform-load-parameter-group {
display: grid;
gap: 0.3rem;
grid-template-rows: auto minmax(2.75rem, auto) auto;
min-width: 0;
}

#span-group { grid-column: 1; grid-row: 3; }
#load-group { grid-column: 2; grid-row: 3; }
#section-group { grid-column: 3; grid-row: 3; }

.uniform-load-parameter-group label {
font-size: 0.85rem;
font-weight: 700;
}

.uniform-load-parameter-group input[type="number"] {
background: var(--influence-panel);
border: 1px solid #adb6b1;
border-radius: 3px;
color: var(--influence-ink);
min-height: 2.75rem;
padding: 0.55rem 0.7rem;
width: 100%;
}

.uniform-load-parameter-group input[type="range"] {
accent-color: var(--influence-accent);
min-width: 0;
width: 100%;
}

.uniform-load-result .statics-figure {
margin: 2rem 0 1rem;
}

.uniform-load-result .influence-chart .diagram-curve {
fill: none;
stroke: var(--influence-accent);
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 4;
}

.uniform-load-result .influence-chart .diagram-curve-fill {
fill: var(--influence-accent);
fill-opacity: 0.14;
stroke: none;
}

.uniform-load-result .influence-chart .distributed-load-line,
.uniform-load-result .influence-chart .distributed-load-arrow {
stroke: var(--influence-deep);
stroke-width: 1.5;
}

.uniform-load-result .influence-chart .diagram-section-guide {
stroke: var(--influence-muted);
stroke-dasharray: 4 4;
stroke-width: 1.5;
}

.uniform-load-result .influence-chart .diagram-section-point {
fill: var(--influence-ink);
}

.uniform-load-result .influence-chart .diagram-section-label,
.uniform-load-result .influence-chart .distributed-load-label {
fill: var(--influence-deep);
font-size: 14px;
font-weight: 700;
}

.uniform-load-reactions {
margin-top: 1rem;
}

.uniform-load-workspace[data-toolbar-position="side"] .uniform-load-controls {
align-items: stretch;
grid-template-columns: minmax(0, 1fr);
grid-auto-flow: row;
}

.uniform-load-workspace[data-toolbar-position="side"] .uniform-load-controls > * {
grid-column: 1;
grid-row: auto;
}

.uniform-load-workspace[data-toolbar-position="side"] .uniform-load-response-title {
grid-column: 1;
}

@media (max-width: 760px) {
.uniform-load-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.uniform-load-response-title,
.uniform-load-parameter-group {
    grid-column: 1 / span 2;
}

#span-group { grid-row: 4; }
#load-group { grid-row: 5; }
#section-group { grid-row: 6; }

.uniform-load-controls > button[data-diagram="ShearForce"] { grid-column: 1; grid-row: 2; }
.uniform-load-controls > button[data-diagram="BendingMoment"] { grid-column: 2; grid-row: 2; }
#auto-run-toggle { grid-column: 1; grid-row: 3; }
#run-button { grid-column: 2; grid-row: 3; }
}

.uniform-load-workspace[data-toolbar-position="side"] .uniform-load-controls {
    grid-template-columns: minmax(0, 1fr);
}

.uniform-load-workspace[data-toolbar-position="side"] .uniform-load-controls > * {
    grid-column: 1;
    grid-row: auto;
}

.uniform-load-workspace[data-toolbar-position="side"] .uniform-load-controls > button[data-diagram] {
    grid-column: 1;
    grid-row: auto;
}

.uniform-load-workspace[data-toolbar-position="side"] #auto-run-toggle,
.uniform-load-workspace[data-toolbar-position="side"] #run-button,
.uniform-load-workspace[data-toolbar-position="side"] #span-group,
.uniform-load-workspace[data-toolbar-position="side"] #load-group,
.uniform-load-workspace[data-toolbar-position="side"] #section-group {
    grid-column: 1;
    grid-row: auto;
}

@media (max-width: 760px) {
    .portal-header-navigation {
        gap: 0.6rem;
    }

    .portal-hero,
    .portal-author-hero,
    .portal-mission,
    .portal-section-heading,
    .portal-supporting-practice {
        grid-template-columns: 1fr;
    }

    .portal-hero {
        min-height: auto;
    }

    .portal-author-photo {
        max-width: 16rem;
    }

    .portal-card-grid {
        grid-template-columns: 1fr;
    }

    .portal-card,
    .portal-card:not(:first-child),
    .portal-card:nth-child(n) {
        border-left: 1px solid var(--influence-rule);
        border-top: 0;
        min-height: 13rem;
    }

    .portal-card:first-child {
        border-top: 1px solid var(--influence-rule);
    }
}

@media (max-width: 600px) {
    .uniform-load-workspace[data-toolbar-position="side"] {
        grid-template-columns: minmax(0, 1fr);
    }

    .uniform-load-workspace[data-toolbar-position="side"] > #uniform-load-output {
        grid-column: 1;
        grid-row: 2;
    }
}