/* Act III: spatial glass and system topology */
.act-3{
  min-height:125svh;display:flex;flex-direction:column;justify-content:space-between;gap:7vh;
  padding:calc(var(--hud-h) + 10vh) var(--pad) 10vh;
}
.act-3__head{
  display:grid;grid-template-columns:1.15fr .85fr;gap:5vw;align-items:end;
  border-bottom:1px solid var(--line);padding-bottom:4vh;
}
.act-3__head > div:first-child{position:relative;isolation:isolate}
.act-3__head > div:first-child::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:-6% -10% -12% -5%;
  background:radial-gradient(64% 74% at 34% 48%,
    color-mix(in srgb,var(--bg) 92%,transparent) 0%,
    color-mix(in srgb,var(--bg) 74%,transparent) 44%,
    transparent 76%);
}
.act-3 h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(48px,8.4vw,142px);line-height:.82;letter-spacing:-.045em;text-transform:uppercase;
  text-shadow:0 0 26px color-mix(in srgb,var(--bg) 94%,transparent),
    0 0 8px color-mix(in srgb,var(--bg) 82%,transparent);
}
.act-3 h2 span{color:var(--accent)}
.act-3__head p{
  position:relative;isolation:isolate;
  justify-self:end;max-width:38ch;font-size:clamp(15px,1.2vw,19px);line-height:1.45;
}
.act-3__head p::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:-9% -6% -11% -8%;
  background:radial-gradient(72% 82% at 38% 46%,
    color-mix(in srgb,var(--bg) 94%,transparent) 0%,
    color-mix(in srgb,var(--bg) 86%,transparent) 58%,
    transparent 100%);
}
.panels{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(16px,2.2vw,30px);align-items:end}
.glass{
  min-width:0;padding:clamp(18px,2.2vw,30px);
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--bg) 76%,transparent),
    color-mix(in srgb,var(--bg) 66%,transparent));
  border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.glass__head{
  display:flex;justify-content:space-between;gap:12px;
  border-bottom:1px solid var(--line);padding-bottom:12px;
  font:400 9px/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:color-mix(in srgb,var(--ink) 74%,transparent);
}
.glass__head b{font-weight:400;color:var(--accent-strong)}
.cluster-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}
.cluster{
  min-height:60px;padding:10px 12px;
  display:flex;flex-direction:column;justify-content:space-between;gap:6px;text-align:left;
  border:1px solid var(--line);color:var(--muted);
  transition:border-color .2s,color .2s,background .2s;
}
.cluster:hover{border-color:var(--accent);color:var(--ink)}
.cluster[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#040814}
.cluster b{font:400 10px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.cluster span{font:400 8px/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.cluster[aria-pressed="true"] span{color:rgba(4,8,20,.72)}
.cluster-status{
  min-height:14px;margin-top:14px;
  font:400 8.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-strong);
}
.panel-note{
  margin-top:18px;padding-top:12px;border-top:1px solid var(--line);
  font:400 9px/1.5 var(--mono);letter-spacing:.05em;color:var(--muted);
}
.act-3__context{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:14px;
  font:400 8.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.act-3__context b{font-weight:400;color:var(--ink)}