ghostykit 0.0.0-stage → 0.2.0

package/dist/styles.css

@@ -0,0 +1,2333 @@
+/* ghostykit — Piloto UI · MIT · https://github.com/blissito/ghostykit */
+/* ── Utilidades (Tailwind v4, encerradas en .piloto) ── */
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+.piloto {
+  --color-red-50: oklch(97.1% 0.013 17.38);
+  --color-red-100: oklch(93.6% 0.032 17.717);
+  --color-red-600: oklch(57.7% 0.245 27.325);
+  --color-red-700: oklch(50.5% 0.213 27.518);
+  --color-red-800: oklch(44.4% 0.177 26.899);
+  --color-black: #000;
+  --spacing: 0.25rem;
+  --container-md: 28rem;
+  --container-3xl: 48rem;
+  --text-xs: 0.75rem;
+  --text-xs--line-height: calc(1 / 0.75);
+  --text-sm: 0.875rem;
+  --text-sm--line-height: calc(1.25 / 0.875);
+  --text-base: 1rem;
+  --text-base--line-height: calc(1.5 / 1);
+  --text-lg: 1.125rem;
+  --text-lg--line-height: calc(1.75 / 1.125);
+  --text-xl: 1.25rem;
+  --text-xl--line-height: calc(1.75 / 1.25);
+  --text-2xl: 1.5rem;
+  --text-2xl--line-height: calc(2 / 1.5);
+  --text-3xl: 1.875rem;
+  --text-3xl--line-height: calc(2.25 / 1.875);
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --leading-tight: 1.25;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --animate-spin: spin 1s linear infinite;
+  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  --blur-sm: 8px;
+  --default-transition-duration: 150ms;
+  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+.piloto .pointer-events-auto {
+  pointer-events: auto;
+}
+.piloto .pointer-events-none {
+  pointer-events: none;
+}
+.piloto .visible {
+  visibility: visible;
+}
+.piloto .sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
+}
+.piloto .absolute {
+  position: absolute;
+}
+.piloto .fixed {
+  position: fixed;
+}
+.piloto .relative {
+  position: relative;
+}
+.piloto .static {
+  position: static;
+}
+.piloto .inset-0 {
+  inset: 0px;
+}
+.piloto .-top-12 {
+  top: calc(var(--spacing) * -12);
+}
+.piloto .top-0\.5 {
+  top: calc(var(--spacing) * 0.5);
+}
+.piloto .top-2 {
+  top: calc(var(--spacing) * 2);
+}
+.piloto .top-3 {
+  top: calc(var(--spacing) * 3);
+}
+.piloto .top-4 {
+  top: calc(var(--spacing) * 4);
+}
+.piloto .top-full {
+  top: 100%;
+}
+.piloto .right-0 {
+  right: 0px;
+}
+.piloto .right-0\.5 {
+  right: calc(var(--spacing) * 0.5);
+}
+.piloto .right-2 {
+  right: calc(var(--spacing) * 2);
+}
+.piloto .right-4 {
+  right: calc(var(--spacing) * 4);
+}
+.piloto .bottom-2 {
+  bottom: calc(var(--spacing) * 2);
+}
+.piloto .bottom-4 {
+  bottom: calc(var(--spacing) * 4);
+}
+.piloto .bottom-full {
+  bottom: 100%;
+}
+.piloto .left-0 {
+  left: 0px;
+}
+.piloto .left-1\/2 {
+  left: calc(1 / 2 * 100%);
+}
+.piloto .left-2 {
+  left: calc(var(--spacing) * 2);
+}
+.piloto .left-4 {
+  left: calc(var(--spacing) * 4);
+}
+.piloto .z-10 {
+  z-index: 10;
+}
+.piloto .z-20 {
+  z-index: 20;
+}
+.piloto .z-50 {
+  z-index: 50;
+}
+.piloto .z-\[1000\] {
+  z-index: 1000;
+}
+.piloto .container {
+  width: 100%;
+  @media (width >= 40rem) {
+    max-width: 40rem;
+  }
+  @media (width >= 48rem) {
+    max-width: 48rem;
+  }
+  @media (width >= 64rem) {
+    max-width: 64rem;
+  }
+  @media (width >= 80rem) {
+    max-width: 80rem;
+  }
+  @media (width >= 96rem) {
+    max-width: 96rem;
+  }
+}
+.piloto .mx-4 {
+  margin-inline: calc(var(--spacing) * 4);
+}
+.piloto .mx-auto {
+  margin-inline: auto;
+}
+.piloto .my-4 {
+  margin-block: calc(var(--spacing) * 4);
+}
+.piloto .my-6 {
+  margin-block: calc(var(--spacing) * 6);
+}
+.piloto .mt-0\.5 {
+  margin-top: calc(var(--spacing) * 0.5);
+}
+.piloto .mt-1 {
+  margin-top: var(--spacing);
+}
+.piloto .mt-2 {
+  margin-top: calc(var(--spacing) * 2);
+}
+.piloto .mt-3 {
+  margin-top: calc(var(--spacing) * 3);
+}
+.piloto .mt-4 {
+  margin-top: calc(var(--spacing) * 4);
+}
+.piloto .mt-5 {
+  margin-top: calc(var(--spacing) * 5);
+}
+.piloto .mt-6 {
+  margin-top: calc(var(--spacing) * 6);
+}
+.piloto .mt-\[3px\] {
+  margin-top: 3px;
+}
+.piloto .mt-px {
+  margin-top: 1px;
+}
+.piloto .mb-1 {
+  margin-bottom: var(--spacing);
+}
+.piloto .mb-2 {
+  margin-bottom: calc(var(--spacing) * 2);
+}
+.piloto .mb-3 {
+  margin-bottom: calc(var(--spacing) * 3);
+}
+.piloto .mb-6 {
+  margin-bottom: calc(var(--spacing) * 6);
+}
+.piloto .ml-1 {
+  margin-left: var(--spacing);
+}
+.piloto .block {
+  display: block;
+}
+.piloto .contents {
+  display: contents;
+}
+.piloto .flex {
+  display: flex;
+}
+.piloto .grid {
+  display: grid;
+}
+.piloto .hidden {
+  display: none;
+}
+.piloto .inline-block {
+  display: inline-block;
+}
+.piloto .inline-flex {
+  display: inline-flex;
+}
+.piloto .list-item {
+  display: list-item;
+}
+.piloto .table {
+  display: table;
+}
+.piloto .table-cell {
+  display: table-cell;
+}
+.piloto .table-row {
+  display: table-row;
+}
+.piloto .size-4 {
+  width: calc(var(--spacing) * 4);
+  height: calc(var(--spacing) * 4);
+}
+.piloto .size-5 {
+  width: calc(var(--spacing) * 5);
+  height: calc(var(--spacing) * 5);
+}
+.piloto .size-7 {
+  width: calc(var(--spacing) * 7);
+  height: calc(var(--spacing) * 7);
+}
+.piloto .size-full {
+  width: 100%;
+  height: 100%;
+}
+.piloto .h-2 {
+  height: calc(var(--spacing) * 2);
+}
+.piloto .h-2\.5 {
+  height: calc(var(--spacing) * 2.5);
+}
+.piloto .h-3 {
+  height: calc(var(--spacing) * 3);
+}
+.piloto .h-3\.5 {
+  height: calc(var(--spacing) * 3.5);
+}
+.piloto .h-4 {
+  height: calc(var(--spacing) * 4);
+}
+.piloto .h-5 {
+  height: calc(var(--spacing) * 5);
+}
+.piloto .h-6 {
+  height: calc(var(--spacing) * 6);
+}
+.piloto .h-7 {
+  height: calc(var(--spacing) * 7);
+}
+.piloto .h-8 {
+  height: calc(var(--spacing) * 8);
+}
+.piloto .h-9 {
+  height: calc(var(--spacing) * 9);
+}
+.piloto .h-12 {
+  height: calc(var(--spacing) * 12);
+}
+.piloto .h-16 {
+  height: calc(var(--spacing) * 16);
+}
+.piloto .h-20 {
+  height: calc(var(--spacing) * 20);
+}
+.piloto .h-24 {
+  height: calc(var(--spacing) * 24);
+}
+.piloto .h-\[22px\] {
+  height: 22px;
+}
+.piloto .h-\[46px\] {
+  height: 46px;
+}
+.piloto .h-full {
+  height: 100%;
+}
+.piloto .max-h-32 {
+  max-height: calc(var(--spacing) * 32);
+}
+.piloto .max-h-60 {
+  max-height: calc(var(--spacing) * 60);
+}
+.piloto .max-h-80 {
+  max-height: calc(var(--spacing) * 80);
+}
+.piloto .max-h-\[min\(70vh\,40rem\)\] {
+  max-height: min(70vh, 40rem);
+}
+.piloto .min-h-0 {
+  min-height: 0px;
+}
+.piloto .min-h-28 {
+  min-height: calc(var(--spacing) * 28);
+}
+.piloto .min-h-\[24px\] {
+  min-height: 24px;
+}
+.piloto .min-h-\[40vh\] {
+  min-height: 40vh;
+}
+.piloto .min-h-\[200px\] {
+  min-height: 200px;
+}
+.piloto .w-2 {
+  width: calc(var(--spacing) * 2);
+}
+.piloto .w-2\.5 {
+  width: calc(var(--spacing) * 2.5);
+}
+.piloto .w-3 {
+  width: calc(var(--spacing) * 3);
+}
+.piloto .w-3\.5 {
+  width: calc(var(--spacing) * 3.5);
+}
+.piloto .w-4 {
+  width: calc(var(--spacing) * 4);
+}
+.piloto .w-5 {
+  width: calc(var(--spacing) * 5);
+}
+.piloto .w-6 {
+  width: calc(var(--spacing) * 6);
+}
+.piloto .w-7 {
+  width: calc(var(--spacing) * 7);
+}
+.piloto .w-8 {
+  width: calc(var(--spacing) * 8);
+}
+.piloto .w-9 {
+  width: calc(var(--spacing) * 9);
+}
+.piloto .w-10 {
+  width: calc(var(--spacing) * 10);
+}
+.piloto .w-12 {
+  width: calc(var(--spacing) * 12);
+}
+.piloto .w-16 {
+  width: calc(var(--spacing) * 16);
+}
+.piloto .w-20 {
+  width: calc(var(--spacing) * 20);
+}
+.piloto .w-48 {
+  width: calc(var(--spacing) * 48);
+}
+.piloto .w-\[3px\] {
+  width: 3px;
+}
+.piloto .w-\[22px\] {
+  width: 22px;
+}
+.piloto .w-full {
+  width: 100%;
+}
+.piloto .max-w-3xl {
+  max-width: var(--container-3xl);
+}
+.piloto .max-w-56 {
+  max-width: calc(var(--spacing) * 56);
+}
+.piloto .max-w-\[16rem\] {
+  max-width: 16rem;
+}
+.piloto .max-w-\[75\%\] {
+  max-width: 75%;
+}
+.piloto .max-w-\[80\%\] {
+  max-width: 80%;
+}
+.piloto .max-w-\[92\%\] {
+  max-width: 92%;
+}
+.piloto .max-w-full {
+  max-width: 100%;
+}
+.piloto .max-w-md {
+  max-width: var(--container-md);
+}
+.piloto .min-w-0 {
+  min-width: 0px;
+}
+.piloto .min-w-52 {
+  min-width: calc(var(--spacing) * 52);
+}
+.piloto .min-w-\[120px\] {
+  min-width: 120px;
+}
+.piloto .flex-1 {
+  flex: 1;
+}
+.piloto .flex-none {
+  flex: none;
+}
+.piloto .shrink-0 {
+  flex-shrink: 0;
+}
+.piloto .border-collapse {
+  border-collapse: collapse;
+}
+.piloto .origin-center {
+  transform-origin: center;
+}
+.piloto .-translate-x-1\/2 {
+  --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+}
+.piloto .rotate-90 {
+  rotate: 90deg;
+}
+.piloto .transform {
+  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+}
+.piloto .animate-pulse {
+  animation: var(--animate-pulse);
+}
+.piloto .animate-spin {
+  animation: var(--animate-spin);
+}
+.piloto .cursor-pointer {
+  cursor: pointer;
+}
+.piloto .resize-none {
+  resize: none;
+}
+.piloto .list-inside {
+  list-style-position: inside;
+}
+.piloto .list-decimal {
+  list-style-type: decimal;
+}
+.piloto .list-disc {
+  list-style-type: disc;
+}
+.piloto .appearance-none {
+  appearance: none;
+}
+.piloto .flex-col {
+  flex-direction: column;
+}
+.piloto .flex-wrap {
+  flex-wrap: wrap;
+}
+.piloto .place-items-center {
+  place-items: center;
+}
+.piloto .items-center {
+  align-items: center;
+}
+.piloto .items-end {
+  align-items: flex-end;
+}
+.piloto .items-start {
+  align-items: flex-start;
+}
+.piloto .justify-between {
+  justify-content: space-between;
+}
+.piloto .justify-center {
+  justify-content: center;
+}
+.piloto .justify-end {
+  justify-content: flex-end;
+}
+.piloto .gap-0\.5 {
+  gap: calc(var(--spacing) * 0.5);
+}
+.piloto .gap-1 {
+  gap: var(--spacing);
+}
+.piloto .gap-1\.5 {
+  gap: calc(var(--spacing) * 1.5);
+}
+.piloto .gap-2 {
+  gap: calc(var(--spacing) * 2);
+}
+.piloto .gap-2\.5 {
+  gap: calc(var(--spacing) * 2.5);
+}
+.piloto .gap-3 {
+  gap: calc(var(--spacing) * 3);
+}
+.piloto .gap-4 {
+  gap: calc(var(--spacing) * 4);
+}
+.piloto .gap-6 {
+  gap: calc(var(--spacing) * 6);
+}
+.piloto .gap-8 {
+  gap: calc(var(--spacing) * 8);
+}
+.piloto .gap-\[2px\] {
+  gap: 2px;
+}
+.piloto :where(.space-y-4 > :not(:last-child)) {
+  --tw-space-y-reverse: 0;
+  margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
+  margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
+}
+.piloto :where(.space-x-2 > :not(:last-child)) {
+  --tw-space-x-reverse: 0;
+  margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
+  margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
+}
+.piloto :where(.divide-y > :not(:last-child)) {
+  --tw-divide-y-reverse: 0;
+  border-bottom-style: var(--tw-border-style);
+  border-top-style: var(--tw-border-style);
+  border-top-width: calc(1px * var(--tw-divide-y-reverse));
+  border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+}
+.piloto :where(.divide-border > :not(:last-child)) {
+  border-color: var(--piloto-border-2);
+}
+.piloto .truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.piloto .overflow-auto {
+  overflow: auto;
+}
+.piloto .overflow-hidden {
+  overflow: hidden;
+}
+.piloto .overflow-x-auto {
+  overflow-x: auto;
+}
+.piloto .overflow-x-hidden {
+  overflow-x: hidden;
+}
+.piloto .overflow-y-auto {
+  overflow-y: auto;
+}
+.piloto .rounded {
+  border-radius: 0.25rem;
+}
+.piloto .rounded-\(--piloto-radius-bubble\) {
+  border-radius: var(--piloto-radius-bubble);
+}
+.piloto .rounded-\(--piloto-radius-button\) {
+  border-radius: var(--piloto-radius-button);
+}
+.piloto .rounded-\(--piloto-radius-card\) {
+  border-radius: var(--piloto-radius-card);
+}
+.piloto .rounded-\(--piloto-radius-input\) {
+  border-radius: var(--piloto-radius-input);
+}
+.piloto .rounded-full {
+  border-radius: calc(infinity * 1px);
+}
+.piloto .rounded-lg {
+  border-radius: var(--radius-lg);
+}
+.piloto .rounded-md {
+  border-radius: var(--radius-md);
+}
+.piloto .rounded-xl {
+  border-radius: var(--radius-xl);
+}
+.piloto .border {
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+}
+.piloto .border-2 {
+  border-style: var(--tw-border-style);
+  border-width: 2px;
+}
+.piloto .border-b-2 {
+  border-bottom-style: var(--tw-border-style);
+  border-bottom-width: 2px;
+}
+.piloto .border-l-2 {
+  border-left-style: var(--tw-border-style);
+  border-left-width: 2px;
+}
+.piloto .border-l-4 {
+  border-left-style: var(--tw-border-style);
+  border-left-width: 4px;
+}
+.piloto .border-dashed {
+  --tw-border-style: dashed;
+  border-style: dashed;
+}
+.piloto .border-border {
+  border-color: var(--piloto-border-2);
+}
+.piloto .border-border-primary {
+  border-color: var(--piloto-border);
+}
+.piloto .border-border-secondary {
+  border-color: var(--piloto-border-2);
+}
+.piloto .border-brand-500 {
+  border-color: var(--piloto-accent);
+}
+.piloto .border-current {
+  border-color: currentcolor;
+}
+.piloto .border-muted-foreground\/30 {
+  border-color: var(--piloto-text-3);
+  @supports (color: color-mix(in lab, red, red)) {
+    border-color: color-mix(in oklab, var(--piloto-text-3) 30%, transparent);
+  }
+}
+.piloto .border-sidebar {
+  border-color: var(--piloto-surface);
+}
+.piloto .bg-\[var\(--sdm-bg\,inherit\)\] {
+  background-color: var(--sdm-bg,inherit);
+}
+.piloto .bg-\[var\(--sdm-tbg\)\] {
+  background-color: var(--sdm-tbg);
+}
+.piloto .bg-background {
+  background-color: var(--piloto-bg);
+}
+.piloto .bg-background-inverse\/80 {
+  background-color: var(--piloto-inverse);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--piloto-inverse) 80%, transparent);
+  }
+}
+.piloto .bg-background-primary {
+  background-color: var(--piloto-bg);
+}
+.piloto .bg-background-secondary {
+  background-color: var(--piloto-surface);
+}
+.piloto .bg-background-secondary\/50 {
+  background-color: var(--piloto-surface);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--piloto-surface) 50%, transparent);
+  }
+}
+.piloto .bg-background-success {
+  background-color: var(--piloto-success);
+}
+.piloto .bg-background\/50 {
+  background-color: var(--piloto-bg);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--piloto-bg) 50%, transparent);
+  }
+}
+.piloto .bg-background\/80 {
+  background-color: var(--piloto-bg);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--piloto-bg) 80%, transparent);
+  }
+}
+.piloto .bg-background\/90 {
+  background-color: var(--piloto-bg);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--piloto-bg) 90%, transparent);
+  }
+}
+.piloto .bg-background\/95 {
+  background-color: var(--piloto-bg);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--piloto-bg) 95%, transparent);
+  }
+}
+.piloto .bg-black\/10 {
+  background-color: color-mix(in srgb, #000 10%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
+  }
+}
+.piloto .bg-black\/60 {
+  background-color: color-mix(in srgb, #000 60%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
+  }
+}
+.piloto .bg-border-primary {
+  background-color: var(--piloto-border);
+}
+.piloto .bg-brand-500\/15 {
+  background-color: var(--piloto-accent);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--piloto-accent) 15%, transparent);
+  }
+}
+.piloto .bg-muted {
+  background-color: var(--piloto-surface);
+}
+.piloto .bg-muted\/80 {
+  background-color: var(--piloto-surface);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--piloto-surface) 80%, transparent);
+  }
+}
+.piloto .bg-primary {
+  background-color: var(--piloto-accent-strong);
+}
+.piloto .bg-red-50 {
+  background-color: var(--color-red-50);
+}
+.piloto .bg-red-100 {
+  background-color: var(--color-red-100);
+}
+.piloto .bg-sidebar {
+  background-color: var(--piloto-surface);
+}
+.piloto .bg-sidebar\/80 {
+  background-color: var(--piloto-surface);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--piloto-surface) 80%, transparent);
+  }
+}
+.piloto .bg-text-danger {
+  background-color: var(--piloto-danger);
+}
+.piloto .bg-text-primary {
+  background-color: var(--piloto-text);
+}
+.piloto .bg-text-secondary\/70 {
+  background-color: var(--piloto-text-2);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--piloto-text-2) 70%, transparent);
+  }
+}
+.piloto .bg-transparent {
+  background-color: transparent;
+}
+.piloto .fill-current {
+  fill: currentcolor;
+}
+.piloto .object-cover {
+  object-fit: cover;
+}
+.piloto .p-1 {
+  padding: var(--spacing);
+}
+.piloto .p-1\.5 {
+  padding: calc(var(--spacing) * 1.5);
+}
+.piloto .p-2 {
+  padding: calc(var(--spacing) * 2);
+}
+.piloto .p-3 {
+  padding: calc(var(--spacing) * 3);
+}
+.piloto .p-4 {
+  padding: calc(var(--spacing) * 4);
+}
+.piloto .p-6 {
+  padding: calc(var(--spacing) * 6);
+}
+.piloto .px-1 {
+  padding-inline: var(--spacing);
+}
+.piloto .px-1\.5 {
+  padding-inline: calc(var(--spacing) * 1.5);
+}
+.piloto .px-2 {
+  padding-inline: calc(var(--spacing) * 2);
+}
+.piloto .px-2\.5 {
+  padding-inline: calc(var(--spacing) * 2.5);
+}
+.piloto .px-3 {
+  padding-inline: calc(var(--spacing) * 3);
+}
+.piloto .px-3\.5 {
+  padding-inline: calc(var(--spacing) * 3.5);
+}
+.piloto .px-4 {
+  padding-inline: calc(var(--spacing) * 4);
+}
+.piloto .px-10 {
+  padding-inline: calc(var(--spacing) * 10);
+}
+.piloto .py-0\.5 {
+  padding-block: calc(var(--spacing) * 0.5);
+}
+.piloto .py-1 {
+  padding-block: var(--spacing);
+}
+.piloto .py-1\.5 {
+  padding-block: calc(var(--spacing) * 1.5);
+}
+.piloto .py-2 {
+  padding-block: calc(var(--spacing) * 2);
+}
+.piloto .py-2\.5 {
+  padding-block: calc(var(--spacing) * 2.5);
+}
+.piloto .py-3 {
+  padding-block: calc(var(--spacing) * 3);
+}
+.piloto .py-6 {
+  padding-block: calc(var(--spacing) * 6);
+}
+.piloto .py-8 {
+  padding-block: calc(var(--spacing) * 8);
+}
+.piloto .pt-0 {
+  padding-top: 0px;
+}
+.piloto .pt-3 {
+  padding-top: calc(var(--spacing) * 3);
+}
+.piloto .pr-1 {
+  padding-right: var(--spacing);
+}
+.piloto .pb-4 {
+  padding-bottom: calc(var(--spacing) * 4);
+}
+.piloto .pb-\[8vh\] {
+  padding-bottom: 8vh;
+}
+.piloto .pl-2\.5 {
+  padding-left: calc(var(--spacing) * 2.5);
+}
+.piloto .pl-3 {
+  padding-left: calc(var(--spacing) * 3);
+}
+.piloto .pl-4 {
+  padding-left: calc(var(--spacing) * 4);
+}
+.piloto .text-center {
+  text-align: center;
+}
+.piloto .text-left {
+  text-align: left;
+}
+.piloto .font-mono {
+  font-family: var(--piloto-font-mono);
+}
+.piloto .text-2xl {
+  font-size: var(--text-2xl);
+  line-height: var(--tw-leading, var(--text-2xl--line-height));
+}
+.piloto .text-3xl {
+  font-size: var(--text-3xl);
+  line-height: var(--tw-leading, var(--text-3xl--line-height));
+}
+.piloto .text-base {
+  font-size: var(--text-base);
+  line-height: var(--tw-leading, var(--text-base--line-height));
+}
+.piloto .text-lg {
+  font-size: var(--text-lg);
+  line-height: var(--tw-leading, var(--text-lg--line-height));
+}
+.piloto .text-sm {
+  font-size: var(--text-sm);
+  line-height: var(--tw-leading, var(--text-sm--line-height));
+}
+.piloto .text-xl {
+  font-size: var(--text-xl);
+  line-height: var(--tw-leading, var(--text-xl--line-height));
+}
+.piloto .text-xs {
+  font-size: var(--text-xs);
+  line-height: var(--tw-leading, var(--text-xs--line-height));
+}
+.piloto .text-\[9px\] {
+  font-size: 9px;
+}
+.piloto .text-\[10px\] {
+  font-size: 10px;
+}
+.piloto .text-\[11px\] {
+  font-size: 11px;
+}
+.piloto .text-\[13px\] {
+  font-size: 13px;
+}
+.piloto .text-\[15px\] {
+  font-size: 15px;
+}
+.piloto .leading-6 {
+  --tw-leading: calc(var(--spacing) * 6);
+  line-height: calc(var(--spacing) * 6);
+}
+.piloto .leading-\[22px\] {
+  --tw-leading: 22px;
+  line-height: 22px;
+}
+.piloto .leading-none {
+  --tw-leading: 1;
+  line-height: 1;
+}
+.piloto .leading-tight {
+  --tw-leading: var(--leading-tight);
+  line-height: var(--leading-tight);
+}
+.piloto .font-medium {
+  --tw-font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-medium);
+}
+.piloto .font-semibold {
+  --tw-font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-semibold);
+}
+.piloto .break-words {
+  overflow-wrap: break-word;
+}
+.piloto .wrap-anywhere {
+  overflow-wrap: anywhere;
+}
+.piloto .break-all {
+  word-break: break-all;
+}
+.piloto .whitespace-normal {
+  white-space: normal;
+}
+.piloto .whitespace-nowrap {
+  white-space: nowrap;
+}
+.piloto .whitespace-pre-wrap {
+  white-space: pre-wrap;
+}
+.piloto .text-\[var\(--sdm-c\,inherit\)\] {
+  color: var(--sdm-c,inherit);
+}
+.piloto .text-brand-600 {
+  color: var(--piloto-accent-strong);
+}
+.piloto .text-muted-foreground {
+  color: var(--piloto-text-3);
+}
+.piloto .text-primary {
+  color: var(--piloto-accent-strong);
+}
+.piloto .text-primary-foreground {
+  color: var(--piloto-on-accent);
+}
+.piloto .text-red-600 {
+  color: var(--color-red-600);
+}
+.piloto .text-red-700 {
+  color: var(--color-red-700);
+}
+.piloto .text-red-800 {
+  color: var(--color-red-800);
+}
+.piloto .text-text-danger {
+  color: var(--piloto-danger);
+}
+.piloto .text-text-info {
+  color: var(--piloto-accent-strong);
+}
+.piloto .text-text-inverse {
+  color: var(--piloto-text-inverse);
+}
+.piloto .text-text-primary {
+  color: var(--piloto-text);
+}
+.piloto .text-text-secondary {
+  color: var(--piloto-text-2);
+}
+.piloto .text-text-success {
+  color: var(--piloto-success);
+}
+.piloto .text-text-tertiary {
+  color: var(--piloto-text-3);
+}
+.piloto .lowercase {
+  text-transform: lowercase;
+}
+.piloto .uppercase {
+  text-transform: uppercase;
+}
+.piloto .italic {
+  font-style: italic;
+}
+.piloto .tabular-nums {
+  --tw-numeric-spacing: tabular-nums;
+  font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+}
+.piloto .underline {
+  text-decoration-line: underline;
+}
+.piloto .underline-offset-2 {
+  text-underline-offset: 2px;
+}
+.piloto .opacity-0 {
+  opacity: 0%;
+}
+.piloto .opacity-70 {
+  opacity: 70%;
+}
+.piloto .opacity-100 {
+  opacity: 100%;
+}
+.piloto .shadow {
+  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+.piloto .shadow-\(--piloto-shadow-card\) {
+  --tw-shadow: var(--piloto-shadow-card);
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+.piloto .shadow-lg {
+  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+.piloto .shadow-sm {
+  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+.piloto .filter {
+  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,);
+}
+.piloto .backdrop-blur-sm {
+  --tw-backdrop-blur: blur(var(--blur-sm));
+  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+}
+.piloto .transition {
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+}
+.piloto .transition-\[background-color\,border-color\] {
+  transition-property: background-color,border-color;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+}
+.piloto .transition-all {
+  transition-property: all;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+}
+.piloto .transition-colors {
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+}
+.piloto .transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+}
+.piloto .transition-transform {
+  transition-property: transform, translate, scale, rotate;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+}
+.piloto .duration-150 {
+  --tw-duration: 150ms;
+  transition-duration: 150ms;
+}
+.piloto .duration-200 {
+  --tw-duration: 200ms;
+  transition-duration: 200ms;
+}
+.piloto .duration-300 {
+  --tw-duration: 300ms;
+  transition-duration: 300ms;
+}
+.piloto .ease-out {
+  --tw-ease: var(--ease-out);
+  transition-timing-function: var(--ease-out);
+}
+.piloto .outline-none {
+  --tw-outline-style: none;
+  outline-style: none;
+}
+.piloto .select-none {
+  -webkit-user-select: none;
+  user-select: none;
+}
+.piloto .\[counter-increment\:line_0\] {
+  counter-increment: line 0;
+}
+.piloto .\[counter-reset\:line\] {
+  counter-reset: line;
+}
+@media (hover: hover) {
+  .piloto .group-hover\:block:is(:where(.group):hover *) {
+    display: block;
+  }
+  .piloto .group-hover\:text-text-primary:is(:where(.group):hover *) {
+    color: var(--piloto-text);
+  }
+  .piloto .group-hover\:opacity-100:is(:where(.group):hover *) {
+    opacity: 100%;
+  }
+  .piloto .group-hover\/msg\:opacity-100:is(:where(.group\/msg):hover *) {
+    opacity: 100%;
+  }
+}
+.piloto .placeholder\:text-text-tertiary::placeholder {
+  color: var(--piloto-text-3);
+}
+.piloto .before\:mr-4::before {
+  content: var(--tw-content);
+  margin-right: calc(var(--spacing) * 4);
+}
+.piloto .before\:inline-block::before {
+  content: var(--tw-content);
+  display: inline-block;
+}
+.piloto .before\:w-6::before {
+  content: var(--tw-content);
+  width: calc(var(--spacing) * 6);
+}
+.piloto .before\:text-right::before {
+  content: var(--tw-content);
+  text-align: right;
+}
+.piloto .before\:font-mono::before {
+  content: var(--tw-content);
+  font-family: var(--piloto-font-mono);
+}
+.piloto .before\:text-\[13px\]::before {
+  content: var(--tw-content);
+  font-size: 13px;
+}
+.piloto .before\:text-muted-foreground\/50::before {
+  content: var(--tw-content);
+  color: var(--piloto-text-3);
+  @supports (color: color-mix(in lab, red, red)) {
+    color: color-mix(in oklab, var(--piloto-text-3) 50%, transparent);
+  }
+}
+.piloto .before\:content-\[counter\(line\)\]::before {
+  --tw-content: counter(line);
+  content: var(--tw-content);
+}
+.piloto .before\:select-none::before {
+  content: var(--tw-content);
+  -webkit-user-select: none;
+  user-select: none;
+}
+.piloto .before\:\[counter-increment\:line\]::before {
+  content: var(--tw-content);
+  counter-increment: line;
+}
+@media (hover: hover) {
+  .piloto .hover\:border-border-primary:hover {
+    border-color: var(--piloto-border);
+  }
+  .piloto .hover\:border-brand-300:hover {
+    border-color: var(--piloto-accent-soft);
+  }
+  .piloto .hover\:border-text-tertiary:hover {
+    border-color: var(--piloto-text-3);
+  }
+  .piloto .hover\:bg-background:hover {
+    background-color: var(--piloto-bg);
+  }
+  .piloto .hover\:bg-background-inverse:hover {
+    background-color: var(--piloto-inverse);
+  }
+  .piloto .hover\:bg-background-secondary:hover {
+    background-color: var(--piloto-surface);
+  }
+  .piloto .hover\:bg-muted:hover {
+    background-color: var(--piloto-surface);
+  }
+  .piloto .hover\:bg-muted\/40:hover {
+    background-color: var(--piloto-surface);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .piloto .hover\:bg-muted\/40:hover {
+      background-color: color-mix(in oklab, var(--piloto-surface) 40%, transparent);
+    }
+  }
+  .piloto .hover\:bg-primary\/90:hover {
+    background-color: var(--piloto-accent-strong);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .piloto .hover\:bg-primary\/90:hover {
+      background-color: color-mix(in oklab, var(--piloto-accent-strong) 90%, transparent);
+    }
+  }
+  .piloto .hover\:text-foreground:hover {
+    color: var(--piloto-text);
+  }
+  .piloto .hover\:text-text-primary:hover {
+    color: var(--piloto-text);
+  }
+  .piloto .hover\:underline:hover {
+    text-decoration-line: underline;
+  }
+  .piloto .hover\:opacity-90:hover {
+    opacity: 90%;
+  }
+}
+.piloto .focus-visible\:opacity-100:focus-visible {
+  opacity: 100%;
+}
+.piloto .disabled\:cursor-not-allowed:disabled {
+  cursor: not-allowed;
+}
+.piloto .disabled\:opacity-30:disabled {
+  opacity: 30%;
+}
+.piloto .disabled\:opacity-50:disabled {
+  opacity: 50%;
+}
+@supports (backdrop-filter: var(--tw)) {
+  .piloto .supports-\[backdrop-filter\]\:bg-background\/70 {
+    background-color: var(--piloto-bg);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .piloto .supports-\[backdrop-filter\]\:bg-background\/70 {
+      background-color: color-mix(in oklab, var(--piloto-bg) 70%, transparent);
+    }
+  }
+  .piloto .supports-\[backdrop-filter\]\:bg-sidebar\/70 {
+    background-color: var(--piloto-surface);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .piloto .supports-\[backdrop-filter\]\:bg-sidebar\/70 {
+      background-color: color-mix(in oklab, var(--piloto-surface) 70%, transparent);
+    }
+  }
+  .piloto .supports-\[backdrop-filter\]\:backdrop-blur {
+    --tw-backdrop-blur: blur(8px);
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
+  .piloto .supports-\[backdrop-filter\]\:backdrop-blur-sm {
+    --tw-backdrop-blur: blur(var(--blur-sm));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
+}
+@media (prefers-color-scheme: dark) {
+  .piloto .dark\:bg-\[var\(--shiki-dark-bg\,var\(--sdm-bg\,inherit\)\)\] {
+    background-color: var(--shiki-dark-bg,var(--sdm-bg,inherit));
+  }
+  .piloto .dark\:bg-\[var\(--shiki-dark-bg\,var\(--sdm-tbg\)\)\] {
+    background-color: var(--shiki-dark-bg,var(--sdm-tbg));
+  }
+  .piloto .dark\:text-\[var\(--shiki-dark\,var\(--sdm-c\,inherit\)\)\] {
+    color: var(--shiki-dark,var(--sdm-c,inherit));
+  }
+}
+.piloto .\[\&_svg\]\:h-auto svg {
+  height: auto;
+}
+.piloto .\[\&_svg\]\:w-auto svg {
+  width: auto;
+}
+.piloto .\[\&_thead\]\:sticky thead {
+  position: sticky;
+}
+.piloto .\[\&_thead\]\:top-0 thead {
+  top: 0px;
+}
+.piloto .\[\&_thead\]\:z-10 thead {
+  z-index: 10;
+}
+.piloto .\[\&\>\*\:first-child\]\:mt-0 > :first-child {
+  margin-top: 0px;
+}
+.piloto .\[\&\>\*\:last-child\]\:mb-0 > :last-child {
+  margin-bottom: 0px;
+}
+.piloto .\[\&\>\*\:last-child\:not\(\[data-sd-caret-hidden\]\)\]\:after\:inline > :last-child:not([data-sd-caret-hidden])::after {
+  content: var(--tw-content);
+  display: inline;
+}
+.piloto .\[\&\>\*\:last-child\:not\(\[data-sd-caret-hidden\]\)\]\:after\:align-baseline > :last-child:not([data-sd-caret-hidden])::after {
+  content: var(--tw-content);
+  vertical-align: baseline;
+}
+.piloto .\[\&\>\*\:last-child\:not\(\[data-sd-caret-hidden\]\)\]\:after\:content-\[var\(--streamdown-caret\)\] > :last-child:not([data-sd-caret-hidden])::after {
+  --tw-content: var(--streamdown-caret);
+  content: var(--tw-content);
+}
+.piloto .\[\&\>p\]\:inline > p {
+  display: inline;
+}
+@media (hover:none) {
+  .piloto .\[\@media\(hover\:none\)\]\:opacity-100 {
+    opacity: 100%;
+  }
+}
+.piloto li .\[li_\&\]\:pl-6 {
+  padding-left: calc(var(--spacing) * 6);
+}
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-space-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-space-x-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-divide-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ordinal {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-slashed-zero {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-figure {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-spacing {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-fraction {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-drop-shadow-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-content {
+  syntax: "*";
+  initial-value: "";
+  inherits: false;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
+@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    .piloto *, .piloto ::before, .piloto ::after, .piloto ::backdrop {
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
+      --tw-space-y-reverse: 0;
+      --tw-space-x-reverse: 0;
+      --tw-divide-y-reverse: 0;
+      --tw-border-style: solid;
+      --tw-leading: initial;
+      --tw-font-weight: initial;
+      --tw-ordinal: initial;
+      --tw-slashed-zero: initial;
+      --tw-numeric-figure: initial;
+      --tw-numeric-spacing: initial;
+      --tw-numeric-fraction: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
+      --tw-backdrop-blur: initial;
+      --tw-backdrop-brightness: initial;
+      --tw-backdrop-contrast: initial;
+      --tw-backdrop-grayscale: initial;
+      --tw-backdrop-hue-rotate: initial;
+      --tw-backdrop-invert: initial;
+      --tw-backdrop-opacity: initial;
+      --tw-backdrop-saturate: initial;
+      --tw-backdrop-sepia: initial;
+      --tw-duration: initial;
+      --tw-ease: initial;
+      --tw-content: "";
+    }
+  }
+
+/* ── La piel ── */
+/* ─────────────────────────────────────────────────────────────────────────────
+   Piloto UI — la piel.
+
+   La idea: el agente es tu copiloto, y la cabina tiene su vocabulario. Tinta
+   sobre papel, contornos gruesos y sombras duras (nada de difuminados ni
+   degradados). Todo lo demás calla para que hable UNA pieza: el pase de
+   permiso, con su mecha que se consume y el sello que cae al contestar.
+
+   Todo color, radio, sombra y grosor es una variable `--piloto-*`. Tres pieles
+   de casa por `data-skin`: ghosty (default), easybits y neutral; cada una con su
+   oscuro (`data-theme="dark"`, o `auto` siguiendo al sistema).
+   ───────────────────────────────────────────────────────────────────────────── */
+
+.piloto {
+  /* Tipografía. Las fuentes no se descargan solas: `ghostykit/fonts.css` las trae. */
+  --piloto-font: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --piloto-font-display: "Big Shoulders Stencil Display", "Schibsted Grotesk", Impact, "Arial Narrow", sans-serif;
+  --piloto-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --piloto-font-size: 15px;
+
+  /* Ghosty: papel blanco, tinta casi negra, lavanda y mantequilla. */
+  --piloto-bg: #ffffff;
+  --piloto-surface: #f4f4fb;
+  --piloto-surface-2: #e7e7f2;
+  --piloto-text: #191a20;
+  --piloto-text-2: #474956;
+  --piloto-text-3: #7d7f8c;
+  --piloto-text-disabled: #b6b6ba;
+  --piloto-text-inverse: #ffffff;
+  --piloto-inverse: #191a20;
+  --piloto-border: #191a20;
+  --piloto-border-2: #e3e3ec;
+  --piloto-accent: #8483e0;
+  --piloto-accent-strong: #6564cf;
+  --piloto-accent-soft: #dcdcfa;
+  --piloto-on-accent: #ffffff;
+  --piloto-success: #3f9a62;
+  --piloto-success-soft: #c9ecd5;
+  --piloto-danger: #d64545;
+  --piloto-danger-soft: #fbd9d6;
+  --piloto-warning: #ffd36e;
+  --piloto-warning-ink: #191a20;
+  --piloto-focus: #6564cf;
+  --piloto-user-bubble: #dcdcfa;
+  --piloto-user-text: #191a20;
+  --piloto-shadow-color: #191a20;
+
+  /* Forma. */
+  --piloto-radius-bubble: 14px;
+  --piloto-radius-card: 14px;
+  --piloto-radius-input: 18px;
+  --piloto-radius-button: 10px;
+  --piloto-border-width: 2px;
+  --piloto-hairline: 1px;
+  --piloto-shadow-card: 4px 4px 0 var(--piloto-shadow-color);
+  --piloto-shadow-input: 4px 4px 0 var(--piloto-shadow-color);
+  --piloto-shadow-hero: 6px 6px 0 var(--piloto-shadow-color);
+  --piloto-max-width: 760px;
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  width: 100%;
+  background: var(--piloto-bg);
+  color: var(--piloto-text);
+  font-family: var(--piloto-font);
+  font-size: var(--piloto-font-size);
+  line-height: 1.55;
+  -webkit-font-smoothing: antialiased;
+  isolation: isolate;
+}
+
+/* ── Ghosty, oscuro: la sombra dura se vuelve lavanda (negro sobre negro no se ve). ── */
+.piloto[data-theme="dark"] {
+  --piloto-bg: #15161c;
+  --piloto-surface: #1f2029;
+  --piloto-surface-2: #2b2c38;
+  --piloto-text: #eeeef4;
+  --piloto-text-2: #b9bac6;
+  --piloto-text-3: #858796;
+  --piloto-text-disabled: #575966;
+  --piloto-text-inverse: #15161c;
+  --piloto-inverse: #eeeef4;
+  --piloto-border: #eeeef4;
+  --piloto-border-2: #2b2c38;
+  --piloto-accent: #9998ef;
+  --piloto-accent-strong: #aeadf5;
+  --piloto-accent-soft: #33335a;
+  --piloto-on-accent: #15161c;
+  --piloto-success: #6fcf92;
+  --piloto-success-soft: #1d3a2a;
+  --piloto-danger: #ff7b72;
+  --piloto-danger-soft: #42201f;
+  --piloto-focus: #aeadf5;
+  --piloto-user-bubble: #33335a;
+  --piloto-user-text: #eeeef4;
+  --piloto-shadow-color: #8483e0;
+}
+
+/* ── EasyBits: morado y ámbar, brutalista, nace oscuro. ── */
+.piloto[data-skin="easybits"] {
+  --piloto-font-display: "Big Shoulders Stencil Display", Impact, sans-serif;
+  --piloto-bg: #fffdf7;
+  --piloto-surface: #f6f1ff;
+  --piloto-surface-2: #ece3ff;
+  --piloto-text: #0b0b0f;
+  --piloto-text-2: #3d3a48;
+  --piloto-text-3: #75707f;
+  --piloto-text-inverse: #ffffff;
+  --piloto-inverse: #0b0b0f;
+  --piloto-border: #0b0b0f;
+  --piloto-border-2: #e6e0f2;
+  --piloto-accent: #7c3aed;
+  --piloto-accent-strong: #6d28d9;
+  --piloto-accent-soft: #ede4ff;
+  --piloto-on-accent: #ffffff;
+  --piloto-warning: #fbbf24;
+  --piloto-warning-ink: #0b0b0f;
+  --piloto-focus: #9870ed;
+  --piloto-user-bubble: #7c3aed;
+  --piloto-user-text: #ffffff;
+  --piloto-shadow-color: #0b0b0f;
+  --piloto-radius-bubble: 4px;
+  --piloto-radius-card: 4px;
+  --piloto-radius-input: 6px;
+  --piloto-radius-button: 4px;
+  --piloto-border-width: 3px;
+  --piloto-shadow-card: 5px 5px 0 var(--piloto-shadow-color);
+  --piloto-shadow-input: 5px 5px 0 #7c3aed;
+  --piloto-shadow-hero: 7px 7px 0 #fbbf24;
+}
+.piloto[data-skin="easybits"][data-theme="dark"] {
+  --piloto-bg: #0b0b0f;
+  --piloto-surface: #16141f;
+  --piloto-surface-2: #241f33;
+  --piloto-text: #f6f4fb;
+  --piloto-text-2: #c5c0d3;
+  --piloto-text-3: #8d879c;
+  --piloto-text-disabled: #4f4a5c;
+  --piloto-text-inverse: #0b0b0f;
+  --piloto-inverse: #f6f4fb;
+  --piloto-border: #f6f4fb;
+  --piloto-border-2: #241f33;
+  --piloto-accent: #8b5cf6;
+  --piloto-accent-strong: #a78bfa;
+  --piloto-accent-soft: #2a1d4d;
+  --piloto-on-accent: #ffffff;
+  --piloto-success: #4ade80;
+  --piloto-success-soft: #14321f;
+  --piloto-danger: #f87171;
+  --piloto-danger-soft: #3b1515;
+  --piloto-user-bubble: #7c3aed;
+  --piloto-shadow-color: #7c3aed;
+  --piloto-shadow-input: 5px 5px 0 #7c3aed;
+  --piloto-shadow-hero: 7px 7px 0 #fbbf24;
+}
+
+/* ── Neutral: grafito monocromo, contorno fino; para apps con su propia marca fuerte. ── */
+.piloto[data-skin="neutral"] {
+  --piloto-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --piloto-font-display: ui-sans-serif, system-ui, sans-serif;
+  --piloto-bg: #ffffff;
+  --piloto-surface: #f5f5f4;
+  --piloto-surface-2: #e7e5e4;
+  --piloto-text: #1c1917;
+  --piloto-text-2: #44403c;
+  --piloto-text-3: #78716c;
+  --piloto-inverse: #1c1917;
+  --piloto-border: #1c1917;
+  --piloto-border-2: #e7e5e4;
+  --piloto-accent: #1c1917;
+  --piloto-accent-strong: #1c1917;
+  --piloto-accent-soft: #e7e5e4;
+  --piloto-on-accent: #ffffff;
+  --piloto-warning: #f5f5f4;
+  --piloto-warning-ink: #1c1917;
+  --piloto-focus: #2563eb;
+  --piloto-user-bubble: #f5f5f4;
+  --piloto-user-text: #1c1917;
+  --piloto-shadow-color: #d6d3d1;
+  --piloto-radius-bubble: 10px;
+  --piloto-radius-card: 10px;
+  --piloto-radius-input: 12px;
+  --piloto-radius-button: 8px;
+  --piloto-border-width: 1px;
+  --piloto-shadow-card: 0 0 0 transparent;
+  --piloto-shadow-input: 3px 3px 0 var(--piloto-shadow-color);
+  --piloto-shadow-hero: 4px 4px 0 var(--piloto-shadow-color);
+}
+.piloto[data-skin="neutral"][data-theme="dark"] {
+  --piloto-bg: #171615;
+  --piloto-surface: #22201f;
+  --piloto-surface-2: #2e2b29;
+  --piloto-text: #f5f5f4;
+  --piloto-text-2: #d6d3d1;
+  --piloto-text-3: #a8a29e;
+  --piloto-text-disabled: #57534e;
+  --piloto-text-inverse: #171615;
+  --piloto-inverse: #f5f5f4;
+  --piloto-border: #a8a29e;
+  --piloto-border-2: #2e2b29;
+  --piloto-accent: #f5f5f4;
+  --piloto-accent-strong: #f5f5f4;
+  --piloto-accent-soft: #2e2b29;
+  --piloto-on-accent: #171615;
+  --piloto-warning: #22201f;
+  --piloto-warning-ink: #f5f5f4;
+  --piloto-success: #86efac;
+  --piloto-success-soft: #1c3326;
+  --piloto-danger: #fca5a5;
+  --piloto-danger-soft: #3f1d1d;
+  --piloto-user-bubble: #2e2b29;
+  --piloto-user-text: #f5f5f4;
+  --piloto-shadow-color: #000000;
+}
+
+/* `theme="auto"`: el oscuro de cada piel, siguiendo al sistema. */
+@media (prefers-color-scheme: dark) {
+  .piloto[data-theme="auto"] {
+    --piloto-bg: #15161c;
+    --piloto-surface: #1f2029;
+    --piloto-surface-2: #2b2c38;
+    --piloto-text: #eeeef4;
+    --piloto-text-2: #b9bac6;
+    --piloto-text-3: #858796;
+    --piloto-text-disabled: #575966;
+    --piloto-text-inverse: #15161c;
+    --piloto-inverse: #eeeef4;
+    --piloto-border: #eeeef4;
+    --piloto-border-2: #2b2c38;
+    --piloto-accent: #9998ef;
+    --piloto-accent-strong: #aeadf5;
+    --piloto-accent-soft: #33335a;
+    --piloto-on-accent: #15161c;
+    --piloto-success: #6fcf92;
+    --piloto-success-soft: #1d3a2a;
+    --piloto-danger: #ff7b72;
+    --piloto-danger-soft: #42201f;
+    --piloto-focus: #aeadf5;
+    --piloto-user-bubble: #33335a;
+    --piloto-user-text: #eeeef4;
+    --piloto-shadow-color: #8483e0;
+  }
+  .piloto[data-skin="easybits"][data-theme="auto"] {
+    --piloto-bg: #0b0b0f;
+    --piloto-surface: #16141f;
+    --piloto-surface-2: #241f33;
+    --piloto-text: #f6f4fb;
+    --piloto-text-2: #c5c0d3;
+    --piloto-text-3: #8d879c;
+    --piloto-text-inverse: #0b0b0f;
+    --piloto-inverse: #f6f4fb;
+    --piloto-border: #f6f4fb;
+    --piloto-border-2: #241f33;
+    --piloto-accent: #8b5cf6;
+    --piloto-accent-strong: #a78bfa;
+    --piloto-accent-soft: #2a1d4d;
+    --piloto-success: #4ade80;
+    --piloto-success-soft: #14321f;
+    --piloto-danger: #f87171;
+    --piloto-danger-soft: #3b1515;
+    --piloto-shadow-color: #7c3aed;
+  }
+  .piloto[data-skin="neutral"][data-theme="auto"] {
+    --piloto-bg: #171615;
+    --piloto-surface: #22201f;
+    --piloto-surface-2: #2e2b29;
+    --piloto-text: #f5f5f4;
+    --piloto-text-2: #d6d3d1;
+    --piloto-text-3: #a8a29e;
+    --piloto-text-inverse: #171615;
+    --piloto-inverse: #f5f5f4;
+    --piloto-border: #a8a29e;
+    --piloto-border-2: #2e2b29;
+    --piloto-accent: #f5f5f4;
+    --piloto-accent-strong: #f5f5f4;
+    --piloto-accent-soft: #2e2b29;
+    --piloto-on-accent: #171615;
+    --piloto-warning: #22201f;
+    --piloto-warning-ink: #f5f5f4;
+    --piloto-user-bubble: #2e2b29;
+    --piloto-user-text: #f5f5f4;
+    --piloto-shadow-color: #000000;
+  }
+}
+
+/* ── Reset con alcance: sólo dentro de Piloto, para apps sin Tailwind o con otro. ── */
+.piloto *,
+.piloto *::before,
+.piloto *::after {
+  box-sizing: border-box;
+  border: 0 solid;
+  margin: 0;
+  padding: 0;
+}
+.piloto button,
+.piloto input,
+.piloto textarea,
+.piloto select {
+  font: inherit;
+  color: inherit;
+  background: transparent;
+  letter-spacing: inherit;
+}
+.piloto button { cursor: pointer; }
+.piloto button:disabled { cursor: default; }
+.piloto ul,
+.piloto ol { list-style: none; }
+.piloto img,
+.piloto video,
+.piloto audio { display: block; max-width: 100%; }
+.piloto svg { display: inline-block; flex-shrink: 0; vertical-align: middle; }
+.piloto a { color: inherit; text-decoration: inherit; }
+.piloto summary { list-style: revert; }
+.piloto :focus-visible { outline: 3px solid var(--piloto-focus); outline-offset: 2px; }
+.piloto [hidden] { display: none !important; }
+
+/* ── El marco ─────────────────────────────────────────────────────────────── */
+.piloto .piloto-column,
+.piloto .piloto-dock { max-width: var(--piloto-max-width); }
+.piloto .piloto-agent { max-width: min(100%, 68ch); }
+.piloto .piloto-scroll { scrollbar-width: thin; scrollbar-color: var(--piloto-border-2) transparent; }
+
+/* Tu mensaje: una pieza sólida de color, sin sombra (la sombra es de lo que se toca). */
+.piloto .piloto-bubble-user {
+  background: var(--piloto-user-bubble);
+  color: var(--piloto-user-text);
+  border: var(--piloto-hairline) solid color-mix(in srgb, var(--piloto-border) 22%, transparent);
+}
+
+/* La caja de escribir: contorno grueso y sombra dura. Al enfocar, la sombra se corre: «listo». */
+.piloto .piloto-composer {
+  background: var(--piloto-bg);
+  border: var(--piloto-border-width) solid var(--piloto-border);
+  box-shadow: var(--piloto-shadow-input);
+  transition: box-shadow 120ms ease-out, transform 120ms ease-out;
+}
+.piloto .piloto-composer:focus-within { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--piloto-accent); }
+.piloto[data-skin="neutral"] .piloto-composer:focus-within { transform: none; box-shadow: 0 0 0 3px var(--piloto-accent-soft); }
+.piloto .piloto-textarea::placeholder { color: var(--piloto-text-3); }
+/* El foco de la caja lo dice su sombra; el anillo va en los botones. */
+.piloto .piloto-textarea:focus-visible { outline: none; }
+
+.piloto .piloto-send {
+  background: var(--piloto-surface-2);
+  color: var(--piloto-text-disabled);
+  border: var(--piloto-border-width) solid transparent;
+}
+.piloto .piloto-send[data-ready] {
+  background: var(--piloto-accent);
+  color: var(--piloto-on-accent);
+  border-color: var(--piloto-border);
+}
+.piloto .piloto-send[data-ready]:hover { background: var(--piloto-accent-strong); }
+.piloto .piloto-send[data-ready]:active { transform: translate(1px, 1px); }
+
+/* Botones con peso: presionarlos los hunde en su sombra. */
+.piloto .piloto-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4em;
+  min-height: 40px;
+  padding: 0 1.1em;
+  border-radius: var(--piloto-radius-button);
+  border: var(--piloto-border-width) solid var(--piloto-border);
+  font-weight: 650;
+  font-size: 0.94em;
+  transition: transform 90ms ease-out, box-shadow 90ms ease-out, background-color 120ms;
+}
+.piloto .piloto-btn:disabled { opacity: 0.45; }
+.piloto .piloto-btn-go {
+  background: var(--piloto-accent);
+  color: var(--piloto-on-accent);
+  box-shadow: 3px 3px 0 var(--piloto-shadow-color);
+}
+.piloto .piloto-btn-go:not(:disabled):hover { background: var(--piloto-accent-strong); }
+.piloto .piloto-btn-go:not(:disabled):active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--piloto-shadow-color); }
+.piloto .piloto-btn-quiet { background: var(--piloto-bg); color: var(--piloto-text); }
+.piloto .piloto-btn-quiet:not(:disabled):hover { background: var(--piloto-surface); }
+.piloto .piloto-btn[aria-busy] { animation: piloto-blink 0.8s steps(2, jump-none) infinite; }
+.piloto .piloto-primary { background: var(--piloto-accent); color: var(--piloto-on-accent); }
+.piloto .piloto-secondary { background: var(--piloto-surface); color: var(--piloto-text); border: var(--piloto-hairline) solid var(--piloto-border-2); }
+
+/* Los pasos: en vivo, renglones sueltos; al cerrar el turno la misma vista se vuelve tarjeta. */
+.piloto .piloto-steps {
+  border: var(--piloto-border-width) solid var(--piloto-border-2);
+  background: var(--piloto-bg);
+}
+.piloto .piloto-steps:hover { border-color: var(--piloto-border); }
+.piloto .piloto-steps[data-live] { border-color: transparent; background: transparent; }
+.piloto .piloto-step-detail { color: var(--piloto-text-3); margin-left: 0.6em; }
+.piloto .piloto-step { animation: piloto-step-in 220ms cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
+
+/* La narración: casillas palomeadas de una lista de verificación. */
+.piloto .piloto-narration > li > span:first-child {
+  border: var(--piloto-hairline) solid var(--piloto-accent);
+  border-radius: 4px;
+  background: var(--piloto-accent-soft);
+  color: var(--piloto-accent-strong);
+}
+
+/* Opciones de respuesta: botones de ancho completo con contorno. */
+.piloto .piloto-option {
+  border: var(--piloto-border-width) solid var(--piloto-border-2);
+  border-radius: var(--piloto-radius-button);
+}
+.piloto .piloto-option:hover { border-color: var(--piloto-border); background: var(--piloto-surface); }
+.piloto .piloto-suggestion {
+  border: var(--piloto-border-width) solid var(--piloto-border-2);
+}
+.piloto .piloto-suggestion:hover { border-color: var(--piloto-border); color: var(--piloto-text); }
+
+.piloto .piloto-reference {
+  border: var(--piloto-hairline) solid var(--piloto-accent);
+  background: var(--piloto-accent-soft);
+}
+
+.piloto .piloto-to-bottom { border: var(--piloto-border-width) solid var(--piloto-border); background: var(--piloto-bg); color: var(--piloto-text); }
+
+.piloto .piloto-menu { border: var(--piloto-border-width) solid var(--piloto-border); box-shadow: var(--piloto-shadow-card); }
+.piloto .piloto-drop { background: color-mix(in srgb, var(--piloto-bg) 86%, transparent); }
+.piloto .piloto-dialog { border: var(--piloto-border-width) solid var(--piloto-border); box-shadow: var(--piloto-shadow-hero); }
+.piloto .piloto-avatar-default {
+  display: block;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: var(--piloto-accent);
+  border: var(--piloto-border-width) solid var(--piloto-border);
+  box-shadow: 3px 3px 0 var(--piloto-shadow-color);
+}
+.piloto .piloto-welcome > div {
+  font-family: var(--piloto-font-display);
+  font-weight: 800;
+  font-size: clamp(30px, 5vw, 44px);
+  line-height: 1;
+  letter-spacing: 0.01em;
+  max-width: 18ch;
+}
+.piloto .piloto-wait-time { margin-left: 0.7em; color: var(--piloto-text-3); font-variant-numeric: tabular-nums; }
+.piloto .piloto-system-note { border: var(--piloto-hairline) solid var(--piloto-border-2); }
+
+/* Pensando: tres luces de cabina que se encienden por turno, sin suavizado (steps). */
+.piloto .piloto-typing { display: flex; gap: 5px; }
+.piloto .piloto-typing-dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 2px;
+  border: var(--piloto-hairline) solid var(--piloto-border);
+  background: var(--piloto-surface-2);
+  animation: piloto-lamp 1.2s steps(1, end) infinite;
+}
+.piloto .piloto-typing-dot:nth-child(2) { animation-delay: 0.4s; }
+.piloto .piloto-typing-dot:nth-child(3) { animation-delay: 0.8s; }
+.piloto .piloto-rec-dot { background: var(--piloto-danger); animation: piloto-blink 1s steps(2, jump-none) infinite; }
+
+/* ── El pase de permiso (la pieza héroe) ───────────────────────────────────── */
+.piloto .piloto-ticket {
+  position: relative;
+  max-width: min(100%, 560px);
+  background: var(--piloto-bg);
+  color: var(--piloto-text);
+  border: var(--piloto-border-width) solid var(--piloto-border);
+  border-radius: var(--piloto-radius-card);
+  box-shadow: var(--piloto-shadow-hero);
+  animation: piloto-ticket-in 340ms cubic-bezier(0.2, 0.9, 0.25, 1.25) both;
+  overflow: hidden;
+}
+.piloto .piloto-ticket-head { display: flex; gap: 14px; padding: 16px 18px 14px; background: var(--piloto-warning); color: var(--piloto-warning-ink); }
+.piloto .piloto-ticket-icon {
+  display: grid;
+  place-items: center;
+  width: 38px;
+  height: 38px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  border: var(--piloto-border-width) solid currentColor;
+  background: var(--piloto-bg);
+  color: var(--piloto-text);
+}
+.piloto .piloto-ticket-ask { font-size: 0.86em; opacity: 0.8; }
+.piloto .piloto-ticket-title { font-size: 1.12em; font-weight: 700; line-height: 1.3; margin-top: 2px; text-wrap: balance; }
+.piloto .piloto-ticket-tool {
+  display: inline-block;
+  margin-top: 6px;
+  padding: 1px 7px;
+  border-radius: 4px;
+  border: var(--piloto-hairline) solid currentColor;
+  font-family: var(--piloto-font-mono);
+  font-size: 0.78em;
+  opacity: 0.85;
+}
+/* El corte del pase: línea punteada con dos muescas. */
+.piloto .piloto-ticket-tear {
+  position: relative;
+  height: 0;
+  border-top: var(--piloto-border-width) dashed var(--piloto-border);
+}
+.piloto .piloto-ticket-tear::before,
+.piloto .piloto-ticket-tear::after {
+  content: "";
+  position: absolute;
+  top: -9px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--piloto-bg);
+  border: var(--piloto-border-width) solid var(--piloto-border);
+}
+.piloto .piloto-ticket-tear::before { left: -10px; }
+.piloto .piloto-ticket-tear::after { right: -10px; }
+.piloto .piloto-ticket-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px 16px; flex-wrap: wrap; }
+.piloto .piloto-ticket-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
+.piloto .piloto-ticket-clock {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-family: var(--piloto-font-display);
+  font-weight: 800;
+  font-size: 1.5em;
+  letter-spacing: 0.04em;
+  font-variant-numeric: tabular-nums;
+  color: var(--piloto-text-2);
+}
+.piloto .piloto-ticket[data-urgent] .piloto-ticket-clock { color: var(--piloto-danger); }
+/* La mecha: lo que queda, una barra sólida que se consume. */
+.piloto .piloto-fuse { height: 8px; background: var(--piloto-surface-2); border-top: var(--piloto-border-width) solid var(--piloto-border); }
+.piloto .piloto-fuse > span {
+  display: block;
+  height: 100%;
+  background: var(--piloto-accent);
+  transform-origin: left center;
+  transition: transform 1s linear;
+}
+.piloto .piloto-ticket[data-urgent] .piloto-fuse > span { background: var(--piloto-danger); }
+.piloto .piloto-ticket-problem { padding: 0 18px 14px; font-size: 0.86em; color: var(--piloto-danger); }
+/* El sello: cae torcido, como hule sobre papel. */
+.piloto .piloto-stamp {
+  position: absolute;
+  right: 22px;
+  top: 50%;
+  padding: 4px 14px 2px;
+  border: 4px solid currentColor;
+  border-radius: 8px;
+  font-family: var(--piloto-font-display);
+  font-weight: 900;
+  font-size: 30px;
+  line-height: 1;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  background: color-mix(in srgb, var(--piloto-bg) 82%, transparent);
+  pointer-events: none;
+  animation: piloto-stamp 380ms cubic-bezier(0.3, 1.4, 0.5, 1) both;
+  transform: translateY(-50%) rotate(-9deg);
+}
+.piloto .piloto-stamp[data-kind="approved"] { color: var(--piloto-success); }
+.piloto .piloto-stamp[data-kind="rejected"] { color: var(--piloto-danger); }
+.piloto .piloto-stamp[data-kind="expired"] { color: var(--piloto-text-3); }
+.piloto .piloto-ticket:not([data-state="open"]) .piloto-ticket-head,
+.piloto .piloto-ticket:not([data-state="open"]) .piloto-ticket-foot { opacity: 0.55; transition: opacity 200ms; }
+
+/* Lo que ya decidiste, bajo la respuesta. */
+.piloto .piloto-decisions { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
+.piloto .piloto-decision {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: 0.9em;
+  color: var(--piloto-text-2);
+  animation: piloto-fade-up 240ms ease-out both;
+}
+.piloto .piloto-decision svg { margin-top: 3px; }
+.piloto .piloto-decision[data-status="approved"] svg { color: var(--piloto-success); }
+.piloto .piloto-decision[data-status="rejected"] svg { color: var(--piloto-danger); }
+.piloto .piloto-decision[data-status="expired"] svg { color: var(--piloto-text-3); }
+.piloto .piloto-decision strong { color: var(--piloto-text); font-weight: 650; }
+.piloto .piloto-decision-detail { color: var(--piloto-text-3); }
+
+/* ── Markdown de las respuestas (Streamdown) ── */
+.piloto .piloto-md { line-height: 1.62; color: var(--piloto-text); }
+.piloto .piloto-md p { margin: 0 0 0.8rem 0; }
+.piloto .piloto-md p:last-child { margin-bottom: 0; }
+.piloto .piloto-md h1,
+.piloto .piloto-md h2,
+.piloto .piloto-md h3,
+.piloto .piloto-md h4 { margin: 1.1rem 0 0.45rem 0; font-weight: 750; line-height: 1.25; text-wrap: balance; }
+.piloto .piloto-md h1 { font-size: 1.4em; }
+.piloto .piloto-md h2 { font-size: 1.22em; }
+.piloto .piloto-md h3 { font-size: 1.08em; }
+.piloto .piloto-md h1:first-child,
+.piloto .piloto-md h2:first-child,
+.piloto .piloto-md h3:first-child { margin-top: 0; }
+.piloto .piloto-md ul,
+.piloto .piloto-md ol { margin: 0.5rem 0 0.8rem; padding: 0; }
+.piloto .piloto-md ol { counter-reset: piloto-list 0; }
+.piloto .piloto-md li { position: relative; padding-left: 1.4rem; margin: 0 0 0.3rem 0; }
+.piloto .piloto-md ul > li::before {
+  content: "";
+  position: absolute;
+  left: 0.3rem;
+  top: 0.62em;
+  width: 6px;
+  height: 6px;
+  background: var(--piloto-accent);
+  border-radius: 1px;
+}
+.piloto .piloto-md ol > li { counter-increment: piloto-list 1; }
+.piloto .piloto-md ol > li::before { content: counter(piloto-list) "."; position: absolute; left: 0; color: var(--piloto-text-3); font-weight: 650; font-variant-numeric: tabular-nums; }
+.piloto .piloto-md strong { font-weight: 700; }
+.piloto .piloto-md em { font-style: italic; }
+.piloto .piloto-md a {
+  color: var(--piloto-text);
+  text-decoration: underline;
+  text-decoration-color: var(--piloto-accent);
+  text-decoration-thickness: 2px;
+  text-underline-offset: 3px;
+}
+.piloto .piloto-md a:hover { background: var(--piloto-accent-soft); }
+.piloto .piloto-md :not(pre) > code { background: var(--piloto-surface-2); padding: 0.1rem 0.35rem; border-radius: 4px; font-size: 0.86em; font-family: var(--piloto-font-mono); }
+.piloto .piloto-md pre { max-width: 100%; overflow-x: auto; font-family: var(--piloto-font-mono); font-size: 0.85em; }
+.piloto .piloto-md blockquote { border-left: 3px solid var(--piloto-accent); padding-left: 0.85rem; color: var(--piloto-text-2); margin: 0.6rem 0; }
+.piloto .piloto-md hr { border-top: var(--piloto-border-width) solid var(--piloto-border-2); margin: 1.2rem 0; }
+.piloto .piloto-md table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-variant-numeric: tabular-nums; }
+.piloto .piloto-md th { font-weight: 700; text-align: left; background: var(--piloto-surface); }
+.piloto .piloto-md th,
+.piloto .piloto-md td { border: var(--piloto-hairline) solid var(--piloto-border-2); padding: 0.4rem 0.7rem; }
+.piloto .piloto-md img { max-width: 100%; height: auto; border-radius: 6px; }
+.piloto .piloto-md [data-streamdown="code-block"],
+.piloto .piloto-md [data-streamdown="table-wrapper"] {
+  margin: 0.8rem 0;
+  border: var(--piloto-border-width) solid var(--piloto-border-2) !important;
+  border-radius: calc(var(--piloto-radius-card) - 4px) !important;
+  box-shadow: none !important;
+}
+
+/* ── Movimiento: sólo lo que responde o dice «sigo vivo». Se apaga con reduce-motion. ── */
+@keyframes piloto-chunk { from { opacity: 0; } }
+@keyframes piloto-fade-up { from { opacity: 0; transform: translateY(4px); } }
+@keyframes piloto-step-in { from { opacity: 0; transform: translateX(-6px); } }
+@keyframes piloto-lamp { 0% { background: var(--piloto-accent); } 33%, 100% { background: var(--piloto-surface-2); } }
+@keyframes piloto-blink { 50% { opacity: 0.35; } }
+@keyframes piloto-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.5; } }
+@keyframes piloto-pop { from { transform: scale(0); } }
+@keyframes piloto-ellipsis { 0% { opacity: 0; } 20%, 80% { opacity: 1; } 100% { opacity: 0; } }
+@keyframes piloto-ticket-in {
+  from { opacity: 0; transform: translate(6px, 6px); box-shadow: 0 0 0 var(--piloto-shadow-color); }
+}
+@keyframes piloto-stamp {
+  0% { opacity: 0; transform: translateY(-50%) rotate(-18deg) scale(2.2); }
+  70% { opacity: 1; transform: translateY(-50%) rotate(-8deg) scale(0.94); }
+  100% { opacity: 1; transform: translateY(-50%) rotate(-9deg) scale(1); }
+}
+@keyframes piloto-claw-dip { 0%, 55%, 100% { transform: translateY(0); } 15%, 25% { transform: translateY(2.5px); } 40% { transform: translateY(0); } }
+@keyframes piloto-claw-l { 0%, 15%, 50%, 100% { transform: rotate(0); } 25%, 40% { transform: rotate(-16deg); } }
+@keyframes piloto-claw-r { 0%, 15%, 50%, 100% { transform: rotate(0); } 25%, 40% { transform: rotate(16deg); } }
+
+.piloto .piloto-chunk-in { animation: piloto-chunk 400ms linear both; }
+.piloto .piloto-fade-up { animation: piloto-fade-up 0.25s ease-out both; }
+.piloto .piloto-pulse { animation: piloto-pulse 1.1s ease-in-out infinite; }
+.piloto .piloto-pop { animation: piloto-pop 0.25s ease-out both; }
+.piloto .piloto-ellipsis { animation: piloto-ellipsis 1.4s linear infinite; }
+
+/* La garra: baja, cierra, sube con el premio, suelta y descansa. */
+.piloto .piloto-claw { overflow: visible; }
+.piloto .piloto-claw-rig,
+.piloto .piloto-claw-l,
+.piloto .piloto-claw-r { transform-box: fill-box; }
+.piloto .piloto-claw-l { transform-origin: 100% 0; }
+.piloto .piloto-claw-r { transform-origin: 0 0; }
+.piloto .piloto-claw .piloto-claw-rig { animation: piloto-claw-dip 2.4s ease-in-out infinite both; }
+.piloto .piloto-claw .piloto-claw-l { animation: piloto-claw-l 2.4s ease-in-out infinite both; }
+.piloto .piloto-claw .piloto-claw-r { animation: piloto-claw-r 2.4s ease-in-out infinite both; }
+
+@media (prefers-reduced-motion: reduce) {
+  .piloto *,
+  .piloto *::before,
+  .piloto *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+  .piloto .piloto-typing-dot:first-child { background: var(--piloto-accent); }
+}
+
+/* Teléfono: el pase ocupa el ancho y sus botones también. */
+@media (max-width: 520px) {
+  .piloto .piloto-ticket-actions { width: 100%; }
+  .piloto .piloto-ticket-actions .piloto-btn { flex: 1; }
+  .piloto .piloto-stamp { font-size: 24px; right: 14px; }
+}