.category-selection-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;background:linear-gradient(135deg,#fafafa,#e8f4f8);padding:24px}.category-selection-screen h1{font-size:32px;font-weight:700;color:#2d3436;margin-bottom:48px;text-align:center}.category-grid{display:flex;flex-direction:column;gap:24px;width:100%;max-width:400px}.category-grid button{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:140px;padding:20px;border:none;border-radius:24px;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 6px 20px #00000026}.category-grid button:nth-child(1){background:linear-gradient(135deg,#ff6b6b,#ff5252)}.category-grid button:nth-child(2){background:linear-gradient(135deg,#4ecdc4,#26b5ab)}.category-grid button:nth-child(3){background:linear-gradient(135deg,#9b59b6,#8e44ad)}.category-icon{font-size:48px;font-weight:700;color:#fff;line-height:1;margin-bottom:8px}.category-label{font-size:20px;font-weight:600;color:#fff}.category-grid button:hover{transform:translateY(-4px);box-shadow:0 8px 25px #0003}.category-grid button:active{transform:translateY(-2px)}.category-grid button:focus-visible{outline:4px solid #2196f3;outline-offset:4px}@media(min-width:480px){.category-selection-screen h1{font-size:40px}.category-grid{flex-direction:row;max-width:800px;gap:20px}.category-grid button{flex:1;min-height:180px}.category-icon{font-size:64px}.category-label{font-size:24px}}.character-selection-screen{display:flex;flex-direction:column;width:100%;height:100vh;background-color:#fff}.character-selection-screen .back-button{position:absolute;top:16px;left:16px;z-index:10;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:8px 16px;border:none;border-radius:12px;background-color:#f0f0f0;color:#2d3436;font-size:16px;font-weight:600;cursor:pointer;transition:background-color .2s,transform .15s}.character-selection-screen .back-button:hover{background-color:#e0e0e0}.character-selection-screen .back-button:active{transform:scale(.95)}.character-selection-screen h1{padding-top:80px;padding-bottom:16px;font-size:28px;font-weight:700;color:#2d3436;text-align:center;margin:0}.character-selection-screen .character-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:16px;padding:16px;justify-content:center;max-width:600px;margin:0 auto;width:100%}.character-selection-screen .character-card{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100px;height:100px;min-width:88px;min-height:88px;padding:12px;border:2px solid #e0e0e0;border-radius:16px;background-color:#fafafa;font-size:48px;font-weight:700;color:#2d3436;cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s;box-shadow:0 2px 8px #00000014}.character-selection-screen .character-card:hover{transform:translateY(-4px);border-color:#2196f3;box-shadow:0 4px 12px #2196f340}.character-selection-screen .character-card:active{transform:translateY(-2px) scale(.98)}.character-selection-screen .character-card:focus-visible{outline:4px solid #2196f3;outline-offset:2px}@media(min-width:480px){.character-selection-screen h1{font-size:36px;padding-top:100px}.character-selection-screen .character-grid{gap:20px;padding:24px;max-width:800px}.character-selection-screen .character-card{width:120px;height:120px;font-size:56px}}._button_6riu8_5{min-width:44px;min-height:44px;padding:12px 24px;font-family:Comic Sans MS,Chalkboard SE,sans-serif;font-size:18px;font-weight:700;text-align:center;border:none;border-radius:12px;cursor:pointer;transition:all .15s ease-in-out;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}._button_6riu8_5:focus-visible{outline:3px solid var(--focus-color, #2196f3);outline-offset:2px}._primary_6riu8_36{background-color:#ff6b6b;color:#fff;--focus-color: #ff5252}._primary_6riu8_36:hover:not(:disabled){background-color:#ff5252;transform:scale(1.02)}._primary_6riu8_36:active:not(:disabled){background-color:#e03e3e;transform:scale(.98)}._secondary_6riu8_53{background-color:#4ecdc4;color:#fff;--focus-color: #26b5ab}._secondary_6riu8_53:hover:not(:disabled){background-color:#26b5ab;transform:scale(1.02)}._secondary_6riu8_53:active:not(:disabled){background-color:#1a9e96;transform:scale(.98)}._action_6riu8_70{background-color:#ffe66d;color:#2d3436;border:3px solid #ffb74d;--focus-color: #ffb74d}._action_6riu8_70:hover:not(:disabled){background-color:#ffd93d;transform:scale(1.02)}._action_6riu8_70:active:not(:disabled){background-color:#f4c430;transform:scale(.98)}._disabled_6riu8_88{opacity:.5;cursor:not-allowed;pointer-events:none}.nav-buttons{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;width:100%;background-color:#fff}.nav-buttons__center{display:flex;gap:12px;align-items:center}@media(max-width:480px){.nav-buttons{flex-wrap:wrap;justify-content:center;padding:12px;gap:10px}.nav-buttons__center{order:-1;width:100%;justify-content:center}}.tracing-screen{display:flex;flex-direction:column;width:100%;height:100vh;background-color:#fafafa}.tracing-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background-color:#fff;box-shadow:0 2px 8px #00000014;z-index:10;position:relative}.tracing-header .back-button{display:flex;align-items:center;justify-content:center;min-width:60px;min-height:48px;padding:12px 20px;border:none;border-radius:12px;background-color:#f0f0f0;color:#2d3436;font-size:16px;font-weight:600;cursor:pointer;transition:background-color .2s,transform .15s;touch-action:manipulation}.tracing-header .back-button:hover{background-color:#e0e0e0}.tracing-header .back-button:active{transform:scale(.95)}.tracing-header .back-button:focus-visible{outline:3px solid #2196f3;outline-offset:2px}.character-display{display:flex;align-items:center;gap:8px}.character-label{font-size:16px;color:#636e72}.character-value{font-size:28px;font-weight:700;color:#2d3436}.tracing-canvas-container{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;overflow:hidden}.progress-indicator{margin-top:20px;display:flex;align-items:center;justify-content:center;gap:16px;font-size:18px;font-weight:600;color:#636e72;text-align:center}.progress-indicator .clear-button{display:flex;align-items:center;justify-content:center;min-width:80px;min-height:48px;padding:12px 20px;border:none;border-radius:8px;background-color:#ff6b6b;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .2s,transform .15s;touch-action:manipulation}.progress-indicator .clear-button:hover{background-color:#ff5252}.progress-indicator .clear-button:active{transform:scale(.95)}.progress-indicator .clear-button:focus-visible{outline:3px solid #2196f3;outline-offset:2px}.tracing-controls{padding:16px;background-color:#fff;box-shadow:0 -2px 8px #00000014}@media(max-width:480px){.tracing-header{padding:12px 16px}.character-label{font-size:14px}.character-value{font-size:24px}.tracing-canvas-container{padding:16px}.progress-indicator{font-size:16px;margin-top:16px}}.error-boundary{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem;background:linear-gradient(135deg,#ffecd2,#fcb69f)}.error-boundary__content{text-align:center;background:#fff;padding:3rem 2rem;border-radius:1.5rem;box-shadow:0 10px 30px #0000001a;max-width:400px;width:100%}.error-boundary__title{font-size:3rem;font-weight:700;color:#f59e0b;margin:0 0 1rem}.error-boundary__message{font-size:1.25rem;color:#374151;margin:0 0 2rem;line-height:1.6}.error-boundary__details{margin:1.5rem 0;text-align:left}.error-boundary__details summary{cursor:pointer;font-weight:600;color:#6b7280;padding:.5rem;border-radius:.375rem}.error-boundary__details summary:hover{background:#f3f4f6}.error-boundary__details pre{margin-top:.75rem;padding:1rem;background:#1f2937;color:#f9fafb;border-radius:.5rem;font-size:.875rem;overflow-x:auto;white-space:pre-wrap;word-break:break-all}.error-boundary__button{min-height:56px;min-width:200px;padding:1rem 2rem;font-size:1.25rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:1rem;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 4px 15px #667eea66}.error-boundary__button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea80}.error-boundary__button:active{transform:translateY(0)}.app-layout{width:100vw;height:100vh;overflow:hidden;background-color:#f5f5f5}.app-container{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.category-selection-screen,.character-selection-screen,.tracing-screen{flex:1;display:flex;flex-direction:column;padding:1rem;overflow-y:auto}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-size-adjust:100%;-webkit-text-size-adjust:100%}body{font-family:Nunito,Quicksand,Comic Sans MS,system-ui,-apple-system,sans-serif;font-weight:400;line-height:1.5;color:#2d3436;background-color:#fff;overflow:hidden}#root{width:100vw;height:100vh;overflow:hidden}button{font:inherit;border:none;background:none;cursor:pointer;outline:none}ul,ol{list-style:none}img,svg{display:block;max-width:100%}.sr-only,.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:focus-visible{outline:3px solid #2196f3;outline-offset:2px}.skip-link{position:absolute;top:-40px;left:0;background:#2196f3;color:#fff;padding:8px 16px;text-decoration:none;border-radius:0 0 4px;z-index:100;transition:top .3s}.skip-link:focus{top:0}*{-webkit-tap-highlight-color:transparent}button,.ui-element{user-select:none;-webkit-user-select:none}button,a,input{transition:all .2s ease-in-out}