:root{--dusk: #2A2C63;--dusk-deep: #1E1F4A;--moon: #F3EBD8;--ink: #3B2F52;--glass: rgba(214, 236, 255, .16);--glass-edge: rgba(236, 246, 255, .75);--cork: #C9A27A;--ribbon: #FFB5C2}*{box-sizing:border-box}html,body{height:100%;margin:0}body{font-family:Mali,system-ui,sans-serif;color:var(--moon);background:radial-gradient(1.5px 1.5px at 18% 14%,rgba(255,255,255,.7) 50%,transparent 51%),radial-gradient(1px 1px at 72% 8%,rgba(255,255,255,.6) 50%,transparent 51%),radial-gradient(1.5px 1.5px at 86% 30%,rgba(255,255,255,.5) 50%,transparent 51%),radial-gradient(1px 1px at 8% 44%,rgba(255,255,255,.5) 50%,transparent 51%),radial-gradient(120% 70% at 50% 100%,#3B3D80 0%,var(--dusk) 45%,var(--dusk-deep) 100%);background-color:var(--dusk);-webkit-tap-highlight-color:transparent}.stage{min-height:100dvh;display:grid;grid-template-rows:1fr auto 1fr;justify-items:center;padding:max(24px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom));text-align:center}.greeting{align-self:end;margin:0 0 12px;font-size:clamp(1.5rem,6vw,2rem);font-weight:600}.below{align-self:start;display:grid;justify-items:center;gap:20px;margin-top:16px}.hint{margin:0;font-size:1rem;opacity:.75}.box-btn{display:inline-flex;align-items:center;gap:10px;font:inherit;color:var(--moon);background:#f3ebd81a;border:1.5px solid rgba(243,235,216,.35);border-radius:999px;padding:8px 18px 8px 14px;cursor:pointer}.box-btn[hidden]{display:none}.box-btn svg{width:26px;height:22px;fill:var(--cork);stroke:var(--dusk);stroke-width:1.5}.box-btn:focus-visible{outline:3px dashed var(--moon);outline-offset:4px}.jar{width:min(72vw,300px);aspect-ratio:240 / 300;padding:0;border:0;background:none;cursor:pointer;transform-origin:50% 95%;border-radius:24px}.jar svg{width:100%;height:100%;display:block;overflow:visible}.jar:focus-visible{outline:3px dashed var(--moon);outline-offset:8px}.glass{fill:var(--glass);stroke:var(--glass-edge);stroke-width:3}.shine{fill:none;stroke:#ffffff8c;stroke-width:5;stroke-linecap:round}.lid{fill:var(--cork)}.ribbon{stroke:var(--ribbon);stroke-width:6;stroke-linecap:round}.ribbon-bow{fill:var(--ribbon)}.jar.wiggle{animation:wiggle .55s ease-in-out}@keyframes wiggle{0%,to{transform:rotate(0)}20%{transform:rotate(-6deg)}45%{transform:rotate(5deg)}70%{transform:rotate(-3deg)}}.flying-star{position:fixed;width:40px;height:40px;pointer-events:none;z-index:5;overflow:visible}.note-layer{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:16px;background:#1415388c;z-index:10}.note-layer[hidden]{display:none}.note{--paper: #FFD98E;width:min(100%,420px);padding:32px 28px 24px;color:var(--ink);background:repeating-linear-gradient(to bottom,transparent 0 31px,rgba(59,47,82,.1) 31px 32px),linear-gradient(var(--paper),var(--paper));border-radius:6px;box-shadow:0 18px 40px #0a0a2873;transform-origin:50% 50%;animation:unfold .7s cubic-bezier(.2,.8,.2,1) both}@keyframes unfold{0%{transform:scale(.08,.3) rotate(-8deg);border-radius:50%}55%{transform:scale(1.03,.35) rotate(0);border-radius:6px}to{transform:scale(1)}}.note-photo{display:block;width:100%;max-height:46dvh;object-fit:cover;margin:0 0 20px;border:8px solid #fff;border-bottom-width:22px;border-radius:3px;box-shadow:0 4px 12px #3b2f5240;transform:rotate(-1.5deg);animation:ink-in .5s .55s both}.note-photo[hidden],.note-text[hidden],.box-list p[hidden]{display:none}.note-text{margin:0 0 24px;font-size:clamp(1.2rem,5vw,1.45rem);line-height:32px;white-space:pre-line;animation:ink-in .5s .55s both}@keyframes ink-in{0%{opacity:0}to{opacity:1}}.note-close{font:inherit;font-weight:600;color:var(--moon);background:var(--dusk);border:0;border-radius:999px;padding:10px 22px;cursor:pointer}.note-close:focus-visible{outline:3px solid var(--dusk);outline-offset:3px}.box{width:min(100%,460px);max-height:min(80dvh,640px);display:flex;flex-direction:column;background:#ead9bf;border:3px solid var(--cork);border-radius:10px;box-shadow:0 18px 40px #0a0a2873;color:var(--ink)}.box-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 16px 12px 20px;border-bottom:2px dashed rgba(59,47,82,.2)}.box-head h2{margin:0;font-size:1.2rem}.box-list{list-style:none;margin:0;padding:16px;overflow-y:auto;display:grid;gap:12px}.box-list li{padding:14px 16px 10px;background:var(--paper);border-radius:4px;box-shadow:0 2px #3b2f521f}.box-list li:nth-child(odd){transform:rotate(-.6deg)}.box-list li:nth-child(2n){transform:rotate(.5deg)}.box-list img{display:block;width:100%;max-height:260px;object-fit:cover;margin-bottom:8px;border:6px solid #fff;border-bottom-width:16px;border-radius:2px}.box-list p{margin:0 0 6px;line-height:1.6;white-space:pre-line}.box-list time{font-size:.8rem;opacity:.6}@media (prefers-reduced-motion: reduce){.jar.wiggle,.note,.note-text,.note-photo{animation:none}}