*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:#213547;background-color:#f5f5f5}body{margin:0;padding:0;min-height:100vh;touch-action:manipulation}body.scroll-locked{overflow:hidden;position:fixed;width:100%;height:100%}#app{max-width:400px;margin:0 auto;padding:16px}header{text-align:center;margin-bottom:16px}h1{font-size:1.5rem;margin:0;color:#1a1a1a}main{display:flex;flex-direction:column;gap:16px}#canvas-container{display:flex;justify-content:center;position:relative}#drawing-canvas{background-color:#fff;border:2px solid #333;border-radius:8px;cursor:crosshair;touch-action:none;max-width:100%;height:auto}#drawing-canvas.active{border-color:#4a90d9;box-shadow:0 0 0 3px #4a90d94d}#canvas-hint{position:absolute;top:0;left:50%;transform:translate(-50%);width:280px;max-width:100%;height:280px;display:flex;align-items:center;justify-content:center;pointer-events:none;border-radius:8px}#canvas-hint span{background-color:#000000b3;color:#fff;padding:12px 20px;border-radius:8px;font-size:.95rem;animation:pulse 2s ease-in-out infinite}#canvas-hint.hidden{display:none}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}#button-container{display:flex;gap:12px;justify-content:center}button{flex:1;max-width:140px;padding:12px 24px;font-size:1rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:background-color .2s,transform .1s}button:active{transform:scale(.98)}#recognize-btn{background-color:#4a90d9;color:#fff}#recognize-btn:hover:not(:disabled){background-color:#3a7bc8}#recognize-btn:disabled{background-color:#a0c4e8;cursor:not-allowed}#clear-btn{background-color:#e0e0e0;color:#333}#clear-btn:hover{background-color:#d0d0d0}#status{text-align:center;font-size:.9rem;color:#666;min-height:1.4em}#status.error{color:#d32f2f}#status.success{color:#388e3c}#results-container{background-color:#fff;border-radius:8px;padding:16px;box-shadow:0 2px 4px #0000001a}#results-container h2{font-size:1rem;margin:0 0 12px;color:#333}#results{display:flex;flex-direction:column;gap:8px}.result-item{display:flex;align-items:center;gap:12px;padding:8px 12px;background-color:#f9f9f9;border-radius:6px}.result-character{font-size:2rem;font-weight:500;min-width:50px;text-align:center}.result-info{flex:1;display:flex;flex-direction:column;gap:4px}.result-reading{font-size:.85rem;color:#555}.result-bar-container{display:flex;align-items:center;gap:8px}.result-bar{flex:1;height:8px;background-color:#e0e0e0;border-radius:4px;overflow:hidden}.result-bar-fill{height:100%;background-color:#4a90d9;border-radius:4px;transition:width .3s ease}.result-percentage{font-size:.85rem;color:#666;min-width:45px;text-align:right}.no-results{text-align:center;color:#999;padding:20px}.save-btn,.delete-btn{padding:6px 12px;font-size:.8rem;font-weight:500;border:none;border-radius:6px;cursor:pointer;transition:background-color .2s;flex-shrink:0}.save-btn{background-color:#4a90d9;color:#fff}.save-btn:hover:not(:disabled){background-color:#3a7bc8}.save-btn:disabled{background-color:#a0c4e8;cursor:default}.delete-btn{background-color:#e57373;color:#fff}.delete-btn:hover{background-color:#d32f2f}#history-container{background-color:#fff;border-radius:8px;padding:16px;box-shadow:0 2px 4px #0000001a}#history-container h2{font-size:1rem;margin:0 0 12px;color:#333}#history{display:flex;flex-direction:column;gap:8px}.history-item{display:flex;align-items:center;gap:12px;padding:8px 12px;background-color:#f9f9f9;border-radius:6px}.history-character{font-size:1.5rem;font-weight:500;min-width:40px;text-align:center}.history-reading{flex:1;font-size:.85rem;color:#555}@media(prefers-color-scheme:dark){:root{color:#f0f0f0;background-color:#1a1a1a}h1{color:#f0f0f0}#drawing-canvas{border-color:#555}#recognize-btn{background-color:#5a9fe9}#recognize-btn:hover:not(:disabled){background-color:#4a8fd9}#recognize-btn:disabled{background-color:#3a5f7f}#clear-btn{background-color:#404040;color:#e0e0e0}#clear-btn:hover{background-color:#505050}#status{color:#aaa}#results-container{background-color:#2a2a2a;box-shadow:0 2px 4px #0000004d}#results-container h2{color:#e0e0e0}.result-item{background-color:#333}.result-reading{color:#aaa}.result-bar{background-color:#444}.result-percentage{color:#aaa}.no-results{color:#777}.save-btn:disabled{background-color:#3a5f7f}#history-container{background-color:#2a2a2a;box-shadow:0 2px 4px #0000004d}#history-container h2{color:#e0e0e0}.history-item{background-color:#333}.history-reading{color:#aaa}}