/*
 * Skin 3D Model: stage, masthead, panels, controls, action cards, 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.s3m-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 .s3m-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 {
	/* Part colours: CONTRACT.md table; src/scene/util.js HEX must match. */
	--s3m-epidermis: #f2c4a0;
	--s3m-dermis: #e88a8f;
	--s3m-hypodermis: #f7cf6b;
	--s3m-stratum-corneum: #fbe9d0;
	--s3m-stratum-lucidum: #fff7e8;
	--s3m-stratum-granulosum: #d9a46c;
	--s3m-stratum-spinosum: #eab48c;
	--s3m-stratum-basale: #a8673f;
	--s3m-keratinocyte: #f0b98d;
	--s3m-melanocyte: #6b3b22;
	--s3m-melanin: #3d2014;
	--s3m-langerhans-cell: #8fd3ff;
	--s3m-merkel-cell: #b8f06b;
	--s3m-papillary-dermis: #f4a3a8;
	--s3m-reticular-dermis: #d9727b;
	--s3m-dermal-papilla: #ff9fb0;
	--s3m-collagen: #ffe3e8;
	--s3m-hair-shaft: #4a2c1d;
	--s3m-hair-follicle: #c08a5a;
	--s3m-hair-bulb: #e0a070;
	--s3m-arrector-pili: #ff6f61;
	--s3m-sebaceous-gland: #b9e86a;
	--s3m-sweat-gland: #7fb8ff;
	--s3m-sweat-duct: #a8d4ff;
	--s3m-sweat-pore: #cfe8ff;
	--s3m-adipose-tissue: #f7cf6b;
	--s3m-artery: #ff3b4e;
	--s3m-vein: #4a6dff;
	--s3m-capillary: #ff7a8a;
	--s3m-nerve: #ffe680;
	--s3m-meissner-corpuscle: #e0b0ff;
	--s3m-pacinian-corpuscle: #f4f1ea;
	--s3m-free-nerve-ending: #fff2a8;
	--s3m-fibroblast: #c58cff;

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

	--s3m-mast-h: 56px;
	--s3m-pw-l: 360px;
	--s3m-pw-r: 340px;
	--s3m-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(--s3m-bg);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

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

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

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

.s3m-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(.s3m-js) [data-needs-js],
html:not(.s3m-js) .s3m-controls,
html:not(.s3m-js) .s3m-dock {
	display: none;
}

button {
	font: inherit;
	color: inherit;
}

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

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

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

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

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

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

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

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

.s3m-menu {
	position: relative;
}

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

.s3m-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(--s3m-glass-strong);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border: 1px solid var(--s3m-line);
	border-radius: 14px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

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

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

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

.s3m-stage {
	position: relative;
	height: calc(100vh - var(--s3m-mast-h));
	height: calc(100svh - var(--s3m-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(--s3m-bg2), var(--s3m-bg));
	isolation: isolate;
	--s3m-vis: 0px;
	--s3m-pad: 0px;
}

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

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

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

.s3m-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;
}

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

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

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

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

/*
 * The scene creates .s3m-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.
 */
.s3m-labels {
	position: absolute;
	inset: 0;
	z-index: 5;
	overflow: hidden;
	pointer-events: none;
}

.s3m-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(--s3m-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;
}

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

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

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

.s3m-info,
.s3m-controls {
	position: absolute;
	z-index: 20;
	top: var(--s3m-gap);
	bottom: var(--s3m-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(--s3m-line);
	border-radius: var(--s3m-radius);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 24px 60px rgba(0, 0, 0, 0.45);
	overflow: hidden;
}

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

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

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

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

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

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

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

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

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

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

/* ------------------------------------------------------------- info panel */

.s3m-info.is-card .s3m-lede {
	display: none;
}

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

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

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

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

.s3m-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
	gap: 8px;
	margin: 14px 0;
}

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

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

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

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

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

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

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

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

