:root{--ink: #1A1417;--ink-soft: #2a2024;--cream: #FBF1DD;--cream-deep: #f4e6c8;--pink: #FF4FA3;--pink-deep: #e63b8e;--orange: #FF7A29;--orange-deep: #e96412;--purple: #7B3FE4;--purple-deep: #5f2bc4;--wobble: 1.5deg;--tone-density: 1;--rotate-mul: 1;--doodles-on: 1;--ambient-on: 1;--font-sfx: "Bangers", "Impact", system-ui;--font-body: "M PLUS Rounded 1c", system-ui;--font-hand: "Caveat", "Comic Sans MS", cursive}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;background:var(--cream);color:var(--ink);font-family:var(--font-body);font-weight:500}html,body{overflow-x:hidden}body{min-height:100vh;background-color:var(--cream);background-image:radial-gradient(rgba(26,20,23,.04) 1px,transparent 1px),radial-gradient(rgba(26,20,23,.025) 1px,transparent 1px);background-size:18px 18px,6px 6px;background-position:0 0,2px 2px}body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background-image:repeating-linear-gradient(0deg,rgba(26,20,23,.018) 0 1px,transparent 1px 28px),repeating-linear-gradient(90deg,rgba(26,20,23,.012) 0 1px,transparent 1px 28px);opacity:calc(.5 * var(--ambient-on));mix-blend-mode:multiply}.app{position:relative;z-index:1;min-height:100vh;padding:18px 24px 120px;max-width:1480px;margin:0 auto}.sticker{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-sfx);font-size:22px;letter-spacing:1.5px;padding:14px 26px 12px;background:var(--pink);color:var(--ink);border:3.5px solid var(--ink);border-radius:14px;cursor:pointer;position:relative;box-shadow:6px 6px 0 var(--ink);transform:rotate(calc(var(--wobble) * -1 * var(--rotate-mul)));transition:transform .18s cubic-bezier(.34,1.7,.64,1),box-shadow .18s,background .18s;-webkit-user-select:none;user-select:none}.sticker:hover:not(:disabled){transform:rotate(0) scale(1.05) translateY(-2px);box-shadow:8px 9px 0 var(--ink)}.sticker:active:not(:disabled){transform:rotate(0) scale(.96);box-shadow:3px 3px 0 var(--ink)}.sticker:disabled{opacity:.5;cursor:not-allowed}.sticker.purple{background:var(--purple);color:var(--cream)}.sticker.orange{background:var(--orange);color:var(--ink)}.sticker.cream{background:var(--cream);color:var(--ink)}.sticker.ink{background:var(--ink);color:var(--cream)}.sticker.sm{font-size:16px;padding:9px 16px 7px;border-width:3px;box-shadow:4px 4px 0 var(--ink);border-radius:11px}.sticker.xl{font-size:30px;padding:20px 36px 16px;border-width:4.5px;box-shadow:9px 9px 0 var(--ink);border-radius:18px}.sticker.breathe{animation:breathe 4s ease-in-out infinite}@keyframes breathe{0%,to{transform:rotate(calc(var(--wobble) * -1 * var(--rotate-mul))) scale(1)}50%{transform:rotate(calc(var(--wobble) * -1 * var(--rotate-mul))) scale(1.025)}}.panel{position:relative;background:var(--cream);border:4px solid var(--ink);border-radius:4px;box-shadow:7px 7px 0 var(--ink);transform:rotate(calc(var(--wobble) * .6 * var(--rotate-mul)))}.panel.r-neg{transform:rotate(calc(var(--wobble) * -.6 * var(--rotate-mul)))}.panel.straight{transform:rotate(0)}.ink-input{font-family:var(--font-body);font-weight:600;font-size:16px;width:100%;background:transparent;border:3px solid var(--ink);border-radius:10px;padding:12px 14px;color:var(--ink);outline:none;transition:box-shadow .15s,background .15s}.ink-input::placeholder{font-family:var(--font-hand);font-size:20px;color:#1a14178c;font-weight:500}.ink-input:focus{background:#7b3fe414;box-shadow:4px 4px 0 var(--purple);animation:focusWobble .35s cubic-bezier(.34,1.56,.64,1)}@keyframes focusWobble{0%{transform:rotate(0)}30%{transform:rotate(-.7deg)}60%{transform:rotate(.5deg)}to{transform:rotate(0)}}.hand{font-family:var(--font-hand);font-weight:600}.sfx{font-family:var(--font-sfx);font-weight:400;letter-spacing:2px;color:var(--ink);display:inline-block;transform:rotate(-8deg);position:relative}.notebook-field-input::placeholder{font-family:var(--font-hand);font-weight:500;color:#1a141766;font-style:italic}.bubble{position:relative;font-family:var(--font-body);font-size:15px;font-weight:600;line-height:1.35;padding:12px 16px;border:3px solid var(--ink);background:var(--cream);display:inline-block;max-width:320px;word-wrap:break-word}.bubble.oval{border-radius:22px 22px 22px 6px}.bubble.oval.right{border-radius:22px 22px 6px}.bubble.pink{background:var(--pink);color:var(--ink)}.bubble.purple{background:var(--purple);color:var(--cream);border-color:var(--ink)}.bubble.rect{border-radius:4px;border-style:solid}.bubble.rect:before{content:"";position:absolute;inset:4px;border:1.5px solid var(--ink);border-radius:2px;pointer-events:none}.speedlines{position:absolute;inset:0;pointer-events:none}.impact-frame{position:fixed;inset:0;background:var(--ink);z-index:9000;pointer-events:none;display:grid;place-items:center;animation:impactFlash .42s cubic-bezier(.5,0,.5,1) forwards}@keyframes impactFlash{0%{opacity:0;transform:scale(1.04)}20%{opacity:1;transform:scale(1)}70%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.02)}}.grid{display:grid;gap:16px}.row{display:flex;gap:12px;align-items:center}.col{display:flex;flex-direction:column;gap:12px}.screen{position:relative;min-height:480px;animation:pageIn .55s cubic-bezier(.34,1.56,.64,1)}@keyframes pageIn{0%{opacity:0;transform:translateY(14px) rotate(-.4deg)}to{opacity:1;transform:translateY(0) rotate(0)}}.spiral{display:flex;flex-direction:column;gap:12px;align-items:center;padding:18px 6px}.spiral .hole{width:12px;height:18px;border:2.5px solid var(--ink);border-radius:999px;background:#1a141714}.margin-doodles{opacity:var(--doodles-on);transition:opacity .3s}@keyframes shakeX{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-6px)}80%{transform:translate(4px)}}.shake{animation:shakeX .45s}@keyframes viewShake{0%,to{transform:translate(0)}20%{transform:translate(-4px,2px)}40%{transform:translate(3px,-3px)}60%{transform:translate(-2px,3px)}80%{transform:translate(2px,1px)}}.view-shake{animation:viewShake .35s}@keyframes bob{0%,to{transform:translateY(0) rotate(var(--r, -4deg))}50%{transform:translateY(-6px) rotate(var(--r2, 4deg))}}.bob{animation:bob 4.5s ease-in-out infinite}.bob.delay-1{animation-delay:.8s}.bob.delay-2{animation-delay:1.6s}.bob.delay-3{animation-delay:2.4s}@keyframes toneWave{0%{transform:translate(-30%) skew(-12deg);opacity:0}20%,60%{opacity:.08}to{transform:translate(130%) skew(-12deg);opacity:0}}.tone-wave{position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(115deg,rgba(255,79,163,.4) 0 2px,transparent 2px 18px);animation:toneWave 8s ease-in-out infinite;opacity:calc(.6 * var(--ambient-on));z-index:1}@keyframes pop{0%{transform:scale(0) rotate(-8deg);opacity:0}60%{transform:scale(1.18) rotate(2deg);opacity:1}to{transform:scale(1) rotate(-2deg);opacity:1}}.pop-in{animation:pop .42s cubic-bezier(.34,1.7,.64,1) both}@keyframes sfxRise{0%{transform:translate(-50%,-90%) rotate(-12deg) scale(.6);opacity:0}30%{opacity:1;transform:translate(-50%,-110%) rotate(-12deg) scale(1.15)}to{opacity:0;transform:translate(-50%,-150%) rotate(-12deg) scale(.95)}}@keyframes confettiFall{0%{transform:translateY(-10px) rotate(0);opacity:1}to{transform:translate(var(--cx,20px),140px) rotate(720deg);opacity:0}}@keyframes speakPulse{0%,to{opacity:.45}50%{opacity:.75}}@keyframes impactSilhouette{0%{opacity:0;transform:scale(.4) rotate(-12deg)}30%{opacity:1;transform:scale(1.05) rotate(0)}80%{opacity:1;transform:scale(1) rotate(0)}to{opacity:0;transform:scale(1.6) rotate(8deg)}}@keyframes highlighterDraw{0%{stroke-dashoffset:1200;opacity:1}80%{stroke-dashoffset:0;opacity:1}to{stroke-dashoffset:0;opacity:.85}}@keyframes stkShimmer{0%{background-position:-120% 0}to{background-position:220% 0}}@keyframes stkTwinkle{0%,to{opacity:.85;transform:scale(1)}50%{opacity:.35;transform:scale(.6)}}@keyframes burstSweep{0%{transform:translate(0)}to{transform:translate(220%)}}.stk-shine{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 0%,transparent 38%,rgba(255,255,255,.55) 46%,rgba(255,255,255,.75) 50%,rgba(255,255,255,.45) 54%,transparent 62%,transparent 100%);background-size:220% 100%;animation:stkShimmer 4.5s ease-in-out infinite;mix-blend-mode:screen}.stk-gloss-tl{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 50% at 22% 18%,#ffffff8c,#fff0 60%)}.stk-sparkle{animation:stkTwinkle 1.6s ease-in-out infinite}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes postcardIn{0%{opacity:0;transform:translateY(-200px) rotate(-12deg) scale(.8)}70%{opacity:1;transform:translateY(8px) rotate(-1deg) scale(1.02)}to{transform:translateY(0) rotate(-1.5deg) scale(1)}}@keyframes thudIn{0%{transform:scale(1.5)}60%{transform:scale(.9)}to{transform:scale(1)}}.tilt-a{transform:rotate(calc(var(--wobble) * -1.2 * var(--rotate-mul)))}.tilt-b{transform:rotate(calc(var(--wobble) * .9 * var(--rotate-mul)))}.tilt-c{transform:rotate(calc(var(--wobble) * -.5 * var(--rotate-mul)))}.scroll-y{overflow-y:auto;scrollbar-width:thin}.scroll-y::-webkit-scrollbar{width:6px}.scroll-y::-webkit-scrollbar-thumb{background:var(--ink);border-radius:3px}.kbd{font-family:var(--font-body);font-weight:700;font-size:11px;border:2px solid var(--ink);padding:2px 6px;border-radius:6px;background:var(--cream)}.flip-card{perspective:900px}.flip-inner{position:relative;width:100%;height:100%;transition:transform .6s cubic-bezier(.34,1.4,.64,1);transform-style:preserve-3d}.flip-card.flipped .flip-inner{transform:rotateY(180deg)}.flip-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}.flip-face.back{transform:rotateY(180deg)}.sidebar-resize-handle:hover{background:#7b3fe459!important}.typing-dots{display:inline-flex;align-items:flex-end;gap:3px;height:100%}.typing-dots span{width:5px;height:5px;border-radius:999px;background:var(--purple);animation:typingBounce 1s ease-in-out infinite}.typing-dots span:nth-child(2){animation-delay:.15s}.typing-dots span:nth-child(3){animation-delay:.3s}@keyframes typingBounce{0%,80%,to{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}@keyframes reactionFloat{0%{transform:translateY(0) scale(.6) rotate(0);opacity:0}15%{transform:translateY(-30px) scale(1.2) rotate(-6deg);opacity:1}to{transform:translateY(-260px) scale(1) rotate(8deg);opacity:0}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}