/*
 * DNA 3D Model: stage, masthead, panels, controls, quiz, labels.
 *
 * Same dark navy family as Fossils Near You (tokens, Fraunces display serif over
 * the system sans, frosted glass panels) with the control language of the
 * Regions of Italy map: 42px pill controls, uppercase 11px kicker labels, a
 * sliding segmented thumb, option cards that lift on hover, a snap-point bottom
 * sheet on phones.
 *
 * Layout contract (CONTRACT.md): main.dnm-stage is exactly one viewport minus
 * the masthead. Desktop: a 360px glass panel on the left, a 340px tabbed panel
 * on the right, the model centred between them. Under 900px both panels merge
 * into one bottom sheet (js builds .dnm-sheet and moves them in) with peek,
 * half and full snap points. Every box that moves is sized from CSS variables
 * so nothing reflows when the canvas, the font or an ad bar arrives.
 *
 * Motion: every duration is a variable. The reduced-motion block at the bottom
 * collapses them, so there is one switch rather than one override per rule.
 */

:root {
	--dnm-a: #2ec27e;
	--dnm-t: #ff6b5b;
	--dnm-g: #ffd23f;
	--dnm-c: #4cb8ff;
	--dnm-phos: #ff9f43;
	--dnm-sugar: #c792ea;
	--dnm-base: #7fe3d3;
	--dnm-hb: #e8f4ff;
	--dnm-s0: #5ab0ff;
	--dnm-s1: #ff7eb6;
	--dnm-el-c: #9aa7bd;
	--dnm-el-n: #4f7dff;
	--dnm-el-o: #ff4d4d;
	--dnm-el-p: #ff9f43;

	--dnm-bg: #050a1a;
	--dnm-bg2: #0a1330;
	--dnm-ink: #e8eefc;
	--dnm-dim: #a9b8d6;
	--dnm-faint: #8a9bc0;
	--dnm-accent: #3de0c4;
	--dnm-accent-ink: #04201b;
	--dnm-ok: #46e3a0;
	--dnm-bad: #ff7a6b;
	--dnm-glass: rgba(9, 17, 40, 0.68);
	--dnm-glass-strong: rgba(9, 17, 40, 0.9);
	--dnm-line: rgba(160, 190, 255, 0.16);
	--dnm-line2: rgba(160, 190, 255, 0.28);
	--dnm-fill: rgba(255, 255, 255, 0.045);
	--dnm-radius: 18px;
	--dnm-serif: Fraunces, 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
	--dnm-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

	--dnm-mast-h: 56px;
	--dnm-pw-l: 360px;
	--dnm-pw-r: 340px;
	--dnm-gap: 16px;

	--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--d1: 0.18s;
	--d2: 0.35s;
	--d3: 0.6s;
	--d4: 0.7s;
	--d5: 0.9s;
	--dl0: 0.25s;
	--dl: 70ms;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	background: var(--dnm-bg);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body.dnm-body {
	margin: 0;
	background: var(--dnm-bg);
	color: var(--dnm-ink);
	font: 16px/1.5 var(--dnm-sans);
	-webkit-font-smoothing: antialiased;
}

body.dnm-body a {
	color: var(--dnm-accent);
}

body.dnm-body :focus-visible {
	outline: 2px solid var(--dnm-accent);
	outline-offset: 2px;
}

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

/* Things that need JavaScript are hidden until it has run. */
html:not(.dnm-js) [data-needs-js],
html:not(.dnm-js) .dnm-controls,
html:not(.dnm-js) .dnm-dock {
	display: none;
}

button {
	font: inherit;
	color: inherit;
}

/* ---------------------------------------------------------------- masthead */

.dnm-mast {
	position: relative;
	z-index: 40;
	height: var(--dnm-mast-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0 20px;
	background: var(--dnm-bg);
	border-bottom: 1px solid var(--dnm-line);
}

.dnm-logo {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.dnm-logo img {
	width: 140px;
	height: auto;
	display: block;
}

.dnm-mast-nav {
	display: flex;
	align-items: center;
	gap: 4px;
}

body.dnm-body .dnm-nav-link {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 12px;
	border-radius: 999px;
	color: var(--dnm-ink);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	list-style: none;
	cursor: pointer;
	transition: background var(--d2);
}

.dnm-nav-link::-webkit-details-marker {
	display: none;
}

body.dnm-body .dnm-nav-link:hover,
.dnm-menu[open] > .dnm-nav-link {
	background: rgba(255, 255, 255, 0.1);
}

.dnm-menu {
	position: relative;
}

.dnm-menu > summary::after {
	content: '';
	margin-left: 8px;
	border: 4px solid transparent;
	border-top-color: currentColor;
	border-bottom: 0;
}

.dnm-menu-list {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	z-index: 50;
	min-width: 230px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--dnm-glass-strong);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border: 1px solid var(--dnm-line);
	border-radius: 14px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

body.dnm-body .dnm-menu-list a {
	display: block;
	padding: 9px 12px;
	border-radius: 8px;
	color: var(--dnm-ink);
	font-size: 0.9rem;
	text-decoration: none;
}

body.dnm-body .dnm-menu-list a:hover {
	background: rgba(61, 224, 196, 0.14);
}

/* ------------------------------------------------------------------- stage */

.dnm-stage {
	position: relative;
	height: calc(100vh - var(--dnm-mast-h));
	height: calc(100svh - var(--dnm-mast-h));
	min-height: 520px;
	overflow: hidden;
	background:
		radial-gradient(900px 620px at 50% 46%, #12306a 0, #0a1a45 38%, transparent 74%),
		linear-gradient(180deg, var(--dnm-bg2), var(--dnm-bg));
	isolation: isolate;
	--dnm-vis: 0px;
	--dnm-pad: 0px;
}

body.dnm-embed .dnm-stage {
	height: 100vh;
	height: 100svh;
	min-height: 0;
}

.dnm-poster {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: 50% 50%;
	transition: opacity var(--d3) ease;
}

.dnm-stage.is-ready .dnm-poster {
	opacity: 0;
	pointer-events: none;
}

.dnm-canvas {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	display: block;
	opacity: 0;
	transition: opacity var(--d3) ease;
	touch-action: pan-y;
	cursor: grab;
}

.dnm-canvas:active {
	cursor: grabbing;
}

.dnm-stage.is-ready .dnm-canvas {
	opacity: 1;
}

.dnm-noscript {
	position: absolute;
	z-index: 3;
	left: 24px;
	bottom: 24px;
	margin: 0;
	max-width: 300px;
	color: var(--dnm-dim);
	font-size: 0.85rem;
}

/* ------------------------------------------------------------------ labels */

/*
 * The scene creates .dnm-lbl pills (data-kind) and an SVG of leader lines inside
 * this layer and positions them itself. Only appearance lives here: a glass
 * pill, a colour dot taken from the part, 13px text at high contrast.
 */
.dnm-labels {
	position: absolute;
	inset: 0;
	z-index: 5;
	overflow: hidden;
	pointer-events: none;
}

.dnm-lbl {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px 3px 8px;
	color: #f4f7ff;
	font: 600 13px/1.25 var(--dnm-sans);
	letter-spacing: 0.01em;
	white-space: nowrap;
	background: rgba(7, 13, 32, 0.86);
	border: 1px solid rgba(190, 208, 255, 0.32);
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	will-change: transform;
}

.dnm-lbl-dot {
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 50%;
}

.dnm-lbl-measure {
	color: var(--dnm-accent);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

/* ------------------------------------------------------------------ panels */

.dnm-info,
.dnm-controls {
	position: absolute;
	z-index: 20;
	top: var(--dnm-gap);
	bottom: var(--dnm-gap);
	display: flex;
	flex-direction: column;
	background: linear-gradient(180deg, rgba(14, 25, 56, 0.76), rgba(7, 13, 32, 0.82));
	-webkit-backdrop-filter: blur(20px) saturate(1.3);
	backdrop-filter: blur(20px) saturate(1.3);
	border: 1px solid var(--dnm-line);
	border-radius: var(--dnm-radius);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 24px 60px rgba(0, 0, 0, 0.45);
	overflow: hidden;
}

.dnm-info {
	left: var(--dnm-gap);
	width: var(--dnm-pw-l);
}

.dnm-controls {
	right: var(--dnm-gap);
	width: var(--dnm-pw-r);
}

.dnm-info-scroll,
.dnm-panels {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(160, 190, 255, 0.3) transparent;
}

.dnm-info-scroll {
	padding: 22px 22px 28px;
}

.dnm-panels {
	padding: 6px 20px 26px;
}

.dnm-kicker {
	margin: 0 0 6px;
	color: var(--dnm-accent);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.dnm-h1 {
	margin: 0 0 10px;
	color: #fff;
	font: 700 clamp(1.7rem, 2.6vw, 2.2rem) / 1.1 var(--dnm-serif);
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.dnm-h2 {
	margin: 0 0 8px;
	color: #fff;
	font: 700 1.35rem / 1.2 var(--dnm-serif);
	text-wrap: balance;
}

.dnm-lede {
	margin: 0 0 16px;
	color: var(--dnm-ink);
	font-size: 1rem;
	line-height: 1.5;
}

.dnm-body {
	margin: 0 0 12px;
	color: var(--dnm-dim);
	font-size: 0.95rem;
	line-height: 1.55;
}

/* ------------------------------------------------------------ tour button */

.dnm-info.is-card .dnm-lede,
.dnm-info.is-card .dnm-tour-btn {
	display: none;
}

.dnm-tour-btn {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin: 0 0 18px;
	padding: 12px 14px;
	text-align: left;
	color: #eafffb;
	cursor: pointer;
	background:
		linear-gradient(rgba(10, 24, 50, 0.94), rgba(10, 24, 50, 0.94)) padding-box,
		linear-gradient(120deg, #3de0c4, #5ab0ff, #c792ea, #3de0c4) border-box;
	background-size: auto, 220% 100%;
	border: 1.5px solid transparent;
	border-radius: 16px;
	box-shadow: 0 8px 28px rgba(61, 224, 196, 0.16);
	transition: transform var(--d2) var(--ease), box-shadow var(--d2), background-position 1.2s var(--ease);
}

.dnm-tour-btn:hover {
	transform: translateY(-2px);
	background-position: 0 0, 100% 0;
	box-shadow: 0 12px 34px rgba(61, 224, 196, 0.3);
}

.dnm-tour-btn:active {
	transform: translateY(0) scale(0.99);
}

.dnm-tour-ico {
	flex: none;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	color: var(--dnm-accent-ink);
	background: var(--dnm-accent);
	border-radius: 50%;
	transition: transform var(--d2) var(--spring);
}

.dnm-tour-btn:hover .dnm-tour-ico {
	transform: scale(1.1);
}

.dnm-tour-ico .dnm-ico {
	fill: currentColor;
	margin-left: 2px;
}

.dnm-tour-t {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.dnm-tour-t b {
	font-size: 1rem;
}

.dnm-tour-t small {
	margin-top: 1px;
	color: var(--dnm-dim);
	font-size: 0.8rem;
	line-height: 1.3;
}

/* ------------------------------------------------------------------- cards */

.dnm-card-wrap {
	position: relative;
}

.dnm-card {
	padding: 18px 18px 16px;
	background: var(--dnm-fill);
	border: 1px solid var(--dnm-line);
	border-radius: 16px;
}

.dnm-parts,
.dnm-try {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dnm-parts li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	border-top: 1px solid var(--dnm-line);
}

.dnm-part-t {
	flex: 1;
	min-width: 0;
	color: var(--dnm-dim);
	font-size: 0.88rem;
	line-height: 1.3;
}

.dnm-part-t b {
	color: #fff;
	margin-right: 2px;
}

.dnm-dot {
	flex: none;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--c, var(--dnm-accent));
	box-shadow: 0 0 10px var(--c, var(--dnm-accent));
}

.dnm-showme {
	flex: none;
	min-height: 30px;
	padding: 0 12px;
	color: var(--dnm-accent);
	font-size: 0.8rem;
	font-weight: 700;
	cursor: pointer;
	background: rgba(61, 224, 196, 0.1);
	border: 1px solid rgba(61, 224, 196, 0.3);
	border-radius: 999px;
	transition: background var(--d1), transform var(--d2) var(--spring);
}

.dnm-showme:hover {
	background: rgba(61, 224, 196, 0.22);
	transform: translateX(2px);
}

.dnm-try-k {
	margin: 14px 0 8px;
	color: var(--dnm-faint);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.dnm-try {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.dnm-try li {
	padding: 5px 11px;
	color: var(--dnm-ink);
	font-size: 0.82rem;
	font-weight: 600;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 999px;
}

.dnm-pickline {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	color: var(--dnm-faint);
	font-size: 0.8rem;
}

.dnm-pickline b {
	color: var(--dnm-ink);
}

.dnm-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: 14px 0;
}

.dnm-stat {
	padding: 10px 8px 9px;
	text-align: center;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--dnm-line);
	border-radius: 12px;
}

.dnm-stat b {
	display: block;
	color: var(--c, #fff);
	font: 700 1.5rem / 1.1 var(--dnm-serif);
	font-variant-numeric: tabular-nums;
}

.dnm-stat span {
	display: block;
	margin-top: 4px;
	color: var(--dnm-dim);
	font-size: 0.72rem;
	line-height: 1.25;
}

.dnm-diagram {
	margin: 12px 0 4px;
	padding: 10px 8px 6px;
	background: rgba(2, 6, 18, 0.45);
	border: 1px solid var(--dnm-line);
	border-radius: 14px;
}

.dnm-diagram svg {
	display: block;
	width: 100%;
	height: auto;
}

.dnm-diagram text {
	font: 600 11px var(--dnm-sans);
	fill: var(--dnm-dim);
}

.dnm-diagram .dnm-dg-big {
	font: 800 13px var(--dnm-sans);
	fill: #0a1330;
}

.dnm-acts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0 4px;
}

.dnm-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	padding: 6px 0;
	color: var(--dnm-dim);
	font-size: 0.88rem;
	font-weight: 600;
	cursor: pointer;
	background: none;
	border: 0;
}

.dnm-back:hover {
	color: #fff;
}

.dnm-related {
	display: block;
	margin-top: 8px;
	font-size: 0.85rem;
}

/* ----------------------------------------------------------------- buttons */

.dnm-btn,
.dnm-btn-p {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 42px;
	padding: 0 18px;
	color: var(--dnm-ink);
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid var(--dnm-line2);
	border-radius: 21px;
	transition: background var(--d2), transform var(--d2) var(--ease), border-color var(--d2), box-shadow var(--d2);
}

.dnm-btn:hover {
	background: rgba(255, 255, 255, 0.13);
	border-color: rgba(160, 190, 255, 0.5);
	transform: translateY(-1px);
}

.dnm-btn:active,
.dnm-btn-p:active {
	transform: translateY(0) scale(0.98);
}

body.dnm-body .dnm-btn-p {
	color: var(--dnm-accent-ink);
	background: var(--dnm-accent);
	border-color: var(--dnm-accent);
	box-shadow: 0 6px 20px rgba(61, 224, 196, 0.25);
}

.dnm-btn-p:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 26px rgba(61, 224, 196, 0.4);
}

.dnm-btn[disabled],
.dnm-btn-p[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
}

.dnm-btn-sm {
	height: 34px;
	padding: 0 14px;
	font-size: 0.82rem;
}

.dnm-btn-wide {
	width: 100%;
	margin-top: 16px;
}

.dnm-btn .dnm-ico {
	width: 18px;
	height: 18px;
}

.dnm-link {
	padding: 4px 2px;
	color: var(--dnm-accent);
	font-size: 0.82rem;
	font-weight: 700;
	cursor: pointer;
	background: none;
	border: 0;
}

.dnm-link:hover {
	text-decoration: underline;
}

/* -------------------------------------------------------------------- tabs */

.dnm-tabs {
	position: relative;
	flex: none;
	display: flex;
	padding: 8px 10px 0;
	border-bottom: 1px solid var(--dnm-line);
}

.dnm-tab {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	min-width: 0;
	padding: 8px 2px 10px;
	color: var(--dnm-faint);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	background: none;
	border: 0;
	border-radius: 10px 10px 0 0;
	transition: color var(--d2), background var(--d2);
}

.dnm-tab[hidden] {
	display: none;
}

.dnm-tab .dnm-ico {
	transition: transform var(--d2) var(--spring);
}

.dnm-tab:hover {
	color: var(--dnm-ink);
	background: rgba(255, 255, 255, 0.05);
}

.dnm-tab:hover .dnm-ico {
	transform: translateY(-2px);
}

.dnm-tab[aria-selected='true'] {
	color: #fff;
}

.dnm-tab[aria-selected='true'] .dnm-ico {
	color: var(--dnm-accent);
}

.dnm-tab-ind {
	position: absolute;
	left: 0;
	bottom: -1px;
	width: var(--w, 0px);
	height: 3px;
	background: var(--dnm-accent);
	border-radius: 3px 3px 0 0;
	box-shadow: 0 0 12px var(--dnm-accent);
	transform: translateX(var(--x, 0px));
	transition: transform var(--d3) var(--ease), width var(--d3) var(--ease);
}

.dnm-panel[hidden] {
	display: none;
}

/* ---------------------------------------------------------- panel controls */

.dnm-gh {
	margin: 20px 0 10px;
	color: var(--dnm-faint);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.dnm-panel {
	padding-top: 16px;
}

.dnm-panel > .dnm-gh:first-child {
	margin-top: 4px;
}

.dnm-gh-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px;
}

.dnm-mini-btns {
	display: flex;
	gap: 10px;
	margin-bottom: 6px;
}

.dnm-help {
	margin: 8px 0 0;
	color: var(--dnm-faint);
	font-size: 0.82rem;
	line-height: 1.4;
}

.dnm-help-top {
	margin: -4px 0 12px;
	color: var(--dnm-dim);
}

.dnm-opts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.dnm-opt,
.dnm-form {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	padding: 12px;
	text-align: left;
	cursor: pointer;
	background: var(--dnm-fill);
	border: 1px solid var(--dnm-line);
	border-radius: 14px;
	transition: transform var(--d2) var(--ease), background var(--d2), border-color var(--d2), box-shadow var(--d2);
}

.dnm-opt:hover,
.dnm-form:hover {
	transform: translateY(-3px);
	background: rgba(255, 255, 255, 0.08);
	border-color: var(--dnm-line2);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.dnm-opt:active,
.dnm-form:active {
	transform: translateY(0) scale(0.985);
}

.dnm-opt[aria-checked='true'],
.dnm-form[aria-checked='true'] {
	background: rgba(61, 224, 196, 0.11);
	border-color: var(--dnm-accent);
	box-shadow: 0 0 0 1px var(--dnm-accent), 0 10px 28px rgba(61, 224, 196, 0.16);
}

.dnm-rep-ico {
	margin-bottom: 4px;
	transition: transform var(--d3) var(--ease);
}

.dnm-opt:hover .dnm-rep-ico {
	transform: scale(1.08) rotate(-3deg);
}

.dnm-opt b {
	color: #fff;
	font-size: 0.92rem;
}

.dnm-opt small {
	color: var(--dnm-dim);
	font-size: 0.76rem;
	line-height: 1.3;
}

.dnm-opt-ck {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 18px;
	height: 18px;
	border: 1.5px solid var(--dnm-line2);
	border-radius: 50%;
	transition: background var(--d2), border-color var(--d2), transform var(--d2) var(--spring);
}

[aria-checked='true'] > .dnm-opt-ck {
	background: var(--dnm-accent);
	border-color: var(--dnm-accent);
	transform: scale(1.1);
}

[aria-checked='true'] > .dnm-opt-ck::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 2px;
	width: 5px;
	height: 9px;
	border: solid var(--dnm-accent-ink);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Segmented control with a sliding thumb. */
.dnm-seg {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	height: 42px;
	padding: 3px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--dnm-line);
	border-radius: 21px;
	--seg: 0;
}

.dnm-seg button {
	position: relative;
	z-index: 1;
	min-width: 0;
	color: var(--dnm-dim);
	font-size: 0.85rem;
	font-weight: 700;
	cursor: pointer;
	background: none;
	border: 0;
	border-radius: 18px;
	transition: color var(--d2);
}

.dnm-seg button[aria-checked='true'] {
	color: var(--dnm-accent-ink);
}

.dnm-seg button:not([aria-checked='true']):hover {
	color: #fff;
}

.dnm-seg-thumb {
	position: absolute;
	top: 3px;
	bottom: 3px;
	left: 3px;
	width: calc((100% - 6px) / 4);
	background: var(--dnm-accent);
	border-radius: 18px;
	box-shadow: 0 4px 14px rgba(61, 224, 196, 0.35);
	transform: translateX(calc(var(--seg) * 100%));
	transition: transform var(--d3) var(--spring);
}

.dnm-mini-legend,
.dnm-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
}

.dnm-mini-legend {
	margin-top: 12px;
	min-height: 22px;
}

.dnm-lg {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--dnm-ink);
	font-size: 0.82rem;
	font-weight: 600;
}

.dnm-lg i {
	width: 11px;
	height: 11px;
	background: var(--c);
	border-radius: 50%;
	box-shadow: 0 0 8px var(--c);
}

button.dnm-lg {
	padding: 2px 6px 2px 2px;
	cursor: pointer;
	background: none;
	border: 0;
	border-radius: 999px;
}

button.dnm-lg:hover {
	background: rgba(255, 255, 255, 0.1);
}

.dnm-lg.is-in {
	animation: dnm-pop var(--d3) var(--spring) backwards;
	animation-delay: calc(var(--i, 0) * var(--dl));
}

/* Switch rows. */
.dnm-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 2px;
	cursor: pointer;
	border-bottom: 1px solid var(--dnm-line);
}

.dnm-row:last-of-type {
	border-bottom: 0;
}

.dnm-row-t {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.dnm-row-t b {
	color: #fff;
	font-size: 0.92rem;
}

.dnm-row-t small {
	color: var(--dnm-faint);
	font-size: 0.78rem;
	line-height: 1.3;
}

.dnm-sw-in {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.dnm-sw {
	flex: none;
	position: relative;
	width: 46px;
	height: 26px;
	background: rgba(255, 255, 255, 0.14);
	border-radius: 13px;
	transition: background var(--d2);
}

.dnm-sw i {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
	transition: transform var(--d3) var(--spring);
}

.dnm-row:hover .dnm-sw i {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.dnm-sw-in:checked + .dnm-sw {
	background: var(--dnm-accent);
}

.dnm-sw-in:checked + .dnm-sw i {
	transform: translateX(20px);
}

.dnm-sw-in:focus-visible + .dnm-sw {
	outline: 2px solid var(--dnm-accent);
	outline-offset: 3px;
}

/* Slider. */
.dnm-slider {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--dnm-line);
}

.dnm-slider-h {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}

.dnm-slider-h label {
	color: #fff;
	font-size: 0.92rem;
	font-weight: 700;
}

.dnm-slider-h output {
	color: var(--dnm-accent);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.dnm-range {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 28px;
	margin: 6px 0 0;
	background: transparent;
	cursor: pointer;
	--p: 0%;
}

.dnm-range::-webkit-slider-runnable-track {
	height: 6px;
	background: linear-gradient(90deg, var(--dnm-accent) var(--p), rgba(255, 255, 255, 0.16) var(--p));
	border-radius: 3px;
}

.dnm-range::-moz-range-track {
	height: 6px;
	background: linear-gradient(90deg, var(--dnm-accent) var(--p), rgba(255, 255, 255, 0.16) var(--p));
	border-radius: 3px;
}

.dnm-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 22px;
	height: 22px;
	margin-top: -8px;
	background: #fff;
	border: 0;
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 0 4px rgba(61, 224, 196, 0.25);
	transition: transform var(--d2) var(--spring);
}

.dnm-range::-moz-range-thumb {
	width: 22px;
	height: 22px;
	background: #fff;
	border: 0;
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 0 4px rgba(61, 224, 196, 0.25);
}

.dnm-range:hover::-webkit-slider-thumb,
.dnm-range:active::-webkit-slider-thumb {
	transform: scale(1.18);
}

/* Form cards. */
.dnm-forms {
	display: grid;
	gap: 10px;
}

.dnm-form {
	gap: 10px;
	padding: 14px;
}

.dnm-form-h {
	display: flex;
	flex-direction: column;
	padding-right: 28px;
}

.dnm-form-h b {
	color: #fff;
	font: 700 1.15rem / 1.2 var(--dnm-serif);
}

.dnm-form-h small {
	color: var(--dnm-dim);
	font-size: 0.8rem;
	line-height: 1.3;
}

.dnm-form-t {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	width: 100%;
}

.dnm-form-t > span {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 7px 10px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 9px;
}

.dnm-form-t em {
	color: var(--dnm-faint);
	font-size: 0.7rem;
	font-style: normal;
	line-height: 1.2;
}

.dnm-form-t strong {
	color: #fff;
	font-size: 0.84rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.dnm-form-n {
	color: var(--dnm-g);
	font-size: 0.78rem;
	line-height: 1.35;
}

/* Sequence. */
.dnm-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.dnm-chip {
	height: 34px;
	padding: 0 13px;
	color: var(--dnm-ink);
	font-size: 0.82rem;
	font-weight: 700;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--dnm-line);
	border-radius: 17px;
	transition: background var(--d2), border-color var(--d2), color var(--d2), transform var(--d2) var(--spring);
}

.dnm-chip:hover {
	background: rgba(255, 255, 255, 0.12);
}

.dnm-chip[aria-checked='true'] {
	color: var(--dnm-accent-ink);
	background: var(--dnm-accent);
	border-color: var(--dnm-accent);
}

.dnm-chip-ico {
	display: grid;
	place-items: center;
	width: 34px;
	padding: 0;
}

.dnm-chip-ico .dnm-ico {
	width: 16px;
	height: 16px;
}

.dnm-chip-ico.is-spin .dnm-ico {
	animation: dnm-roll var(--d3) var(--ease);
}

.dnm-seqbox {
	margin-top: 12px;
	padding: 10px;
	background: rgba(2, 6, 18, 0.45);
	border: 1px solid var(--dnm-line);
	border-radius: 14px;
}

.dnm-seqblock + .dnm-seqblock {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--dnm-line);
}

.dnm-seqrow {
	display: flex;
	align-items: center;
	gap: 6px;
}

.dnm-seqrow + .dnm-seqrow {
	margin-top: 3px;
}

.dnm-seqrow > i {
	flex: none;
	width: 26px;
	color: var(--dnm-faint);
	font-size: 0.68rem;
	font-style: normal;
	font-weight: 800;
}

.dnm-seqrow > span {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 2px;
}

.dnm-nt {
	height: 24px;
	padding: 0;
	color: var(--c);
	font: 800 0.8rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	cursor: pointer;
	background: color-mix(in srgb, var(--c) 14%, transparent);
	border: 1px solid transparent;
	border-radius: 6px;
	transition: transform var(--d2) var(--spring), background var(--d1), border-color var(--d1);
}

.dnm-nt:hover {
	transform: translateY(-2px) scale(1.12);
	background: color-mix(in srgb, var(--c) 30%, transparent);
}

.dnm-nt.is-sel {
	border-color: var(--c);
	background: color-mix(in srgb, var(--c) 34%, transparent);
}

.dnm-nt[data-b='A'] { --c: var(--dnm-a); }
.dnm-nt[data-b='T'] { --c: var(--dnm-t); }
.dnm-nt[data-b='G'] { --c: var(--dnm-g); }
.dnm-nt[data-b='C'] { --c: var(--dnm-c); }

/* ------------------------------------------------------------ tour & quiz */

.dnm-tourcard .dnm-prog,
.dnm-hud .dnm-prog {
	height: 5px;
	margin: 0 0 8px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.12);
	border-radius: 3px;
}

.dnm-prog i {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--dnm-accent), var(--dnm-s0));
	border-radius: 3px;
	transition: width var(--d3) var(--ease);
}

.dnm-tourcard-n {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 6px;
}

.dnm-tourcard-n .dnm-kicker {
	margin: 0;
}

.dnm-tourcard-btns {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
}

.dnm-tourcard-btns .dnm-btn-p {
	margin-left: auto;
}

.dnm-tourchips {
	display: flex;
	gap: 6px;
	margin-top: 10px;
}

.dnm-quizmodes {
	display: grid;
	gap: 10px;
	margin-top: 4px;
}

.dnm-qmode {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px;
	text-align: left;
	cursor: pointer;
	background: var(--dnm-fill);
	border: 1px solid var(--dnm-line);
	border-radius: 14px;
	transition: transform var(--d2) var(--ease), background var(--d2), border-color var(--d2);
}

.dnm-qmode:hover {
	transform: translateY(-3px);
	background: rgba(61, 224, 196, 0.1);
	border-color: var(--dnm-accent);
}

.dnm-qmode .dnm-ico {
	flex: none;
	width: 30px;
	height: 30px;
	color: var(--dnm-accent);
}

.dnm-qmode b {
	display: block;
	color: #fff;
}

.dnm-qmode small {
	display: block;
	color: var(--dnm-dim);
	font-size: 0.8rem;
	line-height: 1.35;
}

.dnm-challenge {
	margin: 0 0 14px;
	padding: 10px 14px;
	color: #fff2cf;
	font-size: 0.9rem;
	font-weight: 600;
	background: rgba(255, 210, 63, 0.12);
	border-left: 3px solid var(--dnm-g);
	border-radius: 3px 12px 12px 3px;
}

.dnm-hud {
	position: absolute;
	z-index: 30;
	top: var(--dnm-gap);
	left: calc(var(--dnm-pw-l) + var(--dnm-gap) * 2);
	right: calc(var(--dnm-pw-r) + var(--dnm-gap) * 2);
	max-width: 760px;
	margin: 0 auto;
	padding: 9px 16px 11px;
	background: var(--dnm-glass-strong);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	border: 1px solid var(--dnm-line2);
	border-radius: 18px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
	animation: dnm-drop var(--d3) var(--ease);
}

.dnm-hud[hidden] {
	display: none;
}

.dnm-hud-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 6px;
	color: var(--dnm-dim);
	font-size: 0.8rem;
	font-weight: 700;
}

