/* 生机协同部: 信号, in pixels */

:root {
  --paper: #FBFCFF;
  --ink: #14246B;
  --cobalt: #1E43D6;
  --teal: #19B5C9;
  --teal-ink: #0B6E7C;
  --peri: #A9B7F5;
  --peri-soft: #EEF1FE;
  --muted: #4A5690;
  --white: #fff;

  --px: 4px;
  --font-cjk: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  --font-label: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", monospace;

  --nav-h: 64px;
  --gutter: clamp(16px, 4.6vw, 96px);
  --wrap: 1680px;
  --edge: max(var(--gutter), calc((100vw - var(--wrap)) / 2));
  --trace-h: calc(var(--px) * 32);
  --feet: calc(var(--px) * 12);

  /* Stair-stepped corners, cut in multiples of --px. */
  --st1: polygon(
    var(--px) 0, calc(100% - var(--px)) 0, calc(100% - var(--px)) var(--px), 100% var(--px),
    100% calc(100% - var(--px)), calc(100% - var(--px)) calc(100% - var(--px)), calc(100% - var(--px)) 100%,
    var(--px) 100%, var(--px) calc(100% - var(--px)), 0 calc(100% - var(--px)), 0 var(--px), var(--px) var(--px)
  );
  --st2: polygon(
    0 calc(var(--px) * 2), var(--px) calc(var(--px) * 2), var(--px) var(--px), calc(var(--px) * 2) var(--px), calc(var(--px) * 2) 0,
    calc(100% - var(--px) * 2) 0, calc(100% - var(--px) * 2) var(--px), calc(100% - var(--px)) var(--px), calc(100% - var(--px)) calc(var(--px) * 2), 100% calc(var(--px) * 2),
    100% calc(100% - var(--px) * 2), calc(100% - var(--px)) calc(100% - var(--px) * 2), calc(100% - var(--px)) calc(100% - var(--px)), calc(100% - var(--px) * 2) calc(100% - var(--px)), calc(100% - var(--px) * 2) 100%,
    calc(var(--px) * 2) 100%, calc(var(--px) * 2) calc(100% - var(--px)), var(--px) calc(100% - var(--px)), var(--px) calc(100% - var(--px) * 2), 0 calc(100% - var(--px) * 2)
  );
  --st3: polygon(
    0 calc(var(--px) * 4), calc(var(--px) * 2) calc(var(--px) * 4), calc(var(--px) * 2) calc(var(--px) * 2), calc(var(--px) * 4) calc(var(--px) * 2), calc(var(--px) * 4) 0,
    calc(100% - var(--px) * 4) 0, calc(100% - var(--px) * 4) calc(var(--px) * 2), calc(100% - var(--px) * 2) calc(var(--px) * 2), calc(100% - var(--px) * 2) calc(var(--px) * 4), 100% calc(var(--px) * 4),
    100% calc(100% - var(--px) * 4), calc(100% - var(--px) * 2) calc(100% - var(--px) * 4), calc(100% - var(--px) * 2) calc(100% - var(--px) * 2), calc(100% - var(--px) * 4) calc(100% - var(--px) * 2), calc(100% - var(--px) * 4) 100%,
    calc(var(--px) * 4) 100%, calc(var(--px) * 4) calc(100% - var(--px) * 2), calc(var(--px) * 2) calc(100% - var(--px) * 2), calc(var(--px) * 2) calc(100% - var(--px) * 4), 0 calc(100% - var(--px) * 4)
  );
}

