:root {
	--bg: #050d18;
	--bg-2: #091626;
	--panel: rgba(10, 18, 31, 0.82);
	--panel-strong: rgba(10, 18, 31, 0.95);
	--line: rgba(255, 255, 255, 0.08);
	--text: #eef5ff;
	--muted: #9baecc;
	--cyan: #68e7ff;
	--blue: #4a80ff;
	--violet: #9d7aff;
	--lime: #88ef80;
	--amber: #ffbf4d;
	--coral: #ff7b72;
	--shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
	--spectrum: linear-gradient(90deg, var(--coral), var(--amber), var(--lime), var(--cyan), var(--blue), var(--violet));
	--max: 1480px;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	min-height: 100vh;
	overflow-x: hidden;
	color: var(--text);
	font-family: "IBM Plex Sans", sans-serif;
	background:
		radial-gradient(circle at 10% 10%, rgba(104, 231, 255, 0.12), transparent 20%),
		radial-gradient(circle at 88% 10%, rgba(157, 122, 255, 0.14), transparent 24%),
		radial-gradient(circle at 50% 85%, rgba(136, 239, 128, 0.07), transparent 22%),
		linear-gradient(180deg, #050d18 0%, #071220 45%, #091626 100%);
}

button,
select,
input { font: inherit; }

button,
select { color: var(--text); }

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

.container {
	width: min(var(--max), calc(100% - 32px));
	margin: 0 auto;
}

.nav {
	position: sticky;
	top: 0;
	z-index: 40;
	backdrop-filter: blur(18px);
	background: rgba(5, 13, 24, 0.72);
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nav-inner,
.brand,
.nav-status,
.control-inline,
.button-group,
.canvas-legend,
.lab-footer {
	display: flex;
	align-items: center;
}

.nav-inner {
	justify-content: space-between;
	gap: 20px;
	padding: 14px 0;
}

.brand {
	gap: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.brand-mark {
	width: 44px;
	height: 44px;
	border-radius: 15px;
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, var(--cyan), var(--blue), var(--violet));
	color: #03101a;
	box-shadow: var(--shadow);
	font: 700 0.86rem/1 "Space Grotesk", sans-serif;
}

.brand strong,
.brand-sub { display: block; }

.brand-sub {
	margin-top: 3px;
	color: var(--muted);
	font-size: 0.82rem;
	font-weight: 500;
}

.nav-status {
	gap: 9px;
	color: var(--muted);
	font-size: 0.86rem;
}

.status-dot,
.observation-pulse,
.eyebrow-dot {
	width: 8px;
	height: 8px;
	flex: 0 0 auto;
	border-radius: 999px;
}

.status-waiting { background: var(--amber); }
.status-online { background: var(--lime); box-shadow: 0 0 15px rgba(136, 239, 128, 0.8); }
.status-offline { background: var(--coral); box-shadow: 0 0 15px rgba(255, 123, 114, 0.6); }

.lab-shell { padding: 36px 0 24px; }

.lab-header {
	display: grid;
	grid-template-columns: 1fr minmax(280px, 420px);
	gap: 30px;
	align-items: end;
	margin-bottom: 24px;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 9px 13px;
	margin-bottom: 15px;
	border: 1px solid rgba(104, 231, 255, 0.18);
	border-radius: 999px;
	color: #d6fbff;
	background: rgba(104, 231, 255, 0.08);
	font-size: 0.86rem;
}

.eyebrow-dot {
	background: var(--lime);
	box-shadow: 0 0 16px rgba(136, 239, 128, 0.85);
}

h1,
h2,
h3 {
	font-family: "Space Grotesk", sans-serif;
}

h1 {
	margin: 0;
	font-size: clamp(2.5rem, 6vw, 5rem);
	line-height: 0.96;
	letter-spacing: -0.06em;
}

h1 span {
	display: block;
	background: var(--spectrum);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.lab-header p {
	margin: 16px 0 0;
	color: var(--muted);
	font-size: 1.05rem;
}

.header-note {
	padding: 18px;
	border-left: 2px solid var(--cyan);
	color: var(--muted);
	line-height: 1.6;
}

.header-note strong {
	display: block;
	margin-bottom: 5px;
	color: var(--text);
	font-family: "Space Grotesk", sans-serif;
}

.panel {
	border: 1px solid var(--line);
	border-radius: 24px;
	background: linear-gradient(180deg, rgba(12, 21, 36, 0.90), rgba(9, 16, 29, 0.94));
	box-shadow: var(--shadow);
}

.control-bar {
	display: grid;
	grid-template-columns: minmax(210px, 1.5fr) minmax(150px, 0.8fr) minmax(185px, 0.9fr) minmax(120px, 0.5fr);
	gap: 20px;
	align-items: end;
	padding: 16px 18px;
	margin-bottom: 20px;
}

.sound-panel {
	display: grid;
	grid-template-columns: minmax(230px, 0.55fr) minmax(0, 1.45fr);
	align-items: start;
	gap: 20px;
	padding: 17px 18px;
	margin-bottom: 20px;
	border-color: rgba(104, 231, 255, 0.16);
	background:
		linear-gradient(110deg, rgba(104, 231, 255, 0.07), transparent 48%),
		linear-gradient(180deg, rgba(12, 21, 36, 0.90), rgba(9, 16, 29, 0.94));
}

.sound-panel-copy {
	display: grid;
	gap: 5px;
	padding-top: 4px;
}

.sound-panel-copy strong {
	font-family: "Space Grotesk", sans-serif;
	font-size: 0.95rem;
}

.sound-panel-copy > span:last-child {
	color: var(--muted);
	font-size: 0.76rem;
}

.sound-controls {
	display: grid;
	gap: 12px;
	min-width: 0;
}

.audio-toolbar {
	display: grid;
	grid-template-columns: minmax(190px, 1fr) minmax(165px, 0.85fr) auto minmax(128px, 0.55fr) auto;
	align-items: end;
	gap: 10px;
}

.sound-panel.collapsed {
	align-items: center;
	padding-block: 13px;
}

.sound-panel.collapsed .sound-panel-copy > span:last-child {
	display: none;
}

.sound-panel.collapsed .audio-toolbar {
	grid-template-columns: minmax(190px, 1fr) auto minmax(128px, 0.55fr) auto;
}

.audio-actions {
	display: flex;
	align-items: center;
	gap: 7px;
}

.audio-actions button {
	min-width: 94px;
	padding-inline: 11px;
	border-color: rgba(104, 231, 255, 0.20);
}

.sound-play-button {
	color: #d6fbff;
	background: rgba(104, 231, 255, 0.10);
}

.sound-play-button:not(:disabled):hover {
	background: rgba(104, 231, 255, 0.18);
}

.sound-stop-button:not(:disabled) {
	color: #ffe6bd;
	border-color: rgba(255, 191, 77, 0.28);
}

.audio-toggle-button {
	min-width: 154px;
	color: var(--cyan);
	border-color: rgba(104, 231, 255, 0.28);
	background: rgba(104, 231, 255, 0.06);
}

.audio-toggle-button:hover {
	background: rgba(104, 231, 255, 0.13);
}

.sound-mute-button[aria-pressed="true"] {
	color: #ffd8d4;
	border-color: rgba(255, 123, 114, 0.32);
	background: rgba(255, 123, 114, 0.10);
}

.sound-controls button:disabled {
	cursor: default;
	opacity: 0.58;
}

.sound-status {
	align-self: center;
	min-width: 128px;
	color: var(--muted);
	font-size: 0.74rem;
	text-align: right;
}

.sound-controls[data-sound-state="active"] .sound-status {
	color: var(--lime);
}

.sound-controls[data-sound-state="muted"] .sound-status {
	color: var(--coral);
}

.audio-readout {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 7px;
}

.audio-readout div {
	display: grid;
	gap: 4px;
	min-width: 0;
	padding: 9px 10px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.025);
}

.audio-readout span {
	overflow: hidden;
	color: var(--muted);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

.audio-readout strong {
	overflow: hidden;
	color: var(--text);
	font-size: 0.76rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.audio-track-panel {
	overflow-x: auto;
	border: 1px solid rgba(157, 122, 255, 0.14);
	border-radius: 12px;
}

.audio-track-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.72rem;
}

.audio-track-table th,
.audio-track-table td {
	padding: 8px 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	text-align: left;
	white-space: nowrap;
}

.audio-track-table th {
	color: var(--muted);
	font-size: 0.63rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.audio-track-table tbody tr:last-child td { border-bottom: 0; }
.audio-track-value {
	color: var(--cyan);
	font-variant-numeric: tabular-nums;
}

.audio-track-toggle {
	width: 16px;
	height: 16px;
	accent-color: var(--cyan);
}

.audio-melody-control[hidden],
.audio-track-panel[hidden],
.audio-panel-details[hidden] {
	display: none;
}

.model-guide {
	margin-top: 20px;
	padding: 22px;
	scroll-behavior: smooth;
}

.guide-nav {
	position: sticky;
	top: 82px;
	z-index: 10;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 10px;
	margin-bottom: 8px;
	border: 1px solid rgba(104, 231, 255, 0.12);
	border-radius: 14px;
	background: rgba(7, 18, 32, 0.92);
	backdrop-filter: blur(12px);
}

.guide-nav a {
	padding: 7px 10px;
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 999px;
	color: var(--muted);
	font-size: 0.73rem;
	font-weight: 600;
}

.guide-nav a:hover {
	color: var(--text);
	border-color: rgba(104, 231, 255, 0.30);
	background: rgba(104, 231, 255, 0.08);
}

.guide-section {
	padding: 30px 2px 26px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	scroll-margin-top: 142px;
}

.guide-section:last-child {
	padding-bottom: 8px;
	border-bottom: 0;
}

.guide-section h2 {
	margin: 5px 0 10px;
	font-size: clamp(1.35rem, 2.6vw, 2rem);
	letter-spacing: -0.035em;
}

.guide-section h3 {
	margin: 24px 0 10px;
	font-size: 1rem;
}

.guide-intro {
	max-width: 940px;
	margin: 0;
	color: var(--muted);
	font-size: 0.9rem;
	line-height: 1.65;
}

.definition-grid,
.macrofigure-definition-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-top: 13px;
}

.definition-card,
.macrofigure-definition-card {
	min-width: 0;
	padding: 14px;
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.025);
}

.definition-card strong,
.macrofigure-definition-card strong {
	color: var(--text);
	font-family: "Space Grotesk", sans-serif;
	font-size: 0.84rem;
}

.definition-card p,
.macrofigure-definition-card p {
	margin: 6px 0 0;
	color: var(--muted);
	font-size: 0.78rem;
	line-height: 1.5;
}

.macrofigure-definition-card {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 11px;
	align-items: start;
}

.info-macro-icon {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(104, 231, 255, 0.13);
	border-radius: 13px;
	background: rgba(104, 231, 255, 0.06);
	font-size: 1.45rem;
}

.sonification-definition-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.usage-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 9px;
	padding: 0;
	margin: 14px 0 0;
	list-style: none;
	counter-reset: usage-step;
}

.usage-list li {
	position: relative;
	min-height: 48px;
	padding: 12px 13px 12px 45px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 13px;
	color: var(--muted);
	background: rgba(255, 255, 255, 0.02);
	font-size: 0.8rem;
	line-height: 1.45;
	counter-increment: usage-step;
}

.usage-list li::before {
	content: counter(usage-step);
	position: absolute;
	top: 10px;
	left: 11px;
	width: 23px;
	height: 23px;
	display: grid;
	place-items: center;
	border-radius: 8px;
	color: #03101a;
	background: var(--cyan);
	font-size: 0.7rem;
	font-weight: 800;
}

.control {
	display: grid;
	gap: 8px;
	color: var(--muted);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.control-inline { gap: 12px; }

input[type="range"] {
	width: 100%;
	accent-color: var(--cyan);
}

output {
	min-width: 36px;
	padding: 5px 8px;
	border: 1px solid var(--line);
	border-radius: 9px;
	color: var(--text);
	background: rgba(255, 255, 255, 0.04);
	text-align: center;
}

select,
button {
	min-height: 38px;
	border: 1px solid var(--line);
	border-radius: 11px;
	background: rgba(255, 255, 255, 0.04);
	cursor: pointer;
}

select {
	padding: 0 12px;
	color: var(--text);
	background-color: #0c1524;
	color-scheme: dark;
}

select option,
select optgroup {
	color: #07111f;
	background-color: #eef5ff;
}

select option:checked {
	color: #03101a;
	background-color: #9eefff;
}

button { padding: 0 15px; }
button:hover,
select:hover { border-color: rgba(104, 231, 255, 0.35); }

.button-group { gap: 8px; }
.button-group button { flex: 1; }

.toggle-control {
	position: relative;
	align-content: end;
	justify-content: start;
}

.toggle-control input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.toggle-ui {
	position: relative;
	width: 48px;
	height: 27px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	cursor: pointer;
}

.toggle-ui::after {
	content: "";
	position: absolute;
	top: 4px;
	left: 4px;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: var(--muted);
	transition: 0.2s ease;
}

.toggle-control input:checked + .toggle-ui { background: rgba(104, 231, 255, 0.15); }
.toggle-control input:checked + .toggle-ui::after {
	transform: translateX(21px);
	background: var(--cyan);
	box-shadow: 0 0 13px rgba(104, 231, 255, 0.8);
}

.lab-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.75fr) minmax(320px, 0.75fr);
	gap: 20px;
	align-items: start;
}

