:root{--bg:#f6f5f2;--paper:#fffefb;--purple:#716187;--dark:#342d3d;--muted:#8b8690;--line:#e8e4eb;--lav:#eee9f3;--green:#668274}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--dark);font-family:Arial,'PingFang SC','Microsoft Yahei',sans-serif;font-size:14px}button,input,select{font:inherit}button{cursor:pointer;color:inherit;border:0;background:none}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #b4a0cb;outline-offset:3px}a{color:inherit;text-decoration:none}.sidebar{position:fixed;inset:0 auto 0 0;width:235px;background:#eeebf0;border-right:1px solid var(--line);padding:37px 25px;display:flex;flex-direction:column}.brand{display:flex;gap:12px;align-items:center;font-size:21px;font-weight:600}.brand img{width:42px}.brand small{display:block;font-size:8px;letter-spacing:1.6px;margin-top:7px;font-weight:400}.side-label{font-size:10px;color:var(--muted);letter-spacing:2px;margin:64px 13px 20px}.nav{padding:15px 13px;border-radius:10px;display:flex;align-items:center;gap:13px;text-align:left;color:#82798b;margin-bottom:8px}.nav.active{background:#e0d8e8;color:#5e4b74}.nav b{margin-left:auto;font-size:10px;font-weight:400}.side-note{margin-top:auto;padding:70px 12px 25px}.side-note>span{font-size:8px;letter-spacing:1px}.side-note p{line-height:2;font-size:18px;font-family:Georgia,serif}.flower{font-size:70px;font-weight:400;color:#a79ab5;line-height:1.3}.settings{margin-top:15px}.layout{margin-left:235px}header{height:91px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:0 50px}.breadcrumb{color:#8e8893;font-size:12px}.breadcrumb span{padding:0 16px;color:#c5bec9}.header-right{display:flex;gap:24px;align-items:center}.header-right button{font-size:23px;color:#8a8192}.avatar{background:#e2dce7;width:33px;height:33px;display:grid;place-items:center;border-radius:50%;font-family:Georgia,serif}.mobile-brand{display:none}main{max-width:1270px;margin:auto;padding:40px 50px 20px}.intro{display:flex;align-items:center;justify-content:space-between;margin-bottom:33px}.eyebrow{font-size:10px;letter-spacing:2px;color:#91839f}h1{font-size:28px;font-weight:500;letter-spacing:1px;margin:14px 0}.intro p{font-size:12px;color:var(--muted);margin:0}.today{display:flex;align-items:center;gap:12px}.today strong{font-family:Georgia,serif;font-size:40px;font-weight:400;color:var(--purple)}.today span{font-size:11px}.today small{display:block;color:var(--muted);margin-top:6px}.study-layout{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:28px}.study{border:1px solid var(--line);border-radius:18px;background:var(--paper);overflow:hidden;box-shadow:0 6px 24px #38214403}.study-top{display:flex;align-items:center;justify-content:space-between;padding:20px 27px}.theme-select{background:var(--lav);border-radius:6px;color:var(--purple);padding:7px 12px;font-size:11px}.study-top>span{font-size:10px;color:var(--muted);letter-spacing:1px}.study-top>button:last-child{font-size:24px;color:var(--purple)}.steps{display:grid;grid-template-columns:repeat(4,1fr);padding:0 25px;border-bottom:1px solid var(--line)}.steps button{padding:15px 0 17px;color:#a59caa;font-size:12px;border-bottom:2px solid transparent}.steps b{font-size:9px;margin-right:7px;font-weight:400}.steps button.selected{color:var(--purple);border-bottom-color:var(--purple)}#stage{min-height:415px;padding:32px 35px 28px;display:flex;flex-direction:column;align-items:center;text-align:center}.stage-label{color:#9a8ca8;font-size:10px;letter-spacing:2px;margin:0 0 14px}.word{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(35px,4.4vw,59px);margin:12px 0 13px;overflow-wrap:anywhere;max-width:100%}.ipa{color:#9a919f;font-size:14px;letter-spacing:1px}.meaning{font-size:23px;margin:22px 0 10px;font-weight:400}.pos{font-family:Georgia,serif;font-size:12px;color:var(--muted)}.speaker{width:69px;height:69px;border-radius:50%;background:var(--lav);color:var(--purple);font-size:22px;display:grid;place-items:center;margin:23px 0 13px}.speaker.playing{animation:pulse 1.6s infinite}.repeat-text{font-size:11px;color:var(--muted)}.dots{display:flex;gap:8px;justify-content:center;margin:15px 0 22px}.dots i{width:7px;height:7px;border-radius:50%;background:#e6e0eb}.dots i.filled{background:#8b769f}.primary{border-radius:9px;background:var(--purple);color:white;padding:13px 24px;min-width:180px;font-size:12px}.secondary{border-radius:8px;border:1px solid var(--line);padding:11px 18px;color:var(--purple);font-size:12px}.hint{color:var(--muted);font-size:11px;line-height:1.8;margin:12px 0}.study-bottom{border-top:1px solid var(--line);padding:19px 25px;display:flex;justify-content:space-between;align-items:center}.text-btn{font-size:11px;color:var(--purple);padding:4px}.study-bottom>span{font-size:10px;color:#aaa1af}.routine{padding:24px 20px;border:1px solid var(--line);border-radius:12px;background:#f0edf2}.routine .eyebrow{font-size:8px;letter-spacing:1.4px}.routine h2{font-size:17px;font-weight:500;margin:12px 0 25px}ol{padding:0;list-style:none;margin:0}li{display:flex;gap:12px;margin:0 0 23px}li:last-child{margin:0}li i{font-size:10px;font-style:normal;color:#9b8ca8;padding-top:3px}li strong{font-weight:400;font-size:12px}li p{font-size:10px;line-height:1.7;color:var(--muted);margin:6px 0 0}.progress-card{padding:24px 20px;border:1px solid var(--line);border-radius:12px;margin-top:18px;background:#f9f8f5}.progress-card>div{display:flex;justify-content:space-between;font-size:10px}progress{width:100%;height:4px;accent-color:var(--purple);margin:14px 0}progress::-webkit-progress-bar{background:#e9e3ed;border-radius:5px}progress::-webkit-progress-value{background:var(--purple);border-radius:5px}.progress-card p{font-size:12px;line-height:1.9;color:#918793;margin:2px 0 15px}.voice-note{font-size:10px;color:#a29aa8;line-height:1.8;padding:0 5px}footer{text-align:center;color:#aaa1af;font-size:8px;letter-spacing:2px;padding:30px 0 0}footer button{display:none}.chunks{color:var(--purple)}.chunks span{display:inline-block}.chunks em{font-style:normal;color:#ccc0d4;font-size:.6em;margin:0 4px}.sound-block{background:#f4f1f6;border-radius:10px;padding:11px 16px;width:100%;margin:10px 0 17px;font-size:12px;line-height:1.8}.sound-block small{color:var(--muted);display:block;font-size:10px}.sound-block button{font-family:Georgia,serif;color:var(--purple);font-size:16px}.sentence{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;max-width:100%;margin:24px 0}.sentence button{background:var(--lav);border-radius:8px;padding:15px 13px;line-height:1.6;font-family:Georgia,serif;font-size:21px}.sentence button:nth-child(2){background:#e8eee8}.sentence button:nth-child(3){background:#f5eadd}.sentence small{display:block;font:10px Arial,sans-serif;color:#93859d;margin-top:9px}.translation{font-size:15px;line-height:1.8;margin:0 0 20px}.actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.spell-input{width:100%;max-width:340px;border:0;border-bottom:2px solid #b7a4c8;background:transparent;text-align:center;letter-spacing:4px;font-family:Georgia,serif;font-size:32px;padding:12px 2px;outline:none;margin:15px 0}.accent-keys{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:12px 0}.accent-keys button{background:#f0ebf4;border-radius:5px;padding:6px 10px;color:var(--purple)}#feedback{min-height:25px;font-size:12px;margin:10px 0;line-height:1.8}.success{color:var(--green)}.error{color:#a15e5c}dialog{border:1px solid var(--line);border-radius:17px;max-width:560px;width:calc(100% - 30px);max-height:85vh;padding:25px;background:var(--paper);color:var(--dark)}dialog::backdrop{background:#30273c66;backdrop-filter:blur(4px)}.dialog-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.dialog-top h2{font-size:20px;font-weight:500;margin:0}.dialog-top button{font-size:20px}.filters{display:flex;flex-wrap:wrap;gap:8px;margin:15px 0}.filters button{padding:8px 12px;background:var(--lav);border-radius:7px;font-size:12px}.filters button.on{background:var(--purple);color:white}.search{padding:12px;width:100%;border:1px solid var(--line);border-radius:8px;background:#faf9fb}.word-row{display:flex;justify-content:space-between;text-align:left;padding:13px 4px;border-bottom:1px solid var(--line);width:100%}.word-row strong{font:20px Georgia,serif}.word-row small{display:block;color:var(--muted);font-size:11px;margin-top:5px}.word-row>span:last-child{color:var(--purple);font-size:12px;padding-top:6px}.setting-row{display:block;margin:22px 0;font-size:13px}.setting-row select{display:block;margin-top:9px;width:100%;padding:10px;border:1px solid var(--line);border-radius:6px;background:white}.setting-row input{vertical-align:middle}.settings-copy{font-size:12px;line-height:1.9;color:var(--muted)}#toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:var(--dark);color:white;border-radius:9px;padding:13px 20px;font-size:12px;z-index:20;display:none;max-width:90vw}.complete{font-size:42px;color:var(--green);margin:10px} @keyframes pulse{50%{box-shadow:0 0 0 10px #eee9f355}}@media(min-width:1500px){main{padding-top:55px}.study-layout{grid-template-columns:minmax(0,1fr) 265px}#stage{min-height:470px}}@media(max-width:1100px){.sidebar{width:195px;padding:32px 18px}.layout{margin-left:195px}main{padding:30px 28px}.study-layout{gap:18px;grid-template-columns:minmax(0,1fr) 210px}header{padding:0 28px}.intro h1{font-size:23px}.routine{padding:22px 16px}.brand{font-size:18px}.brand img{width:35px}}@media(max-width:850px){.right{display:none}.study-layout{grid-template-columns:1fr}}@media(max-width:600px){.sidebar{display:none}.layout{margin:0}header{height:67px;padding:0 22px}.breadcrumb{display:none}.mobile-brand{display:block;font-size:17px;color:var(--purple)}main{padding:25px 16px 20px}.intro{margin-bottom:24px;gap:12px}.eyebrow{font-size:8px}.intro h1{font-size:20px;letter-spacing:0;margin:11px 0}.intro p{font-size:10px;line-height:1.7}.today{gap:7px}.today strong{font-size:30px}.today span{font-size:9px;white-space:nowrap}.today small{margin-top:4px}.study-top{padding:17px 21px}.steps{padding:0 16px}.steps button{font-size:12px}.steps b{font-size:8px;margin-right:5px}#stage{padding:29px 20px 24px;min-height:390px}.word{font-size:48px}.study-bottom{padding:16px}.study-bottom>span{font-size:9px}.study-bottom .text-btn{font-size:10px}.sentence button{font-size:20px;padding:13px 10px}.sentence{margin:16px 0}.sentence small{font-size:9px}.translation{font-size:14px}footer{letter-spacing:1px;line-height:2.5;padding:19px 0}footer button{display:inline-block;font-size:11px;color:var(--purple);letter-spacing:0;margin-left:10px}.sound-block{font-size:11px}dialog{padding:21px}.primary{min-width:150px}.header-right{gap:18px}}

/* The front card enters only when its matching utterance starts. */
.flashcard-stack{position:relative;width:min(100%,440px);height:235px;margin:14px 0 26px;isolation:isolate}.listen-card{position:absolute;inset:0 12px 0;border:1px solid #e6dece;border-radius:15px;background:#fff9eb;box-shadow:0 8px 22px #5944650b;transform:translate(calc(var(--depth)*-6px),calc(var(--depth)*-7px)) rotate(calc(var(--depth)*-1.3deg));display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px}.listen-card .word{font-size:clamp(37px,4.5vw,57px);margin:14px 0 13px}.card-meta{position:absolute;inset:18px 19px auto;display:flex;justify-content:space-between;font-size:8px;letter-spacing:2px;color:#a292ac}.card-wave{display:flex;align-items:center;gap:4px;height:19px;margin-top:17px}.card-wave i{width:3px;height:7px;border-radius:4px;background:#b8a7c8}.card-wave i:nth-child(2),.card-wave i:nth-child(4){height:12px}.card-wave i:nth-child(3){height:18px}.card-wave.is-speaking i{animation:voice-wave .7s ease-in-out infinite alternate}.card-wave i:nth-child(2){animation-delay:.1s}.card-wave i:nth-child(3){animation-delay:.2s}.card-wave i:nth-child(4){animation-delay:.3s}.card-enter{animation:card-appear .45s cubic-bezier(.2,.7,.2,1) both}@keyframes card-appear{from{opacity:0;transform:translate(32px,25px) rotate(6deg) scale(.96)}to{opacity:1;transform:translate(0,0) rotate(0) scale(1)}}@keyframes voice-wave{to{transform:scaleY(.4)}}@media(max-width:600px){.flashcard-stack{height:225px;margin:18px 0 25px}.listen-card{inset:0 5px}.listen-card .word{font-size:47px}#stage:has(.flashcard-stack){padding:28px 21px 18px;min-height:460px}}@media(prefers-reduced-motion:reduce){.card-enter,.card-wave.is-speaking i{animation:none}}

.auth-wall[hidden]{display:none}.locked>.sidebar,.locked>.layout{display:none}.auth-wall{min-height:100dvh;display:grid;grid-template-columns:1fr 1fr;background:#f7f5f8}.login-card{width:min(100%,500px);padding:65px 60px;margin:auto}.login-card>.eyebrow{margin-top:58px}.login-card h1{font-family:Georgia,serif;line-height:1.8;font-size:31px;margin:18px 0}.login-card label{display:block;font-size:12px;margin:21px 0;color:#74677f}.login-card input{display:block;width:100%;border:1px solid #ded6e6;border-radius:9px;background:#fffefa;padding:14px;margin-top:9px}.login-card .primary{width:100%;margin-top:3px}.login-card form p{font-size:11px;min-height:30px}.teacher-link{font-size:12px;color:var(--purple)}.login-art{background:#e9e2ef;display:flex;flex-direction:column;justify-content:center;padding:10%;color:#716187}.login-art>span{font-size:150px;line-height:1}.login-art p{font:48px/1.5 Georgia,serif}.login-art small{font-size:12px;letter-spacing:2px}.cloud-status{display:flex;gap:20px;align-items:center;font-size:11px;color:#82738f;padding:0 3px 17px;flex-wrap:wrap}.cloud-status>span:last-child{margin-left:auto;color:#869389;font-size:10px}.rating-title{font-size:11px;color:var(--muted);margin:5px 0 13px}@media(max-width:600px){.auth-wall{display:block}.login-card{padding:40px 32px}.login-art{display:none}.cloud-status{font-size:10px;gap:9px}.cloud-status>span:last-child{width:100%;margin:0}.login-card h1{font-size:29px}.login-card>.eyebrow{margin-top:45px}.actions .primary{min-width:130px}.rating-title{margin-top:0}}

.syllable-0{color:#be4e58}.syllable-1{color:#337b5f}.syllable-2{color:#8253a6}.listen-card .word{word-spacing:0;letter-spacing:-1px}.syllable{display:inline!important}.color-key{font-size:10px;color:var(--muted);line-height:1.8}

.header-right button.text-btn{font-size:11px}.sentence-part{background:#eee9f3;border-radius:10px;padding:15px 14px;text-align:center}.sentence-part:nth-of-type(2){background:#e7eee7}.sentence-part:nth-of-type(3){background:#f5eadf}.sentence .sentence-word{background:none!important;padding:0 1px;margin:0;border-radius:3px;font:inherit;color:inherit;border-bottom:1px dotted #b4a1c3;line-height:1.6}.sentence .sentence-word:hover,.sentence .sentence-word:focus-visible{background:#ffffff99!important;color:#716187}.sentence-tokens{font:23px/1.6 Georgia,serif}.sentence .chunk-audio{background:transparent!important;font:10px/1.6 Arial,sans-serif;color:#91829d;display:block;margin:8px auto 0;padding:2px 0}.sentence-divider{align-self:center;color:#c9bfce}@media(max-width:600px){.sentence-part{padding:12px 11px}.sentence-tokens{font-size:23px}.actions .primary{font-size:11px;padding:13px 15px}}

#feedback{width:100%;max-width:390px;text-align:left;min-height:26px}.spell-message{font-size:12px;line-height:1.9;padding:8px 12px;margin:6px 0;border-radius:7px;background:#f5f1f7}.spell-message.error{background:#fff0ee;color:#a04145}.spell-message.success,.spell-message.saved{color:#45755b;background:#eff5ef}.spell-message.hint-box{background:#f2edf8;color:#6d537e}.book-series h3,#bookSelection h3{font-size:13px;font-weight:500;margin:21px 0 12px}.book-volumes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.book-choice{border:1px solid var(--line);background:#f8f6fa;border-radius:9px;padding:13px 11px;text-align:left;font-size:12px}.book-choice small{display:block;font-size:9px;color:var(--muted);margin-top:8px;line-height:1.5}.book-choice.chosen{border-color:var(--purple);background:#eae2f0;color:var(--purple)}#bookSelection{margin-top:22px;padding-top:4px;border-top:1px solid var(--line)}#bookSelection .primary{margin-bottom:18px}.unit-label{display:block;font-size:12px;color:var(--muted);margin:15px 0}.unit-label select{display:block;width:100%;border:1px solid var(--line);background:white;border-radius:7px;padding:11px;margin:8px 0 17px}.pending-book{font-size:12px;color:#95849e;line-height:1.9;padding:14px;background:#f3eef6;border-radius:8px}.theme-select{max-width:185px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media(max-width:420px){.book-volumes{grid-template-columns:repeat(2,1fr)}.book-choice small{font-size:10px}}

.sense-meanings{width:100%;margin:18px 0 5px;display:flex;flex-direction:column;gap:9px}.sense-meaning{background:#f5f1f7;border:1px solid #ebe4f0;border-radius:9px;padding:12px 16px;text-align:left}.sense-meaning strong{display:block;font-size:18px;font-weight:400;line-height:1.6;margin-top:6px}.pos-badge{display:inline-block;font-size:10px;color:#80668f;background:#ece3f3;padding:5px 8px;border-radius:5px;line-height:1.5}.sense-examples{width:100%}.sense-example{width:100%;border:1px solid #e9e2ee;border-radius:12px;padding:17px 15px;margin:16px 0;text-align:left;background:#fcfafc}.sense-title{display:flex;gap:9px;flex-wrap:wrap;align-items:center;font-size:13px;line-height:1.7}.sense-example-item{text-align:center;padding-top:3px}.sense-example-item+.sense-example-item{border-top:1px dashed #e7deeb;margin-top:15px;padding-top:15px}.sense-example .sentence{margin:17px 0 13px}.sense-example .translation{font-size:13px;margin-bottom:14px}.sense-example .sentence-tokens{font-size:21px}.sense-example .sentence-part{padding:11px}.sense-example .secondary{font-size:11px;padding:9px 15px}@media(max-width:600px){.sense-example{padding:13px 10px}.sense-title{font-size:12px}.sense-example .sentence-tokens{font-size:20px}.sense-example .sentence-part{padding:10px 8px}.sense-meaning strong{font-size:17px}}

.word.long-word,.listen-card .word.long-word{font-size:clamp(22px,4vw,34px);line-height:1.35;overflow-wrap:normal;word-break:normal}.word.long-word em{font-size:.65em}

.example-save{margin:10px 0 0 auto;display:flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:8px;padding:7px 9px;color:var(--purple);font-size:11px}.example-save svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}.example-save.saved{background:var(--lav)}.example-save.saved svg{fill:currentColor}.saved-folder{display:block;margin:0 auto 8px}.saved-example-card{border:1px solid var(--line);border-radius:12px;padding:17px;margin:13px 0;background:#fffefb}.saved-example-card p{font-size:13px;line-height:1.8}.saved-example-card .saved-sentence{font:22px/1.6 Georgia,serif;color:var(--dark)}

.stage-speech{margin:8px 0 14px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}.stage-speech .hint{margin:0;font-size:11px}.stage-speech .secondary{min-width:120px;padding:9px 14px}

.daily-quiz-entry{margin-top:15px}.quiz-summary{text-align:center;padding:10px 0}.quiz-summary .primary,.quiz-summary .secondary,.quiz-summary>.text-btn{display:block;margin:16px auto}.quiz-position{color:var(--muted);font-size:12px}.quiz-progress{width:100%;height:6px;margin:0 0 26px}.quiz-meaning{font-size:25px;line-height:1.6;font-weight:400;text-align:center;margin-top:15px}.quiz-score{font:64px Georgia,serif;color:var(--purple);margin:16px 0}.quiz-score small{font:14px Arial,sans-serif;margin-left:6px}.quiz-answer{font:37px/1.5 Georgia,serif;overflow-wrap:anywhere}.quiz-feedback{padding:20px 14px;margin:15px 0 22px;border-radius:12px;text-align:center;background:#f4f1f7}.quiz-feedback.error{background:#faf0ee}.quiz-feedback.success{background:#eff5ee}.quiz-wrong{border:1px solid var(--line);padding:15px;border-radius:10px;margin:12px 0;display:grid;gap:8px}.quiz-wrong strong{font:24px Georgia,serif}.quiz-wrong small{color:var(--muted)}#dailyQuizForm{text-align:center;margin-top:23px}#dailyQuizForm>.text-btn{display:block;margin:15px auto}#dailyQuizError{font-size:12px;min-height:16px}

.dialog-top form{margin:0}.dialog-top form button{min-width:44px;min-height:44px}

.listen-actions{width:min(100%,440px);display:flex;gap:12px;margin-top:20px}.listen-actions>button{flex:1;min-width:0;min-height:50px;padding:14px 12px;font-size:16px}.listen-actions #meaningNext{flex:1.35}.listen-actions+.hint{margin-top:18px}