:root {
	--bg: #F6F7F9;
	--ink: #12161C;
	--muted: #566070;
	--line: #DDE1E8;
	--card: #fff;
	--tape: #FFD23F;
	--top: #fff;
	--left: #DCE1E8;
	--right: #C6CDD8;
	--edge: rgba(18, 22, 28, .28);
	color-scheme: light dark;
	box-sizing: border-box;
	padding-top: env(safe-area-inset-top, 0px);
	padding-bottom: env(safe-area-inset-bottom, 0px)
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #0D1015;
		--ink: #EDEFF3;
		--muted: #9BA3B1;
		--line: #232A35;
		--card: #151A22;
		--top: #1F2833;
		--left: #171E28;
		--right: #11161E;
		--edge: rgba(255, 255, 255, .2)
	}
}

:root[data-theme="dark"] {
	--bg: #0D1015;
	--ink: #EDEFF3;
	--muted: #9BA3B1;
	--line: #232A35;
	--card: #151A22;
	--top: #1F2833;
	--left: #171E28;
	--right: #11161E;
	--edge: rgba(255, 255, 255, .2)
}

*, *::before, *::after {
	box-sizing: inherit
}

html {
	-webkit-tap-highlight-color: transparent;
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: env(safe-area-inset-top, 0px);
	scroll-behavior: smooth
}

@media (pointer: fine) {
	html {
		overscroll-behavior: none
	}
}

[id] {
	scroll-margin-top: 5rem
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font: 1.0625rem/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-optical-sizing: auto
}

.wrap {
	max-width: 1080px;
	margin: 0 auto;
	padding-inline: max(1.25rem, env(safe-area-inset-left, 0px)) max(1.25rem, env(safe-area-inset-right, 0px))
}

a {
	color: inherit;
	text-underline-offset: .2em
}

button, a, input {
	touch-action: manipulation
}

button, .btn {
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none
}

:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: 3px;
	border-radius: 6px
}

.skip {
	position: absolute;
	left: 1rem;
	top: -4rem;
	background: var(--tape);
	color: #12161C;
	padding: .6rem 1rem;
	border-radius: 8px;
	font-weight: 600;
	z-index: 9
}

.skip:focus {
	top: max(1rem, env(safe-area-inset-top, 0px))
}

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

header .wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 1rem
}

.logo {
	font-weight: 720;
	font-size: 1.125rem;
	letter-spacing: -.015em;
	text-decoration: none
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 1.35rem;
	border: 0;
	border-radius: 12px;
	background: var(--tape);
	color: #12161C;
	font: 600 1rem/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	text-decoration: none;
	cursor: pointer;
	transition: transform 100ms ease-out, background-color 100ms, border-color 100ms
}

.btn:active {
	transform: scale(.97)
}

.btn[disabled] {
	opacity: .6;
	cursor: progress
}

.btn.ghost {
	background: transparent;
	color: var(--ink);
	border: 1.5px solid var(--line);
	min-height: 40px;
	padding: 0 1rem;
	font-size: .9375rem
}

.btn.ink {
	background: #12161C;
	color: var(--tape)
}

@media (hover: hover) and (pointer: fine) {
	.btn:hover {
		background-color: #FFE073
	}

	.btn.ghost:hover {
		background: transparent;
		border-color: var(--ink)
	}

	.btn.ink:hover {
		background-color: #2A313C
	}

	a:not(.btn):hover {
		text-decoration-thickness: 2px
	}
}

.hero {
	min-height: 100svh;
	display: grid;
	align-content: start;
	gap: 2rem;
	padding-block: 1.5rem 4rem
}

@media (min-width: 900px) {
	.hero {
		grid-template-columns:1.05fr .95fr;
		align-items: center;
		align-content: center;
		gap: 3rem
	}
}

h1 {
	font-size: clamp(2.2rem, 6vw, 3.6rem);
	line-height: 1.04;
	letter-spacing: -.035em;
	margin: 0 0 1.1rem;
	font-weight: 720;
	text-wrap: balance
}

h2 {
	font-size: clamp(1.55rem, 3.4vw, 2.1rem);
	line-height: 1.12;
	letter-spacing: -.025em;
	margin: 0 0 1rem;
	font-weight: 700;
	text-wrap: balance
}

h3 {
	font-size: 1.1875rem;
	line-height: 1.25;
	letter-spacing: -.01em;
	margin: 0 0 .35rem
}

p {
	margin: 0 0 1rem;
	max-width: 62ch;
	text-wrap: pretty
}

.lead {
	font-size: 1.25rem;
	line-height: 1.45;
	color: var(--muted);
	max-width: 32em
}

form {
	display: flex;
	flex-wrap: wrap;
	gap: .625rem;
	margin-top: 1.75rem;
	max-width: 30rem
}

input[type=email] {
	flex: 1 1 14rem;
	min-height: 48px;
	padding: 0 1rem;
	border: 1.5px solid var(--line);
	border-radius: 12px;
	background: var(--card);
	color: var(--ink);
	font: inherit;
	font-size: 16px
}

input[aria-invalid=true] {
	border-color: #D33
}

input::placeholder {
	color: var(--muted)
}

.note {
	font-size: .9375rem;
	color: var(--muted);
	margin: .75rem 0 0;
	min-height: 3em
}

.art {
	display: block;
	width: 100%;
	max-width: 440px;
	margin-inline: auto;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: inherit
}

