:root {
  --navy: #0F1E33;
  --deep: #0A1422;
  --cream: #F1EBDD;
  --ink: #1c2733;
  --slate: #5B6B7F;
  --cyan: #16A6D9;
  --clay: #C8502D;
  --light: #EEF1F4;
  --font-body: "Atkinson Hyperlegible", system-ui, sans-serif;
  --font-display: "Archivo", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --header-h: 64px;
}
html[data-theme="light"] {
  --bg: var(--cream);
  --fg: var(--ink);
  --panel: #fffdf8;
  --seam: rgba(15, 30, 51, .16);
  --slate: #3e4d5e;
}
html[data-theme="dark"] {
  --bg: var(--deep);
  --fg: var(--light);
  --panel: #13314A;
  --seam: rgba(91, 107, 127, .28);
  --slate: #b7c3d1;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
}
a { color: var(--cyan); }
:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }
.skip {
  position: absolute; left: 12px; top: -40px; z-index: 80;
  background: var(--clay); color: #fff; padding: 8px 12px; text-decoration: none;
}
.skip:focus { top: 12px; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.topbar {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  min-height: var(--header-h); padding: .45rem .8rem;
  background: var(--bg); border-bottom: 1px solid var(--seam);
  position: sticky; top: 0; z-index: 45;
}
.brand {
  display: flex; align-items: center; gap: .45rem;
  color: var(--cyan); text-decoration: none;
  font-family: var(--font-display); font-weight: 900; font-size: .95rem;
}
.brand-mark {
  display: inline-block; height: 28px; aspect-ratio: 351 / 560; background: var(--cyan);
  -webkit-mask: url("/assets/brand/dhagota-mark.svg") no-repeat center / contain;
  mask: url("/assets/brand/dhagota-mark.svg") no-repeat center / contain;
}
.role { margin: 0; font-size: .72rem; color: var(--slate); }
.spacer { flex: 1; }
.btn, .lbtn, .gctl button {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em;
  font-size: .68rem; font-weight: 700; color: var(--fg);
  background: transparent; border: 1px solid var(--seam); border-radius: 999px;
  padding: .45rem .7rem; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn[aria-pressed="true"], .lbtn[aria-pressed="true"] {
  background: var(--cyan); border-color: var(--cyan); color: var(--navy);
}
.kbd { font-size: .62rem; border: 1px solid var(--seam); border-radius: 4px; padding: 0 .25rem; }
.workspace { flex: 1; min-height: 0; display: flex; }
.rail {
  width: 250px; flex: 0 0 250px; overflow: auto;
  border-right: 1px solid var(--seam); padding: .8rem .75rem 1.2rem;
}
.rail h2 {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em;
  font-size: .62rem; color: var(--slate); margin: .9rem 0 .4rem;
}
.rail h2:first-child { margin-top: 0; }
.layerbtns, #layerList { display: flex; flex-direction: column; gap: .35rem; }
.lbtn, .nbtn {
  display: flex; align-items: center; gap: .45rem; text-align: left;
  border-radius: 9px; text-transform: none; letter-spacing: 0;
  font-family: var(--font-body); font-size: .84rem; font-weight: 400;
}
.lbtn .sw { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.lbtn .ct { margin-left: auto; font-family: var(--font-mono); font-size: .62rem; }
.nbtn[aria-current="true"] { border-color: var(--clay); }
.note { font-size: .72rem; color: var(--slate); line-height: 1.45; margin: .55rem 0 0; }
#stage { position: relative; flex: 1; min-width: 0; min-height: 0; }
svg#graph { width: 100%; height: 100%; display: block; touch-action: none; background: transparent; }
.edge { fill: none; stroke-width: 1.15; opacity: .14; }
.edge.hot { opacity: .95; stroke-width: 2.2; }
.edge.layer { opacity: .45; }
.edge.ty-domain { stroke: #4BB6E0; }
.edge.ty-skill { stroke: #E08152; }
.edge.ty-tech { stroke: #6E8BA8; }
.edge.ty-ai { stroke: #9B86F0; }
.node { cursor: pointer; }
.node text {
  font-family: var(--font-body); font-size: 13px; font-weight: 700; fill: var(--fg);
  paint-order: stroke; stroke: var(--bg); stroke-width: 4px;
}
.node.dim { opacity: .28; }
.node.is-focus text { display: none; }
.node.cs .disc { fill: #16A6D9; }
.node.cs.built .disc { stroke: #EEF1F4; stroke-width: 2.5; }
.node.skill .disc { fill: #E08152; }
.node.tech .disc { fill: #6E8BA8; }
.node.ai .disc { fill: #9B86F0; }
.node.domain .disc { fill: #4BB6E0; }
.node.g0 .disc { fill: #C24E84; }
.node.g1 .disc { fill: #3F77C9; }
.node.g2 .disc { fill: #6A5AC8; }
.node.g3 .disc { fill: #389A5F; }
.node.g4 .disc { fill: #C4922A; }
.node:focus-visible .disc { stroke: var(--clay); stroke-width: 3; }
.fo {
  font-family: var(--font-body); color: #0F1E33; background: #fff;
  text-align: center; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 8px; border-radius: 12px;
  border: 1px solid rgba(15, 30, 51, .22);
  box-shadow: 0 10px 28px rgba(15, 30, 51, .18);
  overflow: hidden;
}
.fo h3 { font-family: var(--font-display); font-weight: 900; font-size: 14px; margin: .15rem 0; line-height: 1.15; }
.fo p { font-size: 11px; margin: 0 0 .35rem; line-height: 1.3; }
.fo a, .fo span.soon {
  display: inline-block; background: var(--navy); color: #fff; text-decoration: none;
  border-radius: 7px; font-weight: 700; font-size: 12px; padding: 6px 10px;
}
.gctl {
  position: absolute; left: 50%; bottom: .6rem; transform: translateX(-50%);
  display: flex; gap: .35rem; background: var(--panel); border: 1px solid var(--seam);
  border-radius: 999px; padding: .3rem .45rem;
}
.gctl button { width: 36px; height: 36px; padding: 0; border-radius: 50%; }
#palette {
  position: fixed; inset: 0; z-index: 60; background: rgba(5,12,22,.55);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh;
}
#palette[hidden] { display: none; }
.pbox { width: min(560px, 92vw); background: var(--panel); border: 1px solid var(--seam); border-radius: 14px; overflow: hidden; }
.pbox input {
  width: 100%; border: 0; border-bottom: 1px solid var(--seam); background: transparent;
  color: var(--fg); font: 1rem var(--font-body); padding: .9rem 1rem;
}
.presults { max-height: 46vh; overflow: auto; }
.pitem { display: flex; gap: .5rem; align-items: center; padding: .55rem 1rem; cursor: pointer; }
.pitem[aria-selected="true"] { background: rgba(22,166,217,.18); }
.pitem .k { font-family: var(--font-mono); font-size: .58rem; color: var(--slate); }
.phint { margin: 0; padding: .45rem 1rem .7rem; color: var(--slate); font-size: .72rem; }
#list { position: fixed; inset: 0; z-index: 35; background: var(--bg); overflow: auto; padding: 6.5rem 1.2rem 1.2rem; }
#list[hidden] { display: none; }
.grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.card2 {
  display: block; border: 1px solid var(--seam); border-radius: 12px; padding: 1rem;
  background: var(--panel); color: var(--fg); text-decoration: none;
}
.card2 h2 { font-family: var(--font-display); font-size: 1.15rem; margin: .25rem 0; }
.eyebrow, .go { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cyan); }
.card2 p { margin: .2rem 0; }
.card2.soon { color: var(--slate); }
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}
@media (max-width: 800px) {
  body { overflow: auto; }
  .workspace { flex-direction: column; min-height: 70vh; }
  .rail { width: auto; flex: none; max-height: 42vh; border-right: 0; border-bottom: 1px solid var(--seam); }
  #stage { min-height: 68vh; }
  .role { display: none; }
  #list { padding-top: 8.5rem; }
}