lookbook 2.3.1 → 3.0.0.alpha.1

data/public/lookbook-assets/app.css

@@ -0,0 +1,2693 @@
+:root {
+  /*
+   * Primitives
+   */
+
+  /* Colors */
+
+  --lb-color-white: #fff;
+  --lb-color-black: #000;
+
+  --lb-color-stone-50: #fafaf9;
+  --lb-color-stone-100: #f5f5f4;
+  --lb-color-stone-200: #e7e5e4;
+  --lb-color-stone-300: #d6d3d1;
+  --lb-color-stone-400: #a8a29e;
+  --lb-color-stone-500: #78716c;
+  --lb-color-stone-600: #57534e;
+  --lb-color-stone-700: #44403c;
+  --lb-color-stone-800: #292524;
+  --lb-color-stone-900: #1c1917;
+  --lb-color-stone-950: #0c0a09;
+
+  --lb-color-gray-50: #f9fafb;
+  --lb-color-gray-100: #f3f4f6;
+  --lb-color-gray-200: #e5e7eb;
+  --lb-color-gray-300: #d1d5db;
+  --lb-color-gray-400: #9ca3af;
+  --lb-color-gray-500: #6b7280;
+  --lb-color-gray-600: #4b5563;
+  --lb-color-gray-700: #374151;
+  --lb-color-gray-800: #1f2937;
+  --lb-color-gray-900: #111827;
+  --lb-color-gray-950: #030712;
+
+  --lb-color-slate-50: #f8fafc;
+  --lb-color-slate-100: #f1f5f9;
+  --lb-color-slate-200: #e2e8f0;
+  --lb-color-slate-300: #cbd5e1;
+  --lb-color-slate-400: #94a3b8;
+  --lb-color-slate-500: #64748b;
+  --lb-color-slate-600: #475569;
+  --lb-color-slate-700: #334155;
+  --lb-color-slate-800: #1e293b;
+  --lb-color-slate-900: #0f172a;
+  --lb-color-slate-950: #020617;
+
+  --lb-color-zinc-50: #fafafa;
+  --lb-color-zinc-100: #f4f4f5;
+  --lb-color-zinc-200: #e4e4e7;
+  --lb-color-zinc-300: #d4d4d8;
+  --lb-color-zinc-400: #a1a1aa;
+  --lb-color-zinc-500: #71717a;
+  --lb-color-zinc-600: #52525b;
+  --lb-color-zinc-700: #3f3f46;
+  --lb-color-zinc-800: #27272a;
+  --lb-color-zinc-900: #18181b;
+  --lb-color-zinc-950: #09090b;
+
+  --lb-color-red-50: #fef2f2;
+  --lb-color-red-100: #fee2e2;
+  --lb-color-red-200: #fecaca;
+  --lb-color-red-300: #fca5a5;
+  --lb-color-red-400: #f87171;
+  --lb-color-red-500: #ef4444;
+  --lb-color-red-600: #dc2626;
+  --lb-color-red-700: #b91c1c;
+  --lb-color-red-800: #991b1b;
+  --lb-color-red-900: #7f1d1d;
+  --lb-color-red-950: #450a0a;
+
+  --lb-color-amber-50: #fffbeb;
+  --lb-color-amber-100: #fef3c7;
+  --lb-color-amber-200: #fde68a;
+  --lb-color-amber-300: #fcd34d;
+  --lb-color-amber-400: #fbbf24;
+  --lb-color-amber-500: #f59e0b;
+  --lb-color-amber-600: #d97706;
+  --lb-color-amber-700: #b45309;
+  --lb-color-amber-800: #92400e;
+  --lb-color-amber-900: #78350f;
+  --lb-color-amber-950: #451a03;
+
+  --lb-color-green-50: #f0fdf4;
+  --lb-color-green-100: #dcfce7;
+  --lb-color-green-200: #bbf7d0;
+  --lb-color-green-300: #86efac;
+  --lb-color-green-400: #4ade80;
+  --lb-color-green-500: #22c55e;
+  --lb-color-green-600: #16a34a;
+  --lb-color-green-700: #15803d;
+  --lb-color-green-800: #166534;
+  --lb-color-green-900: #14532d;
+  --lb-color-green-950: #052e16;
+
+  --lb-color-emerald-50: #ecfdf5;
+  --lb-color-emerald-100: #d1fae5;
+  --lb-color-emerald-200: #a7f3d0;
+  --lb-color-emerald-300: #6ee7b7;
+  --lb-color-emerald-400: #34d399;
+  --lb-color-emerald-500: #10b981;
+  --lb-color-emerald-600: #059669;
+  --lb-color-emerald-700: #047857;
+  --lb-color-emerald-800: #065f46;
+  --lb-color-emerald-900: #064e3b;
+  --lb-color-emerald-950: #022c22;
+
+  --lb-color-blue-50: #eff6ff;
+  --lb-color-blue-100: #dbeafe;
+  --lb-color-blue-200: #bfdbfe;
+  --lb-color-blue-300: #93c5fd;
+  --lb-color-blue-400: #60a5fa;
+  --lb-color-blue-500: #3b82f6;
+  --lb-color-blue-600: #2563eb;
+  --lb-color-blue-700: #1d4ed8;
+  --lb-color-blue-800: #1e40af;
+  --lb-color-blue-900: #1e3a8a;
+  --lb-color-blue-950: #172554;
+
+  --lb-color-indigo-50: #eef2ff;
+  --lb-color-indigo-100: #e0e7ff;
+  --lb-color-indigo-200: #c7d2fe;
+  --lb-color-indigo-300: #a5b4fc;
+  --lb-color-indigo-400: #818cf8;
+  --lb-color-indigo-500: #6366f1;
+  --lb-color-indigo-600: #4f46e5;
+  --lb-color-indigo-700: #4338ca;
+  --lb-color-indigo-800: #3730a3;
+  --lb-color-indigo-900: #312e81;
+  --lb-color-indigo-950: #1e1b4b;
+
+  --lb-color-violet-50: #f5f3ff;
+  --lb-color-violet-100: #ede9fe;
+  --lb-color-violet-200: #ddd6fe;
+  --lb-color-violet-300: #c4b5fd;
+  --lb-color-violet-400: #a78bfa;
+  --lb-color-violet-500: #8b5cf6;
+  --lb-color-violet-600: #7c3aed;
+  --lb-color-violet-700: #6d28d9;
+  --lb-color-violet-800: #5b21b6;
+  --lb-color-violet-900: #4c1d95;
+  --lb-color-violet-950: #2e1065;
+
+  --lb-color-pink-50: #fdf2f8;
+  --lb-color-pink-100: #fce7f3;
+  --lb-color-pink-200: #fbcfe8;
+  --lb-color-pink-300: #f9a8d4;
+  --lb-color-pink-400: #f472b6;
+  --lb-color-pink-500: #ec4899;
+  --lb-color-pink-600: #db2777;
+  --lb-color-pink-700: #be185d;
+  --lb-color-pink-800: #9d174d;
+  --lb-color-pink-900: #831843;
+  --lb-color-pink-950: #500724;
+
+  --lb-color-fuscia-50: #fdf4ff;
+  --lb-color-fuscia-100: #fae8ff;
+  --lb-color-fuscia-200: #f5d0fe;
+  --lb-color-fuscia-300: #f0abfc;
+  --lb-color-fuscia-400: #e879f9;
+  --lb-color-fuscia-500: #d946ef;
+  --lb-color-fuscia-600: #c026d3;
+  --lb-color-fuscia-700: #a21caf;
+  --lb-color-fuscia-800: #86198f;
+  --lb-color-fuscia-900: #701a75;
+  --lb-color-fuscia-950: #4a044e;
+
+  --lb-color-positive-50: var(--lb-color-green-50);
+  --lb-color-positive-100: var(--lb-color-green-100);
+  --lb-color-positive-200: var(--lb-color-green-200);
+  --lb-color-positive-300: var(--lb-color-green-300);
+  --lb-color-positive-400: var(--lb-color-green-400);
+  --lb-color-positive-500: var(--lb-color-green-500);
+  --lb-color-positive-600: var(--lb-color-green-600);
+  --lb-color-positive-700: var(--lb-color-green-700);
+  --lb-color-positive-800: var(--lb-color-green-800);
+  --lb-color-positive-900: var(--lb-color-green-900);
+  --lb-color-positive-950: var(--lb-color-green-950);
+
+  --lb-color-info-50: var(--lb-color-blue-50);
+  --lb-color-info-100: var(--lb-color-blue-100);
+  --lb-color-info-200: var(--lb-color-blue-200);
+  --lb-color-info-300: var(--lb-color-blue-300);
+  --lb-color-info-400: var(--lb-color-blue-400);
+  --lb-color-info-500: var(--lb-color-blue-500);
+  --lb-color-info-600: var(--lb-color-blue-600);
+  --lb-color-info-700: var(--lb-color-blue-700);
+  --lb-color-info-800: var(--lb-color-blue-800);
+  --lb-color-info-900: var(--lb-color-blue-900);
+  --lb-color-info-950: var(--lb-color-blue-950);
+
+  --lb-color-warning-50: var(--lb-color-amber-50);
+  --lb-color-warning-100: var(--lb-color-amber-100);
+  --lb-color-warning-200: var(--lb-color-amber-200);
+  --lb-color-warning-300: var(--lb-color-amber-300);
+  --lb-color-warning-400: var(--lb-color-amber-400);
+  --lb-color-warning-500: var(--lb-color-amber-500);
+  --lb-color-warning-600: var(--lb-color-amber-600);
+  --lb-color-warning-700: var(--lb-color-amber-700);
+  --lb-color-warning-800: var(--lb-color-amber-800);
+  --lb-color-warning-900: var(--lb-color-amber-900);
+  --lb-color-warning-950: var(--lb-color-amber-950);
+
+  --lb-color-negative-50: var(--lb-color-red-50);
+  --lb-color-negative-100: var(--lb-color-red-100);
+  --lb-color-negative-200: var(--lb-color-red-200);
+  --lb-color-negative-300: var(--lb-color-red-300);
+  --lb-color-negative-400: var(--lb-color-red-400);
+  --lb-color-negative-500: var(--lb-color-red-500);
+  --lb-color-negative-600: var(--lb-color-red-600);
+  --lb-color-negative-700: var(--lb-color-red-700);
+  --lb-color-negative-800: var(--lb-color-red-800);
+  --lb-color-negative-900: var(--lb-color-red-900);
+  --lb-color-negative-950: var(--lb-color-red-950);
+
+  /* Spacing and sizes */
+
+  --lb-spacing-3xs: 0.125rem; /* 2px */
+  --lb-spacing-2xs: 0.25rem; /* 4px */
+  --lb-spacing-xs: 0.5rem; /* 8px */
+  --lb-spacing-sm: 0.75rem; /* 12px */
+  --lb-spacing-md: 1rem; /* 16px */
+  --lb-spacing-lg: 1.25rem; /* 20px */
+  --lb-spacing-xl: 1.5rem; /* 24px */
+  --lb-spacing-2xl: 2rem; /* 32px */
+  --lb-spacing-3xl: 2.5rem; /* 40px */
+  --lb-spacing-4xl: 3rem; /* 48px */
+
+  --lb-size-3xs: 0.125rem; /* 2px */
+  --lb-size-2xs: 0.25rem; /* 4px */
+  --lb-size-xs: 0.5rem; /* 8px */
+  --lb-size-sm: 0.75rem; /* 12px */
+  --lb-size-md: 1rem; /* 16px */
+  --lb-size-lg: 1.25rem; /* 20px */
+  --lb-size-xl: 1.5rem; /* 24px */
+  --lb-size-2xl: 2rem; /* 32px */
+  --lb-size-3xl: 2.5rem; /* 40px */
+  --lb-size-4xl: 3rem; /* 48px */
+
+  /* Typography */
+
+  --lb-font-ui: "Inter Var", Roboto, "Helvetica Neue", "Arial Nova",
+    "Nimbus Sans", Arial, sans-serif;
+  --lb-font-prose: "Open Sans Var", Avenir, Montserrat, Corbel, "URW Gothic",
+    source-sans-pro, sans-serif;
+  --lb-font-mono: "Source Code Pro Var", ui-monospace, "Cascadia Code", Menlo,
+    Consolas, "DejaVu Sans Mono", monospace;
+
+  --lb-font-size-xs: 0.75rem; /* 12px */
+  --lb-font-size-sm: 0.875rem; /* 14px */
+  --lb-font-size-md: 1rem; /* 16px */
+  --lb-font-size-lg: 1.25rem; /* 20px */
+  --lb-font-size-xl: 1.5rem; /* 24px */
+  --lb-font-size-2xl: 2.25rem; /* 36px */
+
+  --lb-font-weight-light: 300;
+  --lb-font-weight-normal: 400;
+  --lb-font-weight-medium: 500;
+  --lb-font-weight-semibold: 600;
+  --lb-font-weight-bold: 700;
+
+  /* Borders */
+
+  --lb-border-radius-sm: 0.25rem; /* 4px */
+  --lb-border-radius-md: 0.5rem; /* 8px */
+  --lb-border-radius-lg: 1rem; /* 16px */
+
+  /* Shadows */
+
+  --lb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --lb-shadow-md: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --lb-shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+  /* Backgrounds */
+
+  --lb-checked-background-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23f3f3f3' fill-opacity='1'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
+  --lb-checked-background-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23333333' fill-opacity='1'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
+
+  /*
+   * Components
+   */
+
+  /* Panels */
+
+  --lb-panel-padding: var(--lb-spacing-md);
+}
+:root {
+  /*
+   * Default values
+   */
+
+  --lb-color-surface-1: var(--lb-color-white);
+  --lb-color-surface-2: var(--lb-color-gray-50);
+  --lb-color-surface-3: var(--lb-color-gray-100);
+
+  --lb-color-surface-divider: var(--lb-color-gray-300);
+  --lb-color-surface-inverted: var(--lb-color-gray-800);
+  --lb-color-surface-accent: var(--lb-color-indigo-600);
+
+  --lb-color-content-1: var(--lb-color-gray-800);
+  --lb-color-content-2: var(--lb-color-gray-500);
+  --lb-color-content-3: var(--lb-color-gray-300);
+
+  --lb-color-content-1-accent: var(--lb-color-indigo-700);
+  --lb-color-content-2-accent: var(--lb-color-indigo-500);
+  --lb-color-content-3-accent: var(--lb-color-indigo-300);
+
+  --lb-color-content-inverted: var(--lb-color-white);
+  --lb-color-content-positive: var(--lb-color-positive-600);
+  --lb-color-content-negative: var(--lb-color-negative-600);
+  --lb-color-content-info: var(--lb-color-info-600);
+
+  --lb-color-content-positive: var(--lb-color-positive-600);
+  --lb-color-content-negative: var(--lb-color-negative-600);
+  --lb-color-content-info: var(--lb-color-info-600);
+  --lb-color-content-warning: var(--lb-color-warning-600);
+
+  /*
+   * General
+   */
+
+  --lb-focus-outline-color: var(--lb-color-content-3-accent);
+  --lb-background-checked: var(--lb-checked-background-light);
+
+  /*
+   * Tooltips
+   */
+
+  --lb-tooltip-color: var(--lb-color-content-inverted);
+  --lb-tooltip-background-color: var(--lb-color-surface-inverted);
+
+  /*
+   * Buttons
+   */
+
+  --lb-button-color: var(--lb-color-content-1);
+  --lb-button-background-color: var(--lb-color-surface-3);
+  --lb-button-border-color: var(--lb-color-content-3);
+  --lb-button-color-hover: var(--lb-color-content-1-accent);
+
+  /*
+   * Inputs
+   */
+
+  --lb-input-color: var(--lb-color-content-1);
+  --lb-input-background-color: var(--lb-color-surface-1);
+  --lb-input-border-color: var(--lb-color-surface-divider);
+  --lb-input-outline-color-focus: var(--lb-color-content-3-accent);
+  --lb-input-placeholder-color: var(--lb-color-content-2);
+
+  --lb-checkbox-color: var(--lb-color-content-1-accent);
+  --lb-checkbox-background-color: var(--lb-color-surface-1);
+  --lb-checkbox-border-color: var(--lb-color-content-3);
+  --lb-checkbox-outline-color-focus: var(--lb-color-content-2-accent);
+
+  /*
+   * Tables
+   */
+
+  --lb-table-color: var(--lb-color-content-1);
+  --lb-table-border-color: var(--lb-color-surface-divider);
+  --lb-table-background-color: var(--lb-color-surface-1);
+
+  /*
+   * Dropdowns
+   */
+
+  --lb-dropdown-color: var(--lb-color-content-1);
+  --lb-dropdown-background-color: var(--lb-color-surface-1);
+  --lb-dropdown-border-color: var(--lb-color-surface-divider);
+
+  /*
+   * Toolbars
+   */
+
+  --lb-toolbar-color: var(--lb-color-content-1);
+  --lb-toolbar-background-color: var(--lb-color-surface-1);
+
+  --lb-toolbar-button-color: var(--lb-color-content-2);
+  --lb-toolbar-button-color-hover: var(--lb-color-content-1);
+  --lb-toolbar-button-color-active: var(--lb-color-content-2-accent);
+
+  /*
+   * Tabs
+   */
+
+  --lb-tab-color: var(--lb-color-content-2);
+  --lb-tab-color-disabled: var(--lb-color-content-3);
+  --lb-tab-color-selected: var(--lb-color-content-2-accent);
+  --lb-tab-border-color-selected: var(--lb-color-content-2-accent);
+  --lb-tab-panel-color: var(--lb-color-content-1);
+  --lb-tab-panel-background-color: var(--lb-color-surface-2);
+
+  /*
+   * Panes
+   */
+
+  --lb-pane-background-color: var(--lb-color-surface-2);
+
+  /*
+   * Prose
+   */
+
+  --lb-prose-color: var(--lb-color-content-1);
+  --lb-prose-list-counter-color: var(--lb-color-content-2);
+  --lb-prose-list-marker-color: var(--lb-color-content-2);
+  --lb-prose-hr-color: var(--lb-color-content-2);
+  --lb-prose-blockquote-color: var(--lb-color-content-2);
+  --lb-prose-blockquote-border-color: var(--lb-color-content-3);
+  --lb-prose-figcaption-color: var(--lb-color-content-2);
+  --lb-prose-inline-code-color: var(--lb-color-content-accent-1);
+  --lb-prose-inline-code-background-color: var(--lb-color-surface-2);
+  --lb-prose-code-background-color: var(--lb-color-surface-1);
+  --lb-prose-code-border-color: var(--lb-color-surface-divider);
+
+  /*
+   * Breadcrumbs
+   */
+
+  --lb-breadrumbs-color: var(--lb-color-content-2);
+  --lb-breadrumbs-color-current: var(--lb-color-content-1);
+  --lb-breadrumbs-link-color: var(--lb-color-content-2);
+  --lb-breadrumbs-link-color-hover: var(--lb-color-content-2-accent);
+
+  /*
+   * Header
+   */
+
+  --lb-header-color: var(--lb-color-white);
+  --lb-header-background-color: var(--lb-color-surface-accent);
+
+  /*
+   * Nav
+   */
+
+  --lb-nav-item-background-color: transparent;
+  --lb-nav-item-border-color: transparent;
+  --lb-nav-item-label-color: var(--lb-color-content-1);
+  --lb-nav-item-icon-color: var(--lb-color-content-1-accent);
+  --lb-nav-item-toggle-color: var(--lb-color-content-2);
+
+  --lb-nav-item-background-color-selected: var(--lb-color-surface-3);
+  --lb-nav-item-border-color-selected: var(--lb-color-content-2-accent);
+  --lb-nav-item-label-color-selected: var(--lb-color-content-1);
+  --lb-nav-item-label-color-hover: var(--lb-color-content-1);
+
+  --lb-nav-placeholder-color: var(--lb-color-content-2);
+  --lb-nav-placeholder-border-color: var(--lb-color-surface-divider);
+  --lb-nav-placeholder-background-color: var(--lb-color-surface-1);
+
+  /*
+   * Status bar
+   */
+
+  --lb-status-bar-color: var(--lb-color-content-1);
+  --lb-status-bar-background-color: var(--lb-color-surface-1);
+
+  /*
+   * Page
+   */
+
+  --lb-page-color: var(--lb-color-content-1);
+  --lb-page-background-color: var(--lb-color-surface-1);
+  --lb-page-divider-color: var(--lb-color-surface-divider);
+  --lb-page-title-color: var(--lb-color-content-1);
+
+  /*
+   * System pages
+   */
+
+  --lb-system-message-color: var(--lb-color-content-2);
+  --lb-system-message-background-color: var(--lb-color-surface-1);
+  --lb-system-message-border-color: var(--lb-color-surface-divider);
+  --lb-system-message-title-color: var(--lb-color-content-1);
+  --lb-system-message-icon-color: var(--lb-color-content-3);
+
+  --lb-system-message-title-color-error: var(--lb-color-content-negative);
+  --lb-system-message-icon-color-error: var(--lb-color-content-negative);
+
+  /*
+   * Viewport
+   */
+
+  --lb-viewport-background-color: var(--lb-color-surface-1);
+  --lb-viewport-dimensions-background-color: var(--lb-color-surface-3);
+  --lb-viewport-handle-background-color: var(--lb-color-surface-1);
+  --lb-viewport-handle-icon-color: var(--lb-color-content-2);
+
+  /*
+   * Color scheme switcher
+   */
+
+  --lb-color-scheme-switcher-button-color: var(--lb-color-content-2);
+  --lb-color-scheme-switcher-button-color-hover: var(--lb-color-content-1);
+  --lb-color-scheme-switcher-icon-color: var(--lb-color-content-2);
+  --lb-color-scheme-switcher-icon-color-hover: var(--lb-color-content-1);
+  --lb-color-scheme-switcher-button-color-selected: var(
+    --lb-color-content-1-accent
+  );
+  --lb-color-scheme-switcher-icon-color-selected: var(
+    --lb-color-content-1-accent
+  );
+}
+@font-face {
+  font-family: "Inter Var";
+  font-weight: 200 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: "Regular";
+  src: url("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2");
+}
+@font-face {
+  font-family: "Inter Var";
+  font-weight: 200 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: "Italic";
+  src: url("./fonts/Inter-italic.var.woff2?v=3.19") format("woff2");
+}
+@font-face {
+  font-family: "Source Code Pro Var";
+  font-weight: 200 900;
+  font-style: normal;
+  font-stretch: normal;
+  src: url("./fonts/SourceCodeVariable-roman.var.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Source Code Pro Var";
+  font-weight: 200 900;
+  font-style: italic;
+  font-stretch: normal;
+  src: url("./fonts/SourceCodeVariable-italic.var.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Open Sans Var";
+  font-weight: 200 900;
+  font-style: normal;
+  font-stretch: normal;
+  src: url("./fonts/OpenSans-VariableFont_wdth,wght.woff2") format("woff2");
+  font-variation-settings: "wdth" 100;
+}
+@font-face {
+  font-family: "Open Sans Var";
+  font-weight: 200 900;
+  font-style: italic;
+  font-stretch: normal;
+  src: url("./fonts/OpenSans-Italic-VariableFont_wdth,wght.woff2")
+    format("woff2");
+  font-variation-settings: "wdth" 100;
+}
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: currentColor;
+}
+html,
+:host {
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  font-feature-settings: normal;
+  font-variation-settings: normal;
+  -webkit-tap-highlight-color: transparent;
+}
+body {
+  margin: 0;
+  line-height: inherit;
+}
+hr {
+  height: 0;
+  color: inherit;
+  border-top-width: 1px;
+}
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline;
+  text-decoration: underline dotted;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+b,
+strong {
+  font-weight: bolder;
+}
+code,
+kbd,
+samp,
+pre {
+  font-feature-settings: normal;
+  font-variation-settings: normal;
+  font-size: 1em;
+}
+small {
+  font-size: 80%;
+}
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sub {
+  bottom: -0.25em;
+}
+sup {
+  top: -0.5em;
+}
+table {
+  text-indent: 0;
+  border-color: inherit;
+  border-collapse: collapse;
+}
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
+  font-size: 100%;
+  font-weight: inherit;
+  line-height: inherit;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+}
+button,
+select {
+  text-transform: none;
+}
+button,
+button[type="button"],
+button[type="reset"],
+button[type="submit"] {
+  -webkit-appearance: button;
+  background-color: transparent;
+  background-image: none;
+}
+:-moz-focusring {
+  outline: auto;
+}
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+progress {
+  vertical-align: baseline;
+}
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+[type="search"] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+summary {
+  display: list-item;
+}
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+legend {
+  padding: 0;
+}
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+dialog {
+  padding: 0;
+}
+textarea {
+  resize: vertical;
+}
+button,
+[role="button"] {
+  cursor: pointer;
+}
+:disabled {
+  cursor: default;
+}
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  vertical-align: middle;
+}
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+[hidden] {
+  display: none;
+}
+html,
+body {
+  font-family: "Inter Var", Roboto, "Helvetica Neue", "Arial Nova",
+    "Nimbus Sans", Arial, sans-serif;
+  font-family: var(--lb-font-ui);
+  font-size: 1rem;
+  font-size: var(--lb-font-size-md);
+  color: var(--lb-body-color);
+}
+body {
+  min-height: 100vh;
+  font-size: 1rem;
+  font-size: var(--lb-font-size-md);
+}
+code {
+  font-family: "Source Code Pro Var", ui-monospace, "Cascadia Code", Menlo,
+    Consolas, "DejaVu Sans Mono", monospace;
+  font-family: var(--lb-font-mono);
+}
+a {
+  transition: color 0.25s ease;
+}
+router {
+  display: contents;
+}
+[x-cloak] {
+  display: none !important;
+}
+:focus-visible {
+  outline: 1px solid transparent;
+  outline-offset: 0;
+  outline-color: #a5b4fc;
+  outline-color: var(--lb-focus-outline-color);
+}
+input[type="text"],
+input:where(:not([type])),
+input[type="email"],
+input[type="url"],
+input[type="password"],
+input[type="number"],
+input[type="date"],
+input[type="datetime-local"],
+input[type="month"],
+input[type="search"],
+input[type="tel"],
+input[type="time"],
+input[type="week"],
+input[multiple],
+textarea,
+select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-color: #fff;
+  background-color: var(--lb-input-background-color);
+  border-color: #d1d5db;
+  border-color: var(--lb-input-border-color);
+  color: #1f2937;
+  color: var(--lb-input-color);
+  border-width: 1px;
+  border-radius: 0px;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-top: var(--lb-spacing-xs);
+  padding-bottom: var(--lb-spacing-xs);
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-left: var(--lb-spacing-sm);
+  padding-right: var(--lb-spacing-sm);
+  font-size: 0.875rem;
+  font-size: var(--lb-font-size-sm);
+  line-height: 1.2rem;
+  border-radius: 0.25rem;
+  border-radius: var(--lb-border-radius-sm);
+  width: 100%;
+}
+[type="text"]:focus,
+input:where(:not([type])):focus,
+[type="email"]:focus,
+[type="url"]:focus,
+[type="password"]:focus,
+[type="number"]:focus,
+[type="date"]:focus,
+[type="datetime-local"]:focus,
+[type="month"]:focus,
+[type="search"]:focus,
+[type="tel"]:focus,
+[type="time"]:focus,
+[type="week"]:focus,
+[multiple]:focus,
+textarea:focus,
+select:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  outline-color: #a5b4fc;
+  outline-color: var(--lb-input-outline-color-focus);
+}
+input::-moz-placeholder,
+textarea::-moz-placeholder {
+  color: #6b7280;
+  color: var(--lb-input-placeholder-color);
+  opacity: 0.7;
+}
+input::-moz-placeholder, textarea::-moz-placeholder {
+  color: #6b7280;
+  color: var(--lb-input-placeholder-color);
+  opacity: 0.7;
+}
+input::placeholder,
+textarea::placeholder {
+  color: #6b7280;
+  color: var(--lb-input-placeholder-color);
+  opacity: 0.7;
+}
+::-webkit-datetime-edit-fields-wrapper {
+  padding: 0;
+}
+::-webkit-date-and-time-value {
+  min-height: 1.5em;
+  text-align: inherit;
+}
+::-webkit-datetime-edit {
+  display: inline-flex;
+}
+::-webkit-datetime-edit,
+::-webkit-datetime-edit-year-field,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-hour-field,
+::-webkit-datetime-edit-minute-field,
+::-webkit-datetime-edit-second-field,
+::-webkit-datetime-edit-millisecond-field,
+::-webkit-datetime-edit-meridiem-field {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+select {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right 0.5rem center;
+  background-repeat: no-repeat;
+  background-size: 1.5em 1.5em;
+  padding-right: 2.5rem;
+  -webkit-print-color-adjust: exact;
+  print-color-adjust: exact;
+}
+[multiple],
+[size]:where(select:not([size="1"])) {
+  background-image: none;
+  background-image: initial;
+  background-position: 0 0;
+  background-position: initial;
+  background-repeat: repeat;
+  background-repeat: initial;
+  background-size: auto auto;
+  background-size: initial;
+  padding-right: 0.75rem;
+  -webkit-print-color-adjust: unset;
+  print-color-adjust: inherit;
+}
+[type="checkbox"],
+[type="radio"] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  padding: 0;
+  -webkit-print-color-adjust: exact;
+  print-color-adjust: exact;
+  display: inline-block;
+  vertical-align: middle;
+  background-origin: border-box;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  flex-shrink: 0;
+  height: 1.25rem;
+  width: 1.25rem;
+  color: #4338ca;
+  color: var(--lb-checkbox-color);
+  background-color: #fff;
+  background-color: var(--lb-checkbox-background-color);
+  border-color: #d1d5db;
+  border-color: var(--lb-checkbox-border-color);
+  border-width: 1px;
+}
+[type="checkbox"] {
+  border-radius: 0px;
+}
+[type="radio"] {
+  border-radius: 100%;
+}
+[type="checkbox"]:focus,
+[type="radio"]:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  outline-color: #6366f1;
+  outline-color: var(--lb-checkbox-outline-color-focus);
+}
+[type="checkbox"]:checked,
+[type="radio"]:checked {
+  border-color: transparent;
+  background-color: currentColor;
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+[type="checkbox"]:checked {
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+}
+@media (forced-colors: active) {
+  [type="checkbox"]:checked {
+    -webkit-appearance: auto;
+    -moz-appearance: auto;
+    appearance: auto;
+  }
+}
+[type="radio"]:checked {
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+}
+@media (forced-colors: active) {
+  [type="radio"]:checked {
+    -webkit-appearance: auto;
+    -moz-appearance: auto;
+    appearance: auto;
+  }
+}
+[type="checkbox"]:checked:hover,
+[type="checkbox"]:checked:focus,
+[type="radio"]:checked:hover,
+[type="radio"]:checked:focus {
+  border-color: transparent;
+  background-color: currentColor;
+}
+[type="checkbox"]:indeterminate {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
+  border-color: transparent;
+  background-color: currentColor;
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+@media (forced-colors: active) {
+  [type="checkbox"]:indeterminate {
+    -webkit-appearance: auto;
+    -moz-appearance: auto;
+    appearance: auto;
+  }
+}
+[type="checkbox"]:indeterminate:hover,
+[type="checkbox"]:indeterminate:focus {
+  border-color: transparent;
+  background-color: currentColor;
+}
+[type="file"] {
+  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
+  background: initial;
+  border-color: inherit;
+  border-width: 0;
+  border-radius: 0;
+  padding: 0;
+  font-size: inherit;
+  line-height: inherit;
+}
+.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}
+[data-tippy-root]{max-width:calc(100vw - 10px)}
+.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}
+.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}
+.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:currentcolor;border-top-color:initial;transform-origin:center top}
+.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}
+.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:currentcolor;border-bottom-color:initial;transform-origin:center bottom}
+.tippy-box[data-placement^=left]>.tippy-arrow{right:0}
+.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:currentcolor;border-left-color:initial;right:-7px;transform-origin:center left}
+.tippy-box[data-placement^=right]>.tippy-arrow{left:0}
+.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:currentcolor;border-right-color:initial;transform-origin:center right}
+.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}
+.tippy-arrow{width:16px;height:16px;color:#333}
+.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}
+.tippy-content{position:relative;padding:5px 9px;z-index:1}
+.tippy-box[data-placement^=top]>.tippy-svg-arrow{bottom:0}
+.tippy-box[data-placement^=top]>.tippy-svg-arrow:after,.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg{top:16px;transform:rotate(180deg)}
+.tippy-box[data-placement^=bottom]>.tippy-svg-arrow{top:0}
+.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg{bottom:16px}
+.tippy-box[data-placement^=left]>.tippy-svg-arrow{right:0}
+.tippy-box[data-placement^=left]>.tippy-svg-arrow:after,.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg{transform:rotate(90deg);top:calc(50% - 3px);left:11px}
+.tippy-box[data-placement^=right]>.tippy-svg-arrow{left:0}
+.tippy-box[data-placement^=right]>.tippy-svg-arrow:after,.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg{transform:rotate(-90deg);top:calc(50% - 3px);right:11px}
+.tippy-svg-arrow{width:16px;height:16px;fill:#333;text-align:left;text-align:initial}
+.tippy-svg-arrow,.tippy-svg-arrow>svg{position:absolute}
+.tippy-box[data-theme~="tooltip"] {
+  background-color: #1f2937;
+  background-color: var(--lb-tooltip-background-color);
+}
+.tippy-box[data-theme~="tooltip"] .tippy-content {
+    color: #fff;
+    color: var(--lb-tooltip-color);
+    font-size: 0.75rem;
+    font-size: var(--lb-font-size-xs);
+  }
+.tippy-box[data-theme~="tooltip"] > .tippy-svg-arrow {
+    fill: #1f2937;
+    fill: var(--lb-tooltip-background-color);
+  }
+.tippy-box[data-theme~="dropdown"] {
+  background-color: #fff;
+  background-color: var(--lb-dropdown-background-color);
+  color: #1f2937;
+  color: var(--lb-dropdown-color);
+  border: 1px solid #d1d5db;
+  border: 1px solid var(--lb-dropdown-border-color);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  box-shadow: var(--lb-shadow-md);
+  max-width: 100%;
+  border-radius: 0;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.tippy-box[data-theme~="dropdown"] .tippy-content {
+    padding: 0;
+  }
+[data-component="app"] {
+  height: 100vh;
+  display: grid;
+  grid-template-rows: min-content 1fr;
+}
+[data-component="app"][data-status-bar="true"] {
+    grid-template-rows: min-content 1fr min-content;
+  }
+[data-component="app"] main {
+    display: contents;
+  }
+[data-component="color-scheme-switcher"] {
+  display: block;
+  height: -moz-fit-content;
+  height: fit-content;
+  line-height: 1;
+}
+[data-component="color-scheme-switcher"] .switcher-button,
+    [data-component="color-scheme-switcher"] .switcher-button:hover,
+    [data-component="color-scheme-switcher"] .switcher-button:active,
+    [data-component="color-scheme-switcher"] .switcher-button.active {
+      color: currentColor;
+    }
+[data-component="color-scheme-switcher"] .switcher-icon-light,
+  [data-component="color-scheme-switcher"] .switcher-icon-dark {
+    display: none;
+  }
+[data-color-scheme="light"] [data-component="color-scheme-switcher"] .switcher-icon-light {
+      display: block;
+    }
+[data-color-scheme="dark"] [data-component="color-scheme-switcher"] .switcher-icon-dark {
+      display: block;
+    }
+[data-component="color-scheme-switcher"] .switcher-dropdown {
+    background-color: #fff;
+    background-color: var(--lb-dropdown-background-color);
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+    padding-top: var(--lb-spacing-2xs);
+    padding-bottom: var(--lb-spacing-2xs);
+    min-width: 9em;
+  }
+[data-component="color-scheme-switcher"] .switcher-option {
+    color: #6b7280;
+    color: var(--lb-color-scheme-switcher-button-color);
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-top: var(--lb-spacing-xs);
+    padding-bottom: var(--lb-spacing-xs);
+    padding-left: 1rem;
+    padding-left: var(--lb-spacing-md);
+    padding-right: 1.25rem;
+    padding-right: var(--lb-spacing-lg);
+    display: flex;
+    align-items: center;
+    -moz-column-gap: 0.75rem;
+         column-gap: 0.75rem;
+    -moz-column-gap: var(--lb-spacing-sm);
+         column-gap: var(--lb-spacing-sm);
+    width: 100%;
+  }
+[data-component="color-scheme-switcher"] .switcher-option .icon {
+      color: #6b7280;
+      color: var(--lb-color-scheme-switcher-icon-color);
+    }
+[data-component="color-scheme-switcher"] .switcher-option:hover {
+      color: #1f2937;
+      color: var(--lb-color-scheme-switcher-button-color-hover);
+    }
+[data-component="color-scheme-switcher"] .switcher-option:hover .icon {
+        color: #1f2937;
+        color: var(--lb-color-scheme-switcher-icon-color-hover);
+      }
+[data-component="color-scheme-switcher"] .switcher-option.selected {
+      font-weight: 600;
+      font-weight: var(--lb-font-weight-semibold);
+      color: #4338ca;
+      color: var(--lb-color-scheme-switcher-button-color-selected);
+    }
+[data-component="color-scheme-switcher"] .switcher-option.selected .icon {
+        color: #4338ca;
+        color: var(--lb-color-scheme-switcher-icon-color-selected);
+      }
+[data-component="header"] {
+  height: 2.5rem;
+  height: var(--lb-size-3xl);
+  color: #fff;
+  color: var(--lb-header-color);
+  background-color: #4f46e5;
+  background-color: var(--lb-header-background-color);
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-left: var(--lb-spacing-md);
+  padding-right: var(--lb-spacing-md);
+  padding-bottom: 1px;
+  display: flex;
+  align-items: center;
+}
+[data-component="header"] .header-branding {
+    display: flex;
+    align-items: center;
+    -moz-column-gap: 0.75rem;
+         column-gap: 0.75rem;
+    -moz-column-gap: var(--lb-spacing-sm);
+         column-gap: var(--lb-spacing-sm);
+    margin-right: auto;
+  }
+[data-component="header"] .header-project-logo {
+    height: 18px;
+  }
+[data-component="header"] .header-project-logo svg {
+      height: 100%;
+    }
+[data-component="header"] .header-project-branding {
+  }
+[data-component="header"] .header-project-links {
+    display: flex;
+    align-items: center;
+    -moz-column-gap: 0.75rem;
+         column-gap: 0.75rem;
+    -moz-column-gap: var(--lb-spacing-sm);
+         column-gap: var(--lb-spacing-sm);
+  }
+[data-component="header"] .header-project-links + .header-color-scheme-switcher {
+      border-left: 1px solid #4338ca;
+      border-left: 1px solid var(--lb-color-content-1-accent);
+      margin-left: 1.5rem;
+      margin-left: var(--lb-spacing-xl);
+    }
+[data-component="header"] .header-project-link {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    -moz-column-gap: 0.25rem;
+         column-gap: 0.25rem;
+    -moz-column-gap: var(--lb-spacing-2xs);
+         column-gap: var(--lb-spacing-2xs);
+    font-size: 0.75rem;
+    font-size: var(--lb-font-size-xs);
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+    padding-left: var(--lb-spacing-2xs);
+    padding-right: var(--lb-spacing-2xs);
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-top: var(--lb-spacing-xs);
+    padding-bottom: var(--lb-spacing-xs);
+  }
+[data-component="header"] .header-project-link span {
+      transition: opacity 300ms;
+      opacity: 0.8;
+    }
+[data-component="header"] .header-project-link .icon {
+      width: 12px;
+      margin-left: 1px;
+      opacity: 0.6;
+    }
+[data-component="header"] .header-project-link:hover span {
+        opacity: 1;
+      }
+[data-component="header"] .header-color-scheme-switcher {
+    margin-right: calc(-1 * 1rem);
+    margin-right: calc(-1 * var(--lb-spacing-md));
+  }
+[data-component="router"] {
+  display: contents;
+}
+[data-component="sidebar"] {
+  display: contents;
+}
+[data-component="status-bar"] {
+  height: 1.5rem;
+  height: var(--lb-size-xl);
+  font-size: 0.75rem;
+  font-size: var(--lb-font-size-xs);
+  color: #1f2937;
+  color: var(--lb-status-bar-color);
+  background-color: #fff;
+  background-color: var(--lb-status-bar-background-color);
+  border-top: 1px solid #d1d5db;
+  border-top: 1px solid var(--lb-color-surface-divider);
+
+  display: flex;
+  align-items: center;
+}
+[data-component="status-bar"] .status-bar-section {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    padding-left: var(--lb-spacing-xs);
+    padding-right: var(--lb-spacing-xs);
+  }
+[data-component="status-bar"] .status-bar-items {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    gap: var(--lb-spacing-md);
+    height: 100%;
+  }
+[data-component="status-bar"] .status-bar-system-info {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    gap: var(--lb-spacing-xs);
+    background-color: #f3f4f6;
+    background-color: var(--lb-color-surface-3);
+    font-family: "Source Code Pro Var", ui-monospace, "Cascadia Code", Menlo,
+    Consolas, "DejaVu Sans Mono", monospace;
+    font-family: var(--lb-font-mono);
+    font-size: 0.9em;
+    border-right: 1px solid #d1d5db;
+    border-right: 1px solid var(--lb-color-surface-divider);
+  }
+[data-component="status-bar"] .status-bar-system-info .lookbook-logo {
+      height: 14px;
+      opacity: 0.8;
+    }
+[data-component="status-bar"] .status-bar-notifications {
+    margin-left: auto;
+  }
+[data-component="status-bar-item"] {
+  position: relative;
+  height: 100%;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+  padding-left: var(--lb-spacing-2xs);
+  padding-right: var(--lb-spacing-2xs);
+}
+[data-component="status-bar-item"] .status-bar-item-content {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    gap: var(--lb-spacing-2xs);
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+  }
+[data-component="status-bar-item"] .status-bar-item-content .icon {
+      flex: none;
+      height: 14px;
+    }
+.with-panel[data-component="status-bar-item"] .status-bar-item-content {
+    cursor: pointer;
+  }
+[data-component="status-bar-item"][data-theme="action"] .status-bar-item-content {
+      color: #6366f1;
+      color: var(--lb-color-content-2-accent);
+    }
+[data-component="status-bar-item"][data-theme="positive"] .status-bar-item-content {
+      color: #16a34a;
+      color: var(--lb-color-content-positive);
+    }
+[data-component="status-bar-item"][data-theme="negative"] .status-bar-item-content {
+      color: #dc2626;
+      color: var(--lb-color-content-negative);
+    }
+[data-component="status-bar-item"][data-theme="warning"] .status-bar-item-content {
+      color: #d97706;
+      color: var(--lb-color-content-warning);
+    }
+[data-component="status-bar-notifications"] {
+  width: 28rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-left: var(--lb-spacing-sm);
+  padding-right: var(--lb-spacing-sm);
+  color: #1f2937;
+  color: var(--lb-dropdown-color);
+  background: #fff;
+  background: var(--lb-dropdown-background-color);
+}
+[data-component="status-bar-notifications"] .notification {
+    display: flex;
+    gap: 0.5rem;
+    gap: var(--lb-spacing-xs);
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+    padding-top: var(--lb-spacing-sm);
+    padding-bottom: var(--lb-spacing-sm);
+  }
+[data-component="status-bar-notifications"] .notification + .notification {
+      border-top: 1px solid #d1d5db;
+      border-top: 1px solid var(--lb-color-surface-divider);
+    }
+[data-component="status-bar-notifications"] .notification .notification-icon .icon {
+        flex: none;
+        width: 1rem;
+        width: var(--lb-size-md);
+      }
+[data-component="status-bar-notifications"] .notification .notification-message {
+      min-width: 1%;
+      width: 100%;
+      overflow: hidden;
+      font-family: "Source Code Pro Var", ui-monospace, "Cascadia Code", Menlo,
+    Consolas, "DejaVu Sans Mono", monospace;
+      font-family: var(--lb-font-mono);
+      font-size: 0.75rem;
+      font-size: var(--lb-font-size-xs);
+      line-height: var(--lb-line-height-dense);
+      word-wrap: break-word;
+      word-wrap: break-word;
+      word-break: break-word;
+      -webkit-hyphens: auto;
+              hyphens: auto;
+    }
+[data-component="status-bar-notifications"] .notification.notification-error .notification-icon {
+      color: #dc2626;
+      color: var(--lb-color-content-negative);
+    }
+[data-component="status-bar-notifications"] .notification.notification-warning .notification-icon {
+      color: #d97706;
+      color: var(--lb-color-content-warning);
+    }
+[data-component="status-bar-notifications"] .notification.notification-notice .notification-icon {
+      color: #2563eb;
+      color: var(--lb-color-content-info);
+    }
+[data-component="status-bar-notifications"] .notification.notification-success .notification-icon {
+      color: #16a34a;
+      color: var(--lb-color-content-positive);
+    }
+[data-component="badge"] {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 1rem;
+  border-radius: var(--lb-border-radius-lg);
+  font-size: 12px;
+}
+[data-component="badge"] .badge-label {
+    display: inline-block;
+    color: #fff;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+  }
+[data-component="badge"][data-style="full"] {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    padding-left: var(--lb-spacing-sm);
+    padding-right: var(--lb-spacing-sm);
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+    padding-top: var(--lb-spacing-2xs);
+    padding-bottom: var(--lb-spacing-2xs);
+  }
+[data-component="badge"][data-style="indicator"] {
+    height: 12px;
+    width: 12px;
+  }
+[data-component="badge"][data-style="indicator"] .badge-label {
+      display: none;
+    }
+[data-component="breadcrumbs"] {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  font-size: 0.875rem;
+  font-size: var(--lb-font-size-sm);
+  color: #6b7280;
+  color: var(--lb-breadrumbs-color);
+}
+[data-component="breadcrumbs"] a.breadcrumb {
+    color: #6b7280;
+    color: var(--lb-breadrumbs-link-color);
+  }
+[data-component="breadcrumbs"] a.breadcrumb:hover {
+      -webkit-text-decoration: underline;
+      text-decoration: underline;
+      color: #6366f1;
+      color: var(--lb-breadrumbs-link-color-hover);
+    }
+[data-component="breadcrumbs"] .breadcrumb:last-child {
+    color: #1f2937;
+    color: var(--lb-breadrumbs-color-current);
+  }
+[data-component="breadcrumbs"] .breadcrumb-divider {
+    flex: none;
+    display: block;
+    margin-left: 0.25rem;
+    margin-left: var(--lb-spacing-2xs);
+    margin-right: 0.25rem;
+    margin-right: var(--lb-spacing-2xs);
+  }
+[data-component="button"] {
+  display: block;
+  width: -moz-fit-content;
+  width: fit-content;
+  color: #1f2937;
+  color: var(--lb-button-color);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  border-radius: 1.5rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-left: var(--lb-spacing-sm);
+  padding-right: var(--lb-spacing-sm);
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-top: var(--lb-spacing-xs);
+  padding-bottom: var(--lb-spacing-xs);
+  background-color: #f3f4f6;
+  background-color: var(--lb-button-background-color);
+  font-family: "Inter Var", Roboto, "Helvetica Neue", "Arial Nova",
+    "Nimbus Sans", Arial, sans-serif;
+  font-family: var(--lb-font-ui);
+  transition: background-color 200ms;
+  outline: 1px solid rgba(209, 213, 219, 0.8);
+  outline-offset: -1px;
+}
+@supports (color: lab(from red l 1 1% / calc(alpha + 0.1))) {
+[data-component="button"] {
+  outline: 1px solid rgb(from var(--lb-button-border-color) r g b / 80%);
+}
+}
+[data-component="button"]:hover {
+    color: #4338ca;
+    color: var(--lb-button-color-hover);
+  }
+[data-component="button"] .button-content {
+    display: flex;
+    align-items: center;
+    -moz-column-gap: 0.5rem;
+         column-gap: 0.5rem;
+    -moz-column-gap: var(--lb-spacing-xs);
+         column-gap: var(--lb-spacing-xs);
+    -webkit-text-decoration: none;
+    text-decoration: none;
+    padding-left: 0.125rem;
+    padding-right: 0.125rem;
+    padding-left: var(--lb-spacing-3xs);
+    padding-right: var(--lb-spacing-3xs);
+  }
+[data-component="button"] .button-label {
+    font-size: 0.75rem;
+    font-size: var(--lb-font-size-xs);
+    white-space: nowrap;
+    line-height: 16px;
+  }
+.icon-only[data-component="button"] {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    padding-left: var(--lb-spacing-xs);
+    padding-right: var(--lb-spacing-xs);
+  }
+.icon-only[data-component="button"] .button-content {
+      padding-left: 0;
+      padding-right: 0;
+    }
+/* color: var(--lb-button-color); */
+/* .icon {
+    width: 100%;
+    height: 100%;
+  }
+
+  &:hover {
+    color: var(--lb-toolbar-button-color-hover);
+  }
+
+  &:active,
+  &.active {
+    color: var(--lb-toolbar-button-color-active);
+  }
+
+  &[data-size="md"] {
+    padding: 0.75rem;
+    height: var(--lb-size-3xl);
+    width: var(--lb-size-3xl);
+  } */
+[data-component="button-group"] {
+  display: flex;
+  align-items: center;
+  width: -moz-fit-content;
+  width: fit-content;
+  -moz-column-gap: 0.75rem;
+       column-gap: 0.75rem;
+  -moz-column-gap: var(--lb-spacing-sm);
+       column-gap: var(--lb-spacing-sm);
+}
+[data-component="code"] {
+  display: block;
+
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+[data-component="code"] .code-raw {
+    display: none;
+  }
+[data-component="code"] .code-highlighted {
+    height: 100%;
+  }
+[data-component="code"] .code-highlighted code,
+    [data-component="code"] .code-highlighted pre {
+      display: block;
+      height: 100%;
+      width: 100%;
+    }
+[data-component="code"] .code-highlighted code:focus-visible, [data-component="code"] .code-highlighted pre:focus-visible {
+        outline: 0;
+      }
+[data-component="code"] .code-highlighted pre > code {
+      font-size: 0.875rem;
+      font-size: var(--lb-font-size-sm);
+      line-height: 1.5;
+      padding-left: 0.75rem !important;
+      padding-right: 0.75rem !important;
+      padding-left: var(--lb-spacing-sm) !important;
+      padding-right: var(--lb-spacing-sm) !important;
+      padding-top: 0.75rem !important;
+      padding-bottom: 0.75rem !important;
+      padding-top: var(--lb-spacing-sm) !important;
+      padding-bottom: var(--lb-spacing-sm) !important;
+      overflow: auto;
+    }
+.wrap-lines[data-component="code"] .code-highlighted code {
+    white-space: pre-wrap;
+  }
+html[data-color-scheme="dark"] .shiki,
+html[data-color-scheme="dark"] .shiki span {
+  color: var(--shiki-dark) !important;
+  background-color: var(--shiki-dark-bg) !important;
+  font-style: var(--shiki-dark-font-style) !important;
+  font-weight: var(--shiki-dark-font-weight) !important;
+  -webkit-text-decoration: var(--shiki-dark-text-decoration) !important;
+          text-decoration: var(--shiki-dark-text-decoration) !important;
+}
+[data-component="icon"] {
+  display: inline-block;
+  aspect-ratio: 1 / 1;
+  width: 1rem;
+}
+[data-component="icon"] svg {
+    width: 100%;
+    height: 100%;
+  }
+.stroke-1[data-component="icon"] svg {
+    stroke-width: 1px;
+  }
+.stroke-2[data-component="icon"] svg {
+    stroke-width: 2px;
+  }
+[data-component="page-metadata"] {
+  width: -moz-fit-content;
+  width: fit-content;
+  padding: 0.75rem;
+  padding: var(--lb-spacing-sm);
+}
+[data-component="page-metadata"] td {
+    white-space: nowrap;
+  }
+[data-component="nav"] {
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  display: grid;
+  grid-template-rows: 1fr;
+}
+.with-filter[data-component="nav"] {
+    grid-template-rows: min-content 1fr;
+  }
+[data-component="nav"] .nav-filter {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-top: var(--lb-spacing-xs);
+    padding-bottom: var(--lb-spacing-xs);
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    padding-left: var(--lb-spacing-sm);
+    padding-right: var(--lb-spacing-sm);
+  }
+[data-component="nav"] .nav-tree-wrapper {
+    position: relative;
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
+  }
+[data-component="nav"] .nav-tree {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    overflow-y: auto;
+    padding-bottom: 1rem;
+    padding-bottom: var(--lb-spacing-md);
+  }
+[data-component="nav"]:not(.with-filter) .nav-tree {
+    padding-top: 0.5rem;
+    padding-top: var(--lb-spacing-xs);
+  }
+[data-component="nav"] .nav-placeholder {
+    font-size: 0.875rem;
+    font-size: var(--lb-font-size-sm);
+    background-color: #fff;
+    background-color: var(--lb-nav-placeholder-background-color);
+    color: #6b7280;
+    color: var(--lb-nav-placeholder-color);
+    padding: 1rem;
+    padding: var(--lb-spacing-md);
+    border: 1px dashed #d1d5db;
+    border: 1px dashed var(--lb-nav-placeholder-border-color);
+    margin: 0.75rem;
+    margin: var(--lb-spacing-sm);
+  }
+[data-component="nav-item"] {
+  width: 100%;
+  overflow: hidden;
+  font-size: 0.875rem;
+  font-size: var(--lb-font-size-sm);
+}
+[data-component="nav-item"] .nav-item-item {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    border-left: 3px solid transparent;
+    border-left: 3px solid var(--lb-nav-item-border-color);
+    cursor: pointer;
+    background-color: transparent;
+    background-color: var(--lb-nav-item-background-color);
+    padding-top: 0.125rem;
+    padding-bottom: 0.125rem;
+    padding-top: var(--lb-spacing-3xs);
+    padding-bottom: var(--lb-spacing-3xs);
+  }
+[data-component="nav-item"] .nav-item-indentation {
+    width: 1rem;
+    width: var(--lb-spacing-md);
+    height: 1.5rem;
+    flex: none;
+  }
+[data-component="nav-item"] .nav-item-toggle {
+    width: 1.5rem;
+    flex: none;
+  }
+[data-component="nav-item"] .nav-item-toggle button {
+      display: block;
+      line-height: 0;
+      padding: 0.25rem;
+      padding: var(--lb-spacing-2xs);
+      flex: none;
+      color: #6b7280;
+      color: var(--lb-nav-item-toggle-color);
+    }
+[data-component="nav-item"] .nav-item-label {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-width: 0;
+    font-size: 0.875rem;
+    font-size: var(--lb-font-size-sm);
+    color: #1f2937;
+    color: var(--lb-nav-item-label-color);
+  }
+[data-component="nav-item"] .nav-item-label .icon {
+      flex: none;
+      margin-right: 0.5rem;
+      margin-right: var(--lb-spacing-xs);
+      height: 1rem;
+      height: var(--lb-spacing-md);
+      color: #4338ca;
+      color: var(--lb-nav-item-icon-color);
+    }
+[data-component="nav-item"] .nav-item-label span {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      display: block;
+      width: 100%;
+      text-align: left;
+    }
+[data-component="nav-item"] .nav-item-item:hover .nav-item-label {
+      color: #1f2937;
+      color: var(--lb-nav-item-label-color-hover);
+    }
+[data-component="nav-item"][aria-selected="true"] > .nav-item-item {
+      background-color: #f3f4f6;
+      background-color: var(--lb-nav-item-background-color-selected);
+      border-left-color: #6366f1;
+      border-left-color: var(--lb-nav-item-border-color-selected);
+    }
+[data-component="nav-item"][aria-selected="true"] > .nav-item-item .nav-item-label {
+        color: #1f2937;
+        color: var(--lb-nav-item-label-color-selected);
+      }
+[data-component="nav-item"][aria-selected="true"] > .nav-item-item .nav-item-label {
+        font-weight: 600;
+        font-weight: var(--lb-font-weight-semibold);
+      }
+[data-component="pane"] {
+  background-color: #f9fafb;
+  background-color: var(--lb-pane-background-color);
+  height: 100%;
+  width: 100%;
+  position: relative;
+  display: grid;
+  grid-template-rows: min-content 1fr;
+}
+[data-component="pane"] .pane-content {
+    height: 100%;
+    width: 100%;
+    position: relative;
+  }
+[data-component="pane"] .pane-panels {
+    height: 100%;
+    width: 100%;
+    position: relative;
+  }
+[data-component="tab-panel"] {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  color: #1f2937;
+  color: var(--lb-tab-panel-color);
+  background-color: #f9fafb;
+  background-color: var(--lb-tab-panel-background-color);
+}
+[data-component="tab-panel"] .tab-panel-content {
+    z-index: 1;
+    height: 100%;
+    width: 100%;
+    overflow: auto;
+  }
+[data-component="pane-group"] {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+[data-component="pane-group"] .pane-group-gutter {
+    position: relative;
+  }
+[data-component="pane-group"] .pane-group-gutter-handle {
+    position: absolute;
+    z-index: 100;
+  }
+[data-component="pane-group"][data-orientation="horizontal"] > .pane-group-gutter {
+      border-bottom: 1px solid #d1d5db;
+      border-bottom: 1px solid var(--lb-color-surface-divider);
+      width: 100%;
+      height: 1px;
+    }
+[data-component="pane-group"][data-orientation="horizontal"] > .pane-group-gutter .pane-group-gutter-handle {
+        height: 9px;
+        position: absolute;
+        top: -4px;
+        right: 0;
+        left: 0;
+        cursor: ns-resize;
+      }
+[data-component="pane-group"][data-orientation="vertical"] > .pane-group-gutter {
+      border-right: 1px solid #d1d5db;
+      border-right: 1px solid var(--lb-color-surface-divider);
+      height: 100%;
+      width: 1px;
+    }
+[data-component="pane-group"][data-orientation="vertical"] > .pane-group-gutter .pane-group-gutter-handle {
+        width: 9px;
+        top: 0;
+        bottom: 0;
+        left: -4px;
+        cursor: ew-resize;
+      }
+[data-component="pane-group"] .pane-group-pane {
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+  }
+[data-component="pane-group"] [data-component="tab-panel"] {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: hidden;
+  }
+[data-component="prose"] {
+  font-family: "Open Sans Var", Avenir, Montserrat, Corbel, "URW Gothic",
+    source-sans-pro, sans-serif;
+  font-family: var(--lb-font-prose);
+  color: #1f2937;
+  color: var(--lb-prose-color);
+  font-size: 1rem;
+  line-height: 1.75;
+}
+[data-component="prose"] [class~="lead"] {
+    color: #1f2937;
+    color: var(--lb-prose-color);
+    font-size: 1.25em;
+    line-height: 1.6;
+    margin-top: 1.2em;
+    margin-bottom: 1.2em;
+  }
+[data-component="prose"] a:not([data-component="prose"] [data-component] a) {
+    position: relative;
+    -webkit-text-decoration: underline;
+    text-decoration: underline;
+  }
+[data-component="prose"] strong:not([data-component="prose"] [data-component] strong) {
+    font-weight: 600;
+  }
+[data-component="prose"] ol:not([data-component="prose"] [data-component] ol) {
+    counter-reset: list-counter;
+    margin-top: 1.25em;
+    margin-bottom: 1.25em;
+  }
+[data-component="prose"] ol:not([data-component="prose"] [data-component] ol) > li {
+      position: relative;
+      counter-increment: list-counter;
+      padding-left: 1.75em;
+      margin-top: 0.5em;
+      margin-bottom: 0.5em;
+    }
+[data-component="prose"] ol:not([data-component="prose"] [data-component] ol) > li::before {
+      left: 0;
+      content: counter(list-counter) ".";
+      position: absolute;
+      font-weight: 400;
+      color: #6b7280;
+      color: var(--lb-prose-list-counter-color);
+    }
+[data-component="prose"] ol:not([data-component="prose"] [data-component] ol) ol,
+    [data-component="prose"] ol:not([data-component="prose"] [data-component] ol) ul {
+      margin-top: 0.75em;
+      margin-bottom: 0.75em;
+    }
+[data-component="prose"] ul:not([data-component="prose"] [data-component] ul) {
+    margin-top: 1.25em;
+    margin-bottom: 1.25em;
+  }
+[data-component="prose"] ul:not([data-component="prose"] [data-component] ul) > li {
+      position: relative;
+      padding-left: 1.75em;
+      margin-top: 0.5em;
+      margin-bottom: 0.5em;
+    }
+[data-component="prose"] ul:not([data-component="prose"] [data-component] ul) > li::before {
+      content: "";
+      position: absolute;
+      background-color: #6b7280;
+      background-color: var(--lb-prose-list-marker-color);
+      border-radius: 50%;
+      width: 0.375em;
+      height: 0.375em;
+      top: calc(0.875em - 0.1875em);
+      left: 0.25em;
+    }
+[data-component="prose"] ul:not([data-component="prose"] [data-component] ul) ol,
+    [data-component="prose"] ul:not([data-component="prose"] [data-component] ul) ul {
+      margin-top: 0.75em;
+      margin-bottom: 0.75em;
+    }
+[data-component="prose"] hr:not([data-component="prose"] [data-component] hr) {
+    border-color: #6b7280;
+    border-color: var(--lb-prose-hr-color);
+    border-top-width: 1px;
+    margin-top: 3em;
+    margin-bottom: 3em;
+  }
+[data-component="prose"] hr:not([data-component="prose"] [data-component] hr) + * {
+      margin-top: 0;
+    }
+[data-component="prose"] blockquote:not([data-component="prose"] [data-component] blockquote) {
+    font-weight: 500;
+    font-style: italic;
+    color: #6b7280;
+    color: var(--lb-prose-blockquote-color);
+    border-left-width: 0.25rem;
+    border-left-color: #d1d5db;
+    border-left-color: var(--lb-prose-blockquote-border-color);
+    quotes: "\201C" "\201D" "\2018" "\2019";
+    margin-top: 1.6em;
+    margin-bottom: 1.6em;
+    padding-left: 1em;
+  }
+[data-component="prose"] blockquote:not([data-component="prose"] [data-component] blockquote) p:first-of-type::before {
+      content: open-quote;
+    }
+[data-component="prose"] blockquote:not([data-component="prose"] [data-component] blockquote) p:last-of-type::after {
+      content: close-quote;
+    }
+[data-component="prose"] h1:not([data-component="prose"] [data-component] h1),
+  [data-component="prose"] h2:not([data-component="prose"] [data-component] h2),
+  [data-component="prose"] h3:not([data-component="prose"] [data-component] h3),
+  [data-component="prose"] h4:not([data-component="prose"] [data-component] h4) {
+    line-height: var(--lb-line-height-dense);
+    margin-top: 1.5em;
+    margin-bottom: 0.8em;
+  }
+[data-component="prose"] h1:not([data-component="prose"] [data-component] h1) {
+    font-weight: 600;
+    font-size: 2.25em;
+  }
+[data-component="prose"] h1:not([data-component="prose"] [data-component] h1) + * {
+      margin-top: 0;
+    }
+[data-component="prose"] h2:not([data-component="prose"] [data-component] h2) {
+    font-weight: 600;
+    font-size: 1.5em;
+  }
+[data-component="prose"] h2:not([data-component="prose"] [data-component] h2) code {
+      font-size: 0.875em;
+    }
+[data-component="prose"] h3:not([data-component="prose"] [data-component] h3) {
+    font-weight: 600;
+    font-size: 1.25em;
+  }
+[data-component="prose"] h3:not([data-component="prose"] [data-component] h3) + * {
+      margin-top: 0;
+    }
+[data-component="prose"] h3:not([data-component="prose"] [data-component] h3) code {
+      font-size: 0.9em;
+    }
+[data-component="prose"] h4:not([data-component="prose"] [data-component] h4) {
+    font-weight: 600;
+    font-size: 1.1em;
+  }
+[data-component="prose"] h4:not([data-component="prose"] [data-component] h4) + * {
+      margin-top: 0;
+    }
+[data-component="prose"] figure:not([data-component="prose"] [data-component] figure) figcaption {
+      color: #6b7280;
+      color: var(--lb-prose-figcaption-color);
+      font-size: 0.875em;
+      line-height: 1.4285714;
+      margin-top: 0.8571429em;
+    }
+[data-component="prose"] code:not([data-component="prose"] [data-component] code):not(pre code) {
+    font-size: 0.9em;
+    display: inline-block;
+    font-family: "Source Code Pro Var", ui-monospace, "Cascadia Code", Menlo,
+    Consolas, "DejaVu Sans Mono", monospace;
+    font-family: var(--lb-font-mono);
+    background-color: #f9fafb;
+    background-color: var(--lb-prose-inline-code-background-color);
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+    padding-left: var(--lb-spacing-2xs);
+    padding-right: var(--lb-spacing-2xs);
+    border-radius: 0.25rem;
+    border-radius: var(--lb-border-radius-sm);
+    color: var(--lb-color-content-accent-1);
+    color: var(--lb-prose-inline-code-color);
+  }
+[data-component="prose"] p:not([data-component="prose"] [data-component] p) {
+    margin-top: 1.25em;
+    margin-bottom: 1.25em;
+  }
+[data-component="prose"] img:not([data-component="prose"] [data-component] img) {
+    margin-top: 2em;
+    margin-bottom: 2em;
+  }
+[data-component="prose"] video:not([data-component="prose"] [data-component] video) {
+    margin-top: 2em;
+    margin-bottom: 2em;
+  }
+[data-component="prose"] figure:not([data-component="prose"] [data-component] figure) {
+    margin-top: 2em;
+    margin-bottom: 2em;
+  }
+[data-component="prose"] figure:not([data-component="prose"] [data-component] figure) > * {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+[data-component="prose"] table:not([data-component="prose"] [data-component] table) {
+    margin-top: 2em;
+    margin-bottom: 2em;
+  }
+[data-component="prose"] lookbook-embed {
+    margin-top: 2em;
+    margin-bottom: 2em;
+  }
+[data-component="prose"]:not([data-component="prose"] [data-component] [data-component="prose"]) > :first-child {
+    margin-top: 0;
+  }
+[data-component="prose"]:not([data-component="prose"] [data-component] [data-component="prose"]) > :last-child {
+    margin-bottom: 0;
+  }
+[data-component="prose"] > [data-component] {
+    margin-top: 2em;
+    margin-bottom: 2em;
+  }
+[data-component="prose"] [data-component="code"] {
+    color: var(--lb-prose-code-color);
+    background-color: #fff;
+    background-color: var(--lb-prose-code-background-color);
+    border: 1px solid #d1d5db;
+    border: 1px solid var(--lb-prose-code-border-color);
+    border-radius: 0.25rem;
+    border-radius: var(--lb-border-radius-sm);
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+    margin-top: var(--lb-spacing-xl);
+    margin-bottom: var(--lb-spacing-xl);
+  }
+[data-component="prose"][data-size="sm"] {
+    font-size: 0.9rem;
+    line-height: 1.5;
+  }
+[data-component="prose"][data-size="sm"] [class~="lead"] {
+      line-height: 1.4;
+      margin-top: 1em;
+      margin-bottom: 1em;
+    }
+[data-component="prose"][data-size="sm"] ol:not([data-component="prose"] [data-component] ol) {
+      margin-top: 1em;
+      margin-bottom: 1em;
+    }
+[data-component="prose"][data-size="sm"] hr:not([data-component="prose"] [data-component] hr) {
+      margin-top: 2em;
+      margin-bottom: 2em;
+    }
+[data-component="prose"][data-size="sm"] blockquote:not([data-component="prose"] [data-component] blockquote) {
+      margin-top: 1.5em;
+      margin-bottom: 1.5em;
+    }
+[data-component="prose"][data-size="sm"] h1:not([data-component="prose"] [data-component] h1),
+    [data-component="prose"][data-size="sm"] h2:not([data-component="prose"] [data-component] h2),
+    [data-component="prose"][data-size="sm"] h3:not([data-component="prose"] [data-component] h3),
+    [data-component="prose"][data-size="sm"] h4:not([data-component="prose"] [data-component] h4) {
+      margin-top: 1.2em;
+      margin-bottom: 0.7em;
+    }
+[data-component="prose"][data-size="sm"] h1:not([data-component="prose"] [data-component] h1) {
+      font-size: 2.25em;
+    }
+[data-component="prose"][data-size="sm"] h2:not([data-component="prose"] [data-component] h2) {
+      font-size: 1.5em;
+    }
+[data-component="prose"][data-size="sm"] h3:not([data-component="prose"] [data-component] h3) {
+      font-size: 1.25em;
+    }
+[data-component="prose"][data-size="sm"] h4:not([data-component="prose"] [data-component] h4) {
+      font-size: 1.1em;
+    }
+[data-component="prose"][data-size="sm"] table:not([data-component="prose"] [data-component] table) {
+      margin-top: 1.5em;
+      margin-bottom: 1.5em;
+    }
+[data-component="prose"][data-size="sm"] p:not([data-component="prose"] [data-component] p) {
+      margin-top: 1em;
+      margin-bottom: 1em;
+    }
+[data-component="prose"][data-size="sm"] img:not([data-component="prose"] [data-component] img) {
+      margin-top: 1.5em;
+      margin-bottom: 1.5em;
+    }
+[data-component="prose"][data-size="sm"] video:not([data-component="prose"] [data-component] video) {
+      margin-top: 1.5em;
+      margin-bottom: 1.5em;
+    }
+[data-component="prose"][data-size="sm"] figure:not([data-component="prose"] [data-component] figure) {
+      margin-top: 1.5em;
+      margin-bottom: 1.5em;
+    }
+[data-component="prose"][data-size="sm"] figure:not([data-component="prose"] [data-component] figure) > * {
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+[data-component="prose"][data-size="sm"] ol:not([data-component="prose"] [data-component] ol),
+    [data-component="prose"][data-size="sm"] ul:not([data-component="prose"] [data-component] ul) {
+      margin-top: 1em;
+      margin-bottom: 1em;
+    }
+[data-component="prose"][data-size="sm"] ol:not([data-component="prose"] [data-component] ol) li, [data-component="prose"][data-size="sm"] ul:not([data-component="prose"] [data-component] ul) li {
+        margin-top: 0.3em;
+        margin-bottom: 0.3em;
+      }
+[data-component="prose"][data-size="sm"] ol:not([data-component="prose"] [data-component] ol) ol,
+      [data-component="prose"][data-size="sm"] ul:not([data-component="prose"] [data-component] ul) ol,
+      [data-component="prose"][data-size="sm"] ol:not([data-component="prose"] [data-component] ol) ul,
+      [data-component="prose"][data-size="sm"] ul:not([data-component="prose"] [data-component] ul) ul {
+        margin-top: 0.5em;
+        margin-bottom: 0.5em;
+      }
+[data-component="prose"][data-size="sm"] > [data-component] {
+      margin-top: 1.2em;
+      margin-bottom: 1.2em;
+    }
+[data-component="prose"][data-size="sm"] lookbook-embed {
+      margin-top: 1.5em;
+      margin-bottom: 1.5em;
+    }
+[data-component="prose"][data-size="sm"]:not([data-component="prose"] [data-component] [data-component="prose"][data-size="sm"]) > :first-child, [data-component="prose"][data-size="sm"]:not([data-component="prose"] [data-component] [data-component="prose"][data-size="md"]) > :first-child, [data-component="prose"][data-size="md"]:not([data-component="prose"] [data-component] [data-component="prose"][data-size="sm"]) > :first-child, [data-component="prose"][data-size="md"]:not([data-component="prose"] [data-component] [data-component="prose"][data-size="md"]) > :first-child {
+      margin-top: 0;
+    }
+[data-component="prose"][data-size="sm"]:not([data-component="prose"] [data-component] [data-component="prose"][data-size="sm"]) > :last-child, [data-component="prose"][data-size="sm"]:not([data-component="prose"] [data-component] [data-component="prose"][data-size="md"]) > :last-child, [data-component="prose"][data-size="md"]:not([data-component="prose"] [data-component] [data-component="prose"][data-size="sm"]) > :last-child, [data-component="prose"][data-size="md"]:not([data-component="prose"] [data-component] [data-component="prose"][data-size="md"]) > :last-child {
+      margin-bottom: 0;
+    }
+table {
+  background: #fff;
+  background: var(--lb-table-background-color);
+  border: 1px solid #d1d5db;
+  border: 1px solid var(--lb-table-border-color);
+  color: #1f2937;
+  color: var(--lb-table-color);
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+  font-size: var(--lb-font-size-sm);
+  font-family: "Inter Var", Roboto, "Helvetica Neue", "Arial Nova",
+    "Nimbus Sans", Arial, sans-serif;
+  font-family: var(--lb-font-ui);
+}
+th,
+td {
+  text-align: left;
+  vertical-align: middle;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-left: var(--lb-spacing-md);
+  padding-right: var(--lb-spacing-md);
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  padding-top: var(--lb-spacing-sm);
+  padding-bottom: var(--lb-spacing-sm);
+}
+th.collapse, td.collapse {
+    width: 1%;
+    white-space: nowrap;
+  }
+th.centered, td.centered {
+    text-align: center;
+  }
+th strong, td strong {
+    font-weight: 600;
+    font-weight: var(--lb-font-weight-semibold);
+  }
+th {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-top: var(--lb-spacing-xs);
+  padding-bottom: var(--lb-spacing-xs);
+  font-weight: 400;
+  font-weight: var(--lb-font-weight-normal);
+  opacity: 0.5;
+}
+thead tr,
+tr:not(:last-child) {
+  border-bottom: 1px solid #d1d5db;
+  border-bottom: 1px solid var(--lb-table-border-color);
+}
+[data-component="table"] {
+}
+[data-component="toolbar"] {
+  --lb-toolbar-height: var(--lb-size-3xl);
+
+  color: #1f2937;
+
+  color: var(--lb-toolbar-color);
+  background-color: #fff;
+  background-color: var(--lb-toolbar-background-color);
+  height: 2.5rem;
+  height: var(--lb-toolbar-height);
+  display: flex;
+  align-items: center;
+  padding-left: 1rem;
+  padding-left: var(--lb-spacing-md);
+  border-bottom: 1px solid #d1d5db;
+  border-bottom: 1px solid var(--lb-color-surface-divider);
+}
+[data-component="toolbar"] .toolbar-section {
+    display: flex;
+    align-items: center;
+  }
+[data-component="toolbar"] .toolbar-section:last-child {
+    margin-left: auto;
+  }
+[data-component="toolbar"] .toolbar-label {
+    display: flex;
+    align-items: center;
+    font-size: 0.875rem;
+    font-size: var(--lb-font-size-sm);
+    margin-right: 1rem;
+    margin-right: var(--lb-spacing-md);
+  }
+[data-component="toolbar"] .toolbar-button-groups {
+    display: flex;
+    align-items: center;
+  }
+[data-component="toolbar"] [data-component="button-group"] + [data-component="button-group"] {
+      border-left: 1px solid #d1d5db;
+      border-left: 1px solid var(--lb-color-surface-divider);
+    }
+[data-component="toolbar-button"] {
+  display: inline-block;
+  width: -moz-fit-content;
+  width: fit-content;
+  line-height: 1;
+  color: #6b7280;
+  color: var(--lb-toolbar-button-color);
+}
+[data-component="toolbar-button"] .icon {
+    width: 100%;
+    height: 100%;
+  }
+[data-component="toolbar-button"]:hover {
+    color: #1f2937;
+    color: var(--lb-toolbar-button-color-hover);
+  }
+[data-component="toolbar-button"]:active,
+  .active[data-component="toolbar-button"] {
+    color: #6366f1;
+    color: var(--lb-toolbar-button-color-active);
+  }
+[data-component="toolbar-button"] .toolbar-button-content {
+    line-height: 1;
+  }
+[data-component="toolbar-button"][data-size="md"] {
+    padding: 0.75rem;
+    height: 2.5rem;
+    height: var(--lb-size-3xl);
+    width: 2.5rem;
+    width: var(--lb-size-3xl);
+  }
+[data-component="toolbar-button-group"] {
+  display: flex;
+  align-items: center;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+[data-component="toolbar-button-group"] .button-group-divider {
+    flex: none;
+    width: 1px;
+    background-color: #d1d5db;
+    background-color: var(--lb-color-surface-divider);
+    height: 38px;
+    display: block;
+  }
+[data-component="toolbar-tab"] {
+  color: #6b7280;
+  color: var(--lb-tab-color);
+  height: var(--lb-toolbar-height);
+  display: flex;
+  align-items: center;
+  font-size: 0.875rem;
+  font-size: var(--lb-font-size-sm);
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-left: var(--lb-spacing-sm);
+  padding-right: var(--lb-spacing-sm);
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.disabled[data-component="toolbar-tab"] {
+    color: #d1d5db;
+    color: var(--lb-tab-color-disabled);
+  }
+[data-component="toolbar-tab"][aria-selected="true"] {
+    color: #6366f1;
+    color: var(--lb-tab-color-selected);
+    border-bottom-color: #6366f1;
+    border-bottom-color: var(--lb-tab-border-color-selected);
+  }
+[data-component="toolbar-tab-group"] {
+  display: flex;
+  gap: 0.75rem;
+  gap: var(--lb-spacing-sm);
+  height: var(--lb-toolbar-height);
+}
+[data-component="viewport"] {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  position: relative;
+  background-color: #fff;
+  background-color: var(--lb-viewport-background-color);
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23f3f3f3' fill-opacity='1'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
+  background: var(--lb-background-checked);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  touch-action: none;
+}
+[data-component="viewport"] .viewport-wrapper {
+    position: relative;
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%;
+    height: 100%;
+  }
+[data-component="viewport"] .viewport-dimensions {
+    font-size: 0.75rem;
+    font-size: var(--lb-font-size-xs);
+    font-family: "Source Code Pro Var", ui-monospace, "Cascadia Code", Menlo,
+    Consolas, "DejaVu Sans Mono", monospace;
+    font-family: var(--lb-font-mono);
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    padding-left: var(--lb-spacing-xs);
+    padding-right: var(--lb-spacing-xs);
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-top: var(--lb-spacing-xs);
+    padding-bottom: var(--lb-spacing-xs);
+    position: absolute;
+    z-index: 10;
+    top: 0;
+    right: 0;
+    display: inline-flex;
+    gap: 0.25rem;
+    gap: var(--lb-spacing-2xs);
+    overflow: hidden;
+    border-bottom-left-radius: 0.5rem;
+    border-bottom-left-radius: var(--lb-border-radius-md);
+    pointer-events: none;
+  }
+[data-component="viewport"] .viewport-dimensions::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background: #f3f4f6;
+      background: var(--lb-viewport-dimensions-background-color);
+      /* opacity: 0.7; */
+    }
+[data-component="viewport"] .viewport-dimensions span {
+      position: relative;
+      z-index: 11;
+    }
+[data-component="viewport"] .viewport-resizer {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    outline: 1px solid #d1d5db;
+    outline: 1px solid var(--lb-color-surface-divider);
+  }
+.resize-x[data-component="viewport"] .viewport-dimensions {
+      right: 1rem;
+      right: var(--lb-spacing-md);
+    }
+.resize-x[data-component="viewport"] .viewport-resizer {
+      grid-template-columns: 1fr min-content;
+    }
+.resize-y[data-component="viewport"] .viewport-resizer {
+    grid-template-rows: 1fr min-content;
+  }
+[data-component="viewport"] .viewport-window {
+    width: 100%;
+    height: 100%;
+  }
+[data-component="viewport"] .viewport-window.inert {
+    pointer-events: none;
+  }
+[data-component="viewport"] .viewport-handle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #fff;
+    background-color: var(--lb-viewport-handle-background-color);
+    color: #6b7280;
+    color: var(--lb-viewport-handle-icon-color);
+  }
+[data-component="viewport"] .viewport-handle-x {
+    flex-direction: row;
+    border-left: 1px solid #d1d5db;
+    border-left: 1px solid var(--lb-color-surface-divider);
+    width: 1rem;
+    width: var(--lb-size-md);
+    cursor: ew-resize;
+  }
+[data-component="viewport"] .viewport-handle-y {
+    border-top: 1px solid #d1d5db;
+    border-top: 1px solid var(--lb-color-surface-divider);
+    height: 1rem;
+    height: var(--lb-size-md);
+    cursor: ns-resize;
+  }
+[data-component="viewport"] .viewport-handle-xy {
+    width: 1rem;
+    width: var(--lb-size-md);
+    height: 1rem;
+    height: var(--lb-size-md);
+    cursor: nwse-resize;
+  }
+[data-component="viewport"] .viewport-handle-xy .icon {
+      transform: rotate(45deg) scale(-80%);
+    }
+[data-component="viewport"] .viewport-handle-icon {
+    width: 1rem;
+    width: var(--lb-size-md);
+  }
+[data-component="page"] {
+  font-family: "Open Sans Var", Avenir, Montserrat, Corbel, "URW Gothic",
+    source-sans-pro, sans-serif;
+  font-family: var(--lb-font-prose);
+  color: #1f2937;
+  color: var(--lb-page-color);
+  background-color: #fff;
+  background-color: var(--lb-page-background-color);
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: hidden;
+}
+.with-footer[data-component="page"] {
+    display: grid;
+    grid-template-rows: 1fr min-content;
+  }
+[data-component="page"] .page-slat {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    padding-left: var(--lb-spacing-xl);
+    padding-right: var(--lb-spacing-xl);
+  }
+[data-component="page"] .page-content-wrapper {
+    overflow: hidden;
+  }
+[data-component="page"] .page-content {
+    height: 100%;
+    overflow: auto;
+  }
+[data-component="page"] .page-header {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #d1d5db;
+    border-bottom: 1px solid var(--lb-page-divider-color);
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+    padding-top: var(--lb-spacing-xl);
+    padding-bottom: var(--lb-spacing-xl);
+  }
+[data-component="page"] .page-title {
+    color: #1f2937;
+    color: var(--lb-page-title-color);
+    font-weight: 700;
+    font-weight: var(--lb-font-weight-bold);
+    font-size: 2.25rem;
+    font-size: var(--lb-font-size-2xl);
+  }
+[data-component="page"] .page-status {
+    margin-left: auto;
+  }
+[data-component="page"] .page-body {
+    padding-top: 2rem;
+    padding-top: var(--lb-spacing-2xl);
+    padding-bottom: 2.5rem;
+    padding-bottom: var(--lb-spacing-3xl);
+  }
+[data-component="page"] .page-body > [data-component="prose"] > *:not([data-component]):not(lookbook-embed), [data-component="page"] .page-body [data-component="code"] {
+      max-width: 56rem;
+    }
+[data-component="page"] .page-footer {
+    border-top: 1px solid #d1d5db;
+    border-top: 1px solid var(--lb-page-divider-color);
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-top: var(--lb-spacing-xs);
+    padding-bottom: var(--lb-spacing-xs);
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-left: var(--lb-spacing-md);
+    padding-right: var(--lb-spacing-md);
+    font-family: "Inter Var", Roboto, "Helvetica Neue", "Arial Nova",
+    "Nimbus Sans", Arial, sans-serif;
+    font-family: var(--lb-font-ui);
+    font-size: 0.875rem;
+    font-size: var(--lb-font-size-sm);
+  }
+[data-component="page"] .page-nav-links {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+[data-component="page"] .page-nav-link {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    gap: var(--lb-spacing-2xs);
+  }
+[data-component="page"] .page-nav-link-next {
+    margin-left: auto;
+  }
+[data-component="system-message"] {
+  font-family: "Open Sans Var", Avenir, Montserrat, Corbel, "URW Gothic",
+    source-sans-pro, sans-serif;
+  font-family: var(--lb-font-prose);
+  color: #6b7280;
+  color: var(--lb-system-message-color);
+  background: #fff;
+  background: var(--lb-system-message-background-color);
+  border: 1px solid #d1d5db;
+  border: 1px solid var(--lb-system-message-border-color);
+  padding: 1.5rem;
+  padding: var(--lb-spacing-xl);
+  max-width: 680px;
+  margin-top: 1.25rem;
+  margin-top: var(--lb-spacing-lg);
+  margin-left: auto;
+  margin-right: auto;
+  border-radius: 0.5rem;
+  border-radius: var(--lb-border-radius-md);
+}
+.with-icon[data-component="system-message"] {
+    display: grid;
+    grid-template-columns: min-content 1fr;
+    grid-column-gap: 1rem;
+    grid-column-gap: var(--lb-spacing-md);
+    -moz-column-gap: 1rem;
+         column-gap: 1rem;
+    -moz-column-gap: var(--lb-spacing-md);
+         column-gap: var(--lb-spacing-md);
+    padding-left: 1.25rem;
+    padding-left: var(--lb-spacing-lg);
+  }
+[data-component="system-message"] .message-title {
+    font-weight: 700;
+    font-weight: var(--lb-font-weight-bold);
+    font-size: 1rem;
+    font-size: var(--lb-font-size-md);
+    color: #1f2937;
+    color: var(--lb-system-message-title-color);
+    margin-bottom: 0.5rem;
+    margin-bottom: var(--lb-spacing-xs);
+  }
+[data-component="system-message"] .message-text {
+    font-size: 0.875rem;
+    font-size: var(--lb-font-size-sm);
+  }
+[data-component="system-message"] .message-icon svg,
+  [data-component="system-message"] .message-icon .icon {
+    width: 40px;
+    color: #d1d5db;
+    color: var(--lb-system-message-icon-color);
+  }
+[data-component="system-message"] .message-icon > svg {
+    margin-right: 0.25rem;
+    margin-right: var(--lb-spacing-2xs);
+  }
+[data-component="system-message"][data-theme="error"] .message-title {
+      color: #dc2626;
+      color: var(--lb-system-message-title-color-error);
+    }
+[data-component="system-message"][data-theme="error"] .message-icon svg {
+      opacity: 0.6;
+      color: #dc2626;
+      color: var(--lb-system-message-icon-color-error);
+    }
+[data-component="system-page"] {
+  padding: 1.25rem;
+  padding: var(--lb-spacing-lg);
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23f3f3f3' fill-opacity='1'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
+  background: var(--lb-background-checked);
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  justify-items: flex-center;
+}
+[data-component="display-options-dropdown"] {
+  width: 280px;
+  padding: 1rem;
+  padding: var(--lb-spacing-md);
+  padding-top: 0.75rem;
+  padding-top: var(--lb-spacing-sm);
+  color: #1f2937;
+  color: var(--lb-dropdown-color);
+  background-color: #fff;
+  background-color: var(--lb-dropdown-background-color);
+}
+[data-component="display-options-dropdown"] .title {
+    font-size: 1rem;
+    font-size: var(--lb-font-size-md);
+    margin-bottom: 1rem;
+    margin-bottom: var(--lb-spacing-md);
+  }
+[data-component="display-options-dropdown"] .display-option + .display-option {
+    margin-top: 1rem;
+    margin-top: var(--lb-spacing-md);
+  }
+[data-component="display-options-dropdown"] .display-option label {
+      font-weight: 600;
+      font-weight: var(--lb-font-weight-semibold);
+      display: block;
+      margin-bottom: 0.5rem;
+      margin-bottom: var(--lb-spacing-xs);
+    }
+[data-component="display-options-dropdown"] .display-option select {
+      font-size: 0.875rem;
+      font-size: var(--lb-font-size-sm);
+    }
+[data-component="param-editor"] {
+}
+[data-component="preview-embed"] {
+  border: 1px solid #d1d5db;
+  border: 1px solid var(--lb-color-surface-divider);
+  border-radius: 4px;
+  overflow: hidden;
+}
+[data-component="preview-embed"] .embed-preview {
+  }
+[data-component="preview-embed"] .embed-drawer {
+    border-top: 1px solid #d1d5db;
+    border-top: 1px solid var(--lb-color-surface-divider);
+  }
+[data-component="preview-inspector"] {
+  height: 100%;
+  width: 100%;
+}
+[data-component="preview-inspector"] .inspector-layout {
+    height: 100%;
+    width: 100%;
+  }
+.drawer-closed[data-component="preview-inspector"] #inspector-panes {
+      grid-template-rows: 1fr !important;
+    }
+.drawer-closed[data-component="preview-inspector"] #inspector-panes > .pane-group-gutter,
+      .drawer-closed[data-component="preview-inspector"] #inspector-panes > .pane-group-pane:not(:first-child) {
+        display: none;
+      }