.dnm-hud-top b {
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.dnm-hud-stats {
	display: flex;
	gap: 14px;
}

.dnm-streak {
	display: inline-block;
	padding: 2px 9px;
	color: var(--dnm-accent-ink);
	font-size: 0.75rem;
	font-weight: 800;
	background: var(--dnm-g);
	border-radius: 999px;
	opacity: 0;
	transform: scale(0.6);
	transition: opacity var(--d2), transform var(--d3) var(--spring);
}

.dnm-streak.is-on {
	opacity: 1;
	transform: scale(1);
}

.dnm-hud-q {
	margin: 0;
	color: #fff;
	font: 700 1.2rem / 1.2 var(--dnm-serif);
	text-align: center;
	text-wrap: balance;
}

.dnm-hud-q.is-in {
	animation: dnm-rise var(--d3) var(--ease);
}

.dnm-hud-sub {
	margin: 2px 0 0;
	color: var(--dnm-dim);
	font-size: 0.8rem;
	text-align: center;
}

.dnm-choices {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin-top: 8px;
}

.dnm-choice {
	min-height: 40px;
	padding: 4px 8px;
	line-height: 1.2;
	color: #fff;
	font-size: 0.9rem;
	font-weight: 700;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.07);
	border: 1.5px solid var(--dnm-line2);
	border-radius: 14px;
	transition: transform var(--d2) var(--ease), background var(--d2), border-color var(--d2);
}

