@layer components {
  .view-panel {
    view-transition-name: demo-panel;
  }

  .view-heading {
    view-transition-name: demo-heading;
  }

  ::view-transition-group(demo-panel), ::view-transition-group(demo-heading) {
    animation-duration: var(--duration-slow);
  }
}

@layer theme{:root,:host{--color-zinc-0:oklch(98.6% .0008 265);--color-zinc-95:oklch(19.4% .0019 265)}:root,:host{--duration-slow:.3s}:root,:host{--color-code-function:var(--ui-code-function);--color-code-keyword:var(--ui-code-keyword);--color-code-number:var(--ui-code-number);--color-code-property:var(--ui-code-property);--color-code-string:var(--ui-code-string);--color-code-surface:light-dark(var(--color-zinc-0), var(--color-zinc-95))}}