/* f-voyage · style.css — 「定理之河 · 航行」 shell + every DOM text layer (built by ui.js), in the one UI language of the
   site: 墨夜观星 · ink-night astronomy (UI-STYLE.md). The art is the image; the UI is quiet ink and hairlines round it —
   moonlight-ivory serif type, hairlines that may carry the fine graduation of an armillary scale (浑仪), asterism
   leaders (a fine line ending in a knot), vertical 竖排 titles on wide screens, and ONE vermilion seal (朱印) per screen
   (the brand mark, the current work number, the active state). No boxes, no cards, no blur panes, no gold, no icons.
   Reveals are ink bleeding into paper (ui.js paint: opacity + blur 6px → 0; exits dissolve into mist).
   Order (STORYLINE v4): 证道 opening → 星图 → descent (no type) → the river and its works → the dive into the black hole
   (NO DOM type: the introduction is drawn in light by stage/monologue.js; a visually hidden copy (.sr) for screen readers)
   → 穿过视界 (the white held after the dive as a sheet of xuan paper: ink type, html.paper turns the chrome to ink)
   → THE NEW WORLD (one cosmic-dawn sky: arrival · 联系 + footer). The about / skills blocks (.L-about / .L-skills) remain
   for the static edition and the ui.js opts.diveText fallback only.
   Root classes set by ui.js: .journey .static .rm .fine .booted .dawn .paper .menu-open                                      */

:root {
  /* palette (UI-STYLE.md) — night ground */
  --night: 10 13 17; --wash: 18 23 29; --wash-2: 26 32 39;
  --moon: 231 227 218; --moon-2: 174 178 182; --moon-3: 123 129 136;
  --silver: 216 221 229; --warm: 233 220 195; --zhu: 200 69 45;
  /* paper ground (white page, static edition) */
  --xuan: 237 233 225; --xuan-2: 227 222 212; --ink: 30 34 40; --ink-2: 86 91 97; --ink-3: 128 133 138;
  /* a fine starfield for the DOM (boot veil, menu backdrop, static night): ui.js swaps in two seeded random tiles */
  --stars: radial-gradient(1px 1px at 13% 27%, rgb(240 236 228 / .8), transparent 70%), radial-gradient(1px 1px at 71% 64%, rgb(216 221 229 / .6), transparent 70%);
  --stars-size: 509px 467px, 331px 353px;
  --tx: 231 227 218;          /* text on dark — moonlight ivory → moon-silver (ui.setTone) */
  --ac: 198 199 199;          /* accent — moon silver (ui.setTone) */
  --ft: 236 232 224;          /* the new world: moonlight ivory over the dawn sky */
  --fl: 233 220 195;          /* the new world: the rare warm highlight (first light) */
  --paper: var(--xuan);       /* static editorial page */
  --fg: var(--tx);            /* chrome colour (switches to ink on the white page) */
  --dawn: 0;
  --vh: 1vh;
  --mx: clamp(22px, 5.4vw, 88px);
  --serif: "Instrument Serif", "Noto Serif SC", "Songti SC", "STSong", serif;
  --zh: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --sans: "Inter Tight", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --e-out: cubic-bezier(.16, 1, .3, 1);
  --e-q: cubic-bezier(.25, 1, .5, 1);
  --e-io: cubic-bezier(.65, 0, .35, 1);
  /* the seal's pressed texture (ink not perfectly even) */
  --seal-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.1 1.55'/%3E%3C/filter%3E%3Crect width='64' height='64' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: dark;
}
html.dawn:not(.menu-open) { --fg: var(--ft); }
/* the white after the dive (穿过视界, ui.js html.paper): the chrome is drawn in ink on the paper */
html.paper:not(.menu-open) { --fg: var(--ink); }

*, *::before, *::after { box-sizing: border-box; }
html { background: rgb(var(--night)); color: rgb(var(--tx)); -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { margin: 0; font: 400 15px/1.9 var(--zh); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
ul, ol { list-style: none; margin: 0; padding: 0; }
:focus { outline: none; }
:focus-visible { outline: 1px solid rgb(var(--moon) / .9); outline-offset: 4px; border-radius: 0; }
html.paper :focus-visible, html.static .works :focus-visible, html.static .L-atlas :focus-visible { outline-color: rgb(var(--ink) / .85); }
::selection { background: rgb(var(--zhu) / .4); color: rgb(var(--moon)); }
svg { overflow: visible; }
.lt { font-family: var(--serif); letter-spacing: .02em; }

/* ---------- stage + scroll spacer ---------- */
#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; background: rgb(var(--night)); }
#journey { position: relative; z-index: 1; height: calc(var(--len, 14) * 100 * var(--vh)); pointer-events: none; }
.ui { position: relative; z-index: 10; }
html:not(.static) .layers { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
.L { position: absolute; inset: 0; visibility: hidden; }
.L.vis { visibility: visible; }
.L a, .L button { pointer-events: none; }
.L.live a, .L.live button { pointer-events: auto; }

/* ---------- reveal primitives (ui.js paints opacity / blur — ink bleeding into paper) ---------- */
.ln { display: block; }
.ln-i { display: block; opacity: 0; will-change: opacity, filter; }
.ch { display: inline-block; }
.ch-i { display: inline-block; opacity: 0; will-change: opacity, filter; }
[data-r=fade] { opacity: 0; }
[data-r=rule] { transform: scaleX(0); transform-origin: 0 50%; }
[data-r=ruley] { transform: scaleY(0); transform-origin: 50% 0; }
.hl { fill: none; stroke: rgb(var(--tx) / .3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hl.dim { stroke: rgb(var(--tx) / .2); }
.hl:not([stroke-dasharray]) { stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--d, 0)); }
.hl[stroke-dasharray] { opacity: var(--d, 0); }
.dot { fill: rgb(var(--tx) / .7); opacity: var(--d, 0); }
.rule { display: block; height: 1px; background: currentColor; }

/* 浑仪 graduation: a hairline carrying fine ticks (minor every 8px, major every 40px), hanging down from the line */
.scale { display: block; position: relative; height: 7px; color: rgb(var(--tx) / .34);
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 8px) 0 0 / 100% 3px no-repeat,
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 40px) 0 0 / 100% 7px no-repeat; }

/* 朱印 — the vermilion seal: xuan characters cut into vermilion (白文), set vertically, a pressed texture */
.seal { display: inline-flex; align-items: center; justify-content: center; flex: none; writing-mode: vertical-rl; text-orientation: upright;
  min-width: 1.62em; min-height: 1.62em; padding: .2em .16em; font: 400 11px/1.04 var(--zh); letter-spacing: .02em; font-style: normal;
  color: rgb(var(--xuan)); background: rgb(var(--zhu)); border-radius: 1.5px; text-shadow: none !important;
  -webkit-mask: var(--seal-tex) 0 0 / 40px 40px; mask: var(--seal-tex) 0 0 / 40px 40px; }
.seal-dot { display: inline-block; width: 5px; height: 5px; flex: none; background: rgb(var(--zhu)); }

/* text buttons: a hairline underline that draws in from the left on hover (300 ms) while the text brightens */
.tl { position: relative; display: inline-flex; align-items: center; gap: 12px; transition: color .3s; }
.tl > span:first-child { position: relative; padding-bottom: 5px; }
.tl > span:first-child::before, .tl > span:first-child::after { content: ""; position: absolute; left: 0; right: .2em; bottom: 0; height: 1px; background: currentColor; }
.tl > span:first-child::before { opacity: .24; }
.tl > span:first-child::after { transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--e-out); opacity: .85; }
.tl:hover > span:first-child::after, .tl:focus-visible > span:first-child::after { transform: none; }
.tl-h { display: block; width: 28px; height: 1px; background: currentColor; opacity: .5; transition: width .6s var(--e-out), opacity .3s; }
.tl:hover .tl-h, .tl:focus-visible .tl-h { width: 46px; opacity: .9; }

/* ---------- chrome: wordmark + seal, the 目录 button ---------- */
.skip { position: fixed; left: var(--mx); top: 8px; z-index: 80; padding: 8px 0 6px; font: 400 12px/1.4 var(--zh); letter-spacing: .24em;
  color: rgb(var(--moon)); background: rgb(var(--night)); border-bottom: 1px solid rgb(var(--moon) / .5); transform: translateY(-160%); transition: transform .3s var(--e-out); }
.skip:focus-visible { transform: none; }
.chrome { position: fixed; left: 0; right: 0; top: 0; z-index: 55; display: flex; align-items: center; justify-content: space-between;
  padding: clamp(16px, 3.1vh, 30px) var(--mx) 0; pointer-events: none; color: rgb(var(--fg)); transition: color .9s var(--e-io); }
.wm { pointer-events: auto; display: inline-flex; align-items: center; gap: 11px; font: 400 21px/1 var(--serif); letter-spacing: .015em; }
.wm-t { transition: opacity .4s; }
.wm-seal { min-width: 17px; min-height: 17px; padding: 0; font-size: 11px; transform: translateY(-1px); }
.wm:hover .wm-t { opacity: .8; }
.mb { pointer-events: auto; position: relative; display: inline-flex; align-items: center; gap: 12px; height: 40px; padding: 0 0 0 12px; margin-right: -2px;
  font: 400 12.5px/1 var(--zh); letter-spacing: .32em; }
