#mascotCall.mascot-call{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:radial-gradient(ellipse at 50% 40%,#fffdf8 0%,#faf1ed 43%,#f0dfdd 100%);color:#563e3b;overflow:hidden;box-sizing:border-box}
#mascotCall[open]{display:flex;flex-direction:column}#mascotCall *{box-sizing:border-box}
.mascot-header{display:flex;align-items:center;justify-content:space-between;padding:calc(18px + env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) 8px max(24px,env(safe-area-inset-left));flex:none}
.mascot-wordmark{display:flex;gap:10px;align-items:center}.mascot-wordmark img{width:38px;height:38px;border-radius:12px}.mascot-wordmark span{font:650 17px/1.3 system-ui}.mascot-wordmark small{display:block;font-size:11px;font-weight:400;color:#927874;margin-top:2px}
#mascotCall .mascot-minimize{position:static!important;width:44px;height:44px;margin:0;border:1px solid #ddc7c2;border-radius:50%;background:#ffffff80;display:grid;place-items:center;color:#765852;padding:11px;cursor:pointer}
.mascot-call svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mascot-heading{display:flex;align-items:center;justify-content:center;gap:8px;min-height:38px;font:500 14px system-ui;flex:none}.mascot-heading time{font-size:12px;color:#957d77;font-variant-numeric:tabular-nums}.mascot-status-dot{height:6px;width:6px;background:#b7a39c;border-radius:50%}.mascot-call[data-active=true] .mascot-status-dot{background:#74a587;box-shadow:0 0 0 4px #74a58718}
.mascot-stage{position:relative;flex:1;min-height:0;max-width:1100px;width:100%;align-self:center;isolation:isolate;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.mascot-stage canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;outline-offset:-5px}.mascot-stage canvas:focus:not(:focus-visible){outline:0}
.mascot-orbit{position:absolute;border:1px solid #ddc6c140;border-radius:50%;width:56%;aspect-ratio:1;left:22%;top:10%;z-index:-1;pointer-events:none}.orbit-two{width:70%;left:15%;top:0%;border-style:dashed;opacity:.5}
.mascot-caption{align-self:center;max-width:calc(100% - 32px);min-height:32px;padding:7px 16px;font:500 13px/1.4 system-ui;border-radius:20px;background:transparent;color:#a05e62;flex:none}.mascot-caption.visible{background:#fff8;border:1px solid #e6ceca}
.mascot-hint{text-align:center;padding:0 22px;margin:5px 0 15px;font:12px/1.5 system-ui;color:#9c817b;flex:none}
.mascot-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;width:min(540px,calc(100% - 32px));align-self:center;padding:0 0 max(24px,env(safe-area-inset-bottom));flex:none}
.mascot-controls button{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:9px;padding:0;background:none;border:0;cursor:pointer;color:#77534c;font:500 11px/1.35 system-ui;min-width:0}
.mascot-controls button svg{width:54px;height:54px;padding:16px;border-radius:50%;background:#fff9;border:1px solid #e0cac5;transition:background .15s}
.mascot-controls #mascot-start svg{background:#e8f0e9;color:#4a7d5f;border-color:#c9dccf}.mascot-controls #mascot-end svg{background:#d94b57;color:white;border-color:#d94b57}
.mascot-controls button[aria-pressed=true] svg{background:#ecd5d4;color:#ac4651;box-shadow:inset 0 0 0 1px #d4a3a6}.mascot-controls button:disabled{opacity:.45;cursor:default}.mascot-controls button:focus-visible{outline:2px solid #b44b54;outline-offset:4px;border-radius:12px}
.mascot-fallback{position:absolute;inset:10%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;text-align:center;font-size:14px}.mascot-fallback[hidden]{display:none}.mascot-fallback img{width:160px;height:160px;border-radius:40px}.mascot-fallback p{max-width:280px}
@media(max-width:600px){.mascot-header{padding-inline:16px}.mascot-heading{font-size:13px}.mascot-controls{gap:8px}.mascot-controls button{font-size:10px}.mascot-controls button svg{width:50px;height:50px;padding:14px}.mascot-hint{font-size:11px}}
@media(max-height:530px){.mascot-header{padding-block:8px 0}.mascot-heading{min-height:25px}.mascot-hint,.mascot-caption{display:none}.mascot-controls{padding-bottom:8px}.mascot-controls button{flex-direction:row;justify-content:center}.mascot-controls button svg{width:40px;height:40px;padding:10px}.mascot-stage{min-height:150px}}
@media(prefers-reduced-motion:reduce){.mascot-controls button svg{transition:none}}

.mascot-stage canvas{cursor:grab}.mascot-stage.dragging canvas{cursor:grabbing}

.mascot-header-left{display:flex;align-items:center;gap:12px}
#mascotCall .mascot-cc{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;padding:9px;border:1px solid #ddc7c2;background:#fff8;color:#765852;cursor:pointer}
#mascotCall .mascot-cc[aria-pressed=true]{background:#f6dedd;color:#a33f4c;border-color:#dfadb2}
.call-subtitles{flex:none;align-self:center;width:min(460px,calc(100% - 40px));height:40px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;border-radius:22px;background:#fff9;border:1px solid #e3cbc5;color:#644d48;touch-action:pan-x;overscroll-behavior-x:contain;mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent)}
.call-subtitles[hidden]{display:none}.call-subtitles::-webkit-scrollbar{display:none}
.call-subtitle-track{width:max-content;min-width:100%;padding:9px 20px;font:500 15px/20px system-ui;white-space:pre;unicode-bidi:plaintext}
.call-subtitle-track .current{color:#9a3547;background:#f0d2d7;border-radius:5px}
.mascot-call:has(.call-subtitles:not([hidden])) .mascot-caption{min-height:8px;padding-block:2px}
@media(max-width:600px){.mascot-wordmark img{width:30px;height:30px}.mascot-wordmark span{font-size:15px}.mascot-header-left{gap:8px}.call-subtitle-track{font-size:14px}}
@media(max-height:530px){.call-subtitles{height:32px}.call-subtitle-track{font-size:13px;padding-block:5px}}

#mascotCall .mascot-cc:focus:not(:focus-visible){outline:none}#mascotCall .mascot-cc:focus-visible{outline:2px solid #a33f4c;outline-offset:3px}

#mascotCall .mascot-sign{width:38px;height:38px;flex:none;display:grid;place-items:center;border:1px solid #ddc7c2;background:#fff8;border-radius:50%;color:#765852;padding:8px;cursor:pointer}
#mascotCall .mascot-sign:focus:not(:focus-visible){outline:none}.sign-language-dialog{width:min(420px,calc(100vw - 32px));border:1px solid #e5ceca;border-radius:22px;background:#fff9f5;padding:22px;color:#563e3b;box-shadow:0 20px 60px #0002}
.sign-language-dialog::backdrop{background:#56505680;backdrop-filter:blur(9px)}.sign-language-dialog header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.sign-language-dialog h2{font:600 19px/1.4 system-ui;margin:0}.sign-language-dialog .dialog-close{position:static;width:36px;height:36px;padding:0;border-radius:50%;border:0;background:#eeded8;font-size:22px;color:inherit}.sign-language-dialog label{font:500 13px system-ui;display:block;margin-bottom:7px}.sign-language-dialog select{font:16px system-ui;width:100%;padding:10px;border:1px solid #d9c0b9;border-radius:10px;background:white;color:inherit}.sign-language-dialog p{font:14px/1.6 system-ui}.sign-captions{font:500 14px system-ui;background:#b74956;color:white;border:0;border-radius:12px;padding:11px 16px;width:100%}
@media(max-width:380px){.mascot-header-left{gap:6px}.mascot-wordmark img{display:none}.mascot-wordmark span{font-size:13px}.mascot-wordmark small{font-size:10px}}

.mascot-stage.stroking canvas{cursor:pointer}.mascot-caption{transition:background .18s,color .18s}.mascot-call[data-emotion=grumpy] .mascot-caption.visible{color:#9d4b42;background:#fff0e8}.mascot-call[data-emotion=pet] .mascot-caption.visible{color:#7f5470}

.mascot-orbit{display:none}

#mascotCall.mascot-call{background:radial-gradient(ellipse at 50% 38%,#fffaf3 0%,#f5e7df 50%,#e7cac8 100%)}

.mascot-call[data-renderer="simple"] .mascot-stage{display:grid;place-items:center;background:none;perspective:none}
.mascot-simple-avatar{width:clamp(110px,30vw,200px);height:auto;aspect-ratio:1;border-radius:28%;box-shadow:0 0 0 16px #ef414808;transition:box-shadow .2s ease}
.mascot-stage.speaking .mascot-simple-avatar{box-shadow:0 0 0 16px #ef414815,0 0 0 30px #ef414806}
@media(prefers-reduced-motion:reduce){.mascot-simple-avatar{transition:none}}

[data-theme="dark"] .call-subtitles{background:#25232be8;border-color:#665661;color:#f3e9ef}
@media(prefers-reduced-motion:reduce){.call-subtitles{scroll-behavior:auto}}