html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}:root{--green: #4caf50;--red: #f44336;--blue: #048fea;--white: #fff;--text-color: #333;--border-color: #ccc;--shadow-blue: #084d7a;--shadow-dark: #252725;--light-grey: #f0f2f5;--canvas-box-size: 155px;--canvas-border-color: rgba(213, 216, 225, 1);--canvas-disabled-bg: rgba(246, 246, 246, 1);--canvas-enabled-bg: #fff;--active-canvas-border: #007bff;--paragraph-border: #ccc;--active-segment-border: #28a745}body,html{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;height:100%;font-size:16px}.hidden{display:none!important}.final-image{max-width:100%;height:auto}.page{display:none;animation:fadeIn .3s ease-in-out}.page.active{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.header{height:74px;background-color:#fff;display:flex;justify-content:space-between;align-items:center;padding:0 20px;box-shadow:0 2px 4px #0000001a;position:sticky;top:0;z-index:1000}.header-title{font-size:1.5rem;color:#333;margin-left:20px;font-weight:500;font-style:Medium;font-size:30px;line-height:1.2;letter-spacing:0px;text-align:center}.logo-container{display:flex;align-items:center}.logo-container img{cursor:pointer}.menu-icon{height:30px;cursor:pointer}.nav-menu{display:none;position:absolute;top:74px;right:0;background-color:#fff;box-shadow:-2px 2px 5px #0000001a;border-radius:0 0 0 8px;overflow:hidden}.nav-menu.active{display:block}.nav-menu ul{list-style:none;margin:0;padding:0}.nav-menu ul li a{display:block;padding:15px 40px;text-decoration:none;color:#333;white-space:nowrap}.nav-menu ul li a:hover{background-color:#f5f5f5}.main-content{min-height:calc(100vh - 74px)}.stage-page-1{background:var(--light-grey)}.stage-page-1 #page-1{display:block}.stage-page-1 .header-title{display:none}#landing-page .page__container{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}#landing-page .hero-image{max-width:300px;width:100%;margin-bottom:20px}#landing-page .main-title{font-size:2.5rem;color:#333;margin-bottom:30px}#landing-page .button-container{display:flex;flex-direction:column;gap:20px;width:100%;max-width:350px}#landing-page .btn{display:flex;justify-content:center;align-items:center;gap:5px}#landing-page .btn-icon{height:24px}#landing-page #upload-input{display:none}#input-text-page .page__container{padding:32px}#input-text-page .dictation-scope{display:flex;align-items:center;margin-bottom:20px}#input-text-page .character-image{width:121px;height:auto;margin-right:20px}#input-text-page .scope-text{text-align:left;margin-right:20px}#input-text-page .scope-text h2{margin:0 0 4px;font-size:32px;color:var(--text-color)}#input-text-page .scope-text p{margin:0;color:#666;font-size:20px}#input-text-page .text-area-container{border-radius:8px;padding:12px;margin-bottom:50px;border:2px solid #717580}#input-text-page .text-area{width:100%;height:650px;border:none;resize:none;font-size:22px;line-height:1.5;color:var(--text-color);font-family:inherit}#input-text-page .text-area:focus{outline:none}#input-text-page .button-container{display:flex;justify-content:flex-end;gap:12px;margin-bottom:50px}#input-text-page .speaker-btn{width:50px;height:50px;display:flex;justify-content:center;align-items:center}#input-text-page .speaker-btn .material-symbols-outlined{font-size:32px}.button-container{display:flex;justify-content:space-between;gap:12px;margin-bottom:50px}.btn{padding:12px 28px;border-radius:8px;border:none;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s,box-shadow .2s,transform .2s;box-shadow:4px 6px 0 0 var(--shadow-blue)}.btn__text{text-shadow:0px 1px #000000}.btn:active{transform:translateY(2px);box-shadow:1px 2px 0 0 var(--shadow-blue)}.btn:hover{opacity:.85}.red-btn{background-color:var(--red);color:var(--white)}.green-btn{background-color:var(--green);color:var(--white)}.blue-btn{background-color:var(--blue);color:var(--white)}#practice-page .panel{position:sticky;top:74px;background:#fff;z-index:10;box-shadow:0 2px 4px #0000001a;padding:10px 20px}#practice-page .button-container{max-width:1000px;margin:0 auto;padding:20px 20px 80px;justify-content:flex-end}#practice-page .top-section{display:flex;align-items:center;gap:20px;margin-bottom:10px}#practice-page .bottom-section{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px}#practice-page .character-sprite{position:relative;width:120px;height:120px;flex-shrink:0}#practice-page .character-sprite img{width:100%;height:auto}#practice-page .star-counter{position:relative;background:#f6f6f6;border:1px solid rgba(255,221,108,1);border-radius:30px;padding:7px 15px;display:flex;align-items:center;font-size:38px;font-weight:400;box-shadow:3px 4px 6px #0000001a;line-height:1;display:none}#practice-page .star-counter__icon{font-size:36px;margin-right:5px}#practice-page .star-counter__text{font-size:36px;font-weight:400}#practice-page .text-wrapper{flex-grow:1}#practice-page .instruction{font-size:20px;color:#252525;margin-bottom:10px;margin-top:0}#practice-page .progress-container{display:flex;align-items:center;gap:15px}#practice-page .progress-bar{flex-grow:1;height:22px;border-radius:15px;overflow:hidden;border:2px solid rgba(213,216,225,1)}#practice-page .progress-bar-fill{width:0%;height:100%;border-radius:15px;background:linear-gradient(270deg,#2796de,#3182ce);transition:width .5s ease-out}#practice-page .progress-text{font-size:1.5rem;font-weight:500;color:#121212}#practice-page .action-buttons{display:flex;justify-content:center;align-items:center;gap:20px}#practice-page .action-buttons button{background:#f6f6f6;border:none;cursor:pointer;padding:10px;border-radius:50%;display:flex;align-items:center;justify-content:center;width:60px;height:60px;box-shadow:3px 3px 6px #0000001f}#practice-page .action-buttons button .material-symbols-outlined{font-size:2.5rem;color:#1c1b1f}#practice-page .action-buttons button:hover .material-symbols-outlined{color:var(--blue)}#practice-page .action-buttons button{transition:transform .1s ease-in-out}#practice-page .action-buttons button:active{transform:scale(.9)}#practice-page .writing-area{position:relative;flex-grow:1;display:flex;flex-direction:column;overflow:hidden}#practice-page .stopwatch-container{display:flex;align-items:center;gap:10px;background:#f6f6f6;padding:13px 15px;font-size:22px;font-weight:500;border-radius:30px;color:#121212;box-shadow:3px 3px 6px #0000001f}#practice-page #stopwatch-display{font-variant-numeric:tabular-nums}#practice-page .stopwatch{width:60px;background:#f6f6f6;border-radius:30px;padding:13px 15px;text-align:center;font-size:22px;font-weight:500;color:#121212;box-shadow:3px 3px 6px #0000001f}#practice-page .meta-info{display:flex;align-items:center;gap:20px}#practice-page .canvas-grid-container{flex-grow:1;padding-left:20px;overflow-y:auto}#practice-page .canvas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:15px;padding:20px 20px 20px 0}#practice-page .canvas-container{position:relative;width:100%;padding-bottom:100%;border:1px solid #ddd;border-radius:8px;background-color:#fff;box-sizing:border-box}#practice-page .canvas-container canvas{position:absolute;top:0;left:0;width:100%;height:100%;cursor:crosshair}#practice-page .canvas-background{position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(to right,#fddac5 1px,transparent 1px),linear-gradient(to bottom,#fddac5 1px,transparent 1px);background-size:50% 50%;background-position:-1px -1px;border-radius:8px;pointer-events:none}#practice-page #handwriting-section{display:flex;flex-direction:column;align-items:center}#practice-page .paragraph-container{margin-bottom:50px;padding-bottom:50px;border-bottom:5px solid var(--paragraph-border);gap:32px 10px;display:grid;justify-items:center;grid-template-columns:repeat(2,1fr)}@media screen and (min-width: 600px){#practice-page .paragraph-container{grid-template-columns:repeat(3,1fr)}}@media screen and (min-width: 768px){#practice-page .paragraph-container{grid-template-columns:repeat(4,1fr)}}@media screen and (min-width: 1024px){#practice-page .paragraph-container{grid-template-columns:repeat(5,1fr)}}#practice-page .paragraph-container:last-child{border-bottom:none}#practice-page .canvas-wrapper{position:relative;width:var(--canvas-box-size);height:var(--canvas-box-size)}#practice-page .handwriting-canvas{width:var(--canvas-box-size);height:var(--canvas-box-size);border:2px solid var(--canvas-border-color);box-sizing:border-box;touch-action:none;cursor:not-allowed;background-size:cover;transition:border-color .3s,background-color .3s}#practice-page .handwriting-canvas.disabled{background-color:var(--canvas-disabled-bg)}#practice-page .handwriting-canvas.enabled{background-color:var(--canvas-enabled-bg);cursor:crosshair;background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140" viewBox="0 0 140 140" fill="none"><line x1="1" y1="44.7395" x2="139" y2="44.7395" stroke="%23FFF1E7" stroke-width="2" stroke-linecap="round" stroke-dasharray="4 4"/><line x1="1" y1="93.2605" x2="139" y2="93.2605" stroke="%23FFF1E7" stroke-width="2" stroke-linecap="round" stroke-dasharray="4 4"/><line x1="46.9043" y1="139" x2="46.9043" y2="1" stroke="%23FFF1E7" stroke-width="2" stroke-linecap="round" stroke-dasharray="4 4"/><line x1="94.8047" y1="139" x2="94.8047" y2="1" stroke="%23FFF1E7" stroke-width="2" stroke-linecap="round" stroke-dasharray="4 4"/></svg>')}#practice-page .handwriting-canvas.current-segment{border-color:var(--active-segment-border);border-width:3px}#practice-page .handwriting-canvas.active{border-color:var(--active-canvas-border);box-shadow:0 0 10px var(--active-canvas-border)}#practice-page .eraser-btn{position:absolute;top:-31px;left:50%;transform:translate(-50%);width:30px;height:30px;background-color:#fff;box-shadow:3px 3px 6px #0000001f;color:#fff;border:none;border-radius:50%;cursor:pointer;display:none;align-items:center;justify-content:center}#practice-page .eraser-btn span{font-size:30px}#practice-page .canvas-wrapper.active .eraser-btn{display:flex}#practice-page #submit-btn:hover{background-color:#218838}#practice-page #submit-btn:disabled{background-color:#ccc;cursor:not-allowed}#practice-page #results-section{margin-top:20px;padding:20px;background-color:#fff;border-radius:8px}#practice-page .result-item{display:flex;align-items:center;margin-bottom:10px;font-size:1.5em}#practice-page .result-item canvas{border:1px solid #000;margin-right:20px;width:75px;height:75px}#practice-page .result-item .correct-answer{color:#dc3545;font-weight:700}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.loading-content{background-color:#fffffd;border-radius:12px;padding:32px;text-align:center;color:#13343b;min-width:200px}.spinner{width:40px;height:40px;border:4px solid rgba(76,175,80,.3);border-top:4px solid #4caf50;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 16px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-message{position:fixed;top:20px;left:50%;transform:translate(-50%);z-index:1001;animation:slideDown .3s ease-out}.error-content{background-color:#f44336;color:#fff;padding:16px 24px;border-radius:12px;display:flex;align-items:center;gap:12px;box-shadow:0 10px 15px -3px #0000000a,0 4px 6px -2px #00000005;font-size:16px;min-width:300px}.error-icon{font-size:24px}.close-error{background:none;border:none;color:#fff;font-size:20px;cursor:pointer;margin-left:12px}@keyframes slideDown{0%{transform:translate(-50%,-100%)}to{transform:translate(-50%)}}