/* site.css - GENERATED by tools/build.py from src/css/. */
/* ===== fonts.css ===== */
/* fonts.css - self-hosted variable fonts (SIL Open Font License, see assets/fonts/LICENSE-*.txt). */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/inter-latin-opsz-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Variable";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/inter-latin-opsz-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono Variable";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metric-matched fallback so text does not jump when Inter arrives. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto");
  ascent-override: 90.49%;
  descent-override: 22.56%;
  line-gap-override: 0%;
  size-adjust: 107.06%;
}

/* ===== palette.css ===== */
/* palette.css - GENERATED by tools/palette.py. Edit the OKLCH table there, then rebuild. */
/* Colour pipeline (see the flowchart): theme -> HEX fallback -> OKLCH -> Display-P3 + OKLCH (HDR mode). */

/* Stage 0 - theme: colour-scheme lets light-dark() and form controls follow the site theme. */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
}
:root[data-theme="light"] {
  color-scheme: light;
}

/* Stage 1a - HEX / sRGB fallback (gamut-mapped), for browsers without OKLCH. */
:root, :root[data-theme="dark"] {
  --bg: #0e1411;
  --bg-deep: #090e0c;
  --surface: #161d1a;
  --surface-2: #1d2621;
  --surface-3: #26312c;
  --line: #333d38;
  --line-strong: #4c5b54;
  --text: #ebf2ef;
  --text-2: #bcc7c2;
  --text-3: #97a39d;
  --accent: #63e4a1;
  --accent-strong: #3acf89;
  --on-accent: #04140c;
  --trace: #564430;
  --trace-pad: #7a5d3d;
  --shadow: #000301;
  --glow-core: #ffffff;
  --edge-hi: #596760;
  --edge-lo: #18221d;
  --c-emerald: #6edea2;
  --c-emerald-deep: #00ae6b;
  --glow-emerald: #41e99b;
  --c-cyan: #2fdbf7;
  --c-cyan-deep: #00a7c2;
  --glow-cyan: #00e2ff;
  --c-blue: #96c6ff;
  --c-blue-deep: #4f91f2;
  --glow-blue: #9cc9ff;
  --c-violet: #d1b0ff;
  --c-violet-deep: #a278e4;
  --glow-violet: #d4b4ff;
  --c-rose: #ff9ec7;
  --c-rose-deep: #db6295;
  --glow-rose: #ffa2ca;
  --c-amber: #f6b755;
  --c-amber-deep: #c88100;
  --glow-amber: #ffb500;
  --c-emerald-soft: rgb(110 222 162 / 0.14);
  --c-emerald-line: rgb(110 222 162 / 0.42);
  --c-cyan-soft: rgb(47 219 247 / 0.14);
  --c-cyan-line: rgb(47 219 247 / 0.42);
  --c-blue-soft: rgb(150 198 255 / 0.14);
  --c-blue-line: rgb(150 198 255 / 0.42);
  --c-violet-soft: rgb(209 176 255 / 0.14);
  --c-violet-line: rgb(209 176 255 / 0.42);
  --c-rose-soft: rgb(255 158 199 / 0.14);
  --c-rose-line: rgb(255 158 199 / 0.42);
  --c-amber-soft: rgb(246 183 85 / 0.14);
  --c-amber-line: rgb(246 183 85 / 0.42);
  --accent-soft: rgb(99 228 161 / 0.14);
  --shadow-1: rgb(0 3 1 / 0.1);
  --shadow-2: rgb(0 3 1 / 0.16);
  --shadow-3: rgb(0 3 1 / 0.24);
}
:root[data-theme="light"] {
  --bg: #f6faf8;
  --bg-deep: #ecf3f0;
  --surface: #fdfffe;
  --surface-2: #f0f6f3;
  --surface-3: #e5ede9;
  --line: #d5dfda;
  --line-strong: #b5c1bb;
  --text: #14201b;
  --text-2: #3d4a44;
  --text-3: #596760;
  --accent: #008048;
  --accent-strong: #007a43;
  --on-accent: #f9fdfb;
  --trace: #dac7b3;
  --trace-pad: #c9ab8c;
  --shadow: #24382f;
  --glow-core: #ffffff;
  --edge-hi: #f3f8f6;
  --edge-lo: #b6c1bb;
  --c-emerald: #007e47;
  --c-emerald-deep: #006031;
  --glow-emerald: #00bf70;
  --c-cyan: #00788e;
  --c-cyan-deep: #00596a;
  --glow-cyan: #00b4d1;
  --c-blue: #346cbd;
  --c-blue-deep: #104a97;
  --glow-blue: #509dff;
  --c-violet: #7b57b1;
  --c-violet-deep: #5a358c;
  --glow-violet: #b17eff;
  --c-rose: #a94470;
  --c-rose-deep: #83204f;
  --glow-rose: #f364a2;
  --c-amber: #986000;
  --c-amber-deep: #6e4200;
  --glow-amber: #d88c00;
  --c-emerald-soft: rgb(0 126 71 / 0.14);
  --c-emerald-line: rgb(0 126 71 / 0.42);
  --c-cyan-soft: rgb(0 120 142 / 0.14);
  --c-cyan-line: rgb(0 120 142 / 0.42);
  --c-blue-soft: rgb(52 108 189 / 0.14);
  --c-blue-line: rgb(52 108 189 / 0.42);
  --c-violet-soft: rgb(123 87 177 / 0.14);
  --c-violet-line: rgb(123 87 177 / 0.42);
  --c-rose-soft: rgb(169 68 112 / 0.14);
  --c-rose-line: rgb(169 68 112 / 0.42);
  --c-amber-soft: rgb(152 96 0 / 0.14);
  --c-amber-line: rgb(152 96 0 / 0.42);
  --accent-soft: rgb(0 128 72 / 0.14);
  --shadow-1: rgb(36 56 47 / 0.1);
  --shadow-2: rgb(36 56 47 / 0.16);
  --shadow-3: rgb(36 56 47 / 0.24);
}

/* Stage 1b - OKLCH: the standard palette (inside sRGB). */
@supports (color: oklch(0 0 0)) {
  :root, :root[data-theme="dark"] {
    --bg: oklch(0.185 0.011 165);
    --bg-deep: oklch(0.158 0.01 165);
    --surface: oklch(0.222 0.013 165);
    --surface-2: oklch(0.257 0.015 165);
    --surface-3: oklch(0.3 0.017 165);
    --line: oklch(0.35 0.017 165);
    --line-strong: oklch(0.455 0.021 165);
    --text: oklch(0.955 0.008 165);
    --text-2: oklch(0.82 0.014 165);
    --text-3: oklch(0.705 0.016 165);
    --accent: oklch(0.83 0.15 158);
    --accent-strong: oklch(0.76 0.16 158);
    --on-accent: oklch(0.175 0.03 160);
    --trace: oklch(0.4 0.04 68);
    --trace-pad: oklch(0.5 0.06 68);
    --shadow: oklch(0.0812 0.0179 161.76);
    --glow-core: oklch(1 0 0);
    --edge-hi: oklch(0.5 0.02 165);
    --edge-lo: oklch(0.24 0.016 165);
    --c-emerald: oklch(0.82 0.135 158);
    --c-emerald-deep: oklch(0.662 0.1568 157.28);
    --glow-emerald: oklch(0.83 0.175 158);
    --c-cyan: oklch(0.82 0.135 212);
    --c-cyan-deep: oklch(0.6689 0.1181 214.84);
    --glow-cyan: oklch(0.8366 0.1453 211.22);
    --c-blue: oklch(0.8141 0.0954 253.24);
    --c-blue-deep: oklch(0.66 0.16 258);
    --glow-blue: oklch(0.8242 0.09 252.9);
    --c-violet: oklch(0.814 0.1142 303.27);
    --c-violet-deep: oklch(0.66 0.16 300);
    --glow-violet: oklch(0.8241 0.1077 303.4);
    --c-rose: oklch(0.8087 0.1249 353.38);
    --c-rose-deep: oklch(0.66 0.16 356);
    --glow-rose: oklch(0.8162 0.1198 352.68);
    --c-amber: oklch(0.82 0.135 76);
    --c-amber-deep: oklch(0.6619 0.1423 71.26);
    --glow-amber: oklch(0.821 0.1707 78.82);
    --c-emerald-soft: oklch(0.82 0.135 158 / 0.14);
    --c-emerald-line: oklch(0.82 0.135 158 / 0.42);
    --c-cyan-soft: oklch(0.82 0.135 212 / 0.14);
    --c-cyan-line: oklch(0.82 0.135 212 / 0.42);
    --c-blue-soft: oklch(0.8141 0.0954 253.24 / 0.14);
    --c-blue-line: oklch(0.8141 0.0954 253.24 / 0.42);
    --c-violet-soft: oklch(0.814 0.1142 303.27 / 0.14);
    --c-violet-line: oklch(0.814 0.1142 303.27 / 0.42);
    --c-rose-soft: oklch(0.8087 0.1249 353.38 / 0.14);
    --c-rose-line: oklch(0.8087 0.1249 353.38 / 0.42);
    --c-amber-soft: oklch(0.82 0.135 76 / 0.14);
    --c-amber-line: oklch(0.82 0.135 76 / 0.42);
    --accent-soft: oklch(0.83 0.15 158 / 0.14);
    --shadow-1: oklch(0.0812 0.0179 161.76 / 0.1);
    --shadow-2: oklch(0.0812 0.0179 161.76 / 0.16);
    --shadow-3: oklch(0.0812 0.0179 161.76 / 0.24);
  }
  :root[data-theme="light"] {
    --bg: oklch(0.982 0.005 165);
    --bg-deep: oklch(0.958 0.008 165);
    --surface: oklch(0.998 0.002 165);
    --surface-2: oklch(0.968 0.007 165);
    --surface-3: oklch(0.94 0.01 165);
    --line: oklch(0.895 0.012 165);
    --line-strong: oklch(0.8 0.016 165);
    --text: oklch(0.23 0.02 165);
    --text-2: oklch(0.395 0.02 165);
    --text-3: oklch(0.5 0.02 165);
    --accent: oklch(0.5264 0.1297 155.18);
    --accent-strong: oklch(0.5079 0.1271 154.41);
    --on-accent: oklch(0.99 0.005 160);
    --trace: oklch(0.84 0.035 68);
    --trace-pad: oklch(0.76 0.055 68);
    --shadow: oklch(0.32 0.03 165);
    --glow-core: oklch(1 0 0);
    --edge-hi: oklch(0.975 0.006 165);
    --edge-lo: oklch(0.8 0.014 165);
    --c-emerald: oklch(0.5217 0.129 154.99);
    --c-emerald-deep: oklch(0.4291 0.1099 153.24);
    --glow-emerald: oklch(0.7074 0.173 155.55);
    --c-cyan: oklch(0.5289 0.0937 215.6);
    --c-cyan-deep: oklch(0.4288 0.0763 216.44);
    --glow-cyan: oklch(0.7089 0.125 214.68);
    --c-blue: oklch(0.535 0.14 258);
    --c-blue-deep: oklch(0.42 0.14 258);
    --glow-blue: oklch(0.6921 0.1641 255.74);
    --c-violet: oklch(0.535 0.14 300);
    --c-violet-deep: oklch(0.42 0.14 300);
    --glow-violet: oklch(0.7 0.185 300);
    --c-rose: oklch(0.535 0.14 356);
    --c-rose-deep: oklch(0.42 0.14 356);
    --glow-rose: oklch(0.7 0.185 356);
    --c-amber: oklch(0.5368 0.1162 70.19);
    --c-amber-deep: oklch(0.4218 0.0922 68.63);
    --glow-amber: oklch(0.7019 0.1507 71.53);
    --c-emerald-soft: oklch(0.5217 0.129 154.99 / 0.14);
    --c-emerald-line: oklch(0.5217 0.129 154.99 / 0.42);
    --c-cyan-soft: oklch(0.5289 0.0937 215.6 / 0.14);
    --c-cyan-line: oklch(0.5289 0.0937 215.6 / 0.42);
    --c-blue-soft: oklch(0.535 0.14 258 / 0.14);
    --c-blue-line: oklch(0.535 0.14 258 / 0.42);
    --c-violet-soft: oklch(0.535 0.14 300 / 0.14);
    --c-violet-line: oklch(0.535 0.14 300 / 0.42);
    --c-rose-soft: oklch(0.535 0.14 356 / 0.14);
    --c-rose-line: oklch(0.535 0.14 356 / 0.42);
    --c-amber-soft: oklch(0.5368 0.1162 70.19 / 0.14);
    --c-amber-line: oklch(0.5368 0.1162 70.19 / 0.42);
    --accent-soft: oklch(0.5264 0.1297 155.18 / 0.14);
    --shadow-1: oklch(0.32 0.03 165 / 0.1);
    --shadow-2: oklch(0.32 0.03 165 / 0.16);
    --shadow-3: oklch(0.32 0.03 165 / 0.24);
  }
}

