.ag-card,
.ag-button,
.ag-input,
.ag-choice,
.ag-switch,
.ag-action,
.ag-chip,
.ag-mini-box,
.ag-tag,
.ag-icon {
	--ag-color-main: var(--ag-accent);
	--ag-color-line: var(--ag-accent-line);
	--ag-color-divider: var(--ag-divider-accent);
	--ag-color-divider-strong: var(--ag-divider-accent-strong);
	--ag-color-soft: rgb(var(--ag-rgb-accent) / .097);
	--ag-color-soft-strong: rgb(var(--ag-rgb-accent) / .13);
	--ag-color-flat: rgb(var(--ag-rgb-accent) / .13);
	--ag-color-flat-strong: rgb(var(--ag-rgb-accent) / .17);
	--ag-color-shadow: rgb(var(--ag-rgb-accent) / .09);
	--ag-color-solid-bg: var(--ag-accent);
	--ag-color-solid-hover-bg: var(--ag-accent-hover);
	--ag-color-solid-text: var(--ag-on-accent)
}
.ag-card--brand,
.ag-button--brand,
.ag-input--brand,
.ag-choice--brand,
.ag-switch--brand,
.ag-action--brand,
.ag-chip--brand,
.ag-mini-box--brand,
.ag-tag--brand,
.ag-icon--brand {
	--ag-color-main: var(--ag-brand);
	--ag-color-line: var(--ag-brand-line);
	--ag-color-divider: var(--ag-divider-brand);
	--ag-color-divider-strong: var(--ag-divider-brand-strong);
	--ag-color-soft: rgb(var(--ag-rgb-brand) / .087);
	--ag-color-soft-strong: rgb(var(--ag-rgb-brand) / .15);
	--ag-color-flat: rgb(var(--ag-rgb-brand) / .15);
	--ag-color-flat-strong: rgb(var(--ag-rgb-brand) / .20);
	--ag-color-shadow: rgb(var(--ag-rgb-brand) / .10);
	--ag-color-solid-bg: var(--ag-brand);
	--ag-color-solid-hover-bg: var(--ag-brand-hover);
	--ag-color-solid-text: var(--ag-on-brand)
}

.ag-card--accent,
.ag-button--accent,
.ag-input--accent,
.ag-choice--accent,
.ag-switch--accent,
.ag-action--accent,
.ag-chip--accent,
.ag-mini-box--accent,
.ag-tag--accent,
.ag-icon--accent {
	--ag-color-main: var(--ag-accent);
	--ag-color-line: var(--ag-accent-line);
	--ag-color-divider: var(--ag-divider-accent);
	--ag-color-divider-strong: var(--ag-divider-accent-strong);
	--ag-color-soft: rgb(var(--ag-rgb-accent) / .097);
	--ag-color-soft-strong: rgb(var(--ag-rgb-accent) / .13);
	--ag-color-flat: rgb(var(--ag-rgb-accent) / .13);
	--ag-color-flat-strong: rgb(var(--ag-rgb-accent) / .17);
	--ag-color-shadow: rgb(var(--ag-rgb-accent) / .09);
	--ag-color-solid-bg: var(--ag-accent);
	--ag-color-solid-hover-bg: var(--ag-accent-hover);
	--ag-color-solid-text: var(--ag-on-accent)
}
.ag-card--earth,
.ag-button--earth,
.ag-input--earth,
.ag-choice--earth,
.ag-switch--earth,
.ag-action--earth,
.ag-chip--earth,
.ag-mini-box--earth,
.ag-tag--earth,
.ag-icon--earth {
	--ag-color-main: var(--ag-earth);
	--ag-color-line: var(--ag-earth-line);
	--ag-color-divider: var(--ag-divider-earth);
	--ag-color-divider-strong: var(--ag-divider-earth-strong);
	--ag-color-soft: rgb(var(--ag-rgb-earth) / .087);
	--ag-color-soft-strong: rgb(var(--ag-rgb-earth) / .13);
	--ag-color-flat: rgb(var(--ag-rgb-earth) / .13);
	--ag-color-flat-strong: rgb(var(--ag-rgb-earth) / .17);
	--ag-color-shadow: rgb(var(--ag-rgb-earth) / .085);
	--ag-color-solid-bg: var(--ag-earth);
	--ag-color-solid-hover-bg: var(--ag-earth-hover);
	--ag-color-solid-text: var(--ag-on-earth)
}
.ag-card--ghost,
.ag-button--ghost,
.ag-input--ghost,
.ag-choice--ghost,
.ag-switch--ghost,
.ag-action--ghost,
.ag-chip--ghost,
.ag-mini-box--ghost,
.ag-tag--ghost,
.ag-icon--ghost {
	--ag-color-main: var(--ag-ghost);
	--ag-color-line: var(--ag-ghost-line);
	--ag-color-divider: var(--ag-divider-ghost);
	--ag-color-divider-strong: var(--ag-divider-ghost-strong);
	--ag-color-soft: rgb(var(--ag-rgb-ghost) / .082);
	--ag-color-soft-strong: rgb(var(--ag-rgb-ghost) / .14);
	--ag-color-flat: rgb(var(--ag-rgb-ghost) / .14);
	--ag-color-flat-strong: rgb(var(--ag-rgb-ghost) / .18);
	--ag-color-shadow: rgb(var(--ag-rgb-ghost) / .085);
	--ag-color-solid-bg: var(--ag-ghost);
	--ag-color-solid-hover-bg: var(--ag-ghost-hover);
	--ag-color-solid-text: var(--ag-on-ghost)
}

