/* Klartext practice app. Tokens come from /tokens.css (the Klartext design skill); Norm-era names from /legacy.css until the app's page PR. */
*{ box-sizing:border-box; }
html,body{ margin:0; background:var(--paper); }
body{ color:var(--ink); font-family:var(--sans); font-size:var(--fs-base); line-height:var(--lh-body); -webkit-font-smoothing:antialiased; }
p{ margin:0; }
h1,h2,h3{ margin:0; }
a{ color:inherit; text-underline-offset:var(--underline-offset); }
button, select, input{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:var(--focus-offset); }
.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.vh{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.kt{ max-width:1040px; margin:0 auto; }

/* Header: the top row (logo, descriptor, theme toggle), then the app nav. */
.toprow{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--px-32) var(--px-40) 0; }
.lock{ display:block; color:inherit; text-decoration:none; }
/* Logo: one file per theme; the other is display:none, so one "Klartext" image is in the accessibility tree. */
.logo{ display:block; }
.logo-light{ display:none; }
:root[data-theme="light"] .logo-dark{ display:none; }
:root[data-theme="light"] .logo-light{ display:block; }
@media (prefers-color-scheme: light){
  :root:not([data-theme]) .logo-dark{ display:none; }
  :root:not([data-theme]) .logo-light{ display:block; }
}
.desc{ display:block; margin-top:var(--space-4); font-size:var(--fs-12); font-weight:var(--fw-regular); line-height:var(--lh-note); color:var(--text-muted); }
/* ThemeToggle (design skill), its labels in the label type style. Hidden until /theme.js wires it. The frame clips, so the focus ring is drawn inside the button (C4). */
.theme-toggle{ flex:none; border:1px solid var(--border-control); border-radius:var(--radius-md); overflow:hidden; }
.theme-toggle:not([hidden]){ display:inline-flex; }
.theme-toggle button{ min-height:44px; margin:0; padding:0 var(--space-4); border:0; border-radius:0; background:var(--bg); color:var(--text-muted); font-family:var(--type-label-family); font-size:var(--type-label-size); font-weight:var(--type-label-weight); line-height:var(--type-label-line-height); letter-spacing:var(--type-label-tracking); cursor:pointer; }
.theme-toggle button[aria-pressed="true"]{ background:var(--surface-raised); color:var(--text); }
/* Pressed also shows a ✓ before the label, so the state never rests on colour (design skill, Pressed and on states). Its space is kept while unpressed, so nothing moves; screen readers get the state from aria-pressed. */
.theme-toggle button::before{ content:"✓"; content:"✓" / ""; margin-right:var(--space-1); color:var(--accent); visibility:hidden; }
.theme-toggle button[aria-pressed="true"]::before{ visibility:visible; }
.theme-toggle button:focus-visible{ outline:2px solid var(--accent); outline-offset:calc(-2 * var(--focus-offset)); }
/* Print: paper gets the light theme (tokens.css), so it shows the light-background logo and leaves out the toggle. Before the forced-colours rules, which win where both apply. */
@media print{ :root .logo.logo-dark{ display:none; } :root .logo.logo-light{ display:block; } .theme-toggle:not([hidden]){ display:none; } }
/* Forced colours (Windows High Contrast): the logo follows the system's contrast theme, and the pressed button is underlined because fills are replaced. */
@media (forced-colors: active) and (prefers-color-scheme: dark){ :root .logo.logo-dark{ display:block; } :root .logo.logo-light{ display:none; } }
@media (forced-colors: active) and (prefers-color-scheme: light){ :root .logo.logo-dark{ display:none; } :root .logo.logo-light{ display:block; } }
@media (forced-colors: active){ .theme-toggle button[aria-pressed="true"]{ text-decoration:underline; } }
.nav{ display:flex; gap:0 var(--px-32); padding:var(--px-24) var(--px-40) 0; border-bottom:2px solid var(--ink); overflow-x:auto; }
.nav a{ display:block; flex:none; padding:var(--px-12) 0 var(--px-9); margin-bottom:calc(-1 * var(--px-2)); border-bottom:3px solid transparent; font-size:var(--fs-13); font-weight:var(--fw-bold); letter-spacing:var(--track-caps); text-transform:uppercase; text-decoration:none; color:var(--slate); }
.nav a:hover{ color:var(--ink); }
.nav a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--accent); }
/* The nav scrolls sideways, so it clips: its links draw the focus ring inside (C4). */
.nav a:focus-visible{ outline-offset:calc(-1 * var(--focus-offset)); }

