:root{--bg1:#fde4ec;--bg2:#fff3d9;--pink:#e8798f;--dark:#b64a64;--card:#fff;--ink:#8a3a52;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg1:#3b1f2b;--bg2:#2e2430;--card:#fff0f3;--ink:#8a3a52}}
:root[data-theme="dark"]{--bg1:#3b1f2b;--bg2:#2e2430;--card:#fff0f3;--ink:#8a3a52}
*{box-sizing:border-box}
html{height:100%}body{margin:0}
body{background:linear-gradient(135deg,var(--bg1),var(--bg2)) fixed;font-family:'Quicksand',system-ui,sans-serif;color:var(--ink);overflow-x:hidden;overflow-y:auto;display:flex;min-height:100dvh;-webkit-tap-highlight-color:transparent}
.heart{position:fixed;top:-30px;font-size:14px;color:var(--pink);opacity:.6;animation:fall linear forwards;pointer-events:none}
@keyframes fall{to{transform:translateY(110vh) rotate(40deg)}}
.stage{width:100%;max-width:360px;padding:16px;margin:auto;text-align:center}
.hidden{display:none!important}
/* envelope */
.env{cursor:pointer;animation:bob 2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px)}}
.env svg{width:170px}
.from{font-family:'Press Start 2P';font-size:9px;margin-top:14px;color:var(--dark)}
.hint{font-size:12px;margin-top:40px;opacity:.7}
/* window */
.win{background:var(--pink) repeating-conic-gradient(rgba(255,255,255,.28) 0 25%,transparent 0 50%) 0 0/16px 16px;border:3px solid var(--dark);border-radius:6px;box-shadow:6px 6px 0 rgba(182,74,100,.35);padding:0 0 14px;animation:pop .35s}
@keyframes pop{from{transform:scale(.8);opacity:0}}
.bar{display:flex;justify-content:space-between;align-items:center;background:var(--dark);color:#fff;font-family:'Press Start 2P';font-size:9px;padding:7px 10px;text-align:left}
.bar i{font-style:normal;letter-spacing:3px}
.body{padding:14px 14px 0}
.paper{background:var(--card);border:2px solid var(--dark);border-radius:10px;padding:16px 14px;margin:0 6px}
.who{font-family:'Caveat';font-size:16px;opacity:.7}
h2{font-family:'Caveat';font-size:28px;margin:4px 0 12px;line-height:1.1}
.q{font-family:'Press Start 2P';font-size:10px;line-height:1.7;color:#fff;margin:6px 8px 10px;text-shadow:1px 1px 0 var(--dark)}
.cat{width:96px;image-rendering:pixelated;margin:4px auto;display:block}
.btn{font-family:'Press Start 2P';font-size:10px;background:#fff;color:var(--dark);border:2px solid var(--dark);padding:9px 14px;cursor:pointer;border-radius:4px;box-shadow:2px 2px 0 var(--dark)}
.btn:active{transform:translate(2px,2px);box-shadow:none}
.btn.big{padding:12px 28px;font-size:12px}
.btn.main{background:var(--pink);color:#fff;border-radius:20px;padding:10px 26px;font-family:'Quicksand';font-weight:700;font-size:14px}
.row{display:flex;gap:14px;justify-content:center;align-items:center;min-height:56px}
.chips{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:10px 0}
.chip{border:2px solid var(--pink);background:#fff;color:var(--ink);border-radius:14px;padding:6px 12px;font:700 12px 'Quicksand';cursor:pointer}
.chip.on{background:var(--pink);color:#fff}
input,textarea{font-size:16px!important;width:100%;border:2px solid var(--pink);border-radius:10px;padding:10px;font:600 14px 'Quicksand';color:var(--ink);background:#fff;margin:6px 0}
textarea{resize:none;height:80px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0 14px}
.act{border:2px solid var(--pink);background:#fff;border-radius:10px;padding:8px 2px;min-height:68px;font:700 10px/1.2 'Quicksand';cursor:pointer;color:var(--ink)}
.act b{display:block;font-size:22px;font-weight:400}
.act.on{background:var(--pink);color:#fff}
.ticket{text-align:left;font-size:13px;line-height:1.8;border-top:2px dashed var(--pink);margin-top:8px;padding-top:8px}
.ticket div{display:flex;gap:8px}.ticket span{opacity:.65;min-width:74px}
.two{display:flex;gap:8px;margin:12px 6px 0}.two .btn{flex:1;font-size:8px;line-height:1.5}
.mus{position:fixed;right:12px;top:calc(env(safe-area-inset-top,0px) + 12px);z-index:9;width:40px;height:40px;border-radius:50%;border:2px solid var(--dark);background:#fff;font-size:18px;cursor:pointer;box-shadow:2px 2px 0 var(--dark)}
.mus.off{opacity:.55}
.dots{font-size:10px;opacity:.6;margin-top:10px}

/* animasi kucing */
.cat{overflow:visible;animation:catbob 1.6s ease-in-out infinite;transform-origin:50% 100%}
.cat.happy{animation:catjump .6s ease-in-out infinite}
@keyframes catbob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-3px) rotate(2deg)}}
@keyframes catjump{0%,100%{transform:translateY(0) scale(1,1)}40%{transform:translateY(-10px) scale(.96,1.06)}70%{transform:translateY(0) scale(1.06,.94)}}
.cat rect{transform-box:fill-box}
.eye{transform-origin:center;animation:blink 3.4s infinite}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.hrt{transform-origin:center;animation:beat .8s ease-in-out infinite}
@keyframes beat{50%{transform:scale(1.35)}}
.ear{transform-origin:50% 100%;animation:wig 2.8s ease-in-out infinite}
.ear.r{animation-delay:.4s}
@keyframes wig{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-14deg)}92%{transform:rotate(8deg)}}
.catwrap{position:relative;width:96px;margin:4px auto}
.catwrap .cat{margin:0}
.sp{position:absolute;color:#e0344f;font-size:12px;opacity:0;animation:sp 2.2s ease-out infinite}
@keyframes sp{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translateY(-34px)}}
/* kalender */
.cal{background:#fff;border:2px solid var(--pink);border-radius:12px;padding:8px;margin:6px 0}
.calh{display:flex;gap:6px;align-items:center;justify-content:space-between;margin-bottom:6px}
.calh button{border:2px solid var(--pink);background:#fff;color:var(--dark);border-radius:8px;width:30px;height:30px;font-weight:700;cursor:pointer}
.calh button:disabled{opacity:.3;cursor:default}
.calh select{flex:1;border:2px solid var(--pink);border-radius:8px;padding:5px;font:700 12px 'Quicksand';color:var(--ink);background:#fff;min-width:0}
.cg{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}
.cg .dn{font:700 10px 'Quicksand';opacity:.55;padding:3px 0}
.cg .d{border:0;background:transparent;border-radius:8px;height:30px;font:700 12px 'Quicksand';color:var(--ink);cursor:pointer}
.cg .d:hover{background:#fde4ec}
.cg .d.today{outline:2px dashed var(--pink)}
.cg .d.on{background:var(--pink);color:#fff}
.cg .d:disabled{opacity:.25;cursor:default;background:none}
.picked{font:700 12px 'Quicksand';margin:4px 0 0;color:var(--dark)}