:root {
  /* https://modernfontstacks.com */
  --typography-geometric-humanist:
    Avenir, Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif;
  --typography-monospace-code:
    ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
    "DejaVu Sans Mono", monospace;
  --bg-primary: #2c2c2c;
  --bg-secondary: #393939;
  --bg-tertiary: #383838;
  --bg-hover: #404040;
  --bg-reference: oklch(42% 0.2 300);
  --bg-reference-hover: oklch(50% 0.2 300);
  --border-color: #454545;
  --text-primary: #e6e6e6;
  --text-secondary: #999999;
  --accent: #18a0fb;
  --accent-hover: #27affe;
  --popover-shadow:
    0 2px 5px 0 rgb(0 0 0 / 35%), inset 0 0 0.5px 0 rgb(255 255 255 / 35%),
    0 10px 16px 0 rgb(0 0 0 / 35%), inset 0 0.5px 0 0 rgb(255 255 255 / 8%);
  --panel-header-height: 40px;

  font-family: var(--typography-geometric-humanist);
  accent-color: var(--bg-secondary);
}

/* reduce show delay when another tooltip is shown already */
:root:has([interestfor]:has-interest) [interestfor] {
  interest-show-delay: 100ms;
}

:root:has([interestfor].has-interest) [interestfor] {
  --interest-show-delay: 100ms;
}

* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: rgb(255 255 255 / 0.25) transparent;
}

body {
  margin: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
}

