:root {
  --mml-navy: #06152b;
  --mml-ink: #09172c;
  --mml-blue: #1478f2;
  --mml-blue-deep: #075fc8;
  --mml-sky: #eaf4ff;
  --mml-line: #cbdced;
  --mml-muted: #5a6b84;
  --mml-paper: #f7fafe;
  --mml-white: #ffffff;
}

html { scroll-behavior: smooth; }

.mml-page {
  min-height: 100vh;
  background: var(--mml-paper);
  color: var(--mml-ink);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
}

.mml-page *, .mml-page *::before, .mml-page *::after { box-sizing: border-box; }

.mml-skip {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 100;
  border-radius: .45rem;
  background: var(--mml-blue);
  color: white;
  padding: .8rem 1rem;
  font-weight: 800;
}

.mml-skip:focus { top: 1rem; }

.mml-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 80px;
  padding: 0 clamp(1.25rem, 4vw, 5rem);
  border-bottom: 1px solid rgba(203, 220, 237, .85);
  background: rgba(255, 255, 255, .96);
}

.mml-brand img { display: block; width: 172px; height: auto; }

.mml-nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.25rem); }
.mml-nav a { color: #203653; font-size: .88rem; font-weight: 750; text-decoration: none; }
.mml-nav a:hover { color: var(--mml-blue); }
.mml-nav-login { border: 1px solid #a9c7e8; border-radius: .45rem; padding: .62rem .9rem; }

.mml-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr);
  gap: clamp(2rem, 6vw, 7rem);
  overflow: hidden;
  padding: clamp(4.5rem, 8vw, 8.5rem) clamp(1.5rem, 8vw, 9rem) clamp(4rem, 7vw, 7rem);
  background: var(--mml-navy);
  color: white;
}

.mml-hero-grid {
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image: linear-gradient(rgba(80, 157, 244, .25) 1px, transparent 1px), linear-gradient(90deg, rgba(80, 157, 244, .25) 1px, transparent 1px);
  background-size: 66px 66px;
  mask-image: linear-gradient(90deg, black, transparent 72%);
}

.mml-hero::after {
  content: "";
  position: absolute;
  right: -10vw;
  top: -22vw;
  width: 48vw;
  height: 48vw;
  border: 1px solid rgba(76, 155, 255, .35);
  border-radius: 50%;
  box-shadow: 0 0 0 5vw rgba(25, 116, 235, .05), 0 0 0 11vw rgba(25, 116, 235, .035);
}

.mml-hero-copy, .mml-hero-note { position: relative; z-index: 1; }
.mml-eyebrow, .mml-note-index, .mml-toc-label {
  margin: 0 0 1.25rem;
  color: #6eb3ff;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.mml-hero h1 {
  max-width: 900px;
  margin: 0;
  font-size: clamp(3.1rem, 7vw, 7.25rem);
  font-weight: 780;
  letter-spacing: -.07em;
  line-height: .89;
}

.mml-summary {
  max-width: 760px;
  margin: 2rem 0 0;
  color: #c8d6e8;
  font-size: clamp(1.05rem, 1.55vw, 1.3rem);
  font-weight: 540;
  line-height: 1.65;
}

