/* Zanoshky Standard tokens for the web. Generated by build.py from tokens.json: edit that, then run it.
   Light by default; the phone's dark setting gives Black, as the approved mockup pages do;
   data-look on <html> picks one: light, dark, black, or auto (follow the phone). */
:root {
  color-scheme: light dark;
  --zs-fill: #004cc0;
  --zs-on-fill: #ffffff;
  --zs-glow: #0068ff;
  --zs-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --zs-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --zs-fs: 1;
  --zs-type-screen-title: calc(27px * var(--zs-fs));
  --zs-type-app-bar-title: calc(22px * var(--zs-fs));
  --zs-type-pro-headline: calc(22px * var(--zs-fs));
  --zs-type-sheet-title: calc(18px * var(--zs-fs));
  --zs-type-sheet-title-big: calc(22px * var(--zs-fs));
  --zs-type-section-label: calc(13px * var(--zs-fs));
  --zs-type-panel-value: calc(19px * var(--zs-fs));
  --zs-type-number: calc(20px * var(--zs-fs));
  --zs-type-version: calc(17px * var(--zs-fs));
  --zs-type-body: calc(15px * var(--zs-fs));
  --zs-type-key: calc(15px * var(--zs-fs));
  --zs-type-key-main: calc(16px * var(--zs-fs));
  --zs-type-header-key: calc(13px * var(--zs-fs));
  --zs-type-item-name: calc(15px * var(--zs-fs));
  --zs-type-feature-name: calc(15px * var(--zs-fs));
  --zs-type-pitch: calc(14.5px * var(--zs-fs));
  --zs-type-hint: calc(14px * var(--zs-fs));
  --zs-type-small: calc(13.5px * var(--zs-fs));
  --zs-type-feature-line: calc(13px * var(--zs-fs));
  --zs-type-nav-label: calc(12.5px * var(--zs-fs));
  --zs-type-chip: calc(12.5px * var(--zs-fs));
  --zs-type-meta: calc(12.5px * var(--zs-fs));
  --zs-type-axis: calc(12px * var(--zs-fs));
  --zs-r-plate: 16px;
  --zs-r-key: 14px;
  --zs-r-key-focus-inner: 10px;
  --zs-r-header-key: 12px;
  --zs-r-icon-button: 12px;
  --zs-r-row: 12px;
  --zs-r-note: 12px;
  --zs-r-theme-tile: 14px;
  --zs-r-tile-preview: 9px;
  --zs-r-feature-tile: 10px;
  --zs-r-list-icon: 10px;
  --zs-r-sheet-top: 24px;
  --zs-r-grab: 4px;
  --zs-r-pill: 999px;
  --zs-r-chip: 999px;
  --zs-r-switch: 999px;
  --zs-key-h: 52px;
  --zs-header-key-h: 48px;
  --zs-touch: 48px;
  --zs-row-h: 52px;
  --zs-item-h: 56px;
  --zs-nav-item-h: 56px;
  --zs-pill-w: 60px;
  --zs-pill-h: 32px;
  --zs-pro-row-h: 60px;
  --zs-content-max: 1100px;
  --zs-press-ms: 70ms;
  --zs-release-ms: 140ms;
  --zs-look-ms: 250ms;
  --zs-pill-ms: 200ms;
  --zs-s0: 2px;
  --zs-s1: 4px;
  --zs-s2: 6px;
  --zs-s3: 8px;
  --zs-s4: 10px;
  --zs-s5: 12px;
  --zs-s6: 14px;
  --zs-s7: 16px;
  --zs-s8: 18px;
  --zs-s9: 22px;
  --zs-s10: 26px;
  --zs-s11: 28px;
  --zs-s12: 32px;
  --zs-s13: 48px;
  --zs-screen-side: 18px;
  --zs-screen-top: 18px;
  --zs-screen-bottom: 28px;
  --zs-tv-safe-x: 48px;
  --zs-tv-safe-y: 27px;
  --zs-tv-rail-w: 96px;
  --zs-tv-sheet-w: 420px;
  --zs-tv-col-gap: 32px;
  --zs-focus-ring: 2px;
  --zs-focus-offset: 3px;
  --zs-focus-halo: 7px;
  --zs-focus-lift: 1.04;
  --zs-focus-ms: 120ms;
  --zs-ground: #f6f7f9;
  --zs-plate: #ffffff;
  --zs-well: #eceef2;
  --zs-line: #dfe2e8;
  --zs-edge: #7b808c;
  --zs-bevel: #ffffff;
  --zs-text: #121418;
  --zs-soft: #3d414a;
  --zs-blue: #0a45ad;
  --zs-on-blue: #ffffff;
  --zs-ok: #0a5530;
  --zs-warn: #5c3a00;
  --zs-bad: #931313;
  --zs-scrim: rgba(18,20,24,.38);
  --zs-chosen: #e8f0ff;
  --zs-on-chosen: #0a3f9e;
  --zs-risky-fill: #fde8e7;
  --zs-risky-text: #8a1010;
  --zs-risky-line: #d42a20;
  --zs-live-dot: #1a7f4b;
}
@media (min-width: 840px) { :root { --zs-screen-side: 48px; --zs-screen-top: 22px; --zs-screen-bottom: 40px; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-look]), :root[data-look="auto"] {
    --zs-ground: #000000;
    --zs-plate: #0d0d10;
    --zs-well: #16171b;
    --zs-line: #24252b;
    --zs-edge: #646771;
    --zs-bevel: #34363e;
    --zs-text: #ffffff;
    --zs-soft: #b6b8c0;
    --zs-blue: #7aaeff;
    --zs-on-blue: #04132e;
    --zs-ok: #6fdc9b;
    --zs-warn: #f2c06b;
    --zs-bad: #ff9d97;
    --zs-scrim: rgba(0,0,0,.6);
    --zs-chosen: #0a2350;
    --zs-on-chosen: #ffffff;
    --zs-risky-fill: #2a0d10;
    --zs-risky-text: #ffb4ae;
    --zs-risky-line: #ff5a4f;
    --zs-live-dot: #3ecf8e;
  }
}
:root[data-look="light"] {
  color-scheme: light;
  --zs-ground: #f6f7f9;
  --zs-plate: #ffffff;
  --zs-well: #eceef2;
  --zs-line: #dfe2e8;
  --zs-edge: #7b808c;
  --zs-bevel: #ffffff;
  --zs-text: #121418;
  --zs-soft: #3d414a;
  --zs-blue: #0a45ad;
  --zs-on-blue: #ffffff;
  --zs-ok: #0a5530;
  --zs-warn: #5c3a00;
  --zs-bad: #931313;
  --zs-scrim: rgba(18,20,24,.38);
  --zs-chosen: #e8f0ff;
  --zs-on-chosen: #0a3f9e;
  --zs-risky-fill: #fde8e7;
  --zs-risky-text: #8a1010;
  --zs-risky-line: #d42a20;
  --zs-live-dot: #1a7f4b;
}
:root[data-look="dark"] {
  color-scheme: dark;
  --zs-ground: #111215;
  --zs-plate: #18191d;
  --zs-well: #1f2126;
  --zs-line: #2a2c33;
  --zs-edge: #6c707b;
  --zs-bevel: #3a3d46;
  --zs-text: #eceef2;
  --zs-soft: #b5b8c1;
  --zs-blue: #86b6ff;
  --zs-on-blue: #04132e;
  --zs-ok: #6fdc9b;
  --zs-warn: #f2c06b;
  --zs-bad: #ff9d97;
  --zs-scrim: rgba(0,0,0,.55);
  --zs-chosen: #0a2350;
  --zs-on-chosen: #ffffff;
  --zs-risky-fill: #2a0d10;
  --zs-risky-text: #ffb4ae;
  --zs-risky-line: #ff5a4f;
  --zs-live-dot: #3ecf8e;
}
:root[data-look="black"] {
  color-scheme: dark;
  --zs-ground: #000000;
  --zs-plate: #0d0d10;
  --zs-well: #16171b;
  --zs-line: #24252b;
  --zs-edge: #646771;
  --zs-bevel: #34363e;
  --zs-text: #ffffff;
  --zs-soft: #b6b8c0;
  --zs-blue: #7aaeff;
  --zs-on-blue: #04132e;
  --zs-ok: #6fdc9b;
  --zs-warn: #f2c06b;
  --zs-bad: #ff9d97;
  --zs-scrim: rgba(0,0,0,.6);
  --zs-chosen: #0a2350;
  --zs-on-chosen: #ffffff;
  --zs-risky-fill: #2a0d10;
  --zs-risky-text: #ffb4ae;
  --zs-risky-line: #ff5a4f;
  --zs-live-dot: #3ecf8e;
}
@media (prefers-reduced-motion: reduce) { :root { --zs-press-ms: 0ms; --zs-release-ms: 0ms; --zs-look-ms: 0ms; --zs-pill-ms: 0ms; } }
/* TV: set data-form="tv" on <html>. Screen sides move to the TV safe edges; Dark is the default look. */
:root[data-form="tv"] {
  --zs-screen-side: 48px;
  --zs-screen-top: 27px;
  --zs-screen-bottom: 27px;
}
:root[data-form="tv"]:not([data-look]) {
  color-scheme: dark;
  --zs-ground: #111215;
  --zs-plate: #18191d;
  --zs-well: #1f2126;
  --zs-line: #2a2c33;
  --zs-edge: #6c707b;
  --zs-bevel: #3a3d46;
  --zs-text: #eceef2;
  --zs-soft: #b5b8c1;
  --zs-blue: #86b6ff;
  --zs-on-blue: #04132e;
  --zs-ok: #6fdc9b;
  --zs-warn: #f2c06b;
  --zs-bad: #ff9d97;
  --zs-scrim: rgba(0,0,0,.55);
  --zs-chosen: #0a2350;
  --zs-on-chosen: #ffffff;
  --zs-risky-fill: #2a0d10;
  --zs-risky-text: #ffb4ae;
  --zs-risky-line: #ff5a4f;
  --zs-live-dot: #3ecf8e;
}
@media (prefers-reduced-motion: reduce) { :root { --zs-focus-ms: 0ms; --zs-focus-lift: 1; } }

