/* Technical page — builds on styles.css theme vars. */
.tech-caveats{margin:18px 0; padding:12px 16px; border:1px dashed rgba(255,207,92,.3);
  border-radius:12px; background:rgba(255,207,92,.07); color:var(--muted); font-size:13.5px}
.tech-graph{position:relative; width:100%; height:600px; margin:20px 0 6px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); overflow:hidden}
.tech-graph-hint{font-size:12px; color:var(--faint); margin:0 0 8px; letter-spacing:.02em}
.tech-graph-legend{display:flex; flex-wrap:wrap; gap:6px 16px; margin:2px 0 6px; font-size:12px; color:var(--muted)}
.tech-graph-legend .tgl{display:inline-flex; align-items:center; gap:6px}
.tgl-dot{width:12px; height:12px; border-radius:4px; border:2px solid var(--line2); background:var(--panel2); flex:none}
.tgl-dot.combat{border-color:var(--combat)}
.tgl-dot.ooc{border-color:var(--ooc)}
.tgl-dot.bridge{border-color:var(--gold)}
.tgl-dot.dashed{border-style:dashed; opacity:.6}
.tgl-line{width:22px; height:0; border-top:2px dashed var(--gold); flex:none}
.tgl-arrow{font-style:normal; color:var(--faint); font-weight:700}
.tech-domain-title{font-size:22px; margin:36px 0 8px; scroll-margin-top:16px; color:var(--ink); letter-spacing:-.01em}
@media (max-width:900px){ .tech-graph{height:440px} }
.tech-card{background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--line2);
  border-radius:14px; margin:14px 0; overflow:hidden}
.tech-card.dom-combat{border-left-color:var(--combat)}
.tech-card.dom-ooc{border-left-color:var(--ooc)}
.tech-card.dom-bridge{border-left-color:var(--gold)}
.tech-card.hl{box-shadow:var(--shadow)}
.tech-card summary{cursor:pointer; list-style:none; padding:16px 18px; display:flex;
  flex-direction:column; gap:5px}
.tech-card summary::-webkit-details-marker{display:none}
.tc-title{font-weight:750; color:var(--ink); font-size:16px}
.tc-blurb{font-size:13.5px; color:var(--muted)}
.tc-badges{display:flex; gap:8px; flex-wrap:wrap; margin-top:4px}
.tc-badge{font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; font-weight:700;
  padding:2px 8px; border-radius:999px; border:1px solid var(--line2); color:var(--muted)}
.tc-badge.live{color:var(--ooc2); border-color:rgba(126,224,192,.4)}
.tc-badge.training-only{color:#b48cff; border-color:rgba(180,140,255,.4)}
.tc-badge.legacy{color:#ff8fa0; border-color:rgba(224,20,60,.4)}
.tc-badge.experimental{color:var(--gold); border-color:rgba(255,207,92,.4)}
.tech-body{padding:0 18px 18px; display:flex; flex-direction:column; gap:12px}
.tech-body .tech-code{overflow-x:auto; border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; font-size:12.5px}
.tc-llm{font-size:13px; color:var(--muted); border-left:2px solid var(--ooc); padding-left:10px}
.tc-notes{font-size:13px; color:var(--muted); background:rgba(255,207,92,.06);
  border:1px dashed rgba(255,207,92,.28); border-radius:10px; padding:10px 12px}
.tc-children{display:flex; flex-direction:column; gap:8px}
.tc-child{border:1px solid var(--line); border-radius:10px; padding:0}
.tc-child summary{padding:10px 14px}
.tc-fig{border:1px solid var(--line); border-radius:10px; padding:12px; background:var(--panel2)}
@media (max-width:900px){ main{margin-left:0;padding:0 20px 60px} }