@charset "UTF-8";
@font-face { font-family:"Fusion Pixel"; src:url("assets/pixel/fusion-pixel-12px-proportional-zh_hans.ttf.woff2") format("woff2"); font-style:normal; font-weight:400; font-display:swap; }
/* Refined voxel portfolio: the content stays crisp, the world becomes blocks. */
:root {
  --paper:#071c16; --ink:#f2f4df; --muted:#adbfab; --line:#385849;
  --lime:#c7f46b; --clay:#805a41; --blue:#355f61;
  --ref-card:#0c261e; --ref-border:#41634d; --ref-radius:0px;
  --pixel-panel:#0a211a; --pixel-edge:#5a8265; --pixel-shadow:#020d09;
  --pixel-display:"Fusion Pixel", "Microsoft YaHei", sans-serif;
  --pixel-header-bottom:110px; color-scheme:dark;
}
html { scroll-padding-top:130px; background:var(--paper); }
body,body[data-page="home"] { background:#071c16; color:var(--ink); overflow-x:clip; }
body { font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif; }
button,a { touch-action:manipulation; }
::selection { background:var(--lime); color:#12250c; }
:focus-visible { outline:3px solid var(--lime); outline-offset:6px; }
.site-shell { position:relative; width:100%; max-width:1536px; padding:0 clamp(22px,4.2vw,72px); z-index:1; }
.site-atmosphere { position:fixed; inset:0; background:#071c16; pointer-events:none; overflow:hidden; z-index:0; }
.site-atmosphere::before,.site-atmosphere::after,
body[data-page="home"] .site-atmosphere::after { display:none; }
.ambient-photo,.ambient-glow,.ambient-orb,.ambient-grain { display:none!important; }
.ambient-grid,body[data-page="home"] .ambient-grid { position:absolute; inset:0; opacity:.18; background-image:linear-gradient(#52765926 1px,transparent 1px),linear-gradient(90deg,#52765926 1px,transparent 1px); background-size:32px 32px; mask-image:none; transform:none; animation:none; }
.ambient-canvas,body[data-page="home"] .ambient-canvas { position:absolute; inset:0; width:100%; height:100%; opacity:.8; mask-image:none; mix-blend-mode:normal; z-index:3; }
.pixel-forest { position:absolute; inset:35% -3% 0; background:#16382a; opacity:.25; clip-path:polygon(0 38%,3% 38%,3% 29%,6% 29%,6% 22%,9% 22%,9% 30%,12% 30%,12% 42%,16% 42%,16% 28%,19% 28%,19% 19%,22% 19%,22% 30%,25% 30%,25% 44%,29% 44%,29% 33%,32% 33%,32% 14%,35% 14%,35% 6%,38% 6%,38% 15%,41% 15%,41% 31%,45% 31%,45% 42%,49% 42%,49% 27%,52% 27%,52% 19%,55% 19%,55% 35%,59% 35%,59% 44%,64% 44%,64% 30%,67% 30%,67% 11%,70% 11%,70% 3%,73% 3%,73% 13%,76% 13%,76% 29%,80% 29%,80% 39%,84% 39%,84% 26%,87% 26%,87% 18%,90% 18%,90% 28%,93% 28%,93% 40%,97% 40%,97% 31%,100% 31%,100% 100%,0 100%); }
.forest-front { inset:70% -5% -5%; transform:scaleX(-1); opacity:.42; background:#020f0c; }
.reading-progress { height:3px; background:var(--lime); box-shadow:none; }
.site-header { height:94px; margin-top:28px; padding:16px 32px; gap:22px; top:16px; border:2px solid #456e53; border-radius:0; background:#081e17f7; box-shadow:4px 4px 0 #020f0a, inset 0 0 0 3px #142e22; backdrop-filter:none; transform:none; }
.site-header::before,.site-header::after { content:""; position:absolute; width:10px; height:10px; border:2px solid #93b690; z-index:1; pointer-events:none; }
.site-header::before { left:-2px; top:-2px; border-right:0; border-bottom:0; }
.site-header::after { right:-2px; bottom:-2px; border-left:0; border-top:0; }
.brand-name { display:flex; align-items:center; gap:12px; color:var(--ink); font:normal 27px/1 var(--pixel-display); letter-spacing:0; -webkit-text-stroke:.6px currentColor; text-shadow:2px 2px 0 #0009; white-space:nowrap; }
.brand-name .brand-pixel { color:var(--lime); font:normal 25px/1 var(--pixel-display); margin:0; animation:none; }
.brand-role { font:normal 12px/1.3 var(--pixel-display); color:#9cb89f; letter-spacing:3px; margin-top:8px; }
.site-nav { gap:8px; margin-left:auto; }
.site-nav .nav-link { border-radius:0; padding:12px 17px; border:2px solid transparent; color:#dbe6d0; font:normal 17px/1.3 var(--pixel-display); box-shadow:none; transform:none; }
.site-nav .nav-link::after,.site-nav .nav-link::before { display:none; }
.site-nav .nav-link:hover { background:#183829; border-color:#41644b; color:var(--ink); transform:translateY(-2px); }
.site-nav .nav-link.is-active { color:#14230d; background:var(--lime); border-color:#d4fa93; box-shadow:3px 3px 0 #294018; }
.site-nav .nav-link:active { transform:translate(2px,2px); box-shadow:none; }
.header-note { display:none; }
.menu-toggle { border-radius:0; background:#153325; border:2px solid #527250; color:var(--ink); }
.menu-toggle span { background:var(--ink); border-radius:0; }
.home-page { padding-top:16px; }
.home-page .hero { position:relative; isolation:isolate; display:grid; grid-template-columns:1.04fr 1fr; gap:0; min-height:620px; padding:34px 0 30px; overflow:visible; }
.hero::before,.hero::after { display:none; }
.hero-copy { z-index:2; padding:0; min-width:0; }
.hero-copy .eyebrow { display:block; font:normal 13px/1.6 var(--pixel-display); color:#9dbfa3; letter-spacing:1.4px; margin:0 0 28px; }
.hero-copy .eyebrow::before { display:none; }
.hero-title { margin:0; font:normal clamp(64px,8.5vw,120px)/1.15 var(--pixel-display); letter-spacing:.01em; -webkit-text-stroke:.02em currentColor; color:#f5f5e5; text-shadow:5px 5px 0 #020e09; overflow:visible; }
.hero-heading-line { display:block; white-space:nowrap; }
.hero-heading-line + .hero-heading-line { color:var(--lime); margin-top:7px; }
.hero-copy .hero-intro { color:#d0dec9; font-size:15px; font-weight:400; line-height:2; margin:28px 0 29px; max-width:525px; }
.hero-copy .hero-actions { display:flex; gap:20px; flex-wrap:wrap; }
.button,.hero-copy .hero-actions .button { position:relative; border:2px solid #789d6e; border-radius:0; padding:15px 24px; min-height:56px; font:normal 18px/1.3 var(--pixel-display); gap:30px; box-shadow:4px 4px 0 #010c08; background:#0b261c; color:var(--ink); transition:transform .12s,background .12s,box-shadow .12s; }
.button::after { display:none; }
.button-primary,.hero-copy .hero-actions .button-primary { background:var(--lime); color:#14220b; border-color:#defaa6; box-shadow:4px 4px 0 #36551e,inset 0 -4px 0 #8fc84b; }
.button:hover,.hero-copy .hero-actions .button:hover { transform:translateY(-3px); background:#214830; border-color:#aacd83; box-shadow:4px 7px 0 #010c08; }
.button-primary:hover,.hero-copy .hero-actions .button-primary:hover { background:#d6ff89; color:#14220b; }
.button:active,.hero-copy .hero-actions .button:active { transform:translate(3px,3px); box-shadow:1px 1px 0 #010c08; }
.button:disabled,.button.is-disabled { color:#8fa58e; background:#173125; border-color:#3b5340; box-shadow:none; }
.hero-note { color:#95b094; font:normal 12px/1.6 var(--pixel-display); letter-spacing:.5px; margin:28px 0 0; }
.hero-note span { color:var(--lime); font-size:18px; padding-right:9px; }
.home-page .pixel-island-stage { position:relative; justify-self:end; align-self:center; width:110%; height:auto; max-width:780px; aspect-ratio:1; max-height:none; margin:-15px 0 -30px -6%; border:0; border-radius:0; background:none; overflow:visible; pointer-events:none; isolation:isolate; }
.home-page .pixel-island-stage::before,.home-page .pixel-island-stage::after { display:none; }
.pixel-island { position:relative; display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 28px 16px #0004); animation:pixel-island-float 7s ease-in-out infinite; }
.island-ground-shadow { position:absolute; inset:auto 27% 4%; height:7%; background:#0007; filter:blur(16px); transform:skewX(-25deg); animation:pixel-shadow-pulse 7s ease-in-out infinite; }
.island-coordinate { position:absolute; top:4%; right:12%; color:#9eb494; font:normal 10px/1.5 var(--pixel-display); letter-spacing:2px; }
.island-hint { position:absolute; bottom:0; left:28%; color:#a3bb99; font:normal 11px/1.5 var(--pixel-display); letter-spacing:1px; }
.floating-block { position:absolute; width:14px; height:14px; background:#5b8b38; border-top:4px solid #a6cd63; border-right:4px solid #34552a; box-shadow:3px 3px 0 #03130a; animation:pixel-block-float 5s steps(12,end) infinite; }
.block-one { left:9%; top:55%; }
.block-two { right:5%; top:30%; width:10px; height:10px; animation-delay:-2s; }
.block-three { left:22%; bottom:15%; width:20px; height:20px; animation-delay:-3.8s; }
.home-page .home-index { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:2px solid #41644b; border-radius:0; padding:24px 18px; margin:8px 0 32px; background:#0a211aee; box-shadow:5px 5px 0 #020f0a,inset 0 0 0 3px #173526; }
.home-index .index-item { position:relative; padding:0 26px; gap:9px; }
.home-index .index-item + .index-item { padding:0 26px; border-left:1px solid #3d624c; }
.home-index .index-item span:first-child { color:#9db29c; font:normal 12px/1.5 var(--pixel-display); letter-spacing:1.1px; }
.home-index .index-item b { color:var(--lime); font-weight:400; font-size:17px; }
.home-index .index-item strong { color:var(--ink); font:normal 24px/1.45 var(--pixel-display); }
.site-footer { border-color:#34533f; color:#9bb099; padding:25px 0 32px; font-size:11px; background:none; }
.footer-links a:hover { color:var(--lime); }
.motion-toggle { color:#a7c093; border-radius:0; border:1px solid #4a6c4e; background:#0d291e; padding:6px 11px; }
.motion-indicator { border-radius:0; background:var(--lime); box-shadow:none; }
.motion-disabled .pixel-island,.motion-disabled .floating-block,.motion-disabled .island-ground-shadow,
.motion-paused .pixel-island,.motion-paused .floating-block,.motion-paused .island-ground-shadow,
.motion-suspended .pixel-island,.motion-suspended .floating-block,.motion-suspended .island-ground-shadow { animation-play-state:paused; }
.motion-ready [data-reveal],.motion-ready .reveal { opacity:1; transform:none; }
body[data-page] .site-header { background:#081e17f7; border-color:#456e53; box-shadow:4px 4px 0 #020f0a,inset 0 0 0 3px #142e22; backdrop-filter:none; -webkit-backdrop-filter:none; }
body[data-page] .site-nav .nav-link { color:#dbe6d0; border-radius:0; box-shadow:none; }
body[data-page] .site-nav .nav-link:hover { background:#183829; border-color:#41644b; color:var(--ink); }
body[data-page] .site-nav .nav-link[data-nav="contact"] { color:#dbe6d0; border-color:transparent; margin-left:0; }
body[data-page] .site-nav .nav-link.is-active,body[data-page] .site-nav .nav-link[data-nav="contact"].is-active { color:#14230d; background:var(--lime); border-color:#d4fa93; box-shadow:3px 3px 0 #294018; }
@keyframes pixel-island-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes pixel-shadow-pulse { 0%,100%{opacity:.5;scale:1} 50%{opacity:.3;scale:.85} }
@keyframes pixel-block-float { 0%,100%{translate:0 0} 50%{translate:0 -13px} }
@media(min-width:1500px) { .home-page .hero { min-height:690px; } }
@media(max-width:1100px) {
  .site-header { padding-inline:22px; gap:16px; }
  .brand-name { font-size:23px; }
  .site-nav { gap:2px; }
  .site-nav .nav-link { padding:10px 12px; font-size:16px; }
  .hero-copy .eyebrow { font-size:11px; }
  .hero-copy .hero-intro { font-size:14px; }
  .hero-title { font-size:clamp(60px,8vw,90px); }
  .home-page .hero { min-height:560px; }
  .button,.hero-copy .hero-actions .button { font-size:17px; padding:14px 18px; gap:20px; }
  .home-index .index-item { padding-inline:18px; }
  .home-index .index-item + .index-item { padding-inline:18px; }
  .home-index .index-item strong { font-size:20px; }
}
@media(max-width:800px) {
  :root { --pixel-header-bottom:90px; }
  html { scroll-padding-top:110px; }
  .site-header { height:78px; top:12px; margin-top:18px; padding:13px 18px; }
  .brand-name { font-size:23px; }
  .brand-role { font-size:10px; letter-spacing:2px; margin-top:7px; }
  .menu-toggle { display:flex; width:43px; height:39px; margin-left:auto; z-index:2; }
  .site-nav { display:none; position:absolute; left:-2px; right:-2px; top:calc(100% + 9px); margin:0; padding:12px; background:#092219; border:2px solid #527755; box-shadow:4px 4px 0 #010c08; }
  .site-nav.is-open { display:flex; flex-wrap:wrap; gap:8px; }
  body[data-page] .site-nav { background:#092219; border-color:#527755; border-radius:0; }
  .site-nav .nav-link { flex:1 1 26%; text-align:center; font-size:17px; padding:12px 9px; }
  .home-page .hero { grid-template-columns:1fr; padding:42px 0 14px; min-height:0; }
  .hero-copy .eyebrow { max-width:100%; font-size:10px; letter-spacing:1px; margin-bottom:20px; }
  .hero-title { font-size:clamp(60px,17vw,92px); line-height:1.18; text-shadow:3px 3px 0 #020d08; }
  .hero-copy .hero-intro { max-width:520px; font-size:14px; margin:22px 0 24px; }
  .hero-copy .hero-actions { gap:16px; }
  .hero-copy .hero-actions .button { min-height:51px; font-size:17px; padding:12px 18px; }
  .hero-note { margin-top:23px; }
  .home-page .pixel-island-stage { width:100%; max-width:560px; aspect-ratio:1.12; margin:12px 0 4px; }
  .island-coordinate { top:7%; right:2%; }
  .island-hint { bottom:1%; left:auto; right:2%; font-size:10px; }
  .home-page .home-index { padding:0 18px; grid-template-columns:1fr; margin-top:12px; }
  .home-index .index-item,.home-index .index-item + .index-item { display:grid; grid-template-columns:130px minmax(0,1fr); align-items:center; padding:18px 2px; border:0; gap:8px; }
  .home-index .index-item + .index-item { border-top:1px solid #31513d; }
  .home-index .index-item strong { font-size:19px; }
  .home-index .index-item span:first-child { font-size:10px; }
  .home-index .index-item b { font-size:14px; }
  .site-footer { flex-wrap:wrap; gap:14px 20px; padding-bottom:24px; }
  .site-footer .footer-note:nth-child(2) { display:none; }
}
@media(max-width:390px) {
  .site-shell { padding-inline:18px; }
  .brand-name { font-size:20px; gap:7px; }
  .hero-copy .eyebrow { font-size:9px; letter-spacing:.3px; }
  .hero-copy .hero-actions { gap:12px; }
  .hero-copy .hero-actions .button { font-size:16px; padding:12px; gap:14px; }
  .home-index .index-item,.home-index .index-item + .index-item { grid-template-columns:110px minmax(0,1fr); }
  .home-index .index-item strong { font-size:17px; }
}
@media(prefers-reduced-motion:reduce) { .pixel-island,.floating-block,.island-ground-shadow { animation:none!important; } }