/* ===== CSS VARIABLES ===== */
		:root {
			--bg-light-override: #f2f2f7;
			--glyph-gray-secondary: #6e6e73;
			--glyph-gray-tertiary: #86868B;

			/* Purple Theme Colors */
			--purple-primary: 49, 32, 112;
			--purple-secondary: 155, 106, 209;
			--purple-light: 242, 235, 250;
			--purple-lighter: 220, 200, 247;

			/* Dark Purple Theme Colors */
			--purple-dark-primary: 18, 9, 49;
			--purple-dark-secondary: 38, 13, 64;
			--purple-dark-light: 21 ,9, 35;

			/* Badge Colors */
			--badge-apple: rgb(73, 29, 125);
			--badge-wwdc: rgb(239, 157, 48);

			/* Box Shadow Colors */
			--shadow-purple-1: 75, 61, 105;
			--shadow-purple-2: 155, 107, 211;
			--shadow-purple-3: 84, 60, 145;
			--shadow-purple-light-1: 230, 215, 255;
			--shadow-purple-light-2: 180, 150, 232;

			/* UI Colors */
			--dark-ui-bg: rgb(51, 51, 54);
			--callout-dark-bg: #262740;

			/* System Colors */
			--white: 255, 255, 255;
			--black: 0, 0, 0;
			
		}

		.theme-dark {
			--glyph-gray-secondary: #86868B;
			--glyph-gray-tertiary: #6E6E73;
			--bg-light-override: #000000;
		}
		
		.tile {
			--sk-tile-background: #ffffff;
		}
		.theme-dark .tile {
			--sk-tile-background: #1d1d1f;
		}

		.badge-community {
			--sk-badge-background: rgba(114, 53, 187, 0.25) !important;
			--sk-badge-text-color: rgba(114, 53, 187, 1) !important;
		}
		.theme-dark .badge-community {
			--sk-badge-background: rgba(153, 88, 230, 0.25) !important;
			--sk-badge-text-color: rgba(153, 88, 230, 1) !important;
		}

		.badge-community-alt {
			--sk-badge-background: rgba(255, 146, 0, 0.25) !important;
			--sk-badge-text-color: rgba(255, 146, 0, 1) !important;
		}
		.theme-dark .badge-community-alt {
			--sk-badge-background: rgba(255, 146, 0, 0.25) !important;
			--sk-badge-text-color: rgba(255, 146, 0, 1) !important;
		}

		/* ===== BASE LAYOUT & GLOBAL STYLES ===== */
		bg-gradient, .theme-light .bg-gradient, body[data-color-scheme="light"] .bg-gradient,
		.theme-dark .bg-gradient, body[data-color-scheme="dark"] .bg-gradient {
			background: radial-gradient(ellipse at top left, rgb(165 76 189) 0%, rgb(61 40 174) 65%, rgba(133, 51, 228, 1) 100%) !important;
		}

		.ribbon,
		.theme-light .ribbon,
		body[data-color-scheme="light"] .ribbon {
			border-top:1px solid #D2D2D7;
		}
		.theme-dark .ribbon,
		body[data-color-scheme="dark"] .ribbon {
			border-top:1px solid #424245;
		}

		.bg-light {
			background-color: var(--bg-light-override) !important;
		}

		.grid.grid-gutterless {
			width: 100%;
		}

		.theme-dark .callout {
			background-color: var(--callout-dark-bg) !important;
		}

		section.section-hero {
			color: #ffffff;
		}

		section.section-hero .eyebrow sf-symbol {
			font-size: 80px;
		}

		.lighter {
			color: var(--glyph-gray-tertiary);
		}

		/* ===== FILTER LAYOUT STYLES ===== */
		.section-filters {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.section-filters .section-content {
			display: flex;
			justify-content: center;
		}

		.filters-container {
			display: flex;
			align-items: center;
			gap: 1.5rem;
			width: 100%;
			max-width: 1200px;
		}

		.regional-filter-container {
			flex: 1;
			display: flex;
			justify-content: flex-start;
		}

		.wwdc-filter-container {
			flex-shrink: 0;
		}

		/* ===== WWDC FILTER DROPDOWN STYLING ===== */
		.wwdc-filter-dropdown {
			background-color: #e8e8ed;
			white-space: nowrap;
			border-radius: 999px;
			padding: 12px 20px;
			cursor: pointer;
			font-size: 14px;
			font-weight: 400;
			color: rgba(29, 29, 31, .9);
			transition: all 0.2s ease;
			border: none;
			height: 44px;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			min-width: 140px;
			appearance: none;
			background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="rgba(29, 29, 31, .9)" stroke-width="2"><polyline points="6,9 12,15 18,9"></polyline></svg>');
			background-repeat: no-repeat;
			background-position: right 12px center;
			background-size: 16px;
			padding-right: 36px;
		}


		.wwdc-filter-dropdown:focus {
			outline: none;
		}

		.wwdc-filter-dropdown option {
			background-color: rgb(var(--white));
			color: #1d1d1f;
			padding: 8px 12px;
		}

		.theme-dark .wwdc-filter-dropdown,
		body[data-color-scheme="dark"] .wwdc-filter-dropdown {
			background-color: var(--dark-ui-bg);
			color: rgba(245, 245, 247, .9);
			background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="rgba(245, 245, 247, .9)" stroke-width="2"><polyline points="6,9 12,15 18,9"></polyline></svg>');
		}

		.theme-dark .wwdc-filter-dropdown option,
		body[data-color-scheme="dark"] .wwdc-filter-dropdown option {
			background-color: var(--dark-ui-bg);
			color: rgba(245, 245, 247, .9);
		}


		/* ===== TAB NAVIGATION STYLES ===== */
		.tn-p {
			margin: 0;
			display: flex;
			width: fit-content;
		}

		.tn-p .tn {
			margin: 0;
			width: fit-content;
		}


		/* ===== TILES ===== */
		.tile-full .tile-content {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			gap: var(--tile-custom-gap, 1.25em);
			padding: 1.5em;
		}

		a.tile-link .tile-rounded {
			transition: box-shadow 0.2s ease-in-out;
		}
		a.tile-link:hover .tile-rounded {
			box-shadow:
				0 0 0 1px rgba(0, 0, 0, 0.01),
				0 7px 14px 0 rgba(0, 0, 0, 0.1),
				0 3px 6px 0 rgba(0, 0, 0, 0.02);
		}

		.tile sf-symbol {
			font-size: 24px;
			width: 24px;
			display: inline-flex;
			vertical-align: text-bottom;
		}

		sf-symbol + p {
			display: inline-flex;
			position: relative;
		}

		sf-symbol.calendar-icon {
			margin-top: 6px;
		}
		sf-symbol.calendar-icon + p {
			margin-top: -6px;
		}

		.typography-eyebrow.smaller {
			font-weight: 500;
			font-size: 14px;
			line-height: 24px;
			margin-bottom: 0.25em;
		}

		.typography-eyebrow.lighter {
			color: var(--glyph-gray-tertiary);
		}

		/* ===== STANDARD EVENT TILES ===== */
		.event-item.hidden {
			display: none;
		}

		.section-events .tile svg.top-icon {
			height: 59px;
			position: absolute;
			left: 24px;
			top: 9px;
		}

		.section-events .tile-content {
			padding-top: 62px;
		}

		.grid-item .tile-rounded .typography-eyebrow strong {
			font-weight: 800;
		}


		/* ===== BADGES ===== */

		.badges {
			float: right;
			padding-right: 25px;
		}

		/* ===== APPLE ATTENDING BANNER AND BADGE STYLES ===== */
		a.tile-link .tile-rounded .apple-attending-banner {
			padding: 25px 0 0 25px;
		}

		.apple-attending-banner + .tile-content {
			padding-top:10px;
		}

		.apple-attending {
			margin-right: 1em;
			display: inline-block;
		}


		/* ===== WWDC BANNER AND BADGE STYLES ===== */
		a.tile-link .tile-rounded .wwdc-banner {
			padding: 25px 0 0 25px;
		}

		.wwdc-banner + .tile-content {
			padding-top: 10px;
		}

		.theme-dark .grid-item[data-wwdc="true"] .tile-rounded,
		body[data-color-scheme="dark"] .grid-item[data-wwdc="true"] .tile-rounded {
			color: rgb(var(--white)) !important;
		}


		/* ===== UTILITY STYLES ===== */
		.no-results {
			text-align: center;
			padding: 2rem;
			color: var(--glyph-gray-tertiary);
			grid-column: 1 / -1;
			display: none;
		}

		/* ===== RESPONSIVE MEDIA QUERIES ===== */
		@media only screen and (max-width: 1068px) {
			.tn-p {
				max-width: 496px;
			}
		}

		@media only screen and (max-width: 734px) {
			.filters-container {
				gap: 0.75rem;
			}

			.tn-p {
				max-width: calc(100vw - 40px);
				width: 100%;
			}

			.filters-container {
				gap: 0.75rem;
				padding: 0;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
			}

			.regional-filter-container {
				width: 100%;
				display: flex;
				justify-content: center;
				min-width: 0;
				align-self: center;
				order: 1;
				margin-bottom: 0.5rem;
			}

			.wwdc-filter-container {
				flex-shrink: 0;
				width: auto;
				margin-bottom: 0.5rem;
				align-self: flex-end;
				order: 2;
			}

			.tn-p .tn {
				width: 100%;
			}

			.tn-items {
				justify-content: space-between;
			}

			.tn-label {
				white-space: nowrap;
			}

			.tn-paddle {
				display: block;
			}

			.wwdc-filter-dropdown {
				padding: 12px 16px;
				padding-right: 32px;
				min-width: 120px;
				height: 44px;
				background-size: 14px;
				background-position: right 10px center;
			}

			.wwdc-filter-dropdown:hover {
				background-size: 14px;
			}

			.theme-dark .wwdc-filter-dropdown:hover,
			body[data-color-scheme="dark"] .wwdc-filter-dropdown:hover {
				background-size: 14px;
			}
		}

		@media only screen and (max-width: 480px) {
			.tn-p {
				max-width: calc(100vw - 32px);
			}

			.filters-container {
				gap: 0.5rem;
			}

			.tn-platter {
				--tabnav-platter-padding: 12px;
			}

			.wwdc-filter-dropdown {
				padding: 12px 12px;
				padding-right: 28px;
				min-width: 110px;
				background-size: 12px;
				background-position: right 8px center;
			}

			.wwdc-filter-dropdown:hover {
				background-size: 12px;
			}

			.theme-dark .wwdc-filter-dropdown:hover,
			body[data-color-scheme="dark"] .wwdc-filter-dropdown:hover {
				background-size: 12px;
			}
		}

		@media only screen and (max-width: 375px) {
			.tn-p {
				max-width: calc(100vw - 24px);
			}

			.filters-container {
				gap: 0.25rem;
			}

			.tn-platter {
				--tabnav-platter-padding: 10px;
			}

			.wwdc-filter-dropdown {
				padding: 10px 10px;
				padding-right: 26px;
				min-width: 100px;
				background-position: right 6px center;
			}
		}

#main section.section {
	padding-top: 4em;
	padding-bottom: 4em;
}
#main section.section.section-wwdc-events {
	margin-top: 4em;
}
#main section .section-content .row {
	margin-left: 0;
	margin-right: 0;
}
#main section .section-content .row > .column {
	padding: 0;
}

@media only screen and (max-width: 1068px) {
	#main section .section-content .row {
		margin-left: 0;
		margin-right: 0;
	}
	#main section .section-content .row > .column {
		padding: 0;
	}
}

@media only screen and (max-width: 734px) {
	#main section.section {
		padding-top: 3em;
		padding-bottom: 3em;
	}
	#main section.section.section-wwdc-events {
		margin-top: 3em;
	}
	#main section .section-content .row {
		margin-left: 0;
		margin-right: 0;
	}
	#main section .section-content .row > .column {
		padding: 0;
	}
}