:root {
	--nxa-bg: #070d16;
	--nxa-panel: #0d1b2e;
	--nxa-panel-2: #132539;
	--nxa-line: #24384f;
	--nxa-gold: #d4a94f;
	--nxa-ink: #f3efe6;
	--nxa-dim: #9fb0c4;
	--nxa-teal: #33b0a8;
	--nxa-red: #e0736b;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
}

.nxa-body {
	background:
		radial-gradient(1100px 620px at 12% -10%, rgba(51, 176, 168, .10), transparent 60%),
		radial-gradient(900px 560px at 92% 0%, rgba(212, 169, 79, .10), transparent 62%),
		var(--nxa-bg);
	background-attachment: fixed;
	color: var(--nxa-ink);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
}

.nxa-shell {
	max-width: 760px;
	margin: 0 auto;
	padding: 28px 16px 64px;
}

.nxa-panel {
	background: linear-gradient(160deg, rgba(19, 37, 57, .92), rgba(13, 27, 46, .92));
	border: 1px solid var(--nxa-line);
	border-radius: 16px;
	padding: 30px 28px;
}

.nxa-brand {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	color: var(--nxa-gold);
	letter-spacing: .28em;
	font-size: 12px;
	margin-bottom: 18px;
}

.nxa-brand-sm {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	color: var(--nxa-gold);
	letter-spacing: .22em;
	font-size: 10px;
	white-space: nowrap;
}

.nxa-panel h1 {
	font-size: 26px;
	line-height: 1.25;
	margin: 0 0 8px;
	font-weight: 600;
}

.nxa-lead {
	color: var(--nxa-dim);
	margin: 0 0 20px;
}

.nxa-fine {
	color: var(--nxa-dim);
	font-size: 13px;
}

.nxa-center {
	text-align: center;
}

.nxa-err {
	background: rgba(224, 115, 107, .1);
	border: 1px solid rgba(224, 115, 107, .55);
	color: #f6d7d4;
	border-radius: 10px;
	padding: 12px 15px;
	font-size: 14px;
	margin: 0 0 18px;
}

.nxa-f label {
	display: block;
	color: var(--nxa-dim);
	font-size: 12px;
	letter-spacing: .5px;
	text-transform: uppercase;
	margin: 0 0 8px;
}

.nxa-f input[type="text"],
.nxa-f input[type="password"],
.nxa-f input[type="email"],
.nxa-f input[type="tel"],
.nxa-f input[type="number"],
.nxa-f select,
.nxa-f textarea {
	width: 100%;
	background: rgba(7, 13, 22, .8) !important;
	border: 1px solid var(--nxa-line) !important;
	border-radius: 10px;
	color: var(--nxa-ink) !important;
	color-scheme: dark;
	padding: 15px 16px;
	font-size: 18px;
	font-family: inherit;
	line-height: 1.5;
}

#nxa-code {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	letter-spacing: .16em;
	text-transform: uppercase;
	text-align: center;
	font-size: 22px;
}

.nxa-f input:focus,
.nxa-f select:focus,
.nxa-f textarea:focus {
	outline: none;
	border-color: var(--nxa-gold);
	box-shadow: 0 0 0 3px rgba(212, 169, 79, .18);
}

.nxa-go {
	display: block;
	width: 100%;
	margin-top: 18px;
	background: var(--nxa-gold);
	color: #10243e;
	border: 0;
	border-radius: 10px;
	padding: 16px 20px;
	font-size: 16px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
}

.nxa-go:hover {
	background: #e3ba62;
}

.nxa-quit {
	display: block;
	width: 100%;
	margin-top: 14px;
	background: transparent;
	border: 1px solid var(--nxa-line);
	color: var(--nxa-dim);
	border-radius: 10px;
	padding: 12px 18px;
	font-size: 14px;
	font-family: inherit;
	cursor: pointer;
}

.nxa-quit:hover {
	border-color: var(--nxa-red);
	color: #f6d7d4;
}

.nxa-facts {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 22px;
}

.nxa-facts div {
	flex: 1 1 100px;
	background: rgba(7, 13, 22, .55);
	border: 1px solid var(--nxa-line);
	border-radius: 12px;
	padding: 14px 16px;
	color: var(--nxa-dim);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .5px;
}

.nxa-facts span {
	display: block;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 28px;
	color: var(--nxa-gold);
	text-transform: none;
	letter-spacing: 0;
}

