.ob{grid-template-rows:auto 1fr auto;height:100dvh;min-height:100dvh;display:grid}.ob-top{align-items:center;gap:16px;width:100%;max-width:720px;margin:0 auto;padding:20px;display:flex}.ob-back{cursor:pointer;color:var(--faint);background:0 0;border:none;border-radius:50%;flex:none;place-items:center;width:34px;height:34px;display:grid}.ob-back:hover{background:var(--panel-2);color:var(--ink)}.ob-back[hidden]{visibility:hidden;display:grid}.ob-prog{background:var(--rule-2);border-radius:8px;flex:1;height:16px;overflow:hidden}.ob-prog span{background:var(--teal);height:100%;transition:width .45s var(--ease);border-radius:8px;display:block}.ob-step{color:var(--faint);font-variant-numeric:tabular-nums;font-size:13px;font-weight:800}.ob-body{overscroll-behavior:contain;flex-direction:column;justify-content:safe center;align-items:center;gap:22px;width:100%;max-width:720px;min-height:0;margin:0 auto;padding:8px 20px 20px;display:flex;overflow-y:auto}.ob-body h1{letter-spacing:-.015em;text-align:center;max-width:20ch;margin:0;font-size:clamp(22px,3.4vw,30px);font-weight:800}.ob-say{flex-direction:column;align-items:center;gap:14px;display:flex}.ob-bubble{background:var(--panel-2);border:2px solid var(--rule);text-align:center;border-radius:18px;max-width:22ch;padding:16px 22px;font-size:clamp(18px,2.6vw,24px);font-weight:800;position:relative}.ob-bubble:after{content:"";background:var(--panel-2);border-right:2px solid var(--rule);border-bottom:2px solid var(--rule);width:18px;height:18px;position:absolute;bottom:-11px;left:50%;transform:translate(-50%)rotate(45deg)}.ob-mascot{width:clamp(140px,26vw,210px)}.ob-teacher{flex:none;width:clamp(84px,12vw,116px)}.ob-ask{justify-content:center;align-items:center;gap:14px;width:100%;display:flex}.ob-ask .ob-bubble{text-align:left;max-width:34ch;font-size:clamp(16px,2.2vw,20px)}.ob-ask .ob-bubble:after{border-bottom:none;border-right:none;border-left:2px solid var(--rule);border-top:2px solid var(--rule);top:50%;bottom:auto;left:-11px;transform:translateY(-50%)rotate(45deg)}.ob-mascot svg{width:100%;height:auto;display:block;overflow:visible}.ob-tiles{gap:12px;width:100%;display:grid}.ob-tiles.cols{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}.ob-tiles.rows{grid-template-columns:1fr}.tile2{text-align:left;background:var(--paper);border:2px solid var(--rule);cursor:pointer;width:100%;font:inherit;color:inherit;border-bottom-width:4px;border-radius:16px;align-items:center;gap:14px;padding:14px 16px;display:flex}.tile2:hover{background:var(--panel-2)}.tile2:active{border-bottom-width:2px;transform:translateY(2px)}.tile2.on{border-color:var(--teal);background:color-mix(in srgb, var(--teal) 10%, var(--paper))}.tile2 .flag{border-radius:5px;flex:none;width:42px;height:32px;display:block}.tile2 .emoji{text-align:center;flex:none;width:34px;font-size:26px;line-height:1}.tile2 .t{flex:1;min-width:0}.tile2 b{font-size:16px;font-weight:800;display:block}.tile2 small{color:var(--muted);margin-top:1px;font-size:13px;display:block}.ob-foot{border-top:2px solid var(--rule-2);padding:16px 20px 22px}.ob-foot .in{max-width:720px;margin:0 auto;display:flex}.ob-foot .btn{width:100%;height:52px}.ob-foot .btn[disabled]{background:var(--rule-2);color:var(--faint);box-shadow:none;cursor:not-allowed}.ob-load{flex-direction:column;align-items:center;gap:26px;width:100%;display:flex}.ob-load .track{background:var(--rule-2);border-radius:9px;width:min(420px,100%);height:18px;overflow:hidden}.ob-load .track span{background:var(--teal);border-radius:9px;height:100%;transition:width .28s linear;display:block}.ob-load p{color:var(--muted);margin:0;font-weight:700}.ob-hop{transform-origin:50% 100%;animation:.62s cubic-bezier(.33,0,.5,1) infinite obhop}@keyframes obhop{0%{transform:translateY(0)scale(1.1,.9)}18%{transform:translateY(-16px)scale(.95,1.07)}50%{transform:translateY(-42px)scale(1)}84%{transform:translateY(-16px)scale(.96,1.06)}to{transform:translateY(0)scale(1.1,.9)}}.confetti{pointer-events:none;z-index:40;position:fixed;inset:0;overflow:hidden}.confetti i{border-radius:2px;animation:linear forwards fall;display:block;position:absolute;top:-24px}@keyframes fall{0%{opacity:1;transform:translateY(-10vh)rotate(0)}to{transform:translate3d(var(--sway,40px), 108vh, 0) rotate(var(--spin,540deg));opacity:1}}@media (prefers-reduced-motion:reduce){.confetti{display:none}}@media (width<=520px){.ob-tiles.cols{grid-template-columns:1fr 1fr}.tile2{flex-direction:column;align-items:flex-start;gap:8px}.tile2 .t{width:100%}}.ob-prompt{letter-spacing:-.02em;text-align:center;margin:0;font-size:clamp(24px,4vw,34px);font-weight:800}.ob-note{color:var(--muted);margin:0;font-size:14px;font-weight:700}.ob-count{text-align:center;width:100%;color:var(--muted);letter-spacing:.01em;margin:0;font-size:15px;font-weight:800;line-height:52px}@media (width<=560px){.ob-tiles.cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.ob-tiles.cols .tile2{flex-direction:column;align-items:flex-start;gap:8px;padding:12px}.ob-tiles.cols .tile2 .flag{width:36px;height:27px}.ob-tiles.cols .tile2 b{font-size:15px}.ob-tiles.cols .tile2 small{font-size:12px}}@media (height<=760px){.ob-top{padding:12px 20px}.ob-body{gap:14px;padding:4px 20px 12px}.ob-say{gap:10px}.ob-mascot{width:clamp(110px,20vw,160px)}.ob-teacher{width:clamp(70px,10vw,96px)}.ob-bubble{padding:12px 18px}.ob-tiles{gap:10px}.tile2{padding:11px 14px}.ob-foot{padding:12px 20px 14px}.ob-foot .btn{height:48px}.ob-count{line-height:48px}}.ob-uilang{color:var(--faint);letter-spacing:.04em;text-transform:uppercase;align-items:center;gap:8px;font-size:13px;font-weight:800;display:flex}.ob-uilang select{font:inherit;letter-spacing:0;text-transform:none;color:var(--ink);background:var(--paper);border:2px solid var(--rule);cursor:pointer;border-radius:10px;padding:5px 8px;font-size:14px}