/* Yingzhen Wang · E · FUSION
   B's instrument bench (graphite, brass, telemetry) + C's evidence-first structure,
   with one GPU particle field running behind the page as connective tissue.
   Layout: 12-col grid. Each chapter = content (7 cols) + a sticky figure slot (5 cols)
   that the field fills with a shape. On narrow screens the figure sits inline above. */

@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url(../fonts/archivo-var-latin.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: "Martian Mono"; font-style: normal; font-weight: 300 700; font-stretch: 75% 112.5%; font-display: swap;
  src: url(../fonts/martian-mono-var-latin.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;
}

:root {
  --bg: #0b0d0e;
  --bg-2: #111416;
  --bg-3: #171b1e;
  --panel: rgba(17, 20, 22, .78);
  --line: #242a2d;
  --line-2: #353d41;
  --fg: #e8eae5;
  --fg-2: #adb4af;
  --fg-3: #828b86;
  --accent: #d6a05e;
  --accent-2: #f0c58c;
  --accent-ink: #1b1207;
  --accent-wash: rgba(214, 160, 94, .10);
  --live: #7ccf93;
  --prog: #8fb6e8;
  --tbc: #e2c36b;
  --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 24px 60px -36px rgba(0,0,0,.9);
  /* particle palette, read by field.js */
  --pfx-mode: dark;
  --pfx-ink: 214 218 210;
  --pfx-acc: 214 160 94;
  --pfx-hot: 255 219 158;

  --cc-paper: #efebe2; --cc-ink: #151515; --cc-orange: #ff5a1f; --cc-blue: #2f55ff; --cc-grid: rgba(21,21,21,.08);
  --scr-bg: #070a12;

  --f-display: "Archivo", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --f-body: "Archivo", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --f-mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, "PingFang SC", monospace;

  --t-2xs: .625rem;   /* 10 */
  --t-xs: .6875rem;   /* 11 */
  --t-sm: .8125rem;   /* 13 */
  --t-md: 1.0625rem;  /* 17 */
  --t-lg: clamp(1.125rem, 1rem + .45vw, 1.3125rem);
  --t-xl: clamp(1.45rem, 1.15rem + 1.2vw, 2.1rem);
  --t-2xl: clamp(2rem, 1.3rem + 2.8vw, 3.5rem);
  --t-hero: clamp(3.4rem, .8rem + 10.4vw, 10.5rem);

  --gutter: 16px;
  --maxw: 1360px;
  --header-h: 60px;
  --r: 14px;
  color-scheme: dark;
}
@media (min-width: 640px) { :root { --gutter: 28px; } }
@media (min-width: 1100px) { :root { --gutter: 56px; } }

:root[data-theme="light"] {
  --bg: #eceee9; --bg-2: #e3e6e0; --bg-3: #d8dcd5; --panel: rgba(236, 238, 233, .84);
  --line: #c6cbc3; --line-2: #a6aca4;
  --fg: #101315; --fg-2: #434b47; --fg-3: #5a635e;
  --accent: #8a5214; --accent-2: #6d3f0c; --accent-ink: #fff8ee; --accent-wash: rgba(138, 82, 20, .09);
  --live: #1f7a45; --prog: #2c5f9e; --tbc: #6f5400;
  --shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 18px 40px -30px rgba(30,40,35,.5);
  /* particle palette, light: a technical-pen drawing. ink lines, brass accents, steel blue in
     flight; the streamlines behind the page are a paler ink */
  --pfx-mode: light;
  --pfx-ink: 27 42 66;
  --pfx-acc: 168 116 38;
  --pfx-hot: 78 112 158;
  --pfx-line: 40 60 92;
  --pfx-line-acc: 168 116 38;
  color-scheme: light;
}

/* theme switch (site.js): the new theme is revealed by a circle growing from the toggle, and the
   particle field re-draws itself behind the same front (field.js). Reduced motion: instant. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.theme-anim::view-transition-new(root) { animation: theme-reveal .82s cubic-bezier(.62, .04, .3, 1) both; }
@keyframes theme-reveal {
  from { clip-path: circle(0 at var(--vt-x, 100%) var(--vt-y, 0)); }
  to { clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 100%) var(--vt-y, 0)); }
}
.theme-anim *, .theme-anim *::before, .theme-anim *::after { transition: none !important; }

/* ---------- language ---------- */
:root:not([data-lang="zh"]) .zh { display: none !important; }
:root[data-lang="zh"] .en { display: none !important; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); background: var(--bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: transparent; color: var(--fg);
  font: 400 var(--t-md)/1.62 var(--f-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
:root[data-lang="zh"] body { line-height: 1.78; }
img, video, canvas, svg { max-width: 100%; display: block; }
img, video { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--accent-2); }
:root[data-theme="light"] a:hover { color: var(--accent); }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
button { font: inherit; color: inherit; }
.nw { white-space: nowrap; }
@media (max-width: 400px) { .nw { white-space: normal; } }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: 650; line-height: 1.08; letter-spacing: -.012em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd, figure { margin: 0; padding: 0; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 8px; top: -60px; z-index: 100; background: var(--accent); color: var(--accent-ink); padding: 10px 14px; border-radius: 8px; font: 500 var(--t-sm)/1 var(--f-mono); text-decoration: none; }
.skip:focus { top: 8px; }
.mono { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; font-weight: 450; }
:root[data-lang="zh"] .mono .zh { letter-spacing: .04em; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--fg-2); }
.faint { color: var(--fg-3); }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.arr { display: inline-block; font-family: var(--f-mono); transition: transform .2s; }

/* ---------- field canvas + page layers ---------- */
#field { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none; }
.page { position: relative; z-index: 1; }
/* the bench: faint 12-column hairlines behind everything */
.bench { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.bench .wrap { height: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 clamp(20px, 2.4vw, 36px); }
.bench i { border-left: 1px solid color-mix(in srgb, var(--line) 38%, transparent); }
.bench i:last-child { border-right: 1px solid color-mix(in srgb, var(--line) 38%, transparent); }
.bench { -webkit-mask: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); mask: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); }
@media (max-width: 900px) { .bench { display: none; } }

/* ---------- header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 30; height: var(--header-h);
  background: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.site-header .wrap { height: 100%; display: flex; align-items: center; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.brand-mark { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font: 700 11px/1 var(--f-mono); letter-spacing: .02em; }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a { text-decoration: none; padding: 8px 10px; border-radius: 8px; color: var(--fg-2); font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.nav a:hover { color: var(--fg); background: var(--bg-3); }
.nav a[aria-current="true"] { color: var(--fg); }
.nav a[aria-current="true"]::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: 1px; }
.toggles { display: flex; gap: 6px; align-items: center; }
.tgl {
  min-height: 36px; min-width: 36px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line-2); background: transparent; color: var(--fg-2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 2px; font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .04em;
}
.tgl:hover { color: var(--fg); border-color: var(--fg-3); }
.tgl b { color: var(--fg); font-weight: 600; }
.tgl .sep { opacity: .4; margin: 0 2px; }
.tgl svg { width: 16px; height: 16px; }
.menu-btn { display: none; }
.cv-link { margin-left: 4px; }
@media (max-width: 1080px) {
  .nav { position: fixed; top: var(--header-h); left: 0; right: 0; flex-direction: column; gap: 0; padding: 8px var(--gutter) 18px; background: var(--bg); border-bottom: 1px solid var(--line); display: none; margin: 0; }
  .nav.open { display: flex; }
  .nav a { padding: 14px 4px; font-size: var(--t-sm); border-bottom: 1px solid var(--line); border-radius: 0; }
  .menu-btn { display: inline-flex; }
  .toggles { margin-left: auto; }
}
@media (max-width: 420px) { .cv-link { display: none; } }
@media (max-width: 360px) { .brand .brand-name { display: none; } }

/* ---------- chapter rail (desktop) + field readout ---------- */
.rail { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 20; list-style: none; margin: 0; padding: 0; display: none; }
@media (min-width: 1560px) { .rail { display: block; } }
.rail li a { display: flex; align-items: center; justify-content: flex-end; gap: 8px; text-decoration: none; padding: 3px 0; color: var(--fg-3); font: 500 9px/1 var(--f-mono); letter-spacing: .08em; }
.rail li a .l { opacity: 0; transform: translateX(4px); transition: opacity .2s, transform .2s; }
.rail li a::after { content: ""; width: 10px; height: 1px; background: currentColor; transition: width .25s, background .25s; }
.rail li a:hover .l, .rail li.on a .l, .rail li a:focus-visible .l { opacity: 1; transform: none; }
.rail li.on a { color: var(--accent); }
.rail li.on a::after { width: 22px; background: var(--accent); }
.rail li a .n { opacity: .7; }

.hud-dock {
  position: fixed; left: 16px; bottom: 14px; z-index: 20; display: flex; gap: 12px; align-items: center;
  padding: 7px 11px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: 500 9.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); pointer-events: none;
}
.hud-dock b { color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; }
.hud-dock .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--live); box-shadow: 0 0 8px var(--live); }
.no-gl .hud-dock .gl-only, .no-gl .gl-only { display: none; }
.nogl-only { display: none; } .no-gl .nogl-only { display: block; }
.still-fps { display: none; } .field-still .still-fps { display: inline; } .field-still .live-fps, .field-still .hud-dock .opt { display: none; }
.hud-dock { transition: opacity .2s ease, visibility 0s linear 0s; }
.hud-dock.tucked { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
@media (min-width: 901px) { .hud-dock { left: auto; right: 16px; } }
@media (max-width: 640px) { .hud-dock { display: none; } }
@media print { .hud-dock, .rail { display: none; } }

/* ---------- section head ---------- */
.sh { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(22px, 3vw, 34px); color: var(--fg-3); }
.sh .idx { color: var(--accent); }
.sh .rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), var(--line) 60%, transparent); min-width: 24px; }
.sh .meta { white-space: nowrap; }
@media (max-width: 560px) { .sh { flex-wrap: wrap; } .sh .rule { order: 3; flex-basis: 100%; } .sh .meta { white-space: normal; } }
.h2 { font-size: var(--t-2xl); font-weight: 640; max-width: 18ch; }
:root[data-lang="zh"] .h2 { max-width: 15em; letter-spacing: 0; font-weight: 600; }
.lead { font-size: var(--t-lg); color: var(--fg-2); line-height: 1.55; max-width: 60ch; }
:root[data-lang="zh"] .lead { line-height: 1.8; }

