.listen-shell{--l-ink:#2b2620;--l-muted:#7d7265;--l-line:#e8dcc6;--l-paper:#fdf8ea;--l-white:#fffdf7;--l-tone:#e4683f;--l-tone-ink:#fff;--l-tone-deep:#b84a26;--l-tone-soft:#fbe3d3;--l-page:#f8ede0;--l-rounded:ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif;box-sizing:border-box;background:var(--l-page);width:100%;height:100dvh;min-height:560px;color:var(--l-ink);flex-direction:column;transition:background-color .35s;display:flex}.listen-shell[data-tone=food],.listen-shell [data-tone=food]{--l-tone:#e4683f;--l-tone-ink:#fff;--l-tone-deep:#b84a26;--l-tone-soft:#fbe3d3;--l-page:#f8ede0}.listen-shell[data-tone=animals],.listen-shell [data-tone=animals]{--l-tone:#eea52f;--l-tone-ink:#3a2908;--l-tone-deep:#9a6510;--l-tone-soft:#fcedc8;--l-page:#f9f0da}.listen-shell[data-tone=vehicles],.listen-shell [data-tone=vehicles]{--l-tone:#3673cc;--l-tone-ink:#fff;--l-tone-deep:#24569f;--l-tone-soft:#dce8f7;--l-page:#eaf0f6}.listen-shell[data-tone=body],.listen-shell [data-tone=body]{--l-tone:#23998a;--l-tone-ink:#fff;--l-tone-deep:#17695e;--l-tone-soft:#d5f0ea;--l-page:#e7f3ef}.listen-shell[data-tone=colors],.listen-shell [data-tone=colors]{--l-tone:#8a5cc9;--l-tone-ink:#fff;--l-tone-deep:#5e3b94;--l-tone-soft:#ece1f8;--l-page:#f1ecf7}.listen-shell[data-tone=toys],.listen-shell [data-tone=toys]{--l-tone:#e2578a;--l-tone-ink:#fff;--l-tone-deep:#a93160;--l-tone-soft:#fadde7;--l-page:#f9ecf0}.listen-shell[data-tone=family],.listen-shell [data-tone=family]{--l-tone:#4e9a47;--l-tone-ink:#fff;--l-tone-deep:#336b2e;--l-tone-soft:#ddefd6;--l-page:#edf4e6}.listen-shell *,.listen-shell :before,.listen-shell :after{box-sizing:border-box}.listen-shell button,.listen-shell a,.listen-shell summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}.listen-shell button{font:inherit;color:inherit;cursor:pointer}.listen-shell button:disabled{cursor:default}.listen-shell :focus-visible{outline:3px solid var(--l-tone-deep);outline-offset:3px}.listen-shell svg{display:block}.listen-header{flex:none;justify-content:space-between;align-items:center;width:min(640px,100%);margin:0 auto;padding:10px 16px 6px;display:flex}.listen-brand{color:var(--l-ink);letter-spacing:.02em;align-items:center;gap:8px;font-size:15px;font-weight:700;text-decoration:none;display:inline-flex}.listen-brand>span{background:var(--l-ink);width:30px;height:30px;color:var(--l-paper);border-radius:10px;place-items:center;font-size:16px;display:grid}.listen-header-side{align-items:center;gap:10px;display:flex}.listen-credit{color:var(--l-muted);white-space:nowrap;font-size:12px}.listen-feedback{background:var(--l-tone);min-height:36px;color:var(--l-tone-ink);white-space:nowrap;border-radius:999px;align-items:center;padding:0 14px;font-size:13px;font-weight:700;text-decoration:none;display:inline-flex}.listen-parent-menu{z-index:3;font-size:13px;position:relative}.listen-parent-menu summary{border:1px solid var(--l-line);background:var(--l-white);min-height:36px;color:var(--l-muted);cursor:pointer;border-radius:999px;align-items:center;gap:4px;padding:0 12px;list-style:none;display:flex}.listen-parent-menu summary::-webkit-details-marker{display:none}.listen-parent-menu summary svg{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;width:12px;height:12px}.listen-parent-menu nav{border:1px solid var(--l-line);background:var(--l-white);border-radius:14px;width:168px;padding:6px;display:grid;position:absolute;top:calc(100% + 6px);right:0;box-shadow:0 12px 32px #2b26201f}.listen-parent-menu nav a{color:var(--l-ink);border-radius:9px;padding:11px 12px;text-decoration:none}.listen-parent-menu nav a:hover{background:var(--l-page)}.listen-main{flex-direction:column;flex:1;gap:12px;width:min(640px,100%);min-height:0;margin:0 auto;padding:6px 16px 0;display:flex}.listen-group-row{flex:none;gap:6px;min-width:0;display:flex}.listen-all-themes{border:1.5px solid var(--l-line);background:var(--l-white);min-height:44px;color:var(--l-ink);border-radius:999px;flex:none;align-items:center;gap:5px;padding:0 12px;font-size:14px;font-weight:600;display:inline-flex}.listen-all-themes svg{fill:currentColor;width:16px;height:16px}.listen-groups{scroll-snap-type:x proximity;scrollbar-width:none;flex:1;gap:6px;min-width:0;display:flex;overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#000 85%,#0000);mask-image:linear-gradient(90deg,#000 85%,#0000)}.listen-groups::-webkit-scrollbar{display:none}.listen-groups button{min-height:44px;color:var(--l-muted);white-space:nowrap;scroll-snap-align:center;background:#fffdf79e;border:1.5px solid #0000;border-radius:999px;flex:none;justify-content:center;align-items:center;gap:6px;padding:6px 12px 6px 7px;font-size:14px;font-weight:600;transition:background-color .2s,border-color .2s,color .2s;display:flex}.listen-groups button:last-child{margin-right:24px}.listen-groups button img{object-fit:cover;background:var(--l-paper);border-radius:50%;flex:none;width:28px;height:28px}.listen-groups button[aria-pressed=true]{border-color:var(--l-tone);background:var(--l-white);color:var(--l-tone-deep);box-shadow:0 4px 12px #2b262012}.listen-stage{background:var(--l-paper);border-radius:28px;flex-direction:column;flex:1;align-items:center;min-height:0;padding:12px 16px 14px;display:flex;position:relative;box-shadow:inset 0 1px #fffc,0 14px 36px #4c381e1a}.listen-picture{touch-action:pan-y;-webkit-user-select:none;user-select:none;background:0 0;border:0;flex:1;justify-content:center;align-items:center;width:100%;min-height:0;padding:0;display:flex}.listen-picture picture{display:contents}.listen-picture img{aspect-ratio:1;object-fit:contain;pointer-events:none;width:auto;max-width:100%;height:100%;max-height:100%;animation:.32s ease-out listen-arrive;display:block}.listen-picture.is-speaking img{animation:.7s ease-in-out infinite alternate listen-bob}@keyframes listen-arrive{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}@keyframes listen-bob{0%{transform:translateY(0)rotate(0)}to{transform:translateY(-6px)rotate(-1.2deg)}}.listen-image-unavailable{max-width:260px;color:var(--l-muted);text-align:center;gap:6px;font-size:13px;line-height:1.6;display:grid}.listen-image-unavailable strong{color:var(--l-ink);font-size:15px}.listen-retry-image{border:1px solid var(--l-line);background:var(--l-white);border-radius:999px;min-height:36px;padding:4px 14px;font-size:13px}.listen-english{font-family:var(--l-rounded);letter-spacing:-.01em;text-align:center;overflow-wrap:anywhere;flex:none;margin:6px 0 0;font-size:clamp(30px,8.4vw,44px);font-weight:750;line-height:1.2;transition:font-size .18s}.listen-english.is-word{font-size:clamp(42px,12vw,60px)}.listen-english mark{background:linear-gradient(transparent 62%, var(--l-tone-soft) 62%);color:var(--l-tone-deep);border-radius:.12em;padding:0 .08em}.listen-english.is-colour mark{background:linear-gradient(transparent 58%, color-mix(in srgb, var(--l-swatch) 70%, transparent) 58%);color:var(--l-ink)}.listen-meaning{color:var(--l-muted);text-align:center;flex:none;margin-top:6px;font-size:13px}.listen-meaning summary{cursor:pointer;border-radius:999px;align-items:center;min-height:30px;padding:0 12px;list-style:none;display:inline-flex}.listen-meaning summary::-webkit-details-marker{display:none}.listen-meaning summary:after{content:"";border-bottom:1.5px solid;border-right:1.5px solid;width:6px;height:6px;margin-left:6px;transform:translateY(-2px)rotate(45deg)}.listen-meaning[open] summary:after{transform:translateY(1px)rotate(-135deg)}.listen-meaning p{color:var(--l-ink);flex-wrap:wrap;justify-content:center;gap:8px;margin:2px 0 0;display:flex}.listen-words{flex:none;justify-content:center;gap:8px;margin:0;padding:0;list-style:none;display:flex}.listen-words button{background:var(--l-paper);opacity:.6;border:2px solid #0000;border-radius:15px;width:46px;height:46px;padding:0;transition:opacity .2s,transform .2s,border-color .2s;display:block;position:relative}.listen-words button img{object-fit:cover;border-radius:13px;width:100%;height:100%;display:block}.listen-words button[aria-current=step]{border-color:var(--l-tone);opacity:1;transform:translateY(-2px);box-shadow:0 6px 14px #4c381e24}.listen-heard{border:2px solid var(--l-page);background:var(--l-tone);width:18px;height:18px;color:var(--l-tone-ink);border-radius:50%;place-items:center;font-size:10px;font-weight:800;line-height:1;display:grid;position:absolute;bottom:-4px;right:-4px}.listen-themes{background:var(--l-white);width:min(560px,100%);max-width:100%;max-height:88dvh;color:var(--l-ink);border:0;border-radius:28px 28px 0 0;margin:auto auto 0;padding:0;box-shadow:0 -12px 40px #2b26202e}.listen-themes::backdrop{background:#2b262061}.listen-themes[open]{animation:.24s ease-out listen-sheet}@keyframes listen-sheet{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}.listen-themes-panel{padding:16px 16px calc(20px + env(safe-area-inset-bottom,0px))}.listen-themes-head{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.listen-themes-head h2{margin:0;font-family:inherit;font-size:18px}.listen-themes-head button{background:var(--l-page);border:0;border-radius:50%;place-items:center;width:40px;height:40px;padding:0;display:grid}.listen-themes-head svg{fill:none;stroke:currentColor;stroke-width:2.4px;stroke-linecap:round;width:18px;height:18px}.listen-themes ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none;display:grid}.listen-themes li button{background:var(--l-tone-soft);text-align:left;border:2px solid #0000;border-radius:20px;gap:4px;width:100%;padding:10px 10px 12px;display:grid}.listen-themes li button[aria-current=true]{border-color:var(--l-tone)}.listen-theme-covers{margin-bottom:4px;display:flex}.listen-theme-covers img{border:2px solid var(--l-tone-soft);background:var(--l-paper);object-fit:cover;border-radius:50%;width:44px;height:44px}.listen-theme-covers img+img{margin-left:-10px}.listen-themes strong{color:var(--l-tone-deep);font-size:16px}.listen-themes small{color:var(--l-muted);font-size:12px}.listen-themes-feedback{border:1.5px dashed var(--l-line);color:var(--l-ink);border-radius:18px;gap:2px;margin-top:14px;padding:14px 16px;font-size:14px;font-weight:600;text-decoration:none;display:grid}.listen-themes-feedback span{color:var(--l-tone-deep);font-size:13px}.listen-player{width:min(640px,100%);padding:4px 16px calc(14px + env(safe-area-inset-bottom,0px));flex:none;margin:0 auto}.listen-status{min-height:22px;color:var(--l-muted);text-align:center;justify-content:center;align-items:center;gap:8px;margin:0 0 6px;font-size:13px;line-height:1.5;display:flex}.listen-status.is-error{color:#b2442a}.listen-status button{background:0 0;border:1px solid;border-radius:999px;min-height:28px;padding:0 10px;font-size:12px}.listen-transport{justify-content:center;align-items:center;gap:22px;display:flex}.listen-step{border:1.5px solid var(--l-line);background:var(--l-white);border-radius:50%;place-items:center;width:56px;height:56px;padding:0;transition:opacity .2s,transform .15s;display:grid}.listen-step svg{fill:none;stroke:currentColor;stroke-width:2.4px;stroke-linecap:round;stroke-linejoin:round;width:24px;height:24px}.listen-step:disabled{opacity:.3}.listen-step:not(:disabled):active,.listen-play:not(:disabled):active{transform:scale(.94)}.listen-step.is-nudging{border-color:var(--l-tone);color:var(--l-tone-deep);animation:1.2s ease-in-out infinite listen-nudge}@keyframes listen-nudge{0%,to{transform:translate(0)}50%{transform:translate(4px)}}.listen-play{background:var(--l-tone);width:92px;height:92px;box-shadow:0 10px 24px color-mix(in srgb, var(--l-tone) 40%, transparent);border:0;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:0;font-size:14px;font-weight:700;transition:background-color .35s,transform .15s;display:flex;position:relative;color:var(--l-tone-ink)!important}.listen-play svg{width:30px;height:30px}.listen-play:disabled{background:color-mix(in srgb, var(--l-tone) 45%, var(--l-page));box-shadow:none}.listen-play.is-playing:before{content:"";border:3px solid var(--l-tone);opacity:0;border-radius:50%;animation:1.3s ease-out infinite listen-ring;position:absolute;inset:-6px}@keyframes listen-ring{0%{opacity:.55;transform:scale(.92)}to{opacity:0;transform:scale(1.22)}}.listen-options{justify-content:center;gap:10px;margin-top:12px;display:flex}.listen-options button{border:1px solid var(--l-line);background:var(--l-white);min-height:40px;color:var(--l-ink);border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:0 16px;font-size:14px;display:inline-flex}.listen-options button:disabled{opacity:.45}.listen-options svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px}.listen-options button[aria-pressed=true]:not(:has(.listen-switch)){border-color:var(--l-tone);color:var(--l-tone-deep);font-weight:600}.listen-switch{background:var(--l-line);border-radius:999px;width:30px;height:18px;transition:background-color .2s;position:relative}.listen-switch:after{content:"";background:#fff;border-radius:50%;width:14px;height:14px;transition:transform .2s;position:absolute;top:2px;left:2px;box-shadow:0 1px 2px #0003}[aria-pressed=true]>.listen-switch{background:var(--l-tone)}[aria-pressed=true]>.listen-switch:after{transform:translate(12px)}.listen-options-done button.is-primary{border-color:var(--l-tone);background:var(--l-tone);color:var(--l-tone-ink);font-weight:700}.listen-hidden-audio{display:none}@media (height<=700px){.listen-main{gap:8px}.listen-groups button,.listen-all-themes{min-height:38px;font-size:13px}.listen-groups button img{width:24px;height:24px}.listen-words button{border-radius:12px;width:40px;height:40px}.listen-words button img{border-radius:10px}.listen-play{width:76px;height:76px}.listen-play svg{width:24px;height:24px}.listen-step{width:48px;height:48px}.listen-options{margin-top:8px}.listen-english{font-size:28px}.listen-english.is-word{font-size:40px}}@media (width<=360px){.listen-groups button{gap:4px;padding:4px 10px 4px 5px;font-size:13px}.listen-groups button img{width:24px;height:24px}.listen-words{gap:6px}.listen-words button{width:40px;height:40px}}@media (width>=420px){.listen-words{gap:10px}.listen-words button{border-radius:16px;width:52px;height:52px}.listen-words button img{border-radius:14px}}@media (width>=720px){.listen-header{padding-top:18px}.listen-main{gap:16px}.listen-stage{border-radius:32px;padding:20px 28px 18px}.listen-english{font-size:44px}.listen-english.is-word{font-size:64px}}@media (prefers-reduced-motion:reduce){.listen-shell *,.listen-shell :before{transition:none!important;animation:none!important}}body{min-width:320px;margin:0;font-family:PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif}