@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;600;700;800&display=swap');
:root{--paper:#fffdf7;--ink:#111113;--blue:#124bff;--coral:#ff7e8a;--muted:#51586a}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid var(--blue);outline-offset:5px}::selection{background:#ffeb60;color:#111}.wrap{max-width:1360px;padding:0 52px;margin:auto}.blue{color:var(--blue)}header{height:105px;display:flex;align-items:center;justify-content:space-between}.brand{display:inline-flex;align-items:center;font-family:Manrope,Arial,sans-serif;font-size:30px;letter-spacing:-1.6px;font-weight:800}.asterisk{font-size:45px;line-height:1;color:var(--blue);margin-right:10px;transition:transform .4s}.brand:hover .asterisk{transform:rotate(90deg)}nav{display:flex;gap:37px;align-items:center;font-size:14px;font-weight:700}nav a:not(.talk){padding:8px 0;border-bottom:2px solid transparent}nav a:hover{border-color:var(--blue)}.talk{padding:13px 25px;border-radius:40px;background:var(--coral)}.hero{display:grid;grid-template-columns:1.12fr 1fr;align-items:center;min-height:550px;padding:35px 0 57px;gap:5px}.hero-copy{position:relative;z-index:2}.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11px;padding:8px 12px;background:#e6f0ff;border-radius:30px;margin-bottom:26px;font-weight:600}.eyebrow i{height:7px;width:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px #cbdfff}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:Manrope,Arial,sans-serif}h1{font-size:clamp(42px,4.65vw,65px);line-height:1.07;letter-spacing:-3.5px;font-weight:800;white-space:nowrap}.playful{color:var(--blue);position:relative;display:inline-block;z-index:0}.playful:after{content:'';position:absolute;background:#ffe229;height:10px;bottom:-2px;left:-3px;right:-4px;z-index:-1;border-radius:60% 30% 45% 30%;transform:rotate(-3deg)}.hero-copy>p{font-size:19px;line-height:1.5;color:#3d4558;margin-top:26px;font-weight:500}.actions{display:flex;gap:13px;margin-top:27px}.button{display:inline-flex;align-items:center;justify-content:center;gap:18px;border:1.5px solid transparent;border-radius:40px;padding:16px 24px;font-size:14px;font-weight:700;white-space:nowrap;transition:transform .2s,box-shadow .2s,background .2s}.button span{font-size:20px;line-height:1}.primary{background:var(--blue);color:white}.outline{border-color:#111}.button:hover{transform:translateY(-3px);box-shadow:0 7px 0 #11111112}.outline:hover{background:#fff0a4}.hand-note{font-size:12px;font-style:italic;transform:rotate(-3deg);color:#666d7a;margin:25px 0 0 22px}.hero-art{position:relative;width:100%;height:440px;margin-left:0;isolation:isolate}.dot-field{position:absolute;inset:35px 15px;background-image:radial-gradient(#cdd3dd 1px,transparent 1px);background-size:19px 19px;opacity:.6;z-index:-2}.mascot{width:310px;height:265px;position:absolute;left:90px;top:85px;background:linear-gradient(130deg,#3196ff,#064bff 43%,#0a23c5);border:5px solid #428dff;border-top-color:#98cfff;border-radius:25px;box-shadow:inset -8px -8px 10px #00198b80,inset 5px 4px 5px #8acbff80,5px 18px 20px #12347825;transform:rotate(9deg);animation:bob 6s ease-in-out infinite}.pal-top{position:absolute;inset:0 0 auto;height:48px;border-bottom:3px solid #0639b4;box-shadow:0 2px 0 #4f90ff;display:flex;align-items:center;gap:12px;padding-left:20px}.pal-top i{width:17px;height:17px;border-radius:50%;background:linear-gradient(135deg,#ffacae,#f44758);box-shadow:2px 3px 3px #00206c66}.pal-top i:nth-child(2){background:linear-gradient(135deg,#fff395,#ffbc00)}.pal-top i:nth-child(3){background:linear-gradient(135deg,#c6ff9c,#42cc42)}.eye{position:absolute;top:88px;background:radial-gradient(at 30% 25%,#fff 30%,#f3f7ff 60%,#bccbeb);width:81px;height:100px;border-radius:50%;box-shadow:4px 8px 10px #08249a80}.eye-left{left:58px}.eye-right{left:160px}.pupil{position:absolute;left:27px;top:28px;width:43px;height:58px;border-radius:50%;background:radial-gradient(at 40% 30%,#383a40,#02040a 65%);transition:translate .12s}.pupil:after{content:'';position:absolute;left:9px;top:9px;width:12px;height:16px;border-radius:50%;background:white}.eye-right .pupil{left:13px}.mouth{position:absolute;top:206px;left:117px;width:61px;height:35px;background:#071e50;border-radius:7px 7px 40px 40px;overflow:hidden;border:2px solid #1958dc}.mouth div{position:absolute;bottom:-7px;left:12px;width:39px;height:25px;background:linear-gradient(#ff94af,#ff467d);border-radius:50%}.arm{position:absolute;width:35px;height:58px;border:11px solid #1470ff;border-top-color:transparent;border-radius:45%;top:188px;box-shadow:3px 3px 4px #0622a550}.left-arm{left:-29px;rotate:25deg}.right-arm{right:-26px;rotate:-25deg}.leg{position:absolute;top:248px;width:37px;height:66px;background:linear-gradient(90deg,#237eff,#0735c9);border:2px solid #548fff;z-index:-1;border-radius:10px}.left-leg{left:58px;rotate:28deg}.right-leg{right:49px;rotate:-30deg}.shoe{position:absolute;bottom:-13px;left:-17px;width:66px;height:39px;background:linear-gradient(125deg,#fff,#d9e3fa);border:3px solid #fff;border-radius:20px 10px 18px 15px;box-shadow:2px 7px 9px #1a255326}.coral-star{position:absolute;right:2px;top:7px;font-size:125px;line-height:1;color:#ff6778;transform:rotate(16deg);text-shadow:3px 4px 0 #d63a51,-2px -2px 0 #ffb5bb,8px 16px 12px #e6385520;animation:float 5s ease-in-out infinite}.floating-tile{position:absolute;display:grid;place-items:center;background:linear-gradient(140deg,white,#edf0f9);border:2px solid #fff;border-radius:17px;box-shadow:4px 9px 9px #23315a15;color:var(--blue);font-weight:800}.code{right:0;top:187px;width:80px;height:73px;font-size:33px;rotate:10deg}.image-tile{left:3px;top:290px;width:74px;height:71px;font-size:48px;rotate:-12deg}.lines{right:6px;bottom:34px;width:84px;height:73px;rotate:7deg;padding:16px;display:flex;flex-direction:column;gap:6px;align-items:start}.lines i{height:9px;width:49px;background:#1555ff;border-radius:8px}.lines i:nth-child(2){width:40px;background:#ffdc2b}.lines i:nth-child(3){width:28px;background:#ff7c8c}.cursor{width:86px;position:absolute;top:160px;left:46px;rotate:-17deg;filter:drop-shadow(4px 7px 3px #b0843330);animation:float 4s ease-in-out infinite}.art-note{position:absolute;bottom:0;right:0;font-size:9px;font-weight:800;line-height:1.5;letter-spacing:1px;rotate:-8deg}.doodle{position:absolute;font-size:40px;font-weight:800}.d1{left:230px;bottom:2px;rotate:20deg}.d2{left:27px;top:91px;rotate:40deg}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:25px}h2{font-size:34px;line-height:1.18;letter-spacing:-1.5px;font-weight:800}.index{font-family:monospace;font-size:10px;letter-spacing:.8px;white-space:nowrap;padding-bottom:5px;color:var(--muted)}.work{padding-top:20px}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}.project{display:block;min-width:0;overflow:hidden;border-radius:14px;background:#fff;border:1px solid #d7d9dc;box-shadow:0 3px 5px #1a1e2a04;transition:transform .25s,box-shadow .25s,border-color .25s}.project:hover{transform:translateY(-6px);box-shadow:0 14px 24px #1a1e2a10;border-color:#96adff}.browser-bar{background:#1a2024;height:26px;display:flex;align-items:center;gap:5px;padding:0 11px;position:relative}.browser-bar i{width:7px;height:7px;border-radius:50%;background:#ff6258}.browser-bar i:nth-child(2){background:#ffcf44}.browser-bar i:nth-child(3){background:#69d35c}.browser-bar>span{font-size:8px;color:#a6adb5;position:absolute;left:50%;transform:translateX(-50%);letter-spacing:.5px}.browser-bar>b{color:#929aa4;font-size:12px;font-weight:400;margin-left:auto}.project-image{aspect-ratio:1265/712;overflow:hidden;background:#edf0f4}.project-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s}.project:hover img{transform:scale(1.025)}.caption{display:flex;align-items:center;gap:12px;padding:13px 15px;min-height:62px}.caption h3{font-size:15px;font-weight:800;letter-spacing:-.6px;white-space:nowrap}.caption>span{font-size:11px;color:var(--muted);line-height:1.4}.caption em{display:block;font-size:9px;font-style:normal;color:#8d6818}.arrow{display:grid;place-items:center;width:29px;height:29px;flex-shrink:0;border-radius:50%;background:#111;color:white;font-weight:400;margin-left:auto;transition:transform .25s,background .25s}.project:hover .arrow{background:var(--blue);transform:rotate(45deg)}.work-note{display:flex;align-items:center;gap:9px;margin-top:20px;color:#727986;font-size:11px}.work-note>span{color:var(--blue);font-size:17px}.about{display:grid;grid-template-columns:1fr 1fr;gap:65px;border-top:1px solid #deded9;padding:64px 0 68px;margin-top:59px}.mini-label{font-family:monospace;font-size:10px;letter-spacing:1.7px;display:block;margin-bottom:17px}.about h2{font-size:43px;line-height:1.15}.about-copy{padding-top:23px;color:#4b5362;font-size:16px;line-height:1.75}.about-copy p+p{margin-top:14px}.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.tags span{border:1px solid #d9dcd9;border-radius:30px;color:#20242b;padding:5px 13px;font-size:11px;background:#fff}.tags span:nth-child(2){background:#fff0ac}.tags span:nth-child(3){background:#e5eaff}.contact{position:relative;background:var(--coral);border-radius:30px;padding:38px 39px;display:flex;align-items:center;justify-content:space-between;gap:20px;overflow:hidden}.contact .mini-label{margin-bottom:12px}.contact h2{font-size:37px;letter-spacing:-1.7px}.contact p{font-size:14px;line-height:1.6;margin-top:11px}.dark{color:#fff;background:#111;padding:17px 30px;position:relative;z-index:1}.dark:hover{background:var(--blue)}.contact-doodle{position:absolute;right:204px;top:14px;font-size:45px;rotate:13deg;opacity:.8}footer{display:flex;justify-content:space-between;align-items:center;padding:35px 0 31px;gap:20px}footer .brand{font-size:23px}footer p,footer>a:last-child{font-size:12px}.skip{position:fixed;top:-100px;left:20px;background:#111;color:white;padding:15px;z-index:10}.skip:focus{top:15px}
@keyframes bob{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -10px;rotate:-1deg}}@keyframes float{0%,100%{translate:0 0}50%{translate:0 -11px}}
@media(max-width:1150px){.wrap{padding:0 32px}h1{font-size:49px;letter-spacing:-2.8px}.hero-copy>p{font-size:17px}.hero-art{scale:.88;transform-origin:center; margin-left:-10px}.caption{gap:9px;padding:12px}.caption h3{font-size:13px}.caption>span{font-size:10px}h2{font-size:28px}.index{font-size:9px}.contact h2{font-size:31px}.contact p{max-width:450px}.contact-doodle{display:none}.hero{min-height:500px}.art-note{display:none}}
@media(max-width:900px){.hero{grid-template-columns:1fr;min-height:unset;padding-top:25px;padding-bottom:25px}.hero-copy{text-align:center}.hero-art{width:480px;max-width:100%;margin:5px auto -10px;scale:1}.actions{justify-content:center}.hand-note{display:none}h1{font-size:clamp(39px,7vw,62px);letter-spacing:-2.5px}.hero-copy>p{font-size:18px}.section-heading{align-items:start;flex-direction:column;gap:9px}.caption{flex-wrap:wrap;gap:3px;padding:11px 43px 11px 12px;position:relative;min-height:64px}.caption h3{font-size:13px;flex-basis:100%}.arrow{width:24px;height:24px;position:absolute;right:10px;top:50%;transform:translateY(-50%)}.project:hover .arrow{transform:translateY(-50%) rotate(45deg)}.about{gap:32px;padding:40px 0;margin-top:38px}.about h2{font-size:32px}.about-copy{font-size:14px;padding-top:0}.contact{align-items:flex-start;flex-direction:column;padding:29px;gap:22px}.contact h2{font-size:34px}.contact .button{font-size:13px;padding:13px 22px}}
@media(max-width:600px){.wrap{padding:0 20px}header{height:82px}.brand{font-size:23px;letter-spacing:-1.2px}.asterisk{font-size:31px;margin-right:6px}nav{gap:17px;font-size:12px}nav>a:first-child{display:none}.talk{font-size:11px;padding:10px 14px}.hero{padding-top:19px}.eyebrow{font-size:9px;gap:8px;padding:8px 10px}h1{font-size:clamp(29px,8vw,46px);letter-spacing:-1.7px}.hero-copy>p{font-size:16px;line-height:1.6}.actions{gap:10px}.button{font-size:12px;padding:14px 18px;gap:10px}.hero-art{height:360px;width:420px;scale:.85;transform-origin:top center;margin:5px auto -40px;left:50%;translate:-50% 0;max-width:none}.mascot{left:67px}.cursor{left:25px}.code{right:-3px}.coral-star{right:-4px}.image-tile{left:-10px}.lines{right:-7px;bottom:-38px}.dot-field{bottom:-40px}.art-note,.doodle{display:none}.project-grid{grid-template-columns:1fr;gap:21px}.caption{padding:13px 49px 13px 14px;min-height:63px;gap:4px}.caption h3{font-size:15px}.caption>span{font-size:11px}.caption em{display:inline;font-size:9px;margin-left:6px}.arrow{width:28px;height:28px;right:13px}h2{font-size:28px;letter-spacing:-1.2px}.section-heading{gap:12px;margin-bottom:20px}.index{font-size:10px}.work{padding-top:10px}.work-note{font-size:10px;align-items:start;line-height:1.6}.about{grid-template-columns:1fr;gap:23px;margin-top:32px;padding:35px 0}.about h2{font-size:31px}.about h2 br{display:none}.about h2 br:after{content:' '}.about-copy{font-size:14px}.contact{padding:26px 22px;gap:22px;border-radius:23px}.contact h2{font-size:30px;letter-spacing:-1.2px}.contact p{font-size:13px}.contact .mini-label{font-size:8px}footer{flex-wrap:wrap;gap:17px;padding:27px 0}footer .brand{font-size:21px}footer p{order:3;flex-basis:100%;text-align:center;padding-top:6px;font-size:11px}footer>a:last-child{font-size:11px;margin-left:auto}.mini-label{font-size:9px;letter-spacing:1px}}
@media(max-width:380px){.hero-art{scale:.74;margin-bottom:-70px}nav{gap:11px}.brand{font-size:21px}.asterisk{font-size:27px}.button{padding:13px 15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
@media(max-width:900px){.hero{grid-template-columns:minmax(0,1fr)}.hero-copy{min-width:0}}
@media(max-width:600px){.hero-art{width:340px;height:360px;scale:.85;left:auto;translate:none;margin:5px auto -40px}.mascot{left:17px}.coral-star{right:-18px}.code{right:-28px}.cursor{left:-18px}.image-tile{left:-40px}.lines{right:-30px}.about h2 br{display:initial}}
@media(max-width:380px){.hero-art{width:300px;scale:.74;margin-bottom:-70px}.mascot{left:0}.code{right:-43px}.coral-star{right:-40px}.lines{right:-45px}}