@layer atoms {
  .a-link {
    color: var(--accent);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 4px;
    /* button reset */
    padding: 0;
    background: transparent;
    border: 0;
    font-size: inherit;
    font-family: inherit;

    &:hover {
      color: var(--accent-hover);
    }
  }

  .a-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
  }

  .a-panel-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  color-input {
    gap: 8px;
    width: stretch;

    &::part(output) {
      font-size: 12px;
    }
  }

  .a-field,
  color-input::part(input) {
    /* fit input into minimal available space */
    min-width: 0;
    padding: 4px 8px;
    border: 1px solid transparent;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-radius: 4px;
    font-family: inherit;
    font-size: 13px;
    transition: all 0.2s ease;
    &:disabled {
      color: var(--text-secondary);
    }
  }

  .a-field:focus,
  /* cannot use css nesting inside of pseudo-element */
  color-input::part(input):focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-primary);
    box-shadow: 0 0 0 2px rgb(0 0 0 / 0.1);
  }

  .a-field[type="number"] {
    -moz-appearance: textfield;
    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
  }

  select.a-field {
    height: 28px;
  }

  textarea.a-field {
    field-sizing: content;
    resize: none;
    max-height: 10lh;
  }

  .a-checkbox {
    /* 28px is the size of text input */
    margin: 6px 0;
    width: 16px;
    height: 16px;
    border: 1px solid var(--border-color);
  }

  /* expects icons 16px to keep button square */
  .a-button,
  color-input::part(trigger) {
    display: flex;
    min-height: 28px;
    padding: 0 5px;
    gap: 4px;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    background-color: oklch(from var(--bg-primary) l c h / 50%);
    border-radius: 4px;
    color: var(--text-primary);
    transition: all 0.2s ease;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;

    &[aria-pressed="true"] {
      background-color: var(--bg-reference);
      &:hover {
        background-color: var(--bg-reference-hover);
      }
    }
  }

  .a-button:hover,
  /* cannot use css nesting inside of pseudo-element */
  color-input::part(trigger):hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
  }

  .a-button:focus-visible,
  color-input::part(trigger):focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgb(0 0 0 / 0.1);
  }

  .a-small-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background-color: transparent;
    color: var(--text-primary);
    opacity: 0.5;
    transition: opacity 150ms;

    &:hover {
      opacity: 1;
    }
  }

  .a-popover {
    margin: 0;
    min-width: 160px;
    background: var(--bg-primary);
    border: 0;
    padding: 0;
    box-shadow: var(--popover-shadow);
  }

  .a-menu {
    position-area: bottom;
    position-try-fallbacks: flip-block;
    margin-inline: 0;
    margin-block: 8px;
  }

  .a-tooltip {
    width: max-content;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 0;
    padding: 4px 12px;
    margin-inline: 0;
    margin-block: 8px;
    border-radius: 4px;
    box-shadow: var(--popover-shadow);
    position-area: center top;
    position-try-fallbacks: flip-block;
  }

  .a-item {
    display: block;
    width: 100%;
    padding: 5px 12px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    text-align: left;
    font-size: 13px;
    font-family: inherit;
    transition: 150ms;
    text-decoration: none;

    &:hover,
    &:focus-visible {
      background: var(--bg-hover);
      outline: none;
    }

    &[aria-selected="true"] {
      background: var(--accent);
      color: white;
    }
  }

  .a-tab-scroller {
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow-x: auto;
    position: relative;
    background: var(--bg-primary);

    &::before {
      content: "";
      position: absolute;
      position-anchor: --a-selected-tab;
      left: 0;
      right: 0;
      bottom: 0px;
      border-bottom: 1px solid var(--border-color);
    }
  }

  .a-tab-list {
    display: flex;
    flex-shrink: 0;
    height: var(--panel-header-height);
    position: relative;

    &::after {
      content: "";
      position: absolute;
      position-anchor: --a-selected-tab;
      left: anchor(left);
      right: anchor(right);
      bottom: calc(anchor(bottom));
      border-bottom: 2px solid var(--accent);
      transition: all 200ms;
    }
  }

  .a-tab {
    padding: 0 12px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 0;
    transition: all 0.2s ease;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;

    &:hover {
      color: var(--text-primary);
      background: var(--bg-secondary);
    }

    &:focus-visible {
      outline: 1px solid var(--accent);
      outline-offset: -2px;
    }

    &[aria-selected="true"] {
      color: var(--accent);
      anchor-name: --a-selected-tab;
    }
  }
}

  [role="tree"].svelte-1j4zphp {
    position: relative;
    padding: 8px 0;
    min-width: max-content;
    min-height: stretch;

    &:focus-visible,
    &:has(:where(.svelte-1j4zphp):focus-visible) {
      outline: none;
      background-color: var(--bg-secondary);
    }
  }

  .deselect.svelte-1j4zphp {
    position: absolute;
    inset: 0;
    background-color: transparent;
    border: 0;
  }

  [role="treeitem"].svelte-1j4zphp {
    position: relative;
    /* unsupported syntax in svelte */
    /* --tree-view-level: attr(aria-level type(<integer>)); */
    --tree-view-toggle-visibility: hidden;
    --tree-view-bg: transparent;
    --tree-view-bg-hover: var(--bg-hover);
    --tree-view-node-opacity: 1;

    &[aria-expanded="true"] {
      --tree-view-toggle-visibility: visible;
      --tree-view-toggle-rotate: 0deg;
    }

    &[aria-expanded="false"] {
      --tree-view-toggle-visibility: visible;
      --tree-view-toggle-rotate: -90deg;
    }

    [role="tree"]:where(.svelte-1j4zphp):not([data-dragging="true"]) &[data-hovered="true"] {
      --tree-view-bg: var(--bg-hover);
      --tree-view-bg-hover: var(--bg-hover);
      --tree-view-item-hover-visibility: visible;
    }

    [role="tree"]:where(.svelte-1j4zphp):not([data-dragging="true"]) &[aria-selected="true"] {
      --tree-view-bg: var(--accent);
      --tree-view-bg-hover: var(--accent-hover);
    }

    &[data-dragging="true"] {
      --tree-view-node-opacity: 0.5;
    }
  }

  [role="group"].svelte-1j4zphp {
    display: none;

    [role="treeitem"][aria-expanded="true"]:where(.svelte-1j4zphp):not([data-dragging="true"]) > & {
      display: block;
    }
  }

  .node.svelte-1j4zphp {
    position: relative;
    display: flex;
    align-items: center;
    transition: 200ms;
    padding-left: calc((var(--tree-view-level) - 1) * 12px);
    background-color: var(--tree-view-bg);
    color: var(--text-primary);
    --tree-view-item-hover-visibility: hidden;

    &:hover {
      background-color: var(--tree-view-bg-hover);
      --tree-view-item-hover-visibility: visible;
    }
  }

  .select.svelte-1j4zphp {
    position: absolute;
    inset: 0;
    color: inherit;
    border: 0;
    background-color: transparent;
    /* selected/focused treeitem is already highlighted */
    outline: none;
  }

  .toggle.svelte-1j4zphp {
    isolation: isolate;
    visibility: var(--tree-view-toggle-visibility);
    rotate: var(--tree-view-toggle-rotate);
    /* the state is fully controlled with keyboard */
    outline: none;
  }

  .item.svelte-1j4zphp {
    isolation: isolate;
    opacity: var(--tree-view-node-opacity);
    pointer-events: none;
  }

  .name.svelte-1j4zphp {
    font-size: 14px;
    padding: 4px 0;
  }

  .drop-indicator.svelte-1j4zphp {
    position: absolute;
    --drop-indicator-level: calc(var(--tree-view-level) - 1);
    left: calc(8px + var(--drop-indicator-level) * 12px);
    right: 8px;
    height: 2px;
    background-color: var(--accent);
    pointer-events: none;
    /* to pop indicator on top of next tree item */
    z-index: 1;

    &[data-operation="reorder-before"] {
      top: -1px;
    }

    &[data-operation="reorder-after"] {
      bottom: -1px;
      /* increase level when put after expanded item (as a child) */
      &[data-expanded="true"] {
        --drop-indicator-level: var(--tree-view-level);
      }
    }

    &[data-operation="combine"] {
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: auto;
      background-color: transparent;
      border: 2px solid var(--accent);
      border-radius: 4px;
    }

    &::before {
      content: "";
      position: absolute;
      left: -4px;
      top: -3px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: var(--accent);
    }

    &[data-operation="combine"]::before {
      display: none;
    }
  }

  .cubic-bezier-editor.svelte-d0p567 {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .a-popover.svelte-1u4xpfb {
    width: 320px;
  }

  .input-container.svelte-1u4xpfb {
    position: relative;
    display: grid;
    align-items: center;
    padding: 8px;
    gap: 4px;
    &:has(button:where(.svelte-1u4xpfb):last-child) {
      grid-template-columns: 1fr max-content;
    }
  }

  .menu.svelte-1u4xpfb {
    overflow-y: auto;
    max-height: 200px;
  }

  .a-item[aria-selected="true"].svelte-1u4xpfb {
    background: var(--bg-hover);
  }

  .no-results.svelte-1u4xpfb {
    padding-bottom: 8px;
    text-align: center;
    color: var(--text-secondary);
  }

  .gradient-editor.svelte-4nssjx {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .gradient-preview.svelte-4nssjx {
    width: 100%;
    height: 60px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
  }

  .gradient-stops-list.svelte-4nssjx {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .gradient-stop-row.svelte-4nssjx {
    display: grid;
    grid-template-columns: max-content 1fr auto;
    gap: 8px;
    align-items: center;
  }

  color-input.svelte-4nssjx {
    gap: 0;
  }

  color-input.svelte-4nssjx::part(input) {
    display: none;
  }

  .color-with-alias.svelte-4nssjx {
    display: grid;
    gap: 4px;
    grid-template-columns: max-content max-content;
  }

  .position-input-group.svelte-4nssjx {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .position-input.svelte-4nssjx {
    flex: 1;
    appearance: slider-horizontal;
    height: 6px;
    -webkit-appearance: slider-horizontal;
    padding: 0;
  }

  .position-number.svelte-4nssjx {
    width: 60px;
  }

  .position-percent.svelte-4nssjx {
    font-size: 14px;
    color: var(--text-secondary);
  }

  .editor-popover.svelte-1zvg5i:popover-open {
    top: calc(var(--panel-header-height) + 16px);
    bottom: auto;
    right: auto;
    max-height: calc(100dvh - var(--panel-header-height) - 16px - 16px);
    width: 360px;
    /* explicit size of left panel as a fallback browsers without anchor positioning support */
    left: max(320px, 30%);
    left: anchor(right --app-left-panel);
    display: grid;
    /* collapse heading and content in safari */
    grid-template-rows: max-content max-content;
    overflow: auto;
  }

  .input-with-button.svelte-1zvg5i {
    display: grid;
    gap: 4px;
    align-items: start;
    &:has(button) {
      grid-template-columns: 1fr max-content;
    }
  }

  .form-header.svelte-1zvg5i {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--panel-header-height);
    padding: 0 12px;
    border-bottom: 1px solid var(--border-color);
  }

  .form-content.svelte-1zvg5i {
    display: grid;
    gap: 8px;
    padding: 12px;
    overflow-y: auto;
  }

  .form-group.svelte-1zvg5i {
    display: grid;
    gap: 4px;
  }

  .form-checkbox-group.svelte-1zvg5i {
    display: grid;
    gap: 4px;
    align-items: center;
    grid-template-columns: max-content 1fr;
  }

  .dimension-input-group.svelte-1zvg5i {
    /* fit input into minimal available space */
    min-width: 0;
    display: flex;
    gap: 4px;
  }

  .dimension-value.svelte-1zvg5i {
    flex: 1;
  }

  .dimension-unit-select.svelte-1zvg5i {
    field-sizing: content;
  }

  .duration-input-group.svelte-1zvg5i {
    /* fit input into minimal available space */
    min-width: 0;
    display: flex;
    gap: 4px;
  }

  .duration-value.svelte-1zvg5i {
    flex: 1;
  }

  .duration-unit-select.svelte-1zvg5i {
    field-sizing: content;
  }

  .transition-durations.svelte-1zvg5i {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .shadow-list.svelte-1zvg5i {
    display: grid;
    gap: 12px;
  }

  .shadow-item.svelte-1zvg5i {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: center;
  }

  .shadow-color.svelte-1zvg5i {
    grid-column: 1 / 3;
  }

  .remove-shadow-button.svelte-1zvg5i {
    justify-self: end;
  }

  .dash-array-list.svelte-1zvg5i {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .dash-array-item-row.svelte-1zvg5i {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px;
    align-items: center;
  }

  .typography-aux.svelte-1zvg5i {
    min-width: 0;
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr 1fr;
  }

  .a-item.selected.svelte-1zvg5i {
    background: var(--bg-hover);
  }

  .token-type-menu.svelte-px0dru {
    position-area: span-left bottom;
  }

  dialog.svelte-hpxl85:modal {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    padding: 28px;
    width: 100%;
    max-width: 720px;
    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15);

    &::backdrop {
      background: rgba(0, 0, 0, 0.5);
    }
  }

  h2.svelte-hpxl85 {
    margin: 0 0 16px 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
  }

  .control-container.svelte-hpxl85 {
    display: grid;
    height: 300px;
  }

  textarea.svelte-hpxl85 {
    width: 100%;
    height: 100%;
    resize: none;
    max-height: none;
  }

  .dropzone.svelte-hpxl85 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
    border-radius: 4px;
    background: var(--bg-secondary);
    transition: all 0.2s ease;
    text-align: center;

    &:hover {
      background-color: var(--bg-hover);
    }

    &[data-drag-over="true"] {
      outline: none;
      border-color: var(--accent);
      background: var(--bg-primary);
      box-shadow: 0 0 0 2px rgb(0 0 0 / 0.1);
    }
  }

  .dropzone-text.svelte-hpxl85 {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
  }

  .dropzone-subtext.svelte-hpxl85 {
    font-size: 13px;
    color: var(--text-secondary);
  }

  .file-input.svelte-hpxl85 {
    display: none;
  }

  .error-message.svelte-hpxl85 {
    color: var(--error-color, #ff0000);
    font-size: 13px;
    padding: 8px;
    background: rgba(255, 0, 0, 0.1);
    border-radius: 4px;
    margin: 8px 0;
  }

  .dialog-actions.svelte-hpxl85 {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    justify-content: flex-end;
  }
code[class*=language-],pre[class*=language-]{color:#ccc;background:0 0;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}
  .code-container.svelte-shbc7e {
    position: relative;
    overflow: hidden;
    display: grid;
    height: 100%;
  }

  .copy-button.svelte-shbc7e {
    position: absolute;
    top: 12px;
    right: 16px;
  }

  pre.svelte-shbc7e {
    height: 100%;
    margin: 0;
    padding: 16px;
    overflow: auto;
    font-family: var(--typography-monospace-code);
    font-size: 12px;
    line-height: 1.5;
    /* makes dense text slightly more readable */
    letter-spacing: 0.05em;
  }

  .dialog.svelte-1baanr0:modal {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    padding: 0;
    max-width: 980px;
    width: 100%;
    height: 80vh;
    display: grid;
    grid-template-rows: max-content 1fr;
    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15);

    &::backdrop {
      background: rgba(0, 0, 0, 0.5);
    }
  }

  .dialog-close.svelte-1baanr0 {
    position: sticky;
    right: 8px;
    margin: 0 8px;
  }

  .code-panel.svelte-1baanr0 {
    overflow: hidden;
  }

  .app-menu.svelte-g4neeu {
    position-area: span-right bottom;
  }

  .about-dialog.svelte-g4neeu {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    padding: 28px;
    max-width: 500px;
    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15);

    &::backdrop {
      background: rgba(0, 0, 0, 0.5);
    }

    h2:where(.svelte-g4neeu) {
      margin: 0 0 16px 0;
      font-size: 20px;
      font-weight: 600;
      color: var(--text-primary);
    }

    p:where(.svelte-g4neeu) {
      margin: 16px 0;
      font-size: 15px;
      line-height: 1.5;
      color: var(--text-primary);
    }
  }

  .about-dialog-close.svelte-g4neeu {
    position: absolute;
    top: 16px;
    right: 16px;
  }

  .styleguide.svelte-1lag8tw {
    background: #f0f0f0;
    color: #333;
    line-height: 1.6;
    overflow: auto;
    height: 100%;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: rgb(0 0 0 / 0.2) #f0f0f0;
  }

  .container.svelte-1lag8tw {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
  }

  h1.svelte-1lag8tw {
    font-size: 32px;
    font-weight: 700;
    color: #000;
  }

  h2.svelte-1lag8tw {
    font-size: 24px;
    font-weight: 600;
    color: #222;
  }

  h3.svelte-1lag8tw {
    font-size: 16px;
    font-weight: 600;
    color: #444;
  }

  h4.svelte-1lag8tw {
    font-size: 14px;
    font-weight: 600;
    margin-top: 16px;
    color: #555;
  }

  p.svelte-1lag8tw {
    color: #666;
    margin-bottom: 20px;
  }

  .token-grid.svelte-1lag8tw {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
  }

  .copy-css-button.svelte-1lag8tw {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s;
  }

  .token-card.svelte-1lag8tw {
    background: white;
    overflow: clip;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;

    &[data-deprecated="true"] {
      opacity: 0.5;
    }

    &:hover {
      opacity: 1;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);

      .copy-css-button:where(.svelte-1lag8tw) {
        visibility: visible;
        opacity: 1;
      }
    }
  }

  .token-preview.svelte-1lag8tw {
    --grid-step: 8px;
    --grid-line: 1px;
    /* Colors */
    --grid-color-minor: rgba(0, 0, 0, 0.06);
    --grid-color-major: rgba(0, 0, 0, 0.06);
    /* Every N steps draw a stronger line (e.g. 4 * 16 = 64px) */
    --grid-major-every: 4;
    height: 140px;
    border-bottom: 1px solid var(--grid-color-major);
    position: relative;
    /* to keep z-index: -1 inside of preview */
    isolation: isolate;
    /* Add this class to any container you want the grid on */
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: -1;
      /* Grid backgrounds:
         - minor vertical lines every 16px
         - minor horizontal lines every 16px
         - major vertical lines every (16px * 4 = 64px)
         - major horizontal lines every (16px * 4 = 64px)
      */
      background-image:
        linear-gradient(
          to right,
          var(--grid-color-minor) var(--grid-line),
          transparent var(--grid-line)
        ),
        linear-gradient(
          to bottom,
          var(--grid-color-minor) var(--grid-line),
          transparent var(--grid-line)
        ),
        linear-gradient(
          to right,
          var(--grid-color-major) var(--grid-line),
          transparent var(--grid-line)
        ),
        linear-gradient(
          to bottom,
          var(--grid-color-major) var(--grid-line),
          transparent var(--grid-line)
        );
      background-size:
        var(--grid-step) var(--grid-step),
        var(--grid-step) var(--grid-step),
        calc(var(--grid-step) * var(--grid-major-every))
          calc(var(--grid-step) * var(--grid-major-every)),
        calc(var(--grid-step) * var(--grid-major-every))
          calc(var(--grid-step) * var(--grid-major-every));
      /* hide left and top lines */
      background-position: -1px -1px;
    }
  }

  .token-content.svelte-1lag8tw {
    padding: 12px;
    display: grid;
    gap: 4px;
  }

  .token-name.svelte-1lag8tw {
    font-weight: 600;
    font-size: 13px;
    color: #333;
    font-family: var(--typography-monospace-code);
    /* too long camel cased names should be fully visible */
    overflow-wrap: anywhere;
  }

  .token-description.svelte-1lag8tw {
    font-size: 12px;
    color: #666;
  }

  .token-value.svelte-1lag8tw {
    font-family: var(--typography-monospace-code);
    font-size: 11px;
    color: #999;
  }

  .token-deprecated.svelte-1lag8tw {
    background: #fff3cd;
    color: #856404;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 500;
    justify-self: start;
  }

  .color-preview.svelte-1lag8tw {
    position: absolute;
    inset: 0;
  }

  .dimension-preview.svelte-1lag8tw {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
  }

  .dimension-bar.svelte-1lag8tw {
    width: var(--value);
    background-color: var(--bg-primary);
    height: 100%;
  }

  .cubic-bezier-preview.svelte-1lag8tw {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .typography-preview.svelte-1lag8tw {
    position: absolute;
    inset: 0;
    padding: 12px;
    font-size: 24px;
    line-height: 1.5;
    overflow: clip;
  }

  .gradient-preview.svelte-1lag8tw {
    position: absolute;
    inset: 0;
  }

  .stroke-style-preview.svelte-1lag8tw {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .number-zero-point.svelte-1lag8tw {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--position) * 100%);
    border-right: 1px solid black;
  }

  .number-bar-positive.svelte-1lag8tw {
    position: absolute;
    top: 45%;
    left: calc(var(--position) * 100%);
    width: calc(var(--size) * 100%);
    height: 10%;
    background-color: green;
  }

  .number-bar-negative.svelte-1lag8tw {
    position: absolute;
    top: 45%;
    right: calc((1 - var(--position)) * 100%);
    width: calc(var(--size) * 100%);
    height: 10%;
    background-color: red;
  }

  .shadow-preview.svelte-1lag8tw {
    position: absolute;
    inset: 20% 10%;
    background-color: white;
  }

  .border-preview.svelte-1lag8tw {
    position: absolute;
    inset: 20% 10%;
    background-color: white;
  }

  .curve-impulse.svelte-1lag8tw {
    opacity: 0.8;
    filter: drop-shadow(0 0 3px rgba(79, 70, 229, 0.3));
  }

  .container.svelte-1nkjba2 {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }

  /* Main content */
  .content.svelte-1nkjba2 {
    display: flex;
    flex: 1;
    overflow: hidden;
  }

  /* Panels */
  .panel.svelte-1nkjba2 {
    display: grid;
    grid-template-rows: var(--panel-header-height) 1fr;
    background: var(--bg-primary);
    border-right: 1px solid var(--border-color);
  }

  .left-panel.svelte-1nkjba2 {
    width: max(320px, 30%);
    border-right: 1px solid var(--border-color);
    anchor-name: --app-left-panel;
  }

  .right-panel.svelte-1nkjba2 {
    flex: 1;
    border-right: none;
  }

  .panel-header.svelte-1nkjba2 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 12px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    background: var(--bg-primary);
    gap: 8px;
  }

  .toolbar-actions.svelte-1nkjba2 {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
  }

  .tokens-container.svelte-1nkjba2 {
    overflow: auto;
  }

  /* Tree structure */
  .token.svelte-1nkjba2 {
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
  }

  .token-preview.svelte-1nkjba2 {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    flex-shrink: 0;
  }

  .token-icon.svelte-1nkjba2 {
    flex-shrink: 0;
    opacity: 0.6;
    display: flex;
    align-items: center;
  }

  .token-name.svelte-1nkjba2 {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-primary);
  }

  .edit-button.svelte-1nkjba2 {
    pointer-events: auto;
    visibility: var(--tree-view-item-hover-visibility);
  }

  .styleguide-panel.svelte-1nkjba2 {
    overflow: hidden;
  }