.art svg {
	width: 100%;
	height: auto;
	display: block;
	overflow: visible
}

.art text {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif
}

.slab {
	transform-box: fill-box;
	transform-origin: center
}

.t {
	fill: var(--top)
}

.l {
	fill: var(--left)
}

.r {
	fill: var(--right)
}

.t, .l, .r {
	stroke: var(--edge);
	stroke-width: 1.25;
	stroke-linejoin: round
}

.lab {
	font-size: 16px;
	font-weight: 700;
	fill: var(--ink)
}

section {
	padding-block: 4.5rem;
	border-top: 1px solid var(--line)
}

.intro {
	display: grid;
	gap: 1rem 3rem
}

@media (min-width: 860px) {
	.intro {
		grid-template-columns:1fr 1.4fr
	}
}

dl {
	margin: 0
}

.row {
	display: grid;
	gap: .25rem 2rem;
	padding-block: 1.25rem;
	border-top: 1px solid var(--line)
}

.row:last-child {
	border-bottom: 1px solid var(--line)
}

@media (min-width: 640px) {
	.row {
		grid-template-columns:12rem 1fr
	}
}

dt {
	font-weight: 700;
	font-size: 1.1875rem;
	letter-spacing: -.01em
}

dd {
	margin: 0;
	color: var(--muted)
}

ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: s;
	display: grid;
	gap: 1.5rem
}

ol li {
	counter-increment: s;
	display: grid;
	grid-template-columns:2.25rem 1fr;
	gap: .5rem
}

ol li::before {
	content: counter(s);
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.3
}

ol p {
	margin: 0;
	color: var(--muted)
}

.band {
	background: var(--tape);
	color: #12161C;
	border-top: 0
}

.band p {
	color: #2A313C
}

footer {
	padding-block: 2rem 2.5rem;
	color: var(--muted);
	font-size: .9375rem
}

footer .wrap {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 2rem;
	justify-content: space-between
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto
	}

	.btn {
		transition: none
	}
}

dialog {
	margin: auto;
	width: 100%;
	max-width: min(25rem, calc(100vw - 2.5rem));
	padding: 1.75rem;
	border: 1px solid var(--line);
	border-radius: 20px;
	background: var(--card);
	color: var(--ink);
	overscroll-behavior: contain;
	opacity: 0;
	transform: translateY(12px) scale(.98);
	transition: opacity 200ms ease-out, transform 320ms cubic-bezier(.2, .9, .3, 1), overlay 320ms allow-discrete, display 320ms allow-discrete
}

dialog[open] {
	opacity: 1;
	transform: none
}

@starting-style {
	dialog[open] {
		opacity: 0;
		transform: translateY(12px) scale(.98)
	}
}

dialog::backdrop {
	background: rgba(13, 16, 21, .45);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	opacity: 0;
	transition: opacity 200ms ease-out, overlay 320ms allow-discrete, display 320ms allow-discrete
}

dialog[open]::backdrop {
	opacity: 1
}

@starting-style {
	dialog[open]::backdrop {
		opacity: 0
	}
}

@media (prefers-reduced-transparency: reduce) {
	dialog::backdrop {
		background: rgba(13, 16, 21, .75);
		backdrop-filter: none;
		-webkit-backdrop-filter: none
	}
}

@media (prefers-reduced-motion: reduce) {
	dialog, dialog::backdrop {
		transition: none
	}
}

@media (max-width: 560px) {
	dialog {
		margin: auto 0 0;
		max-width: 100%;
		border-radius: 20px 20px 0 0;
		border-bottom: 0;
		padding-bottom: calc(1.75rem + env(safe-area-inset-bottom, 0px))
	}
}

body:has(dialog[open]) {
	overflow: hidden
}

dialog h2 {
	font-size: 1.75rem;
	margin: 0 0 .6rem
}

dialog p {
	color: var(--muted);
	margin: 0 0 .75rem
}

dialog strong {
	color: var(--ink);
	font-weight: 600;
	overflow-wrap: anywhere
}

dialog form {
	display: grid;
	gap: .625rem;
	margin-top: 1.5rem;
	max-width: none
}

dialog .btn.ghost {
	min-height: 48px;
	font-size: 1rem
}

dialog .btn {
	width: 100%
}

.glyph {
	display: block;
	width: 84px;
	height: auto;
	margin: 0 0 1.25rem;
	overflow: visible
}

.gs {
	transform-box: fill-box;
	transform-origin: center
}

dialog:not([data-k="ok"]) .gs:nth-of-type(1) {
	transform: translateY(-76px)
}

dialog:not([data-k="ok"]) .gs:nth-of-type(2) {
	transform: translateY(2px)
}

dialog:not([data-k="ok"]) .gs:nth-of-type(3) {
	transform: translateY(80px)
}

dialog:not([data-k="ok"]) .grod {
	opacity: 0
}

.fine {
	font-size: .9375rem;
	color: var(--muted);
	margin: 0
}

.flinks {
	display: flex;
	flex-wrap: wrap;
	gap: .125rem 1.5rem
}

.flinks a, .linkbtn {
	padding: .5rem 0
}

.linkbtn {
	background: none;
	border: 0;
	font: inherit;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: .2em;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none
}

@media (hover: hover) and (pointer: fine) {
	.linkbtn:hover {
		text-decoration-thickness: 2px
	}
}