/* ==========================================================================
   tether.css —— Tether 宣传页（tether.xnoetic.com）
   归属：foundation。令牌、全局构件、每一节的布局与静态 / 无 JS 终态。
   01 装配的交互样式在 loadout.css；03 授权、04 会话的交互样式在 seal.css（都排在本文件之后）。
   硬规则：1 格 = 1 CSS px；像素图只按原生尺寸；所有坐标取整，不用 translate(-50%)；
          红色只属于火漆；像素字只用在「框」上；除远景层外像素图不加 filter。
   素材全部原样复制自 Tether 主题（tethered）与标志提案 v2，出处见 docs/tether-site.md。
   ========================================================================== */

/* ── 0. 令牌 ─────────────────────────────────────────────────────────────
   昼（默认）写在 :root；夜写两遍：无 JS 时跟随系统，有 JS 时由 mode.js 写 data-mode。
   所有随昼夜变化的素材地址都放在令牌里，浏览器只请求当前模式那一套。 */
:root {
  color-scheme: light;
  --gut: 16px;
  --c-canvas: #F4EFE3;
  --c-header: #EFE7D5;
  --c-surface: #FCF8EE;
  --c-surface-lo: #F3EAD7;
  --c-sunken: #FFFCF5;
  --c-slot-edge: #CDBB98;
  --c-border1: #DDD0B5;
  --c-border2: #C2AE8A;
  --c-ink: #3B2A20;
  --c-text1: #2A2019;
  --c-text2: #574838;
  --c-text3: #665645;
  --c-accent: #E9B24A;
  --c-accent-hover: #F1C062;
  --c-accent-press: #D69C34;
  --c-on-accent: #2A1704;
  --c-accent-border: #7A4A22;
  --c-accent-text: #8A5200;
  --c-link: #8F4E00;
  --c-focus: #A06000;
  --glow: 255, 190, 80;
  --hilite: 255, 196, 90;
  --brass-hi: #FFF3CC;
  --brass-top: #E7C27A;
  --brass: #C99645;
  --brass-lo: #9C6A2E;
  --brass-deep: #6E4426;
  --brass-shadow: #4A2A20;
  --c-brass-text: #8A5600;            /* 昼间黄铜字用主题的 gold（brass 本身对羊皮纸对比度不够） */
  --c-success: #2B6B3D;
  --c-warning: #865000;
  --c-danger: #A8263A;
  --c-info: #0C6674;
  --seal-c2: #F2C14E;
  --seal-c3: #A77110;
  --btn-edge: #9C7A55;
  --btn-top: #FFFDF6;
  --btn-bottom: #EEE3CB;
  --btn-hi: rgba(255, 255, 255, .8);
  --btn-lo: rgba(110, 68, 38, .2);
  --slot-shadow: inset 0 1px 0 rgba(110, 68, 38, .16), inset 0 -1px 0 rgba(255, 255, 255, .9);
  --drop: 0 1px 0 rgba(59, 42, 32, .14), 0 6px 18px rgba(90, 60, 30, .14);
  --gem-a: #F2B54A;
  --gem-m: #CB8930;
  --gem-b: #A35E16;
  --gem-hi: #FFF7D6;
  --redact: rgba(59, 42, 32, .7);
  --reach-a: .26;                     /* 权限图示的「允许范围」条：昼间 13% 在羊皮纸上几乎看不见，加深并描上下 1px 边 */
  --reach-edge: inset 0 1px 0 rgba(255, 196, 90, .7), inset 0 -1px 0 rgba(255, 196, 90, .7);
  --text-glow: none;
  --frame: url("/assets/frames/window-day.svg");
  --frame-lg: url("/assets/frames/window-lg-day.svg");
  --knot-lit: url("/assets/textures/knot-lit-day.svg");
  --linen-bg: url("/assets/textures/linen.svg") 0 0 / 4px 4px;
  --m-day: block;
  --m-night: none;
  --sky: linear-gradient(180deg, #F6E9C9, #F3D9A4, #EFC98A);
  --scene-op: .82;
  --sc-sky: url("/assets/scenes/day-sky.svg");
  --sc-stars-a: url("/assets/scenes/day-clouds.svg");
  --sc-stars-a-x: -60px;
  --sc-stars-b: none;
  --twinkle: none;
  --sc-orb: url("/assets/scenes/day-orb.svg");
  --orb-l: 9%;                        /* 取整版在下面的 @supports 里（不支持 round() 的浏览器用这个） */
  --orb-r: auto;
  --orb-b: 72px;
  --sc-beams: url("/assets/scenes/day-beams.svg");
  --beams-d: block;
  --sc-far: url("/assets/scenes/day-far.svg");
  --sc-mid: url("/assets/scenes/day-mid.svg");
  --sc-near: url("/assets/scenes/day-near.svg");
  --wm-grad: linear-gradient(180deg, #C2923F 0 34%, #9A6A2E 34% 56%, #7A4A22 56% 76%, #5A3018 76%);
  --wm-filter: drop-shadow(0 1px 0 rgba(255, 250, 235, .95)) drop-shadow(0 0 10px rgba(255, 190, 80, .35));
  --f-px: "XN Frame Pixel 12", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --f-pxm: "XN Frame Pixel 12 Mono", "XN Frame Pixel 12", ui-monospace, monospace;
  --f-pxt: "XN Title Pixel 16", "XN Frame Pixel 12", "PingFang SC", "Microsoft YaHei", sans-serif;
  --f-serif: "XN Serif", "Songti SC", "Noto Serif SC", "Source Han Serif SC", serif;
  --f-body: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", system-ui, sans-serif;
  --f-code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* JRPG 高亮条（当前项）：13% 横向渐隐 + 上下两条 1px 渐隐光线。在 :root 上按当前模式的 --hilite 算好，全页共用这一份 */
  --hilite-bg:
    linear-gradient(90deg, rgba(var(--hilite), .55), rgba(var(--hilite), 0)) 0 0 / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(var(--hilite), .55), rgba(var(--hilite), 0)) 0 100% / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(var(--hilite), .13), rgba(var(--hilite), 0));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="day"]) {
    color-scheme: dark;
    --c-canvas: #14152B; --c-header: #111228; --c-surface: #232850; --c-surface-lo: #1B1F40; --c-sunken: #0C0D20; --c-slot-edge: #2C3060;
    --c-border1: #272A4E; --c-border2: #383C6A; --c-ink: #08081A; --c-text1: #ECE9F5; --c-text2: #BBB8D6; --c-text3: #ACA9CC;
    --c-accent: #56C2CF; --c-accent-hover: #6DD0DB; --c-accent-press: #3FA6B4; --c-on-accent: #061A20; --c-accent-border: #0B3A44;
    --c-accent-text: #86DDE8; --c-link: #8ADFE9; --c-focus: #A6EBF2; --glow: 127, 220, 230; --hilite: 127, 220, 230;
    --brass-hi: #F7E2A6; --brass-top: #DDB875; --brass: #C99C5C; --brass-lo: #9B6D45; --brass-deep: #6E4638; --brass-shadow: #3A2533; --c-brass-text: #C99C5C;
    --c-success: #93E2A8; --c-warning: #F2C06E; --c-danger: #FF959F; --c-info: #8ADFE9; --seal-c3: #B9822A;
    --btn-edge: #08081A; --btn-top: #2E3466; --btn-bottom: #1F2349; --btn-hi: rgba(221, 184, 117, .42); --btn-lo: rgba(4, 4, 16, .5);
    --slot-shadow: inset 0 1px 0 rgba(0, 0, 0, .55), inset 0 -1px 0 rgba(201, 156, 92, .14);
    --drop: 0 1px 0 rgba(4, 4, 16, .55), 0 6px 18px rgba(4, 4, 16, .45);
    --gem-a: #7FDCE6; --gem-m: #56AEBB; --gem-b: #2C7F8F; --gem-hi: #EFFFFF; --redact: rgba(187, 184, 214, .55); --reach-a: .13; --reach-edge: none;
    --text-glow: 0 0 8px rgba(127, 220, 230, .35);
    --frame: url("/assets/frames/window-night.svg"); --frame-lg: url("/assets/frames/window-lg-night.svg"); --knot-lit: url("/assets/textures/knot-lit-night.svg");
    --linen-bg: none; --m-day: none; --m-night: block;
    --sky: linear-gradient(180deg, #1B2148, #26305C, #3A4675); --scene-op: .9;
    --sc-sky: url("/assets/scenes/night-sky.svg"); --sc-stars-a: url("/assets/scenes/night-stars-a.svg"); --sc-stars-a-x: 0px; --sc-stars-b: url("/assets/scenes/night-stars-b.svg"); --twinkle: hd-twinkle;
    --sc-orb: url("/assets/scenes/night-orb.svg"); --orb-l: auto; --orb-r: 10%; --orb-b: 70px; --sc-beams: none; --beams-d: none;
    --sc-far: url("/assets/scenes/night-far.svg"); --sc-mid: url("/assets/scenes/night-mid.svg"); --sc-near: url("/assets/scenes/night-near.svg");
    --wm-grad: linear-gradient(180deg, #F7E2A6 0 34%, #DDB875 34% 56%, #C99C5C 56% 76%, #9B6D45 76%);
    --wm-filter: drop-shadow(0 1px 0 #08081A) drop-shadow(0 0 10px rgba(127, 220, 230, .28));
  }
}
:root[data-mode="night"] {
  color-scheme: dark;
  --c-canvas: #14152B; --c-header: #111228; --c-surface: #232850; --c-surface-lo: #1B1F40; --c-sunken: #0C0D20; --c-slot-edge: #2C3060;
  --c-border1: #272A4E; --c-border2: #383C6A; --c-ink: #08081A; --c-text1: #ECE9F5; --c-text2: #BBB8D6; --c-text3: #ACA9CC;
  --c-accent: #56C2CF; --c-accent-hover: #6DD0DB; --c-accent-press: #3FA6B4; --c-on-accent: #061A20; --c-accent-border: #0B3A44;
  --c-accent-text: #86DDE8; --c-link: #8ADFE9; --c-focus: #A6EBF2; --glow: 127, 220, 230; --hilite: 127, 220, 230;
  --brass-hi: #F7E2A6; --brass-top: #DDB875; --brass: #C99C5C; --brass-lo: #9B6D45; --brass-deep: #6E4638; --brass-shadow: #3A2533; --c-brass-text: #C99C5C;
  --c-success: #93E2A8; --c-warning: #F2C06E; --c-danger: #FF959F; --c-info: #8ADFE9; --seal-c3: #B9822A;
  --btn-edge: #08081A; --btn-top: #2E3466; --btn-bottom: #1F2349; --btn-hi: rgba(221, 184, 117, .42); --btn-lo: rgba(4, 4, 16, .5);
  --slot-shadow: inset 0 1px 0 rgba(0, 0, 0, .55), inset 0 -1px 0 rgba(201, 156, 92, .14);
  --drop: 0 1px 0 rgba(4, 4, 16, .55), 0 6px 18px rgba(4, 4, 16, .45);
  --gem-a: #7FDCE6; --gem-m: #56AEBB; --gem-b: #2C7F8F; --gem-hi: #EFFFFF; --redact: rgba(187, 184, 214, .55); --reach-a: .13; --reach-edge: none;
  --text-glow: 0 0 8px rgba(127, 220, 230, .35);
  --frame: url("/assets/frames/window-night.svg"); --frame-lg: url("/assets/frames/window-lg-night.svg"); --knot-lit: url("/assets/textures/knot-lit-night.svg");
  --linen-bg: none; --m-day: none; --m-night: block;
  --sky: linear-gradient(180deg, #1B2148, #26305C, #3A4675); --scene-op: .9;
  --sc-sky: url("/assets/scenes/night-sky.svg"); --sc-stars-a: url("/assets/scenes/night-stars-a.svg"); --sc-stars-a-x: 0px; --sc-stars-b: url("/assets/scenes/night-stars-b.svg"); --twinkle: hd-twinkle;
  --sc-orb: url("/assets/scenes/night-orb.svg"); --orb-l: auto; --orb-r: 10%; --orb-b: 70px; --sc-beams: none; --beams-d: none;
  --sc-far: url("/assets/scenes/night-far.svg"); --sc-mid: url("/assets/scenes/night-mid.svg"); --sc-near: url("/assets/scenes/night-near.svg");
  --wm-grad: linear-gradient(180deg, #F7E2A6 0 34%, #DDB875 34% 56%, #C99C5C 56% 76%, #9B6D45 76%);
  --wm-filter: drop-shadow(0 1px 0 #08081A) drop-shadow(0 0 10px rgba(127, 220, 230, .28));
}
/* 日 / 月的水平位置取整（不支持 round() 时退回上面的百分比） */
@supports (left: round(down, 1px, 1px)) {
  :root { --orb-l: round(down, 9%, 1px); }
  @media (prefers-color-scheme: dark) { :root:not([data-mode="day"]) { --orb-r: round(down, 10%, 1px); } }
  :root[data-mode="night"] { --orb-r: round(down, 10%, 1px); }
}
@media (min-width: 720px) { :root { --gut: 24px; } }
@media (min-width: 1024px) { :root { --gut: 32px; } }

/* ── 1. 基础 ──────────────────────────────────────────────────────────── */
@keyframes hd-cursor-bob { 0%, 100% { translate: 0 0; } 50% { translate: -1px 0; } }
@keyframes hd-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes settle {
  0% { transform: rotate(0); } 10% { transform: rotate(3.5deg); } 28% { transform: rotate(-2.5deg); }
  46% { transform: rotate(1.6deg); } 64% { transform: rotate(-.9deg); } 82% { transform: rotate(.35deg); } 100% { transform: rotate(0); }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--c-canvas); scroll-padding: 64px 0 16px; }   /* 锚点跳转和键盘聚焦滚动都让出吸顶导航（48 + 16） */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--c-canvas); color: var(--c-text1); font: 16px/28px var(--f-body); }
[hidden] { display: none !important; }
img, svg { display: block; }
img { image-rendering: pixelated; }
p, h1, h2, h3, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--c-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
button, input { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 1px solid var(--c-focus); outline-offset: 2px; }
::selection { background: rgba(var(--glow), .34); }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.m-day { display: var(--m-day); }
.m-night { display: var(--m-night); }

/* 字体角色：字体只按属性挂，保证「显示成像素字的字」一定在子集里（tools/subset-tether.mjs 按同样的属性收字）。
   行高取偶数：Frame Pixel 上伸 14 / 内容区 18，Mono 10 / 12，Unifont 14 / 16 → 基线都落在整像素。 */
[data-px] { font-family: var(--f-px); font-size: 12px; line-height: 16px; font-weight: 400; font-synthesis: none; letter-spacing: 0; }
[data-pxm] { font-family: var(--f-pxm); font-size: 12px; line-height: 16px; font-weight: 400; font-synthesis: none; letter-spacing: 0; }
[data-pxt] { font-family: var(--f-pxt); font-size: 16px; line-height: 24px; font-weight: 400; font-synthesis: none; letter-spacing: 0; }
[data-cjk] { font-family: var(--f-serif); font-weight: 400; font-synthesis: none; }
h3 { font-size: inherit; font-weight: 400; }
.nw { white-space: nowrap; }
/* 中文断行：标题平衡两行，段落避免最后一行只剩一个字（不支持的浏览器照常断行） */
h2 { text-wrap-style: balance; word-break: keep-all; }   /* H2 都短：只在标点后折行 */
p { text-wrap-style: pretty; }

/* ── 2. 版心：左边距取整，导航和首屏用同一个 .wrap，x 完全一致 ──────────────── */
.wrap { width: min(1120px, 100% - 2 * var(--gut)); margin-inline: auto; }
@supports (left: round(down, 1px, 1px)) {
  .wrap { margin-inline: 0; margin-left: round(down, (100% - min(1120px, 100% - 2 * var(--gut))) / 2, 1px); }
}

/* ── 3. 全局构件 ──────────────────────────────────────────────────────── */
/* 九宫格窗：金线在第 0–2 列；大窗内细金线在第 5 列，内容从第 14 列起 */
.win { border: 0 solid transparent; border-image: var(--frame) 10 fill / 10px / 0 stretch; padding: 12px; }
.win-lg { border: 0 solid transparent; border-image: var(--frame-lg) 14 fill / 14px / 0 stretch; padding: 14px; box-shadow: var(--drop); }
.win-lg:hover, .win-lg:focus-within {
  box-shadow: 0 0 0 1px rgba(var(--glow), .45), 0 0 10px rgba(var(--glow), .28), 0 0 26px rgba(var(--glow), .14);
}
.win-title { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; margin: 0 0 12px; color: var(--c-text1); }
/* 凹槽：输入框、物品格、行内标签 */
.slot { background: var(--c-sunken); box-shadow: inset 0 0 0 1px var(--c-slot-edge), var(--slot-shadow); }
.chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 2px 8px; color: var(--c-text2); background: var(--c-sunken); box-shadow: inset 0 0 0 1px var(--c-slot-edge), var(--slot-shadow); white-space: nowrap; }

/* 按钮：1px 描边 + 上亮下暗 + 顶部 1px 高光 + 底部 1px 暗线；悬停描边变黄铜加辉光；按下倒置下移 1px */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px;
  border: 1px solid var(--btn-edge); border-radius: 0; color: var(--c-text1); text-decoration: none; cursor: pointer;
  background: linear-gradient(180deg, var(--btn-top), var(--btn-bottom));
  box-shadow: inset 0 1px 0 var(--btn-hi), inset 0 -1px 0 var(--btn-lo);
  font-family: var(--f-px); font-size: 12px; line-height: 20px; font-weight: 400; font-synthesis: none;
}
.btn [data-px], .btn [data-pxm] { line-height: 20px; }
.btn:not(:disabled):hover { border-color: var(--brass); box-shadow: inset 0 1px 0 var(--btn-hi), inset 0 -1px 0 var(--btn-lo), 0 0 0 1px rgba(var(--glow), .18), 0 0 10px rgba(var(--glow), .25); }
.btn:not(:disabled):active { background: linear-gradient(0deg, var(--btn-top), var(--btn-bottom)); translate: 0 1px; }
.btn:disabled { cursor: default; }
.btn.btn-accent {
  border-color: var(--c-accent-border); color: var(--c-on-accent);
  background: linear-gradient(180deg, var(--c-accent-hover), var(--c-accent) 55%, var(--c-accent-press));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 0 7px rgba(255, 255, 255, .32), 0 0 10px rgba(var(--glow), .3);
}
.btn.btn-accent:not(:disabled):hover { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 0 7px rgba(255, 255, 255, .32), 0 0 0 1px rgba(var(--glow), .45), 0 0 10px rgba(var(--glow), .28), 0 0 26px rgba(var(--glow), .14); }
.btn.btn-accent:not(:disabled):active { background: linear-gradient(0deg, var(--c-accent-hover), var(--c-accent) 55%, var(--c-accent-press)); }
.btn-text { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 4px; border: 0; background: none; color: var(--c-text3); cursor: pointer; }
.btn-text [data-px], .btn-text [data-pxm] { line-height: 20px; }
.btn-text:hover [data-px] { text-decoration: underline; text-underline-offset: 3px; }
@media (pointer: coarse) { .btn, .btn-text { min-height: 44px; } }

