/* ZAKPY front-end. Generated by scripts/build.sh, do not edit. */
/* Self-hosted fonts. Files live in brand/fonts and are copied to dist/fonts by scripts/build.sh. */
@font-face { font-family: "Sora"; src: url("fonts/sora-latin-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/dm-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: "Cairo"; src: url("fonts/cairo-arabic-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Cairo"; src: url("fonts/cairo-arabic-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Cairo"; src: url("fonts/cairo-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Cairo"; src: url("fonts/cairo-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
/* brand/tokens/tokens.css */
/* ZAKPY design tokens — use these values in websites, presentations and templates. */
:root {
  --zakpy-red: #E53935;
  --zakpy-red-dark: #BE2524;
  --zakpy-red-solid: #D32F2F; /* solid fills under light text: 4.86:1 with warm white (AA). #E53935 is 4.13:1, use it for logo and accents only */
  --zakpy-coral: #FF716B;
  --zakpy-ink: #111827;
  --zakpy-slate: #475569;
  --zakpy-warm-white: #FFFCF5;
  --zakpy-mist: #F4F1E8;
  --zakpy-lime: #B7E36A;
  --zakpy-success: #16824A;
  --zakpy-warning: #E6A400;

  --font-display: "Sora", "Manrope", system-ui, sans-serif;
  --font-body: "DM Sans", "Manrope", system-ui, sans-serif;

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --shadow-card: 0 12px 32px rgba(17, 24, 39, 0.10);
}
/* Semantic tokens: what the interface means, mapped onto brand tokens (01-tokens.css = brand/tokens/tokens.css). */
:root {
  color-scheme: light;

  --bg: var(--zakpy-warm-white);
  --bg-alt: var(--zakpy-mist);
  --surface: #ffffff;
  --text: var(--zakpy-ink);
  --text-muted: var(--zakpy-slate);
  --border: #e4dfd0;
  --accent: var(--zakpy-red);
  --accent-hover: var(--zakpy-red-dark);
  --accent-solid: var(--zakpy-red-solid);
  --accent-solid-hover: var(--zakpy-red-dark);
  --on-accent: var(--zakpy-warm-white);
  --positive: var(--zakpy-success);
  --positive-bg: #e6f4d0;
  --warning: var(--zakpy-warning);
  --danger: var(--zakpy-red-dark);
  --focus: var(--zakpy-ink);
  --inverse-bg: var(--zakpy-ink);
  --inverse-text: var(--zakpy-warm-white);

  /* 8px spacing scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;

  --container: 72rem;
  --container-narrow: 44rem;
  --motion: 180ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  --font-ar: "Cairo", "Tajawal", system-ui, sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--zakpy-ink);
  --bg-alt: #0b1220;
  --surface: #1a2332;
  --text: var(--zakpy-warm-white);
  --text-muted: #aab4c3;
  --border: #2b364a;
  --accent: var(--zakpy-coral);
  --accent-hover: #ff8a85;
  --accent-solid: var(--zakpy-coral);
  --accent-solid-hover: #ff8a85;
  --on-accent: var(--zakpy-ink);
  --positive: var(--zakpy-lime);
  --positive-bg: #243321;
  --danger: var(--zakpy-coral);
  --focus: var(--zakpy-warm-white);
  --inverse-bg: var(--zakpy-warm-white);
  --inverse-text: var(--zakpy-ink);
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion: 0ms; }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
[dir="rtl"], :lang(ar) { font-family: var(--font-ar); }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] .display { font-family: var(--font-ar); }

img, svg, video { max-width: 100%; display: block; }
a { color: var(--text); text-decoration-color: var(--accent); text-underline-offset: 0.2em; }
a:hover { color: var(--accent-hover); }

h1, h2, h3, .display { font-family: var(--font-display); color: var(--text); margin: 0 0 var(--space-2); line-height: 1.12; letter-spacing: -0.01em; }
.display { font-size: clamp(2.625rem, 6vw, 4rem); font-weight: 800; }
h1 { font-size: clamp(2.25rem, 4.5vw, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.25rem); font-weight: 750; }
h3 { font-size: clamp(1.375rem, 2.2vw, 1.5rem); font-weight: 700; }
p { margin: 0 0 var(--space-2); }
.lead { font-size: 1.25rem; color: var(--text-muted); max-width: 40rem; }
.small { font-size: 0.875rem; font-weight: 500; }
.muted { color: var(--text-muted); }
code, kbd { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 0.9em; background: var(--bg-alt); padding: 0.1em 0.4em; border-radius: 6px; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.skip-link { position: absolute; inset-inline-start: var(--space-2); top: -4rem; background: var(--inverse-bg); color: var(--inverse-text); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); z-index: 100; }
.skip-link:focus { top: var(--space-1); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Feedback when the language or theme changes (classes are set by zakpy.js, never on first load) */
.theme-fading, .theme-fading *, .theme-fading *::before, .theme-fading *::after {
  transition: background-color 350ms var(--ease), color 350ms var(--ease), border-color 350ms var(--ease), fill 350ms var(--ease), stroke 350ms var(--ease), box-shadow 350ms var(--ease) !important;
}
/* Language change: new text eases in (blur and rise), the pressed button pops */
.lang-changed body > *:not(.intro) [data-i18n] { animation: lang-in 420ms var(--ease) both; animation-delay: calc(var(--i, 0) * 1ms); }
.lang-changed .lang-switch [aria-pressed="true"] { animation: lang-pop 320ms var(--ease); }
@keyframes lang-in { from { opacity: 0; transform: translateY(8px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes lang-pop { 40% { transform: scale(1.12); } }
.theme-toggle .icon-moon, :root[data-theme="dark"] .theme-toggle .icon-sun { animation: theme-icon-in 450ms var(--ease); }
@keyframes theme-icon-in { from { opacity: 0; transform: rotate(-90deg) scale(0.4); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .theme-toggle .icon-moon, :root[data-theme="dark"] .theme-toggle .icon-sun { animation: none; } .lang-changed [data-i18n], .lang-changed .lang-switch [aria-pressed] { animation: none !important; } }
.container { width: min(100% - 2 * var(--space-3), var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 2 * var(--space-3), var(--container-narrow)); margin-inline: auto; }
.section { padding-block: var(--space-6); }
.section--alt { background: var(--bg-alt); }
.section--inverse { background: var(--inverse-bg); color: var(--inverse-text); border-radius: var(--radius-lg); }
.section--inverse h1, .section--inverse h2, .section--inverse h3, .section--inverse a { color: var(--inverse-text); }
.section--inverse .lead, .section--inverse .muted { color: inherit; opacity: 0.8; }

.stack > * + * { margin-block-start: var(--stack, var(--space-2)); }
.stack--lg { --stack: var(--space-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--gap, var(--space-2)); align-items: center; }
.grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.split { display: grid; gap: var(--space-4); align-items: center; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
/* ---------- Button ---------- */
.btn {
  --btn-bg: var(--accent-solid); --btn-fg: var(--on-accent); --btn-border: var(--accent-solid);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  min-height: 3rem; padding: 0.625rem 1.5rem;
  background: var(--btn-bg); color: var(--btn-fg); border: 2px solid var(--btn-border);
  border-radius: var(--radius-sm); font: 700 1rem/1.2 var(--font-body); text-decoration: none; cursor: pointer;
  transition: background var(--motion) var(--ease), color var(--motion) var(--ease), border-color var(--motion) var(--ease), transform var(--motion) var(--ease);
}
.btn:hover { --btn-border: var(--accent-solid-hover); color: var(--btn-fg); }
.btn:active { transform: translateY(1px); }
.btn--secondary { --btn-bg: transparent; --btn-fg: var(--text); --btn-border: var(--text); }
.btn--secondary:hover { --btn-fg: var(--bg); --btn-border: var(--text); }
.btn--sm { min-height: 2.5rem; padding: 0.375rem 1rem; font-size: 0.9375rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.link-arrow { font-weight: 700; text-decoration: none; }
.link-arrow::after { content: "\2192"; color: var(--accent); margin-inline-start: 0.35em; display: inline-block; transition: transform var(--motion) var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }
[dir="rtl"] .link-arrow::after { content: "\2190"; }
[dir="rtl"] .link-arrow:hover::after { transform: translateX(-4px); }

/* ---------- Card ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--space-3); }
.card--lg { padding: var(--space-4); }
.card h3 { margin-bottom: var(--space-1); }
.card__eyebrow { display: block; font-size: 0.875rem; font-weight: 700; color: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: var(--space-1); }

/* ---------- Navigation (desktop bar, mobile side drawer) ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.nav__inner { display: flex; align-items: center; gap: var(--space-2); min-height: 4.5rem; }
.nav__links { display: flex; gap: var(--space-3); margin-inline-start: auto; align-items: center; list-style: none; padding: 0; margin-block: 0; }
.nav__links a { text-decoration: none; font-weight: 500; padding-block: var(--space-1); border-bottom: 2px solid transparent; }
.nav__links a:hover, .nav__links a[aria-current="page"] { border-bottom-color: var(--accent); color: var(--text); }
.nav__tools { display: flex; align-items: center; gap: var(--space-1); }
/* Icons in links are for the side drawer only, the desktop bar stays text */
.nav__icon { display: none; }
/* Group: a link with sub routes. Dropdown on desktop, accordion in the drawer. Markup: li.nav__group > button.nav__group-toggle[data-zakpy-group] + div.nav__sub > ul */
.nav__group { position: relative; }
.nav__group-toggle { display: inline-flex; align-items: center; gap: 0.35rem; padding: var(--space-1) 0; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--text); font: 500 1.0625rem var(--font-body); cursor: pointer; }
.nav__group-toggle:hover, .nav__group-toggle[aria-expanded="true"] { border-bottom-color: var(--accent); }
.nav__chevron { transition: transform 260ms var(--ease); }
.nav__group-toggle[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }
.nav__sub { position: absolute; z-index: 5; top: 100%; inset-inline-start: 0; min-width: 15rem; padding: var(--space-1); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 180ms var(--ease), transform 180ms var(--ease), visibility 180ms; }
.nav__group-toggle[aria-expanded="true"] + .nav__sub { opacity: 1; visibility: visible; transform: none; }
.nav__sub ul { list-style: none; margin: 0; padding: 0; }
.nav__sub a { display: block; padding: 0.5rem 0.75rem; border-bottom: 0; border-radius: var(--radius-sm); }
.nav__sub a:hover { background: var(--bg-alt); }
.nav__drawer-head, .nav__drawer-tools, .nav__overlay, .icon-btn.nav__toggle { display: none; }

/* Icon button (theme toggle, close). Always has an aria-label, never text only. */
.icon-btn { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; background: transparent; color: var(--text); border: 2px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: background var(--motion) var(--ease), border-color var(--motion) var(--ease), transform var(--motion) var(--ease); }
.icon-btn:hover { background: var(--bg-alt); border-color: var(--text-muted); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.theme-toggle svg { transition: transform 400ms var(--ease); }
.theme-toggle:hover svg { transform: rotate(18deg); }

/* Language switch: EN | FR | Darija */
.lang-switch { display: inline-flex; border: 2px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.lang-switch button { min-width: 2.5rem; min-height: 2.5rem; padding: 0 0.625rem; background: transparent; color: var(--text-muted); border: 0; font: 700 0.875rem var(--font-body); cursor: pointer; transition: background var(--motion) var(--ease), color var(--motion) var(--ease); }
.lang-switch button + button { border-inline-start: 2px solid var(--border); }
.lang-switch button:hover { color: var(--text); background: var(--bg-alt); }
.lang-switch button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.lang-switch button[hidden] { display: none; }

/* Hamburger: three lines that turn into a cross */
.burger { position: relative; width: 1.375rem; height: 1rem; }
.burger i { position: absolute; inset-inline: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform 260ms var(--ease), opacity 160ms var(--ease), top 260ms var(--ease); }
.burger i:nth-child(1) { top: 0; }
.burger i:nth-child(2) { top: 7px; }
.burger i:nth-child(3) { top: 14px; }
[aria-expanded="true"] .burger i:nth-child(1) { top: 7px; transform: rotate(45deg); }
[aria-expanded="true"] .burger i:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .burger i:nth-child(3) { top: 7px; transform: rotate(-45deg); }

@media (max-width: 52rem) {
  .nav { backdrop-filter: none; background: var(--bg); } /* backdrop-filter would trap the fixed drawer inside the bar */
  .nav__inner { gap: var(--space-1); }
  .nav__tools { display: none; } /* language and theme live in the drawer on mobile */
  .nav__logo { margin-inline-start: auto; } /* burger at the start, logo at the end */
  .icon-btn.nav__toggle { display: inline-grid; }
  .nav__overlay { display: block; position: fixed; inset: 0; z-index: 1; background: rgba(17, 24, 39, 0.55); opacity: 0; visibility: hidden; transition: opacity 280ms var(--ease), visibility 280ms; }
  body.nav-open .nav__overlay { opacity: 1; visibility: visible; }
  body.nav-open { overflow: hidden; }
  .nav__links {
    position: fixed; z-index: 2; top: 0; bottom: 0; inset-inline-start: 0; width: min(20rem, 86vw); margin: 0;
    flex-direction: column; align-items: stretch; gap: 0; padding: 0 0 var(--space-4);
    background: var(--bg); border-inline-end: 1px solid var(--border); box-shadow: var(--shadow-card);
    overflow-y: auto; visibility: hidden; transform: translateX(-102%);
    transition: transform 320ms var(--ease), visibility 320ms;
  }
  [dir="rtl"] .nav__links { transform: translateX(102%); }
  .nav__links.is-open { visibility: visible; transform: none; }
  .nav__drawer-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); margin-bottom: var(--space-1); }
  .nav__links li:not(.nav__drawer-head) a, .nav__group-toggle { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-2) var(--space-3); text-align: start; border-bottom: 0; border-inline-start: 4px solid transparent; font-size: 1.125rem; transition: background var(--motion) var(--ease), border-color var(--motion) var(--ease); }
  .nav__links li:not(.nav__drawer-head) a:hover, .nav__group-toggle:hover, .nav__links a[aria-current="page"] { background: var(--bg-alt); border-inline-start-color: var(--accent); }
  .nav__links li:not(.nav__drawer-head) { opacity: 0; transform: translateX(-12px); transition: opacity 300ms var(--ease), transform 300ms var(--ease); }
  [dir="rtl"] .nav__links li:not(.nav__drawer-head) { transform: translateX(12px); }
  .nav__links.is-open li:not(.nav__drawer-head) { opacity: 1; transform: none; }
  .nav__links.is-open li:nth-child(2) { transition-delay: 60ms; } .nav__links.is-open li:nth-child(3) { transition-delay: 100ms; }
  .nav__links.is-open li:nth-child(4) { transition-delay: 140ms; } .nav__links.is-open li:nth-child(5) { transition-delay: 180ms; }
  .nav__links.is-open li:nth-child(6) { transition-delay: 220ms; } .nav__links.is-open li:nth-child(7) { transition-delay: 260ms; } .nav__links.is-open li:nth-child(8) { transition-delay: 300ms; }
  .nav__icon { display: block; color: var(--text-muted); transition: color var(--motion) var(--ease); }
  .nav__links a:hover .nav__icon, .nav__links a[aria-current="page"] .nav__icon, .nav__group-toggle:hover .nav__icon { color: var(--accent); }
  .nav__group-toggle { background: none; border-top: 0; border-bottom: 0; border-inline-end: 0; color: var(--text); font: 500 1.125rem var(--font-body); cursor: pointer; }
  .nav__group-toggle .nav__chevron { margin-inline-start: auto; }
  .nav__sub { position: static; display: grid; grid-template-rows: 0fr; min-width: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; opacity: 1; visibility: visible; transform: none; transition: grid-template-rows 280ms var(--ease); }
  .nav__group-toggle[aria-expanded="true"] + .nav__sub { grid-template-rows: 1fr; }
  .nav__sub > ul { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 280ms; }
  .nav__group-toggle[aria-expanded="true"] + .nav__sub > ul { visibility: visible; }
  .nav__links .nav__sub li a { padding: 0.75rem var(--space-3) 0.75rem var(--space-5); font-size: 1rem; border-radius: 0; }
  .nav__sub .nav__icon { width: 1.125rem; height: 1.125rem; }
  .nav__drawer-tools { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3); margin-top: var(--space-2); border-top: 1px solid var(--border); }
}
@media (max-width: 26rem) { .lang-switch button { min-width: 2.25rem; padding: 0 0.4rem; } }

/* ---------- Hero ---------- */
.hero { padding-block: var(--space-7) var(--space-6); }
.hero .lead { margin-bottom: var(--space-4); }

/* ---------- Badge / status (always text, never colour alone) ---------- */
.badge { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.15rem 0.75rem; border-radius: 999px; font-size: 0.875rem; font-weight: 700; background: var(--bg-alt); color: var(--text); border: 1px solid var(--border); }
.badge--positive { background: var(--positive-bg); color: var(--text); border-color: var(--positive); }
.badge--positive::before { content: "\2713"; color: var(--positive); }
.badge--warning { border-color: var(--warning); }
.badge--warning::before { content: "!"; color: var(--warning); font-weight: 800; }
.badge--danger { border-color: var(--danger); }
.badge--danger::before { content: "\00D7"; color: var(--danger); font-weight: 800; }

/* ---------- Alert ---------- */
.alert { display: flex; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--border); border-inline-start: 6px solid var(--text-muted); background: var(--surface); }
.alert--positive { border-inline-start-color: var(--positive); }
.alert--warning { border-inline-start-color: var(--warning); }
.alert--danger { border-inline-start-color: var(--danger); }
.alert strong { display: block; }

/* ---------- Forms ---------- */
.field { display: grid; gap: 0.375rem; }
.field label { font-weight: 700; font-size: 0.9375rem; }
.field__hint { font-size: 0.875rem; color: var(--text-muted); }
.field__error { font-size: 0.875rem; color: var(--danger); font-weight: 700; }
.input, .select, .textarea {
  width: 100%; min-height: 3rem; padding: 0.625rem 1rem; font: inherit; color: var(--text);
  background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-sm);
  transition: border-color var(--motion) var(--ease);
}
.textarea { min-height: 7rem; resize: vertical; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--text-muted); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--text); outline-offset: 2px; }
.input[aria-invalid="true"] { border-color: var(--danger); }
.check { display: flex; gap: var(--space-1); align-items: flex-start; }
.check input { width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; accent-color: var(--accent); }

/* ---------- Table ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.table th, .table td { padding: var(--space-1) var(--space-2); text-align: start; border-bottom: 1px solid var(--border); }
.table th { font-weight: 700; color: var(--text-muted); font-size: 0.875rem; background: var(--bg-alt); white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--bg-alt); }
.table .num { text-align: end; font-variant-numeric: tabular-nums; }

/* ---------- Stat (dashboard number) ---------- */
.stat { display: grid; gap: 0.25rem; }
.stat__label { font-size: 0.875rem; font-weight: 700; color: var(--text-muted); }
.stat__value { font: 800 2.5rem/1 var(--font-display); }
.stat__delta { font-size: 0.875rem; font-weight: 700; }
.stat__delta--up { color: var(--positive); }
.stat__delta--up::before { content: "\25B2 "; }
.stat__delta--down { color: var(--danger); }
.stat__delta--down::before { content: "\25BC "; }

/* ---------- Steps (process, explained visually) ---------- */
.steps { list-style: none; counter-reset: step; display: grid; gap: var(--space-3); padding: 0; margin: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.steps li { counter-increment: step; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--accent-solid); color: var(--on-accent); font: 800 1.25rem var(--font-display); margin-bottom: var(--space-2); }
.steps h3 { font-size: 1.25rem; }

/* ---------- Tabs ---------- */
.tabs [role="tablist"] { display: flex; gap: var(--space-1); border-bottom: 2px solid var(--border); overflow-x: auto; }
.tabs [role="tab"] { background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: var(--space-1) var(--space-2); font: 700 1rem var(--font-body); color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.tabs [role="tab"][aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.tabs [role="tabpanel"] { padding-block: var(--space-3); }

/* ---------- Dialog (native <dialog>) ---------- */
.dialog { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text); padding: var(--space-4); width: min(100% - 2rem, 32rem); box-shadow: var(--shadow-card); }
.dialog::backdrop { background: rgba(17, 24, 39, 0.55); }
.dialog__actions { display: flex; gap: var(--space-1); justify-content: flex-end; margin-top: var(--space-3); flex-wrap: wrap; }

/* ---------- Footer ---------- */
.footer { background: var(--inverse-bg); color: var(--inverse-text); padding-block: var(--space-5); }
.footer a { color: var(--inverse-text); }
.footer__grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.footer h3 { font-size: 1rem; color: var(--inverse-text); }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-1); }

/* ---------- Logo (PNG from brand/logos/logo_main.png, copied to dist/logo.png) ---------- */
.logo { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text); text-decoration: none; font: 800 1.5rem/1 var(--font-display); }
.logo img { width: var(--logo-size, 3rem); height: var(--logo-size, 3rem); object-fit: contain; border-radius: 8px; }
.logo--sm { --logo-size: 2.25rem; font-size: 1.25rem; }
.logo--lg { --logo-size: 5rem; font-size: 2.5rem; }
.logo--stacked { flex-direction: column; text-align: center; }
.logo--icon span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.logo-tile { display: grid; place-items: center; gap: var(--space-1); padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--border); }
.logo-tile--light { background: var(--zakpy-warm-white); color: var(--zakpy-ink); }
.logo-tile--dark { background: var(--zakpy-ink); color: var(--zakpy-warm-white); }
.logo-tile--red { background: var(--zakpy-red); color: var(--zakpy-warm-white); }
.logo-tile .logo { color: inherit; }
.footer .logo { color: var(--inverse-text); }

