:root {
	font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: #e7f0f1;
	background: #729bab;
	font-synthesis: none;
	--panel: #10212bee;
	--muted: #8ba1ad;
	--line: #ffffff13;
	--accent: #9ce4d5
}

* {
	box-sizing: border-box
}

body {
	margin: 0;
	overflow: hidden
}

button,
input,
select,
textarea {
	font: inherit
}

button {
	cursor: pointer
}

button,
select {
	color: inherit
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 4px
}

canvas {
	display: block;
	width: 100vw;
	height: 100dvh;
	touch-action: none
}

.brand {
	position: fixed;
	left: 32px;
	top: 30px;
	display: flex;
	gap: 12px;
	align-items: center;
	font-size: 16px;
	letter-spacing: 3px;
	color: #102a36;
	text-shadow: 0 1px 12px #ffffff80;
	pointer-events: none
}

.brand strong {
	font-weight: 750
}

.brand span {
	display: block;
	font-size: 8px;
	letter-spacing: 2.2px;
	margin-top: 6px;
	font-weight: 600
}

.brand-icon {
	font-size: 42px;
	line-height: 1;
	font-weight: 300
}

.performance {
	position: fixed;
	top: 32px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 7px;
	background: #122630bf;
	border: 1px solid #ffffff24;
	border-radius: 30px;
	padding: 9px 15px;
	backdrop-filter: blur(12px);
	font-size: 9px;
	letter-spacing: 1px;
	color: #b4c7cc
}

.performance strong {
	font-size: 13px;
	color: #dffaf0;
	font-variant-numeric: tabular-nums
}

.performance i {
	height: 12px;
	width: 1px;
	background: #ffffff25;
	margin: 0 4px
}

.live-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #9ce4d5
}

.scene-caption {
	position: fixed;
	left: 36px;
	bottom: 104px;
	pointer-events: none;
	text-shadow: 0 2px 25px #00152050
}

.eyebrow {
	font-size: 9px;
	letter-spacing: 2px;
	font-weight: 500
}

.scene-caption .eyebrow {
	color: #d8ebee
}

.scene-caption h1 {
	font-size: clamp(26px, 3.5vw, 52px);
	line-height: 1.04;
	letter-spacing: -2px;
	font-weight: 450;
	margin: 16px 0
}

.scene-caption p {
	font-size: 12px;
	color: #c6e0e5;
	letter-spacing: .1px
}

.camera-bar {
	position: fixed;
	left: 32px;
	bottom: 30px;
	display: flex;
	background: #122630e8;
	border: 1px solid #ffffff24;
	border-radius: 12px;
	padding: 5px;
	gap: 4px;
	backdrop-filter: blur(14px)
}

button {
	border: 0;
	background: none
}

.camera-bar button {
	color: #b5c5cb;
	padding: 12px 17px;
	font-size: 12px;
	border-radius: 7px;
	transition: background .2s, color .2s
}

.camera-bar button span {
	font-size: 9px;
	color: #8099a3;
	margin-right: 7px
}

.camera-bar button.active {
	background: #d1eee6;
	color: #102a36
}

.camera-bar button.active span {
	color: #587e7b
}

.camera-bar button:not(:disabled):hover {
	background: #ffffff15
}

.camera-bar button.active:not(:disabled):hover {
	background: #e1fff5
}

#pause {
	font-size: 18px;
	border-left: 1px solid var(--line);
	border-radius: 0;
	padding: 6px 15px
}

.gesture-hint {
	position: fixed;
	left: 50%;
	bottom: 10px;
	transform: translateX(-50%);
	font-size: 8px;
	letter-spacing: 1.2px;
	color: #d8e8ed;
	text-shadow: 0 1px 5px #0005;
	pointer-events: none
}

.gesture-hint span {
	margin: 0 10px
}

#controls {
	position: fixed;
	right: 24px;
	top: 24px;
	bottom: 24px;
	width: 300px;
	max-height: 910px;
	background: var(--panel);
	border: 1px solid #ffffff26;
	border-radius: 16px;
	box-shadow: 0 18px 60px #10262e30;
	backdrop-filter: blur(24px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: opacity .2s, transform .2s
}

.panel-heading {
	padding: 24px 22px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid var(--line)
}

.panel-heading .eyebrow {
	color: #9bb1bc;
	font-size: 8px
}

.panel-heading h2 {
	font-size: 18px;
	letter-spacing: -.6px;
	font-weight: 450;
	margin: 8px 0 0
}

.version {
	border: 1px solid #ffffff18;
	border-radius: 4px;
	padding: 4px;
	font-size: 8px;
	color: var(--muted)
}

.panel-scroll {
	padding: 20px 22px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #435760 transparent
}

.select-label {
	display: flex;
	justify-content: space-between;
	font-size: 10px;
	color: #a4bac4;
	margin-bottom: 9px
}