@media (max-width: 719.98px) {
  :root { --px: 3px; --nav-h: 56px; }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html {
  color-scheme: light;
  scroll-padding-top: calc(var(--nav-h) + 8px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.8 var(--font-cjk);
  font-kerning: normal;
  line-break: strict;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
img, svg, canvas { display: block; }
h1, h2, h3, h4, p, ul, ol { margin: 0; padding: 0; font: inherit; }
ul, ol { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
table { border-collapse: collapse; border-spacing: 0; width: 100%; }
[hidden] { display: none !important; }
main:focus { outline: 0; }
p, li, td { text-wrap: pretty; }

.wrap { padding-inline: var(--edge); }
.nb { display: inline-block; }
.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.defs { position: absolute; }

/* Pixel sprites: always whole-number multiples of natural size. */
.spr {
  width: calc(var(--w) * var(--n, 3) * 1px);
  height: calc(var(--h) * var(--n, 3) * 1px);
  image-rendering: pixelated;
  flex: none;
}

/* Solid colour fields */
.f-paper { background: var(--paper); color: var(--ink); --sub: var(--muted); --focus: var(--ink); --wave: var(--cobalt); --wave2: var(--teal); --chip: var(--peri-soft); --chip-fg: var(--ink); }
.f-soft { background: var(--peri-soft); color: var(--ink); --sub: var(--muted); --focus: var(--ink); --wave: var(--cobalt); --wave2: var(--teal); --chip: var(--white); --chip-fg: var(--ink); }
.f-cobalt { background: var(--cobalt); color: var(--white); --sub: var(--white); --focus: var(--white); --wave: var(--white); --wave2: var(--peri); --chip: var(--ink); --chip-fg: var(--white); }
.f-navy { background: var(--ink); color: var(--white); --sub: var(--peri); --focus: var(--white); --wave: var(--teal); --wave2: var(--peri); --chip: var(--cobalt); --chip-fg: var(--white); }

/* Focus */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: var(--px) solid var(--focus, var(--ink));
  outline-offset: 2px;
}
summary:focus-visible { outline-offset: calc(var(--px) * -2); }

.skip {
  position: fixed; left: 8px; top: -80px; z-index: 50;
  background: var(--ink); color: var(--white);
  padding: 8px 16px; text-decoration: none; font-weight: 700;
}
.skip:focus { top: 8px; }

/* Type */
.h2 {
  font-size: clamp(30px, 4vw, 56px);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.lbl {
  font-family: var(--font-label);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: var(--sub);
  font-weight: 700;
}

/* Channel label */
.ch {
  display: flex;
  align-items: center;
  gap: calc(var(--px) * 3);
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.08em;
  line-height: 1.4;
  margin-bottom: calc(var(--px) * 6);
}
.ch-map { width: 45px; height: 54px; fill: var(--peri); flex: none; }
.ch-map .lit { fill: var(--teal); }
.f-cobalt .ch-map { fill: var(--white); }
.f-cobalt .ch-map .lit { fill: var(--ink); }
.ch-code { font-weight: 700; font-size: 18px; }

/* Buttons: faces on a hard offset block */
.btn {
  position: relative;
  display: inline-block;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  clip-path: var(--st1);
}
.btn > span {
  position: relative;
  display: block;
  clip-path: var(--st1);
}
.btn-solid { margin: 0 calc(var(--px) * 2) calc(var(--px) * 2) 0; }
.btn-solid::before { transform: translate(calc(var(--px) * 2), calc(var(--px) * 2)); }
.btn-solid > span {
  background: var(--cobalt);
  color: var(--white);
  padding: calc(var(--px) * 3) calc(var(--px) * 8);
}
.btn-solid:hover > span { background: var(--ink); }
.btn-solid:hover::before { background: var(--teal); }
.btn-solid:active > span { transform: translate(var(--px), var(--px)); }

.btn-frame { color: var(--ink); }
.btn-frame > span {
  margin: var(--px);
  background: var(--peri);
  padding: calc(var(--px) * 2) calc(var(--px) * 6);
}
.btn-frame:hover > span { background: var(--ink); color: var(--white); }
.btn-frame:active { transform: translateY(var(--px)); }

/* Nav */
.nav { position: sticky; top: 0; z-index: 30; background: var(--paper); --focus: var(--ink); }
.nav-in { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); }
.brand { display: flex; align-items: center; gap: calc(var(--px) * 3); color: var(--ink); text-decoration: none; }
.brand-wm { width: 116px; height: 20px; }
.nav-wide .nav-links { display: flex; gap: var(--px); }
.nav-links a {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: baseline;
  gap: calc(var(--px) * 2);
  padding: calc(var(--px) * 2) calc(var(--px) * 3);
  color: var(--ink);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  text-decoration: none;
}
.nav-links a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: transparent;
  clip-path: var(--st1);
}
.nav-links a:hover::before { background: var(--peri-soft); }
.nav-links a[aria-current]::before { background: var(--ink); }
.nav-links a[aria-current] { color: var(--white); }
.nav-links a[aria-current] .code { color: var(--peri); }
.code { font-family: var(--font-label); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--teal-ink); }

.nav-compact { display: none; }
.nav-compact summary {
  display: flex;
  align-items: center;
  gap: calc(var(--px) * 2);
  list-style: none;
  cursor: pointer;
  padding: calc(var(--px) * 2) calc(var(--px) * 2);
  outline-offset: 0;
}
.nav-compact summary::-webkit-details-marker { display: none; }
.burger {
  display: block;
  width: calc(var(--px) * 5);
  height: var(--px);
  background: var(--ink);
  box-shadow: 0 calc(var(--px) * 2) 0 var(--ink), 0 calc(var(--px) * -2) 0 var(--ink);
}
.nav-compact[open] .burger { box-shadow: none; }
.nav-compact nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--ink);
  padding: calc(var(--px) * 3) var(--edge) calc(var(--px) * 5);
  --focus: var(--white);
}
.nav-compact .nav-links a { color: var(--white); font-size: 20px; padding-block: calc(var(--px) * 3); }
.nav-compact .nav-links a::before { display: none; }
.nav-compact .nav-links .code { color: var(--peri); }

