#record .wrap { width: min(1440px, 100% - 96px); }
#record { padding-block: 68px 64px; }
.record-head { padding-bottom: 32px; margin-bottom: 30px; }
.record-head h2 { max-width: none; font-size: clamp(32px, 3.7vw, 50px); }
#explorer { --graph-ground: #10131b; --edge: #46536a; }
#explorer button, #explorer select, #explorer input { font-family: var(--sans); font-size: 14px; }
#explorer button { cursor: pointer; min-height: 44px; }
#explorer button:disabled { opacity: 0.35; cursor: default; }
#explorer .sides { gap: 0px; margin-bottom: 28px; border-bottom: 1px solid var(--canvas-rule); }
#explorer .side { border-width: 0px 0px 2px; border-style: none none solid; border-color: currentcolor currentcolor transparent; border-image: none; padding: 14px 20px 18px; background: none; box-shadow: none; position: relative; }
#explorer .side:first-child { padding-left: 0px; }
#explorer .side[aria-pressed="true"] { border-bottom-color: var(--blue); background: none; }
#explorer .side[aria-pressed="true"]::after { content: "Selected"; position: absolute; right: 20px; top: 14px; font: 10px var(--mono); color: var(--canvas-signal); }
#explorer .side-title { font-size: 24px; margin-top: 10px; }
#explorer .side-label { color: var(--canvas-muted); }
#explorer .side-head { gap: 18px; margin-bottom: 20px; }
#side-h { font-size: 20px; max-width: 52ch; }
.view-control { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.view-control label { font: 11px var(--mono); color: var(--canvas-muted); text-transform: uppercase; }
#view { border: 1px solid var(--canvas-rule); padding: 10px 32px 10px 12px; background: rgb(19, 25, 37); color: rgb(230, 234, 243); border-radius: 0px; min-height: 44px; }
.explorer-body { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(365px, 410px); gap: 28px; align-items: start; }
.map-column { min-width: 0px; }
.map-area { height: 640px; position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(at 50% 42%, rgb(26, 34, 48) 0%, rgb(16, 19, 27) 65%); border: 1px solid var(--canvas-rule); border-radius: 3px; }
.map-area::before { content: ""; position: absolute; inset: 0px; background-image: radial-gradient(rgb(128, 148, 182) 0.55px, transparent 0.55px); background-size: 7px 7px; opacity: 0.055; pointer-events: none; z-index: -1; }
.map-heading { position: absolute; top: 22px; left: 22px; right: 22px; display: flex; align-items: start; justify-content: space-between; gap: 20px; pointer-events: none; font: 10px/1.5 var(--mono); letter-spacing: 0.07em; color: var(--canvas-muted); }
#count { letter-spacing: 0px; white-space: nowrap; color: rgb(195, 206, 222); }
#graph { width: 100%; height: 100%; min-height: 0px; display: block; touch-action: none; cursor: grab; }
#graph.dragging { cursor: grabbing; }
.edge { stroke: var(--edge); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.65; }
.edge.active { stroke: var(--canvas-signal); stroke-width: 1.5; opacity: 0.9; }
.edge.dim { opacity: 0.12; }
.node { cursor: pointer; outline: none; transition: opacity 0.16s; }
.node .hit { fill: transparent; }
.node .dot { fill: rgb(160, 168, 192); stroke: var(--graph-ground); stroke-width: 2; }
.node.anchor .dot { fill: rgb(39, 59, 88); stroke: rgb(141, 184, 255); stroke-width: 1.25; }
.node.line .dot, .node.part .dot, .node.stage .dot { fill: rgb(168, 191, 220); stroke: rgb(185, 205, 229); }
.node.work[data-family="agentic"] .dot { fill: var(--fam-agentic); }
.node.work[data-family="understanding"] .dot { fill: var(--fam-understanding); }
.node.work[data-family="platform"] .dot { fill: var(--fam-platform); }
.node.work[data-family="governance"] .dot { fill: var(--fam-governance); }
.node .ring { fill: none; stroke: transparent; stroke-width: 1; vector-effect: non-scaling-stroke; }
.node.selected .ring { stroke: rgb(230, 234, 243); }
.node.selected .dot { fill: var(--canvas-signal); stroke: var(--canvas-signal); }
.node.dim { opacity: 0.2; }
.node text { fill: rgb(224, 231, 242); font: 14px var(--sans); text-anchor: middle; paint-order: stroke; stroke: var(--graph-ground); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.node.line text { font-weight: 500; fill: rgb(255, 255, 255); }
.node .badge { fill: var(--canvas-signal); font: 11px var(--mono); }
.node.work .name { opacity: 0; }
.node.work.selected .name, .node.work.neighbour .name, .node.work:hover .name, .all-labels .node.work .name { opacity: 1; }
.node.dim text { opacity: 0.4; }
.node.dim.work .name { opacity: 0; }
.node:hover { opacity: 1; }
.map-bottom { position: absolute; bottom: 64px; left: 22px; right: 22px; display: flex; justify-content: space-between; gap: 10px; align-items: end; pointer-events: none; }
.map-bottom p { font: 12px/1.7 var(--sans); color: rgb(174, 187, 208); margin: 0px; }
.map-controls { display: flex; gap: 0px; border: 1px solid rgb(71, 83, 106); background: rgb(18, 25, 37); border-radius: 4px; pointer-events: auto; }
.map-controls button { background: transparent; color: rgb(221, 230, 244); border: 0px; padding: 8px 12px; }
.map-controls button:hover { background: rgb(39, 55, 75); }
.map-controls #zoom-in, .map-controls #zoom-out { font-size: 20px; min-width: 40px; }
.map-controls #fit { font-size: 12px; border-left: 1px solid rgb(71, 83, 106); }
.legend { position: absolute; bottom: 0px; left: 22px; right: 22px; display: flex; align-items: center; gap: 20px; height: 48px; border-top: 1px solid var(--canvas-rule); font: 12px var(--sans); color: rgb(178, 191, 210); }
.legend span { display: flex; align-items: center; gap: 8px; }
.legend i { display: block; width: 7px; height: 7px; background: rgb(180, 193, 213); border-radius: 50%; }
.legend .hub-key { width: 10px; height: 10px; background: none; border: 1px solid rgb(141, 184, 255); }
#labels { margin-left: auto; background: none; border: 0px; color: rgb(178, 191, 210); padding: 0px; font-size: 12px; }
#labels[aria-pressed="true"] { color: rgb(255, 255, 255); text-decoration: underline; text-underline-offset: 4px; }
.map-toolbar { display: flex; justify-content: space-between; gap: 8px; padding: 12px 0px; }
.map-toolbar > div { display: flex; gap: 8px; }
.map-toolbar button { background: transparent; border: 1px solid var(--canvas-rule); color: rgb(214, 222, 237); padding: 7px 12px; border-radius: 3px; }
.map-toolbar button:hover { border-color: rgb(160, 182, 213); }
.map-toolbar #full-screen { border-color: transparent; padding-right: 0px; color: var(--canvas-signal); }
#mobile-branches { margin: 0px; display: none; }
#mobile-branches summary { min-height: 44px; padding: 12px 0px; cursor: pointer; font-size: 14px; color: var(--canvas-signal); }
#explorer .families { padding: 12px 0px 0px; margin: 0px; gap: 10px 18px; }
#explorer .families li { font: 10px/1.5 var(--mono); cursor: default; }
#reader { height: 640px; min-height: 0px; max-height: none; display: flex; flex-direction: column; background: rgb(19, 25, 37); border: 1px solid var(--canvas-rule); border-radius: 3px; overflow: hidden; }
#reader .chat-head { padding: 18px 22px; min-height: 78px; flex-shrink: 0; background: transparent; }
#reader .chat-id { gap: 12px; }
#reader .chat-id b { font: 500 17px var(--sans); color: rgb(242, 245, 250); }
.reader-caption { display: block; font: 11px/1.5 var(--mono); color: rgb(160, 168, 192); margin-top: 4px; }
#reader .chat-mark { border-radius: 0px; background: var(--blue); color: white; border: 0px; font-weight: 600; width: 29px; height: 29px; }
#reader .chat-clear { padding: 6px 0px 6px 12px; font-size: 13px; }
#detail { padding: 24px 22px; min-height: 0px; flex: 1 1 0%; position: relative; gap: 20px; }
#detail .turn-body { padding-left: 0px; border-left: 0px; }
#detail .turn-body h4 { font-size: 24px; line-height: 1.28; letter-spacing: -0.025em; margin: 10px 0px 18px; }
#detail .turn-body p { font: 16px/1.65 var(--sans); color: rgb(203, 213, 229); }
#detail .turn-body .eyebrow, #detail .turn-body .k { font: 10px/1.5 var(--mono); letter-spacing: 0.09em; color: var(--canvas-muted); }
#detail .turn-body .eyebrow { color: var(--canvas-signal); }
#detail .turn-body .k { margin: 24px 0px 10px; padding-top: 18px; border-top: 1px solid var(--canvas-rule); }
#detail .turn-body .did li { font-size: 16px; line-height: 1.6; padding-left: 17px; margin-bottom: 10px; }
#detail .turn-ask { font-size: 14px; line-height: 1.5; max-width: 96%; padding: 11px 14px; flex-shrink: 0; }
#detail .turn-answer { padding-bottom: 28px; border-bottom: 1px solid var(--canvas-rule); }
#detail .turn-answer:last-child { border-bottom: 0px; padding-bottom: 0px; }
#detail .chips { display: flex; flex-direction: column; gap: 0px; }
#detail .chips li { margin: 0px; }
#detail .chips button { display: block; width: 100%; background: none; border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor rgb(43, 53, 70); border-image: none; text-align: left; padding: 11px 24px 11px 0px; position: relative; font-size: 14px; line-height: 1.5; }
#detail .chips button::after { content: "↗"; position: absolute; right: 0px; top: 12px; color: var(--canvas-signal); }
#detail .chips button:hover { color: white; background: rgb(27, 37, 53); }
#detail .tags { margin: 0px 0px 18px; gap: 6px; }
#detail .tags li { font: 11px/1.35 var(--sans); letter-spacing: 0px; text-transform: none; padding: 6px 8px; cursor: default; }
#detail .strip li { font-size: 10px; line-height: 1.5; min-height: 50px; }
#detail .strip li.off { color: rgb(147, 158, 179); }
#detail .starters { gap: 8px; }
#detail .starters button { padding: 13px; font-size: 14px; line-height: 1.5; background: rgb(24, 34, 52); border-color: rgb(53, 67, 91); border-radius: 3px; }
.branch-action { display: flex; justify-content: space-between; width: 100%; margin-top: 24px; padding: 10px 12px; border: 1px solid rgb(87, 116, 154); border-radius: 3px; background: rgb(26, 42, 65); color: rgb(212, 229, 255); text-align: left; }
#reader .chat-foot { padding: 16px 22px; flex-shrink: 0; }
.search-label { font-size: 12px; color: rgb(195, 206, 222); display: block; margin: 0px 0px 9px; }
.search-box { position: relative; }
#search { width: 100%; padding: 12px 32px 12px 12px; background: rgb(13, 19, 30); border: 1px solid rgb(83, 96, 121); border-radius: 3px; color: rgb(242, 245, 250); min-height: 44px; font-size: 14px; }
#search::placeholder { color: rgb(154, 169, 190); }
#search:focus { outline: 2px solid var(--blue); outline-offset: 2px; }
#search::-webkit-search-cancel-button { display: none; }
#search-clear { position: absolute; right: 0px; top: 0px; min-height: 44px; width: 30px; color: rgb(224, 231, 242); background: none; border: 0px; font-size: 20px; }
#results { position: absolute; bottom: calc(100% + 10px); left: 0px; right: 0px; max-height: 330px; overflow: auto; background: rgb(21, 32, 52); border: 1px solid rgb(83, 96, 121); box-shadow: rgba(0, 0, 0, 0.333) 0px 10px 35px; z-index: 4; padding: 0px 12px; }
#results p { font-size: 14px; color: rgb(195, 206, 222); }
#results .result-count { font: 11px var(--mono); color: rgb(170, 184, 207); }
.related { background: none; color: rgb(214, 225, 242); border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor rgb(61, 75, 99); border-image: none; display: block; text-align: left; width: 100%; padding: 12px 0px; line-height: 1.5; }
.related small { display: block; font: 10px/1.5 var(--mono); color: var(--canvas-signal); margin-bottom: 5px; }
.related:hover { color: white; background: rgb(37, 55, 84); }
#reader .chat-note { color: rgb(156, 170, 192); font-size: 10px; line-height: 1.5; margin-top: 10px; }
#back-to-map { display: none; }
.below-map { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid var(--canvas-rule); margin-top: 22px; padding-top: 12px; color: rgb(160, 168, 192); font-size: 13px; }
.below-map button { background: none; border: 0px; padding: 8px 0px; color: var(--canvas-signal); text-align: right; }
#record-list { padding-top: 20px; columns: 2; column-gap: 40px; }
#record-list details { padding: 16px 0px; border-top: 1px solid var(--canvas-rule); break-inside: avoid; }
#record-list summary { font-size: 16px; line-height: 1.5; cursor: pointer; color: rgb(230, 234, 243); }
#record-list p, #record-list li { font-size: 16px; line-height: 1.65; color: rgb(203, 213, 229); }
#record-list button { border: 1px solid rgb(83, 96, 121); padding: 8px 12px; background: none; color: var(--canvas-signal); }
#record .no-js { margin-top: 16px; }
.graph-ready #record .no-js { display: none; }
html:not(.graph-ready) #explorer { display: none; }
#explorer.full-screen { position: fixed; inset: 0px; z-index: 30; background: var(--canvas); padding: 16px 30px; overflow: auto; color: rgb(230, 234, 243); }
.full-screen .sides { margin-bottom: 14px !important; }
.full-screen .side { padding-block: 8px 12px !important; }
.full-screen .side-title { font-size: 19px !important; }
.full-screen .map-area, .full-screen #reader { height: calc(100dvh - 235px); min-height: 360px; }
.full-screen .side-head { margin-bottom: 12px !important; }
.full-screen .below-map { display: none; }
@media (min-width: 1500px) {
  .map-area, #reader { height: 690px; }
  .explorer-body { grid-template-columns: minmax(0px, 1fr) 440px; }
}
@media (max-width: 1150px) {
  #record .wrap { width: calc(100% - 64px); }
  .explorer-body { grid-template-columns: minmax(0px, 1fr) 365px; gap: 18px; }
  .map-bottom p { max-width: 150px; font-size: 11px; }
  .map-controls button { padding-inline: 8px; }
  .map-heading { left: 16px; right: 16px; font-size: 9px; }
}
@media (max-width: 900px) {
  #record .wrap { width: calc(100% - 40px); }
  .explorer-body { grid-template-columns: 1fr; gap: 24px; }
  .map-area { height: 540px; }
  #reader { height: 680px; }
  #detail { padding: 24px; }
  #reader .chat-foot { padding: 18px 24px; }
  #mobile-branches { display: block; }
  #back-to-map { display: block; border-right: 0px; border-bottom: 0px; border-left: 0px; border-image: none; border-top: 1px solid var(--canvas-rule); background: rgb(23, 34, 56); color: var(--canvas-signal); padding: 12px; flex-shrink: 0; }
  .map-bottom p { max-width: none; font-size: 12px; }
  .full-screen .map-area { height: 55dvh; }
  .full-screen #reader { height: 650px; }
  .full-screen #mobile-branches { display: none; }
  #side-h { font-size: 19px; }
  .view-control { margin-left: auto; }
}
@media (max-width: 600px) {
  #record { padding-block: 42px; }
  .record-head { margin-bottom: 20px; padding-bottom: 24px; }
  #explorer .side { padding: 12px !important; }
  #explorer .side:first-child { padding-left: 0px !important; }
  #explorer .side-title { font-size: 19px !important; max-width: 13ch; }
  #explorer .side[aria-pressed="true"]::after { display: none; }
  #explorer .side-label { font-size: 9px; }
  #explorer .sides { margin-bottom: 24px; }
  .view-control { margin-left: 0px; width: 100%; justify-content: space-between; }
  #view { flex: 1 1 0%; max-width: 240px; }
  .map-area { height: 470px; }
  .map-heading { top: 15px; font-size: 9px; letter-spacing: 0px; }
  .map-bottom { left: 14px; right: 14px; bottom: 58px; }
  .map-bottom p { font-size: 10px; max-width: 115px; line-height: 1.5; }
  .map-controls #fit { font-size: 11px; }
  .map-controls #zoom-in, .map-controls #zoom-out { min-width: 32px; }
  .legend { left: 14px; right: 14px; gap: 12px; font-size: 11px; }
  #labels { font-size: 11px !important; }
  .map-toolbar button { padding: 8px; font-size: 12px !important; }
  .map-toolbar #full-screen { white-space: nowrap; }
  #reader { height: 700px; }
  #detail .turn-body h4 { font-size: 23px; }
  #reader .chat-head { padding: 16px 20px; }
  #detail { padding: 22px 20px; }
  #reader .chat-foot { padding: 16px 20px; }
  .below-map { display: block; }
  .below-map p { margin: 8px 0px; }
  .below-map button { text-align: left; }
  #record-list { columns: 1; }
  #explorer.full-screen { padding: 14px; }
  .node.dim text { visibility: hidden; }
  .node.work.neighbour:not(.selected):not(:hover) .name { opacity: 0; }
  .all-labels .node.work .name { opacity: 1; }
}
@media (max-width: 360px) {
  #record .wrap { width: calc(100% - 28px); }
  .map-heading { font-size: 8px; gap: 8px; }
  .map-bottom p { display: none; }
  .map-bottom { justify-content: end; }
  #detail { padding: 18px 16px; }
  #reader .chat-foot { padding: 14px 16px; }
  .map-toolbar { gap: 0px; }
  .map-toolbar > div { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  #explorer * { transition: none !important; animation: auto ease 0s 1 normal none running none !important; }
}
.node.dim .badge { visibility: hidden; }
.label-lead { stroke: rgb(117, 138, 167); stroke-width: 0.6; stroke-dasharray: 2, 3; opacity: 0.6; pointer-events: none; vector-effect: non-scaling-stroke; }
.explorer-hint { font: 12px var(--sans); color: var(--canvas-muted); margin: 0px; }
.map-area, #reader { height: 760px; }
.explorer-body { grid-template-columns: minmax(0px, 1fr) minmax(360px, 390px); gap: 24px; }
.edge { stroke: rgb(113, 135, 164); opacity: 0.18; stroke-width: 0.8; pointer-events: none; }
.edge.active { stroke: rgb(136, 171, 224); stroke-width: 1; opacity: 0.46; }
.edge.dim { opacity: 0.055; }
.edge.summary-edge { stroke: rgb(141, 158, 183); opacity: 0.19; stroke-width: 0.8; stroke-dasharray: 3, 6; }
.edge.summary-edge.active { opacity: 0.22; }
.edge.summary-edge.dim { opacity: 0.07; }
.edge-pulse { stroke: rgb(182, 212, 255); stroke-width: 1.4; stroke-dasharray: 5, 40; opacity: 0; vector-effect: non-scaling-stroke; pointer-events: none; }
.edge-pulse.running { opacity: 0.52; animation: 5s ease-in-out 0s infinite alternate none running connection-pulse; }
@keyframes connection-pulse {
  0% { stroke-dashoffset: 0; opacity: 0.18; }
  100% { stroke-dashoffset: 42; opacity: 0.48; }
}
.theme-label { font: 11px var(--mono); letter-spacing: 0.07em; text-anchor: middle; fill: rgb(165, 180, 204); pointer-events: none; }
.node.work .name, .node.dim.work .name { opacity: 1; }
.node.dim { opacity: 0.4; }
.node.dim text { opacity: 0.8; }
.node .name { font-weight: 400; }
.node.work .dot { fill: rgb(147, 198, 183); stroke: rgb(16, 19, 27); }
.node.work .name { fill: rgb(193, 215, 207); }
.node.selected .name { fill: white; font-weight: 500; }
.node.anchor .dot { fill: rgb(23, 43, 72); stroke: rgb(148, 185, 236); }
.node.selected .dot { fill: rgb(132, 181, 255); }
.node.dim .badge { visibility: visible; opacity: 0.4; }
.legend { gap: 15px; font-size: 11px; }
#bridge-key { margin-left: auto; font: 10px var(--sans); color: rgb(161, 175, 195); }
#reader-home { min-width: 0px; }
#reader .chat-head { min-height: 74px; padding: 16px 22px; }
.reader-caption { font-size: 10px; letter-spacing: 0px; }
.reader-nav { display: flex; justify-content: space-between; border-bottom: 1px solid var(--canvas-rule); padding: 0px 22px; flex-shrink: 0; }
.reader-nav button { border: 0px; background: none; color: rgb(157, 189, 233); padding: 0px 8px; font-size: 12px !important; }
.reader-nav button:first-child { padding-left: 0px; }
#detail { display: block; overflow: auto; overscroll-behavior: contain; padding: 24px 22px; }
#detail .turn-body h4 { font-size: 23px; }
#detail .turn-body p { font-size: 15px; line-height: 1.7; }
#detail .turn-body .k { font-size: 10px; margin-top: 24px; }
#detail .starters { list-style: none; padding: 0px; display: flex; flex-direction: column; gap: 10px; }
#detail .starters button { width: 100%; text-align: left; color: rgb(228, 237, 249); line-height: 1.55; padding: 15px; border: 1px solid rgb(52, 68, 93); background: rgb(25, 36, 55); font-size: 15px; }
#detail .starters button:hover { border-color: rgb(114, 155, 214); background: rgb(32, 49, 74); }
#detail .starters button span { color: rgb(138, 179, 239); }
.record-disclosure { border-block-start: 1px solid rgb(48, 61, 81); margin-top: 16px; padding: 0px; }
.record-disclosure summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; justify-content: space-between; font: 14px var(--sans); color: rgb(189, 213, 248); list-style: none; padding: 12px 0px; }
.record-disclosure summary::after { content: "+"; font: 18px var(--mono); }
.record-disclosure[open] summary::after { content: "−"; }
.record-disclosure summary::-webkit-details-marker { display: none; }
.record-disclosure .did { margin-top: 8px; }
#detail .record-disclosure .did li { font-size: 15px; }
#detail .connections ul { padding: 0px; list-style: none; }
#detail .connections li { border-bottom: 1px solid rgb(43, 53, 70); padding: 8px 0px; }
#detail .connections button { background: none; border: 0px; text-align: left; color: rgb(184, 211, 250); line-height: 1.55; padding: 6px 0px; font-size: 14px; }
#detail .connections li p { font-size: 12px; margin: 0px 0px 10px; color: rgb(159, 172, 191); }
#sheet-close { display: none; }
#detail-sheet { background: rgb(19, 25, 37); color: rgb(230, 234, 243); border: 1px solid rgb(64, 82, 110); border-radius: 14px 14px 0px 0px; padding: 0px; width: 100%; max-width: 100%; max-height: none; margin: auto 0px 0px; inset: auto 0px 0px; overflow: hidden; }
#detail-sheet::backdrop { background: rgba(4, 8, 16, 0.733); backdrop-filter: blur(3px); }
#detail-sheet #reader { height: 88dvh; max-height: 88dvh; border: 0px; border-radius: 0px; }
#detail-sheet #sheet-close { display: block; border: 1px solid rgb(71, 92, 125); background: none; color: rgb(224, 234, 255); padding: 6px 10px; margin-left: auto; font-size: 12px; }
body:has(#detail-sheet[open]) { overflow: hidden; }
#read-selection { display: none; }
#explorer .map-controls button { min-width: 44px; }
#motion { font-size: 12px !important; }
#motion[aria-pressed="false"] { color: rgb(159, 170, 185); }
.full-screen .map-area, .full-screen #reader { height: calc(100dvh - 255px); min-height: 420px; }
@media (min-width: 1500px) {
  .map-area, #reader { height: 800px; }
  .explorer-body { grid-template-columns: minmax(0px, 1fr) 430px; }
}
@media (max-width: 1150px) and (min-width: 901px) {
  #record .wrap { width: calc(100% - 40px); }
  .explorer-body { grid-template-columns: minmax(0px, 1fr) 340px; gap: 16px; }
  .map-area, #reader { height: 780px; }
  .map-heading { gap: 6px; }
  .map-bottom p { font-size: 10px; }
  .legend { gap: 8px; }
  #bridge-key { font-size: 9px; }
}
@media (max-width: 900px) {
  .explorer-body { grid-template-columns: 1fr; }
  .map-area { height: 660px; }
  #reader { height: 570px; }
  .full-screen .map-area { height: calc(100dvh - 255px); min-height: 420px; }
  .full-screen #reader { height: 570px; }
  #read-selection:not([hidden]) { display: block; }
  #reader-home:empty { display: none; }
  .explorer-hint { display: none; }
  .node.dim text { visibility: visible; }
  .node.work.neighbour:not(.selected):not(:hover) .name { opacity: 1; }
}
@media (max-width: 600px) {
  .map-area { height: 650px; }
  .map-toolbar > div { gap: 4px; }
  .map-toolbar button { padding: 7px; font-size: 11px !important; }
  .map-toolbar #full-screen { font-size: 11px !important; }
  .legend { gap: 10px; font-size: 10px; }
  #bridge-key { font-size: 9px; }
  .map-heading { left: 14px; right: 14px; }
  #reader { height: 560px; }
  #detail-sheet .chat-id b { font-size: 15px; }
  #detail-sheet .reader-caption { font-size: 9px; }
  #detail-sheet #reader .chat-head { padding: 12px 18px; }
  .reader-nav { padding: 0px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .edge-pulse.running { opacity: 0; animation: auto ease 0s 1 normal none running none !important; }
}
.node .name, .node .badge { pointer-events: auto; }
.node.dim { opacity: 0.48; }
#detail .starters button::after { content: none; }
.full-screen .map-area, .full-screen #reader { min-height: 700px; }
@media (max-width: 900px) {
  .full-screen .map-area { min-height: 650px; }
  .full-screen #reader { min-height: 0px; }
}/* Annotation revision: selected cards, clearer connections and a two-column ledger. */
#explorer .sides{gap:12px;border-bottom:0}
#explorer .side,#explorer .side:first-child{border:1px solid #39455a;padding:18px 20px;background:#111620;border-radius:3px}
#explorer .side[aria-pressed=true]{border:1px solid #568fe6;background:#172b46;box-shadow:inset 0 0 0 1px #568fe633}
#explorer .side[aria-pressed=true]::after{content:none}
#explorer .side:hover{background:#1b2940;border-color:#6b87af}
#explorer .side[aria-pressed=true] .side-label{color:#a9cdff}
.edge-pulse.running{stroke:#a6ceff;stroke-width:1.9;stroke-dasharray:8 48;opacity:.8;animation:connection-pulse 3.6s ease-in-out infinite alternate}
@keyframes connection-pulse{from{stroke-dashoffset:0;opacity:.48}to{stroke-dashoffset:56;opacity:.9}}
#lessons{width:min(1440px,calc(100% - 96px));grid-template-columns:180px minmax(0,1fr);gap:48px}
#lessons .ledger{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,auto);grid-auto-flow:column;column-gap:40px;position:relative}
#lessons .ledger::before{content:'';position:absolute;top:0;bottom:0;left:calc(50% - .5px);width:1px;background:var(--rule)}
#lessons .ledger>li{padding:22px 0 24px 42px;min-width:0}
#lessons .ledger>li::before{display:none}
#lessons .ledger>li::after{top:27px}
#lessons .ledger .claim{font-size:19px;line-height:1.5}
#lessons .ledger .gloss{font-size:14px;line-height:1.7}
.stack img[src$="infor.png"]{width:20px;height:20px}
@media(max-width:1100px){#lessons{grid-template-columns:1fr;gap:24px;width:calc(100% - 64px)}#lessons .margin-note{max-width:65ch}#lessons .margin-note p{max-width:65ch}}
@media(max-width:600px){#explorer .side,#explorer .side:first-child{padding:14px!important}#lessons{width:calc(100% - 40px)}#lessons .ledger{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}#lessons .ledger::before{display:none}}
@media(prefers-reduced-motion:reduce){.edge-pulse.running{animation:none!important;opacity:0}}
/* Revision 4: phones default to a chip view of the same hubs; the drawing opens on request. */
#mobile-branches .chip-theme { margin: 14px 0 8px; font: 500 11px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--canvas-muted) }
#mobile-branches .chips { display: flex; flex-wrap: wrap; gap: 8px }
#mobile-branches .chip { padding: 8px 12px; min-height: 40px; border: 1px solid var(--canvas-rule); border-radius: 999px; background: var(--canvas-panel); color: #e8eaf2; font: 400 14px/1.3 var(--sans); text-align: left }
#mobile-branches .chip:hover { border-color: var(--canvas-signal) }
#mobile-branches .chip:focus-visible { outline: 2px solid var(--canvas-signal); outline-offset: 2px }
#mobile-branches .open-map { display: none; margin-top: 16px; padding: 10px 0; border: 0; background: none; color: var(--canvas-signal); font: 500 13px var(--mono) }
@media (max-width: 600px) {
  #mobile-branches .open-map { display: block }
  #explorer:not(.map-open) .map-area, #explorer:not(.map-open) .map-toolbar { display: none }
}