@layer reset, base, components, utilities, responsive, print;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
    scroll-padding-top: 5.5rem;
    -webkit-text-size-adjust: 100%;
  }

  body,
  h1,
  h2,
  h3,
  p,
  figure,
  blockquote,
  dl,
  dd,
  ol,
  ul {
    margin: 0;
  }

  ol,
  ul {
    padding: 0;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
  }

  button,
  a,
  input,
  select,
  summary {
    -webkit-tap-highlight-color: transparent;
  }

  img,
  svg {
    display: block;
    max-width: 100%;
  }

  button {
    border: 0;
  }

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

@layer base {
  :root {
    color-scheme: light;
    --ink: #111713;
    --ink-soft: #253029;
    --paper: #eef0e6;
    --paper-deep: #e4e7d9;
    --surface: #fbfcf6;
    --surface-strong: #ffffff;
    --signal: #d7f15a;
    --signal-deep: #b8d438;
    --pass: #36a66a;
    --pass-soft: #d8f2e3;
    --review: #e06d45;
    --review-soft: #f8dfd6;
    --amber: #d99b32;
    --amber-soft: #f6e8c9;
    --muted: #5e675f;
    --hairline: #c9cdbf;
    --hairline-dark: #35413a;
    --grid-line: rgba(17, 23, 19, 0.045);
    --shadow-sm: 0 1px 0 rgba(17, 23, 19, 0.04), 0 10px 28px rgba(17, 23, 19, 0.06);
    --shadow-lg: 0 28px 80px rgba(17, 23, 19, 0.18);
    --radius-xs: 0.35rem;
    --radius-sm: 0.6rem;
    --radius-md: 0.9rem;
    --radius-lg: 1.35rem;
    --shell: 78rem;
    --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    --focus: 0 0 0 3px rgba(215, 241, 90, 0.42), 0 0 0 5px var(--ink);
  }

  body {
    min-width: 20rem;
    min-height: 100vh;
    background:
      linear-gradient(var(--grid-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
      var(--paper);
    background-size: 1.5rem 1.5rem;
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
  }

  body:has(dialog[open]) {
    overflow: hidden;
  }

  ::selection {
    background: var(--signal);
    color: var(--ink);
  }

  a {
    color: inherit;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
  }

  button,
  summary,
  select {
    cursor: pointer;
  }

  button:disabled {
    cursor: not-allowed;
  }

  :focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 3px;
  }

  input:focus-visible,
  select:focus-visible,
  button:focus-visible,
  a:focus-visible,
  summary:focus-visible {
    outline: none;
    box-shadow: var(--focus);
  }

  h1,
  h2,
  h3,
  strong {
    font-weight: 750;
    letter-spacing: -0.025em;
  }

  h1 {
    max-width: 17ch;
    font-size: clamp(2.35rem, 4.7vw, 4.75rem);
    line-height: 0.94;
    text-wrap: balance;
  }

  h2 {
    max-width: 20ch;
    font-size: clamp(2rem, 4vw, 3.75rem);
    line-height: 1;
    text-wrap: balance;
  }

  h3 {
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    line-height: 1.2;
  }

  code,
  output,
  .micro-label,
  .section-index,
  .eyebrow,
  .field-unit,
  .field-input-wrap input,
  .ratio-gauge__labels,
  .result-metrics dd,
  .method-steps__number,
  .formula-band,
  .explorer-readout,
  .explorer-metrics dd,
  .measure-notes__grid strong {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
  }
}

@layer components {
  .shell {
    width: min(calc(100% - 2rem), var(--shell));
    margin-inline: auto;
  }

  .section-pad {
    padding-block: clamp(4.5rem, 9vw, 8rem);
  }

  .skip-link {
    position: fixed;
    z-index: 1000;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.65rem 0.9rem;
    transform: translateY(-150%);
    border-radius: var(--radius-xs);
    background: var(--signal);
    color: var(--ink);
    font-weight: 800;
    text-decoration: none;
  }

  .skip-link:focus {
    transform: translateY(0);
  }

  .site-header {
    position: sticky;
    z-index: 100;
    top: 0;
    border-bottom: 1px solid rgba(17, 23, 19, 0.1);
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    transition: box-shadow 160ms ease, background-color 160ms ease;
  }

  .site-header.is-scrolled {
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: 0 8px 32px rgba(17, 23, 19, 0.08);
  }

  .site-header__inner {
    display: flex;
    min-height: 4.6rem;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
  }

  .brand__mark {
    width: 2.55rem;
    flex: 0 0 auto;
  }

  .brand__mark rect {
    fill: var(--ink);
    stroke: var(--ink);
    stroke-width: 2;
  }

  .brand__mark path,
  .brand__mark circle {
    fill: none;
    stroke: var(--signal);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.4;
  }

  .brand__wordmark {
    display: grid;
    line-height: 1.05;
  }

  .brand__wordmark strong {
    font-size: 0.95rem;
    letter-spacing: -0.02em;
  }

  .brand__wordmark small {
    margin-top: 0.3rem;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .site-nav {
    display: flex;
    align-items: center;
    gap: 1.6rem;
  }

  .site-nav a {
    position: relative;
    color: var(--ink-soft);
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
  }

  .site-nav a::after {
    position: absolute;
    right: 0;
    bottom: -0.45rem;
    left: 0;
    height: 2px;
    transform: scaleX(0);
    transform-origin: right;
    background: var(--ink);
    content: "";
    transition: transform 160ms ease;
  }

  .site-nav a:hover::after,
  .site-nav a:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
    gap: clamp(1.4rem, 3vw, 3rem);
    align-items: start;
    padding-block: clamp(1.85rem, 4vw, 3.4rem) clamp(1.15rem, 2.6vw, 2.15rem);
  }

  .hero__copy {
    display: grid;
    gap: 0.75rem;
  }

  .eyebrow,
  .section-index,
  .micro-label {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.105em;
    text-transform: uppercase;
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
  }

  .status-dot {
    width: 0.55rem;
    height: 0.55rem;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: var(--signal);
    box-shadow: 0 0 0 4px rgba(215, 241, 90, 0.28);
  }

  .hero__answer {
    max-width: 53rem;
    font-size: clamp(1.08rem, 1.55vw, 1.42rem);
    line-height: 1.24;
    text-wrap: pretty;
  }

  .hero__answer strong {
    background: linear-gradient(transparent 60%, var(--signal) 60%);
  }

  .hero__support {
    max-width: 38rem;
    color: var(--muted);
    font-size: 0.94rem;
  }

  .policy-flash {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem;
    align-items: start;
    padding: 1rem;
    border: 1px solid var(--ink);
    border-radius: var(--radius-sm);
    background: var(--ink);
    box-shadow: var(--shadow-lg);
    color: var(--surface);
  }

  .policy-flash__number {
    padding: 0.45rem 0.55rem;
    border: 1px solid rgba(215, 241, 90, 0.45);
    border-radius: var(--radius-xs);
    background: rgba(215, 241, 90, 0.08);
    color: var(--signal);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 800;
  }

  .policy-flash strong {
    display: block;
    color: var(--signal);
    font-size: 0.94rem;
    letter-spacing: -0.01em;
  }

  .policy-flash p {
    margin-top: 0.4rem;
    color: #c8d0c9;
    font-size: 0.74rem;
    line-height: 1.42;
  }

  .policy-flash a {
    display: inline-block;
    margin-top: 0.55rem;
    color: var(--surface);
    font-size: 0.71rem;
    font-weight: 800;
  }

  .calculator-section {
    padding-bottom: clamp(4rem, 8vw, 7rem);
  }

  .section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 30rem);
    gap: 2rem;
    align-items: end;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
  }

  .section-heading--tool {
    margin-bottom: 0.8rem;
  }

  .section-heading--tool h2 {
    max-width: 13ch;
    font-size: clamp(1.6rem, 2.4vw, 2.45rem);
  }

  .section-heading h2 {
    margin-top: 0.55rem;
  }

  .section-heading > p {
    color: var(--muted);
    line-height: 1.65;
  }

  .section-heading--light .section-index,
  .section-heading--light > p {
    color: #aeb8b0;
  }

  .section-heading--light h2 {
    color: var(--surface);
  }

  .unit-switch,
  .view-switch {
    display: inline-flex;
    justify-self: end;
    padding: 0.22rem;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
  }

  .unit-switch__button,
  .view-switch button {
    min-height: 2.75rem;
    padding: 0.42rem 0.85rem;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
    transition: color 140ms ease, background-color 140ms ease, transform 140ms ease;
  }

  .unit-switch__button:hover,
  .view-switch button:hover {
    color: var(--ink);
  }

  .unit-switch__button.is-active,
  .view-switch button.is-active {
    background: var(--ink);
    color: var(--signal);
  }

  .unit-switch--small {
    justify-self: start;
    margin-block: 1rem 1.35rem;
  }

  .calculator-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(22rem, 0.88fr);
    overflow: hidden;
    border: 1px solid var(--ink);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
  }

  .input-panel {
    min-width: 0;
    padding: clamp(1.05rem, 2.2vw, 1.6rem);
  }

  .mobile-result-strip {
    display: none;
  }

  .measurement-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0 0 1rem;
    border: 0;
  }

  .measurement-fieldset + .measurement-fieldset {
    padding-top: 0.95rem;
    border-top: 1px solid var(--hairline);
  }

  .measurement-fieldset legend {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.65rem;
    padding: 0;
    font-size: 1rem;
    font-weight: 800;
  }

  .measurement-fieldset legend span {
    display: inline-grid;
    width: 1.65rem;
    height: 1.65rem;
    place-items: center;
    border-radius: 50%;
    background: var(--ink);
    color: var(--signal);
    font-family: var(--font-mono);
    font-size: 0.72rem;
  }

  .field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
  }

  .field-row--height {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }

  .waist-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
  }

  .field-shell {
    display: grid;
    min-width: 0;
    gap: 0.35rem;
  }

  .field-label {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
  }

  .field-input-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-xs);
    background: var(--surface-strong);
    transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
  }

  .field-shell:focus-within .field-input-wrap {
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(215, 241, 90, 0.52);
    background: #fff;
  }

  .field-shell.is-invalid .field-input-wrap {
    border-color: var(--review);
    box-shadow: 0 0 0 2px rgba(224, 109, 69, 0.18);
  }

  .field-input-wrap input {
    width: 100%;
    min-width: 0;
    height: 3rem;
    padding: 0.65rem 0.2rem 0.65rem 0.85rem;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    font-size: 1.12rem;
    font-weight: 700;
  }

  .field-input-wrap input::placeholder {
    color: #a9afa6;
    opacity: 1;
  }

  .field-input-wrap input::-webkit-inner-spin-button,
  .field-input-wrap input::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
  }

  .field-unit {
    align-self: stretch;
    display: grid;
    min-width: 2.7rem;
    place-items: center;
    border-left: 1px solid var(--hairline);
    background: #f2f4eb;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
  }

  .field-hint {
    margin-top: 0.5rem;
    color: var(--muted);
    font-size: 0.75rem;
    line-height: 1.5;
  }

  .field-hint strong {
    color: var(--ink);
    letter-spacing: 0;
  }

  .field-shell--fourth {
    animation: field-enter 180ms ease both;
  }

  @keyframes field-enter {
    from { transform: translateY(-0.35rem); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }

  .outlier-notice {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.7rem;
    align-items: start;
    margin-top: 0.9rem;
    padding: 0.75rem;
    border: 1px solid #c58b25;
    border-radius: var(--radius-xs);
    background: var(--amber-soft);
  }

  .outlier-notice > span {
    display: grid;
    width: 1.45rem;
    height: 1.45rem;
    place-items: center;
    border-radius: 50%;
    background: var(--ink);
    color: var(--signal);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 900;
  }

  .outlier-notice p {
    color: #594719;
    font-size: 0.76rem;
    line-height: 1.5;
  }

  .validation-summary {
    min-height: 1.25rem;
    margin-top: -0.35rem;
    color: #a83e20;
    font-size: 0.76rem;
    font-weight: 700;
  }

  .form-actions,
  .result-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
  }

  .button {
    display: inline-flex;
    min-height: 2.8rem;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.65rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    font-size: 0.8rem;
    font-weight: 850;
    text-decoration: none;
    transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease, color 140ms ease, border-color 140ms ease;
  }

  .button:hover:not(:disabled) {
    transform: translateY(-2px);
  }

  .button:active:not(:disabled) {
    transform: translateY(0);
  }

  .button svg {
    width: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
  }

  .button--primary {
    background: var(--ink);
    color: var(--surface);
  }

  .button--primary:hover {
    box-shadow: 0 8px 20px rgba(17, 23, 19, 0.17);
  }

  .button--quiet {
    border-color: var(--hairline);
    background: transparent;
    color: var(--muted);
  }

  .button--quiet:hover {
    border-color: var(--ink);
    color: var(--ink);
  }

  .button--signal {
    background: var(--signal);
    color: var(--ink);
  }

  .button--outline-dark {
    border-color: var(--hairline-dark);
    background: transparent;
    color: var(--surface);
  }

  .button:disabled {
    transform: none;
    opacity: 0.38;
  }

  .local-only-note {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.65rem;
    align-items: start;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--hairline);
  }

  .local-only-note svg {
    width: 1.25rem;
    fill: none;
    stroke: var(--pass);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
  }

  .local-only-note p {
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.45;
  }

  .local-only-note strong {
    color: var(--ink);
    letter-spacing: 0;
  }

  .measurement-figure {
    margin-top: 1.35rem;
    overflow: hidden;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    background:
      linear-gradient(rgba(17, 23, 19, 0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(17, 23, 19, 0.035) 1px, transparent 1px),
      #f7f8f1;
    background-size: 1.25rem 1.25rem;
  }

  .measurement-figure__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--hairline);
    background: rgba(251, 252, 246, 0.9);
  }

  .measurement-figure__toolbar > div:first-child {
    display: grid;
  }

  .measurement-figure__toolbar strong {
    font-size: 0.82rem;
    letter-spacing: -0.01em;
  }

  .view-switch {
    justify-self: auto;
    padding: 0.15rem;
  }

  .view-switch button {
    min-height: 2.75rem;
    padding: 0.3rem 0.75rem;
    font-size: 0.66rem;
  }

  .measurement-diagram {
    width: 100%;
    height: clamp(11rem, 20vw, 15.5rem);
  }

  .diagram-grid path {
    fill: none;
    stroke: rgba(17, 23, 19, 0.06);
    stroke-width: 1;
  }

  .body-line,
  .height-dimension path,
  .waist-annotation path,
  .waist-annotation circle {
    fill: none;
    stroke: var(--ink);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    transition: stroke 180ms ease, stroke-width 180ms ease, opacity 180ms ease;
  }

  .body-line--soft {
    opacity: 0.45;
    stroke-dasharray: 4 5;
  }

  .waist-line {
    fill: rgba(215, 241, 90, 0.2);
    stroke: var(--ink);
    stroke-width: 2;
    transition: fill 180ms ease, stroke 180ms ease, stroke-width 180ms ease;
  }

  .navel-dot {
    fill: var(--ink);
    transition: fill 180ms ease, r 180ms ease;
  }

  .height-dimension path {
    stroke-dasharray: 4 4;
  }

  #dimensionArrow path {
    fill: var(--ink);
    stroke: none;
  }

  .height-dimension text,
  .waist-annotation text {
    fill: var(--muted);
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.04em;
    transition: fill 180ms ease;
  }

  .diagram-view {
    transform-origin: center;
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .measurement-figure[data-view="front"] .diagram-view--side,
  .measurement-figure[data-view="side"] .diagram-view--front {
    opacity: 0;
    pointer-events: none;
    transform: translateX(8px);
  }

  .measurement-figure[data-active-measurement="height"] .height-dimension path {
    stroke: var(--pass);
    stroke-width: 2.8;
  }

  .measurement-figure[data-active-measurement="height"] .height-dimension text {
    fill: #176d42;
  }

  .measurement-figure[data-active-measurement="waist"] .waist-line {
    fill: rgba(215, 241, 90, 0.66);
    stroke: #385000;
    stroke-width: 3;
  }

  .measurement-figure[data-active-measurement="waist"] .navel-dot {
    fill: var(--review);
  }

  .measurement-figure[data-active-measurement="waist"] .waist-annotation text {
    fill: var(--ink);
  }

  .measurement-figure figcaption {
    padding: 0.75rem 0.85rem;
    border-top: 1px solid var(--hairline);
    background: rgba(251, 252, 246, 0.86);
    color: var(--muted);
    font-size: 0.69rem;
    line-height: 1.5;
  }

  .result-panel {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: clamp(1.5rem, 3.4vw, 2.6rem);
    background:
      radial-gradient(circle at 88% 8%, rgba(215, 241, 90, 0.13), transparent 28%),
      linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px),
      var(--ink);
    background-size: auto, 1.5rem 1.5rem, 1.5rem 1.5rem, auto;
    color: var(--surface);
  }

  .result-panel::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: var(--hairline-dark);
    content: "";
    transition: background-color 180ms ease;
  }

  .calculator-workspace[data-calculator-state="pass"] .result-panel::before {
    background: var(--pass);
  }

  .calculator-workspace[data-calculator-state="fail"] .result-panel::before {
    background: var(--review);
  }

  .calculator-workspace[data-calculator-state^="estimate"] .result-panel::before,
  .calculator-workspace[data-calculator-state="outlier"] .result-panel::before {
    background: var(--amber);
  }

  .result-panel__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .result-mode {
    color: #99a49c;
    font-family: var(--font-mono);
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .result-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 1.85rem;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--hairline-dark);
    border-radius: 999px;
    color: #aab4ac;
    font-size: 0.68rem;
    font-weight: 850;
    white-space: nowrap;
  }

  .result-status--pass {
    border-color: rgba(54, 166, 106, 0.58);
    background: rgba(54, 166, 106, 0.16);
    color: #a8e7c2;
  }

  .result-status--fail {
    border-color: rgba(224, 109, 69, 0.58);
    background: rgba(224, 109, 69, 0.14);
    color: #ffc1ac;
  }

  .result-status--estimate,
  .result-status--outlier {
    border-color: rgba(217, 155, 50, 0.58);
    background: rgba(217, 155, 50, 0.13);
    color: #f4d99f;
  }

  .ratio-readout {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.25rem;
    margin-top: clamp(1.5rem, 4vw, 3rem);
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--hairline-dark);
  }

  .ratio-readout > div:first-child {
    min-width: 0;
  }

  .ratio-readout .micro-label {
    color: #929f96;
  }

  #recordedRatio {
    display: block;
    margin-top: 0.2rem;
    color: var(--signal);
    font-size: clamp(4.3rem, 9vw, 7.25rem);
    font-weight: 800;
    letter-spacing: -0.09em;
    line-height: 0.88;
    transition: color 180ms ease, transform 180ms ease;
  }

  .calculator-workspace[data-calculator-state="fail"] #recordedRatio {
    color: #ff9e7c;
  }

  .calculator-workspace[data-calculator-state="outlier"] #recordedRatio,
  .calculator-workspace[data-calculator-state^="estimate"] #recordedRatio {
    color: #f3d07c;
  }

  #recordedRatio.is-updating {
    transform: translateY(-0.08em) scale(1.02);
  }

  .ratio-readout__standard {
    color: #89948c;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    line-height: 1.3;
    text-align: right;
    text-transform: uppercase;
  }

  .ratio-readout__standard strong {
    color: var(--surface);
    font-size: 0.92rem;
    letter-spacing: -0.02em;
  }

  .result-panel h3 {
    margin-top: 1.25rem;
    color: var(--surface);
    font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  }

  .result-copy {
    margin-top: 0.55rem;
    color: #acb6ae;
    font-size: 0.82rem;
    line-height: 1.55;
  }

  .ratio-gauge {
    margin-top: 1.4rem;
    padding-block: 0.5rem 0.15rem;
  }

  .ratio-gauge__track {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 0.55rem;
    overflow: visible;
    border-radius: 999px;
    background: var(--hairline-dark);
  }

  .ratio-gauge__pass {
    border-radius: 999px 0 0 999px;
    background: linear-gradient(90deg, #276d4a, var(--pass));
  }

  .ratio-gauge__review {
    border-radius: 0 999px 999px 0;
    background: linear-gradient(90deg, var(--review), #873924);
  }

  .ratio-gauge__threshold {
    position: absolute;
    top: -0.35rem;
    bottom: -0.35rem;
    left: 50%;
    width: 2px;
    background: var(--surface);
    opacity: 0.9;
  }

  .ratio-gauge__marker {
    position: absolute;
    top: 50%;
    left: var(--gauge-position, 50%);
    width: 1.2rem;
    height: 1.2rem;
    transform: translate(-50%, -50%);
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: #aab3ac;
    box-shadow: 0 0 0 2px #fff;
    opacity: 0;
    transition: left 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 160ms ease, background-color 160ms ease;
  }

  .ratio-gauge__marker.is-visible {
    opacity: 1;
  }

  .ratio-gauge__marker i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.28rem;
    height: 0.28rem;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--ink);
  }

  .calculator-workspace[data-calculator-state="pass"] .ratio-gauge__marker {
    background: var(--pass);
  }

  .calculator-workspace[data-calculator-state="fail"] .ratio-gauge__marker {
    background: var(--review);
  }

  .calculator-workspace[data-calculator-state^="estimate"] .ratio-gauge__marker,
  .calculator-workspace[data-calculator-state="outlier"] .ratio-gauge__marker {
    background: var(--amber);
  }

  .ratio-gauge__labels {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.5rem;
    margin-top: 0.55rem;
    color: #6f7b72;
    font-size: 0.57rem;
  }

  .ratio-gauge__labels span:nth-child(2) {
    color: #c6cec8;
    text-align: center;
  }

  .ratio-gauge__labels span:last-child {
    text-align: right;
  }

  .result-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1.35rem;
    border-top: 1px solid var(--hairline-dark);
    border-left: 1px solid var(--hairline-dark);
  }

  .result-metrics > div {
    min-width: 0;
    padding: 0.8rem;
    border-right: 1px solid var(--hairline-dark);
    border-bottom: 1px solid var(--hairline-dark);
  }

  .result-metrics dt {
    color: #77837a;
    font-size: 0.62rem;
    font-weight: 750;
  }

  .result-metrics dd {
    margin-top: 0.18rem;
    overflow: hidden;
    color: var(--surface);
    font-size: 0.8rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .result-action {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.65rem;
    align-items: start;
    margin-top: 1.15rem;
    padding: 0.85rem;
    border: 1px solid var(--hairline-dark);
    border-radius: var(--radius-xs);
    background: rgba(255, 255, 255, 0.035);
  }

  .result-action > span {
    color: var(--signal);
    font-family: var(--font-mono);
    font-weight: 900;
  }

  .result-action p {
    color: #bdc5bf;
    font-size: 0.75rem;
    line-height: 1.5;
  }

  .calculator-workspace[data-calculator-state="pass"] .result-action {
    border-color: rgba(54, 166, 106, 0.4);
    background: rgba(54, 166, 106, 0.09);
  }

  .calculator-workspace[data-calculator-state="fail"] .result-action {
    border-color: rgba(224, 109, 69, 0.42);
    background: rgba(224, 109, 69, 0.08);
  }

  .calculator-workspace[data-calculator-state="outlier"] .result-action,
  .calculator-workspace[data-calculator-state^="estimate"] .result-action {
    border-color: rgba(217, 155, 50, 0.42);
    background: rgba(217, 155, 50, 0.075);
  }

  .calculation-audit {
    margin-top: 1.2rem;
    border-top: 1px solid var(--hairline-dark);
    border-bottom: 1px solid var(--hairline-dark);
  }

  .calculation-audit summary {
    display: flex;
    min-height: 2.75rem;
    list-style: none;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--surface);
    font-size: 0.73rem;
    font-weight: 850;
  }

  .calculation-audit summary::-webkit-details-marker {
    display: none;
  }

  .calculation-audit summary::after {
    color: var(--signal);
    content: "+";
    font-family: var(--font-mono);
    font-size: 1rem;
  }

  .calculation-audit[open] summary::after {
    content: "−";
  }

  .calculation-audit summary span {
    margin-left: auto;
    color: #6f7b72;
    font-size: 0.6rem;
    font-weight: 650;
  }

  .calculation-audit ol {
    padding: 0 0 0.75rem;
    list-style: none;
  }

  .calculation-audit li {
    display: grid;
    grid-template-columns: minmax(6rem, 0.7fr) minmax(0, 1.3fr);
    gap: 0.75rem;
    padding-block: 0.45rem;
    border-top: 1px solid rgba(53, 65, 58, 0.65);
    font-size: 0.66rem;
  }

  .calculation-audit li span {
    color: #78847b;
  }

  .calculation-audit li strong {
    color: #d8ded9;
    font-family: var(--font-mono);
    font-weight: 650;
    letter-spacing: -0.01em;
    text-align: right;
    overflow-wrap: anywhere;
  }

  .result-buttons {
    margin-top: 1.25rem;
  }

  .result-buttons .button {
    flex: 1 1 8rem;
  }

  .result-disclaimer {
    margin-top: auto;
    padding-top: 1.1rem;
    color: #707c73;
    font-size: 0.62rem;
    line-height: 1.5;
  }

  .noscript-note {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--review);
    border-radius: var(--radius-xs);
    background: var(--review-soft);
    color: #672a18;
    font-weight: 700;
  }

  .method-section {
    border-block: 1px solid rgba(17, 23, 19, 0.1);
    background: var(--surface);
  }

  .method-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--ink);
    border-left: 1px solid var(--ink);
    list-style: none;
  }

  .method-steps li {
    position: relative;
    min-width: 0;
    padding: clamp(1.25rem, 2.5vw, 2rem);
    border-right: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
  }

  .method-steps__number {
    display: block;
    margin-bottom: 3rem;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
  }

  .method-steps h3 {
    font-size: 1.08rem;
  }

  .method-steps p {
    margin-top: 0.65rem;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.55;
  }

  .method-steps code {
    display: block;
    margin-top: 1.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--hairline);
    color: var(--ink);
    font-size: 0.7rem;
    font-weight: 800;
    overflow-wrap: anywhere;
  }

  .formula-band {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: center;
    margin-top: 1.5rem;
    padding: 1.25rem 1.4rem;
    border-radius: var(--radius-sm);
    background: var(--ink);
    color: var(--surface);
  }

  .formula-band .micro-label {
    color: #89958c;
  }

  .formula-band > p:not(.formula-band__rule) {
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    text-align: center;
  }

  .formula-band > p span {
    color: var(--signal);
  }

  .formula-band__rule {
    color: #a9b4ac;
    font-size: 0.72rem;
    text-align: right;
  }

  .formula-band__rule strong {
    color: var(--signal);
    font-size: 0.95rem;
  }

  .explorer-workspace {
    display: grid;
    grid-template-columns: minmax(18rem, 0.8fr) minmax(0, 1.2fr);
    overflow: hidden;
    border: 1px solid var(--ink);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
  }

  .explorer-control {
    padding: clamp(1.5rem, 3vw, 2.4rem);
    border-right: 1px solid var(--ink);
  }

  .explorer-readout {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    margin-top: 1.1rem;
  }

  .explorer-readout button {
    display: grid;
    width: 2.65rem;
    height: 2.65rem;
    place-items: center;
    border: 1px solid var(--ink);
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    font-size: 1.5rem;
    transition: background-color 140ms ease, color 140ms ease, transform 140ms ease;
  }

  .explorer-readout button:hover {
    transform: scale(1.04);
    background: var(--ink);
    color: var(--signal);
  }

  #explorerHeight {
    color: var(--ink);
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 850;
    letter-spacing: -0.07em;
    text-align: center;
  }

  #heightExplorer {
    width: 100%;
    height: 2rem;
    margin-top: 1rem;
    accent-color: var(--ink);
  }

  .explorer-scale {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.62rem;
  }

  .explorer-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 1.4rem;
    border-top: 1px solid var(--hairline);
    border-left: 1px solid var(--hairline);
  }

  .explorer-metrics > div {
    min-width: 0;
    padding: 0.8rem;
    border-right: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
  }

  .explorer-metrics dt {
    min-height: 2.2em;
    color: var(--muted);
    font-size: 0.62rem;
    line-height: 1.25;
  }

  .explorer-metrics dd {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    font-weight: 850;
    white-space: nowrap;
  }

  .text-button {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1.25rem;
    padding: 0;
    border-bottom: 1px solid var(--ink);
    background: transparent;
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 850;
  }

  .text-button span {
    transition: transform 140ms ease;
  }

  .text-button:hover span {
    transform: translateX(0.25rem);
  }

  .explorer-table-wrap {
    display: grid;
    align-content: center;
    padding: clamp(1.5rem, 3vw, 2.4rem);
    background:
      linear-gradient(rgba(17, 23, 19, 0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(17, 23, 19, 0.035) 1px, transparent 1px),
      #f4f6ed;
    background-size: 1.4rem 1.4rem;
  }

  .explorer-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(251, 252, 246, 0.92);
    font-family: var(--font-mono);
    font-size: 0.75rem;
  }

  .explorer-table caption {
    margin-bottom: 0.75rem;
    color: var(--muted);
    font-family: var(--font-sans);
    font-size: 0.68rem;
    text-align: left;
  }

  .explorer-table th,
  .explorer-table td {
    padding: 0.85rem;
    border: 1px solid var(--hairline);
    text-align: right;
  }

  .explorer-table th:first-child,
  .explorer-table td:first-child {
    text-align: left;
  }

  .explorer-table th {
    background: #e8eadf;
    color: var(--muted);
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .explorer-table tr.is-current td {
    border-color: var(--ink);
    background: var(--signal);
    color: var(--ink);
    font-weight: 900;
  }

  .change-section,
  .sources-section {
    background:
      radial-gradient(circle at 10% 0%, rgba(215, 241, 90, 0.08), transparent 30%),
      var(--ink);
    color: var(--surface);
  }

  .change-comparison {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid #516057;
    border-left: 1px solid #516057;
  }

  .change-column {
    padding: clamp(1.5rem, 4vw, 3rem);
    border-right: 1px solid #516057;
    border-bottom: 1px solid #516057;
  }

  .change-label {
    display: inline-flex;
    min-height: 1.8rem;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .change-column--retired .change-label {
    color: #ffae92;
  }

  .change-column--current .change-label {
    color: var(--signal);
  }

  .change-column h3 {
    margin-top: 2rem;
    font-size: clamp(1.5rem, 3vw, 2.4rem);
  }

  .change-column ul {
    margin-top: 1.5rem;
    list-style: none;
  }

  .change-column li {
    position: relative;
    padding: 0.85rem 0 0.85rem 1.65rem;
    border-top: 1px solid #354139;
    color: #bdc6bf;
    font-size: 0.85rem;
  }

  .change-column li::before {
    position: absolute;
    top: 0.9rem;
    left: 0;
    font-family: var(--font-mono);
    font-weight: 900;
  }

  .change-column--retired li::before {
    color: var(--review);
    content: "×";
  }

  .change-column--current li::before {
    color: var(--signal);
    content: "✓";
  }

  .change-source {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 1.5rem;
    padding: 1.15rem 1.3rem;
    border: 1px solid #516057;
    border-radius: var(--radius-xs);
    background: rgba(255, 255, 255, 0.025);
  }

  .change-source p {
    max-width: 53rem;
    color: #b6c0b8;
    font-size: 0.8rem;
  }

  .change-source strong {
    color: var(--surface);
    letter-spacing: 0;
  }

  .change-source a {
    flex: 0 0 auto;
    color: var(--signal);
    font-size: 0.76rem;
    font-weight: 850;
  }

  .measure-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.9fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
  }

  .measure-checklist {
    border-top: 1px solid var(--ink);
    list-style: none;
  }

  .measure-checklist li {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 1rem;
    padding-block: 1.45rem;
    border-bottom: 1px solid var(--ink);
  }

  .measure-checklist > li > span {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 850;
  }

  .measure-checklist h3 {
    font-size: 1.1rem;
  }

  .measure-checklist p {
    margin-top: 0.4rem;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.55;
  }

  .measure-notes {
    position: sticky;
    top: 6.5rem;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
  }

  .measure-notes h3 {
    margin-top: 0.7rem;
  }

  .measure-notes > p {
    margin-top: 0.8rem;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.6;
  }

  .measure-notes__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1.4rem;
    border-top: 1px solid var(--hairline);
    border-left: 1px solid var(--hairline);
  }

  .measure-notes__grid > div {
    display: grid;
    padding: 0.9rem;
    border-right: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
  }

  .measure-notes__grid strong {
    font-size: 1.25rem;
  }

  .measure-notes__grid span {
    color: var(--muted);
    font-size: 0.62rem;
  }

  .measure-notes > a {
    display: inline-block;
    margin-top: 1.2rem;
    font-size: 0.76rem;
    font-weight: 850;
  }

  .legacy-section {
    border-block: 1px solid rgba(17, 23, 19, 0.1);
    background: var(--paper-deep);
  }

  .legacy-disclosure {
    overflow: hidden;
    border: 1px solid var(--ink);
    border-radius: var(--radius-md);
    background: var(--surface);
  }

  .legacy-disclosure > summary {
    display: flex;
    min-height: 8.5rem;
    list-style: none;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.5rem clamp(1.5rem, 4vw, 3rem);
  }

  .legacy-disclosure > summary::-webkit-details-marker {
    display: none;
  }

  .legacy-disclosure > summary > span:first-child {
    display: grid;
  }

  .legacy-disclosure > summary strong {
    margin-top: 0.45rem;
    font-size: clamp(1.55rem, 3.5vw, 2.75rem);
    line-height: 1.05;
  }

  .legacy-disclosure > summary small {
    margin-top: 0.45rem;
    color: var(--review);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
  }

  .legacy-disclosure__action {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.75rem;
    font-weight: 850;
  }

  .legacy-disclosure__action i {
    display: grid;
    width: 2.3rem;
    height: 2.3rem;
    place-items: center;
    border: 1px solid var(--ink);
    border-radius: 50%;
    font-family: var(--font-mono);
    font-size: 1.2rem;
    font-style: normal;
    transition: transform 180ms ease, background-color 180ms ease, color 180ms ease;
  }

  .legacy-disclosure[open] .legacy-disclosure__action i {
    transform: rotate(45deg);
    background: var(--ink);
    color: var(--signal);
  }

  .legacy-content {
    padding: 0 clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem);
    border-top: 1px solid var(--ink);
  }

  .retired-warning {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: start;
    margin-top: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--review);
    border-radius: var(--radius-xs);
    background: var(--review-soft);
  }

  .retired-warning > span {
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: var(--review);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 900;
    text-transform: uppercase;
  }

  .retired-warning p {
    color: #6b2e1d;
    font-size: 0.78rem;
    line-height: 1.55;
  }

  .legacy-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.75fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
  }

  .legacy-form,
  .legacy-result {
    padding: 1.3rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
  }

  .legacy-form__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .legacy-form__topline label {
    font-weight: 850;
  }

  .legacy-form__topline select {
    min-height: 2.6rem;
    padding: 0.45rem 2.3rem 0.45rem 0.75rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-xs);
    background: var(--surface-strong);
    color: var(--ink);
    font-size: 0.76rem;
    font-weight: 750;
  }

  .legacy-result {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--ink);
    color: var(--surface);
  }

  .legacy-result .micro-label {
    color: #89958c;
  }

  #legacyResultValue {
    margin-top: 0.6rem;
    color: var(--signal);
    font-size: clamp(3rem, 7vw, 5rem);
    font-weight: 850;
    letter-spacing: -0.08em;
    line-height: 0.9;
  }

  #legacyResultCopy {
    margin-top: 0.9rem;
    color: #b5beb7;
    font-size: 0.78rem;
  }

  #legacyFormulaValues {
    margin-top: 1rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--hairline-dark);
    color: #8f9b92;
    font-size: 0.65rem;
  }

  .legacy-method-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 1.5rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--hairline);
  }

  .legacy-method-note p {
    max-width: 52rem;
    color: var(--muted);
    font-size: 0.75rem;
  }

  .legacy-method-note a {
    flex: 0 0 auto;
    font-size: 0.74rem;
    font-weight: 850;
  }

  .faq-list {
    border-top: 1px solid var(--ink);
  }

  .faq-list details {
    border-bottom: 1px solid var(--ink);
  }

  .faq-list summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    min-height: 4.5rem;
    padding-block: 1rem;
    list-style: none;
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 800;
  }

  .faq-list summary::-webkit-details-marker {
    display: none;
  }

  .faq-list summary::after {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 1px solid var(--ink);
    border-radius: 50%;
    content: "+";
    font-family: var(--font-mono);
    font-size: 1rem;
    transition: transform 160ms ease, background-color 160ms ease, color 160ms ease;
  }

  .faq-list details[open] summary::after {
    transform: rotate(45deg);
    background: var(--ink);
    color: var(--signal);
  }

  .faq-list details > p {
    max-width: 55rem;
    padding: 0 3rem 1.5rem 0;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.7;
  }

  .source-list {
    border-top: 1px solid #526058;
  }

  .source-list a {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    gap: 1.2rem;
    align-items: center;
    min-height: 5rem;
    border-bottom: 1px solid #526058;
    color: var(--surface);
    text-decoration: none;
    transition: padding-inline 160ms ease, background-color 160ms ease;
  }

  .source-list a:hover {
    padding-inline: 0.75rem;
    background: rgba(215, 241, 90, 0.045);
  }

  .source-list > a > span {
    color: #768178;
    font-family: var(--font-mono);
    font-size: 0.68rem;
  }

  .source-list > a > div {
    display: grid;
  }

  .source-list strong {
    color: var(--surface);
    font-size: 0.96rem;
  }

  .source-list small {
    margin-top: 0.25rem;
    color: #95a198;
    font-size: 0.72rem;
  }

  .source-list i {
    color: var(--signal);
    font-size: 1.1rem;
    font-style: normal;
  }

  .site-footer {
    padding-block: 4rem 1.25rem;
    border-top: 1px solid var(--hairline);
    background: var(--surface);
  }

  .site-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(24rem, 1fr);
    gap: 4rem;
  }

  .brand--footer .brand__mark {
    width: 2.9rem;
  }

  .site-footer__grid > div:first-child > p {
    max-width: 33rem;
    margin-top: 1.1rem;
    color: var(--muted);
    font-size: 0.76rem;
  }

  .site-footer__links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .site-footer__links > div {
    display: grid;
    align-content: start;
    gap: 0.55rem;
  }

  .site-footer__links strong {
    margin-bottom: 0.25rem;
    font-size: 0.73rem;
  }

  .site-footer__links a {
    color: var(--muted);
    font-size: 0.73rem;
    text-decoration: none;
  }

  .site-footer__links a:hover {
    color: var(--ink);
    text-decoration: underline;
  }

  .site-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid var(--hairline);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    text-transform: uppercase;
  }

  .legal-dialog {
    width: min(calc(100% - 2rem), 45rem);
    max-height: min(52rem, calc(100dvh - 2rem));
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--ink);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    color: var(--ink);
  }

  .legal-dialog--wide {
    width: min(calc(100% - 2rem), 57rem);
  }

  .legal-dialog::backdrop {
    background: rgba(7, 11, 8, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  .legal-dialog[open] {
    animation: dialog-enter 170ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  @keyframes dialog-enter {
    from { transform: translateY(1rem) scale(0.985); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
  }

  .legal-dialog article {
    display: flex;
    max-height: inherit;
    flex-direction: column;
  }

  .legal-dialog header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.25rem 1.4rem;
    border-bottom: 1px solid var(--ink);
    background: var(--paper);
  }

  .legal-dialog header h2 {
    max-width: none;
    margin-top: 0.3rem;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
  }

  .dialog-close {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--ink);
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 1.4rem;
    transition: transform 140ms ease, background-color 140ms ease, color 140ms ease;
  }

  .dialog-close:hover {
    transform: rotate(8deg);
    background: var(--ink);
    color: var(--signal);
  }

  .legal-dialog__body {
    overflow-y: auto;
    padding: clamp(1.35rem, 4vw, 2.4rem);
    overscroll-behavior: contain;
  }

  .legal-dialog__body h3 {
    margin-top: 1.75rem;
    font-size: 1rem;
  }

  .legal-dialog__body p,
  .legal-dialog__body li {
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.7;
  }

  .legal-dialog__body p + p {
    margin-top: 0.8rem;
  }

  .legal-dialog__body h3 + p,
  .legal-dialog__body h3 + ol,
  .legal-dialog__body h3 + ul {
    margin-top: 0.55rem;
  }

  .legal-dialog__body ol,
  .legal-dialog__body ul {
    padding-left: 1.2rem;
  }

  .legal-dialog__body li + li {
    margin-top: 0.45rem;
  }

  .legal-dialog__body a {
    color: var(--ink);
    font-weight: 800;
  }

  .legal-dialog__body code {
    color: var(--ink);
    font-size: 0.75rem;
  }

  .legal-lead {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--hairline);
    color: var(--ink) !important;
    font-size: 1rem !important;
    font-weight: 650;
    line-height: 1.55 !important;
  }

  .toast {
    position: fixed;
    z-index: 1200;
    right: 1rem;
    bottom: max(1rem, env(safe-area-inset-bottom));
    max-width: min(24rem, calc(100% - 2rem));
    padding: 0.8rem 1rem;
    transform: translateY(1rem);
    border: 1px solid var(--signal);
    border-radius: var(--radius-xs);
    background: var(--ink);
    box-shadow: var(--shadow-lg);
    color: var(--surface);
    font-size: 0.76rem;
    font-weight: 750;
    opacity: 0;
    pointer-events: none;
    transition: transform 180ms ease, opacity 180ms ease;
  }

  .toast.is-visible {
    transform: translateY(0);
    opacity: 1;
  }

  html.js [data-reveal] {
    transform: translateY(1rem);
    opacity: 0;
    transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1), opacity 420ms ease;
  }

  html.js [data-reveal].is-visible {
    transform: translateY(0);
    opacity: 1;
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}

