/* Reused Claude r4 design source. The font-face reference is supplied by site-next/styles/fonts.css. */
/* Claude r4 source: demos/pm-design.css. */
/* =====================================================================
群相官网 · 设计系统参照实现（示范，非产品代码）
方案：群相官网-三作融合设计与实施拆解方案 r1，§4
拆分方法：执行方按 §5.4 目录把本文件拆成 styles/tokens.css、base.css、
layout.css、shell.css、threshold.css、components/*.css、pages/*.css。
规则：不用 @layer、不用 CSS 嵌套（§5.12）；状态写在属性上。
===================================================================== */
/* ---------- 字体（示范用本机文件；正式见 WEBUI-004） ---------- */
/* ---------- T-01–T-13 令牌 ---------- */
:root {
/* T-01 门楣 */
--pm-lintel: #171B1C;
--pm-lintel-ink: #EDE6D6;
--pm-lintel-ink-2: #B9B09E;
--pm-brass: #A8894F;
--pm-brass-hi: #D3B474;
/* T-02 房间色（默认门厅） */
--pm-scene: #D7D2C6;
/* T-03 醒 */
--pm-paper: #F5F0E5;
--pm-paper-2: #ECE5D6;
--pm-card: #FBF8F1;
--pm-field: #FFFDF8;
--pm-field-line: #8C7F68;
--pm-line: #D3C8B2;
--pm-ink: #221D17;
--pm-ink-2: #5A5045;
--pm-ink-3: #6E6458;
--pm-on-scene: #221D17;
--pm-on-scene-2: #5F564B;
--pm-link: #1F5F68;
--pm-btn: #B8975A;
--pm-btn-line: #7E6534;
--pm-btn-press: #9A7C46;
--pm-btn-ink: #15110A;
--pm-btn-off: #E3DCCF;
--pm-btn-off-ink: #5E574C;
--pm-core: #1E2321;
--pm-core-ink: #EDE6D6;
/* T-04 梦（默认值，梦态覆盖） */
--pm-table: #16292B;
--pm-table-line: #24403F;
--pm-card-frame: #0E1E20;
--pm-plate: #F3EBD8;
--pm-btn-ghost-line: #6E8E8F;
--pm-btn-ghost-ink: #D5E4E2;
/* T-05 字体与字号 */
--pm-font-serif: "EB Garamond", "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif;
--pm-font-sans: "Segoe UI", -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
--pm-font-mono: "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
--pm-fs-display: 2.5rem;
--pm-fs-h1: 2rem;
--pm-fs-h2: 1.5rem;
--pm-fs-h3: 1.1875rem;
--pm-fs-read: 1.0625rem;
--pm-fs-ui: 0.9375rem;
--pm-fs-sm: 0.8125rem;
--pm-fs-micro: 0.75rem;
/* T-06 间距 */
--pm-s-1: 4px; --pm-s-2: 8px; --pm-s-3: 12px; --pm-s-4: 16px; --pm-s-5: 24px;
--pm-s-6: 32px; --pm-s-7: 48px; --pm-s-8: 64px; --pm-s-9: 96px;
/* T-07 圆角与线宽 */
--pm-r-sheet: 12px; --pm-r-ctl: 8px; --pm-r-sm: 4px; --pm-r-pill: 999px;
--pm-w-hair: 1px; --pm-w-mid: 2px; --pm-w-bold: 4px;
/* T-08 层次 */
--pm-e-object: 0 1px 0 rgb(34 29 23 / .06), 0 8px 18px -10px rgb(34 29 23 / .35);
--pm-e-object-night: 0 10px 24px -10px rgb(0 0 0 / .6);
--pm-e-overlay: 0 24px 48px -16px rgb(10 12 12 / .45), 0 2px 0 rgb(0 0 0 / .04);
--pm-e-drag: 0 18px 30px -12px rgb(0 0 0 / .45);
--pm-e-inset: inset 0 1px 2px rgb(0 0 0 / .25);
/* T-09 焦点、匹配、语义 */
--pm-focus-in: #1A1A1A;
--pm-focus-out: #FFFDF8;
--pm-match: #11808E;
--pm-match-tint: rgb(17 128 142 / .12);
--pm-danger: #A3261C;
--pm-danger-ink: #FFF7F2;
--pm-success: #2F6B3A;
--pm-warning: #8A5A00;
--pm-info: #1F5F68;
/* T-11 动效 */
--pm-t-fast: 100ms; --pm-t-ctl: 160ms; --pm-t-open: 200ms; --pm-t-close: 120ms;
--pm-t-move: 240ms; --pm-t-return: 320ms; --pm-t-room: 600ms; --pm-t-scene: 1200ms;
--pm-ease-out: cubic-bezier(.2, .7, .2, 1);
--pm-ease-in: cubic-bezier(.4, 0, 1, 1);
/* T-13 类型色 */
/* r4：类型色改用资源包 AK-R70 的安全色板——与原作每一个本源 / 性相色 ΔE2000 ≥ 16（tools/badge-de-r4.txt）。
旧值（#E58A9E 等）与原作色只差 4.9–14.5，退役。字形色按填色取象牙或墨，对比 ≥ 4.48。 */
--pm-kind-persona: #7B2E4B; --pm-kind-skill: #116E56; --pm-kind-tool: #2E5263;
--pm-cat-work: #B6866C; --pm-cat-longform: #665189; --pm-cat-shortform: #10A6AD;
--pm-cat-study: #505103; --pm-cat-visual: #7B3702; --pm-cat-project: #7CA055;
--pm-cat-chapter: #AC697E; --pm-cat-index: #9B86C1;
}
/* T-02 房间色 */
[data-room="hall"] { --pm-scene: #D7D2C6; }
[data-room="roster"] { --pm-scene: #D5D0CF; }
[data-room="skills"] { --pm-scene: #CFD5CB; }
[data-room="tools"] { --pm-scene: #D3D0C3; }
[data-room="post"] { --pm-scene: #D8CFC2; }
[data-room="study"] { --pm-scene: #D2D3CB; }
[data-room="lost"] { --pm-scene: #D3CFC7; }
[data-room="ledger"] { --pm-scene: #CBCFCC; }
/* T-04 梦态覆盖 */
html[data-state="dream"] {
--pm-scene: #0D1719;
--pm-paper: #F2EBDC;
--pm-ink: #1F1A14;
--pm-ink-2: #5B5143;
--pm-on-scene: #DCE7E5;
--pm-on-scene-2: #A9C1C0;
--pm-btn: #EDE4CF;
--pm-btn-ink: #2A2214;
--pm-match: #6FD6E3;
--pm-match-tint: rgb(111 214 227 / .16);
--pm-danger: #FF7A6B;
}
/* 深色表面的焦点值（T-09） */
[data-surface="dark"], html[data-state="dream"] .pm-scene-text {
--pm-focus-in: #F4E9CC;
--pm-focus-out: #0D1719;
}
/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--pm-font-sans);
font-size: var(--pm-fs-ui);
line-height: 1.47;
color: var(--pm-on-scene);
background: var(--pm-scene);
transition: background-color var(--pm-t-room) var(--pm-ease-out);
}
html[data-state="dream"] body {
background: linear-gradient(180deg, #0D1719 0%, #132326 100%) fixed, #0D1719;
}
h1, h2, h3 { font-family: var(--pm-font-serif); font-weight: 600; margin: 0; color: inherit; }
h1 { font-size: var(--pm-fs-h1); line-height: 1.25; }
h2 { font-size: var(--pm-fs-h2); line-height: 1.33; }
h3 { font-size: var(--pm-fs-h3); line-height: 1.47; }
p { margin: 0; }
a { color: var(--pm-link); text-decoration-thickness: 1px; text-underline-offset: .18em; }
img { max-width: 100%; display: block; }
:focus-visible {
outline: 2px solid var(--pm-focus-in);
outline-offset: 2px;
box-shadow: 0 0 0 4px var(--pm-focus-out);
}
.pm-visually-hidden {
position: absolute !important; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap;
}
.pm-num { font-variant-numeric: tabular-nums lining-nums; }
.pm-mono { font-family: var(--pm-font-mono); font-size: .875em; }
.pm-micro {
font-size: var(--pm-fs-micro); letter-spacing: .08em; text-transform: uppercase;
}
.pm-skip {
position: absolute; left: 12px; top: -60px; z-index: 70;
background: var(--pm-card); color: var(--pm-ink); padding: 10px 14px;
border: var(--pm-w-bold) solid var(--pm-ink); border-radius: var(--pm-r-ctl);
}
.pm-skip:focus { top: 12px; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}
/* ---------- layout ---------- */
.pm-wrap { width: min(1240px, 100% - 64px); margin-inline: auto; }
@media (max-width: 1199px) { .pm-wrap { width: calc(100% - 48px); } }
@media (max-width: 899px) { .pm-wrap { width: calc(100% - 32px); } }
@media (max-width: 599px) { .pm-wrap { width: calc(100% - 24px); } }
/* C-010 场景插画条（可选） */
.pm-room-band {
height: clamp(120px, 18vw, 240px); margin-bottom: -96px;
background: var(--pm-room-img, none) center / cover no-repeat;
-webkit-mask-image: linear-gradient(#000 55%, transparent);
mask-image: linear-gradient(#000 55%, transparent);
}
/* ---------- C-001 门楣 ---------- */
.pm-lintel {
background: var(--pm-lintel); color: var(--pm-lintel-ink);
border-bottom: 1px solid var(--pm-brass);
box-shadow: 0 3px 0 rgb(0 0 0 / .18);
position: relative; z-index: 10;
}
.pm-lintel__in { display: flex; align-items: center; gap: var(--pm-s-5); height: 64px; }
.pm-brand { display: flex; align-items: center; gap: 10px; color: var(--pm-lintel-ink); text-decoration: none; }
.pm-brand__icon { width: 32px; height: 32px; border-radius: 8px; background: #000; display: grid; place-items: center; }
.pm-brand__name { font-family: var(--pm-font-serif); font-weight: 600; font-size: 1.125rem; }
.pm-brand__tag { font-size: var(--pm-fs-micro); letter-spacing: .14em; color: var(--pm-lintel-ink-2); }
.pm-nav { display: flex; gap: 2px; margin-left: var(--pm-s-4); flex: 1; }
.pm-nav a, .pm-nav button {
position: relative; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px;
color: var(--pm-lintel-ink); text-decoration: none; font-weight: 600; font-size: var(--pm-fs-ui);
border-radius: var(--pm-r-ctl); background: transparent; border: 0; font-family: inherit; cursor: pointer;
transition: background-color var(--pm-t-fast);
}
.pm-nav a:hover, .pm-nav button:hover { background: rgb(237 230 214 / .06); }
.pm-nav a:active { background: rgb(237 230 214 / .10); }
.pm-nav a[aria-current="page"]::after {
content: ""; position: absolute; left: 10px; right: 10px; bottom: -10px; height: 3px;
background: var(--pm-brass-hi);
}
.pm-nav svg { width: 16px; height: 16px; color: var(--pm-lintel-ink-2); }
/* C-003 梦导航：两行字 */
.pm-nav--dream a { flex-direction: column; justify-content: center; gap: 0; height: 52px; line-height: 1.15; }
.pm-nav--dream .pm-nav__zh { font-family: var(--pm-font-serif); font-size: 1rem; }
.pm-nav--dream .pm-nav__en { font-size: 10px; letter-spacing: .12em; color: var(--pm-lintel-ink-2); font-weight: 400; }
.pm-nav--dream a[aria-current="page"]::after { background: #6FD6E3; bottom: -6px; }
.pm-dream-note {
font-family: var(--pm-font-serif); font-size: .875rem; color: var(--pm-on-scene-2);
padding: 10px 0 0;
}
/* ---------- C-008 门槛 ---------- */
.pm-threshold { display: flex; align-items: center; gap: 10px; }
.pm-threshold__link {
display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: var(--pm-r-pill);
color: var(--pm-lintel-ink-2); text-decoration: none; touch-action: none; -webkit-user-select: none; user-select: none;
}
.pm-threshold__track {
position: relative; width: var(--pm-thr-w, 120px); height: 32px; border-radius: var(--pm-r-pill);
background: var(--pm-core); border: 2px solid var(--pm-brass); box-shadow: var(--pm-e-inset);
transition: border-color var(--pm-t-fast);
}
.pm-threshold__link:hover .pm-threshold__track { border-color: var(--pm-brass-hi); }
.pm-threshold__fill {
position: absolute; inset: 2px auto 2px 2px; width: calc((100% - 4px) * var(--p, 0));
border-radius: var(--pm-r-pill); background: rgb(111 214 227 / .18); pointer-events: none;
}
.pm-threshold__tick {
position: absolute; top: 6px; bottom: 6px; left: calc(2px + (100% - 32px) * .9 + 14px); width: 2px;
background: rgb(237 230 214 / .25); border-radius: 1px; transition: background-color var(--pm-t-fast);
}
.pm-threshold[data-ready="true"] .pm-threshold__tick { background: #6FD6E3; box-shadow: 0 0 8px #6FD6E3; }
.pm-threshold__token {
position: absolute; top: 1px; left: 1px; width: 26px; height: 26px; border-radius: 8px;
background: #EDE6D6; display: grid; place-items: center; color: #171B1C;
transform: translateX(calc((var(--pm-thr-w, 120px) - 32px) * var(--p, 0)));
transition: transform var(--pm-t-return) var(--pm-ease-out), box-shadow var(--pm-t-fast);
}
.pm-threshold[data-dragging="true"] .pm-threshold__token { transition: none; box-shadow: var(--pm-e-drag); cursor: grabbing; }
.pm-threshold__link:hover .pm-threshold__token { box-shadow: 0 0 10px 2px rgb(211 180 116 / .45); }
.pm-threshold__token svg { width: 16px; height: 16px; }
html[data-state="dream"] .pm-threshold__token { background: #0D1719; color: #6FD6E3; border: 1px solid #6FD6E3; }
.pm-threshold__label { font-size: 10px; letter-spacing: .14em; white-space: nowrap; }
.pm-threshold__hint {
position: absolute; right: 0; top: 60px; background: var(--pm-card); color: var(--pm-ink);
border: 1px solid var(--pm-brass); border-radius: var(--pm-r-ctl); padding: 6px 10px; font-size: var(--pm-fs-sm);
box-shadow: var(--pm-e-overlay); white-space: nowrap; opacity: 0; transition: opacity var(--pm-t-ctl); pointer-events: none;
}
.pm-threshold__hint[data-show="true"] { opacity: 1; }
.pm-threshold--l .pm-threshold__track { width: 280px; height: 44px; }
.pm-threshold--l .pm-threshold__token { width: 38px; height: 38px; transform: translateX(calc((280px - 44px) * var(--p, 0))); }
.pm-threshold--l .pm-threshold__tick { left: calc(2px + (100% - 44px) * .9 + 20px); }
/* ---------- C-011 页头、C-012 纸面、C-014 页签、C-016 分组标题 ---------- */
.pm-pagehead { padding: var(--pm-s-7) 0 var(--pm-s-5); color: var(--pm-on-scene); }
.pm-pagehead p { margin-top: 10px; font-family: var(--pm-font-serif); font-size: var(--pm-fs-read); line-height: 1.75; color: var(--pm-on-scene-2); max-width: 40em; }
.pm-pagehead__actions { display: flex; gap: 12px; margin-top: var(--pm-s-4); flex-wrap: wrap; }
.pm-sheet {
position: relative; background: var(--pm-paper); color: var(--pm-ink);
border: 1px solid var(--pm-line); border-radius: var(--pm-r-sheet); padding: var(--pm-s-6);
}
.pm-sheet::before { /* T-10 纸纹：示范用 SVG 噪声代替 webp 图块 */
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .04;
background-image: url("data:image/svg+xml;utf8,");
}
html.pm-tex-off .pm-sheet::before { display: none; }
@media (max-width: 599px) { .pm-sheet { padding: var(--pm-s-4); } }
.pm-section { position: relative; margin-top: var(--pm-s-7); padding-top: var(--pm-s-5); border-top: 1px solid var(--pm-line); }
.pm-section:first-child { margin-top: 14px; }
.pm-tab {
position: absolute; top: -14px; left: 0; height: 28px; padding: 0 12px; display: inline-flex; align-items: center; gap: 8px;
background: var(--pm-ink); color: var(--pm-paper); border-radius: 4px 4px 0 0; font-weight: 600; font-size: var(--pm-fs-sm);
}
.pm-tab .pm-micro { font-size: 10px; opacity: .75; font-weight: 400; }
.pm-gtitle { display: flex; align-items: center; gap: 12px; margin: 6px 0 var(--pm-s-4); }
.pm-gtitle::after { content: ""; flex: 1; height: 1px; background: var(--pm-brass); }
/* ---------- C-013 文书框 ---------- */
.pm-docframe {
position: relative; background: var(--pm-card); color: var(--pm-ink);
border: var(--pm-w-bold) solid var(--pm-ink); border-radius: 12px; padding: 3px; box-shadow: var(--pm-e-object);
}
.pm-docframe__in { border: 1px solid var(--pm-brass); border-radius: 8px; padding: var(--pm-s-5); }
.pm-docframe > .pm-tab { top: -18px; left: 18px; border-radius: 4px; }
/* ---------- C-015 目录信息行 ---------- */
.pm-dir { margin: 0; display: grid; gap: 6px; }
.pm-dir__row { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pm-dir__row dt { color: var(--pm-ink-2); white-space: nowrap; }
.pm-dir__row dt::after { content: none; }
.pm-dir__lead { flex: 1; min-width: 16px; border-bottom: 1px dotted var(--pm-brass); transform: translateY(-4px); }
.pm-dir__row dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums lining-nums; overflow-wrap: anywhere; }
.pm-dir__row dd[data-unknown] { color: var(--pm-ink-3); }
.pm-diamond { display: inline-block; width: 7px; height: 7px; background: var(--pm-brass); transform: rotate(45deg); margin: 0 6px; vertical-align: middle; }
/* ---------- C-040 按钮 ---------- */
.pm-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 40px; padding: 0 18px; border-radius: var(--pm-r-ctl);
font: 600 var(--pm-fs-ui)/1 var(--pm-font-sans); text-decoration: none; cursor: pointer;
border: 1px solid var(--pm-field-line); background: var(--pm-card); color: var(--pm-ink);
transition: box-shadow var(--pm-t-fast), background-color var(--pm-t-fast), border-color var(--pm-t-fast);
}
.pm-btn svg { width: 16px; height: 16px; }
.pm-btn:hover { border-color: var(--pm-ink); }
.pm-btn:active { background: #EFE9DC; }
.pm-btn--primary {
background: var(--pm-btn); color: var(--pm-btn-ink); border-color: var(--pm-btn-line);
box-shadow: inset 0 1px 0 rgb(255 255 255 / .28);
}
.pm-btn--primary:hover { border-color: var(--pm-btn-line); box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), 0 0 12px 2px rgb(211 180 116 / .55); }
.pm-btn--primary:active { background: var(--pm-btn-press); }
.pm-btn--danger { background: var(--pm-danger); color: var(--pm-danger-ink); border-color: #6E1810; }
.pm-btn--quiet { background: none; border-color: transparent; color: var(--pm-link); padding: 0 8px; }
.pm-btn--quiet:hover { text-decoration: underline; border-color: transparent; }
.pm-btn--lg { height: 48px; padding: 0 24px; font-size: 1rem; }
.pm-btn--sm { height: 32px; padding: 0 12px; font-size: var(--pm-fs-sm); }
.pm-btn--block { width: 100%; }
.pm-btn[aria-disabled="true"], .pm-btn:disabled {
background: var(--pm-btn-off); color: var(--pm-btn-off-ink); border-color: var(--pm-btn-off); box-shadow: none; cursor: not-allowed;
}
.pm-btn[data-busy="true"] { cursor: progress; }
.pm-btn kbd { font: 12px var(--pm-font-mono); color: var(--pm-ink-3); }
.pm-btn--primary kbd { color: rgb(21 17 10 / .6); }
/* 梦：纸签胶囊 */
.pm-dreamctl .pm-btn { border-radius: var(--pm-r-pill); }
.pm-dreamctl .pm-btn--primary { background: var(--pm-btn); border-color: var(--pm-btn); color: var(--pm-btn-ink); box-shadow: none; }
.pm-dreamctl .pm-btn--primary:hover { box-shadow: 0 0 14px 2px rgb(237 228 207 / .35); }
.pm-dreamctl .pm-btn--ghost { background: transparent; border-color: var(--pm-btn-ghost-line); color: var(--pm-btn-ghost-ink); }
.pm-spin { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid currentColor; border-right-color: transparent; animation: pm-spin 900ms linear infinite; }
@keyframes pm-spin { to { transform: rotate(360deg); } }
.pm-need { font-size: var(--pm-fs-sm); color: var(--pm-ink-2); }
.pm-need a { color: var(--pm-ink); }
/* ---------- C-043 输入 ---------- */
.pm-field { display: grid; gap: 6px; }
.pm-field label, .pm-field legend { font-weight: 600; color: var(--pm-ink); }
.pm-field__help { font-size: var(--pm-fs-sm); color: var(--pm-ink-2); }
.pm-input, .pm-textarea, .pm-select {
width: 100%; height: 44px; padding: 0 12px; border-radius: var(--pm-r-ctl);
background: var(--pm-field); border: 1px solid var(--pm-field-line); color: var(--pm-ink);
font: var(--pm-fs-ui) var(--pm-font-sans); box-shadow: inset 0 1px 1px rgb(0 0 0 / .06);
}
.pm-textarea { height: auto; min-height: 120px; padding: 10px 12px; line-height: 1.6; resize: vertical; }
.pm-input:hover, .pm-textarea:hover { border-color: var(--pm-ink-2); }
.pm-input:focus-visible, .pm-textarea:focus-visible { border: 2px solid var(--pm-ink); }
.pm-input[aria-invalid="true"], .pm-textarea[aria-invalid="true"] { border: 2px solid var(--pm-danger); }
.pm-count { font-size: var(--pm-fs-sm); color: var(--pm-ink-3); text-align: right; }
.pm-count[data-near="true"] { color: var(--pm-warning); }
.pm-count[data-over="true"] { color: var(--pm-danger); }
.pm-ferr { display: flex; gap: 6px; align-items: flex-start; color: var(--pm-danger); font-size: var(--pm-fs-sm); }
.pm-ferr svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.pm-search { position: relative; }
.pm-search svg { position: absolute; left: 12px; top: 14px; width: 16px; height: 16px; color: var(--pm-ink-3); }
.pm-search .pm-input { padding-left: 36px; }
/* C-048 复选 */
.pm-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.pm-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--pm-ink); flex: none; }
/* ---------- C-052 筛选片 ---------- */
.pm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pm-chip {
display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
border-radius: var(--pm-r-ctl); border: 1px solid var(--pm-line); background: var(--pm-card); color: var(--pm-ink);
font: var(--pm-fs-sm) var(--pm-font-sans); cursor: pointer; transition: border-color var(--pm-t-fast);
}
.pm-chip:hover { border-color: var(--pm-ink-2); }
.pm-chip[aria-pressed="true"] { background: var(--pm-ink); color: var(--pm-paper); border-color: var(--pm-ink); }
.pm-chip[aria-pressed="true"]::before {
content: ""; width: 10px; height: 6px; border: 2px solid currentColor; border-top: 0; border-right: 0;
transform: rotate(-45deg) translateY(-2px);
}
.pm-chipgroup { display: grid; gap: 6px; align-content: start; }
.pm-chipgroup__name { font-size: var(--pm-fs-micro); color: var(--pm-ink-2); }
/* ---------- C-053 分段 ---------- */
.pm-seg { display: flex; gap: 4px; border-bottom: 1px solid var(--pm-ink); flex-wrap: wrap; }
.pm-seg a {
display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 4px 4px 0 0;
background: var(--pm-paper-2); color: var(--pm-ink); text-decoration: none; font-weight: 600; font-size: var(--pm-fs-sm);
border: 1px solid var(--pm-line); border-bottom: 0;
}
.pm-seg a[aria-current="page"] { background: var(--pm-ink); color: var(--pm-paper); border-color: var(--pm-ink); }
/* ---------- C-054 分页 ---------- */
.pm-pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: var(--pm-s-6); }
.pm-pager a, .pm-pager span[aria-current] {
min-width: 36px; height: 36px; display: inline-grid; place-items: center; padding: 0 10px;
border-radius: var(--pm-r-ctl); text-decoration: none; color: var(--pm-ink); border: 1px solid transparent;
}
.pm-pager a:hover { border-color: var(--pm-line); }
.pm-pager span[aria-current] { background: var(--pm-ink); color: var(--pm-paper); }
.pm-pager .pm-pager__info { color: var(--pm-ink-2); margin: 0 8px; font-size: var(--pm-fs-sm); }
/* ---------- C-024 徽章、C-025 标签、C-026 状态记号 ---------- */
.pm-badge {
--s: 40px; width: var(--s); height: var(--s); flex: none; display: inline-grid; place-items: center;
border-radius: calc(var(--s) * .07); background: var(--c, #5E7A72);
/* r4：铜质凹框，不用原作徽章那种粗黑框（AK-R12 / R70） */
border: calc(var(--s) * .07) solid #8A6C3A; box-shadow: inset 0 0 0 1px #3A2A12, inset 0 0 0 2px rgb(241 221 164 / .35);
color: var(--g, #F3EBD6);
}
/* 浅填色用墨色字形 */
.pm-badge:is([data-cat="work"], [data-cat="shortform"], [data-cat="project"], [data-cat="chapter"], [data-cat="index"]) { --g: #1A1206; }
.pm-badge svg { width: 70%; height: 70%; }
.pm-badge[data-kind="persona"] { --c: var(--pm-kind-persona); }
.pm-badge[data-kind="skill"] { --c: var(--pm-kind-skill); }
.pm-badge[data-kind="tool"] { --c: var(--pm-kind-tool); }
.pm-badge[data-cat="work"] { --c: var(--pm-cat-work); }
.pm-badge[data-cat="longform"] { --c: var(--pm-cat-longform); }
.pm-badge[data-cat="shortform"] { --c: var(--pm-cat-shortform); }
.pm-badge[data-cat="study"] { --c: var(--pm-cat-study); }
.pm-badge[data-cat="visual"] { --c: var(--pm-cat-visual); }
.pm-badge[data-cat="project"] { --c: var(--pm-cat-project); }
.pm-badge[data-cat="chapter"] { --c: var(--pm-cat-chapter); }
.pm-badge[data-cat="index"] { --c: var(--pm-cat-index); }
.pm-tag {
display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 4px;
background: var(--pm-paper-2); border: 1px solid var(--pm-line); color: var(--pm-ink-2); font-size: var(--pm-fs-sm);
}
.pm-mark { display: inline-flex; align-items: center; gap: 6px; font-size: var(--pm-fs-sm); color: var(--pm-ink-2); }
.pm-mark svg { width: 12px; height: 12px; }
.pm-mark[data-mark="stale"] { color: var(--pm-warning); }
/* ---------- C-020 人设名片 ---------- */
.pm-grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--pm-s-5); }
.pm-pcard {
position: relative; display: flex; flex-direction: column; min-width: 0;
background: var(--pm-card); border: 1px solid var(--pm-line); border-radius: var(--pm-r-sheet);
box-shadow: var(--pm-e-object); overflow: hidden; transition: border-color var(--pm-t-fast), box-shadow var(--pm-t-fast);
}
.pm-pcard:hover { border-color: var(--pm-brass); box-shadow: var(--pm-e-object), 0 0 0 3px rgb(168 137 79 / .18); }
.pm-pcard:focus-within { outline: 2px solid var(--pm-focus-in); outline-offset: 2px; box-shadow: 0 0 0 4px var(--pm-focus-out); }
.pm-pcard a.pm-pcard__link:focus-visible { outline: none; box-shadow: none; }
.pm-pcard__cover { position: relative; aspect-ratio: 13 / 11.6; background: var(--pm-paper-2); overflow: hidden; }
/* 整卡约 0.65：封面固定比例 + 名牌按内容自然增高；不强制整卡比例，避免截断文字（C-020 r1 修订） */
.pm-pcard__cover img { width: 100%; height: 100%; object-fit: cover; }
.pm-pcard__cover[data-empty] {
display: grid; place-items: center;
background: repeating-linear-gradient(45deg, rgb(229 138 158 / .18) 0 10px, rgb(229 138 158 / .08) 10px 20px);
}
.pm-pcard__by {
position: absolute; left: 10px; top: 10px; max-width: calc(100% - 20px);
background: rgb(34 29 23 / .72); color: #F5F0E5; border-radius: var(--pm-r-pill); padding: 3px 10px;
font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pm-pcard__body { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 12px; min-height: 148px; }
.pm-pcard__title, .pm-pcard__sum { flex: none; }
.pm-pcard__title { font-size: 1.0625rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pm-pcard__title a { color: var(--pm-ink); text-decoration: none; }
.pm-pcard__title a::after { content: ""; position: absolute; inset: 0; }
.pm-pcard__sum { font-size: var(--pm-fs-sm); color: var(--pm-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pm-pcard__foot { margin-top: auto; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--pm-ink-3); }
.pm-pcard[data-visited]::after {
content: ""; position: absolute; right: 10px; bottom: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--pm-ink-3);
}
.pm-flash { animation: pm-flash 900ms var(--pm-ease-out) 1; }
@keyframes pm-flash { 0%, 100% { box-shadow: var(--pm-e-object); } 35% { box-shadow: 0 0 0 4px var(--pm-match); } }
/* ---------- C-021 条目签 ---------- */
.pm-strips { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: var(--pm-s-4); }
@media (max-width: 599px) { .pm-strips { grid-template-columns: 1fr; } }
.pm-strip {
position: relative; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
background: var(--pm-card); border: 1px solid var(--pm-line); border-radius: var(--pm-r-sheet); padding: 16px 16px 16px 22px;
box-shadow: var(--pm-e-object); overflow: hidden; transition: border-color var(--pm-t-fast);
}
.pm-strip::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--c); transition: width var(--pm-t-fast); }
.pm-strip:hover { border-color: var(--pm-brass); }
.pm-strip:hover::before { width: 8px; }
.pm-strip[data-kind="skill"] { --c: var(--pm-kind-skill); }
.pm-strip[data-kind="tool"] { --c: var(--pm-kind-tool); }
.pm-strip__name a { color: var(--pm-ink); text-decoration: none; }
.pm-strip__name a::after { content: ""; position: absolute; inset: 0; }
.pm-strip__by { font-size: var(--pm-fs-sm); color: var(--pm-ink-3); }
.pm-strip__desc { margin-top: 6px; font-size: var(--pm-fs-sm); color: var(--pm-ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pm-strip__plate {
grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 4px;
border: 1px solid var(--pm-line); border-radius: var(--pm-r-ctl); background: var(--pm-paper); font-size: 12px;
}
.pm-strip__plate div { padding: 6px 10px; border-left: 1px solid var(--pm-line); }
.pm-strip__plate div:first-child { border-left: 0; }
.pm-strip__plate span { display: block; color: var(--pm-ink-3); font-size: 11px; }
.pm-strip__plate b { font-weight: 600; font-variant-numeric: tabular-nums; }
/* ---------- C-022 作品卡、C-023 书目行（梦） ---------- */
.pm-table {
background: var(--pm-table); border: 1px solid var(--pm-table-line); border-radius: var(--pm-r-sheet);
padding: var(--pm-s-6); color: var(--pm-on-scene);
}
.pm-workcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--pm-s-5); }
.pm-workcard {
position: relative; display: flex; flex-direction: column;
border: 6px solid var(--pm-card-frame); border-radius: var(--pm-r-sheet); background: var(--pm-card-frame);
box-shadow: var(--pm-e-object-night); overflow: hidden; transition: box-shadow var(--pm-t-fast);
}
.pm-workcard:hover { box-shadow: var(--pm-e-object-night), 0 0 16px 2px rgb(111 214 227 / .25); }
.pm-workcard:focus-within { outline: 2px solid #F4E9CC; outline-offset: 3px; }
.pm-workcard a:focus-visible { outline: none; box-shadow: none; }
.pm-workcard__art { aspect-ratio: 13 / 12.5; flex: none; display: grid; place-items: center; border-radius: 6px 6px 0 0; }
.pm-workcard__plate { flex: 1; background: var(--pm-plate); color: #221D17; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; border-radius: 0 0 6px 6px; }
.pm-workcard__no { font: 11px var(--pm-font-mono); letter-spacing: .08em; color: #6E6458; }
.pm-workcard__title { font-family: var(--pm-font-serif); font-weight: 600; font-size: 1rem; line-height: 1.35; }
.pm-workcard__title a { color: inherit; text-decoration: none; }
.pm-workcard__title a::after { content: ""; position: absolute; inset: 0; }
.pm-workcard__meta { margin-top: auto; display: flex; justify-content: space-between; gap: 6px; font-size: 12px; color: #5A5045; }
/* ---------- C-056 投放槽、C-058 进度与预检 ---------- */
.pm-drop {
position: relative; display: grid; place-items: center; text-align: center; min-height: 200px; padding: 24px;
background: var(--pm-core); color: var(--pm-core-ink); border: 2px solid var(--pm-brass); border-radius: var(--pm-r-sheet);
box-shadow: var(--pm-e-inset);
}
.pm-drop::before { content: ""; position: absolute; inset: 10px; border: 1px dashed rgb(237 230 214 / .35); border-radius: 8px; pointer-events: none; }
.pm-drop[data-state="candidate"] { box-shadow: var(--pm-e-inset), 0 0 0 3px #6FD6E3; }
.pm-drop[data-state="over"] { box-shadow: var(--pm-e-inset), 0 0 0 6px #6FD6E3; background: #252B29; }
.pm-drop__icon { width: 40px; height: 40px; color: var(--pm-brass-hi); margin: 0 auto 8px; }
.pm-drop__btn { position: relative; display: inline-flex; margin: 10px 0; }
.pm-drop__btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pm-drop__btn:focus-within .pm-btn { outline: 2px solid #F4E9CC; outline-offset: 2px; }
.pm-drop__limits { font-size: var(--pm-fs-sm); color: #B9B09E; }
.pm-filetag {
display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px 16px;
background: var(--pm-core); color: var(--pm-core-ink); border: 2px solid var(--pm-brass); border-radius: var(--pm-r-sheet);
}
.pm-filetag__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-filetag__size { color: #B9B09E; font-size: var(--pm-fs-sm); }
.pm-check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pm-check-list li { display: grid; grid-template-columns: 20px auto 1fr; gap: 10px; align-items: baseline; }
.pm-check-list .pm-ico { font: 600 14px var(--pm-font-mono); }
.pm-check-list [data-s="ok"] .pm-ico { color: var(--pm-success); }
.pm-check-list [data-s="bad"] .pm-ico { color: var(--pm-danger); }
.pm-check-list [data-s="run"] .pm-ico { color: var(--pm-ink-3); }
.pm-check-list .pm-v { text-align: right; color: var(--pm-ink-2); overflow-wrap: anywhere; }
.pm-check-list .pm-why { grid-column: 2 / -1; color: var(--pm-danger); font-size: var(--pm-fs-sm); }
.pm-progress { display: grid; gap: 6px; }
.pm-progress__bar { height: 6px; background: var(--pm-paper-2); border-radius: 3px; overflow: hidden; }
.pm-progress__fill { height: 100%; background: var(--pm-ink); transform-origin: left; transform: scaleX(var(--v, 0)); transition: transform 200ms linear; }
.pm-progress[data-indeterminate] .pm-progress__fill { width: 30%; transform: none; animation: pm-indet 1.6s linear infinite alternate; }
@keyframes pm-indet { from { margin-left: 0; } to { margin-left: 70%; } }
@media (prefers-reduced-motion: reduce) {
.pm-progress[data-indeterminate] .pm-progress__fill { width: 100%; animation: none; background: repeating-linear-gradient(90deg, var(--pm-ink) 0 6px, transparent 6px 12px); }
}
.pm-progress__text { display: flex; justify-content: space-between; font-size: var(--pm-fs-sm); color: var(--pm-ink-2); }
/* ---------- C-069 回执 ---------- */
.pm-stamp {
position: absolute; right: 18px; top: 18px; width: 72px; height: 72px; border-radius: 50%;
border: 2px solid var(--pm-success); color: var(--pm-success); display: grid; place-items: center;
font-family: var(--pm-font-serif); font-weight: 600; transform: rotate(-8deg); font-size: 15px;
box-shadow: inset 0 0 0 4px var(--pm-card), inset 0 0 0 5px var(--pm-success);
}
.pm-cred { font: 600 1rem var(--pm-font-mono); letter-spacing: .06em; overflow-wrap: anywhere; }
/* ---------- C-066 行内提示 ---------- */
.pm-alert {
display: grid; grid-template-columns: 20px 1fr; gap: 10px; padding: 12px 14px; border-radius: var(--pm-r-ctl);
border-left: 4px solid var(--tone); background: color-mix(in srgb, var(--tone) 8%, var(--pm-paper)); color: var(--pm-ink);
}
.pm-alert svg { width: 20px; height: 20px; color: var(--tone); }
.pm-alert[data-tone="info"] { --tone: var(--pm-info); }
.pm-alert[data-tone="warn"] { --tone: var(--pm-warning); }
.pm-alert[data-tone="danger"] { --tone: var(--pm-danger); }
.pm-alert[data-tone="success"] { --tone: var(--pm-success); }
@supports not (background: color-mix(in srgb, red 8%, white)) { .pm-alert { background: var(--pm-card); } }
/* ---------- C-061 对话框 ---------- */
.pm-dialog {
width: min(560px, 100% - 32px); border: var(--pm-w-bold) solid var(--pm-ink); border-radius: var(--pm-r-sheet);
background: var(--pm-card); color: var(--pm-ink); padding: 0; box-shadow: var(--pm-e-overlay);
}
.pm-dialog::backdrop { background: rgb(13 17 18 / .55); }
.pm-dialog__head { display: flex; align-items: center; gap: 12px; padding: 18px 20px 12px; }
.pm-dialog__head h2 { font-size: 1.25rem; }
.pm-dialog__head::after { content: ""; flex: 1; order: 1; height: 1px; background: var(--pm-brass); }
.pm-dialog__head button { order: 2; }
.pm-dialog__body { padding: 0 20px 16px; display: grid; gap: 12px; }
.pm-dialog__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 20px 18px; }
.pm-iconbtn {
width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: var(--pm-r-ctl);
border: 1px solid transparent; background: transparent; color: inherit; cursor: pointer;
}
.pm-iconbtn:hover { border-color: var(--pm-line); }
.pm-iconbtn svg { width: 20px; height: 20px; }
/* ---------- 阅读（P-11） ---------- */
.pm-read {
background: var(--pm-paper); color: var(--pm-ink); border-radius: var(--pm-r-sheet);
padding: var(--pm-s-7) var(--pm-s-7) var(--pm-s-8); display: grid; grid-template-columns: minmax(0, 33em) 220px; gap: 0 var(--pm-s-6);
justify-content: center;
}
@media (max-width: 899px) { .pm-read { grid-template-columns: minmax(0, 1fr); padding: var(--pm-s-5) var(--pm-s-4); } }
.pm-read__body { font-family: var(--pm-font-serif); font-size: var(--pm-fs-read); line-height: 1.85; }
.pm-read__body p { margin: 0 0 1em; position: relative; }
.pm-read__body p .pm-pno {
position: absolute; left: -3.2em; top: .2em; font: 11px var(--pm-font-mono); color: var(--pm-ink-3); opacity: 0; transition: opacity var(--pm-t-fast);
}
.pm-read__body p:hover .pm-pno, .pm-read__body p:focus-within .pm-pno { opacity: 1; }
.pm-noteref {
font: 600 .7em var(--pm-font-mono); vertical-align: super; line-height: 0; padding: 0 2px;
color: var(--pm-link); background: none; border: 0; cursor: pointer;
}
.pm-margin { font-size: var(--pm-fs-sm); color: var(--pm-ink-2); font-family: var(--pm-font-serif); line-height: 1.6; }
.pm-margin__note { border-left: 2px solid var(--pm-brass); padding-left: 10px; margin-bottom: 18px; }
.pm-margin__note[data-flash] { animation: pm-noteflash 600ms var(--pm-ease-out); }
@keyframes pm-noteflash { 40% { box-shadow: -4px 0 0 0 #11808E, 0 0 0 4px rgb(17 128 142 / .15); } }
@media (max-width: 899px) { .pm-margin { display: none; } }
/* ---------- 站务台（P-16） ---------- */
.pm-ledger { display: grid; grid-template-columns: 240px minmax(320px, 1fr) minmax(420px, 1.2fr); gap: var(--pm-s-4); }
.pm-drawers { display: grid; gap: 6px; align-content: start; }
.pm-drawer-tab {
display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: center; height: 56px; padding: 0 14px;
background: var(--pm-card); border: 1px solid var(--pm-line); border-radius: var(--pm-r-ctl); color: var(--pm-ink); text-decoration: none;
position: relative;
}
.pm-drawer-tab[aria-current="true"] { background: var(--pm-ink); color: var(--pm-paper); border-color: var(--pm-ink); }
.pm-drawer-tab[aria-current="true"]::before { content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 4px; background: var(--pm-brass-hi); border-radius: 2px; }
.pm-countcap { min-width: 32px; height: 22px; padding: 0 8px; border-radius: var(--pm-r-pill); background: var(--pm-paper-2); color: var(--pm-ink); font: 600 12px var(--pm-font-mono); display: inline-grid; place-items: center; }
.pm-drawer-tab[aria-current="true"] .pm-countcap { background: #F5F0E5; }
.pm-queue { background: var(--pm-paper); border: 1px solid var(--pm-line); border-radius: var(--pm-r-sheet); overflow: hidden; }
.pm-qrow { display: grid; gap: 4px; padding: 12px 16px; border-bottom: 1px solid var(--pm-line); color: var(--pm-ink); text-decoration: none; }
.pm-qrow[aria-current="true"] { background: var(--pm-card); box-shadow: inset 4px 0 0 var(--pm-ink); }
.pm-qrow__meta { font-size: 12px; color: var(--pm-ink-3); }
.pm-flag { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 4px; font-size: 11px; border: 1px solid currentColor; }
.pm-flag[data-tone="warn"] { color: var(--pm-warning); }
.pm-flag[data-tone="danger"] { color: var(--pm-danger); }
.pm-actbar { position: sticky; bottom: 0; display: flex; gap: 10px; flex-wrap: wrap; padding: 14px 0 0; background: var(--pm-paper); border-top: 1px solid var(--pm-line); margin-top: 16px; }
.pm-hold { position: relative; overflow: hidden; }
.pm-hold__fill { position: absolute; inset: 0; background: #6E1810; transform-origin: left; transform: scaleX(var(--h, 0)); }
.pm-hold > span:not(.pm-hold__fill) { position: relative; }
.pm-compare { display: grid; grid-template-columns: 7em 1fr 1fr; gap: 0; border: 1px solid var(--pm-line); border-radius: var(--pm-r-ctl); font-size: var(--pm-fs-sm); overflow: hidden; }
.pm-compare > div { padding: 8px 10px; border-top: 1px solid var(--pm-line); }
.pm-compare > div:nth-child(-n+3) { border-top: 0; background: var(--pm-paper-2); font-weight: 600; }
.pm-compare [data-diff] { background: rgb(138 90 0 / .08); color: var(--pm-warning); }
/* ---------- 页脚 C-006 ---------- */
.pm-foot { margin-top: var(--pm-s-8); background: var(--pm-paper-2); border-top: 1px solid var(--pm-line); color: var(--pm-ink-2); font-size: var(--pm-fs-sm); }
.pm-foot__in { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--pm-s-5); padding: var(--pm-s-6) 0; }
html[data-state="dream"] .pm-foot { background: transparent; border-top-color: #24403F; color: var(--pm-on-scene-2); }
@media (max-width: 899px) { .pm-foot__in { grid-template-columns: 1fr; } }
/* C-008 补充：梦态签牌从右往左走（醒→梦向右，梦→醒向左） */
.pm-threshold { position: relative; }
html[data-state="dream"] .pm-threshold__token { transform: translateX(calc((var(--pm-thr-w, 120px) - 32px) * (1 - var(--p, 0)))); }
html[data-state="dream"] .pm-threshold__fill { left: auto; right: 2px; }
html[data-state="dream"] .pm-threshold__tick { left: calc(2px + (100% - 32px) * .1 + 14px); }
html[data-state="dream"] .pm-threshold--l .pm-threshold__token { transform: translateX(calc((280px - 44px) * (1 - var(--p, 0)))); }
html[data-state="dream"] .pm-threshold--l .pm-threshold__tick { left: calc(2px + (100% - 44px) * .1 + 20px); }
/* WEB-M03 预览层：对侧环境色按 p 叠化，不渲染对侧内容 */
.pm-scene-preview { position: fixed; inset: 0; pointer-events: none; z-index: 5; opacity: 0; background: #0D1719; }
html[data-state="dream"] .pm-scene-preview { background: #D7D2C6; }
/* 程序移焦的落点（、H1，tabindex="-1"）不画焦点环：它们不是可操作控件 */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }
/* §4.5 窄屏：导航收进菜单按钮（C-009 抽屉），门槛轨道 96 */
.pm-menubtn { display: none; margin-left: auto; color: var(--pm-lintel-ink); }
@media (max-width: 899px) {
.pm-nav { display: none; }
.pm-menubtn { display: inline-grid; }
.pm-lintel__in { gap: var(--pm-s-3); }
}
@media (max-width: 599px) {
.pm-lintel__in { height: 56px; }
.pm-brand__tag, .pm-threshold:not(.pm-threshold--l) .pm-threshold__label { display: none; }
.pm-lintel .pm-threshold { --pm-thr-w: 96px; }
.pm-threshold--l { --pm-thr-w: 220px; }
.pm-threshold--l .pm-threshold__track { width: 220px; }
.pm-threshold--l .pm-threshold__token { transform: translateX(calc((220px - 44px) * var(--p, 0))); }
}
/* Claude r4 source: demos/pm-decor.css. */
/* =====================================================================
群相官网 · r2 质感层（示范，非产品代码）
加载在 pm-design.css 之后。r2 回应用户样张反馈：纸色更丰富、背景有质感与装饰、
醒梦切换改为隐藏式暗锁。位图（decor/）只做装饰层：不含文字、不承载结构与点击区（DEC-W041）。
关闭：html.pm-tex-off 去掉全部纹理、插画与装饰件，只留色值（结构不变）。
===================================================================== */
/* ---------- T-03 r2：纸种与色值（每个房间一种纸） ---------- */
:root {
--pm-paper: #E8DEC7; /* 档案纸均值；纹理加载失败时的底色 */
--pm-paper-2: #E2D5B8;
--pm-card: #F6EFDE;
--pm-field: #FBF6EA;
--pm-field-line: #857661;
--pm-line: #CDBE9C;
--pm-ink-2: #554A3E;
--pm-ink-3: #5E5347;
--pm-link: #1D5560;
--pm-match: #0F6F7C;
--pm-danger: #922218;
--pm-success: #2A5E33;
--pm-warning: #744B00;
--pm-btn-off: #E0D7C4;
--pm-on-scene-2: #4A4136;
--pm-paper-img: url("../assets/decor/paper-archive.webp");
--pm-wall-img: url("../assets/decor/wall-hall.webp");
--pm-accent: #5E4526; /* 房间主色：页签、名牌、印章（不是红） */
--pm-lamp: rgb(255 240 204 / .46);
--pm-brass-grad: linear-gradient(180deg, #E2C78A 0%, #C3A262 52%, #A68645 100%);
}
[data-room="hall"] { --pm-scene: #C5BBA5; --pm-wall-img: url("../assets/decor/wall-hall.webp"); --pm-paper-img: url("../assets/decor/paper-archive.webp"); --pm-paper: #E8DEC7; --pm-accent: #5E4526; }
[data-room="roster"] { --pm-scene: #C2B5B5; --pm-wall-img: url("../assets/decor/wall-roster.webp"); --pm-paper-img: url("../assets/decor/paper-album.webp"); --pm-paper: #ECE1D0; --pm-accent: #573C52; }
[data-room="skills"] { --pm-scene: #B8AC92; --pm-wall-img: url("../assets/decor/wall-skills.webp"); --pm-paper-img: url("../assets/decor/paper-tag.webp"); --pm-paper: #E6E3CD; --pm-accent: #2A5248; }
[data-room="tools"] { --pm-scene: #A49A86; --pm-wall-img: url("../assets/decor/wall-tools.webp"); --pm-paper-img: url("../assets/decor/paper-tag.webp"); --pm-paper: #E6E3CD; --pm-accent: #2C4662; }
[data-room="post"] { --pm-scene: #CBBC9F; --pm-wall-img: url("../assets/decor/wall-post.webp"); --pm-paper-img: url("../assets/decor/paper-manila.webp"); --pm-paper: #E5D5B1; --pm-accent: #5F3F28; }
[data-room="study"] { --pm-scene: #BEC0B2; --pm-wall-img: url("../assets/decor/wall-study.webp"); --pm-paper-img: url("../assets/decor/paper-study.webp"); --pm-paper: #EAE3D1; --pm-accent: #3C4A36; }
[data-room="ledger"] { --pm-scene: #BFC5C2; --pm-wall-img: url("../assets/decor/wall-ledger.webp"); --pm-paper-img: url("../assets/decor/paper-ledger.webp"); --pm-paper: #E8E6D5; --pm-accent: #3A4246; }
[data-room="lost"] { --pm-scene: #C5C0B5; --pm-wall-img: url("../assets/decor/wall-lost.webp"); --pm-paper-img: url("../assets/decor/paper-archive.webp"); --pm-paper: #E8DEC7; --pm-accent: #4A4540; }
/* ---------- D0 墙面：底材 + 房间图案 + 台灯光池 + 暗角 ---------- */
body {
background-color: var(--pm-scene);
background-image:
radial-gradient(ellipse 62% 48% at 20% 0%, var(--pm-lamp), transparent 72%), /* 台灯光池 */
radial-gradient(ellipse 130% 95% at 50% 35%, transparent 52%, rgb(38 28 14 / .30) 100%), /* 暗角 */
var(--pm-motif, none), /* 房间图案 */
var(--pm-wall-img);
background-size: 100% 100%, 100% 100%, var(--pm-motif-size, auto), 512px 512px;
background-attachment: fixed;
}
/* 房间图案（我们自己的几何，SVG；浓度都很低） */
[data-room="hall"] { --pm-motif: url("data:image/svg+xml;utf8,"); --pm-motif-size: 96px 96px; }
[data-room="roster"] { --pm-motif: url("data:image/svg+xml;utf8,"); --pm-motif-size: 120px 140px; }
[data-room="skills"] { --pm-motif: linear-gradient(180deg, transparent 0 236px, rgb(60 44 20 / .28) 236px 238px, rgb(255 246 220 / .20) 238px 240px, transparent 240px); --pm-motif-size: 100% 240px; }
[data-room="tools"] { --pm-motif: linear-gradient(90deg, rgb(44 70 98 / .07) 1px, transparent 1px), linear-gradient(0deg, rgb(44 70 98 / .07) 1px, transparent 1px); --pm-motif-size: 32px 32px; }
[data-room="post"] { --pm-motif: url("data:image/svg+xml;utf8,"); --pm-motif-size: 220px 220px; }
[data-room="study"] { --pm-motif: repeating-linear-gradient(90deg, transparent 0 46px, rgb(60 74 54 / .05) 46px 48px); --pm-motif-size: auto; }
[data-room="ledger"] { --pm-motif: repeating-linear-gradient(0deg, transparent 0 27px, rgb(58 66 70 / .08) 27px 28px); --pm-motif-size: auto; }
/* 门厅台灯下的浮尘：慢速漂移，减少动效时静止 */
.pm-dust { position: fixed; inset: 0 auto auto 0; width: 60vw; height: 60vh; pointer-events: none; z-index: 0;
background: url("../assets/decor/dust.png") 0 0 / 640px 640px; opacity: .35; mix-blend-mode: screen;
-webkit-mask-image: radial-gradient(ellipse at 30% 10%, #000 30%, transparent 70%); mask-image: radial-gradient(ellipse at 30% 10%, #000 30%, transparent 70%);
animation: pm-dust 90s linear infinite; }
@keyframes pm-dust { to { background-position: 640px 220px; } }
@media (prefers-reduced-motion: reduce) { .pm-dust { animation: none; } }
html.pm-motion-off .pm-dust { animation: none; }
/* ---------- D1 门楣：深色木纹 + 黄铜饰条 ---------- */
.pm-lintel {
background: linear-gradient(180deg, rgb(255 255 255 / .05), transparent 30%), url("../assets/decor/lintel-wood.webp") 0 0 / 1024px 128px, var(--pm-lintel);
border-bottom: 0;
box-shadow: 0 1px 0 #6E5428, 0 2px 0 #D3B474, 0 3px 0 #8A6C3A, 0 8px 14px -6px rgb(0 0 0 / .45);
}
/* ---------- D2 纸面：纸种 + 磨损霉斑 + 内缘旧色 + 黄铜护角 ---------- */
.pm-sheet {
background-color: var(--pm-paper);
background-image: url("../assets/decor/foxing.png"), var(--pm-paper-img);
background-size: 100% 100%, 512px 512px;
border: 1px solid rgb(120 92 48 / .35);
box-shadow: inset 0 0 0 1px rgb(255 250 236 / .45), inset 0 0 48px rgb(122 88 40 / .16), 0 18px 40px -26px rgb(40 28 12 / .55);
}
.pm-sheet::before { opacity: 1; background: none; /* r1 的 4% 噪声由纸纹位图取代 */
/* 四个黄铜护角（只是装饰） */
background-image:
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,");
background-position: -6px -6px, calc(100% + 6px) -6px, -6px calc(100% + 6px), calc(100% + 6px) calc(100% + 6px);
background-repeat: no-repeat; inset: 0; z-index: 2; }
.pm-sheet > * { position: relative; z-index: 1; }
/* 投递处：纸面顶边的航空信封斜纹（墨蓝 + 棕，不用红） */
[data-room="post"] .pm-sheet { border-top: 0; padding-top: calc(var(--pm-s-6) + 10px); }
[data-room="post"] .pm-sheet::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; border-radius: 12px 12px 0 0;
background: repeating-linear-gradient(135deg, #2C4662 0 14px, #E5D5B1 14px 22px, #5F3F28 22px 36px, #E5D5B1 36px 44px); opacity: .85; }
/* 书房：页面底部一排书脊（纯 CSS） */
.pm-shelf { height: 68px; margin-top: var(--pm-s-7); border-radius: 4px; position: relative; overflow: hidden;
background:
linear-gradient(180deg, transparent 0 58px, #3A2A18 58px 62px, #6E5428 62px 63px, #2A1E12 63px),
repeating-linear-gradient(90deg, #4B3A5A 0 18px, #2E3A2C 18px 30px, #6B4A2B 30px 52px, #2C4662 52px 64px, #7A6236 64px 80px, #3D2C24 80px 96px, #56604A 96px 108px, #5A3E3A 108px 126px);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.pm-shelf::before { content: ""; position: absolute; inset: 0 0 10px; background: repeating-linear-gradient(90deg, transparent 0 7px, rgb(255 240 200 / .18) 7px 8px, transparent 8px 22px), linear-gradient(180deg, rgb(255 255 255 / .10), transparent 40%, rgb(0 0 0 / .25)); }
/* 页签、名牌用房间主色 */
.pm-tab { background: var(--pm-accent); color: #F6EFDE; box-shadow: 0 1px 0 rgb(0 0 0 / .2); }
.pm-section { border-top-color: rgb(120 92 48 / .3); }
.pm-gtitle::after { background: linear-gradient(90deg, var(--pm-brass), rgb(168 137 79 / .2)); }
/* ---------- D3 卡片：浅一号的卡纸（也有纹理） ---------- */
.pm-pcard, .pm-strip, .hall-room, .post-card, .pm-docframe, .dt-side, .pm-queue, .st-detail {
background-color: var(--pm-card);
background-image: linear-gradient(rgb(255 251 240 / .5), rgb(255 251 240 / .5)), url("../assets/decor/paper-album.webp");
background-size: auto, 512px 512px;
}
.pm-pcard__body { background: transparent; }
.pm-strip__plate { background: rgb(232 222 199 / .7); }
/* 名片顶部的打孔（目录卡片的孔，装饰） */
.pm-pcard__cover::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
background: radial-gradient(circle at 40% 40%, rgb(0 0 0 / .35), rgb(0 0 0 / .15) 60%, transparent 62%), var(--pm-scene); box-shadow: inset 0 1px 2px rgb(0 0 0 / .4); z-index: 1; }
/* ---------- 铜扣按钮：金属渐变 ---------- */
.pm-btn--primary {
background: var(--pm-brass-grad); border-color: #6E5428;
box-shadow: inset 0 1px 0 rgb(255 248 220 / .65), inset 0 -1px 0 rgb(80 58 24 / .35), 0 1px 0 rgb(0 0 0 / .15);
text-shadow: 0 1px 0 rgb(255 240 200 / .35);
}
.pm-btn--primary:hover { box-shadow: inset 0 1px 0 rgb(255 248 220 / .65), 0 0 14px 2px rgb(226 199 138 / .6); }
.pm-btn--primary:active { background: linear-gradient(180deg, #A68645, #9A7A42); box-shadow: inset 0 2px 3px rgb(60 40 10 / .35); }
/* ---------- 梦：夜空（位图）+ 夜桌皮面 ---------- */
html[data-state="dream"] body {
background-color: #0D1719;
background-image: radial-gradient(ellipse 80% 60% at 50% 30%, transparent 40%, rgb(0 0 0 / .45)), url("../assets/decor/night-sky.webp");
background-size: 100% 100%, cover; background-position: center, center top; background-attachment: fixed;
}
.pm-table {
background-color: #182E30;
background-image: radial-gradient(ellipse 70% 60% at 50% 20%, rgb(111 214 227 / .07), transparent 70%), url("../assets/decor/wall-night-table.webp");
background-size: 100% 100%, 512px 512px;
border: 1px solid #2E4A4A; box-shadow: inset 0 0 0 4px rgb(0 0 0 / .18), inset 0 0 60px rgb(0 0 0 / .45), 0 24px 50px -30px rgb(0 0 0 / .8);
}
.pm-read { background-color: #EFE4CC; background-image: url("../assets/decor/foxing.png"), url("../assets/decor/paper-night.webp"); background-size: 100% 100%, 512px 512px;
box-shadow: inset 0 0 50px rgb(122 88 40 / .18), 0 30px 60px -30px rgb(0 0 0 / .8); }
.pm-workcard__plate { background-color: var(--pm-plate); background-image: linear-gradient(rgb(255 250 236 / .4), rgb(255 250 236 / .4)), url("../assets/decor/paper-night.webp"); background-size: auto, 512px 512px; }
/* ---------- 关闭纹理与装饰 ---------- */
html.pm-tex-off body, html.pm-tex-off .pm-sheet, html.pm-tex-off .pm-table, html.pm-tex-off .pm-read,
html.pm-tex-off .pm-pcard, html.pm-tex-off .pm-strip, html.pm-tex-off .pm-docframe, html.pm-tex-off .pm-lintel { background-image: none !important; }
html.pm-tex-off .pm-sheet::before, html.pm-tex-off .pm-sheet::after, html.pm-tex-off .pm-dust, html.pm-tex-off .pm-shelf { display: none; }
/* ======================= C-008 r2 暗锁 ======================= */
.pm-lock { position: relative; width: 44px; height: 44px; flex: none; }
.pm-lock__link { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
-webkit-user-drag: none; -webkit-user-select: none; user-select: none; touch-action: none; cursor: default; -webkit-tap-highlight-color: transparent; }
/* 悬停不立刻"承认"它是能转的东西：一开始仍是普通小箭头，悬停满 3 秒
（js/ui/lock.js 打上 data-armed）才变成可抓的手；按住时是抓紧的手。 */
.pm-lock[data-armed] .pm-lock__link { cursor: grab; }
.pm-lock:is([data-phase="holding"], [data-phase="turning"], [data-phase="auto"]) .pm-lock__link { cursor: grabbing; }
.pm-lock__rose { width: 36px; height: 36px; overflow: visible; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .6)); }
.pm-lock__rose .rim { fill: url(#pm-brass-g); }
.pm-lock__rose .rim-in { fill: none; stroke: url(#pm-brass-in); stroke-width: 1; }
.pm-lock__rose .stud { fill: #6E5428; }
.pm-lock__rose .core { fill: url(#pm-core-g); }
.pm-lock__rose .hole { fill: #0A0806; transition: fill 400ms linear; }
.pm-lock__rose .key { fill: url(#pm-brass-g); stroke: #5A4420; stroke-width: .6; }
html[data-state="dream"] .pm-lock__rose .rim, html[data-state="dream"] .pm-lock__rose .key { fill: url(#pm-silver-g); }
html[data-state="dream"] .pm-lock__rose .stud { fill: #4B6A6D; }
.pm-lock__link:hover .hole { fill: #3A2A10; }
.pm-lock[data-phase="holding"] .hole { fill: #E8C878; } /* 按住时锁眼渐渐亮起：插入进度 */
.pm-lock__key { transform-box: view-box; transform-origin: 20px 20px; transform: rotate(var(--lock-deg, 0deg)); opacity: 0; transition: opacity 120ms; }
.pm-lock:is([data-phase="turning"], [data-phase="auto"], [data-phase="committing"], [data-phase="returning"]) .pm-lock__key { opacity: 1; }
.pm-lock[data-phase="returning"] .pm-lock__key { transition: transform var(--lock-return, 320ms) cubic-bezier(.2,.7,.2,1), opacity 120ms var(--lock-return, 320ms); }
.pm-lock__dial { position: absolute; left: 50%; top: 50%; width: 140px; height: 140px; margin: -70px 0 0 -70px; pointer-events: none; opacity: 0; transition: opacity 160ms; z-index: 30; overflow: visible; }
/* 刻度盘只跟"按住了"走：holding 起就出来（悬停 3 秒只给标签，不提早给盘） */
.pm-lock:is([data-phase="holding"], [data-phase="turning"], [data-phase="auto"], [data-phase="committing"]) .pm-lock__dial { opacity: 1; }
.pm-lock__track { fill: rgb(13 17 18 / .55); stroke: rgb(168 137 79 / .55); stroke-width: 1; }
.pm-lock__tick { stroke: rgb(237 230 214 / .28); stroke-width: 2.2; stroke-linecap: round; transition: stroke 80ms; }
.pm-lock__tick[data-on="true"] { stroke: #6FD6E3; }
.pm-lock[data-ready="true"] .pm-lock__tick[data-on="true"] { stroke: #B8F1F7; filter: drop-shadow(0 0 3px #6FD6E3); }
.pm-lock[data-glint] .pm-lock__rose { animation: pm-glint 520ms ease-out; }
@keyframes pm-glint { 30% { filter: drop-shadow(0 0 6px rgb(241 221 164 / .9)) brightness(1.25); } }
.pm-lock__hint { position: absolute; right: -6px; top: 52px; white-space: nowrap; font-size: 12px; color: #EDE6D6; background: rgb(23 27 28 / .92);
border: 1px solid #6E5428; border-radius: 6px; padding: 4px 8px; opacity: 0; transition: opacity 160ms; pointer-events: none; z-index: 31; }
/* 「按住」标签同样只在认出来之后（悬停满 3 秒）才给 */
.pm-lock[data-armed] .pm-lock__hint[data-show="true"] { opacity: 1; }
.pm-lock--l { width: 96px; height: 96px; }
.pm-lock--l .pm-lock__link { width: 96px; height: 96px; }
.pm-lock--l .pm-lock__rose { width: 84px; height: 84px; }
.pm-lock--l .pm-lock__dial { width: 220px; height: 220px; margin: -110px 0 0 -110px; }
.pm-lock--l .pm-lock__hint { right: auto; left: 50%; transform: translateX(-50%); top: 104px; }
@media (prefers-reduced-motion: reduce) { .pm-lock__key, .pm-lock[data-phase="returning"] .pm-lock__key { transition: opacity 80ms; } .pm-lock[data-glint] .pm-lock__rose { animation: none; } }
/* C-008 r4：第二次失败时锁眼里浮出钥匙的虚影（无字线索），700ms 沉进锁眼 */
.pm-lock__ghost { fill: #E8C878; opacity: 0; transform-box: view-box; transform-origin: 20px 20px; pointer-events: none; }
.pm-lock[data-ghost] .pm-lock__ghost { animation: pm-key-ghost 720ms cubic-bezier(.3, .6, .3, 1) both; }
@keyframes pm-key-ghost { 0% { opacity: 0; transform: translateY(-9px); } 30% { opacity: .55; } 100% { opacity: 0; transform: translateY(2px); } }
@media (prefers-reduced-motion: reduce) { .pm-lock[data-ghost] .pm-lock__ghost { animation: pm-key-ghost-fade 720ms linear both; } }
@keyframes pm-key-ghost-fade { 0%, 100% { opacity: 0; } 40% { opacity: .5; } }
html.pm-motion-off .pm-lock[data-ghost] .pm-lock__ghost { animation: pm-key-ghost-fade 720ms linear both; }
/* C-008 r4：红线文案只在钥匙插进去之后出现（刻度盘下方），发现了锁的人才看得见 */
.pm-lock__line { position: absolute; right: -10px; top: 78px; z-index: 5; display: grid; gap: 3px; justify-items: end; white-space: nowrap; pointer-events: none;
padding: 6px 10px; border-radius: 3px; background: rgb(10 14 15 / .85); color: #DCE7E5; font: 12px/1.3 var(--pm-font-serif);
opacity: 0; transform: translateY(-4px); transition: opacity 200ms, transform 200ms var(--pm-ease-out); }
.pm-lock__line small { font: 600 9px/1 var(--pm-font-sans); letter-spacing: .22em; color: #9FD8E8; }
.pm-lock:is([data-phase="turning"], [data-phase="auto"], [data-phase="committing"]) .pm-lock__line { opacity: 1; transform: none; }
.pm-lock--l .pm-lock__line { right: auto; left: 50%; transform: translate(-50%, -4px); top: 130px; justify-items: center; }
.pm-lock--l:is([data-phase="turning"], [data-phase="auto"], [data-phase="committing"]) .pm-lock__line { transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .pm-lock__line { transition: opacity 80ms; transform: none; } }
/* Claude r4 source: demos/pm-controls.css. */
/* =====================================================================
群相官网 · r2 控件质感层（示范，非产品代码）
加载顺序：pm-design.css → pm-decor.css → pm-controls.css
回应用户：“各个按钮和控件能不能设计得有意思一点、有质感一点；网站的层次感也很重要。”
原则：每种控件是一件“物”（铜牌、纸签、行李签、文件夹页签、凹槽、墨印、铜拨杆、铜币、玻璃管），
状态仍靠光与压感表达，不改变布局尺寸；关闭纹理时退回平涂但形状线索保留。
===================================================================== */
/* ---------- T-08 r2 层次：五层都有可感知的“厚度” ---------- */
:root {
--pm-e-sheet: 0 1px 0 rgb(255 250 236 / .5) inset, 0 2px 3px rgb(40 28 12 / .18), 0 22px 40px -20px rgb(40 28 12 / .6);
--pm-e-object: 0 1px 1px rgb(40 28 12 / .2), 0 10px 18px -10px rgb(40 28 12 / .5);
--pm-e-object-hover: 0 2px 3px rgb(40 28 12 / .18), 0 18px 30px -12px rgb(40 28 12 / .55);
--pm-e-overlay: 0 2px 4px rgb(10 8 4 / .25), 0 34px 64px -20px rgb(10 8 4 / .65);
--pm-e-press: inset 0 2px 4px rgb(40 28 12 / .38), inset 0 -1px 0 rgb(255 250 236 / .25);
--pm-e-well: inset 0 2px 3px rgb(40 28 12 / .28), inset 0 0 0 1px rgb(40 28 12 / .08), 0 1px 0 rgb(255 250 236 / .6);
}
.pm-sheet { box-shadow: var(--pm-e-sheet), inset 0 0 48px rgb(122 88 40 / .16); }
.pm-pcard, .pm-strip, .hall-room, .post-card, .dt-side { box-shadow: var(--pm-e-object); transition: box-shadow 160ms var(--pm-ease-out), border-color 100ms; }
.pm-pcard:hover, .pm-strip:hover, .hall-room:hover { box-shadow: var(--pm-e-object-hover), 0 0 0 1px rgb(168 137 79 / .55); }
/* 名片叠放：背后还压着一张（只是装饰，表示“一叠”） */
.pm-pcard { isolation: isolate; overflow: visible; }
.pm-pcard__cover { border-radius: 11px 11px 0 0; }
.pm-pcard::before { content: ""; position: absolute; inset: 6px -4px -5px 4px; z-index: -1; border-radius: 12px; background: #E3D6BC;
border: 1px solid rgb(120 92 48 / .3); transform: rotate(1.4deg); box-shadow: 0 6px 12px -8px rgb(40 28 12 / .5); }
.pm-dialog { box-shadow: var(--pm-e-overlay); }
/* ---------- C-040 r2 按钮 ---------- */
/* 主：铜牌——金属渐变、一圈刻线、两颗铆钉；悬停一道光扫过；按下压进去 */
.pm-btn--primary {
position: relative; overflow: hidden; isolation: isolate;
background:
radial-gradient(circle at 10px 50%, #6E5428 0 1.6px, #F1DDA4 1.7px 2.4px, transparent 2.5px),
radial-gradient(circle at calc(100% - 10px) 50%, #6E5428 0 1.6px, #F1DDA4 1.7px 2.4px, transparent 2.5px),
linear-gradient(180deg, #ECD397 0%, #C9A866 46%, #B08E4E 54%, #A0803F 100%);
border: 1px solid #5E4520; padding-left: 24px; padding-right: 24px;
box-shadow: inset 0 1px 0 rgb(255 248 220 / .75), inset 0 -2px 0 rgb(80 58 24 / .35), 0 2px 0 #6E5428, 0 6px 10px -4px rgb(40 28 12 / .55);
text-shadow: 0 1px 0 rgb(255 244 210 / .5);
}
.pm-btn--primary::before { content: ""; position: absolute; inset: 3px; border-radius: 5px; border: 1px solid rgb(94 69 32 / .45);
box-shadow: inset 0 1px 0 rgb(255 248 220 / .35); pointer-events: none; z-index: -1; }
.pm-btn--primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
background: linear-gradient(100deg, transparent, rgb(255 250 230 / .55), transparent); transform: skewX(-18deg); opacity: 0; }
.pm-btn--primary:hover { box-shadow: inset 0 1px 0 rgb(255 248 220 / .75), inset 0 -2px 0 rgb(80 58 24 / .35), 0 2px 0 #6E5428, 0 6px 10px -4px rgb(40 28 12 / .55), 0 0 16px 2px rgb(236 211 151 / .55); }
.pm-btn--primary:hover::after { animation: pm-sheen 700ms var(--pm-ease-out) 1; }
@keyframes pm-sheen { 0% { left: -60%; opacity: 1; } 100% { left: 130%; opacity: 1; } }
.pm-btn--primary:active { background:
radial-gradient(circle at 10px 50%, #5E4520 0 1.6px, #C9A866 1.7px 2.4px, transparent 2.5px),
radial-gradient(circle at calc(100% - 10px) 50%, #5E4520 0 1.6px, #C9A866 1.7px 2.4px, transparent 2.5px),
linear-gradient(180deg, #A0803F, #B08E4E 60%, #C3A262);
box-shadow: var(--pm-e-press), 0 1px 0 #6E5428; }
.pm-btn--primary:active > * , .pm-btn--primary:active { text-shadow: none; }
.pm-btn--primary[aria-disabled="true"], .pm-btn--primary:disabled {
background: repeating-linear-gradient(135deg, #E0D7C4 0 6px, #D8CEB8 6px 12px); border-color: #A8987C; color: #5E574C; text-shadow: none;
box-shadow: inset 0 1px 0 rgb(255 255 255 / .4); }
.pm-btn--primary[aria-disabled="true"]::before { border-style: dashed; border-color: rgb(94 87 76 / .4); }
/* 次：牛皮纸签——纸纹、缝线、轻微投影 */
.pm-btn:not(.pm-btn--primary):not(.pm-btn--quiet):not(.pm-btn--danger):not(.pm-btn--ghost) {
position: relative;
background-color: #E9DCC0;
background-image: linear-gradient(rgb(255 250 236 / .35), rgb(255 250 236 / .1)), url("../assets/decor/paper-manila.webp");
background-size: auto, 256px 256px;
border: 1px solid #9C8460; color: #2A2116;
box-shadow: inset 0 1px 0 rgb(255 250 236 / .6), 0 1px 0 rgb(94 69 32 / .35), 0 4px 8px -4px rgb(40 28 12 / .45);
}
.pm-btn:not(.pm-btn--primary):not(.pm-btn--quiet):not(.pm-btn--danger):not(.pm-btn--ghost)::before {
content: ""; position: absolute; inset: 3px; border-radius: 5px; border: 1px dashed rgb(94 69 38 / .45); pointer-events: none; }
.pm-btn:not(.pm-btn--primary):not(.pm-btn--quiet):not(.pm-btn--danger):not(.pm-btn--ghost):hover { border-color: #6E5428; box-shadow: inset 0 1px 0 rgb(255 250 236 / .6), 0 1px 0 rgb(94 69 32 / .35), 0 8px 14px -6px rgb(40 28 12 / .5); }
.pm-btn:not(.pm-btn--primary):not(.pm-btn--quiet):not(.pm-btn--danger):not(.pm-btn--ghost):active { box-shadow: var(--pm-e-press); background-color: #DDCDAA; }
.pm-btn:not(.pm-btn--primary):not(.pm-btn--quiet):not(.pm-btn--danger)[aria-disabled="true"] { background-image: none; background-color: #E0D7C4; color: #5E574C; box-shadow: none; }
/* 危险：深红珐琅 + 黄铜包边（红只给危险） */
.pm-btn--danger {
background: linear-gradient(180deg, #B53A2C 0%, #922218 48%, #7A1A12 52%, #6A160F 100%);
border: 1px solid #3E0D08; color: #FFF4EC; text-shadow: 0 -1px 0 rgb(0 0 0 / .35);
box-shadow: 0 0 0 2px #B8975A, 0 0 0 3px #5E4520, inset 0 1px 0 rgb(255 210 190 / .45), 0 6px 10px -4px rgb(40 12 8 / .6);
}
.pm-btn--danger:hover { box-shadow: 0 0 0 2px #D3B474, 0 0 0 3px #5E4520, inset 0 1px 0 rgb(255 210 190 / .45), 0 0 14px 2px rgb(181 58 44 / .45); }
.pm-btn--danger:active { background: linear-gradient(180deg, #6A160F, #7A1A12 60%, #922218); box-shadow: 0 0 0 2px #A68645, 0 0 0 3px #5E4520, var(--pm-e-press); }
/* 安静：墨水链接，悬停时左侧出现一枚黄铜菱形 */
.pm-btn--quiet { position: relative; }
.pm-btn--quiet::before { content: ""; width: 6px; height: 6px; background: #A8894F; transform: rotate(45deg) scale(0); transition: transform 120ms; }
.pm-btn--quiet:hover::before { transform: rotate(45deg) scale(1); }
/* 图标按钮：黄铜圆框 */
.pm-iconbtn { border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgb(255 250 236 / .9), rgb(232 222 199 / .9)); border: 1px solid #9C8460;
box-shadow: 0 0 0 2px rgb(184 151 90 / .45), 0 3px 6px -3px rgb(40 28 12 / .5); color: #2A2116; }
.pm-lintel .pm-iconbtn { background: radial-gradient(circle at 35% 30%, #3A3F40, #1E2223); color: #EDE6D6; border-color: #6E5428; }
.pm-iconbtn:hover { box-shadow: 0 0 0 2px #C9A866, 0 0 10px 2px rgb(236 211 151 / .45); }
.pm-iconbtn:active { box-shadow: 0 0 0 2px #A68645, var(--pm-e-press); }
/* ---------- C-043/044/046 r2 输入：嵌进纸里的凹槽 ---------- */
.pm-input, .pm-textarea, .pm-select {
background-color: #FBF6EA; border: 1px solid #857661; border-radius: 8px;
box-shadow: var(--pm-e-well); transition: box-shadow 120ms, border-color 120ms;
}
.pm-input:focus-visible, .pm-textarea:focus-visible, .pm-select:focus-visible {
outline: none; border: 1px solid #6E5428;
box-shadow: var(--pm-e-well), 0 0 0 2px #C9A866, 0 0 0 4px rgb(236 211 151 / .45), 0 0 14px 2px rgb(236 211 151 / .35);
}
.pm-input[aria-invalid="true"], .pm-textarea[aria-invalid="true"] { border: 1px solid #922218; box-shadow: var(--pm-e-well), 0 0 0 2px rgb(146 34 24 / .55); }
/* 多行：横格稿纸 + 一条黄铜页边线（行距 24px 与文字对齐） */
.pm-textarea { line-height: 24px; padding: 8px 12px 8px 22px;
background-image: linear-gradient(90deg, transparent 13px, rgb(168 137 79 / .55) 13px 14px, transparent 14px),
repeating-linear-gradient(180deg, transparent 0 23px, rgb(44 70 98 / .18) 23px 24px);
background-attachment: local; background-position: 0 0, 0 9px; background-size: 100% 100%, 100% 24px; background-origin: border-box; }
/* 选择器：右侧一枚黄铜旋钮 */
.pm-select { appearance: none; -webkit-appearance: none; padding-right: 44px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 8px center; background-size: 28px 28px; }
/* 搜索：放大镜换成黄铜镜框 */
.pm-search svg { color: #8A6C3A; }
/* ---------- C-048 r2 复选：墨印方框，勾像钢笔写上去 ---------- */
.pm-check input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; flex: none;
border: 1.5px solid #2A2116; border-radius: 3px; background: #FBF6EA; box-shadow: var(--pm-e-well); cursor: pointer; position: relative;
background-repeat: no-repeat; background-position: center; background-size: 22px 22px; transition: background-color 100ms; }
.pm-check input[type="checkbox"]:checked {
background-image: url("data:image/svg+xml;utf8,");
background-color: #F3EAD5; }
.pm-check input[type="checkbox"]:hover { border-color: #6E5428; }
.pm-check input[type="checkbox"]:focus-visible { outline: 2px solid #1A1A1A; outline-offset: 2px; }
.pm-check input[type="checkbox"][aria-invalid="true"] { border-color: #922218; box-shadow: var(--pm-e-well), 0 0 0 2px rgb(146 34 24 / .5); }
/* ---------- C-050 r2 开关：铜拨杆在槽里 ---------- */
.pm-switch button { width: 52px; height: 26px; border-radius: 13px; border: 1px solid #3A2E1E; position: relative; cursor: pointer;
background: linear-gradient(180deg, #2A2520, #3A322A); box-shadow: inset 0 2px 4px rgb(0 0 0 / .55), 0 1px 0 rgb(255 250 236 / .55); }
.pm-switch button::before { content: "关"; position: absolute; right: 8px; top: 4px; font-size: 11px; color: #B9B09E; }
.pm-switch button[aria-checked="true"] { background: linear-gradient(180deg, #2A5248, #3E7468); border-color: #1E3B34; }
.pm-switch button[aria-checked="true"]::before { content: "开"; right: auto; left: 8px; color: #E6F2EE; }
.pm-switch button::after { width: 22px; height: 22px; top: 1px; left: 1px; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #F1DDA4, #B8975A 60%, #6E5428); box-shadow: 0 2px 3px rgb(0 0 0 / .5), inset 0 -1px 0 rgb(0 0 0 / .25); }
.pm-switch button[aria-checked="true"]::after { transform: translateX(26px); }
.pm-switch > span { display: none; } /* 开 / 关 已经刻在槽里 */
/* ---------- C-052 r2 筛选片：行李签（缺角 + 打孔 + 小绳孔圈） ---------- */
.pm-chip {
position: relative; height: 32px; padding: 0 12px 0 22px; border-radius: 3px 6px 6px 3px; border: 0;
clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
background-color: #EFE4CB; background-image: linear-gradient(rgb(255 250 236 / .4), rgb(255 250 236 / .1)), url("../assets/decor/paper-manila.webp"); background-size: auto, 256px 256px;
box-shadow: inset 0 0 0 1px rgb(120 92 48 / .45); color: #2A2116; }
.pm-chip::after { content: ""; position: absolute; left: 9px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
background: var(--pm-scene, #C5BBA5); box-shadow: inset 0 1px 1px rgb(0 0 0 / .45), 0 0 0 1.5px #B8975A; }
.pm-chip:hover { box-shadow: inset 0 0 0 1px #6E5428; }
.pm-chip[aria-pressed="true"] { background-image: none; background-color: var(--pm-accent, #2C4662); color: #F6EFDE; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .3), inset 0 2px 4px rgb(0 0 0 / .3); }
.pm-chip[aria-pressed="true"]::before { order: 2; }
.pm-chip[aria-pressed="true"]::after { box-shadow: inset 0 1px 1px rgb(0 0 0 / .45), 0 0 0 1.5px #F1DDA4; }
/* ---------- C-053 r2 分段：文件夹页签，当前页签和纸面连成一体 ---------- */
.pm-seg { border-bottom: 1px solid rgb(94 69 32 / .55); gap: 2px; padding-left: 6px; }
.pm-seg a { position: relative; height: 38px; padding: 0 18px; margin-bottom: -1px; border-radius: 9px 9px 0 0;
background-color: #D9CBAA; background-image: linear-gradient(180deg, rgb(255 250 236 / .25), rgb(0 0 0 / .06)), url("../assets/decor/paper-manila.webp"); background-size: auto, 256px 256px;
border: 1px solid rgb(94 69 32 / .45); border-bottom-color: rgb(94 69 32 / .55); color: #3A2E1E;
box-shadow: inset 0 -6px 8px -6px rgb(40 28 12 / .35); }
.pm-seg a:hover { background-color: #E4D7B8; }
.pm-seg a[aria-current="page"] { background-color: var(--pm-paper); background-image: var(--pm-paper-img); background-size: 512px 512px;
border-bottom-color: transparent; color: #221D17; box-shadow: 0 -3px 6px -3px rgb(40 28 12 / .3); z-index: 1; }
.pm-seg a[aria-current="page"]::before { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--pm-accent); }
/* ---------- C-054 r2 分页：铜币 ---------- */
.pm-pager a, .pm-pager span[aria-current] { min-width: 36px; height: 36px; border-radius: 50%; padding: 0;
background: radial-gradient(circle at 35% 30%, #FBF4E2, #E3D6BC); border: 1px solid #9C8460; box-shadow: 0 2px 3px -1px rgb(40 28 12 / .45); }
.pm-pager a:first-child, .pm-pager a:last-child { border-radius: 18px; padding: 0 14px; }
.pm-pager span[aria-current] { background: radial-gradient(circle at 35% 30%, #F1DDA4, #C9A866 55%, #8A6C3A); color: #221D17; border-color: #5E4520;
box-shadow: inset 0 0 0 2px rgb(255 248 220 / .35), 0 2px 4px -1px rgb(40 28 12 / .5); font-weight: 600; }
.pm-pager a:hover { box-shadow: 0 0 0 2px rgb(201 168 102 / .6), 0 3px 5px -1px rgb(40 28 12 / .45); }
/* ---------- C-058 r2 进度：玻璃管 + 刻度 ---------- */
.pm-progress__bar { height: 12px; border-radius: 6px; background: linear-gradient(180deg, #CFC4AC, #EFE6D2); border: 1px solid #857661;
box-shadow: inset 0 2px 3px rgb(40 28 12 / .35); position: relative; }
.pm-progress__bar::after { content: ""; position: absolute; left: 4px; right: 4px; top: 2px; height: 3px; border-radius: 2px; background: rgb(255 255 255 / .45); }
.pm-progress__fill { background: linear-gradient(180deg, #4A6A8C, #2C4662 60%, #1E3048); border-radius: 5px; }
.pm-progress__text { position: relative; }
.pm-progress { --pm-ticks: repeating-linear-gradient(90deg, rgb(94 69 32 / .5) 0 1px, transparent 1px 10%); }
.pm-progress::after { content: ""; display: block; height: 5px; margin-top: 2px; background: var(--pm-ticks); }
/* ---------- C-014 r2 页签标题：书签丝带（尾端燕尾） ---------- */
.pm-tab { border-radius: 2px 2px 0 0; padding-right: 22px;
clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%);
background-image: linear-gradient(180deg, rgb(255 255 255 / .12), transparent 50%, rgb(0 0 0 / .15)); }
/* ---------- C-024 r2 徽章：浮雕感 ---------- */
.pm-badge { box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), inset 0 -2px 0 rgb(0 0 0 / .18), 0 2px 3px -1px rgb(0 0 0 / .45); }
/* ---------- C-066 r2 行内提示：钉在纸上的便条 ---------- */
.pm-alert { position: relative; background-image: linear-gradient(rgb(255 250 236 / .55), rgb(255 250 236 / .3)), url("../assets/decor/paper-album.webp"); background-size: auto, 256px 256px;
box-shadow: 0 1px 1px rgb(40 28 12 / .15), 0 6px 10px -6px rgb(40 28 12 / .45); }
/* ---------- C-056 r2 投放槽：黄铜包框的深槽，四角十字定位 ---------- */
.pm-drop { border: 0; box-shadow: 0 0 0 2px #B8975A, 0 0 0 3px #5E4520, inset 0 3px 10px rgb(0 0 0 / .65), 0 8px 16px -8px rgb(40 28 12 / .6);
background: radial-gradient(ellipse at 50% 30%, #2C322F, #161A18 70%); }
.pm-drop::before { border: 0; inset: 12px;
background:
linear-gradient(#B8975A, #B8975A) top left / 14px 1px no-repeat, linear-gradient(#B8975A, #B8975A) top left / 1px 14px no-repeat,
linear-gradient(#B8975A, #B8975A) top right / 14px 1px no-repeat, linear-gradient(#B8975A, #B8975A) top right / 1px 14px no-repeat,
linear-gradient(#B8975A, #B8975A) bottom left / 14px 1px no-repeat, linear-gradient(#B8975A, #B8975A) bottom left / 1px 14px no-repeat,
linear-gradient(#B8975A, #B8975A) bottom right / 14px 1px no-repeat, linear-gradient(#B8975A, #B8975A) bottom right / 1px 14px no-repeat; opacity: .8; }
.pm-drop[data-state="candidate"] { box-shadow: 0 0 0 2px #6FD6E3, 0 0 0 3px #1E3B34, 0 0 18px 4px rgb(111 214 227 / .45), inset 0 3px 10px rgb(0 0 0 / .65); }
.pm-drop[data-state="over"] { box-shadow: 0 0 0 3px #B8F1F7, 0 0 0 4px #1E3B34, 0 0 26px 8px rgb(111 214 227 / .55), inset 0 3px 10px rgb(0 0 0 / .45); }
.pm-filetag { border: 0; box-shadow: 0 0 0 2px #B8975A, 0 0 0 3px #5E4520, inset 0 2px 6px rgb(0 0 0 / .5); }
.post-ref { border: 0; box-shadow: 0 0 0 2px #B8975A, 0 0 0 3px #5E4520, inset 0 3px 10px rgb(0 0 0 / .65); background: radial-gradient(ellipse at 50% 30%, #2C322F, #161A18 70%); }
/* ---------- 门楣导航：当前项像嵌进木头的铜牌 ---------- */
.pm-nav a[aria-current="page"] { background: linear-gradient(180deg, rgb(211 180 116 / .16), rgb(211 180 116 / .05)); box-shadow: inset 0 0 0 1px rgb(211 180 116 / .35); }
.pm-nav a[aria-current="page"]::after { height: 3px; bottom: -10px; background: linear-gradient(90deg, transparent, #F1DDA4, transparent); }
/* ---------- 关闭纹理时：保留形状，去掉位图 ---------- */
html.pm-tex-off .pm-btn, html.pm-tex-off .pm-chip, html.pm-tex-off .pm-seg a, html.pm-tex-off .pm-alert { background-image: none !important; }
@media (prefers-reduced-motion: reduce) { .pm-btn--primary:hover::after { animation: none; } }
html.pm-motion-off .pm-btn--primary:hover::after { animation: none; }
/* clip-path 会把焦点环剪掉：聚焦时去掉缺角，改用完整焦点环 */
.pm-chip:focus-visible { clip-path: none; outline: 2px solid #1A1A1A; outline-offset: 2px; box-shadow: inset 0 0 0 1px #6E5428, 0 0 0 4px #FFFDF8; }
/* Claude r4 source: demos/pm-type.css. */
/* =====================================================================
群相官网 · r2 排版、留白、光影与装饰件（示范，非产品代码）
加载顺序：pm-design → pm-decor → pm-controls → pm-type
风格气质（§4.0）：“旧档案馆里的夜读”——温暖、克制但不寒酸；铜与纸是主角，墨是骨架，青光只属于“可以”。
光影一致性：全站只有一个光源——左上方的台灯（墙面光池位于 20% 0%）。
· 所有金属与纸面高光在上沿 / 左沿；所有投影向右下（x:+2…+4，y:+6…+14）。
· 梦侧光源换成头顶的月光（50% 0%），投影改为正下方、更长更冷。
===================================================================== */
:root {
/* 光影方向令牌：T-08 的投影都从这里取偏移 */
--pm-light-x: 3px;
--pm-light-y: 10px;
--pm-e-object: 0 1px 1px rgb(40 28 12 / .2), var(--pm-light-x) var(--pm-light-y) 18px -10px rgb(40 28 12 / .5);
--pm-e-object-hover: 0 2px 3px rgb(40 28 12 / .18), calc(var(--pm-light-x) * 1.5) calc(var(--pm-light-y) * 1.7) 30px -12px rgb(40 28 12 / .55);
--pm-e-sheet: 0 1px 0 rgb(255 250 236 / .5) inset, 1px 2px 3px rgb(40 28 12 / .18), var(--pm-light-x) 22px 40px -20px rgb(40 28 12 / .6);
/* 留白节奏：8 的倍数；区块之间永远比区块内部大一级 */
--pm-rhythm-1: 8px; --pm-rhythm-2: 16px; --pm-rhythm-3: 24px; --pm-rhythm-4: 40px; --pm-rhythm-5: 64px; --pm-rhythm-6: 104px;
}
html[data-state="dream"] { --pm-light-x: 0px; --pm-light-y: 16px; }
/* ---------- 排版：标题组 = 小签（kicker）+ 标题 + 黄铜饰线 + 导语 ---------- */
.pm-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px;
font: 600 11px/1 var(--pm-font-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--pm-accent, #5E4526); }
.pm-kicker .pm-num { font-family: var(--pm-font-serif); font-size: 13px; letter-spacing: .05em; font-weight: 600; }
.pm-kicker::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }
html[data-state="dream"] .pm-kicker { color: #9FD8E8; }
.pm-display { font-family: var(--pm-font-serif); font-weight: 600; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.25rem); line-height: 1.16; letter-spacing: .01em;
text-shadow: 0 1px 0 rgb(255 250 236 / .35); }
.pm-lede { font-family: var(--pm-font-serif); font-size: 1.125rem; line-height: 1.85; color: var(--pm-on-scene-2); max-width: 30em; }
/* 饰线：细线 — 菱形 — 细线，两端收尖 */
.pm-rule { display: flex; align-items: center; gap: 10px; margin: 22px 0; color: var(--pm-brass); max-width: 420px; }
.pm-rule::before, .pm-rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, currentColor 30%, currentColor 70%, transparent); }
.pm-rule > i { width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); box-shadow: 14px -14px 0 -2px currentColor, -14px 14px 0 -2px currentColor; }
.pm-rule--center { margin-inline: auto; }
/* 编号铜章：功能列表、步骤 */
.pm-medal { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center;
font: 600 13px/1 var(--pm-font-serif); color: #2A2116; font-variant-numeric: lining-nums;
background: radial-gradient(circle at 35% 30%, #F1DDA4, #C9A866 55%, #8A6C3A); border: 1px solid #5E4520;
box-shadow: inset 0 0 0 2px rgb(255 248 220 / .35), var(--pm-light-x) 3px 5px -2px rgb(40 28 12 / .5); }
.pm-feat { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: start; }
.pm-feat h3 { margin-top: 5px; }
.pm-feat ul { grid-column: 2; list-style: none; padding: 0; margin: 4px 0 0; color: var(--pm-ink-2); line-height: 1.8; }
.pm-feat li { position: relative; padding-left: 16px; }
.pm-feat li::before { content: ""; position: absolute; left: 0; top: .72em; width: 5px; height: 5px; background: #A8894F; transform: rotate(45deg); }
/* 首字下沉（梦侧作品阅读） */
.pm-read__body p.pm-first::first-letter { float: left; font-size: 3.6em; line-height: .9; margin: .06em .12em 0 0; color: #5E4526; font-weight: 600;
text-shadow: 1px 1px 0 rgb(255 250 236 / .6); }
/* 门厅主视觉：左侧标题下方一枚淡淡的铜质纹章（装饰，aria-hidden） */
.pm-crest { width: 220px; height: 220px; margin-top: 18px; opacity: .55; pointer-events: none;
background: url("data:image/svg+xml;utf8,") center / contain no-repeat;
filter: drop-shadow(var(--pm-light-x) 4px 6px rgb(40 28 12 / .35)); }
/* 门厅三间房：每张卡顶部是那间房的墙面小样 + 房间主色签 */
.pm-roomcard__swatch { height: 64px; margin: -18px -18px 4px; border-radius: 11px 11px 0 0; position: relative; overflow: hidden;
background-size: 512px 512px; box-shadow: inset 0 -8px 12px -8px rgb(40 28 12 / .45); }
.pm-roomcard__swatch::after { content: attr(data-en); position: absolute; left: 14px; bottom: 10px; font: 600 10px/1 var(--pm-font-sans); letter-spacing: .2em; color: #F6EFDE;
background: var(--c); padding: 5px 8px; clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 50%, 100% 100%, 0 100%); padding-right: 14px; }
/* 作品卡：无封面时用类目扉画；画面四周一道烫金细框 */
.pm-workcard__art { position: relative; background-size: cover !important; background-position: center !important; }
.pm-workcard__art::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgb(211 180 116 / .55); border-radius: 4px; pointer-events: none;
box-shadow: inset 0 0 0 1px rgb(0 0 0 / .25); }
.pm-workcard { border-width: 5px; box-shadow: 0 0 0 1px rgb(168 137 79 / .35), var(--pm-e-object-night); }
.pm-workcard__plate { border-top: 1px solid rgb(168 137 79 / .6); }
/* 页面留白：页头上方 rhythm-5，区块之间 rhythm-5，组之间 rhythm-4 */
.pm-pagehead { padding: var(--pm-rhythm-5) 0 var(--pm-rhythm-4); }
.pm-section { margin-top: var(--pm-rhythm-5); padding-top: var(--pm-rhythm-3); }
.pm-sheet { padding: var(--pm-rhythm-5) var(--pm-rhythm-5) var(--pm-rhythm-5); }
@media (max-width: 899px) { .pm-sheet { padding: var(--pm-rhythm-4) var(--pm-rhythm-3); } .pm-pagehead { padding: var(--pm-rhythm-4) 0 var(--pm-rhythm-3); } }
/* Claude r4 source: demos/pm-house.css. */
/* =====================================================================
群相官网 · r3 “众相之馆”主题层（示范，非产品代码）
加载顺序：pm-design → pm-decor → pm-controls → pm-type → pm-house
主题（§2.5）：一座正在被一间间点亮的私人收藏馆；夜里锁一转，墙退去，外面是林地、冬海和月。
r3 与 r2 的分工：
· r2 的控件（铜牌、纸签、珐琅、凹槽、锁）原样保留，是“馆里的小物件”；
· r3 换掉“墙”和“承载体”：墙不再是纸色灰泥，而是石、胡桃木、天鹅绒、橡木；
内容不再一律放在纸上，而是放在每间房自己的招牌物件上（镜框 / 印 / 陈列格 / 信槽 / 门）；
· 羊皮纸（vellum）只用在“要读的字”上（DEC-W047）。
光：馆内只有一盏暖灯，在左上方（沿用 r2 的 --pm-light-x/y）；窗外只透进一点冷的月光（预示墙外）。
位图全部来自 tools/gen-house.py（程序生成，DEC-W041：只做装饰，不承载文字与点击）。
关闭：html.pm-tex-off 去掉全部位图与装饰件；html.pm-motion-off / prefers-reduced-motion 去掉全部环境动效。
===================================================================== */
/* ---------- 1. 令牌：墙上的字是浅色，读的面是深墨 ---------- */
:root {
--h-on: #F2EADA; /* 墙上的主文字（烛光下的象牙白）；对比度见 tools/texture-contrast-r3.txt */
--h-on-2: #DED2BA; /* 墙上的次要文字（墙上最低一级的文字色） */
--h-on-3: #DED2BA; /* r3 校验后并入 on-2：墙面有灯池，更暗的字在灯下不达标 */
--h-candle: 255 206 128; /* 烛光色（rgb 三元组，配 alpha 用） */
--h-moon: 168 214 222; /* 月光色 */
--h-vellum: #EADFC6; /* 羊皮纸均值 */
--h-vellum-edge: #C9B48C;
--h-bronze: linear-gradient(135deg, #8A6A3A 0%, #E2C78A 22%, #9C7B44 46%, #5E4520 70%, #B8975A 100%);
--h-gilt: linear-gradient(160deg, #F1DDA4 0%, #C9A866 30%, #7A5C2C 55%, #D3B474 78%, #6E5428 100%); /* 只给框（镜框、画框），不给带字的牌 */
--h-gilt-plate: linear-gradient(170deg, #F6E6B4 0%, #E2C78A 40%, #CDAE6C 75%, #BE9D5C 100%); /* 带字的铜牌：最暗处 #BE9D5C，与 #2A2116 对比 ≥ 6.5 */
--h-wall-img: url("../assets/house/stone.webp");
--h-wall-size: 512px 512px;
--h-wall-dim: rgb(22 18 14 / .64); /* 压暗层：决定墙的明度，墙上浅字对比度靠它 */
--pm-on-scene: var(--h-on);
--pm-on-scene-2: var(--h-on-2);
--pm-scene: #3B352E;
--pm-accent: #EBCB8E;
--h-accent-ink: #5E4526; /* 同一房间色在羊皮纸上的深色版 */
}
/* 房间：墙材、压暗、房间色（浅 = 墙上用，深 = 纸上用） */
[data-room="foyer"], [data-wall="foyer"] { --h-wall-img: url("../assets/house/stone.webp"); --h-wall-size: 800px 800px; --h-wall-dim: rgb(22 18 14 / .66); --pm-scene: #3E3830; --pm-accent: #EBCB8E; --h-accent-ink: #5E4526; }
[data-room="mirrors"], [data-wall="mirrors"] { --h-wall-img: url("../assets/house/velvet-green.webp"); --h-wall-size: 256px 256px; --h-wall-dim: rgb(8 16 12 / .30); --pm-scene: #1A3229; --pm-accent: #B4D4BA; --h-accent-ink: #2F4A3C; }
[data-room="seals"], [data-wall="seals"] { --h-wall-img: url("../assets/house/walnut.webp"); --h-wall-dim: rgb(20 12 6 / .46); --pm-scene: #33231A; --pm-accent: #9ACDBC; --h-accent-ink: #2A5248; }
[data-room="cabinet"] { --h-wall-img: url("../assets/house/walnut.webp"); --h-wall-dim: rgb(10 12 20 / .55); --pm-scene: #272226; --pm-accent: #B3CAEA; --h-accent-ink: #2C4662; }
[data-room="lodge"], [data-wall="lodge"] { --h-wall-img: url("../assets/house/stone.webp"); --h-wall-size: 640px 640px; --h-wall-dim: rgb(26 18 10 / .66); --pm-scene: #3D342A; --pm-accent: #F0C8A0; --h-accent-ink: #5F3F28; }
[data-room="reading"] { --h-wall-img: url("../assets/house/walnut.webp"); --h-wall-dim: rgb(16 14 8 / .58); --pm-scene: #2C251A; --pm-accent: #CFD6A6; --h-accent-ink: #3C4A36; }
[data-room="desk"] { --h-wall-img: url("../assets/house/oak.webp"); --h-wall-dim: rgb(14 16 18 / .70); --pm-scene: #2B2A27; --pm-accent: #C2D0D4; --h-accent-ink: #3A4246; }
/* ---------- 2. D0 墙：材质 + 压暗 + 灯池 + 暗角（一盏灯，左上） ---------- */
body.h-house { color: var(--h-on); background-color: var(--pm-scene); }
/* r4：墙画在固定的 body::before 上，不再用 body 的 background-attachment: fixed（四层固定背景在 Chromium 里每次滚动都要重绘）。
--h-unlit：还没点灯的房间更暗（TH-5 修复一座房子，house.js 按房里物件数算：.08 × (1 − min(n/24, 1))） */
body.h-house::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
background-color: var(--pm-scene);
background-image:
radial-gradient(ellipse 58% 46% at 18% -4%, rgb(var(--h-candle) / var(--h-lamp-peak, .20)), rgb(var(--h-candle) / calc(var(--h-lamp-peak, .20) / 3)) 45%, transparent 75%), /* 灯池：峰值 .20 封顶（墙上浅字的对比度由它决定） */
radial-gradient(ellipse 140% 100% at 40% 30%, transparent 45%, rgb(0 0 0 / .55) 100%), /* 暗角 */
linear-gradient(rgb(0 0 0 / var(--h-unlit, 0)), rgb(0 0 0 / var(--h-unlit, 0))), /* 还没点灯（TH-5） */
linear-gradient(var(--h-wall-dim), var(--h-wall-dim)),
var(--h-wall-img);
background-size: 100% 100%, 100% 100%, auto, auto, var(--h-wall-size); }
/* 墙脚：一条护墙踢脚（深木 + 铜线），让页面“落地” */
body.h-house::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 18px; pointer-events: none; z-index: 0;
background: linear-gradient(180deg, #A8894F 0 1px, #2A1D12 1px 3px, #3A2818 3px), url("../assets/house/walnut.webp") 0 0 / 512px 512px;
box-shadow: 0 -6px 14px rgb(0 0 0 / .45); opacity: .95; }
body.h-house main, body.h-house .pm-foot { position: relative; z-index: 1; }
body.h-house .pm-pagehead, body.h-house .pm-display { color: var(--h-on); }
body.h-house .pm-display { text-shadow: 0 2px 0 rgb(0 0 0 / .35), 0 0 28px rgb(var(--h-candle) / .18); }
body.h-house .pm-lede, body.h-house .pm-pagehead p { color: var(--h-on-2); }
:where(body.h-house) a:where(:not(.pm-btn)) { color: #E6C987; } /* 特异性 (0,0,1)：胜过基础 a，输给任何组件类（纸面、铭牌、名签里的链接用各自的颜色） */
body.h-house .pm-foot { background: linear-gradient(180deg, rgb(0 0 0 / .25), rgb(0 0 0 / .45)); border-top: 1px solid rgb(168 137 79 / .35); color: var(--h-on-2); padding-bottom: 34px; }
/* ---------- 3. D1 门楣：胡桃木檐口 + 齿饰 + 铜轨 ---------- */
body.h-house .pm-lintel {
background:
linear-gradient(180deg, rgb(255 230 180 / .06), transparent 40%, rgb(0 0 0 / .25)),
linear-gradient(rgb(18 10 6 / .5), rgb(18 10 6 / .5)),
url("../assets/house/walnut.webp") 0 0 / 512px 512px, #2A1C12;
box-shadow: 0 1px 0 #5E4520, 0 2px 0 #D3B474, 0 3px 0 #6E5428, 0 14px 22px -10px rgb(0 0 0 / .7);
position: relative;
}
/* 齿饰（dentil）：门楣下沿一排小方块，石作与木作的共同语汇 */
body.h-house .pm-lintel::after { content: ""; position: absolute; left: 0; right: 0; bottom: -11px; height: 8px; pointer-events: none;
background: repeating-linear-gradient(90deg, #3A2818 0 10px, transparent 10px 16px);
box-shadow: 0 1px 0 rgb(0 0 0 / .25); -webkit-mask-image: linear-gradient(180deg, #000 0 7px, transparent 7px); }
body.h-house .pm-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--pm-accent); }
/* ---------- 4. 羊皮纸：只给“要读的字” ---------- */
.h-vellum { position: relative; color: var(--pm-ink); padding: var(--pm-s-6); border-radius: 3px;
--pm-on-scene: var(--pm-ink); --pm-on-scene-2: var(--pm-ink-2); --pm-accent: var(--h-accent-ink);
background-color: var(--h-vellum);
background-image:
radial-gradient(ellipse 70% 60% at 22% 0%, rgb(var(--h-candle) / .22), transparent 70%), /* 灯照在纸上，左上更亮 */
url("../assets/decor/foxing.png"), url("../assets/decor/paper-night.webp");
background-size: 100% 100%, 100% 100%, 512px 512px;
box-shadow: inset 0 0 0 1px rgb(255 250 236 / .35), inset 0 0 38px rgb(110 76 30 / .28), inset 0 -18px 30px -18px rgb(110 76 30 / .35),
var(--pm-light-x) 22px 36px -18px rgb(0 0 0 / .75), 0 2px 3px rgb(0 0 0 / .4); }
.h-vellum a:not(.pm-btn), .h-plaque a:not(.pm-btn) { color: var(--pm-link); }
/* 两枚铜图钉把纸钉在墙上（装饰） */
.h-vellum::before, .h-vellum::after { content: ""; position: absolute; top: 12px; width: 12px; height: 12px; border-radius: 50%; pointer-events: none;
background: radial-gradient(circle at 35% 30%, #F8E8B8, #C9A866 45%, #5E4520 90%); box-shadow: 1px 3px 3px rgb(0 0 0 / .45); }
.h-vellum::before { left: 14px; } .h-vellum::after { right: 14px; }
.h-vellum .pm-tab { background: var(--h-accent-ink); }
.h-vellum h2, .h-vellum h3 { color: var(--pm-ink); }
/* ---------- 5. 铭牌：青铜框 + 羊皮纸芯 + 四颗螺钉（版本、站务提示） ---------- */
.h-plaque { position: relative; padding: 12px; border-radius: 6px; background: var(--h-bronze); color: var(--pm-ink);
box-shadow: inset 0 1px 0 rgb(255 240 200 / .6), inset 0 -1px 0 rgb(40 26 8 / .6), var(--pm-light-x) 18px 30px -14px rgb(0 0 0 / .8), 0 2px 2px rgb(0 0 0 / .5); }
.h-plaque__in { position: relative; padding: 24px 26px 22px; border-radius: 3px; --pm-on-scene: var(--pm-ink); --pm-on-scene-2: var(--pm-ink-2); --pm-accent: var(--h-accent-ink);
background: radial-gradient(ellipse 80% 60% at 20% 0%, rgb(var(--h-candle) / .25), transparent 70%), url("../assets/decor/paper-night.webp") 0 0 / 512px 512px, var(--h-vellum);
box-shadow: inset 0 0 0 1px #5E4520, inset 0 0 0 3px rgb(241 221 164 / .55), inset 0 0 0 4px #6E5428, inset 0 4px 14px rgb(60 40 10 / .35); }
.h-plaque__screw { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F1DDA4, #8A6C3A 70%); box-shadow: 0 1px 1px rgb(0 0 0 / .5); }
.h-plaque__screw::after { content: ""; position: absolute; left: 1px; right: 1px; top: 4px; height: 1px; background: #4A3618; transform: rotate(var(--r, 30deg)); }
.h-plaque__screw:nth-of-type(1) { left: 2px; top: 2px; } .h-plaque__screw:nth-of-type(2) { right: 2px; top: 2px; --r: -20deg; }
.h-plaque__screw:nth-of-type(3) { left: 2px; bottom: 2px; --r: 70deg; } .h-plaque__screw:nth-of-type(4) { right: 2px; bottom: 2px; --r: 10deg; }
.h-plaque__title { display: block; text-align: center; font: 600 11px/1 var(--pm-font-sans); letter-spacing: .3em; color: var(--h-accent-ink); margin-bottom: 14px; }
.h-plaque__title::before, .h-plaque__title::after { content: "◆"; font-size: 7px; vertical-align: 2px; margin: 0 10px; color: #A8894F; }
/* ---------- 6. 主动作“印钮”：铜牌左端嵌一枚圆印（下载） ---------- */
.pm-btn--primary.h-sealbtn { padding-left: 6px; gap: 12px; }
.h-sealbtn__seal { position: relative; z-index: 1; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #3A2A12;
background: radial-gradient(circle at 38% 32%, #FFF0C4, #D9BA78 40%, #9A7A42 75%, #6E5428);
box-shadow: inset 0 0 0 2px rgb(94 69 32 / .55), inset 0 0 0 4px rgb(255 240 200 / .35), 0 1px 2px rgb(40 28 12 / .5); }
.h-sealbtn__seal::before { content: ""; position: absolute; inset: 3px; border-radius: 50%;
background: repeating-conic-gradient(rgb(94 69 32 / .35) 0 4deg, transparent 4deg 12deg); -webkit-mask: radial-gradient(circle, transparent 11px, #000 11.5px); mask: radial-gradient(circle, transparent 11px, #000 11.5px); }
.h-sealbtn__seal svg { width: 16px; height: 16px; }
.pm-btn--lg.h-sealbtn .h-sealbtn__seal { width: 40px; height: 40px; }
.pm-btn--lg.h-sealbtn .h-sealbtn__seal::before { -webkit-mask: radial-gradient(circle, transparent 13px, #000 13.5px); mask: radial-gradient(circle, transparent 13px, #000 13.5px); }
.pm-btn--primary.h-sealbtn:active .h-sealbtn__seal { transform: translateY(1px) scale(.97); }
/* 墙上的次动作：深色木签（纸签在深墙上太亮，改成嵌铜边的乌木签） */
body.h-house .h-onwall .pm-btn:not(.pm-btn--primary):not(.pm-btn--quiet):not(.pm-btn--danger):not(.pm-btn--ghost) {
color: var(--h-on); background: linear-gradient(180deg, rgb(255 240 210 / .08), rgb(0 0 0 / .15)), url("../assets/house/walnut.webp") 0 0 / 256px 256px, #2E2016;
border: 1px solid #8A6C3A; box-shadow: inset 0 1px 0 rgb(255 230 180 / .18), inset 0 0 0 3px rgb(0 0 0 / .25), 0 8px 14px -8px rgb(0 0 0 / .7); }
body.h-house .h-onwall .pm-btn:not(.pm-btn--primary):not(.pm-btn--quiet):not(.pm-btn--danger):not(.pm-btn--ghost)::before { border-color: rgb(211 180 116 / .35); }
body.h-house .h-onwall .pm-btn:not(.pm-btn--primary):not(.pm-btn--quiet):not(.pm-btn--danger):not(.pm-btn--ghost):hover { border-color: #D3B474; box-shadow: inset 0 1px 0 rgb(255 230 180 / .25), 0 0 0 1px rgb(211 180 116 / .35), 0 10px 18px -8px rgb(0 0 0 / .75); }
/* ---------- 7. 门厅：拱窗（月光从窗外来） ---------- */
.h-window { position: relative; aspect-ratio: 2 / 3; width: min(100%, 340px); justify-self: end; pointer-events: none;
background: url("../assets/house/window.png") center / contain no-repeat;
filter: drop-shadow(var(--pm-light-x) 18px 24px rgb(0 0 0 / .65)); }
.h-window::before { content: ""; position: absolute; inset: 8% 10% 4%; border-radius: 50% 50% 0 0 / 34% 34% 0 0; z-index: -1;
background: radial-gradient(ellipse 60% 50% at 50% 30%, rgb(var(--h-moon) / .45), transparent 70%); filter: blur(14px); }
/* 窗下的月光落在墙上（冷，很淡，只在窗下） */
.h-window::after { content: ""; position: absolute; left: -10%; right: -10%; top: 96%; height: 46%;
background: radial-gradient(ellipse 50% 60% at 50% 0%, rgb(var(--h-moon) / .14), transparent 70%); }
/* ---------- 8. 门洞卡（门厅的三间房）：石拱 + 门里是那间房的材质 + 门槛铜牌 ---------- */
.h-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pm-s-6); }
.h-door { position: relative; display: grid; grid-template-rows: auto auto; text-decoration: none; color: var(--h-on); }
.h-door__arch { position: relative; aspect-ratio: 3 / 4; padding: 14px 14px 0;
border-radius: 999px 999px 4px 4px / 999px 999px 4px 4px;
background: linear-gradient(rgb(30 24 18 / .25), rgb(30 24 18 / .25)), url("../assets/house/stone.webp") 0 0 / 256px 256px, #6B6358;
box-shadow: inset 0 2px 0 rgb(255 240 210 / .25), inset 0 -2px 6px rgb(0 0 0 / .4), var(--pm-light-x) 16px 26px -14px rgb(0 0 0 / .8); }
/* 拱石（voussoir）：只在拱圈（起拱线以上、外缘 14px 宽）画放射状石缝。
卡片宽 W、高 4W/3，拱心在 (50%, 37.5%)，半径 = closest-side = W/2。 */
.h-door__arch::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background: repeating-conic-gradient(from -90deg at 50% 37.5%, transparent 0 14deg, rgb(20 16 12 / .6) 14deg 15deg);
-webkit-mask: radial-gradient(circle closest-side at 50% 37.5%, transparent calc(100% - 14px), #000 calc(100% - 13px)), linear-gradient(#000 0 37.5%, transparent 37.5%);
-webkit-mask-composite: source-in; mask: radial-gradient(circle closest-side at 50% 37.5%, transparent calc(100% - 14px), #000 calc(100% - 13px)) intersect, linear-gradient(#000 0 37.5%, transparent 37.5%); }
/* 拱顶石 */
.h-door__arch::after { content: ""; position: absolute; left: 50%; top: -2px; width: 22px; height: 26px; margin-left: -11px; pointer-events: none;
clip-path: polygon(0 0, 100% 0, 78% 100%, 22% 100%);
background: linear-gradient(180deg, #9A9082, #6B6358); box-shadow: inset 0 1px 0 rgb(255 255 255 / .2); }
.h-door__room { position: relative; display: block; height: 100%; overflow: hidden; border-radius: 999px 999px 0 0 / 999px 999px 0 0;
background: var(--room-img) 0 0 / var(--room-size, 256px 256px), var(--room-c, #2A2016);
box-shadow: inset 0 0 0 2px rgb(0 0 0 / .45), inset 0 10px 30px rgb(0 0 0 / .65); }
/* 门里亮着一盏灯：越靠里越暗，灯在深处 */
.h-door__room::before { content: ""; position: absolute; inset: 0;
background: radial-gradient(ellipse 50% 34% at 50% 62%, rgb(var(--h-candle) / .42), rgb(var(--h-candle) / .10) 60%, transparent 80%),
linear-gradient(180deg, rgb(0 0 0 / .45), transparent 40%, rgb(0 0 0 / .35)); transition: opacity var(--pm-t-room, 240ms); }
.h-door__room::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: 0; height: 18%;
background: linear-gradient(180deg, transparent, rgb(var(--h-candle) / .14)); }
.h-door__glyph { position: absolute; left: 50%; top: 58%; width: 54px; height: 54px; transform: translate(-50%, -50%); color: rgb(var(--h-candle) / .9);
filter: drop-shadow(0 0 10px rgb(var(--h-candle) / .55)); transition: transform var(--pm-t-move, 260ms) var(--pm-ease-out); }
.h-door__sill { display: grid; gap: 6px; justify-items: center; padding: 14px 10px 0; text-align: center; }
.h-door__plate { display: inline-block; padding: 6px 16px 7px; border-radius: 3px; background: var(--h-gilt-plate); color: #2A2116;
font: 600 1.0625rem/1.2 var(--pm-font-serif); box-shadow: inset 0 0 0 1px rgb(255 248 220 / .45), 0 1px 0 #3A2A12, 0 6px 10px -6px rgb(0 0 0 / .8); text-shadow: 0 1px 0 rgb(255 240 200 / .4); }
.h-door__en { font: 600 10px/1 var(--pm-font-sans); letter-spacing: .24em; color: var(--h-on-3); }
.h-door__desc { font-size: var(--pm-fs-sm); color: var(--h-on-2); line-height: 1.6; max-width: 18em; }
.h-door::after { content: ""; position: absolute; inset: 0; } /* 整张卡可点：链接是门牌 */
.h-door:hover .h-door__room::before, .h-door:focus-visible .h-door__room::before { opacity: 1; background: radial-gradient(ellipse 60% 44% at 50% 62%, rgb(var(--h-candle) / .58), rgb(var(--h-candle) / .14) 60%, transparent 85%), linear-gradient(180deg, rgb(0 0 0 / .35), transparent 40%, rgb(0 0 0 / .3)); }
.h-door:hover .h-door__glyph { transform: translate(-50%, -54%) scale(1.04); }
.h-door:focus-visible { outline: none; }
.h-door:focus-visible .h-door__arch { outline: 2px solid var(--pm-focus-out, #E8C878); outline-offset: 4px; }
/* ---------- 9. 镜廊：镜框（人设） ---------- */
.h-rail { position: relative; height: 10px; margin: 0 -8px 28px; border-radius: 3px;
background: linear-gradient(180deg, #F1DDA4, #A8894F 45%, #5E4520); box-shadow: 0 4px 8px rgb(0 0 0 / .55); }
.h-mirrors { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 48px 32px; }
.h-mirror { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 34px; color: var(--pm-ink); }
/* 挂绳：两根斜线汇到挂钉 */
.h-mirror::before { content: ""; position: absolute; left: 50%; top: 0; width: 64%; height: 40px; transform: translateX(-50%); pointer-events: none;
background: linear-gradient(to top right, transparent calc(50% - 1px), #2A1E12 calc(50% - 1px) calc(50% + .5px), rgb(241 221 164 / .5) calc(50% + .5px) calc(50% + 1px), transparent calc(50% + 1px)) left / 50% 100% no-repeat,
linear-gradient(to top left, transparent calc(50% - 1px), #2A1E12 calc(50% - 1px) calc(50% + .5px), rgb(241 221 164 / .5) calc(50% + .5px) calc(50% + 1px), transparent calc(50% + 1px)) right / 50% 100% no-repeat; }
.h-mirror::after { content: ""; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; pointer-events: none;
background: radial-gradient(circle at 35% 30%, #F1DDA4, #6E5428); box-shadow: 0 2px 2px rgb(0 0 0 / .6); }
.h-mirror__frame { position: relative; padding: 12px; border-radius: 999px 999px 8px 8px / 999px 999px 8px 8px; background: var(--h-gilt);
box-shadow: inset 0 0 0 1px rgb(255 248 220 / .5), inset 0 0 0 4px rgb(110 84 40 / .55), inset 0 0 0 5px rgb(255 240 200 / .4),
var(--pm-light-x) 20px 30px -16px rgb(0 0 0 / .85), 0 2px 3px rgb(0 0 0 / .45);
transition: transform var(--pm-t-move, 260ms) var(--pm-ease-out), box-shadow var(--pm-t-move, 260ms) var(--pm-ease-out); transform-origin: 50% -34px; }
/* 镜面：银色、略带青，左上一道斜光；中间浮着这张脸的“相”（字形） */
.h-mirror__glass { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 999px 999px 3px 3px / 999px 999px 3px 3px; display: grid; place-items: center;
background:
linear-gradient(115deg, transparent 22%, rgb(255 255 255 / .22) 30%, rgb(255 255 255 / .05) 38%, transparent 44%),
radial-gradient(ellipse 70% 60% at 30% 22%, #C8D2CE, #8E9C98 45%, #4D5A58 85%, #36403F);
box-shadow: inset 0 0 0 1px rgb(0 0 0 / .5), inset 0 0 24px rgb(0 0 0 / .45); }
/* 镜子的老化：边缘一圈脱银的暗斑（装饰） */
.h-mirror__glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background: radial-gradient(ellipse 52% 50% at 50% 50%, transparent 70%, rgb(40 36 30 / .42) 100%), url("../assets/decor/foxing.png") center / cover; mix-blend-mode: multiply; opacity: .8; }
.h-mirror__face { font: 600 3.6rem/1 var(--pm-font-serif); color: rgb(30 36 36 / .55); text-shadow: 0 1px 0 rgb(255 255 255 / .35), 0 0 18px rgb(255 255 255 / .25);
transform: translateY(-4%); transition: transform var(--pm-t-move, 260ms) var(--pm-ease-out), opacity var(--pm-t-move, 260ms); }
.h-mirror__glint { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgb(255 255 255 / .38) 48%, transparent 56%);
transform: translateX(-120%); }
.h-mirror:hover .h-mirror__glint { animation: h-glint 900ms var(--pm-ease-out) 1; }
.h-mirror:hover .h-mirror__frame { transform: rotate(-.8deg); box-shadow: inset 0 0 0 1px rgb(255 248 220 / .5), inset 0 0 0 4px rgb(110 84 40 / .55), inset 0 0 0 5px rgb(255 240 200 / .4), calc(var(--pm-light-x) * 1.6) 28px 38px -16px rgb(0 0 0 / .9), 0 2px 3px rgb(0 0 0 / .45); }
.h-mirror:hover .h-mirror__face { transform: translateY(-6%) scale(1.03); }
/* 铭牌：钉在框下沿的黄铜小牌，写名字 */
/* r4 点击区：链接本身 position: static，它的 ::after 以整件物件（.h-mirror，position: relative）为包含块，inset: 0 就盖住整面镜子；
铜牌的外观画在里面的 上（z-index 2，盖在框上）。镜下小卡 pointer-events: none，只有里面的按钮与标签能单独点。 */
.h-mirror__name { position: static; justify-self: center; margin-top: -16px; color: #2A2116; text-decoration: none; }
.h-mirror__name > span { position: relative; z-index: 2; display: inline-block; padding: 5px 16px 6px; border-radius: 3px; background: var(--h-gilt-plate);
font: 600 1.0625rem/1.25 var(--pm-font-serif); text-shadow: 0 1px 0 rgb(255 240 200 / .45);
box-shadow: inset 0 0 0 1px rgb(255 248 220 / .45), 0 1px 0 #3A2A12, 0 6px 10px -6px rgb(0 0 0 / .8); }
.h-mirror__name::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.h-mirror__name:focus-visible { outline: none; }
.h-mirror__name:focus-visible > span { outline: 2px solid #1A1206; outline-offset: 0; box-shadow: 0 0 0 4px #E8C878, 0 6px 10px -6px rgb(0 0 0 / .8); } /* 双圈：铜牌上单圈金色只有 1.3:1 */
/* 镜框下面别着一张羊皮纸小卡：介绍 + 标签 + 复制 */
.h-mirror__card { position: relative; margin: 10px 10px 0; padding: 14px 14px 12px; border-radius: 2px; transform: rotate(var(--tilt, .4deg));
background: radial-gradient(ellipse 80% 70% at 20% 0%, rgb(var(--h-candle) / .2), transparent 70%), url("../assets/decor/paper-night.webp") 0 0 / 512px 512px, var(--h-vellum);
box-shadow: inset 0 0 22px rgb(110 76 30 / .25), 2px 12px 18px -10px rgb(0 0 0 / .8); }
.h-mirror__card p { font-size: var(--pm-fs-sm); line-height: 1.65; color: var(--pm-ink-2); margin: 0 0 10px; }
.h-mirror__card { pointer-events: none; z-index: 2; } /* 叠在镜子的整卡点击层（z 1）之上；自身不接收点击，点击穿过去落到链接上 */
.h-mirror__card button, .h-mirror__card a, .h-mirror__card .pm-chip, .h-mirror__card input { pointer-events: auto; position: relative; z-index: 2; }
.h-mirror__card .pm-chips { position: relative; z-index: 2; }
.h-mirror__foot { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; font: 12px var(--pm-font-mono); color: var(--pm-ink-3); }
.h-mirror:nth-child(3n+2) { --tilt: -.6deg; } .h-mirror:nth-child(3n) { --tilt: .9deg; }
/* ---------- 10. 印室：抽屉格 + 铜印（skill） ---------- */
.h-drawer { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 0; padding: 14px; border-radius: 6px;
background: linear-gradient(rgb(20 12 6 / .35), rgb(20 12 6 / .35)), url("../assets/house/walnut.webp") 0 0 / 512px 512px, #3A2818;
box-shadow: inset 0 1px 0 rgb(255 220 170 / .2), inset 0 0 0 2px rgb(0 0 0 / .35), var(--pm-light-x) 24px 40px -20px rgb(0 0 0 / .85); }
.h-cell { position: relative; display: grid; justify-items: center; gap: 10px; padding: 22px 14px 16px; margin: 6px; border-radius: 3px;
background: radial-gradient(ellipse 70% 55% at 50% 38%, rgb(255 255 255 / .06), transparent 70%), url("../assets/house/velvet-teal.webp") 0 0 / 256px 256px, #1E4642;
box-shadow: inset 0 3px 8px rgb(0 0 0 / .7), inset 0 0 0 1px rgb(0 0 0 / .5), 0 1px 0 rgb(255 220 170 / .15); }
.h-seal { position: relative; width: 108px; height: 108px; border-radius: 50%; display: grid; place-items: center; color: #3A2A12;
background:
radial-gradient(circle at 36% 30%, rgb(255 244 210 / .75), transparent 32%),
repeating-conic-gradient(from 0deg, rgb(94 69 32 / .55) 0 2deg, transparent 2deg 6deg),
radial-gradient(circle, #D9BA78 0 58%, #A8894F 59% 66%, #E2C78A 67% 70%, #6E5428 71% 100%);
box-shadow: inset 0 0 0 1px #4A3618, inset 0 -3px 6px rgb(40 26 8 / .55), 0 0 0 3px rgb(0 0 0 / .25), var(--pm-light-x) 10px 14px -4px rgb(0 0 0 / .8);
transition: transform var(--pm-t-move, 260ms) var(--pm-ease-out), box-shadow var(--pm-t-move, 260ms); }
/* 印面：凹刻的几何符印（SVG 由 seal-sigil.js 按资源 id 生成，见 §4.4.3） */
.h-seal__face { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
background: radial-gradient(circle at 40% 35%, #C9A866, #9A7A42 70%); box-shadow: inset 0 2px 4px rgb(40 26 8 / .65), 0 1px 0 rgb(255 240 200 / .4); }
.h-seal__face svg { width: 46px; height: 46px; stroke: #3A2A12; fill: none; stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 1px 0 rgb(255 240 200 / .45)); }
.h-cell:hover .h-seal { transform: translateY(-3px) rotate(-6deg); box-shadow: inset 0 0 0 1px #4A3618, inset 0 -3px 6px rgb(40 26 8 / .55), 0 0 0 3px rgb(0 0 0 / .25), calc(var(--pm-light-x) * 1.6) 18px 20px -6px rgb(0 0 0 / .85); }
/* 名签：象牙签插在铜签夹里 */
.h-label { position: static; display: block; min-width: 72%; color: #221D17; text-decoration: none; }
.h-label > span { position: relative; z-index: 2; display: block; padding: 6px 14px 7px; text-align: center; border-radius: 2px;
font: 600 .9375rem/1.3 var(--pm-font-serif); background: linear-gradient(180deg, #F3EBD6, #E2D5B8);
box-shadow: 0 0 0 2px #8A6C3A, 0 0 0 3px #3A2A12, inset 0 1px 0 #FFF8E6, 0 6px 8px -4px rgb(0 0 0 / .7); }
.h-label::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* 包含块是 .h-cell：整格可点 */
.h-label:focus-visible { outline: none; }
.h-label:focus-visible > span { outline: 2px solid #1A1206; box-shadow: 0 0 0 4px #E8C878, 0 6px 8px -4px rgb(0 0 0 / .7); }
.h-cell__meta { font-size: 12px; color: #BFD6CF; text-align: center; line-height: 1.5; }
.h-cell__meta b { color: #E7F0EC; font-weight: 600; }
/* ---------- 11. 器物柜：玻璃陈列格（工具） ---------- */
.h-vitrines { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.h-vitrine { position: relative; padding: 10px; border-radius: 4px; color: var(--h-on);
background: linear-gradient(rgb(10 8 6 / .3), rgb(10 8 6 / .3)), url("../assets/house/walnut.webp") 0 0 / 256px 256px, #2E2016;
box-shadow: inset 0 1px 0 rgb(255 220 170 / .2), var(--pm-light-x) 20px 30px -16px rgb(0 0 0 / .85); }
.h-vitrine__case { position: relative; aspect-ratio: 5 / 4; display: grid; place-items: center; overflow: hidden; border-radius: 2px;
background: radial-gradient(ellipse 60% 40% at 50% 92%, rgb(var(--h-candle) / .22), transparent 70%), url("../assets/house/velvet-ink.webp") 0 0 / 256px 256px, #1C2840;
box-shadow: inset 0 0 0 1px rgb(0 0 0 / .6), inset 0 8px 18px rgb(0 0 0 / .6); }
/* 玻璃：一层极淡的青、左上的反光、一道会扫过的高光 */
.h-vitrine__case::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
background: linear-gradient(135deg, rgb(200 230 235 / .16), transparent 40%), linear-gradient(180deg, rgb(255 255 255 / .1), transparent 18%);
box-shadow: inset 0 0 0 1px rgb(220 240 245 / .25); }
.h-vitrine__case::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 30%; z-index: 3; pointer-events: none;
background: linear-gradient(90deg, transparent, rgb(255 255 255 / .22), transparent); transform: translateX(-200%) skewX(-18deg); }
.h-vitrine:hover .h-vitrine__case::after { animation: h-vitrine-glint 1000ms var(--pm-ease-out) 1; }
/* 器物：铜质图标放在小底座上 */
.h-object { position: relative; z-index: 1; display: grid; justify-items: center; gap: 0; }
.h-object svg { width: 56px; height: 56px; color: #D9BA78; filter: drop-shadow(0 2px 0 #5E4520) drop-shadow(2px 8px 6px rgb(0 0 0 / .7)); }
.h-object::after { content: ""; width: 74px; height: 10px; margin-top: 6px; border-radius: 50%; background: radial-gradient(ellipse, #6E5428, #3A2A12 70%); box-shadow: 0 4px 6px rgb(0 0 0 / .6); }
.h-vitrine__label { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 6px 4px; }
.h-vitrine__label a { color: var(--h-on); text-decoration: none; font: 600 1.0625rem/1.3 var(--pm-font-serif); }
.h-vitrine__label a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* 包含块是 .h-vitrine：整格可点 */
.h-vitrine__label a:focus-visible { outline: none; } .h-vitrine:focus-within { outline: 2px solid #E8C878; outline-offset: 3px; }
.h-vitrine__label p { font-size: 13px; color: var(--h-on-2); line-height: 1.6; margin: 0; }
.h-vitrine__tag { position: absolute; z-index: 4; right: 16px; top: 16px; padding: 3px 8px; border-radius: 2px; font: 600 11px/1.2 var(--pm-font-sans); letter-spacing: .06em;
color: #2A2116; background: var(--h-gilt-plate); box-shadow: 0 2px 3px rgb(0 0 0 / .6); }
/* ---------- 12. 收信处：橡木柜台 + 黄铜信槽 + 蜡封回执 ---------- */
.h-counter { position: relative; padding: 28px 28px 34px; border-radius: 6px 6px 3px 3px; color: var(--pm-ink);
background: linear-gradient(180deg, rgb(255 240 210 / .14), transparent 30%, rgb(40 20 6 / .25)), url("../assets/house/oak.webp") 0 0 / 512px 512px, #8E6A42;
box-shadow: inset 0 2px 0 rgb(255 240 210 / .35), inset 0 -6px 0 rgb(60 36 14 / .5), var(--pm-light-x) 26px 40px -20px rgb(0 0 0 / .9); }
/* 台面前沿的厚度 */
.h-counter::after { content: ""; position: absolute; left: -6px; right: -6px; bottom: -14px; height: 16px; border-radius: 0 0 4px 4px;
background: linear-gradient(180deg, #6A4A28, #3E2A16); box-shadow: 0 8px 14px rgb(0 0 0 / .6); }
.h-slot { position: relative; display: grid; justify-items: center; gap: 14px; padding: 26px 20px 22px; border-radius: 6px; text-align: center; color: var(--pm-ink);
background: radial-gradient(ellipse 80% 60% at 30% 0%, rgb(var(--h-candle) / .2), transparent 70%), url("../assets/decor/paper-night.webp") 0 0 / 512px 512px, var(--h-vellum);
box-shadow: inset 0 0 0 1px rgb(110 76 30 / .5), inset 0 0 26px rgb(110 76 30 / .25); }
/* 信槽本体：黄铜面板 + 一道深缝 + 会掀起的挡片 */
.h-slot__plate { position: relative; width: min(340px, 92%); height: 64px; border-radius: 8px; background: var(--h-bronze);
box-shadow: inset 0 1px 0 rgb(255 240 200 / .7), inset 0 -2px 0 rgb(40 26 8 / .55), 0 6px 10px -4px rgb(0 0 0 / .6); }
.h-slot__plate::before { content: ""; position: absolute; left: 14%; right: 14%; top: 24px; height: 14px; border-radius: 3px;
background: linear-gradient(180deg, #050403, #1A140C 70%, #3A2A12); box-shadow: inset 0 3px 4px #000, 0 1px 0 rgb(255 240 200 / .5); }
.h-slot__flap { position: absolute; left: 13%; right: 13%; top: 18px; height: 16px; border-radius: 3px 3px 2px 2px; transform-origin: 50% 0;
background: linear-gradient(180deg, #F1DDA4, #B8975A 60%, #7A5C2C); box-shadow: inset 0 1px 0 #FFF4D0, 0 3px 4px rgb(0 0 0 / .45);
transition: transform 220ms var(--pm-ease-out); }
.h-slot__flap::after { content: "POST"; position: absolute; inset: 0; display: grid; place-items: center; font: 700 8px/1 var(--pm-font-sans); letter-spacing: .4em; color: rgb(58 42 18 / .75); }
.h-slot[data-over="true"] .h-slot__flap, .h-slot:focus-within .h-slot__flap { transform: perspective(200px) rotateX(58deg); }
.h-slot[data-over="true"] .h-slot__plate::before { box-shadow: inset 0 3px 4px #000, 0 0 14px 3px rgb(var(--h-candle) / .7), 0 1px 0 rgb(255 240 200 / .5); }
.h-slot[data-over="true"] { box-shadow: inset 0 0 0 2px var(--pm-match), inset 0 0 26px rgb(15 111 124 / .2); }
.h-slot__hint { font-size: var(--pm-fs-sm); color: var(--pm-ink-2); max-width: 28em; }
/* 蜡封回执：一枚圆蜡印（铜绿蜡，代表“已收到”），按下动作见 WEB-M47 */
.h-wax { position: relative; width: 84px; height: 84px; display: grid; place-items: center; color: #CFE6DE;
border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%;
background: radial-gradient(circle at 36% 30%, #5E9C8C, #2A5E52 45%, #173A33 80%);
box-shadow: inset 0 0 0 6px rgb(0 0 0 / .12), inset 0 -4px 8px rgb(0 0 0 / .45), inset 0 3px 4px rgb(255 255 255 / .2), 2px 8px 10px -4px rgb(0 0 0 / .6); }
.h-wax::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; box-shadow: inset 0 2px 3px rgb(0 0 0 / .5), 0 1px 0 rgb(255 255 255 / .2); }
.h-wax svg { width: 34px; height: 34px; filter: drop-shadow(0 -1px 0 rgb(0 0 0 / .45)) drop-shadow(0 1px 0 rgb(255 255 255 / .25)); }
.h-receipt { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding: 18px 22px; border-radius: 3px;
background: url("../assets/decor/paper-manila.webp") 0 0 / 512px 512px, #E5D5B1; color: var(--pm-ink); box-shadow: inset 0 0 22px rgb(110 76 30 / .25), 2px 14px 20px -12px rgb(0 0 0 / .8); }
.h-receipt .pm-num { font-size: 1.25rem; letter-spacing: .06em; }
/* 收信处的取件牌（查询编号输入）：圆头铜牌，上面打孔挂绳 */
.h-claim { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 999px 10px 10px 999px; background: var(--h-bronze);
box-shadow: inset 0 1px 0 rgb(255 240 200 / .6), var(--pm-light-x) 12px 18px -10px rgb(0 0 0 / .8); }
.h-claim__hole { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle, #1A140C 40%, #6E5428 45%, #E2C78A 60%, #8A6C3A); box-shadow: inset 0 2px 3px #000; }
/* ---------- 13. 问书台：读经台 + 烛台 ---------- */
.h-lectern { position: relative; padding: 18px 18px 46px; border-radius: 8px 8px 2px 2px;
background: linear-gradient(180deg, rgb(255 230 180 / .1), rgb(0 0 0 / .3)), url("../assets/house/walnut.webp") 0 0 / 512px 512px, #3A2818;
box-shadow: inset 0 1px 0 rgb(255 220 170 / .2), var(--pm-light-x) 26px 40px -20px rgb(0 0 0 / .9); }
.h-lectern::after { content: ""; position: absolute; left: 50%; bottom: 10px; width: 46%; height: 18px; transform: translateX(-50%); border-radius: 2px;
background: linear-gradient(180deg, #E2C78A, #8A6C3A); box-shadow: 0 3px 4px rgb(0 0 0 / .6); } /* 台沿的铜书挡 */
.h-candle { position: absolute; width: 18px; height: 70px; pointer-events: none; }
.h-candle::before { content: ""; position: absolute; left: 4px; right: 4px; bottom: 0; height: 52px; border-radius: 3px 3px 2px 2px;
background: linear-gradient(90deg, #CDBA94, #F4E9CF 40%, #D8C7A2); box-shadow: inset 0 3px 3px rgb(255 255 255 / .5); }
.h-candle::after { content: ""; position: absolute; left: 50%; top: 0; width: 10px; height: 18px; margin-left: -5px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
background: radial-gradient(ellipse at 50% 72%, #FFF8E0, #FFD27A 45%, rgb(255 150 50 / .6) 75%, transparent 80%);
box-shadow: 0 0 22px 10px rgb(var(--h-candle) / .45), 0 0 60px 30px rgb(var(--h-candle) / .14); animation: h-flame 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
/* ---------- 14. 掌灯人案：皮面书桌 + 绿罩台灯 ---------- */
.h-desk { position: relative; padding: 22px; border-radius: 8px;
background: radial-gradient(ellipse 60% 50% at 12% 0%, rgb(var(--h-candle) / .22), transparent 70%), linear-gradient(rgb(0 0 0 / .25), rgb(0 0 0 / .25)), url("../assets/decor/wall-night-table.webp") 0 0 / 512px 512px, #24302C;
box-shadow: inset 0 0 0 2px #6E5428, inset 0 0 0 4px rgb(0 0 0 / .4), inset 0 0 0 5px rgb(211 180 116 / .35), inset 0 0 60px rgb(0 0 0 / .4), var(--pm-light-x) 26px 40px -20px rgb(0 0 0 / .9); }
.h-desk > .h-vellum { box-shadow: inset 0 0 0 1px rgb(255 250 236 / .35), inset 0 0 38px rgb(110 76 30 / .28), 2px 8px 14px -6px rgb(0 0 0 / .8); }
.h-desk > .h-vellum::before, .h-desk > .h-vellum::after { display: none; } /* 桌上的纸不用图钉 */
.h-bankerlamp { position: absolute; left: 18px; top: -38px; width: 120px; height: 44px; pointer-events: none;
background: radial-gradient(ellipse 50% 100% at 50% 100%, #2E6B4E, #1C4A35 60%, #0F2A1E); border-radius: 60px 60px 6px 6px / 44px 44px 6px 6px;
box-shadow: inset 0 2px 0 rgb(255 255 255 / .25), 0 6px 0 -3px #D3B474, 0 10px 30px 6px rgb(var(--h-candle) / .25); }
/* ---------- 15. 墙外（梦）：天幕 + 月 + 冬海 + 三层林 + 雾 ---------- */
html[data-state="dream"] body.h-house { background: #071013; color: #DCE7E5; }
html[data-state="dream"] body.h-house::after, html[data-state="dream"] body.h-house::before { display: none; }
.h-beyond { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.h-beyond > * { position: absolute; left: 0; right: 0; }
.h-beyond__sky { inset: 0; background: radial-gradient(ellipse 50% 40% at 70% 18%, rgb(var(--h-moon) / .18), transparent 70%), url("../assets/decor/night-sky.webp") center top / cover, #0A1518; }
.h-beyond__moon { left: auto; right: 22%; top: 11%; width: 76px; height: 76px; border-radius: 50%;
background: radial-gradient(circle at 40% 38%, #F4F6EE, #D6DED8 55%, #AFBDB8);
box-shadow: 0 0 40px 10px rgb(var(--h-moon) / .35), 0 0 140px 50px rgb(var(--h-moon) / .12); }
.h-beyond__moon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; /* 三片不规则的淡影（两个圆斑会读成眼睛） */
background: radial-gradient(ellipse 22% 16% at 62% 58%, rgb(120 140 136 / .22), transparent 70%), radial-gradient(ellipse 30% 20% at 36% 40%, rgb(120 140 136 / .16), transparent 70%), radial-gradient(ellipse 16% 24% at 48% 74%, rgb(120 140 136 / .14), transparent 70%); }
/* 冬海不漂移：sea.webp 的月光碎光在图块 50% 处，要钉在月亮正下方（月心 x = 78vw − 38px，图块 1400 宽 → 偏移 78vw − 738px）；上沿一道极淡的海平线 */
.h-beyond__sea { top: 46%; height: 30%; background: linear-gradient(180deg, rgb(var(--h-moon) / .22) 0 1px, rgb(var(--h-moon) / .06) 1px 8px, transparent 14px), url("../assets/house/sea.webp") calc(78vw - 738px) 0 / 1400px 100% repeat-x; }
/* 海面上的月光柱：位置跟着月亮（right 22% + 38px） */
/* 海面上的月光柱：一束软光，不要硬边条纹 */
.h-beyond__path { top: 46%; height: 30%; left: auto; right: calc(22% - 52px); width: 180px; filter: blur(5px);
background: linear-gradient(90deg, transparent, rgb(var(--h-moon) / .16) 35%, rgb(var(--h-moon) / .22) 50%, rgb(var(--h-moon) / .16) 65%, transparent);
-webkit-mask: linear-gradient(180deg, #000 0%, rgb(0 0 0 / .5) 45%, transparent 90%); mask: linear-gradient(180deg, #000 0%, rgb(0 0 0 / .5) 45%, transparent 90%); }
.h-beyond__far { bottom: 22%; height: 46%; background: url("../assets/house/forest-far.webp") 0 100% / auto 100% repeat-x; opacity: .9; }
.h-beyond__mid { bottom: 8%; height: 50%; background: url("../assets/house/forest-mid.webp") 0 100% / auto 100% repeat-x; }
.h-beyond__mist { bottom: 6%; height: 40%; background: url("../assets/house/mist.webp") 0 100% / 1600px 100% repeat-x; opacity: .55; animation: h-drift 90s linear infinite; }
.h-beyond__near { bottom: -2%; height: 58%; background: url("../assets/house/forest-near.webp") 0 100% / auto 100% repeat-x; }
.h-beyond__ground { bottom: 0; height: 10%; background: linear-gradient(180deg, transparent, #040809 60%); }
/* 鲸：只是一道剪影，偶尔从远海游过（WEB-DEL18），我们自己的形象 */
.h-whale { top: 52%; left: 0; width: 160px; height: 46px; right: auto; opacity: 0; color: #0B1A1E;
animation: h-whale 64s linear 6s infinite; }
.h-whale svg { width: 100%; height: 100%; }
/* 墙外的门（作品）：一扇立在林间的拱门，门里是光 */
.h-woodgate { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 56px 32px; }
.h-gate { position: relative; display: grid; gap: 14px; justify-items: center; text-align: center; color: #DCE7E5; text-decoration: none; }
.h-gate__arch { position: relative; width: 78%; aspect-ratio: 5 / 8; border-radius: 999px 999px 2px 2px / 999px 999px 2px 2px; padding: 9px 9px 0;
background: linear-gradient(180deg, #3F5556, #1D2C2E); box-shadow: inset 0 1px 0 rgb(var(--h-moon) / .45), 0 30px 40px -24px #000; }
.h-gate__light { position: relative; height: 100%; overflow: hidden; border-radius: 999px 999px 0 0 / 999px 999px 0 0;
background: radial-gradient(ellipse 70% 55% at 50% 72%, var(--gate-c, #CFEFF0), rgb(111 214 227 / .35) 55%, #0E2226 95%);
box-shadow: inset 0 0 30px rgb(0 0 0 / .55); transition: filter var(--pm-t-move, 260ms); }
/* 门里的远景：作品自己的封面（构造数据用渐变代替），被光冲淡 */
.h-gate__light::before { content: ""; position: absolute; inset: 0; background: var(--gate-art, none) center / cover; opacity: .35; mix-blend-mode: luminosity; }
.h-gate__light::after { content: ""; position: absolute; left: -40%; right: -40%; bottom: -8%; height: 34%; background: radial-gradient(ellipse at 50% 100%, rgb(var(--h-moon) / .55), transparent 70%); }
/* 门前地上的光：用门下的独立元素 .h-gate__spill（不再用 ::before 估算 top），颜色取作品的类目光 */
.h-gate__spill { position: relative; width: 110%; max-width: calc(100% + 24px); height: 34px; margin-top: -16px; pointer-events: none;
background: radial-gradient(ellipse 46% 50% at 50% 30%, rgb(var(--gate-rgb, 207 239 240) / .55), transparent 72%); filter: blur(2px); } /* --gate-rgb 由数据预先算好，不用 color-mix() */
.h-gate:hover .h-gate__light { filter: brightness(1.18) saturate(1.1); }
.h-gate__kind { font: 600 10px/1 var(--pm-font-sans); letter-spacing: .24em; color: #9FD8E8; }
.h-gate__title { font: 600 1.1875rem/1.35 var(--pm-font-serif); color: #EEF5F3; text-shadow: 0 2px 8px #000; }
.h-gate__desc { font-size: var(--pm-fs-sm); color: #B7CCCB; line-height: 1.6; max-width: 17em; text-shadow: 0 1px 4px #000; }
.h-gate:focus-visible { outline: none; } .h-gate:focus-visible .h-gate__arch { outline: 2px solid #9FE3EC; outline-offset: 5px; }
/* ---------- 16. 环境小物：飞蛾、雾散、墙退 ---------- */
/* 飞蛾：三只通用蛾形剪影绕着灯池慢慢飞（WEB-DEL19）；鼠标不能点到它们 */
.h-moths { position: fixed; left: 0; top: 0; width: 46vw; height: 40vh; pointer-events: none; z-index: 0; } /* r4：在墙与正文之间，不从标题上飞过 */
.h-moth { position: absolute; width: 14px; height: 10px; color: rgb(232 214 170 / .75); offset-rotate: auto 90deg; filter: drop-shadow(0 0 4px rgb(var(--h-candle) / .6)); }
.h-moth svg { width: 100%; height: 100%; animation: h-flutter 140ms ease-in-out infinite alternate; transform-origin: 50% 50%; }
.h-moth:nth-child(1) { offset-path: path("M 120 60 C 220 10, 340 90, 260 140 S 80 150, 120 60"); animation: h-orbit 11s linear infinite; }
.h-moth:nth-child(2) { offset-path: path("M 300 40 C 400 70, 380 160, 290 150 S 210 30, 300 40"); animation: h-orbit 14s linear -4s infinite; width: 11px; height: 8px; }
.h-moth:nth-child(3) { offset-path: path("M 60 120 C 140 60, 220 180, 160 200 S 20 170, 60 120"); animation: h-orbit 17s linear -9s infinite reverse; width: 9px; height: 7px; opacity: .7; }
/* 进场雾散（WEB-M45）：页面加载后 900ms 内雾从下往上淡出；只有第一次进入该房间时播放 */
.h-fog { position: fixed; inset: 0; z-index: 50; pointer-events: none;
background: url("../assets/house/mist.webp") 0 100% / 1600px 70% repeat-x, linear-gradient(180deg, rgb(200 210 210 / .0), rgb(200 210 210 / .35) 60%, rgb(210 218 216 / .6));
animation: h-fog-out 900ms var(--pm-ease-out) 120ms both; }
/* 墙退（WEB-M49）：入梦提交后，墙面向上方与两侧退开，墙外的层次自远而近显现 */
.h-wallaway { position: fixed; inset: 0; z-index: 40; pointer-events: none; display: grid; grid-template-columns: 1fr 1fr; }
.h-wallaway > i { background: linear-gradient(rgb(22 18 14 / .62), rgb(22 18 14 / .62)), url("../assets/house/stone.webp") 0 0 / 512px 512px, #3E3830; box-shadow: 0 0 60px rgb(0 0 0 / .8); }
.h-wallaway > i:first-child { animation: h-wall-l 1400ms cubic-bezier(.6, 0, .2, 1) 200ms both; }
.h-wallaway > i:last-child { animation: h-wall-r 1400ms cubic-bezier(.6, 0, .2, 1) 200ms both; }
html[data-wallaway="1"] .h-beyond__far { animation: h-rise 1200ms var(--pm-ease-out) 700ms both; }
html[data-wallaway="1"] .h-beyond__mid { animation: h-rise 1200ms var(--pm-ease-out) 850ms both; }
html[data-wallaway="1"] .h-beyond__near { animation: h-rise 1200ms var(--pm-ease-out) 1000ms both; }
html[data-wallaway="1"] main { animation: h-fade-up 700ms var(--pm-ease-out) 1300ms both; }
@keyframes h-glint { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes h-vitrine-glint { from { transform: translateX(-200%) skewX(-18deg); } to { transform: translateX(440%) skewX(-18deg); } } /* r4：只动 transform（MO-7） */
@keyframes h-flame { 0%, 100% { transform: scale(1, 1) rotate(-1deg); opacity: 1; } 30% { transform: scale(.96, 1.05) rotate(1.5deg); } 55% { transform: scale(1.03, .96) rotate(-.5deg); opacity: .94; } 80% { transform: scale(.98, 1.03) rotate(1deg); } }
/* MO-7 例外（写明）：雾带用 background-position 漂移。它是一个独立的 fixed 层，不触发布局，只重绘这一层；
低性能档（pm-motion-lite）和减少动效时静止。 */
@keyframes h-drift { from { background-position-x: 0; } to { background-position-x: -1400px; } }
@keyframes h-whale { 0% { transform: translateX(-200px); opacity: 0; } 4% { opacity: .85; } 40% { transform: translateX(110vw); opacity: .85; } 41%, 100% { transform: translateX(110vw); opacity: 0; } }
@keyframes h-orbit { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes h-flutter { from { transform: scaleX(1); } to { transform: scaleX(.35); } }
@keyframes h-fog-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-6%); } }
@keyframes h-wall-l { from { transform: none; opacity: 1; } to { transform: translateX(-70%) translateY(-8%); opacity: 0; } }
@keyframes h-wall-r { from { transform: none; opacity: 1; } to { transform: translateX(70%) translateY(-8%); opacity: 0; } }
@keyframes h-rise { from { transform: translateY(14%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes h-fade-up { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
/* 灯池的烛火呼吸（WEB-M46）：亮度变化 ≤ 3%，周期 5.4s，肉眼只觉得“灯是活的” */
@keyframes h-breathe { 0%, 100% { opacity: 1; } 40% { opacity: .97; } 70% { opacity: .985; } }
.h-lamp { position: fixed; left: 0; top: 0; width: 70vw; height: 60vh; pointer-events: none; z-index: 0;
background: radial-gradient(ellipse 60% 55% at 22% 0%, rgb(var(--h-candle) / .08), transparent 70%); animation: h-breathe 5.4s ease-in-out infinite; }
/* ---------- 17. 关闭：动效与纹理 ---------- */
@media (prefers-reduced-motion: reduce) {
.h-moths, .h-whale, .h-fog, .h-wallaway { display: none; }
.h-candle::after, .h-lamp, .h-beyond__mist { animation: none; }
html[data-wallaway="1"] .h-beyond > *, html[data-wallaway="1"] main { animation: none; }
.h-mirror:hover .h-mirror__glint, .h-vitrine:hover .h-vitrine__case::after { animation: none; }
.h-mirror__frame, .h-seal, .h-door__glyph, .h-mirror__face { transition: none; }
}
html.pm-motion-off .h-moths, html.pm-motion-off .h-whale, html.pm-motion-off .h-fog, html.pm-motion-off .h-wallaway { display: none; }
html.pm-motion-off .h-candle::after, html.pm-motion-off .h-lamp, html.pm-motion-off .h-beyond__mist { animation: none; }
html.pm-tex-off body.h-house::before, html.pm-tex-off body.h-house::after, html.pm-tex-off .h-vellum, html.pm-tex-off .h-plaque__in, html.pm-tex-off .h-drawer, html.pm-tex-off .h-cell, html.pm-tex-off .h-vitrine,
html.pm-tex-off .h-vitrine__case, html.pm-tex-off .h-counter, html.pm-tex-off .h-slot, html.pm-tex-off .h-lectern, html.pm-tex-off .h-door__arch, html.pm-tex-off .h-door__room,
html.pm-tex-off .h-mirror__card, html.pm-tex-off .h-receipt { background-image: none !important; }
html.pm-tex-off .h-window, html.pm-tex-off .h-moths, html.pm-tex-off .h-beyond > :not(.h-beyond__sky), html.pm-tex-off .h-lamp, html.pm-tex-off .h-fog { display: none; }
html.pm-tex-off .h-beyond__sky { background-image: none; }
/* ---------- 18. 窄屏 ---------- */
@media (max-width: 899px) {
.h-doors { grid-template-columns: 1fr; max-width: 320px; margin-inline: auto; }
.h-window { justify-self: center; width: min(70%, 260px); }
.h-moths { width: 80vw; }
.h-beyond__moon { right: 12%; width: 56px; height: 56px; }
.h-beyond__path { right: calc(12% - 32px); }
}
/* ---------- 19. r4：秘密只留一个不起眼的位置（DEC-W054） ----------
门厅尽头的“薄墙壁龛 + 大号暗锁”已删除（用户：太露）。入梦只剩门楣右端那枚小锁眼。
能被“观察”出来的线索只有三样，全都不写字：
① 锁眼里的月光（WEB-M56）：醒时门楣上唯一的冷光，约 11 秒一次极淡地亮一下；
② 蛾停锁眼（WEB-M57）：门厅里一只飞蛾偶尔离开灯池，落在锁眼上停一会儿（house.js，每会话至多一次）；
③ 门厅彩窗外透进的月光（§4.0.5）：墙里是灯，墙外还有东西。 */
html:not([data-state="dream"]) body.h-house .pm-lintel .pm-lock__rose .hole { animation: h-keyhole-moon 11s ease-in-out 4s infinite; }
@keyframes h-keyhole-moon { 0%, 82%, 100% { fill: #0A0806; } 90% { fill: #24383B; } }
html:not([data-state="dream"]) body.h-house .pm-lintel .pm-lock__link:hover .hole { animation: none; }
html:not([data-state="dream"]) body.h-house .pm-lock[data-phase="holding"] .hole { animation: none; }
.h-moth--visit { position: fixed; left: 0; top: 0; z-index: 80; width: 13px; height: 9px; pointer-events: none; color: rgb(232 214 170 / .85);
filter: drop-shadow(0 0 4px rgb(var(--h-candle) / .6)); will-change: transform; }
.h-moth--visit svg { width: 100%; height: 100%; animation: h-flutter 140ms ease-in-out infinite alternate; }
.h-moth--visit[data-rest] svg { animation-duration: 900ms; } /* 停下时翅膀慢慢开合 */
@media (prefers-reduced-motion: reduce) { html:not([data-state="dream"]) body.h-house .pm-lintel .pm-lock__rose .hole { animation: none; } .h-moth--visit { display: none; } }
html.pm-motion-off body.h-house .pm-lintel .pm-lock__rose .hole { animation: none; }
html.pm-motion-off .h-moth--visit { display: none; }
/* ---------- 20. 门洞里的房间暗示（只是轮廓，灯一亮才看得清） ---------- */
.h-door__room { background: var(--room-hint, none) 50% 46% / 78% auto no-repeat, var(--room-img) 0 0 / var(--room-size, 256px 256px), var(--room-c, #2A2016); }
.h-door--mirrors { --room-hint: url("data:image/svg+xml;utf8,"); }
.h-door--market { --room-hint: url("data:image/svg+xml;utf8,"); }
.h-door--lodge { --room-hint: url("data:image/svg+xml;utf8,"); }
.h-door__room::after { left: 8%; right: 8%; height: 16%; clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); }
.h-door { align-content: start; }
.h-door__glyph { top: 76%; width: 40px; height: 40px; }
/* ---------- 21. house.js 的配套：深夜灯暗一点（WEB-DEL17）；后台暂停（DEC-W052） ---------- */
html[data-hour="late"] body.h-house { --h-lamp-peak: .16; }
html.h-paused *, html.h-paused *::before, html.h-paused *::after { animation-play-state: paused !important; }
/* ---------- 22. r2 控件在深墙上的修正 ---------- */
/* 选中的行李签：r2 用 --pm-accent 填色 + 浅字；r3 的房间色在墙上是浅版，所以改用深版 */
body.h-house .pm-chip[aria-pressed="true"] { background-color: var(--h-accent-ink); }
/* ---------- 23. r3 公共修正（来自各房间示范的回报） ---------- */
/* 门楣暗锁的刻度环（140px）会伸出视口右缘：不许撑出横向滚动条。clip 只裁 x，不影响刻度环向下展开 */
body { overflow-x: hidden; } /* Safari 15.4 没有 overflow: clip：先用 hidden 兜底 */
html { overflow-x: clip; }
/* 墙外没有墙：门楣不再是胡桃木，只剩一道向下淡去的夜色檐影 */
html[data-state="dream"] body.h-house .pm-lintel { background: linear-gradient(180deg, rgb(4 10 12 / .92), rgb(4 10 12 / .55) 70%, rgb(4 10 12 / 0)); box-shadow: none; }
html[data-state="dream"] body.h-house .pm-lintel::after { display: none; }
html[data-state="dream"] body.h-house .pm-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 #9FE3EC; }
html[data-state="dream"] body.h-house .pm-lock__hint { color: #DCE7E5; }
/* 墙外文字背后的夜色：不是框，是一团向外淡去的暗 */
.h-scrim { position: relative; isolation: isolate; }
.h-scrim::before { content: ""; position: absolute; inset: -40px -80px; z-index: -1; pointer-events: none;
background: radial-gradient(ellipse 50% 50% at 40% 50%, rgb(3 9 11 / .62), rgb(3 9 11 / .3) 60%, transparent 78%); }
/* ---------- 24. html.pm-motion-off 与 prefers-reduced-motion 对齐（站内开关必须关得和系统设置一样干净） ---------- */
html.pm-motion-off .h-mirror:hover .h-mirror__glint, html.pm-motion-off .h-vitrine:hover .h-vitrine__case::after { animation: none; }
html.pm-motion-off[data-wallaway="1"] .h-beyond > *, html.pm-motion-off[data-wallaway="1"] main { animation: none; }
html.pm-motion-off .h-mirror__frame, html.pm-motion-off .h-seal, html.pm-motion-off .h-door__glyph, html.pm-motion-off .h-mirror__face { transition: none; }
/* ---------- 25. r4：从各房间提升上来的共用物件（任何房间都可以用；房间只写摆放位置与本地色） ---------- */
/* 挂镜线：每格自带一段铜轨（.h-railcell + .h-railcell__rail），左右伸出半个列距，任意列数下连成一条 */
.h-railcell { position: relative; }
.h-railcell .h-mirror { width: 100%; max-width: 288px; margin-inline: auto; padding-top: 46px; }
.h-railcell .h-mirror::before { top: 8px; height: 42px; }
.h-railcell .h-mirror::after { top: 2px; }
.h-railcell__rail { position: absolute; left: -16px; right: -16px; top: 0; height: 9px; margin: 0; border-radius: 0; z-index: 0; }
.h-railcell .h-mirror__glass { background:
radial-gradient(circle at 72% 80%, rgb(255 214 140 / .30) 0 1.5%, rgb(255 206 128 / .10) 5%, transparent 12%),
linear-gradient(115deg, transparent 22%, rgb(255 255 255 / .22) 30%, rgb(255 255 255 / .05) 38%, transparent 44%),
linear-gradient(180deg, transparent 52%, rgb(28 58 48 / .55) 80%, rgb(16 34 28 / .75)),
radial-gradient(ellipse 70% 60% at 30% 22%, #C8D2CE, #8E9C98 45%, #4D5A58 85%, #36403F); }
.h-railcell .h-mirror__face { color: rgb(22 30 30 / .62); font-size: 3.2rem; }
.h-railcell .h-mir-empty .h-mirror__glass { background: radial-gradient(ellipse 70% 60% at 50% 40%, #2A3836, #121A19 80%); }
/* 抽屉拉手签（.h-pull）：铜框 + 象牙签 + 杯形拉手；选中时签面浸房间色、拉手下沉 3px */
.h-pull { position: relative; display: grid; justify-items: center; gap: 0; padding: 0 0 14px; border: 0; background: none; cursor: pointer; font: inherit; color: #221D17; }
.h-pull__frame { display: block; min-width: 76px; padding: 3px; border-radius: 3px; background: var(--h-gilt-plate);
box-shadow: inset 0 0 0 1px #5E4520, 0 2px 0 rgb(0 0 0 / .35), 0 6px 8px -4px rgb(0 0 0 / .7); }
.h-pull__label { display: block; padding: 6px 12px 7px; border-radius: 1px; text-align: center; font: 600 14px/1.2 var(--pm-font-serif);
background: linear-gradient(180deg, #F6EFDC, #E4D8BC); box-shadow: inset 0 1px 2px rgb(60 40 10 / .35); color: #221D17; }
.h-pull::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 58%; height: 12px; transform: translateX(-50%); border-radius: 0 0 40px 40px / 0 0 12px 12px;
background: linear-gradient(180deg, #4A3618 0 2px, #E2C78A 2px, #A8894F 60%, #5E4520); box-shadow: 0 4px 5px -1px rgb(0 0 0 / .7); transition: transform 160ms var(--pm-ease-out); }
.h-pull:hover .h-pull__frame { box-shadow: inset 0 0 0 1px #5E4520, 0 0 0 2px rgb(241 221 164 / .4), 0 6px 10px -4px rgb(0 0 0 / .7); }
.h-pull[aria-pressed="true"] .h-pull__label { background: linear-gradient(180deg, #2F5D52, #234840); color: #F3E3B4; box-shadow: inset 0 2px 4px rgb(0 0 0 / .45); }
.h-pull[aria-pressed="true"]::after { transform: translate(-50%, 3px); }
.h-pull:focus-visible { outline: none; }
.h-pull:focus-visible .h-pull__frame { outline: 2px solid #F1DDA4; outline-offset: 3px; }
/* 玻璃页签（.h-glasstab）：磨砂玻璃 + 铜角夹；选中时背后亮起暖光 */
.h-glasstab { position: relative; height: 38px; padding: 0 18px; border-radius: 10px 10px 2px 2px; cursor: pointer; font: 600 14px/1 var(--pm-font-sans); color: var(--h-on);
background: linear-gradient(160deg, rgb(220 240 245 / .2), rgb(200 225 232 / .06) 50%, rgb(220 240 245 / .12)), rgb(28 40 64 / .55);
border: 1px solid rgb(220 240 245 / .35); box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), 0 6px 10px -6px rgb(0 0 0 / .8); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.h-glasstab::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
background: linear-gradient(#D3B474, #D3B474) left top / 7px 2px no-repeat, linear-gradient(#D3B474, #D3B474) left top / 2px 7px no-repeat,
linear-gradient(#D3B474, #D3B474) right top / 7px 2px no-repeat, linear-gradient(#D3B474, #D3B474) right top / 2px 7px no-repeat,
linear-gradient(#D3B474, #D3B474) left bottom / 7px 2px no-repeat, linear-gradient(#D3B474, #D3B474) left bottom / 2px 7px no-repeat,
linear-gradient(#D3B474, #D3B474) right bottom / 7px 2px no-repeat, linear-gradient(#D3B474, #D3B474) right bottom / 2px 7px no-repeat; }
.h-glasstab:hover { border-color: rgb(241 221 164 / .6); }
.h-glasstab[aria-pressed="true"] { color: #1C2840; border-color: #E2C78A;
background: radial-gradient(ellipse 80% 120% at 50% 100%, #FFF1CC, #F0D9A2 55%, #D9BC7E), #F0D9A2; box-shadow: inset 0 1px 0 #FFF8E6, 0 0 16px 2px rgb(255 206 128 / .35), 0 6px 10px -6px rgb(0 0 0 / .8); }
.h-glasstab:focus-visible { outline: 2px solid #F1DDA4; outline-offset: 3px; }
/* 票据格（.h-tray / .h-tickets / .h-ticket）：立在铜托盘里的齿孔票，原生 radio；选中升起 14px 并盖“收”字印 */
.h-tray { position: relative; padding: 0 10px 12px; margin-bottom: var(--pm-s-6); }
.h-tray::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; border-radius: 3px; pointer-events: none; z-index: 2; /* 铜票槽的前挡板 */
background: var(--h-gilt-plate, var(--h-gilt)); box-shadow: inset 0 1px 0 rgb(255 240 200 / .7), inset 0 -2px 0 rgb(40 26 8 / .5), 0 6px 10px -4px rgb(0 0 0 / .6); }
.h-tray__label { position: absolute; z-index: 3; left: 50%; bottom: 6px; transform: translateX(-50%); font: 700 9px/1 var(--pm-font-sans); letter-spacing: .4em; color: rgb(58 42 18 / .8); pointer-events: none; }
.h-tickets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; border: 0; margin: 0; padding: 0; }
.h-tickets legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.h-ticket { position: relative; display: block; cursor: pointer; padding-top: 14px; }
.h-ticket input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.h-ticket__body { position: relative; display: grid; gap: 4px; padding: 14px 14px 30px 30px; min-height: 120px; color: var(--pm-ink);
background: radial-gradient(ellipse 80% 60% at 20% 0%, rgb(var(--h-candle) / .18), transparent 70%), url("../assets/decor/paper-tag.webp") 0 0 / 512px 512px, #E6E3CD;
/* 两侧半圆缺口 + 左侧票根打孔线 */
-webkit-mask: radial-gradient(circle 8px at 0 42px, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 8px at 100% 42px, transparent 98%, #000) right / 51% 100% no-repeat;
mask: radial-gradient(circle 8px at 0 42px, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 8px at 100% 42px, transparent 98%, #000) right / 51% 100% no-repeat;
box-shadow: inset 0 0 0 1px rgb(94 69 32 / .35), inset 0 0 18px rgb(110 76 30 / .18);
transition: transform 220ms var(--pm-ease-out), filter 220ms; filter: drop-shadow(0 6px 6px rgb(0 0 0 / .45)); }
.h-ticket__body::before { content: ""; position: absolute; left: 20px; top: 8px; bottom: 8px; border-left: 1.5px dashed rgb(94 69 32 / .45); }
.h-ticket__no { position: absolute; left: 6px; top: 50px; font: 600 10px/1 var(--pm-font-mono); color: var(--pm-ink-3); writing-mode: vertical-rl; letter-spacing: .2em; }
.h-ticket b { font: 600 1.125rem/1.2 var(--pm-font-serif); }
.h-ticket small { font-size: 12px; color: var(--pm-ink-2); line-height: 1.5; }
.h-ticket__stamp { position: absolute; right: 10px; bottom: 8px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
font: 700 15px/1 var(--pm-font-serif); color: transparent; border: 1.5px dashed rgb(94 69 32 / .3); transform: rotate(-12deg); }
.h-ticket:hover .h-ticket__body { transform: translateY(-4px); }
.h-ticket input:checked + .h-ticket__body { transform: translateY(-14px); filter: drop-shadow(0 12px 10px rgb(0 0 0 / .55)); }
.h-ticket input:checked + .h-ticket__body .h-ticket__stamp { color: #7A3E1E; border: 2px solid #7A3E1E; box-shadow: inset 0 0 0 2px rgb(122 62 30 / .25); opacity: .85;
animation: h-ticket-stamp 260ms var(--pm-ease-out) both; }
.h-ticket input:focus-visible + .h-ticket__body { outline: 2px solid #1A1A1A; outline-offset: 3px; }
@keyframes h-ticket-stamp { from { transform: rotate(-12deg) scale(1.5); opacity: 0; } to { transform: rotate(-12deg) scale(1); opacity: .85; } }
/* 丝带书签（.h-ribbons a）：从沿上垂下的燕尾丝带；当前一条更长、鎏金 */
.h-ribbons { display: flex; gap: 10px; } /* 摆放位置由房间决定（rooms/desk.css） */
.h-ribbons a { position: relative; display: grid; place-items: start center; width: 64px; height: 50px; padding-top: 10px; text-decoration: none;
font: 600 13px/1 var(--pm-font-sans); color: #E7EEF0; letter-spacing: .08em;
clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
background: linear-gradient(90deg, rgb(255 255 255 / .1), transparent 30%, transparent 70%, rgb(0 0 0 / .2)), var(--rb, #34505A);
box-shadow: inset 0 6px 6px -4px rgb(0 0 0 / .5); transition: height 200ms var(--pm-ease-out); }
.h-ribbons a:nth-child(2) { --rb: #4A4A6A; }
.h-ribbons a:nth-child(3) { --rb: #4E5A3A; }
.h-ribbons a:nth-child(4) { --rb: #5A4632; }
.h-ribbons a:nth-child(5) { --rb: #3E4A52; }
.h-ribbons a:hover { height: 58px; }
.h-ribbons a[aria-current="page"] { height: 68px; color: #2A2116; background: linear-gradient(90deg, rgb(255 255 255 / .25), transparent 35%, transparent 70%, rgb(0 0 0 / .12)), var(--h-gilt-plate, var(--h-gilt)); }
.h-ribbons a:focus-visible { outline: none; filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 3px #E8C878); height: 64px; }
/* 账簿行（.h-ledger / .h-ledger__row）：横格 + 页边线 + 书脊；当前行下压一把铜尺 */
.h-ledger { position: relative; padding: 0 0 8px; border-radius: 2px 6px 6px 2px; color: var(--pm-ink);
background: repeating-linear-gradient(180deg, transparent 0 63px, rgb(44 70 98 / .22) 63px 64px) 0 42px / 100% calc(100% - 42px) no-repeat,
linear-gradient(90deg, transparent 0 42px, rgb(44 70 98 / .3) 42px 43px, transparent 43px 46px, rgb(44 70 98 / .3) 46px 47px, transparent 47px),
radial-gradient(ellipse 70% 40% at 15% 0%, rgb(var(--h-candle) / .2), transparent 70%), url("../assets/decor/paper-ledger.webp") 0 0 / 512px 512px, #E8E6D5;
box-shadow: inset 12px 0 18px -12px rgb(60 40 10 / .45), inset 0 0 30px rgb(110 76 30 / .18), 3px 10px 16px -8px rgb(0 0 0 / .8); }
.h-ledger::after { content: ""; position: absolute; left: -6px; top: 6px; bottom: 6px; width: 6px; border-radius: 3px 0 0 3px; background: linear-gradient(90deg, #1E2A2E, #3A4A50); }
.h-ledger__head { display: grid; grid-template-columns: 1fr auto; align-items: center; height: 42px; padding: 0 14px 0 58px; border-bottom: 1.5px solid rgb(44 70 98 / .5);
font: 600 11px/1 var(--pm-font-sans); letter-spacing: .14em; color: var(--pm-ink-2); }
a.h-ledger__row { position: relative; display: grid; grid-template-columns: 1fr; gap: 3px; align-content: center; height: 64px; padding: 0 14px 0 58px; color: var(--pm-ink); text-decoration: none; }
.h-ledger__row b { font: 600 15px/1.3 var(--pm-font-serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-ledger__row__meta { font-size: 12px; color: var(--pm-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-ledger__row__no { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font: 12px var(--pm-font-mono); color: var(--pm-ink-3); width: 26px; text-align: right; }
.h-ledger__row__flags { position: absolute; right: 12px; top: 10px; display: flex; gap: 4px; }
.h-ledger__row:hover { background: rgb(255 250 236 / .5); }
.h-ledger__row[aria-current="true"] { background: linear-gradient(90deg, rgb(var(--h-candle) / .22), rgb(255 250 236 / .3)); }
.h-ledger__row[aria-current="true"]::after { content: ""; position: absolute; left: 50px; right: 6px; bottom: -4px; height: 9px; border-radius: 1px; pointer-events: none; /* 铜尺 */
background: repeating-linear-gradient(90deg, rgb(58 42 18 / .55) 0 1px, transparent 1px 8px) 0 0 / 100% 4px no-repeat, var(--h-gilt-plate, var(--h-gilt)); box-shadow: 0 2px 3px rgb(0 0 0 / .4); }
.h-ledger__row:focus-visible { outline: 2px solid #1A1A1A; outline-offset: -3px; }
.h-ledger__foot { display: flex; justify-content: space-between; padding: 10px 14px 0 58px; font-size: 12px; color: var(--pm-ink-3); }
/* 牛皮纸文件夹（.h-folder / .h-folder__page）：页签写编号，后面叠着几页 */
.h-folder { position: relative; padding: 14px; margin-top: 18px; border-radius: 3px 6px 6px 6px;
background: url("../assets/decor/paper-manila.webp") 0 0 / 512px 512px, #D9C597; box-shadow: inset 0 0 0 1px rgb(94 69 32 / .35), inset 0 0 30px rgb(110 76 30 / .25), 4px 14px 20px -10px rgb(0 0 0 / .85); }
.h-folder__tab { position: absolute; left: 0; top: -22px; height: 24px; padding: 0 16px; display: flex; align-items: center; border-radius: 6px 10px 0 0;
font: 12px/1 var(--pm-font-mono); color: #3A2A12; background: url("../assets/decor/paper-manila.webp") 0 0 / 512px 512px, #D9C597; box-shadow: inset 0 1px 0 rgb(255 250 236 / .5), inset 1px 0 0 rgb(94 69 32 / .25); }
.h-folder__page { position: relative; padding: 20px 22px 0; border-radius: 2px; color: var(--pm-ink);
background: radial-gradient(ellipse 70% 40% at 15% 0%, rgb(var(--h-candle) / .18), transparent 70%), url("../assets/decor/paper-night.webp") 0 0 / 512px 512px, #F1E9D6;
box-shadow: 0 1px 3px rgb(0 0 0 / .3), 2px 4px 0 -1px #E4D9C0, 4px 7px 0 -2px #D9CCB0; }
.h-folder__page h2 { font: 600 1.375rem/1.3 var(--pm-font-serif); margin: 0; }
.h-folder__page .pm-gtitle { font-size: 1rem; }
.h-folder__page .pm-compare { background: rgb(255 250 236 / .5); }
/* ---------- 26. r4：门楣的三枚铜饰（DEC-W054）——两枚不可交互的铜花 + 一枚有锁眼的暗锁 ---------- */
.h-rosette { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; pointer-events: none;
background:
radial-gradient(circle, #6E5428 0 2.5px, transparent 3px),
radial-gradient(circle, transparent 0 4px, rgb(255 240 200 / .5) 4.5px 5px, transparent 5.5px),
repeating-conic-gradient(from 15deg, #C9A866 0 18deg, #8A6C3A 18deg 30deg),
radial-gradient(circle at 35% 30%, #F1DDA4, #8A6C3A 70%);
-webkit-mask: radial-gradient(circle, #000 64%, transparent 66%); mask: radial-gradient(circle, #000 64%, transparent 66%);
filter: drop-shadow(0 1px 1px rgb(0 0 0 / .6)) brightness(.85) saturate(.85); }
.h-rosette--brand { margin-right: -2px; }
.h-rosette--centre { position: absolute; left: 50%; bottom: -15px; margin-left: -11px; z-index: 2; } /* 坐在齿饰正中 */
html[data-state="dream"] .h-rosette { filter: drop-shadow(0 1px 1px rgb(0 0 0 / .6)) grayscale(.6) brightness(.75); }
/* 暗锁静止时和铜花一样暗一点：亮度、饱和度各 85%；悬停、聚焦或正在操作时恢复 */
body.h-house .pm-lintel .pm-lock__rose { filter: drop-shadow(0 1px 1px rgb(0 0 0 / .6)) brightness(.85) saturate(.85); transition: filter 200ms; }
body.h-house .pm-lintel .pm-lock:is(:hover, :focus-within, [data-phase="holding"], [data-phase="turning"], [data-phase="auto"], [data-phase="committing"]) .pm-lock__rose { filter: drop-shadow(0 1px 1px rgb(0 0 0 / .6)); }
@media (max-width: 899px) { .h-rosette--brand { display: none; } }
/* ---------- 27. r4：雾中小径（404，DEC-W055 改名：原“林边”与原作地名相撞） ---------- */
[data-room="lost"] { --h-wall-img: url("../assets/house/forest-near.webp"); --h-wall-size: auto 100%; --h-wall-dim: rgb(14 20 22 / .55); --pm-scene: #0E1416;
--pm-accent: #C8D0CC; --h-accent-ink: #3E4644; }
body.h-house[data-room="lost"] { --h-lamp-peak: 0; } /* 这里没有灯 */
body.h-house[data-room="lost"]::before { background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-x; background-position: 0 0, 0 0, 0 0, 0 0, 0 100%; }
body.h-house[data-room="lost"] .h-lamp { display: none; }
/* ---------- 28. r4：入馆签（.h-accession）——每件物件都带同一张小签：入馆 No.07 · 2026-10-15 · 某某送来 ---------- */
/* 世界观线索“馆员与访客”：东西是访客留下的，馆里替它登记。镜下小卡、印格名签下、陈列格标签下用的是同一个组件。 */
.h-accession { position: relative; display: inline-block; align-items: center; gap: 4px; max-width: 100%; padding: 2px 9px 2px 19px; border-radius: 2px 9px 9px 2px;
font: 11px/1.45 var(--pm-font-mono); color: #3A3226; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
background: linear-gradient(180deg, #F3EBD6, #E4D6B8); box-shadow: 0 0 0 1px rgb(110 76 30 / .35), 0 2px 3px -1px rgb(0 0 0 / .45); }
.h-accession::before { content: ""; position: absolute; left: 6px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
background: radial-gradient(circle, #2A2016 0 1.6px, #E2C78A 2px 2.6px, #8A6C3A 3px); } /* 铜扣眼 */
.h-accession b { font-weight: 600; color: #2A2116; }
/* ---------- 29. r4：低性能档（html.pm-motion-lite，MO-6）——只留透明度动画 ---------- */
html.pm-motion-lite .h-moths, html.pm-motion-lite .h-whale, html.pm-motion-lite .h-moth--visit { display: none; }
html.pm-motion-lite .h-candle::after, html.pm-motion-lite .h-beyond__mist, html.pm-motion-lite .h-lamp, html.pm-motion-lite body.h-house .pm-lintel .pm-lock__rose .hole { animation: none; }
html.pm-motion-lite .h-mirror__frame, html.pm-motion-lite .h-seal { transition: box-shadow 160ms; }
html.pm-motion-lite .h-mirror:hover .h-mirror__frame, html.pm-motion-lite .h-cell:hover .h-seal { transform: none; }
html.pm-motion-lite .h-mirror:hover .h-mirror__glint, html.pm-motion-lite .h-vitrine:hover .h-vitrine__case::after { animation: none; }
/* ---------- 30. r4：灰度检查（?gray=1） ---------- */
html.h-gray { filter: grayscale(1); }
/* ---------- 31. 梦导航下方的红线小字（全梦侧共用：以下皆为未定稿……） ---------- */
.h-dream-note { position: relative; z-index: 2; margin: 0; padding: 10px 16px 0; text-align: center; font: .875rem/1.5 var(--pm-font-serif); color: #B7CCCB; letter-spacing: .04em; text-shadow: 0 1px 6px #000; }
/* ---------- 32. r4 关闭纹理（补全）：本文件所有用到位图的规则一律只留底色 ---------- */
html.pm-tex-off :root,
html.pm-tex-off [data-room="foyer"],
html.pm-tex-off [data-room="mirrors"],
html.pm-tex-off [data-room="seals"],
html.pm-tex-off [data-room="cabinet"],
html.pm-tex-off [data-room="lodge"],
html.pm-tex-off [data-room="reading"],
html.pm-tex-off [data-room="desk"],
html.pm-tex-off body.h-house::after,
html.pm-tex-off body.h-house .pm-lintel,
html.pm-tex-off .h-vellum,
html.pm-tex-off .h-plaque__in,
html.pm-tex-off body.h-house .h-onwall .pm-btn:not(.pm-btn--primary):not(.pm-btn--quiet):not(.pm-btn--danger):not(.pm-btn--ghost),
html.pm-tex-off .h-window,
html.pm-tex-off .h-door__arch,
html.pm-tex-off .h-mirror__glass::after,
html.pm-tex-off .h-mirror__card,
html.pm-tex-off .h-drawer,
html.pm-tex-off .h-cell,
html.pm-tex-off .h-vitrine,
html.pm-tex-off .h-vitrine__case,
html.pm-tex-off .h-counter,
html.pm-tex-off .h-slot,
html.pm-tex-off .h-receipt,
html.pm-tex-off .h-lectern,
html.pm-tex-off .h-desk,
html.pm-tex-off .h-beyond__sky,
html.pm-tex-off .h-beyond__sea,
html.pm-tex-off .h-beyond__far,
html.pm-tex-off .h-beyond__mid,
html.pm-tex-off .h-beyond__mist,
html.pm-tex-off .h-beyond__near,
html.pm-tex-off .h-fog,
html.pm-tex-off .h-wallaway > i,
html.pm-tex-off .h-door--mirrors,
html.pm-tex-off .h-door--market,
html.pm-tex-off .h-door--lodge,
html.pm-tex-off .h-ticket__body,
html.pm-tex-off .h-ledger,
html.pm-tex-off .h-folder,
html.pm-tex-off .h-folder__tab,
html.pm-tex-off .h-folder__page,
html.pm-tex-off [data-room="lost"] { background-image: none !important; }
/* 墙外没有木门楣，也就没有齿饰：中段那枚铜花不出现（否则压在梦导航的红线小字上） */
html[data-state="dream"] .h-rosette--centre { display: none; }
/* ---------- 33. r4 灯簿（致谢，C-091）：胡桃木墙 + 一条长长的灯架；三类贡献者三种挂法 ---------- */
[data-room="roll"] { --h-wall-img: url("../assets/house/walnut.webp"); --h-wall-size: 640px 640px; --h-wall-dim: rgb(18 12 6 / .56); --pm-scene: #2E2118; --pm-accent: #EBCB8E; --h-accent-ink: #5E4526; }
/* ---------- 34. r4 门楣在中等宽度的收缩（加入“致谢”后共六项 + 添灯油）：导航字永不折行 ---------- */
body.h-house .pm-nav a { white-space: nowrap; }
@media (max-width: 1239px) {
body.h-house .pm-brand__tag { display: none; } /* 先收英文副标 */
body.h-house .pm-nav { gap: 2px; }
body.h-house .pm-nav a { padding-inline: 10px; }
}
@media (max-width: 1099px) {
body.h-house .pm-nav svg { display: none; } /* 再收导航图标，只留字 */
body.h-house .pm-nav a { padding-inline: 8px; font-size: 14px; }
body.h-house .h-sponsor-slot { margin-left: 6px; gap: 8px; }
}
/* ---------- 35. r4 品牌图标：铜框小窗里的鲸（DEC-W062，tools/gen-brand.py） ----------
原“黑底白鲸”的圆角方块换成拱顶小窗：窗里是墙外的冬夜海，鲸是产品自己的形状、月光银着色，海面一道倒影（WT-11、WT-14）。
形状是拱，不是圆：门楣上的圆形全部留给铜饰与暗锁（RW-31）。 */
.pm-brand__mark { width: 32px; height: 32px; flex: none; display: block; filter: drop-shadow(var(--pm-light-x, 3px) 3px 3px rgb(0 0 0 / .55)); }
.pm-brand:hover .pm-brand__mark { filter: drop-shadow(var(--pm-light-x, 3px) 3px 3px rgb(0 0 0 / .55)) brightness(1.08); }
@media (max-width: 599px) { .pm-brand__mark { width: 30px; height: 30px; } }
/* ---------- 36. r4 卡片上的“下载”钮（C-094，demos/r3/download.js） ----------
印的形只给承诺性动作（RW-09），“下载（带走）”是其中之一：所以下载钮是一枚小印钮——铜牌，左端嵌一枚圆印，印里是下载箭头。
字只写“下载”，旁边一个很小的文件大小；点过之后变“已开始下载”2.4 秒。它是卡片里的内部按钮，z-index 2。 */
.h-dl { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px 0 4px; border-radius: 4px; text-decoration: none; white-space: nowrap;
color: #2A2116; background: var(--h-gilt-plate, linear-gradient(170deg, #F6E6B4 0%, #E2C78A 40%, #CDAE6C 75%, #BE9D5C 100%));
box-shadow: inset 0 1px 0 rgb(255 248 220 / .7), inset 0 -1px 0 rgb(94 69 32 / .45), 0 1px 0 #6E5428, 0 4px 6px -3px rgb(0 0 0 / .55);
transition: filter 160ms, box-shadow 160ms; }
.h-dl__seal { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #3A2A12;
background: radial-gradient(circle at 38% 32%, #FFF0C4, #D9BA78 40%, #9A7A42 75%, #6E5428);
box-shadow: inset 0 0 0 1.5px rgb(94 69 32 / .55), inset 0 0 0 3px rgb(255 240 200 / .35), 0 1px 2px rgb(40 28 12 / .5); transition: transform 200ms var(--pm-ease-out, ease-out); }
.h-dl__seal svg { width: 13px; height: 13px; }
.h-dl__t { font: 600 13px/1 var(--pm-font-sans); text-shadow: 0 1px 0 rgb(255 240 200 / .45); }
.h-dl__size { font: 11px/1 var(--pm-font-mono); color: #5E4526; }
.h-dl:hover { filter: brightness(1.06); box-shadow: inset 0 1px 0 rgb(255 248 220 / .8), inset 0 -1px 0 rgb(94 69 32 / .45), 0 1px 0 #6E5428, 0 6px 10px -4px rgb(0 0 0 / .6); }
.h-dl:hover .h-dl__seal { transform: rotate(-10deg); }
.h-dl:active { box-shadow: inset 0 2px 4px rgb(60 40 10 / .45), inset 0 0 0 1px rgb(94 69 32 / .4); }
.h-dl:active .h-dl__seal { transform: translateY(1px) scale(.95); }
.h-dl:focus-visible { outline: 2px solid #1A1206; outline-offset: 1px; box-shadow: 0 0 0 4px #E8C878; }
.h-dl[data-done] .h-dl__seal { background: radial-gradient(circle at 36% 30%, #5E9C8C, #2A5E52 50%, #173A33); color: #DCEFE8; } /* 盖过的印：铜绿 */
@media (prefers-reduced-motion: reduce) { .h-dl, .h-dl__seal { transition: none; } .h-dl:hover .h-dl__seal { transform: none; } }
html.pm-motion-off .h-dl:hover .h-dl__seal { transform: none; }
html.pm-tex-off .h-dl { background: #E2C78A; }
/* 在三种卡上的位置 */
.h-mirror__foot .h-dl { margin-left: auto; }
.h-cell .h-dl { margin-top: 2px; }
.h-vitrine__label .h-dl { justify-self: start; margin-top: 4px; }
/* 卡片里的通用链接色（如 .h-vitrine__label a）会盖过下载钮的深字；下载钮的字色永远是铜牌上的深墨 */
a.h-dl, .h-vitrine__label a.h-dl, .h-mirror__card a.h-dl, .h-cell a.h-dl { color: #2A2116; font-family: var(--pm-font-sans); }
.h-vitrine__label a.h-dl::after, .h-cell a.h-dl::after { content: none; }
/* ---------- 页脚备案号 ---------- */
.pm-foot__legal { grid-column: 1 / -1; color: inherit; opacity: .8; }
.pm-foot .pm-foot__legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* ---------- 页脚四区台基（品牌 / 栏目 / 政策 / 备案） ----------
只覆盖 .pm-foot 区域：顶上一条铜线压边、内侧一道浅影，四个区按
“品牌—栏目—政策，备案另起一行”排布，收成一个稳稳落地的台基。
颜色全部取自 tokens，不新增色值；醒态走纸面，body.h-house 走木墙，
梦态走月光。页脚不需要动效，减少动效时不新增任何动画。 */
.pm-foot {
/* 页脚局部令牌：只在本区域内换色，不外溢到其它规则 */
--pm-foot-ink: var(--pm-ink-2);
--pm-foot-hi: var(--pm-ink);
--pm-foot-note: var(--pm-ink-3);
--pm-foot-link: var(--pm-ink);
--pm-foot-line: var(--pm-brass);
--pm-foot-hair: var(--pm-line);
--pm-foot-focus: var(--pm-focus-in);
position: relative;
margin-top: var(--pm-s-8);
border-top: var(--pm-w-mid) solid var(--pm-foot-line);
background: linear-gradient(180deg, rgb(40 28 12 / .04), rgb(40 28 12 / .10)), var(--pm-paper-2);
box-shadow: inset 0 1px 0 rgb(255 250 236 / .55), inset 0 16px 22px -18px rgb(40 28 12 / .5);
color: var(--pm-foot-ink);
font-size: var(--pm-fs-sm);
}
.pm-foot__in {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, .9fr);
grid-template-areas:
"brand nav policy"
"base base base";
gap: var(--pm-s-5) var(--pm-s-6);
align-items: start;
padding: var(--pm-s-6) 0 var(--pm-s-5);
}
/* 1 品牌区：小标 + 一句话定位 */
.pm-foot__brand { grid-area: brand; min-width: 0; }
.pm-foot__home {
display: inline-flex;
flex-wrap: wrap;
align-items: baseline;
gap: 2px var(--pm-s-3);
min-width: 0;
color: var(--pm-foot-hi);
text-decoration: none;
}
.pm-foot__name {
font-family: var(--pm-font-serif);
font-size: var(--pm-fs-h3);
font-weight: 600;
line-height: 1.2;
letter-spacing: .12em;
}
.pm-foot__tag {
font-size: var(--pm-fs-micro);
line-height: 1.4;
letter-spacing: .18em;
color: var(--pm-foot-note);
}
.pm-foot__home:hover .pm-foot__name,
.pm-foot__home:focus-visible .pm-foot__name {
text-decoration: underline;
text-decoration-color: var(--pm-foot-line);
text-decoration-thickness: var(--pm-w-hair);
text-underline-offset: 5px;
}
.pm-foot__motto {
margin: var(--pm-s-3) 0 0;
max-width: 32em;
line-height: 1.75;
color: var(--pm-foot-ink);
overflow-wrap: anywhere;
}
/* 2·3 栏目区 / 政策区：小字号 + 铜色引导线 */
.pm-foot__col { min-width: 0; }
.pm-foot__col--nav { grid-area: nav; }
.pm-foot__col--policy { grid-area: policy; }
.pm-foot__h {
display: flex;
align-items: center;
gap: var(--pm-s-2);
margin: 0 0 var(--pm-s-3);
font-family: var(--pm-font-sans);
font-size: var(--pm-fs-micro);
font-weight: 600;
line-height: 1.4;
letter-spacing: .16em;
color: var(--pm-foot-note);
}
.pm-foot__h::after {
content: "";
flex: 1 1 auto;
min-width: var(--pm-s-3);
height: var(--pm-w-hair);
background: linear-gradient(90deg, var(--pm-foot-line), transparent);
}
.pm-foot__list {
display: grid;
gap: 3px var(--pm-s-4);
margin: 0;
padding: 0;
list-style: none;
}
.pm-foot__col--nav .pm-foot__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pm-foot__list a {
display: inline-block;
padding: 2px 0;
color: var(--pm-foot-link);
text-decoration: none;
overflow-wrap: anywhere;
}
.pm-foot__list a:hover,
.pm-foot__list a:focus-visible {
color: var(--pm-foot-hi);
text-decoration: underline;
text-decoration-color: var(--pm-foot-line);
text-decoration-thickness: var(--pm-w-hair);
text-underline-offset: 4px;
}
/* 焦点环：2px、间隔 3px，颜色随醒/木/梦三种底子换，但不新增色值 */
.pm-foot a:focus-visible,
.pm-foot button:focus-visible {
outline: var(--pm-w-mid) solid var(--pm-foot-focus);
outline-offset: 3px;
border-radius: var(--pm-r-sm);
box-shadow: none;
}
/* 4 备案与版权：台基上的一条细压线 */
.pm-foot__base {
grid-area: base;
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--pm-s-2) var(--pm-s-5);
min-width: 0;
margin-top: var(--pm-s-2);
padding-top: var(--pm-s-4);
border-top: var(--pm-w-hair) solid var(--pm-foot-hair);
}
.pm-foot__copy { margin: 0; letter-spacing: .06em; color: var(--pm-foot-ink); }
.pm-foot__base .pm-foot__legal { margin: 0; min-width: 0; overflow-wrap: anywhere; }
/* 平板：品牌独占一行，栏目与政策并肩 */
@media (max-width: 1199px) {
.pm-foot__in { gap: var(--pm-s-4) var(--pm-s-5); }
}
@media (max-width: 899px) {
.pm-foot__in {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas:
"brand brand"
"nav policy"
"base base";
gap: var(--pm-s-4) var(--pm-s-5);
padding: var(--pm-s-5) 0 var(--pm-s-4);
}
}
/* 窄屏：单列，六项栏目仍在两列格里并排 */
@media (max-width: 599px) {
.pm-foot__in {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"brand"
"nav"
"policy"
"base";
gap: var(--pm-s-4);
}
.pm-foot__motto { max-width: none; }
.pm-foot__base { justify-content: flex-start; }
}
/* 木墙（公开七页 body.h-house）：页脚压在墙脚上，铜线换成更亮的台基边 */
body.h-house .pm-foot {
--pm-foot-ink: var(--h-on-2);
--pm-foot-hi: var(--h-on);
--pm-foot-note: var(--h-on-2);
--pm-foot-link: var(--h-on);
--pm-foot-line: var(--pm-brass);
--pm-foot-hair: rgb(168 137 79 / .35);
--pm-foot-focus: var(--h-on);
background: linear-gradient(180deg, rgb(0 0 0 / .28), rgb(0 0 0 / .55));
border-top: var(--pm-w-mid) solid var(--pm-brass);
box-shadow: inset 0 1px 0 rgb(255 250 236 / .16), inset 0 18px 24px -20px rgb(0 0 0 / .9);
color: var(--h-on-2);
padding-bottom: var(--pm-s-5);
}
/* 梦态：铜线让位给月光，别在夜色里烧一盏铜灯 */
html[data-state="dream"] .pm-foot {
--pm-foot-ink: var(--pm-on-scene-2);
--pm-foot-hi: var(--pm-on-scene);
--pm-foot-note: var(--pm-on-scene-2);
--pm-foot-link: var(--pm-on-scene);
--pm-foot-line: rgb(var(--h-moon) / .6);
--pm-foot-hair: rgb(var(--h-moon) / .28);
--pm-foot-focus: var(--pm-accent);
background: transparent;
border-top-color: var(--pm-foot-line);
box-shadow: inset 0 1px 0 rgb(var(--h-moon) / .2), inset 0 18px 24px -20px rgb(0 0 0 / .8);
color: var(--pm-on-scene-2);
}