.archwrap{max-width:1180px}.arch-head{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:start;margin-bottom:1.5rem}.arch-head .meta{font-family:var(--font-mono);font-size:var(--step--1);color:var(--muted);margin:.35rem 0 0}.arch-controls{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem}.arch-controls .row{display:inline-flex;gap:.4rem}.arch-btn{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-head);font-size:var(--step--1);border:1px solid var(--line-2);background:var(--surface);color:var(--text);border-radius:10px;padding:.5rem .9rem;cursor:pointer}.arch-btn:hover{border-color:var(--teal)}.arch-btn--play{background:var(--teal);border-color:var(--teal);color:#041311}.arch-btn--play:hover{background:var(--teal-bright)}.arch-step-ind{font-family:var(--font-mono);font-size:var(--step--1);color:var(--teal)}@media (max-width: 720px){.arch-head{grid-template-columns:1fr}.arch-controls{align-items:flex-start}}.arch{position:relative;padding:1.25rem clamp(1rem,3vw,3rem) 1.25rem 1.25rem;border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(180deg,color-mix(in srgb,var(--teal) 4%,var(--bg-2)),var(--bg-2));overflow:hidden}:root[data-theme=dark] .arch{background:linear-gradient(180deg,#0c1322,#0a0f1b)}.arch__spine{position:absolute;left:46%;top:92px;bottom:150px;width:2px;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--teal) 55%,transparent),transparent);pointer-events:none}.arch__pulse{position:absolute;left:46%;width:16px;height:16px;margin-left:-8px;margin-top:-8px;border-radius:50%;background:var(--teal-bright);box-shadow:0 0 0 4px color-mix(in srgb,var(--teal-bright) 25%,transparent),0 0 20px 4px var(--teal-bright);transition:top .7s cubic-bezier(.4,0,.2,1);z-index:4;pointer-events:none}.arch.is-static .arch__pulse{display:none}@media (prefers-reduced-motion: reduce){.arch__pulse{transition:none}}.layer{position:relative;margin-bottom:1.4rem}.layer__label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}.layer__label b{color:var(--text-2);font-weight:600}.layer__grid{display:grid;gap:.75rem}.node{position:relative;border:1px solid var(--line);border-radius:12px;padding:.85rem 1rem;background:var(--surface);transition:border-color .3s,box-shadow .3s,opacity .3s,background .3s;opacity:.5}.node h4{font-family:var(--font-head);font-size:var(--step-0);margin:0;color:var(--text)}.node .path{font-family:var(--font-mono);font-size:var(--step--1);color:var(--teal)}.node .sub{display:block;font-family:var(--font-mono);font-size:.72rem;color:var(--muted);margin-top:.35rem}.node .badge{font-family:var(--font-mono);font-size:.68rem;color:var(--amber);margin-left:.35rem}.node--dashed{border-style:dashed}.is-on .node,.node.is-on{opacity:1;border-color:color-mix(in srgb,var(--teal) 60%,var(--line));box-shadow:0 0 0 1px color-mix(in srgb,var(--teal) 35%,transparent),0 6px 24px color-mix(in srgb,var(--teal) 14%,transparent)}.arch.is-static .node{opacity:1}.substrate{position:relative;margin:.25rem 0 1.4rem;border-radius:14px;padding:1.25rem 1.4rem;border:1px solid color-mix(in srgb,var(--teal) 30%,var(--line));background:color-mix(in srgb,var(--teal) 7%,var(--surface));display:grid;grid-template-columns:1fr 1.2fr;gap:1rem;align-items:center;opacity:.5;transition:opacity .3s,box-shadow .3s}.substrate.is-on{opacity:1;box-shadow:0 0 0 1px color-mix(in srgb,var(--teal) 30%,transparent),0 8px 30px color-mix(in srgb,var(--teal) 12%,transparent)}.substrate h3{margin:0;font-family:var(--font-head);color:var(--text)}.substrate .path{font-family:var(--font-mono);font-size:var(--step--1);color:var(--teal)}.substrate p{margin:0;color:var(--text-2);font-size:var(--step--1)}.substrate code{font-family:var(--font-mono)}@media (max-width: 720px){.substrate{grid-template-columns:1fr}}.gate{position:relative;margin:0 auto 1.4rem;max-width:70%;border:1.5px solid color-mix(in srgb,var(--amber) 55%,var(--line));border-radius:12px;padding:.9rem 1.2rem;text-align:center;background:color-mix(in srgb,var(--amber) 6%,var(--surface));font-family:var(--font-head);color:var(--muted);opacity:.5;transition:opacity .3s,box-shadow .3s}.gate.is-on{opacity:1;color:var(--amber);box-shadow:0 0 0 1px color-mix(in srgb,var(--amber) 40%,transparent),0 6px 24px color-mix(in srgb,var(--amber) 16%,transparent)}.gate b{color:var(--amber)}.gate .path{font-family:var(--font-mono);font-size:var(--step--1);color:var(--muted);margin-left:.4rem;font-weight:400}.output{margin:0 auto 1.4rem;max-width:70%;border:1px solid var(--line);border-radius:12px;padding:1rem 1.2rem;text-align:center;background:var(--surface);font-family:var(--font-head);color:var(--text);opacity:.5;transition:opacity .3s,box-shadow .3s}.output.is-on{opacity:1;border-color:color-mix(in srgb,var(--teal-soft) 60%,var(--line));box-shadow:0 6px 24px color-mix(in srgb,var(--teal) 14%,transparent)}.layer--shared .node{opacity:.7}.arch__rail{position:absolute;top:92px;bottom:150px;right:10px;width:30px;display:flex;align-items:center;justify-content:center;pointer-events:none}.arch__rail span{writing-mode:vertical-rl;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}.arch__ticks{position:absolute;top:92px;bottom:150px;right:42px;width:2px;background:var(--line)}.arch__ticks i{position:absolute;right:-4px;width:10px;height:2px;background:var(--line);transition:background .3s}.arch__ticks i.on{background:var(--teal)}@media (max-width: 860px){.arch__rail,.arch__ticks{display:none}.arch{padding-right:1.25rem}}.arch-legend{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-top:1.25rem;font-size:var(--step--1);color:var(--text-2)}.arch-legend span{display:inline-flex;align-items:center;gap:.5rem}.arch-legend i{width:24px;height:14px;border-radius:4px;display:inline-block;flex:none}.lg-flow{border:1.5px solid var(--teal);background:color-mix(in srgb,var(--teal) 12%,transparent)}.lg-gate{border:1.5px solid var(--amber);background:color-mix(in srgb,var(--amber) 10%,transparent)}.lg-sub{border:1px solid color-mix(in srgb,var(--teal) 40%,var(--line));background:color-mix(in srgb,var(--teal) 10%,transparent)}.lg-opt{border:1.5px dashed var(--muted);background:transparent}.lg-pulse{width:14px;height:14px;border-radius:50%;background:var(--teal-bright);box-shadow:0 0 8px var(--teal-bright)}@media (max-width: 720px){.arch__spine,.arch__pulse{display:none}.gate,.output{max-width:100%}.layer__grid{grid-template-columns:1fr 1fr!important}}@media (max-width: 460px){.layer__grid{grid-template-columns:1fr!important}}