.demo-disclosure { border:1px solid #dce1e6; background:#fff; margin-top:13px; }
.demo-disclosure > summary { padding:11px 14px; font-size:14px; font-weight:600; color:var(--blue); cursor:pointer; }
.demo-disclosure > summary span { margin-left:12px; font-weight:400; font-size:12px; color:#64717d; }
.cobra-demo { border-top:1px solid #dce1e6; container-type:inline-size; }
.demo-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 16px; border-bottom:1px solid #dce1e6; }
.demo-toolbar-label { font-size:13px; color:#46576a; }
.context-options { display:flex; gap:6px; }
.context-options button { padding:6px 10px; background:#fff; border:1px solid #bec8d4; color:#34465c; cursor:pointer; font-size:13px; }
.context-options button[aria-pressed="true"] { background:var(--blue); color:#fff; border-color:var(--blue); }
.phase-controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-bottom:1px solid #dce1e6; }
.phase-controls button { border:0; border-right:1px solid #dce1e6; background:#fff; color:#475c72; padding:11px; cursor:pointer; font-size:12px; text-align:left; }
.phase-controls button:last-child { border-right:0; }
.phase-controls button span { display:block; font-size:12px; font-weight:650; margin-bottom:3px; }
.phase-controls button[aria-pressed="true"] { background:#e8eff9; color:#002d72; box-shadow:inset 0 -2px 0 #002d72; }
.phase-takeaway { padding:17px 16px; border-bottom:1px solid #dce1e6; }
.phase-takeaway h4 { font-size:16px; line-height:1.4; margin:0 0 7px; font-weight:600; color:#263d54; }
.phase-takeaway p { font-size:14px; color:#46525f; line-height:1.6; }
.demo-panels { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); }
.demo-code-panel { background:#142437; padding:17px 10px; min-width:0; }
.demo-code-label { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#c5d4e4; margin:0 0 12px 10px; }
.demo-code { margin:0; overflow-x:auto; font:12px/1.8 var(--mono); white-space:pre; color:#e6edf5; }
.demo-code-line { display:block; min-height:1.8em; padding:0 10px; border-left:2px solid transparent; }
.demo-code-line.dynamic-target { background:#344565; border-color:#a9c3de; }
.demo-graph-panel { padding:17px 12px 10px; min-width:0; }
.demo-graph-label { font-size:12px; color:#536073; }
.call-graph { width:100%; height:320px; position:relative; margin-top:8px; }
.target-label { min-height:22px; font:11px/1.6 var(--mono); color:var(--blue); margin-top:7px; overflow-wrap:anywhere; }
.demo-nav { border-top:1px solid #dce1e6; display:flex; justify-content:flex-end; padding:12px 16px; }
.demo-nav button { border:1px solid var(--blue); color:#fff; background:var(--blue); cursor:pointer; padding:7px 12px; font-size:13px; font-weight:600; }
.technical-details { border-top:1px solid #dce1e6; }
.technical-details > summary { cursor:pointer; padding:10px 16px; font-size:13px; color:#46576a; }
.phase-explanation { margin:0; padding:4px 16px 16px; display:grid; grid-template-columns:54px minmax(0,1fr); gap:9px 13px; font-size:13px; line-height:1.6; }
.phase-explanation dt { font-weight:600; color:#34465c; }
.phase-explanation dd { margin:0; color:#46525f; }
.full-code { font:12px/1.7 var(--mono); background:#f6f8fa; padding:15px; margin:0; overflow-x:auto; }
.demo-caption { font-size:12px; color:#64717d; margin:13px 16px 16px; max-width:800px; }
.demo-caption a { color:var(--blue); text-decoration:underline; }
@media(max-width:750px) {
  .demo-panels { grid-template-columns:1fr; }
  .demo-toolbar { flex-wrap:wrap; }
  .call-graph { height:300px; }
  .demo-disclosure > summary span { display:block; margin-left:16px; }
  .phase-controls button { padding:10px 8px; }
}

@container (max-width:720px) { .demo-panels { grid-template-columns:1fr; } .call-graph { height:320px; } }

.demo-toolbar-label { display:flex; align-items:center; gap:10px; }
.demo-logo { width:40px; height:40px; object-fit:contain; flex:none; }