.mb-t { position: relative; display: grid; }
/* 声 · 开/关 — the sound toggle (audio.js): a quiet text button left of 目录; the value brightens when on */
.snd { pointer-events: auto; margin-left: auto; margin-right: clamp(20px, 2.4vw, 38px); height: 40px; gap: 7px; font: 400 12.5px/1 var(--zh); letter-spacing: .24em; }
.snd > .snd-k { padding-bottom: 5px; }
.snd-d, .snd-v { font-style: normal; padding-bottom: 5px; transition: opacity .45s var(--e-io); }
.snd-d { opacity: .4; letter-spacing: 0; }
.snd-v { opacity: .55; }
.snd[aria-pressed="true"] .snd-v { opacity: 1; }
.snd:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.mb-t span { grid-area: 1 / 1; transition: opacity .45s var(--e-io), filter .45s var(--e-io); }
.mb-t span + span { opacity: 0; filter: blur(4px); }
html.menu-open .mb-t span:first-child { opacity: 0; filter: blur(4px); }
html.menu-open .mb-t span + span { opacity: 1; filter: none; }
.mb-h { display: block; width: 22px; height: 1px; background: currentColor; opacity: .6; transition: width .5s var(--e-out), opacity .3s; }
.mb:hover .mb-h { width: 34px; opacity: 1; }
html.menu-open .mb-h { width: 34px; }
html:not(.booted) .chrome, html:not(.booted) .prog { opacity: 0; }
html.booted .chrome, html.booted .prog { opacity: 1; transition: opacity 1.4s var(--e-io) .2s, color .9s var(--e-io); }

/* ---------- the rail (right edge; a bottom hairline on phones): a fine graduated scale, a vermilion current mark ---------- */
.prog { position: fixed; z-index: 40; right: calc(var(--mx) - 1px); top: 50%; width: 1px; height: min(40vh, 360px); transform: translateY(-50%); color: rgb(var(--fg)); }
.prog-tr { position: absolute; inset: 0; }
.prog-tr::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: currentColor; opacity: .16; }
.prog-sc { position: absolute; right: 1px; top: 0; bottom: 0; width: 5px; opacity: .3;
  background: repeating-linear-gradient(currentColor 0 1px, transparent 1px 9px) 100% 0 / 3px 100% no-repeat; }
.prog-fill { position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: currentColor; opacity: .5; transform-origin: 50% 0; transform: scaleY(var(--p, 0)); }
.prog-head { position: absolute; left: -13px; top: calc(var(--p, 0) * 100%); width: 14px; height: 1px; margin-top: -.5px; background: rgb(var(--zhu)); }
.prog-head::after { content: ""; position: absolute; left: 11px; top: -1.5px; width: 4px; height: 4px; background: rgb(var(--zhu)); }
.prog-ch li { position: absolute; right: 0; top: calc(var(--at) * 100%); }
.prog-ch button { position: absolute; right: -10px; top: 0; transform: translateY(-50%); display: flex; flex-direction: row-reverse; align-items: center; gap: 12px;
  height: 22px; padding: 0 10px; white-space: nowrap; color: inherit; }
.prog-ch i { width: 8px; height: 1px; background: currentColor; opacity: .55; transition: width .5s var(--e-out), opacity .4s; }
.prog-ch span { font: 400 11.5px/1 var(--zh); letter-spacing: .28em; opacity: 0; filter: blur(3px); transition: opacity .5s, filter .5s; }
.prog:hover .prog-ch span, .prog-ch button:focus-visible span { opacity: .78; filter: none; }
.prog-ch button:hover span { opacity: 1; }
.prog-ch button[aria-current] i, .prog-ch button:hover i { width: 13px; opacity: 1; }
.prog-now { position: absolute; right: 22px; top: calc(var(--p, 0) * 100%); margin: 0; transform: translateY(-50%); font: 400 11.5px/1 var(--zh); letter-spacing: .24em;
  white-space: nowrap; opacity: .76; transition: opacity .4s; display: flex; align-items: baseline; }
.prog-now i { font-style: normal; margin: 0 .5em 0 .2em; opacity: .5; letter-spacing: 0; }
.prog-now b { font: 400 14.5px/1 var(--serif); letter-spacing: .02em; }
.prog-now em { font: 400 12px/1 var(--serif); font-style: normal; margin-left: .35em; letter-spacing: .02em; opacity: .62; }
.prog:hover .prog-now { opacity: 0; }

/* ---------- 0 · the opening's own layer: its scroll cue + 「跳过 · 进入星图」 (stage/opening.js styles the rest of it) ---------- */
.cue { position: absolute; right: calc(var(--mx) + 34px); bottom: calc(6.5 * var(--vh)); display: flex; align-items: center; gap: 16px;
  font: 400 12px/1 var(--zh); letter-spacing: .28em; color: rgb(var(--tx) / .64); }
.cue i { position: relative; width: 1px; height: 46px; background: rgb(var(--tx) / .18); overflow: hidden; }
.cue i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: linear-gradient(transparent, rgb(var(--tx))); animation: cue 2.6s var(--e-io) infinite; }
@keyframes cue { 0% { transform: translateY(0); } 70%, 100% { transform: translateY(350%); } }
/* (more specific than the opening's injected sheet, which only places it) */
.ui .L-opening .op-skip { padding: 6px 0 7px; border-bottom: 0; font: 400 12px/1 var(--zh); letter-spacing: .32em; color: rgb(var(--moon) / .64); transition: color .3s; }
.ui .L-opening .op-skip::before, .ui .L-opening .op-skip::after { content: ""; position: absolute; left: 0; right: .32em; bottom: 0; height: 1px; background: currentColor; }
.ui .L-opening .op-skip::before { opacity: .24; }
.ui .L-opening .op-skip::after { opacity: .85; transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--e-out); }
.ui .L-opening .op-skip:hover, .ui .L-opening .op-skip:focus-visible { color: rgb(var(--moon)); }
.ui .L-opening .op-skip:hover::after, .ui .L-opening .op-skip:focus-visible::after { transform: none; }

/* ---------- 1 · HERO (static edition title) ---------- */
.hero-b { position: absolute; left: var(--mx); bottom: calc(12.5 * var(--vh)); max-width: 92vw; }
.hero-name { display: flex; align-items: flex-start; gap: .14em; margin: 0 0 0 -.035em; font: 400 clamp(88px, 13.2vw, 228px)/.84 var(--serif); letter-spacing: -.012em; color: rgb(var(--tx)); }
.hero-seal { margin-top: .1em; font-size: clamp(13px, 1.3vw, 20px); }
.hero-role { display: flex; align-items: center; gap: 18px; margin: clamp(18px, 3vh, 30px) 0 0; font: 400 14px/1.4 var(--zh); letter-spacing: .26em; color: rgb(var(--tx) / .86); }
.hero-role .scale { width: 120px; flex: none; color: rgb(var(--tx) / .4); margin-top: 6px; }
.hero-zh { margin: 12px 0 0 138px; font: 400 13px/1.7 var(--zh); letter-spacing: .14em; color: rgb(var(--tx) / .6); }
.hero-zh .lt { font: italic 400 17px/1 var(--serif); }

/* ---------- 2 · WORK STOPS (featured): the title set vertically beside its column (竖排); phones: horizontal ---------- */
.w-b { position: absolute; left: var(--mx); bottom: calc(10 * var(--vh)); display: flex; align-items: flex-start; gap: clamp(22px, 2.3vw, 38px); max-width: min(780px, 58vw); }
.w-b::before { content: ""; position: absolute; inset: -24% -30% -30% -26%; z-index: -1; pointer-events: none; opacity: var(--v, 0);
  background: radial-gradient(closest-side, rgb(var(--night) / .52), rgb(var(--night) / .2) 62%, transparent); }
.w-title { flex: none; margin: 0; writing-mode: vertical-rl; max-height: min(50vh, 420px); font: 400 clamp(36px, 3.4vw, 54px)/1.36 var(--zh); letter-spacing: .14em; color: rgb(var(--tx)); }
.w-title a { display: block; position: relative; transition: opacity .4s; }
.w-title a::after { content: ""; position: absolute; top: 0; bottom: .14em; left: -.32em; width: 1px; background: currentColor; opacity: .6; transform: scaleY(0); transform-origin: 50% 0; transition: transform .45s var(--e-out); }
.w-title a:hover::after, .w-title a:focus-visible::after { transform: none; }
.w-col { min-width: 0; padding-top: .2em; max-width: 28em; }
.w-no { display: flex; align-items: center; gap: 14px; margin: 0; }
.w-seal { font-size: 11.5px; }
.w-n { font: 400 clamp(40px, 3.3vw, 54px)/.9 var(--serif); letter-spacing: .01em; color: rgb(var(--tx)); font-variant-numeric: lining-nums; }
.w-of { align-self: flex-end; margin: 0 0 .3em -4px; font: 400 15px/1 var(--serif); letter-spacing: .04em; color: rgb(var(--tx) / .5); }
.w-meta { margin: 16px 0 0; white-space: nowrap; font: 400 12.5px/1.5 var(--zh); letter-spacing: .28em; color: rgb(var(--tx) / .66); }
.w-scale { width: min(230px, 100%); margin: 14px 0 16px; }
.w-desc { margin: 0; max-width: 26em; font: 400 15px/1.9 var(--zh); letter-spacing: .04em; color: rgb(var(--tx) / .74); }
.w-foot { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 28px; margin-top: 18px; font: 400 12px/1.4 var(--zh); letter-spacing: .2em; color: rgb(var(--tx) / .54); }
.w-tags { margin: 0; font: 400 15.5px/1.2 var(--serif); letter-spacing: .03em; color: rgb(var(--tx) / .76); }
.w-tags i, .w-stat i { font-style: normal; margin: 0 .55em; opacity: .5; }
.w-stat b { font: 400 14.5px/1 var(--serif); letter-spacing: .02em; color: rgb(var(--tx) / .76); }
.w-act { display: flex; align-items: center; gap: 30px; margin-top: 22px; font: 400 13.5px/1 var(--zh); letter-spacing: .26em; color: rgb(var(--tx)); }
.w-pv { color: rgb(var(--tx) / .7); }

/* ---------- 2b · QUICK PASSES (non-featured): an asterism caption on a leader from the light ---------- */
.q { position: absolute; left: var(--mx); top: calc(60 * var(--vh)); display: grid; grid-template-columns: auto auto; grid-template-areas: "lead n" ". body";
  align-items: center; column-gap: 11px; row-gap: 12px; color: rgb(var(--tx)); }
