/* Generated by scripts/partials/dial.mjs. Do not edit. */
@property --freq { syntax: "<integer>"; inherits: false; initial-value: 887; }
@property --station { syntax: "ember | weather | calls | machine | water | hours | signoff"; inherits: false; initial-value: ember; }

@layer chassis {
	.dial__skin { --st-bg: oklch(94% 0.03 80); --st-ink: oklch(22% 0.03 40); --st-dim: oklch(38% 0.05 50); --st-accent: oklch(48% 0.19 38); --st-shadow: 1px 1px 0 oklch(42% 0.09 45 / 0.55); --st-font-display: "Fraunces Variable", "Fraunces", Georgia, serif; --st-font-text: "Fraunces Variable", "Fraunces", Georgia, serif; --st-ease: linear(0, 0.42 9%, 0.7 20%, 0.88 36%, 0.97 58%, 1); --st-dur: 600ms; --st-radius: 3px; --st-texture: linear-gradient(oklch(80% 0.11 85), oklch(62% 0.1 70)) top / 100% 3px no-repeat, radial-gradient(120% 220% at 50% 120%, oklch(90% 0.05 75 / 0.5), transparent 70%); --skin: ember; }

	.dial[data-skin="ember"] .dial__skin { --st-bg: oklch(94% 0.03 80); --st-ink: oklch(22% 0.03 40); --st-dim: oklch(38% 0.05 50); --st-accent: oklch(48% 0.19 38); --st-shadow: 1px 1px 0 oklch(42% 0.09 45 / 0.55); --st-font-display: "Fraunces Variable", "Fraunces", Georgia, serif; --st-font-text: "Fraunces Variable", "Fraunces", Georgia, serif; --st-ease: linear(0, 0.42 9%, 0.7 20%, 0.88 36%, 0.97 58%, 1); --st-dur: 600ms; --st-radius: 3px; --st-texture: linear-gradient(oklch(80% 0.11 85), oklch(62% 0.1 70)) top / 100% 3px no-repeat, radial-gradient(120% 220% at 50% 120%, oklch(90% 0.05 75 / 0.5), transparent 70%); --skin: ember; }
	.dial[data-skin="weather"] .dial__skin { --st-bg: oklch(90% 0.01 95); --st-ink: oklch(16% 0 0); --st-dim: oklch(40% 0.01 250); --st-accent: oklch(44% 0.12 60); --st-shadow: 0 0 0 transparent; --st-font-display: "Martian Mono Variable", "Martian Mono", ui-monospace, monospace; --st-font-text: "Martian Mono Variable", "Martian Mono", ui-monospace, monospace; --st-ease: steps(4, end); --st-dur: 240ms; --st-radius: 0; --st-texture: repeating-linear-gradient(to bottom, transparent 0 11px, oklch(68% 0.07 240 / 0.2) 11px 12px), radial-gradient(circle at 6px 50%, oklch(80% 0.01 95) 2px, transparent 2.5px) left / 12px 12px repeat-y; --skin: weather; }
	.dial[data-skin="calls"] .dial__skin { --st-bg: oklch(12% 0.02 150); --st-ink: oklch(85% 0.2 145); --st-dim: oklch(66% 0.14 145); --st-accent: oklch(90% 0.19 145); --st-shadow: 0 0 2px oklch(85% 0.2 145 / 0.8), 0 0 6px oklch(85% 0.2 145 / 0.4); --st-font-display: "VT323", ui-monospace, monospace; --st-font-text: "VT323", ui-monospace, monospace; --st-ease: steps(3, jump-start); --st-dur: 400ms; --st-radius: 0.5rem; --st-texture: repeating-linear-gradient(to bottom, oklch(0% 0 0 / 0.38) 0 1px, transparent 1px 3px), radial-gradient(140% 160% at 50% 50%, transparent 55%, oklch(0% 0 0 / 0.55)); --skin: calls; }
	.dial[data-skin="machine"] .dial__skin { --st-bg: oklch(16% 0.01 230); --st-ink: oklch(90% 0.01 230); --st-dim: oklch(68% 0.02 230); --st-accent: oklch(82% 0.14 200); --st-shadow: 0 0 1px oklch(96% 0.06 200), 0 0 6px oklch(82% 0.14 200 / 0.85); --st-font-display: "Unbounded Variable", "Unbounded", system-ui, sans-serif; --st-font-text: "Martian Mono Variable", "Martian Mono", ui-monospace, monospace; --st-ease: cubic-bezier(0.2, 0, 0, 1); --st-dur: 100ms; --st-radius: 2px; --st-texture: repeating-linear-gradient(to right, oklch(100% 0 0 / 0.03) 0 1px, transparent 1px 3px), linear-gradient(oklch(21% 0.01 230), oklch(14% 0.01 230)); --skin: machine; }
	.dial[data-skin="water"] .dial__skin { --st-bg: oklch(26% 0.07 245); --st-ink: oklch(88% 0.03 225); --st-dim: oklch(82% 0.04 230); --st-accent: oklch(82% 0.09 205); --st-shadow: 0 0 8px oklch(82% 0.09 205 / 0.4); --st-font-display: "Anybody Variable", "Anybody", system-ui, sans-serif; --st-font-text: "Anybody Variable", "Anybody", system-ui, sans-serif; --st-ease: linear; --st-dur: 1200ms; --st-radius: 999px; --st-texture: radial-gradient(60% 140% at 22% -30%, oklch(70% 0.08 220 / 0.22), transparent 70%), radial-gradient(40% 120% at 70% -40%, oklch(75% 0.07 210 / 0.14), transparent 70%); --skin: water; }
	.dial[data-skin="hours"] .dial__skin { --st-bg: oklch(13% 0.01 350); --st-ink: oklch(93% 0.03 85); --st-dim: oklch(74% 0.03 85); --st-accent: oklch(70% 0.23 350); --st-shadow: 2px 2px 0 oklch(45% 0.2 350); --st-font-display: "Big Shoulders Display Variable", "Big Shoulders Display", Impact, sans-serif; --st-font-text: "Big Shoulders Display Variable", "Big Shoulders Display", Impact, sans-serif; --st-ease: cubic-bezier(0.55, 0, 0.25, 1); --st-dur: 320ms; --st-radius: 0; --st-texture: linear-gradient(97deg, transparent 0 1.2%, oklch(93% 0.03 85 / 0.1) 1.2% 13%, transparent 13.4%), radial-gradient(oklch(66% 0.25 350 / 0.12) 0.9px, transparent 1.4px) 0 0 / 5px 5px; --skin: hours; }
	.dial[data-skin="signoff"] .dial__skin { --st-bg: oklch(0% 0 0); --st-ink: oklch(100% 0 0); --st-dim: oklch(76% 0 0); --st-accent: oklch(100% 0 0); --st-shadow: 0 0 0 transparent; --st-font-display: "Martian Mono Variable", "Martian Mono", ui-monospace, monospace; --st-font-text: "Martian Mono Variable", "Martian Mono", ui-monospace, monospace; --st-ease: linear; --st-dur: 200ms; --st-radius: 0; --st-texture: linear-gradient(to right, oklch(75% 0 0) 0 14.28%, oklch(75% 0.16 105) 0 28.57%, oklch(72% 0.12 195) 0 42.86%, oklch(68% 0.18 145) 0 57.14%, oklch(55% 0.24 330) 0 71.43%, oklch(52% 0.2 28) 0 85.71%, oklch(40% 0.2 265) 0) bottom / 100% 4px no-repeat, repeating-linear-gradient(to bottom, oklch(100% 0 0 / 0.05) 0 1px, transparent 1px 2px); --skin: signoff; }
	.dial[data-mode="dead"] .dial__skin { --st-bg: oklch(14% 0 0); --st-ink: oklch(88% 0 0); --st-dim: oklch(72% 0 0); --st-accent: oklch(72% 0 0); --st-shadow: 0 0 0 transparent; --st-font-display: var(--font-mono); --st-font-text: var(--font-ui); --st-ease: linear; --st-dur: 200ms; --st-radius: 0; --st-texture: repeating-linear-gradient(oklch(100% 0 0 / 0.04) 0 1px, transparent 1px 3px); --skin: dead; }

	@supports (animation-timeline: view()) and (timeline-scope: --x) and (counter-reset: n round(down, 1.5, 1)) {
		@keyframes dial-f1 { from { --freq: 0; } to { --freq: 26; } }
		@keyframes dial-n1 { from { translate: 0; } to { translate: 13cqi; } }
		@keyframes dial-s1 { 0% { --station: ember; } 50%, 100% { --station: weather; } }
		@keyframes dial-f2 { from { --freq: 0; } to { --freq: 36; } }
		@keyframes dial-n2 { from { translate: 0; } to { translate: 18cqi; } }
		@keyframes dial-s2 { 0% { --station: weather; } 50%, 100% { --station: calls; } }
		@keyframes dial-f3 { from { --freq: 0; } to { --freq: 32; } }
		@keyframes dial-n3 { from { translate: 0; } to { translate: 16cqi; } }
		@keyframes dial-s3 { 0% { --station: calls; } 50%, 100% { --station: machine; } }
		@keyframes dial-f4 { from { --freq: 0; } to { --freq: 34; } }
		@keyframes dial-n4 { from { translate: 0; } to { translate: 17cqi; } }
		@keyframes dial-s4 { 0% { --station: machine; } 50%, 100% { --station: water; } }
		@keyframes dial-f5 { from { --freq: 0; } to { --freq: 28; } }
		@keyframes dial-n5 { from { translate: 0; } to { translate: 14cqi; } }
		@keyframes dial-s5 { 0% { --station: water; } 50%, 100% { --station: hours; } }
		@keyframes dial-f6 { from { --freq: 0; } to { --freq: 34; } }
		@keyframes dial-n6 { from { translate: 0; } to { translate: 17cqi; } }
		@keyframes dial-s6 { 0% { --station: hours; } 50%, 100% { --station: signoff; } }

		@media (prefers-reduced-motion: no-preference) {
			body { timeline-scope: --b1, --b2, --b3, --b4, --b5, --b6; }

			.static { view-timeline-inset: calc(50% + (var(--pad-start) - var(--pad-end)) / 2) calc(50% - (var(--pad-start) - var(--pad-end)) / 2); }

			.dial[data-mode="scan"] {
				animation: dial-s1 linear forwards, dial-s2 linear forwards, dial-s3 linear forwards, dial-s4 linear forwards, dial-s5 linear forwards, dial-s6 linear forwards;
				animation-timing-function: step-end;
				animation-timeline: --b1, --b2, --b3, --b4, --b5, --b6;
			}

			.dial[data-mode="scan"] .dial__needle {
				animation: dial-n1 linear both, dial-n2 linear both, dial-n3 linear both, dial-n4 linear both, dial-n5 linear both, dial-n6 linear both;
				animation-composition: add;
				animation-timeline: --b1, --b2, --b3, --b4, --b5, --b6;
			}

			.dial[data-mode="scan"] .dial__freq {
				animation: dial-f1 linear both, dial-f2 linear both, dial-f3 linear both, dial-f4 linear both, dial-f5 linear both, dial-f6 linear both;
				animation-composition: add;
				animation-timeline: --b1, --b2, --b3, --b4, --b5, --b6;
			}

			@container dial style(--station: ember) {
				
				.dial[data-mode="scan"] .dial__marker[aria-current] { --lit: 0; }
				.dial[data-mode="scan"] .dial__marker[data-slug="ember"] { --lit: 1; }
				.dial[data-mode="scan"] .dial__now > span { display: none; }
				.dial[data-mode="scan"] .dial__now::before { content: "Ember"; content: "Ember" / ""; }
			}
			@container dial style(--station: weather) {
				.dial__skin { --st-bg: oklch(90% 0.01 95); --st-ink: oklch(16% 0 0); --st-dim: oklch(40% 0.01 250); --st-accent: oklch(44% 0.12 60); --st-shadow: 0 0 0 transparent; --st-font-display: "Martian Mono Variable", "Martian Mono", ui-monospace, monospace; --st-font-text: "Martian Mono Variable", "Martian Mono", ui-monospace, monospace; --st-ease: steps(4, end); --st-dur: 240ms; --st-radius: 0; --st-texture: repeating-linear-gradient(to bottom, transparent 0 11px, oklch(68% 0.07 240 / 0.2) 11px 12px), radial-gradient(circle at 6px 50%, oklch(80% 0.01 95) 2px, transparent 2.5px) left / 12px 12px repeat-y; --skin: weather; }
				.dial[data-mode="scan"] .dial__marker[aria-current] { --lit: 0; }
				.dial[data-mode="scan"] .dial__marker[data-slug="weather"] { --lit: 1; }
				.dial[data-mode="scan"] .dial__now > span { display: none; }
				.dial[data-mode="scan"] .dial__now::before { content: "Weather for Ships"; content: "Weather for Ships" / ""; }
			}
			@container dial style(--station: calls) {
				.dial__skin { --st-bg: oklch(12% 0.02 150); --st-ink: oklch(85% 0.2 145); --st-dim: oklch(66% 0.14 145); --st-accent: oklch(90% 0.19 145); --st-shadow: 0 0 2px oklch(85% 0.2 145 / 0.8), 0 0 6px oklch(85% 0.2 145 / 0.4); --st-font-display: "VT323", ui-monospace, monospace; --st-font-text: "VT323", ui-monospace, monospace; --st-ease: steps(3, jump-start); --st-dur: 400ms; --st-radius: 0.5rem; --st-texture: repeating-linear-gradient(to bottom, oklch(0% 0 0 / 0.38) 0 1px, transparent 1px 3px), radial-gradient(140% 160% at 50% 50%, transparent 55%, oklch(0% 0 0 / 0.55)); --skin: calls; }
				.dial[data-mode="scan"] .dial__marker[aria-current] { --lit: 0; }
				.dial[data-mode="scan"] .dial__marker[data-slug="calls"] { --lit: 1; }
				.dial[data-mode="scan"] .dial__now > span { display: none; }
				.dial[data-mode="scan"] .dial__now::before { content: "Long Distance Calls"; content: "Long Distance Calls" / ""; }
			}
			@container dial style(--station: machine) {
				.dial__skin { --st-bg: oklch(16% 0.01 230); --st-ink: oklch(90% 0.01 230); --st-dim: oklch(68% 0.02 230); --st-accent: oklch(82% 0.14 200); --st-shadow: 0 0 1px oklch(96% 0.06 200), 0 0 6px oklch(82% 0.14 200 / 0.85); --st-font-display: "Unbounded Variable", "Unbounded", system-ui, sans-serif; --st-font-text: "Martian Mono Variable", "Martian Mono", ui-monospace, monospace; --st-ease: cubic-bezier(0.2, 0, 0, 1); --st-dur: 100ms; --st-radius: 2px; --st-texture: repeating-linear-gradient(to right, oklch(100% 0 0 / 0.03) 0 1px, transparent 1px 3px), linear-gradient(oklch(21% 0.01 230), oklch(14% 0.01 230)); --skin: machine; }
				.dial[data-mode="scan"] .dial__marker[aria-current] { --lit: 0; }
				.dial[data-mode="scan"] .dial__marker[data-slug="machine"] { --lit: 1; }
				.dial[data-mode="scan"] .dial__now > span { display: none; }
				.dial[data-mode="scan"] .dial__now::before { content: "Machine Room"; content: "Machine Room" / ""; }
			}
			@container dial style(--station: water) {
				.dial__skin { --st-bg: oklch(26% 0.07 245); --st-ink: oklch(88% 0.03 225); --st-dim: oklch(82% 0.04 230); --st-accent: oklch(82% 0.09 205); --st-shadow: 0 0 8px oklch(82% 0.09 205 / 0.4); --st-font-display: "Anybody Variable", "Anybody", system-ui, sans-serif; --st-font-text: "Anybody Variable", "Anybody", system-ui, sans-serif; --st-ease: linear; --st-dur: 1200ms; --st-radius: 999px; --st-texture: radial-gradient(60% 140% at 22% -30%, oklch(70% 0.08 220 / 0.22), transparent 70%), radial-gradient(40% 120% at 70% -40%, oklch(75% 0.07 210 / 0.14), transparent 70%); --skin: water; }
				.dial[data-mode="scan"] .dial__marker[aria-current] { --lit: 0; }
				.dial[data-mode="scan"] .dial__marker[data-slug="water"] { --lit: 1; }
				.dial[data-mode="scan"] .dial__now > span { display: none; }
				.dial[data-mode="scan"] .dial__now::before { content: "Open Water"; content: "Open Water" / ""; }
			}
			@container dial style(--station: hours) {
				.dial__skin { --st-bg: oklch(13% 0.01 350); --st-ink: oklch(93% 0.03 85); --st-dim: oklch(74% 0.03 85); --st-accent: oklch(70% 0.23 350); --st-shadow: 2px 2px 0 oklch(45% 0.2 350); --st-font-display: "Big Shoulders Display Variable", "Big Shoulders Display", Impact, sans-serif; --st-font-text: "Big Shoulders Display Variable", "Big Shoulders Display", Impact, sans-serif; --st-ease: cubic-bezier(0.55, 0, 0.25, 1); --st-dur: 320ms; --st-radius: 0; --st-texture: linear-gradient(97deg, transparent 0 1.2%, oklch(93% 0.03 85 / 0.1) 1.2% 13%, transparent 13.4%), radial-gradient(oklch(66% 0.25 350 / 0.12) 0.9px, transparent 1.4px) 0 0 / 5px 5px; --skin: hours; }
				.dial[data-mode="scan"] .dial__marker[aria-current] { --lit: 0; }
				.dial[data-mode="scan"] .dial__marker[data-slug="hours"] { --lit: 1; }
				.dial[data-mode="scan"] .dial__now > span { display: none; }
				.dial[data-mode="scan"] .dial__now::before { content: "Small Hours"; content: "Small Hours" / ""; }
			}
			@container dial style(--station: signoff) {
				.dial__skin { --st-bg: oklch(0% 0 0); --st-ink: oklch(100% 0 0); --st-dim: oklch(76% 0 0); --st-accent: oklch(100% 0 0); --st-shadow: 0 0 0 transparent; --st-font-display: "Martian Mono Variable", "Martian Mono", ui-monospace, monospace; --st-font-text: "Martian Mono Variable", "Martian Mono", ui-monospace, monospace; --st-ease: linear; --st-dur: 200ms; --st-radius: 0; --st-texture: linear-gradient(to right, oklch(75% 0 0) 0 14.28%, oklch(75% 0.16 105) 0 28.57%, oklch(72% 0.12 195) 0 42.86%, oklch(68% 0.18 145) 0 57.14%, oklch(55% 0.24 330) 0 71.43%, oklch(52% 0.2 28) 0 85.71%, oklch(40% 0.2 265) 0) bottom / 100% 4px no-repeat, repeating-linear-gradient(to bottom, oklch(100% 0 0 / 0.05) 0 1px, transparent 1px 2px); --skin: signoff; }
				.dial[data-mode="scan"] .dial__marker[aria-current] { --lit: 0; }
				.dial[data-mode="scan"] .dial__marker[data-slug="signoff"] { --lit: 1; }
				.dial[data-mode="scan"] .dial__now > span { display: none; }
				.dial[data-mode="scan"] .dial__now::before { content: "Sign-Off"; content: "Sign-Off" / ""; }
			}
		}
	}
}