/* ---------- status pills ---------- */
.st { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; border-radius: 99px; border: 1px solid var(--line-2); font: 500 var(--t-2xs)/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: var(--fg-2); }
.st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid currentColor; }
.st.live { color: var(--live); border-color: color-mix(in srgb, var(--live) 45%, transparent); }
.st.live::before { background: currentColor; box-shadow: 0 0 8px currentColor; }
.st.site { color: var(--live); border-color: color-mix(in srgb, var(--live) 35%, transparent); }
.st.site::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.st.prog { color: var(--prog); border-color: color-mix(in srgb, var(--prog) 40%, transparent); }
.st.prog::before { border-style: dashed; }
.st.review { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.st.explore { color: var(--fg-3); border-style: dashed; }
.st.explore::before { border-radius: 1px; transform: rotate(45deg); width: 5px; height: 5px; }
.tbc {
  display: inline; padding: 1px 6px; border-radius: 4px; border: 1px dashed color-mix(in srgb, var(--tbc) 70%, transparent); background: color-mix(in srgb, var(--tbc) 12%, transparent);
  color: var(--tbc); font: 500 var(--t-2xs)/1.6 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px; border-radius: 10px; text-decoration: none; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--panel); color: var(--fg); font: 500 var(--t-sm)/1 var(--f-mono); letter-spacing: .03em;
  transition: background .15s, border-color .15s, transform .15s, color .15s;
}
.btn:hover { border-color: var(--fg-3); background: var(--bg-3); color: var(--fg); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--accent-ink); }
:root[data-theme="light"] .btn.primary:hover { color: var(--accent-ink); }
.btn:hover .arr { transform: translateX(3px); }
.textlink { font: 500 var(--t-xs)/1.4 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--accent); text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.textlink:hover { color: var(--accent-2); }
:root[data-theme="light"] .textlink:hover { color: var(--accent-2); }
.textlink:hover .arr { transform: translateX(3px); }
.ext::after { content: "↗"; font-family: var(--f-mono); margin-left: 2px; }

/* ---------- chapter frame ---------- */
.chapter { position: relative; padding-block: clamp(84px, 13vh, 150px) clamp(40px, 6vh, 80px); }
.ch-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 clamp(20px, 2.4vw, 36px); align-items: start; }
.ch-main { grid-column: 1 / span 7; min-width: 0; }
.ch-fig { grid-column: 8 / span 5; min-width: 0; height: 100%; }
.ch-fig .fig { position: sticky; top: calc(var(--header-h) + max(4vh, (100vh - var(--header-h) - min(72vh, 600px)) / 2)); }
@media (max-width: 900px) {
  .ch-main, .ch-fig { grid-column: 1 / -1; }
  .ch-fig { order: -1; height: auto; margin-bottom: 26px; }
  .ch-fig .fig { position: relative; top: 0; }
}

