.mascot{aspect-ratio:300/350;-webkit-tap-highlight-color:transparent;display:block;position:relative}.mascot[role=button]{cursor:pointer}.mascot[role=button]:focus-visible{outline:3px solid var(--yellow);outline-offset:4px;border-radius:16px}.mascot svg{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.mascot-bubble{z-index:2;border:2px solid var(--ink);white-space:nowrap;pointer-events:none;animation:bubble-in .35s var(--spring) both,bubble-out .3s 2.1s ease-in forwards;background:#fff;border-radius:14px;padding:7px 12px;font-size:13px;font-weight:800;position:absolute;top:2%;left:50%;translate:-50% -60%}.mascot-bubble:after{content:"";border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);background:#fff;width:12px;height:12px;position:absolute;bottom:-8px;left:50%;transform:translate(-50%)rotate(45deg)}@keyframes bubble-in{0%{opacity:0;transform:translateY(8px)scale(.85)}to{opacity:1;transform:none}}@keyframes bubble-out{to{opacity:0;transform:translateY(-4px)}}.hero-bear{z-index:3;width:250px;position:absolute;bottom:-24px;left:-6px}.closing-bear{width:130px;margin:0 auto -6px}.plan-head{justify-content:space-between;align-items:flex-end;gap:10px;display:flex}.plan-bear{flex:none;width:104px;margin:-34px 0 -10px}@media (max-width:650px){.hero-bear{width:170px;bottom:-14px;left:0}.plan-bear{width:80px}.mascot-bubble{font-size:12px}}.mascot-scene .scene-disc{fill:var(--paper-2);transition:fill .6s}.mascot[data-mood=expect] .scene-disc{fill:#fae7b8}.mascot[data-mood=bored] .scene-disc{fill:#e3e1dc}.mascot[data-mood=angry] .scene-disc{fill:#f6d0c4}.mascot-scene .scene-spin{transform-box:fill-box;transform-origin:50%;animation:18s linear infinite spin}.mascot-scene>:not(.scene-disc){opacity:.85}.lesson{flex-direction:column;gap:6px;display:flex}.lesson-top{align-items:center;gap:12px;margin-bottom:12px;display:flex}.lesson-bar{background:#e9e2d4;border-radius:999px;flex:1;height:16px;overflow:hidden}.lesson-bar i{border-radius:inherit;background:var(--green,#58a700);height:100%;transition:width .6s var(--spring);display:block;box-shadow:inset 0 -5px #0001,inset 0 4px #fff4}.lesson-back{color:var(--muted);cursor:pointer;background:0 0;border:0;padding:4px;font-size:13px;font-weight:700}.lesson-back:hover{color:var(--ink)}.lesson-kicker{color:var(--blue);letter-spacing:.08em;font-size:12px;font-weight:800}.lesson-title{letter-spacing:-.02em;margin:4px 0 0;font-size:24px;font-weight:900}.lesson-guide{align-items:flex-end;gap:8px;margin:4px 0 6px;display:flex}.lesson-bear{flex:none;width:104px;margin:-16px 0 -10px -8px}.lesson-say{border:2px solid var(--line);background:#fff;border-radius:14px;margin:0 0 18px;padding:10px 13px;font-size:14px;font-weight:700;position:relative}.lesson-say:before{content:"";border-left:2px solid var(--line);border-bottom:2px solid var(--line);background:#fff;width:12px;height:12px;position:absolute;bottom:14px;left:-8px;transform:rotate(45deg)}.lesson-body{animation:fade-up .45s var(--ease) both;gap:10px;display:grid}.lesson-body label{gap:8px;font-size:13px;font-weight:800;display:grid}.lesson-body input{border:2px solid var(--line);color:var(--ink);background:#fff;border-radius:14px;outline:none;padding:15px 16px;font-size:16px;transition:border-color .2s,box-shadow .2s}.lesson-body input:focus{border-color:#84d8ff;box-shadow:0 0 0 3px #ddf4ff}.lesson-body input[aria-invalid=true]{background:#fff7f7;border-color:#ffb2b2;animation:.4s shake}@keyframes shake{25%{transform:translate(-6px)}75%{transform:translate(6px)}}.lesson-summary{border:2px solid var(--line);background:#fff;border-radius:16px;margin:0;overflow:hidden}.lesson-summary div{border-top:1px dashed var(--line);justify-content:space-between;gap:12px;padding:13px 16px;font-size:14px;display:flex}.lesson-summary div:first-child{border-top:0}.lesson-summary dt{color:var(--muted)}.lesson-summary dd{text-align:right;word-break:break-all;margin:0;font-weight:800}.lesson-summary .is-total{background:var(--paper)}.lesson-summary .is-total dd{font-family:var(--serif);color:var(--red);font-size:22px}.lesson-foot{border-top:2px solid var(--line);border-radius:0 0 22px 22px;margin:14px -28px -28px;padding:18px 28px 24px;transition:background .25s}.lesson-foot.is-ok{background:#d7ffb8;border-color:#0000}.lesson-foot.is-bad{background:#ffdfe0;border-color:#0000}.lesson-feedback{animation:bubble-in .35s var(--spring) both;align-items:center;gap:12px;margin-bottom:14px;font-size:20px;font-weight:900;display:flex}.lesson-feedback i{background:#fff;border-radius:50%;place-items:center;width:42px;height:42px;font-size:22px;font-style:normal;display:grid}.lesson-feedback small{font-size:13px;font-weight:600;display:block}.is-ok .lesson-feedback{color:#58a700}.is-bad .lesson-feedback{color:#ea2b2b}.lesson-check{width:100%;font:inherit;letter-spacing:.04em;color:#fff;cursor:pointer;background:#58a700;border:0;border-radius:16px;padding:15px;font-size:16px;font-weight:900;transition:transform .1s,box-shadow .1s,filter .2s;box-shadow:0 5px #46870a}.lesson-check:hover:not(:disabled){filter:brightness(1.06)}.lesson-check:active:not(:disabled){box-shadow:none;transform:translateY(5px)}.lesson-check:disabled{color:#a9a091;cursor:default;background:#e5e0d6;box-shadow:0 5px #d3cbbc}.is-bad .lesson-check{background:#ea2b2b;box-shadow:0 5px #c11}@media (max-width:650px){.lesson-foot{margin:14px -16px -16px;padding:16px 16px 20px}.lesson-title{font-size:21px}.lesson-bear{width:84px}}.celebration{text-align:center;border:2px solid var(--line);animation:fade-up .5s var(--ease) both;background:#fff;border-radius:22px;margin-top:6px;padding:18px 20px 22px;position:relative;overflow:hidden}.celebration-bear{width:160px;margin:0 auto -8px}.celebration h2{color:var(--yellow);-webkit-text-stroke:.6px #b98100;letter-spacing:-.01em;margin:6px 0;font-size:28px;font-weight:900}.celebration>p{max-width:440px;color:var(--muted);margin:0 auto;font-size:14px;line-height:1.75}.celebration>p b{color:var(--ink)}.celebration-tiles{grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0 6px;display:grid}.tile{--c:var(--yellow);border:2px solid var(--c);opacity:0;animation:tile-in .5s calc(.3s + var(--d)*.15s) var(--spring) forwards;border-radius:16px;overflow:hidden;transform:translateY(20px)scale(.9)}.tile span{background:var(--c);color:#fff;padding:5px;font-size:11px;font-weight:900;display:block}.tile b{color:var(--c);white-space:nowrap;text-overflow:ellipsis;padding:10px 4px;font-size:16px;display:block;overflow:hidden}.tile-blue{--c:var(--blue)}.tile-green{--c:#58a700}@keyframes tile-in{to{opacity:1;transform:none}}.order-path{justify-content:space-between;margin:16px 0;padding:0;list-style:none;display:flex;position:relative}.order-path:before{content:"";background:#e9e2d4;border-radius:4px;height:4px;position:absolute;top:17px;left:12%;right:12%}.order-path li{color:#b0a798;justify-items:center;gap:6px;width:25%;font-size:12px;font-weight:800;display:grid;position:relative}.order-path i{color:#fff;width:38px;height:38px;animation:pop .5s calc(.6s + var(--d)*.25s) var(--spring) both;background:#e9e2d4;border-radius:50%;place-items:center;font-size:15px;font-style:normal;display:grid}.order-path li.is-done{color:var(--ink)}.order-path li.is-done i{background:#58a700}.order-path li.is-wait{color:var(--ink)}.order-path li.is-wait i{background:var(--yellow);animation:pop .5s calc(.6s + var(--d)*.25s) var(--spring) both,ring 1.4s 1.6s infinite}@keyframes ring{50%{box-shadow:0 0 0 8px #f0b32333}}.celebration .button-primary{margin-top:4px}.confetti-layer{pointer-events:none;position:absolute;inset:0;overflow:hidden}.confetti-layer i{border-radius:2px;width:9px;height:14px;animation:linear forwards confetti-fall;position:absolute;top:-14px}@keyframes confetti-fall{to{transform:translate(var(--dx),720px) rotate(var(--r))}}@media (max-width:650px){.celebration-bear{width:130px}.celebration h2{font-size:24px}.tile b{font-size:14px}}@media (prefers-reduced-motion:reduce){.confetti-layer{display:none}}