:root {
  color-scheme: light;
  --ink: #17211d;
  --muted: #5f6e66;
  --paper: #f6f3eb;
  --panel: #fffdf8;
  --line: #d8ddd6;
  --green: #165c46;
  --green-soft: #dcefe7;
  --amber: #8a5614;
  --amber-soft: #fff1d6;
  --red: #982e2e;
  --red-soft: #fce4e1;
  --blue: #214f7c;
  --blue-soft: #e5eef8;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); line-height: 1.55; }
a { color: var(--green); text-underline-offset: 0.16em; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid #ef9b24; outline-offset: 2px; }
.site-header { max-width: 1120px; margin: 0 auto; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { color: var(--ink); font-size: 1.15rem; font-weight: 800; text-decoration: none; letter-spacing: -0.02em; }
.private-badge { border: 1px solid #b7c4bb; border-radius: 999px; padding: 5px 10px; color: var(--muted); font-size: 0.78rem; font-weight: 700; }
main { width: min(960px, calc(100% - 32px)); margin: 28px auto 72px; }
.hero { max-width: 800px; margin: 36px 0 42px; }
.eyebrow, .step { color: var(--green); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
h1, h2 { line-height: 1.12; letter-spacing: -0.035em; }
h1 { margin: 8px 0 18px; font-size: clamp(2.25rem, 7vw, 4.8rem); max-width: 850px; }
h2 { margin: 5px 0 12px; font-size: clamp(1.35rem, 3vw, 2rem); }
.lede { max-width: 770px; color: #35423b; font-size: clamp(1.05rem, 2vw, 1.25rem); }
.panel { margin: 18px 0; padding: clamp(20px, 4vw, 34px); border: 1px solid var(--line); border-radius: 20px; background: var(--panel); box-shadow: 0 8px 30px rgb(34 48 40 / 5%); }
.section-heading { display: flex; align-items: start; justify-content: space-between; gap: 22px; }
.hint, .field-note { color: var(--muted); }
.field-note { font-size: 0.88rem; }
.field-grid { display: grid; gap: 15px; margin-top: 18px; }
.field-grid.two { grid-template-columns: minmax(170px, 0.65fr) minmax(260px, 1.35fr); }
.field-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
label { display: grid; gap: 7px; color: #35423b; font-size: 0.9rem; font-weight: 700; }
.compact-field { min-width: 105px; }
input, select, textarea { width: 100%; min-height: 44px; border: 1px solid #aebbb2; border-radius: 9px; background: white; color: var(--ink); padding: 9px 11px; font: inherit; }
textarea { resize: vertical; min-height: 124px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9rem; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px 0 28px; }
.button, .remove-button { min-height: 44px; border: 1px solid transparent; border-radius: 10px; padding: 10px 16px; font: inherit; font-weight: 800; cursor: pointer; }
.button.primary { background: var(--green); color: white; }
.button.secondary { border-color: #abb8b0; background: transparent; color: var(--ink); }
.remove-button { min-height: 36px; padding: 6px 10px; border-color: #dfb9b3; background: white; color: var(--red); font-size: 0.8rem; }
.table-scroll { max-width: 100%; overflow-x: auto; margin-top: 18px; }
table { width: 100%; border-collapse: collapse; }
th, td { border-bottom: 1px solid var(--line); padding: 10px 8px; text-align: left; vertical-align: middle; white-space: nowrap; }
th { color: var(--muted); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; }
td input { min-width: 104px; }
td:first-child input { min-width: 150px; }
.callout { border-radius: 12px; padding: 13px 15px; }
.callout.warning { background: var(--amber-soft); color: #65400f; }
.callout.caution { background: var(--blue-soft); color: #183d61; }
.result { border-width: 2px; scroll-margin-top: 20px; }
.result.proven-fit { border-color: #82b49e; }
.result.not-proven { border-color: #d5ac68; }
.result.unknown, .result.proven-no-fit-height { border-color: #d99a91; }
.result-summary { font-size: 1.05rem; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 22px 0; }
.metric-grid > div { min-height: 92px; border-radius: 12px; background: var(--green-soft); padding: 14px; display: grid; align-content: space-between; }
.metric-label { color: #3f5a4e; font-size: 0.78rem; font-weight: 700; }
.diagram-wrap { margin: 24px auto; max-width: 720px; border-radius: 14px; background: #eef2ec; padding: 14px; }
.diagram-wrap svg { display: block; width: 100%; max-height: 540px; }
.freezer-outline { fill: #fcfdf9; stroke: #263d31; stroke-width: 0.8; vector-effect: non-scaling-stroke; }
.hump-shape { fill: #c8c7b9; stroke: #68685f; stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.vessel-shape { fill: #99cfba; fill-opacity: 0.88; stroke: #165c46; stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.vessel-shape.on-hump { fill: #f0b75d; stroke: #845117; }
.vessel-number { fill: #10261c; font-weight: 800; font-size: 4px; text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.limits { margin: 46px auto 0; max-width: 800px; }
.limits li, .prose li { margin: 8px 0; }
.prose { max-width: 780px; }
.prose h1 { font-size: clamp(2.1rem, 6vw, 4rem); }
.prose h2 { margin-top: 36px; }
footer { border-top: 1px solid var(--line); padding: 24px; color: var(--muted); text-align: center; font-size: 0.86rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

@media (max-width: 720px) {
  .site-header { align-items: flex-start; padding-inline: 16px; }
  main { width: min(100% - 24px, 960px); margin-top: 8px; }
  .hero { margin-top: 24px; }
  .field-grid.two, .field-grid.three, .metric-grid { grid-template-columns: 1fr; }
  .section-heading { align-items: stretch; flex-direction: column; }
  .compact-field { width: 100%; }
  .panel { border-radius: 14px; }
  .actions .button { width: 100%; }
}

.measurement-consent{margin:18px 0;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--blue-soft)}
.consent-actions{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}