/* ===== 2026-10-23 · 归档页（本命星官 · 方案 D 地平仰望）：背景 = 首页星空引擎 ===== */
html.sl-arch,html.sl-arch body{overflow:hidden!important;height:100%}
html.sl-arch main.pgm,html.sl-arch footer.ft,html.sl-arch .lede,html.sl-arch .tray,html.sl-arch .edges,html.sl-arch .cmp,html.sl-arch .pan,
html.sl-arch .stage .sl,html.sl-arch .stage .sl2,html.sl-arch .sl-now,html.sl-arch .rside{visibility:hidden!important;pointer-events:none!important}
html.sl-arch .stage{pointer-events:none!important}
html.sl-arch .hero{z-index:3}
#arx{position:fixed;inset:0;z-index:2;color:#EAF0FF;font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Helvetica Neue','Microsoft YaHei',sans-serif;font-size:15px;line-height:1.6;opacity:0;transition:opacity .8s;
  --serif:'Noto Serif SC','Songti SC','STSong',serif;--mono:ui-monospace,'SF Mono',Menlo,monospace;
  --ink:#EAF0FF;--ink2:#BAC4DC;--ink3:#8D98B3;--line:rgba(180,195,230,.16);--line2:rgba(180,195,230,.32);--warm:#FFB38A;
  --glass:rgba(8,12,28,.5);--panel:rgba(9,13,28,.66);--btnbg:#EEF2FA;--btnfg:#13213A;--hs:0 1px 14px rgba(0,0,10,.4);--dimbg:rgba(5,8,16,.62)}
