:root {
	--bg: #fafafa;
	--surface: #ffffff;
	--ink: #1a1a1a;
	--muted: #8c8c8c;
	--faint: #b8b8b8;
	--line: #e8e8e8;
	--line-strong: #d8d8d8;
	--sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--mono: ui-monospace, "SF Mono", "SFMono-Regular", "JetBrains Mono", "Menlo", monospace;
	--rule: 1.5px solid var(--ink);   /* heavy divider under the input and the reference heading */
	--radius: 2px;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--sans);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
}

.wrap {
	max-width: 760px;
	margin: 0 auto;
	padding: clamp(40px, 8vw, 96px) clamp(20px, 5vw, 40px) 120px;
}

/* Small mono labels: field label, section heading, copy button */
.field-label, .ref-head h2, .copy {
	font-family: var(--mono);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--muted);
}

/* ---------- Header ---------- */
header {
	margin-bottom: clamp(40px, 6vw, 64px);
}

h1 {
	font-size: clamp(34px, 7vw, 54px);
	line-height: 1.04;
	letter-spacing: -0.02em;
	font-weight: 600;
	margin: 0 0 16px;
}

.lede {
	font-size: clamp(15px, 2.2vw, 17px);
	color: var(--muted);
	max-width: 46ch;
	margin: 0;
}

/* ---------- Speller ---------- */
.speller {
	margin-bottom: clamp(48px, 7vw, 72px);
}

.field-label {
	display: block;
	font-size: 11px;
	margin-bottom: 12px;
}

#word {
	width: 100%;
	border: none;
	border-bottom: var(--rule);
	background: transparent;
	font-family: var(--sans);
	font-size: clamp(24px, 5vw, 34px);
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--ink);
	padding: 4px 0 12px;
	outline: none;
}

#word::placeholder { color: var(--faint); font-weight: 400; }

.output { margin-top: 28px; min-height: 24px; }

.out-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	align-items: flex-start;
}

.token {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	border: 1px solid var(--line-strong);
	background: var(--surface);
	border-radius: var(--radius);
	padding: 8px 12px;
	animation: pop 260ms cubic-bezier(.2,.7,.3,1) both;
}

.token .src {
	font-family: var(--mono);
	font-size: 11px;
	text-transform: uppercase;
	color: var(--muted);
}

.token .code {
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.01em;
}

/* forces a line break in the wrapping token list (a typed space) */
.gap {
	flex-basis: 100%;
	height: 0;
}

.passthru {
	align-self: center;
	font-family: var(--mono);
	font-size: 15px;
	color: var(--faint);
	padding: 0 2px;
}

.hint {
	font-size: 14px;
	color: var(--faint);
}

.copy {
	margin-top: 20px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 11px;
	letter-spacing: 0.14em;
	transition: color 140ms ease;
}

.copy:hover {
	color: var(--ink);
}

.copy svg {
	width: 13px;
	height: 13px;
}

.copy[hidden] {
	display: none;
}

@keyframes pop {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ---------- Reference ---------- */
.ref-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	border-bottom: var(--rule);
	padding-bottom: 12px;
	margin-bottom: 4px;
}

.ref-head h2 {
	font-size: 13px;
	font-weight: 500;
	color: var(--ink);
	margin: 0;
}

.ref-head .count {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--muted);
}

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	column-gap: 48px;
}

.row {
	display: grid;
	grid-template-columns: 28px 1fr auto;
	align-items: baseline;
	gap: 16px;
	padding: 15px 0;
	border-bottom: 1px solid var(--line);
}

.row .letter {
	font-size: 17px;
	font-weight: 600;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.row .word {
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.01em;
}

.row .pron {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--faint);
	text-align: right;
	white-space: nowrap;
}

footer {
	margin-top: 56px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	color: var(--faint);
	line-height: 1.7;
}

@media (max-width: 520px) {
	.row {
		grid-template-columns: 24px 1fr;
	}

	.row .pron {
		display: none;
	}
}