:root {
	color-scheme: light;
	--ink: #241f19;
	--muted: #756955;
	--paper: #fff8ea;
	--photo: #fffdf8;
	--line: rgba(84, 58, 33, 0.16);
	--red: #a63e2f;
	--green: #2d604f;
	--gold: #d6a04e;
	--shadow: 0 28px 80px rgba(18, 10, 5, 0.34);
	font-family:
		Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
	box-sizing: border-box;
}

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

body {
	min-height: 100vh;
	min-height: 100dvh;
	overflow: hidden;
	background: #2a160b;
	color: var(--ink);
	overscroll-behavior: none;
}

button {
	font: inherit;
}

button:focus-visible {
	outline: 3px solid rgba(255, 224, 163, 0.94);
	outline-offset: 3px;
}

.app-shell,
.desk-scene {
	position: relative;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
}

#desk-canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	cursor: grab;
	touch-action: none;
}

body.is-dragging #desk-canvas {
	cursor: grabbing;
}

.scene-vignette {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 52% 38%, transparent 0 38%, rgba(20, 9, 3, 0.18) 68%, rgba(16, 8, 4, 0.46)),
		linear-gradient(180deg, rgba(22, 11, 5, 0.28), transparent 22%, rgba(22, 11, 5, 0.18));
	pointer-events: none;
}

.scene-hud {
	position: absolute;
	top: clamp(16px, 4vw, 42px);
	left: clamp(14px, 4vw, 48px);
	right: clamp(14px, 4vw, 48px);
	z-index: 3;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	color: #fff7e8;
	text-shadow: 0 2px 22px rgba(21, 10, 4, 0.62);
	pointer-events: none;
	transition: opacity 180ms ease;
}

.scene-hud > * {
	pointer-events: auto;
}

body.is-inspecting .scene-hud {
	opacity: 0.045;
}

body.is-inspecting #desk-canvas {
	cursor: pointer;
}

body.is-photo-view .scene-hud {
	opacity: 0;
}

body.is-inspecting .scene-vignette {
	background:
		radial-gradient(ellipse at 50% 48%, transparent 0 18%, rgba(8, 10, 9, 0.25) 46%, rgba(7, 8, 8, 0.72)),
		linear-gradient(180deg, rgba(8, 9, 8, 0.58), transparent 26%, rgba(8, 9, 8, 0.38));
}

.kicker {
	margin: 0 0 8px;
	color: #ffe0a3;
	font-size: 0.78rem;
	font-weight: 820;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

h1 {
	margin: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 8rem;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 0.84;
}

.hud-actions {
	display: grid;
	justify-items: end;
	gap: 12px;
	min-width: 190px;
	padding-top: 8px;
}

.hud-actions p {
	margin: 0;
	color: rgba(255, 250, 239, 0.9);
	font-weight: 680;
	line-height: 1.35;
	text-align: right;
}

.desk-button,
.icon-button {
	border: 1px solid rgba(255, 250, 239, 0.46);
	border-radius: 999px;
	background: rgba(255, 250, 239, 0.18);
	color: #fffaf0;
	box-shadow: 0 14px 32px rgba(18, 10, 5, 0.22);
	cursor: pointer;
	backdrop-filter: blur(12px);
}

.desk-button {
	padding: 10px 16px;
}

.desk-button:active,
.icon-button:active {
	transform: translateY(1px);
}

.status {
	position: absolute;
	left: 50%;
	bottom: 18px;
	z-index: 3;
	width: min(560px, calc(100vw - 28px));
	margin: 0;
	color: rgba(255, 250, 239, 0.84);
	line-height: 1.45;
	text-align: center;
	text-shadow: 0 2px 14px rgba(18, 10, 5, 0.56);
	transform: translateX(-50%);
	pointer-events: none;
}

	.memory-drawer {
		--pickup-dx: 0px;
		--pickup-dy: 0px;
		--pickup-scale: 0.24;
		--pickup-rotate: -1deg;
		--pickup-base-y: -50%;
		position: fixed;
		top: 50%;
		left: 50%;
	z-index: 5;
	width: min(620px, calc(100vw - 36px));
	max-height: min(84vh, 820px);
	overflow: hidden;
	border: 0;
	border-radius: 5px;
	padding: 12px 12px 24px;
		background:
			linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 24%),
			var(--paper);
		box-shadow: var(--shadow);
		transform: translate(-50%, var(--pickup-base-y)) scale(1) rotate(-1deg);
		transform-origin: center center;
		will-change: transform, opacity;
	}

