:root{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#261a1a;background:#fbf8f4}*{box-sizing:border-box}body{margin:0}.shell{max-width:1250px;margin:auto;padding:22px clamp(18px,4vw,56px) 50px}.top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:20px;border-bottom:1px solid #e8deda}.back{color:#782032;text-decoration:none;font-weight:750}.status-pill{font-size:10px;letter-spacing:.08em;color:#805665;text-align:right}.hero{display:grid;grid-template-columns:minmax(280px,.85fr) minmax(340px,1.15fr);gap:clamp(25px,5vw,70px);align-items:start;padding-top:55px}.art{text-align:center;position:sticky;top:30px}.scene{border-radius:36px;background:radial-gradient(circle at 50% 30%,#fff5e3,#f1d9b6 72%,#e7c7a0);aspect-ratio:1;overflow:hidden;display:grid;align-items:end;box-shadow:0 25px 60px #692e191c}.yotee-art{width:100%;max-height:100%;display:block}.visual-caption{font-size:11px;color:#7b6965;margin-top:12px}.eyebrow{font-size:11px;color:#8c1d32;letter-spacing:.18em;font-weight:850}h1{font-size:clamp(55px,7vw,92px);line-height:1;margin:14px 0 20px;letter-spacing:-.06em}.dot{color:#a93a4d}.lead{font-size:clamp(17px,2vw,22px);line-height:1.45;max-width:590px;color:#5c4140}.disclaimer{font-size:12px;color:#725e5b;line-height:1.5}.chat{margin-top:25px;background:#fff;border:1px solid #e8d9d3;border-radius:22px;padding:16px;box-shadow:0 10px 34px #3c17200c}.messages{height:245px;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:10px 6px 15px}.bubble{max-width:92%;padding:12px 15px;border-radius:16px;line-height:1.48;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}.bubble.yotee{background:#f5ebeb;align-self:flex-start}.bubble.you{background:#8c1d32;color:white;align-self:flex-end}.compose{display:flex;gap:8px}input{min-width:0;flex:1;border:1px solid #dac9c7;border-radius:12px;padding:13px;font:inherit;font-size:14px}button{border:1px solid #d8bfc1;border-radius:12px;padding:12px 14px;background:white;color:#752139;font-weight:700;cursor:pointer}button:hover{background:#f8eef0}button:focus-visible,input:focus-visible{outline:3px solid #bc8090;outline-offset:2px}button:disabled{opacity:.55;cursor:wait}#send{background:#8c1d32;color:white;border-color:#8c1d32}.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.actions button{font-size:12px}.actions button[aria-pressed=true]{background:#8c1d32;color:white}#status{font-size:12px;color:#674b4a;min-height:18px;margin:12px 2px}.privacy{font-size:11px;color:#7c706d;line-height:1.5;border-top:1px solid #eee7e4;padding-top:10px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.open-mouth{display:none}.scene.talking .open-mouth{display:block;animation:talk .2s infinite alternate}.scene.talking .closed-mouth{display:none}.float{animation:float 4s ease-in-out infinite;transform-origin:center}.eyes{transform-origin:center;animation:blink 7s infinite}@keyframes talk{from{transform:scaleY(.7);transform-origin:211px 266px}to{transform:scaleY(1.15);transform-origin:211px 266px}}@keyframes float{50%{transform:translateY(6px)}}@keyframes blink{0%,95%,98%,100%{transform:scaleY(1)}96%,97%{transform:scaleY(.08)}}@media(max-width:750px){.hero{grid-template-columns:1fr;padding-top:22px;gap:22px}.art{position:static;max-width:380px;margin:auto}.scene{max-height:310px}.messages{height:220px}h1{font-size:54px}}@media(prefers-reduced-motion:reduce){.float,.eyes,.scene.talking .open-mouth{animation:none}}
/* Phase 2 visual: retain the user's exact original cartoon rather than a redrawn mascot. */
.scene{position:relative;display:grid;place-items:center;aspect-ratio:1;background:#fff}
.yotee-original{display:block;width:100%;height:100%;object-fit:contain;object-position:center;animation:yotee-breathe 4s ease-in-out infinite;transform-origin:center 70%}
.talking-indicator{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;align-items:end;gap:5px;height:26px;background:#8c1d32d9;padding:7px 12px;border-radius:99px;opacity:0;transition:opacity .2s;pointer-events:none}
.talking-indicator span{display:block;width:4px;height:8px;border-radius:4px;background:#fff}
.scene.talking .talking-indicator{opacity:1}
.scene.talking .talking-indicator span{animation:yotee-bars .48s ease-in-out infinite alternate}
.scene.talking .talking-indicator span:nth-child(2){animation-delay:.12s}.scene.talking .talking-indicator span:nth-child(3){animation-delay:.24s}.scene.talking .talking-indicator span:nth-child(4){animation-delay:.06s}.scene.talking .talking-indicator span:nth-child(5){animation-delay:.18s}
@keyframes yotee-bars{from{height:4px}to{height:19px}}@keyframes yotee-breathe{50%{transform:translateY(4px) scale(1.006)}}
@media(prefers-reduced-motion:reduce){.yotee-original,.scene.talking .talking-indicator span{animation:none}}

/* Animate only the lower muzzle using a masked copy of the original uploaded
   image; preserve the character's actual likeness instead of redrawing it. */
.mouth-animation{position:absolute;inset:0;background-image:url('/tools/yote/yote-original.jpg');background-size:100% 100%;background-repeat:no-repeat;clip-path:polygon(25% 47%,60% 46%,72% 53%,64% 65%,42% 70%,25% 58%);transform-origin:48% 48%;pointer-events:none;opacity:0}
.scene.talking .mouth-animation{opacity:1;animation:yotee-jaw .29s steps(2,end) infinite alternate}
@keyframes yotee-jaw{from{transform:translateY(0) scaleY(1)}to{transform:translateY(5px) scaleY(1.025)}}
@media(prefers-reduced-motion:reduce){.scene.talking .mouth-animation{animation:none;opacity:0}}

/* Lucide-style controls, with text labels retained for accessibility. */
.compose button,.actions button{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.compose button svg,.actions button svg{width:17px;height:17px;flex:none}
.actions button{min-height:44px}
@media(max-width:390px){.actions{display:grid;grid-template-columns:1fr}.actions button{justify-content:center}}