/*
 ▗▄▄▖▗▖    ▗▄▖ ▗▄▄▖  ▗▄▖ ▗▖   
▐▌   ▐▌   ▐▌ ▐▌▐▌ ▐▌▐▌ ▐▌▐▌   
▐▌▝▜▌▐▌   ▐▌ ▐▌▐▛▀▚▖▐▛▀▜▌▐▌   
▝▚▄▞▘▐▙▄▄▖▝▚▄▞▘▐▙▄▞▘▐▌ ▐▌▐▙▄▄▖
*/                              
:root {
	--bg-0: #050507;
	--bg-1: #0e1117;
	--bg-2: #1a1f2b;
	--text: #f3f4f6;
	--muted: #cbd5f5;
	--accent: #7cc4ff;
	--accent-2: #f9b16e;
	--border: rgba(255, 255, 255, 0.12);
	--shadow-strong: 0 18px 36px rgba(0, 0, 0, 0.75);
	--shadow-soft: 0 6px 20px rgba(0, 0, 0, 0.45);
	--radius-lg: 20px;
	--radius-md: 14px;
	--radius-sm: 10px;
}

* {
	box-sizing: border-box;
	font-family: "Roboto", sans-serif;
	font-weight: 400;
}

body {
	margin: 0;
	padding: 24px;
	background:
		radial-gradient(circle at 10% 10%, rgba(124, 196, 255, 0.12), transparent 55%),
		radial-gradient(circle at 90% 20%, rgba(249, 177, 110, 0.1), transparent 50%),
		linear-gradient(160deg, var(--bg-0), var(--bg-1) 45%, var(--bg-2));
	color: var(--text);
}

html {
	font-size: calc(16px * var(--a11y-text-scale, 1));
}

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

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

::selection {
	background: rgba(124, 196, 255, 0.35);
	color: var(--text);
}

.icon{
	display: flex;
	flex-direction: column;
	min-width: 32px;
    min-height: 32px;
    height: 7.5vh;
    width: 7.5vh;
	border-radius: 10%;
}                     
.icon img{
	min-width: 32px;
    min-height: 32px;
	height: 5vh;
	width: 5vh;
	border-radius: 25%;
	margin: auto;
}
.icon p{
	margin: auto;
	color: white;
}
.icon a:visited{
	color: white;
}

/*
▗▄▄▄▖▗▄▄▄▖▗▄▄▄▖▗▄▄▄▖ ▗▄▄▖▗▄▄▄▖▗▄▄▖
▐▌   ▐▌   ▐▌   ▐▌   ▐▌     █ ▐▌   
▐▛▀▀▘▐▛▀▀▘▐▛▀▀▘▐▛▀▀▘▐▌     █  ▝▀▚▖
▐▙▄▄▖▐▌   ▐▌   ▐▙▄▄▖▝▚▄▄▖  █ ▗▄▄▞▘
*/
.glow {
	transition: box-shadow 300ms ease, transform 300ms ease;
}

.glow:hover {
	box-shadow:
		inset 0 1px 1px rgba(255, 255, 255, 0.05),
		inset 0 -10px 18px rgba(180, 180, 180, 0.3),
		var(--shadow-strong);
	transform: translateY(-1px);
}


/*
▗▄▄▄▖▗▖ ▗▖▗▄▄▄▖▗▖  ▗▖▗▄▄▄▖ ▗▄▄▖
  █  ▐▌ ▐▌▐▌   ▐▛▚▞▜▌▐▌   ▐▌   
  █  ▐▛▀▜▌▐▛▀▀▘▐▌  ▐▌▐▛▀▀▘ ▝▀▚▖
  █  ▐▌ ▐▌▐▙▄▄▖▐▌  ▐▌▐▙▄▄▖▗▄▄▞▘
*/
.water {
	background:
		linear-gradient(120deg, rgb(70, 120, 145), rgb(30, 65, 95) 55%, rgb(10, 30, 45)),
		rgba(31, 31, 31, 0.55);
}

