/* 平滑过渡的发光参数（@property 注册后可被 transition 插值） */
@property --glow-intensity { syntax: '<number>'; inherits: true; initial-value: 0.4; }
@property --hue-shift { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
:root { --bg: #03040d; --fg: #e8ecff; --muted: #8f9ad0; --accent: #ffd36b; --panel: #0b1030d9; --line: #2a3570;
  --btn: #2b3a8a; --btn-h: #3a4cb0; --radius: 12px; --ease-pop: cubic-bezier(.34, 1.56, .64, 1); --cat: var(--c-经典, #ffd36b); }
* { box-sizing: border-box }
body { margin: 0; min-height: 100vh; color: var(--fg); font-family: system-ui, "PingFang SC", "Noto Sans CJK SC", sans-serif;
  background: radial-gradient(ellipse at 50% 100%, #1b2a5a 0%, #0a0f2a 50%, var(--bg) 100%) }
#sky, #sky-fallback { position: fixed; inset: 0; z-index: -1; pointer-events: none; width: 100%; height: 100% }
#sky { --star-density: 1.6 } .paint #sky { background-image: paint(starfield) } .paint #sky-fallback { display: none }
header { display: flex; gap: 14px; align-items: center; padding: 10px 18px; background: #0009; backdrop-filter: blur(6px); flex-wrap: wrap; position: sticky; top: 0; z-index: 5 }
.logo { font-size: 20px; font-weight: 700; color: var(--accent); text-decoration: none; text-shadow: 0 0 calc(var(--glow-intensity, .4) * 20px) #ffd36b88 }
nav a { color: #b9c4ff; margin-inline-end: 10px; text-decoration: none; transition: color .2s } nav a:hover { color: #fff }
#mode { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; font-size: 13px; flex-wrap: wrap }
.badge { padding: 3px 8px; border-radius: 10px; background: #333a; border: 1px solid #556 } .b-self { border-color: #9b7bff; color: #cbb8ff } .b-host { border-color: #ffb347; color: #ffd08a }
/* 按钮：浮入、悬停上浮发光、按下缩放 */
button, .btn { --glow-intensity: .25; font: inherit; border-radius: 10px; border: 1px solid #4a5590; background: var(--btn); color: var(--fg); padding: 7px 14px; cursor: pointer;
  box-shadow: 0 0 calc(var(--glow-intensity) * 24px) hsl(calc(220deg + var(--hue-shift, 0deg)) 90% 70% / .6);
  transition: transform .18s var(--ease-pop), --glow-intensity .3s, --hue-shift .6s, background .2s; animation: floatUp .5s var(--ease-pop) both; text-decoration: none; display: inline-block }
button:hover:not(:disabled), .btn:hover { --glow-intensity: .9; --hue-shift: 40deg; transform: translateY(-2px); background: var(--btn-h) }
button:active:not(:disabled) { transform: scale(.94) } button:disabled { opacity: .45; cursor: not-allowed; animation: none }
.primary { --btn: #8a5a10; --btn-h: #b07818; border-color: var(--accent) }
.breathe { animation: breathe 2.4s ease-in-out infinite }
@keyframes floatUp { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@keyframes breathe { 0%, 100% { --glow-intensity: .2; opacity: .75 } 50% { --glow-intensity: 1; opacity: 1 } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-24px) } to { opacity: 1; transform: none } }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } } @keyframes pop { from { opacity: 0; transform: scale(.7) } to { opacity: 1; transform: none } }
input, select, textarea { font: inherit; border-radius: 8px; border: 1px solid #4a5590; background: #141a3a; color: var(--fg); padding: 6px 10px }
main { max-width: 1100px; margin: 0 auto; padding: 16px } #banner { text-align: center; font-size: 13px; color: #ffd08a }
main > * { animation: slideIn .45s ease-out both }
.scene { position: relative; width: 100%; height: min(72vh, 680px); border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--bg) }
.scene canvas { display: block; width: 100%; height: 100% }
.scene-ui { position: absolute; left: 10px; top: 10px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 2 } .scene-ui button { padding: 4px 10px; font-size: 13px }
.scene-ui .on { --btn: #6a3cff } .scene-hint { position: absolute; bottom: 10px; width: 100%; text-align: center; font-size: 12px; color: var(--muted); pointer-events: none }
#tip { position: fixed; z-index: 9; max-width: 280px; background: #0b1030ee; border: 1px solid var(--cat); padding: 10px; border-radius: 10px; font-size: 14px; pointer-events: none; animation: fade .15s }
/* 分类色（作用域覆盖 --cat） */
[data-cat="经典"] { --cat: #ffd36b } [data-cat="风景"] { --cat: #6ec8ff } [data-cat="人物"] { --cat: #ffb3cf } [data-cat="动物"] { --cat: #3ddc97 } [data-cat="卡通"] { --cat: #ff9f43 } [data-cat="物质类"] { --cat: #c9a0ff }
.tag { display: inline-block; padding: 1px 8px; border-radius: 8px; background: color-mix(in srgb, var(--cat) 25%, transparent); color: var(--cat); border: 1px solid var(--cat); font-size: 12px }
.card { --glow-intensity: .15; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--cat, var(--line)); border-radius: var(--radius); padding: 14px; margin: 10px 0;
  box-shadow: 0 0 calc(var(--glow-intensity) * 30px) color-mix(in srgb, var(--cat) 60%, transparent); transition: transform .25s var(--ease-pop), --glow-intensity .3s }
.card.hover:hover { --glow-intensity: .8; transform: translateY(-3px) } .muted { color: var(--muted); font-size: 13px }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center } textarea { width: 100%; min-height: 90px } a { color: #9fc0ff }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px }
.notice { border: 1px solid #ffb347; background: #3a2a0a99; padding: 10px; border-radius: 10px; font-size: 14px } .agree { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0; font-size: 14px }
.modal { position: fixed; inset: 0; background: #000a; display: grid; place-items: center; z-index: 20; animation: fade .25s ease }
.modal-box { background: #0d1336; border: 1px solid var(--cat, var(--line)); border-radius: 16px; padding: 20px; width: min(92vw, 440px); animation: pop .45s var(--ease-pop) both }
#toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 30 }
.toast { background: #141a3a; border-left: 4px solid #9bf; padding: 10px 14px; border-radius: 8px; max-width: 360px; font-size: 14px; animation: slideIn .3s } .toast.ok { border-color: #6f6 } .toast.err { border-color: #f66 }
footer { text-align: center; color: #6c76a8; font-size: 12px; padding: 20px } h2 { color: var(--accent) } .spectrum { width: 96px; height: 96px; border-radius: 50% }
.stage { font-size: 13px; color: var(--accent) } .reject { color: #ff8a8a }
@media (max-width: 700px) { nav a { margin-inline-end: 6px; font-size: 14px } .scene { height: 62vh } }
@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important } }
[hidden] { display: none !important }
/* 千亿级导航 */
.scene-nav { position: absolute; right: 10px; top: 10px; z-index: 2; text-align: right; font-size: 12px; max-width: 60% }
.scene-nav .crumbs { display: flex; gap: 3px; flex-wrap: wrap; justify-content: flex-end; align-items: center } .scene-nav button { padding: 3px 8px; font-size: 12px }
.scene-tools { margin: 8px 0; align-items: center } .scene-tools input { padding: 6px 8px }
@media (max-width: 700px) { .scene-nav { top: auto; bottom: 46px; right: 6px; max-width: 94% } .scene-hint { font-size: 10px; bottom: 4px; padding: 0 6px; box-sizing: border-box } }
/* 全屏 3D 首页背景：场景固定铺满视口，UI 叠加其上 */
body.home main { max-width: none; padding: 0 12px; pointer-events: none; position: relative; z-index: 1 }
body.home main > *:not(.scene) { pointer-events: auto; max-width: 1100px; margin-left: auto; margin-right: auto }
body.home main > .home-spacer { pointer-events: none; height: calc(100dvh - 230px) }
body.home footer { position: relative; z-index: 1; background: #02030bcc }
body.home header { background: #02030b66 } body.home #banner { position: relative; z-index: 2 }
.scene { position: fixed; inset: 0; width: 100vw; height: 100dvh; border: 0; border-radius: 0; z-index: 0; animation: none !important; background: #02030b }
.scene .scene-ui { top: 64px } .scene .scene-nav { top: 64px }
.home-dock { background: #0b0a24b3; backdrop-filter: blur(8px); border: 1px solid #e8b85a55; border-radius: 14px; padding: 6px 12px; box-shadow: 0 0 30px #ffb34722 }
.home-dock .scene-tools { margin: 4px 0 } .home-dock .scene-hint { position: static; padding-bottom: 2px }
.glass { background: #0b0a24c0; backdrop-filter: blur(8px); border: 1px solid #ffffff18; border-radius: 14px; padding: 4px 14px; margin-top: 18px }
@media (max-width: 700px) { .scene .scene-ui { top: 96px; left: 6px } .scene .scene-ui button { font-size: 11px; padding: 3px 7px }
  .scene .scene-nav { top: auto; bottom: auto; top: 128px; right: 6px } body.home main > .home-spacer { height: calc(100dvh - 300px) } .home-dock .scene-hint { font-size: 10px } }
.home-dock .scene-hint { pointer-events: auto }
body.home main > .scene { pointer-events: auto }
.scene .scene-ui, .scene .scene-nav { top: calc(var(--hdr, 56px) + 8px) }
@media (max-width: 700px) { .scene .scene-nav { top: calc(var(--hdr, 90px) + 40px) } }
body.home #banner { pointer-events: none; padding: 2px 6px }
/* 语言切换（地球图标下拉） */
#lang { position: relative; font-size: 13px }
#langbtn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px } #langbtn svg { flex: none }
#langmenu { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: #0b1030f2; border: 1px solid var(--line); border-radius: 10px; z-index: 40; max-height: 70vh; overflow-y: auto; min-width: 170px; box-shadow: 0 8px 30px #0008 }
#langmenu li { padding: 8px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; text-align: start } #langmenu li:hover, #langmenu li:focus { background: var(--btn-h); outline: none }
#langmenu li[aria-selected=true] { color: var(--accent); font-weight: 700 }
@media (max-width: 700px) { #lang { position: absolute; top: 10px; inset-inline-end: 12px } .logo { padding-inline-end: 56px } .lang-cur { display: none } #langbtn { padding: 6px 8px } #langmenu li { padding: 10px 14px } }
.prevail { font-size: 13px }
[dir=rtl] #toasts { right: auto; left: 16px } [dir=rtl] code { direction: ltr; unicode-bidi: embed }

.fulfill-badge { --cat: #ffd36b; background: linear-gradient(135deg, #7a4cff55, #ffd36b44); border-color: #ffd36b; color: #ffe9a8; margin-inline-start: 6px; animation: breathe 2.8s ease-in-out infinite }
.toast.celebrate { border: 1px solid #ffd36b; background: linear-gradient(135deg, #2a1a5acc, #5a3a10cc); box-shadow: 0 0 28px #ffd36b66; font-size: 16px }

/* 极简头部 + 右侧滑出菜单（ampleforth 风格） */
header { position: fixed; top: 0; left: 0; right: 0; height: 52px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; background: transparent !important; backdrop-filter: none; z-index: 15; pointer-events: none }
header > * { pointer-events: auto }
body { padding-top: 52px } body.home { padding-top: 0 }
body:not(.home) header { background: linear-gradient(#03040dcc, #03040d00) !important }
.logo { display: inline-flex; color: #fff; padding: 6px; text-shadow: none } .logo:hover { color: var(--accent) }
.icon-btn { all: unset; pointer-events: auto; cursor: pointer; display: inline-grid; place-items: center; width: 40px; height: 40px; color: #fff; border-radius: 6px }
.icon-btn:hover, .icon-btn:focus-visible { background: #ffffff1a } .icon-btn:focus-visible { outline: 2px solid #7ee787 }
#menu-bd { position: fixed; inset: 0; z-index: 40; background: #0008; animation: fade .3s ease; touch-action: none }
#menu { position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: min(78vw, 440px); z-index: 41; background: #0d0d0d; color: #e6e6e6; overflow-y: auto; overscroll-behavior: contain;
  padding: 84px 32px 40px; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Courier New", monospace; letter-spacing: .08em;
  transform: translateX(100%); opacity: 0; visibility: hidden; transition: transform .38s cubic-bezier(.2,.8,.2,1), opacity .3s, visibility 0s .38s }
[dir=rtl] #menu { transform: translateX(-100%) }
body.menu-open #menu { transform: none; opacity: 1; visibility: visible; transition: transform .38s cubic-bezier(.2,.8,.2,1), opacity .3s }
body.menu-open { overflow: hidden }
#menu-x { position: absolute; top: 0; inset-inline-end: 0; width: 52px; height: 52px; border-radius: 0; background: #000 } #menu-x:hover { background: #222 }
#menu nav { display: flex; flex-direction: column }
#menu nav a, #mode .mlink { color: #e6e6e6; text-transform: uppercase; font-size: 14px; padding: 18px 0; margin: 0; text-decoration: none; transition: color .2s, padding .2s }
#menu nav a:hover, #mode .mlink:hover { color: #fff; padding-inline-start: 6px }
#menu .acc, #mode .mlink { color: #7ee787 } #menu .acc::before, #mode .mlink::before { content: "# "; font-weight: 700 }
#menu nav a.cur { color: #fff; text-decoration: underline; text-underline-offset: 6px }
.menu-sec { margin-top: 26px; padding-top: 18px; border-top: 1px solid #ffffff1a } .menu-h { font-size: 11px; color: #777; text-transform: uppercase; margin-bottom: 8px }
#menu #mode { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0; font-size: 13px }
#mode .mlink { all: unset; pointer-events: auto; cursor: pointer; color: #7ee787; text-transform: uppercase; font-size: 14px; padding: 12px 0; letter-spacing: .08em }
#mode .badge { font-family: inherit; margin-bottom: 6px; word-break: break-all }
#menu #lang { position: static } #menu #langbtn { font-family: inherit; animation: none; background: transparent; border-color: #444; box-shadow: none }
#menu #langmenu { position: static; margin-top: 8px; background: #161616; border-color: #333; max-height: 40vh }
#menu #lang .lang-cur { display: inline }
.scene .scene-ui, .scene .scene-nav { top: calc(var(--hdr, 52px) + 6px) } body.home #banner { margin-top: 52px }
@media (max-width: 700px) { #menu { width: 82vw; padding: 76px 26px 32px } .logo { padding-inline-end: 6px } .scene .scene-ui { top: calc(var(--hdr, 52px) + 6px) } .scene .scene-nav { top: calc(var(--hdr, 52px) + 40px) } }
body.home #banner { margin-top: 52px }

/* 调试控件：默认隐藏；body.debug（?debug=1 / localStorage wt_debug=1）时显示 */
.debug-only { display: none !important; }
body.debug .scene-ui.debug-only { display: flex !important; }
body.debug .home-lists.debug-only { display: grid !important; }
body.debug span.debug-only { display: inline !important; }
body.debug .scene-nav.debug-only, body.debug .home-dock.debug-only { display: block !important; }
body.home:not(.debug) main > .home-spacer { height: calc(100dvh - 100px) }
@media (max-width: 700px) { body.home:not(.debug) main > .home-spacer { height: calc(100dvh - 120px) } }
body.home:not(.debug) main > .home-spacer { display: none }
html:has(body.home:not(.debug)), body.home:not(.debug) { overflow: hidden; height: 100dvh; overscroll-behavior: none }
body.home:not(.debug) footer { position: fixed; left: 0; right: 0; bottom: 0; background: transparent }
body.debug footer.debug-only { display: block !important }
/* 封面选择 */
.cover-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 6px; margin: 6px 0 }
.cover-grid button { padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: none; line-height: 0 }
.cover-grid button.on { border-color: #e8b85a; box-shadow: 0 0 0 2px #e8b85a55 }
.cover-grid img { width: 100%; aspect-ratio: 3/4; object-fit: cover }
/* 折页卡：封面绕左侧书脊翻开 */
.fold { position: relative; width: min(320px, 78vw); aspect-ratio: 3/4; margin: 4px auto; perspective: 1400px }
.fold-page { position: absolute; inset: 0; border-radius: 10px; padding: 18px 16px; box-sizing: border-box; overflow: auto; color: #3a2410;
  background: linear-gradient(160deg, #fbf3df, #efdcb4); box-shadow: inset 0 0 0 1px #c9a46a, inset 8px 0 14px -8px #8a5a2088 }
.fold-page .muted { color: #7a5a3a } .fold-text { font-size: 19px; line-height: 1.5; margin: .5em 0 }
.fold-cover { position: absolute; inset: 0; transform-origin: left center; transform-style: preserve-3d; transition: transform 1.1s cubic-bezier(.3,.7,.2,1); cursor: pointer; z-index: 2 }
.fold.open .fold-cover { transform: rotateY(-158deg); pointer-events: none }
.fold-front, .fold-back { position: absolute; inset: 0; border-radius: 10px; overflow: hidden; backface-visibility: hidden; box-shadow: 0 6px 18px #0006 }
.fold-front img { width: 100%; height: 100%; object-fit: cover; display: block }
.fold-back { transform: rotateY(180deg); background: linear-gradient(200deg, #f3e4c4, #d9bd88) }
.fold-lock { position: absolute; top: 10px; right: 10px; font-size: 26px; background: #0008; border-radius: 50%; width: 44px; height: 44px; display: grid; place-items: center }
.fold-hint { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; color: #fff; font-size: 13px; text-shadow: 0 1px 3px #000 }
.fold.locked .fold-page { display: grid; place-items: center; text-align: center }
.fold.shake .fold-cover { animation: fshake .45s }
@keyframes fshake { 25% { transform: rotateY(-8deg) } 75% { transform: rotateY(-3deg) } }

/* 菜单：光栖手风琴 */
#menu nav .gq { all: unset; cursor: pointer; color: #e6e6e6; text-transform: uppercase; font-size: 14px; padding: 18px 0; font-family: inherit }
#menu nav .gq::after { content: " +"; color: #777 } #menu nav .gq[aria-expanded=true]::after { content: " −" } #menu nav .gq:hover { color: #fff }
#menu .gqsub { display: flex; flex-direction: column; padding-inline-start: 18px; border-inline-start: 1px solid #ffffff22; margin-bottom: 6px } #menu .gqsub[hidden] { display: none }
#menu .gqsub a { padding: 12px 0 !important; font-size: 13px !important; color: #bbb } #menu .gqsub a::before { content: "└ "; color: #555 }
/* 光栖起源 */
.origin { max-width: 680px; margin: 24px auto 60px; padding: 34px 26px; background: linear-gradient(180deg, #0b0a24e6, #070616f0); border: 1px solid #e8b85a33; border-radius: 16px;
  color: #e9e3d4; font-family: "Noto Serif CJK SC", "Songti SC", serif; line-height: 2; letter-spacing: .04em; box-shadow: 0 0 60px #6a3cff22 }
.origin h1 { text-align: center; font-size: 24px; color: #f3d48a; letter-spacing: .2em; margin: 0 0 1.4em; font-weight: 600 }
.origin h3 { color: #f3d48a; font-size: 17px; margin: 1.8em 0 .5em; padding-bottom: .3em; border-bottom: 1px solid #e8b85a33; letter-spacing: .15em }
.origin p { margin: .7em 0 } .origin b { color: #ffe2a8 } .origin ul { padding-inline-start: 1.2em; margin: .4em 0 } .origin li { margin: .7em 0 } .origin li::marker { color: #e8b85a }

/* 首页放大镜搜索 */
.qbtn { position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 5; width: 50px; height: 50px; border-radius: 50%; padding: 0; display: grid; place-items: center;
  background: #0b0a24cc; color: #f3e2b8; border: 1px solid #e8b85a66; backdrop-filter: blur(8px); box-shadow: 0 4px 18px #0008 } [dir=rtl] .qbtn { right: auto; left: 16px }
body:not(.home) .qbtn { display: none }
.qres { max-height: 40vh; overflow: auto; margin: 8px 0; display: flex; flex-direction: column; gap: 4px } .qhit { text-align: start; white-space: normal }
.pager { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px } .pager #pgl { flex: 1; text-align: center }
/* 我的星愿 */
.mw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
.mw { position: relative; padding: 0; border-radius: 10px; overflow: hidden; background: #1a1430; border: 1px solid #c9a86a55; text-align: left; color: inherit }
.mw img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block }
.mw span { display: block; font-size: 12px; padding: 4px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.mw i { position: absolute; top: 4px; right: 4px; font-style: normal }
.up-row { display: flex; gap: 10px; margin: 6px 0 }
.up-box { flex: 1; position: relative; aspect-ratio: 3/4; border: 1.5px dashed #c9a86a; border-radius: 10px; display: grid; place-items: center; cursor: pointer; overflow: hidden; text-align: center; font-size: 13px; padding: 6px }
.up-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.fold-inimg { width: 100%; max-height: 45%; object-fit: cover; border-radius: 8px; display: block; margin-bottom: 8px }
.up-box.sm { aspect-ratio: 3/2; max-width: 140px; }
button.link { background: none; border: none; color: #c9a86a; text-decoration: underline; cursor: pointer; font-size: 13px; padding: 4px }
.fold-inbg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .55; border-radius: 10px; pointer-events: none }
.fold-inbody { position: relative; z-index: 1 }
#sync { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 30; background: #0b0f2acc; border: 1px solid #c9a86a55; color: #e8d9b5; font-size: 12px; padding: 4px 12px; border-radius: 14px; pointer-events: none }
#sync[hidden] { display: none }
#waking { position: fixed; left: 50%; top: 64px; transform: translateX(-50%); z-index: 40; background: #2a1d0ecc; border: 1px solid #c9a86a88; color: #f3e2b8; font-size: 12px; padding: 5px 14px; border-radius: 14px; pointer-events: none }
#waking[hidden] { display: none }