/* Stage 1c - HDR mode on a wide-gamut screen: first a Display-P3 layer ... */
@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root[data-hdr="on"]:not([data-theme="light"]) {
      --bg: color(display-p3 0.02178 0.05346 0.03629);
      --bg-deep: color(display-p3 0.00884 0.02769 0.01707);
      --surface: color(display-p3 0.0504 0.09578 0.07306);
      --surface-2: color(display-p3 0.08105 0.13418 0.10733);
      --surface-3: color(display-p3 0.11873 0.18007 0.1488);
      --line: color(display-p3 0.16841 0.2351 0.20065);
      --line-strong: color(display-p3 0.25133 0.33169 0.28981);
      --text: color(display-p3 0.95131 0.97516 0.96191);
      --text-2: color(display-p3 0.73232 0.78594 0.75651);
      --text-3: color(display-p3 0.58669 0.6459 0.61362);
      --accent: color(display-p3 0.39795 0.91565 0.60608);
      --accent-strong: color(display-p3 0.24508 0.83117 0.50878);
      --on-accent: color(display-p3 0.00772 0.08598 0.03907);
      --trace: color(display-p3 0.34423 0.26217 0.16234);
      --trace-pad: color(display-p3 0.48844 0.35754 0.19459);
      --shadow: color(display-p3 0.00004 0.00244 0.00109);
      --glow-core: color(display-p3 1 1 1);
      --edge-hi: color(display-p3 0.30457 0.39412 0.34729);
      --edge-lo: color(display-p3 0.03517 0.09333 0.06544);
      --c-emerald: color(display-p3 0.43985 0.89076 0.61254);
      --c-emerald-deep: color(display-p3 0.08593 0.69764 0.39997);
      --glow-emerald: color(display-p3 0.13268 0.94732 0.5509);
      --c-cyan: color(display-p3 0.28555 0.85839 0.99317);
      --c-cyan-deep: color(display-p3 0.08433 0.64747 0.76387);
      --glow-cyan: color(display-p3 0.35067 0.86726 0.99354);
      --c-blue: color(display-p3 0.64977 0.77265 0.9932);
      --c-blue-deep: color(display-p3 0.32745 0.55352 0.98742);
      --glow-blue: color(display-p3 0.66932 0.78557 0.99357);
      --c-violet: color(display-p3 0.79459 0.70756 0.99322);
      --c-violet-deep: color(display-p3 0.6266 0.42317 0.97064);
      --glow-violet: color(display-p3 0.80551 0.72433 0.99359);
      --c-rose: color(display-p3 0.99375 0.62858 0.7756);
      --c-rose-deep: color(display-p3 0.86981 0.32942 0.58267);
      --glow-rose: color(display-p3 0.99405 0.65159 0.78774);
      --c-amber: color(display-p3 0.979 0.70601 0.18905);
      --c-amber-deep: color(display-p3 0.74141 0.52119 0.06773);
      --glow-amber: color(display-p3 0.99381 0.7181 0.19868);
    }
    :root[data-hdr="on"][data-theme="light"] {
      --bg: color(display-p3 0.96312 0.98303 0.97195);
      --bg-deep: color(display-p3 0.92383 0.95554 0.93796);
      --surface: color(display-p3 1 1 1);
      --surface-2: color(display-p3 0.92636 0.96208 0.9423);
      --surface-3: color(display-p3 0.87168 0.92294 0.89471);
      --line: color(display-p3 0.80504 0.86351 0.83142);
      --line-strong: color(display-p3 0.70224 0.76325 0.72989);
      --text: color(display-p3 0.04283 0.10842 0.07718);
      --text-2: color(display-p3 0.23028 0.29567 0.2613);
      --text-3: color(display-p3 0.3416 0.41036 0.37369);
      --accent: color(display-p3 0.04961 0.50368 0.28272);
      --accent-strong: color(display-p3 0.04461 0.47695 0.26656);
      --on-accent: color(display-p3 0.9746 0.9934 0.98071);
      --trace: color(display-p3 0.86276 0.77735 0.67615);
      --trace-pad: color(display-p3 0.79796 0.66635 0.50905);
      --shadow: color(display-p3 0.02844 0.19752 0.12986);
      --glow-core: color(display-p3 1 1 1);
      --edge-hi: color(display-p3 0.95131 0.97516 0.96191);
      --edge-lo: color(display-p3 0.70749 0.7608 0.73156);
      --c-emerald: color(display-p3 0.04836 0.49697 0.27866);
      --c-emerald-deep: color(display-p3 0.02656 0.37278 0.20359);
      --glow-emerald: color(display-p3 0.09669 0.75508 0.43469);
      --c-cyan: color(display-p3 0.04842 0.46644 0.55284);
      --c-cyan-deep: color(display-p3 0.02584 0.34426 0.41042);
      --glow-cyan: color(display-p3 0.09496 0.70108 0.82637);
      --c-blue: color(display-p3 0.18336 0.39868 0.81671);
      --c-blue-deep: color(display-p3 0.02676 0.25641 0.66687);
      --glow-blue: color(display-p3 0.41106 0.61133 0.98887);
      --c-violet: color(display-p3 0.47327 0.29738 0.75758);
      --c-violet-deep: color(display-p3 0.34708 0.14921 0.61063);
      --glow-violet: color(display-p3 0.66885 0.49376 0.98891);
      --c-rose: color(display-p3 0.67185 0.21564 0.43602);
      --c-rose-deep: color(display-p3 0.5219 0.03141 0.30927);
      --glow-rose: color(display-p3 0.99027 0.26836 0.63313);
      --c-amber: color(display-p3 0.55756 0.38818 0.03939);
      --c-amber-deep: color(display-p3 0.39766 0.27249 0.01906);
      --glow-amber: color(display-p3 0.8022 0.56517 0.07709);
    }
  }
}
/* ... then an OKLCH layer after it (same lightness and hue, more chroma, inside P3). */
@supports (color: oklch(0 0 0)) and (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root[data-hdr="on"]:not([data-theme="light"]) {
      --bg: oklch(0.15 0.0208 165);
      --bg-deep: oklch(0.118 0.0192 165);
      --surface: oklch(0.196 0.0256 165);
      --surface-2: oklch(0.236 0.0288 165);
      --surface-3: oklch(0.282 0.032 165);
      --line: oklch(0.336 0.0336 165);
      --line-strong: oklch(0.425 0.0384 165);
      --text: oklch(0.975 0.0096 165);
      --text-2: oklch(0.82 0.0224 165);
      --text-3: oklch(0.705 0.0256 165);
      --accent: oklch(0.83 0.2025 158);
      --accent-strong: oklch(0.76 0.216 158);
      --on-accent: oklch(0.175 0.048 160);
      --trace: oklch(0.4 0.056 68);
      --trace-pad: oklch(0.5 0.084 68);
      --shadow: oklch(0.05 0.014 165);
      --glow-core: oklch(1 0 0);
      --edge-hi: oklch(0.48 0.0416 165);
      --edge-lo: oklch(0.19 0.032 165);
      --c-emerald: oklch(0.82 0.1823 158);
      --c-emerald-deep: oklch(0.66 0.2067 158);
      --glow-emerald: oklch(0.83 0.2599 158);
      --c-cyan: oklch(0.82 0.1651 212);
      --c-cyan-deep: oklch(0.66 0.1485 212);
      --glow-cyan: oklch(0.83 0.1555 212);
      --c-blue: oklch(0.82 0.0959 258);
      --c-blue-deep: oklch(0.66 0.1906 258);
      --glow-blue: oklch(0.83 0.0903 258);
      --c-violet: oklch(0.82 0.113 300);
      --c-violet-deep: oklch(0.66 0.216 300);
      --glow-violet: oklch(0.83 0.1063 300);
      --c-rose: oklch(0.82 0.1441 356);
      --c-rose-deep: oklch(0.66 0.216 356);
      --glow-rose: oklch(0.83 0.1348 356);
      --c-amber: oklch(0.82 0.1823 76);
      --c-amber-deep: oklch(0.66 0.1546 76);
      --glow-amber: oklch(0.83 0.1836 76);
    }
    :root[data-hdr="on"][data-theme="light"] {
      --bg: oklch(0.982 0.008 165);
      --bg-deep: oklch(0.958 0.0128 165);
      --surface: oklch(1 0 0);
      --surface-2: oklch(0.962 0.0144 165);
      --surface-3: oklch(0.928 0.0208 165);
      --line: oklch(0.88 0.024 165);
      --line-strong: oklch(0.8 0.0256 165);
      --text: oklch(0.205 0.0352 165);
      --text-2: oklch(0.395 0.032 165);
      --text-3: oklch(0.5 0.032 165);
      --accent: oklch(0.52 0.1628 158);
      --accent-strong: oklch(0.5 0.1566 158);
      --on-accent: oklch(0.99 0.008 160);
      --trace: oklch(0.84 0.049 68);
      --trace-pad: oklch(0.76 0.077 68);
      --shadow: oklch(0.28 0.072 165);
      --glow-core: oklch(1 0 0);
      --edge-hi: oklch(0.975 0.0096 165);
      --edge-lo: oklch(0.8 0.0224 165);
      --c-emerald: oklch(0.515 0.1613 158);
      --c-emerald-deep: oklch(0.42 0.1315 158);
      --glow-emerald: oklch(0.7 0.2192 158);
      --c-cyan: oklch(0.52 0.117 212);
      --c-cyan-deep: oklch(0.42 0.0945 212);
      --glow-cyan: oklch(0.7 0.1575 212);
      --c-blue: oklch(0.535 0.189 258);
      --c-blue-deep: oklch(0.42 0.189 258);
      --glow-blue: oklch(0.7 0.1661 258);
      --c-violet: oklch(0.535 0.189 300);
      --c-violet-deep: oklch(0.42 0.189 300);
      --glow-violet: oklch(0.7 0.1962 300);
      --c-rose: oklch(0.535 0.189 356);
      --c-rose-deep: oklch(0.42 0.1875 356);
      --glow-rose: oklch(0.7 0.2713 356);
      --c-amber: oklch(0.535 0.1253 76);
      --c-amber-deep: oklch(0.42 0.0984 76);
      --glow-amber: oklch(0.7 0.164 76);
    }
  }
}

/* ===== base.css ===== */
/* base.css - reset, type, motion control, and Stage 2 of the colour pipeline
   (CSS Color 4/5 functions: relative colours, color-mix(), light-dark(), OKLCH gradients),
   each behind @supports with a fallback (flowchart Stage 3: "Is the CSS supported?"). */

:root {
  --font-sans: "Inter Variable", "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Consolas, "Roboto Mono", monospace;

  --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --step--1: clamp(0.84rem, 0.81rem + 0.14vw, 0.92rem);
  --step-0: clamp(1rem, 0.97rem + 0.16vw, 1.075rem);
  --step-1: clamp(1.14rem, 1.08rem + 0.30vw, 1.30rem);
  --step-2: clamp(1.32rem, 1.20rem + 0.60vw, 1.70rem);
  --step-3: clamp(1.70rem, 1.42rem + 1.40vw, 2.55rem);
  --step-4: clamp(2.55rem, 1.85rem + 3.50vw, 4.60rem);

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --page-max: 74rem;
  --radius-s: 10px;
  --radius: 16px;
  --radius-l: 24px;
  --topbar-h: 4rem;

  --ease: cubic-bezier(.45, 0, .2, 1);
  --ease-out: cubic-bezier(.2, .75, .2, 1);

  --elev-1: 0 1px 1px var(--shadow-1), 0 2px 6px var(--shadow-1);
  --elev-2: 0 1px 1px var(--shadow-1), 0 6px 14px var(--shadow-2), 0 18px 38px var(--shadow-1);
  --elev-3: 0 2px 2px var(--shadow-1), 0 10px 22px var(--shadow-2), 0 28px 60px var(--shadow-3);

  --focus: var(--accent);
  --glass: var(--bg);
  --hover-mix: var(--accent-strong);
}