.aquarium-panel,
.observation-panel { padding: 18px; }

.panel-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	margin-bottom: 15px;
}

.panel-head h2 {
	margin: 3px 0 0;
	font-size: 1.28rem;
	letter-spacing: -0.03em;
}

.panel-kicker,
.macrofigure-code {
	color: var(--cyan);
	font-size: 0.71rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.canvas-legend {
	gap: 15px;
	color: var(--muted);
	font-size: 0.76rem;
}

.canvas-legend span {
	display: flex;
	align-items: center;
	gap: 6px;
}

.canvas-legend i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.legend-fish { background: var(--cyan); }
.legend-predator { background: var(--coral); }
.legend-food { background: var(--amber); }

.aquarium-wrap {
	position: relative;
	min-height: 590px;
	overflow: hidden;
	border: 1px solid rgba(104, 231, 255, 0.14);
	border-radius: 18px;
	background: #0c7797;
}

#aquarium {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	cursor: crosshair;
	touch-action: none;
}

.canvas-hint {
	position: absolute;
	right: 12px;
	bottom: 11px;
	left: 12px;
	display: flex;
	justify-content: space-between;
	gap: 12px;
	pointer-events: none;
	color: rgba(238, 245, 255, 0.66);
	font-size: 0.71rem;
}

.observation-panel {
	position: sticky;
	top: 86px;
}

