@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/dm-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20CF; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/dm-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6-02DA, U+2000-206F, U+20AC, U+2122, U+2191-2193, U+2212, U+2215; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/assets/fonts/outfit-latin-ext.woff2') format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20CF; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/assets/fonts/outfit-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6-02DA, U+2000-206F, U+20AC, U+2122, U+2191-2193, U+2212, U+2215; }

/* Techtelligence global stylesheet — import ONCE, globally, before any page CSS.
   Contains every design token, utility class (.kard .microlabel .disp .tnum .text-gradient .gridbg .fring .tt-anim-*) and EVERY @keyframes the marketing pages reference.
   Missing this file is why animations were static in Replit: pages reference keyframes by name (ttSpin, ttHue, ttFlow, ttWord, ttRise, ttTwinkle, ttTrail, tt-drift, tt-float, tt-draw…) that were never defined. */


/* ===== tokens/fonts.css ===== */


/* ===== tokens/colors.css ===== */
/* Techtelligence color tokens — HSL channel triplets, consumed as hsl(var(--x)).
   Ground truth: portal source stylesheet. Light = :root, dark = .dark (portal defaults dark). */
:root {
  --background: 210 20% 98%; /* @kind color */
  --foreground: 225 30% 12%; /* @kind color */
  --card: 0 0% 100%; /* @kind color */
  --card-foreground: 225 30% 12%; /* @kind color */
  --card-2: 210 25% 99%; /* @kind color */
  --popover: 0 0% 100%; /* @kind color */
  --popover-foreground: 225 30% 12%; /* @kind color */
  --primary: 190 85% 38%; /* @kind color */
  --primary-foreground: 0 0% 100%; /* @kind color */
  --secondary: 210 20% 94%; /* @kind color */
  --secondary-foreground: 225 30% 20%; /* @kind color */
  --muted: 210 20% 94%; /* @kind color */
  --muted-foreground: 215 20% 44%; /* @kind color */
  --accent: 260 80% 55%; /* @kind color */
  --accent-foreground: 0 0% 100%; /* @kind color */
  --destructive: 0 84% 60%; /* @kind color */
  --border: 210 20% 88%; /* @kind color */
  --input: 210 20% 91%; /* @kind color */
  --ring: 190 85% 38%; /* @kind color */
  --sidebar: 210 25% 96%; /* @kind color */
  --sidebar-foreground: 225 25% 28%; /* @kind color */
  --sidebar-border: 210 20% 89%; /* @kind color */
  --elevate: 210 30% 40%; /* @kind other */
  /* semantic status hues — always via toneFor() mapping, never ad-hoc */
  --emerald: 152 62% 40%; /* @kind color */
  --amber: 38 92% 48%; /* @kind color */
  --rose: 349 78% 54%; /* @kind color */
  --sky: 198 88% 46%; /* @kind color */
  --violet: 260 72% 56%; /* @kind color */
  --slate: 215 16% 52%; /* @kind color */
  --shadow-card: 0 1px 2px hsl(225 30% 12% / .04), 0 8px 24px hsl(225 30% 12% / .06); /* @kind shadow */
  --shadow-pop: 0 12px 40px hsl(225 30% 12% / .14); /* @kind shadow */
  --grid-line: 225 20% 50% / .05; /* @kind color */
  /* brand — logo lockup only, never a UI surface */
  --brand-navy: 234 37% 17%; /* @kind color */
  /* semantic surface aliases */
  --surface-page: hsl(var(--background)); /* @kind color */
  --surface-card: hsl(var(--card)); /* @kind color */
  --surface-card-alt: hsl(var(--card-2)); /* @kind color */
  --text-body: hsl(var(--foreground)); /* @kind color */
  --text-muted: hsl(var(--muted-foreground)); /* @kind color */
}
.dark {
  --background: 225 30% 7%; /* @kind color */
  --foreground: 210 40% 96%; /* @kind color */
  --card: 225 25% 10%; /* @kind color */
  --card-foreground: 210 40% 96%; /* @kind color */
  --card-2: 225 24% 12%; /* @kind color */
  --popover: 225 25% 10%; /* @kind color */
  --popover-foreground: 210 40% 96%; /* @kind color */
  --primary: 190 90% 50%; /* @kind color */
  --primary-foreground: 225 30% 6%; /* @kind color */
  --secondary: 225 20% 16%; /* @kind color */
  --secondary-foreground: 210 40% 96%; /* @kind color */
  --muted: 225 20% 14%; /* @kind color */
  --muted-foreground: 215 20% 62%; /* @kind color */
  --accent: 260 80% 66%; /* @kind color */
  --accent-foreground: 210 40% 96%; /* @kind color */
  --destructive: 0 84% 62%; /* @kind color */
  --border: 225 20% 16%; /* @kind color */
  --input: 225 20% 18%; /* @kind color */
  --ring: 190 90% 50%; /* @kind color */
  --sidebar: 225 32% 5%; /* @kind color */
  --sidebar-foreground: 210 30% 80%; /* @kind color */
  --sidebar-border: 225 20% 12%; /* @kind color */
  --elevate: 210 60% 80%; /* @kind other */
  --emerald: 152 64% 50%; /* @kind color */
  --amber: 40 96% 58%; /* @kind color */
  --rose: 349 84% 64%; /* @kind color */
  --sky: 198 90% 56%; /* @kind color */
  --violet: 260 84% 72%; /* @kind color */
  --slate: 215 18% 62%; /* @kind color */
  --shadow-card: 0 1px 2px hsl(225 60% 2% / .5), 0 10px 34px hsl(225 60% 2% / .55); /* @kind shadow */
  --shadow-pop: 0 18px 60px hsl(225 60% 2% / .7); /* @kind shadow */
  --grid-line: 210 60% 80% / .035; /* @kind color */
}

