:root{--bg:#FFF9FA;--card:#FFFFFF;--soft:#FCEEF1;--pink:#F6C9D3;--pink-deep:#E39AAE;--berry:#C4405C;--berry-ink:#FFFFFF;--mint:#DDF1E7;--mint-deep:#7FB79B;--mint-ink:#2F6B4F;--ink:#2E2A33;--muted:#6F6670;--line:#F0DCE2;--warn-bg:#FFF4E0;--warn-ink:#7A4E00;--bad-bg:#FDE7EA;--bad-ink:#A3263F;--ok-bg:#E3F4EB;--ok-ink:#2F6B4F;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--bg:#1E1A1F;--card:#29232A;--soft:#352A31;--pink:#5A3B46;--pink-deep:#E39AAE;--berry:#F08FA4;--berry-ink:#2A1018;--mint:#24392F;--mint-deep:#7FB79B;--mint-ink:#A8DDC1;--ink:#F5EEF2;--muted:#B9AEB6;--line:#3D3238;--warn-bg:#3A2F1C;--warn-ink:#F2C879;--bad-bg:#40222A;--bad-ink:#F4A3B3;--ok-bg:#22362C;--ok-ink:#A8DDC1;color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-text-size-adjust:100%;padding-bottom:calc(80px + env(safe-area-inset-bottom))}
a{color:var(--berry)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.top{position:sticky;top:0;z-index:5;background:var(--bg);display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;border-bottom:1px solid var(--line)}
.top .mini{width:38px;height:36px;flex:none}
.brand{flex:1;min-width:0;line-height:1.2}
.brand b{display:block;font-size:19px;letter-spacing:-.2px}
.brand small{color:var(--muted);font-size:12px}
.cur{width:auto;min-width:72px;padding:8px 10px;font-weight:600}
main{max-width:560px;margin:0 auto;padding:14px 16px 8px}
.hero{display:flex;gap:10px;align-items:flex-end;margin:2px 0 14px}
.mascot{width:100px;height:93px;flex:none}
.bubble{margin:0 0 18px;flex:1;background:var(--card);border:1px solid var(--line);border-radius:18px 18px 18px 4px;padding:11px 14px;font-size:15px;min-height:64px}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:16px;margin:0 0 14px}
h1{font-size:22px;line-height:1.25;margin:0 0 4px;letter-spacing:-.3px}
h2{font-size:17px;margin:0 0 8px}
p{margin:0 0 10px}
.note{font-size:13px;color:var(--muted);margin:0 0 10px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.full{grid-column:1/-1}
label{display:block;font-size:13px;color:var(--muted);margin:0 0 4px}
input,select{width:100%;font:inherit;font-size:16px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--soft);color:var(--ink);min-height:44px}
select{-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;background-size:5px 5px;background-repeat:no-repeat;padding-right:26px}
input:focus,select:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--pink-deep);outline-offset:1px}
.result{background:var(--soft);border-color:var(--pink)}
.big{font-size:42px;font-weight:800;letter-spacing:-1px;line-height:1.1;margin:2px 0 4px}
.rows{list-style:none;margin:10px 0 0;padding:0}
.rows li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:15px}
.rows li:last-child{border-bottom:0}
.rows li span:last-child{text-align:right;font-variant-numeric:tabular-nums}
.rows li.strong{font-weight:700}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:14px;padding:12px 16px;font:inherit;font-weight:650;background:var(--berry);color:var(--berry-ink);text-decoration:none;cursor:pointer;min-height:46px}
.btn.ghost{background:var(--mint);color:var(--mint-ink)}
.btn.small{padding:8px 12px;min-height:38px;font-size:14px}
.btn.block{width:100%}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.btn-row .btn{flex:1}
.msg{border-radius:12px;padding:10px 12px;font-size:14px;margin:10px 0 0}
.msg:empty{display:none}
.msg.warn{background:var(--warn-bg);color:var(--warn-ink)}
.msg.bad{background:var(--bad-bg);color:var(--bad-ink)}
.msg.ok{background:var(--ok-bg);color:var(--ok-ink)}
.ing{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px;margin:0 0 10px}
.ing-top{display:flex;gap:8px;align-items:center}
.ing-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.pair{display:grid;grid-template-columns:1fr 78px;gap:6px}
.pair select{padding-left:8px}
.lc b{display:block;font-size:18px;padding-top:10px;font-variant-numeric:tabular-nums}
.ing .note{margin:8px 0 0}
.ing .note:empty{display:none}
.icon-btn{flex:none;background:var(--soft);border:0;color:var(--muted);width:44px;height:44px;border-radius:12px;font-size:22px;line-height:1;cursor:pointer}
.saved{list-style:none;margin:0;padding:0}
.saved li{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px dashed var(--line)}
.saved li:last-child{border-bottom:0}
.saved .meta{flex:1;min-width:0}
.saved .meta b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.saved .meta small{color:var(--muted)}
.pill{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--mint);color:var(--mint-ink);margin-bottom:8px}
.pro h2{display:flex;align-items:center;gap:8px}
.pro svg{width:22px;height:22px;flex:none;color:var(--berry)}
.links{list-style:none;margin:0;padding:0}
.links li{padding:10px 0;border-bottom:1px dashed var(--line)}
.links li:last-child{border-bottom:0}
.links a{font-weight:650;text-decoration:none}
.links small{display:block;color:var(--muted)}
.install{display:flex;gap:10px;align-items:center;background:var(--mint);color:var(--mint-ink);border-radius:16px;padding:10px 12px;margin:0 0 12px;font-size:14px}
.install[hidden]{display:none}
.install p{flex:1;margin:0}
.install .icon-btn{background:transparent;color:var(--mint-ink);width:36px;height:36px}
.foot{font-size:13px;color:var(--muted);text-align:center;padding:8px 8px 16px}
section[hidden]{display:none}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--card);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
.tabbar button{background:none;border:0;font:inherit;font-size:12px;font-weight:600;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;border-radius:14px;cursor:pointer;min-height:52px}
.tabbar svg{width:24px;height:24px}
.tabbar button[aria-selected="true"]{color:var(--berry);background:var(--soft)}
.mascot .m-flat,.mascot .m-sad,.mascot .drop{display:none}
.mascot[data-mood="flat"] .m-happy,.mascot[data-mood="sad"] .m-happy{display:none}
.mascot[data-mood="flat"] .m-flat,.mascot[data-mood="sad"] .m-sad,.mascot[data-mood="sad"] .drop{display:inline}
@keyframes hop{0%{transform:translateY(0)}40%{transform:translateY(-7px)}100%{transform:translateY(0)}}
.mascot.hop{animation:hop .45s ease}
@media (prefers-reduced-motion:reduce){.mascot.hop{animation:none}}
@media (min-width:600px){.mascot{width:120px;height:111px}}

