.lexical-ribbon-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    background: var(--aj-surface);
    color: var(--aj-ink);
    font-family: var(--font-sans);
    border: 1px solid var(--aj-line);
    border-radius: var(--aj-radius-panel);
    overflow: hidden;
}

.lexical-ribbon-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 8px 0;
    background: var(--aj-surface-muted);
    border-bottom: 1px solid var(--aj-line-soft);
}

.lexical-ribbon-tab {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    cursor: pointer;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: var(--aj-radius-control) var(--aj-radius-control) 0 0;
    color: var(--aj-ink-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    user-select: none;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.lexical-ribbon-tab:hover {
    color: var(--aj-ink);
    background: var(--aj-surface-raised);
}

.lexical-ribbon-tab.active {
    color: var(--aj-ink);
    background: var(--aj-surface);
    border-color: var(--aj-line);
}

.lexical-ribbon-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 70px;
    padding: 10px;
}

.lexical-ribbon-tab-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
}

.lexical-ribbon-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0 12px 0 0;
    border-right: 1px solid var(--aj-line-soft);
    flex-shrink: 0;
}

.lexical-ribbon-section:last-child {
    border-right: 0;
    padding-right: 0;
}

.lexical-ribbon-buttons-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 32px;
}

.lexical-ribbon-section-label {
    width: 100%;
    margin-top: 2px;
    padding-top: 4px;
    border-top: 1px solid var(--aj-line-soft);
    color: var(--aj-ink-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
}

.lexical-ribbon-section-label::after {
    content: " ▾";
    font-size: 8px;
}

.lexical-ribbon-section.collapsed .lexical-ribbon-section-label::after {
    content: " ▴";
}

.lexical-ribbon-button,
.lexical-floating-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--aj-control-border);
    border-radius: var(--aj-control-radius);
    background: var(--aj-control-bg);
    color: var(--aj-control-ink);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.lexical-ribbon-button:hover,
.lexical-floating-button:hover {
    background: var(--aj-control-bg-hover);
    border-color: var(--aj-control-border-hover);
    color: var(--aj-control-ink-hover);
}

.lexical-ribbon-button.active,
.lexical-floating-button.active {
    background: var(--aj-control-bg-active);
    border-color: var(--aj-control-border-active);
    color: var(--aj-control-ink-active);
}

.lexical-ribbon-button:disabled,
.lexical-floating-button:disabled {
    opacity: 0.42;
    cursor: default;
}

.lexical-dropdown-wrapper {
    position: relative;
}

.lexical-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 3000;
    min-width: 160px;
    margin-top: 4px;
    padding: 6px;
    border: 1px solid var(--aj-floating-border);
    border-radius: var(--aj-floating-radius);
    background: var(--aj-floating-bg);
    box-shadow: var(--aj-floating-shadow);
    overflow: hidden;
}

.lexical-dropdown-item {
    padding: 8px 10px;
    border-radius: calc(var(--aj-radius-control) - 4px);
    color: var(--aj-control-ink);
    cursor: pointer;
    font-size: 13px;
    transition: background-color 120ms ease, color 120ms ease;
}

.lexical-dropdown-item:hover {
    background: var(--aj-control-bg-hover);
    color: var(--aj-control-ink-hover);
}

.floating-toolbar,
.lexical-floating-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
}

.floating-toolbar {
    padding: 4px;
    border: 1px solid var(--aj-floating-border);
    border-radius: var(--aj-floating-radius);
    background: var(--aj-floating-bg);
    box-shadow: var(--aj-floating-shadow);
}

.image-node-container {
    display: inline-block;
    position: relative;
    cursor: default;
    border: 2px solid transparent;
    border-radius: var(--aj-radius-control);
}

.image-node-container.focused {
    border-color: var(--aj-accent);
}

.image-resizer {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--aj-accent);
    border-radius: 50%;
    cursor: nwse-resize;
    display: none;
}

.image-node-container.focused .image-resizer {
    display: block;
}

.lexical-editor-input table {
    width: 100%;
    margin: 10px 0;
    border-collapse: collapse;
}

.lexical-editor-input table,
.lexical-editor-input th,
.lexical-editor-input td {
    border: 1px solid var(--aj-line);
}

.lexical-editor-input th,
.lexical-editor-input td {
    min-width: 50px;
    padding: 8px;
    text-align: left;
}

.table-cell-selected {
    background: var(--aj-accent-muted);
}
button {
    cursor: pointer;
    background-color: inherit;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    /*padding: 10px 14px;*/

    color: var(--aj-ink);
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, color 0.18s ease;

    &.active {
        color: var(--aj-accent);
    }

    &[disabled] {
        color: var(--aj-surface-muted);
        opacity: 0.65;
    }

    &.container {
        display : flex;
        align-items : center;
        justify-content : flex-start;
        gap : 5px
    }

    &.hover {
        &:not([disabled]):hover {
            background-color: var(--aj-accent);
            color: var(--aj-canvas);
        }
    }

    &.btn-secondary {
        width: 200px;
        background-color: var(--aj-surface-hover);
        border : 1px solid var(--aj-control-border-hover);
    }

    &.btn-danger {
        width: 200px;
        background-color: var(--aj-danger);
        border : 1px solid transparent;
    }

    &:not([disabled]):hover {
        transform: translateY(-1px);
    }
}

a {
    cursor: pointer;
    color: var(--aj-ink);
    text-decoration: none;
}

a:hover {
    color: var(--aj-accent);
}

a:visited {
    color: var(--aj-ink);
}

a:active {
    color: var(--aj-accent);
}

.jfx-table-view {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  height: 400px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--aj-ink);
  isolation: isolate;
}

.jfx-table-header-viewport {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--aj-line);
  background: transparent;
}

.jfx-table-header-content {
  display: flex;
  position: relative;
  left: 0;
  top: 0;
  min-height: 100%;
}

.jfx-table-body-wrapper {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: transparent;
}

.jfx-table-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background: transparent;
  scrollbar-gutter: stable both-edges;
}

.jfx-table-content {
  position: relative;
  min-height: 100%;
  background: transparent;
}

.jfx-table-placeholder {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);

  -webkit-backdrop-filter: blur(6px);
}

.jfx-table-default-placeholder {
  color: var(--aj-ink-soft);
  font-size: 14px;
  text-align: center;
  line-height: 1.5;
  max-width: 24rem;
}

.jfx-table-view.jfx-table-view-loading .jfx-table-default-placeholder {
  color: var(--aj-accent-strong);
}

.jfx-table-view.jfx-table-view-error .jfx-table-default-placeholder {
  color: var(--aj-danger);
}

.jfx-table-header-cell {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  position: relative;
  padding: 0 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--aj-ink-soft);
  border-right: none;
  cursor: default;
  transition: color 160ms ease;
}

.jfx-table-header-cell.jfx-table-header-cell-last {
  border-right: none;
}

.jfx-table-header-cell.jfx-table-header-cell-sortable {
  cursor: pointer;
}

.jfx-table-header-cell.jfx-table-header-cell-sortable:hover {
  color: var(--aj-ink);
}

.jfx-table-header-cell.jfx-table-header-cell-sorted {
  color: var(--aj-accent-strong);
}

.jfx-table-header-cell.jfx-table-header-cell-sorted::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.jfx-table-header-cell.jfx-table-header-cell-sorted-asc::after,
.jfx-table-header-cell.jfx-table-header-cell-sorted-desc::after {
  margin-left: 6px;
  font-size: 11px;
  line-height: 1;
}

.jfx-table-header-cell.jfx-table-header-cell-sorted-asc::after {
  content: "↑";
}

.jfx-table-header-cell.jfx-table-header-cell-sorted-desc::after {
  content: "↓";
}

.jfx-table-row {
  color: var(--aj-ink);
  background-color: transparent;
  transition: background-color 160ms ease, color 160ms ease;
}

.jfx-table-row.jfx-table-row-odd {
  background-color: transparent;
}

.jfx-table-row.jfx-table-row-empty {
  background-color: transparent;
}

.jfx-table-row.jfx-table-row-placeholder {
  color: var(--aj-ink-soft);
}

.jfx-table-row:not(.jfx-table-row-empty):not(.jfx-table-row-placeholder):not(.jfx-table-row-selected):hover {
  background-color: var(--aj-surface-hover);
}

.jfx-table-row.jfx-table-row-selected {
  background-color: var(--aj-accent-muted);
  color: var(--aj-ink);
  box-shadow: inset 0 0 0 1px var(--aj-accent-ring);
}

.jfx-table-cell {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-width: 0;
  padding: 0 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: inherit;
  border-right: none;
  border-bottom: 1px solid var(--aj-line);
  background-color: transparent;
  background-origin: content-box;
  transition: color 160ms ease, border-color 160ms ease, opacity 160ms ease;
}

.jfx-table-cell.jfx-table-cell-last {
  border-right: none;
}

.jfx-table-cell.jfx-table-cell-empty {
  opacity: 0.92;
}

.jfx-table-cell.jfx-table-cell-selected {
  color: inherit;
}

.jfx-table-cell.jfx-table-cell-loading-placeholder {
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    var(--aj-surface-muted) 18%,
    var(--aj-accent-shimmer) 50%,
    var(--aj-surface-muted) 82%,
    transparent 100%
  );
  background-position: 16px center;
  background-repeat: no-repeat;
  background-size: 56% 10px;
  animation: jfx-table-cell-loading 1.6s ease-in-out infinite;
}

@keyframes jfx-table-cell-loading {
  0% {
    background-position: 16px center;
    opacity: 0.72;
  }

  50% {
    background-position: 24px center;
    opacity: 1;
  }

  100% {
    background-position: 16px center;
    opacity: 0.72;
  }
}

.jfx-virtual-list {
    height: 100%;
    width: 100%;
    min-width: 0;
    min-height: 0;
}

.jfx-virtual-list-viewport {
    scrollbar-width: thin;
}

.jfx-virtual-list-content {
    box-sizing: border-box;
}

.jfx-virtual-list-cell {
    box-sizing: border-box;
}

.jfx-virtual-list-cell-loading {
    color: var(--aj-ink-muted, currentColor);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--aj-canvas) inset !important;
    -webkit-text-fill-color: var(--aj-ink) !important;
    transition: background-color 5000s ease-in-out 0s;
}

input {
    font-size: 15px;
    outline: 0;
    border: 0;
    box-shadow: none !important;
    padding: 0;
    margin: 0;
    background-color: inherit;
    width: 100%;

    &:focus,
    &:focus-visible,
    &:active {
        outline: none !important;
        box-shadow: none !important;
    }

    &.focus {
        color: var(--aj-accent);

        &::placeholder {
            color: var(--aj-accent);
        }
    }


    &.dirty {
        color: var(--aj-warning);

        &::placeholder {
            color: var(--aj-warning);
        }
    }

    &.invalid {
        color: var(--aj-danger);

        &::placeholder {
            color: var(--aj-danger);
        }
    }

    &::placeholder {
        color: var(--aj-ink);
        opacity: 0.64;
    }

    &[readonly]::placeholder {
        opacity: 0.5;
    }

    &[type=date] {
        &[readonly] {
            opacity: 0.5;
        }
    }
}

.jfx-combo-box {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 28px;
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
  color: var(--aj-ink);
  outline: none;
}

.jfx-combo-box__value {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.jfx-combo-box__value-text {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.jfx-combo-box__value-text.is-placeholder {
  color: var(--aj-ink-muted);
}

.jfx-combo-box__indicator {
  flex: 0 0 auto;
  color: var(--aj-ink-muted);
  font-size: 20px;
  line-height: 1;
  transition: transform 160ms ease, color 160ms ease;
}

.jfx-combo-box-open .jfx-combo-box__indicator,
.jfx-combo-box:focus-visible .jfx-combo-box__indicator {
  color: var(--aj-accent);
}

.jfx-combo-box-open .jfx-combo-box__indicator {
  transform: rotate(180deg);
}

.jfx-combo-box-open .jfx-combo-box__value-text:not(.is-placeholder),
.jfx-combo-box:focus-visible .jfx-combo-box__value-text:not(.is-placeholder) {
  color: var(--aj-accent);
}

.jfx-combo-box__dropdown {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--aj-floating-border);
  border-radius: var(--aj-floating-radius);
  background: var(--aj-floating-bg);
  backdrop-filter: blur(var(--aj-floating-blur)) saturate(180%);
  backdrop-filter: blur(var(--aj-floating-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--aj-floating-blur)) saturate(180%);
  box-shadow: var(--aj-floating-shadow);
}

.jfx-combo-box__table {
  border: none;
  background: transparent;
  box-shadow: none;
  width: 100%;
  box-sizing: border-box;
}

.jfx-combo-box__footer {
  width: 100%;
  min-width: 0;
  flex: 0 0 auto;
  box-sizing: border-box;
}

.jfx-combo-box__table .jfx-table-body-wrapper,
.jfx-combo-box__table .jfx-table-viewport,
.jfx-combo-box__table .jfx-table-content {
  background: transparent;
}

.jfx-combo-box__table .jfx-table-cell {
  padding: 0 12px;
}

.jfx-combo-box__item {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.jfx-combo-box__item-text {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.jfx-combo-box__footer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid var(--aj-floating-border);
  color: var(--aj-accent);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}

.jfx-combo-box__footer-link:hover {
  background: var(--aj-accent-muted);
}

.jfx-combo-box__footer-link::after {
  content: "north_east";
  font-family: "Material Icons", sans-serif;
  font-size: 18px;
  line-height: 1;
}

.editor {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}

.jfx-editor-host {
    min-height: 220px;
    display: block;
    border: 1px solid var(--aj-line);
    border-radius: var(--aj-radius-panel, 16px);
    overflow: hidden;
    background: var(--aj-surface-overlay, var(--aj-surface));
}

.jfx-editor-fallback,
.jfx-editor-readonly {
    min-height: 220px;
    padding: 18px;
    color: var(--aj-ink);
    background: var(--aj-surface-overlay, var(--aj-surface));
}

.jfx-editor-fallback {
    display: grid;
    place-items: center;
    color: var(--aj-ink-muted);
}

.jfx-editor-readonly {
    display: grid;
    gap: 12px;
}

.jfx-editor,
.jfx-editor__shell {
    min-height: inherit;
    height: 100%;
}

.jfx-editor__shell {
    display: grid;
    grid-template-rows: auto 1fr;
}

.jfx-editor__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid var(--aj-line-soft);
    background: color-mix(in srgb, var(--aj-surface-muted) 72%, transparent);
}

.jfx-editor__toolbar-group {
    display: grid;
    gap: 5px;
    align-content: start;
}

.jfx-editor__toolbar-group-label {
    padding-left: 4px;
    color: var(--aj-ink-faint);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
}

.jfx-editor__toolbar-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.jfx-editor__toolbar-button {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--aj-line);
    border-radius: 999px;
    padding: 0 12px;
    color: var(--aj-ink);
    background: var(--aj-surface-overlay);
    cursor: pointer;
    font: inherit;
}

.jfx-editor__toolbar-button:hover {
    border-color: var(--aj-accent);
    background: var(--aj-accent-muted);
}

.jfx-editor__toolbar-button.is-active,
.jfx-editor__toolbar-button.active {
    border-color: var(--aj-accent);
    color: var(--aj-accent-strong);
    background: color-mix(in srgb, var(--aj-accent-muted) 86%, transparent);
}

.jfx-editor__toolbar-button:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.jfx-editor__toolbar-icon {
    font-size: 18px;
}

.jfx-editor__surface-wrap {
    position: relative;
    min-height: 180px;
}

.jfx-editor__surface {
    min-height: 180px;
    height: 100%;
    padding: 18px;
    color: var(--aj-ink);
    outline: none;
}

.jfx-editor__surface:focus {
    box-shadow: inset var(--aj-shadow-focus);
}

.jfx-editor__placeholder {
    position: absolute;
    top: 18px;
    left: 18px;
    right: 18px;
    pointer-events: none;
    color: var(--aj-ink-muted);
}

.jfx-editor-readonly .lexical-paragraph,
.jfx-editor-readonly .lexical-heading,
.jfx-editor-readonly .lexical-quote {
    margin: 0;
}

.jfx-editor-readonly .lexical-heading {
    font-size: 1.35rem;
    font-weight: 850;
    letter-spacing: -0.04em;
}

.jfx-editor-readonly .lexical-quote {
    border-left: 3px solid var(--aj-accent);
    padding-left: 14px;
    color: var(--aj-ink-soft);
}

.jfx-editor-readonly__placeholder {
    margin: 0;
    color: var(--aj-ink-muted);
}

.jfx-editor-code {
    margin: 0;
    border: 1px solid var(--aj-line-soft);
    border-radius: var(--aj-radius-control, 12px);
    padding: 14px;
    overflow: auto;
    color: var(--aj-ink);
    background: color-mix(in srgb, var(--aj-surface-muted) 76%, transparent);
    font-family: "Cascadia Code", "JetBrains Mono", "Fira Code", monospace;
    font-size: 0.9rem;
    line-height: 1.55;
}

.jfx-editor-code__content {
    white-space: pre;
}

.hljs-keyword {
    color: var(--aj-accent-strong);
    font-weight: 800;
}

.hljs-string {
    color: var(--aj-warning);
}

.hljs-number {
    color: var(--aj-info);
}

.hljs-comment {
    color: var(--aj-ink-muted);
    font-style: italic;
}

.hljs-tag,
.hljs-name,
.hljs-attr,
.hljs-attribute {
    color: var(--aj-accent-strong);
}

.editor .lexical-ribbon-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 10px 8px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--aj-surface) 68%, transparent);
    box-shadow: none;
    backdrop-filter: none;
    backdrop-filter: none;

    -webkit-backdrop-filter: none;
    color: var(--aj-ink);
}

.editor .lexical-ribbon-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 !important;
    background: transparent !important;
}

.editor .lexical-ribbon-tab {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--aj-ink-faint);
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.editor .lexical-ribbon-tab:hover {
    background: color-mix(in srgb, var(--aj-surface-muted) 52%, transparent);
    color: var(--aj-ink);
}

.editor .lexical-ribbon-tab.active {
    background: color-mix(in srgb, var(--aj-accent) 8%, transparent);
    border-color: color-mix(in srgb, var(--aj-line-strong) 36%, transparent);
    color: var(--aj-ink);
}

.editor .lexical-ribbon-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    flex-wrap: wrap;
}

.editor .lexical-ribbon-tab-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
}

.editor .lexical-ribbon-tab-content:last-child {
    width: 100%;
    gap: 16px;
    padding-top: 2px;
}

.editor .lexical-ribbon-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 12px 10px 0;
    border-right: 1px solid color-mix(in srgb, var(--aj-line-strong) 26%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--aj-line-strong) 22%, transparent);
}

.editor .lexical-ribbon-tab-content:last-child .lexical-ribbon-section {
    flex: 1 1 220px;
    min-width: 220px;
    gap: 8px;
    padding-left: 4px;
    padding-right: 18px;
    padding-bottom: 12px;
}

.editor .lexical-ribbon-tab-content:last-child .lexical-ribbon-section:last-child {
    min-width: 180px;
}

.editor .lexical-ribbon-section:last-child {
    border-bottom: none;
    border-right: none;
    padding-bottom: 0;
    padding-right: 0;
}

.editor .lexical-ribbon-buttons-container {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    flex-wrap: wrap;
}

.editor .lexical-ribbon-section-label {
    font-size: 9px;
    letter-spacing: 0.16em;
    color: var(--aj-ink-faint);
    text-transform: uppercase;
    user-select: none;
    cursor: pointer;
    line-height: 1.15;
    padding-top: 10px;
    border-top: 1px solid color-mix(in srgb, var(--aj-line-strong) 22%, transparent);
}

.editor .lexical-ribbon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--aj-ink);
    cursor: pointer;
    font: inherit;
    line-height: 1;
    white-space: nowrap;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.editor .lexical-ribbon-button:hover {
    background: color-mix(in srgb, var(--aj-accent-muted) 72%, transparent);
    border-color: color-mix(in srgb, var(--aj-line-strong) 28%, transparent);
}

.editor .lexical-ribbon-button.active {
    background: color-mix(in srgb, var(--aj-accent-muted) 70%, transparent);
    border-color: color-mix(in srgb, var(--aj-line-strong) 34%, transparent);
    color: var(--aj-accent);
}

.editor .lexical-dropdown-wrapper {
    position: relative;
    display: inline-flex;
    align-items: stretch;
}

.editor .lexical-ribbon-tab-content:last-child .lexical-ribbon-button {
    padding-left: 12px;
    padding-right: 12px;
}

.editor .lexical-dropdown-menu {
    position: fixed;
    z-index: 3000;
    min-width: 180px;
    padding: 6px;
    border: 1px solid color-mix(in srgb, var(--aj-line-strong) 26%, transparent);
    border-radius: 10px;
    background: var(--aj-surface-overlay);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--aj-shadow-strong) 36%, transparent);
    overflow: hidden;
    backdrop-filter: none;
    backdrop-filter: none;

    -webkit-backdrop-filter: none;
}

.editor .lexical-dropdown-item {
    min-height: 32px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--aj-ink);
}

.editor .lexical-dropdown-item:hover {
    background: var(--aj-accent-muted);
}

.editor .lexical-menu {
    width: 100%;
}

.editor .lexical-menu-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}

.editor .lexical-menu-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 180px;
}

.editor .lexical-menu-trigger {
    align-self: flex-start;
}

.editor .lexical-menu-trigger.active {
    background: color-mix(in srgb, var(--aj-accent) 8%, transparent);
    border-color: color-mix(in srgb, var(--aj-line-strong) 36%, transparent);
}

.editor .lexical-menu-panel {
    position: static;
    display: grid;
    gap: 10px;
    min-width: 220px;
}

.editor .lexical-menu-section {
    display: grid;
    gap: 8px;
}

.editor .lexical-menu-section-label {
    font-size: 9px;
    letter-spacing: 0.16em;
    color: var(--aj-ink-faint);
    text-transform: uppercase;
}

.editor .lexical-menu-section-content {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.editor .lexical-menu-button {
    min-height: 30px;
}

.editor .lexical-menu-dropdown {
    display: inline-flex;
}

.editor .lexical-menu-dropdown-panel {
    min-width: 180px;
}

.editor .lexical-floating-toolbar {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px;
    border: 1px solid color-mix(in srgb, var(--aj-line-strong) 26%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--aj-surface) 72%, transparent);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--aj-shadow-medium) 28%, transparent);
}

.editor .lexical-floating-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    min-width: 30px;
    padding: 0 9px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--aj-ink);
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.editor .lexical-floating-button:hover {
    background: color-mix(in srgb, var(--aj-accent-muted) 72%, transparent);
    border-color: color-mix(in srgb, var(--aj-line-strong) 28%, transparent);
}

.editor .lexical-floating-button.active {
    background: color-mix(in srgb, var(--aj-accent-muted) 72%, transparent);
    border-color: color-mix(in srgb, var(--aj-line-strong) 34%, transparent);
    color: var(--aj-accent);
}

.editor .lexical-editor-input,
.editor .lexical-read-only {
    flex: 0 1 auto;
    min-height: 0;
    height: auto;
}

.editor .lexical-editor-input .lexical-paragraph,
.editor .lexical-read-only .lexical-paragraph {
    margin: 0 0 0.9em;
    line-height: 1.65;
}

.editor .lexical-editor-input .lexical-paragraph:last-child,
.editor .lexical-read-only .lexical-paragraph:last-child {
    margin-bottom: 0;
}

.editor .lexical-editor-input .lexical-heading-h1,
.editor .lexical-read-only .lexical-heading-h1,
.editor .lexical-editor-input .lexical-heading-h2,
.editor .lexical-read-only .lexical-heading-h2,
.editor .lexical-editor-input .lexical-heading-h3,
.editor .lexical-read-only .lexical-heading-h3 {
    margin: 1.2em 0 0.55em;
    color: var(--aj-ink);
    font-weight: 850;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.editor .lexical-editor-input .lexical-heading-h1:first-child,
.editor .lexical-read-only .lexical-heading-h1:first-child,
.editor .lexical-editor-input .lexical-heading-h2:first-child,
.editor .lexical-read-only .lexical-heading-h2:first-child,
.editor .lexical-editor-input .lexical-heading-h3:first-child,
.editor .lexical-read-only .lexical-heading-h3:first-child {
    margin-top: 0;
}

.editor .lexical-editor-input .lexical-heading-h1,
.editor .lexical-read-only .lexical-heading-h1 {
    font-size: 2rem;
}

.editor .lexical-editor-input .lexical-heading-h2,
.editor .lexical-read-only .lexical-heading-h2 {
    font-size: 1.6rem;
}

.editor .lexical-editor-input .lexical-heading-h3,
.editor .lexical-read-only .lexical-heading-h3 {
    font-size: 1.3rem;
}

.editor .lexical-editor-input .lexical-list-ul,
.editor .lexical-read-only .lexical-list-ul,
.editor .lexical-editor-input .lexical-list-ol,
.editor .lexical-read-only .lexical-list-ol {
    margin: 0.9em 0;
    padding-left: 1.6em;
}

.editor .lexical-editor-input .lexical-list-ul,
.editor .lexical-read-only .lexical-list-ul {
    list-style-type: disc;
}

.editor .lexical-editor-input .lexical-list-ol,
.editor .lexical-read-only .lexical-list-ol {
    list-style-type: decimal;
}

.editor .lexical-editor-input .lexical-listitem,
.editor .lexical-read-only .lexical-listitem {
    margin: 0.3em 0;
    color: var(--aj-ink);
    line-height: 1.6;
}

.editor .lexical-editor-input .lexical-listitem > .lexical-list-ul,
.editor .lexical-read-only .lexical-listitem > .lexical-list-ul,
.editor .lexical-editor-input .lexical-listitem > .lexical-list-ol,
.editor .lexical-read-only .lexical-listitem > .lexical-list-ol {
    margin-top: 0.45em;
    margin-bottom: 0.45em;
}

.editor .lexical-editor-input {
    display: block;
    overflow: auto;
}

.editor div:has(> .lexical-editor-input),
.editor div:has(> .lexical-read-only) {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-height: 0;
    height: auto;
}

.editor .lexical-editor-input table,
.editor .lexical-read-only table {
    width: fit-content;
    min-width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 12px 0;
    table-layout: auto;
    background: var(--aj-surface);
    border: 1px solid var(--aj-line);
    border-radius: 8px;
    overflow: hidden;
}

.editor .lexical-editor-input table tr,
.editor .lexical-read-only table tr {
    background: transparent;
}

.editor .lexical-editor-input table td,
.editor .lexical-editor-input table th,
.editor .lexical-read-only table td,
.editor .lexical-read-only table th {
    min-width: 96px;
    padding: 10px 12px;
    vertical-align: top;
    border-right: 1px solid var(--aj-line-soft);
    border-bottom: 1px solid var(--aj-line-soft);
    color: var(--aj-ink-muted);
    background: transparent;
}

.editor .lexical-editor-input table td:last-child,
.editor .lexical-editor-input table th:last-child,
.editor .lexical-read-only table td:last-child,
.editor .lexical-read-only table th:last-child {
    border-right: none;
}

.editor .lexical-editor-input table tr:last-child td,
.editor .lexical-editor-input table tr:last-child th,
.editor .lexical-read-only table tr:last-child td,
.editor .lexical-read-only table tr:last-child th {
    border-bottom: none;
}

.editor .lexical-editor-input table th,
.editor .lexical-read-only table th {
    font-weight: 600;
    background: var(--aj-surface-muted);
    color: var(--aj-ink-soft);
}

.jfx-dialog-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4000;
    padding: 16px;
}

