#portfolioStage {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  color: #e9f7ff;
  font-family: 'Orbitron', 'Microsoft YaHei UI', sans-serif;
}
#portfolioStage.visible { visibility: visible; }
#portfolioStage.interactive { pointer-events: auto; }
#portfolioStage::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 46%, transparent 35%, rgba(3, 7, 18, .3) 90%);
}
.portfolio-topline {
  position: absolute;
  top: 70px;
  right: 36px;
  left: 36px;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: .18em;
  color: #95bac9;
  text-shadow: none;
  pointer-events: none;
}
.portfolio-topline span {
  min-width: 0;
  padding-top: 8px;
  border-top: 1px solid rgba(135, 227, 255, .28);
}
#portfolioCounter { color: #bdc7df; text-align: right; border-color: rgba(183, 178, 220, .28); font-variant-numeric: tabular-nums; }
#portfolioRail { position: absolute; inset: 0; cursor: grab; touch-action: none; }
#portfolioRail.dragging { cursor: grabbing; }
.portfolioNav {
  position: absolute;
  z-index: 5;
  top: 49%;
  width: 43px;
  height: 60px;
  transform: translateY(-50%);
  border: 1px solid rgba(117, 231, 255, .5);
  background: rgba(5, 18, 43, .55);
  color: #a6f4ff;
  font: 24px 'Orbitron', sans-serif;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1);
}
.portfolioNav:hover, .portfolioNav:focus-visible { background: rgba(25, 111, 153, .42); box-shadow: 0 0 25px rgba(62,217,255,.25); outline: none; }
#portfolioPrev { left: 24px; }
#portfolioNext { right: 24px; }
#portfolioDetail {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: max(54px, calc(env(safe-area-inset-bottom) + 36px));
  width: min(440px, 64vw);
  transform: translateX(-50%);
  padding: 12px 22px 13px;
  border-top: 0;
  background: linear-gradient(90deg, rgba(5, 15, 39, .15), rgba(5, 15, 39, .82) 28%, rgba(5, 15, 39, .82) 72%, rgba(5, 15, 39, .15));
  text-align: center;
  pointer-events: none;
}
#portfolioDetail a { pointer-events: auto; }
.portfolio-detail-kicker { display: block; font-size: 9px; letter-spacing: .18em; color: #79a8b9; }
#portfolioTitle { display: block; margin-top: 8px; font-family: 'Microsoft YaHei', 'PingFang SC', system-ui, sans-serif; font-size: 21px; font-weight: 500; letter-spacing: .06em; color: #f0f5fa; }
#portfolioDescription { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 8px; font: 12px/1.8 'Microsoft YaHei UI', sans-serif; color: #a9bdcd; }
#portfolioVisit { display: inline-block; margin-top: 8px; color: #89f4ff; font-size: 11px; letter-spacing: .1em; text-decoration: none; }
#portfolioVisit[hidden] { display: none; }
#portfolioEmpty {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 22px;
  border: 1px solid rgba(117, 231, 255, .55);
  color: #c5eaf5;
  background: rgba(6, 19, 43, .8);
  font-size: 13px;
  letter-spacing: .12em;
}
#portfolioEmpty[hidden], .portfolioNav[hidden] { display: none; }
.portfolioHint {
  position: absolute;
  right: 0;
  bottom: 19px;
  left: 0;
  z-index: 4;
  color: #647d96;
  font: 10px 'Orbitron', sans-serif;
  letter-spacing: .17em;
  text-align: center;
  pointer-events: none;
}
@media (max-width: 700px) {
  :where(html.dev-mobile) .portfolio-topline{ top: 64px; right: 17px; left: 17px; font-size: 9px; }
  :where(html.dev-mobile) .portfolio-topline span{ min-width: 88px; }
  :where(html.dev-mobile) .portfolioNav{ top: 46%; width: 31px; height: 48px; font-size: 18px; }
  :where(html.dev-mobile) #portfolioPrev{ left: 8px; }
  :where(html.dev-mobile) #portfolioNext{ right: 8px; }
  :where(html.dev-mobile) #portfolioDetail{ bottom: 46px; width: calc(100vw - 68px); padding: 10px 8px; }
  :where(html.dev-mobile) #portfolioTitle{ font-size: 16px; }
  :where(html.dev-mobile) #portfolioDescription{ font-size: 11px; }
  :where(html.dev-mobile) .portfolioHint{ bottom: 17px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .portfolioNav { transition-duration: .01ms; }
}

/* Texture and border carry the material; film noise stays secondary. */
body.works-active #grain { opacity: .012; animation-play-state: paused; }
body.works-active #vhs { opacity: .065; }
body.works-active #scanlines { opacity: .09; }
body.works-active #crt { opacity: .08 !important; animation-play-state: paused; }
body.works-active #chroma { opacity: .15; }
#grain, #vhs, #scanlines { transition: opacity .65s cubic-bezier(.22,.7,.2,1); }
#portfolioDetail::before {
  content: ''; display: block; width: 28px; height: 1px;
  margin: 0 auto 13px; background: rgba(124, 216, 232, .48);
}
@media (max-height: 600px) {
  .portfolio-topline { top: 54px; }
  #portfolioDetail { bottom: 25px; padding: 5px 12px; }
  #portfolioDetail::before, #portfolioDescription, .portfolioHint { display: none; }
  #portfolioTitle { margin-top: 4px; font-size: 17px; }
}