.ag-action--green,
.ag-chip--green,
.ag-mini-box--green,
.ag-tag--green {
	--ag-color-main: var(--ag-green);
	--ag-color-line: rgb(var(--ag-rgb-green) / .40);
	--ag-color-divider: rgb(var(--ag-rgb-green) / .14);
	--ag-color-divider-strong: rgb(var(--ag-rgb-green) / .18);
	--ag-color-soft: rgb(var(--ag-rgb-green) / .055);
	--ag-color-soft-strong: rgb(var(--ag-rgb-green) / .13);
	--ag-color-flat: rgb(var(--ag-rgb-green) / .11);
	--ag-color-flat-strong: rgb(var(--ag-rgb-green) / .17);
	--ag-color-shadow: rgb(var(--ag-rgb-green) / .09);
	--ag-color-solid-bg: var(--ag-green);
	--ag-color-solid-hover-bg: var(--ag-green);
	--ag-color-solid-text: var(--ag-on-green)
}

:where([class^="ag-"], [class*=" ag-"], [class^="ag-"] *, [class*=" ag-"] *) {
	box-sizing: border-box
}

.ag-card {
	--ag-frame-line: var(--ag-color-line);
	--ag-frame-fill-a: rgb(var(--ag-rgb-brand) / .10);
	--ag-frame-fill-b: var(--ag-card-frame-default-fill-b);
	--ag-frame-fill-c: var(--ag-card-frame-default-fill-c);
	--ag-frame-light-a: rgb(var(--ag-rgb-accent) / .067);
	--ag-frame-light-b: rgb(var(--ag-rgb-accent) / .035);
	--ag-frame-light-c: var(--ag-card-frame-default-light-c);
	--ag-frame-border-glow: rgb(var(--ag-rgb-accent) / .095);
	position: relative;
	isolation: isolate;
	color: var(--ag-text)
}
.ag-card--brand {
	--ag-frame-line: var(--ag-color-line);
	--ag-frame-fill-a: rgb(var(--ag-rgb-brand) / .16);
	--ag-frame-fill-b: var(--ag-card-frame-brand-fill-b);
	--ag-frame-fill-c: var(--ag-card-frame-brand-fill-c);
	--ag-frame-light-a: rgb(var(--ag-rgb-brand) / .080);
	--ag-frame-light-b: var(--ag-card-frame-brand-light-b);
	--ag-frame-light-c: var(--ag-card-frame-brand-light-c);
	--ag-frame-border-glow: rgb(var(--ag-rgb-brand) / .105)
}
.ag-card--earth {
	--ag-frame-line: var(--ag-color-line);
	--ag-frame-fill-a: rgb(var(--ag-rgb-earth) / .13);
	--ag-frame-fill-b: var(--ag-card-frame-earth-fill-b);
	--ag-frame-fill-c: var(--ag-card-frame-earth-fill-c);
	--ag-frame-light-a: rgb(var(--ag-rgb-earth) / .073);
	--ag-frame-light-b: var(--ag-card-frame-earth-light-b);
	--ag-frame-light-c: var(--ag-card-frame-earth-light-c);
	--ag-frame-border-glow: rgb(var(--ag-rgb-earth) / .095)
}
.ag-card--ghost {
	--ag-frame-line: var(--ag-color-line);
	--ag-frame-fill-a: var(--ag-card-frame-ghost-fill-a);
	--ag-frame-fill-b: var(--ag-card-frame-ghost-fill-b);
	--ag-frame-fill-c: var(--ag-card-frame-ghost-fill-c);
	--ag-frame-light-a: rgb(var(--ag-rgb-ghost) / .060);
	--ag-frame-light-b: rgb(var(--ag-rgb-ghost) / .031);
	--ag-frame-light-c: var(--ag-card-frame-ghost-light-c);
	--ag-frame-border-glow: var(--ag-card-frame-ghost-border-glow)
}
.ag-card--glow {
	filter: var(--ag-card-glow-filter)
}
.ag-card--glow::before {
	content: "";
	position: absolute;
	inset: 1px;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, var(--ag-frame-light-c), transparent 32%), linear-gradient(180deg, var(--ag-card-glow-overlay-top), var(--ag-card-glow-overlay-bottom));
	box-shadow: inset 0 0 38px var(--ag-frame-light-b), inset 0 0 16px var(--ag-frame-light-a), inset 0 0 1px var(--ag-card-glow-highlight), inset 0 1px 0 var(--ag-card-glow-highlight-top), inset 0 -1px 0 var(--ag-card-glow-shadow-bottom);
	opacity: var(--ag-card-glow-opacity);
	clip-path: var(--ag-frame-clip, none)
}
.ag-card--textured {
	--ag-card-texture-opacity: .50;
	--ag-card-texture-line-a: var(--ag-card-texture-base-line-a);
	--ag-card-texture-line-b: var(--ag-card-texture-base-line-b);
	--ag-card-texture-size: 26px;
	--ag-card-texture-blend: screen
}
.ag-card--soft.ag-card--textured {
	--ag-card-texture-opacity: .68;
	--ag-card-texture-line-a: var(--ag-card-texture-soft-line-a);
	--ag-card-texture-line-b: var(--ag-card-texture-soft-line-b)
}
.ag-card--flat.ag-card--textured {
	--ag-card-texture-opacity: .64;
	--ag-card-texture-line-a: var(--ag-card-texture-flat-line-a);
	--ag-card-texture-line-b: var(--ag-card-texture-flat-line-b)
}
.ag-card--solid.ag-card--textured {
	--ag-card-texture-opacity: .10;
	--ag-card-texture-line-a: var(--ag-color-line);
	--ag-card-texture-line-b: var(--ag-color-line);
	--ag-card-texture-blend: multiply
}
@supports (color: color-mix(in srgb, red 50%, black)) {
	.ag-card--solid.ag-card--textured {
		--ag-card-texture-line-a: color-mix(in srgb, var(--ag-color-solid-bg) 68%, black);
		--ag-card-texture-line-b: color-mix(in srgb, var(--ag-color-solid-bg) 78%, black)
	}
}
.ag-card--glow.ag-card--textured {
	--ag-card-texture-opacity: .56
}
.ag-card--textured::after {
	content: "";
	position: absolute;
	inset: 1px;
	z-index: 1;
	pointer-events: none;
	clip-path: var(--ag-frame-clip, none);
	background: linear-gradient(var(--ag-card-texture-line-a) 1px, transparent 1px), linear-gradient(90deg, var(--ag-card-texture-line-b) 1px, transparent 1px);
	background-size: var(--ag-card-texture-size) var(--ag-card-texture-size);
	mix-blend-mode: var(--ag-card-texture-blend);
	opacity: var(--ag-card-texture-opacity)
}
.ag-card--soft {
	--ag-frame-fill-a: transparent;
	--ag-frame-fill-b: transparent;
	--ag-frame-fill-c: transparent;
	--ag-frame-border-glow: transparent;
	background: transparent
}
.ag-card--soft::before {
	content: "";
	position: absolute;
	inset: 1px;
	z-index: 1;
	pointer-events: none;
	clip-path: var(--ag-frame-clip, none);
	background: var(--ag-color-soft);
	box-shadow: none;
	opacity: 1
}
.ag-card--soft .ag-frame__bg,
.ag-card--soft .ag-frame__glow {
	opacity: 0
}
.ag-card.ag-card--flat {
	--ag-frame-line: transparent;
	--ag-frame-fill-a: transparent;
	--ag-frame-fill-b: transparent;
	--ag-frame-fill-c: transparent;
	--ag-frame-border-glow: transparent;
	background: var(--ag-color-flat);
	clip-path: var(--ag-frame-clip, none)
}
.ag-card.ag-card--flat::before {
	opacity: 0
}
.ag-card.ag-card--flat .ag-frame__bg,
.ag-card.ag-card--flat .ag-frame__glow,
.ag-card.ag-card--flat .ag-frame__line {
	opacity: 0
}
.ag-card.ag-card--solid {
	--ag-frame-line: transparent;
	--ag-frame-fill-a: transparent;
	--ag-frame-fill-b: transparent;
	--ag-frame-fill-c: transparent;
	--ag-frame-border-glow: transparent;
	background: var(--ag-color-solid-bg);
	clip-path: var(--ag-frame-clip, none)
}
.ag-card.ag-card--solid::before {
	opacity: 0
}
.ag-card.ag-card--solid .ag-frame__bg,
.ag-card.ag-card--solid .ag-frame__glow,
.ag-card.ag-card--solid .ag-frame__line {
	opacity: 0
}