@media (max-width: 719.98px) {
  .nav-wide { display: none; }
  .nav-compact { display: block; }
}

/* Hero */
.hero { background: var(--peri); color: var(--ink); --focus: var(--ink); --fig-n: 5; --wm: 2; }
.hero-main {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--px) * 10);
}
.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.hero-copy { padding-bottom: calc(var(--px) * 8); }
.eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0 calc(var(--px) * 2);
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.08em;
  line-height: 1.6;
  font-weight: 700;
}
.eyebrow i { font-style: normal; }
.h1 { margin-top: calc(var(--px) * 5); }
.wm { width: calc(116px * var(--wm)); height: calc(20px * var(--wm)); }
.wm-cur { display: none; }
.lead {
  margin-top: calc(var(--px) * 5);
  font-size: clamp(22px, 2.4vw, 36px);
  font-weight: 700;
  line-height: 1.3;
}
.sub { margin-top: calc(var(--px) * 3); max-width: 31em; }
.cta { margin-top: calc(var(--px) * 6); display: flex; flex-wrap: wrap; gap: calc(var(--px) * 3) calc(var(--px) * 4); }

.hero-fig {
  position: relative;
  justify-self: end;
  width: calc(50px * var(--fig-n));
  height: calc(78px * var(--fig-n));
  margin-bottom: var(--feet);
}
.hero-fig img { width: 100%; height: 100%; image-rendering: pixelated; }
.fig-top { display: none; }

.trace {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--trace-h);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 28' shape-rendering='crispEdges' fill='%231E43D6'%3E%3Cpath d='M0 18h1v3h-1zM1 20h2v1h-2zM3 19h2v2h-2zM5 20h1v2h-1zM6 21h2v1h-2zM8 19h1v3h-1zM9 17h1v3h-1zM10 17h2v1h-2zM12 17h1v3h-1zM13 19h1v2h-1zM14 20h1v2h-1zM15 21h1v1h-1zM16 20h1v2h-1zM17 19h1v2h-1zM18 19h1v1h-1zM19 19h1v2h-1zM20 20h1v1h-1zM21 19h1v2h-1zM22 16h1v4h-1zM23 13h1v4h-1zM24 11h1v3h-1zM25 9h1v3h-1zM26 9h1v1h-1zM27 9h1v2h-1zM28 10h1v1h-1zM29 9h1v2h-1zM30 9h2v1h-2zM32 9h1v3h-1zM33 11h1v3h-1zM34 13h1v3h-1zM35 15h1v3h-1zM36 17h1v1h-1zM37 16h1v2h-1zM38 15h1v2h-1zM39 15h1v1h-1zM40 15h1v2h-1zM41 16h1v2h-1zM42 17h1v1h-1zM43 16h1v2h-1zM44 15h1v2h-1zM45 15h1v1h-1zM46 15h1v2h-1zM47 16h1v3h-1zM48 18h1v4h-1zM49 21h1v3h-1zM50 23h2v1h-2zM52 22h1v2h-1zM53 22h1v1h-1zM54 22h1v2h-1zM55 23h1v1h-1zM56 22h1v2h-1zM57 20h1v3h-1zM58 16h1v5h-1zM59 14h1v3h-1zM60 12h1v3h-1zM61 12h2v1h-2zM63 12h2v2h-2zM65 11h1v2h-1zM66 11h2v1h-2zM68 11h1v3h-1zM69 13h1v3h-1zM70 15h2v1h-2zM72 13h1v3h-1zM73 12h1v2h-1zM74 11h1v2h-1zM75 11h1v5h-1zM76 6h1v10h-1zM77 6h1v13h-1zM78 9h1v10h-1zM79 9h1v4h-1zM80 12h1v5h-1zM81 8h1v9h-1zM82 8h1v15h-1zM83 15h1v8h-1zM84 15h1v7h-1zM85 21h1v6h-1zM86 17h1v10h-1zM87 17h1v12h-1zM88 19h1v10h-1zM89 19h1v5h-1zM90 23h1v5h-1zM91 17h2v11h-2zM93 15h1v13h-1zM94 15h2v3h-2zM96 15h1v1h-1zM97 15h1v2h-1zM98 16h1v2h-1zM99 17h1v1h-1zM100 16h1v2h-1zM101 15h1v2h-1zM102 15h1v1h-1zM103 15h1v2h-1zM104 16h1v2h-1zM105 17h1v1h-1zM106 16h1v2h-1zM107 14h1v3h-1zM108 11h1v4h-1zM109 9h1v3h-1zM110 9h2v1h-2zM112 9h1v2h-1zM113 10h1v1h-1zM114 9h1v2h-1zM115 9h1v1h-1zM116 9h1v2h-1zM117 10h1v3h-1zM118 12h1v5h-1zM119 16h1v3h-1z'/%3E%3C/svg%3E") 0 calc(var(--px) * 4) / calc(var(--px) * 120) calc(var(--px) * 28) repeat-x;
}
.trace.is-live { background: none; }
.trace canvas { width: 100%; height: 100%; image-rendering: pixelated; }
.trace-cap {
  position: absolute;
  z-index: 3;
  left: var(--edge);
  bottom: calc(var(--px) * 2);
  padding: var(--px) calc(var(--px) * 2);
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-label);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  clip-path: var(--st1);
}