/* the legibility wash: never a shape — wide, low and gaussian (no edge anywhere), most of the legibility comes from the
   ink glow round the strokes (below) and the river thinning behind the caption (river-world setTextAvoid) */
.q::before { content: ""; position: absolute; inset: -110px -150px -110px -96px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--night) / .3), rgb(var(--night) / .27) 18%, rgb(var(--night) / .2) 36%, rgb(var(--night) / .115) 55%, rgb(var(--night) / .05) 72%, rgb(var(--night) / .014) 88%, rgb(var(--night) / 0)); }
/* type over the lit river: a soft ink halo round the strokes (legibility, not a drop shadow) */
.q, .w-b, .rv-b { text-shadow: 0 0 14px rgb(var(--night) / .9), 0 0 3px rgb(var(--night) / .55); }
.q { text-shadow: 0 0 2px rgb(var(--night) / .6), 0 0 9px rgb(var(--night) / .72), 0 0 22px rgb(var(--night) / .55), 0 0 46px rgb(var(--night) / .32); }
.q-lead { grid-area: lead; position: relative; width: 38px; height: 1px; background: rgb(var(--tx) / .5); }
.q-lead::after { content: ""; position: absolute; right: -2px; top: -1.5px; width: 4px; height: 4px; border-radius: 50%; background: rgb(var(--tx) / .9); }
.q-n { grid-area: n; display: flex; align-items: baseline; white-space: nowrap; font: 400 12px/1 var(--zh); letter-spacing: .24em; color: rgb(var(--tx) / .7); }
.q-n i { font-style: normal; margin: 0 .5em 0 .25em; opacity: .5; letter-spacing: 0; }
.q-n b { font: 400 16px/1 var(--serif); letter-spacing: .02em; color: rgb(var(--tx)); }
.q-n em { font: 400 12.5px/1 var(--serif); font-style: normal; margin-left: .35em; opacity: .55; letter-spacing: .02em; }
.q-body { grid-area: body; display: flex; align-items: flex-start; gap: 10px; }
.q-t { writing-mode: vertical-rl; max-height: min(44vh, 380px); font: 400 clamp(19px, 1.55vw, 23px)/1.36 var(--zh); letter-spacing: .14em; transition: opacity .4s; }
.q-m { writing-mode: vertical-rl; font: 400 11.5px/1.4 var(--zh); letter-spacing: .26em; color: rgb(var(--tx) / .6); }
.q-mh { display: none; }
.q:hover .q-t { opacity: .82; }
.q:hover .q-lead { background: rgb(var(--tx) / .85); }
/* the light on the right: the leader runs left (knot on its left end) and the caption stands on the far side */
.L-quick.flip .q, .L-quick.alt:not(.anch) .q { grid-template-areas: "n lead" "body ."; justify-items: end; }
.L-quick.flip .q-lead::after, .L-quick.alt:not(.anch) .q-lead::after { right: auto; left: -2px; }
.L-quick.flip .q-body, .L-quick.alt:not(.anch) .q-body { flex-direction: row-reverse; }
.L-quick.flip .q::before { inset: -110px -96px -110px -150px; }
/* a low light: the title column stands above the leader */
.L-quick.up .q { grid-template-areas: ". body" "lead n"; }
.L-quick.up.flip .q { grid-template-areas: "body ." "n lead"; }
.L-quick.up .q-body { align-items: flex-end; }
.L-quick.alt:not(.anch) .q { left: auto; right: calc(var(--mx) + 40px); top: calc(26 * var(--vh)); }
.L.L-quick.anch .q { left: 0; right: auto; top: 0; }

/* ---------- 3 · 星图 — the index: the vertical title, its column (sub, graduation, hint, filter), the asterism caption ---------- */
.atlas-frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.atlas-stars { position: absolute; inset: 0; }
.star { position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; }
.star i { display: none; }
.atlas-stars.dots .star i { display: block; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%;
  background: rgb(var(--zhu)); opacity: calc(.45 + .55 * var(--sv, 1)); transition: opacity .6s, transform .6s var(--e-out); }
.atlas-stars.dots .star.dim i { opacity: .16; transform: scale(.7); }
.atlas-stars.dots .star.foc i { transform: scale(1.35); }
.star.dim { cursor: default; }
.atlas-focus { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; visibility: hidden; transition: opacity .45s var(--e-io), visibility 0s .45s; }
.atlas-focus.on { opacity: calc(var(--v, 1)); visibility: visible; transition: opacity .45s var(--e-io); }
.atlas-ring { position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgb(var(--moon) / .62); }
.atlas-focus.pop .atlas-ring { animation: ring-in .9s var(--e-out) both; }
@keyframes ring-in { from { transform: scale(1.8); opacity: 0; } to { transform: none; opacity: 1; } }
.atlas-lead { position: absolute; left: 0; top: 0; width: 1px; height: 1px; }
.atlas-lead path { fill: none; stroke: rgb(var(--moon) / .55); stroke-width: 1; stroke-dasharray: 120; stroke-dashoffset: 0; }
.atlas-knot { fill: rgb(var(--moon) / .9); }
.atlas-focus.pop .atlas-lead path { animation: lead-in .8s var(--e-out) .06s both; }
.atlas-focus.pop .atlas-knot { animation: cap-in .6s var(--e-out) .3s both; }
@keyframes lead-in { from { stroke-dashoffset: 120; } }
.atlas-cap { position: absolute; left: 66px; top: -200px; display: flex; align-items: flex-end; gap: 9px; white-space: nowrap; }
.atlas-focus.fy .atlas-cap { align-items: flex-start; }
.atlas-focus.fx .atlas-cap { flex-direction: row-reverse; }
.atlas-cap::before { content: ""; position: absolute; inset: -34px -36px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--night) / .66), rgb(var(--night) / .3) 60%, transparent); }
.atlas-focus.pop .atlas-cap > * { animation: cap-in .9s var(--e-out) both; }
.atlas-focus.pop .atlas-cap > :nth-child(3) { animation-delay: .08s; }
.atlas-focus.pop .atlas-cap > :nth-child(4) { animation-delay: .16s; }
@keyframes cap-in { from { opacity: 0; filter: blur(6px); } }
.ac-n { display: none; }
.ac-t { writing-mode: vertical-rl; max-height: min(46vh, 380px); font: 400 19px/1.32 var(--zh); letter-spacing: .16em; color: rgb(var(--moon)); }
.ac-m { writing-mode: vertical-rl; font: 400 12px/1.4 var(--zh); letter-spacing: .24em; color: rgb(var(--moon-2)); }
.ac-m .mh { display: none; }
.ac-go { writing-mode: vertical-rl; font: 400 11.5px/1.4 var(--zh); letter-spacing: .24em; color: rgb(var(--moon-3)); }
.atlas-head { position: absolute; left: var(--mx); bottom: calc(8.5 * var(--vh)); display: flex; align-items: flex-start; gap: 26px; }
.atlas-head::before { content: ""; position: absolute; inset: -40% -18% -30% -24%; z-index: -1; pointer-events: none; opacity: var(--v, 0);
  background: radial-gradient(closest-side, rgb(var(--night) / .45), transparent); }
.atlas-t { flex: none; margin: 0; writing-mode: vertical-rl; font: 400 clamp(34px, 3vw, 46px)/1 var(--zh); letter-spacing: .32em; color: rgb(var(--tx)); }
.atlas-col { position: relative; padding: .1em 0 0 24px; }
.atlas-col::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .4em; width: 1px; background: rgb(var(--tx) / .18); }
.atlas-sub { margin: 0; font: italic 400 18px/1.3 var(--serif); letter-spacing: .02em; color: rgb(var(--tx) / .76); }
.atlas-scale { width: 200px; margin: 13px 0 12px; }
.atlas-hint { margin: 0; font: 400 12px/1.6 var(--zh); letter-spacing: .22em; color: rgb(var(--tx) / .56); }
.filter { display: flex; flex-wrap: wrap; gap: 2px 26px; margin-top: 18px; }
.filter button { position: relative; display: inline-flex; align-items: baseline; gap: .5em; padding: 9px 0; font: 400 13px/1 var(--zh); letter-spacing: .2em;
  color: rgb(var(--tx) / .54); transition: color .3s; }
.filter button b { font: 400 13.5px/1 var(--serif); letter-spacing: .02em; opacity: .72; }
.filter button::after { content: ""; position: absolute; left: 0; right: .2em; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0);
  transform-origin: 0 50%; transition: transform .3s var(--e-out); }
.filter button::before { content: ""; position: absolute; left: -11px; top: 50%; width: 4px; height: 4px; margin-top: -3px; background: rgb(var(--zhu)); opacity: 0; transition: opacity .3s; }
.filter button:hover { color: rgb(var(--tx) / .88); }
.filter button:hover::after { transform: scaleX(1); opacity: .5; }
.filter button[aria-pressed=true] { color: rgb(var(--tx)); }
.filter button[aria-pressed=true]::before { opacity: 1; }

/* ---------- 3 · the river: one quiet chapter caption (bottom left), its title set vertically ---------- */
.rv-b { position: absolute; left: var(--mx); bottom: calc(13 * var(--vh)); display: flex; align-items: flex-start; gap: 28px; }
.rv-b::before { content: ""; position: absolute; inset: -30% -40% -36% -30%; z-index: -1; pointer-events: none; opacity: var(--v, 0);
  background: radial-gradient(closest-side, rgb(var(--night) / .46), rgb(var(--night) / .16) 62%, transparent); }
.rv-t { flex: none; margin: 0; writing-mode: vertical-rl; font: 400 clamp(44px, 4.3vw, 68px)/1 var(--zh); letter-spacing: .26em; color: rgb(var(--tx)); }
.rv-col { position: relative; padding: .2em 0 0 26px; }
.rv-col::before { content: ""; position: absolute; left: 0; top: .3em; height: 150px; width: 1px; background: linear-gradient(rgb(var(--tx) / .3), rgb(var(--tx) / 0)); }
.rv-eye { margin: 0; font: italic 400 clamp(19px, 1.45vw, 23px)/1.2 var(--serif); letter-spacing: .02em; color: rgb(var(--tx) / .82); }
.rv-scale { width: 200px; margin: 14px 0 13px; }
.rv-s { margin: 0; font: 400 13px/1.7 var(--zh); letter-spacing: .3em; color: rgb(var(--tx) / .66); }