.nxa-rules {
	margin: 0 0 24px;
	padding: 0 0 0 20px;
	color: #c8d4e2;
	font-size: 15px;
}

.nxa-rules li {
	margin-bottom: 9px;
}

/* ---- question screen ---- */

.nxa-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	border-bottom: 1px solid var(--nxa-line);
	padding-bottom: 12px;
	margin-bottom: 16px;
}

.nxa-bar-left {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
	overflow: hidden;
}

.nxa-clock {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 19px;
	color: var(--nxa-gold);
	background: rgba(212, 169, 79, .1);
	border: 1px solid rgba(212, 169, 79, .4);
	border-radius: 999px;
	padding: 5px 16px;
	white-space: nowrap;
}

.nxa-clock.nxa-low {
	color: #ffd2cd;
	background: rgba(224, 115, 107, .14);
	border-color: rgba(224, 115, 107, .6);
}

.nxa-progress {
	height: 4px;
	background: rgba(36, 56, 79, .8);
	border-radius: 4px;
	overflow: hidden;
}

.nxa-progress i {
	display: block;
	height: 100%;
	background: var(--nxa-gold);
	transition: width .3s ease;
}

.nxa-count {
	color: var(--nxa-dim);
	font-size: 13px;
	letter-spacing: .4px;
	margin: 10px 0 14px;
}

.nxa-panel-q {
	padding: 26px 24px;
}

.nxa-qtext {
	font-size: 19px;
	line-height: 1.6;
	margin: 0 0 22px;
}

.nxa-choices {
	display: grid;
	gap: 10px;
}

.nxa-choice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: rgba(7, 13, 22, .55);
	border: 1px solid var(--nxa-line);
	border-radius: 12px;
	padding: 15px 16px;
	cursor: pointer;
	text-transform: none !important;
	letter-spacing: 0 !important;
	color: #dbe4ef !important;
	font-size: 15px !important;
	line-height: 1.5;
	margin: 0 !important;
}

.nxa-choice input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.nxa-ck {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	color: var(--nxa-gold);
	border: 1px solid rgba(212, 169, 79, .45);
	border-radius: 7px;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 28px;
	font-size: 13px;
}

.nxa-choice:hover {
	border-color: rgba(212, 169, 79, .5);
}

.nxa-choice.nxa-on {
	border-color: var(--nxa-gold);
	background: rgba(212, 169, 79, .1);
}

.nxa-choice.nxa-on .nxa-ck {
	background: var(--nxa-gold);
	color: #10243e;
}

.nxa-actions {
	margin-top: 22px;
}

/* ---- thank you ---- */

.nxa-panel-done {
	text-align: center;
}

.nxa-tick {
	width: 62px;
	height: 62px;
	margin: 6px auto 18px;
	border-radius: 50%;
	border: 1px solid rgba(51, 176, 168, .6);
	background: rgba(51, 176, 168, .12);
	color: var(--nxa-teal);
	font-size: 28px;
	line-height: 60px;
}

/* space between the letter and the wording, on every screen */
.nxa-ck {
	margin-right: 14px;
}

.nxa-ct {
	display: block;
	flex: 1 1 auto;
	padding-left: 2px;
}

/* dropdown lists must be readable, not dark text on dark */
select,
.nxa-f select,
.nxa-f-grid select {
	color-scheme: dark;
}

select option {
	background: #132539;
	color: #f3efe6;
}

/* a picture that belongs to a question */
.nxa-qpic {
	margin: 0 0 20px;
}

.nxa-qpic img {
	display: block;
	max-width: 100%;
	height: auto;
	border: 1px solid var(--nxa-line);
	border-radius: 12px;
	background: rgba(7, 13, 22, .6);
}

/* ---- welcome screen: benefits, disclaimer, acceptance ---- */

.nxa-h2 {
	color: var(--nxa-gold);
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 600;
	margin: 30px 0 14px;
}

.nxa-benefits {
	display: grid;
	gap: 12px;
}

.nxa-benefit {
	background: rgba(7, 13, 22, .55);
	border: 1px solid var(--nxa-line);
	border-left: 2px solid rgba(212, 169, 79, .7);
	border-radius: 10px;
	padding: 14px 16px;
}

.nxa-benefit b {
	display: block;
	color: var(--nxa-ink);
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 5px;
}

