@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap";:root{--bg-primary:#0d1117;--bg-surface:#161b22;--bg-surface-raised:#1c2128;--bg-overlay:#21262d;--border-default:#30363d;--border-muted:#21262d;--text-primary:#c9d1d9;--text-secondary:#8b949e;--text-muted:#6e7681;--text-on-accent:#fff;--accent-blue:#58a6ff;--accent-green:#3fb950;--accent-orange:#d29922;--accent-red:#f85149;--accent-purple:#bc8cff;--color-rebuild:#d29922;--color-rebuild-bg:#d2992226;--color-active:#3fb950;--color-active-bg:#3fb95026;--color-paused:#8b949e;--color-disposed:#f85149;--color-disposed-bg:#f8514926;--font-ui:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", "Fira Code", "Cascadia Code", 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;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--sidebar-width:280px;--content-max-width:900px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 2px #0000004d;--shadow-md:0 4px 12px #0006;--shadow-lg:0 8px 24px #00000080;--transition-fast:.15s ease;--transition-base:.25s ease;--transition-slow:.4s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:var(--font-ui);font-size:var(--font-size-base);color:var(--text-primary);background-color:var(--bg-primary);min-height:100vh;line-height:1.6}#root{min-height:100vh}a{color:var(--accent-blue);text-decoration:none}a:hover{text-decoration:underline}code{font-family:var(--font-mono);background:var(--bg-overlay);border-radius:var(--radius-sm);padding:.15em .4em;font-size:.9em}button{font-family:var(--font-ui);cursor:pointer;color:inherit;background:0 0;border:none}:focus-visible{outline:2px solid var(--accent-blue);outline-offset:2px}::selection{background:#58a6ff4d}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border-default);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.layout{min-height:100vh;display:flex}.sidebar{width:var(--sidebar-width);background:var(--bg-surface);border-right:1px solid var(--border-default);z-index:10;flex-direction:column;height:100vh;display:flex;position:fixed;top:0;left:0;overflow-y:auto}.sidebar-header{padding:var(--space-6) var(--space-5);border-bottom:1px solid var(--border-default)}.sidebar-logo{font-size:var(--font-size-lg);color:var(--text-primary);align-items:center;gap:var(--space-2);font-weight:700;display:flex}.sidebar-logo span{color:var(--accent-blue)}.sidebar-version{font-size:var(--font-size-xs);color:var(--text-muted);font-family:var(--font-mono);margin-top:var(--space-1)}.sidebar-nav{padding:var(--space-4) 0;flex:1}.nav-item{align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-5);width:100%;font-size:var(--font-size-sm);color:var(--text-secondary);transition:background var(--transition-fast), color var(--transition-fast);text-align:left;border-left:3px solid #0000;display:flex}.nav-item:hover{background:var(--bg-overlay);color:var(--text-primary)}.nav-item.active{color:var(--accent-blue);border-left-color:var(--accent-blue);background:#58a6ff14}.nav-item-number{font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--text-muted);min-width:1.5em}.nav-item-check{color:var(--accent-green);margin-left:auto}.sidebar-project-section{border-top:1px solid var(--border-default);padding-top:var(--space-2)}.sidebar-section-divider{align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5) var(--space-1);color:var(--text-muted);display:flex}.sidebar-section-label{font-family:var(--font-mono);color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;font-size:10px}.sidebar-project-nav{padding-bottom:var(--space-2)}.nav-item-project.active-project{color:var(--accent-green);border-left-color:var(--accent-green);background:#3fb95014}.sidebar-footer{padding:var(--space-4) var(--space-5);border-top:1px solid var(--border-default);font-size:var(--font-size-xs);color:var(--text-muted)}.sidebar-progress{background:var(--bg-overlay);height:4px;margin-top:var(--space-2);border-radius:2px;overflow:hidden}.sidebar-progress-bar{background:var(--accent-green);height:100%;transition:width var(--transition-base);border-radius:2px}.main-content{margin-left:var(--sidebar-width);flex:1;min-height:100vh}.content-area{max-width:var(--content-max-width);padding:var(--space-10) var(--space-8);margin:0 auto}@media (width<=768px){.sidebar{transition:transform var(--transition-base);transform:translate(-100%)}.sidebar.open{transform:translate(0)}.main-content{margin-left:0}.mobile-toggle{display:flex}.content-area{padding:var(--space-6) var(--space-4)}}.mobile-toggle{top:var(--space-4);left:var(--space-4);z-index:20;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:var(--space-2);color:var(--text-primary);display:none;position:fixed}.code-block{margin:var(--space-4) 0;border-radius:var(--radius-md);border:1px solid var(--border-default);position:relative;overflow:hidden}.code-block-header{padding:var(--space-2) var(--space-4);background:var(--bg-overlay);border-bottom:1px solid var(--border-default);font-size:var(--font-size-xs);justify-content:space-between;align-items:center;display:flex}.code-block-lang{font-family:var(--font-mono);color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.code-block-copy{align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-size:var(--font-size-xs);color:var(--text-secondary);transition:background var(--transition-fast), color var(--transition-fast);display:flex}.code-block-copy:hover{background:var(--bg-surface-raised);color:var(--text-primary)}.code-block-copy.copied{color:var(--accent-green)}.code-block-content{background:var(--bg-primary);overflow-x:auto}.code-block-content pre{padding:var(--space-4);font-family:var(--font-mono);font-size:var(--font-size-sm);tab-size:2;margin:0;line-height:1.7}.code-block-content code{font-size:inherit;background:0 0;padding:0}.code-line-highlight{width:calc(100% + var(--space-8));margin:0 calc(-1 * var(--space-4));padding:0 var(--space-4);border-left:3px solid var(--accent-blue);background:#58a6ff1a;display:inline-block}.code-line-rebuild{width:calc(100% + var(--space-8));margin:0 calc(-1 * var(--space-4));padding:0 var(--space-4);background:var(--color-rebuild-bg);border-left:3px solid var(--color-rebuild);display:inline-block}.code-toggle-group{gap:var(--space-1);padding:var(--space-2) var(--space-4);background:var(--bg-overlay);border-bottom:1px solid var(--border-default);display:flex}.code-toggle-btn{padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm);font-size:var(--font-size-xs);font-family:var(--font-mono);color:var(--text-secondary);transition:background var(--transition-fast), color var(--transition-fast)}.code-toggle-btn:hover{background:var(--bg-surface-raised)}.code-toggle-btn.active{color:var(--accent-blue);background:#58a6ff26}.demo-container{margin:var(--space-6) 0;border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--bg-surface);overflow:hidden}.demo-header{padding:var(--space-3) var(--space-5);background:var(--bg-overlay);border-bottom:1px solid var(--border-default);justify-content:space-between;align-items:center;display:flex}.demo-title{font-size:var(--font-size-sm);color:var(--text-primary);align-items:center;gap:var(--space-2);font-weight:600;display:flex}.demo-badge{font-size:var(--font-size-xs);font-family:var(--font-mono);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);color:var(--accent-blue);background:#58a6ff1f}.demo-body{grid-template-columns:1fr 1fr;min-height:300px;display:grid}.demo-body.single{grid-template-columns:1fr}.demo-panel{padding:var(--space-5)}.demo-panel+.demo-panel{border-left:1px solid var(--border-default)}.demo-panel-label{font-size:var(--font-size-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--space-3);font-weight:600}.demo-controls{padding:var(--space-4) var(--space-5);border-top:1px solid var(--border-default);background:var(--bg-overlay);gap:var(--space-3);flex-wrap:wrap;align-items:center;display:flex}.demo-btn{padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);font-size:var(--font-size-sm);transition:background var(--transition-fast), transform var(--transition-fast);font-weight:500}.demo-btn:active{transform:scale(.97)}.demo-btn-primary{background:var(--accent-blue);color:var(--text-on-accent)}.demo-btn-primary:hover{background:#4c94e8}.demo-btn-secondary{background:var(--bg-surface-raised);color:var(--text-primary);border:1px solid var(--border-default)}.demo-btn-secondary:hover{background:var(--bg-overlay)}.demo-btn-danger{color:var(--accent-red);background:#f8514926;border:1px solid #f851494d}.demo-btn-danger:hover{background:#f8514940}.demo-btn-success{color:var(--accent-green);background:#3fb95026;border:1px solid #3fb9504d}.demo-btn-success:hover{background:#3fb95040}.sim-widget{background:var(--bg-surface-raised);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-3);transition:border-color var(--transition-fast), box-shadow var(--transition-fast)}.sim-widget.rebuilding{border-color:var(--color-rebuild);box-shadow:0 0 12px var(--color-rebuild-bg), inset 0 0 8px var(--color-rebuild-bg);animation:.6s ease-out rebuild-pulse}@keyframes rebuild-pulse{0%{box-shadow:0 0 #d2992280}to{box-shadow:0 0 12px var(--color-rebuild-bg), inset 0 0 8px var(--color-rebuild-bg)}}.sim-widget-header{margin-bottom:var(--space-2);justify-content:space-between;align-items:center;display:flex}.sim-widget-name{font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--text-primary);font-weight:600}.sim-widget-rebuilds{font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--text-muted)}.sim-widget-rebuilds.active{color:var(--color-rebuild)}.sim-widget-value{font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--accent-blue)}.event-log{background:var(--bg-primary);border-radius:var(--radius-md);max-height:200px;padding:var(--space-3);margin-top:var(--space-3);overflow-y:auto}.event-log-item{font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--text-secondary);padding:var(--space-1) 0;border-bottom:1px solid var(--border-muted);align-items:center;gap:var(--space-2);display:flex}.event-log-item:last-child{border-bottom:none}.event-dot{border-radius:50%;flex-shrink:0;width:6px;height:6px}.event-dot.rebuild{background:var(--color-rebuild)}.event-dot.watch{background:var(--accent-blue)}.event-dot.read{background:var(--accent-purple)}.event-dot.state-change{background:var(--accent-green)}.event-dot.error{background:var(--accent-red)}@media (width<=768px){.demo-body{grid-template-columns:1fr}.demo-panel+.demo-panel{border-left:none;border-top:1px solid var(--border-default)}}.graph-container{background:var(--bg-primary);border-radius:var(--radius-md);padding:var(--space-4);position:relative;overflow:hidden}.graph-svg{width:100%;height:100%}.graph-node{cursor:pointer;transition:filter var(--transition-fast)}.graph-node:hover{filter:brightness(1.2)}.graph-node-rect{rx:8;ry:8;stroke-width:2px;transition:stroke var(--transition-fast), fill var(--transition-fast)}.graph-node-rect.provider{fill:var(--bg-surface-raised);stroke:var(--accent-blue)}.graph-node-rect.widget{fill:var(--bg-surface-raised);stroke:var(--accent-green)}.graph-node-rect.rebuilding{stroke:var(--color-rebuild);fill:var(--color-rebuild-bg);animation:.6s ease-out node-pulse}@keyframes node-pulse{0%{stroke-width:2px}50%{stroke-width:4px}to{stroke-width:2px}}.graph-node-label{fill:var(--text-primary);font-family:var(--font-mono);text-anchor:middle;dominant-baseline:central;pointer-events:none;font-size:12px}.graph-node-value{fill:var(--text-secondary);font-family:var(--font-mono);text-anchor:middle;pointer-events:none;font-size:10px}.graph-edge{stroke:var(--border-default);stroke-width:2px;fill:none;marker-end:url(#arrowhead)}.graph-edge.active{stroke:var(--accent-blue);stroke-dasharray:8 4;animation:1s linear infinite flow-dash}@keyframes flow-dash{to{stroke-dashoffset:-12px}}.graph-edge.ripple{stroke:var(--color-rebuild);stroke-width:3px;animation:.8s ease-out forwards ripple-flow}@keyframes ripple-flow{0%{stroke-dashoffset:100px;opacity:1}to{stroke-dashoffset:0;opacity:.6}}.graph-legend{gap:var(--space-4);margin-top:var(--space-3);font-size:var(--font-size-xs);color:var(--text-muted);display:flex}.graph-legend-item{align-items:center;gap:var(--space-1);display:flex}.graph-legend-dot{border-radius:2px;width:10px;height:10px}.quiz{margin:var(--space-8) 0;border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--bg-surface);overflow:hidden}.quiz-header{padding:var(--space-4) var(--space-5);background:var(--bg-overlay);border-bottom:1px solid var(--border-default);justify-content:space-between;align-items:center;display:flex}.quiz-title{font-size:var(--font-size-base);align-items:center;gap:var(--space-2);font-weight:600;display:flex}.quiz-progress{font-size:var(--font-size-xs);font-family:var(--font-mono);color:var(--text-muted)}.quiz-body{padding:var(--space-6) var(--space-5)}.quiz-question{font-size:var(--font-size-lg);margin-bottom:var(--space-5);font-weight:500;line-height:1.5}.quiz-options{gap:var(--space-3);flex-direction:column;display:flex}.quiz-option{align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);border:1px solid var(--border-default);border-radius:var(--radius-md);text-align:left;font-size:var(--font-size-sm);transition:border-color var(--transition-fast), background var(--transition-fast);line-height:1.5;display:flex}.quiz-option:hover:not(.disabled){border-color:var(--accent-blue);background:#58a6ff0d}.quiz-option.selected{border-color:var(--accent-blue);background:#58a6ff1a}.quiz-option.correct{border-color:var(--accent-green);background:var(--color-active-bg)}.quiz-option.incorrect{border-color:var(--accent-red);background:var(--color-disposed-bg)}.quiz-option.disabled{cursor:default;opacity:.7}.quiz-option-marker{border:2px solid var(--border-default);min-width:24px;height:24px;font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--text-muted);transition:border-color var(--transition-fast), background var(--transition-fast);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-weight:600;display:flex}.quiz-option.selected .quiz-option-marker{border-color:var(--accent-blue);background:var(--accent-blue);color:var(--text-on-accent)}.quiz-option.correct .quiz-option-marker{border-color:var(--accent-green);background:var(--accent-green);color:var(--text-on-accent)}.quiz-option.incorrect .quiz-option-marker{border-color:var(--accent-red);background:var(--accent-red);color:var(--text-on-accent)}.quiz-feedback{margin-top:var(--space-4);padding:var(--space-4);border-radius:var(--radius-md);font-size:var(--font-size-sm);line-height:1.6}.quiz-feedback.correct{background:var(--color-active-bg);color:var(--accent-green);border:1px solid #3fb9504d}.quiz-feedback.incorrect{background:var(--color-disposed-bg);color:var(--accent-red);border:1px solid #f851494d}.quiz-footer{padding:var(--space-4) var(--space-5);border-top:1px solid var(--border-default);justify-content:flex-end;display:flex}.quiz-next-btn{padding:var(--space-2) var(--space-5);border-radius:var(--radius-md);font-size:var(--font-size-sm);background:var(--accent-blue);color:var(--text-on-accent);transition:background var(--transition-fast);font-weight:500}.quiz-next-btn:hover{background:#4c94e8}.quiz-score{text-align:center;padding:var(--space-8) var(--space-5)}.quiz-score-number{font-size:var(--font-size-3xl);font-weight:700;font-family:var(--font-mono);color:var(--accent-green)}.quiz-score-label{font-size:var(--font-size-sm);color:var(--text-secondary);margin-top:var(--space-2)}.module{padding-bottom:var(--space-12)}.module-header{margin-bottom:var(--space-8)}.module-number{font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--accent-blue);text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--space-2);font-weight:600}.module-title{font-size:var(--font-size-3xl);color:var(--text-primary);margin-bottom:var(--space-3);font-weight:700;line-height:1.2}.module-subtitle{font-size:var(--font-size-lg);color:var(--text-secondary);line-height:1.5}.section{margin-bottom:var(--space-8)}.section-title{font-size:var(--font-size-xl);color:var(--text-primary);margin-bottom:var(--space-4);padding-bottom:var(--space-2);border-bottom:1px solid var(--border-muted);font-weight:600}.paragraph{font-size:var(--font-size-base);color:var(--text-primary);margin-bottom:var(--space-4);line-height:1.8}.callout{padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);margin:var(--space-4) 0;font-size:var(--font-size-sm);line-height:1.6}.callout-info{color:var(--accent-blue);background:#58a6ff14;border:1px solid #58a6ff33}.callout-warning{color:var(--accent-orange);background:#d2992214;border:1px solid #d2992233}.callout-tip{color:var(--accent-green);background:#3fb95014;border:1px solid #3fb95033}.callout strong{margin-bottom:var(--space-1);display:block}.inline-code{font-family:var(--font-mono);background:var(--bg-overlay);border-radius:var(--radius-sm);color:var(--accent-blue);padding:.15em .4em;font-size:.9em}.comparison-grid{gap:var(--space-4);margin:var(--space-4) 0;grid-template-columns:1fr 1fr;display:grid}.comparison-card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:var(--space-4)}.comparison-card-title{font-family:var(--font-mono);font-size:var(--font-size-sm);margin-bottom:var(--space-2);align-items:center;gap:var(--space-2);font-weight:600;display:flex}.comparison-card-title.negative{color:var(--accent-red)}.comparison-card-title.positive{color:var(--accent-green)}.comparison-card p{font-size:var(--font-size-sm);color:var(--text-secondary);line-height:1.5}.feature-list{margin:var(--space-4) 0;list-style:none}.feature-list li{padding:var(--space-2) 0;padding-left:var(--space-6);font-size:var(--font-size-sm);color:var(--text-secondary);line-height:1.5;position:relative}.feature-list li:before{content:"→";left:var(--space-2);color:var(--accent-blue);font-family:var(--font-mono);position:absolute}.module-nav{margin-top:var(--space-10);padding-top:var(--space-6);border-top:1px solid var(--border-default);justify-content:space-between;align-items:center;display:flex}.module-nav-btn{padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);font-size:var(--font-size-sm);background:var(--bg-surface);border:1px solid var(--border-default);color:var(--text-primary);transition:border-color var(--transition-fast);align-items:center;gap:var(--space-2);font-weight:500;display:flex}.module-nav-btn:hover{border-color:var(--accent-blue)}.module-nav-btn.primary{background:var(--accent-blue);color:var(--text-on-accent);border-color:var(--accent-blue)}@media (width<=768px){.comparison-grid{grid-template-columns:1fr}.module-title{font-size:var(--font-size-2xl)}}.lifecycle-viz{background:var(--bg-overlay);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:var(--space-5)}.lifecycle-track{align-items:center;gap:var(--space-2);margin-bottom:var(--space-4);flex-wrap:wrap;display:flex}.lifecycle-step{align-items:center;gap:var(--space-2);display:flex}.lifecycle-node{padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);border:1px solid var(--border-default);background:var(--bg-surface);font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--text-muted);transition:all .3s}.lifecycle-node.past{border-color:var(--accent-green);color:var(--accent-green);background:#3fb95014}.lifecycle-node.current{border-color:var(--accent-blue);color:var(--accent-blue);background:#58a6ff1f;box-shadow:0 0 0 2px #58a6ff33}.lifecycle-node.current.disposed{border-color:var(--accent-red);color:var(--accent-red);background:#f851491a;box-shadow:0 0 0 2px #f8514933}.lifecycle-node-label{font-weight:600}.lifecycle-arrow{font-family:var(--font-mono);color:var(--text-muted);font-size:var(--font-size-sm);transition:color .3s}.lifecycle-arrow.active{color:var(--accent-green)}.lifecycle-provider-name{font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--text-secondary);align-items:center;gap:var(--space-2);margin-bottom:var(--space-3);display:flex}.lifecycle-provider-tag{color:var(--accent-blue);border-radius:var(--radius-sm);font-size:var(--font-size-xs);background:#58a6ff1a;border:1px solid #58a6ff33;padding:.1em .4em}.lifecycle-desc{font-size:var(--font-size-sm);padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);border-left:3px solid var(--border-default);color:var(--text-secondary);line-height:1.5;transition:all .3s}.lifecycle-desc.created{border-left-color:var(--accent-green);background:#3fb9500f}.lifecycle-desc.active{border-left-color:var(--accent-blue);background:#58a6ff0f}.lifecycle-desc.paused{border-left-color:var(--accent-orange);background:#d299220f}.lifecycle-desc.disposed{border-left-color:var(--accent-red);background:#f851490f}.lifecycle-widget-preview{margin-top:var(--space-4)}.lifecycle-widget-box{padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);border:1px solid var(--border-default);font-family:var(--font-mono);font-size:var(--font-size-sm);justify-content:space-between;align-items:center;transition:all .4s;display:flex}.lifecycle-widget-box.visible{border-color:var(--accent-blue);color:var(--text-primary);background:#58a6ff14}.lifecycle-widget-box.hidden{border-color:var(--border-default);background:var(--bg-overlay);color:var(--text-muted);opacity:.5}.lifecycle-widget-status{font-size:var(--font-size-xs);color:var(--text-muted)}.experimental-badge{margin-left:var(--space-3);border-radius:var(--radius-sm);color:var(--accent-orange);font-size:var(--font-size-xs);font-weight:600;font-family:var(--font-mono);vertical-align:middle;letter-spacing:.04em;background:#d2992226;border:1px solid #d2992266;padding:.15em .5em;display:inline-block}.mutation-form-demo{gap:var(--space-4);padding:var(--space-2);flex-direction:column;display:flex}.mutation-status-bar{align-items:center;gap:var(--space-3);font-family:var(--font-mono);font-size:var(--font-size-sm);display:flex}.mutation-status-label{color:var(--text-muted)}.mutation-status-chip{border-radius:var(--radius-sm);font-size:var(--font-size-xs);border:1px solid #0000;padding:.2em .6em;font-weight:600;transition:all .3s}.mutation-status-chip.mutation-idle{background:var(--bg-overlay);border-color:var(--border-default);color:var(--text-muted)}.mutation-status-chip.mutation-pending{color:var(--accent-orange);background:#d2992226;border-color:#d2992266}.mutation-status-chip.mutation-success{border-color:var(--accent-green);color:var(--accent-green);background:#3fb9501f}.mutation-status-chip.mutation-error{border-color:var(--accent-red);color:var(--accent-red);background:#f851491a}.mutation-form{gap:var(--space-3);flex-direction:column;display:flex}.mutation-input-mock{padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);border:1px solid var(--border-default);background:var(--bg-surface);font-size:var(--font-size-sm);color:var(--text-secondary);transition:all .3s}.mutation-input-mock.disabled{opacity:.5;cursor:not-allowed}.mutation-btn-row{gap:var(--space-2);display:flex}.mutation-error-msg{padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);color:var(--accent-red);font-size:var(--font-size-sm);background:#f8514914;border:1px solid #f851494d}.mutation-success-msg{padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);color:var(--accent-green);font-size:var(--font-size-sm);background:#3fb95014;border:1px solid #3fb9504d}.module-nav-end{align-items:center;display:flex}.module-complete-msg{font-size:var(--font-size-sm);color:var(--accent-green);font-weight:600}.todo-project{gap:var(--space-8);flex-direction:column;display:flex}.project-header{padding-bottom:var(--space-6);border-bottom:1px solid var(--border-default)}.project-meta-row{margin-bottom:var(--space-4);justify-content:space-between;align-items:center;display:flex}.project-badge{font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--accent-green);border-radius:var(--radius-sm);letter-spacing:.05em;text-transform:uppercase;background:#3fb9501a;border:1px solid #3fb9504d;padding:.2em .7em;font-weight:600}.project-step-counter{font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--text-muted)}.project-progress-track{gap:var(--space-2);margin-bottom:var(--space-5);align-items:center;display:flex}.progress-dot{background:var(--bg-overlay);border:1px solid var(--border-default);cursor:pointer;width:28px;height:28px;font-family:var(--font-mono);color:var(--text-muted);border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:11px;font-weight:600;transition:all .2s;display:flex}.progress-dot:hover{border-color:var(--accent-blue);color:var(--accent-blue)}.progress-dot.done{background:var(--accent-green);border-color:var(--accent-green);color:#fff}.progress-dot.current{background:var(--accent-blue);border-color:var(--accent-blue);color:#fff;box-shadow:0 0 0 4px #58a6ff33}.project-step-label{font-size:var(--font-size-xl);color:var(--text-primary);margin-bottom:var(--space-2);font-weight:700}.project-subtitle{font-size:var(--font-size-sm);color:var(--text-secondary);margin-bottom:var(--space-3)}.project-files{gap:var(--space-2);flex-wrap:wrap;display:flex}.file-badge{font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--accent-blue);border-radius:var(--radius-sm);background:#58a6ff14;border:1px solid #58a6ff33;padding:.2em .6em}.project-body{gap:var(--space-5);flex-direction:column;display:flex}.step-what{padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);font-size:var(--font-size-sm);color:var(--text-secondary);background:#58a6ff0f;border:1px solid #58a6ff26;line-height:1.6}.folder-tree{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);overflow:hidden}.folder-tree-label{padding:var(--space-2) var(--space-4);background:var(--bg-overlay);border-bottom:1px solid var(--border-default);font-family:var(--font-mono);color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;font-size:10px}.folder-tree-content{padding:var(--space-4);font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--text-secondary);white-space:pre;line-height:1.8}.crud-summary{gap:var(--space-2);padding:var(--space-4);background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);flex-direction:column;display:flex}.crud-summary-item{align-items:center;gap:var(--space-3);font-size:var(--font-size-sm);color:var(--text-secondary);display:flex}.crud-summary-item .crud-op{font-family:var(--font-mono);font-size:var(--font-size-xs);text-align:center;border:1px solid #0000;border-radius:3px;flex-shrink:0;min-width:3em;padding:.15em .55em;font-weight:700}.crud-summary-item.c .crud-op{color:var(--accent-blue);background:#58a6ff1f;border-color:#58a6ff4d}.crud-summary-item.r .crud-op{color:var(--accent-green);background:#3fb9501a;border-color:#3fb9504d}.crud-summary-item.u .crud-op{color:var(--accent-orange);background:#d299221f;border-color:#d299224d}.crud-summary-item.d .crud-op{color:var(--accent-red);background:#f851491a;border-color:#f851494d}.project-nav{padding-top:var(--space-6);border-top:1px solid var(--border-default);justify-content:space-between;align-items:center;display:flex}.project-nav-btn{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);border:1px solid var(--border-default);color:var(--text-secondary);font-size:var(--font-size-sm);transition:all var(--transition-fast);background:var(--bg-surface);justify-content:center;min-width:100px;font-weight:500;display:flex}.project-nav-btn:hover:not(:disabled){border-color:var(--accent-blue);color:var(--accent-blue)}.project-nav-btn:disabled{opacity:.35;cursor:not-allowed}.project-nav-btn.primary{background:var(--accent-blue);border-color:var(--accent-blue);color:#fff}.project-nav-btn.primary:hover{opacity:.88;color:#fff}.project-nav-steps{gap:var(--space-2);align-items:center;display:flex}.nav-pip{background:var(--bg-overlay);border:1px solid var(--border-default);cursor:pointer;border-radius:50%;width:8px;height:8px;padding:0;transition:all .2s;display:inline-block}.nav-pip:hover{border-color:var(--accent-blue);transform:scale(1.2)}.nav-pip.done{background:var(--accent-green);border-color:var(--accent-green)}.nav-pip.active{background:var(--accent-blue);border-color:var(--accent-blue);box-shadow:0 0 0 3px #58a6ff33}.project-nav-done{font-size:var(--font-size-sm);color:var(--accent-green);text-align:right;min-width:100px;font-weight:600}