:root {
	color-scheme: light dark;
	--fg: light-dark(#1b1b1b, #e8e6e3);
	--bg: light-dark(#fdfcfa, #161616);
	--muted: light-dark(#6b6b6b, #9a9a9a);
	--line: light-dark(#ddd, #333);
	--accent: light-dark(#2f6f4f, #7cc4a0);
	--right: light-dark(#2f6f4f, #7cc4a0);
	--wrong: light-dark(#b3412e, #f08a77);
	font: 1.125rem/1.55 system-ui, sans-serif;
	color: var(--fg);
	background: var(--bg);
	accent-color: var(--accent);
}

body {
	max-width: 38rem;
	margin: 0 auto;
	padding: 0 1rem 4rem;
}

a { color: var(--accent); }
small, hgroup p, .hint { color: var(--muted); }
:lang(tok) { font-style: normal; font-weight: 600; }
h1, h2 { line-height: 1.2; }
h2 { font-size: 1.1rem; font-weight: normal; color: var(--muted); }

header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-block: 1rem;
	border-bottom: 1px solid var(--line);
	margin-bottom: 1.5rem;

	& > a { text-decoration: none; color: inherit; }
	& nav { display: flex; gap: 1rem; align-items: center; }
	& form { display: contents; }
	& nav button { border: 0; padding: 0; background: none; color: var(--muted); }
}

button, .button, input {
	font: inherit;
	color: inherit;
	padding: .5rem 1rem;
	border: 1px solid var(--line);
	border-radius: .5rem;
	background: var(--bg);
}
button, .button { cursor: pointer; text-decoration: none; display: inline-block; }
button:disabled { cursor: default; opacity: .5; }
.primary { background: var(--accent); border-color: var(--accent); color: var(--bg); }
input { width: 100%; box-sizing: border-box; }
label { display: grid; gap: .5rem; margin-bottom: 1rem; }

progress { width: 100%; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; }
dd { margin: 0; }
blockquote { margin-inline: 0; padding-left: 1rem; border-left: 3px solid var(--line); }

.today { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }

/* The course path winds left and right, like a trail. */
.path {
	list-style: none;
	padding: 0;
	margin-top: 2rem;
	display: grid;
	gap: 1.5rem;
	justify-items: center;
	& li { --x: 0; display: grid; justify-items: center; gap: .25rem; translate: calc(var(--x) * 5rem) 0; text-align: center; }
	& li:nth-child(8n+2), & li:nth-child(8n+4) { --x: .7; }
	& li:nth-child(8n+3) { --x: 1; }
	& li:nth-child(8n+6), & li:nth-child(8n+8) { --x: -.7; }
	& li:nth-child(8n+7) { --x: -1; }
	& small { max-width: 9rem; }
}

/* A node's ring fills with finished lessons (--p); its inside deepens with
   word mastery (--m). */
.node {
	width: 4.5rem;
	aspect-ratio: 1;
	padding: 5px;
	box-sizing: border-box;
	border-radius: 50%;
	display: grid;
	text-decoration: none;
	color: inherit;
	background: conic-gradient(var(--accent) calc(var(--p, 0) * 1%), var(--line) 0);
	& span {
		display: grid;
		place-items: center;
		border-radius: 50%;
		font-size: 1.4rem;
		font-weight: 600;
		background: color-mix(in srgb, var(--accent) calc(var(--m, 0) * .4%), var(--bg));
	}
	&.locked { opacity: .4; }
}
[aria-current=step] .node { outline: 3px solid var(--accent); outline-offset: 4px; }

.lessons { display: flex; gap: .5rem; padding: 0; list-style: none; }

.notes { margin-top: 1.5rem; }

#exercise {
	& .prompt { font-size: 1.5rem; margin-block: .5rem; }
	& form { margin-block: 1rem; }
}

.options { display: grid; gap: .5rem; & button { text-align: left; } }
.tiles { display: flex; flex-wrap: wrap; gap: .5rem; min-height: 2.75rem; }
.picked { border-bottom: 1px solid var(--line); padding-bottom: .5rem; & span { color: var(--muted); } }
.type { display: flex; gap: .5rem; }
.judge { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; & p { flex-basis: 100%; margin: 0; } }

[data-state=right] { border-color: var(--right); opacity: 1; }
[data-state=wrong] { border-color: var(--wrong); text-decoration: line-through; }

.feedback {
	border-left: 4px solid var(--line);
	padding-left: 1rem;
	&[data-result=correct] { border-color: var(--right); }
	&[data-result=wrong] { border-color: var(--wrong); }
	& .answer { font-size: 1.25rem; }
}

.intro h1 { font-size: 3rem; margin: 0; }
.intro .gloss { font-size: 1.25rem; }

.dots { color: var(--accent); letter-spacing: .1em; white-space: nowrap; }
.streak { color: var(--muted); }
.praise { font-size: 1.25rem; color: var(--right); }

.stats {
	display: flex;
	gap: 2rem;
	& div { display: grid; }
	& dt { color: var(--muted); font-size: .9rem; order: 2; }
	& dd { font-size: 1.75rem; font-weight: 600; }
}
details + .button, .summary > .button { margin-top: 1.5rem; }
.levelups { list-style: none; padding: 0; & li { display: flex; justify-content: space-between; max-width: 16rem; } }

@media (prefers-reduced-motion: no-preference) {
	.praise, .streak { display: inline-block; animation: pop .35s ease-out; }
	.feedback[data-result=wrong] { animation: nudge .3s ease-in-out; }
	[aria-current=step] .node { animation: glow 2s ease-in-out infinite alternate; }
	.summary .stats div, .levelups li { animation: rise .4s ease-out backwards; }
	.summary .stats div:nth-child(2), .levelups li:nth-child(2) { animation-delay: .1s; }
	.summary .stats div:nth-child(3), .levelups li:nth-child(3) { animation-delay: .2s; }
	.levelups li:nth-child(n+4) { animation-delay: .3s; }
}
@keyframes pop { from { scale: .5; opacity: 0; } 70% { scale: 1.15; } }
@keyframes nudge { 25% { translate: -4px; } 75% { translate: 4px; } }
@keyframes glow { to { outline-offset: 8px; outline-color: transparent; } }
@keyframes rise { from { translate: 0 .5rem; opacity: 0; } }

.quit { text-align: right; & button { border: 0; background: none; color: var(--muted); } }