:root {
  --paper:#edece2; --ground:#d8d7cf; --ink:#282927; --red:#a9322c; --blue:#344d7e; --muted:#737168;
  --hand:'Caveat','Snowllly Journal CJK','Kaiti SC',STKaiti,KaiTi,'楷体',serif;
  --marker:'Permanent Marker','Snowllly Journal CJK','Kaiti SC',STKaiti,KaiTi,'楷体',serif;
  --type:'Courier New','Snowllly Journal CJK','Songti SC',STSong,'SimSun',serif;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.68' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.07' filter='url(%23n)'/%3E%3C/svg%3E");
  --grid:linear-gradient(#75817920 1px,transparent 1px),linear-gradient(90deg,#75817920 1px,transparent 1px);
  color-scheme:light;
}
*{box-sizing:border-box} [hidden]{display:none!important}
html,body{width:100%;height:100%;overflow:hidden}
body{margin:0;background:var(--grain),radial-gradient(ellipse at 40% 0,#ecebe3,transparent 65%),var(--ground);color:var(--ink);font:15px/1.75 var(--type)}
button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}img{max-width:100%}
button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px dashed var(--blue);outline-offset:4px}
.skip-link{position:fixed;top:-70px;left:20px;z-index:100;background:var(--paper);padding:8px 18px}.skip-link:focus{top:12px}
/* One 16:9 desk scales to both viewport dimensions; no internal scroll panes. */
.site-scene{position:fixed;left:50%;top:50%;width:1440px;height:810px;transform:translate(-50%,-50%) scale(var(--scene-scale,1));transform-origin:center}
.site-header{position:absolute;left:68px;right:68px;top:0;height:76px;display:flex;align-items:center;gap:35px}
.wordmark{display:flex;align-items:baseline;font:700 48px/1 var(--hand);transform:rotate(-3deg)}.mark-dot{color:var(--red)}.wordmark small{font:17px/1.5 var(--type);margin-left:15px;transform:rotate(3deg)}
.site-header nav{display:flex;gap:48px;margin-left:auto}.site-header nav a{position:relative;font:400 32px/1.2 var(--marker)}.site-header nav a.is-current{color:var(--red)}.site-header nav a.is-current::after{content:'';position:absolute;inset:-7px -12px -5px;border:2px solid var(--red);border-radius:48% 54% 45% 55%;transform:rotate(-10deg)}
nav a:hover{color:var(--red)}.edition{font-size:9px;letter-spacing:.11em;color:var(--muted)}.eyebrow{display:block;color:var(--muted);font:10px/1.7 var(--type);letter-spacing:.12em}.scribble{color:var(--blue);font:28px/1.25 var(--hand)}
.journal-stage{position:absolute;left:0;top:80px;width:1440px;height:712px;perspective:1800px}
.journal-turntable{position:absolute;left:50%;top:50%;width:1040px;height:680px;transform:translate(-50%,-50%);border-radius:14px;background:var(--grain),linear-gradient(100deg,#252824ed,#101310f5),url(assets/notebook-background.png) center/100% 100%;box-shadow:0 20px 25px #25272155,3px 5px 0 #0c0e0d,inset 0 0 0 5px #252724,inset 0 0 15px #000;transition:width .85s ease,height .85s ease,transform .85s cubic-bezier(.45,.03,.2,1)}
.journal-turntable::before{content:'';position:absolute;inset:9px;border:1px dashed #aaa99e77;border-radius:8px;box-shadow:0 0 0 3px #17191788,inset 0 0 6px #0008;pointer-events:none}
.journal-turntable::after{content:'';position:absolute;right:-24px;top:58%;width:76px;height:42px;background:radial-gradient(circle at 77% 50%,#aeb5a5 0 4px,#61695d 5px,#222 7px,transparent 8px),var(--grain),linear-gradient(95deg,#292c27,#111410);border:1px dashed #8c8c7877;border-radius:5px;box-shadow:3px 5px 7px #0007,inset 0 0 0 4px #171a15;z-index:0}
.journal-content{position:absolute;left:calc(50% - 7px);top:50%;width:936px;height:604px;transform:translate(-50%,-50%);background:var(--paper);box-shadow:3px 4px 0 #c6c6ba,6px 7px 0 #acae9f,10px 13px 15px #0008;z-index:1;transition:width .85s ease,height .85s ease,transform .85s cubic-bezier(.45,.03,.2,1),left .85s ease,top .85s ease}
.journal-stage[data-view=work] .journal-turntable{width:670px;height:1264px;transform:translate(-50%,-50%) rotate(90deg)}
.journal-stage[data-view=work] .journal-content{left:50%;top:calc(50% + 8px);width:1138px;height:604px;transform:translate(-50%,-50%) rotate(-90deg)}
.journal-stage[data-view=work] .journal-turntable::after{width:42px;height:76px;right:-23px;top:calc(50% - 38px)}
.journal-stage.is-turning .journal-turntable{animation:book-pullback .85s ease}.journal-stage.is-turning .binding i,.journal-stage.is-turning .archive-binding i{animation:ring-glint .85s ease}
.journal-stage.is-turning[data-view=work] #about{display:block!important;position:absolute;inset:0;z-index:5;pointer-events:none;animation:about-depart .65s both}.journal-stage.is-turning[data-view=work] .intro-right{transform-origin:left;animation:right-fold .65s both}.journal-stage.is-turning[data-view=work] .intro-left{transform-origin:left;animation:left-expand .65s both}
.intro-book,.work-section{height:100%;position:relative}.intro-book,.book-page,.work-notebook{background:var(--grain),var(--grid),var(--paper);background-size:180px 180px,22px 22px,22px 22px,auto}
.book-spread,.project-spread{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.book-spread{height:calc(100% - 49px)}
.book-page{position:relative;min-width:0;padding:24px 30px 18px;overflow:hidden}.book-page+.book-page{border-left:1px solid #bbbcb1;box-shadow:inset 12px 0 15px -14px #30332b99}
.binding{position:absolute;left:calc(50% - 5px);top:0;bottom:0;width:10px;background:linear-gradient(90deg,#454940,#191e18,#646959);z-index:3;pointer-events:none}.binding i{position:absolute;left:-20px;width:50px;height:21px;border:5px solid #9c9e94;border-top-color:#ebede2;border-bottom-color:#575f58;border-radius:50%;box-shadow:0 3px 4px #19211c77,inset 0 3px 2px #30362d;transform:rotate(-5deg)}.binding i:nth-child(1){top:14%}.binding i:nth-child(2){top:32%}.binding i:nth-child(3){top:50%}.binding i:nth-child(4){top:68%}.binding i:nth-child(5){top:86%}
.side-index{position:absolute;right:151px;top:196px;z-index:9;display:flex;flex-direction:column;gap:25px;transition:right .85s}.journal-stage[data-view=work] .side-index{right:40px}.side-index a{padding:12px 14px;width:108px;background:var(--grain),#ead3ce;border:1px solid #bbae9e;border-radius:0 9px 9px 0;box-shadow:4px 4px 6px #171c1644;font:24px/1.3 var(--hand);transform:translateX(5px) rotate(3deg)}.side-index a.side-work{background-color:#cbd9e3;transform:translateX(13px) rotate(-3deg)}.side-index a.is-current{background-color:#c3a6a1;transform:translateX(-7px) rotate(-1deg);box-shadow:inset 5px 0 8px #63595144,2px 2px 4px #171c1644}.side-index a.side-work.is-current{background-color:#99b3c6}.side-index a span{font-size:25px}
h1{margin:16px 0 18px;font:400 54px/1 var(--marker);color:var(--red);letter-spacing:-.065em;transform:rotate(-5deg)}.intro-cn{font-size:23px;margin:16px 0 0}.intro-cn>span{display:block}.intro-job{font-size:15px;margin-top:3px}
.about-collage{position:relative;width:300px;margin:18px auto 0;padding-top:12px;cursor:url(assets/magnifier.svg) 19 19,zoom-in}.portrait-sticker{position:relative;width:76%;margin:0 auto;transform:rotate(-4deg);animation:portrait-float 3s ease-in-out infinite}.portrait-clip{position:relative;aspect-ratio:1067/1056;overflow:hidden;filter:drop-shadow(3px 7px 3px #25272140)}
/* Keep the supplied cutout; only trim its transparent canvas. */
.portrait-clip img{position:absolute;display:block;width:177.132%;max-width:none;height:auto;left:-48.641%;top:-34.186%}.portrait-sticker figcaption{padding-top:12px;white-space:nowrap;text-align:center;color:var(--blue);font:21px/1.2 var(--hand);transform:rotate(4deg)}
.collage-word{position:absolute;z-index:2;border:0;background:transparent;padding:5px 2px;font:400 24px/1.15 var(--marker);color:var(--red);transform:rotate(var(--tilt,-7deg));cursor:inherit}.word-music{left:-3%;top:22%;--tilt:-9deg}.word-film{left:24%;top:-12px;--tilt:-7deg}.word-ai{right:-3%;top:45%;color:var(--blue);--tilt:6deg}.word-mbti{left:-4%;top:48%;color:var(--blue);--tilt:-7deg}.word-art{left:-2%;bottom:21%;--tilt:-8deg}.word-romance{right:-3%;bottom:13%;font-size:17px;--tilt:8deg}
.collage-hint{position:relative;margin:0;font:18px/1.15 var(--hand);color:var(--red);text-align:right;padding-right:28px;transform:rotate(-3deg)}.collage-hint span{font-size:21px}.collage-hint svg{position:absolute;right:-3px;bottom:0;width:95px;height:72px;fill:none;stroke:var(--red);stroke-width:3;stroke-dasharray:5 4;transform:translateY(-30px)}
@media(hover:hover) and (pointer:fine){.collage-word{opacity:.23;color:transparent;transition:opacity .25s;-webkit-text-stroke:.7px #8d8273}.is-exploring .collage-word{opacity:.42;border-bottom:1px dashed #7b7265}.collage-word.is-revealed,.collage-word:focus-visible{opacity:1;color:var(--red);-webkit-text-stroke:0;border-color:transparent;animation:ink-show .45s both}.word-ai.is-revealed,.word-mbti.is-revealed{color:var(--blue)}.collage-word.is-revealed:hover{animation:ink-show .45s both,word-breathe 1.5s .45s ease-in-out infinite}}
.about-heading{display:flex;align-items:start;justify-content:space-between;gap:10px;padding-top:3px}.greeting{font-size:31px;min-height:45px;transform:rotate(-6deg)}.greeting>span{display:block}.red-asterisk{font:42px/1 var(--hand);color:var(--red);transform:rotate(11deg)}
.identity-lines{font:500 24px/1.5 var(--hand);margin:12px 0 18px;transform:rotate(-2deg)}.identity-lines>span{display:block;position:relative;width:fit-content}.identity-lines>span:first-child{color:var(--red)}.identity-lines>span:last-child{color:var(--blue)}.identity-lines>span::after{content:'';position:absolute;left:-2px;right:0;bottom:1px;height:1px;background:currentColor;transform:rotate(-2deg);opacity:.5}.identity-lines.is-writing>span{animation:ink-show .6s both}.identity-lines.is-writing>span:nth-child(1){animation-delay:.2s}.identity-lines.is-writing>span:nth-child(2){animation-delay:.65s}.identity-lines.is-writing>span:nth-child(3){animation-delay:1.1s}
.paper-tape{position:relative}.paper-tape::before,.scrap-photo:nth-child(3n)::before,.memory-photo::before{content:'';position:absolute;z-index:2;top:-12px;left:33%;width:86px;height:24px;background:url(assets/tape-beige.png) center/100% 100%;transform:rotate(-8deg);pointer-events:none}
.creative-note{display:block;width:100%;text-align:left;border:0;padding:12px 21px;background:var(--grain),#e7dfc7;transform:rotate(3deg);box-shadow:3px 7px 9px #34392f22;transition:transform .25s,box-shadow .25s}.creative-note:hover{transform:rotate(1deg) translateY(-4px);box-shadow:5px 12px 15px #34392f33}.creative-note-title{display:block;font:25px/1.25 var(--hand);color:var(--blue);margin:7px 0 8px}.creative-note-copy{display:block;font:14px/1.5 var(--hand)}.creative-note-process{display:block;margin-top:12px;padding-top:7px;border-top:1px dashed #b5ab90;font:12px/1.5 var(--hand);color:var(--muted)}.note-open{display:flex;justify-content:space-between;font:16px var(--hand);margin-top:7px;color:var(--red)}.note-open>span{font-size:24px}.about-contact{display:block;width:fit-content;max-width:100%;font:24px/1.3 var(--hand);color:var(--blue);margin-top:17px;transform:rotate(-3deg)}.about-contact>span{color:var(--red)}.page-signature{font-size:23px;margin:5px 0 0;transform:rotate(-6deg)}
.book-pagination{position:absolute;bottom:0;left:30px;right:30px;display:flex;align-items:center;justify-content:space-between;height:49px;z-index:4}.book-pagination>span{font-size:10px;letter-spacing:.12em;color:var(--muted)}.book-turn{display:flex;align-items:center;gap:15px;border:0;background:transparent;padding:0;color:var(--red);font:700 25px/1 var(--hand);transform:rotate(-4deg)}.book-turn>span{display:inline-block;width:82px;height:43px;background:url(assets/hand-arrow.svg) center/contain no-repeat;color:transparent;transition:transform .25s}.book-turn:hover>span{transform:rotate(10deg) scale(1.1)}.page-enter{animation:page-swish .5s ease-out}
.page-title{font:400 22px/1.2 var(--marker);color:var(--red);margin:7px 0 9px}.experience-list{list-style:none;margin:0;padding:0}.experience-list li+li{border-top:1px dashed #a8aea0}.experience-entry{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 8px;width:100%;border:0;background:transparent;text-align:left;padding:4px 0;}.experience-list li:nth-child(even) .experience-entry{padding-left:7px}.experience-entry h3{margin:0;font:700 18px/1.25 var(--hand)}.experience-role,.experience-quote{grid-column:1/-1}.experience-role{font-size:9px;color:var(--muted);line-height:1.3}.experience-quote{font:13px/1.3 var(--hand);margin:1px 0}.view-memory{grid-column:2;grid-row:1;font:14px/1.25 var(--hand);color:var(--blue)}.experience-entry:hover h3,.experience-entry[aria-pressed=true] h3,.experience-entry[aria-pressed=true] .view-memory{color:var(--red)}
.career-highlights{position:relative;border-top:1px dashed #999f92;margin-top:8px;padding-top:7px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 12px}.career-highlights>.eyebrow,.career-highlights h3{grid-column:1/-1}.career-highlights h3{font:20px var(--hand);margin:3px 0 7px;color:var(--blue)}.career-highlights>div{margin:4px 0}.career-highlights strong{display:block;white-space:nowrap;font:400 24px/1 var(--marker);color:var(--red);margin-bottom:8px}.career-highlights>div>span{display:block;font-size:9px;line-height:1.4}.directory-footnote{font:16px/1.5 var(--hand);color:var(--blue);margin:13px 0 0 12px}
.memory-placeholder{display:flex;height:95%;flex-direction:column;justify-content:center;align-items:start;padding:0 6px}.memory-placeholder .scribble{margin-left:8px}.memory-placeholder p{font:28px/1.8 var(--hand);margin:35px 0 25px}.memory-arrow{display:block;width:140px;height:80px;background:url(assets/hand-arrow.svg) center/contain no-repeat;font-size:0;transform:rotate(160deg);margin:20px 0 0 45px}
.memory-card{position:relative;height:100%;isolation:isolate;animation:page-swish .5s ease-out}.memory-card>.eyebrow:first-child{margin:0 60px 12px 0}.memory-number{position:absolute;right:-8px;top:-15px;font:400 57px var(--marker);color:var(--red);opacity:.7;z-index:-1}.memory-card h3{display:inline-block;font:700 26px/1.35 var(--hand);background:#f7f4e7;padding:3px 10px;box-shadow:2px 4px 0 #b5b6a6;margin:3px 0 5px}.memory-role{font-size:10px;color:var(--muted);margin:7px 0 13px}.memory-quote{position:relative;font:25px/1.35 var(--hand);color:var(--blue);margin:12px -5px 14px;padding-left:8px;z-index:2}.memory-quote::after{content:'';position:absolute;left:6px;bottom:-4px;width:65%;height:5px;border-top:2px solid var(--blue);border-bottom:1px solid var(--blue);border-radius:50%;}.fragment-label{font:17px var(--hand);color:var(--blue);margin-left:10px}.memory-fragments{font:15px/1.5 var(--hand);color:var(--blue);white-space:pre-line;margin:7px 0 0 13px;position:relative;z-index:2}
.memory-card>h3,.memory-card>.memory-role,.memory-card>.memory-quote,.memory-card>.fragment-label,.memory-card>.memory-fragments{position:relative;z-index:100}
.memory-photos{position:absolute;left:10px;right:0;height:150px;bottom:78px}
.memory-photos::before{content:'';position:absolute;top:-26px;left:42%;width:85px;height:55px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 85 55'%3E%3Cpath d='M4 5c40-9 3 35 40 20s-6 18 33 19M77 44L62 43M77 44L68 32' fill='none' stroke='%23344d7e' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.memory-photo{position:absolute;margin:0;width:max-content;padding:0;background:transparent;box-shadow:2px 4px 10px #00000026;left:0;top:0}
.memory-photo img{display:block;width:auto;max-width:none;height:125px;object-fit:contain}
.memory-photo:nth-child(2){left:84px;top:24px;z-index:1}
.memory-photo:nth-child(3){left:168px;top:8px;z-index:2}
.memory-photo:nth-child(4){left:252px;top:48px;z-index:3}.memory-photo:nth-child(4) img{height:100px}
.memory-card[data-experience=ths] .memory-photos{left:65px}
.memory-card[data-experience=hikvision] .memory-photos{left:36px}
.memory-card[data-experience=hikvision] .memory-photo:nth-child(2){left:154px}
.memory-card[data-experience=hikvision] .memory-photo:nth-child(3){left:238px}
.memory-photo:nth-child(even)::before,.scrap-photo:nth-child(3n+1)::after{content:'';position:absolute;right:12%;left:auto;top:-13px;width:20px;height:45px;background:url(assets/paperclip-red.png) center/contain no-repeat;transform:rotate(12deg);pointer-events:none}
.memory-card::after{content:'';position:absolute;left:0;right:0;bottom:31px;height:82px;background:var(--memory-doodle) center/100% 100% no-repeat;pointer-events:none}
.memory-watch{position:absolute;left:8px;bottom:3px;padding:0 0 1px 23px;border:0;border-bottom:2px solid var(--red);background:transparent;color:var(--red);font:20px/1.5 var(--hand);z-index:100}
.memory-watch::before{content:'';position:absolute;left:0;top:8px;width:16px;height:16px;background:var(--red);clip-path:polygon(3% 0,100% 46%,94% 58%,0 100%,6% 49%)}
.link-code{font-size:11px;color:var(--muted);margin:10px 0 0}.memory-card>.link-code{position:absolute;bottom:0;left:4px}
.memory-card[data-experience=netease]{--memory-doodle:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20324%2082%22%3E%3Cpath%20d%3D%22M17%2052V14l22-5v34M8%2052c0-9%2017-13%2017-4s-17%2013-17%204M30%2045c0-9%2017-13%2017-4s-17%2013-17%204M271%2020l20%2014-20%2014zM247%2061h57M255%2056v10M302%2012l7-6m-60%207-8-5%22%20fill%3D%22none%22%20stroke%3D%22%23344d7e%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E")}
.memory-card[data-experience=ths]{--memory-doodle:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20324%2082%22%3E%3Cpath%20d%3D%22M8%2062V12m0%2050h51M15%2048l10-13%2012%208%2017-28m-10%202%2010-2-1%2011M271%2010l12%2016%2013-16m-13%2016v32m-16-26h31m-31%2011h31%22%20fill%3D%22none%22%20stroke%3D%22%23344d7e%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E")}
.memory-card[data-experience=hikvision]{--memory-doodle:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20324%2082%22%3E%3Cpath%20d%3D%22M8%2020h46v31H8zM20%2020l4-9h15l4%209M29%2029c-14%200-14%2018%200%2018s14-18%200-18M273%2016h24v37h-24zM297%2025l15-8v38l-15-9M269%2065h33m-17-12v12%22%20fill%3D%22none%22%20stroke%3D%22%23344d7e%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E")}
.memory-card[data-experience=toi]{--memory-doodle:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20324%2082%22%3E%3Cpath%20d%3D%22M8%2013h15c-9%2014%2015%2014%208%200h18v15c-14-8-14%2015%200%209v17H31c9-14-15-14-8%200H8V37c14%208%2014-15%200-9zM276%2014h13c-8%2013%2013%2013%207%200h16v14c-13-8-13%2013%200%207v15h-16c8-13-13-13-7%200h-13V35c13%208%2013-13%200-7z%22%20fill%3D%22none%22%20stroke%3D%22%23344d7e%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E")}
.intro-book[data-page=background] .book-turn{transform:none}

.has-collage .book-spread,.has-collage .book-pagination{visibility:hidden}
.inline-collage{position:absolute;inset:0;z-index:5;overflow:hidden;animation:collage-arrive .25s ease}
.collage-toggle{position:absolute;left:14%;top:16%;border:0;background:#fffdf5de;color:var(--red);font:32px var(--marker);z-index:100;padding:0 8px}
.scrap-photo{position:absolute;margin:0;padding:7px 7px 18px;background:#fffdf5;box-shadow:3px 6px 9px #30342855;animation:photo-drop .65s var(--delay) cubic-bezier(.2,1.4,.45,1) both}
.scrap-photo:nth-of-type(n+4){box-shadow:5px 11px 15px #30342866}
.scrap-photo img{display:block;width:100%;height:var(--photo-height);object-fit:contain}
.scrap-photo.photo-upright{height:calc(var(--photo-height) + 25px)}
.photo-upright img{position:absolute;left:50%;top:calc(50% - 5.5px);width:var(--photo-height);height:var(--photo-width);max-width:none;transform:translate(-50%,-50%) rotate(90deg)}
.collage-caption{position:absolute;left:calc(39% + var(--caption-index)*7%);top:calc(42% - var(--caption-index)*15%);margin:0;padding:0 7px;background:#edece2d9;color:var(--blue);font:23px/1.3 var(--hand);max-width:36%;z-index:100;transform:rotate(calc(2deg - var(--caption-index)*3deg));pointer-events:none}
.collage-footer{position:absolute;bottom:15%;left:15%;padding:0 7px;background:#edece2de;font:24px var(--hand);color:var(--blue);margin:0;max-width:68%;z-index:100;pointer-events:none}
.collage-arrow{position:absolute;left:54%;top:40%;width:95px;height:48px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50'%3E%3Cpath d='M4 10c25 25 44-15 83 26M87 36l-19-4M87 36l-7-17' fill='none' stroke='%23344d7e' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;color:transparent;z-index:100;pointer-events:none}
.collage-dismiss{position:absolute;bottom:16px;left:42%;padding:4px 13px;border:1px dashed var(--blue);border-radius:7px;background:#edece2de;font:15px var(--hand);color:var(--blue);z-index:100;pointer-events:none}
.inline-collage[data-gallery=romanticism] .collage-caption + .collage-caption{left:64%;top:8%;max-width:30%}
.inline-collage.is-leaving{animation:collage-exit .65s both;pointer-events:none}.is-leaving .scrap-photo{animation:photo-fly .4s var(--delay) ease-in both}

.work-notebook{height:100%;display:flex;flex-direction:column}.folder-tabs{position:relative;z-index:4;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:6px 34px 0;height:75px;flex:none}.folder-tabs button{position:relative;align-self:end;background:var(--grain),#d4d4c8;border:1px solid #9d9e94;border-bottom:0;border-radius:12px 17px 0 0;box-shadow:3px -2px 4px #33372c22;min-height:52px;padding:6px 14px;text-align:left;font:400 23px/1.3 var(--hand);transform:rotate(-2deg);transition:transform .25s}.folder-tabs button:nth-child(even){transform:rotate(2deg);background-color:#dcd7c5}.folder-tabs button[aria-selected=true]{background-color:var(--paper);color:var(--red);min-height:63px;transform:translateY(2px);box-shadow:3px -5px 7px #34372b22}.folder-tabs button:hover{color:var(--red);translate:0 -3px}.folder-tabs button>span{display:block}.tab-en{font:10px/1.5 var(--type);letter-spacing:.13em}
.work-paper{position:relative;flex:1;min-height:0;padding:18px 36px 17px;display:flex;flex-direction:column}.archive-binding{position:absolute;left:12px;right:12px;bottom:-29px;height:32px;background:var(--grain),linear-gradient(#282e25,#12160f);border-top:1px dashed #96988988;z-index:4;pointer-events:none;box-shadow:-3px -4px 5px #0005}.archive-binding i{position:absolute;top:-7px;width:43px;height:19px;border:4px solid #9c9e94;border-top-color:#eff0e6;border-bottom-color:#5d665d;border-radius:50%;box-shadow:-3px -3px 4px #202b2266;transform:rotate(90deg)}.archive-binding i::before{content:'';position:absolute;left:8px;top:-12px;width:13px;height:13px;background:#0b100a;border-radius:50%;box-shadow:inset 2px 2px 3px #000;z-index:-1}.archive-binding i:nth-child(1){left:15%}.archive-binding i:nth-child(2){left:49%}.archive-binding i:nth-child(3){left:83%}
.work-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin:0 5px 19px;flex:none}.work-heading h2{position:relative;font:400 35px/1.3 var(--marker);color:var(--red);margin:3px 0 0;transform:rotate(-4deg)}.work-heading h2::after{content:'';position:absolute;left:-5px;right:-17px;bottom:-4px;border-bottom:3px solid var(--red);border-radius:50%;transform:rotate(-2deg)}.work-heading p{font:19px/1.5 var(--hand);max-width:280px;transform:rotate(3deg);color:var(--muted);margin:0}
.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;align-items:start;flex:1;min-height:0;padding-top:6px}.project-grid[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr));padding:6px 110px 0}.project-grid[data-count="1"]{grid-template-columns:330px;justify-content:center}
.project-card{min-width:0;position:relative;transform:rotate(-3deg);transition:transform .25s}.project-card:nth-child(even){transform:rotate(4deg)}.project-card:hover{transform:rotate(0) translateY(-4px)}.project-card:nth-child(2)::before{content:'';position:absolute;top:-9px;left:37%;width:72px;height:24px;background:url(assets/tape-beige.png) center/100% 100%;transform:rotate(-11deg);z-index:2;pointer-events:none}.project-open{display:block;width:100%;padding:0;border:0;background:transparent;text-align:left}.project-cover{display:block;width:100%;height:161px;object-fit:contain;border:8px solid #fffdf5;border-bottom-width:16px;background:#e1e1d4;box-shadow:3px 7px 9px #30352944}
.project-type{display:block;font:14px/1.5 var(--hand);color:var(--muted);margin:12px 0 5px}.project-open h3{font:700 24px/1.3 var(--hand);color:var(--ink);margin:0 0 7px}.project-role{font:16px/1.4 var(--hand);color:var(--red);display:block}.project-summary{font:16px/1.45 var(--hand);margin:9px 0 0;min-height:45px}.project-actions{border-top:1px dashed #999f91;margin-top:10px;padding:8px 0 0;display:flex;align-items:center;justify-content:space-between;gap:8px}.archive-open,.work-watch{font:16px/1.4 var(--hand);padding:0;background:transparent;border:0}.archive-open{color:var(--muted)}.work-watch{color:var(--red)}.pending-link{font:14px var(--hand);color:var(--muted)}
.work-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none;margin:12px 0 0;padding-top:8px;border-top:1px dashed #a1a798}.work-footer>.scribble{font-size:25px;transform:rotate(-3deg)}.work-pagination{display:flex;align-items:center;gap:20px}.work-pagination>span{font-size:11px;color:var(--muted)}#work-turn{position:relative;border:0;background:var(--grain),#efe5ca;box-shadow:3px 4px 5px #2d342b33;color:var(--red);font:700 26px var(--marker);padding:3px 12px;transform:rotate(-3deg);animation:arrow-float 3s ease-in-out infinite}#work-turn::before{content:'';position:absolute;top:-7px;left:26%;width:64px;height:16px;background:url(assets/tape-beige.png) center/100% 100%;transform:rotate(9deg)}#work-turn span{display:inline-block;width:82px;height:32px;vertical-align:middle;background:url(assets/hand-arrow.svg) center/contain no-repeat;color:transparent}
.site-footer{position:absolute;left:68px;right:68px;bottom:0;height:21px;display:flex;align-items:center;gap:20px;font-size:10px;color:var(--muted)}.footer-mark{font:700 23px var(--hand);color:var(--red)}.site-footer>span:last-child{margin-left:auto}
dialog{position:fixed;left:50%;top:50%;margin:0;padding:0;max-width:none;max-height:none;overflow:hidden;color:var(--ink);transform:translate(-50%,-50%) scale(var(--scene-scale,1));transform-origin:center}dialog::backdrop{background:#28332618}.dialog-close{position:absolute;top:12px;right:28px;z-index:6;border:0;background:transparent;color:var(--red);font:700 27px var(--hand);padding:5px;transform:rotate(-6deg)}.dialog-close>span{font-size:33px;margin-left:8px}.dialog-close:hover{color:var(--blue)}
.scrapbook-dialog.notes-mode{width:540px;height:710px;padding:0;background:transparent;border:0;box-shadow:none;overflow:visible}.notes-mode .dialog-close{display:none}
.notes-stage{position:relative;margin:30px 25px 45px;perspective:1000px}.note-underlay{position:absolute;inset:9px -8px -9px 10px;background:var(--grain),#ded5bb;transform:rotate(3deg);box-shadow:3px 5px 8px #20281d33}.note-underlay:nth-child(2){inset:18px 4px -18px -5px;background-color:#d2c6a7;transform:rotate(-5deg)}
.note-sheet{position:relative;padding:37px 33px 58px;min-height:515px;background:var(--grain),#ece2c7;box-shadow:5px 13px 20px #20271c55;transform:rotate(-2deg);transform-origin:top left;animation:note-arrive .6s cubic-bezier(.25,1.65,.45,1);touch-action:auto}.note-sheet::after{content:'';position:absolute;bottom:0;right:0;width:var(--curl,62px);height:var(--curl,62px);background:linear-gradient(135deg,transparent 46%,#b3a78766 49%,#faf1d6 53%,#ded0a5 77%,transparent 80%);filter:drop-shadow(-3px -3px 3px #22271d22);transition:width .2s,height .2s;pointer-events:none}
.note-sheet:has(.tear-handle:hover)::after{--curl:91px}.note-sheet.is-dragging{animation:none;transition:none;transform:translate(var(--drag-x,0),var(--drag-y,0)) rotate(var(--drag-angle,-2deg)) skewY(var(--drag-skew,0deg));border-radius:0 0 25% 0}.note-sheet.is-dragging::after{transition:none}.note-sheet.tearing{animation:tear-away .65s ease-in both;pointer-events:none}
.note-date{font:24px var(--hand);color:var(--blue)}.note-sheet h2{font:400 32px/1.3 var(--marker);margin:26px 0;color:var(--red);transform:rotate(-3deg)}.note-sheet p{font:22px/1.8 var(--hand);color:var(--blue);white-space:pre-line;margin:0 0 23px}.note-source{display:block;font:16px var(--hand);color:var(--red)}.tear-handle{position:absolute;right:0;bottom:0;width:86px;height:86px;border:0;padding:14px 24px 30px 8px;background:transparent;color:var(--red);font:35px var(--hand);cursor:url(assets/pinch.svg) 18 18,grab;touch-action:none;z-index:2}.tear-handle:active{cursor:grabbing}.tear-hint{display:block;margin-top:34px;padding-right:62px;font:17px/1.5 var(--hand);color:var(--muted)}.notes-counter{position:relative;display:block;text-align:center;margin-top:30px;font:22px var(--hand);color:var(--red)}

.notes-stage{margin:30px 25px 45px}.note-sheet{height:590px;min-height:0;overflow:hidden}.note-sheet h2{margin:19px 0;font-size:30px}.note-sheet p{font-size:21px;line-height:1.6}.tear-hint{margin-top:20px}.notes-counter{margin-top:24px}
.notebook{border:18px solid #242721;border-radius:9px;background:url(assets/notebook-background.png) center/100% 100%;box-shadow:7px 17px 26px #20241c66}.project-dialog{width:1150px;height:660px}.project-spread{height:100%}.project-dialog .binding i:nth-child(1){top:23%}.project-dialog .binding i:nth-child(2){top:50%}.project-dialog .binding i:nth-child(3){top:77%}
.detail-visual,.detail-copy{padding:57px 32px 25px}
.detail-media{position:relative;margin-top:35px}
.detail-media>img,.detail-media>video{display:block;width:100%;height:290px;object-fit:contain;background:#e0e0d4;border:9px solid #fffdf5;box-shadow:4px 8px 12px #20271c44}
.detail-media>video{background:#131813}
.detail-play{position:absolute;inset:0;margin:auto;width:fit-content;height:57px;padding:0 23px;border:1px solid #e8e4cf;background:#263024c9;color:#f5efdb;font:22px var(--hand)}
.detail-copy h2{position:relative;width:fit-content;max-width:100%;font:400 28px/1.35 var(--hand);color:var(--red);margin:15px 0 18px;padding:10px 16px;background:transparent;box-shadow:4px 7px 7px #24292255;transform:rotate(-1deg);isolation:isolate;overflow:visible}
.detail-copy h2::after{content:'';position:absolute;inset:0;z-index:-1;background:var(--grain),#f8f3df;clip-path:polygon(0 3%,6% 0,14% 3%,23% 1%,34% 3%,47% 0,63% 2%,78% 0,91% 3%,100% 1%,99% 96%,92% 99%,76% 96%,65% 100%,50% 97%,38% 100%,25% 97%,12% 100%,1% 97%)}
.detail-copy h2::before{top:-5px;left:35%;width:100px;height:21px;opacity:.8;transform:rotate(-9deg)}
.detail-copy>p{font:23px/1.45 var(--hand);color:var(--blue);margin:0 0 17px}
.detail-copy dl{border-top:1px dashed #9ca291;padding-top:14px;margin:0;font:18px/1.45 var(--hand)}
.detail-copy dl>div{display:flex;align-items:baseline;gap:8px;margin-bottom:13px}
.detail-copy dt{flex:none;white-space:nowrap;color:var(--muted)}
.detail-copy dd{flex:1;min-width:0;margin:0;font-weight:400}
.detail-copy dl>div:last-child{color:var(--blue);font-size:16px;line-height:1.4}
.project-watch{display:inline-block;margin-top:18px;font:21px var(--hand);color:var(--red);border-bottom:1px solid var(--red)}
.archive-signature{display:block;margin-top:14px;font-size:25px}
.video-notice{font:14px/1.5 var(--hand);color:var(--muted);margin-top:8px}

.album-view{height:100%;background:var(--grain),var(--grid),var(--paper);background-size:180px 180px,22px 22px,22px 22px,auto;padding:23px 28px}.album-view h2{font:30px/1.2 var(--hand);color:var(--blue);margin:5px 100px 32px 0;transform:rotate(-2deg)}.album-pages{display:grid;grid-template-columns:1fr 1fr;gap:56px;height:440px}.album-page{margin:0;position:relative;min-width:0;padding:0 6px}.album-page video{display:block;width:100%;height:360px;object-fit:contain;background:#131813;border:9px solid #fffdf5;box-shadow:5px 10px 15px #272b2433}.album-page:nth-child(2)::before{width:21px;height:48px;background:url(assets/paperclip-red.png) center/contain no-repeat;left:auto;right:12%}.album-page figcaption{font:23px var(--hand);color:var(--blue);margin-top:13px;transform:rotate(-3deg)}.album-original{font:16px var(--hand);color:var(--muted)}.album-end{display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--red)}.album-end .scribble{font-size:31px;transform:rotate(-7deg)}.album-end p{font:23px var(--hand)}.album-pagination{display:flex;align-items:center;justify-content:space-between;margin-top:15px}.album-pagination button{position:relative;border:0;background:var(--grain),#e9dfc6;box-shadow:3px 4px 5px #30352944;padding:5px 17px;color:var(--red);font:700 27px var(--marker);transform:rotate(-3deg)}.album-pagination button:disabled{opacity:.35;cursor:default}.album-pagination>span{font:21px var(--hand);color:var(--blue)}
@keyframes ink-show{0%{opacity:0;scale:.8;filter:blur(2px)}65%{opacity:1;scale:1.1;filter:blur(0)}100%{opacity:1;scale:1}}
@keyframes word-breathe{0%,100%{translate:0;rotate:-2deg}50%{translate:0 -4px;rotate:2deg}}
@keyframes page-swish{from{opacity:0;transform:perspective(1100px) rotateY(-9deg) translateX(12px)}to{opacity:1;transform:none}}
@keyframes paper-unfold{0%{transform:perspective(1000px) rotateX(65deg) rotate(-8deg) scaleX(.25)}70%{transform:perspective(1000px) rotateX(-5deg) rotate(2deg) scaleX(1.03)}100%{transform:rotate(-1deg)}}
@keyframes note-arrive{0%{transform:translateY(-12px) rotate(-5deg) scale(.96)}65%{transform:translateY(3px) rotate(-1deg) scale(1.01)}100%{transform:rotate(-2deg)}}
@keyframes tear-away{0%{transform:translate(var(--drag-x,0),var(--drag-y,0)) rotate(var(--drag-angle,-2deg)) skewY(var(--drag-skew,0deg))}45%{transform:translate(-35px,-70px) rotate(-22deg) skewY(16deg);border-radius:0 0 50% 0}100%{transform:translate(-25vw,110vh) rotate(-70deg) skewY(30deg);border-radius:0 0 70% 0}}
@keyframes book-pullback{0%,100%{scale:1;filter:brightness(1)}45%{scale:.82;filter:brightness(.84)}}
@keyframes ring-glint{45%{filter:brightness(2.2);box-shadow:0 0 9px #f9f5cb88}}

@keyframes portrait-float{0%,100%{translate:0}50%{translate:0 -3px}}
@keyframes arrow-float{0%,100%{translate:0}50%{translate:0 -2px}}
@keyframes photo-drop{0%{opacity:0;transform:translate(var(--from-x),var(--from-y)) scale(.12)}70%{opacity:1;transform:translateY(6px) scale(1.03)}100%{transform:none}}
@keyframes photo-fly{to{opacity:0;transform:translate(var(--from-x),var(--from-y)) scale(.1)}}
@keyframes collage-arrive{from{opacity:0}to{opacity:1}}
@keyframes collage-exit{0%,75%{opacity:1}100%{opacity:0}}
@keyframes about-depart{0%,60%{opacity:1}100%{opacity:0}}
@keyframes right-fold{to{transform:perspective(1000px) rotateY(-110deg) translate(150px,-60px);opacity:0}}
@keyframes left-expand{to{transform:scaleX(2);opacity:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}