.parc {
	--parc-bg: #05070b;
	--parc-panel: rgba(12, 16, 24, 0.86);
	--parc-line: rgba(255, 255, 255, 0.055);
	--parc-muted: rgba(232, 238, 248, 0.5);
	--parc-text: #f7fbff;
	--parc-accent: #8ef7ff;
	--parc-accent-2: #9d8cff;
	--parc-accent-3: #72ffc8;
	--parc-core-hi: #162033;
	--parc-core-lo: #090d15;
	position: relative;
	isolation: isolate;
	width: min(100%, var(--parc-max-size, 560px));
	margin: 1.5rem auto;
	padding: clamp(16px, 3vw, 28px);
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.075);
	border-radius: 30px;
	background:
		radial-gradient(circle at 50% 18%, rgba(142,247,255,.11), transparent 34%),
		radial-gradient(circle at 28% 78%, rgba(157,140,255,.07), transparent 32%),
		linear-gradient(145deg, rgba(255,255,255,.032), rgba(255,255,255,.01)),
		var(--parc-bg);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.05),
		0 26px 90px rgba(0,0,0,.28);
	color: var(--parc-text);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	box-sizing: border-box;
}

.parc *,
.parc *::before,
.parc *::after { box-sizing: border-box; }

.parc::before,
.parc::after {
	content: "";
	position: absolute;
	inset: auto;
	pointer-events: none;
	border-radius: 999px;
	filter: blur(54px);
	opacity: .55;
}
.parc::before {
	width: 160px;
	height: 160px;
	top: 10%;
	left: 18%;
	background: rgba(114,255,200,.08);
}
.parc::after {
	width: 180px;
	height: 180px;
	right: 12%;
	bottom: 12%;
	background: rgba(141,161,255,.08);
}

.parc__ambient {
	position: absolute;
	z-index: -1;
	inset: 14% 16%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(142,247,255,.12), rgba(142,247,255,.03) 44%, transparent 68%);
	filter: blur(48px);
	pointer-events: none;
}

.parc__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 8px;
	font-size: 11px;
	letter-spacing: .19em;
	text-transform: uppercase;
}

.parc__eyebrow { color: rgba(246,248,251,.76); }

.parc__base {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	color: var(--parc-muted);
}
.parc__base strong {
	color: var(--parc-accent);
	font-size: 15px;
	font-weight: 600;
	text-shadow: 0 0 16px rgba(142,247,255,.3);
}

.parc__stage {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
}

.parc__svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.parc__grid circle,
.parc__grid line {
	fill: none;
	stroke: var(--parc-line);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}
.parc__grid line { stroke-dasharray: 2 12; opacity: .28; }

.parc__segment {
	fill: none;
	stroke: rgba(236, 242, 255, 0.085);
	stroke-linecap: round;
	transition:
		stroke .38s cubic-bezier(.2,.8,.2,1),
		stroke-width .38s cubic-bezier(.2,.8,.2,1),
		opacity .38s ease,
		filter .38s ease;
	vector-effect: non-scaling-stroke;
	opacity: .82;
}

.parc__segment.is-active {
	stroke: var(--parc-accent);
	opacity: 1;
	filter:
		drop-shadow(0 0 3px rgba(142,247,255,.95))
		drop-shadow(0 0 8px rgba(142,247,255,.85))
		drop-shadow(0 0 18px rgba(142,247,255,.55))
		drop-shadow(0 0 34px rgba(142,247,255,.24));
}

.parc__segment.is-carry {
	stroke: var(--parc-accent-2);
	filter:
		drop-shadow(0 0 3px rgba(157,140,255,.95))
		drop-shadow(0 0 10px rgba(157,140,255,.85))
		drop-shadow(0 0 20px rgba(157,140,255,.55))
		drop-shadow(0 0 36px rgba(157,140,255,.22));
}

.parc__core circle:first-child {
	stroke: rgba(255,255,255,.12);
	stroke-width: 1;
}
.parc__core-orbit {
	fill: none;
	stroke: rgba(142,247,255,.2);
	stroke-width: 1;
	stroke-dasharray: 2 7;
	transform-origin: 300px 300px;
	animation: parc-spin 22s linear infinite;
}
.parc__readout {
	display: grid;
	justify-items: center;
	gap: 0;
	padding: 5px 0 2px;
}

.parc__digital {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
	font-size: clamp(32px, 9vw, 58px);
	font-weight: 300;
	line-height: 1;
	letter-spacing: .08em;
	font-variant-numeric: tabular-nums;
	text-shadow:
		0 0 14px rgba(142,247,255,.16),
		0 0 28px rgba(142,247,255,.08);
}

.parc__conversion {
	display: grid;
	justify-items: center;
	height: 42px;
	margin: 7px 0 2px;
}

.parc__conversion-line {
	width: 1px;
	height: 22px;
	background: linear-gradient(
		to bottom,
		rgba(142,247,255,.12),
		rgba(142,247,255,.72)
	);
	box-shadow:
		0 0 7px rgba(142,247,255,.42),
		0 0 15px rgba(142,247,255,.18);
}

.parc__conversion-arrow {
	margin-top: -3px;
	color: var(--parc-accent);
	font: 300 19px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	text-shadow:
		0 0 7px rgba(142,247,255,.92),
		0 0 16px rgba(142,247,255,.44);
}

.parc__padic {
	color: rgba(247,251,255,.92);
	font: 500 clamp(18px, 4.3vw, 27px)/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	letter-spacing: .09em;
	font-variant-numeric: tabular-nums;
	text-align: center;
	text-shadow:
		0 0 8px rgba(142,247,255,.18),
		0 0 20px rgba(142,247,255,.08);
}

.parc__timezone {
	margin-top: 9px;
	color: rgba(232,238,248,.42);
	font: 500 9px/1.4 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	letter-spacing: .09em;
	text-transform: uppercase;
	text-align: center;
}
.parc__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid rgba(255,255,255,.065);
}

.parc__control-label {
	color: rgba(232,238,248,.56);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.parc__select-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.parc__base-select {
	appearance: none;
	-webkit-appearance: none;
	min-width: 86px;
	height: 42px;
	padding: 0 38px 0 15px;
	border: 1px solid rgba(142,247,255,.2);
	border-radius: 14px;
	outline: none;
	background:
		linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)),
		rgba(9,13,21,.88);
	color: var(--parc-text);
	font: 600 14px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	letter-spacing: .08em;
	cursor: pointer;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.05),
		0 0 0 rgba(142,247,255,0);
	transition:
		border-color .22s ease,
		box-shadow .22s ease,
		background .22s ease;
}

.parc__base-select:hover {
	border-color: rgba(142,247,255,.42);
}

.parc__base-select:focus-visible {
	border-color: rgba(142,247,255,.72);
	box-shadow:
		0 0 0 3px rgba(142,247,255,.09),
		0 0 24px rgba(142,247,255,.12);
}

.parc__select-chevron {
	position: absolute;
	right: 13px;
	top: 50%;
	transform: translateY(-55%);
	color: var(--parc-accent);
	font-size: 15px;
	line-height: 1;
	pointer-events: none;
	text-shadow: 0 0 10px rgba(142,247,255,.45);
}

@keyframes parc-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.parc__core-orbit { animation: none; }
	.parc__segment { transition: none; }
}

@media (max-width: 420px) {
	.parc {
		padding: 14px;
		border-radius: 22px;
	}
	.parc__header { margin-bottom: 2px; }
	.parc__digital { letter-spacing: .045em; }
}