.s3m-btn,
.s3m-btn-p {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 42px;
	padding: 0 18px;
	color: var(--s3m-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(--s3m-line2);
	border-radius: 21px;
	transition: background var(--d2), transform var(--d2) var(--ease), border-color var(--d2), box-shadow var(--d2);
}

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

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

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

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

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

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

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

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

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

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

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

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

.s3m-tab {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	min-width: 0;
	padding: 8px 2px 10px;
	color: var(--s3m-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);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.s3m-seg-3 {
	--n: 3;
}

.s3m-seg-4 {
	--n: 4;
}

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

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

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

.s3m-seg-thumb {
	position: absolute;
	top: 3px;
	bottom: 3px;
	left: 3px;
	width: calc((100% - 6px) / var(--n, 2));
	background: var(--s3m-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);
}

.s3m-seg.is-none .s3m-seg-thumb {
	opacity: 0;
}

.s3m-seg button b,
.s3m-seg button small {
	display: block;
	line-height: 1.15;
}

.s3m-seg button small {
	margin-top: 1px;
	font-size: 0.72rem;
	font-weight: 600;
	opacity: 0.8;
}

/* Skin picker: the pill at the top centre of the stage. */
.s3m-skinpick {
	position: absolute;
	z-index: 16;
	top: var(--s3m-gap);
	left: calc(var(--s3m-pw-l) + var(--s3m-gap) * 2);
	right: calc(var(--s3m-pw-r) + var(--s3m-gap) * 2);
	width: min(360px, 100%);
	margin: 0 auto;
}

.s3m-skinpick .s3m-seg {
	height: 54px;
	padding: 4px;
	background: var(--s3m-glass-strong);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-color: var(--s3m-line2);
	border-radius: 27px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.s3m-skinpick .s3m-seg button {
	border-radius: 23px;
	font-size: 0.95rem;
}

.s3m-skinpick .s3m-seg-thumb {
	top: 4px;
	bottom: 4px;
	left: 4px;
	width: calc((100% - 8px) / var(--n, 2));
	border-radius: 23px;
}

/* Close-up chip: under the pill while the epidermis close-up is on. */
.s3m-closeup {
	position: absolute;
	z-index: 16;
	top: calc(var(--s3m-gap) + 64px);
	left: calc(var(--s3m-pw-l) + var(--s3m-gap) * 2);
	right: calc(var(--s3m-pw-r) + var(--s3m-gap) * 2);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	pointer-events: none;
	opacity: 0;
	transform: translateY(-12px) scale(0.96);
	transition: opacity var(--d2), transform var(--d3) var(--spring);
}

.s3m-closeup[hidden] {
	display: none;
}

.s3m-closeup.is-in {
	opacity: 1;
	transform: none;
}

.s3m-closeup > * {
	pointer-events: auto;
}

.s3m-closeup-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 18px 0 14px;
	color: var(--s3m-ink);
	font-size: 0.9rem;
	font-weight: 700;
	cursor: pointer;
	background: var(--s3m-glass-strong);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: 1px solid var(--s3m-line2);
	border-radius: 20px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
	transition: background var(--d2), transform var(--d2) var(--ease);
}

.s3m-closeup-back:hover {
	background: rgba(40, 62, 120, 0.92);
	transform: translateX(-2px);
}

.s3m-closeup-back .s3m-ico {
	width: 18px;
	height: 18px;
	color: var(--s3m-accent);
}

.s3m-closeup-tag {
	padding: 7px 12px;
	color: var(--s3m-accent);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	background: rgba(61, 224, 196, 0.12);
	border: 1px solid rgba(61, 224, 196, 0.35);
	border-radius: 999px;
}

.s3m-stage.is-nogl .s3m-skinpick,
.s3m-stage.is-nogl .s3m-closeup,
.s3m-stage.is-nogl .s3m-caption,
html:not(.s3m-js) .s3m-skinpick,
html:not(.s3m-js) .s3m-closeup,
html:not(.s3m-js) .s3m-caption {
	display: none;
}

@media (max-width: 899.98px) {
	.s3m-skinpick {
		left: var(--s3m-gap);
		right: var(--s3m-gap);
		width: auto;
		max-width: 360px;
	}

	.s3m-skinpick .s3m-seg {
		height: 48px;
	}

	.s3m-closeup {
		top: calc(var(--s3m-gap) + 58px);
		left: var(--s3m-gap);
		right: var(--s3m-gap);
	}
}

.s3m-help-parts {
	margin: 2px 0 12px;
}

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

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

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

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

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

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

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

.s3m-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);
}

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

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

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

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

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

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

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

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

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

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

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