.dnm-choice:hover:not([disabled]) {
	transform: translateY(-2px);
	background: rgba(255, 255, 255, 0.14);
}

.dnm-choice[disabled] {
	cursor: default;
}

.dnm-choice.is-ok {
	background: rgba(70, 227, 160, 0.22);
	border-color: var(--dnm-ok);
	animation: dnm-pulse var(--d3) var(--ease);
}

.dnm-choice.is-bad {
	background: rgba(255, 122, 107, 0.2);
	border-color: var(--dnm-bad);
	animation: dnm-shake var(--d3) var(--ease);
}

.dnm-hud.is-ok {
	border-color: var(--dnm-ok);
	box-shadow: 0 0 0 2px rgba(70, 227, 160, 0.4), 0 18px 50px rgba(0, 0, 0, 0.5);
	animation: dnm-pulse var(--d3) var(--ease);
}

.dnm-hud.is-bad {
	border-color: var(--dnm-bad);
	box-shadow: 0 0 0 2px rgba(255, 122, 107, 0.4), 0 18px 50px rgba(0, 0, 0, 0.5);
	animation: dnm-shake var(--d3) var(--ease);
}

.dnm-hud-exit {
	margin: 0;
	flex: none;
}

.dnm-end {
	position: absolute;
	z-index: 35;
	top: 50%;
	left: calc(var(--dnm-pw-l) + var(--dnm-gap) * 2 + (100% - var(--dnm-pw-l) - var(--dnm-pw-r) - var(--dnm-gap) * 4) / 2);
	width: min(420px, calc(100% - var(--dnm-pw-l) - var(--dnm-pw-r) - var(--dnm-gap) * 6));
	padding: 26px 24px 22px;
	text-align: center;
	background: var(--dnm-glass-strong);
	-webkit-backdrop-filter: blur(22px);
	backdrop-filter: blur(22px);
	border: 1px solid var(--dnm-line2);
	border-radius: 24px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
	transform: translate(-50%, -50%);
	animation: dnm-end-in var(--d3) var(--spring);
}