/* ===== tokens/typography.css ===== */
/* Typography — DM Sans body/UI, Outfit display. */
:root {
  --font-sans: 'DM Sans', sans-serif; /* @kind font */
  --font-display: 'Outfit', sans-serif; /* @kind font */
}
body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
  text-rendering: optimizeLegibility;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); letter-spacing: -0.025em; }
::selection { background: hsl(var(--primary) / .3); }
a { color: hsl(var(--primary)); text-decoration: none; }
a:hover { color: hsl(var(--primary)); text-decoration: underline; }
.tnum { font-variant-numeric: tabular-nums; }
.disp { font-family: var(--font-display); }
/* micro-label: the terminal signature — badges, table headers, filter labels, KPI labels */
.microlabel {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}
.text-gradient {
  background: linear-gradient(100deg, hsl(var(--primary)), hsl(198 90% 56%) 40%, hsl(var(--accent)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ===== tokens/spacing.css ===== */
/* Spacing — the de-facto ramp, documented from real usage rather than invented.
   The source kit spaces in 1px-precise literals, so this is NOT a grid to snap to: it is the
   set of values the system actually repeats. Copy exact values from source when recreating a
   screen; reach for these tokens when composing something new. */
:root {
  /* ramp — 2px granularity where the product actually needs it (chips, badges, icon gaps) */
  --space-0: 0px;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 7px;   /* chip and inline-glyph gaps — the most common small value */
  --space-5: 8px;
  --space-6: 10px;
  --space-7: 12px;
  --space-8: 14px;
  --space-9: 16px;
  --space-10: 18px;
  --space-11: 20px;
  --space-12: 22px;
  --space-13: 26px;
  --space-14: 30px;
  --space-15: 40px;

  /* semantic aliases — use these first; they carry the intent */
  --gap-glyph: var(--space-4);      /* icon to label, badge dot to text */
  --gap-chip: var(--space-4);       /* between chips, pills, tags */
  --gap-control: var(--space-6);    /* between controls in a 38px filter row */
  --gap-stack: var(--space-7);      /* between stacked rows inside a card */
  --gap-card: var(--space-8);       /* between cards in a grid or column */
  --gap-section: var(--space-9);    /* between page sections */

  --pad-cell-x: var(--space-8);     /* table cell horizontal */
  --pad-cell-y: var(--space-7);     /* table cell vertical — 44px comfortable row */
  --pad-card: var(--space-9) var(--space-10);   /* card body: 16px 18px */
  --pad-card-header: var(--space-9) var(--space-10);
  --pad-drawer: var(--space-10) var(--space-12);/* drawer body: 18px 22px */
  --pad-page: var(--space-13) var(--space-14);  /* portal content: 26px 30px */

  /* fixed layout constants — these are structure, not spacing; never improvise them */
  --h-control: 38px;   /* every filter-row control */
  --h-row: 44px;       /* comfortable table row and minimum hit target */
  --h-row-compact: 38px;
  --h-topbar: 60px;
  --w-sidebar: 248px;
  --w-sidebar-collapsed: 74px;
  --w-content-max: 1320px;
}

/* ===== tokens/shape.css ===== */
/* Shape, elevation, layout constants. */
*, *::before, *::after { box-sizing: border-box; }
:root {
  --radius: 0.625rem; /* @kind radius */
  --radius-sm: calc(var(--radius) - 4px); /* @kind radius */
  --radius-md: calc(var(--radius) - 2px); /* @kind radius */
  --radius-lg: var(--radius); /* @kind radius */
  --radius-xl: calc(var(--radius) + 8px); /* @kind radius */
  --sb-w: 248px; /* @kind spacing */
  --sb-w-collapsed: 74px; /* @kind spacing */
  --topbar-h: 60px; /* @kind spacing */
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: hsl(var(--muted-foreground) / .28); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground) / .45); background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }
button:not(:disabled):not([aria-disabled="true"]), [role="button"]:not(:disabled):not([aria-disabled="true"]) { cursor: pointer; }

/* ===== tokens/motion.css ===== */
/* Motion — pure CSS only in the portal (no framer-motion there).
   Entrance keyframes animate the independent `translate` / `scale` properties, never `transform`:
   a `transform`-based keyframe with fill-mode `both` permanently overrides the inline transform
   that centred, fixed and popover elements rely on for positioning. */
:root { --ease: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ }
@keyframes slideInRight { from { translate: 24px 0; opacity: 0; } to { translate: none; opacity: 1; } }
@keyframes fadeUp { from { translate: 0 10px; opacity: 0; } to { translate: none; opacity: 1; } }
@keyframes pop { from { scale: .96; opacity: 0; } to { scale: none; opacity: 1; } }
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes tt-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.anim-slide-in-right { animation: slideInRight 0.28s var(--ease) both; }
.anim-fade-up { animation: fadeUp 0.35s var(--ease) both; }
.anim-pop { animation: pop 0.2s var(--ease) both; }
.tt-trend-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tt-draw 1.1s var(--ease, ease) forwards; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .skel { animation: none; }
}

