*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,sans-serif;background:linear-gradient(135deg,#ffecd2,#fcb69f);color:#333;line-height:1.6;padding:20px;min-height:100vh}.container{max-width:1200px;margin:0 auto}header{text-align:center;margin-bottom:30px}header h1{font-size:2rem;color:#ff6b6b;font-weight:700;text-shadow:2px 2px 0 #ffe66d,4px 4px 0 rgba(0,0,0,.1)}.controls{background:#fff;padding:25px;border-radius:20px;box-shadow:0 8px 24px #ff6b6b33;margin-bottom:30px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:center}.input-section{display:flex;gap:10px;flex:1;min-width:280px}#charInput{flex:1;padding:15px 20px;font-size:18px;border:3px solid #ff6b6b;border-radius:15px;outline:none;transition:all .3s;background:linear-gradient(135deg,#fff9e6,#fff)}#charInput:focus{border-color:#ff6b6b;transform:scale(1.02);box-shadow:0 4px 12px #ff6b6b4d}.btn{padding:14px 28px;font-size:16px;border:none;border-radius:15px;cursor:pointer;transition:all .3s;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.btn-primary{background:linear-gradient(135deg,#ff6b6b,#ff8e8e);color:#fff;box-shadow:0 4px 12px #ff6b6b66}.btn-primary:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 20px #ff6b6b99}.btn-primary:disabled{background:#ccc;cursor:not-allowed}.btn-secondary{background:linear-gradient(135deg,#ffe66d,#ffed85);color:#5a5a5a;box-shadow:0 4px 12px #ffe66d66}.btn-secondary:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 20px #ffe66d99}.font-selector{display:flex;align-items:center;gap:8px}.font-selector label{font-weight:500;color:#666}#fontSelect{padding:8px 12px;font-size:14px;border:2px solid #ddd;border-radius:6px;background:#fff;cursor:pointer;outline:none;transition:border-color .3s}#fontSelect:focus{border-color:#4a90e2}.speed-control{display:flex;align-items:center;gap:12px;background:#fff9e6;padding:10px 20px;border-radius:15px;border:2px solid #ffe66d}.speed-control label{font-weight:600;color:#ff6b6b;white-space:nowrap}#speedSlider{width:120px;cursor:pointer;accent-color:#ff6b6b}#speedValue{min-width:3.5em;font-weight:600;color:#ff6b6b;text-align:center}.stroke-name-display{position:absolute;top:5px;left:50%;transform:translate(-50%) translateY(5px);font-size:1.2rem;font-weight:800;color:#fff;background:#ff6b6be6;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:2px 12px;border-radius:12px;min-height:1.8rem;text-align:center;transition:all .3s cubic-bezier(.175,.885,.32,1.275);opacity:0;z-index:20;pointer-events:none;box-shadow:0 4px 12px #ff6b6b66;white-space:nowrap}.stroke-name-display.show{opacity:1;transform:translate(-50%) translateY(0)}.character-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:15px;min-height:200px}.placeholder{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;padding:80px;background:#fff;border-radius:20px;color:#ff6b6b;font-size:18px;border:3px dashed #ffe66d;animation:pulse 2s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.character-card{position:relative;background:#fff;border-radius:20px;padding:15px;box-shadow:0 8px 24px #00000014;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;transition:all .3s;border:3px solid transparent}@media(max-width:768px){.character-card{flex-direction:row!important;justify-content:center!important;padding:15px!important;gap:20px!important}.tian-zi-ge{width:80px!important;height:80px!important;flex-shrink:0!important}.character-display svg{width:70px!important;height:70px!important}.controls{flex-direction:column;align-items:stretch;padding:20px}.input-section{min-width:100%;flex-wrap:wrap;flex-direction:row;gap:10px}#charInput{width:100%;flex:none}.btn{flex:1;width:auto;margin-bottom:0;padding:12px 10px;font-size:14px}.character-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:15px}header h1{font-size:1.5rem}.placeholder{padding:50px 20px;font-size:16px}.loading{font-size:12px}}.character-card:hover{transform:translateY(-5px) rotate(1deg);box-shadow:0 12px 32px #ff6b6b4d;border-color:#ffe66d}.character-card.active{border-color:#ff6b6b;animation:bounce .5s ease}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.character-card.completed{border-color:#52c41a;background:linear-gradient(135deg,#f0fff4,#fff)}.tian-zi-ge{width:160px!important;height:160px!important;position:relative;background:#fff;border:3px solid #ff6b6b;border-radius:15px;box-shadow:0 4px 12px #00000014;overflow:hidden;padding:0!important;flex-shrink:0;display:grid!important;place-items:center!important;cursor:pointer;transition:all .3s}.tian-zi-ge:hover{transform:scale(1.05);box-shadow:0 6px 20px #ff6b6b66}.tian-zi-ge:active{transform:scale(.95)}.tian-zi-ge .loading{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:14px!important;color:#999;z-index:10;gap:8px}.character-display{position:relative;z-index:2;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.character-display svg{display:block;width:150px!important;height:150px!important;margin:0!important;padding:0!important;position:static!important;transform:none!important}.tian-zi-ge:before,.tian-zi-ge:after{content:"";position:absolute;background:#ff6b6b;z-index:1}.tian-zi-ge:before{width:3px;height:80%;left:50%;top:50%;transform:translate(-50%,-50%);background:repeating-linear-gradient(to bottom,#ff6b6b,#ff6b6b 8px,transparent 8px,transparent 12px)}.tian-zi-ge:after{width:80%;height:3px;top:50%;left:50%;transform:translate(-50%,-50%);background:repeating-linear-gradient(to right,#ff6b6b,#ff6b6b 8px,transparent 8px,transparent 12px)}.diagonal-1{position:absolute;width:113%;height:2px;background:transparent;border:1px dashed #ff6b6b;transform:rotate(45deg);left:50%;top:50%;margin-left:-56.5%;margin-top:-1px;z-index:1}.diagonal-2{position:absolute;width:113%;height:2px;background:transparent;border:1px dashed #ff6b6b;transform:rotate(-45deg);left:50%;top:50%;margin-left:-56.5%;margin-top:-1px;opacity:.6;z-index:1}.loading{display:flex;align-items:center;justify-content:center;height:100%;color:#999;font-size:14px}.spinner{width:30px;height:30px;border:4px solid #ffe66d;border-top:4px solid #ff6b6b;border-radius:50%;animation:spin 1s linear infinite;margin-right:0}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-message{grid-column:1 / -1;background:#fff2f0;border:1px solid #ffccc7;color:#cf1322;padding:16px;border-radius:6px;text-align:center}footer{text-align:center;margin-top:40px;padding:25px;color:#ff6b6b;font-size:15px;font-weight:600;border-top:3px dashed #ffe66d;background:#fff;border-radius:15px;box-shadow:0 4px 12px #0000000d}