*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#9f91cf}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Fredoka,system-ui,-apple-system,sans-serif}html,body{height:100%}body{background:var(--bg);color:#fff;overflow:hidden}#app{height:100vh;position:relative;overflow:hidden}#slider{will-change:transform;flex-direction:column;height:200vh;display:flex}#slider>*{flex:0 0 100vh}@keyframes float-y{0%,to{translate:0}50%{translate:0 var(--floatY,-7px)}}.world-frame{width:100vw;height:100vh;position:relative;overflow:hidden}.world{z-index:1;will-change:transform;grid-template-rows:repeat(3,100vh);grid-template-columns:repeat(3,100vw);width:300vw;height:300vh;display:grid;position:relative}.stage{grid-area:2/2}.subpage--top{grid-area:1/2}.subpage--left{grid-area:2/1}.subpage--right{grid-area:2/3}.subpage--bottom{grid-area:3/2}.subpage{text-align:center;place-items:center;padding:2rem;display:grid;position:relative}.subpage__title{letter-spacing:.04em;text-transform:uppercase;color:#fff9;text-shadow:0 2px 12px #462d6e4d;font-size:clamp(2.25rem,8vw,5.5rem);font-weight:700}.subpage--top{padding:clamp(1.25rem,4vh,3rem) clamp(1rem,4vw,3rem)}.about{background:#fdf7ea0f;border:1.5px solid #fdf7ea66;border-radius:30px;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"photo text""bio bio";align-items:center;gap:clamp(1rem,2.6vh,1.9rem) clamp(1.5rem,4vw,3.75rem);width:min(1080px,94vw);padding:clamp(1.4rem,3.5vw,2.75rem) clamp(1.5rem,4vw,3.25rem);display:grid;position:relative;box-shadow:0 18px 50px #3c285f47,0 0 0 6px #9f91cf2e}.about__photo,.about__text,.about__bio--wide{z-index:1;position:relative}.about>.spark{z-index:0}.about__photo{aspect-ratio:1;--floatY:-12px;background:#efeaf7;border:6px solid #fdf7ea;border-radius:22px;grid-area:photo;width:clamp(190px,23vw,310px);margin:0;animation:5s ease-in-out infinite float-y;overflow:hidden;box-shadow:0 0 0 3px #9a83d3,0 16px 32px #3c285f61}.about__photo img{object-fit:cover;object-position:50% 28%;width:100%;height:100%;display:block}.about__text{text-align:left;grid-area:text}.about__hi{letter-spacing:.02em;color:#f3d6f3;text-shadow:0 2px #9a83d373,0 0 18px #ecc7eea6,0 0 30px #a4e7dd59;font-family:Silkscreen,system-ui,monospace;font-size:clamp(1.9rem,5vw,3.9rem);font-weight:700;line-height:1}.about__name{text-align:right;color:#fdf7ea;text-shadow:0 2px 10px #462d6e4d;margin-top:.25em;font-size:clamp(1.35rem,3.3vw,2.5rem);font-weight:700;line-height:1.05}.about__role{color:#fdf7ea;text-align:justify;margin-top:clamp(1rem,2.6vh,1.9rem);font-size:clamp(1.1rem,2.5vw,1.95rem);font-weight:600;line-height:1.2}.about__bio{color:#fdf7ea;text-align:justify;margin-top:clamp(.85rem,1.9vh,1.35rem);font-size:clamp(1.1rem,2.1vw,1.6rem);font-weight:500;line-height:1.5}.about__bio strong{font-weight:700}.about__bio--wide{grid-area:bio;margin-top:0}@media (width<=860px){.about{text-align:center;grid-template-columns:1fr;grid-template-areas:"photo""text""bio";justify-items:center;gap:clamp(1.1rem,3vw,2rem)}.about__text,.about__name,.about__role,.about__bio{text-align:center}.about__bio{max-width:48ch;margin-inline:auto}}.back-btn{z-index:2;cursor:pointer;letter-spacing:.06em;text-transform:uppercase;color:#fff;text-shadow:0 1px 2px #500a32f2,0 2px 5px #500a32bf,0 0 11px #6e0f4699;white-space:nowrap;--floatY:-9px;background-color:#0000;background-image:url(/button.webp);background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border:none;justify-content:center;align-items:center;width:clamp(130px,15vw,185px);height:clamp(45px,5.15vw,63px);padding:0 .6em;font-family:inherit;font-size:clamp(.72rem,1.4vw,1.05rem);font-weight:700;transition:transform .18s,filter .18s;animation:3.6s ease-in-out infinite float-y;display:flex;position:absolute}.back-btn__label{z-index:2;position:relative;transform:translateY(-.1em)}.back-btn:after{content:"";z-index:1;pointer-events:none;mix-blend-mode:screen;background:linear-gradient(115deg,#0000 38%,#ffffff80 50%,#0000 62%) 150% 0/250% 100%;animation:5s ease-in-out infinite glitter-sheen;position:absolute;inset:0;-webkit-mask:url(/button.webp) 50%/100% 100% no-repeat;mask:url(/button.webp) 50%/100% 100% no-repeat}.back-btn:hover{filter:brightness(1.06)drop-shadow(0 6px 16px #ff78d28c);transform:translateY(-2px)scale(1.05)}.back-btn:active{transform:translateY(0)scale(.98)}.back-btn:focus-visible{outline-offset:4px;border-radius:20px;outline:3px solid #fff}.back-btn--down{margin-inline:auto;bottom:clamp(20px,4.5vh,48px);left:0;right:0}.back-btn--up{margin-inline:auto;top:clamp(20px,4.5vh,48px);left:0;right:0}.back-btn--right{margin-block:auto;top:0;bottom:0;right:clamp(20px,4vw,48px)}.back-btn--left{margin-block:auto;top:0;bottom:0;left:clamp(20px,4vw,48px)}.stage{grid-template:".top."1fr"left face right"".bottom."1fr/1fr auto 1fr;place-items:center;gap:clamp(.75rem,3vh,2.25rem) clamp(.75rem,4vw,3.5rem);min-height:100vh;padding:clamp(1.5rem,5vh,4rem) clamp(1.25rem,5vw,5rem);display:grid}.glitter-btn--top{grid-area:top}.glitter-btn--left{grid-area:left}.glitter-btn--right{grid-area:right}.glitter-btn--bottom{grid-area:bottom}.face-frame{aspect-ratio:480/270;--floatY:-14px;background:#e6e3f3;border-radius:10px;grid-area:face;width:clamp(280px,38vw,480px);animation:4.5s ease-in-out -2s infinite float-y;overflow:hidden;box-shadow:0 14px 34px #3c285f52,inset 0 0 0 1px #ffffff40}.face-frame svg{width:100%;height:100%;display:block}.world-bg{z-index:0;pointer-events:none;position:absolute;inset:0;overflow:hidden}.world-bg:before{content:"";background:radial-gradient(38% 42% at 10% 8%,#a4e7dd8c,#0000 70%),radial-gradient(40% 44% at 90% 6%,#ecc7ee9e,#0000 72%),radial-gradient(42% 46% at 6% 94%,#ecc7ee80,#0000 72%),radial-gradient(46% 50% at 96% 96%,#a4e7dd80,#0000 72%);animation:16s ease-in-out infinite haze-breathe;position:absolute;inset:-12%}@keyframes haze-breathe{0%,to{opacity:.85;scale:1}50%{opacity:1;scale:1.05}}.world-bg__grid{transform-origin:50% 100%;background-image:linear-gradient(#a4e7dd80 2px,#0000 2px),linear-gradient(90deg,#a4e7dd80 2px,#0000 2px);background-size:66px 66px;width:260%;height:48%;animation:6s linear infinite grid-flow;position:absolute;bottom:0;left:50%;transform:perspective(440px)rotateX(64deg);-webkit-mask-image:linear-gradient(#0000 22%,#000 96%);mask-image:linear-gradient(#0000 22%,#000 96%)}@keyframes grid-flow{to{background-position:0 66px}}.spark{left:var(--x);top:var(--y);width:var(--s,12px);aspect-ratio:1;background:var(--c,#fff);clip-path:polygon(50% 0%,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0% 50%,40% 40%);filter:drop-shadow(0 0 4px #ffffffd9);animation:twinkle 3.6s ease-in-out var(--d,0s) infinite;position:absolute;translate:-50% -50%}@keyframes twinkle{0%,to{opacity:.22;scale:.65}50%{opacity:1;scale:1}}.glitter-btn{cursor:pointer;aspect-ratio:799/274;letter-spacing:.04em;text-transform:uppercase;text-align:center;color:#fff;text-shadow:0 1px 2px #500a32f2,0 2px 5px #500a32bf,0 0 11px #6e0f4699;white-space:nowrap;--floatY:-14px;background-color:#0000;background-image:url(/button.webp);background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border:none;place-items:center;width:clamp(230px,30vw,380px);padding:0 9%;font-family:inherit;font-size:clamp(1.15rem,2.4vw,2.3rem);font-weight:700;line-height:1.4;transition:transform .18s,filter .18s;animation:4.5s ease-in-out infinite float-y;display:grid;position:relative}.glitter-btn--top{animation-duration:3.8s;animation-delay:-.5s}.glitter-btn--left{--floatY:-13px;animation-duration:4.6s;animation-delay:-2.5s}.glitter-btn--right{--floatY:-16px;animation-duration:4.2s;animation-delay:-1.5s}.glitter-btn--bottom{animation-duration:5s;animation-delay:-3.5s}.glitter-btn__label{z-index:2;position:relative;transform:translateY(-.18em)}.glitter-btn--top .glitter-btn__label{transform:translateY(-.1em)}.glitter-btn:after{content:"";z-index:1;pointer-events:none;mix-blend-mode:screen;background:linear-gradient(115deg,#0000 38%,#ffffff80 50%,#0000 62%) 150% 0/250% 100%;animation:5.5s ease-in-out infinite glitter-sheen;position:absolute;inset:0;-webkit-mask:url(/button.webp) 50%/100% 100% no-repeat;mask:url(/button.webp) 50%/100% 100% no-repeat}.glitter-btn:hover{filter:brightness(1.06)drop-shadow(0 7px 20px #ff78d28c);transform:translateY(-2px)scale(1.04)}.glitter-btn:active{transform:translateY(0)scale(.99)}.glitter-btn:focus-visible{outline-offset:4px;border-radius:26px;outline:3px solid #fff}@keyframes glitter-sheen{0%{background-position:150% 0}55%,to{background-position:-60% 0}}@media (prefers-reduced-motion:reduce){.glitter-btn:after,.glitter-btn,.face-frame,.about__photo,.world-bg:before,.world-bg__grid,.spark,.back-btn,.back-btn:after{animation:none}.spark{opacity:.7}}@media (width<=720px){.stage{grid-template-rows:repeat(5,auto);grid-template-columns:1fr;grid-template-areas:"face""top""left""right""bottom";align-content:center;gap:1.1rem}}.landing{--ink:#41565f;--mint:#a4e7dd;--mint-deep:#7fd6c7;--pink:#ecc7ee;--pink-soft:#f6dcf6;--lilac:#d8c2f0;--cream:#fdf7ea;--line:#9a83d3;--line-deep:#6f5ba8;--pill-ink:#2c2c3e;flex-direction:column;justify-content:center;align-items:center;gap:clamp(.5rem,2vh,1.5rem);height:100vh;padding:clamp(1rem,4vh,3rem) clamp(1rem,4vw,3rem);display:flex;overflow:hidden}.browser{background:var(--mint);border-radius:clamp(14px,1.6vw,22px);flex-direction:column;width:min(1080px,92vw);max-height:72vh;padding:clamp(5px,.7vw,9px);display:flex;position:relative;box-shadow:0 22px 48px #462d6e52,inset 0 3px #ffffff80}.browser__bar{background:linear-gradient(180deg, var(--pink-soft), var(--pink));border:2.5px solid var(--line);border-radius:clamp(10px,1.1vw,16px) clamp(10px,1.1vw,16px) 0 0;justify-content:flex-end;align-items:flex-end;height:clamp(34px,4.4vh,52px);padding:0 clamp(10px,1.2vw,18px);display:flex;position:relative}.browser__tab{background:linear-gradient(180deg, #f3d2f3, var(--pink));border:2.5px solid var(--line);border-bottom:none;border-radius:12px 12px 0 0;width:clamp(120px,18vw,215px);height:clamp(26px,3.4vh,42px);position:absolute;bottom:-2.5px;left:clamp(14px,2vw,30px)}.browser__controls{z-index:1;align-items:center;gap:clamp(11px,1.4vw,20px);padding-bottom:clamp(7px,1vh,12px);display:flex;position:relative}.browser__control{width:clamp(15px,1.6vw,21px);height:clamp(15px,1.6vw,21px);color:var(--ink);position:relative}.browser__control--min:before{content:"";background:currentColor;border-radius:2px;height:2.6px;position:absolute;bottom:18%;left:0;right:0}.browser__control--max{border:2.6px solid;border-radius:3px}.browser__control--close:before,.browser__control--close:after{content:"";background:currentColor;border-radius:2px;height:2.6px;position:absolute;top:50%;left:0;right:0}.browser__control--close:before{transform:rotate(45deg)}.browser__control--close:after{transform:rotate(-45deg)}.browser__nav{background:var(--pink);border:2.5px solid var(--line);border-top:none;align-items:center;gap:clamp(8px,1.2vw,18px);padding:clamp(7px,1vh,13px) clamp(10px,1.3vw,20px);display:flex}.browser__actions{color:var(--ink);flex-shrink:0;align-items:center;gap:clamp(6px,.9vw,13px);display:flex}.browser__icon{width:clamp(20px,2.2vw,30px);height:clamp(20px,2.2vw,30px)}.browser__icon svg{fill:none;stroke:currentColor;stroke-width:2.1px;stroke-linecap:round;stroke-linejoin:round;width:100%;height:100%}.browser__url{background:var(--cream);border:2.5px solid var(--line);border-radius:999px;flex:1;align-items:center;min-width:0;height:clamp(28px,3.4vh,42px);padding:0 clamp(12px,1.4vw,20px);display:flex;box-shadow:inset 0 2px 5px #462d6e1f}.browser__mag{fill:none;width:clamp(15px,1.7vw,21px);height:clamp(15px,1.7vw,21px);stroke:var(--line-deep);stroke-width:2.2px;stroke-linecap:round}.browser__avatar{background:radial-gradient(circle at 35% 30%, #c4f1e9, var(--mint-deep));border:2.5px solid var(--line);border-radius:50%;flex-shrink:0;width:clamp(30px,3.6vw,46px);height:clamp(30px,3.6vw,46px)}.browser__content{background:linear-gradient(180deg, #fffdf6, var(--cream));border:2.5px solid var(--line);border-radius:clamp(8px,1vw,14px);flex:1;justify-content:center;align-items:center;min-height:0;margin-top:clamp(5px,.7vw,9px);padding:clamp(6px,1.2vw,16px);display:flex;position:relative;overflow:hidden}.portfolio-link{cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;place-items:center;width:100%;height:100%;padding:0;display:grid}.portfolio-img{object-fit:contain;filter:drop-shadow(0 6px 22px #e496dc8c);width:120%;height:100%;transition:transform .4s cubic-bezier(.34,1.56,.64,1),filter .4s;animation:5.5s ease-in-out infinite portfolio-float;display:block}.portfolio-link:hover .portfolio-img,.portfolio-link:focus-visible .portfolio-img{filter:drop-shadow(0 10px 30px #e882e0d9)drop-shadow(0 0 14px #beaaffb3);transform:scale(1.03)}.portfolio-link:focus-visible{outline:3px dashed var(--line-deep);outline-offset:-6px;border-radius:12px}.portfolio-link:active .portfolio-img{transform:scale(.99)}@keyframes portfolio-float{0%,to{translate:0}50%{translate:0 -10px}}.pixel-cursor{filter:drop-shadow(2px 3px 2px #281e4659);pointer-events:none;width:clamp(40px,4.2vw,56px);height:auto;position:absolute;bottom:clamp(-46px,-2.9vw,-24px);right:clamp(14px,4.2vw,64px);transform:rotate(8deg)}.landing__base{background-image:linear-gradient(#78cec4d9 2px,#0000 2px),linear-gradient(90deg,#78cec4d9 2px,#0000 2px);background-position:-1px -1px;background-size:clamp(26px,3vw,42px) clamp(26px,3vw,42px);border-radius:8px;width:min(1080px,92vw);height:clamp(74px,13vh,128px);position:relative;-webkit-mask-image:linear-gradient(90deg,#000 62%,#0000);mask-image:linear-gradient(90deg,#000 62%,#0000)}.search-pill{--floatY:-12px;border:2.5px solid var(--mint-deep);box-shadow:0 0 0 2.5px var(--pill-ink), 0 8px 18px #32235047;background:#fff;border-radius:14px;align-items:center;gap:clamp(8px,1vw,16px);padding:clamp(6px,.8vh,10px) clamp(6px,.8vh,10px) clamp(6px,.8vh,10px) clamp(16px,1.8vw,28px);animation:4.2s ease-in-out 1.2s infinite float-y;display:flex;position:absolute;top:50%;left:clamp(8px,3vw,56px);transform:translateY(-50%)}.search-pill__text{text-transform:uppercase;letter-spacing:.02em;color:var(--pill-ink);white-space:nowrap;font-family:Silkscreen,Fredoka,monospace;font-size:clamp(.85rem,1.7vw,1.45rem);font-weight:700}.search-pill__text:after{content:"";vertical-align:-.15em;background:var(--pill-ink);width:.45em;height:1.05em;margin-left:.12em;animation:1.05s infinite caret-blink;display:inline-block}@keyframes caret-blink{0%,50%{opacity:1}50.01%,to{opacity:0}}.search-pill__btn{background:radial-gradient(circle at 40% 30%, #c4f1e9, var(--mint-deep));border:2.5px solid var(--pill-ink);border-radius:10px;place-items:center;width:clamp(34px,3.6vw,50px);height:clamp(30px,3.2vw,44px);display:grid}.search-pill__btn svg{fill:none;width:56%;height:56%;stroke:var(--pill-ink);stroke-width:2.6px;stroke-linecap:round}.browser{--floatY:-13px;animation:.8s cubic-bezier(.22,1,.36,1) both rise-in,4.8s ease-in-out 1s infinite float-y}.portfolio-img{animation:5.5s ease-in-out infinite portfolio-float,.7s cubic-bezier(.34,1.56,.64,1) .35s both pop-in}.pixel-cursor{--floatY:-13px;animation:.5s .75s both cursor-in,2.5s ease-in-out 1.1s infinite float-y}.landing__base{animation:.7s cubic-bezier(.22,1,.36,1) .2s both rise-in}@keyframes rise-in{0%{opacity:0;transform:translateY(26px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes pop-in{0%{opacity:0;scale:.8}to{opacity:1;scale:1}}@keyframes cursor-in{0%{opacity:0;transform:rotate(8deg)translate(10px,10px)}to{opacity:1;transform:rotate(8deg)translate(0)}}@media (width<=720px){.browser{width:94vw;max-height:64vh}.landing__base{width:94vw;-webkit-mask-image:none;mask-image:none}.search-pill{left:50%;transform:translate(-50%,-50%)}}@media (prefers-reduced-motion:reduce){.browser,.portfolio-img,.pixel-cursor,.landing__base,.search-pill{animation:none}.portfolio-img{transition:none}.search-pill__text:after{display:none}}