@font-face { font-family:"JYX Serif"; src:url(fonts/serif.woff) format("woff"); font-weight:600; font-display:swap; }   /* 只含标题用字，见 tools/font.py */
:root { --ink:#eef1f6; --sub:#98a1b3; --line:rgba(255,255,255,.12); --acc:#ffcf94; --glass:rgba(9,12,20,.6); }
* { box-sizing:border-box; margin:0; padding:0; }
html, body { background:#000; color:var(--ink); font:15px/1.8 "Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
.gl, .gl body { height:100%; overflow:hidden; }
canvas#c { position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; outline:none; }
.serif { font-family:"JYX Serif","Noto Serif SC","Source Han Serif SC","Songti SC","STSong",serif; }
.gl .ui { opacity:0; pointer-events:none; transition:opacity .9s ease; }
.gl .ui.on { opacity:1; pointer-events:auto; }

#fade { position:fixed; inset:0; z-index:30; background:#000; pointer-events:none; transition:opacity 1s ease; }
#loading { position:fixed; inset:0; z-index:31; display:grid; place-items:center; color:var(--sub); font-size:12px; letter-spacing:.5em; transition:opacity .6s; }

.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border:1px solid rgba(255,255,255,.3); border-radius:999px; background:rgba(255,255,255,.04); color:var(--ink); font:inherit; font-size:13.5px; line-height:1; cursor:pointer; text-decoration:none; transition:border-color .25s, color .25s, background .25s; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.btn:hover { border-color:var(--acc); color:var(--acc); }
.btn.solid { background:var(--ink); border-color:var(--ink); color:#05070c; }
.btn.solid:hover { background:var(--acc); border-color:var(--acc); color:#05070c; }

#top { position:fixed; left:28px; right:28px; top:20px; z-index:8; display:flex; justify-content:space-between; align-items:center; font-size:11px; letter-spacing:.32em; color:var(--sub); pointer-events:none; }
#top .brand b { color:var(--ink); font-weight:500; }
#ov { padding:8px 16px; font-size:12px; letter-spacing:.12em; }

.gl #hero { position:fixed; left:7vw; bottom:11vh; z-index:4; max-width:560px; }
.gl #hero :is(.k, .sub) { display:none; }   /* 总览只留名字、一句话和入口，画面让给太阳系 */
#hero .k { font-size:11px; letter-spacing:.5em; color:var(--acc); }
#hero h1 { margin:14px 0 12px; font-weight:600; font-size:clamp(40px,5vw,72px); line-height:1.05; letter-spacing:.16em; text-shadow:0 0 50px rgba(0,0,0,.7); }
#hero p { color:var(--sub); text-shadow:0 0 20px #000; }
#hero p.lead { color:var(--ink); font-size:17px; }
#hero .row { display:flex; align-items:center; gap:18px; margin-top:28px; flex-wrap:wrap; }
#hero .row span { font-size:11.5px; letter-spacing:.2em; color:var(--sub); }

#nav { position:fixed; left:28px; top:50%; z-index:6; transform:translateY(-50%); display:flex; flex-direction:column; gap:1px; }
#nav button { display:flex; align-items:center; gap:12px; padding:6px 0; border:0; background:none; color:var(--sub); font:inherit; font-size:12.5px; letter-spacing:.1em; text-align:left; cursor:pointer; transition:color .3s; transform-origin:0 50%; will-change:transform; }
#nav button i { flex:none; width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.5; transition:.35s; }
#nav button span { font-size:11px; opacity:.5; transition:opacity .3s; }
#nav button:hover, #nav button.on { color:var(--ink); }
#nav button:hover span, #nav button.on span { opacity:.85; }
#nav button.on i { opacity:1; background:var(--acc); transform:scale(1.5); }

.lbl { position:fixed; left:0; top:0; z-index:3; display:flex; align-items:center; gap:8px; font-size:12px; line-height:1; white-space:nowrap; color:var(--ink); cursor:pointer; opacity:0; pointer-events:none; transition:opacity .5s; will-change:transform; }
.lbl.on { opacity:1; pointer-events:auto; }
.lbl::before { content:""; width:18px; height:1px; background:rgba(255,255,255,.4); transition:width .3s, background .3s; }
.lbl b { font-weight:500; letter-spacing:.14em; }
.lbl span { font-size:11px; color:var(--sub); }
.lbl:hover b { color:var(--acc); }
.lbl:hover::before { width:28px; background:var(--acc); }
.lbl.sat { font-size:10.5px; color:var(--sub); pointer-events:none; }
.lbl.sat::before { width:10px; }
.lbl.sat.on { pointer-events:none; }

#panel { position:fixed; right:5vw; top:50%; z-index:7; width:min(430px,36vw); max-height:82vh; overflow:auto; overscroll-behavior:contain; padding:32px 32px 26px; border:1px solid var(--line); border-radius:22px; background:var(--glass); backdrop-filter:blur(18px) saturate(1.15); -webkit-backdrop-filter:blur(18px) saturate(1.15); opacity:0; pointer-events:none; transform:translateY(-50%) translateX(36px); transition:opacity .7s ease, transform 1s cubic-bezier(.16,.84,.24,1); scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.2) transparent; }
#panel.on { opacity:1; pointer-events:auto; transform:translateY(-50%); }
.body .k { font-size:11px; letter-spacing:.38em; color:var(--acc); }
.body .fact { margin:8px 0 18px; padding-left:12px; border-left:1px solid rgba(255,207,148,.45); font-size:12px; line-height:1.6; color:var(--sub); }
.body h2 { margin-bottom:12px; font-weight:600; font-size:30px; line-height:1.3; letter-spacing:.04em; }
.body h3 { margin:18px 0 4px; font-size:15px; font-weight:600; }
.body p { color:#cfd5df; }
.body p + p { margin-top:10px; }
.body ul { margin-top:12px; padding-left:1.1em; color:#cfd5df; }
.body li { margin:6px 0; }
.body li::marker { color:var(--acc); }
.body li b { color:var(--ink); font-weight:600; }
.body .note { margin-top:14px; font-size:12.5px; color:var(--acc); }
.body .tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }
.body .tags span { padding:3px 10px; border:1px solid var(--line); border-radius:999px; font-size:12px; color:var(--sub); }
.body .shots { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:18px; }
.body .shots img { width:100%; aspect-ratio:9/16; object-fit:cover; object-position:top; border:1px solid var(--line); border-radius:10px; background:#111; }
.body ol.aw { margin-top:8px; list-style:none; counter-reset:a; }
.body ol.aw li { display:grid; grid-template-columns:22px 1fr; margin:0; padding:11px 0; border-top:1px solid var(--line); counter-increment:a; }
.body ol.aw li::before { content:counter(a); font:12px/1.9 ui-monospace,Consolas,monospace; color:var(--acc); }
.body ol.aw li b { display:block; font-weight:500; color:var(--ink); }
.body ol.aw li span { font-size:13px; color:var(--sub); }
.body .acts { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
#panel .foot { display:flex; justify-content:space-between; gap:10px; margin-top:26px; padding-top:16px; border-top:1px solid var(--line); }
#panel .foot button { padding:4px 0; border:0; background:none; color:var(--sub); font:inherit; font-size:12.5px; letter-spacing:.08em; cursor:pointer; transition:color .25s; }
#panel .foot button:hover { color:var(--acc); }
#panel .foot button:only-child { margin-left:auto; }

#hint { position:fixed; left:50%; bottom:30px; z-index:4; transform:translateX(-50%); font-size:11px; letter-spacing:.3em; color:var(--sub); white-space:nowrap; }

.body dl.cv { display:grid; grid-template-columns:auto 1fr; gap:10px 16px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.body dl.cv dt { font-size:12px; letter-spacing:.2em; color:var(--acc); line-height:1.9; }
.body dl.cv dd { color:#cfd5df; }

#icp a, .body .icp a { color:var(--sub); text-decoration:none; }
#icp a:hover, .body .icp a:hover { color:var(--acc); }
.body .icp { margin-top:14px; font-size:11px; text-align:center; letter-spacing:.06em; }
.gl #icp { position:fixed; left:0; right:0; bottom:6px; z-index:4; text-align:center; font-size:11px; letter-spacing:.06em; }

/* ---------------- 3D 模式：内容段只给面板取用，不直接显示 ---------------- */
.gl #doc > section.body { display:none; }

/* ---------------- 文档模式：没有 JS、没有 WebGL2 或带 ?doc 时，按长页面阅读 ---------------- */
html:not(.gl) :is(#c, #labels, #top, #nav, #panel, #hint, #fade, #loading) { display:none; }
html:not(.gl) body {
  min-height:100vh;
  background:
    radial-gradient(ellipse 70% 40% at 50% -8%, rgba(255,190,110,.22), transparent 70%),
    radial-gradient(1px 1px at 12% 18%, #fff8, transparent), radial-gradient(1px 1px at 68% 9%, #fff6, transparent),
    radial-gradient(1px 1px at 84% 34%, #fff7, transparent), radial-gradient(1px 1px at 31% 47%, #fff5, transparent),
    radial-gradient(1.5px 1.5px at 52% 72%, #fff6, transparent), radial-gradient(1px 1px at 7% 81%, #fff5, transparent),
    radial-gradient(1px 1px at 91% 88%, #fff6, transparent), #000;
  background-size:100% 100%, 420px 420px, 420px 420px, 420px 420px, 420px 420px, 420px 420px, 420px 420px, 420px 420px, auto;
  background-attachment:fixed;
}
html:not(.gl) #doc { max-width:720px; margin:0 auto; padding:0 20px; }
html:not(.gl) #hero { padding:24vh 0 12vh; }
html:not(.gl) #doc > section.body { margin-top:24px; padding:32px; border:1px solid var(--line); border-radius:22px; background:var(--glass); }
html:not(.gl) #icp { padding:40px 20px 32px; text-align:center; font-size:12px; }
@media (max-width:760px) { html:not(.gl) #doc > section.body { padding:24px 20px; } }

@media (max-width:760px), (max-aspect-ratio:4/5) {
  #top { left:16px; right:16px; top:14px; }
  #top .brand span { display:none; }
  .gl #hero { left:20px; right:20px; bottom:11vh; }
  #hero p.lead { font-size:15px; }
  #nav { left:0; right:0; top:52px; transform:none; flex-direction:row; gap:18px; padding:0 16px; overflow-x:auto; scrollbar-width:none; -webkit-mask:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent); mask:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent); }
  #nav::-webkit-scrollbar { display:none; }
  #nav button { flex:none; gap:7px; padding:6px 0; }
  #nav button span { display:none; }
  #panel { left:10px; right:10px; top:auto; bottom:10px; width:auto; max-height:52vh; padding:22px 20px 18px; border-radius:18px; transform:translateY(40px); }
  #panel.on { transform:none; }
  .body h2 { font-size:24px; }
  .body .fact { margin-bottom:14px; }
  .lbl span { display:none; }
  #hint { display:none; }
}