@import"https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&family=Noto+Sans+JP:wght@400;700;900&family=Zen+Kurenaido&display=swap";:root{--bg-primary: #faf7f2;--bg-secondary: #fff8ee;--text-primary: #3d3028;--text-secondary: #8b7355;--accent: #e85d3a;--accent-light: #ff8a65;--guide-color: rgba(180, 160, 130, .2);--grid-color: rgba(180, 160, 130, .15);--stroke-color: #2d2016;--success-color: #4caf50;--card-shadow: 0 2px 12px rgba(0,0,0,.08)}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{width:100%;height:100%;overscroll-behavior:none}body{font-family:Noto Sans JP,Hiragino Sans,sans-serif;background:var(--bg-primary);color:var(--text-primary);user-select:none;-webkit-user-select:none;overflow-x:hidden;overscroll-behavior:none}.app-container{display:flex;flex-direction:column;height:100vh;height:100dvh;max-width:100vw;overflow-y:auto;overflow-x:hidden;overscroll-behavior:none}.app-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:#fff;border-bottom:1px solid rgba(0,0,0,.06);flex-shrink:0;z-index:10;gap:8px;max-width:100%;width:100%}.header-left{flex-shrink:0}.mode-toggle{display:flex;background:#f0ebe4;border-radius:12px;padding:3px;flex-shrink:0}.mode-btn{padding:10px 18px;border:none;border-radius:10px;font-size:24px;font-weight:700;cursor:pointer;transition:all .15s ease;font-family:inherit;background:transparent;color:var(--text-secondary)}.mode-btn.active{background:#fff;color:var(--text-primary);box-shadow:0 1px 3px #0000001a}.grade-selector{display:flex;gap:6px;padding:6px 16px;background:#fff;border-bottom:1px solid rgba(0,0,0,.06);overflow-x:auto;flex-shrink:0}.grade-btn{padding:8px 18px;border:1px solid #e0d8ce;border-radius:20px;font-size:22px;font-weight:600;cursor:pointer;background:transparent;color:var(--text-secondary);white-space:nowrap;transition:all .15s;font-family:inherit}.grade-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.grade-btn:hover:not(.active){background:#f0ebe4}.header-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border:none;border-radius:12px;font-size:22px;white-space:nowrap;flex-shrink:0;font-weight:700;cursor:pointer;transition:all .15s ease;font-family:inherit}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:#d04e2e}.btn-secondary{background:#f0ebe4;color:var(--text-primary)}.btn-secondary:hover{background:#e5ddd3}.btn-back{background:#f0ebe4;color:var(--text-primary);font-size:22px;padding:10px 16px;border-radius:10px}.btn-back:hover{background:#e5ddd3}.btn-icon{padding:8px 12px;font-size:24px;background:transparent;border:none;cursor:pointer;border-radius:10px;transition:background .15s}.btn-icon:hover{background:#f0ebe4}.btn-icon-sm{padding:6px 10px;font-size:22px;background:#f0ebe4;border-radius:8px}.start-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;gap:16px}.start-title{font-size:42px;font-weight:900;color:var(--text-primary);font-family:Klee One,Zen Kurenaido,Noto Sans JP,serif}.start-subtitle{font-size:24px;color:var(--text-secondary);font-weight:600}.start-modes{display:flex;flex-direction:column;gap:12px;width:100%;max-width:400px;margin-top:12px}.start-mode-card{display:flex;align-items:center;gap:16px;padding:20px 24px;background:#fff;border:2px solid #e8e0d6;border-radius:20px;cursor:pointer;transition:all .15s;text-align:left;font-family:inherit}.start-mode-card:hover{border-color:var(--accent);background:#fff8f4;transform:translateY(-2px);box-shadow:0 4px 16px #00000014}.start-mode-card:active{transform:translateY(0)}.start-mode-icon{font-size:40px;flex-shrink:0}.start-mode-label{font-size:28px;font-weight:700;color:var(--text-primary)}.start-mode-desc{font-size:20px;color:var(--text-secondary);margin-top:2px}.row-select-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;z-index:100;display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .2s ease}.row-select-panel{background:#fff;border-radius:24px 24px 0 0;width:100%;max-width:500px;max-height:70vh;overflow-y:auto;padding:24px 20px 36px;animation:slideUp .3s ease}.row-select-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.row-select-btn{padding:20px;border:2px solid #e8e0d6;border-radius:16px;font-size:28px;font-weight:700;cursor:pointer;background:var(--bg-secondary);color:var(--text-primary);transition:all .15s;font-family:Klee One,Zen Kurenaido,Noto Sans JP,serif}.row-select-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}.practice-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px 8px;min-height:0;position:relative}.tracing-wrapper{display:flex;flex-direction:column;align-items:center;gap:6px}.tracing-toolbar{display:flex;gap:8px;justify-content:flex-end;width:100%;max-width:min(calc(100vw - 40px),600px)}.canvas-container{position:relative;width:min(calc(100vw - 40px),calc(100dvh - 240px),600px);height:min(calc(100vw - 40px),calc(100dvh - 240px),600px);max-width:calc(100vw - 40px);aspect-ratio:1;background:#fff;border-radius:16px;box-shadow:var(--card-shadow);overflow:hidden;flex-shrink:0}.canvas-container canvas{position:absolute;top:0;left:0;width:100%;height:100%;touch-action:none}.demo-btn{padding:6px 14px;border:none;border-radius:20px;font-size:16px;font-weight:700;cursor:pointer;background:#fff;color:var(--accent);box-shadow:0 1px 4px #0000001f;transition:all .15s;font-family:inherit}.demo-btn:hover:not(:disabled){background:var(--accent);color:#fff}.demo-btn.playing{background:var(--accent);color:#fff;opacity:.7;cursor:default}.demo-btn:disabled{cursor:default}.guide-btn{padding:6px 14px;border:none;border-radius:20px;font-size:16px;font-weight:700;cursor:pointer;background:#fff;color:var(--text-secondary);box-shadow:0 1px 4px #0000001f;transition:all .15s;font-family:inherit}.guide-btn.active{background:var(--accent);color:#fff}.debug-btn{padding:6px 10px;border:none;border-radius:20px;font-size:16px;cursor:pointer;background:#fff;box-shadow:0 1px 4px #0000001f;transition:all .15s}.debug-btn.active{background:#333}.debug-overlay{position:absolute;bottom:24px;left:4px;right:4px;z-index:15;padding:8px 10px;border-radius:10px;font-size:11px;font-family:monospace;line-height:1.4;pointer-events:none}.debug-overlay.pass{background:#e8f5e9eb;color:#2e7d32}.debug-overlay.fail{background:#fce4eceb;color:#c62828}.debug-title{font-size:14px;font-weight:700;margin-bottom:2px}.stroke-score{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;padding:12px 28px;border-radius:24px;font-size:24px;font-weight:700;font-family:inherit;animation:scorePopIn .3s ease;pointer-events:none}.stroke-score.failed{background:#f44336e6;color:#fff}.stroke-score.passed{background:#4caf50e6;color:#fff}@keyframes scorePopIn{0%{transform:translate(-50%,-50%) scale(.5);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}.bottom-controls{display:flex;align-items:center;justify-content:center;gap:16px;padding:12px 16px;flex-shrink:0}.char-nav-btn{width:60px;height:60px;border-radius:50%;border:2px solid #e0d8ce;background:#fff;font-size:28px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;color:var(--text-primary)}.char-nav-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}.char-nav-btn:disabled{opacity:.3;cursor:default}.current-char-display{font-size:56px;font-weight:900;color:var(--text-primary);min-width:80px;text-align:center;font-family:Klee One,Zen Kurenaido,Noto Sans JP,serif}.stroke-info{font-size:22px;color:var(--text-secondary);text-align:center;font-weight:600}.char-select-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;z-index:100;display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.char-select-panel{background:#fff;border-radius:24px 24px 0 0;width:100%;max-width:600px;max-height:85vh;overflow-y:auto;padding:24px 20px 36px;animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.char-select-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.char-select-title{font-size:28px;font-weight:700}.char-select-close{width:44px;height:44px;border-radius:50%;border:none;background:#f0ebe4;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center}.gojuon-grid{display:flex;flex-direction:column;gap:2px}.gojuon-row-label{font-size:16px;color:var(--text-secondary);font-weight:700;padding:10px 4px 4px;letter-spacing:1px}.gojuon-row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.gojuon-cell{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border:none;border-radius:12px;background:var(--bg-secondary);cursor:pointer;transition:all .15s;padding:4px;position:relative}.gojuon-cell:hover{background:#ffe8d6;transform:scale(1.05)}.gojuon-cell.active{background:var(--accent);color:#fff}.gojuon-cell.completed{background:#e8f5e9}.gojuon-cell.completed:after{content:"✓";position:absolute;top:3px;right:5px;font-size:14px;color:var(--success-color)}.gojuon-cell-char{font-size:32px;font-weight:700;line-height:1;font-family:Klee One,Zen Kurenaido,Noto Sans JP,serif}.gojuon-cell-romaji{font-size:13px;color:var(--text-secondary);margin-top:2px;font-weight:600}.gojuon-cell.active .gojuon-cell-romaji{color:#fffc}.gojuon-cell.empty{visibility:hidden}.stroke-order-dots{display:flex;gap:6px;justify-content:center;margin-top:4px}.stroke-dot{width:10px;height:10px;border-radius:50%;background:#e0d8ce;transition:background .3s}.stroke-dot.completed{background:var(--success-color)}.stroke-dot.current{background:var(--accent);animation:pulse 1s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.3)}}.success-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#ffffffe6;z-index:20;animation:fadeIn .3s ease}.success-content{text-align:center;animation:bounceIn .5s ease}@keyframes bounceIn{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.05)}70%{transform:scale(.95)}to{transform:scale(1);opacity:1}}.success-char{font-size:100px;font-family:Klee One,Zen Kurenaido,Noto Sans JP,serif;color:var(--success-color);line-height:1}.success-text{font-size:32px;font-weight:700;color:var(--success-color);margin-top:8px}.success-buttons{display:flex;gap:12px;justify-content:center;margin-top:24px}.btn-retry{padding:16px 32px;background:#f0ebe4;color:var(--text-primary);border-radius:28px;font-size:26px;font-weight:700}.btn-retry:hover{background:#e5ddd3}.btn-next{padding:16px 32px;background:var(--accent);color:#fff;border-radius:28px;font-size:26px;font-weight:700}.btn-next:hover{background:#d04e2e}.progress-screen{flex:1;display:flex;flex-direction:column;align-items:center;padding:20px;gap:16px;overflow-y:auto}.progress-title{font-size:36px;font-weight:900;color:var(--text-primary);font-family:Klee One,Zen Kurenaido,Noto Sans JP,serif}.progress-mode-label{font-size:22px;color:var(--text-secondary);font-weight:600}.progress-ring-container{position:relative;width:160px;height:160px}.progress-ring{width:100%;height:100%}.progress-ring-text{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.progress-percent{font-size:36px;font-weight:900;color:var(--success-color)}.progress-count{font-size:18px;color:var(--text-secondary);font-weight:600}.progress-chars-grid{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:500px}.progress-char-cell{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:10px;font-size:24px;font-weight:700;font-family:Klee One,Zen Kurenaido,Noto Sans JP,serif;background:#f0ebe4;color:var(--text-secondary)}.progress-char-cell.done{background:#e8f5e9;color:var(--success-color)}.progress-ruby{font-size:9px}.current-char-display rt{font-size:22px;color:var(--text-secondary)}.license-footer{text-align:center;font-size:12px;color:var(--text-secondary);padding:4px 8px 8px;flex-shrink:0}.license-footer a{color:var(--text-secondary);text-decoration:underline}@media(max-width:450px){.app-header{padding:8px 10px;gap:6px}.mode-btn{padding:6px 12px;font-size:16px}.header-actions{gap:6px}.btn{padding:6px 12px;font-size:16px;border-radius:8px}.btn-back{font-size:16px;padding:6px 10px}.bottom-controls{padding:8px 12px}.current-char-display{font-size:40px}.stroke-info{font-size:16px}.success-char{font-size:80px}.success-text{font-size:24px}.success-buttons{gap:8px}.btn-retry,.btn-next{padding:12px 22px;font-size:20px}.start-title{font-size:28px}.start-subtitle{font-size:18px}.start-mode-label{font-size:20px}.start-mode-desc{font-size:14px}.start-mode-icon{font-size:32px}.demo-btn{font-size:16px;padding:6px 12px}}@media(min-width:768px){.char-select-panel{border-radius:24px;margin-bottom:20px;max-height:80vh}.char-select-overlay{align-items:center}.row-select-panel{border-radius:24px;margin-bottom:20px}.row-select-overlay{align-items:center}}@media(orientation:landscape)and (max-height:500px){.app-container{overflow-y:auto}.practice-area{flex-direction:row;padding:2px 8px;gap:8px}.tracing-wrapper{flex-direction:row;gap:4px;align-items:flex-start}.tracing-toolbar{flex-direction:column;width:auto;max-width:none}.canvas-container{width:min(calc(100dvh - 120px),calc(100vw - 200px),400px);height:min(calc(100dvh - 120px),calc(100vw - 200px),400px)}.bottom-controls{padding:4px 8px;gap:8px}.char-nav-btn{width:44px;height:44px;font-size:20px}.current-char-display{font-size:36px}.stroke-info{font-size:14px}.app-header{padding:4px 10px}.mode-btn{padding:4px 10px;font-size:16px}.btn{padding:4px 10px;font-size:14px}.success-char{font-size:60px}.success-text{font-size:18px}.btn-retry,.btn-next{padding:8px 16px;font-size:18px}.license-footer{padding:2px 8px 4px;font-size:10px}.start-screen{padding:10px;gap:8px}.start-title{font-size:28px}.start-modes{gap:6px}.start-mode-card{padding:12px 16px}.start-mode-icon{font-size:28px}.start-mode-label{font-size:20px}.start-mode-desc{font-size:14px}}