*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;background:#fff;color:#111;font-family:Arial,"PingFang SC",sans-serif}body{position:relative;width:1200px;min-height:760px;margin:max(0px,calc((100svh - 760px)/2)) auto 0;overflow:visible}header{position:absolute;left:40px;top:32px;z-index:10}header img{width:170px;height:auto}main{width:1200px;height:760px;min-height:760px;position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center;overflow:hidden}.stage{width:1200px;height:760px;position:relative;flex-shrink:0;transform:none;transform-origin:center}.mushroom{position:absolute;width:730px;height:730px;left:235px;top:10px;object-fit:contain;pointer-events:none;opacity:.82}.headline{position:absolute;width:406px;left:397px;top:120px;transition:transform .6s,opacity .35s;pointer-events:none}.block-position{position:absolute;left:440px;top:245px;width:320px;height:311px;z-index:4;transition:transform .68s cubic-bezier(.22,1,.36,1)}.block{display:block;padding:0;border:0;background:none;cursor:pointer;width:100%;height:100%;-webkit-tap-highlight-color:transparent;outline-offset:8px;border-radius:42px}.block:focus-visible{outline:3px solid #78d434}.block img{width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 15px 14px #80623028) drop-shadow(0 28px 30px #7c60221c)}.reaction{position:absolute;left:497px;top:568px;width:206px;height:40px;z-index:5}.wow,.oh{position:absolute;left:50%;top:0;opacity:0;transform:translate(-50%,8px) scale(.94);transition:opacity .25s,transform .38s;pointer-events:none}.wow{font-family:"Comic Sans MS","Marker Felt",cursive;font-size:32px;font-style:italic;font-weight:bold;white-space:nowrap;line-height:1}.wow span{color:#ff2626;font-size:40px;display:inline-block;transform:rotate(13deg);margin-left:6px;text-shadow:2px 3px 0 #ddd}.oh{width:145px;top:5px}.stage.is-wow:not(.is-open) .wow,.stage.is-open.has-landed .oh{opacity:1;transform:translate(-50%,0) scale(1)}.character{position:absolute;width:86px;left:557px;top:619px;z-index:4;transform-origin:center bottom}.ground{position:absolute;left:534px;top:692px;width:132px;height:27px;object-fit:cover;object-position:top}.ready{position:absolute;left:514px;top:706px;width:172px;z-index:5}.badge{position:absolute;right:32px;bottom:30px;width:48px;filter:drop-shadow(0 3px 2px #0002);transform:rotate(0deg)}.cards{position:absolute;left:600px;top:410px;z-index:3}.card{width:var(--w);height:var(--h);position:absolute;left:calc(var(--w)/-2);top:calc(var(--h)/-2);padding:5px;background:white;border:1px solid #00000008;border-radius:16px;box-shadow:0 4px 8px #342c2b09,0 16px 32px #342c2b1c;opacity:0;transform:translate(0,65px) scale(.12);visibility:hidden;will-change:transform,opacity}.art{height:100%;border-radius:12px;overflow:hidden;position:relative;background:#fff}.art img{position:absolute;object-fit:contain}.art1{background:#e4edce}.art2{background:#ddd5f1}.art3{background:#fffaf7}.art4{background:#e8f1dc}.art5{background:#d8e9ee}.cover-character{width:70%;height:74%;left:15%;top:13%}.cover-ground{width:110%;height:20%;left:-5%;bottom:-4%}.cover-open{width:76%;left:12%;top:16%}.cover-block{width:72%;height:67%;left:14%;top:30%}.cover-mushroom{width:140%;height:105%;left:-20%;top:3%;mix-blend-mode:multiply}.cover-name{width:76%;left:12%;top:14%}.cover-portfolio{width:78%;left:11%;top:13%}.art4 .cover-character{width:54%;height:60%;left:23%;top:33%}.cover-badge{width:67%;height:75%;left:16.5%;top:12.5%}.stage.is-open .headline{opacity:0;transform:translateY(-45px) scale(.9)}.stage.is-open .block-position{transform:translateY(65px) scale(.68)}.stage.is-open .card{visibility:visible}.stage.is-open .card:hover{filter:brightness(1.025);box-shadow:0 15px 30px #342c2b25}.stage.is-open .mushroom{opacity:.64;transition:opacity .7s}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Shared navigation keeps the same position on every fixed-size page. */
.site-nav{position:absolute;right:28px;top:30px;z-index:30;display:flex;align-items:center;gap:4px}.site-nav a{position:relative;height:42px;padding:11px 14px;display:flex;align-items:center;justify-content:center;text-decoration:none;background:none;border:0;outline:none}.site-nav img{display:block;height:16px;width:auto;pointer-events:none}.site-nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:3px;background:#01ff01;opacity:0;transform:scaleX(.8);transition:opacity .16s ease,transform .2s ease;transform-origin:center}.site-nav a:hover::after,.site-nav a:focus-visible::after{opacity:1;transform:scaleX(1)}.card{transition:scale .3s cubic-bezier(.2,.8,.2,1),translate .3s,box-shadow .3s;isolation:isolate}.card-link{display:block;width:100%;height:100%;border-radius:12px;text-decoration:none;outline:none}.stage.is-open .card:hover,.stage.is-open .card:focus-within{scale:1.13;translate:0 -12px;z-index:20;filter:none;box-shadow:0 8px 16px #342c2b12,0 24px 44px #342c2b30}.card:focus-within{outline:2px solid #93bd72;outline-offset:4px}.cards{pointer-events:none}.stage.is-open .card{pointer-events:auto}.stage.is-open .cards:has(.card:hover),.stage.is-open .cards:has(.card:focus-within){z-index:8}.stage.is-busy .card{pointer-events:none}.chapter{display:block;padding:126px 100px 80px}.chapter h1{position:relative;margin:0;text-align:center;height:54px;z-index:1}.chapter h1 img{height:34px;width:auto}.chapter-mushroom{position:absolute;width:620px;height:620px;left:290px;top:96px;opacity:.65;pointer-events:none}.chapter-character{position:absolute;width:160px;height:auto;left:520px;top:405px}.chapter-ground{position:absolute;left:490px;top:551px;width:220px;height:47px;object-fit:cover;object-position:top}.work-grid{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;max-width:950px;margin:58px auto 0}.work-tile{display:block;width:250px;height:250px;padding:6px;border-radius:18px;background:#fff;box-shadow:0 10px 30px #342c2b15;transition:transform .25s,box-shadow .25s}.work-tile:nth-child(odd){height:280px}.work-tile:hover,.work-tile:focus-visible{transform:translateY(-7px);box-shadow:0 20px 36px #342c2b25;outline:2px solid #d8e6ce}.works-chapter{height:auto;min-height:880px;overflow:visible}.work-detail{width:410px;height:520px;margin:4px auto 0;padding:8px;border-radius:24px;background:white;box-shadow:0 16px 45px #342c2b20}.work-detail .art{border-radius:18px}

