* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background: #0a0a18;
	font-family: 'Inter', sans-serif;
	color: #e0e0e0;
	min-height: 100vh;
}

/* --- Starfield Background --- */

#starfield {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	background:
		radial-gradient(ellipse at 15% 55%, rgba(40, 20, 90, 0.35) 0%, transparent 55%),
		radial-gradient(ellipse at 82% 20%, rgba(20, 45, 100, 0.3) 0%, transparent 50%),
		radial-gradient(ellipse at 55% 85%, rgba(60, 15, 60, 0.2) 0%, transparent 45%);
}

.stars {
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 50%;
	background: transparent;
	will-change: transform;
}

/* Small stars — 1px, slow drift */
.stars-sm {
	width: 1px;
	height: 1px;
	animation: drift 200s linear infinite;
	box-shadow:
		127px 83px rgba(255,255,255,0.4),  127px 2083px rgba(255,255,255,0.4),
		783px 142px rgba(255,255,255,0.5),  783px 2142px rgba(255,255,255,0.5),
		1542px 67px rgba(255,255,255,0.3),  1542px 2067px rgba(255,255,255,0.3),
		394px 251px rgba(255,255,255,0.5),  394px 2251px rgba(255,255,255,0.5),
		1187px 309px rgba(255,255,255,0.4), 1187px 2309px rgba(255,255,255,0.4),
		56px 398px rgba(255,255,255,0.6),   56px 2398px rgba(255,255,255,0.6),
		862px 467px rgba(255,255,255,0.3),  862px 2467px rgba(255,255,255,0.3),
		1623px 528px rgba(255,255,255,0.5), 1623px 2528px rgba(255,255,255,0.5),
		311px 597px rgba(255,255,255,0.4),  311px 2597px rgba(255,255,255,0.4),
		1067px 652px rgba(255,255,255,0.5), 1067px 2652px rgba(255,255,255,0.5),
		156px 721px rgba(255,255,255,0.3),  156px 2721px rgba(255,255,255,0.3),
		1834px 789px rgba(255,255,255,0.4), 1834px 2789px rgba(255,255,255,0.4),
		567px 845px rgba(255,255,255,0.6),  567px 2845px rgba(255,255,255,0.6),
		1345px 912px rgba(255,255,255,0.4), 1345px 2912px rgba(255,255,255,0.4),
		723px 978px rgba(255,255,255,0.5),  723px 2978px rgba(255,255,255,0.5),
		1490px 1045px rgba(255,255,255,0.3), 1490px 3045px rgba(255,255,255,0.3),
		234px 1112px rgba(255,255,255,0.5), 234px 3112px rgba(255,255,255,0.5),
		1012px 1178px rgba(255,255,255,0.4), 1012px 3178px rgba(255,255,255,0.4),
		678px 1245px rgba(255,255,255,0.6), 678px 3245px rgba(255,255,255,0.6),
		1789px 1312px rgba(255,255,255,0.3), 1789px 3312px rgba(255,255,255,0.3),
		456px 1378px rgba(255,255,255,0.5), 456px 3378px rgba(255,255,255,0.5),
		1234px 1445px rgba(255,255,255,0.4), 1234px 3445px rgba(255,255,255,0.4),
		89px 1512px rgba(255,255,255,0.5),  89px 3512px rgba(255,255,255,0.5),
		912px 1578px rgba(255,255,255,0.3), 912px 3578px rgba(255,255,255,0.3),
		1567px 1645px rgba(255,255,255,0.4), 1567px 3645px rgba(255,255,255,0.4),
		345px 1712px rgba(255,255,255,0.6), 345px 3712px rgba(255,255,255,0.6),
		1678px 1778px rgba(255,255,255,0.5), 1678px 3778px rgba(255,255,255,0.5),
		523px 1845px rgba(255,255,255,0.3), 523px 3845px rgba(255,255,255,0.3),
		1156px 1912px rgba(255,255,255,0.4), 1156px 3912px rgba(255,255,255,0.4),
		890px 1978px rgba(255,255,255,0.5), 890px 3978px rgba(255,255,255,0.5),
		45px 45px rgba(255,255,255,0.4),    45px 2045px rgba(255,255,255,0.4),
		1890px 189px rgba(255,255,255,0.3), 1890px 2189px rgba(255,255,255,0.3),
		645px 356px rgba(255,255,255,0.5),  645px 2356px rgba(255,255,255,0.5),
		1423px 423px rgba(255,255,255,0.4), 1423px 2423px rgba(255,255,255,0.4),
		278px 534px rgba(255,255,255,0.6),  278px 2534px rgba(255,255,255,0.6),
		1712px 612px rgba(255,255,255,0.3), 1712px 2612px rgba(255,255,255,0.3),
		489px 689px rgba(255,255,255,0.5),  489px 2689px rgba(255,255,255,0.5),
		1234px 767px rgba(255,255,255,0.4), 1234px 2767px rgba(255,255,255,0.4),
		756px 856px rgba(255,255,255,0.3),  756px 2856px rgba(255,255,255,0.3),
		1578px 934px rgba(255,255,255,0.5), 1578px 2934px rgba(255,255,255,0.5),
		167px 1023px rgba(255,255,255,0.4), 167px 3023px rgba(255,255,255,0.4),
		934px 1089px rgba(255,255,255,0.6), 934px 3089px rgba(255,255,255,0.6),
		1456px 1167px rgba(255,255,255,0.3), 1456px 3167px rgba(255,255,255,0.3),
		345px 1234px rgba(255,255,255,0.5), 345px 3234px rgba(255,255,255,0.5),
		1823px 1312px rgba(255,255,255,0.4), 1823px 3312px rgba(255,255,255,0.4),
		612px 1389px rgba(255,255,255,0.3), 612px 3389px rgba(255,255,255,0.3),
		1123px 1467px rgba(255,255,255,0.5), 1123px 3467px rgba(255,255,255,0.5),
		423px 1545px rgba(255,255,255,0.4), 423px 3545px rgba(255,255,255,0.4),
		1678px 1623px rgba(255,255,255,0.6), 1678px 3623px rgba(255,255,255,0.6),
		78px 1712px rgba(255,255,255,0.3),  78px 3712px rgba(255,255,255,0.3);
}

