@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/chakra-petch-latin-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Blueprint for the public site: prussian ink on a whiteprint sheet. Keyline cells, mono figures, a drafting ruler under the PD slider. */
:root {
  color-scheme: light;
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --text-2xs: 0.75rem;
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-fig: 3.25rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 120ms;
  --color-paper: #f3f7fa;
  --color-paper-2: #e9f0f5;
  --color-paper-3: #dae5ed;
  --color-surface: #ffffff;
  --color-ink: #0d3970;
  --color-ink-2: #08254c;
  --color-muted: #4a678c;
  --color-rule: #0d3970;
  --color-rule-2: #c4d3e1;
  --color-grid: #e0e9f1;
  --color-on-ink: #ffffff;
  --color-focus: #0d3970;
  --color-error: #a50002;
  --color-error-bg: #ffedea;
  --font-display: "Chakra Petch", ui-sans-serif, "Segoe UI", Arial, sans-serif;
  --font-body: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --rule-hair: 1px;
  --rule-heavy: 2px;
  --tick: 6px;
  --control: 40px;
  --thumb: 14px;
  --container: 1400px;
  --rail: 300px;
  --result-col: 344px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--color-muted) var(--color-paper); }

body {
  background-color: var(--color-paper);
  background-image:
    linear-gradient(var(--color-grid) var(--rule-hair), transparent var(--rule-hair)),
    linear-gradient(90deg, var(--color-grid) var(--rule-hair), transparent var(--rule-hair));
  background-size: 24px 24px;
  background-position: -1px -1px;
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--color-ink);
}

::selection { background: var(--color-paper-3); color: var(--color-ink-2); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
[hidden] { display: none !important; }
a { color: var(--color-ink); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration: none; }
a:active { color: var(--color-ink-2); }
b, strong { font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: var(--container); margin: 0 auto; padding: var(--space-lg) var(--space-md) var(--space-2xl); }

/* ---- Masthead: the title block of the sheet ---- */
.masthead { position: relative; padding-bottom: var(--space-lg); margin-bottom: var(--space-lg); border-bottom: var(--rule-heavy) solid var(--color-rule); }
.masthead::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * (var(--tick) + var(--rule-heavy)));
  height: var(--tick);
  background-image:
    repeating-linear-gradient(90deg, var(--color-rule) 0 var(--rule-hair), transparent var(--rule-hair) 80px),
    repeating-linear-gradient(90deg, var(--color-rule-2) 0 var(--rule-hair), transparent var(--rule-hair) 8px);
  background-size: 100% 100%, 100% 60%;
  background-repeat: no-repeat;
}
.masthead-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
  flex-wrap: wrap;
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-lg);
  border-bottom: var(--rule-hair) solid var(--color-rule-2);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--color-ink);
  text-decoration: none;
}
.wordmark-mark { width: 22px; height: 22px; background: var(--color-ink); position: relative; }
.wordmark-mark::before {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 5px;
  height: 5px;
  border-bottom: 2px solid var(--color-on-ink);
  border-left: 2px solid var(--color-on-ink);
  border-right: 2px solid var(--color-on-ink);
}
.site-nav { display: flex; flex-wrap: wrap; gap: 0; border: var(--rule-hair) solid var(--color-rule-2); background: var(--color-surface); }
.site-nav a {
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--space-2xs) var(--space-sm);
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--color-ink);
  border-left: var(--rule-hair) solid var(--color-rule-2);
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.site-nav a:first-child { border-left: 0; }
.site-nav a:hover { background: var(--color-paper-2); }
.site-nav a:active { background: var(--color-paper-3); }
.site-nav a:focus-visible { outline-offset: -2px; }
.site-nav a[aria-current="page"] { background: var(--color-ink); color: var(--color-on-ink); }

h1 {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  color: var(--color-ink);
  text-wrap: balance;
  overflow-wrap: break-word;
  min-width: 0;
}
.lede { margin-top: var(--space-sm); max-width: 64ch; color: var(--color-ink-2); font-size: var(--text-md); text-wrap: pretty; }
.pills { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-md); }
.pill { font-size: var(--text-xs); font-weight: 500; padding: var(--space-3xs) var(--space-xs); border: var(--rule-hair) solid var(--color-rule-2); color: var(--color-muted); background: var(--color-surface); white-space: nowrap; }
.pill.on { border-color: var(--color-ink); color: var(--color-ink); }

