layer-diagram:where(.astro-525pz3uy){--layer-warm: var(--site-warm-subtle);--layer-cool: var(--site-cool-subtle);--layer-border: var(--site-border);--layer-overlay: var(--site-warm-subtle);--layer-fg: var(--site-fg);--layer-dim: var(--site-dim);display:block;font-family:var(--site-font-mono)}.diagram-viewport:where(.astro-525pz3uy){min-height:320px;position:relative;display:flex;align-items:flex-end;padding:1rem 0}.layer-stack:where(.astro-525pz3uy){display:flex;flex-direction:column-reverse;gap:4px;width:100%;max-width:420px;margin:0 auto}.layer:where(.astro-525pz3uy){display:flex;align-items:center;gap:8px;padding:12px 16px;border:1px solid var(--layer-border);border-radius:var(--site-border-radius);background-color:var(--layer-warm);color:var(--layer-fg);font-size:var(--site-code-size);opacity:0;transform:translateY(12px);transition:opacity var(--site-transition-normal) ease,transform var(--site-transition-normal) ease,background-color .4s ease;pointer-events:none}.layer:where(.astro-525pz3uy).visible{opacity:1;transform:translateY(0);pointer-events:auto}.layer:where(.astro-525pz3uy).frozen{background-color:var(--layer-cool)}.layer:where(.astro-525pz3uy)[data-style=frozen]{background-color:var(--layer-cool);border-style:solid;border-width:2px}.layer:where(.astro-525pz3uy)[data-style=overlay]{background-color:var(--layer-overlay);border-style:dashed;border-width:2px}.icon-lock:where(.astro-525pz3uy),.icon-pencil:where(.astro-525pz3uy){flex-shrink:0;color:var(--layer-fg);opacity:0;transition:opacity var(--site-transition-normal) ease .2s}.layer:where(.astro-525pz3uy)[data-style=frozen].visible .icon-lock:where(.astro-525pz3uy),.layer:where(.astro-525pz3uy)[data-style=overlay].visible .icon-pencil:where(.astro-525pz3uy){opacity:1}.layer-label:where(.astro-525pz3uy){font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.layer-detail:where(.astro-525pz3uy){color:var(--layer-dim);font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sr-only:where(.astro-525pz3uy){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.diagram-static-strip:where(.astro-525pz3uy){display:none;gap:12px;padding:1rem 0;overflow-x:auto}.strip-snapshot:where(.astro-525pz3uy){flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:100px}.strip-step-label:where(.astro-525pz3uy){font-size:.7rem;font-weight:600;color:var(--layer-dim);text-transform:uppercase;letter-spacing:.05em}.strip-stack:where(.astro-525pz3uy){display:flex;flex-direction:column-reverse;gap:2px;width:100%}.strip-layer:where(.astro-525pz3uy){display:flex;align-items:center;gap:4px;padding:4px 8px;border:1px solid var(--layer-border);border-radius:3px;background-color:var(--layer-warm);font-size:.65rem;opacity:.15;color:var(--layer-fg)}.strip-layer--visible:where(.astro-525pz3uy){opacity:1}.strip-layer--frozen:where(.astro-525pz3uy),.strip-layer--frozen:where(.astro-525pz3uy).strip-layer--visible{background-color:var(--layer-cool)}.strip-layer:where(.astro-525pz3uy)[class*=overlay]{border-style:dashed}.strip-layer-label:where(.astro-525pz3uy){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.icon-lock-sm:where(.astro-525pz3uy),.icon-pencil-sm:where(.astro-525pz3uy){flex-shrink:0;color:var(--layer-fg)}@media(prefers-reduced-motion:reduce){.diagram-viewport:where(.astro-525pz3uy){display:none}.diagram-static-strip:where(.astro-525pz3uy){display:flex}.layer:where(.astro-525pz3uy){transition:none}}@media(prefers-reduced-motion:no-preference){.diagram-viewport:where(.astro-525pz3uy){display:flex}.diagram-static-strip:where(.astro-525pz3uy){display:none}}@media(max-width:640px){.layer-stack:where(.astro-525pz3uy){max-width:100%}.layer:where(.astro-525pz3uy){padding:8px 12px;font-size:.75rem}.layer-detail:where(.astro-525pz3uy){display:none}.diagram-viewport:where(.astro-525pz3uy){min-height:240px}.strip-snapshot:where(.astro-525pz3uy){min-width:80px}}.demo-page:where(.astro-qi2ac2x7){max-width:600px;margin:0 auto;padding:2rem 1rem;color:var(--site-fg);font-family:var(--site-font-sans)}.demo-header:where(.astro-qi2ac2x7){text-align:center;margin-bottom:2rem}.demo-header:where(.astro-qi2ac2x7) h1:where(.astro-qi2ac2x7){font-family:var(--site-font-mono);font-size:1.5rem;margin:0 0 .5rem}.demo-subtitle:where(.astro-qi2ac2x7){color:var(--site-dim);font-size:.875rem;margin:0}.demo-controls:where(.astro-qi2ac2x7){display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:1.5rem}.controls-row:where(.astro-qi2ac2x7){display:flex;align-items:center;gap:12px;width:100%;max-width:420px}.step-slider:where(.astro-qi2ac2x7){flex:1;accent-color:var(--site-accent)}.btn:where(.astro-qi2ac2x7){padding:6px 16px;border:1px solid var(--site-border);border-radius:var(--site-border-radius);background:var(--site-surface);color:var(--site-fg);font-family:var(--site-font-mono);font-size:.8rem;cursor:pointer;transition:background var(--site-transition-fast) ease;white-space:nowrap}.btn:where(.astro-qi2ac2x7):hover{background:var(--site-surface-elevated)}.btn:where(.astro-qi2ac2x7):focus-visible{box-shadow:var(--site-focus-ring);outline:none}.step-indicator:where(.astro-qi2ac2x7){display:flex;gap:8px}.step-dot:where(.astro-qi2ac2x7){width:28px;height:28px;border:1px solid var(--site-border);border-radius:50%;background:var(--site-surface);color:var(--site-dim);font-family:var(--site-font-mono);font-size:.7rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--site-transition-fast) ease,color var(--site-transition-fast) ease}.step-dot:where(.astro-qi2ac2x7):hover{background:var(--site-surface-elevated)}.step-dot:where(.astro-qi2ac2x7).active{background:var(--site-accent);border-color:var(--site-accent);color:#fff}.step-dot:where(.astro-qi2ac2x7):focus-visible{box-shadow:var(--site-focus-ring);outline:none}