:root {
        color-scheme: light;
        --app-bg: #e8edf0;
        --app-top: #d7e3e8;
        --app-bottom: #f7f8f8;
        --page-fill: linear-gradient(180deg, var(--app-top), var(--app-bottom));
        --label: #07131b;
        --secondary-label: #4d5d66;
        --tertiary-label: #7c8a91;
        --separator: rgba(7, 19, 27, 0.14);
        --group-bg: rgba(255, 255, 255, 0.94);
        --ios-control-bg: #eef2f5;
        --elevated-bg: #fbfcfd;
        --ios-accent: #007ea7;
        --ios-accent-pressed: #006a8d;
        --ios-marine: #00a5b5;
        --ios-marine-dark: #073746;
        --header-divider: #29c6d6;
        --race-red: #e3342f;
        --race-yellow: #f2b705;
        --panel-ink: #0b1820;
        --panel-rail: #102a36;
        --surface-sheen: rgba(255, 255, 255, 0.66);
        --control-sheen: rgba(255, 255, 255, 0.42);
        --tab-sheen: rgba(255, 255, 255, 0.14);
        --header-sheen: rgba(255, 255, 255, 0.09);
        --nav-rail: #07131b;
        --nav-active: #12313e;
        --ios-success: #34c759;
        --ios-danger: #ff3b30;
        --sheet-backdrop: rgba(0, 0, 0, 0.34);
        --ios-shadow: 0 16px 30px rgba(7, 19, 27, 0.12);
        --ios-soft-shadow: 0 6px 16px rgba(7, 19, 27, 0.08);
        --card-border: rgba(7, 19, 27, 0.16);
        --card-shadow: var(--ios-soft-shadow);
        --radius-xl: 12px;
        --radius-lg: 8px;
        --radius-md: 6px;
        --tap: 46px;
        --banner-inner: 1040px;
        --desktop-inner: 1040px;
        --display: Bahnschrift, "Aptos Display", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
        --sans: "Aptos", "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
        --mono: "Cascadia Mono", "Roboto Mono", "SFMono-Regular", Consolas, monospace;
        font-family: var(--sans);
      }

      [data-theme="dark"] {
        color-scheme: dark;
        --app-bg: #0d171d;
        --app-top: #13232b;
        --app-bottom: #0d171d;
        --page-fill: linear-gradient(180deg, var(--app-top), var(--app-bottom));
        --label: #edf6f7;
        --secondary-label: #a8bbc2;
        --tertiary-label: #748b94;
        --separator: rgba(173, 211, 222, 0.16);
        --group-bg: #13232b;
        --ios-control-bg: #182b34;
        --elevated-bg: #101d25;
        --ios-accent: #4ccde1;
        --ios-accent-pressed: #7ddff0;
        --ios-marine: #31c4d1;
        --ios-marine-dark: #062f38;
        --header-divider: #5ee3ef;
        --race-red: #ff625b;
        --race-yellow: #ffd45f;
        --panel-ink: #f3fbfc;
        --panel-rail: #2b7482;
        --surface-sheen: rgba(255, 255, 255, 0.04);
        --control-sheen: rgba(255, 255, 255, 0.05);
        --tab-sheen: rgba(255, 255, 255, 0.045);
        --header-sheen: rgba(255, 255, 255, 0.05);
        --nav-rail: #07131b;
        --nav-active: #17313d;
        --ios-success: #32d74b;
        --ios-danger: #ff453a;
        --sheet-backdrop: rgba(0, 0, 0, 0.62);
        --ios-shadow: 0 20px 48px rgba(0, 0, 0, 0.38);
        --ios-soft-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
        --card-border: rgba(174, 221, 232, 0.22);
        --card-shadow:
          0 18px 34px rgba(0, 0, 0, 0.34),
          inset 0 1px 0 rgba(255, 255, 255, 0.04),
          inset 0 -1px 0 rgba(174, 221, 232, 0.08);
      }

      * {
        box-sizing: border-box;
      }

      [hidden] {
        display: none !important;
      }

      html {
        min-height: 100%;
        background: var(--app-bg);
      }

      body {
        min-height: 100vh;
        min-height: 100svh;
        min-height: 100dvh;
        margin: 0;
        color: var(--label);
        background: var(--page-fill);
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
      }

      button {
        touch-action: manipulation;
      }

      button,
      input,
      select {
        font: inherit;
      }

      .app {
        width: min(100%, 480px);
        min-height: 100vh;
        min-height: 100svh;
        min-height: 100dvh;
        margin: 0 auto;
        padding: max(12px, env(safe-area-inset-top)) 16px max(26px, env(safe-area-inset-bottom));
        display: block;
      }

      .top-bar {
        position: absolute;
        top: max(12px, env(safe-area-inset-top));
        left: 0;
        z-index: 3;
        width: 100%;
        height: 0;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
      }

      .app-header {
        position: relative;
        overflow: hidden;
        width: 100%;
        margin: 0 0 4px;
        padding: 18px 0 17px;
        border: 1px solid rgba(7, 19, 27, 0.82);
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 0;
        color: #f5fbfc;
        background: #0b1720;
        box-shadow: var(--ios-shadow);
      }

      .header-inner {
        position: relative;
        z-index: 1;
        width: min(100%, var(--banner-inner));
        margin: 0 auto;
        padding: 0 24px;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: center;
      }

      .header-inner::after {
        content: "";
        position: absolute;
        z-index: 0;
        top: -18px;
        right: 74px;
        bottom: -14px;
        width: 22px;
        background: var(--race-red);
        box-shadow: 12px 0 0 var(--race-yellow);
        transform: skewX(-18deg);
        transform-origin: center;
      }

      .app-header::before {
        content: "";
        position: absolute;
        inset: auto 0 0;
        height: 3px;
        background: var(--header-divider);
      }

      .brand-lockup {
        position: relative;
        z-index: 1;
        min-width: 0;
      }

      .brand-kicker {
        margin: 0 0 8px;
        color: var(--ios-marine);
        font-family: var(--mono);
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }

      h1 {
        margin: 0;
        max-width: none;
        color: inherit;
        font-family: var(--display);
        font-size: clamp(2.65rem, 13vw, 4.25rem);
        font-style: italic;
        font-weight: 900;
        letter-spacing: -0.01em;
        line-height: 0.88;
        text-transform: uppercase;
      }

      .subtitle {
        max-width: 34ch;
        margin: 11px 0 0;
        color: #b9cbd1;
        font-family: var(--mono);
        font-size: 0.9rem;
        font-weight: 720;
        letter-spacing: 0.06em;
        line-height: 1.28;
        text-transform: uppercase;
      }

      .stack {
        display: grid;
        gap: 16px;
      }

      .result-card {
        position: relative;
        overflow: hidden;
        min-height: 196px;
        padding: 18px 18px 19px;
        border: 1px solid var(--card-border);
        border-top: 4px solid var(--panel-rail);
        border-radius: var(--radius-xl);
        color: var(--label);
        background:
          linear-gradient(180deg, var(--surface-sheen), rgba(255, 255, 255, 0)),
          var(--elevated-bg);
        box-shadow: var(--card-shadow);
      }

      .result-content {
        position: relative;
        z-index: 1;
        display: grid;
        gap: 16px;
      }

      .result-top {
        display: grid;
        gap: 12px;
      }

      .result-heading {
        display: flex;
        align-items: start;
        justify-content: space-between;
        gap: 12px;
      }

      .metric-label {
        margin: 0;
        color: var(--secondary-label);
        font-family: var(--sans);
        font-size: 0.78rem;
        font-weight: 760;
        letter-spacing: 0;
      }

      .slip-value {
        margin: 4px 0 0;
        color: var(--panel-ink);
        font-family: var(--mono);
        font-size: clamp(3.35rem, 17vw, 4.85rem);
        font-style: italic;
        font-weight: 900;
        font-variant-numeric: tabular-nums;
        line-height: 0.9;
        letter-spacing: -0.04em;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.56);
      }

      .slip-readout {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
      }

      .status-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        align-self: center;
        min-width: 0;
        height: 28px;
        padding: 0 10px;
        border: 1px solid var(--separator);
        border-left: 3px solid var(--ios-marine);
        border-radius: var(--radius-md);
        color: var(--label);
        background: var(--ios-control-bg);
        font-family: var(--sans);
        font-size: 0.78rem;
        font-weight: 720;
        letter-spacing: 0;
        line-height: 1;
      }

      .status-pill.good {
        color: #217948;
        background: #edf8f1;
        color: color-mix(in srgb, var(--ios-success) 76%, var(--label));
        background: color-mix(in srgb, var(--ios-success) 14%, var(--elevated-bg));
      }

      .status-pill.warn {
        color: #b42318;
        background: #fff1ef;
        color: color-mix(in srgb, var(--ios-danger) 76%, var(--label));
        background: color-mix(in srgb, var(--ios-danger) 12%, var(--elevated-bg));
      }

      .status-pill.caution {
        color: #8a4b00;
        background: #fff6e6;
        background: color-mix(in srgb, #ff9500 14%, var(--elevated-bg));
      }

      .mini-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }

      .mini-stat {
        min-height: 68px;
        padding: 11px;
        border-radius: var(--radius-md);
        background: var(--ios-control-bg);
        border: 1px solid var(--separator);
      }

      .mini-stat strong {
        display: block;
        margin-bottom: 5px;
        color: var(--secondary-label);
        font-size: 0.78rem;
        font-family: var(--sans);
        font-weight: 720;
        letter-spacing: 0;
      }

      .mini-stat span {
        display: block;
        color: var(--label);
        font-family: var(--mono);
        font-size: 1.1rem;
        font-weight: 780;
        font-variant-numeric: tabular-nums;
        word-break: break-word;
      }

      .mini-stat.good {
        color: #217948;
        background: #edf8f1;
        border-color: rgba(52, 199, 89, 0.28);
        color: color-mix(in srgb, var(--ios-success) 76%, var(--label));
        background: color-mix(in srgb, var(--ios-success) 14%, var(--elevated-bg));
        border-color: color-mix(in srgb, var(--ios-success) 28%, var(--separator));
      }

      .mini-stat.warn {
        color: #b42318;
        background: #fff1ef;
        border-color: rgba(255, 59, 48, 0.26);
        color: color-mix(in srgb, var(--ios-danger) 76%, var(--label));
        background: color-mix(in srgb, var(--ios-danger) 12%, var(--elevated-bg));
        border-color: color-mix(in srgb, var(--ios-danger) 26%, var(--separator));
      }

      .mini-stat.good strong,
      .mini-stat.good span {
        color: #217948;
        color: color-mix(in srgb, var(--ios-success) 76%, var(--label));
      }

      .mini-stat.warn strong,
      .mini-stat.warn span {
        color: #b42318;
        color: color-mix(in srgb, var(--ios-danger) 76%, var(--label));
      }

      .section-title {
        margin: 0 0 10px 4px;
        color: var(--secondary-label);
        font-family: var(--sans);
        font-size: 0.8rem;
        font-weight: 760;
        letter-spacing: 0;
      }

      .section-title.spaced {
        margin-top: 18px;
      }

      .setup-panel + .setup-panel {
        margin-top: 34px;
      }

      .group {
        overflow: hidden;
        border: 1px solid var(--card-border);
        border-radius: var(--radius-lg);
        background: var(--group-bg);
        box-shadow: var(--card-shadow);
      }

      .field-row {
        display: grid;
        grid-template-columns: minmax(0, 0.95fr) minmax(112px, 1fr);
        gap: 12px;
        align-items: center;
        min-height: 58px;
        padding: 10px 12px;
        border-bottom: 1px solid var(--separator);
      }

      .field-row:last-child {
        border-bottom: 0;
      }

      .field-label {
        min-width: 0;
      }

      .field-label label {
        display: block;
        color: var(--label);
        font-size: 1rem;
        font-weight: 720;
      }

      .field-label span {
        display: block;
        margin-top: 3px;
        color: var(--secondary-label);
        font-size: 0.78rem;
        line-height: 1.25;
      }

      .value-control {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        min-height: 44px;
        border: 1px solid rgba(7, 19, 27, 0.08);
        border-radius: var(--radius-md);
        background:
          linear-gradient(180deg, var(--control-sheen), rgba(255, 255, 255, 0)),
          var(--ios-control-bg);
      }

      input,
      select {
        width: 100%;
        min-width: 0;
        border: 0;
        outline: 0;
        color: var(--label);
        background: transparent;
      }

      .value-control select {
        width: auto;
      }

      input {
        padding: 0 8px 0 10px;
        text-align: right;
        font-family: var(--mono);
        font-size: 1.16rem;
        font-weight: 780;
        font-variant-numeric: tabular-nums;
        color: var(--label);
      }

      .unit,
      select {
        display: grid;
        place-items: center;
        min-width: 42px;
        padding: 0 8px;
        color: var(--secondary-label);
        background: transparent;
        border-left: 0;
        font-family: var(--mono);
        font-size: 0.86rem;
        font-weight: 760;
        font-variant-numeric: tabular-nums;
        text-align: center;
      }

      select {
        min-width: 58px;
        appearance: none;
        cursor: pointer;
      }

      input:focus-visible,
      select:focus-visible,
      button:focus-visible {
        outline: 3px solid rgba(0, 110, 219, 0.38);
        outline: 3px solid color-mix(in srgb, var(--ios-accent) 38%, transparent);
        outline-offset: 2px;
        box-shadow: none;
      }

      .field-row.invalid {
        background: rgba(255, 59, 48, 0.05);
        box-shadow: inset 3px 0 0 rgba(255, 59, 48, 0.72);
        background: color-mix(in srgb, var(--ios-danger) 5%, transparent);
        box-shadow: inset 3px 0 0 color-mix(in srgb, var(--ios-danger) 72%, transparent);
      }

      .field-row.invalid .field-label label {
        color: #b42318;
        color: color-mix(in srgb, var(--ios-danger) 78%, var(--label));
      }

      .actions {
        display: flex;
        justify-content: center;
        gap: 10px;
      }

      .secondary-button {
        min-height: var(--tap);
        border: 0;
        border-radius: var(--radius-md);
        color: var(--ios-accent);
        background: var(--group-bg);
        border: 1px solid var(--separator);
        font-family: var(--sans);
        font-size: 1rem;
        font-weight: 760;
        letter-spacing: 0;
        cursor: pointer;
      }

      .actions .secondary-button {
        width: min(100%, 180px);
      }

      .secondary-button:active {
        transform: scale(0.985);
      }

      .validation-message {
        margin: 8px 4px 0;
        color: var(--ios-danger);
        font-size: 0.82rem;
        font-weight: 650;
        line-height: 1.35;
      }

      .site-footer {
        display: block;
        width: min(100%, 480px);
        margin: 0 auto;
        padding: 0 16px max(28px, env(safe-area-inset-bottom));
      }

      .footer-inner {
        display: flex;
        justify-content: center;
        gap: 12px 16px;
        flex-wrap: wrap;
        padding-top: 16px;
        border-top: 1px solid var(--separator);
      }

      .footer-inner button {
        border: 0;
        padding: 4px 0;
        color: var(--secondary-label);
        background: transparent;
        font-family: var(--mono);
        font-size: 0.72rem;
        font-weight: 760;
        letter-spacing: 0.02em;
        cursor: pointer;
      }

      .footer-inner button:hover,
      .footer-inner button:focus-visible {
        color: var(--ios-accent);
      }

      .footer-meta {
        margin: 10px 0 0;
        color: var(--tertiary-label);
        font-family: var(--mono);
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        line-height: 1.35;
        text-align: center;
      }

      .inline-link {
        color: var(--ios-accent);
        font-weight: 760;
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
      }

      .menu-list .footer-menu-item {
        display: none;
      }

      .sheet {
        position: fixed;
        inset: auto auto 0 50%;
        z-index: 1000;
        width: min(100vw, 480px);
        max-height: min(82vh, 720px);
        max-height: min(82svh, 720px);
        max-height: min(82dvh, 720px);
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 26px 26px 0 0;
        color: var(--label);
        background: var(--elevated-bg);
        box-shadow: 0 -18px 46px rgba(0, 0, 0, 0.24);
        transform: translateX(-50%);
        overflow: hidden;
      }

      .sheet:not([open]) {
        display: none;
      }

      .sheet[open] {
        display: block;
      }

      .sheet::backdrop {
        background: var(--sheet-backdrop);
        backdrop-filter: blur(4px);
      }

      html.sheet-open,
      body.sheet-open {
        overflow: hidden;
      }

      body.sheet-open::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 999;
        background: var(--sheet-backdrop);
        backdrop-filter: blur(4px);
      }

      .sheet-body {
        padding: 10px 16px max(22px, env(safe-area-inset-bottom));
        box-sizing: border-box;
        display: grid;
        gap: 16px;
      }

      .grabber {
        justify-self: center;
        width: 40px;
        height: 5px;
        border-radius: 999px;
        background: var(--separator);
      }

      .sheet-head {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
      }

      .sheet-head h2 {
        margin: 0;
        font-size: 1.34rem;
        letter-spacing: 0;
      }

      .menu-sheet-head {
        grid-template-columns: minmax(0, 1fr) auto;
      }

      .sheet.standalone-sheet .grabber,
      .sheet.standalone-sheet .back-button {
        display: none;
      }

      .sheet.standalone-sheet .sheet-head {
        grid-template-columns: minmax(0, 1fr) auto;
      }

      .done-button,
      .back-button {
        min-height: 36px;
        border: 0;
        border-radius: 999px;
        padding: 0 13px;
        color: var(--ios-accent);
        background: var(--ios-control-bg);
        font-size: 0.96rem;
        font-weight: 720;
        cursor: pointer;
      }

      .back-button {
        padding-left: 10px;
      }

      .sheet-copy {
        margin: 0;
        color: var(--secondary-label);
        font-size: 0.95rem;
        line-height: 1.42;
      }

      .info-list {
        display: grid;
        gap: 10px;
      }

      .info-item {
        padding: 13px;
        border-radius: var(--radius-md);
        background: var(--ios-control-bg);
      }

      .info-item h3 {
        margin: 0 0 5px;
        font-size: 0.96rem;
      }

      .info-item p {
        margin: 0;
        color: var(--secondary-label);
        font-size: 0.9rem;
        line-height: 1.38;
      }

      .document-sheet .info-list {
        display: block;
      }

      .document-sheet .info-item {
        padding: 0;
        border-radius: 0;
        background: transparent;
      }

      .document-sheet .info-item + .info-item {
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid var(--separator);
      }

      .document-sheet .info-item h3 {
        margin-bottom: 6px;
        color: var(--label);
        font-family: var(--sans);
        font-size: 0.92rem;
        font-weight: 780;
        letter-spacing: 0;
      }

      .document-sheet .info-item p {
        font-size: 0.94rem;
        line-height: 1.48;
      }

      .formula-card {
        padding: 14px;
        border-radius: var(--radius-md);
        background: var(--ios-control-bg);
      }

      .formula-card + .formula-card {
        margin-top: 10px;
      }

      .formula-row {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 9px;
        color: var(--label);
        font-size: 0.9rem;
        font-weight: 680;
      }

      .fraction {
        display: grid;
        min-width: 0;
        text-align: center;
        line-height: 1.25;
      }

      .fraction span {
        padding: 3px 4px;
      }

      .fraction span:first-child {
        border-bottom: 1px solid var(--separator);
      }

      .muted-note {
        margin: 8px 0 0;
        color: var(--secondary-label);
        font-size: 0.82rem;
        line-height: 1.35;
      }

      .formula-title {
        margin: 0 0 9px;
        color: var(--secondary-label);
        font-size: 0.86rem;
        font-weight: 740;
        letter-spacing: 0;
      }

      .settings-group {
        overflow: hidden;
        border: 1px solid var(--separator);
        border-radius: var(--radius-lg);
        background: var(--group-bg);
      }

      .settings-row {
        padding: 14px;
        display: grid;
        gap: 10px;
        border-bottom: 1px solid var(--separator);
      }

      .settings-row.toggle-row {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
      }

      .settings-row:last-child {
        border-bottom: 0;
      }

      .settings-row strong {
        font-size: 1rem;
      }

      .compare-toggle {
        flex: 0 0 auto;
      }

      .compare-button {
        position: relative;
        min-height: 34px;
        display: inline-grid;
        place-items: center;
        padding: 0 12px;
        border: 1px solid var(--separator);
        border-left: 3px solid var(--ios-marine);
        border-radius: var(--radius-md);
        color: var(--label);
        background: var(--ios-control-bg);
        font-family: var(--sans);
        font-size: 0.78rem;
        font-weight: 760;
        letter-spacing: 0;
        line-height: 1;
        cursor: pointer;
      }

      .compare-button input {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
      }

      .compare-button span {
        pointer-events: none;
      }

      .compare-button:has(input:checked) {
        border-color: color-mix(in srgb, var(--ios-marine) 36%, var(--separator));
        border-left-color: var(--ios-marine);
        color: var(--label);
        background: color-mix(in srgb, var(--ios-marine) 12%, var(--elevated-bg));
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ios-marine) 14%, transparent);
      }

      .compare-button:has(input:focus-visible) {
        outline: 3px solid rgba(0, 110, 219, 0.38);
        outline: 3px solid color-mix(in srgb, var(--ios-accent) 38%, transparent);
        outline-offset: 3px;
      }

      .switch {
        position: relative;
        width: 52px;
        height: 32px;
        display: inline-flex;
        align-items: center;
      }

      .switch input {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
      }

      .switch-track {
        width: 100%;
        height: 100%;
        border-radius: 999px;
        background: var(--ios-control-bg);
        border: 1px solid var(--separator);
        transition: background-color 160ms ease, border-color 160ms ease;
      }

      .switch-track::after {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: var(--elevated-bg);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
        transition: transform 160ms ease;
      }

      .switch input:checked + .switch-track {
        background: var(--ios-accent);
        border-color: var(--ios-accent);
      }

      .switch input:checked + .switch-track::after {
        transform: translateX(20px);
      }

      .switch input:focus-visible + .switch-track {
        outline: 3px solid rgba(0, 110, 219, 0.38);
        outline: 3px solid color-mix(in srgb, var(--ios-accent) 38%, transparent);
        outline-offset: 2px;
      }

      .segmented {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        gap: 0;
        padding: 0;
        border-radius: var(--radius-md);
        background: var(--ios-control-bg);
      }

      .view-switcher {
        margin-bottom: 4px;
        border: 1px solid rgba(7, 19, 27, 0.18);
        box-shadow: var(--ios-soft-shadow);
      }

      .segment {
        position: relative;
        min-width: 0;
        min-height: 34px;
        padding: 0 10px;
        border: 0;
        border-radius: 0;
        color: var(--secondary-label);
        background: transparent;
        font-family: var(--sans);
        font-size: 0.82rem;
        font-weight: 760;
        letter-spacing: 0;
        cursor: pointer;
      }

      .segment-short {
        display: none;
      }

      .segment + .segment {
        border-left: 1px solid var(--separator);
      }

      .segment[aria-pressed="true"],
      .segment[aria-selected="true"] {
        color: var(--label);
        background:
          linear-gradient(90deg, var(--ios-marine) 0 3px, transparent 3px),
          linear-gradient(180deg, var(--tab-sheen), transparent),
          var(--elevated-bg);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ios-marine) 14%, transparent);
      }

      .top-bar {
        justify-content: flex-end;
      }

      .menu-button {
        position: absolute;
        top: 14px;
        right: max(24px, calc((100% - var(--banner-inner)) / 2 + 24px));
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        border: 1px solid rgba(245, 251, 252, 0.22);
        border-radius: var(--radius-md);
        background: rgba(6, 16, 23, 0.82);
        box-shadow: 0 8px 18px rgba(7, 19, 27, 0.2);
        cursor: pointer;
      }

      .menu-icon {
        display: grid;
        gap: 4px;
        width: 18px;
      }

      .menu-icon span {
        display: block;
        height: 2px;
        border-radius: 0;
        background: #35c7e8;
      }

      .menu-list {
        overflow: hidden;
        border: 1px solid var(--separator);
        border-radius: var(--radius-lg);
        background: var(--group-bg);
      }

      .menu-item {
        width: 100%;
        min-height: 52px;
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 12px;
        border: 0;
        border-bottom: 1px solid var(--separator);
        padding: 0 14px;
        color: var(--label);
        background: transparent;
        text-align: left;
        font-size: 1rem;
        font-weight: 620;
        cursor: pointer;
      }

      .menu-item:last-child {
        border-bottom: 0;
      }

      .menu-item::after {
        content: "›";
        color: var(--tertiary-label);
        font-weight: 700;
      }

      .sheet {
        inset: 50% auto auto 50%;
        width: min(430px, calc(100vw - 32px));
        max-height: min(78vh, 680px);
        max-height: min(78svh, 680px);
        max-height: min(78dvh, 680px);
        border-radius: 24px;
        transform: translate(-50%, -50%);
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
      }

      .sheet-body {
        overflow-x: hidden;
        overflow-y: auto;
        max-height: min(78vh, 680px);
        max-height: min(78svh, 680px);
        max-height: min(78dvh, 680px);
        padding-bottom: 18px;
      }

      .view[hidden] {
        display: none !important;
      }

      @media (prefers-reduced-motion: no-preference) {
        .secondary-button,
        .segment {
          transition: transform 140ms ease, background-color 160ms ease, color 160ms ease;
        }

        .sheet[open] {
          animation: sheet-in 180ms ease-out;
        }

        @keyframes sheet-in {
          from {
            opacity: 0;
            transform: translate(-50%, -50%);
          }
          to {
            opacity: 1;
            transform: translate(-50%, -50%);
          }
        }
      }

      @media (min-width: 700px) {
        .app {
          min-height: auto;
          padding-top: 42px;
          padding-bottom: 42px;
        }
      }

      @media (min-width: 860px) {
        body {
          display: flex;
          flex-direction: column;
        }

        .app {
          width: min(100%, var(--desktop-inner));
          flex: 0 0 auto;
          min-height: auto;
          padding: 28px 28px 22px;
        }

        .app-header {
          margin-bottom: 4px;
          padding: 24px 0 22px;
        }

        .header-inner {
          width: min(100%, var(--banner-inner));
          padding: 0 38px;
          grid-template-columns: minmax(0, auto) minmax(260px, 0.42fr);
          justify-content: space-between;
          column-gap: clamp(48px, 9vw, 132px);
          row-gap: 10px;
        }

        .header-inner::after {
          top: -24px;
          right: clamp(300px, 36vw, 430px);
          bottom: -19px;
          width: 26px;
          box-shadow: 14px 0 0 var(--race-yellow);
        }

        .brand-lockup {
          display: contents;
        }

        .brand-kicker {
          grid-column: 1 / -1;
          margin-bottom: 10px;
          font-size: 0.72rem;
          letter-spacing: 0.16em;
        }

        h1 {
          font-size: clamp(4rem, 7.2vw, 6rem);
        }

        .subtitle {
          align-self: end;
          justify-self: end;
          max-width: none;
          margin: 0 52px 8px 0;
          color: #d5e3e7;
          font-size: 0.92rem;
          line-height: 1.55;
          text-align: right;
          white-space: nowrap;
        }

        .menu-button {
          top: 22px;
          right: max(38px, calc((100% - var(--banner-inner)) / 2 + 38px));
          width: 42px;
          height: 42px;
        }

        .stack {
          gap: 20px;
        }

        .view-switcher {
          width: min(520px, 100%);
          margin: 0 auto 4px;
        }

        .view {
          align-items: start;
          grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.1fr);
          gap: 22px;
        }

        #view-slip {
          align-items: stretch;
        }

        .result-card {
          min-height: 292px;
          padding: 22px;
        }

        .result-content {
          min-height: 246px;
          align-content: space-between;
          gap: 22px;
        }

        .result-top {
          min-height: 150px;
          align-content: start;
        }

        .slip-readout {
          display: grid;
          gap: 14px;
        }

        .slip-value {
          font-size: clamp(4.7rem, 7.2vw, 6.6rem);
        }

        .status-pill {
          justify-self: start;
        }

        .mini-grid {
          gap: 12px;
        }

        .mini-stat {
          min-height: 82px;
          padding: 13px;
        }

        #calculator-form,
        #whatif-form {
          min-width: 0;
        }

        #calculator-form {
          display: grid;
          grid-template-rows: minmax(0, 1fr) auto;
        }

        #calculator-form .group {
          display: grid;
          grid-template-rows: repeat(4, 1fr);
        }

        #view-whatif {
          grid-template-columns: minmax(0, 1fr);
        }

        #view-whatif > .result-card {
          position: relative;
          top: auto;
          min-height: 218px;
        }

        #view-whatif .result-content {
          min-height: 166px;
        }

        #view-whatif .result-top {
          min-height: 0;
        }

        #view-whatif .slip-readout {
          display: flex;
        }

        #view-whatif .compare-toggle {
          margin: 0;
        }

        #whatif-form {
          display: grid;
          width: min(100%, 560px);
          justify-self: center;
          grid-template-columns: minmax(0, 1fr);
          align-items: start;
          gap: 20px 24px;
        }

        #view-whatif:has(#comparisonModeToggle:checked) #whatif-form {
          width: 100%;
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .setup-panel {
          min-width: 0;
        }

        #view-whatif:has(#comparisonModeToggle:checked) .setup-panel + .setup-panel {
          margin-top: 0;
        }

        .field-row {
          min-height: 64px;
          grid-template-columns: minmax(0, 1fr) 196px;
          padding: 11px 16px;
        }

        #view-slip .actions {
          grid-column: 1 / -1;
        }

        .site-footer {
          width: min(100%, var(--desktop-inner));
          margin: 10px auto 0;
          padding: 0 28px 34px;
        }

        .footer-inner {
          display: flex;
          justify-content: center;
          gap: 18px;
          flex-wrap: wrap;
          padding-top: 18px;
          border-top: 1px solid var(--separator);
        }

        .footer-inner button {
          border: 0;
          padding: 4px 0;
          color: var(--secondary-label);
          background: transparent;
          font-family: var(--mono);
          font-size: 0.76rem;
          font-weight: 760;
          letter-spacing: 0.02em;
          cursor: pointer;
        }

        .footer-inner button:hover,
        .footer-inner button:focus-visible {
          color: var(--ios-accent);
        }

        .footer-meta {
          margin-top: 12px;
          font-size: 0.72rem;
        }

        .sheet {
          width: min(680px, calc(100vw - 64px));
          border: 1px solid var(--separator);
          border-radius: var(--radius-xl);
          box-shadow: 0 28px 84px rgba(7, 19, 27, 0.34);
        }

        .sheet-body {
          padding: 22px 24px 24px;
          gap: 18px;
        }

        .sheet.standalone-sheet .sheet-head {
          padding-bottom: 14px;
          border-bottom: 1px solid var(--separator);
        }

        .sheet-head h2 {
          font-size: 1.18rem;
          font-weight: 820;
          letter-spacing: 0.02em;
        }

        .done-button,
        .back-button {
          border-radius: var(--radius-md);
          font-family: var(--sans);
          font-size: 0.78rem;
          font-weight: 820;
          letter-spacing: 0;
        }

        .sheet.standalone-sheet .info-list {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .sheet.standalone-sheet .info-item,
        .sheet.standalone-sheet .formula-card {
          border: 1px solid var(--separator);
          background:
            linear-gradient(180deg, var(--control-sheen), rgba(255, 255, 255, 0)),
            var(--ios-control-bg);
        }

        .sheet.standalone-sheet.document-sheet .info-list {
          display: block;
        }

        .sheet.standalone-sheet.document-sheet .info-item {
          border: 0;
          background: transparent;
        }

        .sheet.standalone-sheet .sheet-copy {
          font-size: 1rem;
          line-height: 1.55;
        }
      }

      @media (max-width: 430px) {
        .app {
          padding-right: 12px;
          padding-left: 12px;
        }

        .site-footer {
          padding-right: 12px;
          padding-left: 12px;
        }

        .segment {
          min-height: 36px;
          padding: 0 6px;
          font-size: 0.76rem;
          letter-spacing: 0.02em;
        }

        .segment-full {
          display: none;
        }

        .segment-short {
          display: inline;
        }

        .field-row {
          grid-template-columns: minmax(0, 0.94fr) minmax(116px, 1fr);
          gap: 8px;
          padding-right: 10px;
          padding-left: 10px;
        }

        .field-label label {
          font-size: 0.96rem;
        }

        .field-label span {
          font-size: 0.72rem;
        }

        input {
          padding-right: 6px;
          padding-left: 8px;
          font-size: 1.04rem;
        }

        .unit,
        select {
          min-width: 36px;
          padding-right: 6px;
          padding-left: 4px;
          font-size: 0.74rem;
        }

        select {
          min-width: 48px;
        }
      }

      @media (max-width: 350px) {
        .app {
          padding-right: 10px;
          padding-left: 10px;
        }

        .field-row {
          grid-template-columns: minmax(0, 0.9fr) minmax(108px, 1fr);
          padding-right: 8px;
          padding-left: 8px;
        }

        .field-label span {
          display: none;
        }
      }