:root {
	--bg: #efe7d8;
	--paper: #fffdf7;
	--ink: #2a241c;
	--muted: rgba(42, 36, 28, 0.62);
	--ghost: rgba(42, 36, 28, 0.22);
	--rule: rgba(42, 36, 28, 0.12);
	--focus: rgba(42, 36, 28, 0.35);
}

* { box-sizing: border-box; }

button, input, select, textarea {
	font: inherit;
}

.capture {
	position: fixed;
	left: 0;
	top: 0;
	width: 12px;
	height: 12px;
	opacity: 0.01;
	border: 0;
	padding: 0;
	margin: 0;
	background: transparent;
	color: transparent;
	caret-color: transparent;
	font-size: 16px;
	resize: none;
	pointer-events: none;
}

html, body {
	height: 100%;
}

html {
	/* Prevent viewport width from changing when content becomes scrollable (avoids reflow). */
	scrollbar-gutter: stable;
}

body {
	margin: 0;
	background:
		/* soft highlight without hard cutoffs (prevents visible "rings"/seams) */
		radial-gradient(1400px 900px at 50% 0%, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.14) 60%, rgba(255,255,255,0.0) 100%),
		linear-gradient(180deg, #e2d6bf 0%, #d6c8ae 45%, #c9b999 100%);
	background-repeat: no-repeat;
	background-attachment: fixed;
	color: var(--ink);
	font-family: "Special Elite", "Courier Prime", "Courier New", Courier, monospace;
	overflow-x: hidden;
}

body.modalOpen {
	overflow: hidden;
}

.app {
	min-height: 100%;
	display: grid;
	grid-template-rows: auto 1fr auto;
}

.topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 18px 10px;
	border-bottom: none;
	background: transparent;
	backdrop-filter: none;
}