.ag-frame {
	--ag-frame-clip: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	position: relative;
	isolation: isolate;
	border: 0;
	background: transparent
}
.ag-frame--corners-2 {
	--ag-frame-clip: polygon(var(--ag-frame-cut) 0, 100% 0, 100% calc(100% - var(--ag-frame-cut)), calc(100% - var(--ag-frame-cut)) 100%, 0 100%, 0 var(--ag-frame-cut))
}
.ag-frame--corners-4 {
	--ag-frame-clip: polygon(var(--ag-frame-cut) 0, calc(100% - var(--ag-frame-cut)) 0, 100% var(--ag-frame-cut), 100% calc(100% - var(--ag-frame-cut)), calc(100% - var(--ag-frame-cut)) 100%, var(--ag-frame-cut) 100%, 0 calc(100% - var(--ag-frame-cut)), 0 var(--ag-frame-cut))
}
.ag-frame > *:not(.ag-frame__svg) {
	position: relative;
	z-index: 2
}
.ag-frame__svg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: visible
}
.ag-frame__bg {
	opacity: 0;
	fill: url(#ag-frame-gradient)
}

.ag-card--glow .ag-frame__bg {
	opacity: 1
}

.ag-frame__glow {
	fill: none;
	stroke: var(--ag-frame-border-glow);
	stroke-width: var(--ag-frame-glow-width);
	stroke-linejoin: miter;
	vector-effect: non-scaling-stroke;
	filter: var(--ag-frame-glow-filter)
}
.ag-frame__line {
	fill: none;
	stroke: var(--ag-frame-line);
	stroke-width: var(--ag-frame-line-width);
	stroke-linejoin: miter;
	vector-effect: non-scaling-stroke;
	shape-rendering: geometricPrecision
}
.ag-frame--inner {
	--ag-frame-inner-line: var(--ag-color-line, var(--ag-frame-line));
	--ag-frame-inner-opacity: .58;
	--ag-frame-inner-offset: 8px;
	--ag-frame-inner-run-ratio: 1.55;
	--ag-frame-inner-min-run: 18px
}

.ag-card--soft.ag-frame--inner {
	--ag-frame-inner-opacity: .54
}
.ag-card--flat.ag-frame--inner {
	--ag-frame-inner-opacity: .48
}
.ag-card--textured.ag-frame--inner {
	--ag-frame-inner-opacity: .46
}
.ag-card--solid.ag-frame--inner {
	--ag-frame-inner-line: var(--ag-color-line);
	--ag-frame-inner-opacity: .72
}
@supports (color: color-mix(in srgb, red 50%, black)) {
	.ag-card--solid.ag-frame--inner {
		--ag-frame-inner-line: color-mix(in srgb, var(--ag-color-solid-bg) 58%, black)
	}
}
.ag-card--solid.ag-card--textured.ag-frame--inner {
	--ag-frame-inner-opacity: .66
}

.ag-frame__inner {
	fill: none;
	stroke: var(--ag-frame-inner-line);
	stroke-width: var(--ag-frame-inner-width);
	stroke-linecap: square;
	stroke-linejoin: miter;
	vector-effect: non-scaling-stroke;
	shape-rendering: geometricPrecision;
	opacity: 0
}
.ag-frame--inner .ag-frame__inner {
	opacity: var(--ag-frame-inner-opacity)
}
.ag-frame--cut-xs {
	--ag-frame-cut: var(--ag-cut-xs)
}
.ag-frame--cut-sm {
	--ag-frame-cut: var(--ag-cut-sm)
}
.ag-frame--cut-md {
	--ag-frame-cut: var(--ag-cut-md)
}
.ag-frame--cut-lg {
	--ag-frame-cut: var(--ag-cut-lg)
}

.ag-button {
	--ag-frame-cut: var(--ag-cut-sm);
	--ag-frame-line: var(--ag-color-line);
	--ag-button-bg: transparent;
	--ag-button-text: var(--ag-color-main);
	--ag-button-hover-text: var(--ag-title);
	--ag-hover-effect-background: var(--ag-button-overlay-color)
}
.ag-button--solid {
	--ag-frame-line: transparent;
	--ag-button-bg: var(--ag-color-solid-bg);
	--ag-button-text: var(--ag-color-solid-text);
	--ag-button-hover-text: var(--ag-color-solid-text);
	--ag-hover-effect-background: var(--ag-color-solid-hover-bg)
}
.ag-button--soft {
	--ag-button-bg: var(--ag-color-soft);
	--ag-hover-effect-background: var(--ag-color-soft-strong)
}
.ag-button--flat {
	--ag-frame-line: transparent;
	--ag-button-bg: var(--ag-color-flat);
	--ag-hover-effect-background: var(--ag-color-flat-strong)
}
.ag-button--hover-solid {
	--ag-button-hover-text: var(--ag-color-solid-text);
	--ag-hover-effect-background: var(--ag-color-solid-bg)
}
.ag-button > .ag-button__inner,
.ag-button.ag-button__inner {
	--ag-frame-fill-a: transparent;
	--ag-frame-fill-b: transparent;
	--ag-frame-fill-c: transparent;
	--ag-frame-border-glow: transparent;
	position: relative;
	overflow: hidden;
	border: 0;
	background: var(--ag-button-bg);
	color: var(--ag-button-text);
	text-decoration: none;
	cursor: pointer;
	isolation: isolate;
	transition: color var(--ag-button-hover-duration, 300ms) ease, transform var(--ag-button-hover-duration, 300ms) ease, background var(--ag-button-hover-duration, 300ms) ease
}
.ag-button > .ag-button__inner:hover,
.ag-button > .ag-button__inner:focus-visible,
.ag-button.ag-button__inner:hover,
.ag-button.ag-button__inner:focus-visible {
	color: var(--ag-button-hover-text);
	text-decoration: none
}
.ag-button--soft > .ag-button__inner:hover,
.ag-button--soft > .ag-button__inner:focus-visible,
.ag-button--soft.ag-button__inner:hover,
.ag-button--soft.ag-button__inner:focus-visible {
	background: var(--ag-color-soft-strong)
}
.ag-button--flat > .ag-button__inner:hover,
.ag-button--flat > .ag-button__inner:focus-visible,
.ag-button--flat.ag-button__inner:hover,
.ag-button--flat.ag-button__inner:focus-visible {
	background: var(--ag-color-flat-strong)
}
.ag-button--flat > .ag-button__inner:focus-visible,
.ag-button--flat.ag-button__inner:focus-visible {
	filter: drop-shadow(0 0 6px var(--ag-color-shadow))
}
.ag-button .ag-frame__bg,
.ag-button .ag-frame__glow {
	opacity: 0
}
.ag-button > .ag-button__inner,
.ag-button > .ag-button__inner .ag-button__overlay,
.ag-button.ag-button__inner,
.ag-button.ag-button__inner .ag-button__overlay {
	clip-path: var(--ag-frame-clip)
}
.ag-button > .ag-button__inner .ag-button__overlay,
.ag-button.ag-button__inner .ag-button__overlay {
	position: absolute;
	inset: -1px;
	z-index: 1;
	pointer-events: none;
	display: block;
	border-radius: 0;
	background: var(--ag-hover-effect-background);
	transform-origin: center center;
	opacity: 1;
	transition: transform var(--ag-button-hover-duration, 300ms) ease, opacity var(--ag-button-hover-duration, 300ms) ease
}
.ag-button > .ag-button__inner .ag-button__content,
.ag-button.ag-button__inner .ag-button__content {
	position: relative;
	z-index: 2
}

.ag-status {
	--ag-status-glow: rgb(var(--ag-rgb-green) / .78);
	--ag-status-glow-soft: rgb(var(--ag-rgb-green) / .38);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	color: var(--ag-green);
	font-family: var(--ag-mono);
	font-size: var(--ag-txt-control-size);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase
}
.ag-status--online {
	color: var(--ag-green);
	--ag-status-glow: rgb(var(--ag-rgb-green) / .78);
	--ag-status-glow-soft: rgb(var(--ag-rgb-green) / .38)
}
.ag-status--offline {
	color: var(--ag-brown);
	--ag-status-glow: rgb(var(--ag-rgb-brown) / .18);
	--ag-status-glow-soft: transparent
}
.ag-status--warning {
	color: var(--ag-brand);
	--ag-status-glow: rgb(var(--ag-rgb-brand) / .72);
	--ag-status-glow-soft: rgb(var(--ag-rgb-brand) / .34)
}
.ag-status::before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: currentColor;
	box-shadow: 0 0 0 1px var(--ag-status-ring-color), 0 0 8px var(--ag-status-glow), 0 0 16px var(--ag-status-glow), 0 0 28px var(--ag-status-glow-soft)
}