/* JRPG 高亮条（当前项）：13% 横向渐隐 + 上下两条 1px 渐隐光线；悬停态只有 9% 淡条 */
.hilite { background: var(--hilite-bg); }
/* 宝石灯 6×6：1px 暗描边、左上 1px 高光、纵向三段 */
.gem {
  display: block; flex: none; width: 6px; height: 6px; opacity: .35;
  background:
    linear-gradient(var(--gem-hi), var(--gem-hi)) 1px 1px / 1px 1px no-repeat,
    linear-gradient(180deg, var(--gem-a) 0 3px, var(--gem-m) 3px 4px, var(--gem-b) 4px) 0 0 / 6px 6px no-repeat;
  box-shadow: inset 0 0 0 1px var(--c-ink);
}
.gem.is-on, [aria-pressed="true"] > .gem, [aria-checked="true"] > .gem { opacity: 1; box-shadow: inset 0 0 0 1px var(--c-ink), 0 0 6px var(--gem-a); }
/* 指针小手 13×10：只作「当前项」指示器，不替换系统光标 */
.hand {
  position: absolute; display: block; width: 13px; height: 10px; pointer-events: none;
  background: url("/assets/ui/hand.svg") 0 0 / 13px 10px no-repeat; image-rendering: pixelated;
  animation: hd-cursor-bob 1.2s steps(1, end) infinite;
}
/* 伪元素版小手：画在下列元素的 ::before 上，用 --hand-x / --hand-y 定位（宿主需 position: relative）。
   交互模块要给别的元素加小手时，在自己的 CSS 里照抄这组声明。 */
