*{margin:0;padding:0;box-sizing:border-box}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh;background-color:#f8f9fa;color:#333}#root{min-height:100vh}a{color:#667eea;text-decoration:none}a:hover{text-decoration:underline}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#667eea;color:#fff;cursor:pointer;transition:all .3s ease}button:hover{background-color:#5568d3;transform:translateY(-1px)}button:active{transform:translateY(0)}#root{margin:0;padding:0}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.navbar{background-color:#fff;box-shadow:0 2px 8px #0000001a;position:sticky;top:0;z-index:1000}.navbar-container{max-width:1200px;margin:0 auto;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center}.navbar-logo{display:flex;align-items:center;text-decoration:none}.navbar-logo-img{height:40px;transition:opacity .3s ease}.navbar-logo:hover .navbar-logo-img{opacity:.8}.navbar-menu{display:flex;list-style:none;gap:2rem;margin:0;padding:0}.navbar-link{color:#333;font-weight:500;transition:color .3s ease;position:relative}.navbar-link:hover{color:#667eea;text-decoration:none}.navbar-link:after{content:"";position:absolute;width:0;height:2px;bottom:-4px;left:0;background:linear-gradient(135deg,#667eea,#764ba2);transition:width .3s ease}.navbar-link:hover:after{width:100%}@media(max-width:768px){.navbar-container{padding:1rem}.navbar-logo{font-size:1.2rem}.navbar-menu{gap:1rem}.navbar-link{font-size:.9rem}}.home{min-height:100vh;display:flex;flex-direction:column}.home-header{padding:4rem 2rem 2rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;text-align:center}.home-title{font-size:3rem;margin-bottom:.5rem;font-weight:700}.home-subtitle{font-size:1.5rem;opacity:.95}.home-main{flex:1;max-width:1200px;margin:0 auto;padding:3rem 2rem;width:100%}.home-intro{margin-bottom:3rem;font-size:1.1rem;line-height:1.6;color:#555;text-align:center}.home-features h2{font-size:2rem;margin-bottom:2rem;color:#333;text-align:center}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;margin-top:2rem}.feature-card{background:#fff;padding:2rem;border-radius:12px;box-shadow:0 4px 6px #0000001a;transition:transform .3s ease,box-shadow .3s ease}.feature-card:hover{transform:translateY(-4px);box-shadow:0 8px 12px #00000026}.feature-card h3{font-size:1.5rem;margin-bottom:1rem;color:#667eea}.feature-card p{color:#666;line-height:1.6}.home-footer{padding:2rem;background:#f5f5f5;color:#666;margin-top:auto;text-align:center}.tutorial-container{max-width:1200px;margin:0 auto;padding:3rem 2rem;min-height:calc(100vh - 200px)}.tutorial-header{margin-bottom:3rem}.tutorial-header h1{font-size:2.5rem;color:#333;margin-bottom:.5rem}.tutorial-header p{font-size:1.1rem;color:#666}.tutorial-section{margin-bottom:3rem}.tutorial-category{font-size:1.8rem;color:#333;margin-bottom:1.5rem;border-left:4px solid #667eea;padding-left:1rem}.tutorial-grid{display:flex;flex-direction:column;gap:0}.tutorial-card{background:#fff;padding:1.5rem 2rem;transition:all .2s ease;text-decoration:none;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e0e0e0}.tutorial-card:first-child{border-top:1px solid #e0e0e0}.tutorial-card:hover{background-color:#f8f9fa;padding-left:2.5rem;text-decoration:none}.tutorial-card h3{font-size:1.3rem;color:#333;margin-bottom:.3rem;font-weight:600}.tutorial-card p{color:#666;line-height:1.5;margin:0;font-size:.95rem}.tutorial-link-arrow{color:#667eea;font-weight:600;font-size:1.2rem;margin-left:1rem;flex-shrink:0}.tutorial-content{background:#fff;padding:3rem;border-radius:12px;box-shadow:0 4px 6px #0000001a;line-height:1.8}.tutorial-content h1{color:#333;border-bottom:3px solid #667eea;padding-bottom:.5rem;margin-bottom:1.5rem}.tutorial-content h2{color:#444;margin-top:2rem;margin-bottom:1rem;border-left:4px solid #667eea;padding-left:1rem}.tutorial-content h3{color:#555;margin-top:1.5rem;margin-bottom:.75rem}.tutorial-content p{color:#666;margin-bottom:1rem}.tutorial-content ul,.tutorial-content ol{margin-left:2rem;margin-bottom:1rem;color:#666}.tutorial-content li{margin-bottom:.5rem}.tutorial-content code{background-color:#f5f5f5;padding:.2rem .4rem;border-radius:4px;font-family:Courier New,monospace;color:#d63384;font-size:.9em}.tutorial-content pre{background-color:#f5f5f5;padding:1rem;border-radius:8px;overflow-x:auto;margin-bottom:1rem}.tutorial-content pre code{background-color:transparent;padding:0;color:#333}.tutorial-content blockquote{border-left:4px solid #667eea;margin:1.5rem 0;padding:1rem 1.5rem;background-color:#f8f9fa;color:#555}.tutorial-content a{color:#667eea;text-decoration:none;font-weight:500}.tutorial-content a:hover{text-decoration:underline}.tutorial-content hr{border:none;border-top:2px solid #e0e0e0;margin:2rem 0}.tutorial-content table{width:100%;border-collapse:collapse;margin:1.5rem 0}.tutorial-content th,.tutorial-content td{border:1px solid #ddd;padding:.75rem;text-align:left}.tutorial-content th{background-color:#667eea;color:#fff;font-weight:600}.tutorial-content tr:nth-child(2n){background-color:#f8f9fa}@media(max-width:768px){.tutorial-container{padding:2rem 1rem}.tutorial-content{padding:2rem 1.5rem}.tutorial-content h1{font-size:1.75rem}.tutorial-content h2{font-size:1.5rem}}.tutorial-detail-container{max-width:1200px;margin:0 auto;padding:2rem 2rem 4rem;min-height:calc(100vh - 200px)}.tutorial-breadcrumb{margin-bottom:2rem;color:#666;font-size:.95rem}.tutorial-breadcrumb a{color:#667eea;text-decoration:none}.tutorial-breadcrumb a:hover{text-decoration:underline}.tutorial-breadcrumb span{color:#999}.tutorial-loading{padding:4rem 2rem;font-size:1.2rem;color:#666}.tutorial-not-found{padding:4rem 2rem}.tutorial-not-found h1{font-size:2rem;color:#333;margin-bottom:1rem}.tutorial-not-found p{color:#666;margin-bottom:2rem}.tutorial-detail-content{background:#fff;padding:3rem;line-height:1.6;color:#24292f;font-size:16px}.tutorial-detail-content *{text-align:left}.tutorial-detail-content h1{color:#24292f;border-bottom:1px solid #d0d7de;padding-bottom:.3em;margin-top:24px;margin-bottom:16px;font-size:2em;font-weight:600}.tutorial-detail-content h2{color:#24292f;border-bottom:1px solid #d0d7de;padding-bottom:.3em;margin-top:24px;margin-bottom:16px;font-size:1.5em;font-weight:600}.tutorial-detail-content h3{color:#24292f;margin-top:24px;margin-bottom:16px;font-size:1.25em;font-weight:600}.tutorial-detail-content h4{color:#24292f;margin-top:24px;margin-bottom:16px;font-size:1em;font-weight:600}.tutorial-detail-content p{margin-top:0;margin-bottom:16px}.tutorial-detail-content ul,.tutorial-detail-content ol{margin-top:0;margin-bottom:16px;padding-left:2em}.tutorial-detail-content li{margin-bottom:.25em}.tutorial-detail-content li+li{margin-top:.25em}.tutorial-detail-content strong{font-weight:600}.tutorial-detail-content code{background-color:#afb8c133;padding:.2em .4em;border-radius:6px;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:85%}.tutorial-detail-content pre{background-color:#f6f8fa;padding:16px;border-radius:6px;overflow-x:auto;margin-bottom:16px;font-size:85%;line-height:1.45}.tutorial-detail-content pre code{background-color:transparent;padding:0;border-radius:0;font-size:100%}.tutorial-detail-content blockquote{border-left:.25em solid #d0d7de;margin:0 0 16px;padding:0 1em;color:#57606a}.tutorial-detail-content blockquote>:first-child{margin-top:0}.tutorial-detail-content blockquote>:last-child{margin-bottom:0}.tutorial-detail-content a{color:#0969da;text-decoration:none}.tutorial-detail-content a:hover{text-decoration:underline}.tutorial-detail-content hr{height:.25em;padding:0;margin:24px 0;background-color:#d0d7de;border:0}.tutorial-detail-content table{width:100%;border-collapse:collapse;border-spacing:0;margin-top:0;margin-bottom:16px}.tutorial-detail-content th,.tutorial-detail-content td{border:1px solid #d0d7de;padding:6px 13px}.tutorial-detail-content th{background-color:#f6f8fa;font-weight:600}.tutorial-detail-content tr{background-color:#fff;border-top:1px solid #d0d7de}.tutorial-detail-content tr:nth-child(2n){background-color:#f6f8fa}.tutorial-detail-content img{max-width:100%;box-sizing:content-box}.tutorial-detail-footer{margin-top:3rem}.back-link{display:inline-block;color:#667eea;text-decoration:none;font-weight:500;padding:.75rem 1.5rem;border:2px solid #667eea;border-radius:8px;transition:all .3s ease}.back-link:hover{background-color:#667eea;color:#fff;text-decoration:none;transform:translateY(-2px)}@media(max-width:768px){.tutorial-detail-container{padding:1.5rem 1rem 3rem}.tutorial-detail-content{padding:2rem 1.5rem}.tutorial-detail-content h1{font-size:1.75rem}.tutorial-detail-content h2{font-size:1.5rem}.tutorial-detail-content h3{font-size:1.25rem}}