@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; } }
.info-popup { position:fixed; inset:auto; top:110px; right:max(18px,calc((100vw - 1220px)/2)); width:min(420px,calc(100vw - 36px)); max-height:calc(100dvh - 132px); overflow:auto; overscroll-behavior:contain; margin:0; padding:24px; background:white; color:var(--ink); border:1px solid #dedede; border-radius:0; box-shadow:0 12px 48px #0000001a; z-index:20; }
.popup-header { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:8px; }
.popup-header .eyebrow { margin:0; }
#close-popup { color:var(--muted); background:transparent; border:0; font-size:1.6rem; line-height:1; min-width:36px; min-height:36px; padding:0; }
.info-popup h2 { margin:0 0 14px; font-size:1.4rem; font-weight:600; line-height:1.3; letter-spacing:-.02em; }
.info-popup h2:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.info-popup p { margin:0 0 16px; line-height:1.6; overflow-wrap:anywhere; }
.info-popup .popup-intro { font-size:1.05rem; }
.info-popup section { margin-top:22px; }
.info-popup h3 { font-size:.94rem; margin:0 0 7px; }
.info-popup dl { display:block; margin:20px 0; }
.info-popup dt { margin-top:12px; }
.info-popup dd { margin-top:3px; color:var(--muted); line-height:1.5; }
.info-popup .concept-connections { display:flex; flex-direction:column; align-items:flex-start; gap:5px; margin-top:6px; }
#popup-outcome { border-left:2px solid var(--line); padding-left:12px; color:var(--muted); font-size:.94rem; }
#popup-outcome[data-status="problem"] { color:var(--problem); border-color:var(--problem); }
@media(max-width:620px) { .info-popup { top:78px; max-height:calc(100dvh - 94px); padding:20px; } }

.workspace-intro { margin:12px 0 0; color:var(--muted); font-size:1rem; }
.info-popup .popup-pattern { border-left:2px solid var(--accent); padding-left:14px; margin:20px 0; }
.popup-pattern h3 { color:var(--muted); font-size:.8rem; font-weight:500; }
.popup-pattern p { font-size:1.1rem; margin-bottom:0; }
@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}}