.arch-diagram{--arch-bg:#f8f8fc;--arch-surface:rgba(26,26,46,0.025);--arch-surface-hover:rgba(26,26,46,0.05);--arch-border:rgba(26,26,46,0.08);--arch-border-hover:rgba(26,26,46,0.16);--arch-text:#1a1a2e;--arch-text-secondary:rgba(26,26,46,0.65);--arch-text-muted:rgba(26,26,46,0.45);--arch-text-faint:rgba(26,26,46,0.25);--arch-grid-dot:rgba(26,26,46,0.06);--arch-icon-invert:#1a1a2e;--arch-layer-card-bg:rgba(26,26,46,0.03);font-family:var(--font-body,"Outfit",sans-serif);color:var(--arch-text);position:relative;padding:80px 24px;overflow:hidden}.dark .arch-diagram{--arch-bg:#060609;--arch-surface:rgba(255,255,255,0.025);--arch-surface-hover:rgba(255,255,255,0.05);--arch-border:rgba(255,255,255,0.06);--arch-border-hover:rgba(255,255,255,0.14);--arch-text:#e2e2e8;--arch-text-secondary:rgba(255,255,255,0.6);--arch-text-muted:rgba(255,255,255,0.4);--arch-text-faint:rgba(255,255,255,0.22);--arch-grid-dot:rgba(168,85,247,0.045);--arch-icon-invert:#e2e2e8;--arch-layer-card-bg:rgba(255,255,255,0.02)}.arch-diagram__grid{position:absolute;inset:0;background-image:radial-gradient(circle,var(--arch-grid-dot) 1px,transparent 1px);background-size:24px 24px;pointer-events:none;z-index:0;mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,black 20%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,black 20%,transparent 80%)}.arch-header{text-align:center;margin-bottom:56px;position:relative;z-index:1}.arch-header__eyebrow{display:inline-block;font-size:10px;text-transform:uppercase;letter-spacing:4px;font-weight:600;color:var(--arch-text-faint);margin-bottom:12px}.arch-header__title{font-family:var(--font-display,"Syne",sans-serif);font-weight:800;font-size:clamp(28px,5vw,44px);letter-spacing:-.02em;line-height:1.1;color:var(--arch-text);margin:0 0 16px}.arch-header__subtitle{font-size:15px;color:var(--arch-text-muted);max-width:520px;margin:0 auto;line-height:1.6;font-weight:300}.arch-flow{max-width:820px;margin:0 auto;display:flex;flex-direction:column;align-items:center;position:relative;z-index:1}.arch-row{display:grid;gap:12px;width:100%}.arch-row--3{grid-template-columns:repeat(3,1fr)}.arch-row--2{grid-template-columns:repeat(2,1fr);max-width:600px}.arch-row--1{grid-template-columns:1fr;max-width:560px}.arch-node{position:relative;padding:18px 20px 18px 23px;border-radius:12px;border:1px solid var(--arch-border);background:var(--arch-surface);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:all .35s cubic-bezier(.4,0,.2,1);opacity:0;animation:arch-fade-in .6s ease-out forwards;animation-delay:var(--delay,0s)}.arch-node:before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 2px 2px 0;background:var(--node-accent);opacity:.5;transition:opacity .3s ease}.arch-node:hover{border-color:var(--arch-border-hover);background:var(--arch-surface-hover);transform:translateY(-2px);box-shadow:0 8px 32px color-mix(in srgb,var(--node-accent) 8%,transparent)}.arch-node:hover:before{opacity:1}.arch-node--wide{padding:22px 28px 22px 31px}.arch-node__title{font-family:var(--font-display,"Syne",sans-serif);font-weight:700;font-size:14px;margin:0 0 6px;color:var(--arch-text);letter-spacing:-.01em}.arch-node__desc{font-size:12px;line-height:1.55;color:var(--arch-text-muted);margin:0}.arch-connector{display:flex;flex-direction:column;align-items:center;gap:0;padding:6px 0;opacity:0;animation:arch-fade-in .5s ease-out forwards;animation-delay:var(--delay,0s)}.arch-connector__line{width:1px;height:24px;position:relative;overflow:hidden}.arch-connector__line:after{content:"";position:absolute;left:0;width:100%;height:400%;top:-150%;background:repeating-linear-gradient(180deg,var(--flow-color,#a855f7) 0,var(--flow-color,#a855f7) 3px,transparent 3px,transparent 9px);animation:arch-flow .7s linear infinite}.arch-connector__label{display:inline-flex;padding:4px 14px;border-radius:9999px;font-family:var(--font-mono,"JetBrains Mono",monospace);font-size:10px;color:var(--arch-text-faint);background:var(--arch-surface);border:1px solid var(--arch-border);white-space:nowrap;letter-spacing:-.02em}.arch-layer-label{display:flex;align-items:center;gap:8px;font-size:10px;text-transform:uppercase;letter-spacing:3px;font-weight:600;color:var(--label-color,#a855f7);margin-bottom:12px;width:100%;max-width:820px;opacity:0;animation:arch-fade-in .5s ease-out forwards;animation-delay:var(--delay,0s)}.arch-layer-label__dot{width:6px;height:6px;border-radius:50%;background:var(--label-color,#a855f7);box-shadow:0 0 8px var(--label-color,#a855f7)}.arch-fork{width:240px;height:48px;margin:4px 0;opacity:0;animation:arch-fade-in .5s ease-out forwards;animation-delay:var(--delay,0s)}.arch-fork__svg{width:100%;height:100%;color:var(--arch-text-faint)}.arch-fork__path{stroke-dasharray:3 5}.arch-layers{max-width:820px;margin:64px auto 0;position:relative;z-index:1}.arch-layers__header{text-align:center;margin-bottom:24px}.arch-layers__eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:10px;text-transform:uppercase;letter-spacing:3px;font-weight:600;color:var(--arch-text-faint);padding:6px 16px;border-radius:9999px;border:1px solid var(--arch-border);background:var(--arch-surface)}.arch-layers__desc{font-size:13px;color:var(--arch-text-muted);margin:12px 0 0}.arch-layers__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.arch-layer-card{display:flex;align-items:flex-start;gap:14px;padding:18px 20px;border-radius:10px;border:1px solid var(--arch-border);background:var(--arch-layer-card-bg);opacity:0;animation:arch-fade-in .5s ease-out forwards;animation-delay:var(--delay,0s)}.arch-layer-card__num{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;font-family:var(--font-display,"Syne",sans-serif);flex-shrink:0}.arch-layer-card--1 .arch-layer-card__num{background:rgba(34,197,94,.12);color:#22c55e}.arch-layer-card--2 .arch-layer-card__num{background:rgba(245,158,11,.12);color:#f59e0b}.arch-layer-card--3 .arch-layer-card__num{background:rgba(99,102,241,.12);color:#6366f1}.arch-layer-card h4{font-family:var(--font-display,"Syne",sans-serif);font-weight:700;font-size:13px;margin:0 0 3px;color:var(--arch-text)}.arch-layer-card p{font-family:var(--font-mono,"JetBrains Mono",monospace);font-size:10px;color:var(--arch-text-muted);margin:0;letter-spacing:-.02em}.arch-layer-card__tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-top:8px}.arch-layer-card__tag--editable{background:rgba(34,197,94,.08);color:#22c55e;border:1px solid rgba(34,197,94,.18)}.arch-layer-card__tag--auto{background:rgba(245,158,11,.08);color:#f59e0b;border:1px solid rgba(245,158,11,.18)}.arch-layer-card__tag--explicit{background:rgba(99,102,241,.08);color:#6366f1;border:1px solid rgba(99,102,241,.18)}.arch-tech{max-width:820px;margin:56px auto 0;text-align:center;position:relative;z-index:1}.arch-tech__label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:3px;font-weight:600;color:var(--arch-text-faint);margin-bottom:20px}.arch-tech__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.arch-tech-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:9999px;border:1px solid var(--arch-border);background:var(--arch-surface);font-size:12px;font-weight:500;color:var(--arch-text-muted);transition:all .3s cubic-bezier(.4,0,.2,1);opacity:0;animation:arch-fade-in .4s ease-out forwards;animation-delay:var(--delay,0s)}.arch-tech-badge:hover{border-color:var(--badge-color,var(--arch-border-hover));color:var(--arch-text-secondary);background:var(--arch-surface-hover);transform:translateY(-1px)}@keyframes arch-fade-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes arch-flow{0%{transform:translateY(0)}to{transform:translateY(25%)}}@media (max-width:768px){.arch-diagram{padding:56px 16px}.arch-row--2,.arch-row--3{grid-template-columns:1fr}.arch-row--1,.arch-row--2{max-width:100%}.arch-layers__grid{grid-template-columns:1fr}.arch-fork{width:120px}.arch-header__title{font-size:28px}}@media (max-width:480px){.arch-tech-badge{padding:6px 12px;font-size:11px}}