.jfx-dialog {
    width: min(720px, 100%);
    background: var(--aj-surface);
    border: 1px solid var(--aj-line);
    border-radius: 8px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.jfx-dialog__title {
    margin: 0;
    font-size: 16px;
    color: var(--aj-ink-soft);
}

.jfx-dialog__content {
    min-width: 0;
}

.jfx-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.jfx-dialog__button {
    border-radius: 6px;
    border: 1px solid var(--aj-line);
    padding: 8px 12px;
    cursor: pointer;
    font: inherit;
}

.jfx-dialog__button--secondary {
    background: var(--aj-surface);
    color: var(--aj-ink-soft);
}

.jfx-dialog__button--primary {
    background: var(--aj-accent);
    border-color: var(--aj-accent-strong);
    color: var(--aj-ink-inverse);
}

.jfx-window:has(.image-plugin-dialog) .jfx-window__surface {
    background: var(--aj-overlay-bg);
    border: 1px solid color-mix(in srgb, var(--aj-overlay-border) 12%, transparent);
    box-shadow:
            0 14px 34px color-mix(in srgb, var(--aj-shadow-medium) 26%, transparent),
            inset 0 1px 0 color-mix(in srgb, white 8%, transparent);
    backdrop-filter: blur(var(--aj-overlay-blur)) saturate(180%);
    backdrop-filter: blur(var(--aj-overlay-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--aj-overlay-blur)) saturate(180%);
}

.jfx-window:has(.image-plugin-dialog) .jfx-window__header {
    border-bottom: 1px solid color-mix(in srgb, var(--aj-chrome-border) 10%, transparent);
}

.image-plugin-dialog {
    height: 100%;
    box-sizing: border-box;
    padding: 16px;
}

.image-plugin-dialog__shell {
    height: 100%;
}

.image-plugin-dialog__intro {
    opacity: 0.72;
    font-size: 13px;
    line-height: 1.5;
}

.image-plugin-dialog__section-title {
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    opacity: 0.46;
}

.image-plugin-dialog__preview-shell,
.image-plugin-dialog__field-group {
    border: 1px solid color-mix(in srgb, var(--aj-overlay-border) 10%, transparent);
    border-radius: var(--aj-overlay-radius);
    padding: 14px;
    background: transparent !important;
    box-shadow: none;
    backdrop-filter: blur(calc(var(--aj-overlay-blur) - 6px)) saturate(180%);
    backdrop-filter: blur(calc(var(--aj-overlay-blur) - 6px)) saturate(180%);
    -webkit-backdrop-filter: blur(calc(var(--aj-overlay-blur) - 6px)) saturate(180%);
}

.image-plugin-dialog__preview-shell {
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.image-plugin-dialog__preview-image {
    display: block;
    max-width: 100%;
    width: auto;
    margin: 0 auto;
    border-radius: var(--aj-overlay-radius);
}

.image-plugin-dialog__preview-placeholder {
    width: 100%;
    min-height: 232px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 18px;
    color: var(--aj-ink-faint);
    opacity: 0.74;
}

.image-plugin-dialog__field-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.image-plugin-dialog__actions-row,
.image-plugin-dialog__preset-row,
.image-plugin-dialog__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.image-plugin-dialog__input {
    width: 100%;
}

.image-plugin-dialog__input input {
    width: 100%;
    border: none;
    background: transparent !important;
    box-shadow: none;
}

.image-plugin-dialog__input input:focus {
    outline: none;
}

.image-plugin-dialog__button,
.image-plugin-dialog__chip {
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--aj-control-border-hover) 10%, transparent);
    background: transparent !important;
    box-shadow: none;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.image-plugin-dialog__button--primary {
    border-color: color-mix(in srgb, var(--aj-accent) 22%, white 8%);
}

.image-plugin-dialog__button--ghost {
    opacity: 0.82;
}

.image-plugin-dialog__chip {
    min-height: 34px;
    padding: 6px 12px;
    font-size: 11px;
}

.image-plugin-dialog__meta {
    padding: 0 2px;
    font-size: 12px;
    opacity: 0.68;
    line-height: 1.5;
}

.image-plugin-dialog__meta--error {
    color: var(--aj-danger);
    opacity: 0.92;
}

.image-plugin-dialog__file-host,
.image-plugin-dialog__file-input {
    display: none !important;
}

.image-cropper-field {
    width: 100%;
}

.image-cropper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.image-cropper .toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.image-cropper .canvas-wrap {
    display: flex;
    justify-content: flex-start;
}

.image-cropper canvas.canvas {
    border: 1px solid var(--aj-surface-muted);
    background: var(--aj-canvas);
    border-radius: 6px;
    max-width: 100%;
    height: auto;
    cursor: crosshair;
    touch-action: none;
    user-select: none;
}

.image-cropper .preview {
    flex : 1;
    min-width: 0;
    min-height: 0;
    border: 1px solid var(--aj-surface-muted);
    border-radius: 6px;
    object-fit: cover;
    background: var(--aj-canvas);
}

.image-cropper-dialog {
    min-width: 500px;
    min-height: 400px;
}

.jfx-input-container {
  padding: 10px 0 6px;
}

.jfx-input-container__label {
  height: 12px;
  margin-bottom: 6px;
}

.jfx-input-container__label span.placeholder {
  display: inline;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
}

.jfx-input-container.empty .jfx-input-container__label span.placeholder {
  display: none;
}

.jfx-input-container__label.focus {
  color: var(--aj-accent) !important;
}

.jfx-input-container__label.dirty {
  color: var(--aj-warning) !important;
}

.jfx-input-container__label.invalid {
  color: var(--aj-danger) !important;
}

.jfx-input-container__control input {
  border: none;
  outline: none;
  background: transparent;
  padding: 4px 0;
  width: 100%;
  font-size: 14px;
}

.jfx-input-container__divider {
  border: 0;
  height: 2px;
  margin: 0;
  padding: 0;
  background-color: var(--aj-surface-hover);
}

.jfx-input-container__divider.focus {
  background-color: var(--aj-accent);
}

.jfx-input-container__divider.dirty {
  background-color: var(--aj-warning);
}

.jfx-input-container__divider.invalid {
  background-color: var(--aj-danger);
}

.jfx-input-container__errors {
  margin-top: 6px;
  color: var(--aj-danger);
  font-size: 10px;
  height: 12px;
}

div.jfx-drawer {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

div.jfx-drawer > .jfx-drawer__scrim {
    display: none;
}

div.jfx-drawer > .jfx-drawer__panel-shell {
    align-self: stretch;
    position: relative;
    flex: 0 0 auto;
    width: 0;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    transition: width 180ms ease;
    z-index: 2;
}

div.jfx-drawer.jfx-drawer--end > .jfx-drawer__panel-shell {
    order: 2;
}

div.jfx-drawer > .jfx-drawer__panel-shell > .jfx-drawer__panel {
    box-sizing: border-box;
    width: 280px;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    background: var(--aj-overlay-bg);
    color: var(--aj-ink);
    border-right: 1px solid var(--aj-overlay-border);
    backdrop-filter: blur(var(--aj-overlay-blur)) saturate(180%);
    backdrop-filter: blur(var(--aj-overlay-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--aj-overlay-blur)) saturate(180%);
    transform: translateX(-100%);
    transition: transform 180ms ease, box-shadow 180ms ease;
    box-shadow: none;
}

div.jfx-drawer.jfx-drawer--end > .jfx-drawer__panel-shell > .jfx-drawer__panel {
    border-right: none;
    border-left: 1px solid var(--aj-overlay-border);
    transform: translateX(100%);
}

div.jfx-drawer.jfx-drawer--open > .jfx-drawer__panel-shell {
    width: 280px;
}

div.jfx-drawer.jfx-drawer--open > .jfx-drawer__panel-shell > .jfx-drawer__panel {
    transform: translateX(0);
    box-shadow: 0 16px 32px var(--aj-shadow-medium);
}

div.jfx-drawer .jfx-drawer__navigation {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    box-sizing: border-box;
}

div.jfx-drawer > .jfx-drawer__content {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: 100%;
    z-index: 1;
}

div.jfx-drawer.jfx-drawer--end > .jfx-drawer__content {
    order: 1;
}

@media (max-width: 767px) {
    div.jfx-drawer {
        display: block;
    }

    div.jfx-drawer > .jfx-drawer__scrim {
        position: absolute;
        inset: 0;
        display: block;
        background: var(--aj-surface-backdrop);
        opacity: 0;
        pointer-events: none;
        transition: opacity 180ms ease;
        z-index: 10;
    }

    div.jfx-drawer > .jfx-drawer__panel-shell,
    div.jfx-drawer.jfx-drawer--open > .jfx-drawer__panel-shell {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(92vw, 280px);
        max-width: 100%;
        overflow: visible;
        pointer-events: none;
        z-index: 20;
    }

    div.jfx-drawer.jfx-drawer--end > .jfx-drawer__panel-shell,
    div.jfx-drawer.jfx-drawer--end.jfx-drawer--open > .jfx-drawer__panel-shell {
        left: auto;
        right: 0;
    }

    div.jfx-drawer > .jfx-drawer__panel-shell > .jfx-drawer__panel {
        width: min(92vw, 280px);
    }

    div.jfx-drawer.jfx-drawer--open > .jfx-drawer__scrim {
        opacity: 1;
        pointer-events: auto;
    }

    div.jfx-drawer.jfx-drawer--open > .jfx-drawer__panel-shell {
        pointer-events: auto;
    }
}

div.hbox {
    display: flex;
    flex-direction: row;
}

hr {
    border: 0;
    border-top: 1px solid var(--aj-line);
    margin: 0;
    color: var(--aj-line);
    background-color: var(--aj-line);
}

div.vbox {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.jfx-window.is-hidden {
    opacity: 0;
    transform: scale(0.96) translateY(14px);
    pointer-events: none;
}

.jfx-window {
    display: flex;
    flex-direction: column;
    position: absolute;
    overflow: visible;
    max-height: 1024px;
    min-width: 360px;
    min-height: 360px;
    max-width: 1600px;

    transition:
            opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 1;
    transform: none;
    pointer-events: all;

    .jfx-window__surface {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        position: relative;
        isolation: isolate;

        background: var(--aj-overlay-bg);
        border: 1px solid var(--aj-overlay-border);
        box-shadow: 0 16px 44px var(--aj-shadow-medium);
        border-radius: var(--aj-overlay-radius);
    }

    .jfx-window__surface::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        backdrop-filter: blur(var(--aj-overlay-blur)) saturate(180%);
        backdrop-filter: blur(var(--aj-overlay-blur)) saturate(180%);
        -webkit-backdrop-filter: blur(var(--aj-overlay-blur)) saturate(180%);
        pointer-events: none;
        z-index: 0;
    }

    .jfx-window__surface > * {
        position: relative;
        z-index: 1;
    }

    .jfx-window__container {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
    }

    .jfx-window__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color : var(--aj-chrome-bg);
        cursor: move;
        flex: 0 0 38px;
        height: 38px;
        min-height: 38px;
        max-height: 38px;
        line-height: 38px;
        vertical-align: center;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        border-bottom: 1px solid var(--aj-chrome-border);

        .jfx-window__title {
            padding-left: 12px;
            font-size: 12px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            font-weight: 700;
        }
    }

    &.jfx-window--resizable {
        .jfx-window__handle--nw {
            position: absolute;
            cursor: nw-resize;
            left : -12px;
            top : -12px;
            width : 12px;
            height : 12px;
        }

        .jfx-window__handle--ne {
            position : absolute;
            right: -12px;
            top : -12px;
            width: 12px;
            height: 12px;
            cursor : ne-resize;
        }

        .jfx-window__handle--se {
            position : absolute;
            right: -12px;
            bottom: -12px;
            width: 12px;
            height: 12px;
            cursor : se-resize;
        }

        .jfx-window__handle--sw {
            position: absolute;
            left : -12px;
            bottom : -12px;
            width : 12px;
            height : 12px;
            cursor: sw-resize;
        }

        .jfx-window__handle--n {
            position : absolute;
            left : 12px;
            top: -12px;
            width : calc(100% - 24px);
            height : 12px;
            cursor : n-resize;
        }

        .jfx-window__handle--s {
            position : absolute;
            left : 12px;
            bottom: -12px;
            width : calc(100% - 24px);
            height : 12px;
            cursor : s-resize;
        }

        .jfx-window__handle--w {
            position: absolute;
            left: -12px;
            top : 12px;
            width: 12px;
            height: calc(100% - 24px);
            cursor: w-resize;
        }

        .jfx-window__handle--e {
            position: absolute;
            right: -12px;
            top: 12px;
            width: 12px;
            height: calc(100% - 24px);
            cursor: e-resize;
        }
    }


}

html[data-theme="light"] .jfx-window .jfx-window__surface {
    border-color: color-mix(in srgb, var(--aj-overlay-border) 112%, transparent);
    box-shadow:
            0 16px 34px color-mix(in srgb, var(--aj-shadow-medium) 76%, transparent),
            inset 0 1px 0 color-mix(in srgb, white 36%, transparent);
}

html[data-theme="light"] .jfx-window .jfx-window__header {
    background-color: color-mix(in srgb, var(--aj-surface-scrim) 118%, transparent);
    border-bottom-color: color-mix(in srgb, var(--aj-chrome-border) 108%, transparent);
}

html[data-theme="light"] .jfx-window .jfx-window__title {
    color: color-mix(in srgb, var(--aj-ink-soft) 88%, black 12%);
}

@media (max-width: 900px) {
    .jfx-window {
        top: 8px !important;
        left: 8px !important;
        width: calc(100vw - 16px) !important;
        height: calc(100dvh - 16px) !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
    }

    .jfx-window .jfx-window__surface {
        border-radius: calc(var(--aj-overlay-radius) - 4px);
    }

    .jfx-window .jfx-window__header {
        cursor: default;
    }

    .jfx-window.jfx-window--resizable .jfx-window__handle--nw,
    .jfx-window.jfx-window--resizable .jfx-window__handle--ne,
    .jfx-window.jfx-window--resizable .jfx-window__handle--se,
    .jfx-window.jfx-window--resizable .jfx-window__handle--sw,
    .jfx-window.jfx-window--resizable .jfx-window__handle--n,
    .jfx-window.jfx-window--resizable .jfx-window__handle--s,
    .jfx-window.jfx-window--resizable .jfx-window__handle--w,
    .jfx-window.jfx-window--resizable .jfx-window__handle--e {
        display: none;
    }
}

.jfx-viewport {

    position: relative;
    overflow: auto;
    height: 100%;

    .jfx2-overlay {
        position : fixed;
        background : var(--aj-overlay-bg);
        border : 1px solid var(--aj-overlay-border);
        box-shadow : var(--aj-overlay-shadow);
        border-radius : var(--aj-overlay-radius);
        backdrop-filter : blur(var(--aj-overlay-blur)) saturate(180%);
    }

    .jfx2-notification-host {
        position: fixed;
        top: 64px;
        right: 12px;
        z-index: 100000;

        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;

        pointer-events: none;
    }

    .jfx2-notification {
        pointer-events: auto;

        min-width: 240px;
        max-width: 420px;
        padding: 10px 12px;

        background: var(--aj-overlay-bg);
        backdrop-filter: blur(var(--aj-overlay-blur)) saturate(180%);
        backdrop-filter: blur(var(--aj-overlay-blur)) saturate(180%);

        -webkit-backdrop-filter: blur(var(--aj-overlay-blur)) saturate(180%);
        border: 1px solid var(--aj-overlay-border);
        box-shadow: var(--aj-overlay-shadow);
        border-radius: var(--aj-floating-radius);

        color: var(--aj-ink);
        line-height: 1.3;

        transition:
                opacity 0.25s ease,
                transform 0.25s ease;

        opacity: 1;
        transform: translateY(0);
    }

    .jfx2-notification.is-hidden {
        opacity: 0;
        transform: translateY(-6px);
    }

    .jfx2-notification.kind-info {
        border-left: 4px solid var(--aj-info);
    }

    .jfx2-notification.kind-success {
        border-left: 4px solid var(--aj-accent);
    }

    .jfx2-notification.kind-warning {
        border-left: 4px solid var(--aj-warning);
    }

    .jfx2-notification.kind-error {
        border-left: 4px solid var(--aj-danger);
    }


}

.jfx-viewport-overlay {
    position: fixed;
    box-sizing: border-box;
    pointer-events: auto;
}

.jfx-viewport-notification {
    position: fixed;
    top: 64px;
    right: 12px;
    z-index: 100000;
    min-width: 240px;
    max-width: 420px;
    padding: 10px 12px;
    color: var(--aj-ink);
    background: var(--aj-overlay-bg);
    border: 1px solid var(--aj-overlay-border);
    border-radius: var(--aj-floating-radius);
    box-shadow: var(--aj-overlay-shadow);
    backdrop-filter: blur(var(--aj-overlay-blur)) saturate(180%);
    backdrop-filter: blur(var(--aj-overlay-blur)) saturate(180%);

    -webkit-backdrop-filter: blur(var(--aj-overlay-blur)) saturate(180%);
    line-height: 1.3;
    transition:
            opacity 0.25s ease,
            transform 0.25s ease;
    opacity: 1;
    transform: translateY(0);
}

.jfx-viewport-notification.is-hidden {
    opacity: 0;
    transform: translateY(-6px);
}

.jfx-viewport-notification--info {
    border-left: 4px solid var(--aj-info);
}

.jfx-viewport-notification--success {
    border-left: 4px solid var(--aj-accent);
}

.jfx-viewport-notification--warning {
    border-left: 4px solid var(--aj-warning);
}

.jfx-viewport-notification--error {
    border-left: 4px solid var(--aj-danger);
}/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-border-style: solid;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-leading: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: "Aptos", "Segoe UI", sans-serif;
    --font-serif: "Crimson Pro", Georgia, serif;
    --font-mono: "JetBrains Mono", "Fira Code", monospace;
    --spacing: .25rem;
    --container-7xl: 80rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --tracking-tight: -.025em;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-canvas: var(--aj-canvas);
    --color-surface: var(--aj-surface);
    --color-surface-raised: var(--aj-surface-raised);
    --color-surface-muted: var(--aj-surface-muted);
    --color-surface-overlay: var(--aj-surface-overlay);
    --color-ink: var(--aj-ink);
    --color-ink-soft: var(--aj-ink-soft);
    --color-ink-muted: var(--aj-ink-muted);
    --color-ink-faint: var(--aj-ink-faint);
    --color-ink-inverse: var(--aj-ink-inverse);
    --color-line: var(--aj-line);
    --color-line-soft: var(--aj-line-soft);
    --color-accent: var(--aj-accent);
    --color-accent-strong: var(--aj-accent-strong);
    --radius-control: var(--aj-radius-control);
    --radius-panel: var(--aj-radius-panel);
    --spacing-field: var(--aj-spacing-field);
    --spacing-section: var(--aj-spacing-section);
    --spacing-shell: var(--aj-spacing-shell);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }

  html {
    background: var(--aj-canvas);
    color: var(--aj-ink);
    font-family: var(--font-sans);
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    min-height: 100vh;
    margin: 0;
  }

  *, :before, :after {
    box-sizing: border-box;
  }

  ::selection {
    background: var(--aj-accent-muted);
    color: var(--aj-ink);
  }

  :focus-visible {
    box-shadow: var(--aj-shadow-focus);
    outline: none;
  }
}

@layer components {
  .aj-app {
    background-color: var(--color-canvas);
    min-height: 100vh;
    color: var(--color-ink);
  }

  .aj-shell {
    width: 100%;
    max-width: var(--container-7xl);
    gap: var(--spacing-shell);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 8);
    flex-direction: column;
    margin-inline: auto;
    display: flex;
  }

  .aj-stack {
    gap: var(--spacing-section);
    flex-direction: column;
    display: flex;
  }

  .aj-row {
    min-width: calc(var(--spacing) * 0);
    align-items: center;
    gap: var(--spacing-field);
    display: flex;
  }

  .aj-cluster {
    align-items: center;
    gap: var(--spacing-field);
    flex-wrap: wrap;
    display: flex;
  }

  .aj-panel {
    border-radius: var(--radius-panel);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-line);
    background-color: var(--color-surface);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: var(--aj-shadow-panel);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .aj-card {
    border-radius: var(--radius-panel);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-line);
    background-color: var(--color-surface);
    padding: calc(var(--spacing) * 5);
    --tw-shadow: var(--aj-shadow-panel);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .aj-card-quiet {
    border-radius: var(--radius-panel);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-line-soft);
    background-color: var(--color-surface-muted);
    padding: calc(var(--spacing) * 5);
  }

  .aj-card-glass {
    background: var(--aj-glass-bg-soft);
    border: 1px solid var(--aj-glass-border);
    border-radius: var(--aj-radius-panel);
    box-shadow: 0 10px 28px var(--aj-glass-shadow);
    backdrop-filter: blur(calc(var(--aj-glass-blur) - 2px)) saturate(180%);
    -webkit-backdrop-filter: blur(calc(var(--aj-glass-blur) - 2px)) saturate(180%);
    margin: 10px 12px;
    padding: 14px;
  }

  .aj-glass {
    background: var(--aj-glass-bg-medium);
    border: 1px solid var(--aj-glass-border);
    box-shadow: 0 10px 32px var(--aj-glass-shadow);
    backdrop-filter: blur(var(--aj-glass-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--aj-glass-blur)) saturate(180%);
  }

  .aj-glass-soft {
    background: var(--aj-glass-bg-soft);
    border: 1px solid var(--aj-glass-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .aj-glass-soft {
      border: 1px solid color-mix(in srgb, var(--aj-glass-border) 72%, transparent);
    }
  }

  .aj-glass-soft {
    box-shadow: 0 8px 22px var(--aj-glass-shadow);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .aj-glass-soft {
      box-shadow: 0 8px 22px color-mix(in srgb, var(--aj-glass-shadow) 72%, transparent);
    }
  }

  .aj-glass-soft {
    backdrop-filter: blur(calc(var(--aj-glass-blur) - 6px)) saturate(180%);
    -webkit-backdrop-filter: blur(calc(var(--aj-glass-blur) - 6px)) saturate(180%);
  }

  .aj-glass-dense {
    background: var(--aj-glass-bg-dense);
    border: 1px solid var(--aj-glass-border);
    box-shadow: 0 16px 40px var(--aj-glass-shadow);
    backdrop-filter: blur(calc(var(--aj-glass-blur) + 2px)) saturate(180%);
    -webkit-backdrop-filter: blur(calc(var(--aj-glass-blur) + 2px)) saturate(180%);
  }

  .aj-panel-muted {
    border-radius: var(--radius-panel);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-line-soft);
    background-color: var(--color-surface-muted);
    padding: calc(var(--spacing) * 6);
  }

  .aj-surface {
    border-radius: var(--radius-panel);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-line);
    background-color: var(--color-surface);
  }

  .aj-label {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: .16em;
    letter-spacing: .16em;
    color: var(--color-ink-muted);
    text-transform: uppercase;
  }

  .aj-heading {
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-ink);
  }

  .aj-title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-ink);
  }

  .aj-copy {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
    color: var(--color-ink-soft);
  }

  .aj-muted {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-ink-muted);
  }

  .aj-button {
    min-height: calc(var(--spacing) * 10);
    border-radius: var(--radius-control);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  .aj-button-primary {
    background-color: var(--color-accent);
    color: var(--color-ink-inverse);
  }

  @media (hover: hover) {
    .aj-button-primary:hover {
      background-color: var(--color-accent-strong);
    }
  }

  .aj-button-quiet {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-line);
    background-color: var(--color-surface);
    color: var(--color-ink);
  }

  @media (hover: hover) {
    .aj-button-quiet:hover {
      background-color: var(--color-surface-muted);
    }
  }

  .aj-button-ghost {
    color: var(--color-ink-soft);
  }

  @media (hover: hover) {
    .aj-button-ghost:hover {
      background-color: var(--color-surface-muted);
      color: var(--color-ink);
    }
  }

  .aj-input {
    min-height: calc(var(--spacing) * 10);
    border-radius: var(--radius-control);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-line);
    background-color: var(--color-surface);
    width: 100%;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-ink);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .aj-input::placeholder {
    color: var(--color-ink-faint);
  }

  .aj-input:focus {
    border-color: var(--color-accent);
  }

  .aj-divider {
    border-style: var(--tw-border-style);
    border-width: 0;
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-line-soft);
  }

  .aj-badge {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-line);
    background-color: var(--color-surface-muted);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-ink-soft);
    border-radius: 3.40282e38px;
    align-items: center;
    display: inline-flex;
  }

  .aj-chip {
    min-height: calc(var(--spacing) * 8);
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-line);
    background-color: var(--color-surface-muted);
    padding-inline: calc(var(--spacing) * 3);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink-soft);
    border-radius: 3.40282e38px;
    display: inline-flex;
  }

  .aj-link {
    color: var(--color-accent-strong);
    text-underline-offset: 4px;
  }

  @media (hover: hover) {
    .aj-link:hover {
      text-decoration-line: underline;
    }
  }

  .aj-toolbar {
    min-width: calc(var(--spacing) * 0);
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    background: var(--aj-floating-bg);
    border: 1px solid var(--aj-floating-border);
    border-radius: var(--aj-radius-panel);
    box-shadow: var(--aj-shadow-panel);
    display: flex;
  }

  .aj-floating {
    background: var(--aj-floating-bg);
    border: 1px solid var(--aj-floating-border);
    border-radius: var(--aj-floating-radius);
    box-shadow: var(--aj-floating-shadow);
  }

  .aj-menu {
    min-width: calc(var(--spacing) * 44);
    padding: calc(var(--spacing) * 1);
    background: var(--aj-floating-bg);
    border: 1px solid var(--aj-floating-border);
    border-radius: var(--aj-floating-radius);
    box-shadow: var(--aj-floating-shadow);
  }

  .aj-menu-item {
    min-height: calc(var(--spacing) * 8);
    cursor: pointer;
    padding-inline: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--aj-control-ink);
    border-radius: calc(var(--aj-radius-control) - 4px);
    align-items: center;
    display: flex;
  }

  .aj-menu-item:hover {
    background: var(--aj-control-bg-hover);
    color: var(--aj-control-ink-hover);
  }

  .aj-tabs {
    min-width: calc(var(--spacing) * 0);
    align-items: center;
    gap: calc(var(--spacing) * 1);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-line-soft);
    background-color: var(--color-surface-muted);
    padding-inline: calc(var(--spacing) * 2);
    padding-top: calc(var(--spacing) * 2);
    display: flex;
  }

  .aj-tab {
    min-height: calc(var(--spacing) * 9);
    border-style: var(--tw-border-style);
    padding-inline: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink-muted);
    border-width: 1px;
    border-color: #0000;
  }

  @media (hover: hover) {
    .aj-tab:hover {
      background-color: var(--color-surface-raised);
      color: var(--color-ink);
    }
  }

  .aj-tab {
    border-radius: var(--aj-radius-control) var(--aj-radius-control) 0 0;
  }

  .aj-tab-active {
    border-color: var(--color-line);
    background-color: var(--color-surface);
    color: var(--color-ink);
  }

  .aj-chrome-top {
    background: var(--aj-gradient-chrome-top);
    border-bottom: 1px solid var(--aj-line-strong);
    box-shadow: inset 0 -1px 0 var(--aj-line-soft);
  }

  .aj-chrome-bottom {
    background: var(--aj-gradient-chrome-bottom);
    border-top: 1px solid var(--aj-line-strong);
    box-shadow: inset 0 1px 0 var(--aj-line-soft);
  }

  .aj-icon-tile {
    border-radius: var(--radius-control);
    background-color: var(--color-surface-muted);
    color: var(--color-ink-soft);
    box-shadow: inset 0 1px 0 var(--aj-line-soft);
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  .aj-empty {
    min-height: calc(var(--spacing) * 32);
    border-radius: var(--radius-panel);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-line-soft);
    background-color: var(--color-surface-muted);
    padding: calc(var(--spacing) * 6);
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-ink-muted);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .aj-table-shell {
    border-radius: var(--radius-panel);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-line);
    background-color: var(--color-surface);
    --tw-shadow: var(--aj-shadow-panel);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    overflow: hidden;
  }

  .aj-editor-surface {
    border-radius: var(--radius-panel);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-line);
    background-color: var(--color-surface);
    color: var(--color-ink);
  }

  .aj-page {
    width: 100%;
    min-height: 100%;
    color: var(--color-ink);
    overflow: hidden visible;
  }

  .aj-page-layout {
    box-sizing: border-box;
    gap: calc(var(--spacing) * 6);
    padding-inline: calc(var(--spacing) * 10);
    padding-block: calc(var(--spacing) * 8);
    flex-direction: column;
    display: flex;
  }

  .aj-page-shell {
    z-index: 10;
    box-sizing: border-box;
    position: relative;
  }

  .aj-page-hero {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-line-soft);
    background-color: var(--color-surface-overlay);
    --tw-shadow: var(--aj-shadow-panel);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    border-radius: 28px;
    position: relative;
    overflow: hidden;
  }

  .aj-page-panel {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-line-soft);
    background-color: var(--color-surface-overlay);
    --tw-shadow: var(--aj-shadow-panel);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    border-radius: 24px;
  }

  .aj-page-panel-shell {
    z-index: 10;
    box-sizing: border-box;
    padding: calc(var(--spacing) * 6);
    position: relative;
  }

  .aj-kicker {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: .22em;
    letter-spacing: .22em;
    color: var(--color-ink-muted);
    text-transform: uppercase;
  }

  .aj-page-title {
    color: var(--color-ink);
  }

  .aj-page-copy {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
    color: var(--color-ink-soft);
  }

  .aj-icon-badge {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-line-soft);
    background-color: var(--color-surface-muted);
    color: var(--color-ink-soft);
    box-shadow: inset 0 1px 0 var(--aj-line-soft);
    border-radius: 3.40282e38px;
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  .aj-action-pill {
    min-height: calc(var(--spacing) * 11);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-line-soft);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: .08em;
    letter-spacing: .08em;
    color: var(--color-ink-soft);
    text-transform: uppercase;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background: var(--aj-surface-overlay);
    border-radius: 3.40282e38px;
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .aj-action-pill {
      background: color-mix(in srgb, var(--aj-surface-overlay) 82%, transparent);
    }
  }

  .aj-action-pill {
    box-shadow: inset 0 1px 0 #ffffff0f, 0 10px 28px var(--aj-shadow-medium);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .aj-action-pill {
      box-shadow: inset 0 1px 0 #ffffff0f, 0 10px 28px color-mix(in srgb, var(--aj-shadow-medium) 12%, transparent);
    }
  }

  .aj-action-pill {
    backdrop-filter: blur(8px) saturate(180%);
    -webkit-backdrop-filter: blur(8px) saturate(180%);
  }

  .aj-action-pill:hover {
    background: var(--aj-surface-hover);
    border-color: var(--aj-line-strong);
  }

  .aj-action-pill-primary {
    border-color: var(--aj-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .aj-action-pill-primary {
      border-color: color-mix(in srgb, var(--aj-accent) 24%, white 10%);
    }
  }

  .aj-action-pill-primary {
    background: var(--aj-accent-muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .aj-action-pill-primary {
      background: color-mix(in srgb, var(--aj-accent-muted) 72%, transparent);
    }
  }

  .aj-action-pill-ghost {
    opacity: .88;
  }

  .aj-quick-row {
    align-items: center;
    gap: calc(var(--spacing) * 4);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-line-soft);
    background-color: var(--color-surface-muted);
    width: 100%;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    border-radius: 18px;
    display: flex;
    box-shadow: inset 0 1px #ffffff0a;
  }

  .aj-quick-row:hover {
    border-color: var(--aj-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .aj-quick-row:hover {
      border-color: color-mix(in srgb, var(--aj-accent) 22%, white 8%);
    }
  }

  .aj-quick-row:hover {
    background: var(--aj-accent-muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .aj-quick-row:hover {
      background: color-mix(in srgb, var(--aj-accent-muted) 48%, transparent);
    }
  }

  .aj-quick-icon {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-line-soft);
    color: var(--color-ink-soft);
    box-shadow: inset 0 1px 0 var(--aj-line-soft);
    border-radius: 3.40282e38px;
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  .aj-quick-copy {
    min-width: calc(var(--spacing) * 0);
    gap: calc(var(--spacing) * 1);
    flex-direction: column;
    display: flex;
  }

  .aj-quick-title {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-ink);
  }

  .aj-quick-text {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    color: var(--color-ink-soft);
  }

  @media (max-width: 767px) {
    .aj-glass, .aj-card-glass, .aj-glass-soft, .aj-glass-dense {
      background: var(--aj-glass-bg-mobile);
      border-color: var(--aj-glass-border-mobile);
      box-shadow: 0 18px 40px var(--aj-glass-shadow-mobile), inset 0 1px 0 #ffffff14;
      backdrop-filter: blur(calc(var(--aj-glass-blur) + 2px)) saturate(180%);
      -webkit-backdrop-filter: blur(calc(var(--aj-glass-blur) + 2px)) saturate(180%);
    }

    .aj-page-layout {
      gap: calc(var(--spacing) * 4);
      padding-inline: calc(var(--spacing) * 4);
      padding-block: calc(var(--spacing) * 4);
    }

    .aj-page-hero, .aj-page-panel {
      border-radius: 20px;
    }

    .aj-page-panel-shell {
      padding: calc(var(--spacing) * 4);
    }
  }
}

@layer utilities {
  .aj-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--aj-scrollbar-thumb) transparent;
  }

  .aj-focus {
    box-shadow: var(--aj-shadow-focus);
    outline: none;
  }

  .aj-blur-glass {
    backdrop-filter: blur(var(--aj-glass-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--aj-glass-blur)) saturate(180%);
  }

  .aj-blur-soft {
    backdrop-filter: blur(calc(var(--aj-glass-blur) - 6px)) saturate(180%);
    -webkit-backdrop-filter: blur(calc(var(--aj-glass-blur) - 6px)) saturate(180%);
  }

  .aj-blur-strong {
    backdrop-filter: blur(calc(var(--aj-glass-blur) + 6px)) saturate(180%);
    -webkit-backdrop-filter: blur(calc(var(--aj-glass-blur) + 6px)) saturate(180%);
  }

  .aj-scrim {
    background: var(--aj-surface-backdrop);
  }

  .aj-ring-accent {
    box-shadow: inset 0 0 0 1px var(--aj-accent-ring);
  }

  .aj-line-top {
    border-top: 1px solid var(--aj-line-soft);
  }

  .aj-line-bottom {
    border-bottom: 1px solid var(--aj-line-soft);
  }

  .aj-line-left {
    border-left: 1px solid var(--aj-line-soft);
  }

  .aj-line-right {
    border-right: 1px solid var(--aj-line-soft);
  }
}