.dnm-end-score {
	margin: 0;
	color: #fff;
	font: 700 4.4rem / 1 var(--dnm-serif);
	font-variant-numeric: tabular-nums;
}

.dnm-end-score span {
	color: var(--dnm-faint);
	font-size: 1.8rem;
}

.dnm-end-msg {
	margin: 6px 0 14px;
	color: var(--dnm-ink);
	font-size: 1.05rem;
	font-weight: 600;
}

.dnm-end-stats {
	display: flex;
	justify-content: center;
	gap: 22px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
	color: var(--dnm-dim);
	font-size: 0.78rem;
}

.dnm-end-stats b {
	display: block;
	color: #fff;
	font: 700 1.25rem var(--dnm-serif);
	font-variant-numeric: tabular-nums;
}

.dnm-end-miss {
	margin: 0 0 14px;
	color: var(--dnm-dim);
	font-size: 0.85rem;
}

.dnm-end-btns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.dnm-confetti {
	position: absolute;
	inset: 0;
	z-index: 36;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* ----------------------------------------------------------------- teacher */

.dnm-tgroup {
	padding: 14px;
	margin-top: 12px;
	background: var(--dnm-fill);
	border: 1px solid var(--dnm-line);
	border-radius: 14px;
}

.dnm-tgroup > h4 {
	margin: 0 0 10px;
	color: #fff;
	font-size: 0.95rem;
}

.dnm-tgroup .dnm-help {
	margin: 0 0 10px;
}

.dnm-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-bottom: 10px;
}

