/* Eva's warm cartoon island. Shared styles keep every learning activity touchable. */
@font-face{font-family:"Eva Welcome";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/eva-welcome.woff2") format("woff2")}
:root{--ink:#705336;--muted:#947d65;--paper:#fffdf2;--line:#d1bc96;--mint:#e2edce;--mint-deep:#79985d;--lilac:#dce9f2;--peach:#f9e9c7;--pink:#f7dfd4;--yellow:#ffedac;--shadow:0 5px 0 #e1d5b2;--radius:26px}
body{background:#fff8ec;font-family:ui-rounded,"SF Pro Rounded","Hiragino Sans GB","PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:var(--ink)}
body:before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");background-size:180px;opacity:.25}
button:focus-visible,input:focus-visible{outline-color:#658e70}
button:disabled{opacity:.45}
.draw-icon{width:29px;height:29px;flex-shrink:0;vertical-align:middle;stroke-width:2.5}
.topbar{height:96px;max-width:1120px;padding:0 28px}
.brand{gap:15px;line-height:1.5;font-weight:850;min-width:0}
.brand>span{min-width:0}
.brand b{line-height:1.28;display:block;font-size:25px;font-weight:850;letter-spacing:-.4px}
.brand small{display:inline-block;font-size:11px;letter-spacing:.25px;padding:1px 10px;background:#f7e5ad;border-radius:15px;font-weight:500;color:#8e785b;margin-top:6px;white-space:normal}
.brand small i{font-style:normal;padding:0 6px;color:#b69a71}
.fox-logo{flex-shrink:0}
.star-count{display:flex;align-items:center;gap:9px;padding:8px 13px;background:#ffedac;border:2px solid #a08a52;border-radius:15px 20px 16px 22px;box-shadow:0 3px 0 #d8c894;font-size:20px}
.star-count>.draw-icon{width:24px;height:24px;color:#b29351}
.icon-btn{width:44px;height:44px;border:2px solid #bbac88;background:#fffdf0;position:relative;color:#8f7a60}
.icon-btn .draw-icon{width:25px;height:25px;stroke-width:1.9}
.muted-sound:after{content:"";position:absolute;height:2px;width:27px;rotate:-45deg;background:#a06d5b}
.main-nav{background:#fffaf0;border:2px solid #c6b88f;border-radius:23px 17px 22px 19px;box-shadow:0 4px 0 #e0d3ac;gap:4px;margin-bottom:27px;padding:5px}
.main-nav button{color:#8e7d65;font-size:14px;font-weight:750;border-radius:16px;min-height:53px;gap:10px}
.main-nav button.active{background:#cddfb8;color:#617b4d;box-shadow:0 2px 0 #aebf98}
.main-nav .draw-icon{width:25px;height:25px;stroke-width:2.7}
.welcome{background:#fff8ec;border:2px solid #c5a672;border-radius:29px 24px 30px 23px;box-shadow:0 5px 0 #e0c595;grid-template-columns:.85fr 1.1fr;padding:29px 33px;min-height:340px;align-items:center;gap:22px;overflow:visible}
.welcome-copy{font-family:"Eva Welcome",ui-rounded,"PingFang SC","Microsoft YaHei",sans-serif;font-weight:400}
.greeting{display:inline-block;background:#fff7df;border:1.5px solid #e2c68e;color:#977c51;padding:4px 12px;border-radius:13px;rotate:-2deg;font-size:14px}
.welcome h1{font-size:43px;font-weight:400;letter-spacing:.2px;margin:17px 0 15px;line-height:1.3}
.welcome h1 em{font-style:normal;color:#bd7050}
.welcome p{font-size:16px;font-weight:400;line-height:1.9;color:#967d5e;margin:0}
.hero-label{display:block;font-size:13px;font-weight:400;background:#fff8e780;width:fit-content;padding:3px 11px;border-radius:16px;margin-top:23px;color:#99805d}
.hero-picture{position:relative;display:block;padding:0;min-width:0;width:100%;touch-action:manipulation;border-radius:24px}
.hero-picture img{display:block;width:100%;height:auto;max-height:326px;object-fit:contain;mix-blend-mode:normal;border-radius:20px}
.art-spark{position:absolute;color:#d2ab48;font-size:34px;right:-2%;top:4%;rotate:13deg}
.section-heading{margin:26px 3px 17px}
.section-heading h2{font-size:21px}
.section-heading h2>span{color:#bf9765}
.section-heading>span{font-size:12px;color:#947f63}
.hand-note{font-family:"Kaiti SC","KaiTi",serif;rotate:-3deg;letter-spacing:.5px}
.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.plan-card{display:flex;align-items:center;gap:17px;position:relative;text-align:left;background:#f9d7bd;border:2px solid #bf8f69;box-shadow:0 5px 0 #e3bba2;border-radius:24px 19px 26px 22px;padding:20px 23px;min-height:137px}
.plan-card.sentences{background:#d9eaf0;border-color:#87a4b1;box-shadow:0 5px 0 #b5cdd6}
.plan-card>div{min-width:0}
.plan-illustration{width:58px;height:62px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:2px solid #ddb195;background:#fff2dd;border-radius:15px 21px 15px 22px;rotate:-6deg}
.plan-illustration .draw-icon{width:37px;height:37px;color:#a5744c;stroke-width:2.6}
.sentences .plan-illustration{border-color:#a9c5cc;background:#f7faf3}
.sentences .plan-illustration .draw-icon{color:#7a98a0}
.plan-kicker{font-size:11px;color:#947b63;letter-spacing:.5px}
.plan-card h3{font-size:25px;font-weight:800;margin-top:4px}
.plan-card p{font-size:12px;color:#8f775d;margin-top:6px;line-height:1.5}
.plan-side{margin-left:auto;flex-shrink:0;text-align:center}
.plan-side>b{display:block;font-size:29px;font-weight:800;line-height:1.3}
.plan-side b small{font-size:13px;margin-left:4px;font-weight:500;color:#907c64}
.plan-side>span{display:inline-block;margin-top:9px;font-size:12px;font-weight:650;padding:4px 10px;border:1.5px solid #c59a76;box-shadow:0 2px 0 #d3aa89;background:#fff4df;border-radius:12px}
.sentences .plan-side>span{border-color:#a9bfbd;box-shadow:0 2px 0 #adc7cd;background:#f7fbf3}
.learning-summary{border:2px solid #c8b98c;border-radius:25px 20px 29px 23px;background:#fffdf2;box-shadow:0 4px 0 #e1d5b2;padding:20px 25px 18px;margin-top:28px}
.summary-heading h2{display:flex;align-items:center;gap:9px;font-size:21px}
.summary-heading .draw-icon{width:22px;height:22px;color:#8a9c6e;stroke-width:1.8}
.summary-heading .text-btn{font-size:12px;font-weight:500;color:#947d65}
.stats{padding:19px 0 24px}
.stats>div{grid-template-columns:49px auto;grid-template-rows:40px 23px;column-gap:14px}
.stat-icon{border:1.5px solid #dccea5;background:#faeccb;box-shadow:0 2px 0 #e0cdae;border-radius:14px 17px 12px 18px;rotate:-5deg}
.stat-icon.pink{background:#f8ded4;border-color:#d6b6a5}
.stat-icon.mint{background:#e3edcd;border-color:#c4d5a2}
.stat-icon .draw-icon{stroke-width:2.4;width:30px;height:30px}
.stats b{font-size:33px;font-weight:850}
.stats>div>span:last-child{font-size:11px;color:#8e7d64}
.progress-track{height:11px;border:1.5px solid #cfcaab;background:#f4ecd8}
.progress-track>span{background:#b6cc95}
.learning-summary>.tiny{font-size:12px;color:#937e63;margin-top:15px}
.more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.more-card{display:flex;align-items:center;gap:17px;text-align:left;position:relative;padding:23px 23px;min-height:104px;background:#dce9f2;border:2px solid #afc4d0;border-radius:21px 17px 24px 20px;box-shadow:0 4px 0 #b7cbd355}
.more-card.write{background:#f7dfd4;border-color:#dcb8a5;box-shadow:0 4px 0 #d8b09c55}
.more-card.review{background:#f2ecc4;border-color:#d0c799;box-shadow:0 4px 0 #cfbf7c55}
.more-card>span{width:30px;flex-shrink:0}
.more-card h3{font-size:20px;font-weight:800}
.more-card p{font-size:11px;color:#907b62;margin-top:6px;line-height:1.7}
.more-card>b{position:absolute;right:13px;top:11px;font-size:18px;color:#9b8c71;font-weight:500}
footer{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;color:#937c5d;font-size:12px;padding:28px 20px 35px}
footer>.draw-icon{width:21px;height:21px;stroke-width:1.7}
footer>.save-warning{width:100%}
.btn.primary{background:#8cac7a;border:2px solid #739459;box-shadow:0 4px 0 #688454;color:#fffdf1}
.btn.soft,.small-btn{border:2px solid #cbb58f;background:#fffdf2;box-shadow:0 3px 0 #e5d7b9}
.text-btn{color:#8d7354}
.panel,.mode-card,.story-card{border-width:2px;border-color:#cbb994;border-radius:25px 20px 28px 23px;box-shadow:0 4px 0 #e1d5b2}
.mode-card{padding:29px 25px;background:#f7dfd4;border-color:#cfac95}
.mode-card.mint{background:#e2edce;border-color:#b5c696}
.mode-card.lilac{background:#dce9f2;border-color:#adc1ca}
.mode-card b{border:1.5px solid #cbb58f;border-radius:13px;background:#fff7e4}
.page-title .title-icon{border:2px solid #cbb994;background:#fff2d1;border-radius:19px 24px 18px 23px;rotate:-4deg;box-shadow:0 3px 0 #ddcca8}
.page-title h1{color:#705336}
.word-game{background:#fffdf2}
.question-label{color:#927b5a}
.streak{border-color:#c3cfa7;background:#edf2df;color:#7b8d5e}
.game-progress{background:#eee3c6}
.game-progress>span{background:#b3c78d}
.letter-slot{border:2px solid #d1b58b;background:#faedc9;box-shadow:0 3px 0 #ddc6a0;border-radius:12px 15px 11px 14px;color:#8d6c45}
.letter-slot.filled{color:#705336;background:#f8e7bf}
.letter-tile{border:2px solid #c6ad91;background:#ecddce;box-shadow:0 4px 0 #c4aa8b;border-radius:14px 17px 12px 15px;font-weight:750;min-width:48px;min-height:56px}
.letter-tile:nth-child(3n){background:#dfe7cf;border-color:#b0bf94;box-shadow:0 4px 0 #a8b98b}
.letter-tile:nth-child(3n+1){background:#e4dfed;border-color:#c1b3cd;box-shadow:0 4px 0 #b7a7c5}
.letter-tile:disabled{opacity:.28;box-shadow:none}
.answer-option{border:2px solid #d2ba97;background:#fcf1dc;box-shadow:0 3px 0 #e5d6b5;border-radius:17px 20px 16px 21px}
.answer-option:nth-child(2n){background:#edf2e3;border-color:#c1cba7}
.answer-option.right{background:#dfebcc;border-color:#8daa6e;color:#4e6935;box-shadow:0 3px 0 #bdd29d;opacity:1}
.answer-option.wrong{background:#f7dfd4;border-color:#cc9b83;color:#9c5e3c;opacity:1}
.answer-option .option-letter{background:#fff9e7;color:#9f835d;border:1px solid #d4bd93}
.feedback.good{background:#edf3df;border-color:#b8ca98;color:#587b3e}
.feedback.gentle,.hint-note{background:#fff0d2;border-color:#dec498;color:#977647}
.sentence-prompt,.sentence-slots{background:#faf0d8;border:2px dashed #d6c19c;border-radius:18px 22px 19px 24px;color:#705336}
.word-block{border:2px solid #b3c398;background:#e4edcf;box-shadow:0 4px 0 #b9c997;border-radius:13px 17px 12px 15px;color:#6f8450}
.word-block:nth-child(3n){background:#f7dfd4;border-color:#d5ad94;box-shadow:0 4px 0 #d2aa8b;color:#9b7253}
.sentence-slots .word-block{background:#fae9c7;border-color:#cfb487;box-shadow:0 3px 0 #dec39a;color:#856941}
.segmented{background:#f5edda;border-color:#d0bd99}
.segmented>button.selected,.writing-topics button.selected{background:#dfeacc;border-color:#aabd8b;color:#66814c;box-shadow:0 3px 0 #c1d1a7}
.writing-topics button{border:2px solid #d8c3a2;background:#fff9e9;color:#8e795d}
.phrase-options button.selected{background:#dce9f2;border-color:#9fbbc7;box-shadow:0 3px 0 #abc2cb;color:#607f8e}
.writing-line p strong{color:#698995}
.writing-line{background:#fcf2de;border:1.5px solid #dbc9a9}
.story-paper{border:2px solid #d3bb91;border-radius:20px 25px 19px 24px}
.inline-word,.word-detail h3{color:#947747}
.story-cover{background:#fff0c9}
.story-card:nth-child(3n+2) .story-cover{background:#e3edcf}
.story-card:nth-child(3n) .story-cover{background:#f7dfd4}
.island-dialog{border:3px solid #b2946e;border-radius:26px 22px 28px 23px;background:#fffaf0;box-shadow:0 10px 0 #71583622}
.island-dialog::backdrop{background:#66503e55;backdrop-filter:blur(3px)}
.word-detail blockquote,.rules{background:#faf0d8}
.celebrate-card{background:#fffaf0f2;border:2px solid #d9be95;border-radius:25px 21px 27px 22px;box-shadow:0 6px 0 #bfa77d33;color:#705336}
.celebrate-card>svg{animation:fox-hop .55s ease 2}
@keyframes fox-hop{50%{translate:0 -13px;rotate:5deg}}
#toast{background:#74614e;color:#fff9e7}
@media(hover:hover){.plan-card:hover,.more-card:hover{translate:0 -2px}}
@media(max-width:900px){
  .topbar{height:92px;padding:0 23px}.brand b{font-size:22px}.brand small{font-size:10px}.top-tools{gap:9px}
  .main-nav button{font-size:13px;gap:7px}.main-nav .draw-icon{width:23px;height:23px}
  .welcome{padding:25px;gap:15px}.welcome h1{font-size:38px}.welcome p{font-size:15px}.hero-picture img{max-height:300px}
  .plan-card{padding:19px 17px;gap:13px}.plan-card h3{font-size:22px}.plan-illustration{width:49px;height:57px}
  .plan-side>b{font-size:27px}.plan-side>span{font-size:11px;padding:4px 8px}.more-card{padding:22px 17px;gap:12px}.more-card h3{font-size:18px}
}
@media(max-width:700px){
  .topbar{height:98px;padding:0 17px;gap:10px}.brand{gap:8px}.brand>svg{width:39px;height:39px}.brand b{font-size:19px}.brand small{font-size:9px;letter-spacing:0;padding:1px 7px}.brand small i{padding:0 3px}
  .top-tools{gap:6px}.star-count{padding:6px 8px;font-size:15px;gap:5px}.star-count .draw-icon{width:19px;height:19px}.top-tools .icon-btn{width:44px;height:44px}.top-tools .icon-btn .draw-icon{width:23px;height:23px}
  .main-nav{position:static;margin:0 16px 22px;padding:4px;gap:1px;z-index:auto;border:2px solid #c6b88f;border-radius:23px 17px 22px 19px;box-shadow:0 4px 0 #e0d3ac;background:#fffaf0}
  .main-nav button{flex-direction:column;white-space:normal;font-size:11px;min-height:62px;line-height:1.4;gap:4px;padding:7px 2px}.main-nav .draw-icon{width:24px;height:24px}
  main{margin:0 16px;padding-bottom:10px}.welcome{grid-template-columns:1fr;padding:24px 23px 12px;gap:13px;min-height:0}
  .welcome h1{font-size:38px;line-height:1.34;margin:13px 0}.welcome h1>br:first-of-type{display:block}.welcome p{font-size:15px}.greeting{font-size:13px}.hero-label{margin-top:14px;font-size:12px}.hero-picture{margin:0 auto;max-width:390px}.hero-picture img{max-height:260px}.art-spark{font-size:27px;right:0}
  .section-heading h2{font-size:19px}.section-heading>span{font-size:11px}.plan-grid{grid-template-columns:1fr;gap:18px}
  .plan-card{padding:20px;min-height:124px;gap:15px}.plan-card h3{font-size:25px}.plan-illustration{width:53px;height:58px}.plan-kicker{font-size:11px}.plan-side>b{font-size:27px}.plan-side>span{font-size:12px;padding:4px 9px}
  .learning-summary{padding:19px 16px 18px}.summary-heading h2{font-size:18px;gap:5px}.summary-heading .draw-icon{width:18px;height:18px}.summary-heading .text-btn{font-size:11px;min-height:44px;padding:4px 1px}
  .stats{padding:14px 0 21px;gap:8px}.stats>div{grid-template-columns:1fr;grid-template-rows:45px 38px 22px;justify-items:center;column-gap:0;row-gap:8px}.stat-icon{width:43px;height:45px;grid-row:auto}.stat-icon .draw-icon{width:27px;height:27px}.stats b{font-size:30px}.stats>div+div:before{top:52px;height:42px}.stats>div>span:last-child{font-size:11px}.learning-summary>.tiny{font-size:11px;line-height:1.8}
  .more-grid{grid-template-columns:1fr;gap:17px}.more-card{padding:23px 25px;gap:20px;min-height:100px}.more-card h3{font-size:22px}.more-card p{font-size:12px}.more-card>b{right:21px;top:34px}
  .mode-card{padding:22px 22px 22px 94px}.word-game{padding:22px 17px 27px}.letter-slot{min-width:44px;min-height:51px}.letter-bank .letter-tile{min-width:48px;min-height:56px}.word-block{min-height:51px}
  footer{padding:22px 20px 32px;font-size:11px}#toast{bottom:22px;font-size:13px;min-width:0;width:max-content}
}
@media(max-width:430px){
  .brand b{font-size:17px}.brand small{font-size:8px;max-width:160px}.brand>svg{width:34px;height:34px}.topbar{gap:7px;padding:0 14px}.top-tools{gap:4px}.star-count{padding:5px 7px;font-size:14px}.star-count>.draw-icon{display:none}
  .top-tools .icon-btn{width:44px;height:44px}.plan-card{padding:19px 16px;gap:12px}.plan-illustration{width:45px;height:53px}.plan-illustration .draw-icon{width:30px;height:30px}.plan-card h3{font-size:22px}.plan-side>span{font-size:11px;padding:4px 8px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

@media(max-width:700px){.brand small .brand-english,.brand small i{display:none}}

.sun-logo{flex-shrink:0}.hero-picture img{background:transparent}
.mastery-count{padding:4px 10px;border:1px solid #c7d7af;background:#eef3df;border-radius:15px;color:#6b8551;white-space:nowrap;font-size:13px}
.type-progress{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:15px 0 4px;font-size:13px}
.type-progress>span{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:1.5px dashed #d1bc96;background:#fff8ec;border-radius:14px;color:#947d65;line-height:1.5}
.type-progress>span.passed{border:1.5px solid #a8c28e;background:#e8f0d9;color:#638147}
.type-progress b{font-size:16px;line-height:1;font-weight:700}
.dictionary-word .word-status{display:flex;align-items:center;flex-direction:column;justify-content:center;gap:2px}
.dictionary-word .word-status small{font-size:12px;line-height:1.3;color:#947d65}
@media(max-width:700px){.type-progress{gap:6px;font-size:12px}.type-progress>span{padding:5px 9px}.mastery-count{font-size:12px}}

/* Keep retrying optional, and tuck familiar clues away without losing their history. */
.skip-word{margin:24px auto 0;text-align:center;max-width:620px}
.skip-word .next-btn{margin:0 auto}.skip-word .tiny{line-height:1.8}
.familiar-records{margin-top:22px;padding:16px 22px}
.familiar-records>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;cursor:pointer;font-weight:750;list-style:none}
.familiar-records>summary::-webkit-details-marker{display:none}
.familiar-records>summary:focus-visible{outline:3px solid #8d74ad;outline-offset:4px;border-radius:10px}
.fold-arrow{font-size:25px;transition:transform .15s}
.familiar-records[open] .fold-arrow{transform:rotate(180deg)}
.familiar-records .error-list{margin-top:18px}
@media(max-width:600px){.familiar-records{padding:12px 16px}.familiar-records>summary{font-size:15px}.skip-word .tiny{font-size:12px}}