.clara-launcher {
    --clara-bg: #16181c;
    --clara-border: rgba(255, 255, 255, .1);
    --clara-fg: #e6e9ee;
    position: fixed;
    top: 8px;
    left: 50%;
    translate: -50% 0;
    z-index: 99999;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 4px 16px 4px 4px;
    border-radius: 999px;
    background: var(--clara-bg);
    border: 1px solid var(--clara-border);
    color: var(--clara-fg);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: var(--shadow-2);
    transition: background-color .14s ease, transform .12s ease
}

.clara-launcher:hover {
    background: #1c1f25;
    transform: translateY(-1px)
}

.clara-launcher:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px
}

@media(max-width:768px) {
    .clara-launcher {
        width: 40px;
        justify-content: center;
        padding: 4px
    }

    .clara-launcher-label {
        display: none
    }
}

@media(prefers-reduced-motion:reduce) {
    .clara-launcher {
        transition: none
    }

    .clara-launcher:hover {
        transform: none
    }
}

.clara-launcher-orb {
    display: block;
    width: 30px;
    height: 30px;
    overflow: hidden;
    border-radius: 999px;
    flex: none
}

.clara-launcher-orb>canvas {
    display: block;
    transform: scale(.46875);
    transform-origin: top left
}

.clara-launcher-orb-static {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .2);
    background: radial-gradient(circle at 35% 35%, #7dc4ff, #1e91fd 42%, #111827 74%)
}

.clara-launcher-orb-static:after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #fffc
}

.clara-panel {
    position: fixed;
    top: 64px;
    left: 50%;
    translate: -50% 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    width: min(380px, calc(100vw - 32px));
    height: min(560px, calc(100dvh - 80px));
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-canvas);
    color: var(--text-primary);
    box-shadow: var(--shadow-3);
    pointer-events: auto;
    animation: clara-panel-in .16s ease
}

@keyframes clara-panel-in {
    0% {
        opacity: 0;
        transform: translateY(6px)
    }
}

@media(prefers-reduced-motion:reduce) {
    .clara-panel {
        animation: none
    }
}

.clara-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: none;
    padding: 12px 12px 12px 16px;
    border-bottom: 1px solid var(--border-subtle)
}

.clara-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary)
}

.clara-head-actions {
    display: inline-flex;
    gap: 2px
}

.clara-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color .12s ease
}

.clara-icon-btn:hover {
    background: var(--bg-surface-2)
}

.clara-icon-btn:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px
}

.clara-icon-btn img {
    width: 12px;
    height: 12px
}

.clara-text-btn {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .12s ease
}

.clara-text-btn:hover {
    background: var(--bg-surface-2)
}

.clara-text-btn:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px
}

.clara-text-btn:disabled {
    cursor: not-allowed;
    opacity: .6
}

.clara-composer {
    position: relative;
    width: 100%;
    padding: 10px 10px 8px;
    border-radius: 14px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    transition: border-color .14s ease
}

.clara-composer:focus-within {
    border-color: var(--border-strong)
}

.clara-composer-input {
    display: block;
    width: 100%;
    max-height: 160px;
    padding: 0 2px 6px;
    border: 0;
    outline: none;
    resize: none;
    background: transparent;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    line-height: 20px
}

.clara-composer-input::placeholder {
    color: var(--text-muted)
}

.clara-composer-input:disabled {
    cursor: not-allowed;
    opacity: .6
}

.clara-composer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

.clara-composer-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
    margin-left: auto;
    border: 0;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    transition: background-color .12s ease
}

.clara-composer-send:hover:not(:disabled) {
    background: var(--bg-surface-2)
}

.clara-composer-send:disabled {
    cursor: not-allowed;
    opacity: .6
}

.studio-view-desktop-summary {
    position: absolute;
    z-index: 35;
    right: 0;
    left: 0;
    display: flex;
    justify-content: center;
    color: var(--text-primary);
    pointer-events: none
}

.studio-view-desktop-summary__strip {
    display: flex;
    max-width: calc(100vw - 360px);
    min-height: 54px;
    align-items: stretch;
    gap: 4px;
    padding: 6px;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: var(--bg-surface);
    box-shadow: var(--shadow-2);
    pointer-events: auto
}

.studio-view-desktop-summary__stats {
    display: grid;
    min-width: 404px;
    grid-template-columns: repeat(4, minmax(86px, 1fr));
    margin: 0
}

.studio-view-desktop-summary__stat {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 2px 14px
}

.studio-view-desktop-summary__stat+.studio-view-desktop-summary__stat:before {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: 1px;
    background: var(--border-subtle);
    content: ""
}

.studio-view-desktop-summary__stat dt {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    line-height: var(--lh-base);
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap
}

.studio-view-desktop-summary__stat dd {
    overflow: hidden;
    margin: 0;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-base);
    text-overflow: ellipsis;
    white-space: nowrap
}

.studio-view-desktop-summary__details-trigger {
    display: inline-flex;
    min-width: 126px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    align-self: center;
    padding: 0 13px;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    outline: none;
    background: var(--bg-surface-2);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 13px;
    font-weight: var(--weight-medium);
    line-height: var(--lh-base);
    white-space: nowrap;
    transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard)
}

.studio-view-desktop-summary__details-trigger:hover,
.studio-view-desktop-summary__details-trigger.is-open {
    border-color: var(--bg-brand);
    background: var(--bg-brand);
    color: var(--text-on-brand)
}

.studio-view-desktop-summary__details-trigger:focus-visible {
    box-shadow: var(--focus-ring)
}

.studio-view-desktop-summary__details-trigger img {
    width: 14px;
    transition: transform var(--duration-fast) var(--ease-standard)
}

.studio-view-desktop-summary__details-trigger img.is-collapsed {
    transform: rotate(180deg)
}

.studio-view-desktop-summary__details-panel {
    position: fixed;
    z-index: 55;
    top: var(--studio-view-desktop-content-top);
    right: 12px;
    bottom: 12px;
    display: flex;
    width: min(384px, calc(100vw - 24px));
    overflow: hidden;
    flex-direction: column;
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    background: var(--bg-surface);
    box-shadow: var(--shadow-3);
    color: var(--text-primary);
    pointer-events: auto;
    transform: none
}

.studio-view-desktop-summary__details-header {
    display: flex;
    min-height: 52px;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 10px 10px 16px;
    border-bottom: 1px solid var(--border-subtle)
}

.studio-view-desktop-summary__details-header h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: var(--weight-semibold);
    line-height: var(--lh-base)
}

.studio-view-desktop-summary__details-header button {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    outline: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
    transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard)
}

.studio-view-desktop-summary__details-header button:hover {
    background: var(--bg-surface-2);
    color: var(--text-primary)
}

.studio-view-desktop-summary__details-header button:focus-visible {
    box-shadow: var(--focus-ring)
}

.studio-view-desktop-summary__details-body {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 16px 20px
}

.studio-view-desktop-summary__details-body>div:first-child {
    display: none
}

.studio-view-desktop-summary__details-body [class~=bg-white] {
    background-color: var(--bg-canvas)
}

.studio-view-desktop-summary__details-body [class*="bg-[#F6F7F8]"],
.studio-view-desktop-summary__details-body [class*="bg-[#F5F6F8]"],
.studio-view-desktop-summary__details-body [class*="bg-[#ECEEF2]"] {
    background-color: var(--bg-surface-2)
}

.studio-view-desktop-summary__details-body [class*="text-[#2B2E34]"],
.studio-view-desktop-summary__details-body [class*="text-[#1E2228]"] {
    color: var(--text-primary)
}

.studio-view-desktop-summary__details-body [class*="text-[#777C85]"],
.studio-view-desktop-summary__details-body [class*="text-[#7A7E87]"],
.studio-view-desktop-summary__details-body [class*="text-[#626872]"] {
    color: var(--text-secondary)
}

.studio-view-desktop-summary__details-body [class*="text-[#2F8FFF]"] {
    color: var(--text-brand)
}

.studio-view-desktop-summary__details-body [class*="border-[#2F8FFF]"] {
    border-color: var(--border-focus)
}

.studio-view-desktop-summary__details-body [class*="hover:bg-[#F3F8FF]"]:hover:not(:disabled) {
    background-color: var(--bg-brand-subtle)
}

.studio-view-desktop-summary__legacy-close-icon {
    width: 16px
}

@media(max-width:1180px) {
    .studio-view-desktop-summary__strip {
        max-width: calc(100vw - 280px)
    }

    .studio-view-desktop-summary__stats {
        min-width: 344px;
        grid-template-columns: repeat(4, minmax(74px, 1fr))
    }

    .studio-view-desktop-summary__stat {
        padding-right: 10px;
        padding-left: 10px
    }

    .studio-view-desktop-summary__details-trigger {
        min-width: 44px;
        padding: 0 12px
    }

    .studio-view-desktop-summary__details-trigger span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap
    }
}

@media(prefers-reduced-motion:reduce) {

    .studio-view-desktop-summary__details-trigger,
    .studio-view-desktop-summary__details-trigger img,
    .studio-view-desktop-summary__details-header button {
        transition: none
    }
}

.sup-analysis-section {
    display: grid;
    gap: 12px;
    padding: 4px
}

.sup-analysis-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--sup-r-md);
    background: var(--sup-surface-2);
    box-shadow: inset 0 0 0 1px var(--sup-border)
}

.sup-analysis-toggle-icon {
    display: inline-flex;
    flex: none;
    color: var(--sup-text-dim)
}

.sup-analysis-toggle-caption {
    min-width: 0;
    flex: 1;
    margin: 0;
    color: var(--sup-text-dim);
    font-size: 11px;
    line-height: 1.35
}

.sup-analysis-toggle-switch {
    display: inline-flex;
    flex: none;
    align-items: center
}

.sup-analysis-legend {
    display: grid;
    gap: 10px
}

.sup-analysis-legend-scale {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: var(--sup-text);
    font-size: 10px;
    font-variant-numeric: tabular-nums
}

.sup-analysis-scrubs {
    display: grid;
    gap: 14px
}

.sup-sun-time {
    display: grid;
    gap: 3px
}

.sup-sun-time[aria-disabled=true] {
    opacity: .5
}

.sup-sun-time-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--sup-text-dim);
    font-size: 12px
}

.sup-sun-time-input {
    width: 88px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--sup-border-strong);
    border-radius: var(--sup-r-sm);
    outline: none;
    background: var(--sup-surface-2);
    color: var(--sup-text);
    font: inherit;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-align: center;
    transition: border-color .16s ease, box-shadow .16s ease
}

.sup-sun-time-input:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--sup-accent) 45%, var(--sup-border-strong))
}

.sup-sun-time-input:focus-visible {
    border-color: var(--sup-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sup-accent) 22%, transparent)
}

.sup-sun-arc {
    position: relative;
    height: 44px;
    margin: 3px 4px 0;
    border-radius: var(--sup-r-sm)
}

.sup-sun-arc:focus-within {
    outline: 2px solid var(--sup-accent);
    outline-offset: 3px
}

.sup-sun-arc-visual {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 44px;
    overflow: visible;
    pointer-events: none
}

.sup-sun-horizon {
    stroke: var(--sup-border-strong);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke
}

.sup-sun-path {
    fill: none;
    stroke: var(--sup-solar);
    stroke-width: 2;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke
}

.sup-sun-arc-ticks {
    fill: none;
    stroke: var(--sup-text-faint);
    stroke-width: 1;
    vector-effect: non-scaling-stroke
}

.sup-sun-marker {
    fill: var(--sup-solar);
    vector-effect: non-scaling-stroke
}

.sup-sun-marker--edge {
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--sup-solar) 55%, transparent))
}

.sup-sun-marker--noon {
    fill: var(--sup-knob);
    stroke: color-mix(in srgb, var(--sup-solar) 70%, transparent);
    stroke-width: 3;
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--sup-solar) 45%, transparent))
}

.sup-sun-arc-thumb {
    position: absolute;
    z-index: 1;
    top: var(--sup-sun-thumb-y);
    left: var(--sup-sun-progress);
    display: grid;
    width: 20px;
    height: 20px;
    transform: translate(-50%, -50%);
    place-items: center;
    border-radius: 50%;
    background: var(--sup-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sup-accent) 18%, transparent), var(--sup-shadow-xs);
    color: var(--sup-accent-fg);
    pointer-events: none
}

.sup-sun-arc-thumb svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round
}

.sup-sun-arc-input {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 44px;
    margin: 0;
    opacity: 0;
    cursor: grab
}

.sup-sun-arc-input:active {
    cursor: grabbing
}

.sup-sun-time-scale {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    color: var(--sup-text-faint);
    font-size: 9px;
    font-variant-numeric: tabular-nums
}

.sup-sun-time-scale span:nth-child(2) {
    text-align: center
}

.sup-sun-time-scale span:last-child {
    text-align: right
}

@media(prefers-reduced-motion:reduce) {
    .sup-sun-time-input {
        transition: none
    }
}

.studio-view-desktop-toolbar {
    position: absolute;
    z-index: 40;
    top: var(--studio-view-desktop-content-top);
    bottom: 40px;
    left: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    pointer-events: none
}

.studio-view-desktop-toolbar__rail {
    display: flex;
    width: 50px;
    flex: none;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px;
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    background: var(--bg-surface);
    box-shadow: var(--shadow-3);
    pointer-events: auto
}

.studio-view-desktop-toolbar__button {
    display: grid;
    width: 38px;
    height: 38px;
    flex: none;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    outline: none;
    background: transparent;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard)
}

.studio-view-desktop-toolbar__button img {
    width: 22px;
    height: 22px;
    object-fit: contain
}

.studio-view-desktop-toolbar__button:hover:not(:disabled),
.studio-view-desktop-toolbar__button.is-selected:not(.is-active) {
    border-color: var(--border-subtle);
    background: var(--bg-surface-2)
}

.studio-view-desktop-toolbar__button.is-active {
    border-color: var(--bg-brand);
    background: var(--bg-brand);
    box-shadow: var(--shadow-1)
}

.studio-view-desktop-toolbar__button:focus-visible {
    box-shadow: var(--focus-ring)
}

.studio-view-desktop-toolbar__button:disabled {
    cursor: not-allowed;
    opacity: .45
}

.studio-view-desktop-toolbar__separator {
    width: 26px;
    height: 1px;
    margin: 2px 0;
    background: var(--border-subtle)
}

.studio-view-desktop-toolbar__panel-slot {
    width: min(340px, calc(100vw - 86px));
    max-height: 100%;
    pointer-events: auto
}

.studio-view-desktop-panel,
.studio-view-desktop-toolbar__layers-panel>[role=dialog] {
    width: min(340px, calc(100vw - 86px));
    max-height: calc(100dvh - var(--studio-view-desktop-content-top) - 40px);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    background: var(--bg-surface);
    box-shadow: var(--shadow-3);
    color: var(--text-primary)
}

.studio-view-desktop-toolbar__layers-panel>[role=dialog] {
    overflow: hidden
}

.studio-view-desktop-toolbar__layers-panel>[role=dialog]>div:first-child {
    min-height: 43px;
    border-color: var(--border-subtle);
    padding: 10px 14px
}

.studio-view-desktop-toolbar__layers-panel>[role=dialog]>div:last-child {
    max-height: calc(100dvh - var(--studio-view-desktop-content-top) - 84px);
    padding: 8px 12px
}

.studio-view-desktop-panel {
    --sup-bg: var(--bg-canvas);
    --sup-surface: var(--bg-surface);
    --sup-surface-2: var(--bg-surface-2);
    --sup-surface-3: var(--bg-muted);
    --sup-border: var(--border-subtle);
    --sup-border-strong: var(--border-default);
    --sup-text: var(--text-primary);
    --sup-text-dim: var(--text-secondary);
    --sup-text-faint: var(--text-muted);
    --sup-accent: var(--bg-brand);
    --sup-accent-hover: var(--bg-brand-hover);
    --sup-accent-fg: var(--text-on-brand);
    --sup-solar: var(--color-sun-500);
    --sup-knob: var(--text-on-brand);
    --sup-invert-bg: var(--bg-inverse);
    --sup-invert-fg: var(--text-inverse);
    --sup-r-pill: 999px;
    --sup-r-md: 10px;
    --sup-r-sm: 8px;
    --sup-shadow-xs: var(--shadow-1);
    overflow: hidden
}

.studio-view-desktop-panel__header {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 10px 10px 14px;
    border-bottom: 1px solid var(--border-subtle)
}

.studio-view-desktop-panel__header h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: var(--weight-semibold);
    line-height: var(--lh-base)
}

.studio-view-desktop-panel__close {
    display: grid;
    width: 30px;
    height: 30px;
    flex: none;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    outline: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 23px;
    font-weight: 300;
    line-height: 1;
    transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard)
}

.studio-view-desktop-panel__close:hover {
    background: var(--bg-surface-2);
    color: var(--text-primary)
}

.studio-view-desktop-panel__close:focus-visible {
    box-shadow: var(--focus-ring)
}

.studio-view-desktop-panel__body {
    display: grid;
    max-height: calc(100dvh - var(--studio-view-desktop-content-top) - 85px);
    gap: 14px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px
}

.studio-view-desktop-panel__body>.sup-analysis-section {
    gap: 14px;
    padding: 0
}

.studio-view-desktop-panel .sup-field-label {
    color: var(--sup-text-dim);
    font-size: 12px
}

.studio-view-desktop-panel .sup-field-input {
    display: inline-flex;
    height: 30px;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-sm);
    background: var(--sup-bg)
}

.studio-view-desktop-panel .sup-field-input:focus-within {
    border-color: var(--sup-accent);
    box-shadow: 0 0 0 2px var(--focus-halo)
}

.studio-view-desktop-panel .sup-num {
    width: 52px;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--sup-text);
    font-size: 12px;
    font-weight: var(--weight-semibold);
    text-align: right;
    font-variant-numeric: tabular-nums
}

.studio-view-desktop-panel .sup-field-unit {
    color: var(--sup-text-faint);
    font-size: 11px
}

.studio-view-desktop-panel__toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    background: var(--bg-surface-2)
}

.studio-view-desktop-panel__toggle-icon {
    width: 18px;
    height: 18px;
    flex: none;
    object-fit: contain
}

.studio-view-desktop-panel__toggle-row p {
    min-width: 0;
    flex: 1;
    margin: 0;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.35
}

.studio-view-desktop-switch {
    position: relative;
    width: 40px;
    height: 20px;
    flex: none;
    padding: 0;
    border: 1px solid var(--border-default);
    border-radius: 999px;
    outline: none;
    background: var(--bg-muted);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard)
}

.studio-view-desktop-switch[aria-checked=true] {
    border-color: var(--bg-brand);
    background: var(--bg-brand)
}

.studio-view-desktop-switch:focus-visible {
    box-shadow: var(--focus-ring)
}

.studio-view-desktop-switch:disabled {
    cursor: not-allowed;
    opacity: .5
}

.studio-view-desktop-switch>span {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--text-on-brand);
    box-shadow: var(--shadow-1);
    transition: transform var(--duration-fast) var(--ease-standard)
}

.studio-view-desktop-switch[aria-checked=true]>span {
    transform: translate(20px)
}

.studio-view-desktop-panel__status {
    padding: 8px 10px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: var(--bg-surface-2);
    color: var(--text-secondary);
    font-size: 12px
}

.studio-view-desktop-panel__metric {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 2px;
    color: var(--text-secondary);
    font-size: 13px
}

.studio-view-desktop-panel__metric strong {
    color: var(--text-primary);
    font-size: 18px;
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums
}

.studio-view-desktop-panel__legend {
    display: grid;
    gap: 9px
}

.studio-view-desktop-panel__legend-bar {
    height: 10px;
    border-radius: 999px
}

.studio-view-desktop-panel__legend-bar--irradiance {
    background: linear-gradient(90deg, #1d1c40, #30306f 22%, #a64a31 56%, #f0b31b 82%, #ffd91a)
}

.studio-view-desktop-panel__legend-bar--solar-access {
    background: linear-gradient(90deg, #d94b2b, #f4b650, #37c76a)
}

.studio-view-desktop-panel__legend-scale {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 11px;
    font-variant-numeric: tabular-nums
}

.studio-view-desktop-panel__action-wrap {
    display: block;
    width: 100%
}

.studio-view-desktop-panel__action {
    width: 100%;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--border-default);
    border-radius: 8px;
    outline: none;
    background: var(--bg-surface-2);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 13px;
    font-weight: var(--weight-medium);
    transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard)
}

.studio-view-desktop-panel__action:hover:not(:disabled) {
    border-color: var(--border-strong);
    background: var(--bg-muted)
}

.studio-view-desktop-panel__action:focus-visible {
    box-shadow: var(--focus-ring)
}

.studio-view-desktop-panel__action:disabled {
    cursor: not-allowed;
    opacity: .5
}

.studio-view-desktop-panel__progress {
    color: var(--text-secondary);
    font-size: 12px;
    text-align: center
}

.studio-view-desktop-coordinates {
    position: absolute;
    z-index: 30;
    bottom: 12px;
    left: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 26px;
    padding: 5px 10px;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: var(--bg-surface);
    box-shadow: var(--shadow-2);
    color: var(--text-secondary);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    pointer-events: none
}

.studio-view-desktop-coordinates__axis {
    display: inline-flex;
    align-items: baseline;
    gap: 4px
}

.studio-view-desktop-coordinates__label {
    color: var(--text-muted);
    font-weight: var(--weight-medium)
}

.studio-view-desktop-coordinates__value {
    color: var(--text-secondary)
}

@media(prefers-reduced-motion:reduce) {

    .studio-view-desktop-toolbar__button,
    .studio-view-desktop-panel__close,
    .studio-view-desktop-switch,
    .studio-view-desktop-switch>span,
    .studio-view-desktop-panel__action {
        transition: none
    }
}

.sup-camera-view {
    --camera-view-surface: var(--sup-surface, var(--background-secondary, #ffffff));
    --camera-view-surface-2: var(--sup-surface-2, var(--background-tertiary, #f4f5f7));
    --camera-view-bg: var(--sup-bg, var(--background-primary, #f4f5f7));
    --camera-view-border: var(--sup-border, var(--border-primary-color, rgba(15, 23, 42, .12)));
    --camera-view-border-strong: var(--sup-border-strong, var(--border-secondary-color, rgba(15, 23, 42, .2)));
    --camera-view-text: var(--sup-text, var(--primary-text, #1e2228));
    --camera-view-text-dim: var(--sup-text-dim, var(--secondary-text, #53565c));
    --camera-view-text-faint: var(--sup-text-faint, var(--tertiary-text, #7a7e87));
    --camera-view-accent: var(--sup-accent, var(--primary, #3182ce));
    --camera-view-accent-fg: var(--sup-accent-fg, #ffffff);
    --camera-view-radius-pill: var(--sup-r-pill, var(--radius-full, 999px));
    --camera-view-radius-md: var(--sup-r-md, var(--radius-md, 10px));
    --camera-view-radius-sm: var(--sup-r-sm, var(--radius-sm, 8px));
    --camera-view-radius-xs: var(--sup-r-xs, var(--radius-xs, 6px));
    --camera-view-shadow: var(--sup-shadow, 0 12px 32px rgba(15, 23, 42, .2));
    position: relative;
    display: inline-flex;
    color: var(--camera-view-text);
    font-family: var(--font-sans, inherit)
}

.sup-camera-view .sup-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

.sup-camera-view-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--camera-view-border);
    border-radius: var(--camera-view-radius-pill);
    background: var(--camera-view-surface);
    color: var(--camera-view-text-dim);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 2px 8px #0f172a1f;
    transition: background-color .15s ease, border-color .15s ease
}

.sup-camera-view-trigger:not(:disabled):hover,
.sup-camera-view-trigger.is-open {
    border-color: var(--camera-view-border-strong);
    background: var(--camera-view-surface-2);
    color: var(--camera-view-text)
}

.sup-camera-view-trigger:focus-visible {
    outline: 2px solid var(--camera-view-accent);
    outline-offset: 2px
}

.sup-camera-view-trigger:disabled {
    cursor: not-allowed;
    opacity: .55
}

.sup-camera-view-trigger svg {
    color: var(--camera-view-text-dim)
}

.sup-camera-view-current {
    min-width: 18px;
    color: var(--camera-view-text-faint);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    text-align: center
}

.sup-camera-view-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    width: min(320px, calc(100vw - 24px));
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--camera-view-border-strong);
    border-radius: var(--camera-view-radius-md);
    background: var(--sup-glass-bg, color-mix(in srgb, var(--camera-view-surface) 94%, transparent));
    -webkit-backdrop-filter: blur(var(--sup-glass-blur, 18px));
    backdrop-filter: blur(var(--sup-glass-blur, 18px));
    box-shadow: var(--camera-view-shadow)
}

.sup-camera-view--studio-view .sup-camera-view-menu {
    max-height: calc(100dvh - 152px)
}

.sup-camera-view-heading {
    display: block;
    color: var(--camera-view-text-faint);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    line-height: 1.4;
    text-transform: uppercase
}

.sup-camera-view-modes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    margin-top: 5px;
    padding: 3px;
    border: 1px solid var(--camera-view-border);
    border-radius: var(--camera-view-radius-sm);
    background: color-mix(in srgb, var(--camera-view-bg) 56%, transparent)
}

.sup-camera-view-mode,
.sup-camera-view-option {
    border: 0;
    border-radius: var(--camera-view-radius-xs);
    background: transparent;
    color: var(--camera-view-text-dim);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .14s ease, color .14s ease
}

.sup-camera-view-mode {
    min-height: 30px;
    padding: 5px 8px
}

.sup-camera-view-mode[aria-checked=true] {
    background: var(--camera-view-accent);
    color: var(--camera-view-accent-fg)
}

.sup-camera-view-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 10px 2px 5px
}

.sup-camera-view--studio-view .sup-camera-view-section-head {
    margin-top: 0
}

.sup-camera-view-hint {
    overflow: hidden;
    color: var(--camera-view-text-faint);
    font-size: 10px;
    line-height: 1.3;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap
}

.sup-camera-view-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px
}

.sup-camera-view-option {
    min-height: 29px;
    padding: 5px 8px;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap
}

.sup-camera-view-mode:not([aria-checked=true]):not(:disabled):hover,
.sup-camera-view-option:not(:disabled):hover {
    background: var(--camera-view-surface-2);
    color: var(--camera-view-text)
}

.sup-camera-view-mode:active:not(:disabled),
.sup-camera-view-option:active:not(:disabled) {
    background: color-mix(in srgb, var(--camera-view-accent) 18%, var(--camera-view-surface-2));
    color: var(--camera-view-text)
}

.sup-camera-view-mode:focus-visible,
.sup-camera-view-option:focus-visible {
    outline: 2px solid var(--camera-view-accent);
    outline-offset: -1px
}

.sup-camera-view-option:disabled {
    color: var(--camera-view-text-faint);
    cursor: not-allowed;
    opacity: .5
}

@media(prefers-reduced-motion:reduce) {

    .sup-camera-view-trigger,
    .sup-camera-view-mode,
    .sup-camera-view-option {
        transition: none
    }
}

@media(max-width:480px) {
    .sup .sup-camera-view-trigger {
        height: 30px;
        padding-inline: 9px
    }
}

.sup-rail {
    max-height: calc(100vh - 88px);
    overflow-y: auto;
    scrollbar-width: none
}

.sup-rail::-webkit-scrollbar {
    display: none
}

.sup-rail-slot {
    position: relative;
    display: inline-flex
}

.sup-rail-btn[aria-disabled=true] {
    cursor: not-allowed;
    opacity: .48
}

.sup-rail-btn:focus-visible,
.sup-palette-body:focus-visible,
.sup-palette-item-action:focus-visible,
.sup-rail-calculate:focus-visible {
    outline: 2px solid var(--sup-accent);
    outline-offset: 2px
}

.sup-palette-search input[aria-disabled=true] {
    cursor: not-allowed;
    opacity: .62
}

.sup-palette-body {
    max-height: min(390px, calc(100vh - 310px))
}

.sup-palette-body:focus-visible {
    outline-offset: -3px
}

.sup-palette-item[aria-disabled=true] {
    cursor: not-allowed;
    opacity: .55
}

.sup-palette-item .sup-bar-item-tag {
    flex: none
}

.sup-rail-metric {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--sup-text-dim);
    font-size: 12px
}

.sup-rail-metric strong {
    color: var(--sup-text);
    font-variant-numeric: tabular-nums
}

.sup-rail-legend {
    --sup-ramp-access-low: #ef4444;
    --sup-ramp-access-mid: #f59e0b;
    --sup-ramp-access-high: #22c55e;
    --sup-ramp-heat-1: #7c3aed;
    --sup-ramp-heat-2: #2563eb;
    --sup-ramp-heat-3: #14b8a6;
    --sup-ramp-heat-4: #fde047;
    height: 18px;
    border-radius: var(--sup-r-sm);
    box-shadow: inset 0 0 0 1px var(--sup-border)
}

.sup-rail-legend--solarAccess {
    background: linear-gradient(to right, var(--sup-ramp-access-low), var(--sup-ramp-access-mid), var(--sup-ramp-access-high))
}

.sup-rail-legend--heatmap {
    background: linear-gradient(to right, var(--sup-ramp-heat-1), var(--sup-ramp-heat-2), var(--sup-ramp-heat-3), var(--sup-ramp-heat-4))
}

.sup-rail-calculate {
    min-height: 34px;
    border: 0;
    border-radius: var(--sup-r-md);
    background: var(--sup-accent);
    color: var(--sup-accent-fg);
    font: inherit;
    font-size: 12px;
    font-weight: 650;
    cursor: pointer
}

.sup-rail-calculate[aria-disabled=true] {
    cursor: not-allowed;
    opacity: .5
}

.sup-rail-state {
    margin: 0;
    color: var(--sup-text-faint);
    font-size: 11px;
    line-height: 1.4
}

.sup-rail-export-status {
    padding: 10px 14px;
    border-top: 1px solid var(--sup-border);
    color: var(--sup-text-dim);
    font-size: 12px
}

.sup-rail-export-status.is-failed,
.sup-rail-export-status.is-download-failed {
    color: var(--sup-danger)
}

@media(max-width:480px) {
    .sup-rail {
        left: 8px;
        padding-inline: 4px
    }

    .sup-rail-btn,
    .sup-rail-save {
        width: 34px;
        height: 34px
    }

    .sup-palette-shell {
        left: 52px;
        max-width: calc(100vw - 60px)
    }

    .sup-palette {
        width: min(340px, calc(100vw - 70px))
    }

    .sup-palette-foot {
        gap: 8px;
        padding-inline: 10px
    }
}

.sup-rail-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--sup-r-pill);
    background: var(--sup-accent);
    color: var(--sup-accent-fg);
    border: 0;
    cursor: pointer;
    box-shadow: var(--sup-shadow-sm);
    transition: background-color .14s ease, transform .12s ease
}

.sup-rail-save:hover {
    background: var(--sup-accent-hover);
    transform: translateY(-1px)
}

.sup-rail-save:focus-visible {
    outline: 2px solid var(--sup-accent);
    outline-offset: 2px
}

.sup-help-row {
    align-items: flex-start
}

.sup-help-row .sup-settings-row-label {
    display: grid;
    gap: 2px
}

.sup-help-row b {
    color: var(--sup-text);
    font-weight: 620
}

.sup-help-row small {
    color: var(--sup-text-faint);
    font-size: 11px;
    line-height: 1.35
}

.sup-help-row .sup-bar-item-kbd,
.sup-help-row svg {
    flex: none;
    margin-top: 1px
}

.studio-view-shell {
    --studio-view-header-h: 64px;
    --studio-view-stats-top: 12px;
    --studio-view-bottom-bar-h: 76px;
    --studio-view-desktop-content-top: calc(var(--studio-view-header-h) + 78px);
    isolation: isolate
}

.studio-view-stage {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--sup-canvas-bg)
}

.studio-view-canvas {
    width: 100%;
    height: 100%;
    background: var(--sup-canvas-bg);
    touch-action: none
}

.studio-view-header {
    position: absolute;
    inset: 0 0 auto;
    z-index: 45;
    display: flex;
    height: var(--studio-view-header-h);
    align-items: center;
    justify-content: space-between;
    padding: max(8px, env(safe-area-inset-top)) 16px 8px;
    border-bottom: 1px solid var(--sup-border);
    background: color-mix(in srgb, var(--sup-surface) 94%, transparent);
    box-shadow: var(--sup-shadow-xs);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    pointer-events: none
}

.studio-view-identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
    pointer-events: auto
}

.studio-view-identity-mark {
    width: 38px;
    height: 38px;
    flex: none
}

.studio-view-identity-copy {
    min-width: 0
}

.studio-view-identity-copy h1,
.studio-view-identity-copy p {
    overflow: hidden;
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap
}

.studio-view-identity-copy h1 {
    max-width: min(28vw, 360px);
    color: var(--sup-text);
    font-size: 17px;
    font-weight: 650;
    letter-spacing: -.015em
}

.studio-view-identity-copy p {
    max-width: min(28vw, 360px);
    margin-top: 2px;
    color: var(--sup-text-dim);
    font-size: 13px
}

.studio-view-zoom-control {
    position: relative;
    pointer-events: auto
}

.studio-view-zoom-trigger {
    display: inline-flex;
    min-width: 92px;
    height: 38px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 14px;
    border: 1px solid var(--sup-border-strong);
    border-radius: var(--sup-r-pill);
    outline: none;
    background: var(--sup-surface-2);
    color: var(--sup-text-dim);
    font: inherit;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease
}

.studio-view-zoom-trigger:not(:disabled):hover,
.studio-view-zoom-trigger[aria-expanded=true] {
    border-color: color-mix(in srgb, var(--sup-accent) 46%, var(--sup-border-strong));
    background: var(--sup-surface-3);
    color: var(--sup-text)
}

.studio-view-zoom-trigger:focus-visible {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sup-accent) 38%, transparent)
}

.studio-view-zoom-trigger:disabled {
    cursor: not-allowed;
    opacity: .5
}

.studio-view-zoom-control .sup-design-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    display: grid;
    width: 220px;
    padding: 7px;
    border: 1px solid var(--sup-border-strong);
    border-radius: var(--sup-r-md);
    background: color-mix(in srgb, var(--sup-surface) 94%, transparent);
    box-shadow: var(--sup-shadow);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px)
}

.studio-view-zoom-control .sup-design-menu-item {
    display: flex;
    min-height: 36px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 9px;
    border: 0;
    border-radius: var(--sup-r-sm);
    outline: none;
    background: transparent;
    color: var(--sup-text-dim);
    font: inherit;
    font-size: 12px;
    text-align: left;
    cursor: pointer
}

.studio-view-zoom-control .sup-design-menu-item:hover,
.studio-view-zoom-control .sup-design-menu-item:focus-visible {
    background: var(--sup-surface-2);
    color: var(--sup-text)
}

.studio-view-zoom-control .sup-design-menu-kbd {
    color: var(--sup-text-faint);
    font-size: 10px
}

.studio-view-camera-menu {
    position: absolute;
    z-index: 50;
    top: calc(var(--studio-view-header-h) + 12px);
    right: 16px;
    pointer-events: auto
}

.studio-view-cable-progress {
    left: 50%;
    transform: translate(-50%)
}

.studio-view-stats-wrap {
    position: absolute;
    z-index: 35;
    top: var(--studio-view-stats-top);
    left: 50%;
    width: min(640px, calc(100vw - 32px));
    transform: translate(-50%);
    pointer-events: none
}

.studio-view-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 12px 16px;
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-lg);
    background: color-mix(in srgb, var(--sup-surface) 94%, transparent);
    box-shadow: var(--sup-shadow-strip);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px)
}

.studio-view-stat {
    min-width: 0;
    padding: 0 16px;
    border-left: 1px solid var(--sup-border-strong)
}

.studio-view-stat:first-child {
    padding-left: 0;
    border-left: 0
}

.studio-view-stat:last-child {
    padding-right: 0
}

.studio-view-stat dt,
.studio-view-stat dd {
    overflow: hidden;
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap
}

.studio-view-stat dt {
    color: var(--sup-text-faint);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase
}

.studio-view-stat dd {
    margin-top: 4px;
    color: var(--sup-text);
    font-size: 17px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em
}

.studio-view-details-sheet {
    position: absolute;
    z-index: 38;
    right: 0;
    bottom: var(--studio-view-bottom-bar-h);
    left: 0;
    max-height: calc(100dvh - var(--studio-view-bottom-bar-h) - 118px);
    padding: 18px 20px 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--sup-border-strong);
    border-radius: 22px 22px 0 0;
    background: var(--sup-surface);
    box-shadow: 0 -16px 42px #0000003d;
    color: var(--sup-text);
    pointer-events: auto
}

.studio-view-mobile-tools {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 42;
    display: grid;
    pointer-events: none
}

.studio-view-bottom-nav {
    display: flex;
    min-height: var(--studio-view-bottom-bar-h);
    align-items: center;
    gap: 14px;
    padding: 9px max(14px, env(safe-area-inset-right)) max(9px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    border-top: 1px solid var(--sup-border-strong);
    background: color-mix(in srgb, var(--sup-surface) 96%, transparent);
    box-shadow: 0 -6px 24px #0003;
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    pointer-events: auto
}

.studio-view-analysis-nav {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    justify-content: space-around;
    gap: 5px
}

.studio-view-nav-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: none;
    place-items: center;
    border: 0;
    border-radius: var(--sup-r-md);
    outline: none;
    background: transparent;
    color: var(--sup-text-faint);
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease, transform .16s ease
}

.studio-view-nav-icon:not(:disabled):hover {
    background: var(--sup-surface-2);
    color: var(--sup-text)
}

.studio-view-nav-icon[data-active] {
    background: var(--sup-accent);
    color: var(--sup-accent-fg)
}

.studio-view-nav-icon:focus-visible,
.studio-view-details-action:focus-visible,
.studio-view-sheet-header button:focus-visible {
    outline: 2px solid var(--sup-accent);
    outline-offset: 2px
}

.studio-view-nav-icon:disabled,
.studio-view-details-action:disabled {
    cursor: not-allowed;
    opacity: .45
}

.studio-view-details-action {
    display: inline-flex;
    min-width: 210px;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 22px;
    border: 1px solid color-mix(in srgb, var(--sup-accent) 76%, var(--sup-accent-fg));
    border-radius: var(--sup-r-pill);
    outline: none;
    background: var(--sup-accent);
    color: var(--sup-accent-fg);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .16s ease, transform .16s ease
}

.studio-view-details-action:not(:disabled):hover {
    background: var(--sup-accent-hover)
}

.studio-view-tool-sheet,
.studio-view-layers-sheet {
    width: 100%;
    max-height: calc(100dvh - var(--studio-view-bottom-bar-h) - 118px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--sup-border-strong);
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    background: var(--sup-surface);
    box-shadow: 0 -16px 42px #0000003d;
    color: var(--sup-text);
    pointer-events: auto
}

.studio-view-sheet-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 20px;
    border-bottom: 1px solid var(--sup-border);
    background: var(--sup-surface)
}

.studio-view-sheet-header h2 {
    margin: 0;
    color: var(--sup-text);
    font-size: 17px;
    font-weight: 650;
    letter-spacing: -.01em
}

.studio-view-sheet-header button {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 0;
    border-radius: var(--sup-r-sm);
    outline: none;
    background: transparent;
    color: var(--sup-text-dim);
    cursor: pointer
}

.studio-view-sheet-header button:hover {
    background: var(--sup-surface-2);
    color: var(--sup-text)
}

.studio-view-sheet-body {
    padding: 18px 20px 24px
}

.studio-view-layers-sheet {
    padding: 0
}

.studio-view-layers-sheet>[role=dialog] {
    width: 100%;
    max-width: none;
    margin: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    box-shadow: none
}

.studio-view-details-panel {
    --background-primary: var(--sup-bg);
    --background-secondary: var(--sup-surface);
    --background-tertiary: var(--sup-surface-2);
    --primary-text: var(--sup-text);
    --secondary-text: var(--sup-text-dim);
    --tertiary-text: var(--sup-text-faint);
    --border-primary-color: var(--sup-border);
    --primary: var(--sup-accent)
}

.studio-view-state-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    background: color-mix(in srgb, var(--sup-bg) 86%, transparent);
    color: var(--sup-text);
    text-align: center;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px)
}

.studio-view-state-overlay p {
    margin: 0
}

@media(max-width:1023px) {
    .studio-view-shell {
        --studio-view-header-h: calc(54px + env(safe-area-inset-top));
        --studio-view-stats-top: calc(var(--studio-view-header-h) + 12px);
        --studio-view-bottom-bar-h: calc(70px + env(safe-area-inset-bottom))
    }

    .studio-view-header {
        height: var(--studio-view-header-h);
        padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left))
    }

    .studio-view-identity {
        gap: 9px
    }

    .studio-view-identity-mark {
        width: 34px;
        height: 34px
    }

    .studio-view-identity-copy h1 {
        max-width: min(50vw, 410px);
        font-size: 15px
    }

    .studio-view-identity-copy p {
        max-width: min(50vw, 410px);
        font-size: 12px
    }

    .studio-view-zoom-trigger {
        min-width: 76px;
        height: 34px;
        gap: 6px;
        padding-inline: 11px;
        font-size: 13px
    }

    .studio-view-camera-menu {
        top: calc(var(--studio-view-stats-top) + 88px);
        right: max(12px, env(safe-area-inset-right))
    }

    .studio-view-stats-wrap {
        top: var(--studio-view-stats-top);
        width: calc(100vw - 24px)
    }

    .studio-view-stats {
        padding: 10px 12px
    }

    .studio-view-stat {
        padding-inline: 12px
    }

    .studio-view-stat dd {
        font-size: 15px
    }
}

@media(min-width:768px)and (max-width:1023px) {

    .studio-view-tool-sheet,
    .studio-view-layers-sheet {
        width: min(720px, calc(100vw - 32px));
        justify-self: center
    }

    .studio-view-details-sheet {
        right: auto;
        left: 50%;
        width: min(720px, calc(100vw - 32px));
        transform: translate(-50%)
    }
}

@media(min-width:1024px) {
    .studio-view-cable-progress__pill {
        width: min(240px, calc(100vw - 840px));
        min-width: 0
    }
}

@media(max-width:480px) {

    .studio-view-identity-copy h1,
    .studio-view-identity-copy p {
        max-width: 48vw
    }

    .studio-view-identity-mark {
        width: 31px;
        height: 31px
    }

    .studio-view-zoom-trigger {
        min-width: 72px;
        padding-inline: 9px
    }

    .studio-view-stats-wrap {
        width: calc(100vw - 20px)
    }

    .studio-view-stats {
        padding: 9px 10px;
        border-radius: 12px
    }

    .studio-view-cable-progress {
        left: max(10px, env(safe-area-inset-left));
        transform: none
    }

    .studio-view-cable-progress__pill {
        width: min(240px, calc(100vw - 130px));
        min-width: 0
    }

    .studio-view-stat {
        padding-inline: 8px
    }

    .studio-view-stat dt {
        font-size: 9px;
        letter-spacing: .06em
    }

    .studio-view-stat dd {
        margin-top: 3px;
        font-size: 13px
    }

    .studio-view-details-sheet {
        max-height: calc(100dvh - var(--studio-view-bottom-bar-h) - 96px);
        padding: 16px 16px 22px
    }

    .studio-view-bottom-nav {
        gap: 8px;
        padding-right: max(8px, env(safe-area-inset-right));
        padding-left: max(8px, env(safe-area-inset-left))
    }

    .studio-view-analysis-nav {
        gap: 1px
    }

    .studio-view-nav-icon {
        width: 38px;
        height: 42px
    }

    .studio-view-details-action {
        min-width: min(44vw, 190px);
        min-height: 44px;
        padding-inline: 15px;
        font-size: 14px
    }

    .studio-view-tool-sheet,
    .studio-view-layers-sheet {
        max-height: calc(100dvh - var(--studio-view-bottom-bar-h) - 96px)
    }

    .studio-view-sheet-body {
        padding: 16px 16px 22px
    }
}

@media(max-width:360px) {
    .studio-view-identity-copy p {
        display: none
    }

    .studio-view-identity-copy h1 {
        max-width: 42vw
    }

    .studio-view-details-action span {
        display: none
    }

    .studio-view-details-action {
        min-width: 46px;
        width: 46px;
        padding-inline: 0
    }
}

@media(prefers-reduced-motion:reduce) {

    .studio-view-zoom-trigger,
    .studio-view-zoom-control .sup-design-menu-item,
    .studio-view-nav-icon,
    .studio-view-details-action {
        transition: none
    }
}

.custom-pagination {
    container-name: custom-pagination;
    container-type: inline-size
}

.custom-pagination .custom-pagination__compact-only {
    display: none
}

@container custom-pagination (max-width: 640px) {
    .custom-pagination>.custom-pagination__group {
        flex-basis: 100%
    }

    .custom-pagination .custom-pagination__desktop-only {
        display: none
    }

    .custom-pagination .custom-pagination__compact-only {
        display: inline-flex
    }
}

.reactEasyCrop_Container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
    cursor: move;
    display: flex;
    justify-content: center;
    align-items: center
}

.reactEasyCrop_Image,
.reactEasyCrop_Video {
    will-change: transform
}

.reactEasyCrop_Contain {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.reactEasyCrop_Cover_Horizontal {
    width: 100%;
    height: auto
}

.reactEasyCrop_Cover_Vertical {
    width: auto;
    height: 100%
}

.reactEasyCrop_CropArea {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, .5);
    box-sizing: border-box;
    box-shadow: 0 0 0 9999em;
    color: #00000080;
    overflow: hidden
}

.reactEasyCrop_CropAreaRound {
    border-radius: 50%
}

.reactEasyCrop_CropAreaGrid:before {
    content: " ";
    box-sizing: border-box;
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .5);
    top: 0;
    bottom: 0;
    left: 33.33%;
    right: 33.33%;
    border-top: 0;
    border-bottom: 0
}

.reactEasyCrop_CropAreaGrid:after {
    content: " ";
    box-sizing: border-box;
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .5);
    top: 33.33%;
    bottom: 33.33%;
    left: 0;
    right: 0;
    border-left: 0;
    border-right: 0
}

.energy-design-popup [data-slot=custom-popup-footer] button,
.energy-design-popup .energy-popup-actions>button {
    height: 44px
}

.energy-design-popup .energy-popup-actions {
    gap: 12px;
    padding: 16px 24px
}

.project-design-popup {
    width: min(600px, calc(100vw - 32px))
}

.project-design-popup [data-slot=custom-popup-header] {
    border-bottom: 0;
    padding: 24px 24px 6px
}

.project-design-popup [data-slot=custom-popup-header] h2 {
    overflow: visible;
    white-space: normal;
    font-size: 22px;
    line-height: 1.3;
    padding-right: 24px
}

.project-design-popup [data-slot=custom-popup-header]>button {
    position: absolute;
    right: 12px;
    top: 12px;
    width: 24px;
    height: 24px
}

.project-design-popup [data-slot=custom-popup-body] {
    padding: 0 24px 24px
}

.project-design-popup [data-slot=custom-popup-footer] {
    position: static;
    border-top: 0;
    margin: 32px 0 0;
    padding: 0;
    gap: 12px
}

.project-design-popup [role=combobox] {
    height: 44px
}

.project-design-popup[data-size=compact] {
    width: min(460px, calc(100vw - 32px))
}

@media(max-width:640px) {
    .project-design-popup {
        inset: 50% auto auto 50%;
        max-height: calc(100dvh - 32px);
        max-width: calc(100vw - 32px);
        transform: translate(-50%, -50%)
    }

    .project-design-popup [data-slot=custom-popup-footer] {
        flex-wrap: wrap
    }
}

.energy-tariff-popup [data-slot=custom-popup-body]>div>.flex:first-child {
    flex-wrap: wrap
}

.energy-tariff-popup [data-slot=custom-popup-body]>div>.flex:first-child>div {
    flex: 1 1 220px;
    min-width: 0
}

.energy-tariff-popup [data-slot=custom-popup-body]>div>.grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.energy-tariff-popup [data-slot=custom-popup-body]>div>.grid>div {
    min-width: 0;
    overflow-x: auto
}

.energy-tariff-popup .rounded.flex.justify-end {
    gap: 12px;
    padding: 16px 24px
}

.energy-tariff-popup .rounded.flex.justify-end>button {
    height: 44px
}

@media(max-width:900px) {
    .energy-tariff-popup [data-slot=custom-popup-body]>div>.grid {
        grid-template-columns: minmax(0, 1fr)
    }
}

.project-design-popup [data-slot=custom-popup-footer] button {
    min-width: 0;
    padding-inline: 20px
}

.energy-design-popup [data-slot=custom-popup-header]>button:not(:disabled) {
    cursor: pointer
}

.energy-tab [role=tab]:not(:disabled),
.project-design-popup [role=tab]:not(:disabled) {
    cursor: pointer
}

.sup,
.sup-tip,
.sup-tip-card,
.sup-cp-pop,
.sup-dialog,
.sup-menu {
    --sup-bg: #0a0b0d;
    --sup-canvas-bg: #14161a;
    --sup-surface: #16181c;
    --sup-surface-2: #202329;
    --sup-surface-3: #2a2e35;
    --sup-border: rgba(255, 255, 255, .08);
    --sup-border-strong: rgba(255, 255, 255, .14);
    --sup-text: #f4f5f7;
    --sup-text-dim: #a2a8b0;
    --sup-text-faint: #6c727b;
    --sup-accent: var(--color-blue-500, #3182ce);
    --sup-progress-accent: var(--color-blue-400, #5092d0);
    --sup-accent-hover: #2b74ba;
    --sup-accent-fg: #ffffff;
    --sup-ok: #30d158;
    --sup-warn: #eda93c;
    --sup-solar: #e6b35d;
    --sup-danger: #ff6066;
    --sup-info: #3dcbf0;
    --sup-ok-ink: #34c759;
    --sup-warn-ink: #ff9500;
    --sup-danger-ink: #ff383c;
    --sup-solar-ink: #e6b35d;
    --sup-info-ink: #3dcbf0;
    --sup-dot: rgba(255, 255, 255, .06);
    --sup-invert-bg: #ffffff;
    --sup-invert-fg: #111318;
    --sup-knob: #ffffff;
    --sup-hover-soft: rgba(35, 38, 44, .5);
    --sup-scrim: rgba(6, 8, 12, .5);
    --sup-ink-halo: rgba(0, 0, 0, .5);
    --sup-r-pill: 999px;
    --sup-r-lg: 14px;
    --sup-r-md: 10px;
    --sup-r-sm: 8px;
    --sup-r-xs: 6px;
    --sup-r-shell: 20px;
    --sup-shell-wall: 5px;
    --sup-space-1: 2px;
    --sup-space-2: 4px;
    --sup-space-3: 6px;
    --sup-space-4: 8px;
    --sup-space-5: 10px;
    --sup-space-6: 12px;
    --sup-space-7: 14px;
    --sup-space-8: 16px;
    --sup-space-9: 18px;
    --sup-space-10: 20px;
    --sup-space-12: 24px;
    --sup-space-16: 32px;
    --sup-dur-fast: .14s;
    --sup-dur: .16s;
    --sup-dur-slow: .18s;
    --sup-sheen: rgba(255, 255, 255, .05);
    --sup-ease-out: cubic-bezier(.32, .72, 0, 1);
    --sup-glass-bg: rgba(22, 24, 28, .6);
    --sup-glass-blur: 40px;
    --sup-tray-bg: rgba(30, 33, 39, .72);
    --sup-rail-w: 56px;
    --sup-topbar-h: 56px;
    --sup-shadow: 0 12px 32px rgba(0, 0, 0, .45);
    --sup-shadow-sm: 0 2px 8px rgba(0, 0, 0, .35);
    --sup-shadow-xs: 0 2px 4px rgba(0, 0, 0, .35);
    --sup-shadow-tip: 0 4px 12px rgba(0, 0, 0, .4);
    --sup-shadow-strip: 0 4px 16px rgba(0, 0, 0, .3)
}

.sup {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--sup-bg);
    color: var(--sup-text);
    font-family: var(--font-sans, "SF Pro", system-ui, sans-serif);
    font-feature-settings: "cv11", "ss03", "tnum";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.3;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none
}

.sup-tip,
.sup-tip-card,
.sup-cp-pop,
.sup-dialog,
.sup-menu {
    font-family: var(--font-sans, "SF Pro", system-ui, sans-serif);
    font-feature-settings: "cv11", "ss03", "tnum";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.3;
    -webkit-user-select: none;
    user-select: none
}

.sup-menu {
    position: fixed;
    z-index: 70
}

.sup {
    --sup-dock: 0px
}

.sup.has-dock {
    --sup-dock: 384px
}

.sup-canvas {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: var(--sup-dock);
    background-color: var(--sup-bg);
    background-image: radial-gradient(var(--sup-dot) 1px, transparent 1px);
    background-size: 22px 22px;
    background-position: center;
    transition: right .26s cubic-bezier(.16, 1, .3, 1)
}

.sup-canvas-hint {
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--sup-text-faint);
    font-size: 13px;
    pointer-events: none
}

.sup-canvas-hint .sup-kbd {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    margin: 0 2px;
    border: 1px solid var(--sup-border-strong);
    border-radius: 6px;
    background: var(--sup-surface-2);
    color: var(--sup-text-dim);
    font-size: 12px
}

.sup-canvas-hint strong {
    color: var(--sup-text);
    font-weight: 600
}

.sup-canvas-shell {
    position: absolute;
    top: 0;
    right: var(--sup-dock);
    bottom: 0;
    left: 0;
    overflow: hidden;
    background: var(--sup-canvas-bg);
    transition: right .26s cubic-bezier(.16, 1, .3, 1)
}

.sup-engine-canvas {
    width: 100%;
    height: 100%;
    touch-action: none;
    transition: opacity .18s cubic-bezier(.32, .72, 0, 1)
}

.sup-engine-canvas:focus,
.sup-engine-canvas:focus-visible {
    outline: none
}

.sup-canvas-state {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 72px 24px 24px;
    background: color-mix(in srgb, var(--sup-bg) 78%, transparent);
    color: var(--sup-text);
    text-align: center
}

.sup-canvas-state--terminal {
    z-index: 20;
    flex-direction: column;
    gap: 10px;
    background: color-mix(in srgb, var(--sup-bg) 92%, transparent)
}

.sup-canvas-state--terminal>span,
.sup-canvas-state--boundary>span {
    max-width: 34rem;
    color: var(--sup-text-dim);
    font-size: 14px;
    line-height: 1.5
}

.sup-canvas-state-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 6px
}

.sup-canvas-state--boundary {
    z-index: 40;
    flex-direction: column;
    gap: 12px;
    min-height: 100%;
    background: var(--sup-bg)
}

.sup-canvas-state-loading {
    animation: sup-canvas-state-breathe 1.8s ease-in-out infinite
}

@keyframes sup-canvas-state-breathe {

    0%,
    to {
        opacity: .65
    }

    50% {
        opacity: 1
    }
}

@media(prefers-reduced-motion:reduce) {
    .sup-canvas-state-loading {
        opacity: 1;
        animation: none
    }
}

html.light .sup,
html.light .sup-tip,
html.light .sup-tip-card,
html.light .sup-cp-pop,
html.light .sup-dialog,
html.light .sup-menu {
    --sup-bg: #f5f6f8;
    --sup-surface: #ffffff;
    --sup-progress-accent: var(--color-blue-600, #2569ad);
    --sup-surface-2: #eef0f4;
    --sup-surface-3: #e3e6ec;
    --sup-border: rgba(15, 23, 42, .1);
    --sup-border-strong: rgba(15, 23, 42, .16);
    --sup-text: #10131a;
    --sup-text-dim: #4c525c;
    --sup-text-faint: #767d88;
    --sup-ok: #009d47;
    --sup-warn: #b65b00;
    --sup-solar: #c47a00;
    --sup-danger: #e40c1a;
    --sup-info: #0091b5;
    --sup-ok-ink: #34c759;
    --sup-warn-ink: #ff9500;
    --sup-danger-ink: #ff383c;
    --sup-solar-ink: #8b6100;
    --sup-info-ink: #00708c;
    --sup-dot: rgba(15, 23, 42, .09);
    --sup-invert-bg: #10131a;
    --sup-invert-fg: #ffffff;
    --sup-knob: #ffffff;
    --sup-hover-soft: rgba(15, 23, 42, .07);
    --sup-scrim: rgba(15, 23, 42, .28);
    --sup-sheen: transparent;
    --sup-glass-bg: rgba(255, 255, 255, .6);
    --sup-tray-bg: rgba(221, 225, 233, .72);
    --sup-shadow: 0 12px 32px rgba(15, 23, 42, .14);
    --sup-shadow-sm: 0 2px 8px rgba(15, 23, 42, .14);
    --sup-shadow-xs: 0 2px 4px rgba(15, 23, 42, .12);
    --sup-shadow-tip: 0 4px 12px rgba(15, 23, 42, .16);
    --sup-shadow-strip: 0 4px 16px rgba(15, 23, 42, .1)
}

html.light .sup .sup-stage-chip {
    background: color-mix(in srgb, var(--sup-accent) 12%, transparent);
    color: color-mix(in srgb, var(--sup-accent) 78%, var(--sup-text))
}

html.light .sup .sup-dtab-fill {
    background: var(--sup-surface)
}

html.light .sup .sup-brand {
    border-color: var(--sup-border-strong)
}

.sup-sld-host,
.sup-sld-dialog {
    --background-primary: var(--sup-bg);
    --background-secondary: var(--sup-surface);
    --card-bg: var(--sup-surface-2);
    --color-lightgray: var(--sup-surface-2);
    --primary-text: var(--sup-text);
    --secondary-text: var(--sup-text-dim);
    --text-secondary: var(--sup-text-dim);
    --disabled-text: var(--sup-text-faint);
    --error-text: var(--sup-danger);
    --primary: var(--sup-accent);
    --text-w: var(--sup-accent-fg);
    --border-primary-color: var(--sup-border);
    --border-secondary-color: var(--sup-border-strong);
    --sup-sld-tint-ok: color-mix(in srgb, var(--sup-ok) 14%, transparent);
    --sup-sld-tint-warn: color-mix(in srgb, var(--sup-warn) 14%, transparent);
    --sup-sld-tint-danger: color-mix(in srgb, var(--sup-danger) 14%, transparent);
    --sup-sld-tint-accent: color-mix(in srgb, var(--sup-accent) 14%, transparent);
    --sup-sld-tint-on-accent: color-mix(in srgb, var(--sup-accent-fg) 20%, transparent)
}

.sup-topbar {
    position: absolute;
    top: 12px;
    left: 0;
    right: var(--sup-dock);
    height: var(--sup-topbar-h);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0 12px;
    z-index: 30;
    pointer-events: none;
    transition: right .26s cubic-bezier(.16, 1, .3, 1)
}

.sup-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 8px;
    background: var(--sup-surface);
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-md);
    box-shadow: var(--sup-shadow-strip);
    pointer-events: auto
}

.sup-brand-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 2px 4px;
    border: 0;
    border-radius: var(--sup-r-md);
    background: transparent;
    cursor: pointer;
    transition: background-color .14s ease
}

.sup-brand-trigger:hover,
.sup-brand-trigger.is-open,
.sup-brand-trigger:focus-visible {
    background: var(--sup-hover-soft);
    outline: none
}

.sup-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--sup-r-md);
    overflow: hidden
}

.sup-brand-mark img {
    display: block
}

.sup-brand-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--sup-text-dim)
}

.sup-brand-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25
}

.sup-brand-name {
    max-width: min(34vw, 360px, var(--sup-brand-name-max, 9999px));
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    color: var(--sup-text);
    text-overflow: ellipsis;
    white-space: nowrap
}

.sup-brand-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--sup-text-dim)
}

.sup-stage-chip {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 1px 8px;
    border-radius: var(--sup-r-pill);
    background: color-mix(in srgb, var(--sup-accent) 18%, transparent);
    color: color-mix(in srgb, var(--sup-accent) 60%, var(--sup-text));
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap
}

.sup-stage-progress {
    white-space: nowrap
}

.sup-top-center {
    position: absolute;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: auto;
    transform: translate(-50%)
}

.sup-top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: auto
}

.sup-mode-actions {
    display: flex;
    align-items: center;
    gap: 10px
}

.sup-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border-radius: var(--sup-r-pill);
    border: 1px solid var(--sup-border);
    background: var(--sup-surface);
    color: var(--sup-text);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease
}

.sup-pill:not(:disabled, .sup-pill--primary):hover {
    background: var(--sup-surface-2);
    border-color: var(--sup-border-strong)
}

.sup-pill:disabled {
    cursor: not-allowed;
    opacity: .55
}

.sup-pill svg {
    color: var(--sup-text-dim)
}

.sup-pill--primary {
    background: var(--sup-accent);
    border-color: transparent;
    color: var(--sup-accent-fg)
}

.sup-pill--primary:not(:disabled):hover {
    background: var(--sup-accent-hover)
}

.sup-pill--primary svg {
    color: var(--sup-accent-fg)
}

.sup-pill--zoom {
    gap: 4px;
    padding: 0 10px;
    color: var(--sup-text-dim)
}

.sup-design-menu-label {
    margin-right: auto;
    min-width: 0
}

.sup-design-menu-item>svg,
.sup-design-menu-item>.sup-design-menu-icon {
    flex: none;
    color: var(--sup-text-dim)
}

.sup-design-menu-item.is-muted>svg {
    color: var(--sup-text-faint)
}

.sup-design-menu-value {
    flex: none;
    color: var(--sup-text-faint);
    font-size: 12px
}

.sup-rail {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 6px;
    background: var(--sup-surface);
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-lg);
    box-shadow: var(--sup-shadow)
}

.sup-stage-select {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 3px;
    border-radius: var(--sup-r-md);
    background: var(--sup-bg);
    border: 1px solid var(--sup-border)
}

.sup-stage-opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 8px;
    border-radius: var(--sup-r-sm);
    background: transparent;
    border: 0;
    color: var(--sup-text-faint);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease
}

.sup-stage-opt:hover:not(.is-active) {
    color: var(--sup-text-dim)
}

.sup-stage-opt.is-active {
    background: var(--sup-accent);
    color: var(--sup-accent-fg)
}

.sup-rail-sep {
    width: 26px;
    height: 1px;
    background: var(--sup-border);
    margin: 4px 0
}

.sup-rail-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--sup-r-md);
    background: transparent;
    color: var(--sup-text-faint);
    border: 0;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease
}

.sup-rail-btn:hover:not(.is-on) {
    background: var(--sup-surface-2);
    color: var(--sup-text)
}

.sup-rail-btn.is-active {
    background: var(--sup-surface-2);
    color: var(--sup-accent)
}

.sup-rail-btn.is-on {
    background: var(--sup-accent);
    color: var(--sup-accent-fg)
}

.sup-palette-shell {
    position: absolute;
    top: 50%;
    left: 72px;
    transform: translateY(-50%);
    display: flex;
    padding: var(--sup-shell-wall);
    max-height: calc(100dvh - 24px);
    border-radius: var(--sup-r-shell);
    background: var(--sup-tray-bg);
    -webkit-backdrop-filter: blur(var(--sup-glass-blur));
    backdrop-filter: blur(var(--sup-glass-blur));
    box-shadow: var(--sup-shadow), inset 0 0 0 1px var(--sup-border);
    z-index: 40;
    animation: sup-palette-rail-in .34s var(--sup-ease-out) both
}

.sup-palette {
    position: relative;
    width: 340px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--sup-surface);
    border-radius: calc(var(--sup-r-shell) - var(--sup-shell-wall));
    box-shadow: inset 0 0 0 1px var(--sup-border), inset 0 1px 0 var(--sup-sheen);
    overflow: hidden
}

.sup-palette-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--sup-border)
}

.sup-palette-search svg {
    color: var(--sup-text-faint);
    flex: none
}

.sup-palette-search input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--sup-text);
    font-size: 15px;
    letter-spacing: -.01em
}

.sup-palette-search input::placeholder {
    color: var(--sup-text-faint)
}

.sup-palette-body {
    position: relative;
    flex: 1;
    overflow-y: auto;
    padding: 8px 8px 4px
}

.sup-palette-fill {
    position: absolute;
    top: 0;
    left: 8px;
    right: 8px;
    border-radius: var(--sup-r-md);
    background: var(--sup-surface-2);
    box-shadow: inset 2px 0 0 var(--sup-accent), inset 0 1px 0 var(--sup-sheen);
    pointer-events: none;
    will-change: transform;
    transition: transform .34s var(--sup-ease-out), height .34s var(--sup-ease-out), opacity .18s ease
}

.sup-palette-group-label {
    padding: 10px 8px 5px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sup-text-faint)
}

.sup-palette-item {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    border-radius: var(--sup-r-md);
    animation: sup-row-in .34s var(--sup-ease-out) backwards;
    animation-delay: calc(min(var(--i, 0), 8)*16ms)
}

.sup-palette-item-action {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    padding: 9px 10px;
    border-radius: inherit;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    text-align: left
}

.sup-palette-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--sup-r-sm);
    background: var(--sup-surface-2);
    box-shadow: inset 0 0 0 1px var(--sup-border);
    color: var(--sup-text-dim);
    flex: none;
    transition: transform .34s var(--sup-ease-out), background-color .2s ease, color .2s ease
}

.sup-palette-item.is-active .sup-palette-item-icon {
    background: color-mix(in srgb, var(--sup-accent) 18%, var(--sup-surface-2));
    color: var(--sup-text);
    transform: scale(1.06)
}

.sup-palette-item-go {
    flex: none;
    font-size: 12px;
    color: var(--sup-text-faint);
    opacity: 0;
    transform: translate(-4px);
    transition: opacity .2s ease, transform .34s var(--sup-ease-out)
}

.sup-palette-item.is-active .sup-palette-item-go {
    opacity: 1;
    transform: none
}

.sup-palette-item-main {
    flex: 1;
    min-width: 0
}

.sup-palette-item-title {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--sup-text)
}

.sup-palette-item-desc {
    display: block;
    font-size: 12px;
    color: var(--sup-text-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.sup-palette-item-kbd {
    font-size: 11px;
    color: var(--sup-text-faint);
    box-shadow: inset 0 0 0 1px var(--sup-border);
    border-radius: 6px;
    padding: 2px 6px;
    flex: none;
    transition: color .2s ease
}

.sup-palette-item.is-active .sup-palette-item-kbd {
    color: var(--sup-text-dim)
}

.sup-palette-item-tag {
    flex: none;
    padding: 2px 7px;
    border-radius: 6px;
    border: 1px dashed var(--sup-border-strong);
    color: var(--sup-text-faint);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase
}

.sup-palette-empty {
    padding: 24px 12px;
    text-align: center;
    font-size: 13px;
    color: var(--sup-text-faint)
}

.sup-palette-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px;
    border-top: 1px solid var(--sup-border);
    background: var(--sup-surface)
}

.sup-palette-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 2px;
    border-radius: var(--sup-r-sm);
    background: transparent;
    border: 0;
    color: var(--sup-text-faint);
    font-size: 11px;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease
}

.sup-palette-tab:hover:not(.is-active) {
    background: var(--sup-surface-2);
    color: var(--sup-text-dim)
}

.sup-palette-foot {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 14px;
    border-top: 1px solid var(--sup-border);
    background: var(--sup-surface-2);
    font-size: 11px;
    color: var(--sup-text-faint)
}

.sup-palette-foot-count {
    margin-left: auto;
    font-variant-numeric: tabular-nums
}

.sup-palette-foot span {
    display: inline-flex;
    align-items: center;
    gap: 4px
}

.sup-palette-foot kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border: 1px solid var(--sup-border);
    border-radius: 4px;
    background: var(--sup-surface);
    font-family: inherit;
    font-size: 10px;
    line-height: 1;
    color: var(--sup-text-dim)
}

.sup-coords {
    position: absolute;
    left: 12px;
    bottom: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 10px;
    border-radius: var(--sup-r-pill);
    background: var(--sup-surface);
    border: 1px solid var(--sup-border);
    font-size: 12px;
    color: var(--sup-text-dim);
    font-variant-numeric: tabular-nums;
    pointer-events: none
}

.sup-coords b {
    color: var(--sup-text-faint);
    font-weight: 600;
    margin-right: 4px
}

.sup-bottom-right {
    position: absolute;
    right: calc(var(--sup-dock) + 12px);
    bottom: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: calc(100vw - var(--sup-dock) - 24px);
    z-index: 20;
    transition: right .26s cubic-bezier(.16, 1, .3, 1)
}

@media(max-width:1535px) {
    .sup-bottom-right .sup-queue {
        display: none
    }
}

@media(max-width:900px) {
    .sup-bottom-right {
        bottom: 72px
    }
}

.sup-queue {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 38px;
    padding: 0 6px 0 14px;
    border-radius: var(--sup-r-pill);
    background: var(--sup-surface);
    border: 1px solid var(--sup-border);
    color: var(--sup-text);
    font-size: 13px;
    cursor: pointer
}

.sup-queue:hover {
    background: var(--sup-surface-2)
}

.sup-queue b {
    font-weight: 600
}

.sup-queue-count {
    color: var(--sup-text-dim);
    font-weight: 400
}

.sup-queue-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--sup-r-pill);
    background: var(--sup-surface-2);
    color: var(--sup-text-dim)
}

.sup-clara {
    --sup-clara-bg: #16181c;
    --sup-clara-border: rgba(255, 255, 255, .1);
    --sup-clara-fg: #e6e9ee;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 5px 20px 5px 5px;
    border-radius: var(--sup-r-pill);
    background: var(--sup-clara-bg);
    border: 1px solid var(--sup-clara-border);
    color: var(--sup-clara-fg);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: var(--sup-shadow-sm);
    transition: background-color .14s ease, transform .12s ease
}

.sup-clara:hover {
    background: #1c1f25;
    transform: translateY(-1px)
}

.sup-clara:focus-visible {
    outline: 2px solid var(--sup-accent);
    outline-offset: 2px
}

.sup-clara-orb {
    display: block;
    width: 38px;
    height: 38px;
    overflow: hidden;
    border-radius: var(--sup-r-pill);
    flex: none
}

.sup-clara-orb>canvas {
    display: block;
    transform: scale(.594);
    transform-origin: top left
}

.sup-details {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 384px;
    display: flex;
    flex-direction: column;
    background: var(--sup-bg);
    border-left: 1px solid var(--sup-border);
    z-index: 46;
    overflow: hidden;
    animation: sup-dock-in .26s cubic-bezier(.16, 1, .3, 1)
}

@keyframes sup-dock-in {
    0% {
        transform: translate(100%)
    }

    to {
        transform: translate(0)
    }
}

@media(prefers-reduced-motion:reduce) {

    .sup-canvas,
    .sup-canvas-shell,
    .sup-topbar,
    .sup-bottom-right,
    .sup-bar {
        transition: none
    }

    .sup-details {
        animation: none
    }
}

.sup-details-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 10px 11px 16px;
    background: var(--sup-surface);
    border-bottom: 1px solid var(--sup-border)
}

.sup-details-title {
    font-size: 15px;
    font-weight: 600
}

.sup-details-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.sup-details-body>* {
    flex-shrink: 0
}

.sup-details-body[hidden] {
    display: none
}

.sup-seg-body--rows {
    padding: 10px 12px;
    gap: 10px
}

.sup-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.sup-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-md);
    background: var(--sup-bg)
}

.sup-tile-label {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--sup-text-faint)
}

.sup-tile-value {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sup-text);
    font-variant-numeric: tabular-nums
}

.sup-tile-value small,
.sup-row-val small {
    margin-left: 3px;
    font-size: 12px;
    font-weight: 400;
    color: var(--sup-text-dim)
}

.sup-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 8px 0;
    font-size: 12.5px;
    text-align: left;
    background: transparent
}

.sup-row-key {
    color: var(--sup-text-dim);
    min-width: 0
}

.sup-row-key.has-info,
.sup-tile-label.has-info {
    text-decoration: underline dotted;
    text-decoration-color: var(--sup-text-faint);
    text-underline-offset: 3px;
    cursor: help
}

.sup-row-val {
    color: var(--sup-text);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap
}

.sup-row-end {
    display: inline-flex;
    align-items: center;
    gap: 8px
}

.sup-row--link {
    border: 0;
    border-radius: var(--sup-r-sm);
    margin-inline: -6px;
    padding-inline: 6px;
    width: calc(100% + 12px);
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease
}

.sup-row--link svg {
    color: var(--sup-text-faint);
    flex: none;
    transition: transform .16s ease
}

.sup-row--link:hover {
    background: var(--sup-surface-2)
}

.sup-row--link:hover .sup-row-key {
    color: var(--sup-text)
}

.sup-row--link:hover svg {
    color: var(--sup-text-dim);
    transform: translate(2px)
}

.sup-row--link:focus-visible {
    outline: 2px solid var(--sup-accent);
    outline-offset: -2px
}

@media(prefers-reduced-motion:reduce) {

    .sup-row--link,
    .sup-row--link svg {
        transition: none
    }

    .sup-row--link:hover svg {
        transform: none
    }
}

.sup-details-foot {
    padding: 12px;
    background: var(--sup-surface);
    border-top: 1px solid var(--sup-border)
}

.sup-details-foot .sup-pill {
    width: 100%;
    justify-content: center;
    height: 40px
}

.sup-props {
    position: absolute;
    --sup-props-w: 300px;
    --sup-props-inline-overflow: 18px;
    top: calc(var(--sup-topbar-h) + 12px);
    right: calc(var(--sup-dock) + 12px);
    transition: top .16s var(--sup-ease-out);
    width: var(--sup-props-w);
    box-sizing: content-box;
    padding-inline: var(--sup-props-inline-overflow);
    margin-inline: calc(0px - var(--sup-props-inline-overflow));
    max-height: calc(100vh - var(--sup-topbar-h) - 90px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 28;
    animation: sup-props-in .18s ease
}

.sup-props>* {
    flex: none
}

.sup-props.is-stowed {
    right: calc(var(--sup-dock) - var(--sup-props-w));
    z-index: 27;
    overflow: visible;
    opacity: .3;
    transition: transform .24s cubic-bezier(.16, 1, .3, 1), opacity .24s ease, right .26s cubic-bezier(.16, 1, .3, 1)
}

.sup-props.is-stowed.is-peeking {
    transform: translate(calc(var(--sup-props-w) / -5))
}

.sup .sup-props-handle-anchor {
    position: absolute;
    top: calc(var(--sup-topbar-h) + 30px);
    right: calc(var(--sup-dock) + 2px);
    z-index: 29;
    transition: right .26s cubic-bezier(.16, 1, .3, 1)
}

.sup-props-handle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px 6px 12px;
    border: 1px solid var(--sup-border);
    border-right: 0;
    border-radius: var(--sup-r-md) 0 0 var(--sup-r-md);
    background: var(--sup-surface);
    color: var(--sup-text-dim);
    cursor: grab;
    box-shadow: var(--sup-shadow-sm);
    transition: background-color .14s ease, color .14s ease
}

.sup-props-handle:hover {
    background: var(--sup-surface-2);
    color: var(--sup-text)
}

.sup-props-handle:active {
    cursor: grabbing
}

.sup-props-handle:focus-visible {
    outline: 2px solid var(--sup-accent);
    outline-offset: 2px
}

.sup-props-grip {
    width: 3px;
    height: 26px;
    border-radius: var(--sup-r-pill);
    background: currentColor;
    opacity: .45
}

.sup-props-handle-label {
    writing-mode: vertical-rl;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
    max-height: 120px;
    overflow: hidden
}

@media(prefers-reduced-motion:reduce) {
    .sup-props.is-stowed {
        transition: none
    }
}

@container studio (max-width: 549px) {
    .sup:not(.has-dock) .sup-props:not(.is-stowed) {
        --sup-props-inline-overflow: 0px
    }
}

@keyframes sup-props-in {
    0% {
        opacity: 0;
        transform: translateY(-6px)
    }

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

.sup-props-head {
    background: var(--sup-surface);
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-lg);
    padding: 12px
}

.sup-props-head-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

.sup-props-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--sup-text)
}

.sup-props-head-actions {
    display: inline-flex;
    gap: 2px
}

.sup-props-info {
    margin: 10px 0 0;
    display: flex;
    flex-direction: column
}

.sup-props-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 12px
}

.sup-props-info-row dt {
    color: var(--sup-text-faint)
}

.sup-props-info-row dd {
    margin: 0;
    color: var(--sup-text);
    font-weight: 500
}

.sup-props-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--sup-border)
}

.sup-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--sup-r-sm);
    background: transparent;
    border: 0;
    color: var(--sup-text-dim);
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease
}

.sup-icon-btn.is-on {
    background: color-mix(in srgb, var(--sup-accent) 18%, transparent);
    color: color-mix(in srgb, var(--sup-accent) 60%, var(--sup-text))
}

.sup-icon-btn:disabled {
    cursor: not-allowed;
    opacity: .4
}

.sup-icon-btn:hover:not(:disabled, .sup-icon-btn--danger, .is-on) {
    background: var(--sup-surface-2);
    color: var(--sup-text)
}

.sup-seg {
    background: var(--sup-surface);
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-md);
    overflow: hidden
}

.sup-seg-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 11px 12px;
    background: transparent;
    border: 0;
    cursor: pointer
}

.sup-seg-title {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--sup-text)
}

.sup-seg-chev {
    color: var(--sup-text-faint);
    display: inline-flex;
    transition: transform .16s ease
}

.sup-seg:not(.is-open) .sup-seg-chev {
    transform: rotate(-90deg)
}

.sup-seg-body {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid var(--sup-border)
}

.sup-seg-body:first-child {
    border-top: 0
}

.sup-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

.sup-field-label {
    color: var(--sup-text-dim)
}

.sup-field-input {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--sup-bg);
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-sm);
    padding: 0 8px;
    transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease
}

.sup-field-input:hover:not(:has(.sup-num[readonly])) {
    border-color: var(--sup-border-strong)
}

.sup-field-input:focus-within {
    background: var(--sup-surface);
    border-color: var(--sup-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sup-accent) 22%, transparent)
}

.sup-num {
    width: 52px;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--sup-text);
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums
}

.sup-field-unit {
    font-size: 11px;
    color: var(--sup-text-faint)
}

.sup-field-end {
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.sup-num:disabled {
    color: var(--sup-text-faint)
}

.sup-color-field,
.sup-choice-field {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.sup-color-value {
    font-size: 12px;
    color: var(--sup-text-faint);
    font-variant-numeric: tabular-nums;
    text-transform: uppercase
}

.sup-swatches {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 6px
}

.sup-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: var(--sup-r-xs);
    border: 1px solid var(--sup-border);
    color: var(--sup-accent-fg);
    cursor: pointer;
    transition: box-shadow .12s ease
}

.sup-swatch.is-active {
    box-shadow: 0 0 0 1px var(--sup-surface), 0 0 0 3px var(--sup-accent)
}

.sup-swatch svg {
    filter: drop-shadow(0 1px 1px var(--sup-ink-halo))
}

.sup-swatch:focus-visible {
    outline: 2px solid var(--sup-accent);
    outline-offset: 2px
}

.sup-seg-body>.sup-color-field:not(:last-child),
.sup-seg-body>.sup-reveal:not(:last-child)>.sup-color-field {
    margin-bottom: 6px
}

.sup-appear,
.sup-appear-stack {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.sup-appear-field {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.sup-appear-hint {
    margin: 0;
    color: var(--sup-text-dim);
    font-size: 11px;
    line-height: 1.4
}

.sup-swatch--custom {
    background: conic-gradient(from 90deg, #f43f5e, #f59e0b, #facc15, #22c55e, #06b6d4, #3b82f6, #8b5cf6, #f43f5e)
}

.sup-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.sup-opt {
    padding: 5px 10px;
    border-radius: var(--sup-r-sm);
    border: 1px solid var(--sup-border);
    background: var(--sup-bg);
    color: var(--sup-text-dim);
    font-size: 12px;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease
}

.sup-opt:hover:not(:disabled):not(.is-active) {
    background: var(--sup-surface-2);
    color: var(--sup-text)
}

.sup-opt:disabled {
    cursor: not-allowed;
    opacity: .48
}

.sup-opt:focus-visible {
    outline: 2px solid var(--sup-accent);
    outline-offset: 2px
}

.sup-field--select {
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0
}

.sup-field-selval {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    height: var(--sup-field-h, 30px);
    font-size: var(--sup-field-fz, 12px);
    color: var(--sup-text);
    background: var(--sup-bg);
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-sm);
    padding: 0 10px
}

.sup-field-selval-text {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap
}

.sup-field-selval svg {
    flex: 0 0 auto;
    color: var(--sup-text-faint)
}

.sup-field--dims {
    gap: 8px
}

.sup-field-dim {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    background: var(--sup-bg);
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-sm);
    padding: 0 8px;
    height: var(--sup-field-h, 30px)
}

.sup-field-dim .sup-num {
    width: 100%
}

.sup-field-dim-key {
    font-size: 11px;
    color: var(--sup-text-faint)
}

.sup-field-dim-link {
    color: var(--sup-text-faint);
    font-size: 12px
}

.sup-summary-val {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: var(--sup-field-fz, 12px);
    color: var(--sup-text);
    font-variant-numeric: tabular-nums
}

.sup-field--summary .sup-field-label {
    color: var(--sup-text-faint)
}

.sup-field-input--text {
    flex: 1;
    min-width: 0;
    max-width: 158px
}

.sup-text {
    width: 100%;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--sup-text);
    font-size: var(--sup-field-fz, 12px)
}

.sup-text::placeholder {
    color: var(--sup-text-faint)
}

.sup-text[readonly] {
    cursor: default
}

.sup-text[type=number] {
    -webkit-appearance: textfield;
    appearance: textfield;
    -moz-appearance: textfield;
    font-variant-numeric: tabular-nums
}

.sup-text[type=number]::-webkit-outer-spin-button,
.sup-text[type=number]::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.sup-row-btn {
    width: 100%;
    padding: 7px 10px;
    border-radius: var(--sup-r-sm);
    border: 1px solid var(--sup-border);
    background: var(--sup-bg);
    color: var(--sup-text);
    font-size: 12px;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease
}

.sup-row-btn:hover:not(:disabled) {
    background: var(--sup-surface-2);
    border-color: var(--sup-border-strong, var(--sup-border))
}

.sup-row-btn:focus-visible {
    outline: 2px solid var(--sup-accent);
    outline-offset: 2px
}

.sup-row-btn:disabled {
    cursor: not-allowed;
    opacity: .55
}

.sup-field--select-wrap,
.sup-select {
    position: relative
}

.sup-field--select.is-open .sup-field-selval {
    border-color: color-mix(in srgb, var(--sup-accent) 45%, transparent)
}

.sup-select-menu {
    max-height: 216px;
    overflow-y: auto;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--sup-surface);
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-sm);
    box-shadow: var(--sup-shadow-sm)
}

.sup-select-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: var(--sup-r-sm);
    background: transparent;
    color: var(--sup-text-dim);
    font-size: 12px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer
}

.sup-select-opt--icon {
    justify-content: flex-start
}

.sup-select-opt-check {
    margin-left: auto
}

.sup-select-opt:hover:not(.is-active):not(:disabled) {
    background: var(--sup-surface-2);
    color: var(--sup-text)
}

.sup-select-opt:focus-visible {
    outline: 2px solid var(--sup-accent);
    outline-offset: -2px
}

.sup-select-opt:disabled {
    cursor: not-allowed;
    opacity: .48
}

.sup-field--select:focus-visible {
    outline: none
}

.sup-field--select:focus-visible .sup-field-selval {
    outline: 2px solid var(--sup-accent);
    outline-offset: 2px
}

.sup-field--select:hover:not(:disabled) .sup-field-selval {
    border-color: var(--sup-border-strong)
}

.sup-field--select:disabled {
    cursor: not-allowed
}

.sup-field--select:disabled .sup-field-selval {
    color: var(--sup-text-faint)
}

.sup-azi-select {
    display: inline-flex;
    min-width: 0
}

.sup-select-parent {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--sup-border)
}

.sup-select-parent>ul,
.sup-azi-parent>ul {
    margin: 0;
    padding: 0;
    list-style: none
}

.sup-menu-group {
    display: block;
    padding: 4px 8px 2px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sup-text-faint)
}

.sup-field {
    min-height: var(--sup-field-h, 30px)
}

.sup-field-label {
    font-size: var(--sup-field-fz, 12px)
}

.sup-field-input {
    height: var(--sup-field-h, 30px)
}

.sup-num {
    font-size: var(--sup-field-fz, 12px)
}

.sup-field-unit {
    flex: none
}

.sup-choice-field>.sup-field-input {
    flex: none;
    width: 100%;
    max-width: none
}

.sup-field--dlg {
    --sup-field-h: 34px;
    --sup-field-fz: 13px
}

.sup-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 10px 12px
}

.sup-field-grid-span {
    grid-column: 1 / -1
}

@media(max-width:720px) {
    .sup-field-grid {
        grid-template-columns: minmax(0, 1fr)
    }
}

.sup-row-btn--latch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px
}

.sup-spin {
    width: 12px;
    height: 12px;
    flex: none;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    opacity: .85;
    animation: sup-spin .7s linear infinite
}

@keyframes sup-spin {
    to {
        transform: rotate(360deg)
    }
}

@media(prefers-reduced-motion:reduce) {
    .sup-spin {
        animation: none
    }
}

.sup-row-btn--latch.is-on {
    border-color: color-mix(in srgb, var(--sup-accent) 45%, var(--sup-surface));
    background: color-mix(in srgb, var(--sup-accent) 14%, var(--sup-surface));
    color: color-mix(in srgb, var(--sup-accent) 65%, var(--sup-text))
}

.sup-scrub-top .sup-auto {
    margin-inline-start: 6px;
    padding: 0;
    border: 0;
    border-radius: var(--sup-r-sm);
    background: transparent;
    color: var(--sup-text-faint);
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    cursor: pointer;
    transition: color .12s ease
}

.sup-scrub-top .sup-auto.is-on {
    color: var(--sup-accent)
}

.sup-scrub-top .sup-auto:hover:not(:disabled):not(.is-on) {
    color: var(--sup-text-dim)
}

.sup-scrub-top .sup-auto:focus-visible {
    outline: 2px solid var(--sup-accent);
    outline-offset: 2px
}

.sup-scrub-top .sup-auto:disabled {
    cursor: not-allowed;
    opacity: .5
}

.sup-scrub.is-auto .sup-field-input,
.sup-scrub.is-derived .sup-field-input {
    background: transparent;
    border-color: transparent
}

.sup-scrub.is-auto .sup-num {
    cursor: pointer
}

.sup-scrub.is-derived .sup-field-label,
.sup-azi.is-derived>.sup-field-label {
    color: var(--sup-text-dim);
    font-weight: 600
}

.sup-ht {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 0 0;
    border-top: 1px solid var(--sup-border)
}

.sup-ht .sup-field {
    min-height: 0
}

.sup-scrub {
    display: flex;
    flex-direction: column;
    gap: 7px
}

.sup-scrub.is-disabled,
.sup-azi.is-disabled,
.sup-field.is-disabled {
    opacity: .5;
    pointer-events: none
}

.sup-scrub-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

.sup-scrub-end {
    display: flex;
    align-items: center;
    gap: 6px
}

.sup-scrub-reset {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: none;
    border: none;
    border-radius: var(--sup-r-sm);
    background: transparent;
    color: var(--sup-text-faint);
    cursor: pointer;
    transition: color .12s ease, background-color .12s ease, opacity .12s ease
}

.sup-scrub-reset:hover:not(:disabled) {
    background: var(--sup-surface-2);
    color: var(--sup-text)
}

.sup-scrub-reset:focus-visible {
    outline: 2px solid var(--sup-accent);
    outline-offset: 1px
}

.sup-scrub-reset:disabled {
    opacity: .3;
    cursor: default
}

.sup-field-input:has(.sup-num:disabled) {
    background: transparent;
    border-color: var(--sup-border)
}

.sup-slider {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 15px;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer
}

.sup-slider[data-disabled] {
    cursor: not-allowed
}

.sup-slider-track {
    position: relative;
    flex-grow: 1;
    height: 4px;
    border-radius: 999px;
    background: var(--sup-surface-3);
    overflow: hidden
}

.sup-slider-range {
    position: absolute;
    height: 100%;
    border-radius: inherit;
    background: var(--sup-accent)
}

.sup-slider-thumb {
    position: relative;
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--sup-knob);
    border: 2px solid var(--sup-accent);
    cursor: grab
}

.sup-slider-thumb:active {
    cursor: grabbing
}

.sup-slider-thumb:focus-visible {
    outline: 2px solid var(--sup-accent);
    outline-offset: 2px
}

.sup-slider-bubble {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translate(-50%);
    padding: 3px 7px;
    border-radius: var(--sup-r-sm);
    background: var(--sup-invert-bg);
    color: var(--sup-invert-fg);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none
}

.sup-slider-ends {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: var(--sup-text-faint)
}

@media(prefers-reduced-motion:reduce) {
    .sup-props {
        animation: none
    }
}

.sup-snav {
    --sup-snav-dur: .18s;
    display: flex;
    align-items: stretch;
    gap: 8px;
    border-bottom: 1px solid var(--sup-border);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none
}

.sup-snav::-webkit-scrollbar {
    display: none
}

.sup-snav-row {
    position: relative;
    display: flex;
    align-items: center;
    width: max-content
}

.sup-snav-hover,
.sup-snav-ink {
    position: absolute;
    pointer-events: none;
    transition: left var(--sup-snav-dur) var(--sup-ease-out), width var(--sup-snav-dur) var(--sup-ease-out), opacity var(--sup-snav-dur) var(--sup-ease-out)
}

.sup-snav-hover {
    top: 50%;
    height: 30px;
    transform: translateY(-50%);
    border-radius: var(--sup-r-sm);
    background: var(--sup-surface-2)
}

.sup-snav-ink {
    bottom: -1px;
    height: 2px;
    background: var(--sup-accent)
}

.sup-snav-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 12px;
    background: transparent;
    border: 0;
    color: var(--sup-text-dim);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--sup-snav-dur) ease
}

.sup-snav-tab+.sup-snav-tab:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    height: 14px;
    width: 1px;
    transform: translateY(-50%);
    background: var(--sup-border)
}

.sup-snav-tab:hover:not(.is-active, .is-disabled) {
    color: var(--sup-text)
}

.sup-snav-tab.is-active {
    color: var(--sup-text);
    font-weight: 600
}

.sup-snav-tab.is-disabled {
    color: var(--sup-text-faint);
    cursor: not-allowed
}

.sup-snav-tab:focus-visible {
    outline: 2px solid var(--sup-accent);
    outline-offset: -2px;
    border-radius: var(--sup-r-xs)
}

.sup-snav-end {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding-left: 8px
}

@media(prefers-reduced-motion:reduce) {

    .sup-snav-hover,
    .sup-snav-ink,
    .sup-snav-tab {
        transition: none
    }
}

.sup-azi {
    position: relative
}

.sup-azi-end {
    display: flex;
    align-items: center;
    gap: 6px
}

.sup-azi-box {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 4px 0 8px;
    border-radius: var(--sup-r-sm);
    border: 1px solid var(--sup-border);
    background: var(--sup-surface-2);
    transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease
}

.sup-azi-box:hover:not(:has(.sup-num:disabled)) {
    border-color: var(--sup-border-strong)
}

.sup-azi-box:focus-within {
    background: var(--sup-surface);
    border-color: var(--sup-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sup-accent) 22%, transparent)
}

.sup-azi.is-derived .sup-azi-box,
.sup-azi.is-derived .sup-azi-box:hover,
.sup-azi.is-derived .sup-azi-box:focus-within {
    background: transparent;
    border-color: transparent;
    box-shadow: none
}

.sup-azi-box .sup-field-input {
    height: auto;
    padding: 0;
    gap: 3px;
    border: 0;
    background: transparent;
    box-shadow: none
}

.sup-azi-box .sup-num {
    width: 44px;
    text-align: left
}

.sup-azi-box .sup-field-unit {
    color: var(--sup-text-dim);
    font-variant-numeric: tabular-nums
}

.sup-azi-box .sup-azi-trigger {
    gap: 0;
    height: 22px;
    padding: 0 2px;
    border: 0;
    border-radius: var(--sup-r-xs);
    background: transparent;
    color: var(--sup-text-dim)
}

.sup-azi-box .sup-azi-trigger:hover:not(:disabled),
.sup-azi-box .sup-azi-trigger.is-open {
    background: transparent;
    color: var(--sup-text)
}

.sup-azi-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 8px;
    border-radius: var(--sup-r-sm);
    border: 1px solid var(--sup-border);
    background: var(--sup-bg);
    color: var(--sup-text);
    font-size: 12px;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease
}

.sup-azi-trigger:hover:not(:disabled),
.sup-azi-trigger.is-open {
    border-color: var(--sup-border-strong);
    background: var(--sup-surface)
}

.sup-azi-trigger:focus-visible {
    outline: 2px solid var(--sup-accent);
    outline-offset: 2px
}

.sup-azi-trigger:disabled {
    cursor: not-allowed
}

.sup-azi-val {
    font-weight: 600;
    font-variant-numeric: tabular-nums
}

.sup-azi-needle {
    display: inline-flex;
    color: var(--sup-accent);
    transition: transform .18s ease
}

.sup-azi-menu {
    min-width: 168px;
    max-height: 280px;
    overflow-y: auto;
    margin: 0;
    padding: 5px;
    list-style: none;
    border-radius: var(--sup-r-md);
    border: 1px solid var(--sup-border);
    background: var(--sup-surface);
    box-shadow: var(--sup-shadow)
}

.sup-azi-opt {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 8px;
    border: 0;
    border-radius: var(--sup-r-sm);
    background: transparent;
    color: var(--sup-text);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-align: left;
    cursor: pointer
}

.sup-azi-opt:hover:not(.is-active) {
    background: var(--sup-surface-2)
}

.sup-azi-opt:focus-visible {
    outline: 2px solid var(--sup-accent);
    outline-offset: -2px
}

.sup-azi-parent {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid var(--sup-border)
}

.sup-azi-parent .sup-azi-opt {
    color: var(--sup-text-dim)
}

.sup-azi-parent .sup-azi-opt svg {
    transform: rotate(-90deg);
    color: var(--sup-text-faint)
}

@media(prefers-reduced-motion:reduce) {
    .sup-azi-needle {
        transition: none
    }
}

.sup-switch {
    position: relative;
    box-sizing: border-box;
    width: 40px;
    height: 20px;
    border-radius: var(--sup-r-pill);
    background: var(--sup-surface-3);
    border: 1px solid var(--sup-border-strong);
    cursor: pointer;
    padding: 0;
    flex: none;
    transition: background-color .15s ease, border-color .15s ease
}

.sup-switch.is-on {
    background: var(--sup-accent);
    border-color: var(--sup-accent)
}

.sup-switch:focus-visible {
    outline: 2px solid var(--sup-accent);
    outline-offset: 2px
}

.sup-switch:disabled {
    cursor: not-allowed;
    opacity: .55
}

.sup-switch-glyph {
    position: absolute;
    top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 9px;
    height: 9px;
    pointer-events: none;
    transition: opacity .14s ease
}

.sup-switch-glyph--on {
    left: 4px;
    color: var(--sup-accent-fg);
    opacity: 0
}

.sup-switch-glyph--off {
    right: 4px;
    color: var(--sup-text-dim);
    opacity: 1
}

.sup-switch.is-on .sup-switch-glyph--on {
    opacity: 1
}

.sup-switch.is-on .sup-switch-glyph--off {
    opacity: 0
}

.sup-switch-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--sup-knob);
    box-shadow: var(--sup-shadow-xs);
    transition: transform .15s ease
}

.sup-switch.is-on .sup-switch-knob {
    transform: translate(20px)
}

@media(prefers-reduced-motion:reduce) {

    .sup-switch,
    .sup-switch-glyph,
    .sup-switch-knob {
        transition: none
    }
}

.sup {
    --sup-overlay-gutter: 12px
}

.sup-cmd-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    background: radial-gradient(120% 55% at 50% 10%, color-mix(in srgb, var(--sup-accent) 9%, transparent), transparent 62%), var(--sup-scrim);
    -webkit-backdrop-filter: blur(8px) saturate(1.1);
    backdrop-filter: blur(8px) saturate(1.1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sup-overlay-gutter, 12px);
    animation: sup-fade .22s ease
}

@keyframes sup-fade {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.sup-palette-shell--center {
    position: static;
    transform: none;
    left: auto;
    animation: sup-palette-in .42s var(--sup-ease-out) both
}

.sup-palette-shell.sup-palette-shell--center {
    max-height: calc(100dvh - 2 * var(--sup-overlay-gutter, 12px));
    max-width: calc(100vw - 2 * var(--sup-overlay-gutter, 12px))
}

.sup-palette-shell--center .sup-palette {
    width: 100%;
    max-height: 100%
}

@keyframes sup-palette-in {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(.985);
        filter: blur(6px)
    }

    to {
        opacity: 1;
        transform: none;
        filter: blur(0)
    }
}

@keyframes sup-palette-rail-in {
    0% {
        opacity: 0;
        transform: translateY(-50%) translate(-8px) scale(.99)
    }

    to {
        opacity: 1;
        transform: translateY(-50%)
    }
}

@keyframes sup-row-in {
    0% {
        opacity: 0;
        transform: translateY(6px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@media(prefers-reduced-motion:reduce) {

    .sup-cmd-backdrop,
    .sup-palette-shell,
    .sup-palette-shell--center,
    .sup-palette-item {
        animation: none
    }

    .sup-palette-fill,
    .sup-palette-item-icon,
    .sup-palette-item-go {
        transition: none
    }
}

.sup {
    --sup-stats-h: 56px
}

.sup-stats-cluster {
    position: absolute;
    top: 12px;
    left: 50%;
    width: max-content;
    max-width: calc(100% - var(--sup-dock) - 24px);
    z-index: 29;
    pointer-events: none;
    transition: left .26s cubic-bezier(.16, 1, .3, 1)
}

.sup-stats-cluster>.sup-stats {
    position: relative;
    top: 0;
    left: 0;
    max-width: 100%
}

.sup-stats-finder {
    --sup-finder-below-top: calc(var(--sup-stats-h) + 8px);
    --sup-finder-below-left: calc(-50% - 8px);
    position: absolute;
    top: var(--sup-finder-top, 6px);
    right: var(--sup-finder-right, calc(150% + 12px));
    left: var(--sup-finder-left, auto);
    z-index: 1;
    pointer-events: auto
}

.sup .sup-stats-finder .sup-unstrung-finder__body {
    right: var(--sup-finder-popover-right, 0);
    left: var(--sup-finder-popover-left, auto)
}

.sup-stats {
    position: absolute;
    height: var(--sup-stats-h);
    top: 12px;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    align-items: stretch;
    gap: 2px;
    padding: 8px 6px;
    background: var(--sup-surface);
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-md);
    box-shadow: var(--sup-shadow-strip);
    z-index: 29
}

.sup.is-stats-stacked .sup-stats-cluster {
    top: calc(12px + var(--sup-topbar-h) + 8px)
}

.sup.is-stats-stacked .sup-history-dock {
    --sup-stats-top: calc(12px + var(--sup-topbar-h) + 8px)
}

.sup.is-stats-finder-below .sup-stats-finder {
    --sup-finder-top: var(--sup-finder-below-top);
    --sup-finder-right: auto;
    --sup-finder-left: var(--sup-finder-below-left);
    --sup-finder-popover-right: auto;
    --sup-finder-popover-left: 0
}

@container studio (max-width: 900px) {
    .sup:not(.has-dock) .sup-stats-finder {
        --sup-finder-top: var(--sup-finder-below-top);
        --sup-finder-right: auto;
        --sup-finder-left: var(--sup-finder-below-left);
        --sup-finder-popover-right: auto;
        --sup-finder-popover-left: 0
    }
}

@container studio (max-width: 1600px) {
    .sup.has-dock .sup-stats-finder {
        --sup-finder-top: var(--sup-finder-below-top);
        --sup-finder-right: auto;
        --sup-finder-left: var(--sup-finder-below-left);
        --sup-finder-popover-right: auto;
        --sup-finder-popover-left: 0
    }
}

.sup-stat-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px 14px;
    border-right: 1px solid var(--sup-border)
}

.sup-stat-col:last-child {
    border-right: 0
}

.sup-stat-col-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--sup-text-faint)
}

.sup-stat-col-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--sup-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap
}

.sup-stat-storage {
    background: transparent;
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    text-align: left;
    cursor: pointer
}

.sup-stat-storage .sup-stat-col-value {
    color: var(--sup-progress-accent)
}

.sup-stat-storage:disabled {
    cursor: default
}

.sup-history-dock {
    --sup-stats-top: 12px;
    position: absolute;
    top: calc(var(--sup-stats-top) + var(--sup-stats-h) + 8px);
    left: var(--sup-stats-center, calc((100% - var(--sup-dock)) / 2 + var(--sup-stats-x, 0px)));
    transform: translate(-50%);
    transition: left .26s cubic-bezier(.16, 1, .3, 1);
    pointer-events: auto;
    z-index: 29
}

.sup:has(.sup-stats-cluster) .sup-history-dock {
    left: calc((100% - var(--sup-dock)) / 2 + var(--sup-stats-x, 0px))
}

@container studio (max-width: 1240px) {
    .sup:not(.has-dock):not(:has(.sup-stats-cluster)) .sup-history-dock {
        --sup-stats-top: calc(var(--sup-topbar-h) + 8px)
    }
}

@container studio (max-width: 1624px) {
    .sup.has-dock:not(:has(.sup-stats-cluster)) .sup-history-dock {
        --sup-stats-top: calc(var(--sup-topbar-h) + 8px)
    }
}

@container studio (max-width: 549px) {
    .sup-history-dock {
        display: none
    }
}

@container studio (max-width: 950px) {
    .sup.has-dock .sup-history-dock {
        display: none
    }
}

.sup-clara-window,
.sup-clara-panel {
    display: flex;
    flex-direction: column;
    background: var(--sup-surface);
    color: var(--sup-text);
    z-index: 47;
    overflow: hidden
}

.sup-clara-window {
    position: absolute;
    right: 12px;
    bottom: 66px;
    width: 380px;
    height: min(560px, calc(100vh - 96px));
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-lg);
    box-shadow: var(--sup-shadow);
    animation: sup-props-in .16s ease
}

.sup-clara-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 384px;
    border-left: 1px solid var(--sup-border);
    animation: sup-dock-in .26s cubic-bezier(.16, 1, .3, 1)
}

@media(prefers-reduced-motion:reduce) {

    .sup-clara-window,
    .sup-clara-panel {
        animation: none
    }
}

.sup-clara-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px 12px 16px;
    border-bottom: 1px solid var(--sup-border)
}

.sup-clara-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 0;
    color: var(--sup-text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer
}

.sup-clara-head-actions {
    display: inline-flex;
    gap: 2px
}

.sup-clara-conv {
    flex: 1;
    min-height: 0
}

.sup-conv {
    position: relative;
    min-height: 0;
    width: 100%;
    height: 100%
}

.sup-conv-viewport {
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px
}

.sup-conv-jump {
    position: absolute;
    inset-inline: 0;
    bottom: 12px;
    margin-inline: auto;
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 10px;
    border-radius: var(--sup-r-pill);
    border: 1px solid var(--sup-border-strong);
    background: var(--sup-glass-bg);
    -webkit-backdrop-filter: blur(var(--sup-glass-blur));
    backdrop-filter: blur(var(--sup-glass-blur));
    color: var(--sup-text);
    font-size: 12px;
    cursor: pointer;
    box-shadow: var(--sup-shadow-sm)
}

.sup-clara-empty {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 20px;
    min-height: 100%
}

.sup-clara-greeting {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
    color: var(--sup-text)
}

.sup-clara-starters {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.sup-clara-suggestion {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 8px;
    border-radius: var(--sup-r-sm);
    background: transparent;
    border: 0;
    color: var(--sup-text-dim);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease
}

.sup-clara-suggestion:hover {
    background: var(--sup-surface-2);
    color: var(--sup-text)
}

.sup-clara-suggestion svg {
    color: var(--sup-text-faint);
    flex: none
}

.sup-clara-disclaimer {
    margin: 0;
    font-size: 11px;
    color: var(--sup-text-faint)
}

.sup-thread {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none
}

.sup-msg {
    display: flex;
    gap: 10px
}

.sup-msg--user {
    justify-content: flex-end
}

.sup-msg--user .sup-msg-body {
    max-width: 82%;
    padding: 9px 13px;
    border-radius: var(--sup-r-md);
    background: var(--sup-surface-2)
}

.sup-msg-orb {
    display: block;
    width: 34px;
    height: 34px;
    flex: none;
    overflow: hidden;
    border-radius: var(--sup-r-pill);
    background: var(--sup-surface-2)
}

.sup-msg-orb>canvas {
    display: block;
    transform: scale(.531);
    transform-origin: top left
}

.sup-msg-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding-top: 2px
}

.sup-msg-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--sup-text);
    white-space: pre-wrap
}

.sup-msg-phase {
    margin: 0;
    font-size: 12px;
    color: var(--sup-text-dim)
}

.sup-msg-phase:after {
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    margin-left: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: sup-phase-pulse 1.1s ease-in-out infinite
}

@keyframes sup-phase-pulse {

    0%,
    to {
        opacity: .25
    }

    50% {
        opacity: 1
    }
}

@media(prefers-reduced-motion:reduce) {
    .sup-msg-phase:after {
        animation: none
    }
}

.sup-sugg {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%
}

.sup-sugg-label {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--sup-text-faint)
}

.sup-sugg-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none
}

.sup-sugg-chip {
    padding: 6px 12px;
    border-radius: var(--sup-r-pill);
    border: 1px solid var(--sup-border);
    background: var(--sup-surface);
    color: var(--sup-text);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease
}

.sup-sugg-chip:hover {
    background: var(--sup-surface-2);
    border-color: var(--sup-border-strong)
}

.sup-clara-foot {
    padding: 0 13px 13px
}

.sup-composer {
    position: relative;
    width: 100%;
    padding: 10px 10px 8px;
    border-radius: var(--sup-r-lg);
    border: 1px solid var(--sup-border);
    background: var(--sup-bg);
    transition: border-color .14s ease
}

.sup-composer.is-focused {
    border-color: var(--sup-border-strong)
}

.sup-composer.is-disabled {
    opacity: .6
}

.sup-composer-input {
    display: block;
    width: 100%;
    max-height: 160px;
    padding: 0 2px 6px;
    border: 0;
    outline: none;
    resize: none;
    background: transparent;
    color: var(--sup-text);
    font-family: inherit;
    font-size: 14px;
    line-height: 20px
}

.sup-composer-input::placeholder {
    color: var(--sup-text-faint)
}

.sup-composer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

.sup-composer-attach {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--sup-r-sm);
    border: 0;
    background: transparent;
    color: var(--sup-text-faint);
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease
}

.sup-composer-attach:hover {
    background: var(--sup-surface-2);
    color: var(--sup-text)
}

.sup-composer-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--sup-r-md);
    border: 0;
    background: var(--sup-accent);
    color: var(--sup-accent-fg);
    cursor: pointer
}

.sup-composer-send:disabled {
    background: var(--sup-surface-2);
    color: var(--sup-text-faint);
    cursor: default
}

.sup-composer-send-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.sup-composer-files {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
    overflow: hidden
}

.sup-composer-file {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 4px 4px 8px;
    border-radius: var(--sup-r-sm);
    border: 1px solid var(--sup-border);
    background: var(--sup-surface);
    font-size: 12px;
    color: var(--sup-text)
}

.sup-composer-file-size {
    color: var(--sup-text-faint)
}

.sup-composer-file-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: var(--sup-r-xs, 6px);
    border: 0;
    background: transparent;
    color: var(--sup-text-faint);
    cursor: pointer
}

.sup-composer-file-remove:hover {
    background: var(--sup-surface-2);
    color: var(--sup-text)
}

.sup-brand {
    position: relative
}

.sup-design-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 60;
    width: 248px;
    padding: 6px;
    background: var(--sup-glass-bg);
    -webkit-backdrop-filter: blur(var(--sup-glass-blur));
    backdrop-filter: blur(var(--sup-glass-blur));
    border: 1px solid var(--sup-border-strong);
    border-radius: var(--sup-r-md);
    box-shadow: var(--sup-shadow)
}

.sup-design-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 9px 10px;
    background: transparent;
    border: 0;
    border-radius: var(--sup-r-sm);
    color: var(--sup-text);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background-color .12s ease
}

.sup-design-menu-item:not(:disabled):hover,
.sup-design-menu-item:not(:disabled):focus-visible {
    background: var(--sup-surface-2);
    outline: none
}

.sup-design-menu-item.is-muted {
    color: var(--sup-text-faint);
    cursor: not-allowed
}

.sup-design-menu-item.is-separated {
    margin-top: 7px;
    padding-top: 9px;
    background-image: linear-gradient(var(--sup-border), var(--sup-border));
    background-size: 100% 1px;
    background-position: top center;
    background-repeat: no-repeat
}

.sup-design-menu-item.is-separated:not(:disabled):hover,
.sup-design-menu-item.is-separated:not(:disabled):focus-visible {
    background-image: none
}

.sup-design-menu-kbd {
    color: var(--sup-text-faint);
    font-size: 12px
}

.sup-zoom {
    position: relative;
    display: inline-flex
}

.sup-zoom .sup-pill--zoom {
    justify-content: space-between;
    min-width: 74px;
    font-variant-numeric: tabular-nums
}

.sup-zoom-menu {
    left: auto;
    right: 0;
    width: 232px
}

.sup-bar {
    position: absolute;
    left: calc(50% - var(--sup-dock) / 2);
    bottom: 14px;
    transform: translate(-50%);
    transition: left .26s cubic-bezier(.16, 1, .3, 1);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 9
}

.sup-bar-pill {
    display: flex;
    align-items: center;
    padding: 5px;
    background: var(--sup-surface);
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-lg);
    box-shadow: var(--sup-shadow)
}

.sup-bar-modes {
    gap: 2px
}

.sup-bar-tools {
    gap: 10px
}

.sup-bar-tools[hidden] {
    display: none !important
}

.sup-bar-mode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: var(--sup-r-md);
    background: transparent;
    color: var(--sup-text-faint);
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease
}

.sup-bar-mode:hover:not(:disabled):not(.is-active) {
    background: var(--sup-surface-2);
    color: var(--sup-text)
}

.sup-bar-mode.is-active {
    background: var(--sup-accent);
    color: var(--sup-accent-fg)
}

.sup-bar-mode:disabled {
    color: color-mix(in srgb, var(--sup-text-faint) 55%, transparent);
    cursor: not-allowed
}

.sup-bar-mode:focus-visible {
    outline: 2px solid var(--sup-accent);
    outline-offset: 2px
}

.sup-bar-group {
    position: relative;
    display: flex;
    align-items: center
}

.sup-bar-tool {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: var(--sup-r-md);
    background: transparent;
    color: var(--sup-text-dim);
    cursor: pointer;
    transition: color .16s ease
}

.sup-bar-group:not(.is-armed) .sup-bar-tool:hover:not([aria-disabled=true]) {
    color: var(--sup-text)
}

.sup-bar-group.is-armed .sup-bar-tool {
    color: var(--sup-accent-fg)
}

.sup-bar-tool:focus-visible,
.sup-bar-more:focus-visible {
    outline: 2px solid var(--sup-accent);
    outline-offset: -2px;
    border-radius: var(--sup-r-md)
}

.sup-bar-more {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 34px;
    border: 0;
    border-radius: var(--sup-r-md);
    background: transparent;
    color: var(--sup-text-faint);
    cursor: pointer;
    transition: color .16s ease
}

.sup-bar-more:hover:not(:disabled),
.sup-bar-more.is-open {
    color: var(--sup-text)
}

.sup-bar-flyout {
    position: absolute;
    bottom: calc(100% + 9px);
    left: -5px;
    z-index: 2;
    min-width: 214px;
    margin: 0;
    padding: 5px;
    list-style: none;
    background: var(--sup-surface);
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-md);
    box-shadow: var(--sup-shadow);
    overflow-y: auto;
    overscroll-behavior: contain
}

.sup-bar-flyout-head {
    padding: 6px 8px 5px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sup-text-faint)
}

.sup-bar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 8px;
    border: 0;
    border-radius: var(--sup-r-sm);
    background: transparent;
    color: var(--sup-text);
    font-size: 12.5px;
    text-align: left;
    cursor: pointer
}

.sup-bar-item:hover {
    background: var(--sup-surface-2)
}

.sup-bar-item:focus-visible {
    outline: 2px solid var(--sup-accent);
    outline-offset: -2px
}

.sup-bar-item.is-active {
    background: color-mix(in srgb, var(--sup-accent) 12%, transparent);
    color: var(--sup-accent)
}

.sup-bar-item-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.sup-bar-item-kbd {
    flex: none;
    padding: 2px 6px;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px var(--sup-border);
    font-size: 11px;
    color: var(--sup-text-faint)
}

.sup-bar-item-tag {
    flex: none;
    padding: 2px 7px;
    border-radius: 6px;
    border: 1px dashed var(--sup-border-strong);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sup-text-faint)
}

.sup-tip-anchor {
    position: relative;
    display: inline-flex
}

.sup-tip,
.sup-tip-card {
    position: fixed;
    z-index: 90;
    pointer-events: none;
    animation: sup-tip-in .12s ease-out
}

@keyframes sup-tip-in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@media(prefers-reduced-motion:reduce) {

    .sup-tip,
    .sup-tip-card {
        animation: none
    }
}

.sup-tip {
    padding: 5px 8px;
    background: var(--sup-surface-2);
    border: 1px solid var(--sup-border-strong);
    border-radius: var(--sup-r-sm);
    color: var(--sup-text);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: var(--sup-shadow-tip)
}

.sup-tip-arrow {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--sup-surface-2);
    border: 1px solid var(--sup-border-strong);
    transform: rotate(45deg)
}

.sup-tip[data-side=top] .sup-tip-arrow {
    bottom: -5px;
    left: var(--sup-tip-arrow, 50%);
    margin-left: -4px;
    border-top: 0;
    border-left: 0
}

.sup-tip[data-side=bottom] .sup-tip-arrow {
    top: -5px;
    left: var(--sup-tip-arrow, 50%);
    margin-left: -4px;
    border-bottom: 0;
    border-right: 0
}

.sup-tip[data-side=right] .sup-tip-arrow {
    left: -5px;
    top: var(--sup-tip-arrow, 50%);
    margin-top: -4px;
    border-top: 0;
    border-right: 0
}

.sup-tip[data-side=left] .sup-tip-arrow {
    right: -5px;
    top: var(--sup-tip-arrow, 50%);
    margin-top: -4px;
    border-bottom: 0;
    border-left: 0
}

.sup-tip-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 268px;
    padding: 12px;
    background: var(--sup-glass-bg);
    -webkit-backdrop-filter: blur(var(--sup-glass-blur));
    backdrop-filter: blur(var(--sup-glass-blur));
    border: 1px solid var(--sup-border-strong);
    border-radius: var(--sup-r-md);
    box-shadow: var(--sup-shadow)
}

.sup-tip-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--sup-text)
}

.sup-tip-desc {
    font-size: 12px;
    line-height: 1.45;
    color: var(--sup-text-dim)
}

.sup-tip-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 600;
    color: var(--sup-text-faint)
}

.sup-tip-kbd {
    padding: 1px 6px;
    border: 1px solid var(--sup-border);
    border-radius: 6px;
    font-weight: 400
}

.sup-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0
}

.sup-loader {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--sup-text-faint);
    font-size: 12px
}

.sup-loader-dots {
    display: flex;
    align-items: center;
    gap: 4px
}

.sup-loader-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor
}

.sup-loader-bar {
    position: relative;
    display: block;
    width: 92px;
    height: 4px;
    overflow: hidden;
    border-radius: var(--sup-r-pill);
    background: var(--sup-surface-3)
}

.sup-loader-bar-fill {
    position: absolute;
    inset-block: 0;
    width: 33%;
    border-radius: var(--sup-r-pill);
    background: currentColor
}

.sup-loader-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px
}

.sup-loader-cell {
    width: 5px;
    height: 5px;
    border-radius: 2px;
    background: currentColor
}

.sup-loader-elapsed {
    font-variant-numeric: tabular-nums;
    opacity: .6
}

.sup-approval {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: var(--sup-r-md);
    border: 1px solid var(--sup-border);
    background: var(--sup-surface)
}

.sup-approval-question {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--sup-text)
}

.sup-approval-context {
    font-size: 12px;
    color: var(--sup-text-dim)
}

.sup-approval-list {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.sup-approval-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border-radius: var(--sup-r-sm);
    border: 1px solid var(--sup-border);
    background: transparent;
    color: var(--sup-text);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease
}

.sup-approval-option:hover {
    background: var(--sup-surface-2);
    border-color: var(--sup-border-strong)
}

.sup-approval-option.is-destructive {
    color: var(--sup-danger);
    border-color: color-mix(in srgb, var(--sup-danger) 30%, transparent)
}

.sup-approval-option.is-destructive:hover {
    background: color-mix(in srgb, var(--sup-danger) 10%, transparent)
}

.sup-approval-option-label {
    font-weight: 500
}

.sup-approval-detail {
    margin-left: auto;
    font-size: 11px;
    color: var(--sup-text-faint)
}

.sup-approval-resolved {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--sup-r-sm);
    background: color-mix(in srgb, var(--sup-ok) 14%, transparent);
    color: var(--sup-text);
    font-size: 13px
}

.sup-approval-resolved svg {
    color: var(--sup-ok);
    flex: none
}

.sup-approval-resolved.is-destructive {
    background: color-mix(in srgb, var(--sup-danger) 14%, transparent)
}

.sup-approval-resolved.is-destructive svg {
    color: var(--sup-danger)
}

.sup-approval-resolved-label {
    font-weight: 500
}

.sup-choices {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.sup-choices-label {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--sup-text-faint)
}

.sup-choices-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none
}

.sup-choice {
    display: flex;
    align-items: center;
    gap: 12px
}

.sup-choice-body {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex: 1;
    min-width: 0;
    padding: 10px 16px;
    border-radius: var(--sup-r-sm);
    background: var(--sup-surface-2);
    font-size: 14px;
    color: var(--sup-text)
}

.sup-choice-label {
    font-weight: 500
}

.sup-choice-meta {
    color: var(--sup-text-dim)
}

.sup-choice-meta:before {
    content: ":";
    margin-right: 4px;
    color: var(--sup-text-faint)
}

.sup-choice-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: var(--sup-r-xs, 6px);
    border: 0;
    background: var(--sup-accent);
    color: var(--sup-accent-fg);
    cursor: pointer;
    transition: background-color .14s ease
}

.sup-choice-add:hover {
    background: var(--sup-accent-hover)
}

.sup-choice-add.is-added {
    background: color-mix(in srgb, var(--sup-ok) 22%, transparent);
    color: var(--sup-ok);
    cursor: default
}

.sup-msg-phase {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap
}

.sup-msg-phase:after {
    content: none
}

.sup-cp {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 216px
}

.sup-cp-area {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--sup-r-sm);
    border: 1px solid var(--sup-border);
    cursor: crosshair;
    touch-action: none;
    background: linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, var(--sup-cp-hue))
}

.sup-cp-area:focus-visible {
    outline: 2px solid var(--sup-accent);
    outline-offset: 2px
}

.sup-cp-marker {
    position: absolute;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: var(--sup-r-pill);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #0000008c;
    pointer-events: none
}

.sup-cp-rails {
    display: flex;
    align-items: center;
    gap: 8px
}

.sup-cp-rail-stack {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    min-width: 0
}

.sup-cp-rail {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 12px;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none
}

.sup-cp-track {
    position: relative;
    flex: 1;
    height: 8px;
    border-radius: var(--sup-r-pill);
    overflow: hidden
}

.sup-cp-track--hue {
    background: linear-gradient(90deg, red, #ff0, #0f0, #0ff, #00f, #f0f, red)
}

.sup-cp-track--alpha {
    background-color: #fff;
    background-image: linear-gradient(45deg, #b8bcc4 25%, transparent 25% 75%, #b8bcc4 75%), linear-gradient(45deg, #b8bcc4 25%, transparent 25% 75%, #b8bcc4 75%);
    background-size: 8px 8px;
    background-position: 0 0, 4px 4px
}

.sup-cp-alpha-fill {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.sup-cp-range {
    position: absolute;
    height: 100%;
    background: transparent
}

.sup-cp-thumb {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: var(--sup-r-pill);
    border: 2px solid #fff;
    background: var(--sup-surface);
    box-shadow: 0 0 0 1px #0000008c;
    cursor: grab
}

.sup-cp-thumb:active {
    cursor: grabbing
}

.sup-cp-thumb:focus-visible {
    outline: 2px solid var(--sup-accent);
    outline-offset: 2px
}

.sup-cp-eyedropper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: var(--sup-r-sm);
    border: 1px solid var(--sup-border);
    background: var(--sup-bg);
    color: var(--sup-text-faint);
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease
}

.sup-cp-eyedropper:hover {
    background: var(--sup-surface-2);
    color: var(--sup-text)
}

.sup-cp-foot {
    display: flex;
    align-items: center;
    gap: 6px
}

.sup-cp-mode {
    flex: none
}

.sup-cp-mode .sup-field-selval {
    height: 26px;
    padding: 0 8px;
    font-size: 11px
}

.sup-cp-readout {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 4px;
    min-width: 0;
    height: 26px;
    padding: 0 6px;
    border-radius: var(--sup-r-sm);
    border: 1px solid var(--sup-border);
    background: var(--sup-bg)
}

.sup-cp-readout--split {
    gap: 6px
}

.sup-cp-hash {
    color: var(--sup-text-faint);
    font-size: 11px
}

.sup-cp-input {
    width: 100%;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--sup-text);
    font-size: 11px;
    font-variant-numeric: tabular-nums
}

.sup-cp-input[readonly] {
    color: var(--sup-text-dim)
}

.sup-cp-done {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: var(--sup-r-sm);
    border: 1px solid var(--sup-accent);
    background: var(--sup-accent);
    color: var(--sup-accent-fg);
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease
}

.sup-cp-done:hover {
    border-color: var(--sup-accent-hover);
    background: var(--sup-accent-hover)
}

.sup-cp-pop {
    position: fixed;
    z-index: 70;
    padding: 10px;
    border-radius: var(--sup-r-md);
    border: 1px solid var(--sup-border-strong);
    background: var(--sup-surface);
    box-shadow: var(--sup-shadow)
}

.sup-props-locked {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 8px 12px;
    border-radius: var(--sup-r-md);
    border: 1px solid color-mix(in srgb, var(--sup-accent) 30%, transparent);
    background: color-mix(in srgb, var(--sup-accent) 10%, var(--sup-surface));
    color: var(--sup-text-dim);
    font-size: 11.5px;
    line-height: 1.35
}

.sup-props-locked svg {
    flex: none;
    color: color-mix(in srgb, var(--sup-accent) 60%, var(--sup-text))
}

.sup-system-error {
    margin: 0;
    color: var(--sup-danger);
    font-size: 10px;
    line-height: 1.45
}

.sup-validation-messages {
    display: flex;
    flex-direction: column;
    gap: 3px
}

.sup-validation-message {
    margin: 0;
    font-size: 10px;
    line-height: 1.4
}

.sup-validation-message.is-error {
    color: var(--sup-danger)
}

.sup-validation-message.is-warning,
.sup-validation-message.is-info {
    color: var(--sup-text-dim)
}

.sup-field-input:has(.sup-num[aria-invalid=true]) {
    border-color: var(--sup-danger)
}

.sup-seg-issue-indicator {
    width: 7px;
    height: 7px;
    margin-left: auto;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--sup-danger)
}

.sup-props-cta {
    display: flex;
    gap: 8px
}

.sup-props-cta-btn {
    flex: 1;
    padding: 8px 10px;
    border-radius: var(--sup-r-sm);
    border: 1px solid color-mix(in srgb, var(--sup-accent) 40%, var(--sup-surface));
    background: color-mix(in srgb, var(--sup-accent) 14%, var(--sup-surface));
    color: color-mix(in srgb, var(--sup-accent) 65%, var(--sup-text));
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .12s ease
}

.sup-props-cta-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--sup-accent) 22%, var(--sup-surface))
}

.sup-props-cta-btn:focus-visible {
    outline: 2px solid var(--sup-accent);
    outline-offset: 2px
}

.sup-props-cta-btn:disabled {
    cursor: not-allowed;
    opacity: .55
}

.sup-icon-btn--danger {
    color: var(--sup-danger)
}

.sup-icon-btn--danger:hover:not(:disabled) {
    background: color-mix(in srgb, var(--sup-danger) 14%, transparent);
    border-color: color-mix(in srgb, var(--sup-danger) 45%, transparent);
    color: var(--sup-danger)
}

.sup-icon-btn--danger:focus-visible {
    outline: 2px solid var(--sup-danger);
    outline-offset: 2px
}

.sup-props-stub {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 12px;
    border: 1px dashed var(--sup-border);
    border-radius: var(--sup-r-md);
    background: var(--sup-bg)
}

.sup-props-stub p {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--sup-text-dim)
}

.sup-props-stub-tag {
    padding: 2px 7px;
    border-radius: var(--sup-r-sm);
    background: var(--sup-surface-2);
    color: var(--sup-text-faint);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase
}

.sup-props-coming {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px;
    border: 1px dashed var(--sup-border-strong);
    border-radius: var(--sup-r-md);
    background: var(--sup-bg)
}

.sup-props-coming p {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--sup-text-dim)
}

.sup-props-blocker {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0;
    padding: 8px 12px;
    border-radius: var(--sup-r-md);
    border: 1px solid color-mix(in srgb, var(--sup-warn) 34%, transparent);
    background: color-mix(in srgb, var(--sup-warn) 10%, var(--sup-surface));
    color: var(--sup-text-dim);
    font-size: 11.5px;
    line-height: 1.35
}

.sup-props-blocker svg {
    flex: none;
    margin-top: 2px;
    color: color-mix(in srgb, var(--sup-warn) 70%, var(--sup-text))
}

.sup-prog {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 2px 0
}

.sup-prog-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px
}

.sup-prog-pct {
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    color: var(--sup-text-dim)
}

.sup-prog-track {
    display: block;
    height: 5px;
    border-radius: 999px;
    background: var(--sup-surface-3);
    overflow: hidden
}

.sup-prog-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--sup-accent);
    transition: width .2s ease
}

.sup-prog-detail {
    font-size: 11px;
    line-height: 1.35;
    color: var(--sup-text-faint)
}

.sup-prog.is-done .sup-prog-fill {
    background: var(--sup-ok)
}

.sup-prog.is-done .sup-prog-pct {
    color: var(--sup-ok)
}

.sup-prog.is-failed .sup-prog-fill {
    background: var(--sup-danger)
}

.sup-prog.is-failed .sup-prog-pct,
.sup-prog.is-failed .sup-prog-detail {
    color: var(--sup-danger)
}

.sup-prog.is-idle .sup-prog-pct {
    color: var(--sup-text-faint)
}

@media(prefers-reduced-motion:reduce) {
    .sup-prog-fill {
        transition: none
    }
}

.sup-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 9px 10px;
    border-radius: var(--sup-r-sm);
    border: 1px solid var(--sup-border);
    background: var(--sup-bg);
    color: var(--sup-text-dim);
    font-size: 11.5px;
    line-height: 1.45
}

.sup-note.is-warn {
    border-color: color-mix(in srgb, var(--sup-warn) 34%, transparent);
    background: color-mix(in srgb, var(--sup-warn) 9%, var(--sup-surface))
}

.sup-note.is-error {
    border-color: var(--sup-danger);
    border-radius: var(--sup-r-xs);
    background: var(--sup-surface);
    color: var(--sup-danger)
}

.sup-reveal {
    animation: sup-reveal .24s cubic-bezier(.22, .61, .36, 1) backwards;
    animation-delay: calc(var(--sup-reveal-i, 0) * 40ms)
}

@keyframes sup-reveal {
    0% {
        opacity: 0;
        transform: translateY(-6px);
        filter: blur(4px)
    }

    to {
        opacity: 1;
        transform: none;
        filter: blur(0)
    }
}

@media(prefers-reduced-motion:reduce) {
    .sup-reveal {
        animation: none
    }
}

.sup-props.is-view-only .sup-num,
.sup-props.is-view-only .sup-color-value,
.sup-props.is-view-only .sup-summary-val,
.sup-props.is-view-only .sup-azi-val,
.sup-props.is-view-only .sup-text,
.sup-props.is-view-only .sup-field-selval {
    color: var(--sup-text)
}

.sup-props.is-view-only .sup-opt:disabled,
.sup-props.is-view-only .sup-swatch:disabled,
.sup-props.is-view-only .sup-switch:disabled,
.sup-props.is-view-only .sup-segment:disabled,
.sup-props.is-view-only .sup-row-btn:disabled,
.sup-props.is-view-only .sup-props-cta-btn:disabled,
.sup-props.is-view-only .sup-icon-btn--danger:disabled,
.sup-props.is-view-only .sup-field--select:disabled {
    cursor: not-allowed;
    opacity: .55
}

.sup-props.is-view-only .sup-slider[data-disabled],
.sup-props.is-view-only .sup-scrub-reset:disabled {
    cursor: not-allowed;
    opacity: .55
}

.sup-num[readonly] {
    cursor: default
}

@media(max-width:480px) {
    .sup-topbar {
        padding: 0 8px
    }

    .sup-brand {
        gap: 6px
    }

    .sup-brand-trigger {
        gap: 4px;
        padding-inline: 2px
    }

    .sup-brand-name {
        max-width: 38vw
    }

    .sup-top-actions {
        gap: 4px
    }

    .sup-pill--zoom {
        height: 30px;
        padding: 0 9px
    }

    .sup-coords {
        display: none
    }
}

@media(max-width:360px) {
    .sup-stage-progress {
        display: none
    }
}

.sup-details-host {
    display: contents
}

.sup-stats {
    left: var(--sup-stats-center, calc((100% - var(--sup-dock)) / 2));
    transition: left .26s cubic-bezier(.16, 1, .3, 1)
}

.sup-stats-cluster {
    left: calc((100% - var(--sup-dock)) / 2 + var(--sup-stats-x, 0px))
}

.sup-detail-note,
.sup-advisories,
.sup-simulation-state {
    margin: 0;
    padding: 9px 10px;
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-sm);
    background: var(--sup-bg);
    color: var(--sup-text-dim);
    font-size: 12px;
    line-height: 1.45
}

.sup-advisories {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-color: color-mix(in srgb, var(--sup-warn) 34%, transparent)
}

.sup-advisories p {
    margin: 0
}

.sup-simulation-state.is-success {
    border-color: color-mix(in srgb, var(--sup-ok) 36%, transparent)
}

.sup-simulation-state.is-warning,
.sup-simulation-state.is-timeout {
    border-color: color-mix(in srgb, var(--sup-warn) 36%, transparent)
}

.sup-simulation-state.is-error {
    border-color: color-mix(in srgb, var(--sup-danger) 36%, transparent)
}

.sup-bankability {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border-radius: var(--sup-r-sm);
    background: var(--sup-bg)
}

.sup-bankability>div:first-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0
}

.sup-bankability-value {
    font-size: 18px;
    font-variant-numeric: tabular-nums
}

.sup-bankability-note {
    color: var(--sup-text-faint);
    font-size: 11px
}

.sup-bankability-actions {
    display: flex;
    flex: none;
    gap: 6px
}

.sup-bankability-actions .sup-pill {
    height: 28px;
    padding-inline: 9px;
    font-size: 11px
}

.sup-tagged-control:disabled,
.sup-row:disabled,
.sup-seg-head:disabled {
    color: var(--sup-text-faint);
    cursor: not-allowed;
    opacity: .55
}

.sup-tagged-control:disabled .sup-row-key,
.sup-tagged-control:disabled .sup-seg-title {
    color: inherit
}

.sup-tagged-control .sup-bar-item-tag {
    flex: none
}

.sup {
    --sup-series-1: #3987e5;
    --sup-series-2: #d95926;
    --sup-series-3: #199e70;
    --sup-series-4: #9085e9
}

html.light .sup {
    --sup-series-1: #2a78d6;
    --sup-series-2: #eb6834;
    --sup-series-3: #1baf7a;
    --sup-series-4: #4a3aa7
}

.sup-dtabs {
    display: grid;
    grid-template-columns: 1fr;
    margin: 12px 12px 0;
    padding: 4px;
    background: var(--sup-surface-2);
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-md)
}

.sup-dtab-fill,
.sup-dtab-hover {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: var(--sup-r-sm);
    pointer-events: none
}

.sup-dtab-fill {
    z-index: 1;
    background: var(--sup-surface-3);
    box-shadow: var(--sup-shadow-xs)
}

.sup-dtab-hover {
    z-index: 0;
    background: color-mix(in srgb, var(--sup-surface-3) 55%, transparent)
}

.sup-dtab-label {
    position: relative;
    z-index: 2
}

.sup-dtab {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 32px;
    padding: 0 8px;
    border: 0;
    border-radius: var(--sup-r-sm);
    background: transparent;
    color: var(--sup-text-faint);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: color .18s ease
}

.sup-dtab:not(.is-active):not(:disabled):hover {
    color: var(--sup-text-dim)
}

.sup-dtab.is-active {
    color: var(--sup-text)
}

.sup-dtab.is-active svg {
    color: var(--sup-accent)
}

.sup-dtab:focus-visible {
    outline: 2px solid var(--sup-accent);
    outline-offset: 2px
}

@media(max-width:720px) {
    .sup-stats {
        max-width: calc(100vw - 24px - var(--sup-dock));
        flex-wrap: wrap;
        justify-content: center
    }

    .sup-stat-col {
        flex: 1 1 78px;
        border-right: 0
    }
}

@media(max-width:360px) {
    .sup.has-dock {
        --sup-dock: 100vw
    }

    .sup-details {
        width: 100vw
    }

    .sup-bankability {
        align-items: stretch;
        flex-direction: column
    }
}

@media(prefers-reduced-motion:reduce) {

    .sup-canvas-shell,
    .sup-topbar,
    .sup-stats-cluster,
    .sup-dtab,
    .sup-row--link,
    .sup-row--link svg {
        transition: none
    }

    .sup-details {
        animation: none
    }
}

.sup {
    container-name: studio;
    container-type: inline-size
}

.sup-top-actions-shell {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    pointer-events: auto
}

.sup-top-actions-overflow {
    display: none
}

.sup-top-actions-overflow {
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-pill);
    background: var(--sup-surface);
    color: var(--sup-text-dim);
    cursor: pointer
}

.sup-top-actions-overflow:hover,
.sup-top-actions-overflow[aria-expanded=true] {
    border-color: var(--sup-border-strong);
    background: var(--sup-surface-2);
    color: var(--sup-text)
}

.sup-responsive-overflow {
    display: none
}

.sup-responsive-overflow.is-open {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    display: flex;
    min-width: 196px;
    align-items: stretch;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--sup-border-strong);
    border-radius: var(--sup-r-md);
    background: var(--sup-surface);
    box-shadow: var(--sup-shadow)
}

.sup-responsive-overflow.is-open>span,
.sup-responsive-overflow.is-open .sup-pill {
    width: 100%
}

.sup-responsive-overflow.is-open .sup-pill {
    justify-content: flex-start
}

.sup-responsive-overflow.is-open .sup-responsive-label {
    display: inline
}

.sup-responsive-overflow-items {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--sup-border)
}

.sup-responsive-overflow.is-open .sup-responsive-overflow-items {
    display: flex
}

.sup-responsive-overflow-items>button {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 34px;
    padding: 7px 9px;
    border: 0;
    border-radius: var(--sup-r-sm);
    background: transparent;
    color: var(--sup-text);
    font: inherit;
    font-size: 12px;
    text-align: left;
    cursor: pointer
}

.sup-responsive-overflow-items>button:hover:not(:disabled),
.sup-responsive-overflow-items>button:focus-visible {
    background: var(--sup-surface-2);
    outline: none
}

.sup-responsive-overflow-items>button:disabled {
    cursor: not-allowed;
    opacity: .5
}

.sup-stats::-webkit-scrollbar {
    display: none
}

.sup-stats {
    box-sizing: border-box;
    max-width: calc(100% - var(--sup-dock) - 24px);
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none
}

.sup-stat-col {
    flex: none
}

@container studio (max-width: 1106px) {
    .sup-responsive-source--line-diagram .sup-responsive-label {
        display: none
    }

    .sup-responsive-source--line-diagram {
        width: 34px;
        padding-inline: 8px;
        justify-content: center
    }
}

@container studio (max-width: 1490px) {
    .sup.has-dock .sup-responsive-source--line-diagram .sup-responsive-label {
        display: none
    }

    .sup.has-dock .sup-responsive-source--line-diagram {
        width: 34px;
        padding-inline: 8px;
        justify-content: center
    }

    .sup.has-dock .sup-props,
    .sup.has-dock .sup-props-handle-anchor {
        top: calc(var(--sup-topbar-h) + 72px)
    }

    .sup.has-dock .sup-props {
        width: min(300px, calc(100% - var(--sup-dock) - 24px));
        max-height: calc(100vh - var(--sup-topbar-h) - 150px)
    }
}

@container studio (min-width: 481px) and (max-width: 1106px) {

    .sup:not(.has-dock) .sup-props,
    .sup:not(.has-dock) .sup-props-handle-anchor {
        top: calc(var(--sup-topbar-h) + 72px)
    }

    .sup:not(.has-dock) .sup-props {
        max-height: calc(100vh - var(--sup-topbar-h) - 150px)
    }
}

@container studio (max-width: 950px) {

    .sup-rail-btn[data-ledger-row=L-89],
    .sup-save-pill-wrap,
    .sup-responsive-source--line-diagram {
        display: none
    }

    .sup-top-actions-overflow {
        display: inline-flex
    }

    .sup .sup-rail {
        top: calc(var(--sup-topbar-h) + 72px);
        max-height: calc(100vh - var(--sup-topbar-h) - 146px);
        transform: none
    }
}

@container studio (max-width: 1334px) {

    .sup.has-dock .sup-rail-btn[data-ledger-row=L-89],
    .sup.has-dock .sup-save-pill-wrap,
    .sup.has-dock .sup-responsive-source--line-diagram {
        display: none
    }

    .sup.has-dock .sup-top-actions-overflow {
        display: inline-flex
    }

    .sup.has-dock .sup-rail {
        top: calc(var(--sup-topbar-h) + 72px);
        max-height: calc(100vh - var(--sup-topbar-h) - 146px);
        transform: none
    }
}

@container studio (max-width: 1284px) {
    .sup.has-dock .sup-bottom-right {
        bottom: 72px
    }
}

@container studio (max-width: 650px) {
    .sup-help {
        bottom: 72px
    }
}

@container studio (max-width: 1034px) {
    .sup.has-dock .sup-help {
        bottom: 72px
    }
}

@container studio (max-width: 812px) {
    .sup-responsive-action--next .sup-responsive-label {
        display: none
    }

    .sup-responsive-action--next {
        padding-inline: 10px
    }
}

@container studio (max-width: 1196px) {
    .sup.has-dock .sup-responsive-action--next .sup-responsive-label {
        display: none
    }

    .sup.has-dock .sup-responsive-action--next {
        padding-inline: 10px
    }
}

@container studio (max-width: 740px) {

    .sup-responsive-action--simulate .sup-responsive-label,
    .sup-clara-label {
        display: none
    }

    .sup-responsive-action--simulate,
    .sup-clara {
        padding-inline: 5px
    }
}

@container studio (max-width: 1124px) {

    .sup.has-dock .sup-responsive-action--simulate .sup-responsive-label,
    .sup.has-dock .sup-clara-label {
        display: none
    }

    .sup.has-dock .sup-responsive-action--simulate,
    .sup.has-dock .sup-clara {
        padding-inline: 5px
    }
}

@container studio (max-width: 629px) {

    .sup-brand-meta,
    .sup-brand-name {
        min-width: 0;
        width: 120px;
        max-width: 120px
    }
}

@container studio (max-width: 1013px) {

    .sup.has-dock .sup-brand-meta,
    .sup.has-dock .sup-brand-name {
        min-width: 0;
        width: 120px;
        max-width: 120px
    }
}

@container studio (max-width: 933px) {
    .sup.has-dock .sup-stage-progress {
        display: none
    }

    .sup.has-dock .sup-props {
        right: auto;
        left: 76px;
        width: calc(100% - var(--sup-dock) - 88px)
    }

    .sup.has-dock .sup-rail {
        max-height: calc(100vh - var(--sup-topbar-h) - 202px)
    }
}

@media(prefers-reduced-motion:reduce) {
    .sup-top-actions-overflow {
        transition: none
    }
}

.sup-responsive-overflow-items>.sup-responsive-overflow--details,
.sup-responsive-overflow-items>.sup-responsive-overflow--simulate {
    display: none
}

@container studio (max-width: 1024px) {
    .sup:not(.has-dock) .sup-top-actions .sup-responsive-action--details {
        display: none
    }

    .sup:not(.has-dock) .sup-top-actions-overflow,
    .sup:not(.has-dock) .sup-responsive-overflow-items>.sup-responsive-overflow--details {
        display: flex
    }
}

@container studio (max-width: 1408px) {
    .sup.has-dock .sup-top-actions .sup-responsive-action--details {
        display: none
    }

    .sup.has-dock .sup-top-actions-overflow,
    .sup.has-dock .sup-responsive-overflow-items>.sup-responsive-overflow--details {
        display: flex
    }
}

@container studio (max-width: 812px) {

    .sup:not(.has-dock) .sup-top-actions .sup-responsive-action--simulate,
    .sup.has-dock .sup-details-foot {
        display: none
    }

    .sup-top-actions-overflow,
    .sup-responsive-overflow-items>.sup-responsive-overflow--simulate {
        display: flex
    }
}

@container studio (max-width: 480px) {

    .sup:not(.has-dock) .sup-brand-meta,
    .sup:not(.has-dock) .sup-brand-name {
        width: 84px;
        max-width: 84px
    }
}

@container studio (max-width: 629px) {
    .sup.has-dock .sup-topbar {
        padding-inline: 8px
    }

    .sup.has-dock .sup-brand,
    .sup.has-dock .sup-top-actions,
    .sup.has-dock .sup-top-actions-shell {
        gap: 4px
    }

    .sup.has-dock .sup-brand-meta,
    .sup.has-dock .sup-brand-name {
        width: 60px;
        max-width: 60px
    }

    .sup.has-dock .sup-pill--zoom {
        display: none
    }
}

.sup {
    --su-left-inset: 12px;
    --su-right-inset: calc(var(--sup-dock) + 12px)
}

.sup-bar,
.sup-bar-tools {
    flex-wrap: nowrap
}

.sup-bar {
    max-width: none
}

.sup-bar-move,
.sup-bar-modes {
    flex: none
}

.sup-bar-responsive-leading {
    display: none;
    flex: none;
    align-items: center;
    gap: 2px;
    padding-right: 5px;
    border-right: 1px solid var(--sup-border)
}

.sup-bar-flyout--portal {
    position: fixed;
    right: auto;
    z-index: 60
}

@container studio (max-width: 550px) {
    .sup.has-dock>* {
        --sup-dock: 0px;
        --su-right-inset: 12px
    }

    .sup.has-dock .sup-details {
        width: 100%
    }

    .sup.has-dock .sup-details-foot {
        display: block
    }

    .sup.has-dock .sup-topbar,
    .sup.has-dock .sup-stats-cluster,
    .sup.has-dock .sup-rail,
    .sup.has-dock .sup-bar,
    .sup.has-dock .sup-bottom-right {
        visibility: hidden
    }
}

@container studio (max-width: 650px) {
    .sup:not(.has-dock) .sup-bar {
        left: var(--su-left-inset);
        right: var(--su-right-inset);
        width: auto;
        transform: none;
        justify-content: center
    }

    .sup:not(.has-dock) .sup-bar-tools {
        min-width: 0;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none
    }

    .sup:not(.has-dock) .sup-bar-tools::-webkit-scrollbar {
        display: none
    }
}

@container studio (max-width: 549px) {
    .sup:not(.has-dock) .sup-bar {
        align-items: stretch;
        flex-direction: column
    }

    .sup:not(.has-dock) .sup-bar-modes {
        align-self: center
    }
}

@container studio (max-width: 950px) {
    .sup.has-dock .sup-bar {
        align-items: stretch;
        flex-direction: column
    }

    .sup.has-dock .sup-bar-modes {
        align-self: center
    }
}

@container studio (max-width: 1034px) {
    .sup.has-dock .sup-bar {
        left: var(--su-left-inset);
        right: var(--su-right-inset);
        width: auto;
        transform: none;
        justify-content: center
    }

    .sup.has-dock .sup-bar-tools {
        min-width: 0;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none
    }

    .sup.has-dock .sup-bar-tools::-webkit-scrollbar {
        display: none
    }
}

@container studio (max-width: 549px) {

    .sup-stage-progress,
    .sup-top-center {
        display: none
    }

    .sup-bar-responsive-leading {
        display: flex
    }
}

@container studio (max-width: 950px) {
    .sup.has-dock .sup-top-center {
        display: none
    }

    .sup.has-dock .sup-bar-responsive-leading {
        display: flex
    }
}

.sup:not(:has(.sup-stats-cluster))[data-stats-below-header] .sup-stats {
    top: calc(var(--sup-topbar-h) + 8px)
}

.sup:not(:has(.sup-stats-cluster))[data-stats-below-header] .sup-history-dock {
    --sup-stats-top: calc(var(--sup-topbar-h) + 8px)
}

@container studio (max-width: 1240px) {
    .sup:not(.has-dock):not(:has(.sup-stats-cluster)) .sup-stats {
        top: calc(var(--sup-topbar-h) + 8px)
    }
}

@container studio (max-width: 1624px) {
    .sup.has-dock:not(:has(.sup-stats-cluster)) .sup-stats {
        top: calc(var(--sup-topbar-h) + 8px)
    }
}

@container studio (max-width: 1015px) {
    .sup:not(.has-dock) .sup-bottom-right {
        bottom: 72px
    }
}

@container studio (max-width: 1399px) {
    .sup.has-dock .sup-bottom-right {
        bottom: 72px
    }
}

@container studio (max-width: 980px) {
    .sup:not(.has-dock) .sup-coords {
        display: none
    }
}

@container studio (max-width: 1364px) {
    .sup.has-dock .sup-coords {
        display: none
    }
}

.sup-assist-disclosure-clara,
.sup-assist-disclosure-performance,
.sup-help {
    display: none
}

@container studio (max-width: 549px) {
    .sup:not(.has-dock) .sup-bottom-right {
        display: none
    }

    .sup:not(.has-dock) .sup-performance-monitor:not(.is-open) {
        display: none
    }

    .sup:not(.has-dock) .sup-help {
        display: block;
        bottom: 14px
    }

    .sup:not(.has-dock) .sup-assist-disclosure {
        bottom: 110px
    }

    .sup:not(.has-dock) .sup-assist-disclosure-clara,
    .sup:not(.has-dock) .sup-assist-disclosure-performance {
        display: flex
    }
}

@container studio (max-width: 950px) {
    .sup.has-dock .sup-bottom-right {
        display: none
    }

    .sup.has-dock .sup-performance-monitor:not(.is-open) {
        display: none
    }

    .sup.has-dock .sup-help {
        display: block;
        bottom: 14px
    }

    .sup.has-dock .sup-assist-disclosure {
        bottom: 110px
    }

    .sup.has-dock .sup-assist-disclosure-clara,
    .sup.has-dock .sup-assist-disclosure-performance {
        display: flex
    }
}

@container studio (max-width: 933px) {
    .sup.has-dock>* {
        --sup-dock: 0px;
        --su-right-inset: 12px
    }

    .sup.has-dock .sup-details {
        width: 100%;
        border-left: 0
    }

    .sup.has-dock .sup-details-foot {
        display: block
    }

    .sup.has-dock .sup-topbar,
    .sup.has-dock .sup-stats-cluster,
    .sup.has-dock .sup-rail,
    .sup.has-dock .sup-bar,
    .sup.has-dock .sup-bottom-right,
    .sup.has-dock .sup-help,
    .sup.has-dock .sup-performance-monitor,
    .sup.has-dock .sup-coords,
    .sup.has-dock .sup-progress-stack {
        visibility: hidden
    }
}

.sup-props-phone-dismiss {
    display: none
}

@container studio (max-width: 549px) {
    .sup:not(.has-dock) .sup-props:not(.is-stowed) {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        max-height: none;
        padding: 0 0 68px;
        background: var(--sup-bg);
        border-radius: 0;
        z-index: 46
    }

    .sup:not(.has-dock) .sup-props-phone-dismiss {
        display: inline-flex
    }

    .sup:not(.has-dock):has(.sup-props:not(.is-stowed)) .sup-topbar,
    .sup:not(.has-dock):has(.sup-props:not(.is-stowed)) .sup-stats-cluster,
    .sup:not(.has-dock):has(.sup-props:not(.is-stowed)) .sup-rail,
    .sup:not(.has-dock):has(.sup-props:not(.is-stowed)) .sup-bar,
    .sup:not(.has-dock):has(.sup-props:not(.is-stowed)) .sup-bottom-right,
    .sup:not(.has-dock):has(.sup-props:not(.is-stowed)) .sup-help,
    .sup:not(.has-dock):has(.sup-props:not(.is-stowed)) .sup-performance-monitor,
    .sup:not(.has-dock):has(.sup-props:not(.is-stowed)) .sup-coords,
    .sup:not(.has-dock):has(.sup-props:not(.is-stowed)) .sup-progress-stack {
        visibility: hidden
    }

    .sup:not(.has-dock) .sup-responsive-tool--measure {
        order: -1
    }

    .sup:not(.has-dock) .sup-responsive-tool--measure .sup-bar-tool {
        display: none
    }
}

@container studio (max-width: 950px) {
    .sup.has-dock .sup-props:not(.is-stowed) {
        padding-bottom: 68px
    }
}

.sup-select-opt.is-active,
.sup-azi-opt.is-active,
.sup-opt.is-active,
.sup-palette-tab.is-active {
    background: color-mix(in srgb, var(--sup-accent) 22%, transparent);
    border-color: color-mix(in srgb, var(--sup-accent) 45%, transparent);
    color: var(--sup-text)
}

.sup-select-opt.is-active svg,
.sup-palette-tab.is-active svg {
    color: var(--sup-accent)
}

.sup {
    --sup-btn-glow: 0 0 0 3px color-mix(in srgb, var(--sup-accent) 18%, transparent), 0 5px 14px color-mix(in srgb, var(--sup-accent) 32%, transparent);
    --sup-btn-glow-danger: 0 0 0 3px color-mix(in srgb, var(--sup-danger) 18%, transparent), 0 5px 14px color-mix(in srgb, var(--sup-danger) 32%, transparent);
    --sup-btn-glow-shell: var(--sup-btn-glow);
    --sup-btn-glow-narrow: 0 0 0 3px color-mix(in srgb, var(--sup-accent) 18%, transparent), 0 0 10px color-mix(in srgb, var(--sup-accent) 32%, transparent)
}

.sup .sup-row-btn {
    min-height: 34px;
    background: var(--sup-surface-2)
}

.sup .sup-row-btn,
.sup .sup-system-action,
.sup .sup-props-cta-btn,
.sup .sup-table-group-actions,
.sup .sup-table-group-action,
.sup .sup-settings-primary-button,
.sup .sup-settings-secondary-button,
.sup .sup-icon-btn,
.sup .sup-workflow-button {
    transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease
}

.sup .sup-row-btn:not(.sup-row-btn--danger, .sup-site-primary-action):hover:not(:disabled),
.sup .sup-system-action:not(.is-primary):hover:not(:disabled),
.sup .sup-props-cta-btn:hover:not(:disabled),
.sup .sup-settings-secondary-button:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--sup-accent) 40%, var(--sup-border));
    box-shadow: var(--sup-btn-glow)
}

.sup .sup-workflow-button:not(.sup-workflow-button--primary):hover:not(:disabled) {
    border-color: var(--sup-border-strong);
    background: var(--sup-surface-2);
    color: var(--sup-text);
    box-shadow: none
}

.sup .sup-row-btn:not(.sup-row-btn--danger, .sup-site-primary-action, .is-on):hover:not(:disabled),
.sup .sup-system-action:not(.is-primary, .is-on):hover:not(:disabled),
.sup .sup-settings-secondary-button:hover:not(:disabled) {
    background: color-mix(in srgb, var(--sup-accent) 7%, var(--sup-surface-2))
}

.sup .sup-site-primary-action:hover:not(:disabled),
.sup .sup-system-action.is-primary:hover:not(:disabled),
.sup .sup-settings-primary-button:hover:not(:disabled),
.sup .sup-workflow-button--primary:hover:not(:disabled) {
    border-color: var(--sup-accent-hover);
    background: var(--sup-accent-hover);
    color: var(--sup-accent-fg);
    box-shadow: var(--sup-btn-glow)
}

.sup .sup-row-btn--danger:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--sup-danger) 45%, var(--sup-border));
    background: color-mix(in srgb, var(--sup-danger) 10%, var(--sup-surface-2));
    color: var(--sup-danger);
    box-shadow: var(--sup-btn-glow-danger)
}

.sup .sup-icon-btn--danger:hover:not(:disabled) {
    background: color-mix(in srgb, var(--sup-danger) 14%, transparent);
    color: var(--sup-danger);
    box-shadow: var(--sup-btn-glow-danger)
}

.sup .sup-icon-btn:not(.sup-icon-btn--danger, .is-on):hover:not(:disabled) {
    background: color-mix(in srgb, var(--sup-accent) 10%, var(--sup-surface-2));
    color: var(--sup-text);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--sup-accent) 24%, transparent)
}

.sup .sup-icon-btn.is-on:hover:not(:disabled) {
    background: color-mix(in srgb, var(--sup-accent) 28%, transparent);
    color: color-mix(in srgb, var(--sup-accent) 60%, var(--sup-text))
}

.sup .sup-table-group-action:hover:not(:disabled) {
    background: color-mix(in srgb, var(--sup-accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--sup-accent) 40%, var(--sup-border));
    box-shadow: var(--sup-btn-glow);
    color: var(--sup-text)
}

.sup .sup-row-btn:disabled,
.sup .sup-system-action:disabled,
.sup .sup-props-cta-btn:disabled,
.sup .sup-settings-primary-button:disabled,
.sup .sup-settings-secondary-button:disabled,
.sup .sup-workflow-button:disabled {
    border: 1px solid var(--sup-border);
    background: var(--sup-surface-2);
    color: var(--sup-text-faint);
    opacity: 1;
    box-shadow: none;
    cursor: not-allowed
}

.sup .sup-icon-btn:disabled,
.sup .sup-table-group-action:disabled {
    background: transparent;
    color: var(--sup-text-faint);
    opacity: 1;
    box-shadow: none;
    cursor: not-allowed
}

.sup .sup-row-btn:active:not(:disabled),
.sup .sup-system-action:active:not(:disabled),
.sup .sup-props-cta-btn:active:not(:disabled),
.sup .sup-settings-primary-button:active:not(:disabled),
.sup .sup-settings-secondary-button:active:not(:disabled),
.sup .sup-workflow-button:active:not(:disabled) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--sup-accent) 30%, transparent)
}

.sup .sup-pill,
.sup .sup-top-actions-overflow {
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease
}

.sup .sup-pill--primary:hover:not(:disabled) {
    border-color: var(--sup-accent-hover);
    background: var(--sup-accent-hover);
    color: var(--sup-accent-fg);
    box-shadow: var(--sup-btn-glow-shell)
}

.sup .sup-pill:not(.sup-pill--primary):hover:not(:disabled),
.sup .sup-top-actions-overflow:hover:not(:disabled),
.sup .sup-top-actions-overflow[aria-expanded=true] {
    border-color: color-mix(in srgb, var(--sup-accent) 40%, var(--sup-border));
    box-shadow: var(--sup-btn-glow)
}

.sup .sup-pill--primary:active:not(:disabled) {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sup-accent) 22%, transparent)
}

.sup .sup-pill:not(.sup-pill--primary):active:not(:disabled) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--sup-accent) 30%, transparent)
}

.sup .sup-pill:disabled,
.sup .sup-top-actions-overflow:disabled {
    box-shadow: none
}

@media(prefers-reduced-motion:reduce) {

    .sup .sup-pill,
    .sup .sup-top-actions-overflow,
    .sup .sup-row-btn,
    .sup .sup-system-action,
    .sup .sup-props-cta-btn,
    .sup .sup-table-group-actions,
    .sup .sup-table-group-action,
    .sup .sup-settings-primary-button,
    .sup .sup-settings-secondary-button,
    .sup .sup-icon-btn,
    .sup .sup-workflow-button {
        transition: none
    }
}

.sup-eq-sheet {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 0;
    border-radius: var(--sup-r-xs);
    background: transparent;
    color: var(--sup-accent);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer
}

.sup-eq-sheet:hover {
    background: color-mix(in srgb, var(--sup-accent) 12%, transparent)
}

.sup-eq-sheet:focus-visible {
    outline: 2px solid var(--sup-accent);
    outline-offset: 2px
}

.sup,
.sup-tip,
.sup-tip-card,
.sup-cp-pop,
.sup-dialog,
.sup-menu {
    --sup-caret-dur: .16s
}

.sup-field--select .sup-field-selval>:last-child,
.sup-azi-trigger>:last-child,
.sup-bar-more>:last-child,
.sup-brand-trigger .sup-brand-caret>:last-child,
.sup-pill--zoom>:last-child,
.sup-caret-trigger>:last-child {
    flex: 0 0 auto;
    transform: rotate(var(--sup-caret-turn, var(--sup-caret-rest, 0deg)))
}

.sup-field--select[aria-expanded=true],
.sup-azi-trigger[aria-expanded=true],
.sup-bar-more[aria-expanded=true],
.sup-brand-trigger[aria-expanded=true],
.sup-pill--zoom[aria-expanded=true],
.sup-caret-trigger[aria-expanded=true] {
    --sup-caret-turn: calc(var(--sup-caret-rest, 0deg) + 180deg)
}

.sup .sup-pill--zoom[aria-expanded=true]:not(:disabled) {
    background: var(--sup-surface-2);
    border-color: color-mix(in srgb, var(--sup-accent) 40%, var(--sup-border));
    box-shadow: var(--sup-btn-glow)
}

@media(prefers-reduced-motion:no-preference) {

    .sup-field--select .sup-field-selval>:last-child,
    .sup-azi-trigger>:last-child,
    .sup-bar-more>:last-child,
    .sup-brand-trigger .sup-brand-caret>:last-child,
    .sup-pill--zoom>:last-child,
    .sup-caret-trigger>:last-child {
        transition: transform var(--sup-caret-dur) var(--sup-ease-out)
    }
}

@media print {

    .sup-printing>*:not(.sup-canvas-shell),
    .sup-printing .sup-canvas-shell>*:not(.sup-sld-host),
    .sup-printing .sup-sld-host>*:not(.sup-sld-page),
    .sup-printing .sup-sld-page>*:not(.sup-sld-stage),
    .sup-printing .sup-sld-stage>*:not(.sup-sld-schedule) {
        display: none
    }

    .sup-printing,
    .sup-printing .sup-canvas-shell,
    .sup-printing .sup-sld-host,
    .sup-printing .sup-sld-page,
    .sup-printing .sup-sld-stage,
    .sup-printing .sup-sld-schedule {
        position: static;
        inset: auto;
        height: auto;
        max-height: none;
        overflow: visible
    }

    .sup-printing .sup-sld-schedule-scroll,
    .sup-printing .sup-cable-schedule {
        height: auto;
        max-height: none;
        overflow: visible
    }

    .sup-printing .sup-cable-schedule>:not(.sup-cable-header, .sup-cable-print-table, .sup-cable-summary),
    .sup-printing .sup-cable-actions {
        display: none
    }

    .sup-printing .sup-cable-schedule {
        display: block
    }

    .sup-printing .sup-cable-schedule {
        color-scheme: light;
        --sup-surface: Canvas;
        --sup-surface-2: color-mix(in srgb, CanvasText 5%, Canvas);
        --sup-surface-3: color-mix(in srgb, CanvasText 9%, Canvas);
        --sup-border: color-mix(in srgb, CanvasText 20%, Canvas);
        --sup-text: CanvasText;
        --sup-text-dim: color-mix(in srgb, CanvasText 74%, Canvas);
        --sup-text-faint: color-mix(in srgb, CanvasText 66%, Canvas);
        --sup-info-ink: color-mix(in srgb, var(--sup-info) 55%, CanvasText);
        --sup-solar-ink: color-mix(in srgb, var(--sup-solar) 55%, CanvasText)
    }

    .sup-printing .sup-cable-print-table {
        width: 100%;
        border-collapse: collapse;
        color: var(--sup-text);
        font-size: 12px;
        font-variant-numeric: tabular-nums
    }

    .sup-printing .sup-cable-print-table thead {
        display: table-header-group
    }

    .sup-printing .sup-cable-print-table tr {
        break-inside: avoid;
        page-break-inside: avoid
    }

    .sup-printing .sup-cable-print-table th,
    .sup-printing .sup-cable-print-table td {
        padding: var(--sup-space-2) var(--sup-space-3);
        border-bottom: 1px solid var(--sup-border);
        text-align: left;
        vertical-align: middle
    }

    .sup-printing .sup-cable-print-table td {
        white-space: nowrap
    }

    .sup-printing .sup-cable-print-table td:is([data-column=route], [data-column=cable_spec], [data-column=standard]) {
        overflow-wrap: anywhere;
        white-space: normal
    }

    .sup-printing .sup-cable-print-table th {
        background: var(--sup-surface-2);
        color: var(--sup-text-faint);
        font-size: 11px;
        font-weight: 600
    }

    .sup-printing .sup-cable-print-empty {
        color: var(--sup-text-dim)
    }

    html:has(.sup-printing) {
        page: sup-sld-schedule
    }
}

@page sup-sld-schedule {
    size: landscape;
    margin: 12mm
}

/*! 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-translate-x: 0;
            --tw-translate-y: 0;
            --tw-translate-z: 0;
            --tw-rotate-x: initial;
            --tw-rotate-y: initial;
            --tw-rotate-z: initial;
            --tw-skew-x: initial;
            --tw-skew-y: initial;
            --tw-space-y-reverse: 0;
            --tw-space-x-reverse: 0;
            --tw-border-style: solid;
            --tw-gradient-position: initial;
            --tw-gradient-from: #0000;
            --tw-gradient-via: #0000;
            --tw-gradient-to: #0000;
            --tw-gradient-stops: initial;
            --tw-gradient-via-stops: initial;
            --tw-gradient-from-position: 0%;
            --tw-gradient-via-position: 50%;
            --tw-gradient-to-position: 100%;
            --tw-leading: initial;
            --tw-font-weight: initial;
            --tw-tracking: initial;
            --tw-ordinal: initial;
            --tw-slashed-zero: initial;
            --tw-numeric-figure: initial;
            --tw-numeric-spacing: initial;
            --tw-numeric-fraction: initial;
            --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-outline-style: solid;
            --tw-blur: initial;
            --tw-brightness: initial;
            --tw-contrast: initial;
            --tw-grayscale: initial;
            --tw-hue-rotate: initial;
            --tw-invert: initial;
            --tw-opacity: initial;
            --tw-saturate: initial;
            --tw-sepia: initial;
            --tw-drop-shadow: initial;
            --tw-drop-shadow-color: initial;
            --tw-drop-shadow-alpha: 100%;
            --tw-drop-shadow-size: initial;
            --tw-backdrop-blur: initial;
            --tw-backdrop-brightness: initial;
            --tw-backdrop-contrast: initial;
            --tw-backdrop-grayscale: initial;
            --tw-backdrop-hue-rotate: initial;
            --tw-backdrop-invert: initial;
            --tw-backdrop-opacity: initial;
            --tw-backdrop-saturate: initial;
            --tw-backdrop-sepia: initial;
            --tw-duration: initial;
            --tw-ease: initial;
            --tw-content: "";
            --tw-scale-x: 1;
            --tw-scale-y: 1;
            --tw-scale-z: 1;
            --tw-scroll-snap-strictness: proximity;
            --tw-animation-delay: 0s;
            --tw-animation-direction: normal;
            --tw-animation-duration: initial;
            --tw-animation-fill-mode: none;
            --tw-animation-iteration-count: 1;
            --tw-enter-blur: 0;
            --tw-enter-opacity: 1;
            --tw-enter-rotate: 0;
            --tw-enter-scale: 1;
            --tw-enter-translate-x: 0;
            --tw-enter-translate-y: 0;
            --tw-exit-blur: 0;
            --tw-exit-opacity: 1;
            --tw-exit-rotate: 0;
            --tw-exit-scale: 1;
            --tw-exit-translate-x: 0;
            --tw-exit-translate-y: 0
        }
    }
}

@layer theme {

    :root,
    :host {
        --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --color-red-50: oklch(97.1% .013 17.38);
        --color-red-200: oklch(88.5% .062 18.334);
        --color-red-300: oklch(80.8% .114 19.571);
        --color-red-400: oklch(70.4% .191 22.216);
        --color-red-500: oklch(63.7% .237 25.331);
        --color-red-600: oklch(57.7% .245 27.325);
        --color-red-700: oklch(50.5% .213 27.518);
        --color-red-900: oklch(39.6% .141 25.723);
        --color-orange-500: oklch(70.5% .213 47.604);
        --color-amber-50: oklch(98.7% .022 95.277);
        --color-amber-200: oklch(92.4% .12 95.746);
        --color-amber-300: oklch(87.9% .169 91.605);
        --color-amber-400: oklch(82.8% .189 84.429);
        --color-amber-500: oklch(76.9% .188 70.08);
        --color-amber-700: oklch(55.5% .163 48.998);
        --color-amber-800: oklch(47.3% .137 46.201);
        --color-amber-900: oklch(41.4% .112 45.904);
        --color-yellow-50: oklch(98.7% .026 102.212);
        --color-yellow-300: oklch(90.5% .182 98.111);
        --color-yellow-900: oklch(42.1% .095 57.708);
        --color-green-50: oklch(98.2% .018 155.826);
        --color-green-100: oklch(96.2% .044 156.743);
        --color-green-200: oklch(92.5% .084 155.995);
        --color-green-600: oklch(62.7% .194 149.214);
        --color-green-700: oklch(52.7% .154 150.069);
        --color-green-800: oklch(44.8% .119 151.328);
        --color-green-900: oklch(39.3% .095 152.535);
        --color-emerald-300: oklch(84.5% .143 164.978);
        --color-emerald-400: oklch(76.5% .177 163.223);
        --color-emerald-500: oklch(69.6% .17 162.48);
        --color-cyan-300: oklch(86.5% .127 207.078);
        --color-cyan-400: oklch(78.9% .154 211.53);
        --color-blue-50: oklch(97% .014 254.604);
        --color-blue-100: oklch(93.2% .032 255.585);
        --color-blue-200: oklch(88.2% .059 254.128);
        --color-blue-300: oklch(80.9% .105 251.813);
        --color-blue-400: oklch(70.7% .165 254.624);
        --color-blue-500: oklch(62.3% .214 259.815);
        --color-blue-600: oklch(54.6% .245 262.881);
        --color-blue-700: oklch(48.8% .243 264.376);
        --color-blue-800: oklch(42.4% .199 265.638);
        --color-blue-900: oklch(37.9% .146 265.522);
        --color-blue-950: oklch(28.2% .091 267.935);
        --color-slate-300: oklch(86.9% .022 252.894);
        --color-gray-200: oklch(92.8% .006 264.531);
        --color-gray-400: oklch(70.7% .022 261.325);
        --color-gray-500: oklch(55.1% .027 264.364);
        --color-gray-600: oklch(44.6% .03 256.802);
        --color-gray-700: oklch(37.3% .034 259.733);
        --color-gray-800: oklch(27.8% .033 256.848);
        --color-zinc-100: oklch(96.7% .001 286.375);
        --color-zinc-200: oklch(92% .004 286.32);
        --color-zinc-300: oklch(87.1% .006 286.286);
        --color-zinc-400: oklch(70.5% .015 286.067);
        --color-zinc-500: oklch(55.2% .016 285.938);
        --color-zinc-600: oklch(44.2% .017 285.786);
        --color-zinc-800: oklch(27.4% .006 286.033);
        --color-zinc-900: oklch(21% .006 285.885);
        --color-neutral-50: oklch(98.5% 0 0);
        --color-neutral-100: oklch(97% 0 0);
        --color-neutral-200: oklch(92.2% 0 0);
        --color-neutral-300: oklch(87% 0 0);
        --color-neutral-400: oklch(70.8% 0 0);
        --color-neutral-500: oklch(55.6% 0 0);
        --color-neutral-600: oklch(43.9% 0 0);
        --color-neutral-700: oklch(37.1% 0 0);
        --color-neutral-800: oklch(26.9% 0 0);
        --color-neutral-900: oklch(20.5% 0 0);
        --color-neutral-950: oklch(14.5% 0 0);
        --color-black: #000;
        --color-white: #fff;
        --spacing: .25rem;
        --container-md: 28rem;
        --container-lg: 32rem;
        --text-xs: .75rem;
        --text-xs--line-height: calc(1 / .75);
        --text-sm: .875rem;
        --text-sm--line-height: calc(1.25 / .875);
        --text-base: 1rem;
        --text-base--line-height: 1.5;
        --text-lg: 1.125rem;
        --text-lg--line-height: calc(1.75 / 1.125);
        --text-xl: 1.25rem;
        --text-xl--line-height: calc(1.75 / 1.25);
        --text-2xl: 1.5rem;
        --text-2xl--line-height: calc(2 / 1.5);
        --font-weight-thin: 100;
        --font-weight-normal: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        --tracking-tight: -.025em;
        --tracking-normal: 0em;
        --tracking-wide: .025em;
        --tracking-widest: .1em;
        --leading-tight: 1.25;
        --leading-snug: 1.375;
        --radius-xs: .125rem;
        --radius-sm: .25rem;
        --radius-md: .375rem;
        --radius-lg: .5rem;
        --radius-xl: .75rem;
        --radius-2xl: 1rem;
        --ease-out: cubic-bezier(0, 0, .2, 1);
        --ease-in-out: cubic-bezier(.4, 0, .2, 1);
        --animate-spin: spin 1s linear infinite;
        --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
        --blur-sm: 8px;
        --blur-md: 12px;
        --perspective-near: 300px;
        --perspective-distant: 1200px;
        --aspect-video: 16 / 9;
        --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-destructive: var(--destructive);
        --color-border: var(--border)
    }
}

@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%;
        -moz-tab-size: 4;
        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;
        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]) {
        -webkit-appearance: button;
        -moz-appearance: button;
        appearance: button
    }

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

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

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

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

    * {
        border-color: var(--border);
        outline-color: var(--ring)
    }

    @supports (color:color-mix(in lab, red, red)) {
        * {
            outline-color: color-mix(in oklab, var(--ring) 50%, transparent)
        }
    }

    img {
        display: initial;
        max-width: none
    }
}

@layer components {
    .btn {
        justify-content: center;
        align-items: center;
        gap: var(--space-4);
        font-family: var(--font-sans);
        font-size: var(--text-body);
        font-weight: var(--weight-medium);
        letter-spacing: var(--tracking-snug);
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
        white-space: nowrap;
        transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-base) var(--ease-out);
        border: 1px solid #0000;
        outline: none;
        line-height: 1;
        display: inline-flex
    }

    .btn:focus-visible {
        box-shadow: var(--focus-ring)
    }

    .btn:disabled,
    .btn[aria-disabled=true] {
        background: var(--bg-surface-2);
        color: var(--text-muted);
        border-color: var(--border-subtle);
        box-shadow: none;
        cursor: not-allowed
    }

    .btn[aria-busy=true],
    .btn[aria-busy=true]:disabled {
        opacity: .85;
        cursor: progress
    }

    .btn-spinner {
        border-radius: var(--radius-full);
        border: 2px solid;
        flex: none;
        display: inline-block
    }

    @supports (color:color-mix(in lab, red, red)) {
        .btn-spinner {
            border: 2px solid color-mix(in srgb, currentColor 30%, transparent)
        }
    }

    .btn-spinner {
        border-top-color: currentColor;
        animation: .7s linear infinite btn-spin
    }

    @keyframes btn-spin {
        to {
            transform: rotate(360deg)
        }
    }

    .btn-md {
        padding: var(--space-6) var(--space-10);
        min-height: var(--control-h-md);
        border-radius: var(--radius-pill)
    }

    .btn-lg {
        padding: 14px var(--space-12);
        border-radius: var(--radius-pill);
        min-height: 48px;
        font-size: var(--text-body-lg)
    }

    .btn-sm {
        padding: var(--space-4) 14px;
        min-height: var(--control-h-sm);
        border-radius: var(--radius-pill);
        font-size: var(--text-body-sm)
    }

    .btn-rect,
    .btn-square,
    .btn-square.btn-sm,
    .btn-square.btn-md,
    .btn-square.btn-lg {
        border-radius: var(--radius-sm)
    }

    .btn-block {
        width: 100%
    }

    .btn-primary {
        background: var(--bg-brand);
        color: var(--text-on-brand);
        border-color: var(--bg-brand)
    }

    .btn-primary:hover:not(:disabled) {
        background: var(--bg-brand-hover);
        border-color: var(--bg-brand-hover);
        box-shadow: 0 0 0 4px var(--brand-glow-halo), 0 6px 18px var(--brand-glow-shadow)
    }

    .btn-primary:active:not(:disabled) {
        background: var(--bg-brand-active);
        border-color: var(--bg-brand-active);
        box-shadow: 0 0 0 2px var(--brand-glow-halo)
    }

    .btn-primary:focus-visible {
        box-shadow: var(--focus-ring), 0 6px 18px var(--brand-glow-shadow)
    }

    .btn-secondary {
        background: var(--bg-canvas);
        color: var(--text-primary);
        border-color: var(--border-default)
    }

    .btn-secondary:hover:not(:disabled) {
        background: var(--bg-surface);
        border-color: var(--border-strong)
    }

    .btn-secondary:active:not(:disabled) {
        background: var(--bg-surface-2)
    }

    .btn-ghost {
        color: var(--text-primary);
        background: 0 0;
        border-color: #0000
    }

    .btn-ghost:hover:not(:disabled) {
        background: var(--bg-surface)
    }

    .btn-ghost:active:not(:disabled) {
        background: var(--bg-surface-2)
    }

    .btn-ghost:disabled,
    .btn-ghost[aria-disabled=true] {
        background: 0 0;
        border-color: #0000
    }

    .btn-danger {
        background: var(--color-danger-500);
        color: var(--text-on-brand);
        border-color: var(--color-danger-500)
    }

    .btn-danger:hover:not(:disabled) {
        background: var(--color-danger-600);
        border-color: var(--color-danger-600);
        box-shadow: 0 0 0 4px var(--color-danger-500), 0 6px 18px var(--color-danger-500)
    }

    @supports (color:color-mix(in lab, red, red)) {
        .btn-danger:hover:not(:disabled) {
            box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-danger-500) 20%, transparent), 0 6px 18px color-mix(in srgb, var(--color-danger-500) 45%, transparent)
        }
    }

    .btn-danger:active:not(:disabled) {
        background: var(--color-danger-600);
        border-color: var(--color-danger-600);
        box-shadow: 0 0 0 2px var(--color-danger-500)
    }

    @supports (color:color-mix(in lab, red, red)) {
        .btn-danger:active:not(:disabled) {
            box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-danger-500) 20%, transparent)
        }
    }

    .btn-danger:focus-visible {
        box-shadow: var(--focus-ring), 0 0 0 4px var(--color-danger-500)
    }

    @supports (color:color-mix(in lab, red, red)) {
        .btn-danger:focus-visible {
            box-shadow: var(--focus-ring), 0 0 0 4px color-mix(in srgb, var(--color-danger-500) 20%, transparent)
        }
    }

    .btn-danger-outline {
        color: var(--text-danger);
        border-color: var(--border-danger);
        background: 0 0
    }

    .btn-danger-outline:hover:not(:disabled) {
        background: var(--danger-halo);
        border-color: var(--color-danger-500)
    }

    .btn-danger-outline:active:not(:disabled) {
        background: var(--color-danger-500)
    }

    @supports (color:color-mix(in lab, red, red)) {
        .btn-danger-outline:active:not(:disabled) {
            background: color-mix(in srgb, var(--color-danger-500) 20%, transparent)
        }
    }

    .btn-danger-outline:active:not(:disabled) {
        box-shadow: 0 0 0 2px var(--color-danger-500)
    }

    @supports (color:color-mix(in lab, red, red)) {
        .btn-danger-outline:active:not(:disabled) {
            box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-danger-500) 20%, transparent)
        }
    }

    .btn-danger-outline:focus-visible {
        box-shadow: var(--focus-ring), 0 0 0 4px var(--color-danger-500)
    }

    @supports (color:color-mix(in lab, red, red)) {
        .btn-danger-outline:focus-visible {
            box-shadow: var(--focus-ring), 0 0 0 4px color-mix(in srgb, var(--color-danger-500) 20%, transparent)
        }
    }

    .chip {
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-1) var(--space-3);
        background: var(--bg-surface);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-pill);
        font-size: var(--text-caption);
        font-weight: var(--weight-medium);
        color: var(--text-secondary);
        white-space: nowrap;
        display: inline-flex
    }

    .chip-brand {
        background: var(--bg-brand-subtle);
        color: var(--text-brand);
        border-color: #0000
    }

    .chip-warning {
        background: var(--color-warning-500)
    }

    @supports (color:color-mix(in lab, red, red)) {
        .chip-warning {
            background: color-mix(in srgb, var(--color-warning-500) 12%, transparent)
        }
    }

    .chip-warning {
        color: var(--color-warning-500);
        border-color: #0000
    }

    .chip-success {
        background: var(--color-success-500)
    }

    @supports (color:color-mix(in lab, red, red)) {
        .chip-success {
            background: color-mix(in srgb, var(--color-success-500) 12%, transparent)
        }
    }

    .chip-success {
        color: var(--text-success);
        border-color: #0000
    }

    .chip-danger {
        background: var(--danger-halo);
        color: var(--text-danger);
        border-color: #0000
    }

    .chip:is(button, a),
    .chip[role=button] {
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
        transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-base) var(--ease-out);
        outline: none;
        text-decoration: none
    }

    .chip:is(button, a):hover:not(:disabled, [aria-disabled=true]),
    .chip[role=button]:hover:not([aria-disabled=true]) {
        background: var(--bg-surface-2);
        border-color: var(--border-strong);
        color: var(--text-primary)
    }

    .chip-brand:is(button, a):hover:not(:disabled, [aria-disabled=true]),
    .chip-brand[role=button]:hover:not([aria-disabled=true]) {
        background: var(--bg-brand)
    }

    @supports (color:color-mix(in lab, red, red)) {

        .chip-brand:is(button, a):hover:not(:disabled, [aria-disabled=true]),
        .chip-brand[role=button]:hover:not([aria-disabled=true]) {
            background: color-mix(in srgb, var(--bg-brand) 20%, transparent)
        }
    }

    .chip-brand:is(button, a):hover:not(:disabled, [aria-disabled=true]),
    .chip-brand[role=button]:hover:not([aria-disabled=true]) {
        color: var(--text-brand);
        border-color: #0000
    }

    .chip-warning:is(button, a):hover:not(:disabled, [aria-disabled=true]),
    .chip-warning[role=button]:hover:not([aria-disabled=true]) {
        background: var(--color-warning-500)
    }

    @supports (color:color-mix(in lab, red, red)) {

        .chip-warning:is(button, a):hover:not(:disabled, [aria-disabled=true]),
        .chip-warning[role=button]:hover:not([aria-disabled=true]) {
            background: color-mix(in srgb, var(--color-warning-500) 20%, transparent)
        }
    }

    .chip-warning:is(button, a):hover:not(:disabled, [aria-disabled=true]),
    .chip-warning[role=button]:hover:not([aria-disabled=true]) {
        color: var(--color-warning-500);
        border-color: #0000
    }

    .chip-success:is(button, a):hover:not(:disabled, [aria-disabled=true]),
    .chip-success[role=button]:hover:not([aria-disabled=true]) {
        background: var(--color-success-500)
    }

    @supports (color:color-mix(in lab, red, red)) {

        .chip-success:is(button, a):hover:not(:disabled, [aria-disabled=true]),
        .chip-success[role=button]:hover:not([aria-disabled=true]) {
            background: color-mix(in srgb, var(--color-success-500) 20%, transparent)
        }
    }

    .chip-success:is(button, a):hover:not(:disabled, [aria-disabled=true]),
    .chip-success[role=button]:hover:not([aria-disabled=true]) {
        color: var(--text-success);
        border-color: #0000
    }

    .chip-danger:is(button, a):hover:not(:disabled, [aria-disabled=true]),
    .chip-danger[role=button]:hover:not([aria-disabled=true]) {
        background: var(--color-danger-500)
    }

    @supports (color:color-mix(in lab, red, red)) {

        .chip-danger:is(button, a):hover:not(:disabled, [aria-disabled=true]),
        .chip-danger[role=button]:hover:not([aria-disabled=true]) {
            background: color-mix(in srgb, var(--color-danger-500) 20%, transparent)
        }
    }

    .chip-danger:is(button, a):hover:not(:disabled, [aria-disabled=true]),
    .chip-danger[role=button]:hover:not([aria-disabled=true]) {
        color: var(--text-danger);
        border-color: #0000
    }

    .chip:is(button, a):focus-visible,
    .chip[role=button]:focus-visible {
        box-shadow: var(--focus-ring)
    }

    .chip:is(button, a):active:not(:disabled, [aria-disabled=true]),
    .chip[role=button]:active:not([aria-disabled=true]) {
        box-shadow: 0 0 0 2px var(--focus-halo)
    }

    .chip[aria-pressed=true],
    .chip.is-selected {
        background: var(--bg-brand);
        border-color: var(--bg-brand);
        color: var(--text-on-brand)
    }

    .chip[aria-pressed=true]:hover:not(:disabled, [aria-disabled=true]),
    .chip.is-selected:hover:not(:disabled, [aria-disabled=true]) {
        background: var(--bg-brand-hover);
        border-color: var(--bg-brand-hover);
        color: var(--text-on-brand)
    }

    .chip:disabled,
    .chip[aria-disabled=true] {
        background: var(--bg-surface-2);
        border-color: var(--border-subtle);
        color: var(--text-muted);
        box-shadow: none;
        cursor: not-allowed
    }

    .link {
        color: var(--text-brand);
        text-underline-offset: 3px;
        text-decoration: underline;
        text-decoration-thickness: 1px;
        -webkit-text-decoration-color: var(--link-underline);
        text-decoration-color: var(--link-underline);
        font-weight: var(--weight-medium);
        transition: color var(--duration-fast) var(--ease-standard), text-decoration-color var(--duration-fast) var(--ease-standard), text-decoration-thickness var(--duration-fast) var(--ease-standard);
        border-radius: var(--radius-xs);
        outline: none
    }

    .link:hover {
        text-decoration-color: currentColor;
        text-decoration-thickness: 1.5px
    }

    .link:focus-visible {
        box-shadow: var(--focus-ring)
    }

    .modal-title {
        font-size: var(--text-h2);
        font-weight: var(--weight-semibold);
        letter-spacing: var(--tracking-snug);
        color: var(--text-primary);
        margin: 0 0 var(--space-10);
        padding-right: var(--space-24)
    }

    .modal-sub {
        font-size: var(--text-body-sm);
        color: var(--text-secondary);
        margin: 0 0 var(--space-12);
        line-height: var(--lh-base)
    }

    .modal-note {
        font-size: var(--text-body-sm);
        color: var(--text-primary);
        font-weight: var(--weight-medium);
        font-style: italic;
        line-height: var(--lh-base);
        margin: 0 0 var(--space-6)
    }

    .modal-actions {
        justify-content: flex-end;
        gap: var(--space-6);
        margin-top: var(--space-16);
        display: flex
    }

    @media(max-width:540px) {
        .modal-actions {
            flex-wrap: wrap
        }

        .modal-actions .btn {
            flex: auto
        }
    }

    .scrim--blur {
        -webkit-backdrop-filter: blur(var(--scrim-blur));
        backdrop-filter: blur(var(--scrim-blur))
    }

    @media(prefers-reduced-transparency:reduce) {
        .scrim--blur {
            -webkit-backdrop-filter: none;
            backdrop-filter: none
        }
    }
}

@layer utilities {
    .\@container {
        container-type: inline-size
    }

    .\[container-type\:size\] {
        container-type: size
    }

    .pointer-events-auto {
        pointer-events: auto
    }

    .pointer-events-none {
        pointer-events: none
    }

    .\!visible {
        visibility: visible !important
    }

    .collapse {
        visibility: collapse
    }

    .invisible {
        visibility: hidden
    }

    .visible {
        visibility: visible
    }

    .sr-only {
        clip-path: inset(50%);
        white-space: nowrap;
        border-width: 0;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        position: absolute;
        overflow: hidden
    }

    .absolute {
        position: absolute
    }

    .fixed {
        position: fixed
    }

    .relative {
        position: relative
    }

    .static {
        position: static
    }

    .sticky {
        position: sticky
    }

    .inset-0 {
        inset: calc(var(--spacing) * 0)
    }

    .inset-x-0 {
        inset-inline: calc(var(--spacing) * 0)
    }

    .inset-x-8 {
        inset-inline: calc(var(--spacing) * 8)
    }

    .inset-y-0 {
        inset-block: calc(var(--spacing) * 0)
    }

    .inset-y-px {
        inset-block: 1px
    }

    .start-1 {
        inset-inline-start: calc(var(--spacing) * 1)
    }

    .-top-7 {
        top: calc(var(--spacing) * -7)
    }

    .-top-12 {
        top: calc(var(--spacing) * -12)
    }

    .top-0 {
        top: calc(var(--spacing) * 0)
    }

    .top-0\.5 {
        top: calc(var(--spacing) * .5)
    }

    .top-1 {
        top: calc(var(--spacing) * 1)
    }

    .top-1\/2 {
        top: 50%
    }

    .top-2 {
        top: calc(var(--spacing) * 2)
    }

    .top-2\.5 {
        top: calc(var(--spacing) * 2.5)
    }

    .top-3 {
        top: calc(var(--spacing) * 3)
    }

    .top-4 {
        top: calc(var(--spacing) * 4)
    }

    .top-5 {
        top: calc(var(--spacing) * 5)
    }

    .top-7 {
        top: calc(var(--spacing) * 7)
    }

    .top-14 {
        top: calc(var(--spacing) * 14)
    }

    .top-\[1px\] {
        top: 1px
    }

    .top-\[3px\] {
        top: 3px
    }

    .top-\[12px\] {
        top: 12px
    }

    .top-\[42px\] {
        top: 42px
    }

    .top-\[50\%\] {
        top: 50%
    }

    .top-\[54px\] {
        top: 54px
    }

    .top-\[68px\] {
        top: 68px
    }

    .top-\[551px\] {
        top: 551px
    }

    .top-\[601px\] {
        top: 601px
    }

    .top-\[calc\(100\%\+4px\)\] {
        top: calc(100% + 4px)
    }

    .top-\[calc\(env\(safe-area-inset-top\)\+96px\)\] {
        top: calc(env(safe-area-inset-top) + 96px)
    }

    .top-\[calc\(var\(--space-10\)\*-1\)\] {
        top: calc(var(--space-10) * -1)
    }

    .top-\[calc\(var\(--studio-view-header-h\)\+12px\)\] {
        top: calc(var(--studio-view-header-h) + 12px)
    }

    .top-\[calc\(var\(--studio-view-stats-top\)\+80px\)\] {
        top: calc(var(--studio-view-stats-top) + 80px)
    }

    .top-\[var\(--space-3\)\] {
        top: var(--space-3)
    }

    .top-\[var\(--space-4\)\] {
        top: var(--space-4)
    }

    .top-\[var\(--studio-view-desktop-content-top\)\] {
        top: var(--studio-view-desktop-content-top)
    }

    .top-\[var\(--sup-topbar-h\)\] {
        top: var(--sup-topbar-h)
    }

    .top-auto {
        top: auto
    }

    .top-full {
        top: 100%
    }

    .-right-5 {
        right: calc(var(--spacing) * -5)
    }

    .right-0 {
        right: calc(var(--spacing) * 0)
    }

    .right-1 {
        right: calc(var(--spacing) * 1)
    }

    .right-2 {
        right: calc(var(--spacing) * 2)
    }

    .right-2\.5 {
        right: calc(var(--spacing) * 2.5)
    }

    .right-3 {
        right: calc(var(--spacing) * 3)
    }

    .right-3\.5 {
        right: calc(var(--spacing) * 3.5)
    }

    .right-4 {
        right: calc(var(--spacing) * 4)
    }

    .right-5 {
        right: calc(var(--spacing) * 5)
    }

    .right-\[-1px\] {
        right: -1px
    }

    .right-\[3px\] {
        right: 3px
    }

    .right-\[6px\] {
        right: 6px
    }

    .right-\[12px\] {
        right: 12px
    }

    .right-\[14px\] {
        right: 14px
    }

    .right-\[var\(--space-3\)\] {
        right: var(--space-3)
    }

    .bottom-0 {
        bottom: calc(var(--spacing) * 0)
    }

    .bottom-0\.5 {
        bottom: calc(var(--spacing) * .5)
    }

    .bottom-3 {
        bottom: calc(var(--spacing) * 3)
    }

    .bottom-4 {
        bottom: calc(var(--spacing) * 4)
    }

    .bottom-5 {
        bottom: calc(var(--spacing) * 5)
    }

    .bottom-6 {
        bottom: calc(var(--spacing) * 6)
    }

    .bottom-8 {
        bottom: calc(var(--spacing) * 8)
    }

    .bottom-10 {
        bottom: calc(var(--spacing) * 10)
    }

    .bottom-11 {
        bottom: calc(var(--spacing) * 11)
    }

    .bottom-16 {
        bottom: calc(var(--spacing) * 16)
    }

    .bottom-20 {
        bottom: calc(var(--spacing) * 20)
    }

    .bottom-\[3px\] {
        bottom: 3px
    }

    .bottom-\[6px\] {
        bottom: 6px
    }

    .bottom-\[10px\] {
        bottom: 10px
    }

    .bottom-\[46px\] {
        bottom: 46px
    }

    .bottom-\[54px\] {
        bottom: 54px
    }

    .bottom-\[62px\] {
        bottom: 62px
    }

    .bottom-\[70px\] {
        bottom: 70px
    }

    .bottom-\[84px\] {
        bottom: 84px
    }

    .bottom-\[calc\(100\%\+8px\)\] {
        bottom: calc(100% + 8px)
    }

    .bottom-\[calc\(100vh-100dvh\)\] {
        bottom: calc(100vh - 100dvh)
    }

    .bottom-\[calc\(var\(--space-10\)\*-1\)\] {
        bottom: calc(var(--space-10) * -1)
    }

    .-left-5 {
        left: calc(var(--spacing) * -5)
    }

    .left-0 {
        left: calc(var(--spacing) * 0)
    }

    .left-1 {
        left: calc(var(--spacing) * 1)
    }

    .left-1\/2 {
        left: 50%
    }

    .left-2 {
        left: calc(var(--spacing) * 2)
    }

    .left-3 {
        left: calc(var(--spacing) * 3)
    }

    .left-4 {
        left: calc(var(--spacing) * 4)
    }

    .left-5 {
        left: calc(var(--spacing) * 5)
    }

    .left-\[3px\] {
        left: 3px
    }

    .left-\[8px\] {
        left: 8px
    }

    .left-\[14px\] {
        left: 14px
    }

    .left-\[17px\] {
        left: 17px
    }

    .left-\[50\%\] {
        left: 50%
    }

    .left-\[92px\] {
        left: 92px
    }

    .left-\[var\(--space-4\)\] {
        left: var(--space-4)
    }

    .left-px {
        left: 1px
    }

    .isolate {
        isolation: isolate
    }

    .z-0 {
        z-index: 0
    }

    .z-1 {
        z-index: 1
    }

    .z-10 {
        z-index: 10
    }

    .z-20 {
        z-index: 20
    }

    .z-30 {
        z-index: 30
    }

    .z-35 {
        z-index: 35
    }

    .z-40 {
        z-index: 40
    }

    .z-50 {
        z-index: 50
    }

    .z-99 {
        z-index: 99
    }

    .z-500 {
        z-index: 500
    }

    .z-999 {
        z-index: 999
    }

    .z-1000 {
        z-index: 1000
    }

    .z-50000 {
        z-index: 50000
    }

    .z-\[1\] {
        z-index: 1
    }

    .z-\[2\] {
        z-index: 2
    }

    .z-\[3\] {
        z-index: 3
    }

    .z-\[30\] {
        z-index: 30
    }

    .z-\[100\] {
        z-index: 100
    }

    .z-\[150\] {
        z-index: 150
    }

    .z-\[520\] {
        z-index: 520
    }

    .z-\[1000\] {
        z-index: 1000
    }

    .z-\[1001\] {
        z-index: 1001
    }

    .z-\[1200\] {
        z-index: 1200
    }

    .z-\[9999\] {
        z-index: 9999
    }

    .col-span-2 {
        grid-column: span 2/span 2
    }

    .col-span-3 {
        grid-column: span 3/span 3
    }

    .col-start-1 {
        grid-column-start: 1
    }

    .col-start-2 {
        grid-column-start: 2
    }

    .col-start-4 {
        grid-column-start: 4
    }

    .row-0 {
        grid-row: 0
    }

    .row-1 {
        grid-row: 1
    }

    .row-2 {
        grid-row: 2
    }

    .row-3 {
        grid-row: 3
    }

    .row-start-1 {
        grid-row-start: 1
    }

    .row-start-2 {
        grid-row-start: 2
    }

    .row-end-3 {
        grid-row-end: 3
    }

    .container {
        width: 100%
    }

    @media(min-width:40rem) {
        .container {
            max-width: 40rem
        }
    }

    @media(min-width:48rem) {
        .container {
            max-width: 48rem
        }
    }

    @media(min-width:64rem) {
        .container {
            max-width: 64rem
        }
    }

    @media(min-width:80rem) {
        .container {
            max-width: 80rem
        }
    }

    @media(min-width:96rem) {
        .container {
            max-width: 96rem
        }
    }

    .m-0 {
        margin: calc(var(--spacing) * 0)
    }

    .m-1 {
        margin: calc(var(--spacing) * 1)
    }

    .m-2 {
        margin: calc(var(--spacing) * 2)
    }

    .m-3 {
        margin: calc(var(--spacing) * 3)
    }

    .-mx-1 {
        margin-inline: calc(var(--spacing) * -1)
    }

    .-mx-\[var\(--space-12\)\] {
        margin-inline: calc(var(--space-12) * -1)
    }

    .mx-0\.5 {
        margin-inline: calc(var(--spacing) * .5)
    }

    .mx-1 {
        margin-inline: calc(var(--spacing) * 1)
    }

    .mx-3 {
        margin-inline: calc(var(--spacing) * 3)
    }

    .mx-auto {
        margin-inline: auto
    }

    .-my-\[2px\] {
        margin-block: -2px
    }

    .my-0\.5 {
        margin-block: calc(var(--spacing) * .5)
    }

    .my-1 {
        margin-block: calc(var(--spacing) * 1)
    }

    .my-2 {
        margin-block: calc(var(--spacing) * 2)
    }

    .my-4 {
        margin-block: calc(var(--spacing) * 4)
    }

    .my-\[var\(--space-12\)\] {
        margin-block: var(--space-12)
    }

    .my-auto {
        margin-block: auto
    }

    .-mt-1 {
        margin-top: calc(var(--spacing) * -1)
    }

    .-mt-2 {
        margin-top: calc(var(--spacing) * -2)
    }

    .-mt-3 {
        margin-top: calc(var(--spacing) * -3)
    }

    .-mt-4 {
        margin-top: calc(var(--spacing) * -4)
    }

    .-mt-6 {
        margin-top: calc(var(--spacing) * -6)
    }

    .-mt-\[var\(--space-10\)\] {
        margin-top: calc(var(--space-10) * -1)
    }

    .mt-0 {
        margin-top: calc(var(--spacing) * 0)
    }

    .mt-0\.5 {
        margin-top: calc(var(--spacing) * .5)
    }

    .mt-1 {
        margin-top: calc(var(--spacing) * 1)
    }

    .mt-1\.5 {
        margin-top: calc(var(--spacing) * 1.5)
    }

    .mt-2 {
        margin-top: calc(var(--spacing) * 2)
    }

    .mt-2\.5 {
        margin-top: calc(var(--spacing) * 2.5)
    }

    .mt-3 {
        margin-top: calc(var(--spacing) * 3)
    }

    .mt-3\.5 {
        margin-top: calc(var(--spacing) * 3.5)
    }

    .mt-4 {
        margin-top: calc(var(--spacing) * 4)
    }

    .mt-6 {
        margin-top: calc(var(--spacing) * 6)
    }

    .mt-8 {
        margin-top: calc(var(--spacing) * 8)
    }

    .mt-10 {
        margin-top: calc(var(--spacing) * 10)
    }

    .mt-\[2px\] {
        margin-top: 2px
    }

    .mt-\[3px\] {
        margin-top: 3px
    }

    .mt-\[4px\] {
        margin-top: 4px
    }

    .mt-\[8px\] {
        margin-top: 8px
    }

    .mt-\[16px\] {
        margin-top: 16px
    }

    .mt-\[20px\] {
        margin-top: 20px
    }

    .mt-\[24px\] {
        margin-top: 24px
    }

    .mt-\[32px\] {
        margin-top: 32px
    }

    .mt-\[86px\] {
        margin-top: 86px
    }

    .mt-\[var\(--space-1\)\] {
        margin-top: var(--space-1)
    }

    .mt-\[var\(--space-2\)\] {
        margin-top: var(--space-2)
    }

    .mt-\[var\(--space-3\)\] {
        margin-top: var(--space-3)
    }

    .mt-\[var\(--space-4\)\] {
        margin-top: var(--space-4)
    }

    .mt-\[var\(--space-6\)\] {
        margin-top: var(--space-6)
    }

    .mt-\[var\(--space-8\)\] {
        margin-top: var(--space-8)
    }

    .mt-\[var\(--space-10\)\] {
        margin-top: var(--space-10)
    }

    .mt-\[var\(--space-12\)\] {
        margin-top: var(--space-12)
    }

    .mt-\[var\(--space-16\)\] {
        margin-top: var(--space-16)
    }

    .mt-auto {
        margin-top: auto
    }

    .mt-px {
        margin-top: 1px
    }

    .mr-1 {
        margin-right: calc(var(--spacing) * 1)
    }

    .mr-2 {
        margin-right: calc(var(--spacing) * 2)
    }

    .mr-3 {
        margin-right: calc(var(--spacing) * 3)
    }

    .mr-4 {
        margin-right: calc(var(--spacing) * 4)
    }

    .mr-12 {
        margin-right: calc(var(--spacing) * 12)
    }

    .mr-35 {
        margin-right: calc(var(--spacing) * 35)
    }

    .mr-\[8px\] {
        margin-right: 8px
    }

    .mr-\[var\(--space-2\)\] {
        margin-right: var(--space-2)
    }

    .mr-auto {
        margin-right: auto
    }

    .-mb-1 {
        margin-bottom: calc(var(--spacing) * -1)
    }

    .-mb-\[var\(--space-10\)\] {
        margin-bottom: calc(var(--space-10) * -1)
    }

    .-mb-px {
        margin-bottom: -1px
    }

    .mb-0 {
        margin-bottom: calc(var(--spacing) * 0)
    }

    .mb-0\.5 {
        margin-bottom: calc(var(--spacing) * .5)
    }

    .mb-1 {
        margin-bottom: calc(var(--spacing) * 1)
    }

    .mb-1\.5 {
        margin-bottom: calc(var(--spacing) * 1.5)
    }

    .mb-2 {
        margin-bottom: calc(var(--spacing) * 2)
    }

    .mb-2\.5 {
        margin-bottom: calc(var(--spacing) * 2.5)
    }

    .mb-3 {
        margin-bottom: calc(var(--spacing) * 3)
    }

    .mb-3\.5 {
        margin-bottom: calc(var(--spacing) * 3.5)
    }

    .mb-4 {
        margin-bottom: calc(var(--spacing) * 4)
    }

    .mb-5 {
        margin-bottom: calc(var(--spacing) * 5)
    }

    .mb-6 {
        margin-bottom: calc(var(--spacing) * 6)
    }

    .mb-8 {
        margin-bottom: calc(var(--spacing) * 8)
    }

    .mb-\[12px\] {
        margin-bottom: 12px
    }

    .mb-\[var\(--space-1\)\] {
        margin-bottom: var(--space-1)
    }

    .mb-\[var\(--space-2\)\] {
        margin-bottom: var(--space-2)
    }

    .mb-\[var\(--space-3\)\] {
        margin-bottom: var(--space-3)
    }

    .mb-\[var\(--space-4\)\] {
        margin-bottom: var(--space-4)
    }

    .mb-\[var\(--space-6\)\] {
        margin-bottom: var(--space-6)
    }

    .mb-\[var\(--space-8\)\] {
        margin-bottom: var(--space-8)
    }

    .mb-\[var\(--space-10\)\] {
        margin-bottom: var(--space-10)
    }

    .mb-\[var\(--space-12\)\] {
        margin-bottom: var(--space-12)
    }

    .mb-\[var\(--space-16\)\] {
        margin-bottom: var(--space-16)
    }

    .mb-\[var\(--space-24\)\] {
        margin-bottom: var(--space-24)
    }

    .-ml-4 {
        margin-left: calc(var(--spacing) * -4)
    }

    .ml-1 {
        margin-left: calc(var(--spacing) * 1)
    }

    .ml-2 {
        margin-left: calc(var(--spacing) * 2)
    }

    .ml-3 {
        margin-left: calc(var(--spacing) * 3)
    }

    .ml-5 {
        margin-left: calc(var(--spacing) * 5)
    }

    .ml-16 {
        margin-left: calc(var(--spacing) * 16)
    }

    .ml-\[36px\] {
        margin-left: 36px
    }

    .ml-\[68px\] {
        margin-left: 68px
    }

    .ml-\[var\(--space-12\)\] {
        margin-left: var(--space-12)
    }

    .ml-auto {
        margin-left: auto
    }

    .line-clamp-1 {
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden
    }

    .line-clamp-2 {
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden
    }

    .\!block {
        display: block !important
    }

    .\!grid {
        display: grid !important
    }

    .block {
        display: block
    }

    .contents {
        display: contents
    }

    .flex {
        display: flex
    }

    .grid {
        display: grid
    }

    .hidden {
        display: none
    }

    .inline {
        display: inline
    }

    .inline-block {
        display: inline-block
    }

    .inline-flex {
        display: inline-flex
    }

    .table {
        display: table
    }

    .table-column {
        display: table-column
    }

    .table-row {
        display: table-row
    }

    .\!aspect-auto {
        aspect-ratio: auto !important
    }

    .aspect-auto {
        aspect-ratio: auto
    }

    .aspect-square {
        aspect-ratio: 1
    }

    .aspect-video {
        aspect-ratio: var(--aspect-video)
    }

    .size-2 {
        width: calc(var(--spacing) * 2);
        height: calc(var(--spacing) * 2)
    }

    .size-3 {
        width: calc(var(--spacing) * 3);
        height: calc(var(--spacing) * 3)
    }

    .size-3\.5 {
        width: calc(var(--spacing) * 3.5);
        height: calc(var(--spacing) * 3.5)
    }

    .size-4 {
        width: calc(var(--spacing) * 4);
        height: calc(var(--spacing) * 4)
    }

    .size-5 {
        width: calc(var(--spacing) * 5);
        height: calc(var(--spacing) * 5)
    }

    .size-6 {
        width: calc(var(--spacing) * 6);
        height: calc(var(--spacing) * 6)
    }

    .size-7 {
        width: calc(var(--spacing) * 7);
        height: calc(var(--spacing) * 7)
    }

    .size-8 {
        width: calc(var(--spacing) * 8);
        height: calc(var(--spacing) * 8)
    }

    .size-9 {
        width: calc(var(--spacing) * 9);
        height: calc(var(--spacing) * 9)
    }

    .size-10 {
        width: calc(var(--spacing) * 10);
        height: calc(var(--spacing) * 10)
    }

    .size-11 {
        width: calc(var(--spacing) * 11);
        height: calc(var(--spacing) * 11)
    }

    .size-\[3px\] {
        width: 3px;
        height: 3px
    }

    .size-\[10px\] {
        width: 10px;
        height: 10px
    }

    .size-\[14px\] {
        width: 14px;
        height: 14px
    }

    .size-\[16px\] {
        width: 16px;
        height: 16px
    }

    .size-\[18px\] {
        width: 18px;
        height: 18px
    }

    .size-\[20px\] {
        width: 20px;
        height: 20px
    }

    .size-\[22px\] {
        width: 22px;
        height: 22px
    }

    .size-\[24px\] {
        width: 24px;
        height: 24px
    }

    .size-\[28px\] {
        width: 28px;
        height: 28px
    }

    .size-\[32px\] {
        width: 32px;
        height: 32px
    }

    .size-\[38px\] {
        width: 38px;
        height: 38px
    }

    .size-\[40px\] {
        width: 40px;
        height: 40px
    }

    .size-\[56px\] {
        width: 56px;
        height: 56px
    }

    .size-\[72px\] {
        width: 72px;
        height: 72px
    }

    .size-\[88px\] {
        width: 88px;
        height: 88px
    }

    .size-\[var\(--control-h-md\)\] {
        width: var(--control-h-md);
        height: var(--control-h-md)
    }

    .size-\[var\(--control-h-sm\)\] {
        width: var(--control-h-sm);
        height: var(--control-h-sm)
    }

    .size-\[var\(--space-16\)\] {
        width: var(--space-16);
        height: var(--space-16)
    }

    .size-\[var\(--unit-70\)\] {
        width: var(--unit-70);
        height: var(--unit-70)
    }

    .size-full {
        width: 100%;
        height: 100%
    }

    .\!h-11 {
        height: calc(var(--spacing) * 11) !important
    }

    .\!h-12 {
        height: calc(var(--spacing) * 12) !important
    }

    .\!h-14 {
        height: calc(var(--spacing) * 14) !important
    }

    .\!h-\[36px\] {
        height: 36px !important
    }

    .\!h-\[40px\] {
        height: 40px !important
    }

    .\!h-\[44px\] {
        height: 44px !important
    }

    .\!h-\[48px\] {
        height: 48px !important
    }

    .\!h-auto {
        height: auto !important
    }

    .h-0 {
        height: calc(var(--spacing) * 0)
    }

    .h-1 {
        height: calc(var(--spacing) * 1)
    }

    .h-1\.5 {
        height: calc(var(--spacing) * 1.5)
    }

    .h-2 {
        height: calc(var(--spacing) * 2)
    }

    .h-2\.5 {
        height: calc(var(--spacing) * 2.5)
    }

    .h-3 {
        height: calc(var(--spacing) * 3)
    }

    .h-3\.5 {
        height: calc(var(--spacing) * 3.5)
    }

    .h-4 {
        height: calc(var(--spacing) * 4)
    }

    .h-5 {
        height: calc(var(--spacing) * 5)
    }

    .h-6 {
        height: calc(var(--spacing) * 6)
    }

    .h-7 {
        height: calc(var(--spacing) * 7)
    }

    .h-8 {
        height: calc(var(--spacing) * 8)
    }

    .h-9 {
        height: calc(var(--spacing) * 9)
    }

    .h-10 {
        height: calc(var(--spacing) * 10)
    }

    .h-11 {
        height: calc(var(--spacing) * 11)
    }

    .h-12 {
        height: calc(var(--spacing) * 12)
    }

    .h-14 {
        height: calc(var(--spacing) * 14)
    }

    .h-16 {
        height: calc(var(--spacing) * 16)
    }

    .h-20 {
        height: calc(var(--spacing) * 20)
    }

    .h-24 {
        height: calc(var(--spacing) * 24)
    }

    .h-32 {
        height: calc(var(--spacing) * 32)
    }

    .h-64 {
        height: calc(var(--spacing) * 64)
    }

    .h-96 {
        height: calc(var(--spacing) * 96)
    }

    .h-\[2px\] {
        height: 2px
    }

    .h-\[7px\] {
        height: 7px
    }

    .h-\[8px\] {
        height: 8px
    }

    .h-\[10px\] {
        height: 10px
    }

    .h-\[12px\] {
        height: 12px
    }

    .h-\[13px\] {
        height: 13px
    }

    .h-\[16px\] {
        height: 16px
    }

    .h-\[18px\] {
        height: 18px
    }

    .h-\[20px\] {
        height: 20px
    }

    .h-\[22px\] {
        height: 22px
    }

    .h-\[24px\] {
        height: 24px
    }

    .h-\[26px\] {
        height: 26px
    }

    .h-\[30px\] {
        height: 30px
    }

    .h-\[34px\] {
        height: 34px
    }

    .h-\[35px\] {
        height: 35px
    }

    .h-\[36px\] {
        height: 36px
    }

    .h-\[38px\] {
        height: 38px
    }

    .h-\[40px\] {
        height: 40px
    }

    .h-\[44px\] {
        height: 44px
    }

    .h-\[48px\] {
        height: 48px
    }

    .h-\[50px\] {
        height: 50px
    }

    .h-\[52vh\] {
        height: 52vh
    }

    .h-\[56px\] {
        height: 56px
    }

    .h-\[60px\] {
        height: 60px
    }

    .h-\[64px\] {
        height: 64px
    }

    .h-\[70px\] {
        height: 70px
    }

    .h-\[74px\] {
        height: 74px
    }

    .h-\[75px\] {
        height: 75px
    }

    .h-\[90px\] {
        height: 90px
    }

    .h-\[100vh\] {
        height: 100vh
    }

    .h-\[102px\] {
        height: 102px
    }

    .h-\[110px\] {
        height: 110px
    }

    .h-\[148px\] {
        height: 148px
    }

    .h-\[149px\] {
        height: 149px
    }

    .h-\[160px\] {
        height: 160px
    }

    .h-\[170px\] {
        height: 170px
    }

    .h-\[190px\] {
        height: 190px
    }

    .h-\[200px\] {
        height: 200px
    }

    .h-\[210px\] {
        height: 210px
    }

    .h-\[220px\] {
        height: 220px
    }

    .h-\[240px\] {
        height: 240px
    }

    .h-\[250px\] {
        height: 250px
    }

    .h-\[270px\] {
        height: 270px
    }

    .h-\[283px\] {
        height: 283px
    }

    .h-\[293px\] {
        height: 293px
    }

    .h-\[468px\] {
        height: 468px
    }

    .h-\[520px\] {
        height: 520px
    }

    .h-\[640px\] {
        height: 640px
    }

    .h-\[700px\] {
        height: 700px
    }

    .h-\[842px\] {
        height: 842px
    }

    .h-\[846px\] {
        height: 846px
    }

    .h-\[calc\(100dvh-4rem\)\] {
        height: calc(100dvh - 4rem)
    }

    .h-\[calc\(100dvh-32px\)\] {
        height: calc(100dvh - 32px)
    }

    .h-\[calc\(100vh-53px\)\] {
        height: calc(100vh - 53px)
    }

    .h-\[calc\(100vh-54px\)\] {
        height: calc(100vh - 54px)
    }

    .h-\[calc\(100vh-60px\)\] {
        height: calc(100vh - 60px)
    }

    .h-\[calc\(100vh-78px\)\] {
        height: calc(100vh - 78px)
    }

    .h-\[calc\(100vh-150px\)\] {
        height: calc(100vh - 150px)
    }

    .h-\[calc\(100vh-178px\)\] {
        height: calc(100vh - 178px)
    }

    .h-\[calc\(100vh-200px\)\] {
        height: calc(100vh - 200px)
    }

    .h-\[calc\(100vh-218px\)\] {
        height: calc(100vh - 218px)
    }

    .h-\[min\(550px\,calc\(100vh-128px\)\)\] {
        height: min(550px, 100vh - 128px)
    }

    .h-\[var\(--button-h\)\] {
        height: var(--button-h)
    }

    .h-\[var\(--button-h-sm\)\] {
        height: var(--button-h-sm)
    }

    .h-\[var\(--control-h-lg\)\] {
        height: var(--control-h-lg)
    }

    .h-\[var\(--control-h-md\)\] {
        height: var(--control-h-md)
    }

    .h-\[var\(--control-h-sm\)\] {
        height: var(--control-h-sm)
    }

    .h-\[var\(--input-h\)\] {
        height: var(--input-h)
    }

    .h-\[var\(--radix-select-trigger-height\)\] {
        height: var(--radix-select-trigger-height)
    }

    .h-\[var\(--space-16\)\] {
        height: var(--space-16)
    }

    .h-\[var\(--sup-cable-tab-h\)\] {
        height: var(--sup-cable-tab-h)
    }

    .h-\[var\(--tab-h\)\] {
        height: var(--tab-h)
    }

    .h-\[var\(--unit-16\)\] {
        height: var(--unit-16)
    }

    .h-\[var\(--unit-20\)\] {
        height: var(--unit-20)
    }

    .h-\[var\(--unit-24\)\] {
        height: var(--unit-24)
    }

    .h-\[var\(--unit-70\)\] {
        height: var(--unit-70)
    }

    .h-auto {
        height: auto
    }

    .h-dvh {
        height: 100dvh
    }

    .h-fit {
        height: fit-content
    }

    .h-full {
        height: 100%
    }

    .h-px {
        height: 1px
    }

    .h-screen {
        height: 100vh
    }

    .max-h-\(--radix-context-menu-content-available-height\) {
        max-height: var(--radix-context-menu-content-available-height)
    }

    .max-h-\(--radix-dropdown-menu-content-available-height\) {
        max-height: var(--radix-dropdown-menu-content-available-height)
    }

    .max-h-0 {
        max-height: calc(var(--spacing) * 0)
    }

    .max-h-28 {
        max-height: calc(var(--spacing) * 28)
    }

    .max-h-32 {
        max-height: calc(var(--spacing) * 32)
    }

    .max-h-40 {
        max-height: calc(var(--spacing) * 40)
    }

    .max-h-52 {
        max-height: calc(var(--spacing) * 52)
    }

    .max-h-72 {
        max-height: calc(var(--spacing) * 72)
    }

    .max-h-\[--radix-select-content-available-height\] {
        max-height: --radix-select-content-available-height
    }

    .max-h-\[15px\] {
        max-height: 15px
    }

    .max-h-\[24vh\] {
        max-height: 24vh
    }

    .max-h-\[40px\] {
        max-height: 40px
    }

    .max-h-\[48vh\] {
        max-height: 48vh
    }

    .max-h-\[50vh\] {
        max-height: 50vh
    }

    .max-h-\[52dvh\] {
        max-height: 52dvh
    }

    .max-h-\[80dvh\] {
        max-height: 80dvh
    }

    .max-h-\[80vh\] {
        max-height: 80vh
    }

    .max-h-\[85dvh\] {
        max-height: 85dvh
    }

    .max-h-\[90vh\] {
        max-height: 90vh
    }

    .max-h-\[130px\] {
        max-height: 130px
    }

    .max-h-\[155px\] {
        max-height: 155px
    }

    .max-h-\[180px\] {
        max-height: 180px
    }

    .max-h-\[200px\] {
        max-height: 200px
    }

    .max-h-\[240px\] {
        max-height: 240px
    }

    .max-h-\[260px\] {
        max-height: 260px
    }

    .max-h-\[300px\] {
        max-height: 300px
    }

    .max-h-\[320px\] {
        max-height: 320px
    }

    .max-h-\[340px\] {
        max-height: 340px
    }

    .max-h-\[360px\] {
        max-height: 360px
    }

    .max-h-\[400px\] {
        max-height: 400px
    }

    .max-h-\[600px\] {
        max-height: 600px
    }

    .max-h-\[calc\(100dvh-2rem\)\] {
        max-height: calc(100dvh - 2rem)
    }

    .max-h-\[calc\(100dvh-32px\)\] {
        max-height: calc(100dvh - 32px)
    }

    .max-h-\[calc\(100vh-32px\)\] {
        max-height: calc(100vh - 32px)
    }

    .max-h-\[calc\(100vh-342px\)\] {
        max-height: calc(100vh - 342px)
    }

    .max-h-\[min\(320px\,40vh\)\] {
        max-height: min(320px, 40vh)
    }

    .max-h-full {
        max-height: 100%
    }

    .\!min-h-\[44px\] {
        min-height: 44px !important
    }

    .\!min-h-\[56px\] {
        min-height: 56px !important
    }

    .min-h-0 {
        min-height: calc(var(--spacing) * 0)
    }

    .min-h-8 {
        min-height: calc(var(--spacing) * 8)
    }

    .min-h-9 {
        min-height: calc(var(--spacing) * 9)
    }

    .min-h-10 {
        min-height: calc(var(--spacing) * 10)
    }

    .min-h-11 {
        min-height: calc(var(--spacing) * 11)
    }

    .min-h-12 {
        min-height: calc(var(--spacing) * 12)
    }

    .min-h-14 {
        min-height: calc(var(--spacing) * 14)
    }

    .min-h-60 {
        min-height: calc(var(--spacing) * 60)
    }

    .min-h-96 {
        min-height: calc(var(--spacing) * 96)
    }

    .min-h-\[1\.4em\] {
        min-height: 1.4em
    }

    .min-h-\[28px\] {
        min-height: 28px
    }

    .min-h-\[32px\] {
        min-height: 32px
    }

    .min-h-\[36px\] {
        min-height: 36px
    }

    .min-h-\[40px\] {
        min-height: 40px
    }

    .min-h-\[44px\] {
        min-height: 44px
    }

    .min-h-\[48px\] {
        min-height: 48px
    }

    .min-h-\[52px\] {
        min-height: 52px
    }

    .min-h-\[54px\] {
        min-height: 54px
    }

    .min-h-\[60px\] {
        min-height: 60px
    }

    .min-h-\[74px\] {
        min-height: 74px
    }

    .min-h-\[144px\] {
        min-height: 144px
    }

    .min-h-\[149px\] {
        min-height: 149px
    }

    .min-h-\[180px\] {
        min-height: 180px
    }

    .min-h-\[220px\] {
        min-height: 220px
    }

    .min-h-\[240px\] {
        min-height: 240px
    }

    .min-h-\[252px\] {
        min-height: 252px
    }

    .min-h-\[280px\] {
        min-height: 280px
    }

    .min-h-\[320px\] {
        min-height: 320px
    }

    .min-h-\[330px\] {
        min-height: 330px
    }

    .min-h-\[360px\] {
        min-height: 360px
    }

    .min-h-\[380px\] {
        min-height: 380px
    }

    .min-h-\[480px\] {
        min-height: 480px
    }

    .min-h-\[520px\] {
        min-height: 520px
    }

    .min-h-\[842px\] {
        min-height: 842px
    }

    .min-h-\[calc\(100vh-108px\)\] {
        min-height: calc(100vh - 108px)
    }

    .min-h-\[var\(--control-h-md\)\] {
        min-height: var(--control-h-md)
    }

    .min-h-\[var\(--header-h\)\] {
        min-height: var(--header-h)
    }

    .min-h-\[var\(--input-h\)\] {
        min-height: var(--input-h)
    }

    .min-h-dvh {
        min-height: 100dvh
    }

    .min-h-full {
        min-height: 100%
    }

    .min-h-screen {
        min-height: 100vh
    }

    .\!w-\[360px\] {
        width: 360px !important
    }

    .\!w-auto {
        width: auto !important
    }

    .w-0 {
        width: calc(var(--spacing) * 0)
    }

    .w-0\.5 {
        width: calc(var(--spacing) * .5)
    }

    .w-1 {
        width: calc(var(--spacing) * 1)
    }

    .w-1\.5 {
        width: calc(var(--spacing) * 1.5)
    }

    .w-1\/2 {
        width: 50%
    }

    .w-1\/3 {
        width: 33.3333%
    }

    .w-1\/4 {
        width: 25%
    }

    .w-2 {
        width: calc(var(--spacing) * 2)
    }

    .w-2\.5 {
        width: calc(var(--spacing) * 2.5)
    }

    .w-2\/3 {
        width: 66.6667%
    }

    .w-3 {
        width: calc(var(--spacing) * 3)
    }

    .w-3\.5 {
        width: calc(var(--spacing) * 3.5)
    }

    .w-3\/4 {
        width: 75%
    }

    .w-4 {
        width: calc(var(--spacing) * 4)
    }

    .w-4\/5 {
        width: 80%
    }

    .w-5 {
        width: calc(var(--spacing) * 5)
    }

    .w-6 {
        width: calc(var(--spacing) * 6)
    }

    .w-7 {
        width: calc(var(--spacing) * 7)
    }

    .w-8 {
        width: calc(var(--spacing) * 8)
    }

    .w-9 {
        width: calc(var(--spacing) * 9)
    }

    .w-10 {
        width: calc(var(--spacing) * 10)
    }

    .w-12 {
        width: calc(var(--spacing) * 12)
    }

    .w-14 {
        width: calc(var(--spacing) * 14)
    }

    .w-16 {
        width: calc(var(--spacing) * 16)
    }

    .w-20 {
        width: calc(var(--spacing) * 20)
    }

    .w-24 {
        width: calc(var(--spacing) * 24)
    }

    .w-28 {
        width: calc(var(--spacing) * 28)
    }

    .w-32 {
        width: calc(var(--spacing) * 32)
    }

    .w-44 {
        width: calc(var(--spacing) * 44)
    }

    .w-52 {
        width: calc(var(--spacing) * 52)
    }

    .w-60 {
        width: calc(var(--spacing) * 60)
    }

    .w-64 {
        width: calc(var(--spacing) * 64)
    }

    .w-72 {
        width: calc(var(--spacing) * 72)
    }

    .w-\[7px\] {
        width: 7px
    }

    .w-\[12px\] {
        width: 12px
    }

    .w-\[15px\] {
        width: 15px
    }

    .w-\[18px\] {
        width: 18px
    }

    .w-\[20px\] {
        width: 20px
    }

    .w-\[22px\] {
        width: 22px
    }

    .w-\[24px\] {
        width: 24px
    }

    .w-\[30\%\] {
        width: 30%
    }

    .w-\[31px\] {
        width: 31px
    }

    .w-\[32\%\] {
        width: 32%
    }

    .w-\[34px\] {
        width: 34px
    }

    .w-\[35\%\] {
        width: 35%
    }

    .w-\[40px\] {
        width: 40px
    }

    .w-\[44px\] {
        width: 44px
    }

    .w-\[48px\] {
        width: 48px
    }

    .w-\[50px\] {
        width: 50px
    }

    .w-\[60px\] {
        width: 60px
    }

    .w-\[64px\] {
        width: 64px
    }

    .w-\[70\%\] {
        width: 70%
    }

    .w-\[72\%\] {
        width: 72%
    }

    .w-\[74px\] {
        width: 74px
    }

    .w-\[75px\] {
        width: 75px
    }

    .w-\[80px\] {
        width: 80px
    }

    .w-\[87px\] {
        width: 87px
    }

    .w-\[90\%\] {
        width: 90%
    }

    .w-\[95\%\] {
        width: 95%
    }

    .w-\[100\%\] {
        width: 100%
    }

    .w-\[100px\] {
        width: 100px
    }

    .w-\[104px\] {
        width: 104px
    }

    .w-\[110px\] {
        width: 110px
    }

    .w-\[120px\] {
        width: 120px
    }

    .w-\[127px\] {
        width: 127px
    }

    .w-\[130px\] {
        width: 130px
    }

    .w-\[140px\] {
        width: 140px
    }

    .w-\[150px\] {
        width: 150px
    }

    .w-\[156px\] {
        width: 156px
    }

    .w-\[158px\] {
        width: 158px
    }

    .w-\[170px\] {
        width: 170px
    }

    .w-\[180px\] {
        width: 180px
    }

    .w-\[190px\] {
        width: 190px
    }

    .w-\[200px\] {
        width: 200px
    }

    .w-\[210px\] {
        width: 210px
    }

    .w-\[215px\] {
        width: 215px
    }

    .w-\[240px\] {
        width: 240px
    }

    .w-\[250px\] {
        width: 250px
    }

    .w-\[260px\] {
        width: 260px
    }

    .w-\[266px\] {
        width: 266px
    }

    .w-\[280px\] {
        width: 280px
    }

    .w-\[300px\] {
        width: 300px
    }

    .w-\[315px\] {
        width: 315px
    }

    .w-\[317px\] {
        width: 317px
    }

    .w-\[345px\] {
        width: 345px
    }

    .w-\[380px\] {
        width: 380px
    }

    .w-\[392px\] {
        width: 392px
    }

    .w-\[400px\] {
        width: 400px
    }

    .w-\[595px\] {
        width: 595px
    }

    .w-\[600px\] {
        width: 600px
    }

    .w-\[700px\] {
        width: 700px
    }

    .w-\[760px\] {
        width: 760px
    }

    .w-\[867px\] {
        width: 867px
    }

    .w-\[calc\(50\%-var\(--space-6\)\)\] {
        width: calc(50% - var(--space-6))
    }

    .w-\[calc\(100\%-2rem\)\] {
        width: calc(100% - 2rem)
    }

    .w-\[calc\(100\%-32px\)\] {
        width: calc(100% - 32px)
    }

    .w-\[calc\(100vw-20px\)\] {
        width: calc(100vw - 20px)
    }

    .w-\[calc\(100vw-32px\)\] {
        width: calc(100vw - 32px)
    }

    .w-\[min\(86vw\,340px\)\] {
        width: min(86vw, 340px)
    }

    .w-\[min\(280px\,calc\(100vw-24px\)\)\] {
        width: min(280px, 100vw - 24px)
    }

    .w-\[min\(480px\,calc\(100vw-32px\)\)\] {
        width: min(480px, 100vw - 32px)
    }

    .w-\[min\(560px\,calc\(100vw-32px\)\)\] {
        width: min(560px, 100vw - 32px)
    }

    .w-\[min\(640px\,calc\(100vw-24px\)\)\] {
        width: min(640px, 100vw - 24px)
    }

    .w-\[min\(640px\,calc\(100vw-32px\)\)\] {
        width: min(640px, 100vw - 32px)
    }

    .w-\[min\(680px\,calc\(100vw-24px\)\)\] {
        width: min(680px, 100vw - 24px)
    }

    .w-\[min\(700px\,calc\(100vw-24px\)\)\] {
        width: min(700px, 100vw - 24px)
    }

    .w-\[min\(760px\,calc\(100vw-32px\)\)\] {
        width: min(760px, 100vw - 32px)
    }

    .w-\[min\(780px\,calc\(100vw-24px\)\)\] {
        width: min(780px, 100vw - 24px)
    }

    .w-\[min\(800px\,calc\(100vw-24px\)\)\] {
        width: min(800px, 100vw - 24px)
    }

    .w-\[min\(960px\,calc\(100vw-32px\)\)\] {
        width: min(960px, 100vw - 32px)
    }

    .w-\[min\(1000px\,calc\(100vw-24px\)\)\] {
        width: min(1000px, 100vw - 24px)
    }

    .w-\[min\(1200px\,calc\(100vw-32px\)\)\] {
        width: min(1200px, 100vw - 32px)
    }

    .w-\[var\(--control-h-md\)\] {
        width: var(--control-h-md)
    }

    .w-\[var\(--unit-20\)\] {
        width: var(--unit-20)
    }

    .w-\[var\(--unit-24\)\] {
        width: var(--unit-24)
    }

    .w-\[var\(--unit-70\)\] {
        width: var(--unit-70)
    }

    .w-auto {
        width: auto
    }

    .w-fit {
        width: fit-content
    }

    .w-full {
        width: 100%
    }

    .w-max {
        width: max-content
    }

    .w-px {
        width: 1px
    }

    .\!max-w-\[360px\] {
        max-width: 360px !important
    }

    .max-w-40 {
        max-width: calc(var(--spacing) * 40)
    }

    .max-w-\[18ch\] {
        max-width: 18ch
    }

    .max-w-\[32px\] {
        max-width: 32px
    }

    .max-w-\[38ch\] {
        max-width: 38ch
    }

    .max-w-\[52ch\] {
        max-width: 52ch
    }

    .max-w-\[56ch\] {
        max-width: 56ch
    }

    .max-w-\[60ch\] {
        max-width: 60ch
    }

    .max-w-\[65\%\] {
        max-width: 65%
    }

    .max-w-\[68ch\] {
        max-width: 68ch
    }

    .max-w-\[80px\] {
        max-width: 80px
    }

    .max-w-\[84\%\] {
        max-width: 84%
    }

    .max-w-\[132px\] {
        max-width: 132px
    }

    .max-w-\[150px\] {
        max-width: 150px
    }

    .max-w-\[160px\] {
        max-width: 160px
    }

    .max-w-\[174px\] {
        max-width: 174px
    }

    .max-w-\[180px\] {
        max-width: 180px
    }

    .max-w-\[200px\] {
        max-width: 200px
    }

    .max-w-\[220px\] {
        max-width: 220px
    }

    .max-w-\[260px\] {
        max-width: 260px
    }

    .max-w-\[280px\] {
        max-width: 280px
    }

    .max-w-\[304px\] {
        max-width: 304px
    }

    .max-w-\[320px\] {
        max-width: 320px
    }

    .max-w-\[332px\] {
        max-width: 332px
    }

    .max-w-\[340px\] {
        max-width: 340px
    }

    .max-w-\[400px\] {
        max-width: 400px
    }

    .max-w-\[420px\] {
        max-width: 420px
    }

    .max-w-\[460px\] {
        max-width: 460px
    }

    .max-w-\[480px\] {
        max-width: 480px
    }

    .max-w-\[550px\] {
        max-width: 550px
    }

    .max-w-\[560px\] {
        max-width: 560px
    }

    .max-w-\[592px\] {
        max-width: 592px
    }

    .max-w-\[595px\] {
        max-width: 595px
    }

    .max-w-\[600px\] {
        max-width: 600px
    }

    .max-w-\[640px\] {
        max-width: 640px
    }

    .max-w-\[680px\] {
        max-width: 680px
    }

    .max-w-\[780px\] {
        max-width: 780px
    }

    .max-w-\[790px\] {
        max-width: 790px
    }

    .max-w-\[900px\] {
        max-width: 900px
    }

    .max-w-\[960px\] {
        max-width: 960px
    }

    .max-w-\[calc\(100vw-16px\)\] {
        max-width: calc(100vw - 16px)
    }

    .max-w-\[calc\(100vw-24px\)\] {
        max-width: calc(100vw - 24px)
    }

    .max-w-\[calc\(100vw-var\(--space-8\)\)\] {
        max-width: calc(100vw - var(--space-8))
    }

    .max-w-\[min\(100\%\,100cqh\)\] {
        max-width: min(100%, 100cqh)
    }

    .max-w-full {
        max-width: 100%
    }

    .max-w-lg {
        max-width: var(--container-lg)
    }

    .max-w-md {
        max-width: var(--container-md)
    }

    .\!min-w-0 {
        min-width: calc(var(--spacing) * 0) !important
    }

    .\!min-w-\[200px\] {
        min-width: 200px !important
    }

    .\!min-w-\[360px\] {
        min-width: 360px !important
    }

    .min-w-0 {
        min-width: calc(var(--spacing) * 0)
    }

    .min-w-4 {
        min-width: calc(var(--spacing) * 4)
    }

    .min-w-8 {
        min-width: calc(var(--spacing) * 8)
    }

    .min-w-11 {
        min-width: calc(var(--spacing) * 11)
    }

    .min-w-20 {
        min-width: calc(var(--spacing) * 20)
    }

    .min-w-36 {
        min-width: calc(var(--spacing) * 36)
    }

    .min-w-\[8rem\] {
        min-width: 8rem
    }

    .min-w-\[18px\] {
        min-width: 18px
    }

    .min-w-\[40px\] {
        min-width: 40px
    }

    .min-w-\[42px\] {
        min-width: 42px
    }

    .min-w-\[52px\] {
        min-width: 52px
    }

    .min-w-\[76px\] {
        min-width: 76px
    }

    .min-w-\[78px\] {
        min-width: 78px
    }

    .min-w-\[82px\] {
        min-width: 82px
    }

    .min-w-\[96px\] {
        min-width: 96px
    }

    .min-w-\[104px\] {
        min-width: 104px
    }

    .min-w-\[110px\] {
        min-width: 110px
    }

    .min-w-\[112px\] {
        min-width: 112px
    }

    .min-w-\[120px\] {
        min-width: 120px
    }

    .min-w-\[128px\] {
        min-width: 128px
    }

    .min-w-\[130px\] {
        min-width: 130px
    }

    .min-w-\[132px\] {
        min-width: 132px
    }

    .min-w-\[140px\] {
        min-width: 140px
    }

    .min-w-\[160px\] {
        min-width: 160px
    }

    .min-w-\[180px\] {
        min-width: 180px
    }

    .min-w-\[200px\] {
        min-width: 200px
    }

    .min-w-\[220px\] {
        min-width: 220px
    }

    .min-w-\[240px\] {
        min-width: 240px
    }

    .min-w-\[250px\] {
        min-width: 250px
    }

    .min-w-\[260px\] {
        min-width: 260px
    }

    .min-w-\[400px\] {
        min-width: 400px
    }

    .min-w-\[432px\] {
        min-width: 432px
    }

    .min-w-\[520px\] {
        min-width: 520px
    }

    .min-w-\[610px\] {
        min-width: 610px
    }

    .min-w-\[620px\] {
        min-width: 620px
    }

    .min-w-\[640px\] {
        min-width: 640px
    }

    .min-w-\[auto\] {
        min-width: auto
    }

    .min-w-\[var\(--radix-select-trigger-width\)\] {
        min-width: var(--radix-select-trigger-width)
    }

    .min-w-\[var\(--space-16\)\] {
        min-width: var(--space-16)
    }

    .min-w-fit {
        min-width: fit-content
    }

    .min-w-full {
        min-width: 100%
    }

    .\!flex-\[1\.7_1_240px\] {
        flex: 1.7 240px !important
    }

    .flex-0 {
        flex: 0
    }

    .flex-1 {
        flex: 1
    }

    .flex-none {
        flex: none
    }

    .flex-shrink {
        flex-shrink: 1
    }

    .flex-shrink-0 {
        flex-shrink: 0
    }

    .shrink {
        flex-shrink: 1
    }

    .shrink-0 {
        flex-shrink: 0
    }

    .grow {
        flex-grow: 1
    }

    .basis-\[240px\] {
        flex-basis: 240px
    }

    .basis-\[420px\] {
        flex-basis: 420px
    }

    .table-auto {
        table-layout: auto
    }

    .table-fixed {
        table-layout: fixed
    }

    .border-collapse {
        border-collapse: collapse
    }

    .origin-\(--radix-context-menu-content-transform-origin\) {
        transform-origin: var(--radix-context-menu-content-transform-origin)
    }

    .origin-\(--radix-dropdown-menu-content-transform-origin\) {
        transform-origin: var(--radix-dropdown-menu-content-transform-origin)
    }

    .origin-\[--radix-popover-content-transform-origin\] {
        transform-origin: --radix-popover-content-transform-origin
    }

    .origin-\[--radix-select-content-transform-origin\] {
        transform-origin: --radix-select-content-transform-origin
    }

    .origin-\[--radix-tooltip-content-transform-origin\] {
        transform-origin: --radix-tooltip-content-transform-origin
    }

    .origin-top-left {
        transform-origin: 0 0
    }

    .-translate-x-1\/2 {
        --tw-translate-x: -50%;
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .translate-x-\[-50\%\] {
        --tw-translate-x: -50%;
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .translate-x-\[2px\] {
        --tw-translate-x: 2px;
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .-translate-y-1\/2 {
        --tw-translate-y: -50%;
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .-translate-y-full {
        --tw-translate-y: -100%;
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .translate-y-\[-50\%\] {
        --tw-translate-y: -50%;
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .scale-\[0\.36\] {
        scale: .36
    }

    .-rotate-90 {
        rotate: -90deg
    }

    .rotate-180 {
        rotate: 180deg
    }

    .rotate-270 {
        rotate: 270deg
    }

    .\!transform {
        transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ) !important
    }

    .transform {
        transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, )
    }

    .zoom-10 {
        zoom: 10%
    }

    .animate-in {
        animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none)
    }

    .animate-pulse {
        animation: var(--animate-pulse)
    }

    .animate-spin {
        animation: var(--animate-spin)
    }

    .\!cursor-default {
        cursor: default !important
    }

    .\!cursor-grab {
        cursor: grab !important
    }

    .\!cursor-grabbing {
        cursor: grabbing !important
    }

    .cursor-crosshair {
        cursor: crosshair
    }

    .cursor-default {
        cursor: default
    }

    .cursor-grab {
        cursor: grab
    }

    .cursor-not-allowed {
        cursor: not-allowed
    }

    .cursor-pointer {
        cursor: pointer
    }

    .cursor-se-resize {
        cursor: se-resize
    }

    .cursor-text {
        cursor: text
    }

    .touch-none {
        touch-action: none
    }

    .resize {
        resize: both
    }

    .resize-none {
        resize: none
    }

    .resize-y {
        resize: vertical
    }

    .scroll-mt-8 {
        scroll-margin-top: calc(var(--spacing) * 8)
    }

    .\[scrollbar-width\:none\] {
        scrollbar-width: none
    }

    .\[scrollbar-width\:thin\] {
        scrollbar-width: thin
    }

    .list-inside {
        list-style-position: inside
    }

    .list-disc {
        list-style-type: disc
    }

    .list-none {
        list-style-type: none
    }

    .appearance-none {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none
    }

    .auto-rows-fr {
        grid-auto-rows: minmax(0, 1fr)
    }

    .grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr))
    }

    .grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr))
    }

    .grid-cols-7 {
        grid-template-columns: repeat(7, minmax(0, 1fr))
    }

    .grid-cols-\[1\.4fr_1fr_1fr\] {
        grid-template-columns: 1.4fr 1fr 1fr
    }

    .grid-cols-\[1\.4fr_1fr_1fr_1fr\] {
        grid-template-columns: 1.4fr 1fr 1fr 1fr
    }

    .grid-cols-\[1fr_2\.1fr_0\.55fr_0\.7fr_1\.25fr_1\.25fr\] {
        grid-template-columns: 1fr 2.1fr .55fr .7fr 1.25fr 1.25fr
    }

    .grid-cols-\[2\.5fr_1fr_1fr_1fr\] {
        grid-template-columns: 2.5fr 1fr 1fr 1fr
    }

    .grid-cols-\[3\.45fr_0\.55fr_0\.7fr\] {
        grid-template-columns: 3.45fr .55fr .7fr
    }

    .grid-cols-\[4fr_1fr_1fr_1fr\] {
        grid-template-columns: 4fr 1fr 1fr 1fr
    }

    .grid-cols-\[12px_minmax\(112px\,1fr\)_58px_54px_54px_46px_28px\] {
        grid-template-columns: 12px minmax(112px, 1fr) 58px 54px 54px 46px 28px
    }

    .grid-cols-\[16px_minmax\(130px\,1fr\)_48px\] {
        grid-template-columns: 16px minmax(130px, 1fr) 48px
    }

    .grid-cols-\[28px_minmax\(0\,2fr\)_minmax\(0\,1fr\)_minmax\(0\,1fr\)_minmax\(0\,1\.2fr\)\] {
        grid-template-columns: 28px minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr)
    }

    .grid-cols-\[60px_70px_120px_minmax\(140px\,1fr\)_70px\] {
        grid-template-columns: 60px 70px 120px minmax(140px, 1fr) 70px
    }

    .grid-cols-\[100px_minmax\(0\,1fr\)_60px_100px\] {
        grid-template-columns: 100px minmax(0, 1fr) 60px 100px
    }

    .grid-cols-\[122px_minmax\(40px\,1fr\)_58px\] {
        grid-template-columns: 122px minmax(40px, 1fr) 58px
    }

    .grid-cols-\[215px_1fr\] {
        grid-template-columns: 215px 1fr
    }

    .grid-cols-\[220px_minmax\(0\,1fr\)\] {
        grid-template-columns: 220px minmax(0, 1fr)
    }

    .grid-cols-\[auto_minmax\(0\,1fr\)\] {
        grid-template-columns: auto minmax(0, 1fr)
    }

    .grid-cols-\[max-content_minmax\(0\,1fr\)\] {
        grid-template-columns: max-content minmax(0, 1fr)
    }

    .grid-cols-\[minmax\(0\,1fr\)\] {
        grid-template-columns: minmax(0, 1fr)
    }

    .grid-cols-\[minmax\(0\,1fr\)_250px\] {
        grid-template-columns: minmax(0, 1fr) 250px
    }

    .grid-cols-\[minmax\(0\,1fr\)_auto\] {
        grid-template-columns: minmax(0, 1fr) auto
    }

    .grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1fr\)\] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)
    }

    .grid-cols-\[minmax\(0\,480px\)_minmax\(0\,1fr\)\] {
        grid-template-columns: minmax(0, 480px) minmax(0, 1fr)
    }

    .grid-cols-\[minmax\(400px\,1\.2fr\)_minmax\(260px\,0\.8fr\)\] {
        grid-template-columns: minmax(400px, 1.2fr) minmax(260px, .8fr)
    }

    .grid-cols-\[repeat\(auto-fill\,minmax\(min\(240px\,100\%\)\,1fr\)\)\] {
        grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr))
    }

    .grid-cols-\[repeat\(auto-fit\,minmax\(240px\,340px\)\)\] {
        grid-template-columns: repeat(auto-fit, minmax(240px, 340px))
    }

    .grid-rows-\[min-content_1fr\] {
        grid-template-rows: min-content 1fr
    }

    .flex-col {
        flex-direction: column
    }

    .flex-col-reverse {
        flex-direction: column-reverse
    }

    .flex-row {
        flex-direction: row
    }

    .flex-row-reverse {
        flex-direction: row-reverse
    }

    .flex-wrap {
        flex-wrap: wrap
    }

    .place-items-center {
        place-items: center
    }

    .\!items-start {
        align-items: flex-start !important
    }

    .items-baseline {
        align-items: baseline
    }

    .items-center {
        align-items: center
    }

    .items-end {
        align-items: flex-end
    }

    .items-start {
        align-items: flex-start
    }

    .items-stretch {
        align-items: stretch
    }

    .justify-between {
        justify-content: space-between
    }

    .justify-center {
        justify-content: center
    }

    .justify-end {
        justify-content: flex-end
    }

    .justify-start {
        justify-content: flex-start
    }

    .gap-0 {
        gap: calc(var(--spacing) * 0)
    }

    .gap-0\.5 {
        gap: calc(var(--spacing) * .5)
    }

    .gap-1 {
        gap: calc(var(--spacing) * 1)
    }

    .gap-1\.5 {
        gap: calc(var(--spacing) * 1.5)
    }

    .gap-2 {
        gap: calc(var(--spacing) * 2)
    }

    .gap-2\.5 {
        gap: calc(var(--spacing) * 2.5)
    }

    .gap-3 {
        gap: calc(var(--spacing) * 3)
    }

    .gap-3\.5 {
        gap: calc(var(--spacing) * 3.5)
    }

    .gap-4 {
        gap: calc(var(--spacing) * 4)
    }

    .gap-5 {
        gap: calc(var(--spacing) * 5)
    }

    .gap-6 {
        gap: calc(var(--spacing) * 6)
    }

    .gap-8 {
        gap: calc(var(--spacing) * 8)
    }

    .gap-10 {
        gap: calc(var(--spacing) * 10)
    }

    .gap-\[2px\] {
        gap: 2px
    }

    .gap-\[4px\] {
        gap: 4px
    }

    .gap-\[6px\] {
        gap: 6px
    }

    .gap-\[8px\] {
        gap: 8px
    }

    .gap-\[10px\] {
        gap: 10px
    }

    .gap-\[12px\] {
        gap: 12px
    }

    .gap-\[16px\] {
        gap: 16px
    }

    .gap-\[18px\] {
        gap: 18px
    }

    .gap-\[20px\] {
        gap: 20px
    }

    .gap-\[23px\] {
        gap: 23px
    }

    .gap-\[28px\] {
        gap: 28px
    }

    .gap-\[32px\] {
        gap: 32px
    }

    .gap-\[var\(--space-1\)\] {
        gap: var(--space-1)
    }

    .gap-\[var\(--space-2\)\] {
        gap: var(--space-2)
    }

    .gap-\[var\(--space-3\)\] {
        gap: var(--space-3)
    }

    .gap-\[var\(--space-4\)\] {
        gap: var(--space-4)
    }

    .gap-\[var\(--space-5\)\] {
        gap: var(--space-5)
    }

    .gap-\[var\(--space-6\)\] {
        gap: var(--space-6)
    }

    .gap-\[var\(--space-8\)\] {
        gap: var(--space-8)
    }

    .gap-\[var\(--space-10\)\] {
        gap: var(--space-10)
    }

    .gap-\[var\(--space-12\)\] {
        gap: var(--space-12)
    }

    .gap-\[var\(--space-16\)\] {
        gap: var(--space-16)
    }

    .gap-\[var\(--unit-1\)\] {
        gap: var(--unit-1)
    }

    .gap-\[var\(--unit-6\)\] {
        gap: var(--unit-6)
    }

    .gap-\[var\(--unit-8\)\] {
        gap: var(--unit-8)
    }

    .gap-\[var\(--unit-10\)\] {
        gap: var(--unit-10)
    }

    .gap-\[var\(--unit-12\)\] {
        gap: var(--unit-12)
    }

    .gap-\[var\(--unit-16\)\] {
        gap: var(--unit-16)
    }

    .gap-\[var\(--unit-20\)\] {
        gap: var(--unit-20)
    }

    .gap-\[var\(--unit-24\)\] {
        gap: var(--unit-24)
    }

    .gap-px {
        gap: 1px
    }

    :where(.space-y-1>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)))
    }

    :where(.space-y-2>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))
    }

    :where(.space-y-3>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))
    }

    :where(.space-y-4>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))
    }

    :where(.space-y-\[16px\]>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(16px * var(--tw-space-y-reverse));
        margin-block-end: calc(16px * calc(1 - var(--tw-space-y-reverse)))
    }

    :where(.space-y-\[24px\]>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(24px * var(--tw-space-y-reverse));
        margin-block-end: calc(24px * calc(1 - var(--tw-space-y-reverse)))
    }

    :where(.space-y-\[var\(--space-2\)\]>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(var(--space-2) * var(--tw-space-y-reverse));
        margin-block-end: calc(var(--space-2) * calc(1 - var(--tw-space-y-reverse)))
    }

    :where(.space-y-\[var\(--space-4\)\]>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(var(--space-4) * var(--tw-space-y-reverse));
        margin-block-end: calc(var(--space-4) * calc(1 - var(--tw-space-y-reverse)))
    }

    :where(.space-y-\[var\(--space-6\)\]>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(var(--space-6) * var(--tw-space-y-reverse));
        margin-block-end: calc(var(--space-6) * calc(1 - var(--tw-space-y-reverse)))
    }

    :where(.space-y-px>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(1px * var(--tw-space-y-reverse));
        margin-block-end: calc(1px * calc(1 - var(--tw-space-y-reverse)))
    }

    .gap-x-2 {
        column-gap: calc(var(--spacing) * 2)
    }

    .gap-x-3 {
        column-gap: calc(var(--spacing) * 3)
    }

    .gap-x-4 {
        column-gap: calc(var(--spacing) * 4)
    }

    .gap-x-6 {
        column-gap: calc(var(--spacing) * 6)
    }

    .gap-x-10 {
        column-gap: calc(var(--spacing) * 10)
    }

    .gap-x-\[7px\] {
        column-gap: 7px
    }

    .gap-x-\[24px\] {
        column-gap: 24px
    }

    .gap-x-\[var\(--space-2\)\] {
        column-gap: var(--space-2)
    }

    .gap-x-\[var\(--space-6\)\] {
        column-gap: var(--space-6)
    }

    .gap-x-\[var\(--space-8\)\] {
        column-gap: var(--space-8)
    }

    .gap-x-\[var\(--space-10\)\] {
        column-gap: var(--space-10)
    }

    .gap-x-\[var\(--space-12\)\] {
        column-gap: var(--space-12)
    }

    .gap-x-\[var\(--space-16\)\] {
        column-gap: var(--space-16)
    }

    :where(.space-x-4>:not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)))
    }

    .gap-y-1 {
        row-gap: calc(var(--spacing) * 1)
    }

    .gap-y-2 {
        row-gap: calc(var(--spacing) * 2)
    }

    .gap-y-3 {
        row-gap: calc(var(--spacing) * 3)
    }

    .gap-y-4 {
        row-gap: calc(var(--spacing) * 4)
    }

    .gap-y-5 {
        row-gap: calc(var(--spacing) * 5)
    }

    .gap-y-6 {
        row-gap: calc(var(--spacing) * 6)
    }

    .gap-y-\[6px\] {
        row-gap: 6px
    }

    .gap-y-\[8px\] {
        row-gap: 8px
    }

    .gap-y-\[18px\] {
        row-gap: 18px
    }

    .gap-y-\[var\(--space-2\)\] {
        row-gap: var(--space-2)
    }

    .gap-y-\[var\(--space-4\)\] {
        row-gap: var(--space-4)
    }

    .gap-y-\[var\(--space-6\)\] {
        row-gap: var(--space-6)
    }

    .gap-y-\[var\(--space-8\)\] {
        row-gap: var(--space-8)
    }

    .self-center {
        align-self: center
    }

    .self-end {
        align-self: flex-end
    }

    .self-start {
        align-self: flex-start
    }

    .self-stretch {
        align-self: stretch
    }

    .justify-self-center {
        justify-self: center
    }

    .justify-self-start {
        justify-self: flex-start
    }

    .truncate {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden
    }

    .overflow-auto {
        overflow: auto
    }

    .overflow-hidden {
        overflow: hidden
    }

    .overflow-visible {
        overflow: visible
    }

    .overflow-x-auto {
        overflow-x: auto
    }

    .overflow-x-hidden {
        overflow-x: hidden
    }

    .overflow-y-auto {
        overflow-y: auto
    }

    .overflow-y-hidden {
        overflow-y: hidden
    }

    .overflow-y-scroll {
        overflow-y: scroll
    }

    .overscroll-contain {
        overscroll-behavior: contain
    }

    .\!rounded-\[var\(--radius-pill\)\] {
        border-radius: var(--radius-pill) !important
    }

    .\!rounded-\[var\(--radius-sm\)\] {
        border-radius: var(--radius-sm) !important
    }

    .\!rounded-none {
        border-radius: 0 !important
    }

    .rounded {
        border-radius: .25rem
    }

    .rounded-2xl {
        border-radius: var(--radius-2xl)
    }

    .rounded-\[2px\] {
        border-radius: 2px
    }

    .rounded-\[3px\] {
        border-radius: 3px
    }

    .rounded-\[4px\] {
        border-radius: 4px
    }

    .rounded-\[6\/8\/10\/12\/16px\] {
        border-radius: 6/8/10/12/16px
    }

    .rounded-\[6\/8\/10px\] {
        border-radius: 6/8/10px
    }

    .rounded-\[6px\] {
        border-radius: 6px
    }

    .rounded-\[8px\] {
        border-radius: 8px
    }

    .rounded-\[10px\] {
        border-radius: 10px
    }

    .rounded-\[12px\] {
        border-radius: 12px
    }

    .rounded-\[14px\] {
        border-radius: 14px
    }

    .rounded-\[16px\] {
        border-radius: 16px
    }

    .rounded-\[18px\] {
        border-radius: 18px
    }

    .rounded-\[24px\] {
        border-radius: 24px
    }

    .rounded-\[28px\] {
        border-radius: 28px
    }

    .rounded-\[50\%\] {
        border-radius: 50%
    }

    .rounded-\[calc\(var\(--radius-sm\)-2px\)\] {
        border-radius: calc(var(--radius-sm) - 2px)
    }

    .rounded-\[var\(--border-radius\)\] {
        border-radius: var(--border-radius)
    }

    .rounded-\[var\(--radius\)\] {
        border-radius: var(--radius)
    }

    .rounded-\[var\(--radius-full\)\] {
        border-radius: var(--radius-full)
    }

    .rounded-\[var\(--radius-lg\)\] {
        border-radius: var(--radius-lg)
    }

    .rounded-\[var\(--radius-md\)\] {
        border-radius: var(--radius-md)
    }

    .rounded-\[var\(--radius-pill\)\] {
        border-radius: var(--radius-pill)
    }

    .rounded-\[var\(--radius-sm\)\] {
        border-radius: var(--radius-sm)
    }

    .rounded-\[var\(--radius-xs\)\] {
        border-radius: var(--radius-xs)
    }

    .rounded-\[var\(--sup-r-lg\,var\(--radius-lg\)\)\] {
        border-radius: var(--sup-r-lg, var(--radius-lg))
    }

    .rounded-\[var\(--sup-r-md\)\] {
        border-radius: var(--sup-r-md)
    }

    .rounded-\[var\(--sup-r-sm\)\] {
        border-radius: var(--sup-r-sm)
    }

    .rounded-\[var\(--sup-r-sm\,var\(--radius\)\)\] {
        border-radius: var(--sup-r-sm, var(--radius))
    }

    .rounded-\[var\(--unit-10\)\] {
        border-radius: var(--unit-10)
    }

    .rounded-full {
        border-radius: 3.40282e38px
    }

    .rounded-lg {
        border-radius: var(--radius-lg)
    }

    .rounded-md {
        border-radius: var(--radius-md)
    }

    .rounded-none {
        border-radius: 0
    }

    .rounded-sm {
        border-radius: var(--radius-sm)
    }

    .rounded-xl {
        border-radius: var(--radius-xl)
    }

    .rounded-t-\[var\(--radius-lg\)\] {
        border-top-left-radius: var(--radius-lg);
        border-top-right-radius: var(--radius-lg)
    }

    .rounded-l-\[var\(--radius-sm\)\] {
        border-top-left-radius: var(--radius-sm);
        border-bottom-left-radius: var(--radius-sm)
    }

    .rounded-l-none {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0
    }

    .rounded-r-\[var\(--radius-sm\)\] {
        border-top-right-radius: var(--radius-sm);
        border-bottom-right-radius: var(--radius-sm)
    }

    .rounded-r-none {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

    .rounded-b-none {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0
    }

    .rounded-br-sm {
        border-bottom-right-radius: var(--radius-sm)
    }

    .rounded-bl-sm {
        border-bottom-left-radius: var(--radius-sm)
    }

    .border {
        border-style: var(--tw-border-style);
        border-width: 1px
    }

    .border-0 {
        border-style: var(--tw-border-style);
        border-width: 0
    }

    .border-2 {
        border-style: var(--tw-border-style);
        border-width: 2px
    }

    .border-\[1\.5px\] {
        border-style: var(--tw-border-style);
        border-width: 1.5px
    }

    .\!border-x-0 {
        border-inline-style: var(--tw-border-style) !important;
        border-inline-width: 0 !important
    }

    .border-x {
        border-inline-style: var(--tw-border-style);
        border-inline-width: 1px
    }

    .border-y {
        border-block-style: var(--tw-border-style);
        border-block-width: 1px
    }

    .border-y-0 {
        border-block-style: var(--tw-border-style);
        border-block-width: 0
    }

    .\!border-t-0 {
        border-top-style: var(--tw-border-style) !important;
        border-top-width: 0 !important
    }

    .border-t {
        border-top-style: var(--tw-border-style);
        border-top-width: 1px
    }

    .border-t-2 {
        border-top-style: var(--tw-border-style);
        border-top-width: 2px
    }

    .border-r {
        border-right-style: var(--tw-border-style);
        border-right-width: 1px
    }

    .border-r-0 {
        border-right-style: var(--tw-border-style);
        border-right-width: 0
    }

    .border-r-2 {
        border-right-style: var(--tw-border-style);
        border-right-width: 2px
    }

    .border-r-4 {
        border-right-style: var(--tw-border-style);
        border-right-width: 4px
    }

    .\!border-b {
        border-bottom-style: var(--tw-border-style) !important;
        border-bottom-width: 1px !important
    }

    .border-b,
    .border-b-1 {
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 1px
    }

    .border-b-2 {
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 2px
    }

    .\!border-l-0 {
        border-left-style: var(--tw-border-style) !important;
        border-left-width: 0 !important
    }

    .border-l {
        border-left-style: var(--tw-border-style);
        border-left-width: 1px
    }

    .border-dashed {
        --tw-border-style: dashed;
        border-style: dashed
    }

    .border-dotted {
        --tw-border-style: dotted;
        border-style: dotted
    }

    .border-none {
        --tw-border-style: none;
        border-style: none
    }

    .border-solid {
        --tw-border-style: solid;
        border-style: solid
    }

    .\!border-\[var\(--bg-brand\)\] {
        border-color: var(--bg-brand) !important
    }

    .\!border-\[var\(--border-danger\)\] {
        border-color: var(--border-danger) !important
    }

    .\!border-\[var\(--border-default\)\] {
        border-color: var(--border-default) !important
    }

    .\!border-\[var\(--border-subtle\)\] {
        border-color: var(--border-subtle) !important
    }

    .border-\[\#CDCDCD\] {
        border-color: #cdcdcd
    }

    .border-\[\#E1E3E6\] {
        border-color: #e1e3e6
    }

    .border-\[\#e2e2e2\] {
        border-color: #e2e2e2
    }

    .border-\[\#e5e8ed\] {
        border-color: #e5e8ed
    }

    .border-\[\#f0f0f0\] {
        border-color: #f0f0f0
    }

    .border-\[--color-border\] {
        border-color: --color-border
    }

    .border-\[color\:var\(--bg-brand\)\] {
        border-color: var(--bg-brand)
    }

    .border-\[color\:var\(--border-default\)\] {
        border-color: var(--border-default)
    }

    .border-\[color\:var\(--border-focus\)\] {
        border-color: var(--border-focus)
    }

    .border-\[color\:var\(--border-strong\)\] {
        border-color: var(--border-strong)
    }

    .border-\[color\:var\(--border-subtle\)\] {
        border-color: var(--border-subtle)
    }

    .border-\[color\:var\(--color-danger-500\)\] {
        border-color: var(--color-danger-500)
    }

    .border-\[rgba\(0\,0\,0\,0\.15\)\] {
        border-color: #00000026
    }

    .border-\[var\(--bg-brand\)\] {
        border-color: var(--bg-brand)
    }

    .border-\[var\(--border-danger\)\] {
        border-color: var(--border-danger)
    }

    .border-\[var\(--border-default\)\] {
        border-color: var(--border-default)
    }

    .border-\[var\(--border-focus\)\] {
        border-color: var(--border-focus)
    }

    .border-\[var\(--border-primary-color\)\] {
        border-color: var(--border-primary-color)
    }

    .border-\[var\(--border-strong\)\] {
        border-color: var(--border-strong)
    }

    .border-\[var\(--border-subtle\)\] {
        border-color: var(--border-subtle)
    }

    .border-\[var\(--border-warning\)\] {
        border-color: var(--border-warning)
    }

    .border-\[var\(--color-black\)\]\/15 {
        border-color: #00000026
    }

    @supports (color:color-mix(in lab, red, red)) {
        .border-\[var\(--color-black\)\]\/15 {
            border-color: color-mix(in oklab, var(--color-black) 15%, transparent)
        }
    }

    .border-\[var\(--color-destructive\,\#dc2626\)\] {
        border-color: var(--color-destructive, #dc2626)
    }

    .border-\[var\(--color-green\)\] {
        border-color: var(--color-green)
    }

    .border-\[var\(--color-orange\,\#e69333\)\],
    .border-\[var\(--color-orange\,\#e69333\)\]\/40 {
        border-color: var(--color-orange, #e69333)
    }

    @supports (color:color-mix(in lab, red, red)) {
        .border-\[var\(--color-orange\,\#e69333\)\]\/40 {
            border-color: color-mix(in oklab, var(--color-orange, #e69333) 40%, transparent)
        }
    }

    .border-\[var\(--color-pink\,\#ff7b9c\)\] {
        border-color: var(--color-pink, #ff7b9c)
    }

    .border-\[var\(--color-theme\)\] {
        border-color: var(--color-theme)
    }

    .border-\[var\(--error-text\)\],
    .border-\[var\(--error-text\)\]\/60 {
        border-color: var(--error-text)
    }

    @supports (color:color-mix(in lab, red, red)) {
        .border-\[var\(--error-text\)\]\/60 {
            border-color: color-mix(in oklab, var(--error-text) 60%, transparent)
        }
    }

    .border-\[var\(--primary\)\] {
        border-color: var(--primary)
    }

    .border-\[var\(--report-text-secondary\)\] {
        border-color: var(--report-text-secondary)
    }

    .border-\[var\(--sup-accent\)\] {
        border-color: var(--sup-accent)
    }

    .border-\[var\(--sup-border\)\] {
        border-color: var(--sup-border)
    }

    .border-\[var\(--sup-border\,var\(--border-primary-color\)\)\] {
        border-color: var(--sup-border, var(--border-primary-color))
    }

    .border-\[var\(--sup-border-strong\)\] {
        border-color: var(--sup-border-strong)
    }

    .border-\[var\(--sup-danger\)\] {
        border-color: var(--sup-danger)
    }

    .border-\[var\(--sup-text-faint\)\] {
        border-color: var(--sup-text-faint)
    }

    .border-amber-200 {
        border-color: var(--color-amber-200)
    }

    .border-amber-300 {
        border-color: var(--color-amber-300)
    }

    .border-amber-300\/40 {
        border-color: #ffd23666
    }

    @supports (color:color-mix(in lab, red, red)) {
        .border-amber-300\/40 {
            border-color: color-mix(in oklab, var(--color-amber-300) 40%, transparent)
        }
    }

    .border-amber-500 {
        border-color: var(--color-amber-500)
    }

    .border-black\/5 {
        border-color: #0000000d
    }

    @supports (color:color-mix(in lab, red, red)) {
        .border-black\/5 {
            border-color: color-mix(in oklab, var(--color-black) 5%, transparent)
        }
    }

    .border-black\/10 {
        border-color: #0000001a
    }

    @supports (color:color-mix(in lab, red, red)) {
        .border-black\/10 {
            border-color: color-mix(in oklab, var(--color-black) 10%, transparent)
        }
    }

    .border-blue-200 {
        border-color: var(--color-blue-200)
    }

    .border-blue-500 {
        border-color: var(--color-blue-500)
    }

    .border-blue-600 {
        border-color: var(--color-blue-600)
    }

    .border-border\/50 {
        border-color: var(--border)
    }

    @supports (color:color-mix(in lab, red, red)) {
        .border-border\/50 {
            border-color: color-mix(in oklab, var(--border) 50%, transparent)
        }
    }

    .border-current {
        border-color: currentColor
    }

    .border-emerald-400 {
        border-color: var(--color-emerald-400)
    }

    .border-gray-200 {
        border-color: var(--color-gray-200)
    }

    .border-green-200 {
        border-color: var(--color-green-200)
    }

    .border-input {
        border-color: var(--input)
    }

    .border-primary {
        border-color: var(--primary)
    }

    .border-red-200 {
        border-color: var(--color-red-200)
    }

    .border-red-300 {
        border-color: var(--color-red-300)
    }

    .border-red-400\/20 {
        border-color: #ff656833
    }

    @supports (color:color-mix(in lab, red, red)) {
        .border-red-400\/20 {
            border-color: color-mix(in oklab, var(--color-red-400) 20%, transparent)
        }
    }

    .border-transparent {
        border-color: #0000
    }

    .border-white {
        border-color: var(--color-white)
    }

    .border-white\/5 {
        border-color: #ffffff0d
    }

    @supports (color:color-mix(in lab, red, red)) {
        .border-white\/5 {
            border-color: color-mix(in oklab, var(--color-white) 5%, transparent)
        }
    }

    .border-white\/8 {
        border-color: #ffffff14
    }

    @supports (color:color-mix(in lab, red, red)) {
        .border-white\/8 {
            border-color: color-mix(in oklab, var(--color-white) 8%, transparent)
        }
    }

    .border-white\/10 {
        border-color: #ffffff1a
    }

    @supports (color:color-mix(in lab, red, red)) {
        .border-white\/10 {
            border-color: color-mix(in oklab, var(--color-white) 10%, transparent)
        }
    }

    .border-white\/20 {
        border-color: #fff3
    }

    @supports (color:color-mix(in lab, red, red)) {
        .border-white\/20 {
            border-color: color-mix(in oklab, var(--color-white) 20%, transparent)
        }
    }

    .border-white\/40 {
        border-color: #fff6
    }

    @supports (color:color-mix(in lab, red, red)) {
        .border-white\/40 {
            border-color: color-mix(in oklab, var(--color-white) 40%, transparent)
        }
    }

    .border-white\/60 {
        border-color: #fff9
    }

    @supports (color:color-mix(in lab, red, red)) {
        .border-white\/60 {
            border-color: color-mix(in oklab, var(--color-white) 60%, transparent)
        }
    }

    .border-white\/\[0\.04\] {
        border-color: #ffffff0a
    }

    @supports (color:color-mix(in lab, red, red)) {
        .border-white\/\[0\.04\] {
            border-color: color-mix(in oklab, var(--color-white) 4%, transparent)
        }
    }

    .border-yellow-300 {
        border-color: var(--color-yellow-300)
    }

    .border-zinc-200 {
        border-color: var(--color-zinc-200)
    }

    .border-t-\[var\(--sup-accent\)\] {
        border-top-color: var(--sup-accent)
    }

    .border-t-transparent {
        border-top-color: #0000
    }

    .border-t-white {
        border-top-color: var(--color-white)
    }

    .border-r-transparent {
        border-right-color: #0000
    }

    .\!bg-\[var\(--bg-brand\)\] {
        background-color: var(--bg-brand) !important
    }

    .\!bg-\[var\(--bg-canvas\)\] {
        background-color: var(--bg-canvas) !important
    }

    .bg-\[\#0b0f14\]\/95 {
        background-color: #0b0f14f2
    }

    .bg-\[\#1E91FD\],
    .bg-\[\#1e91fd\] {
        background-color: #1e91fd
    }

    .bg-\[\#3a3a3a\] {
        background-color: #3a3a3a
    }

    .bg-\[\#444\] {
        background-color: #444
    }

    .bg-\[\#333333\] {
        background-color: #333
    }

    .bg-\[\#F0F6F8\] {
        background-color: #f0f6f8
    }

    .bg-\[\#F6F6F7\] {
        background-color: #f6f6f7
    }

    .bg-\[\#F7F7F8\] {
        background-color: #f7f7f8
    }

    .bg-\[\#F7FBFF\] {
        background-color: #f7fbff
    }

    .bg-\[\#f0f7ff\] {
        background-color: #f0f7ff
    }

    .bg-\[\#f1f3f5\] {
        background-color: #f1f3f5
    }

    .bg-\[\#f97a35\] {
        background-color: #f97a35
    }

    .bg-\[--color-bg\] {
        background-color: --color-bg
    }

    .bg-\[rgba\(52\,199\,89\,0\.14\)\] {
        background-color: #34c75924
    }

    .bg-\[rgba\(128\,128\,128\,0\.12\)\] {
        background-color: #8080801f
    }

    .bg-\[rgba\(230\,147\,51\,0\.10\)\] {
        background-color: #e693331a
    }

    .bg-\[var\(--avatar-bg\)\] {
        background-color: var(--avatar-bg)
    }

    .bg-\[var\(--background-primary\)\] {
        background-color: var(--background-primary)
    }

    .bg-\[var\(--background-primary\,\#f4f6f8\)\] {
        background-color: var(--background-primary, #f4f6f8)
    }

    .bg-\[var\(--background-secondary\)\] {
        background-color: var(--background-secondary)
    }

    .bg-\[var\(--background-secondary\,\#f1f3f5\)\] {
        background-color: var(--background-secondary, #f1f3f5)
    }

    .bg-\[var\(--bg-brand\)\] {
        background-color: var(--bg-brand)
    }

    .bg-\[var\(--bg-brand-subtle\)\] {
        background-color: var(--bg-brand-subtle)
    }

    .bg-\[var\(--bg-canvas\)\],
    .bg-\[var\(--bg-canvas\)\]\/90 {
        background-color: var(--bg-canvas)
    }

    @supports (color:color-mix(in lab, red, red)) {
        .bg-\[var\(--bg-canvas\)\]\/90 {
            background-color: color-mix(in oklab, var(--bg-canvas) 90%, transparent)
        }
    }

    .bg-\[var\(--bg-muted\)\] {
        background-color: var(--bg-muted)
    }

    .bg-\[var\(--bg-surface\)\] {
        background-color: var(--bg-surface)
    }

    .bg-\[var\(--bg-surface-2\)\] {
        background-color: var(--bg-surface-2)
    }

    .bg-\[var\(--bg-warning-subtle\)\] {
        background-color: var(--bg-warning-subtle)
    }

    .bg-\[var\(--border-primary-color\)\] {
        background-color: var(--border-primary-color)
    }

    .bg-\[var\(--border-subtle\)\] {
        background-color: var(--border-subtle)
    }

    .bg-\[var\(--card-bg\)\] {
        background-color: var(--card-bg)
    }

    .bg-\[var\(--color-danger-500\)\] {
        background-color: var(--color-danger-500)
    }

    .bg-\[var\(--color-neutral-0\)\] {
        background-color: var(--color-neutral-0)
    }

    .bg-\[var\(--color-orange\,\#e69333\)\]\/15 {
        background-color: var(--color-orange, #e69333)
    }

    @supports (color:color-mix(in lab, red, red)) {
        .bg-\[var\(--color-orange\,\#e69333\)\]\/15 {
            background-color: color-mix(in oklab, var(--color-orange, #e69333) 15%, transparent)
        }
    }

    .bg-\[var\(--color-skeleton-bg\)\] {
        background-color: var(--color-skeleton-bg)
    }

    .bg-\[var\(--color-sky-blue\)\] {
        background-color: var(--color-sky-blue)
    }

    .bg-\[var\(--color-theme\)\],
    .bg-\[var\(--color-theme\)\]\/5 {
        background-color: var(--color-theme)
    }

    @supports (color:color-mix(in lab, red, red)) {
        .bg-\[var\(--color-theme\)\]\/5 {
            background-color: color-mix(in oklab, var(--color-theme) 5%, transparent)
        }
    }

    .bg-\[var\(--color-theme\)\]\/10 {
        background-color: var(--color-theme)
    }

    @supports (color:color-mix(in lab, red, red)) {
        .bg-\[var\(--color-theme\)\]\/10 {
            background-color: color-mix(in oklab, var(--color-theme) 10%, transparent)
        }
    }

    .bg-\[var\(--color-white\)\] {
        background-color: var(--color-white)
    }

    .bg-\[var\(--disabled-bg\)\] {
        background-color: var(--disabled-bg)
    }

    .bg-\[var\(--header-bg\)\] {
        background-color: var(--header-bg)
    }

    .bg-\[var\(--info-text-g\)\] {
        background-color: var(--info-text-g)
    }

    .bg-\[var\(--light-bg\)\] {
        background-color: var(--light-bg)
    }

    .bg-\[var\(--popover-foreground\)\] {
        background-color: var(--popover-foreground)
    }

    .bg-\[var\(--primary\)\],
    .bg-\[var\(--primary\)\]\/10 {
        background-color: var(--primary)
    }

    @supports (color:color-mix(in lab, red, red)) {
        .bg-\[var\(--primary\)\]\/10 {
            background-color: color-mix(in oklab, var(--primary) 10%, transparent)
        }
    }

    .bg-\[var\(--report-bg\)\] {
        background-color: var(--report-bg)
    }

    .bg-\[var\(--report-dark-mode\)\] {
        background-color: var(--report-dark-mode)
    }

    .bg-\[var\(--report-dark-mode-bg\)\] {
        background-color: var(--report-dark-mode-bg)
    }

    .bg-\[var\(--report-head-bg\)\] {
        background-color: var(--report-head-bg)
    }

    .bg-\[var\(--report-row-fill\)\] {
        background-color: var(--report-row-fill)
    }

    .bg-\[var\(--scrim-bg\)\] {
        background-color: var(--scrim-bg)
    }

    .bg-\[var\(--secondary-text\)\] {
        background-color: var(--secondary-text)
    }

    .bg-\[var\(--sup-accent\)\] {
        background-color: var(--sup-accent)
    }

    .bg-\[var\(--sup-accent\,var\(--primary\)\)\] {
        background-color: var(--sup-accent, var(--primary))
    }

    .bg-\[var\(--sup-bg\)\] {
        background-color: var(--sup-bg)
    }

    .bg-\[var\(--sup-border\)\] {
        background-color: var(--sup-border)
    }

    .bg-\[var\(--sup-invert-bg\)\] {
        background-color: var(--sup-invert-bg)
    }

    .bg-\[var\(--sup-knob\,var\(--text-on-brand\)\)\] {
        background-color: var(--sup-knob, var(--text-on-brand))
    }

    .bg-\[var\(--sup-ok\)\] {
        background-color: var(--sup-ok)
    }

    .bg-\[var\(--sup-sld-tint-danger\)\] {
        background-color: var(--sup-sld-tint-danger)
    }

    .bg-\[var\(--sup-surface\)\] {
        background-color: var(--sup-surface)
    }

    .bg-\[var\(--sup-surface\,var\(--background-secondary\)\)\] {
        background-color: var(--sup-surface, var(--background-secondary))
    }

    .bg-\[var\(--sup-surface-2\)\] {
        background-color: var(--sup-surface-2)
    }

    .bg-\[var\(--sup-surface-3\,var\(--border-primary-color\)\)\] {
        background-color: var(--sup-surface-3, var(--border-primary-color))
    }

    .bg-\[var\(--sup-text-faint\)\] {
        background-color: var(--sup-text-faint)
    }

    .bg-\[var\(--sup-warn\)\] {
        background-color: var(--sup-warn)
    }

    .bg-\[var\(--text-danger\)\] {
        background-color: var(--text-danger)
    }

    .bg-\[var\(--text-muted\)\] {
        background-color: var(--text-muted)
    }

    .bg-\[var\(--text-primary\)\] {
        background-color: var(--text-primary)
    }

    .bg-\[var\(--text-success\)\]\/15 {
        background-color: var(--text-success)
    }

    @supports (color:color-mix(in lab, red, red)) {
        .bg-\[var\(--text-success\)\]\/15 {
            background-color: color-mix(in oklab, var(--text-success) 15%, transparent)
        }
    }

    .bg-amber-50 {
        background-color: var(--color-amber-50)
    }

    .bg-amber-50\/60 {
        background-color: #fffbeb99
    }

    @supports (color:color-mix(in lab, red, red)) {
        .bg-amber-50\/60 {
            background-color: color-mix(in oklab, var(--color-amber-50) 60%, transparent)
        }
    }

    .bg-amber-300\/10 {
        background-color: #ffd2361a
    }

    @supports (color:color-mix(in lab, red, red)) {
        .bg-amber-300\/10 {
            background-color: color-mix(in oklab, var(--color-amber-300) 10%, transparent)
        }
    }

    .bg-background {
        background-color: var(--background)
    }

    .bg-black {
        background-color: var(--color-black)
    }

    .bg-black\/10 {
        background-color: #0000001a
    }

    @supports (color:color-mix(in lab, red, red)) {
        .bg-black\/10 {
            background-color: color-mix(in oklab, var(--color-black) 10%, transparent)
        }
    }

    .bg-black\/20 {
        background-color: #0003
    }

    @supports (color:color-mix(in lab, red, red)) {
        .bg-black\/20 {
            background-color: color-mix(in oklab, var(--color-black) 20%, transparent)
        }
    }

    .bg-black\/25 {
        background-color: #00000040
    }

    @supports (color:color-mix(in lab, red, red)) {
        .bg-black\/25 {
            background-color: color-mix(in oklab, var(--color-black) 25%, transparent)
        }
    }

    .bg-black\/40 {
        background-color: #0006
    }

    @supports (color:color-mix(in lab, red, red)) {
        .bg-black\/40 {
            background-color: color-mix(in oklab, var(--color-black) 40%, transparent)
        }
    }

    .bg-black\/50 {
        background-color: #00000080
    }

    @supports (color:color-mix(in lab, red, red)) {
        .bg-black\/50 {
            background-color: color-mix(in oklab, var(--color-black) 50%, transparent)
        }
    }

    .bg-black\/55 {
        background-color: #0000008c
    }

    @supports (color:color-mix(in lab, red, red)) {
        .bg-black\/55 {
            background-color: color-mix(in oklab, var(--color-black) 55%, transparent)
        }
    }

    .bg-black\/75 {
        background-color: #000000bf
    }

    @supports (color:color-mix(in lab, red, red)) {
        .bg-black\/75 {
            background-color: color-mix(in oklab, var(--color-black) 75%, transparent)
        }
    }

    .bg-black\/80 {
        background-color: #000c
    }

    @supports (color:color-mix(in lab, red, red)) {
        .bg-black\/80 {
            background-color: color-mix(in oklab, var(--color-black) 80%, transparent)
        }
    }

    .bg-blue-50 {
        background-color: var(--color-blue-50)
    }

    .bg-blue-100 {
        background-color: var(--color-blue-100)
    }

    .bg-blue-500 {
        background-color: var(--color-blue-500)
    }

    .bg-blue-600 {
        background-color: var(--color-blue-600)
    }

    .bg-border {
        background-color: var(--border)
    }

    .bg-card {
        background-color: var(--card)
    }

    .bg-current {
        background-color: currentColor
    }

    .bg-cyan-400\/10 {
        background-color: #00d2ef1a
    }

    @supports (color:color-mix(in lab, red, red)) {
        .bg-cyan-400\/10 {
            background-color: color-mix(in oklab, var(--color-cyan-400) 10%, transparent)
        }
    }

    .bg-cyan-400\/70 {
        background-color: #00d2efb3
    }

    @supports (color:color-mix(in lab, red, red)) {
        .bg-cyan-400\/70 {
            background-color: color-mix(in oklab, var(--color-cyan-400) 70%, transparent)
        }
    }

    .bg-emerald-500\/10 {
        background-color: #00bb7f1a
    }

    @supports (color:color-mix(in lab, red, red)) {
        .bg-emerald-500\/10 {
            background-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent)
        }
    }

    .bg-gray-200 {
        background-color: var(--color-gray-200)
    }

    .bg-green-50 {
        background-color: var(--color-green-50)
    }

    .bg-green-100 {
        background-color: var(--color-green-100)
    }

    .bg-muted {
        background-color: var(--muted)
    }

    .bg-orange-500 {
        background-color: var(--color-orange-500)
    }

    .bg-popover {
        background-color: var(--popover)
    }

    .bg-primary {
        background-color: var(--primary)
    }

    .bg-red-50 {
        background-color: var(--color-red-50)
    }

    .bg-red-50\/50 {
        background-color: #fef2f280
    }

    @supports (color:color-mix(in lab, red, red)) {
        .bg-red-50\/50 {
            background-color: color-mix(in oklab, var(--color-red-50) 50%, transparent)
        }
    }

    .bg-red-400 {
        background-color: var(--color-red-400)
    }

    .bg-red-500 {
        background-color: var(--color-red-500)
    }

    .bg-red-500\/5 {
        background-color: #fb2c360d
    }

    @supports (color:color-mix(in lab, red, red)) {
        .bg-red-500\/5 {
            background-color: color-mix(in oklab, var(--color-red-500) 5%, transparent)
        }
    }

    .bg-red-500\/50 {
        background-color: #fb2c3680
    }

    @supports (color:color-mix(in lab, red, red)) {
        .bg-red-500\/50 {
            background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent)
        }
    }

    .bg-slate-300 {
        background-color: var(--color-slate-300)
    }

    .bg-transparent {
        background-color: #0000
    }

    .bg-white {
        background-color: var(--color-white)
    }

    .bg-white\/50 {
        background-color: #ffffff80
    }

    @supports (color:color-mix(in lab, red, red)) {
        .bg-white\/50 {
            background-color: color-mix(in oklab, var(--color-white) 50%, transparent)
        }
    }

    .bg-white\/70 {
        background-color: #ffffffb3
    }

    @supports (color:color-mix(in lab, red, red)) {
        .bg-white\/70 {
            background-color: color-mix(in oklab, var(--color-white) 70%, transparent)
        }
    }

    .bg-white\/80 {
        background-color: #fffc
    }

    @supports (color:color-mix(in lab, red, red)) {
        .bg-white\/80 {
            background-color: color-mix(in oklab, var(--color-white) 80%, transparent)
        }
    }

    .bg-white\/90 {
        background-color: #ffffffe6
    }

    @supports (color:color-mix(in lab, red, red)) {
        .bg-white\/90 {
            background-color: color-mix(in oklab, var(--color-white) 90%, transparent)
        }
    }

    .bg-white\/95 {
        background-color: #fffffff2
    }

    @supports (color:color-mix(in lab, red, red)) {
        .bg-white\/95 {
            background-color: color-mix(in oklab, var(--color-white) 95%, transparent)
        }
    }

    .bg-white\/96 {
        background-color: #fffffff5
    }

    @supports (color:color-mix(in lab, red, red)) {
        .bg-white\/96 {
            background-color: color-mix(in oklab, var(--color-white) 96%, transparent)
        }
    }

    .bg-white\/\[0\.02\] {
        background-color: #ffffff05
    }

    @supports (color:color-mix(in lab, red, red)) {
        .bg-white\/\[0\.02\] {
            background-color: color-mix(in oklab, var(--color-white) 2%, transparent)
        }
    }

    .bg-white\/\[0\.06\] {
        background-color: #ffffff0f
    }

    @supports (color:color-mix(in lab, red, red)) {
        .bg-white\/\[0\.06\] {
            background-color: color-mix(in oklab, var(--color-white) 6%, transparent)
        }
    }

    .bg-yellow-50 {
        background-color: var(--color-yellow-50)
    }

    .bg-zinc-100 {
        background-color: var(--color-zinc-100)
    }

    .bg-gradient-to-t {
        --tw-gradient-position: to top in oklab;
        background-image: linear-gradient(var(--tw-gradient-stops))
    }

    .bg-\[linear-gradient\(140deg\,var\(--bg-brand-panel-1\)\,var\(--bg-brand-panel-2\)\)\] {
        background-image: linear-gradient(140deg, var(--bg-brand-panel-1), var(--bg-brand-panel-2))
    }

    .bg-\[radial-gradient\(120\%_80\%_at_80\%_10\%\,transparent_0\%\,rgb\(0_0_0\/35\%\)_60\%\,rgb\(0_0_0\/55\%\)_100\%\)\,linear-gradient\(180deg\,rgb\(8_12_24\/30\%\)_0\%\,rgb\(8_12_24\/55\%\)_55\%\,rgb\(4_7_14\/85\%\)_100\%\)\] {
        background-image: radial-gradient(120% 80% at 80% 10%, #0000, #00000059 60%, #0000008c), linear-gradient(#080c184d, #080c188c 55%, #04070ed9)
    }

    .bg-\[radial-gradient\(circle_at_35\%_35\%\,\#7dc4ff\,\#1e91fd_42\%\,\#111827_74\%\)\] {
        background-image: radial-gradient(circle at 35% 35%, #7dc4ff, #1e91fd 42%, #111827 74%)
    }

    .from-black\/70 {
        --tw-gradient-from: #000000b3
    }

    @supports (color:color-mix(in lab, red, red)) {
        .from-black\/70 {
            --tw-gradient-from: color-mix(in oklab, var(--color-black) 70%, transparent)
        }
    }

    .from-black\/70 {
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))
    }

    .to-transparent {
        --tw-gradient-to: transparent;
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))
    }

    .\[mask-image\:linear-gradient\(180deg\,transparent_30\%\,black_60\%\)\] {
        -webkit-mask-image: linear-gradient(#0000 30%, #000 60%);
        mask-image: linear-gradient(#0000 30%, #000 60%)
    }

    .\[mask-image\:linear-gradient\(180deg\,transparent_50\%\,black_75\%\)\] {
        -webkit-mask-image: linear-gradient(#0000 50%, #000 75%);
        mask-image: linear-gradient(#0000 50%, #000 75%)
    }

    .\[mask-image\:linear-gradient\(180deg\,transparent_65\%\,black_88\%\)\] {
        -webkit-mask-image: linear-gradient(#0000 65%, #000 88%);
        mask-image: linear-gradient(#0000 65%, #000 88%)
    }

    .\[mask-image\:linear-gradient\(180deg\,transparent_78\%\,black_100\%\)\] {
        -webkit-mask-image: linear-gradient(#0000 78%, #000 100%);
        mask-image: linear-gradient(#0000 78%, #000)
    }

    .\[mask-size\:contain\] {
        -webkit-mask-size: contain;
        mask-size: contain
    }

    .\[mask-position\:center\] {
        -webkit-mask-position: 50%;
        mask-position: 50%
    }

    .\[mask-repeat\:no-repeat\] {
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat
    }

    .fill-\[var\(--background-secondary\)\] {
        fill: var(--background-secondary)
    }

    .fill-\[var\(--bg-surface\)\] {
        fill: var(--bg-surface)
    }

    .fill-\[var\(--primary-text\)\] {
        fill: var(--primary-text)
    }

    .fill-current {
        fill: currentColor
    }

    .stroke-\[\#2bb8c8\] {
        stroke: #2bb8c8
    }

    .stroke-\[\#d8f3f6\] {
        stroke: #d8f3f6
    }

    .stroke-\[var\(--status-ring-arc\)\] {
        stroke: var(--status-ring-arc)
    }

    .stroke-\[var\(--status-ring-track\)\] {
        stroke: var(--status-ring-track)
    }

    .object-contain {
        object-fit: contain
    }

    .object-cover {
        object-fit: cover
    }

    .object-fill {
        object-fit: fill
    }

    .object-\[right_top\] {
        object-position: right top
    }

    .object-center {
        object-position: center
    }

    .object-left {
        object-position: left
    }

    .\!p-0 {
        padding: calc(var(--spacing) * 0) !important
    }

    .\!p-\[var\(--space-8\)\] {
        padding: var(--space-8) !important
    }

    .p-0 {
        padding: calc(var(--spacing) * 0)
    }

    .p-0\.5 {
        padding: calc(var(--spacing) * .5)
    }

    .p-1 {
        padding: calc(var(--spacing) * 1)
    }

    .p-2 {
        padding: calc(var(--spacing) * 2)
    }

    .p-2\.5 {
        padding: calc(var(--spacing) * 2.5)
    }

    .p-3 {
        padding: calc(var(--spacing) * 3)
    }

    .p-4 {
        padding: calc(var(--spacing) * 4)
    }

    .p-5 {
        padding: calc(var(--spacing) * 5)
    }

    .p-6 {
        padding: calc(var(--spacing) * 6)
    }

    .p-8 {
        padding: calc(var(--spacing) * 8)
    }

    .p-10 {
        padding: calc(var(--spacing) * 10)
    }

    .p-\[4px\] {
        padding: 4px
    }

    .p-\[6px\] {
        padding: 6px
    }

    .p-\[16px\] {
        padding: 16px
    }

    .p-\[24px\] {
        padding: 24px
    }

    .p-\[var\(--space-2\)\] {
        padding: var(--space-2)
    }

    .p-\[var\(--space-3\)\] {
        padding: var(--space-3)
    }

    .p-\[var\(--space-4\)\] {
        padding: var(--space-4)
    }

    .p-\[var\(--space-5\)\] {
        padding: var(--space-5)
    }

    .p-\[var\(--space-6\)\] {
        padding: var(--space-6)
    }

    .p-\[var\(--space-8\)\] {
        padding: var(--space-8)
    }

    .p-\[var\(--space-10\)\] {
        padding: var(--space-10)
    }

    .p-\[var\(--space-12\)\] {
        padding: var(--space-12)
    }

    .p-\[var\(--space-16\)\] {
        padding: var(--space-16)
    }

    .p-\[var\(--unit-16\)\] {
        padding: var(--unit-16)
    }

    .p-\[var\(--unit-20\)\] {
        padding: var(--unit-20)
    }

    .\!px-4 {
        padding-inline: calc(var(--spacing) * 4) !important
    }

    .\!px-\[14px\] {
        padding-inline: 14px !important
    }

    .\!px-\[20px\] {
        padding-inline: 20px !important
    }

    .px-0 {
        padding-inline: calc(var(--spacing) * 0)
    }

    .px-1 {
        padding-inline: calc(var(--spacing) * 1)
    }

    .px-1\.5 {
        padding-inline: calc(var(--spacing) * 1.5)
    }

    .px-2 {
        padding-inline: calc(var(--spacing) * 2)
    }

    .px-2\.5 {
        padding-inline: calc(var(--spacing) * 2.5)
    }

    .px-3 {
        padding-inline: calc(var(--spacing) * 3)
    }

    .px-3\.5 {
        padding-inline: calc(var(--spacing) * 3.5)
    }

    .px-4 {
        padding-inline: calc(var(--spacing) * 4)
    }

    .px-5 {
        padding-inline: calc(var(--spacing) * 5)
    }

    .px-6 {
        padding-inline: calc(var(--spacing) * 6)
    }

    .px-7 {
        padding-inline: calc(var(--spacing) * 7)
    }

    .px-8 {
        padding-inline: calc(var(--spacing) * 8)
    }

    .px-10 {
        padding-inline: calc(var(--spacing) * 10)
    }

    .px-16 {
        padding-inline: calc(var(--spacing) * 16)
    }

    .px-\[3px\] {
        padding-inline: 3px
    }

    .px-\[4px\] {
        padding-inline: 4px
    }

    .px-\[5px\] {
        padding-inline: 5px
    }

    .px-\[8px\] {
        padding-inline: 8px
    }

    .px-\[10px\] {
        padding-inline: 10px
    }

    .px-\[12px\] {
        padding-inline: 12px
    }

    .px-\[14px\] {
        padding-inline: 14px
    }

    .px-\[16px\] {
        padding-inline: 16px
    }

    .px-\[18px\] {
        padding-inline: 18px
    }

    .px-\[20px\] {
        padding-inline: 20px
    }

    .px-\[24px\] {
        padding-inline: 24px
    }

    .px-\[30px\] {
        padding-inline: 30px
    }

    .px-\[calc\(var\(--space-6\)_\+_var\(--space-1\)\)\] {
        padding-inline: calc(var(--space-6) + var(--space-1))
    }

    .px-\[var\(--space-2\)\] {
        padding-inline: var(--space-2)
    }

    .px-\[var\(--space-3\)\] {
        padding-inline: var(--space-3)
    }

    .px-\[var\(--space-4\)\] {
        padding-inline: var(--space-4)
    }

    .px-\[var\(--space-5\)\] {
        padding-inline: var(--space-5)
    }

    .px-\[var\(--space-6\)\] {
        padding-inline: var(--space-6)
    }

    .px-\[var\(--space-8\)\] {
        padding-inline: var(--space-8)
    }

    .px-\[var\(--space-10\)\] {
        padding-inline: var(--space-10)
    }

    .px-\[var\(--space-12\)\] {
        padding-inline: var(--space-12)
    }

    .px-\[var\(--space-20\)\] {
        padding-inline: var(--space-20)
    }

    .px-\[var\(--unit-8\)\] {
        padding-inline: var(--unit-8)
    }

    .px-\[var\(--unit-12\)\] {
        padding-inline: var(--unit-12)
    }

    .px-\[var\(--unit-16\)\] {
        padding-inline: var(--unit-16)
    }

    .\!py-0 {
        padding-block: calc(var(--spacing) * 0) !important
    }

    .\!py-3 {
        padding-block: calc(var(--spacing) * 3) !important
    }

    .\!py-\[12px\] {
        padding-block: 12px !important
    }

    .py-0 {
        padding-block: calc(var(--spacing) * 0)
    }

    .py-0\.5 {
        padding-block: calc(var(--spacing) * .5)
    }

    .py-1 {
        padding-block: calc(var(--spacing) * 1)
    }

    .py-1\.5 {
        padding-block: calc(var(--spacing) * 1.5)
    }

    .py-2 {
        padding-block: calc(var(--spacing) * 2)
    }

    .py-2\.5 {
        padding-block: calc(var(--spacing) * 2.5)
    }

    .py-3 {
        padding-block: calc(var(--spacing) * 3)
    }

    .py-3\.5 {
        padding-block: calc(var(--spacing) * 3.5)
    }

    .py-4 {
        padding-block: calc(var(--spacing) * 4)
    }

    .py-5 {
        padding-block: calc(var(--spacing) * 5)
    }

    .py-6 {
        padding-block: calc(var(--spacing) * 6)
    }

    .py-8 {
        padding-block: calc(var(--spacing) * 8)
    }

    .py-10 {
        padding-block: calc(var(--spacing) * 10)
    }

    .py-12 {
        padding-block: calc(var(--spacing) * 12)
    }

    .py-14 {
        padding-block: calc(var(--spacing) * 14)
    }

    .py-\[2px\] {
        padding-block: 2px
    }

    .py-\[4px\] {
        padding-block: 4px
    }

    .py-\[5px\] {
        padding-block: 5px
    }

    .py-\[6px\] {
        padding-block: 6px
    }

    .py-\[7px\] {
        padding-block: 7px
    }

    .py-\[8px\] {
        padding-block: 8px
    }

    .py-\[11px\] {
        padding-block: 11px
    }

    .py-\[12px\] {
        padding-block: 12px
    }

    .py-\[20px\] {
        padding-block: 20px
    }

    .py-\[32px\] {
        padding-block: 32px
    }

    .py-\[calc\(var\(--space-6\)_\+_var\(--space-1\)\)\] {
        padding-block: calc(var(--space-6) + var(--space-1))
    }

    .py-\[var\(--space-1\)\] {
        padding-block: var(--space-1)
    }

    .py-\[var\(--space-2\)\] {
        padding-block: var(--space-2)
    }

    .py-\[var\(--space-3\)\] {
        padding-block: var(--space-3)
    }

    .py-\[var\(--space-4\)\] {
        padding-block: var(--space-4)
    }

    .py-\[var\(--space-5\)\] {
        padding-block: var(--space-5)
    }

    .py-\[var\(--space-6\)\] {
        padding-block: var(--space-6)
    }

    .py-\[var\(--space-8\)\] {
        padding-block: var(--space-8)
    }

    .py-\[var\(--space-10\)\] {
        padding-block: var(--space-10)
    }

    .py-\[var\(--space-16\)\] {
        padding-block: var(--space-16)
    }

    .py-\[var\(--unit-8\)\] {
        padding-block: var(--unit-8)
    }

    .py-\[var\(--unit-16\)\] {
        padding-block: var(--unit-16)
    }

    .\!pt-5 {
        padding-top: calc(var(--spacing) * 5) !important
    }

    .\!pt-\[var\(--space-6\)\] {
        padding-top: var(--space-6) !important
    }

    .\!pt-\[var\(--space-10\)\] {
        padding-top: var(--space-10) !important
    }

    .pt-0 {
        padding-top: calc(var(--spacing) * 0)
    }

    .pt-1 {
        padding-top: calc(var(--spacing) * 1)
    }

    .pt-2 {
        padding-top: calc(var(--spacing) * 2)
    }

    .pt-3 {
        padding-top: calc(var(--spacing) * 3)
    }

    .pt-4 {
        padding-top: calc(var(--spacing) * 4)
    }

    .pt-5 {
        padding-top: calc(var(--spacing) * 5)
    }

    .pt-6 {
        padding-top: calc(var(--spacing) * 6)
    }

    .pt-8 {
        padding-top: calc(var(--spacing) * 8)
    }

    .pt-\[8px\] {
        padding-top: 8px
    }

    .pt-\[24px\] {
        padding-top: 24px
    }

    .pt-\[36px\] {
        padding-top: 36px
    }

    .pt-\[var\(--space-4\)\] {
        padding-top: var(--space-4)
    }

    .pt-\[var\(--space-6\)\] {
        padding-top: var(--space-6)
    }

    .pt-\[var\(--space-8\)\] {
        padding-top: var(--space-8)
    }

    .pt-\[var\(--space-10\)\] {
        padding-top: var(--space-10)
    }

    .pt-\[var\(--space-12\)\] {
        padding-top: var(--space-12)
    }

    .pt-\[var\(--space-20\)\] {
        padding-top: var(--space-20)
    }

    .\!pr-\[42px\] {
        padding-right: 42px !important
    }

    .\!pr-\[56px\] {
        padding-right: 56px !important
    }

    .pr-1 {
        padding-right: calc(var(--spacing) * 1)
    }

    .pr-1\.5 {
        padding-right: calc(var(--spacing) * 1.5)
    }

    .pr-2 {
        padding-right: calc(var(--spacing) * 2)
    }

    .pr-6 {
        padding-right: calc(var(--spacing) * 6)
    }

    .pr-8 {
        padding-right: calc(var(--spacing) * 8)
    }

    .pr-10 {
        padding-right: calc(var(--spacing) * 10)
    }

    .pr-11 {
        padding-right: calc(var(--spacing) * 11)
    }

    .pr-260 {
        padding-right: calc(var(--spacing) * 260)
    }

    .pr-\[16px\] {
        padding-right: 16px
    }

    .pr-\[24px\] {
        padding-right: 24px
    }

    .pr-\[48px\] {
        padding-right: 48px
    }

    .pr-\[72px\] {
        padding-right: 72px
    }

    .pr-\[80px\] {
        padding-right: 80px
    }

    .pr-\[112px\] {
        padding-right: 112px
    }

    .pr-\[144px\] {
        padding-right: 144px
    }

    .pr-\[176px\] {
        padding-right: 176px
    }

    .pr-\[var\(--space-6\)\] {
        padding-right: var(--space-6)
    }

    .pr-\[var\(--space-24\)\] {
        padding-right: var(--space-24)
    }

    .pr-\[var\(--unit-14\)\] {
        padding-right: var(--unit-14)
    }

    .\!pb-0 {
        padding-bottom: calc(var(--spacing) * 0) !important
    }

    .pb-0 {
        padding-bottom: calc(var(--spacing) * 0)
    }

    .pb-0\.5 {
        padding-bottom: calc(var(--spacing) * .5)
    }

    .pb-1 {
        padding-bottom: calc(var(--spacing) * 1)
    }

    .pb-2 {
        padding-bottom: calc(var(--spacing) * 2)
    }

    .pb-3 {
        padding-bottom: calc(var(--spacing) * 3)
    }

    .pb-4 {
        padding-bottom: calc(var(--spacing) * 4)
    }

    .pb-6 {
        padding-bottom: calc(var(--spacing) * 6)
    }

    .pb-10 {
        padding-bottom: calc(var(--spacing) * 10)
    }

    .pb-24 {
        padding-bottom: calc(var(--spacing) * 24)
    }

    .pb-\[2px\] {
        padding-bottom: 2px
    }

    .pb-\[12px\] {
        padding-bottom: 12px
    }

    .pb-\[24px\] {
        padding-bottom: 24px
    }

    .pb-\[calc\(1\.5rem\+env\(safe-area-inset-bottom\,0px\)\)\] {
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px))
    }

    .pb-\[calc\(var\(--space-8\)\+env\(safe-area-inset-bottom\,0px\)\)\] {
        padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom, 0px))
    }

    .pb-\[var\(--space-3\)\] {
        padding-bottom: var(--space-3)
    }

    .pb-\[var\(--space-4\)\] {
        padding-bottom: var(--space-4)
    }

    .pb-\[var\(--space-8\)\] {
        padding-bottom: var(--space-8)
    }

    .pb-\[var\(--space-12\)\] {
        padding-bottom: var(--space-12)
    }

    .pb-\[var\(--space-16\)\] {
        padding-bottom: var(--space-16)
    }

    .\!pl-\[40px\] {
        padding-left: 40px !important
    }

    .\!pl-\[42px\] {
        padding-left: 42px !important
    }

    .pl-2 {
        padding-left: calc(var(--spacing) * 2)
    }

    .pl-3 {
        padding-left: calc(var(--spacing) * 3)
    }

    .pl-3\.5 {
        padding-left: calc(var(--spacing) * 3.5)
    }

    .pl-4 {
        padding-left: calc(var(--spacing) * 4)
    }

    .pl-5 {
        padding-left: calc(var(--spacing) * 5)
    }

    .pl-7 {
        padding-left: calc(var(--spacing) * 7)
    }

    .pl-8 {
        padding-left: calc(var(--spacing) * 8)
    }

    .pl-14 {
        padding-left: calc(var(--spacing) * 14)
    }

    .pl-\[1\.6em\] {
        padding-left: 1.6em
    }

    .pl-\[10px\] {
        padding-left: 10px
    }

    .pl-\[19px\] {
        padding-left: 19px
    }

    .pl-\[40px\] {
        padding-left: 40px
    }

    .pl-\[48px\] {
        padding-left: 48px
    }

    .pl-\[52px\] {
        padding-left: 52px
    }

    .pl-\[72px\] {
        padding-left: 72px
    }

    .pl-\[var\(--space-8\)\] {
        padding-left: var(--space-8)
    }

    .pl-\[var\(--space-10\)\] {
        padding-left: var(--space-10)
    }

    .text-center {
        text-align: center
    }

    .text-left {
        text-align: left
    }

    .text-right {
        text-align: right
    }

    .align-baseline {
        vertical-align: baseline
    }

    .align-bottom {
        vertical-align: bottom
    }

    .\!font-sans {
        font-family: var(--font-sans) !important
    }

    .\[font-family\:var\(--font-sans\)\] {
        font-family: var(--font-sans)
    }

    .font-\[\'Urbanist\'\,sans-serif\] {
        font-family: Urbanist, sans-serif
    }

    .font-\[family-name\:var\(--font-mono\)\],
    .font-mono {
        font-family: var(--font-mono)
    }

    .font-sans {
        font-family: var(--font-sans)
    }

    .text-2xl {
        font-size: var(--text-2xl);
        line-height: var(--tw-leading, var(--text-2xl--line-height))
    }

    .text-base {
        font-size: var(--text-base);
        line-height: var(--tw-leading, var(--text-base--line-height))
    }

    .text-lg {
        font-size: var(--text-lg);
        line-height: var(--tw-leading, var(--text-lg--line-height))
    }

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

    .text-xl {
        font-size: var(--text-xl);
        line-height: var(--tw-leading, var(--text-xl--line-height))
    }

    .text-xs {
        font-size: var(--text-xs);
        line-height: var(--tw-leading, var(--text-xs--line-height))
    }

    .\!text-\[13px\] {
        font-size: 13px !important
    }

    .\!text-\[14px\] {
        font-size: 14px !important
    }

    .\!text-\[length\:var\(--text-body\)\] {
        font-size: var(--text-body) !important
    }

    .\!text-\[length\:var\(--text-label\)\] {
        font-size: var(--text-label) !important
    }

    .text-\[0\.8em\] {
        font-size: .8em
    }

    .text-\[0\.9em\] {
        font-size: .9em
    }

    .text-\[5px\] {
        font-size: 5px
    }

    .text-\[6px\] {
        font-size: 6px
    }

    .text-\[7px\] {
        font-size: 7px
    }

    .text-\[8px\] {
        font-size: 8px
    }

    .text-\[9px\] {
        font-size: 9px
    }

    .text-\[10px\] {
        font-size: 10px
    }

    .text-\[11px\] {
        font-size: 11px
    }

    .text-\[12px\] {
        font-size: 12px
    }

    .text-\[13px\] {
        font-size: 13px
    }

    .text-\[14px\] {
        font-size: 14px
    }

    .text-\[15px\] {
        font-size: 15px
    }

    .text-\[16px\] {
        font-size: 16px
    }

    .text-\[17px\] {
        font-size: 17px
    }

    .text-\[18px\] {
        font-size: 18px
    }

    .text-\[20px\] {
        font-size: 20px
    }

    .text-\[22px\] {
        font-size: 22px
    }

    .text-\[24px\] {
        font-size: 24px
    }

    .text-\[28px\] {
        font-size: 28px
    }

    .text-\[32px\] {
        font-size: 32px
    }

    .text-\[40px\] {
        font-size: 40px
    }

    .text-\[64px\] {
        font-size: 64px
    }

    .text-\[74px\] {
        font-size: 74px
    }

    .text-\[clamp\(40px\,4\.5vw\,56px\)\] {
        font-size: clamp(40px, 4.5vw, 56px)
    }

    .text-\[length\:11px\] {
        font-size: 11px
    }

    .text-\[length\:12px\] {
        font-size: 12px
    }

    .text-\[length\:var\(--text-body\)\] {
        font-size: var(--text-body)
    }

    .text-\[length\:var\(--text-body-lg\)\] {
        font-size: var(--text-body-lg)
    }

    .text-\[length\:var\(--text-body-sm\)\] {
        font-size: var(--text-body-sm)
    }

    .text-\[length\:var\(--text-caption\)\] {
        font-size: var(--text-caption)
    }

    .text-\[length\:var\(--text-display\)\] {
        font-size: var(--text-display)
    }

    .text-\[length\:var\(--text-h1\)\] {
        font-size: var(--text-h1)
    }

    .text-\[length\:var\(--text-h2\)\] {
        font-size: var(--text-h2)
    }

    .text-\[length\:var\(--text-h3\)\] {
        font-size: var(--text-h3)
    }

    .text-\[length\:var\(--text-h4\)\] {
        font-size: var(--text-h4)
    }

    .text-\[length\:var\(--text-label\)\] {
        font-size: var(--text-label)
    }

    .text-\[length\:var\(--text-micro\)\] {
        font-size: var(--text-micro)
    }

    .text-\[length\:var\(--x\)\] {
        font-size: var(--x)
    }

    .\!leading-none {
        --tw-leading: 1 !important;
        line-height: 1 !important
    }

    .leading-3 {
        --tw-leading: calc(var(--spacing) * 3);
        line-height: calc(var(--spacing) * 3)
    }

    .leading-4 {
        --tw-leading: calc(var(--spacing) * 4);
        line-height: calc(var(--spacing) * 4)
    }

    .leading-5 {
        --tw-leading: calc(var(--spacing) * 5);
        line-height: calc(var(--spacing) * 5)
    }

    .leading-6 {
        --tw-leading: calc(var(--spacing) * 6);
        line-height: calc(var(--spacing) * 6)
    }

    .leading-8 {
        --tw-leading: calc(var(--spacing) * 8);
        line-height: calc(var(--spacing) * 8)
    }

    .leading-\[1\.1\] {
        --tw-leading: 1.1;
        line-height: 1.1
    }

    .leading-\[1\.2\] {
        --tw-leading: 1.2;
        line-height: 1.2
    }

    .leading-\[1\.3\] {
        --tw-leading: 1.3;
        line-height: 1.3
    }

    .leading-\[1\.4\] {
        --tw-leading: 1.4;
        line-height: 1.4
    }

    .leading-\[1\.5\] {
        --tw-leading: 1.5;
        line-height: 1.5
    }

    .leading-\[1\.15\] {
        --tw-leading: 1.15;
        line-height: 1.15
    }

    .leading-\[11px\] {
        --tw-leading: 11px;
        line-height: 11px
    }

    .leading-\[13px\] {
        --tw-leading: 13px;
        line-height: 13px
    }

    .leading-\[14px\] {
        --tw-leading: 14px;
        line-height: 14px
    }

    .leading-\[17px\] {
        --tw-leading: 17px;
        line-height: 17px
    }

    .leading-\[18px\] {
        --tw-leading: 18px;
        line-height: 18px
    }

    .leading-\[22px\] {
        --tw-leading: 22px;
        line-height: 22px
    }

    .leading-\[27px\] {
        --tw-leading: 27px;
        line-height: 27px
    }

    .leading-\[30px\] {
        --tw-leading: 30px;
        line-height: 30px
    }

    .leading-\[38px\] {
        --tw-leading: 38px;
        line-height: 38px
    }

    .leading-\[100\%\] {
        --tw-leading: 100%;
        line-height: 100%
    }

    .leading-\[var\(--lh-base\)\] {
        --tw-leading: var(--lh-base);
        line-height: var(--lh-base)
    }

    .leading-\[var\(--lh-relaxed\)\] {
        --tw-leading: var(--lh-relaxed);
        line-height: var(--lh-relaxed)
    }

    .leading-\[var\(--lh-snug\)\] {
        --tw-leading: var(--lh-snug);
        line-height: var(--lh-snug)
    }

    .leading-\[var\(--lh-tight\)\] {
        --tw-leading: var(--lh-tight);
        line-height: var(--lh-tight)
    }

    .leading-none {
        --tw-leading: 1;
        line-height: 1
    }

    .leading-snug {
        --tw-leading: var(--leading-snug);
        line-height: var(--leading-snug)
    }

    .leading-tight {
        --tw-leading: var(--leading-tight);
        line-height: var(--leading-tight)
    }

    .\!font-\[var\(--weight-medium\)\] {
        --tw-font-weight: var(--weight-medium) !important;
        font-weight: var(--weight-medium) !important
    }

    .\!font-\[var\(--weight-regular\)\] {
        --tw-font-weight: var(--weight-regular) !important;
        font-weight: var(--weight-regular) !important
    }

    .\!font-semibold {
        --tw-font-weight: var(--font-weight-semibold) !important;
        font-weight: var(--font-weight-semibold) !important
    }

    .font-\[var\(--weight-medium\)\] {
        --tw-font-weight: var(--weight-medium);
        font-weight: var(--weight-medium)
    }

    .font-\[var\(--weight-regular\)\] {
        --tw-font-weight: var(--weight-regular);
        font-weight: var(--weight-regular)
    }

    .font-\[var\(--weight-semibold\)\] {
        --tw-font-weight: var(--weight-semibold);
        font-weight: var(--weight-semibold)
    }

    .font-bold {
        --tw-font-weight: var(--font-weight-bold);
        font-weight: var(--font-weight-bold)
    }

    .font-medium {
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium)
    }

    .font-normal {
        --tw-font-weight: var(--font-weight-normal);
        font-weight: var(--font-weight-normal)
    }

    .font-semibold {
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold)
    }

    .font-thin {
        --tw-font-weight: var(--font-weight-thin);
        font-weight: var(--font-weight-thin)
    }

    .\[font-weight\:var\(--weight-medium\)\] {
        font-weight: var(--weight-medium)
    }

    .\!tracking-\[var\(--tracking-snug\)\] {
        --tw-tracking: var(--tracking-snug) !important;
        letter-spacing: var(--tracking-snug) !important
    }

    .tracking-\[-0\.02em\] {
        --tw-tracking: -.02em;
        letter-spacing: -.02em
    }

    .tracking-\[-0\.03em\] {
        --tw-tracking: -.03em;
        letter-spacing: -.03em
    }

    .tracking-\[-0\.05em\] {
        --tw-tracking: -.05em;
        letter-spacing: -.05em
    }

    .tracking-\[0\.1em\] {
        --tw-tracking: .1em;
        letter-spacing: .1em
    }

    .tracking-\[0\.2em\] {
        --tw-tracking: .2em;
        letter-spacing: .2em
    }

    .tracking-\[0\.04em\] {
        --tw-tracking: .04em;
        letter-spacing: .04em
    }

    .tracking-\[0\.06em\] {
        --tw-tracking: .06em;
        letter-spacing: .06em
    }

    .tracking-\[0\.07em\] {
        --tw-tracking: .07em;
        letter-spacing: .07em
    }

    .tracking-\[0\.08em\] {
        --tw-tracking: .08em;
        letter-spacing: .08em
    }

    .tracking-\[0\.12em\] {
        --tw-tracking: .12em;
        letter-spacing: .12em
    }

    .tracking-\[0\.14em\] {
        --tw-tracking: .14em;
        letter-spacing: .14em
    }

    .tracking-\[0\.18em\] {
        --tw-tracking: .18em;
        letter-spacing: .18em
    }

    .tracking-\[0\.22em\] {
        --tw-tracking: .22em;
        letter-spacing: .22em
    }

    .tracking-\[0\.24em\] {
        --tw-tracking: .24em;
        letter-spacing: .24em
    }

    .tracking-\[var\(--tracking-snug\)\] {
        --tw-tracking: var(--tracking-snug);
        letter-spacing: var(--tracking-snug)
    }

    .tracking-\[var\(--tracking-tight\)\] {
        --tw-tracking: var(--tracking-tight);
        letter-spacing: var(--tracking-tight)
    }

    .tracking-\[var\(--tracking-wide\)\] {
        --tw-tracking: var(--tracking-wide);
        letter-spacing: var(--tracking-wide)
    }

    .tracking-normal {
        --tw-tracking: var(--tracking-normal);
        letter-spacing: var(--tracking-normal)
    }

    .tracking-tight {
        --tw-tracking: var(--tracking-tight);
        letter-spacing: var(--tracking-tight)
    }

    .tracking-wide {
        --tw-tracking: var(--tracking-wide);
        letter-spacing: var(--tracking-wide)
    }

    .tracking-widest {
        --tw-tracking: var(--tracking-widest);
        letter-spacing: var(--tracking-widest)
    }

    .\[letter-spacing\:var\(--tracking-snug\)\] {
        letter-spacing: var(--tracking-snug)
    }

    .\[overflow-wrap\:anywhere\] {
        overflow-wrap: anywhere
    }

    .break-words {
        overflow-wrap: break-word
    }

    .break-all {
        word-break: break-all
    }

    .text-ellipsis {
        text-overflow: ellipsis
    }

    .whitespace-normal {
        white-space: normal
    }

    .whitespace-nowrap {
        white-space: nowrap
    }

    .whitespace-pre {
        white-space: pre
    }

    .whitespace-pre-line {
        white-space: pre-line
    }

    .whitespace-pre-wrap {
        white-space: pre-wrap
    }

    .\!text-\[var\(--primary-text\)\] {
        color: var(--primary-text) !important
    }

    .\!text-\[var\(--text-on-brand\)\] {
        color: var(--text-on-brand) !important
    }

    .\!text-\[var\(--text-primary\)\] {
        color: var(--text-primary) !important
    }

    .\!text-\[var\(--text-secondary\)\] {
        color: var(--text-secondary) !important
    }

    .text-\[\#1A1C20\] {
        color: #1a1c20
    }

    .text-\[\#1E91FD\] {
        color: #1e91fd
    }

    .text-\[\#1F1F1F\] {
        color: #1f1f1f
    }

    .text-\[\#3a3a3a\] {
        color: #3a3a3a
    }

    .text-\[\#4A4D52\] {
        color: #4a4d52
    }

    .text-\[\#6e767a\] {
        color: #6e767a
    }

    .text-\[\#22C55E\] {
        color: #22c55e
    }

    .text-\[\#181A1D\] {
        color: #181a1d
    }

    .text-\[\#484B50\] {
        color: #484b50
    }

    .text-\[\#34373C\] {
        color: #34373c
    }

    .text-\[\#111827\] {
        color: #111827
    }

    .text-\[\#191919\] {
        color: #191919
    }

    .text-\[\#273238\] {
        color: #273238
    }

    .text-\[\#656565\] {
        color: #656565
    }

    .text-\[var\(--Secondary-text\)\] {
        color: var(--Secondary-text)
    }

    .text-\[var\(--background-secondary\)\] {
        color: var(--background-secondary)
    }

    .text-\[var\(--bg-canvas\)\] {
        color: var(--bg-canvas)
    }

    .text-\[var\(--color-destructive\)\] {
        color: var(--color-destructive)
    }

    .text-\[var\(--color-destructive\,\#dc2626\)\] {
        color: var(--color-destructive, #dc2626)
    }

    .text-\[var\(--color-neutral-0\)\] {
        color: var(--color-neutral-0)
    }

    .text-\[var\(--color-orange\,\#e69333\)\] {
        color: var(--color-orange, #e69333)
    }

    .text-\[var\(--color-theme\)\] {
        color: var(--color-theme)
    }

    .text-\[var\(--color-violet\)\] {
        color: var(--color-violet)
    }

    .text-\[var\(--disabled-text\)\] {
        color: var(--disabled-text)
    }

    .text-\[var\(--error-text\)\] {
        color: var(--error-text)
    }

    .text-\[var\(--icon-default\)\] {
        color: var(--icon-default)
    }

    .text-\[var\(--icon-muted\)\] {
        color: var(--icon-muted)
    }

    .text-\[var\(--info-text-g\)\] {
        color: var(--info-text-g)
    }

    .text-\[var\(--info-text-orange\,\#e8730c\)\] {
        color: var(--info-text-orange, #e8730c)
    }

    .text-\[var\(--option-text\)\] {
        color: var(--option-text)
    }

    .text-\[var\(--primary\)\] {
        color: var(--primary)
    }

    .text-\[var\(--primary-text\)\] {
        color: var(--primary-text)
    }

    .text-\[var\(--report-dark-mode-text\)\] {
        color: var(--report-dark-mode-text)
    }

    .text-\[var\(--report-text\)\] {
        color: var(--report-text)
    }

    .text-\[var\(--report-text-secondary\)\] {
        color: var(--report-text-secondary)
    }

    .text-\[var\(--secondary-text\)\] {
        color: var(--secondary-text)
    }

    .text-\[var\(--sup-accent\)\] {
        color: var(--sup-accent)
    }

    .text-\[var\(--sup-danger\)\] {
        color: var(--sup-danger)
    }

    .text-\[var\(--sup-invert-fg\)\] {
        color: var(--sup-invert-fg)
    }

    .text-\[var\(--sup-text\)\] {
        color: var(--sup-text)
    }

    .text-\[var\(--sup-text\,var\(--primary-text\)\)\] {
        color: var(--sup-text, var(--primary-text))
    }

    .text-\[var\(--sup-text-dim\)\] {
        color: var(--sup-text-dim)
    }

    .text-\[var\(--sup-text-dim\,var\(--secondary-text\)\)\] {
        color: var(--sup-text-dim, var(--secondary-text))
    }

    .text-\[var\(--sup-text-faint\)\] {
        color: var(--sup-text-faint)
    }

    .text-\[var\(--sup-text-faint\,var\(--disabled-text\,var\(--secondary-text\)\)\)\] {
        color: var(--sup-text-faint, var(--disabled-text, var(--secondary-text)))
    }

    .text-\[var\(--sup-warn\)\] {
        color: var(--sup-warn)
    }

    .text-\[var\(--text-brand\)\] {
        color: var(--text-brand)
    }

    .text-\[var\(--text-danger\)\] {
        color: var(--text-danger)
    }

    .text-\[var\(--text-disabled\)\] {
        color: var(--text-disabled)
    }

    .text-\[var\(--text-muted\)\] {
        color: var(--text-muted)
    }

    .text-\[var\(--text-on-brand\)\] {
        color: var(--text-on-brand)
    }

    .text-\[var\(--text-primary\)\] {
        color: var(--text-primary)
    }

    .text-\[var\(--text-secondary\)\] {
        color: var(--text-secondary)
    }

    .text-\[var\(--text-success\)\] {
        color: var(--text-success)
    }

    .text-\[var\(--text-w\)\] {
        color: var(--text-w)
    }

    .text-\[var\(--text-warning\)\] {
        color: var(--text-warning)
    }

    .text-\[var\(--unit-16\)\] {
        color: var(--unit-16)
    }

    .text-\[var\(--unit-20\)\] {
        color: var(--unit-20)
    }

    .text-\[var\(--unit-24\)\] {
        color: var(--unit-24)
    }

    .text-\[var\(--x\)\] {
        color: var(--x)
    }

    .text-\[…\] {
        color: …
    }

    .text-amber-300 {
        color: var(--color-amber-300)
    }

    .text-amber-400 {
        color: var(--color-amber-400)
    }

    .text-amber-700 {
        color: var(--color-amber-700)
    }

    .text-amber-800 {
        color: var(--color-amber-800)
    }

    .text-amber-900 {
        color: var(--color-amber-900)
    }

    .text-black {
        color: var(--color-black)
    }

    .text-blue-600 {
        color: var(--color-blue-600)
    }

    .text-blue-700 {
        color: var(--color-blue-700)
    }

    .text-blue-800 {
        color: var(--color-blue-800)
    }

    .text-blue-900 {
        color: var(--color-blue-900)
    }

    .text-cyan-300 {
        color: var(--color-cyan-300)
    }

    .text-destructive {
        color: var(--destructive)
    }

    .text-emerald-300 {
        color: var(--color-emerald-300)
    }

    .text-foreground {
        color: var(--foreground)
    }

    .text-gray-400 {
        color: var(--color-gray-400)
    }

    .text-gray-500 {
        color: var(--color-gray-500)
    }

    .text-gray-600 {
        color: var(--color-gray-600)
    }

    .text-gray-700 {
        color: var(--color-gray-700)
    }

    .text-gray-800 {
        color: var(--color-gray-800)
    }

    .text-green-600 {
        color: var(--color-green-600)
    }

    .text-green-700 {
        color: var(--color-green-700)
    }

    .text-green-800 {
        color: var(--color-green-800)
    }

    .text-green-900 {
        color: var(--color-green-900)
    }

    .text-muted {
        color: var(--muted)
    }

    .text-muted-foreground {
        color: var(--muted-foreground)
    }

    .text-popover-foreground {
        color: var(--popover-foreground)
    }

    .text-primary {
        color: var(--primary)
    }

    .text-primary-foreground {
        color: var(--primary-foreground)
    }

    .text-red-300 {
        color: var(--color-red-300)
    }

    .text-red-500 {
        color: var(--color-red-500)
    }

    .text-red-600 {
        color: var(--color-red-600)
    }

    .text-red-700 {
        color: var(--color-red-700)
    }

    .text-red-900 {
        color: var(--color-red-900)
    }

    .text-transparent {
        color: #0000
    }

    .text-white {
        color: var(--color-white)
    }

    .text-white\/65 {
        color: #ffffffa6
    }

    @supports (color:color-mix(in lab, red, red)) {
        .text-white\/65 {
            color: color-mix(in oklab, var(--color-white) 65%, transparent)
        }
    }

    .text-white\/78 {
        color: #ffffffc7
    }

    @supports (color:color-mix(in lab, red, red)) {
        .text-white\/78 {
            color: color-mix(in oklab, var(--color-white) 78%, transparent)
        }
    }

    .text-yellow-900 {
        color: var(--color-yellow-900)
    }

    .text-zinc-100 {
        color: var(--color-zinc-100)
    }

    .text-zinc-200 {
        color: var(--color-zinc-200)
    }

    .text-zinc-300 {
        color: var(--color-zinc-300)
    }

    .text-zinc-400 {
        color: var(--color-zinc-400)
    }

    .text-zinc-500 {
        color: var(--color-zinc-500)
    }

    .text-zinc-600 {
        color: var(--color-zinc-600)
    }

    .capitalize {
        text-transform: capitalize
    }

    .lowercase {
        text-transform: lowercase
    }

    .uppercase {
        text-transform: uppercase
    }

    .italic {
        font-style: italic
    }

    .ordinal {
        --tw-ordinal: ordinal;
        font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, )
    }

    .tabular-nums {
        --tw-numeric-spacing: tabular-nums;
        font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, )
    }

    .no-underline {
        text-decoration-line: none
    }

    .underline {
        text-decoration-line: underline
    }

    .decoration-\[var\(--link-muted-underline\)\] {
        -webkit-text-decoration-color: var(--link-muted-underline);
        text-decoration-color: var(--link-muted-underline)
    }

    .decoration-\[var\(--link-underline\)\] {
        -webkit-text-decoration-color: var(--link-underline);
        text-decoration-color: var(--link-underline)
    }

    .decoration-\[var\(--primary\)\] {
        -webkit-text-decoration-color: var(--primary);
        text-decoration-color: var(--primary)
    }

    .underline-offset-2 {
        text-underline-offset: 2px
    }

    .underline-offset-4 {
        text-underline-offset: 4px
    }

    .underline-offset-\[3px\] {
        text-underline-offset: 3px
    }

    .antialiased {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale
    }

    .caret-transparent {
        caret-color: #0000
    }

    .accent-\[var\(--bg-brand\)\] {
        accent-color: var(--bg-brand)
    }

    .accent-\[var\(--color-theme\)\] {
        accent-color: var(--color-theme)
    }

    .accent-blue-600 {
        accent-color: var(--color-blue-600)
    }

    .opacity-0 {
        opacity: 0
    }

    .opacity-40 {
        opacity: .4
    }

    .opacity-45 {
        opacity: .45
    }

    .opacity-50 {
        opacity: .5
    }

    .opacity-55 {
        opacity: .55
    }

    .opacity-60 {
        opacity: .6
    }

    .opacity-70 {
        opacity: .7
    }

    .opacity-75 {
        opacity: .75
    }

    .opacity-80 {
        opacity: .8
    }

    .opacity-90 {
        opacity: .9
    }

    .opacity-100 {
        opacity: 1
    }

    .opacity-\[0\.77\] {
        opacity: .77
    }

    .opacity-\[0\.89\] {
        opacity: .89
    }

    .shadow {
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-2xl {
        --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-\[0_-6px_18px_rgba\(0\,0\,0\,0\.12\)\] {
        --tw-shadow: 0 -6px 18px var(--tw-shadow-color, #0000001f);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-\[0_0_0_3px_var\(--focus-halo\)\] {
        --tw-shadow: 0 0 0 3px var(--tw-shadow-color, var(--focus-halo));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-\[0_1px_2px_rgba\(15\,23\,42\,0\.08\)\] {
        --tw-shadow: 0 1px 2px var(--tw-shadow-color, #0f172a14);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-\[0_8px_24px_rgba\(149\,157\,165\,0\.2\)\] {
        --tw-shadow: 0 8px 24px var(--tw-shadow-color, #959da533);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-\[0_10px_24px_rgba\(15\,23\,42\,0\.18\)\] {
        --tw-shadow: 0 10px 24px var(--tw-shadow-color, #0f172a2e);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-\[0_20px_60px_rgba\(15\,23\,42\,0\.2\)\] {
        --tw-shadow: 0 20px 60px var(--tw-shadow-color, #0f172a33);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-\[0_20px_60px_rgba\(15\,23\,42\,0\.14\)\] {
        --tw-shadow: 0 20px 60px var(--tw-shadow-color, #0f172a24);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-\[0px_0px_8px_0px_\#00000033\] {
        --tw-shadow: 0px 0px 8px 0px var(--tw-shadow-color, #0003);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-\[0px_0px_24px_0px_\#959DA514\] {
        --tw-shadow: 0px 0px 24px 0px var(--tw-shadow-color, #959da514);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-\[0px_1px_10px_rgba\(0\,0\,0\,0\.04\)\] {
        --tw-shadow: 0px 1px 10px var(--tw-shadow-color, #0000000a);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-\[0px_4px_24px_0px_\#959DA514\] {
        --tw-shadow: 0px 4px 24px 0px var(--tw-shadow-color, #959da514);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-\[0px_8px_12px_rgba\(149\,157\,165\,0\.2\)\] {
        --tw-shadow: 0px 8px 12px var(--tw-shadow-color, #959da533);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-\[0…\] {
        --tw-shadow: 0…;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-\[inset_0_0_0_1px_var\(--bg-brand\)\] {
        --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--bg-brand));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-\[inset_0_0_0_1px_var\(--border-focus\)\] {
        --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--border-focus));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-\[var\(--shadow-1\)\] {
        --tw-shadow: var(--shadow-1);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-\[var\(--shadow-2\)\] {
        --tw-shadow: var(--shadow-2);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-\[var\(--shadow-3\)\] {
        --tw-shadow: var(--shadow-3);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-\[var\(--sup-shadow\)\] {
        --tw-shadow: var(--sup-shadow);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-\[var\(--sup-shadow-sm\)\] {
        --tw-shadow: var(--sup-shadow-sm);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-lg {
        --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-md {
        --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-none {
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-sm {
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-xl {
        --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow\/contact,
    .shadow\/input,
    .shadow\/light,
    .shadow\/production {
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .ring,
    .ring-1 {
        --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .ring-2 {
        --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .ring-\[var\(--border-danger\)\] {
        --tw-ring-color: var(--border-danger)
    }

    .ring-black\/5 {
        --tw-ring-color: #0000000d
    }

    @supports (color:color-mix(in lab, red, red)) {
        .ring-black\/5 {
            --tw-ring-color: color-mix(in oklab, var(--color-black) 5%, transparent)
        }
    }

    .ring-blue-300 {
        --tw-ring-color: var(--color-blue-300)
    }

    .ring-primary {
        --tw-ring-color: var(--primary)
    }

    .ring-offset-1 {
        --tw-ring-offset-width: 1px;
        --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)
    }

    .ring-offset-background {
        --tw-ring-offset-color: var(--background)
    }

    .outline-hidden {
        --tw-outline-style: none;
        outline-style: none
    }

    @media(forced-colors:active) {
        .outline-hidden {
            outline-offset: 2px;
            outline: 2px solid #0000
        }
    }

    .outline,
    .outline-1 {
        outline-style: var(--tw-outline-style);
        outline-width: 1px
    }

    .outline-2 {
        outline-style: var(--tw-outline-style);
        outline-width: 2px
    }

    .outline-offset-0 {
        outline-offset: 0px
    }

    .outline-offset-2 {
        outline-offset: 2px
    }

    .outline-\[var\(--border-focus\)\] {
        outline-color: var(--border-focus)
    }

    .outline-\[var\(--color-destructive\,\#dc2626\)\] {
        outline-color: var(--color-destructive, #dc2626)
    }

    .outline-\[var\(--color-pink\,\#ff7b9c\)\] {
        outline-color: var(--color-pink, #ff7b9c)
    }

    .blur {
        --tw-blur: blur(8px);
        filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )
    }

    .brightness-0 {
        --tw-brightness: brightness(0%);
        filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )
    }

    .contrast-1 {
        --tw-contrast: contrast(1%);
        filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )
    }

    .contrast-2 {
        --tw-contrast: contrast(2%);
        filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )
    }

    .contrast-3 {
        --tw-contrast: contrast(3%);
        filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )
    }

    .contrast-4 {
        --tw-contrast: contrast(4%);
        filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )
    }

    .contrast-102 {
        --tw-contrast: contrast(102%);
        filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )
    }

    .drop-shadow {
        --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, #0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, #0000000f));
        --tw-drop-shadow: drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);
        filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )
    }

    .drop-shadow-\[0_14px_24px_rgba\(15\,23\,42\,0\.35\)\] {
        --tw-drop-shadow-size: drop-shadow(0 14px 24px var(--tw-drop-shadow-color, #0f172a59));
        --tw-drop-shadow: var(--tw-drop-shadow-size);
        filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )
    }

    .grayscale {
        --tw-grayscale: grayscale(100%);
        filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )
    }

    .invert {
        --tw-invert: invert(100%);
        filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )
    }

    .saturate-105 {
        --tw-saturate: saturate(105%);
        filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )
    }

    .filter {
        filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )
    }

    .backdrop-blur {
        --tw-backdrop-blur: blur(8px);
        -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
        backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, )
    }

    .backdrop-blur-\[2px\] {
        --tw-backdrop-blur: blur(2px);
        -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
        backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, )
    }

    .backdrop-blur-\[6px\] {
        --tw-backdrop-blur: blur(6px);
        -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
        backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, )
    }

    .backdrop-blur-\[12px\] {
        --tw-backdrop-blur: blur(12px);
        -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
        backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, )
    }

    .backdrop-blur-\[20px\] {
        --tw-backdrop-blur: blur(20px);
        -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
        backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, )
    }

    .backdrop-blur-\[var\(--scrim-blur\)\] {
        --tw-backdrop-blur: blur(var(--scrim-blur));
        -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
        backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, )
    }

    .backdrop-blur-md {
        --tw-backdrop-blur: blur(var(--blur-md));
        -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
        backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, )
    }

    .backdrop-blur-sm {
        --tw-backdrop-blur: blur(var(--blur-sm));
        -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
        backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, )
    }

    .backdrop-filter {
        -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
        backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, )
    }

    .transition {
        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))
    }

    .transition-\[background-color\,border-color\,box-shadow\,transform\] {
        transition-property: background-color, border-color, box-shadow, transform;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-\[background-color\,border-color\,color\,box-shadow\] {
        transition-property: background-color, border-color, color, box-shadow;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-\[background-color\,border-color\,color\] {
        transition-property: background-color, border-color, color;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-\[background-color\,border-color\] {
        transition-property: background-color, border-color;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-\[background-color\,opacity\] {
        transition-property: background-color, opacity;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-\[border-color\,background-color\,box-shadow\,transform\] {
        transition-property: border-color, background-color, box-shadow, transform;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-\[border-color\,background-color\,box-shadow\] {
        transition-property: border-color, background-color, box-shadow;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-\[border-color\,box-shadow\,background-color\] {
        transition-property: border-color, box-shadow, background-color;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-\[border-color\,box-shadow\] {
        transition-property: border-color, box-shadow;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-\[color\,text-decoration-color\] {
        transition-property: color, text-decoration-color;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-\[stroke-dashoffset\] {
        transition-property: stroke-dashoffset;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-\[transform\,color\,background-color\] {
        transition-property: transform, color, background-color;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-\[transform\,width\,opacity\] {
        transition-property: transform, width, opacity;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-all {
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-colors {
        transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-opacity {
        transition-property: opacity;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-transform {
        transition-property: transform, translate, scale, rotate;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-none {
        transition-property: none
    }

    .duration-200 {
        --tw-duration: .2s;
        transition-duration: .2s
    }

    .duration-300 {
        --tw-duration: .3s;
        transition-duration: .3s
    }

    .duration-\[var\(--duration-base\)\] {
        --tw-duration: var(--duration-base);
        transition-duration: var(--duration-base)
    }

    .duration-\[var\(--duration-fast\)\] {
        --tw-duration: var(--duration-fast);
        transition-duration: var(--duration-fast)
    }

    .duration-\[var\(--duration-slow\)\] {
        --tw-duration: var(--duration-slow);
        transition-duration: var(--duration-slow)
    }

    .ease-\[cubic-bezier\(0\.16\,1\,0\.3\,1\)\] {
        --tw-ease: cubic-bezier(.16, 1, .3, 1);
        transition-timing-function: cubic-bezier(.16, 1, .3, 1)
    }

    .ease-\[var\(--ease-out\)\] {
        --tw-ease: var(--ease-out);
        transition-timing-function: var(--ease-out)
    }

    .ease-\[var\(--ease-standard\)\] {
        --tw-ease: var(--ease-standard);
        transition-timing-function: var(--ease-standard)
    }

    .ease-in-out {
        --tw-ease: var(--ease-in-out);
        transition-timing-function: var(--ease-in-out)
    }

    .ease-out {
        --tw-ease: var(--ease-out);
        transition-timing-function: var(--ease-out)
    }

    .fade-in-0 {
        --tw-enter-opacity: 0
    }

    .outline-dashed {
        --tw-outline-style: dashed;
        outline-style: dashed
    }

    .outline-none {
        --tw-outline-style: none;
        outline-style: none
    }

    .repeat-1 {
        --tw-animation-iteration-count: 1;
        animation-iteration-count: 1
    }

    .repeat-2 {
        --tw-animation-iteration-count: 2;
        animation-iteration-count: 2
    }

    .select-all {
        -webkit-user-select: all;
        user-select: all
    }

    .select-none {
        -webkit-user-select: none;
        user-select: none
    }

    .zoom-in-95 {
        --tw-enter-scale: .95
    }

    .\!running {
        animation-play-state: running !important
    }

    .\[--radius-lg\:12px\] {
        --radius-lg: 12px
    }

    .\[--radius-md\:10px\] {
        --radius-md: 10px
    }

    .\[--radius-pill\:4px\] {
        --radius-pill: 4px
    }

    .\[--radius-sm\:4px\] {
        --radius-sm: 4px
    }

    .\[-ms-overflow-style\:none\] {
        -ms-overflow-style: none
    }

    .\[transition\:background-color_var\(--duration-fast\)_var\(--ease-standard\)\,transform_var\(--duration-fast\)_var\(--ease-standard\)\,border-color_var\(--duration-fast\)_var\(--ease-standard\)\,box-shadow_var\(--duration-base\)_var\(--ease-out\)\] {
        transition: background-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-base) var(--ease-out)
    }

    .\[writing-mode\:vertical-rl\] {
        writing-mode: vertical-rl
    }

    .block-0 {
        block-size: calc(var(--spacing) * 0)
    }

    .block-1 {
        block-size: calc(var(--spacing) * 1)
    }

    .block-2 {
        block-size: calc(var(--spacing) * 2)
    }

    .fade-out {
        --tw-exit-opacity: 0
    }

    .paused {
        animation-play-state: paused
    }

    .perspective-distant {
        perspective: var(--perspective-distant)
    }

    .perspective-near {
        perspective: var(--perspective-near)
    }

    .running {
        animation-play-state: running
    }

    .zoom-in {
        --tw-enter-scale: 0
    }

    .zoom-out {
        --tw-exit-scale: 0
    }

    @media(hover:hover) {
        .group-hover\:border-\[var\(--color-orange\,\#e69333\)\]:is(:where(.group):hover *) {
            border-color: var(--color-orange, #e69333)
        }

        .group-hover\:bg-\[var\(--bg-canvas\)\]:is(:where(.group):hover *) {
            background-color: var(--bg-canvas)
        }

        .group-hover\:bg-\[var\(--bg-surface\)\]:is(:where(.group):hover *) {
            background-color: var(--bg-surface)
        }

        .group-hover\:bg-\[var\(--color-theme\)\]:is(:where(.group):hover *) {
            background-color: var(--color-theme)
        }

        .group-hover\:text-\[var\(--primary-text\)\]:is(:where(.group):hover *) {
            color: var(--primary-text)
        }

        .group-hover\:text-\[var\(--text-primary\)\]:is(:where(.group):hover *) {
            color: var(--text-primary)
        }

        .group-hover\:opacity-10:is(:where(.group):hover *) {
            opacity: .1
        }

        .group-hover\:opacity-100:is(:where(.group):hover *),
        .group-hover\/cmp\:opacity-100:is(:where(.group\/cmp):hover *),
        .group-hover\/drop\:opacity-100:is(:where(.group\/drop):hover *) {
            opacity: 1
        }

        .group-hover\/hc\:opacity-20:is(:where(.group\/hc):hover *) {
            opacity: .2
        }

        .group-hover\/hc\:opacity-100:is(:where(.group\/hc):hover *) {
            opacity: 1
        }
    }

    .group-focus-visible\:bg-\[var\(--bg-surface\)\]:is(:where(.group):focus-visible *) {
        background-color: var(--bg-surface)
    }

    .group-data-\[state\=checked\]\:opacity-0:is(:where(.group)[data-state=checked] *) {
        opacity: 0
    }

    .group-data-\[state\=checked\]\:opacity-100:is(:where(.group)[data-state=checked] *) {
        opacity: 1
    }

    .group-data-\[state\=closed\]\/financing-options\:flex:is(:where(.group\/financing-options)[data-state=closed] *),
    .group-data-\[state\=closed\]\/pricing-configuration\:flex:is(:where(.group\/pricing-configuration)[data-state=closed] *) {
        display: flex
    }

    .group-data-\[state\=open\]\:rotate-180:is(:where(.group)[data-state=open] *) {
        rotate: 180deg
    }

    .peer-checked\:opacity-100:is(:where(.peer):checked~*) {
        opacity: 1
    }

    .placeholder\:\!text-\[var\(--text-muted\)\]::placeholder {
        color: var(--text-muted) !important
    }

    .placeholder\:text-\[var\(--text-muted\)\]::placeholder {
        color: var(--text-muted)
    }

    .placeholder\:text-muted-foreground::placeholder {
        color: var(--muted-foreground)
    }

    .before\:mr-2:before {
        content: var(--tw-content);
        margin-right: calc(var(--spacing) * 2)
    }

    .before\:text-xl:before {
        content: var(--tw-content);
        font-size: var(--text-xl);
        line-height: var(--tw-leading, var(--text-xl--line-height))
    }

    .before\:leading-none:before {
        content: var(--tw-content);
        --tw-leading: 1;
        line-height: 1
    }

    .before\:font-normal:before {
        content: var(--tw-content);
        --tw-font-weight: var(--font-weight-normal);
        font-weight: var(--font-weight-normal)
    }

    .before\:content-\[\'\+\'\]:before {
        --tw-content: "+";
        content: var(--tw-content)
    }

    .last\:mb-0:last-child {
        margin-bottom: calc(var(--spacing) * 0)
    }

    .last\:border-b-0:last-child {
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 0
    }

    .odd\:bg-white\/\[0\.03\]:nth-child(odd) {
        background-color: #ffffff08
    }

    @supports (color:color-mix(in lab, red, red)) {
        .odd\:bg-white\/\[0\.03\]:nth-child(odd) {
            background-color: color-mix(in oklab, var(--color-white) 3%, transparent)
        }
    }

    .odd\:bg-white\/\[0\.025\]:nth-child(odd) {
        background-color: #ffffff06
    }

    @supports (color:color-mix(in lab, red, red)) {
        .odd\:bg-white\/\[0\.025\]:nth-child(odd) {
            background-color: color-mix(in oklab, var(--color-white) 2.5%, transparent)
        }
    }

    .checked\:border-\[var\(--bg-brand\)\]:checked {
        border-color: var(--bg-brand)
    }

    .checked\:border-\[var\(--primary\)\]:checked {
        border-color: var(--primary)
    }

    .checked\:bg-\[var\(--bg-brand\)\]:checked {
        background-color: var(--bg-brand)
    }

    .empty\:hidden:empty {
        display: none
    }

    .focus-within\:border-\[color\:var\(--border-focus\)\]:focus-within,
    .focus-within\:border-\[var\(--border-focus\)\]:focus-within {
        border-color: var(--border-focus)
    }

    .focus-within\:border-\[var\(--color-theme\)\]:focus-within {
        border-color: var(--color-theme)
    }

    .focus-within\:shadow-\[var\(--focus-ring\)\]:focus-within {
        --tw-shadow: var(--focus-ring);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .focus-within\:outline:focus-within {
        outline-style: var(--tw-outline-style);
        outline-width: 1px
    }

    .focus-within\:outline-2:focus-within {
        outline-style: var(--tw-outline-style);
        outline-width: 2px
    }

    .focus-within\:outline-\[var\(--sup-accent\)\]:focus-within {
        outline-color: var(--sup-accent)
    }

    @media(hover:hover) {
        .hover\:cursor-pointer:hover {
            cursor: pointer
        }

        .hover\:\!border-\[var\(--bg-brand-hover\)\]:hover {
            border-color: var(--bg-brand-hover) !important
        }

        .hover\:\!border-\[var\(--border-strong\)\]:hover {
            border-color: var(--border-strong) !important
        }

        .hover\:border-\[color\:var\(--bg-brand-hover\)\]:hover {
            border-color: var(--bg-brand-hover)
        }

        .hover\:border-\[color\:var\(--border-focus\)\]:hover {
            border-color: var(--border-focus)
        }

        .hover\:border-\[color\:var\(--border-strong\)\]:hover {
            border-color: var(--border-strong)
        }

        .hover\:border-\[color\:var\(--color-danger-600\)\]:hover {
            border-color: var(--color-danger-600)
        }

        .hover\:border-\[var\(--bg-brand-hover\)\]:hover {
            border-color: var(--bg-brand-hover)
        }

        .hover\:border-\[var\(--border-default\)\]:hover {
            border-color: var(--border-default)
        }

        .hover\:border-\[var\(--border-focus\)\]:hover {
            border-color: var(--border-focus)
        }

        .hover\:border-\[var\(--border-primary-color\)\]:hover {
            border-color: var(--border-primary-color)
        }

        .hover\:border-\[var\(--border-strong\)\]:hover {
            border-color: var(--border-strong)
        }

        .hover\:border-\[var\(--border-subtle\)\]:hover {
            border-color: var(--border-subtle)
        }

        .hover\:border-\[var\(--color-orange\,\#e69333\)\]:hover {
            border-color: var(--color-orange, #e69333)
        }

        .hover\:border-\[var\(--color-pink\,\#ff7b9c\)\]:hover {
            border-color: var(--color-pink, #ff7b9c)
        }

        .hover\:border-\[var\(--color-theme\)\]:hover {
            border-color: var(--color-theme)
        }

        .hover\:border-\[var\(--primary\)\]:hover {
            border-color: var(--primary)
        }

        .hover\:border-\[var\(--sup-border-strong\)\]:hover {
            border-color: var(--sup-border-strong)
        }

        .hover\:border-blue-500:hover {
            border-color: var(--color-blue-500)
        }

        .hover\:border-white:hover {
            border-color: var(--color-white)
        }

        .hover\:\!bg-\[var\(--bg-brand-hover\)\]:hover {
            background-color: var(--bg-brand-hover) !important
        }

        .hover\:\!bg-\[var\(--bg-surface\)\]:hover {
            background-color: var(--bg-surface) !important
        }

        .hover\:bg-\[\#f1f3f5\]:hover {
            background-color: #f1f3f5
        }

        .hover\:bg-\[transparent\]:hover {
            background-color: #0000
        }

        .hover\:bg-\[var\(--background-hover\)\]:hover {
            background-color: var(--background-hover)
        }

        .hover\:bg-\[var\(--background-secondary\)\]:hover {
            background-color: var(--background-secondary)
        }

        .hover\:bg-\[var\(--bg-brand\)\]:hover {
            background-color: var(--bg-brand)
        }

        .hover\:bg-\[var\(--bg-brand-hover\)\]:hover {
            background-color: var(--bg-brand-hover)
        }

        .hover\:bg-\[var\(--bg-brand-subtle\)\]:hover {
            background-color: var(--bg-brand-subtle)
        }

        .hover\:bg-\[var\(--bg-canvas\)\]:hover {
            background-color: var(--bg-canvas)
        }

        .hover\:bg-\[var\(--bg-surface\)\]:hover {
            background-color: var(--bg-surface)
        }

        .hover\:bg-\[var\(--bg-surface-2\)\]:hover {
            background-color: var(--bg-surface-2)
        }

        .hover\:bg-\[var\(--card-bg\)\]:hover {
            background-color: var(--card-bg)
        }

        .hover\:bg-\[var\(--color-danger-600\)\]:hover {
            background-color: var(--color-danger-600)
        }

        .hover\:bg-\[var\(--color-theme\)\]\/10:hover {
            background-color: var(--color-theme)
        }

        @supports (color:color-mix(in lab, red, red)) {
            .hover\:bg-\[var\(--color-theme\)\]\/10:hover {
                background-color: color-mix(in oklab, var(--color-theme) 10%, transparent)
            }
        }

        .hover\:bg-\[var\(--color-white-smoke\)\]:hover {
            background-color: var(--color-white-smoke)
        }

        .hover\:bg-\[var\(--header-bg\)\]:hover {
            background-color: var(--header-bg)
        }

        .hover\:bg-\[var\(--light-bg\)\]:hover {
            background-color: var(--light-bg)
        }

        .hover\:bg-\[var\(--primary-hover\)\]:hover {
            background-color: var(--primary-hover)
        }

        .hover\:bg-\[var\(--sup-surface-2\)\]:hover {
            background-color: var(--sup-surface-2)
        }

        .hover\:bg-\[var\(--sup-surface-2\,var\(--background-tertiary\)\)\]:hover {
            background-color: var(--sup-surface-2, var(--background-tertiary))
        }

        .hover\:bg-\[var\(--sup-surface-3\)\]:hover {
            background-color: var(--sup-surface-3)
        }

        .hover\:bg-black\/\[0\.04\]:hover {
            background-color: #0000000a
        }

        @supports (color:color-mix(in lab, red, red)) {
            .hover\:bg-black\/\[0\.04\]:hover {
                background-color: color-mix(in oklab, var(--color-black) 4%, transparent)
            }
        }

        .hover\:bg-blue-50:hover {
            background-color: var(--color-blue-50)
        }

        .hover\:bg-transparent:hover {
            background-color: #0000
        }

        .hover\:bg-white:hover {
            background-color: var(--color-white)
        }

        .hover\:bg-white\/5:hover {
            background-color: #ffffff0d
        }

        @supports (color:color-mix(in lab, red, red)) {
            .hover\:bg-white\/5:hover {
                background-color: color-mix(in oklab, var(--color-white) 5%, transparent)
            }
        }

        .hover\:bg-white\/75:hover {
            background-color: #ffffffbf
        }

        @supports (color:color-mix(in lab, red, red)) {
            .hover\:bg-white\/75:hover {
                background-color: color-mix(in oklab, var(--color-white) 75%, transparent)
            }
        }

        .hover\:bg-white\/\[0\.05\]:hover {
            background-color: #ffffff0d
        }

        @supports (color:color-mix(in lab, red, red)) {
            .hover\:bg-white\/\[0\.05\]:hover {
                background-color: color-mix(in oklab, var(--color-white) 5%, transparent)
            }
        }

        .hover\:bg-white\/\[0\.06\]:hover {
            background-color: #ffffff0f
        }

        @supports (color:color-mix(in lab, red, red)) {
            .hover\:bg-white\/\[0\.06\]:hover {
                background-color: color-mix(in oklab, var(--color-white) 6%, transparent)
            }
        }

        .hover\:\!text-\[var\(--text-primary\)\]:hover {
            color: var(--text-primary) !important
        }

        .hover\:text-\[var\(--color-destructive\,\#dc2626\)\]:hover {
            color: var(--color-destructive, #dc2626)
        }

        .hover\:text-\[var\(--color-theme\)\]:hover {
            color: var(--color-theme)
        }

        .hover\:text-\[var\(--icon-brand\)\]:hover {
            color: var(--icon-brand)
        }

        .hover\:text-\[var\(--primary\)\]:hover {
            color: var(--primary)
        }

        .hover\:text-\[var\(--primary-text\)\]:hover {
            color: var(--primary-text)
        }

        .hover\:text-\[var\(--report-text\)\]:hover {
            color: var(--report-text)
        }

        .hover\:text-\[var\(--sup-text\,var\(--primary-text\)\)\]:hover {
            color: var(--sup-text, var(--primary-text))
        }

        .hover\:text-\[var\(--text-brand\)\]:hover {
            color: var(--text-brand)
        }

        .hover\:text-\[var\(--text-danger\)\]:hover {
            color: var(--text-danger)
        }

        .hover\:text-\[var\(--text-primary\)\]:hover {
            color: var(--text-primary)
        }

        .hover\:text-destructive\/80:hover {
            color: var(--destructive)
        }

        @supports (color:color-mix(in lab, red, red)) {
            .hover\:text-destructive\/80:hover {
                color: color-mix(in oklab, var(--destructive) 80%, transparent)
            }
        }

        .hover\:text-white:hover {
            color: var(--color-white)
        }

        .hover\:text-zinc-300:hover {
            color: var(--color-zinc-300)
        }

        .hover\:no-underline:hover {
            text-decoration-line: none
        }

        .hover\:underline:hover {
            text-decoration-line: underline
        }

        .hover\:decoration-current:hover {
            text-decoration-color: currentColor
        }

        .hover\:opacity-90:hover {
            opacity: .9
        }

        .hover\:opacity-100:hover {
            opacity: 1
        }

        .hover\:shadow-\[0_0_0_4px_var\(--brand-glow-halo\)\,0_6px_18px_var\(--brand-glow-shadow\)\]:hover {
            --tw-shadow: 0 0 0 4px var(--tw-shadow-color, var(--brand-glow-halo)), 0 6px 18px var(--tw-shadow-color, var(--brand-glow-shadow));
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
        }

        .hover\:shadow-\[0_0_0_4px_var\(--danger-halo\)\,0_6px_18px_var\(--danger-halo\)\]:hover {
            --tw-shadow: 0 0 0 4px var(--tw-shadow-color, var(--danger-halo)), 0 6px 18px var(--tw-shadow-color, var(--danger-halo));
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
        }

        .hover\:ring-2:hover {
            --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
        }

        .hover\:ring-4:hover {
            --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
        }

        .hover\:ring-\[var\(--brand-glow-halo\)\]:hover {
            --tw-ring-color: var(--brand-glow-halo)
        }

        .hover\:outline:hover,
        .hover\:outline-1:hover {
            outline-style: var(--tw-outline-style);
            outline-width: 1px
        }

        .hover\:outline-dashed:hover {
            --tw-outline-style: dashed;
            outline-style: dashed
        }

        .hover\:ring-inset:hover {
            --tw-ring-inset: inset
        }
    }

    .focus\:border-none:focus {
        --tw-border-style: none;
        border-style: none
    }

    .focus\:border-solid:focus {
        --tw-border-style: solid;
        border-style: solid
    }

    .focus\:\!border-\[var\(--border-focus\)\]:focus {
        border-color: var(--border-focus) !important
    }

    .focus\:\!border-\[var\(--border-strong\)\]:focus {
        border-color: var(--border-strong) !important
    }

    .focus\:border-\[var\(--border-focus\)\]:focus {
        border-color: var(--border-focus)
    }

    .focus\:border-\[var\(--color-pink\,\#ff7b9c\)\]:focus {
        border-color: var(--color-pink, #ff7b9c)
    }

    .focus\:border-\[var\(--color-theme\)\]:focus {
        border-color: var(--color-theme)
    }

    .focus\:border-\[var\(--primary\)\]:focus {
        border-color: var(--primary)
    }

    .focus\:border-\[var\(--sup-accent\)\]:focus {
        border-color: var(--sup-accent)
    }

    .focus\:\!bg-\[var\(--bg-surface\)\]:focus {
        background-color: var(--bg-surface) !important
    }

    .focus\:bg-\[var\(--background-secondary\)\]:focus {
        background-color: var(--background-secondary)
    }

    .focus\:bg-\[var\(--bg-surface\)\]:focus {
        background-color: var(--bg-surface)
    }

    .focus\:bg-accent:focus {
        background-color: var(--accent)
    }

    .focus\:text-accent-foreground:focus {
        color: var(--accent-foreground)
    }

    .focus\:\!ring-0:focus {
        --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important
    }

    .focus\:ring-0:focus {
        --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .focus\:ring-1:focus {
        --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .focus\:ring-2:focus {
        --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .focus\:ring-\[3px\]:focus {
        --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .focus\:ring-\[var\(--focus-halo\)\]:focus {
        --tw-ring-color: var(--focus-halo)
    }

    .focus\:ring-ring:focus {
        --tw-ring-color: var(--ring)
    }

    .focus\:ring-offset-2:focus {
        --tw-ring-offset-width: 2px;
        --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)
    }

    .focus\:outline-none:focus {
        --tw-outline-style: none;
        outline-style: none
    }

    .focus-visible\:z-10:focus-visible {
        z-index: 10
    }

    .focus-visible\:z-20:focus-visible {
        z-index: 20
    }

    .focus-visible\:z-\[1\]:focus-visible {
        z-index: 1
    }

    .focus-visible\:rounded-\[var\(--radius-xs\)\]:focus-visible {
        border-radius: var(--radius-xs)
    }

    .focus-visible\:border-ring:focus-visible {
        border-color: var(--ring)
    }

    .focus-visible\:\!shadow-\[var\(--focus-ring\)\]:focus-visible {
        --tw-shadow: var(--focus-ring) !important;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important
    }

    .focus-visible\:\!shadow-\[var\(--focus-ring-inset\)\]:focus-visible {
        --tw-shadow: var(--focus-ring-inset) !important;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important
    }

    .focus-visible\:\!shadow-none:focus-visible {
        --tw-shadow: 0 0 #0000 !important;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important
    }

    .focus-visible\:shadow-\[inset_0_0_0_2px_var\(--sup-accent\)\]:focus-visible {
        --tw-shadow: inset 0 0 0 2px var(--tw-shadow-color, var(--sup-accent));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .focus-visible\:shadow-\[var\(--focus-ring\)\,0_0_0_4px_var\(--danger-halo\)\]:focus-visible {
        --tw-shadow: var(--focus-ring), 0 0 0 4px var(--tw-shadow-color, var(--danger-halo));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .focus-visible\:shadow-\[var\(--focus-ring\)\,0_6px_18px_var\(--brand-glow-shadow\)\]:focus-visible {
        --tw-shadow: var(--focus-ring), 0 6px 18px var(--tw-shadow-color, var(--brand-glow-shadow));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .focus-visible\:shadow-\[var\(--focus-ring\)\]:focus-visible {
        --tw-shadow: var(--focus-ring);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .focus-visible\:shadow-\[var\(--focus-ring-inset\)\]:focus-visible {
        --tw-shadow: var(--focus-ring-inset);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .focus-visible\:ring-2:focus-visible {
        --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .focus-visible\:ring-\[3px\]:focus-visible {
        --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .focus-visible\:ring-\[var\(--border-focus\)\]:focus-visible {
        --tw-ring-color: var(--border-focus)
    }

    .focus-visible\:ring-\[var\(--focus-halo\)\]:focus-visible {
        --tw-ring-color: var(--focus-halo)
    }

    .focus-visible\:ring-ring\/50:focus-visible {
        --tw-ring-color: var(--ring)
    }

    @supports (color:color-mix(in lab, red, red)) {
        .focus-visible\:ring-ring\/50:focus-visible {
            --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent)
        }
    }

    .focus-visible\:ring-white:focus-visible {
        --tw-ring-color: var(--color-white)
    }

    .focus-visible\:ring-offset-2:focus-visible {
        --tw-ring-offset-width: 2px;
        --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)
    }

    .focus-visible\:ring-offset-\[var\(--bg-canvas\)\]:focus-visible {
        --tw-ring-offset-color: var(--bg-canvas)
    }

    .focus-visible\:ring-offset-transparent:focus-visible {
        --tw-ring-offset-color: transparent
    }

    .focus-visible\:outline:focus-visible {
        outline-style: var(--tw-outline-style);
        outline-width: 1px
    }

    .focus-visible\:outline-2:focus-visible {
        outline-style: var(--tw-outline-style);
        outline-width: 2px
    }

    .focus-visible\:outline-offset-2:focus-visible {
        outline-offset: 2px
    }

    .focus-visible\:outline-\[var\(--sup-accent\)\]:focus-visible {
        outline-color: var(--sup-accent)
    }

    .focus-visible\:\!outline-none:focus-visible {
        --tw-outline-style: none !important;
        outline-style: none !important
    }

    .focus-visible\:outline-none:focus-visible {
        --tw-outline-style: none;
        outline-style: none
    }

    .active\:scale-\[0\.97\]:active {
        scale: .97
    }

    .active\:cursor-grabbing:active {
        cursor: grabbing
    }

    .active\:border-\[color\:var\(--bg-brand-active\)\]:active {
        border-color: var(--bg-brand-active)
    }

    .active\:border-\[color\:var\(--color-danger-600\)\]:active {
        border-color: var(--color-danger-600)
    }

    .active\:border-\[var\(--bg-brand-active\)\]:active {
        border-color: var(--bg-brand-active)
    }

    .active\:bg-\[var\(--bg-brand-active\)\]:active {
        background-color: var(--bg-brand-active)
    }

    .active\:bg-\[var\(--bg-brand-subtle\)\]:active {
        background-color: var(--bg-brand-subtle)
    }

    .active\:bg-\[var\(--bg-surface-2\)\]:active {
        background-color: var(--bg-surface-2)
    }

    .active\:bg-\[var\(--color-danger-600\)\]:active {
        background-color: var(--color-danger-600)
    }

    .active\:shadow-\[0_0_0_3px_var\(--brand-glow-halo\)\,0_4px_12px_var\(--brand-glow-shadow\)\]:active {
        --tw-shadow: 0 0 0 3px var(--tw-shadow-color, var(--brand-glow-halo)), 0 4px 12px var(--tw-shadow-color, var(--brand-glow-shadow));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    @media(hover:hover) {
        .enabled\:hover\:border-\[var\(--border-strong\)\]:enabled:hover {
            border-color: var(--border-strong)
        }

        .enabled\:hover\:bg-\[var\(--bg-surface-2\)\]:enabled:hover {
            background-color: var(--bg-surface-2)
        }

        .enabled\:hover\:text-\[var\(--primary-text\)\]:enabled:hover {
            color: var(--primary-text)
        }
    }

    .disabled\:pointer-events-none:disabled {
        pointer-events: none
    }

    .disabled\:cursor-not-allowed:disabled {
        cursor: not-allowed
    }

    .disabled\:border-\[var\(--border-subtle\)\]:disabled {
        border-color: var(--border-subtle)
    }

    .disabled\:border-\[var\(--sup-border\)\]:disabled {
        border-color: var(--sup-border)
    }

    .disabled\:bg-\[var\(--bg-muted\)\]:disabled {
        background-color: var(--bg-muted)
    }

    .disabled\:bg-\[var\(--bg-surface-2\)\]:disabled {
        background-color: var(--bg-surface-2)
    }

    .disabled\:text-\[var\(--secondary-text\)\]:disabled {
        color: var(--secondary-text)
    }

    .disabled\:text-\[var\(--sup-text-faint\)\]:disabled {
        color: var(--sup-text-faint)
    }

    .disabled\:text-\[var\(--text-disabled\)\]:disabled {
        color: var(--text-disabled)
    }

    .disabled\:text-\[var\(--text-muted\)\]:disabled {
        color: var(--text-muted)
    }

    .disabled\:text-\[var\(--text-primary\)\]:disabled {
        color: var(--text-primary)
    }

    .disabled\:opacity-30:disabled {
        opacity: .3
    }

    .disabled\:opacity-40:disabled {
        opacity: .4
    }

    .disabled\:opacity-50:disabled {
        opacity: .5
    }

    .disabled\:opacity-60:disabled {
        opacity: .6
    }

    .disabled\:shadow-none:disabled {
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    @media(hover:hover) {
        .disabled\:hover\:bg-transparent:disabled:hover {
            background-color: #0000
        }

        .disabled\:hover\:text-\[var\(--secondary-text\)\]:disabled:hover {
            color: var(--secondary-text)
        }
    }

    .disabled\:active\:scale-100:disabled:active {
        --tw-scale-x: 100%;
        --tw-scale-y: 100%;
        --tw-scale-z: 100%;
        scale: var(--tw-scale-x) var(--tw-scale-y)
    }

    .has-\[\:checked\]\:border-\[var\(--border-focus\)\]:has(:checked) {
        border-color: var(--border-focus)
    }

    .has-\[\:checked\]\:bg-\[var\(--bg-surface\)\]:has(:checked) {
        background-color: var(--bg-surface)
    }

    .aria-checked\:font-medium[aria-checked=true] {
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium)
    }

    .aria-checked\:text-\[var\(--text-brand\)\][aria-checked=true] {
        color: var(--text-brand)
    }

    .aria-disabled\:cursor-not-allowed[aria-disabled=true] {
        cursor: not-allowed
    }

    .aria-disabled\:border-\[var\(--border-subtle\)\][aria-disabled=true] {
        border-color: var(--border-subtle)
    }

    .aria-disabled\:bg-\[var\(--bg-surface-2\)\][aria-disabled=true] {
        background-color: var(--bg-surface-2)
    }

    .aria-disabled\:text-\[var\(--text-muted\)\][aria-disabled=true] {
        color: var(--text-muted)
    }

    .aria-disabled\:opacity-50[aria-disabled=true] {
        opacity: .5
    }

    .aria-disabled\:shadow-none[aria-disabled=true] {
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .aria-disabled\:active\:scale-100[aria-disabled=true]:active {
        --tw-scale-x: 100%;
        --tw-scale-y: 100%;
        --tw-scale-z: 100%;
        scale: var(--tw-scale-x) var(--tw-scale-y)
    }

    .aria-invalid\:border-\[var\(--border-danger\)\][aria-invalid=true] {
        border-color: var(--border-danger)
    }

    .aria-invalid\:ring-\[3px\][aria-invalid=true] {
        --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .aria-invalid\:ring-\[var\(--danger-halo\)\][aria-invalid=true] {
        --tw-ring-color: var(--danger-halo)
    }

    .data-\[checked\]\:border-\[var\(--bg-brand\)\][data-checked] {
        border-color: var(--bg-brand)
    }

    .data-\[checked\]\:bg-\[var\(--bg-brand\)\][data-checked] {
        background-color: var(--bg-brand)
    }

    .data-\[checked\]\:text-white[data-checked] {
        color: var(--color-white)
    }

    .data-\[disabled\]\:pointer-events-none[data-disabled] {
        pointer-events: none
    }

    .data-\[disabled\]\:opacity-50[data-disabled] {
        opacity: .5
    }

    .data-\[disabled\=true\]\:pointer-events-none[data-disabled=true] {
        pointer-events: none
    }

    .data-\[disabled\=true\]\:opacity-50[data-disabled=true] {
        opacity: .5
    }

    .data-\[highlighted\]\:bg-\[var\(--bg-surface\)\][data-highlighted] {
        background-color: var(--bg-surface)
    }

    .data-\[inset\]\:pl-8[data-inset] {
        padding-left: calc(var(--spacing) * 8)
    }

    .data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
        color: var(--muted-foreground)
    }

    .data-\[selected\=true\]\:bg-accent[data-selected=true] {
        background-color: var(--accent)
    }

    .data-\[selected\=true\]\:text-accent-foreground[data-selected=true] {
        color: var(--accent-foreground)
    }

    .data-\[side\=bottom\]\:translate-y-1[data-side=bottom] {
        --tw-translate-y: calc(var(--spacing) * 1);
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .data-\[side\=bottom\]\:slide-in-from-top-2[data-side=bottom] {
        --tw-enter-translate-y: calc(2*var(--spacing)*-1)
    }

    .data-\[side\=left\]\:-translate-x-1[data-side=left] {
        --tw-translate-x: calc(var(--spacing) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .data-\[side\=left\]\:slide-in-from-right-2[data-side=left] {
        --tw-enter-translate-x: calc(2*var(--spacing))
    }

    .data-\[side\=right\]\:translate-x-1[data-side=right] {
        --tw-translate-x: calc(var(--spacing) * 1);
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .data-\[side\=right\]\:slide-in-from-left-2[data-side=right] {
        --tw-enter-translate-x: calc(2*var(--spacing)*-1)
    }

    .data-\[side\=top\]\:-translate-y-1[data-side=top] {
        --tw-translate-y: calc(var(--spacing) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top] {
        --tw-enter-translate-y: calc(2*var(--spacing))
    }

    .data-\[state\=checked\]\:translate-x-5[data-state=checked] {
        --tw-translate-x: calc(var(--spacing) * 5);
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .data-\[state\=checked\]\:translate-x-6[data-state=checked] {
        --tw-translate-x: calc(var(--spacing) * 6);
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .data-\[state\=checked\]\:translate-x-7[data-state=checked] {
        --tw-translate-x: calc(var(--spacing) * 7);
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .data-\[state\=checked\]\:bg-\[var\(--bg-brand\)\][data-state=checked] {
        background-color: var(--bg-brand)
    }

    .data-\[state\=checked\]\:bg-\[var\(--bg-brand-subtle\)\][data-state=checked] {
        background-color: var(--bg-brand-subtle)
    }

    .data-\[state\=checked\]\:font-medium[data-state=checked] {
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium)
    }

    .data-\[state\=checked\]\:text-\[var\(--text-brand\)\][data-state=checked] {
        color: var(--text-brand)
    }

    .data-\[state\=checked\]\:focus\:bg-\[var\(--bg-brand-subtle\)\][data-state=checked]:focus {
        background-color: var(--bg-brand-subtle)
    }

    .data-\[state\=closed\]\:animate-accordion-up[data-state=closed] {
        animation: accordion-up var(--tw-animation-duration, var(--tw-duration, .2s))var(--tw-ease, ease-out)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none)
    }

    .data-\[state\=closed\]\:animate-out[data-state=closed] {
        animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none)
    }

    .data-\[state\=closed\]\:duration-300[data-state=closed] {
        --tw-duration: .3s;
        transition-duration: .3s
    }

    .data-\[state\=closed\]\:fade-out-0[data-state=closed] {
        --tw-exit-opacity: 0
    }

    .data-\[state\=closed\]\:zoom-out-95[data-state=closed] {
        --tw-exit-scale: .95
    }

    .data-\[state\=closed\]\:slide-out-to-bottom[data-state=closed] {
        --tw-exit-translate-y: 100%
    }

    .data-\[state\=closed\]\:slide-out-to-left[data-state=closed] {
        --tw-exit-translate-x: -100%
    }

    .data-\[state\=closed\]\:slide-out-to-right[data-state=closed] {
        --tw-exit-translate-x: 100%
    }

    .data-\[state\=closed\]\:slide-out-to-top[data-state=closed] {
        --tw-exit-translate-y: -100%
    }

    .data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state=closed] {
        --tw-exit-translate-y: -48%
    }

    .data-\[state\=open\]\:animate-accordion-down[data-state=open] {
        animation: accordion-down var(--tw-animation-duration, var(--tw-duration, .2s))var(--tw-ease, ease-out)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none)
    }

    .data-\[state\=open\]\:animate-in[data-state=open] {
        animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none)
    }

    .data-\[state\=open\]\:bg-accent[data-state=open] {
        background-color: var(--accent)
    }

    .data-\[state\=open\]\:bg-secondary[data-state=open] {
        background-color: var(--secondary)
    }

    .data-\[state\=open\]\:text-accent-foreground[data-state=open] {
        color: var(--accent-foreground)
    }

    .data-\[state\=open\]\:opacity-100[data-state=open] {
        opacity: 1
    }

    .data-\[state\=open\]\:duration-500[data-state=open] {
        --tw-duration: .5s;
        transition-duration: .5s
    }

    .data-\[state\=open\]\:fade-in-0[data-state=open] {
        --tw-enter-opacity: 0
    }

    .data-\[state\=open\]\:zoom-in-95[data-state=open] {
        --tw-enter-scale: .95
    }

    .data-\[state\=open\]\:slide-in-from-bottom[data-state=open] {
        --tw-enter-translate-y: 100%
    }

    .data-\[state\=open\]\:slide-in-from-left[data-state=open] {
        --tw-enter-translate-x: -100%
    }

    .data-\[state\=open\]\:slide-in-from-right[data-state=open] {
        --tw-enter-translate-x: 100%
    }

    .data-\[state\=open\]\:slide-in-from-top[data-state=open] {
        --tw-enter-translate-y: -100%
    }

    .data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state=open] {
        --tw-enter-translate-y: -48%
    }

    .data-\[state\=unchecked\]\:border-\[var\(--border-subtle\)\][data-state=unchecked] {
        border-color: var(--border-subtle)
    }

    .data-\[state\=unchecked\]\:bg-\[var\(--bg-muted\)\][data-state=unchecked] {
        background-color: var(--bg-muted)
    }

    .data-\[variant\=destructive\]\:text-\[var\(--text-danger\)\][data-variant=destructive] {
        color: var(--text-danger)
    }

    .data-\[variant\=destructive\]\:text-destructive[data-variant=destructive] {
        color: var(--destructive)
    }

    @media(hover:hover) {
        .data-\[variant\=destructive\]\:hover\:bg-\[var\(--bg-surface\)\][data-variant=destructive]:hover {
            background-color: var(--bg-surface)
        }
    }

    .data-\[variant\=destructive\]\:focus\:bg-\[var\(--bg-surface\)\][data-variant=destructive]:focus {
        background-color: var(--bg-surface)
    }

    .data-\[variant\=destructive\]\:focus\:bg-destructive\/10[data-variant=destructive]:focus {
        background-color: var(--destructive)
    }

    @supports (color:color-mix(in lab, red, red)) {
        .data-\[variant\=destructive\]\:focus\:bg-destructive\/10[data-variant=destructive]:focus {
            background-color: color-mix(in oklab, var(--destructive) 10%, transparent)
        }
    }

    .data-\[variant\=destructive\]\:focus\:text-destructive[data-variant=destructive]:focus {
        color: var(--destructive)
    }

    @media(prefers-reduced-motion:reduce) {
        .motion-reduce\:hidden {
            display: none
        }

        .motion-reduce\:animate-none {
            animation: none
        }

        .motion-reduce\:transition-none {
            transition-property: none
        }

        .motion-reduce\:duration-0 {
            --tw-duration: 0s;
            transition-duration: 0s
        }

        .motion-reduce\:data-\[state\=closed\]\:zoom-out-100[data-state=closed] {
            --tw-exit-scale: 1
        }

        .motion-reduce\:data-\[state\=open\]\:zoom-in-100[data-state=open] {
            --tw-enter-scale: 1
        }
    }

    @media not all and (min-width:1024px) {
        .max-\[1024px\]\:\[container-type\:normal\] {
            container-type: normal
        }

        .max-\[1024px\]\:fixed {
            position: fixed
        }

        .max-\[1024px\]\:static {
            position: static
        }

        .max-\[1024px\]\:inset-x-0 {
            inset-inline: calc(var(--spacing) * 0)
        }

        .max-\[1024px\]\:bottom-0 {
            bottom: calc(var(--spacing) * 0)
        }

        .max-\[1024px\]\:z-\[160\] {
            z-index: 160
        }

        .max-\[1024px\]\:order-0 {
            order: 0
        }

        .max-\[1024px\]\:order-1 {
            order: 1
        }

        .max-\[1024px\]\:order-2 {
            order: 2
        }

        .max-\[1024px\]\:order-3 {
            order: 3
        }

        .max-\[1024px\]\:order-4 {
            order: 4
        }

        .max-\[1024px\]\:order-5 {
            order: 5
        }

        .max-\[1024px\]\:order-6 {
            order: 6
        }

        .max-\[1024px\]\:order-7 {
            order: 7
        }

        .max-\[1024px\]\:contents {
            display: contents
        }

        .max-\[1024px\]\:flex {
            display: flex
        }

        .max-\[1024px\]\:h-auto {
            height: auto
        }

        .max-\[1024px\]\:w-auto {
            width: auto
        }

        .max-\[1024px\]\:w-full {
            width: 100%
        }

        .max-\[1024px\]\:max-w-\[min\(100\%\,calc\(100dvh_-_200px\)\)\] {
            max-width: min(100%, 100dvh - 200px)
        }

        .max-\[1024px\]\:flex-1 {
            flex: 1
        }

        .max-\[1024px\]\:flex-col {
            flex-direction: column
        }

        .max-\[1024px\]\:gap-\[var\(--space-3\)\] {
            gap: var(--space-3)
        }

        .max-\[1024px\]\:self-center {
            align-self: center
        }

        .max-\[1024px\]\:border-t {
            border-top-style: var(--tw-border-style);
            border-top-width: 1px
        }

        .max-\[1024px\]\:border-\[var\(--border-subtle\)\] {
            border-color: var(--border-subtle)
        }

        .max-\[1024px\]\:bg-\[var\(--bg-canvas\)\] {
            background-color: var(--bg-canvas)
        }

        .max-\[1024px\]\:px-\[var\(--space-6\)\] {
            padding-inline: var(--space-6)
        }

        .max-\[1024px\]\:py-\[var\(--space-4\)\] {
            padding-block: var(--space-4)
        }

        .max-\[1024px\]\:pb-\[88px\] {
            padding-bottom: 88px
        }

        .max-\[1024px\]\:shadow-\[0_-6px_20px_rgba\(15\,20\,30\,0\.06\)\] {
            --tw-shadow: 0 -6px 20px var(--tw-shadow-color, #0f141e0f);
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
        }
    }

    @media not all and (min-width:900px) {
        .max-\[900px\]\:sr-only {
            clip-path: inset(50%);
            white-space: nowrap;
            border-width: 0;
            width: 1px;
            height: 1px;
            margin: -1px;
            padding: 0;
            position: absolute;
            overflow: hidden
        }

        .max-\[900px\]\:relative {
            position: relative
        }

        .max-\[900px\]\:top-auto {
            top: auto
        }

        .max-\[900px\]\:right-0\.5 {
            right: calc(var(--spacing) * .5)
        }

        .max-\[900px\]\:bottom-\[-1px\] {
            bottom: -1px
        }

        .max-\[900px\]\:left-0\.5 {
            left: calc(var(--spacing) * .5)
        }

        .max-\[900px\]\:mb-0 {
            margin-bottom: calc(var(--spacing) * 0)
        }

        .max-\[900px\]\:flex {
            display: flex
        }

        .max-\[900px\]\:h-0\.5 {
            height: calc(var(--spacing) * .5)
        }

        .max-\[900px\]\:min-h-11 {
            min-height: calc(var(--spacing) * 11)
        }

        .max-\[900px\]\:w-auto {
            width: auto
        }

        .max-\[900px\]\:w-full {
            width: 100%
        }

        .max-\[900px\]\:min-w-0 {
            min-width: calc(var(--spacing) * 0)
        }

        .max-\[900px\]\:shrink-0 {
            flex-shrink: 0
        }

        .max-\[900px\]\:flex-col {
            flex-direction: column
        }

        .max-\[900px\]\:flex-row {
            flex-direction: row
        }

        .max-\[900px\]\:items-stretch {
            align-items: stretch
        }

        .max-\[900px\]\:gap-\[var\(--space-6\)\] {
            gap: var(--space-6)
        }

        .max-\[900px\]\:self-stretch {
            align-self: stretch
        }

        .max-\[900px\]\:overflow-x-auto {
            overflow-x: auto
        }

        .max-\[900px\]\:overflow-x-hidden {
            overflow-x: hidden
        }

        .max-\[900px\]\:overflow-y-hidden {
            overflow-y: hidden
        }

        .max-\[900px\]\:border-r-0 {
            border-right-style: var(--tw-border-style);
            border-right-width: 0
        }

        .max-\[900px\]\:border-b {
            border-bottom-style: var(--tw-border-style);
            border-bottom-width: 1px
        }

        .max-\[900px\]\:px-\[var\(--space-8\)\] {
            padding-inline: var(--space-8)
        }

        .max-\[900px\]\:py-0 {
            padding-block: calc(var(--spacing) * 0)
        }

        .max-\[900px\]\:py-\[var\(--space-4\)\] {
            padding-block: var(--space-4)
        }

        .max-\[900px\]\:\[contain\:paint\] {
            contain: paint
        }
    }

    @media not all and (min-width:860px) {
        .max-\[860px\]\:col-span-1 {
            grid-column: span 1/span 1
        }

        .max-\[860px\]\:w-full {
            width: 100%
        }

        .max-\[860px\]\:grid-cols-1 {
            grid-template-columns: repeat(1, minmax(0, 1fr))
        }
    }

    @media not all and (min-width:720px) {
        .max-\[720px\]\:\!max-w-full {
            max-width: 100% !important
        }

        .max-\[720px\]\:\!min-w-0 {
            min-width: calc(var(--spacing) * 0) !important
        }

        .max-\[720px\]\:\!flex-\[1_1_100\%\] {
            flex: 100% !important
        }

        .max-\[720px\]\:snap-x {
            scroll-snap-type: x var(--tw-scroll-snap-strictness)
        }

        .max-\[720px\]\:snap-mandatory {
            --tw-scroll-snap-strictness: mandatory
        }

        .max-\[720px\]\:\[scrollbar-width\:none\] {
            scrollbar-width: none
        }

        .max-\[720px\]\:auto-cols-\[88\%\] {
            grid-auto-columns: 88%
        }

        .max-\[720px\]\:auto-cols-\[100\%\] {
            grid-auto-columns: 100%
        }

        .max-\[720px\]\:grid-flow-col {
            grid-auto-flow: column
        }

        .max-\[720px\]\:overflow-x-auto {
            overflow-x: auto
        }

        .max-\[720px\]\:overscroll-x-contain {
            overscroll-behavior-x: contain
        }
    }

    @media not all and (min-width:700px) {
        .max-\[700px\]\:w-full {
            width: 100%
        }

        .max-\[700px\]\:min-w-0 {
            min-width: calc(var(--spacing) * 0)
        }

        .max-\[700px\]\:flex-col {
            flex-direction: column
        }

        .max-\[700px\]\:items-stretch {
            align-items: stretch
        }
    }

    @media not all and (min-width:640px) {
        .max-\[640px\]\:sticky {
            position: sticky
        }

        .max-\[640px\]\:inset-x-0 {
            inset-inline: calc(var(--spacing) * 0)
        }

        .max-\[640px\]\:top-auto {
            top: auto
        }

        .max-\[640px\]\:bottom-0 {
            bottom: calc(var(--spacing) * 0)
        }

        .max-\[640px\]\:left-0 {
            left: calc(var(--spacing) * 0)
        }

        .max-\[640px\]\:z-20 {
            z-index: 20
        }

        .max-\[640px\]\:mr-0 {
            margin-right: calc(var(--spacing) * 0)
        }

        .max-\[640px\]\:ml-0 {
            margin-left: calc(var(--spacing) * 0)
        }

        .max-\[640px\]\:block {
            display: block
        }

        .max-\[640px\]\:flex {
            display: flex
        }

        .max-\[640px\]\:grid {
            display: grid
        }

        .max-\[640px\]\:hidden {
            display: none
        }

        .max-\[640px\]\:size-\[var\(--space-12\)\] {
            width: var(--space-12);
            height: var(--space-12)
        }

        .max-\[640px\]\:h-auto {
            height: auto
        }

        .max-\[640px\]\:max-h-\[80dvh\] {
            max-height: 80dvh
        }

        .max-\[640px\]\:w-full {
            width: 100%
        }

        .max-\[640px\]\:w-screen {
            width: 100vw
        }

        .max-\[640px\]\:max-w-none {
            max-width: none
        }

        .max-\[640px\]\:flex-1 {
            flex: 1
        }

        .max-\[640px\]\:translate-x-0 {
            --tw-translate-x: calc(var(--spacing) * 0);
            translate: var(--tw-translate-x) var(--tw-translate-y)
        }

        .max-\[640px\]\:translate-y-0 {
            --tw-translate-y: calc(var(--spacing) * 0);
            translate: var(--tw-translate-x) var(--tw-translate-y)
        }

        .max-\[640px\]\:grid-cols-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr))
        }

        .max-\[640px\]\:flex-col {
            flex-direction: column
        }

        .max-\[640px\]\:flex-nowrap {
            flex-wrap: nowrap
        }

        .max-\[640px\]\:flex-wrap {
            flex-wrap: wrap
        }

        .max-\[640px\]\:items-stretch {
            align-items: stretch
        }

        .max-\[640px\]\:justify-stretch {
            justify-content: stretch
        }

        .max-\[640px\]\:gap-\[var\(--space-4\)\] {
            gap: var(--space-4)
        }

        .max-\[640px\]\:gap-\[var\(--space-6\)\] {
            gap: var(--space-6)
        }

        .max-\[640px\]\:rounded-b-none {
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0
        }

        .max-\[640px\]\:border-b-0 {
            border-bottom-style: var(--tw-border-style);
            border-bottom-width: 0
        }

        .max-\[640px\]\:px-\[var\(--space-6\)\] {
            padding-inline: var(--space-6)
        }

        .max-\[640px\]\:py-0 {
            padding-block: calc(var(--spacing) * 0)
        }

        .max-\[640px\]\:\!pb-\[env\(safe-area-inset-bottom\,0px\)\] {
            padding-bottom: env(safe-area-inset-bottom, 0px) !important
        }

        .max-\[640px\]\:pb-\[calc\(1rem\+env\(safe-area-inset-bottom\,0px\)\)\] {
            padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px))
        }

        .max-\[640px\]\:pb-\[calc\(var\(--space-3\)\+env\(safe-area-inset-bottom\,0px\)\)\] {
            padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px))
        }

        .max-\[640px\]\:pb-\[calc\(var\(--space-8\)\+env\(safe-area-inset-bottom\,0px\)\)\] {
            padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom, 0px))
        }

        .max-\[640px\]\:pb-\[calc\(var\(--space-10\)\+env\(safe-area-inset-bottom\,0px\)\)\] {
            padding-bottom: calc(var(--space-10) + env(safe-area-inset-bottom, 0px))
        }

        .max-\[640px\]\:pb-\[var\(--space-3\)\] {
            padding-bottom: var(--space-3)
        }

        .max-\[640px\]\:text-\[length\:var\(--text-h2\)\] {
            font-size: var(--text-h2)
        }

        .max-\[640px\]\:data-\[state\=closed\]\:zoom-out-100[data-state=closed] {
            --tw-exit-scale: 1
        }

        .max-\[640px\]\:data-\[state\=closed\]\:slide-out-to-bottom[data-state=closed] {
            --tw-exit-translate-y: 100%
        }

        .max-\[640px\]\:data-\[state\=open\]\:zoom-in-100[data-state=open] {
            --tw-enter-scale: 1
        }

        .max-\[640px\]\:data-\[state\=open\]\:slide-in-from-bottom[data-state=open] {
            --tw-enter-translate-y: 100%
        }
    }

    @media not all and (min-width:560px) {
        .max-\[560px\]\:w-full {
            width: 100%
        }

        .max-\[560px\]\:flex-col {
            flex-direction: column
        }
    }

    @media not all and (min-width:540px) {
        .max-\[540px\]\:size-\[72px\] {
            width: 72px;
            height: 72px
        }

        .max-\[540px\]\:gap-\[var\(--space-6\)\] {
            gap: var(--space-6)
        }

        .max-\[540px\]\:p-\[var\(--space-4\)\] {
            padding: var(--space-4)
        }

        .max-\[540px\]\:p-\[var\(--space-6\)\] {
            padding: var(--space-6)
        }

        .max-\[540px\]\:px-\[var\(--space-8\)\] {
            padding-inline: var(--space-8)
        }

        .max-\[540px\]\:py-\[var\(--space-8\)\] {
            padding-block: var(--space-8)
        }

        .max-\[540px\]\:text-\[length\:var\(--text-h4\)\] {
            font-size: var(--text-h4)
        }
    }

    @media not all and (min-width:520px) {
        .max-\[520px\]\:ml-0 {
            margin-left: calc(var(--spacing) * 0)
        }

        .max-\[520px\]\:w-full {
            width: 100%
        }

        .max-\[520px\]\:grid-cols-1 {
            grid-template-columns: repeat(1, minmax(0, 1fr))
        }

        .max-\[520px\]\:grid-cols-\[minmax\(0\,1fr\)\] {
            grid-template-columns: minmax(0, 1fr)
        }
    }

    @media not all and (min-width:480px) {
        .max-\[480px\]\:\!w-full {
            width: 100% !important
        }

        .max-\[480px\]\:w-full {
            width: 100%
        }

        .max-\[480px\]\:flex-1 {
            flex: 1
        }

        .max-\[480px\]\:items-stretch {
            align-items: stretch
        }
    }

    @media not all and (min-width:399px) {
        .max-\[399px\]\:flex-col {
            flex-direction: column
        }

        .max-\[399px\]\:items-start {
            align-items: flex-start
        }

        .max-\[399px\]\:text-\[length\:var\(--text-h1\)\] {
            font-size: var(--text-h1)
        }
    }

    @media not all and (min-width:40rem) {
        .max-sm\:w-full {
            width: 100%
        }

        .max-sm\:grid-cols-1 {
            grid-template-columns: repeat(1, minmax(0, 1fr))
        }

        .max-sm\:flex-col {
            flex-direction: column
        }

        .max-sm\:flex-wrap {
            flex-wrap: wrap
        }

        .max-sm\:items-start {
            align-items: flex-start
        }

        .max-sm\:items-stretch {
            align-items: stretch
        }

        .max-sm\:justify-between {
            justify-content: space-between
        }

        .max-sm\:border-\[var\(--bg-brand\)\] {
            border-color: var(--bg-brand)
        }

        .max-sm\:bg-\[var\(--bg-brand\)\] {
            background-color: var(--bg-brand)
        }

        .max-sm\:p-\[var\(--space-8\)\] {
            padding: var(--space-8)
        }

        .max-sm\:p-\[var\(--space-10\)\] {
            padding: var(--space-10)
        }

        .max-sm\:\!pt-\[var\(--space-8\)\] {
            padding-top: var(--space-8) !important
        }

        .max-sm\:pt-\[var\(--space-24\)\] {
            padding-top: var(--space-24)
        }

        .max-sm\:pb-\[var\(--space-16\)\] {
            padding-bottom: var(--space-16)
        }

        .max-sm\:text-\[var\(--text-on-brand\)\] {
            color: var(--text-on-brand)
        }
    }

    @media(min-width:421px) {
        .min-\[421px\]\:grid-cols-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr))
        }
    }

    @media(min-width:560px) {
        .min-\[560px\]\:w-\[280px\] {
            width: 280px
        }
    }

    @media(min-width:641px) {
        .min-\[641px\]\:h-\[var\(--button-h\)\] {
            height: var(--button-h)
        }

        .min-\[641px\]\:min-w-\[64px\] {
            min-width: 64px
        }

        .min-\[641px\]\:grid-cols-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr))
        }

        .min-\[641px\]\:gap-x-\[var\(--space-4\)\] {
            column-gap: var(--space-4)
        }

        .min-\[641px\]\:px-\[var\(--space-6\)\] {
            padding-inline: var(--space-6)
        }
    }

    @media(min-width:700px) {
        .min-\[700px\]\:sticky {
            position: sticky
        }

        .min-\[700px\]\:top-0 {
            top: calc(var(--spacing) * 0)
        }

        .min-\[700px\]\:self-start {
            align-self: flex-start
        }

        .min-\[700px\]\:border-t-0 {
            border-top-style: var(--tw-border-style);
            border-top-width: 0
        }

        .min-\[700px\]\:border-l {
            border-left-style: var(--tw-border-style);
            border-left-width: 1px
        }

        .min-\[700px\]\:pt-0 {
            padding-top: calc(var(--spacing) * 0)
        }

        .min-\[700px\]\:pl-2 {
            padding-left: calc(var(--spacing) * 2)
        }
    }

    @media(min-width:701px) {
        .min-\[701px\]\:grid-cols-4 {
            grid-template-columns: repeat(4, minmax(0, 1fr))
        }
    }

    @media(min-width:721px) {
        .min-\[721px\]\:hidden {
            display: none
        }

        .min-\[721px\]\:grid-cols-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr))
        }

        .min-\[721px\]\:grid-cols-\[repeat\(auto-fit\,minmax\(320px\,1fr\)\)\] {
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))
        }
    }

    @media(min-width:760px) {
        .min-\[760px\]\:flex-row {
            flex-direction: row
        }

        .min-\[760px\]\:items-center {
            align-items: center
        }

        .min-\[760px\]\:items-end {
            align-items: flex-end
        }

        .min-\[760px\]\:self-auto {
            align-self: auto
        }
    }

    @media(min-width:901px) {
        .min-\[901px\]\:mt-auto {
            margin-top: auto
        }

        .min-\[901px\]\:w-1\/3 {
            width: 33.3333%
        }

        .min-\[901px\]\:grid-cols-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr))
        }

        .min-\[901px\]\:grid-cols-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr))
        }
    }

    @media(min-width:1440px) {
        .min-\[1440px\]\:grid-cols-\[minmax\(0\,2fr\)_minmax\(0\,1fr\)\] {
            grid-template-columns: minmax(0, 2fr) minmax(0, 1fr)
        }
    }

    @media(min-width:40rem) {
        .sm\:col-span-2 {
            grid-column: span 2/span 2
        }

        .sm\:mr-4 {
            margin-right: calc(var(--spacing) * 4)
        }

        .sm\:ml-4 {
            margin-left: calc(var(--spacing) * 4)
        }

        .sm\:flex {
            display: flex
        }

        .sm\:hidden {
            display: none
        }

        .sm\:inline {
            display: inline
        }

        .sm\:inline-flex {
            display: inline-flex
        }

        .sm\:w-\[90\%\] {
            width: 90%
        }

        .sm\:w-\[92vw\] {
            width: 92vw
        }

        .sm\:w-\[102px\] {
            width: 102px
        }

        .sm\:w-\[148px\] {
            width: 148px
        }

        .sm\:w-\[150px\] {
            width: 150px
        }

        .sm\:w-\[360px\] {
            width: 360px
        }

        .sm\:w-auto {
            width: auto
        }

        .sm\:grid-cols-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr))
        }

        .sm\:grid-cols-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr))
        }

        .sm\:grid-cols-\[200px_minmax\(0\,1fr\)\] {
            grid-template-columns: 200px minmax(0, 1fr)
        }

        .sm\:grid-cols-\[minmax\(0\,0\.55fr\)_minmax\(180px\,1fr\)\] {
            grid-template-columns: minmax(0, .55fr) minmax(180px, 1fr)
        }

        .sm\:flex-row {
            flex-direction: row
        }

        .sm\:items-center {
            align-items: center
        }

        .sm\:items-end {
            align-items: flex-end
        }

        .sm\:items-start {
            align-items: flex-start
        }

        .sm\:justify-between {
            justify-content: space-between
        }

        .sm\:justify-end {
            justify-content: flex-end
        }

        :where(.sm\:space-x-0>:not(:last-child)) {
            --tw-space-x-reverse: 0;
            margin-inline-start: calc(calc(var(--spacing) * 0) * var(--tw-space-x-reverse));
            margin-inline-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-x-reverse)))
        }

        :where(.sm\:space-x-2>:not(:last-child)) {
            --tw-space-x-reverse: 0;
            margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
            margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)))
        }

        .sm\:rounded-\[var\(--radius-md\)\] {
            border-radius: var(--radius-md)
        }

        .sm\:p-8 {
            padding: calc(var(--spacing) * 8)
        }

        .sm\:p-\[var\(--space-10\)\] {
            padding: var(--space-10)
        }

        .sm\:p-\[var\(--space-16\)\] {
            padding: var(--space-16)
        }

        .sm\:px-3 {
            padding-inline: calc(var(--spacing) * 3)
        }

        .sm\:px-4 {
            padding-inline: calc(var(--spacing) * 4)
        }

        .sm\:px-6 {
            padding-inline: calc(var(--spacing) * 6)
        }

        .sm\:px-8 {
            padding-inline: calc(var(--spacing) * 8)
        }

        .sm\:px-\[var\(--space-16\)\] {
            padding-inline: var(--space-16)
        }

        .sm\:py-\[var\(--space-12\)\] {
            padding-block: var(--space-12)
        }

        .sm\:py-\[var\(--space-16\)\] {
            padding-block: var(--space-16)
        }

        .sm\:pb-6 {
            padding-bottom: calc(var(--spacing) * 6)
        }

        .sm\:pb-\[var\(--space-16\)\] {
            padding-bottom: var(--space-16)
        }

        .sm\:text-left {
            text-align: left
        }

        .sm\:text-\[13px\] {
            font-size: 13px
        }

        .sm\:text-\[14px\] {
            font-size: 14px
        }

        .sm\:text-\[24px\] {
            font-size: 24px
        }

        .sm\:text-\[length\:var\(--text-body-sm\)\] {
            font-size: var(--text-body-sm)
        }

        .sm\:text-\[length\:var\(--text-h4\)\] {
            font-size: var(--text-h4)
        }
    }

    @media(min-width:48rem) {
        .md\:col-span-2 {
            grid-column: span 2/span 2
        }

        .md\:h-full {
            height: 100%
        }

        .md\:w-\[80vw\] {
            width: 80vw
        }

        .md\:w-\[315px\] {
            width: 315px
        }

        .md\:grid-cols-1 {
            grid-template-columns: repeat(1, minmax(0, 1fr))
        }

        .md\:grid-cols-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr))
        }

        .md\:grid-cols-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr))
        }

        .md\:grid-cols-4 {
            grid-template-columns: repeat(4, minmax(0, 1fr))
        }

        .md\:grid-cols-\[1\.6fr_1fr_1fr\] {
            grid-template-columns: 1.6fr 1fr 1fr
        }

        .md\:grid-cols-\[280px_minmax\(0\,1fr\)\] {
            grid-template-columns: 280px minmax(0, 1fr)
        }

        .md\:grid-cols-\[minmax\(0\,1fr\)_148px\] {
            grid-template-columns: minmax(0, 1fr) 148px
        }

        .md\:flex-row {
            flex-direction: row
        }

        .md\:content-between {
            align-content: space-between
        }

        .md\:items-center {
            align-items: center
        }

        .md\:items-start {
            align-items: flex-start
        }

        .md\:justify-between {
            justify-content: space-between
        }

        .md\:gap-0 {
            gap: calc(var(--spacing) * 0)
        }
    }

    @media(min-width:64rem) {
        .lg\:left-\[92px\] {
            left: 92px
        }

        .lg\:flex {
            display: flex
        }

        .lg\:hidden {
            display: none
        }

        .lg\:h-full {
            height: 100%
        }

        .lg\:max-h-none {
            max-height: none
        }

        .lg\:min-h-0 {
            min-height: calc(var(--spacing) * 0)
        }

        .lg\:w-1\/2 {
            width: 50%
        }

        .lg\:w-\[300px\] {
            width: 300px
        }

        .lg\:w-\[400px\] {
            width: 400px
        }

        .lg\:w-\[760px\] {
            width: 760px
        }

        .lg\:flex-1 {
            flex: 1
        }

        .lg\:shrink-0 {
            flex-shrink: 0
        }

        .lg\:grid-cols-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr))
        }

        .lg\:grid-cols-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr))
        }

        .lg\:grid-cols-4 {
            grid-template-columns: repeat(4, minmax(0, 1fr))
        }

        .lg\:grid-cols-\[340px_minmax\(0\,1fr\)\] {
            grid-template-columns: 340px minmax(0, 1fr)
        }

        .lg\:grid-cols-\[minmax\(0\,2fr\)_minmax\(280px\,1fr\)\] {
            grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr)
        }

        .lg\:grid-cols-\[minmax\(0\,5fr\)_minmax\(0\,6fr\)\] {
            grid-template-columns: minmax(0, 5fr) minmax(0, 6fr)
        }

        .lg\:flex-row {
            flex-direction: row
        }

        .lg\:items-start {
            align-items: flex-start
        }

        .lg\:gap-\[var\(--space-16\)\] {
            gap: var(--space-16)
        }

        .lg\:gap-x-16 {
            column-gap: calc(var(--spacing) * 16)
        }

        .lg\:\!overflow-hidden {
            overflow: hidden !important
        }

        .lg\:overflow-hidden {
            overflow: hidden
        }

        .lg\:overflow-y-auto {
            overflow-y: auto
        }

        .lg\:p-6 {
            padding: calc(var(--spacing) * 6)
        }

        .lg\:pr-1 {
            padding-right: calc(var(--spacing) * 1)
        }

        .lg\:text-\[28px\] {
            font-size: 28px
        }
    }

    @media(min-width:80rem) {
        .xl\:col-span-3 {
            grid-column: span 3/span 3
        }

        .xl\:max-w-\[900px\] {
            max-width: 900px
        }

        .xl\:max-w-md {
            max-width: var(--container-md)
        }

        .xl\:grid-cols-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr))
        }

        .xl\:grid-cols-4 {
            grid-template-columns: repeat(4, minmax(0, 1fr))
        }

        .xl\:grid-cols-5 {
            grid-template-columns: repeat(5, minmax(0, 1fr))
        }

        .xl\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1\.25fr\)_minmax\(0\,1\.65fr\)\] {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1.65fr)
        }

        .xl\:grid-cols-\[minmax\(240px\,1\.2fr\)_minmax\(280px\,1fr\)_minmax\(180px\,0\.7fr\)\] {
            grid-template-columns: minmax(240px, 1.2fr) minmax(280px, 1fr) minmax(180px, .7fr)
        }

        .xl\:flex-row {
            flex-direction: row
        }

        .xl\:items-end {
            align-items: flex-end
        }

        .xl\:justify-between {
            justify-content: space-between
        }
    }

    .dark\:block:is(.dark *) {
        display: block
    }

    .dark\:hidden:is(.dark *) {
        display: none
    }

    .dark\:border-blue-900\/60:is(.dark *) {
        border-color: #1c398e99
    }

    @supports (color:color-mix(in lab, red, red)) {
        .dark\:border-blue-900\/60:is(.dark *) {
            border-color: color-mix(in oklab, var(--color-blue-900) 60%, transparent)
        }
    }

    .dark\:bg-\[var\(--bg-canvas\)\]:is(.dark *) {
        background-color: var(--bg-canvas)
    }

    .dark\:bg-\[var\(--bg-surface\)\]:is(.dark *) {
        background-color: var(--bg-surface)
    }

    .dark\:bg-\[var\(--bg-surface-2\)\]:is(.dark *) {
        background-color: var(--bg-surface-2)
    }

    .dark\:bg-zinc-800:is(.dark *) {
        background-color: var(--color-zinc-800)
    }

    .dark\:bg-zinc-900:is(.dark *) {
        background-color: var(--color-zinc-900)
    }

    .dark\:stroke-\[var\(--status-ring-arc-dark\)\]:is(.dark *) {
        stroke: var(--status-ring-arc-dark)
    }

    .dark\:stroke-\[var\(--status-ring-track-dark\)\]:is(.dark *) {
        stroke: var(--status-ring-track-dark)
    }

    .dark\:text-blue-200:is(.dark *) {
        color: var(--color-blue-200)
    }

    .dark\:text-zinc-100:is(.dark *) {
        color: var(--color-zinc-100)
    }

    .dark\:text-zinc-300:is(.dark *) {
        color: var(--color-zinc-300)
    }

    .dark\:opacity-\[0\.83\]:is(.dark *) {
        opacity: .83
    }

    .dark\:brightness-0:is(.dark *) {
        --tw-brightness: brightness(0%);
        filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )
    }

    .dark\:invert:is(.dark *) {
        --tw-invert: invert(100%);
        filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )
    }

    @media(hover:hover) {
        .dark\:group-hover\:bg-\[var\(--bg-surface-2\)\]:is(.dark *):is(:where(.group):hover *) {
            background-color: var(--bg-surface-2)
        }

        .dark\:hover\:bg-\[var\(--bg-surface\)\]:is(.dark *):hover {
            background-color: var(--bg-surface)
        }

        .dark\:hover\:bg-\[var\(--bg-surface-2\)\]:is(.dark *):hover {
            background-color: var(--bg-surface-2)
        }

        .dark\:hover\:bg-blue-950\/30:is(.dark *):hover {
            background-color: #1624564d
        }

        @supports (color:color-mix(in lab, red, red)) {
            .dark\:hover\:bg-blue-950\/30:is(.dark *):hover {
                background-color: color-mix(in oklab, var(--color-blue-950) 30%, transparent)
            }
        }

        .dark\:hover\:bg-transparent:is(.dark *):hover {
            background-color: #0000
        }

        .dark\:hover\:bg-zinc-900:is(.dark *):hover {
            background-color: var(--color-zinc-900)
        }
    }

    .dark\:focus\:bg-\[var\(--bg-surface-2\)\]:is(.dark *):focus {
        background-color: var(--bg-surface-2)
    }

    .dark\:data-\[state\=unchecked\]\:border-\[var\(--border-default\)\]:is(.dark *)[data-state=unchecked] {
        border-color: var(--border-default)
    }

    .dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:is(.dark *)[data-variant=destructive]:focus {
        background-color: var(--destructive)
    }

    @supports (color:color-mix(in lab, red, red)) {
        .dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:is(.dark *)[data-variant=destructive]:focus {
            background-color: color-mix(in oklab, var(--destructive) 20%, transparent)
        }
    }

    .\[\&_\.page-footer\]\:h-\[46px\] .page-footer {
        height: 46px
    }

    .\[\&_\.page-footer\]\:p-0 .page-footer {
        padding: calc(var(--spacing) * 0)
    }

    .\[\&_\.page-footer\]\:pb-8 .page-footer {
        padding-bottom: calc(var(--spacing) * 8)
    }

    .\[\&_\.react-colorful\]\:h-\[140px\] .react-colorful {
        height: 140px
    }

    .\[\&_\.react-colorful\]\:h-\[180px\] .react-colorful {
        height: 180px
    }

    .\[\&_\.react-colorful\]\:w-\[200px\] .react-colorful {
        width: 200px
    }

    .\[\&_\.react-colorful\]\:w-full .react-colorful {
        width: 100%
    }

    .\[\&_\.react-colorful__hue\]\:mt-2 .react-colorful hue {
        margin-top: calc(var(--spacing) * 2)
    }

    .\[\&_\.react-colorful__hue\]\:mt-3 .react-colorful hue {
        margin-top: calc(var(--spacing) * 3)
    }

    .\[\&_\.react-colorful__hue\]\:h-3 .react-colorful hue {
        height: calc(var(--spacing) * 3)
    }

    .\[\&_\.react-colorful__hue\]\:rounded-full .react-colorful hue {
        border-radius: 3.40282e38px
    }

    .\[\&_\.react-colorful__saturation\]\:rounded-md .react-colorful saturation {
        border-radius: var(--radius-md)
    }

    .\[\&_\.recharts-cartesian-grid_line\]\:\[stroke-dasharray\:none\] .recharts-cartesian-grid line {
        stroke-dasharray: none
    }

    .\[\&_\.recharts-cartesian-grid_line\[stroke\=\'\#ccc\'\]\]\:stroke-border\/50 .recharts-cartesian-grid line[stroke="#ccc"] {
        stroke: var(--border)
    }

    @supports (color:color-mix(in lab, red, red)) {
        .\[\&_\.recharts-cartesian-grid_line\[stroke\=\'\#ccc\'\]\]\:stroke-border\/50 .recharts-cartesian-grid line[stroke="#ccc"] {
            stroke: color-mix(in oklab, var(--border) 50%, transparent)
        }
    }

    .\[\&_\.recharts-cartesian-grid-vertical\]\:hidden .recharts-cartesian-grid-vertical {
        display: none
    }

    .\[\&_\.recharts-curve\.recharts-tooltip-cursor\]\:stroke-border .recharts-curve.recharts-tooltip-cursor {
        stroke: var(--border)
    }

    .\[\&_\.recharts-dot\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-dot[stroke="#fff"] {
        stroke: #0000
    }

    .\[\&_\.recharts-layer\]\:outline-hidden .recharts-layer {
        --tw-outline-style: none;
        outline-style: none
    }

    @media(forced-colors:active) {
        .\[\&_\.recharts-layer\]\:outline-hidden .recharts-layer {
            outline-offset: 2px;
            outline: 2px solid #0000
        }
    }

    .\[\&_\.recharts-legend-wrapper\]\:hidden .recharts-legend-wrapper {
        display: none
    }

    .\[\&_\.recharts-polar-grid_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-polar-grid [stroke="#ccc"] {
        stroke: var(--border)
    }

    .\[\&_\.recharts-radial-bar-background-sector\]\:fill-muted .recharts-radial-bar-background-sector,
    .\[\&_\.recharts-rectangle\.recharts-tooltip-cursor\]\:fill-muted .recharts-rectangle.recharts-tooltip-cursor {
        fill: var(--muted)
    }

    .\[\&_\.recharts-reference-line_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-reference-line [stroke="#ccc"] {
        stroke: var(--border)
    }

    .\[\&_\.recharts-sector\]\:outline-hidden .recharts-sector {
        --tw-outline-style: none;
        outline-style: none
    }

    @media(forced-colors:active) {
        .\[\&_\.recharts-sector\]\:outline-hidden .recharts-sector {
            outline-offset: 2px;
            outline: 2px solid #0000
        }
    }

    .\[\&_\.recharts-sector\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-sector[stroke="#fff"] {
        stroke: #0000
    }

    .\[\&_\.recharts-surface\]\:outline-hidden .recharts-surface {
        --tw-outline-style: none;
        outline-style: none
    }

    @media(forced-colors:active) {
        .\[\&_\.recharts-surface\]\:outline-hidden .recharts-surface {
            outline-offset: 2px;
            outline: 2px solid #0000
        }
    }

    .\[\&_\.recharts-text\]\:\!text-\[8px\] .recharts-text {
        font-size: 8px !important
    }

    .\[\&_\.report-text\]\:text-\[\#3a3a3a\] .report-text {
        color: #3a3a3a
    }

    .\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
        padding-inline: calc(var(--spacing) * 2)
    }

    .\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
        padding-block: calc(var(--spacing) * 1.5)
    }

    .\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading] {
        font-size: var(--text-xs);
        line-height: var(--tw-leading, var(--text-xs--line-height))
    }

    .\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium)
    }

    .\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading] {
        color: var(--muted-foreground)
    }

    .\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] {
        padding-inline: calc(var(--spacing) * 2)
    }

    .\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden])~[cmdk-group] {
        padding-top: calc(var(--spacing) * 0)
    }

    .\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
        height: calc(var(--spacing) * 5)
    }

    .\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
        width: calc(var(--spacing) * 5)
    }

    .\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] {
        height: calc(var(--spacing) * 12)
    }

    .\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] {
        padding-inline: calc(var(--spacing) * 2)
    }

    .\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] {
        padding-block: calc(var(--spacing) * 3)
    }

    .\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
        height: calc(var(--spacing) * 5)
    }

    .\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
        width: calc(var(--spacing) * 5)
    }

    .\[\&_\[data-slot\=context-menu-trigger\]_p\]\:\!font-normal [data-slot=context-menu-trigger] p {
        --tw-font-weight: var(--font-weight-normal) !important;
        font-weight: var(--font-weight-normal) !important
    }

    .\[\&_\[data-slot\=switch-checked-icon\]\]\:hidden [data-slot=switch-checked-icon],
    .\[\&_\[data-slot\=switch-unchecked-icon\]\]\:hidden [data-slot=switch-unchecked-icon] {
        display: none
    }

    .\[\&_\[data-testid\=map-view\]\]\:\!h-full [data-testid=map-view] {
        height: 100% !important
    }

    .\[\&_\[data-testid\=map-view\]\]\:\!w-full [data-testid=map-view] {
        width: 100% !important
    }

    .\[\&_\[data-testid\=map-view\]\>div\:first-child\]\:\!h-full [data-testid=map-view]>div:first-child {
        height: 100% !important
    }

    .\[\&_\[data-testid\=map-view\]\>div\:first-child\]\:\!rounded-none [data-testid=map-view]>div:first-child {
        border-radius: 0 !important
    }

    .\[\&_\[data-testid\=map-view\]\>div\:first-child\]\:\!border-0 [data-testid=map-view]>div:first-child {
        border-style: var(--tw-border-style) !important;
        border-width: 0 !important
    }

    .\[\&_\[data-testid\=map-view\]\>div\:first-child\]\:\!shadow-none [data-testid=map-view]>div:first-child {
        --tw-shadow: 0 0 #0000 !important;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important
    }

    .\[\&_\[data-variant\=table\]\]\:py-\[72px\] [data-variant=table] {
        padding-block: 72px
    }

    .\[\&_\[stroke-dasharray\=\'1px_1px\'\]\]\:\!\[stroke-dasharray\:1px_0px\] [stroke-dasharray="1px 1px"] {
        stroke-dasharray: 1 0 !important
    }

    .\[\&_button\]\:bg-transparent button,
    .dark\:\[\&_button\]\:bg-transparent:is(.dark *) button {
        background-color: #0000
    }

    .\[\&_button\[disabled\]\]\:\!opacity-100 button[disabled] {
        opacity: 1 !important
    }

    .\[\&_button\[role\=combobox\]\]\:min-h-12 button[role=combobox] {
        min-height: calc(var(--spacing) * 12)
    }

    .\[\&_img\]\:hidden img {
        display: none
    }

    .\[\&_input\]\:min-h-12 input {
        min-height: calc(var(--spacing) * 12)
    }

    .\[\&_svg\]\:pointer-events-none svg {
        pointer-events: none
    }

    .\[\&_svg\]\:size-4 svg {
        width: calc(var(--spacing) * 4);
        height: calc(var(--spacing) * 4)
    }

    .\[\&_svg\]\:shrink-0 svg {
        flex-shrink: 0
    }

    .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]) {
        width: calc(var(--spacing) * 4);
        height: calc(var(--spacing) * 4)
    }

    .\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground svg:not([class*=text-]) {
        color: var(--muted-foreground)
    }

    .\[\&_svg\[data-testid\=status-ring\]\]\:\!size-8 svg[data-testid=status-ring] {
        width: calc(var(--spacing) * 8) !important;
        height: calc(var(--spacing) * 8) !important
    }

    .\[\&\:\:-webkit-calendar-picker-indicator\]\:cursor-pointer::-webkit-calendar-picker-indicator {
        cursor: pointer
    }

    .\[\&\:\:-webkit-calendar-picker-indicator\]\:opacity-70::-webkit-calendar-picker-indicator {
        opacity: .7
    }

    .\[\&\:\:-webkit-calendar-picker-indicator\]\:transition-opacity::-webkit-calendar-picker-indicator {
        transition-property: opacity;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .dark\:\[\&\:\:-webkit-calendar-picker-indicator\]\:opacity-80:is(.dark *)::-webkit-calendar-picker-indicator {
        opacity: .8
    }

    .dark\:\[\&\:\:-webkit-calendar-picker-indicator\]\:invert:is(.dark *)::-webkit-calendar-picker-indicator {
        --tw-invert: invert(100%);
        filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )
    }

    .\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
        display: none
    }

    .\[\&\:\:-webkit-slider-thumb\]\:h-7::-webkit-slider-thumb {
        height: calc(var(--spacing) * 7)
    }

    .\[\&\:\:-webkit-slider-thumb\]\:w-7::-webkit-slider-thumb {
        width: calc(var(--spacing) * 7)
    }

    .\[\&\:\:-webkit-slider-thumb\]\:cursor-grab::-webkit-slider-thumb {
        cursor: grab
    }

    .\[\&\:\:-webkit-slider-thumb\]\:appearance-none::-webkit-slider-thumb {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none
    }

    .\[\&\:\:-webkit-slider-thumb\]\:rounded-full::-webkit-slider-thumb {
        border-radius: 3.40282e38px
    }

    .\[\&\:\:-webkit-slider-thumb\]\:bg-\[var\(--background-secondary\)\]::-webkit-slider-thumb {
        background-color: var(--background-secondary)
    }

    .\[\&\:\:-webkit-slider-thumb\]\:shadow-\[0px_0\.5px_4px_0px_rgba\(0\,0\,0\,0\.12\)\,0px_6px_13px_0px_rgba\(0\,0\,0\,0\.12\)\]::-webkit-slider-thumb {
        --tw-shadow: 0px .5px 4px 0px var(--tw-shadow-color, #0000001f), 0px 6px 13px 0px var(--tw-shadow-color, #0000001f);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .\[\&\:\:-webkit-slider-thumb\]\:active\:cursor-grabbing::-webkit-slider-thumb:active {
        cursor: grabbing
    }

    :is(.data-\[variant\=destructive\]\:\*\:\[svg\]\:\!text-destructive[data-variant=destructive]>*):is(svg) {
        color: var(--destructive) !important
    }

    .\[\&\>\*\]\:max-w-\[260px\]>* {
        max-width: 260px
    }

    .\[\&\>\*\]\:min-w-0>* {
        min-width: calc(var(--spacing) * 0)
    }

    .\[\&\>\*\]\:min-w-\[120px\]>* {
        min-width: 120px
    }

    .\[\&\>\*\]\:min-w-\[150px\]>* {
        min-width: 150px
    }

    .\[\&\>\*\]\:flex-\[1_1_160px\]>* {
        flex: 160px
    }

    @media not all and (min-width:720px) {
        .max-\[720px\]\:\[\&\>\*\]\:max-w-full>* {
            max-width: 100%
        }

        .max-\[720px\]\:\[\&\>\*\]\:min-w-0>* {
            min-width: calc(var(--spacing) * 0)
        }

        .max-\[720px\]\:\[\&\>\*\]\:flex-\[1_1_100\%\]>* {
            flex: 100%
        }

        .max-\[720px\]\:\[\&\>\*\]\:snap-start>* {
            scroll-snap-align: start
        }
    }

    @media not all and (min-width:640px) {
        .max-\[640px\]\:\[\&\>\*\]\:flex-1>* {
            flex: 1
        }
    }

    @media not all and (min-width:420px) {
        .max-\[420px\]\:\[\&\>\*\]\:flex-1>* {
            flex: 1
        }
    }

    .\[\&\>\[data-column-key\=address\]_p\]\:\!text-\[length\:var\(--text-caption\)\]>[data-column-key=address] p {
        font-size: var(--text-caption) !important
    }

    .\[\&\>\[data-column-key\=address\]_p\]\:\!leading-\[var\(--lh-base\)\]>[data-column-key=address] p {
        --tw-leading: var(--lh-base) !important;
        line-height: var(--lh-base) !important
    }

    .\[\&\>\[data-column-key\=address\]_p\]\:\!font-normal>[data-column-key=address] p {
        --tw-font-weight: var(--font-weight-normal) !important;
        font-weight: var(--font-weight-normal) !important
    }

    .\[\&\>\[data-column-key\=address\]_p\]\:\[overflow-wrap\:anywhere\]>[data-column-key=address] p {
        overflow-wrap: anywhere
    }

    .\[\&\>\[data-column-key\=address\]_p\]\:\!whitespace-normal>[data-column-key=address] p {
        white-space: normal !important
    }

    .\[\&\>\[data-column-key\=address\]_p\]\:\!text-\[var\(--text-muted\)\]>[data-column-key=address] p {
        color: var(--text-muted) !important
    }

    .\[\&\>\[data-column-key\=name\]\]\:gap-x-\[var\(--space-4\)\]>[data-column-key=name] {
        column-gap: var(--space-4)
    }

    .\[\&\>\[data-column-key\=name\]\>\*\]\:\!ms-0>[data-column-key=name]>* {
        margin-inline-start: calc(var(--spacing) * 0) !important
    }

    .\[\&\>\[data-slot\=custom-popup-footer\]\]\:mt-auto>[data-slot=custom-popup-footer] {
        margin-top: auto
    }

    .\[\&\>button\]\:top-\[var\(--space-4\)\]>button {
        top: var(--space-4)
    }

    .\[\&\>button\]\:right-\[var\(--space-4\)\]>button {
        right: var(--space-4)
    }

    .\[\&\>button\]\:flex>button {
        display: flex
    }

    .\[\&\>button\]\:size-11>button {
        width: calc(var(--spacing) * 11);
        height: calc(var(--spacing) * 11)
    }

    .\[\&\>button\]\:h-\[44px\]>button {
        height: 44px
    }

    .\[\&\>button\]\:items-center>button {
        align-items: center
    }

    .\[\&\>button\]\:justify-center>button {
        justify-content: center
    }

    @media not all and (min-width:40rem) {
        .max-sm\:\[\&\>button\]\:flex-1>button {
            flex: 1
        }
    }

    .dark\:\[\&\>button\>img\]\:invert:is(.dark *)>button>img {
        --tw-invert: invert(100%);
        filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )
    }

    .\[\&\>div\]\:contents>div {
        display: contents
    }

    .\[\&\>div\]\:w-fit>div {
        width: fit-content
    }

    .\[\&\>div\]\:w-full>div {
        width: 100%
    }

    .\[\&\>div\]\:min-w-0>div {
        min-width: calc(var(--spacing) * 0)
    }

    .\[\&\>div\]\:flex-1>div {
        flex: 1
    }

    .\[\&\>div\]\:flex-wrap>div {
        flex-wrap: wrap
    }

    .\[\&\>div\]\:gap-x-\[var\(--space-10\)\]>div {
        column-gap: var(--space-10)
    }

    .\[\&\>div\]\:gap-y-\[var\(--space-4\)\]>div {
        row-gap: var(--space-4)
    }

    .\[\&\>div\]\:\!rounded-none>div {
        border-radius: 0 !important
    }

    .\[\&\>div\]\:rounded-none>div {
        border-radius: 0
    }

    .\[\&\>div\]\:\!bg-transparent>div {
        background-color: #0000 !important
    }

    .\[\&\>div\]\:\!p-0>div {
        padding: calc(var(--spacing) * 0) !important
    }

    @media not all and (min-width:480px) {
        .max-\[480px\]\:\[\&\>div\]\:w-full>div {
            width: 100%
        }
    }

    @media(min-width:40rem) {
        .\[\&\>div\:last-child\]\:sm\:col-span-2>div:last-child {
            grid-column: span 2/span 2
        }
    }

    .\[\&\>div\>dd\]\:text-right>div>dd {
        text-align: right
    }

    .\[\&\>div\>dd\]\:font-semibold>div>dd {
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold)
    }

    .\[\&\>div\>dd\]\:text-\[var\(--text-primary\)\]>div>dd {
        color: var(--text-primary)
    }

    .\[\&\>div\>div\:first-child\]\:min-w-\[140px\]>div>div:first-child {
        min-width: 140px
    }

    .\[\&\>div\>div\:first-child\]\:flex-1>div>div:first-child {
        flex: 1
    }

    .\[\&\>div\>div\:last-child\]\:ml-auto>div>div:last-child {
        margin-left: auto
    }

    .\[\&\>div\>div\:last-child\]\:flex-wrap>div>div:last-child {
        flex-wrap: wrap
    }

    .\[\&\>div\>div\:last-child\>button\]\:inline-flex>div>div:last-child>button {
        display: inline-flex
    }

    .\[\&\>div\>div\:last-child\>button\]\:size-8>div>div:last-child>button {
        width: calc(var(--spacing) * 8);
        height: calc(var(--spacing) * 8)
    }

    .\[\&\>div\>div\:last-child\>button\]\:items-center>div>div:last-child>button {
        align-items: center
    }

    .\[\&\>div\>div\:last-child\>button\]\:justify-center>div>div:last-child>button {
        justify-content: center
    }

    .\[\&\>div\>div\:last-child\>button\]\:rounded-\[var\(--radius-sm\)\]>div>div:last-child>button {
        border-radius: var(--radius-sm)
    }

    .\[\&\>div\>div\:last-child\>button\]\:transition-colors>div>div:last-child>button {
        transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    @media(hover:hover) {
        .\[\&\>div\>div\:last-child\>button\]\:hover\:bg-\[var\(--bg-surface-2\)\]>div>div:last-child>button:hover {
            background-color: var(--bg-surface-2)
        }
    }

    .\[\&\>div\>div\:last-child\>p\]\:tabular-nums>div>div:last-child>p {
        --tw-numeric-spacing: tabular-nums;
        font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, )
    }

    .\[\&\>div\>dt\]\:max-w-none>div>dt {
        max-width: none
    }

    .\[\&\>div\>dt\]\:text-\[var\(--text-muted\)\]>div>dt {
        color: var(--text-muted)
    }

    .\[\&\>h3\]\:min-w-0>h3 {
        min-width: calc(var(--spacing) * 0)
    }

    .\[\&\>h3\]\:flex-1>h3 {
        flex: 1
    }

    @media not all and (min-width:40rem) {
        .max-sm\:\[\&\>h3\]\:basis-full>h3 {
            flex-basis: 100%
        }
    }

    .\[\&\>img\]\:hidden>img {
        display: none
    }

    .\[\&\>img\]\:h-7>img {
        height: calc(var(--spacing) * 7)
    }

    .\[\&\>img\]\:w-7>img {
        width: calc(var(--spacing) * 7)
    }

    .\[\&\>img\]\:shrink-0>img {
        flex-shrink: 0
    }

    .\[\&\>img\]\:p-\[5px\]>img {
        padding: 5px
    }

    .\[\&\>img\]\:transition-\[transform\,background-color\]>img {
        transition-property: transform, background-color;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .\[\&\>img\]\:transition-transform>img {
        transition-property: transform, translate, scale, rotate;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .\[\&\>img\]\:duration-\[var\(--duration-fast\)\]>img {
        --tw-duration: var(--duration-fast);
        transition-duration: var(--duration-fast)
    }

    @media(hover:hover) {
        .\[\&\>img\]\:hover\:bg-\[var\(--bg-surface\)\]>img:hover {
            background-color: var(--bg-surface)
        }
    }

    @media(prefers-reduced-motion:reduce) {
        .motion-reduce\:\[\&\>img\]\:transition-none>img {
            transition-property: none
        }
    }

    @media(hover:hover) {
        .dark\:\[\&\>img\]\:hover\:bg-\[var\(--bg-surface-2\)\]:is(.dark *)>img:hover {
            background-color: var(--bg-surface-2)
        }
    }

    @media not all and (min-width:700px) {
        .max-\[700px\]\:\[\&\>nav\]\:min-w-max>nav {
            min-width: max-content
        }
    }

    .\[\&\>span\]\:line-clamp-1>span {
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden
    }

    .peer-disabled\:\[\&\>span\]\:bg-\[var\(--bg-muted\)\]:is(:where(.peer):disabled~*)>span {
        background-color: var(--bg-muted)
    }

    .peer-disabled\:\[\&\>span\]\:text-\[var\(--text-disabled\)\]:is(:where(.peer):disabled~*)>span {
        color: var(--text-disabled)
    }

    .\[\&\>span\:last-child\]\:w-full>span:last-child {
        width: 100%
    }

    .\[\&\>span\:last-child\>div\]\:\!grid>span:last-child>div {
        display: grid !important
    }

    .\[\&\>span\:last-child\>div\]\:\!grid-cols-\[20px_minmax\(0\,1fr\)\]>span:last-child>div {
        grid-template-columns: 20px minmax(0, 1fr) !important
    }

    .\[\&\>span\:last-child\>div\]\:\!gap-x-3>span:last-child>div {
        column-gap: calc(var(--spacing) * 3) !important
    }

    .\[\&\>span\:last-child\>div\]\:\!gap-y-1>span:last-child>div {
        row-gap: calc(var(--spacing) * 1) !important
    }

    .\[\&\>span\:last-child\>div\>div\]\:contents>span:last-child>div>div {
        display: contents
    }

    .\[\&\>span\:last-child\>div\>span\]\:col-start-2>span:last-child>div>span {
        grid-column-start: 2
    }

    .\[\&\>svg\]\:h-2\.5>svg {
        height: calc(var(--spacing) * 2.5)
    }

    .\[\&\>svg\]\:h-3>svg {
        height: calc(var(--spacing) * 3)
    }

    .\[\&\>svg\]\:w-2\.5>svg {
        width: calc(var(--spacing) * 2.5)
    }

    .\[\&\>svg\]\:w-3>svg {
        width: calc(var(--spacing) * 3)
    }

    .\[\&\[data-state\=open\]\>img\]\:rotate-180[data-state=open]>img,
    .\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg {
        rotate: 180deg
    }

    @media(max-height:700px) {
        .\[\@media\(max-height\:700px\)\]\:items-start {
            align-items: flex-start
        }

        .\[\@media\(max-height\:700px\)\]\:py-\[var\(--space-12\)\] {
            padding-block: var(--space-12)
        }
    }

    @media(min-width:401px) {
        .\[\@media\(min-width\:401px\)\]\:h-7 {
            height: calc(var(--spacing) * 7)
        }

        .\[\@media\(min-width\:401px\)\]\:p-\[var\(--space-8\)\] {
            padding: var(--space-8)
        }

        .\[\@media\(min-width\:401px\)\]\:px-\[var\(--space-8\)\] {
            padding-inline: var(--space-8)
        }
    }

    @media(min-width:769px) {
        .\[\@media\(min-width\:769px\)\]\:block {
            display: block
        }

        .\[\@media\(min-width\:769px\)\]\:flex {
            display: flex
        }

        .\[\@media\(min-width\:769px\)\]\:hidden {
            display: none
        }

        .\[\@media\(min-width\:769px\)\]\:inline {
            display: inline
        }

        .\[\@media\(min-width\:769px\)\]\:p-\[var\(--space-12\)\] {
            padding: var(--space-12)
        }

        .\[\@media\(min-width\:769px\)\]\:px-\[var\(--space-12\)\] {
            padding-inline: var(--space-12)
        }

        .\[\@media\(min-width\:769px\)\]\:text-\[length\:var\(--text-body\)\] {
            font-size: var(--text-body)
        }
    }

    @media(min-width:901px) {
        .\[\@media\(min-width\:901px\)\]\:max-w-64 {
            max-width: calc(var(--spacing) * 64)
        }
    }
}

@property --tw-animation-delay {
    syntax: "*";
    inherits: false;
    initial-value: 0s
}

@property --tw-animation-direction {
    syntax: "*";
    inherits: false;
    initial-value: normal
}

@property --tw-animation-duration {
    syntax: "*";
    inherits: false
}

@property --tw-animation-fill-mode {
    syntax: "*";
    inherits: false;
    initial-value: none
}

@property --tw-animation-iteration-count {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-enter-blur {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-enter-opacity {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-enter-rotate {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-enter-scale {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-enter-translate-x {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-enter-translate-y {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-exit-blur {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-exit-opacity {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-exit-rotate {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-exit-scale {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-exit-translate-x {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-exit-translate-y {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

:root {
    --color-blue-50: #eef5fb;
    --color-blue-100: #d4e6f5;
    --color-blue-200: #aacae9;
    --color-blue-300: #7eaedc;
    --color-blue-400: #5092d0;
    --color-blue-500: #3182ce;
    --color-blue-600: #2569ad;
    --color-blue-700: #1d568f;
    --color-blue-800: #194875;
    --color-blue-900: #163960;
    --color-blue-950: #0c2240;
    --color-neutral-0: #fff;
    --color-neutral-50: #fafafb;
    --color-neutral-100: #f4f5f7;
    --color-neutral-200: #e7e8ec;
    --color-neutral-300: #d4d6dc;
    --color-neutral-400: #9ca0aa;
    --color-neutral-500: #6b6f7a;
    --color-neutral-600: #4a4d57;
    --color-neutral-700: #33363f;
    --color-neutral-800: #1f2128;
    --color-neutral-900: #131419;
    --color-neutral-950: #0a0b0e;
    --color-sun-300: #fdd87a;
    --color-sun-400: #fbc23a;
    --color-sun-500: #f6a300;
    --color-sun-600: #d68500;
    --color-amber-500: #f59e0b;
    --color-success-500: #10b981;
    --color-success-600: #059669;
    --color-warning-500: #f59e0b;
    --color-danger-500: #ef4444;
    --color-danger-600: #dc2626;
    --color-info-500: #3182ce;
    --space-0: 0;
    --space-hair: 1px;
    --space-1: 2px;
    --space-2: 4px;
    --space-3: 6px;
    --space-4: 8px;
    --space-6: 12px;
    --space-8: 16px;
    --space-10: 20px;
    --space-12: 24px;
    --space-16: 32px;
    --space-20: 40px;
    --space-24: 48px;
    --space-32: 64px;
    --space-40: 80px;
    --space-48: 96px;
    --radius-none: 0;
    --radius-xs: 0;
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
    --radius-xl: 0;
    --radius-pill: 0;
    --radius-full: 9999px;
    --border-1: 1px;
    --border-2: 2px;
    --font-sans: "SF Pro", -apple-system, BlinkMacSystemFont, "Inter", system-ui, "Segoe UI", sans-serif;
    --font-mono: "SF Pro", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --text-display-xl: 56px;
    --text-display: 40px;
    --text-h1: 28px;
    --text-h2: 22px;
    --text-h3: 18px;
    --text-h4: 16px;
    --text-body-lg: 17px;
    --text-body: 15px;
    --text-body-sm: 13px;
    --text-label: 13px;
    --text-caption: 12px;
    --text-micro: 11px;
    --text-mono: 13px;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --lh-tight: 1.05;
    --lh-snug: 1.2;
    --lh-base: 1.3;
    --lh-relaxed: 1.5;
    --tracking-tight: -.02em;
    --tracking-snug: -.01em;
    --tracking-base: 0;
    --tracking-wide: .04em;
    --duration-instant: 80ms;
    --duration-fast: .12s;
    --duration-base: .2s;
    --duration-slow: .32s;
    --ease-standard: cubic-bezier(.2, 0, 0, 1);
    --ease-in: cubic-bezier(.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --ease-spring: cubic-bezier(.5, 1.6, .4, 1);
    --ease-emphasized: cubic-bezier(.2, 0, 0, 1);
    --shadow-1-light: 0 1px 2px #0f141e0a;
    --shadow-2-light: 0 4px 12px #0f141e14;
    --shadow-3-light: 0 16px 48px #0f141e29;
    --shadow-1-dark: 0 1px 2px #0006;
    --shadow-2-dark: 0 4px 12px #00000080;
    --shadow-3-dark: 0 16px 48px #0009;
    --control-h-sm: 36px;
    --control-h-md: 44px;
    --control-h-lg: 48px;
    --row-min-h: 70px;
    --tooltip-w: 232px;
    --unit-1: var(--space-hair);
    --unit-2: var(--space-1);
    --unit-4: var(--space-2);
    --unit-6: var(--space-3);
    --unit-8: var(--space-4);
    --unit-10: 10px;
    --unit-12: var(--space-6);
    --unit-14: 14px;
    --unit-16: var(--space-8);
    --unit-18: 18px;
    --unit-20: var(--space-10);
    --unit-24: var(--space-12);
    --unit-36: var(--control-h-sm);
    --unit-44: var(--control-h-md);
    --unit-48: var(--control-h-lg);
    --unit-56: 56px;
    --unit-70: var(--row-min-h);
    --unit-232: var(--tooltip-w)
}

:root,
.light {
    color-scheme: light;
    --bg-canvas: var(--color-neutral-0);
    --bg-surface: var(--color-neutral-50);
    --bg-surface-2: var(--color-neutral-100);
    --bg-muted: var(--color-neutral-100);
    --bg-inverse: var(--color-neutral-900);
    --bg-brand: var(--color-blue-500);
    --bg-brand-hover: var(--color-blue-600);
    --bg-brand-active: var(--color-blue-700);
    --bg-brand-subtle: var(--color-blue-50);
    --bg-brand-panel-1: var(--color-blue-600);
    --bg-brand-panel-2: var(--color-blue-800);
    --brand-glow-halo: #1e91fd33;
    --brand-glow-shadow: #1e91fd73;
    --scrim-bg: #080c18a6;
    --scrim-blur: 6px;
    --text-primary: var(--color-neutral-900);
    --text-secondary: var(--color-neutral-600);
    --text-muted: var(--color-neutral-500);
    --text-disabled: var(--color-neutral-400);
    --text-inverse: var(--color-neutral-0);
    --text-brand: var(--color-blue-500);
    --text-on-brand: var(--color-neutral-0);
    --text-danger: var(--color-danger-600);
    --text-success: var(--color-success-600);
    --text-warning: #92610d;
    --bg-warning-subtle: #fff8e6;
    --border-warning: #f4d78a;
    --border-subtle: var(--color-neutral-200);
    --border-default: var(--color-neutral-300);
    --border-strong: var(--color-neutral-400);
    --border-focus: var(--color-blue-500);
    --border-danger: var(--color-danger-500);
    --icon-default: var(--color-neutral-600);
    --icon-muted: var(--color-neutral-400);
    --icon-brand: var(--color-blue-500);
    --shadow-1: var(--shadow-1-light);
    --shadow-2: var(--shadow-2-light);
    --shadow-3: var(--shadow-3-light);
    --focus-ring: 0 0 0 2px var(--bg-canvas), 0 0 0 4px #3182ce66;
    --focus-ring-inset: inset 0 0 0 2px var(--color-blue-500);
    --focus-halo: #3182ce2e;
    --danger-halo: #ef444424;
    --link-underline: #3182ce66;
    --link-muted-underline: #78788259;
    --studio-tool-ink: #000;
    --studio-tool-hover-bg: var(--color-neutral-200);
    --studio-tool-hover-ink: #000
}

.dark {
    color-scheme: dark;
    --bg-canvas: var(--color-neutral-950);
    --bg-surface: var(--color-neutral-900);
    --bg-surface-2: var(--color-neutral-800);
    --bg-muted: var(--color-neutral-800);
    --bg-inverse: var(--color-neutral-0);
    --bg-brand: var(--color-blue-500);
    --bg-brand-hover: var(--color-blue-400);
    --bg-brand-active: var(--color-blue-300);
    --bg-brand-subtle: #3182ce1f;
    --bg-brand-panel-1: var(--color-blue-950);
    --bg-brand-panel-2: #050a18;
    --brand-glow-halo: #1e91fd47;
    --brand-glow-shadow: #1e91fd99;
    --scrim-bg: #080c18a6;
    --scrim-blur: 6px;
    --text-primary: var(--color-neutral-50);
    --text-secondary: var(--color-neutral-300);
    --text-muted: var(--color-neutral-400);
    --text-disabled: var(--color-neutral-600);
    --text-inverse: var(--color-neutral-900);
    --text-brand: var(--color-blue-400);
    --text-on-brand: var(--color-neutral-0);
    --text-danger: #f87171;
    --text-success: #34d399;
    --text-warning: #fbbf24;
    --bg-warning-subtle: #f59e0b1f;
    --border-warning: #f59e0b59;
    --border-subtle: var(--color-neutral-800);
    --border-default: var(--color-neutral-700);
    --border-strong: var(--color-neutral-600);
    --border-focus: var(--color-blue-400);
    --border-danger: var(--color-danger-500);
    --icon-default: var(--color-neutral-300);
    --icon-muted: var(--color-neutral-500);
    --icon-brand: var(--color-blue-400);
    --shadow-1: var(--shadow-1-dark);
    --shadow-2: var(--shadow-2-dark);
    --shadow-3: var(--shadow-3-dark);
    --focus-ring: 0 0 0 2px var(--bg-canvas), 0 0 0 4px #5092d080;
    --focus-ring-inset: inset 0 0 0 2px var(--color-blue-400);
    --focus-halo: #5092d059;
    --danger-halo: #f8717147;
    --link-underline: #5092d080;
    --link-muted-underline: #9696a066;
    --studio-tool-ink: #fff;
    --studio-tool-hover-bg: var(--color-neutral-700);
    --studio-tool-hover-ink: #fff
}

:root {
    --color-white: var(--color-neutral-0);
    --color-light-white: var(--color-neutral-300);
    --color-background: var(--bg-surface);
    --color-black: var(--color-neutral-950);
    --color-black-secondary: var(--color-neutral-900);
    --color-black-tertiary: #2b2b2b66;
    --color-theme: var(--bg-brand);
    --color-blue: var(--color-blue-600);
    --color-sky-blue: #3182ce94;
    --color-gray: var(--color-neutral-200);
    --color-lightgray: var(--color-neutral-50);
    --color-lightgray-text: var(--color-neutral-400);
    --color-darkgray: var(--color-neutral-700);
    --colot-darkgray-text: var(--color-neutral-500);
    --color-destructive: var(--text-danger);
    --color-border: var(--border-default);
    --color-green: var(--color-success-500);
    --color-light-blue: var(--bg-brand-subtle);
    --color-skeleton-bg: var(--bg-surface-2);
    --color-orange: var(--color-amber-500);
    --color-disabled: var(--bg-surface-2);
    --color-light-green: #ccf0d0;
    --color-light-red: #ffd1d1;
    --color-light-yellow: #ffdcb2;
    --color-violet: #6340ff;
    --color-white-smoke: var(--color-neutral-100);
    --gradient-sky-blue: #00cadc;
    --gradient-sky-blue-10: #90e1e7;
    --background: var(--bg-surface);
    --primary: var(--bg-brand);
    --background-primary: var(--bg-surface);
    --background-secondary: var(--bg-canvas);
    --header-bg: var(--bg-surface-2);
    --primary-text: var(--text-primary);
    --secondary-text: var(--text-secondary);
    --text-w: var(--text-on-brand);
    --info-text-g: var(--text-success);
    --error-text: var(--text-danger);
    --disabled-text: var(--text-disabled);
    --sidebar-bg: var(--bg-surface-2);
    --light-bg: var(--bg-brand-subtle);
    --avatar-bg: var(--color-amber-500);
    --card-bg: var(--bg-surface-2);
    --graph-primary: var(--color-blue-600);
    --option-text: var(--text-secondary);
    --card-border: var(--border-subtle);
    --background-hover: var(--bg-surface-2);
    --background-tertiary: var(--bg-surface-2);
    --button-h-sm: var(--control-h-sm);
    --button-h: var(--control-h-md);
    --tab-h: 56px;
    --input-h: var(--control-h-lg);
    --header-h: var(--control-h-md);
    --radius: var(--radius-none);
    --border-w: var(--border-1);
    --border-w-thick: var(--border-2);
    --border-primary-color: var(--border-default);
    --border-secondary-color: var(--border-focus);
    --disabled-bg: var(--bg-surface-2);
    --font-size-xs: var(--text-caption);
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 24px;
    --foreground: var(--text-primary);
    --card: var(--bg-canvas);
    --card-foreground: var(--text-primary);
    --popover: var(--bg-canvas);
    --popover-foreground: var(--text-primary);
    --primary-foreground: var(--text-on-brand);
    --secondary: var(--bg-surface-2);
    --secondary-foreground: var(--text-primary);
    --muted: var(--bg-muted);
    --muted-foreground: var(--text-muted);
    --accent: var(--bg-brand-subtle);
    --accent-foreground: var(--text-primary);
    --destructive: var(--text-danger);
    --border: var(--border-default);
    --input: var(--border-default);
    --ring: var(--border-focus);
    --report-dark-mode-bg: var(--color-neutral-900);
    --report-dark-mode-bg-secondary: #2b2b2b66;
    --report-dark-mode-text: var(--color-neutral-0);
    --report-dark-mode-text-secondary: var(--color-neutral-300)
}

@font-face {
    font-family: SF Pro;
    src: url(/fonts/sf-pro/SF-Pro.woff2)format("woff2-variations"), url(/fonts/sf-pro/SF-Pro.woff2)format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: SF Pro;
    src: url(/fonts/sf-pro/SF-Pro-Italic.woff2)format("woff2-variations"), url(/fonts/sf-pro/SF-Pro-Italic.woff2)format("woff2");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: Urbanist;
    src: url(/fonts/Urbanist-Regular.ttf)format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Urbanist;
    src: url(/fonts/Urbanist-SemiBold.ttf)format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Urbanist;
    src: url(/fonts/Urbanist-Bold.ttf)format("truetype");
    font-weight: 600 700;
    font-style: normal;
    font-display: swap
}

:root {
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: var(--lh-relaxed);
    font-synthesis: none;
    text-rendering: optimizelegibility
}

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

.data-grid-checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-xs);
    background-color: var(--bg-canvas);
    cursor: pointer;
    width: 16px;
    height: 16px;
    transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
    flex-shrink: 0
}

.data-grid-checkbox:hover {
    border-color: var(--border-strong)
}

.data-grid-checkbox:checked {
    border-color: var(--bg-brand);
    background-color: var(--bg-brand);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http: //www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8 3 3 6-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: 50%;
    background-repeat: no-repeat
}

.data-grid-checkbox:indeterminate {
    border-color: var(--bg-brand);
    background-color: var(--bg-brand);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-position: 50%;
    background-repeat: no-repeat
}

.data-grid-checkbox:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none
}

body {
    background: var(--background);
    min-height: 100vh;
    color: var(--foreground);
    font-family: var(--font-sans);
    margin: 0
}

::view-transition-old(root) {
    mix-blend-mode: normal;
    animation: none
}

::view-transition-new(root) {
    mix-blend-mode: normal;
    animation: none
}

::view-transition-old(root) {
    z-index: 1
}

::view-transition-new(root) {
    z-index: 2;
    animation: .55s cubic-bezier(.16, 1, .3, 1) forwards surgepv-theme-reveal
}

@keyframes surgepv-theme-reveal {
    0% {
        clip-path: circle(0 at var(--theme-transition-x, 50vw) var(--theme-transition-y, 50vh))
    }

    to {
        clip-path: circle(var(--theme-transition-r, 200vmax) at var(--theme-transition-x, 50vw) var(--theme-transition-y, 50vh))
    }
}

@media(prefers-reduced-motion:reduce) {

    *,
    :before,
    :after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important
    }

    ::view-transition-new(root) {
        animation: none
    }

    @layer components {
        .btn {
            transition: none
        }

        .btn-spinner {
            border-top-color: currentColor;
            animation: 1.2s ease-in-out infinite btn-spin-pulse
        }
    }

    @keyframes btn-spin-pulse {

        0%,
        to {
            opacity: .35
        }

        50% {
            opacity: 1
        }
    }
}

@media(prefers-reduced-motion:no-preference) {

    .btn:hover .projects-new-plus,
    .inventory-add-trigger:hover .inventory-add-plus,
    .inventory-add-trigger:focus-within .inventory-add-plus {
        animation: 1s ease-in-out button-plus-pop
    }

    .inventory-add-trigger:hover .inventory-add-chevron,
    .inventory-add-trigger:focus-within .inventory-add-chevron {
        animation: 1s ease-in-out inventory-chevron-bob
    }

    .inventory-add-menu .inventory-add-option--search:is(:hover, [data-highlighted]) img {
        animation: 1.2s ease-in-out inventory-search-wiggle
    }

    .inventory-add-menu .inventory-add-option--request:is(:hover, [data-highlighted]) img {
        animation: 1s ease-in-out button-plus-pop
    }

    .inventory-add-menu .inventory-add-option--upload:is(:hover, [data-highlighted]) img {
        animation: 1s ease-in-out inventory-upload-rise
    }
}

@keyframes button-plus-pop {

    0%,
    to {
        transform: scale(1)rotate(0)
    }

    35% {
        transform: scale(1.2)rotate(10deg)
    }

    70% {
        transform: scale(.85)rotate(-10deg)
    }
}

@keyframes inventory-chevron-bob {

    0%,
    to {
        transform: translateY(0)
    }

    20% {
        transform: translateY(-1.5px)
    }

    55% {
        transform: translateY(4px)
    }
}

@keyframes inventory-search-wiggle {

    0%,
    to {
        transform: translate(0)rotate(0)
    }

    25% {
        transform: translate(2px, -1px)rotate(6deg)
    }

    50% {
        transform: translate(-2px, 2px)rotate(-6deg)
    }

    75% {
        transform: translate(1px, -1px)rotate(4deg)
    }
}

@keyframes inventory-upload-rise {

    0%,
    to {
        transform: translateY(0)
    }

    35% {
        transform: translateY(-3px)
    }

    70% {
        transform: translateY(1px)
    }
}

@media(prefers-reduced-motion:reduce) {
    @layer components {

        .chip:is(button, a),
        .chip[role=button],
        .link {
            transition: none
        }
    }
}

.new-provider-confirmation[data-slot=custom-popup-content] {
    border-radius: 12px;
    width: min(360px, 100vw - 32px)
}

.new-provider-confirmation [data-slot=custom-popup-header] {
    gap: var(--space-10) var(--space-4);
    padding: var(--space-8) var(--space-10) var(--space-2);
    border-bottom: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    display: grid
}

.new-provider-confirmation [data-slot=custom-popup-header-icon] {
    grid-area: 1/1
}

.new-provider-confirmation [data-slot=custom-popup-heading] {
    grid-area: 2/1/3/-1
}

.new-provider-confirmation [data-slot=custom-popup-header] h2 {
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 14px;
    line-height: 1.5
}

.new-provider-confirmation [data-slot=custom-popup-header]>button {
    grid-area: 1/2;
    align-self: start
}

.new-provider-confirmation [data-slot=custom-popup-body] {
    padding: 0 var(--space-10) var(--space-10)
}

.new-provider-confirmation__message {
    font-size: var(--text-body-sm);
    overflow-wrap: anywhere;
    line-height: 1.6
}

.new-provider-confirmation__description {
    color: var(--text-secondary)
}

.new-provider-confirmation__name {
    margin-top: var(--space-12);
    font-weight: var(--weight-medium)
}

.new-provider-confirmation__note {
    margin-top: var(--space-12);
    font-size: var(--text-caption);
    color: var(--text-secondary)
}

.new-provider-confirmation [data-slot=custom-popup-footer] {
    margin: var(--space-16) 0 0;
    gap: var(--space-12);
    border-top: 0;
    padding: 0;
    position: static
}

.new-provider-confirmation [data-slot=custom-popup-footer]>button {
    min-width: 90px;
    height: 40px;
    padding: 0 var(--space-8);
    border-radius: 4px;
    font-size: 14px
}

@media(max-width:640px) {
    .new-provider-confirmation[data-slot=custom-popup-content] {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        width: 100%
    }

    .new-provider-confirmation [data-slot=custom-popup-body] {
        padding-bottom: calc(var(--space-10) + env(safe-area-inset-bottom, 0px))
    }
}

:root {
    --app-default-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cdefs%3E%3Cfilter id='s' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeDropShadow dx='0' dy='1' stdDeviation='0.5' flood-opacity='0.3'/%3E%3C/filter%3E%3C/defs%3E%3Cpath filter='url(%23s)' d='M2.5 1L9.5 19L11.8 12.2L18.5 9.5Z' fill='%231a1a1a' stroke='%23ffffff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 3 1, default
}

html,
body,
.design-studio-canvas {
    cursor: var(--app-default-cursor)
}

input:not([type=checkbox]):not([type=radio]):not([type=range]),
textarea,
select,
[contenteditable=true] {
    cursor: text
}

body {
    overflow: hidden;
    pointer-events: auto !important
}

::-webkit-scrollbar {
    width: var(--space-3)
}

::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--radius-full)
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary)
}

.pac-container {
    border: var(--border-1) solid var(--border-default);
    background: var(--bg-canvas);
    box-shadow: var(--shadow-2);
    color: var(--text-primary);
    font-family: var(--font-sans);
    border-top: 0;
    z-index: 1100 !important
}

.pac-item {
    padding: var(--space-4);
    border-color: var(--border-subtle);
    color: var(--text-secondary);
    font-size: var(--text-caption)
}

.pac-item:hover {
    background: var(--bg-surface-2)
}

.no-spinner::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.no-spinner::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.no-spinner {
    -moz-appearance: textfield
}

.gm-bundled-control>div:first-child {
    display: none !important
}

.report-font {
    font-family: Urbanist, sans-serif
}

.report-bg {
    background-color: var(--report-bg)
}

.report-bg-secondary {
    background-color: var(--report-bg-secondary)
}

.report-text {
    color: var(--report-text)
}

.report-text-secondary {
    color: var(--report-text-secondary)
}

.report-border {
    border: var(--report-border)
}

.light-mode {
    --report-bg: var(--color-neutral-0);
    --report-bg-secondary: var(--color-neutral-0);
    --report-text: var(--color-neutral-950);
    --report-text-secondary: var(--color-neutral-700);
    --report-border: 1px solid #00000026;
    --report-row-fill: #0000000a;
    --report-head-bg: var(--color-gray)
}

.dark-mode {
    --report-bg: var(--report-dark-mode-bg);
    --report-bg-secondary: var(--report-dark-mode-bg-secondary);
    --report-text: var(--report-dark-mode-text);
    --report-text-secondary: var(--report-dark-mode-text-secondary);
    --report-border: 1px solid #ffffff26;
    --report-row-fill: #ffffff0d;
    --report-head-bg: #ffffff1f
}

@property --tw-translate-x {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-translate-y {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-translate-z {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-rotate-x {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-y {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-z {
    syntax: "*";
    inherits: false
}

@property --tw-skew-x {
    syntax: "*";
    inherits: false
}

@property --tw-skew-y {
    syntax: "*";
    inherits: false
}

@property --tw-space-y-reverse {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-space-x-reverse {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-border-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@property --tw-gradient-position {
    syntax: "*";
    inherits: false
}

@property --tw-gradient-from {
    syntax: "<color>";
    inherits: false;
    initial-value: #0000
}

@property --tw-gradient-via {
    syntax: "<color>";
    inherits: false;
    initial-value: #0000
}

@property --tw-gradient-to {
    syntax: "<color>";
    inherits: false;
    initial-value: #0000
}

@property --tw-gradient-stops {
    syntax: "*";
    inherits: false
}

@property --tw-gradient-via-stops {
    syntax: "*";
    inherits: false
}

@property --tw-gradient-from-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 0%
}

@property --tw-gradient-via-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 50%
}

@property --tw-gradient-to-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-leading {
    syntax: "*";
    inherits: false
}

@property --tw-font-weight {
    syntax: "*";
    inherits: false
}

@property --tw-tracking {
    syntax: "*";
    inherits: false
}

@property --tw-ordinal {
    syntax: "*";
    inherits: false
}

@property --tw-slashed-zero {
    syntax: "*";
    inherits: false
}

@property --tw-numeric-figure {
    syntax: "*";
    inherits: false
}

@property --tw-numeric-spacing {
    syntax: "*";
    inherits: false
}

@property --tw-numeric-fraction {
    syntax: "*";
    inherits: false
}

@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-outline-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@property --tw-blur {
    syntax: "*";
    inherits: false
}

@property --tw-brightness {
    syntax: "*";
    inherits: false
}

@property --tw-contrast {
    syntax: "*";
    inherits: false
}

@property --tw-grayscale {
    syntax: "*";
    inherits: false
}

@property --tw-hue-rotate {
    syntax: "*";
    inherits: false
}

@property --tw-invert {
    syntax: "*";
    inherits: false
}

@property --tw-opacity {
    syntax: "*";
    inherits: false
}

@property --tw-saturate {
    syntax: "*";
    inherits: false
}

@property --tw-sepia {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-drop-shadow-size {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-blur {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-brightness {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-contrast {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-grayscale {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-hue-rotate {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-invert {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-opacity {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-saturate {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-sepia {
    syntax: "*";
    inherits: false
}

@property --tw-duration {
    syntax: "*";
    inherits: false
}

@property --tw-ease {
    syntax: "*";
    inherits: false
}

@property --tw-content {
    syntax: "*";
    inherits: false;
    initial-value: ""
}

@property --tw-scale-x {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-scale-y {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-scale-z {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-scroll-snap-strictness {
    syntax: "*";
    inherits: false;
    initial-value: proximity
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes pulse {
    50% {
        opacity: .5
    }
}

@keyframes enter {
    0% {
        opacity: var(--tw-enter-opacity, 1);
        transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0)scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1))rotate(var(--tw-enter-rotate, 0));
        filter: blur(var(--tw-enter-blur, 0))
    }
}

@keyframes exit {
    to {
        opacity: var(--tw-exit-opacity, 1);
        transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0)scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1))rotate(var(--tw-exit-rotate, 0));
        filter: blur(var(--tw-exit-blur, 0))
    }
}

@keyframes accordion-down {
    0% {
        height: 0
    }

    to {
        height: var(--radix-accordion-content-height, var(--bits-accordion-content-height, var(--reka-accordion-content-height, var(--kb-accordion-content-height, var(--ngp-accordion-content-height, auto)))))
    }
}

@keyframes accordion-up {
    0% {
        height: var(--radix-accordion-content-height, var(--bits-accordion-content-height, var(--reka-accordion-content-height, var(--kb-accordion-content-height, var(--ngp-accordion-content-height, auto)))))
    }

    to {
        height: 0
    }
}

/* Incentive 913px modal styling */
.\!w-\[913px\],
.w-\[913px\],
[data-slot="custom-popup-content"]:has(.incentive-drawer),
[data-slot="custom-popup-content"]:has([data-incentive-drawer]),
.incentive-modal-913 {
    width: 913px !important;
    min-width: min(913px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
}

.incentive-drawer,
[data-incentive-drawer] {
    width: 913px !important;
    min-width: min(913px, calc(100vw - 32px)) !important;
    max-width: 100% !important;
}

/* PPA 913px modal styling */
.\!w-\[913px\],
.w-\[913px\],
[data-slot="custom-popup-content"]:has(.ppa-drawer),
[data-slot="custom-popup-content"]:has([data-ppa-drawer]),
.ppa-modal-913 {
    width: 913px !important;
    min-width: min(913px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
}

.ppa-drawer,
[data-ppa-drawer] {
    width: 913px !important;
    min-width: min(913px, calc(100vw - 32px)) !important;
    max-width: 100% !important;
}

/* Custom Tariff: Electricity Rates & Schedule space-between and in one row */
.custom-tariff-row,
[data-custom-tariff-row] {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    gap: 24px !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
}

.custom-tariff-row>div:first-child,
[data-custom-tariff-row]>div:first-child {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: calc(50% - 12px) !important;
}

.custom-tariff-row>div:last-child,
[data-custom-tariff-row]>div:last-child {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: calc(50% - 12px) !important;
}

/* User Cards Responsive Grid */
ul[aria-label="Users"],
ul[aria-label="userManagement.title"],
ul:has(> li > button[data-testid^="user-card-"]),
ul:has(button[data-testid^="user-card-"]),
ul:has(.user-card-button),
ul:has(.user-card-item),
[class*="grid-cols-[repeat(auto-fill"],
div[aria-label="userManagement.title"]:has(> div[data-testid="user-card-loading"]),
div[aria-busy="true"]:has(> div[data-testid="user-card-loading"]),
.user-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 24px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 640px) {

    ul[aria-label="Users"],
    ul[aria-label="userManagement.title"],
    ul:has(> li > button[data-testid^="user-card-"]),
    ul:has(button[data-testid^="user-card-"]),
    ul:has(.user-card-button),
    ul:has(.user-card-item),
    [class*="grid-cols-[repeat(auto-fill"],
    div[aria-label="userManagement.title"]:has(> div[data-testid="user-card-loading"]),
    div[aria-busy="true"]:has(> div[data-testid="user-card-loading"]),
    .user-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* Card List Item wrapper */
li:has(> button[data-testid^="user-card-"]),
li:has(> .user-card-button),
.user-card-item {
    display: flex !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    list-style: none !important;
    box-sizing: border-box !important;
}

/* Card Button Container */
button[data-testid^="user-card-"],
.user-card-button {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 280px !important;
    height: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background-color: #0b1320 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 6px !important;
    padding: 32px 24px 20px 24px !important;
    text-align: center !important;
    cursor: pointer !important;
    outline: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

button[data-testid^="user-card-"]:hover,
.user-card-button:hover {
    border-color: rgba(255, 255, 255, 0.22) !important;
    background-color: #101c2e !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.3) !important;
    transform: translateY(-2px) !important;
}

/* Avatar Circle */
button[data-testid^="user-card-"] [data-testid="avatar"],
.user-card-button [data-testid="avatar"],
button[data-testid^="user-card-"] .rounded-full,
.user-card-button .rounded-full,
button[data-testid^="user-card-"]>div:first-child,
.user-card-button>div:first-child,
div[data-testid="user-card-loading"] .size-\[var\(--unit-70\)\] {
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
    min-height: 76px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 16px auto !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25) !important;
    border: none !important;
}

button[data-testid^="user-card-"] [data-testid="avatar"] span,
.user-card-button [data-testid="avatar"] span,
button[data-testid^="user-card-"] .rounded-full span,
.user-card-button .rounded-full span,
button[data-testid^="user-card-"]>div:first-child span,
.user-card-button>div:first-child span {
    color: #ffffff !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}

/* User Name (h2) */
button[data-testid^="user-card-"] h2,
.user-card-button h2 {
    color: #ffffff !important;
    font-size: 19px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    word-break: break-word !important;
    letter-spacing: -0.01em !important;
}

/* User Role / Designation */
button[data-testid^="user-card-"] p:first-of-type,
.user-card-button p:first-of-type {
    color: #94a3b8 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    margin-top: 2px !important;
    margin-bottom: 4px !important;
}

/* User Email */
button[data-testid^="user-card-"] p:nth-of-type(2),
.user-card-button p:nth-of-type(2) {
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    word-break: break-all !important;
}

/* Bottom Divider Container */
button[data-testid^="user-card-"]>div:last-child,
.user-card-button>div:last-child,
div[data-testid="user-card-loading"]>div:last-child {
    margin-top: auto !important;
    width: 100% !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-top: 18px !important;
    margin-top: 24px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Status Badge (ACTIVE) */
button[data-testid^="user-card-"]>div:last-child span,
.user-card-button>div:last-child span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 18px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    border: 1px solid rgba(14, 165, 233, 0.35) !important;
    background-color: rgba(2, 132, 199, 0.1) !important;
    color: #38bdf8 !important;
    border-radius: 4px !important;
    line-height: 1.4 !important;
    transition: all 0.15s ease !important;
}

/* Skeleton Card styling */
div[data-testid="user-card-loading"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    min-height: 280px !important;
    height: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background-color: #0b1320 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 6px !important;
    padding: 32px 24px 20px 24px !important;
}

/* Project Pricing / Project Rate: Prevent Rupee currency symbol from overlapping input count / placeholder */
input.\!pl-\[42px\],
input.\!pl-\[48px\],
input[class*="pl-[42px]"],
input[class*="pl-[48px]"],
.relative.min-w-0>span.pointer-events-none+div input,
.relative.min-w-0>span.pointer-events-none~div input,
.relative.min-w-0>span.pointer-events-none+div .relative input,
.relative.min-w-0>span.pointer-events-none~div .relative input {
    padding-left: 48px !important;
}

        /* Proposal Editor & Reports: Ensure text typed into inputs/textareas is dark and visible on white/light sheets in dark mode */
        .report-font input,
        .report-font textarea,
        .light-mode input,
        .light-mode textarea,
        [class*="light-mode"] textarea,
        [class*="light-mode"] input,
        .bg-white textarea,
        .bg-white input,
        textarea[placeholder*="Default"],
        input[placeholder*="Default"],
        .report-font [contenteditable="true"],
        .light-mode [contenteditable="true"],
        .bg-white [contenteditable="true"] {
            color: #111827 !important;
            caret-color: #111827 !important;
            background-color: #ffffff !important;
            -webkit-text-fill-color: #111827 !important;
        }

        .report-font input::placeholder,
        .report-font textarea::placeholder,
        .light-mode input::placeholder,
        .light-mode textarea::placeholder,
        [class*="light-mode"] textarea::placeholder,
        [class*="light-mode"] input::placeholder,
        .bg-white textarea::placeholder,
        .bg-white input::placeholder,
        textarea[placeholder*="Default"]::placeholder,
        input[placeholder*="Default"]::placeholder {
            color: #9ca3af !important;
            -webkit-text-fill-color: #9ca3af !important;
            opacity: 1 !important;
        }

        .report-font input::selection,
        .report-font textarea::selection,
        .light-mode input::selection,
        .light-mode textarea::selection,
        .bg-white textarea::selection,
        .bg-white input::selection {
            background-color: #bfdbfe !important;
            color: #1e3a8a !important;
            -webkit-text-fill-color: #1e3a8a !important;
        }


/* Clara AI completely hidden across application */
.clara-launcher,
[data-testid="clara-launcher"],
.clara-panel,
[aria-label*="Clara"],
.clara-launcher-orb,
.clara-launcher-label {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
}


/* Enhanced Header Logo Size */
header a[aria-label*="home"] img,
/* Header and Logo Sizing & Spacing */
header {
    height: 66px !important;
    min-height: 66px !important;
    max-height: 66px !important;
}

header a[href="/projects"] img,
header a:has(img[src*="solarmatrix-logo"]) img,
header a[aria-label*="home"] img,
header .shrink-0 > img[src*="solarmatrix-logo"],
header img[alt*="SolarMatrix"],
header img[src*="solarmatrix-logo"],
header img[src*="surgepv-logo"] {
    height: 46px !important;
    max-height: 46px !important;
    min-height: 46px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: left center !important;
    display: block !important;
}