.observation-pulse {
	background: var(--cyan);
	box-shadow: 0 0 16px rgba(104, 231, 255, 0.9);
	opacity: 0.28;
}

.observation-pulse.active { animation: observation 0.55s ease; }

@keyframes observation {
	0% { transform: scale(1); opacity: 0.3; }
	40% { transform: scale(2.3); opacity: 1; }
	100% { transform: scale(1); opacity: 0.3; }
}

.macrofigure-card {
	display: grid;
	grid-template-columns: 58px 1fr;
	gap: 14px;
	min-height: 126px;
	padding: 16px;
	margin-bottom: 15px;
	border: 1px solid rgba(104, 231, 255, 0.14);
	border-radius: 18px;
	background:
		radial-gradient(circle at top left, rgba(104, 231, 255, 0.13), transparent 44%),
		rgba(255, 255, 255, 0.025);
}

.macrofigure-icon {
	width: 58px;
	height: 58px;
	display: grid;
	place-items: center;
	border: 1px solid var(--line);
	border-radius: 17px;
	background: rgba(255, 255, 255, 0.04);
	font-size: 1.8rem;
}

.macrofigure-card h3 {
	margin: 5px 0 7px;
	font-size: 1.12rem;
}

.macrofigure-card p {
	margin: 0;
	color: var(--muted);
	font-size: 0.83rem;
	line-height: 1.45;
}

