.nazori-canvas-container[data-v-4193bb43]{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.nazori-canvas[data-v-4193bb43]{background:#fff;border:2px solid #e5e7eb;border-radius:8px;cursor:crosshair}.nazori-canvas[data-v-4193bb43]:hover{border-color:#3b82f6}.completion-image-container[data-v-5b4e38cf]{align-items:center;background:#f9fafb;border:2px solid #e5e7eb;border-radius:8px;display:flex;height:200px;justify-content:center;width:100%}.completion-image[data-v-5b4e38cf]{max-height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain}.image-placeholder[data-v-5b4e38cf]{align-items:center;color:#6b7280;display:flex;height:100%;justify-content:center;width:100%}.placeholder-text[data-v-5b4e38cf]{font-size:14px;font-weight:500}.progress-container[data-v-a14becc8]{background:#fff;border-radius:8px;box-shadow:0 1px 3px #0000001a;padding:1rem;position:relative;width:100%}.progress-info[data-v-a14becc8]{align-items:center;display:flex;font-size:14px;justify-content:space-between;margin-bottom:.5rem}.progress-text[data-v-a14becc8],.stroke-group-info[data-v-a14becc8]{align-items:center;display:flex;gap:.5rem}.label[data-v-a14becc8]{color:#6b7280;font-weight:500}.value[data-v-a14becc8]{color:#1f2937;font-weight:600}.progress-bar-container[data-v-a14becc8]{background:#e5e7eb;border-radius:4px;height:8px;margin-bottom:.5rem;overflow:hidden;width:100%}.progress-bar[data-v-a14becc8]{background:linear-gradient(90deg,#3b82f6,#10b981);border-radius:4px;height:100%;transition:width .3s ease}.progress-percentage[data-v-a14becc8]{color:#6b7280;font-size:12px;font-weight:500;text-align:center}.completion-overlay[data-v-a14becc8]{align-items:center;animation:fadeIn-a14becc8 .3s ease;background:#3b82f6f2;border-radius:8px;display:flex;justify-content:center;inset:0;position:absolute}.completion-message[data-v-a14becc8]{color:#fff;text-align:center}.completion-icon[data-v-a14becc8]{font-size:2rem;margin-bottom:.5rem}.completion-text[data-v-a14becc8]{font-size:1.25rem;font-weight:600}@keyframes fadeIn-a14becc8{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.tutorial-overlay[data-v-517e9a56]{align-items:center;background:#00000080;display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100vw;z-index:10000}.tutorial-dialog[data-v-517e9a56]{background:#fff;border-radius:8px;box-shadow:0 25px 50px -12px #00000040;max-width:400px;min-width:300px;padding:1rem;position:fixed;transition:top .2s,left .2s,transform .2s;z-index:10001}.tutorial-message[data-v-517e9a56]{color:#374151;line-height:1.5;margin-bottom:1rem}.tutorial-ok-btn[data-v-517e9a56]{background:#3b82f6;border:none;border-radius:6px;color:#fff;cursor:pointer;font-weight:700;padding:.5rem 1rem;transition:background-color .2s;width:100%}.tutorial-ok-btn[data-v-517e9a56]:hover{background:#2563eb}.tutorial-ok-btn[data-v-517e9a56]:active{background:#1d4ed8}.nazorigaki-page{background:linear-gradient(135deg,#f5f7fa,#c3cfe2);font-family:Hiragino Sans,ヒラギノ角ゴシック,Yu Gothic,メイリオ,sans-serif;min-height:100vh}.header{align-items:center;background:#fff;box-shadow:0 2px 10px #0000001a;display:flex;justify-content:space-between;padding:1rem 2rem;position:sticky;top:0;z-index:100}.title{color:#2d3748;font-size:1.8rem;font-weight:700;margin:0}.controls{display:flex;gap:1rem}.btn{align-items:center;border:none;border-radius:6px;cursor:pointer;display:inline-flex;font-weight:500;gap:.5rem;padding:.5rem 1rem;text-decoration:none;transition:all .2s ease}.btn-primary{background:#4f46e5;color:#fff}.btn-primary:hover{background:#4338ca;transform:translateY(-1px)}.btn-secondary{background:#6b7280;color:#fff}.btn-secondary:hover{background:#374151;transform:translateY(-1px)}.btn-outline{background:transparent;border:2px solid #4f46e5;color:#4f46e5}.btn-outline:hover{background:#4f46e5;color:#fff}.btn-danger{background:#dc2626;color:#fff}.btn-danger:hover{background:#b91c1c}.btn:disabled{cursor:not-allowed;opacity:.5}.btn:disabled,.btn:disabled:hover{transform:none}.completed-state,.loading-state,.ready-state{align-items:center;display:flex;flex-direction:column;justify-content:center;min-height:calc(100vh - 100px);padding:2rem;text-align:center}.loading-spinner{animation:spin 1s linear infinite;border:4px solid #e5e7eb;border-radius:50%;border-top-color:#4f46e5;height:40px;margin-bottom:1rem;width:40px}@keyframes spin{to{transform:rotate(1turn)}}.completion-message h2,.welcome-message h2{color:#1f2937;font-size:2rem;margin-bottom:1rem}.completion-message p,.welcome-message p{color:#6b7280;font-size:1.1rem;margin-bottom:2rem}.completion-icon{font-size:4rem;margin-bottom:1rem}.completion-actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}.practicing-state{padding:2rem}.main-content{display:grid;gap:2rem;grid-template-columns:2fr 1fr;margin:0 auto;max-width:1400px}.left-panel{background:#fff;border-radius:12px;box-shadow:0 4px 20px #0000001a;overflow:hidden}.right-panel{display:flex;flex-direction:column;gap:1rem}.canvas-section{align-items:center;background:#fafbfc;border-bottom:1px solid #e5e7eb;display:flex;justify-content:center;min-height:400px;position:relative}.controls-section{background:#fff;padding:1.5rem}.font-selection{margin-bottom:1.5rem}.font-label{color:#374151;display:block;font-weight:600;margin-bottom:.5rem}.font-options{display:flex;gap:1rem}.radio-label{align-items:center;border-radius:6px;cursor:pointer;display:flex;gap:.5rem;padding:.5rem;transition:background-color .2s}.radio-label:hover{background:#f3f4f6}.radio-label input[type=radio]{margin:0}.navigation-buttons{display:flex;gap:.5rem;justify-content:center}.completion-section,.progress-section{background:#fff;border-radius:12px;box-shadow:0 4px 20px #0000001a;padding:1.5rem}.completion-section h3,.progress-section h3{color:#1f2937;font-size:1.2rem;font-weight:600;margin:0 0 1rem;text-align:center}@media (max-width:1024px){.main-content{gap:1rem;grid-template-columns:1fr}.header{flex-direction:column;gap:1rem;padding:1rem}.title{font-size:1.5rem}.practicing-state{padding:1rem}}@media (max-width:640px){.controls{flex-direction:column;width:100%}.btn{justify-content:center}.completion-actions,.font-options,.navigation-buttons{flex-direction:column}.completion-actions{width:100%}}.practicing-state{animation:fadeIn .5s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}#canvas-container{height:400px;position:relative;width:100%}#completion-image{min-height:200px}#progress-bar{min-height:100px}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#f1f5f9}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#94a3b8}