/* ---------- 4 · the dive: no DOM type — the introduction lives in WebGL; screen readers read this hidden copy ---------- */
.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- 5½ · 穿过视界 — BEYOND THE HORIZON: the white after the dive is a sheet of xuan paper ----------
   Ink type soaks into it (ui.js paintInk: blur → sharp, opacity, a breath of spread; the title per character), holds, and
   disperses as the bloom contracts into the dawn sun. Composed like an inscription on a hanging scroll, never centred:
   right of centre the title in two vertical columns, the kicker column 「穿过视界」 beside it with the one vermilion seal,
   a graduated vertical hairline between them, the Latin line under it on a graduated rule; the prose low on the left. */
.L-beyond { --ik: var(--ink); color: rgb(var(--ik)); }
.L-beyond::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: calc(var(--v, 0) * .85);
  background-image: radial-gradient(130% 105% at 58% 44%, rgb(var(--ink-3) / 0) 54%, rgb(var(--ink-3) / .07) 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .18 0 0 0 0 .16 .8 0 0 0 -.37'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .011' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .47 0 0 0 0 .42 .36 0 0 0 -.155'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
  background-size: auto, 260px 260px, 560px 560px; }
.by-b { position: absolute; inset: 0; }
[data-r=ink], .ik { opacity: 0; }
.ik { display: inline-block; transform-origin: 50% 60%; }
.by-g { position: absolute; right: 25vw; top: calc(16 * var(--vh)); display: flex; flex-direction: column; align-items: flex-end; }
.by-v { display: flex; flex-direction: row-reverse; align-items: stretch; gap: clamp(24px, 2.5vw, 40px); }
.by-k { margin: 0; writing-mode: vertical-rl; display: flex; align-items: center; gap: 26px; padding-top: .5em; font: 400 14px/1 var(--zh); letter-spacing: .62em; color: rgb(var(--ik) / .66); }
.by-seal { font-size: 12px; min-width: 22px; min-height: 22px; letter-spacing: 0; }
.by-vr { flex: none; width: 5px; margin: .4em 0 .2em; color: rgb(var(--ik) / .32);
  background: linear-gradient(currentColor, currentColor) 0 0 / 1px 100% no-repeat, repeating-linear-gradient(currentColor 0 1px, transparent 1px 10px) 1px 0 / 3px 100% no-repeat; }
.by-t { margin: 0; writing-mode: vertical-rl; font: 400 clamp(50px, 5vw, 80px)/1.6 var(--zh); letter-spacing: .2em; white-space: nowrap; color: rgb(var(--ik)); }
.by-c { display: block; }
.by-en { margin: clamp(20px, 3.4vh, 34px) 0 0; display: flex; align-items: center; gap: 18px; }
.by-en em { font: italic 400 clamp(19px, 1.5vw, 24px)/1 var(--serif); letter-spacing: .02em; color: rgb(var(--ik) / .72); }
.by-r { width: clamp(120px, 12vw, 190px); color: rgb(var(--ik) / .36); transform: translateY(4px); }
.by-tx { position: absolute; left: calc(var(--mx) + 7vw); bottom: calc(19 * var(--vh)); max-width: 30em; }
.by-p { margin: 0; font: 400 15.5px/1.95 var(--zh); letter-spacing: .1em; color: rgb(var(--ik) / .82); }
.by-p .lt { font: 400 1.28em/1 var(--serif); letter-spacing: .015em; }
.by-p i { font-style: normal; margin: 0 .55em; opacity: .5; letter-spacing: 0; }
.by-p1 { margin-bottom: 10px; font-size: 15px; letter-spacing: .16em; color: rgb(var(--ik) / .92); }
.ph { display: block; }
.by-f { margin: clamp(18px, 3vh, 28px) 0 0; padding-top: 14px; border-top: 1px solid rgb(var(--ik) / .14); width: fit-content;
  font: 400 12.5px/1.5 var(--zh); letter-spacing: .28em; color: rgb(var(--ik) / .66); }
.by-f b { font: 400 1.42em/1 var(--serif); letter-spacing: .02em; margin-right: .32em; color: rgb(var(--ik) / .88); }
.by-f i { font-style: normal; margin: 0 .95em 0 .65em; letter-spacing: 0; opacity: .6; }
.by-cue { position: absolute; right: calc(var(--mx) + 34px); bottom: calc(6.5 * var(--vh)); display: flex; align-items: center; gap: 16px;
  font: 400 12px/1 var(--zh); letter-spacing: .3em; color: rgb(var(--ik) / .66); }
.by-cue i { position: relative; width: 1px; height: 46px; background: rgb(var(--ik) / .14); overflow: hidden; }
.by-cue i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: linear-gradient(rgb(var(--ik) / 0), rgb(var(--ik) / .7));
  animation: cue 2.6s var(--e-io) infinite; }
html.rm .L-beyond [data-r=ink], html.rm .L-beyond .ik, html.static .L-beyond [data-r=ink], html.static .L-beyond .ik { opacity: 1 !important; filter: none !important; transform: none !important; }
html.rm .by-cue i::after { animation: none; }
@media (max-width: 640px) {
  .by-g { right: calc(var(--mx) + 2px); top: calc(14 * var(--vh)); }
  .by-v { gap: 18px; }
  .by-k { font-size: 12.5px; letter-spacing: .5em; gap: 20px; }
  .by-seal { min-width: 20px; min-height: 20px; font-size: 11px; }
  .by-t { font-size: clamp(38px, 11.4vw, 48px); line-height: 1.55; letter-spacing: .16em; }
  .by-en { margin-top: 20px; gap: 12px; }
  .by-en em { font-size: 18px; }
  .by-r { width: 72px; }
  .by-tx { left: var(--mx); right: var(--mx); bottom: calc(15 * var(--vh)); max-width: none; }
  .by-p { font-size: 14.5px; line-height: 1.9; letter-spacing: .06em; }
  .by-p1 { font-size: 14px; letter-spacing: .1em; margin-bottom: 6px; }
  .by-f { margin-top: 18px; font-size: 12.5px; letter-spacing: .14em; }
  .by-f i { margin: 0 .6em 0 .4em; }
  .by-cue { right: auto; left: var(--mx); bottom: calc(5 * var(--vh)); flex-direction: row-reverse; font-size: 11.5px; letter-spacing: .26em; }
}

/* ---------- 6 · THE NEW WORLD — one cosmic-dawn sky: arrival · 联系 (moonlight ivory on the night) ----------
   The sky drifts slowly between the two beats (stage/dawn.js `drift`); inside a beat its type rises a little (--dr, ui.js).
   .nw-* / .ab-* / .sk-* below: the 关于 · 能力 blocks of the static edition (and the opts.diveText fallback in the dive). */
.Lw { color: rgb(var(--ft)); }
.nw-b, .wa-b, .L-contact .f-b { translate: 0 calc(var(--dr, 0) * 7 * var(--vh)); }
.nw-b { position: absolute; left: calc(var(--mx) + 3.4vw); top: calc(14 * var(--vh)); }
.nw-vr { position: absolute; left: -3.2vw; top: calc(-4.6 * var(--vh)); bottom: calc(-3 * var(--vh)); width: 1px; transform-origin: 50% 0;
  background: linear-gradient(rgb(var(--ft) / 0), rgb(var(--ft) / .36) 16%, rgb(var(--ft) / .26) 70%, rgb(var(--ft) / 0)); }
.nw-eye { display: flex; align-items: center; gap: 16px; margin: 0 0 clamp(22px, 3.8vh, 36px); }
.nw-k { font: 400 13px/1.5 var(--zh); letter-spacing: .56em; color: rgb(var(--ft) / .9); }
.nw-eye .rule { width: 46px; flex: none; color: rgb(var(--ft) / .36); }
.nw-eye em { font: italic 400 18px/1.25 var(--serif); letter-spacing: .02em; color: rgb(var(--ft) / .7); }

/* arrival — the white bloom has resolved into the dawn: a centred, quiet title (shrink-wrapped: its rect is what
   dawn.setAvoid gets, so the sky only deepens right behind the type, not across the whole band) */
.wa-b { position: absolute; left: 50%; top: calc(24 * var(--vh)); width: max-content; max-width: 92vw; transform: translateX(-50%);
  display: grid; justify-items: center; text-align: center; }
.wa-k { margin: 0; padding-left: .9em; font: 400 13px/1.5 var(--zh); letter-spacing: .9em; color: rgb(var(--ft) / .82); }
.wa-t { margin: clamp(10px, 1.8vh, 18px) 0 0; font: italic 400 clamp(64px, 7.8vw, 132px)/1 var(--serif); letter-spacing: -.008em; color: rgb(var(--ft)); }
.wa-t .ln-i { padding-right: .06em; }
.wa-r { position: relative; width: min(300px, 56vw); margin: clamp(20px, 3.2vh, 30px) 0 0; color: rgb(var(--ft) / .42); }
.wa-r b { position: absolute; left: 50%; top: -2px; width: 5px; height: 5px; margin-left: -2.5px; background: rgb(var(--zhu)); }
.wa-s { margin: clamp(14px, 2.4vh, 22px) 0 0; padding-left: .4em; font: 400 12.5px/1.5 var(--zh); letter-spacing: .4em; color: rgb(var(--ft) / .8); }
.wa-s .lt { font: italic 400 15.5px/1 var(--serif); letter-spacing: .03em; }