/* ---------- Icons: <svg class="icon"><use href="zakpy-icons.svg#name"/></svg> (sprite built from brand/icons) ---------- */
.icon { width: 1.5rem; height: 1.5rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.icon--sm { width: 1.125rem; height: 1.125rem; }
.icon--lg { width: 2.5rem; height: 2.5rem; }
.icon--accent { color: var(--accent); }
.btn .icon { width: 1.25rem; height: 1.25rem; }
[dir="rtl"] .icon--flip { transform: scaleX(-1); } /* arrows that point along the reading direction */
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: var(--space-2); margin-top: var(--space-3); }
.icon-tile { display: grid; justify-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-1); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); text-align: center; }
.icon-tile .icon { width: 2rem; height: 2rem; color: var(--accent); }
.icon-tile code { font-size: 0.75rem; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); }
.mb-0 { margin-bottom: 0; } .mb-3 { margin-bottom: var(--space-3); }
.hide-mobile { } @media (max-width: 52rem) { .hide-mobile { display: none; } }
/* Entry intro: the ZAKPY logo builds itself in the dark, cube by cube, on the Hunter grid floor, then the ZAKPY window boots.
   Plays while <html> has .intro-play (set by zakpy.js on first entry, about 3 s, tap or Escape skips).
   Only transform and opacity animate. The page behind is hidden while it plays, so there is no flash.
   The voxels use the shared .vstage and .vox rules from 09-motion.css. */