.nxa-benefit span {
	display: block;
	color: #c8d4e2;
	font-size: 14px;
	line-height: 1.6;
}

.nxa-legal {
	border: 1px solid var(--nxa-line);
	border-radius: 10px;
	padding: 16px 18px;
	background: rgba(7, 13, 22, .45);
}

.nxa-legal p {
	color: #c2cedd;
	font-size: 13.5px;
	line-height: 1.65;
	margin: 0 0 11px;
}

.nxa-legal p:last-child {
	margin-bottom: 0;
}

.nxa-f .nxa-accept,
.nxa-accept {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin: 18px 0 0;
	padding: 13px 15px;
	background: rgba(212, 169, 79, .07);
	border: 1px solid rgba(212, 169, 79, .4);
	border-radius: 10px;
	cursor: pointer;
	text-transform: none;
	letter-spacing: 0;
	color: var(--nxa-ink);
	font-size: 15px;
}

.nxa-accept input {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	margin: 1px 0 0;
	accent-color: var(--nxa-gold);
}

@media (max-width: 640px) {
	.nxa-accept input {
		width: 22px;
		height: 22px;
		flex: 0 0 22px;
	}
}

/* The option label sits inside .nxa-f, whose label rule would otherwise make
   it a block and drop the wording below the letter. */
.nxa-f .nxa-choice,
.nxa-choice {
	display: flex !important;
	align-items: flex-start;
}

/* ================= the page on a wide screen ================= */

.nxa-top {
	border-bottom: 1px solid var(--nxa-line);
	background: rgba(7, 13, 22, .5);
}

.nxa-top-in {
	max-width: 1180px;
	margin: 0 auto;
	padding: 16px 24px;
	display: flex;
	align-items: baseline;
	gap: 18px;
	flex-wrap: wrap;
}

.nxa-top .nxa-brand {
	margin: 0;
}

.nxa-top-note {
	color: var(--nxa-dim);
	font-size: 13px;
}

.nxa-h1 {
	font-size: 30px;
	line-height: 1.2;
	margin: 0 0 12px;
	font-weight: 600;
}

.nxa-h2-first {
	margin-top: 0;
}

.nxa-shell {
	max-width: 760px;
	padding: 34px 24px 72px;
}

/* the landing page: what it is on the left, the one action on the right */
.nxa-lay {
	max-width: 1180px;
}

.nxa-panel-enter {
	padding: 26px 24px;
}

@media (min-width: 980px) {
	.nxa-lay {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 380px;
		gap: 40px;
		align-items: start;
	}

	.nxa-side {
		position: sticky;
		top: 28px;
	}

	.nxa-benefits-two {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* the welcome and the question screens use the width too */
@media (min-width: 980px) {
	.nxa-shell-wide {
		max-width: 1040px;
	}

	.nxa-shell-wide .nxa-panel {
		padding: 38px 40px;
	}

	.nxa-legal-two {
		column-count: 2;
		column-gap: 34px;
	}

	.nxa-legal-two p {
		break-inside: avoid;
	}

	.nxa-panel-q {
		padding: 34px 40px;
	}

	.nxa-qtext {
		font-size: 21px;
	}

	.nxa-choice {
		font-size: 16px !important;
		padding: 17px 20px;
	}
}

@media (min-width: 1280px) {
	.nxa-shell-wide,
	.nxa-shell-q {
		max-width: 1120px;
	}
}

/* the question screen keeps the clock and the paper on one width */
.nxa-shell-q {
	max-width: 900px;
}

/* the clock lives in the top bar on the question screen */
.nxa-top-q .nxa-top-in {
	align-items: center;
}

.nxa-top-q .nxa-clock {
	margin-left: auto;
}

.nxa-facts-stack {
	display: grid;
	gap: 10px;
	margin-bottom: 18px;
}

.nxa-facts-stack div {
	flex: none;
}

.nxa-rules-tight {
	margin: 0;
	font-size: 14px;
}

.nxa-panel-aside {
	padding: 22px 22px;
}

@media (min-width: 980px) {
	.nxa-lay-q {
		grid-template-columns: minmax(0, 1fr) 320px;
	}

	.nxa-lay-q .nxa-side {
		top: 24px;
	}
}

@media (max-width: 979px) {
	/* On a phone the reminders sit under the paper, out of the way. */
	.nxa-panel-aside {
		margin-top: 18px;
	}
}