:root {
	color-scheme: dark;
	--safe-top: max(24px, env(safe-area-inset-top));
	--safe-right: max(22px, env(safe-area-inset-right));
	--safe-bottom: max(22px, env(safe-area-inset-bottom));
	--safe-left: max(22px, env(safe-area-inset-left));
	--ink: rgba(255, 250, 239, 0.96);
	--ink-soft: rgba(255, 250, 239, 0.66);
	--line: rgba(255, 255, 255, 0.2);
	--glass: rgba(4, 13, 25, 0.22);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
	box-sizing: border-box;
}

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
	background: #07111e;
}

body {
	font-family: "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
	touch-action: none;
}

button,
a {
	font: inherit;
}

button {
	color: inherit;
}

.coast {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 420px;
	overflow: hidden;
	isolation: isolate;
	cursor: grab;
	background: #081427;
}

.coast.is-dragging {
	cursor: grabbing;
}

.scene,
.foreground {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.scene {
	z-index: -5;
}

.foreground {
	z-index: -3;
	pointer-events: none;
}

.grain {
	position: absolute;
	inset: -50%;
	z-index: -2;
	pointer-events: none;
	opacity: 0.045;
	background-image:
		repeating-radial-gradient(circle at 17% 32%, transparent 0, rgba(255, 255, 255, 0.7) 0.45px, transparent 0.9px, transparent 4px);
	background-size: 7px 7px;
	mix-blend-mode: soft-light;
	animation: grain-shift 0.35s steps(2) infinite;
}

.cinema-bars::before,
.cinema-bars::after {
	position: absolute;
	right: 0;
	left: 0;
	z-index: 9;
	height: 1px;
	content: "";
	pointer-events: none;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
	opacity: 0.65;
}

.cinema-bars::before {
	top: 0;
}

.cinema-bars::after {
	bottom: 0;
}

.masthead {
	position: absolute;
	top: var(--safe-top);
	right: var(--safe-right);
	left: var(--safe-left);
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	pointer-events: none;
}

.wordmark {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	color: var(--ink);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-decoration: none;
	pointer-events: auto;
}

.wordmark-mark {
	position: relative;
	display: block;
	width: 22px;
	height: 22px;
	border: 1px solid rgba(255, 255, 255, 0.58);
	border-radius: 50%;
}

.wordmark-mark::before {
	position: absolute;
	right: 3px;
	bottom: 5px;
	left: 3px;
	height: 5px;
	content: "";
	border-top: 1px solid currentColor;
	border-radius: 50%;
	transform: rotate(-7deg);
}

.sky-clock {
	display: flex;
	gap: 12px;
	align-items: baseline;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.sky-clock time {
	font-family: "SFMono-Regular", Consolas, monospace;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.08em;
}

.sky-clock span {
	color: var(--ink-soft);
}

.opening {
	position: absolute;
	top: 50%;
	left: clamp(24px, 9vw, 150px);
	z-index: 4;
	max-width: 560px;
	margin: 0;
	transform: translateY(-51%);
	pointer-events: none;
	animation: opening-away 8s 1.8s var(--ease-out) both;
}

.opening-kicker {
	margin: 0 0 19px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.34em;
	opacity: 0.62;
}

.opening h1 {
	margin: 0;
	font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
	font-size: clamp(44px, 7.2vw, 108px);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.05em;
	text-wrap: balance;
	text-shadow: 0 3px 38px rgba(0, 0, 0, 0.18);
}

.opening > p:last-child {
	margin: 26px 0 0 4px;
	color: var(--ink-soft);
	font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
	font-size: clamp(14px, 1.4vw, 18px);
	letter-spacing: 0.18em;
}

.moment-line {
	position: absolute;
	right: clamp(24px, 5vw, 84px);
	bottom: clamp(112px, 16vh, 168px);
	z-index: 5;
	margin: 0;
	font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
	font-size: 13px;
	letter-spacing: 0.16em;
	opacity: 0.64;
	writing-mode: vertical-rl;
}

.drag-hint {
	position: absolute;
	bottom: clamp(104px, 13vh, 138px);
	left: 50%;
	z-index: 8;
	display: flex;
	gap: 12px;
	align-items: center;
	color: var(--ink-soft);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	transform: translateX(-50%);
	pointer-events: none;
	animation: hint-away 1.2s 8s var(--ease-out) forwards;
}

.drag-hint-line {
	position: relative;
	display: block;
	width: 42px;
	height: 1px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.24);
}

.drag-hint-line::after {
	position: absolute;
	inset: 0;
	content: "";
	background: var(--ink);
	transform: translateX(-100%);
	animation: hint-line 2.4s ease-in-out infinite;
}

.controls {
	position: absolute;
	bottom: var(--safe-bottom);
	left: 50%;
	z-index: 12;
	display: flex;
	gap: 6px;
	align-items: center;
	padding: 6px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 999px;
	background: var(--glass);
	box-shadow: 0 16px 50px rgba(0, 0, 0, 0.16);
	backdrop-filter: blur(18px) saturate(120%);
	transform: translateX(-50%);
	-webkit-backdrop-filter: blur(18px) saturate(120%);
}

.control-button {
	display: inline-flex;
	gap: 7px;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 42px;
	padding: 0 14px;
	border: 0;
	border-radius: 999px;
	color: rgba(255, 255, 255, 0.76);
	background: transparent;
	cursor: pointer;
	transition:
		color 220ms ease,
		background 220ms ease,
		transform 220ms var(--ease-out);
}

.control-button:hover,
.control-button:focus-visible {
	color: var(--ink);
	background: rgba(255, 255, 255, 0.1);
	outline: none;
}

.control-button:focus-visible {
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.68);
}