/* ---- Page grid: content column plus the advertising rail ---- */
.page { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
.content { min-width: 0; container-type: inline-size; }
.ad-rail { display: none; }
@media (min-width: 1240px) {
  .page { grid-template-columns: minmax(0, 1fr) var(--rail); gap: var(--space-lg); align-items: stretch; }
  .ad-rail { display: block; }
  .ad-rail .ad-slot { position: sticky; top: var(--space-md); }
}

/* ---- Advertising: hatched keyline frames, clearly outside the drawing ---- */
.ad-slot {
  position: relative;
  display: block;
  background-color: var(--color-paper-2);
  background-image: repeating-linear-gradient(135deg, transparent 0 9px, var(--color-grid) 9px 10px);
  border: var(--rule-hair) dashed var(--color-rule-2);
  overflow: hidden;
}
.ad-slot::before {
  content: "Advertisement";
  position: absolute;
  top: 0;
  left: 0;
  padding: var(--space-3xs) var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  color: var(--color-muted);
  background: var(--color-paper);
  border-right: var(--rule-hair) solid var(--color-rule-2);
  border-bottom: var(--rule-hair) solid var(--color-rule-2);
}
.ad-leaderboard { min-height: 90px; max-width: 970px; margin: 0 auto var(--space-lg); }
.ad-rail .ad-slot { width: var(--rail); min-height: 600px; }
.ad-inline { min-height: 280px; margin-top: var(--space-xl); }
.ad-anchor {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 56px;
  z-index: 20;
  background-color: var(--color-paper-2);
  border: 0;
  border-top: var(--rule-heavy) solid var(--color-rule);
}
@media (min-width: 900px) { .ad-anchor { display: none; } }
@media (max-width: 899px) { body:not(.doc) { padding-bottom: 64px; } }

/* ---- Workbench: inputs card and result card ---- */
.workbench { display: grid; grid-template-columns: minmax(0, 1fr) var(--result-col); gap: var(--space-lg); align-items: start; }

.card { background: var(--color-surface); border: var(--rule-hair) solid var(--color-rule); padding: var(--space-lg); }
.card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--color-ink);
  padding-bottom: var(--space-xs);
  margin-bottom: var(--space-lg);
  border-bottom: var(--rule-hair) solid var(--color-rule-2);
}

.field { margin-bottom: var(--space-lg); min-width: 0; }
.field:last-child { margin-bottom: 0; }
label, .label { display: block; font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); margin-bottom: var(--space-2xs); }
.field-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-xs); }
.field-head label { margin-bottom: 0; }
.field-head .unit-input { flex: 0 0 132px; }
.hint { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-xs); }
.note {
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-left: var(--rule-heavy) solid var(--color-rule);
  padding: var(--space-xs) var(--space-sm);
  margin-top: var(--space-xs);
}
.note:empty { display: none; }

select, input[type="number"], input[type="text"], input[type="email"], textarea {
  width: 100%;
  height: var(--control);
  padding: 0 var(--space-sm);
  font: inherit;
  font-size: var(--text-md);
  color: var(--color-ink-2);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-muted);
  border-radius: 0;
  transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
input[type="number"] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
input::placeholder { color: var(--color-muted); opacity: 1; font-family: var(--font-body); }
select:hover:not(:disabled), input:hover:not(:disabled) { border-color: var(--color-ink); }
select:focus-visible, input[type="number"]:focus-visible, input[type="text"]:focus-visible, input[type="email"]:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -1px; background: var(--color-surface); }
select:disabled, input:disabled { background: var(--color-paper-2); color: var(--color-muted); border-color: var(--color-rule-2); cursor: not-allowed; }
input[aria-invalid="true"] { border-color: var(--color-error); }
textarea { height: auto; min-height: 160px; padding: var(--space-xs) var(--space-sm); resize: vertical; line-height: 1.5; }

.unit-input { position: relative; display: block; }
.unit-input input { padding-right: 44px; text-align: right; }
.unit-input::after {
  content: attr(data-unit);
  position: absolute;
  right: var(--space-sm);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
  pointer-events: none;
}

.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-sm) var(--space-md); }
.row .field { margin-bottom: var(--space-sm); }