.ag-txt-hero {
	margin: 0;
	color: var(--ag-title);
	font-family: var(--ag-font);
	font-size: var(--ag-txt-hero-size);
	font-weight: var(--ag-txt-hero-weight);
	line-height: var(--ag-txt-hero-line-height);
	letter-spacing: var(--ag-txt-hero-letter-spacing);
	text-transform: uppercase
}
.ag-txt-section {
	margin: 0;
	color: var(--ag-title);
	font-family: var(--ag-font);
	font-size: var(--ag-txt-section-size);
	font-weight: var(--ag-txt-section-weight);
	line-height: var(--ag-txt-section-line-height);
	letter-spacing: var(--ag-txt-section-letter-spacing);
	text-transform: uppercase
}
.ag-txt-title {
	margin: 0;
	color: var(--ag-title);
	font-family: var(--ag-font);
	font-size: var(--ag-txt-title-size);
	font-weight: var(--ag-txt-title-weight);
	line-height: var(--ag-txt-title-line-height);
	letter-spacing: var(--ag-txt-title-letter-spacing);
	text-transform: uppercase
}
.ag-txt-body {
	margin: 0;
	color: var(--ag-text);
	font-family: var(--ag-font);
	font-size: var(--ag-txt-body-size);
	font-weight: var(--ag-txt-body-weight);
	line-height: var(--ag-txt-body-line-height)
}
.ag-txt-meta {
	margin: 0;
	color: var(--ag-accent);
	font-family: var(--ag-mono);
	font-size: var(--ag-txt-meta-size);
	font-weight: var(--ag-txt-meta-weight);
	line-height: var(--ag-txt-meta-line-height);
	letter-spacing: var(--ag-txt-meta-letter-spacing);
	text-transform: uppercase
}
.ag-txt-small {
	color: var(--ag-text-soft);
	font-family: var(--ag-font);
	font-size: var(--ag-txt-small-size);
	font-weight: var(--ag-txt-small-weight);
	line-height: var(--ag-txt-small-line-height)
}
.ag-txt-label {
	color: var(--ag-color-main, var(--ag-accent));
	font-family: var(--ag-mono);
	font-size: var(--ag-txt-label-size);
	font-weight: var(--ag-txt-label-weight);
	line-height: var(--ag-txt-label-line-height);
	letter-spacing: var(--ag-txt-label-letter-spacing);
	text-transform: uppercase
}
.ag-txt-code {
	color: var(--ag-green);
	font-family: var(--ag-mono);
	font-size: var(--ag-txt-code-size);
	font-weight: var(--ag-txt-code-weight);
	line-height: var(--ag-txt-code-line-height);
	letter-spacing: var(--ag-txt-code-letter-spacing);
	text-transform: none
}