/* Medium stars — 2px, medium drift */
.stars-md {
	width: 2px;
	height: 2px;
	animation: drift 140s linear infinite;
	box-shadow:
		456px 89px rgba(255,255,255,0.6),   456px 2089px rgba(255,255,255,0.6),
		1234px 178px rgba(255,255,255,0.7), 1234px 2178px rgba(255,255,255,0.7),
		789px 267px rgba(255,255,255,0.5),  789px 2267px rgba(255,255,255,0.5),
		1678px 356px rgba(255,255,255,0.6), 1678px 2356px rgba(255,255,255,0.6),
		234px 445px rgba(255,255,255,0.8),  234px 2445px rgba(255,255,255,0.8),
		1012px 534px rgba(255,255,255,0.6), 1012px 2534px rgba(255,255,255,0.6),
		567px 623px rgba(255,255,255,0.7),  567px 2623px rgba(255,255,255,0.7),
		1456px 712px rgba(255,255,255,0.5), 1456px 2712px rgba(255,255,255,0.5),
		123px 801px rgba(255,255,255,0.6),  123px 2801px rgba(255,255,255,0.6),
		890px 890px rgba(255,255,255,0.8),  890px 2890px rgba(255,255,255,0.8),
		1567px 978px rgba(255,255,255,0.6), 1567px 2978px rgba(255,255,255,0.6),
		345px 1067px rgba(255,255,255,0.7), 345px 3067px rgba(255,255,255,0.7),
		1234px 1156px rgba(255,255,255,0.5), 1234px 3156px rgba(255,255,255,0.5),
		678px 1245px rgba(255,255,255,0.6), 678px 3245px rgba(255,255,255,0.6),
		1789px 1334px rgba(255,255,255,0.8), 1789px 3334px rgba(255,255,255,0.8),
		456px 1423px rgba(255,255,255,0.6), 456px 3423px rgba(255,255,255,0.6),
		1123px 1512px rgba(255,255,255,0.7), 1123px 3512px rgba(255,255,255,0.7),
		234px 1601px rgba(255,255,255,0.5), 234px 3601px rgba(255,255,255,0.5),
		912px 1689px rgba(255,255,255,0.6), 912px 3689px rgba(255,255,255,0.6),
		1567px 1778px rgba(255,255,255,0.8), 1567px 3778px rgba(255,255,255,0.8),
		89px 1867px rgba(255,255,255,0.6),  89px 3867px rgba(255,255,255,0.6),
		1345px 1956px rgba(255,255,255,0.7), 1345px 3956px rgba(255,255,255,0.7),
		723px 134px rgba(255,255,255,0.6),  723px 2134px rgba(255,255,255,0.6),
		1890px 567px rgba(255,255,255,0.7), 1890px 2567px rgba(255,255,255,0.7),
		534px 1890px rgba(255,255,255,0.5), 534px 3890px rgba(255,255,255,0.5);
}