/* Segmented control: two keyline cells */
.segmented { display: grid; grid-template-columns: 1fr 1fr; border: var(--rule-hair) solid var(--color-rule); background: var(--color-surface); }
.segmented label { margin: 0; position: relative; cursor: pointer; }
.segmented label + label { border-left: var(--rule-hair) solid var(--color-rule); }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control);
  padding: var(--space-2xs) var(--space-xs);
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.segmented label:hover span { background: var(--color-paper-2); }
.segmented label:active span { background: var(--color-paper-3); }
.segmented input:checked + span { background: var(--color-ink); color: var(--color-on-ink); }
.segmented input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Sliders: a hairline track with a drafting cursor */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 28px;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track { height: var(--rule-heavy); background: var(--color-rule); }
input[type="range"]::-moz-range-track { height: var(--rule-heavy); background: var(--color-rule); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--thumb);
  height: 22px;
  margin-top: -10px;
  background: var(--color-ink);
  border: 3px solid var(--color-surface);
  outline: var(--rule-hair) solid var(--color-ink);
  border-radius: 0;
}
input[type="range"]::-moz-range-thumb {
  width: 8px;
  height: 16px;
  background: var(--color-ink);
  border: 3px solid var(--color-surface);
  outline: var(--rule-hair) solid var(--color-ink);
  border-radius: 0;
}
input[type="range"]:hover::-webkit-slider-thumb { background: var(--color-ink-2); }
input[type="range"]:active::-webkit-slider-thumb { background: var(--color-ink-2); outline-width: 2px; }
input[type="range"]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
input[type="range"]:disabled { cursor: not-allowed; }
input[type="range"]:disabled::-webkit-slider-runnable-track { background: var(--color-rule-2); }
input[type="range"]:disabled::-moz-range-track { background: var(--color-rule-2); }
input[type="range"]:disabled::-webkit-slider-thumb { background: var(--color-rule-2); outline-color: var(--color-rule-2); }
input[type="range"]:disabled::-moz-range-thumb { background: var(--color-rule-2); outline-color: var(--color-rule-2); }

/* The ruler: tick scale aligned to the slider track */
.scale {
  position: relative;
  height: 34px;
  margin: 0 calc(var(--thumb) / 2);
  border-top: var(--rule-hair) solid var(--color-rule-2);
}
.scale .minor-ticks { position: absolute; inset: 0; pointer-events: none; }
.scale .minor-ticks i { position: absolute; top: 0; left: calc(var(--x) * 100%); width: var(--rule-hair); height: 4px; background: var(--color-rule-2); }
.scale-static {
  background-image: repeating-linear-gradient(90deg, var(--color-rule-2) 0 var(--rule-hair), transparent var(--rule-hair) 5%);
  background-size: 100% 4px;
  background-repeat: no-repeat;
  height: 26px;
}
.scale > button, .scale > span {
  position: absolute;
  top: 0;
  left: calc(var(--x) * 100%);
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  line-height: 1;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding: 10px var(--space-2xs) var(--space-2xs);
}
.scale > button::before, .scale > span::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: var(--rule-hair);
  height: var(--tick);
  background: var(--color-rule);
}
.scale > :first-child { transform: translateX(calc(-1 * var(--thumb) / 2)); }
.scale > :first-child::before { left: calc(var(--thumb) / 2); }
.scale > button:last-of-type, .scale > span:last-child { transform: translateX(calc(-100% + var(--thumb) / 2)); }
.scale > button:last-of-type::before, .scale > span:last-child::before { left: auto; right: calc(var(--thumb) / 2); }
.scale > button {
  appearance: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-ink);
  font-weight: 500;
  min-height: 28px;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.scale > button:hover { background: var(--color-paper-2); }
.scale > button:active { background: var(--color-paper-3); }
.scale > button:focus-visible { outline-offset: 0; }
.scale > button[aria-pressed="true"] { background: var(--color-ink); color: var(--color-on-ink); }

/* Panels inside the inputs card */
.panel { border: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper); padding: var(--space-md); margin-bottom: var(--space-lg); min-width: 0; }
.panel:last-child { margin-bottom: 0; }
legend {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  text-transform: uppercase;
  color: var(--color-ink);
  padding: 0 var(--space-xs);
  margin-left: calc(-1 * var(--space-xs));
}
.panel input[type="number"], .panel select { background: var(--color-surface); }
.check { display: flex; align-items: center; gap: var(--space-xs); min-height: 28px; margin: var(--space-2xs) 0 0; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--color-ink); flex: none; }
.error { color: var(--color-error); background: var(--color-error-bg); border-left: var(--rule-heavy) solid var(--color-error); font-size: var(--text-sm); font-weight: 500; margin-top: var(--space-sm); padding: var(--space-xs) var(--space-sm); }

