html, body {
	position: relative;
	width: 100%;
	height: 100%;
}

:root{
	--bg:#181808;
	--surface:#1b1b1b;
	--muted:#7c7c7b;
	--text:#fffef7;
	--banana:#FFD400; /* banana yellow */
	--pi:#8B5CF6; /* pi purple */
	--accent:#FFD400;
}

body {
	color: var(--text);
	width: 100vw;
	height: 100vh;
	display: flex;
	overflow: hidden;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', monospace;
	background: linear-gradient(-70deg,#111106 0%, var(--bg) 100%);
	background-color: var(--bg);
	background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

a {
	color: var(--banana);
	text-decoration: none;
}

a:hover { text-decoration: underline }

a:visited { color: #e7c800 }

label {
	display: block;
}

input, button, select, textarea {
	font-family: inherit;
	font-size: 13px;
	-webkit-padding: 0.4em 0;
	padding: 8px 10px;
	margin: 0 0 0.5em 0;
	box-sizing: border-box;
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 8px;
	background: rgba(255,255,255,0.02);
	color: var(--text);
}

input:disabled {
	color: #ccc;
}

button {
	color: #06121a;
	background-color: var(--banana);
	outline: none;
	border-radius: 8px;
	padding: 8px 12px;
}

button:disabled {
	color: #999;
}

button:not(:disabled):active { transform: translateY(1px) }

button:focus { box-shadow: 0 0 0 3px rgba(255,212,0,0.12) }

/* JSON highlight styles moved here from component */
.code .key { color: #f5c66b }
.code .string { color: #9ae6b4 }
.code .number { color: #ffd580 }
.code .boolean { color: #7dd3fc }
.code .null { color: #94a3b8 }

/* For Chrome, Edge, and Safari */
*::-webkit-scrollbar {
	width: 8px;
	height: 8px; /* for horizontal scrollbars */
}

*::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.05);
	border-radius: 8px;
}

*::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.15);
	border-radius: 8px;
	transition: background 0.2s ease;
}

*::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.3);
}

/* For Firefox */
* {
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.05);
}