.select-label #edited {
	color: var(--accent);
	font-size: 9px
}

select {
	background: #0b1a23;
	border: 1px solid #ffffff1c;
	border-radius: 7px;
	width: 100%;
	padding: 11px 12px;
	font-size: 12px;
	outline-offset: 2px
}

option {
	background: #10212b
}

.preset-preview {
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: 10px;
	color: #9ab1ba;
	margin: 13px 0 25px
}

.swatch {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #80d6ce
}

.control-section h3,
summary {
	font-size: 12px;
	letter-spacing: .2px;
	font-weight: 500;
	margin: 0 0 22px
}

.control-section h3 span,
summary span {
	font-size: 9px;
	color: #78909b;
	margin-right: 8px
}

.control {
	margin-bottom: 20px
}

.control label {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 11px;
	color: #afc2ca;
	margin-bottom: 9px
}

.control output {
	color: #c5e6df;
	font-size: 10px;
	font-variant-numeric: tabular-nums
}

input[type=range] {
	display: block;
	width: 100%;
	height: 3px;
	accent-color: var(--accent);
	cursor: pointer;
	margin: 13px 0 5px;
	background: #4a606a
}

details {
	border-top: 1px solid var(--line);
	padding-top: 18px;
	margin-top: 10px
}

summary {
	cursor: pointer;
	margin-bottom: 18px;
	list-style: none;
	display: block
}

summary:after {
	content: '+';
	float: right;
	color: #91aeb9
}

details[open] summary:after {
	content: '−'
}

.color-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 5px 0 24px
}

.color-row label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 10px;
	color: #a6bdc7
}

input[type=color] {
	width: 24px;
	height: 24px;
	border: 0;
	padding: 0;
	background: none;
	border-radius: 50%;
	cursor: pointer
}

.toggle-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 18px 0;
	font-size: 11px;
	color: #b3c5cd
}

input[type=checkbox] {
	accent-color: var(--accent);
	width: 16px;
	height: 16px
}

.panel-footer {
	display: flex;
	gap: 10px;
	border-top: 1px solid var(--line);
	padding: 16px 20px
}

.panel-footer button {
	padding: 10px 12px;
	border: 1px solid #ffffff25;
	border-radius: 7px;
	font-size: 10px;
	color: #c2d3d9
}

.panel-footer #settings {
	flex: 1;
	background: #c5e8df;
	color: #17353c;
	border-color: transparent
}

.panel-footer button:not(:disabled):hover {
	filter: brightness(1.13)
}

#panel-toggle {
	position: fixed;
	right: 24px;
	top: 24px;
	z-index: 5;
	background: #10212bee;
	color: #c4dedf;
	border: 1px solid #ffffff20;
	border-radius: 10px;
	padding: 11px 15px;
	display: none;
	font-size: 11px
}

#panel-toggle span {
	margin-left: 18px
}

#toast {
	position: fixed;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	background: #10212bf5;
	padding: 12px 18px;
	border-radius: 8px;
	font-size: 12px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s
}

#toast.visible {
	opacity: 1
}

dialog {
	color: #dcebea;
	background: #11232d;
	border: 1px solid #ffffff25;
	border-radius: 16px;
	width: min(610px, calc(100% - 32px));
	padding: 28px;
	box-shadow: 0 30px 100px #0006
}

dialog::backdrop {
	background: #06141d88;
	backdrop-filter: blur(8px)
}

.dialog-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px
}

.dialog-top h2 {
	font-size: 22px;
	letter-spacing: -.7px;
	font-weight: 500;
	margin: 0
}

.dialog-top button {
	color: #b5c8cf;
	font-size: 28px
}

dialog p {
	font-size: 12px;
	line-height: 1.7;
	color: #a5bec8
}

dialog label {
	font-size: 10px;
	color: #a5bec8;
	display: block;
	margin: 22px 0 10px
}

textarea {
	width: 100%;
	height: 280px;
	resize: vertical;
	border: 1px solid #ffffff20;
	border-radius: 8px;
	background: #081920;
	color: #bad9ce;
	padding: 14px;
	font-size: 11px;
	line-height: 1.6;
	font-family: monospace
}

.dialog-actions {
	display: flex;
	gap: 8px;
	margin-top: 16px;
	justify-content: flex-end
}

.dialog-actions button {
	font-size: 11px;
	padding: 11px 15px;
	color: #bcd2d9;
	border: 1px solid #ffffff25;
	border-radius: 7px
}

.dialog-actions .primary {
	background: #c5e8df;
	color: #16323b
}

#settings-error {
	color: #ffa892;
	min-height: 15px;
	margin: 5px 0
}

#fatal {
	position: fixed;
	inset: 0;
	background: #10212b;
	padding: 20vh 10vw;
	z-index: 100
}

#fatal[hidden] {
	display: none
}

