:root{--ctp-rosewater: #f5e0dc;--ctp-flamingo: #f2cdcd;--ctp-pink: #f5c2e7;--ctp-mauve: #cba6f7;--ctp-red: #f38ba8;--ctp-maroon: #eba0ac;--ctp-peach: #fab387;--ctp-yellow: #f9e2af;--ctp-green: #a6e3a1;--ctp-teal: #94e2d5;--ctp-sky: #89dceb;--ctp-sapphire: #74c7ec;--ctp-blue: #89b4fa;--ctp-lavender: #b4befe;--ctp-text: #cdd6f4;--ctp-subtext1: #bac2de;--ctp-subtext0: #a6adc8;--ctp-overlay2: #9399b2;--ctp-overlay1: #7f849c;--ctp-overlay0: #6c7086;--ctp-surface2: #585b70;--ctp-surface1: #45475a;--ctp-surface0: #313244;--ctp-base: #1e1e2e;--ctp-mantle: #181825;--ctp-crust: #11111b;--bg: var(--ctp-base);--bg-card: var(--ctp-mantle);--bg-input: var(--ctp-surface0);--text: var(--ctp-text);--text-muted: var(--ctp-subtext0);--accent: var(--ctp-mauve);--accent2: var(--ctp-blue);--accent3: var(--ctp-green);--error: var(--ctp-red);--warning: var(--ctp-yellow);--success: var(--ctp-green);--border: var(--ctp-surface1);--border-focus: var(--ctp-mauve);--font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", "SF Mono", monospace;--font-sans: "Inter", system-ui, -apple-system, sans-serif;--radius: 8px;--radius-lg: 16px;--transition: .2s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}img,svg{display:block;max-width:100%}button{cursor:pointer;font:inherit;color:inherit}a{color:inherit;text-decoration:none}ul,ol{list-style:none}html{font-size:16px;scroll-behavior:smooth}body{font-family:var(--font-sans);background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh;overflow-x:hidden}#app{min-height:100vh;display:flex;flex-direction:column}.cm-editor{font-family:var(--font-mono)!important;font-size:.875rem!important;height:100%!important}.cm-editor .cm-scroller{overflow:auto!important}.cm-editor .cm-content{padding:1rem!important}.cm-editor .cm-gutters{border-right:1px solid var(--border)!important;background:var(--ctp-mantle)!important;color:var(--ctp-overlay0)!important}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--ctp-mantle)}::-webkit-scrollbar-thumb{background:var(--ctp-surface1);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--ctp-surface2)}.home-view{position:relative;overflow:hidden}.home-bg{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden}.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.15;animation:float 20s ease-in-out infinite}.orb-1{width:500px;height:500px;background:radial-gradient(circle,var(--ctp-mauve),transparent);top:-10%;left:10%;animation-delay:0s}.orb-2{width:400px;height:400px;background:radial-gradient(circle,var(--ctp-blue),transparent);top:30%;right:-5%;animation-delay:-7s}.orb-3{width:350px;height:350px;background:radial-gradient(circle,var(--ctp-green),transparent);bottom:-5%;left:30%;animation-delay:-14s}@keyframes float{0%,to{transform:translate(0) scale(1)}25%{transform:translate(40px,-30px) scale(1.1)}50%{transform:translate(-20px,50px) scale(.9)}75%{transform:translate(-50px,-20px) scale(1.05)}}.hero{text-align:center;padding:6rem 2rem 4rem;max-width:900px;margin:0 auto}.hero-badge{display:inline-block;background:var(--bg-input);color:var(--accent);border:1px solid var(--border);border-radius:100px;padding:.25rem .75rem;font-size:.75rem;font-weight:600;font-family:var(--font-mono);margin-bottom:1.5rem}.hero-title{font-size:clamp(2rem,5vw,3.5rem);font-weight:800;line-height:1.2;margin-bottom:1.5rem}.hero-title-line{display:block}.gradient-text{background:linear-gradient(135deg,var(--ctp-mauve),var(--ctp-pink),var(--ctp-blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-subtitle{font-size:1.125rem;color:var(--text-muted);max-width:600px;margin:0 auto 2.5rem;line-height:1.7}.hero-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.btn-lg{padding:.75rem 2rem;font-size:1rem;border-radius:var(--radius-lg)}.code-compare{display:flex;align-items:center;justify-content:center;gap:2rem;padding:2rem 2rem 4rem;max-width:1100px;margin:0 auto}.code-card{flex:1;background:var(--ctp-mantle);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 4px 24px #0000004d;transition:transform var(--transition),box-shadow var(--transition)}.code-card:hover{transform:translateY(-2px);box-shadow:0 8px 32px #0006}.code-card.dim{opacity:.55}.code-card-header{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background:var(--ctp-surface0);border-bottom:1px solid var(--border)}.code-dot{width:10px;height:10px;border-radius:50%}.code-dot.red{background:var(--ctp-red)}.code-dot.yellow{background:var(--ctp-yellow)}.code-dot.green{background:var(--ctp-green)}.code-label{margin-left:.5rem;font-size:.75rem;color:var(--text-muted);font-family:var(--font-mono)}.code-card pre{padding:1.25rem 1.5rem;overflow-x:auto;font-family:var(--font-mono);font-size:.8125rem;line-height:1.7;color:var(--text);margin:0}.tok-kw{color:var(--ctp-mauve)}.tok-fn{color:var(--ctp-blue)}.tok-macro{color:var(--ctp-teal)}.tok-str{color:var(--ctp-green)}.tok-comment{color:var(--ctp-overlay0);font-style:italic}.code-compare-divider{display:flex;flex-direction:column;align-items:center;gap:.5rem}.compare-label{writing-mode:vertical-rl;font-size:.75rem;color:var(--ctp-green);font-weight:600;letter-spacing:.05em;text-transform:uppercase}.features{padding:4rem 2rem;max-width:1100px;margin:0 auto}.section-title{text-align:center;font-size:2rem;font-weight:700;margin-bottom:3rem}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}.feature-card{background:var(--ctp-mantle);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2rem;transition:transform var(--transition),border-color var(--transition);backdrop-filter:blur(8px)}.feature-card:hover{transform:translateY(-4px);border-color:var(--accent)}.feature-icon{font-size:1.75rem;margin-bottom:1rem}.feature-card h3{font-size:1.125rem;font-weight:700;margin-bottom:.5rem}.feature-card p{color:var(--text-muted);font-size:.875rem;line-height:1.6}.feature-card code{background:var(--bg-input);padding:.1em .4em;border-radius:4px;font-size:.8125rem}.cta-section{text-align:center;padding:4rem 2rem 6rem}.cta-section h2{font-size:2rem;font-weight:700;margin-bottom:.75rem}.cta-section p{color:var(--text-muted);margin-bottom:2rem}@media(max-width:768px){.hero{padding:4rem 1rem 2rem}.code-compare{flex-direction:column;padding:1rem 1rem 2rem;gap:1rem}.compare-label{writing-mode:horizontal-tb}.feature-grid{grid-template-columns:1fr}}.playground-view{display:flex;flex-direction:column;height:calc(100vh - 113px)}.playground-toolbar{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1.5rem;background:var(--ctp-surface0);border-bottom:1px solid var(--border)}.pg-file-label{font-family:var(--font-mono);font-size:.8125rem;color:var(--text-muted)}.pg-toolbar-actions{display:flex;gap:.5rem}.btn-run{background:var(--ctp-green);color:var(--ctp-base)}.btn-run:hover{filter:brightness(1.15)}.playground-main{display:flex;flex:1;min-height:0}.pg-editor-wrap{flex:1;border-right:1px solid var(--border);overflow:hidden}.pg-editor-wrap .cm-editor{height:100%!important}.pg-output-wrap{flex:1;overflow:auto;background:var(--ctp-mantle)}.output-pane{padding:1.5rem;height:100%}.output-placeholder{color:var(--text-muted);font-style:italic;font-size:.875rem}.output-line{font-family:var(--font-mono);font-size:.8125rem;line-height:1.6;white-space:pre-wrap;word-break:break-all;color:var(--text);margin:0}.output-line.error{color:var(--ctp-red);white-space:pre-wrap}@media(max-width:768px){.playground-view{height:auto;min-height:calc(100vh - 113px)}.playground-main{flex-direction:column}.pg-editor-wrap{height:50vh;border-right:none;border-bottom:1px solid var(--border)}.pg-output-wrap{min-height:200px}}.tour-view{display:flex;height:calc(100vh - 113px)}.tour-left{width:40%;display:flex;flex-direction:column;border-right:1px solid var(--border);background:var(--ctp-mantle)}.tour-instructions{flex:1;overflow-y:auto;padding:2rem}.tour-breadcrumb{font-family:var(--font-mono);font-size:.75rem;color:var(--text-muted);margin-bottom:.5rem}.tour-lesson-title{font-size:1.5rem;font-weight:700;margin-bottom:1.5rem}.tour-content h2{font-size:1.125rem;font-weight:700;margin:1.5rem 0 .75rem}.tour-content h3{font-size:1rem;font-weight:600;margin:1rem 0 .5rem}.tour-content p{color:var(--text-muted);font-size:.875rem;line-height:1.7;margin-bottom:.75rem}.tour-content code{background:var(--bg-input);padding:.1em .4em;border-radius:4px;font-family:var(--font-mono);font-size:.8125rem;color:var(--ctp-peach)}.tour-content pre{background:var(--ctp-crust);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;overflow-x:auto;margin-bottom:1rem}.tour-content pre code{background:none;padding:0;color:var(--text)}.tour-content ul,.tour-content ol{margin:.5rem 0 .75rem 1.5rem;list-style:disc}.tour-content li{color:var(--text-muted);font-size:.875rem;margin-bottom:.25rem}.tour-hints{margin-top:1rem}.hint-toggle{background:var(--ctp-surface0);border:1px solid var(--border);border-radius:var(--radius);padding:.75rem 1rem;margin-bottom:.5rem;cursor:pointer;transition:border-color var(--transition)}.hint-toggle[open]{border-color:var(--accent)}.hint-toggle summary{font-size:.8125rem;font-weight:600;color:var(--accent)}.hint-body{margin-top:.5rem;font-size:.8125rem;color:var(--text-muted);line-height:1.6}.tour-nav{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:1rem 2rem;border-top:1px solid var(--border);background:var(--ctp-mantle);font-size:.8125rem;font-weight:600}.tour-nav-btn{color:var(--accent);transition:color var(--transition)}.tour-nav-btn:hover{color:var(--text)}.tour-nav-btn.disabled{color:var(--ctp-overlay0);pointer-events:none}.tour-nav-sep{color:var(--ctp-overlay0)}.tour-lesson-check{display:inline-block;width:18px;height:18px;vertical-align:middle;margin-left:.5rem;opacity:0;transition:opacity .3s}.tour-lesson-check.done{opacity:1;color:var(--ctp-green)}.tour-lesson-check.done:after{content:"✓";font-weight:700}.tour-right{flex:1;display:flex;flex-direction:column;min-width:0}.tour-editor-toolbar{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background:var(--ctp-crust);border-bottom:1px solid var(--border)}.tour-editor-label{font-size:.75rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.tour-check-btn{padding:.35rem 1rem;font-size:.8125rem;font-weight:600;color:var(--ctp-base);background:var(--accent);border:none;border-radius:var(--radius);cursor:pointer;transition:background var(--transition)}.tour-check-btn:hover{background:var(--ctp-blue)}.tour-editor-wrap{flex:0 0 55%;overflow:hidden;border-bottom:1px solid var(--border)}.tour-editor-wrap .cm-editor{height:100%!important}.tour-test-results{padding:.5rem 1rem;font-size:.8125rem;background:var(--ctp-crust);border-bottom:1px solid var(--border);max-height:120px;overflow-y:auto}.tour-test-results:empty{display:none}.tour-test-summary{padding:.4rem .75rem;border-radius:var(--radius);font-weight:600;display:flex;align-items:center;gap:.5rem}.tour-test-icon{font-size:1rem}.tour-test-pass{background:#a6e3a11f;color:var(--ctp-green);border:1px solid rgba(166,227,161,.25)}.tour-test-fail{background:#f38ba81f;color:var(--ctp-red);border:1px solid rgba(243,139,168,.25)}.tour-test-error{background:#fab3871f;color:var(--ctp-peach);border:1px solid rgba(250,179,135,.25)}.tour-test-result-item{padding:.3rem .75rem;font-size:.75rem;font-family:var(--font-mono)}.tour-test-item-fail{color:var(--ctp-red)}.tour-test-item-fail code{color:var(--ctp-maroon);background:none;font-size:.7rem}.tour-output-wrap{flex:1;overflow:auto;background:var(--ctp-mantle)}.tour-contents{max-width:1000px;margin:0 auto;padding:3rem 2rem}.tour-contents h1{font-size:2rem;font-weight:700;margin-bottom:2rem}.toc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}.toc-chapter-card{background:var(--ctp-mantle);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem}.toc-chapter-card h3{font-size:1.125rem;font-weight:700;margin-bottom:.75rem;color:var(--accent)}.toc-chapter-card ol{list-style:decimal;padding-left:1.25rem}.toc-chapter-card li{margin-bottom:.375rem}.toc-chapter-card a{color:var(--text-muted);font-size:.875rem;transition:color var(--transition)}.toc-chapter-card a:hover{color:var(--text)}.toc-check{display:inline-block;margin-left:.4rem;font-size:.75rem}.toc-check.done{color:var(--ctp-green)}.toc-chapter-progress{font-size:.7rem;font-weight:400;color:var(--ctp-green);margin-left:.5rem}@media(max-width:768px){.tour-view{flex-direction:column;height:auto}.tour-left{width:100%;border-right:none;border-bottom:1px solid var(--border)}.tour-instructions{max-height:none}.tour-editor-wrap{flex:0 0 40vh}.toc-grid{grid-template-columns:1fr}}.site-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 2rem;background:var(--ctp-mantle);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;backdrop-filter:blur(12px)}.logo{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.25rem;color:var(--text)}.logo-icon{font-size:1.5rem;color:var(--accent)}.main-nav{display:flex;align-items:center;gap:1.5rem}.main-nav a{color:var(--text-muted);font-size:.875rem;font-weight:500;transition:color var(--transition);padding:.25rem 0;border-bottom:2px solid transparent}.main-nav a:hover,.main-nav a.active{color:var(--text)}.main-nav a.active{border-bottom-color:var(--accent)}.nav-github{display:flex;align-items:center;gap:.375rem}.site-footer{border-top:1px solid var(--border);background:var(--ctp-mantle);padding:1.5rem 2rem;margin-top:auto}.footer-content{display:flex;align-items:center;justify-content:space-between;font-size:.8rem;color:var(--text-muted)}.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1.25rem;border:none;border-radius:var(--radius);font-weight:600;font-size:.875rem;transition:all var(--transition)}.btn-primary{background:var(--accent);color:var(--ctp-base)}.btn-primary:hover{filter:brightness(1.15);transform:translateY(-1px)}.btn-secondary{background:var(--bg-input);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{background:var(--ctp-surface1)}#view{flex:1;display:flex;flex-direction:column}@media(max-width:768px){.site-header{padding:.75rem 1rem}.main-nav{gap:.75rem}.nav-github-label{display:none}.footer-content{flex-direction:column;gap:.5rem;text-align:center}}