/* Shared by the sub-pages (/team/, /runtime/, /learning/): tokens, nav, phone menu, diagram colours. */
:root {
  color-scheme: light;
  --bg: #E4E6EF; --bg-deep: #D8DBE6; --ink: #2C3144; --muted: #6B7185; --faint: #9AA0B2; --accent: #5E6AD2;
  --glass: rgba(255, 255, 255, 0.66);
  --shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 12px 32px -18px rgba(44, 49, 68, 0.35);
  --font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: "Geist", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { background: var(--bg-deep); }
body { margin: 0; min-height: 100vh; background: radial-gradient(120% 80% at 70% 30%, #ECEEF5 0%, var(--bg) 45%, var(--bg-deep) 100%) var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
.wrap { max-width: 1240px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 720px) { .wrap { padding-left: max(40px, env(safe-area-inset-left, 0px)); padding-right: max(40px, env(safe-area-inset-right, 0px)); } }
.nav { display: flex; align-items: center; gap: 28px; padding-block: 22px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 650; font-size: 19px; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.brand svg { flex: none; }
.spacer { flex: 1; }
main { padding-block: 72px 160px; }
.kicker { margin: 0 0 14px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
h1 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 6vw, 80px); line-height: 1; letter-spacing: -0.04em; text-wrap: balance; }
.links { display: flex; gap: 24px; margin-left: 12px; }
.links a { color: var(--muted); text-decoration: none; font-size: 14.5px; }
.links a:hover { color: var(--ink); }
.links a[aria-current="page"] { color: var(--ink); font-weight: 550; }
.nav { position: relative; }
.btn-ghost { white-space: nowrap; font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; padding: 8px 14px; border-radius: 999px; background: var(--glass); box-shadow: var(--shadow); }
.btn-ghost:hover { background: rgba(255, 255, 255, .86); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.menu-btn { display: none; width: 38px; height: 38px; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: var(--glass); box-shadow: var(--shadow); color: var(--ink); cursor: pointer; }
.menu-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
@media (max-width: 860px) {
  .nav { gap: 12px; }
  .menu-btn { display: inline-flex; }
  .links { display: none; margin: 0; }
  .links.open { display: flex; flex-direction: column; position: absolute; top: calc(100% - 6px); left: 16px; right: 16px; padding: 8px; gap: 2px; border-radius: 18px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 0 0 1px rgba(44, 49, 68, .06), 0 28px 50px -24px rgba(44, 49, 68, .5); z-index: 40; }
  .links.open a { padding: 13px 14px; border-radius: 12px; font-size: 16px; color: var(--ink); }
  .links.open a:hover { background: rgba(94, 106, 210, .08); }
}

/* Diagram colours (inline SVG) */
.dg { display: block; width: 100%; height: auto; overflow: visible; }
.dg text { font-family: var(--font-body); }
.dg .m { font-family: var(--font-mono); letter-spacing: .02em; }
.dg .disp { font-family: var(--font-display); letter-spacing: -0.02em; }
.c-ink { fill: var(--ink); } .c-mut { fill: var(--muted); } .c-faint { fill: var(--faint); }
.c-acc { fill: var(--accent); } .c-amb { fill: #B77A1A; } .c-grn { fill: #1E8A4C; } .c-red { fill: #B5424A; }
.f-acc { fill: var(--accent); } .f-amb { fill: #D9962B; } .f-grn { fill: #26A55A; } .f-red { fill: #C4474C; } .f-card { fill: #fff; } .f-soft { fill: rgba(44, 49, 68, .06); } .f-ink { fill: var(--ink); }
.s-line { stroke: rgba(44, 49, 68, .16); } .s-soft { stroke: rgba(44, 49, 68, .08); stroke-width: 1; }
.s-acc { stroke: var(--accent); } .s-amb { stroke: #D9962B; } .s-grn { stroke: #26A55A; } .s-red { stroke: #C4474C; } .s-ink { stroke: var(--ink); }