:root{
  color-scheme:dark;
  --ink:#f4edda;
  --muted:#bdbca9;
  --gold:#d7bc80;
  --forest:#152421;
  --paper:#f3eedf;
  --dark-ink:#30382f;
  --ease:cubic-bezier(.22,.7,.18,1);
  font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif
}
*{
  box-sizing:border-box
}
body{
  margin:0;
  background:#13221f;
  color:var(--ink)
}
button,input,select{
  font:inherit
}
button,a,input,select{
  -webkit-tap-highlight-color:transparent
}
button{
  color:inherit;
  cursor:pointer
}
a{
  color:inherit
}
button{
  border:0
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:5px
}
button:disabled{
  cursor:wait
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
[hidden]{
  display:none!important
}
.skip-link{
  position:fixed;
  z-index:50;
  top:-80px;
  left:20px;
  padding:12px 18px;
  background:var(--paper);
  color:var(--dark-ink);
  text-decoration:none
}
.skip-link:focus{
  top:12px
}
.forest-app{
  position:relative;
  min-height:100svh;
  isolation:isolate;
  overflow:hidden
}
.site-header{
  position:absolute;
  z-index:10;
  top:0;
  left:0;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:25px clamp(22px,3.2vw,55px);
  background:linear-gradient(#11231ff5,#11231f9c 65%,transparent);
  pointer-events:none
}
.site-header>*{
  pointer-events:auto
}
.wordmark{
  font-family:Georgia,serif;
  font-size:25px;
  letter-spacing:.16em;
  text-decoration:none;
  text-shadow:0 2px 12px #07110e
}
.wordmark-caption{
  display:block;
  font-family:inherit;
  font-size:9px;
  letter-spacing:.12em;
  color:#d4d2ba;
  margin-top:7px
}
.site-header nav{
  display:flex;
  gap:24px
}
.nav-button{
  background:transparent;
  padding:10px 0;
  color:#ddd9c4;
  font-size:14px;
  letter-spacing:.05em;
  position:relative
}
.nav-button:hover,.nav-button.is-current{
  color:#ffe6b2
}
.nav-button::after{
  content:"";
  position:absolute;
  bottom:4px;
  height:1px;
  background:var(--gold);
  left:0;
  width:0;
  transition:width .25s
}
.nav-button:hover::after,.nav-button:focus-visible::after{
  width:100%
}
.nav-count{
  font-size:9px;
  opacity:.65;
  vertical-align:super;
  margin-left:4px
}
.scene-scroll{
  height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden
}
.scene-stage{
  position:relative;
  width:min(100vw,calc(100svh * 1.77577));
  aspect-ratio:1671/941;
  flex-shrink:0;
  isolation:isolate
}
.scene-image{
  display:block;
  width:100%;
  height:100%;
  user-select:none
}
.scene-top-shade{
  position:absolute;
  inset:0 0 auto;
  height:7.3%;
  background:linear-gradient(#152b27fc,#152b27e6 80%,#152b2700);
  z-index:1;
  pointer-events:none
}
.scene-layers,.scene-portals{
  position:absolute;
  inset:0
}
.scene-layers{
  z-index:2;
  pointer-events:none;
  perspective:1200px
}
.portal-state{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
  pointer-events:none;
  user-select:none
}
.portal-state{
  opacity:0;
  transition:opacity .3s var(--ease);
  filter:brightness(.97)
}
.portal-layer{
  position:absolute;
  inset:0;
  pointer-events:none
}
.portal-layer::after{
  content:"";
  position:absolute;
  left:var(--glow-x);
  top:var(--glow-y);
  width:var(--glow-w);
  height:var(--glow-h);
  background:radial-gradient(ellipse,#ffe8a22b,transparent 70%);
  opacity:0;
  transition:opacity .6s;
  mix-blend-mode:screen
}
.portal-layer.is-opening::after,.portal-layer.is-open::after{
  opacity:1
}
.scene-portals{
  z-index:4
}
.portal-button{
  position:absolute;
  background:transparent;
  border-radius:36% 36% 8% 8%;
  padding:0;
  transition:filter .2s;
  outline-offset:4px
}
.portal-button::after{
  content:"";
  position:absolute;
  inset:14% 10% 8%;
  box-shadow:0 0 35px #ffd99b00;
  border:1px solid transparent;
  border-radius:40% 40% 8px 8px;
  transition:.25s;
  pointer-events:none
}
.portal-button:hover::after,.portal-button:focus-visible::after{
  box-shadow:0 0 45px #ffd99b18;
  border-color:#ffe4a22b
}
.portal-label{
  position:absolute;
  left:50%;
  top:82%;
  transform:translate(-50%,8px);
  white-space:nowrap;
  background:#10231fe8;
  backdrop-filter:blur(10px);
  padding:9px 14px;
  border:1px solid #d9bb7240;
  border-radius:3px;
  font-size:13px;
  box-shadow:0 5px 20px #0004;
  opacity:0;
  transition:.22s;
  pointer-events:none
}
.portal-label small{
  display:block;
  font-size:10px;
  color:#ddd2b4;
  margin-top:4px
}
.portal-button:hover .portal-label,.portal-button:focus-visible .portal-label,.portal-button[data-active="true"] .portal-label{
  opacity:1;
  transform:translate(-50%,0)
}
.scene-hud{
  position:absolute;
  z-index:8;
  bottom:22px;
  left:clamp(22px,3.2vw,55px);
  right:clamp(22px,3.2vw,55px);
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  pointer-events:none
}
.scene-hud>*{
  pointer-events:auto
}
.eyebrow{
  font-size:10px;
  letter-spacing:.18em;
  color:var(--gold)
}
.scene-caption p{
  font-family:"Songti SC",Georgia,serif;
  font-size:17px;
  letter-spacing:.05em;
  margin:9px 0 0;
  text-shadow:0 2px 10px #000
}
.mobile-hint{
  display:none
}
.motion-toggle{
  font-size:11px;
  background:#10231fbd;
  color:#cccab7;
  border:1px solid #e2dab226;
  padding:9px 12px;
  border-radius:3px
}
.motion-toggle span{
  margin-left:8px;
  color:#eee0bd
}
.mobile-portals{
  display:none
}
.loading-screen{
  position:absolute;
  inset:0;
  background:#152421;
  z-index:20;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transition:opacity .4s
}
.loading-screen.is-ready{
  opacity:0;
  pointer-events:none
}
.loading-symbol{
  font-size:50px;
  color:var(--gold);
  animation:breathe 2s ease infinite
}
.loading-screen p{
  font-size:14px;
  letter-spacing:.12em;
  color:var(--muted)
}
@keyframes breathe{
  50%{
    opacity:.3;
    transform:scale(.9)
  }
}
@media(min-aspect-ratio:2/1){
  .scene-stage{
    box-shadow:0 0 70px 45px #13221f
  }
  .scene-hud{
    bottom:25px
  }
}
@media(max-width:700px){
  .site-header{
    padding:17px 20px
  }
  .wordmark{
    font-size:21px
  }
  .wordmark-caption{
    display:none
  }
  .site-header nav{
    gap:15px
  }
  .nav-button{
    font-size:12px
  }
  .nav-count{
    display:none
  }
  .scene-scroll{
    height:calc(100svh - 154px);
    min-height:490px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    scroll-behavior:smooth;
    padding-top:45px
  }
  .scene-scroll::-webkit-scrollbar{
    display:none
  }
  .scene-stage{
    width:max(950px,calc((100svh - 175px) * 1.77577))
  }
  .scene-top-shade{
    height:7.7%
  }
  .scene-hud{
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    padding:17px 21px 0;
    align-items:center
  }
  .scene-caption p{
    font-size:15px;
    margin-top:7px
  }
  .scene-caption .eyebrow{
    font-size:8px
  }
  .mobile-hint{
    display:block;
    color:#a5b09b;
    font-size:10px;
    margin-top:9px
  }
  .motion-toggle{
    font-size:10px;
    padding:9px
  }
  .mobile-portals{
    display:flex;
    gap:7px;
    overflow-x:auto;
    padding:15px 20px 19px;
    scrollbar-width:none
  }
  .mobile-portals button{
    flex-shrink:0;
    background:#21372c;
    border:1px solid #d8bf7a2b;
    border-radius:3px;
    font-size:11px;
    padding:11px 13px;
    color:#ded9c1
  }
  .mobile-portals button[aria-pressed=true]{
    border-color:#d8bf7a;
    color:#ffe2aa
  }
  .portal-label{
    font-size:12px;
    padding:8px 10px
  }
  .portal-label small{
    font-size:10px
  }
  .detail-dialog,.catalog-dialog,.about-dialog{
    width:calc(100vw - 24px);
    max-height:calc(100svh - 28px);
    border-radius:7px
  }
  .detail-dialog .dialog-surface{
    display:block;
    min-height:0
  }
  .detail-banner{
    height:125px
  }
  .detail-banner::after{
    inset:13px;
    border-radius:50px 50px 5px 5px
  }
  .detail-banner>span:first-child{
    font-size:53px
  }
  .banner-orbit{
    width:90px;
    height:90px
  }
  .detail-copy{
    padding:27px 25px 25px
  }
  .detail-copy h1{
    font-size:30px
  }
  .detail-subtitle{
    margin-bottom:18px
  }
  .detail-description{
    margin-bottom:23px
  }
  .feature-list{
    margin-bottom:20px
  }
  .detail-meta{
    font-size:10px
  }
  .close-button{
    width:44px;
    height:44px;
    right:12px;
    top:12px
  }
  .catalog-surface{
    padding:35px 21px 25px
  }
  .catalog-header h1{
    font-size:clamp(21px,6.4vw,26px);
    padding-right:0
  }
  .catalog-header p{
    font-size:12px
  }
  .catalog-controls{
    gap:7px
  }
  .category-field select{
    font-size:11px;
    padding:10px 7px;
    max-width:104px
  }
  .project-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px
  }
  .project-card{
    padding:16px 12px;
    min-height:145px
  }
  .project-card h2{
    font-size:13px;
    margin-right:0
  }
  .project-card p{
    font-size:11px
  }
  .card-arrow{
    right:11px
  }
  .about-surface{
    padding:46px 27px 30px
  }
  .about-surface h1{
    font-size:29px
  }
  .about-surface p{
    font-size:13px
  }
  .primary-link,.secondary-link{
    min-height:44px
  }
  .back-to-forest,.text-button{
    min-height:44px
  }
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important
  }
  .loading-symbol{
    animation:none
  }
}
.reduce-motion *,.reduce-motion *::before,.reduce-motion *::after{
  animation-duration:.01ms!important;
  transition-duration:.01ms!important;
  scroll-behavior:auto!important
}
.scene-top-shade{
  height:8%;
  background:linear-gradient(#152b27 0%,#152b27 76%,#152b2700 100%)
}
body:has(dialog[open]){
  overflow:hidden
}
.banner-caption{
  display:none
}
.detail-banner.has-entrance{
  background-repeat:no-repeat;
  background-image:linear-gradient(#122b2510,#122b2570),var(--forest-texture);
  background-size:auto 100%;
  background-position:var(--entrance-x) center
}
.detail-banner.has-entrance::after{
  background:linear-gradient(transparent 60%,#10291cbf);
  border-color:#dfcea84d
}
.detail-banner.has-entrance #detail-symbol,.detail-banner.has-entrance .banner-orbit{
  display:none
}
.detail-banner.has-entrance .banner-caption{
  display:block;
  position:absolute;
  bottom:43px;
  left:25px;
  z-index:2;
  color:#f3e7be;
  font:22px Georgia,"Songti SC",serif;
  letter-spacing:.04em
}
@media(max-width:700px){
  .scene-scroll{
    height:calc(100svh - 174px);
    min-height:510px;
    overflow-y:hidden;
    padding-top:64px
  }
  .scene-stage{
    width:max(900px,calc((100svh - 238px) * 1.77577))
  }
  .scene-top-shade{
    height:8.5%;
    background:linear-gradient(#152b27 0%,#152b27 84%,#152b2700 100%)
  }
  .detail-banner.has-entrance{
    height:150px;
    background-size:100% auto;
    background-position:var(--entrance-x) 50%
  }
  .detail-banner.has-entrance .banner-caption{
    bottom:22px;
    left:24px;
    font-size:19px
  }
}


.portal-state{opacity:0;transition:none}
.portal-layer.is-open .portal-state{opacity:1}
.portal-state{filter:none}
.detail-banner.has-entrance{background-color:#172c26;background-image:linear-gradient(180deg,#142d25 0%,#142d2560 13%,#142d2500 32%,#142d2570 74%,#142d25 100%),var(--forest-texture)}
.detail-banner.has-entrance{background:#172c26}
.banner-art{display:none}
.has-entrance .banner-art{display:block;position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);background-repeat:no-repeat;mask-image:radial-gradient(ellipse,#000 56%,transparent 100%)}
@media(max-width:700px){
  .scene-scroll{height:calc(100svh - 130px - env(safe-area-inset-bottom,0px));min-height:430px;padding-top:0;align-items:flex-start}
  .scene-stage{width:max(780px,calc((100svh - 130px - env(safe-area-inset-bottom,0px))*1.77577))}
  .scene-caption .eyebrow{display:none}
  .scene-caption p{margin-top:0;font-size:14px}
  .mobile-hint{margin-top:7px}
  .mobile-portals{padding-top:11px;padding-bottom:calc(13px + env(safe-area-inset-bottom,0px))}
  .mobile-portals button{min-height:44px}
  .motion-toggle,.nav-button{min-height:44px}
}

/* The scene stays interactive while its high-resolution texture arrives. */
.loading-screen{inset:auto 22px 115px auto;background:#10231fe6;border:1px solid #d8bf7a33;border-radius:4px;padding:9px 13px;flex-direction:row;gap:9px;max-width:calc(100% - 44px);pointer-events:none;transition:opacity .16s;z-index:8}
.loading-screen p{font-size:11px;letter-spacing:0;margin:0}
.loading-screen .loading-symbol{font-size:17px}
.loading-screen button{pointer-events:auto;white-space:nowrap}
.portal-state{z-index:1}
.portal-state.is-visible{opacity:1}
.has-entrance .banner-art{inset:18px 15px 65px;transform:none;width:auto;height:auto;mask-image:none}
.banner-art svg{display:block;width:100%;height:100%;overflow:hidden}
.fireflies{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}
.fireflies i{position:absolute;width:3px;height:3px;border-radius:50%;background:#e6d28b;box-shadow:0 0 9px #f7d46c;animation:firefly-drift 7s ease-in-out infinite;opacity:0}
.fireflies i:nth-child(1){left:32%;top:61%;animation-delay:-1s}
.fireflies i:nth-child(2){left:48%;top:42%;animation-delay:-4s}
.fireflies i:nth-child(3){left:68%;top:57%;animation-delay:-2s}
.fireflies i:nth-child(4){left:84%;top:69%;animation-delay:-6s}
@keyframes firefly-drift{0%,100%{opacity:0;transform:translate3d(0,5px,0)}35%{opacity:.7}70%{opacity:.25;transform:translate3d(14px,-20px,0)}}
@media(max-width:700px){.loading-screen{bottom:145px;right:16px}.has-entrance .banner-art{inset:8px 15px 18px}.portal-label{backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){.fireflies{display:none}}
.reduce-motion .fireflies{display:none}
.detail-banner.has-entrance:not(.texture-ready) #detail-symbol{display:block}
.detail-banner.has-entrance:not(.texture-ready) .banner-art{visibility:hidden}

/* The forest fills the viewport; there is no framed image or footer strip. */
.scene-scroll{height:100svh;min-height:0;padding:0;justify-content:flex-start;align-items:center;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none}
.scene-scroll::-webkit-scrollbar{display:none}
.scene-stage{width:max(100vw,calc(100svh * 1.77577))}
.scene-top-shade{height:9%;background:linear-gradient(#10231fb3,transparent)}
.scene-hud{position:absolute;left:clamp(22px,3.2vw,55px);right:clamp(22px,3.2vw,55px);bottom:28px;padding:0;pointer-events:none;text-shadow:0 2px 8px #06170e}
.scene-hud button{pointer-events:auto}
.pan-controls{display:none;position:absolute;inset:0;z-index:6;pointer-events:none;align-items:center;justify-content:space-between;padding:0 12px}
.is-panorama .pan-controls{display:flex}
.pan-controls button{pointer-events:auto;width:38px;height:52px;background:#10231f88;border:1px solid #d7bc8033;border-radius:30px;color:#f4edda;font:32px Georgia,serif;transition:opacity .16s,background .16s}
.pan-controls button:hover{background:#10231fc9}
.pan-controls button:disabled{opacity:.2;pointer-events:none}
.is-panorama .mobile-hint{display:block}
@media(min-aspect-ratio:2/1){.scene-stage{box-shadow:none}}
@media(max-width:700px){
  .scene-scroll{height:100svh;min-height:0;padding:0;align-items:center}
  .scene-stage{width:max(100vw,calc(100svh * 1.77577))}
  .scene-hud{bottom:84px;left:20px;right:20px}
  .mobile-portals{position:absolute;left:0;right:0;bottom:0;z-index:7;margin:0;padding:19px 20px calc(16px + env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,#10231fa6);pointer-events:auto}
  .scene-caption p{font-size:13px;max-width:260px}
  .mobile-hint{font-size:10px}
  .pan-controls{padding:0 8px}
  .pan-controls button{width:32px;height:44px;font-size:28px}
  .loading-screen{bottom:155px}
}
.pan-controls button{width:44px}
@media(max-width:700px){.pan-controls button{width:44px;height:44px}}
.reduce-motion,.reduce-motion::backdrop{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce){dialog::backdrop{animation-duration:.01ms!important}}

.detail-banner::after,.banner-orbit{display:none!important}
/* Entrance hints are plain scene text, with no glass plate or enclosing outline. */
.portal-button::after{display:none}
.portal-button:focus-visible{outline:none}
.portal-label{background:none;border:0;box-shadow:none;backdrop-filter:none;padding:0;font-weight:600;text-shadow:0 1px 3px #03140e,0 2px 9px #03140e,0 0 18px #03140e}
.portal-button:focus-visible .portal-label{text-decoration:underline;text-decoration-color:#e6c98c;text-underline-offset:5px}
.portal-label small{font-weight:400;text-decoration:none}