/* Notices under the nav: storage off, exam running elsewhere. */
.notice{ display:flex; flex-wrap:wrap; gap:var(--px-4) var(--px-16); align-items:baseline; padding:var(--px-12) var(--px-40); border-bottom:1px solid var(--steel); font-size:var(--fs-14); }
.notice b{ font-size:var(--fs-11); font-weight:var(--fw-bold); letter-spacing:var(--track-caps-lg); text-transform:uppercase; color:var(--caution); }
.notice a{ font-weight:var(--fw-bold); }

main{ padding:var(--px-40) var(--px-40) var(--px-72); }
main h1{ font-size:var(--fs-40); font-weight:var(--fw-black); line-height:var(--lh-solid); letter-spacing:var(--track-display); text-transform:uppercase; }
main h1:focus, .q:focus{ outline:none; }
h2{ font-size:var(--fs-24); font-weight:var(--fw-extrabold); line-height:var(--lh-heading); letter-spacing:var(--track-h2); text-transform:uppercase; }
.h2s{ font-size:var(--fs-18); }
.sub{ font-size:var(--fs-15); color:var(--slate); margin-top:var(--px-12); max-width:60ch; }
.note{ font-size:var(--fs-14); color:var(--slate); margin-top:var(--px-16); max-width:64ch; }
.src{ font-family:var(--mono); font-size:var(--fs-11); letter-spacing:var(--track-mono-sm); color:var(--slate); margin-top:var(--px-12); }
.empty{ font-size:var(--fs-15); color:var(--slate); margin-top:var(--px-16); }
.blk{ border-top:2px solid var(--ink); margin-top:var(--px-56); padding-top:var(--px-32); }
.shead{ display:flex; gap:var(--px-16); align-items:baseline; }
.shead .num{ font-size:var(--fs-18); font-weight:var(--fw-semibold); }

.flash{ margin-bottom:var(--px-32); padding:var(--px-10) 0 var(--px-10) var(--px-16); box-shadow:inset 3px 0 0 var(--correct); font-size:var(--fs-15); }
.flash.bad{ box-shadow:inset 3px 0 0 var(--wrong); }
.flash a{ font-weight:var(--fw-bold); margin-left:var(--px-8); }

/* Stat strip, as in the landing masthead. */
.meta{ display:flex; flex-wrap:wrap; gap:var(--px-16) var(--px-40); margin-top:var(--px-32); padding-top:var(--px-16); border-top:1px solid var(--steel); }
.meta div{ font-family:var(--mono); font-size:var(--fs-12); letter-spacing:var(--track-mono); color:var(--slate); text-transform:uppercase; }
.meta b{ display:block; margin-top:var(--px-2); font-size:var(--fs-17); font-weight:var(--fw-semibold); letter-spacing:0; text-transform:none; color:var(--ink); }

.preview{ display:flex; gap:var(--px-16); align-items:baseline; margin-top:var(--px-24); padding:var(--px-12) 0; border-top:1px solid var(--steel); border-bottom:1px solid var(--steel); font-size:var(--fs-14); color:var(--slate); max-width:720px; }
.preview + .meta{ border-top:0; margin-top:var(--px-24); padding-top:0; }
.preview b{ flex:none; font-family:var(--mono); font-size:var(--fs-11); font-weight:var(--fw-semibold); letter-spacing:var(--track-mono-lg); text-transform:uppercase; color:var(--ink); }

.resume{ display:flex; flex-wrap:wrap; gap:var(--px-16) var(--px-32); align-items:center; justify-content:space-between; margin-top:var(--px-32); padding:var(--px-16) 0; border-top:2px solid var(--ink); border-bottom:1px solid var(--steel); max-width:720px; }
.resume p{ font-size:var(--fs-15); }