/* ---- Result: the dimension box ---- */
.result { position: sticky; top: var(--space-md); outline: var(--rule-hair) solid var(--color-rule-2); outline-offset: -7px; }
.result-label { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.figure {
  font-family: var(--font-mono);
  font-size: var(--text-fig);
  font-weight: 500;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1.05;
  padding-bottom: var(--space-xs);
  border-bottom: var(--rule-heavy) solid var(--color-rule);
  overflow-wrap: anywhere;
}
.figure-unit { font-size: 0.5em; margin-left: var(--space-2xs); color: var(--color-muted); letter-spacing: 0; }
.result-list div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); padding: var(--space-xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule-2); font-size: var(--text-sm); }
.result-list dt { color: var(--color-muted); }
.result-list dd { font-family: var(--font-mono); font-weight: 500; text-align: right; color: var(--color-ink-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.badges { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-md); }
.badge { font-size: var(--text-2xs); border: var(--rule-hair) solid var(--color-rule-2); padding: var(--space-2xs) var(--space-xs); color: var(--color-ink-2); background: var(--color-paper); }
.badge b { font-family: var(--font-mono); font-weight: 500; color: var(--color-ink); margin-left: var(--space-2xs); }
.assumption {
  font-size: var(--text-2xs);
  color: var(--color-ink-2);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-left: var(--rule-heavy) solid var(--color-rule);
  padding: var(--space-xs) var(--space-sm);
  margin-top: var(--space-sm);
}

.btn {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-top: var(--space-md);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: 0;
  cursor: pointer;
  border: var(--rule-hair) solid var(--color-ink);
  background: var(--color-ink);
  color: var(--color-on-ink);
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.btn:hover { background: var(--color-ink-2); border-color: var(--color-ink-2); }
.btn:active { background: var(--color-ink-2); transform: translateY(1px); }
.btn:focus-visible { outline-offset: 3px; }
.btn:disabled { background: var(--color-paper-2); color: var(--color-muted); border-color: var(--color-rule-2); cursor: not-allowed; transform: none; }
.copy-note { font-size: var(--text-xs); color: var(--color-ink); margin-top: var(--space-xs); }

/* ---- Sheet sections ---- */
section.block { margin-top: var(--space-xl); min-width: 0; }
.block-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
  flex-wrap: wrap;
  border-top: var(--rule-heavy) solid var(--color-rule);
  padding-top: var(--space-sm);
  margin-bottom: var(--space-md);
}
.block-head h2, section.block > h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--color-ink);
  overflow-wrap: break-word;
  min-width: 0;
}
.block-aside { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-muted); }

.sheet { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--space-lg); }
@container (min-width: 960px) {
  .sheet { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}

table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); background: var(--color-surface); border: var(--rule-hair) solid var(--color-rule-2); }
th, td { text-align: left; padding: var(--space-xs) var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule-2); vertical-align: middle; }
th { font-weight: 500; color: var(--color-muted); font-size: var(--text-xs); border-bottom: var(--rule-heavy) solid var(--color-rule); white-space: nowrap; }
td { color: var(--color-ink-2); }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.num { font-family: var(--font-mono); white-space: nowrap; color: var(--color-ink); }
.compare tr.active td { background: var(--color-paper-2); }
.compare tr.active td:first-child { box-shadow: inset var(--rule-heavy) 0 0 var(--color-ink); font-weight: 600; color: var(--color-ink); }
.bar-col { width: 22%; }
.bar { background: var(--color-grid); height: 10px; min-width: 56px; }
.bar span { display: block; height: 100%; background: var(--color-muted); }
tr.active .bar span { background: var(--color-ink); }

