.hero .object,.hero .lamp,.hero .intro,.hero .music,.hero .folder,.hero .airdrop,.hero .pixel-cursor,.hero .notebook-hit,.ideas-note,.swatches,.paint-toggle{transition:left .95s cubic-bezier(.22,.8,.2,1),right .95s cubic-bezier(.22,.8,.2,1),top .95s cubic-bezier(.22,.8,.2,1),width .95s cubic-bezier(.22,.8,.2,1),transform .95s cubic-bezier(.22,.8,.2,1),opacity .5s}
.ideas-note{position:absolute;left:146px;top:390px;z-index:3;width:113px;height:115px;background:linear-gradient(165deg,#fff6b6,#eee29d);box-shadow:3px 6px 7px #5d493e20,inset 0 8px 12px #b5a45a19;transform:rotate(-11deg);padding:17px 9px 9px;text-align:left}.ideas-note:before{content:'';position:absolute;top:-9px;left:31px;width:48px;height:19px;background:#e3d5b696;transform:rotate(5deg)}.ideas-note span{font:25px/1 'Caveat',cursive}.ideas-note small{display:block;font-size:8px;margin-top:12px;color:#8c8054}.ideas-note:hover{transform:rotate(-6deg) translateY(-5px)}
.swatches{position:absolute;left:20px;top:510px;width:130px;height:135px;z-index:3;transform:rotate(8deg)}.swatches i{position:absolute;left:8px;top:0;width:48px;height:120px;background:linear-gradient(#c98170 0 74%,#fffaf2 74%);box-shadow:1px 2px 5px #47302b22;border:1px solid #735a361a;border-radius:3px;transform-origin:24px 104px;transform:rotate(8deg);transition:transform .6s}.swatches i:nth-child(2){background:linear-gradient(#ddbc7c 0 74%,#fffaf2 74%);transform:rotate(24deg)}.swatches i:nth-child(3){background:linear-gradient(#94a58b 0 74%,#fffaf2 74%);transform:rotate(40deg)}.swatches i:nth-child(4){background:linear-gradient(#9bb8c9 0 74%,#fffaf2 74%);transform:rotate(56deg)}.swatches i:nth-child(5){background:linear-gradient(#b1a4c4 0 74%,#fffaf2 74%);transform:rotate(72deg)}.swatches i:after{content:'';position:absolute;width:5px;height:5px;background:#b8ad9b;bottom:13px;left:21px;border-radius:50%;box-shadow:inset 1px 1px 1px #6c655a}.swatches[aria-pressed=true] i:nth-child(1){transform:rotate(-25deg)}.swatches[aria-pressed=true] i:nth-child(2){transform:rotate(5deg)}.swatches[aria-pressed=true] i:nth-child(3){transform:rotate(35deg)}.swatches[aria-pressed=true] i:nth-child(4){transform:rotate(65deg)}.swatches[aria-pressed=true] i:nth-child(5){transform:rotate(95deg)}.swatches>span{position:absolute;top:135px;left:4px;font:17px 'Caveat',cursive;white-space:nowrap}
.paint-toggle{position:absolute;right:3%;top:465px;z-index:7;border:2px outset #eeeee7;background:#d8d7d0;width:58px;height:83px;font:38px Georgia;color:#6e6b62;box-shadow:2px 2px #7775}.paint-toggle small{font:8px/1.4 'DM Mono',monospace;display:block}.clear-drawing{font-size:9px;padding:7px;width:100%;border-bottom:1px solid #aaa}.desk-controls button{min-width:58px}.desk-controls button[aria-pressed=true]{transform:rotate(-6deg);background:#e2e1da}.desk-controls button:after{content:attr(title);position:absolute;bottom:65px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:9px 13px;background:#181817;color:white;border-radius:13px;font-size:11px;opacity:0;pointer-events:none}.desk-controls button:hover:after,.desk-controls button:focus-visible:after{opacity:1}
.floating-tools{position:absolute;right:12%;top:265px;width:265px;height:210px;z-index:7;pointer-events:none}.floating-tools[hidden]{display:none}.floating-tools button{pointer-events:auto;position:absolute;width:72px;height:78px;border:1px solid #eee8dc;background:#fffdf5ed;box-shadow:0 5px 12px #55422718;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;animation:tool-pop .5s both}.floating-tools button:nth-child(1){left:0;top:35px;transform:rotate(-12deg)}.floating-tools button:nth-child(2){left:90px;top:0;transform:rotate(5deg);animation-delay:.05s}.floating-tools button:nth-child(3){right:0;top:50px;transform:rotate(13deg);animation-delay:.1s}.floating-tools small{font-size:8px;margin-top:5px}.floating-tools b{font-size:36px;color:#a18ac0;font-weight:400;line-height:46px}.floating-tools .tool-figma{transform:scale(.7);margin:-6px}.floating-tools p{position:absolute;top:120px;width:100%;background:#fffdf6ed;border:1px solid #e9e0d4;padding:9px;border-radius:10px;font-size:9px;line-height:1.5;text-align:center}.folder[aria-expanded=true]{transform:rotate(0) translateY(60px)}@keyframes tool-pop{from{opacity:0;translate:0 90px;scale:.4}to{opacity:1;translate:0 0;scale:1}}
body[data-mode=clean] .lamp{left:0;top:5px;width:235px}body[data-mode=clean] .clipping{left:24%;top:65px;width:125px;transform:rotate(0)}body[data-mode=clean] .notebook{left:-150px;top:460px;width:620px;transform:rotate(0)}body[data-mode=clean] .paper{left:-280px;opacity:0}body[data-mode=clean] .coffee{left:80px;top:650px;width:190px;transform:rotate(0)}body[data-mode=clean] .cream{left:28%;top:480px;width:170px;transform:rotate(0)}body[data-mode=clean] .pen{left:76%;top:80px;height:250px;width:52px;transform:rotate(0)}body[data-mode=clean] .music{right:30%;top:30px;transform:rotate(-90deg);width:245px}body[data-mode=clean] .intro{left:53%;top:390px;width:44%;text-align:right}body[data-mode=clean] .intro h1{font-size:78px}body[data-mode=clean] .statement{margin-right:0}body[data-mode=clean] .folder{right:4%;top:680px;transform:rotate(0)}body[data-mode=clean] .airdrop{right:23%;top:700px;transform:rotate(0)}body[data-mode=clean] .pixel-cursor{right:2%;top:160px}body[data-mode=clean] .ideas-note{left:15%;top:85px;transform:rotate(0)}body[data-mode=clean] .swatches{left:16%;top:280px;transform:rotate(0)}body[data-mode=clean] .paint-toggle{right:11%;top:100px}body[data-mode=clean] .notebook-hit{left:0;top:480px;width:300px;height:280px;clip-path:none}body[data-mode=clean] .floating-tools{right:3%;top:540px}
body[data-mode=notebook] .notebook{left:calc(50% - 470px);top:20px;width:940px;transform:rotate(-22deg)}body[data-mode=notebook] .intro{left:25%;top:230px;width:50%}body[data-mode=notebook] .intro h1{font-size:81px}body[data-mode=notebook] .music{right:10%;top:65px;transform:rotate(18deg);width:220px;z-index:-1}body[data-mode=notebook] .pen{left:70%;top:45px;width:62px;height:270px;transform:rotate(4deg)}body[data-mode=notebook] .coffee{left:76%;top:430px;width:190px;transform:rotate(0)}body[data-mode=notebook] .clipping{left:23%;top:70px;width:150px;transform:rotate(7deg)}body[data-mode=notebook] .airdrop{right:68%;top:520px;transform:rotate(0)}body[data-mode=notebook] .lamp{left:-400px;opacity:0}body[data-mode=notebook] .cream{left:-300px;opacity:0}body[data-mode=notebook] .paper{left:-300px;opacity:0}body[data-mode=notebook] .folder{right:-300px;opacity:0;visibility:hidden}body[data-mode=notebook] .pixel-cursor{right:-200px;opacity:0}body[data-mode=notebook] .ideas-note{left:73%;top:600px;transform:rotate(10deg)}body[data-mode=notebook] .swatches{left:-200px;opacity:0}body[data-mode=notebook] .paint-toggle{right:5%;top:580px}body[data-mode=notebook] .notebook-hit{left:38%;top:455px;width:30%;height:75px;clip-path:none;z-index:4}body[data-mode=notebook] .notebook-hit span{opacity:1;top:5px;left:25%;transform:rotate(0)}body[data-mode=notebook] .lamp-light{opacity:0}
@media(min-width:1500px){.ideas-note{left:210px;top:440px;width:140px;height:140px}.ideas-note span{font-size:30px}.swatches{left:40px;top:570px}body[data-mode=clean] .intro{top:420px}body[data-mode=notebook] .notebook{width:1100px;left:calc(50% - 550px)}body[data-mode=notebook] .intro{top:260px}body[data-mode=notebook] .notebook-hit{top:510px}}
@media(max-width:650px){.ideas-note{left:100px;top:542px;width:85px;height:91px;padding:13px 7px}.ideas-note span{font-size:19px}.ideas-note small{font-size:6px;margin-top:8px}.swatches{left:8px;top:675px;transform:scale(.62) rotate(10deg);transform-origin:top left}.paint-toggle{right:12px;top:345px;width:40px;height:60px;font-size:26px}.paint-toggle small{font-size:6px}.floating-tools{right:10px;top:380px;width:210px;transform:scale(.85);transform-origin:right top}.floating-tools button:nth-child(2){left:70px}.floating-tools p{top:135px}body[data-mode=clean] .lamp{left:-28px;top:0;width:170px}body[data-mode=clean] .clipping{left:44%;top:25px;width:76px}body[data-mode=clean] .ideas-note{left:130px;top:135px}body[data-mode=clean] .swatches{left:45px;top:230px}body[data-mode=clean] .music{right:5%;top:60px;width:110px;transform:rotate(0)}body[data-mode=clean] .pen{left:65%;top:260px;width:26px;height:115px}body[data-mode=clean] .intro{left:7%;top:370px;width:86%;text-align:center}body[data-mode=clean] .intro h1{font-size:65px}body[data-mode=clean] .notebook{left:-130px;top:575px;width:360px}body[data-mode=clean] .coffee{left:10px;top:690px;width:100px}body[data-mode=clean] .cream{left:46%;top:610px;width:80px}body[data-mode=clean] .folder{right:14px;top:660px;width:105px}body[data-mode=clean] .airdrop{right:15px;top:520px;width:115px}body[data-mode=clean] .paint-toggle{right:8%;top:270px}body[data-mode=clean] .pixel-cursor{right:65%;top:120px;width:50px}body[data-mode=clean] .notebook-hit{left:0;top:600px;width:140px;height:140px}body[data-mode=clean] .floating-tools{top:560px}body[data-mode=notebook] .notebook{left:calc(50% - 250px);top:160px;width:500px;transform:rotate(-14deg)}body[data-mode=notebook] .intro{left:12%;top:265px;width:76%}body[data-mode=notebook] .intro h1{font-size:60px}body[data-mode=notebook] .statement{font-size:11px}body[data-mode=notebook] .music{right:10px;top:35px;width:100px;z-index:0}body[data-mode=notebook] .pen{left:74%;top:205px;width:30px;height:145px}body[data-mode=notebook] .clipping{left:10%;top:150px;width:85px}body[data-mode=notebook] .coffee{left:68%;top:480px;width:100px}body[data-mode=notebook] .airdrop{right:62%;top:560px;width:115px}body[data-mode=notebook] .ideas-note{left:63%;top:610px}body[data-mode=notebook] .notebook-hit{left:28%;top:480px;width:45%;height:50px}body[data-mode=notebook] .notebook-hit span{left:5%;font-size:19px}body[data-mode=notebook] .paint-toggle{right:10%;top:730px}.desk-controls button{min-width:57px}.desk-controls{gap:9px}}
.floating-tools{right:20%}
@media(min-width:651px){body[data-mode=chaos] .folder{right:20%;top:350px}}
@media(max-width:650px){.floating-tools{right:10px}.intro h1{font-size:64px}.intro{left:10%;width:80%}.statement{max-width:310px}body[data-mode=chaos] .paint-toggle{top:435px;right:12px}}
@media(prefers-reduced-motion:reduce){.hero *{transition:none!important;animation:none!important}}
@media(max-width:650px){body[data-mode=clean] .intro{top:330px}body[data-mode=clean] .airdrop{right:115px;top:585px;width:105px}body[data-mode=clean] .folder{right:8px;top:665px;width:100px}}
/* Keep the desk objects visible and the introduction clear of interactive items. */
.clipping{z-index:1}.pen{z-index:2}
body[data-mode=chaos] .clipping{left:clamp(215px,18vw,340px);top:100px;width:165px;transform:rotate(-10deg)}
body[data-mode=chaos] .pen{left:clamp(260px,22vw,410px);top:295px;width:58px;height:265px;object-fit:contain;transform:rotate(8deg)}
.intro .statement{max-width:100%;text-align:center;text-wrap:balance}
.intro .desktop-break{display:none}
@media(min-width:651px){
 body[data-mode=chaos] .intro{left:50%;width:44%;max-width:610px;transform:translateX(-50%)}
 body[data-mode=chaos] .statement{max-width:560px;margin:18px auto}
 body[data-mode=chaos] .folder{right:10%;top:480px}
 body[data-mode=chaos] .airdrop{right:16%;top:660px}
 body[data-mode=clean] .statement{margin-left:auto;margin-right:auto}
}
@media(min-width:651px) and (max-width:1000px){body[data-mode=chaos] .intro h1{font-size:clamp(48px,7vw,72px)}body[data-mode=chaos] .folder{right:5%;top:500px}body[data-mode=chaos] .airdrop{right:13%;top:640px}}
@media(max-width:650px){body[data-mode=chaos] .clipping{left:100px;top:115px;width:100px}body[data-mode=chaos] .pen{left:140px;top:450px;width:35px;height:140px}body[data-mode=chaos] .folder{top:475px}.intro .statement{max-width:100%}}
/* The pen source has a square transparent canvas around a narrow object. */
body[data-mode=chaos] .pen{left:clamp(140px,14vw,280px);top:270px;width:260px;height:280px;object-fit:fill}
body[data-mode=clean] .pen{left:calc(76% - 100px);width:240px;object-fit:fill}
body[data-mode=notebook] .pen{left:calc(70% - 100px);width:240px;object-fit:fill}
@media(max-width:650px){body[data-mode=chaos] .pen{left:80px;top:450px;width:130px;height:140px}body[data-mode=clean] .pen{left:calc(65% - 50px);width:120px}body[data-mode=notebook] .pen{left:calc(74% - 50px);width:120px}}