/* ---------- Talk to Bento ---------- */
body[data-tab="talk"] .hero{display:none}
.talk{position:relative;text-align:center}
.talk[hidden],.talk-main[hidden],.chat[hidden],.ask-form[hidden]{display:none}
.speaker{position:absolute;top:0;right:0;z-index:3;display:flex;align-items:center;justify-content:center;color:var(--berry)}
.speaker svg{width:24px;height:24px}
.speaker .spk-off,.speaker.off .spk-on{display:none}
.speaker.off .spk-off{display:block}
.speaker.off{color:var(--muted)}
.stage{position:relative;width:min(52vw,214px);aspect-ratio:1/1;margin:0 auto}
.ring{position:absolute;left:4%;right:4%;top:8%;bottom:2%;border-radius:50%;border:3px solid var(--pink-deep);opacity:0;pointer-events:none}
.bento-tap{display:block;width:100%;height:100%;padding:0;margin:0;border:0;background:none;border-radius:28px;cursor:pointer;-webkit-tap-highlight-color:transparent;position:relative}
.tb-hop{display:block;width:100%;height:100%}
.tb{display:block;width:100%;height:100%;overflow:visible;transform-origin:50% 100%;animation:tbBreathe 3.6s ease-in-out infinite}
.heard{min-height:20px;margin:2px 0 6px;font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.talk-bubble{position:relative;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px 14px;margin:0 0 12px;text-align:left}
.talk-bubble::before{content:"";position:absolute;top:-8px;left:50%;width:14px;height:14px;margin-left:-7px;background:var(--card);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
#talkSay{margin:0;font-size:16px;white-space:pre-line;overflow-wrap:anywhere;position:relative}
.talk-actions:empty{display:none}
.talk-actions,.cm-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.talk-actions .btn,.cm-actions .btn{min-height:44px}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 14px}
.chip{min-height:44px;padding:8px 14px;border-radius:999px;border:1px solid var(--pink);background:var(--soft);color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer;max-width:100%}
.ask-form,.chat-form{display:flex;gap:8px;align-items:center;margin:0 0 8px}
.ask-form input,.chat-form input{flex:1;min-width:0}
.ask-form .btn,.chat-form .btn{flex:none;min-height:46px}
.tip{margin:0 0 12px}
.mic-wrap{display:flex;flex-direction:column;align-items:center;margin:4px 0 10px}
.mic{position:relative;width:84px;height:84px;border-radius:50%;border:0;background:var(--berry);color:var(--berry-ink);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 18px rgba(196,64,92,.28)}
.mic svg{width:38px;height:38px}
.mic::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:3px solid var(--berry);opacity:0;pointer-events:none}
.mic.listening{background:var(--mint-ink);color:var(--card)}
.mic.listening::after{border-color:var(--mint-ink);animation:tbPulse 1.3s ease-out infinite}
.mic:focus-visible{outline:3px solid var(--pink-deep);outline-offset:4px}
.mic-label{font-weight:700;margin-top:6px}
.honest{margin:0 auto 12px;max-width:34em}
.chat-head{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding-right:52px;text-align:left}
.chat-head .mini{width:38px;height:36px;flex:none}
.chat-head h2{flex:1;margin:0;font-size:17px}
.talk-back{min-height:44px;padding:8px 14px;font-size:14px}
.talk-back svg{width:18px;height:18px}
.chat-log{display:flex;flex-direction:column;gap:8px;min-height:38vh;padding:4px 0 10px}
.cm{max-width:88%;padding:10px 13px;font-size:15px;text-align:left;overflow-wrap:anywhere}
.cm p{margin:0;white-space:pre-line}
.cm-b{align-self:flex-start;background:var(--card);border:1px solid var(--line);border-radius:18px 18px 18px 4px}
.cm-u{align-self:flex-end;background:var(--berry);color:var(--berry-ink);border-radius:18px 18px 4px 18px}
.cm-typing{display:flex;gap:5px;padding:14px 16px}
.cm-typing span{width:7px;height:7px;border-radius:50%;background:var(--pink-deep);animation:tbDot 1s ease-in-out infinite}
.cm-typing span:nth-child(2){animation-delay:.15s}.cm-typing span:nth-child(3){animation-delay:.3s}
.chat-form{position:sticky;bottom:calc(66px + env(safe-area-inset-bottom));background:var(--bg);padding:8px 0;z-index:2}