/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 var(--px-24); border:2px solid var(--ink); border-radius:0; background:var(--ink); color:var(--paper); font-size:var(--fs-15); font-weight:var(--fw-bold); line-height:var(--lh-button); text-align:center; text-decoration:none; cursor:pointer; }
.btn:hover{ background:var(--paper); color:var(--ink); }
.btn-2{ background:var(--paper); color:var(--ink); }
.btn-2:hover{ background:var(--ink); color:var(--paper); }
.btn:disabled{ background:var(--steel); border-color:var(--steel); color:var(--slate); cursor:not-allowed; }
.btn-text{ min-height:44px; padding:0; border:0; background:none; font-size:var(--fs-14); font-weight:var(--fw-bold); text-decoration:underline; text-underline-offset:var(--underline-offset); cursor:pointer; }
.btn-text[aria-pressed="true"]{ text-decoration:none; }
.btn-text.danger{ color:var(--wrong); }
.actions, .acts{ display:flex; flex-wrap:wrap; gap:var(--px-12) var(--px-24); align-items:center; }
.actions{ margin-top:var(--px-24); }
input.vh:focus-visible + label{ outline:2px solid var(--accent); outline-offset:var(--focus-offset); }

/* Setup form */
.form{ margin-top:var(--px-40); max-width:720px; }
.field{ border:0; padding:0; margin:0 0 var(--px-32); min-width:0; }
.lbl{ display:block; padding:0; margin-bottom:var(--px-12); font-size:var(--fs-11); font-weight:var(--fw-bold); letter-spacing:var(--track-caps-lg); text-transform:uppercase; color:var(--slate); }
select{ appearance:none; -webkit-appearance:none; width:100%; max-width:560px; padding:var(--px-12) var(--px-32) var(--px-12) 0; border:0; border-bottom:2px solid var(--ink); border-radius:0; background:var(--paper) var(--select-arrow) no-repeat right var(--px-4) center; font-size:var(--fs-16); font-weight:var(--fw-semibold); cursor:pointer; }
.txtin{ width:100%; max-width:560px; padding:var(--px-12) 0; border:0; border-bottom:2px solid var(--ink); border-radius:0; background:var(--paper); font-size:var(--fs-16); }
.chips{ display:flex; flex-wrap:wrap; gap:var(--px-8); }
.chip{ position:relative; }
.chip input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.chip span{ display:inline-flex; align-items:center; gap:var(--px-8); min-height:44px; padding:0 var(--px-16); border:1px solid var(--border-control); font-size:var(--fs-14); font-weight:var(--fw-semibold); cursor:pointer; }
.chip span:hover{ border-color:var(--ink); }
.chip i{ font-style:normal; font-family:var(--mono); font-weight:var(--fw-regular); font-size:var(--fs-13); opacity:.7; }
.chip input:checked + span{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.chip input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:var(--focus-offset); }
.go{ display:flex; flex-wrap:wrap; gap:var(--px-12) var(--px-24); align-items:center; }
.count{ font-family:var(--mono); font-size:var(--fs-13); color:var(--slate); }
.rules{ margin:0 0 var(--px-24); padding:0; list-style:none; max-width:64ch; }
.rules li{ padding:var(--px-10) 0; border-bottom:1px solid var(--steel); font-size:var(--fs-15); }
.rules li:last-child{ border-bottom:none; }

/* Rows, as in the landing "What's in it" list. */
.rows{ margin-top:var(--px-32); max-width:720px; }
.row{ display:grid; grid-template-columns:96px 1fr; gap:var(--px-16); align-items:baseline; padding:var(--px-16) 0; border-bottom:1px solid var(--steel); }
.row:last-child{ border-bottom:none; }
.row .n{ font-family:var(--mono); font-weight:var(--fw-semibold); font-size:var(--fs-20); font-variant-numeric:tabular-nums; }
.row .t b{ font-weight:var(--fw-bold); }
.row .t span{ display:block; font-size:var(--fs-14); color:var(--slate); margin-top:var(--px-2); }

