/* src/tokens.css */
:root {
  --demo-primary: #60a5fa;
  --demo-on-primary: #0b1020;
  --demo-secondary: #38bdf8;
  --demo-tertiary: #a855f7;
  --demo-warning: #f59e0b;
  --demo-danger: #f43f5e;
  --demo-success: #22c55e;
  --demo-background: #0b1020;
  --demo-surface: #111729;
  --demo-border: #ffffff17;
  --demo-text: #f8fafc;
  --demo-text-muted: #94a3b8;
  --demo-focus-ring: color-mix(in srgb, var(--demo-primary) 60%, transparent);
  --demo-font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
  --demo-font-family-mono:
    ui-monospace,
    "SF Mono",
    Menlo,
    Consolas,
    monospace;
  --demo-font-size-xs: 0.75rem;
  --demo-font-size-sm: 0.875rem;
  --demo-font-size-md: 1rem;
  --demo-font-size-lg: 1.125rem;
  --demo-font-size-xl: 1.5rem;
  --demo-font-weight-regular: 400;
  --demo-font-weight-bold: 600;
  --demo-line-height: 1.4;
  --demo-spacing-1: 0.25rem;
  --demo-spacing-2: 0.5rem;
  --demo-spacing-3: 0.75rem;
  --demo-spacing-4: 1rem;
  --demo-spacing-5: 1.25rem;
  --demo-spacing-6: 1.5rem;
  --demo-spacing-8: 2rem;
  --demo-radius-sm: 0.5rem;
  --demo-radius-md: 0.625rem;
  --demo-radius-lg: 1rem;
  --demo-radius-full: 999rem;
  --demo-radius-control: var(--demo-radius-full);
  --demo-border-width: 0.0625rem;
  --demo-transition-duration: 150ms;
  --demo-transition-easing: ease-out;
  --demo-button-text-transform: none;
  --demo-letter-spacing-button: normal;
  --demo-letter-spacing-overline: 0.12em;
  --demo-elevation-8: 0 2rem 4rem -1rem rgb(0 0 0 / 0.6);
  --demo-elevation-16: -2rem 0 4rem rgb(0 0 0 / 0.5);
  --demo-color-scheme: dark;
  --demo-page: color-mix(in srgb, var(--demo-background) 70%, black);
  --demo-logo-filter: none;
}
:root[data-demo-theme=apollo] {
  --demo-primary: #90b5f9;
  --demo-on-primary: #000000de;
  --demo-secondary: #69c8f7;
  --demo-tertiary: #cbbaee;
  --demo-warning: #f3b44f;
  --demo-danger: #e26555;
  --demo-success: #8fd559;
  --demo-background: #11141a;
  --demo-surface: #2b2f35;
  --demo-border: #ffffff1f;
  --demo-text: #ffffff;
  --demo-text-muted: #ffffffb3;
  --demo-focus-ring: #90b5f980;
}
:root[data-demo-theme=openbet-dark] {
  --demo-primary: #0000ff;
  --demo-on-primary: #ffffff;
  --demo-secondary: #69c8f7;
  --demo-tertiary: #cbbaee;
  --demo-warning: #f3b44f;
  --demo-danger: #ff0000;
  --demo-success: #8fd559;
  --demo-background: #11141a;
  --demo-surface: #2b2f35;
  --demo-border: #ffffff1f;
  --demo-text: #ffffff;
  --demo-text-muted: #ffffffb3;
  --demo-focus-ring: #ffffffb3;
}
:root[data-demo-theme=openbet-light] {
  --demo-primary: #0000ff;
  --demo-on-primary: #ffffff;
  --demo-secondary: #2a9ed8;
  --demo-tertiary: #6f55b8;
  --demo-warning: #e49921;
  --demo-danger: #ff0000;
  --demo-success: #569f1e;
  --demo-background: #ffffff;
  --demo-surface: #ffffff;
  --demo-border: #0000001f;
  --demo-text: #000000de;
  --demo-text-muted: #00000099;
  --demo-focus-ring: #0000ff80;
  --demo-color-scheme: light;
  --demo-page: #ffffff;
  --demo-logo-filter: brightness(0) opacity(0.87);
}
:root:is([data-demo-theme=apollo], [data-demo-theme=openbet-dark], [data-demo-theme=openbet-light]) {
  --demo-font-family:
    "Roboto",
    "Helvetica",
    "Arial",
    sans-serif;
  --demo-font-family-mono:
    "Roboto Mono",
    ui-monospace,
    "SF Mono",
    Menlo,
    monospace;
  --demo-font-size-lg: 1.25rem;
  --demo-font-weight-bold: 500;
  --demo-line-height: 1.5;
  --demo-radius-sm: 0.25rem;
  --demo-radius-md: 0.25rem;
  --demo-radius-lg: 0.25rem;
  --demo-radius-control: 0.25rem;
  --demo-transition-duration: 200ms;
  --demo-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --demo-button-text-transform: uppercase;
  --demo-letter-spacing-button: 0.0893em;
  --demo-letter-spacing-overline: 0.1em;
  --demo-elevation-8:
    0 0.3125rem 0.3125rem -0.1875rem rgb(0 0 0 / 0.2),
    0 0.5rem 0.625rem 0.0625rem rgb(0 0 0 / 0.14),
    0 0.1875rem 0.875rem 0.125rem rgb(0 0 0 / 0.12);
  --demo-elevation-16:
    0 0.5rem 0.625rem -0.3125rem rgb(0 0 0 / 0.2),
    0 1rem 1.5rem 0.125rem rgb(0 0 0 / 0.14),
    0 0.375rem 1.875rem 0.3125rem rgb(0 0 0 / 0.12);
}
:root[data-demo-theme=hades] {
  --demo-primary: #d4a24c;
  --demo-on-primary: #17110a;
  --demo-secondary: #8fb3a6;
  --demo-tertiary: #b48ead;
  --demo-warning: #e3b562;
  --demo-danger: #d9675b;
  --demo-success: #8fb38a;
  --demo-background: #0c0a08;
  --demo-surface: #16130f;
  --demo-border: #d4a24c2b;
  --demo-text: #f3ede2;
  --demo-text-muted: #a3957d;
  --demo-focus-ring: color-mix(in srgb, var(--demo-primary) 60%, transparent);
}
:root[data-demo-theme=atropos] {
  --demo-primary: #ffffff;
  --demo-on-primary: #000000;
  --demo-secondary: #d4d4d4;
  --demo-tertiary: #a3a3a3;
  --demo-warning: #e5e5e5;
  --demo-danger: #ffffff;
  --demo-success: #bdbdbd;
  --demo-background: #000000;
  --demo-surface: #0c0c0c;
  --demo-border: #ffffff33;
  --demo-text: #ffffff;
  --demo-text-muted: #8c8c8c;
  --demo-focus-ring: #ffffff;
}
:root[data-demo-theme=aphrodite] {
  --demo-primary: #d6457a;
  --demo-on-primary: #ffffff;
  --demo-secondary: #1f8f86;
  --demo-tertiary: #8e5cc7;
  --demo-warning: #c98a1b;
  --demo-danger: #c2304b;
  --demo-success: #2f8f62;
  --demo-background: #fdf5f3;
  --demo-surface: #ffffff;
  --demo-border: #ecd3d8;
  --demo-text: #3a1e2b;
  --demo-text-muted: #8a6575;
  --demo-focus-ring: color-mix(in srgb, var(--demo-primary) 55%, transparent);
  --demo-elevation-8: 0 2rem 4rem -1rem rgb(122 40 72 / 0.18);
  --demo-elevation-16: -2rem 0 4rem rgb(122 40 72 / 0.14);
  --demo-color-scheme: light;
  --demo-page: color-mix(in srgb, var(--demo-background) 94%, #d6457a);
  --demo-logo-filter: brightness(0) saturate(100%) invert(14%) sepia(18%) saturate(1800%) hue-rotate(290deg);
}
:root[data-demo-theme=herakles] {
  --demo-primary: #a65e23;
  --demo-on-primary: #ffffff;
  --demo-secondary: #5c7a34;
  --demo-tertiary: #8a5a2b;
  --demo-warning: #c48a12;
  --demo-danger: #ad3a2c;
  --demo-success: #4f8436;
  --demo-background: #f5efe3;
  --demo-surface: #fffcf5;
  --demo-border: #e2d5bb;
  --demo-text: #2a2215;
  --demo-text-muted: #7a6b50;
  --demo-focus-ring: color-mix(in srgb, var(--demo-primary) 55%, transparent);
  --demo-elevation-8: 0 2rem 4rem -1rem rgb(80 55 20 / 0.2);
  --demo-elevation-16: -2rem 0 4rem rgb(80 55 20 / 0.15);
  --demo-color-scheme: light;
  --demo-page: color-mix(in srgb, var(--demo-background) 93%, #7a6b50);
  --demo-logo-filter: brightness(0) saturate(100%) invert(11%) sepia(20%) saturate(900%) hue-rotate(5deg);
}
:root[data-demo-theme=minotaurus] {
  --demo-primary: #1f5f99;
  --demo-on-primary: #ffffff;
  --demo-secondary: #b8452f;
  --demo-tertiary: #b8872a;
  --demo-warning: #b8872a;
  --demo-danger: #a5272a;
  --demo-success: #4b7d4a;
  --demo-background: #eeede9;
  --demo-surface: #fafaf7;
  --demo-border: #d5d3cb;
  --demo-text: #171a20;
  --demo-text-muted: #666a72;
  --demo-focus-ring: color-mix(in srgb, var(--demo-primary) 55%, transparent);
  --demo-elevation-8: 0 2rem 4rem -1rem rgb(20 25 35 / 0.2);
  --demo-elevation-16: -2rem 0 4rem rgb(20 25 35 / 0.15);
  --demo-color-scheme: light;
  --demo-page: color-mix(in srgb, var(--demo-background) 92%, #171a20);
  --demo-logo-filter: brightness(0);
}

/* node_modules/gridstack/dist/gridstack.min.css */
.grid-stack {
  position: relative;
}
.grid-stack-placeholder > .placeholder-content {
  background-color: rgba(0, 0, 0, .1);
  margin: 0;
  position: absolute;
  width: auto;
  z-index: 0 !important;
}
.grid-stack > .grid-stack-item {
  position: absolute;
  padding: 0;
  top: 0;
  width: var(--gs-column-width);
  height: var(--gs-cell-height);
}
.grid-stack > .grid-stack-item > .grid-stack-item-content {
  margin: 0;
  position: absolute;
  width: auto;
  overflow-x: hidden;
  overflow-y: auto;
}
.grid-stack > .grid-stack-item.size-to-content:not(.size-to-content-max) > .grid-stack-item-content {
  overflow-y: hidden;
}
.grid-stack:not(.grid-stack-rtl) > .grid-stack-item {
  left: 0;
}
.grid-stack.grid-stack-rtl > .grid-stack-item {
  right: 0;
}
.grid-stack > .grid-stack-item > .grid-stack-item-content,
.grid-stack > .grid-stack-placeholder > .placeholder-content {
  top: var(--gs-item-margin-top);
  right: var(--gs-item-margin-right);
  bottom: var(--gs-item-margin-bottom);
  left: var(--gs-item-margin-left);
}
.grid-stack-item > .ui-resizable-handle {
  position: absolute;
  font-size: .1px;
  display: block;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  z-index: 100;
}
.grid-stack-item.ui-resizable-autohide > .ui-resizable-handle,
.grid-stack-item.ui-resizable-disabled > .ui-resizable-handle {
  display: none;
}
.grid-stack-item > .ui-resizable-ne,
.grid-stack-item > .ui-resizable-nw,
.grid-stack-item > .ui-resizable-se,
.grid-stack-item > .ui-resizable-sw {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23666" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 20 20"><path d="m10 3 2 2H8l2-2v14l-2-2h4l-2 2"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  z-index: 101;
}
.grid-stack-item > .ui-resizable-ne {
  transform: rotate(45deg);
}
.grid-stack-item > .ui-resizable-sw {
  transform: rotate(45deg);
}
.grid-stack-item > .ui-resizable-nw {
  transform: rotate(-45deg);
}
.grid-stack-item > .ui-resizable-se {
  transform: rotate(-45deg);
}
.grid-stack-item > .ui-resizable-nw {
  cursor: nw-resize;
  width: 20px;
  height: 20px;
  top: var(--gs-item-margin-top);
  left: var(--gs-item-margin-left);
}
.grid-stack-item > .ui-resizable-n {
  cursor: n-resize;
  height: 10px;
  top: var(--gs-item-margin-top);
  left: 25px;
  right: 25px;
}
.grid-stack-item > .ui-resizable-ne {
  cursor: ne-resize;
  width: 20px;
  height: 20px;
  top: var(--gs-item-margin-top);
  right: var(--gs-item-margin-right);
}
.grid-stack-item > .ui-resizable-e {
  cursor: e-resize;
  width: 10px;
  top: 15px;
  bottom: 15px;
  right: var(--gs-item-margin-right);
}
.grid-stack-item > .ui-resizable-se {
  cursor: se-resize;
  width: 20px;
  height: 20px;
  bottom: var(--gs-item-margin-bottom);
  right: var(--gs-item-margin-right);
}
.grid-stack-item > .ui-resizable-s {
  cursor: s-resize;
  height: 10px;
  left: 25px;
  bottom: var(--gs-item-margin-bottom);
  right: 25px;
}
.grid-stack-item > .ui-resizable-sw {
  cursor: sw-resize;
  width: 20px;
  height: 20px;
  bottom: var(--gs-item-margin-bottom);
  left: var(--gs-item-margin-left);
}
.grid-stack-item > .ui-resizable-w {
  cursor: w-resize;
  width: 10px;
  top: 15px;
  bottom: 15px;
  left: var(--gs-item-margin-left);
}
.grid-stack-item.ui-draggable-dragging > .ui-resizable-handle {
  display: none !important;
}
.grid-stack-item.ui-draggable-dragging {
  will-change:
    left,
    right,
    top;
}
.grid-stack-item.ui-resizable-resizing {
  will-change: width, height;
}
.grid-stack-item.ui-draggable-armed {
  cursor: move;
  animation: gs-armed-wiggle .25s ease-in-out infinite;
}
.grid-stack-item > .ui-resizable-handle.ui-resizable-armed {
  animation: gs-armed-pulse .5s ease-in-out infinite;
}
@keyframes gs-armed-wiggle {
  0%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-1.5deg);
  }
  75% {
    transform: rotate(1.5deg);
  }
}
@keyframes gs-armed-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .3;
  }
}
.ui-draggable-dragging,
.ui-resizable-resizing {
  z-index: 10000;
}
.ui-draggable-dragging > .grid-stack-item-content,
.ui-resizable-resizing > .grid-stack-item-content {
  box-shadow: 1px 4px 6px rgba(0, 0, 0, .2);
  opacity: .8;
}
.grid-stack-animate,
.grid-stack-animate .grid-stack-item {
  transition:
    left .3s,
    right .3s,
    top .3s,
    height .3s,
    width .3s;
}
.grid-stack-animate .grid-stack-item.grid-stack-placeholder,
.grid-stack-animate .grid-stack-item.ui-draggable-dragging,
.grid-stack-animate .grid-stack-item.ui-resizable-resizing {
  transition:
    left 0s,
    right 0s,
    top 0s,
    height 0s,
    width 0s;
}
.grid-stack > .grid-stack-item[gs-y="0"] {
  top: 0;
}
.grid-stack:not(.grid-stack-rtl) > .grid-stack-item[gs-x="0"] {
  left: 0;
}
.grid-stack.grid-stack-rtl > .grid-stack-item[gs-x="0"] {
  right: 0;
}
.gs-print-show {
  display: none;
}
@media print {
  @page gs-landscape {
    size: landscape;
  }
  @page gs-portrait {
    size: portrait;
  }
  .grid-stack {
    display: block !important;
    height: auto !important;
    position: static !important;
  }
  .grid-stack > .grid-stack-item {
    display: block !important;
    float: left !important;
    position: static !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    width: calc(100% * var(--gs-w)/ var(--gs-columns,12)) !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
  .grid-stack > .grid-stack-item > .grid-stack-item-content {
    position: relative !important;
    height: auto !important;
    overflow: visible !important;
    white-space: normal !important;
    margin-top: var(--gs-item-margin-top) !important;
    margin-right: var(--gs-item-margin-right) !important;
    margin-bottom: var(--gs-item-margin-bottom) !important;
    margin-left: var(--gs-item-margin-left) !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
  }
  .gs-print-hide {
    display: none;
  }
  .gs-print-show {
    display: block;
  }
  .gs-print-avoid-break-after {
    break-after: avoid !important;
    page-break-after: avoid !important;
  }
  .grid-stack > .grid-stack-item.gs-print-hide {
    display: none !important;
  }
  .grid-stack > .grid-stack-item[gs-page-break=true],
  .grid-stack > .grid-stack-item[gs-print-orientation] {
    float: none !important;
    clear: both !important;
  }
  .grid-stack > .grid-stack-item[gs-page-break=true] {
    page-break-before: always !important;
    break-before: page !important;
  }
  .grid-stack > .grid-stack-item[gs-print-orientation=landscape] {
    page: gs-landscape;
    min-width: calc(100vmax * var(--gs-w)/ var(--gs-columns,12)) !important;
  }
  .grid-stack > .grid-stack-item[gs-print-orientation=portrait] {
    page: gs-portrait;
    min-width: calc(100vmin * var(--gs-w)/ var(--gs-columns,12)) !important;
  }
  .grid-stack > .grid-stack-item[gs-break-inside=true] {
    float: none !important;
    clear: both !important;
    width: 100% !important;
    break-inside: auto !important;
    page-break-inside: auto !important;
  }
  .grid-stack > .grid-stack-item > .ui-resizable-handle {
    display: none !important;
  }
}

/* src/styles.css */
html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  font-family: var(--demo-font-family);
  line-height: var(--demo-line-height);
  color: var(--demo-text);
  background: var(--demo-page);
  color-scheme: var(--demo-color-scheme);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.primary,
.ghost {
  min-height: 2.25rem;
  padding: 0.375rem var(--demo-spacing-4);
  border-radius: var(--demo-radius-control);
  font: inherit;
  font-size: var(--demo-font-size-sm);
  font-weight: var(--demo-font-weight-bold);
  letter-spacing: var(--demo-letter-spacing-button);
  text-transform: var(--demo-button-text-transform);
  cursor: pointer;
  transition: background-color var(--demo-transition-duration) var(--demo-transition-easing), border-color var(--demo-transition-duration) var(--demo-transition-easing);
}
.primary {
  border: 0;
  background: var(--demo-primary);
  color: var(--demo-on-primary);
  font-weight: var(--demo-font-weight-bold);
}
.ghost {
  border: var(--demo-border-width) solid var(--demo-border);
  background: transparent;
  color: var(--demo-text);
}
.ghost:hover:not(:disabled) {
  border-color: var(--demo-primary);
}
.primary:disabled,
.ghost:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
a:focus-visible,
.primary:focus-visible,
.ghost:focus-visible {
  outline: 0.125rem solid var(--demo-focus-ring);
  outline-offset: 0.125rem;
}
.segmented {
  display: flex;
  gap: var(--demo-spacing-1);
  margin: 0;
  padding: var(--demo-spacing-1);
  border: var(--demo-border-width) solid var(--demo-border);
  border-radius: var(--demo-radius-control);
}
.segmented label {
  position: relative;
  cursor: pointer;
}
.segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.segment {
  display: grid;
  place-items: center;
  min-width: 2.25rem;
  height: 2rem;
  padding-inline: var(--demo-spacing-2);
  box-sizing: border-box;
  border-radius: var(--demo-radius-control);
  font-size: var(--demo-font-size-sm);
  color: var(--demo-text-muted);
  transition: background-color var(--demo-transition-duration) var(--demo-transition-easing);
}
.segment svg {
  width: 1.125rem;
  height: 1.125rem;
}
.segmented label:hover .segment {
  color: var(--demo-text);
}
.segmented input:checked + .segment {
  background: var(--demo-primary);
  color: var(--demo-on-primary);
}
.segmented input:focus-visible + .segment {
  outline: 0.125rem solid var(--demo-focus-ring);
  outline-offset: 0.125rem;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--demo-spacing-2);
  margin: 0;
  padding: var(--demo-spacing-4) var(--demo-spacing-5) 0;
  border: 0;
}
.chips label {
  position: relative;
  cursor: pointer;
}
.chips input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--demo-spacing-2);
  padding: var(--demo-spacing-1) var(--demo-spacing-3);
  border: var(--demo-border-width) solid var(--demo-border);
  border-radius: var(--demo-radius-control);
  color: var(--demo-text-muted);
  font-size: var(--demo-font-size-xs);
  transition: background-color var(--demo-transition-duration) var(--demo-transition-easing), color var(--demo-transition-duration) var(--demo-transition-easing);
}
.chips label:hover .chip {
  color: var(--demo-text);
}
.chips input:checked + .chip {
  border-color: transparent;
  background: var(--demo-primary);
  color: var(--demo-on-primary);
  font-weight: var(--demo-font-weight-bold);
}
.chips input:focus-visible + .chip {
  outline: 0.125rem solid var(--demo-focus-ring);
  outline-offset: 0.125rem;
}
.chip-count {
  min-width: 1rem;
  padding: 0 var(--demo-spacing-1);
  border-radius: var(--demo-radius-full);
  background: color-mix(in srgb, currentColor 20%, transparent);
  font-size: 0.6875rem;
  line-height: 1rem;
  text-align: center;
}
.modes {
  margin: var(--demo-spacing-3) var(--demo-spacing-5) 0;
}
.modes label {
  display: flex;
  flex: 1;
}
.modes .segment {
  flex: 1;
}
.text-entry {
  display: grid;
  gap: var(--demo-spacing-1);
  padding-block: var(--demo-spacing-1);
}
.text-entry .controls .text {
  font-family: inherit;
  font-size: var(--demo-font-size-sm);
}
.text-hint {
  display: flex;
  flex-wrap: wrap;
  gap: var(--demo-spacing-1);
  margin: 0;
  color: var(--demo-text-muted);
  font-size: var(--demo-font-size-xs);
}
.export-actions {
  display: flex;
  gap: var(--demo-spacing-2);
}
.export-head {
  flex-wrap: wrap;
}
.export-head button {
  white-space: nowrap;
}
.select {
  width: 100%;
  min-height: 2.25rem;
  padding: var(--demo-spacing-2) var(--demo-spacing-8) var(--demo-spacing-2) var(--demo-spacing-3);
  border: var(--demo-border-width) solid var(--demo-border);
  border-radius: var(--demo-radius-control);
  background:
    linear-gradient(
      45deg,
      transparent 50%,
      currentColor 50%) right 1.125rem center / 0.3125rem 0.3125rem no-repeat,
    linear-gradient(
      135deg,
      currentColor 50%,
      transparent 50%) right 0.8125rem center / 0.3125rem 0.3125rem no-repeat,
    var(--demo-background);
  color: var(--demo-text);
  font: inherit;
  font-size: var(--demo-font-size-sm);
  appearance: none;
  cursor: pointer;
}
.select:focus-visible {
  outline: 0.125rem solid var(--demo-focus-ring);
  outline-offset: 0.125rem;
}
.tools .select {
  flex: none;
  width: auto;
}
.drawer .panel {
  grid-template-columns: minmax(0, 1fr);
}
.drawer :is(.body, .code) {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--demo-text) 22%, transparent) transparent;
  scrollbar-gutter: stable;
}
.drawer :is(.body, .code):hover {
  scrollbar-color: color-mix(in srgb, var(--demo-text) 40%, transparent) transparent;
}
.drawer :is(.body, .code)::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
}
.drawer :is(.body, .code)::-webkit-scrollbar-track {
  background: transparent;
}
.drawer :is(.body, .code)::-webkit-scrollbar-thumb {
  border: 0.125rem solid transparent;
  border-radius: var(--demo-radius-full);
  background: color-mix(in srgb, var(--demo-text) 22%, transparent) padding-box;
}
.drawer :is(.body, .code)::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--demo-text) 40%, transparent);
}
.demo-chip {
  padding: 0.125rem var(--demo-spacing-2);
  border: var(--demo-border-width) dashed color-mix(in srgb, var(--demo-warning) 60%, transparent);
  border-radius: var(--demo-radius-full);
  color: var(--demo-warning);
  font-size: var(--demo-font-size-xs);
  font-weight: var(--demo-font-weight-bold);
  white-space: nowrap;
  cursor: help;
}
.auth-alert {
  margin: var(--demo-spacing-3) var(--demo-spacing-4) 0;
  padding: var(--demo-spacing-2) var(--demo-spacing-3);
  border: var(--demo-border-width) solid color-mix(in srgb, var(--demo-danger) 50%, transparent);
  border-radius: var(--demo-radius-md);
  background: color-mix(in srgb, var(--demo-danger) 12%, transparent);
  color: var(--demo-text);
  font-size: var(--demo-font-size-sm);
}
.icon-button {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  min-height: 2.25rem;
  padding: 0;
}
.icon-button svg {
  width: 1.125rem;
  height: 1.125rem;
}
.sim-form {
  display: grid;
  gap: var(--demo-spacing-4);
}
.sim-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--demo-spacing-3);
}
.sim-field {
  display: grid;
  gap: var(--demo-spacing-1);
  min-width: 0;
  color: var(--demo-text-muted);
  font-size: var(--demo-font-size-xs);
}
.sim-field textarea {
  box-sizing: border-box;
  min-width: 0;
  padding: var(--demo-spacing-2) var(--demo-spacing-3);
  border: var(--demo-border-width) solid var(--demo-border);
  border-radius: var(--demo-radius-md);
  background: var(--demo-background);
  color: var(--demo-text);
  font: inherit;
  font-size: var(--demo-font-size-sm);
  resize: vertical;
}
.sim-field input {
  box-sizing: border-box;
  min-width: 0;
  height: 2.25rem;
  padding: 0 var(--demo-spacing-3);
  border: var(--demo-border-width) solid var(--demo-border);
  border-radius: var(--demo-radius-control);
  background: var(--demo-background);
  color: var(--demo-text);
  font: inherit;
  font-size: var(--demo-font-size-sm);
}
.sim-field :is(input, textarea):focus-visible {
  outline: 0.125rem solid var(--demo-focus-ring);
  outline-offset: 0.125rem;
}
.sim-field input[aria-invalid=true] {
  border-color: var(--demo-danger);
}
.sim-submit {
  width: 100%;
}
.sim-field small {
  margin-left: var(--demo-spacing-1);
  opacity: 0.7;
}
.sim-result {
  min-height: 1.25rem;
  margin: 0;
  color: var(--demo-danger);
  font-size: var(--demo-font-size-xs);
  overflow-wrap: anywhere;
}
.sim-result[data-ok=true] {
  color: var(--demo-success);
}
.sim-result p {
  margin: 0;
}
.sim-followup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--demo-spacing-2);
  margin-top: var(--demo-spacing-3);
  color: var(--demo-text-muted);
}
.sim-followup .ghost {
  min-height: 1.75rem;
  padding: 0 var(--demo-spacing-3);
  font-size: var(--demo-font-size-xs);
}
.sim-form .modes {
  margin: 0;
}
.sim-source {
  display: block;
  padding: var(--demo-spacing-4) var(--demo-spacing-5) 0;
}
.sim-error {
  color: var(--demo-danger);
}
.sim-night {
  display: grid;
  gap: var(--demo-spacing-3);
  padding: var(--demo-spacing-3);
  border: var(--demo-border-width) solid var(--demo-border);
  border-radius: var(--demo-radius-md);
}
.sim-check {
  display: flex;
  align-items: center;
  gap: var(--demo-spacing-2);
  font-size: var(--demo-font-size-sm);
  cursor: pointer;
}
.sim-check input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--demo-primary);
}
.sim-hint {
  color: var(--demo-text-muted);
  font-size: var(--demo-font-size-xs);
}

/* angular:styles/global:styles */
/*# sourceMappingURL=styles-NATQ5RRD.css.map */