.s3m-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);
}

.s3m-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);
}

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

/* ------------------------------------------------------------- in action */

.s3m-acard {
	--ac: var(--s3m-accent);
	margin: 0 0 10px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--s3m-line);
	border-radius: 16px;
	transition: border-color var(--d2), background var(--d2), box-shadow var(--d2);
}

.s3m-acard[data-acard='sun'] {
	--ac: #ffc857;
}

.s3m-acard[data-acard='renew'] {
	--ac: #5fe3a1;
}

.s3m-acard[data-acard='touch'] {
	--ac: #c9a7ff;
}

.s3m-acard[data-acard='temp'] {
	--ac: var(--s3m-ink);
}

.s3m-acard.is-on {
	background: rgba(255, 255, 255, 0.08);
	border-color: var(--ac);
	box-shadow: 0 0 22px -6px var(--ac);
}

.s3m-acard-btn {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 12px 14px;
	text-align: left;
	cursor: pointer;
	background: none;
	border: 0;
}

.s3m-acard-h {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.s3m-acard-ico {
	flex: none;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	color: var(--ac);
	background: rgba(255, 255, 255, 0.08);
	border-radius: 13px;
	transition: transform var(--d3) var(--spring), background var(--d2), color var(--d2);
}

.s3m-acard-ico .s3m-ico {
	width: 24px;
	height: 24px;
}

.s3m-acard-btn:hover .s3m-acard-ico {
	transform: rotate(-6deg) scale(1.08);
}

.s3m-acard.is-on .s3m-acard-ico {
	color: #0b1020;
	background: var(--ac);
}

.s3m-acard-t {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.s3m-acard-t b {
	color: #fff;
	font-size: 1rem;
	line-height: 1.2;
}

.s3m-acard-t small {
	margin-top: 2px;
	color: var(--s3m-faint);
	font-size: 0.8rem;
	line-height: 1.3;
}

.s3m-acard.is-on .s3m-sw {
	background: var(--ac);
}

.s3m-acard.is-on .s3m-sw i {
	transform: translateX(20px);
}

.s3m-acard-btn:focus-visible .s3m-sw {
	outline: 2px solid var(--s3m-accent);
	outline-offset: 3px;
}

/* The steps open under the card while it is on. */
.s3m-steps {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	transition: grid-template-rows var(--d3) var(--ease), visibility 0s linear var(--d3);
}

.s3m-acard.is-on .s3m-steps {
	grid-template-rows: 1fr;
	visibility: visible;
	transition: grid-template-rows var(--d3) var(--ease), visibility 0s;
}

.s3m-steps-in {
	min-height: 0;
	overflow: hidden;
}

.s3m-steplist {
	display: grid;
	gap: 10px;
	margin: 2px 14px 14px;
	padding: 0;
	list-style: none;
	counter-reset: s3m-step;
}

.s3m-steplist:empty {
	display: none;
}

.s3m-steplist li {
	position: relative;
	min-height: 24px;
	padding-left: 34px;
	color: var(--s3m-ink);
	font-size: 0.88rem;
	line-height: 1.4;
	counter-increment: s3m-step;
}

.s3m-steplist li::before {
	content: counter(s3m-step);
	position: absolute;
	left: 0;
	top: -1px;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	color: #0b1020;
	font-size: 0.78rem;
	font-weight: 800;
	background: var(--ac);
	border-radius: 50%;
}

.s3m-acard.is-on .s3m-steplist li {
	animation: s3m-rise var(--d3) var(--ease) backwards;
}

.s3m-acard.is-on .s3m-steplist li:nth-child(2) {
	animation-delay: var(--dl);
}

.s3m-acard.is-on .s3m-steplist li:nth-child(3) {
	animation-delay: calc(var(--dl) * 2);
}

.s3m-acard.is-on .s3m-steplist li:nth-child(4) {
	animation-delay: calc(var(--dl) * 3);
}

.s3m-acard.is-on .s3m-steplist li:nth-child(n+5) {
	animation-delay: calc(var(--dl) * 4);
}

.s3m-touch-hint {
	margin: 2px 14px 12px;
	padding: 10px 12px;
	color: #fff;
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.4;
	background: rgba(201, 167, 255, 0.14);
	border-left: 3px solid var(--ac);
	border-radius: 3px 12px 12px 3px;
}

/* Temperature card: a cold-to-hot slider with an icon at each end. */
.s3m-temp {
	--tc: var(--s3m-line);
	padding: 14px 14px 14px;
}

.s3m-temp[data-t='cold'] {
	--tc: var(--s3m-cold);
}

.s3m-temp[data-t='hot'] {
	--tc: var(--s3m-hot);
}

.s3m-temp.is-on {
	border-color: var(--tc);
	box-shadow: 0 0 22px -6px var(--tc);
}

.s3m-temp output {
	flex: none;
	min-width: 72px;
	padding: 5px 10px;
	color: #fff;
	font-size: 0.82rem;
	font-weight: 800;
	text-align: center;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 999px;
	transition: background var(--d2), color var(--d2);
}

.s3m-temp[data-t='cold'] output {
	color: #d6e6ff;
	background: rgba(106, 168, 255, 0.3);
}

.s3m-temp[data-t='hot'] output {
	color: #ffe0d2;
	background: rgba(255, 138, 92, 0.3);
}

.s3m-temp-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.s3m-temp-row .s3m-range {
	flex: 1;
	min-width: 0;
	margin: 0;
}

.s3m-temp-end {
	flex: none;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	transition: transform var(--d3) var(--spring), background var(--d2), box-shadow var(--d2);
}

.s3m-temp-end .s3m-ico {
	width: 22px;
	height: 22px;
}

.s3m-temp-end.s3m-cold {
	color: var(--s3m-cold);
	background: rgba(106, 168, 255, 0.14);
}

.s3m-temp-end.s3m-hot {
	color: var(--s3m-hot);
	background: rgba(255, 138, 92, 0.14);
}

.s3m-temp[data-t='cold'] .s3m-temp-end.s3m-cold {
	background: rgba(106, 168, 255, 0.32);
	box-shadow: 0 0 18px rgba(106, 168, 255, 0.55);
	transform: scale(1.16);
}

.s3m-temp[data-t='hot'] .s3m-temp-end.s3m-hot {
	background: rgba(255, 138, 92, 0.32);
	box-shadow: 0 0 18px rgba(255, 138, 92, 0.55);
	transform: scale(1.16);
}

.s3m-temp-lbl {
	display: flex;
	justify-content: space-between;
	margin: 0 46px;
	color: var(--s3m-faint);
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.s3m-acard-x {
	min-height: 4.4em;
	margin: 12px 0 0;
	color: var(--s3m-dim);
	font-size: 0.88rem;
	line-height: 1.45;
}

.s3m-range-temp::-webkit-slider-runnable-track {
	background: linear-gradient(90deg, var(--s3m-cold), #d3dcf0 50%, var(--s3m-hot));
}

.s3m-range-temp::-moz-range-track {
	background: linear-gradient(90deg, var(--s3m-cold), #d3dcf0 50%, var(--s3m-hot));
}

.s3m-tag {
	flex: none;
	margin-left: auto;
	padding: 2px 6px;
	color: var(--s3m-accent);
	font-size: 10px;
	font-style: normal;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: rgba(61, 224, 196, 0.12);
	border-radius: 6px;
}

.s3m-plist-ul > li.s3m-wide {
	grid-column: 1 / -1;
}

/* Caption bar: slides in over the bottom of the stage while an action runs. */
.s3m-caption {
	--cc: var(--s3m-accent);
	position: absolute;
	z-index: 17;
	left: calc(var(--s3m-pw-l) + var(--s3m-gap) * 2);
	right: calc(var(--s3m-pw-r) + var(--s3m-gap) * 2);
	bottom: calc(var(--s3m-gap) + 104px + var(--s3m-pad, 0px));
	width: fit-content;
	max-width: min(540px, calc(100% - var(--s3m-pw-l) - var(--s3m-pw-r) - var(--s3m-gap) * 4));
	min-width: 260px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 18px 12px 16px;
	pointer-events: none;
	background: var(--s3m-glass-strong);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	border: 1px solid var(--s3m-line2);
	border-left: 4px solid var(--cc);
	border-radius: 16px;
	box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
	opacity: 0;
	transform: translateY(26px);
	transition: opacity var(--d2), transform var(--d3) var(--ease);
}

.s3m-caption[hidden] {
	display: none;
}

.s3m-caption.is-in {
	opacity: 1;
	transform: none;
}

.s3m-caption[data-id='cold'] {
	--cc: var(--s3m-cold);
}

.s3m-caption[data-id='hot'] {
	--cc: var(--s3m-hot);
}

.s3m-caption[data-id='sun'] {
	--cc: #ffc857;
}

.s3m-caption[data-id='renew'] {
	--cc: #5fe3a1;
}

.s3m-caption[data-id='touch'] {
	--cc: #c9a7ff;
}

.s3m-cap-main {
	min-width: 0;
}

.s3m-cap-main b {
	display: block;
	margin-bottom: 2px;
	color: #fff;
	font: 700 1.02rem / 1.2 var(--s3m-serif);
}

.s3m-cap-main span {
	display: block;
	color: var(--s3m-ink);
	font-size: 0.88rem;
	line-height: 1.4;
}

.s3m-cap-day {
	flex: none;
	padding: 5px 10px;
	color: var(--s3m-accent-ink);
	font-size: 0.78rem;
	font-style: normal;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	background: var(--cc);
	border-radius: 999px;
}

.s3m-cap-day[hidden] {
	display: none;
}

/* Not-to-scale note: bottom left of the open stage. */
.s3m-note {
	position: absolute;
	z-index: 14;
	left: calc(var(--s3m-pw-l) + var(--s3m-gap) * 2);
	bottom: calc(var(--s3m-gap) + 50px);
	max-width: 220px;
	margin: 0;
	padding: 6px 10px;
	color: var(--s3m-dim);
	font-size: 0.75rem;
	line-height: 1.35;
	background: var(--s3m-glass);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid var(--s3m-line);
	border-radius: 10px;
}

body.s3m-body .s3m-note a {
	color: var(--s3m-ink);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

body.s3m-body .s3m-note a:hover {
	color: var(--s3m-accent);
}

html:not(.s3m-js) .s3m-note,
.s3m-stage.is-nogl .s3m-note {
	display: none;
}

.s3m-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 */

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

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

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

.s3m-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 help button. Phone: a compact
   chip at the end of the dock row. */
.s3m-dock {
	flex-wrap: wrap;
}

.s3m-next {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 8px 16px 8px 20px;
	color: var(--s3m-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.s3m-body .s3m-next {
	color: var(--s3m-accent);
}

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

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

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

@keyframes s3m-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 help button. */
	.s3m-dock::after {
		content: '';
		order: 2;
		flex-basis: 100%;
		height: 0;
	}

	.s3m-next {
		order: 3;
	}
}

.s3m-pop {
	position: absolute;
	right: 0;
	bottom: 52px;
	z-index: 50;
	width: 300px;
	padding: 14px 16px;
	background: var(--s3m-glass-strong);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	border: 1px solid var(--s3m-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);
}

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

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

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

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

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

.s3m-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(--s3m-line2);
	border-radius: 8px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

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

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

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

.s3m-grip {
	display: none;
}

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

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

	/* No-JS and pre-JS: the info panel is a low bottom sheet. */
	.s3m-stage > .s3m-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;
	}

	.s3m-sheet {
		position: absolute;
		z-index: 25;
		left: 0;
		right: 0;
		bottom: 0;
		height: var(--s3m-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(--s3m-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;
	}

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

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

	.s3m-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);
	}

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

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

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

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

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

	.s3m-sheet .s3m-info,
	.s3m-sheet .s3m-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;
	}

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

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

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

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

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

	.s3m-dock {
		left: var(--s3m-gap);
		right: var(--s3m-gap);
		justify-content: flex-end;
	}

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

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

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

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

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

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

/* ------------------------------------------------------ part card pieces */

.s3m-h2 .s3m-dot {
	display: inline-block;
	margin-right: 4px;
	vertical-align: 1px;
}

.s3m-ch {
	margin: 14px 0 4px;
	color: var(--s3m-faint);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.s3m-card .s3m-what,
.s3m-card .s3m-does {
	margin-bottom: 8px;
}

.s3m-size {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 12px 0;
	padding: 10px 12px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--s3m-line);
	border-radius: 12px;
}

.s3m-size span {
	flex: none;
	color: var(--s3m-faint);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.s3m-size b {
	color: #fff;
	font-size: 0.9rem;
	text-align: right;
}

.s3m-fact {
	margin: 12px 0;
	padding: 10px 12px;
	color: var(--s3m-ink);
	font-size: 0.88rem;
	line-height: 1.45;
	background: rgba(255, 216, 77, 0.08);
	border-left: 3px solid var(--s3m-warm);
	border-radius: 3px 12px 12px 3px;
}

.s3m-fact b {
	color: var(--s3m-warm);
}

.s3m-src {
	margin: 12px 0 0;
	color: var(--s3m-faint);
	font-size: 0.75rem;
	line-height: 1.45;
}

body.s3m-body .s3m-src a {
	color: var(--s3m-dim);
	text-decoration: underline;
	text-underline-offset: 2px;
}

body.s3m-body .s3m-src a:hover {
	color: #fff;
}

/* ------------------------------------------------------------- parts list */

.s3m-plist-ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.s3m-plist .s3m-pgroup:first-child > .s3m-gh {
	margin-top: 4px;
}

.s3m-pbtn {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	min-height: 40px;
	padding: 6px 10px;
	color: var(--s3m-ink);
	font-size: 0.84rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: left;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--s3m-line);
	border-radius: 12px;
	transition: background var(--d2), border-color var(--d2), transform var(--d2) var(--ease);
}

.s3m-pbtn span {
	min-width: 0;
}

.s3m-pbtn:hover {
	background: rgba(255, 255, 255, 0.12);
	transform: translateY(-1px);
}

.s3m-pbtn[aria-pressed='true'] {
	color: #fff;
	background: rgba(61, 224, 196, 0.14);
	border-color: var(--s3m-accent);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (hover: none) {
	.s3m-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) {
	.s3m-next-i {
		animation: none;
	}

	.s3m-caption,
	.s3m-closeup {
		transform: none;
	}

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

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

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

/* ---------------------------------------------- tablet and phone placement */

@media (min-width: 900px) and (max-width: 1099.98px) {
	/* The open stage is only about 200px wide here: no keyboard hint, the note takes its row. */
	.s3m-help-btn {
		display: none;
	}

	.s3m-note {
		right: calc(var(--s3m-pw-r) + var(--s3m-gap) * 2);
		max-width: none;
		text-align: center;
		bottom: calc(var(--s3m-gap) + 50px);
	}

	.s3m-caption {
		min-width: 0;
		bottom: calc(var(--s3m-gap) + 100px);
	}
}

@media (max-width: 899.98px) {
	.s3m-caption {
		left: var(--s3m-gap);
		right: var(--s3m-gap);
		width: auto;
		min-width: 0;
		max-width: 480px;
		bottom: calc(var(--s3m-gap) + var(--s3m-pad, 0px) + 54px);
		padding: 10px 14px 10px 14px;
	}

	.s3m-cap-main b {
		font-size: 0.95rem;
	}

	.s3m-cap-main span {
		font-size: 0.82rem;
	}

	.s3m-note {
		left: var(--s3m-gap);
		right: 128px;
		max-width: none;
		padding: 5px 9px;
		bottom: calc(var(--s3m-gap) + var(--s3m-pad, 0px) + 2px);
		font-size: 0.72rem;
	}
}