/* 关于 — the about text from the site config as one large statement; the facts below a hairline (static / fallback) */
.ab-t { margin: 0; max-width: 15em; font: 400 clamp(23px, 2.45vw, 40px)/1.7 var(--zh); letter-spacing: .07em; color: rgb(var(--ft)); text-wrap: pretty; }
[data-words] .tk { white-space: nowrap; }
[data-words] .cl { display: block; text-wrap: balance; }
.ab-t .lt { font: italic 400 1.16em/1 var(--serif); letter-spacing: 0; color: rgb(var(--ft)); padding: 0 .04em; }
.ab-rule { width: min(540px, 100%); margin: clamp(28px, 4.6vh, 46px) 0 clamp(16px, 2.4vh, 22px); color: rgb(var(--ft) / .2); }
.ab-f { display: flex; flex-wrap: wrap; gap: 14px clamp(30px, 3.6vw, 58px); margin: 0; }
.ab-f dt { margin: 0 0 8px; font: 400 12px/1.4 var(--zh); letter-spacing: .4em; color: rgb(var(--ft) / .6); }
.ab-f dd { display: flex; align-items: center; gap: 10px; margin: 0; font: 400 17px/1.4 var(--serif); letter-spacing: .03em; color: rgb(var(--ft) / .94); }
.ab-f dd i:not(.seal-dot) { font-style: normal; opacity: .45; }

/* 能力 — derived only from the data: the declared skills as display type, then three quiet indexes and the totals (static / fallback) */
.sk-d { margin: 0; font: 400 clamp(54px, 5vw, 88px)/.98 var(--serif); letter-spacing: -.01em; }
.sk-d > span { display: block; }
.sk-l2 { font-style: italic; font-size: .64em; margin: .12em 0 0 1.25em; }
.sk-grid { display: grid; grid-template-columns: minmax(0, 172px) minmax(0, 290px) minmax(0, 172px); gap: 0 clamp(26px, 2.8vw, 46px); margin-top: clamp(26px, 4.4vh, 40px); }
.sk-h { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; font: 400 12px/1.4 var(--zh); letter-spacing: .4em; color: rgb(var(--ft) / .7); }
.sk-h em { font: italic 400 14px/1 var(--serif); letter-spacing: .02em; color: rgb(var(--ft) / .44); }
.sk-col ul { border-top: 1px solid rgb(var(--ft) / .18); padding-top: 6px; }
.sk-col li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 0; font: 400 13px/1.4 var(--zh); letter-spacing: .06em;
  color: rgb(var(--ft) / .8); }
.sk-col li b { font: 400 17px/1 var(--serif); color: rgb(var(--ft)); }
.sk-tech ul { display: grid; grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: 28px; }
.sk-tech li span { font: 400 15px/1.4 var(--serif); letter-spacing: .03em; color: rgb(var(--ft) / .88); }
.sk-sum { margin: clamp(16px, 2.8vh, 26px) 0 0 .1em; font: 400 12.5px/1.7 var(--zh); letter-spacing: .14em; color: rgb(var(--ft) / .7); }
.sk-sum i { font-style: normal; margin: 0 .9em; color: rgb(var(--ft) / .5); }

/* 联系 — the name with its seal, a graduated base, the status, two text rows (label · value · 复制), the footer */
.L-contact { color: rgb(var(--ft)); }
.orbits { position: absolute; inset: 0; width: 100%; height: 100%; }
.L-contact .hl { stroke: rgb(var(--ft) / .24); }
.L-contact .hl.dim { stroke: rgb(var(--ft) / .12); }
.L-contact .dot { fill: rgb(var(--ft) / .72); }
.f-b { position: absolute; left: calc(var(--mx) + 3.4vw); top: calc(15 * var(--vh)); }
.f-b::before { content: ""; position: absolute; inset: -18% -34% -16% -20%; z-index: -1; pointer-events: none; opacity: var(--v, 0);
  background: radial-gradient(closest-side, rgb(var(--night) / .34), rgb(var(--night) / 0)); }
.f-vr { position: absolute; left: -3.2vw; top: -4.6vh; height: calc(27 * var(--vh)); width: 5px; transform-origin: 50% 0; color: rgb(var(--ft) / .34);
  background: linear-gradient(rgb(var(--ft) / 0), rgb(var(--ft) / .4) 30%) 0 0 / 1px 100% no-repeat, repeating-linear-gradient(currentColor 0 1px, transparent 1px 10px) 1px 30% / 3px 70% no-repeat; }
.f-name { position: relative; display: flex; align-items: flex-start; gap: .1em; margin: 0 0 0 -.04em; font: 400 clamp(92px, 11.6vw, 200px)/.86 var(--serif); letter-spacing: -.016em; color: rgb(var(--ft)); }
.f-seal { margin-top: .12em; font-size: clamp(13px, 1.25vw, 20px); }
.f-base { width: calc(100% + 9vw); max-width: 74vw; margin: clamp(14px, 2.2vh, 24px) 0 0 -3.2vw; color: rgb(var(--ft) / .36); }
.f-status { margin: clamp(18px, 3vh, 30px) 0 0; font: 400 14px/1.7 var(--zh); letter-spacing: .24em; color: rgb(var(--ft) / .76); }
.f-lines { margin-top: clamp(20px, 3.4vh, 34px); width: min(440px, 80vw); }
.f-lines li { display: grid; grid-template-columns: 4.4em 1fr auto; align-items: baseline; gap: 14px; padding: 12px 0 11px; border-bottom: 1px solid rgb(var(--ft) / .16); }
.f-k { font: 400 12px/1 var(--zh); letter-spacing: .32em; color: rgb(var(--ft) / .58); }
.f-v { position: relative; width: fit-content; font: 400 24px/1.25 var(--serif); letter-spacing: .03em; color: rgb(var(--ft)); }
.f-v::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; opacity: .7; transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--e-out); }
.f-v:hover::after, .f-v:focus-visible::after { transform: none; }
.copy { font: 400 12px/1 var(--zh); letter-spacing: .26em; color: rgb(var(--ft) / .64); }
.copy:hover { color: rgb(var(--ft)); }
.copy > span:first-child { display: grid; }
.copy .cp-b { position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; }
.copy .cp-a, .copy .cp-b { transition: opacity .35s var(--e-io), filter .35s var(--e-io); }
.copy.done .cp-a { opacity: 0; filter: blur(3px); }
.copy.done .cp-b { opacity: 1; }
.copy.done { color: rgb(var(--ft)); }
.L-contact::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(20 * var(--vh)); pointer-events: none; z-index: -1; opacity: var(--v, 0);
  background: linear-gradient(rgb(var(--night) / 0), rgb(var(--night) / .42)); }
.f-foot { position: absolute; left: var(--mx); right: var(--mx); bottom: calc(4 * var(--vh)); display: flex; flex-wrap: wrap; gap: 6px 30px; align-items: baseline;
  font: 400 12px/1.4 var(--zh); letter-spacing: .22em; color: rgb(var(--ft) / .76); }
.f-foot .lt { font: 400 14px/1.4 var(--serif); letter-spacing: .04em; }
.f-foot a { margin-left: auto; color: rgb(var(--ft) / .88); }
.f-foot a:hover { color: rgb(var(--ft)); }

/* ---------- preview frame (media only on intent): no pane, no border — the image feathers into the night ---------- */
.pv { position: fixed; left: 0; top: 0; z-index: 30; width: clamp(236px, 20.5vw, 320px); pointer-events: none; opacity: 0; visibility: hidden;
  transition: opacity .5s var(--e-io), visibility 0s .5s; }
.pv.on { opacity: 1; visibility: visible; transition: opacity .5s var(--e-io); }
.pv-m { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: rgb(var(--night) / .6); clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--e-out), background-color .8s var(--e-io);
  -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(transparent, #000 9%, #000 91%, transparent);
  mask-composite: intersect; }
.pv.on .pv-m { clip-path: inset(0 0 0 0); }
.pv.ready .pv-m { background: rgb(var(--night)); }
.pv-ph { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font: 400 clamp(46px, 4.4vw, 68px)/1 var(--serif);
  color: rgb(var(--tx) / .16); letter-spacing: .02em; transition: opacity .6s var(--e-io); }
.pv.ready .pv-ph { opacity: 0; }
.pv-m::before { content: ""; position: absolute; left: 0; bottom: 8%; z-index: 1; width: 38%; height: 1px; opacity: 0;
  background: linear-gradient(90deg, transparent, rgb(var(--tx) / .7), transparent); }
.pv.on:not(.ready) .pv-m::before { opacity: 1; animation: pv-load 1.8s var(--e-io) infinite; }
@keyframes pv-load { from { transform: translateX(-100%); } to { transform: translateX(265%); } }
.pv img, .pv video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pv img { opacity: 0; filter: blur(6px); transition: opacity .9s var(--e-io), filter 1.1s var(--e-out); }
.pv.on.ready img { opacity: 1; filter: none; }
.pv video { opacity: 0; transition: opacity .9s var(--e-io); }
.pv.vid video { opacity: 1; }
.pv.nomedia .pv-m { background: rgb(var(--night) / .6); }
.pv.nomedia .pv-ph { opacity: 1; }
.pv-bar { position: absolute; left: 7%; right: 7%; bottom: 9%; height: 1px; background: rgb(var(--tx) / .8); transform: scaleX(0); transform-origin: 0 50%; z-index: 1; }
.pv-cap { display: flex; align-items: baseline; gap: 10px; margin: 8px 0 0; white-space: nowrap; overflow: hidden; height: 24px; }
.pv-n { font: 400 15px/1 var(--serif); color: rgb(var(--tx) / .8); }
.pv-t { font: 400 13px/1.4 var(--zh); letter-spacing: .1em; color: rgb(var(--tx) / .86); overflow: hidden; text-overflow: ellipsis; }
.pv-k { margin-left: auto; font: 400 11px/1 var(--zh); letter-spacing: .26em; color: rgb(var(--tx) / .5); }
.pv.vid .pv-k { color: rgb(var(--tx) / .8); }

