.stats-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:20px;margin-bottom:30px}.stat-card{background:white;border-radius:20px;padding:20px;display:flex;align-items:center;gap:16px;border:1px solid var(--gray-200);transition:all 0.3s}.stat-card:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(0,0,0,0.1)}.stat-icon{width:50px;height:50px;background:linear-gradient(135deg, #e0e7ff, #f0f4ff);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--primary-color)}.stat-value{font-size:1.6rem;font-weight:700;color:var(--gray-800)}.stat-label{font-size:0.75rem;color:var(--gray-500)}.toolbar-section{display:flex;flex-wrap:wrap;gap:16px;padding:16px 20px;background:var(--gray-50);border-radius:16px;margin-bottom:24px;align-items:center}.toolbar-group{display:flex;align-items:center;gap:8px}.toolbar-group label{font-size:0.8rem;font-weight:500;color:var(--gray-600)}.toolbar-select{padding:6px 12px;border:1px solid var(--gray-300);border-radius:8px;background:white;font-size:0.85rem}.color-picker{width:40px;height:34px;border:1px solid var(--gray-300);border-radius:6px;cursor:pointer}.toolbar-btn{padding:6px 16px;font-size:0.85rem}.writing-section{margin-bottom:24px}.writing-container{position:relative;background:#f5f0e8;border-radius:20px;padding:20px;min-height:500px;display:flex;align-items:center;justify-content:center;border:1px solid var(--gray-200)}#writingCanvas{width:100%;max-width:600px;height:auto;aspect-ratio:1;border-radius:12px;background:white;box-shadow:0 4px 20px rgba(0,0,0,0.08)}.writing-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.writing-guide{text-align:center;color:var(--gray-400)}.guide-text{font-size:1.2rem;background:rgba(255,255,255,0.9);padding:12px 24px;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,0.05)}.input-section{margin-bottom:24px}.input-wrapper{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.char-input{flex:1;padding:12px 18px;border:1px solid var(--gray-300);border-radius:12px;font-size:1.1rem;font-family:'Noto Serif SC',serif;min-width:200px}.char-input:focus{outline:none;border-color:var(--primary-color)}.write-btn{padding:12px 24px;font-size:1rem}.input-hint{margin-top:8px;display:flex;justify-content:space-between;font-size:0.75rem;color:var(--gray-400)}.animation-controls{display:flex;flex-wrap:wrap;gap:20px;padding:12px 16px;background:var(--gray-50);border-radius:16px;margin-bottom:24px;align-items:center}.control-group{display:flex;align-items:center;gap:12px}.control-group label{font-size:0.8rem;color:var(--gray-600)}#speedSlider{width:100px}#speedValue{min-width:24px;font-weight:600;color:var(--primary-color)}.examples-section{margin-bottom:24px}.example-buttons{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}.example-btn{width:48px;height:48px;border-radius:12px;border:1px solid var(--gray-300);background:white;font-size:1.2rem;font-family:'Noto Serif SC',serif;cursor:pointer;transition:all 0.2s}.example-btn:hover{background:var(--primary-color);border-color:var(--primary-color);color:white}.knowledge-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:20px;margin-top:20px}.knowledge-card{background:var(--gray-50);border-radius:16px;padding:20px;text-align:center}.knowledge-card i{font-size:28px;color:var(--primary-color);margin-bottom:12px}.knowledge-card h4{font-size:0.85rem;margin-bottom:8px}.knowledge-card p{font-size:0.75rem;color:var(--gray-500);line-height:1.5}@media (max-width:900px){.stats-grid{grid-template-columns:repeat(2, 1fr)}.knowledge-grid{grid-template-columns:repeat(2, 1fr)}}@media (max-width:600px){.stats-grid{grid-template-columns:1fr}.toolbar-section{flex-direction:column;align-items:stretch}.toolbar-group{flex-wrap:wrap}.input-wrapper{flex-direction:column;align-items:stretch}.animation-controls{flex-direction:column;align-items:stretch}.knowledge-grid{grid-template-columns:1fr}}