/* ============================================================
   Fourier — CCNR — thème oscilloscope
   ============================================================ */

:root{
	--ground:#06090b;
	--panel:rgba(10,16,19,.76);
	--panel-2:rgba(16,24,28,.68);
	--hairline:rgba(255,255,255,.09);
	--grid-line:rgba(77,255,184,.10);
	--grid-line-major:rgba(77,255,184,.20);
	--ch1:#4dffb8;
	--ch2:#ffb020;
	--text:#eaf6f1;
	--text-muted:#8fa39c;
	--text-faint:#5c6b66;
	--focus:#9dffdd;
	}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
	background:var(--ground);
	color:var(--text);
	font-family:'Barlow', Arial, sans-serif;
	min-height:100vh;
	padding-inline:16px;
	}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; border:0 none; }
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

.wrap{
	max-width:920px;
	margin:0 auto;
	padding-block:24px 44px;
	display:flex;
	flex-direction:column;
	gap:18px;
	}

/* ---------------- nav ---------------- */
header{
	background:var(--panel);
	backdrop-filter:blur(14px) saturate(140%);
	-webkit-backdrop-filter:blur(14px) saturate(140%);
	border:1px solid var(--hairline);
	border-radius:14px;
	padding:14px 20px;
	display:flex;
	align-items:center;
	gap:16px;
	flex-wrap:wrap;
	}
.brand{
	display:flex;
	align-items:center;
	gap:10px;
	font-family:'IBM Plex Mono',monospace;
	font-weight:600;
	font-size:13px;
	letter-spacing:.06em;
	color:var(--ch1);
	}
.spacer{ flex:1; }
nav{ display:flex; gap:4px; flex-wrap:wrap; }
nav a{
	font-size:13px;
	font-weight:600;
	padding:7px 13px;
	border-radius:999px;
	color:var(--text-muted);
	white-space:nowrap;
	}
nav a.on{ color:var(--ground); background:var(--ch1); }
nav a.legacy{ border:1px solid var(--hairline); color:var(--text-muted); }
nav a.legacy:hover{ border-color:var(--ch2); color:var(--ch2); }
nav a:hover:not(.on):not(.legacy){ color:var(--text); background:var(--panel-2); }

/* ---------------- hero ---------------- */
.hero{
	position:relative;
	border:1px solid var(--hairline);
	border-radius:14px;
	overflow:hidden;
	background:
		linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0/28px 28px,
		linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0/28px 28px,
		linear-gradient(var(--grid-line-major) 1px, transparent 1px) 0 0/140px 140px,
		linear-gradient(90deg, var(--grid-line-major) 1px, transparent 1px) 0 0/140px 140px,
		radial-gradient(ellipse at 50% 0%, rgba(77,255,184,.08), transparent 60%),
		#080c0e;
	padding:18px 22px 16px;
	}
.hero canvas.sweep{
	position:absolute; inset:0;
	width:100%; height:100%;
	}
.hero-inner{ position:relative; z-index:1; max-width:56ch; }
.eyebrow{
	font-family:'IBM Plex Mono',monospace;
	font-size:10.5px;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--ch1);
	margin:0;
	}
.hero h1{
	font-family:'Barlow',sans-serif;
	font-weight:600;
	font-size:clamp(19px,3.2vw,24px);
	margin:5px 0 0;
	text-wrap:balance;
	}
.hero p{
	margin:6px 0 0;
	color:var(--text-muted);
	font-size:13px;
	line-height:1.5;
	max-width:52ch;
	}
.legend{
	display:flex;
	flex-wrap:wrap;
	gap:16px;
	margin-top:10px;
	font-family:'IBM Plex Mono',monospace;
	font-size:11px;
	color:var(--text-muted);
	}
.legend span{ display:inline-flex; align-items:center; gap:6px; }
.legend i{ width:14px; height:2px; display:inline-block; border-radius:2px; }

/* ---------------- tool panel ---------------- */
.panel{
	background:var(--panel);
	backdrop-filter:blur(14px) saturate(140%);
	-webkit-backdrop-filter:blur(14px) saturate(140%);
	border:1px solid var(--hairline);
	border-radius:14px;
	padding:22px 24px 26px;
	}
.panel h2{
	margin:0 0 4px;
	font-family:'IBM Plex Mono',monospace;
	font-size:11px;
	font-weight:600;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--text-muted);
	}
.panel .sub{
	margin:0 0 18px;
	font-size:13px;
	color:var(--text-faint);
	max-width:65ch;
	line-height:1.5;
	}
form.tool{
	display:flex;
	gap:16px;
	flex-wrap:wrap;
	align-items:end;
	}
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{
	font-family:'IBM Plex Mono',monospace;
	font-size:10.5px;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--text-muted);
	}
.field input, .field select{
	background:rgba(0,0,0,.35);
	border:1.5px solid var(--ch1);
	border-radius:8px;
	color:var(--text);
	font-family:'Barlow',sans-serif;
	font-size:14px;
	padding:9px 12px;
	box-shadow:0 0 0 1px rgba(77,255,184,.15);
	}
.field input{ width:90px; text-align:center; font-family:'IBM Plex Mono',monospace; }
.field input:focus, .field select:focus{ outline:none; border-color:var(--focus); box-shadow:0 0 0 2px rgba(157,255,221,.3); }
button.run{
	border:0;
	background:var(--ch1);
	color:#052018;
	font-weight:600;
	font-size:13.5px;
	padding:11px 20px;
	border-radius:8px;
	cursor:pointer;
	font-family:'Barlow',sans-serif;
	}
button.run:hover{ background:var(--focus); }

.hint{
	margin:18px 0 0;
	font-size:13px;
	color:var(--text-faint);
	}

.readout{
	margin:18px 0 0;
	padding:10px 14px;
	background:var(--panel-2);
	border:1px solid var(--hairline);
	border-radius:8px;
	font-size:13.5px;
	display:flex;
	align-items:center;
	gap:10px;
	flex-wrap:wrap;
	}
.readout .ch{
	font-family:'IBM Plex Mono',monospace;
	font-size:10px;
	letter-spacing:.08em;
	color:var(--ground);
	background:var(--ch1);
	padding:2px 6px;
	border-radius:4px;
	font-weight:600;
	}
.readout code{
	font-family:'IBM Plex Mono',monospace;
	letter-spacing:.12em;
	color:var(--ch1);
	background:rgba(77,255,184,.08);
	padding:2px 6px;
	border-radius:4px;
	}
.readout .hex{
	font-family:'IBM Plex Mono',monospace;
	color:var(--text-faint);
	font-size:12px;
	}

.chart-wrap{
	margin-top:24px;
	border-top:1px solid var(--hairline);
	padding-top:10px;
	}
#fourierChart{ width:100% !important; height:260px !important; }

footer{
	text-align:center;
	font-size:11px;
	color:var(--text-faint);
	padding-block:4px;
	font-family:'IBM Plex Mono',monospace;
	}

@media (max-width:480px){
	.hero{ padding:16px 16px 14px; }
	.panel{ padding:18px; }
	}