body.is-inspecting .memory-drawer {
	backdrop-filter: none;
}

.memory-drawer[hidden] {
	display: none;
}

	.memory-drawer.is-lifting,
	body.is-inspecting .memory-drawer {
		animation: card-pickup-in 980ms cubic-bezier(0.18, 0.88, 0.22, 1) both;
	}

	.memory-drawer.is-lifting .drawer-actions,
	.memory-drawer.is-lifting .drawer-kicker,
	.memory-drawer.is-lifting .drawer-title,
	.memory-drawer.is-lifting .drawer-meta,
	.memory-drawer.is-lifting .drawer-entry,
	.memory-drawer.is-lifting .drawer-gallery,
	body.is-inspecting .memory-drawer .drawer-actions,
	body.is-inspecting .memory-drawer .drawer-kicker,
	body.is-inspecting .memory-drawer .drawer-title,
	body.is-inspecting .memory-drawer .drawer-meta,
	body.is-inspecting .memory-drawer .drawer-entry,
	body.is-inspecting .memory-drawer .drawer-gallery {
		opacity: 0;
		animation: detail-reveal 190ms ease 760ms forwards;
	}

	@keyframes card-pickup-in {
		0%,
		56% {
			opacity: 0;
			box-shadow: 0 14px 32px rgba(18, 10, 5, 0.2);
			transform: translate(calc(-50% + var(--pickup-dx)), calc(var(--pickup-base-y) + var(--pickup-dy))) scale(var(--pickup-scale)) rotate(var(--pickup-rotate));
		}

		57% {
			opacity: 1;
			box-shadow: 0 28px 76px rgba(18, 10, 5, 0.34);
			transform: translate(-50%, var(--pickup-base-y)) scale(0.96) rotate(-1deg);
		}

		82% {
			opacity: 1;
			box-shadow: 0 34px 92px rgba(18, 10, 5, 0.4);
			transform: translate(-50%, var(--pickup-base-y)) scale(1.025) rotate(-1deg);
		}

		100% {
			opacity: 1;
			box-shadow: var(--shadow);
			transform: translate(-50%, var(--pickup-base-y)) scale(1) rotate(-1deg);
		}
	}

	@keyframes detail-reveal {
		to {
			opacity: 1;
		}
	}

.drawer-actions {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 2;
	display: flex;
	gap: 8px;
}

.icon-button {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	background: rgba(48, 31, 19, 0.78);
	color: #fff8ea;
}

.drawer-scroll {
	max-height: calc(min(84vh, 820px) - 36px);
	overflow: auto;
	padding: 0 14px 8px;
}

	.drawer-cover {
		min-height: 220px;
	margin: 0 0 22px;
	padding: 10px 10px 24px;
	background: var(--photo);
	box-shadow: 0 18px 34px rgba(54, 35, 17, 0.18);
		transform: rotate(-1.2deg);
	}

	.memory-drawer.is-lifting .drawer-cover,
	body.is-inspecting .memory-drawer .drawer-cover {
		animation: cover-settle 980ms cubic-bezier(0.18, 0.88, 0.22, 1) both;
	}

	@keyframes cover-settle {
		0%,
		66% {
			margin-bottom: 0;
			transform: rotate(0deg);
		}

		100% {
			margin-bottom: 22px;
			transform: rotate(-1.2deg);
		}
	}

.drawer-cover img {
	display: block;
	width: 100%;
	max-height: 300px;
	object-fit: cover;
	background: #d4c4a6;
}

body.is-inspecting .drawer-cover {
	display: block;
}

.drawer-kicker {
	margin: 0 0 8px;
	color: var(--red);
	font-size: 0.76rem;
	font-weight: 840;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.drawer-title {
	margin: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(2.1rem, 4vw, 3.6rem);
	font-weight: 500;
	letter-spacing: 0;
	line-height: 0.94;
}

.drawer-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 20px;
}

.meta-chip {
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 7px 10px;
	background: rgba(255, 255, 255, 0.5);
	color: #675842;
	font-size: 0.82rem;
	font-weight: 740;
}