.facts {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: start;
  gap: calc(var(--px) * 2) calc(var(--px) * 8);
  padding: calc(var(--px) * 4) var(--edge);
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.08em;
  line-height: 1.5;
}
.facts li { display: flex; align-items: center; gap: calc(var(--px) * 2); white-space: nowrap; }
.facts li::before { content: ""; width: calc(var(--px) * 2); height: calc(var(--px) * 2); background: var(--teal); flex: none; }

@media (min-width: 390px) { .hero { --wm: 3; } }
@media (min-width: 560px) { .hero { --wm: 4; } }

@media (min-width: 720px) {
  .hero { --wm: 3; --fig-n: 5; }
  .hero-main {
    min-height: min(calc(100svh - var(--nav-h) - 54px), calc(var(--fig-n) * 78px + var(--feet) + var(--px) * 30));
    padding-top: calc(var(--px) * 8);
  }
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(24px, 4vw, 64px);
    align-items: end;
  }
  .hero-copy { align-self: center; padding-bottom: calc(var(--trace-h) + var(--px) * 4); }
  .facts { grid-template-columns: repeat(4, auto); justify-content: space-between; gap: var(--px) calc(var(--px) * 6); }
}
@media (min-width: 900px) { .hero { --wm: 4; --fig-n: 6; } }
@media (min-width: 1024px) { .hero { --wm: 5; --fig-n: 6; } }
@media (min-width: 1100px) { .hero { --wm: 5; --fig-n: 7; } }
@media (min-width: 1280px) { .hero { --wm: 6; --fig-n: 8; } }
@media (min-width: 1440px) { .hero { --wm: 7; --fig-n: 8; } }
@media (min-width: 1800px) { .hero { --wm: 9; --fig-n: 10; } }

/* Keep her head and the fact strip on the first screen on short laptops. */
@media (min-width: 1100px) and (max-height: 820px) { .hero { --fig-n: 7; } }
@media (min-width: 1100px) and (max-height: 700px) { .hero { --fig-n: 6; } }
@media (min-width: 1800px) and (max-height: 1010px) { .hero { --fig-n: 9; } }
@media (min-width: 1800px) and (max-height: 880px) { .hero { --fig-n: 8; --wm: 8; } }

/* Fp1 About */
.about { padding-top: clamp(64px, 9vw, 136px); }
.about-top { display: grid; gap: calc(var(--px) * 6) clamp(32px, 6vw, 96px); padding-bottom: clamp(48px, 7vw, 96px); }
.about-top .ch { margin-bottom: 0; }
.about-body { font-size: clamp(17px, 1.4vw, 21px); max-width: 26em; }

@media (min-width: 960px) {
  .about-top { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: end; }
  .about-top .ch { grid-column: 1 / -1; }
}