.tm-row.is-cur::before, .tm-row:hover::before, .tm-row:focus-visible::before,
.menu a[aria-current="true"]::before, .job:has(input:checked)::before,
.run-row:hover::before, .jr-k.is-cur::before {
  content: ""; position: absolute; left: var(--hand-x, -15px); top: var(--hand-y, 3px); width: 13px; height: 10px; pointer-events: none;
  background: url("/assets/ui/hand.svg") 0 0 / 13px 10px no-repeat; image-rendering: pixelated;
  animation: hd-cursor-bob 1.2s steps(1, end) infinite;
}
/* 绳与结：结骑在绳上（竖绳 left = 绳 left − 2，横绳 top = 绳 top − 2）；亮结 11×11 再偏 −1px */
.rope-h, .sec-rope, .nav::after, .rig-hrope, .rl-rope, .jr-rope { background: url("/assets/textures/rope-h.svg") 0 0 / 6px 5px repeat-x; image-rendering: pixelated; }
.rope-v, .rig-main, .vow::before { background: url("/assets/textures/rope-v.svg") 0 0 / 5px 6px repeat-y; image-rendering: pixelated; }
.knot { display: block; width: 9px; height: 9px; background: url("/assets/textures/knot.svg") 0 0 / 9px 9px no-repeat; image-rendering: pixelated; }
.knot.is-lit, .sec.is-cur .sec-knot, .jr-k.is-cur .jr-kn { width: 11px; height: 11px; margin: -1px 0 0 -1px; background: var(--knot-lit) 0 0 / 11px 11px no-repeat; }

/* 垂印 .hang：按标志提案 pendant/build.mjs 的 hang() 原样实现。--s 恒为 1；--cx/--kt 见入口表 */
.hang {
  --tether-seal-c2: var(--seal-c2); --tether-seal-c3: var(--seal-c3);
  position: relative; width: var(--n); display: flex; flex-direction: column; align-items: flex-start;
  transform-origin: calc((var(--cx) + 1.5) * var(--s) * 1px) 0;
}
.hang .cord {
  --u: calc(var(--s) * 1px);
  flex: none; width: calc(3 * var(--u)); height: calc(var(--len) + var(--kt) * var(--u));
  margin-left: calc(var(--cx) * var(--u)); margin-bottom: calc(var(--kt) * -1 * var(--u));
  background:
    linear-gradient(var(--tether-seal-c2) 0 50%, var(--tether-seal-c3) 0) 0 100% / var(--u) calc(4 * var(--u)) repeat-y,
    linear-gradient(var(--tether-seal-c2) 0 25%, var(--tether-seal-c3) 0 75%, var(--tether-seal-c2) 0) var(--u) 100% / var(--u) calc(4 * var(--u)) repeat-y,
    linear-gradient(var(--tether-seal-c3) 0 50%, var(--tether-seal-c2) 0) calc(2 * var(--u)) 100% / var(--u) calc(4 * var(--u)) repeat-y;
}
.hang .px { position: relative; flex: none; }
.anim-settle { animation: settle 2.4s ease-in-out .12s both; }

