: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;
  --border-color: #454545;
  --text-primary: #e6e6e6;
  --text-secondary: #999999;
  --accent: #18a0fb;
  --accent-hover: #27affe;
  --panel-header-height: 40px;

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

* {
  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);
}

.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;
  }
}

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: transparent;
  border-radius: 4px;
  color: var(--text-secondary);
  transition: all 0.2s ease;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
}

.a-button:hover,
/* cannot use css nesting inside of pseudo-element */
color-input::part(trigger):hover {
  background: 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:
    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%);
}

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

.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;
  }
}

  [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;
  }

  .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: auto 1fr auto;
    gap: 8px;
    align-items: center;
  }

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

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

  .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: 16px;
    max-height: calc(100dvh - var(--panel-header-height) - 16px - 16px);
    width: 360px;
    left: anchor(right --app-left-panel);
    display: grid;
    /* collapse heading and content in safari */
    grid-template-rows: max-content max-content;
    overflow: auto;
  }

  .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);
  }

  .alias-container.svelte-1zvg5i {
    position: relative;
    display: grid;
    gap: 8px;
    &:has(button:where(.svelte-1zvg5i)) {
      grid-template-columns: 1fr max-content;
    }
  }

  .alias-input.svelte-1zvg5i {
    width: 100%;
    anchor-name: --editor-alias-input;
  }

  .alias-popover.svelte-1zvg5i {
    position-anchor: --editor-alias-input;
    width: anchor-size(width);
    margin: 2px 0;
  }

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

  .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);

      a:where(.svelte-g4neeu) {
        color: var(--accent);
        font-weight: 500;
      }
    }
  }

  .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;
    margin-bottom: 30px;
    color: #000;
  }

  h2.svelte-1lag8tw {
    font-size: 24px;
    font-weight: 600;
    margin-top: 40px;
    margin-bottom: 20px;
    color: #222;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 10px;
  }

  h3.svelte-1lag8tw {
    font-size: 16px;
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 12px;
    color: #444;
  }

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

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

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

  .token-card.svelte-1lag8tw {
    background: white;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease;
  }

  .token-card.svelte-1lag8tw:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .token-name.svelte-1lag8tw {
    font-weight: 600;
    font-size: 13px;
    color: #333;
    margin-bottom: 8px;
    font-family: var(--typography-monospace-code);
  }

  .token-type.svelte-1lag8tw {
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: 500;
  }

  .color-preview.svelte-1lag8tw {
    width: 100%;
    height: 80px;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    margin-bottom: 8px;
  }

  .color-value.svelte-1lag8tw {
    font-family: var(--typography-monospace-code);
    font-size: 11px;
    color: #666;
    word-break: break-all;
  }

  .dimension-value.svelte-1lag8tw,
  .number-value.svelte-1lag8tw,
  .duration-value.svelte-1lag8tw {
    font-family: var(--typography-monospace-code);
    font-size: 13px;
    color: #333;
    font-weight: 500;
  }

  .typography-preview.svelte-1lag8tw {
    padding: 12px;
    background: #f9f9f9;
    border-radius: 4px;
    margin-bottom: 8px;
  }

  .typography-sample.svelte-1lag8tw {
    font-size: 18px;
    margin-bottom: 8px;
    color: #333;
  }

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

  .font-family-preview.svelte-1lag8tw {
    padding: 12px;
    background: #f9f9f9;
    border-radius: 4px;
    margin-bottom: 8px;
    font-size: 24px;
    line-height: 1.5;
    min-height: 50px;
    display: flex;
    align-items: center;
  }

  .font-weight-preview.svelte-1lag8tw {
    padding: 12px;
    background: #f9f9f9;
    border-radius: 4px;
    margin-bottom: 8px;
  }

  .font-weight-sample.svelte-1lag8tw {
    font-size: 18px;
    margin-bottom: 6px;
    line-height: 1.4;
    color: #333;
  }

  .token-description.svelte-1lag8tw {
    font-size: 12px;
    color: #666;
    margin-top: 8px;
    font-style: italic;
  }

  .token-deprecated.svelte-1lag8tw {
    background: #fff3cd;
    color: #856404;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
    margin-top: 8px;
    display: inline-block;
  }

  .gradient-preview.svelte-1lag8tw {
    width: 100%;
    height: 60px;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
  }

  .shadow-preview.svelte-1lag8tw {
    height: 60px;
    background: white;
    border-radius: 4px;
    margin: 8px 0;
  }

  .border-preview.svelte-1lag8tw {
    height: 40px;
    background: white;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px 0;
    font-size: 12px;
    color: #666;
  }

  .cubic-bezier-preview.svelte-1lag8tw {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9f9f9;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    margin-bottom: 8px;
  }

  .cubic-bezier-svg.svelte-1lag8tw {
    width: 100%;
    height: 100%;
    max-width: 120px;
    max-height: 120px;
  }

  .stroke-style-preview.svelte-1lag8tw {
    width: 100%;
    height: 80px;
    background: white;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px 0;
  }

  .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: max-content 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;
    height: var(--panel-header-height);
    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-hint.svelte-1nkjba2 {
    font-size: 12px;
    opacity: 0.6;
    font-family: var(--typography-monospace-code);
  }

  .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);
  }

  /* CSS Textarea */
  .css-textarea.svelte-1nkjba2 {
    flex: 1;
    padding: 16px;
    border: none;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--typography-monospace-code);
    font-size: 13px;
    line-height: 1.6;
    resize: none;
    outline: none;
  }

  .css-textarea.svelte-1nkjba2::placeholder {
    color: var(--text-secondary);
    opacity: 0.6;
  }

  /* Styleguide panel */
  .styleguide-panel.svelte-1nkjba2 {
    flex: 1;
    overflow: hidden;
  }

  .tablist-header.svelte-1nkjba2 {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    background: var(--bg-primary);
    height: var(--panel-header-height);

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

  /* Tab button styles */
  .tab-btn.svelte-1nkjba2 {
    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: 2px solid var(--accent);
      outline-offset: -2px;
    }

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