#arx.on{opacity:1}
#arx.ink-dark{--ink:#14213A;--ink2:#3E4C66;--ink3:#5E6A82;--line:rgba(20,40,70,.13);--line2:rgba(20,40,70,.26);--warm:#D9692F;--glass:rgba(255,255,255,.55);--panel:rgba(255,255,255,.7);--btnbg:#13213A;--btnfg:#EEF2FA;--hs:0 1px 12px rgba(255,255,255,.5);--dimbg:rgba(235,238,244,.6)}
#arx>.dim{position:absolute;inset:0;background:var(--dimbg);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);opacity:0;pointer-events:none}
#arx canvas.cv{position:absolute;inset:0;width:100%;height:100%}
#arx button{font:inherit;cursor:pointer}
#arx .kk{font:11px var(--mono);letter-spacing:.24em;color:var(--ink3);text-transform:uppercase}
#arx .kk em{font-style:normal;color:var(--warm);background:none;padding:0;border:0;box-shadow:none;font:inherit;letter-spacing:inherit}
#arx .mono3{font:11.5px var(--mono);color:var(--ink3)}
#arx .gt{font-family:var(--serif);font-weight:900;letter-spacing:.05em;line-height:1.08;margin:10px 0 8px;color:var(--ink);text-shadow:var(--hs)}
#arx .btn{flex:none;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 20px;border-radius:999px;background:var(--btnbg);color:var(--btnfg);font-weight:600;font-size:14px;border:0;transition:transform .2s,box-shadow .2s}
#arx .btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.25)}
#arx .btn.o{background:var(--glass);color:var(--ink);border:1px solid var(--line2);backdrop-filter:blur(12px)}
#arx .pill{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:999px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(14px);font:12.5px var(--mono);color:var(--ink)}
#arx .ar-hero{position:absolute;left:80px;top:150px;width:340px;text-shadow:var(--hs);transition:opacity .5s,transform .6s}
#arx .ar-hero .gt{font-size:68px}
#arx .ar-hero .sub{font-family:var(--serif);font-size:19px;margin:0 0 12px}
#arx .ar-hero p.lead{color:var(--ink2);font-size:14px;line-height:1.75;margin:0 0 20px}
#arx .stats{display:flex;gap:18px;align-items:baseline;margin-bottom:22px;font-size:13px;color:var(--ink3)}
#arx .stats b{font:500 26px var(--mono);color:var(--ink);margin-right:4px}
#arx .btns{display:flex;gap:10px}
#arx.diving .ar-hero,#arx.yearv .ar-hero{opacity:0;transform:translateX(-30px);pointer-events:none}
#arx .ar-labels{position:absolute;inset:0;pointer-events:none;transition:opacity .35s}
#arx.diving .ar-labels,#arx.yearv .ar-labels{opacity:0}
#arx .yl{position:absolute;left:0;top:0;pointer-events:auto;cursor:none;text-align:center;transform:translate(-50%,-100%);padding:0 6px 10px;transition:opacity .3s}
#arx .yl i{display:block;font:9.5px var(--mono);letter-spacing:.2em;color:var(--ink3);font-style:normal}
#arx .yl b{display:block;font:700 17px var(--serif);letter-spacing:.14em;color:var(--ink);text-shadow:var(--hs)}
#arx .yl:after{content:'';position:absolute;left:50%;bottom:0;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;border:1px solid var(--ink2)}
#arx .yl.dim{opacity:.28}
#arx .yl.on b{color:var(--warm)}
#arx .yl.on:after{background:var(--warm);border-color:var(--warm);box-shadow:0 0 10px var(--warm)}
#arx .ar-tip{position:absolute;left:0;top:0;min-width:210px;padding:12px 14px;border-radius:14px;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(16px);pointer-events:none;opacity:0;transition:opacity .2s;font-size:12.5px;color:var(--ink2);box-shadow:0 14px 40px rgba(0,0,0,.3)}
#arx .ar-tip.on{opacity:1}
#arx .ar-tip h4{margin:0 0 6px;font:600 15px var(--mono);letter-spacing:.08em;color:var(--ink)}
#arx .ar-tip h4.st{font:700 16px var(--serif);letter-spacing:.06em}
#arx .ar-tip h4.pt{font:600 15px var(--serif);letter-spacing:.02em}
#arx .ar-tip h4 span{font:12px -apple-system,sans-serif;color:var(--ink3);letter-spacing:0;margin-left:6px}
#arx .ar-tip .go{font:11px var(--mono);letter-spacing:.14em;color:var(--warm)}
#arx .cdot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:1px}
#arx .ar-hint{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);transition:opacity .4s;color:var(--ink2);height:36px;padding:0 16px;border-radius:999px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(14px);font:12.5px var(--mono);display:flex;align-items:center;gap:6px}
#arx .ar-hint b{color:var(--ink);font-weight:500}
#arx.diving .ar-hint,#arx.yearv .ar-hint{opacity:0}
#arx .ar-yv{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .45s}
#arx.yearv .ar-yv{opacity:1}
#arx.yearv .ar-yv .yv-l,#arx.yearv .ar-yv .yv-panel{pointer-events:auto}
#arx .yv-l{position:absolute;left:5%;top:96px;width:260px;transform:translateX(-24px);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
#arx.yearv .yv-l{transform:none}
#arx .yv-l .back{margin-bottom:26px}
#arx .yv-l .gt{font-size:72px;margin:6px 0 4px}
#arx .ysub{font-family:var(--serif);font-size:17px;margin:0 0 18px;line-height:1.7}
#arx .yrs{display:flex;gap:7px;align-items:flex-end;height:66px;margin:2px 0 4px}
#arx .yrs div{display:flex;flex-direction:column;align-items:center;gap:5px}
#arx .yrs s{display:block;width:16px;border-radius:3px}
#arx .yrs i{font:10.5px var(--mono);font-style:normal;color:var(--ink3)}
#arx .yrc{font:11px var(--mono);letter-spacing:.14em;color:var(--ink3);margin-bottom:22px}
#arx .yv-nav{display:flex;gap:8px}
#arx .yv-nav .btn{height:36px;padding:0 14px;font-size:13px}
#arx .yv-panel,#arx .ar-all{position:absolute;right:4%;top:96px;bottom:40px;width:min(420px,34%);display:flex;flex-direction:column;border-radius:20px;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(20px);box-shadow:0 30px 80px rgba(0,0,0,.3)}
#arx .yv-panel{transform:translateX(30px);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
#arx.yearv .yv-panel{transform:none}
#arx .ar-all{z-index:5;opacity:0;transform:translateX(30px);pointer-events:none;transition:.4s;width:min(440px,92%)}
#arx .ar-all.on{opacity:1;transform:none;pointer-events:auto}
#arx .ar-all .x{border:0;background:none;color:var(--ink3);font-size:18px}
#arx .yv-ph{display:flex;justify-content:space-between;align-items:baseline;padding:18px 22px 12px;border-bottom:1px solid var(--line)}
#arx .yv-ph b{font-family:var(--serif);font-size:17px;color:var(--ink)}
#arx .yv-ph span{font:11px var(--mono);letter-spacing:.14em;color:var(--ink3)}
#arx .yv-list{flex:1;overflow:auto;padding:4px 10px 16px;scrollbar-width:thin}
#arx .yv-m{display:flex;justify-content:space-between;padding:14px 12px 6px;font:11px var(--mono);letter-spacing:.2em;color:var(--ink3)}
#arx .yv-m b{font:600 14px var(--serif);letter-spacing:.1em;color:var(--ink2)}
#arx .yv-i{display:grid;grid-template-columns:44px 1fr auto;gap:2px 10px;align-items:baseline;padding:9px 12px;border-radius:12px;cursor:pointer;transition:background .2s}
#arx .yv-i:hover,#arx .yv-i.on{background:var(--glass)}
#arx .yv-i .dt{font:12px var(--mono);color:var(--ink3)}
#arx .yv-i .tt{font-family:var(--serif);font-size:15.5px;color:var(--ink);line-height:1.45}
#arx .yv-i.on .tt{color:var(--warm)}
#arx .yv-i .rd{font:11px var(--mono);color:var(--ink3)}
#arx .yv-i .as{grid-column:2/4;font-size:12px;color:var(--ink3)}
#arx .toast{position:absolute;left:50%;bottom:28px;transform:translate(-50%,10px);opacity:0;transition:.3s;pointer-events:none;height:36px;padding:0 16px;border-radius:999px;background:var(--panel);border:1px solid var(--line);display:flex;align-items:center;color:var(--ink);font-size:13px}
#arx .toast.on{opacity:1;transform:translate(-50%,0)}
/* 手机 */
#arx.m .ar-hero{left:18px;right:18px;top:76px;width:auto}
#arx.m .ar-hero .gt{font-size:38px;margin:4px 0}
#arx.m .ar-hero .sub{font-size:14px;margin:0 0 6px}
#arx.m .ar-hero p.lead,#arx.m .ar-hero .btns{display:none}
#arx.m .stats{margin:0;gap:14px}#arx.m .stats b{font-size:18px}
#arx.m .ar-hint{bottom:18px;font-size:11px}
#arx.m .yv-l{left:16px;right:16px;top:64px;width:auto;display:grid;grid-template-columns:auto 1fr;align-items:end;column-gap:14px}
#arx.m .yv-l .back{grid-column:1/3;margin-bottom:6px;height:32px;font-size:12px}
#arx.m .yv-l .kk,#arx.m .yv-yrs{display:none}
#arx.m .yv-l .gt{font-size:40px;margin:0}
#arx.m .ysub{font-size:13px;margin:0 0 8px}
#arx.m .yv-nav{position:absolute;right:0;top:0}
#arx.m .yv-nav .btn{height:32px;padding:0 11px;font-size:12px}
#arx.m .yv-panel,#arx.m .ar-all{left:12px;right:12px;width:auto;top:auto;bottom:12px;height:330px}
#arx.m .ar-all{top:70px;height:auto}
#arx .ar-tip{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(9,13,28,.88)}
#arx.ink-dark .ar-tip{background:rgba(255,255,255,.9)}
#arx .ar-hint{white-space:nowrap}
#arx.m .ar-hint{font-size:10.5px;padding:0 12px;height:30px}