/* the figure slot the field draws into: an instrument frame with calibration marks */
.fig { position: relative; height: min(72vh, 600px); min-height: 340px; color: var(--fg-3); }
@media (max-width: 900px) { .fig { height: min(96vw, 440px); min-height: 280px; } }
.fig .slot { position: absolute; inset: 36px 0 84px; }
.fig .frame { position: absolute; inset: 22px 0 70px; pointer-events: none; }
.fig .frame::before, .fig .frame::after { content: ""; position: absolute; width: 18px; height: 18px; border: 1px solid var(--line-2); transition: border-color .4s, width .4s, height .4s; }
.fig .frame::before { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.fig .frame::after { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.fig .frame i { position: absolute; width: 18px; height: 18px; border: 1px solid var(--line-2); transition: border-color .4s, width .4s, height .4s; }
.fig .frame i:nth-child(1) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.fig .frame i:nth-child(2) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.fig .frame .ticks { position: absolute; left: 50%; top: 0; bottom: 0; width: 0; }
.fig .frame .ticks::before { content: ""; position: absolute; left: -40px; width: 80px; top: 0; height: 5px; background: repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 10px); }
.fig .frame .ticks::after { content: ""; position: absolute; left: -40px; width: 80px; bottom: 0; height: 5px; background: repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 10px); }
.fig .cross { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4px 0 0 -4px; opacity: .55; }
.fig .cross::before, .fig .cross::after { content: ""; position: absolute; background: var(--line-2); }
.fig .cross::before { left: 4px; top: 0; bottom: 0; width: 1px; }
.fig .cross::after { top: 4px; left: 0; right: 0; height: 1px; }
.gl .fig .cross { opacity: 0; }
.fig .tag { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; gap: 12px; font: 500 var(--t-2xs)/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.fig .tag b { color: var(--fg-2); font-weight: 500; }
.fig figcaption { position: absolute; left: 0; right: 0; bottom: 0; height: 58px; align-items: flex-start; display: flex; justify-content: space-between; gap: 14px; font: 450 var(--t-2xs)/1.45 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; }
.fig figcaption .fc { color: var(--fg-2); max-width: 34ch; }
.fig figcaption .rd { white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.is-live .fig .frame::before, .is-live .fig .frame::after, .is-live .fig .frame i { border-color: var(--accent); width: 26px; height: 26px; }
.is-live .fig .tag b { color: var(--accent); }
.fig .still { position: absolute; inset: 36px 0 84px; width: 100%; height: calc(100% - 120px); object-fit: contain; display: none; }
.no-gl .fig .still.d { display: block; }
:root[data-theme="light"].no-gl .fig .still.d { display: none; }
:root[data-theme="light"].no-gl .fig .still.l { display: block; }

/* ---------- hero ---------- */
.hero { min-height: 100svh; padding-top: calc(var(--header-h) + clamp(28px, 7vh, 80px)); padding-bottom: clamp(36px, 6vh, 64px); display: flex; flex-direction: column; justify-content: flex-end; }
.eyebrow { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; color: var(--fg-2); margin-bottom: clamp(18px, 3vh, 30px); }
.eyebrow .open { display: inline-flex; align-items: center; gap: 9px; color: var(--fg); }
.eyebrow .open::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 4px color-mix(in srgb, var(--live) 18%, transparent); }
.name {
  font-size: var(--t-hero); line-height: .86; font-weight: 720; letter-spacing: -.035em; margin-left: -.04em;
  font-variation-settings: normal; transition: opacity .2s linear;
}
.name .ln { display: block; }
/* route telemetry under the name; the top margin clears the descenders of the particle-traced name */
.route { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-top: calc(var(--t-hero) * .2); color: var(--fg-3); font-size: var(--t-2xs); letter-spacing: .1em; }
.route .stop { display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.route b { font-weight: 600; color: var(--fg-2); }
.route i { font-style: normal; font-size: .92em; opacity: .85; font-variant-numeric: tabular-nums; }
.route .hop { color: var(--fg-3); }
.route .now b { color: var(--accent); }
.route .now b::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 7px; vertical-align: 1px; box-shadow: 0 0 0 3px var(--accent-wash); }
.route em { font-style: normal; margin-left: 7px; padding: 1px 5px; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 4px; color: var(--accent); letter-spacing: .08em; }
@media (max-width: 640px) { .route { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; } .route .hop { display: none; } .route .stop { flex-direction: column; gap: 3px; } .route em { margin-left: 0; margin-top: 3px; display: inline-block; } }
.hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px clamp(20px, 2.4vw, 36px); margin-top: clamp(26px, 5vh, 54px); align-items: end; }
.hero-copy { grid-column: 1 / span 7; display: grid; gap: 18px; }
.hero-line { font-size: clamp(1.2rem, 1rem + .9vw, 1.62rem); line-height: 1.4; font-weight: 440; letter-spacing: -.005em; max-width: 36ch; }
:root[data-lang="zh"] .hero-line { line-height: 1.7; max-width: 26em; letter-spacing: .01em; }
.hero-line strong { font-weight: 600; color: var(--fg); }
.hero-sub { color: var(--fg-2); max-width: 56ch; font-size: var(--t-md); }
.hero-sub em { font-style: normal; color: var(--accent); font-family: var(--f-mono); font-size: .88em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.spec { grid-column: 8 / span 5; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-2); }
.spec > div { padding: 14px 14px 12px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.spec > div:nth-child(odd) { padding-right: 16px; border-right: 1px solid var(--line); }
.spec > div:nth-child(even) { padding-left: 16px; }
.spec dt { color: var(--fg-3); margin-bottom: 6px; }
.spec dd { font: 600 clamp(1.25rem, 1rem + .9vw, 1.7rem)/1.05 var(--f-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.spec dd small { display: block; margin-top: 6px; font: 400 var(--t-sm)/1.4 var(--f-body); letter-spacing: 0; color: var(--fg-2); }
.spec dd a { text-decoration: none; }
.spec dd a:hover small { color: var(--accent); }
@media (max-width: 1000px) { .hero-copy, .spec { grid-column: 1 / -1; } }
@media (max-width: 480px) { .spec dd { font-size: 1.2rem; } .spec > div:nth-child(odd) { padding-right: 10px; } .spec > div:nth-child(even) { padding-left: 10px; } }
.scroll-cue { margin-top: clamp(22px, 4vh, 40px); display: flex; align-items: center; gap: 12px; color: var(--fg-3); }
.scroll-cue::before { content: ""; width: 1px; height: 28px; background: linear-gradient(var(--accent), transparent); }

/* ---------- capability matrix ---------- */
.matrix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-top: clamp(28px, 4vw, 44px); }
@media (max-width: 640px) { .matrix { grid-template-columns: 1fr; } }
.cap { background: var(--panel); padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; position: relative; transition: background .25s; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .cap { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } }
.cap:hover { background: color-mix(in srgb, var(--bg-3) 92%, transparent); }
.cap header { display: flex; align-items: baseline; gap: 10px; }
.cap .code { color: var(--accent); font: 600 var(--t-2xs)/1 var(--f-mono); letter-spacing: .12em; padding: 4px 6px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 4px; }
.cap h3 { font-size: 1.12rem; font-weight: 620; letter-spacing: -.01em; line-height: 1.25; }
:root[data-lang="zh"] .cap h3 { letter-spacing: 0; }
.cap p { color: var(--fg-2); font-size: .95rem; line-height: 1.55; }
:root[data-lang="zh"] .cap p { line-height: 1.75; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; list-style: none; }
.chips li { font: 450 10px/1 var(--f-mono); letter-spacing: .03em; padding: 5px 7px; border-radius: 5px; background: color-mix(in srgb, var(--fg) 6%, transparent); color: var(--fg-2); white-space: nowrap; }
.cap .proof { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line-2); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cap .proof .m { font: 500 var(--t-xs)/1.35 var(--f-mono); letter-spacing: .02em; color: var(--fg); }
.cap .proof a { flex: none; }
.cap .proof a::before { content: ""; position: absolute; inset: 0; }
.cap .proof a:focus-visible { outline: none; }
.cap:has(.proof a:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---------- case studies ---------- */
.case-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; color: var(--fg-3); }
.case-title { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem); font-weight: 680; letter-spacing: -.03em; line-height: .98; }
.case-title small { display: block; font: 450 var(--t-lg)/1.4 var(--f-body); letter-spacing: -.005em; color: var(--fg-2); margin-top: 12px; max-width: 46ch; }
:root[data-lang="zh"] .case-title small { letter-spacing: 0; }
.pasr { display: grid; grid-template-columns: 112px minmax(0, 1fr); margin-top: 28px; border-top: 1px solid var(--line-2); }
.pasr dt, .pasr dd { padding: 16px 0; border-bottom: 1px solid var(--line); }
.pasr dt { color: var(--fg-3); padding-right: 14px; padding-top: 19px; }
.pasr dt::before { content: attr(data-n); color: var(--accent); margin-right: 8px; }
.pasr dd { color: var(--fg-2); line-height: 1.6; }
.pasr dd b { color: var(--fg); font-weight: 560; }
.pasr dd p + p { margin-top: 10px; }
:root[data-lang="zh"] .pasr dd { line-height: 1.82; }
@media (max-width: 560px) { .pasr { grid-template-columns: 1fr; } .pasr dt { border-bottom: 0; padding-bottom: 0; } .pasr dd { padding-top: 8px; } }
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-top: 22px; }
.metrics div { background: var(--panel); padding: 12px 14px; }
.metrics dt { color: var(--fg-3); font-size: var(--t-2xs); }
.metrics dd { font: 600 1.3rem/1.15 var(--f-display); letter-spacing: -.02em; margin-top: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 20px; }
.links a { overflow-wrap: anywhere; min-width: 0; }
.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.shots figure { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); }
.shots img, .shots video { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.shots.wide img { aspect-ratio: 4 / 3; }
.shots.phone img { aspect-ratio: 9 / 19.5; object-fit: cover; object-position: top; }
.shots figcaption { position: absolute; left: 8px; bottom: 8px; padding: 4px 7px; border-radius: 5px; background: rgba(8,10,11,.72); color: #e8eae5; font: 500 9px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 520px) { .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shots > :nth-child(3) { display: none; } }
.subcase { margin-top: 26px; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); align-items: start; }
.subcase img { width: 92px; border-radius: 10px; aspect-ratio: 9 / 19.5; object-fit: cover; object-position: top; border: 1px solid var(--line); }
.subcase h4 { font-size: 1.05rem; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.subcase p { color: var(--fg-2); font-size: .95rem; }
.subcase p + p { margin-top: 8px; }
.vctl { position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(255,255,255,.25); background: rgba(8,10,11,.6); color: #fff; display: grid; place-items: center; cursor: pointer; }
.vctl svg { width: 11px; height: 11px; }
.quote { margin-top: 22px; padding: 16px 18px; border-left: 2px solid var(--accent); background: var(--accent-wash); color: var(--fg); font-size: 1.02rem; line-height: 1.55; border-radius: 0 10px 10px 0; }
.quote span.src { display: block; margin-top: 8px; color: var(--fg-3); }

.also { margin-top: clamp(40px, 6vw, 70px); }
.rows { list-style: none; border-top: 1px solid var(--line-2); }
.rows li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr) auto; gap: 8px 22px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.rows h4 { font-size: 1.02rem; font-weight: 600; }
.rows p { color: var(--fg-2); font-size: .94rem; }
@media (max-width: 700px) { .rows li { grid-template-columns: minmax(0, 1fr) auto; } .rows li p { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- experience ---------- */
.tl { list-style: none; position: relative; margin-top: 30px; }
.tl > li { position: relative; padding: 0 0 34px 30px; }
.tl > li::before { content: ""; position: absolute; left: 4px; top: 10px; bottom: 0; width: 1px; background: linear-gradient(var(--line-2), var(--line)); }
.tl > li:last-child::before { bottom: 30px; }
.tl > li::after { content: ""; position: absolute; left: 0; top: 6px; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--accent); background: var(--bg); }
.tl > li.now::after { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-wash); }
.tl .when { color: var(--fg-3); }
.tl h3 { font-size: var(--t-xl); margin-top: 6px; letter-spacing: -.02em; }
.tl .ctx { color: var(--fg-2); margin-top: 6px; }
.ws { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
@media (max-width: 640px) { .ws { grid-template-columns: 1fr; } }
.ws article { border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: var(--panel); display: flex; flex-direction: column; gap: 8px; }
.ws h4 { font-size: 1rem; font-weight: 600; display: flex; gap: 8px; align-items: baseline; }
.ws h4 .mono { color: var(--accent); }
.ws p { color: var(--fg-2); font-size: .92rem; line-height: 1.55; }
:root[data-lang="zh"] .ws p { line-height: 1.75; }
.ws .chips { margin-top: auto; padding-top: 6px; }
.redact { margin-top: 16px; display: flex; gap: 10px; align-items: flex-start; color: var(--fg-3); font-size: var(--t-sm); }
.redact::before { content: ""; flex: none; width: 34px; height: 10px; margin-top: 5px; background: repeating-linear-gradient(90deg, var(--fg-3) 0 6px, transparent 6px 8px); opacity: .6; border-radius: 2px; }
.practice { margin-top: 16px; color: var(--fg-2); font-size: .95rem; }
.practice b { color: var(--fg); font-weight: 560; }

/* ---------- lab ---------- */
.lab-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 30px; }
@media (max-width: 1200px) { .lab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cell .media { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--scr-bg); aspect-ratio: 3 / 4; }
.cell video, .cell img { width: 100%; height: 100%; object-fit: cover; }
.cell h3 { margin-top: 10px; font-size: 1rem; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--f-mono); letter-spacing: .04em; font-weight: 600; }
.cell p { color: var(--fg-2); font-size: .9rem; margin-top: 6px; line-height: 1.5; }
.bench-list { margin-top: 36px; }
.bench-list .rows li { grid-template-columns: 64px minmax(0, 1fr) auto; }
.bench-list .rows img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; border: 1px solid var(--line); grid-row: span 2; }
.bench-list .rows h4 { align-self: end; }
.bench-list .rows p { grid-column: 2 / 3; }
@media (max-width: 700px) { .bench-list .rows li { grid-template-columns: 52px minmax(0, 1fr) auto; } .bench-list .rows img { width: 52px; height: 52px; } .bench-list .rows p { grid-column: 2 / -1; grid-row: auto; } }