.observable-list { display: grid; gap: 9px; }

.observable {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 94px;
	grid-template-rows: auto auto;
	gap: 6px 12px;
	padding: 10px 11px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 13px;
	background: rgba(255, 255, 255, 0.022);
}

.observable-copy {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: 0.78rem;
}

.observable-copy span { color: var(--muted); }
.observable-copy strong { font-variant-numeric: tabular-nums; }

.meter {
	height: 4px;
	overflow: hidden;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
}

.meter span {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: var(--metric-color, var(--cyan));
	box-shadow: 0 0 9px var(--metric-color, var(--cyan));
	transition: width 0.35s ease;
}

.observable canvas {
	grid-column: 2;
	grid-row: 1 / span 2;
	width: 94px;
	height: 31px;
	align-self: center;
}

.observable[data-key="coherence"] { --metric-color: var(--cyan); }
.observable[data-key="dispersion"] { --metric-color: var(--amber); }
.observable[data-key="alignment"] { --metric-color: var(--lime); }
.observable[data-key="predator_pressure"] { --metric-color: var(--coral); }
.observable[data-key="criticality"] { --metric-color: var(--violet); }
.observable[data-key="stability"] { --metric-color: var(--blue); }

.lab-footer {
	justify-content: space-between;
	gap: 18px;
	padding: 22px 2px 4px;
	color: var(--muted);
	font-size: 0.78rem;
}

