:root {
	font-family: Tahoma, "Segoe UI", sans-serif;
	color-scheme: light;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	cursor: url("./xp/default-arrow-xp.png") 0 0, default !important;
}

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
}

body {
	font-family: Tahoma, Arial, sans-serif;
	font-size: 11px;
}

button,
a {
	-webkit-tap-highlight-color: transparent;
}

.desktop {
	position: relative;
	height: calc(100% - 30px);
	background: #2375d8 url("./xp-wallpaper.v1.webp") center / cover no-repeat;
}

.desktop-icons {
	position: absolute;
	top: 20px;
	left: 18px;
	display: grid;
	gap: 12px;
}

.desktop-shortcut {
	display: grid;
	justify-items: center;
	gap: 5px;
	width: 92px;
	padding: 5px 4px;
	border: 1px solid transparent;
	background: transparent;
	box-shadow: none;
	color: #fff;
	font: 12px Tahoma, Arial, sans-serif;
	text-shadow: 1px 1px 2px #000;
	cursor: url("./xp/default-arrow-xp.png") 0 0, default;
}

.desktop-shortcut img {
	image-rendering: auto;
}

.stub-shortcut img {
	width: 32px;
	height: 32px;
	margin: 8px;
}

.desktop-shortcut:focus,
.desktop-shortcut.is-selected {
	border: 1px dotted rgba(255, 255, 255, 0.9);
	background: rgba(11, 78, 162, 0.55);
	outline: none;
}

.desktop-shortcut span {
	padding: 1px 3px;
}

.security-dialog {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 5;
	width: min(440px, calc(100vw - 24px));
	transform: translate(-50%, -50%);
}

.security-dialog[hidden],
.loading-screen[hidden] {
	display: none;
}

.title-bar-text {
	font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
	font-size: 11px;
}

.dialog-body {
	padding: 18px 18px 14px;
}

.dialog-prompt {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 11px;
}

.file-details {
	margin: 16px 0;
	font-size: 11px;
}

.file-details div {
	display: grid;
	grid-template-columns: 72px 1fr;
	margin: 5px 0;
}

.file-details dt,
.file-details dd {
	margin: 0;
}

.file-details dd {
	font-weight: 700;
}

.warning-text {
	padding-top: 10px;
	border-top: 1px solid #aca899;
	color: #444;
	font-size: 11px;
	line-height: 1.4;
}

.dialog-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 18px;
}

.dialog-actions button {
	min-width: 84px;
}

.taskbar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10;
	display: flex;
	align-items: stretch;
	height: 30px;
	border: 0;
	background: linear-gradient(to bottom, #1f2f86 0%, #3165c4 3%, #3682e5 6%, #4490e6 10%, #3883e5 12%, #2b71e0 15%, #2663da 18%, #235bd6 20%, #2258d5 23%, #2157d6 38%, #245ddb 54%, #2562df 86%, #245fdc 89%, #2158d4 92%, #1d4ec0 95%, #1941a5 98%);
}

.start-menu {
	position: fixed;
	bottom: 29px;
	left: 0;
	z-index: 9;
	width: min(380px, calc(100vw - 12px));
	border: 2px solid #1e55b7;
	border-radius: 7px 7px 0 0;
	background: #fff;
	box-shadow: 3px -3px 12px rgba(0, 0, 0, 0.35);
	overflow: hidden;
}

.start-menu[hidden] {
	display: none;
}

.start-menu-user {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 54px;
	padding: 6px 7px 5px;
	background: linear-gradient(to bottom, #1868ce 0%, #0e60cb 20%, #1667cf 33%, #2476dc 60%, #3482e3 77%, #4791eb 100%);
	color: #fff;
	font-size: 15px;
	text-shadow: 1px 1px #17458c;
}

.start-menu-user img {
	border: 2px solid #fff;
	border-radius: 4px;
}

.start-menu-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 0 2px;
	border-top: 2px solid #e6a45c;
}

.start-menu-primary,
.start-menu-secondary {
	display: grid;
	align-content: start;
	padding: 7px 5px;
}

.start-menu-secondary {
	border-left: 1px solid rgba(58, 58, 255, 0.2);
	background: #cbe3ff;
}