.playground { position: relative; z-index: 2; padding-block: clamp(60px, 9vh, 110px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 94%, transparent); }
.pg-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); margin-top: 34px; align-items: start; }
@media (max-width: 1000px) { .pg-grid { grid-template-columns: 1fr; } }
.pg-grid > div { min-width: 0; }
.pg-grid h3 { font-size: 1.2rem; margin-bottom: 8px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.pg-grid .note { color: var(--fg-2); font-size: .94rem; margin-bottom: 18px; max-width: 52ch; }
.device { position: relative; border: 1px solid var(--line-2); border-radius: 26px; padding: 12px; background: var(--bg-2); box-shadow: var(--shadow); max-width: 420px; margin-left: 28px; }
.device::before { content: ""; position: absolute; left: -18px; top: 12px; bottom: 12px; width: 10px; background: repeating-linear-gradient(180deg, var(--line-2) 0 1px, transparent 1px calc(100% / 32)); }
.device::after { content: ""; position: absolute; left: -26px; top: 12px; bottom: 12px; width: 18px; background: repeating-linear-gradient(180deg, var(--fg-3) 0 1px, transparent 1px calc(100% / 4)); -webkit-mask: linear-gradient(90deg, transparent 8px, #000 8px); mask: linear-gradient(90deg, transparent 8px, #000 8px); }
@media (max-width: 480px) { .device { margin-left: 0; } .device::before, .device::after { display: none; } }
.screen { position: relative; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: var(--scr-bg); touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.screen:active { cursor: grabbing; }
.screen canvas, .screen img.still { width: 100%; height: 100%; image-rendering: pixelated; }
.screen img.still { object-fit: cover; position: absolute; inset: 0; }
.hud { position: absolute; inset: 0; pointer-events: none; padding: 12px 14px; display: flex; flex-direction: column; justify-content: space-between; color: rgba(225,235,255,.82); font: 500 10px/1.35 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.hud .row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.hud .t1 { color: #fff; } .hud .t2 { opacity: .6; }
.hud .dial { width: 22px; height: 22px; border: 1px solid rgba(225,235,255,.5); border-radius: 50%; position: relative; }
.hud .dial i { position: absolute; left: 50%; top: 50%; width: 1px; height: 9px; background: #fff; transform-origin: 50% 0; transform: rotate(var(--a, 0deg)); }
.screen img.still:not([hidden]) ~ .hud { display: none; }
.device-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 12px 4px 2px; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 9px; overflow: hidden; }
.seg button { border: 0; background: transparent; padding: 0 10px; min-height: 36px; cursor: pointer; color: var(--fg-2); font: 500 10px/1 var(--f-mono); letter-spacing: .08em; display: inline-flex; gap: 6px; align-items: center; }
.seg button + button { border-left: 1px solid var(--line-2); }
.seg button[aria-pressed="true"] { background: var(--bg-3); color: var(--fg); }
.swatch { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.minibtn { border: 1px solid var(--line-2); background: transparent; border-radius: 9px; padding: 0 10px; min-height: 36px; cursor: pointer; color: var(--fg-2); font: 500 10px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.minibtn:hover, .minibtn[aria-pressed="true"] { color: var(--fg); background: var(--bg-3); }
.readouts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); margin-top: 12px; }
.readouts div { padding: 10px 4px 0; }
.readouts dt { color: var(--fg-3); }
.readouts dd { margin: 4px 0 0; font: 500 var(--t-sm)/1.2 var(--f-mono); font-variant-numeric: tabular-nums; }
.screen .run { position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%); white-space: nowrap; }

.cc { background: var(--cc-paper); color: var(--cc-ink); border-radius: 22px; padding: clamp(14px, 2.4vw, 24px); border: 1px solid var(--line-2); box-shadow: var(--shadow); position: relative; overflow: hidden;
  background-image: linear-gradient(var(--cc-grid) 1px, transparent 1px), linear-gradient(90deg, var(--cc-grid) 1px, transparent 1px); background-size: 24px 24px; }
.cc-top { display: flex; justify-content: space-between; gap: 10px; font: 600 10px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.cc-top .pip { display: inline-flex; gap: 4px; }
.cc-top .pip i { width: 8px; height: 8px; border-radius: 2px; border: 1.5px solid var(--cc-ink); display: block; }
.cc-top .pip i.on { background: var(--cc-orange); border-color: var(--cc-orange); }
.cc-top .pip i.done { background: var(--cc-ink); }
.cc-word { margin: clamp(18px, 3vw, 30px) 0 clamp(12px, 2vw, 20px); height: clamp(44px, 7vw, 74px); display: flex; align-items: center; }
.cc-word span { display: inline-block; font: 800 clamp(1.8rem, 1.2rem + 2.6vw, 3.4rem)/1 var(--f-display); font-stretch: 125%; letter-spacing: -.02em; padding: 4px 14px 6px; transform-origin: left center; }
.cc-word span.turn { background: var(--cc-orange); transform: skewX(-8deg); }
.cc-word span.good { background: var(--cc-ink); color: var(--cc-paper); }
.cc-word span.pop { animation: pop .35s cubic-bezier(.2, 1.4, .4, 1); }
.cc-word span.turn.pop { animation: popskew .35s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pop { from { transform: scale(.85); opacity: .3; } to { transform: scale(1); opacity: 1; } }
@keyframes popskew { from { transform: skewX(-8deg) scale(.85); opacity: .3; } to { transform: skewX(-8deg) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cc-word span.pop, .cc-word span.turn.pop { animation: none; } }
.lanes { position: relative; display: grid; gap: 14px; padding-block: 6px; }
.lane { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 10px; font: 600 10px/1 var(--f-mono); letter-spacing: .1em; }
.track { position: relative; height: clamp(26px, 4vw, 38px); }
.track .bar { position: absolute; inset: 0; background: var(--cc-ink); }
.lane.you .track .bar { background: var(--cc-orange); }
.track .cut { position: absolute; top: -6px; bottom: -6px; width: 6px; margin-left: -3px; background: var(--cc-paper); transition: opacity .2s; }
.track .cut.hide { opacity: 0; }
.track .hit { position: absolute; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 3px solid var(--cc-ink); pointer-events: none; }
.track .hit.perfect { background: var(--cc-paper); }
.track .hit.nice { background: transparent; }
.track .hit.miss { border: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; }
.track .hit.miss::before, .track .hit.miss::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--cc-ink); transform: rotate(45deg); }
.track .hit.miss::after { transform: rotate(-45deg); }
.track .ph { position: absolute; top: -9px; bottom: -9px; width: 3px; margin-left: -1.5px; background: var(--cc-blue); left: 0; pointer-events: none; opacity: 0; z-index: 2; }
.beats { display: grid; grid-template-columns: 48px 1fr; gap: 10px; margin-top: 10px; }
.beats .dots { display: grid; grid-template-columns: repeat(8, 1fr); justify-items: center; align-items: center; height: 10px; }
.beats .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--cc-ink); opacity: .25; display: block; }
.beats .dots i.q { width: 8px; height: 8px; opacity: .55; }
.beats .dots i.now { opacity: 1; background: var(--cc-blue); }
.cc.ears .lanes, .cc.ears .beats { opacity: .1; }
.cc-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 20px; }
.cc-score { font: 600 10px/1.5 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; display: flex; gap: 14px; flex-wrap: wrap; }
.cc-score b { font-size: 13px; font-variant-numeric: tabular-nums; }
.cc-btn { border: 2px solid var(--cc-ink); background: var(--cc-ink); color: var(--cc-paper); border-radius: 12px; cursor: pointer; font: 700 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding: 0 16px; min-height: 44px; }
.cc-btn:focus-visible, .tap:focus-visible, .hints button:focus-visible { outline: 3px solid var(--cc-blue); outline-offset: 2px; }
.tap { width: 100%; margin-top: 16px; min-height: 72px; border-radius: 16px; border: 2px solid var(--cc-ink); cursor: pointer; background: var(--cc-orange); color: var(--cc-ink); font: 800 1.4rem/1 var(--f-display); font-stretch: 125%; letter-spacing: .02em;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; box-shadow: 0 5px 0 var(--cc-ink); transition: transform .05s, box-shadow .05s; }
.tap small { display: block; font: 600 10px/1 var(--f-mono); letter-spacing: .12em; margin-top: 6px; opacity: .7; }
.tap:active, .tap.down { transform: translateY(4px); box-shadow: 0 1px 0 var(--cc-ink); }
.tap:disabled { background: transparent; cursor: default; opacity: .6; }
.hints { display: inline-flex; border: 2px solid var(--cc-ink); border-radius: 10px; overflow: hidden; }
.hints button { border: 0; background: transparent; color: var(--cc-ink); font: 700 10px/1 var(--f-mono); letter-spacing: .1em; padding: 0 10px; min-height: 36px; cursor: pointer; }
.hints button + button { border-left: 2px solid var(--cc-ink); }
.hints button[aria-pressed="true"] { background: var(--cc-ink); color: var(--cc-paper); }

/* ---------- education ---------- */
.degree { margin-top: 6px; }
.degree .when { color: var(--fg-3); }
.degree h3 { font-size: var(--t-xl); letter-spacing: -.02em; margin-top: 8px; }
.degree .sub { color: var(--fg-2); margin-top: 8px; font-size: 1.02rem; }
.facts { list-style: none; margin-top: 22px; border-top: 1px solid var(--line-2); }
.facts li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--fg-2); }
.facts li::before { content: "▸"; color: var(--accent); font-family: var(--f-mono); font-size: 12px; line-height: 1.9; }
.facts li b { color: var(--fg); font-weight: 560; }
.facts li .mono { display: block; margin-top: 4px; color: var(--fg-3); }
.medal { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); }
.medal::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--accent-2), var(--accent) 60%, color-mix(in srgb, var(--accent) 50%, #000)); }
.board { margin-top: clamp(36px, 5vw, 56px); }
.board table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.board caption { text-align: left; caption-side: top; padding-bottom: 12px; color: var(--fg-3); }
.board th, .board td { text-align: left; padding: 13px 12px 13px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.board thead th { color: var(--fg-3); font: 500 var(--t-2xs)/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; border-bottom-color: var(--line-2); }
.board tbody th { font-weight: 560; color: var(--fg); }
.board td { color: var(--fg-2); }
.board td.y { font-family: var(--f-mono); font-size: var(--t-xs); white-space: nowrap; color: var(--fg-3); }
.board tbody th small { display: block; font: 400 var(--t-sm)/1.4 var(--f-body); color: var(--fg-2); margin-top: 3px; }
@media (max-width: 600px) {
  .board thead { display: none; }
  .board tr { display: grid; grid-template-columns: 1fr auto; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .board th, .board td { border: 0; padding: 2px 0; }
  .board td.who { grid-column: 1 / -1; }
}

/* ---------- method ---------- */
.org { margin-top: 30px; display: grid; gap: 10px; }
.org .tier { display: grid; gap: 10px; }
.org .tier.t2 { grid-template-columns: 1fr 1fr; }
.org .tier.t3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.node { border: 1px solid var(--line); background: var(--panel); border-radius: 11px; padding: 12px 14px; min-width: 0; }
.node.me { border-color: var(--accent); background: var(--accent-wash); }
.node .mono { color: var(--accent); display: block; margin-bottom: 4px; }
.node b { font-weight: 600; display: block; font-size: .98rem; }
.node span.d { color: var(--fg-2); font-size: .88rem; line-height: 1.45; display: block; margin-top: 4px; }
.org .link { height: 14px; position: relative; }
.org .link::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: repeating-linear-gradient(180deg, var(--accent) 0 3px, transparent 3px 6px); }
@media (max-width: 560px) { .org .tier.t3 { grid-template-columns: 1fr; } .org .tier.t2 { grid-template-columns: 1fr; } }
.principles { list-style: none; counter-reset: p; margin-top: 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
@media (max-width: 640px) { .principles { grid-template-columns: 1fr; } }
.principles li { background: var(--panel); padding: 18px; counter-increment: p; }
.principles li::before { content: "P" counter(p, decimal-leading-zero); display: block; color: var(--accent); font: 600 var(--t-2xs)/1 var(--f-mono); letter-spacing: .12em; margin-bottom: 10px; }
.principles h4 { font-size: 1.02rem; font-weight: 600; }
.principles p { color: var(--fg-2); font-size: .92rem; margin-top: 6px; line-height: 1.55; }
.toolbelt { margin-top: 22px; color: var(--fg-2); font-size: .95rem; }

/* ---------- writing ---------- */
.plain { position: relative; padding-block: clamp(84px, 12vh, 140px) clamp(20px, 3vh, 40px); }
.writing { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 3vw, 40px); margin-top: 30px; align-items: start; }
@media (max-width: 900px) { .writing { grid-template-columns: 1fr; } }
.post { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 20px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); align-items: start; }
.post img { border-radius: 8px; border: 1px solid var(--line); aspect-ratio: 3 / 4; object-fit: cover; width: 160px; }
.post h3 { font-size: 1.25rem; line-height: 1.25; margin-top: 8px; }
.post p { color: var(--fg-2); margin-top: 8px; font-size: .95rem; }
.post p.meta { font-size: var(--t-2xs); margin-top: 0; }
.post .meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; color: var(--fg-3); }
@media (max-width: 520px) { .post { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 14px; } .post img { width: 96px; } }
.xhs { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); align-items: start; }
.xhs .qr { width: 132px; height: 132px; border-radius: 8px; image-rendering: auto; }
.xhs h3 { font-size: 1.1rem; margin: 6px 0 8px; }
.xhs .acct { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.xhs .acct b { font-size: 1.05rem; }
.xhs .acct .mono { color: var(--fg-3); font-size: var(--t-2xs); letter-spacing: .06em; }
.xhs p.muted { font-size: .9rem; margin-top: 6px; }
@media (max-width: 420px) { .xhs { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 14px; } .xhs .qr { width: 96px; height: 96px; } }
.explainers { margin-top: clamp(28px, 4vw, 44px); }
.ex-head h3 { font-size: var(--t-xl); line-height: 1.15; letter-spacing: -.015em; }
.ex-head p { color: var(--fg-2); font-size: .95rem; max-width: 66ch; margin-top: 8px; }
.exgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.ex { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); }
.ex-t { font-size: 1rem; font-weight: 600; letter-spacing: -.005em; }
.ex-stage { position: relative; aspect-ratio: 16 / 10; }
.ex-stage canvas { display: block; width: 100%; height: 100%; }
.ex-stage canvas.pick { cursor: ew-resize; touch-action: pan-y; }
.ex-ctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ex-ctl label { font-size: var(--t-2xs); letter-spacing: .06em; color: var(--fg-3); white-space: nowrap; min-width: 0; }
.ex-ctl output { color: var(--fg); font-variant-numeric: tabular-nums; }
.ex-ctl input[type=range] { flex: 1 1 140px; min-width: 0; accent-color: var(--accent); height: 24px; }
.ex-play { width: 30px; height: 30px; flex: none; border-radius: 8px; border: 1px solid var(--line-2); background: transparent; color: var(--fg); display: grid; place-items: center; cursor: pointer; }
.ex-play:hover { border-color: var(--accent); color: var(--accent); }
.ex-play svg { width: 11px; height: 11px; }
.ex-read { text-transform: none; font-size: var(--t-2xs); line-height: 1.6; letter-spacing: .01em; color: var(--fg-2); min-height: 3.2em; }
.ex figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding-top: 8px; border-top: 1px solid var(--line); font-size: var(--t-2xs); color: var(--fg-3); }
.ex figcaption .tech { letter-spacing: .06em; }
@media (max-width: 760px) { .exgrid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .ex { padding: 12px 10px 10px; } .ex-stage { aspect-ratio: 4 / 3.3; } }
.topics { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin-top: 14px; }
.topics li { border: 1px solid var(--line); border-radius: 99px; padding: 5px 10px; font-size: .84rem; color: var(--fg-2); }

