#feature-demos{--sdemo-navy:#10265a;--sdemo-blue:#1666e8;--sdemo-ink:#172746;--sdemo-muted:#66758e;--sdemo-line:#dce5f2;--sdemo-gold:#ffb844;color:var(--sdemo-ink);scroll-margin-top:110px}
#feature-demos *{box-sizing:border-box}
#feature-demos button,#feature-demos select,#feature-demos input{font:inherit}
#feature-demos button{cursor:pointer}
#feature-demos button:focus-visible,#feature-demos select:focus-visible,#feature-demos input:focus-visible,#feature-demos [tabindex]:focus-visible{outline:3px solid #dd9809;outline-offset:4px}
#feature-demos button:disabled{cursor:default;opacity:.5}
.sdemo-notice{display:flex;align-items:center;gap:20px;margin-bottom:22px;color:var(--sdemo-muted);font-size:12px;line-height:1.7}
.sdemo-notice>span{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;color:var(--sdemo-navy);font-weight:700;letter-spacing:.04em}
.sdemo-notice i{display:inline-block;width:7px;height:7px;background:var(--sdemo-gold);border-radius:50%}
.sdemo-notice p{margin:0}
.sdemo-layout{display:grid;grid-template-columns:255px minmax(0,1fr);border:1px solid var(--sdemo-line);border-radius:22px;overflow:hidden;background:white;box-shadow:0 24px 80px #10265a0a}
.sdemo-tabs{display:flex;flex-direction:column;gap:3px;padding:18px 12px;background:#f4f8fd;border-right:1px solid var(--sdemo-line)}
.sdemo-tab{display:grid;grid-template-columns:28px minmax(0,1fr) 12px;align-items:center;gap:10px;min-height:80px;padding:13px 11px;border:1px solid transparent;border-radius:10px;text-align:left;background:transparent;color:#5e6e89;transition:background .18s,color .18s,border-color .18s}
.sdemo-tab:hover{background:#eaf1fc;color:var(--sdemo-navy)}
.sdemo-tab[aria-selected=true]{color:var(--sdemo-navy);background:white;border-color:#c9dcfa;box-shadow:0 5px 12px #10265a06}
.sdemo-tab-index{display:grid;place-items:center;width:28px;height:28px;border:1px solid #d9e3f0;border-radius:50%;font-size:12px;letter-spacing:.01em;color:#8090a9}
.sdemo-tab[aria-selected=true] .sdemo-tab-index{background:var(--sdemo-blue);color:white;border-color:var(--sdemo-blue)}
.sdemo-tab b{display:block;font-size:13px;font-weight:750;line-height:1.55}
.sdemo-tab small{display:block;margin-top:4px;font-size:12px;line-height:1.55;color:#8591a5}
.sdemo-tab i{font-style:normal;font-size:15px;opacity:0;transform:translate(-3px,3px);transition:opacity .2s,transform .2s}
.sdemo-tab[aria-selected=true] i{opacity:1;transform:none}
.sdemo-panel{min-width:0;padding:30px 30px 22px;background:#fff}
.sdemo-scene-tag{display:block;font-size:11px;font-weight:750;letter-spacing:.13em;color:var(--sdemo-blue)}
.sdemo-scene-heading h3{margin:12px 0 8px;font-size:25px;letter-spacing:-.04em;line-height:1.4;color:var(--sdemo-navy)}
.sdemo-scene-heading>p{margin:0;color:var(--sdemo-muted);font-size:12px;line-height:1.8;min-height:43px}
.sdemo-stage{position:relative;margin-top:21px;min-height:423px;border:1px solid #dbe5f3;border-radius:13px;background:linear-gradient(140deg,#f3f7fd,#edf3fc);overflow:hidden}
.sdemo-stage:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(#10265a05 1px,transparent 1px);background-size:100% 30px;opacity:.5}
.sdemo-stage-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:stretch;min-height:423px;padding:26px;gap:17px}
.sdemo-editor{position:relative;flex-shrink:0;border:1px solid #cdd9eb;border-radius:8px;background:#fff;box-shadow:0 8px 20px #15315f06;overflow:hidden}
.sdemo-editor-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 13px;background:#f8faff;border-bottom:1px solid #e3eaf5;font-size:12px;color:#7887a0}
.sdemo-editor-toolbar>span:first-child{display:flex;align-items:center;gap:7px}
.sdemo-editor-toolbar i{width:7px;height:9px;border:1px solid #a2b9d8;border-radius:1px;display:inline-block}
.sdemo-document-label{font-size:11px;background:#edf3fc;padding:2px 6px;border-radius:3px;color:#6b83a3}
.sdemo-paper{display:flex;gap:13px;align-items:baseline;min-height:74px;padding:19px 16px}
.sdemo-line-number{color:#b4c1d4;font-size:11px;font-family:monospace;user-select:none}
.sdemo-document{min-width:0;font-size:20px;line-height:1.5;color:var(--sdemo-ink)}
.sdemo-caret{display:inline-block;width:1.5px;height:23px;vertical-align:-4px;margin-left:3px;background:var(--sdemo-blue)}
.sdemo-is-playing .sdemo-caret{animation:sdemo-blink 1s steps(1) infinite}
.sdemo-composition{margin-left:2px;font-size:16px;color:#4b6282;border-bottom:1px solid #7795bb;padding-bottom:3px;letter-spacing:.025em}
.sdemo-candidates{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:8px 13px;margin:0 13px 13px;padding:9px 11px;border:1px solid #b8cef0;background:#fff;border-radius:5px;box-shadow:0 3px 8px #10265a0c;font-size:12px;line-height:1.8}
.sdemo-code{color:var(--sdemo-blue);font-size:12px;font-family:Consolas,monospace;font-weight:700}
.sdemo-candidates>div{display:flex;flex-wrap:wrap;gap:5px 15px}
.sdemo-candidates>div>span{white-space:nowrap}
.sdemo-candidates b{font-size:11px;margin-right:5px;color:#8c9bb1;font-weight:500}
.sdemo-candidate-first,.sdemo-candidate-first b{color:var(--sdemo-blue)!important}
.sdemo-candidate-en{font-size:12px;color:#7990ae}
.sdemo-candidates em{font-size:10px;line-height:1.5;background:#edf4ff;color:#6984aa;padding:2px 4px;border-radius:3px;margin-left:3px;font-style:normal}
.sdemo-page-keys{margin-left:auto;color:#91a4bf;font-size:12px}
.sdemo-editor-hint{padding:8px 13px;border-top:1px solid #eef2f8;font-size:11px;color:#8292aa;line-height:1.5}
.sdemo-editor-compact .sdemo-paper{min-height:62px;padding-top:13px;padding-bottom:13px}
.sdemo-learning{position:relative;align-self:center;width:min(365px,100%);padding:17px 20px 12px;border:1px solid #cfdaeb;border-radius:9px;background:#fff;box-shadow:0 11px 23px #10265a0d,0 2px 3px #10265a06;animation:sdemo-appear .35s ease both}
.sdemo-learning:before{content:"";position:absolute;top:-5px;left:37px;width:8px;height:8px;border-top:1px solid #cfdaeb;border-left:1px solid #cfdaeb;transform:rotate(45deg);background:#fff}
.sdemo-learning-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:7px;color:#6d7c95;font-size:12px}
.sdemo-offline{font-size:10px;color:#9aa8bc;letter-spacing:.04em}
.sdemo-pronounce{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;border:0;border-radius:5px;padding:4px 8px;background:#eaf2ff;color:#2862b9;font-size:11px!important;line-height:1.5}
.sdemo-pronounce:hover{background:#dceaff}
.sdemo-pronounce>span{font-size:7px}
.sdemo-pronounce kbd{font-family:inherit;font-size:11px;color:#6c8ec3}
.sdemo-english-label{font-size:11px;color:#8593a8;line-height:1.5;margin-top:5px}
.sdemo-english{display:block;font-family:Arial,sans-serif;font-size:23px;font-weight:650;letter-spacing:-.02em;line-height:1.3;color:#1b2f51;overflow-wrap:anywhere}
.sdemo-ipa{font-family:"Segoe UI",Arial,sans-serif;font-size:12px;line-height:1.7;color:#3e77bb;overflow-wrap:anywhere;margin-top:2px}
.sdemo-pos{display:flex;gap:7px;margin-top:8px;font-size:12px;color:#7f8ca1}
.sdemo-pos-chip{padding:2px 6px;border-radius:3px;background:#f0f4fa}
.sdemo-gloss{margin-top:8px;font-size:12px;line-height:1.6;color:#7d8ba1}
.sdemo-learning-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;border-top:1px solid #edf1f6;padding-top:9px}
.sdemo-learning-foot .sdemo-mini{padding:0!important;min-height:auto!important;border:0!important;background:transparent!important;font-size:11px!important;color:#4679bd!important}
.sdemo-star{border:0;background:transparent;color:#7385a0;font-size:11px!important;padding:1px 0}
.sdemo-star.is-saved{color:#bb861b}
.sdemo-learning-space{flex:1;display:flex;align-items:center;justify-content:center;gap:15px;color:#96a7bf;font-size:12px;min-height:148px}
.sdemo-learning-space i{font-style:normal;font-size:27px;color:#b5c9e5}
.sdemo-mini{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:31px;padding:5px 10px;font-size:12px!important;line-height:1.6;color:#35659f;background:white;border:1px solid #ccd9eb;border-radius:5px}
.sdemo-mini:hover{background:#f4f8ff;border-color:#92b4e3}
.sdemo-scene-actions{display:flex;align-items:center;justify-content:center;gap:11px;flex-wrap:wrap;margin-top:auto}
.sdemo-audio-status{color:#8494ad;font-size:11px;line-height:1.6;text-align:center}
.sdemo-choices{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
.sdemo-choices button{flex:1;white-space:nowrap;min-height:34px;padding:6px 9px;border:1px solid #d0dced;border-radius:5px;background:#ffffffa6;color:#6e819f;font-size:12px!important;line-height:1.6;transition:background .18s,color .18s,border-color .18s}
.sdemo-choices button:hover{background:#e6effd}
.sdemo-choices button[aria-pressed=true]{background:var(--sdemo-navy);border-color:var(--sdemo-navy);color:#fff;box-shadow:0 3px 6px #10265a0b}
.sdemo-code-note{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:11px;margin:auto;text-align:center;max-width:370px;padding:12px 0}
.sdemo-code-note>span{font-size:12px;letter-spacing:.03em;color:#7e91ac}
.sdemo-code-note>strong{font-size:25px;color:var(--sdemo-navy);letter-spacing:-.035em}
.sdemo-code-note>p{margin:0;flex-basis:100%;font-size:12px;line-height:1.8;color:#8494aa}
.sdemo-memory-track{display:flex;gap:7px;align-items:center;justify-content:center;margin:22px 0 14px}
.sdemo-memory-track>div{display:flex;flex-direction:column;gap:9px;align-items:center;text-align:center;color:#8193ad}
.sdemo-memory-track span{display:grid;place-items:center;width:27px;height:27px;background:#e1eafb;border-radius:50%;font-size:12px;color:#6887b1}
.sdemo-memory-track b{font-size:12px;font-weight:500}
.sdemo-memory-track i{align-self:flex-start;margin-top:6px;font-size:13px;font-style:normal;color:#b2c5df}
.sdemo-memory-track .is-done span{background:var(--sdemo-blue);color:#fff}
.sdemo-memory-track .is-done b{color:#3d669d}
.sdemo-simulation-note{margin:0;text-align:center;font-size:11px;line-height:1.7;color:#8c9ab0}
.sdemo-check{display:inline-flex;align-items:center;gap:7px;font-size:12px;line-height:1.6;color:#4c688f;cursor:pointer}
.sdemo-check input{width:13px;height:13px;margin:0;accent-color:var(--sdemo-blue);cursor:pointer;flex-shrink:0}
.sdemo-filter-controls{display:flex;align-items:center;justify-content:space-between;gap:13px;flex-wrap:wrap}
.sdemo-filter-controls>label:first-child{display:flex;align-items:center;gap:12px;color:#58718f;font-size:12px}
.sdemo-filter-controls select{min-width:117px;padding:5px 24px 5px 8px;border:1px solid #c6d6ec;border-radius:4px;background:white;color:var(--sdemo-navy);font-size:12px}
.sdemo-stage-filter{gap:12px;padding-top:19px;padding-bottom:19px}
.sdemo-stage-filter .sdemo-choices{gap:4px}
.sdemo-stage-filter .sdemo-choices button{padding:4px 5px;min-height:29px;font-size:11px!important}
.sdemo-filter-result{display:flex;flex:1;align-items:center;justify-content:center;min-height:182px}
.sdemo-filter-result .sdemo-learning{padding-top:12px;padding-bottom:10px}
.sdemo-filter-result .sdemo-learning-foot{margin-top:7px;padding-top:6px}
.sdemo-filter-result .sdemo-learning-top{margin-bottom:3px}
.sdemo-clean-space{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;min-height:150px;text-align:center;color:#8a9db9}
.sdemo-clean-space>span{display:grid;place-items:center;width:36px;height:36px;border:1px solid #d3e0f1;border-radius:50%;color:#8da9cc;font-size:18px}
.sdemo-clean-space strong{font-size:12px;font-weight:500;color:#7f94b2}
.sdemo-clean-space p{font-size:12px;line-height:1.7;margin:0;color:#a0aec2}
.sdemo-stage-word{gap:13px;padding-top:21px;padding-bottom:20px}
.sdemo-stage-word .sdemo-editor-compact .sdemo-paper{min-height:47px;padding-top:8px;padding-bottom:8px}
.sdemo-stage-word .sdemo-editor-toolbar{padding-top:7px;padding-bottom:7px}
.sdemo-stage-word .sdemo-learning{padding-top:13px}
.sdemo-stage-word .sdemo-choices{margin-top:auto}
.sdemo-stage-word>.sdemo-check{justify-content:center}
.sdemo-examples{margin-top:10px;padding:9px 10px;border-left:2px solid #b2cdf4;background:#f4f8fe;animation:sdemo-appear .3s ease both}
.sdemo-example-type{font-size:10px;color:#7892b4}
.sdemo-examples p{margin:3px 0 0;color:#405e88;font-family:Arial,sans-serif;font-size:12px;line-height:1.6}
.sdemo-context-caption{display:flex;gap:8px;align-items:center;justify-content:center;color:#8496b0;font-size:11px;line-height:1.6;text-align:center}
.sdemo-caption-line{display:block;flex-shrink:0;width:15px;height:1px;background:var(--sdemo-gold)}
.sdemo-synonyms{display:flex;gap:5px;flex-wrap:wrap;align-items:center;margin-top:9px;font-family:Arial,sans-serif;animation:sdemo-appear .3s ease both}
.sdemo-synonyms>span{font-size:11px;color:#8c9ab0;margin-right:2px;font-family:inherit}
.sdemo-synonyms b{font-size:11px;font-weight:500;padding:2px 5px;border-radius:3px;color:#72815c;background:#f1f5e9}
.sdemo-related-note{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:auto;color:#8295af;font-size:12px;line-height:1.6;text-align:center}
.sdemo-related-note>span{color:#c2a05c;font-size:20px}
.sdemo-library{width:100%;max-width:450px;align-self:center;margin:auto;border:1px solid #cfdbeb;border-radius:9px;padding:23px;background:#fff;box-shadow:0 10px 24px #10265a07}
.sdemo-library-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.sdemo-library-top>div>span{font-size:10px;color:#93a4bb;letter-spacing:.13em}
.sdemo-library h4{margin:5px 0 0;font-size:20px;color:var(--sdemo-navy);letter-spacing:-.04em}
.sdemo-library-count{color:#96a5bb;font-size:11px}
.sdemo-library-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:19px;border-top:1px solid #e8eef6;border-bottom:1px solid #e8eef6;padding:17px 0}
.sdemo-library-row strong{display:block;font-size:15px;color:#304d77;line-height:1.5}
.sdemo-library-row div>span{display:block;font-family:Arial,sans-serif;font-size:12px;color:#8397b1;margin-top:4px}
.sdemo-library-actions{display:flex;gap:8px;margin-top:19px;flex-wrap:wrap}
.sdemo-library-actions .sdemo-mini:first-child{background:var(--sdemo-navy);border-color:var(--sdemo-navy);color:#fff}
.sdemo-library>p{margin:13px 0 0;font-size:11px;color:#9aabc1;line-height:1.7}
.sdemo-library-foot{margin-top:auto;text-align:center;color:#899cb7;font-size:12px;letter-spacing:.06em}
.sdemo-review{display:flex;align-items:center;flex-direction:column;width:100%;max-width:410px;margin:auto;align-self:center;border:1px solid #cddced;border-radius:10px;box-shadow:0 10px 25px #10265a06;background:#fff;padding:20px 25px}
.sdemo-review-top{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:11px;color:#8b9db7;gap:10px}
.sdemo-review-prompt{font-size:12px;color:#8799b1;margin-top:22px}
.sdemo-review-chinese{font-size:34px;color:var(--sdemo-navy);line-height:1.5;margin-top:11px;letter-spacing:.09em}
.sdemo-review-answer{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:67px;margin:9px 0 17px;color:#b4c0d2;font-size:12px}
.sdemo-review-answer strong{font-family:Arial,sans-serif;font-size:25px;color:#2a63b5;line-height:1.4}
.sdemo-review-answer.is-revealed{animation:sdemo-appear .3s ease both}
.sdemo-review-answer.is-revealed>span{font-size:12px;line-height:1.7;color:#7a9bc9;font-family:Arial,sans-serif}
.sdemo-review .sdemo-scene-actions{margin-top:0}
.sdemo-stage-update{gap:12px;padding-top:18px;padding-bottom:18px}
.sdemo-app-tabs{display:flex;gap:5px;font-size:11px;color:#9cacc2}
.sdemo-app-tabs>span{padding:4px 8px;border-radius:4px;background:#e4ecf8;line-height:1.7}
.sdemo-app-tabs>span.is-current{background:#fff;color:#587ba8;box-shadow:0 2px 5px #10265a04}
.sdemo-update-result{display:flex;flex:1;align-items:center;justify-content:center;min-height:181px}
.sdemo-stage-update .sdemo-choices{gap:4px}
.sdemo-stage-update .sdemo-choices button{font-size:11px!important;min-height:28px;padding:4px 5px}
.sdemo-stage-update .sdemo-learning{padding-top:11px}
.sdemo-playback{display:grid;grid-template-columns:auto 1fr;gap:14px 16px;align-items:center;padding-top:18px}
.sdemo-transport{display:flex;align-items:center;gap:7px}
.sdemo-transport>button{display:inline-flex;align-items:center;justify-content:center;gap:5px;border:0;background:transparent;padding:4px 3px;color:#8294ad;font-size:11px!important;line-height:1.7;white-space:nowrap}
.sdemo-transport>button:hover{color:var(--sdemo-blue)}
.sdemo-transport>button.sdemo-play{min-width:59px;background:var(--sdemo-navy);border-radius:5px;color:white;padding:5px 8px}
.sdemo-play>span{font-size:11px;width:10px}
.sdemo-play>b{font-weight:500}
.sdemo-step-label{text-align:right;font-size:11px;color:#8294ac;line-height:1.7}
.sdemo-progress{position:relative;display:flex;gap:4px;grid-column:1/-1;height:3px;overflow:hidden;border-radius:3px;background:#e9eff8}
.sdemo-progress:before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--sdemo-progress,0%);background:var(--sdemo-blue)}
.sdemo-progress>i{position:relative;display:block;flex:1;height:100%;border-right:3px solid #fff}
.sdemo-progress>i:last-child{border-right:0}
.sdemo-scene-note{min-height:35px;margin:13px 0 0!important;font-size:11px!important;line-height:1.8!important;color:#8a99af!important}
.sdemo-live.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes sdemo-appear{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes sdemo-blink{50%{opacity:0}}
.sdemo-reduced-motion *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(min-width:1300px){.sdemo-stage-content{padding-left:35px;padding-right:35px}}
@media(max-width:1000px){.sdemo-layout{grid-template-columns:214px minmax(0,1fr)}.sdemo-panel{padding:25px 23px 20px}.sdemo-tabs{padding:15px 8px}.sdemo-tab{gap:8px;grid-template-columns:24px minmax(0,1fr) 9px;padding:13px 8px}.sdemo-tab-index{width:24px;height:24px}.sdemo-tab b{font-size:12px}.sdemo-tab small{font-size:11px}.sdemo-stage-content{padding:21px}.sdemo-step-label{font-size:10px}.sdemo-transport>button{font-size:10px!important}}
@media(max-width:760px){.sdemo-layout{display:block;border-radius:15px}.sdemo-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;border-right:0;border-bottom:1px solid var(--sdemo-line);padding:12px}.sdemo-tab{min-height:68px;display:flex;align-items:flex-start;justify-content:center;gap:6px;padding:9px 5px;text-align:center}.sdemo-tab-index{display:none}.sdemo-tab i{display:none}.sdemo-tab b{font-size:12px;line-height:1.6}.sdemo-tab small{display:none}.sdemo-tab[aria-selected=true]{border-color:#b3cdf4}.sdemo-panel{padding:23px 21px 20px}.sdemo-notice{gap:8px;align-items:flex-start;flex-direction:column;font-size:12px;margin-bottom:15px}.sdemo-scene-heading h3{font-size:24px}.sdemo-scene-heading>p{font-size:12px;min-height:40px}.sdemo-stage{min-height:425px;margin-top:17px}.sdemo-stage-content{min-height:425px;padding:22px;gap:15px}.sdemo-stage-word{gap:13px}.sdemo-playback{padding-top:16px}.sdemo-step-label{font-size:11px}.sdemo-transport>button{font-size:11px!important}.sdemo-tab[aria-selected=true] .sdemo-tab-index{display:none}.sdemo-stage-filter,.sdemo-stage-update{padding-top:17px;padding-bottom:17px;gap:12px}}
@media(max-width:460px){.sdemo-tabs{gap:5px;padding:10px}.sdemo-tab{min-height:54px;align-items:center;padding:7px 4px}.sdemo-tab b{font-size:11px;letter-spacing:-.03em}.sdemo-panel{padding:21px 13px 17px}.sdemo-scene-heading{padding:0 5px}.sdemo-scene-tag{font-size:10px}.sdemo-scene-heading h3{font-size:21px;letter-spacing:-.055em}.sdemo-scene-heading>p{font-size:12px;line-height:1.8;min-height:54px}.sdemo-stage{min-height:437px;border-radius:9px}.sdemo-stage-content{padding:17px 13px;min-height:437px;gap:13px}.sdemo-document{font-size:19px}.sdemo-editor-toolbar{padding:8px 10px;font-size:11px}.sdemo-paper{padding:17px 11px;gap:10px;min-height:69px}.sdemo-candidates{margin:0 8px 9px;padding:7px 8px;gap:3px 9px;font-size:12px}.sdemo-candidates>div{gap:2px 10px}.sdemo-candidate-en{font-size:11px}.sdemo-learning{padding:14px 15px 10px}.sdemo-english{font-size:22px}.sdemo-ipa{font-size:12px}.sdemo-learning-top{font-size:11px}.sdemo-learning-foot{margin-top:10px}.sdemo-code-note>strong{font-size:23px}.sdemo-code-note>p{font-size:12px}.sdemo-choices button{font-size:11px!important;padding:5px 6px}.sdemo-filter-controls{gap:9px}.sdemo-filter-controls>label:first-child{gap:7px;font-size:11px}.sdemo-filter-controls select{min-width:102px;font-size:11px;padding-left:5px}.sdemo-check{font-size:11px;gap:5px}.sdemo-stage-filter{padding:16px 11px;gap:11px}.sdemo-stage-filter .sdemo-choices button{flex-basis:40%;font-size:11px!important}.sdemo-filter-result{min-height:180px}.sdemo-memory-track{gap:5px}.sdemo-memory-track b{font-size:11px}.sdemo-memory-track>div{gap:8px}.sdemo-memory-track span{width:25px;height:25px}.sdemo-memory-track i{font-size:12px}.sdemo-scene-actions{gap:8px}.sdemo-mini{font-size:11px!important;padding:5px 8px}.sdemo-audio-status{font-size:10px;max-width:160px}.sdemo-context-caption{font-size:10px}.sdemo-related-note{font-size:11px}.sdemo-stage-word .sdemo-learning{padding-top:12px}.sdemo-library{padding:20px 17px}.sdemo-review{padding:20px 17px}.sdemo-review-top{font-size:10px}.sdemo-review-chinese{font-size:32px}.sdemo-stage-update .sdemo-choices button{flex-basis:29%;font-size:10px!important}.sdemo-update-result{min-height:170px}.sdemo-playback{grid-template-columns:1fr;gap:12px;padding:15px 3px 0}.sdemo-transport{justify-content:center;gap:13px}.sdemo-transport>button{font-size:12px!important}.sdemo-step-label{text-align:center;font-size:11px;grid-row:2}.sdemo-progress{grid-row:3}.sdemo-scene-note{font-size:10px!important;padding:0 3px;min-height:45px}.sdemo-notice p{font-size:11px}}
@media(prefers-reduced-motion:reduce){#feature-demos *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Keep the interactive illustration readable and usable at website scale. */
#feature-demos .sdemo-stage,#feature-demos .sdemo-stage-content{min-height:510px}
#feature-demos button:not(.sdemo-tab){font-size:12px!important;min-height:38px}
#feature-demos .sdemo-tab b{font-size:12px}
#feature-demos .sdemo-scene-heading>p,#feature-demos .sdemo-scene-note{font-size:12px!important;line-height:1.8!important}
#feature-demos .sdemo-scene-note{min-height:45px}
#feature-demos .sdemo-mini,#feature-demos .sdemo-choices button{padding-top:7px;padding-bottom:7px}
#feature-demos .sdemo-learning-foot .sdemo-mini{min-height:34px!important;font-size:12px!important}
#feature-demos .sdemo-pronounce{padding:6px 8px}
#feature-demos .sdemo-pronounce kbd{font-size:11px}
#feature-demos .sdemo-star{min-height:34px!important}
#feature-demos .sdemo-check{font-size:12px;min-height:38px}
#feature-demos .sdemo-check input{width:16px;height:16px}
#feature-demos .sdemo-filter-controls select{font-size:12px;min-height:38px}
#feature-demos .sdemo-filter-controls>label:first-child{font-size:12px}
#feature-demos .sdemo-learning{width:min(390px,100%)}
#feature-demos .sdemo-sample-label{font-size:10px;color:#95a5bd}
#feature-demos .sdemo-examples p{font-size:13px;line-height:1.7}
#feature-demos .sdemo-context-caption{font-size:11px;line-height:1.7}
#feature-demos .sdemo-scene-actions .sdemo-audio-status{font-size:11px}
@media(max-width:760px){#feature-demos .sdemo-tab{min-height:62px}#feature-demos .sdemo-stage,#feature-demos .sdemo-stage-content{min-height:540px}#feature-demos .sdemo-transport{gap:10px}#feature-demos .sdemo-scene-heading>p{min-height:65px}#feature-demos .sdemo-scene-note{min-height:65px}#feature-demos .sdemo-step-label{font-size:11px}#feature-demos button:not(.sdemo-tab){min-height:40px}}
@media(max-width:460px){#feature-demos .sdemo-tab b{font-size:11px;line-height:1.7}#feature-demos .sdemo-tab{min-height:60px}#feature-demos .sdemo-choices{gap:5px}#feature-demos .sdemo-choices button{white-space:normal}#feature-demos .sdemo-stage-filter .sdemo-choices button{font-size:11px!important}#feature-demos .sdemo-stage-filter .sdemo-filter-controls{align-items:flex-start;flex-direction:column;gap:3px}#feature-demos .sdemo-stage-update .sdemo-choices button{font-size:11px!important}#feature-demos .sdemo-memory-track b{font-size:11px}#feature-demos .sdemo-memory-track{gap:4px}#feature-demos .sdemo-memory-track i{font-size:10px}#feature-demos .sdemo-library-row div>span{font-size:11px}#feature-demos .sdemo-stage-content{padding-left:12px;padding-right:12px}#feature-demos .sdemo-review-top{font-size:10px}#feature-demos .sdemo-review-prompt{font-size:12px}#feature-demos .sdemo-pronounce{font-size:11px!important}#feature-demos .sdemo-notice p{font-size:11px}}
.sdemo-stage-context{gap:16px}
.sdemo-context-window{width:min(390px,100%);align-self:center;padding:17px 20px;border:1px solid #cedbed;border-radius:9px;background:#fff;box-shadow:0 10px 24px #10265a0b;animation:sdemo-appear .3s ease both}
.sdemo-context-window .sdemo-english-label{font-size:11px}
.sdemo-context-suggestion{margin-top:14px;padding:12px 0 0;border-top:1px solid #e4edf8;min-height:89px}
.sdemo-context-suggestion>strong{display:block;margin-top:6px;color:#255c9f;font-size:22px;font-family:Arial,sans-serif;line-height:1.4}
.sdemo-context-suggestion>small{display:block;margin-top:5px;font-size:11px;line-height:1.7;color:#8a9bb3}
.sdemo-artificial-label{display:inline-flex;align-items:center;gap:5px;border-radius:3px;background:#fff5dd;color:#9c7a39;padding:3px 6px;font-size:10px;line-height:1.7}
.sdemo-context-status{display:flex;align-items:center;gap:8px;color:#607d9f;font-size:12px;line-height:1.8}
.sdemo-thinking{display:inline-block;width:11px;height:11px;border:1.5px solid #d6e3f5;border-right-color:#658abd;border-radius:50%}
.sdemo-is-playing .sdemo-thinking{animation:sdemo-thinking .9s linear infinite}
.sdemo-stage-context>.sdemo-choices{margin-top:auto}
.sdemo-stage-translation{gap:14px;padding-top:20px;padding-bottom:20px}
.sdemo-translation-document{padding:17px 15px;color:#334d71;font-size:15px;line-height:1.9}
.sdemo-translation-document>.is-selected{background:#dbeaff;color:#1d58a5;box-shadow:0 0 0 2px #dbeaff}
.sdemo-segment-caption{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:0 15px 10px}
.sdemo-segment-caption>span{font-size:10px;line-height:1.6;padding:2px 5px;background:#f0f5fd;border-radius:3px;color:#8b9fbd}
.sdemo-segment-caption>small{font-size:10px;color:#a1afc3}
.sdemo-translation-window{width:min(440px,100%);align-self:center;padding:15px 18px;border:1px solid #cedbed;border-radius:8px;background:white;box-shadow:0 12px 26px #10265a0b;animation:sdemo-appear .3s ease both}
.sdemo-translation-top{display:flex;align-items:center;gap:8px;margin-bottom:10px;color:#91a2bb;font-size:11px;line-height:1.6}
.sdemo-translation-top>strong{font-size:13px;font-weight:650;color:var(--sdemo-navy)}
.sdemo-translation-top>button{margin-left:auto!important;border:0;background:#f3f7fc;color:#8c9fb9;min-width:32px;min-height:32px!important;padding:0;font-size:19px!important;line-height:1;border-radius:4px}
.sdemo-translation-source{padding-top:13px;color:#8397b1}
.sdemo-translation-source>span,.sdemo-translation-result>span{font-size:10px;line-height:1.5}
.sdemo-translation-source>p{margin:4px 0 0;font-size:12px;line-height:1.7;color:#657f9d}
.sdemo-translation-result{padding:12px 0 0;margin-top:10px;border-top:1px solid #edf2f9;color:#7c97ba}
.sdemo-translation-result>p{font-family:Arial,sans-serif;font-size:16px;line-height:1.65;margin:6px 0 0;color:#285b9b}
.sdemo-translation-result>p.sdemo-translation-pending{font-family:inherit;color:#8ca2be;font-size:12px}
.sdemo-translation-result>small{display:block;font-size:10px;line-height:1.6;margin-top:5px;color:#a2afc1}
.sdemo-translation-actions{display:flex;justify-content:flex-end;gap:7px;flex-wrap:wrap;margin-top:12px}
.sdemo-translation-trigger{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;flex:1;min-height:225px;color:#93a6bf}
.sdemo-translation-trigger>kbd{display:grid;place-items:center;width:49px;height:46px;font-family:inherit;font-size:22px;border:1px solid #c5d6ec;border-bottom-width:4px;border-radius:7px;background:#f8fbff;color:#7896be}
.sdemo-translation-trigger>strong{font-size:12px;font-weight:500}
@keyframes sdemo-thinking{to{transform:rotate(360deg)}}
@media(max-width:460px){.sdemo-context-window{padding:14px 15px}.sdemo-artificial-label{font-size:10px}.sdemo-stage-context>.sdemo-choices button{flex-basis:40%;font-size:11px!important}.sdemo-translation-document{font-size:14px;padding:13px 11px}.sdemo-translation-window{padding:13px 13px}.sdemo-translation-result>p{font-size:15px}.sdemo-translation-source>p{font-size:12px}.sdemo-segment-caption{padding-left:11px;padding-right:11px}.sdemo-stage-translation>.sdemo-choices button{font-size:11px!important}.sdemo-translation-top>button{min-height:36px!important}}
.sdemo-stage-minimal{gap:14px}
.sdemo-minimal-preview{display:flex;align-items:center;justify-content:center;flex:1;min-height:260px}
.sdemo-minimal-window{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:7px;min-width:160px;max-width:360px;min-height:115px;padding:14px 19px;border:1px solid #cbd8e9;border-radius:6px;background:white;box-shadow:0 8px 18px #10265a0c;animation:sdemo-appear .3s ease both}
.sdemo-minimal-window>span{font-size:12px;line-height:1.5;color:#8999af}
.sdemo-minimal-window>strong{font-size:20px;line-height:1.4;color:#1d3356;letter-spacing:-.015em}
.sdemo-minimal-window>strong:last-child{font-family:Arial,sans-serif}
.sdemo-minimal-window>strong>span{font-family:inherit;color:#72869f;font-size:14px}
.sdemo-minimal-caption{font-size:12px!important;line-height:1.8!important;color:#8194b0!important;text-align:center;max-width:390px;margin:0 auto!important}
@media(min-width:761px){.sdemo-tab{min-height:70px}}
.sdemo-stage-memory .sdemo-candidates { align-items: flex-start; flex-direction: column; }
.sdemo-stage-memory .sdemo-candidates>div { display: flex; flex-direction: column; gap: 3px; width: 100%; }
.sdemo-stage-memory .sdemo-candidates>div>span { min-height: 27px; display: flex; align-items: center; gap: 6px; padding: 2px 7px; border-radius: 4px; }
.sdemo-stage-memory .sdemo-candidate-first { background: #eaf3ff; }
.sdemo-stage-memory .sdemo-page-keys { display: none; }
@media(max-width:460px){.sdemo-stage-minimal{gap:13px}.sdemo-minimal-preview{min-height:280px}.sdemo-minimal-caption{font-size:11px!important}}
@media(max-width:760px){#feature-demos .sdemo-learning-foot .sdemo-mini,#feature-demos .sdemo-star,#feature-demos .sdemo-translation-top>button{min-height:40px!important}}