/* ---------- Stage 2: colour manipulation (CSS Color 5), with fallbacks above ---------- */
@supports (color: oklch(from red l c h)) {
  /* Relative colours derive tints from whatever the palette layer currently is (incl. HDR P3). */
  :root[data-theme] {
    --accent-soft: oklch(from var(--accent) l c h / 0.14);
    --c-emerald-soft: oklch(from var(--c-emerald) l c h / 0.14);
    --c-cyan-soft: oklch(from var(--c-cyan) l c h / 0.14);
    --c-blue-soft: oklch(from var(--c-blue) l c h / 0.14);
    --c-violet-soft: oklch(from var(--c-violet) l c h / 0.14);
    --c-rose-soft: oklch(from var(--c-rose) l c h / 0.14);
    --c-amber-soft: oklch(from var(--c-amber) l c h / 0.14);
    --c-emerald-line: oklch(from var(--c-emerald) l c h / 0.42);
    --c-cyan-line: oklch(from var(--c-cyan) l c h / 0.42);
    --c-blue-line: oklch(from var(--c-blue) l c h / 0.42);
    --c-violet-line: oklch(from var(--c-violet) l c h / 0.42);
    --c-rose-line: oklch(from var(--c-rose) l c h / 0.42);
    --c-amber-line: oklch(from var(--c-amber) l c h / 0.42);
    --shadow-1: oklch(from var(--shadow) l c h / 0.10);
    --shadow-2: oklch(from var(--shadow) l c h / 0.16);
    --shadow-3: oklch(from var(--shadow) l c h / 0.24);
  }
}
@supports (color: color-mix(in oklch, red, blue)) {
  :root[data-theme] {
    /* Mixing towards the text colour lightens in dark mode and darkens in light mode. */
    --hover-mix: color-mix(in oklch, var(--accent-strong), var(--text) 14%);
    --glass: color-mix(in oklch, var(--bg) 76%, transparent);
  }
}
@supports (color: light-dark(white, black)) {
  :root[data-theme] {
    --focus: light-dark(oklch(0.46 0.13 158), oklch(0.86 0.15 158));
  }
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--topbar-h) + 1.25rem);
  background: var(--bg);
}
:root[data-motion="on"] { scroll-behavior: smooth; }
body {
  margin: 0;
  min-block-size: 100vh;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  font-optical-sizing: auto;
  font-synthesis-weight: none;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
img, video, canvas { display: block; max-inline-size: 100%; block-size: auto; }
svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:where(ul, ol)[role="list"] { list-style: none; margin: 0; padding: 0; }
figure { margin: 0; }
h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.15;
  font-weight: 650;
  letter-spacing: -0.015em;
  text-wrap: balance;
  hyphens: manual;
  -webkit-hyphens: manual;
  text-align: start;
}
p { margin: 0; }
p + p { margin-block-start: 0.9em; }
strong, b { font-weight: 650; }
a {
  color: var(--accent);
  text-decoration-line: underline;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--accent-soft);
  transition: text-decoration-color 0.2s var(--ease), color 0.2s var(--ease);
}
a:hover { text-decoration-color: currentColor; }
code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.92em; hyphens: manual; -webkit-hyphens: manual; }
::selection { background: var(--accent-soft); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

/* ---------- text: hyphenation and adaptive alignment ---------- */
.prose p, .prose li, p[data-justify], .prose dd {
  hyphens: auto;
  -webkit-hyphens: auto;
  text-align: start;
  text-wrap: pretty;
}
/* js/site.js measures each block; it justifies only when its lines are already >= 95% full. */
[data-justify].is-justified { text-align: justify; text-wrap: wrap; }
[data-justify].is-measuring { text-align: start !important; text-wrap: wrap !important; }
/* Never justify or hyphenate headings, names, labels or code. */
.eyebrow, .label, .chip, .chips li, .badge, .name, h1, h2, h3, h4, code, pre, dt, .stat__num {
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* ---------- motion control ---------- */
/* Visitor turned animations off, or the section is off screen: everything holds still where it is. */
:root[data-motion="off"] *,
:root[data-motion="off"] *::before,
:root[data-motion="off"] *::after,
.is-offscreen *,
.is-offscreen *::before,
.is-offscreen *::after {
  animation-play-state: paused !important;
}
:root[data-motion="off"] { scroll-behavior: auto; }

/* ---------- helpers ---------- */
.visually-hidden {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: -10rem;
  z-index: 100;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-s);
  background: var(--accent-strong);
  color: var(--on-accent);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { inset-block-start: 1rem; }
.svg-defs { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; pointer-events: none; }

/* Tone helpers: one hue per card / stat / icon. */
.tone-emerald { --tone: var(--c-emerald); --tone-deep: var(--c-emerald-deep); --tone-soft: var(--c-emerald-soft); --tone-line: var(--c-emerald-line); --tone-glow: var(--glow-emerald); }
.tone-cyan    { --tone: var(--c-cyan);    --tone-deep: var(--c-cyan-deep);    --tone-soft: var(--c-cyan-soft);    --tone-line: var(--c-cyan-line);    --tone-glow: var(--glow-cyan); }
.tone-blue    { --tone: var(--c-blue);    --tone-deep: var(--c-blue-deep);    --tone-soft: var(--c-blue-soft);    --tone-line: var(--c-blue-line);    --tone-glow: var(--glow-blue); }
.tone-violet  { --tone: var(--c-violet);  --tone-deep: var(--c-violet-deep);  --tone-soft: var(--c-violet-soft);  --tone-line: var(--c-violet-line);  --tone-glow: var(--glow-violet); }
.tone-rose    { --tone: var(--c-rose);    --tone-deep: var(--c-rose-deep);    --tone-soft: var(--c-rose-soft);    --tone-line: var(--c-rose-line);    --tone-glow: var(--glow-rose); }
.tone-amber   { --tone: var(--c-amber);   --tone-deep: var(--c-amber-deep);   --tone-soft: var(--c-amber-soft);   --tone-line: var(--c-amber-line);   --tone-glow: var(--glow-amber); }

/* ===== icons-base.css ===== */
/* icons-base.css - shared classes for the inline SVG icons (48 x 48 viewBox).
   Containers set `color` (main stroke) and may set --ic-size and --ic-cut. */
.ic {
  display: inline-block;
  inline-size: var(--ic-size, 2rem);
  block-size: var(--ic-size, 2rem);
  flex: none;
  overflow: visible;
  vertical-align: middle;
}
.ic .s, .ic .s-thin, .ic .s-bold {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ic .s { stroke-width: 2.5; }
.ic .s-thin { stroke-width: 1.75; }
.ic .s-bold { stroke-width: 3.25; }
.ic .f { fill: currentColor; stroke: none; }
.ic .fa { fill: currentColor; fill-opacity: 0.18; stroke: none; }
.ic .fa2 { fill: currentColor; fill-opacity: 0.34; stroke: none; }
.ic .fb { fill: var(--ic-cut, var(--surface)); stroke: none; }
.ic .hot { fill: var(--glow-core); stroke: none; }
.ic .muted { opacity: 0.55; }

/* ===== layout.css ===== */
/* layout.css - page frame: wrap, topbar, navigation, sections, footer, HDR switch. */

.wrap {
  inline-size: min(100% - 2 * var(--gutter), var(--page-max));
  margin-inline: auto;
}

/* ---------- topbar (glass) ---------- */
.topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  block-size: var(--topbar-h);
  background: var(--bg);
  border-block-end: 1px solid transparent;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) and (color: color-mix(in oklch, red, blue)) {
  .topbar {
    background: var(--glass);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
  }
  /* HDR mode: richer glass. */
  :root[data-hdr="on"] .topbar {
    background: color-mix(in oklch, var(--bg) 66%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(190%);
    backdrop-filter: blur(20px) saturate(190%);
  }
}
.topbar.is-scrolled { border-block-end-color: var(--line); box-shadow: 0 10px 30px -18px var(--shadow-3); }
.scroll-sentinel { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 1px; block-size: 8px; pointer-events: none; }
.topbar__inner {
  block-size: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--text);
  text-decoration: none;
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
  border-radius: 999px;
  padding-inline-end: 0.4rem;
}
.brand__photo {
  inline-size: 2.15rem;
  block-size: 2.15rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 30%;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--line-strong);
}
.brand__name { font-size: 1.02rem; }

.nav { margin-inline-start: auto; }
.nav ul { display: flex; gap: 0.15rem; }
.nav a {
  position: relative;
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  color: var(--text-2);
  font-size: var(--step--1);
  font-weight: 550;
  text-decoration: none;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0.75rem;
  inset-block-end: 0.25rem;
  block-size: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav a:hover { color: var(--text); background: var(--surface-2); }
.nav a[aria-current="true"] { color: var(--text); }
.nav a[aria-current="true"]::after { transform: scaleX(1); }

.topbar__tools { display: flex; align-items: center; gap: 0.4rem; }
.nav-toggle { display: none; }

@media (max-width: 66rem) {
  .nav-toggle { display: inline-grid; }
  .topbar__tools { margin-inline-start: auto; }
  .nav {
    position: absolute;
    inset-block-start: calc(100% + 0.5rem);
    inset-inline-end: var(--gutter);
    inline-size: min(18rem, calc(100vw - 2 * var(--gutter)));
    padding: 0.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--elev-3);
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top right;
    visibility: hidden;
    transition: opacity 0.2s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0.25s;
  }
  .nav.is-open {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: opacity 0.2s var(--ease), transform 0.25s var(--ease), visibility 0s;
  }
  .nav ul { flex-direction: column; }
  .nav a { padding: 0.75rem 0.9rem; font-size: var(--step-0); }
  .nav a::after { inset-inline: auto 0.9rem; inset-block: 50% auto; inline-size: 6px; block-size: 6px; border-radius: 2px; transform: translateY(-50%) scale(0); }
  .nav a[aria-current="true"]::after { transform: translateY(-50%) scale(1); }
  /* Without JavaScript the menu button cannot work, so show the links in a scrolling row instead. */
  :root:not(.js) .nav { position: static; visibility: visible; opacity: 1; transform: none; inline-size: auto; padding: 0; border: 0; background: none; box-shadow: none; overflow-x: auto; }
  :root:not(.js) .nav ul { flex-direction: row; }
  :root:not(.js) .nav-toggle { display: none; }
}
@media (max-width: 30rem) {
  .brand__name { display: none; }
}

/* ---------- sections ---------- */
.section {
  position: relative;
  padding-block: clamp(4rem, 9vw, 7.5rem);
}
/* Clean hairline divider between sections (no ornaments on it). */
.section + .section::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: max(var(--gutter), calc((100% - var(--page-max)) / 2));
  block-size: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
}
.section__head {
  display: grid;
  gap: 0.7rem;
  max-inline-size: 48rem;
  margin-block-end: clamp(2rem, 4.5vw, 3.25rem);
}
.section__head h2 { font-size: var(--step-3); font-weight: 680; letter-spacing: -0.025em; }
.section__note { color: var(--text-2); max-inline-size: 60ch; }
.eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.subhead {
  margin-block: clamp(2.5rem, 5vw, 3.5rem) 1.25rem;
  font-size: var(--step-2);
  font-weight: 650;
}

/* ---------- footer ---------- */
.site-footer {
  position: relative;
  padding-block: 2.5rem calc(2.5rem + env(safe-area-inset-bottom, 0px));
  background: var(--bg-deep);
  border-block-start: 1px solid var(--line);
  color: var(--text-3);
  font-size: var(--step--1);
}
.footer__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.footer__links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.footer__links a, .to-top { color: var(--text-2); text-decoration: none; }
.footer__links a:hover, .to-top:hover { color: var(--text); }
.to-top { display: inline-flex; align-items: center; gap: 0.45rem; }
.to-top .ic { --ic-size: 1.05rem; }

/* ---------- HDR switch: floating bottom left, just the word ---------- */
.hdr-toggle {
  position: fixed;
  z-index: 60;
  inset-inline-start: max(0.85rem, env(safe-area-inset-left, 0px));
  inset-block-end: max(0.85rem, env(safe-area-inset-bottom, 0px));
  display: none;
  padding: 0.45rem 0.4rem 0.55rem;
  border: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 750;
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--text-3);
  opacity: 0.45;
  transition: opacity 0.25s var(--ease), color 0.25s var(--ease);
}
.hdr-toggle::after {
  content: "";
  position: absolute;
  inset-inline: 0.4rem 0.55rem;
  inset-block-end: 0.2rem;
  block-size: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
:root.gamut-p3 .hdr-toggle, :root.dr-high .hdr-toggle { display: block; }
.hdr-toggle:hover { opacity: 0.8; }
.hdr-toggle[aria-pressed="true"] { color: var(--c-emerald); opacity: 1; }
.hdr-toggle[aria-pressed="true"]::after { transform: scaleX(1); }

/* ===== components.css ===== */
/* components.css - buttons, chips, cards, stat boxes and the home-page sections. */

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-block-size: 2.75rem;
  padding: 0.65rem 1.15rem;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font-size: var(--step--1);
  font-weight: 620;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.25s var(--ease);
}
.btn .ic { --ic-size: 1.15rem; }
.btn:hover { border-color: var(--accent); box-shadow: var(--elev-1); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn--primary { background: var(--accent-strong); border-color: transparent; color: var(--on-accent); }
.btn--primary:hover { background: var(--hover-mix); border-color: transparent; }
.btn--sm { min-block-size: 2.25rem; padding: 0.4rem 0.85rem; border-radius: 10px; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.icon-btn .ic { --ic-size: 1.2rem; }
.icon-btn:hover { color: var(--text); background: var(--surface-2); border-color: var(--line-strong); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn--sm { inline-size: 2.1rem; block-size: 2.1rem; border-radius: 10px; }
.icon-btn--sm .ic { --ic-size: 1.05rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: var(--step--1);
  text-decoration: none;
}
.link-arrow .ic { --ic-size: 1rem; transition: transform 0.25s var(--ease); }
.link-arrow:hover .ic { transform: translateX(3px); }
.link-arrow:hover .ic-ui-external { transform: translate(2px, -2px); }

/* ---------- chips and badges ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.chips li {
  padding: 0.22rem 0.62rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 0.8rem;
  line-height: 1.45;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  background: var(--tone-soft, var(--accent-soft));
  color: var(--tone, var(--accent));
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- cards: thin coloured line along the top that extends on hover ---------- */
.card {
  position: relative;
  overflow: hidden;
  padding: clamp(1.15rem, 2.4vw, 1.6rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  --ic-cut: var(--surface);
  transition: border-color 0.3s var(--ease), box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
:root[data-theme="light"] .card { box-shadow: var(--elev-1); }
.card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  background: linear-gradient(90deg, var(--tone, var(--accent)), var(--tone-deep, var(--accent-strong)));
  transform: scaleX(0.16);
  transform-origin: left center;
  transition: transform 0.55s var(--ease);
}
@supports (background: linear-gradient(in oklch, red, blue)) {
  .card::before { background: linear-gradient(in oklch 90deg, var(--tone, var(--accent)), var(--tone-deep, var(--accent-strong))); }
}
.card:hover::before, .card:focus-within::before { transform: scaleX(1); }
.card:hover { border-color: var(--tone-line, var(--line-strong)); }
.card__head { display: flex; align-items: center; gap: 0.8rem; }
.card__head .ic { --ic-size: 2rem; color: var(--tone, var(--accent)); }
.card__head h3 { font-size: var(--step-1); }
.card__kicker { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.muted { color: var(--text-3); }

/* HDR mode: layered shadows tinted with the card's own hue. */
@supports (color: color-mix(in oklch, red, blue)) {
  :root[data-hdr="on"] .card:hover {
    box-shadow:
      0 1px 1px var(--shadow-1),
      0 10px 24px color-mix(in oklch, var(--tone, var(--accent)) 14%, transparent),
      0 26px 60px color-mix(in oklch, var(--shadow) 40%, transparent);
  }
}

/* key/value lists */
.kv { display: grid; gap: 0.55rem; margin: 1rem 0 0; }
.kv div { display: grid; grid-template-columns: minmax(6.5rem, max-content) 1fr; gap: 0.25rem 1rem; }
.kv dt { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); padding-block-start: 0.25em; }
.kv dd { margin: 0; color: var(--text-2); }
@media (max-width: 26rem) { .kv div { grid-template-columns: 1fr; } }

/* ---------- highlight / stat boxes ---------- */
.stats-band { position: relative; z-index: 2; padding-block: 0 clamp(1rem, 3vw, 2rem); }
.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1rem);
}
/* Balanced rows: 2 + 2 + 1 (full width) on phones, 3 + 2 on tablets, 5 in a row on wide screens. */
.stats > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 40rem) {
  .stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .stats > li, .stats > li:last-child:nth-child(odd) { grid-column: span 2; }
  .stats > li:nth-child(4), .stats > li:nth-child(5) { grid-column: span 3; }
}
@media (min-width: 64rem) {
  .stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .stats > li, .stats > li:nth-child(4), .stats > li:last-child:nth-child(odd) { grid-column: auto; }
}
.stat {
  position: relative;
  display: block;
  block-size: 100%;
  container-type: inline-size;
  overflow: hidden;
  padding: 1.1rem 1.15rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: radial-gradient(120% 90% at 100% 110%, var(--tone-soft), transparent 62%), var(--surface);
  color: var(--text);
  text-decoration: none;
  --ic-cut: var(--surface);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
:root[data-theme="light"] .stat { box-shadow: var(--elev-1); }
.stat::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  background: var(--tone);
  transform: scaleX(0.16);
  transform-origin: left;
  transition: transform 0.55s var(--ease);
}
.stat:hover { transform: translateY(-3px); border-color: var(--tone-line); box-shadow: var(--elev-2); }
.stat:hover::before, .stat:focus-visible::before { transform: scaleX(1); }
.stat:active { transform: translateY(-1px) scale(0.985); transition-duration: 0.08s; }
.stat__top { display: flex; align-items: flex-start; justify-content: space-between; }
.stat__icon { color: var(--tone); }
.stat__icon .ic { --ic-size: 2.75rem; }
.stat__go { color: var(--text-3); opacity: 0.6; transition: transform 0.25s var(--ease), opacity 0.25s var(--ease), color 0.25s var(--ease); }
.stat__go .ic { --ic-size: 1rem; }
.stat:hover .stat__go { opacity: 1; color: var(--tone); transform: translateX(2px); }
.stat__body { display: grid; gap: 0.35rem; margin-block-start: 0.9rem; }
.stat__num {
  font-size: clamp(2.15rem, 1.75rem + 1.5vw, 2.85rem);
  font-weight: 720;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
  color: var(--tone);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .stat__num {
    background-image: linear-gradient(172deg, var(--text) -25%, var(--tone) 52%, var(--tone-deep) 125%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) and (background: linear-gradient(in oklch, red, blue)) {
  .stat__num { background-image: linear-gradient(in oklch 172deg, var(--text) -25%, var(--tone) 52%, var(--tone-deep) 125%); }
}
.stat__unit, .stat__pre { font-size: 0.42em; font-weight: 650; letter-spacing: 0; -webkit-text-fill-color: var(--text-3); color: var(--text-3); }
.stat__pre { margin-inline-end: 0.2em; vertical-align: 0.9em; }
.stat__unit { margin-inline-start: 0.15em; }
.stat__label { display: block; font-weight: 650; line-height: 1.3; }
.stat__sub { display: block; color: var(--text-3); font-size: var(--step--1); line-height: 1.4; }
/* Number and text side by side when there is room, stacked otherwise. */
@container (min-width: 17rem) {
  .stat__body { grid-template-columns: auto 1fr; align-items: end; column-gap: 1rem; }
  .stat__text { padding-block-end: 0.1rem; }
}

/* ---------- education ---------- */
.edu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1.1rem;
}
.edu { display: grid; grid-template-rows: auto auto 1fr auto; row-gap: 0.55rem; }
@supports (grid-template-rows: subgrid) {
  .edu { grid-row: span 4; grid-template-rows: subgrid; }
}
.edu__where { color: var(--text-3); font-size: var(--step--1); }
.edu__what { color: var(--text-2); }
.edu__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  margin: 0.6rem 0 0;
  padding-block-start: 0.9rem;
  border-block-start: 1px dashed var(--line);
}
.edu__meta dt { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.edu__meta dd { margin: 0.15rem 0 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.edu__meta .grade { color: var(--tone); }

/* ---------- research ---------- */
.thesis {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}
@media (max-width: 60rem) { .thesis { grid-template-columns: 1fr; } }
.thesis__title { margin-block: 0.9rem 0.2rem; font-size: var(--step-2); font-weight: 650; line-height: 1.25; text-wrap: pretty; }
.thesis__card .link-arrow { margin-block-start: 1.1rem; }
.thesis__figure { display: grid; gap: 0.75rem; justify-items: center; }
.thesis__figure svg { inline-size: 100%; block-size: auto; max-inline-size: 40rem; }
.thesis__figure figcaption { font-size: var(--step--1); color: var(--text-3); text-align: center; }

.pubs { display: grid; gap: 1rem; counter-reset: pub; }
.pub { display: grid; gap: 0.5rem; }
.pub__tag { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; }
.pub__tag .ic { --ic-size: 1.9rem; color: var(--tone); }
.pub__id { font-family: var(--font-mono); font-weight: 700; color: var(--tone); }
.pub__title { font-size: var(--step-1); font-weight: 620; line-height: 1.4; color: var(--text); text-wrap: pretty; }
.pub__authors { color: var(--text-2); }
.pub__authors strong { color: var(--text); }
.pub__venue { color: var(--text-3); font-size: var(--step--1); }
.pub .link-arrow { justify-self: start; margin-block-start: 0.2rem; }

/* ---------- projects ---------- */
.pgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 1.1rem;
}
.pcard { display: grid; grid-template-rows: auto auto 1fr auto; row-gap: 0.8rem; }
@supports (grid-template-rows: subgrid) {
  .pcard { grid-row: span 4; grid-template-rows: subgrid; }
}
.pcard__head { display: flex; align-items: center; gap: 0.8rem; }
.pcard__head .ic { --ic-size: 2.25rem; color: var(--tone); }
.pcard__title { font-size: var(--step-1); font-weight: 650; line-height: 1.25; }
.pcard__title a { color: var(--text); text-decoration: none; }
.pcard__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.pcard__title a:focus-visible { outline: none; }
.pcard:has(.pcard__title a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.pcard__area { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tone); }
.pcard__desc { color: var(--text-2); }
.pcard__foot { display: flex; align-items: center; gap: 0.5rem; padding-block-start: 0.4rem; }
.pcard__more { display: inline-flex; align-items: center; gap: 0.4rem; margin-inline-end: auto; color: var(--tone); font-size: var(--step--1); font-weight: 620; }
.pcard__more .ic { --ic-size: 1rem; transition: transform 0.25s var(--ease); }
.pcard:hover .pcard__more .ic { transform: translateX(3px); }
.pcard__foot .icon-btn { position: relative; z-index: 2; }
.pcard:hover { transform: translateY(-2px); box-shadow: var(--elev-2); }
.pcard:active { transform: translateY(0) scale(0.99); }

.more-repos { margin-block-start: 1rem; }
.repo-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: 0.75rem;
}
.repo-item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.75rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
  --ic-cut: var(--surface);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.repo-item:hover { border-color: var(--tone-line); transform: translateY(-1px); }
.repo-item .ic { --ic-size: 1.75rem; grid-row: span 2; color: var(--tone); }
.repo-item a { color: var(--text); font-weight: 620; text-decoration: none; }
.repo-item a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.repo-item p { color: var(--text-3); font-size: var(--step--1); line-height: 1.45; }

/* ---------- training, skills, activities, references ---------- */
.train-grid, .skill-grid, .act-grid, .ref-grid { display: grid; gap: 1.1rem; }
.train-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.train { display: grid; grid-template-rows: auto auto 1fr; row-gap: 0.5rem; }
@supports (grid-template-rows: subgrid) { .train { grid-row: span 3; grid-template-rows: subgrid; } }
.train .ic { --ic-size: 2rem; color: var(--tone); }
.train h3 { font-size: var(--step-1); line-height: 1.3; }
.train__meta { display: flex; justify-content: space-between; align-items: end; gap: 0.5rem; color: var(--text-3); font-size: var(--step--1); }
.train__meta time { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tone); }