/* 字标：Jacquard，黄铜硬分段渐变字（tethered-hd .tethered-hero-word） */
.wordmark { margin: 0; color: transparent; background: var(--wm-grad); -webkit-background-clip: text; background-clip: text; filter: var(--wm-filter); font-weight: 400; font-synthesis: none; letter-spacing: 0; white-space: nowrap; }
.wordmark-l { display: inline-block; vertical-align: top; height: 32px; font-family: "Jacquard 24", Georgia, serif; font-size: 43px; line-height: 31px; }
.wordmark-s { display: block; height: 19px; font-family: "Jacquard 12", Georgia, serif; font-size: 21px; line-height: 19px; }

/* 像素图标（雪碧图 <use> 或彩色 <img>） */
.ico { flex: none; width: 16px; height: 16px; }

/* 跳过链接 */
.skip { position: absolute; left: 16px; top: -64px; z-index: 100; padding: 8px 12px; color: var(--c-text1); background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--brass); text-decoration: none; }
.skip:focus { top: 8px; }

/* 正文排版 */
h1 { margin: 0; font-size: 44px; line-height: 56px; color: var(--c-text1); text-shadow: var(--text-glow); }
h2 { margin: 0; font-size: 30px; line-height: 40px; color: var(--c-text1); }
.lead { margin-top: 16px; max-width: 640px; font-size: 17px; line-height: 28px; color: var(--c-text2); }
.small, .note, .foot-note { font-size: 13px; line-height: 20px; color: var(--c-text3); }

/* ── 4. 导航 header.nav（高 48：内容 43 + 底部 5px 通栏 rope-h） ─────────────── */
.nav { position: sticky; top: 0; z-index: 50; height: 48px; background: var(--c-header); }
.nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; }
.nav-in { position: relative; display: flex; align-items: flex-start; gap: 24px; height: 43px; }
.brand { position: relative; display: flex; align-items: flex-start; gap: 8px; margin-top: 5px; text-decoration: none; }
/* 导航里的点击区补到 44 高（::after 透明延伸，不改导航高度）：导航只有 48 高、底部 5px 是绳，延伸区一律从 y 0 到 44，
   z-index 1 盖过底下那根绳（.nav::after） */
.brand::after { content: ""; position: absolute; z-index: 1; inset: -5px 0 -7px; }   /* 品牌位 y 5–37 → 0–44 */
.brand .wordmark-s { width: 53px; margin-top: 6px; }   /* 字标实宽 53px（Jacquard 12，21px）：写死整数宽，后面的链接才落在整像素上 */
.nav-links { position: relative; display: flex; gap: 2px; margin-top: 12px; }
.nav-links a { display: block; padding: 2px 10px 2px 18px; color: var(--c-text2); text-decoration: none; }
.nav-links a:hover { color: var(--c-text1); }
.nav-links a[aria-current="true"] { color: var(--c-text1); background: var(--hilite-bg); }
.nav-hand { left: 0; top: 0; }
.nav-end { display: flex; align-items: flex-start; gap: 16px; margin-left: auto; }
.modes { display: flex; gap: 4px; margin-top: 10px; }
.mode-btn { position: relative; display: flex; align-items: center; gap: 4px; height: 24px; padding: 0 6px; border: 0; cursor: pointer; color: var(--c-text2); }
.mode-btn::after { content: ""; position: absolute; z-index: 1; inset: -10px -2px -10px -8px; }   /* y 10–34 → 0–44；宽 34 → 44：两个按钮各向外侧多伸，在 4px 间隙正中相接 */
.mode-btn + .mode-btn::after { inset: -10px -8px -10px -2px; }
.mode-btn[aria-pressed="true"] { color: var(--c-text1); }
.mode-btn:hover { color: var(--c-text1); }
.ext { margin-top: 14px; color: var(--c-link); text-decoration: none; white-space: nowrap; }
.ext:hover { text-decoration: underline; }
.menu-btn { margin-top: 3px; }
.btn.menu-btn { min-height: 36px; }
.btn.menu-btn::after { content: ""; position: absolute; z-index: 1; inset: -4px -1px -6px; }   /* y 3–39（含 1px 边框）→ 0–44 */
.nav-anchor { position: absolute; top: 41px; left: 0; height: 0; z-index: 2; }
.nav-knot { position: absolute; top: 0; left: calc(100% - 137px); }   /* = .wrap 左 + (W − 196) + 59：对准首屏 s1k-128 的绳 */
.menu-wrap { position: absolute; top: 48px; left: 0; }
.menu { background: linear-gradient(var(--c-surface-lo), var(--c-surface-lo)) 2px 2px / calc(100% - 4px) calc(100% - 4px) no-repeat; box-shadow: var(--drop); }   /* 夜间窗面板烘焙为 94% 不透明：下拉菜单盖在正文上，垫一层实底（避开 2px 缺角） */
.menu ul { display: block; }
.menu a { position: relative; display: flex; align-items: baseline; gap: 12px; padding: 12px 8px 12px 24px; line-height: 20px; color: var(--c-text1); text-decoration: none; --hand-x: 6px; --hand-y: 17px; }
.menu a .mn-no { color: var(--c-text3); line-height: 20px; }
.menu a:hover, .menu a:focus-visible { background: linear-gradient(90deg, rgba(var(--hilite), .09), rgba(var(--hilite), 0)); }
.menu a[aria-current="true"] { background: var(--hilite-bg); }
.menu li + li a { box-shadow: inset 0 1px 0 var(--c-border1); }
@media (min-width: 1024px) { .menu-btn, .menu-wrap { display: none; } }
/* 触屏（含横放的平板，桌面导航可见时）：文字链接的点击区补到 44 高 */
@media (pointer: coarse) {
  .nav-links a, .nav .ext, .foot-in a { position: relative; }
  .nav-links a::after { content: ""; position: absolute; z-index: 1; inset: -12px 0; }   /* y 12–32 → 0–44 */
  .nav .ext::after { content: ""; position: absolute; z-index: 1; inset: -14px 0; }       /* y 14–30 → 0–44 */
  .foot-in a::after { content: ""; position: absolute; inset: -13px 0; }
}
@media (max-width: 1023px) {
  .nav-links { display: none; }
  .nav-knot { left: calc(100% - 45px); }                              /* = .wrap 左 + (W − 72) + 27：对准手机 s1k-64 的绳 */
}
@media (max-width: 719px) { .js .nav .ext { display: none; } .nav-end { gap: 12px; } }

/* ── 5. 首屏 #top ─────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; min-height: max(600px, min(100svh - 48px, 760px)); background: var(--sky); }
.hero > .scene { position: absolute; left: 0; right: 0; bottom: 0; }
.hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); column-gap: 32px; padding: 72px 0 120px; }
.hero-seal { position: absolute; top: 0; z-index: 3; left: calc(100% - 196px); }
.hero-seal-sm { display: none; left: calc(100% - 72px); }
.eyebrow { line-height: 20px; color: var(--c-text3); }
.hero-id .wordmark-l { display: block; width: fit-content; margin-top: 12px; }
.hero h1 { margin-top: 24px; }
.hero .lead { margin-top: 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.chip[data-px] { line-height: 20px; }
.title-menu { grid-column: 2; justify-self: end; align-self: start; width: 264px; margin-top: 144px; }
.title-menu ul { display: block; }
.tm-row { position: relative; display: flex; align-items: baseline; height: 22px; padding: 0 8px 0 22px; color: var(--c-text1); text-decoration: none; --hand-x: 4px; --hand-y: 6px; }
.tm-row [data-px] { line-height: 22px; }
.tm-row:hover, .tm-row:focus-visible { background: linear-gradient(90deg, rgba(var(--hilite), .09), rgba(var(--hilite), 0)); outline-offset: 0; }
.tm-row.is-cur {
  background: var(--hilite-bg);
  box-shadow: inset 0 0 7px rgba(255, 255, 255, .32), 0 0 10px rgba(var(--glow), .3);
}
/* 别的行被悬停 / 聚焦时，小手跟过去 */
.title-menu ul:has(.tm-row:not(.is-cur):is(:hover, :focus-visible)) .tm-row.is-cur:not(:hover):not(:focus-visible)::before { display: none; }
@media (pointer: coarse) { .tm-row { height: 44px; --hand-y: 17px; } .tm-row [data-px] { line-height: 44px; } }

