*,:before,:after{box-sizing:border-box}body{background:linear-gradient(135deg,#fff5f5 0%,#f0f4ff 50%,#f5fff0 100%);min-height:100vh;margin:0;font-family:Noto Sans SC,system-ui,sans-serif}.app{max-width:420px;min-height:100vh;margin:0 auto;padding:14px 12px 24px}.header{text-align:center;margin-bottom:10px}.title{background:linear-gradient(135deg,#ff6b6b,#4ecdc4,#ffe66d);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0;font-size:24px;font-weight:900}.search-area{justify-content:center;gap:8px;margin-bottom:10px;display:flex}.search-input{text-align:center;background:#fff;border:3px solid #e0e0e0;border-radius:14px;outline:none;width:170px;padding:10px 16px;font-family:Noto Sans SC,system-ui,sans-serif;font-size:18px;transition:border-color .2s}.search-input:focus{border-color:#4ecdc4}.btn{cursor:pointer;color:#fff;-webkit-tap-highlight-color:transparent;background:linear-gradient(135deg,#4ecdc4,#44b09e);border:none;border-radius:14px;padding:10px 16px;font-family:Noto Sans SC,system-ui,sans-serif;font-size:20px;transition:transform .1s}.btn:active{transform:scale(.92)}.canvas-wrapper{background:#fff;border-radius:20px;margin-bottom:10px;padding:12px;box-shadow:0 4px 16px #00000014}.canvas-header{align-items:center;gap:8px;margin-bottom:6px;padding:0 2px;display:flex}.current-char{color:#333;font-size:22px;font-weight:900;line-height:1}.current-pinyin{color:#999;font-size:18px;font-weight:400;line-height:1}.mode-badge{color:#5b7fff;background:#f0f4ff;border-radius:12px;margin-left:auto;padding:3px 10px;font-size:12px;font-weight:700}.writer-container{width:320px;height:320px;margin:0 auto;position:relative;overflow:hidden}.writer-container svg{display:block}.controls{gap:6px;margin-top:8px;display:flex}.ctrl-btn{cursor:pointer;-webkit-tap-highlight-color:transparent;border:none;border-radius:12px;flex:1;padding:10px 0;font-family:Noto Sans SC,system-ui,sans-serif;font-size:13px;font-weight:700;transition:transform .1s}.ctrl-btn:active{transform:scale(.94)}.play-btn{color:#fff;background:linear-gradient(135deg,#ff6b6b,#ff8e53)}.quiz-btn{color:#fff;background:linear-gradient(135deg,#4ecdc4,#44b09e)}.reset-btn{color:#666;background:#f0f0f0}.chars-grid{background:#fffc;border-radius:16px;padding:12px 10px;box-shadow:0 2px 8px #0000000d}.chars-grid-header{justify-content:space-between;align-items:center;margin-bottom:8px;padding:0 2px;display:flex}.chars-grid-label{color:#999;font-size:13px;font-weight:700}.shuffle-btn{cursor:pointer;color:#43a047;-webkit-tap-highlight-color:transparent;background:#e8f5e9;border:none;border-radius:10px;padding:4px 12px;font-family:Noto Sans SC,system-ui,sans-serif;font-size:12px;font-weight:700;transition:background .15s}.shuffle-btn:hover{background:#c8e6c9}.char-grid-row{grid-template-columns:repeat(6,1fr);gap:5px;margin-bottom:5px;display:grid}.char-grid-row:last-child{margin-bottom:0}.char-btn{cursor:pointer;color:#555;-webkit-tap-highlight-color:transparent;background:#f8f9fa;border:2px solid #0000;border-radius:12px;justify-content:center;align-items:center;height:40px;padding:0;font-family:Noto Sans SC,system-ui,sans-serif;font-size:18px;font-weight:700;transition:all .15s;display:flex}.char-btn:hover{color:#2e7d32;background:#e8f5e9;border-color:#81c784}.char-btn.active{color:#fff;background:linear-gradient(135deg,#ff6b6b,#ff8e53);border-color:#0000}@media (width>=600px) and (orientation:portrait){.app{max-width:520px;padding:16px 20px 24px}.header{margin-bottom:12px}.title{font-size:28px}.search-area{margin-bottom:12px}.search-input{width:200px;padding:10px 18px;font-size:20px}.btn{font-size:22px}.canvas-wrapper{margin-bottom:12px;padding:14px}.writer-container{width:380px;height:380px}.current-char{font-size:26px}.mode-badge{padding:4px 12px;font-size:13px}.ctrl-btn{border-radius:14px;padding:11px 0;font-size:14px}.chars-grid{padding:14px 12px}.char-btn{border-radius:13px;height:44px;font-size:20px}.char-grid-row{gap:6px;margin-bottom:6px}.chars-grid-label{font-size:14px}.shuffle-btn{padding:5px 14px;font-size:13px}}@media (orientation:landscape) and (height>=400px){.app{grid-template-rows:auto auto 1fr;grid-template-columns:1fr 1.4fr;align-items:start;gap:10px 16px;max-width:98vw;height:100vh;min-height:0;padding:12px 16px;display:grid;overflow:hidden}.header{text-align:left;grid-column:1;margin-bottom:0}.title{font-size:22px}.search-area{grid-column:1;justify-content:flex-start;margin-bottom:0}.search-input{width:140px;padding:8px 12px;font-size:16px}.btn{padding:8px 14px;font-size:18px}.chars-grid{grid-column:1;max-height:calc(100vh - 160px);margin-bottom:0;overflow-y:auto}.char-btn{border-radius:11px;height:42px;font-size:18px}.char-grid-row{gap:5px;margin-bottom:5px}.canvas-wrapper{flex-direction:column;grid-area:1/2/-1;justify-content:center;height:calc(100vh - 24px);margin-bottom:0;display:flex}.writer-container{width:400px;height:400px}.ctrl-btn{padding:10px 0;font-size:14px}}@media (orientation:landscape) and (width>=1000px){.app{grid-template-columns:380px 1fr;max-width:70vw}.title{font-size:28px}.search-input{width:180px;padding:10px 16px;font-size:18px}.char-btn{height:48px;font-size:20px}.ctrl-btn{padding:12px 0;font-size:15px}}@media (width<=420px) and (orientation:portrait){.app{padding:10px 8px 20px}.title{font-size:20px}.header{margin-bottom:8px}.search-input{width:140px;padding:8px 12px;font-size:16px}.btn{padding:8px 12px;font-size:17px}.search-area{gap:6px;margin-bottom:8px}.canvas-wrapper{margin-bottom:8px;padding:10px}.writer-container{width:260px;height:260px}.current-char{font-size:18px}.mode-badge{padding:2px 8px;font-size:11px}.ctrl-btn{border-radius:10px;padding:8px 0;font-size:12px}.controls{gap:4px;margin-top:6px}.chars-grid{padding:10px 8px}.char-btn{border-radius:10px;height:36px;font-size:16px}.char-grid-row{gap:4px;margin-bottom:4px}.chars-grid-header{margin-bottom:6px}.chars-grid-label{font-size:12px}.shuffle-btn{border-radius:8px;padding:3px 10px;font-size:11px}}