/* feedback panel: bottom sheet on mobile, right sheet from sm up (product stylesheet parity) */
@keyframes slide-in-bottom { from { translate: 0 100% } to { translate: 0 0 } }
.feedback-panel { position: fixed; right: 0; bottom: 0; left: 0; max-height: 88vh; border-top: 1px solid hsl(var(--border)); border-radius: var(--radius-xl) var(--radius-xl) 0 0; animation: slide-in-bottom .3s var(--ease); }
@media (min-width: 640px) {
  .feedback-panel { top: 0; left: auto; width: 400px; max-width: 92vw; max-height: none; border-top: 0; border-left: 1px solid hsl(var(--border)); border-radius: 0; animation: slideInRight .28s var(--ease); }
}

.anim-slide-in-left { animation: tt-slide-left .2s var(--ease) both; }
@keyframes tt-slide-left { from { translate: -16px 0; opacity: 0 } to { translate: none; opacity: 1 } }

.tt-ticker { animation: tt-ticker-scroll linear infinite; }
@keyframes tt-ticker-scroll { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@media (prefers-reduced-motion: reduce) { .tt-ticker { animation: none !important; transform: none !important } }

/* ===== tokens/terminal-kit.css ===== */
/* The terminal kit — these utility classes ARE the component system.
   Copied verbatim (plain CSS) from the portal source stylesheet. */
.t-emerald { --t: var(--emerald); }
.t-amber { --t: var(--amber); }
.t-rose { --t: var(--rose); }
.t-sky { --t: var(--sky); }
.t-violet { --t: var(--violet); }
.t-slate { --t: var(--slate); }
.t-primary { --t: var(--primary); }
.kard { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
.kard-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid hsl(var(--border)); }
.kard-h .ttl { font-family: var(--font-display); font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 9px; }
.badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-display); font-weight: 700; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 12px; line-height: 1.25; white-space: nowrap; overflow-wrap: normal; max-width: 100%; text-align: left; color: hsl(var(--t, var(--slate))); background: hsl(var(--t, var(--slate)) / .13); border: 1px solid hsl(var(--t, var(--slate)) / .26); }
.badge .dot { width: 6px; height: 6px; flex-shrink: 0; align-self: center; border-radius: 50%; background: hsl(var(--t, var(--slate))); box-shadow: 0 0 0 3px hsl(var(--t, var(--slate)) / .18); }
.badge--wrap { white-space: normal; overflow-wrap: anywhere; align-items: flex-start; }
.badge--wrap .dot { align-self: flex-start; margin-top: 3px; }
.score { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 13px; color: hsl(var(--foreground)); }
.score .bar { width: 42px; height: 5px; border-radius: 99px; background: hsl(var(--muted-foreground) / .18); overflow: hidden; }
.score .bar i { display: block; height: 100%; border-radius: 99px; background: hsl(var(--t, var(--primary))); }
.delta { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-display); font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; line-height: 1; }
.delta.up { color: hsl(var(--emerald)); }
.delta.down { color: hsl(var(--rose)); }
.delta.flat { color: hsl(var(--muted-foreground)); }
.delta svg { width: 12px; height: 12px; }
.move { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-display); font-weight: 700; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.move.up { color: hsl(var(--emerald)); }
.move.down { color: hsl(var(--rose)); }
.move.new { color: hsl(var(--primary)); }
.move.flat { color: hsl(var(--muted-foreground)); }
.move svg { width: 14px; height: 14px; }
.btn { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; border-radius: var(--radius); padding: 0 16px; height: 38px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: 1px solid transparent; transition: all .16s var(--ease); white-space: nowrap; }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: 0 1px 0 hsl(var(--primary) / .4), 0 6px 20px hsl(var(--primary) / .28); }
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-secondary { background: hsl(var(--secondary)); color: hsl(var(--foreground)); border-color: hsl(var(--border)); }
.btn-secondary:hover { border-color: hsl(var(--primary) / .5); }
.btn-ghost { background: transparent; color: hsl(var(--muted-foreground)); }
.btn-ghost:hover { background: hsl(var(--secondary)); color: hsl(var(--foreground)); }
.input { font-family: var(--font-sans); font-size: 14px; height: 40px; border-radius: var(--radius); background: hsl(var(--background)); border: 1px solid hsl(var(--input)); color: hsl(var(--foreground)); padding: 0 14px; width: 100%; transition: border-color .15s, box-shadow .15s; }
.input:focus { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / .22); }
.input::placeholder { color: hsl(var(--muted-foreground) / .7); }
.sel { position: relative; display: inline-flex; flex-direction: column; gap: 6px; min-width: 180px; }
.sel > label { font-family: var(--font-display); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.sel .ctrl { appearance: none; font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; height: 38px; border-radius: var(--radius); background: hsl(var(--card)); border: 1px solid hsl(var(--border)); color: hsl(var(--foreground)); padding: 0 34px 0 12px; cursor: pointer; transition: border-color .15s; width: 100%; }
.sel .ctrl:hover { border-color: hsl(var(--primary) / .5); }
.sel .ctrl:focus { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / .2); }
.sel .chev { position: absolute; right: 12px; bottom: 11px; width: 15px; height: 15px; pointer-events: none; color: hsl(var(--muted-foreground)); }
.lb { width: 100%; border-collapse: separate; border-spacing: 0; }
.lb thead th { position: sticky; top: 0; z-index: 1; background: hsl(var(--card-2)); font-family: var(--font-display); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: hsl(var(--muted-foreground)); text-align: left; padding: 11px 14px; border-bottom: 1px solid hsl(var(--border)); white-space: nowrap; user-select: none; }
.lb thead th.sortable { cursor: pointer; }
.lb thead th.sortable:hover { color: hsl(var(--foreground)); }
.lb tbody td { padding: 12px 14px; border-bottom: 1px solid hsl(var(--border) / .6); vertical-align: middle; }
.lb.compact tbody td { padding: 7px 14px; }
.lb tbody tr:last-child td { border-bottom: 0; }
.lb-row { transition: background .12s var(--ease); cursor: pointer; }
.lb-row:hover { background: hsl(var(--secondary) / .55); }
.lb-row.sel { background: hsl(var(--primary) / .1); }
.lb-row.sel:hover { background: hsl(var(--primary) / .14); }
.lb-row .lb-chev { opacity: 0; transition: opacity .12s; color: hsl(var(--muted-foreground)); }
.lb-row:hover .lb-chev { opacity: 1; }
.lb-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px hsl(var(--ring)); }
.fring:focus-visible { outline: none; box-shadow: inset 0 0 0 2px hsl(var(--ring)); border-radius: 8px; }
.skel { background: linear-gradient(90deg, hsl(var(--muted) / .5) 25%, hsl(var(--muted-foreground) / .12) 37%, hsl(var(--muted) / .5) 63%); background-size: 800px 100%; animation: shimmer 1.4s infinite linear; border-radius: 6px; }
.gridbg { background-image: radial-gradient(hsl(var(--grid-line)) 1px, transparent 1px); background-size: 22px 22px; }

