: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); }
}



@font-face { font-family:"Zen Maru Gothic"; src:url('./assets/fonts/ZenMaruGothic-Medium.ttf') format('truetype'); font-style:normal; font-weight:500; font-display:swap; }
/* The original stage and its interactions share one uniformly scaled box. */
.scrapbook-home { --scene-background:#b8a794; }
.scrapbook-sheet { position:relative; width:min(100%,calc((100svh - 12px) * 1672 / 941)); aspect-ratio:1672 / 941; container-type:inline-size; isolation:isolate; }
.scrapbook-backing { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.scrapbook-home .home-scene { position:absolute; left:14%; top:9%; width:77%; height:77%; margin:0; overflow:hidden; }
.scrapbook-home .stage { mask:url('./assets/stage-silhouette-mask-v1.fast.webp') center / 100% 100% no-repeat; filter:drop-shadow(0 8px 7px #58352233); }
.scrapbook-index { position:absolute; inset:0; z-index:13; pointer-events:none; }
.index-trigger { position:absolute; border:0; padding:0; background:transparent; cursor:pointer; pointer-events:auto; border-radius:15%; transition:box-shadow 240ms ease; }
.index-trigger--resume { left:91.4%; top:13%; width:6.2%; height:11.8%; transform:rotate(-5deg); }
.index-trigger--work { left:92%; top:25.5%; width:6.1%; height:11.4%; transform:rotate(-4deg); }
.index-trigger--projects { left:92.5%; top:37.8%; width:6.1%; height:11%; transform:rotate(-4deg); }
.index-trigger--contact { left:93.2%; top:50.2%; width:6%; height:11.1%; transform:rotate(-4deg); }
.index-trigger:hover { box-shadow:inset 0 0 0 2px #ffe2a877,0 3px 9px #52362233; }
.index-trigger[aria-expanded="true"] { box-shadow:inset 0 0 0 2px #ffe2a8aa; }
.index-trigger:focus-visible,.character-trigger:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.character-trigger { position:absolute; z-index:12; left:4.2%; top:51%; width:9.2%; height:45%; border:0; padding:0; background:transparent; cursor:pointer; border-radius:40%; }
.character-hint { position:absolute; bottom:102%; left:32%; width:max-content; padding:.5cqw 1cqw; border-radius:45% 45% 40% 15%; background:#f8e5c5; box-shadow:0 3px 8px #60472a33; color:#68452b; font:1.2cqw 'ZCOOL KuaiLe',sans-serif; opacity:0; transform:translateY(5px); transition:opacity 200ms,transform 400ms var(--ease-settle); pointer-events:none; }
.character-trigger:is(:hover,:focus-visible) .character-hint { opacity:1; transform:none; }
.contact-note { position:absolute; z-index:14; left:17%; top:17%; width:29%; min-height:23%; padding:4% 3%; background:none; color:#fff3de; isolation:isolate; opacity:0; visibility:hidden; transform:rotate(-3deg) translateY(10px); transition:opacity 240ms,transform 520ms var(--ease-settle),visibility 0ms 520ms; }
.scrapbook-sheet:has(.home-scene[data-mode="contact"]) .contact-note { visibility:visible; opacity:1; transform:rotate(-3deg); transition-delay:0ms; }
.contact-note h1 { margin:0 0 1.3cqw; font:700 2.2cqw var(--rounded-type); }
.contact-note address { display:flex; flex-direction:column; gap:.8cqw; font:500 1.2cqw var(--rounded-type); }
.contact-note a { color:inherit; text-underline-offset:4px; }
.contact-close { position:absolute; right:12%; top:15%; border:0; padding:4px; background:none; color:#fff3de; font:500 1cqw var(--rounded-type); cursor:pointer; }
.contact-note :focus-visible { outline:2px dashed #fff3de; outline-offset:4px; }
@media(prefers-reduced-motion:reduce) { .scrapbook-home .project-prop,.index-trigger,.character-hint,.contact-note { transition:none; } }

.scrapbook-home { --rounded-type:"Zen Maru Gothic","Microsoft YaHei","PingFang SC",sans-serif; }
.contact-note::before { content:""; position:absolute; inset:0; z-index:-1; background:#607985 url('./assets/resume-paper-material-v2.fast.webp') center / 100% 100% no-repeat; background-blend-mode:multiply; mask:url('./assets/resume-paper-material-v2.fast.webp') center / 100% 100% no-repeat; filter:drop-shadow(0 8px 8px #3c4d5344); }
.scrapbook-home .file-copy { left:55%; right:7%; top:26%; gap:.3cqw; font-family:var(--rounded-type); }
.scrapbook-home .file-copy strong { font-family:var(--rounded-type); font-size:2.1cqw; font-weight:700; line-height:1.25; margin-bottom:.4cqw; }
.file-company { font-size:1.15cqw; font-weight:500; line-height:1.4; }
.file-team { font-size:1.02cqw; line-height:1.35; color:#78563c; }
.scrapbook-home .file-time { font-family:var(--rounded-type); font-size:1.02cqw; font-weight:500; line-height:1.4; margin-top:.4cqw; font-variant-numeric:tabular-nums; }

.scrapbook-home .folder-title { top:6.5%; font-family:var(--rounded-type); font-size:3.6cqw; font-weight:700; letter-spacing:.08em; line-height:1.2; }
/* Customer file keeps the hierarchy of the opened career nameplate. */
.scrapbook-home .work-file--service .file-copy{top:21%;gap:.2cqw}
.scrapbook-home .work-file--service .file-copy strong{font-size:1.65cqw;letter-spacing:.025em;white-space:nowrap;color:#294859;margin:.15cqw 0}
.scrapbook-home .work-file--service .file-company{color:#724a31;font-size:1cqw}
.scrapbook-home .work-file--service .file-team{color:#4b544d}
.career-departure{container-type:inline-size;filter:drop-shadow(-6px 14px 10px #56321f55)}
.career-transition{position:fixed;inset:0;z-index:1000;pointer-events:none;background:#e9d7b8 url('./assets/customer-shared-background-v10.fast.webp') center/cover no-repeat}
.career-transition-sheet{position:absolute;transform-origin:50% 0}
.career-transition-sheet img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.career-transition-sheet .career-headset-clear{clip-path:inset(25% 63.5% 55% 28.5%)}
.career-transition-sheet .career-headset-small{clip-path:inset(24% 8% 63% 86%)}

.rug-flight-layer{position:fixed;inset:0;z-index:9999;pointer-events:auto;overflow:hidden}.rug-flight-veil{position:absolute;inset:0;background:#f2ddbd;opacity:0}.rug-flight-frame{position:absolute;transform-origin:0 0;will-change:transform;perspective:1400px}.rug-flight-object{position:absolute;inset:0;overflow:hidden}.rug-flight-patch{position:absolute;max-width:none;object-fit:fill}.rug-flight-mat,.rug-flight-opened,.rug-flight-leaf{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}.rug-flight-mat,.rug-flight-opened{opacity:0}.rug-flight-leaf{backface-visibility:hidden}.rug-flight-opened{z-index:3}.rug-flight-back{position:absolute;left:1.5%;top:1.5%;width:8.5%;height:auto;min-width:44px;min-height:32px;aspect-ratio:2/1;object-fit:contain;z-index:4;opacity:0}.rug-departing .project-tooltip{visibility:hidden!important}.rug-departing .project-links{pointer-events:none}
@media(prefers-reduced-motion:reduce){.rug-flight-layer{display:none}}

.rug-flight-mat{clip-path:inset(8.2% 4.6% 4.7% 4.6% round 1.2%)}


/* The approved island preview, with its original scene coordinates and materials. */
html,body.scrapbook-home{background:#b8543b}
.portfolio-shell{padding:0;min-height:100svh;overflow:hidden;background:radial-gradient(ellipse at 25% 75%,#e48b60 0%,#c46b49 44%,#ab4435 100%)}
.scrapbook-sheet{width:min(100vw,calc(100svh * 1628 / 966));aspect-ratio:1628/966}
.scrapbook-backing,.character-trigger{display:none}
.exhibit-scenery{position:absolute;inset:0;pointer-events:none}
.exhibit-scenery svg{width:100%;height:100%;overflow:visible}
.scrapbook-home .home-scene{left:10.8%;top:20.2%;width:78.4%;height:auto;aspect-ratio:1672/941;overflow:visible;background:#ead0b8}
.scrapbook-home .stage{mask:none;-webkit-mask:none;filter:none;border-radius:0;object-fit:fill}
.scrapbook-index{inset:auto;left:58.3%;top:9.5%;width:32.4%;height:8%;display:flex;align-items:center;gap:4.1%;padding:0;z-index:13}
.scrapbook-home .index-trigger{position:relative;inset:auto;width:22%;height:70%;transform:none;border-radius:18%;background:linear-gradient(160deg,#fff0cf,#f0cda0);box-shadow:inset 1px 2px 2px #fff7ddc9,inset -2px -3px 3px #b47b5055,3px 5px 5px #5a2d2f55;color:#493126;font:500 1.5cqw 'Zen Maru Gothic',sans-serif;transition:transform .18s,background .18s}
.scrapbook-home .index-trigger:hover{transform:translateY(-3px)}
.scrapbook-home .index-trigger[aria-expanded=true]{background:linear-gradient(140deg,#6694b8,#416a8f);color:#fff3df;box-shadow:inset 1px 2px 2px #bbd3e377,3px 5px 5px #5a2d2f55}
.scrapbook-home .index-trigger:focus-visible{outline:3px solid #fff2cd;outline-offset:5px}
.contact-note{left:16%;top:30%;width:30%}

@media(prefers-reduced-motion:reduce){.scrapbook-home .index-trigger{transition:none}}


.exhibition-background{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.scrapbook-sheet{width:min(100vw,calc(100svh * 1628 / 1086));aspect-ratio:1628/1086}
.scrapbook-home .home-scene{left:14.312%;top:19.6687%;width:71.622%;height:auto;aspect-ratio:1672/941;overflow:visible}
.scrapbook-home .index-trigger{background:transparent;box-shadow:none;font-size:1.5cqw;border-radius:18%}
.scrapbook-home .index-trigger:hover{background:#b76e2412;box-shadow:inset 0 0 0 2px #885c3e44}
.scrapbook-home .index-trigger[aria-expanded=true]{background:#457395;box-shadow:inset 1px 2px 2px #bbd3e377,2px 3px 3px #5a2d2f44}
.scrapbook-index{left:58.25%;top:9.5%;width:32.8%;height:6.1%;gap:4%;align-items:stretch}
.scrapbook-home .index-trigger{height:100%}



.scrapbook-sheet{width:min(100vw,calc(100svh * 1628 / 966));aspect-ratio:1628/966}
.scrapbook-home .home-scene{left:16%;top:15%;width:70%;height:auto;aspect-ratio:1672/941;background:none}
.source-boundary-base{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.scrapbook-home .stage{mask:url('./assets/stage-silhouette-mask-v1.fast.webp') center/100% 100% no-repeat;-webkit-mask:url('./assets/stage-silhouette-mask-v1.fast.webp') center/100% 100% no-repeat;clip-path:polygon(0% 0%,100% 0%,100% 67%,91% 67%,86% 80%,84% 100%,13% 100%,13% 72%,0% 67%);filter:none}
.scrapbook-index{left:66.2%;top:13.7%;width:29%;height:6.3%;gap:4%}
.scrapbook-home .index-trigger{font-size:1.5cqw;color:transparent}
.scrapbook-home .index-trigger[aria-expanded=true]{background:transparent;box-shadow:none}


.source-boundary-base{display:none}.scrapbook-home .index-trigger:hover{background:#ffffff14}.scrapbook-home .index-trigger:focus-visible{outline:3px solid #ffdd90;outline-offset:3px}

html,body.scrapbook-home{background:#f5ecda;--scene-background:#f5ecda}
.portfolio-shell{background:#f5ecda}

/* The education hit area overlaps the archive close button spatially;
   the open archive must own its whole visible surface. */
.home-scene[data-mode="work"] .work-folder{z-index:20}
.scrapbook-home .index-trigger,.scrapbook-home .index-trigger[aria-expanded=true]{color:transparent!important}

.scrapbook-home .stage{mask:url(./assets/island-art-01.fast.webp) center/100% 100% no-repeat;mask-composite:add;clip-path:none}
.lenormand-prop{mask:url(./assets/island-art-02.sites.webp) center/100% 100% no-repeat}
.service-prop{inset:0;left:0;top:0;width:100%;height:100%;mask:url(./assets/island-art-03.sites.webp) center/100% 100% no-repeat;filter:drop-shadow(2px 4px 3px #79513a38)}

.scrapbook-home .scrapbook-index{left:65%;top:6.2%;width:30.5%;height:5.9%;gap:1.2cqw;align-items:stretch;z-index:32}
.scrapbook-home .scrapbook-index .index-trigger{display:flex;align-items:center;justify-content:center;gap:.5cqw;flex:1;width:auto;height:100%;min-width:0;padding:.15cqw .6cqw;border:0;border-radius:.95cqw;background:linear-gradient(155deg,#fff2d9,#edcba1);color:#503728!important;font:500 1.42cqw/1.2 'Zen Maru Gothic','Microsoft YaHei',sans-serif;box-shadow:inset 1px 2px 2px #fff8e8,inset -1px -3px 2px #b88c5b55,2px 5px 6px #70452a38;transform:none;transition:background 160ms,color 160ms,transform 160ms,box-shadow 160ms}
@media(hover:hover){.scrapbook-home .scrapbook-index .index-trigger:hover{color:#fff5df!important;background:linear-gradient(145deg,#6c98b6,#416e93);box-shadow:inset 1px 2px 2px #a9c6d9,inset -1px -3px 2px #294e6a66,2px 5px 6px #70452a38;transform:translateY(-2px)}}
.scrapbook-home .scrapbook-index .index-trigger:focus-visible{outline:3px solid #315e7a;outline-offset:4px}
.scrapbook-home .scrapbook-index .index-trigger--projects::after{content:"";width:.35cqw;height:.35cqw;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-.1cqw) rotate(45deg);transition:transform 180ms}
.scrapbook-home .scrapbook-index .index-trigger--projects[aria-expanded=true]::after{transform:translateY(.1cqw) rotate(225deg)}
.project-dropdown{position:absolute;right:0;top:calc(100% + .85cqw);width:17.5cqw;padding:.5cqw;background:#fff3dc;border-radius:.45cqw;box-shadow:2px 7px 13px #694c2c2b;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);transition:opacity 180ms ease,transform 240ms var(--ease-settle),visibility 0s 240ms}
.project-dropdown.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}
.project-choice{display:block;padding:.85cqw .9cqw;color:#503728;font:500 1.12cqw/1.45 'Zen Maru Gothic','Microsoft YaHei',sans-serif;text-decoration:none;border-radius:.25cqw;outline-offset:2px;transition:background 140ms,color 140ms}
.project-choice+.project-choice{border-top:1px solid #d9bd924d}
.project-choice:hover,.project-choice:focus-visible{background:#537d9d;color:#fff5e1;outline:none}
.scrapbook-home .contact-note{left:18%;top:23%;width:32%;min-height:0;padding:3.3% 3.4% 3.6%;z-index:40;background:none;color:#49382d;opacity:0;visibility:hidden;pointer-events:none;transform-origin:50% 50%;transform:translate3d(var(--paper-launch-x,600px),var(--paper-launch-y,-180px),0) rotate(13deg) scale(.08);transition:transform 300ms var(--ease-drawer),opacity 180ms ease,visibility 0s 300ms}
.scrapbook-home .contact-note::before{background:transparent url('./assets/resume-paper-material-v2.fast.webp') center/100% 100% no-repeat;background-blend-mode:normal;mask:none;filter:drop-shadow(2px 8px 7px #704c2d35)}
.scrapbook-home .scrapbook-sheet:has(.home-scene[data-mode=contact]) .contact-note{opacity:1;visibility:visible;pointer-events:auto;transform:translate3d(0,0,0) rotate(-2deg) scale(1);transition-duration:460ms,180ms,0s;transition-delay:0s}
.scrapbook-home .contact-note h1{margin:0 0 1.35cqw;font:400 2.15cqw/1.25 KaiTi,STKaiti,serif;letter-spacing:.03em}
.scrapbook-home .contact-note address{gap:1.1cqw;font:400 1.3cqw/1.45 Georgia,KaiTi,serif}
.scrapbook-home .contact-note address a{display:flex;flex-direction:column;gap:.2cqw;width:max-content;max-width:100%;color:#49382d;text-decoration:none}
.contact-kind{font:400 .92cqw/1.5 KaiTi,STKaiti,serif;color:#82654b}
.contact-value{overflow-wrap:anywhere;text-decoration:underline;text-decoration-color:#a3825d80;text-underline-offset:4px}
.scrapbook-home .contact-note a:hover{color:#315f7e}
.scrapbook-home .contact-close{top:13%;right:10%;padding:5px 7px;background:transparent;border:0;color:#72513b;font:400 1cqw/1.3 KaiTi,STKaiti,serif}
.scrapbook-home .contact-note :focus-visible{outline:2px solid #416c8a;outline-offset:4px}

@media(prefers-reduced-motion:reduce){.project-dropdown,.project-choice,.scrapbook-home .contact-note,.scrapbook-home .scrapbook-index .index-trigger{transition:none!important}}


.scrapbook-home .contact-note{width:27%;aspect-ratio:1.08/1;padding:3.1% 3.15% 3.5%}
.scrapbook-home .contact-note::before{background-color:#fff6b0;background-blend-mode:multiply;mask:url('./assets/resume-paper-material-v2.fast.webp') center/100% 100% no-repeat;filter:drop-shadow(2px 9px 7px #71532b38)}
.scrapbook-home .contact-note::after{content:"";position:absolute;left:6%;right:6%;top:4%;height:5%;background:linear-gradient(180deg,#bd9b3b16,transparent);pointer-events:none}
.scrapbook-home .contact-note h1{color:#57422b}
.scrapbook-home .contact-note address a{color:#57422b}
.contact-kind{color:#8a693b}



.scrapbook-sheet{--clay-cap-0:url('./assets/island-art-04.fast.webp');--clay-cap-1:url('./assets/island-art-05.fast.webp');}

 .scrapbook-home .scrapbook-index{top:5.6%;height:7.7%;gap:.65cqw}
 .scrapbook-home .scrapbook-index .index-trigger{position:relative;isolation:isolate;padding:0 .6cqw .55cqw;background:transparent!important;box-shadow:none!important;border-radius:1.2cqw;font:400 1.6cqw/1 'ZCOOL KuaiLe',sans-serif;color:#513522!important;text-shadow:0 1px 0 #fff6dc;transition:transform 160ms ease,color 160ms ease}
 .scrapbook-home .scrapbook-index .index-trigger::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--clay-cap-0) center/100% 100% no-repeat;pointer-events:none}
 .scrapbook-home .scrapbook-index .index-trigger--projects::after{width:.3cqw;height:.3cqw;border-width:2px}
 .scrapbook-home .scrapbook-index .index-trigger:active{transform:translateY(3px) scale(.97)}
 .scrapbook-home .scrapbook-index .index-trigger:focus-visible{outline:3px solid #315e7a;outline-offset:3px}
 .project-dropdown{top:calc(100% + .6cqw);right:0;width:max-content;max-width:23cqw;padding:0;background:none;box-shadow:none;border-radius:0;transform-origin:var(--menu-origin-x,65%) 0;transform:translateY(-7px) scale(.96);transition:opacity 180ms ease-out,transform 220ms var(--ease-settle),visibility 0s 220ms}
 .project-dropdown.is-open{transform:none}
 .project-dropdown::before{content:'';position:absolute;top:-.85cqw;left:var(--menu-origin-x,65%);width:.27cqw;height:1.5cqw;border-radius:10px;background:#456e8b;box-shadow:inset 1px 0 #a2bfd2;transform:translateX(-50%)}
 .project-choice{position:relative;display:flex;align-items:center;justify-content:center;width:max-content;max-width:100%;margin-left:auto;white-space:nowrap;min-height:3.65cqw;padding:0 .5cqw .1cqw;border:solid transparent!important;border-width:10px 16px 15px!important;border-image:var(--clay-cap-0) 85 135 115 135 fill / 10px 16px 15px / 2px stretch!important;border-radius:12px;background:none;color:#513522;font:400 1.18cqw/1.35 'ZCOOL KuaiLe',sans-serif;text-shadow:0 1px #fff4db;transform:translateY(-5px);opacity:0;transition:transform 220ms var(--ease-settle),opacity 150ms ease-out,filter 160ms ease}
 .project-choice+.project-choice{margin-top:.55cqw;transform:translateY(-5px)}
 .project-dropdown.is-open .project-choice{opacity:1;transform:none}
 .project-dropdown.is-open .project-choice+.project-choice{transform:none;transition-delay:35ms}
 .project-choice:focus-visible{outline:3px solid #315e7a;outline-offset:4px;color:#513522;background:none}
 .project-choice:active{transform:translateY(2px) scale(.98)!important}
 [data-ui-input=keyboard] .project-dropdown,[data-ui-input=keyboard] .project-choice{transition:none!important}
 .scrapbook-home .character-trigger{display:block;left:1.8%;top:auto;bottom:6.5%;width:18%;height:auto;aspect-ratio:2/3;z-index:22;border-radius:35%;background:none;overflow:visible}
 .mascot-rig{position:absolute;inset:0;pointer-events:none;transform-origin:50% 94%}
 .mascot-body{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
 .character-trigger::before{content:'';position:absolute;left:29%;right:22%;bottom:2.6%;height:3.3%;border-radius:50%;background:#634c3533;filter:blur(4px);pointer-events:none}
 .scrapbook-home .character-hint{left:32%;bottom:103%;padding:.55cqw 1.1cqw;font-size:1.2cqw;white-space:nowrap}
 @media(hover:hover) and (pointer:fine){
 .scrapbook-home .scrapbook-index .index-trigger:hover{color:#fff4dc!important;transform:translateY(-2px);text-shadow:0 1px 2px #284b6b}
 .scrapbook-home .scrapbook-index .index-trigger:hover::before{background-image:var(--clay-cap-1)}
 .scrapbook-home .scrapbook-index .index-trigger:active{transform:translateY(2px) scale(.97)}
 .project-dropdown.is-open .project-choice:hover{background:none;color:#513522;text-shadow:0 1px #fff4db;filter:brightness(1.045);transform:translateY(-2px);transition-delay:0s}
 }
 
 @media(prefers-reduced-motion:reduce){.project-dropdown,.project-choice,.scrapbook-home .scrapbook-index .index-trigger{transition:none!important}}
 


 .thought-guide{position:absolute;left:4%;top:29.5%;width:12.8%;aspect-ratio:1.5;z-index:24;isolation:isolate;opacity:1;visibility:visible;transition:opacity 180ms ease-out,visibility 0s}
 .thought-guide::before{opacity:.48;content:'';position:absolute;inset:0;background:url('./assets/island-thought-cloud.sites.webp') center/100% 100% no-repeat;z-index:-1;pointer-events:none}
 .thought-tail{opacity:.5;position:absolute;left:46%;top:96%;width:.85cqw;aspect-ratio:1;background:radial-gradient(circle at 30% 25%,#fff3d4,#f8dfb0 58%,#cf9e61);border-radius:50%;box-shadow:inset -1px -2px 2px #c49b6655,1px 3px 4px #714e2b24;pointer-events:none}
 .thought-tail::after{content:"";position:absolute;left:45%;top:155%;width:.45cqw;aspect-ratio:1;background:radial-gradient(circle at 30% 25%,#fff3d4,#f8dfb0 58%,#cf9e61);border-radius:50%;box-shadow:1px 2px 3px #714e2b20}
 .thought-card{display:grid;place-items:center;width:100%;height:100%;padding:.55cqw .9cqw 1.1cqw;border:0;border-radius:40%;background:none;cursor:pointer}
 .thought-frames{position:relative;display:block;width:8.8cqw;height:6.2cqw;flex-shrink:0}
 .thought-object{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:translateY(3px);transition:opacity 180ms ease-out,transform 220ms var(--ease-settle);filter:drop-shadow(1px 3px 2px #79573224)}
 .thought-object.is-current{opacity:1;transform:none}
 .thought-guide :focus-visible{outline:2px solid #416c88;outline-offset:2px}
 .thought-card:active{transform:scale(.97)}
 .scrapbook-home .guide-target{box-shadow:0 0 0 2px #d9ad5780,1px 3px 8px #76532e26!important}
 .thought-guide.is-hidden{opacity:0;visibility:hidden;pointer-events:none;transition:opacity 180ms ease-out,visibility 0s 180ms}
 .scrapbook-home .character-hint{font-size:1.03cqw;bottom:99%}
 @media(hover:hover) and (pointer:fine){.thought-card:hover .thought-frames{transform:translateY(-2px)}}
 
 @media(prefers-reduced-motion:reduce){.thought-guide,.thought-object{transition:none!important}}
 
 

/* Keep the same archive and foldout, enlarged to usable touch targets. */
/* Corner rail: fixed to the outer left red rounded wall, parallel to the front floor edge. */
.capability-flag{position:absolute;left:1%;top:65%;width:17%;aspect-ratio:1.6;min-height:44px;transform:none;transform-origin:8% 18%;z-index:6;display:block;color:#f2d8ad;text-decoration:none;filter:drop-shadow(.5px 1px .6px #563b2d59);transition:filter 160ms var(--scene-ease)}
.capability-flag>img{display:block;width:100%;height:auto;pointer-events:none;filter:saturate(.77) brightness(.94) contrast(1.02)}
.capability-flag::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(132deg,#ffdfa014 8%,transparent 44%,#451e1633 100%);mask:url('./assets/capability-path/home-corner-flag-thick.fast.webp') center/100% 100% no-repeat;-webkit-mask:url('./assets/capability-path/home-corner-flag-thick.fast.webp') center/100% 100% no-repeat}
.capability-flag-label{position:absolute;left:20%;right:8%;top:46%;height:32%;z-index:2;display:flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap;transform:rotate(10deg);font:600 clamp(14px,1.45vw,21px)/1 'YouYuan','幼圆','Microsoft YaHei',sans-serif;letter-spacing:.025em;color:#f5e1bf;text-shadow:0 .8px .4px #693629cc;pointer-events:none}
.capability-flag-label>span{display:flex;align-items:center;margin-left:1px;color:inherit;opacity:.65}.capability-flag-label svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.capability-flag:focus-visible{outline:2px solid #fff0d1;outline-offset:3px;border-radius:9px}
@media(max-width:600px){.capability-flag{width:92px}.capability-flag-label{font-size:13px;gap:2px;letter-spacing:.02em}.capability-flag-label svg{width:9px;height:9px}}
@media(max-width:600px){.scrapbook-home .home-scene[data-mode=work] .work-folder{left:calc(1% + 104px)}}
@media(hover:hover) and (pointer:fine){.capability-flag:hover{filter:brightness(1.035) drop-shadow(.6px 1.4px .8px #563b2d66)}}

@media(prefers-reduced-motion:reduce){.capability-flag{transition:none}}
.scrapbook-home .scrapbook-index .index-trigger[aria-expanded=true]{color:#294859!important}


/* Unified desktop composition from the approved borderless-stage preview. */
.bank-rear-matched{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;object-fit:fill;filter:blur(clamp(.8px,.25vw,4px));mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201628%20966%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22soft%22%3E%3CfeGaussianBlur%20stdDeviation%3D%223%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22white%22%20filter%3D%22url(%23soft)%22%20d%3D%22M980%200H1628V275H1420L1300%20248L1180%20228L1100%20220L1000%20201H980Z%22%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201628%20966%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22soft%22%3E%3CfeGaussianBlur%20stdDeviation%3D%223%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22white%22%20filter%3D%22url(%23soft)%22%20d%3D%22M980%200H1628V275H1420L1300%20248L1180%20228L1100%20220L1000%20201H980Z%22%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat}

/* Keep the chosen composition; depth changes only light, contrast and focus. */
.exhibition-background{filter:brightness(.96) saturate(.88) contrast(.94)}
.bank-rear-matched{filter:blur(clamp(.8px,.22vw,3.6px)) brightness(.96) saturate(.88) contrast(.94)}
.scrapbook-home .stage{filter:brightness(1.015) contrast(1.035)}
.thought-guide::before{opacity:.86;filter:drop-shadow(1px 4px 3px #714e2b29)}
.thought-tail,.thought-tail::after{background:radial-gradient(circle at 30% 25%,#fff8e8,#f6e8ca 60%,#d6bc8e);box-shadow:inset -1px -2px 2px #c49b6640,1px 3px 3px #714e2b24}
.thought-tail{opacity:.8}

/* Props unfold in two beats; their labels stay still once available. */
.scrapbook-home .project-prop{transform:translateY(5px) scale(.985);transition:opacity 160ms ease,transform 220ms var(--ease-drawer),visibility 0s 220ms,filter 160ms ease}
.scrapbook-home .service-prop{transform-origin:24% 25%}
.scrapbook-home .lenormand-prop{transform-origin:42% 80%}
.scrapbook-home .home-scene[data-mode=projects] .project-prop{transform:none;transition-duration:180ms,360ms,0s,160ms;transition-delay:0s}
.scrapbook-home .home-scene[data-mode=projects] .lenormand-prop{transition-delay:55ms,55ms,0s,0s}
@media(prefers-reduced-motion:reduce){.scrapbook-home .project-prop{transition:none!important;transform:none!important}}


@font-face{font-family:'Scene Clay';src:url('./assets/fonts/ZCOOLKuaiLe-Regular.ttf') format('truetype');font-display:swap}
::view-transition{pointer-events:none}
::view-transition-group(root){animation:none}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
html[data-scene-arrival=portal]::view-transition-new(root){animation:scene-portal-open 340ms cubic-bezier(.32,.72,0,1) both}
html[data-scene-arrival=settle]::view-transition-new(root){animation:scene-surface-settle 140ms ease both}
html[data-scene-preparing]::view-transition-group(*),html[data-scene-preparing]::view-transition-old(*),html[data-scene-preparing]::view-transition-new(*){animation-play-state:paused}
html[data-scene-preparing]::view-transition-new(*){visibility:hidden}
/* Both snapshots move on the same clock, keeping their edges joined throughout. */
html[data-scene-arrival=slide-left]::view-transition-old(root){animation:scene-slide-out-left 420ms cubic-bezier(.32,.72,0,1) both}
html[data-scene-arrival=slide-left]::view-transition-new(root){animation:scene-slide-in-left 420ms cubic-bezier(.32,.72,0,1) both}
html[data-scene-arrival=slide-right]::view-transition-old(root){animation:scene-slide-out-right 420ms cubic-bezier(.32,.72,0,1) both}
html[data-scene-arrival=slide-right]::view-transition-new(root){animation:scene-slide-in-right 420ms cubic-bezier(.32,.72,0,1) both}
::view-transition-group(scene-navigation){z-index:2;animation-duration:340ms;animation-timing-function:cubic-bezier(.32,.72,0,1)}
::view-transition-old(scene-navigation){animation:scene-nav-out 120ms ease both;mix-blend-mode:normal}
::view-transition-new(scene-navigation){animation:scene-surface-settle 120ms ease both;mix-blend-mode:normal}
html[data-scene-leaving] :is(.project-dropdown,.project-tooltip,.scene-menu){visibility:hidden!important}
@keyframes scene-portal-open{from{clip-path:inset(var(--scene-portal-top,30%) var(--scene-portal-right,30%) var(--scene-portal-bottom,30%) var(--scene-portal-left,30%) round 18px)}to{clip-path:inset(0 round 0)}}
@keyframes scene-surface-settle{from{opacity:0}to{opacity:1}}
@keyframes scene-nav-out{to{opacity:0}}
@keyframes scene-slide-out-left{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@keyframes scene-slide-in-left{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes scene-slide-out-right{from{transform:translateX(0)}to{transform:translateX(100%)}}
@keyframes scene-slide-in-right{from{transform:translateX(-100%)}to{transform:translateX(0)}}
:root{--scene-body:'Microsoft YaHei','PingFang SC','Noto Sans CJK SC',sans-serif;--scene-ease:cubic-bezier(.23,1,.32,1);--scene-cap:url('./assets/island-art-04.fast.webp');--scene-cap-active:url('./assets/island-art-05.fast.webp')}
.scene-nav{position:absolute;right:4.5%;top:2%;z-index:60;display:flex;gap:8px;width:clamp(290px,32%,440px);height:clamp(48px,4.6vw,64px);isolation:isolate}
.scene-nav-button{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:3px;flex:1;min-width:0;min-height:44px;padding:0 6px 7px;border:0;border-radius:12px;background:none;color:#513522;text-decoration:none;font:400 clamp(17px,1.6vw,24px)/1 'Scene Clay','Microsoft YaHei',sans-serif;text-shadow:0 1px #fff4db;cursor:pointer;transition:transform 160ms var(--scene-ease),color 160ms ease}
.scene-nav-button::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--scene-cap) center/100% 100% no-repeat;pointer-events:none}
.scene-nav-button svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform 180ms var(--scene-ease)}
.scene-nav-button[aria-expanded=true] svg{transform:rotate(180deg)}
.scene-nav-button:is([aria-current],[aria-expanded=true]){color:#fff3dc;text-shadow:0 1px #294859}
.scene-nav-button:is([aria-current],[aria-expanded=true])::before{background-image:var(--scene-cap-active)}
.scene-nav-button:active{transform:translateY(2px) scale(.98)}
.scene-nav-button:focus-visible,.scene-menu a:focus-visible{outline:2px solid #315e7a;outline-offset:3px}
.scene-menu{position:fixed;inset:auto;margin:0;box-sizing:border-box;width:clamp(268px,24vw,330px);max-width:calc(100vw - 24px);padding:11px 12px;border:1px solid #dec8a3;border-radius:12px;background:#fff1d7;box-shadow:2px 9px 20px #50362338;color:#513522;opacity:0;transform:translateY(-6px) scale(.97);transform-origin:var(--scene-menu-origin,80%) 0;transition:opacity 150ms ease,transform 220ms var(--scene-ease),display 220ms allow-discrete,overlay 220ms allow-discrete}
.scene-menu:popover-open{opacity:1;transform:none}
@starting-style{.scene-menu:popover-open{opacity:0;transform:translateY(-6px) scale(.97)}}
.scene-menu a{display:flex;align-items:center;min-height:46px;padding:9px 12px;border-radius:7px;color:#43382e;text-decoration:none;font:400 15px/1.6 var(--scene-body);transition:background 150ms ease,color 150ms ease}
.scene-menu a:first-child{margin-bottom:5px;border-bottom:1px solid #d5b990;border-radius:7px 7px 0 0;color:#715238}
.scene-menu a[aria-current=page]{color:#294859;background:#e7ddc6;text-decoration:underline;text-underline-offset:4px}
.scene-menu::backdrop{background:transparent}
.scene-menu ::selection{background:#d5bd91;color:#294859}
#bank-scene .bubble{animation:none}
.scrapbook-home .scrapbook-index .index-trigger[aria-expanded=true]{color:#fff3dc!important;text-shadow:0 1px #294859}
.scrapbook-home .scrapbook-index .index-trigger[aria-expanded=true]::before{background-image:var(--clay-cap-1)}
.atelier>.scene-nav{right:7.5%;top:3.4%;height:56px}
.dossier-page>.scene-nav{top:14px;right:22px;width:340px;height:52px}
.project-page>.back{left:5%;right:auto;top:25px}
.experience>.scene-nav{top:2%;right:3%;width:32%;height:clamp(44px,4vw,58px)}
/* Independent scale preserves the original rotation and placement of each prop. */
:where(.folder-close,.resume-close,.resume-zoom,.resume-open,.resume-download,.contact-close,.education-close,.show-overview,.chapter,.case-slip,.flow-refresh,.tool,.close-bubble,dialog .close,.return-link,.return-tab,.dossier-return){transition:scale 160ms var(--scene-ease),filter 160ms ease}
:where(.folder-close,.resume-close,.resume-zoom,.resume-open,.resume-download,.contact-close,.education-close,.show-overview,.chapter,.case-slip,.flow-refresh,.tool,.close-bubble,dialog .close,.return-link,.return-tab,.dossier-return):active{scale:.97;transition-duration:100ms}
[data-ui-input=keyboard] :is(.scene-menu,dialog,dialog::backdrop){transition:none}
@media(min-width:901px) and (max-height:790px){
 #overview .overview-poster{flex:0 0 auto;min-height:560px}
}
dialog{opacity:0;transform:translateY(6px) scale(.985);transition:opacity 160ms ease,transform 220ms var(--scene-ease),display 220ms allow-discrete,overlay 220ms allow-discrete}
dialog[open]{opacity:1;transform:none}
dialog::backdrop{opacity:0;transition:opacity 180ms ease,display 180ms allow-discrete,overlay 180ms allow-discrete}
dialog[open]::backdrop{opacity:1}
@starting-style{dialog[open]{opacity:0;transform:translateY(6px) scale(.985)}dialog[open]::backdrop{opacity:0}}
/* Keep the return and section controls below the common navigation on narrow pages. */
@media(max-width:700px){
 .scene-nav{left:12px;right:12px;top:-68px;width:auto;height:52px;gap:6px}
 .scene-nav-button{font-size:19px;padding-bottom:7px}
 .scene-menu{width:min(300px,calc(100vw - 24px))}
 .scene-menu a{min-height:48px;font-size:16px}
 .atelier>.scene-nav{left:9%;right:9%;top:24px;width:auto;height:52px}
 .dossier-page>.scene-nav{left:10px;right:10px;top:10px;width:auto;height:48px}
 .dossier-page>.dossier-return{display:inline-flex;align-items:center;min-height:44px;margin-top:42px}
 .dossier-page>.dossier-portrait{top:140px}
 .dossier-page>.dossier-content{margin-top:260px}
 .project-page{min-width:0;left:0;translate:none}
 .project-page>.scene-nav{top:18px}
 .project-page>.back{top:84px;left:24px}
 .project-page>.project-heading{top:145px;left:24px;right:24px}
 .customer-work .work-station{min-width:44px;min-height:44px}
 main.stage .recording{min-height:44px;transform:translateY(-6px)}
 main.stage .return-tab{min-height:44px}
 body:has(#bank-scene){display:block;overflow-x:hidden;overflow-y:auto;padding-top:max(96px,calc((100svh - 56.25vw)/2));padding-bottom:24px}
 #bank-scene .bubble{position:absolute!important;inset:auto!important;left:12px!important;top:calc(100% + 16px)!important;width:calc(100% - 24px)!important;margin:0;padding:22px 24px;box-sizing:border-box}
 #bank-scene .bubble h2{font-size:20px;line-height:1.4;max-width:calc(100% - 34px);margin-bottom:12px;padding-bottom:10px}
 #bank-scene .bubble p{font-size:16px;line-height:1.8}
 #bank-scene .bubble h3{font-size:16px;line-height:1.5}
 #bank-scene .note-detail+.note-detail,#bank-scene .note-intro+.note-detail{margin-top:12px;padding-top:12px}
 #bank-scene .close-bubble{right:8px;top:8px;width:44px;height:44px;font-size:24px}
}
@media(hover:hover) and (pointer:fine){
 .scene-nav-button:hover{transform:translateY(-2px);color:#fff3dc;text-shadow:0 1px #294859}
 .scene-nav-button:hover::before{background-image:var(--scene-cap-active)}
 .scene-menu a:hover{background:#e4d7bb;color:#294859}
}
@media(prefers-reduced-motion:reduce){
 :where(.folder-close,.resume-close,.resume-zoom,.resume-open,.resume-download,.contact-close,.education-close,.show-overview,.chapter,.case-slip,.flow-refresh,.tool,.close-bubble,dialog .close,.return-link,.return-tab,.dossier-return){transition:none!important;scale:1!important}
 .scene-nav-button,.scene-nav-button svg,.scene-menu,.scene-menu a,dialog,dialog::backdrop{transition:none}
 dialog,dialog[open]{transform:none}
 .scene-nav-button:active,.scene-nav-button:hover,.scene-menu{transform:none}
}

/* Text is sized for reading; the material artwork keeps its own proportions. */
:root{--career-body:'Microsoft YaHei','PingFang SC','Noto Sans CJK SC',sans-serif;--career-ink:#3e352c;--career-blue:#243f53;--career-muted:#595247}
/* Three complete files, sized from their original atlas crops. */
.scrapbook-home .work-folder{left:18%;top:0;width:min(64%,720px);height:auto;padding:0;container-type:inline-size}
.scrapbook-home .folder-layout{position:relative;padding:7.5cqw 5cqw 4cqw}
.scrapbook-home .folder-board{position:absolute;display:block;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;filter:drop-shadow(0 8px 6px #53271644)}
.scrapbook-home .folder-title{position:absolute;left:20%;top:4cqw;width:60%;margin:0;padding:0;background:none;color:var(--career-ink);text-align:center;font:400 min(3.6cqw,25px)/1.2 'Scene Clay',var(--career-body);letter-spacing:.08em}
.scrapbook-home .folder-close{top:3.7cqw;right:3cqw;width:5.6cqw;height:5.6cqw;border-width:1px;font:400 4cqw/1 var(--career-body)}
.scrapbook-home .work-files{position:relative;inset:auto;display:grid;gap:1.5cqw}
.scrapbook-home .work-file{position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:901/284;isolation:isolate;transform-origin:50% 50%;border-radius:18px;transition:transform 260ms cubic-bezier(.23,1,.32,1),filter 180ms ease;filter:drop-shadow(3px 7px 5px #5b382c38)}
.scrapbook-home .work-file--bank{aspect-ratio:833/302}
.scrapbook-home .work-file--intern{aspect-ratio:856/302}
.scrapbook-home button.work-file--intern{padding:0;border:0;background:none;text-align:left;appearance:none;cursor:default}
.scrapbook-home .work-file .file-art img{height:auto;aspect-ratio:2/1}
.scrapbook-home .work-file .file-copy{left:55%;right:11%;top:30%;bottom:14%;display:flex;justify-content:center;gap:.35cqw;font-family:var(--career-body);color:var(--career-ink)}
.scrapbook-home .work-file .file-copy strong{font:600 min(3.6cqw,25px)/1.3 var(--career-body);color:var(--career-blue);letter-spacing:0;margin:0;white-space:nowrap}
.scrapbook-home .work-file .file-copy .file-company{font:500 min(2.4cqw,16px)/1.4 var(--career-body);color:#68462e;white-space:nowrap}
.scrapbook-home .work-file .file-copy .file-team{font:400 min(2.3cqw,15px)/1.4 var(--career-body);color:#4b5149;white-space:nowrap}
.scrapbook-home .work-file .file-copy .file-time{font:400 min(2.3cqw,15px)/1.4 var(--career-body);color:#5b4938;margin:.2cqw 0 0;font-variant-numeric:tabular-nums;white-space:nowrap}
.scrapbook-home .file-pull{right:2.7%;top:52%;width:5%;height:20%;display:grid;place-items:center;writing-mode:horizontal-tb;color:#734b25}
.scrapbook-home .file-pull svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.scrapbook-home .work-file:focus-visible{outline:3px solid #315e7a;outline-offset:5px;transform:translateX(6px)}
@media(hover:hover) and (pointer:fine){.scrapbook-home .work-file:hover{transform:translateX(8px);filter:drop-shadow(4px 9px 7px #5b382c4d)}}
.scrapbook-home .work-file--intern:active{transform:translateX(4px) scale(.99)}
@media(prefers-reduced-motion:reduce){.scrapbook-home .work-file{transition:none}.scrapbook-home .work-file:hover,.scrapbook-home .work-file:focus-visible,.scrapbook-home .work-file--intern:active{transform:none}}
.customer-work{--type-body:var(--career-body);--ink:var(--career-ink);--muted:var(--career-muted);--blue:var(--career-blue)}
.customer-work .reader-content{font-family:var(--career-body);color:var(--career-ink)}
.customer-work .duty-reader{top:68%;width:25.2%;height:18.2%}
.customer-work .overview-lead{font:600 clamp(14px,.98cqw,16px)/1.65 var(--career-body);color:var(--career-blue)}
.customer-work .overview-follow{font:400 clamp(13px,.9cqw,14px)/1.65 var(--career-body);color:var(--career-ink)}
.customer-work .duty-description{font:400 clamp(14px,.98cqw,16px)/1.7 var(--career-body);color:var(--career-ink)}
.bank-identity-slot{display:none}
.scene-heading .identity-company,.scene-heading .identity-track,.scene-heading .tenure-label,.scene-heading .identity-period{font-family:var(--career-body);color:var(--career-ink)}
.scene-heading .identity-company span,.scene-heading .identity-period .date-connector{color:var(--career-ink)}
.work-detail .dossier-content{font-family:var(--career-body);color:var(--career-ink)}
.work-detail .dossier-content h1,.work-detail .dossier-content h2{font-family:var(--career-body);font-weight:600;color:var(--career-blue)}
.work-detail .dossier-content p,.work-detail .dossier-content dl{font-size:16px;line-height:1.85}


html[data-studio-motion] .capability-flag>img{transform-origin:24% 25%}
.studio-profile{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 500ms linear}
.studio-profile--back{z-index:0}
.studio-profile--front{z-index:1;clip-path:polygon(49% 24%,69% 24%,69% 37%,49% 33%);mask-image:linear-gradient(transparent 24%,#000 28%,#000 31%,transparent 37%)}
.studio-profile.is-visible{opacity:1}
.studio-profile-art{position:absolute;left:3%;top:4%;width:85%;height:40%;opacity:.56;background:linear-gradient(110deg,#a57541 4%,#875934 36%,#563b2c 82%);mask:url('./assets/my-profile-brush-v1.fast.webp') center/contain no-repeat}
.studio-profile--front .studio-profile-art{opacity:.23}
.studio-profile-name{position:absolute;left:23.5%;top:33%;color:#684831;font:400 clamp(23px,2.6cqw,40px)/1.2 'Segoe Script','Brush Script MT',cursive;font-style:italic;letter-spacing:.02em;opacity:.8;transform:rotate(-7deg)}
html[data-studio-motion] .project-prop{transition:opacity 160ms ease-out,transform 260ms var(--ease-settle),visibility 0s 160ms;transform:translate3d(0,0,0)}
html[data-studio-motion] .service-prop{transform-origin:29% 26%}
html[data-studio-motion] .lenormand-prop{transform-origin:42% 80%}
html[data-studio-motion] .project-tooltip{transition:opacity 160ms ease,transform 190ms var(--ease-settle),visibility 0s 160ms}
.studio-object-caption{position:absolute;z-index:5;left:35%;top:17%;color:#6d503b;font:400 clamp(12px,1.35cqw,19px)/1.5 'ZCOOL KuaiLe',sans-serif;pointer-events:none;opacity:0;transform:translateY(4px) rotate(-4deg);transition:opacity 160ms ease,transform 200ms var(--ease-settle)}
.studio-object-caption::after{content:'';display:block;width:2.3cqw;height:1.5cqw;margin:.15cqw 0 0 1cqw;border-left:1.5px solid #976f48;border-bottom:1.5px solid #976f48;border-bottom-left-radius:100%;transform:rotate(-10deg)}
.home-scene[data-mode=idle][data-computer=on] .studio-object-caption{opacity:1;transform:rotate(-4deg)}
@media(hover:hover) and (pointer:fine){
  html[data-studio-motion]:is([data-studio-design=tactile],[data-studio-design=materials]) .thought-card:hover .thought-frames{transform:rotate(-5deg) scale(1.06)}
  html[data-studio-motion]:is([data-studio-design=tactile],[data-studio-design=materials]) .thought-frames{transition:transform 240ms var(--ease-settle)}
  html[data-studio-motion]:is([data-studio-design=tactile],[data-studio-design=materials]) .home-scene[data-mode=idle]:has(.resume-trigger:hover) .scene-prop-intent--paper{filter:drop-shadow(4px 9px 3px #56351f66)}
  html[data-studio-motion] .home-scene[data-mode=projects]:has(.project-link--service:hover) .service-prop{transform:translate3d(0,-3px,0)}
  html[data-studio-motion] .home-scene[data-mode=projects]:has(.project-link--lenormand:hover) .lenormand-prop{transform:translate3d(0,-4px,0) rotate(-.25deg)}
}
.studio-world-materials,.studio-card-foil{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity 240ms var(--ease-settle);mix-blend-mode:screen}
.studio-world-materials{z-index:2}
.studio-global-light-field,.studio-global-shade-field{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden;opacity:0;transition:opacity 240ms var(--ease-settle)}
.studio-global-light-field{mix-blend-mode:soft-light}
.studio-global-shade-field{mix-blend-mode:multiply}
.studio-global-light-field>span,.studio-global-shade-field>span{position:absolute;left:0;top:0;border-radius:50%;pointer-events:none}
.studio-global-light-field>span{width:clamp(500px,85vw,1100px);aspect-ratio:1.1;background:radial-gradient(ellipse,rgba(255,244,215,.42) 0%,rgba(255,233,191,.19) 31%,rgba(255,233,191,0) 71%)}
.studio-global-shade-field>span{width:clamp(600px,95vw,1300px);aspect-ratio:1.3;background:radial-gradient(ellipse,rgba(80,58,41,.065) 0%,rgba(80,58,41,.025) 37%,rgba(80,58,41,0) 72%)}
.studio-global-light-field.is-active,.studio-global-shade-field.is-active{opacity:1}
.studio-card-foil{z-index:4;transform-origin:42% 80%}
.studio-world-materials.is-active,.studio-card-foil.is-active{opacity:1}
.home-scene[data-mode=projects] .studio-card-foil.is-active{transition-delay:480ms}
html:not([data-studio-motion]) .studio-world-materials,html:not([data-studio-motion]) .studio-card-foil{display:none}
html:not([data-studio-motion]) .studio-global-light-field,html:not([data-studio-motion]) .studio-global-shade-field{display:none}
@media(hover:hover) and (pointer:fine){.home-scene[data-mode=projects]:has(.project-link--lenormand:hover) .studio-card-foil{transform:translate3d(0,-4px,0) rotate(-.25deg);transition:opacity 240ms var(--ease-settle),transform 260ms var(--ease-settle)}}
html[data-motion-comparison=original] .studio-object-caption{display:none}
.studio-action-hint{position:fixed;left:0;top:0;z-index:80;padding:6px 10px;border:1px solid #bd9d736b;border-radius:6px;background:#fff7e9f5;box-shadow:0 2px 6px #67462716;color:#684b32;font:400 12px/1.4 'Microsoft YaHei',sans-serif;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity 125ms ease,visibility 0s 125ms}
.studio-action-hint.is-visible{opacity:1;visibility:visible;transition-delay:0s}
body:has(.studio-action-hint.is-visible) .studio-object-caption{opacity:0}
.studio-click-ripples{position:fixed;inset:0;z-index:4;overflow:hidden;pointer-events:none}
.studio-click-ripple{position:absolute;width:156px;height:90px;border:1px solid #94a8ab66;border-radius:50%;box-shadow:0 1px 0 #fffbe8b8,inset 0 -1px 0 #b49f7526;pointer-events:none}
.studio-click-ripple::after{content:'';position:absolute;inset:17%;border:1px solid #fbf4dc99;border-radius:50%;box-shadow:0 1px 0 #687f8a20}
html:not([data-studio-motion]) .studio-action-hint,html:not([data-studio-motion]) .studio-click-ripples{display:none}
@media(hover:hover) and (pointer:fine){
  html[data-studio-motion] .scrapbook-sheet:has(.index-trigger--work:is(:hover,:focus-visible)) .home-scene[data-mode=idle] .drawer-state--half{opacity:1;transform:none}
  html[data-studio-motion] .scrapbook-sheet:has(.index-trigger--projects:is(:hover,:focus-visible)) .home-scene[data-mode=idle] .computer-state--off{opacity:0}
  html[data-studio-motion] .scrapbook-sheet:has(.index-trigger--projects:is(:hover,:focus-visible)) .home-scene[data-mode=idle] .computer-state--on{opacity:1}
  html[data-studio-motion] .scrapbook-sheet:has(.index-trigger--resume:is(:hover,:focus-visible)) .home-scene[data-mode=idle] .scene-prop-intent--paper{opacity:1;transform:perspective(900px) translate(-.4%,-1.4%) rotateX(-24deg) rotateY(-12deg) rotate(-7deg) scale(1.12)}
}
@media(prefers-reduced-motion:reduce){
  .studio-profile{transition:opacity 200ms linear!important}
  .studio-click-ripples{display:none}
  .studio-action-hint,.drawer-state,.computer-state{transition:none!important}
  .studio-world-materials,.studio-card-foil{display:none}
  .studio-global-light-field,.studio-global-shade-field{display:none}
  html[data-studio-motion] .project-prop{transition:none;transform:none!important}
  .studio-object-caption{transition:none}
  html[data-studio-motion]:is([data-studio-design=tactile],[data-studio-design=materials]) .thought-card:hover .thought-frames{transform:none}
}