:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#242424;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}body{place-items:center;min-width:320px;min-height:100vh;margin:0;display:flex}#root{text-align:center;max-width:1280px;margin:0 auto;padding:2rem}@media (prefers-color-scheme:light){:root{color:#213547;background-color:#fff}}#root{box-sizing:border-box;width:100%;max-width:680px;margin:0 auto;padding:0 1rem}.App{flex-direction:column;align-items:stretch;gap:1.25rem;display:flex}header{text-align:center}header h1{color:#2c3e50;margin-bottom:.5rem}.subtitle{color:#7f8c8d;font-size:1.1rem}.question-section{box-sizing:border-box;width:100%;max-width:600px;margin:0 auto;padding:.5rem 0 1rem}.sentence-display{color:#34495e;margin-top:1rem;font-size:1.5rem;font-weight:600}.listen-hint{color:#34495e;text-align:center;margin:0 0 1rem;font-size:1.05rem}.play-btn{color:#fff;cursor:pointer;background-color:#3498db;border:none;border-radius:8px;padding:.8rem 1.5rem;font-size:1rem;transition:background-color .2s}.play-btn:hover{background-color:#2980b9}.canvas-container{flex-direction:column;align-items:center;display:flex}.submit-btn{color:#fff;cursor:pointer;background-color:#2ecc71;border:none;border-radius:8px;padding:.8rem 2rem;font-size:1.1rem;font-weight:600}.submit-btn:hover:not(:disabled){background-color:#27ae60}.submit-btn:disabled{cursor:not-allowed;background-color:#95a5a6}.loading{color:#e67e22;margin-top:1rem;font-style:italic}.result-section{box-sizing:border-box;border:1px solid #d1f2eb;border-radius:12px;flex-direction:column;gap:1rem;width:100%;max-width:600px;margin:0 auto;padding:1.25rem 1.5rem;display:flex}.result-section--correct{background-color:#e8f6f3;border-color:#a9dfbf}.result-section--partial{background-color:#fef9e7;border-color:#f9ca8c}.result-section--wrong{background-color:#fdedec;border-color:#f5b7b1}.result-section--error{background-color:#f4f6f7;border-color:#bdc3c7}.result-badge{border-radius:8px;align-items:center;gap:.5rem;width:fit-content;padding:.6rem 1rem;display:flex}.result-badge--correct{background-color:#d5f5e3}.result-badge--partial{background-color:#fdebd0}.result-badge--wrong{background-color:#fadbd8}.result-badge--error{background-color:#e5e8e8}.result-badge__emoji{font-size:1.5rem}.result-badge__label{color:#2c3e50;font-size:1.2rem;font-weight:700}.result-answer{flex-direction:column;gap:.25rem;display:flex}.result-answer__label{text-transform:uppercase;letter-spacing:.05em;color:#7f8c8d;font-size:.8rem;font-weight:600}.result-feedback{color:#2c3e50;margin:0;font-size:.95rem;line-height:1.6}.result-section--loading{background-color:#f8f9fa;border-color:#e0e6ed}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton{background:linear-gradient(90deg,#e8e8e8 25%,#f2f2f2 50%,#e8e8e8 75%) 0 0/200% 100%;border-radius:6px;animation:1.4s infinite shimmer}.skeleton--badge{border-radius:8px;width:160px;height:44px}.skeleton--sentence{width:55%;height:28px}.skeleton--feedback{width:100%;height:15px}.skeleton--short{width:65%}.skeleton--btn{border-radius:8px;width:100%;height:42px}.next-btn{color:#fff;cursor:pointer;background-color:#16a085;border:none;border-radius:6px;margin-top:1rem;padding:.6rem 1.2rem}.next-btn:hover{background-color:#1abc9c}button{font-family:inherit}.level-select{width:100%}.level-select__intro{text-align:center;color:#7f8c8d;margin-bottom:1.5rem;font-size:1.05rem}.level-select__grid{grid-template-columns:repeat(2,1fr);gap:1rem;display:grid}.level-card{text-align:left;cursor:pointer;background-color:#fff;border:2px solid #e0e6ed;border-radius:12px;padding:1.25rem;transition:border-color .15s,box-shadow .15s,transform .1s}.level-card:hover{border-color:#3498db;transform:translateY(-2px);box-shadow:0 4px 12px #3498db26}.level-card__header{justify-content:space-between;align-items:baseline;margin-bottom:.25rem;display:flex}.level-card__title{color:#2c3e50;font-size:1.3rem;font-weight:700}.level-card__count{color:#95a5a6;font-size:.85rem}.level-card__subtitle{color:#3498db;margin-bottom:.5rem;font-size:.95rem;font-weight:600}.level-card__desc{color:#5d6d7e;margin:0 0 .6rem;font-size:.9rem;line-height:1.45}.level-card__example{color:#7f8c8d;margin:0;font-size:.85rem;font-style:italic}.study-toolbar{box-sizing:border-box;justify-content:space-between;align-items:center;width:100%;max-width:600px;margin:0 auto;display:flex}.back-btn{color:#5d6d7e;cursor:pointer;background-color:#0000;border:1px solid #bdc3c7;border-radius:6px;padding:.5rem .9rem;font-size:.9rem;transition:background-color .15s}.back-btn:hover{background-color:#ecf0f1}.progress{color:#5d6d7e;font-size:.95rem;font-weight:500}@media (width<=540px){.level-select__grid{grid-template-columns:1fr}}.canvas-tools{flex-direction:column;gap:.6rem;margin-bottom:.75rem;display:flex}.tools-top{align-items:flex-end;gap:1rem;display:flex}.tools-top .tool-group:first-child{flex:1}.tools-bottom{flex-wrap:wrap;justify-content:space-between;gap:.4rem;display:flex}.tools-draw,.tools-edit{gap:.4rem;display:flex}.tools-edit{margin-left:auto}.tool-group{flex-direction:column;gap:.4rem;display:flex}.tool-label{color:#7f8c8d;text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:600}.color-palette{flex-wrap:wrap;gap:.35rem;display:flex}.color-swatch{cursor:pointer;border:2px solid #d5dbdb;border-radius:50%;width:28px;height:28px;padding:0;transition:transform .1s,border-color .15s}.color-swatch:hover{transform:scale(1.1)}.color-swatch.is-active{border-color:#2c3e50;box-shadow:inset 0 0 0 2px #fff}.thickness-options{gap:.3rem;display:flex}.thickness-btn{cursor:pointer;background-color:#fff;border:2px solid #d5dbdb;border-radius:6px;justify-content:center;align-items:center;width:36px;height:32px;padding:0;display:flex}.thickness-btn:hover{border-color:#95a5a6}.thickness-btn.is-active{background-color:#ecf0f1;border-color:#2c3e50}.thickness-dot{background-color:#2c3e50;border-radius:50%;display:block}.thickness-dot--thin{width:4px;height:4px}.thickness-dot--thick{width:10px;height:10px}.tool-btn{cursor:pointer;color:#2c3e50;background-color:#fff;border:2px solid #d5dbdb;border-radius:6px;padding:.4rem .8rem;font-size:.9rem;transition:border-color .15s,background-color .15s}.tool-btn:hover{border-color:#95a5a6}.tool-btn.is-active{color:#d35400;background-color:#fdf2e9;border-color:#e67e22}.tool-color-dot{vertical-align:middle;border:1px solid #0003;border-radius:50%;width:10px;height:10px;margin-right:2px;display:inline-block}.drawing-canvas{touch-action:none;aspect-ratio:600/400;background-color:#dcdcdc;border:2px solid #333;border-radius:8px;width:100%;max-width:600px;height:auto;display:block}.canvas-container{box-sizing:border-box;background-color:#f8f9fa;border:1px solid #e0e6ed;border-radius:12px;width:100%;max-width:600px;margin:2rem auto 0;padding:.75rem}.canvas-controls{justify-content:center;margin-top:.75rem;display:flex}.audio-controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;display:flex}.speed-toggle{background-color:#ecf0f1;border-radius:6px;gap:2px;padding:3px;display:inline-flex}.speed-btn{color:#5d6d7e;cursor:pointer;background-color:#0000;border:none;border-radius:4px;padding:.35rem .75rem;font-size:.85rem;transition:background-color .15s,color .15s}.speed-btn:hover{color:#2c3e50}.speed-btn.is-active{color:#2c3e50;background-color:#fff;font-weight:600;box-shadow:0 1px 2px #00000014}.canvas-controls button{white-space:nowrap}@media (width<=540px){.canvas-tools{justify-content:flex-start;gap:.6rem;padding:.6rem .75rem}.color-palette{gap:.22rem}.color-swatch{width:30px;height:30px}.tool-label{font-size:.7rem}}