.about-band { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(104px, 11vw, 168px); }
.band-label { font-size: clamp(17px, 1.6vw, 22px); font-weight: 700; line-height: 1.6; }
.carriers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: calc(var(--px) * 5);
  font-size: clamp(38px, 12vw, 72px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.carriers li { display: flex; align-items: center; white-space: nowrap; }
.carriers li:not(:last-child)::after {
  content: "";
  width: calc(var(--px) * 3);
  height: calc(var(--px) * 3);
  margin-inline: clamp(10px, 1.7vw, 32px);
  background: var(--teal);
}
.carriers li:nth-child(3)::after { display: none; }
@media (min-width: 720px) {
  .carriers { font-size: clamp(40px, 5.8vw, 112px); }
  .carriers li:nth-child(3)::after { display: block; }
}

.about-grid {
  display: grid;
  gap: calc(var(--px) * 3);
  margin-top: calc(var(--px) * -18);
  padding-bottom: clamp(72px, 9vw, 136px);
  position: relative;
}
.dirs, .weekly { padding: clamp(24px, 3.2vw, 56px); clip-path: var(--st3); }
.dirs-core {
  margin: calc(var(--px) * 3) 0 calc(var(--px) * 8);
  font-size: clamp(30px, 3.5vw, 52px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--cobalt);
  display: flex;
  flex-wrap: wrap;
  gap: 0 calc(var(--px) * 6);
}
.chips { display: flex; flex-wrap: wrap; gap: calc(var(--px) * 2); margin-top: calc(var(--px) * 3); }
.chips li {
  padding: var(--px) calc(var(--px) * 3);
  background: var(--chip);
  color: var(--chip-fg);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
  clip-path: var(--st1);
}
.weekly { display: flex; flex-direction: column; }
.weekly-h { font-size: clamp(30px, 3.5vw, 52px); font-weight: 700; line-height: 1.25; }
.weekly p { margin-top: calc(var(--px) * 3); max-width: 28em; }
.ticks { margin-top: auto; padding-top: calc(var(--px) * 8); box-sizing: content-box; width: calc(var(--px) * 83); height: calc(var(--px) * 8); }
.ticks .dim { fill: var(--peri); }
.ticks .on { fill: var(--teal); }

@media (min-width: 960px) {
  .about-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* Fz Teams */
.teams-head { padding-bottom: clamp(32px, 4vw, 56px); }
.twin { display: grid; }
.panel { display: flex; flex-direction: column; padding: clamp(32px, 4vw, 64px) var(--edge); }
.panel-a { padding-right: var(--edge); }
.panel-head { display: flex; justify-content: space-between; align-items: flex-end; gap: calc(var(--px) * 4); }
.panel-title { font-size: clamp(36px, 4vw, 56px); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.tile { display: block; flex: none; background: var(--peri); padding: calc(var(--px) * 4) calc(var(--px) * 5) 0; clip-path: var(--st2); }
.panel-lead { margin-top: calc(var(--px) * 4); font-weight: 700; font-size: clamp(17px, 1.4vw, 20px); max-width: 26em; }
.tbl { margin-top: calc(var(--px) * 6); text-align: left; }
.tbl th, .tbl td { padding: calc(var(--px) * 2) 0; vertical-align: top; font-weight: 400; }
.tbl th { font-weight: 700; padding-right: calc(var(--px) * 5); white-space: nowrap; }
.pts { margin-top: calc(var(--px) * 6); display: grid; gap: calc(var(--px) * 3); }
.pts li { display: grid; grid-template-columns: calc(var(--px) * 3) 1fr; gap: calc(var(--px) * 3); }
.pts li::before { content: ""; width: calc(var(--px) * 3); height: calc(var(--px) * 3); background: var(--cobalt); margin-top: 0.55em; }
.panel-close { margin-top: auto; padding-top: calc(var(--px) * 8); font-weight: 700; max-width: 30em; }

.twin-badge {
  z-index: 2;
  justify-self: center;
  margin-block: calc(var(--px) * -8);
  padding: calc(var(--px) * 3) calc(var(--px) * 5);
  background: var(--ink);
  color: var(--white);
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.4;
  white-space: nowrap;
  clip-path: var(--st2);
}

@media (min-width: 900px) {
  .twin { grid-template-columns: 1fr 1fr; }
  .panel-a { grid-column: 1; grid-row: 1; padding-right: clamp(80px, 8vw, 128px); }
  .panel-b { grid-column: 2; grid-row: 1; padding-left: clamp(80px, 8vw, 128px); }
  .twin-badge { grid-column: 1 / 3; grid-row: 1; align-self: center; margin-block: 0; }
  .tbl th { padding-right: calc(var(--px) * 6); }
}

.both { padding-block: clamp(32px, 4vw, 56px); }
.both-line { font-size: clamp(20px, 2.2vw, 32px); font-weight: 700; line-height: 1.5; text-wrap: balance; }

/* Cz Projects / montage */
.projects-head {
  padding-top: clamp(64px, 9vw, 136px);
  padding-bottom: clamp(32px, 4vw, 56px);
  display: grid;
  gap: calc(var(--px) * 3) clamp(32px, 6vw, 96px);
}
.projects-head .ch { margin-bottom: calc(var(--px) * 3); }
.projects-intro { font-size: clamp(17px, 1.4vw, 21px); }
@media (min-width: 960px) {
  .projects-head { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: end; }
  .projects-head .ch { grid-column: 1 / -1; }
}

.proj { position: relative; --gap-x: clamp(24px, 3.2vw, 56px); }
.proj summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "meta  tog"
    "title fig"
    "wave  fig"
    "one   one";
  grid-template-rows: auto auto 1fr auto;
  column-gap: calc(var(--px) * 4);
  padding: calc(var(--px) * 6) var(--edge);
  cursor: pointer;
  list-style: none;
}
.proj summary::-webkit-details-marker { display: none; }
.proj-meta { grid-area: meta; display: flex; align-items: center; gap: calc(var(--px) * 3); }
.proj-no { font-family: var(--font-label); font-weight: 700; font-size: 32px; line-height: 1; letter-spacing: -0.02em; }
.proj-tag {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: var(--sub);
  white-space: nowrap;
}
.proj-title { grid-area: title; margin-top: calc(var(--px) * 3); font-size: clamp(28px, 3.2vw, 48px); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.proj-one { grid-area: one; display: block; margin-top: calc(var(--px) * 3); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.7; max-width: 28em; text-wrap: pretty; }
.wave { grid-area: wave; width: 192px; height: 48px; margin-top: calc(var(--px) * 4); fill: var(--wave); align-self: end; }
.wave-b { fill: var(--wave2); }
.proj-fig {
  grid-area: fig;
  align-self: end;
  display: block;
  margin-top: calc(var(--px) * 3);
  --n: 2;
}
/* Sprites never sit straight on white or cobalt: they get a periwinkle tile. */
.proj.f-paper .proj-fig, .proj.f-cobalt .proj-fig {
  background: var(--peri);
  padding: calc(var(--px) * 3) calc(var(--px) * 4) 0;
  clip-path: var(--st2);
}
.proj-tog {
  grid-area: tog;
  position: relative;
  justify-self: end;
  align-self: center;
  width: calc(var(--px) * 5);
  height: calc(var(--px) * 5);
}
.proj-tog::before, .proj-tog::after { content: ""; position: absolute; background: currentColor; }
.proj-tog::before { left: 0; right: 0; top: calc(var(--px) * 2); height: var(--px); }
.proj-tog::after { top: 0; bottom: 0; left: calc(var(--px) * 2); width: var(--px); }
.proj[open] .proj-tog::after { display: none; }

.proj-body {
  padding: 0 var(--edge) calc(var(--px) * 12);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: calc(var(--px) * 6) var(--gap-x);
}
.pb p { max-width: 34em; }
.pb-wide { grid-column: 1 / -1; }
.pb .lbl { margin-bottom: calc(var(--px) * 2); }

.flow { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--px) * 2) 0; }
.flow li { display: flex; align-items: center; }
.flow span {
  padding: var(--px) calc(var(--px) * 3);
  background: var(--chip);
  color: var(--chip-fg);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
  white-space: nowrap;
  clip-path: var(--st1);
}
.flow li:not(:last-child)::after {
  content: "";
  flex: none;
  width: calc(var(--px) * 5);
  height: calc(var(--px) * 3);
  margin-inline: calc(var(--px) * 2);
  background: currentColor;
  clip-path: polygon(0 33.34%, 60% 33.34%, 60% 0, 80% 0, 80% 33.34%, 100% 33.34%, 100% 66.67%, 80% 66.67%, 80% 100%, 60% 100%, 60% 66.67%, 0 66.67%);
}

@media (min-width: 720px) {
  .proj summary {
    grid-template-columns: clamp(72px, 8vw, 136px) minmax(0, 1fr) auto auto;
    grid-template-areas:
      "no  tag   fig tog"
      "no  title fig tog"
      "no  one   fig tog"
      "no  wave  fig tog";
    grid-template-rows: auto auto auto 1fr;
    align-items: start;
    column-gap: 0;
    padding-block: calc(var(--px) * 7) 0;
  }
  .proj-meta { display: contents; }
  .proj-no { grid-area: no; font-size: clamp(48px, 5.2vw, 88px); line-height: 0.95; }
  .proj-tag { grid-area: tag; }
  .proj-fig { grid-area: fig; margin: 0 calc(var(--px) * 8) 0 calc(var(--px) * 8); --n: 3; }
  .proj-tog { align-self: start; margin-top: calc(var(--px) * 2); }
  .wave { margin-bottom: calc(var(--px) * 7); }
  .proj-body { padding-left: calc(var(--edge) + clamp(72px, 8vw, 136px)); padding-top: calc(var(--px) * 7); }
}
@media (min-width: 1200px) {
  .proj summary {
    grid-template-columns: clamp(72px, 8vw, 136px) minmax(0, 1fr) auto auto auto;
    grid-template-areas:
      "no  tag   wave fig tog"
      "no  title wave fig tog"
      "no  one   wave fig tog";
    grid-template-rows: auto auto 1fr;
  }
  .wave { align-self: center; margin: 0 0 0 var(--gap-x); width: 288px; height: 72px; }
  .proj-one { padding-bottom: calc(var(--px) * 7); }
}

/* Pz Recruit */
.recruit { padding-top: clamp(64px, 9vw, 136px); }
.recruit-grid { display: grid; gap: clamp(32px, 5vw, 64px); padding-bottom: clamp(48px, 7vw, 96px); }
.points { display: grid; gap: clamp(28px, 3.2vw, 48px); }
.points h3 { font-size: clamp(28px, 3.1vw, 48px); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.points p { margin-top: calc(var(--px) * 2); max-width: 28em; font-size: clamp(16px, 1.3vw, 18px); }

@media (min-width: 960px) {
  .recruit-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .points li:nth-child(2) { margin-left: clamp(40px, 5vw, 96px); }
  .points li:nth-child(3) { margin-left: clamp(80px, 10vw, 192px); }
}

.choose {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(24px, 3.2vw, 56px);
  padding-bottom: 0;
  margin-bottom: calc(var(--px) * -16);
  clip-path: var(--st3);
}
.choose-title { font-size: clamp(26px, 3vw, 44px); font-weight: 700; line-height: 1.25; }
.choose-list { margin-top: calc(var(--px) * 4); display: grid; gap: calc(var(--px) * 3); padding-bottom: calc(var(--px) * 6); }
.choose-list li { display: grid; gap: var(--px); }
.choose-list i { display: none; }
.choose-list strong { font-weight: 700; color: var(--cobalt); }
.choose-ui { margin-top: calc(var(--px) * 4); }
.choose-btns { display: grid; gap: calc(var(--px) * 2); }
.cb {
  position: relative;
  text-align: left;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  padding: calc(var(--px) * 3) calc(var(--px) * 4) calc(var(--px) * 3) calc(var(--px) * 10);
  background: var(--white);
  color: var(--ink);
  clip-path: var(--st1);
}
.cb::before {
  content: "";
  position: absolute;
  left: calc(var(--px) * 4);
  top: calc(50% - var(--px));
  width: calc(var(--px) * 2);
  height: calc(var(--px) * 2);
  background: var(--peri);
}
.cb:hover { background: var(--peri); }
.cb:hover::before { background: var(--ink); }
.cb[aria-pressed="true"] { background: var(--cobalt); color: var(--white); }
.cb[aria-pressed="true"]::before { background: var(--teal); }
.cb:focus-visible { outline-offset: calc(var(--px) * -2); outline-color: var(--ink); }
.cb[aria-pressed="true"]:focus-visible { outline-color: var(--white); }
.cb:active { transform: translateY(var(--px)); }
.choose-out { position: relative; margin-top: calc(var(--px) * 5); }
.bubble {
  display: block;
  padding: calc(var(--px) * 4) calc(var(--px) * 5);
  background: var(--ink);
  color: var(--white);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 700;
  line-height: 1.45;
  min-height: calc(var(--px) * 20);
  clip-path: var(--st2);
}
.choose-fig { justify-self: end; margin-top: calc(var(--px) * 2); --n: 3; }

@media (min-width: 720px) {
  .choose { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(24px, 4vw, 64px); }
  .choose-title, .choose-list, .choose-ui { grid-column: 1; }
  .choose-fig { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin-top: 0; }
  .choose-ui, .choose-list { padding-bottom: clamp(24px, 3.2vw, 56px); }
}
@media (min-width: 1100px) {
  .choose-fig { --n: 4; }
  .choose-ui { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(24px, 3vw, 48px); align-items: center; }
  .choose-out { margin-top: 0; }
  .choose-out::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(var(--px) * -3);
    width: calc(var(--px) * 3);
    height: calc(var(--px) * 3);
    background: var(--ink);
  }
}

/* Oz Join */
.join { padding-top: clamp(136px, 15vw, 216px); padding-bottom: clamp(80px, 10vw, 144px); }
.steps {
  position: relative;
  margin-top: clamp(32px, 4vw, 56px);
  display: grid;
  gap: calc(var(--px) * 7);
  --tile: calc(var(--px) * 24);
  --bar: calc(var(--px) * 3);
}
.steps::before {
  content: "";
  position: absolute;
  background: var(--ink);
  left: calc(var(--tile) / 2 - var(--bar) / 2);
  width: var(--bar);
  top: 0;
  bottom: 0;
}
.steps li { position: relative; display: grid; grid-template-columns: var(--tile) minmax(0, 1fr); align-content: start; column-gap: calc(var(--px) * 5); }
.step-no {
  grid-row: 1 / span 2;
  width: var(--tile);
  height: var(--tile);
  display: grid;
  place-items: center;
  background: var(--cobalt);
  color: var(--white);
  font-family: var(--font-label);
  font-size: calc(var(--px) * 12);
  font-weight: 700;
  line-height: 1;
  clip-path: var(--st2);
}
.steps h3 { font-size: clamp(20px, 1.7vw, 24px); font-weight: 700; line-height: 1.4; }
.steps p { font-size: 16px; line-height: 1.7; margin-top: var(--px); }

@media (min-width: 720px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--px) * 6); }
  .steps::before {
    left: 0;
    right: calc(var(--px) * -2);
    width: auto;
    top: calc(var(--tile) / 2 - var(--bar) / 2);
    bottom: auto;
    height: var(--bar);
  }
  .steps li { grid-template-columns: minmax(0, 1fr); }
  .step-no { grid-row: auto; margin-bottom: calc(var(--px) * 5); }
}
@media (min-width: 720px) and (max-width: 959.98px) {
  .steps { --tile: calc(var(--px) * 18); }
  .step-no { font-size: calc(var(--px) * 9); }
}

