.guide-section{--bg:#fafafa;--bg-card:#fff;--bg-code:#f0f0ff;--ink:#18181b;--ink-dim:#3f3f46;--ink-faint:#a1a1aa;--accent:#6366f1;--accent-soft:#4f46e5;--green:#0d9488;--blue:#2563eb;--pink:#db2777;--red:#e11d48;--purple:#7c3aed;--rule:#e4e4e7;--serif:var(--font-fraunces), "Fraunces", Georgia, serif;--mono:var(--font-geist-mono), "JetBrains Mono", monospace;--sans:var(--font-geist-sans), "Inter", system-ui, sans-serif;font-family:var(--sans);color:var(--ink);background:var(--bg-card);border:1px solid var(--rule);border-radius:12px;max-width:960px;margin:0 auto;padding:44px 52px;font-size:16px;line-height:1.65;animation:.3s ease-out guidefadeIn;box-shadow:0 1px 4px #00000008}@keyframes guidefadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.guide-section .section-num{background:linear-gradient(135deg, var(--accent), var(--accent-soft));color:#fff;text-align:center;width:36px;height:36px;font-size:13px;font-weight:700;line-height:36px;font-family:var(--mono);letter-spacing:0;border-radius:8px;margin-bottom:12px;display:inline-block}.guide-section h2{font-family:var(--serif);letter-spacing:-.02em;color:var(--ink);margin-bottom:8px;font-size:36px;font-weight:800;line-height:1.1}.guide-section h2 em{color:var(--accent);font-style:italic;font-weight:400}.guide-section h2 .num{background:linear-gradient(135deg, var(--accent), var(--accent-soft));color:#fff;text-align:center;width:36px;height:36px;font-size:13px;font-weight:700;line-height:36px;font-family:var(--mono);letter-spacing:0;border-radius:8px;margin-bottom:12px;display:inline-block}.guide-section h3{font-family:var(--serif);color:var(--ink);border-left:4px solid var(--accent);margin:36px 0 14px;padding-left:16px;font-size:22px;font-weight:600}.guide-section h4{font-family:var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--accent);background:linear-gradient(90deg,#6366f114,#0000);border-radius:4px;margin:24px 0 10px;padding:8px 14px;font-size:11px;font-weight:600;display:inline-block}.guide-section .lede,.guide-section .section-subtitle{font-family:var(--serif);color:var(--ink-dim);border-left:3px solid var(--accent);background:linear-gradient(90deg,#6366f10a,#0000);border-radius:6px;max-width:960px;margin-bottom:32px;padding:16px 20px;font-size:18px;font-style:italic}.guide-section p{color:var(--ink-dim);margin-bottom:14px}.guide-section strong{color:var(--ink)}.guide-section p strong,.guide-section li strong{background:linear-gradient(#0000 60%,#6366f11f 60%);padding:0 2px}.guide-section pre{background:var(--bg-code);border:1px solid var(--rule);border-left:4px solid;border-image:linear-gradient(180deg, var(--accent), var(--blue)) 1;font-family:var(--mono);color:var(--ink);border-radius:4px;margin:16px 0;padding:16px 20px;font-size:13px;line-height:1.55;position:relative;overflow-x:auto;box-shadow:0 2px 8px #0000000a}.guide-section code{font-family:var(--mono);color:var(--accent);background:#6366f11a;border:1px solid #6366f126;border-radius:3px;padding:1px 5px;font-size:.88em;font-weight:500}.guide-section pre code{color:var(--ink);border:none;font-size:13px;font-weight:400;background:0 0!important;padding:0!important}.guide-section pre code.hljs{background:0 0!important;padding:0!important}.guide-section .hljs{background:0 0!important}.guide-section .ck{color:var(--accent)}.guide-section .cs{color:var(--green)}.guide-section .cc{color:var(--ink-faint);font-style:italic}.guide-section .cf{color:var(--pink)}.guide-section .cv{color:var(--blue)}.guide-section pre .copy-btn{font-size:12px;font-family:var(--sans);color:#f1f5f9;cursor:pointer;opacity:0;z-index:10;letter-spacing:.02em;background:#1e1e2e;border:none;border-radius:6px;padding:4px 12px;font-weight:500;transition:opacity .2s;position:absolute;top:8px;right:8px}.guide-section pre:hover .copy-btn{opacity:1}.guide-section pre .copy-btn.copied{background:#0d9488}.guide-section .code-collapse{border:1px solid var(--rule);border-radius:6px;margin:16px 0;overflow:hidden}.guide-section .code-collapse pre{border:none;border-left:4px solid;border-image:linear-gradient(180deg, var(--accent), var(--blue)) 1;border-radius:0;margin:0;display:none}.guide-section .code-collapse.open pre{display:block}.guide-section .code-collapse-toggle{width:100%;font-family:var(--mono);color:var(--ink-dim);background:var(--bg-code);cursor:pointer;text-align:left;border:none;align-items:center;gap:6px;padding:8px 14px;font-size:12px;font-weight:600;transition:background .15s,color .15s;display:flex}.guide-section .code-collapse-toggle:hover{color:var(--ink);background:#6366f114}.guide-section .code-collapse-toggle svg{flex-shrink:0;transition:transform .2s}.guide-section .code-collapse-meta{color:var(--ink-faint);margin-left:auto;font-weight:400}.guide-section .callout{border-left:4px solid var(--accent);background:#6366f112;border-radius:0 8px 8px 0;margin:20px 0;padding:18px 22px;position:relative;box-shadow:0 1px 4px #0000000a}.guide-section .callout:before{content:"💡";text-align:center;background:var(--bg-card);border-radius:50%;width:24px;height:24px;font-size:14px;line-height:24px;position:absolute;top:-12px;left:-12px;box-shadow:0 1px 3px #0000001a}.guide-section .callout.warn{border-left-color:var(--red);background:#e11d480f}.guide-section .callout.warn:before{content:"⚠️"}.guide-section .callout.good{border-left-color:var(--green);background:#0d94880f}.guide-section .callout.good:before{content:"✅"}.guide-section .callout.info{border-left-color:var(--blue);background:#2563eb0f}.guide-section .callout.info:before{content:"ℹ️"}.guide-section .callout .label{font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:6px;font-size:10px;font-weight:600}.guide-section .callout.warn .label{color:var(--red)}.guide-section .callout.good .label{color:var(--green)}.guide-section .callout.info .label{color:var(--blue)}.guide-section table{border-collapse:collapse;border:1px solid var(--rule);border-radius:8px;width:100%;margin:18px 0;font-size:14px;overflow:hidden;box-shadow:0 1px 3px #0000000a}.guide-section th{text-align:left;border-bottom:2px solid var(--accent);font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:#6366f10f;padding:10px 14px;font-size:10px;font-weight:600}.guide-section td{border-bottom:1px solid var(--rule);vertical-align:top;color:var(--ink-dim);padding:10px 14px}.guide-section td strong{color:var(--ink)}.guide-section td:first-child{color:var(--ink);font-weight:500}.guide-section tr:hover td,.guide-section tbody tr:nth-child(2n) td{background:#6366f108}.guide-section .arch,.guide-section pre.diagram{font-family:var(--mono);color:var(--ink-dim);background:var(--bg-code);border:1px solid var(--rule);white-space:pre;border-top:3px solid;border-image:linear-gradient(90deg, var(--accent), var(--blue), var(--green)) 1;background:linear-gradient(180deg, var(--bg-code), #f0f0ff80);border-radius:0 0 8px 8px;margin:18px 0;padding:20px;font-size:12px;line-height:1.5;overflow-x:auto;box-shadow:inset 0 1px 6px #00000008,0 2px 8px #00000008}.guide-section .arch .hl{color:var(--accent)}.guide-section .arch .gd{color:var(--green)}.guide-section .arch .bl{color:var(--blue)}.guide-section .pill{font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;border-radius:3px;margin-left:8px;padding:2px 8px;font-size:10px;font-weight:600;display:inline-block;box-shadow:0 1px 2px #0000001a}.guide-section .pill.easy{background:var(--green);color:#fff}.guide-section .pill.med{background:var(--accent);color:#fff}.guide-section .pill.hard{background:var(--red);color:#fff}.guide-section ul{margin-bottom:14px;padding-left:0;list-style:none}.guide-section ul>li{color:var(--ink-dim);margin-bottom:6px;padding-left:22px;position:relative}.guide-section ul>li:before{content:"";background:var(--accent);border-radius:2px;width:8px;height:8px;position:absolute;top:10px;left:4px;transform:rotate(45deg)}.guide-section ol{margin-bottom:14px;padding-left:24px}.guide-section ol>li{color:var(--ink-dim);margin-bottom:6px;padding-left:6px}.guide-section ol>li::marker{color:var(--accent);font-weight:700;font-family:var(--mono);font-size:13px}.guide-section li strong{color:var(--ink)}.guide-section .phase{background:var(--bg-card);border:1px solid var(--rule);border-left:4px solid var(--accent);border-radius:10px;grid-template-columns:50px 1fr;gap:16px;margin:18px 0;padding:18px;display:grid;box-shadow:0 1px 4px #0000000a}.guide-section .phase .num{font-family:var(--serif);color:var(--accent);font-size:42px;font-weight:800;line-height:1}.guide-section .subsection{background:var(--bg-card);border:1px solid var(--rule);border-left:4px solid var(--accent);border-radius:10px;margin:32px 0;padding:24px;transition:box-shadow .2s;box-shadow:0 1px 4px #00000008}.guide-section .subsection:hover{box-shadow:0 2px 10px #0000000f}.guide-section .subsection h3{margin-top:0}.guide-section .use-case{background:var(--bg-card);border:1px solid var(--rule);border-left:4px solid var(--blue);border-radius:0 10px 10px 0;margin:24px 0;padding:20px 24px;transition:transform .2s;box-shadow:0 1px 4px #0000000a}.guide-section .use-case:hover{transform:translate(2px)}.guide-section .use-case h4{color:var(--blue)}.guide-section .mermaid-wrapper{background:var(--bg-card);border:1px solid var(--rule);border-top:3px solid;border-image:linear-gradient(90deg, var(--accent), var(--blue), var(--green)) 1;border-radius:12px;margin:24px 0;padding:24px;overflow-x:auto;box-shadow:0 2px 8px #0000000a}.guide-section .mermaid-wrapper .diagram-title,.guide-section .mermaid-wrapper .mermaid-title{font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:16px;font-size:10px;font-weight:600}.guide-section .mermaid{text-align:center}.guide-section .mermaid svg{max-width:100%;height:auto}.guide-section a{color:var(--blue);border-bottom:1px solid #2563eb4d;text-decoration:none;transition:all .15s}.guide-section a:hover{color:var(--accent);border-bottom-color:var(--accent)}.guide-section .comparison-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin:18px 0;display:grid}.guide-section .comparison-card{background:var(--bg-card);border:1px solid var(--rule);border-radius:8px;padding:20px;box-shadow:0 1px 3px #00000008}.guide-section .architecture-point{background:#6366f10a;border-radius:4px;margin:8px 0;padding:8px 12px}.guide-section .animation-wrapper{background:var(--bg-card);border:1px solid var(--rule);border-top:3px solid;border-image:linear-gradient(90deg, var(--accent), var(--blue), var(--green)) 1;border-radius:12px;outline:none;margin:24px 0;padding:24px;overflow:hidden;box-shadow:0 2px 8px #0000000a}.guide-section .animation-wrapper:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.guide-section .animation-title{font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:16px;font-size:10px;font-weight:600}.guide-section .animation-stage{justify-content:center;align-items:center;min-height:300px;display:flex;position:relative}.guide-section .animation-stage svg{max-width:100%;height:auto}.guide-section .animation-step-desc{font-family:var(--sans);color:var(--ink-dim);text-align:center;min-height:40px;padding:12px 0 8px;font-size:14px;line-height:1.5;transition:opacity .3s}.anim-node-g{transition:opacity .4s,transform .3s}.anim-node-g.inactive{opacity:.3}.anim-node-g.active{opacity:1}.anim-node-g.completed{opacity:.7}.anim-node-rect,.anim-node-diamond{transition:filter .3s,stroke-width .3s}.anim-node-g.active .anim-node-rect,.anim-node-g.active .anim-node-diamond{filter:drop-shadow(0 0 8px #6366f140);stroke-width:2.5px}.anim-edge{stroke-dasharray:8 4;stroke-dashoffset:0;opacity:.15;transition:opacity .3s}.anim-edge.active{opacity:1;animation:.6s linear infinite flowDash}.anim-edge.completed{opacity:.4;stroke-dasharray:none}@keyframes flowDash{to{stroke-dashoffset:-12px}}.anim-packet{opacity:0;transition:opacity .2s}.anim-packet.active{opacity:1}@keyframes nodePulse{0%,to{filter:drop-shadow(0 0 #6366f14d)}50%{filter:drop-shadow(0 0 10px #6366f133)}}.anim-node-g.active.pulse{animation:2s ease-in-out infinite nodePulse}.anim-controls{border-top:1px solid var(--rule);justify-content:space-between;align-items:center;gap:12px;margin-top:8px;padding-top:12px;display:flex}.anim-controls-left{align-items:center;gap:4px;display:flex}.anim-controls-center{flex-direction:column;flex:1;align-items:center;gap:6px;min-width:0;display:flex}.anim-controls-right{align-items:center;gap:2px;display:flex}.anim-btn{border:1px solid var(--rule);background:var(--bg);width:30px;height:30px;color:var(--ink-dim);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;transition:all .15s;display:flex}.anim-btn:hover:not(:disabled){background:var(--bg-card);color:var(--ink);border-color:var(--accent)}.anim-btn:disabled{opacity:.3;cursor:not-allowed}.anim-btn-play{background:var(--accent);color:#fff;border-color:var(--accent);width:36px;height:36px}.anim-btn-play:hover:not(:disabled){background:var(--accent-soft);color:#fff;border-color:var(--accent-soft)}.anim-step-indicator{font-family:var(--mono);color:var(--ink-faint);letter-spacing:.05em;font-size:11px}.anim-progress-bar{background:var(--rule);border-radius:2px;width:100%;max-width:200px;height:3px;overflow:hidden}.anim-progress-fill{background:linear-gradient(90deg, var(--accent), var(--blue));border-radius:2px;height:100%;transition:width .3s}.anim-speed-btn{font-family:var(--mono);border:1px solid var(--rule);background:var(--bg);color:var(--ink-faint);cursor:pointer;border-radius:4px;padding:4px 8px;font-size:10px;transition:all .15s}.anim-speed-btn:hover{color:var(--ink);border-color:var(--accent)}.anim-speed-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.anim-annotation{font-family:var(--mono);fill:var(--ink-faint);font-size:10px;transition:opacity .3s}.anim-annotation.active{fill:var(--ink);opacity:1}.anim-annotation.inactive{opacity:0}.anim-data-label{font-family:var(--mono);background:var(--bg-code);border:1px solid var(--rule);color:var(--ink-dim);white-space:nowrap;pointer-events:none;border-radius:4px;padding:2px 6px;font-size:9px;transition:opacity .3s;position:absolute}@media (prefers-reduced-motion:reduce){.anim-node-g,.anim-node-rect,.anim-node-diamond,.anim-edge,.anim-packet{transition:none!important;animation:none!important}.anim-edge.active{stroke-dasharray:none;animation:none!important}.anim-progress-fill{transition:none!important}}@media (min-width:1600px){.guide-section{padding:48px 60px}.guide-section p{font-size:16.5px;line-height:1.75}.guide-section li{font-size:16px;line-height:1.7}.guide-section td{padding:12px 18px;font-size:15px}.guide-section th{padding:12px 18px;font-size:11px}.guide-section pre{padding:20px 28px;font-size:14px}.guide-section h2{font-size:40px}.guide-section h3{font-size:26px}.guide-section .callout{padding:22px 28px}}.guide-section pre.visual-diagram{font-family:var(--mono);color:var(--ink);border:1px solid var(--rule);white-space:pre;border-top:3px solid;border-image:linear-gradient(90deg, var(--accent), var(--blue), var(--green)) 1;background:linear-gradient(170deg,#fafafa 0%,#f0f0ff 50%,#e0e7ff 100%);border-radius:12px;margin:24px 0;padding:28px 24px;font-size:12.5px;line-height:1.65;position:relative;overflow-x:auto;box-shadow:0 2px 12px #0000000a,inset 0 1px 4px #fffc}.guide-section pre.visual-diagram:before{content:"DIAGRAM";font-family:var(--mono);letter-spacing:.16em;color:var(--accent);opacity:.5;font-size:9px;font-weight:600;position:absolute;top:10px;right:14px}.guide-section pre.visual-diagram .d-header{color:var(--accent);letter-spacing:.04em;font-size:13px;font-weight:800}.guide-section pre.visual-diagram .d-box{color:var(--blue);font-weight:600}.guide-section pre.visual-diagram .d-label{color:var(--ink);font-weight:700}.guide-section pre.visual-diagram .d-detail{color:var(--ink-dim)}.guide-section pre.visual-diagram .d-arrow{color:var(--accent);font-weight:700}.guide-section pre.visual-diagram .d-key{color:var(--green);font-weight:600}.guide-section pre.visual-diagram .d-phase{color:var(--accent);letter-spacing:.06em;background:linear-gradient(135deg,#6366f11f,#6366f10f);border-radius:4px;padding:1px 8px;font-weight:800;display:inline-block}.guide-section pre.visual-diagram .d-trigger{color:var(--blue);background:linear-gradient(135deg,#2563eb1a,#2563eb0d);border-radius:4px;padding:1px 8px;font-weight:700;display:inline-block}.guide-section pre.visual-diagram .d-component{color:var(--green);background:linear-gradient(135deg,#0d94881a,#0d94880d);border-radius:3px;padding:1px 6px;font-weight:600;display:inline-block}.guide-section pre.visual-diagram .d-warn{color:var(--red);font-weight:600}.guide-section pre.visual-diagram .d-separator{color:var(--accent);opacity:.4}.guide-section pre.visual-diagram .d-flow-arrow{color:var(--accent);animation:2.5s ease-in-out infinite arrowPulse;display:inline-block}@keyframes arrowPulse{0%,to{opacity:.5}50%{opacity:1}}@media (max-width:900px){.guide-section{border-radius:8px;padding:16px 14px;font-size:15px}.guide-section h2{font-size:24px;line-height:1.2}.guide-section h3{margin:24px 0 10px;padding-left:12px;font-size:18px}.guide-section h4{padding:6px 10px;font-size:10px}.guide-section .lede,.guide-section .section-subtitle{margin-bottom:20px;padding:12px 14px;font-size:15px}.guide-section pre{border-left-width:3px;border-radius:0;margin:12px -14px;padding:12px 14px;font-size:12px}.guide-section code{word-break:break-word;font-size:.82em}.guide-section table{-webkit-overflow-scrolling:touch;font-size:12px;display:block;overflow-x:auto}.guide-section th{white-space:nowrap;padding:8px 10px;font-size:9px}.guide-section td{min-width:100px;padding:8px 10px}.guide-section .callout{margin:16px 0;padding:14px 16px}.guide-section .callout:before{width:20px;height:20px;font-size:12px;line-height:20px;top:-10px;left:-8px}.guide-section .phase{grid-template-columns:36px 1fr;gap:10px;padding:14px}.guide-section .phase .num{font-size:28px}.guide-section .subsection{margin:20px 0;padding:16px}.guide-section .comparison-grid{grid-template-columns:1fr}.guide-section .animation-wrapper{border-radius:0;margin:16px -14px;padding:16px}.guide-section .animation-stage{min-height:200px}.anim-controls{flex-wrap:wrap;gap:8px}.anim-controls-center{order:-1;width:100%}.guide-section .flow-pipeline{flex-direction:column}.guide-section .flow-pipeline-arrow{background:repeating-linear-gradient(180deg, var(--accent) 0 6px, transparent 6px 12px);width:2px;height:24px;animation:1s linear infinite flowDotsV}.guide-section .flow-pipeline-arrow:after{top:auto;bottom:-4px;right:-8px;transform:rotate(90deg)}@keyframes flowDotsV{to{background-position:0 12px}}.guide-section .flow-card,.guide-section .flow-step{max-width:100%}.q-num-badge{border-radius:6px!important;width:28px!important;height:28px!important;font-size:10px!important}.q-title{font-size:14px!important}.q-answer-box{margin-left:0!important;padding:12px!important}.guide-section pre.visual-diagram{border-radius:0;margin:16px -14px;padding:16px 12px;font-size:10px;line-height:1.5}}@media (prefers-reduced-motion:reduce){.guide-section .flow-arrow-down,.guide-section .flow-pipeline-arrow,.guide-section .flow-card-header:before{animation:none!important}}