.skill-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.skill { display: grid; grid-template-rows: auto 1fr; row-gap: 0.9rem; }
@supports (grid-template-rows: subgrid) { .skill { grid-row: span 2; grid-template-rows: subgrid; } }
.skill .card__head .ic { --ic-size: 1.9rem; }
.skill h3 { font-size: var(--step-0); font-weight: 650; }
.skill .chips { align-content: flex-start; }

.act-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.act { display: grid; grid-template-rows: auto auto 1fr; row-gap: 0.6rem; }
@supports (grid-template-rows: subgrid) { .act { grid-row: span 3; grid-template-rows: subgrid; } }
.act__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 1rem; color: var(--text-3); font-size: var(--step--1); }
.act__meta time { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tone); }
.act p:last-child { color: var(--text-2); }

.ref-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.ref { display: grid; grid-template-rows: auto auto 1fr auto; row-gap: 0.35rem; }
@supports (grid-template-rows: subgrid) { .ref { grid-row: span 4; grid-template-rows: subgrid; } }
.ref .ic { --ic-size: 2rem; color: var(--tone); }
.ref h3 { font-size: var(--step-0); font-weight: 650; }
.ref h3 a { color: var(--text); text-decoration: none; }
.ref h3 a:hover { color: var(--tone); }
.ref__role { color: var(--text-2); font-size: var(--step--1); }
.ref__mail { justify-self: start; align-self: end; font-size: var(--step--1); overflow-wrap: anywhere; }
.ref .badge { justify-self: start; margin-block: 0.15rem; }

/* ---------- contact ---------- */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: stretch;
}
@media (max-width: 52rem) { .contact { grid-template-columns: 1fr; } }
.contact__list { display: grid; gap: 0.6rem; }
.contact__item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.15rem 0.95rem;
  padding: 0.9rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), background-color 0.25s var(--ease);
}
a.contact__item:hover { border-color: var(--tone-line, var(--accent)); transform: translateX(3px); }
a.contact__item:active { transform: scale(0.99); }
.contact__item .ic { --ic-size: 1.35rem; grid-row: span 2; color: var(--tone, var(--accent)); }
.contact__label { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.contact__value { font-weight: 600; overflow-wrap: anywhere; }

.cv-card {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.cv-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--elev-2); }
.cv-card:active { transform: scale(0.99); }
.cv-card__sheet {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  max-block-size: 22rem;
  box-shadow: var(--elev-2);
}
.cv-card__sheet img { inline-size: 100%; }
.cv-card__sheet::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  block-size: 35%;
  background: linear-gradient(transparent, var(--surface-2));
}
.cv-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cv-card__foot strong { display: block; }
.cv-card__foot span { color: var(--text-3); font-size: var(--step--1); }
.cv-card__foot .ic { --ic-size: 1.25rem; color: var(--accent); }

/* ===== hero.css ===== */
/* hero.css - name, summary and the 3D photo card floating over a PCB board. */

.hero {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 5.5rem) clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}
/* Clip only sideways (no horizontal page scroll on phones); the board may fade out above and below. */
@supports (overflow-x: clip) { .hero { overflow: visible; overflow-x: clip; } }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.hero__text { position: relative; z-index: 2; display: grid; gap: 1.1rem; }
.hero__name {
  font-size: var(--step-4);
  font-weight: 760;
  letter-spacing: -0.035em;
  line-height: 1;
  margin-block: 0.1rem 0.15rem;
}
.hero__lead { font-size: var(--step-1); color: var(--text); max-inline-size: 36ch; line-height: 1.5; text-wrap: pretty; }
.hero__sub { color: var(--text-2); max-inline-size: 60ch; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin-block-start: 0.2rem; color: var(--text-2); font-size: var(--step--1); }
.hero__facts li { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero__facts .ic { --ic-size: 1.15rem; color: var(--accent); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-block-start: 0.6rem; }
.social { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 0.2rem; }

/* ---------- 3D scene ---------- */
.hero__visual {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  --card: clamp(16.5rem, 26vw, 24.5rem);
}
.scene {
  position: relative;
  inline-size: var(--card);
  block-size: var(--card);
  perspective: 1500px;
  perspective-origin: 50% -30%;   /* camera slightly above: the card is seen from a little higher up */
  touch-action: pan-y;
}
.scene__rig {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(7deg);
  will-change: transform;
}
/* The board is twice the card and centred on it; traces start under the card. */
.scene__rig .hero-board {
  position: absolute;
  inline-size: calc(var(--card) * 2);
  block-size: calc(var(--card) * 2);
  inset-inline-start: calc(var(--card) * -0.5);
  inset-block-start: calc(var(--card) * -0.5);
  transform: translateZ(0);
  pointer-events: none;
}
.scene__shadow {
  position: absolute;
  inset: 6% -4% -10% 4%;
  transform: translateZ(1px);
  will-change: transform;
  pointer-events: none;
}
.scene__shadow svg { inline-size: 100%; block-size: 100%; }
.hero-shadow-stop-a { stop-color: var(--shadow); stop-opacity: 0.62; }
.hero-shadow-stop-b { stop-color: var(--shadow); stop-opacity: 0.22; }
.hero-shadow-stop-c { stop-color: var(--shadow); stop-opacity: 0; }
:root[data-theme="light"] .hero-shadow-stop-a { stop-opacity: 0.34; }
:root[data-theme="light"] .hero-shadow-stop-b { stop-opacity: 0.12; }
:root[data-hdr="on"]:not([data-theme="light"]) .hero-shadow-stop-a { stop-opacity: 0.78; }

.card3d {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: translateZ(46px);
  --r: clamp(18px, 2.2vw, 26px);
}
/* Thickness: stacked slices behind the face, lit from the top-left. */
.card3d__edge {
  position: absolute;
  inset: 0;
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--edge-hi), var(--edge-lo) 70%);
  backface-visibility: hidden;
}
.card3d__edge:nth-child(1) { transform: translateZ(-1.5px); }
.card3d__edge:nth-child(2) { transform: translateZ(-3px); }
.card3d__edge:nth-child(3) { transform: translateZ(-4.5px); }
.card3d__edge:nth-child(4) { transform: translateZ(-6px); }
.card3d__edge:nth-child(5) { transform: translateZ(-7.5px); }
.card3d__edge:nth-child(6) { transform: translateZ(-9px); }
.card3d__edge:nth-child(7) { transform: translateZ(-10.5px); }
.card3d__edge:nth-child(8) { transform: translateZ(-12px); background: var(--edge-lo); }
.card3d__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--surface-3);
  transform: translateZ(0.5px);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.card3d__face img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
/* Fine bevel highlight on the face edge. */
.card3d__face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 0 var(--edge-hi), inset 0 0 0 1px var(--line);
  pointer-events: none;
}
.card3d__sheen {
  position: absolute;
  inset: -40%;
  inline-size: 180%;
  block-size: 180%;
  pointer-events: none;
  will-change: transform;
}
.hero-sheen-a { stop-color: var(--glow-core); stop-opacity: 0; }
.hero-sheen-b { stop-color: var(--glow-core); stop-opacity: 0.16; }
:root[data-theme="light"] .hero-sheen-b { stop-opacity: 0.22; }

/* Phones and tablets: the visual gets its own row, centred, above the text. */
@media (max-width: 60rem) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { order: -1; --card: min(72vw, 21rem); margin-block: 1.5rem 2rem; }
  .hero__text { justify-items: start; }
}

/* ===== project.css ===== */
/* project.css - project pages, the CV viewer page and the 404 page. */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding-block: 1.5rem 0;
  font-size: var(--step--1);
  color: var(--text-3);
}
.crumbs a { color: var(--text-2); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current] { color: var(--text); font-weight: 560; }