/* ===== tokens/marketing.css ===== */
/* Marketing-site theme scope — same brand family, more spacious.
   Apply .marketing (plus .dark as needed) on a page/section root. */
.marketing {
  --background: 210 30% 97%; /* @kind color */
  --foreground: 225 30% 10%; /* @kind color */
  --card: 0 0% 100%; /* @kind color */
  --card-foreground: 225 30% 10%; /* @kind color */
  --primary: 190 90% 38%; /* @kind color */
  --primary-foreground: 0 0% 100%; /* @kind color */
  --secondary: 220 15% 92%; /* @kind color */
  --secondary-foreground: 225 30% 15%; /* @kind color */
  --muted: 220 15% 92%; /* @kind color */
  --muted-foreground: 220 15% 45%; /* @kind color */
  --accent: 260 80% 55%; /* @kind color */
  --accent-foreground: 0 0% 100%; /* @kind color */
  --destructive: 0 84% 60%; /* @kind color */
  --border: 220 15% 88%; /* @kind color */
  --input: 220 15% 88%; /* @kind color */
  --ring: 190 90% 38%; /* @kind color */
  --radius: 0.75rem; /* @kind radius */
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}
.marketing.dark, .dark .marketing {
  --background: 225 30% 6%; /* @kind color */
  --foreground: 210 40% 98%; /* @kind color */
  --card: 225 25% 9%; /* @kind color */
  --card-foreground: 210 40% 98%; /* @kind color */
  --primary: 190 90% 50%; /* @kind color */
  --primary-foreground: 225 30% 6%; /* @kind color */
  --secondary: 225 20% 15%; /* @kind color */
  --secondary-foreground: 210 40% 98%; /* @kind color */
  --muted: 225 20% 15%; /* @kind color */
  --muted-foreground: 215 20% 65%; /* @kind color */
  --accent: 260 80% 60%; /* @kind color */
  --accent-foreground: 210 40% 98%; /* @kind color */
  --border: 225 20% 16%; /* @kind color */
  --input: 225 20% 16%; /* @kind color */
  --ring: 190 90% 50%; /* @kind color */
}
.glass-panel { background: hsl(var(--background) / .8); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid hsl(var(--border)); box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); }
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.animate-ticker { animation: ticker 45s linear infinite; }
.animate-ticker:hover { animation-play-state: paused; }