/* ---------- contact ---------- */
.contact { position: relative; padding-block: clamp(110px, 18vh, 200px) clamp(60px, 8vh, 100px); }
.cta-title { font-size: clamp(2.7rem, 1rem + 7vw, 7.6rem); font-weight: 720; letter-spacing: -.035em; line-height: .92; margin-top: 10px; max-width: 12ch; transition: opacity .2s linear; font-variation-settings: normal; }
:root[data-lang="zh"] .cta-title { letter-spacing: 0; font-weight: 700; max-width: none; }
.contact .lead { margin-top: 24px; }
.offer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
@media (max-width: 900px) { .offer { grid-template-columns: 1fr; } }
.offer article { border: 1px solid var(--line); background: var(--panel); border-radius: var(--r); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.offer h3 { font-size: 1.2rem; }
.offer .mono { color: var(--accent); }
.offer ul { list-style: none; display: grid; gap: 6px; color: var(--fg-2); font-size: .94rem; }
.offer li { padding-left: 16px; position: relative; }
.offer li::before { content: "—"; position: absolute; left: 0; color: var(--fg-3); }
.reach { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 40px); margin-top: 24px; }
@media (max-width: 900px) { .reach { grid-template-columns: 1fr; } }
.cform { border: 1px solid var(--line-2); border-radius: var(--r); padding: 20px; background: var(--panel); position: relative; }
.cform .banner { margin-bottom: 16px; color: var(--fg-2); font-size: .92rem; }
.cform label { display: block; color: var(--fg-3); margin-bottom: 6px; }
.cform .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cform .fld { margin-bottom: 12px; min-width: 0; }
@media (max-width: 560px) { .cform .row { grid-template-columns: 1fr; gap: 0; } }
.cform input, .cform select, .cform textarea { width: 100%; padding: 12px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--fg); font: 400 .95rem/1.4 var(--f-body); }
.cform input:focus-visible, .cform select:focus-visible, .cform textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.cform [aria-invalid="true"] { border-color: #e0715c; }
.cform .err { color: #e0715c; font-size: .84rem; margin-top: 6px; }
:root[data-theme="light"] .cform .err { color: #a3321d; }
:root[data-theme="light"] .cform [aria-invalid="true"] { border-color: #a3321d; }
.cform textarea { min-height: 120px; resize: vertical; }
.cform button[disabled] { opacity: .6; cursor: progress; }
.cform .actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 4px; }
.cform .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cform .status { margin-top: 14px; padding: 10px 12px; border-radius: 9px; font-size: .92rem; border: 1px solid var(--line-2); color: var(--fg-2); }
.cform .status.ok { border-color: color-mix(in srgb, var(--live) 55%, transparent); color: var(--fg); }
.cform .status.err, .cform .status.warn { border-color: color-mix(in srgb, var(--tbc) 60%, transparent); color: var(--fg); }
.cform .status a { color: var(--accent); overflow-wrap: anywhere; }
.eml-row { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; min-width: 0; }
.eml { overflow-wrap: anywhere; }
.copy { border: 1px solid var(--line-2); background: transparent; color: var(--fg-3); border-radius: 6px; padding: 3px 8px; font-size: var(--t-2xs); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.copy:hover { color: var(--accent); border-color: var(--accent); }
.xhs-mini { display: flex; gap: 12px; align-items: center; }
.xhs-mini img { width: 72px; height: 72px; border-radius: 6px; flex: none; }
.xhs-mini .mono { color: var(--fg-3); font-size: var(--t-2xs); }
.side-facts { list-style: none; border-top: 1px solid var(--line-2); }
.side-facts li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.side-facts li .mono { color: var(--fg-3); padding-top: 3px; }
.side-facts a { text-decoration: none; color: var(--fg); }
.side-facts a:hover { color: var(--accent); }

/* ---------- footer ---------- */
.site-footer { position: relative; z-index: 1; border-top: 1px solid var(--line); padding: 26px 0 70px; color: var(--fg-3); background: var(--bg); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; }
.site-footer a { color: var(--fg-2); }
.site-footer .eml { text-transform: none; }

/* Fold: native disclosure for detail behind the summary layer. Markup:
   <details class="fold" [open] [data-fold-lazy]><summary class="fold-sum"><span class="en">Case details</span><span class="zh">案例详情</span></summary><div class="fold-body">…</div></details>
   Works without JS. site.js adds: a bubbling 'fold:open' event + data-opened="1" on first open, auto-open when the URL hash
   or an in-page link targets something inside a closed fold, and every fold open while printing.
   Demos: listen for 'fold:open' on the details, and also start at init if it already has data-opened. */
/* ---------- fold (restructure phase 1) ---------- */
.fold { margin-top: 18px; }
.fold-sum {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 0; cursor: pointer; list-style: none;
  font: 450 var(--t-xs)/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; transition: color .15s;
}
.fold-sum::-webkit-details-marker { display: none; }
.fold-sum::marker { content: ""; }
:root[data-lang="zh"] .fold-sum .zh { letter-spacing: .04em; }
/* +/– marker: two bars drawn as gradients; the vertical one collapses when open */
.fold-sum::before {
  content: ""; flex: none; width: 11px; height: 11px; color: var(--accent);
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  transition: background-size .2s cubic-bezier(.2,.7,.2,1), transform .2s cubic-bezier(.2,.7,.2,1);
}
.fold[open] > .fold-sum::before { background-size: 100% 1.5px, 1.5px 0; transform: rotate(180deg); }
/* hairline after the label, same gradient as the section heads (.sh .rule) */
.fold-sum::after { content: ""; flex: 1; min-width: 24px; height: 1px; background: linear-gradient(90deg, var(--line-2), var(--line) 60%, transparent); }
.fold-sum:hover { color: var(--fg); }
.fold-sum:hover::before { color: var(--accent-2); }
.fold-sum:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.fold-body { padding: 6px 0 14px; }
.fold-body > :first-child { margin-top: 0; }
.fold[open] > .fold-body { border-bottom: 1px solid var(--line); }
@media (prefers-reduced-motion: no-preference) {
  .fold[open] > .fold-body { animation: fold-in .32s cubic-bezier(.2,.7,.2,1) both; }
}
@keyframes fold-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fold-sum, .fold-sum::before { transition: none; } }
@media print {
  .fold-sum { min-height: 0; padding: 4pt 0; color: var(--fg-3); }
  .fold-sum::before, .fold-sum::after { display: none; }
  .fold > .fold-body { display: block !important; border-bottom: 0; animation: none; }
}
/* separate rule: a browser without ::details-content drops only this one */
@media print { .fold::details-content { content-visibility: visible; } }

/* ---------- restructure: W1 ---------- */
.case-award { margin: 14px 0 0; font-size: var(--t-2xs); letter-spacing: .06em; text-transform: uppercase; line-height: 1.5; }
/* case lede: one picture (caption under it), three key figures and the links; the rest sits in folds */
.case-lede { display: grid; grid-template-columns: minmax(0, 34fr) minmax(0, 66fr); grid-template-rows: auto 1fr; gap: 16px clamp(18px, 2.4vw, 30px); margin-top: 26px; align-items: start; }
.lede-pic { grid-row: 1 / span 2; margin: 0; min-width: 0; }
.lede-media { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); }
.lede-media img, .lede-media video { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.lede-pic figcaption { margin-top: 8px; color: var(--fg-3); font-size: var(--t-2xs); letter-spacing: .08em; text-transform: uppercase; }
.case-lede .metrics { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.case-lede .metrics div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.case-lede .metrics dd { margin-top: 0; font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem); }
.case-lede .lede-links { margin-top: 0; flex-direction: column; align-items: flex-start; gap: 10px; }
.case-lede .lede-links .textlink { flex-wrap: wrap; row-gap: 2px; }
@media (max-width: 560px) {
  .case-lede { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); grid-template-rows: auto auto; gap: 14px; }
  .lede-pic { grid-row: 1; }
  .case-lede .metrics div { display: block; padding: 10px 12px; }
  .case-lede .metrics dd { margin-top: 4px; font-size: 1.2rem; }
  .case-lede .lede-links { grid-column: 1 / -1; }
}
.case-lede + .fold { margin-top: 26px; }
/* promo row under a case lede: same two columns as the lede, so the muted preview loop lines up with
   the cover and the text with the figures; the preview or the button opens the full cut, with sound, in a dialog */
.promo-row { display: grid; grid-template-columns: minmax(0, 34fr) minmax(0, 66fr); gap: 16px clamp(18px, 2.4vw, 30px); margin-top: 22px; align-items: center; }
.promo-thumb { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #000; }
.promo-thumb video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.promo-hit { position: absolute; inset: 0; display: grid; place-items: center; border: 0; padding: 0; background: rgba(8,10,11,.18); cursor: pointer; }
.promo-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #0b0c0d; box-shadow: 0 2px 12px rgba(0,0,0,.35); transition: transform .2s; }
.promo-ic svg { width: 12px; height: 12px; margin-left: 2px; }
.promo-hit:hover .promo-ic, .promo-hit:focus-visible .promo-ic { transform: scale(1.1); }
.promo-thumb .vctl { z-index: 1; }
.promo-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.promo-k { color: var(--fg-3); font-size: var(--t-2xs); letter-spacing: .08em; text-transform: uppercase; }
.promo-meta p { color: var(--fg-2); font-size: .95rem; }
.promo-go { margin-top: 4px; border: 0; padding: 0; background: none; cursor: pointer; }
.promo-row + .fold { margin-top: 26px; }
.vdlg { width: min(1100px, 94vw); max-width: none; max-height: none; padding: 0; border: 0; border-radius: 12px; background: #000; overflow: visible; }
.vdlg::backdrop { background: rgba(5,6,7,.84); }
.vdlg video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; }
.vdlg-x { position: absolute; right: 0; top: -46px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(8,10,11,.6); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
@media (max-width: 560px) {
  .promo-row { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); gap: 14px; margin-top: 16px; }
  .promo-meta p { font-size: .85rem; }
  .promo-ic { width: 28px; height: 28px; }
  .promo-ic svg { width: 10px; height: 10px; }
}
}
.shots.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* demos moved in from the old playground: start on first open of their fold (fluid.js / rhythm.js) */
.demo { padding-top: 8px; }
.demo-note { color: var(--fg-2); font-size: .94rem; margin-bottom: 18px; max-width: 52ch; }
@media print { .demo-fold, .lede-pic:has(video) { display: none !important; } }
/* ---------- restructure: W2 ---------- */
/* More apps (#pace + #daylume + English course): one compact layer; each app shows icon, status, one-liner,
   three facts and a link; Problem/Approach/Built/Status and screenshots sit in a .fold. Both chapters keep
   their .ch-fig, at a smaller height so the layer reads as one block. */
#pace { padding-bottom: clamp(16px, 3vh, 32px); }
#daylume { padding-top: clamp(16px, 3vh, 32px); }
#pace .fig, #daylume .fig { height: min(56vh, 440px); min-height: 300px; }
@media (min-width: 901px) {
  #pace .ch-fig .fig, #daylume .ch-fig .fig { top: calc(var(--header-h) + max(4vh, (100vh - var(--header-h) - min(56vh, 440px)) / 2)); }
}
@media (max-width: 900px) { #pace .fig, #daylume .fig { height: min(80vw, 320px); min-height: 280px; } }
.app-id { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; align-items: start; }
.app-icon { width: 64px; height: 64px; border-radius: 15px; object-fit: cover; border: 1px solid var(--line); margin-top: 2px; }
.app-id .case-head { margin-bottom: 10px; }
.case-title.app-title { font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem); }
.case-title.app-title small, .app-sub small { font-size: var(--t-md); margin-top: 8px; }
.app-sub { font-size: var(--t-xl); letter-spacing: -.02em; }
.app-sub small { display: block; font: 450 var(--t-md)/1.45 var(--f-body); letter-spacing: -.005em; color: var(--fg-2); max-width: 52ch; }
:root[data-lang="zh"] .app-sub small { letter-spacing: 0; }
#pace .metrics, #daylume .metrics { margin-top: 18px; }
#pace .links, #daylume .links { margin-top: 14px; }
#pace .fold, #daylume .fold { margin-top: 10px; }
.app-more { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 0 24px; align-items: start; }
.app-more .pasr { margin-top: 10px; }
.app-more .shots { margin-top: 10px; grid-template-columns: minmax(0, 1fr); }
.app-more .shots.phone { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.app-row { margin-top: clamp(30px, 4vw, 48px); padding-top: clamp(22px, 3vw, 32px); border-top: 1px solid var(--line-2); }
.app-note { color: var(--fg-2); line-height: 1.6; max-width: 62ch; }
:root[data-lang="zh"] .app-note { line-height: 1.82; }
@media (max-width: 700px) {
  .app-more { grid-template-columns: minmax(0, 1fr); }
  .app-more .shots { max-width: 220px; }
  .app-more .shots.phone { max-width: 300px; }
}
@media (max-width: 520px) {
  .app-id { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; }
  .app-icon { width: 48px; height: 48px; border-radius: 11px; }
  /* three facts stay on one row instead of 2 + an empty cell */
  #pace .metrics, #daylume .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #pace .metrics div, #daylume .metrics div { padding: 10px 10px; }
  #pace .metrics dd, #daylume .metrics dd { font-size: 1.02rem; white-space: normal; }
}
/* the layer heading sits above both columns' first row, and above the figure on one-column layouts */
.apps-sh { grid-column: 1 / span 7; }
@media (max-width: 900px) { .apps-sh { grid-column: 1 / -1; order: -2; } }
/* ---------- restructure: W3 ---------- */
/* Lab: four game tiles in one row (2×2 on phones); each app is one line that unfolds (<details class="fold lab-app">) */
.lab-label { display: flex; align-items: center; gap: 12px; margin-top: 30px; color: var(--fg-3); }
#lab .lab-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
@media (max-width: 600px) { #lab .lab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; } }
#lab .cell h3 { margin-top: 8px; font-size: .92rem; }
#lab .cell p { margin-top: 2px; font-size: .84rem; line-height: 1.45; }
.lab-apps { list-style: none; margin-top: 12px; border-top: 1px solid var(--line-2); }
.lab-apps > li { border-bottom: 1px solid var(--line); }
.fold.lab-app { margin-top: 0; }
.lab-sum { display: grid; grid-template-columns: 52px minmax(0, 1fr) 12px; gap: 3px 16px; align-items: center; padding: 12px 0; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.lab-sum::-webkit-details-marker { display: none; }
.lab-sum::marker { content: ""; }
.lab-sum img { grid-row: 1 / span 2; width: 52px; height: 52px; border-radius: 10px; object-fit: cover; border: 1px solid var(--line); }
.lab-t { grid-column: 2; display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; min-width: 0; }
.lab-t .nm { font-size: 1rem; font-weight: 600; color: var(--fg); }
.lab-sum .one { grid-column: 2; color: var(--fg-2); font-size: .92rem; line-height: 1.45; }
/* +/– marker, same drawing as .fold-sum::before */
.lab-sum::after {
  content: ""; grid-column: 3; grid-row: 1 / span 2; width: 11px; height: 11px; color: var(--accent);
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  transition: background-size .2s cubic-bezier(.2,.7,.2,1), transform .2s cubic-bezier(.2,.7,.2,1);
}
.lab-app[open] > .lab-sum::after { background-size: 100% 1.5px, 1.5px 0; transform: rotate(180deg); }
.lab-sum:hover::after { color: var(--accent-2); }
.lab-sum:hover .nm { color: var(--accent-2); }
.lab-sum:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.lab-app > .fold-body { padding: 0 28px 14px 68px; }
.lab-app[open] > .fold-body { border-bottom: 0; }
.lab-app > .fold-body p { color: var(--fg-2); font-size: .92rem; line-height: 1.5; }
@media (max-width: 600px) {
  .lab-sum { grid-template-columns: 44px minmax(0, 1fr) 12px; gap: 3px 12px; }
  .lab-sum img { width: 44px; height: 44px; }
  .lab-app > .fold-body { padding-left: 56px; padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .lab-sum::after { transition: none; } }
@media print { .lab-sum::after { display: none; } }
/* Education: Master then Bachelor (#bachelor) in one chapter; the honours board sits in a fold */
#education .edu-deg { margin-top: 30px; }
#education .edu-deg + .facts { margin-top: 16px; }
#education .facts li { padding: 12px 0; }
#bachelor { margin-top: clamp(36px, 4.5vw, 52px); }
.edu-honours { margin-top: 26px; }
.edu-honours .board { margin-top: 0; }
/* ---------- restructure: W4 ---------- */
/* capabilities: 7 cards, so the last one spans both columns; on phones the tech chips are hidden
   behind one "Tech stack" fold above the grid (CSS only, via :has; desktop always shows them) */
.matrix > .cap:last-child:nth-child(odd) { grid-column: 1 / -1; }
.cap-stack { display: none; }
@media (max-width: 640px) {
  .cap-stack { display: block; margin-top: 16px; }
  .cap-stack + .matrix { margin-top: 8px; }
  #capabilities .cap .chips { display: none; }
  #capabilities:has(.cap-stack[open]) .cap .chips { display: flex; }
}
@media print { .cap-stack { display: none !important; } #capabilities .cap .chips { display: flex !important; } }
/* method: three tiers (me → coordinating agent → worker agents); a row where the column is wide enough */
.org.org3 { gap: 0; }
@media (min-width: 1101px), (min-width: 641px) and (max-width: 900px) {
  .org.org3 { grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr) 22px minmax(0, 1.25fr); align-items: stretch; }
  .org.org3 .link { height: auto; }
  .org.org3 .link::before { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 1px; background: repeating-linear-gradient(90deg, var(--accent) 0 3px, transparent 3px 6px); }
}
/* writing: one explainer beside the intro, three more in a lazy fold; the data note shown once */
.ex-lead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px clamp(24px, 3vw, 40px); align-items: start; }
@media (max-width: 900px) { .ex-lead { grid-template-columns: minmax(0, 1fr); } }
.ex-head .ex-note { margin-top: 14px; font-size: var(--t-2xs); letter-spacing: .04em; line-height: 1.6; color: var(--fg-3); text-transform: none; }
.ex-more { margin-top: 22px; }
.exgrid.ex3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 6px; }
@media (max-width: 760px) { .exgrid.ex3 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- reveal (content is visible without JS; only a lift when JS is ready) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; transform: translateY(14px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
  .js .rv.in { opacity: 1; transform: none; }
}

/* ---------- engineering notes: three story cards in a case, each opening the notes page at its section ----------
   The cards replace the "Case details" fold: a number, one surprising line, and a small picture of it. */
.notes { margin-top: 30px; }
.notes-h { display: flex; align-items: center; gap: 12px; color: var(--fg-3); margin-bottom: 14px; }
.notes-h b { color: var(--accent); font-weight: 500; }
.notes-h .rule { flex: 1; height: 1px; min-width: 20px; background: linear-gradient(90deg, var(--line-2), var(--line) 60%, transparent); }
.notes-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.ncard { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 14px 14px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); text-decoration: none; color: var(--fg); transition: border-color .2s, transform .25s cubic-bezier(.2,.7,.2,1), background .2s; }
.ncard:hover { color: var(--fg); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 5%, var(--panel)); transform: translateY(-2px); }
.ncard:focus-visible { outline-offset: 2px; }
.nc-k { color: var(--fg-3); font-size: var(--t-2xs); letter-spacing: .1em; }
.nc-pic { height: 44px; color: var(--fg-3); }
.nc-pic svg { width: 100%; height: 100%; overflow: visible; }
.nc-pic .a { fill: var(--accent); stroke: var(--accent); }
.nc-pic .f { fill: color-mix(in srgb, var(--fg-3) 55%, transparent); }
.nc-pic .t { fill: var(--prog); }
.nc-pic path.a { fill: none; }
.nc-big { font: 650 clamp(1.35rem, 1.05rem + 1vw, 1.75rem)/1.05 var(--f-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.nc-t { font-weight: 560; line-height: 1.3; font-size: .98rem; }
.nc-d { color: var(--fg-2); font-size: .86rem; line-height: 1.45; }
.nc-go { margin-top: auto; padding-top: 4px; color: var(--accent); font: 500 var(--t-2xs)/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.ncard:hover .nc-go .arr { transform: translateX(3px); }
.notes-all { margin-top: 14px; }
@media (max-width: 760px) {
  .notes-cards { grid-template-columns: minmax(0, 1fr); }
  .ncard { display: grid; grid-template-columns: 92px minmax(0, 1fr); grid-template-areas: "pic k" "pic big" "pic t" "pic d" "pic go"; gap: 4px 14px; }
  .nc-k { grid-area: k; } .nc-pic { grid-area: pic; height: auto; align-self: center; } .nc-big { grid-area: big; } .nc-t { grid-area: t; } .nc-d { grid-area: d; } .nc-go { grid-area: go; }
}

/* ---------- notes page (octave.html): same chrome as the home page, no particle field ---------- */
.nt-page .site-header .toggles { margin-left: auto; }
.nt-back { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 9px; color: var(--fg-2); font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.nt-back:hover { color: var(--fg); border-color: var(--fg-3); }
.nt-back:hover .arr { transform: translateX(-3px); }
@media (max-width: 520px) { .nt-page .brand-name { display: none; } }
.nt-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
@supports (animation-timeline: scroll()) {
  .nt-progress { animation: nt-prog linear both; animation-timeline: scroll(root); }
  @keyframes nt-prog { to { transform: scaleX(1); } }
}
.nt { padding-top: var(--header-h); }
.nt-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 26px clamp(20px, 2.4vw, 36px); padding-top: clamp(40px, 8vh, 90px); padding-bottom: clamp(30px, 5vh, 56px); align-items: end; }
.nt-hero-copy { grid-column: 1 / span 8; min-width: 0; }
.nt-cover { grid-column: 10 / span 3; margin: 0; }
.nt-glance { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; }
.nt-glance p { color: var(--fg-3); font-size: .78rem; margin-top: 4px; line-height: 1.35; }
.nt-kicker { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; color: var(--fg-3); margin-bottom: 16px; }
.nt-title { font-size: clamp(3rem, 1.4rem + 6vw, 6.4rem); font-weight: 700; letter-spacing: -.04em; line-height: .92; }
.nt-title small { display: block; margin-top: 18px; font: 450 var(--t-lg)/1.45 var(--f-body); letter-spacing: -.005em; color: var(--fg-2); max-width: 44ch; }
.vt-t { display: inline-block; }
.nt-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 22px; color: var(--fg-3); }
.nt-meta > span + span::before { content: "·"; margin-right: 18px; color: var(--line-2); }
.nt-src { margin-top: 10px; color: var(--fg-3); font-size: .9rem; max-width: 62ch; }
@media (max-width: 900px) {
  .nt-hero-copy { grid-column: 1 / span 8; }
  .nt-cover { grid-column: 9 / span 4; }
  .nt-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .nt-hero { gap: 18px 14px; }
  .nt-hero-copy { grid-column: 1 / -1; }
  .nt-cover { grid-column: 1 / span 5; grid-row: 1; }
  .nt-glance dd { font-size: 1.15rem; }
}

.nt-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 clamp(20px, 2.4vw, 36px); padding-bottom: 60px; }
.nt-toc { grid-column: 1 / span 3; }
.nt-toc p { color: var(--fg-3); padding: 18px 0 10px; border-top: 1px solid var(--line-2); }
.nt-toc ol { list-style: none; margin: 0; padding: 0; }
.nt-toc a { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px; padding: 7px 0; text-decoration: none; color: var(--fg-3); font-size: .86rem; line-height: 1.35; border-left: 2px solid transparent; padding-left: 10px; margin-left: -12px; }
.nt-toc a b { font: 500 var(--t-2xs)/1.9 var(--f-mono); letter-spacing: .06em; color: var(--fg-3); }
.nt-toc a:hover { color: var(--fg); }
.nt-toc a[aria-current="true"] { color: var(--fg); border-left-color: var(--accent); }
.nt-toc a[aria-current="true"] b { color: var(--accent); }
@media (min-width: 1001px) { .nt-toc { align-self: start; position: sticky; top: calc(var(--header-h) + 18px); } }
.nt-article { grid-column: 4 / span 8; min-width: 0; }
@media (max-width: 1000px) {
  .nt-toc { grid-column: 1 / -1; }
  .nt-toc ol { columns: 2; column-gap: 24px; }
  .nt-toc a { break-inside: avoid; }
  .nt-article { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .nt-toc ol { columns: 1; } }

.nt-sec { padding: clamp(40px, 7vh, 72px) 0 8px; border-top: 1px solid var(--line-2); margin-top: 18px; scroll-margin-top: calc(var(--header-h) + 4px); }
.nt-sec:first-child { margin-top: 0; }
.nt-k { display: flex; gap: 10px; color: var(--fg-3); margin-bottom: 12px; }
.nt-k b { color: var(--accent); font-weight: 500; }
.nt-sec h2 { font-size: var(--t-2xl); font-weight: 650; letter-spacing: -.025em; max-width: 22ch; }
:root[data-lang="zh"] .nt-sec h2 { letter-spacing: 0; font-weight: 600; max-width: 16em; }
.nt-sec h3 { font-size: var(--t-lg); font-weight: 620; margin: 34px 0 10px; }
.nt-tldr { margin: 16px 0 22px; padding: 12px 16px; border-left: 2px solid var(--accent); background: var(--accent-wash); border-radius: 0 8px 8px 0; color: var(--fg); font-size: var(--t-lg); line-height: 1.5; max-width: 62ch; }
.nt-sec > p, .nt-sec .nt-split p { color: var(--fg-2); max-width: 68ch; margin: 0 0 14px; }
.nt-sec p b, .nt-list b { color: var(--fg); font-weight: 600; }
.nt-sec code, .nt-list code { font: 450 .86em/1 var(--f-mono); padding: 2px 5px; border-radius: 4px; background: var(--bg-3); color: var(--fg); }
.nt-list { color: var(--fg-2); max-width: 68ch; margin: 0 0 18px; padding-left: 1.3em; }
.nt-list li { margin: 0 0 8px; padding-left: 4px; }
.nt-list li::marker { color: var(--accent); font: 500 .8em var(--f-mono); }
.nt-fine { color: var(--fg-3) !important; font-size: .82rem; }
.nt-sec:target .nt-tldr { animation: nt-hit 1.6s ease-out .25s both; }
@keyframes nt-hit { from { background: color-mix(in srgb, var(--accent) 30%, transparent); } }

.nt-fig { margin: 4px 0 22px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); position: relative; }
.nt-fig img, .nt-fig video { display: block; width: 100%; }
.nt-fig figcaption { padding: 9px 12px; color: var(--fg-3); font-size: var(--t-2xs); letter-spacing: .08em; border-top: 1px solid var(--line); }
.nt-vid { max-width: 560px; background: #000; }
.nt-vid video { aspect-ratio: 16 / 9; object-fit: cover; }
.nt-vid .vctl { bottom: 42px; }

.nt-split { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; align-items: start; margin: 4px 0 8px; }
@media (max-width: 480px) { .nt-split { grid-template-columns: 104px minmax(0, 1fr); gap: 16px; } }
.strips p { margin-top: 8px; color: var(--fg-3); font-size: 9px; letter-spacing: .06em; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.strips .k { display: inline-block; width: 9px; height: 9px; border-radius: 2px; }
.strips .k.cpu, .strips-scr .cpu { background: var(--accent); }
.strips .k.dma, .strips-scr .dma { background: var(--prog); }
.strips-scr { position: relative; aspect-ratio: 3 / 4; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; display: grid; grid-template-rows: repeat(8, 1fr); background: var(--bg-2); }
.strips-scr i { border-bottom: 1px dashed var(--line); }
.strips-scr i:last-of-type { border-bottom: 0; }
.strips-scr span { position: absolute; left: 0; right: 0; top: 0; height: 12.5%; opacity: .75; }
.strips-scr .dma { opacity: .55; }
@media (prefers-reduced-motion: no-preference) {
  .strips-scr .cpu { animation: nt-strip 1.6s steps(8, end) infinite; }
  .strips-scr .dma { animation: nt-strip-d 1.6s steps(8, end) infinite; }
}
.strips-scr .cpu { transform: translateY(100%); }
@keyframes nt-strip { from { transform: translateY(0); } to { transform: translateY(800%); } }
@keyframes nt-strip-d { from { transform: translateY(-100%); } to { transform: translateY(700%); } }

.nt-code { margin: 6px 0 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); overflow-x: auto; font: 450 .78rem/1.65 var(--f-mono); color: var(--fg); max-width: 68ch; }
.nt-code code { background: none; padding: 0; font: inherit; }

.nt-table { overflow-x: auto; margin: 6px 0 22px; border: 1px solid var(--line); border-radius: 10px; max-width: 68ch; }
.nt-table table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.nt-table th { text-align: left; color: var(--fg-3); font: 500 var(--t-2xs)/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; padding: 10px 12px; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.nt-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); color: var(--fg-2); font-variant-numeric: tabular-nums; vertical-align: top; }
.nt-table tr:last-child td { border-bottom: 0; }
.nt-table td:first-child { color: var(--fg); }
.nt-table td.hi { color: var(--accent); font-weight: 600; }

.nt-pipe { display: flex; flex-wrap: wrap; gap: 6px 0; list-style: none; margin: 4px 0 20px; padding: 0; font-size: var(--t-2xs); }
.nt-pipe li { padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 7px; color: var(--fg-2); background: var(--bg-2); }
.nt-pipe li { position: relative; }
.nt-pipe li:not(:last-child) { margin-right: 22px; }
.nt-pipe li:not(:last-child)::after { content: "→"; position: absolute; right: -17px; top: 50%; transform: translateY(-50%); color: var(--accent); }

.bars { margin: 6px 0 22px; padding: 14px 16px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); max-width: 68ch; }
.bars figcaption { color: var(--fg-3); font-size: var(--t-2xs); letter-spacing: .07em; margin-bottom: 12px; }
.bar { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 4px 0; font-size: .82rem; }
.bar > span { color: var(--fg-2); font: 450 var(--t-2xs)/1.2 var(--f-mono); letter-spacing: .04em; }
.bar > b { font-weight: 560; font-variant-numeric: tabular-nums; font-size: .82rem; white-space: nowrap; }
.bar i { display: block; height: 10px; width: var(--w); border-radius: 3px; background: var(--accent); }
.bars.pair .pr { display: grid; gap: 3px; }
.bars.pair .pr i.b { background: color-mix(in srgb, var(--fg-3) 55%, transparent); }
.bars.pair .pr i { height: 7px; }
.bars-note { margin-top: 8px; color: var(--fg-3); font-size: .8rem; }
@media (prefers-reduced-motion: no-preference) {
  .js .bars .bar i { transform-origin: 0 50%; transform: scaleX(0); transition: transform .9s cubic-bezier(.2,.7,.2,1); }
  .js .bars.in .bar i { transform: none; }
}
@media (max-width: 480px) { .bar { grid-template-columns: 58px minmax(0, 1fr); } .bar > b { grid-column: 2; font-size: .76rem; } }

.lanes { margin: 6px 0 8px; padding: 14px 16px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); max-width: 68ch; }
.ln { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; align-items: center; padding: 4px 0; }
.ln > span { color: var(--fg-2); font-size: var(--t-2xs); letter-spacing: .04em; }
.ln .tr { position: relative; height: 10px; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 10%); }
.ln .tr i { position: absolute; top: 0; bottom: 0; left: var(--a); width: calc(var(--b) - var(--a)); min-width: 5px; border-radius: 3px; background: var(--accent); }
.ln .tr i.t { background: var(--prog); }
.ln .tr i.me { background: color-mix(in srgb, var(--fg-3) 50%, transparent); }
.lanes-ax { position: relative; height: 16px; margin: 6px 0 0 142px; color: var(--fg-3); font-size: 9px; }
.lanes-ax span { position: absolute; left: var(--x); top: 0; white-space: nowrap; }
.lanes-ax span.mid { transform: translateX(-50%); }
.lanes-ax span.end { left: auto; right: 0; }
@media (max-width: 480px) { .ln { grid-template-columns: 92px minmax(0, 1fr); gap: 8px; } .lanes-ax { margin-left: 100px; } .lanes-ax span.mid { display: none; } }

.nt-time { list-style: none; margin: 18px 0 6px; padding: 0; border-left: 1px solid var(--line-2); max-width: 68ch; }
.nt-time li { position: relative; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; padding: 5px 0 5px 18px; color: var(--fg-2); font-size: .92rem; }
.nt-time li::before { content: ""; position: absolute; left: -4px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--bg); border: 1px solid var(--fg-3); }
.nt-time li.hi { color: var(--fg); }
.nt-time li.hi::before { background: var(--live); border-color: var(--live); box-shadow: 0 0 8px var(--live); }
.nt-time time { color: var(--fg-3); font-size: var(--t-2xs); padding-top: 3px; }
@media (max-width: 420px) { .nt-time li { grid-template-columns: 1fr; gap: 0; } }