/* Large stars — 3px, faster drift + twinkle */
.stars-lg {
	width: 3px;
	height: 3px;
	animation: drift 90s linear infinite, twinkle 4s ease-in-out infinite alternate;
	box-shadow:
		345px 134px rgba(255,255,255,0.9),      345px 2134px rgba(255,255,255,0.9),
		1567px 312px rgba(180,200,255,0.9),     1567px 2312px rgba(180,200,255,0.9),
		789px 534px rgba(255,255,255,1),         789px 2534px rgba(255,255,255,1),
		1234px 756px rgba(200,220,255,0.8),     1234px 2756px rgba(200,220,255,0.8),
		156px 978px rgba(255,255,255,0.9),       156px 2978px rgba(255,255,255,0.9),
		1678px 1123px rgba(255,240,220,0.9),    1678px 3123px rgba(255,240,220,0.9),
		567px 1345px rgba(255,255,255,1),        567px 3345px rgba(255,255,255,1),
		1012px 1567px rgba(180,200,255,0.8),    1012px 3567px rgba(180,200,255,0.8),
		234px 1734px rgba(255,255,255,0.9),      234px 3734px rgba(255,255,255,0.9),
		1456px 1912px rgba(255,255,255,1),      1456px 3912px rgba(255,255,255,1),
		890px 189px rgba(200,220,255,0.9),       890px 2189px rgba(200,220,255,0.9),
		1823px 867px rgba(255,240,220,0.8),     1823px 2867px rgba(255,240,220,0.8);
}

/* Shooting stars */
.shooting-star {
	position: absolute;
	top: 0;
	left: 50%;
	width: 80px;
	height: 1px;
	background: linear-gradient(to left, rgba(255,255,255,0.9), transparent);
	border-radius: 1px;
	opacity: 0;
	transform: rotate(-35deg);
	animation: shoot 8s ease-in infinite 3s;
}

.shooting-star-2 {
	left: 80%;
	width: 60px;
	transform: rotate(-42deg);
	animation: shoot2 12s ease-in infinite 7s;
}

@keyframes drift {
	from { transform: translateY(0); }
	to   { transform: translateY(-2000px); }
}

@keyframes twinkle {
	from { opacity: 0.6; }
	to   { opacity: 1; }
}

@keyframes shoot {
	0%   { opacity: 0; transform: rotate(-35deg) translateX(0); }
	1%   { opacity: 1; }
	5%   { opacity: 1; transform: rotate(-35deg) translateX(-400px); }
	6%   { opacity: 0; transform: rotate(-35deg) translateX(-450px); }
	100% { opacity: 0; }
}

@keyframes shoot2 {
	0%   { opacity: 0; transform: rotate(-42deg) translateX(0); }
	1%   { opacity: 1; }
	4%   { opacity: 1; transform: rotate(-42deg) translateX(-350px); }
	5%   { opacity: 0; transform: rotate(-42deg) translateX(-400px); }
	100% { opacity: 0; }
}

/* --- Navigation --- */

.site-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 900px;
	margin: 0 auto;
	padding: 0 20px;
	margin-bottom: 20px;
}

.nav-logo {
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.nav-logo:hover {
	color: #4a6fa5;
}

.nav-links {
	display: flex;
	gap: 20px;
}

.nav-links a {
	font-size: 13px;
	color: #8888aa;
	text-decoration: none;
	font-weight: 500;
	transition: color 0.2s;
}

.nav-links a:hover {
	color: #fff;
}

header {
	position: relative;
	z-index: 1;
	text-align: center;
	padding: 40px 20px 20px;
}

h1 {
	font-weight: 300;
	color: #fff;
	text-transform: uppercase;
	font-size: 42px;
	letter-spacing: 6px;
}

.subtitle {
	color: #8888aa;
	font-size: 14px;
	margin-top: 8px;
	letter-spacing: 1px;
}

main {
	position: relative;
	z-index: 1;
	max-width: 900px;
	margin: 0 auto;
	padding: 0 20px 40px;
}

/* --- Controls Section --- */

.controls {
	background: #16213e;
	border-radius: 12px;
	padding: 20px 24px;
	margin-bottom: 24px;
	border: 1px solid #1f3460;
}

/* --- Settings Row (radius + shape on one line) --- */

.settings-row {
	display: flex;
	gap: 20px;
	margin-bottom: 14px;
	align-items: center;
}

.radius-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 160px;
}

