.portrait-stage{--pointer-x:0;--pointer-y:0;isolation:isolate;background:var(--night);width:100%;height:100dvh;min-height:360px;position:relative;overflow:hidden}.scene{pointer-events:none;position:absolute;inset:0;overflow:hidden}.depth-layer{will-change:transform}[data-art-pending] .character-enter,[data-art-pending] .name-spine,[data-art-pending] .name-art{animation-play-state:paused}.scene-background{transform:translate3d(calc(var(--pointer-x) * -8px), calc(var(--pointer-y) * -6px), 0);position:absolute;inset:-5%}.scene-background img{object-fit:cover;object-position:center;width:100%;height:100%;animation:1.15s cubic-bezier(.2,.65,.2,1) both background-arrive}.scene-light{mix-blend-mode:screen;background:radial-gradient(at 85% 94%,#ddb77d1f,#0000 45%);animation:13s ease-in-out infinite alternate light-breathe;position:absolute;inset:0}.scene-grain{z-index:8;opacity:.055;pointer-events:none;background-image: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='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");position:absolute;inset:-15%}.character-depth{z-index:4;width:80%;height:130%;transform:translate3d(calc(var(--pointer-x) * 14px), calc(var(--pointer-y) * 9px), 0);position:absolute;bottom:-35%;left:-15%}.character-enter{width:100%;height:100%;animation:1.35s cubic-bezier(.12,.77,.18,1) 80ms both character-arrive}.character{object-fit:contain;object-position:bottom center;width:100%;height:100%}.front-fragments{z-index:6;transform:translate3d(calc(var(--pointer-x) * 26px), calc(var(--pointer-y) * 17px), 0);position:absolute;inset:-6%}.fragment{left:var(--x);top:var(--y);opacity:.82;width:27px;height:10px;animation:fragment-drift var(--duration) var(--delay) linear infinite;position:absolute}.fragment i{background:linear-gradient(135deg, var(--accent-light), var(--accent-light) 44%, var(--accent-ink));clip-path:polygon(0 18%,42% 0,100% 48%,74% 100%,27% 72%);width:100%;height:100%;transform:rotate(var(--angle)) scale(var(--size));display:block}.fragment:nth-child(4n){filter:blur(2px)}.fragment:nth-child(3n){opacity:.4}.spine-depth{z-index:5;width:11.1%;height:110%;transform:translate3d(calc(var(--pointer-x) * 8px), calc(var(--pointer-y) * 4px), 0);pointer-events:none;position:absolute;top:-4%;left:47.4%}.name-spine{background:var(--night);width:100%;height:100%;animation:1.15s cubic-bezier(.16,.84,.21,1) .18s both spine-arrive;position:relative;overflow:hidden}.name-spine:before,.name-spine:after{content:"";z-index:4;width:1.5px;position:absolute;top:0;bottom:0}.name-spine:before{background:linear-gradient(#0000 0% 8%,#f3ebdc55 12%,#f3ebdcb3 24%,#ddb77d99 28%,#f3ebdc8c 34%,#0000 42% 52%,#24344266 58%,#f3ebdc80 65%,#0000 72% 81%,#ddb77d99 90%,#0000 98%);left:0}.name-spine:after{background:linear-gradient(#5c6d7b55 0%,#f3ebdc55 16%,#0000 30% 44%,#5c6d7b66 51%,#0000 61% 70%,#f3ebdc6b 78%,#ddb77d44 86%,#0000 96%);width:1px;right:0}.spine-texture{background:var(--night) url(/assets/brand/study-ink.webp) 46% center / auto 105% no-repeat;opacity:.9;position:absolute;inset:0}.spine-texture:after{content:"";background:linear-gradient(90deg,#1b273238,#0000 32% 80%,#1b2732a8);position:absolute;inset:0}.name-mask{clip-path:inset(0);position:absolute;inset:0;overflow:hidden}.name-art{object-fit:contain;width:206%;max-width:none;height:100%;animation:1.15s cubic-bezier(.16,.8,.2,1) .42s both lettering-arrive;position:absolute;top:15%;left:-48%}.spine-glint{mix-blend-mode:screen;background:url(/assets/brand/study-ink.webp) 46%/auto 105% no-repeat;animation:14s ease-in-out 1.8s infinite spine-light;position:absolute;inset:0;mask-image:linear-gradient(145deg,#0000 28%,#0008 46%,#000 51%,#0000 70%);mask-position:0 180%;mask-size:100% 280%}.identities{z-index:10;align-items:center;transition:top .56s cubic-bezier(.2,.75,.2,1),bottom .56s;display:flex;position:absolute;inset:15% -1.4% 24% 67.6%}.identity-stack{flex-direction:column;gap:clamp(22px,3.9vh,50px);width:100%;transition:gap .56s;display:flex}.identity-panel{--ink-position:3%;isolation:isolate;animation:panel-arrive .95s calc(.36s + var(--order) * .12s) cubic-bezier(.15,.8,.18,1) backwards;padding-inline:2.6vw 3.8vw;transition:translate .42s cubic-bezier(.2,.75,.2,1),opacity .3s;position:relative;transform:skewY(-10deg)translate(0,0)}.identity-panel:nth-child(2){--ink-position:12%}.identity-panel:nth-child(3){--ink-position:20%}.panel-shape{z-index:-1;clip-path:polygon(5% 0,100% 0,96% 100%,0 100%);background:#f3ebdcb3;transition:background .3s;position:absolute;inset:0;overflow:hidden}.panel-shape:before{content:"";clip-path:polygon(5% 0,100% 0,96% 100%,0 100%);background:linear-gradient(110deg, var(--night), var(--night) 75%);position:absolute;inset:1px}.panel-ink{background:url(/assets/brand/study-ink.webp) 50% var(--ink-position) / 105% auto no-repeat;mix-blend-mode:screen;opacity:.95;transition:opacity .35s;position:absolute;inset:1px;mask-image:linear-gradient(115deg,#000 0%,#0004 9%,#0000 22% 63%,#0004 75%,#000 93%)}.panel-flash{opacity:0;background:linear-gradient(90deg,#0000,#ddb77d29 44%,#f3ebdc9c 49.8%,#0000 51%);position:absolute;inset:0;transform:translate(-140%)skew(-24deg)}.identity-trigger{width:100%;min-height:clamp(84px,12.7vh,150px);color:var(--paper);cursor:pointer;text-align:left;background:0 0;border:0;align-items:center;gap:clamp(12px,1.3vw,24px);padding:8px 0;display:flex}.identity-number{font-family:var(--font-profile-number);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.035em;color:var(--vermilion);flex:0 0 1.03em;font-size:clamp(56px,5.2vw,96px);font-weight:600;line-height:.95;transition:color .3s}.identity-divider{background:#f3ebdc66;flex:0 0 1px;align-self:center;height:clamp(32px,4.7vh,52px)}.identity-title{font-family:var(--font-profile);letter-spacing:.015em;white-space:nowrap;font-size:clamp(24px,2.13vw,41px);font-weight:700}.identity-panel:has(.identity-trigger:focus-visible) .panel-shape,.identity-panel.is-open .panel-shape{background:var(--accent-light)}@media (hover:hover) and (pointer:fine){.identity-panel:hover{opacity:1;translate:-14px}.identity-panel:hover .panel-shape{background:var(--accent-light)}}.identity-panel:has(.identity-trigger:focus-visible){opacity:1;translate:-14px}.identity-panel.is-open,.identity-panel.is-open:has(.identity-trigger:focus-visible){translate:var(--panel-open-offset,-22px) 0;z-index:2;opacity:1}.identity-panel.is-open .panel-ink{opacity:1}.identity-panel.is-open .panel-flash{animation:.78s cubic-bezier(.15,.65,.25,1) both panel-flash}.profile-body .identity-trigger:focus-visible{outline:none}.identity-panel:has(.identity-trigger:focus-visible) .panel-shape{background:var(--paper)}.identity-panel:has(.identity-trigger:focus-visible) .panel-shape:before{inset:2.5px}.identity-expansion{grid-template-rows:0fr;transition:grid-template-rows .56s cubic-bezier(.2,.75,.2,1);display:grid}.identity-overflow{min-height:0;overflow:hidden}.identity-copy{font-family:var(--font-profile);color:var(--paper);padding:clamp(10px,1.3vh,16px) 0 clamp(28px,3.9vh,40px);font-size:clamp(14px,.98vw,18px);font-weight:400;line-height:2.1}.identity-copy p{text-wrap:pretty;opacity:0;clip-path:inset(0 100% 0 0);margin:.25em 0;transition:opacity .14s,transform .4s cubic-bezier(.2,.75,.2,1),clip-path .42s cubic-bezier(.2,.75,.2,1);transform:translate(18px,5px)}.identity-panel.is-open .identity-expansion{grid-template-rows:1fr}.identity-panel.is-open .identity-copy p{opacity:1;clip-path:inset(0);transition-delay:calc(.1s + var(--line) * 65ms);transform:none}.has-open-identity .identity-stack{gap:clamp(16px,2.6vh,28px)}.has-open-identity .identity-trigger{min-height:clamp(72px,9.7vh,115px)}.has-open-identity .identity-panel:not(.is-open) .identity-number{color:var(--accent-light)}.has-open-identity .identity-panel:not(.is-open):not(:hover):not(:has(.identity-trigger:focus-visible)){opacity:.82}@keyframes background-arrive{0%{opacity:.25;filter:saturate(.3);transform:scale(1.09)}to{opacity:1;filter:saturate();transform:scale(1)}}@keyframes character-arrive{0%{opacity:0;transform:translate(-12%,5%)scale(1.05)}to{opacity:1;transform:none}}@keyframes spine-arrive{0%{transform:translateY(-110%)skewY(-14deg)}to{transform:none}}@keyframes lettering-arrive{0%{opacity:0;transform:translateY(11%)}to{opacity:1;transform:none}}@keyframes panel-arrive{0%{opacity:0;transform:translate(115%)skewY(-10deg)}to{opacity:1;transform:translate(0)skewY(-10deg)}}@keyframes panel-flash{0%{opacity:0;transform:translate(-140%)skew(-24deg)}18%{opacity:.9}to{opacity:0;transform:translate(140%)skew(-24deg)}}@keyframes light-breathe{0%{opacity:.25}to{opacity:1}}@keyframes spine-light{0%,16%{opacity:0;mask-position:0 180%}22%{opacity:.65}42%,to{opacity:0;mask-position:0 -80%}}@keyframes fragment-drift{0%{opacity:0;transform:translate(-35px,70px)rotate(-15deg)}15%{opacity:.8}80%{opacity:.65}to{opacity:0;transform:translate(140px,-180px)rotate(80deg)}}.is-paused *,.is-paused :before,.is-paused :after{animation-play-state:paused!important}@media (width>=761px) and (aspect-ratio<=3/2){.character-depth{width:87%;height:123%;bottom:-25%;left:-18%}.spine-depth{width:12%;left:44%}.identities{left:61.5%;right:-2%}.identity-title{font-size:clamp(24px,2.7vw,40px)}.identity-copy{padding-right:1rem;font-size:16px}}@media (width>=761px) and (height<=650px){.identity-stack{gap:20px}.identities{top:18%;bottom:13%}.identity-trigger{min-height:76px}.has-open-identity .identity-trigger{min-height:60px}.identity-number{font-size:56px}.identity-copy{padding-block:8px 1.4rem;font-size:14px;line-height:1.85}.has-open-identity .identity-stack{gap:14px}}@media (width<=760px),(orientation:portrait) and (width<=1100px){.scene-background{inset:-4% -60%}.scene-background img{object-position:48% center}.scene-background:after{content:"";background:url(/assets/brand/study-world.webp) 92%/cover no-repeat;animation:1.15s cubic-bezier(.2,.65,.2,1) both background-arrive;position:absolute;inset:0 22.7273%;mask-image:linear-gradient(#0000 0% 43%,#000 78%)}.scene:after{content:"";z-index:5;background:linear-gradient(#0000 0%,#1b2732cc 48%,#1b2732b3 86%,#1b2732e8 100%);position:absolute;inset:30% 0 0}.character-depth{aspect-ratio:1122/1402;z-index:4;width:119%;height:auto;top:8%;bottom:auto;left:-20%}.character{object-position:center bottom;mask-image:linear-gradient(#000 0% 74%,#0000 96%)}.spine-depth{z-index:5;width:18%;height:67%;top:-3%;left:auto;right:9%}.name-art{width:219%;height:92%;top:20%;left:-57.5%}.name-spine{border-inline-width:1px}.identities{align-items:center;inset:50% -3% 10% 7%}.identity-stack{gap:19px}.identity-panel{padding-inline:7% 8%}.identity-trigger{gap:16px;min-height:73px}.identity-number{font-size:54px}.identity-title{font-size:clamp(24px,6.7vw,33px)}.identity-divider{height:34px}.identity-panel{--panel-open-offset:-6px}.identity-copy{padding:10px 4% 1.5rem 0;font-size:15px;line-height:2.05}.identity-copy p{margin:.3em 0}.identity-clause{vertical-align:top;max-width:100%;display:inline-block}.has-open-identity .identities{top:33%;bottom:10%}.has-open-identity .identity-stack{gap:17px}.has-open-identity .identity-trigger{min-height:63px}.has-open-identity .scene:after{background:linear-gradient(#0000 0%,#1b2732e8 27%,#1b2732b3 86%,#1b2732eb 100%)}.front-fragments{z-index:7}.fragment{width:20px;height:8px}.spine-glint{animation-duration:17s}}@media (width<=760px) and (height<=740px){.name-art{transition:top .56s cubic-bezier(.2,.75,.2,1),width .56s cubic-bezier(.2,.75,.2,1),left .56s cubic-bezier(.2,.75,.2,1);top:17%}.has-open-identity .name-art{width:198%;top:4%;left:-40%}.character-depth{top:9%}.identities{top:47%;bottom:11%}.identity-stack{gap:16px}.identity-trigger{min-height:64px}.identity-number{font-size:48px}.identity-title{font-size:25px}.has-open-identity .identities{top:25%;bottom:11%}.has-open-identity .identity-trigger{min-height:54px}.has-open-identity .identity-stack{gap:13px}.identity-copy{padding-block:8px 1.2rem;font-size:14px;line-height:1.9}}@media (height<=560px),(width<=340px){.identities{padding-block:2rem;align-items:flex-start;padding-left:1rem;top:23%;bottom:16%;overflow:hidden auto}.has-open-identity .identities{top:23%;bottom:16%}.identity-stack{margin-block:auto}.identity-trigger,.has-open-identity .identity-trigger{min-height:54px}.identity-number{font-size:44px}.identity-title{font-size:23px}.identity-copy{font-size:14px}}@media (width>=600px) and (width<=760px) and (height<=560px){.character-depth{width:90%;top:8%;left:-20%}.spine-depth{width:12%;height:110%;top:-4%;left:46%;right:auto}.name-art,.has-open-identity .name-art{width:206%;height:100%;top:15%;left:-48%}.identities,.has-open-identity .identities{padding-block:2.1rem;padding-left:.6rem;inset:20% -2% 16% 61%}.identity-panel{padding-inline:9% 12%}.identity-trigger,.has-open-identity .identity-trigger{gap:12px;min-height:60px}.identity-title{font-size:20px}}@media (orientation:portrait) and (width>=761px) and (width<=1100px){.identities{top:53%;bottom:10%}.identity-panel{transform:skewY(-7deg)}.identity-trigger{gap:24px;min-height:100px}.identity-number{font-size:74px}.identity-title{font-size:38px}.identity-stack{gap:24px}.identity-copy{font-size:18px}.has-open-identity .identity-trigger{min-height:78px}.has-open-identity .identities{top:34%;bottom:10%}.has-open-identity .identity-stack{gap:20px}}@media (orientation:landscape) and (height<=560px){.identities,.has-open-identity .identities{padding-block:12px;top:21%;bottom:12%}.identity-stack,.has-open-identity .identity-stack{gap:14px}.identity-trigger,.has-open-identity .identity-trigger{min-height:54px}}@media (prefers-reduced-motion:reduce){.portrait-stage *,.portrait-stage :before,.portrait-stage :after{transition:none!important;animation:none!important}.depth-layer{will-change:auto;transform:none!important}.identity-panel{translate:none!important}.fragment,.spine-glint{display:none}}.scene-light{background:radial-gradient(at 35% 40%,#e5c08b18,#0000 60%)}.spine-texture,.spine-glint{background-image:url(/assets/brand/study-ink.webp)}.name-spine{background:#17232e}.spine-depth{z-index:3}.spine-texture{opacity:1;background-position:50%;background-size:100% 100%}.spine-texture:after{background:linear-gradient(90deg,#e4bd7d15,#0000 14% 72%,#111b2677),url(/assets/brand/study-ink.webp) 100% 100%/230% 115% no-repeat;mask-image:linear-gradient(#0000 48%,#0008 69%,#000 93%)}.name-spine:before{background:linear-gradient(#e4bd7d22,#e4bd7d99 24%,#e4bd7d11 63%,#e4bd7d88 87%,#0000)}.name-spine:after{background:linear-gradient(#10202c66,#e7c99055 29%,#12202c88 64%,#0000)}.study-foreground{z-index:7;pointer-events:none;transform:translate3d(calc(var(--pointer-x) * -8px), calc(var(--pointer-y) * -6px), 0);position:absolute;inset:-5%}.study-foreground img{object-fit:cover;object-position:center;width:100%;height:100%;display:block}.panel-shape:before{background:linear-gradient(110deg,#1b2935,#17232eee 75%)}.panel-ink{opacity:.4;background-image:url(/assets/brand/study-ink.webp);background-size:100% 360%}.panel-vignette{pointer-events:none;opacity:.88;background:url(/assets/brand/study-world.webp) 8% 54%/360% no-repeat;position:absolute;inset:1px 1px 1px 62%;mask-image:linear-gradient(90deg,#0000,#0003 22%,#000 64%)}[data-identity=animation] .panel-vignette{background-image:url(/assets/brand/study-animation-shelf.webp);background-position:91% 56%;background-size:190%}[data-identity=developer] .panel-vignette{background-position:100% 62%;background-size:310%}.identity-trigger,.identity-expansion{z-index:1;position:relative}.identity-number{color:var(--accent-light)}.scene-background img{object-position:center}.character-depth{clip-path:none;width:79%;height:119%;bottom:-25%;left:-13%}@media (width<=760px),(orientation:portrait) and (width<=1100px){.scene-background img{object-position:40% center}.scene-background:after{background-image:url(/assets/brand/study-world.webp)}.scene:after{background:linear-gradient(#0000,#1b2732cc 48%,#17232ef0 100%)}.character-depth{clip-path:none;width:119%;height:auto;top:8%;bottom:auto;left:-22%}.study-foreground{display:none}.spine-depth{z-index:5}.panel-vignette{opacity:.65;left:66%}}
