body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;margin:0;background-color:#f8f9fa}:root{--box-size: 150px;--border-color: #ccc;--disabled-bg: #f0f0f0;--enabled-bg: #fff;--active-border: #007bff;--red-line-color: #ff0000;--green-highlight: #28a745}.fixed-header{position:sticky;top:0;z-index:1000;background:#f8f9fa;padding:15px 20px;box-shadow:0 2px 5px #0000001a;display:grid;grid-template-columns:1fr auto 1fr 1fr;grid-template-areas:"input controls status history-btn";align-items:center;grid-gap:20px;max-width:1200px;margin:0 auto}.main-content{padding:20px;max-width:1200px;margin:0 auto}#input-section{grid-area:input}#controls-section{grid-area:controls}#status-section{grid-area:status}#history-btn-container{grid-area:history-btn;text-align:right}h2{margin-top:0;font-size:1.2em}textarea#inputText{width:100%;height:150px;font-size:1em;border-radius:8px;border:1px solid var(--border-color);padding:10px}.control-buttons{display:flex;justify-content:space-around;align-items:center;height:100%}.control-buttons button,.action-btn{background:none;border:none;font-size:2.5em;cursor:pointer;color:#333;transition:transform .1s}.action-btn{font-size:1em;background:#007bff;color:#fff;padding:10px 15px;border-radius:8px}.control-buttons button:hover{color:#007bff}.action-btn:hover{background:#0056b3}#status-section{display:flex;flex-direction:column;justify-content:center;gap:15px;padding:10px;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.stopwatch-container,.progress-container{display:flex;align-items:center;gap:10px}.stopwatch-container .fa-clock{font-size:2em}#stopwatch-display{font-size:2.2em;font-family:Courier New,Courier,monospace;font-weight:700}#progress-bar{flex-grow:1;height:20px;background-color:#e9ecef;border-radius:10px;overflow:hidden}#progress-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,#007bff,#00bfff);border-radius:10px;transition:width .5s ease-out}#progress-text{font-size:1.2em;font-weight:700;font-family:Courier New,Courier,monospace}.paragraph-container{margin-bottom:20px;padding-bottom:20px;border-bottom:5px solid var(--red-line-color);display:flex;flex-wrap:wrap;gap:10px}.paragraph-container:last-child{border-bottom:none}.canvas-wrapper{position:relative;width:var(--box-size);height:var(--box-size)}.handwriting-canvas{width:100%;height:100%;border:2px solid var(--border-color);box-sizing:border-box;touch-action:none;cursor:not-allowed;background-size:cover;transition:all .3s}.handwriting-canvas.disabled{background-color:var(--disabled-bg)}.handwriting-canvas.enabled{background-color:var(--enabled-bg);cursor:pointer;background-image:url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23ddd' stroke-width='2' stroke-dasharray='6%2c 6'/%3e%3cpath d='M0,75 L150,75' stroke='%23ddd' stroke-width='2' stroke-dasharray='6,6'/%3e%3cpath d='M75,0 L75,150' stroke='%23ddd' stroke-width='2' stroke-dasharray='6,6'/%3e%3c/svg%3e")}.handwriting-canvas.current-segment{border-color:var(--green-highlight);border-width:3px}.handwriting-canvas.active{border-color:var(--active-border);box-shadow:0 0 10px var(--active-border)}.eraser-btn{position:absolute;top:5px;left:50%;transform:translate(-50%);width:30px;height:30px;background-color:#00000080;color:#fff;border:none;border-radius:50%;cursor:pointer;display:none;font-size:16px}.canvas-wrapper.active .eraser-btn{display:block}#submit-btn{display:block;width:100%;padding:15px;font-size:1.5em;background-color:var(--green-highlight);color:#fff;border:none;border-radius:8px;cursor:pointer;margin-top:20px}#submit-btn:disabled{background-color:#ccc}.results-view,.history-view{padding:20px;max-width:1200px;margin:20px auto}#result-overview{display:grid;grid-template-columns:1fr 1fr;gap:15px;background:#fff;padding:20px;border-radius:8px;margin-bottom:20px;box-shadow:0 2px 4px #0000000d}#result-overview div{font-size:1.5em}#result-overview div b{color:#007bff}#result-handwriting .paragraph-container{gap:5px}#result-handwriting .result-canvas{width:75px;height:75px;border:2px solid #ccc}#result-handwriting .result-canvas.incorrect{border-color:var(--red-line-color);border-width:3px}.history-controls{display:flex;gap:15px;margin-bottom:20px;align-items:center}.history-controls input{padding:8px;font-size:1em;border:1px solid #ccc;border-radius:4px}#history-table{width:100%;border-collapse:collapse;background:#fff;box-shadow:0 2px 4px #0000001a}#history-table th,#history-table td{padding:12px;border-bottom:1px solid #ddd;text-align:left}#history-table th{background:#f8f9fa}