.dnm-field > span,
.dnm-field > label {
	color: var(--dnm-faint);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.dnm-select {
	height: 42px;
	padding: 0 14px;
	color: var(--dnm-ink);
	font: 600 0.9rem var(--dnm-sans);
	background: #0c1634;
	border: 1px solid var(--dnm-line2);
	border-radius: 21px;
}

.dnm-keylist {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 12px;
}

.dnm-links {
	display: grid;
	gap: 8px;
}

.dnm-links a {
	justify-content: flex-start;
}

.dnm-code {
	width: 100%;
	height: 112px;
	margin-bottom: 10px;
	padding: 10px 12px;
	color: #cfe0ff;
	font: 0.76rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	background: rgba(2, 6, 18, 0.6);
	border: 1px solid var(--dnm-line);
	border-radius: 12px;
	resize: vertical;
}

.dnm-cite {
	margin: 0 0 8px;
	padding: 10px 12px;
	color: var(--dnm-dim);
	font-size: 0.8rem;
	line-height: 1.45;
	background: rgba(2, 6, 18, 0.45);
	border-radius: 10px;
	user-select: all;
}

.dnm-cite-k {
	margin: 10px 0 5px;
	color: var(--dnm-faint);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.dnm-license {
	margin: 14px 0 0;
	color: var(--dnm-faint);
	font-size: 0.78rem;
	line-height: 1.4;
}

.dnm-nogl-note {
	margin: 10px 0 0;
	padding: 10px 14px;
	color: #ffe9b8;
	font-size: 0.85rem;
	line-height: 1.4;
	background: rgba(255, 180, 84, 0.12);
	border-left: 3px solid #ffb454;
	border-radius: 3px 12px 12px 3px;
}

.is-off {
	opacity: 0.4;
	filter: grayscale(0.6);
	pointer-events: none;
}

/* ------------------------------------------------------- dock, hud, popups */

.dnm-dock {
	position: absolute;
	z-index: 15;
	bottom: calc(var(--dnm-gap) + var(--dnm-pad, 0px));
	left: calc(var(--dnm-pw-l) + var(--dnm-gap) * 2);
	right: calc(var(--dnm-pw-r) + var(--dnm-gap) * 2);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	pointer-events: none;
}

.dnm-dock > * {
	pointer-events: auto;
}

.dnm-legend {
	min-height: 40px;
	align-items: center;
	justify-content: center;
	padding: 8px 18px;
	background: var(--dnm-glass);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: 1px solid var(--dnm-line);
	border-radius: 20px;
}

.dnm-help-btn {
	flex: none;
	width: 40px;
	height: 40px;
	color: var(--dnm-ink);
	font-size: 1rem;
	font-weight: 800;
	cursor: pointer;
	background: var(--dnm-glass);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: 1px solid var(--dnm-line);
	border-radius: 50%;
	transition: background var(--d2), transform var(--d2) var(--spring);
}

.dnm-help-btn:hover {
	background: rgba(255, 255, 255, 0.16);
	transform: scale(1.08);
}

/* Continue to article: the wheel zooms the model, so this is the visible way
   down to the article. Desktop: its own row under the legend. Phone: a compact
   chip at the end of the dock row. */
.dnm-dock {
	flex-wrap: wrap;
}

.dnm-next {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 8px 16px 8px 20px;
	color: var(--dnm-accent);
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
	background: rgba(61, 224, 196, 0.1);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: 1px solid rgba(61, 224, 196, 0.35);
	border-radius: 20px;
	transition: background var(--d2), transform var(--d2) var(--spring);
}

body.dnm-body .dnm-next {
	color: var(--dnm-accent);
}

.dnm-next:hover {
	background: rgba(61, 224, 196, 0.2);
	transform: translateY(2px);
}

.dnm-next-s {
	display: none;
}

.dnm-next-i {
	animation: dnm-bob 1.8s ease-in-out infinite;
}

@keyframes dnm-bob {
	0%, 100% { transform: translateY(-2px); }
	50% { transform: translateY(3px); }
}

@media (min-width: 900px) {
	/* A zero-height full-width flex item breaks the row, so the link sits centred below the legend. */
	.dnm-dock::after {
		content: '';
		order: 2;
		flex-basis: 100%;
		height: 0;
	}

	.dnm-next {
		order: 3;
	}
}

.dnm-pop {
	position: absolute;
	right: 0;
	bottom: 52px;
	z-index: 50;
	width: 300px;
	padding: 14px 16px;
	background: var(--dnm-glass-strong);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	border: 1px solid var(--dnm-line2);
	border-radius: 16px;
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
	opacity: 0;
	transform: translateY(8px) scale(0.97);
	transform-origin: bottom right;
	transition: opacity var(--d2), transform var(--d2) var(--ease);
}

.dnm-pop[hidden] {
	display: none;
}

.dnm-pop.is-in {
	opacity: 1;
	transform: none;
}

.dnm-pop ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dnm-pop li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 5px 0;
	color: var(--dnm-dim);
	font-size: 0.84rem;
}

.dnm-pop kbd {
	flex: none;
	min-width: 48px;
	padding: 2px 8px;
	text-align: center;
	color: #fff;
	font: 700 0.76rem var(--dnm-sans);
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid var(--dnm-line2);
	border-radius: 6px;
}

.dnm-tip {
	position: absolute;
	z-index: 45;
	left: 0;
	top: 0;
	padding: 4px 10px;
	color: #fff;
	font-size: 0.8rem;
	font-weight: 700;
	white-space: nowrap;
	pointer-events: none;
	background: rgba(7, 13, 32, 0.92);
	border: 1px solid var(--dnm-line2);
	border-radius: 8px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

.dnm-tip[hidden] {
	display: none;
}

.dnm-embed-credit {
	position: fixed;
	z-index: 60;
	left: 10px;
	bottom: 8px;
	padding: 3px 10px;
	color: var(--dnm-dim);
	font-size: 0.72rem;
	font-weight: 600;
	text-decoration: none;
	background: rgba(7, 13, 32, 0.7);
	border-radius: 999px;
}

/* ---------------------------------------------------------------- sheet (phone) */

.dnm-grip {
	display: none;
}

@media (min-width: 900px) and (max-width: 1099.98px) {
	:root {
		--dnm-pw-l: 330px;
		--dnm-pw-r: 310px;
	}
}

@media (max-width: 899.98px) {
	.dnm-stage {
		--dnm-gap: 12px;
	}

	/* No-JS and pre-JS: the info panel is a low bottom sheet. */
	.dnm-stage > .dnm-info {
		left: 0;
		right: 0;
		top: auto;
		bottom: 0;
		width: auto;
		height: min(46%, 300px);
		border-radius: 20px 20px 0 0;
		border-width: 1px 0 0;
	}

	.dnm-sheet {
		position: absolute;
		z-index: 25;
		left: 0;
		right: 0;
		bottom: 0;
		height: var(--dnm-vis);
		display: flex;
		flex-direction: column;
		background: linear-gradient(180deg, rgba(14, 25, 56, 0.9), rgba(7, 13, 32, 0.95));
		-webkit-backdrop-filter: blur(20px) saturate(1.3);
		backdrop-filter: blur(20px) saturate(1.3);
		border: 1px solid var(--dnm-line);
		border-width: 1px 0 0;
		border-radius: 22px 22px 0 0;
		box-shadow: 0 -14px 50px rgba(0, 0, 0, 0.5);
		overflow: hidden;
		transition: height var(--d3) var(--ease);
		touch-action: none;
	}

	.dnm-sheet.is-drag {
		transition: none;
	}

	.dnm-grip {
		position: relative;
		flex: none;
		display: block;
		width: 100%;
		height: 26px;
		padding: 0;
		cursor: grab;
		background: none;
		border: 0;
		touch-action: none;
	}

	.dnm-grip::after {
		content: '';
		position: absolute;
		left: 50%;
		top: 10px;
		width: 44px;
		height: 5px;
		background: rgba(255, 255, 255, 0.3);
		border-radius: 3px;
		transform: translateX(-50%);
		transition: background var(--d2), width var(--d2);
	}

	.dnm-grip:hover::after {
		background: rgba(255, 255, 255, 0.5);
		width: 56px;
	}

	.dnm-sheet .dnm-tabs {
		padding: 0 8px;
		touch-action: pan-x;
	}

	.dnm-sheet .dnm-tab {
		padding: 6px 1px 8px;
	}

	.dnm-sheet-body {
		position: relative;
		flex: 1;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		touch-action: pan-y;
	}

	.dnm-sheet[data-snap='peek'] .dnm-sheet-body {
		overflow: hidden;
		touch-action: none;
	}

	.dnm-sheet .dnm-info,
	.dnm-sheet .dnm-controls {
		position: static;
		display: block;
		width: auto;
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		overflow: visible;
	}

	.dnm-sheet .dnm-info-scroll,
	.dnm-sheet .dnm-panels {
		overflow: visible;
	}

	.dnm-sheet .dnm-info-scroll {
		padding: 8px 18px 28px;
	}

	.dnm-sheet .dnm-panels {
		padding: 4px 18px 28px;
	}

	.dnm-sheet[data-tab='info'] .dnm-controls,
	.dnm-sheet:not([data-tab='info']) .dnm-info {
		display: none;
	}

	.dnm-sheet .dnm-h1 {
		font-size: 1.55rem;
	}

	.dnm-hud {
		left: var(--dnm-gap);
		right: var(--dnm-gap);
		top: var(--dnm-gap);
		max-width: none;
		padding: 8px 12px 10px;
	}

	.dnm-choices {
		grid-template-columns: 1fr 1fr;
	}

	.dnm-hud-q {
		font-size: 1.15rem;
	}

	.dnm-end {
		left: 50%;
		width: min(420px, calc(100% - 24px));
		top: calc((100% - var(--dnm-pad, 0px)) / 2);
	}

	.dnm-dock {
		left: var(--dnm-gap);
		right: var(--dnm-gap);
		justify-content: space-between;
	}

	.dnm-legend {
		flex: 1;
		justify-content: flex-start;
		gap: 4px 12px;
		padding: 7px 14px;
	}

	.dnm-help-btn {
		display: none;
	}

	.dnm-dock {
		flex-wrap: nowrap;
	}

	.dnm-next {
		padding: 7px 12px 7px 14px;
		gap: 4px;
	}

	.dnm-next-t {
		display: none;
	}

	.dnm-next-s {
		display: inline;
	}

	.dnm-mast {
		padding: 0 14px;
	}
}

/* ----------------------------------------------------------------- entrance */

@keyframes dnm-in-l {
	from { transform: translateX(-36px); }
}

@keyframes dnm-in-r {
	from { transform: translateX(36px); }
}

@keyframes dnm-in-up {
	from { transform: translateY(40px); }
}

@keyframes dnm-stagger {
	from { opacity: 0; transform: translateY(14px); }
}

@keyframes dnm-pop {
	from { opacity: 0; transform: scale(0.6); }
}

@keyframes dnm-rise {
	from { opacity: 0; transform: translateY(10px); }
}

@keyframes dnm-drop {
	from { opacity: 0; transform: translateY(-14px); }
}

@keyframes dnm-pulse {
	0% { transform: scale(1); }
	40% { transform: scale(1.04); }
	100% { transform: scale(1); }
}

@keyframes dnm-shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-8px); }
	40% { transform: translateX(7px); }
	60% { transform: translateX(-5px); }
	80% { transform: translateX(3px); }
}

