:root{
 --bg:#fff9f1; --sheet:#fffefb; --ink:#41424b; --muted:#8c8992;
 --peach:#ffd9d1; --pink:#faedf0; --pinkdeep:#dc848c; --lav:#f1eafb;
 --mint:#eaf5ec; --green:#678978; --sage:#dce9da; --yellow:#fff0bf;
 --border:#eee4e0; --shadow:0 13px 36px rgba(90,70,72,.075);
 --radius:23px; --width:1130px;
 font-synthesis:none;
}
*,*:before,*:after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;font-size:15px;min-height:100vh}
button,input,textarea,select{font:inherit}
button{cursor:pointer;transition:transform .16s,background-color .16s,box-shadow .16s}
button:hover:not(:disabled){transform:translateY(-1px)}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #b78ec8;outline-offset:3px}
button:disabled{opacity:.48;cursor:not-allowed}
a{color:#ad6974}
h1,h2,h3,p{margin-top:0}
h1,h2{letter-spacing:-.04em}
p{line-height:1.8}
strong{font-weight:750}
.bg-decoration{position:fixed;z-index:-1;pointer-events:none;opacity:.6;border-radius:50%}
.bg-decoration.one{top:8%;left:-85px;width:260px;height:260px;background:#ffe7d8;filter:blur(13px)}
.bg-decoration.two{bottom:3%;right:-90px;width:280px;height:280px;background:#e3f4df;filter:blur(14px)}
.site-header{max-width:var(--width);margin:auto;padding:24px 28px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.site-mark{display:flex;align-items:center;gap:13px;text-align:left}
.logo-icon{width:49px;height:49px;background:#f9d5cf;border:1px solid #f0c2c2;border-radius:17px;display:grid;place-items:center;font-size:28px;transform:rotate(-7deg);box-shadow:4px 4px #f9e9e6}
.site-name{font-weight:850;letter-spacing:-.035em;font-size:22px;white-space:nowrap}
.site-sub{font-size:12px;color:#a48e97;margin-top:2px}
.header-meta{display:flex;align-items:center;gap:9px}
.date-pill{border-radius:90px;background:var(--sheet);padding:9px 14px;color:#8e7c7f;font-size:12px;border:1px solid var(--border)}
.sparkle{color:#e3a269;font-size:22px}
.tabbar{max-width:var(--width);margin:10px auto 0;padding:0 28px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tab{display:flex;align-items:center;justify-content:center;gap:12px;border-radius:17px 17px 0 0;min-height:65px;border:1px solid var(--border);border-bottom:0;background:#fff9f6;color:#89808a;font-weight:700}
.tab .tab-icon{font-size:24px}
.tab[aria-current="page"]{background:var(--sheet);border-color:#e8dfdc;box-shadow:0 -6px 15px #86696108;color:#b36d7a}
.tab .tiny{display:block;font-weight:450;font-size:11px;margin-top:3px;color:#ad9ca1}
.container{max-width:var(--width);padding:0 28px 65px;margin:0 auto}
.main-frame{padding:34px clamp(17px,4.5vw,53px) 45px;min-height:610px;border:1px solid #ece5e1;background:var(--sheet);border-radius:0 0 28px 28px;box-shadow:var(--shadow)}
.eyebrow{font-size:11px;letter-spacing:.17em;font-weight:850;color:#c88589}
.h1{font-size:clamp(29px,4.6vw,45px);line-height:1.38;font-weight:820;margin:15px 0 16px}
.h2{font-size:clamp(25px,3.5vw,32px);font-weight:800;margin:15px 0 16px}
.h3{font-size:20px;font-weight:800;margin:0 0 12px}
.desc{font-size:14px;color:var(--muted);line-height:1.9}
.sub{color:var(--muted)}.small{font-size:12px}.tiny{font-size:11px}
.divider{height:1px;background:var(--border);margin:26px 0}
.flex{display:flex;align-items:center;gap:10px}.between{justify-content:space-between}.wrap{flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:12px}
.card{border:1px solid #efe6e2;border-radius:var(--radius);padding:23px;background:white;box-shadow:0 9px 22px #8a6b7710}
.card-soft{background:#fffbf5;border:1px solid #efe9e0;border-radius:21px;padding:20px}
.sticker{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;background:var(--pink);border-radius:99px;font-size:12px;color:#b67b8c;font-weight:730}
.sticker.mint{background:var(--mint);color:var(--green)}.sticker.yellow{background:var(--yellow);color:#9a7a45}
.btn{border:0;background:#e3a0a0;color:#fff;border-radius:14px;padding:13px 22px;min-height:47px;font-weight:800;box-shadow:0 6px 0 #efd1cd,0 10px 16px #c68e8e12}
.btn:hover:not(:disabled){background:#d78c92}
.btn.secondary{background:#f3eeee;color:#806c70;box-shadow:none}
.btn.mint{background:#719684;box-shadow:0 5px 0 #d1e0d0;color:white}
.btn.outline{background:white;border:1px solid #e3d8d8;box-shadow:none;color:#9d7378}
.btn.little{padding:9px 14px;min-height:38px;font-size:13px;border-radius:12px;box-shadow:none}
.btn.full{width:100%}
.link-btn{background:transparent;border:0;padding:9px 2px;color:#ad7a7c;font-size:13px;font-weight:700;box-shadow:none}
.actions{display:flex;gap:11px;align-items:center;flex-wrap:wrap}
.actions .btn.primary{flex:1}
.hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(245px,.7fr);gap:14px;background:linear-gradient(118deg,#fff3e9 0%,#fef7f7 50%,#f4fbf2 100%);padding:29px 32px;border:1px solid #f2e4e4;border-radius:26px;overflow:hidden;position:relative}
.hero h1{max-width:440px}
.hero p{max-width:480px}
.hero .actions{margin-top:24px}
.doodle-scene{min-height:300px;display:flex;align-items:center;justify-content:center;position:relative}
.paper-illust{width:210px;height:250px;border:2px solid #f5dedb;border-radius:15px;background:repeating-linear-gradient(#fff,#fff 36px,#f5eae8 37px);transform:rotate(-8deg);box-shadow:14px 14px 0 #f7dfdd,16px 20px 28px #ae848433;display:flex;align-items:center;justify-content:center;flex-direction:column}
.paper-illust .ink{font-family:"KaiTi","STKaiti",serif;font-size:103px;color:#ac7982;line-height:1}
.paper-illust small{font-size:13px;color:#c4a1a1}
.doodle{position:absolute;font-size:35px}.doodle.one{top:24px;left:0;transform:rotate(-12deg)}.doodle.two{right:10px;bottom:20px;transform:rotate(14deg)}.doodle.three{top:2px;right:15px;font-size:20px}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:31px 0 15px}
.section-head h2{margin:0;font-size:20px}.section-head p{margin:3px 0 0;font-size:12px;color:var(--muted)}
.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:17px}
.summary-item{padding:18px 20px;background:#fff;box-shadow:0 6px 18px #a78a7f0b;border:1px solid var(--border);border-radius:19px;display:flex;align-items:center;gap:14px}
.summary-emoji{width:46px;height:46px;display:grid;place-items:center;background:#fff1e4;border-radius:15px;font-size:23px}
.summary-item strong{display:block;font-size:24px;letter-spacing:-.04em}
.summary-item span{font-size:12px;color:var(--muted)}
.course-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.course-card{background:#fff8f1;border:1px solid #f1e5d9;border-radius:19px;padding:19px}
.course-card.mint{background:#f5fbf5;border-color:#e4eee4}
.course-card .label{font-size:12px;color:#af8790;font-weight:760}
.course-chars{display:flex;gap:8px;align-items:center;margin:13px 0}
.course-chars b{width:51px;height:55px;background:#fffefb;border:1px solid #ebded8;border-radius:14px;display:grid;place-items:center;font:35px "KaiTi","STKaiti",serif}
.course-sentence{font-family:"Songti SC","STSong",serif;font-size:23px;margin-top:15px;font-weight:650}
.topic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.topic-preview{border:1px solid #eee8e3;border-radius:18px;background:#fff;padding:19px 12px;text-align:center}
.topic-preview .emoji{display:block;font-size:27px;margin-bottom:10px}
.topic-preview strong{display:block;font-size:14px}.topic-preview span{font-size:11px;color:var(--muted);margin-top:5px;display:block}
.back{background:transparent;border:0;color:#a47d86;font-size:13px;font-weight:750;padding:5px 0}
.lesson-head{display:flex;justify-content:space-between;gap:15px;align-items:center;flex-wrap:wrap}
.progress-track{height:9px;border-radius:99px;background:#f2eceb;overflow:hidden;margin:18px 0 25px}
.progress-track>div{height:100%;background:linear-gradient(90deg,#eeabb0,#91b79e);border-radius:99px;transition:width .2s}
.stage-chip{display:inline-flex;padding:7px 13px;background:#fff0e7;color:#b98273;border-radius:99px;font-size:12px;font-weight:780}
.practice-shell{max-width:760px;margin:auto}
.practice-title{font-size:30px;font-weight:820;margin:15px 0 6px}
.practice-explainer{color:var(--muted);font-size:14px;margin:0 0 18px}
.writer-card{border:1px solid #eee2dd;background:#fff9f7;border-radius:23px;padding:16px;max-width:465px;margin:12px auto 0;text-align:center}
.writing-square{width:min(100%,350px);aspect-ratio:1;margin:auto;position:relative;overflow:hidden;border:1.8px solid #e6bfb4;border-radius:13px;background:#fffefa;touch-action:none}
.writing-square .lines{position:absolute;inset:0;pointer-events:none;opacity:.95;background:linear-gradient(90deg,transparent calc(50% - .75px),#e9d6ce 50%,transparent calc(50% + .75px)),linear-gradient(transparent calc(50% - .75px),#e9d6ce 50%,transparent calc(50% + .75px)),linear-gradient(45deg,transparent calc(50% - .55px),#f2dfd5 50%,transparent calc(50% + .55px)),linear-gradient(-45deg,transparent calc(50% - .55px),#f2dfd5 50%,transparent calc(50% + .55px))}
.writer-target{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center}
.writer-target>svg{max-width:100%;max-height:100%}
.writer-ghost{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:clamp(160px,35vw,240px) "KaiTi","STKaiti",serif;color:#e3d2ca;pointer-events:none}
.writer-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;touch-action:none;cursor:crosshair}
.writer-side{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:13px auto 0;max-width:465px}
.writer-side button{border:0;background:transparent;color:#b58991;font-size:13px;padding:7px 6px;font-weight:680}
.hint-box{max-width:600px;margin:16px auto 0;border-radius:15px;background:#fff3df;padding:14px 17px;color:#987960;font-size:13px;line-height:1.8}
.status-box{max-width:600px;margin:15px auto 0;background:#f0f7f0;border-radius:15px;padding:12px 15px;color:#678c76;font-size:13px;line-height:1.75;display:flex;gap:9px;align-items:center}
.status-box.warn{background:#fff4ed;color:#ae8278}
.practice-actions{max-width:600px;margin:24px auto 0;display:flex;gap:11px;align-items:center;flex-wrap:wrap}
.practice-actions .btn.primary{flex:1}
.snap-pop{position:absolute;z-index:4;left:50%;top:37%;transform:translate(-50%,-50%);font-weight:850;color:#e19182;background:#fff9e8d9;border-radius:30px;padding:5px 12px;animation:snap .65s ease forwards;pointer-events:none}
@keyframes snap{0%{opacity:0;transform:translate(-50%,0) scale(.65)}25%{opacity:1;transform:translate(-50%,-24px) scale(1.14)}100%{opacity:0;transform:translate(-50%,-45px) scale(1)}}
.glyph{font:clamp(65px,10vw,95px) "KaiTi","STKaiti",serif}
.preview-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:15px}
.compare-box{border:1px solid #eee1db;background:white;border-radius:15px;text-align:center;padding:13px 5px;min-height:155px}
.compare-box img{width:118px;height:118px;object-fit:contain}
.compare-box small{display:block;font-size:12px;color:var(--muted)}
.compare-box .glyph{font-size:108px;line-height:1.25}
.choice-row{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin:20px 0 5px}
.sentence-line{display:flex;gap:5px;flex-wrap:wrap;align-items:center;margin:14px 0;line-height:1.8}
.sentence-item{min-width:34px;min-height:43px;font-family:"KaiTi","STKaiti",serif;font-size:26px;display:grid;place-items:center}
.sentence-item.blank{background:#fff3e9;border:1.5px dashed #e7b1a7;border-radius:9px;padding:0 4px}
.sentence-item.active{outline:2px solid #b68490;outline-offset:2px}
.sentence-item img{width:41px;height:41px;object-fit:contain}
.lesson-note{max-width:600px;margin:auto;text-align:center}
.lesson-done-icon{font-size:58px;margin:25px 0 6px}
.pencil-pad{position:relative;border:1px solid #e2d1c7;border-radius:17px;overflow:hidden;background:repeating-linear-gradient(#fffdfa,#fffdfa 38px,#f1e5dd 39px);height:185px;touch-action:none}
.pencil-pad canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}
.input{width:100%;border:1px solid #e8ddd8;border-radius:13px;padding:13px 15px;background:#fff;font-size:14px;color:var(--ink)}
.input:focus{outline:2px solid #e6b5bd}
textarea.input{resize:vertical;min-height:65px;line-height:1.7}
.diary-form{display:grid;grid-template-columns:1.25fr .75fr;gap:17px}
.diary-paper{background:#fffef9;border:1px solid #e7dbd0;padding:24px;border-radius:20px;background-image:repeating-linear-gradient(transparent,transparent 34px,#f4ece2 35px)}
.diary-hand{display:flex;gap:3px;flex-wrap:wrap;align-items:center;margin:15px 0;min-height:60px}
.diary-hand img{width:48px;height:48px;object-fit:contain;mix-blend-mode:multiply}
.diary-hand span{font:27px "KaiTi","STKaiti",serif}
.moods{display:flex;gap:9px;flex-wrap:wrap}
.moods button{border:1px solid #eee2df;background:#fff;padding:9px 14px;border-radius:12px;color:#77666c;font-size:13px}
.moods button.chosen{background:#ffedf0;border:1px solid #e4adb6;color:#b77984;font-weight:750}
.entry-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.entry{border-radius:20px;padding:19px;border:1px solid #eee3df;background:#fffef9;min-height:190px}
.entry:nth-child(4n+2){background:#f8fcf6}
.entry:nth-child(4n+3){background:#fff8f7}
.entry .entry-top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:#9a8a8d}
.entry .entry-title{font-weight:770;font-size:16px;margin:13px 0 5px}
.entry .entry-text{font-size:14px;color:#7c737a}
.entry img.free-drawing{max-width:100%;max-height:110px;object-fit:contain;mix-blend-mode:multiply}
.filter-row{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}
.filter-row button{border:1px solid #e9e0dc;border-radius:99px;background:white;color:#8e8188;font-size:12px;padding:9px 14px}
.filter-row button.active{background:#fbe9ec;color:#b27382;border-color:#edc5ce;font-weight:770}
.topic-filter{display:flex;gap:9px;flex-wrap:wrap;max-height:128px;overflow:auto;padding:2px 1px 8px}
.topic-filter button{border:1px solid #ebdfda;border-radius:12px;padding:10px 13px;background:#fff;color:#8b8188;font-size:12px}
.topic-filter button.active{background:#e8f4ea;border-color:#aaceb7;color:#5f8c71;font-weight:760}
.library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(77px,1fr));gap:10px}
.char-tile{border:1px solid #eee2dc;background:#fffcf8;border-radius:16px;padding:11px 8px;display:flex;align-items:center;flex-direction:column;gap:5px;min-height:96px}
.char-tile:hover{background:#fff2ea;border-color:#efb8ad}
.char-tile .char{font:42px "KaiTi","STKaiti",serif;color:#595260}
.char-tile span{font-size:11px;color:#a4979c}
.manage{margin-top:24px;background:#fcfaf7;border:1px solid #eee4df;border-radius:18px;padding:18px}
.manage .manage-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.manage .danger{color:#be7773}
.empty{border:1.5px dashed #eadbd5;padding:30px 20px;border-radius:19px;text-align:center;color:#9a8e91}
.empty .emoji{font-size:37px;margin-bottom:8px}
.tiny-note{font-size:11px;color:#b2a6a6;line-height:1.9}
.toast{position:fixed;z-index:40;bottom:25px;left:50%;transform:translateX(-50%);background:#544e56;color:white;padding:13px 20px;border-radius:13px;font-size:13px;box-shadow:0 12px 35px #0002;max-width:min(90vw,500px);text-align:center}
.sheet-footer{max-width:var(--width);padding:14px 28px 28px;margin:auto;text-align:center;font-size:12px;color:#b3a3a6}
@media(max-width:820px){
 .site-header{padding:17px 20px 10px}
 .site-name{font-size:19px}
 .tabbar{padding:0 16px;gap:7px}
 .tab{min-height:61px;gap:7px;font-size:13px;border-radius:14px 14px 0 0}
 .tab .tab-icon{font-size:20px}.tab .tiny{display:none}
 .container{padding:0 16px 30px}
 .main-frame{padding:22px 17px 32px;border-radius:0 0 21px 21px}
 .hero{grid-template-columns:1fr;padding:25px 22px}
 .doodle-scene{position:absolute;right:-20px;bottom:-44px;opacity:.17;pointer-events:none}
 .paper-illust{width:160px;height:195px}.paper-illust .ink{font-size:84px}
 .summary-grid{gap:8px}.summary-item{padding:14px;gap:9px}.summary-emoji{width:33px;height:33px;font-size:18px}.summary-item strong{font-size:20px}
 .course-row{grid-template-columns:1fr}
 .topic-grid{grid-template-columns:repeat(2,1fr)}
 .diary-form{grid-template-columns:1fr}
 .entry-list{grid-template-columns:1fr}
 .practice-title{font-size:25px}
}
@media(max-width:480px){
 .site-header{padding:14px 14px 12px}
 .logo-icon{width:40px;height:40px;font-size:24px}
 .site-name{font-size:18px}.site-sub{font-size:10px}.date-pill{display:none}
 .tabbar{padding:0 11px}
 .tab{flex-direction:column;gap:2px;padding:9px 5px;font-size:12px;min-height:68px}
 .tab .tab-icon{font-size:21px}
 .container{padding:0 10px 85px}
 .main-frame{padding:23px 14px 30px;border-radius:0 0 20px 20px}
 .summary-item{display:block;text-align:center;padding:11px 5px}
 .summary-emoji{margin:0 auto 7px}
 .summary-item strong{font-size:20px}
 .summary-item span{font-size:10px}
 .hero h1{font-size:31px}
 .card{padding:16px}
 .btn{font-size:14px;padding:12px 16px}
 .writer-card{padding:9px}
 .practice-actions{position:sticky;z-index:5;bottom:8px;background:#fffefbed;padding:10px 0;border-radius:15px;backdrop-filter:blur(9px)}
 .practice-actions .btn{min-height:45px}
 .preview-two{gap:8px}.compare-box img{width:91px;height:91px}.compare-box .glyph{font-size:86px}
 .sentence-item{font-size:23px;min-width:28px}
 .sentence-item img{height:38px;width:38px}
 .sheet-footer{padding-bottom:50px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;scroll-behavior:auto!important;transition:none!important}}

/* 手机朗读检测：原生 dialog 弹窗，不影响现有三个页面。 */
.audio-dialog{
 border:1px solid var(--border);border-radius:24px;background:var(--sheet);color:var(--ink);
 box-shadow:0 23px 76px #46323a38;width:min(520px,calc(100vw - 26px));
 max-height:min(86dvh,850px);overflow:auto;padding:24px 23px;margin:auto;
}
.audio-dialog::backdrop{background:#3b303e80;backdrop-filter:blur(3px)}
.audio-dialog .audio-test-group{margin:15px 0;padding:17px}
.audio-dialog .status-box{margin:12px 0 16px}
.audio-dialog select{margin-top:7px;max-width:100%;background:#fff}
@media(max-width:480px){
 .audio-dialog{padding:17px 15px;max-height:90dvh;border-radius:19px}
 .audio-dialog .audio-test-group{padding:13px}
}

/* 双语切换：始终显示在网站右上角，切换无需刷新、不会擦除当前画板。 */
.language-toggle{
 display:inline-flex;align-items:center;justify-content:center;gap:7px;
 padding:10px 14px;min-height:42px;border:1px solid #e8c8cb;
 border-radius:999px;background:#fff1f0;color:#aa737d;font-weight:800;font-size:13px;
 box-shadow:0 4px 12px #c99d9a15;white-space:nowrap;
}
.language-toggle:hover{background:#fbe4e7;border-color:#daafb6}
.language-toggle:focus-visible{outline:3px solid #b78ec8;outline-offset:3px}
.english-meaning{
 margin:9px 0 0!important;font-size:12px!important;line-height:1.7!important;
 color:#917c8b!important;padding:7px 10px;border-radius:10px;
 background:#f8eff5;letter-spacing:0!important;
}
@media(max-width:480px){
 .language-toggle{padding:9px 11px;min-height:37px;font-size:12px}
 .site-name{font-size:clamp(14px,4.4vw,18px);white-space:normal;line-height:1.23}
 .site-sub{font-size:10px}
 .site-mark{gap:9px;min-width:0}
 .site-mark>div:last-child{min-width:0}
 .sparkle{display:none}
 .header-meta{gap:6px;flex-shrink:0}
}