:root {
	color-scheme: light;
	--ink: #211f1c;
	--muted: #68635d;
	--quiet: #8a847d;
	--paper: #fbfaf8;
	--surface: #ffffff;
	--soft: #f2f0eb;
	--line: #dedbd5;
	--line-strong: #c9c4bc;
	--accent: #b74f2f;
	--accent-dark: #923b23;
	--success: #42705b;
	--error: #9c352d;
	--serif: Georgia, "Times New Roman", Times, serif;
	--sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
	font-family: var(--sans);
	font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); }

body {
	min-height: 100vh;
	margin: 0;
	color: var(--ink);
	background:
		radial-gradient(circle at 82% 18%, rgb(183 79 47 / 3.5%), transparent 29rem),
		var(--paper);
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
}

button,
input,
select { font: inherit; }

button,
label { -webkit-tap-highlight-color: transparent; }

button { cursor: pointer; }
button:disabled { cursor: wait; opacity: 0.55; }
[hidden] { display: none !important; }

button:focus-visible,
input:focus-visible,
select:focus-visible,
label:focus-within {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: min(1104px, calc(100% - 48px));
	min-height: 62px;
	margin-inline: auto;
	border-bottom: 1px solid #ebe8e3;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.brand-mark {
	display: grid;
	grid-template-columns: repeat(2, 7px);
	gap: 2px;
	padding: 6px;
	border-radius: 7px;
	background: var(--accent);
}

.brand-mark span {
	width: 7px;
	height: 7px;
	border-radius: 1px;
	background: #fffdf8;
}

