.app{width:100%;min-height:100vh;background:var(--bg-primary);color:var(--text-primary);display:flex;flex-direction:column}.tutorial-code{font-family:var(--font-family-mono);background:var(--bg-tertiary);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);font-size:var(--font-size-sm);color:var(--text-primary)}.tutorial-pre{background:var(--bg-code);color:var(--text-light);padding:var(--spacing-md);border-radius:var(--radius-md);overflow-x:auto;line-height:var(--line-height-normal);font-family:var(--font-family-mono);font-size:var(--font-size-sm);margin:var(--spacing-md) 0}.tutorial-pre .tutorial-code{background:transparent;padding:0;color:inherit}.app-loading{display:flex;align-items:center;justify-content:center;min-height:50vh;color:var(--text-secondary)}.app-error{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:50vh;padding:var(--spacing-lg);text-align:center;color:var(--color-error)}:root{--color-primary: #667eea;--color-primary-hover: #5a67d8;--color-secondary: #764ba2;--color-accent: #3b82f6;--color-accent-hover: #2563eb;--text-primary: #1f2937;--text-secondary: #6b7280;--text-muted: #9ca3af;--text-light: #e2e8f0;--bg-primary: #ffffff;--bg-secondary: #f8fafc;--bg-tertiary: #f1f5f9;--bg-dark: #1e293b;--bg-code: #1a202c;--color-success: #10b981;--color-success-bg: #dcfce7;--color-warning: #f59e0b;--color-warning-bg: #fef3c7;--color-error: #dc2626;--color-error-bg: #fee2e2;--color-info: #3b82f6;--color-info-bg: #eff6ff;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 2rem;--spacing-xl: 3rem;--spacing-2xl: 4rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--font-family-base: system-ui, Avenir, Helvetica, Arial, sans-serif;--font-family-mono: "Fira Code", Monaco, Consolas, "Ubuntu Mono", monospace;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 2rem;--font-size-4xl: 2.5rem;--line-height-tight: 1.2;--line-height-normal: 1.5;--line-height-relaxed: 1.6;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .1);--transition-fast: .15s ease;--transition-normal: .2s ease;--transition-slow: .3s ease;font-family:var(--font-family-base);line-height:var(--line-height-normal);font-weight:400;color:var(--text-primary);background-color:var(--bg-primary);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;padding:0;min-height:100vh;width:100%;background-color:var(--bg-primary);color:var(--text-primary)}#root{width:100%;min-height:100vh}h1,h2,h3,h4,h5,h6{line-height:var(--line-height-tight);margin:0 0 var(--spacing-md) 0;color:var(--text-primary)}h1{font-size:var(--font-size-3xl);font-weight:700}h2{font-size:var(--font-size-2xl);font-weight:600}h3{font-size:var(--font-size-xl);font-weight:600}p{line-height:var(--line-height-relaxed);margin:0 0 var(--spacing-md) 0;color:var(--text-secondary)}a{color:var(--color-accent);text-decoration:none;transition:color var(--transition-normal)}a:hover{color:var(--color-accent-hover)}a:focus{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:var(--radius-sm)}button{font-family:var(--font-family-base);font-size:var(--font-size-base);font-weight:500;line-height:var(--line-height-normal);padding:var(--spacing-sm) var(--spacing-md);border:1px solid transparent;border-radius:var(--radius-md);background-color:var(--color-accent);color:var(--text-light);cursor:pointer;transition:all var(--transition-normal);display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs)}button:hover{background-color:var(--color-accent-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}button:focus,button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}button:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}code{font-family:var(--font-family-mono);font-size:var(--font-size-sm);background:var(--bg-tertiary);color:var(--text-primary);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm)}pre{font-family:var(--font-family-mono);font-size:var(--font-size-sm);line-height:var(--line-height-normal);background:var(--bg-code);color:var(--text-light);padding:var(--spacing-md);border-radius:var(--radius-md);overflow-x:auto;margin:var(--spacing-md) 0}pre code{background:transparent;padding:0;color:inherit}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}