@keyframes dnm-roll {
	to { transform: rotate(360deg); }
}

@keyframes dnm-end-in {
	from { opacity: 0; transform: translate(-50%, -46%) scale(0.92); }
}

/* h1 and lede are never animated: they are the first thing painted. */
.dnm-stage.is-enter .dnm-info {
	animation: dnm-in-l var(--d5) var(--ease) backwards;
}

.dnm-stage.is-enter .dnm-controls {
	animation: dnm-in-r var(--d5) var(--ease) 0.1s backwards;
}

.dnm-stage.is-enter .dnm-sheet {
	animation: dnm-in-up var(--d5) var(--ease) backwards;
}

.dnm-stage.is-enter .dnm-info-scroll > :nth-child(n+4),
.dnm-stage.is-enter .dnm-tabs {
	animation: dnm-stagger var(--d4) var(--ease) backwards;
	animation-delay: calc(var(--dl0) + var(--i, 0) * var(--dl));
}

.dnm-stage.is-enter .dnm-panels > .dnm-panel:not([hidden]) > * {
	animation: dnm-stagger var(--d3) var(--ease) backwards;
	animation-delay: calc(var(--i, 0) * var(--dl) / 2);
}

.dnm-card.is-ssr-in > * {
	animation: dnm-rise var(--d3) var(--ease) backwards;
	animation-delay: calc(var(--i, 0) * var(--dl));
}

