:root{
  color-scheme:dark;
  --bg:#141720;--paper:#f7f0e9;--muted:#c6c4cf;
  --display-font:'Oxanium','Trebuchet MS',sans-serif;
  --section-heading-size:clamp(33px,3.1vw,49px);
  --hero-heading-size:clamp(28px,3.9vw,63px);
  --body-font:'IBM Plex Sans',system-ui,sans-serif;
  --mono-font:'IBM Plex Mono',ui-monospace,monospace;
  --yellow:#ffcb68;--pink:#ff9cb3;--green:#b4fb65;--lilac:#d3b8ff;
  /* Action controls share the same 2px outline and gradient fill.
     Artwork-as-buttons is intentionally exempt. */
  --action-fill:linear-gradient(135deg,#73506b 0%,#51456b 52%,#2f5167 100%);
  --action-fill-hover:linear-gradient(135deg,#93657f 0%,#695484 52%,#397085 100%);
  --action-border:rgba(255,228,246,.75);
  --action-border-hover:#ffda8e;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;overflow-x:clip;background:var(--bg);color:var(--paper);font:400 16px/1.55 var(--body-font);-webkit-font-smoothing:antialiased}
button,input,a{ -webkit-tap-highlight-color:transparent}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--yellow);outline-offset:5px}
button{font:inherit;cursor:pointer}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;z-index:999;top:-90px;left:20px;padding:12px 16px;background:var(--action-fill);color:#fff;border:2px solid var(--action-border);border-radius:8px}
.skip-link:focus{top:14px}
.reading-progress{position:fixed;top:0;left:0;width:100%;height:2px;z-index:200;background:linear-gradient(90deg,#e9a13c,#ff5e99,#b1fc52);transform:scaleX(var(--scroll-progress,0));transform-origin:left;pointer-events:none}
/* The navigation is purposefully understated. The artwork is the homepage. */
.site-header{position:sticky;top:0;z-index:150;background:rgba(18,20,28,.88);border-bottom:1px solid rgba(255,255,255,.09);backdrop-filter:blur(15px)}
.header-inner{width:min(100%,1680px);margin:auto;padding:0 clamp(18px,3vw,55px);height:74px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;text-decoration:none;font:800 23px/1 var(--display-font);letter-spacing:-.035em}
.brand img{width:34px;height:34px;border-radius:8px;object-fit:cover}
.brand-dot{color:#ff9bb4}
.site-nav{display:flex;align-items:center;gap:clamp(10px,2.4vw,38px)}
.site-nav a{font:700 clamp(11px,1.15vw,14px)/1 var(--display-font);text-decoration:none;color:#c9cbd0;letter-spacing:-.01em;transition:color .2s}
.site-nav a:hover,.site-nav a[aria-current="location"]{color:var(--yellow)}
.scene{position:relative;isolation:isolate;overflow:hidden;scroll-margin-top:74px;background:var(--bg)}
.scene-background{position:absolute;display:block;z-index:-1;pointer-events:none;user-select:none;object-fit:contain;max-width:none}
.parallax-layer{--motion-y:0px;--motion-x:0px;}
/* Homepage is a free-form illustrated map, not four uniform cards. */
.hero{min-height:min(970px,calc(100svh - 74px));height:clamp(700px,56.2vw,920px)}
.hero-particles{width:min(1580px,114vw);height:auto;max-height:none;left:50%;top:48%;transform:translate3d(-50%,calc(-50% + var(--motion-y)),0);opacity:.96}
.hero-stage{height:100%;width:min(100%,1620px);position:relative;margin-inline:auto}
.hero-choice{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;isolation:isolate;transform:translate3d(var(--motion-x),var(--motion-y),0);transition:filter .24s}
.hero-choice img{display:block;object-fit:contain;width:100%;height:auto;filter:drop-shadow(0 13px 18px rgba(0,0,0,.17));transition:transform .35s cubic-bezier(.2,.6,.25,1),filter .35s}
.hero-choice:hover img,.hero-choice:focus-visible img{transform:translateY(-10px) scale(1.025);filter:drop-shadow(0 19px 25px rgba(0,0,0,.32))}
.hero-word{font:800 var(--hero-heading-size)/.99 var(--display-font);text-transform:lowercase;letter-spacing:-.035em;white-space:nowrap;user-select:none;transition:filter .25s,transform .25s}
.hero-choice:hover .hero-word,.hero-choice:focus-visible .hero-word{transform:translateY(-3px)}
.word-profession{color:#fff1b5;text-shadow:0 0 8px #eec763,0 0 23px #dca73a,0 0 40px rgba(255,194,41,.32)}
.word-community{color:#ffe18e;text-shadow:0 0 9px #dfba36,0 0 23px #bd8512,0 0 42px rgba(255,193,49,.3)}
.word-projects{color:#b6ff69;text-shadow:0 0 8px #82cf33,0 0 22px #55a600,0 0 40px rgba(140,241,65,.3)}
.word-hobbies{color:#ffc1c2;text-shadow:0 0 9px #fb7e9f,0 0 25px #eb6286,0 0 38px rgba(236,90,127,.37)}
.hero-profession{width:28%;left:2%;top:22%}.hero-profession .hero-word{margin-top:4px}
.hero-community{width:26%;left:40.5%;top:4.4%;display:block}.hero-community .hero-word{position:absolute;right:calc(100% + 12px);top:0;margin:0;text-align:right}
.hero-projects{width:24%;left:37%;top:54%;}.hero-projects img{width:82%}.hero-projects .hero-word{position:absolute;bottom:0;left:98%}
.hero-hobbies{width:25%;right:2.5%;top:10%}.hero-hobbies .hero-word{margin-top:5px}
.hero-choice:focus-visible{outline:none}.hero-choice:focus-visible img{filter:drop-shadow(0 0 12px var(--yellow))}
/* All below-the-fold compositions use real artwork and interactive HTML above it. */
.feature-scene{min-height:clamp(720px,60vw,1030px);padding:clamp(80px,8vw,150px) clamp(19px,4vw,60px);display:grid;place-items:center}
.scene-paint{width:min(1750px,115vw);height:auto;left:50%;top:50%;transform:translate3d(-50%,calc(-50% + var(--motion-y)),0)}
.scene-inner{width:min(100%,1400px);margin:auto;position:relative;z-index:1;display:grid;align-items:center}
.profession-layout{grid-template-columns:minmax(0,1.12fr) minmax(0,.9fr);gap:clamp(30px,4.1vw,76px)}
.profession-panel{grid-column:1;grid-row:1}.profession-photo{grid-column:2;grid-row:1}
.profession-photo{display:flex;justify-content:center;align-items:center;transform:translate3d(0,var(--motion-y),0)}
.profession-photo img{width:min(100%,510px);max-height:725px;object-fit:contain;display:block;filter:drop-shadow(0 25px 40px rgba(0,0,0,.3))}
.feature-panel{padding:clamp(25px,3vw,48px);background:linear-gradient(rgba(21,22,31,.95),rgba(21,22,31,.95)) padding-box,var(--panel-outline,linear-gradient(120deg,#e5a93b,#c98732)) border-box;border:7px solid transparent;border-radius:24px;position:relative;box-shadow:0 23px 70px rgba(2,3,7,.26)}
/* The outline is a background layer confined to the border. It must not tint the text panel. */
.feature-panel::before{content:none}
.profession-panel{--panel-outline:linear-gradient(125deg,#ffd36b,#b8792f)}
.community-panel{--panel-outline:linear-gradient(155deg,#61239f,#943bba 45%,#f1d64c 100%)}
.section-kicker{margin:0 0 14px;font:600 12px/1.3 var(--mono-font);letter-spacing:.025em;color:#eac37b}
.community-panel .section-kicker{color:#f69dbc}
.feature-panel h2{margin:0 0 18px;font:800 var(--section-heading-size)/1 var(--display-font);letter-spacing:-.05em}
.feature-lede{margin:0 0 17px;font:700 clamp(19px,2vw,29px)/1.31 var(--body-font);letter-spacing:-.025em}
.feature-copy{color:#d1ced8;font-size:clamp(14px,1.2vw,17px);line-height:1.64;margin:0}
.career-list{padding:0;margin:26px 0 10px}
.career-list>div{display:grid;grid-template-columns:minmax(78px,110px) 1fr;align-items:baseline;border-top:1px solid rgba(255,255,255,.16);padding:16px 0;gap:12px}
.career-list dt{font:600 11px/1.4 var(--mono-font);color:#eabb66;text-transform:uppercase;letter-spacing:.04em}
.career-list dd{margin:0;display:flex;flex-direction:column}
.career-list strong{font-size:17px}.career-list dd span{font-size:13px;color:#c5c3cb}
.feature-links{display:flex;gap:15px;margin-top:10px}
.social-icon-link{display:inline-grid;width:38px;height:38px;place-items:center;border:2px solid var(--action-border);border-radius:9px;background:var(--action-fill);transition:background .2s,border-color .2s}
.social-icon-link:hover{border-color:var(--action-border-hover);background:var(--action-fill-hover)}
.social-svg{display:block;width:19px;height:19px;fill:currentColor}
.community-layout{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(8px,1.2vw,24px)}
.community-panel{position:relative;left:clamp(-75px,-4vw,-28px);max-width:600px}
.community-photo{height:100%;display:flex;align-items:end;justify-content:center;transform:translate3d(0,var(--motion-y),0)}
.community-photo img{width:min(125%,825px);height:auto;max-width:none;max-height:1090px;object-fit:contain;filter:drop-shadow(0 20px 30px rgba(0,0,0,.2))}
.community-links{margin-top:22px;display:grid}
.community-links a{display:flex;gap:16px;align-items:center;text-decoration:none;border-top:1px solid rgba(255,255,255,.16);padding:14px 0}
.community-links a:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.community-links a:hover strong{color:#ffc46f}.community-links img{width:60px;height:60px;border-radius:9px;object-fit:contain;flex:none}
.community-links strong{font-size:17px;display:block;transition:color .2s}
.community-links small{font-size:12px;color:#c5c3d1;display:block;margin-top:2px}
/* Floating project badges retain their uneven original composition. */
.scene-projects{min-height:880px;padding-block:70px 95px}
.scene-projects .scene-paint{top:53%;width:min(1700px,112vw)}
.project-stage{height:765px;display:block;width:min(100%,1460px)}
.projects-intro{position:absolute;left:3%;top:0;width:34%;z-index:2;display:flex;gap:8px;flex-direction:column}
.projects-intro h2{margin:0;font:800 var(--section-heading-size)/1 var(--display-font);letter-spacing:-.05em}
.projects-intro p{font-size:14px;line-height:1.5;color:#d9cfd6;margin:0;max-width:330px}
.project-item{position:absolute;z-index:2;filter:drop-shadow(0 16px 23px rgba(0,0,0,.2));transition:filter .28s}
.project-item:focus-within,.project-item:hover,.project-item.is-open{z-index:20}
.project-dpg{left:7%;top:6%;width:37%}
.project-froot{right:3%;top:5%;width:38%}
.project-ryu{left:34%;top:56%;width:35%}
/* Transparent whitespace at the top of the exported Ryu badge should not act as a hover target. */
.project-ryu .project-trigger{clip-path:inset(13% 0 3% 0)}
.project-trigger{display:block;width:100%;padding:0;background:transparent;border:0;appearance:none;position:relative}
.project-trigger img{width:100%;height:auto;display:block;object-fit:contain;transition:transform .4s ease,filter .4s}
.project-trigger:hover img,.project-trigger:focus-visible img,.project-item.is-open .project-trigger img{transform:translateY(-12px) rotate(-1.2deg) scale(1.035);filter:drop-shadow(0 15px 24px rgba(0,0,0,.28))}
.project-froot .project-trigger:hover img,.project-froot .project-trigger:focus-visible img{transform:translateY(-12px) rotate(1.2deg) scale(1.035)}
.project-detail{position:absolute;left:50%;right:auto;top:calc(100% - 20px);z-index:4;width:max-content;max-width:min(315px,calc(100vw - 32px));translate:-50% 0;--panel-outline:linear-gradient(125deg,#ffd36b,#b8792f);background:linear-gradient(rgba(21,22,31,.97),rgba(21,22,31,.97)) padding-box,var(--panel-outline) border-box;border:7px solid transparent;border-radius:24px;padding:15px 17px;box-shadow:0 14px 40px rgba(0,0,0,.4);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px);transition:transform .18s ease}
.project-froot .project-detail{--panel-outline:linear-gradient(145deg,#e4e900,#81b341)}
.project-ryu .project-detail{top:auto;bottom:88%;--panel-outline:linear-gradient(135deg,#fffefa,#a6a9c4)}
.project-item.is-open .project-detail{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.project-detail h3{margin:0 0 4px;font:800 clamp(19px,2.2vw,26px)/1.15 var(--display-font)}
.project-detail p{font-size:13px;color:#d3cdd6;margin:0 0 13px;line-height:1.4}
.project-detail a{display:inline-flex;align-items:center;justify-content:center;min-height:36px;font:700 12px/1.4 var(--display-font);background:var(--action-fill);color:#fff;border:2px solid var(--action-border);padding:8px 13px;border-radius:8px;text-decoration:none;transition:background .2s,border-color .2s}
.project-detail a:hover,.project-detail a:focus-visible{background:var(--action-fill-hover);border-color:var(--action-border-hover)}
/* Hobbies artwork is the interaction: no extra generic photo cards. */
.scene-hobbies{min-height:820px;padding-block:62px 90px}
.scene-hobbies .scene-paint{width:min(1710px,110vw);top:48%}
.hobbies-content{position:relative;z-index:1;width:min(100%,1470px);margin-inline:auto}
.hobbies-layout{height:740px;display:block;width:100%;margin-top:-100px}
/* Heading and original tagline are centered in their own row. The gallery
   artwork retains its Canva-relative placement below, with no overlap. */
.hobbies-intro{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;margin:0 auto clamp(18px,2vw,30px);padding-inline:12px;translate:0 -30px}
.hobbies-intro h2{margin:0;font:800 var(--section-heading-size)/1 var(--display-font);letter-spacing:-.05em}
.hobbies-intro p{margin:0;font:400 14px/1.5 var(--body-font);color:#d9cfd6}
.hobby-choice{position:absolute;appearance:none;border:0;background:transparent;padding:0;display:flex;flex-direction:column;align-items:center;transition:filter .25s;transform:translateZ(0)}
.hobby-choice:hover img,.hobby-choice:focus-visible img{transform:translateY(-12px) scale(1.025);filter:drop-shadow(0 18px 24px rgba(0,0,0,.26))}
.hobby-choice img{width:100%;height:auto;display:block;object-fit:contain;transition:transform .3s ease,filter .3s}
.hobby-choice span{position:absolute;font:800 clamp(42px,4.65vw,77px)/1 var(--display-font);text-transform:lowercase;letter-spacing:-.045em;white-space:nowrap;transition:transform .25s}
.hobby-choice small{font:700 12px var(--display-font);margin-top:8px;letter-spacing:.055em;text-transform:uppercase;color:#eee;opacity:.87}
.hobby-choice:hover span{transform:translateY(-3px)}
.hobby-choice-baking{left:13.56%;top:7.12%;width:29.65%}.hobby-choice-baking span{left:40.3%;top:101.4%;color:#ffd2d8;text-shadow:0 0 8px #fa7194,0 0 25px #e85d88}
.hobby-choice-cosplay{left:55.32%;right:auto;top:3.77%;width:32.35%}.hobby-choice-cosplay span{left:-4.2%;top:85.3%;color:#ffe48c;text-shadow:0 0 8px #dba43d,0 0 26px #e0a035}
/* Footer keeps the existing real social icons and copyright. */
.site-footer{background:#11141b;border-top:1px solid rgba(255,255,255,.12)}
.footer-inner{width:min(100%,1550px);margin:auto;min-height:138px;padding:28px clamp(20px,4vw,60px);display:flex;align-items:center;justify-content:space-between;gap:24px}
.footer-identity{display:flex;flex-direction:column;gap:2px}.footer-logo{font:800 23px var(--display-font);letter-spacing:-.035em;text-decoration:none}.footer-logo span{color:var(--pink)}
.footer-identity small{font-size:12px;color:#adb4c3}.footer-social{display:flex;align-items:center;gap:16px}
.footer-back{font:600 12px var(--display-font);text-decoration:none;color:#c4c8d1}.footer-back:hover{text-decoration:underline}
/* Responsive: reconstruct the compositions, rather than shrink the entire canvas. */
@media(min-width:1450px){.scene-projects{min-height:990px}.project-stage{height:850px}.scene-hobbies{min-height:920px}.hobbies-layout{height:800px}}
@media(max-width:1080px){
 .header-inner{height:66px}.scene{scroll-margin-top:66px}
 .hero{min-height:685px;height:730px}.hero-stage{max-width:1030px}
 .hero-profession{width:31%;left:0;top:26%}.hero-community{width:30%;left:39%;top:5%}.hero-projects{width:27%;left:37%;top:56%}.hero-hobbies{width:27%;right:1.4%;top:18%}
 :root{--hero-heading-size:clamp(26px,4vw,50px)}
 .feature-panel,.project-detail{border-width:5px;border-radius:20px}.feature-panel{padding:27px}.feature-panel::before{inset:-5px;border-radius:20px}
 .feature-scene{min-height:720px}.community-photo img{max-height:780px}.profession-photo img{max-height:650px}
 .scene-projects{min-height:720px;padding-block:55px 72px}.project-stage{height:655px}
 .scene-hobbies{min-height:690px}.hobbies-layout{height:650px}
}
@media(max-width:760px){
 :root{--section-heading-size:clamp(44px,9vw,65px)}
 html{scroll-padding-top:110px}
 .site-header{position:sticky}.header-inner{height:auto;min-height:95px;padding:12px 16px;flex-wrap:wrap;gap:12px}
 .brand{font-size:21px}.brand img{width:30px;height:30px}
 .site-nav{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
 .site-nav a{background:var(--action-fill);border:2px solid var(--action-border);border-radius:6px;padding:9px 2px;text-align:center;font-size:11px}
 .scene{scroll-margin-top:106px}
 .hero{height:1000px;min-height:0}.hero-stage{width:min(100%,550px);padding:10px}
 .hero-particles{width:130%;top:43%;left:50%}
 .hero-choice{transform:translate3d(0,var(--motion-y),0)}
 .hero-profession{width:51%;left:0;top:18%}.hero-community{width:49%;left:50%;top:5%}.hero-projects{width:48%;left:5%;top:56%}.hero-hobbies{width:47%;right:1%;top:37%}
 :root{--hero-heading-size:clamp(23px,6vw,39px)}
 .hero-word{letter-spacing:-.045em}
 .hero-projects .hero-word{left:75%;bottom:7%}
 .feature-scene{padding:64px 18px 76px;min-height:0}
 .scene-paint{width:170%;top:50%;max-width:none}
 .scene-inner{width:min(100%,580px)}
 .profession-layout,.community-layout{grid-template-columns:minmax(0,1fr);gap:16px}
 .profession-panel,.profession-photo{grid-column:1;grid-row:auto}
 .community-panel{left:0}
 .profession-photo,.community-photo{justify-content:center;align-items:center;order:0}
 .profession-photo img{width:min(60%,300px);max-height:435px}
 .community-photo img{width:100%;height:auto;max-height:none;max-width:100%}
 .profession-panel,.community-panel{order:1}
 .feature-panel{padding:clamp(24px,5vw,35px);margin-inline:4px}
 .feature-lede{font-size:clamp(19px,4vw,24px)}
 .feature-copy{font-size:15px}
 .community-links img{width:52px;height:52px}.community-links a{gap:13px}
 .scene-community .scene-paint{width:210%;top:43%}
 .scene-projects{padding:75px 18px 100px;min-height:0}
 .scene-projects .scene-paint{width:200%;top:50%}
 .project-stage{height:clamp(550px,calc(175px + 107vw),810px)}
 .projects-intro{position:relative;left:auto;top:auto;width:auto;max-width:450px;margin-bottom:15px;z-index:1}
 .project-dpg{left:0;top:130px;width:56%}.project-froot{right:0;top:150px;width:55%}.project-ryu{left:22%;top:clamp(286px,calc(91px + 59vw),431px);width:57%}
 .project-detail{left:0;right:0;top:93%;padding:12px 13px}
 .project-detail h3{font-size:21px}.project-detail p{font-size:12px}
 .project-ryu .project-detail{bottom:82%;top:auto}
 .scene-hobbies{padding:65px 16px 110px;min-height:920px}
 .scene-hobbies .scene-paint{width:210%;top:50%}
 /* Keep the Hobbies tagline comfortably separated from the Baking artwork on mobile. */
 .hobbies-layout{height:780px;margin-top:-68px}
 .hobby-choice{width:70%}.hobby-choice-baking{left:4%;top:0}.hobby-choice-cosplay{left:auto;right:4%;top:300px}
 .hobby-choice span{font-size:clamp(35px,9vw,60px)}
 .footer-inner{flex-wrap:wrap;gap:15px}.footer-identity{width:100%}.footer-social{order:2}.footer-back{order:3}
}
@media(max-width:460px){
 :root{--section-heading-size:48px}
 .hero{height:760px}.hero-particles{width:145%;top:44%}
 .hero-stage{width:100%}.hero-profession{width:50%;left:0;top:23%}.hero-community{width:50%;left:50%;top:7%}.hero-projects{width:47%;left:2%;top:57%}.hero-hobbies{width:48%;right:0;top:39%}
 :root{--hero-heading-size:clamp(21px,6.5vw,30px)}
 .hero-projects .hero-word{left:66%;bottom:9%}
 .scene-profession,.scene-community{padding-inline:12px}
 .scene-projects{min-height:0;padding-top:62px}
 .projects-intro{margin-left:10px}
 .project-dpg{top:128px;width:58%;left:-3%}.project-froot{top:155px;width:56%;right:-3%}.project-ryu{width:60%;left:17%}
 .project-detail{padding:11px}.project-detail h3{font-size:18px}
 .scene-hobbies{min-height:740px;padding:50px 12px 88px}.hobbies-layout{height:650px}
 .hobby-choice{width:74%}.hobby-choice-baking{top:0;left:0}.hobby-choice-cosplay{left:auto;top:247px;right:0}
 .career-list>div{grid-template-columns:80px 1fr}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
 .parallax-layer{--motion-y:0px!important;--motion-x:0px!important}
}
/* Composition adjustments from first browser pass. */
@media(min-width:761px){
 .projects-intro{left:43%;top:3%;width:18%;max-width:240px}
 .projects-intro p{font-size:13px}
 .hobby-choice img{max-height:590px}
 .hobby-choice-baking{top:7.12%}
 .hobby-choice-cosplay{top:3.77%}
}
@media(min-width:1450px){
 .hobby-choice img{max-height:655px}
}
@media(max-width:760px){
 .project-item .project-detail{top:100%;width:max-content;max-width:min(290px,calc(100vw - 28px));left:50%;right:auto;translate:-50% 0}
/* Keep full-width details inside the viewport for the outside badges.
   The Ryu Press panel is already centered and needs no offset. */
 .project-dpg .project-detail{left:calc(50% + min(20vw,125px))}
 .project-froot .project-detail{left:calc(50% - min(20vw,125px))}
 .project-ryu .project-detail{top:auto;bottom:90%}
 .hobby-choice img{max-height:365px}
 .hobby-choice-baking{top:0}
 .hobby-choice-cosplay{top:475px}
 .scene-hobbies{min-height:1130px}
 .hobbies-layout{height:1010px}
 .hero-projects .hero-word{bottom:-10%;left:19%}
}
@media(max-width:460px){
 .project-ryu .project-detail{bottom:90%}
 .scene-hobbies{min-height:900px}
 .hobbies-layout{height:800px}
 .hobby-choice-baking{left:2%;top:0;width:73%}
 .hobby-choice-cosplay{left:auto;right:2%;top:380px;width:74%}
 .hobby-choice img{max-height:320px}
 .hero-projects .hero-word{left:19%;bottom:-13%}
 .hero-community .hero-word{right:calc(100% + 12px);top:0}
}

/* A two-column Community layout crowds the full-body figure at tablet widths.
   Stack only this scene until there is room to preserve the Canva proportions. */
@media (min-width:761px) and (max-width:1080px){
  .scene-community{padding-block:clamp(45px,5vw,80px)}
  .community-layout{grid-template-columns:minmax(0,1fr);gap:18px;max-width:700px}
  .community-photo{height:auto;justify-content:center}
  .community-photo img{width:min(72%,650px);height:auto;max-height:none;max-width:100%}
  .community-panel{left:0;max-width:600px;justify-self:center}
}

/* The Community paint is intentionally lower than the portrait/panel scene.
   Use individual 'translate' so the existing scroll-linked transform still works. */
.scene-community .scene-paint{translate:0 100px}

/* Continuous, asynchronous floating on the four lead compositions.
   Individual translate composes with the JavaScript scroll transform.
   Moving the whole link keeps its image and HTML heading together. */
@keyframes lead-drift{
  0%,100%{translate:0 0}
  50%{translate:var(--float-x,6px) var(--float-y,-9px)}
}
.hero-choice{
  animation:lead-drift var(--float-duration,9s) ease-in-out infinite;
  animation-delay:var(--float-phase,0s);
  animation-play-state:paused;
}
.hero.is-nearby .hero-choice{animation-play-state:running}
.hero-profession{--float-x:8px;--float-y:-10px;--float-duration:8.5s;--float-phase:-2.5s}
.hero-community{--float-x:-8px;--float-y:9px;--float-duration:10s;--float-phase:-4s}
.hero-projects{--float-x:7px;--float-y:-8px;--float-duration:7.8s;--float-phase:-1s}
.hero-hobbies{--float-x:-7px;--float-y:-10px;--float-duration:9.4s;--float-phase:-6s}

/* The reference gives the three illustrated badges their own gentle wiggle.
   'rotate' and 'translate' animate independently from hover transforms so
   the illustration remains clickable and its project detail still opens. */
@keyframes badge-wiggle{
  0%,100%{rotate:var(--wiggle-left,-1.4deg);translate:-2px 2px}
  50%{rotate:var(--wiggle-right,1.4deg);translate:2px -3px}
}
.project-trigger img{
  animation:badge-wiggle var(--wiggle-duration,7s) ease-in-out infinite;
  animation-delay:var(--wiggle-phase,0s);
  animation-play-state:paused;
}
.scene-projects.is-nearby .project-trigger img{animation-play-state:running;will-change:rotate,translate}
.project-dpg{--wiggle-left:-1.4deg;--wiggle-right:1.6deg;--wiggle-duration:7.2s;--wiggle-phase:-1.7s}
.project-froot{--wiggle-left:1.5deg;--wiggle-right:-1.7deg;--wiggle-duration:8.1s;--wiggle-phase:-3.3s}
.project-ryu{--wiggle-left:-4deg;--wiggle-right:4deg;--wiggle-duration:5.8s;--wiggle-phase:-1.2s}
@media(max-width:760px){
  .hero-choice{--float-x:4px;--float-y:-5px}
  .project-dpg,.project-froot{--wiggle-left:-1deg;--wiggle-right:1deg}
  .project-ryu{--wiggle-left:-2.5deg;--wiggle-right:2.5deg}
}

/* Section motion follows the supplied five-scene scroll reference.  Each
   layer gets its own scroll-linked reveal/exit variables from v2.js.
   No JavaScript and reduced-motion both retain the complete static artwork. */
.motion-ready .hero-choice{
  opacity:var(--reveal-opacity,1);
  transform:translate3d(calc(var(--motion-x,0px) + var(--reveal-x,0px)),calc(var(--motion-y,0px) + var(--reveal-y,0px)),0) rotate(var(--reveal-rotate,0deg));
}
.motion-ready .profession-photo,.motion-ready .community-photo,
.motion-ready .feature-panel,.motion-ready .project-item,
.motion-ready .hobby-choice,.motion-ready .projects-intro,.motion-ready .hobbies-intro{
  opacity:var(--reveal-opacity,1);
  transform:translate3d(var(--reveal-x,0px),calc(var(--motion-y,0px) + var(--reveal-y,0px)),0) rotate(var(--reveal-rotate,0deg));
}
.motion-ready .hero-particles,.motion-ready .scene-paint{
  opacity:var(--reveal-opacity,1);
  filter:blur(var(--reveal-blur,0px));
  transform:translate3d(calc(-50% + var(--reveal-x,0px)),calc(-50% + var(--motion-y,0px) + var(--reveal-y,0px)),0) scale(var(--reveal-scale,1));
}
.motion-ready .scene.is-nearby .hero-choice,
.motion-ready .scene.is-nearby .profession-photo,
.motion-ready .scene.is-nearby .community-photo,
.motion-ready .scene.is-nearby .feature-panel,
.motion-ready .scene.is-nearby .project-item,
.motion-ready .scene.is-nearby .hobby-choice,
.motion-ready .scene.is-nearby .hobbies-title{will-change:transform,opacity}
@media(min-width:761px){
  /* The Cosplay art extends below its word in the Canva composition.
     Never compress its natural aspect-ratio height on desktop. */
  .hobby-choice-cosplay img{max-height:none}
}
@media(max-width:760px){
  .hobby-choice-baking span{left:38%;top:99%}
  .hobby-choice-cosplay span{left:2%;top:85%}
  .motion-ready .hero-particles,.motion-ready .scene-paint{filter:none}
}
@media(prefers-reduced-motion:reduce){
  .motion-ready .hero-choice,.motion-ready .profession-photo,.motion-ready .community-photo,
  .motion-ready .feature-panel,.motion-ready .project-item,.motion-ready .hobby-choice,
  .motion-ready .projects-intro,.motion-ready .hobbies-intro,.motion-ready .hero-particles,.motion-ready .scene-paint{
    opacity:1!important;filter:none!important
  }
}