@import"https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Patrick+Hand&display=swap";:root{--sky-0: #080d27;--sky-1: #141d4a;--sky-2: #2b3266;--sky-3: #3f3c72;--sky: linear-gradient(180deg, var(--sky-0) 0%, var(--sky-1) 45%, var(--sky-2) 80%, var(--sky-3) 100%);--paper: #fbf5e9;--paper-2: #f3ead8;--paper-line: rgba(110, 130, 190, .22);--pen: #3a3550;--pen-soft: rgba(58, 53, 80, .65);--ink: #eef0ff;--ink-soft: rgba(238, 240, 255, .65);--moon: #fbeccb;--gold: #e0b84a;--danger: #ff8a9a;--accent: #e8738f;--accent-pen: color-mix(in srgb, var(--accent) 70%, var(--pen));--accent-soft: color-mix(in srgb, var(--accent) 18%, transparent);--accent-glow: color-mix(in srgb, var(--accent) 45%, transparent);--tape-a: color-mix(in srgb, var(--accent) 55%, #fff);--tape-b: color-mix(in srgb, var(--accent) 30%, #fff);--font-hand: "Caveat", cursive;--font-body: "Patrick Hand", system-ui, sans-serif;--s-1: 4px;--s-2: 8px;--s-3: 12px;--s-4: 16px;--s-5: 22px;--s-6: 28px;--s-7: 40px;--s-8: 56px;--gutter: 22px;--shadow-paper: 0 1px 0 rgba(0, 0, 0, .05), 0 24px 50px rgba(0, 0, 0, .45);--shadow-sticker: 0 3px 4px rgba(0, 0, 0, .25);--r-paper: 4px;--r-polaroid: 3px;--ease: cubic-bezier(.2, .8, .2, 1);--t-fast: .18s;--t-med: .4s}.paper{position:relative;color:var(--pen);background:var(--paper);border-radius:var(--r-paper);box-shadow:var(--shadow-paper);transition:transform var(--t-med) var(--ease)}.paper--ruled{background:repeating-linear-gradient(180deg,transparent 0 29px,var(--paper-line) 29px 30px) 0 52px / 100% calc(100% - 70px) no-repeat,var(--paper)}.tilt-a{transform:rotate(-2deg)}.tilt-b{transform:rotate(-1.2deg)}.tilt-c{transform:rotate(.8deg)}.tilt-d{transform:rotate(1.6deg)}.paper.is-lifted{transform:rotate(0) translateY(-6px) scale(1.02)}.tape{position:absolute;top:-13px;left:50%;width:112px;height:26px;margin-left:-56px;transform:rotate(-3deg);opacity:.9;box-shadow:0 1px 2px #0000001f;background:repeating-linear-gradient(45deg,var(--tape-a) 0 7px,var(--tape-b) 7px 14px)}.hand{font-family:var(--font-hand);font-weight:700}.btn-ink{border:0;border-radius:999px;padding:10px 26px;cursor:pointer;background:var(--accent);color:var(--pen);font:700 24px var(--font-hand);box-shadow:0 6px 18px var(--accent-glow);transition:transform var(--t-fast) var(--ease)}.btn-ink:active{transform:scale(.95) rotate(-2deg)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:var(--font-body);color:var(--ink);background:var(--sky-0);-webkit-tap-highlight-color:transparent;overscroll-behavior:none}button{font:inherit;color:inherit}button:disabled{opacity:.45;cursor:default}:focus-visible{outline:2px dashed var(--accent);outline-offset:3px}.screen{position:relative;min-height:100%;overflow-x:hidden}.screen.center{display:grid;place-items:center;height:100%}.center-stack{position:relative;z-index:2;display:grid;gap:18px;justify-items:center;padding:0 var(--gutter);text-align:center}.loading{position:relative;z-index:2;font-size:28px;color:var(--ink-soft)}.sky{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--sky);overflow:hidden;pointer-events:none}.star{position:absolute;border-radius:50%;background:#fff;animation:tw 4s ease-in-out infinite}@keyframes tw{0%,to{opacity:.2}50%{opacity:.95}}.moon{position:absolute;top:max(40px,5vh);left:30px;width:44px;height:44px;border-radius:50%;box-shadow:11px -5px 0 0 var(--moon);filter:drop-shadow(0 0 10px rgba(251,236,203,.5));transform:rotate(-20deg)}.flock{position:absolute;top:max(66px,8vh);left:-70px;animation:fly 30s linear infinite}.bird{position:absolute;fill:none;stroke:#eef0ffbf;stroke-width:1.6;stroke-linecap:round;animation:flap .7s ease-in-out infinite alternate;width:18px}.bird+.bird{width:13px;top:14px;left:22px;animation-delay:-.35s}@keyframes flap{to{transform:scaleY(.35) translateY(2px)}}@keyframes fly{to{transform:translate(calc(100vw + 140px),-10px)}}.confetti span{position:absolute;top:-30px;width:16px;animation:fall 9s linear infinite}.confetti .heart path{fill:var(--accent);stroke:none}.confetti .sparkle{width:12px;fill:var(--gold)}@keyframes fall{to{top:105%;rotate:200deg}}.letter{width:100%;max-width:360px;padding:30px 26px 24px}.heart{width:26px;height:24px;transition:transform var(--t-fast) var(--ease)}.heart path{fill:transparent;stroke:var(--pen);stroke-width:1.8;transition:fill var(--t-fast),stroke var(--t-fast)}.heart.on{transform:scale(1.15) rotate(-6deg)}.heart.on path{fill:var(--accent);stroke:var(--accent)}.squiggle{display:block;margin:2px auto 0;height:12px}.squiggle path{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round}.since{text-align:center;font-size:16px;color:var(--pen-soft);margin-top:4px}.sticker{position:absolute;right:-14px;bottom:-16px;width:58px;transform:rotate(10deg);filter:drop-shadow(var(--shadow-sticker))}.link{background:none;border:0;cursor:pointer;font-size:17px;color:var(--pen-soft);padding:8px 4px}.btn-ink:disabled{box-shadow:none}@keyframes shake{20%,60%{transform:translate(-9px)}40%,80%{transform:translate(9px)}}@keyframes rise{0%{opacity:0;transform:translateY(10px)}}.lock-main{position:relative;z-index:2;height:100dvh;display:flex;flex-direction:column;align-items:center;padding:calc(env(safe-area-inset-top) + max(96px,15vh)) var(--gutter) calc(env(safe-area-inset-bottom) + 22px)}.lock-letter{max-width:340px}.lock.is-ok .lock-letter{transform:rotate(0) translateY(-6px) scale(1.02)}.title{font-size:52px;line-height:.9;text-align:center}.ask{font-size:27px;text-align:center;margin-top:18px;line-height:1.1}.code-hearts{display:flex;justify-content:center;gap:14px;margin-top:12px}.lock.is-bad .code-hearts{animation:shake .45s}.lock.is-bad .heart.on path{fill:var(--danger);stroke:var(--danger)}.msg{min-height:26px;margin-top:10px;text-align:center;font-size:17px;color:var(--pen-soft)}.msg.ok{color:var(--accent-pen);font-size:26px}.pad{margin-top:auto;display:grid;grid-template-columns:repeat(3,var(--k));gap:12px 28px;--k: min(66px, 8vh)}.key{width:var(--k);height:var(--k);border-radius:50%;border:1.5px dashed rgba(238,240,255,.32);background:#fbf5e90f;color:var(--ink);font:700 30px var(--font-hand);cursor:pointer;transition:background .12s,transform .12s}.key:active{background:var(--accent-soft);transform:scale(.92) rotate(-4deg)}.key--del{border-color:transparent;background:none;font:22px system-ui;color:var(--ink-soft)}.q-main{position:relative;z-index:2;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:calc(env(safe-area-inset-top) + 70px) var(--gutter) calc(env(safe-area-inset-bottom) + 40px)}.q-main .letter{animation:rise var(--t-med) var(--ease)}.q-header{font-size:24px;color:var(--ink-soft);text-align:center}.q-progress{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;margin-bottom:14px}.q-progress .heart{width:15px;height:14px}.q-progress .heart.on{transform:none}.q-title{font-size:30px;line-height:1.12}.q-body{font-size:19px;line-height:30px;margin-top:14px}.q-meta{font-size:15px;color:var(--pen-soft);margin-top:12px}.q-err{color:#c2415a;font-size:15px;margin-top:10px}.q-input{display:block;width:100%;margin-top:18px;border:0;border-bottom:1.5px dashed var(--pen-soft);background:transparent;font:21px var(--font-body);color:var(--pen);padding:4px 2px;outline:none;border-radius:0}.q-input:focus{border-bottom-color:var(--accent-pen)}.q-input::placeholder{color:#3a355059}.q-long{resize:none;line-height:30px;border:0;background:repeating-linear-gradient(180deg,transparent 0 29px,var(--paper-line) 29px 30px)}.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.chip{border:1.5px solid var(--pen-soft);background:var(--paper);color:var(--pen);border-radius:999px;padding:6px 14px;font-size:18px;cursor:pointer;transition:transform var(--t-fast) var(--ease),background var(--t-fast)}.chip.on{background:var(--accent);border-color:var(--accent);transform:rotate(-3deg) scale(1.05)}.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:12px;margin-top:18px}.swatch{aspect-ratio:1;border-radius:50%;border:3px solid var(--paper);box-shadow:0 0 0 1.5px #3a355033;cursor:pointer;transition:transform var(--t-fast) var(--ease)}.swatch.on{transform:scale(1.18);box-shadow:0 0 0 2.5px var(--pen)}.swatch--custom{position:relative;display:grid;place-items:center;background:conic-gradient(#ff6b6b,#f5c451,#a8d672,#6ec6e8,#9b8cf2,#f49ac1,#ff6b6b);color:#fff;font-size:22px;text-shadow:0 1px 2px rgba(0,0,0,.4)}.swatch--custom input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.q-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:24px}.q-actions .link:first-child{margin-right:auto}.home-main{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:30px;padding:calc(env(safe-area-inset-top) + 92px) var(--gutter) calc(env(safe-area-inset-bottom) + 40px);max-width:480px;margin:0 auto}.home-top{position:absolute;top:calc(env(safe-area-inset-top) + 34px);left:90px;right:var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:8px}.hello{font-size:26px;line-height:1.05}.lock-btn{flex:none;width:40px;height:40px;border-radius:50%;border:1.5px dashed rgba(238,240,255,.32);background:#fbf5e90f;cursor:pointer;display:grid;place-items:center}.lock-btn svg{width:18px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round}.banner{position:relative;padding:10px 22px;background:var(--paper);color:var(--accent-pen);transform:rotate(-2deg);box-shadow:var(--shadow-paper);border-radius:var(--r-paper)}.banner span{font-size:26px}.timer-card{text-align:center;padding-top:34px;animation:rise var(--t-med) var(--ease)}.timer-card .since{margin-top:0}.days{font-size:30px;margin-top:4px;line-height:1}.days-n{font-size:76px;color:var(--accent-pen);font-variant-numeric:tabular-nums}.clock{display:flex;justify-content:center;margin-top:16px}.clock-cell{display:flex;align-items:flex-start}.clock-cell>div{display:grid;justify-items:center;min-width:58px}.clock-n{font-size:44px;line-height:1;font-variant-numeric:tabular-nums}.clock-l{font-size:13px;color:var(--pen-soft);letter-spacing:.08em}.colon{font-size:40px;line-height:1;color:var(--pen-soft);padding:0 2px}.sticky{padding:16px 20px;max-width:290px;background:#fff3b8;animation:rise var(--t-med) var(--ease) .1s backwards}.sticky p{font-size:24px;line-height:1.15;text-align:center}.soon{width:100%;text-align:center}.soon-label{color:var(--ink-soft);font-size:15px;letter-spacing:.06em;margin-bottom:12px}.tags{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px}.tag{background:var(--paper-2);color:var(--pen);padding:6px 14px 6px 22px;font-size:16px;opacity:.8;clip-path:polygon(12px 0,100% 0,100% 100%,12px 100%,0 50%);position:relative}.tag:before{content:"";position:absolute;left:10px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--sky-1)}@media(prefers-reduced-motion:reduce){.flock,.confetti{display:none}}