:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;transition:background-color .2s ease,color .2s ease}#root{min-height:100vh}:root{--bg-primary: #ffffff;--bg-secondary: #f8f9fa;--bg-tertiary: #f1f3f5;--border-color: rgba(0, 0, 0, .12);--border-color-strong: rgba(0, 0, 0, .2);--text-primary: #1a1a1a;--text-secondary: rgba(0, 0, 0, .7);--text-tertiary: rgba(0, 0, 0, .5);--accent: #646cff;--accent-hover: #535bf2;--accent-bg: rgba(100, 108, 255, .1);--accent-border: rgba(100, 108, 255, .3);--shadow: rgba(0, 0, 0, .1);--shadow-strong: rgba(0, 0, 0, .2)}[data-theme=dark]{--bg-primary: #1a1a1a;--bg-secondary: #242424;--bg-tertiary: #2a2a2a;--border-color: rgba(255, 255, 255, .15);--border-color-strong: rgba(255, 255, 255, .25);--text-primary: #ffffff;--text-secondary: rgba(255, 255, 255, .85);--text-tertiary: rgba(255, 255, 255, .65);--accent: #646cff;--accent-hover: #747bff;--accent-bg: rgba(100, 108, 255, .15);--accent-border: rgba(100, 108, 255, .4);--shadow: rgba(0, 0, 0, .3);--shadow-strong: rgba(0, 0, 0, .5)}body{background-color:var(--bg-primary);color:var(--text-primary)}a{font-weight:500;color:var(--accent);text-decoration:inherit}a:hover{color:var(--accent-hover)}button{font-family:inherit;cursor:pointer;transition:all .2s ease}code{background-color:var(--bg-tertiary);padding:2px 6px;border-radius:4px;font-size:.9em;font-family:Monaco,Menlo,Ubuntu Mono,monospace}.demoPage{max-width:1200px;margin:0 auto;padding:32px 16px}.demoHeader{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-bottom:24px;gap:16px}.demoHeaderSpacer{width:1px;height:1px}.demoTitle{font-size:28px;font-weight:600;margin:0;color:var(--text-primary);text-align:center}.demoSubtitle{color:var(--text-secondary);margin-bottom:24px;text-align:center;font-size:14px}.demoPillMode{display:inline-block;margin-left:10px;padding:2px 8px;border-radius:999px;border:1px solid var(--border-color);color:var(--text-secondary);background:var(--bg-secondary);font-size:12px}.demoContext{display:grid;gap:16px;margin-top:24px;margin-bottom:24px}.demoContextCard{border:1px solid var(--border-color);background:var(--bg-secondary);border-radius:12px;padding:16px;box-shadow:0 2px 10px var(--shadow-soft)}.demoFlowCard{border:1px solid var(--border-color);background:var(--bg-secondary);border-radius:12px;padding:16px}.demoFlowTitle{font-size:12px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px}.demoFlowBody{display:grid;gap:10px}.demoFlowRow{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.demoFlowRowCompact{margin-top:2px}.demoFlowNode{border:1px solid var(--border-color);background:var(--bg-primary);color:var(--text-primary);border-radius:999px;padding:6px 10px;font-size:13px;line-height:1.2;white-space:nowrap}.demoFlowArrow{color:var(--text-tertiary);font-size:14px}.demoFlowSplit{display:grid;grid-template-columns:1fr 1fr;gap:10px}@media(max-width:980px){.demoFlowSplit{grid-template-columns:1fr}}.demoFlowLane{border:1px dashed var(--border-color);border-radius:10px;padding:12px;background:var(--bg-primary)}.demoFlowLaneTitle{font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:6px}.demoFlowLaneBody{font-size:13px;color:var(--text-primary);line-height:1.5}.demoFlowLaneNote{margin-top:8px;color:var(--text-secondary);font-size:12px;line-height:1.45}.demoFlowDiagram{display:grid;gap:12px}.demoFlowStep{border:1px solid var(--border-color);background:var(--bg-primary);border-radius:10px;padding:12px}.demoFlowStepTitle{font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:6px}.demoFlowStepBody{font-size:13px;line-height:1.55;color:var(--text-secondary)}.demoFlowPre{margin:10px 0 0;padding:10px 12px;border-radius:8px;border:1px dashed var(--border-color);background:var(--bg-secondary);color:var(--text-primary);overflow:auto;font-size:12px;line-height:1.55}.demoFlowPreSafe{border-color:var(--accent-border);background:var(--accent-bg)}.demoContextEyebrow{font-size:12px;font-weight:600;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px}.demoContextTitle{color:var(--text-primary);font-weight:600;font-size:14px;line-height:1.45;margin-bottom:12px}.demoContextEmphasis{color:var(--accent)}.demoContextGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:980px){.demoContextGrid{grid-template-columns:1fr}}.demoContextItem{border:1px solid var(--border-color);background:var(--bg-primary);border-radius:10px;padding:12px}.demoContextItemTitle{font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:6px}.demoContextItemBody{font-size:13px;line-height:1.5;color:var(--text-secondary)}.demoGuide{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media(max-width:980px){.demoGuide{grid-template-columns:1fr}}.demoGuideCard{border:1px solid var(--border-color);background:var(--bg-secondary);border-radius:12px;padding:16px}.demoGuideTitle{font-size:12px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px}.demoGuideList{margin:0;padding-left:18px;color:var(--text-primary);font-size:13px;line-height:1.6}.demoGuideList li+li{margin-top:8px}.demoThemeToggle{display:inline-flex;align-items:center;gap:8px;padding:0;width:38px;height:38px;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-secondary);color:var(--text-primary);font-size:14px;cursor:pointer;transition:all .2s ease;justify-content:center;justify-self:end}.demoThemeToggle:hover{border-color:var(--border-color-strong);background:var(--bg-tertiary)}.demoThemeIcon{width:18px;height:18px;display:block}.demoDemoCard{border:1px solid var(--border-color);background:var(--bg-secondary);border-radius:12px;padding:16px;box-shadow:0 2px 10px var(--shadow-soft);margin-bottom:24px}.demoDemoGuide{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}@media(max-width:980px){.demoDemoGuide{grid-template-columns:1fr}}.demoGrid{display:grid;grid-template-columns:1fr 520px;gap:24px;align-items:start}@media(max-width:980px){.demoGrid{grid-template-columns:1fr}}.demoSectionTitle{font-size:12px;font-weight:600;margin-bottom:8px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.demoSectionCaption{font-size:12px;line-height:1.45;color:var(--text-tertiary);margin-top:-4px;margin-bottom:10px}.demoPreview{width:520px}@media(max-width:980px){.demoPreview{width:100%}}.demoPre{width:100%;padding:16px;border-radius:8px;border:1px solid var(--border-color);background:var(--bg-secondary);color:var(--text-primary);overflow:auto;max-height:420px;font-size:13px;line-height:1.6;margin:0}.demoPage textarea{width:100%;min-height:92px;resize:vertical;border-radius:6px;border:1px solid var(--border-color);padding:10px 12px;font-size:14px;line-height:20px;outline:none;background:var(--bg-primary);color:var(--text-primary);font-family:inherit;transition:all .2s ease}.demoPage textarea::placeholder{color:var(--text-tertiary)}.demoPage textarea:focus{border-color:var(--accent-border);box-shadow:0 0 0 3px var(--accent-bg)}