:root{--night:oklch(14% .004 80);--text:oklch(93% .006 80);--muted:oklch(67% .008 80);--ease:cubic-bezier(.16,1,.3,1)}*{box-sizing:border-box}body{margin:0;background:var(--night);color:var(--text);font-family:'Avenir Next','PingFang SC','Microsoft YaHei',sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;border:0;cursor:pointer}a:focus-visible,button:focus-visible{outline:2px solid #d5e8a8;outline-offset:5px}main{max-width:1600px;margin:auto;padding:24px 3.6vw 100px}.workbench{position:relative;width:100%;aspect-ratio:1160/500;background:linear-gradient(180deg,#171716,#242321);border-radius:14px;overflow:hidden;box-shadow:0 35px 45px #050505;isolation:isolate}.desk-scene{position:absolute;left:0;top:0;width:1160px;height:500px;transform-origin:top left}.desk-light{position:absolute;inset:0;background:radial-gradient(ellipse at 52% 92%,#6b554e65,transparent 55%);pointer-events:none}.desk-mat{position:absolute;left:179px;top:70px;width:835px;height:373px;animation:mat-arrive 1.5s var(--ease) both}.desk-object{position:absolute;padding:0;background:none;z-index:4}.desk-object img{width:100%;display:block;pointer-events:none;transform:rotate(var(--base-rotate,0deg));transform-origin:center}.journal{left:-44px;top:172px;width:419px;--base-rotate:0deg}.pencil{left:240px;top:88px;width:94px;--base-rotate:-149deg}.mouse{left:877px;top:269px;width:55px;--base-rotate:-16deg;filter:drop-shadow(16px 8px 12px #050505b0)}.headphones{left:890px;top:38px;width:223px;--base-rotate:25deg;filter:drop-shadow(11px 3px 8px #05050590)}.tool-stickers{position:absolute;inset:0;z-index:4;pointer-events:none}.tool-sticker{position:absolute;padding:0;background:none;pointer-events:auto;width:32px;transition:transform .3s var(--ease)}.tool-sticker img{display:block;width:100%;animation:object-arrive 1.8s var(--ease) var(--delay) both}.tool-sticker:hover,.tool-sticker:focus-visible{transform:translateY(-8px) rotate(8deg) scale(1.15)}.sticker-0{left:1034px;top:315px;width:27px}.sticker-1{left:1073px;top:330px;width:27px;rotate:15deg}.sticker-2{left:1113px;top:345px}.sticker-3{left:1033px;top:375px;rotate:-14deg}.sticker-4{left:1090px;top:403px}.laptop-layer{position:absolute;left:24px;top:-56px;width:1114px;height:997px;pointer-events:none;z-index:3;animation:laptop-arrive 1.6s var(--ease) .4s both}.laptop-image{display:block;width:100%;height:100%;transition:transform .6s var(--ease);transform-origin:50% 24%}.computer-entry{position:absolute;left:373px;top:38px;width:398px;height:365px;z-index:6;border-radius:12px;display:block}.screen-hint{position:absolute;top:80px;left:48px;right:42px;display:flex;align-items:center;justify-content:space-between;color:#f6f5f1;font-size:11px;letter-spacing:.12em;background:#171714cc;padding:12px 16px;border:1px solid #eeeeeb40;border-radius:6px;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .4s var(--ease)}.screen-hint>span{font-size:20px}.computer-entry:hover .screen-hint,.computer-entry:focus-visible .screen-hint{opacity:1;transform:none}.desk-scene[data-active="computer"] .laptop-image{transform:scale(1.035) translateY(-4px)}.desk-scene[data-active="journal"] .journal img{animation:journal-sway 1s cubic-bezier(.44,0,.56,1) infinite alternate}.desk-scene[data-active="pencil"] .pencil img{animation:pencil-sway 1.2s cubic-bezier(.44,0,.56,1) infinite alternate}.desk-scene[data-active="mouse"] .mouse img{animation:mouse-sway 1s cubic-bezier(.44,0,.56,1) infinite alternate}.desk-scene[data-active="headphones"] .headphones img{animation:headphone-sway 1.7s cubic-bezier(.44,0,.56,1) infinite alternate}.stage-caption,.entry-caption{position:absolute;bottom:15px;font-size:10px;letter-spacing:.08em;color:#aaa69f;z-index:8;pointer-events:none}.stage-caption{left:20px}.entry-caption{right:20px}.intro-identity{position:relative;display:flex;gap:24px;align-items:center;padding:32px 0 20px;animation:identity-arrive 1.3s var(--ease) .5s both}.identity-mark{width:145px;height:145px;flex-shrink:0;border-radius:32px;background:radial-gradient(ellipse at 15% 0,#a15031,transparent 65%),linear-gradient(140deg,#272320,#090a0a);font:italic 110px/1.1 Georgia,serif;text-align:center;position:relative;border:1px solid #b7a49320}.identity-mark>span{position:absolute;right:10px;top:8px;font:30px 'Avenir Next',sans-serif;color:#bdca9b}.identity-copy h1{margin:0;font-size:clamp(5rem,11.5vw,10.5rem);line-height:.9;font-weight:500;letter-spacing:-.085em}.identity-copy p{display:flex;gap:16px;margin:22px 0 8px;color:#bdbbb6;font-size:clamp(.75rem,1.4vw,1.125rem)}.identity-copy p>span{color:#625f59}.identity-note{font-size:.8125rem;color:var(--muted)}.enter-link{margin-left:auto;align-self:center;display:flex;align-items:center;gap:40px;border:1px solid #a9a29930;border-radius:99px;padding:18px 28px;background:linear-gradient(180deg,#161514,#20201e);white-space:nowrap;font-size:.9375rem;transition:transform .3s var(--ease),background .3s}.enter-link:hover{background:#33372b;transform:translateY(-3px)}.enter-link>span{font-size:1.4rem}.intro-dock{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);display:flex;gap:8px;padding:8px 14px;border:1px solid #cfcec340;border-radius:24px;background:#99998b36;backdrop-filter:blur(16px);z-index:20}.intro-dock a,.intro-dock button{width:58px;min-height:58px;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:14px}.intro-dock span{font-size:27px;line-height:1;transition:transform .25s var(--ease);filter:drop-shadow(0 0 7px #f5f6e650)}.intro-dock small{font-size:9px;color:#cfcec8}.intro-dock a:hover span,.intro-dock button:hover span{transform:translateY(-5px) scale(1.12)}.intro-footnote{text-align:center;margin:24px 0 0;color:#817e76;font-size:9px;letter-spacing:.14em}.object-cursor{position:fixed;top:0;left:0;pointer-events:none;z-index:40;padding:10px 16px;background:#dddcd0ed;color:#262520;border-radius:99px;font-size:.75rem;opacity:0;white-space:nowrap}.object-cursor.is-visible{opacity:1}.entry-transition{position:fixed;inset:0;background:#141514;z-index:100;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .45s}.entry-transition span{color:#dcdfd4;font-size:.875rem;letter-spacing:.05em}.is-entering .desk-scene{transition:scale .75s var(--ease);scale:1.7}.is-entering .intro-identity,.is-entering .intro-dock{opacity:0;transition:opacity .25s}.is-entering .entry-transition{opacity:1;transition-delay:.4s}.is-entering .object-cursor{display:none}@keyframes object-arrive{from{transform:translateY(-1000px) rotate(var(--start-rotate,60deg))}to{transform:rotate(var(--base-rotate,0deg))}}@keyframes laptop-arrive{from{transform:translateY(-982px) rotate(30deg)}to{transform:none}}@keyframes mat-arrive{from{transform:translateY(-600px) rotate(-15deg)}to{transform:none}}@keyframes identity-arrive{from{opacity:0;transform:translateY(70px)}to{opacity:1;transform:none}}@keyframes journal-sway{from{transform:rotate(0deg) scale(1.04)}to{transform:rotate(6deg) scale(1.08)}}@keyframes pencil-sway{from{transform:rotate(-149deg)}to{transform:translate(-5px,-7px) rotate(-127deg)}}@keyframes mouse-sway{from{transform:rotate(-16deg)}to{transform:translate(-28px,-11px) rotate(-7deg)}}@keyframes headphone-sway{from{transform:rotate(25deg)}to{transform:translate(-2px,-6px) rotate(15deg)}}
@media(max-width:800px){main{padding:16px 16px 110px}.workbench{aspect-ratio:1.5}.desk-scene{top:8%}.intro-identity{gap:16px;flex-wrap:wrap;padding-top:32px}.identity-mark{width:76px;height:76px;font-size:60px;border-radius:20px}.identity-mark>span{font-size:20px;right:4px}.identity-copy h1{font-size:clamp(4rem,16vw,7rem)}.identity-copy p{gap:8px;font-size:.6875rem;margin-top:14px}.identity-note{font-size:.6875rem}.enter-link{margin:16px 0 0;width:100%;justify-content:space-between;font-size:.875rem;padding:14px 20px}.stage-caption{display:none}.entry-caption{bottom:12px;right:12px;font-size:9px}.intro-footnote{font-size:8px;line-height:1.8;max-width:30ch;margin:24px auto}.intro-dock{bottom:18px}.computer-entry{outline-offset:2px}.screen-hint{opacity:1;font-size:14px;padding:14px;transform:none}.screen-hint>span{font-size:24px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.desk-object img{transform:rotate(var(--base-rotate,0deg))}.is-entering .entry-transition{opacity:1}}

/* Arrival stays on the outer layer so ending a hover never replays it. */
.desk-object{animation:object-arrive 1.8s var(--ease) var(--delay) both;--base-rotate:0deg}
.pencil img{--base-rotate:-149deg}.mouse img{--base-rotate:-16deg}.headphones img{--base-rotate:25deg}
.intro-dock{position:relative;bottom:auto;left:auto;transform:none;width:max-content;margin:20px auto 0}
main{padding-bottom:28px}.intro-footnote{margin-top:16px}
@media(min-width:801px){.workbench{max-height:560px;min-height:280px}.intro-identity{padding-top:24px;padding-bottom:12px}.identity-mark{width:110px;height:110px;font-size:86px}.identity-copy h1{font-size:clamp(5rem,8vw,8rem)}.identity-copy p{margin-top:16px}}
@media(max-width:800px){main{min-height:100svh;display:flex;flex-direction:column}.intro-dock{bottom:auto;margin-top:auto}.intro-footnote{margin-bottom:0}.intro-identity{padding-bottom:32px}}

/* Focus the hovered object while the remaining desk falls into shadow. */
.desk-object,.tool-stickers,.desk-mat{transition:filter .5s var(--ease)}
.desk-scene[data-active="computer"] .desk-object,
.desk-scene[data-active="computer"] .tool-stickers,
.desk-scene[data-active="computer"] .desk-mat{filter:brightness(.48)}
.desk-scene[data-active="computer"] .laptop-image{transform:translateY(-8px) scale(1.035)}
.tool-sticker.is-active{transform:translateY(-8px) rotate(8deg) scale(1.15)}
.object-cursor{max-width:calc(100vw - 16px);white-space:normal;box-shadow:0 4px 20px #090a0960}
@media(max-width:800px){.workbench{aspect-ratio:1.8}.desk-scene{top:4%}.intro-dock{flex-shrink:0}.object-cursor{font-size:.75rem;padding:8px 12px}}
@media(prefers-reduced-motion:reduce){.desk-scene[data-active="computer"] .laptop-image,.tool-sticker.is-active{transform:none}.is-entering .desk-scene{scale:1}}

.intro-skip{position:fixed;left:16px;top:-100px;z-index:80;padding:12px 20px;background:var(--text);color:var(--night);border-radius:8px}.intro-skip:focus{top:16px}