.slider-row {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.slider-row label {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.5px;
	color: #8888aa;
}

.slider-label-text {
	text-transform: uppercase;
}

.slider-label-value {
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.slider-row input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 4px;
	background: #2a3a5c;
	border-radius: 2px;
	outline: none;
}

.slider-row input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #4a6fa5;
	cursor: pointer;
	border: none;
}

.slider-row input[type="range"]::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #4a6fa5;
	cursor: pointer;
	border: none;
}

/* --- Shape Selector --- */

.shape-group {
	flex: 1;
}

.shape-label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #8888aa;
	margin-bottom: 8px;
}

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

.shape-option {
	cursor: pointer;
}

.shape-option input[type="radio"] {
	display: none;
}

.shape-option span {
	display: inline-block;
	background: #0f1a35;
	border: 1px solid #2a3a5c;
	border-radius: 6px;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 600;
	color: #8888aa;
	transition: all 0.2s;
}

.shape-option input[type="radio"]:checked + span {
	background: #4a6fa5;
	border-color: #4a6fa5;
	color: #fff;
}

.shape-option:hover span {
	border-color: #4a6fa5;
}

/* --- File Upload --- */

.file-upload {
	position: relative;
	display: inline-block;
	cursor: pointer;
	flex-shrink: 0;
}

