:root{--blue:#2e86de;--blue-dark:#1d5faf;--blue-darker:#164a88;--blue-light:#cfe8ff;--sky:#eef5fd;--ink:#1b2430;--muted:#3f4a5a;--line:#d5e3f2;--warn:#b35a00;--warn-bg:#fff4e6;--good:#1d6b45;--good-bg:#e7f6ee;--bad:#a3361f;--bad-bg:#fdecea;--radius:20px;--display:"Baloo 2", system-ui, sans-serif;--body:"Be Vietnam Pro", system-ui, sans-serif}*{box-sizing:border-box}html,body{margin:0}body{background:var(--sky);color:var(--ink);font-family:var(--body);-webkit-tap-highlight-color:transparent;font-size:16px;line-height:1.5}button,select{font:inherit;color:inherit}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.header{justify-content:space-between;align-items:center;gap:12px;max-width:720px;margin:0 auto;padding:14px 16px;display:flex}.brand{align-items:center;gap:10px;display:flex}.brand-name{font-family:var(--display);margin:0;font-size:22px;font-weight:800;line-height:1.1}.brand-tag{color:var(--muted);margin:0;font-size:13px}.header-actions{align-items:center;gap:8px;display:flex}.icon-btn{border:2px solid var(--line);min-width:44px;min-height:44px;color:var(--blue-dark);cursor:pointer;background:#fff;border-radius:12px;justify-content:center;align-items:center;padding:0;display:inline-flex}.icon-btn:hover{border-color:var(--blue-dark)}.icon-btn:focus-visible{outline:3px solid var(--blue);outline-offset:2px}.ios-hint{border:2px solid var(--blue-light);max-width:688px;color:var(--blue-darker);background:#fff;border-radius:14px;align-items:center;gap:10px;margin:0 auto 8px;padding:8px 8px 8px 14px;font-size:14px;display:flex}@media (max-width:720px){.ios-hint{margin:0 16px 8px}}.ios-hint p{flex:1;margin:0}.ios-hint .icon-btn{border:0;min-width:40px;min-height:40px}body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.lang-select select{border:2px solid var(--line);cursor:pointer;background:#fff;border-radius:12px;min-height:44px;padding:0 12px}.page-title{max-width:720px;font-family:var(--display);margin:4px auto 0;padding:0 16px;font-size:32px;font-weight:800;line-height:1.15}.picker{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:100dvh;padding:24px 16px;display:flex}.picker-title{font-family:var(--display);margin:0;font-size:30px;font-weight:800;line-height:1.2}.picker-title span{color:var(--muted);font-size:20px;font-weight:600;display:block}.picker-options{flex-direction:column;gap:12px;width:100%;max-width:320px;display:flex}.btn{cursor:pointer;border:2px solid #0000;border-radius:14px;justify-content:center;align-items:center;gap:8px;min-height:48px;padding:0 18px;font-weight:600;transition:transform .1s,background .15s;display:inline-flex}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.45;cursor:default}.btn:focus-visible,.mode-tab:focus-visible,.dot:focus-visible,select:focus-visible{outline:3px solid var(--blue);outline-offset:2px}.btn-primary{background:var(--blue-dark);color:#fff}.btn-primary:hover:not(:disabled){background:var(--blue-darker)}.btn-outline{color:var(--blue-dark);border-color:var(--blue-dark);background:#fff}.btn-outline:hover:not(:disabled){background:var(--sky)}.btn-ghost{color:var(--blue-dark);background:0 0}.btn-lang{border-color:var(--line);background:#fff;min-height:60px;font-size:20px}.btn-lang:hover{border-color:var(--blue-dark)}.btn-record{width:100%;min-height:64px;font-family:var(--display);background:var(--blue-dark);color:#fff;border-radius:32px;font-size:22px;font-weight:800}.btn-record:hover:not(:disabled){background:var(--blue-darker)}.btn-record.is-recording{background:var(--bad);animation:1.2s ease-in-out infinite pulse}.trial{max-width:720px;margin:0 auto;padding:8px 16px 40px}.banner{background:var(--warn-bg);color:var(--warn);border-radius:12px;margin:8px 0;padding:10px 14px;font-size:14px}.mode-tabs{border:2px solid var(--line);background:#fff;border-radius:16px;margin:12px 0 4px;padding:4px;display:inline-flex}.mode-tab{cursor:pointer;min-height:44px;color:var(--muted);background:0 0;border:0;border-radius:12px;padding:0 20px;font-weight:600}.mode-tab[aria-pressed=true]{background:var(--blue-dark);color:#fff}.intro{color:var(--muted);margin:8px 0}.consent{color:var(--muted);margin:0 0 8px;font-size:13px}.card{border:2px solid var(--blue-light);background:#fff;border-radius:28px;flex-direction:column;gap:14px;padding:20px;display:flex}.card-top{color:var(--muted);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;font-size:14px;display:flex}.chip{background:var(--sky);color:var(--blue-darker);border-radius:999px;padding:4px 10px;font-size:13px;font-weight:600}.item-text{font-family:var(--display);margin:0;font-size:32px;font-weight:800;line-height:1.2}.is-kid .item-text{text-align:center;font-size:52px}.ipa{color:var(--muted);margin:-8px 0 0;font-size:15px}.is-kid .ipa{text-align:center}.hint{background:var(--sky);border-radius:14px;margin:0;padding:10px 14px;font-size:15px}.row{flex-wrap:wrap;gap:10px;display:flex}.is-kid .row{justify-content:center}.stage{justify-content:center;display:flex}.meter{background:var(--sky);border-radius:4px;height:8px;overflow:hidden}.meter-fill{background:var(--blue);transform-origin:0;height:100%;transition:transform 80ms linear}.error{background:var(--bad-bg);color:var(--bad);border-radius:14px;margin:0;padding:12px 14px}.result{border-top:2px dashed var(--line);flex-direction:column;gap:14px;padding-top:6px;display:flex}.level{font-family:var(--display);margin:0;font-size:26px;font-weight:800;line-height:1.2}.is-kid .level{text-align:center;font-size:34px}.stars{justify-content:center;gap:6px;display:flex}.score-row{flex-wrap:wrap;align-items:center;gap:20px;display:flex}.score-big{background:var(--sky);border-radius:50%;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;width:112px;height:112px;display:flex}.score-num{font-family:var(--display);font-size:44px;font-weight:800;line-height:1}.score-label{color:var(--muted);text-align:center;padding:0 10px;font-size:11px;line-height:1.2}.subscores{flex-wrap:wrap;gap:6px 16px;margin:8px 0 0;font-size:14px;display:flex}.subscores div{gap:6px;display:flex}.subscores dt{color:var(--muted)}.subscores dd{margin:0;font-weight:600}.words{flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;display:flex}.word{border:2px solid;border-radius:12px;flex-direction:column;align-items:center;padding:6px 12px;display:flex}.word-text{font-size:18px;font-weight:600}.word-status{font-size:12px}.word-good{background:var(--good-bg);color:var(--good);border-color:#9fd5b9}.word-ok{background:var(--warn-bg);color:var(--warn);border-color:#f2c48d}.word-bad,.word-missed{background:var(--bad-bg);color:var(--bad);border-color:#f0a99c}.word-missed .word-text{text-decoration:line-through}.issues{flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;display:flex}.issue{background:var(--sky);border-radius:14px;padding:12px 14px}.issue-title{margin:0;font-weight:600}.issue-tip{color:var(--muted);margin:4px 0 0;font-size:15px}.ok-note{color:var(--good);margin:0;font-weight:600}.nav{justify-content:space-between;align-items:center;gap:8px;margin-top:16px;display:flex}.dots{flex-wrap:wrap;justify-content:center;gap:6px;margin:0;padding:0;list-style:none;display:flex}.dot{background:var(--line);cursor:pointer;border:0;border-radius:50%;width:12px;height:12px;padding:0;position:relative}.dot:after{content:"";position:absolute;inset:-8px}.dot[aria-current=step]{background:var(--blue-dark);border-radius:6px;width:24px}.bubu-spout{transform-origin:120px 66px;animation:.9s ease-out spout}.bubu-pulse{animation:1.2s ease-in-out infinite pulse}.bubu-dots{animation:1.4s ease-in-out infinite bob}.bubu-wave{transform-origin:44px 142px;animation:1.2s ease-in-out 2 wave}.bubu-great{animation:.6s ease-out hop}@keyframes spout{0%{opacity:0;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}}@keyframes pulse{50%{opacity:.55}}@keyframes bob{50%{transform:translateY(-4px)}}@keyframes wave{50%{transform:rotate(14deg)}}@keyframes hop{40%{transform:translateY(-10px)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}@media (max-width:480px){.page-title,.item-text{font-size:26px}.is-kid .item-text{font-size:44px}.card{border-radius:24px;padding:16px}.row .btn{flex:1 1 0;min-width:0;padding:0 10px}.stage .bubu{width:120px;height:120px}.is-kid .stage .bubu{width:160px;height:160px}.card{gap:12px}.header{padding:10px 16px}.brand-tag{display:none}.brand-name{font-size:18px}.lang-select select{padding:0 8px}.header-actions{gap:6px}}@media (max-width:400px){.brand-name{display:none}}