.drawer-entry {
	margin: 0 0 22px;
	color: #3a332a;
	font-size: 1rem;
	line-height: 1.72;
	white-space: pre-line;
}

.drawer-gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	align-items: start;
	padding-bottom: 8px;
}

.gallery-photo {
	border: 0;
	border-radius: 4px;
	padding: 7px 7px 16px;
	background: var(--photo);
	box-shadow: 0 12px 22px rgba(54, 35, 17, 0.14);
	color: inherit;
	cursor: zoom-in;
	text-align: left;
	transform: rotate(var(--r));
}

.gallery-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: #d4c4a6;
}

.gallery-photo span {
	display: block;
	margin-top: 7px;
	color: #4b4135;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 0.84rem;
	line-height: 1.16;
}

.photo-lightbox {
	position: fixed;
	inset: 0;
	z-index: 10;
	display: grid;
	place-items: center;
	padding: 22px;
	background:
		radial-gradient(circle at 50% 46%, rgba(84, 57, 38, 0.1), rgba(8, 9, 8, 0.77) 72%),
		rgba(10, 11, 10, 0.72);
	cursor: default;
	backdrop-filter: blur(10px) saturate(0.74);
	touch-action: pan-y;
}

.photo-lightbox[hidden] {
	display: none;
}

.photo-lightbox figure {
	display: grid;
	justify-items: center;
	width: min(1120px, calc(100vw - 44px));
	max-height: calc(100dvh - 96px);
	margin: 0;
	text-align: center;
	transform: rotate(-0.4deg);
}

.photo-lightbox img {
	display: block;
	box-sizing: border-box;
	max-width: 100%;
	max-height: min(72dvh, 760px);
	border: 12px solid var(--photo);
	border-bottom-width: 26px;
	object-fit: contain;
	background: var(--photo);
	box-shadow:
		0 34px 90px rgba(10, 5, 2, 0.5),
		0 5px 0 rgba(255, 255, 255, 0.4) inset;
}

.photo-lightbox figcaption {
	max-width: min(860px, 92vw);
	margin: 12px auto 0;
	color: rgba(255, 250, 239, 0.86);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1rem;
	line-height: 1.35;
}

.photo-lightbox.is-opening {
	animation: photo-backdrop-in 420ms ease both;
}

.photo-lightbox.is-opening figure {
	animation: photo-focus-in 500ms cubic-bezier(0.18, 0.86, 0.22, 1) both;
}

@keyframes photo-backdrop-in {
	from { background-color: rgba(10, 11, 10, 0); }
}

@keyframes photo-focus-in {
	from {
		opacity: 0.18;
		transform: translate(calc(var(--photo-origin-x) - 50vw), calc(var(--photo-origin-y) - 50dvh)) scale(0.2) rotate(-4deg);
	}

	to {
		opacity: 1;
		transform: translate(0, 0) scale(1) rotate(-0.4deg);
	}
}

.photo-view-close,
.photo-view-nav {
	position: fixed;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 1px solid rgba(255, 250, 239, 0.46);
	border-radius: 50%;
	background: rgba(29, 17, 10, 0.72);
	color: #fffaf0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 2rem;
	line-height: 1;
	box-shadow: 0 14px 34px rgba(8, 4, 2, 0.34);
	cursor: pointer;
	backdrop-filter: blur(10px);
}

.photo-view-close {
	top: 22px;
	right: 22px;
	font-family: inherit;
	font-size: 1.55rem;
}

.photo-view-prev {
	top: 50%;
	left: 22px;
	transform: translateY(-50%);
}

.photo-view-next {
	top: 50%;
	right: 22px;
	transform: translateY(-50%);
}

.photo-view-counter {
	margin: 10px 0 0;
	color: rgba(255, 250, 239, 0.74);
	font-size: 0.86rem;
	font-weight: 720;
	text-align: center;
	pointer-events: none;
}

.visually-hidden {
	position: fixed !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: normal !important;
	border: 0 !important;
}

.memory-keyboard-controls {
	position: fixed;
	bottom: 18px;
	left: 50%;
	z-index: 7;
	display: flex;
	gap: 8px;
	padding: 8px;
	border: 1px solid rgba(255, 250, 239, 0.28);
	border-radius: 6px;
	background: rgba(36, 21, 12, 0.9);
	box-shadow: 0 18px 46px rgba(13, 7, 3, 0.38);
	opacity: 0;
	transform: translate(-50%, 10px);
	transition: opacity 150ms ease, transform 150ms ease;
	pointer-events: none;
}