.stage.is-open .cards{z-index:6}.card.c1,.card.c5{z-index:1}.card.c2,.card.c4{z-index:2}.card.c3{z-index:3}
@keyframes open-it-breathe{0%,100%{scale:1;opacity:1}50%{scale:1.025;opacity:.78}}
.stage.is-idle:not(.is-open):not(.is-busy) .headline{animation:open-it-breathe 3.8s ease-in-out infinite;transform-origin:50% 55%}
@media(prefers-reduced-motion:reduce){.stage .headline{animation:none!important}}

/* Inset the artwork while retaining the established outer card geometry. */
.stage .card{padding:5px;box-shadow:0 3px 6px #342c2b1f,0 12px 22px #342c2b29,0 24px 42px #342c2b21}
.stage.is-open .card:hover,.stage.is-open .card:focus-within{box-shadow:0 5px 10px #342c2b24,0 18px 30px #342c2b33,0 34px 56px #342c2b2b}

.stage.is-open:not(.is-busy) .card.c3{scale:1.08;z-index:4}
.stage.is-open:not(.is-busy) .card.c3:hover,.stage.is-open:not(.is-busy) .card.c3:focus-within{scale:1.16;z-index:20}
.profile-entry-card{position:fixed;z-index:100;pointer-events:none;transform-origin:center;will-change:transform,opacity}

/* Shared bottom hint: use this class on future chapters too. */
.bio-scroll,.exp-scroll,.chapter-scroll-hint{animation:scroll-hint 2s ease-in-out infinite}
.bio-scroll:hover,.exp-scroll:hover,.chapter-scroll-hint:hover{animation-play-state:paused}
@keyframes scroll-hint{0%,100%{transform:translateY(0);opacity:.8}55%{transform:translateY(7px);opacity:1}}
@media(prefers-reduced-motion:reduce){.bio-scroll,.exp-scroll,.chapter-scroll-hint{animation:none!important}}

.site-nav a[aria-current="page"]::after{opacity:1;transform:scaleX(1)}

.contact-card-label{position:absolute;left:35%;top:81%;width:30%;height:12%;display:flex;align-items:center;justify-content:center;background:#9305d2;color:#fff5e3;font:900 20px/1 "PingFang SC",sans-serif;pointer-events:none}

/* A subtle canvas boundary against the white browser surround. */
:root{--portfolio-canvas:#f1f1f1}
body{background:var(--portfolio-canvas)}

/* Remove white mattes from decorative overlays on the tinted canvas. */
.mushroom,.chapter-mushroom,.headline,.bio-scroll,.exp-scroll,.chapter-scroll-hint,.brand-scroll,.category-next{mix-blend-mode:multiply}
/* Isolated animation scenes need an explicit backdrop for matte blending. */
.experience-scene,.works-scene{background:var(--portfolio-canvas)}