/* ---- Chart ---- */
.chart { background: var(--color-surface); border: var(--rule-hair) solid var(--color-rule); padding: var(--space-sm); outline: var(--rule-hair) solid var(--color-rule-2); outline-offset: -5px; }
.chart svg { width: 100%; height: auto; display: block; }
.chart-label { margin-top: var(--space-md); margin-bottom: var(--space-xs); }
.result .chart { padding: var(--space-xs); outline-offset: -4px; }
.result .chart .tick, .result .chart .axis-title { font-size: 12px; }
.figure-unit:first-child { margin-left: 0; margin-right: var(--space-2xs); }
:lang(tr) .ad-slot::before { content: "Reklam"; }
.chart .axis { stroke: var(--color-rule); stroke-width: 1; }
.chart .grid { stroke: var(--color-grid); stroke-width: 1; }
.chart .grid-major { stroke: var(--color-rule-2); stroke-width: 1; }
.chart .tick { font-family: var(--font-mono); font-size: 11px; fill: var(--color-muted); }
.chart .axis-title { font-family: var(--font-body); font-size: 11px; fill: var(--color-muted); }
.chart .curve { fill: none; stroke: var(--color-ink); stroke-width: 2.25; stroke-linejoin: round; }
.chart .area { fill: var(--color-paper-2); }
.chart .guide { stroke: var(--color-ink); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .marker { fill: var(--color-ink); stroke: var(--color-surface); stroke-width: 2; }
.chart .marker-box { fill: var(--color-ink); }
.chart .marker-text { font-family: var(--font-mono); font-size: 12px; font-weight: 500; fill: var(--color-on-ink); }

/* ---- Methodology ---- */
details { background: var(--color-surface); border: var(--rule-hair) solid var(--color-rule); padding: 0 var(--space-md); }
details + details { border-top: 0; }
summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 48px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
  text-transform: uppercase;
  color: var(--color-ink);
}
summary::-webkit-details-marker { display: none; }
summary::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: none;
  font-family: var(--font-mono);
  font-weight: 500;
  border: var(--rule-hair) solid var(--color-rule);
}
details[open] summary::before { content: "\2212"; background: var(--color-ink); color: var(--color-on-ink); }
summary:hover { color: var(--color-ink-2); }
summary:focus-visible { outline-offset: -2px; }
.details-body { border-top: var(--rule-hair) solid var(--color-rule-2); padding: var(--space-sm) 0 var(--space-md); }
.details-body p, .details-body li { font-size: var(--text-sm); color: var(--color-ink-2); max-width: 78ch; line-height: 1.65; }
.details-body p + p, .details-body li + li { margin-top: var(--space-xs); }
.details-body ul { padding-left: var(--space-lg); }
.details-body ul + p { margin-top: var(--space-sm); }
code { font-family: var(--font-mono); font-size: 0.875em; color: var(--color-ink); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule-2); padding: 0 var(--space-2xs); }
.formula { overflow-x: auto; margin: var(--space-xs) 0; }
.formula code { display: inline-block; white-space: nowrap; padding: var(--space-xs) var(--space-sm); }

/* ---- Prose pages ---- */
.prose { max-width: 72ch; }
.prose p, .prose li { font-size: var(--text-md); line-height: 1.65; color: var(--color-ink-2); }
.prose p + p { margin-top: var(--space-sm); }
.prose ul { padding-left: var(--space-lg); margin-top: var(--space-xs); }
.prose li + li { margin-top: var(--space-xs); }
.prose-sheet { background: var(--color-surface); border: var(--rule-hair) solid var(--color-rule); padding: var(--space-lg); max-width: 880px; }
.prose-sheet section.block:first-child { margin-top: 0; }
.contact-form { margin-top: var(--space-lg); max-width: 560px; }
.contact-form .btn { width: auto; padding: 0 var(--space-lg); }
.contact-form .trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-size: var(--text-sm); margin-top: var(--space-sm); color: var(--color-ink); }

/* ---- Footer ---- */
.site-footer {
  margin-top: var(--space-2xl);
  border-top: var(--rule-heavy) solid var(--color-rule);
  padding-top: var(--space-md);
  font-size: var(--text-xs);
  color: var(--color-muted);
  display: grid;
  gap: var(--space-xs);
}
.site-footer p { max-width: 90ch; }
.site-footer .disclaimer { color: var(--color-ink-2); font-weight: 500; }
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-xs); }
.footer-nav a { font-weight: 500; display: inline-flex; align-items: center; min-height: 24px; }

/* ---- Narrow screens ---- */
@media (max-width: 900px) {
  .workbench { grid-template-columns: minmax(0, 1fr); }
  .result { position: static; }
}
@media (max-width: 600px) {
  .wrap { padding-top: var(--space-md); }
  .card { padding: var(--space-md); }
  .masthead-top { margin-bottom: var(--space-md); }
  .site-nav { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site-nav a { justify-content: center; padding: var(--space-2xs); }
  .row { grid-template-columns: minmax(0, 1fr); }
  .field-head { flex-wrap: wrap; }
  .field-head label { flex: 1 1 100%; }
  .field-head .unit-input { flex: 1 1 100%; }
  .scale > .minor { display: none; }
  .figure { font-size: 2.75rem; }
  .bar-col, .compare td:last-child { display: none; }
  th, td { padding: var(--space-xs); }
  .prose-sheet { padding: var(--space-md); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .btn:active { transform: none; }
}

@media print {
  body { background: var(--color-surface); }
  .ad-slot, .ad-rail, .site-nav, .btn { display: none !important; }
  .result { position: static; }
}