:root {
  --ink: #f0f7ff;
  --muted: #9db0c7;
  --faint: #647a94;
  --cyan: #88e9ff;
  --mint: #8cf3d0;
  --violet: #b9b2ff;
  --amber: #f0d39e;
  --night: #04101d;
  --glass: rgba(8, 22, 39, .48);
  --px: 0;
  --py: 0;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--night); }
body { min-width: 320px; min-height: 100svh; margin: 0; overflow: hidden; color: var(--ink); background: var(--night); }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.scene { position: fixed; inset: 0; overflow: hidden; background: #06101d; z-index: 0; }
.scene-image { position: absolute; inset: -4%; background: url('/assets/home-sanctuary-v1.webp') center 48% / cover no-repeat; transform: translate3d(calc(var(--px) * -9px), calc(var(--py) * -6px), 0) scale(1.045); filter: brightness(.64) saturate(.82) contrast(1.04); transition: filter .8s ease; will-change: transform; }
.scene-depth { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(1,8,17,.72) 0%, rgba(2,10,21,.16) 33%, rgba(2,9,18,.20) 57%, rgba(1,7,15,.74) 100%), linear-gradient(90deg, rgba(2,9,18,.52), transparent 25%, transparent 75%, rgba(2,9,18,.52)); }
.scene-light { position: absolute; inset: 0; opacity: .8; background: radial-gradient(circle at calc(50% + var(--px) * 2%) calc(48% + var(--py) * 2%), rgba(106,211,255,.16), transparent 25%), radial-gradient(ellipse at 50% 104%, rgba(61,100,161,.13), transparent 48%); transition: background .3s linear; }
.scene-grain { position: absolute; inset: 0; opacity: .13; mix-blend-mode: soft-light; background-image: radial-gradient(rgba(255,255,255,.6) .45px, transparent .6px), radial-gradient(rgba(110,176,236,.35) .55px, transparent .7px); background-position: 0 0, 5px 7px; background-size: 9px 9px, 13px 13px; mask-image: linear-gradient(to bottom, #000, transparent 82%); }
#particleCanvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .74; }
.pointer-glow { position: fixed; left: 0; top: 0; width: 380px; height: 380px; border-radius: 50%; opacity: 0; pointer-events: none; transform: translate3d(-50%, -50%, 0); background: radial-gradient(circle, rgba(129,221,255,.08), rgba(91,149,212,.025) 37%, transparent 70%); mix-blend-mode: screen; transition: opacity .3s ease; z-index: 2; }
body.has-pointer .pointer-glow { opacity: 1; }
body[data-focus="codex"] .scene-image { filter: brightness(.67) saturate(.90) contrast(1.04) hue-rotate(-4deg); }
body[data-focus="stats"] .scene-image { filter: brightness(.66) saturate(.90) contrast(1.05) hue-rotate(8deg); }

.home-shell { position: relative; z-index: 3; width: 100%; min-height: 100svh; padding: clamp(18px, 2.2vw, 34px) clamp(20px, 3.8vw, 66px) max(18px, env(safe-area-inset-bottom)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.home-header { display: flex; align-items: center; justify-content: space-between; opacity: 0; animation: reveal-down .8s .85s cubic-bezier(.22,.75,.2,1) forwards; }
.identity { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.identity-mark { position: relative; width: 43px; height: 43px; display: grid; place-items: center; color: var(--cyan); }
.identity-mark::before { content: ""; position: absolute; inset: 2px; border: 1px solid rgba(161,223,255,.2); border-radius: 50%; box-shadow: inset 0 0 18px rgba(101,196,255,.08), 0 0 24px rgba(77,178,241,.08); }
.identity-mark i { position: absolute; width: 22px; height: 11px; border: 1px solid rgba(143,226,255,.58); border-radius: 50%; }
.identity-mark i:nth-child(2) { transform: rotate(60deg); }
.identity-mark i:nth-child(3) { transform: rotate(120deg); }
.identity-mark b { font: 650 9px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: 0; }
.identity-copy { display: grid; gap: 2px; }
.identity-copy strong { font: 620 14px ui-sans-serif, sans-serif; letter-spacing: .26em; }
.identity-copy small { color: var(--faint); font: 600 8px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .28em; }

.node-meta { display: flex; align-items: center; gap: 12px; color: #a7bbcf; font: 600 10px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .1em; }
.online-state { display: flex; align-items: center; gap: 7px; }
.online-state i, .portal-status i { width: 5px; height: 5px; border-radius: 50%; background: #88efc4; box-shadow: 0 0 0 4px rgba(80,232,170,.08), 0 0 12px rgba(80,232,170,.85); animation: signal 2.4s ease-in-out infinite; }
.meta-divider { width: 1px; height: 18px; background: rgba(181,213,239,.16); }
#clock { min-width: 62px; color: #d9eaff; font-variant-numeric: tabular-nums; }
.date-label { color: var(--faint); }

.main-stage { position: relative; min-height: 0; }
.hero-copy { position: absolute; z-index: 5; top: clamp(7%, 9vh, 13%); left: 50%; width: min(720px, 72vw); text-align: center; transform: translateX(-50%); opacity: 0; animation: reveal-up 1s 1s cubic-bezier(.18,.8,.22,1) forwards; }
.hero-kicker { margin: 0 0 14px; display: flex; align-items: center; justify-content: center; gap: 12px; color: #a7c4df; font: 650 9px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .24em; }
.hero-kicker i { width: 30px; height: 1px; background: linear-gradient(90deg, transparent, rgba(146,216,255,.55)); }
.hero-kicker i:last-child { transform: rotate(180deg); }
.hero-copy h1 { margin: 0; display: grid; justify-items: center; color: #f4f8ff; text-shadow: 0 4px 32px rgba(2,10,24,.95), 0 1px 1px rgba(0,0,0,.55); font-family: "Songti SC", "Noto Serif CJK SC", STSong, Georgia, serif; font-size: clamp(32px, 3.45vw, 57px); font-weight: 450; line-height: 1.15; letter-spacing: .045em; }
.hero-copy h1 em { margin-top: 3px; color: #c8ddf3; font-style: normal; font-size: .72em; letter-spacing: .18em; }
.hero-note { margin: 14px 0 0; color: rgba(190,211,232,.72); text-shadow: 0 2px 16px rgba(0,0,0,.75); font-size: 12px; letter-spacing: .08em; }

.node-core { --core-color: 130, 225, 255; position: absolute; z-index: 4; left: 50%; top: 49%; width: clamp(76px, 7vw, 116px); aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; opacity: 0; animation: core-arrive 1.4s 1.15s cubic-bezier(.16,.8,.22,1) forwards; pointer-events: none; }
.core-orbit { position: absolute; border-radius: 50%; border: 1px solid rgb(var(--core-color) / .27); box-shadow: inset 0 0 18px rgb(var(--core-color) / .04), 0 0 16px rgb(var(--core-color) / .06); }
.orbit-one { inset: 7%; border-style: dashed; animation: orbit 18s linear infinite; }
.orbit-two { inset: 22%; border-color: rgb(var(--core-color) / .4); animation: orbit-reverse 11s linear infinite; }
.orbit-three { inset: 37%; border-color: rgb(var(--core-color) / .56); box-shadow: 0 0 20px rgb(var(--core-color) / .2); }
.core-dot { width: 8px; height: 8px; border-radius: 50%; background: #d8f6ff; box-shadow: 0 0 8px #c2f1ff, 0 0 24px #76dfff, 0 0 55px rgba(84,189,255,.9); animation: core-pulse 2.8s ease-in-out infinite; }
.node-core small { position: absolute; top: calc(100% + 9px); color: rgba(172,218,244,.55); font: 600 7px ui-monospace, monospace; letter-spacing: .28em; }
body[data-focus="codex"] .node-core { --core-color: 116, 244, 204; }
body[data-focus="stats"] .node-core { --core-color: 163, 178, 255; }

.side-inscription { position: absolute; left: -28px; top: 50%; display: flex; align-items: center; gap: 13px; transform: translateY(-50%); color: rgba(155,187,216,.34); font-family: "Songti SC", STSong, serif; font-size: 10px; letter-spacing: .3em; writing-mode: vertical-rl; opacity: 0; animation: reveal-right .8s 1.35s ease forwards; }
.side-inscription i { width: 1px; height: 46px; background: linear-gradient(transparent, rgba(137,206,240,.35)); }

.portal-nav { position: absolute; z-index: 7; top: 49%; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: clamp(220px, 25vw, 430px); pointer-events: none; }
.portal-card { --accent-rgb: 136, 233, 255; position: relative; width: clamp(290px, 25vw, 378px); min-height: 178px; padding: 23px 24px 21px; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-rows: auto 1fr; gap: 16px 14px; overflow: hidden; border: 1px solid rgb(var(--accent-rgb) / .18); border-radius: 3px 18px 3px 18px; color: var(--ink); text-decoration: none; background: linear-gradient(135deg, rgba(13,31,50,.68), rgba(7,18,33,.40)); box-shadow: 0 30px 75px rgba(0,5,15,.38), 0 8px 22px rgba(0,5,15,.22), inset 0 1px rgba(255,255,255,.055); backdrop-filter: blur(16px) saturate(1.12); transform: perspective(900px) translate3d(0, 18px, 0) rotateX(0) rotateY(0); transform-style: preserve-3d; transition: transform .16s ease-out, border-color .35s ease, box-shadow .35s ease, background .35s ease; opacity: 0; pointer-events: auto; will-change: transform; }
.portal-codex { --accent-rgb: 121, 241, 204; animation: portal-left 1s 1.15s cubic-bezier(.17,.82,.2,1) forwards; }
.portal-stats { --accent-rgb: 151, 185, 255; animation: portal-right 1s 1.22s cubic-bezier(.17,.82,.2,1) forwards; }
.portal-card::before { content: ""; position: absolute; inset: 0; opacity: 0; background: radial-gradient(320px circle at var(--card-x, 50%) var(--card-y, 50%), rgb(var(--accent-rgb) / .17), transparent 55%); transition: opacity .35s ease; }
.portal-card::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(transparent 10%, rgb(var(--accent-rgb) / .75), transparent 88%); opacity: .5; }
.portal-card:hover, .portal-card:focus-visible { border-color: rgb(var(--accent-rgb) / .48); background: linear-gradient(135deg, rgba(14,35,55,.78), rgba(8,21,38,.58)); box-shadow: 0 32px 90px rgba(0,6,17,.52), 0 0 35px rgb(var(--accent-rgb) / .08), inset 0 1px rgba(255,255,255,.08); outline: none; }
.portal-card:hover::before, .portal-card:focus-visible::before { opacity: 1; }
.portal-number { position: absolute; top: 12px; right: 16px; color: rgb(var(--accent-rgb) / .44); font: 600 8px ui-monospace, monospace; letter-spacing: .18em; }
.portal-icon { grid-row: 1 / 3; width: 43px; height: 43px; display: grid; place-items: center; align-self: center; border: 1px solid rgb(var(--accent-rgb) / .22); border-radius: 50%; color: rgb(var(--accent-rgb) / .9); background: rgb(var(--accent-rgb) / .055); box-shadow: inset 0 0 18px rgb(var(--accent-rgb) / .06), 0 0 22px rgb(var(--accent-rgb) / .04); transform: translateZ(24px); transition: border-color .3s, box-shadow .3s; }
.portal-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.portal-content { display: grid; align-content: center; gap: 5px; transform: translateZ(18px); }
.portal-content small { color: rgb(var(--accent-rgb) / .78); font: 650 8px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .18em; }
.portal-content strong { font-family: "Songti SC", "Noto Serif CJK SC", STSong, Georgia, serif; font-size: 23px; font-weight: 500; letter-spacing: .1em; }
.portal-content > span { max-width: 218px; color: rgba(178,200,222,.64); font-size: 10px; line-height: 1.65; }
.portal-action { grid-column: 3; grid-row: 1 / 3; align-self: center; display: grid; justify-items: center; gap: 8px; transform: translateZ(25px); }
.portal-action b { color: rgb(var(--accent-rgb) / .64); font: 650 7px ui-monospace, monospace; letter-spacing: .22em; writing-mode: vertical-rl; }
.portal-action i { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgb(var(--accent-rgb) / .24); border-radius: 50%; color: rgb(var(--accent-rgb) / .9); font-style: normal; transition: .3s cubic-bezier(.2,.8,.2,1); }
.portal-card:hover .portal-action i { color: #061421; background: rgb(var(--accent-rgb) / .9); border-color: transparent; transform: rotate(45deg) scale(1.08); box-shadow: 0 0 24px rgb(var(--accent-rgb) / .25); }
.portal-status { position: absolute; left: 81px; bottom: 12px; display: flex; align-items: center; gap: 6px; color: rgba(170,199,219,.38); font: 600 7px ui-monospace, monospace; letter-spacing: .16em; }
.portal-status i { width: 4px; height: 4px; }
.portal-corner { position: absolute; width: 13px; height: 13px; pointer-events: none; }
.corner-one { top: 7px; left: 7px; border-top: 1px solid rgb(var(--accent-rgb) / .45); border-left: 1px solid rgb(var(--accent-rgb) / .45); }
.corner-two { right: 7px; bottom: 7px; border-right: 1px solid rgb(var(--accent-rgb) / .45); border-bottom: 1px solid rgb(var(--accent-rgb) / .45); }
.portal-scan { position: absolute; left: -20%; right: -20%; top: -30%; height: 1px; opacity: 0; background: linear-gradient(90deg, transparent, rgb(var(--accent-rgb) / .7), transparent); box-shadow: 0 0 12px rgb(var(--accent-rgb) / .35); transition: opacity .2s; }
.portal-card:hover .portal-scan { opacity: .6; animation: scan 2.1s ease-in-out infinite; }

.home-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: rgba(143,170,197,.48); font: 550 8px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .16em; opacity: 0; animation: footer-up .7s 1.45s ease forwards; }
.home-footer > span:first-child { display: flex; align-items: center; gap: 8px; }
.home-footer > span:first-child i { width: 18px; height: 1px; background: rgba(133,194,229,.35); }
.home-footer p { margin: 0; color: rgba(173,200,222,.55); letter-spacing: .22em; }
.footer-coordinate { justify-self: end; }

.boot-layer { position: fixed; z-index: 50; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px; color: #cdeaff; background: #040c17; animation: boot-away 1.25s .5s cubic-bezier(.65,0,.2,1) forwards; pointer-events: none; }
.boot-mark { position: relative; width: 64px; height: 64px; display: grid; place-items: center; }
.boot-mark i { position: absolute; width: 48px; height: 20px; border: 1px solid rgba(131,219,255,.44); border-radius: 50%; animation: boot-orbit 1.8s ease-in-out infinite; }
.boot-mark i:nth-child(2) { transform: rotate(60deg); animation-delay: -.3s; }
.boot-mark i:nth-child(3) { transform: rotate(120deg); animation-delay: -.6s; }
.boot-mark span { font: 600 12px ui-monospace, monospace; }
.boot-layer p { margin: 0; color: rgba(177,211,234,.55); font: 600 8px ui-monospace, monospace; letter-spacing: .32em; }
.boot-line { width: 170px; height: 1px; overflow: hidden; background: rgba(145,203,236,.1); }
.boot-line i { display: block; width: 42%; height: 100%; background: linear-gradient(90deg, transparent, #82dcff, transparent); animation: boot-progress .9s ease-in-out infinite; }

.entry-veil { position: fixed; z-index: 60; inset: 0; display: grid; place-content: center; justify-items: center; gap: 20px; opacity: 0; visibility: hidden; color: #d9f4ff; background: radial-gradient(circle at center, rgba(15,51,79,.82), #030912 47%); transition: opacity .38s ease, visibility 0s .4s; pointer-events: none; }
.entry-veil p { margin: 0; font: 600 9px ui-monospace, monospace; letter-spacing: .32em; }
.entry-ring { position: relative; width: 108px; height: 108px; display: grid; place-items: center; }
.entry-ring i { position: absolute; inset: 0; border: 1px solid rgba(126,220,255,.35); border-radius: 50%; border-left-color: transparent; }
.entry-ring i:nth-child(2) { inset: 19px; border-color: rgba(174,179,255,.4); border-right-color: transparent; }
.entry-ring span { width: 8px; height: 8px; border-radius: 50%; background: white; box-shadow: 0 0 35px #83dfff; }
body.is-leaving .entry-veil { opacity: 1; visibility: visible; transition: opacity .38s ease; }
body.is-leaving .entry-ring i:first-child { animation: orbit .8s linear infinite; }
body.is-leaving .entry-ring i:nth-child(2) { animation: orbit-reverse .65s linear infinite; }

@keyframes boot-away { 0%, 55% { opacity: 1; } 100% { opacity: 0; visibility: hidden; transform: scale(1.035); } }
@keyframes boot-orbit { 50% { border-color: rgba(156,232,255,.85); filter: drop-shadow(0 0 6px rgba(111,212,255,.45)); } }
@keyframes boot-progress { from { transform: translateX(-120%); } to { transform: translateX(330%); } }
@keyframes reveal-down { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes reveal-up { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes reveal-up-mobile { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes footer-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes reveal-right { from { opacity: 0; transform: translate(-8px,-50%); } to { opacity: 1; transform: translate(0,-50%); } }
@keyframes core-arrive { from { opacity: 0; transform: translate(-50%,-50%) scale(.68); filter: blur(8px); } to { opacity: .85; transform: translate(-50%,-50%) scale(1); filter: none; } }
@keyframes portal-left { from { opacity: 0; transform: perspective(900px) translate3d(-24px,18px,0); } to { opacity: 1; transform: perspective(900px) translate3d(0,0,0); } }
@keyframes portal-right { from { opacity: 0; transform: perspective(900px) translate3d(24px,18px,0); } to { opacity: 1; transform: perspective(900px) translate3d(0,0,0); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes orbit-reverse { to { transform: rotate(-360deg); } }
@keyframes core-pulse { 0%,100% { transform: scale(.8); opacity: .72; } 50% { transform: scale(1.2); opacity: 1; } }
@keyframes signal { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes scan { from { transform: translateY(0); } to { transform: translateY(245px); } }

@media (max-width: 1080px) {
  .home-shell { padding-left: 30px; padding-right: 30px; }
  .portal-nav { gap: 210px; }
  .portal-card { width: 300px; padding-left: 18px; padding-right: 18px; }
  .portal-content > span { display: none; }
  .portal-status { left: 75px; }
}

@media (max-width: 820px) {
  body { overflow: auto; }
  .scene { position: fixed; }
  .scene-image { inset: -3%; background-position: 50% 50%; filter: brightness(.52) saturate(.83); transform: scale(1.06); }
  .scene-depth { background: linear-gradient(180deg, rgba(1,7,15,.72), rgba(2,10,20,.25) 30%, rgba(1,7,15,.58) 76%, rgba(1,6,13,.92)); }
  .home-shell { min-height: 100svh; padding: max(18px, env(safe-area-inset-top)) 18px max(16px, env(safe-area-inset-bottom)); }
  .identity-copy strong { font-size: 12px; }
  .identity-copy small { font-size: 7px; }
  .node-meta { gap: 8px; }
  .meta-divider, .date-label { display: none; }
  .main-stage { padding: 58px 0 38px; display: flex; flex-direction: column; align-items: center; }
  .side-inscription { display: none; }
  .hero-copy { position: relative; top: auto; left: auto; width: min(520px, 100%); transform: none; animation-name: reveal-up-mobile; }
  .hero-copy h1 { font-size: clamp(29px, 9.2vw, 45px); }
  .hero-copy h1 em { font-size: .68em; }
  .hero-note { max-width: 290px; margin: 13px auto 0; font-size: 11px; line-height: 1.7; }
  .node-core { position: relative; left: auto; top: auto; width: 78px; margin: 52px 0 42px; transform: none; animation-name: core-arrive-mobile; }
  .portal-nav { position: relative; top: auto; left: auto; right: auto; width: min(520px, 100%); display: grid; gap: 13px; }
  .portal-card { width: 100%; min-height: 146px; padding: 19px 18px; grid-template-columns: 40px minmax(0,1fr) auto; border-radius: 3px 15px 3px 15px; background: linear-gradient(135deg, rgba(10,28,46,.80), rgba(6,17,31,.63)); backdrop-filter: blur(18px); }
  .portal-content strong { font-size: 21px; }
  .portal-content > span { display: block; max-width: 240px; }
  .portal-status { left: 72px; bottom: 9px; }
  .home-footer { grid-template-columns: 1fr auto; padding-top: 6px; }
  .home-footer p { display: none; }
}

@media (max-width: 470px) {
  .home-header { align-items: flex-start; }
  .identity { gap: 8px; }
  .identity-mark { width: 37px; height: 37px; }
  .identity-mark i { width: 19px; height: 9px; }
  .node-meta { padding-top: 4px; display: grid; justify-items: end; gap: 4px; font-size: 8px; }
  #clock { min-width: auto; }
  .main-stage { padding-top: 48px; }
  .hero-kicker { font-size: 7px; letter-spacing: .18em; gap: 8px; }
  .hero-kicker i { width: 18px; }
  .portal-content > span { max-width: 190px; font-size: 9px; }
  .portal-action b { display: none; }
  .portal-action i { width: 29px; height: 29px; }
  .home-footer { font-size: 7px; letter-spacing: .1em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  #particleCanvas, .pointer-glow { display: none; }
  .scene-image { transform: scale(1.045); }
}

@keyframes core-arrive-mobile {
  from { opacity: 0; transform: scale(.68); filter: blur(8px); }
  to { opacity: .85; transform: scale(1); filter: none; }
}