/* ===== tokens/responsive.css ===== */
/* Responsive + touch behavior. Desktop keeps the dense terminal rhythm;
   below the breakpoints the sidebar becomes a drawer, tables stack into cards,
   filter rows wrap, and controls grow to 44px touch targets. */

/* app shell */
.tt-shell { display: flex; min-height: 100vh; }
.tt-sidebar { width: var(--sb-w); flex-shrink: 0; }
.tt-main { flex: 1; min-width: 0; }
.tt-topbar { display: none; }
.tt-scrim { display: none; }

@media (max-width: 900px) {
  .tt-shell { display: block; }
  .tt-topbar { display: flex; }
  .tt-sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 70; transform: translateX(-100%); transition: transform .24s var(--ease); }
  .tt-sidebar[data-open="true"] { transform: none; box-shadow: var(--shadow-pop); }
  .tt-scrim { display: block; position: fixed; inset: 0; z-index: 69; background: hsl(225 60% 2% / .5); }
  .tt-main { padding: 16px 16px 32px !important; }
  .tt-page-title { font-size: 21px !important; }
}

/* one-row filter bars wrap on small screens, controls stretch to fill */
@media (max-width: 720px) {
  .tt-filterbar { flex-wrap: wrap; height: auto !important; }
  .tt-filterbar > * { flex: 1 1 150px !important; width: auto !important; min-width: 140px !important; }
  .tt-filterbar > .microlabel { flex-basis: 100% !important; margin-left: 0 !important; padding-bottom: 0 !important; }
}

