:root{--red:#ff123d;--ink:#1c1c1b;--progress:0;font-family:"PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--red)}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}button{font:inherit;color:inherit}button:focus-visible{outline:3px dashed currentColor;outline-offset:7px}#stage{position:relative;width:100%;height:100svh;overflow:hidden;touch-action:none;user-select:none}#world{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#loading{position:absolute;inset:0;display:grid;place-content:center;background:var(--red);z-index:20;font-weight:800;font-size:22px;transition:opacity .3s}#loading.done{opacity:0;pointer-events:none}#loading span{animation:pulse .7s alternate infinite}#avatar{position:absolute;border:0;background:transparent;border-radius:44%;padding:0;cursor:grab;z-index:3;touch-action:none}#avatar:active{cursor:grabbing}.hero-title{position:absolute;top:11%;left:50%;transform:translateX(-50%) rotate(-6deg);text-align:center;pointer-events:none;transition:opacity .2s;z-index:2}.hero-title span{font-family:"Chalkboard SE","Comic Sans MS",cursive;font-size:clamp(16px,2.2vw,28px);font-weight:900;letter-spacing:-1px}.hero-title h1,.hero-title strong{font-size:clamp(32px,4.3vw,58px);font-weight:950;letter-spacing:-3px;line-height:1.04;margin:8px 0;display:block}.hero-title strong{font-size:clamp(29px,4vw,52px)}#dark-title{color:white;opacity:0}#pull{position:absolute;right:-35px;top:49%;width:clamp(105px,14vw,210px);background:none;border:0;cursor:grab;z-index:5;transform:translateY(-50%) rotate(-3deg);touch-action:none}#pull img{width:100%;pointer-events:none}#pull span{display:block;font-size:12px;transform:translateX(-10px);font-weight:700}#drawer{position:absolute;right:0;top:0;height:100%;width:52vw;min-width:450px;z-index:6;transform:translateX(110%);pointer-events:none;will-change:transform}#about{position:absolute;inset:18px 20px 18px 0;border-radius:24px 22px 30px 20px;background:var(--ink);color:#f7f4ed;overflow:auto;padding:34px 38px;display:flex;flex-direction:column;justify-content:space-between;gap:35px;touch-action:pan-y;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#555 transparent}#drawer.open{pointer-events:auto}#close{position:absolute;top:44%;right:100%;width:clamp(136px,17.6vw,264px);padding:0;border:0;background:none;cursor:pointer;transform:translate(22%,-50%) rotate(-4deg);z-index:2}#close img{width:100%;pointer-events:none}.panel-top,.panel-bottom{display:flex;justify-content:space-between;gap:15px;font-size:10px;letter-spacing:.12em;line-height:1.6;color:#aaa}.panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px}.eyebrow{font-size:11px;letter-spacing:.12em;color:#c5beb6}.bio h2{font-size:clamp(22px,2.3vw,35px);line-height:1.4;margin:17px 0 30px}.bio p{font-size:13px;line-height:1.9;color:#a9a7a3}.bio .placeholder{color:#f8f3e9;font-size:15px}.contact{margin-top:32px;display:grid;gap:13px;font-size:11px;color:#b9b6af}.works ol{padding:0;list-style:none}.works li{display:flex;gap:12px;border-top:1px solid #51514b;padding:20px 0;align-items:baseline}.works h3{font-size:17px;margin:0 0 7px}.works p{font-size:11px;color:#96958f;line-height:1.7}.num{font-size:10px;color:#8c8a84}.work-arrow{margin-left:auto;font-size:22px}.work-note{margin:20px 0}.small{margin-top:28px}.panel-bottom{border-top:1px solid #41413e;padding-top:20px}.panel-bottom button{border:0;background:none;color:#f5f0e8;cursor:pointer;font-size:12px}#hint{position:absolute;bottom:15px;width:100%;text-align:center;font-size:10px;letter-spacing:.15em;opacity:.6;pointer-events:none}#motion{position:absolute;bottom:17px;left:24px;font-size:10px;border:0;background:none;opacity:.65;cursor:pointer;z-index:4}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.sr-only:focus-visible{clip:auto;width:auto;height:auto;left:20px;top:20px;padding:10px;z-index:10;background:white}@keyframes pulse{to{opacity:.3}}@media(min-width:1600px){#about{padding:45px 60px}.bio p{font-size:16px}.panel-grid{gap:60px}.works h3{font-size:21px}}@media(max-width:900px){#drawer{width:64vw;min-width:0}.panel-grid{grid-template-columns:1fr;gap:20px}#about{padding:32px 26px}.panel-top span:last-child{display:none}.bio h2{margin-bottom:18px}.contact{margin-top:20px}.works li{padding:14px 0}}@media(max-width:600px){.hero-title{top:13%}.hero-title h1{font-size:42px}#pull{right:-26px;width:115px;top:53%}#drawer{width:88vw}#about{inset:10px 10px 10px 0;padding:28px 25px 25px 36px}#close{width:104px;top:55px;right:calc(100% - 29px)}.panel-grid{gap:35px}.panel-top{padding-left:10px}#motion{bottom:14px;left:13px;font-size:9px}#hint{bottom:40px;font-size:9px}#pull span{font-size:10px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}

#drawer{visibility:hidden}#close:focus:not(:focus-visible){outline:none}#pull:focus:not(:focus-visible){outline:none}@media(max-width:600px){#pull{top:68%;width:90px;right:-18px}}
.works li a{color:inherit;text-decoration:none;display:flex;align-items:baseline;width:100%;gap:12px}.works li a:hover h3{text-decoration:underline;text-underline-offset:6px}.works li a:focus-visible{outline:2px dashed #fff;outline-offset:5px}

.hero-title span{font-family:"Chalkduster","Chalkboard SE",cursive}.hero-title h1{font-family:"PingFang SC","Microsoft YaHei",sans-serif}

/* Both handle drawings travel on the same panel edge; swap only at mid-travel. */
#pull{z-index:7}#close{top:49%;opacity:0}#pull span{transition:opacity .08s}#pull[aria-expanded="true"] span{opacity:0}
@media(max-width:600px){#close{top:68%}}
/* The profile surface covers the portions of both handles inside its edge. */
#pull{z-index:5}#about{z-index:3}

.stretch-finger{display:none;position:absolute;right:0;top:0;pointer-events:none}#pull.stretching .stretch-finger{display:block}#pull.stretching img,#pull.stretching span{opacity:0}

@keyframes handdrawn-float{0%,100%{transform:translate(-1px,1px) rotate(-.7deg) skewX(-.6deg) scale(1,.995)}50%{transform:translate(1.5px,-2px) rotate(.7deg) skewX(.6deg) scale(.99,1.01)}}
#pull img,#close img,#pull span,#hint,#motion{animation:handdrawn-float 3.6s ease-in-out infinite;transform-origin:center}#close img{animation-delay:-1.2s}#hint{animation-duration:4.4s}#motion{animation-delay:-2s}#pull.stretching img{animation:none}.motion-paused *{animation:none!important}
@media(prefers-reduced-motion:reduce){#pull img,#close img,#pull span,#hint,#motion{animation:none}}

/* Real portfolio content: readable at laptop and mobile heights. */
#about{justify-content:flex-start;gap:28px}.panel-grid{gap:32px}.bio h2{font-size:clamp(22px,2vw,30px);margin:12px 0 20px}.bio .intro{color:#ede9e1}.education h3,.skills h3{font-size:12px;color:#ddd8ce;margin:22px 0 8px}.education p,.skills p{font-size:12px;margin:7px 0}.education strong{font-weight:500;color:#ddd8ce}.contact{margin-top:22px;gap:12px}.contact a{color:#ede9e1;text-decoration:none;overflow-wrap:anywhere}.contact a:hover{text-decoration:underline}.works li{padding:17px 0}.works h3{font-size:17px;line-height:1.5}.works p{margin:5px 0;line-height:1.65}.panel-bottom{margin-top:auto}.works .small{font-size:11px;color:#99958d;line-height:1.8}@media(min-width:1600px){.bio p{font-size:14px}.education p,.skills p{font-size:13px}}

.project-viewer{position:fixed;inset:0;width:100%;height:100%;border:0;background:#1c1c1b;z-index:100}

.returning-about #drawer{visibility:visible!important;transform:translateX(0)!important;pointer-events:auto}.returning-about #loading{display:none}
/* The scene is a fixed viewport, never a focus-scroll container. Only #about scrolls. */
html,body,#stage{overflow:clip}

#pull,#close{scale:1;transition:scale 180ms ease-out;transform-origin:right center}#pull.hover-enlarged,#close.hover-enlarged{scale:1.1}@media(prefers-reduced-motion:reduce){#pull,#close{transition:none}}
.ambient-grain{position:absolute;inset:0;width:100%;height:100%;z-index:15;pointer-events:none}

/* Image controls have no rectangular focus outline. */
#pull:focus,#pull:focus-visible,#close:focus,#close:focus-visible{outline:none;box-shadow:none}