/* The guide rules on the Zanoshky Standard tokens above, then the Alpen Pass parts at the end. */
@font-face { font-family: Inter; src: url(fonts/inter-regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url(fonts/inter-semibold.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(fonts/JetBrainsMono-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --bg: var(--zs-ground); --card: var(--zs-plate); --well: var(--zs-well); --border: var(--zs-line);
  --text: var(--zs-text); --soft: var(--zs-soft); --sans: var(--zs-sans); --mono: var(--zs-mono);
}
* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn, .btn:active { transform: none; transition: none; } }
/* One light from above: a soft glow of the house blue at the top, nothing lit from below. */
body { margin: 0; color: var(--text); font: 400 1.0625rem/1.65 var(--sans); background: radial-gradient(ellipse 80% 420px at 50% 0, color-mix(in srgb, var(--zs-glow) 12%, transparent), transparent 70%) no-repeat, var(--bg); }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--zs-blue); text-underline-offset: .2em; }
:focus-visible { outline: 2px solid var(--zs-glow); outline-offset: 3px; border-radius: var(--zs-r-row); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--card); color: var(--text); border: 2px solid var(--zs-glow); padding: 10px 16px; border-radius: var(--zs-r-row); z-index: 20; }
.skip:focus { left: 12px; }
.wrap { width: min(var(--zs-content-max), 100% - 40px); margin-inline: auto; }