.control-button:active {
	transform: scale(0.95);
}

.control-button-primary {
	color: #17202a;
	background: rgba(255, 251, 239, 0.92);
}

.control-button-primary:hover,
.control-button-primary:focus-visible {
	color: #0a1420;
	background: #fffdf6;
}

.control-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	font-family: Arial, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

.sound-icon {
	font-family: Georgia, serif;
	font-size: 22px;
	font-weight: 400;
	transform: translateY(-2px);
}

.speed-icon {
	font-family: "SFMono-Regular", Consolas, monospace;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: -0.08em;
}

.control-label {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.08em;
	white-space: nowrap;
}

.control-button-icon {
	padding-right: 12px;
	padding-left: 12px;
}

.fullscreen-icon {
	position: relative;
	display: block;
	width: 14px;
	height: 14px;
	background:
		linear-gradient(currentColor, currentColor) 0 0 / 5px 1px no-repeat,
		linear-gradient(currentColor, currentColor) 0 0 / 1px 5px no-repeat,
		linear-gradient(currentColor, currentColor) 100% 0 / 5px 1px no-repeat,
		linear-gradient(currentColor, currentColor) 100% 0 / 1px 5px no-repeat,
		linear-gradient(currentColor, currentColor) 0 100% / 5px 1px no-repeat,
		linear-gradient(currentColor, currentColor) 0 100% / 1px 5px no-repeat,
		linear-gradient(currentColor, currentColor) 100% 100% / 5px 1px no-repeat,
		linear-gradient(currentColor, currentColor) 100% 100% / 1px 5px no-repeat;
}

.keyboard-help {
	position: absolute;
	right: var(--safe-right);
	bottom: calc(var(--safe-bottom) + 13px);
	z-index: 9;
	margin: 0;
	color: rgba(255, 255, 255, 0.48);
	font-size: 10px;
	letter-spacing: 0.1em;
}

.ambient-ui {
	transition: opacity 700ms ease, transform 700ms var(--ease-out);
}

.coast.is-idle .ambient-ui {
	opacity: 0;
	pointer-events: none;
}

.coast.is-idle .masthead {
	transform: translateY(-12px);
}

.coast.is-idle .controls {
	transform: translate(-50%, 16px);
}

.webgl-fallback {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 20;
	width: min(80vw, 460px);
	padding: 30px;
	text-align: center;
	transform: translate(-50%, -50%);
}

.webgl-fallback p {
	margin: 0 0 8px;
	font-family: "Songti SC", "STSong", serif;
	font-size: 24px;
}

.webgl-fallback small {
	color: var(--ink-soft);
}

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

@keyframes opening-away {
	0%,
	54% {
		opacity: 1;
		filter: blur(0);
		transform: translateY(-51%);
	}
	100% {
		opacity: 0;
		filter: blur(8px);
		transform: translateY(-58%);
	}
}

@keyframes hint-away {
	to {
		opacity: 0;
		transform: translate(-50%, 8px);
	}
}

@keyframes hint-line {
	0% {
		transform: translateX(-100%);
	}
	48%,
	52% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(100%);
	}
}

@keyframes grain-shift {
	0% {
		transform: translate3d(0, 0, 0);
	}
	25% {
		transform: translate3d(2%, -1%, 0);
	}
	50% {
		transform: translate3d(-1%, 2%, 0);
	}
	75% {
		transform: translate3d(1%, 1%, 0);
	}
}

@media (max-width: 760px) {
	.opening {
		top: 45%;
		left: var(--safe-left);
	}

	.opening h1 {
		font-size: clamp(42px, 13.4vw, 72px);
	}

	.moment-line,
	.keyboard-help {
		display: none;
	}

	.control-label {
		display: none;
	}

	.control-button {
		width: 42px;
		padding: 0;
	}

	.control-button-primary {
		width: 52px;
	}

	.wordmark {
		letter-spacing: 0.18em;
	}
}

@media (max-height: 560px) and (orientation: landscape) {
	.opening {
		top: 46%;
	}

	.opening h1 {
		font-size: 10vh;
	}

	.opening-kicker,
	.opening > p:last-child,
	.drag-hint,
	.keyboard-help,
	.moment-line {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.grain,
	.drag-hint-line::after {
		animation: none;
	}

	.opening {
		animation-duration: 1ms;
		animation-delay: 5s;
	}

	.ambient-ui {
		transition-duration: 1ms;
	}
}