:root { --paper:#fff9df; --ink:#2d2926; --green:#88c93f; --orange:#ff7a27; --purple:#8d5bc1; --blue:#3b86d9; --red:#ef4b43; --yellow:#ffd638; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Comic Sans MS","Chalkboard SE","Bradley Hand",cursive; font-weight:700; }
a { color:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
.paper-world { position:relative; min-height:100vh; overflow:hidden; background:repeating-linear-gradient(0deg,transparent 0 34px,rgba(56,134,217,.08) 35px 36px),var(--paper); }
.paper-world::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.14; background-image:radial-gradient(#6e583a .7px,transparent .8px); background-size:9px 8px; }
.scribble-nav { position:relative; z-index:5; display:flex; align-items:center; justify-content:space-between; width:min(1180px,calc(100% - 34px)); margin:0 auto; padding:22px 4px 8px; }
.logo { font-family:"Comic Sans MS","Chalkboard SE",cursive; font-size:clamp(1.8rem,4vw,3rem); font-weight:900; letter-spacing:.04em; text-decoration:none; transform:rotate(-5deg) skewX(-3deg); text-shadow:2px 2px 0 var(--yellow),-1px 1px 0 var(--red); }
.scribble-nav nav { display:flex; gap:10px; }
.scribble-nav nav a { padding:7px 13px; border:4px solid var(--ink); border-radius:51% 43% 47% 55%; background:#fff; font-family:"Comic Sans MS","Chalkboard SE",cursive; font-weight:900; letter-spacing:.08em; text-decoration:none; box-shadow:3px 4px 0 var(--ink); transition:transform .15s; }
.scribble-nav nav a:nth-child(1) { background:var(--green); transform:rotate(2deg); }
.scribble-nav nav a:nth-child(2) { background:var(--yellow); transform:rotate(-2deg); }
.scribble-nav nav a:nth-child(3) { background:#75c9ff; transform:rotate(3deg); }
.scribble-nav nav a:hover { transform:translateY(-3px) rotate(-2deg); }
.hero { position:relative; z-index:2; width:min(1180px,calc(100% - 34px)); min-height:calc(100vh - 145px); margin:0 auto; display:grid; grid-template-columns:1.02fr .98fr; align-items:center; gap:20px; padding:25px 0 60px; }
.copy { position:relative; z-index:4; }
.tiny-note { display:inline-block; margin:0 0 10px; padding:5px 10px; border:4px dashed var(--red); color:var(--red); font-family:"Comic Sans MS","Chalkboard SE",cursive; font-size:clamp(.72rem,1.3vw,1rem); font-weight:900; letter-spacing:.04em; transform:rotate(-3deg); text-shadow:1px 1px 0 rgba(239,75,67,.25); }
h1 { margin:0; font-family:"Comic Sans MS","Chalkboard SE","Bradley Hand",cursive; font-size:clamp(4.7rem,10vw,9rem); line-height:.78; letter-spacing:0; transform:rotate(-1deg); }
.kid-line { display:block; white-space:nowrap; }
.kid-line i { display:inline-block; font-style:normal; font-weight:900; -webkit-text-stroke:2px var(--ink); paint-order:stroke fill; text-shadow:2px 3px 0 rgba(45,41,38,.18); }
.kid-line-one i:nth-child(1),.kid-line-two i:nth-child(5) { color:var(--green); transform:rotate(-7deg) translateY(3px); }
.kid-line-one i:nth-child(2),.kid-line-two i:nth-child(1),.kid-line-two i:nth-child(7) { color:var(--purple); transform:rotate(5deg) translateY(-4px) scaleY(1.08); }
.kid-line-one i:nth-child(3),.kid-line-two i:nth-child(2),.kid-line-two i:nth-child(8) { color:var(--orange); transform:rotate(-3deg) translateY(2px); }
.kid-line-one i:nth-child(4),.kid-line-two i:nth-child(3),.kid-line-two i:nth-child(6) { color:var(--red); transform:rotate(6deg) translateY(-1px) scaleX(.94); }
.kid-line-one { margin-left:3px; }
.kid-line-two { margin-top:.08em; font-size:.69em; }
.kid-line-two em { display:inline-block; width:.22em; }
.tagline { margin:28px 0 24px; font-family:"Comic Sans MS","Chalkboard SE",cursive; font-size:clamp(1.2rem,2vw,1.8rem); line-height:1.12; font-weight:900; letter-spacing:.02em; transform:rotate(-1deg); }
.buttons { display:flex; flex-wrap:wrap; gap:12px; }
.crayon-button { display:inline-block; padding:13px 20px 10px; border:5px solid var(--ink); border-radius:42% 57% 46% 53%; box-shadow:5px 6px 0 var(--ink); font-family:"Comic Sans MS","Chalkboard SE",cursive; font-size:1.03rem; font-weight:900; letter-spacing:.04em; text-decoration:none; transition:transform .15s,box-shadow .15s; }
.crayon-button:hover { transform:translate(3px,3px) rotate(-2deg); box-shadow:2px 3px 0 var(--ink); }
.crayon-button.pump { background:var(--green); transform:rotate(-2deg); }
.crayon-button.x { background:var(--yellow); transform:rotate(1deg); }
.crayon-button.tg { background:#71c7ff; transform:rotate(-1deg); }
.ca-box { width:min(100%,610px); margin-top:24px; padding:10px 12px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; border:4px dashed var(--purple); border-radius:18px 9px 16px 11px; background:rgba(255,255,255,.72); color:var(--ink); cursor:pointer; font-family:inherit; text-align:left; }
.ca-box span,.ca-box b { font-weight:900; }
.ca-box b { color:var(--purple); }
.ca-box code { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:"Comic Sans MS","Chalkboard SE",cursive; font-size:.78rem; font-weight:800; letter-spacing:.03em; }
.dudu-stage { position:relative; align-self:end; min-height:540px; display:flex; align-items:flex-end; justify-content:center; }
.dudu-stage img { position:relative; z-index:2; width:min(100%,560px); max-height:580px; object-fit:contain; transform-origin:50% 90%; animation:dudu-dance 2.2s steps(2,end) infinite; filter:drop-shadow(8px 10px 0 rgba(45,41,38,.16)); }
.ground { position:absolute; z-index:1; left:-12%; right:-12%; bottom:32px; height:9px; border-radius:50%; background:var(--blue); transform:rotate(-1deg); box-shadow:0 6px 0 rgba(59,134,217,.26); }
.speech { position:absolute; z-index:4; right:2%; top:12%; margin:0; padding:10px 17px; border:4px solid var(--ink); border-radius:49% 46% 51% 44%; background:white; font-family:"Comic Sans MS","Chalkboard SE",cursive; font-weight:900; letter-spacing:.03em; transform:rotate(5deg); animation:bubble 2.2s ease-in-out infinite; }
.speech::after { content:""; position:absolute; left:28px; bottom:-15px; width:18px; height:18px; border-right:4px solid var(--ink); border-bottom:4px solid var(--ink); background:white; transform:rotate(45deg); }
.flower { position:absolute; z-index:3; bottom:38px; font-size:2.3rem; color:var(--red); }
.f1 { left:7%; transform:rotate(-10deg); }
.f2 { right:6%; color:var(--purple); transform:rotate(12deg); }
.sun { position:absolute; z-index:1; top:92px; right:5vw; color:var(--yellow); font-size:clamp(6rem,10vw,10rem); line-height:1; transform:rotate(9deg); animation:sun-wiggle 5s steps(2,end) infinite; }
.cloud { position:absolute; z-index:1; color:#7ec9f1; font-size:clamp(4rem,8vw,8rem); opacity:.7; }
.cloud-one { top:18%; left:42%; transform:rotate(-4deg); }
.cloud-two { top:43%; right:-2%; transform:rotate(6deg) scale(.7); }
footer { position:relative; z-index:5; min-height:72px; display:flex; align-items:center; justify-content:space-around; gap:16px; padding:14px 24px; border-top:7px solid var(--ink); background:var(--orange); font-family:"Comic Sans MS","Chalkboard SE",cursive; font-weight:900; letter-spacing:.04em; text-align:center; transform:rotate(.15deg); }
footer b { font-size:2rem; color:white; -webkit-text-stroke:2px var(--ink); }
@keyframes dudu-dance { 0%,100% { transform:rotate(-3deg) translateY(0); } 35% { transform:rotate(3deg) translateY(-15px) scaleY(.98); } 70% { transform:rotate(-1deg) translateY(-4px) scaleX(1.02); } }
@keyframes bubble { 0%,100% { transform:rotate(5deg) translateY(0); } 50% { transform:rotate(2deg) translateY(-10px); } }
@keyframes sun-wiggle { 0%,100% { transform:rotate(9deg); } 50% { transform:rotate(-3deg) scale(1.03); } }
@media (max-width:850px) { .hero { grid-template-columns:1fr; padding-top:45px; text-align:center; } .tiny-note { margin-inline:auto; } h1 { font-size:clamp(4.9rem,20vw,7.6rem); } .kid-line i { -webkit-text-stroke-width:1.5px; } .buttons { justify-content:center; } .ca-box { margin-inline:auto; } .dudu-stage { min-height:430px; margin-top:-35px; } .dudu-stage img { max-height:450px; } .cloud-one { left:-5%; top:11%; } footer { flex-direction:column; gap:5px; } }
@media (max-width:520px) { .scribble-nav { align-items:flex-start; } .scribble-nav nav { gap:5px; } .scribble-nav nav a { padding:6px 9px; border-width:3px; box-shadow:2px 3px 0 var(--ink); font-size:.82rem; } .hero { width:min(100% - 22px,1180px); } .crayon-button { flex:1 1 42%; padding-inline:10px; } .ca-box { grid-template-columns:auto 1fr; } .ca-box b { grid-column:1 / -1; text-align:center; } .dudu-stage { min-height:355px; } .speech { right:0; top:8%; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; } }