@font-face{font-family:HomeVideo;src:url(/fonts/HomeVideo-BLG6G.ttf)format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:HomeVideo;src:url(/fonts/HomeVideoBold-R90Dv.ttf)format("truetype");font-weight:700;font-style:normal;font-display:swap}:root{--bg:#0d0d14;--bg-elevated:#161622;--bg-card:#1e1e2e;--border:#2d2d44;--text:#e8e8f0;--text-muted:#9a9ab8;--text-h:#fff;--accent:#a855f7;--accent-hover:#c084fc;--accent-bg:#a855f71f;--accent-border:#a855f7;--accent-soft:#7c3aed;--success:#22c55e;--warning:#f59e0b;--danger:#ef4444;--font-mono:"JetBrains Mono", "Fira Code", "Consolas", monospace;--font-sans:"JetBrains Mono", "Fira Code", "Consolas", monospace;--font-display:"HomeVideo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--shadow:0 8px 32px #0006;--shadow-sm:0 2px 8px #0000004d;--radius:8px;--radius-lg:12px;--transition:.2s ease;--header-height:64px;--purple-gradient:linear-gradient(135deg, #a855f7 0%, #7c3aed 50%, #5b21b6 100%);--purple-glow:#a855f74d}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scroll-padding-top:var(--header-height);background:var(--purple-gradient)}.matrix-bg{pointer-events:none;z-index:0;opacity:.35;width:100%;height:100%;position:fixed;top:0;left:0}@media (prefers-reduced-motion:reduce){.matrix-bg{display:none}}body{font-family:var(--font-sans);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;z-index:1;background:0 0;line-height:1.6;position:relative}#root{z-index:1;background:#0d0d14eb;min-height:100vh;position:relative}h1,h2,h3,h4{font-family:var(--font-display);font-weight:700}a{color:var(--accent);transition:color var(--transition);text-decoration:none}a:hover{color:var(--accent-hover)}code{font-family:var(--font-mono);background:var(--bg-card);color:#f5d0fe;border-radius:4px;padding:.15em .4em;font-size:.9em}pre{font-family:var(--font-mono);border:1px solid var(--border);border-radius:var(--radius);background:#0d0d14;margin:1rem 0;padding:1rem 1.25rem;font-size:.85rem;line-height:1.55;overflow-x:auto}pre code{color:var(--text);font-size:inherit;background:0 0;padding:0}.container{width:100%;max-width:1000px;margin:0 auto;padding:0 1.5rem}.section{padding:4rem 0}.section-alt{background:var(--bg-elevated)}.section-lead{color:var(--text-muted);text-align:center;max-width:700px;margin:.5rem auto 1.5rem;font-size:1.15rem}h1,h2,h3,h4{color:var(--text-h);font-weight:600;line-height:1.3}h1{font-size:clamp(2rem,5vw,3rem)}h2{margin-bottom:1rem;font-size:clamp(1.75rem,4vw,2.25rem)}h3{margin-bottom:.75rem;font-size:1.25rem}h4{margin-bottom:.5rem;font-size:1rem}p{margin:.75rem 0}ul,ol{margin:.75rem 0 .75rem 1.5rem}li{margin:.4rem 0}strong{color:var(--text-h)}img{max-width:100%;height:auto}.mt-lg{margin-top:2rem}.mt-md{margin-top:1.5rem}.mt-sm{margin-top:1rem}.note{color:var(--text-muted);font-size:.9rem;font-style:italic}.table-wrapper{margin:1rem 0;overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:.85rem}th,td{text-align:left;border-bottom:1px solid var(--border);padding:.6rem .85rem}th{background:var(--bg-card);color:var(--text-h);white-space:nowrap;font-weight:600}tr:hover td{background:#a855f714}.comparison-table th:nth-child(2),.comparison-table td:nth-child(2){font-family:var(--font-mono)}.simple-table th,.simple-table td{padding:.5rem .75rem}.header{z-index:100;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);height:var(--header-height);background:#0d0d14f2;position:sticky;top:0}.nav{justify-content:space-between;align-items:center;gap:1.5rem;height:100%;display:flex}.logo{font-family:var(--font-display);color:var(--text-h);flex-shrink:0;align-items:center;gap:.5rem;font-size:1.25rem;font-weight:700;display:flex}.logo-icon{background:var(--purple-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.nav-links{align-items:center;gap:.25rem;margin-left:auto;list-style:none;display:flex}.nav-links a{border-radius:var(--radius);color:var(--text-muted);transition:all var(--transition);white-space:nowrap;padding:.5rem .85rem;font-size:.9rem}.nav-links a:hover,.nav-links a.active{color:var(--text-h);background:var(--accent-bg);border:1px solid var(--accent-border)}.nav-toggle{border:1px solid var(--border);border-radius:var(--radius);color:var(--text);cursor:pointer;transition:all var(--transition);background:0 0;padding:.5rem;display:none}.nav-toggle:hover{border-color:var(--accent);background:var(--accent-bg)}.btn{border-radius:var(--radius);cursor:pointer;transition:all var(--transition);white-space:nowrap;border:none;align-items:center;gap:.5rem;padding:.65rem 1.25rem;font-size:.9rem;font-weight:500;text-decoration:none;display:inline-flex}.btn-primary{background:var(--purple-gradient);color:#fff;box-shadow:0 4px 16px var(--purple-glow)}.btn-primary:hover{filter:brightness(1.1);box-shadow:0 6px 24px var(--purple-glow);color:#fff;transform:translateY(-1px)}.btn-secondary{background:var(--bg-card);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{background:var(--border);color:var(--text-h);border-color:var(--accent)}.btn-github{background:var(--bg-card);border:1px solid var(--border);color:var(--text);border-radius:var(--radius);flex-shrink:0;padding:.5rem 1rem;font-size:.85rem}.btn-github:hover{background:var(--border);color:var(--text-h)}.hero{text-align:center;padding:5rem 0 4rem;position:relative;overflow:hidden}.hero:before{content:"";background:radial-gradient(circle, var(--purple-glow) 0%, transparent 70%);pointer-events:none;z-index:0;width:600px;height:600px;position:absolute;top:-50%;right:-20%}.hero-content{z-index:1;position:relative}.badges{flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:1.5rem;display:flex}.badge{background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent-border);border-radius:999px;padding:.25rem .75rem;font-size:.75rem;font-weight:500;display:inline-block}.hero h1{background:var(--purple-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;max-width:800px;margin:0 auto 1.5rem;line-height:1.2}.hero-description{color:var(--text-muted);max-width:700px;margin:0 auto 2rem;font-size:1.2rem}.hero-actions{flex-wrap:wrap;justify-content:center;gap:1rem;margin-bottom:2.5rem;display:flex}.hero-code-animated{width:100%;max-width:700px;margin:0 auto}.animated-code-header{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius) var(--radius) 0 0;border-bottom:none;justify-content:space-between;align-items:center;padding:.6rem 1rem;display:flex}.code-badge{color:var(--accent);background:var(--accent-bg);text-transform:uppercase;letter-spacing:.05em;border-radius:999px;padding:.2rem .6rem;font-size:.75rem;font-weight:500}.animated-code-block{border:1px solid var(--border);border-radius:0 0 var(--radius) var(--radius);box-sizing:border-box;background:#0d0d14;border-top:none;width:100%;min-height:200px;max-height:500px;margin:0;padding:1rem;overflow:auto}.animated-code-block code{font-family:var(--font-mono);color:var(--text);white-space:pre-wrap;word-wrap:break-word;font-size:.85rem;line-height:1.6;display:block}@keyframes cursor-blink{0%,50%{opacity:1}51%,to{opacity:0}}.examples-indicator{justify-content:center;gap:.5rem;margin-top:1rem;padding:0 .5rem;display:flex}.indicator-dot{border:2px solid var(--border);cursor:pointer;width:8px;height:8px;transition:all var(--transition);background:0 0;border-radius:50%;padding:0}.indicator-dot:hover{border-color:var(--accent);transform:scale(1.2)}.indicator-dot.active{background:var(--accent);border-color:var(--accent);transform:scale(1.15)}.indicator-dot:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@keyframes dice-wobble{0%{transform:rotateX(0)rotateY(0)scale(1)}25%{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,90deg)) scale(1.05)}50%{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,90deg)) scale(.98)}75%{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,90deg)) scale(1.02)}to{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,90deg)) scale(1)}}@media (prefers-reduced-motion:reduce){.dice-cube{transition:none;animation:none}.dice-cube.flipping{animation:none}}@media (width<=768px){.hero h1{font-size:2.5rem}.hero-tagline{font-size:1rem}.dice-cube,.dice-face{width:160px;height:160px}.dice-face.front{transform:rotateY(0)translateZ(80px)}.dice-face.back{transform:rotateY(180deg)translateZ(80px)}.dice-face.right{transform:rotateY(90deg)translateZ(80px)}.dice-face.left{transform:rotateY(-90deg)translateZ(80px)}.dice-face.top{transform:rotateX(-90deg)translateZ(80px)}.dice-face.bottom{transform:rotateX(90deg)translateZ(80px)}.dice-icon{font-size:2.5rem}.dice-content h3{font-size:.95rem}.dice-content p{font-size:.75rem}}.components-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem;margin:2rem 0;display:grid}.component-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);transition:all var(--transition);padding:1.5rem;position:relative}.component-card:hover{border-color:var(--accent-border);box-shadow:var(--shadow);transform:translateY(-2px)}.component-number{color:var(--accent);opacity:.1;font-size:3rem;font-weight:700;position:absolute;top:1rem;right:1rem}.component-card h3{margin-bottom:.5rem}.component-card p{color:var(--text-muted);margin:0;font-size:.9rem}.code-example{margin:1.5rem 0}.code-example pre{background:linear-gradient(#161622 0%,#0d0d14 100%)}.install-tabs{margin-top:1.5rem}.tab-buttons{border-bottom:1px solid var(--border);flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem;padding-bottom:1rem;display:flex}.tab-btn{border:1px solid var(--border);color:var(--text-muted);border-radius:var(--radius);cursor:pointer;transition:all var(--transition);background:0 0;padding:.5rem 1rem;font-size:.85rem}.tab-btn:hover{border-color:var(--accent);color:var(--text)}.tab-btn.active{background:var(--purple-gradient);color:#fff;border-color:#0000}.tab-panel{animation:.2s fadeIn;display:none}.tab-panel.active{display:block}.tab-panel[hidden]{display:none!important}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.tab-panel h4{margin:1.25rem 0 .75rem}.tab-panel h4:first-child{margin-top:0}.language-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.5rem;margin-top:1.5rem;display:grid}.lang-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);transition:all var(--transition);padding:1.5rem}.lang-card:hover{border-color:var(--accent-border)}.lang-card h3{border-bottom:1px solid var(--border);align-items:center;gap:.5rem;margin-bottom:1rem;padding-bottom:.75rem;display:flex}.lang-card h3:before{content:"";background:var(--purple-gradient);border-radius:2px;width:8px;height:8px}.lang-content pre{margin:0;font-size:.8rem}.lang-content .table-wrapper{margin:.75rem 0 0}.pipeline{flex-direction:column;align-items:center;gap:.5rem;margin:2rem 0;padding:1rem;display:flex}.pipeline-step{flex-direction:column;align-items:center;width:100%;display:flex}.step-box{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);font-family:var(--font-mono);color:var(--text-h);transition:all var(--transition);text-align:center;width:100%;max-width:400px;padding:.75rem 1.5rem;font-size:.9rem;font-weight:500}.step-box.highlighted{border-color:var(--accent-border);background:var(--accent-bg);color:var(--accent)}.step-desc{color:var(--text-muted);font-size:.75rem;font-family:var(--font-mono);margin:.25rem 0 .5rem}.arrow{color:var(--text-muted);margin:.25rem 0;font-size:1.25rem}.footer{background:var(--bg-elevated);border-top:1px solid var(--border);text-align:center;color:var(--text-muted);padding:2.5rem 0;font-size:.9rem}.footer p{margin:.25rem 0}.footer a{font-weight:500}.footer-signature{color:var(--text-muted);border-top:1px solid var(--border);margin-top:1rem;padding-top:1rem;font-size:.8rem}.footer-signature a{color:var(--accent);font-weight:500;text-decoration:none}.footer-signature a:hover{text-decoration:underline}.checklist{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.5rem;margin:1rem 0;padding:0;list-style:none;display:grid}.checklist li{margin:.4rem 0;padding-left:1.75rem;position:relative}.checklist li:before{content:"✓";color:var(--success);font-weight:700;position:absolute;left:0}.limitations-list{margin:1rem 0;padding-left:1.5rem}.limitations-list li{margin:.75rem 0;line-height:1.7}.roadmap-list{counter-reset:roadmap;margin:1rem 0;padding:0;list-style:none}.roadmap-list li{margin:1rem 0;padding-left:3rem;line-height:1.6;position:relative}.priority{background:var(--accent-bg);width:2rem;height:2rem;color:var(--accent);border:1px solid var(--accent-border);border-radius:var(--radius);justify-content:center;align-items:center;font-size:.85rem;font-weight:600;display:flex;position:absolute;top:0;left:0}@media (width<=900px){.nav-toggle{justify-content:center;align-items:center;display:flex}.nav-links{top:var(--header-height);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);opacity:0;visibility:hidden;box-shadow:var(--shadow);background:#0d0d14fa;flex-direction:column;gap:.5rem;padding:1.5rem;transition:all .3s;position:fixed;left:0;right:0;transform:translateY(-100%)}.nav-links.open{opacity:1;visibility:visible;transform:translateY(0)}.nav-links a{text-align:center;width:100%;padding:.75rem 1rem}.btn-github{justify-content:center;width:100%}}@media (width<=768px){.hero{padding:3rem 0 2rem}.hero:before{display:none}.hero-actions{flex-direction:column;align-items:center}.btn{justify-content:center;width:100%;max-width:280px}.components-grid,.language-grid{grid-template-columns:1fr}.pipeline-step{width:100%}.step-box{max-width:none}.tab-buttons{justify-content:center}.checklist{grid-template-columns:1fr}.container{padding:0 1rem}.section{padding:3rem 0}.hero-code-animated{max-width:100%}.animated-code-block{min-height:180px;max-height:400px;padding:.75rem;font-size:.75rem}.line-number{min-width:1.5rem;font-size:.7rem}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}::selection{background:var(--accent-bg);color:var(--accent)}.builtins-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;margin-top:1.5rem;display:grid}.builtin-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);transition:all var(--transition);padding:1.25rem}.builtin-card:hover{border-color:var(--accent-border);box-shadow:var(--shadow);transform:translateY(-2px)}.builtin-header{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.75rem;margin-bottom:.5rem;display:flex}.builtin-name{color:var(--accent);background:var(--accent-bg);border-radius:var(--radius);padding:.2rem .5rem;font-size:1rem;font-weight:600}.builtin-result{color:var(--text-muted);font-size:.85rem;font-family:var(--font-mono);background:var(--bg);border-radius:var(--radius);padding:.15rem .4rem}.builtin-desc{color:var(--text-muted);margin:.75rem 0;font-size:.9rem;line-height:1.5}.builtin-example{background:var(--bg);border-radius:var(--radius);flex-wrap:wrap;align-items:center;gap:.5rem;padding:.75rem;font-size:.85rem;display:flex}.builtin-example code:first-child{color:var(--accent);background:var(--accent-bg)}.example-arrow{color:var(--text-muted);font-family:var(--font-mono)}.example-result{color:var(--success);font-family:var(--font-mono);border-radius:var(--radius);background:#22b9501a;padding:.1rem .35rem}@media (width<=768px){.builtins-grid{grid-template-columns:1fr}.builtin-header{flex-direction:column;align-items:flex-start}.syntax-concept-tabs{flex-wrap:wrap}.syntax-tab{padding:.4rem .75rem;font-size:.8rem}.syntax-code-block{min-height:180px;max-height:400px;padding:.75rem;font-size:.75rem}.line-number{min-width:1.5rem;font-size:.7rem}}.syntax-animated-container{width:100%;max-width:800px;margin:0 auto}.syntax-concept-tabs{flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:1.5rem;display:flex}.syntax-tab{border:1px solid var(--border);color:var(--text-muted);border-radius:var(--radius);cursor:pointer;transition:all var(--transition);white-space:nowrap;background:0 0;padding:.5rem 1rem;font-size:.85rem}.syntax-tab:hover{border-color:var(--accent);color:var(--text)}.syntax-tab.active{background:var(--purple-gradient);color:#fff;border-color:#0000}.syntax-tab:disabled{opacity:.5;cursor:not-allowed}.syntax-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.syntax-animated-terminal{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}.syntax-terminal-header{background:var(--bg);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:.6rem 1rem;display:flex}.concept-badge{color:var(--accent);background:var(--accent-bg);text-transform:uppercase;letter-spacing:.05em;border-radius:999px;padding:.2rem .6rem;font-size:.75rem;font-weight:500}.example-badge{color:var(--text-muted);background:var(--bg-card);border-radius:999px;padding:.2rem .5rem;font-size:.75rem}.code-dots{gap:.35rem;display:flex}.code-dots span{background:var(--border);border-radius:50%;width:8px;height:8px}.code-dots span:first-child{background:#ef4444}.code-dots span:nth-child(2){background:#f59e0b}.code-dots span:nth-child(3){background:#22c55e}.syntax-code-block{box-sizing:border-box;background:#0d0d14;border:none;border-radius:0;width:100%;min-height:250px;max-height:500px;margin:0;padding:1rem;overflow:auto}.syntax-code-block code{font-family:var(--font-mono);color:var(--text);white-space:pre-wrap;word-wrap:break-word;font-size:.85rem;line-height:1.6;display:block}.code-line{align-items:flex-start;gap:1rem;min-height:1.6em;padding:.1rem 0;display:flex}.line-number{color:var(--text-muted);opacity:.5;-webkit-user-select:none;user-select:none;text-align:right;flex-shrink:0;min-width:2rem;font-size:.8rem}.line-content{word-break:break-word;overflow-wrap:anywhere;flex:1;min-width:0}.cursor-line{align-items:flex-start;gap:1rem;min-height:1.6em;padding:.1rem 0;display:flex}.cursor{background:var(--accent);vertical-align:text-bottom;width:8px;height:1.2em;margin-left:2px;animation:1s step-end infinite cursor-blink;display:inline-block}.syntax-example-indicators{justify-content:center;gap:.5rem;margin-top:1rem;padding:0 .5rem;display:flex}.syntax-example-dot{border:2px solid var(--border);cursor:pointer;width:8px;height:8px;transition:all var(--transition);background:0 0;border-radius:50%;padding:0}.syntax-example-dot:hover{border-color:var(--accent);transform:scale(1.25)}.syntax-example-dot.active{background:var(--purple-gradient);box-shadow:0 0 16px var(--purple-glow);border-color:#0000;transform:scale(1.2)}.syntax-example-dot:focus-visible{outline:2px solid var(--accent);outline-offset:3px}@media (prefers-reduced-motion:reduce){.syntax-animated-terminal .cursor{opacity:1;animation:none}}@media (width<=768px){.syntax-concept-tabs{flex-wrap:wrap}.syntax-tab{padding:.4rem .75rem;font-size:.8rem}.syntax-code-block{min-height:180px;max-height:400px;padding:.75rem;font-size:.75rem}.line-number{min-width:1.5rem;font-size:.7rem}}@media (width<=900px){.tutorial-layout{grid-template-columns:1fr}}.tutorial-step-button{border:1px solid var(--border);border-radius:var(--radius);width:100%;color:var(--text);text-align:left;cursor:pointer;transition:all var(--transition);background:0 0;align-items:center;gap:.75rem;padding:.625rem .75rem;font-size:.85rem;display:flex}.tutorial-step-button:hover,.tutorial-step.active .tutorial-step-button{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}.tutorial-content{min-width:0}.tutorial-intro{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:2rem;padding:1.5rem}.tutorial-intro h2{margin-top:0;margin-bottom:.75rem;font-size:1.25rem}.tutorial-intro p{color:var(--text-muted);margin:.5rem 0}.reference-list{flex-direction:column;gap:1.5rem;display:flex}.section-header{margin-bottom:1.5rem}.section-header h2{margin-bottom:.5rem}.section-lead{color:var(--text-muted);max-width:700px}.reference-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);transition:all var(--transition);overflow:hidden}.reference-item:hover{border-color:var(--accent-border);box-shadow:var(--shadow)}.reference-header{background:var(--bg);border-bottom:1px solid var(--border);padding:1rem 1.5rem}.reference-header h3{color:var(--text-h);margin:0;font-size:1.1rem}.reference-content{padding:1.5rem}.step-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);margin:1.5rem 0;padding:1.5rem}.step-header{border-bottom:1px solid var(--border);margin-bottom:1rem;padding-bottom:.75rem}.step-header h2{color:var(--text-h);margin:0;font-size:1.25rem}.step-description{color:var(--text-muted);margin-bottom:1.5rem;line-height:1.6}.step-code{margin-top:1rem}.tutorial-next{background:var(--accent-bg);border:1px solid var(--accent-border);border-radius:var(--radius-lg);margin-top:3rem;padding:1.5rem}.tutorial-next h2{color:var(--accent);margin-top:0;margin-bottom:1rem}.tutorial-next ul{margin:1rem 0 0 1.5rem}.tutorial-next li{margin:.5rem 0}.hero-tagline{color:var(--text-muted);max-width:600px;margin:0 auto 2rem;font-size:1.15rem;font-weight:400}.page-hero{text-align:center;margin-bottom:2rem}.page-hero h1{margin-bottom:.5rem;font-size:2rem;font-weight:700}.page-hero .hero-tagline{color:var(--text-muted);max-width:600px;margin:0 auto 1.5rem;font-size:1.15rem}.tutorial-layout{grid-template-columns:260px 1fr;align-items:stretch;gap:2rem;display:grid}@media (width<=900px){.tutorial-layout{grid-template-columns:1fr}}.video-figure{text-align:center;max-width:800px;margin:2rem auto}.video-player{border-radius:var(--radius-lg);background:var(--bg);border:1px solid var(--border);width:100%;max-width:800px;height:auto}figcaption{color:var(--text-muted);text-align:center;margin-top:.5rem;font-size:.85rem}.tutorial-progress{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);max-height:calc(100vh - 120px);padding:1rem;position:sticky;top:100px;overflow-y:auto}.tutorial-progress-title{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border);margin-bottom:1rem;padding-bottom:.5rem;font-size:.85rem;font-weight:600}.tutorial-steps{flex-direction:column;gap:.25rem;margin:0;padding:0;list-style:none;display:flex}.tutorial-step{list-style:none}.tutorial-step-button{border:1px solid var(--border);border-radius:var(--radius);width:100%;color:var(--text);text-align:left;cursor:pointer;transition:all var(--transition);white-space:nowrap;background:0 0;align-items:center;gap:.75rem;padding:.625rem .75rem;font-size:.85rem;display:flex}.tutorial-step-button:hover,.tutorial-step.active .tutorial-step-button{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}.tutorial-step.completed .tutorial-step-button{background:var(--bg);border-color:var(--success);color:var(--success)}.step-number{min-width:1.5rem;height:1.5rem;color:var(--text-muted);background:var(--bg);border:1px solid var(--border);border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;font-size:.75rem;font-weight:600;display:flex}.tutorial-step.active .step-number{background:var(--accent);border-color:var(--accent);color:#fff}.tutorial-step.completed .step-number{background:var(--success);border-color:var(--success);color:#fff}.step-label{white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.step-indicator{background:var(--accent);border-radius:50%;flex-shrink:0;width:6px;height:6px}@media (width<=768px){.tutorial-progress{top:var(--header-height);z-index:50;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);background:#161622f2;max-height:none;margin-bottom:1rem;padding:.75rem 1rem;position:sticky}.tutorial-progress-title{justify-content:space-between;align-items:center;font-size:.75rem;display:flex}.tutorial-steps{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;gap:.35rem;margin-top:.5rem;padding-bottom:.5rem;display:flex;overflow-x:auto}.tutorial-step{scroll-snap-align:center;flex:none;min-width:100px}.tutorial-step-button{flex-direction:column;gap:.2rem;min-width:44px;min-height:44px;padding:.5rem .6rem}.step-label{white-space:nowrap;text-overflow:ellipsis;max-width:120px;font-size:.7rem;overflow:hidden}.step-number{min-width:1.25rem;height:1.25rem;font-size:.65rem}.tutorial-step.active .step-number{background:var(--accent);color:#fff}.tutorial-step.active .step-label{color:var(--accent);font-weight:600}.tutorial-step.completed .step-number{background:var(--success);color:#fff}.tutorial-step.completed .step-label{color:var(--success)}.step-indicator{display:none}}@media print{.header,.hero-actions,.btn,.install-tabs,.footer{display:none!important}.section{page-break-inside:avoid}body{color:#000;background:#fff}pre,code{color:#333!important;background:#f5f5f5!important}}:root{--accent-text:#c084fc}.badge,.concept-badge,.code-badge,.builtin-name,.builtin-example code,.step-box.highlighted,.tutorial-next a,button[aria-current=step] .step-label{color:var(--accent-text)}.skip-link{z-index:1000;background:var(--accent-soft);color:#fff;border-radius:0 0 .5rem;padding:.75rem 1.25rem;font-weight:600;text-decoration:none;position:absolute;top:0;left:-9999px}.skip-link:focus-visible{outline:2px solid var(--accent-text);left:0}:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}.animated-code-block code,.syntax-code-block code,.code-example pre{text-align:left}.builtin-example code:first-child{color:var(--accent-text)}@media (width<=900px){.nav-toggle{min-width:44px;min-height:44px;padding:.75rem}}@media (width<=768px){.syntax-tab{min-height:44px;padding:.75rem 1rem;font-size:.9rem}.tutorial-step-button{min-height:44px;padding:.875rem 1rem}.btn-github{min-height:44px;padding:.75rem 1.25rem}.video-player{touch-action:manipulation}}html,body{overflow-x:hidden}@media (width<=768px){.container{padding-left:1rem;padding-right:1rem}.step-code pre{-webkit-overflow-scrolling:touch;max-width:100%;overflow-x:auto}.syntax-code-block,.animated-code-block{-webkit-overflow-scrolling:touch;overflow-x:auto}}