:root{--title-color:#f8e71a;background:#008efe;color-scheme:light}*{box-sizing:border-box}html,body{margin:0;width:100%;font-family:Arial,sans-serif}body{overflow-x:hidden}#journey{height:240svh}#stage{position:sticky;top:0;height:100svh;overflow:hidden;background:#008efe}#hero,#work{position:absolute;inset:0}#work{height:max(100svh,79.93056vw);background:#008efe}#projects{position:absolute;top:12.847222vw;display:block;width:100%;height:auto}#hero{z-index:2;will-change:clip-path;background:#008efe}.sky{position:absolute;inset:0;background:#008efe}.topbar{position:absolute;top:0;width:100%;height:6.25%;background:#fff;z-index:3}.hero-layout{position:absolute;inset:0;width:100%;height:100%}.title{position:absolute;margin:0;left:3.27156%;top:15.52734%;width:92.7701%;height:38.326%;color:var(--title-color)}.title svg{width:100%;height:100%;display:block}.door{position:absolute;left:75.20833%;top:15.52734%;width:10.27778%;height:38.28125%;background:#000;box-shadow:inset -.55556vw 0 #ffffff36}.stairs{position:absolute;left:31.59722%;top:56.05469%;width:55.06944%;height:16.79688%}.stairs svg{width:100%;height:100%;display:block}#cloud-layer{position:absolute;left:0;top:45%;width:100%;height:59%;pointer-events:none;mask-image:linear-gradient(transparent 0%,#000 22%,#000 100%)}#cloud-layer canvas{display:block;width:100%;height:100%}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(prefers-reduced-motion:reduce){#hero,#cloud-passage{will-change:auto}}

#work{z-index:4;transform:translateY(100svh)}#hero{will-change:auto}#cloud-layer{top:43%;height:62%}.sky{background:var(--sky-gradient,#008efe)}
#sky-editor{position:absolute;z-index:3;right:22px;top:80px;width:272px;max-width:calc(100% - 24px);max-height:calc(100svh - 24px);overflow:auto;border:1px solid #d7e5ed;border-radius:12px;background:#f7fbfff5;color:#294b65;box-shadow:0 8px 32px #002c5526;font:12px Arial,sans-serif}#editor-handle{display:flex;align-items:center;gap:10px;padding:14px;cursor:grab;touch-action:none;border-bottom:1px solid #dce7ef;user-select:none}#editor-handle:active{cursor:grabbing}#editor-handle strong{font-weight:600}#editor-handle span{font-size:10px;color:#7891a4;margin-left:auto}#editor-toggle{border:0;background:transparent;color:inherit;font-size:20px;cursor:pointer}#editor-controls{padding:15px}#editor-controls label{display:flex;align-items:center;gap:8px;margin-bottom:12px}#editor-controls input[type=color]{margin-left:auto;width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer}#editor-controls input:not([type]){width:78px;font:11px monospace;padding:6px;border:1px solid #ccdae5;border-radius:4px;color:#294b65}#editor-controls input[aria-invalid=true]{border-color:#c33}#editor-controls input[type=range]{width:100%;accent-color:#008efe;margin:0 0 16px}#editor-controls output{margin-left:auto;font:11px monospace}#sky-reset{border:1px solid #cbdce8;background:#fff;color:#294b65;border-radius:5px;padding:8px 12px;cursor:pointer}#editor-status{display:block;font-size:10px;color:#71899b;margin-top:12px}button:focus-visible,input:focus-visible{outline:2px solid #008efe;outline-offset:2px}[hidden]{display:none!important}

/* Global navigation and its temporary editor live outside the scrolling stage. */
.topbar{position:fixed;inset:0 0 auto;height:6.25svh;background:var(--nav-color,#fff);z-index:100}
#nav-editor{position:fixed;z-index:101;left:22px;top:80px;width:272px;max-width:calc(100% - 24px);max-height:calc(100svh - 24px);overflow:auto;border:1px solid #d7e5ed;border-radius:12px;background:#f7fbfff5;color:#294b65;box-shadow:0 8px 32px #002c5526;font:12px Arial,sans-serif}
#nav-handle{display:flex;align-items:center;gap:10px;padding:14px;cursor:grab;touch-action:none;border-bottom:1px solid #dce7ef;user-select:none}#nav-handle:active{cursor:grabbing}#nav-handle span{font-size:10px;color:#7891a4;margin-left:auto}#nav-toggle{border:0;background:transparent;color:inherit;font-size:20px;cursor:pointer}
#nav-controls{padding:15px}#nav-controls label{display:flex;align-items:center;gap:8px;margin-bottom:12px}#nav-color{margin-left:auto;width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer}#nav-hex{width:78px;font:11px monospace;padding:6px;border:1px solid #ccdae5;border-radius:4px;color:#294b65}#nav-hex[aria-invalid=true]{border-color:#c33}#nav-reset{border:1px solid #cbdce8;background:#fff;color:#294b65;border-radius:5px;padding:8px 12px;cursor:pointer}#nav-status{display:block;font-size:10px;color:#71899b;margin-top:12px}

@font-face{font-family:Playwrite;src:url('./assets/PlaywriteUSTrad-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
#about{position:relative;width:100%;height:69.7916667vw;background:#000;overflow:hidden;font-family:"PingFang SC",Arial,sans-serif;color:rgba(25,22,24,.9)}
.about-canvas{position:absolute;top:0;left:0;width:1440px;height:1005px;transform:scale(var(--about-scale,1));transform-origin:top left}
#about p,#about h2,#about h3{margin:0;font-weight:400}
.about-board{position:absolute;left:69px;top:74px;width:1302px;height:857px;overflow:hidden;background:#1f8ffb}
.about-sky{position:absolute;left:0;top:1px;width:1302px;height:856px;object-fit:fill}
.about-card{position:absolute;left:62px;top:72px;width:784px;height:454px;border-radius:40px;background:#fafafa;overflow:hidden}
.about-portrait{position:absolute;left:40px;top:40px;width:286px;height:374px;object-fit:contain;border-radius:30px}
#about .about-card h2{position:absolute;left:371px;top:28px;width:388px;height:74px;font:400 36px Playwrite,cursive;color:#000;white-space:nowrap}
.about-details{position:absolute;left:373px;top:123px;display:flex;flex-direction:column;gap:34px;font-size:18px;line-height:25px}
.detail{display:flex;flex-direction:column;gap:12px}#about .detail h3{font-size:18px;line-height:25px;color:#19769b;font-weight:500}.education{display:flex;gap:58px}.experience{display:flex;flex-direction:column;gap:8px;white-space:nowrap}
.interests-paper{position:absolute;left:821px;top:257px;width:456px;height:658.298px;background:#e9e5e4;transform:rotate(1deg)}
#about .interests-paper h2{position:absolute;left:46px;top:100px;width:364px;font:400 32px Playwrite,cursive;white-space:nowrap;color:rgba(25,22,24,.75)}
.interest-list{position:absolute;left:33px;top:242px;width:389px;display:flex;flex-direction:column;gap:24px}.interest-list>div{display:flex;flex-direction:column;gap:13px}#about .interest-list h3{font-size:24px;line-height:34px;color:#000}.interest-list p{font-size:16px;line-height:26px;color:rgba(25,22,24,.75)}.interest-list>img{width:389px;height:2px;display:block;margin-top:-2px}
.contact-paper{position:absolute;left:64.105px;top:646.007px;width:655px;height:254.997px;background:#d83030;transform:rotate(-1deg)}
.binder-clip{position:absolute;left:296.335px;top:540.468px;width:169.554px;height:154.483px;object-fit:contain;transform:rotate(-1deg)}
#about .contact-please,#about .contact-heading{position:absolute;left:106.604px;width:548px;height:74px;font:400 46px Playwrite,cursive;color:#000;white-space:nowrap;transform:rotate(-1deg)}#about .contact-please{top:690.777px}#about .contact-heading{top:762.777px}
.red-pin{position:absolute;left:1118px;top:265px;width:73.49px;height:94.693px;object-fit:contain}

/* Fine diagonal print dots, confined to the third-page sky. */
.about-sky-texture{position:absolute;left:0;top:1px;width:1302px;height:856px;overflow:hidden;isolation:isolate;background:#78a7bd}
.about-sky-texture .about-sky{top:0;filter:none}
.about-sky-texture::after{content:"";position:absolute;inset:-700px;transform:rotate(45deg);background-image:conic-gradient(rgba(38,79,104,.28) 25%,transparent 0 50%,rgba(38,79,104,.28) 0 75%,transparent 0);background-size:8.5px 8.5px;mix-blend-mode:multiply;pointer-events:none}

/* Figma 702:114591 mapped to the unchanged 4096 × 2748 project image. */
.project-interactions{position:absolute;left:0;top:12.847222vw;width:100%;aspect-ratio:4096/2748;pointer-events:none}
.project-coordinates{width:4096px;height:2748px;transform:scale(var(--project-scale,1));transform-origin:0 0}
.project-hotspot{position:absolute;background:transparent;border:0;padding:0;cursor:pointer;pointer-events:auto;outline:none}
.project-overlay{position:absolute;opacity:0;transition:opacity .18s ease;pointer-events:none}
.project-shade{position:absolute;inset:0;border-radius:40px;background:rgba(25,22,24,.6);filter:blur(4px);box-shadow:inset -10px -12px 47px 25px #00000040,inset 10px 12px 47px 25px #00000040}
.project-view{position:absolute;transform:translate(-50%,-50%);padding:8px 16px;border-radius:100px;background:#fff;color:rgba(25,22,24,.9);font:500 34px/1.5 "PingFang SC",Arial,sans-serif;white-space:nowrap}
.project-hotspot:hover+.project-overlay,.project-hotspot:focus-visible+.project-overlay{opacity:1}
.douyin-hotspot{left:1580px;top:380px;width:930px;height:700px;clip-path:polygon(0 8%,96% 0,100% 94%,4% 100%)}
.douyin-overlay{left:1666px;top:502.2563px;width:604.2366px;height:483.0976px}
.douyin-shade{position:absolute;left:11.4633px;top:14.9013px;width:581.31px;height:453.295px;border-radius:40px;transform:rotate(-3deg);background:rgba(25,22,24,.6);filter:blur(2px);box-shadow:inset -10px -12px 47px 25px #00000040,inset 10px 12px 47px 25px #00000040}
.douyin-view{position:absolute;left:311.5185px;top:241.6624px;transform:translate(-50%,-50%) rotate(-3deg);padding:8px 16px;border-radius:100px;background:#fff;color:rgba(25,22,24,.9);font:500 34px/1.5 "PingFang SC",Arial,sans-serif;white-space:nowrap}
.xiaoyuzhou-hotspot,.xiaoyuzhou-overlay{left:1335px;top:1142px;width:533px;height:384px}.xiaoyuzhou-overlay .project-view{left:269px;top:186px}
.kuaishou-hotspot,.kuaishou-overlay{left:2016px;top:1135px;width:599px;height:462px}.kuaishou-overlay .project-view{left:301.5px;top:224px}
.tmall-hotspot,.tmall-overlay{left:1656px;top:1781px;width:614px;height:462px}.tmall-overlay .project-view{left:313.5px;top:224px}
.future-left-hotspot,.future-left-overlay{left:906px;top:1781px;width:591px;height:426px}.future-left-overlay .project-view{left:295.5px;top:216px}
.future-right-hotspot,.future-right-overlay{left:2651px;top:1758px;width:469px;height:351px}.future-right-overlay .project-view{left:234.5px;top:169px}
@media(prefers-reduced-motion:reduce){.project-overlay{transition:none}}
/* Hero coordinates follow Figma 711:114671, 1440 × 856. */
@font-face{font-family:Lacquer;src:url('./assets/Lacquer-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
.hero-layout{width:1440px;height:856px;transform-origin:top left;transform:scale(var(--hero-x,1),var(--hero-y,1))}
.hero-layout .title{left:48.1105px;top:124px;width:1336.9115px;height:392.5316px}
.title img{display:block;width:100%;height:100%;object-fit:fill}
.hero-layout .door{left:1079px;top:124px;width:148px;height:392px;padding:0;border:0;border-radius:0;box-shadow:inset -8px 0 #ffffff36;cursor:pointer;overflow:visible;appearance:none}
.door-note{position:absolute;left:10px;top:32px;width:121px;display:flex;flex-direction:column;gap:22px;color:#ff3944;font:400 40px/48px Lacquer,sans-serif;text-align:center;pointer-events:none;transition:opacity 120ms ease-out}
.door-note span{display:block;height:48px;white-space:nowrap}
.door-person{position:absolute;left:6px;top:118px;width:141px;height:282px;opacity:0;pointer-events:none;transition:opacity 140ms ease-out}
.door:hover .door-note,.door:focus-visible .door-note{opacity:0}
.door:hover .door-person,.door:focus-visible .door-person{opacity:1;transition-delay:70ms}
.door:focus-visible{outline:2px solid white;outline-offset:5px}
/* Transparent canvas compensation: receiver occupies y≈520–1378 of 1536. */
.hero-phone{position:absolute;left:155px;top:-97px;width:199.36px;height:683.52px;pointer-events:none}
@media(prefers-reduced-motion:reduce){.door-note,.door-person{transition:none}}

/* The stage clips the scene, but must not become a nested scroll target for #work. */
#stage{overflow:clip;}

/* Keep the document from rubber-banding past the first and final compositions. */
html,body{overscroll-behavior-y:none;background:#000}

/* Screen two is exactly the 4096 × 2748 artwork, without added blue padding. */
#work{height:67.08984375vw}
#projects,.project-interactions{top:0}

/* Figma card shadow: offset 4/4, blur 15.3, black 12%.
   box-shadow keeps the existing animated portrait outside a filter context. */
#about .about-card,#about .interests-paper,#about .contact-paper{box-shadow:4px 4px 15.3px rgba(0,0,0,.12)}

/* Shadows use the PNG alpha silhouettes; offsets scale with the design canvas. */
#about .binder-cast-shadow,#about .pin-cast-shadow{position:absolute;pointer-events:none;background:#17191c;mask-repeat:no-repeat;mask-position:center;mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain;transform-origin:50% 92%}
#about .binder-cast-shadow{left:296.335px;top:540.468px;width:169.554px;height:154.483px;mask-image:url('./assets/金属夹子.png');-webkit-mask-image:url('./assets/金属夹子.png');transform:translate(-11px,7px) rotate(-1deg) skewX(20deg) scaleY(.84);opacity:.16;filter:blur(3.5px)}
#about .binder-clip{filter:drop-shadow(-2px 2px 1.2px rgba(0,0,0,.19))}
/* Project around the visible needle tip (27, 282 in the 221 × 285 PNG). */
#about .pin-cast-shadow{left:1118px;top:265px;width:73.49px;height:94.693px;mask-image:url('./assets/红色图钉.png');-webkit-mask-image:url('./assets/红色图钉.png');transform-origin:12.217% 98.947%;transform:skewX(50deg) scaleY(.68);opacity:.16;filter:blur(4px)}
#about .red-pin{filter:drop-shadow(-.5px .5px 1px rgba(0,0,0,.11))}
/* Blur the masked child as a whole, so the silhouette edge stays soft. */
#about .binder-cast-shadow,#about .pin-cast-shadow{background:none;mask-image:none;-webkit-mask-image:none}
#about .binder-cast-shadow::before,#about .pin-cast-shadow::before{content:"";position:absolute;inset:0;background:#17191c;mask:var(--hardware-mask) center/contain no-repeat;-webkit-mask:var(--hardware-mask) center/contain no-repeat}
#about .binder-cast-shadow{--hardware-mask:url('./assets/金属夹子.png')}
#about .pin-cast-shadow{--hardware-mask:url('./assets/红色图钉.png')}

/* Hide only the temporary editor UI; retain its saved-color initialization. */
#sky-editor{display:none!important}