:root{font-family:system-ui,sans-serif;color:#243d43;background:#eef4f1;font-size:14px;line-height:1.6;--teal:#087e87;--line:#d4e1dc}*{box-sizing:border-box}body{margin:0}header,main,footer{max-width:1400px;margin:auto;padding:28px 36px}header{border-bottom:1px solid var(--line)}h1{font-size:36px;line-height:1.2;margin:14px 0}h2{font-size:23px;line-height:1.3}h3{font-size:16px}p{max-width:100ch}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700;color:var(--teal)}.panel{background:white;border:1px solid var(--line);border-radius:14px;padding:24px;margin-bottom:24px}.muted,figcaption{font-size:12px;color:#60767a}.notice{background:#eef6f3;padding:12px;border-radius:8px}button,select,input{font:inherit;color:inherit;border:1px solid #bdcfca;border-radius:6px;padding:9px;background:white}button{cursor:pointer}button:hover{background:#e6f1ed}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--teal)}button:disabled{opacity:.45;cursor:default}nav{display:flex;gap:10px;margin-bottom:24px;flex-wrap:wrap}nav button{border:0;font-weight:650}nav button[aria-pressed=true]{background:var(--teal);color:white}.selection{display:grid;grid-template-columns:minmax(220px,1fr) 96px 1.5fr;gap:20px;align-items:center}.selection label{display:flex;flex-direction:column;gap:6px}.selection select{width:100%}img{border-radius:8px;object-fit:cover}#status{margin:0 0 12px;font-size:12px}.map-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(230px,1fr);gap:25px}#image-map{width:100%;border:1px solid var(--line);border-radius:10px;background:#f5f8f6}.point{cursor:pointer}.point:focus rect{stroke:#111;stroke-width:5}.channel-links{display:flex;flex-direction:column;gap:6px}.neighbours{display:flex;gap:12px;flex-wrap:wrap}.neighbours button{flex:1;min-width:140px;display:flex;gap:10px;align-items:center;text-align:left;font-size:12px}.neighbours img{width:55px;height:55px}.flow{display:flex;gap:12px;align-items:center;overflow:auto;padding:15px 0}.flow div{padding:12px;background:#eaf4f0;border-radius:8px;min-width:120px;flex:1}.flow span{display:block;font-size:12px}.stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.stage{background:#f1f6f3;border-radius:10px;padding:14px}.stage h3{margin:0}.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:12px 0}.tiles button{padding:5px;font-size:11px}.tiles canvas{display:block;width:100%;height:auto;image-rendering:pixelated}.pager{display:flex;gap:5px;justify-content:space-between}.pager button{font-size:11px;padding:6px}.stage small{font-size:11px}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.row input{width:85px}.detail-grid{display:grid;grid-template-columns:224px 224px 1fr;gap:20px}.detail-grid figure{margin:0}.detail-grid canvas{image-rendering:pixelated;max-width:100%;height:auto}#detail{scroll-margin-top:15px}#pooled-chart{width:100%;height:150px;background:#f1f6f3}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:12px;border-bottom:1px solid var(--line)}a{color:var(--teal)}[hidden]{display:none!important}footer{font-size:12px;color:#60767a}@media(max-width:900px){.map-layout{grid-template-columns:1fr}.stages{grid-template-columns:1fr 1fr}.detail-grid{grid-template-columns:1fr 1fr}.detail-grid>div{grid-column:1/-1}.selection{grid-template-columns:1fr 96px}.selection>div{grid-column:1/-1}}@media(max-width:550px){header,main,footer{padding:18px 12px}.panel{padding:16px}h1{font-size:28px}.detail-grid img{width:100%;height:auto}.flow{align-items:stretch}.stages{gap:8px}.stage{padding:8px}}

/* UMAP work surface and cross-linked network context. */
header{padding-top:22px;padding-bottom:18px}header h1{font-size:32px}header p{margin-bottom:0}main{padding-top:18px}nav{margin-bottom:16px}.selection{padding:16px 22px}.map-layout{grid-template-columns:minmax(0,2.6fr) minmax(235px,1fr)}.map-layout aside{background:#f1f7f4;border:1px solid #dbe7e1;border-radius:12px;padding:18px}.map-layout aside>button{width:100%;margin-bottom:8px}.primary{background:#087e87;color:white;border-color:#087e87}.primary:hover{background:#086b73}.map-toolbar{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;background:#f1f6f3;padding:12px;border-radius:10px;margin:18px 0}.map-toolbar label{font-size:12px}.map-toolbar select{max-width:180px;font-size:12px;padding:6px}.map-toolbar button{padding:6px 10px;font-size:12px}.map-toolbar .row{gap:10px}.map-surface{position:relative}.map-column{min-width:0}#image-map{display:block;cursor:grab;touch-action:none;aspect-ratio:800/570}#image-map.dragging{cursor:grabbing}.point{cursor:pointer}.point:focus circle{stroke:#111;stroke-width:3}#map-tooltip{position:absolute;left:12px;top:12px;background:#fffefb;border:1px solid #b6ccc4;box-shadow:0 8px 24px #1b40352b;border-radius:10px;padding:12px;pointer-events:none;max-width:245px;z-index:2;font-size:12px}#map-tooltip img{width:70px;height:70px;float:left;margin-right:10px}#map-tooltip span,#map-tooltip small{display:block}.map-legend{font-size:12px;color:#42615d}.sample-key{font-size:21px;color:#153e46}.coverage-badge{display:inline-block;padding:3px 8px;border-radius:20px;background:#e9eeec;font-size:10px;white-space:nowrap}.coverage-badge.available{background:#d5eee4;color:#0a594c}.learning-guide{background:#f4f8f6;border-left:4px solid #087e87;border-radius:8px;padding:16px;margin:22px 0}.learning-guide summary{cursor:pointer;font-size:18px;font-weight:650}.learning-guide p{font-size:13px}.concept-path{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:15px;align-items:center;margin-top:18px}.concept-path>div{align-self:stretch;background:white;padding:14px;border:1px solid #d4e3dc;border-radius:8px}.network-graph{display:flex;align-items:center;gap:8px;overflow:auto;padding:15px 0}.network-node{display:flex;flex-direction:column;gap:6px;text-align:left;min-width:110px;max-width:145px;font-size:12px;padding:12px 8px;border:2px solid #c7dad1;background:#f4f8f6}.network-node small{font-size:10px}.network-node em{font-size:10px;font-style:normal;color:#087e87}.network-node.projection{border-color:#d9a957}.network-node[aria-pressed=true]{background:#d5eee5;outline:2px solid #087e87}.network-stage{display:flex;flex-direction:column;align-items:center;gap:7px;background:#eaf2ee;border-radius:10px;padding:10px 6px;font-size:12px}.graph-arrow{color:#638378}.projection-branch{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:12px;padding:12px;background:#f2f6f4;border-radius:8px}.projection-branch button{font-size:12px}.topology-detail{display:grid;grid-template-columns:1fr 1fr;gap:28px}#block-diagram svg{width:100%;max-height:450px}.operation-chain{display:flex;flex-direction:column;gap:15px;align-items:center;margin:24px}.operation-chain>div{padding:18px;background:#eaf4ef;border:1px solid #c6dcd0;border-radius:8px;min-width:220px;text-align:center}.operation-chain>span{color:#087e87}dl{display:grid;grid-template-columns:1fr 1.5fr;gap:12px;font-size:13px}dt{color:#60767a}dd{margin:0}#node-detail{scroll-margin-top:15px}#node-parameters{overflow:auto;font-size:11px}.stage-heading{background:transparent;border:0;font-weight:700;padding:0}.stage-highlight{outline:3px solid #087e87}.stage{scroll-margin-top:20px}.behavior-controls{display:flex;gap:15px;align-items:center;flex-wrap:wrap;padding:15px;background:#edf5f1;border-radius:9px;margin:20px 0}.behavior-controls input{flex:1;min-width:140px}.behavior-grid{display:grid;grid-template-columns:190px 1fr 1.3fr;gap:24px}.behavior-grid figure{margin:0}.behavior-grid img{width:100%;height:auto}.behavior-metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px}.behavior-metrics>div{background:#eef5f1;border-radius:8px;padding:12px;font-size:12px}.behavior-metrics strong{display:block;font-size:23px}.probability-row{display:grid;grid-template-columns:1fr auto;gap:3px 10px;font-size:12px;margin:10px 0}.probability-track{grid-column:1/-1;background:#e2ece6;height:6px;border-radius:3px}.probability-track span{display:block;height:100%;background:#087e87;border-radius:3px}#behavior-history{width:100%}#behavior-history [role=button]{cursor:pointer}#behavior-history [role=button]:focus circle{stroke:#153e46;stroke-width:3}
@media(max-width:1000px){.map-layout{grid-template-columns:1fr}.map-layout aside{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}.map-layout aside h3,.map-layout aside>p{grid-column:1/-1}.behavior-grid{grid-template-columns:180px 1fr}.behavior-grid>div:last-child{grid-column:1/-1}}@media(max-width:700px){.concept-path,.topology-detail{grid-template-columns:1fr}.concept-path>span{justify-self:center;transform:rotate(90deg)}.behavior-grid{grid-template-columns:1fr}.behavior-grid figure{max-width:180px}.map-layout aside{display:block}.map-toolbar{align-items:start}.behavior-controls select{max-width:250px}.network-node{min-width:105px}.selection{padding:16px}}

.channel-jump{display:flex;align-items:center;gap:6px;font-size:11px;margin:8px 0}.channel-jump input{width:65px;padding:5px}

/* Keep location, operation and output adjacent in the inspection workspace. */
.location-workspace{display:grid;grid-template-columns:250px minmax(0,1fr);gap:24px;align-items:start;margin:22px 0}.location-workspace>aside{background:#f2f7f4;padding:16px;border-radius:10px}.location-workspace #node-detail{margin:0;min-height:610px}.network-graph{display:grid;grid-template-columns:1fr;overflow:visible;padding:0;gap:5px}.network-stage{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px}.network-stage>strong{grid-column:1/-1}.network-stage>span{display:none}.network-node{min-width:0;max-width:none;width:100%;font-size:11px;padding:8px}.network-node small,.network-node em{display:none}.network-node span{font-size:10px}.graph-arrow{text-align:center;line-height:1}.topology-detail{grid-template-columns:minmax(180px,1fr) minmax(200px,1fr);gap:18px}.stages{display:block}.tiles{grid-template-columns:repeat(6,minmax(0,1fr))}.stage{padding:16px}.stage .channel-jump{display:inline-flex;margin-right:24px}.stage .pager{display:inline-flex;gap:10px}.stage>small{display:block}#detail{min-height:330px}#detail .detail-grid{grid-template-columns:180px 180px minmax(0,1fr)}#detail img,#detail canvas{width:180px;height:180px}.method-flow{padding:20px;background:#eaf4ef;border-radius:8px;line-height:2}.pseudocode{white-space:pre-wrap;background:#172f35;color:#e4f1ed;padding:24px;border-radius:10px;font-size:13px;line-height:1.7;overflow:auto}#panel-behavior{scroll-margin-top:20px}.point:focus rect{stroke-width:1.5}
@media(max-width:900px){.location-workspace{grid-template-columns:190px minmax(0,1fr)}.topology-detail{grid-template-columns:1fr}.location-workspace #node-detail{min-height:0}#detail .detail-grid{grid-template-columns:1fr 1fr}#detail .detail-grid>div{grid-column:1/-1}.tiles{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.location-workspace{grid-template-columns:1fr}.network-graph{grid-template-columns:repeat(2,minmax(0,1fr))}.graph-arrow{display:none}.network-stage{grid-template-columns:1fr 1fr}#detail img,#detail canvas{max-width:100%;height:auto}}

.location-workspace>aside{position:sticky;top:12px;max-height:80vh;overflow:auto}.location-output{min-width:0}.location-output #node-detail{min-height:620px;padding:18px}.location-output #detail{padding:18px;margin-top:16px}.location-output #detail .detail-grid{grid-template-columns:150px 150px minmax(0,1fr);gap:14px}.location-output #detail img,.location-output #detail canvas{width:150px;height:150px}.location-output .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}.location-output .tiles canvas{max-height:105px;object-fit:contain}.location-output #detail .detail-grid>div{grid-column:1/-1}.location-output .detail-grid{min-height:350px}@media(max-width:600px){.location-workspace>aside{position:static;max-height:none}}