/* Top bar: 64 tall on the ground with a line under it; the guide pages, then the one filled key. On a phone
   the pages drop to a second line and the key stays beside the name. */
.bar { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--border); padding-top: env(safe-area-inset-top, 0px); }
.bar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; min-height: 48px; color: var(--text); text-decoration: none; font: 700 1.1rem/1 var(--mono); margin-right: auto; }
.brand img { width: 34px; height: 34px; }
.bar nav { display: flex; flex-wrap: wrap; gap: 2px; }
.bar nav a { color: var(--soft); text-decoration: none; padding: 0 12px; border-radius: var(--zs-r-header-key); font-size: .95rem; min-height: 48px; display: inline-flex; align-items: center; }
.bar nav a:hover { color: var(--text); background: var(--well); }
.bar nav a[aria-current="page"] { color: var(--zs-on-chosen); background: var(--zs-chosen); font-weight: 600; }
.bar .key { min-height: 48px; padding: 0 16px; font-size: .95rem; border-radius: var(--zs-r-header-key); }
@media (max-width: 760px) { .bar nav { order: 3; width: 100%; margin: 0 -12px 6px; } .bar nav a[href="index.html"] { display: none; } }

h1, h2 { font-family: var(--mono); font-weight: 700; line-height: 1.15; margin: 0; text-wrap: balance; }
h3 { font-weight: 600; line-height: 1.3; margin: 0; }
.kicker { font: 700 .85rem var(--mono); color: var(--soft); margin: 0 0 12px; }
.page { padding-block: 40px 80px; }
.page h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); }
.page h2 { font-size: 1.45rem; margin: 48px 0 12px; }
.page p, .page li, .page dd { color: var(--soft); max-width: 46rem; }
.page li { margin-top: 6px; }
.page strong, .page dt { color: var(--text); font-weight: 600; }
.page dd { margin: 0 0 14px; }
.lede { font-size: 1.2rem; margin-top: 16px; }
.shots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 28px 0; }
@media (max-width: 860px) { .shots { grid-template-columns: repeat(2, 1fr); } }
.shots figure { margin: 0; }
.shots img { border-radius: 18px; border: 1px solid var(--border); width: 100%; background: var(--well); }
.shots figcaption { color: var(--soft); font-size: .95rem; margin-top: 8px; }