/* ---------- project header ---------- */
.project { padding-block-end: clamp(3rem, 7vw, 6rem); }
.project__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 1.75rem);
  align-items: start;
  padding-block: clamp(1.5rem, 4vw, 2.75rem) clamp(1.75rem, 4vw, 2.75rem);
  border-block-end: 1px solid var(--line);
}
.project__icon {
  display: grid;
  place-items: center;
  inline-size: clamp(4rem, 9vw, 5.5rem);
  aspect-ratio: 1;
  border: 1px solid var(--tone-line);
  border-radius: 22px;
  background: radial-gradient(110% 110% at 30% 20%, var(--tone-soft), transparent 70%), var(--surface);
  color: var(--tone);
  --ic-cut: var(--surface);
}
.project__icon .ic { --ic-size: 62%; }
.project__head h1 { font-size: var(--step-3); font-weight: 700; letter-spacing: -0.03em; margin-block: 0.45rem 0.7rem; }
.project__lead { font-size: var(--step-1); color: var(--text-2); max-inline-size: 60ch; line-height: 1.55; }
.project__head .chips { margin-block-start: 1.1rem; }
.project__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-block-start: 1.4rem; }
@media (max-width: 34rem) {
  .project__head { grid-template-columns: 1fr; }
}

/* ---------- layout ---------- */
.project__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  padding-block-start: clamp(1.75rem, 4vw, 2.75rem);
}
@media (max-width: 64rem) { .project__layout { grid-template-columns: 1fr; } }
.project__main { display: grid; gap: clamp(2.25rem, 5vw, 3.25rem); min-inline-size: 0; }
.project__main h2 { font-size: var(--step-2); margin-block-end: 1rem; }
.project__main .prose { max-inline-size: 68ch; color: var(--text-2); }
.project__main .prose ol, .project__main .prose ul { padding-inline-start: 1.25rem; }
.project__main .prose li + li { margin-block-start: 0.35rem; }
.project__side { display: grid; gap: 1.1rem; position: sticky; inset-block-start: calc(var(--topbar-h) + 1rem); }
@media (max-width: 64rem) { .project__side { position: static; } }
.note {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  padding: 0.9rem 1rem;
  border: 1px solid var(--tone-line, var(--line));
  border-radius: var(--radius-s);
  background: var(--tone-soft, var(--surface-2));
  color: var(--text-2);
  font-size: var(--step--1);
}
.note .ic { --ic-size: 1.4rem; color: var(--tone, var(--accent)); }

/* ---------- media gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 0.9rem; align-items: start; }
.shot { display: grid; gap: 0.55rem; align-content: start; justify-items: start; }
.shot a, .shot video {
  display: block;
  overflow: hidden;
  max-inline-size: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface-2);
}
.shot video { justify-self: stretch; }
.shot a img { inline-size: auto; max-inline-size: 100%; transition: transform 0.5s var(--ease); }
.shot a:hover img { transform: scale(1.025); }
.shot video { inline-size: 100%; block-size: auto; max-block-size: 75vh; background: var(--bg-deep); }
.shot figcaption { font-size: var(--step--1); color: var(--text-3); line-height: 1.45; }
.pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: 0.75rem; }
.pages a { display: grid; gap: 0.4rem; color: var(--text-2); text-decoration: none; font-size: var(--step--2); line-height: 1.35; }
.pages a img { border: 1px solid var(--line); border-radius: 8px; background: var(--surface-3); transition: transform 0.3s var(--ease), border-color 0.3s var(--ease); }
.pages a:hover img { transform: translateY(-2px); border-color: var(--tone-line, var(--accent)); }
.pages a:hover { color: var(--text); }

/* ---------- pin map ---------- */
.pin-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1rem; }
.pin-group h3 { font-size: var(--step--1); font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tone, var(--accent)); margin-block-end: 0.6rem; }
.pin-table { inline-size: 100%; border-collapse: collapse; font-size: var(--step--1); }
.pin-table th, .pin-table td { padding: 0.45rem 0.5rem; border-block-end: 1px solid var(--line); text-align: start; vertical-align: top; }
.pin-table th { font-family: var(--font-mono); font-weight: 650; color: var(--text); white-space: nowrap; }
.pin-table td { color: var(--text-2); }

/* ---------- source code ---------- */
.codefile { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.codefile + .codefile { margin-block-start: 0.8rem; }
.codefile > summary {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1rem;
  cursor: pointer;
  list-style: none;
}
.codefile > summary::-webkit-details-marker { display: none; }
.codefile > summary .ic { --ic-size: 1.25rem; color: var(--tone, var(--accent)); }
.codefile__name { font-family: var(--font-mono); font-weight: 650; font-size: var(--step--1); overflow-wrap: anywhere; }
.codefile__meta { margin-inline-start: auto; color: var(--text-3); font-size: var(--step--2); white-space: nowrap; }
.codefile__chev { inline-size: 0.6rem; block-size: 0.6rem; border-inline-end: 2px solid var(--text-3); border-block-end: 2px solid var(--text-3); transform: rotate(-45deg); transition: transform 0.25s var(--ease); flex: none; }
.codefile[open] .codefile__chev { transform: rotate(45deg); }
.codefile__bar { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0 1rem 0.8rem; }
.codefile .code { margin: 0 1rem 1rem; }
.copy-btn[data-state="done"] { border-color: var(--accent); color: var(--accent); }

/* ---------- repository files (side) ---------- */
.files h2, .project-nav h2 { font-size: var(--step-0); font-weight: 650; margin-block-end: 0.8rem; }
.file-list { display: grid; gap: 0.15rem; list-style: none; margin: 0; padding: 0; }
.file-list a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.15rem 0.7rem;
  padding: 0.55rem 0.6rem;
  margin-inline: -0.6rem;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  transition: background-color 0.2s var(--ease);
}
.file-list a:hover { background: var(--surface-2); }
.file-list .ic { --ic-size: 1.15rem; color: var(--tone, var(--accent)); grid-row: span 2; }
.file-list__name { font-size: var(--step--1); font-weight: 600; overflow-wrap: anywhere; line-height: 1.35; }
.file-list__meta { grid-column: 2; font-size: var(--step--2); color: var(--text-3); }
.file-list__dl { grid-row: span 2; grid-column: 3; color: var(--text-3); }
.file-list__dl .ic { --ic-size: 1rem; color: inherit; }
.file-list a:hover .file-list__dl { color: var(--accent); }
.files__source { margin-block-start: 0.9rem; font-size: var(--step--2); color: var(--text-3); line-height: 1.5; }
.project-nav ul { display: grid; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.project-nav a { display: flex; align-items: center; gap: 0.5rem; color: var(--text-2); text-decoration: none; font-size: var(--step--1); }
.project-nav a:hover { color: var(--text); }
.project-nav .ic { --ic-size: 1rem; flex: none; }

/* ---------- CV viewer ---------- */
.cvpage { padding-block-end: clamp(3rem, 7vw, 6rem); }
.cvpage__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  padding-block: clamp(1.5rem, 4vw, 2.5rem);
}
.cvpage__head h1 { font-size: var(--step-3); margin-block-start: 0.4rem; }
.cvpage__head p.muted { margin-block-start: 0.35rem; }
.cvpage__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cvpage__sheets { display: grid; gap: clamp(1rem, 3vw, 2rem); justify-items: center; }
.sheet {
  inline-size: min(100%, 52rem);
  border-radius: 6px;
  overflow: hidden;
  background: oklch(1 0 0);
  box-shadow: var(--elev-3);
}
.sheet img { inline-size: 100%; }

/* ---------- 404 ---------- */
.lost { display: grid; place-items: center; text-align: center; gap: 1rem; padding-block: clamp(4rem, 14vw, 9rem); }
.lost .ic { --ic-size: 4.5rem; color: var(--accent); }
.lost h1 { font-size: var(--step-3); }
.lost p { color: var(--text-2); }

/* ===== code.css ===== */
/* code.css - highlighted source listings (pygments classes with the t- prefix), palette colours only. */
.code {
  margin: 0;
  max-block-size: 34rem;
  overflow: auto;
  padding: 0.9rem 1rem 1rem 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  tab-size: 4;
  white-space: pre;
  -webkit-text-size-adjust: none;
  overscroll-behavior: contain;
}
.code code { font: inherit; counter-reset: ln; }
.code .line { counter-increment: ln; }
.code .line::before {
  content: counter(ln);
  display: inline-block;
  inline-size: 3.4em;
  margin-inline-end: 1.1em;
  padding-inline-end: 0.7em;
  border-inline-end: 1px solid var(--line);
  text-align: end;
  color: var(--text-3);
  opacity: 0.75;
  -webkit-user-select: none;
  user-select: none;
}
.code ::selection { background: var(--accent-soft); }

/* comments */
.code .t-c, .code .t-c1, .code .t-cm, .code .t-ch, .code .t-cs, .code .t-sd { color: var(--text-3); font-style: italic; }
/* preprocessor and directives */
.code .t-cp, .code .t-cpf { color: var(--c-rose); font-style: normal; }
/* keywords */
.code .t-k, .code .t-kr, .code .t-kd, .code .t-kn, .code .t-kc, .code .t-kp, .code .t-ow { color: var(--c-violet); }
.code .t-kt { color: var(--c-cyan); }
/* strings */
.code .t-s, .code .t-s1, .code .t-s2, .code .t-sa, .code .t-sb, .code .t-sc, .code .t-sh, .code .t-sx, .code .t-sr, .code .t-ss { color: var(--c-amber); }
.code .t-se, .code .t-si { color: var(--c-rose); }
/* numbers */
.code .t-m, .code .t-mi, .code .t-mf, .code .t-mh, .code .t-mb, .code .t-mo, .code .t-il { color: var(--c-cyan); }
/* names */
.code .t-nf, .code .t-fm { color: var(--c-blue); }
.code .t-nl { color: var(--c-blue); font-weight: 600; }
.code .t-nb, .code .t-bp, .code .t-nv, .code .t-vm, .code .t-no { color: var(--c-emerald); }
.code .t-nn, .code .t-nc, .code .t-ne { color: var(--c-cyan); }
.code .t-n { color: var(--text); }
/* operators and punctuation */
.code .t-o, .code .t-p { color: var(--text-2); }

/* ===== lights.css ===== */
/* lights.css - lights (glows, DESIGN.md section 4) and the two illustrations that use them:
   the hero PCB board (src/partials/hero-board.svg) and the TFT figure (src/partials/thesis-tft.svg).
   Gradients: src/partials/light-defs.svg (once per page). Usage: src/partials/LIGHTS.md. */

/* >>> GENERATED by tools/hdr_lights.py - do not edit inside this block >>> */
/* Stop colours of the drawn lights (gradients in src/partials/light-defs.svg). */
.gs-emerald { stop-color: var(--glow-emerald); }
.gs-cyan { stop-color: var(--glow-cyan); }
.gs-blue { stop-color: var(--glow-blue); }
.gs-violet { stop-color: var(--glow-violet); }
.gs-rose { stop-color: var(--glow-rose); }
.gs-amber { stop-color: var(--glow-amber); }
.gs-core { stop-color: var(--glow-core); }
/* Light theme: same shapes, drawn as if 1.6x brighter (alpha' = 1 - (1 - alpha)^1.6), so the glows stay visible on light backgrounds. */
:root[data-theme="light"] .lg-halo > stop:nth-child(1) { stop-opacity: 0.954; }
:root[data-theme="light"] .lg-halo > stop:nth-child(2) { stop-opacity: 0.9497; }
:root[data-theme="light"] .lg-halo > stop:nth-child(3) { stop-opacity: 0.9403; }
:root[data-theme="light"] .lg-halo > stop:nth-child(4) { stop-opacity: 0.9252; }
:root[data-theme="light"] .lg-halo > stop:nth-child(5) { stop-opacity: 0.903; }
:root[data-theme="light"] .lg-halo > stop:nth-child(6) { stop-opacity: 0.8721; }
:root[data-theme="light"] .lg-halo > stop:nth-child(7) { stop-opacity: 0.8285; }
:root[data-theme="light"] .lg-halo > stop:nth-child(8) { stop-opacity: 0.7646; }
:root[data-theme="light"] .lg-halo > stop:nth-child(9) { stop-opacity: 0.6173; }
:root[data-theme="light"] .lg-halo > stop:nth-child(10) { stop-opacity: 0.4941; }
:root[data-theme="light"] .lg-halo > stop:nth-child(11) { stop-opacity: 0.4066; }
:root[data-theme="light"] .lg-halo > stop:nth-child(12) { stop-opacity: 0.3335; }
:root[data-theme="light"] .lg-halo > stop:nth-child(13) { stop-opacity: 0.272; }
:root[data-theme="light"] .lg-halo > stop:nth-child(14) { stop-opacity: 0.2198; }
:root[data-theme="light"] .lg-halo > stop:nth-child(15) { stop-opacity: 0.1759; }
:root[data-theme="light"] .lg-halo > stop:nth-child(16) { stop-opacity: 0.1395; }
:root[data-theme="light"] .lg-halo > stop:nth-child(17) { stop-opacity: 0.1092; }
:root[data-theme="light"] .lg-halo > stop:nth-child(18) { stop-opacity: 0.0824; }
:root[data-theme="light"] .lg-halo > stop:nth-child(19) { stop-opacity: 0.0563; }
:root[data-theme="light"] .lg-halo > stop:nth-child(20) { stop-opacity: 0.0337; }
:root[data-theme="light"] .lg-halo > stop:nth-child(21) { stop-opacity: 0.0171; }
:root[data-theme="light"] .lg-halo > stop:nth-child(22) { stop-opacity: 0.0066; }
:root[data-theme="light"] .lg-halo > stop:nth-child(23) { stop-opacity: 0.0013; }
:root[data-theme="light"] .lg-halo > stop:nth-child(24) { stop-opacity: 0; }
:root[data-theme="light"] .lg-tail > stop:nth-child(1) { stop-opacity: 0.8347; }
:root[data-theme="light"] .lg-tail > stop:nth-child(2) { stop-opacity: 0.7123; }
:root[data-theme="light"] .lg-tail > stop:nth-child(3) { stop-opacity: 0.6304; }
:root[data-theme="light"] .lg-tail > stop:nth-child(4) { stop-opacity: 0.5604; }
:root[data-theme="light"] .lg-tail > stop:nth-child(5) { stop-opacity: 0.4966; }
:root[data-theme="light"] .lg-tail > stop:nth-child(6) { stop-opacity: 0.4373; }
:root[data-theme="light"] .lg-tail > stop:nth-child(7) { stop-opacity: 0.382; }
:root[data-theme="light"] .lg-tail > stop:nth-child(8) { stop-opacity: 0.3306; }
:root[data-theme="light"] .lg-tail > stop:nth-child(9) { stop-opacity: 0.2831; }
:root[data-theme="light"] .lg-tail > stop:nth-child(10) { stop-opacity: 0.2391; }
:root[data-theme="light"] .lg-tail > stop:nth-child(11) { stop-opacity: 0.1987; }
:root[data-theme="light"] .lg-tail > stop:nth-child(12) { stop-opacity: 0.1623; }
:root[data-theme="light"] .lg-tail > stop:nth-child(13) { stop-opacity: 0.1295; }
:root[data-theme="light"] .lg-tail > stop:nth-child(14) { stop-opacity: 0.1004; }
:root[data-theme="light"] .lg-tail > stop:nth-child(15) { stop-opacity: 0.0751; }
:root[data-theme="light"] .lg-tail > stop:nth-child(16) { stop-opacity: 0.0537; }
:root[data-theme="light"] .lg-tail > stop:nth-child(17) { stop-opacity: 0.0359; }
:root[data-theme="light"] .lg-tail > stop:nth-child(18) { stop-opacity: 0.022; }
:root[data-theme="light"] .lg-tail > stop:nth-child(19) { stop-opacity: 0.0115; }
:root[data-theme="light"] .lg-tail > stop:nth-child(20) { stop-opacity: 0.0046; }
:root[data-theme="light"] .lg-tail > stop:nth-child(21) { stop-opacity: 0.001; }
:root[data-theme="light"] .lg-tail > stop:nth-child(22) { stop-opacity: 0; }
/* <<< GENERATED <<< */

