/* glad themes. One class on the app root (.app2.th-<name>) swaps the whole look; porcelain is the default, datasheet, hud and graphite the others.
   Part 1 routes every shared or hard-coded colour through a token, its defaults glad.css's own values.
   Part 2 is one block per theme: its tokens, then the few rules that make it that theme.
   Loaded after glad.css. */

/* ================================================================ 1 · scaffold */

.app2 {
  --surface: var(--ground);            /* panel, menus, search results */
  --bar: var(--ground);                /* top and bottom bars */
  --node: var(--ground);               /* inside rings, diamonds and group circles */
  --line: var(--ink);                  /* strong 1px lines: buttons, boxes, the panel edge */
  --accent: var(--ink);                /* solid chips, primary action, highlight tags */
  --on-accent: var(--ground);
  --accent-hover: var(--ink-hover);
  --agent: var(--ink); --open: var(--faint);  /* an agent's glyph and mark, and nobody's */
  /* every theme sets your colour, the agent's share and the eight hues a person's mark and share take, --p-you,
     --p-agent and --hue-0 to --hue-7 (people.js, marks.js): a theme's tokens on .app2 are the only ones they read */
  --edge: #C9C8C2; --edge-link: #B9B8B2; --edge-hot: var(--ink);
  --glass: rgba(250, 250, 248, .94); --shadow-c: rgba(17, 17, 16, .08); --halo: rgba(17, 17, 16, .05);
  --clash: currentColor;
  --warn: #8A6A1F; --warn-bg: #F4EAD3; --ok: #2F6B3B;  /* waiting on someone or told to put right; put right */
  --misha: #D9480F; --on-misha: #FFFFFF; --misha-hover: #BF3E0B;  /* Misha's orange: the tour's chip and the top-bar tab, in every theme */
  --r: 0px; --r-pill: var(--r); --r-chip: 0px;
  --title-w: 300; --title-track: -0.01em;
  --label-case: none; --label-track: 0.08em;
  --graph-bg: none;
  --scrim: rgba(17, 17, 16, .28);      /* behind the intro */
  --r-card: calc(var(--r) * 1.5);      /* the intro's own corners */
}
.app2 ::selection { background: var(--accent); color: var(--on-accent); }

/* surfaces */
.app2 .bar-top { background: var(--bar); }
.app2 .graph2 { background: var(--graph-bg); }
.app2 .panel2 { background: var(--surface); border-left-color: var(--line); }
.app2 .results, .app2 .hl-menu, .app2 .key-card, .app2 .tip2 { background: var(--surface); border-color: var(--line); border-radius: var(--r); }
.app2 .results { box-shadow: 0 12px 32px var(--shadow-c); }
.app2 .hl-menu, .app2 .key-card { box-shadow: 0 -6px 20px var(--shadow-c); }
.app2 .key-btn, .app2 .graph-corner .btn, .app2 .graph-corner-bottom .select { background-color: var(--glass); }
.app2 .key-btn:hover, .app2 .graph-corner .btn:hover, .app2 .graph-corner-bottom .select:hover { background-color: var(--hover); }
.app2 .key-btn[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.app2 .ov.ov-misha, .app2 .ov.ov-misha[aria-pressed] { background: var(--misha); color: var(--on-misha); border-color: var(--misha); }
.app2 .ov.ov-misha:hover { background: var(--misha-hover); color: var(--on-misha); border-color: var(--misha-hover); }
.app2 .ov.ov-misha:focus-visible { outline: 2px solid var(--misha); outline-offset: 3px; }
/* a theme's own .ov[aria-pressed="true"] is also (class, class, attribute); the duplicated [aria-pressed] selector above and here outranks it so the orange always wins */
.app2 .ov.ov-misha[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--on-misha); }
.app2 .panel2 .story .mk { background: var(--surface); }
.app2 .panel2 .lg-donut::after { background: var(--surface); }
.app2 .gmk > span.bdg { background: var(--node); }

/* strong lines */
.app2 .btn:not(.ghost), .app2 .select, .app2 .box, .app2 .split2 .bars { border-color: var(--line); }
.app2 .box.settled { border-color: var(--rule); }
.app2 .tiles { border-top-color: var(--line); }
.app2 .ov[aria-pressed="true"] { border-color: var(--line); }
.app2 .why-ask, .app2 .p-item .ia { border-left-color: var(--accent); }
.app2 .code .ln.inr .g { border-left-color: var(--accent); }

/* solid fills */
.app2 .btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.app2 .btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.app2 .count.on, .app2 .gtag, .app2 .st-open, .app2 .tile[aria-selected="true"] { background: var(--accent); color: var(--on-accent); }
.app2 .count.on, .app2 .gtag, .app2 .st, .app2 .kbd { border-radius: var(--r-chip); }
.app2 .live-dot { background: var(--accent); }

