:root {
  color-scheme: light;
  --scene-background: #ead0b8;
  --focus: #f3c55f;
  --scene-edge: 6px;
  --ease-settle: cubic-bezier(.2, .82, .2, 1);
  --ease-material: cubic-bezier(.18, .76, .18, 1);
  --ease-close: cubic-bezier(.4, 0, .7, .2);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
}

/* ZCOOL KuaiLe: google/fonts ofl/zcoolkuaile, SIL OFL 1.1 (see assets/fonts). */
@font-face {
  font-family: "ZCOOL KuaiLe";
  src: url("./assets/fonts/ZCOOLKuaiLe-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background: var(--scene-background);
}

button,
a { -webkit-tap-highlight-color: transparent; }

.portfolio-shell {
  display: grid;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  padding: var(--scene-edge);
}

.home-scene {
  position: relative;
  width: min(100%, calc((100vh - 2 * var(--scene-edge)) * 1672 / 941));
  width: min(100%, calc((100svh - 2 * var(--scene-edge)) * 1672 / 941));
  margin: 0;
  overflow: hidden;
  aspect-ratio: 1672 / 941;
  isolation: isolate;
}

.stage,
.project-prop {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

.stage { z-index: 0; }

/* Only the paper footprint is restored. stage.fast.webp remains the room background. */
.resume-clean-patch { position:absolute; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; visibility:hidden; clip-path:polygon(80.87% 32.1%,84.91% 32.6%,84.72% 41.05%,80.67% 40.5%); }
.home-scene[data-mode="resume"] .resume-clean-patch { visibility:visible; }
.resume-trigger { position:absolute; z-index:7; left:80.9%; top:32.6%; width:3.75%; height:8.1%; padding:0; border:0; border-radius:3%; background:transparent; cursor:pointer; transform:skewY(5deg); }
.resume-trigger:focus-visible { outline:3px solid var(--focus); outline-offset:4px; }
.resume-trigger:hover { box-shadow:0 0 0 2px #edc98088; }
.home-scene[data-mode="resume"] .resume-trigger { box-shadow:none; }
.resume-paper { position:fixed; z-index:60; left:max(16px,calc((100vw - 1100px) / 2)); top:3svh; width:min(1100px,calc(100vw - 32px)); height:94svh; display:flex; flex-direction:column; padding:12px; color:#49382d; background:#b46d4f; border-radius:22px; box-shadow:inset 2px 3px 3px #e3ac84,inset -3px -4px 4px #7e412e,0 18px 60px #40291f40; overflow:hidden; transform-origin:0 0; visibility:hidden; }
.resume-paper::before { content:""; position:absolute; inset:10px; border-radius:14px; background:#f2dfbe url('./assets/resume-paper-material-v2.fast.webp') center/100% 100% no-repeat; pointer-events:none; }
.resume-paper.is-visible { visibility:visible; }

/* The red book is sampled from the original stage, never redrawn as a new prop. */
.education-trigger { position:absolute; z-index:12; left:56.5%; top:9.8%; width:7.2%; height:11.5%; border:0; padding:0; border-radius:6px; background:transparent; cursor:pointer; }
.education-trigger:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.education-trigger:hover { box-shadow:0 0 0 2px #edc98077; }
.home-scene[data-mode="education"] .education-trigger { box-shadow:none; }
.education-book-slot { position:absolute; z-index:1; inset:0; pointer-events:none; opacity:0; clip-path:polygon(59.4% 12.16%,60.36% 12%,60.36% 19.8%,59.4% 19.8%); transition:opacity 120ms; }
.education-book-slot img { display:block; width:100%; height:100%; transform:translateX(2.8%); }
.home-scene[data-mode="education"] .education-book-slot { opacity:1; transition-delay:0ms; }
.home-scene.education-returning .education-book-slot { opacity:1; transition-delay:0ms; }
/* Reuse the foldout's full book and the original paper for hover preparation. */
.scene-prop-intent { position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; transition:transform 180ms cubic-bezier(.23,1,.32,1); }
.scene-prop-intent img { display:block; width:100%; height:100%; }
.scene-prop-intent--book { transform-origin:59.8% 20%; filter:drop-shadow(3px 6px 3px #56351f50); }
.scene-prop-intent--book img { position:absolute; left:58.8%; top:10.3%; width:3.8%; height:10.4%; object-fit:contain; transform:perspective(300px) rotateY(-25deg); transform-origin:10% 85%; }
.scene-prop-intent--paper { transform-origin:82.8% 32.3%; filter:drop-shadow(3px 7px 3px #56351f48); }
.scene-prop-intent--paper img { clip-path:polygon(80.87% 32.1%,84.91% 32.6%,84.72% 41.05%,80.67% 40.5%); }
.resume-trigger:hover,.education-trigger:hover { box-shadow:none; }
.home-scene[data-mode="idle"]:has(.education-trigger:focus-visible) .scene-prop-intent--book { opacity:1; transform:translate(-.8%,-2.8%) rotate(-7deg) scale(1.1); }
.home-scene[data-mode="idle"]:has(.education-trigger:is(:focus-visible,:active)) .education-book-slot { opacity:1; }
.home-scene[data-mode="idle"]:has(.resume-trigger:focus-visible) .scene-prop-intent--paper { opacity:1; transform:perspective(900px) translate(-.4%,-1.4%) rotateX(-24deg) rotateY(-12deg) rotate(-7deg) scale(1.12); }
.home-scene[data-mode="idle"]:has(.resume-trigger:is(:focus-visible,:active)) .resume-clean-patch { visibility:visible; }
@media(hover:hover) and (pointer:fine) {
  .home-scene[data-mode="idle"]:has(.education-trigger:hover) .scene-prop-intent--book { opacity:1; transform:translate(-.8%,-2.8%) rotate(-7deg) scale(1.1); }
  .home-scene[data-mode="idle"]:has(.education-trigger:hover) .education-book-slot { opacity:1; }
  .home-scene[data-mode="idle"]:has(.resume-trigger:hover) .scene-prop-intent--paper { opacity:1; transform:perspective(900px) translate(-.4%,-1.4%) rotateX(-24deg) rotateY(-12deg) rotate(-7deg) scale(1.12); }
  .home-scene[data-mode="idle"]:has(.resume-trigger:hover) .resume-clean-patch { visibility:visible; }
}
.home-scene[data-mode="idle"]:has(.education-trigger:active) .scene-prop-intent--book { opacity:1; transform:translate(-1%,-3.3%) rotate(-9deg) scale(1.14); }
.home-scene[data-mode="idle"]:has(.resume-trigger:active) .scene-prop-intent--paper { opacity:1; transform:perspective(900px) translate(-.5%,-1.7%) rotateX(-28deg) rotateY(-15deg) rotate(-9deg) scale(1.15); }
@media(prefers-reduced-motion:reduce) {
  .home-scene .scene-prop-intent { transition:none; transform:none!important; }
}
.education-fold { --education-ease:cubic-bezier(.77,0,.175,1); --education-settle:var(--ease-drawer); position:absolute; z-index:7; left:17%; top:3.3%; width:28%; height:62.5%; perspective:1100px; transform:translate3d(var(--book-source-x,0px),var(--book-source-y,0px),0) scale(var(--book-source-scale,.04)) rotateY(-72deg); transform-origin:50% 0; opacity:0; color:#57321e; pointer-events:none; transition:transform 360ms 420ms var(--education-ease),opacity 100ms 680ms; }
.education-fold::before { content:""; position:absolute; inset:6% 6% 7%; border-radius:22px; box-shadow:8px 12px 20px #59362245; opacity:0; pointer-events:none; transition:opacity 240ms; }
.home-scene[data-mode="education"] .education-fold::before { opacity:1; transition-delay:420ms; }
.home-scene[data-mode="education"] .education-fold { pointer-events:auto; opacity:1; transform:translate3d(0,0,0) rotateY(-7deg); transition-duration:460ms,160ms; transition-delay:0ms,0ms; }
.home-scene:is([data-mode="education"],.education-positioning,.education-returning) .education-fold,
.home-scene:is([data-mode="education"],.education-positioning,.education-returning) .education-cover,
.home-scene:is([data-mode="education"],.education-positioning,.education-returning) .education-half { will-change:transform,opacity; }
.education-positioning .education-fold { transition:none; }
.education-cover { position:absolute; z-index:3; left:0; top:0; width:100%; height:50%; object-fit:contain; transform-origin:10% 50%; transform:rotateY(0deg); opacity:1; pointer-events:none; transition:transform 240ms 180ms var(--education-ease),opacity 140ms 220ms; }
.home-scene[data-mode="education"] .education-cover { transform:rotateY(-105deg); opacity:0; transition-duration:320ms,160ms; transition-delay:480ms,640ms; }
.education-half { position:absolute; left:0; width:100%; height:50%; overflow:hidden; transform-origin:50% 0; transform:rotateX(-88deg); opacity:0; visibility:hidden; backface-visibility:hidden; transition:transform 380ms var(--education-ease),opacity 150ms,visibility 0ms 800ms; }
.education-half--upper { top:0; height:53%; transition-duration:240ms,140ms,0ms; transition-delay:160ms,160ms,400ms; }
.education-half--lower { top:53%; height:47%; transition-duration:240ms,140ms,0ms; transition-delay:0ms,100ms,240ms; }
.home-scene[data-mode="education"] .education-half { transform:none; opacity:1; visibility:visible; }
.home-scene[data-mode="education"] .education-half--upper { transition-duration:360ms,160ms,0ms; transition-timing-function:var(--education-settle),ease,linear; transition-delay:540ms,540ms,0ms; }
.home-scene[data-mode="education"] .education-half--lower { transform:none; transition-duration:420ms,160ms,0ms; transition-timing-function:var(--education-settle),ease,linear; transition-delay:860ms,860ms,0ms; }
.education-material { position:absolute; left:0; width:100%; height:200%; pointer-events:none; user-select:none; }
.education-half--upper .education-material { top:0; height:188.679245%; }
.education-half--lower .education-material { top:-112.765957%; height:212.765957%; }
.education-hinge { position:absolute; z-index:2; top:51.5%; left:0; width:100%; height:3.5%; overflow:hidden; opacity:0; pointer-events:none; transition:opacity 100ms; }
.education-hinge img { position:absolute; left:0; top:-1471.428571%; width:100%; height:2857.142857%; }
.home-scene[data-mode="education"] .education-hinge { opacity:1; transition-delay:1160ms; }
.education-title { position:absolute; margin:0; top:25%; left:20%; width:60%; text-align:center; font-family:'STKaiti','KaiTi','SimSun',serif; font-size:2.6cqw; line-height:1.2; }
.education-close { position:absolute; top:20%; right:6%; display:grid; place-items:center; width:24px; height:24px; border:1px solid #c49a70; padding:0; border-radius:50%; background:#f2dfbd; color:#68462e; font:18px/1 'Microsoft YaHei',sans-serif; cursor:pointer; }
.education-close:focus-visible { outline:2px dashed #967049; outline-offset:2px; }
.education-copy { position:absolute; left:35%; right:8%; font-family:'Microsoft YaHei','PingFang SC',sans-serif; }
.education-copy--upper { top:48%; }
.education-copy--lower { top:20%; }
.education-copy h2 { margin:0 0 .6cqw; font-family:'STKaiti','KaiTi','SimSun',serif; font-weight:600; font-size:1.7cqw; }
.education-copy dl { margin:0; font-size:1.2cqw; line-height:1.35; }
.education-copy dl div { display:grid; grid-template-columns:2.6em 1fr; margin:.2cqw 0; }
.education-copy dd { margin:0; }
.education-period { white-space:nowrap; font-size:.92em; font-variant-numeric:tabular-nums; }
@media(max-width:700px) {
  .education-trigger { min-width:44px; min-height:44px; }
}
@media(prefers-reduced-motion:reduce) {
  .education-book-slot,.education-fold,.education-cover,.education-half,.education-hinge,.education-fold::before { transition:none!important; }
}
.resume-download { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:54px; padding:0 24px; border-radius:10px; background:#38647c; color:#fffaf0; font:600 17px/1.3 'Microsoft YaHei','PingFang SC',sans-serif; text-decoration:none; box-shadow:0 5px 14px #264c6524; }
.resume-download svg { width:22px; height:22px; flex-shrink:0; }
.resume-download:hover { background:#294e65; }
.resume-toolbar { position:relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:16px; padding:16px 20px; flex-shrink:0; font-family:'Microsoft YaHei','PingFang SC',sans-serif; }
.resume-tools { display:flex; align-items:center; gap:12px; }
.resume-tools .resume-download { min-height:48px; padding:0 20px; font-size:16px; }
.resume-paper .resume-download { padding-bottom:5px; border-radius:0; background:transparent url('./assets/island-art-05.fast.webp') center/100% 100% no-repeat; box-shadow:none; color:#fff7e8; }
.resume-paper .resume-download:hover { filter:brightness(1.08); }
.resume-zoom,.resume-open { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 12px; border:1px solid #c8b89f; border-radius:8px; color:#503728; background:transparent; font:500 14px/1.4 'Microsoft YaHei','PingFang SC',sans-serif; text-decoration:none; cursor:pointer; }
.resume-zoom:hover,.resume-open:hover,.resume-close:hover { background:#e9ddc8; }
.resume-paper .resume-zoom,.resume-paper .resume-open { min-width:92px; min-height:48px; padding:0 12px 5px; border:0; border-radius:0; background:transparent url('./assets/island-art-04.fast.webp') center/100% 100% no-repeat; font-family:'ZCOOL KuaiLe','Microsoft YaHei',sans-serif; font-size:17px; }
.resume-paper .resume-zoom:hover,.resume-paper .resume-open:hover { filter:brightness(1.06); }
.resume-close { display:grid; place-items:center; width:44px; height:44px; padding:10px 10px 14px; flex-shrink:0; border:0; border-radius:12px; background:#e9c89c; box-shadow:inset 1px 2px 2px #fff1d6,inset -1px -3px 2px #b58a5d,0 3px 5px #6e45252b; color:#503728; cursor:pointer; }
.resume-close svg { width:24px; height:24px; }
.resume-reading { position:relative; flex:1; min-height:0; container-type:size; padding:24px; overflow:auto; overscroll-behavior:contain; scrollbar-color:#aa9479 #ece4d5; scrollbar-width:thin; background:transparent; opacity:0; transition:opacity 180ms ease; }
.resume-paper.is-readable .resume-reading { opacity:1; }
.resume-page { position:relative; width:min(100%,calc(70.75cqh - 1px)); margin:0 auto; }
.resume-page::before { content:""; position:absolute; z-index:1; top:-11px; left:calc(50% - 30px); width:60px; height:20px; border-radius:5px 5px 8px 8px; background:linear-gradient(#f4d291,#bb843e 65%,#a57336); box-shadow:inset 0 2px 2px #ffedbd,0 3px 4px #6241253b; pointer-events:none; }
.resume-original { display:block; width:100%; max-width:none; height:auto; box-shadow:2px 6px 16px #50372829; background:white; }
.resume-paper.is-zoomed .resume-page { width:900px; }
.resume-paper :focus-visible { outline:3px solid #315e7a; outline-offset:4px; }
.resume-reading:focus-visible { outline-offset:-4px; }
@media(max-width:700px) {
  .resume-paper { left:8px; top:8px; width:calc(100vw - 16px); height:calc(100svh - 16px); padding:7px; border-radius:16px; }
  .resume-paper::before { inset:6px; border-radius:10px; }
  .resume-toolbar { gap:12px; padding:16px 12px 12px; }
  .resume-close { order:1; }
  .resume-tools { order:2; width:100%; gap:8px; }
  .resume-tools .resume-download { flex:1; min-height:48px; padding:0 10px; font-size:15px; gap:6px; }
  .resume-zoom,.resume-open { padding:0 10px; font-size:13px; }
  .resume-paper .resume-zoom,.resume-paper .resume-open { min-width:0; padding:0 10px 5px; font-size:15px; }
  .resume-reading { padding:12px 8px; }
  .resume-trigger { min-width:24px; min-height:24px; }
}
@media(max-width:380px) {
  .resume-tools { display:grid; grid-template-columns:1fr 1fr; }
  .resume-tools .resume-download { grid-column:1 / -1; white-space:nowrap; }
}
@media(prefers-reduced-motion:reduce) { .resume-reading { transition:none; } }

.computer-states {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.computer-state {
  position: absolute;
  display: block;
  height: auto;
  opacity: 0;
  user-select: none;
  pointer-events: none;
  transform-origin: 50% 46%;
  transition: opacity 150ms ease;
  -webkit-user-drag: none;
}

/* Each exported state has different transparent canvas margins. These
   independent boxes align the visible shell, base and keyboard to the
   computer already baked into stage.fast.webp. */
.computer-state--off {
  top: 31.031%;
  left: 60.526%;
  width: 13.696%;
  opacity: 1;
}

.computer-state--on {
  top: 31.031%;
  left: 60.706%;
  width: 13.696%;
}

.computer-state--active {
  top: 30.925%;
  left: 61.124%;
  width: 13.756%;
}

.home-scene[data-computer="on"] .computer-state--off,
.home-scene[data-mode="projects"] .computer-state--off { opacity: 0; }

.home-scene[data-computer="on"] .computer-state--on { opacity: 1; }

.home-scene[data-mode="projects"] .computer-state--on { opacity: 0; }
.home-scene[data-mode="projects"] .computer-state--active { opacity: 1; }

.project-prop {
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease-out, visibility 0s linear 180ms, filter 240ms ease;
}

.home-scene[data-mode="projects"] .project-prop {
  opacity: 1;
  visibility: visible;
  transition-delay: 0ms;
}

.computer-trigger,
.project-link {
  position: absolute;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

.computer-trigger {
  z-index: 6;
  top: 32.5%;
  left: 63.1%;
  width: 10.8%;
  height: 19.5%;
  padding: 0;
  border-radius: 19% 18% 20% 20%;
  cursor: pointer;
}

.computer-trigger::after {
  position: absolute;
  inset: 4% 7% 28%;
  border-radius: 18%;
  box-shadow: 0 0 0 0 rgba(243, 197, 95, 0);
  content: "";
  transition: box-shadow 180ms ease;
}

.computer-trigger:focus-visible::after {
  box-shadow:
    0 0 0 2px rgba(255, 239, 191, .78),
    0 0 20px 5px rgba(243, 197, 95, .28);
}

.computer-trigger:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.project-links {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
}

.project-link {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 180ms ease, visibility 0s linear 180ms;
}

.project-link--service {
  top: 4.8%;
  left: 8.4%;
  width: 46.2%;
  height: 36.4%;
  border-radius: 24px;
  clip-path: polygon(0 0, 100% 0, 100% 63%, 69% 63%, 69% 100%, 0 100%);
}

.project-link--lenormand {
  top: 61.4%;
  left: 15.5%;
  width: 50.8%;
  height: 31%;
  border-radius: 42% 33% 38% 31%;
  clip-path: polygon(0 34%, 26% 0, 98% 23%, 100% 84%, 73% 100%, 0 66%);
}

.home-scene[data-mode="projects"] .project-links { pointer-events: auto; }

.home-scene[data-mode="projects"] .project-link {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0ms;
}

.project-tooltip {
  position: absolute;
  z-index: 2;
  width: max-content;
  max-width: 58%;
  padding: clamp(3px, .38cqw, 7px) clamp(7px, .9cqw, 15px);
  border: 2px solid #a86640;
  border-radius: 9px 11px 8px 10px;
  background: #f4dfbb;
  box-shadow: 0 3px 0 #8c5032, 0 8px 12px rgba(66, 35, 20, .27), inset 0 1px 0 #fff2d5;
  color: #60371f;
  font-family: "ZCOOL KuaiLe", "Microsoft YaHei", sans-serif;
  font-size: clamp(11px, 1.5cqw, 24px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .025em;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px) rotate(-1.5deg);
  transform-origin: 18% 100%;
  transition: opacity 150ms ease-out, transform 190ms var(--ease-settle), visibility 0s linear 190ms;
}

.project-tooltip--service { top: 41.5%; left: 17%; }
.project-tooltip--lenormand { top: 87.8%; left: 31%; }

.project-link:hover + .project-tooltip,
.project-link:focus + .project-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) rotate(-1.5deg);
  transition-delay: 0ms;
}

.home-scene:has(.project-link--service:hover) .service-prop,
.home-scene:has(.project-link--service:focus-visible) .service-prop,
.home-scene:has(.project-link--lenormand:hover) .lenormand-prop,
.home-scene:has(.project-link--lenormand:focus-visible) .lenormand-prop {
  filter: brightness(1.045) saturate(1.04) drop-shadow(0 4px 5px rgba(70, 40, 25, .13));
}

.project-link:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Work is an independent paper archive. The original cabinet remains in stage.fast.webp;
   only the upper moving drawer is exposed from the three supplied sprite canvases. */
.home-scene { container-type: inline-size; }
.drawer-states { position:absolute; inset:0; z-index:4; pointer-events:none; }
.drawer-state { position:absolute; left:67.76%; top:48.03%; width:14.69%; height:auto; opacity:0; transform:translate(8%,-4%); transition:transform 420ms var(--ease-drawer),opacity 160ms ease; }
/* Trace each moving drawer silhouette: a rectangular crop also exposes the
   next drawer and its cabinet trim beneath the pulled-out front. */
.drawer-state--half { mask:url('./assets/drawer-half-mask.svg') 0 0 / 100% 100% no-repeat; }
.drawer-state--open { mask:url('./assets/drawer-open-mask.svg') 0 0 / 100% 100% no-repeat; }
.home-scene[data-drawer="half"] .drawer-state--half,.home-scene[data-drawer="open"] .drawer-state--open { opacity:1; transform:none; }
.drawer-trigger { position:absolute; z-index:9; left:70.6%; top:57.1%; width:7%; height:8.5%; border:0; border-radius:12%; background:transparent; cursor:pointer; }
.drawer-hint { display:none; }
.drawer-trigger:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.work-folder { position:absolute; z-index:8; left:17%; top:8%; width:50%; height:84%; color:#56301c; opacity:0; visibility:hidden; transform-origin:50% 0; }
.home-scene[data-mode="work"] .work-folder { opacity:1; visibility:visible; }
.atlas-piece { position:absolute; display:block; overflow:hidden; pointer-events:none; }
.atlas-piece img { position:absolute; display:block; max-width:none; width:200%; height:200%; user-select:none; }
.atlas-piece--board { inset:0; filter:drop-shadow(0 10px 7px #53271655); }
.atlas-piece--board img { width:258.6%; height:219.6%; left:-16.6%; top:-19.8%; }
.atlas-piece--service img { width:197.1%; height:312.3%; left:-94%; top:-66.9%; }
.atlas-piece--bank img { width:213.2%; height:293.7%; left:-5.3%; top:-180.4%; }
.atlas-piece--intern img { width:207.5%; height:293.7%; left:-104.2%; top:-180.1%; }
.folder-title { position:absolute; z-index:5; top:3.8%; left:37%; width:26%; margin:0; text-align:center; font-family:'STKaiti','KaiTi','SimSun',serif; font-size:4cqw; letter-spacing:.16em; line-height:1.2; }
.folder-close { position:absolute; z-index:6; right:8%; top:6%; width:4.2cqw; height:4.2cqw; padding:0; border:2px solid #ecc795; border-radius:50%; background:#b45034; color:#fff0d5; box-shadow:0 3px 3px #67351a55; font-size:3cqw; line-height:1; cursor:pointer; }
.work-files { position:absolute; inset:17% 9% 9% 8%; }
.work-file { position:absolute; display:block; left:0; width:100%; height:39%; color:inherit; text-decoration:none; transform:none; transition:transform 460ms cubic-bezier(.22,1.5,.4,1),filter 250ms ease; filter:drop-shadow(0 5px 3px #673a2344); border-radius:15px; }
.work-file--service { top:0; z-index:1; }
.work-file--bank { top:31%; z-index:2; }
.work-file--intern { top:62%; z-index:3; }
.file-art { inset:0; }
.file-copy { position:absolute; left:55%; top:18%; right:10%; display:flex; flex-direction:column; gap:.35cqw; font-family:'Microsoft YaHei','PingFang SC',sans-serif; }
.file-copy strong { font-family:'STKaiti','KaiTi','SimSun',serif; font-size:1.9cqw; }
.file-meta,.file-time { font-size:1.03cqw; line-height:1.4; }
.file-summary { font-size:.98cqw; line-height:1.4; color:#79563b; }
.file-pull { position:absolute; right:4%; top:30%; writing-mode:vertical-rl; font-size:.8cqw; color:#825131; }
.work-file:focus-visible { outline:3px solid var(--focus); outline-offset:2px; z-index:5; transform:translate(5%,-3%); }
@media (hover:hover) and (pointer:fine) { .work-file:hover { z-index:5; transform:translate(5%,-3%); filter:drop-shadow(-5px 12px 7px #673a2355); } }
.folder-close:focus-visible { outline:3px solid var(--focus); outline-offset:4px; }
.folder-note { position:absolute; bottom:4.8%; left:0; right:0; text-align:center; margin:0; font-size:.95cqw; }
@media (max-width:700px) {
  .drawer-trigger { min-width:32px; min-height:32px; }
}
@media (prefers-reduced-motion:reduce) {
  .work-folder,.work-file,.drawer-state { transition:none!important; }
  .work-file:hover,.work-file:focus-visible { transform:none; }
}

.work-detail { min-height:100svh; background:#ead0b8; color:#56301c; font-family:'Microsoft YaHei','PingFang SC',sans-serif; padding:clamp(16px,4vw,64px); }
.dossier-page { position:relative; max-width:1100px; min-height:680px; margin:0 auto; padding:60px; border:12px solid #b7573b; border-radius:32px 32px 20px 20px; background:#f4debd; box-shadow:0 12px 0 #8d432e,0 24px 30px #74432333,inset 0 0 0 2px #c59562; }
.dossier-return { color:#73412b; text-underline-offset:5px; }
.dossier-return:focus-visible { outline:3px solid #965d25; outline-offset:6px; }
.dossier-portrait { left:5%; top:28%; width:32%; height:43%; }
.dossier-portrait img { width:650%; height:293.7%; }
.dossier-portrait.atlas-piece--service img { left:-310%; top:-66.9%; }
.dossier-portrait.atlas-piece--bank img { left:-16%; top:-180.4%; }
.dossier-portrait.atlas-piece--intern img { left:-326%; top:-180.1%; }
.dossier-content { position:relative; margin:40px 0 30px 36%; }
.dossier-content h1 { font-family:'STKaiti','KaiTi','SimSun',serif; font-size:clamp(30px,4vw,50px); margin:0 0 20px; }
.dossier-placeholder { color:#926346; }
.dossier-content dl { margin:36px 0; }
.dossier-content dl div { display:grid; grid-template-columns:70px 1fr; padding:12px 0; border-bottom:1px solid #d6b68e; }
.dossier-content dd { margin:0; }
.dossier-content h2 { font-family:'STKaiti','KaiTi','SimSun',serif; font-size:25px; }
.dossier-content p { line-height:1.8; }
@media(max-width:700px) {
  .dossier-page { padding:25px; min-height:720px; border-width:7px; }
  .dossier-portrait { top:85px; left:12%; width:65%; height:200px; }
  .dossier-content { margin:260px 0 0; }
}

@media (orientation: portrait) {
  :root { --scene-edge: 4px; }

  .portfolio-shell { min-height: 0; }
  .home-scene { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .computer-state,
  .project-link,
  .computer-trigger::after {
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }

  .project-prop,
  .project-tooltip { transition: none !important; }

  .project-tooltip { transform: rotate(-1.5deg); }
}