.mml-version-row { display: flex; flex-wrap: wrap; gap: .6rem 1.7rem; margin-top: 2.1rem; color: #89a0bd; font-size: .78rem; }
.mml-hero-note { align-self: end; border-top: 1px solid rgba(110, 179, 255, .48); padding-top: 1.4rem; }
.mml-hero-note p { margin: 0; color: #d9e5f4; font-size: .96rem; line-height: 1.65; }

.mml-status-banner {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
  padding: 1.35rem clamp(1.5rem, 8vw, 9rem);
  border-bottom: 1px solid #9dc7f2;
  background: #ddecff;
}
.mml-status-banner span { color: #075fc8; font-size: .75rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.mml-status-banner p { margin: 0; color: #173c65; font-size: .9rem; font-weight: 650; line-height: 1.5; }

.mml-document-grid {
  display: grid;
  grid-template-columns: minmax(220px, 290px) minmax(0, 860px);
  gap: clamp(3rem, 7vw, 7rem);
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 7rem) clamp(1.5rem, 5vw, 4rem) 8rem;
}

.mml-toc { position: sticky; top: 2rem; align-self: start; }
.mml-toc-label { color: var(--mml-blue-deep); }
.mml-toc ol { display: grid; gap: .1rem; margin: 0; padding: 0; list-style: none; }
.mml-toc a { display: grid; grid-template-columns: 2.2rem 1fr; gap: .45rem; border-bottom: 1px solid #dce7f3; padding: .72rem .15rem; color: #314963; font-size: .79rem; font-weight: 720; line-height: 1.35; text-decoration: none; }
.mml-toc a span { color: #8da0b5; font-variant-numeric: tabular-nums; }
.mml-toc a:hover, .mml-toc a:focus-visible { color: var(--mml-blue); }
.mml-toc-contact { margin-top: 2rem; border-radius: .55rem; background: var(--mml-navy); padding: 1.1rem; color: white; }
.mml-toc-contact p { margin: 0 0 .35rem; color: #aebed0; font-size: .76rem; }
.mml-toc-contact a { display: inline; border: 0; padding: 0; color: #74b6ff; font-size: .78rem; }

.mml-reading-note { display: grid; gap: .3rem; margin-bottom: 4rem; border-left: 3px solid var(--mml-blue); background: var(--mml-sky); padding: 1.1rem 1.25rem; }
.mml-reading-note strong { font-size: .93rem; }
.mml-reading-note span { color: var(--mml-muted); font-size: .82rem; line-height: 1.5; }

.mml-section { scroll-margin-top: 2rem; border-top: 1px solid var(--mml-line); padding: 3.1rem 0 2.3rem; }
.mml-section:first-of-type { border-top: 0; padding-top: 0; }
.mml-section-index { margin: 0 0 .65rem; color: var(--mml-blue); font-size: .72rem; font-weight: 900; letter-spacing: .16em; }
.mml-section h2 { margin: 0 0 1.5rem; color: var(--mml-ink); font-size: clamp(1.8rem, 3vw, 2.75rem); font-weight: 760; letter-spacing: -.045em; line-height: 1.05; }
.mml-section h3 { margin: 2rem 0 .7rem; color: #152c49; font-size: 1.06rem; font-weight: 790; }
.mml-section p, .mml-section li { color: #40536c; font-size: 1rem; line-height: 1.78; }
.mml-section p { margin: 0 0 1.15rem; }
.mml-section ul, .mml-section ol { display: grid; gap: .65rem; margin: 1rem 0 1.5rem; padding-left: 1.35rem; }
.mml-section a { color: var(--mml-blue-deep); font-weight: 700; text-underline-offset: 3px; }
.mml-section strong { color: #162b46; }
.mml-callout { margin: 1.6rem 0; border: 1px solid #b8d5f2; border-radius: .55rem; background: #eff7ff; padding: 1.25rem 1.35rem; }
.mml-callout p:last-child { margin-bottom: 0; }
.mml-callout--warning { border-color: #edca8d; background: #fff8e9; }
.mml-callout--warning strong { color: #71480a; }
.mml-definition-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 1.4rem 0; }
.mml-definition-grid div { border: 1px solid #d4e2ef; border-radius: .45rem; background: white; padding: 1rem; }
.mml-definition-grid dt { color: #163252; font-size: .82rem; font-weight: 850; }
.mml-definition-grid dd { margin: .35rem 0 0; color: #5b6f86; font-size: .82rem; line-height: 1.55; }

.mml-footer { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr); gap: 4rem; padding: 4.5rem clamp(1.5rem, 8vw, 9rem) 2rem; border-top: 1px solid #c7d9eb; background: white; }
.mml-footer-brand img { width: 180px; height: auto; }
.mml-footer-brand p { margin: 1.4rem 0 .5rem; color: var(--mml-ink); font-size: 1.1rem; font-weight: 800; }
.mml-footer-brand span { color: #73849a; font-size: .78rem; }
.mml-footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1.5rem; align-content: start; }
.mml-footer-links a { border-bottom: 1px solid #e0e8f1; padding: .7rem .1rem; color: #314965; font-size: .82rem; font-weight: 720; text-decoration: none; }
.mml-footer-links a[aria-current="page"] { color: var(--mml-blue); }
.mml-footer-base { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 2rem; margin-top: 1.5rem; border-top: 1px solid #d9e5ef; padding-top: 1.25rem; color: #6d7d91; font-size: .75rem; }
.mml-footer-base a { color: #244261; font-weight: 750; }

.mml-page a:focus-visible { outline: 3px solid #69adff; outline-offset: 3px; }

@media (max-width: 900px) {
  .mml-nav a:not(.mml-nav-login) { display: none; }
  .mml-hero { grid-template-columns: 1fr; }
  .mml-hero-note { max-width: 620px; }
  .mml-document-grid { grid-template-columns: 1fr; }
  .mml-toc { position: static; }
  .mml-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .mml-header { min-height: 68px; }
  .mml-brand img { width: 145px; }
  .mml-hero { padding-top: 4rem; }
  .mml-hero h1 { font-size: clamp(2.8rem, 15vw, 4.5rem); }
  .mml-version-row { display: grid; }
  .mml-status-banner { grid-template-columns: 1fr; gap: .4rem; }
  .mml-toc ol, .mml-definition-grid, .mml-footer, .mml-footer-links { grid-template-columns: 1fr; }
  .mml-footer { gap: 2.5rem; }
  .mml-footer-base { display: grid; }
}

@media print {
  .mml-header, .mml-toc, .mml-footer, .mml-skip { display: none !important; }
  .mml-hero { display: block; padding: 2rem 0; background: white; color: black; }
  .mml-hero h1 { color: black; font-size: 3rem; }
  .mml-summary, .mml-version-row { color: #333; }
  .mml-hero-note, .mml-hero-grid { display: none; }
  .mml-document-grid { display: block; max-width: none; padding: 1rem 0; }
  .mml-section { break-inside: avoid; }
}