:root {
        --bg: #ece3d2;
        --ink: #182227;
        --ink-soft: #56636d;
        --line: #d9cdb8;
        --card: #fffdf8;
        --accent-red: #b9372f;
        --accent-blue: #2f6f9a;
        --accent-green: #2f7f54;
        --accent-gold: #9f691a;
        --mode-observed: #2f6f9a;
        --mode-interpolated: #9f691a;
        --mode-projected: #b9372f;
        --stage-top: 104px;
      }

      * {
        box-sizing: border-box;
      }

      html,
      body {
        margin: 0;
      }

      body {
        font-family: "Avenir Next", "Gill Sans", "Segoe UI", sans-serif;
        color: var(--ink);
        background:
          radial-gradient(circle at 12% 12%, #edd9be 0%, transparent 35%),
          radial-gradient(circle at 90% 20%, #d8e6f1 0%, transparent 40%),
          linear-gradient(180deg, var(--bg) 0%, #dfd2be 100%);
        overflow-x: hidden;
      }

      .page {
        min-height: 100vh;
        padding: 12px;
        display: flex;
        justify-content: center;
      }

      .phone-shell {
        width: min(100%, 430px);
        min-height: 100vh;
        border: 1px solid #cdbda2;
        border-radius: 24px;
        overflow: visible;
        background: #f7efe2;
        box-shadow: 0 28px 60px rgba(22, 24, 26, 0.22);
        position: relative;
      }

      .content {
        padding: 14px;
      }

      .top-actions {
        display: flex;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 8px;
      }

      .top-btn {
        display: inline-flex;
        align-items: center;
        border: 1px solid #d9c9ac;
        border-radius: 999px;
        padding: 6px 10px;
        background: #fff8ea;
        color: #394a54;
        text-decoration: none;
        font-size: 11px;
        font-weight: 700;
      }

      .intro {
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 14px;
        background: linear-gradient(150deg, #fff8eb 0%, #f0e2ca 100%);
      }

      .eyebrow {
        display: inline-block;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: #faf2e4;
        color: var(--ink-soft);
        font-size: 10px;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        padding: 5px 9px;
      }

      h1 {
        margin: 10px 0 7px;
        font-family: "Baskerville", "Times New Roman", serif;
        font-size: 34px;
        line-height: 0.96;
        letter-spacing: -0.02em;
      }

      .intro p {
        margin: 0;
        color: var(--ink-soft);
        font-size: 14px;
      }

      .intro p + p {
        margin-top: 8px;
      }

      .opening-quote {
        margin: 10px 0 8px;
        color: var(--accent-red);
        font-size: 19px;
        line-height: 1.15;
        font-weight: 800;
        font-family: "Baskerville", "Times New Roman", serif;
      }

      .origin-panel {
        margin-top: 10px;
        border: 1px solid #e3d5be;
        border-radius: 12px;
        background: #fff8ec;
        overflow: hidden;
      }

      .origin-panel > summary {
        cursor: pointer;
        list-style: none;
        padding: 8px 10px;
        font-size: 12px;
        font-weight: 700;
        color: #2a3941;
      }

      .origin-panel > summary::-webkit-details-marker {
        display: none;
      }

      .origin-panel > summary::after {
        content: "▾";
        float: right;
        color: var(--ink-soft);
      }

      .origin-panel[open] > summary::after {
        transform: rotate(180deg);
        display: inline-block;
      }

      .origin-content {
        border-top: 1px solid #eadcc7;
        padding: 8px 10px 10px;
        font-size: 12px;
        color: #33434c;
      }

      .origin-content p {
        margin: 0 0 7px;
      }

      .origin-content ul {
        margin: 0;
        padding-left: 16px;
      }

      .origin-content a {
        color: var(--accent-blue);
      }

      .control {
        position: sticky;
        top: 0;
        z-index: 50;
        margin-top: 10px;
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 9px 10px 10px;
        background: rgba(252, 247, 238, 0.96);
        backdrop-filter: blur(6px);
      }

      .control-head {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      #yearOutput {
        font-size: 30px;
        font-weight: 800;
        color: var(--accent-red);
        line-height: 1;
      }

      #yearSlider {
        margin-top: 7px;
        width: 100%;
      }

      #yearSlider[disabled] {
        opacity: 0.75;
        cursor: default;
      }

      .ticks {
        margin-top: 4px;
        display: flex;
        justify-content: space-between;
        font-size: 10px;
        color: var(--ink-soft);
      }

      .tick-start {
        display: inline-flex;
        align-items: center;
        gap: 4px;
      }

      .tick-info {
        position: relative;
        display: inline-block;
      }

      .tick-info > summary {
        list-style: none;
        width: 14px;
        height: 14px;
        border-radius: 999px;
        border: 1px solid #ccb99a;
        color: #6f5a36;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        line-height: 1;
        cursor: pointer;
        background: #fff8eb;
      }

      .tick-info > summary::-webkit-details-marker {
        display: none;
      }

      .tick-info-pop {
        position: absolute;
        z-index: 70;
        top: 20px;
        left: -10px;
        width: min(360px, calc(100vw - 52px));
        border: 1px solid #e2d2b7;
        border-radius: 12px;
        background: #fffdf7;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
        padding: 10px;
        color: #2f4048;
        font-size: 11px;
      }

      .tick-info-pop p {
        margin: 0 0 7px;
      }

      .tick-info-pop ul {
        margin: 0;
        padding-left: 16px;
      }

      .tick-info-pop li + li {
        margin-top: 4px;
      }

      .phase-output {
        font-size: 15px;
        font-weight: 800;
        line-height: 1.1;
        color: #23333b;
        min-width: 0;
        flex: 1 1 auto;
      }

      .control-meta {
        margin-top: 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
      }

      .control-cta {
        flex: 0 0 auto;
      }

      .mode-help {
        margin-top: 6px;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }

      .chip {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 3px 8px;
        background: #fffaf1;
        color: var(--ink-soft);
        font-size: 10px;
      }

      .dot {
        width: 7px;
        height: 7px;
        border-radius: 999px;
      }

      .error {
        display: none;
        margin-top: 10px;
        border: 1px solid #e1b2b2;
        border-radius: 10px;
        background: #fff2f2;
        color: #8f2323;
        font-size: 12px;
        padding: 9px;
      }

      .acts {
        margin-top: 8px;
      }

      .act {
        min-height: 280vh;
        position: relative;
      }

      #act1 {
        min-height: 230vh;
      }

      #act3 {
        min-height: 300vh;
      }

      #act4 {
        min-height: 300vh;
      }

      .act-stage {
        position: sticky;
        top: var(--stage-top);
        height: calc(100dvh - var(--stage-top) - 8px);
      }

      .act-card {
        width: 100%;
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 12px;
        background: var(--card);
        display: flex;
        flex-direction: column;
        gap: 8px;
        max-height: 100%;
        overflow: auto;
      }

      .act-card.is-active {
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
      }

      .act-head {
        margin-bottom: 4px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
      }

      .lead {
        margin: 0;
        color: #25343c;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.08;
        flex: 1 1 auto;
      }

      .mode-badge {
        border-radius: 999px;
        border: 1px solid currentColor;
        font-size: 10px;
        font-weight: 800;
        padding: 4px 8px;
        white-space: nowrap;
      }

      .mode-badge[data-mode="observed"] {
        color: var(--mode-observed);
        background: rgba(47, 111, 154, 0.08);
      }

      .mode-badge[data-mode="interpolated_visual"] {
        color: var(--mode-interpolated);
        background: rgba(159, 105, 26, 0.09);
      }

      .mode-badge[data-mode="projected"] {
        color: var(--mode-projected);
        background: rgba(185, 55, 47, 0.08);
      }

      .communicants {
        border: 1px solid #eadfcd;
        border-radius: 12px;
        background: #fff;
        padding: 9px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }

      .tower {
        position: relative;
        height: 170px;
        border-radius: 8px;
        border: 2px solid #d7c7ad;
        overflow: hidden;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.72)),
          repeating-linear-gradient(
            90deg,
            rgba(120, 120, 120, 0.08) 0,
            rgba(120, 120, 120, 0.08) 8%,
            rgba(255, 255, 255, 0.12) 8%,
            rgba(255, 255, 255, 0.12) 14%
          );
      }

      .tower::before {
        content: "";
        position: absolute;
        left: -4px;
        right: -4px;
        top: -13px;
        height: 18px;
        border-radius: 7px;
        background: #d8c8af;
      }

      .tower-fill {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 0;
        transition: height 260ms ease;
      }

      #topFill {
        background: linear-gradient(180deg, #f19e63, var(--accent-red));
      }

      #bottomFill {
        background: linear-gradient(180deg, #90b8d4, var(--accent-blue));
      }

      .tower-meta {
        margin-top: 6px;
        border: 1px solid #e8ddcb;
        border-radius: 9px;
        background: #fffcf7;
        padding: 7px;
      }

      .tower-meta b {
        display: block;
        font-size: 11px;
        color: var(--ink-soft);
      }

      .tower-val {
        font-size: 24px;
        font-weight: 800;
        line-height: 1;
      }

      .transfer-bridge {
        margin-top: 8px;
        border: 1px solid #e7dac7;
        border-radius: 9px;
        background: #fff8ed;
        padding: 8px;
      }

      .bridge-label {
        display: block;
        font-size: 11px;
        color: var(--ink-soft);
      }

      .bridge-value {
        display: block;
        margin-top: 2px;
        font-size: 31px;
        line-height: 1;
        color: var(--accent-red);
        letter-spacing: -0.02em;
      }

      .metric-grid {
        display: grid;
        gap: 8px;
      }

      .metric-card {
        border: 1px solid #eadfcd;
        border-radius: 10px;
        background: #fff;
        padding: 8px;
      }

      .metric-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
      }

      .metric-card h4 {
        margin: 0 0 5px;
        font-size: 12px;
      }

      .metric-sub {
        margin: 0 0 6px;
        font-size: 10px;
        color: var(--ink-soft);
      }

      .metric-value {
        font-size: 24px;
        font-weight: 800;
        line-height: 1;
        margin-bottom: 6px;
      }

      .metric-track {
        height: 10px;
        border-radius: 999px;
        border: 1px solid #ddceb5;
        background: #eee3d1;
        overflow: hidden;
      }

      .metric-fill {
        width: 0;
        height: 100%;
        transition: width 260ms ease;
      }

      .split-track {
        display: flex;
        height: 12px;
        border-radius: 999px;
        border: 1px solid #ddceb5;
        overflow: hidden;
        background: #eee3d1;
      }

      #inheritedFill {
        width: 0;
        transition: width 260ms ease;
        background: var(--accent-red);
      }

      #nonInheritedFill {
        width: 100%;
        transition: width 260ms ease;
        background: var(--accent-blue);
      }

      .split-legend {
        margin-top: 6px;
        display: flex;
        justify-content: space-between;
        gap: 8px;
        font-size: 10px;
        color: var(--ink-soft);
      }

      .metric-note {
        margin-top: 5px;
        font-size: 10px;
        color: var(--ink-soft);
      }

      .gauge-box {
        border: 1px solid #eadfcd;
        border-radius: 11px;
        background: #fff;
        padding: 8px;
      }

      .gauge-track {
        height: 28px;
        border-radius: 999px;
        border: 1px solid #decfb6;
        overflow: hidden;
        background: repeating-linear-gradient(
          -45deg,
          #efe5d6,
          #efe5d6 8px,
          #f8f2e8 8px,
          #f8f2e8 16px
        );
      }

      .gauge-fill {
        width: 0;
        height: 100%;
        transition: width 260ms ease;
        background: linear-gradient(90deg, #d57e3e, var(--accent-red));
      }

      .gauge-meta {
        margin-top: 7px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
      }

      .meta-card {
        border: 1px solid #eadfcd;
        border-radius: 9px;
        background: #fffcf7;
        padding: 7px;
      }

      .meta-card b {
        display: block;
        font-size: 10px;
        color: var(--ink-soft);
      }

      .meta-card span {
        font-size: 18px;
        font-weight: 800;
      }

      .meta-card.is-edu {
        background: #f5faf6;
        border-color: #d8ead9;
      }

      .meta-label-with-info {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 6px;
      }

      .meta-label-with-info b {
        margin: 0;
        flex: 1 1 auto;
      }

      .meta-info {
        position: relative;
        flex: 0 0 auto;
      }

      .meta-info > summary {
        list-style: none;
        width: 14px;
        height: 14px;
        border-radius: 999px;
        border: 1px solid #ccb99a;
        color: #6f5a36;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        line-height: 1;
        cursor: pointer;
        background: #fff8eb;
      }

      .meta-info > summary::-webkit-details-marker {
        display: none;
      }

      .meta-info-pop {
        position: absolute;
        z-index: 70;
        top: 20px;
        right: 0;
        width: min(250px, calc(100vw - 72px));
        border: 1px solid #e2d2b7;
        border-radius: 12px;
        background: #fffdf7;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
        padding: 10px;
        color: #2f4048;
        font-size: 11px;
      }

      .meta-info-pop p {
        margin: 0 0 7px;
      }

      .meta-info-pop p:last-child {
        margin-bottom: 0;
      }

      .meta-info-pop a {
        color: var(--accent-blue);
      }

      .gauge-note {
        margin-top: 7px;
        font-size: 10px;
        color: var(--ink-soft);
      }

      .step-recap {
        margin-top: auto;
        border: 1px solid #e3d4bd;
        border-radius: 12px;
        background: linear-gradient(160deg, #fffaf0 0%, #f2e5cf 100%);
        padding: 10px;
      }

      .step-recap-label {
        display: inline-block;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #7b5d29;
      }

      .step-recap p {
        margin: 6px 0 0;
        font-size: 13px;
        color: #2c3c45;
      }

      .step-recap-metrics {
        margin-top: 9px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .step-pill {
        border: 1px solid #eadbc5;
        border-radius: 10px;
        background: #fff;
        padding: 8px;
      }

      .step-pill b {
        display: block;
        font-size: 16px;
        line-height: 1;
      }

      .step-pill span {
        display: block;
        margin-top: 4px;
        font-size: 11px;
        color: var(--ink-soft);
      }

      .conclusion {
        margin-top: 10px;
        min-height: 175vh;
        position: relative;
      }

      .conclusion-stage {
        position: sticky;
        top: var(--stage-top);
        height: calc(100dvh - var(--stage-top) - 8px);
        display: flex;
        align-items: flex-start;
      }

      .conclusion-card {
        width: 100%;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: linear-gradient(180deg, #fff7ea 0%, #f1e2c9 100%);
        padding: 14px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        max-height: 100%;
        overflow: auto;
        scroll-margin-top: calc(var(--stage-top) + 20px);
      }

      .conclusion-card h2 {
        margin: 8px 0 6px;
        font-family: "Baskerville", "Times New Roman", serif;
        font-size: 28px;
        line-height: 0.98;
      }

      .conclusion-card p {
        margin: 0;
        font-size: 13px;
        color: #31434c;
      }

      .conclusion-grid {
        margin-top: 10px;
        display: grid;
        gap: 8px;
      }

      .conclusion-point {
        border: 1px solid #e5d8c2;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.84);
        padding: 10px;
      }

      .conclusion-point b {
        display: block;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #7b5d29;
      }

      .conclusion-point span {
        display: block;
        margin-top: 4px;
        font-size: 13px;
        color: #25343c;
      }

      .card-info {
        position: relative;
        flex: 0 0 auto;
      }

      .card-info > summary {
        list-style: none;
        width: 16px;
        height: 16px;
        border-radius: 999px;
        border: 1px solid #ccb99a;
        color: #6f5a36;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        line-height: 1;
        cursor: pointer;
        background: #fff8eb;
      }

      .card-info > summary::-webkit-details-marker {
        display: none;
      }

      .card-info-pop {
        position: absolute;
        z-index: 70;
        top: 22px;
        right: 0;
        width: min(270px, calc(100vw - 76px));
        border: 1px solid #e2d2b7;
        border-radius: 12px;
        background: #fffdf7;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
        padding: 10px;
        color: #2f4048;
      }

      .info-group + .info-group {
        margin-top: 8px;
      }

      .info-group h5 {
        margin: 0 0 5px;
        font-size: 11px;
        color: var(--ink-soft);
      }

      .info-group p,
      .info-group ul {
        margin: 0;
        font-size: 12px;
        line-height: 1.45;
        color: #3f505a;
      }

      .info-group ul {
        padding-left: 16px;
      }

      .info-group li + li {
        margin-top: 8px;
      }

      .info-group a {
        color: var(--accent-blue);
      }

      .footer-note {
        margin: 8px 0 0;
        font-size: 11px;
        color: var(--ink-soft);
      }

      code {
        font-family: "SFMono-Regular", Menlo, Consolas, monospace;
        font-size: 0.9em;
      }

      @media (max-width: 480px) {
        .page {
          padding: 0;
        }

        .phone-shell {
          width: 100%;
          border-radius: 0;
          border-left: none;
          border-right: none;
          box-shadow: none;
        }

        .act {
          min-height: 250vh;
        }

        #act1 {
          min-height: 205vh;
        }

        #act3,
        #act4 {
          min-height: 270vh;
        }

        .act-stage {
          height: calc(100dvh - var(--stage-top) - 6px);
        }

        .conclusion {
          min-height: 160vh;
        }

        .conclusion-stage {
          height: calc(100dvh - var(--stage-top) - 6px);
        }

        .conclusion-card h2 {
          font-size: 22px;
        }

        .phase-output {
          font-size: 16px;
        }

        .lead {
          font-size: 15px;
        }
      }