/* who decided: a person shows by their mark (part 3), nobody's and an agent's glyph and dot outlined */
.app2 .g-open { border-color: var(--open); background: var(--node); }
.app2 .g-root, .app2 .g-subject { background: var(--node); }
.app2 .g-root::after { background: var(--accent); }
.app2 .gdonut::after { background: var(--node); }
.app2 .mk-agent::before { border-color: var(--agent); background: var(--node); }
.app2 .dim .mk-agent::before { border-color: var(--faint); }
.app2 .dot.d-p { fill: var(--pc); stroke: var(--pc); }
.app2 .dot.d-agent { fill: var(--node); stroke: var(--agent); }
.app2 .dot.d-open { fill: var(--node); }

/* who decided: shares, each side's in its colour (people.js: tint) */
.app2 .split2 .bars span + span { border-left-color: var(--surface); }
.app2 .split2 .bars span + .b-agent { border-left-color: var(--line); }

/* edges */
.app2 .e-tree { stroke: var(--edge); }
.app2 .e-tree.faint { stroke: var(--hairline); }
.app2 .e-link { stroke: var(--edge-link); }
.app2 .e-link.on, .app2 .e-story { stroke: var(--edge-hot); }
.app2 .e-story.faint { stroke: var(--rule); }

/* clash, focus halo */
.app2 .gx, .app2 .mk-clash::before, .app2 .vs, .app2 .mk-x { color: var(--clash); }
.app2 .gn.focus .g-thing, .app2 .gn.focus .g-subject { box-shadow: 0 0 0 10px var(--halo); }

/* shape */
.app2 .btn, .app2 .select, .app2 .box, .app2 .side-card, .app2 .code { border-radius: var(--r); }
.app2 .ov, .app2 .crumb, .app2 .live-off, .app2 .judge-off { border-radius: var(--r-pill); }

/* type */
.app2 .p-title, .app2 .d-q, .app2 .now-ans, .app2 .side-card .at, .app2 .split2 .name, .app2 .empty .big,
.app2 .gn-thing .gl-t, .app2 .gn-root .gl-t, .app2 .lab-center .gl-s { font-weight: var(--title-w); letter-spacing: var(--title-track); }
.app2 .label, .app2 .hl-head, .app2 .key-h, .app2 .p-item .kind, .app2 .p-row .kind { text-transform: var(--label-case); letter-spacing: var(--label-track); }


/* ================================================================ 2 · themes */

/* ---------------------------------------------------------------- A · porcelain
   clean, light, soft. White cards on cool grey, rounded corners, a floating panel, one blue. */