/* Keys: 52 tall, 14 corners, filled for the one main action and tonal for the rest, lit from the top edge. */
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.btn, .key { display: inline-flex; align-items: center; justify-content: center; min-height: var(--zs-key-h); padding: 0 22px; border-radius: var(--zs-r-key); border: 1px solid transparent; font: 600 1rem var(--sans); text-decoration: none; transition: transform var(--zs-release-ms) ease, filter var(--zs-release-ms) ease; }
.btn:active, .key:active { transform: scale(.97); transition-duration: var(--zs-press-ms); }
.btn.main, .key { color: var(--zs-on-fill); background: linear-gradient(var(--zs-fill), var(--zs-fill)) padding-box, linear-gradient(to bottom, rgba(255,255,255,.32), color-mix(in srgb, var(--zs-fill) 65%, #000) 45%) border-box; }
.btn.main:hover, .key:hover { filter: brightness(1.12); }
.btn.tonal { color: var(--text); background: linear-gradient(var(--well), var(--well)) padding-box, linear-gradient(to bottom, var(--zs-bevel), var(--border) 45%) border-box; }
.btn.tonal:hover { filter: brightness(.97); }

/* Plates: 16 corners, a hairline and the lit top edge. */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 24px; }
@media (max-width: 640px) { .grid { grid-template-columns: 1fr; } }
.card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; background: var(--card); border: 1px solid var(--border); border-radius: var(--zs-r-plate); box-shadow: 0 1px 0 var(--zs-bevel) inset; padding: 22px; }
.card h2 { font-size: 1.25rem; margin: 0; }
.card p { margin: 0; }
.card .btn { margin-top: auto; }
.card p + .btn { margin-top: 12px; }
.mail { color: var(--text); }

footer { border-top: 1px solid var(--border); padding: 28px 0 calc(32px + env(safe-area-inset-bottom, 0px)); color: var(--soft); font-size: .95rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; }
footer nav { display: flex; flex-wrap: wrap; gap: 4px; }
footer nav a { padding: 0 10px; min-height: 48px; display: inline-flex; align-items: center; color: var(--soft); border-radius: var(--zs-r-row); }
footer a[aria-current] { color: var(--text); font-weight: 600; }
footer .lic { flex-basis: 100%; font-size: .88rem; }
/* Big screens get bigger type, not more empty air. */
@media (min-width: 2200px) { html { font-size: 140%; } .wrap { width: min(1600px, 100% - 80px); } }

/* Alpen Pass: the government note, the sources list, the page index and the questions. */
.note { margin-top: 28px; padding: 16px 20px; background: var(--card); border: 1px solid var(--border); border-inline-start: 4px solid var(--zs-glow); border-radius: var(--zs-r-plate); box-shadow: 0 1px 0 var(--zs-bevel) inset; max-width: 46rem; }
.note b { display: block; font-weight: 600; color: var(--text); }
.note p { margin: 4px 0 0; }
.src-h { margin: 28px 0 0; font: 700 .85rem/1.4 var(--mono); color: var(--soft); }
.srcs { list-style: none; margin: 10px 0 0; padding: 4px 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--zs-r-plate); box-shadow: 0 1px 0 var(--zs-bevel) inset; }
.page .srcs li { margin: 0; padding: 12px 18px; max-width: none; }
.srcs li + li { border-top: 1px solid var(--border); }
.srcs a { font-weight: 600; display: inline-block; padding-block: 4px; }
.srcs span { display: block; font-size: .92rem; }
.toc { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 24px; }
.toc a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: var(--zs-r-header-key); background: var(--well); color: var(--text); text-decoration: none; font-size: .95rem; }
.toc a:hover { filter: brightness(.97); }
.faq { margin-top: 28px; display: grid; gap: 12px; max-width: 52em; }
.faq details { padding: 2px 20px; background: var(--card); border: 1px solid var(--border); border-radius: var(--zs-r-plate); box-shadow: 0 1px 0 var(--zs-bevel) inset; }
.faq summary { cursor: pointer; min-height: 52px; display: flex; align-items: center; font-weight: 600; }
.faq details p { margin: 0; padding: 0 0 18px; }
footer .gov { flex-basis: 100%; margin: 0; font-size: .9rem; max-width: 70em; }