/* Question component, as on the landing page. */
.qz{ max-width:720px; margin-top:var(--px-24); border:1px solid var(--steel); padding:var(--px-24) var(--px-24) var(--px-28); }
.qhead{ display:flex; flex-wrap:wrap; gap:var(--px-4) var(--px-16); align-items:baseline; }
.clause{ font-size:var(--fs-11); font-weight:var(--fw-bold); letter-spacing:var(--track-caps-lg); text-transform:uppercase; color:var(--accent); }
.tag{ font-family:var(--mono); font-size:var(--fs-11); letter-spacing:var(--track-mono); text-transform:uppercase; color:var(--slate); }
.q{ font-size:var(--fs-19); font-weight:var(--fw-semibold); line-height:var(--lh-question); letter-spacing:var(--track-question); margin-top:var(--px-10); white-space:pre-wrap; }
.opts{ margin:var(--px-16) 0 0; border:0; padding:0; min-width:0; }
.opt{ position:relative; display:flex; gap:var(--px-14); align-items:baseline; padding:var(--px-13) 0 var(--px-13) var(--px-12); border-bottom:1px solid var(--steel); font-size:var(--fs-15); cursor:pointer; }
.opt:last-of-type{ border-bottom:none; }
.opt input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.opt em{ flex:none; width:18px; font-style:normal; font-weight:var(--fw-bold); color:var(--dim); }
.opt .txt{ flex:1; min-width:0; }
.opt code{ font-family:var(--mono); font-size:var(--fs-14); letter-spacing:0; overflow-wrap:anywhere; }
.opt .why{ display:block; margin-top:var(--px-4); font-size:var(--fs-13); line-height:var(--lh-note); color:var(--slate); }
.opt .tail{ flex:none; min-width:7.5em; text-align:right; font-size:var(--fs-11); font-weight:var(--fw-bold); letter-spacing:var(--track-caps-sm); text-transform:uppercase; }
.opt:hover em{ color:var(--ink); }
.opt:has(input:focus-visible){ outline:2px solid var(--accent); outline-offset:var(--focus-offset); }
.opt:has(input:disabled){ cursor:default; }
.opt.is-picked{ box-shadow:inset 3px 0 0 var(--ink); }
.opt.is-picked em{ color:var(--ink); }
.opt.is-right{ box-shadow:inset 3px 0 0 var(--correct); }
.opt.is-right em, .opt.is-right .tail{ color:var(--correct); }
.opt.is-wrong{ box-shadow:inset 3px 0 0 var(--wrong); color:var(--slate); }
.opt.is-wrong em, .opt.is-wrong .tail{ color:var(--wrong); }

.expl{ border-top:2px solid var(--ink); margin-top:var(--px-22); padding-top:var(--px-16); }
.expl .ph{ font-size:var(--fs-14); color:var(--slate); }
.k .h, .srcs .h{ font-size:var(--fs-11); font-weight:var(--fw-bold); letter-spacing:var(--track-caps-lg); text-transform:uppercase; color:var(--slate); }
.k > p{ font-size:var(--fs-15); line-height:var(--lh-reading); margin-top:var(--px-8); max-width:60ch; }
.k .kmeta{ display:flex; flex-wrap:wrap; gap:var(--px-4) var(--px-16); margin-top:var(--px-12); font-size:var(--fs-12); color:var(--slate); }
.srcs{ margin-top:var(--px-16); }
.srcs ul{ margin:var(--px-6) 0 0; padding-left:var(--px-18); font-size:var(--fs-13); overflow-wrap:anywhere; }

/* Practice bar and key hint */
.bar{ display:flex; flex-wrap:wrap; gap:var(--px-4) var(--px-24); align-items:center; margin-top:var(--px-24); max-width:720px; }
.bar .num{ font-size:var(--fs-16); font-weight:var(--fw-semibold); }
.bar .lbl2{ flex:1; font-size:var(--fs-13); color:var(--slate); }
.keys{ margin-top:var(--px-32); font-family:var(--mono); font-size:var(--fs-11); color:var(--slate); }
@media (hover:none){ .keys{ display:none; } }

