:root{color-scheme:dark;--bg:#090b1a;--text:#f7f7ff;--muted:#a7abc5;--line:rgba(255,255,255,.14);--accent:#a78bfa;--accent-2:#38bdf8;--accent-3:#fb7185}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{min-width:320px;min-height:100svh;margin:0;overflow-x:hidden;color:var(--text);background:radial-gradient(circle at 15% 10%,rgba(124,58,237,.23),transparent 30rem),radial-gradient(circle at 90% 80%,rgba(14,165,233,.17),transparent 28rem),var(--bg);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}body:before{position:fixed;inset:0;z-index:-2;pointer-events:none;content:"";opacity:.23;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(to bottom,black,transparent 80%)}.orb{position:fixed;z-index:-1;border-radius:999px;filter:blur(2px);pointer-events:none;mix-blend-mode:screen}.orb-one{width:13rem;height:13rem;top:12%;right:8%;background:rgba(167,139,250,.15);animation:drift 12s ease-in-out infinite alternate}.orb-two{width:9rem;height:9rem;bottom:11%;left:5%;background:rgba(56,189,248,.14);animation:drift 9s ease-in-out -2s infinite alternate-reverse}.page{width:min(1180px,100%);min-height:100svh;margin:0 auto;padding:max(1.25rem,env(safe-area-inset-top)) clamp(1.25rem,4vw,3rem) max(1.25rem,env(safe-area-inset-bottom));display:flex;flex-direction:column}header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.35rem 0;animation:rise .8s ease both}.brand{display:inline-flex;align-items:center;gap:.7rem;color:var(--text);font-size:.78rem;font-weight:700;letter-spacing:.2em;text-decoration:none;text-transform:uppercase}.brand-mark{width:2rem;height:2rem;display:grid;place-items:center;border:1px solid var(--line);border-radius:.8rem;background:linear-gradient(135deg,rgba(167,139,250,.9),rgba(56,189,248,.75));box-shadow:0 0 28px rgba(167,139,250,.32);font-size:.85rem}.icon-button{width:2.6rem;height:2.6rem;display:grid;place-items:center;border:1px solid var(--line);border-radius:.9rem;color:var(--text);background:rgba(255,255,255,.07);font:inherit;font-size:1.25rem;cursor:pointer;transition:.25s}.icon-button:hover,.icon-button:focus-visible{border-color:rgba(167,139,250,.75);background:rgba(167,139,250,.18);transform:translateY(-2px);outline:none}.status{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .8rem;border:1px solid var(--line);border-radius:999px;color:var(--muted);background:rgba(255,255,255,.04);font-size:.72rem}.status:before{width:.42rem;height:.42rem;border-radius:50%;background:#4ade80;box-shadow:0 0 12px #4ade80;content:""}.menu{position:fixed;inset:0;z-index:10;display:grid;place-items:start start;padding:5rem 1.25rem;background:rgba(9,11,26,.62);backdrop-filter:blur(12px);opacity:0;pointer-events:none;transition:opacity .25s}.menu.is-open{opacity:1;pointer-events:auto}.menu-panel{width:min(20rem,calc(100vw - 2.5rem));padding:.75rem;border:1px solid var(--line);border-radius:1.25rem;background:rgba(22,24, fifty, .86);background:rgba(22,24,50,.86);box-shadow:0 1.5rem 5rem rgba(0,0,0,.35);transform:translateY(-1rem);transition:transform .25s}.menu.is-open .menu-panel{transform:translateY(0)}.menu-link{display:block;padding:1rem 1.1rem;border-radius:.85rem;color:var(--text);text-decoration:none;font-size:1rem;transition:.25s}.menu-link:hover,.menu-link:focus-visible{background:rgba(167,139,250,.16);outline:none}.menu-close{float:right;margin:.2rem;color:var(--muted);background:transparent;border:0;font-size:1.2rem;cursor:pointer}main{flex:1;display:grid;place-items:center;padding:clamp(4rem,11vh,8rem) 0 clamp(3rem,9vh,7rem)}.hero{width:100%;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(18rem,.75fr);align-items:center;gap:clamp(2rem,7vw,7rem)}.eyebrow{display:inline-flex;align-items:center;gap:.65rem;margin-bottom:1.15rem;color:var(--accent-2);font-size:.76rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}.eyebrow:before{width:2.5rem;height:1px;background:linear-gradient(90deg,transparent,var(--accent-2));content:""}h1{max-width:12ch;margin:0;font-size:clamp(3.2rem,8vw,7.4rem);line-height:.95;letter-spacing:-.075em;text-wrap:balance}h1 span{display:inline-block;color:transparent;background:linear-gradient(110deg,#fff 15%,var(--accent) 48%,var(--accent-2) 85%);-webkit-background-clip:text;background-clip:text;background-size:180% auto;animation:shimmer 8s ease-in-out infinite alternate}.intro{max-width:34rem;margin:1.65rem 0 0;color:var(--muted);font-size:clamp(1rem,1.8vw,1.18rem);line-height:1.8}.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}button{min-height:2.9rem;padding:.75rem 1.1rem;border:1px solid var(--line);border-radius:999px;color:var(--text);background:rgba(255,255,255,.07);font:inherit;cursor:pointer;transition:.25s}button:hover,button:focus-visible{border-color:rgba(167,139,250,.75);background:rgba(167,139,250,.18);transform:translateY(-2px);outline:none}.primary{border-color:transparent;background:linear-gradient(100deg,#7c3aed,#0891b2);box-shadow:0 12px 32px rgba(56,189,248,.16)}.visual{position:relative;min-height:24rem;display:grid;place-items:center;isolation:isolate}.visual:before{position:absolute;width:min(24rem,76vw);aspect-ratio:1;border:1px solid rgba(167,139,250,.24);border-radius:38% 62% 63% 37%/41% 38% 62% 59%;box-shadow:inset 0 0 80px rgba(124,58,237,.13),0 0 90px rgba(56,189,248,.1);content:"";animation:morph 11s ease-in-out infinite alternate}.visual:after{position:absolute;width:15rem;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(167,139,250,.4),rgba(56,189,248,.08) 47%,transparent 70%);filter:blur(10px);content:"";animation:breathe 5s ease-in-out infinite}.orbit{position:absolute;width:min(19rem,65vw);aspect-ratio:1;border:1px dashed rgba(255,255,255,.22);border-radius:50%;animation:spin 22s linear infinite}.orbit:before,.orbit:after{position:absolute;width:.65rem;height:.65rem;border-radius:50%;content:""}.orbit:before{top:9%;left:13%;background:var(--accent-3);box-shadow:0 0 18px var(--accent-3)}.orbit:after{right:8%;bottom:17%;background:var(--accent-2);box-shadow:0 0 18px var(--accent-2)}.glass-card{position:relative;z-index:1;width:min(18rem,72vw);padding:1.3rem;border:1px solid rgba(255,255,255,.2);border-radius:1.5rem;background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.045));box-shadow:0 1.5rem 5rem rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.18);backdrop-filter:blur(18px);transform:rotate(-7deg);animation:card-float 6s ease-in-out infinite}.card-top{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}.card-icon{width:3.2rem;height:3.2rem;display:grid;place-items:center;margin:2rem 0 1rem;border-radius:1.1rem;background:linear-gradient(135deg,#a78bfa,#22d3ee);color:#11152e;font-size:1.4rem;box-shadow:0 1rem 2rem rgba(56,189,248,.22)}.card-title{margin:0;font-size:1.55rem;letter-spacing:-.04em}.card-copy{margin:.5rem 0 0;color:var(--muted);font-size:.82rem;line-height:1.6}.mini-bars{display:flex;align-items:end;gap:.25rem;height:2rem;margin-top:1.2rem}.mini-bars i{width:.22rem;border-radius:999px;background:linear-gradient(to top,var(--accent-2),var(--accent));animation:bars 1.6s ease-in-out infinite alternate}.mini-bars i:nth-child(1){height:35%;animation-delay:-.7s}.mini-bars i:nth-child(2){height:70%;animation-delay:-.3s}.mini-bars i:nth-child(3){height:48%;animation-delay:-.9s}.mini-bars i:nth-child(4){height:90%;animation-delay:-.1s}.mini-bars i:nth-child(5){height:58%;animation-delay:-.5s}.mini-bars i:nth-child(6){height:76%;animation-delay:-.8s}.content-page{width:100%;max-width:46rem;margin:auto;padding:clamp(4rem,11vh,8rem) 0}.content-page h1{max-width:none;font-size:clamp(3rem,8vw,6rem)}.content-page p{color:var(--muted);font-size:1.1rem;line-height:1.9}.email{display:inline-block;margin-top:1rem;color:var(--accent-2);font-size:clamp(1.2rem,3vw,1.8rem);text-decoration:none}.empty-list{min-height:12rem;margin-top:2rem;border:1px dashed rgba(255,255,255,.2);border-radius:1.5rem;background:rgba(255,255,255,.035)}footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1.5rem;border-top:1px solid var(--line);color:var(--muted);font-size:.75rem;animation:rise 1s .25s ease both}.beian{color:var(--muted);text-decoration:none;transition:color .25s}.beian:hover,.beian:focus-visible{color:var(--text)}.police-beian{display:inline-flex;align-items:center;gap:.3rem}.police-beian img{width:1rem;height:auto;object-fit:contain}footer span:last-child{color:rgba(255,255,255,.45)}@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes shimmer{from{background-position:0 center}to{background-position:100% center}}@keyframes drift{to{transform:translate(3rem,-2rem) scale(1.2)}}@keyframes morph{to{transform:rotate(28deg) scale(1.08);border-radius:62% 38% 42% 58%/48% 55% 45% 52%}}@keyframes breathe{50%{transform:scale(1.18);opacity:.7}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes card-float{50%{transform:rotate(-3deg) translateY(-.8rem)}}@keyframes bars{to{transform:scaleY(.45);opacity:.6}}@media(max-width:720px){.page{padding-inline:max(1.1rem,env(safe-area-inset-left)) max(1.1rem,env(safe-area-inset-right))}.status{padding:.5rem .65rem;font-size:.65rem}.hero{grid-template-columns:1fr;gap:3.5rem}h1{max-width:10ch;font-size:clamp(3.35rem,16vw,5.4rem)}.intro{line-height:1.7}.visual{min-height:20rem}.visual:before{width:min(20rem,82vw)}.orbit{width:min(16rem,70vw)}footer{align-items:flex-start;flex-direction:column}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/* Header controls: use geometric icons so they remain centered on every browser. */
.icon-button{padding:0;line-height:0;text-decoration:none}
.icon-button svg{display:block;width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.home-icon{width:1.3rem!important;height:1.3rem!important}
/* Match the original header footprint so the homepage content keeps its position. */
.icon-button{width:2rem;height:2rem}
/* Keep the hamburger visible regardless of inherited SVG color rules. */
.icon-button{color:var(--text);display:grid;place-items:center}
.icon-button .menu-icon{display:block;width:1.2rem;height:1.2rem;stroke:#f7f7ff;stroke-width:2;fill:none}
/* Reliable hamburger icon and a readable, non-blurred navigation overlay. */
.icon-button .hamburger-icon{width:1.15rem;height:1rem;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch}
.icon-button .hamburger-icon i{display:block;width:100%;height:2px;border-radius:999px;background:#f7f7ff;flex:none}
.menu{backdrop-filter:none;background:rgba(9,11,26,.72)}
.menu-panel{background:rgba(22,24,50,.97);backdrop-filter:blur(16px)}
/* Restore the homepage reveal spacing and collapsed state. */
.reveal{max-height:0;overflow:hidden;opacity:0;transition:max-height .55s ease,opacity .4s ease,margin .55s ease}
.reveal.is-open{max-height:8rem;margin-top:1.5rem;opacity:1}
.reveal-inner{padding:1rem 1.1rem;border-left:2px solid var(--accent);border-radius:.2rem 1rem 1rem .2rem;background:rgba(167,139,250,.09);color:var(--muted);line-height:1.7}
/* Anchor the navigation panel below the hamburger, aligned with the page content edge. */
.menu{padding:4rem 0 0;place-items:start}
.menu-panel{margin-left:max(1.1rem,calc((100vw - 1180px)/2 + clamp(1.1rem,4vw,3rem)))}
.project-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;margin-top:2rem;padding:1.15rem 1.25rem;border:1px solid var(--line);border-radius:1.25rem;color:var(--text);background:rgba(255,255,255,.055);text-decoration:none;transition:transform .25s ease,background .25s ease,border-color .25s ease;box-shadow:0 1rem 3rem rgba(0,0,0,.12)}
.project-card:hover,.project-card:focus-visible{border-color:rgba(167,139,250,.75);background:rgba(167,139,250,.14);transform:translateY(-3px);outline:none}
.project-index{color:var(--accent-2);font-size:.72rem;letter-spacing:.12em}
.project-info{display:flex;flex-direction:column;gap:.35rem;min-width:0}.project-info strong{font-size:1.1rem;letter-spacing:-.02em}.project-info span{color:var(--muted);font-size:.9rem;line-height:1.55}.project-arrow{color:var(--accent-2);font-size:1.4rem}
@media(max-width:520px){.project-card{grid-template-columns:auto 1fr;gap:.75rem}.project-arrow{grid-column:2;grid-row:1;justify-self:end}.project-info span{font-size:.82rem}}