:root{--bg-primary:#f8fafc;--bg-secondary:#fff;--bg-tertiary:#f1f5f9;--bg-surface:#ffffffe0;--bg-surface-hover:#e2e8f0;--bg-card:#fff;--border-subtle:#e2e8f0;--border-medium:#cbd5e1;--border-focus:#0284c7;--text-primary:#0f172a;--text-secondary:#334155;--text-muted:#64748b;--text-inverse:#fff;--react-cyan:#0284c7;--react-cyan-glow:#0284c726;--js-yellow:#d97706;--purple-accent:#7c3aed;--emerald-success:#059669;--rose-danger:#e11d48;--amber-warning:#d97706;--code-bg:#0f172a;--code-text:#f8fafc;--font-sans:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"Cascadia Code", Consolas, Menlo, Monaco, "Liberation Mono", "Fira Code", "JetBrains Mono", monospace;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #00000014, 0 2px 4px -2px #0000000d;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000000d;--shadow-glow:0 0 20px #0284c726;--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition-base:.25s cubic-bezier(.4, 0, .2, 1)}[data-theme=dark]{--bg-primary:#07090e;--bg-secondary:#0d121f;--bg-tertiary:#131b2e;--bg-surface:#131b2eb3;--bg-surface-hover:#1e2945d9;--bg-card:#0f172abf;--border-subtle:#ffffff14;--border-medium:#ffffff29;--border-focus:#38bdf8;--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-muted:#64748b;--text-inverse:#0f172a;--react-cyan:#00d8ff;--react-cyan-glow:#00d8ff40;--js-yellow:#f7df1e;--purple-accent:#a855f7;--emerald-success:#10b981;--rose-danger:#f43f5e;--amber-warning:#f59e0b;--code-bg:#090d16;--code-text:#f8fafc;--shadow-sm:0 1px 2px 0 #0000004d;--shadow-md:0 4px 6px -1px #0006, 0 2px 4px -2px #0006;--shadow-lg:0 10px 15px -3px #00000080, 0 4px 6px -4px #00000080;--shadow-glow:0 0 20px #00d8ff26}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{background-color:var(--bg-primary);height:100%;color:var(--text-primary);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color var(--transition-base), color var(--transition-base);font-size:15px;line-height:1.6}body>#root{flex-direction:column;min-height:100vh;display:flex}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border-medium);border:2px solid var(--bg-primary);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}code,pre{font-family:var(--font-mono);letter-spacing:0;font-variant-ligatures:none;font-feature-settings:"liga" 0, "calt" 0;-webkit-font-feature-settings:"liga" 0, "calt" 0}pre{color:var(--code-text);border:1px solid var(--border-subtle);tab-size:2;white-space:pre;border-radius:8px;margin:1.4rem 0;padding:1.15rem 1.25rem;font-size:.84rem;line-height:1.48;overflow-x:auto;background:var(--code-bg)!important}code:not(pre code){color:var(--react-cyan);background:#0284c71a;border:1px solid #0284c733;border-radius:4px;padding:.18rem .42rem;font-size:.88em}.code-block-wrapper{margin:1.5rem 0;position:relative}.code-block-wrapper pre{margin:0}.code-copy-btn{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#94a3b8;font-size:.74rem;font-family:var(--font-sans);cursor:pointer;transition:all var(--transition-fast);z-index:5;background:#1e293bbf;border:1px solid #ffffff26;border-radius:6px;align-items:center;gap:.35rem;padding:.3rem .65rem;font-weight:500;display:flex;position:absolute;top:.65rem;right:.65rem}.code-copy-btn:hover{color:#f8fafc;border-color:var(--react-cyan);background:#334155f2}details.raw-schematic-details,.prose-reading-container details{border:1px solid var(--border-subtle);background:var(--bg-secondary);transition:all var(--transition-fast);border-radius:8px;margin:1rem 0 1.5rem;overflow:hidden}details.raw-schematic-details summary,.prose-reading-container details summary{color:var(--text-muted);cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--bg-tertiary);border-bottom:1px solid #0000;padding:.65rem 1rem;font-size:.82rem;font-weight:500}details.raw-schematic-details summary:hover,.prose-reading-container details summary:hover{color:var(--react-cyan)}details.raw-schematic-details[open] summary,.prose-reading-container details[open] summary{border-bottom-color:var(--border-subtle);color:var(--text-primary)}details.raw-schematic-details pre,.prose-reading-container details pre{border:none!important;border-radius:0!important;margin:0!important}.mermaid-container{justify-content:center;width:100%;margin:2rem 0;display:flex}.mermaid{background:var(--bg-tertiary);border:1px solid var(--border-subtle);width:100%;box-shadow:var(--shadow-sm);transition:border-color var(--transition-base);border-radius:12px;justify-content:center;align-items:center;padding:1.5rem;display:flex;overflow:auto hidden}.mermaid:hover{border-color:var(--border-medium)}.mermaid svg{width:auto;max-width:100%;margin:0 auto;display:block;height:auto!important}.mermaid .node foreignObject{overflow:visible}.mermaid .node foreignObject>div{text-align:center;white-space:normal;box-sizing:border-box;padding:.3rem .6rem;line-height:1.4;width:max-content!important;max-width:360px!important;min-height:unset!important}.mermaid [id=root]{min-height:unset!important}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#64748b;font-style:italic}.token.punctuation{color:#94a3b8}.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol{color:#f43f5e}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin{color:#10b981}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string{color:#38bdf8}.token.atrule,.token.attr-value,.token.keyword{color:#c084fc;font-weight:600}.token.function,.token.class-name{color:#60a5fa}.token.regex,.token.important,.token.variable{color:#fbbf24}.markdown-body{color:var(--text-primary);font-size:1.02rem;line-height:1.82}.heading-anchor-target,.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4{color:var(--text-primary);letter-spacing:-.02em;scroll-margin-top:85px;font-weight:700}.markdown-body h1{border-bottom:2px solid var(--border-subtle);background:linear-gradient(135deg, var(--text-primary) 50%, var(--react-cyan) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-top:1.5rem;margin-bottom:1.25rem;padding-bottom:.6rem;font-size:1.2rem}.markdown-body h2{border-bottom:1px solid var(--border-subtle);margin-top:2.75rem;margin-bottom:1rem;padding-bottom:.45rem;font-size:1.48rem}.markdown-body h3{margin-top:2rem;margin-bottom:.75rem;font-size:1.2rem}.markdown-body h4{margin-top:1.5rem;margin-bottom:.5rem;font-size:1.05rem}.markdown-body p{color:var(--text-secondary);margin-bottom:1.25rem}.markdown-body ul,.markdown-body ol{color:var(--text-secondary);margin-bottom:1.4rem;padding-left:1.45rem}.markdown-body li>.code-block-wrapper,.markdown-body li>pre{margin:.85rem 0}.markdown-body li{margin-bottom:.5rem;line-height:1.75}.markdown-body hr{background:linear-gradient(90deg, transparent, var(--border-medium), transparent);border:none;height:1px;margin:2.5rem 0}.markdown-body a{color:var(--react-cyan);text-underline-offset:3px;cursor:pointer;text-decoration:underline;transition:opacity .15s}.markdown-body a:hover{opacity:.8}.markdown-body table{border-collapse:collapse;width:100%;box-shadow:var(--shadow-sm);border-radius:8px;margin:1.75rem 0;font-size:.92rem;overflow:hidden}.markdown-body th,.markdown-body td{border:1px solid var(--border-subtle);text-align:left;padding:.8rem 1.1rem}.markdown-body th{background:var(--bg-tertiary);color:var(--text-primary);letter-spacing:.02em;font-size:.88rem;font-weight:700}.markdown-body tr:nth-child(2n){background:#00000005}[data-theme=dark] .markdown-body tr:nth-child(2n){background:#ffffff05}.markdown-body tr:hover{background:#0284c70a}.markdown-body blockquote{border-left:4px solid var(--react-cyan);color:var(--text-secondary);background:#0284c70f;border-radius:0 8px 8px 0;margin:1.5rem 0;padding:.85rem 1.35rem;font-style:normal}.reading-progress-track{z-index:99;pointer-events:none;background:0 0;height:3px;position:fixed;top:61px;left:0;right:0}.reading-progress-fill{background:linear-gradient(90deg, var(--react-cyan) 0%, #38bdf8 50%, var(--purple-accent) 100%);height:100%;box-shadow:0 0 8px var(--react-cyan);transition:width .1s ease-out}.toc-nav-link{color:var(--text-secondary);border-left:2px solid #0000;border-radius:6px;padding:.38rem .6rem;font-size:.8rem;line-height:1.4;text-decoration:none;transition:all .15s;display:block}.toc-nav-link:hover{background:var(--bg-tertiary);color:var(--text-primary)}.toc-nav-link.active{border-left:2px solid var(--react-cyan);background:#0284c714;font-weight:700;color:var(--react-cyan)!important}.toc-nav-link.architect-bridge{color:#059669}.toc-nav-link.architect-bridge.active{background:#10b9811a;border-left:2px solid #059669;color:#059669!important}@keyframes chapterFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.chapter-content-enter{animation:.22s cubic-bezier(.16,1,.3,1) forwards chapterFadeIn}.prose-reading-container{width:100%;max-width:900px;margin:0 auto}@media (width>=1440px){.prose-reading-container{max-width:940px}}.back-to-top-btn{background:var(--bg-secondary);width:44px;height:44px;color:var(--react-cyan);border:1px solid var(--border-medium);box-shadow:var(--shadow-md);cursor:pointer;z-index:95;transition:all var(--transition-fast);border-radius:50%;justify-content:center;align-items:center;animation:.2s chapterFadeIn;display:flex;position:fixed;bottom:2.25rem;right:2.25rem}.back-to-top-btn:hover{background:var(--react-cyan);color:#fff;border-color:var(--react-cyan);box-shadow:var(--shadow-glow);transform:translateY(-3px)}.roadmap-phase-card{transition:transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast)!important}.roadmap-phase-card:hover{transform:translateY(-2px);border-color:var(--react-cyan)!important;box-shadow:var(--shadow-md)!important}.topic-reader-right-sidebar::-webkit-scrollbar{width:5px}.topic-reader-right-sidebar::-webkit-scrollbar-thumb{background:var(--border-medium);border-radius:3px}.arch-term-hover{-webkit-text-decoration:underline dotted var(--react-cyan);text-decoration:underline dotted var(--react-cyan);text-underline-offset:3px;cursor:help;color:inherit;border-radius:3px;padding:0 2px;transition:all .12s}.arch-term-hover:hover{color:var(--react-cyan);background:#0284c71f;text-decoration-style:solid}.scroll-touch-container{-webkit-overflow-scrolling:touch;scrollbar-width:thin;max-width:100%;overflow-y:hidden;overflow-x:auto!important}.scroll-touch-container::-webkit-scrollbar{height:6px}.scroll-touch-container::-webkit-scrollbar-track{background:var(--bg-tertiary);border-radius:4px}.scroll-touch-container::-webkit-scrollbar-thumb{background:var(--border-medium);border-radius:4px}.scroll-touch-container::-webkit-scrollbar-thumb:hover{background:var(--react-cyan)}pre,.code-block,.mermaid-container{-webkit-overflow-scrolling:touch;max-width:100%;overflow-x:auto!important}.prose-reading-container table{-webkit-overflow-scrolling:touch;max-width:100%;display:block;overflow-x:auto}.dashboard-hero-container{background:var(--bg-secondary);border:1px solid var(--border-subtle);borderRadius:16px;box-shadow:var(--shadow-sm);margin-bottom:2rem;padding:2.25rem;position:relative;overflow:hidden}@media (width<=640px){.dashboard-hero-container{border-radius:12px;padding:1.25rem 1rem!important}}.dashboard-hero-action-grid{grid-template-columns:repeat(4,1fr);gap:.85rem;width:100%;margin-top:1.5rem;display:grid}.dashboard-hero-btn{cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;text-align:center;border-radius:8px;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1rem;font-size:.88rem;font-weight:700;display:flex}.dashboard-hero-btn:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}@media (width<=1100px){.dashboard-hero-action-grid{grid-template-columns:repeat(2,1fr);gap:.75rem}}@media (width<=600px){.dashboard-hero-action-grid{grid-template-columns:1fr;gap:.65rem}.dashboard-hero-btn{justify-content:flex-start;padding:.75rem 1rem;font-size:.85rem}}.portal-nav-desktop-tabs{background:var(--bg-tertiary);border:1px solid var(--border-subtle);border-radius:8px;align-items:center;gap:.35rem;padding:.25rem;display:flex}.portal-nav-mobile-toggle{background:var(--bg-tertiary);border:1px solid var(--border-subtle);width:36px;height:36px;color:var(--text-primary);cursor:pointer;transition:all var(--transition-fast);border-radius:8px;justify-content:center;align-items:center;display:none}.portal-search-mobile-btn{background:var(--bg-tertiary);border:1px solid var(--border-subtle);width:36px;height:36px;color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast);border-radius:8px;justify-content:center;align-items:center;display:none}.portal-search-mobile-btn:hover,.portal-nav-mobile-toggle:hover{border-color:var(--react-cyan);color:var(--react-cyan)}.portal-mobile-drawer-backdrop{-webkit-backdrop-filter:blur(4px);z-index:1000;background:#0009;justify-content:flex-end;animation:.18s forwards fadeInBackdrop;display:flex;position:fixed;inset:0}.portal-mobile-drawer-content{background:var(--bg-secondary);border-left:1px solid var(--border-subtle);width:320px;max-width:85vw;height:100%;box-shadow:var(--shadow-lg);flex-direction:column;padding:1.25rem 1rem;animation:.22s cubic-bezier(.16,1,.3,1) forwards slideInDrawer;display:flex;overflow-y:auto}@keyframes fadeInBackdrop{0%{opacity:0}to{opacity:1}}@keyframes slideInDrawer{0%{transform:translate(100%)}to{transform:translate(0)}}@media (width<=980px){.portal-nav-desktop-tabs{display:none!important}.portal-nav-mobile-toggle{display:flex!important}.portal-search-desktop{display:none!important}.portal-search-mobile-btn{display:flex!important}}@media (width>=981px){.portal-search-mobile-btn,.portal-nav-mobile-toggle{display:none!important}}.topic-reader-main-grid{grid-template-columns:minmax(0,920px) 290px;justify-content:center;gap:2.5rem;max-width:1320px;margin:0 auto;padding:2rem 1.5rem;display:grid;position:relative}@media (width>=1440px){.topic-reader-main-grid{grid-template-columns:minmax(0,960px) 290px;max-width:1380px}}.topic-reader-mobile-toc-bar{background:var(--bg-secondary);border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm);border-radius:10px;margin-bottom:1.25rem;padding:.75rem 1rem;display:none}@media (width<=1120px){.topic-reader-main-grid{gap:1.5rem;padding:1.25rem 1rem;grid-template-columns:1fr!important}.topic-reader-right-sidebar{display:none!important}.topic-reader-mobile-toc-bar{display:block!important}}@media (width<=860px){.portal-reader-sidebar-aside{animation:.2s forwards slideInSidebar;z-index:999!important;background:var(--bg-secondary)!important;border-right:1px solid var(--border-medium)!important;width:320px!important;max-width:85vw!important;height:100vh!important;box-shadow:var(--shadow-lg)!important;position:fixed!important;top:0!important;bottom:0!important;left:0!important}.portal-reader-sidebar-backdrop{-webkit-backdrop-filter:blur(3px);z-index:998;background:#00000080;animation:.18s forwards fadeInBackdrop;position:fixed;inset:0}}@keyframes slideInSidebar{0%{transform:translate(-100%)}to{transform:translate(0)}}.incidents-arena-grid{grid-template-columns:360px 1fr;align-items:start;gap:1.5rem;display:grid}.responsive-diff-grid{grid-template-columns:1fr 1fr;gap:1rem;display:grid}.responsive-split-grid{grid-template-columns:1.2fr 1fr;gap:1.25rem;display:grid}@media (width<=900px){.responsive-split-grid{gap:1.25rem;grid-template-columns:1fr!important}}@media (width<=800px){.responsive-diff-grid{grid-template-columns:1fr!important}}@media (width<=960px){.incidents-arena-grid{gap:1.25rem;grid-template-columns:1fr!important}}.challenges-arena-grid{grid-template-columns:320px 1fr;align-items:start;gap:2rem;display:grid}@media (width<=960px){.challenges-arena-grid{gap:1.25rem;grid-template-columns:1fr!important}}.playground-arena-grid{grid-template-columns:300px 1fr;align-items:flex-start;gap:1.5rem;display:grid}@media (width<=900px){.playground-arena-grid{gap:1.25rem;grid-template-columns:1fr!important}}.visualizer-hub-layout{align-items:flex-start;gap:1.75rem;display:flex}@media (width<=960px){.visualizer-hub-layout{gap:1.25rem;flex-direction:column!important}.visualizer-hub-sidebar{width:100%!important;max-height:280px!important;position:static!important}}