.start-menu-content button {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 7px 9px;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: #111;
	font: 11px Tahoma, Arial, sans-serif;
	text-align: left;
	text-decoration: none;
}

.start-menu-content button:hover,
.start-menu-content button:focus-visible {
	background: #316ac5;
	color: #fff;
	outline: none;
}

.start-menu-content span {
	line-height: 1.25;
}

.start-menu-content small {
	display: block;
	margin-top: 2px;
	color: #666;
}

.start-menu-content button:hover small,
.start-menu-content button:focus-visible small {
	color: #fff;
}

.start-menu-secondary button {
	min-height: 30px;
	padding: 4px 7px;
	color: #00136b;
}

.app-icon {
	position: relative;
	display: grid;
	place-items: center;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
}

.app-icon-ie {
	border-radius: 50%;
	color: #1477d4;
	font: italic 700 31px Arial, sans-serif;
	text-shadow: 1px 1px #87d8ff;
}

.app-icon-ie::after {
	position: absolute;
	inset: 13px -1px 8px;
	border-top: 3px solid #f0c22b;
	border-radius: 50%;
	content: "";
	transform: rotate(-18deg);
}

.app-icon-folder {
	width: 30px;
	height: 22px;
	margin-top: 7px;
	border: 1px solid #a2710d;
	background: linear-gradient(#ffe489, #eebd38);
	box-shadow: inset 2px 2px rgba(255, 255, 255, 0.65);
}

.app-icon-folder::before {
	position: absolute;
	top: -6px;
	left: 1px;
	width: 13px;
	height: 6px;
	border: 1px solid #a2710d;
	border-bottom: 0;
	background: #f2cb55;
	content: "";
}

.start-menu-footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: 36px;
	padding: 0 12px;
	background: linear-gradient(to bottom, #4282d6 0%, #418ae3 17%, #3482e3 29%, #2374df 49%, #176bd8 72%, #0f61cb 88%);
	color: rgba(255, 255, 255, 0.85);
	font-size: 11px;
}

.start-button {
	display: block;
	min-width: 94px;
	height: 30px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.start-button img {
	display: block;
	width: auto;
	height: 30px;
}

.start-button:hover,
.start-button:active,
.start-button:focus,
.start-button:focus-visible {
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	filter: none;
	outline: 0 !important;
}

.start-button:active img {
	filter: brightness(0.88);
}

.taskbar-window {
	display: flex;
	align-items: center;
	gap: 6px;
	align-self: center;
	margin-left: 8px;
	padding: 4px 12px;
	width: min(170px, calc(100vw - 250px));
	border-radius: 2px;
	height: 22px;
	background: #1e52b7;
	box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.2), inset 1px 0 1px rgba(0, 0, 0, 0.7);
	color: #fff;
	font-size: 11px;
	font-weight: 400;
	text-align: left;
}

.taskbar-window[hidden] {
	display: none;
}

.taskbar-window span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.system-tray {
	display: flex;
	align-items: center;
	min-width: 74px;
	margin-left: auto;
	padding: 0 8px;
	border-left: 1px solid #18a2e7;
	background: linear-gradient(to bottom, #0c59b9 1%, #139ee9 6%, #18b5f2 10%, #139beb 14%, #1290e8 19%, #0d8dea 63%, #0d9ff1 81%, #1392e2 94%, #095bc9 100%);
	box-shadow: inset 1px 0 1px #18bbff;
	color: #fff;
}

.taskbar-clock {
	width: 100%;
	font-size: 14px;
	text-align: center;
	text-shadow: none;
}

.loading-screen {
	position: fixed;
	inset: 0;
	z-index: 20;
	display: grid;
	place-items: center;
	background: #000;
}

.loading-screen,
.loading-screen *,
.loading-screen *::before,
.loading-screen *::after {
	cursor: none !important;
}

.loading-screen video {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (max-width: 540px) {
	.desktop {
		height: calc(100% - 38px);
	}

	.taskbar {
		height: 38px;
	}

	.taskbar-window {
		padding-inline: 8px;
	}

	.security-dialog {
		top: 46%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.loading-screen video {
		display: none;
	}
}