.ag-action,
.ag-chip,
.ag-mini-box,
.ag-tag,
.ag-icon {
	--ag-frame-line: var(--ag-color-line);
	--ag-frame-border-glow: transparent;
	--ag-frame-cut: var(--ag-cut-xs);
	--ag-frame-clip: polygon(var(--ag-frame-cut) 0, 100% 0, 100% calc(100% - var(--ag-frame-cut)), calc(100% - var(--ag-frame-cut)) 100%, 0 100%, 0 var(--ag-frame-cut));
	position: relative;
	isolation: isolate;
	border: 0;
	background: transparent;
	color: var(--ag-title);
	clip-path: var(--ag-frame-clip, none)
}

.ag-corners-2 {
	--ag-frame-clip: polygon(var(--ag-frame-cut) 0, 100% 0, 100% calc(100% - var(--ag-frame-cut)), calc(100% - var(--ag-frame-cut)) 100%, 0 100%, 0 var(--ag-frame-cut))
}
.ag-corners-4 {
	--ag-frame-clip: polygon(var(--ag-frame-cut) 0, calc(100% - var(--ag-frame-cut)) 0, 100% var(--ag-frame-cut), 100% calc(100% - var(--ag-frame-cut)), calc(100% - var(--ag-frame-cut)) 100%, var(--ag-frame-cut) 100%, 0 calc(100% - var(--ag-frame-cut)), 0 var(--ag-frame-cut))
}
.ag-cut-xs {
	--ag-frame-cut: var(--ag-cut-xs)
}
.ag-cut-sm {
	--ag-frame-cut: var(--ag-cut-sm)
}
.ag-cut-md {
	--ag-frame-cut: var(--ag-cut-md)
}
.ag-cut-lg {
	--ag-frame-cut: var(--ag-cut-lg)
}

.ag-action {
	--ag-frame-cut: var(--ag-cut-sm);
	cursor: pointer
}
.ag-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px
}
.ag-tag {
	color: var(--ag-color-main)
}
.ag-mini-box > span {
	color: var(--ag-text-soft)
}
.ag-mini-box > strong {
	color: var(--ag-title)
}
.ag-icon {
	color: var(--ag-color-main)
}
.ag-icon > :is(svg:not(.ag-frame__svg), img),
.ag-icon > *:not(.ag-frame__svg) :is(svg, img) {
	position: relative;
	z-index: 2;
	color: currentColor
}
.ag-icon > svg:not(.ag-frame__svg),
.ag-icon > *:not(.ag-frame__svg) svg {
	fill: currentColor;
	stroke: currentColor
}
.ag-icon :is(svg:not(.ag-frame__svg)) [fill="none"] {
	fill: none
}
.ag-icon :is(svg:not(.ag-frame__svg)) [stroke="none"] {
	stroke: none
}
.ag-action--soft,
.ag-chip--soft,
.ag-mini-box--soft,
.ag-tag--soft,
.ag-icon--soft {
	--ag-frame-line: var(--ag-color-line);
	background: var(--ag-color-soft)
}
.ag-action--flat,
.ag-chip--flat,
.ag-mini-box--flat,
.ag-tag--flat,
.ag-icon--flat {
	--ag-frame-line: transparent;
	color: var(--ag-title);
	background: var(--ag-color-flat)
}
.ag-action--solid,
.ag-chip--solid,
.ag-mini-box--solid,
.ag-tag--solid,
.ag-icon--solid {
	--ag-frame-line: transparent;
	color: var(--ag-color-solid-text);
	background: var(--ag-color-solid-bg);
	box-shadow: var(--ag-compact-solid-shadow)
}
.ag-action--off,
.ag-chip--off,
.ag-mini-box--off,
.ag-tag--off {
	--ag-color-main: var(--ag-brown);
	--ag-color-line: rgb(var(--ag-rgb-brown) / .44);
	--ag-color-divider: rgb(var(--ag-rgb-brown) / .14);
	--ag-color-divider-strong: rgb(var(--ag-rgb-brown) / .18);
	--ag-color-soft: rgb(var(--ag-rgb-brown) / .060);
	--ag-color-soft-strong: rgb(var(--ag-rgb-brown) / .13);
	--ag-color-flat: rgb(var(--ag-rgb-brown) / .105);
	--ag-color-flat-strong: rgb(var(--ag-rgb-brown) / .16);
	--ag-color-shadow: transparent;
	--ag-color-solid-bg: var(--ag-brown);
	--ag-color-solid-hover-bg: var(--ag-brown);
	--ag-color-solid-text: var(--ag-on-brown);
	color: var(--ag-text-soft)
}
:is(.ag-action, .ag-chip, .ag-mini-box, .ag-tag, .ag-icon) .ag-frame__bg,
:is(.ag-action, .ag-chip, .ag-mini-box, .ag-tag, .ag-icon) .ag-frame__glow {
	opacity: 0
}

