:root{--blue:#5266ea;--ink:#2b3d69;--muted:#7383a8;--line:#e0e8f8;--page:#edf3ff;--soft:#edf0ff;font-family:"Trebuchet MS","Segoe UI","Microsoft YaHei",sans-serif}.sidebar{background:#edf3ff;border:0;box-shadow:5px 0 20px #c1cce22b}.brand{font-weight:800}.brand-icon{background:#ffb84b;color:#66400e;box-shadow:4px 5px 9px #bcc8e8,-4px -4px 9px #fff,inset 2px 2px 3px #ffe4b3;border-radius:15px}.nav-item{border-radius:17px;margin:10px 0;min-height:67px}.nav-item.active{background:#dfe7ff;box-shadow:5px 5px 11px #c6d2ee,-5px -5px 11px white,inset 1px 1px 1px #fff9}.nav-item:hover{background:#e3ebff}.nav-icon{background:#dce7ff;box-shadow:inset 2px 2px 4px #c4d1ed,inset -2px -2px 4px #fff;border-radius:10px;line-height:36px;width:35px}.nav-item{grid-template-columns:35px 1fr}.sidebar-note p{font-family:"Trebuchet MS",sans-serif;font-size:23px;font-style:normal;font-weight:750}.note-mark{font-family:inherit;font-size:42px;color:#ffb84b}.topbar{background:transparent;border-bottom:1px solid #dce5f4}.top-pill{background:#fff3d5;padding:8px 16px;border-radius:20px;color:#84550c;box-shadow:3px 3px 8px #c8d4ed,-3px -3px 8px #fff}.spark{color:#e5a020}h1{font-weight:850;color:#2a3e72;font-size:37px}.intro{position:relative;min-height:105px}.level-label{background:#e7eeff;padding:12px 18px;border-radius:18px;box-shadow:inset 4px 4px 8px #cbd8f3,inset -4px -4px 8px #fff}.study{border:3px solid #fff;border-radius:28px;background:#f9fbff;box-shadow:10px 10px 25px #c9d5ed,-10px -10px 25px #fff9}.badge{background:#fff0c9;color:#8a611c;box-shadow:2px 3px 5px #e4d5aa;border-radius:10px;font-weight:650}.word-card{background:linear-gradient(135deg,#687ef7,#5267df);border:3px solid #8495ff;border-radius:23px;box-shadow:inset 4px 4px 9px #a3b0ff55,inset -4px -4px 9px #3349bf66,5px 7px 12px #a3b2dd4d;color:white}.word-card .part,.word-card .phonetic{color:#eef0ff}.word{font-size:50px;text-shadow:0 3px 0 #3b50bc33}.audio{background:#fff2c9;color:#625118;border:2px solid #fff9df;box-shadow:0 4px 0 #b0a275;border-radius:15px;width:46px;height:44px}.meaning{background:#fff;border:0;padding:18px;border-radius:15px;color:var(--ink);box-shadow:inset 2px 2px 4px #e3e9f6}.hint{font-size:14px}.btn{border-radius:14px;border:2px solid #fff;background:#edf2fc;box-shadow:4px 4px 8px #d0daef,-4px -4px 8px #fff;font-weight:700}.btn.primary{background:#ffc451;color:#67470f;border-color:#ffe4a2;box-shadow:0 5px 0 #dda33a,4px 7px 12px #d8dfe9}.btn.primary:hover{background:#ffd375}.btn:active:not(:disabled){transform:translateY(2px);box-shadow:inset 2px 2px 5px #aebde355}.btn.soft{background:#e6ecff;border-color:#f5f7ff}.plan{background:#edf3ff;border:2px solid #fff;border-radius:24px;box-shadow:7px 7px 17px #c8d5ed,-7px -7px 17px #ffffffb3}.plan-row{border-color:#dce6f7}.plan-number{border-radius:11px;background:#e7eeff;box-shadow:3px 3px 6px #cdd9ef,-3px -3px 6px #fff;color:var(--blue);font-weight:750;width:35px;height:37px}.plan-status.completed{color:#368766;font-weight:700}.session progress{height:10px;background:#dce6f7;box-shadow:inset 2px 2px 4px #c0cde5}.tip{border:3px solid #fff1c8;background:#fff0cb;border-radius:24px;box-shadow:6px 6px 15px #cfd9ea,-6px -6px 15px #fff9}.tip .eyebrow{color:#aa7112}.tip h3{color:#745017}.tip p,.tip>span{color:#9a7640}.option{border:2px solid white;border-radius:15px;background:#edf2fc;box-shadow:3px 3px 7px #d4def1,-3px -3px 7px white}.option .letter{background:#fff;color:#6475bb;border-radius:8px;font-weight:650}.option.correct{border-color:#91d2b3;background:#e3f7ec}.option.wrong{border-color:#eda5a3;background:#ffeded}.feedback{border-radius:16px}.listen-panel,.speak-card{border:3px solid white;background:#e8eeff;border-radius:22px;box-shadow:inset 4px 4px 8px #cbd6f0,inset -4px -4px 8px white}.celebrate{text-align:center;padding:16px;background:#fff1c7;border-radius:14px;margin:18px 0 0;color:#765210;font-weight:650}.mascot{width:150px;height:150px;object-fit:contain;margin:-30px 6px -18px 0}.intro.with-mascot>.level-label{display:none}.intro.with-mascot h1{font-size:35px}@media(max-width:650px){.sidebar{box-shadow:none}.nav-item{margin:0;min-height:0;grid-template-columns:none;border-radius:12px}.nav-icon{display:none}.top-pill{display:block;font-size:11px;padding:4px 10px}.topbar{padding:0 18px}.intro{min-height:0}h1{font-size:29px}.intro.with-mascot h1{font-size:27px}.intro.with-mascot p{max-width:235px}.mascot{width:100px;height:100px;margin:0 -12px 0 -15px}.study{border-radius:24px}.word{font-size:43px}.word-card{border-radius:19px}.plan,.tip{border-radius:22px}}@media(max-width:390px){.mascot{display:none}}
:is(.listen-buttons) svg{width:18px;height:18px;vertical-align:middle;margin-right:4px}.audio-status{font-size:13px;color:var(--muted);text-align:center;margin-top:14px;min-height:20px}
:is(.save-note){display:block;margin-top:5px}#save-retry{color:#b0710c;display:block}#save-retry[hidden]{display:none}
:is(.top-actions){display:flex;align-items:center;gap:18px}.profile-chip{display:flex;align-items:center;gap:10px;border:0;background:transparent;color:var(--ink);padding:4px;font-size:14px;max-width:240px}.profile-chip img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid white;background:#dce6ff;box-shadow:3px 3px 6px #cbd7ef}.profile-chip>span:first-of-type{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:130px}.profile-edit{font-size:12px;color:var(--muted)}.course-section{margin:-6px 0 28px}.course-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.course-heading h2{font-size:18px;margin:0}.course-heading>span{font-size:13px;color:var(--muted)}.course-picker{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.course-picker button{border:2px solid white;background:#edf3ff;box-shadow:4px 4px 9px #cbd7ef,-4px -4px 9px #fff;border-radius:16px;color:var(--ink);padding:12px 8px;min-width:0}.course-picker strong{display:block;font-size:17px}.course-picker span{font-size:12px;color:var(--muted);display:block;margin-top:2px}.course-picker button[aria-pressed=true]{background:#5d73eb;border-color:#8295fc;color:white;box-shadow:inset 3px 3px 6px #9bacff55,4px 4px 9px #b6c6ee}.course-picker button[aria-pressed=true] span{color:#eef0ff}.course-section>p{font-size:14px;color:var(--muted);margin-top:14px}.course-picker button:hover{transform:translateY(-1px)}dialog{border:3px solid white;border-radius:26px;background:#f3f7ff;color:var(--ink);width:min(500px,calc(100vw - 28px));max-height:90vh;padding:27px;box-shadow:0 24px 70px #243f7440}dialog::backdrop{background:#24365e77;backdrop-filter:blur(4px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.dialog-heading h2{font-size:24px}.dialog-close{font-size:27px;background:#e5edfc;border:2px solid white;border-radius:13px;line-height:1;width:36px;height:36px;color:var(--muted)}.field-label{display:block;font-size:14px;font-weight:650;margin-bottom:9px}#nickname-input{width:100%;padding:12px 14px;border:2px solid white;border-radius:13px;background:#e9f0fe;box-shadow:inset 3px 3px 7px #cdd9f0,inset -3px -3px 7px white;color:var(--ink);outline-offset:4px}.avatar-setting{display:flex;gap:22px;align-items:center;margin:24px 0}.avatar-setting img{border-radius:50%;width:90px;height:90px;object-fit:cover;border:4px solid white;background:#e0e9ff;box-shadow:5px 5px 12px #c9d6ef}.upload-label{display:inline-block;cursor:pointer;font-size:14px}.avatar-setting p{font-size:12px;color:var(--muted);margin-top:10px}#crop-canvas{display:block;width:200px;height:200px;max-width:100%;border:3px solid #bacafb;border-radius:0;margin:15px auto;object-fit:contain}#crop-panel{border-top:1px solid var(--line);padding-top:18px}.crop-control{display:flex;align-items:center;gap:16px;font-size:13px;margin:10px 0}.crop-control input{flex:1;min-width:0;accent-color:var(--blue)}.profile-note{font-size:12px;color:var(--muted);margin-top:20px;line-height:1.8}.dialog-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}#profile-status{font-size:14px;color:#a66a18;margin-top:12px}@media(max-width:950px){.top-actions{gap:12px}.course-picker{gap:9px}.topbar{padding:0 22px}.profile-edit{display:none}}@media(max-width:650px){.course-picker{grid-template-columns:repeat(3,1fr);gap:12px}.course-heading{align-items:flex-start}.course-heading h2{font-size:17px}.course-heading>span{font-size:11px;max-width:100px;text-align:right}.course-picker button{padding:9px}.course-picker strong{font-size:16px}.course-section>p{font-size:13px}.topbar>span{display:none}.topbar{justify-content:space-between;height:63px}.top-actions{width:100%;justify-content:space-between;flex-direction:row-reverse}.profile-chip{font-size:13px}.profile-chip img{width:35px;height:35px}.profile-chip>span:first-of-type{max-width:140px}dialog{padding:22px}.avatar-setting{gap:15px}.avatar-setting img{width:72px;height:72px}.dialog-actions .btn{padding:10px 15px}.course-section{margin-top:0}}
.card-particles{position:fixed;z-index:50;pointer-events:none;contain:strict}.word-card.is-dissolving{visibility:hidden}#exercise[aria-busy="true"] .actions .primary{opacity:1;background:#ffda82;box-shadow:inset 2px 2px 5px #d8ae55;cursor:wait}
:root{--particle-motion:1}@media(prefers-reduced-motion:reduce){:root{--particle-motion:0}}
.study{position:relative;isolation:isolate}#exercise{position:relative}.panel-departure{position:absolute;pointer-events:none;z-index:2;overflow:hidden;max-height:100%;contain:layout style paint}.nav-item,.plan-number{transition:background .22s,color .22s,box-shadow .22s}
.focus-legend{display:flex;gap:8px 14px;align-items:center;flex-wrap:wrap;margin:0 0 16px;font-size:12px;color:#536588}.focus-caption{font-weight:700}.focus-key{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}.focus-key i{width:9px;height:9px;border-radius:3px;display:inline-block;background:#687ef7}.focus-key[data-focus="core"] i{background:#db8028}.focus-key[data-focus="extra"] i{background:#227b78}.word-focus{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:750;letter-spacing:.5px;padding:5px 12px;margin-bottom:14px;border:1px solid #ffffff70;border-radius:30px;background:#ffffff20}.word-card[data-focus="core"]{color:#65390e;background:linear-gradient(135deg,#ffe6bd,#ffc77c);border-color:#ffdb9f;box-shadow:inset 4px 4px 9px #fff4da99,inset -4px -4px 9px #d7892540,5px 7px 12px #d6ad6b30}.word-card[data-focus="core"] .part,.word-card[data-focus="core"] .phonetic{color:#764a1b}.word-card[data-focus="core"] .word{text-shadow:0 3px 0 #d3932e22}.word-card[data-focus="core"] .word-focus{background:#fff6e3;color:#7b460d;border-color:#fff9ee}.word-card[data-focus="extra"]{background:linear-gradient(135deg,#278381,#195f63);border-color:#53a49e;box-shadow:inset 4px 4px 9px #72d1c840,inset -4px -4px 9px #0c444d66,5px 7px 12px #609f9a30}.word-card[data-focus="extra"] .part,.word-card[data-focus="extra"] .phonetic{color:#e0faf5}.word-card[data-focus="extra"] .word{text-shadow:0 3px 0 #104c5844}.focus-tip{font-size:13px;font-weight:650;text-align:center;color:#526587;margin:14px 0 0}.focus-tip+.hint{margin-top:5px}.dot[data-focus="core"]{background:#e6b377}.dot[data-focus="core"].current{background:#b66d22}.dot[data-focus="extra"]{background:#83b8b1}.dot[data-focus="extra"].current{background:#247c76}.dot[data-focus="common"]{background:#a5b0f2}.dot[data-focus="common"].current{background:#5367dc}
@media(max-width:650px){.focus-legend{gap:7px 10px;font-size:11px}.focus-caption{flex-basis:100%}.word-focus{margin-bottom:12px;padding:4px 11px}.focus-tip{font-size:12px}}
@media(prefers-reduced-motion:reduce){.nav-item,.plan-number{transition:none}}
.footer-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.support-entry{display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:6px 10px;border:1px solid #fff;background:#fff2d8;border-radius:13px;color:#855519;font-size:13px;font-weight:650;box-shadow:2px 3px 7px #d0daec55}.support-entry span{font-size:20px;line-height:1;color:#c86b24}.support-entry:hover{background:#ffe7b6}.support-dialog{width:min(440px,calc(100% - 24px));padding:24px;max-height:calc(100dvh - 32px);overscroll-behavior:contain;overflow:auto}.support-dialog .dialog-heading{align-items:center;margin-bottom:18px}.support-dialog .dialog-close{width:44px;height:44px;flex-shrink:0}.support-dialog h2{font-size:24px;margin-top:4px}.support-dialog #support-intro{font-size:16px;line-height:1.8;color:#536588}.support-code{margin:18px 0 14px;display:flex;justify-content:center;padding:12px;background:#fff;border-radius:17px;box-shadow:inset 2px 2px 5px #e3e9f5}.support-code img{display:block;width:min(100%,240px);height:auto;border-radius:0}.support-how{font-size:14px;line-height:1.8;color:#617399}.support-actions{display:flex;justify-content:center;gap:12px;margin-top:18px}.support-actions .btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px}.support-thanks{margin:18px 0 0;font-size:14px;line-height:1.8;color:#946127;background:#fff1d3;padding:12px 14px;border-radius:14px}body:has(#support-dialog[open]){overflow:hidden}
@media(max-width:650px){.footer-actions{gap:10px;justify-content:space-between;width:100%}.support-dialog{padding:20px}.support-dialog .eyebrow{font-size:11px}.support-dialog h2{font-size:22px}.support-code{padding:9px}.support-actions{gap:10px}.support-actions .btn{flex:1;min-width:0;padding:10px 8px}.support-thanks{font-size:14px}}
.voice-settings{padding:14px 16px;margin:0 0 20px;background:#edf2ff;border:2px solid #fff;border-radius:16px;box-shadow:inset 2px 2px 5px #d4def2}.voice-settings>div{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.voice-settings label{font-size:14px;font-weight:700}.voice-settings select{font:inherit;font-size:14px;padding:7px 10px;max-width:100%;border:1px solid #cbd6f4;border-radius:10px;color:var(--ink);background:#fff}.voice-settings small{display:block;margin-top:8px;color:var(--muted);font-size:12px}.voice-settings .text-button{color:var(--blue);font-size:14px;font-weight:650}.playback-panel:not([hidden]){display:flex;align-items:center;gap:14px;margin-top:20px;background:#edf2ff;padding:8px 14px;border-radius:12px}.playback-panel button{flex-shrink:0;color:var(--blue);font-size:14px}.playback-panel progress{margin:0;flex:1;min-width:35px;height:6px}.playback-panel span{color:var(--muted);font-size:12px;white-space:nowrap}