@layer responsive {
  @media (max-width: 70rem) {
    .site-nav {
      gap: 1rem;
    }

    .calculator-workspace {
      grid-template-columns: minmax(0, 1.04fr) minmax(21rem, 0.96fr);
    }

    .method-steps {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 60rem) {
    html {
      scroll-padding-top: 4.6rem;
    }

    .site-header__inner {
      min-height: 4.2rem;
    }

    .site-nav a:nth-child(2),
    .site-nav a:nth-child(3) {
      display: none;
    }

    .hero {
      grid-template-columns: 1fr;
      gap: 1.6rem;
      align-items: start;
    }

    .policy-flash {
      max-width: 44rem;
    }

    .calculator-workspace {
      grid-template-columns: 1fr;
    }

    .result-panel {
      min-height: auto;
    }

    .measure-layout {
      grid-template-columns: 1fr;
    }

    .measure-notes {
      position: static;
    }

    .site-footer__grid {
      grid-template-columns: 1fr;
      gap: 2.5rem;
    }
  }

  @media (max-width: 47.99rem) {
    :root {
      --shell: 100%;
    }

    html {
      scroll-padding-top: 4.15rem;
    }

    body {
      background-size: 1.25rem 1.25rem;
    }

    .shell {
      width: min(calc(100% - 1.25rem), var(--shell));
    }

    .section-pad {
      padding-block: 4.2rem;
    }

    .site-header__inner {
      min-height: 4rem;
    }

    .brand__mark {
      width: 2.25rem;
    }

    .brand__wordmark strong {
      font-size: 0.78rem;
    }

    .brand__wordmark small {
      display: none;
    }

    .site-nav {
      gap: 0.75rem;
    }

    .site-nav a {
      font-size: 0.72rem;
    }

    .site-nav a:first-child {
      display: none;
    }

    .hero {
      padding-block: 2.25rem 2rem;
    }

    h1 {
      font-size: clamp(2.7rem, 14vw, 4.1rem);
    }

    .hero__answer {
      font-size: 1.08rem;
    }

    .policy-flash {
      grid-template-columns: 1fr;
    }

    .policy-flash__number {
      justify-self: start;
    }

    .section-heading,
    .section-heading--tool {
      grid-template-columns: 1fr;
      gap: 1.1rem;
      align-items: start;
    }

    .section-heading h2 {
      max-width: 15ch;
    }

    .section-heading > p {
      font-size: 0.84rem;
    }

    .unit-switch {
      justify-self: start;
    }

    .calculator-workspace {
      overflow: visible;
      border-radius: var(--radius-md);
    }

    .input-panel {
      padding: 0.95rem;
    }

    .mobile-result-strip {
      position: sticky;
      z-index: 20;
      top: 4.45rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      margin: -0.95rem -0.95rem 1.15rem;
      padding: 0.65rem 0.9rem;
      border-bottom: 1px solid var(--hairline-dark);
      background: color-mix(in srgb, var(--ink) 96%, transparent);
      box-shadow: 0 8px 20px rgba(17, 23, 19, 0.12);
      color: var(--surface);
    }

    .mobile-result-strip > span:first-child {
      display: flex;
      align-items: baseline;
      gap: 0.65rem;
    }

    .mobile-result-strip small {
      color: #8d9a90;
      font-family: var(--font-mono);
      font-size: 0.55rem;
      font-weight: 800;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    #mobileResultValue {
      color: var(--signal);
      font-family: var(--font-mono);
      font-size: 1.25rem;
      letter-spacing: -0.04em;
    }

    .mobile-result-strip__status {
      color: #aab5ac;
      font-size: 0.62rem;
      font-weight: 800;
      text-align: right;
    }

    .calculator-workspace[data-calculator-state="fail"] #mobileResultValue {
      color: #ff9e7c;
    }

    .calculator-workspace[data-calculator-state^="estimate"] #mobileResultValue,
    .calculator-workspace[data-calculator-state="outlier"] #mobileResultValue {
      color: #f3d07c;
    }

    .measurement-fieldset legend {
      font-size: 0.9rem;
    }

    .field-row,
    .field-row--height {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .waist-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .field-input-wrap input {
      height: 3.1rem;
      padding-left: 0.7rem;
      font-size: 1.05rem;
    }

    .field-unit {
      min-width: 2.35rem;
      font-size: 0.64rem;
    }

    .measurement-figure__toolbar {
      align-items: flex-start;
    }

    .measurement-diagram {
      height: 12.5rem;
    }

    .result-panel {
      padding: 1.25rem 1rem 1.4rem;
    }

    .result-panel__topline {
      align-items: flex-start;
    }

    .result-mode {
      max-width: 10rem;
    }

    #recordedRatio {
      font-size: clamp(4rem, 23vw, 6rem);
    }

    .result-metrics {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .calculation-audit summary span {
      display: none;
    }

    .calculation-audit li {
      grid-template-columns: 1fr;
      gap: 0.2rem;
    }

    .calculation-audit li strong {
      text-align: left;
    }

    .method-steps {
      grid-template-columns: 1fr;
    }

    .method-steps__number {
      margin-bottom: 1.5rem;
    }

    .formula-band {
      grid-template-columns: 1fr;
      gap: 0.6rem;
      text-align: left;
    }

    .formula-band > p:not(.formula-band__rule),
    .formula-band__rule {
      text-align: left;
    }

    .explorer-workspace {
      grid-template-columns: 1fr;
    }

    .explorer-control {
      border-right: 0;
      border-bottom: 1px solid var(--ink);
    }

    .explorer-metrics {
      grid-template-columns: 1fr;
    }

    .explorer-metrics dt {
      min-height: 0;
    }

    .explorer-table-wrap {
      overflow-x: auto;
      padding: 1rem;
    }

    .explorer-table {
      min-width: 27rem;
    }

    .change-comparison {
      grid-template-columns: 1fr;
    }

    .change-source {
      align-items: flex-start;
      flex-direction: column;
      gap: 1rem;
    }

    .measure-checklist li {
      grid-template-columns: 2.2rem minmax(0, 1fr);
    }

    .legacy-disclosure > summary {
      align-items: flex-start;
      flex-direction: column;
      min-height: auto;
    }

    .legacy-disclosure__action {
      width: 100%;
      justify-content: space-between;
    }

    .legacy-content {
      padding-inline: 0.95rem;
    }

    .retired-warning {
      grid-template-columns: 1fr;
    }

    .legacy-grid {
      grid-template-columns: 1fr;
    }

    .legacy-form__topline {
      align-items: stretch;
      flex-direction: column;
    }

    .legacy-method-note {
      align-items: flex-start;
      flex-direction: column;
      gap: 1rem;
    }

    .faq-list details > p {
      padding-right: 0;
    }

    .source-list a {
      grid-template-columns: 2rem minmax(0, 1fr) auto;
      gap: 0.75rem;
    }

    .site-footer__links {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      row-gap: 2rem;
    }

    .site-footer__bottom {
      align-items: flex-start;
      flex-direction: column;
    }

    .legal-dialog {
      width: calc(100% - 1rem);
      max-height: calc(100dvh - 1rem);
      border-radius: var(--radius-sm);
    }

    .legal-dialog header {
      padding: 1rem;
    }

    .legal-dialog__body {
      padding: 1rem;
    }
  }

  @media (max-width: 25rem) {
    .site-nav a:not(:last-child) {
      display: none;
    }

    .brand__wordmark strong {
      max-width: 11rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .waist-grid,
    .field-row,
    .field-row--height {
      grid-template-columns: 1fr;
    }

    .form-actions,
    .result-buttons {
      align-items: stretch;
      flex-direction: column;
    }

    .button {
      width: 100%;
    }

    .ratio-readout {
      align-items: flex-start;
      flex-direction: column;
    }

    .ratio-readout__standard {
      text-align: left;
    }

    .result-metrics,
    .measure-notes__grid,
    .site-footer__links {
      grid-template-columns: 1fr;
    }

    .explorer-readout {
      gap: 0.35rem;
    }

    #explorerHeight {
      font-size: 1.8rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }

    html.js [data-reveal] {
      transform: none;
      opacity: 1;
    }
  }
}

