/* Isolated ports of the supplied Tongi/UI animation references. */
.tongi-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }
.lesson-completion-trophy, .lesson-completion-streak { display: grid; justify-items: center; width: 100%; }
.lesson-completion-trophy:empty, .lesson-completion-streak:empty { display: none; }
.lesson-completion-trophy[hidden], .lesson-completion-streak[hidden] { display: none; }
.home-bento-loading { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: #fff; border-radius: inherit; }
.home-bento-loading[hidden] { display: none; }
.dates-save-loading { position: fixed; inset: 0; z-index: 9990; display: grid; place-items: center; background: #fff; }
.tp-selection-generation-loader { display: grid; width: 100%; place-items: center; }
.tu-character { position: relative; display: inline-grid; place-items: center; width: var(--tu-size, 100px); height: var(--tu-size, 100px); flex: 0 0 var(--tu-size, 100px); overflow: visible; }
.tu-character > .tu-character-art { position: relative; display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; flex-shrink: 0; line-height: 0; overflow: visible; pointer-events: none; }
/* The preview image and hydrated SVG share the same viewport. Keeping both out
 * of intrinsic grid sizing prevents the 100px preview and SVG's default size
 * from changing a 200px empty state or the dialogue's 100px artwork slot. */
.tu-character > .tu-character-art > img,
.tu-character > .tu-character-art > svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; overflow: visible; }
/* Keep the reference SVG as the outermost SVG: its head motion uses CSS pixels,
 * while pupil motion uses SVG units. Fit the element, not an animated SVG group. */
.tu-character[data-tongi-emotion="calm-wait"] > .tu-character-art > img,
.tu-character[data-tongi-emotion="calm-wait"] > .tu-character-art > svg { inset: auto; left: 13.64453125%; top: 13.5703125%; width: 72.5%; height: 72.5%; }
.tu-character.is-paused .tu-character-art * { animation-play-state: paused !important; }
.tu-character.is-once .tu-character-art * { animation-iteration-count: 1 !important; }
.tu-object-scene { position: relative; display: grid; place-items: center; width: var(--tu-size, 160px); height: var(--tu-size, 160px); margin-inline: auto; overflow: visible; isolation: isolate; }
.tu-object-hit { display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-tap-highlight-color: transparent; }
.tu-object-hit:focus-visible, .tu-fire:focus-visible { outline: none; }
.tu-object-hit > svg { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tu-object-hit.is-hit { animation: tu-object-hit 160ms ease-out; }
@keyframes tu-object-hit { 0%,100% { transform: scale(1); } 35% { transform: scale(.92); } 70% { transform: scale(1.04); } }
.tu-ball-scene { animation: tu-ball-grow 240ms cubic-bezier(.2,.8,.2,1) both; transform-origin: center; }
.tu-ball-scene.is-stopping { animation: tu-ball-shrink 180ms cubic-bezier(.55,0,1,.45) forwards; pointer-events: none; }
@keyframes tu-ball-grow { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes tu-ball-shrink { from { transform: scale(1); opacity: 1; } to { transform: scale(0); opacity: 0; } }
.tu-confetti-layer { position: absolute; inset: -60px; z-index: 2; pointer-events: none; overflow: visible; }
.tu-confetti-piece { position: absolute; left: 50%; top: 50%; width: 6px; height: 4px; pointer-events: none; will-change: transform, opacity; }
.tu-overlay { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; overflow: hidden; isolation: isolate; }
.tu-countdown-surface { position: absolute; inset: 0; display: grid; place-items: center; background: #fff; }
.tu-countdown-number { display: grid; place-items: center; width: 140px; height: 140px; color: #182128; font-family: inherit; font-size: 76px; font-weight: 800; line-height: 1; transform-origin: center; }
.tu-countdown-number.is-bouncing { animation: tu-number-bounce 500ms cubic-bezier(.22,.8,.25,1); }
.tu-countdown-number.is-closing { animation: tu-number-close 150ms cubic-bezier(.55,0,1,.45) forwards; }
@keyframes tu-number-bounce { 0%,100% { transform: scale(1) rotate(0deg); } 42% { transform: scale(1.8) rotate(var(--tu-tilt, 0deg)); } 72% { transform: scale(.94) rotate(0deg); } }
@keyframes tu-number-close { from { transform: scale(1) rotate(0deg); } to { transform: scale(0) rotate(8deg); } }
.tu-wipe { position: absolute; inset: 0; z-index: 2; background: var(--tu-color, #FF8EB3); transform: translate3d(-100%,0,0); will-change: transform; }
.tu-wipe.is-covering { animation: tu-wipe-cover var(--tu-half, 500ms) cubic-bezier(.4,0,.2,1) forwards; }
.tu-wipe.is-revealing { animation: tu-wipe-reveal var(--tu-half, 500ms) cubic-bezier(.4,0,.2,1) forwards; }
@keyframes tu-wipe-cover { from { transform: translate3d(-100%,0,0); } to { transform: translate3d(0,0,0); } }
@keyframes tu-wipe-reveal { from { transform: translate3d(0,0,0); } to { transform: translate3d(100%,0,0); } }
.tu-lightning { position: relative; display: grid; place-items: center; width: 110px; height: 110px; transform-origin: center; }
.tu-lightning > svg { display: block; width: 88px; height: 88px; overflow: visible; animation: tu-lightning-wiggle 900ms ease-in-out infinite; }
.tu-lightning path { fill: #FFD500; }
.tu-lightning.is-closing { animation: tu-lightning-close 180ms cubic-bezier(.55,0,1,.45) forwards; }
.tu-lightning.is-closing > svg { animation: none; }
@keyframes tu-lightning-wiggle { 0%,100% { transform: rotate(-2deg); } 25% { transform: rotate(1.5deg); } 50% { transform: rotate(-1deg); } 75% { transform: rotate(2deg); } }
@keyframes tu-lightning-close { from { transform: scale(1) rotate(0deg); } to { transform: scale(0) rotate(8deg); } }
.tu-streak { display: flex; flex-direction: column; align-items: center; gap: 18px; width: var(--tu-size, 200px); margin-inline: auto; }
.tu-fire { display: grid; place-items: center; width: 100%; padding: 0; border: 0; background: transparent; appearance: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transform-origin: 50% 100%; }
.tu-fire > .streak { display: block; width: 100%; height: auto; overflow: visible; transform-origin: 50% 100%; animation: tu-flame-vertical 1.34s cubic-bezier(.42,0,.58,1) infinite; }
.tu-fire .flame-outer, .tu-fire .flame-inner { transform-box: fill-box; transform-origin: 50% 100%; transition: fill .14s ease-out; }
.tu-fire .flame-outer { fill: #fff; animation: tu-flame-outer 1.34s cubic-bezier(.42,0,.58,1) infinite; }
.tu-fire .flame-inner { fill: #f3f5f7; animation: tu-flame-inner 1.34s cubic-bezier(.42,0,.58,1) infinite; }
.tu-fire:not(.is-lit) .streak, .tu-fire:not(.is-lit) .flame-outer, .tu-fire:not(.is-lit) .flame-inner, .tu-streak.is-paused * { animation-play-state: paused !important; }
.tu-fire.is-lit .flame-outer { fill: #FF6A00; }
.tu-fire.is-lit .flame-inner { fill: #FFF3EA; }
.tu-fire.is-igniting { animation: tu-flame-ignite .58s cubic-bezier(.2,.75,.25,1); }
.tu-streak-counter { color: #65717a; font-family: inherit; font-size: 42px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; transform-origin: center; }
.tu-fire.is-lit + .tu-streak-counter { color: #000; }
.tu-streak-counter.is-pop { animation: tu-counter-pop .28s cubic-bezier(.2,.8,.25,1); }
.tu-streak-screen { position: fixed; inset: 0; z-index: 2147483001; box-sizing: border-box; width: 100%; height: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: max(24px,env(safe-area-inset-top)) 20px max(24px,env(safe-area-inset-bottom)); border: 0; background: #fff; color: #000; overflow: auto; }
.tu-streak-screen[open] { display: grid; place-items: center; }
.tu-streak-screen::backdrop { background: #fff; }
.tu-streak-screen[open] .tu-streak-screen__close { position: absolute; top: max(12px,env(safe-area-inset-top)); right: max(12px,env(safe-area-inset-right)); }
.tu-streak-screen__content { display: flex; flex-direction: column; align-items: center; gap: 24px; width: min(100%,440px); padding-block: 40px; text-align: center; }
.tu-streak-screen h2 { margin: 0; color: #000; font-size: clamp(24px,5vw,32px); font-weight: 500; line-height: 1.2; }
.tu-streak-screen__copy { margin: 0; color: #647180; font-size: 17px; line-height: 1.45; }
.tu-streak-screen__fire .tu-streak { width: min(240px,58vw); }
.tu-streak-screen__fire .tu-fire:not(.is-lit) .flame-outer { fill: #c7ced7; }
.tu-streak-screen__next { width: 100%; min-height: 56px; padding: 16px 24px; border: 2px solid #f3f5f7; border-radius: 20px; background: #f3f5f7; color: #000; font: inherit; font-size: 20px; cursor: pointer; }
.tu-streak-screen__next[hidden] { display: none; }
/* Study's count-first confirmation; the shared reader screen stays unchanged. */
.tu-streak-screen--study .tu-streak-screen__content { width: min(100%,640px); padding-block: 32px; }
.tu-streak-screen--study h2 { font-size: clamp(48px,12vw,64px); font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tu-streak-screen--study .tu-streak-counter { display: none; }
.tu-streak-screen--study .tu-streak-screen__close { display: grid; place-items: center; box-sizing: border-box; appearance: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: #fff; color: #000; line-height: 1; cursor: pointer; touch-action: manipulation; }
.tu-streak-screen--study .tu-streak-screen__close > .icon { width: 24px; height: 24px; font-size: 24px; color: inherit; pointer-events: none; }
.tu-streak-screen--study .tu-streak-screen__next { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 64px; padding: 16px 24px; border: 3px solid #e4e8ed; border-radius: 16.8px; background: #fff; color: #000; font-size: 19.8px; font-weight: 400; line-height: 1.4; transition: background-color 160ms ease, transform 160ms ease; }
.tu-streak-screen--study .tu-streak-screen__next[hidden] { display: none; }
@media (hover: hover) { .tu-streak-screen--study .tu-streak-screen__next:hover { background: #f3f5f7; transform: scale(.98); } }
@media (hover: hover) { .tu-streak-screen--study .tu-streak-screen__close:hover { background: #f3f5f7; } }
@media (min-width: 769px) { .tu-streak-screen--study .tu-streak-screen__close > .icon { width: 28.8px; height: 28.8px; font-size: 28.8px; } }
@media (max-width: 620px) { .tu-streak-screen--study .tu-streak-screen__next { border-radius: 14.4px; } }
@media (prefers-reduced-motion: reduce) { .tu-streak-screen--study .tu-streak-screen__next { transition: none; transform: none; } }
@keyframes tu-counter-pop { 0% { transform: scale(.94); opacity: .55; } 55% { transform: scale(1.025); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes tu-flame-ignite { 0%,100% { scale: 1 1; } 18% { scale: 1.08 .86; } 40% { scale: .94 1.15; } 60% { scale: 1.035 .96; } 78% { scale: .985 1.045; } }
@keyframes tu-flame-vertical { 0%,100% { transform: translateX(0) rotate(0deg) scaleY(1); } 12.5% { transform: translateX(1.5px) rotate(.55deg) scaleY(1.01); } 25% { transform: translateX(3px) rotate(1.05deg) scaleY(1.02); } 37.5% { transform: translateX(2px) rotate(1.42deg) scaleY(1.03); } 50% { transform: translateX(0) rotate(1.62deg) scaleY(1.036); } 62.5% { transform: translateX(-2px) rotate(1.35deg) scaleY(1.027); } 75% { transform: translateX(-3px) rotate(.82deg) scaleY(1.017); } 87.5% { transform: translateX(-1.5px) rotate(.32deg) scaleY(1.007); } }
@keyframes tu-flame-outer { 0%,100% { transform: scaleX(1); } 20% { transform: scaleX(1.005); } 42% { transform: scaleX(.996); } 64% { transform: scaleX(1.007); } 82% { transform: scaleX(.998); } }
@keyframes tu-flame-inner { 0%,100% { transform: scaleX(1.002); } 16% { transform: scaleX(.997); } 38% { transform: scaleX(1.006); } 61% { transform: scaleX(.996); } 84% { transform: scaleX(1.005); } }
.home-greeting__character[data-tongi-character], .profile-greeting__character[data-tongi-character], .avatar-character[data-tongi-character] { --tu-size: 100px; width: 100px !important; height: 100px !important; }
.onboarding-character[data-tongi-character] { --tu-size: 200px; width: min(200px,60vw) !important; height: min(200px,60vw) !important; max-width: 200px; max-height: 200px; aspect-ratio: 1; }
.empty-state-cover[data-tongi-character] { --tu-size: 200px; width: 200px !important; height: 200px !important; max-width: 100% !important; aspect-ratio: 1; flex: 0 0 200px; }
@media (prefers-reduced-motion: reduce) {
    .tu-character *, .tu-object-hit.is-hit, .tu-fire, .tu-fire *, .tu-streak-counter { animation: none !important; transition: none !important; }
    .tu-ball-scene, .tu-ball-scene.is-stopping { animation-duration: 80ms; }
    .tu-countdown-number.is-bouncing { animation-duration: 180ms; }
    .tu-countdown-number.is-closing { animation-duration: 60ms; }
    .tu-lightning > svg { animation: none; }
    .tu-lightning.is-closing { animation-duration: 80ms; }
}