.soft-plastic {
	background: linear-gradient(to bottom, #4fa3ff, #1f5fa8);
}

.terminal {
	background: #0d1117;
	border-color: #1f2933;
}

.paper {
	background: #f2f3f5;
	color: #111;
}

.paper textarea,
.paper input,
.paper select,
.paper button {
	color: #111;
}

.liminal-blue {
	background:
		linear-gradient(180deg, rgba(120, 140, 255, 0.14), rgba(40, 60, 120, 0.08)),
		#0e1320;

	color: #e5e7eb;
	border: 1px solid rgba(165, 180, 252, 0.22);

	box-shadow:
		inset 0 1px 1px rgba(165, 180, 252, 0.18),
		inset 0 -22px 40px rgba(0, 0, 0, 0.55),
		0 18px 36px rgba(0, 0, 0, 0.8);
}

.liminal-blue:hover {
	box-shadow:
		inset 0 1px 1px rgba(200, 210, 255, 0.35),
		inset 0 -22px 40px rgba(80, 100, 180, 0.35),
		0 18px 36px rgba(0, 0, 0, 0.8);
}

.glass {
	background:
		linear-gradient(135deg,
			rgba(255, 255, 255, 0.06),
			rgba(255, 255, 255, 0.015)),
		rgba(31, 31, 31, 0.55);

	border: 1px solid var(--border);

	box-shadow:
		inset 0 1px 1px rgba(255, 255, 255, 0.05),
		inset 0 -10px 18px rgba(0, 0, 0, 0.45),
		var(--shadow-soft);

	color: inherit;
}

.amber {
	background:
		repeating-linear-gradient(115deg,
			rgba(255, 176, 0, 0.06) 0px,
			rgba(255, 176, 0, 0.06) 2px,
			rgba(0, 0, 0, 0) 6px,
			rgba(0, 0, 0, 0) 12px),
		linear-gradient(to bottom,
			#120e06,
			#080603);

	color: #ffb000;
	border: 1px solid #2a2308;

	box-shadow:
		inset 0 0 0 1px rgba(255, 176, 0, 0.08),
		inset 0 -18px 30px rgba(0, 0, 0, 0.6),
		0 0 18px rgba(255, 176, 0, 0.25);
}

.amber textarea,
.amber input,
.amber select,
.amber button {
	color: #ffb000;
}

.amber textarea::placeholder,
.amber input::placeholder {
	color: rgba(255, 176, 0, 0.5);
}

/*
▗▖    ▗▄▖ ▗▖ ▗▖    ▗▄▄▖  ▗▄▖ ▗▖ ▗▖▗▄▄▄▖▗▄▄▖     ▗▄▄▄▖▗▖ ▗▖▗▄▄▄▖▗▖  ▗▖▗▄▄▄▖ ▗▄▄▖
▐▌   ▐▌ ▐▌▐▌ ▐▌    ▐▌ ▐▌▐▌ ▐▌▐▌ ▐▌▐▌   ▐▌ ▐▌      █  ▐▌ ▐▌▐▌   ▐▛▚▞▜▌▐▌   ▐▌
▐▌   ▐▌ ▐▌▐▌ ▐▌    ▐▛▀▘ ▐▌ ▐▌▐▌ ▐▌▐▛▀▀▘▐▛▀▚▖      █  ▐▛▀▜▌▐▛▀▀▘▐▌  ▐▌▐▛▀▀▘ ▝▀▚▖
▐▙▄▄▖▝▚▄▞▘▐▙█▟▌    ▐▌   ▝▚▄▞▘▐▙█▟▌▐▙▄▄▖▐▌ ▐▌      █  ▐▌ ▐▌▐▙▄▄▖▐▌  ▐▌▐▙▄▄▖▗▄▄▞▘
*/
.black{
	background-color: #1f1f1f;
	color: white;
	border: none;
}
.white{
	background-color: #ebebeb;
	color: black;
	border: none;
}
.lowpow *{
		box-shadow: none !important;
}


/*
▗▄▄▖  ▗▄▖ ▗▖  ▗▖▗▄▄▄▖▗▖    ▗▄▄▖
▐▌ ▐▌▐▌ ▐▌▐▛▚▖▐▌▐▌   ▐▌   ▐▌   
▐▛▀▘ ▐▛▀▜▌▐▌ ▝▜▌▐▛▀▀▘▐▌    ▝▀▚▖
▐▌   ▐▌ ▐▌▐▌  ▐▌▐▙▄▄▖▐▙▄▄▖▗▄▄▞▘
*/
.panel {
	padding: 16px;
	border-radius: var(--radius-lg);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.controls {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.option {
	padding: 6px 12px;
	border-radius: 12px;
	width: fit-content;
}

textarea,
select,
input,
button {
	padding: 8px;
	background: transparent;
	border: none;
	color: inherit;
	border-radius: var(--radius-md);
}

textarea {
	resize: vertical;
	min-height: 60px;
}

button {
	cursor: pointer;
}

button:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible {
	outline: 2px solid rgba(124, 196, 255, 0.65);
	outline-offset: 2px;
}

@media (max-width: 600px) {
	body {
		padding: 16px;
	}
}

.notification {
	display: flex;
	width: fit-content;
	color: white;
	border-radius: 5%;
	position: fixed;
	left: 2%;
	bottom: 2%;
}

.msg img {
	margin-top: 4px;
	margin-left: 4px;
	margin-bottom: 4px;
	margin-right: 8px;
	max-width: 64px;
	width: 5vw;
	border-radius: 10%;
}

.msg h1 {
	margin-top: 4px;
	margin-bottom: 0;
	margin-right: 4px;
}

.msg p {
	margin-bottom: 4px;
	margin-top: 0;
}


/*
 ▗▄▄▖▗▄▄▄▖▗▄▖▗▄▄▄▖▗▄▄▄▖ ▗▄▄▖
▐▌     █ ▐▌ ▐▌ █  ▐▌   ▐▌   
 ▝▀▚▖  █ ▐▛▀▜▌ █  ▐▛▀▀▘ ▝▀▚▖
▗▄▄▞▘  █ ▐▌ ▐▌ █  ▐▙▄▄▖▗▄▄▞▘
*/
.enabled {
	transition: all 400ms ease-in;
	box-shadow:
		inset 0 1px 1px rgba(212, 212, 212, 0.6),
		inset 2px 2px 18px rgba(48, 205, 0, 0.69);
}

.disabled {
	transition: all 400ms ease-in;
	box-shadow:
		inset 0 1px 1px rgba(212, 212, 212, 0.6),
		inset 2px 2px 18px rgba(255, 34, 0, 0.69);
}

body.a11y-high-contrast {
	--bg-0: #000000;
	--bg-1: #050505;
	--bg-2: #0b0b0b;
	--text: #ffffff;
	--muted: #f3f4f6;
	--accent: #9dd4ff;
	--accent-2: #ffd19a;
	--border: rgba(255, 255, 255, 0.65);
	background: #000000;
	background-image: none;
}

body.a11y-high-contrast .glass,
body.a11y-high-contrast .water,
body.a11y-high-contrast .liminal-blue {
	background: #0d0d0d;
	border-color: rgba(255, 255, 255, 0.65);
	box-shadow: none;
}

body.a11y-high-contrast .glow:hover {
	box-shadow: none;
	transform: none;
}

body.a11y-reduce-motion *,
body.a11y-reduce-motion *::before,
body.a11y-reduce-motion *::after {
	animation: none !important;
	transition: none !important;
	scroll-behavior: auto !important;
}

body.a11y-reduce-motion .glow:hover {
	box-shadow: none;
	transform: none;
}

body.a11y-highlighted {
	background: var(--a11y-highlight, #0b1220) !important;
	background-image: none !important;
}

body.a11y-color-filter {
	filter: grayscale(var(--a11y-color-filter, 0));
}

body.a11y-blue-light::before {
	content: "";
	position: fixed;
	inset: 0;
	background: rgba(255, 168, 82, var(--a11y-blue-light, 0));
	pointer-events: none;
	z-index: 9998;
}

body.a11y-dim::after {
	content: "";
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, var(--a11y-dim, 0));
	pointer-events: none;
	z-index: 9999;
}