/* 风景条（HD-2D 分层，原样复用 tethered-hd theme.css:1473–1557）：底部 220px，只横向平铺，不缩放 */
.scene { position: relative; height: 220px; overflow: hidden; pointer-events: none; opacity: var(--scene-op); }
.scene > i { position: absolute; inset: 0; background-repeat: repeat-x; background-position: left bottom; image-rendering: pixelated; }
.l-sky { background-image: var(--sc-sky); background-size: 100% 100%; }
.l-stars::before, .l-stars::after { content: ""; position: absolute; inset: 0; background-repeat: repeat-x; animation: var(--twinkle) 3.2s ease-in-out infinite; }
.l-stars::before { background-image: var(--sc-stars-a); background-position: var(--sc-stars-a-x) bottom; }
.l-stars::after { background-image: var(--sc-stars-b); background-position: left bottom; animation-delay: -1.6s; }
.scene > .l-orb { inset: auto var(--orb-r) var(--orb-b) var(--orb-l); width: 120px; height: 120px; background: var(--sc-orb) 0 0 / 120px 120px no-repeat; }
.scene > .l-beams { display: var(--beams-d); inset: auto auto 0 calc(9% - 30px); inset: auto auto 0 round(down, 9% - 30px, 1px); width: 640px; height: 220px; background: var(--sc-beams) 0 0 / 640px 220px no-repeat; }
.scene > .l-far { background-image: var(--sc-far); background-position: -200px bottom; filter: blur(1.5px); }  /* 全页唯一的滤镜：景深 */
.scene > .l-mid { background-image: var(--sc-mid); background-position: -340px bottom; }
.scene > .l-near { background-image: var(--sc-near); background-position: 180px bottom; }

@media (max-width: 1023px) {
  .hero { min-height: 640px; }
  .hero-in { grid-template-columns: minmax(0, 1fr); padding: 40px 0 184px; }   /* 底部留 184：日 / 月图块在首屏底边上方 72–192px，圆盘和光芒最高到 153px；菜单下沿压不到它 */
  .hero-seal-lg { display: none; }
  .hero-seal-sm { display: block; }
  .hero-id { padding-right: 88px; }
  .hero h1 { font-size: 30px; line-height: 40px; }
  .title-menu { grid-column: 1; justify-self: stretch; width: auto; margin-top: 32px; }
}
/* 平板：标题菜单不铺满（720 宽的一行太长，不像标题菜单），收成 400 宽、和文案左对齐 */
@media (min-width: 720px) and (max-width: 1023px) { .title-menu { justify-self: start; width: 400px; } }

/* ── 6. 分节 ──────────────────────────────────────────────────────────── */
.sec { position: relative; padding: 88px 0; }   /* 锚点让出导航靠 html 的 scroll-padding（64），这里不再加 scroll-margin，免得叠加 */
.sec-head { margin-bottom: 24px; }
.sec-label { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; color: var(--c-brass-text); }
.sec-rope { position: relative; height: 5px; }
.sec-knot { position: absolute; left: 0; top: -2px; }
/* 让首屏垂印和装备架垂印不同屏：常见窗口高度上留白 168；v3 删掉 01 标题区的说明后装备架上移了 60px，
   视口高于 1340 时留白随视口一起长（100svh − 1172），任何高度上两枚垂印之间都留约 44px 余量（tether-audit seal，1280 宽） */
@media (min-width: 1024px) { .loadout { padding-top: 168px; padding-top: max(168px, 100svh - 1172px); } }
@media (max-width: 719px) {
  .sec { padding: 64px 0; }
  h2 { font-size: 24px; line-height: 32px; }
}

/* ── 7. 01 装配 #loadout ─────────────────────────────────────────────────
   几何（§3.2）：.rig 296×424，坐标相对 .rig 左上角，全部整数。槽 i：偶数左（.L）、奇数右（.R）。 */
.jobs { display: flex; flex-wrap: wrap; gap: 16px; min-width: 0; margin: 32px 0 0; padding: 0; border: 0; }
.job {
  position: relative; isolation: isolate; flex: none; display: flex; flex-direction: column; justify-content: flex-start;
  width: calc((100% - 48px) / 4); width: round(down, (100% - 48px) / 4, 1px); height: 64px; padding: 8px 12px 8px 28px; cursor: pointer;
  --hand-x: 9px; --hand-y: 27px;
}
.job-name { color: var(--c-text1); white-space: nowrap; }
.job-no { color: var(--c-text3); }
/* 职业卡上的配装一览：这套的 6 件物品图标（与背包同一枚，16px 原样、1×），不点也看得出三套不一样。桌面在卡片右侧竖直居中，< 1024 排在编号下面 */
.job-gear { position: absolute; right: 12px; top: 24px; display: flex; gap: 4px; color: var(--c-brass-text); }
@media (max-width: 1023px) {
  .job { height: auto; min-height: 64px; }
  .job-gear { position: static; margin-top: 4px; }
}
.job::after { content: ""; position: absolute; inset: 4px; z-index: -1; pointer-events: none; }
.job:hover::after { background: linear-gradient(90deg, rgba(var(--hilite), .09), rgba(var(--hilite), 0)); }
.job:has(input:checked) { box-shadow: 0 0 0 1px rgba(var(--glow), .45), 0 0 10px rgba(var(--glow), .28), 0 0 26px rgba(var(--glow), .14); }
.job:has(input:checked)::after { background: var(--hilite-bg); }
.job:has(input:focus-visible) { outline: 1px solid var(--c-focus); outline-offset: 2px; }
.job:has(input:disabled) { cursor: default; }

