/* Keep a single fixed-coordinate drawing surface. Never reflow its text on zoom. */
#viewport{overflow:hidden;touch-action:none;cursor:grab;min-height:0;height:min(72vh,850px)}
#viewport:active{cursor:grabbing}
#map{position:absolute;left:0;top:0;zoom:1;transform-origin:0 0;-webkit-text-size-adjust:none;text-size-adjust:none;user-select:none;will-change:transform}
.node,.top{padding:22px 24px 20px}
.top{height:220px}
.node .icon{position:static;display:inline;font-size:1.15em;line-height:inherit;vertical-align:baseline;margin-right:.25em}
.top h2{margin-top:7px;margin-right:8px}
.top .number{right:9px;top:9px}
.top .meta{line-height:1.4}
.top hr{margin:12px 0}
footer{flex-wrap:wrap;gap:14px}
.zoom button{min-width:44px;height:44px}
.zoom #fit{white-space:nowrap}
@media(max-width:650px){
 header{height:auto;min-height:80px;flex-wrap:wrap;padding:18px 18px 14px;gap:12px;align-items:center}
 .heading{flex:1;font-size:17px}.heading span{font-size:12px}
 #demo{margin-left:0;padding:12px;font-size:14px}
 main{padding:16px 12px 26px}
 .caption{display:block;font-size:14px;line-height:1.5;margin-bottom:12px}
 .hint{display:block;font-size:13px;margin-top:6px}
 #viewport{height:clamp(270px,82vw,440px);min-height:0}
 footer{padding:12px 2px;flex-direction:column-reverse;align-items:center;gap:16px}
 footer>div:first-child{max-width:none;font-size:12px;line-height:1.8;text-align:center}
 .legend.dashed{margin-left:12px}
 .zoom{gap:10px}.zoom #fit{font-size:14px}
}
/* Compact working surface: controls belong to the diagram. */
main{padding:6px}
#viewport{height:min(95vh,calc(45vw + 88px));min-height:260px;border:0;border-radius:0}
#map,.connections{height:710px}
.top{top:90px}
.node,.top{padding:12px}
.top{height:160px}
.node h2,.top h2{margin:0 0 8px;line-height:1.3}
.top h2{display:flex;align-items:baseline;gap:4px}
.top .number{position:static;margin-left:auto;flex:none;width:auto;height:auto;border:0;border-radius:0;display:inline;font-size:16px}
.node p{line-height:1.4}
.top hr{margin:8px 0}
.context{top:330px;padding:10px}
.context-title{padding-bottom:10px;font-size:20px}
.row{padding:8px 10px;margin-bottom:5px}
.row b{margin-bottom:3px}
.message,.response{top:464px;min-height:52px}
.message h2,.response h2{margin:0}
#demo{position:absolute;top:0;right:4px;z-index:2;border:0;background:transparent;margin:0;padding:10px 6px;min-height:44px;font-size:14px}
#demo[aria-pressed=true]{background:transparent;color:#17573f}
footer{position:absolute;bottom:0;right:4px;z-index:2;padding:0;display:block}
.zoom{gap:3px;background:#fcfcfde8;border-radius:6px}
.zoom button{border:0;background:transparent;min-width:40px;height:40px}
.zoom #fit{margin-left:2px;padding:0 8px;font-size:14px}
@media(max-width:650px){main{padding:4px}#viewport{height:calc(48vw + 100px);min-height:260px}.zoom{gap:2px}footer{padding:0}dialog{padding:25px 18px}.example{padding:12px;margin-top:14px}}
/* Compact, continuous modal copy with rendered emphasis. */
dialog{padding:22px;max-height:88dvh;border-radius:14px}
dialog h1{font-size:24px;line-height:1.25;margin:0 32px 12px 0;letter-spacing:-.5px}
dialog p{line-height:1.55;margin:0 0 12px}
dialog p:last-child{margin-bottom:0}
dialog strong{font-weight:700;color:#26354b}
dialog u{text-underline-offset:3px;text-decoration-thickness:1px}
dialog pre{margin:12px 0;white-space:pre-wrap}
dialog pre code{margin:0;padding:12px;font-size:14px;line-height:1.45}
 .prompt-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;font-size:14px;font-weight:600}
 .prompt-toolbar button{border:1px solid #d9dfe6;border-radius:6px;background:transparent;padding:8px 10px;min-height:40px;font-size:14px}
 #promptContent{margin-top:10px}
json-viewer{display:block;margin:14px 0;padding:12px;border:1px solid #dce4ed;border-radius:8px;overflow:auto;--background-color:#f5f8fc;--color:#26354b;--font-family:ui-monospace,SFMono-Regular,Consolas,monospace;--font-size:14px;--line-height:1.7;--indent-size:.65em;--property-color:#315a87;--string-color:#21714c;--boolean-color:#8952a3;--number-color:#995d21;--preview-color:#66758a;--indentguide-color:#dae2ec;--indentguide-color-active:#91a5be}
/* Length-based line height keeps the viewer's indentation calculations valid. */
json-viewer{--line-height:1.5rem;--indent-size:-.6rem;--indentguide-color:#e0e6ed;--indentguide-color-active:#c4cfdb;--outline-style:solid;--outline-color:#6e93bc}
json-viewer::part(object){margin-top:0;margin-bottom:0}
json-viewer::part(key){gap:3px;white-space:nowrap}
json-viewer::part(preview){display:inline-block;max-width:12ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:#788698}
json-viewer::part(property){outline:none}
json-viewer::part(property):focus-visible{outline:2px solid #6e93bc;outline-offset:2px;border-radius:3px}
.gold{--accent:#806019}
.node h2{display:flex;align-items:center;gap:6px;color:var(--accent,#273248)}
.node .icon{position:static;display:inline-block;width:1em;height:1em;flex:0 0 1em;font-size:inherit;line-height:1;margin:0;color:inherit;vertical-align:middle}
.top h2{align-items:center;gap:6px}
.row b{color:var(--accent,#273248)}
.node{padding:8px 12px}
.top{height:144px}
.node h2,.top h2{margin-bottom:5px}
.top hr{margin:6px 0}
.message,.response{top:468px;min-height:44px;display:flex;align-items:center}
.message h2,.response h2{margin:0}
.node:hover,.row:hover{translate:none}
.node.top{height:auto;min-height:0;padding:6px 10px;display:block;text-align:left;align-content:start}
.node.top h2{margin:0 0 4px}
.node.top hr{margin:5px 0}
.message,.response{min-height:0;padding:6px 10px}
:root {
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --modal-scale-close: 0.96;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.t-modal {
  transform-origin: center;
  transform: scale(var(--modal-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-open-dur) var(--modal-ease),
    opacity   var(--modal-open-dur) var(--modal-ease);
  will-change: transform, opacity;
}
.t-modal.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-modal.is-closing {
  transform: scale(var(--modal-scale-close));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-close-dur) var(--modal-ease),
    opacity   var(--modal-close-dur) var(--modal-ease);
}
@media (prefers-reduced-motion: reduce) {
  .t-modal { transition: none !important; }
}
.t-modal::backdrop{opacity:0;transition:opacity var(--modal-open-dur) var(--modal-ease)}
.t-modal.is-open::backdrop{opacity:1}
.t-modal.is-closing::backdrop{opacity:0;transition-duration:var(--modal-close-dur)}
@media(prefers-reduced-motion:reduce){.t-modal::backdrop{transition:none!important}}
html,body{width:100%;height:100%;overflow:hidden}
main{position:fixed;inset:0;padding:0}
main #viewport{width:100%;height:100dvh;min-height:0;border:0;border-radius:0}
footer{right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom))}