/* modern stacked tables: each row becomes a card, cells label themselves */
@media (max-width: 720px) {
  .lb.tt-stack { min-width: 0 !important; }
  .lb.tt-stack thead { display: none; }
  .lb.tt-stack tbody tr { display: block; margin: 10px; padding: 2px 0; border: 1px solid hsl(var(--border)); border-radius: var(--radius-xl); background: hsl(var(--card-2)); }
  .lb.tt-stack tbody tr.sel { background: hsl(var(--primary) / .1); border-color: hsl(var(--primary) / .4); }
  .lb.tt-stack tbody td { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 14px !important; border-bottom: 1px solid hsl(var(--border) / .5); }
  .lb.tt-stack tbody td:last-child, .lb.tt-stack tbody tr td:empty { border-bottom: 0; }
  .lb.tt-stack tbody td:empty { display: none; }
  .lb.tt-stack tbody td::before { content: attr(data-label); font-family: var(--font-display); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: hsl(var(--muted-foreground)); flex-shrink: 0; }
  .lb.tt-stack tbody td:first-child { border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .lb.tt-stack .lb-chev { display: none; }
}

/* touch targets */
@media (pointer: coarse) and (max-width: 900px) {
  .btn { min-height: 44px; }
  .sel .ctrl { height: 44px; }
  .sel .chev { bottom: 14px; }
  .input { height: 44px; }
}

/* stacked layouts never overflow */
@media (max-width: 560px) {
  .tt-cta-row { flex-direction: column; align-items: stretch; }
  .tt-cta-row > .btn { width: 100%; justify-content: center; }
}

/* window picker: segmented on desktop, native select on small screens */
@media (max-width: 560px) {
  .tt-window-seg { display: none !important; }
  .tt-window-sel { display: block !important; height: 38px; }
}

/* popout drawer: side panel on desktop, bottom sheet on small screens */
@media (max-width: 640px) {
  .tt-drawer { top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: auto !important; max-width: none !important; max-height: 88vh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; border-left: 0 !important; border-right: 0 !important; border-top: 1px solid hsl(var(--border)); animation: tt-sheet-up .22s var(--ease) both; }
  .tt-drawer-grip { display: none !important; }
}
@keyframes tt-sheet-up { from { transform: translateY(14px); opacity: 0 } to { transform: none; opacity: 1 } }

/* module flow diagram: stack under 700px, hide the connector */
@media (max-width: 700px) {
  .tt-flow { grid-template-columns: 1fr !important; }
  .tt-flow-join { display: none !important; }
}

/* legal doc: hide the sticky section nav on narrow screens */
@media (max-width: 820px) {
  .tt-legal-nav { display: none !important; }
  .tt-legal-grid { grid-template-columns: 1fr !important; }
}

/* marketing header: burger panel under 900px */
@media (max-width: 900px) {
  .tt-mkt-nav, .tt-mkt-actions { display: none !important; }
  .tt-mkt-burger {
    display: inline-flex !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;
    margin: -5px -5px -5px auto;
    touch-action: manipulation;
  }
  .tt-mkt-burger:active { background: hsl(var(--primary) / .14) !important; }
  .tt-mkt-panel { display: block !important; }
}

/* product menu: single column on narrow viewports */
@media (max-width: 640px) { .tt-pm-grid { grid-template-columns: 1fr !important; } }

/* admin candidate workspace: decision column drops under the evidence on narrow screens */
@media (max-width: 1080px) {
  .tt-admin-review { grid-template-columns: 1fr !important; }
  .tt-admin-review > div:last-child { position: static !important; }
}

/* filter bar: full control row on desktop, one drawer trigger below 760px */
@media (max-width: 760px) {
  .tt-filterbar { align-items: stretch; }
  .tt-filterbar:has(.tt-filterbar-mobile) .tt-filterbar-controls { display: none !important; }
  .tt-filterbar-mobile { display: inline-flex !important; }
}
/* tablet: wrap into a second row, keeping Domain and Theme adjacent */
@media (min-width: 761px) and (max-width: 1100px) {
  .tt-filterbar .sel { flex: 1 1 260px; max-width: 340px; }
}

/* free-account offer: guarantees stack under the pitch on narrow screens */
@media (max-width: 820px) { .tt-offer { grid-template-columns: 1fr !important; } }

/* attribution picker: single column on narrow screens */
@media (max-width: 720px) { .tt-attr { grid-template-columns: 1fr !important; } }

/* ===== tokens/a11y.css ===== */
/* Accessibility preferences. These attributes are set on <html> by applyA11y(), so a user's
   choice reaches every component without any of them knowing about it. */

:root { --text-scale: 1; }

/* Skip link — hidden until focused, then unmissable. */
.tt-skip {
  position: absolute; top: 8px; left: -9999px;
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 0 16px; border-radius: var(--radius);
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  text-decoration: none; box-shadow: var(--shadow-pop); white-space: nowrap;
}
.tt-skip:focus, .tt-skip:focus-visible { left: 8px; }
.tt-skip + .tt-skip:focus, .tt-skip + .tt-skip:focus-visible { left: 200px; }

/* Text scale. This system sizes in px rather than rem, so scaling the root font-size would be a
   control that visibly does nothing — the honest implementation scales the content region and
   leaves the shell alone. That is also the difference from browser zoom, which enlarges the
   fixed sidebar and top bar until the content has nowhere left to go. */
.tt-scale { zoom: var(--text-scale); }
@supports not (zoom: 1) {
  .tt-scale { transform: scale(var(--text-scale)); transform-origin: top left; width: calc(100% / var(--text-scale)); }
}

/* Density. Comfortable is the 44px row; compact trades hit area for rows on screen, and is
   opt-in rather than the default for exactly that reason. */
[data-density="compact"] .lb td { padding-top: 7px; padding-bottom: 7px; }
[data-density="compact"] .kard-h { padding-top: 11px; padding-bottom: 11px; }

/* Motion. "reduced" mirrors the OS guard; "full" opts back in on a device that asks for less. */
[data-motion="reduced"] *, [data-motion="reduced"] *::before, [data-motion="reduced"] *::after {
  animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important; scroll-behavior: auto !important;
}
[data-motion="reduced"] .skel { animation: none; }
@media (prefers-reduced-motion: reduce) {
  [data-motion="full"] *, [data-motion="full"] *::before, [data-motion="full"] *::after {
    animation-duration: revert !important; animation-iteration-count: revert !important;
    transition-duration: revert !important;
  }
}

/* Underlined links, for readers who need more than colour to find them. */
[data-underline-links="true"] p a, [data-underline-links="true"] li a,
[data-underline-links="true"] td a { text-decoration: underline; text-underline-offset: 2px; }

/* Stronger focus ring. */
[data-focus="strong"] .fring:focus-visible,
[data-focus="strong"] a:focus-visible,
[data-focus="strong"] button:focus-visible,
[data-focus="strong"] input:focus-visible,
[data-focus="strong"] select:focus-visible,
[data-focus="strong"] textarea:focus-visible {
  outline: 3px solid hsl(var(--ring)) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px hsl(var(--ring) / .3) !important;
}

/* Screen-reader-only text, for table alternatives and live regions. */
.tt-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ===== tokens/motion-momentum.css ===== */
/* Market-momentum animation primitives. Pure CSS keyframes only (the portal
   bans framer-motion), token-colored, and all covered by the global
   prefers-reduced-motion guard in motion.css. */

@keyframes tt-pulse-ring { 0% { transform: scale(.55); opacity: .5 } 70% { opacity: 0 } 100% { transform: scale(2.4); opacity: 0 } }
@keyframes tt-pulse-core { 0%, 100% { transform: scale(1); opacity: 1 } 50% { transform: scale(.82); opacity: .78 } }
@keyframes tt-bar { 0%, 100% { transform: scaleY(.32) } 50% { transform: scaleY(1) } }
@keyframes tt-draw-loop { 0% { stroke-dashoffset: 1 } 55% { stroke-dashoffset: 0 } 92% { stroke-dashoffset: 0; opacity: 1 } 100% { stroke-dashoffset: 0; opacity: .15 } }
@keyframes tt-tip { 0% { opacity: 0; transform: scale(.4) } 60% { opacity: 0; transform: scale(.4) } 75% { opacity: 1; transform: scale(1.25) } 100% { opacity: 1; transform: scale(1) } }
@keyframes tt-drift { from { transform: translate3d(0,0,0) } to { transform: translate3d(-25%,0,0) } }
@keyframes tt-float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
@keyframes tt-roll-up { 0% { transform: translateY(0) } 26% { transform: translateY(0) } 52% { transform: translateY(-50%) } 100% { transform: translateY(-50%) } }
@keyframes tt-pip-in { 0% { transform: scaleX(.2); opacity: .25 } 100% { transform: scaleX(1); opacity: 1 } }
@keyframes tt-sheen { 0% { background-position: 180% 0 } 45%, 100% { background-position: -120% 0 } }

.tt-anim-drift { animation: tt-drift 26s linear infinite alternate; }
.tt-anim-float { animation: tt-float 6s var(--ease) infinite; }
.tt-anim-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tt-draw-loop 6s var(--ease) infinite; }
.tt-anim-draw-once { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tt-draw 1.1s var(--ease) forwards; }

