:root{--sans:system-ui, "Segoe UI", "PingFang SC", Roboto, sans-serif;font-family:var(--sans);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}*{box-sizing:border-box}body{margin:0}#root{min-height:100svh}.handwriting-pad{background:#fff;border-radius:16px;flex-direction:column;justify-content:space-between;max-width:540px;height:100%;margin:0 auto;display:flex;position:relative;overflow:hidden;box-shadow:0 4px 24px #00000014}.handwriting-pad .canvas-section{aspect-ratio:1;background:#fff;width:100%;position:relative;overflow:hidden}.handwriting-pad .canvas-section>*{position:absolute;inset:0}.handwriting-pad .tian-zi-ge{z-index:0;border:1.5px solid #c8d0da}.handwriting-pad .tian-zi-ge:before,.handwriting-pad .tian-zi-ge:after{content:"";pointer-events:none;background:#e0e6ed;position:absolute}.handwriting-pad .tian-zi-ge:before{width:1px;top:0;bottom:0;left:50%;transform:translate(-.5px)}.handwriting-pad .tian-zi-ge:after{height:1px;top:50%;left:0;right:0;transform:translateY(-.5px)}.handwriting-pad .stroke-overlay{z-index:1;pointer-events:none;justify-content:center;align-items:center;padding:8%;display:flex}.handwriting-pad .stroke-overlay svg{width:100%;height:100%;display:block}.handwriting-pad .canvas-section>div:last-child{z-index:2}.handwriting-pad .toolbar{background:#f8faff;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 20px;display:flex;position:relative}.handwriting-pad .countdown-bar{background:#e2e8f0;height:4px;position:absolute;bottom:0;left:0;right:0}.handwriting-pad .countdown-fill{background:#3b82f6;height:100%;animation:2s linear forwards countdownFill}.handwriting-pad .countdown-fill.gap-fill{background:#94a3b8;width:100%;animation:none}@keyframes countdownFill{0%{width:0%}to{width:100%}}.handwriting-pad .toolbar .group{align-items:center;gap:6px;display:flex}.handwriting-pad .toolbar label{color:#64748b;white-space:nowrap;font-size:12px;font-weight:600}.handwriting-pad .toolbar input[type=color]{cursor:pointer;background:0 0;border:2px solid #d0d9e6;border-radius:6px;width:30px;height:30px;padding:0}.handwriting-pad .toolbar input[type=range]{appearance:none;background:#d0d9e6;border-radius:4px;outline:none;width:80px;height:4px}.handwriting-pad .toolbar input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#1e293b;border:2px solid #fff;border-radius:50%;width:14px;height:14px;box-shadow:0 1px 4px #0003}.handwriting-pad .toolbar .spacer{flex:1}.handwriting-pad .toolbar button{cursor:pointer;white-space:nowrap;border:none;border-radius:8px;padding:7px 18px;font-size:14px;font-weight:600;transition:all .15s}.handwriting-pad .toolbar .btn-clear{color:#495057;background:#f1f3f5}.handwriting-pad .toolbar .btn-clear:hover{background:#e9ecef}.handwriting-pad .toolbar .btn-recognize{color:#fff;background:#1e293b}.handwriting-pad .toolbar .btn-recognize:hover{background:#0f172a}.handwriting-pad .toolbar .btn-recognize:disabled{cursor:not-allowed;background:#94a3b8}.handwriting-pad .btn-group{grid-template-columns:repeat(4,1fr);gap:6px;padding:10px 12px 0;display:grid}.handwriting-pad .btn-group .target-btn{cursor:pointer;text-align:center;-webkit-user-select:none;user-select:none;border-radius:40px;padding:10px 0;font-size:15px;font-weight:700;transition:background .15s,color .15s}.handwriting-pad .btn-group .target-btn.btn-red{color:#e74c3c;background:#e74c3c1a}.handwriting-pad .btn-group .target-btn.btn-blue{color:#3498db;background:#3498db1a}.handwriting-pad .btn-group .target-btn.btn-green{color:#2ecc71;background:#2ecc711a}.handwriting-pad .btn-group .target-btn.btn-yellow{color:#f1c40f;background:#f1c40f1a}.handwriting-pad .btn-group .target-btn.active.btn-red{color:#fff;background:#e74c3c}.handwriting-pad .btn-group .target-btn.active.btn-blue{color:#fff;background:#3498db}.handwriting-pad .btn-group .target-btn.active.btn-green{color:#fff;background:#2ecc71}.handwriting-pad .btn-group .target-btn.active.btn-yellow{color:#7d6608;background:#f1c40f}.handwriting-pad .hint{z-index:50;color:#fff;pointer-events:none;background:#000000bf;border-radius:12px;padding:10px 24px;font-size:22px;font-weight:600;animation:2s forwards hintFade;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes hintFade{0%{opacity:1;transform:translate(-50%,-50%)scale(1)}70%{opacity:1;transform:translate(-50%,-50%)scale(1)}to{opacity:0;transform:translate(-50%,-50%)scale(.9)}}.handwriting-pad .read{background:#f0fdf4;border-bottom:1px solid #dcfce7;padding:8px 20px}.handwriting-pad .read-divider{border:none;border-top:1px solid #cbd5e1;margin:6px 0 8px}.handwriting-pad .read-row{justify-content:center;align-items:center;gap:12px;display:flex}.handwriting-pad .read-pinyin{color:#16a34a;letter-spacing:.05em;font-size:20px;font-weight:700}.handwriting-pad .read-words{text-align:center;color:#65a30d;letter-spacing:.02em;margin-top:4px;font-size:14px}.handwriting-pad .read-speak{cursor:pointer;background:0 0;border:none;border-radius:8px;padding:4px 8px;font-size:24px;line-height:1;transition:background .15s}.handwriting-pad .read-speak:hover{background:#dcfce7}.rescue-game{text-align:center;background:#fff;border-radius:48px;width:100%;max-width:540px;margin:0;padding:20px 18px 25px;position:relative;box-shadow:0 15px 35px #00000014}.rescue-game h1{color:#2c3e50;margin:0 0 2px;font-size:24px;font-weight:700}.rescue-game .sub{color:#95a5a6;border-bottom:2px dashed #ecf0f1;margin-bottom:12px;padding-bottom:10px;font-size:14px}.rescue-game .stats{background:#ecf0f1;border-radius:60px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:5px;margin-bottom:16px;padding:6px 15px 6px 20px;display:flex}.rescue-game .stat-item{color:#34495e;align-items:baseline;gap:6px;font-size:15px;font-weight:600;display:flex}.rescue-game .stat-value{color:#e67e22;background:#fff;border-radius:40px;min-width:36px;padding:0 12px;font-size:24px;font-weight:800}.rescue-game .stat-value.remain{color:#2980b9}.rescue-game .grid{aspect-ratio:1;touch-action:manipulation;background:#bdc3c7;border-radius:20px;grid-template-columns:repeat(8,1fr);gap:5px;margin-bottom:20px;padding:5px;display:grid;position:relative}.rescue-game .cell{aspect-ratio:1;background:#ecf0f1;border-radius:10px;justify-content:center;align-items:center;font-size:28px;transition:all .15s cubic-bezier(.34,1.56,.64,1);display:flex;position:relative;box-shadow:inset 0 -2px #0000000f}.rescue-game .cell.empty{background:#ecf0f1;transform:scale(.9);box-shadow:inset 0 0 0 1px #d5dbdb}.rescue-game .cell.color-red{background:#e74c3c}.rescue-game .cell.color-blue{background:#3498db}.rescue-game .cell.color-green{background:#2ecc71}.rescue-game .cell.color-yellow{background:#f1c40f}.rescue-game .cell.pop{opacity:0;transition:all .2s;transform:scale(0)rotate(60deg)}.rescue-game .cell .emoji{text-shadow:0 2px 6px #0000004d;pointer-events:none;font-size:32px;line-height:1}.rescue-game .cell.saved .emoji{filter:grayscale(.5);opacity:.6}.rescue-game .treasure-star{color:gold;text-shadow:0 0 6px orange;pointer-events:none;font-size:14px;position:absolute;top:2px;right:4px}.rescue-game .btn-group{grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px;display:grid}.rescue-game .color-btn{color:#fff;text-shadow:0 2px 4px #0003;cursor:pointer;touch-action:manipulation;border:2px solid #ffffff4d;border-radius:60px;padding:14px 0;font-size:18px;font-weight:700;transition:all 50ms;box-shadow:0 4px #00000026}.rescue-game .color-btn:active{transform:translateY(4px);box-shadow:0 1px #00000026}.rescue-game .color-btn.shake{animation:.3s shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-8px)}75%{transform:translate(8px)}}.rescue-game .btn-red{background:#e74c3c}.rescue-game .btn-blue{background:#3498db}.rescue-game .btn-green{background:#2ecc71}.rescue-game .btn-yellow{color:#7d6608;text-shadow:0 2px 4px #ffffff4d;background:#f1c40f}.rescue-game .reset-btn{color:#fff;cursor:pointer;touch-action:manipulation;background:#95a5a6;border:none;border-radius:40px;padding:10px 24px;font-size:16px;font-weight:600;transition:all 50ms;box-shadow:0 3px #7f8c8d}.rescue-game .reset-btn:active{box-shadow:none;transform:translateY(3px)}.rescue-game .footer{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-top:5px;display:flex}.rescue-game .msg-area{color:#e67e22;background:#fef9e7;border-radius:30px;flex:1;min-width:120px;min-height:28px;padding:4px 16px;font-size:15px;font-weight:600;line-height:1.4}.rescue-game .win-modal{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;pointer-events:auto;background:#00000080;border-radius:48px;justify-content:center;align-items:center;width:100%;height:100%;animation:.5s fadeIn;display:none;position:absolute;top:0;left:0}.rescue-game .win-modal.show{display:flex}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.rescue-game .win-card{text-align:center;background:#fff;border-radius:60px;max-width:85%;padding:30px 35px 40px;animation:.6s cubic-bezier(.34,1.56,.64,1) popIn;position:relative;overflow:visible;box-shadow:0 20px 60px #0000004d}@keyframes popIn{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.rescue-game .win-card .big-icon{font-size:70px;animation:1s infinite bounce;display:block}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}.rescue-game .win-card .title{color:#2c3e50;margin:8px 0 4px;font-size:30px;font-weight:800}.rescue-game .win-card .subtitle{color:#7f8c8d;margin-bottom:15px;font-size:20px}.rescue-game .win-card .level-text{color:#34495e;background:#ecf0f1;border-radius:40px;margin-bottom:18px;padding:4px 24px;font-size:18px;font-weight:600;display:inline-block}.rescue-game .next-btn{color:#fff;cursor:pointer;touch-action:manipulation;background:#e67e22;border:2px solid #ffffff4d;border-radius:60px;padding:14px 50px;font-size:24px;font-weight:700;transition:all 50ms;box-shadow:0 6px #d35400}.rescue-game .next-btn:active{transform:translateY(6px);box-shadow:0 1px #d35400}.rescue-game .confetti-container{pointer-events:none;position:absolute;inset:-20px;overflow:visible}.rescue-game .confetti{font-size:30px;animation:4s linear infinite floatRotate;position:absolute}.rescue-game .confetti:first-child{font-size:36px;animation-delay:0s;top:5%;left:10%}.rescue-game .confetti:nth-child(2){font-size:28px;animation-delay:1s;top:15%;right:8%}.rescue-game .confetti:nth-child(3){font-size:40px;animation-delay:2s;bottom:20%;left:5%}.rescue-game .confetti:nth-child(4){font-size:32px;animation-delay:.5s;bottom:10%;right:5%}.rescue-game .confetti:nth-child(5){font-size:26px;animation-delay:1.5s;top:45%;left:-5%}.rescue-game .confetti:nth-child(6){font-size:34px;animation-delay:2.5s;top:40%;right:-5%}@keyframes floatRotate{0%{transform:translate(0)rotate(0)scale(1)}25%{transform:translate(15px,-20px)rotate(90deg)scale(1.2)}50%{transform:translate(-10px,10px)rotate(180deg)scale(.9)}75%{transform:translate(20px,-10px)rotate(270deg)scale(1.1)}to{transform:translate(0)rotate(360deg)scale(1)}}@media (width<=450px){.rescue-game .game-container{padding:12px}.rescue-game .grid{gap:3px;padding:3px}.rescue-game .color-btn{padding:12px 0;font-size:14px}.rescue-game .cell .emoji{font-size:24px}.rescue-game .stat-value{padding:0 8px;font-size:20px}.rescue-game .msg-area{padding:2px 10px;font-size:13px}.rescue-game .win-card{padding:25px 20px 30px}.rescue-game .win-card .big-icon{font-size:50px}.rescue-game .win-card .title{font-size:24px}.rescue-game .next-btn{padding:12px 30px;font-size:20px}}.vocab-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#0006;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.vocab-modal{background:#fff;border-radius:24px;width:90%;max-width:480px;max-height:85vh;padding:28px 32px;animation:.25s slideUp;overflow-y:auto;box-shadow:0 20px 60px #0003}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.vocab-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.vocab-header h2{color:#1e293b;margin:0;font-size:20px;font-weight:700}.vocab-close{cursor:pointer;color:#64748b;background:0 0;border:none;border-radius:8px;padding:4px 8px;font-size:24px;line-height:1}.vocab-close:hover{background:#f1f5f9}.vocab-form{flex-direction:column;gap:12px;margin-bottom:24px;display:flex}.vocab-form label{color:#475569;flex-direction:column;gap:4px;font-size:13px;font-weight:600;display:flex}.vocab-form input{border:1.5px solid #e2e8f0;border-radius:10px;outline:none;padding:10px 14px;font-size:15px;transition:border-color .15s}.vocab-form input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f626}.vocab-form input.char-input{text-align:center;width:80px;font-size:20px}.vocab-add-btn{color:#fff;cursor:pointer;background:#3b82f6;border:none;border-radius:10px;padding:11px 0;font-size:15px;font-weight:600;transition:background .15s}.vocab-add-btn:hover{background:#2563eb}.vocab-list-title{color:#94a3b8;border-bottom:1px solid #f1f5f9;justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:6px;font-size:14px;font-weight:600;display:flex}.vocab-clear-btn{color:#94a3b8;cursor:pointer;background:0 0;border:1px solid #e2e8f0;border-radius:6px;padding:2px 10px;font-size:12px}.vocab-clear-btn:hover{color:#64748b;background:#f1f5f9}.vocab-item{border-bottom:1px solid #f8fafc;align-items:flex-start;gap:12px;padding:10px 0;display:flex}.vocab-item:last-child{border-bottom:none}.vocab-item-char{color:#1e293b;text-align:center;flex-shrink:0;min-width:32px;font-size:24px;font-weight:700}.vocab-item-count{color:#3b82f6;text-align:center;background:#eff6ff;border-radius:6px;flex-shrink:0;min-width:24px;padding:2px 6px;font-size:13px;font-weight:700;line-height:1.4}.vocab-item-words{color:#64748b;word-break:break-all;flex:1;font-size:14px;line-height:1.6}.vocab-item-del{color:#94a3b8;cursor:pointer;background:0 0;border:none;border-radius:6px;flex-shrink:0;padding:2px 6px;font-size:16px;line-height:1}.vocab-item-del:hover{color:#ef4444;background:#fef2f2}body{background:linear-gradient(135deg,#f5f7fa 0%,#e9edf5 100%);min-height:100vh}.settings-btn{cursor:pointer;z-index:100;background:#fff;border:none;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;font-size:24px;transition:box-shadow .15s;display:flex;position:fixed;top:16px;right:16px;box-shadow:0 2px 12px #0000001a}.settings-btn:hover{box-shadow:0 4px 20px #00000026}.flex{justify-content:center;display:flex}.flex.flex-row{flex-direction:row}.flex.gap{gap:1rem}.write{width:480px}