.ag-input,
.ag-choice,
.ag-switch {
	--ag-frame-line: var(--ag-color-line);
	--ag-frame-fill-a: transparent;
	--ag-frame-fill-b: transparent;
	--ag-frame-fill-c: transparent;
	--ag-frame-border-glow: transparent
}
.ag-input {
	display: flex;
	align-items: stretch;
	min-height: var(--ag-size-control-height);
	padding: 0;
	color: var(--ag-title);
	font-family: var(--ag-mono);
	font-size: 14px;
	line-height: 1.34;
	transition: filter 220ms ease
}
.ag-input::before {
	content: "";
	position: absolute;
	inset: 1px;
	z-index: 1;
	pointer-events: none;
	clip-path: var(--ag-frame-clip, none);
	background: transparent;
	opacity: 0;
	transition: background 220ms ease, opacity 220ms ease
}
.ag-input--soft::before {
	background: var(--ag-color-soft);
	opacity: 1
}
.ag-input--flat {
	--ag-frame-line: transparent;
	background: var(--ag-color-flat);
	clip-path: var(--ag-frame-clip, none)
}
.ag-input--flat::before {
	opacity: 0
}
.ag-input:focus-within::before {
	background: var(--ag-color-soft);
	opacity: 1
}
.ag-input--soft:focus-within::before {
	background: var(--ag-color-soft-strong)
}
.ag-input--flat:focus-within::before {
	opacity: 0
}
.ag-input:focus-within {
	--ag-frame-line: var(--ag-color-line);
	filter: drop-shadow(0 0 6px var(--ag-color-shadow))
}
.ag-input.ag-input--flat:focus-within {
	--ag-frame-line: transparent;
	background: var(--ag-color-flat-strong)
}

.ag-input .ag-frame__bg,
.ag-input .ag-frame__glow {
	opacity: 0
}

.ag-input :is(input, textarea, select) {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	min-width: 0;
	border: 0;
	outline: 0;
	color: inherit;
	font: inherit;
	background: transparent
}
.ag-input :is(input, select) {
	min-height: var(--ag-size-control-height);
	padding: 0 16px
}
.ag-input :is(input, textarea, select)::placeholder {
	color: var(--ag-text-soft)
}
.ag-input input[type="number"] {
	appearance: textfield;
	-moz-appearance: textfield
}
.ag-input input[type="number"]::-webkit-outer-spin-button,
.ag-input input[type="number"]::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none
}
.ag-input:has(textarea) {
	min-height: var(--ag-size-textarea-height)
}
.ag-input textarea {
	min-height: var(--ag-size-textarea-height);
	padding: 14px 16px;
	resize: none;
	line-height: 1.42
}
.ag-input--resizable textarea {
	resize: vertical
}
.ag-input select {
	appearance: none;
	padding-right: 46px;
	border-radius: 0;
	cursor: pointer;
	color-scheme: dark
}
.ag-input select option,
.ag-input select optgroup {
	border: 0;
	border-radius: 0;
	outline: 0;
	color: var(--ag-text);
	font-family: var(--ag-mono);
	background-color: var(--ag-bg)
}
.ag-input select option:hover,
.ag-input select option:focus,
.ag-input select option:active {
	color: var(--ag-title);
	background-color: var(--ag-bg-soft);
	box-shadow: 0 0 0 999px var(--ag-bg-soft) inset
}
.ag-input select option:checked {
	color: var(--ag-title);
	background-color: var(--ag-bg-soft);
	box-shadow: 0 0 0 999px var(--ag-bg-soft) inset
}
.ag-input select option:checked:hover,
.ag-input select option:checked:focus {
	color: var(--ag-title);
	background-color: var(--ag-color-soft-strong);
	box-shadow: 0 0 0 999px var(--ag-color-soft-strong) inset
}
.ag-input select option:disabled {
	color: var(--ag-text-soft);
	background-color: var(--ag-bg)
}
.ag-input:has(select)::after {
	content: "";
	position: absolute;
	right: 19px;
	top: 50%;
	z-index: 3;
	width: 9px;
	height: 9px;
	border-right: 1.5px solid var(--ag-color-main);
	border-bottom: 1.5px solid var(--ag-color-main);
	pointer-events: none;
	transform: translateY(-70%) rotate(45deg)
}
.ag-choice-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 12px
}
.ag-choice-mode {
	display: grid;
	gap: 12px
}
.ag-choice-mode__title {
	margin: 0;
	color: var(--ag-color-main);
	font-family: var(--ag-mono);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase
}
.ag-choice-mode__list {
	display: grid;
	gap: 12px
}
.ag-choice {
	--ag-frame-cut: var(--ag-cut-xs);
	position: relative;
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	color: var(--ag-text);
	font-family: var(--ag-mono);
	font-size: 13px;
	line-height: 1.45;
	cursor: pointer
}
.ag-choice input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0
}
.ag-choice__box {
	--ag-frame-line: var(--ag-color-line);
	--ag-frame-fill-a: transparent;
	--ag-frame-fill-b: transparent;
	--ag-frame-fill-c: transparent;
	--ag-frame-border-glow: transparent;
	position: relative;
	display: block;
	width: var(--ag-size-choice-box);
	height: var(--ag-size-choice-box);
	background: transparent;
	clip-path: var(--ag-frame-clip, none);
	transition: filter 220ms ease
}
.ag-choice__box::before {
	content: "";
	position: absolute;
	inset: 1px;
	z-index: 1;
	pointer-events: none;
	clip-path: var(--ag-frame-clip, none);
	background: transparent;
	opacity: 0;
	transition: background 220ms ease, opacity 220ms ease
}
.ag-choice--soft .ag-choice__box::before {
	background: var(--ag-color-soft);
	opacity: 1
}
.ag-choice--flat .ag-choice__box {
	--ag-frame-line: transparent;
	background: var(--ag-color-flat)
}
.ag-choice--flat .ag-choice__box::before {
	opacity: 0
}
.ag-choice input:focus-visible + .ag-choice__box::before {
	background: var(--ag-color-soft);
	opacity: 1
}
.ag-choice--soft input:focus-visible + .ag-choice__box::before {
	background: var(--ag-color-soft-strong)
}
.ag-choice--flat input:focus-visible + .ag-choice__box::before {
	opacity: 0
}
.ag-choice input:focus-visible + .ag-choice__box {
	filter: drop-shadow(0 0 6px var(--ag-color-shadow))
}
.ag-choice--flat input:focus-visible + .ag-choice__box {
	background: var(--ag-color-flat-strong)
}