.lo { display: grid; grid-template-columns: 324px minmax(0, 1fr); gap: 24px; margin-top: 32px; }
.lo-r { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
@media (min-width: 1024px) and (min-height: 760px) { .lo-stick { position: sticky; top: 64px; } }

.rig-win { width: 324px; }
.rig-head { height: 40px; margin-bottom: 8px; }
.job-plate { white-space: nowrap; overflow: hidden; color: var(--c-text1); }
.jp-k { color: var(--c-text2); }
.rig-meter { display: flex; align-items: center; justify-content: space-between; height: 16px; }
.gems { display: flex; gap: 4px; }
.rig-count { color: var(--c-text2); }
.rig { position: relative; width: 296px; height: 424px; }
.rig > * { position: absolute; }
.rig-anchor { left: 84px; top: 0; z-index: 3; }
.rig-main { left: 145px; top: 124px; width: 5px; height: 188px; z-index: 1; background-position: 0 0; }
.rig-knot { left: 143px; top: calc(140px + 28px * var(--i)); z-index: 2; visibility: hidden; }
.rig-knot.is-on { visibility: visible; }
.rig-end { left: 143px; top: 308px; z-index: 2; }
.rig-hrope { top: calc(142px + 28px * var(--i)); width: 96px; height: 5px; z-index: 1; visibility: hidden; }
.rig-hrope.L { left: 48px; background-position: right 0; }
.rig-hrope.R { left: 152px; background-position: left 0; }
.rig-hrope.is-on { visibility: visible; }
.rig-label { top: calc(124px + 28px * var(--i)); color: var(--c-text1); white-space: nowrap; visibility: hidden; }
.rig-label.L { right: 156px; text-align: right; }
.rig-label.R { left: 156px; }
.rig-label.is-on { visibility: visible; }
.rig-slot { top: calc(120px + 28px * var(--i)); width: 48px; height: 48px; padding: 0; border: 0; opacity: .6; z-index: 1; }
.rig-slot.L { left: 0; }
.rig-slot.R { left: 248px; }
.rig-slot.is-on { opacity: 1; box-shadow: inset 0 0 0 1px var(--c-accent), var(--slot-shadow), 0 0 6px rgba(var(--glow), .3); }   /* 已装备：和背包里已装备的格子同一种描边 + 柔光 */
.rig-slot .item { position: absolute; left: 16px; top: 16px; color: var(--c-brass-text); }   /* 16px 图标（与背包同一枚，loadout.js 装上时从背包克隆），居中 */
.rig-slot:not(.is-on) .item { display: none; }
.rig-slot:disabled { cursor: default; }
.rig-seal { left: 116px; top: 313px; z-index: 0; }
.base-bar { margin-top: 8px; color: var(--c-text2); }

.lo-ctrl { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 16px; width: 324px; }
.lo-ctrl .btn { grid-column: 1 / -1; justify-self: start; }
.lo-name { color: var(--c-text2); }
.lo-name-in { width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 0; font: 16px/34px var(--f-body); color: var(--c-text1); }
.lo-name-in::placeholder { color: var(--c-text3); opacity: 1; }

.bag { display: flex; flex-wrap: wrap; gap: 8px; }
/* 桌面：格子成网格、整组在窗里居中（左右留白相等；末行从左起排）。宽度取到偶数，居中的偏移才是整数 */
@media (min-width: 1024px) {
  .bag { display: grid; grid-template-columns: repeat(auto-fill, 48px); justify-content: center; }
  @supports (width: round(down, 1px, 2px)) { .bag { width: round(down, 100%, 2px); } }
}
.bag-cell { position: relative; display: block; flex: none; width: 48px; height: 48px; padding: 0; border: 0; cursor: pointer; }
.bag-cell:disabled { cursor: default; }
/* 格子：16px 图标在上 (16, 6)，名字（像素字 12/16，宽都是偶数：24 / 36）在下 (0, 26) 居中，左右落在整像素上 */
.bag-cell .item { position: absolute; left: 16px; top: 6px; color: var(--c-brass-text); }
.bag-nm { position: absolute; left: 0; top: 26px; width: 48px; color: var(--c-text1); text-align: center; white-space: nowrap; }
.bag-cell[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--c-accent), var(--slot-shadow), 0 0 6px rgba(var(--glow), .3); }
.bag-q .q { position: absolute; left: 16px; top: 12px; color: var(--c-text3); }
.js:not(.loadout-failed) .bag-info { display: none; }
/* 无 JS（或 loadout.js 没加载成功，main.js 给 html 加 .loadout-failed）：背包是普通列表，每件在格下直接展开说明 */
.no-js .bag, .loadout-failed .bag { display: block; }
.no-js .bag-it, .loadout-failed .bag-it { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 12px; padding: 8px 0; }
.no-js .bag-it + .bag-it, .loadout-failed .bag-it + .bag-it { box-shadow: inset 0 1px 0 var(--c-border1); }
.no-js .desc-win, .loadout-failed .desc-win { display: none; }
/* 列表态：名字已在右边的 dt 里，格子里只留居中的图标；格内的名字只给读屏（按钮的可读名） */
.no-js .bag-cell .item, .loadout-failed .bag-cell .item { top: 16px; }
.no-js .bag-nm, .loadout-failed .bag-nm { width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.bag-info dt { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.it-name { color: var(--c-text1); }
.it-row { color: var(--c-text3); }
.it-desc { font-size: 15px; line-height: 24px; color: var(--c-text2); }

.desc-win { min-height: 72px; }   /* 每件说明一行（窗高 69），preset 说明在 390 上折行后是 72：悬停换内容时窗高不跳 */
@media (max-width: 379px) { .desc-win { min-height: 96px; } }   /* < 375 时「压缩」的说明折成两行（93） */
.desc-empty { font-size: 15px; line-height: 24px; color: var(--c-text2); }

.scroll-win { position: relative; isolation: isolate; }
.scroll-win::after { content: ""; position: absolute; inset: 3px; z-index: -1; background: var(--linen-bg); pointer-events: none; }
.yaml { margin: 0; padding: 10px 12px; overflow-x: auto; font: 13px/20px var(--f-code); color: var(--c-text1); tab-size: 2; }
.yaml code { display: block; font: inherit; }
.yaml .ln, .yaml-gear, .yaml-preset { display: block; }
.yaml .ln { min-height: 20px; white-space: pre; }
.yaml .c { color: var(--c-text3); }
.redact { display: inline-block; vertical-align: top; width: var(--w); height: 6px; margin-top: 7px; background: var(--redact); }
.scroll-win .note { margin-top: 12px; }

@media (max-width: 1023px) {
  .lo { display: flex; flex-direction: column; gap: 24px; }
  .lo-l, .lo-stick, .lo-r { display: contents; }
  .rig-win { order: 1; margin-left: max(0px, calc((100% - 324px) / 2)); margin-left: max(0px, round(down, (100% - 324px) / 2, 1px)); }
  .bag-win { order: 2; }
  .desc-win { order: 3; }
  .lo-ctrl { order: 4; margin-top: 0; }
  .scroll-win { order: 5; }
  .bag { width: 384px; max-width: 100%; margin-left: max(0px, calc((100% - 384px) / 2)); margin-left: max(0px, round(down, (100% - 384px) / 2, 1px)); }   /* 平板：每行 7 格，在窗里居中 */
}
@media (max-width: 719px) {
  .job { width: calc((100% - 16px) / 2); width: round(down, (100% - 16px) / 2, 1px); }
  .bag { width: 272px; margin-left: max(0px, calc((100% - 272px) / 2)); margin-left: max(0px, round(down, (100% - 272px) / 2, 1px)); }
  .yaml { font-size: 12px; }
  .lo-ctrl { width: 100%; max-width: 324px; }
}
/* 列表态（无 JS / loadout 失败）的背包占满窗宽，不按格子居中 */
.no-js .bag, .loadout-failed .bag { width: auto; margin-left: 0; }

/* ── 8. 02 插件 #rules（静态） ─────────────────────────────────────────── */
.rule-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-columns: round(down, (100% - 24px) / 2, 1px) minmax(0, 1fr); gap: 24px; margin-top: 32px; }
.rule, .forge { position: relative; isolation: isolate; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: start; gap: 16px; padding: 16px; }
.rule::after, .forge::after { content: ""; position: absolute; inset: 4px; z-index: -1; pointer-events: none; }
.rule:hover::after, .forge:hover::after { background: linear-gradient(90deg, rgba(var(--hilite), .09), rgba(var(--hilite), 0)); }
.rule-ico { position: relative; width: 32px; height: 32px; color: var(--c-text1); }
.rule-ico .ico { position: absolute; left: 8px; top: 8px; }
.rule-ico .rule-knot { position: absolute; left: 11px; top: 11px; }
.rule-t { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
.rule-zh { line-height: 20px; color: var(--c-text1); }
.rule-body p, .forge-body p:not(.small) { margin-top: 8px; font-size: 15px; line-height: 24px; color: var(--c-text2); }
.forge { grid-template-columns: 48px minmax(0, 1fr); margin-top: 24px; }
.forge-ico { position: relative; width: 48px; height: 48px; }
.forge-ico .item { position: absolute; left: 8px; top: 8px; }
.forge-body .small { margin-top: 12px; font-size: 13px; line-height: 20px; color: var(--c-text3); }
.forge-body .small a { white-space: nowrap; }
@media (max-width: 719px) { .rule-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── 9. 03 授权 #seal ─────────────────────────────────────────────── */
.seal-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 32px 48px; align-items: start; }
.vows { margin-top: 32px; }
.vow { position: relative; padding: 0 0 24px 28px; }
.vow:last-child { padding-bottom: 0; }
.vow::before { content: ""; position: absolute; left: 2px; top: 10px; bottom: -10px; width: 5px; }
.vow:last-child::before { content: none; }
.vow-knot { position: absolute; left: 0; top: 6px; z-index: 1; }
.vow-t { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
.vow-zh { line-height: 20px; color: var(--c-text1); }
.vow p { margin-top: 4px; font-size: 15px; line-height: 24px; color: var(--c-text2); }

.rope-win { overflow: hidden; }
.rl-btns { display: flex; gap: 8px; }
.btn.rl { flex: none; flex-direction: column; align-items: flex-start; gap: 0; width: 120px; min-height: 0; padding: 7px 10px 8px; text-align: left; }
.rl .gem { position: absolute; right: 9px; top: 14px; }
.rl-name { line-height: 20px; color: var(--c-text1); }
.rl-rule { font: 12px/16px var(--f-body); color: var(--c-text2); }
.btn.rl .rl-id { line-height: 16px; color: var(--c-text3); }
.btn.rl[aria-checked="true"] { border-color: var(--brass); box-shadow: inset 0 1px 0 var(--btn-hi), inset 0 -1px 0 var(--btn-lo), 0 0 0 1px rgba(var(--glow), .45), 0 0 10px rgba(var(--glow), .28), 0 0 26px rgba(var(--glow), .14); }
/* 权限图示：锚点 knot-lit 在 (0,18)；rope-h 在 top 21，从锚点向右伸出 --rl；绳下 13% 高亮条标出允许范围。
   图示右缘比内容区多出 8px（离金线 4px）并裁切：「完全放开」时绳伸到这里被裁掉，读作「不再系住」。 */
.rl-fig { position: relative; height: 48px; margin: 16px -8px 0 0; overflow: hidden; }
.rl-fig > * { position: absolute; }
.rl-anchor { left: 0; top: 18px; z-index: 2; width: 11px; height: 11px; background: var(--knot-lit) 0 0 / 11px 11px no-repeat; image-rendering: pixelated; }
.rl-rope { left: 5px; top: 21px; width: var(--rl); height: 5px; z-index: 1; }
.rl-end { left: var(--rl); top: 19px; z-index: 2; }
.rl-reach { left: 5px; top: 32px; width: var(--rl); height: 12px; background: rgba(var(--hilite), var(--reach-a)); box-shadow: var(--reach-edge); }
.rl-fig[data-len="open"] .rl-rope, .rl-fig[data-len="open"] .rl-reach { width: calc(100% - 5px); }
.rl-fig[data-len="open"] .rl-end { display: none; }
.rl-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; color: var(--c-text3); }
.rl-legend li { display: flex; align-items: flex-start; gap: 6px; }
.rl-anchor-mini { display: block; width: 11px; height: 11px; margin-top: 2px; background: var(--knot-lit) 0 0 / 11px 11px no-repeat; image-rendering: pixelated; }
.rl-reach-mini { display: block; width: 12px; height: 12px; margin-top: 2px; background: rgba(var(--hilite), var(--reach-a)); box-shadow: inset 0 0 0 1px rgba(var(--hilite), .35); }
.rl-note { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; margin-top: 12px; font-size: 13px; line-height: 20px; color: var(--c-text3); }
.rl-note .ico { margin-top: 2px; }

/* 授权对话框：[data-for] 按 data-state 显示，[data-for-rope] 按 data-rope 显示（ask = 只读 / 可写工作区） */
.dlg { width: 100%; margin-top: 24px; }   /* 与上面的权限窗同宽（桌面 400），左右边对齐 */
.dlg[data-state="idle"] [data-for]:not([data-for~="idle"]),
.dlg[data-state="allowed-once"] [data-for]:not([data-for~="allowed-once"]),
.dlg[data-state="rejected"] [data-for]:not([data-for~="rejected"]),
.dlg[data-state="unavailable"] [data-for]:not([data-for~="unavailable"]),
.dlg[data-rope="open"] [data-for-rope="ask"],
.dlg:not([data-rope="open"]) [data-for-rope="open"] { display: none; }   /* (0,3,0)–(0,4,0) 已盖过各元素自己的 display，不用 !important */
.dlg-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.dlg-title { color: var(--c-text1); }
.dlg-tag { color: var(--c-text2); }
.dlg-body { margin-top: 12px; font-size: 15px; line-height: 24px; color: var(--c-text1); }
.dlg-scope { margin-top: 8px; color: var(--c-text2); }
.dlg-res { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 8px; margin-top: 12px; font-size: 15px; line-height: 24px; }
.dlg-res .ico { margin-top: 4px; }
.dlg-res.is-ok { color: var(--c-text1); }
.dlg-res.is-no { color: var(--c-danger); }
.dlg-res.is-na { color: var(--c-info); }
.dlg-log { line-height: 24px; }
.dlg-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 24px; }
.dlg-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.seal-slot { position: relative; flex: none; width: 32px; height: 32px; margin: 0 10px 10px auto; }   /* 四周留空 ≥ 24px：3× 帧（72px）不出窗 */
.seal-ghost { position: absolute; left: 10px; top: 8px; color: var(--c-text1); opacity: .4; }
.seal-stamp { position: absolute; left: 4px; top: 4px; width: 24px; height: 24px; transform-origin: 12px 12px; }
.seal-slot .ring { position: absolute; display: none; pointer-events: none; }
.seal-slot .r30 { left: 1px; top: 1px; }
.seal-slot .r36 { left: -2px; top: -2px; }
.seal-slot .r42 { left: -5px; top: -5px; }
.seal .foot-note { margin-top: 12px; }

@media (max-width: 1023px) {
  .seal-grid { grid-template-columns: minmax(0, 1fr); }
  .seal-r { width: 400px; max-width: 100%; margin-left: max(0px, calc((100% - 400px) / 2)); margin-left: max(0px, round(down, (100% - 400px) / 2, 1px)); }   /* 平板：右栏 400 居中 */
}
@media (max-width: 719px) {
  .seal-r { width: auto; margin-left: 0; }
  /* 三档按钮铺满窗宽（每格取整）；id 只在 - 后折行 */
  .rl-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: round((100% - 16px) / 3, 1px) round((100% - 16px) / 3, 1px) minmax(0, 1fr); }   /* 取最近整数（百分比解析有浮点误差，round(down) 会少 1px） */
  .btn.rl { width: auto; min-width: 0; padding: 7px 8px 8px; }
}
/* 窄手机：三档改成三行满宽，「宝石灯 · 名 · 规则」一行、id 靠右，id 不再从 - 处断开；每项各占一个网格格子（像素字不和正文混排在一行里）。
   名字列 60 = 最长的档名「可写工作区」的像素字宽，三行的规则列对齐 */
