@layer normalize {

html {
	line-height: 1.1875;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}
h1 {
	font-size: 2em;
	margin-block: 0.67em;
}
:is(dl, ol, ul) :is(dl, ol, ul) {
	margin: 0;
}
hr {
	color: inherit;
}
abbr[title] {
	-webkit-text-decoration: underline dotted;
    text-decoration-thickness: .08em;
	text-underline-offset: 0.1em;
}
b, strong {
	font-weight: bolder;
}
small {
	font-size: 80%;
}
table {
	border-color: currentColor; 
}
textarea, button, input, select { 
	margin: 0;
}
textarea { 
	baseline-source: first; 
}
button, input:is([type="button"], [type="reset"], [type="submit"]) {
	-webkit-appearance: button; 
}
input[type="search"] {
	-webkit-appearance: textfield;
}
::-webkit-search-decoration {
	-webkit-appearance: none; 
}
::placeholder { 
	color: inherit;
	opacity: .54;
}
::-webkit-file-upload-button {
	-webkit-appearance: button; 
	font: inherit; 
}
:-moz-ui-invalid { 
	box-shadow: none;
}
summary { 
	display: list-item;
}
search {
	display:block; 
}
[popover] { 
    position: fixed;
    width: fit-content;
    height: fit-content;
    color: canvastext;
    background-color: canvas;
    inset: 0;
    margin: auto;
    border-width: initial;
    border-style: solid;
    border-color: initial;
    border-image: initial;
    padding: 0.25em;
    overflow: auto;
}
@supports not selector(:popover-open) {
    [popover] {
        display: none;
    }
}

}
@layer normalize {

@view-transition {
  navigation: auto;
}

*, ::before, ::after {
	box-sizing: border-box;
	scroll-behavior: smooth;
	line-height:var(--line-height);
	background-repeat: no-repeat;
}
html {
	interpolate-size: allow-keywords;
	block-size: 100%;
	word-break:break-word;
	overflow-wrap:break-word;
	-webkit-hyphens: auto;
	hyphens: auto;
	hyphenate-limit-chars:auto 4 4;
	tab-size: 4;
	--line-height: calc(1em + .5rem);
	-webkit-tap-highlight-color: transparent;
	font-family: system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	font-size: calc(12.5px + .25vw);
	scrollbar-gutter: stable;
	overflow-y: auto;
}
body {
	margin:auto;
	min-block-size: 100%;
    display: flow-root;
	font-size:max(1rem, 14px);
}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
    margin-block-start: 1.2em; 
	margin-block-end: 0.5em;
}
h1, h2, h3, h4, h5, h6, figcaption, blockquote, legend, caption { 
	text-wrap: balance;
}
p, li {
	text-wrap: pretty;
}
p { margin-top: 0 }
hr {
	border-style:solid;
	border-width:0 0 1px 0;
	border-top-width:0 !important;
}
video, audio, video, iframe {
	inline-size: 100%;
	inline-size:-moz-available;
	inline-size:-webkit-fill-available;
	inline-size:stretch;
}
iframe {
    display:block;
}
img, svg, canvas {
	max-inline-size: 100%;
	max-inline-size:-moz-available;
	max-inline-size:-webkit-fill-available;
	max-inline-size:stretch;
}
img, svg, video, canvas {
	object-fit:cover;
	block-size: auto;
}
video { background-color:#aaa; }
script, style {
	white-space: pre;
	font-family: monospace;
	margin-block: 1rem;
	overflow:auto;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	font-variant-numeric: tabular-nums;
}
th {
	text-align: inherit;
	text-align: -webkit-match-parent;
}

nav a { text-decoration:none; }
nav li { list-style: none; }
nav ul { padding-inline-start:1.5em; }
nav > ul { padding-inline-start:0; }


:where(select, summary, label, button, input:is([type=checkbox], [type=radio], [type=file]), .btn):not(:disabled) {
	cursor:pointer;
}

[inert], :disabled { opacity:.4; }



legend {
	padding-inline: .4em;
}

input, textarea, select, button, .btn {
	padding:.2em;
	border:1px solid rgba(0,0,0,.5);
	font: inherit;
	line-height:var(--line-height);
	--line-height:normal;
}
button, .btn {
	padding-inline:.7em;
}

select { background-color:Field; }
textarea {
	vertical-align: baseline;
	vertical-align: -webkit-baseline-middle;
}
textarea { resize: vertical; }


input:not([type=radio], [type=checkbox], [type=file], [type=date], [type=time], [type=datetime-local], [type=color]), textarea { inline-size:13rem; }
input:where([type=range]) { vertical-align:middle }

:focus::placeholder {
    opacity: .2;
}


dialog, [popover], ::backdrop, :fullscreen {
	transition-behavior: allow-discrete;
	transition-property: opacity, overlay, display;
	opacity: 0;
}

dialog:is(:modal,[open]), :popover-open, :fullscreen {
    &, &::backdrop {
        opacity: 1;
		@starting-style { opacity: 0; } 
    }
}


::backdrop {
	transition-duration:inherit;
}

[popover] {
    inset: auto;
}

}