/* v20260926h: the phone cover is DOM, not the 3D terrain face - on this user's phone
   the WebGL face broke into strips of cover whatever the atlas or the band maths did,
   while a plain <img> renders exactly. Desktop never sees this element. */
#portfolioCover { display: none; }
@media (max-width: 767px) {
  :where(html.dev-mobile) #portfolioCover{
    display: block;
    position: absolute;
    left: 50%;
    top: 42%;
    z-index: 3;
    /* also capped by the free band between the ACON / WORKS line and the detail panel */
    width: min(86vw, 46vh, calc((100vh - 340px) / 1.34));
    margin: 0;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.94);
    pointer-events: none;
    transition: transform 1s cubic-bezier(.16,1,.3,1), opacity .7s cubic-bezier(.22,.7,.2,1);
  }
  :where(html.dev-mobile) #portfolioStage.visible #portfolioCover{ opacity: 1; transform: translate(-50%, -50%) scale(1); }
  :where(html.dev-mobile) #portfolioCover img{
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
    transition: opacity .22s cubic-bezier(.22, .7, .2, 1);
  }
  :where(html.dev-mobile) #portfolioCoverImage{
    border: 1px solid rgba(177, 225, 239, .46);
    background: #071426;
    box-shadow: 0 10px 28px rgba(0, 4, 16, .36), 0 0 18px rgba(129, 207, 227, .09);
  }
  :where(html.dev-mobile) .pc-reflect{ position: relative; height: 0; padding-bottom: 34%; margin-top: 6px; overflow: hidden; }
  :where(html.dev-mobile) .pc-reflect img{
    position: absolute;
    top: 0;
    left: 0;
    /* default origin: the mirror stays below the card instead of flipping up over it */
    transform: scaleY(-1);
    opacity: .17;
    filter: blur(.6px);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.6) 45%, rgba(0,0,0,1) 96%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.6) 45%, rgba(0,0,0,1) 96%);
  }
  :where(html.dev-mobile) #portfolioCover.swap #portfolioCoverImage, :where(html.dev-mobile) #portfolioCover.swap .pc-reflect img{ opacity: .22; }
}
@media (prefers-reduced-motion: reduce) {
  :where(html.dev-mobile) #portfolioCover, :where(html.dev-mobile) #portfolioCover img { transition-duration: .01ms; }
}