/* ---------- 目录 — the full-screen menu: four scrolls (卷一 … 卷四) set vertically on an ink-night wash ---------- */
.menu { position: fixed; inset: 0; z-index: 50; color: rgb(var(--moon)); opacity: 0; visibility: hidden;
  background: radial-gradient(120% 95% at 70% 38%, rgb(var(--wash-2)) 0%, rgb(var(--wash)) 34%, rgb(var(--night)) 76%);
  transition: opacity .8s var(--e-io), visibility 0s .8s; }
html.menu-open .menu { opacity: 1; visibility: visible; transition: opacity .8s var(--e-io); }
.menu::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--stars); background-size: var(--stars-size);
  opacity: 0; transition: opacity 1.6s var(--e-io) .15s; }
html.menu-open .menu::after { opacity: .55; animation: starBreath 7s ease-in-out 1.8s infinite alternate; }
@keyframes starBreath { from { opacity: .55; } to { opacity: .32; } }
.menu-sc { position: absolute; left: var(--mx); right: var(--mx); top: calc(11 * var(--vh)); color: rgb(var(--moon) / .2); transform: scaleX(0); transition: transform 1.2s var(--e-out) .1s; }
html.menu-open .menu-sc { transform: none; }
.menu-nav { position: absolute; right: calc(var(--mx) + 5vw); top: calc(20 * var(--vh)); }
.menu-nav ol { display: flex; flex-direction: row-reverse; align-items: flex-start; gap: clamp(40px, 6vw, 104px); }
.menu-nav a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; transition: opacity .5s; }
.mn { position: relative; writing-mode: vertical-rl; font: 400 12px/1 var(--zh); letter-spacing: .42em; color: rgb(var(--moon) / .64); }
.menu-nav a.now .mn::before { content: ""; position: absolute; left: 50%; top: -16px; width: 5px; height: 5px; margin-left: -2.5px; background: rgb(var(--zhu)); }
.mz { display: block; writing-mode: vertical-rl; font: 400 clamp(46px, 4.7vw, 76px)/1 var(--zh); letter-spacing: .24em; }
.mz span { display: block; opacity: 0; filter: blur(8px); transition: opacity .5s var(--e-io), filter .5s var(--e-io); }
html.menu-open .mz span { opacity: 1; filter: none; transition: opacity 1.1s var(--e-out) calc(var(--i) * 90ms + 150ms), filter 1.1s var(--e-out) calc(var(--i) * 90ms + 150ms); }
.me { position: relative; writing-mode: vertical-rl; padding-top: 18px; font: italic 400 clamp(16px, 1.3vw, 20px)/1 var(--serif); letter-spacing: .02em; color: rgb(var(--moon) / .62);
  opacity: 0; transition: opacity .4s, color .3s; }
.me::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 10px; background: currentColor; opacity: .6; }
html.menu-open .me { opacity: 1; transition: opacity .9s var(--e-io) calc(var(--i) * 90ms + 420ms), color .3s; }
.menu-nav ol:has(a:hover) a:not(:hover), .menu-nav ol:has(a:focus-visible) a:not(:focus-visible):not(:hover) { opacity: .34; }
.menu-nav a:hover .me, .menu-nav a:focus-visible .me { color: rgb(var(--moon)); }
.menu-side { position: absolute; left: var(--mx); bottom: calc(9 * var(--vh)); display: grid; justify-items: start; gap: 8px; opacity: 0; filter: blur(4px);
  transition: opacity .4s, filter .4s; }
html.menu-open .menu-side { opacity: 1; filter: none; transition: opacity 1s var(--e-io) .55s, filter 1s var(--e-io) .55s; }
.menu-st { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font: 400 12.5px/1.4 var(--zh); letter-spacing: .3em; color: rgb(var(--moon) / .86); }
.menu-st em { font: italic 400 15px/1 var(--serif); letter-spacing: .02em; color: rgb(var(--moon) / .56); }
.menu-role { margin: 0 0 10px; font: 400 13px/1.6 var(--zh); letter-spacing: .16em; color: rgb(var(--moon) / .62); }
.menu-role .lt { font-size: 16px; }
.menu-side a { font: 400 20px/1.4 var(--serif); letter-spacing: .03em; }
.menu-side a > span:first-child { padding-bottom: 3px; }

/* ---------- veil (boot, far jumps, leaving): the night, its stars, a vermilion seal at the centre + toast ---------- */
.veil { position: fixed; inset: 0; z-index: 60; background: rgb(var(--night)); opacity: 0; pointer-events: none; }
.veil.light { background: rgb(var(--xuan)); }
.veil::after { content: ""; position: absolute; inset: 0; background-image: var(--stars); background-size: var(--stars-size); opacity: var(--bk, 0); }
.veil-seal { position: absolute; left: 50%; top: 50%; z-index: 1; min-width: 22px; min-height: 22px; margin: -11px 0 0 -11px; font-size: 12.5px; opacity: .92; }
html:not(.booted) .veil { opacity: 1; }
.toast { position: fixed; left: 50%; bottom: calc(7 * var(--vh)); z-index: 70; margin: 0; padding: 10px 0 0; transform: translate(-50%, 0);
  font: 400 12.5px/1.4 var(--zh); letter-spacing: .24em; color: rgb(var(--fg)); border-top: 1px solid rgb(var(--fg) / .36); opacity: 0; filter: blur(4px);
  transition: opacity .5s var(--e-io), filter .5s var(--e-io); pointer-events: none; white-space: nowrap; }
.toast.on { opacity: 1; filter: none; }

/* ---------- reduced motion: calm crossfades between composed stills ---------- */
html.rm .ln-i, html.rm .ch-i { opacity: 1 !important; filter: none !important; transform: none !important; }
html.rm [data-r=fade] { opacity: 1 !important; filter: none !important; transform: none !important; }
html.rm [data-r=rule], html.rm [data-r=ruley] { transform: none !important; }
html.rm .L { visibility: visible; opacity: 0; transition: opacity 1s var(--e-io); }
html.rm .L.on { opacity: 1; }
html.rm .L:not(.on) a, html.rm .L:not(.on) button { pointer-events: none !important; }
html.rm .hl, html.rm .dot { --d: 1 !important; }
html.rm .nw-b, html.rm .wa-b, html.rm .L-contact .f-b { translate: none; }
html.rm .cue i::after, html.rm .menu::after { animation: none; }
html.rm .menu, html.rm .menu *, html.rm .pv, html.rm .pv *, html.rm .mb-t span, html.rm .toast { transition-duration: .01s !important; transition-delay: 0s !important; animation: none !important; }
html.rm .atlas-focus.pop .atlas-ring, html.rm .atlas-focus.pop .atlas-lead path, html.rm .atlas-focus.pop .atlas-knot, html.rm .atlas-focus.pop .atlas-cap > * { animation: none; }
@media (prefers-reduced-motion: reduce) { .cue i::after, .menu::after, .by-cue i::after { animation: none; } }

/* ---------- static editorial page (no WebGL) — the same order as the journey ----------
   title (the night before the dawn, assets/cosmic-night) → 星图 head + filter → the works (on xuan paper, ink) → 关于 and
   能力 on the starry night (the DOM starfield) → 穿过视界 (a band of paper) → 联系 on the cosmic dawn (assets/cosmic-dawn). */
html.static { background: rgb(var(--paper)); color: rgb(var(--ink)); color-scheme: light; --fg: var(--ft); }
html.static body { background: rgb(var(--paper)); }
html.static .ui { --tx: var(--ink); --ac: var(--ink-2); color: rgb(var(--ink)); }
html.static #stage, html.static #journey, html.static .prog, html.static .veil, html.static .cue, html.static .L-dive, html.static .L-river,
html.static .L-world, html.static .atlas-frame, html.static .atlas-stars, html.static .atlas-focus, html.static .atlas-hint, html.static .orbits, html.static .pv,
html.static .w-b::before, html.static .w-pv, html.static .nw-vr, html.static .atlas-head::before, html.static .q::before, html.static .f-b::before { display: none !important; }
html.static .ln-i, html.static .ch-i { opacity: 1 !important; filter: none !important; transform: none !important; }
html.static [data-r=fade] { opacity: 1 !important; filter: none !important; transform: none !important; }
html.static [data-r=rule], html.static [data-r=ruley] { transform: none !important; }
html.static .layers { position: static; }
html.static .L { position: relative; inset: auto; visibility: visible; }
html.static .L a, html.static .L button { pointer-events: auto; }
html.static .chrome { position: absolute; opacity: 1; }
html.static .L-hero { --tx: var(--ft); min-height: 100svh; color: rgb(var(--ft)); background: rgb(var(--night)) 50% 100% / cover no-repeat;
  background-image: image-set(url(assets/cosmic-night.webp) type("image/webp"), url(assets/cosmic-night.jpg) type("image/jpeg")); }
html.static .L-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 16vh; background: linear-gradient(rgb(var(--paper) / 0), rgb(var(--paper))); }
html.static .hero-b { bottom: 18vh; z-index: 1; }
html.static .L-hero::before { content: ""; position: absolute; left: 0; bottom: 6vh; width: min(900px, 100%); height: 52vh; pointer-events: none;
  background: radial-gradient(60% 55% at 22% 62%, rgb(var(--night) / .5), rgb(var(--night) / 0)); }
