@layer lightsfinder {
	:root:has([data-lightsfinder]) { color-scheme: light; background: #faf5e9; }
	body:has([data-lightsfinder]) {
		background: #faf5e9; color: #302039;
		> main { max-width: 1280px; padding: 0 2rem; }
	}
	[data-lightsfinder] {
		--ink: #302039; --accent: #593475; --soft: #eee4f5; --spark: #d9ed91; --warm: #ed944b;
		color: var(--ink); font-family: ui-rounded, 'Trebuchet MS', system-ui, sans-serif;
		&[data-theme="christmas"] { --accent: #235e48; --soft: #e4ede6; --spark: #f4dc88; --warm: #cb4b43; }
		&[data-theme="new-year"] { --accent: #343762; --soft: #e9e8f2; --spark: #ffe299; --warm: #b098de; }
		&[data-theme="valentine"] { --accent: #923657; --soft: #f9e3ea; --spark: #f6c3ca; --warm: #e76d7b; }
		&[data-theme="pride"] { --accent: #4c3c9a; --soft: #ede8fb; --spark: #c3e9ae; --warm: #f2ac63; }
		&[data-theme="other"] { --accent: #864b22; --soft: #f7e9d4; --spark: #efce80; --warm: #d68b38; }
		* { box-sizing: border-box; }
		h1, h2, h3, p { color: inherit; }
		h1 { font-size: 1rem; margin: 0 0 .4rem; font-weight: 700; letter-spacing: .05em; }
		h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.15; letter-spacing: -.04em; margin: 0 0 1rem; }
		h3 { font-size: 1.2rem; line-height: 1.3; margin: .5rem 0; }
		p { line-height: 1.6; margin: .5rem 0 1rem; }
		a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 4px; }
		a:hover { color: var(--ink); }
		a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
		button, [data-button] { display: inline-flex; justify-content: center; align-items: center; gap: .5rem; min-height: 46px; border: 1px solid var(--accent); background: var(--accent); color: white; border-radius: 100px; padding: .7rem 1.3rem; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; }
		button:hover, [data-button]:hover { background: var(--ink); color: white; }
		button[data-secondary], button[data-locate], button[data-share] { background: transparent; color: var(--accent); }
		[hidden] { display: none !important; }
		form { display: grid; gap: 1rem; margin: 1.2rem 0; }
		label { display: grid; gap: .4rem; font-size: .85rem; font-weight: 700; }
		input, select, textarea { border: 1px solid #b9b0bf; border-radius: 9px; padding: .7rem; background: #fffdf7; color: var(--ink); width: 100%; min-width: 0; font: inherit; min-height: 44px; }
		textarea { resize: vertical; }
		input[type="checkbox"] { width: 20px; min-height: 20px; accent-color: var(--accent); }
		[data-check] { display: flex; align-items: flex-start; gap: .6rem; font-weight: 400; }
		[data-fields] { display: flex; flex-wrap: wrap; gap: .7rem; > label { flex: 1; min-width: 100px; } }
		details { margin: .6rem 0; font-size: .9rem; summary { cursor: pointer; padding-block: .5rem; } }
		[data-eyebrow] { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 800; color: var(--accent); }
		> nav { display: flex; justify-content: space-between; gap: 2rem; align-items: center; border-bottom: 1px solid #ddd3e2; padding: 1.6rem 0;
			> div { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
			a { text-decoration: none; font-size: .9rem; font-weight: 700; }
			[aria-current] { text-decoration: underline; text-decoration-color: var(--warm); text-decoration-thickness: 3px; }
			[data-brand] { font-size: 1.65rem; letter-spacing: -.06em; color: var(--ink); white-space: nowrap; span { display: block; font-size: .62rem; letter-spacing: .17em; text-transform: uppercase; padding-left: 2rem; margin-top: .2rem; } }
		}
		[data-hero] { display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; gap: 2rem; padding: 3rem 0 2.5rem; background: none; border: 0;
			h2 { font-family: Georgia, serif; font-size: clamp(2.8rem, 5vw, 4.5rem); letter-spacing: -.05em; line-height: 1.05; margin: .5rem 0 1.2rem; em { color: var(--accent); font-weight: 400; } }
			p:not([data-eyebrow]) { color: #63536a; font-size: 1rem; }
		}
		[data-illustration] { position: relative; background: var(--soft); border-radius: 48% 52% 42% 50%; padding: 1rem 1.5rem; max-width: 400px; justify-self: center;
			> span { position: absolute; right: 1rem; top: -.7rem; font-size: 3rem; transform: rotate(10deg); }
			svg { width: 100%; height: auto; display: block; }
			p { font-family: Georgia, serif; text-align: center; font-style: italic; font-size: 1.1rem !important; }
		}
		[data-explorer] { display: grid; grid-template-columns: 320px minmax(0, 1fr); border: 1px solid #d7cfdd; border-radius: 18px; overflow: hidden; background: #fffdf7;
			> aside { padding: 1.5rem; }
		}
		[data-map] { position: relative; background: #e6e9db; overflow: hidden; min-height: 540px;
			> svg { display: block; width: 100%; height: 100%; min-height: 540px; object-fit: cover; background: #e6e9db; }
			> nav { display: flex; gap: .25rem; position: absolute; right: .8rem; bottom: 3rem; background: #fffdf7; border: 1px solid #b6adbb; border-radius: 10px; padding: .3rem;
				a { display: inline-grid; place-content: center; min-width: 36px; min-height: 40px; text-decoration: none; font-size: 1.3rem; font-weight: 700; }
			}
		}
		[data-map-caption] { position: absolute; z-index: 1; top: 1rem; left: 1rem; right: 1rem; display: flex; justify-content: space-between; gap: .5rem; font-size: .75rem; font-weight: 700;
			span { background: #fffdf7; padding: .6rem .8rem; border-radius: 100px; box-shadow: 0 2px 10px #30203920; }
		}
		[data-attribution] { position: absolute; bottom: 0; right: 0; margin: 0; background: #fffdf7ee; padding: .4rem .6rem; font-size: .65rem; }
		[data-tip] { border-radius: 12px; background: var(--soft); padding: 1rem; font-size: .85rem; margin-top: 2rem; > span { font-size: 1.8rem; } p { margin-top: .5rem; } }
		[data-panel] { background: #fffdf7; border: 1px solid #d7cfdd; border-radius: 16px; padding: clamp(1rem, 3vw, 2.5rem); max-width: 850px; margin: 2rem auto; }
		[data-explorer] [data-panel] { border: 0; padding: 0; margin: 0; }
		[data-section-heading] { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin: 2.5rem 0 1rem; p { font-size: .85rem; color: #63536a; } }
		[data-sightings] { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.3rem; }
		[data-post] { background: #fffdf7; border: 1px solid #d7cfdd; border-radius: 15px; overflow: hidden; margin: 0; > img { width: 100%; height: 210px; object-fit: cover; display: block; } > div { padding: 1.2rem; } p { font-size: .88rem; } h3 a { text-decoration: none; color: var(--ink); } }
		section > [data-post] { max-width: 800px; margin-inline: auto; > img { height: auto; max-height: 450px; } }
		[data-rating] { color: var(--accent); font-weight: 700; span { font-weight: 400; color: #63536a; } }
		[data-empty] { text-align: center; padding: 2rem; border: 1px dashed #bcb1c5; border-radius: 16px; > span { display: block; font-size: 3rem; color: var(--accent); } p { max-width: 570px; margin: 1rem auto; } }
		[data-preview] { max-width: 100%; height: auto; border-radius: 10px; }
		[data-award] { background: var(--soft); border-radius: 15px; padding: 1.5rem; margin: 2rem 0; text-align: center; > span { font-size: 3rem; } }
		[role="alert"] { background: #fff0ec; color: #822c21; border: 1px solid #ce8476; padding: 1rem; border-radius: 10px; }
		> [role="status"] { background: var(--spark); padding: 1rem; border-radius: 10px; }
		> footer { color: var(--ink); margin: 3rem 0 0; text-align: center; padding: 2rem 0; border-top: 1px solid #ddd3e2; > p:first-child { font-family: Georgia, serif; font-size: 1.5rem; } > p { font-size: .8rem; } }
		&[data-theme="pride"] [data-hero] { border-bottom: 6px solid transparent; border-image: linear-gradient(90deg, #db5353, #eb9747, #efce61, #58a96d, #4b82bc, #915cc1) 1; margin-bottom: 2rem; }
	}
	@media (max-width: 800px) {
		body:has([data-lightsfinder]) > main { padding-inline: 1rem; }
		[data-lightsfinder] {
			> nav { align-items: flex-start; flex-direction: column; gap: 1rem; > div { gap: 1rem; width: 100%; } [data-button] { margin-left: auto; } }
			[data-hero] { grid-template-columns: 1fr .7fr; gap: 1rem; padding-block: 2rem; h2 { font-size: 2.8rem; } }
			[data-illustration] { padding: .5rem; p { display: none; } }
			[data-explorer] { grid-template-columns: 1fr; }
			[data-map], [data-map] > svg { min-height: 360px; height: 360px; }
			[data-sightings] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
			[data-tip] { display: none; }
		}
	}
	@media (max-width: 480px) {
		[data-lightsfinder] {
			[data-hero] { grid-template-columns: 1fr; [data-illustration] { display: none; } }
			[data-sightings] { grid-template-columns: 1fr; }
			> nav > div { gap: .7rem; a { font-size: .8rem; } [data-button] { padding: .6rem .8rem; } }
			[data-map-caption] > span:last-child { display: none; }
		}
	}
}