:root, html[data-theme="light"] {
  color-scheme: light;
  --aj-canvas: #f7f0e8;
  --aj-canvas-raised: #fbf6f0;
  --aj-surface: #fbf6f0;
  --aj-surface-raised: #f8f1e8b8;
  --aj-surface-muted: #4a361f0f;
  --aj-surface-overlay: #f9f4eee0;
  --aj-surface-hover: #4a361f1a;
  --aj-surface-scrim: #58402224;
  --aj-surface-backdrop: #22180b42;
  --aj-scrollbar-thumb: #7e5e3957;
  --aj-ink: #2f271f;
  --aj-ink-soft: #5d5046;
  --aj-ink-muted: #8e7d6f;
  --aj-ink-faint: #2f271f94;
  --aj-ink-inverse: #fff;
  --aj-line: #4a361f1f;
  --aj-line-strong: #4a361f2e;
  --aj-line-soft: #4a361f12;
  --aj-accent: #87c440;
  --aj-accent-strong: #6ea72f;
  --aj-accent-soft: #d6fcb0;
  --aj-accent-muted: #87c4401f;
  --aj-accent-shimmer: #87c44038;
  --aj-accent-ring: #87c44024;
  --aj-success: #5f9f32;
  --aj-warning: #f57c00;
  --aj-danger: #d32f2f;
  --aj-info: #0288d1;
  --aj-radius-control: 10px;
  --aj-radius-panel: 18px;
  --aj-radius-shell: 28px;
  --aj-shadow-panel: 0 10px 32px #22180b24;
  --aj-shadow-medium: #22180b24;
  --aj-shadow-strong: #22180b2e;
  --aj-shadow-float: 0 18px 48px #22180b38;
  --aj-shadow-focus: 0 0 0 3px #87c4402e;
  --aj-glass-bg: var(--aj-surface-raised);
  --aj-glass-bg-soft: #f8f1e87a;
  --aj-glass-bg-medium: #f8f1e89e;
  --aj-glass-bg-dense: #f8f1e8d1;
  --aj-glass-bg-mobile: linear-gradient(180deg, #fbf6f0eb, #ede4d8d6);
  --aj-glass-border: var(--aj-line-strong);
  --aj-glass-border-mobile: #7e5e393d;
  --aj-glass-shadow: var(--aj-shadow-medium);
  --aj-glass-shadow-mobile: #22180b33;
  --aj-glass-blur: 14px;
  --aj-floating-bg: var(--aj-surface-overlay);
  --aj-floating-border: var(--aj-line);
  --aj-floating-radius: var(--aj-radius-control);
  --aj-floating-shadow: var(--aj-shadow-float);
  --aj-floating-blur: var(--aj-glass-blur);
  --aj-overlay-bg: var(--aj-glass-bg);
  --aj-overlay-border: var(--aj-glass-border);
  --aj-overlay-radius: var(--aj-radius-panel);
  --aj-overlay-shadow: 0 6px 24px var(--aj-glass-shadow);
  --aj-overlay-blur: var(--aj-glass-blur);
  --aj-chrome-bg: var(--aj-surface-scrim);
  --aj-chrome-border: var(--aj-glass-border);
  --aj-control-bg: transparent;
  --aj-control-bg-hover: var(--aj-accent-muted);
  --aj-control-border: transparent;
  --aj-control-border-hover: var(--aj-line);
  --aj-control-radius: var(--aj-radius-control);
  --aj-control-ink: var(--aj-ink-soft);
  --aj-control-ink-hover: var(--aj-ink);
  --aj-control-ink-active: var(--aj-accent-strong);
  --aj-control-bg-active: var(--aj-accent-muted);
  --aj-control-border-active: var(--aj-accent);
  --aj-gradient-canvas: linear-gradient(180deg, #f7f0e8 0%, #eee4d7 100%);
  --aj-gradient-canvas-mobile: linear-gradient(180deg, #f5eee6 0%, #eadfd2 100%);
  --aj-gradient-surface-soft: linear-gradient(180deg, #faf5ef94, #ede4d86b);
  --aj-gradient-surface-strong: linear-gradient(180deg, #faf6f1ad, #ede3d680);
  --aj-gradient-chrome-top: linear-gradient(180deg, #faf6f18f, #efe6da61);
  --aj-gradient-chrome-bottom: linear-gradient(180deg, #eee4d76b, #f9f4ee94);
  --aj-spacing-field: .75rem;
  --aj-spacing-section: 1.5rem;
  --aj-spacing-shell: 2rem;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --aj-canvas: #1b1e20;
  --aj-canvas-raised: #22262a;
  --aj-surface: #22262a;
  --aj-surface-raised: #121212b8;
  --aj-surface-muted: #ffffff0f;
  --aj-surface-overlay: #101216e6;
  --aj-surface-hover: #ffffff14;
  --aj-surface-scrim: #00000038;
  --aj-surface-backdrop: #00000052;
  --aj-scrollbar-thumb: #a4ff4f42;
  --aj-ink: #f5f5f5;
  --aj-ink-soft: #c9d1e9;
  --aj-ink-muted: #8f98a8;
  --aj-ink-faint: #c9d1e9ad;
  --aj-ink-inverse: #111315;
  --aj-line: #ffffff1a;
  --aj-line-strong: #ffffff29;
  --aj-line-soft: #ffffff0f;
  --aj-accent: #a4ff4f;
  --aj-accent-strong: #89cc40;
  --aj-accent-soft: #c9ff91;
  --aj-accent-muted: #a4ff4f1f;
  --aj-accent-shimmer: #a4ff4f2e;
  --aj-accent-ring: #a4ff4f1f;
  --aj-success: #9be36a;
  --aj-warning: #ffb74d;
  --aj-danger: #ef5350;
  --aj-info: #7ec9f5;
  --aj-radius-control: 10px;
  --aj-radius-panel: 18px;
  --aj-radius-shell: 28px;
  --aj-shadow-panel: 0 10px 32px #0000005c;
  --aj-shadow-medium: #0000005c;
  --aj-shadow-strong: #00000075;
  --aj-shadow-float: 0 18px 48px #0000007a;
  --aj-shadow-focus: 0 0 0 3px #a4ff4f29;
  --aj-glass-bg: var(--aj-surface-raised);
  --aj-glass-bg-soft: #1212127a;
  --aj-glass-bg-medium: #1212129e;
  --aj-glass-bg-dense: #121212d6;
  --aj-glass-bg-mobile: linear-gradient(180deg, #1a1c20f0, #0e1014e0);
  --aj-glass-border: var(--aj-line-strong);
  --aj-glass-border-mobile: #ffffff29;
  --aj-glass-shadow: var(--aj-shadow-strong);
  --aj-glass-shadow-mobile: #00000085;
  --aj-glass-blur: 18px;
  --aj-floating-bg: var(--aj-surface-overlay);
  --aj-floating-border: var(--aj-line);
  --aj-floating-radius: var(--aj-radius-control);
  --aj-floating-shadow: var(--aj-shadow-float);
  --aj-floating-blur: var(--aj-glass-blur);
  --aj-overlay-bg: var(--aj-glass-bg);
  --aj-overlay-border: var(--aj-glass-border);
  --aj-overlay-radius: var(--aj-radius-panel);
  --aj-overlay-shadow: 0 6px 24px var(--aj-glass-shadow);
  --aj-overlay-blur: var(--aj-glass-blur);
  --aj-chrome-bg: var(--aj-surface-scrim);
  --aj-chrome-border: var(--aj-glass-border);
  --aj-control-bg: transparent;
  --aj-control-bg-hover: var(--aj-accent-muted);
  --aj-control-border: transparent;
  --aj-control-border-hover: var(--aj-line);
  --aj-control-radius: var(--aj-radius-control);
  --aj-control-ink: var(--aj-ink-soft);
  --aj-control-ink-hover: var(--aj-ink);
  --aj-control-ink-active: var(--aj-accent-strong);
  --aj-control-bg-active: var(--aj-accent-muted);
  --aj-control-border-active: var(--aj-accent);
  --aj-gradient-canvas: linear-gradient(180deg, #1b1e20 0%, #111315 100%);
  --aj-gradient-canvas-mobile: linear-gradient(180deg, #1a1c20 0%, #0f1115 100%);
  --aj-gradient-surface-soft: linear-gradient(180deg, #10101ac2, #12121e9e);
  --aj-gradient-surface-strong: linear-gradient(180deg, #0e131fbd, #0a0d1694);
  --aj-gradient-chrome-top: linear-gradient(180deg, #0a0a0a6b, #0a0a0a2e);
  --aj-gradient-chrome-bottom: linear-gradient(180deg, #0a0a0a2e, #0a0a0a70);
  --aj-spacing-field: .75rem;
  --aj-spacing-section: 1.5rem;
  --aj-spacing-shell: 2rem;
}

button {
  cursor: pointer;
  background-color: inherit;
  color: var(--aj-ink);
  border: 1px solid #0000;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  transition: background-color .18s, border-color .18s, transform .18s, color .18s;
}

button.active {
  color: var(--aj-accent);
}

button[disabled] {
  color: var(--aj-surface-muted);
  opacity: .65;
}

button.container {
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
  display: flex;
}

button.hover:not([disabled]):hover {
  background-color: var(--aj-accent);
  color: var(--aj-canvas);
}

button.btn-secondary {
  background-color: var(--aj-surface-hover);
  border: 1px solid var(--aj-control-border-hover);
  width: 200px;
}

button.btn-danger {
  background-color: var(--aj-danger);
  border: 1px solid #0000;
  width: 200px;
}

button:not([disabled]):hover {
  transform: translateY(-1px);
}

a {
  cursor: pointer;
  color: var(--aj-ink);
  text-decoration: none;
}

a:hover {
  color: var(--aj-accent);
}

a:visited {
  color: var(--aj-ink);
}

a:active {
  color: var(--aj-accent);
}

.jfx-table-view {
  box-sizing: border-box;
  min-width: 0;
  height: 400px;
  min-height: 0;
  box-shadow: none;
  color: var(--aj-ink);
  isolation: isolate;
  background: none;
  border: none;
  border-radius: 0;
  flex-direction: column;
  display: flex;
  position: relative;
  overflow: hidden;
}

.jfx-table-header-viewport {
  border-bottom: 1px solid var(--aj-line);
  background: none;
  flex: none;
  position: relative;
  overflow: hidden;
}

.jfx-table-header-content {
  min-height: 100%;
  display: flex;
  position: relative;
  top: 0;
  left: 0;
}

.jfx-table-body-wrapper {
  background: none;
  flex: auto;
  min-width: 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.jfx-table-viewport {
  scrollbar-gutter: stable both-edges;
  background: none;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  position: relative;
  overflow: auto;
}

.jfx-table-content {
  background: none;
  min-height: 100%;
  position: relative;
}

.jfx-table-placeholder {
  box-sizing: border-box;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  justify-content: center;
  align-items: center;
  padding: 16px;
  display: none;
  position: absolute;
  inset: 0;
}

.jfx-table-default-placeholder {
  color: var(--aj-ink-soft);
  text-align: center;
  max-width: 24rem;
  font-size: 14px;
  line-height: 1.5;
}

.jfx-table-view.jfx-table-view-loading .jfx-table-default-placeholder {
  color: var(--aj-accent-strong);
}

.jfx-table-view.jfx-table-view-error .jfx-table-default-placeholder {
  color: var(--aj-danger);
}

.jfx-table-header-cell {
  box-sizing: border-box;
  white-space: nowrap;
  text-overflow: ellipsis;
  letter-spacing: 0;
  text-transform: none;
  color: var(--aj-ink-soft);
  cursor: default;
  border-right: none;
  align-items: center;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 500;
  transition: color .16s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.jfx-table-header-cell.jfx-table-header-cell-last {
  border-right: none;
}

.jfx-table-header-cell.jfx-table-header-cell-sortable {
  cursor: pointer;
}

.jfx-table-header-cell.jfx-table-header-cell-sortable:hover {
  color: var(--aj-ink);
}

.jfx-table-header-cell.jfx-table-header-cell-sorted {
  color: var(--aj-accent-strong);
}

.jfx-table-header-cell.jfx-table-header-cell-sorted:before {
  content: "";
  background: currentColor;
  border-radius: 999px;
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
}

.jfx-table-header-cell.jfx-table-header-cell-sorted-asc:after, .jfx-table-header-cell.jfx-table-header-cell-sorted-desc:after {
  margin-left: 6px;
  font-size: 11px;
  line-height: 1;
}

.jfx-table-header-cell.jfx-table-header-cell-sorted-asc:after {
  content: "↑";
}

.jfx-table-header-cell.jfx-table-header-cell-sorted-desc:after {
  content: "↓";
}

.jfx-table-row {
  color: var(--aj-ink);
  background-color: #0000;
  transition: background-color .16s, color .16s;
}

.jfx-table-row.jfx-table-row-odd, .jfx-table-row.jfx-table-row-empty {
  background-color: #0000;
}

.jfx-table-row.jfx-table-row-placeholder {
  color: var(--aj-ink-soft);
}

.jfx-table-row:not(.jfx-table-row-empty):not(.jfx-table-row-placeholder):not(.jfx-table-row-selected):hover {
  background-color: var(--aj-surface-hover);
}

.jfx-table-row.jfx-table-row-selected {
  background-color: var(--aj-accent-muted);
  color: var(--aj-ink);
  box-shadow: inset 0 0 0 1px var(--aj-accent-ring);
}

.jfx-table-cell {
  box-sizing: border-box;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  color: inherit;
  border-right: none;
  border-bottom: 1px solid var(--aj-line);
  background-color: #0000;
  background-origin: content-box;
  align-items: center;
  padding: 0 16px;
  transition: color .16s, border-color .16s, opacity .16s;
  display: flex;
  overflow: hidden;
}

.jfx-table-cell.jfx-table-cell-last {
  border-right: none;
}

.jfx-table-cell.jfx-table-cell-empty {
  opacity: .92;
}

.jfx-table-cell.jfx-table-cell-selected {
  color: inherit;
}

.jfx-table-cell.jfx-table-cell-loading-placeholder {
  background-image: linear-gradient(90deg, transparent 0%, var(--aj-surface-muted) 18%, var(--aj-accent-shimmer) 50%, var(--aj-surface-muted) 82%, transparent 100%);
  background-position: 16px;
  background-repeat: no-repeat;
  background-size: 56% 10px;
  animation: 1.6s ease-in-out infinite jfx-table-cell-loading;
}

@keyframes jfx-table-cell-loading {
  0% {
    opacity: .72;
    background-position: 16px;
  }

  50% {
    opacity: 1;
    background-position: 24px;
  }

  100% {
    opacity: .72;
    background-position: 16px;
  }
}

.jfx-virtual-list {
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
}

.jfx-virtual-list-viewport {
  scrollbar-width: thin;
}

.jfx-virtual-list-content, .jfx-virtual-list-cell {
  box-sizing: border-box;
}

.jfx-virtual-list-cell-loading {
  color: var(--aj-ink-muted, currentColor);
}

input:-webkit-autofill {
  transition: background-color 5000s ease-in-out;
  -webkit-box-shadow: 0 0 0 1000px var(--aj-canvas) inset !important;
  -webkit-text-fill-color: var(--aj-ink) !important;
}

input:-webkit-autofill:hover {
  transition: background-color 5000s ease-in-out;
  -webkit-box-shadow: 0 0 0 1000px var(--aj-canvas) inset !important;
  -webkit-text-fill-color: var(--aj-ink) !important;
}

input:-webkit-autofill:focus {
  transition: background-color 5000s ease-in-out;
  -webkit-box-shadow: 0 0 0 1000px var(--aj-canvas) inset !important;
  -webkit-text-fill-color: var(--aj-ink) !important;
}

input:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out;
  -webkit-box-shadow: 0 0 0 1000px var(--aj-canvas) inset !important;
  -webkit-text-fill-color: var(--aj-ink) !important;
}

input {
  background-color: inherit;
  border: 0;
  outline: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 15px;
  box-shadow: none !important;
}

input:focus, input:focus-visible, input:active {
  box-shadow: none !important;
  outline: none !important;
}

input.focus, input.focus::placeholder {
  color: var(--aj-accent);
}

input.dirty, input.dirty::placeholder {
  color: var(--aj-warning);
}

input.invalid, input.invalid::placeholder {
  color: var(--aj-danger);
}

input::placeholder {
  color: var(--aj-ink);
  opacity: .64;
}

input[readonly]::placeholder, input[type="date"][readonly] {
  opacity: .5;
}

.jfx-combo-box {
  box-sizing: border-box;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
  min-width: 0;
  min-height: 28px;
  color: var(--aj-ink);
  outline: none;
  align-items: center;
  gap: 8px;
  display: flex;
}

.jfx-combo-box__value {
  flex: auto;
  align-items: center;
  min-width: 0;
  display: flex;
}

.jfx-combo-box__value-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  min-width: 0;
  display: block;
  overflow: hidden;
}

.jfx-combo-box__value-text.is-placeholder {
  color: var(--aj-ink-muted);
}

.jfx-combo-box__indicator {
  color: var(--aj-ink-muted);
  flex: none;
  font-size: 20px;
  line-height: 1;
  transition: transform .16s, color .16s;
}

.jfx-combo-box-open .jfx-combo-box__indicator, .jfx-combo-box:focus-visible .jfx-combo-box__indicator {
  color: var(--aj-accent);
}

.jfx-combo-box-open .jfx-combo-box__indicator {
  transform: rotate(180deg);
}

.jfx-combo-box-open .jfx-combo-box__value-text:not(.is-placeholder), .jfx-combo-box:focus-visible .jfx-combo-box__value-text:not(.is-placeholder) {
  color: var(--aj-accent);
}

.jfx-combo-box__dropdown {
  box-sizing: border-box;
  border: 1px solid var(--aj-floating-border);
  border-radius: var(--aj-floating-radius);
  background: var(--aj-floating-bg);
  width: 100%;
  backdrop-filter: blur(var(--aj-floating-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--aj-floating-blur)) saturate(180%);
  box-shadow: var(--aj-floating-shadow);
  flex-direction: column;
  display: flex;
  overflow: hidden;
}

.jfx-combo-box__table {
  box-shadow: none;
  box-sizing: border-box;
  background: none;
  border: none;
  width: 100%;
}

.jfx-combo-box__footer {
  box-sizing: border-box;
  flex: none;
  width: 100%;
  min-width: 0;
}

.jfx-combo-box__table .jfx-table-body-wrapper, .jfx-combo-box__table .jfx-table-viewport, .jfx-combo-box__table .jfx-table-content {
  background: none;
}

.jfx-combo-box__table .jfx-table-cell {
  padding: 0 12px;
}

.jfx-combo-box__item {
  align-items: center;
  width: 100%;
  min-width: 0;
  display: flex;
}

.jfx-combo-box__item-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  min-width: 0;
  display: block;
  overflow: hidden;
}

.jfx-combo-box__footer-link {
  border-top: 1px solid var(--aj-floating-border);
  color: var(--aj-accent);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .16s, color .16s;
  display: flex;
}

.jfx-combo-box__footer-link:hover {
  background: var(--aj-accent-muted);
}

.jfx-combo-box__footer-link:after {
  content: "north_east";
  font-family: Material Icons, sans-serif;
  font-size: 18px;
  line-height: 1;
}

.editor {
  flex-direction: column;
  flex: auto;
  gap: 10px;
  min-width: 0;
  height: auto;
  min-height: 0;
  display: flex;
}

.jfx-editor-host {
  border: 1px solid var(--aj-line);
  border-radius: var(--aj-radius-panel, 16px);
  background: var(--aj-surface-overlay, var(--aj-surface));
  min-height: 220px;
  display: block;
  overflow: hidden;
}

.jfx-editor-fallback, .jfx-editor-readonly {
  min-height: 220px;
  color: var(--aj-ink);
  background: var(--aj-surface-overlay, var(--aj-surface));
  padding: 18px;
}

.jfx-editor-fallback {
  color: var(--aj-ink-muted);
  place-items: center;
  display: grid;
}

.jfx-editor-readonly {
  gap: 12px;
  display: grid;
}

.jfx-editor, .jfx-editor__shell {
  min-height: inherit;
  height: 100%;
}

.jfx-editor__shell {
  grid-template-rows: auto 1fr;
  display: grid;
}

.jfx-editor__toolbar {
  border-bottom: 1px solid var(--aj-line-soft);
  background: var(--aj-surface-muted);
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  padding: 10px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .jfx-editor__toolbar {
    background: color-mix(in srgb, var(--aj-surface-muted) 72%, transparent);
  }
}

.jfx-editor__toolbar-group {
  align-content: start;
  gap: 5px;
  display: grid;
}

.jfx-editor__toolbar-group-label {
  color: var(--aj-ink-faint);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding-left: 4px;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}

.jfx-editor__toolbar-buttons {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.jfx-editor__toolbar-button {
  border: 1px solid var(--aj-line);
  min-height: 34px;
  color: var(--aj-ink);
  background: var(--aj-surface-overlay);
  cursor: pointer;
  font: inherit;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  display: inline-flex;
}

.jfx-editor__toolbar-button:hover {
  border-color: var(--aj-accent);
  background: var(--aj-accent-muted);
}

.jfx-editor__toolbar-button.is-active, .jfx-editor__toolbar-button.active {
  border-color: var(--aj-accent);
  color: var(--aj-accent-strong);
  background: var(--aj-accent-muted);
}

@supports (color: color-mix(in lab, red, red)) {
  .jfx-editor__toolbar-button.is-active, .jfx-editor__toolbar-button.active {
    background: color-mix(in srgb, var(--aj-accent-muted) 86%, transparent);
  }
}

.jfx-editor__toolbar-button:disabled {
  cursor: not-allowed;
  opacity: .58;
}

.jfx-editor__toolbar-icon {
  font-size: 18px;
}

.jfx-editor__surface-wrap {
  min-height: 180px;
  position: relative;
}

.jfx-editor__surface {
  height: 100%;
  min-height: 180px;
  color: var(--aj-ink);
  outline: none;
  padding: 18px;
}

.jfx-editor__surface:focus {
  box-shadow: inset var(--aj-shadow-focus);
}

.jfx-editor__placeholder {
  pointer-events: none;
  color: var(--aj-ink-muted);
  position: absolute;
  top: 18px;
  left: 18px;
  right: 18px;
}

.jfx-editor-readonly .lexical-paragraph, .jfx-editor-readonly .lexical-heading, .jfx-editor-readonly .lexical-quote {
  margin: 0;
}

.jfx-editor-readonly .lexical-heading {
  letter-spacing: -.04em;
  font-size: 1.35rem;
  font-weight: 850;
}

.jfx-editor-readonly .lexical-quote {
  border-left: 3px solid var(--aj-accent);
  color: var(--aj-ink-soft);
  padding-left: 14px;
}

.jfx-editor-readonly__placeholder {
  color: var(--aj-ink-muted);
  margin: 0;
}

.jfx-editor-code {
  border: 1px solid var(--aj-line-soft);
  border-radius: var(--aj-radius-control, 12px);
  color: var(--aj-ink);
  background: var(--aj-surface-muted);
  margin: 0;
  padding: 14px;
  overflow: auto;
}

@supports (color: color-mix(in lab, red, red)) {
  .jfx-editor-code {
    background: color-mix(in srgb, var(--aj-surface-muted) 76%, transparent);
  }
}

.jfx-editor-code {
  font-family: Cascadia Code, JetBrains Mono, Fira Code, monospace;
  font-size: .9rem;
  line-height: 1.55;
}

.jfx-editor-code__content {
  white-space: pre;
}

.hljs-keyword {
  color: var(--aj-accent-strong);
  font-weight: 800;
}

.hljs-string {
  color: var(--aj-warning);
}

.hljs-number {
  color: var(--aj-info);
}

.hljs-comment {
  color: var(--aj-ink-muted);
  font-style: italic;
}

.hljs-tag, .hljs-name, .hljs-attr, .hljs-attribute {
  color: var(--aj-accent-strong);
}

.editor .lexical-ribbon-wrapper {
  box-sizing: border-box;
  background: var(--aj-surface);
  border-radius: 10px;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 10px 10px 8px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .editor .lexical-ribbon-wrapper {
    background: color-mix(in srgb, var(--aj-surface) 68%, transparent);
  }
}

.editor .lexical-ribbon-wrapper {
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--aj-ink);
}

.editor .lexical-ribbon-tabs {
  flex-wrap: wrap;
  gap: 4px;
  display: flex;
  background: none !important;
  padding: 0 !important;
}

.editor .lexical-ribbon-tab {
  cursor: pointer;
  letter-spacing: .08em;
  text-transform: uppercase;
  min-height: 28px;
  color: var(--aj-ink-faint);
  background: none;
  border: 1px solid #0000;
  border-radius: 8px;
  align-items: center;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 700;
  transition: color .15s, background-color .15s, border-color .15s;
  display: inline-flex;
}

.editor .lexical-ribbon-tab:hover {
  background: var(--aj-surface-muted);
}

@supports (color: color-mix(in lab, red, red)) {
  .editor .lexical-ribbon-tab:hover {
    background: color-mix(in srgb, var(--aj-surface-muted) 52%, transparent);
  }
}

.editor .lexical-ribbon-tab:hover {
  color: var(--aj-ink);
}

.editor .lexical-ribbon-tab.active {
  background: var(--aj-accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .editor .lexical-ribbon-tab.active {
    background: color-mix(in srgb, var(--aj-accent) 8%, transparent);
  }
}

.editor .lexical-ribbon-tab.active {
  border-color: var(--aj-line-strong);
}

@supports (color: color-mix(in lab, red, red)) {
  .editor .lexical-ribbon-tab.active {
    border-color: color-mix(in srgb, var(--aj-line-strong) 36%, transparent);
  }
}

.editor .lexical-ribbon-tab.active {
  color: var(--aj-ink);
}

.editor .lexical-ribbon-content {
  flex-flow: column wrap;
  gap: 8px;
  min-height: 0;
  display: flex;
}

.editor .lexical-ribbon-tab-content {
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  display: flex;
}

.editor .lexical-ribbon-tab-content:last-child {
  gap: 16px;
  width: 100%;
  padding-top: 2px;
}

.editor .lexical-ribbon-section {
  border-right: 1px solid var(--aj-line-strong);
  flex-direction: column;
  gap: 6px;
  padding: 0 12px 10px 0;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .editor .lexical-ribbon-section {
    border-right: 1px solid color-mix(in srgb, var(--aj-line-strong) 26%, transparent);
  }
}

.editor .lexical-ribbon-section {
  border-bottom: 1px solid var(--aj-line-strong);
}

@supports (color: color-mix(in lab, red, red)) {
  .editor .lexical-ribbon-section {
    border-bottom: 1px solid color-mix(in srgb, var(--aj-line-strong) 22%, transparent);
  }
}

.editor .lexical-ribbon-tab-content:last-child .lexical-ribbon-section {
  flex: 220px;
  gap: 8px;
  min-width: 220px;
  padding-bottom: 12px;
  padding-left: 4px;
  padding-right: 18px;
}

.editor .lexical-ribbon-tab-content:last-child .lexical-ribbon-section:last-child {
  min-width: 180px;
}

.editor .lexical-ribbon-section:last-child {
  border-bottom: none;
  border-right: none;
  padding-bottom: 0;
  padding-right: 0;
}

.editor .lexical-ribbon-buttons-container {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  display: flex;
}

.editor .lexical-ribbon-section-label {
  letter-spacing: .16em;
  color: var(--aj-ink-faint);
  text-transform: uppercase;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  border-top: 1px solid var(--aj-line-strong);
  padding-top: 10px;
  font-size: 9px;
  line-height: 1.15;
}

@supports (color: color-mix(in lab, red, red)) {
  .editor .lexical-ribbon-section-label {
    border-top: 1px solid color-mix(in srgb, var(--aj-line-strong) 22%, transparent);
  }
}

.editor .lexical-ribbon-button {
  min-height: 30px;
  color: var(--aj-ink);
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
  background: none;
  border: 1px solid #0000;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  line-height: 1;
  transition: background-color .14s, border-color .14s, color .14s;
  display: inline-flex;
}

.editor .lexical-ribbon-button:hover {
  background: var(--aj-accent-muted);
}

@supports (color: color-mix(in lab, red, red)) {
  .editor .lexical-ribbon-button:hover {
    background: color-mix(in srgb, var(--aj-accent-muted) 72%, transparent);
  }
}

.editor .lexical-ribbon-button:hover {
  border-color: var(--aj-line-strong);
}

@supports (color: color-mix(in lab, red, red)) {
  .editor .lexical-ribbon-button:hover {
    border-color: color-mix(in srgb, var(--aj-line-strong) 28%, transparent);
  }
}

.editor .lexical-ribbon-button.active {
  background: var(--aj-accent-muted);
}

@supports (color: color-mix(in lab, red, red)) {
  .editor .lexical-ribbon-button.active {
    background: color-mix(in srgb, var(--aj-accent-muted) 70%, transparent);
  }
}

.editor .lexical-ribbon-button.active {
  border-color: var(--aj-line-strong);
}

@supports (color: color-mix(in lab, red, red)) {
  .editor .lexical-ribbon-button.active {
    border-color: color-mix(in srgb, var(--aj-line-strong) 34%, transparent);
  }
}

.editor .lexical-ribbon-button.active {
  color: var(--aj-accent);
}

.editor .lexical-dropdown-wrapper {
  align-items: stretch;
  display: inline-flex;
  position: relative;
}

.editor .lexical-ribbon-tab-content:last-child .lexical-ribbon-button {
  padding-left: 12px;
  padding-right: 12px;
}

.editor .lexical-dropdown-menu {
  z-index: 3000;
  border: 1px solid var(--aj-line-strong);
  min-width: 180px;
  padding: 6px;
  position: fixed;
}

@supports (color: color-mix(in lab, red, red)) {
  .editor .lexical-dropdown-menu {
    border: 1px solid color-mix(in srgb, var(--aj-line-strong) 26%, transparent);
  }
}

.editor .lexical-dropdown-menu {
  background: var(--aj-surface-overlay);
  box-shadow: 0 8px 18px var(--aj-shadow-strong);
  border-radius: 10px;
}

@supports (color: color-mix(in lab, red, red)) {
  .editor .lexical-dropdown-menu {
    box-shadow: 0 8px 18px color-mix(in srgb, var(--aj-shadow-strong) 36%, transparent);
  }
}

.editor .lexical-dropdown-menu {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: hidden;
}

.editor .lexical-dropdown-item {
  cursor: pointer;
  min-height: 32px;
  color: var(--aj-ink);
  border-radius: 8px;
  align-items: center;
  padding: 0 10px;
  display: flex;
}

.editor .lexical-dropdown-item:hover {
  background: var(--aj-accent-muted);
}

.editor .lexical-menu {
  width: 100%;
}

.editor .lexical-menu-bar {
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  display: flex;
}

.editor .lexical-menu-item {
  flex-direction: column;
  gap: 8px;
  min-width: 180px;
  display: flex;
}

.editor .lexical-menu-trigger {
  align-self: flex-start;
}

.editor .lexical-menu-trigger.active {
  background: var(--aj-accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .editor .lexical-menu-trigger.active {
    background: color-mix(in srgb, var(--aj-accent) 8%, transparent);
  }
}

.editor .lexical-menu-trigger.active {
  border-color: var(--aj-line-strong);
}

@supports (color: color-mix(in lab, red, red)) {
  .editor .lexical-menu-trigger.active {
    border-color: color-mix(in srgb, var(--aj-line-strong) 36%, transparent);
  }
}

.editor .lexical-menu-panel {
  gap: 10px;
  min-width: 220px;
  display: grid;
  position: static;
}

.editor .lexical-menu-section {
  gap: 8px;
  display: grid;
}

.editor .lexical-menu-section-label {
  letter-spacing: .16em;
  color: var(--aj-ink-faint);
  text-transform: uppercase;
  font-size: 9px;
}

.editor .lexical-menu-section-content {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.editor .lexical-menu-button {
  min-height: 30px;
}

.editor .lexical-menu-dropdown {
  display: inline-flex;
}

.editor .lexical-menu-dropdown-panel {
  min-width: 180px;
}

.editor .lexical-floating-toolbar {
  border: 1px solid var(--aj-line-strong);
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .editor .lexical-floating-toolbar {
    border: 1px solid color-mix(in srgb, var(--aj-line-strong) 26%, transparent);
  }
}

.editor .lexical-floating-toolbar {
  background: var(--aj-surface);
  border-radius: 10px;
}

@supports (color: color-mix(in lab, red, red)) {
  .editor .lexical-floating-toolbar {
    background: color-mix(in srgb, var(--aj-surface) 72%, transparent);
  }
}

.editor .lexical-floating-toolbar {
  box-shadow: 0 8px 18px var(--aj-shadow-medium);
}

@supports (color: color-mix(in lab, red, red)) {
  .editor .lexical-floating-toolbar {
    box-shadow: 0 8px 18px color-mix(in srgb, var(--aj-shadow-medium) 28%, transparent);
  }
}

.editor .lexical-floating-button {
  min-width: 30px;
  min-height: 30px;
  color: var(--aj-ink);
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  padding: 0 9px;
  transition: background-color .14s, border-color .14s, color .14s;
  display: inline-flex;
}

.editor .lexical-floating-button:hover {
  background: var(--aj-accent-muted);
}

@supports (color: color-mix(in lab, red, red)) {
  .editor .lexical-floating-button:hover {
    background: color-mix(in srgb, var(--aj-accent-muted) 72%, transparent);
  }
}

.editor .lexical-floating-button:hover {
  border-color: var(--aj-line-strong);
}

@supports (color: color-mix(in lab, red, red)) {
  .editor .lexical-floating-button:hover {
    border-color: color-mix(in srgb, var(--aj-line-strong) 28%, transparent);
  }
}

.editor .lexical-floating-button.active {
  background: var(--aj-accent-muted);
}

@supports (color: color-mix(in lab, red, red)) {
  .editor .lexical-floating-button.active {
    background: color-mix(in srgb, var(--aj-accent-muted) 72%, transparent);
  }
}

.editor .lexical-floating-button.active {
  border-color: var(--aj-line-strong);
}

@supports (color: color-mix(in lab, red, red)) {
  .editor .lexical-floating-button.active {
    border-color: color-mix(in srgb, var(--aj-line-strong) 34%, transparent);
  }
}

.editor .lexical-floating-button.active {
  color: var(--aj-accent);
}

.editor .lexical-editor-input, .editor .lexical-read-only {
  flex: 0 auto;
  height: auto;
  min-height: 0;
}

.editor .lexical-editor-input .lexical-paragraph, .editor .lexical-read-only .lexical-paragraph {
  margin: 0 0 .9em;
  line-height: 1.65;
}

.editor .lexical-editor-input .lexical-paragraph:last-child, .editor .lexical-read-only .lexical-paragraph:last-child {
  margin-bottom: 0;
}

.editor .lexical-editor-input .lexical-heading-h1, .editor .lexical-read-only .lexical-heading-h1, .editor .lexical-editor-input .lexical-heading-h2, .editor .lexical-read-only .lexical-heading-h2, .editor .lexical-editor-input .lexical-heading-h3, .editor .lexical-read-only .lexical-heading-h3 {
  color: var(--aj-ink);
  letter-spacing: -.03em;
  margin: 1.2em 0 .55em;
  font-weight: 850;
  line-height: 1.2;
}

.editor .lexical-editor-input .lexical-heading-h1:first-child, .editor .lexical-read-only .lexical-heading-h1:first-child, .editor .lexical-editor-input .lexical-heading-h2:first-child, .editor .lexical-read-only .lexical-heading-h2:first-child, .editor .lexical-editor-input .lexical-heading-h3:first-child, .editor .lexical-read-only .lexical-heading-h3:first-child {
  margin-top: 0;
}

.editor .lexical-editor-input .lexical-heading-h1, .editor .lexical-read-only .lexical-heading-h1 {
  font-size: 2rem;
}

.editor .lexical-editor-input .lexical-heading-h2, .editor .lexical-read-only .lexical-heading-h2 {
  font-size: 1.6rem;
}

.editor .lexical-editor-input .lexical-heading-h3, .editor .lexical-read-only .lexical-heading-h3 {
  font-size: 1.3rem;
}

.editor .lexical-editor-input .lexical-list-ul, .editor .lexical-read-only .lexical-list-ul, .editor .lexical-editor-input .lexical-list-ol, .editor .lexical-read-only .lexical-list-ol {
  margin: .9em 0;
  padding-left: 1.6em;
}

.editor .lexical-editor-input .lexical-list-ul, .editor .lexical-read-only .lexical-list-ul {
  list-style-type: disc;
}

.editor .lexical-editor-input .lexical-list-ol, .editor .lexical-read-only .lexical-list-ol {
  list-style-type: decimal;
}

.editor .lexical-editor-input .lexical-listitem, .editor .lexical-read-only .lexical-listitem {
  color: var(--aj-ink);
  margin: .3em 0;
  line-height: 1.6;
}

.editor .lexical-editor-input .lexical-listitem > .lexical-list-ul, .editor .lexical-read-only .lexical-listitem > .lexical-list-ul, .editor .lexical-editor-input .lexical-listitem > .lexical-list-ol, .editor .lexical-read-only .lexical-listitem > .lexical-list-ol {
  margin-top: .45em;
  margin-bottom: .45em;
}

.editor .lexical-editor-input {
  display: block;
  overflow: auto;
}

.editor div:has( > .lexical-editor-input), .editor div:has( > .lexical-read-only) {
  flex-direction: column;
  flex: 0 auto;
  height: auto;
  min-height: 0;
  display: flex;
}

.editor .lexical-editor-input table, .editor .lexical-read-only table {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: auto;
  background: var(--aj-surface);
  border: 1px solid var(--aj-line);
  border-radius: 8px;
  width: fit-content;
  min-width: 100%;
  margin: 12px 0;
  overflow: hidden;
}

.editor .lexical-editor-input table tr, .editor .lexical-read-only table tr {
  background: none;
}

.editor .lexical-editor-input table td, .editor .lexical-editor-input table th, .editor .lexical-read-only table td, .editor .lexical-read-only table th {
  vertical-align: top;
  border-right: 1px solid var(--aj-line-soft);
  border-bottom: 1px solid var(--aj-line-soft);
  min-width: 96px;
  color: var(--aj-ink-muted);
  background: none;
  padding: 10px 12px;
}

.editor .lexical-editor-input table td:last-child, .editor .lexical-editor-input table th:last-child, .editor .lexical-read-only table td:last-child, .editor .lexical-read-only table th:last-child {
  border-right: none;
}

.editor .lexical-editor-input table tr:last-child td, .editor .lexical-editor-input table tr:last-child th, .editor .lexical-read-only table tr:last-child td, .editor .lexical-read-only table tr:last-child th {
  border-bottom: none;
}

.editor .lexical-editor-input table th, .editor .lexical-read-only table th {
  background: var(--aj-surface-muted);
  color: var(--aj-ink-soft);
  font-weight: 600;
}

.jfx-dialog-backdrop {
  z-index: 4000;
  background: #0000006b;
  justify-content: center;
  align-items: center;
  padding: 16px;
  display: flex;
  position: fixed;
  inset: 0;
}

.jfx-dialog {
  background: var(--aj-surface);
  border: 1px solid var(--aj-line);
  border-radius: 8px;
  flex-direction: column;
  gap: 12px;
  width: min(720px, 100%);
  padding: 16px;
  display: flex;
  box-shadow: 0 18px 50px #0000002e;
}

.jfx-dialog__title {
  color: var(--aj-ink-soft);
  margin: 0;
  font-size: 16px;
}

.jfx-dialog__content {
  min-width: 0;
}

.jfx-dialog__actions {
  justify-content: flex-end;
  gap: 8px;
  display: flex;
}

.jfx-dialog__button {
  border: 1px solid var(--aj-line);
  cursor: pointer;
  font: inherit;
  border-radius: 6px;
  padding: 8px 12px;
}

.jfx-dialog__button--secondary {
  background: var(--aj-surface);
  color: var(--aj-ink-soft);
}

.jfx-dialog__button--primary {
  background: var(--aj-accent);
  border-color: var(--aj-accent-strong);
  color: var(--aj-ink-inverse);
}

.jfx-window:has(.image-plugin-dialog) .jfx-window__surface {
  background: var(--aj-overlay-bg);
  border: 1px solid var(--aj-overlay-border);
}

@supports (color: color-mix(in lab, red, red)) {
  .jfx-window:has(.image-plugin-dialog) .jfx-window__surface {
    border: 1px solid color-mix(in srgb, var(--aj-overlay-border) 12%, transparent);
  }
}

.jfx-window:has(.image-plugin-dialog) .jfx-window__surface {
  box-shadow: 0 14px 34px var(--aj-shadow-medium), inset 0 1px 0 #ffffff14;
}

@supports (color: color-mix(in lab, red, red)) {
  .jfx-window:has(.image-plugin-dialog) .jfx-window__surface {
    box-shadow: 0 14px 34px color-mix(in srgb, var(--aj-shadow-medium) 26%, transparent), inset 0 1px 0 #ffffff14;
  }
}

.jfx-window:has(.image-plugin-dialog) .jfx-window__surface {
  backdrop-filter: blur(var(--aj-overlay-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--aj-overlay-blur)) saturate(180%);
}

.jfx-window:has(.image-plugin-dialog) .jfx-window__header {
  border-bottom: 1px solid var(--aj-chrome-border);
}

@supports (color: color-mix(in lab, red, red)) {
  .jfx-window:has(.image-plugin-dialog) .jfx-window__header {
    border-bottom: 1px solid color-mix(in srgb, var(--aj-chrome-border) 10%, transparent);
  }
}

.image-plugin-dialog {
  box-sizing: border-box;
  height: 100%;
  padding: 16px;
}

.image-plugin-dialog__shell {
  height: 100%;
}

.image-plugin-dialog__intro {
  opacity: .72;
  font-size: 13px;
  line-height: 1.5;
}

.image-plugin-dialog__section-title {
  letter-spacing: .24em;
  text-transform: uppercase;
  opacity: .46;
  font-size: 10px;
}

.image-plugin-dialog__preview-shell, .image-plugin-dialog__field-group {
  border: 1px solid var(--aj-overlay-border);
}

@supports (color: color-mix(in lab, red, red)) {
  .image-plugin-dialog__preview-shell, .image-plugin-dialog__field-group {
    border: 1px solid color-mix(in srgb, var(--aj-overlay-border) 10%, transparent);
  }
}

.image-plugin-dialog__preview-shell, .image-plugin-dialog__field-group {
  border-radius: var(--aj-overlay-radius);
  box-shadow: none;
  backdrop-filter: blur(calc(var(--aj-overlay-blur) - 6px)) saturate(180%);
  -webkit-backdrop-filter: blur(calc(var(--aj-overlay-blur) - 6px)) saturate(180%);
  padding: 14px;
  background: none !important;
}

.image-plugin-dialog__preview-shell {
  justify-content: center;
  align-items: center;
  min-height: 260px;
  display: flex;
  overflow: hidden;
}

.image-plugin-dialog__preview-image {
  border-radius: var(--aj-overlay-radius);
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  display: block;
}

.image-plugin-dialog__preview-placeholder {
  text-align: center;
  width: 100%;
  min-height: 232px;
  color: var(--aj-ink-faint);
  opacity: .74;
  justify-content: center;
  align-items: center;
  padding: 18px;
  display: flex;
}

.image-plugin-dialog__field-group {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.image-plugin-dialog__actions-row, .image-plugin-dialog__preset-row, .image-plugin-dialog__footer {
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}

.image-plugin-dialog__input {
  width: 100%;
}

.image-plugin-dialog__input input {
  width: 100%;
  box-shadow: none;
  border: none;
  background: none !important;
}

.image-plugin-dialog__input input:focus {
  outline: none;
}

.image-plugin-dialog__button, .image-plugin-dialog__chip {
  border: 1px solid var(--aj-control-border-hover);
  border-radius: 999px;
  min-height: 38px;
  padding: 8px 14px;
}

@supports (color: color-mix(in lab, red, red)) {
  .image-plugin-dialog__button, .image-plugin-dialog__chip {
    border: 1px solid color-mix(in srgb, var(--aj-control-border-hover) 10%, transparent);
  }
}

.image-plugin-dialog__button, .image-plugin-dialog__chip {
  box-shadow: none;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 12px;
  background: none !important;
}

.image-plugin-dialog__button--primary {
  border-color: var(--aj-accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .image-plugin-dialog__button--primary {
    border-color: color-mix(in srgb, var(--aj-accent) 22%, white 8%);
  }
}

.image-plugin-dialog__button--ghost {
  opacity: .82;
}

.image-plugin-dialog__chip {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 11px;
}

.image-plugin-dialog__meta {
  opacity: .68;
  padding: 0 2px;
  font-size: 12px;
  line-height: 1.5;
}

.image-plugin-dialog__meta--error {
  color: var(--aj-danger);
  opacity: .92;
}

.image-plugin-dialog__file-host, .image-plugin-dialog__file-input {
  display: none !important;
}

.image-cropper-field {
  width: 100%;
}

.image-cropper {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.image-cropper .toolbar {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  display: flex;
}

.image-cropper .canvas-wrap {
  justify-content: flex-start;
  display: flex;
}

.image-cropper canvas.canvas {
  border: 1px solid var(--aj-surface-muted);
  background: var(--aj-canvas);
  cursor: crosshair;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  border-radius: 6px;
  max-width: 100%;
  height: auto;
}

.image-cropper .preview {
  border: 1px solid var(--aj-surface-muted);
  object-fit: cover;
  background: var(--aj-canvas);
  border-radius: 6px;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.image-cropper-dialog {
  min-width: 500px;
  min-height: 400px;
}

.jfx-input-container {
  padding: 10px 0 6px;
}

.jfx-input-container__label {
  height: 12px;
  margin-bottom: 6px;
}

.jfx-input-container__label span.placeholder {
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .72;
  font-size: 11px;
  display: inline;
}

.jfx-input-container.empty .jfx-input-container__label span.placeholder {
  display: none;
}

.jfx-input-container__label.focus {
  color: var(--aj-accent) !important;
}

.jfx-input-container__label.dirty {
  color: var(--aj-warning) !important;
}

.jfx-input-container__label.invalid {
  color: var(--aj-danger) !important;
}

.jfx-input-container__control input {
  background: none;
  border: none;
  outline: none;
  width: 100%;
  padding: 4px 0;
  font-size: 14px;
}

.jfx-input-container__divider {
  background-color: var(--aj-surface-hover);
  border: 0;
  height: 2px;
  margin: 0;
  padding: 0;
}

.jfx-input-container__divider.focus {
  background-color: var(--aj-accent);
}

.jfx-input-container__divider.dirty {
  background-color: var(--aj-warning);
}

.jfx-input-container__divider.invalid {
  background-color: var(--aj-danger);
}

.jfx-input-container__errors {
  color: var(--aj-danger);
  height: 12px;
  margin-top: 6px;
  font-size: 10px;
}

div.jfx-drawer {
  min-width: 0;
  height: 100%;
  min-height: 0;
  display: flex;
  position: relative;
  overflow: hidden;
}

div.jfx-drawer > .jfx-drawer__scrim {
  display: none;
}

div.jfx-drawer > .jfx-drawer__panel-shell {
  z-index: 2;
  flex: none;
  align-self: stretch;
  width: 0;
  height: 100%;
  min-height: 0;
  transition: width .18s;
  position: relative;
  overflow: hidden;
}

div.jfx-drawer.jfx-drawer--end > .jfx-drawer__panel-shell {
  order: 2;
}

div.jfx-drawer > .jfx-drawer__panel-shell > .jfx-drawer__panel {
  box-sizing: border-box;
  background: var(--aj-overlay-bg);
  width: 280px;
  height: 100%;
  min-height: 0;
  color: var(--aj-ink);
  border-right: 1px solid var(--aj-overlay-border);
  backdrop-filter: blur(var(--aj-overlay-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--aj-overlay-blur)) saturate(180%);
  box-shadow: none;
  transition: transform .18s, box-shadow .18s;
  overflow-y: auto;
  transform: translateX(-100%);
}

div.jfx-drawer.jfx-drawer--end > .jfx-drawer__panel-shell > .jfx-drawer__panel {
  border-right: none;
  border-left: 1px solid var(--aj-overlay-border);
  transform: translateX(100%);
}

div.jfx-drawer.jfx-drawer--open > .jfx-drawer__panel-shell {
  width: 280px;
}

div.jfx-drawer.jfx-drawer--open > .jfx-drawer__panel-shell > .jfx-drawer__panel {
  box-shadow: 0 16px 32px var(--aj-shadow-medium);
  transform: translateX(0);
}

div.jfx-drawer .jfx-drawer__navigation {
  box-sizing: border-box;
  flex-direction: column;
  flex: auto;
  height: 100%;
  min-height: 0;
  display: flex;
}

div.jfx-drawer > .jfx-drawer__content {
  z-index: 1;
  flex-direction: column;
  flex: auto;
  min-width: 0;
  height: 100%;
  min-height: 0;
  display: flex;
  position: relative;
}

div.jfx-drawer.jfx-drawer--end > .jfx-drawer__content {
  order: 1;
}

@media (max-width: 767px) {
  div.jfx-drawer {
    display: block;
  }

  div.jfx-drawer > .jfx-drawer__scrim {
    background: var(--aj-surface-backdrop);
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    transition: opacity .18s;
    display: block;
    position: absolute;
    inset: 0;
  }

  div.jfx-drawer > .jfx-drawer__panel-shell, div.jfx-drawer.jfx-drawer--open > .jfx-drawer__panel-shell {
    pointer-events: none;
    z-index: 20;
    width: min(92vw, 280px);
    max-width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    overflow: visible;
  }

  div.jfx-drawer.jfx-drawer--end > .jfx-drawer__panel-shell, div.jfx-drawer.jfx-drawer--end.jfx-drawer--open > .jfx-drawer__panel-shell {
    left: auto;
    right: 0;
  }

  div.jfx-drawer > .jfx-drawer__panel-shell > .jfx-drawer__panel {
    width: min(92vw, 280px);
  }

  div.jfx-drawer.jfx-drawer--open > .jfx-drawer__scrim {
    opacity: 1;
    pointer-events: auto;
  }

  div.jfx-drawer.jfx-drawer--open > .jfx-drawer__panel-shell {
    pointer-events: auto;
  }
}

div.hbox {
  flex-direction: row;
  display: flex;
}

hr {
  border: 0;
  border-top: 1px solid var(--aj-line);
  color: var(--aj-line);
  background-color: var(--aj-line);
  margin: 0;
}

div.vbox {
  flex-direction: column;
  height: 100%;
  display: flex;
}

.jfx-window.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(.96) translateY(14px);
}

.jfx-window {
  opacity: 1;
  pointer-events: all;
  flex-direction: column;
  min-width: 360px;
  max-width: 1600px;
  min-height: 360px;
  max-height: 1024px;
  transition: opacity .3s cubic-bezier(.4, 0, .2, 1), transform .3s cubic-bezier(.34, 1.56, .64, 1);
  display: flex;
  position: absolute;
  overflow: visible;
  transform: none;
}

.jfx-window .jfx-window__surface {
  isolation: isolate;
  background: var(--aj-overlay-bg);
  border: 1px solid var(--aj-overlay-border);
  min-width: 0;
  min-height: 0;
  box-shadow: 0 16px 44px var(--aj-shadow-medium);
  border-radius: var(--aj-overlay-radius);
  flex-direction: column;
  flex: auto;
  display: flex;
  position: relative;
  overflow: hidden;
}

.jfx-window .jfx-window__surface:before {
  content: "";
  border-radius: inherit;
  backdrop-filter: blur(var(--aj-overlay-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--aj-overlay-blur)) saturate(180%);
  pointer-events: none;
  z-index: 0;
  position: absolute;
  inset: 0;
}

.jfx-window .jfx-window__surface > * {
  z-index: 1;
  position: relative;
}

.jfx-window .jfx-window__container {
  flex: auto;
  min-height: 0;
  overflow: auto;
}

.jfx-window .jfx-window__header {
  background-color: var(--aj-chrome-bg);
  cursor: move;
  height: 38px;
  min-height: 38px;
  max-height: 38px;
  vertical-align: center;
  box-sizing: border-box;
  border-bottom: 1px solid var(--aj-chrome-border);
  flex: 0 0 38px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  line-height: 38px;
  display: flex;
  overflow: hidden;
}

.jfx-window .jfx-window__header .jfx-window__title {
  letter-spacing: .12em;
  text-transform: uppercase;
  padding-left: 12px;
  font-size: 12px;
  font-weight: 700;
}

.jfx-window.jfx-window--resizable .jfx-window__handle--nw {
  cursor: nw-resize;
  width: 12px;
  height: 12px;
  position: absolute;
  top: -12px;
  left: -12px;
}

.jfx-window.jfx-window--resizable .jfx-window__handle--ne {
  cursor: ne-resize;
  width: 12px;
  height: 12px;
  position: absolute;
  top: -12px;
  right: -12px;
}

.jfx-window.jfx-window--resizable .jfx-window__handle--se {
  cursor: se-resize;
  width: 12px;
  height: 12px;
  position: absolute;
  bottom: -12px;
  right: -12px;
}

.jfx-window.jfx-window--resizable .jfx-window__handle--sw {
  cursor: sw-resize;
  width: 12px;
  height: 12px;
  position: absolute;
  bottom: -12px;
  left: -12px;
}

.jfx-window.jfx-window--resizable .jfx-window__handle--n {
  cursor: n-resize;
  width: calc(100% - 24px);
  height: 12px;
  position: absolute;
  top: -12px;
  left: 12px;
}

.jfx-window.jfx-window--resizable .jfx-window__handle--s {
  cursor: s-resize;
  width: calc(100% - 24px);
  height: 12px;
  position: absolute;
  bottom: -12px;
  left: 12px;
}

.jfx-window.jfx-window--resizable .jfx-window__handle--w {
  cursor: w-resize;
  width: 12px;
  height: calc(100% - 24px);
  position: absolute;
  top: 12px;
  left: -12px;
}

.jfx-window.jfx-window--resizable .jfx-window__handle--e {
  cursor: e-resize;
  width: 12px;
  height: calc(100% - 24px);
  position: absolute;
  top: 12px;
  right: -12px;
}

html[data-theme="light"] .jfx-window .jfx-window__surface {
  border-color: var(--aj-overlay-border);
}

@supports (color: color-mix(in lab, red, red)) {
  html[data-theme="light"] .jfx-window .jfx-window__surface {
    border-color: color-mix(in srgb, var(--aj-overlay-border) 112%, transparent);
  }
}

html[data-theme="light"] .jfx-window .jfx-window__surface {
  box-shadow: 0 16px 34px var(--aj-shadow-medium), inset 0 1px 0 #ffffff5c;
}

@supports (color: color-mix(in lab, red, red)) {
  html[data-theme="light"] .jfx-window .jfx-window__surface {
    box-shadow: 0 16px 34px color-mix(in srgb, var(--aj-shadow-medium) 76%, transparent), inset 0 1px 0 #ffffff5c;
  }
}

html[data-theme="light"] .jfx-window .jfx-window__header {
  background-color: var(--aj-surface-scrim);
}

@supports (color: color-mix(in lab, red, red)) {
  html[data-theme="light"] .jfx-window .jfx-window__header {
    background-color: color-mix(in srgb, var(--aj-surface-scrim) 118%, transparent);
  }
}

html[data-theme="light"] .jfx-window .jfx-window__header {
  border-bottom-color: var(--aj-chrome-border);
}

@supports (color: color-mix(in lab, red, red)) {
  html[data-theme="light"] .jfx-window .jfx-window__header {
    border-bottom-color: color-mix(in srgb, var(--aj-chrome-border) 108%, transparent);
  }
}

html[data-theme="light"] .jfx-window .jfx-window__title {
  color: var(--aj-ink-soft);
}

@supports (color: color-mix(in lab, red, red)) {
  html[data-theme="light"] .jfx-window .jfx-window__title {
    color: color-mix(in srgb, var(--aj-ink-soft) 88%, black 12%);
  }
}

@media (max-width: 900px) {
  .jfx-window {
    width: calc(100vw - 16px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 16px) !important;
    height: calc(100dvh - 16px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 16px) !important;
    top: 8px !important;
    left: 8px !important;
  }

  .jfx-window .jfx-window__surface {
    border-radius: calc(var(--aj-overlay-radius) - 4px);
  }

  .jfx-window .jfx-window__header {
    cursor: default;
  }

  .jfx-window.jfx-window--resizable .jfx-window__handle--nw, .jfx-window.jfx-window--resizable .jfx-window__handle--ne, .jfx-window.jfx-window--resizable .jfx-window__handle--se, .jfx-window.jfx-window--resizable .jfx-window__handle--sw, .jfx-window.jfx-window--resizable .jfx-window__handle--n, .jfx-window.jfx-window--resizable .jfx-window__handle--s, .jfx-window.jfx-window--resizable .jfx-window__handle--w, .jfx-window.jfx-window--resizable .jfx-window__handle--e {
    display: none;
  }
}

.jfx-viewport {
  height: 100%;
  position: relative;
  overflow: auto;
}

.jfx-viewport .jfx2-overlay {
  background: var(--aj-overlay-bg);
  border: 1px solid var(--aj-overlay-border);
  box-shadow: var(--aj-overlay-shadow);
  border-radius: var(--aj-overlay-radius);
  backdrop-filter: blur(var(--aj-overlay-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--aj-overlay-blur)) saturate(180%);
  backdrop-filter: blur(var(--aj-overlay-blur)) saturate(180%);
  position: fixed;
}

.jfx-viewport .jfx2-notification-host {
  z-index: 100000;
  pointer-events: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  display: flex;
  position: fixed;
  top: 64px;
  right: 12px;
}

.jfx-viewport .jfx2-notification {
  pointer-events: auto;
  background: var(--aj-overlay-bg);
  min-width: 240px;
  max-width: 420px;
  backdrop-filter: blur(var(--aj-overlay-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--aj-overlay-blur)) saturate(180%);
  border: 1px solid var(--aj-overlay-border);
  box-shadow: var(--aj-overlay-shadow);
  border-radius: var(--aj-floating-radius);
  color: var(--aj-ink);
  opacity: 1;
  padding: 10px 12px;
  line-height: 1.3;
  transition: opacity .25s, transform .25s;
  transform: translateY(0);
}

.jfx-viewport .jfx2-notification.is-hidden {
  opacity: 0;
  transform: translateY(-6px);
}

.jfx-viewport .jfx2-notification.kind-info {
  border-left: 4px solid var(--aj-info);
}

.jfx-viewport .jfx2-notification.kind-success {
  border-left: 4px solid var(--aj-accent);
}

.jfx-viewport .jfx2-notification.kind-warning {
  border-left: 4px solid var(--aj-warning);
}

.jfx-viewport .jfx2-notification.kind-error {
  border-left: 4px solid var(--aj-danger);
}

.jfx-viewport-overlay {
  box-sizing: border-box;
  pointer-events: auto;
  position: fixed;
}

.jfx-viewport-notification {
  z-index: 100000;
  min-width: 240px;
  max-width: 420px;
  color: var(--aj-ink);
  background: var(--aj-overlay-bg);
  border: 1px solid var(--aj-overlay-border);
  border-radius: var(--aj-floating-radius);
  box-shadow: var(--aj-overlay-shadow);
  backdrop-filter: blur(var(--aj-overlay-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--aj-overlay-blur)) saturate(180%);
  opacity: 1;
  padding: 10px 12px;
  line-height: 1.3;
  transition: opacity .25s, transform .25s;
  position: fixed;
  top: 64px;
  right: 12px;
  transform: translateY(0);
}

.jfx-viewport-notification.is-hidden {
  opacity: 0;
  transform: translateY(-6px);
}

.jfx-viewport-notification--info {
  border-left: 4px solid var(--aj-info);
}

.jfx-viewport-notification--success {
  border-left: 4px solid var(--aj-accent);
}

.jfx-viewport-notification--warning {
  border-left: 4px solid var(--aj-warning);
}

.jfx-viewport-notification--error {
  border-left: 4px solid var(--aj-danger);
}

body {
  background: none;
  height: 100vh;
  margin: 0;
}

#root {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}

html[data-theme="light"] #root {
  background-image: url("/assets/beach-Cp6Vyesu.png");
}

html[data-theme="dark"] #root {
  background-image: url("/assets/stars-CcsG7Bc_.jpg");
}

@media (max-width: 900px) {
  body {
    background: none;
  }

  html[data-theme="light"] #root {
    background-image: url("/assets/beach-Cp6Vyesu.png");
    background-position: top;
  }

  html[data-theme="dark"] #root {
    background-image: url("/assets/stars-CcsG7Bc_.jpg");
    background-position: top;
  }
}

.app-shell {
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  position: relative;
}

.app-shell-drawer-layout {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.app-shell-drawer {
  height: 100%;
  min-height: 0;
}

div.jfx-drawer {
  background-color: #0000;
}

div.jfx-drawer.app-shell-drawer > .jfx-drawer__panel-shell > .jfx-drawer__panel {
  background: none;
  border: 0;
}

.app-shell-drawer-nav {
  box-sizing: border-box;
  border-right: 1px solid var(--aj-glass-border);
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 22px;
  height: 100%;
  min-height: 0;
  padding: 26px 14px 20px;
  display: flex;
  overflow: hidden;
}

@supports (color: color-mix(in lab, red, red)) {
  .app-shell-drawer-nav {
    border-right: 1px solid color-mix(in srgb, var(--aj-glass-border) 26%, transparent);
  }
}

.app-shell-drawer-nav {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.app-shell-drawer-brand {
  flex-direction: column;
  flex: none;
  align-items: flex-start;
  gap: 4px;
  height: auto;
  min-height: 0;
  padding: 2px 10px 0;
  display: flex;
}

.app-shell-drawer-brand-eyebrow {
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--aj-ink-faint);
  opacity: .86;
  font-family: Cascadia Code, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
}

.app-shell-drawer-brand-title {
  letter-spacing: -.03em;
  color: var(--aj-ink);
  font-family: Iowan Old Style, Palatino Linotype, Book Antiqua, serif;
  font-size: 24px;
  line-height: 1.02;
}

.app-shell-drawer-links {
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  flex-direction: column;
  flex: auto;
  justify-content: flex-start;
  align-items: stretch;
  gap: 4px;
  min-height: 0;
  padding-top: 6px;
  padding-right: 4px;
  display: flex;
  overflow-y: auto;
}

.app-shell-drawer-meta {
  border-top: 1px solid var(--aj-glass-border);
  flex-direction: column;
  flex: none;
  gap: 4px;
  padding-top: 10px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .app-shell-drawer-meta {
    border-top: 1px solid color-mix(in srgb, var(--aj-glass-border) 18%, transparent);
  }
}

.app-shell-drawer-link {
  background: none;
  border: 1px solid #0000;
  border-radius: 14px;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 9px 10px 10px;
  text-decoration: none;
  transition: background-color .18s, border-color .18s, transform .18s;
  display: flex;
}

.app-shell-drawer-link:hover {
  background: var(--aj-glass-bg-dense);
}

@supports (color: color-mix(in lab, red, red)) {
  .app-shell-drawer-link:hover {
    background: color-mix(in srgb, var(--aj-glass-bg-dense) 54%, transparent);
  }
}

.app-shell-drawer-link:hover {
  border-color: var(--aj-glass-border);
}

@supports (color: color-mix(in lab, red, red)) {
  .app-shell-drawer-link:hover {
    border-color: color-mix(in srgb, var(--aj-glass-border) 22%, transparent);
  }
}

.app-shell-drawer-link:hover {
  transform: translateX(1px);
}

.app-shell-drawer-link-icon {
  background: var(--aj-surface-scrim);
  border-radius: 14px;
  justify-content: center;
  align-items: center;
  width: 76px;
  min-width: 76px;
  height: 76px;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .app-shell-drawer-link-icon {
    background: color-mix(in srgb, var(--aj-surface-scrim) 42%, transparent);
  }
}

.app-shell-drawer-link-icon {
  box-shadow: inset 0 1px #ffffff0d;
}

.app-shell-drawer-link-icon .icon {
  color: var(--aj-ink-soft);
  font-size: 54px;
}

@supports (color: color-mix(in lab, red, red)) {
  .app-shell-drawer-link-icon .icon {
    color: color-mix(in srgb, var(--aj-ink-soft) 88%, white 12%);
  }
}

.app-shell-drawer-link-copy {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
  display: flex;
}

.app-shell-drawer-link-title {
  letter-spacing: .01em;
  color: var(--aj-ink);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
}

.app-shell-drawer-link-text {
  color: var(--aj-ink-soft);
  font-size: 11px;
  line-height: 1.35;
}

@supports (color: color-mix(in lab, red, red)) {
  .app-shell-drawer-link-text {
    color: color-mix(in srgb, var(--aj-ink-soft) 84%, transparent);
  }
}

.app-shell-drawer-link-text {
  opacity: .86;
  max-width: 150px;
}

.app-shell-main {
  background: none;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  min-height: 0;
  display: flex;
}

.app-header-bar {
  box-sizing: border-box;
  border-bottom: 1px solid var(--aj-glass-border);
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 18px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .app-header-bar {
    border-bottom: 1px solid color-mix(in srgb, var(--aj-glass-border) 30%, transparent);
  }
}

.app-header-bar {
  background: var(--aj-glass-bg);
}

@supports (color: color-mix(in lab, red, red)) {
  .app-header-bar {
    background: color-mix(in srgb, var(--aj-glass-bg) 88%, transparent);
  }
}

.app-header-bar {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: inset 0 1px #ffffff14;
}

.app-shell-header-title {
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--aj-ink-soft);
  font-family: Cascadia Code, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
}

.app-shell-header-spacer {
  flex: 1;
}

.app-shell-drawer-toggle, .app-shell-theme-toggle, .app-language-toggle {
  background: var(--aj-glass-bg-dense);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  min-height: 36px;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .app-shell-drawer-toggle, .app-shell-theme-toggle, .app-language-toggle {
    background: color-mix(in srgb, var(--aj-glass-bg-dense) 70%, transparent);
  }
}

.app-shell-drawer-toggle, .app-shell-theme-toggle, .app-language-toggle {
  border: 1px solid var(--aj-glass-border);
}

@supports (color: color-mix(in lab, red, red)) {
  .app-shell-drawer-toggle, .app-shell-theme-toggle, .app-language-toggle {
    border: 1px solid color-mix(in srgb, var(--aj-glass-border) 22%, transparent);
  }
}

.app-shell-drawer-toggle, .app-shell-theme-toggle, .app-language-toggle {
  color: var(--aj-ink-soft);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  cursor: pointer;
  box-shadow: inset 0 1px #ffffff14;
}

.app-shell-drawer-toggle, .app-shell-theme-toggle {
  width: 36px;
  height: 36px;
  padding: 0;
}

.app-language-toggle {
  letter-spacing: .08em;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
}

.app-shell-drawer-toggle:hover, .app-shell-theme-toggle:hover, .app-language-toggle:hover {
  background: var(--aj-surface-hover);
}

@supports (color: color-mix(in lab, red, red)) {
  .app-shell-drawer-toggle:hover, .app-shell-theme-toggle:hover, .app-language-toggle:hover {
    background: color-mix(in srgb, var(--aj-surface-hover) 74%, transparent);
  }
}

.app-header-user {
  align-items: center;
  gap: 10px;
  margin-left: auto;
  position: relative;
  top: 3px;
}

.logged-in-user {
  background: var(--aj-glass-bg-dense);
  border-radius: 999px;
  align-items: center;
  min-height: 36px;
  margin-left: 10px;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .logged-in-user {
    background: color-mix(in srgb, var(--aj-glass-bg-dense) 72%, transparent);
  }
}

.logged-in-user {
  border: 1px solid var(--aj-glass-border);
}

@supports (color: color-mix(in lab, red, red)) {
  .logged-in-user {
    border: 1px solid color-mix(in srgb, var(--aj-glass-border) 22%, transparent);
  }
}

.logged-in-user {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  overflow: hidden;
  box-shadow: inset 0 1px #ffffff14;
}

.logged-in-user__link {
  min-height: 36px;
  color: var(--aj-ink);
  align-items: center;
  padding: 0 12px 0 6px;
  text-decoration: none;
  display: inline-flex;
}

.logged-in-user__link:hover {
  background: var(--aj-surface-hover);
}

@supports (color: color-mix(in lab, red, red)) {
  .logged-in-user__link:hover {
    background: color-mix(in srgb, var(--aj-surface-hover) 74%, transparent);
  }
}

.logged-in-user-inner {
  align-items: center;
  gap: 10px;
  display: inline-flex;
}

.logged-in-user-avatar {
  object-fit: cover;
  border-radius: 999px;
  flex: none;
  width: 28px;
  height: 28px;
}

.logged-in-user-avatar--fallback {
  background: var(--aj-surface-scrim);
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .logged-in-user-avatar--fallback {
    background: color-mix(in srgb, var(--aj-surface-scrim) 42%, transparent);
  }
}

.logged-in-user-avatar--fallback {
  color: var(--aj-ink-soft);
}

@supports (color: color-mix(in lab, red, red)) {
  .logged-in-user-avatar--fallback {
    color: color-mix(in srgb, var(--aj-ink-soft) 88%, white 12%);
  }
}

.logged-in-user-avatar--fallback {
  font-size: 28px;
}

.logged-in-user-label {
  letter-spacing: .01em;
  white-space: nowrap;
  color: var(--aj-ink);
  font-size: 12px;
  font-weight: 650;
}

.app-shell-router-host, .app-shell-router-host > .jfx-viewport {
  flex: auto;
  min-width: 0;
  height: 100%;
  min-height: 0;
  display: flex;
}

.app-shell-router-host > .jfx-viewport > * {
  flex: auto;
  min-width: 0;
  height: 100%;
  min-height: 0;
}

@media (max-width: 900px) {
  .app-shell-drawer-nav {
    background: var(--aj-glass-bg-mobile);
    box-shadow: 0 24px 48px var(--aj-glass-shadow-mobile), inset 0 1px 0 #ffffff14;
    border-right: 0;
    padding: 20px 14px;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .app-shell-drawer-nav {
      box-shadow: 0 24px 48px color-mix(in srgb, var(--aj-glass-shadow-mobile) 84%, transparent), inset 0 1px 0 #ffffff14;
    }
  }

  .app-shell-drawer-link {
    align-items: flex-start;
    padding: 10px 12px;
  }

  .app-shell-drawer-link-copy {
    text-align: left;
    align-items: flex-start;
  }

  .app-shell-drawer-link-icon {
    width: 54px;
    min-width: 54px;
    height: 54px;
  }

  .app-shell-drawer-link-icon .icon {
    font-size: 34px;
  }

  .app-header-bar {
    background: var(--aj-glass-bg-mobile);
    padding: 0 12px;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .app-header-bar {
      background: color-mix(in srgb, var(--aj-glass-bg-mobile) 92%, transparent);
    }
  }

  .logged-in-user {
    margin-left: 0;
  }
}

.home-page {
  width: 100%;
  height: 100%;
  min-height: 0;
  color: var(--aj-ink);
  background: linear-gradient(180deg, var(--aj-surface-page), var(--aj-surface-canvas));
  overflow: hidden;
}

@supports (color: color-mix(in lab, red, red)) {
  .home-page {
    background: linear-gradient(180deg, color-mix(in srgb, var(--aj-surface-page) 96%, white 4%), color-mix(in srgb, var(--aj-surface-canvas) 98%, black 2%));
  }
}

.home-page__viewport {
  height: 100%;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.home-page__aurora, .home-page__aurora:before, .home-page__aurora:after {
  pointer-events: none;
  content: "";
  position: absolute;
  inset: 0;
}

.home-page__aurora {
  filter: none;
  background: none;
}

.home-page__aurora:before {
  opacity: .28;
  background: radial-gradient(circle, #fff3, #fff0);
  border-radius: 999px;
  width: min(38vw, 520px);
  height: min(38vw, 520px);
  animation: 18s ease-in-out infinite home-page-drift;
  inset: 8% auto auto 6%;
}

.home-page__aurora:after {
  opacity: .18;
  background: radial-gradient(circle, #ffffff24, #0000 70%);
  border-radius: 999px;
  width: min(30vw, 420px);
  height: min(30vw, 420px);
  animation: 24s ease-in-out infinite reverse home-page-drift;
  inset: auto 8% 10% auto;
}

.home-page__shell {
  z-index: 1;
  box-sizing: border-box;
  border: 1px solid var(--aj-glass-border);
  border-radius: 38px;
  flex-direction: column;
  width: min(1480px, 100% - 32px);
  height: calc(100% - 32px);
  min-height: 0;
  margin: 16px auto;
  padding: 22px;
  display: flex;
  position: relative;
}

@supports (color: color-mix(in lab, red, red)) {
  .home-page__shell {
    border: 1px solid color-mix(in srgb, var(--aj-glass-border) 30%, transparent);
  }
}

.home-page__shell {
  background: linear-gradient(180deg, var(--aj-glass-bg-dense), var(--aj-glass-bg-medium));
}

@supports (color: color-mix(in lab, red, red)) {
  .home-page__shell {
    background: linear-gradient(180deg, color-mix(in srgb, var(--aj-glass-bg-dense) 88%, transparent), color-mix(in srgb, var(--aj-glass-bg-medium) 84%, transparent));
  }
}

.home-page__shell {
  box-shadow: 0 28px 72px var(--aj-shadow-float), inset 0 1px 0 #ffffff1f, inset 0 0 0 1px #00000012;
}

@supports (color: color-mix(in lab, red, red)) {
  .home-page__shell {
    box-shadow: 0 28px 72px color-mix(in srgb, var(--aj-shadow-float) 44%, transparent), inset 0 1px 0 #ffffff1f, inset 0 0 0 1px #00000012;
  }
}

.home-page__shell {
  backdrop-filter: blur(22px) saturate(165%);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
}

.home-page__glass {
  border: 1px solid var(--aj-glass-border);
}

@supports (color: color-mix(in lab, red, red)) {
  .home-page__glass {
    border: 1px solid color-mix(in srgb, var(--aj-glass-border) 28%, transparent);
  }
}

.home-page__glass {
  background: linear-gradient(180deg, var(--aj-glass-bg-dense), var(--aj-glass-bg-medium));
}

@supports (color: color-mix(in lab, red, red)) {
  .home-page__glass {
    background: linear-gradient(180deg, color-mix(in srgb, var(--aj-glass-bg-dense) 82%, transparent), color-mix(in srgb, var(--aj-glass-bg-medium) 78%, transparent));
  }
}

.home-page__glass {
  box-shadow: 0 24px 64px var(--aj-shadow-float), inset 0 1px 0 #ffffff1f, inset 0 0 0 1px #00000012;
}

@supports (color: color-mix(in lab, red, red)) {
  .home-page__glass {
    box-shadow: 0 24px 64px color-mix(in srgb, var(--aj-shadow-float) 46%, transparent), inset 0 1px 0 #ffffff1f, inset 0 0 0 1px #00000012;
  }
}

.home-page__glass {
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
}

.home-page__topbar, .home-page__topbar-links, .home-page__topbar-actions, .home-page__hero-actions, .home-page__process-head, .home-page__contact-actions {
  align-items: center;
  display: flex;
}

.home-page__topbar {
  z-index: 5;
  border-radius: 26px;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding: 14px 16px;
  position: sticky;
  top: 16px;
}

.home-page__brand, .home-page__hero-copy, .home-page__hero-side, .home-page__section-copy, .home-page__contact-copy, .home-page__story-card, .home-page__reference-card, .home-page__process-card, .home-page__quote-panel {
  flex-direction: column;
  display: flex;
}

.home-page__brand {
  gap: 2px;
  min-width: 0;
}

.home-page__brand-kicker, .home-page__eyebrow, .home-page__section-kicker, .home-page__story-index, .home-page__process-index {
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--aj-ink-faint);
  font-family: Cascadia Code, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
}

.home-page__brand-title, .home-page__title, .home-page__section-title, .home-page__quote-text {
  color: var(--aj-ink);
  font-family: Iowan Old Style, Palatino Linotype, Book Antiqua, serif;
}

.home-page__brand-title {
  letter-spacing: -.03em;
  font-size: 24px;
  line-height: 1;
}

.home-page__topbar-links, .home-page__topbar-actions, .home-page__hero-actions, .home-page__contact-actions {
  flex-wrap: wrap;
  gap: 10px;
}

.home-page__main {
  scrollbar-gutter: stable;
  flex-direction: column;
  flex: auto;
  gap: clamp(64px, 9vh, 132px);
  min-height: 0;
  padding-right: 10px;
  display: flex;
  overflow: hidden auto;
}

.home-page__surface {
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: none;
  border-radius: 34px;
  padding: clamp(38px, 5vw, 72px);
  animation: .9s both home-page-rise;
  position: relative;
  overflow: hidden;
}

.home-page__surface:before {
  content: "";
  pointer-events: none;
  background: none;
  position: absolute;
  inset: 0;
}

.home-page__hero {
  border-color: #0000;
  min-height: min(82vh, 920px);
}

.home-page__hero-grid, .home-page__section-grid, .home-page__contact-panel {
  z-index: 1;
  gap: clamp(18px, 2vw, 30px);
  display: grid;
  position: relative;
}

.home-page__hero-grid {
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, .6fr);
  align-items: end;
  min-height: 100%;
}

.home-page__hero-copy {
  justify-content: center;
  gap: 28px;
  max-width: 700px;
}

.home-page__eyebrow {
  align-items: center;
  gap: 14px;
  display: inline-flex;
}

.home-page__eyebrow:before {
  content: "";
  background: var(--aj-glass-border);
  width: 56px;
  height: 1px;
}

@supports (color: color-mix(in lab, red, red)) {
  .home-page__eyebrow:before {
    background: color-mix(in srgb, var(--aj-glass-border) 50%, transparent);
  }
}

.home-page__title {
  letter-spacing: -.05em;
  text-wrap: balance;
  margin: 0;
  font-size: clamp(72px, 12vw, 160px);
  font-weight: 400;
  line-height: .88;
}

.home-page__lead, .home-page__hero-note, .home-page__section-text, .home-page__story-text, .home-page__process-text {
  color: var(--aj-ink-muted);
  line-height: 1.65;
}

.home-page__lead {
  max-width: 28ch;
  font-size: clamp(18px, 1.15vw, 21px);
}

.home-page__hero-note, .home-page__section-text {
  max-width: 28ch;
  font-size: 13px;
}

.home-page__hero-side {
  justify-content: flex-end;
  gap: 22px;
  padding-bottom: 12px;
  padding-left: clamp(24px, 4vw, 80px);
}

.home-page__quote-panel, .home-page__story-card, .home-page__reference-card, .home-page__process-card, .home-page__contact-panel {
  z-index: 1;
  border: 1px solid var(--aj-glass-border);
  position: relative;
}

@supports (color: color-mix(in lab, red, red)) {
  .home-page__quote-panel, .home-page__story-card, .home-page__reference-card, .home-page__process-card, .home-page__contact-panel {
    border: 1px solid color-mix(in srgb, var(--aj-glass-border) 22%, transparent);
  }
}

.home-page__quote-panel, .home-page__story-card, .home-page__reference-card, .home-page__process-card, .home-page__contact-panel {
  background: var(--aj-glass-bg-medium);
  border-radius: 24px;
}

@supports (color: color-mix(in lab, red, red)) {
  .home-page__quote-panel, .home-page__story-card, .home-page__reference-card, .home-page__process-card, .home-page__contact-panel {
    background: color-mix(in srgb, var(--aj-glass-bg-medium) 76%, transparent);
  }
}

.home-page__quote-panel, .home-page__story-card, .home-page__reference-card, .home-page__process-card, .home-page__contact-panel {
  box-shadow: 0 14px 34px var(--aj-shadow-panel), inset 0 1px 0 #ffffff1a;
}

@supports (color: color-mix(in lab, red, red)) {
  .home-page__quote-panel, .home-page__story-card, .home-page__reference-card, .home-page__process-card, .home-page__contact-panel {
    box-shadow: 0 14px 34px color-mix(in srgb, var(--aj-shadow-panel) 22%, transparent), inset 0 1px 0 #ffffff1a;
  }
}

.home-page__hero .home-page__quote-panel, .home-page__hero .home-page__story-card, .home-page__hero .home-page__reference-card, .home-page__hero .home-page__process-card {
  box-shadow: none;
  background: none;
}

.home-page__quote-panel {
  border-left: 1px solid var(--aj-glass-border);
  gap: 10px;
  padding: 18px 8px 18px 24px;
}

@supports (color: color-mix(in lab, red, red)) {
  .home-page__quote-panel {
    border-left: 1px solid color-mix(in srgb, var(--aj-glass-border) 26%, transparent);
  }
}

.home-page__quote-panel {
  border-top: 0;
  border-bottom: 0;
  border-right: 0;
  border-radius: 0;
}

.home-page__quote-text {
  letter-spacing: -.03em;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.04;
}

.home-page__filmstrip, .home-page__story-grid, .home-page__reference-grid {
  gap: 24px;
  display: grid;
}

.home-page__section {
  min-height: 78vh;
}

.home-page__section-grid {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: start;
}

.home-page__section-copy {
  gap: 26px;
  max-width: 520px;
  padding-right: clamp(0px, 2vw, 30px);
}

.home-page__section-kicker {
  margin-bottom: 2px;
}

.home-page__section-title {
  letter-spacing: -.035em;
  text-wrap: balance;
  margin: 0;
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 400;
  line-height: 1;
}

.home-page__filmstrip {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding-top: 56px;
}

.home-page__process-card {
  background: var(--aj-glass-bg-medium);
  gap: 12px;
  min-height: 220px;
  padding: 28px 18px;
}

@supports (color: color-mix(in lab, red, red)) {
  .home-page__process-card {
    background: color-mix(in srgb, var(--aj-glass-bg-medium) 48%, transparent);
  }
}

.home-page__process-head {
  justify-content: space-between;
  gap: 12px;
}

.home-page__process-title, .home-page__story-title {
  color: var(--aj-ink);
  font-size: 20px;
  font-weight: 650;
  line-height: 1.16;
}

.home-page__process-text, .home-page__story-text {
  font-size: 14px;
}

.home-page__story-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: 56px;
}

.home-page__story-card, .home-page__reference-card {
  background: var(--aj-glass-bg-medium);
  gap: 10px;
  min-height: 260px;
  padding: 30px 24px;
}

@supports (color: color-mix(in lab, red, red)) {
  .home-page__story-card, .home-page__reference-card {
    background: color-mix(in srgb, var(--aj-glass-bg-medium) 44%, transparent);
  }
}

.home-page__reference-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: 56px;
}

.home-page__section--final {
  padding-bottom: clamp(28px, 4vw, 50px);
}

.home-page__contact-panel {
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
  align-items: center;
  padding: clamp(28px, 4vw, 44px);
}

.home-page__contact-copy {
  gap: 14px;
}

.home-page__contact-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-self: stretch;
  gap: 12px;
  display: grid;
}

.home-page__contact-action {
  border: 1px solid var(--aj-glass-border);
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 86px;
  padding: 14px;
  display: grid;
}

@supports (color: color-mix(in lab, red, red)) {
  .home-page__contact-action {
    border: 1px solid color-mix(in srgb, var(--aj-glass-border) 24%, transparent);
  }
}

.home-page__contact-action {
  background: var(--aj-glass-bg-dense);
  border-radius: 18px;
}

@supports (color: color-mix(in lab, red, red)) {
  .home-page__contact-action {
    background: color-mix(in srgb, var(--aj-glass-bg-dense) 64%, transparent);
  }
}

.home-page__contact-action {
  color: var(--aj-ink);
  text-align: left;
  cursor: pointer;
  transition: transform .18s, border-color .18s, background-color .18s, color .18s;
  box-shadow: inset 0 1px #ffffff14, inset 0 0 0 1px #0000000d;
}

.home-page__contact-action--primary {
  background: linear-gradient(180deg, var(--aj-accent), transparent), var(--aj-glass-bg-dense);
}

@supports (color: color-mix(in lab, red, red)) {
  .home-page__contact-action--primary {
    background: linear-gradient(180deg, color-mix(in srgb, var(--aj-accent) 12%, transparent), transparent), color-mix(in srgb, var(--aj-glass-bg-dense) 72%, transparent);
  }
}

.home-page__contact-action--primary {
  border-color: var(--aj-accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .home-page__contact-action--primary {
    border-color: color-mix(in srgb, var(--aj-accent) 38%, var(--aj-glass-border));
  }
}

.home-page__contact-action:hover {
  background: var(--aj-surface-hover);
  transform: translateY(-1px);
}

@supports (color: color-mix(in lab, red, red)) {
  .home-page__contact-action:hover {
    background: color-mix(in srgb, var(--aj-surface-hover) 64%, var(--aj-glass-bg-dense));
  }
}

.home-page__contact-action:hover {
  border-color: var(--aj-accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .home-page__contact-action:hover {
    border-color: color-mix(in srgb, var(--aj-accent) 28%, var(--aj-glass-border));
  }
}

.home-page__contact-action-icon {
  background: var(--aj-surface-scrim);
  border-radius: 14px;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .home-page__contact-action-icon {
    background: color-mix(in srgb, var(--aj-surface-scrim) 44%, transparent);
  }
}

.home-page__contact-action-icon {
  color: var(--aj-ink-soft);
}

@supports (color: color-mix(in lab, red, red)) {
  .home-page__contact-action-icon {
    color: color-mix(in srgb, var(--aj-ink-soft) 88%, white 12%);
  }
}

.home-page__contact-action-icon {
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  font-family: Material Icons;
  font-size: 22px;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
}

.home-page__contact-action-icon:before {
  display: block;
}

.home-page__contact-action-icon--mail:before {
  content: "mail";
}

.home-page__contact-action-icon--code:before {
  content: "code";
}

.home-page__contact-action-icon--article:before {
  content: "article";
}

.home-page__contact-action-icon--north:before {
  content: "north";
}

.home-page__contact-action-copy {
  gap: 4px;
  min-width: 0;
}

.home-page__contact-action-label {
  color: var(--aj-ink);
  font-size: 14px;
  font-weight: 740;
  line-height: 1.15;
}

.home-page__contact-action-text {
  color: var(--aj-ink-muted);
  font-size: 12px;
  line-height: 1.35;
}

.home-page__chip, .home-page__nav-link, .home-page__cta {
  border: 1px solid var(--aj-glass-border);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .home-page__chip, .home-page__nav-link, .home-page__cta {
    border: 1px solid color-mix(in srgb, var(--aj-glass-border) 24%, transparent);
  }
}

.home-page__chip, .home-page__nav-link, .home-page__cta {
  background: var(--aj-glass-bg-dense);
}

@supports (color: color-mix(in lab, red, red)) {
  .home-page__chip, .home-page__nav-link, .home-page__cta {
    background: color-mix(in srgb, var(--aj-glass-bg-dense) 76%, transparent);
  }
}

.home-page__chip, .home-page__nav-link, .home-page__cta {
  color: var(--aj-ink-soft);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  cursor: pointer;
  transition: transform .2s, border-color .2s, background-color .2s, color .2s;
  box-shadow: inset 0 1px #ffffff14;
}

.home-page__chip, .home-page__nav-link {
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
}

.home-page__cta {
  font-size: 13px;
  font-weight: 650;
}

.home-page__cta--primary {
  background: linear-gradient(180deg, var(--aj-accent), var(--aj-accent-soft));
}

@supports (color: color-mix(in lab, red, red)) {
  .home-page__cta--primary {
    background: linear-gradient(180deg, color-mix(in srgb, var(--aj-accent) 22%, white 78%), color-mix(in srgb, var(--aj-accent-soft) 34%, white 66%));
  }
}

.home-page__cta--primary {
  color: #1e231c;
  border-color: var(--aj-accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .home-page__cta--primary {
    border-color: color-mix(in srgb, var(--aj-accent) 42%, white 58%);
  }
}

.home-page__chip--icon {
  letter-spacing: 0;
  text-transform: none;
  width: 40px;
  padding: 0;
  font-size: 18px;
}

.home-page__chip--toggle {
  min-width: 52px;
}

.home-page__chip:hover, .home-page__nav-link:hover, .home-page__cta:hover {
  background: var(--aj-surface-hover);
  transform: translateY(-1px);
}

@supports (color: color-mix(in lab, red, red)) {
  .home-page__chip:hover, .home-page__nav-link:hover, .home-page__cta:hover {
    background: color-mix(in srgb, var(--aj-surface-hover) 74%, transparent);
  }
}

.home-page__chip:hover, .home-page__nav-link:hover, .home-page__cta:hover {
  border-color: var(--aj-accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .home-page__chip:hover, .home-page__nav-link:hover, .home-page__cta:hover {
    border-color: color-mix(in srgb, var(--aj-accent) 22%, var(--aj-glass-border));
  }
}

.home-page__chip:hover, .home-page__nav-link:hover, .home-page__cta:hover {
  color: var(--aj-ink);
}

.home-page__cta--primary:hover {
  background: linear-gradient(180deg, var(--aj-accent), var(--aj-accent-soft));
}

@supports (color: color-mix(in lab, red, red)) {
  .home-page__cta--primary:hover {
    background: linear-gradient(180deg, color-mix(in srgb, var(--aj-accent) 28%, white 72%), color-mix(in srgb, var(--aj-accent-soft) 40%, white 60%));
  }
}

.home-page__cta--primary:hover {
  color: #171b14;
}

@keyframes home-page-drift {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(2%, -3%, 0) scale(1.06);
  }
}

@keyframes home-page-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1180px) {
  .home-page__hero-grid, .home-page__section-grid, .home-page__contact-panel {
    grid-template-columns: 1fr;
  }

  .home-page__filmstrip, .home-page__story-grid, .home-page__reference-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .home-page__shell {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    margin: 10px auto;
    padding: 12px;
  }

  .home-page__topbar {
    border-radius: 24px;
    flex-direction: column;
    align-items: stretch;
    top: 10px;
  }

  .home-page__topbar-links, .home-page__topbar-actions, .home-page__hero-actions, .home-page__contact-actions {
    width: 100%;
  }

  .home-page__surface {
    border-radius: 26px;
    padding: 20px;
  }

  .home-page__main {
    gap: 42px;
  }

  .home-page__title {
    font-size: clamp(42px, 12vw, 72px);
    line-height: .96;
  }
}

@media (max-width: 640px) {
  .home-page__main {
    gap: 34px;
  }

  .home-page__section {
    height: max-content;
    min-height: max-content;
  }

  .home-page__filmstrip, .home-page__story-grid, .home-page__reference-grid {
    grid-template-columns: 1fr;
  }

  .home-page__nav-link, .home-page__chip, .home-page__cta {
    width: 100%;
  }

  .home-page__contact-actions {
    grid-template-columns: 1fr;
  }

  .home-page__contact-action {
    box-sizing: border-box;
    width: 100%;
    min-height: 76px;
  }

  .home-page__quote-text {
    font-size: 28px;
  }

  .home-page__section-title {
    font-size: 34px;
  }
}

.profile-page {
  width: 100%;
  height: 100%;
  color: var(--aj-ink);
  overflow: auto;
}

.profile-page__surface {
  background: none;
  min-height: 100%;
}

.profile-page__layout {
  box-sizing: border-box;
  border: 1px solid var(--aj-glass-border);
  gap: 48px;
  width: min(1220px, 100% - 48px);
  min-height: calc(100% - 36px);
  margin: 18px auto;
  padding: 54px 48px 48px;
}

@supports (color: color-mix(in lab, red, red)) {
  .profile-page__layout {
    border: 1px solid color-mix(in srgb, var(--aj-glass-border) 30%, transparent);
  }
}

.profile-page__layout {
  background: radial-gradient(circle at 18% 0%, var(--aj-accent), transparent 34%), linear-gradient(180deg, var(--aj-glass-bg-dense), var(--aj-glass-bg-medium));
  border-radius: 26px;
}

@supports (color: color-mix(in lab, red, red)) {
  .profile-page__layout {
    background: radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--aj-accent) 9%, transparent), transparent 34%), linear-gradient(180deg, color-mix(in srgb, var(--aj-glass-bg-dense) 82%, transparent), color-mix(in srgb, var(--aj-glass-bg-medium) 74%, transparent));
  }
}

.profile-page__layout {
  box-shadow: 0 22px 58px var(--aj-shadow-float), inset 0 1px 0 #ffffff1a, inset 0 0 0 1px #00000012;
}

@supports (color: color-mix(in lab, red, red)) {
  .profile-page__layout {
    box-shadow: 0 22px 58px color-mix(in srgb, var(--aj-shadow-float) 56%, transparent), inset 0 1px 0 #ffffff1a, inset 0 0 0 1px #00000012;
  }
}

.profile-page__layout {
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}

.profile-page__hero {
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  align-items: start;
  gap: 56px;
  display: grid;
}

.profile-page__hero-main, .profile-page__section-copy, .profile-page__rail-copy, .profile-page__item-copy, .profile-page__archive-copy {
  gap: 12px;
}

.profile-page__eyebrow, .profile-page__section-tag, .profile-page__rail-label, .profile-page__card-label, .profile-page__stage-label, .profile-page__item-index, .profile-page__archive-type {
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--aj-ink-faint);
  opacity: .86;
  font-family: Cascadia Code, Consolas, monospace;
  font-size: 12px;
}

.profile-page__eyebrow {
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  display: inline-flex;
}

.profile-page__eyebrow:before {
  content: "";
  background: var(--aj-glass-border);
  width: 56px;
  height: 1px;
}

@supports (color: color-mix(in lab, red, red)) {
  .profile-page__eyebrow:before {
    background: color-mix(in srgb, var(--aj-glass-border) 40%, transparent);
  }
}

.profile-page__title, .profile-page__section-title, .profile-page__card-title {
  letter-spacing: 0;
  color: var(--aj-ink);
  margin: 0;
  font-family: Iowan Old Style, Palatino Linotype, Book Antiqua, serif;
  font-weight: 400;
}

.profile-page__title {
  max-width: 780px;
  font-size: 82px;
  line-height: .95;
}

.profile-page__lead {
  max-width: 760px;
  color: var(--aj-ink-muted);
  font-size: 20px;
  line-height: 1.7;
}

.profile-page__actions {
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 14px;
}

.profile-page__button {
  border: 1px solid var(--aj-glass-border);
  min-height: 52px;
  padding: 0 22px;
}

@supports (color: color-mix(in lab, red, red)) {
  .profile-page__button {
    border: 1px solid color-mix(in srgb, var(--aj-glass-border) 34%, transparent);
  }
}

.profile-page__button {
  background: var(--aj-glass-bg-dense);
  border-radius: 14px;
}

@supports (color: color-mix(in lab, red, red)) {
  .profile-page__button {
    background: color-mix(in srgb, var(--aj-glass-bg-dense) 64%, transparent);
  }
}

.profile-page__button {
  color: var(--aj-ink);
  cursor: pointer;
  font-weight: 700;
  box-shadow: inset 0 1px #ffffff0f;
}

.profile-page__button:hover {
  background: var(--aj-surface-hover);
}

@supports (color: color-mix(in lab, red, red)) {
  .profile-page__button:hover {
    background: color-mix(in srgb, var(--aj-surface-hover) 74%, transparent);
  }
}

.profile-page__button:hover {
  border-color: var(--aj-accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .profile-page__button:hover {
    border-color: color-mix(in srgb, var(--aj-accent) 28%, var(--aj-glass-border));
  }
}

.profile-page__button--primary {
  background: var(--aj-accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .profile-page__button--primary {
    background: color-mix(in srgb, var(--aj-accent) 34%, var(--aj-glass-bg-dense));
  }
}

.profile-page__button--primary {
  color: var(--aj-ink);
  border-color: var(--aj-accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .profile-page__button--primary {
    border-color: color-mix(in srgb, var(--aj-accent) 44%, var(--aj-glass-border));
  }
}

.profile-page__button--primary:hover {
  background: var(--aj-accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .profile-page__button--primary:hover {
    background: color-mix(in srgb, var(--aj-accent) 46%, var(--aj-glass-bg-dense));
  }
}

.profile-page__button--primary:hover {
  border-color: var(--aj-accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .profile-page__button--primary:hover {
    border-color: color-mix(in srgb, var(--aj-accent) 58%, var(--aj-glass-border));
  }
}

.profile-page__rail {
  border-left: 1px solid var(--aj-glass-border);
  gap: 18px;
  padding: 26px 0 0 26px;
}

@supports (color: color-mix(in lab, red, red)) {
  .profile-page__rail {
    border-left: 1px solid color-mix(in srgb, var(--aj-glass-border) 34%, transparent);
  }
}

.profile-page__rail-item {
  border-top: 1px solid var(--aj-glass-border);
  gap: 14px;
  padding-top: 16px;
}

@supports (color: color-mix(in lab, red, red)) {
  .profile-page__rail-item {
    border-top: 1px solid color-mix(in srgb, var(--aj-glass-border) 18%, transparent);
  }
}

.profile-page__rail-item:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.profile-page__rail-index {
  letter-spacing: .1em;
  min-width: 42px;
  color: var(--aj-accent);
  font-family: Cascadia Code, Consolas, monospace;
  font-size: 12px;
}

.profile-page__rail-title, .profile-page__item-title, .profile-page__archive-title, .profile-page__fact-title {
  color: var(--aj-ink);
  font-size: 17px;
  font-weight: 700;
}

.profile-page__rail-text, .profile-page__section-text, .profile-page__paragraph, .profile-page__item-text, .profile-page__archive-text, .profile-page__fact-text {
  color: var(--aj-ink-muted);
  font-size: 15px;
  line-height: 1.65;
}

.profile-page__section {
  border-top: 1px solid var(--aj-glass-border);
  padding-top: 34px;
}

@supports (color: color-mix(in lab, red, red)) {
  .profile-page__section {
    border-top: 1px solid color-mix(in srgb, var(--aj-glass-border) 34%, transparent);
  }
}

.profile-page__section-head {
  grid-template-columns: minmax(180px, .38fr) minmax(0, 1fr);
  align-items: start;
  gap: 28px;
  margin-bottom: 30px;
  display: grid;
}

.profile-page__section-title {
  max-width: 820px;
  font-size: 46px;
  line-height: 1.05;
}

.profile-page__approach-grid, .profile-page__work-grid, .profile-page__about-grid, .profile-page__contact-grid {
  align-items: stretch;
  gap: 24px;
}

.profile-page__narrative-card, .profile-page__decision, .profile-page__about-card, .profile-page__facts, .profile-page__contact-card, .profile-page__principle, .profile-page__stage, .profile-page__item, .profile-page__archive-link {
  border: 1px solid var(--aj-glass-border);
}

@supports (color: color-mix(in lab, red, red)) {
  .profile-page__narrative-card, .profile-page__decision, .profile-page__about-card, .profile-page__facts, .profile-page__contact-card, .profile-page__principle, .profile-page__stage, .profile-page__item, .profile-page__archive-link {
    border: 1px solid color-mix(in srgb, var(--aj-glass-border) 30%, transparent);
  }
}

.profile-page__narrative-card, .profile-page__decision, .profile-page__about-card, .profile-page__facts, .profile-page__contact-card, .profile-page__principle, .profile-page__stage, .profile-page__item, .profile-page__archive-link {
  background: var(--aj-glass-bg-dense);
  border-radius: 14px;
}

@supports (color: color-mix(in lab, red, red)) {
  .profile-page__narrative-card, .profile-page__decision, .profile-page__about-card, .profile-page__facts, .profile-page__contact-card, .profile-page__principle, .profile-page__stage, .profile-page__item, .profile-page__archive-link {
    background: color-mix(in srgb, var(--aj-glass-bg-dense) 70%, transparent);
  }
}

.profile-page__narrative-card, .profile-page__decision, .profile-page__about-card, .profile-page__facts, .profile-page__contact-card, .profile-page__principle, .profile-page__stage, .profile-page__item, .profile-page__archive-link {
  box-shadow: 0 12px 30px var(--aj-shadow-panel), inset 0 1px 0 #ffffff14;
}

@supports (color: color-mix(in lab, red, red)) {
  .profile-page__narrative-card, .profile-page__decision, .profile-page__about-card, .profile-page__facts, .profile-page__contact-card, .profile-page__principle, .profile-page__stage, .profile-page__item, .profile-page__archive-link {
    box-shadow: 0 12px 30px color-mix(in srgb, var(--aj-shadow-panel) 26%, transparent), inset 0 1px 0 #ffffff14;
  }
}

.profile-page__narrative-card, .profile-page__decision, .profile-page__about-card, .profile-page__facts, .profile-page__contact-card, .profile-page__principle, .profile-page__stage, .profile-page__item, .profile-page__archive-link {
  backdrop-filter: blur(12px) saturate(170%);
  -webkit-backdrop-filter: blur(12px) saturate(170%);
}

.profile-page__narrative-card, .profile-page__decision, .profile-page__about-card, .profile-page__facts, .profile-page__contact-card {
  flex: 1 1 0;
  min-width: 0;
  padding: 28px;
}

.profile-page__principles, .profile-page__items, .profile-page__archive {
  flex: 1 1 0;
  gap: 16px;
  min-width: 0;
}

.profile-page__principle {
  gap: 10px;
  padding: 22px;
}

.profile-page__card-title {
  font-size: 23px;
  line-height: 1.12;
}

.profile-page__stages {
  align-items: stretch;
  gap: 16px;
}

.profile-page__stage {
  flex: 1 1 0;
  gap: 12px;
  min-width: 0;
  padding: 22px;
}

.profile-page__stage-label {
  border: 1px solid var(--aj-glass-border);
  border-radius: 999px;
  align-self: flex-start;
  padding: 4px 8px;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .profile-page__stage-label {
    border: 1px solid color-mix(in srgb, var(--aj-glass-border) 20%, transparent);
  }
}

.profile-page__stage-label {
  background: var(--aj-glass-bg-medium);
}

@supports (color: color-mix(in lab, red, red)) {
  .profile-page__stage-label {
    background: color-mix(in srgb, var(--aj-glass-bg-medium) 72%, transparent);
  }
}

.profile-page__stage--open {
  background: linear-gradient(180deg, var(--aj-accent), transparent), var(--aj-glass-bg-dense);
}

@supports (color: color-mix(in lab, red, red)) {
  .profile-page__stage--open {
    background: linear-gradient(180deg, color-mix(in srgb, var(--aj-accent) 8%, transparent), transparent), color-mix(in srgb, var(--aj-glass-bg-dense) 72%, transparent);
  }
}

.profile-page__stage--clarify {
  background: linear-gradient(180deg, var(--aj-ink-muted), transparent), var(--aj-glass-bg-dense);
}

@supports (color: color-mix(in lab, red, red)) {
  .profile-page__stage--clarify {
    background: linear-gradient(180deg, color-mix(in srgb, var(--aj-ink-muted) 8%, transparent), transparent), color-mix(in srgb, var(--aj-glass-bg-dense) 72%, transparent);
  }
}

.profile-page__stage--condense {
  background: linear-gradient(180deg, var(--aj-accent), transparent), var(--aj-glass-bg-dense);
}

@supports (color: color-mix(in lab, red, red)) {
  .profile-page__stage--condense {
    background: linear-gradient(180deg, color-mix(in srgb, var(--aj-accent) 12%, transparent), transparent), color-mix(in srgb, var(--aj-glass-bg-dense) 72%, transparent);
  }
}

.profile-page__stage--decide {
  background: linear-gradient(180deg, var(--aj-ink), transparent), var(--aj-glass-bg-dense);
}

@supports (color: color-mix(in lab, red, red)) {
  .profile-page__stage--decide {
    background: linear-gradient(180deg, color-mix(in srgb, var(--aj-ink) 8%, transparent), transparent), color-mix(in srgb, var(--aj-glass-bg-dense) 72%, transparent);
  }
}

.profile-page__stage--archive {
  background: linear-gradient(180deg, var(--aj-ink-faint), transparent), var(--aj-glass-bg-dense);
}

@supports (color: color-mix(in lab, red, red)) {
  .profile-page__stage--archive {
    background: linear-gradient(180deg, color-mix(in srgb, var(--aj-ink-faint) 9%, transparent), transparent), color-mix(in srgb, var(--aj-glass-bg-dense) 72%, transparent);
  }
}

.profile-page__item {
  gap: 18px;
  padding: 22px 24px;
}

.profile-page__item-index {
  min-width: 54px;
  color: var(--aj-accent);
}

.profile-page__decision, .profile-page__contact-card {
  background: linear-gradient(180deg, var(--aj-accent), transparent 72%), var(--aj-glass-bg-dense);
}

@supports (color: color-mix(in lab, red, red)) {
  .profile-page__decision, .profile-page__contact-card {
    background: linear-gradient(180deg, color-mix(in srgb, var(--aj-accent) 10%, transparent), transparent 72%), color-mix(in srgb, var(--aj-glass-bg-dense) 78%, transparent);
  }
}

.profile-page__decision, .profile-page__contact-card {
  border-color: var(--aj-accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .profile-page__decision, .profile-page__contact-card {
    border-color: color-mix(in srgb, var(--aj-accent) 30%, var(--aj-glass-border));
  }
}

.profile-page__about-grid > * {
  flex: 1 1 0;
}

.profile-page__about-card, .profile-page__facts {
  gap: 16px;
}

.profile-page__fact {
  border-top: 1px solid var(--aj-glass-border);
  gap: 5px;
  padding-top: 14px;
}

@supports (color: color-mix(in lab, red, red)) {
  .profile-page__fact {
    border-top: 1px solid color-mix(in srgb, var(--aj-glass-border) 18%, transparent);
  }
}

.profile-page__fact:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.profile-page__archive-link {
  cursor: pointer;
  grid-template-columns: minmax(120px, .28fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  display: grid;
}

.profile-page__archive-link:hover {
  background: var(--aj-surface-hover);
}

@supports (color: color-mix(in lab, red, red)) {
  .profile-page__archive-link:hover {
    background: color-mix(in srgb, var(--aj-surface-hover) 70%, var(--aj-glass-bg-dense));
  }
}

.profile-page__archive-link:hover {
  border-color: var(--aj-accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .profile-page__archive-link:hover {
    border-color: color-mix(in srgb, var(--aj-accent) 34%, var(--aj-glass-border));
  }
}

.profile-page__archive-arrow {
  color: var(--aj-accent);
  font-size: 20px;
}

.profile-page__contact-card {
  gap: 12px;
}

.profile-page__contact-card--quiet {
  background: var(--aj-glass-bg-dense);
}

@supports (color: color-mix(in lab, red, red)) {
  .profile-page__contact-card--quiet {
    background: color-mix(in srgb, var(--aj-glass-bg-dense) 70%, transparent);
  }
}

.profile-page__mail {
  color: var(--aj-accent);
  cursor: pointer;
  background: none;
  border: 0;
  align-self: flex-start;
  padding: 0;
  font-family: Iowan Old Style, Palatino Linotype, Book Antiqua, serif;
  font-size: 36px;
}

@media (max-width: 1100px) {
  .profile-page__hero, .profile-page__section-head {
    grid-template-columns: 1fr;
  }

  .profile-page__approach-grid, .profile-page__work-grid, .profile-page__about-grid, .profile-page__contact-grid, .profile-page__stages {
    flex-direction: column;
  }
}

@media (max-width: 760px) {
  .profile-page__layout {
    background: var(--aj-glass-bg-mobile);
    border-color: var(--aj-glass-border-mobile);
    border-radius: 20px;
    gap: 34px;
    width: calc(100% - 16px);
    min-height: calc(100% - 20px);
    margin: 10px auto;
    padding: 28px 18px;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .profile-page__layout {
      border-color: color-mix(in srgb, var(--aj-glass-border-mobile) 84%, transparent);
    }
  }

  .profile-page__layout {
    box-shadow: 0 18px 40px var(--aj-glass-shadow-mobile), inset 0 1px 0 #ffffff14, inset 0 0 0 1px #0000000f;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .profile-page__layout {
      box-shadow: 0 18px 40px color-mix(in srgb, var(--aj-glass-shadow-mobile) 62%, transparent), inset 0 1px 0 #ffffff14, inset 0 0 0 1px #0000000f;
    }
  }

  .profile-page__hero {
    gap: 36px;
  }

  .profile-page__title {
    font-size: 44px;
    line-height: 1.02;
  }

  .profile-page__lead {
    font-size: 17px;
  }

  .profile-page__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .profile-page__button {
    width: 100%;
  }

  .profile-page__narrative-card, .profile-page__decision, .profile-page__about-card, .profile-page__facts, .profile-page__contact-card, .profile-page__principle, .profile-page__stage, .profile-page__item, .profile-page__archive-link {
    background: var(--aj-glass-bg-mobile);
    border-color: var(--aj-glass-border-mobile);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .profile-page__narrative-card, .profile-page__decision, .profile-page__about-card, .profile-page__facts, .profile-page__contact-card, .profile-page__principle, .profile-page__stage, .profile-page__item, .profile-page__archive-link {
      border-color: color-mix(in srgb, var(--aj-glass-border-mobile) 84%, transparent);
    }
  }

  .profile-page__rail {
    padding-left: 18px;
  }

  .profile-page__section-title {
    font-size: 32px;
  }

  .profile-page__archive-link {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .profile-page__mail {
    font-size: 28px;
  }
}

.app-shell-content:has(.blog-posts-page), .app-shell-content:has(.blog-post-page), .app-shell-content:has(.blog-post-edit-page) {
  width: 100%;
  min-width: 0;
}

.app-shell-router-host > .jfx-viewport > .blog-post-page {
  flex: none;
  min-height: 0;
  height: auto !important;
}

.blog-posts-page, .blog-post-page, .blog-post-edit-page {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  color: var(--aj-ink);
  overflow: hidden;
}

.blog-post-page {
  height: auto;
  min-height: 100%;
  overflow: auto;
}

.blog-posts-page__layout, .blog-post-page__layout, .blog-post-edit-page__layout {
  box-sizing: border-box;
  gap: 14px;
  width: min(1180px, 100% - 48px);
  height: calc(100% - 36px);
  min-height: 0;
  max-height: calc(100% - 36px);
  margin: 18px auto;
  padding: 0;
  overflow: hidden;
}

.blog-post-page__layout {
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
}

div.vbox.blog-post-page__layout {
  height: auto;
}

.blog-posts-page__hero {
  border-bottom: 1px solid var(--aj-glass-border);
  gap: 7px;
  max-height: 196px;
  padding: 24px 28px 18px;
  flex: none !important;
  height: auto !important;
  min-height: 0 !important;
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-posts-page__hero {
    border-bottom: 1px solid color-mix(in srgb, var(--aj-glass-border) 18%, transparent);
  }
}

.blog-posts-page__eyebrow, .blog-post-page__eyebrow {
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--aj-ink-faint);
  opacity: .76;
  font-size: 10px;
}

.blog-posts-page__title {
  max-width: 820px;
  color: var(--aj-ink);
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 620;
  line-height: .96;
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-posts-page__title {
    color: color-mix(in srgb, var(--aj-ink) 94%, white 6%);
  }
}

.blog-posts-page__subtitle {
  max-width: 660px;
  color: var(--aj-ink-muted);
  font-size: 14px;
  line-height: 1.65;
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-posts-page__subtitle {
    color: color-mix(in srgb, var(--aj-ink-muted) 94%, white 6%);
  }
}

.blog-posts-page__panel, .blog-post-page__article, .blog-post-edit-page__panel {
  border: 1px solid var(--aj-glass-border);
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-posts-page__panel, .blog-post-page__article, .blog-post-edit-page__panel {
    border: 1px solid color-mix(in srgb, var(--aj-glass-border) 28%, transparent);
  }
}

.blog-posts-page__panel, .blog-post-page__article, .blog-post-edit-page__panel {
  box-shadow: 0 10px 28px var(--aj-shadow-panel), inset 0 1px 0 #ffffff1f, inset 0 0 0 1px #00000014;
  border-radius: 22px;
  background: var(--aj-glass-bg) !important;
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-posts-page__panel, .blog-post-page__article, .blog-post-edit-page__panel {
    box-shadow: 0 10px 28px color-mix(in srgb, var(--aj-shadow-panel) 32%, transparent), inset 0 1px 0 #ffffff1f, inset 0 0 0 1px #00000014;
  }
}

.blog-posts-page__panel, .blog-post-page__article, .blog-post-edit-page__panel {
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
}

.blog-posts-page__layout, .blog-post-page__layout, .blog-post-edit-page__layout {
  border: 1px solid var(--aj-glass-border);
  flex-direction: column;
  justify-content: flex-start;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-posts-page__layout, .blog-post-page__layout, .blog-post-edit-page__layout {
    border: 1px solid color-mix(in srgb, var(--aj-glass-border) 30%, transparent);
  }
}

.blog-posts-page__layout, .blog-post-page__layout, .blog-post-edit-page__layout {
  border-radius: 26px;
  background: radial-gradient(circle at 18% 0%, var(--aj-accent), transparent 34%), linear-gradient(180deg, var(--aj-glass-bg-dense), var(--aj-glass-bg-medium)) !important;
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-posts-page__layout, .blog-post-page__layout, .blog-post-edit-page__layout {
    background: radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--aj-accent) 9%, transparent), transparent 34%), linear-gradient(180deg, color-mix(in srgb, var(--aj-glass-bg-dense) 82%, transparent), color-mix(in srgb, var(--aj-glass-bg-medium) 74%, transparent)) !important;
  }
}

.blog-posts-page__layout, .blog-post-page__layout, .blog-post-edit-page__layout {
  box-shadow: 0 22px 58px var(--aj-shadow-float), inset 0 1px 0 #ffffff1a, inset 0 0 0 1px #00000012;
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-posts-page__layout, .blog-post-page__layout, .blog-post-edit-page__layout {
    box-shadow: 0 22px 58px color-mix(in srgb, var(--aj-shadow-float) 56%, transparent), inset 0 1px 0 #ffffff1a, inset 0 0 0 1px #00000012;
  }
}

.blog-posts-page__layout, .blog-post-page__layout, .blog-post-edit-page__layout {
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}

.blog-posts-page__panel {
  border-radius: 20px;
  flex-direction: column;
  gap: 16px;
  min-height: 220px;
  margin: 18px;
  padding: 16px;
  display: flex;
  background: var(--aj-glass-bg-dense) !important;
  flex: 1 1 0 !important;
  height: auto !important;
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-posts-page__panel {
    background: color-mix(in srgb, var(--aj-glass-bg-dense) 54%, transparent) !important;
  }
}

.blog-posts-page__panel {
  box-shadow: inset 0 1px #ffffff12, inset 0 0 0 1px #0000000d;
}

.blog-posts-page__toolbar {
  flex: none;
  align-items: center;
  gap: 12px;
}

.blog-posts-page__search {
  border: 1px solid var(--aj-glass-border);
  flex: auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-posts-page__search {
    border: 1px solid color-mix(in srgb, var(--aj-glass-border) 20%, transparent);
  }
}

.blog-posts-page__search {
  border-radius: 16px;
  background: var(--aj-glass-bg-dense) !important;
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-posts-page__search {
    background: color-mix(in srgb, var(--aj-glass-bg-dense) 72%, transparent) !important;
  }
}

.blog-posts-page__search .material-icons {
  opacity: .62;
  font-size: 16px;
}

.blog-posts-page__search input {
  width: auto;
  box-shadow: none;
  border: none;
  flex: auto;
  font-size: 14px;
  background: none !important;
}

.blog-posts-page__search input:focus {
  outline: none;
}

.blog-posts-page__refresh, .blog-posts-page__sync, .blog-posts-page__create, .blog-post-page__back, .blog-post-page__edit {
  border: 1px solid var(--aj-glass-border);
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-posts-page__refresh, .blog-posts-page__sync, .blog-posts-page__create, .blog-post-page__back, .blog-post-page__edit {
    border: 1px solid color-mix(in srgb, var(--aj-glass-border) 26%, transparent);
  }
}

.blog-posts-page__refresh, .blog-posts-page__sync, .blog-posts-page__create, .blog-post-page__back, .blog-post-page__edit {
  background: var(--aj-glass-bg-dense);
  border-radius: 999px;
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-posts-page__refresh, .blog-posts-page__sync, .blog-posts-page__create, .blog-post-page__back, .blog-post-page__edit {
    background: color-mix(in srgb, var(--aj-glass-bg-dense) 82%, transparent);
  }
}

.blog-posts-page__refresh, .blog-posts-page__sync, .blog-posts-page__create, .blog-post-page__back, .blog-post-page__edit {
  color: var(--aj-ink);
  cursor: pointer;
  padding: 10px 16px;
}

.blog-posts-page__create, .blog-post-page__edit, .blog-post-edit-page__publish {
  background: var(--aj-accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-posts-page__create, .blog-post-page__edit, .blog-post-edit-page__publish {
    background: color-mix(in srgb, var(--aj-accent) 26%, var(--aj-glass-bg-dense));
  }
}

.blog-posts-page__create, .blog-post-page__edit, .blog-post-edit-page__publish {
  border-color: var(--aj-accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-posts-page__create, .blog-post-page__edit, .blog-post-edit-page__publish {
    border-color: color-mix(in srgb, var(--aj-accent) 40%, var(--aj-glass-border));
  }
}

.blog-posts-page__toolbar {
  flex-wrap: wrap;
}

.blog-posts-page__grid-shell {
  flex: auto;
  min-height: 0;
  padding-top: 2px;
  padding-right: 2px;
  overflow: hidden;
  height: auto !important;
}

.blog-posts-page__grid-shell > .jfx-data-grid {
  width: 100%;
  height: 100%;
}

.blog-posts-page__grid-placeholder {
  border: 1px dashed var(--aj-glass-border);
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(100%, 460px);
  margin: auto;
  padding: 28px 24px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-posts-page__grid-placeholder {
    border: 1px dashed color-mix(in srgb, var(--aj-glass-border) 28%, transparent);
  }
}

.blog-posts-page__grid-placeholder {
  background: var(--aj-glass-bg-medium);
  border-radius: 18px;
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-posts-page__grid-placeholder {
    background: color-mix(in srgb, var(--aj-glass-bg-medium) 54%, transparent);
  }
}

.blog-posts-page__grid-placeholder {
  text-align: center;
}

.blog-posts-page__grid-placeholder-title {
  color: var(--aj-ink);
  font-size: 18px;
  font-weight: 600;
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-posts-page__grid-placeholder-title {
    color: color-mix(in srgb, var(--aj-ink) 94%, white 6%);
  }
}

.blog-posts-page__grid-placeholder-copy {
  max-width: 34ch;
  color: var(--aj-ink-muted);
  font-size: 14px;
  line-height: 1.6;
}

.blog-posts-page__card {
  border: 1px solid var(--aj-glass-border);
  height: 100%;
  min-height: 188px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-posts-page__card {
    border: 1px solid color-mix(in srgb, var(--aj-glass-border) 22%, transparent);
  }
}

.blog-posts-page__card {
  background: var(--aj-glass-bg-medium);
  border-radius: 18px;
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-posts-page__card {
    background: color-mix(in srgb, var(--aj-glass-bg-medium) 78%, transparent);
  }
}

.blog-posts-page__card {
  cursor: pointer;
  transition: background .16s, border-color .16s, transform .16s;
}

.blog-posts-page__card--placeholder {
  cursor: default;
}

.blog-posts-page__card:hover {
  border-color: var(--aj-accent);
  transform: translateY(-1px);
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-posts-page__card:hover {
    border-color: color-mix(in srgb, var(--aj-accent) 34%, var(--aj-glass-border));
  }
}

.blog-posts-page__card:hover {
  background: var(--aj-accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-posts-page__card:hover {
    background: color-mix(in srgb, var(--aj-accent) 9%, var(--aj-glass-bg-medium));
  }
}

.blog-posts-page__card--placeholder:hover {
  border-color: var(--aj-glass-border);
  transform: none;
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-posts-page__card--placeholder:hover {
    border-color: color-mix(in srgb, var(--aj-glass-border) 22%, transparent);
  }
}

.blog-posts-page__card--placeholder:hover {
  background: var(--aj-glass-bg-medium);
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-posts-page__card--placeholder:hover {
    background: color-mix(in srgb, var(--aj-glass-bg-medium) 78%, transparent);
  }
}

.blog-posts-page__card-copy {
  gap: 12px;
  width: 100%;
  padding: 16px;
}

.blog-posts-page__meta, .blog-posts-page__card-footer, .blog-post-page__meta {
  flex-wrap: wrap;
  flex: none;
  align-items: center;
  gap: 10px;
}

.blog-posts-page__status, .blog-post-page__meta span {
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--aj-ink-faint);
  font-size: 11px;
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-posts-page__status, .blog-post-page__meta span {
    color: color-mix(in srgb, var(--aj-ink-faint) 92%, black 8%);
  }
}

.blog-posts-page__date, .blog-posts-page__author {
  color: var(--aj-ink-muted);
  font-size: 12px;
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-posts-page__date, .blog-posts-page__author {
    color: color-mix(in srgb, var(--aj-ink-muted) 94%, white 6%);
  }
}

.blog-posts-page__card-title {
  color: var(--aj-ink);
  font-size: 22px;
  font-weight: 620;
  line-height: 1.08;
}

.blog-posts-page__card-teaser {
  color: var(--aj-ink-muted);
  flex: auto;
  font-size: 14px;
  line-height: 1.6;
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-posts-page__card-teaser {
    color: color-mix(in srgb, var(--aj-ink-muted) 94%, white 6%);
  }
}

.blog-posts-page__arrow {
  opacity: .72;
  margin-left: auto;
  font-size: 18px;
}

.blog-post-page__toolbar {
  flex: none;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 18px 18px 0;
}

.blog-post-page__back {
  align-self: flex-start;
}

.blog-post-page__edit {
  margin-left: auto;
}

.blog-post-page__article {
  border-radius: 20px;
  flex-direction: column;
  flex: none;
  width: auto;
  min-height: auto;
  margin: 0 18px 18px;
  padding: 0;
  display: flex;
  overflow: visible;
  background: var(--aj-glass-bg-dense) !important;
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-post-page__article {
    background: color-mix(in srgb, var(--aj-glass-bg-dense) 54%, transparent) !important;
  }
}

.blog-post-page__article {
  box-shadow: inset 0 1px #ffffff12, inset 0 0 0 1px #0000000d;
}

.blog-post-page__header {
  border-bottom: 1px solid var(--aj-glass-border);
  flex: none;
  gap: 14px;
  padding: 28px 30px 24px;
  height: auto !important;
  min-height: 0 !important;
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-post-page__header {
    border-bottom: 1px solid color-mix(in srgb, var(--aj-glass-border) 20%, transparent);
  }
}

.blog-post-page__title {
  max-width: 840px;
  font-size: clamp(34px, 5vw, 64px);
  font-weight: 630;
  line-height: .96;
}

.blog-post-page__teaser {
  max-width: 720px;
  color: var(--aj-ink-muted);
  font-size: 17px;
  line-height: 1.7;
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-post-page__teaser {
    color: color-mix(in srgb, var(--aj-ink-muted) 94%, white 6%);
  }
}

.blog-post-page__content {
  min-height: auto;
  color: var(--aj-ink);
  flex: none;
  padding: 28px 30px 34px;
  font-size: 17px;
  line-height: 1.82;
  overflow: visible;
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-post-page__content {
    color: color-mix(in srgb, var(--aj-ink) 92%, white 8%);
  }
}

.blog-post-page__readonly-editor, .blog-post-edit-page__editor {
  width: 100%;
  min-height: 320px;
}

.blog-post-page__readonly-editor {
  min-height: 0;
  overflow: visible;
}

.blog-comment-thread {
  border-top: 1px solid var(--aj-glass-border);
  margin-top: 30px;
  padding-top: 22px;
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-comment-thread {
    border-top: 1px solid color-mix(in srgb, var(--aj-glass-border) 22%, transparent);
  }
}

.blog-comment-thread__bar, .blog-comment-thread__actions, .blog-comment-thread__header-row {
  align-items: center;
  gap: 10px;
}

.blog-comment-thread__count, .blog-comment-thread__primary, .blog-comment-thread__actions button {
  border: 1px solid var(--aj-glass-border);
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-comment-thread__count, .blog-comment-thread__primary, .blog-comment-thread__actions button {
    border: 1px solid color-mix(in srgb, var(--aj-glass-border) 26%, transparent);
  }
}

.blog-comment-thread__count, .blog-comment-thread__primary, .blog-comment-thread__actions button {
  background: var(--aj-glass-bg-dense);
  border-radius: 999px;
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-comment-thread__count, .blog-comment-thread__primary, .blog-comment-thread__actions button {
    background: color-mix(in srgb, var(--aj-glass-bg-dense) 82%, transparent);
  }
}

.blog-comment-thread__count, .blog-comment-thread__primary, .blog-comment-thread__actions button {
  color: var(--aj-ink);
  cursor: pointer;
  padding: 9px 14px;
}

.blog-comment-thread__count {
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

.blog-comment-thread__primary {
  background: var(--aj-accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-comment-thread__primary {
    background: color-mix(in srgb, var(--aj-accent) 24%, var(--aj-glass-bg-dense));
  }
}

.blog-comment-thread__primary {
  border-color: var(--aj-accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-comment-thread__primary {
    border-color: color-mix(in srgb, var(--aj-accent) 38%, var(--aj-glass-border));
  }
}

.blog-comment-thread__body {
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
  display: flex;
}

.blog-comment-thread__list, .blog-comment-thread__card-body, .blog-comment-thread__replies {
  gap: 12px;
}

.blog-comment-thread__muted {
  color: var(--aj-ink-muted);
  font-size: 13px;
}

.blog-comment-thread__card {
  border: 1px solid var(--aj-glass-border);
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-comment-thread__card {
    border: 1px solid color-mix(in srgb, var(--aj-glass-border) 22%, transparent);
  }
}

.blog-comment-thread__card {
  background: var(--aj-glass-bg-medium);
  border-radius: 18px;
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-comment-thread__card {
    background: color-mix(in srgb, var(--aj-glass-bg-medium) 74%, transparent);
  }
}

.blog-comment-thread__card {
  padding: 14px;
}

.blog-comment-thread__replies {
  padding-left: 24px;
}

.blog-comment-thread__replies .blog-comment-thread__card {
  background: var(--aj-glass-bg-dense);
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-comment-thread__replies .blog-comment-thread__card {
    background: color-mix(in srgb, var(--aj-glass-bg-dense) 66%, transparent);
  }
}

.blog-comment-thread__header {
  width: 100%;
}

.blog-comment-thread__avatar {
  object-fit: cover;
  border-radius: 50%;
  width: 34px;
  height: 34px;
}

.blog-comment-thread__avatar--fallback {
  color: var(--aj-ink-faint);
  justify-content: center;
  align-items: center;
  font-size: 34px;
  display: inline-flex;
}

.blog-comment-thread__meta {
  gap: 2px;
}

.blog-comment-thread__name {
  color: var(--aj-ink);
  font-size: 13px;
  font-weight: 700;
}

.blog-comment-thread__timestamp {
  color: var(--aj-ink-muted);
  font-size: 12px;
}

.blog-comment-thread__icon-action {
  color: var(--aj-ink-muted);
  cursor: pointer;
  background: none;
  border: none;
  padding: 6px;
  font-size: 19px;
}

.blog-comment-thread__editor {
  min-height: 120px;
}

.blog-comment-thread__editor.jfx-editor-host, .blog-comment-thread__editor .jfx-editor__surface, .blog-comment-thread__editor .jfx-editor__surface-wrap {
  background: none !important;
}

.blog-post-page__readonly-editor.jfx-editor-host, .blog-post-edit-page__editor.jfx-editor-host {
  border-color: var(--aj-glass-border);
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-post-page__readonly-editor.jfx-editor-host, .blog-post-edit-page__editor.jfx-editor-host {
    border-color: color-mix(in srgb, var(--aj-glass-border) 20%, transparent);
  }
}

.blog-post-page__readonly-editor.jfx-editor-host, .blog-post-edit-page__editor.jfx-editor-host, .blog-post-edit-page__editor .jfx-editor__toolbar, .blog-post-edit-page__editor .lexical-ribbon-wrapper, .blog-post-page__readonly-editor .jfx-editor-readonly, .blog-post-page__readonly-editor .jfx-editor__surface, .blog-post-edit-page__editor .jfx-editor__surface {
  background: none !important;
}

.blog-post-edit-page__editor .jfx-editor__surface-wrap {
  min-height: 280px;
}

.blog-post-edit-page__editor .jfx-editor__preview, .blog-post-edit-page__editor .jfx-editor__live-root {
  box-sizing: border-box;
  min-height: 280px;
  padding: 18px;
}

.blog-post-edit-page__editor .jfx-editor__preview {
  pointer-events: none;
  white-space: pre-wrap;
  color: inherit;
  transition: opacity .12s;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.blog-post-edit-page__editor .jfx-editor__preview.is-hidden {
  opacity: 0;
}

.blog-post-edit-page__editor .jfx-editor__live-root {
  opacity: 0;
  position: relative;
}

.blog-post-edit-page__editor .jfx-editor__surface {
  min-height: 280px;
}

.blog-post-edit-page__topbar {
  flex: none;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 18px 18px 0;
}

.blog-post-edit-page__panel {
  border-radius: 20px;
  flex-direction: column;
  flex: 1 1 0;
  width: auto;
  min-height: 0;
  margin: 0 18px 18px;
  display: flex;
  overflow: hidden;
  background: var(--aj-glass-bg-dense) !important;
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-post-edit-page__panel {
    background: color-mix(in srgb, var(--aj-glass-bg-dense) 54%, transparent) !important;
  }
}

.blog-post-edit-page__panel {
  box-shadow: inset 0 1px #ffffff12, inset 0 0 0 1px #0000000d;
}

.blog-post-edit-page__form, .blog-post-edit-page__content {
  width: 100%;
  min-height: 0;
}

.blog-post-edit-page__form {
  flex: auto;
  min-height: 0;
  display: flex;
}

.blog-post-edit-page__content {
  box-sizing: border-box;
  flex: auto;
  gap: 16px;
  padding: 28px;
  overflow: auto;
}

.blog-post-edit-page__header {
  gap: 8px;
  padding-bottom: 10px;
}

.blog-post-edit-page__title {
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 620;
  line-height: 1;
}

.blog-post-edit-page__subtitle {
  color: var(--aj-ink-muted);
  font-size: 14px;
  line-height: 1.55;
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-post-edit-page__subtitle {
    color: color-mix(in srgb, var(--aj-ink-muted) 94%, white 6%);
  }
}

.blog-post-edit-page__locale-row {
  border: 1px solid var(--aj-glass-border);
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding: 4px;
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-post-edit-page__locale-row {
    border: 1px solid color-mix(in srgb, var(--aj-glass-border) 26%, transparent);
  }
}

.blog-post-edit-page__locale-row {
  background: var(--aj-glass-bg-dense);
  border-radius: 999px;
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-post-edit-page__locale-row {
    background: color-mix(in srgb, var(--aj-glass-bg-dense) 70%, transparent);
  }
}

.blog-post-edit-page__locale-row {
  box-shadow: inset 0 1px #ffffff14, inset 0 0 0 1px #0000000d;
}

.blog-post-edit-page__locale {
  min-width: 52px;
  color: var(--aj-ink-muted);
  background: none;
  border: 1px solid #0000;
  border-radius: 999px;
  padding: 9px 14px;
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-post-edit-page__locale {
    color: color-mix(in srgb, var(--aj-ink-muted) 90%, white 10%);
  }
}

.blog-post-edit-page__locale {
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  transition: background .14s, border-color .14s, color .14s, box-shadow .14s, transform .14s;
}

.blog-post-edit-page__locale:hover {
  background: var(--aj-accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-post-edit-page__locale:hover {
    background: color-mix(in srgb, var(--aj-accent) 10%, transparent);
  }
}

.blog-post-edit-page__locale:hover {
  border-color: var(--aj-accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-post-edit-page__locale:hover {
    border-color: color-mix(in srgb, var(--aj-accent) 24%, transparent);
  }
}

.blog-post-edit-page__locale:hover {
  color: var(--aj-ink);
}

.blog-post-edit-page__locale:focus-visible {
  border-color: var(--aj-accent);
  outline: none;
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-post-edit-page__locale:focus-visible {
    border-color: color-mix(in srgb, var(--aj-accent) 44%, white 10%);
  }
}

.blog-post-edit-page__locale:focus-visible {
  box-shadow: 0 0 0 3px var(--aj-accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-post-edit-page__locale:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--aj-accent) 20%, transparent);
  }
}

.blog-post-edit-page__locale:focus-visible {
  color: var(--aj-ink);
}

.blog-post-edit-page__locale--active {
  background: var(--aj-accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-post-edit-page__locale--active {
    background: color-mix(in srgb, var(--aj-accent) 30%, var(--aj-glass-bg-dense));
  }
}

.blog-post-edit-page__locale--active {
  border-color: var(--aj-accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-post-edit-page__locale--active {
    border-color: color-mix(in srgb, var(--aj-accent) 52%, var(--aj-glass-border));
  }
}

.blog-post-edit-page__locale--active {
  color: var(--aj-ink);
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-post-edit-page__locale--active {
    color: color-mix(in srgb, var(--aj-ink) 96%, white 4%);
  }
}

.blog-post-edit-page__locale--active {
  box-shadow: 0 8px 20px var(--aj-accent), inset 0 1px 0 #ffffff1a;
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-post-edit-page__locale--active {
    box-shadow: 0 8px 20px color-mix(in srgb, var(--aj-accent) 16%, transparent), inset 0 1px 0 #ffffff1a;
  }
}

.blog-post-edit-page__locale--active:hover {
  background: var(--aj-accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-post-edit-page__locale--active:hover {
    background: color-mix(in srgb, var(--aj-accent) 34%, var(--aj-glass-bg-dense));
  }
}

.blog-post-edit-page__locale--active:hover {
  border-color: var(--aj-accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-post-edit-page__locale--active:hover {
    border-color: color-mix(in srgb, var(--aj-accent) 58%, var(--aj-glass-border));
  }
}

.blog-post-edit-page__input {
  box-sizing: border-box;
  width: 100%;
}

.blog-post-edit-page__status-row {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
}

.blog-post-edit-page__save, .blog-post-edit-page__publish {
  border: 1px solid var(--aj-glass-border);
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-post-edit-page__save, .blog-post-edit-page__publish {
    border: 1px solid color-mix(in srgb, var(--aj-glass-border) 26%, transparent);
  }
}

.blog-post-edit-page__save, .blog-post-edit-page__publish {
  color: var(--aj-ink);
  cursor: pointer;
  border-radius: 999px;
  padding: 10px 16px;
}

.blog-post-edit-page__save {
  background: var(--aj-glass-bg-dense);
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-post-edit-page__save {
    background: color-mix(in srgb, var(--aj-glass-bg-dense) 82%, transparent);
  }
}

@media (max-width: 760px) {
  .blog-posts-page__layout, .blog-post-page__layout, .blog-post-edit-page__layout {
    border-color: var(--aj-glass-border-mobile);
    border-radius: 20px;
    width: calc(100% - 16px);
    height: calc(100% - 20px);
    max-height: calc(100% - 20px);
    margin: 10px auto;
    padding: 0;
    background: var(--aj-glass-bg-mobile) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .blog-posts-page__layout, .blog-post-page__layout, .blog-post-edit-page__layout {
      border-color: color-mix(in srgb, var(--aj-glass-border-mobile) 84%, transparent);
    }
  }

  .blog-posts-page__layout, .blog-post-page__layout, .blog-post-edit-page__layout {
    box-shadow: 0 18px 40px var(--aj-glass-shadow-mobile), inset 0 1px 0 #ffffff14, inset 0 0 0 1px #0000000f;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .blog-posts-page__layout, .blog-post-page__layout, .blog-post-edit-page__layout {
      box-shadow: 0 18px 40px color-mix(in srgb, var(--aj-glass-shadow-mobile) 62%, transparent), inset 0 1px 0 #ffffff14, inset 0 0 0 1px #0000000f;
    }
  }

  .blog-post-page__layout {
    height: auto;
    min-height: 0;
    max-height: none;
  }

  .blog-posts-page__hero {
    padding: 20px 16px 16px;
  }

  .blog-posts-page__toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .blog-posts-page__refresh, .blog-posts-page__sync, .blog-posts-page__create {
    width: 100%;
  }

  .blog-posts-page__panel, .blog-post-page__article, .blog-post-edit-page__panel {
    border-color: var(--aj-glass-border-mobile);
    border-radius: 18px;
    background: var(--aj-glass-bg-mobile) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .blog-posts-page__panel, .blog-post-page__article, .blog-post-edit-page__panel {
      border-color: color-mix(in srgb, var(--aj-glass-border-mobile) 84%, transparent);
    }
  }

  .blog-posts-page__panel, .blog-post-page__article, .blog-post-edit-page__panel {
    box-shadow: 0 18px 40px var(--aj-glass-shadow-mobile), inset 0 1px 0 #ffffff14, inset 0 0 0 1px #0000000f;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .blog-posts-page__panel, .blog-post-page__article, .blog-post-edit-page__panel {
      box-shadow: 0 18px 40px color-mix(in srgb, var(--aj-glass-shadow-mobile) 62%, transparent), inset 0 1px 0 #ffffff14, inset 0 0 0 1px #0000000f;
    }
  }

  .blog-posts-page__panel {
    margin: 0 12px 12px;
    padding: 12px;
  }

  .blog-post-page__article {
    margin: 0 12px 12px;
    padding: 0;
  }

  .blog-post-page__toolbar, .blog-post-edit-page__topbar {
    flex-wrap: wrap;
    margin: 12px 12px 0;
  }

  .blog-post-page__back, .blog-post-page__edit {
    flex: auto;
  }

  .blog-post-page__header {
    padding: 22px 18px 20px;
  }

  .blog-post-page__content {
    padding: 22px 18px 28px;
  }

  .blog-post-edit-page__content {
    padding: 22px 16px;
  }

  .blog-post-edit-page__panel {
    margin: 0 12px 12px;
  }

  .blog-post-edit-page__locale-row {
    justify-content: space-between;
    width: 100%;
  }

  .blog-post-edit-page__locale {
    flex: 1 1 0;
    min-width: 0;
  }
}

.user-page {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  color: var(--aj-ink);
  overflow: hidden;
}

.user-page .user-page__surface, .user-page .user-page-form, .user-page .user-page__layout {
  width: 100%;
  height: 100%;
}

.user-page .user-page__surface {
  box-sizing: border-box;
  padding: 18px 24px;
}

.user-page .user-page-form {
  overflow: hidden;
}

.user-page .user-page__layout {
  box-sizing: border-box;
  width: min(1180px, 100% - 48px);
  height: calc(100% - 36px);
  min-height: 0;
  max-height: calc(100% - 36px);
  margin: 18px auto;
  padding: 0;
  overflow: hidden;
}

.user-page .user-page__shell {
  box-sizing: border-box;
  border: 1px solid var(--aj-glass-border);
  min-height: 0;
  padding: 24px 28px 18px;
}

@supports (color: color-mix(in lab, red, red)) {
  .user-page .user-page__shell {
    border: 1px solid color-mix(in srgb, var(--aj-glass-border) 58%, transparent);
  }
}

.user-page .user-page__shell {
  background: radial-gradient(circle at 18% 0%, var(--aj-accent), transparent 34%), radial-gradient(circle at 82% 16%, #ffffff17, transparent 28%), linear-gradient(180deg, var(--aj-glass-bg), var(--aj-glass-bg-medium));
  border-radius: 30px;
  flex-direction: column;
  gap: 18px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .user-page .user-page__shell {
    background: radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--aj-accent) 14%, transparent), transparent 34%), radial-gradient(circle at 82% 16%, #ffffff17, transparent 28%), linear-gradient(180deg, color-mix(in srgb, var(--aj-glass-bg) 94%, transparent), color-mix(in srgb, var(--aj-glass-bg-medium) 84%, transparent));
  }
}

.user-page .user-page__shell {
  box-shadow: 0 30px 70px var(--aj-shadow-float), inset 0 1px 0 #ffffff29, inset 0 0 0 1px #00000012;
}

@supports (color: color-mix(in lab, red, red)) {
  .user-page .user-page__shell {
    box-shadow: 0 30px 70px color-mix(in srgb, var(--aj-shadow-float) 64%, transparent), inset 0 1px 0 #ffffff29, inset 0 0 0 1px #00000012;
  }
}

.user-page .user-page__shell {
  backdrop-filter: blur(22px) saturate(190%);
  -webkit-backdrop-filter: blur(22px) saturate(190%);
  overflow: hidden;
}

.user-page .user-page__hero {
  border-bottom: 1px solid var(--aj-glass-border);
  padding: 0 8px 8px;
  height: auto !important;
}

@supports (color: color-mix(in lab, red, red)) {
  .user-page .user-page__hero {
    border-bottom: 1px solid color-mix(in srgb, var(--aj-glass-border) 18%, transparent);
  }
}

.user-page .user-page__hero-copy {
  flex-direction: column;
  flex: none;
  gap: 6px;
  max-width: 640px;
  display: flex;
  height: auto !important;
}

.user-page .user-page__eyebrow, .user-page .user-page-section-eyebrow, .user-page .user-page-profile-card label, .user-page .user-page-profile-card .jfx-input-container__label, .user-page .user-page-section label, .user-page .user-page-section .jfx-input-container__label {
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--aj-ink-faint);
  opacity: .74;
  font-size: 10px;
}

.user-page .user-page__title {
  letter-spacing: -.055em;
  color: var(--aj-ink);
  font-size: clamp(28px, 3.8vw, 42px);
  font-weight: 600;
  line-height: .98;
}

@supports (color: color-mix(in lab, red, red)) {
  .user-page .user-page__title {
    color: color-mix(in srgb, var(--aj-ink) 94%, white 6%);
  }
}

.user-page .user-page__subtitle {
  max-width: 540px;
  color: var(--aj-ink-muted);
  font-size: 14px;
  line-height: 1.6;
}

@supports (color: color-mix(in lab, red, red)) {
  .user-page .user-page__subtitle {
    color: color-mix(in srgb, var(--aj-ink-muted) 94%, white 6%);
  }
}

.user-page .user-page-main {
  flex: auto;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 22px;
  width: 100%;
  min-height: 0;
}

.user-page .user-page-main--core {
  justify-content: stretch;
}

.user-page .user-page-profile {
  flex-direction: column;
  flex: 0 0 328px;
  justify-content: flex-start;
  gap: 18px;
  width: 328px;
  min-width: 328px;
  display: flex;
}

.user-page .user-page-avatar, .user-page .user-page-profile-card, .user-page .user-page-section {
  border: 1px solid var(--aj-glass-border);
}

@supports (color: color-mix(in lab, red, red)) {
  .user-page .user-page-avatar, .user-page .user-page-profile-card, .user-page .user-page-section {
    border: 1px solid color-mix(in srgb, var(--aj-glass-border) 14%, transparent);
  }
}

.user-page .user-page-avatar, .user-page .user-page-profile-card, .user-page .user-page-section {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  box-shadow: 0 14px 32px #00000029, inset 0 1px #ffffff0a;
  background: var(--aj-glass-bg) !important;
}

.user-page .user-page-avatar {
  aspect-ratio: 1;
  box-sizing: border-box;
  border-radius: 24px;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  padding: 18px;
  display: flex;
  overflow: hidden;
}

.user-page .user-page-avatar .toolbar {
  flex-wrap: wrap;
  flex: none;
  order: 2;
  justify-content: flex-start;
  gap: 6px;
  margin-top: 14px;
  display: flex;
}

.user-page .user-page-avatar input[type="file"] {
  display: none !important;
}

.user-page .user-page-avatar .toolbar button {
  border: 1px solid var(--aj-glass-border);
  border-radius: 999px;
  min-height: 31px;
  padding: 6px 10px;
}

@supports (color: color-mix(in lab, red, red)) {
  .user-page .user-page-avatar .toolbar button {
    border: 1px solid color-mix(in srgb, var(--aj-glass-border) 10%, transparent);
  }
}

.user-page .user-page-avatar .toolbar button {
  background: var(--aj-glass-bg);
  color: var(--aj-ink-muted);
}

@supports (color: color-mix(in lab, red, red)) {
  .user-page .user-page-avatar .toolbar button {
    color: color-mix(in srgb, var(--aj-ink-muted) 82%, white 18%);
  }
}

.user-page .user-page-avatar .toolbar button {
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: none;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 590;
}

.user-page .user-page-avatar > div:not(.toolbar), .user-page .user-page-avatar .preview {
  flex: auto;
  min-height: 0;
}

.user-page .user-page-avatar > div:not(.toolbar) {
  order: 1;
  width: 100%;
}

.user-page .user-page-avatar .preview, .user-page .user-page-avatar > div:not(.toolbar) {
  border-radius: 16px;
}

.user-page .user-page-avatar .preview {
  object-fit: cover;
  object-position: center;
}

.user-page .user-page-profile-card {
  border-radius: 20px;
  flex-direction: column;
  gap: 12px;
  padding: 20px 20px 18px;
  display: flex;
}

.user-page .user-page-manage-link {
  color: var(--aj-accent);
  font-size: 14px;
  font-weight: 600;
}

.user-page .user-page-details {
  flex-direction: column;
  flex: auto;
  justify-content: flex-start;
  gap: 16px;
  min-width: 0;
  min-height: 0;
  padding-bottom: 0;
  padding-right: 2px;
  display: flex;
  overflow: hidden auto;
}

.user-page .user-page-details--core {
  width: 100%;
}

.user-page .user-page-section {
  box-sizing: border-box;
  border-radius: 22px;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  padding: 20px 20px 19px;
  display: flex;
}

.user-page .user-page-section-header {
  border-bottom: 1px solid var(--aj-glass-border);
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding-bottom: 4px;
}

@supports (color: color-mix(in lab, red, red)) {
  .user-page .user-page-section-header {
    border-bottom: 1px solid color-mix(in srgb, var(--aj-glass-border) 8%, transparent);
  }
}

.user-page .user-page-section-copy {
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding-bottom: 10px;
  display: flex;
}

.user-page .user-page-section-title {
  letter-spacing: -.03em;
  color: var(--aj-ink);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.12;
}

.user-page .sub-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 14px;
  display: grid;
}

.user-page .sub-form > .user-page-field-row {
  grid-column: 1 / -1;
}

.user-page .user-page-field-row {
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  padding: 1px 0 3px;
}

.user-page .user-page-field-input {
  flex: auto;
  min-width: 0;
}

.user-page .user-page-field-input .jfx-input-container, .user-page .user-page-field-input .jfx-input-container__label {
  margin-bottom: 0;
}

.user-page .user-page-input, .user-page input[name="nickName"], .user-page input[name="firstName"], .user-page input[name="lastName"], .user-page input[name="birthDate"], .user-page input[name="street"], .user-page input[name="number"], .user-page input[name="zipCode"], .user-page input[name="country"] {
  box-sizing: border-box;
  min-height: 46px;
  font-weight: 500;
  width: 100% !important;
  color: var(--aj-ink) !important;
  border-radius: 999px !important;
  padding: 0 16px !important;
  font-size: 15px !important;
}

.user-page .user-page-toggle.material-icons {
  border: 1px solid var(--aj-glass-border);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  display: inline-flex;
  padding: 0 !important;
}

@supports (color: color-mix(in lab, red, red)) {
  .user-page .user-page-toggle.material-icons {
    border: 1px solid color-mix(in srgb, var(--aj-glass-border) 8%, transparent);
  }
}

.user-page .user-page-toggle.material-icons {
  color: var(--aj-ink-faint);
  background: var(--aj-glass-bg) !important;
}

@supports (color: color-mix(in lab, red, red)) {
  .user-page .user-page-toggle.material-icons {
    color: color-mix(in srgb, var(--aj-ink-faint) 84%, white 16%);
  }
}

.user-page .user-page-toggle.material-icons {
  box-shadow: inset 0 1px #ffffff08;
}

.user-page .user-page-toggle.material-icons:hover, .user-page .user-page-save-btn:hover {
  border-color: var(--aj-accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .user-page .user-page-toggle.material-icons:hover, .user-page .user-page-save-btn:hover {
    border-color: color-mix(in srgb, var(--aj-accent) 28%, white 10%);
  }
}

.user-page .user-page-toggle.material-icons:hover, .user-page .user-page-save-btn:hover {
  transform: none;
}

.user-page .user-form-actions {
  box-sizing: border-box;
  border-top: 1px solid var(--aj-glass-border);
  flex: none;
  justify-content: flex-end;
  align-items: center;
  column-gap: 12px;
  width: 100%;
  margin-top: 0;
  padding: 14px 6px 2px;
}

@supports (color: color-mix(in lab, red, red)) {
  .user-page .user-form-actions {
    border-top: 1px solid color-mix(in srgb, var(--aj-glass-border) 8%, transparent);
  }
}

.user-page .user-form-actions {
  background: none;
}

.user-page .user-page-save-btn {
  border: 1px solid var(--aj-glass-border);
  border-radius: 999px;
  min-width: 196px;
  min-height: 44px;
  padding: 10px 18px;
}

@supports (color: color-mix(in lab, red, red)) {
  .user-page .user-page-save-btn {
    border: 1px solid color-mix(in srgb, var(--aj-glass-border) 16%, transparent);
  }
}

.user-page .user-page-save-btn {
  backdrop-filter: blur(8px) saturate(180%);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--aj-ink);
  font-size: 11px;
  font-weight: 650;
  box-shadow: 0 10px 22px #00000029, inset 0 1px #ffffff0d;
  background: var(--aj-glass-bg) !important;
}

.user-page .user-page-save-btn--secondary {
  color: var(--aj-ink-muted);
}

@supports (color: color-mix(in lab, red, red)) {
  .user-page .user-page-save-btn--secondary {
    color: color-mix(in srgb, var(--aj-ink-muted) 90%, white 10%);
  }
}

.user-page .user-page-save-btn--danger {
  border-color: #c45b5b;
}

@supports (color: color-mix(in lab, red, red)) {
  .user-page .user-page-save-btn--danger {
    border-color: color-mix(in srgb, #c45b5b 30%, var(--aj-glass-border));
  }
}

.user-page .user-page-save-btn--danger {
  color: #ffb9b9;
}

@supports (color: color-mix(in lab, red, red)) {
  .user-page .user-page-save-btn--danger {
    color: color-mix(in srgb, #ffb9b9 68%, var(--aj-ink));
  }
}

@media (max-width: 980px) {
  .user-page {
    overflow: hidden auto;
  }

  .user-page .user-page__surface {
    padding: 0;
  }

  .user-page .user-page-form, .user-page .user-page__layout {
    height: auto;
    min-height: 100%;
  }

  .user-page .user-page__layout {
    width: calc(100% - 16px);
    height: auto;
    max-height: none;
    margin: 10px auto;
    padding: 0;
  }

  .user-page .user-page__shell {
    background: var(--aj-glass-bg-mobile);
    border-color: var(--aj-glass-border-mobile);
    border-radius: 20px;
    padding: 18px 16px 14px;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .user-page .user-page__shell {
      border-color: color-mix(in srgb, var(--aj-glass-border-mobile) 84%, transparent);
    }
  }

  .user-page .user-page__shell {
    box-shadow: 0 18px 40px var(--aj-glass-shadow-mobile), inset 0 1px 0 #ffffff14, inset 0 0 0 1px #0000000f;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .user-page .user-page__shell {
      box-shadow: 0 18px 40px color-mix(in srgb, var(--aj-glass-shadow-mobile) 62%, transparent), inset 0 1px 0 #ffffff14, inset 0 0 0 1px #0000000f;
    }
  }

  .user-page .user-page-main {
    flex-direction: column;
    gap: 16px;
    min-height: auto;
  }

  .user-page .user-page-profile {
    flex-basis: auto;
    width: 100%;
    min-width: 0;
  }

  .user-page .user-page-avatar {
    aspect-ratio: auto;
    width: 100%;
    max-width: none;
    min-height: 320px;
  }

  .user-page .sub-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .user-page .user-page-field-row {
    flex-direction: column;
    align-items: stretch;
  }

  .user-page .user-page-avatar, .user-page .user-page-profile-card, .user-page .user-page-section {
    border-color: var(--aj-glass-border-mobile);
    background: var(--aj-glass-bg-mobile) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .user-page .user-page-avatar, .user-page .user-page-profile-card, .user-page .user-page-section {
      border-color: color-mix(in srgb, var(--aj-glass-border-mobile) 84%, transparent);
    }
  }

  .user-page .user-page-avatar, .user-page .user-page-profile-card, .user-page .user-page-section {
    box-shadow: 0 18px 40px var(--aj-glass-shadow-mobile), inset 0 1px 0 #ffffff14;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .user-page .user-page-avatar, .user-page .user-page-profile-card, .user-page .user-page-section {
      box-shadow: 0 18px 40px color-mix(in srgb, var(--aj-glass-shadow-mobile) 64%, transparent), inset 0 1px 0 #ffffff14;
    }
  }

  .user-page .user-page-avatar, .user-page .user-page-profile-card, .user-page .user-page-section {
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
  }

  .user-page .user-page-details {
    min-height: auto;
    padding-bottom: 0;
    padding-right: 0;
    overflow: visible;
  }

  .user-page .user-form-actions {
    padding: 14px 0 calc(8px + env(safe-area-inset-bottom, 0px));
    flex-direction: column;
    align-items: stretch;
    row-gap: 10px;
  }

  .user-page .user-page-save-btn, .user-page .user-form-actions > button {
    width: 100%;
    min-width: 0;
  }
}

.users-page {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  color: var(--aj-ink);
  overflow: hidden;
}

.users-page .users-page__layout {
  box-sizing: border-box;
  border: 1px solid var(--aj-glass-border);
  flex-direction: column;
  justify-content: flex-start;
  gap: 18px;
  width: min(1180px, 100% - 48px);
  height: calc(100% - 36px);
  min-height: 0;
  max-height: calc(100% - 36px);
  margin: 18px auto;
  padding: 24px 28px 18px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .users-page .users-page__layout {
    border: 1px solid color-mix(in srgb, var(--aj-glass-border) 30%, transparent);
  }
}

.users-page .users-page__layout {
  border-radius: 26px;
  background: radial-gradient(circle at 18% 0%, var(--aj-accent), transparent 34%), linear-gradient(180deg, var(--aj-glass-bg-dense), var(--aj-glass-bg-medium)) !important;
}

@supports (color: color-mix(in lab, red, red)) {
  .users-page .users-page__layout {
    background: radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--aj-accent) 9%, transparent), transparent 34%), linear-gradient(180deg, color-mix(in srgb, var(--aj-glass-bg-dense) 82%, transparent), color-mix(in srgb, var(--aj-glass-bg-medium) 74%, transparent)) !important;
  }
}

.users-page .users-page__layout {
  box-shadow: 0 22px 58px var(--aj-shadow-float), inset 0 1px 0 #ffffff1a, inset 0 0 0 1px #00000012;
}

@supports (color: color-mix(in lab, red, red)) {
  .users-page .users-page__layout {
    box-shadow: 0 22px 58px color-mix(in srgb, var(--aj-shadow-float) 56%, transparent), inset 0 1px 0 #ffffff1a, inset 0 0 0 1px #00000012;
  }
}

.users-page .users-page__layout {
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  overflow: hidden;
}

.users-page .users-page__hero {
  border-bottom: 1px solid var(--aj-glass-border);
  padding: 0 8px 8px;
  height: auto !important;
}

@supports (color: color-mix(in lab, red, red)) {
  .users-page .users-page__hero {
    border-bottom: 1px solid color-mix(in srgb, var(--aj-glass-border) 18%, transparent);
  }
}

.users-page .users-page__hero-copy, .users-page .users-page__panel-copy {
  flex-direction: column;
  flex: none;
  display: flex;
  height: auto !important;
}

.users-page .users-page__hero-copy {
  gap: 6px;
  max-width: 640px;
}

.users-page .users-page__eyebrow, .users-page .users-page__panel-eyebrow {
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--aj-ink-faint);
  opacity: .74;
  font-size: 10px;
}

.users-page .users-page__title {
  letter-spacing: -.055em;
  color: var(--aj-ink);
  font-size: clamp(28px, 3.8vw, 42px);
  font-weight: 600;
  line-height: .98;
}

@supports (color: color-mix(in lab, red, red)) {
  .users-page .users-page__title {
    color: color-mix(in srgb, var(--aj-ink) 94%, white 6%);
  }
}

.users-page .users-page__subtitle {
  max-width: 540px;
  color: var(--aj-ink-muted);
  font-size: 14px;
  line-height: 1.6;
}

@supports (color: color-mix(in lab, red, red)) {
  .users-page .users-page__subtitle {
    color: color-mix(in srgb, var(--aj-ink-muted) 94%, white 6%);
  }
}

.users-page .users-page__panel {
  border: 1px solid var(--aj-glass-border);
  flex-direction: column;
  flex: auto;
  gap: 14px;
  min-height: 0;
  padding: 18px 18px 16px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .users-page .users-page__panel {
    border: 1px solid color-mix(in srgb, var(--aj-glass-border) 28%, transparent);
  }
}

.users-page .users-page__panel {
  box-shadow: 0 10px 28px var(--aj-shadow-panel), inset 0 1px 0 #ffffff1f, inset 0 0 0 1px #00000014;
  border-radius: 22px;
  background: var(--aj-glass-bg) !important;
}

@supports (color: color-mix(in lab, red, red)) {
  .users-page .users-page__panel {
    box-shadow: 0 10px 28px color-mix(in srgb, var(--aj-shadow-panel) 32%, transparent), inset 0 1px 0 #ffffff1f, inset 0 0 0 1px #00000014;
  }
}

.users-page .users-page__panel {
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  overflow: hidden;
}

.users-page .users-page__panel-copy {
  gap: 3px;
  padding: 0 4px;
}

.users-page .users-page__search {
  border: 1px solid var(--aj-glass-border);
  align-items: center;
  gap: 12px;
  margin: 0 4px;
  padding: 10px 14px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .users-page .users-page__search {
    border: 1px solid color-mix(in srgb, var(--aj-glass-border) 20%, transparent);
  }
}

.users-page .users-page__search {
  border-radius: 16px;
  background: var(--aj-glass-bg) !important;
}

.users-page .users-page__search .material-icons {
  opacity: .6;
  font-size: 16px;
}

.users-page .users-page__search input {
  width: auto;
  box-shadow: none;
  border: none;
  flex: auto;
  font-size: 14px;
  background: none !important;
}

.users-page .users-page__search input:focus {
  outline: none;
}

.users-page .users-page__panel-title {
  letter-spacing: -.04em;
  color: var(--aj-ink);
  font-size: 20px;
  font-weight: 560;
  line-height: 1.1;
}

.users-page .users-page__grid-shell {
  flex: auto;
  min-height: 0;
  padding-top: 2px;
  padding-right: 2px;
  overflow: hidden;
}

.users-page .users-page__grid-shell > .jfx-data-grid {
  width: 100%;
  height: 100%;
}

.users-page .users-page__grid-placeholder {
  border: 1px dashed var(--aj-glass-border);
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(100%, 460px);
  margin: auto;
  padding: 28px 24px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .users-page .users-page__grid-placeholder {
    border: 1px dashed color-mix(in srgb, var(--aj-glass-border) 28%, transparent);
  }
}

.users-page .users-page__grid-placeholder {
  background: var(--aj-glass-bg-medium);
  border-radius: 18px;
}

@supports (color: color-mix(in lab, red, red)) {
  .users-page .users-page__grid-placeholder {
    background: color-mix(in srgb, var(--aj-glass-bg-medium) 54%, transparent);
  }
}

.users-page .users-page__grid-placeholder {
  text-align: center;
}

.users-page .users-page__grid-placeholder-title {
  color: var(--aj-ink);
  font-size: 18px;
  font-weight: 600;
}

@supports (color: color-mix(in lab, red, red)) {
  .users-page .users-page__grid-placeholder-title {
    color: color-mix(in srgb, var(--aj-ink) 94%, white 6%);
  }
}

.users-page .users-page__grid-placeholder-copy {
  max-width: 34ch;
  color: var(--aj-ink-muted);
  font-size: 14px;
  line-height: 1.6;
}

.users-page .users-page__card {
  cursor: pointer;
  border: 1px solid var(--aj-glass-border);
  height: 100%;
  min-height: 216px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .users-page .users-page__card {
    border: 1px solid color-mix(in srgb, var(--aj-glass-border) 32%, transparent);
  }
}

.users-page .users-page__card {
  background: var(--aj-glass-bg-medium);
  border-radius: 18px;
}

@supports (color: color-mix(in lab, red, red)) {
  .users-page .users-page__card {
    background: color-mix(in srgb, var(--aj-glass-bg-medium) 88%, transparent);
  }
}

.users-page .users-page__card {
  box-shadow: 0 10px 24px var(--aj-shadow-panel), inset 0 1px 0 #ffffff1a;
}

@supports (color: color-mix(in lab, red, red)) {
  .users-page .users-page__card {
    box-shadow: 0 10px 24px color-mix(in srgb, var(--aj-shadow-panel) 20%, transparent), inset 0 1px 0 #ffffff1a;
  }
}

.users-page .users-page__card {
  transition: background .16s, border-color .16s, box-shadow .16s, transform .16s;
}

.users-page .users-page__card--placeholder {
  cursor: default;
}

.users-page .users-page__card:hover {
  border-color: var(--aj-accent);
  transform: translateY(-1px);
}

@supports (color: color-mix(in lab, red, red)) {
  .users-page .users-page__card:hover {
    border-color: color-mix(in srgb, var(--aj-accent) 42%, var(--aj-glass-border));
  }
}

.users-page .users-page__card:hover {
  background: var(--aj-accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .users-page .users-page__card:hover {
    background: color-mix(in srgb, var(--aj-accent) 10%, var(--aj-glass-bg-medium));
  }
}

.users-page .users-page__card:hover {
  box-shadow: 0 14px 30px var(--aj-shadow-panel), inset 0 1px 0 #ffffff1f;
}

@supports (color: color-mix(in lab, red, red)) {
  .users-page .users-page__card:hover {
    box-shadow: 0 14px 30px color-mix(in srgb, var(--aj-shadow-panel) 26%, transparent), inset 0 1px 0 #ffffff1f;
  }
}

.users-page .users-page__card--placeholder:hover {
  border-color: var(--aj-glass-border);
  transform: none;
}

@supports (color: color-mix(in lab, red, red)) {
  .users-page .users-page__card--placeholder:hover {
    border-color: color-mix(in srgb, var(--aj-glass-border) 22%, transparent);
  }
}

.users-page .users-page__card--placeholder:hover {
  background: var(--aj-glass-bg-medium);
}

@supports (color: color-mix(in lab, red, red)) {
  .users-page .users-page__card--placeholder:hover {
    background: color-mix(in srgb, var(--aj-glass-bg-medium) 78%, transparent);
  }
}

.users-page .users-page__card--placeholder:hover {
  box-shadow: 0 10px 24px var(--aj-shadow-panel), inset 0 1px 0 #ffffff1a;
}

@supports (color: color-mix(in lab, red, red)) {
  .users-page .users-page__card--placeholder:hover {
    box-shadow: 0 10px 24px color-mix(in srgb, var(--aj-shadow-panel) 20%, transparent), inset 0 1px 0 #ffffff1a;
  }
}

.users-page .users-page__card-shell {
  gap: 14px;
  width: 100%;
  padding: 16px 16px 20px;
}

.users-page .users-page__card-header {
  align-items: center;
  gap: 12px;
}

.users-page .users-page__avatar {
  background: var(--aj-glass-bg-dense);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 54px;
  min-width: 54px;
  height: 54px;
  display: inline-flex;
  overflow: hidden;
}

@supports (color: color-mix(in lab, red, red)) {
  .users-page .users-page__avatar {
    background: color-mix(in srgb, var(--aj-glass-bg-dense) 80%, transparent);
  }
}

.users-page .users-page__avatar {
  border: 1px solid var(--aj-glass-border);
}

@supports (color: color-mix(in lab, red, red)) {
  .users-page .users-page__avatar {
    border: 1px solid color-mix(in srgb, var(--aj-glass-border) 14%, transparent);
  }
}

.users-page .users-page__avatar-image {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

.users-page .users-page__avatar-fallback {
  color: var(--aj-ink-muted);
  font-size: 42px;
}

@supports (color: color-mix(in lab, red, red)) {
  .users-page .users-page__avatar-fallback {
    color: color-mix(in srgb, var(--aj-ink-muted) 92%, white 8%);
  }
}

.users-page .users-page__card-heading {
  gap: 4px;
  min-width: 0;
}

.users-page .users-page__card-title {
  color: var(--aj-ink);
  font-size: 22px;
  font-weight: 620;
  line-height: 1.08;
}

.users-page .users-page__card-score {
  color: var(--aj-ink-muted);
  font-size: 12px;
}

@supports (color: color-mix(in lab, red, red)) {
  .users-page .users-page__card-score {
    color: color-mix(in srgb, var(--aj-ink-muted) 94%, white 6%);
  }
}

.users-page .users-page__identity {
  flex-direction: column;
  flex: auto;
  gap: 10px;
  display: flex;
}

.users-page .users-page__identity-row {
  border: 1px solid var(--aj-glass-border);
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .users-page .users-page__identity-row {
    border: 1px solid color-mix(in srgb, var(--aj-glass-border) 22%, transparent);
  }
}

.users-page .users-page__identity-row {
  background: var(--aj-glass-bg-dense);
  border-radius: 14px;
}

@supports (color: color-mix(in lab, red, red)) {
  .users-page .users-page__identity-row {
    background: color-mix(in srgb, var(--aj-glass-bg-dense) 68%, transparent);
  }
}

.users-page .users-page__identity-label {
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--aj-ink-faint);
  opacity: .76;
  font-size: 10px;
}

.users-page .users-page__identity-value {
  color: var(--aj-ink);
  font-size: 15px;
  line-height: 1.4;
}

@supports (color: color-mix(in lab, red, red)) {
  .users-page .users-page__identity-value {
    color: color-mix(in srgb, var(--aj-ink) 96%, black 4%);
  }
}

@media (max-width: 980px) {
  .users-page .users-page__layout {
    border-color: var(--aj-glass-border-mobile);
    border-radius: 20px;
    width: calc(100% - 16px);
    height: calc(100% - 20px);
    max-height: calc(100% - 20px);
    margin: 10px auto;
    padding: 18px 8px 14px;
    background: var(--aj-glass-bg-mobile) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .users-page .users-page__layout {
      border-color: color-mix(in srgb, var(--aj-glass-border-mobile) 84%, transparent);
    }
  }

  .users-page .users-page__layout {
    box-shadow: 0 18px 40px var(--aj-glass-shadow-mobile), inset 0 1px 0 #ffffff14, inset 0 0 0 1px #0000000f;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .users-page .users-page__layout {
      box-shadow: 0 18px 40px color-mix(in srgb, var(--aj-glass-shadow-mobile) 62%, transparent), inset 0 1px 0 #ffffff14, inset 0 0 0 1px #0000000f;
    }
  }

  .users-page .users-page__panel {
    border-color: var(--aj-glass-border-mobile);
    border-radius: 18px;
    padding: 16px 16px 14px;
    background: var(--aj-glass-bg-mobile) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .users-page .users-page__panel {
      border-color: color-mix(in srgb, var(--aj-glass-border-mobile) 84%, transparent);
    }
  }

  .users-page .users-page__panel {
    box-shadow: 0 18px 40px var(--aj-glass-shadow-mobile), inset 0 1px 0 #ffffff14, inset 0 0 0 1px #0000000f;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .users-page .users-page__panel {
      box-shadow: 0 18px 40px color-mix(in srgb, var(--aj-glass-shadow-mobile) 62%, transparent), inset 0 1px 0 #ffffff14, inset 0 0 0 1px #0000000f;
    }
  }

  .users-page .users-page__search, .users-page .users-page__identity-row, .users-page .users-page__card, .users-page .users-page__grid-placeholder {
    background: var(--aj-glass-bg-dense) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .users-page .users-page__search, .users-page .users-page__identity-row, .users-page .users-page__card, .users-page .users-page__grid-placeholder {
      background: color-mix(in srgb, var(--aj-glass-bg-dense) 88%, transparent) !important;
    }
  }

  .users-page .users-page__search, .users-page .users-page__identity-row, .users-page .users-page__card, .users-page .users-page__grid-placeholder {
    border-color: var(--aj-glass-border-mobile);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .users-page .users-page__search, .users-page .users-page__identity-row, .users-page .users-page__card, .users-page .users-page__grid-placeholder {
      border-color: color-mix(in srgb, var(--aj-glass-border-mobile) 78%, transparent);
    }
  }
}

.password-login-page, .password-register-page, .account-page, .webauthn-login-page, .webauthn-register-page, .confirm-page, .logout-page {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  color: var(--aj-ink);
  overflow: hidden;
}

.security-page__form, .security-page__layout {
  width: 100%;
  height: 100%;
}

.security-page__layout {
  box-sizing: border-box;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 18px;
  padding: 24px 28px 18px;
  display: flex;
}

.security-page__panel {
  flex: none !important;
  height: auto !important;
}

.security-page__input, .security-page__field-group input {
  box-sizing: border-box;
  min-height: 40px;
  font-weight: 500;
  width: 100% !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--aj-ink) !important;
  background: none !important;
  border: none !important;
  outline: none !important;
  padding: 0 !important;
  font-size: 15px !important;
}

@media (max-width: 980px) {
  .password-login-page, .password-register-page, .webauthn-login-page, .webauthn-register-page, .confirm-page, .logout-page {
    overflow: hidden auto;
  }

  .security-page__form, .security-page__layout {
    height: auto;
    min-height: 100%;
  }

  .security-page__input, .security-page__field-group input {
    box-shadow: none !important;
    background: none !important;
    border: none !important;
  }
}

html, body, #root {
  height: 100vh;
  margin: 0;
  padding: 0;
}

.button-container {
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px 16px;
  display: flex;
}

.container {
  height: 100%;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--aj-scrollbar-thumb) transparent;
}

html {
  color: var(--aj-ink);
  letter-spacing: .01em;
  background-color: #0000;
  font-family: Segoe UI, Helvetica Neue, Arial, sans-serif;
  font-size: 16px;
}

:root, html[data-theme="light"] {
  --aj-code-keyword: #7c5f22;
  --aj-code-constant: #8a4a56;
  --aj-code-number: #9a5c18;
  --aj-code-string: #2f6f58;
  --aj-code-comment: #7f867d;
  --aj-code-type: #315f85;
  --aj-code-function: #6b4da2;
  --aj-code-variable: #3a4440;
  --aj-code-operator: #6e786d;
  --aj-code-accent: #7b6750;
  --aj-code-bg: #fffaf3e0;
  --aj-code-gutter-bg: #3e423a0a;
  --aj-code-selection: var(--aj-accent);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, html[data-theme="light"] {
    --aj-code-selection: color-mix(in srgb, var(--aj-accent) 22%, transparent);
  }
}

:root, html[data-theme="light"] {
  --aj-code-caret: var(--aj-accent-strong);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, html[data-theme="light"] {
    --aj-code-caret: color-mix(in srgb, var(--aj-accent-strong) 88%, black 12%);
  }
}

html[data-theme="dark"] {
  --aj-code-keyword: #d8b36d;
  --aj-code-constant: #f09aa4;
  --aj-code-number: #e0a960;
  --aj-code-string: #89c9a8;
  --aj-code-comment: #7f9184;
  --aj-code-type: #8fc2e6;
  --aj-code-function: #c9a8ff;
  --aj-code-variable: #e6ebe3;
  --aj-code-operator: #9aa69b;
  --aj-code-accent: #d7c1a0;
  --aj-code-bg: #111413eb;
  --aj-code-gutter-bg: #ffffff08;
  --aj-code-selection: var(--aj-accent);
}

@supports (color: color-mix(in lab, red, red)) {
  html[data-theme="dark"] {
    --aj-code-selection: color-mix(in srgb, var(--aj-accent) 28%, transparent);
  }
}

html[data-theme="dark"] {
  --aj-code-caret: var(--aj-accent-soft);
}

@supports (color: color-mix(in lab, red, red)) {
  html[data-theme="dark"] {
    --aj-code-caret: color-mix(in srgb, var(--aj-accent-soft) 82%, white 18%);
  }
}

.codemirror-wrapper .cm-editor {
  background: var(--aj-code-bg);
  color: var(--aj-ink);
  border: 1px solid var(--aj-line-soft);
  border-radius: 12px;
  overflow: hidden;
}

.codemirror-wrapper .cm-scroller {
  font-family: JetBrains Mono, Fira Code, monospace;
}

.codemirror-wrapper .cm-content, .codemirror-wrapper .cm-gutters {
  background: var(--aj-code-bg);
}

.codemirror-wrapper .cm-gutters {
  color: var(--aj-ink-faint);
  border-right: 1px solid var(--aj-line-soft);
  background: linear-gradient(180deg, var(--aj-code-gutter-bg), transparent);
}

.codemirror-wrapper .cm-activeLine, .codemirror-wrapper .cm-activeLineGutter {
  background: var(--aj-accent-muted);
}

@supports (color: color-mix(in lab, red, red)) {
  .codemirror-wrapper .cm-activeLine, .codemirror-wrapper .cm-activeLineGutter {
    background: color-mix(in srgb, var(--aj-accent-muted) 52%, transparent);
  }
}

.codemirror-wrapper .cm-selectionBackground {
  background: var(--aj-code-selection) !important;
}

.codemirror-wrapper .cm-content ::selection {
  background: var(--aj-code-selection) !important;
}

.codemirror-wrapper .cm-cursor, .codemirror-wrapper .cm-dropCursor {
  border-left-color: var(--aj-code-caret) !important;
}

.codemirror-wrapper .cm-focused {
  outline: none;
}

@media (max-width: 767px) {
  .aj-card-glass {
    margin: 8px 10px;
    padding: 14px 12px;
  }
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-tracking {
  syntax: "*";
  inherits: false
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}