.nt-end { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; margin-top: 46px; padding-top: 28px; border-top: 1px solid var(--line-2); }

/* home ⇄ notes page: a cross-document view transition. Only the OCTAVE title and the cover carry a
   name (set by site.js just for that navigation, so the theme switch is untouched); the rest fades. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; types: page; }
  :root:active-view-transition-type(page)::view-transition-old(root) { animation: nt-out .22s ease both; }
  :root:active-view-transition-type(page)::view-transition-new(root) { animation: nt-in .38s cubic-bezier(.2,.7,.2,1) .06s both; }
  :root:active-view-transition-type(page)::view-transition-group(*) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
}
@keyframes nt-out { to { opacity: 0; } }
@keyframes nt-in { from { opacity: 0; transform: translateY(10px); } }
@media print { .nt-toc, .nt-back, .nt-progress, .nt-end .btn { display: none !important; } .nt-article { grid-column: 1 / -1; } }

.fold-lead { color: var(--fg-2); max-width: 68ch; }
.fold-lead + .shots, .fold-lead + .subcase { margin-top: 18px; }

/* ---------- light theme tweaks ---------- */
:root[data-theme="light"] .shots figcaption { background: rgba(255,255,255,.85); color: #101315; }
:root[data-theme="light"] .site-header { background: color-mix(in srgb, var(--bg) 84%, transparent); }

/* ---------- print: a one-page CV lives at cv.html; the landing page prints as plain text ---------- */
@media print {
  #field, .bench, .site-header, .rail, .hud-dock, .ch-fig, .playground, .scroll-cue, .hero-cta, .cform, video, .vctl, .skip { display: none !important; }
  :root { --bg: #fff; --bg-2: #fff; --panel: #fff; --fg: #000; --fg-2: #222; --fg-3: #555; --line: #ccc; --line-2: #999; --accent: #6d3f0c; }
  body { font-size: 10.5pt; }
  .chapter, .plain, .contact, .hero { padding: 14pt 0; min-height: 0; break-inside: avoid-page; }
  .ch-main { grid-column: 1 / -1; }
  .name, .cta-title { opacity: 1 !important; font-size: 34pt; }
  .js .rv { opacity: 1 !important; transform: none !important; }
  a { text-decoration: none; }
}