:root{--ink:#050511;--ink2:#0d0b20;--blue:#3450f5;--amethyst:#9228e8;--lavender:#b49bff;--paper:#f5f1fa;--line:rgba(180,155,255,.35)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--paper);font-family:Inter,"Arial",sans-serif;overflow-x:hidden}button,a{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid var(--lavender);outline-offset:5px}::selection{background:var(--amethyst);color:#fff}
.progress{position:fixed;top:0;left:0;width:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--lavender));z-index:99;box-shadow:0 0 12px var(--blue)}
.site-header{height:78px;padding:0 clamp(22px,5vw,80px);display:flex;align-items:center;gap:35px;justify-content:space-between;position:absolute;top:0;left:0;right:0;z-index:20;border-bottom:1px solid rgba(180,155,255,.16);background:linear-gradient(180deg,rgba(5,5,17,.85),rgba(5,5,17,.15))}.wordmark{font-family:Impact,"Arial Black",sans-serif;font-size:20px;line-height:.83;letter-spacing:.06em;display:flex;gap:10px;align-items:center;transform:rotate(-3deg)}.wordmark-star{font:28px Georgia,serif;color:var(--lavender)}.nav{display:flex;align-items:center;gap:clamp(15px,2.15vw,36px)}.nav a{font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;position:relative;padding:16px 0}.nav a:after{content:"";height:2px;background:var(--lavender);position:absolute;left:0;right:100%;bottom:7px;transition:right .25s}.nav a:hover:after,.nav a.active:after{right:0}.header-index{font:700 10px/1.2 monospace;color:var(--lavender);letter-spacing:.1em;white-space:nowrap}.menu-toggle{display:none;background:none;border:0;width:42px;height:42px;position:relative}.menu-toggle span{display:block;height:2px;width:25px;background:var(--paper);margin:7px auto}
.hero{min-height:min(900px,100svh);min-height:max(720px,100svh);position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center;isolation:isolate;overflow:hidden;padding:105px clamp(24px,5vw,80px) 72px;background:radial-gradient(ellipse at 78% 45%,#191150 0,transparent 42%),radial-gradient(ellipse at 4% 94%,#101440 0,transparent 45%),#050511}.hero:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(180,155,255,.16) 1px,transparent 1px);background-size:24px 24px;opacity:.12;mask-image:linear-gradient(90deg,transparent 42%,#000 90%);z-index:-2}.number-field{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none;mask-image:linear-gradient(90deg,transparent 13%,#000 60%)}.number-field span{position:absolute;top:-20%;font:600 12px/1 monospace;color:rgba(93,107,255,.22);writing-mode:vertical-rl;letter-spacing:13px;animation:number-fall var(--duration) linear infinite;animation-delay:var(--delay)}@keyframes number-fall{to{transform:translateY(125vh)}}
.hero-content{z-index:3;position:relative;align-self:center;max-width:780px}.eyebrow,.section-kicker{font:800 12px/1.2 monospace;letter-spacing:.16em;color:var(--lavender);display:flex;align-items:center;gap:14px}.eyebrow-line{height:2px;width:48px;background:var(--lavender)}.eyebrow-number{opacity:.55}.hero h1{margin:22px 0 7px;font-family:Impact,"Arial Black",sans-serif;font-weight:1000;line-height:.83;letter-spacing:-.055em;text-transform:uppercase;filter:drop-shadow(0 0 25px rgba(86,81,255,.25))}.hero-ux{display:block;font-size:clamp(90px,11.8vw,187px);color:var(--paper);-webkit-text-stroke:1px #fff}.hero-alchemist{display:block;font-size:clamp(72px,10vw,159px);color:var(--lavender);white-space:nowrap;letter-spacing:-.065em;text-shadow:4px 5px 0 #241664,0 0 26px rgba(146,40,232,.4)}.title-period{color:var(--blue)}.special-e{position:relative;display:inline-block}.special-e i{position:absolute;left:39%;top:-.20em;width:.18em;height:.027em;background:var(--paper);transform:rotate(-17deg);box-shadow:.025em -.052em 0 var(--paper),.055em -.103em 0 var(--paper);border-radius:10px}.hero-tagline{font-size:clamp(21px,2.1vw,33px);font-weight:650;margin:25px 0 39px;letter-spacing:-.03em}.hero-actions{display:flex;gap:25px;align-items:center}.enter-button,.connect-button{border:2px solid rgba(255,255,255,.7);background:var(--blue);color:white;border-radius:999px;font-size:20px;font-weight:900;letter-spacing:-.02em;padding:19px 28px 19px 36px;box-shadow:0 8px 0 #13197e,0 0 35px rgba(52,80,245,.45),inset 0 2px 10px rgba(255,255,255,.25);display:inline-flex;align-items:center;gap:24px;transition:transform .25s,box-shadow .25s}.enter-button:hover,.connect-button:hover{transform:translateY(-4px);box-shadow:0 12px 0 #13197e,0 0 45px rgba(52,80,245,.6)}.button-spark{font-size:27px;font-weight:400;line-height:0;color:#d9d0ff}.hero-note{font:800 10px/1.6 monospace;color:rgba(245,241,250,.55);letter-spacing:.07em;max-width:160px}
.hero-visual{height:min(685px,78vh);width:100%;position:relative;align-self:end;z-index:2}.ink-panel{position:absolute;inset:11% 4% 5% 4%;transform:rotate(4deg);background:linear-gradient(145deg,#29178b,#0c0b24 65%);border:5px solid #100c20;outline:3px solid var(--lavender);box-shadow:18px 21px 0 rgba(52,80,245,.42),0 0 85px rgba(146,40,232,.2)}.ink-panel:before{content:"";position:absolute;inset:18px;border:1px dashed rgba(245,241,250,.24)}.hero-halftone{position:absolute;inset:4% 0 7% 7%;transform:rotate(4deg);background-image:radial-gradient(#c5b3ff 2px,transparent 2.2px);background-size:15px 15px;mask-image:linear-gradient(135deg,#000,transparent 55%,#000);opacity:.23}.hero-avatar{position:absolute;bottom:-10px;right:-5%;height:min(750px,88vh);max-width:113%;object-fit:contain;object-position:bottom right;filter:drop-shadow(10px 12px 0 #09061c);animation:avatar-breathe 5s ease-in-out infinite;transform-origin:bottom center}@keyframes avatar-breathe{50%{transform:translateY(-10px)}}.hero-sticker{position:absolute;top:2%;right:0;z-index:3;transform:rotate(10deg);width:130px;height:130px;border-radius:50%;background:var(--paper);color:var(--ink);border:5px solid var(--ink);outline:3px solid var(--lavender);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:8px 8px 0 var(--blue)}.hero-sticker span{font:800 10px/1.1 monospace}.hero-sticker strong{font:900 16px/.98 Impact,"Arial Black",sans-serif;letter-spacing:.02em;margin-top:3px}.hero-scribble{position:absolute;left:-8%;top:9%;transform:rotate(-9deg);z-index:3;font:700 16px/1.1 "Trebuchet MS",sans-serif;font-style:italic;color:#ece5ff;letter-spacing:.08em;text-shadow:1px 1px #0a0519}.hero-scribble svg{width:78px;height:38px;display:block;margin:6px 0 0 30px;fill:none;stroke:var(--lavender);stroke-width:2}.hero-orbit{position:absolute;width:150px;height:150px;border:2px solid rgba(180,155,255,.5);border-radius:50%;transform:rotate(-24deg) scaleY(.4);z-index:-1}.hero-orbit:before,.hero-orbit:after{content:"";position:absolute;inset:0;border:2px solid rgba(180,155,255,.5);border-radius:50%;transform:rotate(65deg)}.hero-orbit:after{transform:rotate(-65deg)}.hero-orbit span:first-child{position:absolute;width:16px;height:16px;border-radius:50%;background:var(--blue);left:67%;top:-3px;box-shadow:0 0 12px var(--blue)}.orbit-one{top:18%;left:40%}.orbit-two{right:2%;bottom:14%;transform:rotate(18deg) scale(.6,.3);opacity:.55}.hero-bottom{position:absolute;left:clamp(24px,5vw,80px);right:clamp(24px,5vw,80px);bottom:25px;border-top:1px solid rgba(180,155,255,.38);padding-top:15px;display:flex;align-items:center;justify-content:space-between;color:rgba(245,241,250,.65);font:800 10px/1 monospace;letter-spacing:.1em;z-index:5}.hero-bottom a:hover{color:#fff}.hero-bottom a span{font-size:15px;margin-left:4px}
.section{padding:110px clamp(24px,5vw,80px);position:relative;scroll-margin-top:50px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:44px}.section-kicker{margin:0 0 18px}.kicker-box{display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--lavender);color:var(--paper);height:28px;min-width:33px;transform:rotate(-5deg);font-size:11px}.section-heading h2,.alchemist h2{font:900 clamp(55px,7.3vw,112px)/.95 Impact,"Arial Black",sans-serif;letter-spacing:-.035em;text-transform:uppercase;margin:0}.section-heading h2 span{color:var(--lavender)}.section-heading>p{font-size:17px;line-height:1.5;color:#cbc4de;max-width:310px;margin:0 0 5px}
.experiments{background:radial-gradient(ellipse at 96% 25%,rgba(52,80,245,.16),transparent 40%),var(--ink)}.featured-card{border:3px solid #b3a0f6;border-radius:20px;display:grid;grid-template-columns:.42fr .58fr;min-height:580px;overflow:hidden;background:linear-gradient(145deg,#151336,#0b0a20);box-shadow:12px 14px 0 #18207b,0 35px 60px rgba(0,0,0,.45);position:relative}.featured-card:before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background-image:radial-gradient(#876aff 1.2px,transparent 1.5px);background-size:13px 13px;opacity:.11;pointer-events:none}.featured-copy{padding:clamp(30px,4vw,62px);display:flex;flex-direction:column;align-items:flex-start;position:relative;z-index:1}.hand-label{background:var(--lavender);color:var(--ink);padding:9px 13px;font:900 12px/1 "Trebuchet MS",sans-serif;letter-spacing:.08em;transform:rotate(-3deg);box-shadow:5px 5px 0 #050511}.hand-label span{margin-left:12px}.featured-title{margin-top:auto}.featured-number,.card-index,.art-caption,.about-caption,.archive-list span{font:800 11px/1.2 monospace;letter-spacing:.11em;color:var(--lavender)}.featured-title h3{font:900 clamp(65px,8vw,140px)/1 Impact,"Arial Black",sans-serif;letter-spacing:-.04em;margin:6px 0 10px}.featured-copy>p{font-size:18px;line-height:1.45;color:#e0dbea;max-width:430px;margin:0 0 30px}.tag-row{display:flex;gap:8px;flex-wrap:wrap}.tag-row span{border:1px solid rgba(180,155,255,.58);border-radius:100px;padding:8px 11px;font:700 10px monospace;white-space:nowrap}.experiment-prompt{display:flex;gap:15px;border-top:1px solid var(--line);margin-top:37px;padding-top:22px;font-size:14px;line-height:1.4;color:#d4cbeb}.experiment-prompt strong{font:900 10px monospace;letter-spacing:.13em;color:var(--lavender);display:block;margin-bottom:8px}.prompt-star{font-size:35px;color:var(--lavender);line-height:1}.featured-art{position:relative;padding:58px 5% 28px 0;overflow:hidden;display:flex;align-items:center}.featured-art:before{content:"";position:absolute;inset:8% -7% -15% 0;border-radius:50%;background:var(--blue);filter:blur(100px);opacity:.42}.art-caption{position:absolute;right:6%;top:28px;z-index:2;background:#07071a;padding:7px 10px;border:1px solid var(--line)}.screens-frame{width:100%;height:445px;position:relative;transform:rotate(-3deg);border:4px solid #0b081d;outline:2px solid var(--lavender);border-radius:16px;box-shadow:18px 24px 0 rgba(9,6,38,.9),0 0 0 7px rgba(180,155,255,.17);overflow:hidden;background:#08080f}.screens-frame img{width:100%;height:100%;object-fit:cover;object-position:center 48%;display:block}.art-corner{position:absolute;width:50px;height:50px;border:3px solid var(--lavender);z-index:3}.corner-a{right:0;top:8%;border-left:0;border-bottom:0}.corner-b{bottom:4%;left:0;border-right:0;border-top:0}
.process-panel{margin-top:55px;padding:30px 32px;border:1px solid var(--line);border-radius:20px;background:rgba(180,155,255,.045)}.process-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:21px}.scribble-heading{font:900 22px/1 Impact,"Arial Black",sans-serif;letter-spacing:.03em;transform:rotate(-2deg);color:var(--paper)}.process-heading p{font-size:14px;color:#b7b1c9;margin:0}.stage-tabs{display:flex;gap:8px;flex-wrap:wrap}.stage-tabs button{background:transparent;border:1px solid rgba(180,155,255,.4);border-radius:999px;color:#d3cce1;padding:10px 14px;font-weight:700;font-size:12px;transition:background .2s,transform .2s}.stage-tabs button:hover{transform:translateY(-2px);border-color:var(--lavender)}.stage-tabs button[aria-selected=true]{background:var(--lavender);color:#100b2b;border-color:var(--lavender)}.stage-content{min-height:160px;margin-top:24px;border-radius:14px;background:linear-gradient(90deg,#22205a,#11122e);padding:27px 34px;display:grid;grid-template-columns:80px 1fr 70px;gap:20px;align-items:center;border:1px solid rgba(180,155,255,.3)}.stage-index{font:800 12px monospace;color:var(--lavender);align-self:start}.stage-content h4{font:900 28px/1 Impact,"Arial Black",sans-serif;text-transform:uppercase;margin:0 0 7px}.stage-content p{font-size:15px;line-height:1.45;color:#d6d2e7;margin:0;max-width:770px}.stage-doodle{font:italic 90px/1 Georgia,serif;color:rgba(180,155,255,.32);text-align:center;transform:rotate(10deg)}
.alchemist{min-height:720px;display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,8vw,130px);align-items:center;background:radial-gradient(ellipse at 12% 53%,#222264 0,transparent 46%),#080717;overflow:hidden}.alchemist:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(180,155,255,.6) 2px,transparent 2.2px);background-size:15px 15px;opacity:.14;mask-image:linear-gradient(90deg,#000,transparent 30%);pointer-events:none}.alchemist-visual{position:relative}.about-frame{height:560px;position:relative;border:4px solid var(--lavender);border-radius:45% 45% 15px 15px;background:linear-gradient(165deg,#4332af 0,#1c1555 39%,#0a081a 80%);transform:rotate(-3deg);box-shadow:16px 17px 0 #070514,0 0 0 8px rgba(180,155,255,.12);overflow:hidden}.about-frame:before{content:"";position:absolute;inset:20px;border:2px dashed rgba(245,241,250,.25);border-radius:inherit}.about-frame img{position:absolute;height:108%;max-width:110%;width:auto;bottom:-3%;left:50%;transform:translateX(-50%) rotate(3deg);object-fit:contain;object-position:bottom center;filter:drop-shadow(7px 10px 0 #0a071d)}.about-orbit{position:absolute;top:12%;right:8%;width:160px;height:160px;border:3px solid rgba(232,220,255,.65);border-radius:50%;transform:rotate(30deg) scaleY(.38)}.about-orbit:before,.about-orbit:after{content:"";position:absolute;inset:0;border:3px solid rgba(232,220,255,.65);border-radius:50%;transform:rotate(65deg)}.about-orbit:after{transform:rotate(-65deg)}.about-stamp{position:absolute;left:20px;top:25px;z-index:3;color:var(--paper);border:2px solid var(--paper);padding:9px;font:900 12px/1 Impact,"Arial Black",sans-serif;letter-spacing:.07em;transform:rotate(-8deg);background:var(--blue)}.about-caption{margin:25px 0 0 10px}.alchemist h2{margin-bottom:25px}.alchemist h2 em{font-style:normal;color:var(--lavender)}.hand-underline{width:64%;height:13px;border-bottom:5px solid var(--blue);border-radius:50%;transform:rotate(-3deg);margin:-20px 0 35px 3px}.about-lead{font-size:clamp(22px,2.4vw,35px);font-weight:700;line-height:1.25;letter-spacing:-.025em;margin:0 0 22px}.alchemist-copy>p:not(.section-kicker):not(.about-lead){font-size:16px;line-height:1.75;color:#c9c5d7;max-width:690px}.about-footnote{border-top:1px solid var(--line);margin-top:35px;padding-top:20px;display:flex;align-items:center;gap:22px}.about-footnote span{font:800 10px/1.2 monospace;letter-spacing:.1em;color:var(--lavender)}.about-footnote strong{font-size:13px;font-weight:700}
.catalyst{background:#0b0a1e}.catalyst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.catalyst-card{min-height:340px;padding:27px;border:2px solid rgba(180,155,255,.55);border-radius:8px;background:linear-gradient(145deg,#211c5e,#12102c);position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s}.catalyst-card:nth-child(2){background:linear-gradient(145deg,#412376,#1b153b)}.catalyst-card:nth-child(3){background:linear-gradient(145deg,#183ca3,#121937)}.catalyst-card:hover{transform:translateY(-7px) rotate(-1deg);box-shadow:8px 11px 0 #050511}.catalyst-card:before{content:"";position:absolute;right:-40px;top:-45px;width:170px;height:170px;background-image:radial-gradient(rgba(255,255,255,.6) 2px,transparent 2px);background-size:13px 13px;opacity:.18}.card-index{color:#ddd0ff}.catalyst-card h3{font:900 39px/1 Impact,"Arial Black",sans-serif;letter-spacing:-.01em;margin:5px 0 11px}.catalyst-card p{font-size:15px;line-height:1.55;max-width:290px;color:#e0d9ec;margin:0}.card-illustration{height:170px;display:flex;align-items:center;justify-content:center;color:var(--lavender)}.eye-illustration:before{content:"";width:128px;height:75px;border:5px solid var(--lavender);border-radius:100% 0;transform:rotate(45deg);position:absolute}.eye-illustration span{width:54px;height:54px;border-radius:50%;border:7px solid var(--paper);background:var(--blue);z-index:1}.atom-illustration{position:relative}.atom-illustration span{position:absolute;width:150px;height:63px;border:4px solid var(--lavender);border-radius:50%}.atom-illustration span:nth-child(2){transform:rotate(60deg)}.atom-illustration span:nth-child(3){transform:rotate(-60deg)}.atom-illustration:after{content:"";width:22px;height:22px;border-radius:50%;background:var(--paper);z-index:1}.spark-illustration{font-size:125px;line-height:1;color:var(--lavender);text-shadow:8px 8px var(--amethyst)}
.archive{background:linear-gradient(145deg,#090818,#15103a)}.archive-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.archive-list>div{border:2px solid rgba(180,155,255,.45);padding:34px;min-height:230px;position:relative;overflow:hidden;background:rgba(245,241,250,.045)}.archive-list>div:after{content:"✦";font:100px/1 Georgia,serif;color:rgba(180,155,255,.12);position:absolute;right:15px;bottom:0}.archive-list h3{font:900 47px/1 Impact,"Arial Black",sans-serif;margin:38px 0 9px}.archive-list p{font-size:15px;color:#c9c3dc;margin:0;max-width:360px}.connect{text-align:center;min-height:550px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(ellipse at center,#29216f 0,#09071e 60%)}.connect .section-kicker{justify-content:center}.connect h2{font:900 clamp(65px,8vw,126px)/.95 Impact,"Arial Black",sans-serif;letter-spacing:-.03em;text-transform:uppercase;margin:20px 0}.connect h2 em{font-style:normal;color:var(--lavender)}.connect>p:not(.section-kicker){font-size:18px;color:#d5cee7;margin:0 0 32px}.connect-orbit{width:450px;height:450px;border:2px solid rgba(180,155,255,.2);border-radius:50%;position:absolute;transform:rotate(25deg) scaleY(.45);pointer-events:none}.connect-orbit:before,.connect-orbit:after{content:"";position:absolute;inset:0;border:2px solid rgba(180,155,255,.2);border-radius:50%;transform:rotate(60deg)}.connect-orbit:after{transform:rotate(-60deg)}.connect-button{font-size:17px;padding:17px 25px;position:relative;z-index:1}.connect-button span{font-size:24px;line-height:0}footer{min-height:75px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px clamp(24px,5vw,80px);color:#aaa3be;font:800 10px monospace;letter-spacing:.07em}footer a{color:var(--paper)}
.lab-transition{position:fixed;inset:0;z-index:100;pointer-events:none;display:flex;align-items:center;justify-content:space-between;flex-direction:column;padding:18vh 0;background:var(--blue);clip-path:circle(0 at 25% 65%);color:#fff;font:900 12px monospace;letter-spacing:.2em;visibility:hidden}.lab-transition.is-active{visibility:visible;animation:lab-open 1.15s cubic-bezier(.55,.03,.17,1) forwards}.transition-core{font:200px/1 Georgia,serif;animation:core-turn 1.15s ease-out forwards}@keyframes lab-open{0%{clip-path:circle(0 at 25% 65%)}50%{clip-path:circle(150vmax at 25% 65%)}76%{clip-path:circle(150vmax at 80% 50%)}100%{clip-path:circle(0 at 80% 50%);visibility:hidden}}@keyframes core-turn{to{transform:rotate(90deg) scale(1.3)}}.reveal{opacity:0;transform:translateY(28px);transition:opacity .65s ease,transform .65s ease}.reveal.in-view{opacity:1;transform:translateY(0)}
@media(max-width:1100px){.header-index{display:none}.hero{grid-template-columns:1fr 1fr}.hero-alchemist{font-size:clamp(65px,9.4vw,112px)}.hero-visual{height:610px}.hero-avatar{height:640px}.hero-sticker{right:-5%}.featured-card{grid-template-columns:.48fr .52fr}.screens-frame{height:385px}}
@media(max-width:760px){.site-header{height:68px;padding:0 22px}.wordmark{font-size:17px}.menu-toggle{display:block;z-index:21}.nav{display:none;position:absolute;top:68px;left:0;right:0;background:#0b0923;border-bottom:2px solid var(--lavender);padding:18px 24px 25px;flex-direction:column;align-items:flex-start;gap:0;box-shadow:0 20px 35px #0009}.nav.is-open{display:flex}.nav a{font-size:15px;width:100%;padding:12px 0}.hero{min-height:910px;min-height:max(790px,100svh);display:block;padding:116px 24px 75px}.hero-content{max-width:100%}.hero h1{margin-top:18px}.hero-ux{font-size:clamp(95px,19vw,145px)}.hero-alchemist{font-size:clamp(58px,11.5vw,93px)}.hero-tagline{font-size:22px;margin:18px 0 22px}.hero-actions{gap:13px}.enter-button{font-size:17px;padding:14px 21px 14px 25px;gap:16px}.hero-note{font-size:8px;max-width:125px}.hero-visual{height:410px;position:absolute;bottom:46px;right:0;width:min(95%,540px)}.ink-panel{inset:9% 6% 0 9%}.hero-avatar{height:480px;right:-7%;bottom:-12px;max-width:100%}.hero-sticker{width:92px;height:92px;top:4%;right:1%;border-width:3px}.hero-sticker span{font-size:7px}.hero-sticker strong{font-size:12px}.hero-scribble{left:-1%;top:12%;font-size:11px}.hero-scribble svg{width:55px}.orbit-one{top:26%;left:65%}.hero-bottom{left:24px;right:24px;bottom:18px;font-size:8px}.hero-bottom span:last-child{display:none}.section{padding:78px 24px}.section-heading{display:block;margin-bottom:35px}.section-heading>p{margin-top:20px}.featured-card{display:block}.featured-copy{padding:31px}.featured-title{margin-top:60px}.featured-title h3{font-size:82px}.featured-art{padding:28px 20px 38px}.screens-frame{height:360px}.art-caption{top:9px}.process-panel{padding:23px 18px}.process-heading{display:block}.process-heading p{margin-top:9px}.stage-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:10px;scrollbar-color:var(--lavender) transparent}.stage-tabs button{white-space:nowrap;flex:none}.stage-content{grid-template-columns:1fr 38px;gap:10px;padding:20px}.stage-index{grid-column:1/-1}.stage-content h4{font-size:25px}.stage-doodle{font-size:60px}.alchemist{grid-template-columns:1fr;gap:55px}.alchemist-visual{max-width:480px;margin:0 auto;width:100%;order:2}.alchemist-copy{order:1}.about-frame{height:460px}.catalyst-grid{grid-template-columns:1fr}.catalyst-card{min-height:300px}.archive-list{grid-template-columns:1fr}.connect{min-height:510px}.connect h2{font-size:clamp(58px,12vw,90px)}footer{flex-wrap:wrap;font-size:9px}}
@media(max-width:430px){.hero{min-height:790px}.hero-ux{font-size:91px}.hero-alchemist{font-size:57px}.hero-tagline{font-size:20px}.hero-visual{height:395px}.hero-avatar{height:447px}.hero-note{display:none}.featured-title h3{font-size:74px}.screens-frame{height:310px}.section-heading h2,.alchemist h2{font-size:58px}.about-frame{height:400px}.about-lead{font-size:24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}.number-field{display:none}}

/* Portfolio organization: reading shelf and résumé */
.catalyst-intro{grid-column:1/-1;scroll-margin-top:30px}.catalyst-intro .section-heading{margin-bottom:0}.alchemist{row-gap:55px}.additional-experiments{margin-top:65px}.subsection-title{font:900 clamp(32px,4vw,55px)/1.1 Impact,"Arial Black",sans-serif;margin:16px 0 30px}.subsection-title span{color:var(--lavender)}.book-gallery{display:grid;grid-template-columns:220px 1fr;gap:45px;align-items:center;padding:36px;border:1px solid var(--line);background:#ffffff05;border-radius:16px}.book-placeholder{aspect-ratio:2/3;padding:28px 22px;border:1px solid var(--lavender);border-left:10px solid #5942ae;background:linear-gradient(135deg,#292367,#110d2d);box-shadow:8px 10px 0 #050511;display:flex;flex-direction:column;justify-content:space-between;transform:rotate(-3deg)}.book-placeholder>span{font:900 38px/1 Impact,"Arial Black",sans-serif}.book-placeholder small{font:9px/1.5 monospace;color:var(--lavender)}.book-gallery-copy h3,.resume-panel h3{font:900 clamp(28px,3vw,42px)/1.1 Impact,"Arial Black",sans-serif;margin:20px 0 15px}.book-gallery-copy p,.resume-panel p{line-height:1.6;color:#c9c3dc;max-width:570px}.resume{background:#0b0a1e}.resume-panel{border:1px solid var(--line);border-radius:16px;padding:36px;display:grid;grid-template-columns:1.4fr 1fr;gap:35px;align-items:center;background:linear-gradient(135deg,#211c5e77,#11102c)}.resume-actions{display:flex;flex-direction:column;gap:20px;align-items:flex-start}.resume-download{font-size:14px;text-decoration:underline;text-underline-offset:5px}.resume-download:hover{color:var(--lavender)}.nav{gap:clamp(12px,2vw,30px)}
@media(max-width:760px){.catalyst-intro{order:0}.book-gallery,.resume-panel{grid-template-columns:1fr;padding:26px;gap:25px}.book-placeholder{width:180px;margin:0 auto}.book-gallery-copy{text-align:center}.resume-actions{align-items:stretch}.resume-actions .connect-button{text-align:center}.resume-download{text-align:center}.additional-experiments{margin-top:50px}}
/* Keep the circular formula sticker below the portrait's face. */
.hero-sticker{top:auto;bottom:8%;right:0}
@media(max-width:1100px){.hero-sticker{top:auto;bottom:8%;right:0}}
@media(max-width:760px){.hero-sticker{top:auto;bottom:7%;right:5%}}

/* Clear letterforms for the portfolio wordmark. */
.hero-alchemist{font-family:"Arial Black",Arial,sans-serif;font-weight:900;text-transform:none;letter-spacing:-.025em;font-size:clamp(55px,7.3vw,116px);line-height:1.05;text-shadow:0 0 28px rgba(146,40,232,.35)}
@media(max-width:1100px) and (min-width:761px){.hero-alchemist{font-size:7vw}}
@media(max-width:760px){.hero-alchemist{font-size:clamp(40px,10vw,72px);letter-spacing:-.025em}}

/* Matrix vortex: a brief journey through the Digital Lab. */
.lab-transition{padding:0;display:block;background:#03030d;clip-path:none;opacity:0;overflow:hidden;visibility:hidden}
.lab-transition.is-active{visibility:visible;animation:vortex-reveal 2.6s ease-in-out forwards}
.vortex-canvas{position:absolute;inset:0;width:100%;height:100%}
.vortex-center{position:absolute;left:50%;top:50%;width:9vmin;height:9vmin;border-radius:50%;transform:translate(-50%,-50%);background:#07041a;box-shadow:0 0 35px #7352ff88,0 0 100px #3450f566;pointer-events:none}
.vortex-caption{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:15svh 24px;text-align:center;pointer-events:none;text-shadow:0 2px 15px #050511,0 0 30px #050511}
.vortex-caption>span{font:700 10px/1.6 monospace;letter-spacing:.22em;color:#d8ceff}
.vortex-caption strong{font:900 clamp(18px,3.2vw,40px)/1.1 Arial,sans-serif;letter-spacing:.035em;color:#f5f1fa;margin-top:auto;margin-bottom:24px}
@keyframes vortex-reveal{0%{opacity:0;transform:scale(1.02)}12%,78%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.08);visibility:hidden}}

/* Clip the detached interface graphics while preserving the presenting avatar. */
.hero-avatar{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 94%,30% 94%,37% 85%,37% 66%,0 66%)}

.case-study-link{display:inline-flex;align-items:center;gap:18px;padding:14px 20px;margin-top:24px;border:1px solid #b49bff;border-radius:999px;background:#3450f5;color:#fff;font-weight:800;font-size:14px}.case-study-link:hover{background:#4936c7}.featured-title h3 a:focus-visible{outline-offset:8px}

/* Preserve the complete original portfolio cover at every screen size. */
.screens-frame.vittlez-cover{height:auto;aspect-ratio:16/9}.screens-frame.vittlez-cover img{object-fit:contain;object-position:center}

/* The Catalyst: the bridge from physical spaces to UX. */
.catalyst-story{background:radial-gradient(ellipse at 0 0,#28205266,transparent 60%),#0b0a1e;scroll-margin-top:68px}.catalyst-narrative{display:grid;grid-template-columns:1fr 1.3fr;gap:60px;margin:50px 0}.catalyst-narrative h3,.spatial-heading h3{font:900 clamp(32px,4vw,58px)/1.08 Impact,"Arial Black",sans-serif;margin:0;letter-spacing:-.02em}.catalyst-narrative em{font-style:normal;color:var(--lavender)}.catalyst-narrative p{color:#c9c5d7;font-size:17px;line-height:1.8;margin:0 0 18px}.design-evolution{list-style:none;padding:26px 0;margin:0 0 75px;display:grid;grid-template-columns:repeat(3,1fr);gap:25px;border-block:1px solid var(--line)}.design-evolution span{display:block;font:11px/1.5 monospace;letter-spacing:.08em;color:var(--lavender)}.design-evolution strong{display:block;margin:12px 0;font-size:21px}.design-evolution p{color:#c9c5d7;font-size:14px;line-height:1.5;margin:0}.spatial-heading{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:30px}.spatial-heading h3 span{color:var(--lavender)}.spatial-heading>p{color:#c9c5d7;line-height:1.6;font-size:14px}.spatial-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.spatial-study{margin:0;min-width:0}.spatial-open{display:block;position:relative;width:100%;padding:13px;background:#050509;border:1px solid #b49bff55;border-radius:12px;cursor:pointer;color:var(--paper);text-align:left;transition:transform .25s,border-color .25s}.spatial-open:hover{transform:translateY(-6px);border-color:var(--lavender)}.spatial-open:focus-visible,.spatial-close:focus-visible{outline:3px solid var(--lavender);outline-offset:5px}.spatial-number,.spatial-view{display:block;font:10px/1.5 monospace;letter-spacing:.07em;padding:6px 0 14px;color:var(--lavender)}.spatial-view{text-align:right;padding:13px 0 2px}.spatial-open img{display:block;width:100%;height:auto}.spatial-study h4{font-size:21px;margin:22px 0 9px}.spatial-study figcaption p{color:#c9c5d7;font-size:14px;line-height:1.6;margin:0}.spatial-note{text-align:center;font-size:15px;color:var(--lavender);margin:45px 0 0}.spatial-viewer{width:min(1000px,94vw);max-height:94svh;box-sizing:border-box;padding:18px;background:#090812;color:var(--paper);border:1px solid var(--lavender);border-radius:12px;overscroll-behavior:contain}.spatial-viewer::backdrop{background:#03020beb;backdrop-filter:blur(10px)}.spatial-tools{display:flex;justify-content:space-between;align-items:center;gap:15px;position:sticky;top:-18px;background:#090812;padding:10px 0;z-index:1}.spatial-tools p{font:10px/1.5 monospace;color:var(--lavender)}.spatial-close{background:#292051;color:white;border:1px solid #b49bff88;border-radius:30px;padding:10px 18px;cursor:pointer;white-space:nowrap}.spatial-viewer>img{display:block;width:100%;height:auto}
@media(max-width:760px){.catalyst-narrative{grid-template-columns:1fr;gap:25px;margin:35px 0}.design-evolution{grid-template-columns:1fr;gap:26px;margin-bottom:50px}.spatial-heading{display:block}.spatial-heading>p{margin-top:20px}.spatial-gallery{grid-template-columns:1fr;gap:38px}.spatial-study{max-width:520px;width:100%;margin:auto}.spatial-note{text-align:left;line-height:1.7}.spatial-tools p{font-size:9px}}
@media(prefers-reduced-motion:reduce){.spatial-open{transition:none}}

/* Real portrait in My Background */
.about-photo-frame{isolation:isolate;overflow:hidden;background:#111524}.about-photo-frame img{position:absolute;inset:0;width:100%;height:100%;max-width:none;left:0;bottom:0;transform:none;object-fit:cover;object-position:center 36%;filter:none}.about-photo-frame .about-stamp{top:auto;bottom:24px;left:22px}

/* Archive reading shelf */
.reading-shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.reading-book{display:flex;flex-direction:column;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,#211c4244,#ffffff03);overflow:hidden;transition:transform .25s,border-color .25s}.reading-book:hover{transform:translateY(-7px);border-color:var(--lavender)}.reading-book:focus-visible{outline:3px solid var(--lavender);outline-offset:5px}.reading-cover{height:330px;display:flex;align-items:center;justify-content:center;padding:30px;background:radial-gradient(ellipse at center,#6955a126,transparent 75%);border-bottom:1px solid var(--line)}.reading-cover img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(8px 12px 10px #0008)}.reading-details{padding:24px}.reading-topic{font:11px/1.5 monospace;text-transform:uppercase;letter-spacing:1.5px;color:var(--lavender)}.reading-details h3{font:900 30px/1.15 Impact,"Arial Black",sans-serif;margin:10px 0}.reading-details h3 span{font:20px sans-serif;color:var(--lavender)}.reading-details p{font-size:14px;line-height:1.6;color:#c9c3dc;margin:0}@media(max-width:760px){.reading-shelf{grid-template-columns:1fr;gap:22px}.reading-cover{height:300px}.reading-details{padding:22px}}

.services{background:radial-gradient(ellipse at 5% 45%,#20145188,transparent 50%),#090817}.services-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:clamp(30px,5vw,80px);align-items:start}.services-intro{min-width:0}.services-avatar{height:300px;position:relative;isolation:isolate;overflow:hidden;margin-bottom:28px;border-bottom:1px solid var(--line)}.services-avatar img{position:relative;display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 0 28px #6642bc55)}.services-orbit{position:absolute;width:230px;height:230px;border:1px solid #b49bff55;border-radius:50%;left:50%;top:40px;transform:translateX(-50%);box-shadow:0 0 70px #3450f522,inset 0 0 60px #9228e822}.services-intro h3{font-size:clamp(26px,2.6vw,38px);line-height:1.2;letter-spacing:-.04em;margin:20px 0}.services-intro h3 em{color:var(--lavender);font-style:normal}.services-intro>p:not(.section-kicker){color:#c9c3dc;font-size:15px;line-height:1.8;margin-bottom:25px}.services-intro .connect-button{font-size:13px;max-width:100%;line-height:1.5}.services-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.service-card{padding:clamp(22px,2.4vw,34px);border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,#2c235b66,#ffffff03);min-width:0}.service-index{font:11px/1.5 monospace;letter-spacing:.12em;color:var(--lavender)}.service-card h3{font-size:23px;line-height:1.2;letter-spacing:-.03em;margin:18px 0 24px}.service-card ul{list-style:none;padding:0;margin:0}.service-card li{font-size:14px;line-height:1.6;color:#d4cde3;padding:10px 0;border-top:1px solid #b49bff22}.service-card li:last-child{padding-bottom:0}@media(min-width:761px){.nav{gap:clamp(10px,1.4vw,23px)}.header-index{display:none}}@media(max-width:1000px){.services-layout{grid-template-columns:1fr}.services-intro{max-width:600px}.services-avatar{height:280px}}@media(max-width:600px){.services-grid{grid-template-columns:1fr}.service-card{padding:26px}.services-intro .connect-button{display:inline-flex}.services-avatar{height:270px}}

/* Vittlez title and tab readability. */
.featured-title h3{font-family:Inter,Arial,sans-serif;font-size:clamp(52px,6vw,88px);font-weight:800;letter-spacing:-.035em;line-height:1.08}
#stage-content{height:auto;min-height:160px}
#stage-content p{line-height:1.7;max-width:78ch}
@media(max-width:760px){.featured-title h3{font-size:clamp(48px,12vw,74px)}}