.ag-choice__box .ag-frame__bg,
.ag-choice__box .ag-frame__glow {
	opacity: 0
}

.ag-choice__box::after {
	content: "";
	position: absolute;
	inset: 6px;
	z-index: 2;
	background: var(--ag-color-main);
	clip-path: polygon(0 45%, 34% 75%, 100% 0, 100% 35%, 36% 100%, 0 66%);
	opacity: 0;
	transform: scale(.72);
	transition: opacity 180ms ease, transform 180ms ease
}
.ag-choice input:checked + .ag-choice__box::after {
	opacity: 1;
	transform: scale(1)
}
.ag-choice:has(input[type="radio"]) .ag-choice__box {
	border: 1px solid var(--ag-color-line);
	border-radius: 999px;
	clip-path: none
}
.ag-choice--flat:has(input[type="radio"]) .ag-choice__box {
	border-color: transparent
}
.ag-choice--flat:has(input[type="radio"]) input:focus-visible + .ag-choice__box {
	border-color: transparent
}
.ag-choice:has(input[type="radio"]) .ag-choice__box::before {
	border-radius: 999px;
	clip-path: none
}

.ag-choice:has(input[type="radio"]) .ag-choice__box .ag-frame__svg {
	display: none
}

.ag-choice:has(input[type="radio"]) .ag-choice__box::after {
	inset: 7px;
	border-radius: 999px;
	clip-path: none
}
.ag-choice__title {
	display: block;
	color: var(--ag-title);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .10em;
	text-transform: uppercase
}
.ag-choice__text {
	display: block;
	margin-top: 2px;
	color: var(--ag-text-soft);
	font-family: var(--ag-font);
	font-size: 14px;
	line-height: 1.4
}
.ag-switch-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px
}
.ag-switch {
	position: relative;
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	color: var(--ag-text);
	font-family: var(--ag-mono);
	font-size: 13px;
	line-height: 1.4;
	cursor: pointer
}
.ag-switch input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0
}
.ag-switch__track {
	position: relative;
	display: block;
	width: var(--ag-size-switch-width);
	height: var(--ag-size-switch-height);
	border: 1px solid var(--ag-color-line);
	border-radius: 999px;
	background: transparent;
	transition: border-color 220ms ease, filter 220ms ease
}
.ag-switch__track::before {
	content: "";
	position: absolute;
	inset: 1px;
	border-radius: 999px;
	background: var(--ag-color-soft);
	opacity: .28;
	transition: background 220ms ease, opacity 220ms ease
}
.ag-switch__thumb {
	position: absolute;
	top: 4px;
	left: 4px;
	z-index: 2;
	display: block;
	width: 18px;
	height: 18px;
	border-radius: 999px;
	background: var(--ag-text-soft);
	box-shadow: var(--ag-switch-thumb-shadow);
	transition: background 220ms ease, transform 220ms ease
}
.ag-switch--soft .ag-switch__track::before {
	background: var(--ag-color-soft);
	opacity: 1
}
.ag-switch--flat .ag-switch__track {
	border-color: transparent;
	background: var(--ag-color-flat)
}
.ag-switch--flat .ag-switch__track::before {
	opacity: 0
}
.ag-switch input:checked + .ag-switch__track::before {
	background: var(--ag-color-soft-strong);
	opacity: 1
}
.ag-switch--flat input:checked + .ag-switch__track,
.ag-switch--flat input:focus-visible + .ag-switch__track {
	background: var(--ag-color-flat-strong)
}
.ag-switch--flat input:checked + .ag-switch__track::before,
.ag-switch--flat input:focus-visible + .ag-switch__track::before {
	opacity: 0
}
.ag-switch input:checked + .ag-switch__track .ag-switch__thumb {
	background: var(--ag-color-main);
	transform: translateX(24px)
}
.ag-switch input:focus-visible + .ag-switch__track {
	filter: drop-shadow(0 0 6px var(--ag-color-shadow))
}
.ag-switch input:disabled + .ag-switch__track,
.ag-switch input:disabled ~ .ag-switch__content {
	opacity: .48;
	cursor: not-allowed
}
.ag-switch__title {
	display: block;
	color: var(--ag-title);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .10em;
	text-transform: uppercase
}
.ag-switch__text {
	display: block;
	margin-top: 2px;
	color: var(--ag-text-soft);
	font-family: var(--ag-font);
	font-size: 14px;
	line-height: 1.4
}
.ag-field {
	display: grid;
	gap: 8px;
	min-width: 0
}
.ag-field__label {
	color: var(--ag-accent);
	font-family: var(--ag-mono);
	font-size: var(--ag-txt-label-size);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase
}
.ag-field--inside {
	--ag-field-color: var(--ag-accent);
	position: relative;
	gap: 0
}
.ag-field--inside:has(.ag-input--brand) {
	--ag-field-color: var(--ag-brand)
}
.ag-field--inside:has(.ag-input--accent) {
	--ag-field-color: var(--ag-accent)
}
.ag-field--inside:has(.ag-input--earth) {
	--ag-field-color: var(--ag-earth)
}
.ag-field--inside:has(.ag-input--ghost) {
	--ag-field-color: var(--ag-ghost)
}
.ag-field--inside .ag-field__label {
	position: absolute;
	top: 12px;
	left: 16px;
	z-index: 4;
	max-width: calc(100% - 32px);
	margin: 0;
	color: var(--ag-field-color);
	font-size: var(--ag-txt-label-inside-size);
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}
.ag-field--inside .ag-input {
	min-height: var(--ag-size-input-inside-height)
}
.ag-field--inside .ag-input :is(input, select) {
	min-height: var(--ag-size-input-inside-height);
	padding-top: 22px;
	padding-bottom: 0
}
.ag-field--inside .ag-input select {
	padding-right: 46px
}
.ag-field--inside .ag-input:has(textarea) {
	min-height: var(--ag-size-textarea-inside-height)
}
.ag-field--inside .ag-input textarea {
	min-height: var(--ag-size-textarea-inside-height);
	padding-top: 31px
}