.join-foot { margin-top: clamp(40px, 5vw, 72px); display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--px) * 4) calc(var(--px) * 8); }
.status-chip {
  display: inline-block;
  padding: calc(var(--px) * 2) calc(var(--px) * 4);
  background: var(--peri-soft);
  color: var(--muted);
  font-family: var(--font-label);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.6;
  clip-path: var(--st1);
}
.join-note { font-size: 16px; color: var(--muted); }

/* Footer */
.foot { position: relative; }
.frill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: calc(var(--px) * 6);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 6' shape-rendering='crispEdges' fill='%2314246B' fill-rule='evenodd'%3E%3Cpath d='M6 0h4v1h2v1h1v1h1v1h1v1h1v1H0V5h1V4h1V3h1V2h1V1h2zM7 3h2v1H7z'/%3E%3C/svg%3E") 0 0 / calc(var(--px) * 16) calc(var(--px) * 6) repeat-x;
}
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-top: clamp(56px, 7vw, 112px);
}
.foot-quote { font-size: clamp(26px, 3.6vw, 56px); font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; }
.foot-note { margin-top: calc(var(--px) * 7); max-width: 36em; color: var(--peri-soft); }
.foot-org { margin-top: calc(var(--px) * 8); font-family: var(--font-label); font-size: 13px; letter-spacing: 0.08em; font-weight: 700; color: var(--peri); }
.foot-icp { margin-top: var(--px); font-family: var(--font-label); font-size: 12px; letter-spacing: 0.08em; color: var(--peri); }
.foot-icp a { color: inherit; }
.foot-copy { padding-bottom: clamp(40px, 5vw, 72px); }
.foot-fig { --n: 3; justify-self: end; }