.brand-mark span:nth-child(2) { background: #e4d87b; }
.brand-mark span:nth-child(3) { background: #b9c5d1; }

.brand-copy {
	display: inline-flex;
	align-items: baseline;
	gap: 9px;
}

.brand-copy strong {
	font-family: var(--serif);
	font-size: 1.17rem;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.brand-copy small {
	color: var(--quiet);
	font-family: var(--mono);
	font-size: 0.57rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.language-label {
	color: var(--quiet);
	font-family: var(--mono);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

main {
	width: min(760px, calc(100% - 48px));
	margin-inline: auto;
	padding: clamp(54px, 7vw, 80px) 0 64px;
}

.hero { max-width: 700px; margin-bottom: 36px; }

.eyebrow,
.step,
.error-kicker {
	margin: 0 0 14px;
	color: var(--accent);
	font-size: 0.71rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

h1,
h2,
p { text-wrap: pretty; }

h1,
.card h2 {
	font-family: var(--serif);
	font-weight: 400;
	letter-spacing: -0.035em;
}

h1 {
	margin: 0;
	font-size: clamp(3.1rem, 8vw, 4.55rem);
	line-height: 0.98;
}

.lede {
	max-width: 650px;
	margin: 25px 0 0;
	color: var(--muted);
	font-size: 1.04rem;
	line-height: 1.62;
}

.card {
	margin-top: 16px;
	padding: clamp(22px, 4vw, 32px);
	border: 1px solid var(--line);
	border-radius: 11px;
	background: rgb(255 255 255 / 91%);
	box-shadow: 0 16px 42px rgb(46 38 31 / 7%);
}

.card h2 {
	margin: 0;
	font-size: clamp(1.7rem, 5vw, 2.35rem);
	line-height: 1.08;
}

.card h3 { margin: 0; font-size: 0.96rem; }

.card p:not(.step, .field-error, .input-note, .device-pill, .error-kicker) {
	color: var(--muted);
	line-height: 1.58;
}

.connect-card,
.success-card,
.notice-card,
.progress-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 26px;
}

.connect-card button { flex: 0 0 auto; }

.device-pill {
	display: inline-block;
	margin: 12px 0 0;
	padding: 7px 10px;
	border: 1px solid var(--line);
	border-radius: 5px;
	background: var(--soft);
	font-family: var(--mono);
	font-size: 0.72rem;
}

.device-pill strong { letter-spacing: 0.08em; }

label {
	display: block;
	margin: 19px 0 6px;
	color: var(--ink);
	font-size: 0.76rem;
	font-weight: 700;
}

input,
select {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--line-strong);
	border-radius: 6px;
	background: white;
	color: var(--ink);
}

.pin-entry {
	position: relative;
	width: min(100%, 430px);
	cursor: text;
}

.pin-cells {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: clamp(4px, 1.2vw, 8px);
	pointer-events: none;
}

.pin-cell {
	display: grid;
	place-items: center;
	height: clamp(44px, 11vw, 56px);
	border: 1px solid var(--line-strong);
	border-radius: 7px;
	background: white;
	font-family: var(--mono);
	font-size: clamp(1.05rem, 4vw, 1.3rem);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.pin-cell:nth-child(5) { margin-left: 4px; }
.pin-cell.is-filled { background: var(--soft); }
.pin-cell.is-active {
	border-color: var(--accent);
	box-shadow: 0 0 0 2px rgb(183 79 47 / 18%);
}

.pin-entry > input {
	position: absolute;
	z-index: 1;
	inset: 0;
	height: 100%;
	min-height: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: transparent;
	caret-color: transparent;
	opacity: 0;
	cursor: text;
}

.pin-entry > input:focus-visible { outline: 0; }

.site-header select {
	width: auto;
	min-height: 36px;
	padding: 6px 32px 6px 9px;
	font-size: 0.78rem;
}

button {
	min-height: 43px;
	padding: 9px 17px;
	border: 1px solid var(--line-strong);
	border-radius: 7px;
	font-size: 0.82rem;
	font-weight: 700;
}

.primary { border-color: var(--accent); background: var(--accent); color: white; }
.primary:hover { border-color: var(--accent-dark); background: var(--accent-dark); }
.secondary { border-color: var(--line-strong); background: var(--soft); color: var(--ink); }
.quiet { background: white; color: var(--ink); }

.text-button {
	min-height: auto;
	margin-top: 14px;
	padding: 4px 0;
	border: 0;
	background: transparent;
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 4px;
}

form > .primary { margin-top: 20px; }

.form-actions,
.inline-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 22px;
}

.form-actions { justify-content: flex-end; }
.inline-actions select { flex: 1 1 auto; }
.inline-actions button { flex: 0 0 auto; }
.field-error { margin: 8px 0 0; color: var(--error); font-size: 0.82rem; }
.input-note { margin: 6px 0 0; color: var(--quiet); font-size: 0.74rem; }

.section-heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.section-heading p { margin-bottom: 0; }
.network-list { display: grid; gap: 8px; margin-top: 22px; }

.network {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 13px;
	width: 100%;
	min-height: 54px;
	padding: 12px;
	border: 1px solid var(--line);
	border-radius: 7px;
	background: white;
	color: var(--ink);
	text-align: left;
}

.network:hover { border-color: var(--line-strong); background: var(--soft); }
.network[aria-disabled="true"] { cursor: not-allowed; color: var(--quiet); opacity: 0.65; }
.network-name { overflow-wrap: anywhere; font-weight: 700; }
.network-meta { color: var(--quiet); font-family: var(--mono); font-size: 0.65rem; }
.signal {
	display: grid;
	place-items: center;
	width: 28px;
	height: 24px;
	color: var(--ink);
}

.signal-icon {
	display: block;
	width: 24px;
	height: 20px;
}

.signal-wave {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	opacity: 0.14;
}

.signal-dot { fill: currentColor; }
.signal-icon--weak .signal-wave--inner,
.signal-icon--medium .signal-wave--inner,
.signal-icon--medium .signal-wave--middle,
.signal-icon--strong .signal-wave { opacity: 1; }
.empty-networks { padding: 16px; border-radius: 7px; background: var(--soft); color: var(--muted); }

.region-box {
	margin-top: 24px;
	padding: 16px;
	border-left: 2px solid var(--accent);
	background: var(--soft);
}

.region-box p { margin: 7px 0; font-size: 0.84rem; }
.region-box label { margin-top: 13px; }

.spinner {
	flex: 0 0 43px;
	width: 43px;
	height: 43px;
	border: 4px solid var(--line);
	border-top-color: var(--accent);
	border-radius: 50%;
	animation: spin 0.9s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; border-right-color: var(--accent); } }

@media (prefers-reduced-motion: reduce) { .pin-cell { transition: none; } }

.display-mark,
.success-mark {
	display: grid;
	place-items: center;
	flex: 0 0 54px;
	width: 54px;
	height: 54px;
	border-radius: 10px;
	background: var(--accent);
	color: white;
	font-size: 1.45rem;
}

.error-card { border-color: rgb(156 53 45 / 48%); }
.error-kicker { color: var(--error); }
.connection-stream {
	display: grid;
	gap: 7px;
	max-height: 190px;
	padding: 0;
	margin: 18px 0 0;
	overflow: auto;
	list-style: none;
	font-family: var(--mono);
	font-size: 0.68rem;
}
.connection-stream[hidden] { display: none; }
.connection-stream li { color: var(--quiet); }
.connection-stream li::before { content: "○"; display: inline-block; width: 20px; color: var(--quiet); }
.connection-stream li[data-state="done"]::before { content: "✓"; color: var(--success); }
.connection-stream li[data-state="active"] { color: var(--ink); }
.connection-stream li[data-state="active"]::before { content: "→"; color: var(--accent); }
.connection-stream li[data-state="error"] { color: var(--error); }
.connection-stream li[data-state="error"]::before { content: "×"; color: var(--error); }
.success-card { border-color: rgb(66 112 91 / 45%); background: #f2f7f3; }
.success-mark { background: var(--success); }
.success-next { padding-top: 14px; margin-top: 18px; border-top: 1px solid rgb(66 112 91 / 24%); color: var(--quiet); }

footer {
	padding: 18px 24px 38px;
	color: var(--quiet);
	text-align: center;
	font-family: var(--mono);
	font-size: 0.62rem;
}

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

@media (max-width: 620px) {
	.site-header,
	main { width: min(100% - 28px, 760px); }
	.brand-copy small,
	.language-label { display: none; }
	.connect-card,
	.success-card,
	.notice-card,
	.progress-card { align-items: flex-start; flex-direction: column; }
	.connect-card button { width: 100%; }
	.section-heading { display: block; }
	.section-heading .quiet { margin-top: 11px; }
	.inline-actions { align-items: stretch; flex-direction: column; }
	.inline-actions button { width: 100%; }
	.form-actions > * { flex: 1 1 50%; }
}