.ag-terminal {
	--ag-cursor-color: var(--ag-green);
	display: grid;
	gap: 8px;
	margin-top: 18px;
	color: var(--ag-text);
	font-family: var(--ag-mono);
	font-size: 14px;
	line-height: 1.58
}
.ag-terminal__line {
	margin: 0
}
.ag-terminal__prompt {
	color: var(--ag-accent)
}
.ag-terminal__cmd {
	color: var(--ag-title)
}
.ag-terminal__ok {
	color: var(--ag-green);
	text-shadow: var(--ag-terminal-ok-shadow)
}
.ag-terminal__warn {
	color: var(--ag-brand);
	text-shadow: var(--ag-terminal-warn-shadow)
}
.ag-terminal__muted {
	color: var(--ag-text-soft)
}

.ag-txt-cursor {
	--ag-cursor-color: currentColor
}
.ag-txt-cursor::after {
	content: "";
	display: inline-block;
	width: .58em;
	height: .98em;
	margin-left: .28em;
	background: var(--ag-cursor-color);
	box-shadow: 0 0 10px color-mix(in srgb, var(--ag-cursor-color) 36%, transparent);
	vertical-align: -.14em;
	animation: ag-cursor-blink 1s steps(1) infinite
}

@keyframes ag-cursor-blink {
	0%,
	48% {
		opacity: 1
	}

	49%,
	100% {
		opacity: 0
	}
}

.ag-brand-lockup {
	display: flex;
	align-items: center;
	gap: clamp(22px, 3vw, 34px)
}
.ag-brand-mark {
	flex: 0 0 auto;
	width: clamp(120px, 16vw, 190px);
	color: var(--ag-brand)
}
.ag-brand-mark svg {
	display: block;
	width: 100%;
	height: auto;
	fill: currentColor;
	filter: var(--ag-brand-mark-shadow)
}

.ag-hover-effect {
	position: relative;
	overflow: hidden;
	transition: transform var(--ag-hover-effect-duration, 300ms) var(--ag-hover-effect-timing, ease-in-out)
}

.ag-button > :is(.ag-hover-effect--fill-ltr, .ag-hover-effect--bounce-ltr) .ag-button__overlay,
.ag-button:is(.ag-hover-effect--fill-ltr, .ag-hover-effect--bounce-ltr) .ag-button__overlay {
	transform: scaleX(0);
	transform-origin: left center
}
.ag-button > :is(.ag-hover-effect--fill-rtl, .ag-hover-effect--bounce-rtl) .ag-button__overlay,
.ag-button:is(.ag-hover-effect--fill-rtl, .ag-hover-effect--bounce-rtl) .ag-button__overlay {
	transform: scaleX(0);
	transform-origin: right center
}
.ag-button > .ag-hover-effect--fill-center .ag-button__overlay,
.ag-button.ag-hover-effect--fill-center .ag-button__overlay {
	transform: scaleX(0);
	transform-origin: center center
}
.ag-button > :is(.ag-hover-effect--bounce-ltr, .ag-hover-effect--bounce-rtl) .ag-button__overlay,
.ag-button:is(.ag-hover-effect--bounce-ltr, .ag-hover-effect--bounce-rtl) .ag-button__overlay {
	transition-timing-function: cubic-bezier(.52, 1.64, .37, .66)
}
.ag-button > :is(.ag-hover-effect--fill-ltr, .ag-hover-effect--fill-rtl, .ag-hover-effect--fill-center, .ag-hover-effect--bounce-ltr, .ag-hover-effect--bounce-rtl):is(:hover, :focus-visible) .ag-button__overlay,
.ag-button:is(.ag-hover-effect--fill-ltr, .ag-hover-effect--fill-rtl, .ag-hover-effect--fill-center, .ag-hover-effect--bounce-ltr, .ag-hover-effect--bounce-rtl):is(:hover, :focus-visible) .ag-button__overlay {
	transform: scaleX(1)
}
.ag-button > .ag-hover-effect--lift-up:is(:hover, :focus-visible),
.ag-button.ag-hover-effect--lift-up:is(:hover, :focus-visible) {
	transform: translateY(-3px)
}

@media (prefers-reduced-motion: reduce) {
	.ag-hover-effect,
	.ag-button__overlay {
		transition-duration: 1ms
	}
}