.dnm-stat {
	animation: dnm-pop var(--d3) var(--spring) backwards;
	animation-delay: calc(var(--dl0) / 2 + var(--i, 0) * var(--dl));
}

@media (hover: none) {
	.dnm-opt:hover,
	.dnm-form:hover,
	.dnm-qmode:hover,
	.dnm-tour-btn:hover,
	.dnm-btn:hover {
		transform: none;
	}
}

/* ------------------------------------------------------------ reduced motion */

/* Every duration above comes from these variables. Cards still cross-fade
   (opacity only, 160ms, from script); nothing moves, spins or shakes. */
@media (prefers-reduced-motion: reduce) {
	.dnm-next-i {
		animation: none;
	}

	:root {
		--d1: 0.01s;
		--d2: 0.01s;
		--d3: 0.01s;
		--d4: 0.01s;
		--d5: 0.01s;
		--dl0: 0s;
		--dl: 0s;
	}

	.dnm-poster,
	.dnm-canvas {
		transition-duration: 0.2s;
	}
}

/* Keep Mediavine's adhesion bar (height published by js/dnm-track.js) off the last footer lines. */
body.dnm-body .dnm-foot-in {
	padding-bottom: calc(34px + var(--dnm-adh, 0px) + env(safe-area-inset-bottom, 0px));
}

.dnm-hud-top span {
	white-space: nowrap;
}