.app2.th-porcelain {
  --ground: #F3F4F7; --surface: #FFFFFF; --bar: rgba(255, 255, 255, .88); --node: #FFFFFF;
  --ink: #0E1116; --body: #3A404B; --muted: #626B7A; --faint: #AEB5C0;
  --hairline: #E6E8ED; --rule: #D7DBE2; --line: #D7DBE2;
  --hover: #EDEFF3; --press: #E3E6EC; --ink-hover: #262B33;
  --accent: #2F66F5; --on-accent: #FFFFFF; --accent-hover: #1F55E6;
  --misha: #D9480F; --on-misha: #FFFFFF; --misha-hover: #BF3E0B;
  --agent: #0E1116; --open: #AEB5C0;
  --p-you: #2F66F5; --p-agent: #E6E8ED;
  --hue-0: #9CC3F5; --hue-1: #F5B48A; --hue-2: #C7B4F2; --hue-3: #F2D27C; --hue-4: #F4A9BE; --hue-5: #A9D8A0; --hue-6: #A9C6D6; --hue-7: #DCC3A6;
  --edge: #D3D8E0; --edge-link: #BCC3CE; --edge-hot: #2F66F5;
  --glass: rgba(255, 255, 255, .92); --shadow-c: rgba(16, 24, 40, .10); --halo: rgba(47, 102, 245, .10);
  --clash: #C8363B;
  --warn: #95600A; --warn-bg: #FBEFD6; --ok: #1E7A49;
  --r: 8px; --r-pill: 999px; --r-chip: 999px;
  --title-w: 600; --title-track: -0.02em;
  --serif: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, Menlo, monospace;
  --graph-bg: radial-gradient(ellipse 60% 55% at 50% 45%, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
}
.th-porcelain .bar-top { -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); }
.th-porcelain .wordmark { font-weight: 700; font-size: 22px; letter-spacing: -0.04em; }
.th-porcelain :is(.crumb, .ov, .hl-opt, .tab, .select, .search label) { font-family: var(--serif); font-size: 13px; font-weight: 500; letter-spacing: 0; }
.th-porcelain .btn { font-family: var(--serif); font-size: 13px; font-weight: 600; letter-spacing: 0; }
.th-porcelain .overlays { background: #E9EBF0; padding: 3px; border-radius: 999px; }
.th-porcelain .ov { height: 28px; }
.th-porcelain .ov[aria-pressed="true"] { background: var(--surface); border-color: var(--hairline); box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.th-porcelain .search input { height: 34px; padding: 0 40px 0 64px; border: 1px solid transparent; border-radius: 10px; background: #E9EBF0; font-family: var(--serif); font-size: 14px; }
.th-porcelain .search input:hover { border-color: transparent; }
.th-porcelain .search input:focus, .th-porcelain .search.open input { background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 4px rgba(47, 102, 245, .14); }
.th-porcelain .search label { left: 12px; }
.th-porcelain .kbd { right: 8px; background: var(--surface); }
.th-porcelain .label, .th-porcelain .hl-head, .th-porcelain .key-h, .th-porcelain .p-item .kind, .th-porcelain .p-row .kind { font-family: var(--serif); font-size: 12px; font-weight: 600; letter-spacing: 0; }
.th-porcelain .panel2 { top: 68px; right: 12px; bottom: 12px; border: 1px solid var(--hairline); border-radius: 16px; box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 16px 48px rgba(16, 24, 40, .12); }
.th-porcelain .box, .th-porcelain .side-card { background: #F7F8FA; border-color: var(--hairline); border-radius: 12px; }
.th-porcelain .box.dash { border-color: var(--rule); }
.th-porcelain .code { background: #FAFBFC; border-color: var(--hairline); }
.th-porcelain .tiles { border-top-color: var(--hairline); }
.th-porcelain .g-subject, .th-porcelain .g-root, .th-porcelain .gdonut { border-color: var(--rule); box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 6px 16px rgba(16, 24, 40, .08); }
.th-porcelain .g-subject::after, .th-porcelain .gdonut::after { border-color: var(--rule); }
.th-porcelain .gn:hover .g { box-shadow: 0 0 0 6px rgba(47, 102, 245, .12); }
.th-porcelain .gtag { padding: 2px 8px; }
.th-porcelain .gl-t { font-family: var(--serif); letter-spacing: 0; }


/* ---------------------------------------------------------------- B · datasheet
   dev, light. A printed instrument manual: warm grey paper, a graph grid, condensed sans with mono, one orange. */

.app2.th-datasheet {
  --ground: #E8E8E3; --surface: #F3F3EF; --bar: #E8E8E3; --node: #F3F3EF;
  --ink: #141414; --body: #2E2E2B; --muted: #5E5E58; --faint: #9E9E96;
  --hairline: #CDCDC6; --rule: #B5B5AD; --line: #141414;
  --hover: #DCDCD5; --press: #D1D1C9; --ink-hover: #2E2E2B;
  --accent: #FF4F00; --on-accent: #141414; --accent-hover: #FF6A26;
  --misha: #FF4F00; --on-misha: #141414; --misha-hover: #FF6A26;
  --agent: #141414; --open: #9E9E96;
  --p-you: #FF4F00; --p-agent: #F3F3EF;
  --hue-0: #F7F7F3; --hue-1: #C4C4BC; --hue-2: #141414; --hue-3: #F7F7F3; --hue-4: #C4C4BC; --hue-5: #141414; --hue-6: #F7F7F3; --hue-7: #C4C4BC;
  --edge: #A9A9A1; --edge-link: #8E8E86; --edge-hot: #141414;
  --glass: rgba(243, 243, 239, .95); --shadow-c: rgba(20, 20, 20, .08); --halo: rgba(255, 79, 0, .10);
  --clash: #141414;
  --warn: #8A5300; --warn-bg: #F0DDB2; --ok: #2B6A39;
  --r: 0px; --r-pill: 0px; --r-chip: 0px;
  --title-w: 500; --title-track: -0.01em;
  --label-case: uppercase; --label-track: 0.12em;
  --serif: 'IBM Plex Sans Condensed', 'Arial Narrow', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --graph-bg:
    linear-gradient(#D2D2CB 1px, transparent 1px) 0 0 / 100px 100px,
    linear-gradient(90deg, #D2D2CB 1px, transparent 1px) 0 0 / 100px 100px,
    linear-gradient(#DFDFD9 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, #DFDFD9 1px, transparent 1px) 0 0 / 20px 20px;
}
.th-datasheet .bar-top { border-bottom-color: var(--ink); }
.th-datasheet .brand { align-items: center; }
.th-datasheet .wordmark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-weight: 600; font-size: 15px; letter-spacing: .18em; text-transform: uppercase; }
.th-datasheet .wordmark::before { content: ''; width: 14px; height: 14px; background: var(--accent); }
.th-datasheet :is(.crumb, .ov, .btn, .select, .hl-opt, .tab, .kbd, .search label) { text-transform: uppercase; letter-spacing: .08em; }
.th-datasheet .ov[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
.th-datasheet .d-head .crumbs { text-transform: uppercase; letter-spacing: .08em; }
.th-datasheet .panel2 .d-body { counter-reset: dsec; }
.th-datasheet .d-sec { border-top: 1px solid var(--ink); padding-top: 10px; }
.th-datasheet .d-sec > .label { justify-content: flex-start; align-items: center; gap: 10px; color: var(--ink); font-weight: 500; }
.th-datasheet .d-sec > .label::before { counter-increment: dsec; content: counter(dsec, decimal-leading-zero); display: inline-grid; place-items: center; min-width: 24px; height: 16px; padding: 0 3px; background: var(--accent); color: var(--on-accent); font-size: 10px; letter-spacing: .04em; }
.th-datasheet .d-q { font-size: 28px; line-height: 1.12; }
.th-datasheet .now-ans { font-size: 30px; }
.th-datasheet .box { background: var(--surface); }
.th-datasheet .gl-t { text-transform: uppercase; letter-spacing: .1em; }
.th-datasheet .gn-thing .gl-t, .th-datasheet .gn-root .gl-t, .th-datasheet .gn-subject .gl-t, .th-datasheet .lab-right .gl-t,
.th-datasheet .lab-center .gl-t, .th-datasheet .gn-reading .gl-t, .th-datasheet .gn-story .gl-t { text-transform: none; letter-spacing: -0.01em; }
.th-datasheet .g-subject, .th-datasheet .g-root, .th-datasheet .gdonut { border-width: 1.5px; }
.th-datasheet .gtag { font-weight: 500; }


/* ---------------------------------------------------------------- C · hud
   dev, dark, cinematic. After JARVIS: deep navy, cyan light, amber for what an agent decided alone; rings, ticks, brackets. */

.app2.th-hud {
  --scrim: rgba(0, 4, 10, .66);
  color-scheme: dark;
  --ground: #03080E; --surface: rgba(5, 16, 27, .84); --bar: rgba(3, 8, 14, .78); --node: #03080E;
  --ink: #DDF6FF; --body: #A3C9D8; --muted: #6A9AAE; --faint: #3D6878;
  --hairline: rgba(79, 216, 255, .13); --rule: rgba(79, 216, 255, .24); --line: rgba(79, 216, 255, .42);
  --hover: rgba(79, 216, 255, .08); --press: rgba(79, 216, 255, .15); --ink-hover: #FFFFFF;
  --accent: #4FD8FF; --on-accent: #00131C; --accent-hover: #7FE4FF;
  --misha: #FF9440; --on-misha: #1A0A00; --misha-hover: #FFAA66;
  --agent: #FFB547; --open: #3D6878;
  --p-you: #F2FCFF; --p-agent: #FFB547;
  --hue-0: #4FD8FF; --hue-1: #BDF3FF; --hue-2: #43E5C4; --hue-3: #5FA8FF; --hue-4: #A79BFF; --hue-5: #B8F56B; --hue-6: #FF8FB8; --hue-7: #C9D6E8;
  --edge: rgba(79, 216, 255, .22); --edge-link: rgba(79, 216, 255, .36); --edge-hot: #4FD8FF;
  --glass: rgba(4, 14, 24, .86); --shadow-c: rgba(0, 0, 0, .6); --halo: rgba(79, 216, 255, .10);
  --clash: #FF5A4E;
  --warn: #FFD166; --warn-bg: rgba(255, 209, 102, .14); --ok: #5BE3A1;
  --r: 2px; --r-pill: 2px; --r-chip: 1px;
  --title-w: 600; --title-track: 0.01em;
  --label-case: uppercase; --label-track: 0.18em;
  --serif: 'Rajdhani', 'Chakra Petch', ui-sans-serif, sans-serif;
  --mono: 'Share Tech Mono', 'JetBrains Mono', ui-monospace, monospace;
  --graph-bg:
    radial-gradient(circle at 50% 50%, rgba(79, 216, 255, .09), transparent 38%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 139px, rgba(79, 216, 255, .085) 139px 140px),
    linear-gradient(rgba(79, 216, 255, .045) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(79, 216, 255, .045) 1px, transparent 1px) 0 0 / 40px 40px;
}
/* scanlines and vignette over everything; crosshair through the graph */
.th-hud.app2::after { content: ''; position: absolute; inset: 0; z-index: 80; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(160, 230, 255, .025) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 50% 50%, transparent 58%, rgba(0, 0, 0, .45) 100%); }
.th-hud .graph2::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(79, 216, 255, .15) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(0deg, transparent calc(50% - .5px), rgba(79, 216, 255, .15) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)); }
/* bars */
.th-hud .bar-top { background: linear-gradient(180deg, rgba(79, 216, 255, .07), rgba(3, 8, 14, .7)); border-bottom-color: var(--rule); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.th-hud .brand { gap: 12px; align-items: center; }
.th-hud .brand::before { content: ''; width: 20px; height: 20px; flex: 0 0 20px; box-sizing: border-box; border-radius: 50%; border: 1px solid var(--accent);
  box-shadow: inset 0 0 0 4px var(--ground), inset 0 0 0 10px rgba(79, 216, 255, .9), 0 0 14px rgba(79, 216, 255, .55); }
.th-hud .wordmark { font-weight: 700; font-size: 20px; letter-spacing: .34em; text-transform: uppercase; color: var(--accent); text-shadow: 0 0 14px rgba(79, 216, 255, .55); }
.th-hud :is(.crumb, .ov, .btn, .select, .hl-opt, .kbd, .search label, .search input, .tab, .tile-l, .st) { text-transform: uppercase; letter-spacing: .12em; }
.th-hud .ov[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: rgba(79, 216, 255, .08); box-shadow: inset 0 0 12px rgba(79, 216, 255, .22); }
.th-hud .count.on { box-shadow: 0 0 10px rgba(79, 216, 255, .6); }
.th-hud .btn, .th-hud .select, .th-hud .box { clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }
.th-hud .btn:not(.ghost):not(.primary):hover { background: rgba(79, 216, 255, .1); }
.th-hud .search input { border-bottom-color: var(--rule); letter-spacing: .06em; }
.th-hud .search input:focus, .th-hud .search.open input { border-bottom-color: var(--accent); box-shadow: 0 6px 14px -10px rgba(79, 216, 255, .8); }
.th-hud .kbd { border-color: var(--rule); color: var(--accent); }
/* the panel: glass, corner brackets */
.th-hud .panel2 { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: -30px 0 60px rgba(0, 0, 0, .45), inset 1px 0 0 rgba(79, 216, 255, .2); }
.th-hud .panel2::before { content: ''; position: absolute; inset: 10px; z-index: 3; pointer-events: none;
  background:
    linear-gradient(#4FD8FF, #4FD8FF) top left / 16px 1px no-repeat, linear-gradient(#4FD8FF, #4FD8FF) top left / 1px 16px no-repeat,
    linear-gradient(#4FD8FF, #4FD8FF) top right / 16px 1px no-repeat, linear-gradient(#4FD8FF, #4FD8FF) top right / 1px 16px no-repeat,
    linear-gradient(#4FD8FF, #4FD8FF) bottom left / 16px 1px no-repeat, linear-gradient(#4FD8FF, #4FD8FF) bottom left / 1px 16px no-repeat,
    linear-gradient(#4FD8FF, #4FD8FF) bottom right / 16px 1px no-repeat, linear-gradient(#4FD8FF, #4FD8FF) bottom right / 1px 16px no-repeat;
  opacity: .8; }
/* what opens over the graph is glass too, and dense enough that the rings behind it never show through its text */
.th-hud :is(.results, .hl-menu) { background: rgba(5, 16, 27, .96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.th-hud .d-head { background: linear-gradient(90deg, rgba(79, 216, 255, .12), transparent 70%); border-bottom-color: var(--rule); }
.th-hud .d-head .crumbs { color: var(--accent); text-transform: uppercase; letter-spacing: .16em; }
.th-hud .d-q { font-size: 27px; line-height: 1.12; color: #F2FCFF; text-shadow: 0 0 22px rgba(79, 216, 255, .28); }
.th-hud .p-title { color: #F2FCFF; text-transform: uppercase; letter-spacing: .08em; }
.th-hud .now-ans { color: var(--accent); text-shadow: 0 0 18px rgba(79, 216, 255, .45); }
.th-hud .d-sec > .label { justify-content: flex-start; align-items: center; gap: 10px; color: var(--accent); }
.th-hud .d-sec > .label::before { content: ''; width: 6px; height: 6px; flex: 0 0 auto; border: 1px solid var(--accent); transform: rotate(45deg); }
.th-hud .d-sec > .label::after { content: ''; flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, var(--rule), transparent); }
.th-hud .box { background: rgba(79, 216, 255, .04); }
.th-hud .side-card { background: rgba(79, 216, 255, .03); border-color: var(--rule); }
.th-hud .p-row .t, .th-hud .opt-row .t, .th-hud .story .a, .th-hud .gl-s { font-weight: 500; }
.th-hud .why-words, .th-hud .story .words, .th-hud .p-item .iq, .th-hud .side-card blockquote { font-style: normal; color: var(--body); }
/* the graph: glowing glyphs, tick rings round areas, an arc-reactor root */
.th-hud .gn:hover .g { box-shadow: 0 0 0 6px rgba(79, 216, 255, .16), 0 0 18px rgba(79, 216, 255, .6); }
.th-hud .g-subject, .th-hud .g-root, .th-hud .gdonut { border-color: var(--accent); box-shadow: 0 0 14px rgba(79, 216, 255, .35); }
.th-hud .g-subject::after, .th-hud .gdonut::after { border-color: rgba(79, 216, 255, .6); }
.th-hud .g-root::after { box-shadow: 0 0 20px var(--accent); }
.th-hud .g-root::before { content: ''; position: absolute; inset: -14px; border-radius: 50%; border: 1px dashed rgba(79, 216, 255, .6); animation: hud-turn 40s linear infinite; }
.th-hud .gdonut::before { content: ''; position: absolute; inset: -11px; border-radius: 50%;
  background: repeating-conic-gradient(rgba(79, 216, 255, .75) 0 1.4deg, transparent 1.4deg 10deg);
  -webkit-mask: radial-gradient(closest-side, transparent 84%, #000 85% 99%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 84%, #000 85% 99%, transparent 100%);
  animation: hud-turn 60s linear infinite; }
@keyframes hud-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .th-hud .g-root::before, .th-hud .gdonut::before { animation: none; } }
.th-hud .gcheck { border-color: var(--accent); }
.th-hud .gx { text-shadow: 0 0 10px rgba(255, 90, 78, .8); }
.th-hud .gtag { background: rgba(3, 8, 14, .85); color: var(--accent); border: 1px solid var(--accent); box-shadow: 0 0 10px rgba(79, 216, 255, .35); }
.th-hud .e-story, .th-hud .e-link.on { filter: drop-shadow(0 0 3px rgba(79, 216, 255, .9)); }
.th-hud .gl-t { text-transform: uppercase; letter-spacing: .12em; }
.th-hud .gn-thing .gl-t, .th-hud .gn-root .gl-t, .th-hud .gn-subject .gl-t { font-size: 18px; font-weight: 600; letter-spacing: .1em; }
.th-hud .lab-right .gl-t { font-size: 22px; font-weight: 600; letter-spacing: .08em; }
.th-hud .lab-center .gl-t, .th-hud .gn-reading .gl-t, .th-hud .gn-story .gl-t { text-transform: none; letter-spacing: 0; }


/* ---------------------------------------------------------------- D · graphite
   clean, dark, calm. Charcoal, soft grey type, sans labels, one mint. */

.app2.th-graphite {
  color-scheme: dark;
  --ground: #101113; --surface: #16171A; --bar: #101113; --node: #16171A;
  --ink: #ECEDEF; --body: #BABDC3; --muted: #8A8F98; --faint: #4C5058;
  --hairline: #212327; --rule: #2D3035; --line: #2D3035;
  --hover: #1B1C1F; --press: #232428; --ink-hover: #FFFFFF;
  --accent: #6FD3A7; --on-accent: #06140D; --accent-hover: #8BDDB9;
  --misha: #F0894A; --on-misha: #160A03; --misha-hover: #F4A06C;
  --agent: #9AA0A9; --open: #4C5058;
  --p-you: #6FD3A7; --p-agent: #A48BE8;
  --hue-0: #8FB8DE; --hue-1: #E6A57E; --hue-2: #B9A3E3; --hue-3: #E3C17A; --hue-4: #E59AAE; --hue-5: #A8C686; --hue-6: #9FB0C2; --hue-7: #C9B79C;
  --edge: #2A2C31; --edge-link: #383B41; --edge-hot: #6FD3A7;
  --glass: rgba(22, 23, 26, .92); --shadow-c: rgba(0, 0, 0, .45); --halo: rgba(111, 211, 167, .08);
  --clash: #F2735B;
  --warn: #E0A43B; --warn-bg: #3A2E12; --ok: #7FC59A;
  --r: 8px; --r-pill: 8px; --r-chip: 4px;
  --title-w: 500; --title-track: -0.02em;
  --serif: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, Menlo, monospace;
  --graph-bg: radial-gradient(ellipse 65% 60% at 50% 45%, #15171A 0%, rgba(16, 17, 19, 0) 100%);
  --scrim: rgba(0, 0, 0, .55);
}
.th-graphite .wordmark { font-weight: 600; font-size: 22px; letter-spacing: -0.04em; }
.th-graphite :is(.crumb, .ov, .hl-opt, .tab, .select, .search label, .btn) { font-family: var(--serif); font-size: 13px; font-weight: 500; letter-spacing: 0; }
.th-graphite .label, .th-graphite .hl-head, .th-graphite .key-h, .th-graphite .p-item .kind, .th-graphite .p-row .kind { font-family: var(--serif); font-size: 12px; font-weight: 500; letter-spacing: 0; }
.th-graphite .ov[aria-pressed="true"] { background: #1F2124; border-color: var(--rule); color: var(--ink); }
.th-graphite .search input { height: 34px; padding: 0 40px 0 64px; border: 1px solid var(--hairline); border-radius: 8px; background: var(--surface); font-family: var(--serif); font-size: 14px; }
.th-graphite .search input:focus, .th-graphite .search.open input { border-color: var(--rule); box-shadow: 0 0 0 3px rgba(111, 211, 167, .14); }
.th-graphite .search label { left: 12px; }
.th-graphite .kbd { right: 8px; }
.th-graphite .panel2 { border-left-color: var(--hairline); }
.th-graphite .box, .th-graphite .side-card { background: #1A1B1F; border-color: var(--rule); border-radius: 10px; }
.th-graphite .code { background: #131417; border-color: var(--hairline); }
.th-graphite .g-subject, .th-graphite .g-root, .th-graphite .gdonut { border-color: #3A3D43; }
.th-graphite .g-subject::after, .th-graphite .gdonut::after { border-color: #3A3D43; }
.th-graphite .gn:hover .g { box-shadow: 0 0 0 6px rgba(255, 255, 255, .06); }
.th-graphite .gl-t { font-family: var(--serif); letter-spacing: 0; }


/* ================================================================ 3 · people marks
   One mark per person: head + topper + eyes (marks.js); colour is the last cue, and at 16 px the head and colour are the mark.
   --mk-tint is the person's colour, its theme's --hue-N; --mk-fill, --mk-line and --mk-face paint the parts.
   role-you is how you see yourself; role-agent is a person's agent: their mark, outlined, with the agent diamond.
   Ported from the Design canvas's glad-themes-3.css; what every theme shares is in glad.css. */

/* porcelain: soft colour silhouettes with a deeper outline of the same colour, dark faces, a light lift; blue is you. */
.th-porcelain .mark { --mk-fill: var(--mk-tint); --mk-line: color-mix(in srgb, var(--mk-tint) 48%, #0E1116); --mk-face: #0E1116; --mk-agent: var(--mk-line);
  filter: drop-shadow(0 1px 1.5px rgba(16, 24, 40, .14)); }
.th-porcelain .mark.role-you { --mk-tint: var(--accent); --mk-face: #FFFFFF; }
.th-porcelain .mark.role-agent { --mk-fill: #FFFFFF; --mk-face: var(--mk-line); }
/* at 16 px and under the pastel body is a few pixels, so its outline, and an agent's face, go deeper in the same hue */
.th-porcelain .mark.compact { --mk-line: color-mix(in srgb, var(--mk-tint) 30%, #0E1116); }

/* datasheet: no colour at all. Three tones of paper and ink tell people apart after letter and shape; orange is you. */
.th-datasheet .mark { --mk-line: var(--ink); --mk-face: var(--ink); --mk-agent: var(--ink); }
.th-datasheet .mark.hue-0, .th-datasheet .mark.hue-3, .th-datasheet .mark.hue-6 { --mk-fill: #F7F7F3; }
.th-datasheet .mark.hue-1, .th-datasheet .mark.hue-4, .th-datasheet .mark.hue-7 { --mk-fill: #C4C4BC; }
.th-datasheet .mark.hue-2, .th-datasheet .mark.hue-5 { --mk-fill: #141414; --mk-face: #F7F7F3; }
.th-datasheet .mark.role-you { --mk-fill: var(--accent); --mk-face: var(--ink); }
.th-datasheet .mark.role-agent { --mk-fill: var(--ground); --mk-face: var(--ink); }
.th-datasheet .dot.d-p { stroke: var(--ink); }
.th-datasheet .split2 .bars span + span { border-left-color: var(--ink); }

/* hud: holograms. A dark tinted body, a glowing outline and face; white is you; every agent glows amber. */
.th-hud .mark { --mk-fill: color-mix(in srgb, var(--mk-tint) 16%, #03080E); --mk-line: var(--mk-tint); --mk-face: var(--mk-tint); --mk-agent: #FFB547;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--mk-tint) 55%, transparent)); }
.th-hud .mark.role-you { --mk-tint: #F2FCFF; filter: drop-shadow(0 0 5px rgba(79, 216, 255, .9)); }
.th-hud .mark.role-agent { --mk-tint: #FFB547; --mk-fill: #03080E; }

/* graphite: soft silhouettes in eight muted colours, dark faces; mint is you. */
.th-graphite .mark { --mk-fill: var(--mk-tint); --mk-line: var(--mk-tint); --mk-face: #101113; --mk-agent: var(--mk-tint); }
.th-graphite .mark.role-you { --mk-tint: var(--accent); }
.th-graphite .mark.role-agent { --mk-fill: var(--node); --mk-face: var(--mk-tint); }

/* ================================================================ 4 · the sample projects
   index.html puts .sample on the page's root for ?project= (cal.com, legal-ai) alone; a real graph's page draws as above. */

/* every person a bold colour of their own, far from each other, from the agent's and from Misha's orange and brown:
   in the samples you are red, Vladimir green, Logan yellow and Thomas blue */
.sample .app2.th-porcelain { --p-you: #E5262B;
  --hue-0: #16A34A; --hue-1: #7C3AED; --hue-2: #E11D8F; --hue-3: #06AED4; --hue-4: #1F2328; --hue-5: #8A8F98; --hue-6: #1F5BFF; --hue-7: #F5C400; }
.sample .app2.th-datasheet { --p-you: #D7191C;
  --hue-0: #1A9641; --hue-1: #6A3D9A; --hue-2: #D01C8B; --hue-3: #19B5E0; --hue-4: #141414; --hue-5: #A6A6A0; --hue-6: #1F4FD8; --hue-7: #F2C200; }
.sample .app2.th-hud { --agent: #4F5A6B; --p-you: #FF4D4D; --p-agent: #4F5A6B;
  --hue-0: #3DDC84; --hue-1: #A78BFA; --hue-2: #FF5FB0; --hue-3: #22D3EE; --hue-4: #F2F5F8; --hue-5: #8B95A5; --hue-6: #3D6BFF; --hue-7: #FFE14D; }
.sample .app2.th-graphite { --p-you: #F0524F; --p-agent: #4B5058;
  --hue-0: #4ADE80; --hue-1: #A78BFA; --hue-2: #F472B6; --hue-3: #22D3EE; --hue-4: #EDEFF2; --hue-5: #8B95A5; --hue-6: #4A74FF; --hue-7: #FACC15; }
/* you are your own colour, and the dark colours (purple, pink, black, blue) take a light face */
.sample .th-porcelain .mark.role-you, .sample .th-graphite .mark.role-you { --mk-tint: var(--p-you); }
.sample .th-porcelain .mark:is(.hue-1, .hue-2, .hue-4, .hue-6):not(.role-agent) { --mk-face: #FFFFFF; }
/* the data sheet prints colour: solid bodies with an ink outline */
.sample .th-datasheet .mark:not(.role-agent) { --mk-fill: var(--mk-tint); --mk-face: var(--ink); }
.sample .th-datasheet .mark:is(.hue-1, .hue-2, .hue-4, .hue-6, .role-you):not(.role-agent) { --mk-face: #F7F7F3; }
/* hud: red is you, and every agent glows in its person's colour rather than the amber beside Misha's orange */
.sample .th-hud .mark { --mk-agent: #6B7891; }
.sample .th-hud .mark.role-you { --mk-tint: var(--p-you); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--p-you) 80%, transparent)); }
.sample .th-hud .mark.role-agent.hue-0 { --mk-tint: var(--hue-0); } .sample .th-hud .mark.role-agent.hue-1 { --mk-tint: var(--hue-1); } .sample .th-hud .mark.role-agent.hue-2 { --mk-tint: var(--hue-2); } .sample .th-hud .mark.role-agent.hue-3 { --mk-tint: var(--hue-3); }
.sample .th-hud .mark.role-agent.hue-4 { --mk-tint: var(--hue-4); } .sample .th-hud .mark.role-agent.hue-5 { --mk-tint: var(--hue-5); } .sample .th-hud .mark.role-agent.hue-6 { --mk-tint: var(--hue-6); } .sample .th-hud .mark.role-agent.hue-7 { --mk-tint: var(--hue-7); }
/* your agent wears your colour, outlined */
.sample .app2 .mark.role-agent.of-you { --mk-tint: var(--p-you); }

/* Misha, the cal.com sample's team agent (calcom-misha.js): a brown teddy bear in every theme, outlined and tagged as an agent */
.sample .app2 .mark.mi-bear.role-agent { --mk-tint: #9A6A3F; --mk-fill: #9A6A3F; --mk-line: #4E301A; --mk-face: #24160B; --mk-agent: #4E301A; }
.sample .app2 .mark.mi-bear .mz { fill: #E8CFA6; stroke: #4E301A; stroke-width: 1.1; }
.sample .th-hud .mark.mi-bear.role-agent { --mk-tint: #C08A55; --mk-fill: #8A5C33; --mk-line: #E0B07E; --mk-agent: #E0B07E; }
.sample .th-hud .mark.mi-bear .mz { stroke: #E0B07E; }