.intro { display: none; }
html.intro-play { background: var(--zakpy-ink); }
html.intro-play body { overflow: hidden; }
html.intro-play body > :not(.intro) { visibility: hidden; }

html.intro-play .intro {
  position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; align-content: center; gap: var(--space-4);
  background: radial-gradient(55% 45% at 50% 40%, rgba(229, 57, 53, 0.28) 0%, rgba(229, 57, 53, 0) 70%), #0b1220;
  overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent;
  animation: intro-exit 0.45s var(--ease-io, ease-in) 2.55s forwards;
}
.intro__logo { --u: clamp(56px, 11vw, 92px); margin-top: calc(var(--u) * -0.4); animation: intro-zoom 3s var(--ease-io, ease) both; }
@keyframes intro-zoom { 0% { transform: scale(0.94); } 80% { transform: scale(1); } 100% { transform: scale(1.05); } }

/* The floor tilts in first, the cubes then drop onto it in turn, the lime core last. */
.intro .vstage__floor { --accent: #ff716b; opacity: 0; animation: intro-floor 0.7s var(--ease-out, ease-out) 0.1s forwards; }
@keyframes intro-floor { from { opacity: 0; transform: perspective(600px) rotateX(86deg); } to { opacity: 1; transform: perspective(600px) rotateX(74deg); } }
.intro .vox { opacity: 0; animation: vox-drop 640ms var(--ease-io, ease) calc(0.35s + var(--i) * 0.13s) both; }
.intro .vox.is-core { animation-delay: 1.05s; }
.intro .vstage__ring { animation: vstage-ring 1s var(--ease-out, ease-out) 1.5s forwards; }
.intro .vstage__ring--2 { border-style: dashed; border-color: var(--zakpy-coral); animation: vstage-ring 1.3s var(--ease-out, ease-out) 1.6s forwards; }

.intro__boot { position: absolute; top: 1.25rem; inset-inline-start: 1.25rem; margin: 0; font: 700 0.8125rem var(--hud-font, monospace); letter-spacing: 0.12em; color: rgba(183, 227, 106, 0.85); opacity: 0; animation: fade-in 0.2s steps(2) 0.15s forwards; }

/* The ZAKPY window: the same game window as the levels, it opens once the logo is built. */
.intro__window { position: relative; width: min(320px, calc(100vw - 32px)); padding: 0.85rem 1rem 1rem; border: 2px solid #ff716b; border-radius: 12px; background: rgba(11, 18, 32, 0.92); box-shadow: 4px -4px 0 #df4f4e; transform: scaleY(0); opacity: 0; animation: window-open 0.32s var(--ease-pop, ease-out) 1.3s forwards; }
.intro__window p { margin: 0; color: #fffcf5; }
.intro__system { font: 800 1.25rem var(--font-display); letter-spacing: 0.5em; padding-inline-start: 0.5em; }
.intro__welcome { min-height: 1.5em; margin-top: 0.25rem !important; font-size: 0.95rem; color: #b7e36a !important; }
.intro__cur { display: inline-block; width: 0.5em; height: 0.95em; margin-inline-start: 0.08em; vertical-align: -0.12em; background: #b7e36a; animation: cur-blink 0.52s steps(1) infinite; }
.intro__bar { display: flex; gap: 3px; margin-top: 0.75rem; }
.intro__bar i { flex: 1; height: 6px; background: rgba(255, 252, 245, 0.12); }
.intro__bar i::after { content: ""; display: block; height: 100%; background: #b7e36a; transform: scaleX(0); transform-origin: left; animation: seg-on 0.12s steps(2) calc(1.35s + var(--s) * 0.07s) forwards; }
.intro__skip { position: absolute; inset-inline: 0; bottom: 1.5rem; text-align: center; margin: 0; font-size: 0.8rem; color: rgba(255, 252, 245, 0.55); }
@keyframes window-open { to { transform: scaleY(1); opacity: 1; } }
@keyframes seg-on { to { transform: scaleX(1); } }
@keyframes cur-blink { 50% { opacity: 0; } }
@keyframes fade-in { to { opacity: 1; } }
@keyframes intro-exit { to { opacity: 0; visibility: hidden; transform: scale(1.03); } }

@media (prefers-reduced-motion: reduce) {
  .intro__logo, .intro .vstage__floor, .intro .vox, .intro .vstage__ring, .intro__boot, .intro__window, .intro__bar i::after, .intro__cur { animation: none !important; }
  .intro .vstage__floor, .intro .vox, .intro__boot, .intro__window { opacity: 1; transform: none; }
  .intro .vstage__floor { transform: perspective(600px) rotateX(74deg); }
  .intro__bar i::after { transform: none; }
  html.intro-play .intro { animation: intro-exit 0.3s ease-in 0.7s forwards !important; }
}
/* Loading overlay: the voxel logo on its grid floor, the four red cubes hop one after another around the plus
   (the game is "thinking"), the lime core sends a ring each loop. Built and shown by zakpy.js (window.Zakpy.loading).
   Only transform and opacity animate. The voxels use the shared .vstage and .vox rules from 09-motion.css. */
.loader {
  position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; align-content: center; gap: var(--space-3);
  background: radial-gradient(55% 45% at 50% 40%, rgba(229, 57, 53, 0.24) 0%, rgba(229, 57, 53, 0) 70%), rgba(11, 18, 32, 0.95);
  opacity: 0; visibility: hidden; transition: opacity 220ms var(--ease); cursor: progress;
}
.loader.is-on { opacity: 1; visibility: visible; }
.loader:not(.is-on) { transition: opacity 220ms var(--ease), visibility 0s 220ms; }
.loader__logo { --u: 44px; }
.loader .vstage__floor { --accent: #ff716b; }

/* One loop is 1.6 s: each red cube hops in turn, the core rings at the end of the round. */
.loader.is-on .vox:not(.is-core) { animation: vox-hop 1.6s var(--ease-io) calc(var(--i) * 0.2s) infinite; }
@keyframes vox-hop {
  0% { transform: translate3d(0, 0, 0); }
  9% { transform: translate3d(0, calc(var(--u) * -0.34), 0); }
  18% { transform: translate3d(0, 0, 0) scale(1.03, 0.94); }
  24%, 100% { transform: translate3d(0, 0, 0); }
}
.loader.is-on .vstage__ring { animation: loader-ring 1.6s var(--ease-out) 0.8s infinite; }
.loader.is-on .vstage__ring--2 { display: none; }
@keyframes loader-ring { 0% { opacity: 0.85; transform: scale(0.3); } 45% { opacity: 0; transform: scale(1.25); } 100% { opacity: 0; transform: scale(1.25); } }

.loader__window { width: min(260px, calc(100vw - 32px)); padding: 0.75rem 1rem 0.9rem; border: 2px solid #ff716b; border-radius: 12px; background: rgba(11, 18, 32, 0.92); box-shadow: 4px -4px 0 #df4f4e; }
.loader__window p { margin: 0; color: #fffcf5; }
.loader__system { font: 800 1.15rem var(--font-display); letter-spacing: 0.5em; padding-inline-start: 0.5em; }
.loader__text { font-size: 0.95rem; color: #b7e36a !important; }
.loader__cur { display: inline-block; width: 0.5em; height: 0.95em; margin-inline-start: 0.15em; vertical-align: -0.12em; background: #b7e36a; animation: loader-blink 0.52s steps(1) infinite; }
@keyframes loader-blink { 50% { opacity: 0; } }
.loader__bar { display: flex; gap: 3px; margin-top: 0.6rem; }
.loader__bar i { flex: 1; height: 6px; background: rgba(255, 252, 245, 0.12); }
.loader.is-on .loader__bar i { animation: loader-seg 1.6s steps(1) calc(var(--s) * 0.16s) infinite; }
@keyframes loader-seg { 0% { background: #b7e36a; } 18%, 100% { background: rgba(255, 252, 245, 0.12); } }
[dir="rtl"] .loader__system { letter-spacing: 0; padding: 0; }

@media (prefers-reduced-motion: reduce) {
  .loader { transition-duration: 1ms; }
  .loader.is-on .vox, .loader.is-on .vstage__ring, .loader__cur, .loader.is-on .loader__bar i { animation: none !important; }
  .loader__bar i { background: rgba(183, 227, 106, 0.6); }
}
/* Motion layer: the ZAKPY game. Everything comes from the logo: voxel cubes in an oblique projection
   (dark red front, lighter red top and side, cream outline, lime core) and from the Hunter game (grid floor,
   rings, the ZAKPY window). Calm: short moves, one thing at a time. Only transform and opacity animate.
   Content is visible without JS and under prefers-reduced-motion: things hide only while <html> has .motion. */
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-pop: cubic-bezier(0.34, 1.45, 0.64, 1);   /* small game overshoot */
  --vox-front: var(--zakpy-red-dark);
  --vox-face: #df4f4e;                               /* the lighter red of the logo's top and side faces */
  --vox-line: var(--zakpy-warm-white);
  --vox-core: var(--zakpy-lime);
  --ex: 5px;                                         /* depth of extruded keys, toward the top right like the logo */
  --hud-font: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
}

/* ---------- HUD label: small monospace line with a voxel, like a game status ---------- */
.hud { display: inline-flex; align-items: center; gap: 0.6rem; font: 700 0.8125rem/1 var(--hud-font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.hud::before { content: ""; flex: none; width: 9px; height: 9px; background: var(--vox-front); box-shadow: 3px -3px 0 var(--vox-face); margin-top: 3px; }
[dir="rtl"] .hud { letter-spacing: 0; font-family: var(--font-ar); }

/* ---------- Spawn reveal: data-zakpy-reveal (pop in), ="fade", ="type" (headings), ="pixels" (blocks); parent data-zakpy-stagger ---------- */
.motion [data-zakpy-reveal]:not(.is-in) { opacity: 0; }
.motion [data-zakpy-reveal=""]:not(.is-in), .motion [data-zakpy-reveal="up"]:not(.is-in) { transform: translateY(18px) scale(0.97); }
[data-zakpy-reveal].is-in { transition: opacity 500ms var(--ease-out) var(--d, 0ms), transform 700ms var(--ease-pop) var(--d, 0ms); }
.motion [data-zakpy-reveal].is-in { opacity: 1; transform: none; }

/* Type: the heading types in like a game dialog, with a lime block cursor. The untyped rest keeps its space, so nothing jumps. */
.motion [data-zakpy-reveal="type"]:not(.is-in) { opacity: 0; }
[data-zakpy-reveal="type"].is-in { transition: none; }
.zt-rest { opacity: 0; }
.zt-cur { position: relative; display: inline-block; width: 0; }
.zt-cur::after { content: ""; position: absolute; inset-inline-start: 0.06em; bottom: -0.1em; width: 0.5em; height: 0.92em; background: var(--vox-core); animation: zt-blink 520ms steps(1) infinite; }
@keyframes zt-blink { 50% { opacity: 0; } }

/* Pixels: the block is uncovered cell by cell, a few cells flash brand colours. */
.motion [data-zakpy-reveal="pixels"]:not(.is-in):not(.has-px) { opacity: 0; }
.motion [data-zakpy-reveal="pixels"].has-px:not(.is-in), .motion [data-zakpy-reveal="pixels"].is-in { opacity: 1; transform: none; transition: none; }
.has-px { position: relative; }
.zpx { position: absolute; inset: -1px; z-index: 3; display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-auto-rows: 1fr; pointer-events: none; }
.zpx i { background: var(--px-cover, var(--bg)); transition: opacity 260ms steps(3) var(--pd, 0ms); }
.zpx i.c-red { background: var(--vox-front); } .zpx i.c-lime { background: var(--vox-core); } .zpx i.c-face { background: var(--vox-face); }
.is-in > .zpx i { opacity: 0; }

/* ---------- Voxels: cubes drawn like the logo (SVG made by js/motion.js) ---------- */
.vox { position: absolute; width: calc(var(--u) * 1.47); height: calc(var(--u) * 1.47); left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u) - var(--u) * 0.47); overflow: visible; transform: translate3d(0, var(--lift, 0px), 0); transition: transform 380ms var(--ease-pop); }
.vox .f { fill: var(--vox-front); } .vox .t, .vox .s { fill: var(--vox-face); } .vox.is-core .f { fill: var(--vox-core); }
.vox polygon { stroke: var(--vox-line); stroke-width: 0.075; stroke-linejoin: round; }
.vox.is-core .t, .vox.is-core .s { fill: #8fc24b; } /* a darker lime for the core's top and side, never olive */
.motion .vox.is-wait { opacity: 0; }
.vox.is-drop { animation: vox-drop 640ms var(--ease-io) var(--vd, 0ms) both; }
@keyframes vox-drop {
  0% { transform: translate3d(0, calc(var(--u) * -3.5), 0); opacity: 0; }
  12% { opacity: 1; }
  70% { transform: translate3d(0, 0, 0) scale(1.04, 0.93); }
  86% { transform: translate3d(0, calc(var(--u) * -0.1), 0) scale(0.98, 1.02); }
  100% { transform: translate3d(0, 0, 0); opacity: 1; }
}

/* The stage: the logo built from five voxels over a perspective grid floor, like the Hunter intro. */
.vstage { --u: clamp(48px, 7vw, 88px); position: relative; width: calc(var(--u) * 3.47); height: calc(var(--u) * 3.47); }
.vstage__cubes { position: absolute; inset: calc(var(--u) * 0.47) 0 0 0; }
.vstage__floor {
  position: absolute; left: 50%; top: 88%; width: calc(var(--u) * 9); height: calc(var(--u) * 5); margin-inline-start: calc(var(--u) * -4.5);
  background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--accent) 32%, transparent) 0 1px, transparent 1px calc(var(--u) / 2)), repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 32%, transparent) 0 1px, transparent 1px calc(var(--u) / 2));
  -webkit-mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 62%); mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 62%);
  transform-origin: 50% 0; transform: perspective(600px) rotateX(74deg); pointer-events: none;
}
.vstage__ring { position: absolute; left: 50%; top: 54%; width: calc(var(--u) * 3); height: calc(var(--u) * 3); margin: calc(var(--u) * -1.5) 0 0 calc(var(--u) * -1.5); border-radius: 50%; border: 2px solid var(--vox-core); opacity: 0; pointer-events: none; }
.vstage__ring.is-on { animation: vstage-ring 900ms var(--ease-out) forwards; }
@keyframes vstage-ring { 0% { opacity: 0.9; transform: scale(0.3); } 100% { opacity: 0; transform: scale(1.35); } }
.vstage .vox { cursor: pointer; }
.vstage.is-idle .vox:hover { --lift: -6px; }
.vstage.is-idle .vstage__ring { animation: vstage-pulse 5s var(--ease-out) 1.2s infinite; }
@keyframes vstage-pulse { 0% { opacity: 0.7; transform: scale(0.3); } 36% { opacity: 0; transform: scale(1.3); } 100% { opacity: 0; transform: scale(1.3); } }

/* The grid floor reaches past the stage on purpose; the section around it clips it so the page never gets wider than the screen. */
.hero--game, section:has(> .container > .vstage), section:has(.vstage) { overflow-x: clip; }

/* Game hero layout: text and the voxel stage side by side, stage on top on small screens. */
.hero--game > .container { display: grid; gap: var(--space-5); align-items: center; grid-template-columns: minmax(0, 1fr) auto; }
.hero--game .vstage { justify-self: center; margin: var(--space-2) var(--space-4) calc(var(--u) * 0.9); }
@media (max-width: 52rem) { .hero--game > .container { grid-template-columns: 1fr; } .hero--game .vstage { order: -1; --u: 46px; justify-self: center; margin: 0 0 calc(var(--u) * 0.8); } }

/* ---------- Levels: a game window pinned in the middle of the screen. Level, tint, XP bar and voxel stack change as you scroll.
   Markup: section.levels[data-zakpy-levels] > .levels__stage > .levels__win > article.level[data-tint] (x n)
   On every screen size, phones included. Without JS, under reduced motion or on very short screens it is a plain stack of tinted cards. ---------- */
.level, .levels__win { --tint: var(--bg-alt); }
.levels__win { display: grid; gap: var(--space-3); }
.level { position: relative; padding: var(--space-5) var(--space-4); background: var(--tint); border: 2px solid var(--border); border-radius: var(--radius-sm); }
.levels [data-tint="red"] { --tint: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.levels [data-tint="lime"] { --tint: color-mix(in srgb, var(--zakpy-lime) 20%, var(--surface)); }
.levels [data-tint="mist"] { --tint: var(--bg-alt); }
:root[data-theme="dark"] .levels [data-tint="lime"] { --tint: color-mix(in srgb, var(--zakpy-lime) 7%, var(--surface)); }
.level__k { display: flex; margin-bottom: var(--space-2); }
.level p { max-width: 32rem; }
.levels__bar, .levels__xp, .levels__stack, .levels__flash { display: none; }
.levels__body { display: contents; }

.levels.is-pinned { --hold: 75vh; height: calc(100vh + (var(--n) - 1) * 85vh + var(--hold)); } /* --hold: extra scroll on the last level, time to read it */
.levels.is-pinned .levels__stage { position: sticky; top: 0; height: 100vh; height: 100svh; padding-top: 4.5rem; display: grid; place-items: center; } /* padding: the sticky navbar is 4.5rem tall, the window centres below it */
.levels.is-pinned .levels__win {
  position: relative; width: min(100% - 2 * var(--space-4), 46rem); min-height: min(30rem, 76vh); gap: 0; grid-template-rows: auto 1fr auto;
  background: var(--tint); border: 2px solid var(--accent); border-radius: 12px;
  box-shadow: var(--ex) calc(var(--ex) * -1) 0 0 var(--vox-face); transition: background-color 700ms var(--ease-io);
}
.levels.is-pinned .levels__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 0.75rem var(--space-3); border-bottom: 2px solid var(--accent); border-radius: 10px 10px 0 0; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); font: 800 0.875rem/1 var(--hud-font); letter-spacing: 0.3em; color: var(--text); }
.levels__lv { letter-spacing: 0.12em; color: var(--text-muted); }
[dir="rtl"] .levels__bar, [dir="rtl"] .levels__lv { letter-spacing: 0; }
.levels.is-pinned .levels__body { position: relative; display: grid; grid-template-areas: "c"; align-items: center; overflow: hidden; }
.levels.is-pinned .level { grid-area: c; background: transparent; border: 0; padding: var(--space-5) calc(var(--space-6) + 24px) var(--space-5) var(--space-4); opacity: 0; transform: translateY(14px) scale(0.98); transition: opacity 360ms var(--ease-io), transform 600ms var(--ease-pop); pointer-events: none; }
.levels.is-pinned .level.is-active { opacity: 1; transform: none; transition-delay: 220ms; pointer-events: auto; }
.levels.is-pinned .levels__xp { display: flex; gap: 4px; padding: 0 var(--space-3) var(--space-3); }
.levels__xp i { flex: 1; height: 10px; background: color-mix(in srgb, var(--text) 12%, transparent); transition: background-color 200ms steps(2); }
.levels__xp i.is-on { background: var(--vox-core); }
.levels.is-pinned .levels__stack { --u: 30px; display: block; position: absolute; inset-inline-end: var(--space-4); bottom: var(--space-3); width: calc(var(--u) * 1.47); height: calc(var(--u) * (var(--n) + 0.47)); }
.levels.is-pinned .levels__flash { display: block; position: absolute; top: 0.45rem; left: 50%; z-index: 4; padding: 0.35rem 0.7rem; border-radius: 6px; font: 800 0.8125rem/1 var(--hud-font); letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; color: var(--zakpy-ink); background: var(--vox-core); box-shadow: 3px -3px 0 color-mix(in srgb, var(--vox-core) 55%, var(--zakpy-ink)); opacity: 0; transform: translate(-50%, 6px) scale(0.8); pointer-events: none; }
[dir="rtl"] .levels__flash { letter-spacing: 0; font-family: var(--font-ar); }
.levels__flash.is-on { animation: lv-flash 1300ms var(--ease-pop) forwards; }
/* Phones: the same game window, tighter. */
@media (max-width: 40rem) {
  .levels.is-pinned .levels__win { width: calc(100% - 2 * var(--space-2)); min-height: min(27rem, 68svh); --ex: 4px; }
  .levels.is-pinned .levels__bar { padding: 0.6rem var(--space-2); font-size: 0.75rem; letter-spacing: 0.2em; }
  .levels.is-pinned .level { padding: var(--space-4) calc(var(--space-2) + 44px) var(--space-4) var(--space-3); }
  .levels.is-pinned .level h2 { font-size: 1.625rem; }
  .levels.is-pinned .level .lead { font-size: 1.0625rem; }
  .levels.is-pinned .levels__stack { --u: 22px; inset-inline-end: var(--space-2); bottom: var(--space-2); }
  .levels.is-pinned .levels__xp { gap: 3px; padding: 0 var(--space-2) var(--space-2); }
  .levels__xp i { height: 8px; }
}
@keyframes lv-flash { 0% { opacity: 0; transform: translate(-50%, 6px) scale(0.8); } 18% { opacity: 1; transform: translate(-50%, 0) scale(1); } 75% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -4px) scale(0.96); } }

/* ---------- Scroll XP bar: html[data-zakpy-xp] adds a segmented bar at the top that fills as you read ---------- */
.xpbar { position: fixed; inset-inline: 0; top: 0; z-index: 60; height: 4px; display: flex; gap: 2px; pointer-events: none; }
.xpbar i { flex: 1; background: var(--vox-core); transform: scaleY(0); transform-origin: top; transition: transform 160ms steps(2); }
.xpbar i.is-on { transform: scaleY(1); }

/* ---------- Header: stays sticky on every screen (owner decision), soft shadow after scrolling ---------- */
.nav { transition: background-color 300ms var(--ease), box-shadow 300ms var(--ease); }
.nav.is-scrolled { background: color-mix(in srgb, var(--bg) 97%, transparent); box-shadow: 0 10px 30px rgba(17, 24, 39, 0.07); }
:root[data-theme="dark"] .nav.is-scrolled { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }

/* Desktop nav: a small voxel pops in on hover and marks the current page. */
@media (min-width: 52.0625rem) {
  .nav__links > li > a { display: inline-flex; align-items: center; border-bottom-color: transparent !important; }
  .nav__links > li > a::before { content: ""; width: 8px; height: 8px; margin-inline-end: 9px; background: var(--vox-front); box-shadow: 3px -3px 0 var(--vox-face); transform: scale(0); transition: transform 320ms var(--ease-pop); }
  .nav__links > li > a:hover::before, .nav__links > li > a:focus-visible::before { transform: scale(1); }
  .nav__links > li > a[aria-current="page"]::before { transform: scale(1); background: var(--vox-core); }
  .nav__group-toggle { border-bottom-color: transparent !important; }
}

/* ---------- Buttons are keys: an extruded edge toward the top right, like the logo; they press into it ---------- */
.btn { --btn-edge: var(--vox-face); box-shadow: var(--ex) calc(var(--ex) * -1) 0 0 var(--btn-edge); transition: background var(--motion) var(--ease), color var(--motion) var(--ease), border-color var(--motion) var(--ease), transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out); }
.btn:hover { transform: translate(2px, -2px); box-shadow: calc(var(--ex) - 2px) calc((var(--ex) - 2px) * -1) 0 0 var(--btn-edge); }
.btn:active { transform: translate(var(--ex), calc(var(--ex) * -1)); box-shadow: 0 0 0 0 var(--btn-edge); }
.btn--secondary { --btn-edge: color-mix(in srgb, var(--text) 30%, transparent); }
.btn--sm { --ex: 3px; }
.btn[disabled], .btn[aria-disabled="true"] { box-shadow: none; }
:root[data-theme="dark"] .btn { --btn-edge: color-mix(in srgb, var(--zakpy-coral) 45%, var(--zakpy-ink)); }
:root[data-theme="dark"] .btn--secondary { --btn-edge: color-mix(in srgb, var(--text) 25%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .vox, .vox.is-drop, .vstage__ring, .vstage.is-idle .vstage__ring, .levels__flash, .zt-cur::after { animation: none !important; transition: none !important; }
  .nav, .zpx i, .xpbar i, .levels__xp i { transition: none !important; }
  [data-zakpy-reveal] { transition: none !important; transform: none !important; opacity: 1 !important; }
  .zpx { display: none; }
  .btn:hover, .btn:active { transform: none; }
}