.topRight {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.control {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 10px;
	border: 1px solid var(--rule);
	background: rgba(255, 255, 255, 0.45);
	border-radius: 10px;
}

.controlLabel {
	font-size: 12px;
	letter-spacing: 0.08em;
	color: var(--muted);
	user-select: none;
}

.range {
	width: 140px;
}

.topLeft {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.brand {
	letter-spacing: 0.18em;
	font-size: 12px;
	color: var(--muted);
	user-select: none;
}

.instructions {
	display: flex;
	flex-direction: column;
	gap: 4px;
	user-select: none;
}

.tagline {
	font-size: 12px;
	color: rgba(42, 36, 28, 0.55);
	max-width: 62ch;
	line-height: 1.35;
}

.btn {
	appearance: none;
	border: 1px solid var(--rule);
	background: rgba(255, 255, 255, 0.55);
	color: var(--ink);
	padding: 8px 12px;
	border-radius: 10px;
	font-size: 13px;
	cursor: pointer;
}

.btnMini {
	padding: 6px 10px;
	border-radius: 10px;
	line-height: 1;
}

.btn:hover {
	background: rgba(255, 255, 255, 0.7);
}

.btn:active {
	transform: translateY(1px);
}

.sheetWrap {
	display: grid;
	place-items: start center;
	padding: 24px 16px 10px;
	overflow-x: hidden;
}

@media (max-width: 520px) {
	.sheetWrap.zoomed {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

@media (min-width: 521px) {
	.zoomControl {
		display: none;
	}
}

@media (max-width: 520px) {
	.topbar {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding: 16px 14px 8px;
	}
	.btn {
		align-self: flex-start;
	}
	.topRight {
		justify-content: flex-start;
	}
	.range {
		width: 180px;
	}
	.sheetWrap {
		padding: 14px 10px 10px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

.footerNote {
	padding: 8px 18px 18px;
	font-size: 12px;
	letter-spacing: 0.06em;
	color: rgba(42, 36, 28, 0.5);
	user-select: none;
}

.btnLink {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}

.modal {
	position: fixed;
	inset: 0;
	display: none;
	place-items: center;
	z-index: 50;
}

.modal.isOpen {
	display: grid;
}

.modalBackdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.22);
}

.modalCard {
	position: relative;
	width: min(520px, 92vw);
	background: rgba(255, 253, 247, 0.98);
	border: 1px solid rgba(42, 36, 28, 0.14);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
	padding: 14px;
}

.modalTitle {
	letter-spacing: 0.14em;
	font-size: 12px;
	color: var(--muted);
	margin-bottom: 10px;
	user-select: none;
}

.modalText {
	font-size: 13px;
	line-height: 1.45;
	color: rgba(42, 36, 28, 0.72);
	margin-bottom: 12px;
}

.modalActions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.modalSpacer {
	height: 14px;
}

.modalRule {
	height: 1px;
	background: rgba(42, 36, 28, 0.14);
	margin: 6px 0 12px;
}

.modalBottom {
	display: flex;
	justify-content: flex-start;
}

.sheetScale {
	/* The inner .sheet stays true Letter size (816x1056). We scale it to fit small screens
	   without changing the underlying layout (so export matches exactly). */
	--sheetScale: 1;
	width: calc(816px * var(--sheetScale));
	display: block;
}

.sheet {
	position: relative;
	/* Letter paper at ~96dpi: 8.5in = 816px, 11in = 1056px */
	width: 816px;
	min-height: 1056px;
	transform: scale(var(--sheetScale));
	transform-origin: top left;
	background: var(--paper);
	border: 1px solid rgba(42, 36, 28, 0.08);
	border-radius: 0;
	/* Slightly imperfect paper edge */
	clip-path: polygon(
		0.4% 0.7%,
		7% 0.2%,
		20% 0.5%,
		45% 0.2%,
		72% 0.6%,
		92% 0.25%,
		99.6% 0.9%,
		99.3% 18%,
		99.7% 52%,
		99.2% 84%,
		99.5% 99.4%,
		86% 99.7%,
		56% 99.35%,
		23% 99.65%,
		0.65% 99.15%,
		0.25% 77%,
		0.55% 46%,
		0.2% 14%
	);
	box-shadow:
		0 18px 50px rgba(0, 0, 0, 0.18),
		0 2px 0 rgba(0, 0, 0, 0.05);
	overflow: hidden;
}

.sheetShadow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		/* gentle vignetting */
		linear-gradient(180deg, rgba(0,0,0,0.045), rgba(0,0,0,0.0) 42%),
		radial-gradient(900px 420px at 50% 0%, rgba(0,0,0,0.04), transparent 62%),
		/* subtle paper grain / speckle */
		radial-gradient(1.6px 1.6px at 12% 18%, rgba(0,0,0,0.04), transparent 60%),
		radial-gradient(1.6px 1.6px at 62% 33%, rgba(0,0,0,0.032), transparent 60%),
		radial-gradient(1.2px 1.2px at 41% 67%, rgba(0,0,0,0.03), transparent 60%),
		radial-gradient(1.2px 1.2px at 78% 72%, rgba(0,0,0,0.028), transparent 60%),
		/* faint fiber-ish banding (very light) */
		repeating-linear-gradient(0deg, transparent 0px, transparent 34px, rgba(0,0,0,0.008) 35px);
}

.editor {
	position: relative;
	/* Match PDF margins (~0.75in) and fixed 12pt text */
	padding: 72px;
	outline: none;
	line-height: 1.65;
	font-size: 16px;
	--cols: 70;
	font-family: "Special Elite", "Courier Prime", "Courier New", Courier, monospace;
	color: var(--ink);
	/* IMPORTANT: disable soft wrapping so previously typed (including ghost/deleted) text never reflows */
	white-space: pre;
	overflow-wrap: normal;
	user-select: none; /* prevents selection-delete */
}

/* Each fixed-width “typewriter cell” */
.cell {
	display: inline-block;
	width: var(--cellw, calc(100% / var(--cols)));
	height: 1.65em;
	position: relative;
	vertical-align: baseline;
}

.layer {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.layer.ghost {
	color: var(--ghost);
	/* Keep deleted characters in the exact same position (no visual shift). */
	filter: none;
	transform: none;
}

.layer.ink {
	color: var(--ink);
}

/* A minimal caret that follows the insertion point */
.caret {
	display: inline-block;
	position: relative;
	width: 0;
	height: 1.05em;
	vertical-align: baseline;
	pointer-events: none;
}

.caret::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2px;
	background: rgba(42, 36, 28, 0.55);
	/* Draw the caret without affecting inline layout (prevents line-start shifts). */
	transform: translateX(-2px);
	animation: blink 1.1s steps(1) infinite;
}

.editor.exporting .caret {
	display: none;
}

/* Export capture mode (used by JS PDF download) */
body.exporting {
	background: white;
}

body.exporting .topbar,
body.exporting .hint {
	display: none !important;
}

body.exporting .sheet {
	box-shadow: none;
	border: none;
}

@keyframes blink {
	50% { opacity: 0; }
}

.hint {
	position: static;
	text-align: left;
	font-size: 12px;
	letter-spacing: 0.08em;
	color: rgba(42, 36, 28, 0.45);
	user-select: none;
}

/* Print/PDF export */
@media print {
	body { background: white; }
	.topbar, .hint { display: none !important; }
	.sheetWrap { padding: 0; }
	.sheet {
		width: auto;
		min-height: auto;
		border: none;
		border-radius: 0;
		box-shadow: none;
	}
	.sheetShadow { display: none; }
	.editor {
		padding: 0.8in;
		font-size: 12pt;
		box-shadow: none !important;
	}
}