/* Fermioniq house style — "The Technical Note"
   One stylesheet for posts, reports, one-pagers and decks. Tokens first; every colour
   below is a token, so the dark theme is a token swap, not a second stylesheet.
   Source of the tokens: fermioniq.com/assets/css/style.css (navy, off-white, electric
   purple, electric lime, Space Grotesk / Inter / JetBrains Mono). */

/* the faces ship with the plugin: assets/fonts holds one variable woff2 per family (latin
   subsets from Google Fonts, byte-identical across the weights Google served); render.py
   points ../fonts at them, or embeds them with --inline */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/inter.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/inter-italic.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("../fonts/jetbrains-mono.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("../fonts/space-grotesk.woff2") format("woff2"); }

:root {
  color-scheme: light;
  /* ground and ink */
  --bg: #F3F3F5;
  --bg-2: #FFFFFF;
  --ink: #091220;
  --ink-2: rgba(9, 18, 32, 0.70);
  --ink-3: rgba(9, 18, 32, 0.58);
  --line: #DCD8EE;
  --line-strong: #091220;
  /* roles */
  --accent: #5C37F2;        /* links, section labels, active state */
  --accent-hover: #4A2BD6;
  --signal: #EFF012;        /* the single status mark; "ours" in figures */
  --signal-ink: #6F7000;    /* lime as text, on light ground */
  --signal-tint: #FBFBE6;   /* editor's notes */
  --ref: #555B6E;           /* the chart's reference band (#C9C9D1 at 0.4 on navy) as it appears, for inline keys */
  /* the proof register: figures and code sit on navy plates in both themes */
  --plate: #091220;
  --plate-ink: #F3F3F5;
  --plate-ink-2: #C1BADA;
  --plate-ink-3: #8F98B3;
  --plate-line: #25304A;
  --plate-edge: transparent;
  --accent-on-plate: #B7ABF6;  /* purple that reads on navy, for links and labels on a plate */
  --bg-print: #FFFFFF;
  --shadow: 0 18px 40px rgba(9, 18, 32, 0.12);
  /* type */
  --display: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* rhythm */
  --measure: 68ch;
  --margin-col: 300px;
  --gutter: clamp(16px, 4vw, 48px);
  --radius: 10px;
  --radius-sm: 4px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t: 200ms;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #091220; --bg-2: #0F1A2D;
    --ink: #F3F3F5; --ink-2: rgba(243, 243, 245, 0.76); --ink-3: rgba(243, 243, 245, 0.64);
    --line: #25304A; --line-strong: #F3F3F5;
    --accent: #B7ABF6; --accent-hover: #DCD8EE;
    --signal-ink: #E4E991; --signal-tint: #1A1F14;
    --plate: #050A14; --plate-edge: #25304A;
    --shadow: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #091220; --bg-2: #0F1A2D;
  --ink: #F3F3F5; --ink-2: rgba(243, 243, 245, 0.76); --ink-3: rgba(243, 243, 245, 0.64);
  --line: #25304A; --line-strong: #F3F3F5;
  --accent: #B7ABF6; --accent-hover: #DCD8EE;
  --signal-ink: #E4E991; --signal-tint: #1A1F14;
  --plate: #050A14; --plate-edge: #25304A;
  --shadow: none;
}

/* the logo ships as a pair; the dark one shows only on a dark ground */
.logo-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-light { display: none; } :root:not([data-theme="light"]) .logo-dark { display: block; } }
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: block; }
.slide.section .logo-light { display: none; } .slide.section .logo-dark { display: block; }
@media print { .logo-dark { display: none !important; } .logo-light { display: block !important; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-block: 0 4rem;
  padding-inline: var(--gutter);
}
::selection { background: var(--accent); color: var(--bg); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); transition: color var(--t) var(--ease), text-decoration-color var(--t) var(--ease); }
a:hover { color: var(--accent-hover); text-decoration-color: currentColor; }
img, svg, video { display: block; max-width: 100%; height: auto; }
.label, .spec .k, th, .fighead b, .note::before, .measured .k, .close .k, .pager {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cond, .site-footer, blockquote.quote footer, .codehead { font-family: var(--mono); font-size: 12px; font-weight: 400; }
.num, td.num, .measured, .stat .v, .spec .v.id, .cond, .byline, .pager, .tablewrap table, .codehead { font-variant-numeric: tabular-nums; }

/* ---------- page frame ---------- */
.page { max-width: 1240px; margin: 0 auto; padding-top: 40px; }
.site-footer {
  max-width: 1240px; margin: 4rem auto 0; padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between;
  color: var(--ink-3); letter-spacing: 0.01em;
}
.site-footer img { height: 22px; }
.site-footer span { white-space: nowrap; }

/* spec header: who built what, with whom, and whether it validated */
.spec {
  display: grid;
  grid-template-columns: 1.1fr 1.6fr 1.3fr 1fr;
  border-top: 2px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
.spec > div { padding: 12px 16px 12px 0; margin-right: 16px; border-right: 1px solid var(--line); min-width: 0; }
.spec > div:last-child { border-right: 0; margin-right: 0; }
.spec .k { color: var(--ink-3); margin-bottom: 5px; }
.spec .v { font-size: 14px; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.spec .v.id { font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: 0.02em; }
.spec img { height: 24px; margin-bottom: 7px; }
.spec .ok { display: inline-flex; align-items: baseline; gap: 8px; }
.spec .ok::before { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--signal); border: 1.5px solid var(--ink); transform: translateY(1px); }
.spec .ok.draft::before { background: transparent; border-style: dashed; }
@media (max-width: 900px) {
  .spec { grid-template-columns: 1fr 1fr; }
  .spec > div:nth-child(2) { border-right: 0; margin-right: 0; }
  .spec > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 480px) {
  .spec { grid-template-columns: 1fr; }
  .spec > div { border-right: 0; margin-right: 0; }
  .spec > div + div { border-top: 1px solid var(--line); }
}

/* title and lede row */
h1 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.2rem, 5vw, 3.9rem); line-height: 1.02; letter-spacing: -0.02em;
  margin: 40px 0 0; max-width: 19ch; text-wrap: balance;
}
.lede-row {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--margin-col);
  gap: 48px; margin-top: 36px; align-items: start;
}
.abstract { border-top: 1px solid var(--line-strong); padding-top: 16px; min-width: 0; }
.abstract .k { color: var(--accent); margin-bottom: 10px; }
.abstract p { font-size: 19px; line-height: 1.55; margin: 0; max-width: 62ch; }
.abstract p + p { margin-top: 0.8em; }
.byline { margin-top: 18px; color: var(--ink-3); font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.byline b { color: var(--ink); font-weight: 500; }
.byline .sep { color: var(--line); }
.measured { border-top: 1px solid var(--line-strong); padding-top: 16px; font-size: 14px; min-width: 0; }
.measured .k { color: var(--ink-3); margin-bottom: 8px; }
.measured table { border-collapse: collapse; width: 100%; }
.measured td { padding: 7px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.measured td.n { text-align: right; font-family: var(--display); font-weight: 600; font-size: 18px; line-height: 1.2; letter-spacing: -0.01em; white-space: nowrap; padding-left: 12px; }
.measured td.n small { font-family: var(--sans); font-weight: 400; font-size: 12px; color: var(--ink-3); margin-left: 3px; }
.measured .sub { display: block; font-size: 12px; color: var(--ink-3); }
.cond { margin-top: 16px; color: var(--ink-2); line-height: 1.9; letter-spacing: 0.01em; }
@media (max-width: 900px) {
  .lede-row { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- prose ---------- */
.body { margin-top: 48px; }
.prose { max-width: var(--measure); min-width: 0; }
.prose p { margin: 0 0 1.15em; color: var(--ink-2); }
.prose p strong, .prose li strong { color: var(--ink); font-weight: 600; }
.prose h2 {
  font-family: var(--display); font-weight: 600; font-size: 1.65rem; line-height: 1.2; letter-spacing: -0.015em;
  margin: 3rem 0 0.9rem; padding-top: 1rem; border-top: 2px solid var(--line-strong); text-wrap: balance;
}
.prose h3 { font-family: var(--display); font-weight: 600; font-size: 1.2rem; line-height: 1.3; margin: 2.2rem 0 0.6rem; text-wrap: balance; }
.prose h2 + h3 { margin-top: 1.2rem; }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1.15em; color: var(--ink-2); }
.prose li { margin-bottom: 0.4em; }
.prose li::marker { color: var(--ink-3); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
.prose em { font-style: italic; }
.prose code, .prose kbd { font-family: var(--mono); font-size: 0.86em; }
.prose p code, .prose li code, .prose td code { background: var(--bg-2); border: 1px solid var(--line); padding: 0.05em 0.35em; border-radius: 3px; color: var(--ink); }
.ph-cell { color: var(--ink-3); font-style: italic; }

/* a figure, table or code block may leave the prose measure and take the full page */
.prose > figure, .prose > .tablewrap, .prose > pre, .prose > .compare { max-width: none; }
.wide { width: 100%; }

/* ---------- figures: numbered, on a navy plate, with their conditions ---------- */
figure { margin: 2.4rem 0; }
.fighead { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; border-top: 1px solid var(--line-strong); padding: 10px 0 12px; }
.fighead b { color: var(--ink); white-space: nowrap; }
.fighead span { font-size: 14px; color: var(--ink-2); line-height: 1.5; flex: 1 1 24ch; min-width: 0; }
.plate {
  background: var(--plate); color: var(--plate-ink);
  border-radius: var(--radius); padding: 12px;
  border: 1px solid var(--plate-edge); box-shadow: var(--shadow);
}
.plate img, .plate svg { width: 100%; border-radius: var(--radius-sm); }
.plate.diagram { padding: clamp(12px, 2vw, 28px); }
.plate.diagram svg { border-radius: 0; }
figcaption { font-size: 14px; color: var(--ink-2); margin-top: 12px; line-height: 1.5; max-width: 80ch; }
figcaption b { color: var(--ink); font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; margin-right: 6px; }
figure .cond { margin-top: 8px; }
.placeholder {
  aspect-ratio: 16 / 9; max-width: 100%;
  border: 1px dashed var(--ink-3); border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 1.2rem; color: var(--ink-3); font-size: 15px; gap: 6px;
}
.placeholder .tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.placeholder strong { color: var(--ink); font-weight: 600; }
/* a reference key: the grey band from the charts, drawn inline */
.key-ref { display: inline-block; width: 22px; height: 7px; border-radius: 4px; background: var(--ref); vertical-align: middle; margin-right: 6px; }
.key-ours { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--signal); border: 1.5px solid var(--ink); vertical-align: middle; margin-right: 6px; }

/* ---------- code: also on the plate ---------- */
pre {
  background: var(--plate); color: var(--plate-ink);
  border-radius: var(--radius); border: 1px solid var(--plate-edge);
  padding: 1rem 1.2rem; margin: 1.6rem 0; overflow-x: auto;
  font-family: var(--mono); font-size: 14px; line-height: 1.55; tab-size: 4;
  scrollbar-color: var(--plate-line) transparent; scrollbar-width: thin;
}
pre code { font-family: inherit; font-size: inherit; }
pre .c { color: var(--plate-ink-3); }
pre .k { color: var(--plate-ink-2); }
pre.ph { background: transparent; color: var(--ink-3); border: 1px dashed var(--ink-3); }
.codeblock { margin: 1.6rem 0; }
.codeblock pre { margin: 0; border-radius: 0 0 var(--radius) var(--radius); }
.codehead {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  background: var(--plate); color: var(--plate-ink-2); border: 1px solid var(--plate-edge); border-bottom: 1px solid var(--plate-line);
  border-radius: var(--radius) var(--radius) 0 0; padding: 10px 1.2rem 9px; letter-spacing: 0.01em;
}
.codehead b { color: var(--plate-ink); font-weight: 500; }
.codehead .n { color: var(--plate-ink); }
.codehead.ours .n { color: var(--signal); }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 1.6rem 0; }
.compare .codeblock { margin: 0; min-width: 0; }
@media (max-width: 900px) { .compare { grid-template-columns: 1fr; } }

/* ---------- tables ---------- */
.tablewrap { overflow-x: auto; margin: 1.6rem 0; scrollbar-color: var(--line) transparent; scrollbar-width: thin; }
.tablewrap table { border-collapse: collapse; width: 100%; font-size: 15px; }
th { text-align: left; color: var(--ink-3); padding: 0 0.6rem 0.6rem 0; border-bottom: 2px solid var(--line-strong); }
td { padding: 0.55rem 0.6rem 0.55rem 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
td:first-child { color: var(--ink); }
td.num, th.num { text-align: right; }
.tablecap { font-size: 14px; color: var(--ink-2); margin: -0.8rem 0 1.6rem; }
.tablecap b { color: var(--ink); font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; margin-right: 6px; }

/* ---------- quotes and notes ---------- */
blockquote.quote {
  margin: 2.2rem 0; padding: 14px 0 0; border-top: 2px solid var(--line-strong);
  font-family: var(--display); font-weight: 500; font-size: 1.3rem; line-height: 1.4; letter-spacing: -0.005em; color: var(--ink);
  max-width: 40ch; text-wrap: pretty;
}
blockquote.quote p { margin: 0; }
blockquote.quote footer { margin-top: 12px; color: var(--ink-3); letter-spacing: 0.01em; }
blockquote.quote footer b { color: var(--ink); font-weight: 500; }
.note {
  background: var(--signal-tint); border: 1px solid var(--signal-ink); border-radius: var(--radius-sm);
  padding: 0.7rem 1rem 0.8rem; margin: 1.4rem 0; font-size: 15px; color: var(--ink-2);
}
.note::before { content: "Editor's note"; display: block; color: var(--signal-ink); margin-bottom: 0.25rem; }
.draft-tag { color: var(--signal-ink); }

/* ---------- the close ---------- */
.close { margin-top: 3.5rem; border-top: 2px solid var(--line-strong); padding-top: 1rem; display: grid; grid-template-columns: minmax(0, 1fr) var(--margin-col); gap: 48px; }
.close h2 { font-family: var(--display); font-weight: 600; font-size: 1.65rem; margin: 0 0 0.6rem; border: 0; padding: 0; }
.close ul { list-style: none; padding: 0; margin: 0; }
.close li { padding: 0.55rem 0; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; }
.close li .k { color: var(--ink-3); flex: 0 0 9rem; }
.close li a { overflow-wrap: anywhere; }
@media (max-width: 900px) { .close { grid-template-columns: 1fr; } }

/* ---------- motion: one entrance for the spec header's status mark, nothing else ---------- */
@keyframes mark-in { from { transform: translateY(1px) scale(0.6); opacity: 0; } to { transform: translateY(1px) scale(1); opacity: 1; } }
.spec .ok::before { animation: mark-in 500ms var(--ease) 250ms both; }
@media (prefers-reduced-motion: reduce) { .spec .ok::before { animation: none; } * { transition: none !important; } }

/* ---------- print: the report ---------- */
@media print {
  :root { color-scheme: light; --bg: var(--bg-print); --shadow: none; }
  body { padding: 0; font-size: 10.5pt; line-height: 1.5; }
  .page { padding-top: 0; max-width: none; }
  .no-print, .note, .draft-tag { display: none !important; }
  h1 { font-size: 26pt; margin-top: 7mm; }
  .lede-row { grid-template-columns: minmax(0, 1fr) 62mm; gap: 10mm; margin-top: 6mm; }
  .abstract p { font-size: 11.5pt; }
  .body { margin-top: 8mm; }
  .prose { max-width: none; column-count: 1; }
  .prose h2 { margin-top: 8mm; break-after: avoid; }
  .prose h3 { break-after: avoid; }
  figure, pre, .tablewrap, blockquote.quote, .codeblock { break-inside: avoid; }
  .plate, pre, .codehead { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a { color: var(--ink); text-decoration: none; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-family: var(--mono); font-size: 8pt; color: var(--ink-3); }
  .close a::after { content: none; }
  .site-footer { margin-top: 10mm; }
}

/* ---------- deck: the same system, 16:9 slides ---------- */
.deck { max-width: none; padding: 0; margin: 0; }
.deck body { padding: 0; }
.slide {
  position: relative; width: min(100%, calc(100vh * 16 / 9)); margin-inline: auto; aspect-ratio: 16 / 9;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: clamp(24px, 4vw, 56px) clamp(24px, 4.5vw, 64px);
  background: var(--bg); color: var(--ink);
  border-bottom: 1px solid var(--line);
  scroll-snap-align: start;
}
@media (max-width: 700px) { .slide { aspect-ratio: auto; min-height: 60vh; } }
@media print { .slide { overflow: hidden; } }
.deck-scroll { scroll-snap-type: y mandatory; }
.slide .spec { font-size: 14px; }
.slide .spec > div { padding-block: 10px; }
.slide .stage { min-height: 0; display: grid; align-content: center; gap: clamp(12px, 2vw, 24px); padding-block: clamp(12px, 2vw, 28px); }
.slide h1 { font-size: clamp(1.8rem, 4.8vw, 4.2rem); margin: 0; max-width: 16ch; }
.slide h2 { font-family: var(--display); font-weight: 600; font-size: clamp(1.4rem, 3.4vw, 2.6rem); line-height: 1.08; letter-spacing: -0.02em; margin: 0; max-width: 20ch; text-wrap: balance; border: 0; padding: 0; }
.slide .stage p, .slide .stage li { font-size: clamp(0.95rem, 1.7vw, 1.35rem); line-height: 1.45; color: var(--ink-2); margin: 0; }
.slide .stage ul { margin: 0; padding-left: 1.1em; display: grid; gap: 0.5em; max-width: 40ch; }
.slide .two { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 3.5vw, 56px); align-items: center; min-height: 0; }
.slide .two > * { min-width: 0; }
.slide figure { margin: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.slide .plate { min-height: 0; display: grid; place-items: center; }
.slide .plate img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.slide figcaption { margin-top: 10px; }
.slide .fighead { padding-top: 8px; padding-bottom: 8px; }
.slide pre { margin: 0; font-size: clamp(11px, 1.15vw, 15px); }
.slide .codeblock { margin: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.slide .codeblock pre { overflow: auto; }
.slide .measured { border-top: 0; padding-top: 0; }
.slide .measured td.n { font-size: clamp(1.4rem, 3vw, 2.6rem); }
.slide .measured td { font-size: clamp(0.85rem, 1.4vw, 1.1rem); padding-block: clamp(8px, 1.4vw, 16px); }
.pager { color: var(--ink-3); display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.pager img { height: 18px; }
.slide.section { background: var(--plate); color: var(--plate-ink); --ink: var(--plate-ink); --ink-2: var(--plate-ink-2); --ink-3: var(--plate-ink-3); --line: var(--plate-line); --line-strong: var(--plate-ink); --accent: var(--accent-on-plate); }
.slide.section h2 { font-size: clamp(2rem, 5.5vw, 5rem); max-width: 14ch; }
.slide.section .stage p { max-width: 44ch; }
@media print {
  .deck, .deck body { padding: 0; margin: 0; }
  .slide { width: 338.67mm; height: 190.5mm; aspect-ratio: auto; break-after: page; border: 0; }
  .slide:last-child { break-after: auto; }
  .slide.section { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- one-pager ---------- */
.onepager .body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 36px; }
.onepager .body .prose { max-width: none; }
.onepager .body .prose h2 { margin-top: 0; font-size: 1.15rem; padding-top: 0.6rem; }
.onepager .body .prose p, .onepager .body .prose li { font-size: 15px; }
.onepager .hero { margin-top: 36px; }
@media (max-width: 900px) { .onepager .body { grid-template-columns: 1fr; } }
@media print {
  .onepager .body { grid-template-columns: repeat(3, 1fr); gap: 8mm; margin-top: 6mm; }
  .onepager .body .prose p, .onepager .body .prose li { font-size: 9.5pt; }
  .onepager h1 { font-size: 22pt; }
  .onepager .hero { margin-top: 5mm; }
}