@media (max-width: 479px) {
  .rl-btns { display: flex; flex-direction: column; gap: 8px; }
  .btn.rl { display: grid; grid-template-columns: 6px 60px minmax(0, 1fr) auto; align-items: center; column-gap: 8px; width: 100%; min-height: 36px; padding: 0 11px; }
  .rl .gem { position: static; }
  .btn.rl .rl-id { white-space: nowrap; }
}
@media (max-width: 479px) and (pointer: coarse) { .btn.rl { min-height: 44px; } }

/* ── 10. 04 会话 #journal ────────────────────────────────────────────
   桌面：rope-h 在 top 40，从 x 24 画到最后一个结；结 i 在 left 24 + step·i、top 38；标签 top 56，事件类型 top 74。
   每个结的按钮是 32×44 的命中区（结在按钮内 (12,18)），标签挂在按钮里、溢出显示。 */
.jr { position: relative; margin-top: 32px; --jr-step: 112px; }
.jr .win-title { margin-bottom: 0; }
.jr-chip { position: absolute; right: 12px; top: 12px; }
.jr-track { position: relative; height: 112px; margin-top: 8px; }   /* 桌面：窄桌面上折成两行的事件类型（结距 104–110 时 assistant/message 等）也放得下 */
@media (min-width: 1024px) and (max-width: 1199px) { .jr { --jr-step: 104px; } }   /* 窄桌面：间距 104，permission/preset、assistant/message 折成两行 */
/* 桌面结距按窗宽取整：绳横贯整扇窗，最后一个结的标签（「本轮结束」和 turn/end 都是 48 宽，在结距 ×8 + 24 处）离右缘至少留 4px。
   100cqw = .jr 的内容宽（= .jr-track 宽；--jr-step 只在 .jr 的后代里用）。1280 / 1440 上是 127，1024 上是 107。
   不支持 round() 或容器单位的浏览器用上面两条（112 / 104）。 */