/* ---- Drawn (SDR) <-> HDR swap ------------------------------------------------------------
   Site JS copies data-src to href only when HDR is on, on an HDR screen, and adds .hdr-ready
   to the .light group when its image has loaded. */
.light__hdr { display: none; }
:root[data-hdr="on"].dr-high .light.hdr-ready .light__hdr { display: inline; }
:root[data-hdr="on"].dr-high .light.hdr-ready .light__sdr { display: none; }

:root[data-hdr="on"] { dynamic-range-limit: no-limit; }
:root:not([data-hdr="on"]) { dynamic-range-limit: standard; }

/* ===== illustrations.css ===== */
/* illustrations.css - the hero PCB board, the thesis TFT figure, section backdrops,
   the signal glyph beside section labels, the milestones timeline and the chip pins on skill cards.
   All drawings are inline SVG; colours come from the palette. */

/* ---------- hero board ---------- */
.hero-board { overflow: visible; }
.hb-trace { fill: none; stroke: var(--trace); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.hb-pad { fill: var(--trace-pad); }
.hb-m1 { stop-color: oklch(1 0 0); }
.hb-m0 { stop-color: oklch(0 0 0); }

/* ---------- thesis TFT ---------- */
.tft-figure { overflow: visible; }
.tft-m-sub { --m: var(--line-strong); }
.tft-m-gate { --m: var(--c-amber); }
.tft-m-gi { --m: var(--c-blue); }
.tft-m-ch1 { --m: var(--c-emerald); }
.tft-m-ch2 { --m: var(--c-cyan); }
.tft-m-con { --m: var(--text-3); }
.tft-top, .tft-front, .tft-right { fill: var(--m); }
.tft-right { fill-opacity: .86; }
.tft-front { fill-opacity: .7; }
@supports (color: color-mix(in oklch, red, blue)) {
  .tft-m-gi { --m: color-mix(in oklch, var(--c-blue) 58%, var(--surface)); }
  .tft-top { fill: color-mix(in oklch, var(--m) 80%, var(--glow-core)); }
  .tft-right { fill: color-mix(in oklch, var(--m) 82%, var(--shadow)); fill-opacity: 1; }
  .tft-front { fill: color-mix(in oklch, var(--m) 66%, var(--shadow)); fill-opacity: 1; }
}
.tft-hi { fill: none; stroke: var(--glow-core); stroke-opacity: .38; stroke-width: 1; stroke-linejoin: round; }
:root[data-theme="light"] .tft-hi { stroke-opacity: .7; }
.tft-sh0 { stop-color: var(--shadow); stop-opacity: .5; }
.tft-sh1 { stop-color: var(--shadow); stop-opacity: 0; }
:root[data-theme="light"] .tft-sh0 { stop-opacity: .22; }
.tft-leader { fill: none; stroke: var(--line-strong); stroke-width: 1.2; stroke-linejoin: round; }
.tft-dot { fill: var(--text-2); }
.tft-label { font-family: var(--font-mono); font-size: 13px; letter-spacing: .02em; fill: var(--text-2); }
.thesis__figure { container-type: inline-size; inline-size: 100%; }
@container (max-width: 30rem) { .tft-label { font-size: 19px; } }

/* ---------- section backdrops ---------- */
.sec-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.section > .wrap, .hero > .wrap, .project > .wrap { position: relative; z-index: 1; }
.project { position: relative; }
.sec-bg svg { position: absolute; display: block; }
.sec-bg__glow { inset: 0; inline-size: 100%; block-size: 100%; }
.sg-a { stop-color: var(--tone-glow, var(--glow-emerald)); stop-opacity: .12; }
.sg-b { stop-color: var(--tone-glow, var(--glow-emerald)); stop-opacity: .04; }
.sg-c { stop-color: var(--tone-glow, var(--glow-emerald)); stop-opacity: 0; }
.sg-2a { stop-color: var(--glow-violet); stop-opacity: .07; }
.sg-2c { stop-color: var(--glow-violet); stop-opacity: 0; }
:root[data-theme="light"] .sg-a { stop-opacity: .11; }
:root[data-theme="light"] .sg-b { stop-opacity: .035; }
:root[data-hdr="on"] .sg-a { stop-opacity: .16; }
:root[data-hdr="on"] .sg-b { stop-opacity: .055; }
.sec-bg__traces { inset-block-start: 0; inset-inline-end: 0; inline-size: min(44%, 30rem); block-size: auto; overflow: visible; }
.bt-trace { fill: none; stroke: var(--line-strong); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.bt-pad { fill: var(--line-strong); opacity: .75; }
.bt-m1 { stop-color: oklch(1 0 0); }
.bt-m0 { stop-color: oklch(0 0 0); }
@media (max-width: 48rem) { .sec-bg__traces { display: none; } }

/* Banded sections: a deeper background colour; the colour change replaces the hairline divider. */
.section--band { background: var(--bg-deep); }
.section--band::before, .section--band + .section::before { content: none; }
:root[data-theme="light"] .section--band { background: var(--bg-deep); }
.section .eyebrow, .project .eyebrow { color: var(--tone, var(--accent)); }

/* ---------- signal glyph beside section labels ---------- */
.eyebrow { display: flex; align-items: center; gap: .65rem; }
.sig { flex: none; inline-size: 3.25rem; block-size: .8rem; overflow: visible; }
.sig__wave { fill: none; stroke: var(--tone, var(--accent)); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }

/* ---------- milestones timeline ---------- */
.tl { list-style: none; margin: 0; padding: 0; }
.tl__item { display: grid; grid-template-columns: minmax(0, 1fr) 3.5rem minmax(0, 1fr); }
.tl__rail { grid-column: 2; grid-row: 1; position: relative; }
.tl__rail > svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
.tl__card { position: relative; z-index: 1; grid-row: 1; inline-size: 100%; max-inline-size: 31rem; margin-block-end: 1.1rem; }
.tl__item--left .tl__card { grid-column: 1; justify-self: end; }
.tl__item--right .tl__card { grid-column: 3; justify-self: start; }
.tl__item--left .tl__rail > svg { transform: scaleX(-1); }
@media (min-width: 48.01rem) { .tl__item + .tl__item { margin-block-start: -3.25rem; } }
.tl__date { display: block; font-family: var(--font-mono); font-size: var(--step--2); font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--tone); }
.tl__card h3 { margin-block: .3rem .35rem; font-size: var(--step-0); font-weight: 650; line-height: 1.35; }
.tl__card p { color: var(--text-2); font-size: var(--step--1); line-height: 1.5; }
.tl__card .card__head { align-items: flex-start; gap: .75rem; }
.tl__card .card__head .ic { --ic-size: 1.75rem; margin-block-start: .1rem; }
.tl-bus { stroke: var(--line-strong); stroke-width: 2; }
.tl-stub { stroke: var(--line-strong); stroke-width: 2; stroke-linecap: round; }
.tl-pad { fill: var(--surface-3); stroke: var(--line-strong); stroke-width: 1.5; }
.tl-pad-lit { fill: var(--tone-glow); }
.tl__item:first-child .tl-bus--in { display: none; }
.tl__item:last-child .tl-bus--out { display: none; }
@media (max-width: 48rem) {
  .tl__item { grid-template-columns: 2.75rem minmax(0, 1fr); }
  .tl__rail { grid-column: 1; }
  .tl__item--left .tl__card, .tl__item--right .tl__card { grid-column: 2; justify-self: stretch; max-inline-size: none; }
  .tl__item--left .tl__rail > svg { transform: none; }
}

/* ---------- chip pins on skill cards ---------- */
.skill { overflow: visible; }
.skill::before { inset-inline: 14px; border-radius: 2px; }
.pins { position: absolute; inset-block-start: 1.4rem; inline-size: 7px; block-size: 78px; overflow: hidden; pointer-events: none; }
.pins--l { inset-inline-start: -7px; }
.pins--r { inset-inline-end: -7px; }
.pin-fill { fill: var(--line-strong); }
.skill:hover .pin-fill { fill: var(--tone); }
.pin-fill { transition: fill .3s ease; }

/* pages that carry a backdrop */
.cvpage { position: relative; }
.cvpage > .wrap { position: relative; z-index: 1; }

/* ===== icons-ui.css ===== */
/* icons-ui.css - GENERATED by tools/icons_ui.py. Highlight, contact and interface icons. */

/* stat-cgpa */
.ic-stat-cgpa .tassel { transform-box: view-box; transform-origin: 40px 18.7px; animation: ic-stat-cgpa-swing 5.5s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes ic-stat-cgpa-swing {
  0%, 52% { transform: rotate(0deg); }
  60% { transform: rotate(14deg); }
  68% { transform: rotate(-9deg); }
  75% { transform: rotate(5deg); }
  81% { transform: rotate(-2.5deg); }
  87% { transform: rotate(1deg); }
  92%, 100% { transform: rotate(0deg); }
}

/* stat-publications */
.ic-stat-publications .ln { transform-box: fill-box; transform-origin: 0 50%; animation: 6s cubic-bezier(.45, 0, .2, 1) infinite; }
.ic-stat-publications .ln1 { animation-name: ic-stat-publications-l1; }
@keyframes ic-stat-publications-l1 {
  0%, 50% { transform: scaleX(1); opacity: 1; }
  54% { transform: scaleX(1); opacity: 0; }
  55% { transform: scaleX(0); opacity: 0; }
  56%, 56% { transform: scaleX(0); opacity: 1; }
  64%, 100% { transform: scaleX(1); opacity: 1; }
}
.ic-stat-publications .ln2 { animation-name: ic-stat-publications-l2; }
@keyframes ic-stat-publications-l2 {
  0%, 50% { transform: scaleX(1); opacity: 1; }
  54% { transform: scaleX(1); opacity: 0; }
  55% { transform: scaleX(0); opacity: 0; }
  56%, 62% { transform: scaleX(0); opacity: 1; }
  70%, 100% { transform: scaleX(1); opacity: 1; }
}
.ic-stat-publications .ln3 { animation-name: ic-stat-publications-l3; }
@keyframes ic-stat-publications-l3 {
  0%, 50% { transform: scaleX(1); opacity: 1; }
  54% { transform: scaleX(1); opacity: 0; }
  55% { transform: scaleX(0); opacity: 0; }
  56%, 68% { transform: scaleX(0); opacity: 1; }
  76%, 100% { transform: scaleX(1); opacity: 1; }
}
.ic-stat-publications .ln4 { animation-name: ic-stat-publications-l4; }
@keyframes ic-stat-publications-l4 {
  0%, 50% { transform: scaleX(1); opacity: 1; }
  54% { transform: scaleX(1); opacity: 0; }
  55% { transform: scaleX(0); opacity: 0; }
  56%, 74% { transform: scaleX(0); opacity: 1; }
  82%, 100% { transform: scaleX(1); opacity: 1; }
}

/* stat-projects */
.ic-stat-projects .pin { animation: ic-stat-projects-pin 6s ease-in-out infinite; }
.ic-stat-projects .p1 { animation-delay: -1.21s; }
.ic-stat-projects .p2 { animation-delay: -1.1s; }
.ic-stat-projects .p3 { animation-delay: -0.99s; }
.ic-stat-projects .p4 { animation-delay: -0.88s; }
.ic-stat-projects .p5 { animation-delay: -0.77s; }
.ic-stat-projects .p6 { animation-delay: -0.66s; }
.ic-stat-projects .p7 { animation-delay: -0.55s; }
.ic-stat-projects .p8 { animation-delay: -0.44s; }
.ic-stat-projects .p9 { animation-delay: -0.33s; }
.ic-stat-projects .p10 { animation-delay: -0.22s; }
.ic-stat-projects .p11 { animation-delay: -0.11s; }
.ic-stat-projects .p12 { animation-delay: -0s; }
@keyframes ic-stat-projects-pin {
  0%, 58% { opacity: 1; }
  62% { opacity: .2; }
  68%, 100% { opacity: 1; }
}
.ic-stat-projects .led { animation: ic-stat-projects-led 4s linear infinite; }
@keyframes ic-stat-projects-led {
  0%, 70% { opacity: 1; }
  71.5% { opacity: .1; }
  74% { opacity: 1; }
  76% { opacity: .1; }
  78.5%, 100% { opacity: 1; }
}

/* stat-training */
.ic-stat-training .wrench, .ic-stat-training .nut { transform-box: view-box; transform-origin: 17px 31px; animation: 6s cubic-bezier(.45, 0, .2, 1) infinite; }
.ic-stat-training .wrench { animation-name: ic-stat-training-wrench; }
.ic-stat-training .nut { animation-name: ic-stat-training-nut; }
@keyframes ic-stat-training-wrench {
  0%, 40% { transform: rotate(0deg); }
  52% { transform: rotate(30deg); }
  60% { transform: rotate(0deg); }
  72% { transform: rotate(30deg); }
  80%, 100% { transform: rotate(0deg); }
}
@keyframes ic-stat-training-nut {
  0%, 40% { transform: rotate(0deg); }
  52%, 60% { transform: rotate(30deg); }
  72%, 100% { transform: rotate(60deg); }
}

/* stat-achievement */
.ic-stat-achievement .sh0 { stop-color: var(--glow-core); stop-opacity: 0; }
.ic-stat-achievement .sh1 { stop-color: var(--glow-core); stop-opacity: .5; }
.ic-stat-achievement .shine { animation: ic-stat-achievement-shine 6s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes ic-stat-achievement-shine {
  0%, 58% { transform: translateX(0); }
  80%, 100% { transform: translateX(34px); }
}

/* ui-theme */
.ic-ui-theme .sun, .ic-ui-theme .moon { transform-box: view-box; transform-origin: 24px 24px; transition: opacity .35s ease, transform .45s cubic-bezier(.45, 0, .2, 1); }
.ic-ui-theme .sun { opacity: 0; transform: rotate(-70deg) scale(.55); }
:root[data-theme="light"] .ic-ui-theme .sun { opacity: 1; transform: none; }
:root[data-theme="light"] .ic-ui-theme .moon { opacity: 0; transform: rotate(50deg) scale(.55); }

/* ui-motion */
.ic-ui-motion .wave { animation: ic-ui-motion-scroll 2.4s linear infinite; }
.ic-ui-motion .wave, .ic-ui-motion .flat { transition: opacity .25s ease; }
.ic-ui-motion .flat { opacity: 0; }
:root[data-motion="off"] .ic-ui-motion .wave { opacity: 0; }
:root[data-motion="off"] .ic-ui-motion .flat { opacity: 1; }
@keyframes ic-ui-motion-scroll { from { transform: translateX(0); } to { transform: translateX(-16px); } }

/* ui-menu */
.ic-ui-menu .top, .ic-ui-menu .mid, .ic-ui-menu .bot { transform-box: view-box; transform-origin: 24px 24px; transition: transform .25s cubic-bezier(.45, 0, .2, 1), opacity .2s ease; }
[aria-expanded="true"] > .ic-ui-menu .top { transform: rotate(45deg) translateY(9px); }
[aria-expanded="true"] > .ic-ui-menu .mid { opacity: 0; }
[aria-expanded="true"] > .ic-ui-menu .bot { transform: rotate(-45deg) translateY(-9px); }

/* ===== icons-projects.css ===== */
/* icons-projects.css - GENERATED by tools/icons_projects.py. Project icons and file-type glyphs. */

/* prj-acc */
.ic-prj-acc .dash { animation: ic-prj-acc-road .9s linear infinite; }
@keyframes ic-prj-acc-road { from { transform: translateY(0); } to { transform: translateY(10px); } }
.ic-prj-acc .ego { transform-box: view-box; transform-origin: 31px 32.25px; animation: ic-prj-acc-lane 7s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes ic-prj-acc-lane {
  0%, 25% { transform: translateX(0) rotate(0deg); }
  32% { transform: translateX(-7.5px) rotate(-11deg); }
  40%, 62% { transform: translateX(-15px) rotate(0deg); }
  69% { transform: translateX(-7.5px) rotate(11deg); }
  77%, 100% { transform: translateX(0) rotate(0deg); }
}

/* prj-six-bit */
.ic-prj-six-bit .off { opacity: .14; }
.ic-prj-six-bit .k1 { animation: ic-prj-six-bit-k1 6s linear infinite; }
@keyframes ic-prj-six-bit-k1 {
  0%, 54.9% { opacity: 1; }
  55%, 64.9% { opacity: 1; }
  65%, 74.9% { opacity: 1; }
  75%, 84.9% { opacity: 0.14; }
  85%, 100% { opacity: 1; }
}
.ic-prj-six-bit .k2 { animation: ic-prj-six-bit-k2 6s linear infinite; }
@keyframes ic-prj-six-bit-k2 {
  0%, 54.9% { opacity: 0.14; }
  55%, 64.9% { opacity: 1; }
  65%, 74.9% { opacity: 1; }
  75%, 84.9% { opacity: 1; }
  85%, 100% { opacity: 0.14; }
}
.ic-prj-six-bit .k3 { animation: ic-prj-six-bit-k3 6s linear infinite; }
@keyframes ic-prj-six-bit-k3 {
  0%, 54.9% { opacity: 1; }
  55%, 64.9% { opacity: 1; }
  65%, 74.9% { opacity: 0.14; }
  75%, 84.9% { opacity: 1; }
  85%, 100% { opacity: 1; }
}
.ic-prj-six-bit .k4 { animation: ic-prj-six-bit-k4 6s linear infinite; }
@keyframes ic-prj-six-bit-k4 {
  0%, 54.9% { opacity: 1; }
  55%, 64.9% { opacity: 0.14; }
  65%, 74.9% { opacity: 1; }
  75%, 84.9% { opacity: 1; }
  85%, 100% { opacity: 1; }
}
.ic-prj-six-bit .k5 { animation: ic-prj-six-bit-k5 6s linear infinite; }
@keyframes ic-prj-six-bit-k5 {
  0%, 54.9% { opacity: 0.14; }
  55%, 64.9% { opacity: 1; }
  65%, 74.9% { opacity: 0.14; }
  75%, 84.9% { opacity: 1; }
  85%, 100% { opacity: 0.14; }
}
.ic-prj-six-bit .k6 { animation: ic-prj-six-bit-k6 6s linear infinite; }
@keyframes ic-prj-six-bit-k6 {
  0%, 54.9% { opacity: 0.14; }
  55%, 64.9% { opacity: 1; }
  65%, 74.9% { opacity: 0.14; }
  75%, 84.9% { opacity: 0.14; }
  85%, 100% { opacity: 0.14; }
}
.ic-prj-six-bit .k7 { animation: ic-prj-six-bit-k7 6s linear infinite; }
@keyframes ic-prj-six-bit-k7 {
  0%, 54.9% { opacity: 1; }
  55%, 64.9% { opacity: 0.14; }
  65%, 74.9% { opacity: 0.14; }
  75%, 84.9% { opacity: 1; }
  85%, 100% { opacity: 1; }
}

/* prj-tictactoe */
.ic-prj-tictactoe .m { transform-box: fill-box; transform-origin: 50% 50%; animation: 7s cubic-bezier(.45, 0, .2, 1) infinite; }
.ic-prj-tictactoe .m1 { animation-name: ic-prj-tictactoe-m1; }
@keyframes ic-prj-tictactoe-m1 {
  0%, 44% { opacity: 1; transform: scale(1); }
  48% { opacity: 0; transform: scale(1); }
  48.5%, 52% { opacity: 0; transform: scale(.4); }
  56%, 100% { opacity: 1; transform: scale(1); }
}
.ic-prj-tictactoe .m2 { animation-name: ic-prj-tictactoe-m2; }
@keyframes ic-prj-tictactoe-m2 {
  0%, 44% { opacity: 1; transform: scale(1); }
  48% { opacity: 0; transform: scale(1); }
  48.5%, 57% { opacity: 0; transform: scale(.4); }
  61%, 100% { opacity: 1; transform: scale(1); }
}
.ic-prj-tictactoe .m3 { animation-name: ic-prj-tictactoe-m3; }
@keyframes ic-prj-tictactoe-m3 {
  0%, 44% { opacity: 1; transform: scale(1); }
  48% { opacity: 0; transform: scale(1); }
  48.5%, 62% { opacity: 0; transform: scale(.4); }
  66%, 100% { opacity: 1; transform: scale(1); }
}
.ic-prj-tictactoe .m4 { animation-name: ic-prj-tictactoe-m4; }
@keyframes ic-prj-tictactoe-m4 {
  0%, 44% { opacity: 1; transform: scale(1); }
  48% { opacity: 0; transform: scale(1); }
  48.5%, 67% { opacity: 0; transform: scale(.4); }
  71%, 100% { opacity: 1; transform: scale(1); }
}
.ic-prj-tictactoe .m5 { animation-name: ic-prj-tictactoe-m5; }
@keyframes ic-prj-tictactoe-m5 {
  0%, 44% { opacity: 1; transform: scale(1); }
  48% { opacity: 0; transform: scale(1); }
  48.5%, 72% { opacity: 0; transform: scale(.4); }
  76%, 100% { opacity: 1; transform: scale(1); }
}
.ic-prj-tictactoe .win { transform-box: fill-box; transform-origin: 0 50%; animation: ic-prj-tictactoe-win 7s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes ic-prj-tictactoe-win {
  0%, 44% { opacity: 1; transform: scaleX(1); }
  48% { opacity: 0; transform: scaleX(1); }
  48.5%, 78% { opacity: 0; transform: scaleX(0); }
  79% { opacity: 1; transform: scaleX(0); }
  86%, 100% { opacity: 1; transform: scaleX(1); }
}

/* prj-table-sort */
.ic-prj-table-sort .bar { opacity: .82; }
.ic-prj-table-sort .rA { animation: ic-prj-table-sort-a 7s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes ic-prj-table-sort-a {
  0%, 40% { opacity: 1; transform: translateY(0); }
  44% { opacity: 0; transform: translateY(0); }
  44.5% { opacity: 0; transform: translateY(8px); }
  48% { opacity: 1; transform: translateY(8px); }
  52% { opacity: 1; transform: translateY(8px); }
  58%, 100% { opacity: 1; transform: translateY(0px); }
}
.ic-prj-table-sort .rB { animation: ic-prj-table-sort-b 7s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes ic-prj-table-sort-b {
  0%, 40% { opacity: 1; transform: translateY(0); }
  44% { opacity: 0; transform: translateY(0); }
  44.5% { opacity: 0; transform: translateY(16px); }
  48% { opacity: 1; transform: translateY(16px); }
  61% { opacity: 1; transform: translateY(16px); }
  67% { opacity: 1; transform: translateY(8px); }
  70% { opacity: 1; transform: translateY(8px); }
  76%, 100% { opacity: 1; transform: translateY(0px); }
}
.ic-prj-table-sort .rC { animation: ic-prj-table-sort-c 7s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes ic-prj-table-sort-c {
  0%, 40% { opacity: 1; transform: translateY(0); }
  44% { opacity: 0; transform: translateY(0); }
  44.5% { opacity: 0; transform: translateY(-16px); }
  48% { opacity: 1; transform: translateY(-16px); }
  52% { opacity: 1; transform: translateY(-16px); }
  58% { opacity: 1; transform: translateY(-8px); }
  70% { opacity: 1; transform: translateY(-8px); }
  76%, 100% { opacity: 1; transform: translateY(0px); }
}
.ic-prj-table-sort .rD { animation: ic-prj-table-sort-d 7s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes ic-prj-table-sort-d {
  0%, 40% { opacity: 1; transform: translateY(0); }
  44% { opacity: 0; transform: translateY(0); }
  44.5% { opacity: 0; transform: translateY(-8px); }
  48% { opacity: 1; transform: translateY(-8px); }
  61% { opacity: 1; transform: translateY(-8px); }
  67%, 100% { opacity: 1; transform: translateY(0px); }
}

/* prj-gas-fire */
.ic-prj-gas-fire .flame { transform-box: view-box; transform-origin: 16px 41.8px; animation: ic-prj-gas-fire-flick 2.6s ease-in-out infinite; }
@keyframes ic-prj-gas-fire-flick {
  0%, 100% { transform: scale(1, 1); }
  20% { transform: scale(.97, 1.05); }
  40% { transform: scale(1.02, .97); }
  60% { transform: scale(.98, 1.04); }
  80% { transform: scale(1.01, .98); }
}
.ic-prj-gas-fire .core { animation: ic-prj-gas-fire-core 1.9s ease-in-out infinite; }
@keyframes ic-prj-gas-fire-core { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.ic-prj-gas-fire .arc { animation: ic-prj-gas-fire-arc 2.4s ease-in-out infinite; }
.ic-prj-gas-fire .a2 { animation-delay: -2s; }
@keyframes ic-prj-gas-fire-arc { 0%, 100% { opacity: 1; } 45% { opacity: .18; } }

/* prj-home */
.ic-prj-home .fan { transform-box: view-box; transform-origin: 18.5px 29.5px; animation: ic-prj-home-fan 6s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes ic-prj-home-fan {
  0%, 28% { transform: rotate(0deg); }
  78%, 100% { transform: rotate(720deg); }
}
.ic-prj-home .drop { animation: ic-prj-home-drop 6s ease-in infinite; }
@keyframes ic-prj-home-drop {
  0%, 62% { transform: translateY(0); opacity: 1; }
  72% { transform: translateY(5.5px); opacity: 0; }
  73% { transform: translateY(0); opacity: 0; }
  80%, 100% { transform: translateY(0); opacity: 1; }
}

/* prj-convolution */
.ic-prj-convolution .tri { animation: ic-prj-convolution-slide 6s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes ic-prj-convolution-slide {
  0%, 30% { transform: translateX(13px); opacity: 1; }
  55% { transform: translateX(31px); opacity: 1; }
  60% { transform: translateX(31px); opacity: 0; }
  61% { transform: translateX(3px); opacity: 0; }
  66% { transform: translateX(3px); opacity: 1; }
  86%, 100% { transform: translateX(13px); opacity: 1; }
}

/* prj-audio */
.ic-prj-audio .bar { transform-box: fill-box; transform-origin: 50% 50%; animation: ic-prj-audio-bounce 1.6s ease-in-out infinite; }
.ic-prj-audio .b1 { animation-delay: -.55s; }
.ic-prj-audio .b2 { animation-delay: -1.1s; }
@keyframes ic-prj-audio-bounce { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.62); } }
.ic-prj-audio .box { animation: ic-prj-audio-box 6s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes ic-prj-audio-box {
  0%, 40% { transform: translateX(0); }
  50%, 88% { transform: translateX(17.5px); }
  98%, 100% { transform: translateX(0); }
}

/* prj-wiring */
.ic-prj-wiring .g0 { stop-color: currentColor; stop-opacity: .6; }
.ic-prj-wiring .g1 { stop-color: currentColor; stop-opacity: 0; }
.ic-prj-wiring .wire-h { transform-box: fill-box; transform-origin: 0 50%; animation: ic-prj-wiring-h 6s cubic-bezier(.45, 0, .2, 1) infinite; }
.ic-prj-wiring .wire-v { transform-box: fill-box; transform-origin: 50% 100%; animation: ic-prj-wiring-v 6s cubic-bezier(.45, 0, .2, 1) infinite; }
.ic-prj-wiring .halo { animation: ic-prj-wiring-halo 6s linear infinite; }
@keyframes ic-prj-wiring-h {
  0%, 48% { transform: scaleX(1); opacity: 1; }
  52% { transform: scaleX(1); opacity: 0; }
  53% { transform: scaleX(0); opacity: 0; }
  54% { transform: scaleX(0); opacity: 1; }
  64%, 100% { transform: scaleX(1); opacity: 1; }
}
@keyframes ic-prj-wiring-v {
  0%, 48% { transform: scaleY(1); opacity: 1; }
  52% { transform: scaleY(1); opacity: 0; }
  53% { transform: scaleY(0); opacity: 0; }
  54%, 64% { transform: scaleY(0); opacity: 1; }
  71%, 100% { transform: scaleY(1); opacity: 1; }
}
@keyframes ic-prj-wiring-halo {
  0%, 48% { opacity: 1; }
  52%, 71% { opacity: 0; }
  73% { opacity: 1; }
  74.5% { opacity: .35; }
  76%, 100% { opacity: 1; }
}

/* prj-star-delta */
.ic-prj-star-delta .rotor { transform-box: view-box; transform-origin: 16.5px 24px; animation: ic-prj-star-delta-rotor 7s linear infinite; }
@keyframes ic-prj-star-delta-rotor {
  0%, 35% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.6, 0, 1, 1); }
  60% { transform: rotate(360deg); animation-timing-function: cubic-bezier(0, 0, .4, 1); }
  90%, 100% { transform: rotate(1080deg); }
}
.ic-prj-star-delta .star { animation: ic-prj-star-delta-star 7s ease-in-out infinite; }
.ic-prj-star-delta .delta { animation: ic-prj-star-delta-delta 7s ease-in-out infinite; }
@keyframes ic-prj-star-delta-star {
  0%, 30% { opacity: 0; }
  34%, 58% { opacity: 1; }
  62%, 100% { opacity: 0; }
}
@keyframes ic-prj-star-delta-delta {
  0%, 30% { opacity: 1; }
  34%, 58% { opacity: 0; }
  62%, 100% { opacity: 1; }
}

/* prj-vector3d */
.ic-prj-vector3d .vec { transform-box: view-box; transform-origin: 18px 31px; animation: ic-prj-vector3d-spin 7s linear infinite; }
@keyframes ic-prj-vector3d-spin {
  0%, 30% { transform: scaleX(1); }
  36% { transform: scaleX(.71); }
  42% { transform: scaleX(.06); }
  48% { transform: scaleX(-.71); }
  54% { transform: scaleX(-1); }
  60% { transform: scaleX(-.71); }
  66% { transform: scaleX(.06); }
  72% { transform: scaleX(.71); }
  78%, 100% { transform: scaleX(1); }
}

/* prj-hexagon */
.ic-prj-hexagon .outside { animation: ic-prj-hexagon-out 7s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes ic-prj-hexagon-out {
  0%, 38% { opacity: .22; }
  46%, 60% { opacity: 1; }
  70%, 100% { opacity: .22; }
}
.ic-prj-hexagon .hexline { transform-box: view-box; transform-origin: 24px 24px; animation: ic-prj-hexagon-hex 7s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes ic-prj-hexagon-hex {
  0%, 38% { opacity: 1; transform: scale(1); }
  44%, 54% { opacity: 0; transform: scale(1.4); }
  64%, 100% { opacity: 1; transform: scale(1); }
}

/* prj-typing */
.ic-prj-typing .key { animation: ic-prj-typing-key 6s ease-out infinite; }
.ic-prj-typing .k1 { animation-delay: -2.88s; }
.ic-prj-typing .k2 { animation-delay: -2.58s; }
.ic-prj-typing .k3 { animation-delay: -2.28s; }
.ic-prj-typing .k4 { animation-delay: -1.98s; }
.ic-prj-typing .k5 { animation-delay: -1.68s; }
@keyframes ic-prj-typing-key {
  0% { transform: translateY(0); opacity: 1; }
  3% { transform: translateY(1.2px); opacity: .45; }
  8%, 100% { transform: translateY(0); opacity: 1; }
}
.ic-prj-typing .text { transform-box: fill-box; transform-origin: 0 50%; animation: ic-prj-typing-text 6s linear infinite; }
@keyframes ic-prj-typing-text {
  0%, 48% { transform: scaleX(1); opacity: 1; }
  50% { transform: scaleX(1); opacity: 0; }
  51% { transform: scaleX(.04); opacity: 0; }
  51.9% { transform: scaleX(.04); opacity: 1; }
  52%, 56.9% { transform: scaleX(0.2); opacity: 1; }
  57%, 61.9% { transform: scaleX(0.4); opacity: 1; }
  62%, 66.9% { transform: scaleX(0.6); opacity: 1; }
  67%, 71.9% { transform: scaleX(0.8); opacity: 1; }
  72%, 100% { transform: scaleX(1); opacity: 1; }
}
.ic-prj-typing .cursor { animation: ic-prj-typing-cursor 1.1s linear infinite; }
@keyframes ic-prj-typing-cursor {
  0%, 49% { opacity: 1; }
  50%, 99% { opacity: 0; }
  100% { opacity: 1; }
}

/* prj-vidmade */
.ic-prj-vidmade .film { animation: ic-prj-vidmade-film 2.2s linear infinite; }
@keyframes ic-prj-vidmade-film { from { transform: translateX(0); } to { transform: translateX(-11px); } }
.ic-prj-vidmade .mnote { animation: ic-prj-vidmade-note 2.2s ease-in-out infinite; }
@keyframes ic-prj-vidmade-note { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }

/* ===== icons-skills.css ===== */
/* icons-skills.css - GENERATED by tools/icons_skills.py. Skills, training, activities, education and research icons. */

/* sk-device-sim */
.ic-sk-device-sim .scan { animation: ic-sk-device-sim-scan 5s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes ic-sk-device-sim-scan {
  0%, 40% { transform: translateY(0); opacity: 0; }
  44% { transform: translateY(1px); opacity: 1; }
  80% { transform: translateY(22px); opacity: 1; }
  84%, 100% { transform: translateY(22px); opacity: 0; }
}

/* sk-ic-design */
.ic-sk-ic-design .hl { opacity: 0; animation: ic-sk-ic-design-hl 6s ease-in-out infinite; }
.ic-sk-ic-design .hl1 { animation-delay: -1.08s; }
.ic-sk-ic-design .hl2 { animation-delay: -0.72s; }
.ic-sk-ic-design .hl3 { animation-delay: -0.36s; }
.ic-sk-ic-design .hl4 { animation-delay: -0s; }
@keyframes ic-sk-ic-design-hl {
  0%, 55% { opacity: 0; }
  60% { opacity: .38; }
  66%, 100% { opacity: 0; }
}

/* sk-programming */
.ic-sk-programming .cursor { animation: ic-sk-programming-cursor 1.1s linear infinite; }
@keyframes ic-sk-programming-cursor { 0%, 49% { opacity: 1; } 50%, 99% { opacity: 0; } 100% { opacity: 1; } }

/* sk-ml */
.ic-sk-ml .nact { opacity: 0; animation: ic-sk-ml-act 4.5s ease-in-out infinite; }
.ic-sk-ml .a1 { animation-delay: -.9s; }
.ic-sk-ml .a2 { animation-delay: -.45s; }
@keyframes ic-sk-ml-act { 0%, 50% { opacity: 0; } 58% { opacity: 1; } 70%, 100% { opacity: 0; } }

/* sk-embedded */
.ic-sk-embedded .w { animation: ic-sk-embedded-w 3.2s ease-in-out infinite; }
.ic-sk-embedded .w1 { animation-delay: -0.38s; }
.ic-sk-embedded .w2 { animation-delay: -0s; }
@keyframes ic-sk-embedded-w {
  0%, 45% { opacity: 1; }
  55% { opacity: 0.22; }
  68%, 100% { opacity: 1; }
}

/* sk-power */
.ic-sk-power .gear { transform-box: view-box; transform-origin: 24px 24px; animation: ic-sk-power-turn 6s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes ic-sk-power-turn {
  0%, 45% { transform: rotate(0deg); }
  75%, 100% { transform: rotate(45deg); }
}

/* sk-rf */
.ic-sk-rf .w { animation: ic-sk-rf-w 3.6s ease-in-out infinite; }
.ic-sk-rf .w1 { animation-delay: -0.86s; }
.ic-sk-rf .w2 { animation-delay: -0.43s; }
.ic-sk-rf .w3 { animation-delay: -0s; }
@keyframes ic-sk-rf-w {
  0%, 45% { opacity: 1; }
  55% { opacity: 0.22; }
  68%, 100% { opacity: 1; }
}

/* sk-tools */
.ic-sk-tools .wrench { transform-box: view-box; transform-origin: 32.5px 15.5px; animation: ic-sk-tools-turn 5s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes ic-sk-tools-turn {
  0%, 50% { transform: rotate(0deg); }
  62% { transform: rotate(14deg); }
  74% { transform: rotate(-6deg); }
  84%, 100% { transform: rotate(0deg); }
}

/* org-electronics */
.ic-org-electronics .box { animation: ic-org-electronics-belt 2.7s linear infinite; }
.ic-org-electronics .bx2 { animation-delay: -.9s; }
.ic-org-electronics .bx3 { animation-delay: -1.8s; }
@keyframes ic-org-electronics-belt { 0% { transform: translateX(0); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateX(32px); opacity: 0; } }

/* org-power */
.ic-org-power .puff { animation: ic-org-power-steam 3.6s ease-out infinite; }
.ic-org-power .p2 { animation-delay: -1.2s; }
.ic-org-power .p3 { animation-delay: -2.4s; }
@keyframes ic-org-power-steam { 0% { transform: translateY(2px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-5px); opacity: 0; } }

/* org-telecom */
.ic-org-telecom .w { animation: ic-org-telecom-w 3.4s ease-in-out infinite; }
.ic-org-telecom .w1 { animation-delay: -0.41s; }
.ic-org-telecom .w2 { animation-delay: -0s; }
@keyframes ic-org-telecom-w {
  0%, 45% { opacity: 1; }
  55% { opacity: 0.22; }
  68%, 100% { opacity: 1; }
}

/* ach-hackathon */
.ic-ach-hackathon .cursor { animation: ic-ach-hackathon-cursor 1.1s linear infinite; }
@keyframes ic-ach-hackathon-cursor { 0%, 49% { opacity: 1; } 50%, 99% { opacity: 0; } 100% { opacity: 1; } }

/* ach-organiser */
.ic-ach-organiser .ck { transform-box: fill-box; transform-origin: 50% 50%; animation: 6s cubic-bezier(.45, 0, .2, 1) infinite; }
.ic-ach-organiser .ck1 { animation-name: ic-ach-organiser-ck1; }
@keyframes ic-ach-organiser-ck1 {
  0%, 44% { opacity: 1; transform: scale(1); }
  48% { opacity: 0; transform: scale(1); }
  48.5%, 56% { opacity: 0; transform: scale(.3); }
  60%, 100% { opacity: 1; transform: scale(1); }
}
.ic-ach-organiser .ck2 { animation-name: ic-ach-organiser-ck2; }
@keyframes ic-ach-organiser-ck2 {
  0%, 44% { opacity: 1; transform: scale(1); }
  48% { opacity: 0; transform: scale(1); }
  48.5%, 62% { opacity: 0; transform: scale(.3); }
  66%, 100% { opacity: 1; transform: scale(1); }
}
.ic-ach-organiser .ck3 { animation-name: ic-ach-organiser-ck3; }
@keyframes ic-ach-organiser-ck3 {
  0%, 44% { opacity: 1; transform: scale(1); }
  48% { opacity: 0; transform: scale(1); }
  48.5%, 68% { opacity: 0; transform: scale(.3); }
  72%, 100% { opacity: 1; transform: scale(1); }
}

/* edu-university */
.ic-edu-university .flag { transform-box: view-box; transform-origin: 24.5px 5.6px; animation: ic-edu-university-flag 3.2s ease-in-out infinite; }
@keyframes ic-edu-university-flag { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(.82, 1.06); } 60% { transform: scale(.94, .96); } }

/* edu-school */
.ic-edu-school .turn { transform-box: view-box; transform-origin: 24px 26.5px; animation: ic-edu-school-turn 6s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes ic-edu-school-turn {
  0%, 50% { transform: scaleX(1); opacity: 1; }
  70% { transform: scaleX(-1); opacity: 1; }
  76% { transform: scaleX(-1); opacity: 0; }
  77%, 100% { transform: scaleX(1); opacity: 0; }
}

/* res-lab */
.ic-res-lab .sh0 { stop-color: var(--glow-core); stop-opacity: 0; }
.ic-res-lab .sh1 { stop-color: var(--glow-core); stop-opacity: .45; }
.ic-res-lab .sweep { animation: ic-res-lab-sweep 6s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes ic-res-lab-sweep {
  0%, 55% { transform: translateX(0); }
  82%, 100% { transform: translateX(54px); }
}

/* pub-journal */
.ic-pub-journal .ribbon { transform-box: view-box; transform-origin: 29.8px 6px; animation: ic-pub-journal-ribbon 4.5s ease-in-out infinite; }
@keyframes ic-pub-journal-ribbon { 0%, 55%, 100% { transform: rotate(0deg); } 65% { transform: rotate(8deg); } 75% { transform: rotate(-5deg); } 85% { transform: rotate(2deg); } }

/* pub-conference */
.ic-pub-conference .bar { opacity: .82; transform-box: fill-box; transform-origin: 50% 100%; animation: 6s cubic-bezier(.45, 0, .2, 1) infinite; }
.ic-pub-conference .b1 { animation-name: ic-pub-conference-b1; }
@keyframes ic-pub-conference-b1 {
  0%, 44% { transform: scaleY(1); }
  50%, 54% { transform: scaleY(.12); }
  62%, 100% { transform: scaleY(1); }
}
.ic-pub-conference .b2 { animation-name: ic-pub-conference-b2; }
@keyframes ic-pub-conference-b2 {
  0%, 44% { transform: scaleY(1); }
  50%, 58% { transform: scaleY(.12); }
  66%, 100% { transform: scaleY(1); }
}
.ic-pub-conference .b3 { animation-name: ic-pub-conference-b3; }
@keyframes ic-pub-conference-b3 {
  0%, 44% { transform: scaleY(1); }
  50%, 62% { transform: scaleY(.12); }
  70%, 100% { transform: scaleY(1); }
}