:root {
	color-scheme: light;
	font-family:
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		sans-serif;
	font-synthesis: none;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	min-width: 280px;
	min-height: 100%;
}

body {
	background: #fff;
	color: #18202a;
}

html.layout-pending body {
	visibility: hidden;
}

html.is-standalone body {
	display: flex;
	min-height: 100svh;
}

html.is-standalone .emulator-app {
	margin: auto;
}

button {
	font: inherit;
}

[hidden] {
	display: none !important;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.emulator-app {
	width: min(100%, 600px);
	margin: 0 auto;
	padding: 10px 16px 8px;
}

.device-stage {
	width: min(100%, 568px);
	margin: 0 auto;
}

.device-shell {
	position: relative;
	width: 100%;
	aspect-ratio: 568 / 416;
	isolation: isolate;
}

.device-frame {
	position: absolute;
	z-index: 0;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: fill;
	pointer-events: none;
	user-select: none;
}

.device-screen {
	position: absolute;
	z-index: 1;
	left: 18.48591549%;
	top: 16.82692308%;
	width: 64.26056338%;
	height: 65.86538462%;
	overflow: hidden;
	border-radius: 2.73972603% / 3.64963504%;
	background: #07124f;
	color: #fff;
}

.screen-visual,
.screen-message,
.hotspot-layer,
.screen-overlay,
.modal-root {
	position: absolute;
	inset: 0;
}

.screen-visual {
	z-index: 1;
	background: #07124f;
}

.screen-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: fill;
	user-select: none;
}

.screen-visual.is-revealing .screen-image {
	animation: screen-reveal 420ms ease-out both;
}

@keyframes screen-reveal {
	from {
		opacity: 0;
		clip-path: inset(0 0 100% 0);
	}

	to {
		opacity: 1;
		clip-path: inset(0);
	}
}

.screen-message {
	z-index: 2;
	display: grid;
	place-items: center;
	margin: 0;
	padding: 24px;
	background: linear-gradient(145deg, #101b63, #050b32);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 650;
	line-height: 1.35;
	text-align: center;
}

.hotspot-layer {
	z-index: 3;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.hotspot-region {
	pointer-events: none;
}

.hotspot-button {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	appearance: none;
	border: 0;
	border-radius: 2px;
	background: transparent;
	cursor: pointer;
	pointer-events: auto;
	touch-action: manipulation;
	-webkit-tap-highlight-color: rgb(255 255 255 / 15%);
}

.hotspot-button:hover {
	background: rgb(255 255 255 / 3%);
}

.hotspot-button:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -3px;
	background: rgb(0 114 255 / 18%);
}

.hotspot-button:disabled {
	cursor: default;
	pointer-events: none;
}

.screen-overlay {
	z-index: 4;
	display: grid;
	place-items: center;
	padding: 12px;
}

.welcome-overlay {
	background: rgb(247 250 255 / 95%);
	color: #172033;
	text-align: center;
}

.welcome-card {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	gap: 7px;
	width: min(100%, 325px);
	height: min(100%, 220px);
	min-height: 0;
}

.welcome-card h2 {
	margin: 0;
	font-size: clamp(1rem, 4.5vw, 1.3rem);
	line-height: 1.15;
}

.welcome-card p {
	min-height: 0;
	margin: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-inline: 2px;
	font-size: clamp(0.75rem, 3.2vw, 0.9rem);
	line-height: 1.35;
	scrollbar-width: thin;
}

.welcome-card .primary-button {
	justify-self: center;
}

.primary-button,
.modal-choice,
.modal-close {
	min-height: 34px;
	border: 1px solid transparent;
	border-radius: 5px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	touch-action: manipulation;
}

.primary-button {
	padding: 7px 18px;
	background: #176b3a;
	color: #fff;
}

.primary-button:hover {
	background: #10572e;
}

.primary-button:disabled {
	background: #687383;
	cursor: not-allowed;
}

.primary-button:focus-visible,
.modal-choice:focus-visible,
.modal-close:focus-visible {
	outline: 3px solid #1b75d0;
	outline-offset: 2px;
}

.modal-root {
	z-index: 5;
	pointer-events: none;
}

.modal-overlay {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 7px;
	background: rgb(2 7 18 / 72%);
	pointer-events: auto;
}

.modal-card {
	width: min(100%, 345px);
	max-height: 100%;
	overflow: auto;
	overscroll-behavior: contain;
	padding: 10px;
	border: 1px solid #c8d2df;
	border-radius: 7px;
	background: #fff;
	box-shadow: 0 8px 24px rgb(0 0 0 / 32%);
	color: #172033;
}

.modal-header {
	display: flex;
	align-items: start;
	gap: 8px;
	margin-bottom: 6px;
}

.modal-title {
	flex: 1;
	margin: 0;
	font-size: 1rem;
	line-height: 1.2;
}

.modal-close {
	flex: 0 0 auto;
	min-width: 32px;
	padding: 3px 7px;
	border-color: #aab5c3;
	background: #f2f5f8;
	color: #253142;
}

.modal-body {
	margin: 0 0 9px;
	font-size: 0.78rem;
	line-height: 1.35;
	white-space: pre-wrap;
}

.modal-choices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(135px, 100%), 1fr));
	gap: 6px;
}

.modal-choice {
	padding: 6px 8px;
	border-color: #176b3a;
	background: #176b3a;
	color: #fff;
	font-size: 0.75rem;
}

.modal-choice:hover {
	background: #10572e;
}

@media (max-width: 420px) {
	.emulator-app {
		padding: 4px;
	}

	.screen-overlay {
		padding: 7px;
	}

	.modal-card {
		padding: 8px;
	}

	.modal-body {
		font-size: 0.72rem;
	}
}

@media (max-width: 320px) {
	.welcome-card {
		gap: 3px;
	}

	.welcome-card h2 {
		font-size: 0.9rem;
	}

	.welcome-card p {
		font-size: 0.66rem;
		line-height: 1.2;
	}

	.primary-button {
		min-height: 28px;
		padding-block: 4px;
		font-size: 0.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.screen-visual.is-revealing .screen-image {
		animation: none;
	}

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
	}
}