		:root {
			color-scheme: light;
			--umd-red: #24557f;
			--umd-gold: #8ab4f8;
			--umd-black: #202124;
			--umd-white: #ffffff;
			--masthead-red: #e21833;
			--gray-50: #f8f9fa;
			--gray-100: #fafafa;
			--gray-200: #d3d3d3;
			--gray-500: #80868b;
			--gray-700: #4f5358;
			--gray-900: #202124;
			--panel-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
		}

		* {
			box-sizing: border-box;
		}

		[hidden] {
			display: none !important;
		}

		body {
			margin: 0;
			min-height: 100vh;
			display: flex;
			flex-direction: column;
			background: var(--gray-50);
			color: var(--gray-900);
			font: 400 16px/24px Roboto, "Noto Sans", "Noto Sans JP", "Noto Sans KR", "Noto Naskh Arabic", "Noto Sans Thai", "Noto Sans Hebrew", "Noto Sans Bengali", sans-serif;
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			text-size-adjust: 100%;
		}

		h1,
		h2,
		h3,
		h4,
		h5,
		h6 {
			font-family: "Google Sans", "Noto Sans", "Noto Sans JP", "Noto Sans KR", "Noto Naskh Arabic", "Noto Sans Thai", "Noto Sans Hebrew", "Noto Sans Bengali", sans-serif;
			letter-spacing: 0;
		}

		a {
			color: var(--umd-red);
			text-decoration-thickness: 2px;
			text-underline-offset: 3px;
		}

		.skip-link {
			position: absolute;
			left: 12px;
			top: -60px;
			z-index: 1000;
			padding: 10px 14px;
			border: 2px solid #530fff;
			background: var(--umd-white);
			color: #530fff;
			font-weight: 700;
			text-decoration: none;
			transition: top 0.2s ease;
		}

		.skip-link:focus {
			top: 12px;
		}

		.page-shell {
			width: 100%;
			flex: 1 0 auto;
			max-width: 1240px;
			margin: 0 auto;
			padding: 24px clamp(18px, 4vw, 40px) 40px;
		}

		.dit-site-header {
			background: #222222;
			border-bottom: 4px solid var(--masthead-red);
			color: var(--umd-white);
		}

		.dit-site-header__inner {
			max-width: 1240px;
			margin: 0 auto;
			padding: 10px clamp(18px, 4vw, 32px);
			display: grid;
			grid-template-columns: minmax(0, 1fr) minmax(200px, 280px);
			column-gap: clamp(24px, 3vw, 40px);
			row-gap: 8px;
			align-items: center;
		}

		.dit-site-header__lead {
			min-width: 0;
			display: grid;
			gap: 0;
			justify-items: start;
		}

		.dit-site-header__logo-link {
			display: inline-flex;
			align-items: center;
			justify-self: end;
			flex: 0 0 auto;
			line-height: 0;
			overflow: hidden;
		}

		.dit-site-header__logo {
			display: block;
			width: clamp(214px, 23vw, 300px);
			height: auto;
			margin: -8px -10px -10px -6px;
		}

		.dit-site-header__content {
			min-width: 0;
			display: grid;
			gap: 2px;
		}

		.dit-site-header__title {
			margin: 0;
			color: var(--umd-white);
			font-family: "Google Sans", "Noto Sans", "Noto Sans JP", "Noto Sans KR", "Noto Naskh Arabic", "Noto Sans Thai", "Noto Sans Hebrew", "Noto Sans Bengali", sans-serif;
			font-size: clamp(2.5rem, 4.8vw, 4rem);
			font-weight: 500;
			letter-spacing: 0;
			line-height: 1;
			white-space: nowrap;
		}

		.dit-site-header__subtitle {
			margin: 0;
			color: var(--umd-white);
			font-family: "Google Sans", "Noto Sans", "Noto Sans JP", "Noto Sans KR", "Noto Naskh Arabic", "Noto Sans Thai", "Noto Sans Hebrew", "Noto Sans Bengali", sans-serif;
			font-size: clamp(1.2rem, 2vw, 1.9rem);
			font-weight: 400;
			line-height: 1.5;
		}

		.tip-card {
			display: block;
		}

		.support-app {
			margin-top: 0;
			display: grid;
			grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
			gap: 24px;
			align-items: stretch;
		}

		.info-rail,
		.workspace-card {
			background: var(--umd-white);
			border: 1px solid var(--gray-200);
			box-shadow: var(--panel-shadow);
		}

		.info-rail {
			position: sticky;
			top: 20px;
			padding: 24px;
		}

		.info-rail__intro h2 {
			margin: 0;
			font-size: clamp(1.6rem, 3vw, 2rem);
			line-height: 1.08;
		}

		.rail-copy {
			margin: 0;
			color: var(--gray-700);
			line-height: 1.7;
		}

		.journey-grid {
			margin-top: 24px;
			display: grid;
			gap: 16px;
		}

		.tip-card {
			padding: 18px 20px;
			background: var(--umd-white);
			border: 1px solid var(--gray-200);
			box-shadow: var(--panel-shadow);
		}

		.tip-card h3 {
			margin: 0 0 8px;
			font-size: 1.25rem;
			line-height: 1.2;
		}

		.tip-card p {
			margin: 0;
			color: var(--gray-700);
			line-height: 1.6;
		}

		.resource-block {
			margin-top: 24px;
			padding-top: 24px;
			border-top: 1px solid var(--gray-200);
		}

		.resource-block h3 {
			margin: 0 0 12px;
			font-size: 1.25rem;
			line-height: 1.2;
		}

		.resource-block p {
			margin: 0 0 12px;
			color: var(--gray-700);
			line-height: 1.6;
		}

		.hours-list {
			margin: 16px 0 14px;
			padding: 0;
			list-style: none;
			display: grid;
			gap: 0;
		}

		.hours-list li {
			display: flex;
			justify-content: space-between;
			gap: 16px;
			padding: 10px 0;
			border-top: 1px solid var(--gray-200);
		}

		.hours-list strong {
			font-weight: 700;
		}

		.hours-list span {
			color: var(--gray-700);
			text-align: right;
		}

		.hours-note {
			margin: 0 0 14px;
			color: var(--gray-700);
			line-height: 1.6;
		}

		.resource-button {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-height: 42px;
			padding: 10px 16px;
			border: 1px solid #1c4262;
			border-radius: 4px;
			background: var(--umd-red);
			color: var(--umd-white);
			font: inherit;
			font-weight: 500;
			text-decoration: none;
			cursor: pointer;
		}

		.resource-button:hover,
		.resource-button:focus-visible {
			background: #1c4262;
			text-decoration: none;
		}

		.support-app[data-state="chat"] {
			grid-template-columns: 1fr;
			align-items: start;
		}

		.support-app[data-state="chat"] .info-rail,
		.support-app[data-state="chat"] .workspace-header {
			display: none;
		}

		.support-app[data-state="chat"] .workspace-card {
			padding: 0;
			background: transparent;
			border: 0;
			box-shadow: none;
			min-height: auto;
		}

		.support-app[data-state="chat"] .panel-stack {
			padding-top: 0;
		}

		.workspace-card {
			padding: 24px;
			min-height: auto;
		}

		.workspace-header {
			display: flex;
			justify-content: flex-start;
			gap: 18px;
			align-items: start;
			padding-bottom: 20px;
			border-bottom: 1px solid var(--gray-200);
		}

		.workspace-header h2 {
			margin: 0;
			font-size: clamp(1.75rem, 3vw, 2.15rem);
			line-height: 1.08;
		}

		.workspace-header p {
			margin: 10px 0 0;
			max-width: 58ch;
			color: var(--gray-700);
			line-height: 1.65;
		}


		.panel-stack {
			padding-top: 24px;
		}

		.panel {
			animation: panel-in 0.4s ease both;
		}

		@keyframes panel-in {
			from {
				opacity: 0;
				transform: translateY(18px);
			}

			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		.support-form {
			display: grid;
			gap: 20px;
		}

		.field-grid {
			display: grid;
			grid-template-columns: 1fr;
			gap: 18px;
		}

		.field {
			display: grid;
			gap: 8px;
		}

		label {
			font-size: 0.96rem;
			font-weight: 700;
		}

		.field-optional {
			font-weight: 400;
			color: var(--gray-700);
		}

		input,
		textarea {
			width: 100%;
			border: 1px solid #cfcfcf;
			background: var(--umd-white);
			padding: 12px 14px;
			font: inherit;
			color: var(--umd-black);
		}

		input:focus,
		textarea:focus {
			outline: 2px solid rgba(36, 85, 127, 0.18);
			outline-offset: 2px;
			border-color: var(--umd-red);
		}

		textarea {
			min-height: 150px;
			resize: vertical;
		}


		.form-actions {
			display: grid;
			gap: 10px;
			justify-items: start;
			padding-top: 4px;
			padding-bottom: 12px;
		}

		.primary-button {
			border: 1px solid #1c4262;
			border-radius: 4px;
			padding: 14px 20px;
			font: inherit;
			font-weight: 500;
			letter-spacing: 0;
			text-transform: none;
			background: var(--umd-red);
			color: var(--umd-white);
			cursor: pointer;
			transition: background 0.2s ease;
		}

		.primary-button:hover,
		.primary-button:focus-visible {
			background: #1c4262;
		}

		.primary-button:focus-visible {
			outline: 2px solid rgba(36, 85, 127, 0.28);
			outline-offset: 2px;
		}

		.secondary-button,
		.chat-fallback-link {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-height: 42px;
			padding: 10px 16px;
			border-radius: 4px;
			font: inherit;
			font-weight: 500;
			text-decoration: none;
			cursor: pointer;
			transition: background 0.2s ease;
		}

		.secondary-button {
			border: 1px solid #b9c6d2;
			background: #ffffff;
			color: var(--umd-red);
		}

		.secondary-button:hover,
		.secondary-button:focus-visible {
			background: #f5f7f9;
			text-decoration: none;
		}

		.chat-fallback-link {
			border: 1px solid #1c4262;
			background: var(--umd-red);
			color: var(--umd-white);
		}

		.chat-fallback-link:hover,
		.chat-fallback-link:focus-visible {
			background: #1c4262;
			text-decoration: none;
		}


		.chat-panel {
			display: grid;
			gap: 0;
			min-width: 0;
		}

		.chat-shell {
			display: grid;
			gap: 12px;
			min-width: 0;
		}

		.chat-loading {
			display: inline-flex;
			align-items: center;
			gap: 10px;
			color: var(--umd-red);
			font-weight: 700;
		}

		.chat-loading::before {
			content: "";
			width: 16px;
			height: 16px;
			border: 2px solid rgba(0, 0, 0, 0.14);
			border-top-color: var(--umd-red);
			border-radius: 50%;
			animation: spin 0.8s linear infinite;
		}

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

		#ICContainer {
			position: relative;
			width: 100%;
			max-width: 100%;
			min-width: 0;
			min-height: clamp(560px, 68vh, 760px);
			background: transparent;
			border: 0;
			box-shadow: none;
			overflow: hidden;
			box-sizing: border-box;
		}

		#ICContainer iframe {
			display: block;
			width: 100%;
			height: 100%;
			border: 0;
		}

		#ICContainer[data-chat-ready="false"] iframe {
			visibility: hidden;
		}

		.chat-fallback {
			padding: 24px;
			background: #ffffff;
			border: 1px solid var(--gray-200);
			box-shadow: var(--panel-shadow);
		}

		.chat-fallback h3 {
			margin: 0 0 10px;
			font-size: clamp(1.45rem, 2.8vw, 1.9rem);
			line-height: 1.1;
		}

		.chat-fallback p {
			margin: 0;
			color: var(--gray-700);
			line-height: 1.7;
			max-width: 62ch;
		}

		.chat-fallback-actions {
			margin-top: 18px;
			display: flex;
			flex-wrap: wrap;
			gap: 12px;
		}

		.site-footer {
			flex-shrink: 0;
			margin-top: 32px;
			padding: 24px 18px 26px;
			background: #000000;
			color: #ffffff;
			text-align: center;
		}

		.site-footer__inner {
			max-width: 1240px;
			margin: 0 auto;
		}

		.site-footer-links,
		.site-footer-copy {
			margin: 0;
		}

		.site-footer-links {
			line-height: 1.55;
		}

		.site-footer-links a {
			color: #ffffff;
			text-decoration: underline;
			text-underline-offset: 3px;
		}

		.site-footer-links a:hover,
		.site-footer-links a:focus-visible {
			color: #f3f3f3;
		}

		.site-footer-copy {
			margin-top: 10px;
			font-size: 0.95rem;
		}

		@media (max-width: 1100px) {
			.dit-site-header__inner {
				grid-template-columns: 1fr;
				align-items: start;
			}

			.dit-site-header__logo-link {
				justify-self: start;
			}

			.support-app {
				grid-template-columns: 1fr;
			}

			.info-rail {
				position: static;
			}

			.workspace-card {
				min-height: auto;
			}

		}

		@media (max-width: 760px) {
			.dit-site-header__links,
			.workspace-header {
				flex-direction: column;
				align-items: start;
			}

			.primary-button {
				width: 100%;
			}

			.hours-list li {
				flex-direction: column;
				align-items: start;
			}

			.hours-list span {
				text-align: left;
			}

		}

		@media (max-width: 560px) {
			.dit-site-header__inner {
				padding: 10px 14px;
				grid-template-columns: 1fr;
				justify-items: center;
			}

			.dit-site-header__lead,
			.dit-site-header__content {
				justify-items: center;
				text-align: center;
			}

			.dit-site-header__links {
				display: none;
			}

			.dit-site-header__logo {
				display: none;
			}

			.site-footer {
				margin-top: 24px;
				padding: 20px 14px 22px;
			}

			.page-shell {
				padding: 18px 14px 28px;
			}

			.info-rail,
			.workspace-card {
				padding: 18px;
			}

			#ICContainer {
				min-height: 70vh;
			}

			.chat-fallback-actions {
				display: grid;
			}
		}
