/* Hand-drawn character flipbooks, with real transparent backgrounds. */
.companion{display:block;position:relative;width:130px;height:130px;flex-shrink:0;isolation:isolate;mix-blend-mode:normal;overflow:visible}
.companion-sprite{display:block;position:absolute;inset:0;background-position:center;background-size:contain;background-repeat:no-repeat;z-index:1;transform-origin:50% 93%}
.companion.is-ready .companion-sprite{background-size:200% 200%;background-position:0 0;animation:companion-frames 2.8s steps(1,end) infinite}
.companion:not(.is-ready) .companion-sprite{mix-blend-mode:multiply}
.companion-ground{position:absolute;left:21%;right:21%;bottom:1%;height:5%;background:#9d81681c;border-radius:50%;filter:blur(2px);z-index:0}
.companion[data-companion=focus] .companion-sprite{animation-duration:1.8s}
.companion[data-companion=tea] .companion-sprite{animation-duration:4.8s}
.companion[data-companion=sleep] .companion-sprite{animation-duration:6s}
.companion[data-companion=money] .companion-sprite{animation-duration:3.2s}
.companion[data-companion=celebrate] .companion-sprite{animation-duration:1.6s}
.companion[data-companion=curious] .companion-sprite{animation-duration:4s}
.companion-effects{position:absolute;inset:0;z-index:2;pointer-events:none}
.companion-effects i{position:absolute;display:block;left:14%;top:28%;width:8%;height:8%;animation:little-spark 3s ease-in-out infinite;opacity:0}
.companion-effects i:nth-child(2){left:81%;top:40%;width:5%;height:5%;animation-delay:.8s}
.companion-effects i:nth-child(3){left:78%;top:14%;width:6%;height:6%;animation-delay:1.7s}
.companion-effects i:after{content:'✦';display:block;font-size:clamp(9px,1.1vw,18px);line-height:1;color:#d4ad66}
.companion[data-companion=tea] .companion-effects i{left:47%;top:38%;width:4%;height:11%;border-left:1.5px solid #9caa87;border-radius:50%;animation:little-steam 4s ease-out infinite}
.companion[data-companion=tea] .companion-effects i:nth-child(2){left:53%;animation-delay:1.3s}
.companion[data-companion=tea] .companion-effects i:nth-child(3){left:50%;animation-delay:2.6s}
.companion[data-companion=tea] .companion-effects i:after{content:none}
.companion[data-companion=sleep] .companion-effects i{left:75%;top:34%;animation:little-dream 4.5s ease-in-out infinite}
.companion[data-companion=sleep] .companion-effects i:nth-child(2){left:82%;top:23%;animation-delay:1.5s}
.companion[data-companion=sleep] .companion-effects i:nth-child(3){left:86%;top:12%;animation-delay:3s}
.companion[data-companion=sleep] .companion-effects i:after{content:'z';font:600 14px Georgia,serif;color:#b397ba}
.companion[data-companion=celebrate] .companion-effects i:after{content:'♡';color:#cc918d;font-size:20px}
.companion[data-companion=money] .companion-effects i:after{content:'✧';color:#d3ab62}
.companion[data-companion=curious] .companion-effects i:after{content:'?';font:italic 16px Georgia,serif;color:#af9685}
.companion:not(.is-ready) .companion-effects{display:none}
.companion.offscreen *,.page-resting .companion *{animation-play-state:paused!important}
@keyframes companion-frames{0%,100%{background-position:0 0}25%{background-position:100% 0}50%{background-position:0 100%}75%{background-position:100% 100%}}
@keyframes little-spark{0%,100%{opacity:0;transform:scale(.4) rotate(-12deg)}40%,65%{opacity:.85;transform:scale(1) rotate(8deg)}}
@keyframes little-steam{0%{opacity:0;transform:translateY(5px) scale(.7)}35%{opacity:.5}100%{opacity:0;transform:translateY(-19px) scale(1.2)}}
@keyframes little-dream{0%,100%{opacity:0;transform:translateY(4px) scale(.7)}45%{opacity:.7;transform:translateY(-7px) scale(1)}}
@keyframes little-press{50%{transform:scale(.96)}}
@keyframes little-nudge{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.action-pulse{animation:little-press .28s ease-out!important}
.field-needs-love{animation:little-nudge .24s ease-in-out 2}
.empty-state .mascot{width:99px;height:99px;margin:0 auto 11px}
.empty-state.compact .mascot{width:90px;height:90px;margin:0}
.checkin-card>.mascot{width:72px;height:72px}
.mini-banner>.mascot{width:80px;height:80px}
.timer-friend>.mascot{width:145px;height:145px}
.planner-friend>.mascot{width:210px;height:210px;margin:auto}
.storage-note>.mascot{width:95px;height:95px}
.modal-top>.mascot{width:84px;height:84px}
.confirm>.mascot{width:145px;height:145px;margin:0 auto 12px}
.toast>.mascot{width:66px;height:66px}
.boot>.mascot{width:160px;height:160px}
.boot .loading-dots{display:inline-block;animation:little-dream 1.7s ease-in-out infinite}
.timer-card .timer-friend{min-height:155px;height:auto;position:relative;gap:12px;margin:16px -4px 0;padding:5px 8px 0;border-radius:24px;background:radial-gradient(ellipse at 28% 68%,#f0e8f3 0,transparent 65%)}
.timer-card.break-mode .timer-friend{background:radial-gradient(ellipse at 28% 68%,#e9eedc 0,transparent 65%)}
.timer-card .speech-bubble{position:relative;z-index:3}
.hero .companion{bottom:4px}
.hero-gallery{font-size:10px;background:#fff9ef;border:1px solid #e5d6c3;color:#967b64;cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:20px;white-space:nowrap}
.hero-gallery:hover{background:#fffdf7;border-color:#c9ac8a}
.hero-gallery .icon{width:12px;height:12px}
.side-note .companion-link{border:0;background:none;color:#a18c76;font:inherit;font-size:10px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;margin:6px auto 1px;display:block}
.companion-card{background:linear-gradient(145deg,#f5eee9,#fbf4e7);position:relative;overflow:hidden}
.companion-card .companion-preview{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.companion-preview>.mascot{width:108px;height:108px}
.companion-preview p{font-size:12px;color:#a18b79;line-height:1.9;max-width:210px}
.companion-preview strong{display:block;color:var(--ink);font-size:14px}
.companion-gallery{padding:24px;position:relative;background:#fffcf7}
.companion-gallery>.close{position:absolute;right:15px;top:15px;z-index:4}
.companion-gallery header{text-align:center;padding:8px 20px 0}
.companion-gallery h2{font-size:22px;margin-top:5px}
.companion-gallery header p{font-size:11px;color:var(--muted);margin:5px 0}
.companion-stage{display:flex;flex-direction:column;align-items:center;position:relative;text-align:center;margin:16px 0 18px;padding:10px 12px 16px;border-radius:22px;background:radial-gradient(ellipse at 50% 44%,#f0e7f2,transparent 65%),#faf5f0;overflow:hidden;min-height:315px;transition:background-color .25s}
.companion-stage[data-scene=matcha],.companion-stage[data-scene=savings]{background:radial-gradient(ellipse at 50% 44%,#e5edd9,transparent 65%),#f6f5ec}
.companion-stage[data-scene=rest]{background:radial-gradient(ellipse at 50% 44%,#e5dff0,transparent 65%),#f5f1f7}
.companion-stage[data-scene=cheer],.companion-stage[data-scene=hello]{background:radial-gradient(ellipse at 50% 44%,#f6e1dd,transparent 65%),#fcf2e9}
.companion-stage>.mascot{width:230px;height:230px;z-index:2}
.companion-stage strong{font-family:Georgia,serif;font-size:20px;color:#8e6e61;position:relative;z-index:2}
.companion-stage p{font-size:11px;color:#a28a79;margin:6px 0 0;position:relative;z-index:2;min-height:18px}
.stage-doodle{position:absolute;color:#d5bb91;font-family:Georgia,serif;font-style:italic;font-size:28px;opacity:.6;top:38px;left:45px;transform:rotate(-14deg)}
.stage-doodle:last-child{left:auto;right:35px;top:70px;font-size:35px;transform:rotate(15deg)}
.companion-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.companion-option{border:1px solid #eadfd2;border-radius:13px;background:#fffcf7;display:flex;flex-direction:column;align-items:center;padding:7px 3px 9px;gap:4px;color:#9b8270;cursor:pointer;font:inherit;font-size:10px;transition:background .15s,border-color .15s}
.companion-option:hover{background:#f7efe4;border-color:#c5ab90}
.companion-option[aria-pressed=true]{background:#f2e3db;border-color:#c29d8c;color:#8a6458;box-shadow:inset 0 0 0 1px #c29d8c}
.companion-option>.mascot{width:58px;height:58px}
.companion-option .companion-sprite{animation:none!important;background-position:0 0!important}
.companion-option .companion-effects,.companion-option .companion-ground{display:none}
.gallery-foot{font-size:10px;color:#ac9682;text-align:center;line-height:1.8;margin:13px 0 0}
body.reduce-motion .companion-effects{display:none}
@media(prefers-reduced-motion:reduce){.companion-effects{display:none}}
@media(max-width:1000px){.planner-friend>.mascot{width:140px;height:140px;margin:0}.timer-card .timer-friend{min-height:150px}.timer-friend>.mascot{width:140px;height:140px}}
@media(max-width:760px){.checkin-card>.mascot{width:62px;height:62px}.hero-gallery{padding:6px 8px;font-size:9px}}
@media(max-width:550px){.hero-copy .actions{max-width:200px;gap:7px}.hero-gallery{font-size:9px;min-height:28px}.hero .companion{width:155px;height:155px;right:-9px;bottom:9px}.hero{min-height:231px}.hero-copy{max-width:71%}.empty-state.compact .mascot{width:99px;height:99px}.checkin-card>.mascot{width:80px;height:80px}.planner-friend>.mascot{width:115px;height:115px}.modal-top>.mascot{width:70px;height:70px}.toast>.mascot{width:60px;height:60px}.timer-card .timer-friend{min-height:149px;padding:3px 0 0;gap:8px}.timer-friend>.mascot{width:135px;height:135px}.companion-gallery{padding:20px 17px}.companion-gallery header{padding:11px 12px 0}.companion-gallery h2{font-size:21px}.companion-stage{min-height:290px;padding-top:4px}.companion-stage>.mascot{width:212px;height:212px}.companion-stage p{max-width:245px}.companion-picker{gap:6px}.companion-option{font-size:9px;padding:6px 2px 8px}.companion-option>.mascot{width:52px;height:52px}.stage-doodle{left:18px;top:35px;font-size:24px}.stage-doodle:last-child{right:17px;top:58px}.companion-preview>.mascot{width:95px;height:95px}}
@media(prefers-reduced-motion:reduce){.action-pulse,.field-needs-love{animation:none!important}}