/* Source utility rules scoped to the editable reference. No application-wide reset. */
@font-face {
  font-family: "Reference DejaVu Sans";
  src: url("/assets/DejaVuSans-uCh15Ap1.ttf") format("truetype");
  font-weight: 400 500;
  font-style: normal;
  font-display: block;
}
.reference-frame {
  position: relative;
  width: 1424px;
  height: 939px;
  overflow: hidden;
  isolation: isolate;
  font-family: "Reference DejaVu Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  font-synthesis-weight: none;
  line-height: 1.75;
  letter-spacing: -0.16px;
  text-align: start;
  color: #fff;
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
  --spacing: .25rem;
  --color-black: #000;
  --color-white: #fff;
  --color-gray-900: #ededed;
  --color-text: #dcdcdc;
  --font-weight-medium: 500;
  --radius-full: 9999px;
  --scrollbar-color: color-mix(in oklab, #fff 30%, transparent);
  --docs-scroll-offset: 158px;
}
.reference-frame *, .reference-frame *::before, .reference-frame *::after {
  --tw-border-style: solid;
  --tw-inset-shadow: 0 0 #0000;
  --tw-inset-ring-shadow: 0 0 #0000;
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
}
.reference-frame .reference-figure {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1400px;
  max-width: none;
}

.reference-frame *,
.reference-frame ::after,
.reference-frame ::before,
.reference-frame ::backdrop { box-sizing: border-box; border: 0px solid; margin: 0px; padding: 0px; }
.reference-frame h1,
.reference-frame h2,
.reference-frame h3,
.reference-frame h4,
.reference-frame h5,
.reference-frame h6 { font-size: inherit; font-weight: inherit; }
.reference-frame ol,
.reference-frame ul,
.reference-frame menu { list-style: none; }
.reference-frame img,
.reference-frame svg,
.reference-frame video,
.reference-frame canvas,
.reference-frame audio,
.reference-frame iframe,
.reference-frame embed,
.reference-frame object { vertical-align: middle; display: block; }
.reference-frame img,
.reference-frame video { max-width: 100%; height: auto; }
.reference-frame img,
.reference-frame svg { flex-grow: 0; flex-shrink: 0; }
.reference-frame * { scrollbar-color: var(--scrollbar-color)transparent; scrollbar-width: thin; }
.reference-frame h1,
.reference-frame h2,
.reference-frame h3,
.reference-frame h4,
.reference-frame h5,
.reference-frame h6,
.reference-frame .heading-5xl,
.reference-frame .heading-4xl,
.reference-frame .heading-3xl,
.reference-frame .heading-2xl,
.reference-frame .heading-xl,
.reference-frame .heading-lg,
.reference-frame .heading-md,
.reference-frame .heading-sm,
.reference-frame .heading-xs { color: var(--color-gray-900); }
.reference-frame :is(h1, h2, h3, h4, h5, h6, .heading-5xl, .heading-4xl, .heading-3xl, .heading-2xl, .heading-xl, .heading-lg, .heading-md, .heading-sm, .heading-xs):where([data-theme="dark"], [data-theme="dark"] *) { color: var(--color-text); }
.reference-frame .absolute { position: absolute; }
.reference-frame .relative { position: relative; }
.reference-frame .top-\[6\.6\%\] { top: 6.6%; }
.reference-frame .top-\[37\.1\%\] { top: 37.1%; }
.reference-frame .left-\[12\.6\%\] { left: 12.6%; }
.reference-frame .left-\[12\.9\%\] { left: 12.9%; }
.reference-frame .isolate { isolation: isolate; }
.reference-frame .m-0 { margin: calc(var(--spacing)*0); }
.reference-frame .mx-\[0\.12cqw\] { margin-inline: 0.12cqw; }
.reference-frame .mt-\[0\.12cqw\] { margin-top: 0.12cqw; }
.reference-frame .mt-\[0\.58cqw\] { margin-top: 0.58cqw; }
.reference-frame .mt-\[1\.2cqw\] { margin-top: 1.2cqw; }
.reference-frame .mt-\[1\.35cqw\] { margin-top: 1.35cqw; }
.reference-frame .mt-\[1\.45cqw\] { margin-top: 1.45cqw; }
.reference-frame .mt-auto { margin-top: auto; }
.reference-frame .mb-\[0\.22cqw\] { margin-bottom: 0.22cqw; }
.reference-frame .mb-\[0\.36cqw\] { margin-bottom: 0.36cqw; }
.reference-frame .ml-\[0\.34cqw\] { margin-left: 0.34cqw; }
.reference-frame .ml-\[0\.42cqw\] { margin-left: 0.42cqw; }
.reference-frame .block { display: block; }
.reference-frame .flex { display: flex; }
.reference-frame .size-\[0\.5cqw\] { width: 0.5cqw; height: 0.5cqw; }
.reference-frame .size-\[0\.55cqw\] { width: 0.55cqw; height: 0.55cqw; }
.reference-frame .size-\[0\.65cqw\] { width: 0.65cqw; height: 0.65cqw; }
.reference-frame .size-\[0\.73cqw\] { width: 0.73cqw; height: 0.73cqw; }
.reference-frame .size-\[0\.78cqw\] { width: 0.78cqw; height: 0.78cqw; }
.reference-frame .size-\[0\.79cqw\] { width: 0.79cqw; height: 0.79cqw; }
.reference-frame .size-\[0\.82cqw\] { width: 0.82cqw; height: 0.82cqw; }
.reference-frame .size-\[0\.85cqw\] { width: 0.85cqw; height: 0.85cqw; }
.reference-frame .size-\[0\.89cqw\] { width: 0.89cqw; height: 0.89cqw; }
.reference-frame .size-\[0\.92cqw\] { width: 0.92cqw; height: 0.92cqw; }
.reference-frame .size-\[0\.94cqw\] { width: 0.94cqw; height: 0.94cqw; }
.reference-frame .size-\[0\.95cqw\] { width: 0.95cqw; height: 0.95cqw; }
.reference-frame .size-\[1\.05cqw\] { width: 1.05cqw; height: 1.05cqw; }
.reference-frame .size-\[1\.58cqw\] { width: 1.58cqw; height: 1.58cqw; }
.reference-frame .size-\[1cqw\] { width: 1cqw; height: 1cqw; }
.reference-frame .size-full { width: 100%; height: 100%; }
.reference-frame .h-\[0\.92cqw\] { height: 0.92cqw; }
.reference-frame .h-\[1\.5cqw\] { height: 1.5cqw; }
.reference-frame .h-\[1\.74cqw\] { height: 1.74cqw; }
.reference-frame .h-\[4\.1cqw\] { height: 4.1cqw; }
.reference-frame .h-\[86\.8\%\] { height: 86.8%; }
.reference-frame .h-full { height: 100%; }
.reference-frame .min-h-0 { min-height: calc(var(--spacing)*0); }
.reference-frame .w-\[23\%\] { width: 23%; }
.reference-frame .w-\[72\%\] { width: 72%; }
.reference-frame .w-\[74\.1\%\] { width: 74.1%; }
.reference-frame .w-full { width: 100%; }
.reference-frame .w-px { width: 1px; }
.reference-frame .min-w-0 { min-width: calc(var(--spacing)*0); }
.reference-frame .flex-1 { flex: 1 1 0%; }
.reference-frame .shrink-0 { flex-shrink: 0; }
.reference-frame .list-none { list-style-type: none; }
.reference-frame .flex-col { flex-direction: column; }
.reference-frame .items-center { align-items: center; }
.reference-frame .justify-between { justify-content: space-between; }
.reference-frame .justify-center { justify-content: center; }
.reference-frame .gap-\[0\.6cqw\] { gap: 0.6cqw; }
.reference-frame .gap-\[0\.42cqw\] { gap: 0.42cqw; }
.reference-frame .gap-\[0\.45cqw\] { gap: 0.45cqw; }
.reference-frame .gap-\[0\.56cqw\] { gap: 0.56cqw; }
.reference-frame .gap-\[0\.62cqw\] { gap: 0.62cqw; }
.reference-frame .gap-\[0\.63cqw\] { gap: 0.63cqw; }
.reference-frame .gap-\[0\.64cqw\] { gap: 0.64cqw; }
.reference-frame .gap-\[0\.68cqw\] { gap: 0.68cqw; }
.reference-frame .gap-\[0\.72cqw\] { gap: 0.72cqw; }
.reference-frame .gap-\[1cqw\] { gap: 1cqw; }
.reference-frame :where(.space-y-\[1\.12cqw\] > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(1.12cqw*var(--tw-space-y-reverse)); margin-block-end: calc(1.12cqw*calc(1 - var(--tw-space-y-reverse))); }
.reference-frame .truncate { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.reference-frame .overflow-hidden { overflow: hidden; }
.reference-frame .rounded-\[0\.6cqw\] { border-radius: 0.6cqw; }
.reference-frame .rounded-\[0\.58cqw\] { border-radius: 0.58cqw; }
.reference-frame .rounded-\[0\.65cqw\] { border-radius: 0.65cqw; }
.reference-frame .rounded-\[1\.1cqw\] { border-radius: 1.1cqw; }
.reference-frame .rounded-\[1\.2cqw\] { border-radius: 1.2cqw; }
.reference-frame .rounded-\[1cqw\] { border-radius: 1cqw; }
.reference-frame .rounded-full { border-radius: var(--radius-full); }
.reference-frame .border { border-style: var(--tw-border-style); border-width: 1px; }
.reference-frame .border-r { border-right-style: var(--tw-border-style); border-right-width: 1px; }
.reference-frame .border-b { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; }
.reference-frame .border-black\/\[0\.07\] { border-color: var(--color-black); }
.reference-frame .border-black\/\[0\.07\] { border-color: color-mix(in oklab,var(--color-black)7%,transparent); }
.reference-frame .border-black\/\[0\.08\] { border-color: var(--color-black); }
.reference-frame .border-black\/\[0\.08\] { border-color: color-mix(in oklab,var(--color-black)8%,transparent); }
.reference-frame .border-black\/\[0\.055\] { border-color: var(--color-black); }
.reference-frame .border-black\/\[0\.055\] { border-color: color-mix(in oklab,var(--color-black)5.5%,transparent); }
.reference-frame .border-black\/\[0\.065\] { border-color: var(--color-black); }
.reference-frame .border-black\/\[0\.065\] { border-color: color-mix(in oklab,var(--color-black)6.5%,transparent); }
.reference-frame .border-black\/\[0\.075\] { border-color: var(--color-black); }
.reference-frame .border-black\/\[0\.075\] { border-color: color-mix(in oklab,var(--color-black)7.5%,transparent); }
.reference-frame .bg-\[\#949494\] { background-color: rgb(148, 148, 148); }
.reference-frame .bg-\[\#bec8d5\] { background-color: rgb(190, 200, 213); }
.reference-frame .bg-\[\#eaf0f9\]\/90 { background-color: rgba(234, 240, 249, 0.9); }
.reference-frame .bg-\[\#f3f3f3\] { background-color: rgb(243, 243, 243); }
.reference-frame .bg-black\/\[0\.09\] { background-color: var(--color-black); }
.reference-frame .bg-black\/\[0\.09\] { background-color: color-mix(in oklab,var(--color-black)9%,transparent); }
.reference-frame .bg-transparent { background-color: rgba(0, 0, 0, 0); }
.reference-frame .bg-white,
.reference-frame .bg-white\/12 { background-color: var(--color-white); }
.reference-frame .bg-\[linear-gradient\(180deg\,\#dae7f7_0\%\,\#eff1f7_48\%\,\#dae2f7_100\%\)\] { background-image: linear-gradient(rgb(218, 231, 247), rgb(239, 241, 247) 48%, rgb(218, 226, 247)); }
.reference-frame .p-0 { padding: calc(var(--spacing)*0); }
.reference-frame .p-\[0\.35cqw\] { padding: 0.35cqw; }
.reference-frame .px-\[0\.4cqw\] { padding-inline: 0.4cqw; }
.reference-frame .px-\[0\.32cqw\] { padding-inline: 0.32cqw; }
.reference-frame .px-\[0\.35cqw\] { padding-inline: 0.35cqw; }
.reference-frame .px-\[0\.56cqw\] { padding-inline: 0.56cqw; }
.reference-frame .px-\[0\.65cqw\] { padding-inline: 0.65cqw; }
.reference-frame .px-\[0\.88cqw\] { padding-inline: 0.88cqw; }
.reference-frame .px-\[1\.02cqw\] { padding-inline: 1.02cqw; }
.reference-frame .px-\[1\.2cqw\] { padding-inline: 1.2cqw; }
.reference-frame .px-\[1cqw\] { padding-inline: 1cqw; }
.reference-frame .py-\[0\.4cqw\] { padding-block: 0.4cqw; }
.reference-frame .py-\[0\.9cqw\] { padding-block: 0.9cqw; }
.reference-frame .py-\[0\.42cqw\] { padding-block: 0.42cqw; }
.reference-frame .py-\[0\.58cqw\] { padding-block: 0.58cqw; }
.reference-frame .py-\[0\.78cqw\] { padding-block: 0.78cqw; }
.reference-frame .pt-\[0\.82cqw\] { padding-top: 0.82cqw; }
.reference-frame .pt-\[1cqw\] { padding-top: 1cqw; }
.reference-frame .pb-\[0\.75cqw\] { padding-bottom: 0.75cqw; }
.reference-frame .text-center { text-align: center; }
.reference-frame .font-\[-apple-system\,BlinkMacSystemFont\,Segoe_UI\,sans-serif\] { font-family: "Reference DejaVu Sans", sans-serif; }
.reference-frame .text-\[0\.67cqw\] { font-size: 0.67cqw; }
.reference-frame .text-\[0\.73cqw\] { font-size: 0.73cqw; }
.reference-frame .text-\[0\.76cqw\] { font-size: 0.76cqw; }
.reference-frame .text-\[0\.85em\] { font-size: 0.85em; }
.reference-frame .text-\[1\.52cqw\] { font-size: 1.52cqw; }
.reference-frame .leading-\[1\.2\] { --tw-leading: 1.2; line-height: 1.2; }
.reference-frame .leading-\[1\.22\] { --tw-leading: 1.22; line-height: 1.22; }
.reference-frame .font-medium { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); }
.reference-frame .tracking-\[-0\.04em\] { --tw-tracking: -.04em; letter-spacing: -0.04em; }
.reference-frame .whitespace-nowrap { white-space: nowrap; }
.reference-frame .text-\[\#8b8b8b\] { color: rgb(139, 139, 139); }
.reference-frame .text-\[\#48a04d\] { color: rgb(72, 160, 77); }
.reference-frame .text-\[\#777\] { color: rgb(119, 119, 119); }
.reference-frame .text-\[\#999\] { color: rgb(153, 153, 153); }
.reference-frame .text-\[\#91949a\] { color: rgb(145, 148, 154); }
.reference-frame .text-\[\#202020\] { color: rgb(32, 32, 32); }
.reference-frame .text-\[\#575757\] { color: rgb(87, 87, 87); }
.reference-frame .text-\[\#606060\] { color: rgb(96, 96, 96); }
.reference-frame .text-\[\#767676\] { color: rgb(118, 118, 118); }
.reference-frame .text-\[\#858585\] { color: rgb(133, 133, 133); }
.reference-frame .text-\[\#ce4035\] { color: rgb(206, 64, 53); }
.reference-frame .opacity-35 { opacity: 0.35; }
.reference-frame .opacity-55 { opacity: 0.55; }
.reference-frame .opacity-60 { opacity: 0.6; }
.reference-frame .opacity-65 { opacity: 0.65; }
.reference-frame .opacity-70 { opacity: 0.7; }
.reference-frame .opacity-75 { opacity: 0.75; }
.reference-frame .opacity-80 { opacity: 0.8; }
.reference-frame .shadow-\[0_1\.4cqw_3\.4cqw_rgba\(29\,23\,70\,0\.2\)\] { --tw-shadow: 0 1.4cqw 3.4cqw var(--tw-shadow-color,#1d174633); box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow); }
.reference-frame .invert { --tw-invert: invert(100%); filter: var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,); }
.reference-frame .last\:border-0:last-child { border-style: var(--tw-border-style); border-width: 0px; }
.reference-frame .dark\:border-white\/\[0\.09\]:where([data-theme="dark"], [data-theme="dark"] *) { border-color: var(--color-white); }
.reference-frame .dark\:border-white\/\[0\.09\]:where([data-theme="dark"], [data-theme="dark"] *) { border-color: color-mix(in oklab,var(--color-white)9%,transparent); }
.reference-frame .dark\:border-white\/\[0\.12\]:where([data-theme="dark"], [data-theme="dark"] *) { border-color: var(--color-white); }
.reference-frame .dark\:border-white\/\[0\.12\]:where([data-theme="dark"], [data-theme="dark"] *) { border-color: color-mix(in oklab,var(--color-white)12%,transparent); }
.reference-frame .dark\:border-white\/\[0\.085\]:where([data-theme="dark"], [data-theme="dark"] *) { border-color: var(--color-white); }
.reference-frame .dark\:border-white\/\[0\.085\]:where([data-theme="dark"], [data-theme="dark"] *) { border-color: color-mix(in oklab,var(--color-white)8.5%,transparent); }
.reference-frame .dark\:\!bg-\[\#111111\]:where([data-theme="dark"], [data-theme="dark"] *) { background-color: rgb(17, 17, 17) !important; }
.reference-frame .dark\:bg-\[\#111111\]:where([data-theme="dark"], [data-theme="dark"] *) { background-color: rgb(17, 17, 17); }
.reference-frame .dark\:bg-\[\#242424\]:where([data-theme="dark"], [data-theme="dark"] *) { background-color: rgb(36, 36, 36); }
.reference-frame .dark\:bg-\[\#292929\]:where([data-theme="dark"], [data-theme="dark"] *) { background-color: rgb(41, 41, 41); }
.reference-frame .dark\:bg-\[\#373944\]:where([data-theme="dark"], [data-theme="dark"] *) { background-color: rgb(55, 57, 68); }
.reference-frame .dark\:bg-white\/\[0\.11\]:where([data-theme="dark"], [data-theme="dark"] *) { background-color: var(--color-white); }
.reference-frame .dark\:bg-white\/\[0\.11\]:where([data-theme="dark"], [data-theme="dark"] *) { background-color: color-mix(in oklab,var(--color-white)11%,transparent); }
.reference-frame .dark\:bg-\[linear-gradient\(180deg\,\#222e44_0\%\,\#363944_48\%\,\#222944_100\%\)\]:where([data-theme="dark"], [data-theme="dark"] *) { background-image: linear-gradient(rgb(34, 46, 68), rgb(54, 57, 68) 48%, rgb(34, 41, 68)); }
.reference-frame .dark\:text-\[\#8f8f8f\]:where([data-theme="dark"], [data-theme="dark"] *) { color: rgb(143, 143, 143); }
.reference-frame .dark\:text-\[\#aaa\]:where([data-theme="dark"], [data-theme="dark"] *),
.reference-frame .dark\:text-\[\#aaaaaa\]:where([data-theme="dark"], [data-theme="dark"] *) { color: rgb(170, 170, 170); }
.reference-frame .dark\:text-\[\#b8b8b8\]:where([data-theme="dark"], [data-theme="dark"] *) { color: rgb(184, 184, 184); }
.reference-frame .dark\:text-\[\#bdbdbd\]:where([data-theme="dark"], [data-theme="dark"] *) { color: rgb(189, 189, 189); }
.reference-frame .dark\:text-\[\#ededed\]:where([data-theme="dark"], [data-theme="dark"] *) { color: rgb(237, 237, 237); }
.reference-frame .dark\:invert:where([data-theme="dark"], [data-theme="dark"] *) { --tw-invert: invert(100%); filter: var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,); }
.reference-frame [data-documentation-canvas-stage="true"] { --documentation-canvas-width: var(--documentation-light-canvas-width); --documentation-canvas-aspect-ratio: var(--documentation-light-canvas-aspect-ratio); width: 100%; aspect-ratio: var(--documentation-canvas-aspect-ratio); position: relative; overflow: hidden; container-type: inline-size; }
.reference-frame [data-theme="dark"] [data-documentation-canvas-stage="true"] { --documentation-canvas-width: var(--documentation-dark-canvas-width,var(--documentation-light-canvas-width)); --documentation-canvas-aspect-ratio: var(--documentation-dark-canvas-aspect-ratio,var(--documentation-light-canvas-aspect-ratio)); }
.reference-frame [data-documentation-canvas="true"] { width: var(--documentation-canvas-width); aspect-ratio: var(--documentation-canvas-aspect-ratio); transform-origin: 0px 0px; transform: scale(tan(atan2(100cqw,var(--documentation-canvas-width)))); position: absolute; top: 0px; left: 0px; container-type: inline-size; }
.reference-frame [data-documentation-canvas="true"] { transform: scale(calc(100cqw/var(--documentation-canvas-width))); }
.reference-frame main { background-color: var(--color-white); flex-direction: column; flex: 1 1 0%; display: flex; }
.reference-frame main:where([data-theme="dark"], [data-theme="dark"] *) { background-color: var(--color-black); }
.reference-frame .prose-content h2,
.reference-frame .prose-content h3,
.reference-frame .prose-content h4,
.reference-frame .prose-content h5,
.reference-frame .prose-content h6 { scroll-margin-top: var(--docs-scroll-offset); }

.reference-frame.reference-sidebar-hidden [data-node="1"] { display: none; }
.reference-frame button, .reference-frame input, .reference-frame textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

/* The source figure was expanded to 1920px before its window was captured. */
.reference-frame .reference-figure {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1400px;
  max-width: none;
  transform: translate3d(-247px, -71px, 0);
}
* {
  box-sizing: border-box;
}
html,
body,
#root {
  width: 100%;
  height: 100%;
  margin: 0;
}
body {
  background: #111;
}
/* The reference component owns the native shell. These styles only supply
   browser interactions and states beyond the captured home screen. */
.codex-app {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: #ededed;
  font-family: "Reference DejaVu Sans", "DejaVu Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
}
.codex-app button,
.codex-app input,
.codex-app textarea {
  font: inherit;
}
.codex-app button {
  color: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}
.codex-app button:disabled {
  cursor: default;
}
.codex-app button:focus-visible,
.codex-app input:focus-visible,
.codex-app textarea:focus-visible {
  outline: 2px solid #91b7ed;
  outline-offset: 3px;
}
.codex-app button:hover:not(:disabled) {
  background-color: #ffffff09;
}
.codex-app svg {
  flex-shrink: 0;
}
.codex-app .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.codex-app .icon-button {
  display: inline-flex;
  width: 28px;
  height: 28px;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  flex-shrink: 0;
}
.codex-app .add-text {
  color: #47b45a;
}
.codex-app .remove-text {
  color: #e14e41;
}
.codex-app .workspace {
  flex: 1;
  min-height: 0;
  display: flex;
}
.codex-app .conversation-area {
  min-width: 0;
  flex: 1;
  position: relative;
}
.codex-app .menu-wrap {
  position: relative;
  min-width: 0;
}
.codex-app .popover {
  position: absolute;
  z-index: 30;
  bottom: calc(100% + 10px);
  left: 0;
  min-width: 220px;
  padding: 6px;
  background: #252525;
  border: 1px solid #414141;
  border-radius: 12px;
  box-shadow: 0 12px 40px #0009;
}
.codex-app .popover-label {
  padding: 7px 10px 8px;
  color: #949494;
  font-size: 12px;
}
.codex-app .popover button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  text-align: left;
  border-radius: 6px;
  white-space: nowrap;
  font-size: 14px;
}
.codex-app .popover button:hover {
  background: #373737;
}
.codex-app .model-menu .popover,
.codex-app .effort-menu .popover {
  left: auto;
  right: 0;
}
.codex-app .editor-menu .popover {
  bottom: auto;
  top: calc(100% + 10px);
  left: auto;
  right: 0;
}
.codex-app .attachments {
  display: flex;
  gap: 6px;
  margin: 0 0 4px;
}
.codex-app .attachments button {
  display: flex;
  align-items: center;
  gap: 5px;
  border-radius: 4px;
  background: #383838;
  padding: 3px 5px;
  font-size: 11px;
}
.codex-app .conversation {
  height: 100%;
  display: flex;
  flex-direction: column;
  max-width: 836px;
  margin: 0 auto;
  padding: 18px 24px 0;
}
.codex-app .conversation-scroll {
  flex: 1;
  overflow: auto;
  min-height: 0;
  padding: 15px 0 24px;
  scrollbar-width: thin;
}
.codex-app .user-message {
  max-width: 85%;
  margin-left: auto;
  padding: 15px 20px;
  background: #292929;
  border-radius: 20px;
  font-size: 15px;
  line-height: 24px;
  white-space: pre-wrap;
}
.codex-app .assistant-message {
  padding: 32px 0 0;
  font-size: 15px;
  line-height: 25px;
}
.codex-app .assistant-label {
  display: flex;
  align-items: center;
  gap: 10px;
}
.codex-app .codex-logo {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  filter: invert(1);
}
.codex-app .assistant-label strong {
  font-size: 15px;
  font-weight: 500;
}
.codex-app .assistant-label > span {
  color: #888;
  font-size: 12px;
  margin-left: 6px;
}
.codex-app .assistant-message p {
  margin: 17px 0;
  color: #d4d4d4;
}
.codex-app .thinking-label {
  color: #989898 !important;
}
.codex-app .tool-activity {
  margin: 23px 0;
  border-left: 1px solid #353535;
  padding-left: 16px;
  color: #aaa;
}
.codex-app .tool-activity > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 35px;
  font-size: 13px;
}
.codex-app .tool-activity code {
  color: #808080;
  font-size: 12px;
  margin-left: 5px;
}
.codex-app .result-files {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #353535;
  padding: 14px;
  border-radius: 12px;
  font-size: 13px;
}
.codex-app .result-files > button {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.codex-app .verification {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 15px 0;
  font-size: 13px;
  color: #919f91;
}
.codex-app .assistant-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #888;
  font-size: 12px;
}
.codex-app .conversation-composer {
  flex-shrink: 0;
  padding-bottom: 8px;
}
.codex-app .local-note {
  color: #888;
  font-size: 11px;
  text-align: center;
  padding: 10px;
}
.codex-app .with-review .conversation {
  padding: 16px 24px 0;
}
.codex-app .with-review .composer-left .permissions-menu .text-button span {
  max-width: 90px;
}
.codex-app .with-review .composer-controls {
  flex-wrap: wrap;
}
.codex-app .with-review .composer {
  height: 144px;
}
.codex-app .with-review .composer-right {
  margin-left: auto;
}
.codex-app .with-review .composer-footer {
  gap: 4px;
}
.codex-app .with-review .composer-footer .text-button {
  gap: 4px;
  font-size: 12px;
}
.codex-app .with-review .composer-footer .text-button span {
  max-width: 120px;
}
.codex-app .diff-panel {
  width: 45%;
  min-width: 350px;
  max-width: 620px;
  flex-shrink: 0;
  border-left: 1px solid #303030;
  background: #151515;
  overflow: auto;
}
.codex-app .diff-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 20px 16px;
}
.codex-app .diff-heading > div {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.codex-app .diff-heading strong {
  font-size: 16px;
  font-weight: 500;
}
.codex-app .diff-heading span {
  color: #858585;
  font-size: 12px;
}
.codex-app .diff-summary {
  display: flex;
  gap: 10px;
  font-size: 12px;
  padding: 0 20px 20px;
}
.codex-app .diff-summary > span:last-child {
  color: #888;
  margin-left: auto;
}
.codex-app .diff-file {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 16px 15px;
  border-top: 1px solid #303030;
  border-bottom: 1px solid #303030;
  font-size: 12px;
}
.codex-app .diff-file > span:last-child {
  margin-left: auto;
}
.codex-app .diff-hunk {
  background: #18212b;
  color: #7d99b6;
  font:
    11px/32px "JetBrains Mono",
    monospace;
  padding-left: 16px;
}
.codex-app .diff-code {
  overflow: auto;
  padding: 8px 0;
}
.codex-app .diff-line {
  display: flex;
  white-space: pre;
  font:
    11px/26px "JetBrains Mono",
    monospace;
}
.codex-app .diff-line.add {
  background: #12291c;
  color: #b8d4be;
}
.codex-app .diff-line.remove {
  background: #321b1c;
  color: #d8aeae;
}
.codex-app .line-number {
  width: 33px;
  flex-shrink: 0;
  text-align: right;
  padding-right: 10px;
  color: #9b9f9b;
}
.codex-app .diff-sign {
  width: 19px;
  flex-shrink: 0;
}
.codex-app .diff-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px 16px;
  font-size: 11px;
  color: #8b968b;
}
.codex-app .modal-backdrop {
  position: absolute;
  z-index: 100;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0008;
  padding: 20px;
  backdrop-filter: blur(3px);
}
.codex-app .modal {
  width: min(560px, 100%);
  max-height: 85%;
  overflow: auto;
  padding: 22px;
  border: 1px solid #414141;
  border-radius: 18px;
  background: #202020;
  box-shadow: 0 20px 80px #000a;
}
.codex-app .modal-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 19px;
}
.codex-app .modal-heading h2 {
  font-size: 19px;
  font-weight: 500;
  margin: 0;
}
.codex-app .panel-muted {
  font-size: 13px;
  line-height: 21px;
  color: #aaa;
  margin: 0 0 20px;
}
.codex-app .search-input {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
  background: #171717;
  border: 1px solid #414141;
  border-radius: 9px;
  margin-bottom: 15px;
}
.codex-app .search-input input {
  background: transparent;
  border: 0;
  color: #eee;
  min-width: 0;
  flex: 1;
  outline: none;
}
.codex-app kbd {
  color: #999;
  font-size: 11px;
  white-space: nowrap;
  font-family: inherit;
}
.codex-app .search-results {
  max-height: 410px;
  overflow: auto;
}
.codex-app .search-results > button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 8px;
  width: 100%;
  text-align: left;
  border-radius: 6px;
}
.codex-app .search-results > button span {
  flex: 1;
}
.codex-app .search-results small {
  font-size: 11px;
  color: #999;
}
.codex-app .setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid #333;
}
.codex-app .setting-row > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.codex-app .setting-row strong {
  font-size: 14px;
  font-weight: 500;
}
.codex-app .setting-row span {
  font-size: 12px;
  color: #8c8c8c;
}
.codex-app .secondary-button {
  border: 1px solid #454545;
  padding: 8px 13px;
  border-radius: 7px;
  font-size: 13px;
}
.codex-app .primary-button {
  margin: 17px 0 2px;
  display: block;
  padding: 10px 16px;
  color: #161616;
  background: #ededed;
  border-radius: 8px;
  font-size: 13px;
}
.codex-app .primary-button:hover:not(:disabled) {
  background: #fff;
}
.codex-app .primary-button:disabled {
  opacity: 0.4;
}
.codex-app .field-label {
  display: block;
  font-size: 13px;
  color: #bbb;
  margin: 15px 0 9px;
}
.codex-app .field-input {
  display: block;
  width: 100%;
  border: 1px solid #454545;
  background: #171717;
  border-radius: 8px;
  color: #eee;
  padding: 12px;
}
.codex-app .switch {
  width: 35px;
  height: 21px;
  flex-shrink: 0;
  border-radius: 12px;
  background: #555;
  padding: 3px;
}
.codex-app .switch > span {
  display: block;
  width: 15px;
  height: 15px;
  background: #ddd;
  border-radius: 50%;
}
.codex-app .switch.on {
  background: #708cc0;
}
.codex-app .switch.on > span {
  margin-left: 14px;
}
.codex-app .shortcuts {
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: 13px;
  font-size: 12px;
  color: #bbb;
  margin: 15px 0 25px;
  padding-top: 20px;
  border-top: 1px solid #333;
}
.codex-app .commit-files {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 0 0;
  color: #aaa;
  font-size: 13px;
}
.codex-app .terminal-content {
  background: #111;
  border: 1px solid #363636;
  padding: 18px;
  border-radius: 9px;
  font:
    12px/22px "JetBrains Mono",
    monospace;
  margin-bottom: 18px;
}
.codex-app .terminal-muted {
  color: #999;
}
.codex-app .terminal-caret {
  display: inline-block;
  width: 7px;
  height: 14px;
  background: #aaa;
  vertical-align: middle;
}
.codex-app .toast {
  position: absolute;
  z-index: 110;
  bottom: 23px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 18px;
  width: max-content;
  max-width: calc(100% - 40px);
  border: 1px solid #4a4a4a;
  border-radius: 10px;
  background: #292929;
  box-shadow: 0 5px 25px #0007;
  padding: 10px 10px 10px 16px;
  color: #ddd;
  font-size: 13px;
}
.codex-app .scene-cursor {
  position: absolute;
  z-index: 150;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px #0008);
}
.codex-app .scene-cursor.clicking::before {
  content: "";
  position: absolute;
  left: -12px;
  top: -12px;
  width: 30px;
  height: 30px;
  border: 2px solid #ffffff88;
  border-radius: 50%;
}
.codex-app.controlled-scene * {
  animation: none !important;
  transition: none !important;
  caret-color: transparent !important;
}
.codex-app.compact-ui .saved-chat {
  height: 26px;
  font-size: 13px;
}

.codex-app .exact-prompt {
  display: block;
  width: 100%;
  height: 22.984375px;
  min-height: 0;
  padding: 0;
  margin: 0;
  resize: none;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: #ededed;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  overflow: hidden;
}
.codex-app .exact-prompt::placeholder {
  color: #999;
  opacity: 1;
}
.codex-app .exact-prompt:focus-visible {
  outline: none;
}
.codex-app .exact-menu {
  position: absolute;
  z-index: 60;
  width: 0;
  height: 0;
}
.codex-app .exact-menu .popover {
  bottom: 0;
}
.codex-app .exact-menu.below .popover {
  top: 0;
  bottom: auto;
}
.codex-app .exact-workspace {
  position: absolute;
  inset: 73.8px 0 0;
}
.codex-app .exact-title {
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.codex-app .exact-expanded-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.codex-app .exact-expanded-title > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 380px;
}
.codex-app .home-review {
  position: absolute;
  top: 73.8px;
  bottom: 0;
  right: 0;
  width: min(420px, 100%);
  display: flex;
  z-index: 40;
}
.codex-app .home-review .diff-panel {
  width: 100%;
  min-width: 0;
}
.codex-app .saved-chat {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  line-height: 31px;
}
.codex-app [role="button"] {
  cursor: pointer;
}
.codex-app [role="button"][aria-disabled="true"] {
  cursor: default;
}
.codex-app [role="button"]:focus-visible {
  outline: 2px solid #91b7ed;
  outline-offset: 3px;
}
.codex-app .with-review [data-node="131"] {
  flex-wrap: wrap;
}
.codex-app .with-review [data-node="153"] {
  gap: 9px;
  font-size: 11px;
}
.codex-app .with-review [data-node="140"] {
  min-width: 30%;
}
@media (max-width: 700px) {
  .codex-app .conversation {
    padding: 8px 12px 0;
  }
  .codex-app .diff-panel {
    position: absolute;
    inset: 0;
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  .codex-app .result-files {
    flex-wrap: wrap;
  }
  .codex-app .exact-expanded-title > span {
    max-width: 150px;
  }
}

.codex-app .exact-compact-controls {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.codex-app .exact-control-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
.codex-app .exact-control-group:last-child {
  justify-content: flex-end;
}

/* A resized live browser window can extend beyond the fixed reference canvas. */
.codex-app .reference-resized [data-documentation-canvas-stage="true"],
.codex-app .reference-resized [data-documentation-canvas="true"] {
  overflow: visible;
}
.codex-video {
  overflow: hidden;
  background: #101010;
}

.codex-video-surface {
  position: absolute;
  transform-origin: top left;
  isolation: isolate;
  overflow: hidden;
}

/* All motion is derived from the Remotion frame, including native controls. */
.codex-video-surface *,
.codex-video-surface *::before,
.codex-video-surface *::after {
  animation: none !important;
  transition: none !important;
  caret-color: transparent !important;
}
.video-preview {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 100dvh;
  background: #080808;
}

.video-timeline {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 52px;
  flex-shrink: 0;
  padding: 0 24px;
  color: #ccc;
  font:
    13px Inter,
    sans-serif;
}
.video-timeline input {
  flex: 1;
  min-width: 0;
  accent-color: #d8d8d8;
}
.video-timeline input:focus-visible {
  outline: 2px solid #91b7ed;
  outline-offset: 4px;
}