/* Score block */
.score{ display:flex; flex-wrap:wrap; gap:var(--px-8) var(--px-24); align-items:baseline; margin-top:var(--px-32); padding-bottom:var(--px-24); border-bottom:1px solid var(--steel); max-width:720px; }
.big{ font-family:var(--mono); font-size:var(--fs-48); font-weight:var(--fw-semibold); line-height:var(--lh-solid); font-variant-numeric:tabular-nums; }

/* Expandable answer lists */
.list{ margin-top:var(--px-16); max-width:760px; }
.item{ border-bottom:1px solid var(--steel); }
.item > summary{ display:flex; gap:var(--px-16); align-items:baseline; padding:var(--px-14) 0; cursor:pointer; list-style:none; }
.item > summary::-webkit-details-marker{ display:none; }
.item > summary .num{ flex:none; font-size:var(--fs-13); color:var(--slate); }
.item > summary .st{ flex:1; min-width:0; font-size:var(--fs-15); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; white-space:pre-wrap; }
.item[open] > summary .st{ display:block; }
.item .qz{ margin:0 0 var(--px-16); }
.item .acts{ margin-bottom:var(--px-24); }
.res{ flex:none; font-size:var(--fs-11); font-weight:var(--fw-bold); letter-spacing:var(--track-caps-sm); text-transform:uppercase; }
.res.ok{ color:var(--correct); }
.res.bad{ color:var(--wrong); }
.res.skip{ color:var(--slate); }