.memory-keyboard-controls[hidden] {
	display: none;
}

.memory-keyboard-controls:focus-within {
	opacity: 1;
	transform: translate(-50%, 0);
}

.memory-keyboard-controls button {
	border: 1px solid rgba(255, 250, 239, 0.3);
	border-radius: 4px;
	padding: 8px 10px;
	background: rgba(255, 250, 239, 0.1);
	color: #fffaf0;
	cursor: pointer;
	pointer-events: auto;
}

.fallback-list {
	position: absolute;
	inset: 132px 14px 14px;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 14px;
	overflow: auto;
	padding: 6px;
}

.fallback-card {
	border: 0;
	border-radius: 5px;
	padding: 8px 8px 18px;
	background: var(--photo);
	box-shadow: 0 18px 36px rgba(18, 10, 5, 0.24);
	color: var(--ink);
	cursor: pointer;
}

.fallback-card img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: #d4c4a6;
}

.fallback-card span {
	display: block;
	margin-top: 9px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1rem;
	line-height: 1.1;
	text-align: center;
}

@media (min-width: 761px) and (max-width: 1100px) {
	h1 {
		font-size: 6.5rem;
	}
}

@media (max-width: 760px) {
	body {
		overflow: hidden;
		background: #43271a;
	}

	.app-shell,
	.desk-scene {
		min-height: 100dvh;
		height: 100dvh;
	}

	.scene-hud {
		top: max(10px, calc(env(safe-area-inset-top) + 6px));
		left: 14px;
		right: 14px;
		display: flex;
		align-items: flex-end;
		gap: 12px;
	}

	.kicker {
		margin-bottom: 3px;
		font-size: 0.66rem;
	}

	h1 {
		font-size: 3rem;
		line-height: 0.88;
	}

	.hud-actions {
		justify-items: end;
		min-width: 0;
		padding-top: 0;
		gap: 6px;
	}

	.hud-actions p {
		font-size: 0.76rem;
		line-height: 1.2;
		text-align: right;
	}

	.desk-button {
		min-height: 40px;
		border-color: rgba(192, 222, 204, 0.5);
		border-radius: 6px;
		padding: 8px 12px;
		background: rgba(45, 96, 79, 0.34);
		font-size: 0.84rem;
	}

	.status {
		bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px));
	}

	.photo-lightbox {
		padding: max(14px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom));
	}

	.photo-lightbox figure {
		width: calc(100vw - 24px);
		max-height: calc(100dvh - 108px);
	}

	.photo-lightbox img {
		max-height: 58dvh;
		border-width: 8px;
		border-bottom-width: 18px;
	}

	.photo-lightbox figcaption {
		max-width: calc(100vw - 48px);
		margin-top: 12px;
		font-size: 1rem;
	}

	.photo-view-counter {
		margin-top: 8px;
	}

	.photo-view-close {
		top: max(14px, calc(env(safe-area-inset-top) + 8px));
		right: 14px;
	}

	.photo-view-prev {
		left: 10px;
	}

	.photo-view-next {
		right: 10px;
	}

	.photo-view-nav {
		width: 46px;
		height: 46px;
		background: rgba(24, 30, 27, 0.62);
		opacity: 0.82;
	}

	.memory-keyboard-controls {
		bottom: 12px;
		width: calc(100vw - 20px);
		flex-wrap: wrap;
		justify-content: center;
	}

		.memory-drawer {
			--pickup-base-y: 0px;
			top: auto;
			right: auto;
			bottom: 28px;
			left: 50%;
			width: auto;
			width: calc(100vw - 20px);
			max-height: min(58vh, 500px);
			border-radius: 5px;
			transform: translate(-50%, 0) scale(1) rotate(-1deg);
		}

	body.is-inspecting .memory-drawer {
		max-height: min(58vh, 500px);
	}

		.drawer-scroll {
			max-height: calc(min(58vh, 500px) - 36px);
			padding: 0 10px 12px;
		}

	.drawer-cover {
		min-height: 0;
	}

	.drawer-gallery {
		grid-template-columns: 1fr;
	}
}