.btn {
	inline-size: fit-content;
	text-decoration: none;
	color:inherit;
	&:not([hidden]) { display:inline-block; }
}
@layer normalize {

html {
    --color: #207acc;
    --accent: var(--color);
    --color-space: oklch;
    --hue-shift: 0;
    --width: 50rem;
    --gap: 1rem;
    --line-width: 1px;
    --radius: .3rem;

    --shadow-x:0rem; 
    --shadow-y:.1rem;

	--control-padding-x: .4em;
    --control-padding-y: .3em;
    --control-border-width: var(--line-width);
    --control-radius: var(--radius);

    --line-height: calc(var(--line-height-absolute) + var(--line-height-relative));
    --font-1: system-ui, sans-serif;
    --font-2: system-ui, sans-serif;

    --font-1-variation: 
        "wdth" var(--font-1-wdth, 100), 
        "opsz" var(--font-1-opsz, 14), 
        "GRAD" var(--font-1-grad, 0),
        "MONO" var(--font-1-mono, 0),
        "CASL" var(--font-1-casl, 0);

    --font-2-variation: 
        "wdth" var(--font-2-wdth, 100), 
        "opsz" var(--font-2-opsz, 14), 
        "GRAD" var(--font-2-grad, 0),
        "MONO" var(--font-2-mono, 0),
        "CASL" var(--font-2-casl, 0);

}

html, [u2-skin] {

    color-scheme: light dark;

    --color-lightest: color-mix(in var(--color-space), var(--color), #fff 97%);
    --color-lighter:  color-mix(in var(--color-space), var(--color), #fff 85%);
    --color-light:    color-mix(in var(--color-space), var(--color), #fff 50%);
    --color-dark:     color-mix(in var(--color-space), var(--color), #000 30%);
    --color-darker:   color-mix(in var(--color-space), var(--color), #000 60%);
    --color-darkest:  color-mix(in var(--color-space), var(--color), #000 87%);

    --accent-lightest: color-mix(in var(--color-space), var(--accent), #fff 97%);
    --accent-lighter:  color-mix(in var(--color-space), var(--accent), #fff 85%);
    --accent-light:    color-mix(in var(--color-space), var(--accent), #fff 50%);
    --accent-dark:     color-mix(in var(--color-space), var(--accent), #000 30%);
    --accent-darker:   color-mix(in var(--color-space), var(--accent), #000 60%);
    --accent-darkest:  color-mix(in var(--color-space), var(--accent), #000 87%);

    --gray:          oklch(from var(--color) l min(c,0.01) h);
    --gray-lighter:  color-mix(in var(--color-space), var(--gray), #fff 85%);
    --gray-light:    color-mix(in var(--color-space), var(--gray), #fff 50%);
    --gray-dark:     color-mix(in var(--color-space), var(--gray), #000 30%);
    --gray-darker:   color-mix(in var(--color-space), var(--gray), #000 60%);

    --color-bg:   light-dark(var(--color-lightest), var(--color-darkest));
    --color-text: light-dark(var(--color-darkest), var(--color-lightest));
    --color-line: var(--color-text);
    --color-area: light-dark(var(--color-lighter), var(--color-darker));

    --palette-base: oklch(from var(--color) max(l, 0.4) max(c, 0.15) h);

    --red:    oklch(from var(--palette-base) l c calc(25 + var(--hue-shift)));
    --orange: oklch(from var(--palette-base) l c calc(60 + var(--hue-shift)));
    --yellow: oklch(from var(--palette-base) l c calc(95 + var(--hue-shift)));
    --lime:   oklch(from var(--palette-base) l c calc(125 + var(--hue-shift)));
    --green:  oklch(from var(--palette-base) l c calc(155 + var(--hue-shift)));
    --cyan:   oklch(from var(--palette-base) l c calc(195 + var(--hue-shift)));
    --blue:   oklch(from var(--palette-base) l c calc(240 + var(--hue-shift)));
    --purple: oklch(from var(--palette-base) l c calc(285 + var(--hue-shift)));
    --pink:   oklch(from var(--palette-base) l c calc(340 + var(--hue-shift)));

    --shadow-blur: var(--gap);
    --shadow-color: color-mix(in srgb, var(--color-text), transparent 70%);
    --shadow: var(--shadow-x) var(--shadow-y) var(--shadow-blur) var(--shadow-color);
    --shadow-s: calc(var(--shadow-x) * 0.5) calc(var(--shadow-y) * 0.5) calc(var(--shadow-blur) * 0.5) var(--shadow-color);
    --shadow-l: calc(var(--shadow-x) * 1.5) calc(var(--shadow-y) * 1.5) calc(var(--shadow-blur) * 1.5) var(--shadow-color);

}


[u2-skin=dark] { color-scheme: dark; }
[u2-skin=light] { color-scheme: light; }

}

@layer normalize {

html {
    background-color: var(--color-bg);
    color: var(--color-text);
    accent-color: var(--color);
    font-family: var(--font-1, system-ui, sans-serif);
    font-variation-settings: var(--font-1-variation);
}
a {
    color: var(--color);
}
a:visited {
    color: var(--color-dark);
}
a:hover, a:focus {
    color: var(--color-text);
}
hr {
    color: var(--color-line);
    margin-block: calc(var(--gap) * 2);
    border-width: var(--line-width);
}

h6,.h6 { font-size: calc(1rem * pow(1.24, -1)); }
h5,.h5 { font-size: calc(1rem * pow(1.24, 0)); }
h4,.h4 { font-size: calc(1rem * pow(1.24, 1)); }
h3,.h3 { font-size: calc(1rem * pow(1.24, 2)); }
h2,.h2 { font-size: calc(1rem * pow(1.24, 3)); }
h1,.h1 { font-size: calc(1rem * pow(1.24, 4)); }


:is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,ul,ol,p):first-child { margin-top:0; }
:is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,ul,ol,p):last-child { margin-bottom:0; }


:is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) + :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) { margin-top: 0; }
:is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6):has(+ :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6)) { margin-bottom: .3em; }


table {
    inline-size: 100%;
    word-break: normal;
}
td,th {
    padding: calc(var(--gap) / 2);
}

dialog {
    background-color:var(--color-bg);
    color:var(--color-text);
}

mark {
    background-color: oklch(from var(--color-light) .9 .3 h / 0.8);
}


:focus-visible, u2-input:focus-within { 
    outline: .4rem solid hsl(from var(--accent) h s l / 0.2);
    transition: .15s;
}
:where(input,button,textarea,select,a,u2-input):active {
    outline: .55rem solid hsl(from var(--accent) h s l / 0.2);
    transition: .15s;
}



fieldset {
    border: var(--line-width) solid currentColor;
    border-radius: var(--radius);
    padding: var(--gap);
    margin-inline: 0;
    margin-block: var(--gap);
    min-inline-size: 0; 
}

input, textarea, select, button, .btn, u2-input {
    font-family:inherit;
    max-inline-size: 100%;
    padding-inline: var(--control-padding-x, .4em);
    padding-block: var(--control-padding-y, .3em);
    border-radius: var(--control-radius, var(--radius));
    border-width:var(--control-border-width);
    border-color:var(--color-line);
}

button, .btn {
    background-color: var(--color);
    color: var(--color-bg);
    border-color: transparent;
    padding-inline: var(--gap);
    transition: background-color .15s; 
    transition-property: background-color, color, outline;
}

:is(button, .btn):not(:disabled):where(:hover, :focus, [aria-pressed="true"]) {
    background-color: var(--color-dark);
}


select[size],  select[multiple] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin: 0;
    margin-inline-end: .5em;
}


}







@layer normalize {

ul {
	list-style-type: '•  ';
	padding-inline-start: 1em;
}
ul > li::marker {
	font-size: 1em;
}


:where(select:not([size], [multiple])) {
	appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='4'><path d='M4 0h6L7 4'/></svg>");
	background-repeat: no-repeat;
	background-position: 100% 50%;
	background-size: 1em;
	padding-right: 1.3em !important;
}

}





input:is([type=radio], [type=checkbox]) {
    padding:0 !important;
	appearance: none;
	transform:rotate(.002deg);

    width: 1.3em;
	height: 1.3em;
	flex-grow:0;
    vertical-align: -15%;
	background-color: #fff;
	border: solid 1px;
	position: relative;
	border-radius: .15em;
	padding: 0;

	&:checked {
		border-color: var(--color, blue);
	}
	&::before {
		content: "";
		position: absolute;
		inset: 0;
		xinset: -1px;
		xborder-radius:inherit;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-family: Arial, Helvetica, sans-serif;
		font-weight: normal;
		font-size: .65em;
		line-height:1.1;
	}
	&:checked::before {
		background-color: var(--color, blue);
	}

	&:not(:disabled)::after {
		content: '';
		position: absolute;
		inset: -60%;
		border-radius: 50%;
		transition: background-color .3s;
	}
	&:hover::after {
		background-color: #0001;
	}

}

input[type=checkbox] {
	&:checked::before { content: "✔"; }
}

input[type=radio] {
	border-radius: 999px;
	&::before {
		border-radius: inherit;
		border: .19em solid #fff;
	}
}

input:is([type=radio],[type=checkbox]):indeterminate::before {
	color: currentColor;
	color: #000;
	font-size: 1em;
	content: "−"; 
	opacity:.6;
	font-weight:500;
}






input[type=color] {
	padding: 0;
	border-radius: 99em;
	width: 1.4em;
	height: 1.4em;
	border-width: 1px;
	overflow: hidden;
	box-shadow: 0 0 .5em #0003;
	cursor: pointer;
    vertical-align:-0.3em;
}
input[type=color]::-moz-color-swatch {
	border: 0;
}
input[type=color]::-webkit-color-swatch {
	border: 0;
}
input[type=color]::-webkit-color-swatch-wrapper {
	padding: 0;
}





html {
	--scrollbar-color-track: var(--color-area, #f4f4f4);
	--scrollbar-color-thumb: var(--color, #ccc);
	scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
}

* {
	scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
}

::-webkit-scrollbar-track {
	background: var(--scrollbar-color-track);
}
::-webkit-scrollbar-thumb {
	background-color: var(--scrollbar-color-thumb);
}

select, textarea { scrollbar-width: thin; }





label.btn {
    position:relative;
}
label.btn > :is([type=radio],[type=checkbox]) {
	position:absolute;
	inset:0;
	width:auto !important;
	height:auto !important;
    appearance: none;
    border:0 !important;
	background:none !important;
	border-radius:inherit;
	pointer-events:none;
	&::after, &::before {
		content:none;
	}
}
label.btn:has(>:is([type=radio],[type=checkbox])) {
	&::before {
		content:' ';
		display:inline-block;
		min-width:1rem;
	}
	&:has(:checked) {
		background-color: var(--color-dark);
		&::before {
			content:'✔';
		}
	}
}





input[type=range] {
	background-color: transparent;
	border: 0;
    appearance: none;
	padding: 0;

	&::-webkit-slider-runnable-track {
		box-sizing: border-box;
		block-size: .5em;
		background: #fff;
		border: 1px solid #0008;
		border-radius: 1em;
		cursor: pointer;
	}
	&::-moz-range-track {
		box-sizing: border-box;
		block-size: .5em;
		background: #fff;
		border: 1px solid #0008;
		border-radius: 1em;
		cursor: pointer;
	}

	&::-webkit-slider-thumb {
		box-sizing: border-box;
		width: 1.3em;
		height: 1.3em;
		background: var(--color);
		border-radius: 100%;
		cursor: pointer;
		margin-block-start: -.47em;
		-webkit-appearance: none;
	}
	&::-moz-range-thumb {
		box-sizing: border-box;
		width: 1.3em;
		height: 1.3em;
		background: var(--color);
		border-radius: 100%;
		cursor: pointer;
		border-color:transparent;
	}
	&:hover::-webkit-slider-thumb {
		box-shadow: 0 0 0 .5em #0001;
	}
	&:hover::-moz-range-thumb {
		box-shadow: 0 0 0 .5em #0001;
	}


}



input:-webkit-autofill { 
	filter: none;
	box-shadow: 0 0 0 100px var(--color-light) inset;
}

::selection {
	background: hsl(from var(--color) h s l / 0.3);
}







details { border-block-end: 1px solid var(--color-line); transition-duration:.3s; }
summary {
    padding-block: .5rem;
    padding-inline: 0;
	line-height:1; 
	--line-height:1; 
}
details[open] > summary { margin-block-end: .5rem; }
details[open] { padding-block-end: 1rem; }


summary { list-style-type: none; }
summary::-webkit-details-marker { display: none; }
summary::after {
	line-height:.9;
	content:'▾'; 
	transform: rotate(-90deg);
	width: 1rem;
	height: 1rem;
	float: right;
	transition: transform .2s;
}
details[open] > summary::after {
	transform: rotate(0deg);
}

.u2-width {
    max-width:var(--width);
    min-width:0;
    margin-left:auto;
    margin-right:auto;
    box-sizing:content-box;
    padding-left:1rem;
    padding-right:1rem;
    padding-left:calc(1rem + env(safe-area-inset-left)); 
    padding-right:calc(1rem + env(safe-area-inset-right));

    
    width: 100%;
    width: -moz-available;
    width: -webkit-fill-available;
}

.u2-width .u2-width {
    padding-inline:0;
}


.u2-flex {
    --u2-Gap:1rem;
    --u2-Row-gap:var(--u2-Gap);
    --u2-Col-gap:var(--u2-Gap);
    display:flex;
    flex-wrap:wrap;
    column-gap: var(--u2-Col-gap);
    row-gap:    var(--u2-Row-gap);
}

.u2-flex > * { margin:0; }
.u2-flex.-Between { justify-content:space-between; }
.u2-flex.-Col { flex-direction: column; }

.u2-table {
    
    display:table;
    border-collapse:collapse;
    width:100%;
    
    --u2-Gap: 1rem;
    --u2-Col-gap: var(--u2-Gap);
    --u2-Row-gap: var(--u2-Gap);
}
.u2-table > * {
    display:table-row-group;
}
.u2-table > * > * {
    display:table-row;
}
.u2-table > * > * > * {
    display:table-cell;
    padding-inline: calc(var(--u2-Col-gap) / 2);
    padding-block: calc(var(--u2-Row-gap) / 2);
    
}



.u2-table.-Flex {
    display: block;
}
.u2-table.-Flex > * {
    display: block;
}
.u2-table.-Flex > * > * { 
    display:flex;
    flex-wrap:wrap; 
    align-items: baseline;
    padding-block: calc(var(--u2-Row-gap) / 2);
    padding-inline: 0;
}
.u2-table.-Flex > * > * > * { 
    flex: 1 1 11em;
    min-width:0;
    padding-block: 0;
    padding-inline: calc(var(--u2-Col-gap) / 2);
    border:0 !important; 
    
    
}
.u2-table.-Flex.-NoSideGaps > * > * { column-gap:var(--u2-Col-gap); }
.u2-table.-Flex.-NoSideGaps > * > * > * { padding:0; }



.u2-table.-Fields input:not([type=radio], [type=checkbox], [type=date], [type=color], [type=time]),
.u2-table.-Fields textarea,
.u2-table.-Fields select {
    width: 100%;
    width: -moz-available;
    width: -webkit-fill-available;
    margin: 0;
}
.u2-table.-Fields > * > * > :first-child {
    inline-size: var(--col-1-width, 9em);
    flex-basis: var(--col-1-width, 9em);
    flex-grow:0.1;
}

.u2-table.-NoSideGaps > * > * > :first-child { padding-inline-start:0; }
.u2-table.-NoSideGaps > * > * > :last-child { padding-inline-end:0; }




.u2-table.-Sticky {
    border-collapse: separate;
}
.u2-table.-Sticky > thead > * > th {
    position:sticky;
    top:0;
    background-color:var(--color-bg);
}
.u2-table.-Sticky > * > * > * { 
    border-bottom:inherit;
}



html {
    --u2-ico-font:'Segoe UI Symbol', 'Noto Emoji', sans-serif; 
    --u2-ico-dir-material: 'https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.33/svg/{icon_name}/baseline.svg';
    --u2-ico-dir-material-host: var(--u2-ico-dir-material);
}
:host { 
    --u2-ico-dir-material: var(--u2-ico-dir-material-host, 'https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.33/svg/{icon_name}/baseline.svg');
}
u2-ico {
    --size: 1.5rem; 
    font-size: var(--size);
    line-height: 1;
    --line-height: 1;

    text-align:center;
    vertical-align:middle;

	fill:currentColor;

    font-weight: normal;
    font-style: normal;
    text-transform: none;
    letter-spacing: normal;
    overflow-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased; 
    text-rendering: optimizeLegibility; 
    -moz-osx-font-smoothing: grayscale; 
    font-feature-settings: 'liga'; 
    font-family: var(--u2-ico-font) !important;

    font-variant-emoji: text;

}
u2-ico:not([hidden]) { display: inline-block; }
u2-ico[icon]:empty:before { 
    content:attr(icon);
}




u2-ico[inline] {
    overflow:visible;
    --size:1.2em;
    
    vertical-align: -11%;
    
    
}


u2-ico > svg {
    vertical-align:bottom;
    height:1em;
    width:auto;
    min-width:1em;
    overflow:visible;
    margin:auto;
}
u2-ico [fill]:not([fill=none]) { fill:currentColor; }
u2-ico [stroke]:not([stroke=none]) { stroke: currentColor; }




u2-ico[state] {
    &::before {
        display:none;
    }
    &[state="loading"] {
        overflow: clip;
        width:1em;
    }
    &[state="fail"] {
        font-size: 0.8em;
        width: auto;
        ::before {
            display:block;
        }
    }
}
u2-ico:empty:not([icon])::before {
    content: '⚠️';
}

.u2-unstyle {
    background: unset;
    color: unset;
    margin: unset;
    padding: unset;
    display: inline;
    border: unset;
    border-radius: unset;
    box-shadow: unset;
    text-transform: unset;
}
.u2-unstyle:is(:hover,:focus) {
    background:unset;
}

u2-tooltip {
    
    opacity: 0;
    visibility:hidden;
    position: absolute;
    left: -9999px;
    top: -9999px;
    z-index: 9999;
    transition-property:opacity, visibility;

    transition-duration:400ms;

	pointer-events: none;
    padding: .5em 1em;
    max-width:16rem;

    font-size:max(12px, .7rem);
    --line-height: 1.4em;
    border-radius:.5em;
    background: var(--color-text, CanvasText);
    color: var(--color-bg, Canvas);
    border:1px solid var(--color-text, CanvasText);
    box-shadow: var(--shadow);

    margin: 0;
    overflow: visible;
}

u2-tooltip[tabindex="-1"] {
    pointer-events:auto;
}

u2-tooltip:is(:focus-within, :hover, [open]) { 
    transition-duration:250ms;
    transition-delay: 160ms;
    visibility:visible;
    opacity: 1;
}

u2-tooltip:not(:defined):not([id]) {
    :hover > &,
    :focus > & {
        left:auto;
        top:auto;
        margin: 2rem 0;
        visibility:visible;
        opacity: 1;
    }
}

u2-tooltip {
    &::before {
        --size:.7em;
        --halfMinus:calc(var(--size) * -.5);
        content: "";
        position:absolute;
        transform:rotate(45deg);
        width:var(--size);
        height:var(--size);
        background-color: inherit;
        margin:auto;
        z-index:-1;
        border:inherit;
    }
    &[\:position-x="after"]::before { left:var(--halfMinus); }
    &[\:position-x="before"]::before { right:var(--halfMinus); }
    &[\:position-x="center"]::before { right:0; left:0; }
    &[\:position-y="after"]::before { top:var(--halfMinus); }
    &[\:position-y="before"]::before { bottom:var(--halfMinus); }
    &[\:position-y="center"]::before { top:0; bottom:0; }
    &::after {
        content:'';
        background:inherit;
        position:absolute;
        inset:0;
        z-index:-1;
        border-radius:inherit;
    }
    &:not(:defined)::before {
        left: 0;
        right: 0;
        top: var(--halfMinus);
    }
}
.u2-grid {
    --u2-Items-width: 11rem;
    --u2-Gap: 1rem;
    --u2-Col-gap: var(--u2-Gap);
    --u2-Row-gap: var(--u2-Gap);
    display: grid;
    column-gap: var(--u2-Col-gap);
    row-gap: var(--u2-Row-gap);
    grid-template-columns: repeat(auto-fill, minmax(min(var(--u2-Items-width), 100%), 1fr));
    grid-auto-flow: dense;
}

.u2-grid > * { margin: 0; }

table.u2-grid {
    display: grid;

    >* {
        display: contents;
        >* {
            display: block;
            >* {
                display: block;
                padding: 0;
            }
        }
    }
}












html {
	--width: 37rem;
	--color: #a5c4e7;
	--accent: oklch(from var(--color) l c calc(h - 180));
	x--u2-ico-dir:"https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.11/svg/{icon}/baseline.svg";
	--u2-ico-dir: var(--u2-ico-dir-material);
	font-family: "Annie Use Your Telescope", cursive;
    --shadow-y:.1rem;
	font-size:calc(18px + .37vmin);
	xfont-size:25px;
	color-scheme: light;
}
body {
	xbackground-image: linear-gradient(-225deg, var(--accent-lighter) 0%, var(--color-light) 48%, var(--accent-light) 100%);
	background-attachment: fixed;
	background-color:var(--color-dark);
	color: var(--color-lightest);
}

h1, h2 {
	xborder-bottom:1px solid;
	text-transform:uppercase;
	text-align:center;
	text-decoration: underline;
	text-decoration-color: var(--color);
	text-decoration-thickness: 0.07rem;
	text-underline-offset: .7rem;
}
h2 {
	margin-top:4rem;
}


a {
	color: var(--color-dark);
}


input, textarea, select {
	background:#fff6;
	border:1px solid #0002;
}

button, .btn {
	transition: box-shadow .2s;
	font-weight:800;
	border:1px solid var(--color-dark);
	background:var(--color);
	color:#fff;
	&:hover, &:focus {
		background:var(--color);
		box-shadow:var(--shadow);
	}
}

#container {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
#logo {
	display:block;
	margin: 1rem auto;
	position:relative;
	z-index:1;
	&::after {
		xcontent:'';
		top:-7rem;
		z-index:-1;
		display:block;
		position:absolute;
		width:150%;
		background-image: radial-gradient(circle, #fffe 0%, transparent 60%);
		aspect-ratio:1;
	}
}
#nav {
	position:sticky;
	top:.5rem;
	z-index:2;
	background:#fffb;
	color:var(--color-darkest);
	backdrop-filter:blur(1rem);
	padding:0;
	border-radius:var(--radius);
}

#main {
    flex:1 1 auto;
	margin-top: 3rem;
	margin-bottom: 3rem;
}

/* classes for editor */
.Center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	display: block;
}
.Left {
	display:block;
	text-align:left;
}
.Right {
	display:block;
	text-align:right;
}
img.Left {
    float: left;
    margin-right: 1.2rem;
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
    shape-image-threshold: 0.2;
    shape-margin: 1.2rem;
    shape-outside: var(--shape-outside-url);
}
img.Right {
    float: right;
    margin-left: 1.2rem;
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
    shape-image-threshold: 0.2;
    shape-margin: 1.2rem;
    shape-outside: var(--shape-outside-url);
}
#qgRteToolbar .-options > :is(h4,h5,h6) {
	display: none !important;
}

#head {
	overflow-x:clip;
	overflow-y:visible;
}


[role=banner], [role=contentinfo] {
	--width:45rem;
}
[role=banner] a, [role=contentinfo] a {
	color: inherit;
	text-decoration: none;
}

/* header nav */
[role=banner] nav { margin:auto; }
[role=banner] nav > ul { display:flex; flex-wrap:wrap; }
[role=banner] nav > ul > li { flex:1 1 auto; }
[role=banner] nav > ul > li > a { text-align:center; }
[role=banner] nav ul { padding:0; }
[role=banner] nav li { position:relative; }
[role=banner] nav a {
	padding:.5em 1em;
	display:block;
	white-space: nowrap;
}
[role=banner] nav li > ul {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1;
	min-width: 100%;
	transition-duration:.4s;
	visibility:hidden;
	opacity:0;
	xborder:1px solid black;
	border-radius:var(--radius);
}
[role=banner] nav li:where(:hover, :focus-within) > ul {
	visibility:visible;
    opacity:1;
}

/* customize */
[role=banner] nav li > ul {
	background-color: #fff;
	xcolor:var(--color-text);
	x-webkit-backdrop-filter:blur(3px);
	xbackdrop-filter:blur(3px);
}

[role=banner] nav li > ul a:where([aria-current=page], :hover, :focus-within) {
	background-color:var(--color);
	color:#fff;
}



/* footer */
[role=contentinfo] {
	box-shadow:var(--shadow);
	background-color:var(--accent-dark);
	background-image: linear-gradient(150deg, var(--accent-dark), var(--accent-darker));
	color:var(--color-bg);
	padding-block:3em;
	font-family: system-ui, arial;
	font-size:.6rem;
}
[role=contentinfo] a {
	color:inherit;
}
[role=contentinfo] h3 {
	font-size:.7rem;
}
[role=contentinfo] > .u2-width {
}
[role=contentinfo] > .u2-width > .u2-flex > * {
	flex-basis:10rem;
	flex-grow:1;
	max-width:12rem;
}
/* */

/*
@media (max-width: 1200px) {}
*/