:root{--sky:#f4cceb;--sky2:#d5e6f7;--lav:#c9b8ff;--lav2:#020002;--ink:#2a2850;--paper:#fffdf8;--sun:#fff0a6}
*{box-sizing:border-box}
body{font-family:'Nunito',sans-serif;color:var(--ink);background-color:var(--sky);
background-image:radial-gradient(#ffffff99 1.5px,transparent 1.5px);background-size:22px 22px;min-height:100vh}
h1,h2,h3,.hand{font-family:'Caveat',cursive;font-weight:700}
h1{font-size:clamp(2.8rem,8vw,5rem);line-height:1}
h2{font-size:clamp(2rem,5vw,3rem)}
a{color:var(--lav2)}
.navbar{background:#a281a7e6;backdrop-filter:blur(6px);border-bottom:3px dashed var(--lav)}
.navbar-brand{font-family:'Caveat',cursive;font-size:1.8rem;font-weight:700;color:var(--lav2)!important}
.nav-link{font-weight:700;color:var(--ink)!important;border-radius:50px;padding:.3rem .9rem!important;transition:.2s}
.nav-link:hover{background:var(--sky);transform:rotate(-3deg)}
.nav-link.active{background:var(--lav)}
.page{padding:3rem 0 4rem}
.scrap{background:var(--paper);border-radius:22px;padding:1.5rem;box-shadow:6px 6px 0 var(--lav);border:2px solid var(--ink);height:100%;transition:.25s}
.scrap:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:9px 9px 0 var(--lav2)}
.note{background:var(--sun);border-radius:6px 22px 6px 22px;padding:1.2rem 1.4rem;box-shadow:4px 4px 0 #0002;transform:rotate(-2deg)}
.note.alt{background:#e5dcff;transform:rotate(2deg)}
.polaroid{background:#7a1585;padding:12px 12px 46px;border-radius:6px;box-shadow:0 10px 25px #2a28503a;transform:rotate(3deg);position:relative;transition:.3s;max-width:320px;margin:auto}
.polaroid:hover{transform:rotate(-1deg) scale(1.04)}
.polaroid::before{content:"";position:absolute;top:-14px;left:50%;width:90px;height:28px;background:#9d2bcab0;transform:translateX(-50%) rotate(-4deg)}
.polaroid .pic{aspect-ratio:1;background:linear-gradient(135deg,var(--sky2),var(--lav));display:grid;place-items:center;font-size:3.5rem;overflow:hidden;position:relative}
.polaroid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.polaroid .cap{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-family:'Caveat',cursive;font-size:1.5rem}
.sticker{display:inline-block;background:var(--lav);border:2px solid var(--ink);border-radius:50px;padding:.2rem .9rem;font-weight:800;margin:.2rem;transition:.2s}
.sticker:hover{transform:scale(1.12) rotate(-4deg);background:var(--sun)}
.wave{display:inline-block;animation:wave 2s infinite;transform-origin:70% 70%}
@keyframes wave{0%,60%,100%{transform:rotate(0)}10%,30%{transform:rotate(16deg)}20%,40%{transform:rotate(-8deg)}50%{transform:rotate(10deg)}}
.cursor::after{content:"|";animation:blink 1s infinite}
@keyframes blink{50%{opacity:0}}
.btn-dika{background:var(--ink);color:#1ecfd2;border-radius:50px;padding:.6rem 1.6rem;font-weight:800;border:0;box-shadow:4px 4px 0 var(--lav2);transition:.2s}
.btn-dika:hover{color:#ffffff;transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--lav2)}
.fact{cursor:pointer;perspective:800px;min-height:150px}
.fact .in{position:relative;height:100%;min-height:150px;transition:.5s;transform-style:preserve-3d}
.fact.flip .in{transform:rotateY(180deg)}
.fact .f,.fact .b{position:absolute;inset:0;backface-visibility:hidden;display:grid;place-items:center;text-align:center;padding:1rem;border-radius:22px;border:2px solid var(--ink)}
.fact .f{background:var(--paper);font-size:1.5rem;font-family:'Caveat',cursive;font-weight:700}
.fact .b{background:var(--lav);transform:rotateY(180deg)}
.progress{height:16px;border:2px solid var(--ink);border-radius:50px;background:#fff}
.progress-bar{background:var(--lav2);border-radius:50px;width:0;transition:width 1.2s ease}
.tl{border-left:4px dashed var(--lav2);padding-left:1.5rem;margin-left:.6rem}
.tl .dot{position:relative;margin-bottom:1.8rem}
.tl .dot::before{content:"★";position:absolute;left:-2.35rem;top:0;background:var(--sun);width:1.7rem;height:1.7rem;border-radius:50%;display:grid;place-items:center;font-size:.9rem;border:2px solid var(--ink)}
.doodle{position:fixed;font-size:2rem;opacity:.5;pointer-events:none;z-index:0;animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-14px) rotate(8deg)}}
main,footer{position:relative;z-index:1}
footer{text-align:center;padding:1.5rem;font-family:'Caveat',cursive;font-size:1.4rem;border-top:3px dashed var(--lav);background:#fffdf8cc}
.wish{min-height:3rem}
:focus-visible{outline:3px solid var(--lav2);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media(max-width:576px){.polaroid{transform:rotate(1deg)}.doodle{display:none}}