/* Keep the lecture renderer isolated; only adapt its surrounding frame. */
body{background:#071610}header,.shell>aside{display:none!important}
.shell{display:block;height:100dvh;min-height:0;padding:0}
#stage{height:100dvh;min-height:0;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.map-top,.map-bottom{left:22px;right:22px}

#selection-label{display:none}.map-bottom{justify-content:flex-end}
@media(max-width:600px){
 #universe:not(.is-focused) .cluster-title{font-size:calc(10px*var(--zoom-inv,1));transform:translate(-50%,-50%);padding:0}
 #universe:not(.is-focused) .cluster-title span,#universe:not(.is-focused) .cluster-title:before{display:none}
 .map-top,.map-bottom{left:12px;right:12px}
}

#ai-focus[aria-pressed=true]{border-color:#86e7d2;color:#b4ffe9;background:#183c3c}
#universe.ai-focus .edge[data-role=ai]{opacity:1!important;stroke-width:2.2}
#universe.ai-focus .branch[data-role=ai]:after{background:#95ffe0;box-shadow:0 0 14px #7affe0}
#universe.ai-focus .edge:not([data-role=ai]){opacity:.45}
#universe.ai-focus .branch:not([data-role=ai]){opacity:.35}
#universe.ai-focus.is-focused .branch.named[data-role=ai] .node-label{opacity:1;color:#b4ffe9}
#ai-focus:focus-visible{outline:2px solid #fff;outline-offset:3px}

#ai-focus{min-height:28px;height:28px;min-width:0;padding:0 9px;font-size:10px;line-height:1;align-self:flex-start}
.ai-label-mobile{display:none}
@media(max-width:700px){
 #ai-focus{position:relative;display:inline-flex;align-items:center;gap:6px;width:auto;height:28px;min-height:28px;min-width:0;padding:0 10px;border:0;border-radius:999px;background:rgba(23,56,42,.65);color:#8b9c93;font-family:inherit;font-size:11px;letter-spacing:0;box-shadow:none}
 #ai-focus[aria-pressed=true]{background:rgba(23,56,42,.65);color:#b7dfcb}
 #ai-focus:before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
 #ai-focus:after{content:'';position:absolute;inset:-8px -6px}
 #ai-focus .ai-label-desktop{display:none}
 #ai-focus .ai-label-mobile{display:inline}
}

@media(max-width:700px){#reset{display:none}}

@media(max-width:700px){.map-top{top:auto;bottom:24px;right:auto;left:12px}}

@media(max-width:700px){
 .map-bottom{bottom:24px}
 .map-bottom>div{display:flex;gap:0;border-radius:999px;background:rgba(23,56,42,.65)}
 .map-bottom button{position:relative;width:44px;min-width:44px;height:28px;min-height:28px;padding:0;border:0;background:transparent;color:#b7dfcb;font-size:13px;letter-spacing:0}
 .map-bottom button:first-child{border-radius:999px 0 0 999px}
 .map-bottom button:last-child{border-radius:0 999px 999px 0}
 .map-bottom button+button{border-left:1px solid #b7dfcb20}
 .map-bottom button:after{content:"";position:absolute;inset:-8px 0}
 .map-bottom button:hover{background:#ffffff0a}
 .map-bottom button:focus-visible{outline:2px solid #b7dfcb;outline-offset:3px}
}

/* Desktop overview keeps modules readable without expanding every sentence. */
@media(min-width:701px){
 #universe.ai-focus .branch:not([data-role=ai]){opacity:.65}
 #universe .cluster-title{font-size:calc(14px*var(--zoom-inv,1))}
 #universe .node-label{font-size:calc(12px*var(--zoom-inv,1))}
 #universe:not(.is-focused) .branch.named .node-label:not(.label-off){opacity:.85}
 #universe .branch.leaf .step-label{font-size:calc(10px*var(--zoom-inv,1))}
 #universe:not(.is-focused) .branch.leaf .overview-detail{opacity:.7;color:#a9c6b7}
}