#fatal h1 {
	font-size: 30px
}

.collapsed #controls {
	transform: translateX(340px);
	opacity: 0;
	pointer-events: none
}

@media(max-width:1150px) {
	.gesture-hint {
		display: none
	}

	.scene-caption h1 {
		font-size: 36px
	}

	.performance {
		left: 290px
	}
}

@media(max-width:760px) {
	.brand {
		top: 22px;
		left: 20px;
		font-size: 13px
	}

	.brand-icon {
		font-size: 32px
	}

	.brand span {
		font-size: 6px
	}

	.performance {
		top: 78px;
		left: 20px;
		transform: none;
		font-size: 8px;
		padding: 7px 10px
	}

	.scene-caption {
		left: 22px;
		bottom: 102px
	}

	.scene-caption h1 {
		font-size: 30px
	}

	.scene-caption p {
		font-size: 10px
	}

	.scene-caption .eyebrow {
		font-size: 7px
	}

	#panel-toggle {
		display: block;
		top: 22px;
		right: 18px
	}

	#controls {
		top: 70px;
		right: 18px;
		bottom: 90px;
		width: min(300px, calc(100vw - 36px));
		z-index: 4
	}

	.camera-bar {
		left: 18px;
		bottom: 22px;
		right: 18px;
		justify-content: space-between
	}

	.camera-bar button {
		padding: 11px 10px;
		font-size: 11px
	}

	.camera-bar button span {
		font-size: 8px;
		margin-right: 4px
	}

	.dialog-top h2 {
		font-size: 18px
	}

	dialog {
		padding: 20px
	}

	.dialog-actions button {
		padding: 10px;
		font-size: 10px
	}

	textarea {
		height: 220px
	}
}

dialog a {
	color: var(--accent);
	text-underline-offset: 3px
}

.terrain-help {
	font-size: 10px;
	line-height: 1.5;
	color: var(--muted);
	margin: 10px 0 24px
}

.clipping-panel {
	border-bottom: 1px solid var(--line);
	margin-bottom: 24px;
	padding-bottom: 20px
}

.clipping-panel h3 {
	font-size: 13px;
	margin: 0 0 12px;
	display: flex;
	justify-content: space-between;
	align-items: center
}

.clipping-panel a {
	font-size: 10px;
	color: var(--accent)
}

.clipping-panel p {
	font-size: 11px;
	line-height: 1.6;
	color: var(--muted)
}

#clip-sliders {
	margin-top: 24px
}

.clipping-panel button {
	font-size: 11px;
	border: 1px solid #ffffff30;
	border-radius: 6px;
	padding: 9px 12px;
	margin: 3px 3px 3px 0
}

.clipping-panel textarea {
	height: 140px
}

#clip-error {
	color: #ffa892
}

#skybox-file {
	max-width: 100%;
	font: inherit;
	font-size: 11px;
	margin: 8px 0;
}

/* Environment controls keep the main panel compact. */
.toggle-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 12px 0;
	font-size: 12px;
}

.environment-advanced {
	margin-top: 20px;
}

.environment-advanced summary {
	cursor: pointer;
	font-size: 12px;
	margin-bottom: 18px;
}

.environment-advanced select {
	width: 100%;
	margin: 10px 0 20px;
}

.quality-summary,
.weather-status {
	color: #9eb7c1;
	font-size: 10px;
	line-height: 1.6;
	margin: 8px 0 14px;
}

.quality-summary a {
	color: #a5e3d9;
	text-underline-offset: 3px;
}

#experiment-controls + .control {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#transition-controls {
	margin-top: 18px;
}

#lighting-presets {
	display: flex;
	gap: 8px;
	margin: 12px 0;
}

#lighting-presets button {
	padding: 8px 10px;
	border: 1px solid #38525d;
	border-radius: 6px;
	cursor: pointer;
}

#lighting-presets button:not(:disabled):hover {
	background: #29434b;
}

/* Compact folders: the panel grows only when a settings group is opened. */
#controls {
	bottom: auto;
	max-height: calc(100dvh - 84px);
	top: 64px;
}

#panel-toggle {
	display: block;
}

.panel-heading {
	padding: 14px 18px;
	flex-shrink: 0;
}

.panel-heading .eyebrow,
.panel-heading .version {
	display: none;
}

.panel-heading h2 {
	margin: 0;
	font-size: 14px;
}

.panel-scroll {
	padding: 0 16px;
	min-height: 0;
}

.control-group {
	margin: 0;
	padding: 0;
}

.control-group > summary {
	margin: 0;
	padding: 13px 0;
	font-size: 12px;
}

.control-group[open] > summary {
	margin-bottom: 10px;
}

details:not([open]) > summary:after {
	content: '+';
}

details[open] > summary:after {
	content: '−';
}

.panel-footer {
	flex-shrink: 0;
	padding: 12px 16px;
}