html.static .hero-zh { color: rgb(var(--ft) / .72); }
html.static .hero-name { color: rgb(var(--ft)); }
html.static .works { padding: 10vh var(--mx) 4vh; display: grid; gap: 0; }
html.static .works::before { content: "作品 · 十七件"; display: block; margin-bottom: 4vh; font: 400 13px/1 var(--zh); letter-spacing: .4em; color: rgb(var(--ink-2)); }
html.static .L-work { border-top: 1px solid rgb(var(--ink) / .14); }
html.static .L-work.dim { display: none; }
html.static .w-b { position: relative; left: auto; bottom: auto; width: auto; max-width: 860px; padding: 6vh 0; display: grid; grid-template-columns: 9rem 1fr; column-gap: 3vw; row-gap: 0; }
html.static .w-title { grid-column: 2; grid-row: 1; writing-mode: horizontal-tb; max-height: none; margin: 0 0 4px; font-size: clamp(26px, 3vw, 40px); line-height: 1.3; letter-spacing: .06em; }
html.static .w-title a::after { display: none; }
html.static .w-col { display: contents; }
html.static .w-col > * { grid-column: 2; }
html.static .w-no { grid-column: 1; grid-row: 1 / span 2; align-self: start; gap: 8px; }
html.static .w-sl { display: none; }   /* one seal per screen: the list keeps its numbers only */
html.static .q, html.static .w-b, html.static .rv-b { text-shadow: none; }
html.static .w-n { font-size: 54px; color: rgb(var(--ink)); }
html.static .w-meta { margin-top: 6px; }
html.static .w-desc, html.static .w-foot { color: rgb(var(--ink) / .7); }
html.static .L-quick .q { position: relative; left: auto; top: auto; right: auto; transform: none !important; max-width: 860px; padding: 3.2vh 0;
  grid-template-columns: 9rem 1fr; column-gap: 3vw; row-gap: 6px; grid-template-areas: "n t" ". m"; justify-content: start; justify-items: start; text-align: left; }
html.static .L-quick .q-lead { display: none; }
html.static .L-quick .q-body { display: contents; }
html.static .L-quick .q-n { flex-direction: column; align-items: flex-start; gap: 6px; }
html.static .L-quick .q-n i { display: none; }
html.static .L-quick .q-n b { font-size: 26px; color: rgb(var(--ink)); }
html.static .L-quick .q-n em { margin: 0; }
html.static .L-quick .q-t { grid-area: t; writing-mode: horizontal-tb; max-height: none; font-size: clamp(19px, 1.65vw, 24px); letter-spacing: .06em; }
html.static .L-quick .q-m { grid-area: m; writing-mode: horizontal-tb; }
html.static .L-quick .q-mv { display: none; }
html.static .L-quick .q-mh { display: inline; }
html.static .layers { display: flex; flex-direction: column; }
html.static .L-hero { order: 0; } html.static .L-atlas { order: 1; padding: 10vh var(--mx) 0; } html.static .works { order: 2; } html.static .world { order: 3; }
html.static .atlas-head { position: relative; left: auto; bottom: auto; }
html.static .atlas-col::before { background: rgb(var(--ink) / .16); }
html.static .filter button::after { background: rgb(var(--ink) / .5); }
/* the new world: one night sky (starfield tiles from ui.js) that ends in the baked cosmic dawn */
html.static .world { position: relative; --tx: var(--ft); --ac: var(--ft); color: rgb(var(--ft)); color-scheme: dark; background-color: rgb(var(--night));
  background-image: radial-gradient(120% 60% at 70% 0, rgb(var(--wash-2) / .5), rgb(var(--night) / 0) 70%), var(--stars); background-size: auto, var(--stars-size); }
html.static .L-about, html.static .L-skills { padding: 16vh var(--mx) 4vh; }
html.static .L-about { padding-top: 20vh; }
html.static .nw-b { position: relative; left: auto; top: auto; right: auto; margin-left: 3.4vw; translate: none; }
html.static .wa-b, html.static .L-contact .f-b { translate: none; }
html.static .L-contact { min-height: 100svh; padding: 22vh var(--mx) 16vh; background-color: rgb(var(--night));
  background-image: linear-gradient(rgb(var(--night)), rgb(var(--night) / 0) 22%), linear-gradient(90deg, rgb(var(--night) / .5), rgb(var(--night) / 0) 62%),
    image-set(url(assets/cosmic-dawn.webp) type("image/webp"), url(assets/cosmic-dawn.jpg) type("image/jpeg"));
  background-size: auto, auto, cover; background-position: 0 0, 0 0, 30% 100%; background-repeat: no-repeat; }
html.static .L-contact .f-b, html.static .L-contact .f-foot { --ink: var(--ft); }
html.static .f-b { position: relative; left: auto; top: auto; margin-left: 3.4vw; }
html.static .f-foot { position: absolute; }
html.static .L-contact::after { opacity: 1; }
html.static .toast { color: rgb(var(--ink)); }
html.static .L-contact .f-name { color: rgb(var(--ft)); }
/* phone rules position these absolutely/fixed — neutralise every offset in the flowing edition */
html.static .atlas-head, html.static .w-b, html.static .nw-b, html.static .f-b { top: auto; right: auto; bottom: auto; }
html.static .filter { position: static; margin-top: 18px; }
/* 穿过视界 in the static edition: a band of xuan paper that blooms out of the night, between 能力 and 联系 */
html.static .L-beyond { min-height: 140svh; padding: 30vh var(--mx) 32vh;
  background: radial-gradient(160% 50% at 50% 50%, rgb(var(--xuan)) 0 60%, rgb(var(--xuan-2)) 73%, rgb(86 84 80) 87%, rgb(var(--night)) 100%); }
html.static .L-beyond::before { opacity: .85; }
html.static .by-b { position: relative; inset: auto; min-height: 76vh; max-width: 1180px; margin: 0 auto; }
html.static .by-g { right: 18%; top: 0; }
html.static .by-tx { left: 4%; bottom: 0; }
html.static .by-cue { position: relative; left: auto; right: auto; bottom: auto; margin: 9vh 0 0 auto; width: fit-content; }
@media (max-width: 640px) {
  html.static .by-b { min-height: 92vh; } html.static .by-g { right: 0; } html.static .by-tx { left: 0; right: 0; }
  html.static .by-cue { margin: 8vh 0 0; } html.static .L-beyond { padding: 22vh var(--mx) 26vh; }
}
@media (max-width: 640px) { html.static .f-b, html.static .nw-b { margin-left: 0; } html.static .L-contact { padding-top: 16vh; } html.static .L-about { padding-top: 14vh; } }

