.observatory{max-width:1440px;padding:0 30px}.observatory .masthead{height:80px}.obs-intro{padding:38px 0 28px;display:grid;grid-template-columns:1.3fr 1fr;gap:70px;align-items:center}.obs-intro .eyebrow{margin-bottom:14px}.obs-intro h1{font-size:clamp(30px,3.6vw,48px);letter-spacing:-1.8px;line-height:1.1}.obs-intro>div>p:last-child{max-width:650px;color:var(--muted);font-size:14px;margin:16px 0 0}.mode-card{border-left:2px solid var(--accent);padding:15px 20px;background:#101d23;border-radius:0 8px 8px 0}.mode-card p{font-size:13px;line-height:1.8;color:var(--muted);margin:13px 0}.mode-note{font:11px ui-monospace,Consolas,monospace;color:var(--accent)}.obs-stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:var(--surface);border-radius:10px;margin-bottom:16px}.obs-stats>div{padding:15px 22px;border-right:1px solid var(--line)}.obs-stats>div:last-child{border:0}.obs-stats strong{display:block;font:26px ui-monospace,Consolas,monospace;font-weight:400;letter-spacing:-1px}.obs-stats span{display:block;font-size:11px;color:var(--muted);margin-top:4px}.transport{background:#13202a;border:1px solid #3e554e;border-radius:10px;padding:15px 20px;margin-bottom:20px}.transport-buttons{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.transport button{font-size:12px}.transport select{width:75px;padding:7px;font-size:12px}.transport label{font-size:11px;color:var(--muted)}.memory-toggle{margin-left:auto;display:flex;gap:8px;align-items:center}.memory-toggle input{accent-color:var(--accent);width:16px;height:16px}.seek-row{display:flex;align-items:center;gap:15px;margin-top:12px}.seek-row input{flex:1;accent-color:var(--accent);min-width:0}.seek-row output{min-width:60px;text-align:right;font:11px ui-monospace,Consolas,monospace;color:var(--muted)}#obs-status{font-size:11px;color:var(--accent);margin:8px 0 0;min-height:18px}.obs-main-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:18px;align-items:start}.obs-panel{border:1px solid var(--line);background:var(--surface);border-radius:11px;padding:20px;min-width:0}.obs-panel h2{font-size:17px;letter-spacing:-.3px}.obs-panel h3{font-size:12px;letter-spacing:0;margin:13px 0 8px}.obs-panel .panel-heading{margin-bottom:15px}.graph-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:12px}.graph-controls label{font-size:11px;color:var(--muted)}.graph-controls select{width:auto;font-size:11px;padding:7px;max-width:200px}.graph-controls button{padding:6px 9px;min-height:32px;font-size:10px}.graph-wrap{position:relative;overflow:hidden;border:1px solid #304551;border-radius:9px;background:radial-gradient(ellipse at 50% 45%,#19303a,#0a141d 76%)}#obs-scene{width:100%;height:405px;display:block;touch-action:none;cursor:grab}#obs-scene:active{cursor:grabbing}.graph-overlay{position:absolute;right:9px;top:9px;border:1px solid #354d5b;background:#0a1723df;border-radius:5px;padding:4px 8px;font:9px ui-monospace,Consolas,monospace;color:var(--muted);pointer-events:none}.graph-caption{position:absolute;bottom:9px;left:11px;font-size:9px;color:var(--muted);pointer-events:none}.graph-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:10px;color:var(--muted);margin:11px 0}.graph-legend i{display:inline-block;vertical-align:middle;width:17px;height:2px;margin-right:6px}.geometry-key{background:#74cfc3}.association-key{background:#e2bf7b}.glyph-inspector{display:flex;align-items:center;gap:14px;padding-top:12px;border-top:1px solid var(--line)}.selected-glyph{width:100px;flex-shrink:0}.selected-glyph svg{display:block;width:100%}.glyph-data{flex:1;min-width:0}.glyph-data .small-label{margin-top:0}.glyph-data select{font:12px ui-monospace,Consolas,monospace;padding:7px}.glyph-data p{margin:7px 0 0}.mono{font-family:ui-monospace,Consolas,monospace}.glyph-data .mono{font-size:12px;color:var(--accent)}.neighbor-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:10px;border-top:1px solid var(--line)}.neighbor-list{display:flex;gap:5px;flex-wrap:wrap}.neighbor-list button{font:10px ui-monospace,Consolas,monospace;min-height:27px;padding:4px 6px}.neighbor-list .hint{margin:0}.message-direction{font-size:18px;font-weight:500;letter-spacing:-.4px;margin:0 0 2px}.message-panel>.hint{margin-top:0}.message-panel textarea{font-size:10px;min-height:87px;max-height:160px;word-break:break-all}.message-panel pre{font-size:11px;min-height:65px;max-height:130px}.message-glyphs{display:flex;gap:5px;overflow-x:auto;padding:3px 0 9px;scrollbar-width:thin;min-height:87px}.message-glyphs button{padding:4px 3px 3px;width:46px;flex-shrink:0;background:#0c1720;border-color:#2f4450;min-height:76px}.message-glyphs button svg{width:38px;height:38px;display:block}.message-glyphs button span{display:block;font:8px ui-monospace,Consolas,monospace;color:var(--muted);overflow:hidden;text-overflow:ellipsis}.message-glyphs button.selected{border-color:var(--accent);background:#18332e}.code-values{max-height:65px;overflow:auto;overflow-wrap:anywhere;font-size:10px;color:var(--muted);margin:6px 0 13px;line-height:1.8}.observation-note{padding:14px;border-left:2px solid var(--amber);background:#22251f;border-radius:0 6px 6px 0}.observation-note .eyebrow{font-size:9px;color:var(--amber);margin-bottom:7px}.observation-note>p:last-child{font-size:12px;line-height:1.8;color:#d3d6c2;margin:0}.message-audit{margin-top:15px}.message-audit p,.message-audit code{margin-left:12px;margin-right:12px}.message-audit code{display:block;font:9px/1.8 ui-monospace,Consolas,monospace;overflow-wrap:anywhere;color:var(--muted);margin-bottom:10px}.message-audit summary{padding:12px;font-size:10px}.obs-bottom-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;margin-top:18px;align-items:start}.trace-list{height:330px;overflow:auto;scrollbar-width:thin;border-top:1px solid var(--line);padding:8px 0}.trace-item{display:block;width:100%;text-align:left;margin:5px 0;padding:9px 10px;min-height:50px;border-color:#2b3c48;background:#0e1821}.trace-item.current{border-color:var(--accent);background:#15332e}.trace-line{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:var(--muted);margin-bottom:4px}.trace-item .trace-preview{display:block;font:10px/1.7 ui-monospace,Consolas,monospace;color:var(--ink);overflow-wrap:anywhere}.trace-item[data-kind=REJECT] .trace-kind{color:var(--amber)}.trace-item[data-kind=ACCEPT] .trace-kind{color:var(--accent)}.trace-actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center;padding-top:12px;border-top:1px solid var(--line)}.trace-actions button{font-size:10px}.trace-actions .hint{margin:0}.task-table{max-height:none;border:1px solid var(--line);border-radius:6px}.task-table table{font-size:10px}.task-table th,.task-table td{padding:9px 13px}.task-table td:last-child{color:var(--muted)}.task-table .accepted td:last-child{color:var(--accent)}.task-table .pending td:last-child{color:var(--amber)}.memory-bounds{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.memory-bounds div{border:1px solid var(--line);border-radius:6px;padding:9px 10px;background:#0e1821}.memory-bounds strong{display:block;font:10px ui-monospace,Consolas,monospace;color:var(--accent)}.memory-bounds span{display:block;font-size:10px;color:var(--muted);margin-top:4px}.obs-panel details{font-size:11px}.obs-panel details summary{padding:11px 13px}.obs-panel details>.hint{padding:0 12px 10px}.obs-footnote{margin:25px 0 30px;padding:18px 20px;border-left:2px solid var(--line);color:var(--muted);font-size:11px;line-height:1.8;display:grid;grid-template-columns:1fr 1fr;gap:30px}.obs-footnote p{margin:0}.obs-footnote strong{color:#cad8db;font-weight:500}button:disabled{opacity:.45;cursor:default}.obs-error{color:var(--red)!important}@media(min-width:1150px){#obs-scene{height:450px}}@media(max-width:1000px){.obs-intro{gap:30px}.obs-main-grid{grid-template-columns:1fr}.obs-bottom-grid{grid-template-columns:1fr 1fr}.message-panel{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.message-panel>.panel-heading,.message-panel>.message-direction,.message-panel>#obs-message-meta{grid-column:1/-1}.message-panel>*{min-width:0}.message-panel>.small-label,.message-panel>textarea,.message-panel>pre,.message-panel>.message-glyphs,.message-panel>.code-values,.message-panel>.observation-note,.message-panel>.message-audit{grid-column:1/-1}#obs-scene{height:420px}}@media(max-width:650px){.observatory{padding:0 14px}.observatory .masthead{height:auto;gap:12px}.observatory .masthead nav{gap:15px;font-size:10px}.obs-intro{grid-template-columns:1fr;gap:20px;padding:28px 0 23px}.obs-intro h1{font-size:37px;letter-spacing:-1.1px}.obs-intro>div>p:last-child{font-size:12px}.mode-card{padding:12px 16px}.mode-card p{font-size:12px;margin:9px 0}.obs-stats{grid-template-columns:repeat(2,1fr)}.obs-stats>div{padding:12px 16px;border-bottom:1px solid var(--line)}.obs-stats>div:nth-child(2){border-right:0}.obs-stats>div:nth-child(3){border-bottom:0}.obs-stats strong{font-size:23px}.obs-stats span{font-size:10px}.transport{padding:13px 14px}.transport-buttons{gap:7px}.transport-buttons .memory-toggle{width:100%;margin:4px 0}.transport button{padding:8px 10px;font-size:11px}.obs-panel{padding:15px}.obs-panel h2{font-size:15px}.obs-panel .panel-heading>.tag{font-size:8px}.obs-bottom-grid{grid-template-columns:1fr}.obs-footnote{grid-template-columns:1fr;gap:13px;padding:12px 14px}.neighbor-grid{gap:10px}.selected-glyph{width:85px}.graph-controls{gap:5px}.graph-controls select{max-width:190px}.graph-caption{font-size:8px}.graph-overlay{font-size:8px}#obs-scene{height:355px}.trace-list{height:290px}.memory-bounds div{padding:8px}.memory-bounds span{font-size:9px}}

/* Shared stage and participant views. Playback controls belong to the fullscreen element. */
.observatory{max-width:none}
.graph-panel{margin-bottom:12px;padding:20px}
.stage-heading{gap:20px;align-items:center}
.stage-heading h2{font-size:20px}
.stage-heading .hint{margin:6px 0 0;font-size:10px}
.stage-heading-actions{display:flex;align-items:center;gap:12px}
.stage-heading-actions button{white-space:nowrap;font-size:12px}
.stage-heading-actions .tag{font-size:9px}
.graph-controls{gap:8px}
.graph-controls label:not(:first-child){margin-left:12px}
.graph-wrap{flex-shrink:0}
#obs-scene{height:clamp(430px,64vh,820px)}
.geometry-key{background:#b5c3cd}
.planner-key{background:#79b7ff}
.checker-key{background:#f2b56b}
.stage-mode-note{margin-left:auto;font-size:9px}
.stage-current{display:flex;align-items:center;gap:20px;border-top:1px solid var(--line);padding:9px 0 10px;min-width:0}
#obs-stage-message{font-size:11px;line-height:1.7;overflow-wrap:anywhere;margin:0;flex:0 1 37%;min-width:0}
#obs-stage-message[data-sender=Planner]{color:#a6cfff}
#obs-stage-message[data-sender=Checker]{color:#f2c58e}
.stage-glyphs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:thin;min-width:0;flex:1;padding-bottom:3px}
.stage-glyphs button{flex-shrink:0;width:32px;min-height:44px;padding:2px;background:#0c1720;border-color:#2f4450}
.stage-glyphs svg{display:block;width:26px;height:26px}
.stage-glyphs button span{display:block;font:7px ui-monospace,Consolas,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.stage-glyphs button.selected{border-color:var(--accent)}
.graph-panel .transport{margin:0;flex-shrink:0;padding:12px 16px}
#obs-display-status{font-size:10px;color:var(--muted);margin:7px 0 0}
#obs-display-status:empty{display:none}
.topology-explanation{font-size:11px;line-height:1.8;margin:12px 3px 20px;max-width:1200px}
.agent-feeds{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0 0 18px}
.agent-feed{border-top:2px solid var(--agent-color)}
.agent-planner{--agent-color:#79b7ff}
.agent-checker{--agent-color:#f2b56b}
.agent-feed.current-turn{box-shadow:inset 0 0 0 1px var(--agent-color)}
.agent-feed h2{color:var(--agent-color)}
.agent-feed h2 span{font-size:11px;font-weight:400;margin-left:8px;color:var(--muted)}
.agent-feed .panel-heading{margin-bottom:10px}
.agent-feed pre{margin:8px 0;font-size:11px;min-height:50px;max-height:100px}
.agent-feed>.hint{font-size:10px;margin:7px 0}
.agent-feed .message-glyphs{min-height:87px}
.agent-feed svg polygon{stroke:var(--agent-color)}
.inspection-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
.graph-panel.is-expanded{position:fixed;inset:0;z-index:1000;width:100%;height:100dvh;max-width:none;max-height:none;display:flex;flex-direction:column;margin:0;border:0;border-radius:0;padding:16px 22px;background:#0b151e;overflow:auto}
.graph-panel.is-expanded .stage-heading{margin-bottom:10px;flex-shrink:0}
.graph-panel.is-expanded .graph-controls{flex-shrink:0;margin-bottom:9px}
.graph-panel.is-expanded .graph-wrap{flex:1 1 auto;min-height:130px}
.graph-panel.is-expanded #obs-scene{height:100%;position:absolute;inset:0}
.graph-panel.is-expanded .graph-legend{flex-shrink:0;margin:8px 0}
.graph-panel.is-expanded .stage-current{flex-shrink:0;padding:5px 0 7px}
.graph-panel.is-expanded .transport{padding:10px 14px}
.graph-panel.is-expanded .seek-row{margin-top:6px}
.graph-panel::backdrop{background:#0b151e}
@media(max-width:800px){
  .stage-mode-note{width:100%;margin:0}
  .stage-current{display:block}
  #obs-stage-message{font-size:10px;margin-bottom:5px}
  .stage-glyphs{max-height:48px}
  .graph-controls label:not(:first-child){margin-left:0}
  .stage-heading h2{font-size:17px}
  .stage-heading-actions .tag{display:none}
  .graph-panel.is-expanded{padding:10px 12px}
  .graph-panel.is-expanded .stage-mode-note{display:none}
  .graph-panel.is-expanded .transport-buttons{gap:6px}
}
@media(max-width:650px){
  .agent-feeds,.inspection-grid{grid-template-columns:1fr}
  .graph-panel{padding:14px}
  #obs-scene{height:430px}
  .stage-heading-actions button{font-size:10px;padding:7px 9px}
  .graph-legend{gap:8px 14px;font-size:9px}
  .graph-controls select{max-width:170px}
  .graph-panel.is-expanded .memory-toggle{display:none}
}
@media(max-height:580px){
  .graph-panel.is-expanded .stage-current{display:none}
  .graph-panel.is-expanded .stage-heading .hint,.graph-panel.is-expanded .stage-mode-note{display:none}
  .graph-panel.is-expanded .graph-legend{margin:4px 0}
  .graph-panel.is-expanded #obs-status{margin-top:3px}
}

/* Two participant spheres and captions share the same fullscreen stage. */
.match-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px;font-size:11px;color:var(--muted);flex-shrink:0}
.match-controls select{width:auto;padding:6px 9px;font-size:11px}
.match-controls>span{color:#91f4cc;font-size:10px}
.match-key{background:#91f4cc}
.sphere-labels{position:absolute;top:12px;left:12px;right:12px;display:grid;grid-template-columns:1fr 1fr;text-align:center;z-index:1;pointer-events:none;font:12px ui-monospace,Consolas,monospace}
.sphere-labels>span:first-child{color:#a8d2ff}.sphere-labels>span:last-child{color:#ffd49c}
.sphere-labels small{display:block;color:var(--muted);font-size:9px;margin-top:4px}
.graph-overlay{top:auto;bottom:9px}
.stage-captions{margin:0 0 10px;gap:14px;flex-shrink:0}
.stage-captions .agent-feed{padding:11px 14px;border:1px solid var(--line);border-top:2px solid var(--agent-color);border-radius:6px;background:#0a121a;min-width:0}
.stage-captions .panel-heading{margin:0 0 7px;gap:10px;align-items:center}
.stage-captions h3{margin:0;font-size:12px;color:var(--agent-color)}
.stage-captions h3 span{margin-left:7px;font-size:10px;color:var(--muted);font-weight:400}
.stage-captions .tag{font-size:8px;white-space:nowrap}
.stage-captions .closed-caption{font:16px/1.55 ui-monospace,Consolas,monospace;color:#f2f7f9;background:#060b10;border:0;border-left:3px solid var(--agent-color);border-radius:3px;min-height:53px;max-height:100px;padding:9px 12px;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.stage-captions .agent-feed>.hint{margin:6px 0 0;font-size:9px}
.stage-captions details{margin-top:6px}
.stage-captions details summary{padding:6px 0;font-size:9px;color:var(--muted)}
.stage-captions details .hint{font-size:10px;color:var(--muted)}
.graph-panel[data-layout=dual] .stage-current{display:none}
.graph-panel[data-layout=shared] .dual-only{display:none}
.graph-panel[data-captions=false] .stage-captions{display:none}
.graph-panel.is-expanded .stage-captions{margin-bottom:8px}
.graph-panel.is-expanded .stage-captions .closed-caption{font-size:14px;min-height:44px;max-height:76px}
.graph-panel.is-expanded .stage-captions .agent-feed{padding:8px 11px}
#obs-settings{position:fixed;inset:0 0 0 auto;margin:0;width:min(100%,510px);height:100dvh;max-width:none;max-height:none;padding:22px;border:0;border-left:1px solid #47605f;background:#0e1922;color:var(--ink);overflow-y:auto;box-shadow:-20px 0 80px #0008}
#obs-settings::backdrop{background:#02080cbf}
.settings-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:22px}
.settings-heading h2{font-size:23px}
.settings-heading button{font-size:11px}
.settings-section{padding:0 0 22px;margin:0 0 22px;border-bottom:1px solid var(--line)}
.settings-section h3{font-size:15px;margin:0 0 14px}
.settings-section label{display:block;color:var(--muted);font-size:12px;margin:10px 0 6px}
.settings-section input:not([type=checkbox]),.settings-section select{width:100%;padding:10px 11px;background:#0a141c;border:1px solid #3b515c;border-radius:6px;color:var(--ink);font:12px ui-monospace,Consolas,monospace}
.settings-section .settings-check{display:flex;gap:10px;align-items:center}
.settings-check input{accent-color:var(--accent)}
.settings-section .hint{font-size:11px;line-height:1.8}
#settings-api-status{font-size:12px;line-height:1.8;color:var(--accent)}
.settings-section fieldset{padding:13px;border:1px solid var(--line);border-radius:6px;margin:15px 0}
.settings-section fieldset legend{padding:0 7px;font-size:12px}
.settings-section button{font-size:11px}
.settings-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
#settings-login>.primary{margin-top:12px}
#settings-providers[hidden],#settings-login[hidden]{display:none}
@media(max-width:800px){.stage-captions .closed-caption{font-size:13px}.stage-captions h3 span{display:block;margin:4px 0 0}.stage-heading-actions{gap:6px}.stage-heading-actions button{font-size:10px;padding:7px}.sphere-labels{font-size:10px}}
@media(max-width:619px){
  .graph-panel[data-layout=dual] #obs-scene{height:680px}
  .graph-panel.is-expanded[data-layout=dual] #obs-scene{height:100%}
  .sphere-labels{display:block;bottom:0;text-align:left;font-size:11px}
  .sphere-labels>span{position:absolute;left:2px;top:0}
  .sphere-labels>span:last-child{top:50%}
  .stage-captions{grid-template-columns:1fr;gap:8px}
  .stage-captions .closed-caption{font-size:12px;min-height:40px}
  .graph-panel.is-expanded .stage-captions .closed-caption{font-size:11px;min-height:35px;max-height:50px}
  .graph-panel.is-expanded .stage-captions .agent-feed{padding:6px 8px}
  .graph-panel.is-expanded .stage-captions details,.graph-panel.is-expanded .stage-captions .hint{display:none}
  .stage-heading-actions{align-items:flex-end;flex-direction:column}
}