/* * Executor's design tokens, as Tailwind theme SOURCE. * * Split out of `globals.css` because this file has two consumers: * *  1. The shell's own build, which `@import`s it and compiles it ahead of time. *  2. The sandboxed inner frame, which embeds it VERBATIM in a *     `<style type="text/tailwindcss">` so the in-frame Tailwind compiler can *     generate whatever utilities the model's code actually uses, against these *     tokens. Without the theme source there, `text-muted-foreground` compiles *     to nothing and `md:grid-cols-4` never exists — see `buildRendererSrcDoc`. * * It therefore contains ONLY tokens and variants: no `@font-face` (whose * `url()` must be build-resolved into a `data:` URL), no `@source`, and no * component CSS. Anything with a build-time dependency stays in `globals.css`. * * The semantic values are copied from `packages/react/src/styles/globals.css` * and pinned against it by `theme-tokens.pin.test.ts`. */ @custom-variant dark (&:is(.dark *)); @theme inline {  /* Geist sets UI and prose; Geist Mono sets code, slugs, IDs, counts and     section labels. The faces themselves are declared in `globals.css`, which     is where the build can inline them. */  --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;  --font-display: "Geist", ui-sans-serif, system-ui, sans-serif;   --color-background: var(--background);  --color-foreground: var(--foreground);  --color-card: var(--card);  --color-card-foreground: var(--card-foreground);  --color-primary: var(--primary);  --color-primary-foreground: var(--primary-foreground);  --color-secondary: var(--secondary);  --color-secondary-foreground: var(--secondary-foreground);  --color-muted: var(--muted);  --color-muted-foreground: var(--muted-foreground);  --color-accent: var(--accent);  --color-accent-foreground: var(--accent-foreground);  --color-destructive: var(--destructive);  --color-popover: var(--popover);  --color-popover-foreground: var(--popover-foreground);  --color-border: var(--border);  --color-input: var(--input);  --color-ring: var(--ring);   --color-chart-1: var(--chart-1);  --color-chart-2: var(--chart-2);  --color-chart-3: var(--chart-3);  --color-chart-4: var(--chart-4);  --color-chart-5: var(--chart-5);  --color-chart-6: var(--chart-6);  --color-chart-7: var(--chart-7);  --color-chart-8: var(--chart-8);   --color-positive: var(--positive);  --color-caution: var(--caution);  --color-negative: var(--negative);   --radius-sm: calc(var(--radius) * 0.6);  --radius-md: calc(var(--radius) * 0.8);  --radius-lg: var(--radius);  --radius-xl: calc(var(--radius) * 1.4);} /* Light theme.   Grayscale, registry-grade minimal: white surfaces, a near-neutral gray ramp,   hairline borders, and color held back to one role (destructive). Hierarchy   comes from tone and borders, not hue. */:root {  color-scheme: light dark;  --radius: 0.5rem;   --background: #ffffff;  --foreground: #111111;  --card: #ffffff;  --card-foreground: #111111;  --popover: #ffffff;  --popover-foreground: #111111;  --primary: #0a0a0a;  --primary-foreground: #ffffff;  --secondary: #fafafa;  --secondary-foreground: #0a0a0a;  --muted: #fafafa;  --muted-foreground: #666666;  --accent: #f5f5f5;  --accent-foreground: #0a0a0a;  --destructive: #b4261a;  --border: #eaeaea;  --input: #d4d4d4;  --ring: #888888;   /* Data-visualization palette.      The one place the system admits hue, because a chart with four grayscale     series is unreadable. It is held to the same restraint as everything else:     desaturated, mid-tone, no neon, and NOT a rainbow. Every entry is muted     enough to sit under `foreground` text on a white card without pulling the     eye off the numbers.      Ordered. Slot 1 is the near-neutral slate a single-series chart gets, so     the common case stays grayscale; hue only appears once a second series     needs distinguishing. Color follows the entity, never its rank — slot 3 is     "the third series in this chart", not "the third-biggest value". */  --chart-1: #545454; /* slate — the default single series */  --chart-2: #3d6ea8; /* muted blue */  --chart-3: #9a6b3f; /* clay */  --chart-4: #4a7f70; /* muted teal */  --chart-5: #7b6099; /* muted violet */  --chart-6: #a8654f; /* terracotta */  --chart-7: #5b7a4a; /* moss */  --chart-8: #8e5f78; /* mauve */   /* Status. Reserved, never used as series colors: a chart that spends its     palette on these loses the ability to say "this one is bad". Always paired     with a word or an icon — never color alone. `negative` is `destructive`. */  --positive: #2f7d52;  --caution: #9a6b1f;  --negative: #b4261a;} /* Dark theme.   The gray ramp inverts: near-black surfaces, a white primary, hairlines at low   contrast. Depth comes from a one-step-lighter surface, not a heavier shadow.   The chart palette lightens rather than saturating — the same hues, raised to   clear a near-black background. */@media (prefers-color-scheme: dark) {  :root {    --background: #0a0a0a;    --foreground: #ededed;    --card: #0f0f0f;    --card-foreground: #ededed;    --popover: #141414;    --popover-foreground: #ededed;    --primary: #ffffff;    --primary-foreground: #0a0a0a;    --secondary: #141414;    --secondary-foreground: #ededed;    --muted: #141414;    --muted-foreground: #9a9a9a;    --accent: #1a1a1a;    --accent-foreground: #ededed;    --destructive: #e0726a;    --border: #1f1f1f;    --input: #333333;    --ring: #777777;     --chart-1: #a1a1a1;    --chart-2: #7a9cc9;    --chart-3: #c99a6b;    --chart-4: #6fb0a0;    --chart-5: #a892c6;    --chart-6: #d1917b;    --chart-7: #8dab78;    --chart-8: #bd8fa8;     --positive: #5cb185;    --caution: #c9a04a;    --negative: #e0726a;  }} .dark {  --background: #0a0a0a;  --foreground: #ededed;  --card: #0f0f0f;  --card-foreground: #ededed;  --popover: #141414;  --popover-foreground: #ededed;  --primary: #ffffff;  --primary-foreground: #0a0a0a;  --secondary: #141414;  --secondary-foreground: #ededed;  --muted: #141414;  --muted-foreground: #9a9a9a;  --accent: #1a1a1a;  --accent-foreground: #ededed;  --destructive: #e0726a;  --border: #1f1f1f;  --input: #333333;  --ring: #777777;   --chart-1: #a1a1a1;  --chart-2: #7a9cc9;  --chart-3: #c99a6b;  --chart-4: #6fb0a0;  --chart-5: #a892c6;  --chart-6: #d1917b;  --chart-7: #8dab78;  --chart-8: #bd8fa8;   --positive: #5cb185;  --caution: #c9a04a;  --negative: #e0726a;} @layer base {  * {    @apply border-border;  }   html,  body,  #root {    min-height: 100%;    margin: 0;    padding: 0;  }   /* Fill mode: the document is exactly its frame, not at least its frame.      `min-height: 100%` above is the inline contract — grow with the content and     let the host size the frame around it. It is also, precisely, why an     artifact's own `h-full` used to do nothing: a percentage height resolves     against a parent's DEFINITE height, and `min-height` never makes one. Every     link in the chain was `auto`, so `h-full` collapsed to `h-auto` and there     was no bounded region for `flex-1 min-h-0 overflow-auto` to scroll inside.      Switching to a definite `height: 100%` here is what turns the host's     measured viewport into a real constraint the whole way down: frame ->     document -> body -> #root -> the artifact's root element. `min-height: 0`     goes with it so the floor cannot re-inflate the box past its frame.      This file is loaded by BOTH documents — compiled into the shell's own     stylesheet and shipped as raw source to the inner srcdoc frame — so one rule     covers both halves of the chain. It is class-scoped rather than     unconditional because inline mode genuinely needs the opposite: there, body     must be content-height, since that is the number the inner frame's     ResizeObserver reports and the host sizes the frame from. */  html.artifact-fill,  html.artifact-fill body,  html.artifact-fill #root {    height: 100%;    min-height: 0;  }   body {    @apply bg-background font-sans text-foreground antialiased;  }   /* Numbers do not jitter. Every count, metric, axis tick and table figure in     an artifact is a number in a column that updates, so tabular figures are     the default rather than something the model has to remember to ask for. */  body {    font-variant-numeric: tabular-nums;  }   .proportional-nums {    font-variant-numeric: normal;  }   ::-webkit-scrollbar {    width: 6px;    height: 6px;  }  ::-webkit-scrollbar-track {    background: transparent;  }  ::-webkit-scrollbar-thumb {    background: var(--input);    border-radius: 3px;  }  ::-webkit-scrollbar-thumb:hover {    background: var(--ring);  }} /* The artifact container.    The shell owns the artifact's outer padding and measure. Model-written code   that also sets a page-level `p-6` doubles it; code that sets none renders   flush to the frame edge. Neither is the model's problem to solve, so the   answer is not a prompt rule but a container that is always right — the skill   documents it so the model knows not to add its own.    `max-width` keeps a table or a metric row from stretching to a 2000px   viewport, where rows become unreadable ribbons. Content that genuinely wants   the full width opts out with `w-full` on a child. */.artifact-root {  padding: 24px;  max-width: 1100px;  margin-inline: auto;} @media (max-width: 640px) {  .artifact-root {    padding: 16px;  }} /* Fill mode: the artifact container is the viewport, and its child fills it.    `height: 100%` completes the chain from the host's measured container down to   the model's own root element. `display: flex` with a single stretched child is   what makes `h-full` usable INSIDE the artifact — a percentage-height child of   a plain block box resolves against the box's content height, which is circular,   whereas a flex item stretches to the line. So an artifact written as   `<div className="flex h-full flex-col">` gets a real bounded column, and its   `flex-1 min-h-0 overflow-auto` region becomes a genuine scroll box.    `box-sizing: border-box` keeps the 24px padding inside the 100%, rather than   pushing the container 48px past its frame and reintroducing the outer   scrollbar this whole mode exists to remove. */html.artifact-fill .artifact-root {  height: 100%;  box-sizing: border-box;  display: flex;  flex-direction: column;} html.artifact-fill .artifact-root > * {  min-height: 0;  flex: 1;}