@layer print {
  @media print {
    @page {
      size: auto;
      margin: 0.45in;
    }

    body {
      background: #fff;
      color: #000;
      font-size: 10pt;
    }

    .site-header,
    .hero,
    main > section:not(.calculator-section),
    .section-heading--tool .unit-switch,
    .mobile-result-strip,
    .form-actions,
    .local-only-note,
    .measurement-figure,
    .result-buttons,
    .site-footer,
    dialog,
    .toast,
    .noscript-note {
      display: none !important;
    }

    .shell {
      width: 100%;
    }

    .calculator-section {
      padding: 0;
    }

    .section-heading--tool {
      display: block;
      margin-bottom: 0.2in;
    }

    .section-heading--tool h2 {
      font-size: 20pt;
    }

    .calculator-workspace {
      display: grid;
      grid-template-columns: 1fr 1fr;
      overflow: visible;
      border: 1px solid #000;
      border-radius: 0;
      box-shadow: none;
    }

    .input-panel,
    .result-panel {
      padding: 0.18in;
    }

    .field-input-wrap,
    .field-unit,
    .measurement-fieldset + .measurement-fieldset {
      border-color: #777;
    }

    .field-input-wrap input {
      height: 0.35in;
    }

    .result-panel {
      background: #fff;
      color: #000;
    }

    .result-panel::before {
      background: #000 !important;
    }

    .result-panel *,
    .result-panel h3,
    .result-panel p,
    .result-panel strong,
    .result-panel dd,
    .result-panel output,
    .calculation-audit li strong,
    .ratio-readout__standard strong {
      color: #000 !important;
    }

    #recordedRatio {
      font-size: 44pt;
    }

    .ratio-gauge__marker,
    .ratio-gauge__threshold {
      print-color-adjust: exact;
      -webkit-print-color-adjust: exact;
    }

    .result-metrics,
    .result-metrics > div,
    .calculation-audit,
    .calculation-audit li,
    .ratio-readout,
    .result-action {
      border-color: #777;
    }

    .result-disclaimer {
      margin-top: 0.15in;
    }
  }
}