.filters{ display:flex; flex-wrap:wrap; gap:var(--px-8); margin-top:var(--px-16); }
.filters button{ min-height:40px; padding:0 var(--px-14); border:1px solid var(--border-control); background:var(--paper); font-size:var(--fs-13); font-weight:var(--fw-semibold); cursor:pointer; }
.filters button[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

/* Tables, as in the landing objectives table */
table{ width:100%; max-width:720px; border-collapse:collapse; margin-top:var(--px-32); }
th{ padding:0 0 var(--px-8); border-bottom:2px solid var(--ink); font-size:var(--fs-12); font-weight:var(--fw-semibold); letter-spacing:var(--track-caps-lg); text-transform:uppercase; color:var(--slate); text-align:left; }
th.r, td.r{ text-align:right; padding-left:var(--px-12); }
td{ padding:var(--px-14) 0; border-bottom:1px solid var(--steel); vertical-align:baseline; font-size:var(--fs-15); }
td.d{ width:44px; font-family:var(--mono); font-size:var(--fs-13); color:var(--slate); }
td.r{ width:64px; font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* Mock exam */
.exambar{ position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:var(--px-16); max-width:720px; padding:var(--px-12) 0; background:var(--paper); border-bottom:2px solid var(--ink); }
.exambar .num{ font-size:var(--fs-14); }
.clock{ font-family:var(--mono); font-size:var(--fs-22); font-weight:var(--fw-semibold); font-variant-numeric:tabular-nums; }
.clock.low{ color:var(--caution); }
.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(44px, 1fr)); gap:var(--px-4); max-width:720px; margin-top:var(--px-16); }
.cell{ min-height:44px; padding:0; border:1px solid var(--border-control); border-radius:0; background:var(--paper); font-family:var(--mono); font-size:var(--fs-13); color:var(--slate); cursor:pointer; }
.cell:hover{ border-color:var(--ink); }
.cell.done{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
/* Answered cells are filled with --text. A 2px --bg line keeps the flag bar and the current cell's border visible on that fill in both themes (C3). */
.cell.flag{ box-shadow:inset 0 -4px 0 var(--focus), inset 0 -6px 0 var(--bg); }
.cell.cur{ border:2px solid var(--accent); }
.cell.done.cur{ box-shadow:inset 0 0 0 2px var(--bg); }
.cell.done.cur.flag{ box-shadow:inset 0 0 0 2px var(--bg), inset 0 -6px 0 var(--focus), inset 0 -8px 0 var(--bg); }
.legend{ display:flex; flex-wrap:wrap; gap:var(--px-4) var(--px-16); align-items:center; margin-top:var(--px-12); font-size:var(--fs-12); color:var(--slate); }
.sw{ display:inline-block; width:12px; height:12px; margin-right:var(--px-6); vertical-align:-1px; border:1px solid var(--border-control); }
.sw.done{ background:var(--ink); border-color:var(--ink); }
.sw.flag{ box-shadow:inset 0 -3px 0 var(--caution); }
.submit{ margin-top:var(--px-32); max-width:720px; }
.confirm{ padding:var(--px-16) 0; border-top:2px solid var(--ink); border-bottom:1px solid var(--steel); }
.confirm p{ margin-bottom:var(--px-16); font-size:var(--fs-15); }
.hist{ margin-top:var(--px-16); max-width:720px; }
.hrow{ display:grid; grid-template-columns:1fr auto auto; gap:var(--px-24); padding:var(--px-14) 0; border-bottom:1px solid var(--steel); text-decoration:none; font-family:var(--mono); font-size:var(--fs-14); }
.hrow:hover span:first-child{ text-decoration:underline; }

/* Objectives */
.dom{ border-top:2px solid var(--ink); margin-top:var(--px-48); padding-top:var(--px-20); max-width:880px; }
.domhead{ display:grid; grid-template-columns:56px 1fr auto; gap:var(--px-16); align-items:baseline; }
.domhead h2{ font-size:var(--fs-20); }
.dn, .dw{ font-family:var(--mono); font-weight:var(--fw-semibold); font-size:var(--fs-17); }
.domstats{ margin:var(--px-8) 0 var(--px-8) var(--px-72); font-family:var(--mono); font-size:var(--fs-12); color:var(--slate); }
.orow{ display:grid; grid-template-columns:56px 1fr auto; gap:var(--px-4) var(--px-16); align-items:baseline; padding:var(--px-14) 0; border-bottom:1px solid var(--steel); }
.orow:last-child{ border-bottom:none; }
.orow .on{ font-family:var(--mono); font-size:var(--fs-14); color:var(--slate); }
.orow b{ font-weight:var(--fw-semibold); font-size:var(--fs-15); }
.orow .ot span{ display:block; margin-top:var(--px-2); font-family:var(--mono); font-size:var(--fs-12); color:var(--slate); }
.orow .golink{ font-size:var(--fs-14); font-weight:var(--fw-bold); }

footer{ border-top:2px solid var(--ink); padding:var(--px-24) var(--px-40) var(--px-40); display:flex; justify-content:space-between; gap:var(--px-8) var(--px-24); flex-wrap:wrap; font-family:var(--mono); font-size:var(--fs-11); letter-spacing:var(--track-mono); color:var(--slate); }
footer a{ color:inherit; text-underline-offset:var(--underline-offset); }

@media (max-width:760px){
  .toprow, .notice, footer{ padding-left:var(--px-20); padding-right:var(--px-20); }
  .toprow{ padding-top:var(--px-24); }
  .nav{ gap:0 var(--px-20); padding:var(--px-16) var(--px-20) 0; }
  main{ padding:var(--px-32) var(--px-20) var(--px-56); }
  main h1{ font-size:var(--fs-32); }
  h2{ font-size:var(--fs-20); }
  .qz{ padding:var(--px-20) var(--px-16) var(--px-24); }
  .opt .tail{ min-width:0; }
  .row{ grid-template-columns:80px 1fr; }
  .row .n{ font-size:var(--fs-17); }
  .domhead{ grid-template-columns:40px 1fr auto; gap:var(--px-12); }
  .domstats{ margin-left:var(--px-52); }
  .orow{ grid-template-columns:40px 1fr; gap:var(--px-4) var(--px-12); }
  .orow .golink{ grid-column:2; }
  .big{ font-size:var(--fs-40); }
  td.r{ width:48px; }
}

/* Phones: keep all four nav links in view without scrolling the nav. */
@media (max-width:480px){
  .nav{ gap:0 var(--px-12); }
  .nav a{ font-size:var(--fs-12); }
}