/* Bento's face: every mood is a static pose; motion is added on top (so reduced motion keeps the faces) */
.tb .m-worry,.tb .m-open,.tb .m-o,.tb .m-talk,.tb .br,.tb .tb-drop,.tb .tb-dots,.tb .tb-z,.tb .tb-sparkles{display:none}
.tb.mood-thinking .m-happy,.tb.mood-excited .m-happy,.tb.mood-worried .m-happy,.tb.mood-sleepy .m-happy{display:none}
.tb.mood-thinking .m-o,.tb.mood-thinking .br-think,.tb.mood-thinking .tb-dots{display:inline}
.tb.mood-excited .m-open,.tb.mood-excited .tb-sparkles{display:inline}
.tb.mood-worried .m-worry,.tb.mood-worried .br-worry,.tb.mood-worried .tb-drop{display:inline}
.tb.mood-sleepy .m-o,.tb.mood-sleepy .tb-z{display:inline}
.tb.speaking .m-happy,.tb.speaking .m-worry,.tb.speaking .m-open,.tb.speaking .m-o{display:none}
.tb.speaking .m-talk{display:inline}
.tb .eye,.tb .eye-hi,.tb .m-talk,.tb .cheek,.tb .spk,.tb-leaf,.tb-berry{transform-box:fill-box}
.tb .eye,.tb .eye-hi{transform-origin:50% 50%;transition:transform .08s ease}
.tb.mood-listening .eye{transform:scale(1.12)}
.tb.mood-sleepy .eye,.tb.mood-sleepy .eye-hi{transform:scaleY(.3);animation:tbSlowBlink 4s ease-in-out infinite}
.tb.blink .eye,.tb.blink .eye-hi{transform:scaleY(.1)}
.tb-gaze{transition:transform .25s ease}
.tb.mood-thinking .tb-gaze{transform:translate(1.5px,-2.6px)}
.tb.mood-worried .tb-gaze{transform:translateY(.8px)}
.tb-look{transition:transform .12s linear}
.tb-leaf{transform-origin:0% 100%;transition:transform .25s ease}
.tb.mood-listening .tb-leaf{transform:rotate(-24deg) scale(1.18)}
.tb-berry{transform-origin:50% 100%}
.tb-berry.wobble{animation:tbWobble .8s ease}
.tb .cheek{transform-origin:50% 50%}
.tb.blush .cheek{animation:tbBlush .8s ease-in-out 2}
.tb .m-talk{transform-origin:50% 0;transform:scaleY(.3);transition:transform .06s ease}
.tb.mouth-open .m-talk{transform:scaleY(1)}
.tb.talk-loop .m-talk{animation:tbTalk .24s ease-in-out infinite alternate}
.tb .spk{transform-origin:50% 50%;animation:tbTwinkle 1.1s ease-in-out infinite}
.tb .spk:nth-child(2){animation-delay:.35s}.tb .spk:nth-child(3){animation-delay:.7s}
.tb .dot{animation:tbDot 1s ease-in-out infinite}
.tb .dot:nth-of-type(2){animation-delay:.15s}.tb .dot:nth-of-type(3){animation-delay:.3s}
.tb .tb-z text{animation:tbZ 2.4s ease-in-out infinite}
.tb .tb-z .z2{animation-delay:1.2s}
.tb.mood-thinking{animation:tbSway 1.2s ease-in-out infinite}
.tb.mood-sleepy{animation-duration:6s}
.tb-hop.hop{animation:tbHop .5s cubic-bezier(.3,1.5,.5,1)}
.bento-tap.squish{animation:tbSquish .45s ease}
.stage[data-mood="listening"] .ring{opacity:1;animation:tbPulse 1.4s ease-out infinite}
.paused,.paused *,.paused *::after{animation-play-state:paused !important}
@keyframes tbBreathe{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-4px) scale(1.012,1.025)}}
@keyframes tbSway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes tbHop{0%{transform:translateY(0)}35%{transform:translateY(-14px)}70%{transform:translateY(0) scale(1.04,.96)}100%{transform:none}}
@keyframes tbSquish{0%{transform:scale(1)}30%{transform:scale(1.1,.86)}60%{transform:scale(.95,1.06)}100%{transform:scale(1)}}
@keyframes tbSlowBlink{0%,55%,100%{transform:scaleY(.3)}70%,85%{transform:scaleY(.08)}}
@keyframes tbWobble{0%,100%{transform:rotate(0)}20%{transform:rotate(-10deg)}45%{transform:rotate(8deg)}70%{transform:rotate(-4deg)}}
@keyframes tbBlush{50%{transform:scale(1.35);opacity:1}}
@keyframes tbTalk{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
@keyframes tbTwinkle{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.45);opacity:.35}}
@keyframes tbDot{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes tbZ{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-6px);opacity:0}}
@keyframes tbPulse{0%{transform:scale(.88);opacity:.75}100%{transform:scale(1.22);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .tb,.tb.mood-thinking,.tb-hop.hop,.bento-tap.squish,.tb-berry.wobble,.tb.blush .cheek,.tb .spk,.tb .dot,.tb .tb-z text,.stage .ring,.mic.listening::after,.cm-typing span{animation:none !important}
  .stage[data-mood="listening"] .ring{opacity:.7}
  .mic.listening::after{opacity:.6}
  .tb-gaze,.tb-look,.tb-leaf{transition:none}
}
@media (min-width:600px){.stage{width:230px}}