@media (prefers-reduced-motion: reduce) {
  .tt-anim-drift, .tt-anim-float, .tt-anim-draw, .tt-anim-draw-once { animation: none !important; stroke-dashoffset: 0 !important; }
}

/* ===== tokens/states.css ===== */
/* Non-color state affordances (checklist 08: "selected rows and active filters
   have a visible state beyond color alone"). Color still carries the tone;
   shape and weight carry the state. */

/* selected table row: inset primary bar on the leading cell + heavier first cell */
.lb tbody tr.sel > td:first-child { box-shadow: inset 3px 0 0 hsl(var(--primary)); font-weight: 600; }
@media (max-width: 720px) { .lb.tt-stack tbody tr.sel > td:first-child { box-shadow: inset 0 3px 0 hsl(var(--primary)); } }

/* active segment in a segmented toggle: underline + heavier label */
.tt-seg-on { box-shadow: inset 0 -2px 0 hsl(var(--primary)); font-weight: 700 !important; }

/* selected filter tile / stat toggle: leading bar */
.tt-tile-on { box-shadow: inset 3px 0 0 hsl(var(--primary)), 0 0 0 3px hsl(var(--ring) / .18); }

/* disabled: reduced opacity plus a not-allowed cursor and no hover lift */
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; filter: none !important; transform: none !important; }

/* ===== styles.css ===== */














/* ===== Marketing page keyframes (were inline in each page's <style>) ===== */
@keyframes ttHue{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes ttSpin{to{rotate:360deg}}
@keyframes ttFlow{0%{left:0%;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:100%;opacity:0}}
@keyframes ttWord{from{opacity:0;translate:0 10px}to{opacity:1;translate:none}}
@keyframes ttRise{from{scale:1 .08;opacity:.3}to{scale:1 1;opacity:1}}
@keyframes ttTwinkle{0%,100%{opacity:0;scale:.4}50%{opacity:1;scale:1}}
@keyframes ttTrail{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* ===== Page resets (dark default) ===== */
html{color-scheme:dark;}
body{margin:0;background:hsl(var(--background));color:hsl(var(--foreground));font-family:var(--font-sans);font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased;}
a{color:hsl(var(--primary));text-decoration:none;}
a:hover{filter:brightness(1.15);}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}