:root{--cream:#fff6ee;--cocoa:#4a2414;--cocoa-2:#7a3f22;--berry:#f06c8c;--band:#8fd6a4;--shadow:0 10px 30px #5a281438;color:var(--cocoa);font-family:Jua,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{background:#f6e3d5;height:100%;margin:0;overflow:hidden}body{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.app{position:fixed;inset:0}.hud{pointer-events:none;padding:max(16px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));position:absolute;inset:0}.hud *{pointer-events:auto}.hud .top,.hud .title,.hint,.kicker,.sub{pointer-events:none}.intro{text-align:center;flex-direction:column;justify-content:space-between;align-items:center;transition:opacity .6s,transform .6s;display:flex}.intro.leave{opacity:0;pointer-events:none;transform:translateY(12px)}.intro.leave *{pointer-events:none}.title{margin-top:6vh;animation:.9s cubic-bezier(.2,.9,.3,1.2) both rise}.kicker{letter-spacing:.2em;color:var(--berry);margin:0;font-size:13px}h1{color:var(--cocoa);text-shadow:0 3px #fff,0 8px 24px #7a3f2240;margin:6px 0;font-size:clamp(36px,9vw,56px);font-weight:400}.sub{color:var(--cocoa-2);margin:0;font-size:17px}.pickers{flex-direction:column;align-items:center;gap:6px;margin-top:auto;margin-bottom:16px;animation:.9s cubic-bezier(.2,.9,.3,1.2) .15s both rise;display:flex}.pick-label{color:var(--cocoa-2);text-shadow:0 1px #fff;margin:4px 0 0;font-size:14px}.stick-swatch{border-radius:4px!important;width:28px!important;height:8px!important}.chips{flex-wrap:wrap;justify-content:center;gap:8px;animation:.9s cubic-bezier(.2,.9,.3,1.2) .15s both rise;display:flex}.chip{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:inherit;color:var(--cocoa);box-shadow:var(--shadow);cursor:pointer;background:#ffffffbf;border:0;border-radius:999px;align-items:center;gap:6px;padding:9px 14px;font-size:16px;transition:transform .15s;display:flex}.chip i{border-radius:50%;width:18px;height:18px;box-shadow:inset -2px -3px 4px #00000040,inset 2px 2px 3px #ffffff80}.chip.on{background:var(--cocoa);color:var(--cream);transform:translateY(-2px)scale(1.05)}.chip:active{transform:scale(.94)}.btn{font:inherit;color:var(--cream);cursor:pointer;background:linear-gradient(180deg, #8a4a2a, var(--cocoa));box-shadow:inset 0 2px 0 #ffffff40, 0 6px 0 #2e140a, var(--shadow);border:0;border-radius:999px;padding:14px 28px;font-size:18px;transition:transform .12s,box-shadow .12s}.btn:active{box-shadow:inset 0 2px 0 #ffffff40, 0 2px 0 #2e140a, var(--shadow);transform:translateY(4px)}.btn.big{padding:16px 40px;font-size:21px;animation:.9s cubic-bezier(.2,.9,.3,1.2) .3s both rise}.badge{white-space:nowrap;color:var(--cocoa);box-shadow:var(--shadow);pointer-events:none;background:#fff3c4;border-radius:999px;padding:8px 14px;font-size:15px;animation:2.8s both toast;position:absolute;top:22%;left:50%;transform:translate(-50%)}.toast{white-space:nowrap;color:#fff;pointer-events:none;background:linear-gradient(#ff7d6b,#e5486a);border-radius:18px;padding:12px 20px;font-size:18px;animation:2.5s cubic-bezier(.2,1.3,.4,1) both toast;position:absolute;top:15%;left:50%;transform:translate(-50%);box-shadow:0 10px 30px #e5486a66}@keyframes toast{0%{opacity:0;transform:translate(-50%,-12px)scale(.8)}12%{opacity:1;transform:translate(-50%)scale(1.06)}20%{transform:translate(-50%)scale(1)}85%{opacity:1}to{opacity:0}}.toolbar{padding:10px 12px max(14px, env(safe-area-inset-bottom));background:#fffaf5eb;border-radius:22px 22px 0 0;animation:.5s both sheet-up;position:absolute;bottom:0;left:0;right:0;box-shadow:0 -8px 30px #5a28142e}.tools{scrollbar-width:none;gap:8px;padding:2px 2px 8px;display:flex;overflow-x:auto;-webkit-mask:linear-gradient(90deg,#000 85%,#0000);mask:linear-gradient(90deg,#000 85%,#0000)}.tools>:last-child{margin-right:40px}.tools::-webkit-scrollbar{display:none}.tool{word-break:keep-all;width:66px;font-size:11.5px;line-height:1.15;font:inherit;color:var(--cocoa);cursor:pointer;background:#fff;border:0;border-radius:16px;flex-direction:column;flex:none;align-items:center;gap:4px;padding:8px 4px;font-size:12px;transition:transform .12s;display:flex;box-shadow:0 2px 6px #5a28141f}.tool i{border-radius:50%;place-items:center;width:26px;height:26px;font-style:normal;display:grid;box-shadow:inset 0 -2px 3px #00000026}.tool i.squiggle{box-shadow:none;text-shadow:0 1px #00000059;font-size:26px;font-weight:900}.tool i.abc{box-shadow:none;color:#ff5f8a;background:#ffe3ea;font-size:14px}.tool.on{background:var(--cocoa);color:var(--cream);transform:translateY(-3px)}.initials{width:100%;font:inherit;text-align:center;letter-spacing:.3em;color:var(--cocoa);background:#fff;border:2px solid #ffc2d1;border-radius:14px;margin:4px 0 8px;padding:10px 14px;font-size:20px;display:block}.deco-actions{justify-content:space-between;gap:10px;display:flex}.deco-actions .btn{flex:1;padding:12px 10px;font-size:16px}.deco-actions .btn.ghost{flex:none}.chill.frosty:before{content:"";pointer-events:none;animation:1s both rise;position:absolute;inset:0;box-shadow:inset 0 0 80px 30px #dcf0ffbf}.letter-sheet{padding:14px 16px max(16px, env(safe-area-inset-bottom));background:#fffaf5f2;border-radius:22px 22px 0 0;flex-direction:column;gap:10px;animation:.5s both sheet-up;display:flex;position:absolute;bottom:0;left:0;right:0;box-shadow:0 -8px 30px #5a28142e}.chill-ring{--p:0;background:conic-gradient(#7cc6ff calc(var(--p) * 360deg), #e6f2fb 0);width:76px;height:76px;box-shadow:var(--shadow);border-radius:50%;align-self:center;place-items:center;margin-top:-52px;display:grid}.chill-ring b{color:#3b6f99;background:#fff;border-radius:50%;place-items:center;width:58px;height:58px;font-size:18px;font-weight:400;display:grid}.letter-quick{scrollbar-width:none;gap:6px;display:flex;overflow-x:auto}.letter-quick .chip{flex:none;padding:7px 12px;font-size:14px}.letter{resize:none;width:100%;min-height:96px;font:inherit;color:var(--cocoa);background:#fffdfb;border:2px solid #ffd2dc;border-radius:16px;padding:12px 14px;font-size:17px}.letter-foot{color:var(--cocoa-2);justify-content:space-between;align-items:center;gap:10px;font-size:13px;display:flex}.btn.warn{box-shadow:inset 0 2px 0 #ffffff40, 0 6px 0 #8a4a10, var(--shadow);background:linear-gradient(#f0a24c,#c46f1c)}.score-rows{grid-template-columns:repeat(3,1fr);gap:6px 10px;margin:0 0 10px;display:grid}.score-rows p{background:#ffffffb3;border-radius:10px;justify-content:space-between;margin:0;padding:4px 8px;font-size:14px;display:flex}.score-rows p.total{background:var(--cocoa);color:var(--cream)}.score-rows b{font-weight:400}.deco-sum{color:var(--cocoa-2);margin:0 0 12px;font-size:13px}.wrap-row{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px;font-size:14px;display:flex}.wrap-row span{margin-left:4px}.swatch{cursor:pointer;border:3px solid #fff;border-radius:50%;width:34px;height:34px;box-shadow:0 2px 6px #5a281440}.swatch.on{outline:3px solid var(--cocoa);outline-offset:2px}.wrap-names{gap:8px;margin-bottom:10px;display:flex}.wrap-names label{flex:1;align-items:center;gap:4px;font-size:15px;display:flex}.wrap-names input{width:100%;min-width:0;font:inherit;color:var(--cocoa);background:#fff;border:2px solid #ffd2dc;border-radius:12px;padding:9px 10px;font-size:16px}.wrap .toolbar .btn.big{width:100%}.note{color:var(--cocoa-2);margin:0;font-size:14px}.link-box{border:1px solid #ddd;border-radius:10px;width:100%;padding:8px;font-size:12px}.btn.small{padding:8px 14px;font-size:14px}.letter-read{color:var(--cocoa);white-space:pre-wrap;margin:0 0 10px;font-size:18px;line-height:1.5}.hud.gift-intro{pointer-events:auto}.gift-intro{text-align:center;cursor:pointer;flex-direction:column;justify-content:space-between;align-items:center;display:flex}.gift-intro .title{margin-top:8vh}.gift-intro .btn{margin-bottom:max(40px, env(safe-area-inset-bottom))}.pulse{animation:1.2s ease-in-out infinite pulse}@keyframes pulse{50%{transform:scale(1.06)}}.reply-banner{right:12px;top:max(112px, calc(env(safe-area-inset-top) + 104px));z-index:5;color:#fff;box-shadow:var(--shadow);pointer-events:none;white-space:nowrap;background:#f06c8ceb;border-radius:999px;padding:6px 14px;font-size:13px;position:fixed}.fill-meters{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#fffaf5cc;border-radius:16px;flex-direction:column;gap:6px;margin-right:52px;padding:8px 10px;display:flex}.fill-meter{background:#5a28141f;border-radius:999px;height:12px;transition:transform .15s;position:relative;overflow:hidden}.fill-meter.locked{opacity:.75}.fill-meter.locked:after{content:"✓";color:var(--cocoa);font-size:13px;position:absolute;top:-3px;right:6px}.fill-meter.active{box-shadow:0 0 0 2px var(--berry);transform:scaleY(1.35)}.fill-meter .zone{background:#62c4808c;position:absolute;top:0;bottom:0}.fill-meter .over{background:#e5486a;width:2px;position:absolute;top:0;bottom:0}.fill-meter b{border-radius:inherit;background:linear-gradient(90deg,sienna,#5a2a14);position:absolute;top:0;bottom:0;left:0}.fill-meter b.ok{background:linear-gradient(90deg,#4caf74,#2e8b57)}.fill-meter b.spill{background:linear-gradient(90deg,#e5486a,#b0203f)}.pop-tag{color:#fff;box-shadow:var(--shadow);pointer-events:none;border-radius:999px;padding:8px 16px;font-size:20px;animation:1.1s both toast;position:absolute;top:30%;left:50%;transform:translate(-50%)}.pop-tag.good{background:#4caf74}.pop-tag.ok{background:#f0a24c}.pop-tag.meh{background:#e5486a}.bottom-cta{left:0;right:0;bottom:max(24px, env(safe-area-inset-bottom));justify-content:center;animation:.5s both slide-up;display:flex;position:absolute}.bottom-cta .btn{transform:none}.btn:disabled{filter:grayscale(.6)brightness(1.15);opacity:.75}.chop .kicker{margin:0 0 8px}.chop .progress-row{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#fffaf5c7;border-radius:999px;margin-right:52px;padding:6px 10px}.mute{right:12px;top:max(64px, calc(env(safe-area-inset-top) + 56px));width:40px;height:40px;box-shadow:var(--shadow);cursor:pointer;background:#ffffffbf;border:0;border-radius:50%;place-items:center;font-size:18px;display:grid;position:absolute}.intro .mute{top:max(16px, env(safe-area-inset-top))}.top{text-align:center;max-width:520px;margin:0 auto;animation:.6s both rise}.progress-row{align-items:center;gap:8px;display:flex}.progress-icon{display:grid}.progress-num{text-align:right;min-width:40px;font-size:15px}.progress{background:#ffffffb3;border-radius:999px;flex:1;height:14px;position:relative;overflow:hidden;box-shadow:inset 0 2px 4px #5a281433}.progress .cap{background:var(--band);border-radius:2px;width:3px;position:absolute;top:-3px;bottom:-3px;left:30%}.progress div{border-radius:inherit;background:linear-gradient(90deg,sienna,#5a2a14);height:100%;transition:width .2s;box-shadow:inset 0 3px #ffffff4d}.hint{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#fffaf5c7;border-radius:999px;margin:10px 0 0;padding:4px 12px;font-size:16px;display:inline-block}.chop .kicker{background:#fffaf5c7;border-radius:999px;padding:2px 10px;display:inline-block}.thermo{flex-direction:column;align-items:center;gap:6px;animation:.5s .25s both slide-in-r;display:flex;position:absolute;top:50%;right:16px;transform:translateY(-50%)}.thermo-danger{background:repeating-linear-gradient(-45deg,#e539352e 0 4px,#0000 4px 8px);position:absolute;top:0;left:0;right:0}.thermo-skull{margin-bottom:-8px;display:grid;position:absolute;left:-22px}.thermo-ghost{background:var(--cocoa);opacity:.55;border-radius:2px;height:4px;margin-bottom:-1px;transition:bottom .3s;position:absolute;left:-4px;right:-4px}.thermo-soon{color:#fff;box-shadow:var(--shadow);border-radius:10px;padding:3px 8px;font-size:15px;animation:1s ease-in-out infinite alternate soon}.thermo-soon.hot{background:#e5486a}.thermo-soon.cold{background:#5b8bd6}.thermo-soon.ok{background:#4caf74}@keyframes soon{to{transform:scale(1.08)}}.loading{place-items:center;display:grid}.loading-choco{animation:.7s ease-in-out infinite alternate bob;transform:scale(2.4)}@keyframes bob{to{transform:scale(2.4)translateY(-6px)rotate(-8deg)}}.thermo-read small{color:var(--berry);margin-left:2px;font-size:14px}.thermo-tube{width:22px;height:min(42vh,280px);box-shadow:inset 0 2px 5px #5a281440, var(--shadow);background:#fffc;border-radius:999px;position:relative;overflow:hidden}.thermo-band{background:var(--band);opacity:.7;position:absolute;left:0;right:0}.thermo-fill{background:linear-gradient(#ff9a6b,#f06c8c);border-radius:999px;max-height:calc(100% - 10px);transition:height .15s;position:absolute;bottom:5px;left:5px;right:5px}.thermo-fill.hot{background:linear-gradient(#ff7043,#e53935)}.thermo-read{text-align:center;min-width:52px;box-shadow:var(--shadow);background:#ffffffd9;border-radius:10px;padding:4px 8px;font-size:18px}.thermo-read.ok{background:var(--band)}.shake{animation:.35s infinite shake}.knob-wrap{left:50%;bottom:max(20px, env(safe-area-inset-bottom));flex-direction:column;align-items:center;gap:6px;animation:.5s cubic-bezier(.2,.9,.3,1.2) .2s both slide-up;display:flex;position:absolute;transform:translate(-50%)}.knob-ring{border-radius:50%;place-items:center;width:124px;height:124px;display:grid;position:relative}.knob-ring.faded:before{opacity:.3;transition:opacity 1.2s}.knob-ring:before{content:"";pointer-events:none;background:conic-gradient(from var(--lo), #62c480f2 0 var(--span), transparent var(--span)), conic-gradient(from calc(var(--sweep) / -2), #fffc 0 var(--sweep), transparent var(--sweep));border-radius:50%;position:absolute;inset:0;-webkit-mask:radial-gradient(circle,#0000 53px,#000 54px);mask:radial-gradient(circle,#0000 53px,#000 54px)}.tick{color:var(--cocoa-2);text-shadow:0 1px #fff;font-size:13px;position:absolute;bottom:4px}.tick.t0{left:4px}.tick.t1{right:4px}.knob{touch-action:none;cursor:grab;width:92px;height:92px;box-shadow:0 7px 0 #9c8b80, var(--shadow);transform:rotate(var(--angle));background:radial-gradient(circle at 35% 30%,#fff,#e9dfd8 45%,#bfb0a6);border-radius:50%;position:relative}.knob:active{cursor:grabbing}.knob:before{content:"";background:radial-gradient(circle at 40% 35%,#fbf6f2,#d9cbc1);border-radius:50%;position:absolute;inset:14px;box-shadow:inset 0 -3px 6px #00000026}.knob-dot{background:var(--berry);border-radius:6px;width:10px;height:22px;margin-left:-5px;position:absolute;top:8px;left:50%}.knob:focus-visible{outline:3px solid var(--berry);outline-offset:4px}.knob[aria-disabled=true]{opacity:.55}.knob-label{background:#ffffffd9;border-radius:999px;padding:3px 12px;font-size:15px}.stir{flex-direction:column;align-items:center;gap:6px;animation:.5s .25s both slide-in-l;display:flex;position:absolute;top:50%;left:16px;transform:translateY(-50%)}.stir-icon{filter:drop-shadow(0 2px 2px #00000026);animation:linear infinite spin;display:grid}.stir-bar{background:#fffc;border-radius:999px;width:12px;height:min(26vh,170px);position:relative;overflow:hidden;box-shadow:inset 0 2px 4px #5a281433}.stir-bar div{background:linear-gradient(0deg, #ffb36b, var(--berry));border-radius:inherit;transition:height .1s;position:absolute;bottom:0;left:0;right:0}.hud.done .knob-wrap,.hud.burnt .knob-wrap,.hud.done .stir,.hud.burnt .stir,.hud.done .thermo,.hud.burnt .thermo{opacity:0;pointer-events:none;transition:opacity .4s}.sheet{padding:22px 20px max(22px, env(safe-area-inset-bottom));text-align:center;background:linear-gradient(#fffaf5,#ffe9de);border-radius:28px 28px 0 0;max-height:42vh;animation:.6s cubic-bezier(.2,1.2,.4,1) both sheet-up;position:absolute;bottom:0;left:0;right:0;box-shadow:0 -12px 40px #5a281447}.sheet h2{margin:4px 0 12px;font-size:30px;font-weight:400}.card-kicker{color:var(--berry);margin:0}.cause{color:var(--cocoa-2);margin:-4px 0 12px;font-size:15px}.stats{justify-content:center;gap:14px;margin:0 0 16px;display:flex}.stats p{flex-direction:column;align-items:center;margin:0;display:flex}.stats b{color:var(--cocoa-2);font-size:26px;font-weight:400}.stats span{color:var(--cocoa-2);opacity:.8;font-size:13px}.sheet-actions{flex-direction:column;align-items:center;gap:10px;display:flex}.btn.ghost{color:var(--cocoa-2);box-shadow:none;background:#ffffffb3;padding:10px 18px;font-size:15px}@keyframes sheet-up{0%{transform:translateY(100%)}}@keyframes slide-up{0%{opacity:0;transform:translate(-50%,40px)}}@keyframes slide-in-l{0%{opacity:0;transform:translate(-30px,-50%)}}@keyframes slide-in-r{0%{opacity:0;transform:translate(30px,-50%)}}@keyframes spin{to{transform:rotate(-360deg)}}@keyframes rise{0%{opacity:0;transform:translateY(18px)}}@keyframes shake{0%,to{transform:translateY(-50%)}25%{transform:translate(-3px,-50%)}75%{transform:translate(3px,-50%)}}@media (prefers-reduced-motion:reduce){*,:before{transition:none!important;animation:none!important}}