/* 汇流二级页 · 与首页「一夜」同一套字体、夜色、导航与页脚。
   首页是一整晚的叙事；二级页是同一个夜里安静的房间：页首一条天际线做氛围，其余全部让给排版。
   CSP 是 style-src 'self' / style-src-attr 'none'：所有状态都用 class 或 data-* 属性表达，不写行内样式。 */

@font-face { font-family: "Kawa Serif"; src: url(/assets/fonts/serif-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Kawa Serif"; src: url(/assets/fonts/serif-300.woff2) format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Kawa Latin"; src: url(/assets/fonts/latin-italic.woff2) format("woff2"); font-style: italic; font-display: swap; }

:root {
  --ease-out: cubic-bezier(.23,1,.32,1);
  --serif: "Kawa Serif", "Songti SC", "Noto Serif SC", "Source Han Serif SC", serif;
  --latin: "Kawa Latin", ui-serif, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --m: clamp(22px, 5.5vw, 88px);
  --wrap: 1180px;
  --night: #07080f;
  --surface: #0d0e1b;
  --surface-2: #131526;
  --text: rgba(232,234,250,.80);
  --dim: rgba(232,234,250,.60);
  --faint: rgba(232,234,250,.40);
  --rule: rgba(255,255,255,.085);
  --rule-2: rgba(255,255,255,.16);
  --lamp: #ffcf8a;
  --amber: #ffb066;
  --tv: #a8bfff;
  --live: #ff3b30;
  --error: #ffb4a8;
}
* { box-sizing: border-box; margin: 0; }
html { background: var(--night); color: #fff; font-family: var(--sans); -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body { overflow-x: clip; min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1; width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { max-width: 100%; }
::selection { background: rgba(255,207,138,.32); color: #fff; }
:focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

/* ---------- 导航：首页同款，滚动后压一层夜色 ---------- */
.nav { position: fixed; z-index: 40; inset: 0 0 auto; transition: background-color .4s ease, box-shadow .4s ease, backdrop-filter .4s ease; }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px var(--m); }
.nav.scrolled { background: rgba(7,8,15,.74); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 1px 0 var(--rule); }
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand .oct { width: 28px; height: 28px; display: block; color: #fff; }
.brand .oct svg { width: 100%; height: 100%; display: block; }
.oct .body { fill: currentColor; } .oct .eyes { fill: transparent; }
.brand b { font-family: var(--serif); font-weight: 700; font-size: 19px; letter-spacing: .1em; }
.brand em { font-family: var(--latin); font-style: italic; font-size: 17px; opacity: .6; }
.side { display: flex; align-items: center; gap: 6px; }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap;
  transition: background-color .25s ease, color .25s ease, opacity .25s ease, transform .16s var(--ease-out); }
.pill svg { width: 14px; height: 14px; }
.pill:active { transform: scale(.97); }
.pill.get { box-shadow: inset 0 0 0 1px currentColor; }
.pill.ghost { opacity: .7; font-weight: 500; }
@media (hover: hover) and (pointer: fine) {
  .pill.get:hover { background: #fff; color: var(--night); }
  .pill.ghost:hover { opacity: 1; }
}

/* ---------- 页首：黄昏刚过的天，一条天际线 ---------- */
.mast { position: relative; overflow: hidden; width: 100%; padding: clamp(112px, 15vh, 156px) 0 0;
  background: linear-gradient(180deg, #11132f 0%, #0d0f26 38%, #0a0b1b 70%, var(--night) 100%); }
.mast::before { content: ""; position: absolute; inset: auto -10% 0 -10%; height: 70%; pointer-events: none;
  background: radial-gradient(50% 70% at 72% 100%, rgba(240,150,120,.13), transparent 70%), radial-gradient(40% 60% at 18% 100%, rgba(140,120,220,.10), transparent 70%); }
.mast-in { position: relative; z-index: 1; max-width: calc(var(--wrap) + 2 * var(--m)); padding: 0 var(--m); }
/* 页首文字只在载入时淡入一次，节奏与首页标题一致，不随滚动。 */
.mast-in > *, .land-in > .kicker, .land-in > .t1, .land-in > .lede, .lost-in > * { animation: rise .9s var(--ease-out) both; }
.mast-in > :nth-child(2), .land-in > .t1, .lost-in > :nth-child(2) { animation-delay: .06s; }
.mast-in > :nth-child(3), .land-in > .lede, .lost-in > :nth-child(3) { animation-delay: .12s; }
.mast-in > :nth-child(n+4), .lost-in > :nth-child(n+4) { animation-delay: .18s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* 天际线：远景一层、近景一层；近景楼面铺一张暗窗格，少数窗在载入时一盏盏亮起来。 */
.skyline { position: relative; display: block; width: 100%; height: clamp(84px, 9vw, 136px); margin-top: clamp(32px, 5vh, 56px); }
.skyline .b1 { fill: #10122b; }
.skyline .b2 { fill: #08090f; }
.skyline .wg { fill: url(#sky-win); }
.skyline pattern rect { fill: #0f1122; }
.skyline .w { opacity: 0; animation: lamp 1.6s ease forwards; }
.skyline .warm { fill: #ffcf8a; } .skyline .amber { fill: #ffb066; } .skyline .tv { fill: #a8bfff; } .skyline .white { fill: #fff3e0; }
.skyline .d1 { animation-delay: .3s; } .skyline .d2 { animation-delay: .55s; } .skyline .d3 { animation-delay: .8s; } .skyline .d4 { animation-delay: 1.05s; }
.skyline .d5 { animation-delay: 1.35s; } .skyline .d6 { animation-delay: 1.7s; } .skyline .d7 { animation-delay: 2.1s; } .skyline .d8 { animation-delay: 2.6s; }
.skyline .d9 { animation-delay: 3.2s; } .skyline .d10 { animation-delay: 4s; }
@keyframes lamp { 0% { opacity: 0; } 18% { opacity: .5; } 26% { opacity: .12; } 60% { opacity: .95; } 100% { opacity: .82; } }
/* 天线顶上的航空障碍灯：每 3.6 秒亮一下，是整页唯一常驻的动静。 */
.skyline .beacon { fill: #ff5a4f; opacity: 0; animation: beacon 3.6s ease-in-out 2.4s infinite; }
@keyframes beacon { 0%, 70%, 100% { opacity: 0; } 80%, 88% { opacity: .9; } }

.kicker { font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: rgba(255,255,255,.62); display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.kicker::before { content: ""; width: 34px; height: 1px; background: currentColor; flex: none; }
.kicker em { font-family: var(--latin); font-size: 17px; letter-spacing: .04em; text-transform: none; }
.t1 { font-family: var(--serif); font-weight: 700; font-size: clamp(38px, min(5.4vw, 9vh), 76px); line-height: 1.14; letter-spacing: .02em; text-wrap: balance; }
.t1 em, .sec-h em { font-family: var(--latin); font-style: italic; font-weight: 400; letter-spacing: 0; }
.soft { font-weight: 300; opacity: .78; }
.lede { margin-top: 24px; max-width: 34em; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.95; color: var(--text); text-wrap: pretty; }
html[lang="en"] .lede { line-height: 1.7; }
.doc-date { margin-top: 20px; font-size: 13px; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--faint); }
.lede + .doc-date { margin-top: 16px; }
.notice { margin-top: 18px; max-width: 34em; font-size: 14px; line-height: 1.85; color: var(--dim); padding-left: 14px; box-shadow: inset 2px 0 0 rgba(255,207,138,.5); }
.notice b { color: #fff; font-weight: 600; }
.notice a, .sec-p a, .note-p a, .board-legal a, .devs a, .steps a, .facts-grid a, .notes a, .field-hint a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,207,138,.5); text-underline-offset: 4px; text-decoration-thickness: 1px; transition: text-decoration-color .2s ease; }
@media (hover: hover) and (pointer: fine) {
  .notice a:hover, .sec-p a:hover, .note-p a:hover, .board-legal a:hover, .devs a:hover, .steps a:hover, .facts-grid a:hover, .notes a:hover { text-decoration-color: var(--lamp); }
}

/* ---------- 按钮 ---------- */
.cta-row { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap;
  transition: transform .16s var(--ease-out), background-color .25s ease, box-shadow .25s ease, color .25s ease, opacity .25s ease; }
.btn:active { transform: scale(.97); }
.btn.primary { background: #fff; color: var(--night); box-shadow: 0 16px 40px -18px rgba(255,207,138,.55); }
.btn.ghost { box-shadow: inset 0 0 0 1px rgba(255,255,255,.26); color: #fff; }
.btn.quiet { color: var(--dim); padding: 0 12px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .38; cursor: not-allowed; transform: none; box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .btn.primary:not(:disabled):not([aria-disabled="true"]):hover { box-shadow: 0 18px 46px -16px rgba(255,207,138,.75); }
  .btn.ghost:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
  .btn.quiet:hover { color: #fff; }
}
.store { display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 24px 0 20px; border-radius: 999px; font-size: 15px; font-weight: 600;
  background: #fff; color: var(--night); box-shadow: 0 18px 50px -14px rgba(150,140,255,.6); transition: transform .16s var(--ease-out), box-shadow .25s ease; }
.store svg { width: 18px; }
.store:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .store:hover { box-shadow: 0 20px 56px -12px rgba(150,140,255,.8); } }
.note { font-size: 13px; letter-spacing: .06em; color: var(--faint); margin-left: 12px; }

/* ---------- 文档：目录 + 正文 ---------- */
.doc { max-width: calc(var(--wrap) + 2 * var(--m)); padding: clamp(36px, 6vh, 64px) var(--m) 128px;
  display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); align-items: start; }
.toc { position: sticky; top: 92px; max-height: calc(100vh - 116px); overflow: auto; scrollbar-width: none; padding-bottom: 24px; }
.toc::-webkit-scrollbar { display: none; }
.toc summary { display: none; }
.toc ol { list-style: none; padding: 0; counter-reset: toc; border-left: 1px solid var(--rule); }
.toc li { counter-increment: toc; }
.toc a { position: relative; display: grid; grid-template-columns: 28px 1fr; padding: 6px 0 6px 16px; font-size: 13px; line-height: 1.55; color: var(--faint); transition: color .2s ease; }
.toc a::before { content: counter(toc, decimal-leading-zero); font: 500 10.5px/2 var(--mono); letter-spacing: .04em; }
.toc a::after { content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 1px; background: var(--lamp); opacity: 0; transition: opacity .2s ease; }
.toc a.on { color: #fff; } .toc a.on::before { color: var(--lamp); } .toc a.on::after { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .toc a:hover { color: #fff; } }

.prose { max-width: 40em; font-size: 17px; line-height: 1.95; color: var(--text); counter-reset: sec; overflow-wrap: break-word; }
.doc.wide .prose { max-width: 50em; }
html[lang="en"] .prose { max-width: 38em; line-height: 1.75; hyphens: auto; }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1.05em; text-wrap: pretty; }
.prose h2 { counter-increment: sec; position: relative; font-family: var(--serif); font-weight: 700; font-size: clamp(22px, 2.1vw, 27px); line-height: 1.4; letter-spacing: .02em; color: #fff;
  margin: 2.6em 0 .85em; padding-top: 1.5em; border-top: 1px solid var(--rule); scroll-margin-top: 92px; }
.prose > h2:first-child { padding-top: 0; border-top: 0; }
.prose h2::before { content: counter(sec, decimal-leading-zero); display: block; margin-bottom: 10px; font: 500 11px/1 var(--mono); letter-spacing: .24em; color: var(--lamp); opacity: .85; }
.h-anchor { margin-left: .4em; font-family: var(--mono); font-weight: 400; font-size: .7em; color: var(--faint); opacity: 0; transition: opacity .2s ease, color .2s ease; }
@media (hover: hover) and (pointer: fine) { .prose h2:hover .h-anchor { opacity: 1; } .h-anchor:hover { color: var(--lamp); } }
.prose h3 { font-size: 17px; font-weight: 600; color: #fff; line-height: 1.6; margin: 2.1em 0 .55em; scroll-margin-top: 92px; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.25em; }
.prose li { margin: .5em 0; padding-left: .25em; }
.prose li::marker { color: var(--faint); }
.prose ul ul { margin: .5em 0 .2em; }
.prose strong, .prose b { color: #fff; font-weight: 600; }
.prose a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,207,138,.45); text-underline-offset: 4px; text-decoration-thickness: 1px; transition: text-decoration-color .2s ease; }
@media (hover: hover) and (pointer: fine) { .prose a:hover { text-decoration-color: var(--lamp); } }
.prose .action-primary { display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none; margin: .4em 0;
  background: #fff; color: var(--night); box-shadow: 0 16px 40px -18px rgba(255,207,138,.55); transition: transform .16s var(--ease-out); }
.prose .action-primary:active { transform: scale(.97); }
.prose code { font-family: var(--mono); font-size: .84em; padding: .14em .42em; border-radius: 5px; background: rgba(255,255,255,.07); color: #eef0ff; overflow-wrap: anywhere; }
.prose pre { margin: 1.4em 0 1.6em; padding: 20px 22px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); overflow: auto; font: 13px/1.75 var(--mono); color: #dfe3ff;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.prose pre code { padding: 0; background: none; font-size: inherit; overflow-wrap: normal; }
.table-wrap { margin: 1.3em 0 1.8em; overflow-x: auto; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--rule); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.prose table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.7; }
.prose th, .prose td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.prose tr:last-child > * { border-bottom: 0; }
.prose thead th { font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--faint); background: rgba(255,255,255,.025); white-space: nowrap; }
.prose tbody th { color: #fff; font-weight: 600; white-space: nowrap; }
.prose td code { font-size: .86em; overflow-wrap: normal; }
.prose td:not(:last-child) { white-space: nowrap; }
.prose .room-id-table { min-width: 780px; }
@media (max-width: 640px) { .prose table { min-width: 600px; } .prose .room-id-table { min-width: 780px; } }
.prose .room-id-table td:nth-child(3) { min-width: 230px; white-space: normal; } .prose .room-id-table td:nth-child(3) code { overflow-wrap: anywhere; }
.prose .room-id-table td:nth-child(3) strong { color: var(--lamp); }
.doc-back { margin-top: 56px; }

@media (max-width: 960px) {
  .doc { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 28px; }
  .toc { position: static; max-height: none; overflow: visible; padding: 0; }
  .toc details { border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); }
  .toc summary { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; }
  .toc summary::-webkit-details-marker { display: none; }
  .toc summary span { font: 500 12px var(--mono); color: var(--faint); display: flex; align-items: center; gap: 10px; }
  .toc summary span::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .25s var(--ease-out); }
  .toc details[open] summary span::after { transform: translateY(2px) rotate(-135deg); }
  .toc ol { border-left: 0; padding: 0 18px 12px; border-top: 1px solid var(--rule); padding-top: 8px; }
  .toc a { padding-left: 0; font-size: 14px; padding-top: 8px; padding-bottom: 8px; } .toc a::after { display: none; }
  .prose { font-size: 16px; }
  .prose pre { margin-left: calc(-1 * var(--m)); margin-right: calc(-1 * var(--m)); border-radius: 0; padding: 18px var(--m); box-shadow: inset 0 1px 0 var(--rule), inset 0 -1px 0 var(--rule); }
}

/* ---------- 常规页面 ---------- */
.page { width: 100%; max-width: calc(var(--wrap) + 2 * var(--m)); padding: 8px var(--m) 128px; }
.sec { padding-top: clamp(56px, 9vh, 96px); }
.sec:first-child { padding-top: clamp(32px, 6vh, 64px); }
.sec-h { font-family: var(--serif); font-weight: 700; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.3; letter-spacing: .02em; text-wrap: balance; }
.sec-p { margin-top: 16px; max-width: 36em; font-size: 16px; line-height: 1.95; color: var(--text); text-wrap: pretty; }
html[lang="en"] .sec-p, .en-block .sec-p { line-height: 1.75; }
.sec-p.small { font-size: 14px; color: var(--dim); }
.sec-p b { color: #fff; font-weight: 600; }
.label { margin: 44px 0 4px; font-size: 12px; letter-spacing: .24em; color: var(--faint); }
.sec-h + .label { margin-top: 32px; }

/* 目录式的行：联系方式、入口 */
.rows { margin-top: 12px; border-top: 1px solid var(--rule); }
.row-link { display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; align-items: baseline; column-gap: 24px; padding: 20px 2px; border-bottom: 1px solid var(--rule); }
.row-link .name { display: flex; align-items: baseline; gap: 12px; font-family: var(--serif); font-weight: 700; font-size: clamp(19px, 1.7vw, 23px); letter-spacing: .02em; }
.row-link .handle { font-size: 14px; font-variant-numeric: tabular-nums; color: var(--dim); text-align: right; overflow-wrap: anywhere; }
.row-link small { grid-column: 1 / 3; margin-top: 8px; font-size: 13.5px; line-height: 1.7; color: var(--faint); }
.row-link .go { grid-row: 1; grid-column: 3; color: var(--faint); transition: transform .3s var(--ease-out), color .2s ease; }
.tg-badge { align-self: center; padding: 2px 8px; border-radius: 999px; font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--lamp); box-shadow: inset 0 0 0 1px rgba(255,207,138,.45); }
@media (hover: hover) and (pointer: fine) {
  .row-link:hover .go { color: var(--lamp); transform: translateX(4px); }
  .row-link:hover .handle { color: var(--text); }
}
.aside-block { max-width: 46em; }
@media (max-width: 640px) {
  .row-link { grid-template-columns: minmax(0, 1fr) 20px; row-gap: 6px; }
  .row-link .handle { grid-column: 1; text-align: left; }
  .row-link small { grid-column: 1; margin-top: 2px; }
  .row-link .go { grid-column: 2; }
}

/* 下载页 */
.devs { margin-top: 24px; border-top: 1px solid var(--rule); }
.devs > div { display: grid; grid-template-columns: minmax(180px, 1fr) 2fr; gap: 24px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.devs dt { font-family: var(--serif); font-weight: 700; font-size: clamp(20px, 2vw, 26px); }
.devs dd { margin: 0; font-size: 15px; line-height: 1.85; color: var(--text); max-width: 34em; }
.steps { list-style: none; padding: 0; margin-top: 24px; counter-reset: st; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.steps li { counter-increment: st; padding-top: 18px; border-top: 1px solid var(--rule-2); font-size: 15px; line-height: 1.9; color: var(--text); }
.steps li::before { content: counter(st, decimal-leading-zero); display: block; margin-bottom: 12px; font: 500 12px var(--mono); letter-spacing: .2em; color: var(--lamp); }
.steps + .sec-p { margin-top: 40px; max-width: 46em; }
.en-block { margin-top: clamp(56px, 9vh, 96px); padding-top: clamp(40px, 6vh, 64px); border-top: 1px solid var(--rule); }
.en-block .label { margin-top: 0; margin-bottom: 14px; }
.en-block .sec-p { max-width: 40em; }
@media (max-width: 860px) {
  .devs > div { grid-template-columns: 1fr; gap: 8px; }
  .steps { grid-template-columns: 1fr; gap: 20px; }
  .note { margin-left: 0; width: 100%; }
}

/* 关于页 */
.essay { margin: 28px 0 0; padding: 0; max-width: 24em; font-family: var(--serif); font-weight: 300; font-size: clamp(20px, 2vw, 26px); line-height: 1.85; color: rgba(255,255,255,.9); }
.essay p + p { margin-top: .7em; }
.essay footer { margin-top: 22px; font-family: var(--sans); font-size: 14px; color: var(--faint); letter-spacing: .04em; }
.naming { margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; max-width: 920px; }
.naming > div { padding: 22px 0 0; border-top: 1px solid var(--rule-2); }
.naming dt { font-family: var(--serif); font-weight: 700; font-size: clamp(30px, 3vw, 40px); line-height: 1.2; letter-spacing: .06em; }
.naming dt em { font-family: var(--latin); font-style: italic; font-weight: 400; letter-spacing: .01em; }
.naming dd { margin: 12px 0 0; max-width: 24em; font-size: 15px; line-height: 1.9; color: var(--dim); }
.naming + .sec-p { margin-top: 28px; }
.facts-grid { margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.facts-grid > div { padding: 20px 0; border-top: 1px solid var(--rule); }
.facts-grid dt { font-size: 15px; font-weight: 600; color: #fff; }
.facts-grid dd { margin: 6px 0 0; font-size: 15px; line-height: 1.85; color: var(--dim); }
@media (max-width: 720px) { .facts-grid, .naming { grid-template-columns: 1fr; } .naming > div + div { margin-top: 24px; } }

/* ---------- 反馈板 ---------- */
.board-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); column-gap: clamp(40px, 5vw, 80px); align-items: start; padding-top: clamp(32px, 6vh, 64px); }
.compose { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 92px; padding: 28px; border-radius: 22px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule), 0 40px 90px -60px rgba(0,0,0,.9); }
.compose .sec-h { font-size: 24px; }
.compose .sec-p { font-size: 14px; color: var(--dim); line-height: 1.8; margin-top: 10px; }
.board { grid-column: 1; grid-row: 1; min-width: 0; }
.board-legal { grid-column: 1; grid-row: 2; margin-top: 48px; max-width: 40em; font-size: 13px; line-height: 1.85; color: var(--faint); }
.feedback-form { margin-top: 22px; display: grid; gap: 18px; }
.segmented { border: 0; padding: 0; min-width: 0; }
.segmented legend, .form-field > label:not(.file-drop) { display: block; margin-bottom: 8px; font-size: 13px; color: var(--dim); }
.segmented-options { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--rule); }
.segmented-option { position: relative; }
.segmented-option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented-option span { display: block; padding: 8px 0; text-align: center; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--dim); transition: background-color .25s ease, color .25s ease; }
.segmented-option input:checked + span { background: #fff; color: var(--night); }
.segmented-option input:focus-visible + span { outline: 2px solid var(--lamp); outline-offset: 2px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-field textarea, .form-field input[type="text"], .form-field select {
  width: 100%; font: inherit; font-size: 15px; color: #fff; background: rgba(255,255,255,.04); border: 1px solid var(--rule-2); border-radius: 12px; padding: 11px 14px;
  transition: border-color .2s ease, box-shadow .2s ease; }
.form-field textarea { resize: vertical; min-height: 140px; line-height: 1.75; display: block; }
.form-field select { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a6a8bf' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 11px; }
.form-field select option { color: #111; }
.form-field ::placeholder { color: var(--faint); }
.form-field textarea:focus, .form-field input[type="text"]:focus, .form-field select:focus { outline: none; border-color: rgba(255,207,138,.6); box-shadow: 0 0 0 3px rgba(255,207,138,.12); }
/* 文件选择：系统控件藏在整块可点区域下面，键盘焦点落在它身上时整块亮框。 */
.file-drop { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 12px; cursor: pointer;
  border: 1px dashed rgba(255,255,255,.22); background: rgba(255,255,255,.025); transition: border-color .2s ease, background-color .2s ease; }
.file-drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-drop-title { font-size: 14px; font-weight: 600; color: #fff; }
.file-drop-title::before { content: "+"; margin-right: 8px; color: var(--lamp); font-weight: 400; }
.file-drop-sub { font-size: 12.5px; color: var(--faint); }
.file-drop:has(input:focus-visible) { outline: 2px solid var(--lamp); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .file-drop:hover { border-color: rgba(255,207,138,.5); background: rgba(255,207,138,.04); } }
.field-hint { margin-top: 8px; font-size: 12.5px; line-height: 1.75; color: var(--faint); }
.field-hint b { color: var(--dim); font-weight: 600; }
.field-hint:empty { display: none; }
.field-counter { text-align: right; font-variant-numeric: tabular-nums; }
.attachment-picks { list-style: none; padding: 0; display: grid; gap: 6px; }
.attachment-picks:not(:empty) { margin-top: 12px; }
.attachment-pick { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 10px; background: rgba(255,255,255,.04); font-size: 13px; color: var(--text); animation: rise .35s var(--ease-out) both; }
.attachment-pick-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-pick-detail { flex: none; font-variant-numeric: tabular-nums; color: var(--faint); }
.attachment-pick.is-rejected { background: rgba(255,110,80,.08); box-shadow: inset 0 0 0 1px rgba(255,140,120,.25); }
.attachment-pick.is-rejected .attachment-pick-detail { color: var(--error); }
.feedback-form .btn.primary { width: 100%; }
.form-status { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.7; color: var(--dim); }
.form-status:empty { display: none; }
.form-status::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 7px; border-radius: 50%; background: var(--faint); }
.form-status.is-busy::before { background: var(--lamp); animation: pulse 1.2s ease-in-out infinite; }
.form-status.is-success { color: #fff; }
.form-status.is-success::before { background: var(--lamp); box-shadow: 0 0 10px rgba(255,207,138,.8); }
.form-status.is-error { color: var(--error); }
.form-status.is-error::before { background: #ff8a72; }
@keyframes pulse { 50% { opacity: .3; } }

.board-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
.board-sort { display: inline-flex; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule-2); }
.board-sort-option { height: 30px; padding: 0 14px; border-radius: 999px; font-size: 13px; color: var(--dim); transition: background-color .2s ease, color .2s ease; }
.board-sort-option.is-active { background: rgba(255,255,255,.12); color: #fff; }
.board-list { transition: opacity .25s ease; }
.board[data-state="loading"] .board-list { opacity: .45; }
.board-card { padding: 24px 0 22px; border-bottom: 1px solid var(--rule); animation: rise .5s var(--ease-out) both; }
.board-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; }
.board-badge { padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.board-badge.is-bug { color: #ffb7a6; background: rgba(255,110,80,.12); }
.board-badge.is-feature { color: var(--tv); background: rgba(168,191,255,.12); }
.board-card-who { color: #fff; font-weight: 600; }
.board-card-when, .board-card-env { color: var(--faint); font-variant-numeric: tabular-nums; }
.board-card-env::before { content: "·"; margin-right: 12px; }
.board-card-body { margin-top: 12px; max-width: 38em; font-size: 16px; line-height: 1.85; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.board-gallery { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.board-shot { display: block; width: 132px; aspect-ratio: 3 / 2; border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--rule-2); background: var(--surface-2); transition: transform .25s var(--ease-out); }
.board-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (hover: hover) and (pointer: fine) { .board-shot:hover { transform: translateY(-2px); } }
.board-video { display: block; width: 240px; max-width: 100%; border-radius: 10px; background: #000; }
.board-vote { margin-top: 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.board-vote-button { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 999px; font-size: 13px; color: var(--dim);
  box-shadow: inset 0 0 0 1px var(--rule-2); font-variant-numeric: tabular-nums; transition: color .2s ease, box-shadow .2s ease, background-color .2s ease, transform .16s var(--ease-out); }
.board-vote-button:active { transform: scale(.95); }
.board-vote-button.is-mine { color: var(--lamp); box-shadow: inset 0 0 0 1px rgba(255,207,138,.55); background: rgba(255,207,138,.07); }
.board-vote-button.is-mine .board-vote-glyph { animation: tap .32s var(--ease-out); }
@keyframes tap { 40% { transform: scale(1.25); } }
.board-vote-button.is-mine .board-vote-glyph.is-down { animation-name: tap-down; }
@keyframes tap-down { 0%, 100% { transform: rotate(180deg); } 40% { transform: rotate(180deg) scale(1.25); } }
.board-vote-glyph { width: 15px; height: 15px; }
.board-vote-glyph.is-down { transform: rotate(180deg); }
.board-vote-note { font-size: 12px; color: var(--error); }
@media (hover: hover) and (pointer: fine) { .board-vote-button:hover { color: #fff; } .board-sort-option:hover { color: #fff; } }
/* 列表状态行：加载中是三张占位卡；空是一扇亮着的窗；出错是一行暖红色的说明。 */
.board-state { position: relative; font-size: 14px; color: var(--faint); }
.board-state:empty { display: none; }
.board-state[data-state="loading"] { padding: 0 0 8px; }
.board-state[data-state="loading"]::before { content: ""; display: block; height: 330px; margin-bottom: 16px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.05), rgba(255,255,255,0)) 0 0 / 50% 100% no-repeat,
    linear-gradient(var(--rule), var(--rule)) 0 109px / 100% 1px no-repeat,
    linear-gradient(var(--rule), var(--rule)) 0 219px / 100% 1px no-repeat,
    linear-gradient(var(--rule), var(--rule)) 0 329px / 100% 1px no-repeat,
    linear-gradient(rgba(255,255,255,.06), rgba(255,255,255,.06)) 0 26px / 160px 12px no-repeat,
    linear-gradient(rgba(255,255,255,.045), rgba(255,255,255,.045)) 0 54px / 72% 12px no-repeat,
    linear-gradient(rgba(255,255,255,.045), rgba(255,255,255,.045)) 0 76px / 44% 12px no-repeat,
    linear-gradient(rgba(255,255,255,.06), rgba(255,255,255,.06)) 0 136px / 140px 12px no-repeat,
    linear-gradient(rgba(255,255,255,.045), rgba(255,255,255,.045)) 0 164px / 64% 12px no-repeat,
    linear-gradient(rgba(255,255,255,.045), rgba(255,255,255,.045)) 0 186px / 52% 12px no-repeat,
    linear-gradient(rgba(255,255,255,.06), rgba(255,255,255,.06)) 0 246px / 120px 12px no-repeat,
    linear-gradient(rgba(255,255,255,.045), rgba(255,255,255,.045)) 0 274px / 68% 12px no-repeat,
    linear-gradient(rgba(255,255,255,.045), rgba(255,255,255,.045)) 0 296px / 36% 12px no-repeat;
  animation: sweep 1.6s linear infinite; }
@keyframes sweep { from { background-position-x: -100%, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0; } to { background-position-x: 200%, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0; } }
.board-state[data-state="empty"], .board-state[data-state="error"] { padding: 56px 0 40px; text-align: center; }
.board-state[data-state="empty"] { color: var(--dim); font-family: var(--serif); font-size: 20px; letter-spacing: .02em; }
.board-state[data-state="empty"]::before { content: ""; display: block; width: 10px; height: 14px; margin: 0 auto 22px; border-radius: 1px; background: var(--lamp);
  box-shadow: 0 0 18px rgba(255,207,138,.75), -40px 0 0 #1b1d36, 40px 0 0 #1b1d36, -40px -26px 0 #1b1d36, 0 -26px 0 #1b1d36, 40px -26px 0 #1b1d36; animation: lamp-on 1.4s ease .2s both; }
@keyframes lamp-on { from { background: #1b1d36; box-shadow: 0 0 0 rgba(255,207,138,0), -40px 0 0 #1b1d36, 40px 0 0 #1b1d36, -40px -26px 0 #1b1d36, 0 -26px 0 #1b1d36, 40px -26px 0 #1b1d36; } }
.board-state[data-state="error"] { color: var(--error); }
.board-state[data-state="error"]::before { content: ""; display: block; width: 10px; height: 14px; margin: 0 auto 22px; border-radius: 1px; background: #1b1d36; box-shadow: inset 0 0 0 1px rgba(255,140,120,.5); }
.board-more { margin-top: 28px; }
@media (max-width: 1000px) {
  .board-layout { grid-template-columns: minmax(0, 1fr); }
  .compose, .board, .board-legal { grid-column: 1; grid-row: auto; position: static; }
  .board { margin-top: 56px; }
  .compose { padding: 22px 20px; }
}
@media (max-width: 420px) { .form-row { grid-template-columns: 1fr; } .board-shot { width: calc(50% - 4px); } }

/* ---------- 云端守候录制 ---------- */
.facts { list-style: none; padding: 0; margin-top: 36px; display: flex; flex-wrap: wrap; gap: 10px 36px; font-size: 14px; color: var(--dim); }
.facts b { margin-right: 8px; font-family: var(--serif); font-weight: 700; font-size: 18px; color: #fff; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.nightlog { margin: 0; padding: 26px 28px; border-radius: 22px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); }
.nightlog figcaption { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .12em; color: var(--faint); padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
.nightlog .rec { display: inline-flex; align-items: center; gap: 8px; color: #ff8a80; }
.nightlog .rec i { width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 10px rgba(255,59,48,.8); animation: pulse 1.6s ease-in-out infinite; }
.nightlog ol { list-style: none; padding: 0; margin-top: 8px; }
.nightlog li { position: relative; display: grid; grid-template-columns: 52px 18px 1fr; gap: 12px; padding: 16px 0; }
.nightlog li::before { content: ""; position: absolute; left: 72.5px; top: 30px; bottom: -14px; width: 1px; background: var(--rule-2); }
.nightlog li:last-child::before { display: none; }
.nightlog time { font: 500 14px/1.6 var(--mono); color: var(--dim); font-variant-numeric: tabular-nums; }
.nightlog li > i { margin-top: 7px; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--faint); background: var(--surface); position: relative; z-index: 1; justify-self: center; }
.nightlog li.rec > i { background: var(--live); box-shadow: 0 0 12px rgba(255,59,48,.8); }
.nightlog li.done > i { background: var(--lamp); box-shadow: 0 0 12px rgba(255,207,138,.7); }
.nightlog strong { display: block; font-size: 15px; font-weight: 600; color: #fff; }
.nightlog li p { margin-top: 4px; font-size: 14px; line-height: 1.75; color: var(--dim); }
.nightlog small { display: inline-block; margin-top: 8px; font-size: 11.5px; letter-spacing: .06em; color: var(--faint); padding: 2px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule-2); }
.nightlog .fine { margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--faint); }
.points { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr; gap: 32px; max-width: 34em; }
.points li { padding-top: 20px; border-top: 1px solid var(--rule-2); }
.points .num { font: 500 12px var(--mono); letter-spacing: .2em; color: var(--lamp); }
.points h3 { margin-top: 14px; font-family: var(--serif); font-weight: 700; font-size: 22px; letter-spacing: .02em; }
.points p { margin-top: 10px; font-size: 15px; line-height: 1.9; color: var(--dim); }
.botchat { margin: 0; max-width: 520px; width: 100%; justify-self: end; padding: 22px; border-radius: 22px; background: #0b0d1a; box-shadow: inset 0 0 0 1px var(--rule); }
.botchat figcaption { font-size: 12px; letter-spacing: .12em; color: var(--faint); margin-bottom: 16px; }
.botchat .me { margin-left: auto; width: fit-content; padding: 8px 14px; border-radius: 16px 16px 4px 16px; background: rgba(168,191,255,.2); font-size: 14px; }
.botchat .bot { margin-top: 10px; padding: 14px 16px; border-radius: 16px 16px 16px 4px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--rule); }
.botchat .sess { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; } .botchat .sess span { font-size: 12.5px; color: var(--faint); }
.botchat .sess-meta { margin-top: 4px; font-size: 12.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.botchat ul { list-style: none; padding: 0; margin-top: 12px; display: grid; gap: 8px; }
.botchat li { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 12px; }
.botchat li img { width: 64px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; display: block; background: var(--surface); }
.botchat li b { display: block; font-size: 13.5px; font-weight: 600; } .botchat li small { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.botchat li em { font-style: normal; font-size: 12.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.botchat .keys { margin-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.botchat .keys span { padding: 8px 4px; border-radius: 10px; text-align: center; font-size: 12.5px; color: var(--dim); background: rgba(255,255,255,.05); }
.tiers { margin-top: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 920px; }
.tier { display: flex; flex-direction: column; padding: 28px; border-radius: 22px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); }
.tier.lit { background: linear-gradient(180deg, rgba(255,207,138,.05), transparent 40%), var(--surface); box-shadow: inset 0 0 0 1px rgba(255,207,138,.35), 0 30px 80px -40px rgba(255,176,102,.35); }
.tier h3 { font-size: 14px; font-weight: 500; color: var(--dim); }
.tier-price { margin-top: 14px; display: flex; align-items: baseline; gap: 8px; }
.tier-price strong { font-family: var(--serif); font-size: clamp(36px, 3.6vw, 48px); font-weight: 700; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.tier-price span { font-size: 15px; color: var(--dim); }
.tier-lede { margin-top: 6px; font-size: 15px; color: var(--text); }
.tier-list { list-style: none; padding: 0; margin: 22px 0 26px; flex: 1; }
.tier-list li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--rule); font-size: 14px; color: var(--dim); }
.tier-list b { color: #fff; font-weight: 600; text-align: right; }
.notes { margin-top: 40px; max-width: 920px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.notes dt { font-size: 14px; font-weight: 600; color: #fff; }
.notes dd { margin: 8px 0 0; font-size: 14px; line-height: 1.85; color: var(--dim); }
@media (max-width: 900px) {
  .split, .notes { grid-template-columns: 1fr; }
  .botchat { justify-self: start; }
}
@media (max-width: 640px) {
  .tiers { grid-template-columns: 1fr; }
  .nightlog, .tier { padding: 22px 20px; }
  .botchat { padding: 18px 16px; }
  .botchat li { grid-template-columns: 52px 1fr auto; gap: 10px; }
  .botchat li img { width: 52px; }
}

/* ---------- 落地页 ---------- */
.land { position: relative; display: flex; flex-direction: column; min-height: 100svh; padding-top: clamp(112px, 16vh, 168px);
  background: linear-gradient(180deg, #11132f 0%, #0c0e24 45%, #0a0b1b 78%, var(--night) 100%); }
.land::before { content: ""; position: absolute; inset: auto 0 0 0; height: 60%; pointer-events: none; background: radial-gradient(50% 60% at 70% 100%, rgba(240,150,120,.12), transparent 70%); }
.land-in { position: relative; z-index: 1; width: 100%; max-width: calc(760px + 2 * var(--m)); margin: 0 auto; padding: 0 var(--m); flex: 1; }
.land > .skyline { margin-top: 64px; }
.state { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--rule-2); animation: rise .6s var(--ease-out) both; }
.state h2 { font-size: 20px; font-weight: 600; letter-spacing: .01em; font-family: var(--sans); }
.note-p { margin-top: 10px; max-width: 36em; font-size: 15px; line-height: 1.85; color: var(--dim); }
.note-p:empty { display: none; }
.room-url { margin-top: 16px; padding: 12px 16px; border-radius: 12px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--rule); font: 13px/1.7 var(--mono); color: var(--text); overflow-wrap: anywhere; user-select: all; }
.room-url:empty { display: none; }
.copy-feedback { color: var(--lamp); }
.lamps { display: flex; gap: 6px; margin-bottom: 18px; }
.lamps i { width: 8px; height: 12px; border-radius: 1px; background: #1b1d36; animation: win 2.4s ease-in-out infinite; }
.lamps i:nth-child(2) { animation-delay: .4s; } .lamps i:nth-child(3) { animation-delay: .8s; }
@keyframes win { 0%, 100% { background: #1b1d36; box-shadow: none; } 35%, 60% { background: var(--lamp); box-shadow: 0 0 12px rgba(255,207,138,.7); } }

/* 专属折扣链接 */
.invite .land-in { flex: none; padding-bottom: 24px; }
.invite-stage { margin-top: 40px; animation: rise .6s var(--ease-out) both; }
.invite-card { padding: 26px; border-radius: 24px; background: rgba(13,14,27,.86); box-shadow: inset 0 0 0 1px var(--rule-2), 0 40px 90px -50px rgba(0,0,0,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.invite-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.invite-card-title { font-family: var(--serif); font-weight: 700; font-size: 22px; letter-spacing: .02em; color: #fff; }
.invite-card-k { font-size: 12px; letter-spacing: .2em; color: var(--faint); }
.invite-card.is-loading .invite-card-k::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 10px; border-radius: 50%; background: var(--lamp); vertical-align: middle; animation: pulse 1.2s ease-in-out infinite; }
.invite-card-from { font-size: 13px; color: var(--faint); }
.invite-base { margin-left: 4px; font-family: var(--mono); font-size: 14px; letter-spacing: .14em; color: var(--lamp); }
.offer-options { margin-top: 18px; display: grid; gap: 8px; }
.offer-option { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 16px; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--rule-2); transition: box-shadow .2s ease, background-color .2s ease, opacity .2s ease; }
.offer-option input { position: absolute; opacity: 0; pointer-events: none; }
.offer-option.is-selected { background: rgba(255,207,138,.06); box-shadow: inset 0 0 0 1.5px rgba(255,207,138,.75); }
.offer-option:has(input:focus-visible) { outline: 2px solid var(--lamp); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .offer-option:not(.is-selected):not(.is-unavailable):hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.34); } }
.offer-option-main { display: grid; gap: 4px; }
.offer-name { font-size: 16px; font-weight: 600; color: #fff; }
.offer-term { font-size: 13px; line-height: 1.6; color: var(--faint); }
.offer-price { display: grid; grid-template-columns: auto auto; align-items: baseline; justify-items: end; column-gap: 10px; }
.offer-discount { grid-column: 1 / 3; margin-bottom: 2px; font-size: 11.5px; font-weight: 600; color: var(--lamp); }
.offer-discount:empty { display: none; }
.offer-now { font-family: var(--serif); font-weight: 700; font-size: 24px; color: #fff; font-variant-numeric: tabular-nums; }
.offer-was { font-size: 13px; color: var(--faint); }
.offer-unavailable { display: none; grid-column: 1 / -1; font-size: 12px; color: var(--faint); }
.offer-option.is-unavailable { opacity: .45; cursor: not-allowed; } .offer-option.is-unavailable .offer-unavailable { display: block; }
.offer-option.is-unavailable .offer-price { display: none; }
.invite-status { margin-top: 14px; padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.7; color: var(--text); background: rgba(255,207,138,.06); box-shadow: inset 2px 0 0 rgba(255,207,138,.5); }
.invite-status:empty { display: none; }
.invite-card .cta-row { margin-top: 22px; }
.offer-terms { margin-top: 22px; padding: 18px 0 0 1.1em; border-top: 1px solid var(--rule); display: grid; gap: 6px; font-size: 12.5px; line-height: 1.75; color: var(--faint); }
.offer-terms li::marker { color: rgba(232,234,250,.25); }
#offer-expiry { color: var(--dim); }
.invite-disclaimer { margin-top: 18px; font-size: 14px; line-height: 1.85; color: var(--dim); }
.invite-title { font-family: var(--serif); font-weight: 700; font-size: 24px; line-height: 1.4; margin-top: 10px; }
.invite-lede { margin-top: 10px; font-size: 15px; line-height: 1.85; color: var(--dim); }
.offer-skeleton { margin-top: 18px; display: grid; gap: 8px; }
.offer-skeleton span { height: 74px; border-radius: 16px; background: linear-gradient(90deg, rgba(255,255,255,.035), rgba(255,255,255,.075), rgba(255,255,255,.035)); background-size: 200% 100%; animation: shimmer 1.6s linear infinite; }
.offer-skeleton span:nth-child(2) { animation-delay: .12s; } .offer-skeleton span:nth-child(3) { animation-delay: .24s; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.invite-more { position: relative; z-index: 1; width: 100%; max-width: calc(760px + 2 * var(--m)); margin: 0 auto; padding: 72px var(--m) 128px; display: grid; gap: 48px; }
.invite-more .sec-h { font-size: clamp(22px, 2.2vw, 28px); }
.invite-more .label { margin: 0 0 12px; }
@media (max-width: 560px) {
  .invite-card { padding: 20px 16px; border-radius: 20px; }
  .offer-option { padding: 14px; gap: 10px; }
  .offer-now { font-size: 21px; }
  .invite-card .cta-row .btn.primary { width: 100%; }
}

/* 微信内置浏览器引导（wechat-guide.js 插入在 body 最前面）：灯色横条，箭头指向右上角的「···」。
   出现时导航退回文档流，落在横条下面，不再盖住它。 */
.wechat-guide-banner { position: relative; z-index: 60; display: flex; gap: 12px; align-items: flex-start; padding: 14px var(--m); background: var(--lamp); color: var(--night); font-size: 14px; line-height: 1.65; font-weight: 500; }
.wechat-guide-text { flex: 1; max-width: 40em; }
.wechat-guide-arrow { order: 2; flex: none; margin-left: auto; font-size: 22px; line-height: 1; font-weight: 700; animation: nudge 1.2s var(--ease-out) .6s 3; }
@keyframes nudge { 50% { transform: translate(3px, -3px); } }
.has-wechat-guide .nav { position: relative; }
.has-wechat-guide .land { padding-top: 40px; }

/* ---------- 404 ---------- */
.lost { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100svh; padding-top: 120px;
  background: linear-gradient(180deg, #0c0e26 0%, #0a0b1c 60%, var(--night) 100%); }
.lost-in { width: 100%; max-width: calc(var(--wrap) + 2 * var(--m)); margin-bottom: auto; padding: clamp(40px, 10vh, 120px) var(--m) 0; }
.lost .skyline { height: clamp(140px, 18vw, 240px); }
.skyline .one { fill: #ffcf8a; animation: lamp 2.4s ease 1.2s forwards; filter: drop-shadow(0 0 5px rgba(255,207,138,.9)); }

/* ---------- 页脚：首页同款 ---------- */
.foot { position: relative; background: var(--night); color: rgba(255,255,255,.5); padding: 48px var(--m) 56px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 40px; font-size: 13px; border-top: 1px solid rgba(255,255,255,.08); }
.foot nav { display: flex; flex-wrap: wrap; gap: 14px 26px; }
.foot a { transition: color .2s ease; }
@media (hover: hover) and (pointer: fine) { .foot a:hover { color: #fff; } }
@media (max-width: 640px) { .foot { flex-direction: column-reverse; gap: 28px; } .foot nav { gap: 14px 22px; } }

@media (max-width: 640px) {
  .nav-in { padding: 14px var(--m); }
  .brand em { display: none; }
  html[lang="en"] .brand b { display: none; } html[lang="en"] .brand em { display: inline; opacity: 1; font-size: 20px; }
  .pill { padding: 0 13px; }
  .sec-p { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; transition-duration: .01s !important; }
  .skyline .w { animation-delay: 0s !important; }
}