.intro-sticker{position:absolute;width:1400px;height:1100px;transform-origin:0 0;pointer-events:none;z-index:1;opacity:0;transition:opacity .18s ease;overflow:visible}.typewriter{position:absolute;left:240px;top:190px;width:920px;height:1004px;filter:drop-shadow(0 12px 8px #40382f22)}.typewriter>img{display:block;width:100%;height:auto}.intro-letter{position:absolute;left:166px;top:74px;width:616px;color:#302d2a;transform:rotate(-1deg);font-family:Georgia,serif}.intro-letter h1{font:700 43px/1.1 Georgia,serif;letter-spacing:-1.5px;margin:0 0 16px}.intro-letter p{font:24px/1.4 Georgia,serif;margin:0 0 12px;white-space:pre-wrap}.intro-letter .typing:after{content:'▏';color:#8e3929;animation:cursor-blink .8s steps(1) infinite}.moving-key{position:absolute;background-image:url('typewriter.png');background-size:920px auto;border-radius:50%;width:57px;height:57px;animation:key-tap 2.8s ease-in-out infinite;animation-delay:var(--delay);transform-origin:center;will-change:transform}@keyframes key-tap{0%,7%,14%,100%{transform:translateY(0)}9%,12%{transform:translateY(4px) scale(.97)}}@keyframes cursor-blink{50%{opacity:0}}@media(prefers-reduced-motion:reduce){.moving-key,.typing:after{animation:none}}
.intro-letter{left:178px;top:70px;width:590px}.intro-letter h1{font-size:40px;margin-bottom:12px}.intro-letter p{font-size:22px;line-height:1.32;margin-bottom:8px}.intro-sticker:not(.is-typing) .moving-key{animation-play-state:paused}
.typewriter{left:290px;top:110px;width:820px;height:1116px}.intro-letter{left:165px;top:95px;width:500px;transform:rotate(-.5deg)}.intro-letter h1{font:400 42px/1.2 'Special Elite',Georgia,serif;letter-spacing:-1px;margin-bottom:24px}.intro-letter p{font:400 25px/1.4 'Courier Prime','Courier New',monospace;margin-bottom:12px}.moving-key{width:52px;height:52px;background-image:url('typewriter-v2.png');background-size:820px auto}
/* Enlarge the supplied sticker without regenerating the illustration. */
.typewriter{left:140px;top:-15px;width:1120px;height:1390px;transform:scaleY(.92);transform-origin:top center}.intro-letter{left:225px;top:130px;width:680px}.intro-letter h1{font-size:52px;line-height:1.15;margin-bottom:27px}.intro-letter p{font-size:32px;line-height:1.35;margin-bottom:18px}.moving-key{width:70px;height:70px;background-size:1120px auto}
/* Blue typewriter: each animated cap samples its own position in the supplied asset. */
.moving-key{width:64px;height:52px;background-image:url('typewriter-blue.png');background-size:1120px auto;border-radius:50%}.intro-letter{top:140px}.intro-letter p{font-size:34px;line-height:1.4}.intro-letter{color:#303640}.typewriter{filter:drop-shadow(0 12px 8px #28384c22)}
.tool-sticker{position:absolute;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;width:148px;height:166px;padding:22px 20px 15px;background:#fffefb;border:7px solid white;border-radius:27px;color:#303640;box-shadow:0 3px 0 #d1d2cf,0 10px 16px #26324824;font:500 19px/1 Helvetica,Arial,sans-serif}.tool-sticker img{width:83px;height:83px;object-fit:contain}.sticker-figma{left:85px;top:150px;transform:rotate(-12deg)}.sticker-claude{right:70px;top:255px;transform:rotate(11deg);background:#f7eee5}.sticker-codex{left:80px;top:610px;transform:rotate(8deg)}.sticker-linear{right:65px;top:760px;transform:rotate(-10deg);background:#eeedfb}.sticker-linear img{filter:invert(36%) sepia(71%) saturate(993%) hue-rotate(211deg) brightness(94%)}
.tool-sticker{width:105px;height:105px;padding:17px;border-width:5px;border-radius:20px;gap:0}.tool-sticker img{width:61px;height:61px}.tool-sticker span{display:none}
/* Ruled-paper replacement, retaining the same notebook placement. */
.typewriter{transform:scaleY(.84)}.intro-letter{left:270px;top:160px;width:660px;transform:none}.intro-letter h1{line-height:60px;margin-bottom:18px}.intro-letter p{font-size:34px;line-height:59px;margin-bottom:20px}.moving-key{width:70px;height:58px;background-image:url('typewriter-lined.png');background-size:1120px auto}
.art-sticker{position:absolute;pointer-events:none;filter:drop-shadow(0 5px 3px #27324624)}.art-sticker img{display:block;width:100%;height:100%;object-fit:contain}.sticker-pixel-cat{left:48px;top:845px;width:165px;height:178px;transform:rotate(-9deg);padding:9px;background:#fffefb;clip-path:polygon(12% 0,90% 2%,100% 89%,84% 100%,3% 96%,0 12%)}.sticker-pixel-cat img{mix-blend-mode:multiply;image-rendering:pixelated}.sticker-moon{right:42px;top:480px;width:165px;height:165px;transform:rotate(13deg);border:7px solid #fffefb;border-radius:50%;overflow:hidden;background:#fffefb}.sticker-moon img{width:110%;height:110%;max-width:none;object-fit:cover;transform:translate(-4%,-4%)}
/* Shorten the blank paper with two aligned source slices; keep the artwork and text intact. */
.typewriter-paper-top{position:absolute;left:0;top:0;width:1120px;height:765.625px;overflow:hidden}.typewriter-paper-top img{display:block;width:1120px;height:auto}.typewriter-body-crop{position:absolute;left:0;top:765.625px;width:1120px;height:743.75px;overflow:hidden}.typewriter-body-crop img{position:absolute;left:0;top:-936.25px;width:1120px;height:auto;max-width:none}
/* White ruled-paper typewriter: this asset already has the shorter sheet. */
.typewriter{top:-100px;transform:scaleY(.92);height:1453px}.intro-letter{left:285px;top:220px;width:660px}.intro-letter h1{line-height:60px;margin-bottom:4px}.intro-letter p{font-size:34px;line-height:48px;margin-bottom:14px}.moving-key{background-image:url('typewriter-white.png');background-size:1120px auto}
.rod-cat{position:absolute;left:270px;top:637px;width:112px;height:120px;mix-blend-mode:multiply;animation:cat-stroll 18s linear infinite;transform-origin:center bottom}.cat-pose{width:100%;height:100%;position:relative;animation:cat-steps 18s linear infinite;transform-origin:center bottom}.cat-pose>img{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.cat-sleep{position:absolute;right:-20px;top:0;font:23px 'Courier Prime',monospace;color:#485465;opacity:0;animation:cat-nap 18s linear infinite;white-space:nowrap}@keyframes cat-stroll{0%{transform:translateX(0) scaleX(1)}25%,44%{transform:translateX(390px) scaleX(1)}46%{transform:translateX(390px) scaleX(-1)}71%,96%{transform:translateX(0) scaleX(-1)}98%,100%{transform:translateX(0) scaleX(1)}}@keyframes cat-steps{0%,4%,8%,12%,16%,20%,24%,46%,50%,54%,58%,62%,66%,70%,98%,100%{transform:translateY(0)}2%,6%,10%,14%,18%,22%,48%,52%,56%,60%,64%,68%{transform:translateY(-5px) rotate(-2deg)}27%,43%,74%,95%{transform:scaleY(.72) translateY(1px)}}@keyframes cat-nap{0%,26%,44%,73%,97%,100%{opacity:0}30%,40%,78%,91%{opacity:.7}}@media(prefers-reduced-motion:reduce){.rod-cat,.cat-pose,.cat-sleep{animation:none}}
/* Add two ruled-paper lines above the machine without stretching its keys. */
.white-paper-top{position:absolute;left:0;top:0;width:1120px;height:610.354px;overflow:hidden}.white-paper-top img{display:block;width:1120px;height:auto}.white-machine-bottom{position:absolute;left:0;top:610.354px;width:1120px;height:938px;overflow:hidden}.white-machine-bottom img{position:absolute;left:0;top:-514.750px;width:1120px;height:auto;max-width:none}.rod-cat{top:731px;left:260px;width:140px;height:112px;animation:none;mix-blend-mode:normal;transform-origin:center bottom}.rod-cat canvas{display:block;width:140px;height:112px;image-rendering:pixelated}
.rod-cat{top:749px}
.white-paper-top{height:559.491px}.white-machine-bottom{top:559.491px;height:989px}.white-machine-bottom img{top:-463.869px}
/* Each animated cap has a fixed dark socket covering its printed counterpart. */
.key-unit{position:absolute;display:block;width:70px;height:58px;background:#282c30;border-radius:50%;box-shadow:0 3px 3px #1118}.key-unit .moving-key{left:0;top:0;display:block;animation:key-press-clean 4.6s ease-in-out infinite;animation-delay:var(--delay);transform-origin:center bottom}.rod-cat{display:none}@keyframes key-press-clean{0%,5%,12%,100%{transform:translateY(0)}7%,10%{transform:translateY(3px)}}@media(prefers-reduced-motion:reduce){.key-unit .moving-key{animation:none}}
/* Original-image keyboard, with localized deformation and no separate caps. */
.key-unit,.moving-key{display:none!important}.white-machine-bottom .keyboard-original{position:absolute;left:0;top:-463.869px;width:1120px;height:auto;max-width:none;display:block}
/* A loose collage around the central introduction, with the chair crossing the notebook edge. */
.sticker-figma{left:90px;top:235px;transform:rotate(-11deg)}.sticker-codex{left:145px;top:480px;transform:rotate(8deg)}.sticker-claude{right:100px;top:360px;transform:rotate(10deg)}.sticker-linear{right:70px;top:815px;transform:rotate(-8deg)}.sticker-moon{right:40px;top:565px;width:150px;height:150px;transform:rotate(8deg)}
.sticker-sun{left:58px;top:36px;width:215px;height:215px;transform:rotate(-12deg);filter:drop-shadow(0 4px 2px #2732461c)}.sticker-sun img{clip-path:polygon(50% 14%,62% 14%,64% 31%,76% 20%,86% 26%,76% 42%,89% 38%,92% 49%,76% 57%,89% 62%,85% 75%,65% 67%,68% 87%,55% 92%,49% 74%,42% 89%,32% 86%,37% 71%,24% 80%,18% 71%,31% 58%,15% 59%,13% 48%,32% 45%,17% 38%,21% 29%,38% 36%,27% 24%,33% 17%,48% 36%);mix-blend-mode:multiply}
.sticker-chair{left:-85px;top:840px;width:300px;height:304px;transform:rotate(-9deg);padding:7px;background:#fffefb;border-radius:38px;clip-path:polygon(7% 1%,77% 0,83% 30%,100% 49%,99% 69%,76% 81%,74% 100%,44% 94%,15% 94%,8% 77%,0 61%)}.sticker-chair img{mix-blend-mode:multiply}
.sticker-orange{right:8px;top:73px;width:205px;height:205px;transform:rotate(12deg);background:#fffefb;border:6px solid #fffefb;border-radius:50%;overflow:hidden}.sticker-orange img{position:absolute;width:136%;height:auto;max-width:none;left:-12%;top:-24%;object-fit:initial}
.sticker-chair{padding:0;background:transparent;clip-path:polygon(12% 8%,60% 5%,66% 13%,68% 36%,87% 45%,96% 53%,96% 62%,86% 72%,68% 78%,67% 96%,59% 98%,49% 83%,22% 90%,17% 85%,43% 75%,13% 66%,8% 48%)}
.sticker-sun{top:8px;left:50px;mix-blend-mode:multiply}.sticker-figma{top:320px;left:80px}.sticker-orange{width:160px;height:160px;right:35px;top:82px}.sticker-moon{width:190px;height:190px;right:17px;top:535px}
.tool-sticker,.art-sticker{pointer-events:auto;cursor:default;translate:var(--hover-x,0px) var(--hover-y,0px);transition:translate 180ms ease-out,filter 180ms ease-out;will-change:translate}.tool-sticker:hover{filter:drop-shadow(0 5px 3px #27324618)}
/* Rounded image mask inside an unclipped shadow wrapper. */
.sticker-chair{clip-path:none;border-radius:0;overflow:visible;filter:drop-shadow(0 8px 5px #27324630)}.sticker-chair img{mask-image:url('stickers/chair-mask.svg');mask-size:100% 100%;mask-repeat:no-repeat;mix-blend-mode:normal}.tool-sticker,.art-sticker{transition:translate 260ms cubic-bezier(.2,.8,.2,1),filter 260ms ease}.tool-sticker::before,.art-sticker::before{content:'';position:absolute;inset:-22px;pointer-events:auto}

.intro-sticker{transition:none}

/* Keep the page-turn cue clear while balancing the introduction collage. */
.sticker-moon{left:38px;right:auto;top:34px;width:190px;height:190px;transform:rotate(-9deg)}
.sticker-figma{left:74px;top:306px;transform:rotate(-11deg)}
.sticker-codex{left:103px;top:558px;transform:rotate(8deg)}
.sticker-claude{right:50px;top:657px;transform:rotate(10deg)}
.sticker-linear{right:74px;top:848px;transform:rotate(-8deg)}

.sticker-figma{left:auto;right:58px;top:561px;transform:rotate(-10deg)}
.sticker-claude{right:65px;top:802px;transform:rotate(9deg)}

.sticker-orange{top:130px}.sticker-codex{top:490px}

.sticker-codex{top:430px}