.sylius-article{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.article-header{margin-bottom:3.5rem;padding-bottom:2rem;border-bottom:1px solid #e5e7eb}.dark .article-header{border-bottom-color:#374151}.series-badge{display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#6366f1;background:#eef2ff;padding:.25rem .75rem;border-radius:9999px;margin-bottom:1.25rem}.dark .series-badge{color:#a5b4fc;background:#6366f126}.article-header h1{font-size:2.5rem;font-weight:700;line-height:1.2;letter-spacing:-.025em;color:#111827;margin:0 0 1rem}@media (min-width: 640px){.article-header h1{font-size:3rem}}.dark .article-header h1{color:#f9fafb}.article-meta{font-size:1.05rem;color:#6b7280;margin:0 0 1.25rem}.article-meta strong{color:#374151;font-weight:600}.dark .article-meta{color:#9ca3af}.dark .article-meta strong{color:#d1d5db}.article-meta a{color:#6366f1;text-decoration:none;font-weight:500}.article-meta a:hover{text-decoration:underline}.dark .article-meta a{color:#a5b4fc}.tag-list{display:flex;flex-wrap:wrap;gap:.5rem}.tag{font-size:.8rem;font-weight:500;color:#4b5563;background:#f3f4f6;padding:.2rem .65rem;border-radius:.375rem;border:1px solid #e5e7eb}.dark .tag{color:#d1d5db;background:#1f2937;border-color:#374151}.article-layout{display:flex;flex-direction:column;gap:2rem}@media (min-width: 1024px){.article-layout{flex-direction:row;gap:2.5rem}.article-content{flex:1;min-width:0}.video-sidebar{width:380px;flex-shrink:0}.video-sticky{position:sticky;top:5rem;max-height:calc(100vh - 6rem);overflow-y:auto;padding-right:.5rem}.video-sticky::-webkit-scrollbar{width:4px}.video-sticky::-webkit-scrollbar-track{background:transparent}.video-sticky::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:2px}.dark .video-sticky::-webkit-scrollbar-thumb{background:#4b5563}.video-sticky{scrollbar-width:thin;scrollbar-color:#d1d5db transparent}.dark .video-sticky{scrollbar-color:#4b5563 transparent}}.video-embed{position:relative;width:100%;padding-bottom:56.25%;border-radius:.75rem;overflow:hidden;background:#000;box-shadow:0 4px 12px #00000026}.video-embed iframe,.video-embed>div{position:absolute;top:0;left:0;width:100%;height:100%;border:0}.progress-bar-container{margin-top:1rem;display:flex;align-items:center;gap:.75rem}.progress-bar-bg{flex:1;height:6px;background:#e5e7eb;border-radius:3px;overflow:hidden}.dark .progress-bar-bg{background:#374151}.progress-bar-fill{height:100%;width:0;background:linear-gradient(90deg,#6366f1,#8b5cf6);border-radius:3px;transition:width .4s ease}.progress-text{font-size:.75rem;color:#6b7280;white-space:nowrap;font-weight:500}.dark .progress-text{color:#9ca3af}.scroll-spy{display:flex;flex-direction:column;gap:.125rem;margin-top:1rem;padding:.75rem 0;border-top:1px solid #e5e7eb}.dark .scroll-spy{border-top-color:#374151}.spy-link{display:flex;align-items:center;gap:.5rem;padding:.35rem .5rem;font-size:.8rem;color:#6b7280;text-decoration:none;border-radius:.375rem;transition:all .15s;line-height:1.3}.spy-link:hover{color:#374151;background:#f3f4f6}.dark .spy-link{color:#9ca3af}.dark .spy-link:hover{color:#e5e7eb;background:#1f2937}.spy-link.active{color:#6366f1;font-weight:600;background:#eef2ff}.dark .spy-link.active{color:#a5b4fc;background:#6366f11a}.spy-dot{width:8px;height:8px;border-radius:50%;border:2px solid #d1d5db;flex-shrink:0;transition:all .2s}.dark .spy-dot{border-color:#4b5563}.spy-dot.visited{background:#6366f1;border-color:#6366f1}.spy-link.active .spy-dot{border-color:#6366f1;box-shadow:0 0 0 3px #6366f133}.question-card{margin-top:1rem;padding:1rem;background:#fffbeb;border:1px solid #fde68a;border-radius:.75rem}.dark .question-card{background:#fbbf2414;border-color:#fbbf2433}.question-card-header{display:flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600;color:#92400e;text-transform:uppercase;letter-spacing:.03em;margin-bottom:.5rem}.dark .question-card-header{color:#fbbf24}.question-icon{width:20px;height:20px;background:#f59e0b;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700}.question-text{font-size:.85rem;color:#78350f;line-height:1.5;margin:0 0 .75rem}.dark .question-text{color:#fde68a}.question-btn{display:inline-block;font-size:.8rem;font-weight:600;color:#fff;background:#f59e0b;border:none;padding:.4rem 1rem;border-radius:.375rem;cursor:pointer;transition:background .15s}.question-btn:hover{background:#d97706}.completion-card{margin-top:1rem;padding:1.25rem;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:.75rem;text-align:center}.dark .completion-card{background:#10b98114;border-color:#10b98133}.completion-icon{font-size:2rem;margin-bottom:.25rem}.completion-text{font-size:1rem;font-weight:700;color:#065f46;margin:0 0 .75rem}.dark .completion-text{color:#6ee7b7}.reset-btn{font-size:.75rem;color:#6b7280;background:none;border:1px solid #d1d5db;padding:.3rem .75rem;border-radius:.375rem;cursor:pointer}.dark .reset-btn{color:#9ca3af;border-color:#4b5563}.reset-btn:hover{background:#f3f4f6}.dark .reset-btn:hover{background:#1f2937}.sylius-article .prose{font-size:1.0625rem;line-height:1.8;color:#374151}.dark .sylius-article .prose{color:#d1d5db}.sylius-article .prose p{margin:0 0 1.5em}.sylius-article .prose h2{font-size:1.625rem;font-weight:700;letter-spacing:-.02em;color:#111827;margin:3rem 0 1.25rem;padding-top:1.5rem;border-top:1px solid #e5e7eb;scroll-margin-top:5rem}.sylius-article .prose h2:first-child{margin-top:0;padding-top:0;border-top:none}.dark .sylius-article .prose h2{color:#f9fafb;border-top-color:#374151}.sylius-article .prose h3{font-size:1.25rem;font-weight:600;color:#1f2937;margin:2rem 0 .75rem;scroll-margin-top:5rem}.dark .sylius-article .prose h3{color:#e5e7eb}.sylius-article .prose a{color:#6366f1;text-decoration:underline;text-decoration-color:#6366f14d;text-underline-offset:2px;font-weight:500;transition:text-decoration-color .15s}.sylius-article .prose a:hover{text-decoration-color:#6366f1}.dark .sylius-article .prose a{color:#a5b4fc;text-decoration-color:#a5b4fc4d}.dark .sylius-article .prose a:hover{text-decoration-color:#a5b4fc}.sylius-article .prose code{font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace;font-size:.875em;font-weight:400;color:#c7254e;background:#f8f1f3;padding:.15em .4em;border-radius:.25rem}.dark .sylius-article .prose code{color:#f0abfc;background:#f0abfc1a}.sylius-article .prose pre{margin:1.75em 0;border-radius:.75rem;border:1px solid #e5e7eb;overflow:hidden}.dark .sylius-article .prose pre{border-color:#374151}.sylius-article .prose pre code{display:block;font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace;font-size:.8125rem;line-height:1.7;padding:1.25rem 1.5rem;overflow-x:auto;color:#e5e7eb;background:#0f172a;border-radius:0;font-weight:400}.dark .sylius-article .prose pre code{background:#0c1222}.sylius-article .prose blockquote{margin:1.75em 0;padding:1rem 1.25rem;border-left:3px solid #6366f1;background:#f5f3ff;border-radius:0 .5rem .5rem 0;font-style:normal}.dark .sylius-article .prose blockquote{background:#6366f114;border-left-color:#818cf8}.sylius-article .prose blockquote p{color:#4b5563;font-size:.95rem;margin:0}.dark .sylius-article .prose blockquote p{color:#b0b8c4}.sylius-article .prose ul{margin:1.25em 0;padding-left:1.5em;list-style-type:disc}.sylius-article .prose ol{margin:1.25em 0;padding-left:1.5em;list-style-type:decimal}.sylius-article .prose li{margin:.4em 0;line-height:1.7}.sylius-article .prose li::marker{color:#9ca3af}.dark .sylius-article .prose li::marker{color:#6b7280}.sylius-article .prose strong{font-weight:600;color:#111827}.dark .sylius-article .prose strong{color:#f3f4f6}.sylius-article .prose hr{display:none}.sylius-article .prose pre.mermaid{background:#fff;border:1px solid #e5e7eb;border-radius:.75rem;padding:2rem 1rem;text-align:center;margin:2rem 0}.dark .sylius-article .prose pre.mermaid{background:#1e293b;border-color:#334155}.mermaid svg g[class*=state]>rect,.mermaid svg g[class*=state]>circle{transition:filter .2s;cursor:pointer}.mermaid svg g[class*=state]:hover>rect,.mermaid svg g[class*=state]:hover>circle{filter:brightness(1.25) drop-shadow(0 0 8px rgba(99,102,241,.6))}