@media (min-width: 720px) {
  .foot-grid { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(24px, 5vw, 96px); align-items: end; }
  .foot-fig { --n: 4; }
}

/* Motion: only when wanted, only in whole pixels, always stepped. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .wm path {
    animation: print 1ms steps(1, end) both;
    animation-delay: calc((var(--i) + 1) * 120ms);
  }
  .wm-cur {
    display: block;
    animation: cursor 600ms steps(5, end) both;
  }

  .hero-fig img { clip-path: inset(calc(var(--fig-n) * 66px) 0 0 0); }
  .fig-top {
    display: block;
    position: absolute;
    inset: 0;
    background: url("../img/mascot-hero.png") 0 0 / 100% 100% no-repeat;
    image-rendering: pixelated;
    clip-path: inset(0 0 calc(var(--fig-n) * 12px) 0);
    animation: breathe 1.6s steps(1, end) infinite;
  }
  .fig-top::before, .fig-top::after {
    content: "";
    position: absolute;
    top: calc(var(--fig-n) * 30px);
    width: calc(var(--fig-n) * 3px);
    height: calc(var(--fig-n) * 4px);
    background: #FFE8DC;
    opacity: 0;
    animation: blink 5.2s steps(1, end) infinite;
  }
  .fig-top::before { left: calc(var(--fig-n) * 18px); }
  .fig-top::after { left: calc(var(--fig-n) * 29px); }

  .wave-roll { animation: roll 2.4s steps(48, end) infinite paused; }
  .proj:hover .wave-roll, .proj[open] .wave-roll { animation-play-state: running; }

  .proj-fig .spr { animation: bob 1.4s steps(1, end) infinite paused; }
  .proj:hover .proj-fig .spr, .proj[open] .proj-fig .spr { animation-play-state: running; }

  .foot-fig { animation: bob 1.8s steps(1, end) infinite; }
  .choose-fig.hop { animation: hop 280ms steps(1, end); }
}

@keyframes print { from { opacity: 0; } to { opacity: 1; } }
@keyframes cursor {
  0% { transform: translateX(0); opacity: 1; }
  99% { opacity: 1; }
  100% { transform: translateX(120px); opacity: 0; }
}
@keyframes breathe { 50% { transform: translateY(calc(var(--fig-n) * 1px)); } }
@keyframes blink { 0%, 92% { opacity: 0; } 93%, 96% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes roll { to { transform: translateX(-48px); } }
@keyframes bob { 50% { transform: translateY(calc(var(--n) * 1px)); } }
@keyframes hop { 0% { transform: translateY(calc(var(--n) * -2px)); } 50% { transform: translateY(calc(var(--n) * -1px)); } }