/* ---------- tablet / phone ---------- */
@media (max-width: 900px) {
  .w-b { max-width: 72vw; }
  .sk-grid { grid-template-columns: minmax(0, 150px) minmax(0, 250px) minmax(0, 150px); gap: 0 24px; }
}
@media (max-width: 640px) {
  :root { --mx: 22px; }
  body { font-size: 14px; }
  .wm { font-size: 19px; gap: 9px; }
  .wm-seal { min-width: 16px; min-height: 16px; font-size: 10.5px; }
  .mb { font-size: 12px; gap: 10px; }
  .snd { font-size: 12px; margin-right: 16px; letter-spacing: .18em; }
  .mb-h { width: 18px; }
  .prog { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 1px; transform: none; }
  .prog-tr::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; }
  .prog-sc { left: 0; right: 0; top: auto; bottom: 1px; width: auto; height: 3px; background: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 9px) 0 100% / 100% 3px no-repeat; }
  .prog-fill { width: 100%; height: 1px; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
  .prog-head { left: calc(var(--p, 0) * 100%); top: auto; bottom: 0; width: 1px; height: 11px; margin: 0 0 0 -.5px; }
  .prog-head::after { left: -1.5px; top: -1px; }
  .prog-ch { display: none; }
  .prog-now { display: none; }
  .hero-b { bottom: calc(15 * var(--vh)); }
  .hero-name { font-size: clamp(78px, 24vw, 120px); }
  .hero-role { letter-spacing: .2em; gap: 14px; font-size: 13px; }
  .hero-role .scale { width: 52px; }
  .hero-zh { margin-left: 66px; font-size: 12.5px; letter-spacing: .1em; }
  .cue { left: var(--mx); right: auto; bottom: calc(5.5 * var(--vh)); font-size: 11.5px; flex-direction: row-reverse; }
  /* works: horizontal on phones */
  .w-b { left: var(--mx); right: var(--mx); max-width: none; bottom: calc(8 * var(--vh)); flex-direction: column; align-items: flex-start; gap: 0; }
  .w-title { writing-mode: horizontal-tb; max-height: none; margin: 14px 0 0; font-size: clamp(25px, 7.4vw, 32px); line-height: 1.32; letter-spacing: .05em; }
  .w-title a::after { display: none; }
  .w-col { display: contents; }
  .w-b > .w-title { order: 2; }
  .w-no { order: 0; gap: 12px; }
  .w-n { font-size: 44px; }
  .w-meta { order: 1; margin-top: 12px; letter-spacing: .22em; }
  .w-scale { order: 3; width: 150px; margin: 12px 0; }
  .w-desc { order: 4; font-size: 14px; line-height: 1.85; }
  .w-foot { order: 5; gap: 6px 18px; margin-top: 12px; }
  .w-act { order: 6; margin-top: 16px; gap: 24px; }
  .w-stat { display: none; }
  .q { left: var(--mx); top: calc(58 * var(--vh)); max-width: calc(100vw - 44px); grid-template-areas: "lead n" ". body"; }
  .q-body { flex-direction: column; gap: 6px; }
  .q-t { writing-mode: horizontal-tb; max-height: none; font-size: 19px; letter-spacing: .05em; }
  .q-m { writing-mode: horizontal-tb; letter-spacing: .2em; }
  .q-mv { display: none; } .q-mh { display: inline; }
  .L-quick.flip .q, .L-quick.alt:not(.anch) .q { justify-items: end; text-align: right; }
  .L-quick.flip .q-body, .L-quick.alt:not(.anch) .q-body { flex-direction: column; align-items: flex-end; }
  .L-quick.up .q-body { align-items: flex-start; }
  .L-quick.up.flip .q-body { align-items: flex-end; }
  .L-quick.alt:not(.anch) .q { left: var(--mx); right: auto; top: calc(58 * var(--vh)); grid-template-areas: "lead n" ". body"; justify-items: start; text-align: left; }
  .L-quick.alt:not(.anch) .q-lead::after { left: auto; right: -2px; }
  .L-quick.alt:not(.anch) .q-body { align-items: flex-start; }
  /* 星图: the head at the top, horizontal; the filter docked low; the caption docks above it */
  .atlas-head { left: var(--mx); right: var(--mx); bottom: auto; top: calc(10.5 * var(--vh)); display: block; }
  .atlas-head::before { display: none; }
  .atlas-t { writing-mode: horizontal-tb; font-size: 28px; letter-spacing: .3em; }
  .atlas-col { padding: 10px 0 0; }
  .atlas-col::before { display: none; }
  .atlas-sub { font-size: 16px; }
  .atlas-scale { width: 120px; margin: 9px 0 8px; }
  .filter { position: fixed; left: var(--mx); right: var(--mx); bottom: calc(5 * var(--vh)); gap: 0 20px; margin: 0; padding-left: 10px; }
  .filter button { font-size: 12.5px; letter-spacing: .12em; }
  .atlas-focus.dock .atlas-cap { left: var(--dx, 0) !important; top: var(--dy, 0) !important; right: auto; width: calc(100vw - 2 * var(--mx)); display: grid; grid-template-columns: auto 1fr;
    column-gap: 10px; row-gap: 5px; align-items: baseline; white-space: normal; padding-top: 14px; transform: translateY(-100%); text-align: left;
    background: linear-gradient(rgb(var(--moon) / .5), rgb(var(--moon) / .5)) 0 0 / 26px 1px no-repeat; }
  .atlas-focus.dock .atlas-cap::before { inset: -20px -30px -14px; }
  .atlas-focus.dock .ac-n { display: block; grid-row: 1; font: 400 17px/1 var(--serif); color: rgb(var(--moon-2)); }
  .atlas-focus.dock .ac-t { writing-mode: horizontal-tb; max-height: none; grid-row: 1; font-size: 18px; letter-spacing: .05em; }
  .atlas-focus.dock .ac-m, .atlas-focus.dock .ac-go { writing-mode: horizontal-tb; grid-column: 2; }
  .atlas-focus.dock .ac-m .mv { display: none; } .atlas-focus.dock .ac-m .mh { display: inline; }
  .atlas-focus.dock .ac-go { font-size: 11px; }
  .rv-b { bottom: calc(15 * var(--vh)); display: block; }
  .rv-t { writing-mode: horizontal-tb; font-size: clamp(40px, 11.6vw, 52px); letter-spacing: .2em; }
  .rv-col { padding: 14px 0 0; }
  .rv-col::before { display: none; }
  .rv-scale { width: 140px; margin: 10px 0; }
  .rv-s { font-size: 12px; letter-spacing: .22em; }
  .nw-b { left: var(--mx); right: var(--mx); top: calc(12.5 * var(--vh)); }
  .nw-vr { display: none; }
  .nw-eye { margin-bottom: 20px; }
  .wa-b { top: calc(25 * var(--vh)); }
  .wa-k { letter-spacing: .7em; padding-left: .7em; }
  .wa-t { font-size: clamp(54px, 15.6vw, 74px); }
  .wa-s { letter-spacing: .3em; padding-left: .3em; }
  .ab-t { max-width: none; font-size: clamp(21px, 5.9vw, 25px); line-height: 1.7; letter-spacing: .05em; }
  .ab-f { gap: 14px 26px; }
  .ab-f dd { font-size: 15px; }
  .sk-d { font-size: clamp(44px, 12.4vw, 54px); }
  .sk-l2 { margin-left: .9em; }
  .sk-grid { grid-template-columns: 1fr 1fr; gap: 18px 22px; margin-top: 22px; }
  .sk-tech { grid-column: 1 / -1; grid-row: 1; }
  .sk-tech ul { display: flex; flex-wrap: wrap; gap: 0 18px; }
  .sk-tech li { justify-content: flex-start; gap: 5px; padding: 3px 0; }
  .sk-tech li b { font-size: 13px; opacity: .8; }
  .sk-col li { font-size: 12.5px; padding: 4px 0; }
  .sk-col li b { font-size: 15px; }
  .sk-sum { margin-top: 12px; font-size: 11px; letter-spacing: .06em; }
  .sk-sum i { margin: 0 .45em; }
  .f-b { left: var(--mx); right: var(--mx); top: calc(15 * var(--vh)); }
  .f-vr { display: none; }
  .f-name { font-size: clamp(76px, 23.5vw, 112px); }
  .f-seal { font-size: 12px; }
  .f-base { width: 100%; max-width: none; margin-left: 0; }
  .f-status { font-size: 13px; letter-spacing: .16em; }
  .f-lines { width: 100%; }
  .f-lines li { grid-template-columns: 3.6em 1fr auto; gap: 10px; }
  .f-v { font-size: 20px; }
  .f-foot { gap: 6px 18px; bottom: calc(3 * var(--vh)); font-size: 11.5px; letter-spacing: .16em; }
  /* the menu: horizontal on phones */
  .menu-sc { top: calc(9 * var(--vh)); }
  .menu-nav { left: var(--mx); right: var(--mx); top: calc(17 * var(--vh)); }
  .menu-nav ol { flex-direction: column; gap: 4px; }
  .menu-nav a { flex-direction: row; align-items: baseline; gap: 18px; }
  .mn, .mz, .me { writing-mode: horizontal-tb; }
  .mn { width: 3em; letter-spacing: .3em; }
  .menu-nav a.now .mn::before { left: -11px; top: 50%; margin: -3px 0 0; }
  .mz { font-size: clamp(40px, 12vw, 54px); line-height: 1.3; letter-spacing: .16em; }
  .me { padding: 0 0 0 16px; font-size: 17px; }
  .me::before { left: 0; top: 50%; width: 9px; height: 1px; }
  .menu-side { bottom: calc(7 * var(--vh)); }
  .menu-side a { font-size: 18px; }
  .pv { width: min(300px, calc(100vw - 40px)); }
  html.static .w-b { grid-template-columns: 1fr; display: grid; }
  html.static .w-title, html.static .w-col > *, html.static .w-no { grid-column: 1; }
  html.static .w-no { grid-row: auto; flex-direction: row; align-items: center; order: 0; }
  html.static .w-title { grid-row: auto; }
  html.static .L-quick .q { grid-template-columns: auto 1fr; column-gap: 14px; }
}
@media (max-height: 560px) and (min-width: 641px) {
  .w-desc { display: none; }
  .sk-grid { display: none; }
  .w-title { max-height: 60vh; }
  /* a quick caption waiting for its light (right-hand default) stays left of the rail's label 「其十二 · 12 / 17」 */
  .L-quick.alt:not(.anch) .q { right: calc(var(--mx) + 150px); }
}

/* ---------- opening overlay (legacy stand-in: main.js mounts .op-overlay; stage/opening.js — or opening-stub.js — fills it) ---------- */
.op-overlay { position: fixed; inset: 0; z-index: 8; pointer-events: none; color: rgb(var(--tx)); opacity: 0; visibility: hidden; }
html.static .op-overlay { display: none; }
.op-plate { position: absolute; left: var(--mx); bottom: calc(12.5 * var(--vh)); opacity: 0; will-change: opacity; }
.op-n { margin: 0 0 0 -.03em; font: 400 clamp(64px, 7.4vw, 124px)/.86 var(--serif); letter-spacing: -.006em; color: rgb(var(--tx) / .94); }
.op-r { display: block; width: min(250px, 36vw); height: 1px; margin: clamp(16px, 2.4vh, 24px) 0 clamp(14px, 2vh, 20px); background: rgb(var(--tx) / .4); }
.op-s { margin: 0; font: 400 12px/1.4 var(--zh); letter-spacing: .4em; color: rgb(var(--tx) / .7); }
.op-t { margin: 18px 0 0; font: italic 400 14px/1 var(--serif); letter-spacing: .1em; color: rgb(var(--tx) / .6); }
.op-cap { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .45s var(--e-out); will-change: transform, opacity; }
.op-cap.on { opacity: 1; }
.op-ring { position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border: 1px solid rgb(var(--moon) / .6); border-radius: 50%;
  transform: scale(.6); transition: transform .6s var(--e-out); }
.op-cap.on .op-ring { transform: scale(1); }
.op-cap p { position: absolute; left: 28px; top: -16px; margin: 0; display: grid; gap: 6px; white-space: nowrap; }
.op-cap.flip p { left: auto; right: 28px; text-align: right; justify-items: end; }
.op-cn { font: 400 15px/1 var(--serif); color: rgb(var(--moon-2)); }
.op-ct { font: 400 17px/1.25 var(--zh); letter-spacing: .06em; color: rgb(var(--tx)); }
.op-cm { font: 400 11.5px/1.3 var(--zh); letter-spacing: .24em; color: rgb(var(--tx) / .56); }
@media (max-width: 640px) {
  .op-plate { bottom: calc(10 * var(--vh)); }
  .op-n { font-size: clamp(54px, 15vw, 70px); }
}
.op-plate.op-c { left: 50%; bottom: calc(9 * var(--vh)); transform: translateX(-50%); text-align: center; display: grid; justify-items: center; }
.op-c .op-n { margin: 0; font-size: clamp(40px, 3.7vw, 60px); letter-spacing: .14em; padding-left: .14em; }
.op-c .op-s { margin: 14px 0 0; letter-spacing: .5em; padding-left: .5em; }
.op-c .op-r { position: relative; width: min(190px, 40vw); margin: 16px 0 0; }
@media (max-width: 640px) { .op-plate.op-c { bottom: calc(14 * var(--vh)); } .op-c .op-n { font-size: 40px; } .op-c .op-s { letter-spacing: .36em; padding-left: .36em; white-space: nowrap; } }

/* 声: more findable — brighter, and breathing gently while it waits for the first tap (2026-10-21) */
.snd .snd-k { opacity: .9; }
.snd .snd-v { opacity: .8; }
.snd.is-wait .snd-v { opacity: 1; animation: snd-breath 2.6s ease-in-out infinite; }
@keyframes snd-breath { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.rm .snd.is-wait .snd-v { animation: none; }
@media (max-width: 640px) { .snd { font-size: 13px; letter-spacing: .14em; margin-right: 14px; } }