.lab-footer a { color: var(--cyan); }

@media (max-width: 1120px) {
	.lab-grid { grid-template-columns: 1fr; }
	.observation-panel { position: static; }
	.observable-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sound-panel { grid-template-columns: 1fr; }
	.definition-grid,
	.macrofigure-definition-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
	.nav-status { display: none; }
	.lab-header { grid-template-columns: 1fr; }
	.header-note { display: none; }
	.control-bar { grid-template-columns: 1fr 1fr; }
	.audio-toolbar,
	.sound-panel.collapsed .audio-toolbar { grid-template-columns: 1fr 1fr; }
	.audio-actions { grid-column: 1 / -1; }
	.sound-status { text-align: left; }
	.audio-toggle-button { min-width: 0; }
	.audio-readout { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.guide-nav { position: static; }
	.guide-section { scroll-margin-top: 82px; }
	.usage-list { grid-template-columns: 1fr; }
	.aquarium-wrap { min-height: 500px; }
	.canvas-legend { display: none; }
	.canvas-hint { display: none; }
	.lab-footer { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 560px) {
	.container { width: min(100% - 20px, var(--max)); }
	.brand strong { font-size: 0.88rem; }
	.control-bar,
	.observable-list { grid-template-columns: 1fr; }
	.audio-toolbar,
	.sound-panel.collapsed .audio-toolbar { grid-template-columns: 1fr; }
	.audio-actions { grid-column: auto; display: grid; grid-template-columns: 1fr 1fr; }
	.audio-actions button { min-width: 0; }
	.sound-mute-button { grid-column: 1 / -1; }
	.audio-readout { grid-template-columns: 1fr 1fr; }
	.model-guide { padding: 13px; }
	.guide-nav { gap: 6px; padding: 8px; }
	.guide-nav a { flex: 1 1 calc(50% - 6px); text-align: center; }
	.definition-grid,
	.macrofigure-definition-grid,
	.sonification-definition-grid { grid-template-columns: 1fr; }
	.aquarium-wrap { min-height: 440px; }
	.aquarium-panel,
	.observation-panel { padding: 12px; }
	.lab-shell { padding-top: 24px; }
}