.file-upload input[type="file"] {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.file-upload-label {
	display: inline-block;
	background: linear-gradient(135deg, #4a6fa5, #3a5a8c);
	color: #fff;
	font-weight: 600;
	font-size: 13px;
	padding: 8px 24px;
	border-radius: 6px;
	transition: transform 0.15s, box-shadow 0.15s;
	letter-spacing: 0.5px;
}

.file-upload:hover .file-upload-label {
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(74, 111, 165, 0.4);
}

/* --- Stats --- */

.stats {
	display: flex;
	gap: 10px;
	margin-bottom: 14px;
}

.stat {
	flex: 1;
	background: #0f1a35;
	border-radius: 6px;
	padding: 10px;
	text-align: center;
	border: 1px solid #2a3a5c;
}

.stat-label {
	display: block;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #6678a0;
	margin-bottom: 4px;
}

.stat-value {
	display: block;
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

/* --- Buttons --- */

.button-row {
	display: flex;
	gap: 10px;
}

.btn {
	flex: 1;
	border: none;
	padding: 8px 16px;
	font-size: 12px;
	font-weight: 700;
	font-family: inherit;
	text-transform: uppercase;
	letter-spacing: 1px;
	border-radius: 6px;
	cursor: pointer;
	transition: transform 0.1s, opacity 0.2s;
}

.btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
	transform: none;
}

.btn:not(:disabled):hover {
	transform: translateY(-1px);
}

.btn:not(:disabled):active {
	transform: translateY(0);
}

.btn-start {
	background: linear-gradient(135deg, #2ecc71, #27ae60);
	color: #fff;
}

.btn-stop {
	background: linear-gradient(135deg, #e74c3c, #c0392b);
	color: #fff;
}

.btn-clear {
	background: linear-gradient(135deg, #7f8c8d, #636e72);
	color: #fff;
}

/* --- Canvas Area --- */

.canvas-area {
	transition: opacity 0.4s, transform 0.4s;
}

.canvas-area.hidden {
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
}

.canvas-row {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}

.canvas-wrap {
	flex: 1;
	min-width: 200px;
	max-width: 50%;
}

.canvas-label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #6678a0;
	margin-bottom: 8px;
	text-align: center;
}

canvas {
	display: block;
	width: 100%;
	height: auto;
	background: #fff;
	border-radius: 8px;
	border: 2px solid #2a3a5c;
}

/* --- About Section --- */

.about {
	background: #16213e;
	border-radius: 12px;
	padding: 28px 32px;
	margin-top: 24px;
	border: 1px solid #1f3460;
	line-height: 1.7;
}

.about h2 {
	font-size: 20px;
	font-weight: 600;
	color: #fff;
	margin-bottom: 12px;
}

.about h3 {
	font-size: 16px;
	font-weight: 600;
	color: #ccc;
	margin-top: 16px;
	margin-bottom: 8px;
}

.about details {
	margin-top: 12px;
	border: 1px solid #1f3460;
	border-radius: 8px;
	overflow: hidden;
}

.about details + details {
	margin-top: 8px;
}

.about summary {
	font-size: 15px;
	font-weight: 600;
	color: #ccc;
	cursor: pointer;
	padding: 12px 16px;
	background: #0f1a35;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 10px;
	transition: background 0.2s;
}

.about summary:hover {
	background: #152040;
}

.about summary::-webkit-details-marker {
	display: none;
}

.about summary::before {
	content: "\25B6";
	font-size: 10px;
	color: #4a6fa5;
	transition: transform 0.2s;
	flex-shrink: 0;
}

.about details[open] > summary::before {
	transform: rotate(90deg);
}

.about details > :not(summary) {
	padding: 0 16px;
}

.about details > p:first-of-type {
	padding-top: 12px;
}

.about details > p:last-child,
.about details > .faq:last-child,
.about details > .about-list:last-child {
	padding-bottom: 14px;
}

.about p {
	font-size: 14px;
	color: #a0a8c0;
	margin-bottom: 10px;
}

.about strong {
	color: #c8d0e8;
}

.about h4 {
	font-size: 14px;
	font-weight: 600;
	color: #dde;
	margin-top: 14px;
	margin-bottom: 4px;
}

.about-list {
	list-style: none;
	padding: 0;
	margin-bottom: 10px;
}

.about-list li {
	font-size: 14px;
	color: #a0a8c0;
	padding: 6px 0 6px 20px;
	position: relative;
	line-height: 1.7;
}

.about-list li::before {
	content: "\2022";
	position: absolute;
	left: 4px;
	color: #4a6fa5;
	font-weight: 700;
}

.faq {
	margin-top: 8px;
}

.faq h4 + p {
	margin-bottom: 14px;
}

.about ul, .about ol {
	margin: 10px 0 16px 20px;
	font-size: 14px;
	color: #a0a8c0;
	line-height: 1.8;
}

.about li {
	margin-bottom: 6px;
}

.about a {
	color: #4a6fa5;
	text-decoration: none;
}

.about a:hover {
	color: #6a9fd5;
	text-decoration: underline;
}

/* --- Footer --- */

footer {
	position: relative;
	z-index: 1;
	text-align: center;
	padding: 24px 20px;
	color: #556;
	font-size: 12px;
}

.footer-links {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-bottom: 10px;
}

.footer-links a {
	color: #6678a0;
	text-decoration: none;
	font-size: 12px;
	transition: color 0.2s;
}

.footer-links a:hover {
	color: #fff;
}

/* --- Mobile Responsive --- */

@media (max-width: 600px) {
	.site-nav {
		flex-direction: column;
		gap: 10px;
		padding: 0 12px;
		margin-bottom: 14px;
	}

	.nav-links {
		gap: 14px;
	}

	.nav-links a {
		font-size: 12px;
	}

	header {
		padding: 24px 16px 14px;
	}

	h1 {
		font-size: 24px;
		letter-spacing: 3px;
	}

	.subtitle {
		font-size: 12px;
	}

	main {
		padding: 0 12px 24px;
	}

	.controls {
		padding: 16px;
	}

	.settings-row {
		flex-direction: column;
		gap: 16px;
		align-items: stretch;
	}

	.radius-group {
		min-width: unset;
	}

	.shape-options {
		gap: 6px;
	}

	.shape-option span {
		padding: 6px 10px;
		font-size: 11px;
	}

	.file-upload {
		text-align: center;
	}

	.file-upload-label {
		display: block;
		text-align: center;
		padding: 10px 24px;
	}

	.canvas-wrap {
		flex: none;
		max-width: 100%;
		min-width: unset;
	}

	.canvas-label {
		margin-bottom: 6px;
	}

	.canvas-row {
		flex-direction: column;
		gap: 24px;
	}

	.about {
		padding: 20px 16px;
		margin-top: 40px;
	}

	.about h2 {
		font-size: 18px;
	}

	.about p {
		font-size: 13px;
	}

	.stat-value {
		font-size: 16px;
	}

	.btn {
		padding: 10px 12px;
		font-size: 11px;
	}
}

/* Hidden elements */
#source-img,
#canvas3 {
	display: none;
}