/* ---- type ---- */
@font-face {
  font-family: "Mona Sans";
  src: url("fonts/mona-sans.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Mona Sans";
  src: url("fonts/mona-sans-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("fonts/martian-mono.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-display: swap;
}
:root {
  --font-sans: "Mona Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --type-display: 850 clamp(3.25rem, 1.509rem + 7.427vw, 7.451rem)/0.86 var(--font-sans);
  --type-h1: 750 clamp(2.625rem, 1.737rem + 3.789vw, 4.768rem)/0.94 var(--font-sans);
  --type-h2: 700 clamp(1.938rem, 1.476rem + 1.97vw, 3.052rem)/1.0 var(--font-sans);
  --type-h3: 650 clamp(1.562rem, 1.401rem + 0.6906vw, 1.953rem)/1.12 var(--font-sans);
  --type-h4: 600 1.25rem/1.3 var(--font-sans);
  --type-lead: 400 clamp(1.25rem, 1.121rem + 0.5525vw, 1.562rem)/1.45 var(--font-sans);
  --type-body: 400 1rem/1.6 var(--font-sans);
  --type-small: 400 0.875rem/1.5 var(--font-sans);
  --type-caption: 400 0.8125rem/1.45 var(--font-sans);
  --type-data: 500 0.875rem/1.4 var(--font-sans);
  --type-label: 400 clamp(0.6875rem, 0.6616rem + 0.1105vw, 0.75rem)/1.4 var(--font-mono);
  --type-code: 400 clamp(0.7812rem, 0.7683rem + 0.05525vw, 0.8125rem)/1.65 var(--font-mono);
  --type-display-width: 125%;
  --type-display-tracking: -0.01em;
  --type-h1-width: 100%;
  --type-h1-tracking: -0.04em;
  --type-h2-width: 100%;
  --type-h2-tracking: -0.035em;
  --type-h3-width: 100%;
  --type-h3-tracking: -0.025em;
  --type-h4-width: 100%;
  --type-h4-tracking: -0.01em;
  --type-lead-width: 100%;
  --type-lead-tracking: -0.01em;
  --type-body-width: 100%;
  --type-body-tracking: 0em;
  --type-small-width: 100%;
  --type-small-tracking: 0em;
  --type-caption-width: 100%;
  --type-caption-tracking: 0.005em;
  --type-data-width: 75%;
  --type-data-tracking: 0em;
  --type-label-width: 87.5%;
  --type-label-tracking: 0.08em;
  --type-code-width: 100%;
  --type-code-tracking: 0em;
}
.t-display { font: var(--type-display); font-stretch: var(--type-display-width); letter-spacing: var(--type-display-tracking); text-transform: uppercase; }
.t-h1 { font: var(--type-h1); font-stretch: var(--type-h1-width); letter-spacing: var(--type-h1-tracking); }
.t-h2 { font: var(--type-h2); font-stretch: var(--type-h2-width); letter-spacing: var(--type-h2-tracking); }
.t-h3 { font: var(--type-h3); font-stretch: var(--type-h3-width); letter-spacing: var(--type-h3-tracking); }
.t-h4 { font: var(--type-h4); font-stretch: var(--type-h4-width); letter-spacing: var(--type-h4-tracking); }
.t-lead { font: var(--type-lead); font-stretch: var(--type-lead-width); letter-spacing: var(--type-lead-tracking); }
.t-body { font: var(--type-body); font-stretch: var(--type-body-width); letter-spacing: var(--type-body-tracking); }
.t-small { font: var(--type-small); font-stretch: var(--type-small-width); letter-spacing: var(--type-small-tracking); }
.t-caption { font: var(--type-caption); font-stretch: var(--type-caption-width); letter-spacing: var(--type-caption-tracking); }
.t-data { font: var(--type-data); font-stretch: var(--type-data-width); letter-spacing: var(--type-data-tracking); font-variant-numeric: tabular-nums; }
.t-label { font: var(--type-label); font-stretch: var(--type-label-width); letter-spacing: var(--type-label-tracking); text-transform: uppercase; }
.t-code { font: var(--type-code); font-stretch: var(--type-code-width); letter-spacing: var(--type-code-tracking); }
/* ---- colour ---- */
:root {
  --stone-50: #F8F7F1;
  --stone-100: #EFEDE7;
  --stone-200: #D6D9D3;
  --stone-300: #BDBFB8;
  --stone-400: #9CA099;
  --stone-500: #7F857E;
  --stone-600: #636C65;
  --stone-700: #525C57;
  --stone-800: #3A4542;
  --stone-900: #24312F;
  --stone-950: #101D1D;
  --teal-50: #E9F7F5;
  --teal-100: #DFEDEB;
  --teal-200: #CEDDDA;
  --teal-300: #A7C5C1;
  --teal-400: #70ABA4;
  --teal-500: #43938A;
  --teal-600: #147970;
  --teal-700: #0B6E66;
  --teal-800: #024D47;
  --teal-900: #003632;
  --teal-950: #0E2A2A;
  --green-50: #E7F9EA;
  --green-100: #DEEFE0;
  --green-200: #CAE0CE;
  --green-300: #96CEA1;
  --green-400: #5EB473;
  --green-500: #2E9B51;
  --green-600: #007F38;
  --green-700: #046C30;
  --green-800: #015122;
  --green-900: #023816;
  --green-950: #0D1F11;
  --amber-50: #FFF1E2;
  --amber-100: #FFE5C8;
  --amber-200: #FFD09A;
  --amber-300: #F2AF5C;
  --amber-400: #D88B13;
  --amber-500: #B47307;
  --amber-600: #915B01;
  --amber-700: #7C4E01;
  --amber-800: #5B3A0D;
  --amber-900: #372C1F;
  --amber-950: #23180C;
  --red-50: #FEF0EE;
  --red-100: #FFE2DE;
  --red-200: #F4CFCA;
  --red-300: #FCA398;
  --red-400: #F27166;
  --red-500: #DC4941;
  --red-600: #BE2424;
  --red-700: #A71116;
  --red-800: #80040B;
  --red-900: #580C0C;
  --red-950: #2D110E;
  --blue-50: #EAF5FF;
  --blue-100: #DCECFA;
  --blue-200: #C9DCED;
  --blue-300: #93C4EE;
  --blue-400: #59A5E3;
  --blue-500: #2889CF;
  --blue-600: #056EAD;
  --blue-700: #005E96;
  --blue-800: #034670;
  --blue-900: #003051;
  --blue-950: #0C1C2A;
}
:root, [data-mode="light"] {
  --bg: #EFEDE7;
  --surface: #F8F7F1;
  --sunken: #E4E3DC;
  --line: #D6D9D3;
  --line-strong: #BDBFB8;
  --control-border: #7F857E;
  --text: #0E2A2A;
  --text-muted: #525C57;
  --text-subtle: #636C65;
  --accent: #0B6E66;
  --accent-hover: #024D47;
  --on-accent: #F8F7F1;
  --accent-tint: #DFEDEB;
  --on-accent-tint: #024D47;
  --success: #046C30;
  --success-bg: #DEEFE0;
  --success-border: #96CEA1;
  --success-solid: #007F38;
  --on-success-solid: #FFFFFF;
  --warning: #7C4E01;
  --warning-bg: #FFE5C8;
  --warning-border: #F2AF5C;
  --warning-solid: #915B01;
  --on-warning-solid: #FFFFFF;
  --danger: #A71116;
  --danger-bg: #FFE2DE;
  --danger-border: #FCA398;
  --danger-solid: #BE2424;
  --on-danger-solid: #FFFFFF;
  --info: #005E96;
  --info-bg: #DCECFA;
  --info-border: #93C4EE;
  --info-solid: #056EAD;
  --on-info-solid: #FFFFFF;
}
[data-mode="dark"] {
  --bg: #082323;
  --surface: #132F2F;
  --sunken: #041A1A;
  --line: #27403F;
  --line-strong: #3C5555;
  --control-border: #708585;
  --text: #EFEDE7;
  --text-muted: #BDBFB8;
  --text-subtle: #9CA099;
  --accent: #54CEC2;
  --accent-hover: #80E2D7;
  --on-accent: #0E2A2A;
  --accent-tint: #12403C;
  --on-accent-tint: #ABE5DD;
  --success: #9BDDA8;
  --success-bg: #1E3022;
  --success-border: #37593E;
  --success-solid: #6FC884;
  --on-success-solid: #0E2A2A;
  --warning: #F5BF81;
  --warning-bg: #372818;
  --warning-border: #654A29;
  --warning-solid: #E5A14B;
  --on-warning-solid: #0E2A2A;
  --danger: #FFB5AC;
  --danger-bg: #3B2522;
  --danger-border: #6D433E;
  --danger-solid: #F98F84;
  --on-danger-solid: #0E2A2A;
  --info: #9CD1FE;
  --info-bg: #1C2D3C;
  --info-border: #32536F;
  --info-solid: #63B9FE;
  --on-info-solid: #0E2A2A;
}
/* ---- layout ---- */
:root {
  --space-3xs: clamp(0.25rem, 0.2241rem + 0.1105vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.4482rem + 0.221vw, 0.625rem);
  --space-xs: clamp(0.75rem, 0.6723rem + 0.3315vw, 0.9375rem);
  --space-s: clamp(1rem, 0.8964rem + 0.442vw, 1.25rem);
  --space-m: clamp(1.5rem, 1.345rem + 0.663vw, 1.875rem);
  --space-l: clamp(2rem, 1.793rem + 0.884vw, 2.5rem);
  --space-xl: clamp(3rem, 2.689rem + 1.326vw, 3.75rem);
  --space-2xl: clamp(4rem, 3.586rem + 1.768vw, 5rem);
  --space-3xl: clamp(6rem, 5.378rem + 2.652vw, 7.5rem);
  --space-4xl: clamp(8rem, 7.171rem + 3.536vw, 10rem);
  --space-s-l: clamp(1rem, 0.3785rem + 2.652vw, 2.5rem);
  --space-m-xl: clamp(1.5rem, 0.5677rem + 3.978vw, 3.75rem);
  --space-xl-3xl: clamp(3rem, 1.135rem + 7.956vw, 7.5rem);
  --space-2xl-4xl: clamp(4rem, 1.514rem + 10.61vw, 10rem);
  --page-max: 1440px;
  --cols: 12;
  --margin: var(--space-s-l);
  --gutter: var(--space-s-l);
  --measure: 66ch;
  --section-gap: var(--space-2xl-4xl);
  --block-gap: var(--space-m-xl);
  --hero-top: var(--space-xl);
  --hero-gap: var(--space-l);
  --hero-sentence: clamp(2rem, 1.378rem + 2.652vw, 3.5rem);
  --hero-dim: .28;
  --door-aspect: 2 / 3;
  --card-image-aspect: 1200 / 630;
  --statement-measure: 20ch;
  --outcome-cols: 6;
  --row-pad: var(--space-m);
  --radius-control: 2px;
  --radius-card: 2px;
  --control-h: 48px;
  --control-h-sm: 34px;
  --control-px: 18px;
  --btn-gap: 32px;
  --field-border: 2px;
  --focus-ring: 3px;
  --nav-h: 64px;
  --hang: 3;
}
@media (max-width: 760px) { :root { --cols: 4; } }
.l-wrap { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--margin); }
.l-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); }
.l-section { padding-top: var(--section-gap); }
.l-section > .l-grid, .l-section > .l-wrap > .l-grid { border-top: 1px solid var(--text); padding-top: var(--space-s); row-gap: var(--space-l); }
.l-hang { grid-column: 1 / span var(--hang); }
.l-body { grid-column: calc(var(--hang) + 1) / -1; }
.l-read { grid-column: calc(var(--hang) + 1) / span 6; }
.l-full { grid-column: 1 / -1; }
@media (max-width: 760px) { .l-hang, .l-body, .l-read { grid-column: 1 / -1; } }
/* ---- components ---- */
.mk-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--btn-gap); height: var(--control-h); padding: 0 var(--control-px); border-radius: var(--radius-control); border: 1px solid transparent; font: var(--type-small); font-size: 15px; font-weight: 650; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.mk-btn .mk-ar { display: inline-block; transition: translate .15s; }
.mk-btn:hover .mk-ar, .mk-btn.is-hover .mk-ar { translate: 4px 0; }
.mk-btn:focus-visible, .mk-btn.is-focus { outline: var(--focus-ring) solid var(--accent); outline-offset: 0; box-shadow: inset 0 0 0 2px var(--bg); }
.mk-btn--primary { background: var(--accent); color: var(--on-accent); }
.mk-btn--primary:hover, .mk-btn--primary.is-hover { background: var(--accent-hover); }
.mk-btn--primary:active, .mk-btn--primary.is-active { background: var(--teal-900); }
[data-mode="dark"] .mk-btn--primary:active, [data-mode="dark"] .mk-btn--primary.is-active { background: var(--teal-300); }
.mk-btn--secondary { background: transparent; color: var(--text); border-color: var(--control-border); }
.mk-btn--secondary:hover, .mk-btn--secondary.is-hover { border-color: var(--text); background: var(--sunken); }
.mk-btn--secondary:active, .mk-btn--secondary.is-active { background: var(--line); }
.mk-btn--text { height: auto; padding: 0; gap: 10px; background: none; color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 5px; }
.mk-btn--text:hover, .mk-btn--text.is-hover { color: var(--accent); text-decoration-color: var(--accent); }
.mk-btn--small { height: var(--control-h-sm); padding: 0 12px; gap: 12px; font-size: 13px; }
.mk-btn:disabled, .mk-btn.is-disabled { background: var(--sunken); color: var(--text-subtle); border-color: transparent; cursor: not-allowed; }
.mk-prose a, a.mk-link { color: var(--text); text-decoration: underline 1px var(--accent); text-underline-offset: .2em; }
.mk-prose a:hover, a.mk-link:hover, .mk-prose a.is-hover { color: var(--accent); text-decoration-thickness: 2px; }
.mk-prose a:focus-visible, a.mk-link:focus-visible, .mk-prose a.is-focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.mk-tag { display: inline-flex; align-items: center; font: var(--type-label); font-stretch: 87.5%; letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px; border-radius: var(--radius-control); background: var(--sunken); color: var(--text-muted); white-space: nowrap; }
.mk-tag--live { background: var(--accent-tint); color: var(--on-accent-tint); }
.mk-tag--off { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--text-subtle); }
.mk-card { display: grid; gap: 10px; text-decoration: none; color: inherit; }
.mk-card__img { aspect-ratio: var(--card-image-aspect); border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--line); }
.mk-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mk-card h3, .mk-card h4 { font: var(--type-h3); letter-spacing: var(--type-h3-tracking); }
.mk-card:hover h3, .mk-card:hover h4, .mk-card.is-hover h4 { color: var(--accent); }
.mk-card:focus-visible, .mk-card.is-focus { outline: var(--focus-ring) solid var(--accent); outline-offset: 6px; }
.mk-field { display: grid; gap: 6px; }
.mk-field > span { font: var(--type-small); font-weight: 600; }
.mk-field__hint { font: var(--type-caption); color: var(--text-subtle); }
.mk-field__error { font: var(--type-small); font-weight: 600; color: var(--danger); }
.mk-field--error { border-left: 4px solid var(--danger); padding-left: 14px; }
.mk-input { width: 100%; height: var(--control-h); padding: 0 14px; font: var(--type-body); color: var(--text); background: var(--surface); border: var(--field-border) solid var(--control-border); border-radius: var(--radius-control); }
textarea.mk-input { height: 120px; padding-top: 12px; resize: vertical; }
.mk-input:hover, .mk-input.is-hover { border-color: var(--text); }
.mk-input:focus-visible, .mk-input.is-focus { outline: var(--focus-ring) solid var(--accent); outline-offset: 0; border-color: var(--text); }
.mk-field--error .mk-input { border-color: var(--danger); }
.mk-input:disabled { background: var(--sunken); color: var(--text-subtle); border-color: var(--line-strong); }
.mk-check { display: flex; gap: 10px; align-items: center; font: var(--type-small); }
.mk-check input { width: 20px; height: 20px; accent-color: var(--accent); }
.mk-tbl { width: 100%; border-collapse: collapse; font: var(--type-small); }
.mk-tbl th { text-align: left; font: var(--type-label); font-stretch: 87.5%; letter-spacing: .08em; text-transform: uppercase; font-weight: 400; color: var(--text-subtle); padding: 0 12px 10px 0; border-bottom: 1px solid var(--text); }
.mk-tbl td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); }
.mk-tbl .n { text-align: right; font: var(--type-data); font-stretch: 75%; font-variant-numeric: tabular-nums; }
.mk-tbl tbody tr:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.mk-term { background: var(--sunken); border: 1px solid var(--line); border-radius: var(--radius-card); font: var(--type-code); color: var(--text-muted); }
.mk-term__bar { display: flex; justify-content: space-between; padding: 8px 14px; border-bottom: 1px solid var(--line); font-size: 11px; color: var(--text-subtle); }
.mk-term__body { padding: 12px 14px 14px; }
.mk-term .k { color: var(--accent); }
.mk-term .cur { display: inline-block; width: .6em; height: 1.1em; background: var(--accent); vertical-align: -.2em; }
.mk-acc details { border-bottom: 1px solid var(--line); }
.mk-acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: var(--space-s); font: var(--type-h3); letter-spacing: var(--type-h3-tracking); }
.mk-acc summary::-webkit-details-marker { display: none; }
.mk-acc summary::after { content: "+"; color: var(--accent); font-weight: 400; }
.mk-acc details[open] summary::after { content: "\2212"; }
.mk-acc summary:hover { color: var(--accent); }
.mk-acc summary:focus-visible { outline: var(--focus-ring) solid var(--accent); outline-offset: 2px; }
.mk-nav { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--line); }
.mk-nav__in { display: flex; align-items: center; gap: 28px; height: var(--nav-h); }
.mk-nav__links { display: flex; gap: 4px; margin-left: auto; }
.mk-nav__links a { position: relative; padding: 8px 10px; font: var(--type-small); font-weight: 550; color: var(--text-muted); text-decoration: none; }
.mk-nav__links a:hover { color: var(--text); }
.mk-nav__links a[aria-current] { color: var(--text); }
.mk-nav__links a[aria-current]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: calc((var(--nav-h) - 36px) / -2); height: 2px; background: var(--accent); }
.mk-nav__links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.mk-nav__menu { display: none; margin-left: auto; }
@media (max-width: 760px) { .mk-nav__links, .mk-nav__cta { display: none; } .mk-nav__menu { display: inline-flex; } }
/* ---- motion ---- */
:root {
  --dur-1: 120ms;
  --dur-2: 280ms;
  --dur-3: 600ms;
  --dur-4: 1000ms;
  --ease-standard: cubic-bezier(.65, 0, .35, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.7, 0, .84, 0);
  --stagger: 60ms;
  --rise: 16px;
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; --stagger: 0ms; --rise: 0px; }
  *, *::before, *::after { animation-duration: 0ms !important; transition-duration: 0ms !important; scroll-behavior: auto !important; }
}
/* ---- background ---- */
:root {
  --guide: color-mix(in srgb, var(--text) 7%, transparent);
  --guide-width: 1px;
}
.mk-guides { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.mk-guides .l-wrap, .mk-guides .l-grid { height: 100%; }
.mk-guides .l-grid > i { border-inline: var(--guide-width) solid var(--guide); }
@media (max-width: 760px) { .mk-guides .l-grid > i:nth-child(n+5) { display: none; } }
@media print { .mk-guides { display: none; } }
/* ---- depth ---- */
:root {
  --edge: 1px solid var(--text);
  --edge-strong: 2px solid var(--text);
  --elev-0: 0 0 0 var(--text);
  --elev-1: 4px 4px 0 var(--text);
  --elev-2: 8px 8px 0 var(--text);
  --elev-nav: 0 3px 0 var(--text);
  --elev-toast: 4px 4px 0 var(--accent);
  --lift: -2px;
  --scrim: color-mix(in srgb, var(--bg) 55%, transparent);
}
.mk-lift { transition: translate var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); box-shadow: var(--elev-0); }
.mk-lift:hover, .mk-lift:focus-visible, .mk-lift.is-hover { translate: var(--lift) var(--lift); box-shadow: var(--elev-1); }
.mk-lift:active, .mk-lift.is-active { translate: 0 0; box-shadow: var(--elev-0); transition-duration: var(--dur-1); }
.mk-pop { background: var(--surface); border: var(--edge); border-radius: var(--radius-card); box-shadow: var(--elev-1); }
.mk-dialog { background: var(--surface); border: var(--edge-strong); border-radius: var(--radius-card); box-shadow: var(--elev-2); }
.mk-scrim { position: fixed; inset: 0; background: var(--scrim); }
.mk-toast { background: var(--surface); color: var(--text); border: var(--edge); border-radius: var(--radius-card); box-shadow: var(--elev-toast); padding: 10px 14px; font: var(--type-small); }
.mk-nav.is-scrolled { border-bottom-color: var(--text); box-shadow: var(--elev-nav); }
@media print { .mk-lift, .mk-pop, .mk-dialog, .mk-toast { box-shadow: none !important; } }