@supports (width: round(down, 1cqw, 1px)) {
  @media (min-width: 1024px) { .jr { container-type: inline-size; --jr-step: clamp(104px, round(down, (100cqw - 76px) / 8, 1px), 128px); } }
}
.jr[data-outcome="idle"] [data-o]:not([data-o~="idle"]),
.jr[data-outcome="allowed-once"] [data-o]:not([data-o~="allowed-once"]),
.jr[data-outcome="rejected"] [data-o]:not([data-o~="rejected"]),
.jr[data-outcome="unavailable"] [data-o]:not([data-o~="unavailable"]) { display: none; }
.jr-rope { position: absolute; left: 24px; top: 40px; width: calc(var(--jr-step) * 8 + 4px); height: 5px; }
.jr-knots { position: absolute; inset: 0; }
.jr-k { position: absolute; left: calc(12px + var(--jr-step) * var(--i)); top: 20px; width: 32px; height: 44px; padding: 0; border: 0; background: none; color: var(--c-text1); text-align: left; cursor: pointer; --hand-x: -3px; --hand-y: 39px; }
.jr-k:disabled { cursor: default; }
.jr-kn { position: absolute; left: 12px; top: 18px; }
.jr-lab { position: absolute; left: 12px; top: 36px; white-space: nowrap; color: var(--c-text1); }
.jr-ev { position: absolute; left: 12px; top: 54px; width: max-content; max-width: calc(var(--jr-step) - 8px); color: var(--c-text3); }   /* 事件类型在 / 后可折行（<wbr>） */
.jr-k.is-cur .jr-lab { color: var(--c-text1); }
.jr-badge { position: absolute; left: calc(20px + var(--jr-step) * 5); top: 18px; width: 16px; height: 16px; }
.jr-mark { position: absolute; left: calc(20px + var(--jr-step) * 5); top: 18px; }
.jr-mark.is-no { color: var(--c-danger); }
.jr-mark.is-na { color: var(--c-info); }
.jr-status { display: none; margin-top: 4px; color: var(--c-text2); }
.jr-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.jr-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: round(down, (100% - 48px) / 3, 1px) round(down, (100% - 48px) / 3, 1px) minmax(0, 1fr); gap: 24px; margin-top: 32px; }
.pt { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 12px; color: var(--c-text1); }
.pt .ico { margin-top: 2px; }
.pt-t { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
.pt-t [data-px] { line-height: 20px; }
.pt p { margin-top: 4px; font-size: 15px; line-height: 24px; color: var(--c-text2); }

@media (max-width: 1023px) {
  /* 手机与平板：9 个结仍在一根横绳上，间距 32，中心 x = 12 + 32i；隐藏标签，只显示状态行；命中区 32×44 */
  .jr { --jr-step: 32px; }
  .jr-track { height: 60px; }
  .jr-rope { left: 12px; top: 30px; width: 256px; }
  .jr-k { left: calc(32px * var(--i) - 4px); top: 10px; }
  .jr-lab, .jr-ev { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .jr-k.is-cur::before { content: none; }
  .jr-badge, .jr-mark { left: 164px; top: 6px; }
  .jr-status { display: block; }
  .jr-chip { position: static; display: inline-flex; margin-top: 8px; }
  .jr-points { grid-template-columns: minmax(0, 1fr); }
}

/* ── 11. 05 运行 #run（静态） ─────────────────────────────────────────── */
.run-win { margin-top: 32px; padding: 8px 12px; }
.run-row {
  position: relative; display: grid; grid-template-columns: 16px 160px minmax(0, 1fr); column-gap: 12px; align-items: start;
  padding: 12px 8px 12px 28px; --hand-x: 8px; --hand-y: 17px;
  background: linear-gradient(var(--c-border1), var(--c-border1)) 4px 100% / calc(100% - 8px) 1px no-repeat;   /* 分隔线缩进 4px，画在背景上 */
}
.run-row:last-child { background: none; }
.run-row:hover { background: linear-gradient(var(--c-border1), var(--c-border1)) 4px 100% / calc(100% - 8px) 1px no-repeat, linear-gradient(90deg, rgba(var(--hilite), .09), rgba(var(--hilite), 0)); }
.run-row:last-child:hover { background: linear-gradient(90deg, rgba(var(--hilite), .09), rgba(var(--hilite), 0)); }
.run-row .ico { margin-top: 2px; color: var(--c-text1); }
.run-n { display: flex; flex-direction: column; }
.run-n [data-px] { line-height: 20px; color: var(--c-text1); }
.run-d { font-size: 15px; line-height: 24px; color: var(--c-text2); }
.models { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 16px; margin-top: 24px; padding: 16px; }
.models .item { margin-top: 2px; }
.models-t { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
.models-t [data-px] { line-height: 20px; color: var(--c-text1); }
.models-body p { margin-top: 8px; font-size: 15px; line-height: 24px; color: var(--c-text2); }
@media (max-width: 719px) {
  .run-row { grid-template-columns: 16px minmax(0, 1fr); row-gap: 4px; }
  .run-d { grid-column: 2; }
}

/* ── 12. 06 现状 #depart 与页脚 ──────────────────────────────────────── */
.depart { padding-bottom: 56px; background: var(--linen-bg); }
.depart-rope { width: 62%; width: round(down, 62%, 1px); }
.ghost-knot { position: absolute; right: -4px; top: -2px; opacity: .4; }   /* 空结 */
.ghost-hand { right: -21px; top: -2px; transform: scaleX(-1); }            /* 空结右侧 4px，持续点动；镜像成指向左边的空结（13px 绕中线翻转，仍落在整像素上） */
.cta { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; margin-top: 32px; }
@media (max-width: 379px) { .cta { gap: 12px; } }   /* 三个按钮 92 + 92 + 116，360 上间距 12 才排得下一行（内容宽 328） */

.foot { position: relative; }
.foot-in { padding: 48px 0 24px; font-size: 13px; line-height: 20px; color: var(--c-text3); }
.foot-in p { max-width: 760px; }
.foot-in p + p { margin-top: 8px; }
.foot-copy { display: flex; align-items: flex-start; gap: 8px; }
.foot-copy img { margin-top: 2px; }
/* 手机、平板上让栅栏柱和拴绳（近景图块 x 558–660）整段留在画面里：平板落在 398–500，手机落在 238–340 */
@media (max-width: 1023px) { .foot-scene > .l-near { background-position: -160px bottom; } }
@media (max-width: 719px) { .foot-scene > .l-near { background-position: -320px bottom; } }
.foot-scene::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 120px; z-index: 1; background: linear-gradient(180deg, var(--c-canvas), transparent); }

/* ── 13. 404 ─────────────────────────────────────────────────────────── */
.nf { width: min(360px, 100% - 32px); margin-left: calc((100% - min(360px, 100% - 32px)) / 2); margin-left: round(down, (100% - min(360px, 100% - 32px)) / 2, 1px); padding: max(48px, calc((100svh - 400px) / 2)) 0 48px; padding: max(48px, round(down, (100svh - 400px) / 2, 1px)) 0 48px; }
.nf-win { padding: 24px; }
.nf-slot { position: relative; display: block; width: 48px; height: 48px; }
.nf-slot [data-pxt] { position: absolute; left: 16px; top: 12px; color: var(--c-text3); }
.nf-win .wordmark-l { margin-top: 20px; }
.nf-h { margin-top: 16px; color: var(--c-text1); }
.nf-win .btn { margin-top: 24px; }
.nf-foot { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; font-size: 13px; line-height: 20px; color: var(--c-text3); }
.nf-foot img { margin-top: 2px; }

/* ── 14. 减弱动效：全局静止（各模块另有 JS 判断） ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .l-stars::after { display: none; }
}