@font-face { font-family:Figtree; src:url('/brand/Figtree-Medium.ttf') format('truetype'); font-style:normal; font-weight:500; font-display:swap; }
:root { color-scheme:light; --ink:#000; --muted:#565656; --accent:#b55338; --line:#dedede; --problem:#b55338; --aligned:#333; --paper:#fff; font:500 16px/1.6 Figtree,Arial,sans-serif; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--paper); } button,input,select { font:inherit; } button,summary { cursor:pointer; }
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
[hidden] { display:none!important; } a { color:var(--accent); text-underline-offset:3px; }
.site-header,main,footer { width:min(1220px,calc(100% - 72px)); margin-inline:auto; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:23px 0; border-bottom:1px solid var(--line); }
.wordmark { display:block; max-width:65%; } .wordmark img { display:block; width:260px; max-width:100%; height:auto; }
.edition { font-size:.75rem; font-weight:600; letter-spacing:.13em; color:var(--muted); }
.workspace-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; padding-top:28px; }
.eyebrow { margin:0 0 8px; color:var(--muted); font-size:.75rem; font-weight:700; letter-spacing:.12em; }
h1 { font-size:clamp(1.6rem,2.7vw,2.25rem); font-weight:500; letter-spacing:-.04em; line-height:1.2; margin:0; max-width:900px; }
.quiet-button { flex-shrink:0; color:var(--muted); background:transparent; border:0; padding:10px 0; font-size:.875rem; text-align:left; } .quiet-button span { margin-left:8px; font-size:1.15rem; } .quiet-button:hover { color:var(--accent); }
.map-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 24px; margin-top:24px; }
.detail-layers { display:flex; flex-wrap:wrap; border:0; padding:0; margin:0; min-width:0; gap:4px; }
.detail-layers label { cursor:pointer; position:relative; }
.detail-layers span { display:block; padding:10px 12px; border-bottom:2px solid transparent; color:var(--muted); font-size:.875rem; }
.detail-layers input:checked + span { color:var(--accent); border-color:var(--accent); font-weight:600; }
.detail-layers input:focus-visible + span { outline:3px solid var(--accent); outline-offset:2px; }
.detail-layers label:hover span { color:var(--accent); }
#layer-description { margin:0; color:var(--muted); font-size:.875rem; }
.network { height:clamp(400px,50vh,500px); min-height:27rem; position:relative; margin:10px -12px 0; touch-action:pan-y; overflow:hidden; }
.network svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
#nodes { position:absolute; inset:0; pointer-events:none; }
.edge { fill:none; stroke:#aaa; stroke-width:1; vector-effect:non-scaling-stroke; pointer-events:none; transition:stroke .2s,opacity .2s; }
.edge.active { stroke:var(--accent); stroke-width:2; } .edge.broken { stroke:var(--problem); stroke-dasharray:6 6; } .edge.neutral { stroke:var(--muted); stroke-dasharray:3 7; }
.edge-hit { fill:none; stroke:transparent; stroke-width:22; pointer-events:stroke; cursor:pointer; vector-effect:non-scaling-stroke; }
.node { position:absolute; width:210px; height:70px; padding:0; border:0; background:transparent; color:var(--muted); transform:translate(-50%,-50%); cursor:grab; touch-action:none; pointer-events:auto; z-index:3; }
.node.focused { width:min(260px,42%); z-index:4; }
.node:active { cursor:grabbing; }
.node-name { position:absolute; left:50%; bottom:calc(50% + 15px); transform:translateX(-50%); font-size:1rem; font-weight:500; white-space:nowrap; padding:0 5px; background:#fffE; transition:color .2s; }
.node-dot { position:absolute; left:50%; top:50%; width:8px; height:8px; border-radius:50%; background:#818181; transform:translate(-50%,-50%); box-shadow:0 0 0 4px #fff; transition:background .2s; }
.node.focused .node-name { font-size:1.3rem; font-weight:600; color:var(--ink); letter-spacing:-.02em; }
.node.focused .node-dot { width:10px; height:10px; background:var(--accent); }
.node.absent .node-name { color:var(--muted); text-decoration:line-through; text-decoration-thickness:1px; } .node.absent .node-dot { background:#fff; border:2px solid var(--problem); }
.node.retained .node-name { text-decoration:none; color:var(--ink); }
.node-state { position:absolute; left:0; right:0; top:calc(50% + 14px); font-size:.875rem; line-height:1.3; color:var(--problem); background:white; }
.node-example { position:absolute; left:0; right:0; top:calc(50% + 17px); padding:3px 6px; color:var(--muted); background:white; font-size:1rem; line-height:1.5; font-weight:400; overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:5; overflow:hidden; }
.node.absent .node-example { top:calc(50% + 55px); }
.node.dimmed { opacity:.3; } .edge.dimmed { opacity:.15; } .edge.related { stroke:var(--accent); stroke-width:1.5; }
.edge-hit:hover + .edge { stroke:var(--accent); stroke-width:2.5; }
.map-navigation { display:flex; align-items:center; gap:20px; margin-top:12px; }
.map-navigation p { margin:0; color:var(--muted); font-size:.875rem; }
.concept-connections { display:flex; flex-wrap:wrap; gap:12px 24px; margin-top:20px; }
.text-button { border:0; padding:5px 0; background:transparent; color:var(--accent); font-size:.94rem; text-align:left; text-decoration:underline; text-underline-offset:4px; }
.network-foot { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:10px 0 18px; border-bottom:1px solid var(--line); }
.network-foot > p { font-size:.875rem; color:var(--muted); margin:0; } .keyboard-hint { display:block; font-size:.75rem; margin-top:3px; }
.connection-choice { display:flex; gap:10px; align-items:center; font-size:.875rem; min-width:0; } .connection-choice > span { color:var(--muted); } .connection-choice select { border:0; border-bottom:1px solid #aaa; color:var(--ink); background:white; max-width:340px; padding:9px 28px 9px 0; font-size:.875rem; }
.experiment { display:grid; grid-template-columns:1fr 1.05fr; align-items:center; gap:45px; padding:24px 0 28px; min-height:140px; }
.experiment-context { margin:0 0 12px; color:var(--muted); font-size:.875rem; } .switches { display:flex; gap:20px; flex-wrap:wrap; } .switch { display:flex; align-items:center; gap:9px; cursor:pointer; font-size:.94rem; min-height:32px; }
.switch input { position:absolute; width:1px; height:1px; opacity:0; } .switch-track { flex-shrink:0; display:inline-block; position:relative; width:36px; height:21px; border-radius:12px; background:#aaa; transition:background .18s; }
.switch-track::after { content:''; position:absolute; height:15px; width:15px; left:3px; top:3px; border-radius:50%; background:#fff; transition:transform .18s; }
.switch input:checked + .switch-track { background:var(--accent); } .switch input:checked + .switch-track::after { transform:translateX(15px); } .switch input:focus-visible + .switch-track { outline:3px solid var(--accent); outline-offset:4px; }
.outcome { display:flex; align-items:flex-start; gap:13px; } .outcome-dot { display:block; width:9px; height:9px; border-radius:50%; background:var(--aligned); margin-top:8px; flex-shrink:0; box-shadow:0 0 0 5px #f3f3f3; }
.outcome[data-status="problem"] .outcome-dot { background:var(--problem); box-shadow:0 0 0 5px #f9eeea; }
.outcome[data-status="neutral"] .outcome-dot,.outcome[data-status="question"] .outcome-dot { background:var(--muted); box-shadow:0 0 0 5px #f3f3f3; }
.outcome h2 { font-size:1.08rem; line-height:1.4; font-weight:650; margin:0 0 5px; } .outcome[data-status="problem"] h2 { color:var(--problem); } .outcome p { font-size:.94rem; margin:0; color:var(--muted); max-width:550px; }
details { border-top:1px solid var(--line); } summary { display:flex; justify-content:space-between; gap:20px; padding:18px 0; font-size:.94rem; font-weight:500; list-style:none; } summary::-webkit-details-marker { display:none; } summary > span { font-size:1.3rem; color:var(--muted); line-height:1; } details[open] > summary > span { transform:rotate(45deg); }
.example-body { padding:0; } .example-text { font-size:1rem; line-height:1.65; margin:0; overflow-wrap:anywhere; } .example-editor { padding-bottom:6px; } .field-note { font-size:.875rem; color:var(--muted); margin:0 0 20px; }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px 24px; } .field label { display:block; font-size:.875rem; margin-bottom:6px; } .field input { width:100%; min-height:44px; background:white; color:var(--ink); padding:10px; border:1px solid #aaa; border-radius:0; } #reset-example { margin-top:15px; text-decoration:underline; text-underline-offset:3px; }
.about-body { max-width:880px; padding-bottom:24px; } .about-body p { font-size:.94rem; } dl { display:grid; grid-template-columns:max-content 1fr; gap:10px 20px; margin-block:25px; } dt { font-size:.94rem; font-weight:600; } dd { margin:0; font-size:.94rem; }
footer { display:flex; justify-content:space-between; gap:15px; padding-block:23px; border-top:1px solid var(--line); color:var(--muted); font-size:.75rem; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .skip-link { position:absolute; left:15px; top:-100px; background:white; padding:10px; z-index:10; } .skip-link:focus { top:8px; }
@media(max-width:900px) { .site-header,main,footer { width:calc(100% - 40px); } .experiment { gap:25px; grid-template-columns:1fr 1fr; } .switches { gap:10px; flex-direction:column; } .node { width:170px; } .node.focused .node-name { font-size:1.2rem; } .network-foot { align-items:flex-start; } }
@media(max-width:620px) { .site-header,main,footer { width:calc(100% - 28px); } .site-header { padding-block:17px; } .wordmark { font-size:1.1rem; } .edition { font-size:.75rem; letter-spacing:.01em; max-width:95px; text-align:right; } .workspace-heading { align-items:start; padding-top:23px; } h1 { font-size:1.6rem; } .workspace-heading .quiet-button { font-size:0; padding:0 2px; } .workspace-heading .quiet-button span { font-size:1.5rem; margin:0; } .network { margin:15px -4px 0; height:32rem; min-height:32rem; } .node { width:140px; } .node-name { font-size:.875rem; } .node.focused .node-name { font-size:1rem; } .node-example { font-size:.875rem; padding-inline:0; } .network-foot { flex-direction:column; align-items:stretch; gap:14px; } .network-foot > p { font-size:.875rem; } .keyboard-hint { display:none; } .connection-choice select { width:100%; max-width:none; flex:1; min-width:0; } .experiment { grid-template-columns:1fr; gap:24px; padding-block:24px; } .switches { flex-direction:row; gap:15px 22px; } .switch { font-size:.94rem; min-height:36px; } .outcome { min-height:96px; } .field-grid { grid-template-columns:1fr; } dl { grid-template-columns:1fr; gap:3px; } dd { margin-bottom:14px; } footer { flex-wrap:wrap; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; } }
@media(max-width:620px) { .map-toolbar { gap:10px; margin-top:20px; } .detail-layers { gap:0; } .detail-layers span { padding:10px 9px; } #layer-description { flex-basis:100%; } .detail-columns { grid-template-columns:1fr; gap:24px; } }
@media(max-width:620px) { .map-navigation { flex-wrap:wrap; gap:4px 16px; } }
/* Short callouts stay within the graph, beside the selected concept or edge. */
.info-popup { position:absolute; inset:auto; width:min(300px,calc(100% - 16px)); max-height:calc(100% - 16px); overflow:auto; margin:0; padding:16px 18px; background:#fff; color:var(--ink); border:1px solid #b55338; border-radius:0; box-shadow:0 5px 18px #00000016; z-index:10; }
.popup-header { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:4px; }
.popup-header .eyebrow { margin:0; font-size:.875rem; letter-spacing:0; font-weight:500; }
#close-popup { color:var(--muted); background:transparent; border:0; font-size:1.6rem; line-height:1; min-width:44px; min-height:44px; margin:-10px -10px -4px 0; padding:0; }
.info-popup h2 { margin:0 0 10px; font-size:1.05rem; font-weight:600; line-height:1.35; }
.info-popup h2:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.info-popup p { margin:0; font-size:1rem; line-height:1.5; overflow-wrap:anywhere; }
#edge-labels { position:absolute; inset:0; pointer-events:none; }
.edge-label { position:absolute; transform:translate(-50%,-50%); max-width:150px; min-height:44px; border:0; padding:6px 9px; background:#fff; color:#565656; font-size:.875rem; line-height:1.25; text-align:center; pointer-events:auto; z-index:2; }
.edge-label:hover,.edge-label.active { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }.edge-label.dimmed { opacity:.4; }
.notes-heading { font-size:1.2rem; font-weight:500; margin:26px 0 12px; }
@media(max-width:620px) { .edge-label { max-width:110px; padding:5px; }.info-popup { width:min(270px,calc(100% - 16px)); padding:14px 16px; } }

.workspace-intro { margin:12px 0 0; color:var(--muted); font-size:1rem; }
@media(max-width:620px) { .wordmark img { width:200px; } }

.explorer-navigation { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:12px 24px; font-size:.94rem; }
.explorer-navigation a { color:var(--ink); text-decoration:none; }
.explorer-navigation a:hover { color:var(--accent); text-decoration:underline; }
@media(max-width:620px) { .explorer-navigation { gap:4px 12px; font-size:.875rem; } .wordmark { max-width:55%; } }

.definition-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0;align-items:start}.definition-tile{border:1px solid #dedede;padding:0}.definition-tile summary{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;padding:18px 20px;list-style:none;font-size:18px}.definition-tile summary::-webkit-details-marker{display:none}.definition-tile summary:after{content:'+';color:#b55338;font-size:22px}.definition-tile[open] summary:after{content:'−'}.definition-tile[open]{background:#f5f5f5}.definition-body{padding:0 20px 20px;font-size:16px;line-height:1.6}.definition-body p+p{margin-top:15px}.definition-tile summary:focus-visible{outline:2px solid #b55338;outline-offset:3px}@media(max-width:600px){.definition-tiles{grid-template-columns:1fr}}

#example-summary { margin:0 0 24px; }

/* Blank example fields leave the pattern visible while marking its missing details. */
.node.incomplete .node-name { color:var(--muted); }
.node.incomplete .node-dot { background:#fff; border:2px dashed var(--muted); width:12px; height:12px; }
.node.incomplete .node-state { color:var(--muted); }
.node.incomplete .node-example { top:calc(50% + 40px); }
.node.incomplete.absent .node-example { top:calc(50% + 58px); }
.edge.incomplete,.edge-hit:hover + .edge.incomplete { stroke:#909090; stroke-dasharray:5 6; }
.edge-label.incomplete,.edge-label.incomplete.active { color:var(--muted); }
.example-missing { margin:10px 0; padding:12px 16px; border-left:3px solid #909090; color:var(--muted); background:#f5f5f5; font-size:.94rem; }

.edge { marker-end:url(#edge-arrow); }
.my-arrangements-link{font-size:1rem;text-decoration:underline;text-underline-offset:4px;color:#333;padding:12px 0;min-height:44px}.edge{stroke:#737373;stroke-width:1.3px}.edge-label{font-size:.94rem;color:#333}.keyboard-hint{font-size:.875rem}.explorer-navigation{flex-wrap:wrap}#carry-example{margin:15px 0 0 22px;text-decoration:underline;text-underline-offset:4px}.outcome-dot{display:none}.network-foot>p{font-size:.94rem}@media(max-width:620px){.map-toolbar{flex-wrap:wrap}.my-arrangements-link{font-size:.94rem}.edge-label{font-size:.875rem}.explorer-navigation{font-size:.875rem;gap:12px}#carry-example{display:block;margin-left:0}}

.pg-brand{position:relative;display:inline-block;padding-right:14px;line-height:1;vertical-align:middle}.pg-brand img{display:block}.brand-trademark{position:absolute;right:0;top:0;font-size:12px;line-height:1;font-weight:500}.explorer-footer-brand img{display:block;width:220px;height:auto}footer{align-items:center}.explorer-footer-brand .brand-trademark{top:3px}
.pg-brand{padding-right:0}.pg-brand .brand-trademark{left:calc(95% + 2px);right:auto;top:-2px;font-size:10px}.pg-brand-signature .brand-trademark{left:calc(100% + 2px);top:64%;font-size:9px}