:root{--bg: #000000;--surface: #0d0d0f;--raised: #161618;--text: #f2f2f2;--muted: #a1a1a6;--border: #2a2a2d;--accent: #ff5c74;--accent-fill: #c81e3a;--on-accent: #ffffff;--accent-soft: #2f1017;--feedback: #f0a54a;--query: #7aa7ff;--warn-bg: #2a1d05;--warn-text: #ffd27a;--warn-border: #c98a00;--neutral-bg: #1b1b1e;--neutral-text: #d6d6da;--focus: #ffffff;--glow: rgba(200, 30, 58, .35);--radius: 8px;--gap: 1rem;color-scheme:dark;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:1.5;color:var(--text);background:var(--bg)}*,*:before,*:after{box-sizing:border-box}body{margin:0;color:var(--text);background:var(--bg)}h1,h2,h3{line-height:1.25;margin:0 0 .5rem}h1{font-size:1.5rem;text-transform:uppercase;letter-spacing:.06em}h2{font-size:1.25rem}h3{font-size:1rem}p{margin:0 0 .6rem}ul,ol{margin:0 0 .6rem;padding-left:1.2rem}code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85em;background:var(--neutral-bg);padding:0 .25rem;border-radius:4px;word-break:break-all}.app{min-height:100vh}.app-main{max-width:1200px;margin:0 auto;padding:var(--gap)}.nav-header{background:var(--surface);border-bottom:1px solid var(--border)}.nav-bar{max-width:1200px;margin:0 auto;padding:.6rem var(--gap);display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap)}.nav-title{font-weight:700;margin-right:auto;text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}.nav-list{display:flex;gap:.5rem;list-style:none;margin:0;padding:0}.nav-link{display:inline-block;padding:.35rem .75rem;border-radius:var(--radius);color:var(--accent);text-decoration:none;transition:background-color .15s ease}.nav-link:hover{background:var(--accent-soft)}.nav-link--active{background:var(--accent-fill);color:var(--on-accent);font-weight:600;box-shadow:0 0 12px var(--glow)}.nav-link--active:hover{background:var(--accent-fill)}button{font:inherit;color:inherit;cursor:pointer}.play-pause{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .8rem;border:1px solid var(--accent);border-radius:var(--radius);background:var(--surface);color:var(--accent);transition:background-color .15s ease}.play-pause:hover{background:var(--accent-soft)}.play-pause--playing{background:var(--accent-fill);color:var(--on-accent)}.play-pause--playing:hover{background:var(--accent-fill)}.play-pause-icon{fill:currentColor}.label-badge{display:inline-block;padding:0 .45rem;border-radius:999px;font-size:.75rem;font-weight:600;line-height:1.5;border:1px solid transparent;white-space:nowrap;vertical-align:baseline}.label-badge--warning{background:var(--warn-bg);color:var(--warn-text);border-color:var(--warn-border)}.label-badge--neutral{background:var(--neutral-bg);color:var(--neutral-text);border-color:var(--border)}.label-badge--outline{background:transparent;color:var(--accent);border-color:var(--accent)}.claim{display:inline}.claim-sources{color:var(--muted);font-size:.9em}.claim-info-toggle{margin-left:.15rem;padding:0 .35rem;font-size:.75rem;color:var(--muted);background:transparent;border:1px solid var(--border);border-radius:4px;transition:border-color .15s ease,color .15s ease}.claim-info-toggle:hover{color:var(--accent);border-color:var(--accent)}.claim-urls{display:block;margin-top:.25rem;padding:.35rem .5rem;background:var(--raised);border:1px dashed var(--border);border-radius:4px}.claim-url{display:block;font-size:.85rem;color:var(--muted)}.claim-url-name{font-weight:600;color:var(--text)}:focus{outline:none}:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}h1[tabindex="-1"]:focus{outline:none}@media (prefers-reduced-motion: reduce){*,*:before,*:after{transition-duration:.01ms!important;animation:none!important}}.flow-diagram{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.5rem}.flow-svg{display:block;width:100%;height:auto;overflow:visible}.flow-edge-path{stroke-width:2.5;transition:stroke-width .2s ease,opacity .2s ease}.flow-edge--flow .flow-edge-path{stroke:var(--accent)}.flow-edge--feedback .flow-edge-path{stroke:var(--feedback);stroke-width:3}.flow-edge--query .flow-edge-path{stroke:var(--query)}.flow-edge-arrow{transition:opacity .2s ease}.flow-edge--flow .flow-edge-arrow{fill:var(--accent)}.flow-edge--feedback .flow-edge-arrow{fill:var(--feedback)}.flow-edge--query .flow-edge-arrow{fill:var(--query)}.flow-edge--highlighted .flow-edge-path{stroke-width:5}.flow-edge--feedback.flow-edge--highlighted .flow-edge-path{stroke-width:5.5}.flow-dot{stroke:var(--surface);stroke-width:1.5}.flow-dot--flow{fill:var(--accent)}.flow-dot--feedback{fill:var(--feedback)}.flow-dot--query{fill:var(--query)}.flow-node{cursor:pointer;outline:none}.flow-node-box{fill:var(--surface);stroke:var(--muted);stroke-width:1.5;transition:fill .2s ease,stroke .2s ease,stroke-width .2s ease}.flow-node:hover .flow-node-box{fill:var(--accent-soft);stroke:var(--accent)}.flow-node-title{fill:var(--text);font-size:12.5px;font-weight:600;pointer-events:none}.flow-node--optional .flow-node-box{fill:var(--bg);stroke:var(--muted)}.flow-node--optional .flow-node-title{font-style:italic}.flow-node--selected .flow-node-box{fill:var(--accent-soft);stroke:var(--accent);stroke-width:2.5;filter:drop-shadow(0 0 6px var(--glow))}.flow-node-ring{stroke:var(--focus);stroke-width:2.5}.flow-node:focus-visible .flow-node-box{stroke:var(--focus);stroke-width:3.5}.flow-node:focus-visible .flow-node-title{text-decoration:underline}@keyframes flow-ring-pulse{0%,to{stroke-opacity:1}50%{stroke-opacity:.4}}.flow-node--selected .flow-node-ring{animation:flow-ring-pulse 1.8s ease-in-out infinite}@media (prefers-reduced-motion: reduce){.flow-node--selected .flow-node-ring{animation:none}.flow-edge-path,.flow-edge-arrow,.flow-node-box{transition:none}}@media (forced-colors: active){.flow-edge-path{stroke:CanvasText}.flow-edge-arrow,.flow-dot{fill:CanvasText}.flow-node-box{stroke:CanvasText}.flow-node-title{fill:CanvasText}.flow-node-ring{stroke:Highlight}}.page{display:flex;flex-direction:column;gap:var(--gap)}.page-header{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem var(--gap)}.page-header h1{margin:0;margin-right:.5rem}.legend{display:flex;flex-wrap:wrap;gap:.4rem 1rem;list-style:none;margin:0;padding:0;font-size:.85rem;color:var(--muted)}.legend-item{display:inline-flex;align-items:center;gap:.35rem}.legend-item:before{content:"";display:inline-block;width:1.6rem;border-top:3px solid var(--accent)}.legend-item--feedback:before{border-top:3px dashed var(--feedback);border-radius:50% 50% 0 0;height:.4rem}.legend-item--query:before{border-top:3px dotted var(--query)}.legend-item--optional:before{width:1.2rem;height:.8rem;border:2px dashed var(--muted)}.page-columns{display:grid;grid-template-columns:minmax(0,3fr) minmax(16rem,2fr);gap:var(--gap);align-items:start}.page-diagram,.page-side{display:flex;flex-direction:column;gap:var(--gap);min-width:0}@media (max-width: 720px){.page-columns{grid-template-columns:minmax(0,1fr)}}.captions{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.75rem var(--gap)}.captions--feedback{border-left:4px solid var(--feedback)}.captions--global{border-left:4px dotted var(--query)}.captions-heading{font-size:1rem}.caption-list{margin:0}.caption-item{margin-bottom:.4rem}.not-a-loop-tag{display:inline;font-size:.85rem;font-weight:400;padding:0 .4rem;border:1px solid var(--query);border-radius:4px}.stage-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.75rem var(--gap);transition:border-color .2s ease}.stage-panel:not(.stage-panel--empty){border-color:var(--accent)}.stage-panel--optional:not(.stage-panel--empty){border-style:dashed}.stage-panel-prompt,.stage-panel-none{color:var(--muted);font-style:italic;margin:0}.stage-panel-optional{font-size:.85rem;color:var(--muted);font-style:italic}.stage-panel-heading{font-size:.9rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}.stage-panel-section{margin-top:.6rem}.stage-panel-item{margin-bottom:.35rem}.pattern-switcher{display:flex;flex-wrap:wrap;gap:.4rem;border-bottom:2px solid var(--border)}.pattern-tab{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .9rem;background:var(--surface);border:1px solid var(--border);border-bottom:none;border-radius:var(--radius) var(--radius) 0 0;color:var(--text);transition:background-color .15s ease,color .15s ease}.pattern-tab:hover{background:var(--accent-soft)}.pattern-tab--active{background:var(--accent-fill);color:var(--on-accent);font-weight:600;box-shadow:0 0 12px var(--glow)}.pattern-tab--active:hover{background:var(--accent-fill)}.pattern-tab--muted{color:var(--muted);background:var(--bg);font-weight:400}.pattern-tab--muted:hover{background:var(--neutral-bg)}.pattern-tab--muted.pattern-tab--active{background:var(--neutral-bg);color:var(--neutral-text);border-color:var(--muted);font-weight:600}.pattern-diagram{opacity:1;transition:opacity .3s ease}@starting-style{.pattern-diagram--enter{opacity:0}}.patterns-body--muted .flow-diagram{background:var(--bg);border-style:dashed;filter:saturate(.5)}.pattern-details{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.75rem var(--gap)}.pattern-details--muted{background:var(--bg);border-style:dashed;color:var(--neutral-text)}.pattern-badge-row{margin-bottom:.5rem}.pattern-section{margin-top:.75rem}.pattern-section-heading,.pattern-panel-heading{font-size:.9rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}.pattern-claim{margin-bottom:.35rem}.pattern-limits{display:grid;gap:.5rem;margin-top:.75rem}.pattern-row{margin:0;padding:.5rem .75rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--raised)}.pattern-row--cap{border-left:4px solid var(--accent)}.pattern-row--stop{border-left:4px solid var(--warn-border)}.pattern-panels{display:grid;gap:var(--gap);margin-top:.75rem}.pattern-panels--multihop,.pattern-panels--update{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}.pattern-panel{padding:.6rem .75rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--raised)}.pattern-callout{margin-top:.75rem;padding:.6rem .75rem;background:var(--accent-soft);border-left:4px solid var(--accent);border-radius:var(--radius)}.framing{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.75rem var(--gap)}.framing-lead{font-size:1.05rem}.query-gate{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.75rem var(--gap)}.query-gate-svg{display:block;width:100%;max-width:600px;height:auto;margin:0 auto .5rem}.query-gate-link{stroke:var(--accent);stroke-width:2.5}.query-gate-box rect{fill:var(--surface);stroke:var(--muted);stroke-width:1.5}.query-gate-box--gate rect{fill:var(--accent-soft);stroke:var(--accent)}.query-gate-box text{fill:var(--text);font-size:14px;font-weight:600}.query-gate-branches{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:var(--gap);padding-left:0;list-style:none}.query-gate-branch{padding:.5rem .75rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--raised)}.query-gate-branch-name{display:block;font-weight:700;margin-bottom:.25rem}.query-gate-tag{font-weight:600;color:var(--muted)}.query-gate-suggestion,.use-case-suggestion{padding:.5rem .75rem;border:1px dashed var(--accent);border-radius:var(--radius);background:var(--raised)}.use-cases-hint{color:var(--muted)}.use-case-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(18rem,1fr));gap:var(--gap);align-items:start}.use-case-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.6rem var(--gap);transition:border-color .2s ease,box-shadow .2s ease}.use-case-card:hover,.use-case-card--open{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 14px var(--glow)}.use-case-card--muted{background:var(--bg);border-style:dashed;color:var(--neutral-text)}.use-case-card--muted.use-case-card--open,.use-case-card--muted:hover{border-color:var(--muted)}.use-case-toggle{display:flex;width:100%;justify-content:space-between;align-items:center;gap:.5rem;padding:.25rem 0;background:transparent;border:none;text-align:left;font-weight:700}.use-case-body--open{opacity:1;max-height:200rem;transform:translateY(0);transition:opacity .25s ease,transform .25s ease,max-height .35s ease}@starting-style{.use-case-body--open{opacity:0;max-height:0;transform:translateY(-4px)}}.use-case-section-heading{font-size:.9rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-top:.6rem}.use-case-claim{margin-bottom:.35rem}.use-case-empty{color:var(--muted);font-style:italic}@media (prefers-reduced-motion: reduce){.pattern-diagram,.use-case-body--open,.use-case-card,.stage-panel{transition:none}}