/*
 * Interactive Periodic Table: page, toolbar, table, tiles, detail card, 3D view,
 * motion and print.
 *
 * Contract: CONTRACT.md section 6. Themes: tokens on :root (light), on
 * [data-theme=dark] and on the prefers-color-scheme media query; the script only
 * sets the data-theme attribute. The colour tokens (--ipt-cat-*, --ipt-block-*,
 * --ipt-<palette>-N and the -ink pairs) are generated so that every tile
 * background and its text colour pass 4.5:1 in both themes; do not edit them by hand.
 *
 * The stage's data-color picks the colour rule, a tile's own data-cat / data-block /
 * data-bin picks the colour inside it. The script never sets a colour inline.
 *
 * Motion lives in one @media (prefers-reduced-motion: no-preference) block. The
 * quiz panel's own styles sit between the quiz markers.
 */

:root,
:root[data-theme="light"] {
	--ipt-serif: Fraunces, 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
	--ipt-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--ipt-bg: #f3f6fb;
	--ipt-surface: #ffffff;
	--ipt-surface2: #e9eff8;
	--ipt-ink: #0f1b38;
	--ipt-dim: #475b84;
	--ipt-faint: #5d6f95;
	--ipt-line: #d3dcec;
	--ipt-line2: #a9b7d3;
	--ipt-link: #0a6b5e;
	--ipt-accent: #0a7566;
	--ipt-accent-hover: #085c50;
	--ipt-accent-ink: #ffffff;
	--ipt-accent-soft: #d6f1ec;
	--ipt-focus: #0f1b38;
	--ipt-electron: #c2410c;
	--ipt-neutral: #e6ecf7;
	--ipt-neutral-ink: #0f1b38;
	--ipt-ok-bg: #c9f0d6;
	--ipt-ok-ink: #0b4a24;
	--ipt-bad-bg: #fbd3cf;
	--ipt-bad-ink: #7a1710;
	--ipt-nodata: #eef1f7;
	--ipt-nodata-ink: #0f1b38;
	--ipt-nodata-line: #c3cde0;
	--ipt-shadow: 0 10px 30px rgba(15, 27, 56, 0.16);
	--ipt-seq-blue-0: #e3f0fe;
	--ipt-seq-blue-ink-0: #0b1220;
	--ipt-seq-blue-1: #c1defe;
	--ipt-seq-blue-ink-1: #0b1220;
	--ipt-seq-blue-2: #9ac8fd;
	--ipt-seq-blue-ink-2: #0b1220;
	--ipt-seq-blue-3: #78aef2;
	--ipt-seq-blue-ink-3: #0b1220;
	--ipt-seq-blue-4: #5b90dd;
	--ipt-seq-blue-ink-4: #0b1220;
	--ipt-seq-blue-5: #4069b6;
	--ipt-seq-blue-ink-5: #fbfdff;
	--ipt-seq-blue-6: #2d498b;
	--ipt-seq-blue-ink-6: #fbfdff;
	--ipt-seq-teal-0: #d8f5f5;
	--ipt-seq-teal-ink-0: #0b1220;
	--ipt-seq-teal-1: #b1e7e6;
	--ipt-seq-teal-ink-1: #0b1220;
	--ipt-seq-teal-2: #88d4d3;
	--ipt-seq-teal-ink-2: #0b1220;
	--ipt-seq-teal-3: #5ebdbc;
	--ipt-seq-teal-ink-3: #0b1220;
	--ipt-seq-teal-4: #2ba2a5;
	--ipt-seq-teal-ink-4: #0b1220;
	--ipt-seq-teal-5: #067b80;
	--ipt-seq-teal-ink-5: #fbfdff;
	--ipt-seq-teal-6: #02585f;
	--ipt-seq-teal-ink-6: #fbfdff;
	--ipt-seq-purple-0: #f5e9fe;
	--ipt-seq-purple-ink-0: #0b1220;
	--ipt-seq-purple-1: #e6d1fa;
	--ipt-seq-purple-ink-1: #0b1220;
	--ipt-seq-purple-2: #d2b5f3;
	--ipt-seq-purple-ink-2: #0b1220;
	--ipt-seq-purple-3: #ba98e9;
	--ipt-seq-purple-ink-3: #0b1220;
	--ipt-seq-purple-4: #9d79d7;
	--ipt-seq-purple-ink-4: #0b1220;
	--ipt-seq-purple-5: #7756b1;
	--ipt-seq-purple-ink-5: #fbfdff;
	--ipt-seq-purple-6: #533c87;
	--ipt-seq-purple-ink-6: #fbfdff;
	--ipt-seq-orange-0: #ffebd2;
	--ipt-seq-orange-ink-0: #0b1220;
	--ipt-seq-orange-1: #ffd2a2;
	--ipt-seq-orange-ink-1: #0b1220;
	--ipt-seq-orange-2: #fcb26f;
	--ipt-seq-orange-ink-2: #0b1220;
	--ipt-seq-orange-3: #f18f40;
	--ipt-seq-orange-ink-3: #0b1220;
	--ipt-seq-orange-4: #da6c1e;
	--ipt-seq-orange-ink-4: #0b1220;
	--ipt-seq-orange-5: #ab4b16;
	--ipt-seq-orange-ink-5: #fbfdff;
	--ipt-seq-orange-6: #81300f;
	--ipt-seq-orange-ink-6: #fbfdff;
	--ipt-heat-0: #f9f0ba;
	--ipt-heat-ink-0: #0b1220;
	--ipt-heat-1: #fcd583;
	--ipt-heat-ink-1: #0b1220;
	--ipt-heat-2: #ffb161;
	--ipt-heat-ink-2: #0b1220;
	--ipt-heat-3: #fb864d;
	--ipt-heat-ink-3: #0b1220;
	--ipt-heat-4: #e8594d;
	--ipt-heat-ink-4: #0b1220;
	--ipt-heat-5: #b9334b;
	--ipt-heat-ink-5: #fbfdff;
	--ipt-heat-6: #861f43;
	--ipt-heat-ink-6: #fbfdff;
	--ipt-seq-green-0: #dcf7e1;
	--ipt-seq-green-ink-0: #0b1220;
	--ipt-seq-green-1: #bbe8c3;
	--ipt-seq-green-ink-1: #0b1220;
	--ipt-seq-green-2: #95d7a2;
	--ipt-seq-green-ink-2: #0b1220;
	--ipt-seq-green-3: #6cc185;
	--ipt-seq-green-ink-3: #0b1220;
	--ipt-seq-green-4: #47a56b;
	--ipt-seq-green-ink-4: #0b1220;
	--ipt-seq-green-5: #217f4f;
	--ipt-seq-green-ink-5: #fbfdff;
	--ipt-seq-green-6: #015d38;
	--ipt-seq-green-ink-6: #fbfdff;
	--ipt-seq-gold-0: #f9efc9;
	--ipt-seq-gold-ink-0: #0b1220;
	--ipt-seq-gold-1: #f0da95;
	--ipt-seq-gold-ink-1: #0b1220;
	--ipt-seq-gold-2: #e4c062;
	--ipt-seq-gold-ink-2: #0b1220;
	--ipt-seq-gold-3: #d4a22a;
	--ipt-seq-gold-ink-3: #0b1220;
	--ipt-seq-gold-4: #b98408;
	--ipt-seq-gold-ink-4: #0b1220;
	--ipt-seq-gold-5: #916102;
	--ipt-seq-gold-ink-5: #fbfdff;
	--ipt-seq-gold-6: #6c4302;
	--ipt-seq-gold-ink-6: #fbfdff;
	--ipt-cat-alkali: #ffc4bb;
	--ipt-cat-alkali-ink: #0b1220;
	--ipt-cat-alkaline-earth: #fdc89b;
	--ipt-cat-alkaline-earth-ink: #0b1220;
	--ipt-cat-transition: #e3d594;
	--ipt-cat-transition-ink: #0b1220;
	--ipt-cat-post-transition: #b7e3ad;
	--ipt-cat-post-transition-ink: #0b1220;
	--ipt-cat-metalloid: #95e7d4;
	--ipt-cat-metalloid-ink: #0b1220;
	--ipt-cat-nonmetal: #8fe4f5;
	--ipt-cat-nonmetal-ink: #0b1220;
	--ipt-cat-halogen: #b6d8ff;
	--ipt-cat-halogen-ink: #0b1220;
	--ipt-cat-noble-gas: #d8cbfe;
	--ipt-cat-noble-gas-ink: #0b1220;
	--ipt-cat-lanthanide: #f4c1f1;
	--ipt-cat-lanthanide-ink: #0b1220;
	--ipt-cat-actinide: #fec0d4;
	--ipt-cat-actinide-ink: #0b1220;
	--ipt-cat-unknown: #d1d1d1;
	--ipt-cat-unknown-ink: #0b1220;
	--ipt-block-s: #fec4bc;
	--ipt-block-s-ink: #0b1220;
	--ipt-block-p: #88e7ec;
	--ipt-block-p-ink: #0b1220;
	--ipt-block-d: #e4d590;
	--ipt-block-d-ink: #0b1220;
	--ipt-block-f: #f3c0f5;
	--ipt-block-f-ink: #0b1220;
	--ipt-ancient: #d7b894;
	--ipt-ancient-ink: #0b1220;
}

:root[data-theme="dark"] {
	--ipt-bg: #070d1c;
	--ipt-surface: #101a33;
	--ipt-surface2: #18253f;
	--ipt-ink: #e8eefc;
	--ipt-dim: #a9b8d6;
	--ipt-faint: #8d9dc2;
	--ipt-line: #26365a;
	--ipt-line2: #43557f;
	--ipt-link: #5eead4;
	--ipt-accent: #3de0c4;
	--ipt-accent-hover: #6ff0d8;
	--ipt-accent-ink: #04201b;
	--ipt-accent-soft: #123a3d;
	--ipt-focus: #e8eefc;
	--ipt-electron: #ffb454;
	--ipt-neutral: #22304f;
	--ipt-neutral-ink: #e8eefc;
	--ipt-ok-bg: #14532d;
	--ipt-ok-ink: #d1fadf;
	--ipt-bad-bg: #7f1d1d;
	--ipt-bad-ink: #fee2e2;
	--ipt-nodata: #141f38;
	--ipt-nodata-ink: #e8eefc;
	--ipt-nodata-line: #2d3d62;
	--ipt-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
	--ipt-seq-blue-0: #242f3b;
	--ipt-seq-blue-ink-0: #fbfdff;
	--ipt-seq-blue-1: #2b445e;
	--ipt-seq-blue-ink-1: #fbfdff;
	--ipt-seq-blue-2: #345a84;
	--ipt-seq-blue-ink-2: #fbfdff;
	--ipt-seq-blue-3: #4370aa;
	--ipt-seq-blue-ink-3: #fbfdff;
	--ipt-seq-blue-4: #6190d6;
	--ipt-seq-blue-ink-4: #0b1220;
	--ipt-seq-blue-5: #88b1fc;
	--ipt-seq-blue-ink-5: #0b1220;
	--ipt-seq-blue-6: #c1d4fe;
	--ipt-seq-blue-ink-6: #0b1220;
	--ipt-seq-teal-0: #1d3232;
	--ipt-seq-teal-ink-0: #fbfdff;
	--ipt-seq-teal-1: #1d4b4a;
	--ipt-seq-teal-ink-1: #fbfdff;
	--ipt-seq-teal-2: #1e6464;
	--ipt-seq-teal-ink-2: #fbfdff;
	--ipt-seq-teal-3: #247d7d;
	--ipt-seq-teal-ink-3: #fbfdff;
	--ipt-seq-teal-4: #3ea0a3;
	--ipt-seq-teal-ink-4: #0b1220;
	--ipt-seq-teal-5: #69c2c6;
	--ipt-seq-teal-ink-5: #0b1220;
	--ipt-seq-teal-6: #97e3ec;
	--ipt-seq-teal-ink-6: #0b1220;
	--ipt-seq-purple-0: #322a38;
	--ipt-seq-purple-ink-0: #fbfdff;
	--ipt-seq-purple-1: #4a3a59;
	--ipt-seq-purple-ink-1: #fbfdff;
	--ipt-seq-purple-2: #634c7c;
	--ipt-seq-purple-ink-2: #fbfdff;
	--ipt-seq-purple-3: #7b5ea2;
	--ipt-seq-purple-ink-3: #fbfdff;
	--ipt-seq-purple-4: #9b7cd0;
	--ipt-seq-purple-ink-4: #0b1220;
	--ipt-seq-purple-5: #bb9ff7;
	--ipt-seq-purple-ink-5: #0b1220;
	--ipt-seq-purple-6: #d7ccfe;
	--ipt-seq-purple-ink-6: #0b1220;
	--ipt-seq-orange-0: #382b19;
	--ipt-seq-orange-ink-0: #fbfdff;
	--ipt-seq-orange-1: #5b3a11;
	--ipt-seq-orange-ink-1: #fbfdff;
	--ipt-seq-orange-2: #814800;
	--ipt-seq-orange-ink-2: #fbfdff;
	--ipt-seq-orange-3: #a65603;
	--ipt-seq-orange-ink-3: #fbfdff;
	--ipt-seq-orange-4: #d37132;
	--ipt-seq-orange-ink-4: #0b1220;
	--ipt-seq-orange-5: #f3966b;
	--ipt-seq-orange-ink-5: #0b1220;
	--ipt-seq-orange-6: #ffc5b1;
	--ipt-seq-orange-ink-6: #0b1220;
	--ipt-heat-0: #352e00;
	--ipt-heat-ink-0: #fbfdff;
	--ipt-heat-1: #553e01;
	--ipt-heat-ink-1: #fbfdff;
	--ipt-heat-2: #7e4a03;
	--ipt-heat-ink-2: #fbfdff;
	--ipt-heat-3: #b04d15;
	--ipt-heat-ink-3: #fbfdff;
	--ipt-heat-4: #e16155;
	--ipt-heat-ink-4: #0b1220;
	--ipt-heat-5: #fe8894;
	--ipt-heat-ink-5: #0b1220;
	--ipt-heat-6: #ffc1ce;
	--ipt-heat-ink-6: #0b1220;
	--ipt-seq-green-0: #203324;
	--ipt-seq-green-ink-0: #fbfdff;
	--ipt-seq-green-1: #284c30;
	--ipt-seq-green-ink-1: #fbfdff;
	--ipt-seq-green-2: #2e663c;
	--ipt-seq-green-ink-2: #fbfdff;
	--ipt-seq-green-3: #35804e;
	--ipt-seq-green-ink-3: #fbfdff;
	--ipt-seq-green-4: #51a36f;
	--ipt-seq-green-ink-4: #0b1220;
	--ipt-seq-green-5: #78c595;
	--ipt-seq-green-ink-5: #0b1220;
	--ipt-seq-green-6: #a1e7be;
	--ipt-seq-green-ink-6: #0b1220;
	--ipt-seq-gold-0: #352e11;
	--ipt-seq-gold-ink-0: #fbfdff;
	--ipt-seq-gold-1: #514001;
	--ipt-seq-gold-ink-1: #fbfdff;
	--ipt-seq-gold-2: #6e5400;
	--ipt-seq-gold-ink-2: #fbfdff;
	--ipt-seq-gold-3: #8d6803;
	--ipt-seq-gold-ink-3: #fbfdff;
	--ipt-seq-gold-4: #b88512;
	--ipt-seq-gold-ink-4: #0b1220;
	--ipt-seq-gold-5: #dba65a;
	--ipt-seq-gold-ink-5: #0b1220;
	--ipt-seq-gold-6: #fbca93;
	--ipt-seq-gold-ink-6: #0b1220;
	--ipt-cat-alkali: #8b3c34;
	--ipt-cat-alkali-ink: #fbfdff;
	--ipt-cat-alkaline-earth: #814800;
	--ipt-cat-alkaline-earth-ink: #fbfdff;
	--ipt-cat-transition: #665803;
	--ipt-cat-transition-ink: #fbfdff;
	--ipt-cat-post-transition: #336627;
	--ipt-cat-post-transition-ink: #fbfdff;
	--ipt-cat-metalloid: #026758;
	--ipt-cat-metalloid-ink: #fbfdff;
	--ipt-cat-nonmetal: #016372;
	--ipt-cat-nonmetal-ink: #fbfdff;
	--ipt-cat-halogen: #225a93;
	--ipt-cat-halogen-ink: #fbfdff;
	--ipt-cat-noble-gas: #5e498e;
	--ipt-cat-noble-gas-ink: #fbfdff;
	--ipt-cat-lanthanide: #783f77;
	--ipt-cat-lanthanide-ink: #fbfdff;
	--ipt-cat-actinide: #873a58;
	--ipt-cat-actinide-ink: #fbfdff;
	--ipt-cat-unknown: #4d4d4d;
	--ipt-cat-unknown-ink: #fbfdff;
	--ipt-block-s: #8b3c34;
	--ipt-block-s-ink: #fbfdff;
	--ipt-block-p: #016569;
	--ipt-block-p-ink: #fbfdff;
	--ipt-block-d: #665803;
	--ipt-block-d-ink: #fbfdff;
	--ipt-block-f: #764079;
	--ipt-block-f-ink: #fbfdff;
	--ipt-ancient: #745837;
	--ipt-ancient-ink: #fbfdff;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--ipt-bg: #070d1c;
		--ipt-surface: #101a33;
		--ipt-surface2: #18253f;
		--ipt-ink: #e8eefc;
		--ipt-dim: #a9b8d6;
		--ipt-faint: #8d9dc2;
		--ipt-line: #26365a;
		--ipt-line2: #43557f;
		--ipt-link: #5eead4;
		--ipt-accent: #3de0c4;
		--ipt-accent-hover: #6ff0d8;
		--ipt-accent-ink: #04201b;
		--ipt-accent-soft: #123a3d;
		--ipt-focus: #e8eefc;
		--ipt-electron: #ffb454;
		--ipt-neutral: #22304f;
		--ipt-neutral-ink: #e8eefc;
		--ipt-ok-bg: #14532d;
		--ipt-ok-ink: #d1fadf;
		--ipt-bad-bg: #7f1d1d;
		--ipt-bad-ink: #fee2e2;
		--ipt-nodata: #141f38;
		--ipt-nodata-ink: #e8eefc;
		--ipt-nodata-line: #2d3d62;
		--ipt-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
		--ipt-seq-blue-0: #242f3b;
		--ipt-seq-blue-ink-0: #fbfdff;
		--ipt-seq-blue-1: #2b445e;
		--ipt-seq-blue-ink-1: #fbfdff;
		--ipt-seq-blue-2: #345a84;
		--ipt-seq-blue-ink-2: #fbfdff;
		--ipt-seq-blue-3: #4370aa;
		--ipt-seq-blue-ink-3: #fbfdff;
		--ipt-seq-blue-4: #6190d6;
		--ipt-seq-blue-ink-4: #0b1220;
		--ipt-seq-blue-5: #88b1fc;
		--ipt-seq-blue-ink-5: #0b1220;
		--ipt-seq-blue-6: #c1d4fe;
		--ipt-seq-blue-ink-6: #0b1220;
		--ipt-seq-teal-0: #1d3232;
		--ipt-seq-teal-ink-0: #fbfdff;
		--ipt-seq-teal-1: #1d4b4a;
		--ipt-seq-teal-ink-1: #fbfdff;
		--ipt-seq-teal-2: #1e6464;
		--ipt-seq-teal-ink-2: #fbfdff;
		--ipt-seq-teal-3: #247d7d;
		--ipt-seq-teal-ink-3: #fbfdff;
		--ipt-seq-teal-4: #3ea0a3;
		--ipt-seq-teal-ink-4: #0b1220;
		--ipt-seq-teal-5: #69c2c6;
		--ipt-seq-teal-ink-5: #0b1220;
		--ipt-seq-teal-6: #97e3ec;
		--ipt-seq-teal-ink-6: #0b1220;
		--ipt-seq-purple-0: #322a38;
		--ipt-seq-purple-ink-0: #fbfdff;
		--ipt-seq-purple-1: #4a3a59;
		--ipt-seq-purple-ink-1: #fbfdff;
		--ipt-seq-purple-2: #634c7c;
		--ipt-seq-purple-ink-2: #fbfdff;
		--ipt-seq-purple-3: #7b5ea2;
		--ipt-seq-purple-ink-3: #fbfdff;
		--ipt-seq-purple-4: #9b7cd0;
		--ipt-seq-purple-ink-4: #0b1220;
		--ipt-seq-purple-5: #bb9ff7;
		--ipt-seq-purple-ink-5: #0b1220;
		--ipt-seq-purple-6: #d7ccfe;
		--ipt-seq-purple-ink-6: #0b1220;
		--ipt-seq-orange-0: #382b19;
		--ipt-seq-orange-ink-0: #fbfdff;
		--ipt-seq-orange-1: #5b3a11;
		--ipt-seq-orange-ink-1: #fbfdff;
		--ipt-seq-orange-2: #814800;
		--ipt-seq-orange-ink-2: #fbfdff;
		--ipt-seq-orange-3: #a65603;
		--ipt-seq-orange-ink-3: #fbfdff;
		--ipt-seq-orange-4: #d37132;
		--ipt-seq-orange-ink-4: #0b1220;
		--ipt-seq-orange-5: #f3966b;
		--ipt-seq-orange-ink-5: #0b1220;
		--ipt-seq-orange-6: #ffc5b1;
		--ipt-seq-orange-ink-6: #0b1220;
		--ipt-heat-0: #352e00;
		--ipt-heat-ink-0: #fbfdff;
		--ipt-heat-1: #553e01;
		--ipt-heat-ink-1: #fbfdff;
		--ipt-heat-2: #7e4a03;
		--ipt-heat-ink-2: #fbfdff;
		--ipt-heat-3: #b04d15;
		--ipt-heat-ink-3: #fbfdff;
		--ipt-heat-4: #e16155;
		--ipt-heat-ink-4: #0b1220;
		--ipt-heat-5: #fe8894;
		--ipt-heat-ink-5: #0b1220;
		--ipt-heat-6: #ffc1ce;
		--ipt-heat-ink-6: #0b1220;
		--ipt-seq-green-0: #203324;
		--ipt-seq-green-ink-0: #fbfdff;
		--ipt-seq-green-1: #284c30;
		--ipt-seq-green-ink-1: #fbfdff;
		--ipt-seq-green-2: #2e663c;
		--ipt-seq-green-ink-2: #fbfdff;
		--ipt-seq-green-3: #35804e;
		--ipt-seq-green-ink-3: #fbfdff;
		--ipt-seq-green-4: #51a36f;
		--ipt-seq-green-ink-4: #0b1220;
		--ipt-seq-green-5: #78c595;
		--ipt-seq-green-ink-5: #0b1220;
		--ipt-seq-green-6: #a1e7be;
		--ipt-seq-green-ink-6: #0b1220;
		--ipt-seq-gold-0: #352e11;
		--ipt-seq-gold-ink-0: #fbfdff;
		--ipt-seq-gold-1: #514001;
		--ipt-seq-gold-ink-1: #fbfdff;
		--ipt-seq-gold-2: #6e5400;
		--ipt-seq-gold-ink-2: #fbfdff;
		--ipt-seq-gold-3: #8d6803;
		--ipt-seq-gold-ink-3: #fbfdff;
		--ipt-seq-gold-4: #b88512;
		--ipt-seq-gold-ink-4: #0b1220;
		--ipt-seq-gold-5: #dba65a;
		--ipt-seq-gold-ink-5: #0b1220;
		--ipt-seq-gold-6: #fbca93;
		--ipt-seq-gold-ink-6: #0b1220;
		--ipt-cat-alkali: #8b3c34;
		--ipt-cat-alkali-ink: #fbfdff;
		--ipt-cat-alkaline-earth: #814800;
		--ipt-cat-alkaline-earth-ink: #fbfdff;
		--ipt-cat-transition: #665803;
		--ipt-cat-transition-ink: #fbfdff;
		--ipt-cat-post-transition: #336627;
		--ipt-cat-post-transition-ink: #fbfdff;
		--ipt-cat-metalloid: #026758;
		--ipt-cat-metalloid-ink: #fbfdff;
		--ipt-cat-nonmetal: #016372;
		--ipt-cat-nonmetal-ink: #fbfdff;
		--ipt-cat-halogen: #225a93;
		--ipt-cat-halogen-ink: #fbfdff;
		--ipt-cat-noble-gas: #5e498e;
		--ipt-cat-noble-gas-ink: #fbfdff;
		--ipt-cat-lanthanide: #783f77;
		--ipt-cat-lanthanide-ink: #fbfdff;
		--ipt-cat-actinide: #873a58;
		--ipt-cat-actinide-ink: #fbfdff;
		--ipt-cat-unknown: #4d4d4d;
		--ipt-cat-unknown-ink: #fbfdff;
		--ipt-block-s: #8b3c34;
		--ipt-block-s-ink: #fbfdff;
		--ipt-block-p: #016569;
		--ipt-block-p-ink: #fbfdff;
		--ipt-block-d: #665803;
		--ipt-block-d-ink: #fbfdff;
		--ipt-block-f: #764079;
		--ipt-block-f-ink: #fbfdff;
		--ipt-ancient: #745837;
		--ipt-ancient-ink: #fbfdff;
	}
}

/* Print is always light, whatever the theme. The repeated :root outranks the theme blocks. */
@media print {
	:root:root:root {
		--ipt-bg: #f3f6fb;
		--ipt-surface: #ffffff;
		--ipt-surface2: #e9eff8;
		--ipt-ink: #0f1b38;
		--ipt-dim: #475b84;
		--ipt-faint: #5d6f95;
		--ipt-line: #d3dcec;
		--ipt-line2: #a9b7d3;
		--ipt-link: #0a6b5e;
		--ipt-accent: #0a7566;
		--ipt-accent-hover: #085c50;
		--ipt-accent-ink: #ffffff;
		--ipt-accent-soft: #d6f1ec;
		--ipt-focus: #0f1b38;
		--ipt-electron: #c2410c;
		--ipt-neutral: #e6ecf7;
		--ipt-neutral-ink: #0f1b38;
		--ipt-ok-bg: #c9f0d6;
		--ipt-ok-ink: #0b4a24;
		--ipt-bad-bg: #fbd3cf;
		--ipt-bad-ink: #7a1710;
		--ipt-nodata: #eef1f7;
		--ipt-nodata-ink: #0f1b38;
		--ipt-nodata-line: #c3cde0;
		--ipt-shadow: 0 10px 30px rgba(15, 27, 56, 0.16);
		--ipt-seq-blue-0: #e3f0fe;
		--ipt-seq-blue-ink-0: #0b1220;
		--ipt-seq-blue-1: #c1defe;
		--ipt-seq-blue-ink-1: #0b1220;
		--ipt-seq-blue-2: #9ac8fd;
		--ipt-seq-blue-ink-2: #0b1220;
		--ipt-seq-blue-3: #78aef2;
		--ipt-seq-blue-ink-3: #0b1220;
		--ipt-seq-blue-4: #5b90dd;
		--ipt-seq-blue-ink-4: #0b1220;
		--ipt-seq-blue-5: #4069b6;
		--ipt-seq-blue-ink-5: #fbfdff;
		--ipt-seq-blue-6: #2d498b;
		--ipt-seq-blue-ink-6: #fbfdff;
		--ipt-seq-teal-0: #d8f5f5;
		--ipt-seq-teal-ink-0: #0b1220;
		--ipt-seq-teal-1: #b1e7e6;
		--ipt-seq-teal-ink-1: #0b1220;
		--ipt-seq-teal-2: #88d4d3;
		--ipt-seq-teal-ink-2: #0b1220;
		--ipt-seq-teal-3: #5ebdbc;
		--ipt-seq-teal-ink-3: #0b1220;
		--ipt-seq-teal-4: #2ba2a5;
		--ipt-seq-teal-ink-4: #0b1220;
		--ipt-seq-teal-5: #067b80;
		--ipt-seq-teal-ink-5: #fbfdff;
		--ipt-seq-teal-6: #02585f;
		--ipt-seq-teal-ink-6: #fbfdff;
		--ipt-seq-purple-0: #f5e9fe;
		--ipt-seq-purple-ink-0: #0b1220;
		--ipt-seq-purple-1: #e6d1fa;
		--ipt-seq-purple-ink-1: #0b1220;
		--ipt-seq-purple-2: #d2b5f3;
		--ipt-seq-purple-ink-2: #0b1220;
		--ipt-seq-purple-3: #ba98e9;
		--ipt-seq-purple-ink-3: #0b1220;
		--ipt-seq-purple-4: #9d79d7;
		--ipt-seq-purple-ink-4: #0b1220;
		--ipt-seq-purple-5: #7756b1;
		--ipt-seq-purple-ink-5: #fbfdff;
		--ipt-seq-purple-6: #533c87;
		--ipt-seq-purple-ink-6: #fbfdff;
		--ipt-seq-orange-0: #ffebd2;
		--ipt-seq-orange-ink-0: #0b1220;
		--ipt-seq-orange-1: #ffd2a2;
		--ipt-seq-orange-ink-1: #0b1220;
		--ipt-seq-orange-2: #fcb26f;
		--ipt-seq-orange-ink-2: #0b1220;
		--ipt-seq-orange-3: #f18f40;
		--ipt-seq-orange-ink-3: #0b1220;
		--ipt-seq-orange-4: #da6c1e;
		--ipt-seq-orange-ink-4: #0b1220;
		--ipt-seq-orange-5: #ab4b16;
		--ipt-seq-orange-ink-5: #fbfdff;
		--ipt-seq-orange-6: #81300f;
		--ipt-seq-orange-ink-6: #fbfdff;
		--ipt-heat-0: #f9f0ba;
		--ipt-heat-ink-0: #0b1220;
		--ipt-heat-1: #fcd583;
		--ipt-heat-ink-1: #0b1220;
		--ipt-heat-2: #ffb161;
		--ipt-heat-ink-2: #0b1220;
		--ipt-heat-3: #fb864d;
		--ipt-heat-ink-3: #0b1220;
		--ipt-heat-4: #e8594d;
		--ipt-heat-ink-4: #0b1220;
		--ipt-heat-5: #b9334b;
		--ipt-heat-ink-5: #fbfdff;
		--ipt-heat-6: #861f43;
		--ipt-heat-ink-6: #fbfdff;
		--ipt-seq-green-0: #dcf7e1;
		--ipt-seq-green-ink-0: #0b1220;
		--ipt-seq-green-1: #bbe8c3;
		--ipt-seq-green-ink-1: #0b1220;
		--ipt-seq-green-2: #95d7a2;
		--ipt-seq-green-ink-2: #0b1220;
		--ipt-seq-green-3: #6cc185;
		--ipt-seq-green-ink-3: #0b1220;
		--ipt-seq-green-4: #47a56b;
		--ipt-seq-green-ink-4: #0b1220;
		--ipt-seq-green-5: #217f4f;
		--ipt-seq-green-ink-5: #fbfdff;
		--ipt-seq-green-6: #015d38;
		--ipt-seq-green-ink-6: #fbfdff;
		--ipt-seq-gold-0: #f9efc9;
		--ipt-seq-gold-ink-0: #0b1220;
		--ipt-seq-gold-1: #f0da95;
		--ipt-seq-gold-ink-1: #0b1220;
		--ipt-seq-gold-2: #e4c062;
		--ipt-seq-gold-ink-2: #0b1220;
		--ipt-seq-gold-3: #d4a22a;
		--ipt-seq-gold-ink-3: #0b1220;
		--ipt-seq-gold-4: #b98408;
		--ipt-seq-gold-ink-4: #0b1220;
		--ipt-seq-gold-5: #916102;
		--ipt-seq-gold-ink-5: #fbfdff;
		--ipt-seq-gold-6: #6c4302;
		--ipt-seq-gold-ink-6: #fbfdff;
		--ipt-cat-alkali: #ffc4bb;
		--ipt-cat-alkali-ink: #0b1220;
		--ipt-cat-alkaline-earth: #fdc89b;
		--ipt-cat-alkaline-earth-ink: #0b1220;
		--ipt-cat-transition: #e3d594;
		--ipt-cat-transition-ink: #0b1220;
		--ipt-cat-post-transition: #b7e3ad;
		--ipt-cat-post-transition-ink: #0b1220;
		--ipt-cat-metalloid: #95e7d4;
		--ipt-cat-metalloid-ink: #0b1220;
		--ipt-cat-nonmetal: #8fe4f5;
		--ipt-cat-nonmetal-ink: #0b1220;
		--ipt-cat-halogen: #b6d8ff;
		--ipt-cat-halogen-ink: #0b1220;
		--ipt-cat-noble-gas: #d8cbfe;
		--ipt-cat-noble-gas-ink: #0b1220;
		--ipt-cat-lanthanide: #f4c1f1;
		--ipt-cat-lanthanide-ink: #0b1220;
		--ipt-cat-actinide: #fec0d4;
		--ipt-cat-actinide-ink: #0b1220;
		--ipt-cat-unknown: #d1d1d1;
		--ipt-cat-unknown-ink: #0b1220;
		--ipt-block-s: #fec4bc;
		--ipt-block-s-ink: #0b1220;
		--ipt-block-p: #88e7ec;
		--ipt-block-p-ink: #0b1220;
		--ipt-block-d: #e4d590;
		--ipt-block-d-ink: #0b1220;
		--ipt-block-f: #f3c0f5;
		--ipt-block-f-ink: #0b1220;
		--ipt-ancient: #d7b894;
		--ipt-ancient-ink: #0b1220;
	}
}

/* Palette per Colour by mode: the stage exposes --p0..--p6 and the matching ink --pi0..--pi6. */
:where(.ipt-stage[data-color="mass"]) {
	--p0: var(--ipt-seq-blue-0); --pi0: var(--ipt-seq-blue-ink-0);
	--p1: var(--ipt-seq-blue-1); --pi1: var(--ipt-seq-blue-ink-1);
	--p2: var(--ipt-seq-blue-2); --pi2: var(--ipt-seq-blue-ink-2);
	--p3: var(--ipt-seq-blue-3); --pi3: var(--ipt-seq-blue-ink-3);
	--p4: var(--ipt-seq-blue-4); --pi4: var(--ipt-seq-blue-ink-4);
	--p5: var(--ipt-seq-blue-5); --pi5: var(--ipt-seq-blue-ink-5);
	--p6: var(--ipt-seq-blue-6); --pi6: var(--ipt-seq-blue-ink-6);
}
:where(.ipt-stage[data-color="radius"]) {
	--p0: var(--ipt-seq-teal-0); --pi0: var(--ipt-seq-teal-ink-0);
	--p1: var(--ipt-seq-teal-1); --pi1: var(--ipt-seq-teal-ink-1);
	--p2: var(--ipt-seq-teal-2); --pi2: var(--ipt-seq-teal-ink-2);
	--p3: var(--ipt-seq-teal-3); --pi3: var(--ipt-seq-teal-ink-3);
	--p4: var(--ipt-seq-teal-4); --pi4: var(--ipt-seq-teal-ink-4);
	--p5: var(--ipt-seq-teal-5); --pi5: var(--ipt-seq-teal-ink-5);
	--p6: var(--ipt-seq-teal-6); --pi6: var(--ipt-seq-teal-ink-6);
}
:where(.ipt-stage[data-color="en"]) {
	--p0: var(--ipt-seq-purple-0); --pi0: var(--ipt-seq-purple-ink-0);
	--p1: var(--ipt-seq-purple-1); --pi1: var(--ipt-seq-purple-ink-1);
	--p2: var(--ipt-seq-purple-2); --pi2: var(--ipt-seq-purple-ink-2);
	--p3: var(--ipt-seq-purple-3); --pi3: var(--ipt-seq-purple-ink-3);
	--p4: var(--ipt-seq-purple-4); --pi4: var(--ipt-seq-purple-ink-4);
	--p5: var(--ipt-seq-purple-5); --pi5: var(--ipt-seq-purple-ink-5);
	--p6: var(--ipt-seq-purple-6); --pi6: var(--ipt-seq-purple-ink-6);
}
:where(.ipt-stage[data-color="ie"]) {
	--p0: var(--ipt-seq-orange-0); --pi0: var(--ipt-seq-orange-ink-0);
	--p1: var(--ipt-seq-orange-1); --pi1: var(--ipt-seq-orange-ink-1);
	--p2: var(--ipt-seq-orange-2); --pi2: var(--ipt-seq-orange-ink-2);
	--p3: var(--ipt-seq-orange-3); --pi3: var(--ipt-seq-orange-ink-3);
	--p4: var(--ipt-seq-orange-4); --pi4: var(--ipt-seq-orange-ink-4);
	--p5: var(--ipt-seq-orange-5); --pi5: var(--ipt-seq-orange-ink-5);
	--p6: var(--ipt-seq-orange-6); --pi6: var(--ipt-seq-orange-ink-6);
}
:where(.ipt-stage[data-color="mp"]) {
	--p0: var(--ipt-heat-0); --pi0: var(--ipt-heat-ink-0);
	--p1: var(--ipt-heat-1); --pi1: var(--ipt-heat-ink-1);
	--p2: var(--ipt-heat-2); --pi2: var(--ipt-heat-ink-2);
	--p3: var(--ipt-heat-3); --pi3: var(--ipt-heat-ink-3);
	--p4: var(--ipt-heat-4); --pi4: var(--ipt-heat-ink-4);
	--p5: var(--ipt-heat-5); --pi5: var(--ipt-heat-ink-5);
	--p6: var(--ipt-heat-6); --pi6: var(--ipt-heat-ink-6);
}
:where(.ipt-stage[data-color="bp"]) {
	--p0: var(--ipt-heat-0); --pi0: var(--ipt-heat-ink-0);
	--p1: var(--ipt-heat-1); --pi1: var(--ipt-heat-ink-1);
	--p2: var(--ipt-heat-2); --pi2: var(--ipt-heat-ink-2);
	--p3: var(--ipt-heat-3); --pi3: var(--ipt-heat-ink-3);
	--p4: var(--ipt-heat-4); --pi4: var(--ipt-heat-ink-4);
	--p5: var(--ipt-heat-5); --pi5: var(--ipt-heat-ink-5);
	--p6: var(--ipt-heat-6); --pi6: var(--ipt-heat-ink-6);
}
:where(.ipt-stage[data-color="density"]) {
	--p0: var(--ipt-seq-green-0); --pi0: var(--ipt-seq-green-ink-0);
	--p1: var(--ipt-seq-green-1); --pi1: var(--ipt-seq-green-ink-1);
	--p2: var(--ipt-seq-green-2); --pi2: var(--ipt-seq-green-ink-2);
	--p3: var(--ipt-seq-green-3); --pi3: var(--ipt-seq-green-ink-3);
	--p4: var(--ipt-seq-green-4); --pi4: var(--ipt-seq-green-ink-4);
	--p5: var(--ipt-seq-green-5); --pi5: var(--ipt-seq-green-ink-5);
	--p6: var(--ipt-seq-green-6); --pi6: var(--ipt-seq-green-ink-6);
}
:where(.ipt-stage[data-color="year"]) {
	--p0: var(--ipt-seq-gold-0); --pi0: var(--ipt-seq-gold-ink-0);
	--p1: var(--ipt-seq-gold-1); --pi1: var(--ipt-seq-gold-ink-1);
	--p2: var(--ipt-seq-gold-2); --pi2: var(--ipt-seq-gold-ink-2);
	--p3: var(--ipt-seq-gold-3); --pi3: var(--ipt-seq-gold-ink-3);
	--p4: var(--ipt-seq-gold-4); --pi4: var(--ipt-seq-gold-ink-4);
	--p5: var(--ipt-seq-gold-5); --pi5: var(--ipt-seq-gold-ink-5);
	--p6: var(--ipt-seq-gold-6); --pi6: var(--ipt-seq-gold-ink-6);
}

/* ------------------------------------------------------------------ base */

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

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

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

body.ipt-body a {
	color: var(--ipt-link);
}

body.ipt-body :focus-visible {
	outline: 3px solid var(--ipt-focus);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--ipt-surface);
}

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

button,
input,
select {
	font: inherit;
	color: inherit;
}

.ipt-quiz[hidden],
.ipt-help-pop[hidden],
#ipt-search-list[hidden] {
	display: none;
}

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

/* The masthead and footer stay navy in both themes: the logo is a light-on-dark file. */
.ipt-mast {
	position: relative;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 56px;
	padding: 0 20px;
	color: #e8eefc;
	background: #0b1530;
	border-bottom: 1px solid #263558;
}

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

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

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

body.ipt-body .ipt-nav-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 12px;
	border-radius: 999px;
	color: #e8eefc;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	list-style: none;
	cursor: pointer;
}

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

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

.ipt-menu {
	position: relative;
}

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

.ipt-menu-list {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	z-index: 50;
	min-width: 230px;
	max-height: 70vh;
	overflow-y: auto;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: #0f1b3a;
	border: 1px solid #2b3d68;
	border-radius: 14px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

body.ipt-body .ipt-menu-list a {
	display: block;
	padding: 10px 12px;
	border-radius: 8px;
	color: #e8eefc;
	font-size: 0.9rem;
	text-decoration: none;
}

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

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

.ipt-stage {
	--ipt-tile: 44px;
	--ipt-tg: 2px;
	--ipt-rowh-w: 26px;
	--ipt-hmax: 46px;
	--ipt-colw: clamp(280px, 24vw, 320px);
	position: relative;
	max-width: 1560px;
	margin: 0 auto;
	padding: 18px 12px 28px;
}

.ipt-h1 {
	margin: 0 0 6px;
	color: var(--ipt-ink);
	font: 700 clamp(1.55rem, 4.2vw, 2.3rem) / 1.15 var(--ipt-serif);
	letter-spacing: -0.012em;
	text-wrap: balance;
}

.ipt-lede {
	max-width: 90ch;
	margin: 0 0 12px;
	color: var(--ipt-dim);
	font-size: 1rem;
	line-height: 1.5;
}

.ipt-noscript {
	margin: 0 0 12px;
	padding: 8px 12px;
	color: var(--ipt-ink);
	font-size: 0.9rem;
	background: var(--ipt-surface2);
	border-left: 3px solid var(--ipt-accent);
	border-radius: 3px 8px 8px 3px;
}

/* ----------------------------------------------------------------- toolbar */

.ipt-toolbar {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px 14px;
	align-items: end;
	margin-bottom: 12px;
}

.ipt-toolbar label,
.ipt-chips h3 {
	display: block;
	margin: 0 0 4px;
	color: var(--ipt-dim);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ipt-search {
	position: relative;
}

.ipt-search input,
.ipt-colour select {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 0 14px;
	color: var(--ipt-ink);
	font-size: 1rem;
	background-color: var(--ipt-surface);
	border: 1px solid var(--ipt-line2);
	border-radius: 12px;
}

.ipt-search input:focus {
	border-color: var(--ipt-accent);
	box-shadow: 0 0 0 3px var(--ipt-accent-soft);
}

.ipt-search input::placeholder {
	color: var(--ipt-faint);
}

.ipt-colour select {
	padding-right: 38px;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--ipt-dim) 50%),
		linear-gradient(135deg, var(--ipt-dim) 50%, transparent 50%);
	background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

#ipt-search-list {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 4px);
	z-index: 35;
	max-height: min(360px, 60vh);
	overflow-y: auto;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--ipt-surface);
	border: 1px solid var(--ipt-line2);
	border-radius: 12px;
	box-shadow: var(--ipt-shadow);
}

#ipt-search-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 6px 10px;
	border-radius: 8px;
	cursor: pointer;
}

#ipt-search-list li[aria-selected="true"],
#ipt-search-list li:hover {
	background: var(--ipt-accent-soft);
}

.ipt-temp-row {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
}

.ipt-temp-row input[type="range"] {
	flex: 1 1 140px;
	min-width: 0;
	height: 44px;
	margin: 0;
	background: transparent;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.ipt-temp-row input[type="range"]::-webkit-slider-runnable-track {
	height: 10px;
	background: linear-gradient(90deg, #4d8fe6, #9fd3f5 20%, #ffd978 45%, #ff9d4d 68%, #e0453d 88%, #8a1d44);
	border: 1px solid var(--ipt-line2);
	border-radius: 999px;
}

.ipt-temp-row input[type="range"]::-moz-range-track {
	height: 10px;
	background: linear-gradient(90deg, #4d8fe6, #9fd3f5 20%, #ffd978 45%, #ff9d4d 68%, #e0453d 88%, #8a1d44);
	border: 1px solid var(--ipt-line2);
	border-radius: 999px;
}

.ipt-temp-row input[type="range"]::-webkit-slider-thumb {
	width: 26px;
	height: 26px;
	margin-top: -9px;
	background: var(--ipt-surface);
	border: 3px solid var(--ipt-ink);
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
	appearance: none;
	-webkit-appearance: none;
}

.ipt-temp-row input[type="range"]::-moz-range-thumb {
	width: 20px;
	height: 20px;
	background: var(--ipt-surface);
	border: 3px solid var(--ipt-ink);
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.ipt-temp-row output {
	flex: 0 0 auto;
	min-width: 11.5ch;
	color: var(--ipt-ink);
	font-size: 0.92rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ipt-tempsum {
	min-height: 1.5em;
	margin: 2px 0 0;
	color: var(--ipt-dim);
	font-size: 0.85rem;
}

.ipt-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.ipt-btn,
.ipt-theme button,
.ipt-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 16px;
	color: var(--ipt-ink);
	font-size: 0.92rem;
	font-weight: 700;
	line-height: 1.1;
	cursor: pointer;
	background: var(--ipt-surface);
	border: 1px solid var(--ipt-line2);
	border-radius: 999px;
}

.ipt-btn:hover,
.ipt-theme button:hover,
.ipt-chip:hover {
	background: var(--ipt-surface2);
}

.ipt-btn[aria-pressed="true"],
.ipt-theme button[aria-pressed="true"],
.ipt-chip[aria-pressed="true"] {
	color: var(--ipt-accent-ink);
	background: var(--ipt-accent);
	border-color: var(--ipt-accent);
}

.ipt-btn-accent {
	color: var(--ipt-accent-ink);
	background: var(--ipt-accent);
	border-color: var(--ipt-accent);
}

.ipt-btn-accent:hover {
	background: var(--ipt-accent-hover);
}

.ipt-btn-quiet {
	flex: 0 0 auto;
	padding: 0 12px;
	font-size: 0.85rem;
}

.ipt-theme {
	display: inline-flex;
	border-radius: 999px;
}

.ipt-theme button {
	padding: 0 14px;
	border-radius: 0;
}

.ipt-theme button:first-child {
	border-radius: 999px 0 0 999px;
}

.ipt-theme button:last-child {
	margin-left: -1px;
	border-radius: 0 999px 999px 0;
}

/* Fit whole table: phone and small tablet only. */
.ipt-fit {
	display: none;
}

.ipt-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.ipt-chips h3 {
	flex: 0 0 100%;
	margin: 0;
}

.ipt-chip {
	min-height: 32px;
	padding: 0 10px;
	font-size: 0.78rem;
	font-weight: 600;
}

.ipt-chip-dot {
	flex: none;
	width: 10px;
	height: 10px;
	background: var(--c);
	border: 1px solid var(--ipt-ink);
	border-radius: 50%;
}

.ipt-chip[aria-pressed="true"] .ipt-chip-dot {
	border-color: var(--ipt-accent-ink);
}

@media (pointer: coarse) {
	.ipt-chip {
		min-height: 44px;
	}
}

/* ------------------------------------------------------------ legend, note */

.ipt-legend {
	min-height: 56px;
	margin-bottom: 4px;
}

.ipt-legend ul {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 6px 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ipt-legend li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.82rem;
	line-height: 1.2;
	white-space: nowrap;
}

.ipt-legend label {
	margin: 0;
	color: var(--ipt-ink);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.ipt-sw {
	flex: none;
	display: inline-block;
	width: 16px;
	height: 16px;
	background: var(--c, var(--ipt-surface2));
	border: 1px solid var(--ipt-line2);
	border-radius: 4px;
}

.ipt-sw-nodata {
	background-color: var(--ipt-nodata);
	background-image: repeating-linear-gradient(135deg, transparent 0 3px, var(--ipt-nodata-line) 3px 4px);
}

.ipt-note {
	min-height: 4.6em;
	max-width: 90ch;
	margin: 0 0 12px;
	padding: 8px 12px;
	color: var(--ipt-ink);
	font-size: 0.9rem;
	line-height: 1.5;
	background: var(--ipt-surface2);
	border-left: 3px solid var(--ipt-accent);
	border-radius: 3px 10px 10px 3px;
}

/* ------------------------------------------------------------------- table */

.ipt-layout {
	display: block;
}

.ipt-tablewrap {
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 4px;
}

.ipt-table {
	position: relative;
	display: grid;
	grid-template-columns: var(--ipt-rowh-w) repeat(18, minmax(var(--ipt-tile), 1fr));
	grid-template-rows: 22px repeat(7, auto) 12px repeat(2, auto);
	gap: var(--ipt-tg);
	width: 100%;
	min-width: calc(var(--ipt-rowh-w) + 18 * var(--ipt-tile) + 18 * var(--ipt-tg));
	margin: 0;
	padding: 0;
	border: 0;
}

.ipt-table caption {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.ipt-table thead,
.ipt-table tbody,
.ipt-table tr {
	display: contents;
}

.ipt-table thead th {
	grid-row: 1;
	align-self: end;
	justify-self: center;
	padding-bottom: 2px;
	color: var(--ipt-dim);
	font-size: 0.7rem;
	font-weight: 700;
}

.ipt-rowh {
	grid-column: 1;
	align-self: center;
	justify-self: center;
	color: var(--ipt-dim);
	font-size: 0.7rem;
	font-weight: 700;
}

.ipt-rowh-f {
	justify-self: end;
	padding-right: 8px;
	font-size: 0.74rem;
	text-align: right;
}

.ipt-gap {
	display: none;
}

.ipt-cell {
	position: relative;
	min-width: 0;
	padding: 0;
	aspect-ratio: 1 / 1.1;
}

.ipt-fref-a {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ipt-dim);
	font-size: 0.66rem;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	border: 1px dashed var(--ipt-line2);
	border-radius: 5px;
}

body.ipt-body .ipt-fref-a {
	color: var(--ipt-dim);
}

/* --------------------------------------------------------------- the tiles */

:where(.ipt-tile) {
	--ipt-popd: min(calc((var(--x, 0) + var(--y, 0)) * 14ms), 450ms);
	--ipt-tc: var(--ipt-cat-unknown);
	--ipt-ti: var(--ipt-cat-unknown-ink);
}

body.ipt-body .ipt-tile {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 2px 1px;
	color: var(--ipt-ti);
	line-height: 1.05;
	text-align: center;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	background-color: var(--ipt-tc);
	border: 1px solid var(--ipt-line2);
	border: 1px solid color-mix(in srgb, var(--ipt-tc), var(--ipt-ink) 24%);
	border-radius: 5px;
	-webkit-tap-highlight-color: transparent;
}

.ipt-z {
	align-self: flex-start;
	margin-left: 2px;
	font-size: 0.56rem;
	font-weight: 700;
	line-height: 1;
}

.ipt-sym {
	display: block;
	font-size: 1.12rem;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.01em;
}

.ipt-name {
	display: none;
	max-width: 100%;
	overflow: hidden;
	font-size: 0.5rem;
	font-weight: 600;
	line-height: 1.15;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ipt-val {
	display: block;
	max-width: 100%;
	overflow: hidden;
	font-size: 0.56rem;
	font-weight: 600;
	line-height: 1.15;
	white-space: nowrap;
}

/* State band (solid line, liquid wave, gas dots) and the "?" badge. */
.ipt-st {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
}

.ipt-st::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background: currentColor;
	opacity: 0.55;
}

.ipt-tile[data-state="l"] .ipt-st::before {
	left: -8px;
	width: calc(100% + 16px);
	height: 5px;
	background:
		linear-gradient(135deg, currentColor 25%, transparent 25%) 0 0 / 8px 5px,
		linear-gradient(225deg, currentColor 25%, transparent 25%) 0 0 / 8px 5px;
	opacity: 0.7;
}

.ipt-tile[data-state="g"] .ipt-st::before {
	height: 5px;
	background: radial-gradient(circle, currentColor 1px, transparent 1.5px) 0 0 / 5px 5px;
	opacity: 0.7;
}

.ipt-tile[data-q="1"] .ipt-st::after {
	content: '?';
	position: absolute;
	top: 1px;
	right: 3px;
	font-size: 0.56rem;
	font-weight: 800;
	line-height: 1;
}

/* Colour: the stage's data-color picks the rule, the tile's own attributes pick the colour. */
:where(.ipt-stage[data-color="cat"]) .ipt-tile[data-cat="alkali"] { --ipt-tc: var(--ipt-cat-alkali); --ipt-ti: var(--ipt-cat-alkali-ink); }
:where(.ipt-stage[data-color="cat"]) .ipt-tile[data-cat="alkaline-earth"] { --ipt-tc: var(--ipt-cat-alkaline-earth); --ipt-ti: var(--ipt-cat-alkaline-earth-ink); }
:where(.ipt-stage[data-color="cat"]) .ipt-tile[data-cat="transition"] { --ipt-tc: var(--ipt-cat-transition); --ipt-ti: var(--ipt-cat-transition-ink); }
:where(.ipt-stage[data-color="cat"]) .ipt-tile[data-cat="post-transition"] { --ipt-tc: var(--ipt-cat-post-transition); --ipt-ti: var(--ipt-cat-post-transition-ink); }
:where(.ipt-stage[data-color="cat"]) .ipt-tile[data-cat="metalloid"] { --ipt-tc: var(--ipt-cat-metalloid); --ipt-ti: var(--ipt-cat-metalloid-ink); }
:where(.ipt-stage[data-color="cat"]) .ipt-tile[data-cat="nonmetal"] { --ipt-tc: var(--ipt-cat-nonmetal); --ipt-ti: var(--ipt-cat-nonmetal-ink); }
:where(.ipt-stage[data-color="cat"]) .ipt-tile[data-cat="halogen"] { --ipt-tc: var(--ipt-cat-halogen); --ipt-ti: var(--ipt-cat-halogen-ink); }
:where(.ipt-stage[data-color="cat"]) .ipt-tile[data-cat="noble-gas"] { --ipt-tc: var(--ipt-cat-noble-gas); --ipt-ti: var(--ipt-cat-noble-gas-ink); }
:where(.ipt-stage[data-color="cat"]) .ipt-tile[data-cat="lanthanide"] { --ipt-tc: var(--ipt-cat-lanthanide); --ipt-ti: var(--ipt-cat-lanthanide-ink); }
:where(.ipt-stage[data-color="cat"]) .ipt-tile[data-cat="actinide"] { --ipt-tc: var(--ipt-cat-actinide); --ipt-ti: var(--ipt-cat-actinide-ink); }
:where(.ipt-stage[data-color="cat"]) .ipt-tile[data-cat="unknown"] { --ipt-tc: var(--ipt-cat-unknown); --ipt-ti: var(--ipt-cat-unknown-ink); }

:where(.ipt-stage[data-color="block"]) .ipt-tile[data-block="s"] { --ipt-tc: var(--ipt-block-s); --ipt-ti: var(--ipt-block-s-ink); }
:where(.ipt-stage[data-color="block"]) .ipt-tile[data-block="p"] { --ipt-tc: var(--ipt-block-p); --ipt-ti: var(--ipt-block-p-ink); }
:where(.ipt-stage[data-color="block"]) .ipt-tile[data-block="d"] { --ipt-tc: var(--ipt-block-d); --ipt-ti: var(--ipt-block-d-ink); }
:where(.ipt-stage[data-color="block"]) .ipt-tile[data-block="f"] { --ipt-tc: var(--ipt-block-f); --ipt-ti: var(--ipt-block-f-ink); }

:where(.ipt-stage:not([data-color="cat"]):not([data-color="block"])) .ipt-tile[data-bin="0"] { --ipt-tc: var(--p0); --ipt-ti: var(--pi0); }
:where(.ipt-stage:not([data-color="cat"]):not([data-color="block"])) .ipt-tile[data-bin="1"] { --ipt-tc: var(--p1); --ipt-ti: var(--pi1); }
:where(.ipt-stage:not([data-color="cat"]):not([data-color="block"])) .ipt-tile[data-bin="2"] { --ipt-tc: var(--p2); --ipt-ti: var(--pi2); }
:where(.ipt-stage:not([data-color="cat"]):not([data-color="block"])) .ipt-tile[data-bin="3"] { --ipt-tc: var(--p3); --ipt-ti: var(--pi3); }
:where(.ipt-stage:not([data-color="cat"]):not([data-color="block"])) .ipt-tile[data-bin="4"] { --ipt-tc: var(--p4); --ipt-ti: var(--pi4); }
:where(.ipt-stage:not([data-color="cat"]):not([data-color="block"])) .ipt-tile[data-bin="5"] { --ipt-tc: var(--p5); --ipt-ti: var(--pi5); }
:where(.ipt-stage:not([data-color="cat"]):not([data-color="block"])) .ipt-tile[data-bin="6"] { --ipt-tc: var(--p6); --ipt-ti: var(--pi6); }
:where(.ipt-stage:not([data-color="cat"]):not([data-color="block"])) .ipt-tile[data-bin="ancient"] { --ipt-tc: var(--ipt-ancient); --ipt-ti: var(--ipt-ancient-ink); }
:where(.ipt-stage:not([data-color="cat"]):not([data-color="block"])) .ipt-tile[data-bin="none"] {
	--ipt-tc: var(--ipt-nodata);
	--ipt-ti: var(--ipt-nodata-ink);
	background-image: repeating-linear-gradient(135deg, transparent 0 5px, var(--ipt-nodata-line) 5px 6px);
}

/* Filters: dimmed tiles keep their place and stay focusable. No opacity (it would flatten the 3D tiles). */
body.ipt-body .ipt-tile.is-dim {
	color: var(--ipt-faint);
	background-color: color-mix(in srgb, var(--ipt-tc) 20%, var(--ipt-surface));
	background-image: none;
	border-color: var(--ipt-line);
	scale: 0.94;
}

/* Selected. */
body.ipt-body .ipt-tile.is-sel,
body.ipt-body .ipt-tile[aria-current="true"] {
	z-index: 4;
	scale: 1.08;
	border-color: var(--ipt-ink);
	box-shadow: 0 0 0 2px var(--ipt-ink), 0 8px 18px rgba(0, 0, 0, 0.3);
}

body.ipt-body .ipt-tile.is-match {
	z-index: 3;
	border-color: var(--ipt-ink);
	box-shadow: 0 0 0 2px var(--ipt-accent), 0 0 14px 2px var(--ipt-accent);
}

/* Quiz: neutral tiles, no names, values or colours. */
body.ipt-body .ipt-stage.is-quiz .ipt-tile {
	--ipt-tc: var(--ipt-neutral);
	--ipt-ti: var(--ipt-neutral-ink);
	background-image: none;
}

.ipt-stage.is-quiz .ipt-name,
.ipt-stage.is-quiz .ipt-val {
	display: none;
}

body.ipt-body .ipt-stage.is-quiz .ipt-tile.is-asked {
	border-color: var(--ipt-ink);
	box-shadow: 0 0 0 3px var(--ipt-accent), 0 0 14px 2px var(--ipt-accent);
}

body.ipt-body .ipt-stage.is-quiz .ipt-tile.is-right {
	--ipt-tc: var(--ipt-ok-bg);
	--ipt-ti: var(--ipt-ok-ink);
	border-color: var(--ipt-ok-ink);
}

body.ipt-body .ipt-stage.is-quiz .ipt-tile.is-wrong {
	--ipt-tc: var(--ipt-bad-bg);
	--ipt-ti: var(--ipt-bad-ink);
	border-color: var(--ipt-bad-ink);
}

.ipt-stage.is-quiz .ipt-detail,
.ipt-stage.is-quiz .ipt-chips,
.ipt-stage.is-quiz .ipt-search {
	display: none;
}

/* ---------------------------------------------------------- detail card */

.ipt-detail {
	position: relative;
	margin-top: 12px;
	padding: 16px;
	color: var(--ipt-ink);
	background: var(--ipt-surface);
	border: 1px solid var(--ipt-line);
	border-radius: 16px;
	box-shadow: var(--ipt-shadow);
}

.ipt-dempty {
	margin: 0;
	padding: 24px 8px;
	color: var(--ipt-dim);
	font-size: 0.95rem;
	text-align: center;
}

.ipt-dhead {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-right: 44px;
}

:where(.ipt-dtile) {
	--ipt-tc: var(--ipt-cat-unknown);
	--ipt-ti: var(--ipt-cat-unknown-ink);
}

.ipt-dtile {
	flex: none;
	position: relative;
	width: 68px;
	height: 74px;
	padding: 4px;
	color: var(--ipt-ti);
	text-align: center;
	background: var(--ipt-tc);
	border: 1px solid var(--ipt-line2);
	border-radius: 8px;
}

.ipt-dz {
	position: absolute;
	top: 5px;
	left: 6px;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1;
}

.ipt-dsym {
	display: block;
	margin-top: 14px;
	font-size: 1.7rem;
	font-weight: 800;
	line-height: 1.05;
}

.ipt-dmass {
	display: block;
	margin-top: 2px;
	font-size: 0.7rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

:where(.ipt-dtile[data-cat="alkali"]) { --ipt-tc: var(--ipt-cat-alkali); --ipt-ti: var(--ipt-cat-alkali-ink); }
:where(.ipt-dtile[data-cat="alkaline-earth"]) { --ipt-tc: var(--ipt-cat-alkaline-earth); --ipt-ti: var(--ipt-cat-alkaline-earth-ink); }
:where(.ipt-dtile[data-cat="transition"]) { --ipt-tc: var(--ipt-cat-transition); --ipt-ti: var(--ipt-cat-transition-ink); }
:where(.ipt-dtile[data-cat="post-transition"]) { --ipt-tc: var(--ipt-cat-post-transition); --ipt-ti: var(--ipt-cat-post-transition-ink); }
:where(.ipt-dtile[data-cat="metalloid"]) { --ipt-tc: var(--ipt-cat-metalloid); --ipt-ti: var(--ipt-cat-metalloid-ink); }
:where(.ipt-dtile[data-cat="nonmetal"]) { --ipt-tc: var(--ipt-cat-nonmetal); --ipt-ti: var(--ipt-cat-nonmetal-ink); }
:where(.ipt-dtile[data-cat="halogen"]) { --ipt-tc: var(--ipt-cat-halogen); --ipt-ti: var(--ipt-cat-halogen-ink); }
:where(.ipt-dtile[data-cat="noble-gas"]) { --ipt-tc: var(--ipt-cat-noble-gas); --ipt-ti: var(--ipt-cat-noble-gas-ink); }
:where(.ipt-dtile[data-cat="lanthanide"]) { --ipt-tc: var(--ipt-cat-lanthanide); --ipt-ti: var(--ipt-cat-lanthanide-ink); }
:where(.ipt-dtile[data-cat="actinide"]) { --ipt-tc: var(--ipt-cat-actinide); --ipt-ti: var(--ipt-cat-actinide-ink); }

.ipt-dtitle {
	min-width: 0;
}

.ipt-dname {
	margin: 0;
	color: var(--ipt-ink);
	font: 700 1.5rem / 1.1 var(--ipt-serif);
	overflow-wrap: anywhere;
}

.ipt-dcat {
	margin: 4px 0 0;
	color: var(--ipt-dim);
	font-size: 0.85rem;
	font-weight: 600;
}

.ipt-close {
	position: absolute;
	top: 6px;
	right: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--ipt-dim);
	cursor: pointer;
	background: transparent;
	border: 0;
	border-radius: 50%;
}

.ipt-close:hover {
	color: var(--ipt-ink);
	background: var(--ipt-surface2);
}

.ipt-atom {
	position: relative;
	width: min(100%, 210px);
	aspect-ratio: 1 / 1;
	margin: 10px auto 6px;
}

.ipt-atom-svg,
.ipt-atom canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.ipt-atom canvas {
	opacity: 0;
}

.ipt-atom.is-ready canvas {
	opacity: 1;
}

.ipt-atom.is-ready .ipt-atom-svg {
	opacity: 0;
}

.ipt-svg-nuc {
	fill: var(--ipt-accent);
}

.ipt-svg-sym {
	fill: var(--ipt-accent-ink);
	font: 700 11px var(--ipt-sans);
}

.ipt-svg-shell {
	fill: none;
	stroke: var(--ipt-line2);
	stroke-width: 1;
}

.ipt-svg-e {
	fill: var(--ipt-electron);
}

.ipt-shells,
.ipt-valence {
	margin: 0;
	color: var(--ipt-ink);
	font-size: 0.9rem;
	font-weight: 600;
	text-align: center;
}

.ipt-valence {
	margin-bottom: 8px;
	color: var(--ipt-dim);
	font-weight: 500;
}

.ipt-props {
	margin: 0;
	padding: 0;
}

.ipt-props > div {
	display: grid;
	grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
	gap: 4px 10px;
	padding: 7px 0;
	border-top: 1px solid var(--ipt-line);
}

.ipt-props dt {
	color: var(--ipt-dim);
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.3;
}

.ipt-props dd {
	margin: 0;
	color: var(--ipt-ink);
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.ipt-dblurb {
	margin: 10px 0 8px;
	color: var(--ipt-ink);
	font-size: 0.88rem;
	line-height: 1.5;
}

.ipt-src {
	margin: 0 0 12px;
	color: var(--ipt-dim);
	font-size: 0.75rem;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

body.ipt-body .ipt-src a {
	color: var(--ipt-link);
}

body.ipt-body a.ipt-atomlink {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 16px;
	color: var(--ipt-accent-ink);
	font-weight: 700;
	text-decoration: none;
	background: var(--ipt-accent);
	border-radius: 999px;
}

body.ipt-body a.ipt-atomlink:hover {
	background: var(--ipt-accent-hover);
}

/* Bottom sheet grip (the script builds it on phones). */
.ipt-grip {
	display: none;
}

/* ------------------------------------------------------------------- quiz */

/* The panel is a compact bar above the table and sticks to the top of the screen while the quiz runs. */
.ipt-quiz {
	position: sticky;
	top: 8px;
	z-index: 25;
	margin: 0 0 8px;
	padding: 10px 12px;
	color: var(--ipt-ink);
	background: var(--ipt-surface);
	border: 1px solid var(--ipt-line2);
	border-radius: 16px;
	box-shadow: var(--ipt-shadow);
}

/* quiz:start */
/* Agent G owns everything between these markers: the quiz panel's inner layout. */
.ipt-quiz .ipt-qhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.ipt-quiz .ipt-qtitle {
	margin: 0;
	color: var(--ipt-ink);
	font-family: var(--ipt-serif);
	font-size: 1.25rem;
	line-height: 1.2;
}

.ipt-quiz .ipt-qlede,
.ipt-quiz .ipt-qbest,
.ipt-quiz .ipt-qhint,
.ipt-quiz .ipt-qrmsg {
	margin: 0 0 10px;
	color: var(--ipt-dim);
	font-size: 0.92rem;
	line-height: 1.4;
}

.ipt-quiz .ipt-qgroup {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}

.ipt-quiz .ipt-qstats {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-bottom: 8px;
	color: var(--ipt-dim);
	font-size: 0.88rem;
	font-weight: 700;
}

.ipt-quiz .ipt-qstreak.is-hot {
	color: var(--ipt-accent);
}

.ipt-quiz .ipt-qbar {
	height: 8px;
	margin-bottom: 12px;
	overflow: hidden;
	background: var(--ipt-surface2);
	border-radius: 999px;
}

.ipt-quiz .ipt-qbar i {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--ipt-accent);
	border-radius: 999px;
	transform: scaleX(var(--p, 0));
	transform-origin: left center;
}

.ipt-quiz .ipt-qprompt {
	min-height: 2.6em;
	margin: 0 0 4px;
	color: var(--ipt-ink);
	font-size: 1.2rem;
	font-weight: 800;
	line-height: 1.3;
}

.ipt-quiz .ipt-qopts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 8px;
}

.ipt-quiz .ipt-qopt {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 6px 14px;
	color: var(--ipt-ink);
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
	background: var(--ipt-surface);
	border: 2px solid var(--ipt-line2);
	border-radius: 12px;
}

.ipt-quiz .ipt-qopt:hover {
	background: var(--ipt-surface2);
}

.ipt-quiz .ipt-qopt[aria-disabled="true"] {
	cursor: default;
}

.ipt-quiz .ipt-qkey {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	color: var(--ipt-accent-ink);
	font-size: 0.8rem;
	line-height: 24px;
	text-align: center;
	background: var(--ipt-accent);
	border-radius: 6px;
}

.ipt-quiz .ipt-qopt.is-right {
	color: var(--ipt-ok-ink);
	background: var(--ipt-ok-bg);
	border-color: var(--ipt-ok-ink);
}

.ipt-quiz .ipt-qopt.is-wrong {
	color: var(--ipt-bad-ink);
	background: var(--ipt-bad-bg);
	border-color: var(--ipt-bad-ink);
}

.ipt-quiz .ipt-qfb {
	min-height: 1.4em;
	margin: 0;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.4;
}

.ipt-quiz .ipt-qfb.is-right {
	color: var(--ipt-ok-ink);
}

.ipt-quiz .ipt-qfb.is-wrong {
	color: var(--ipt-bad-ink);
}

.ipt-quiz .ipt-qresult {
	margin: 0 0 6px;
	color: var(--ipt-ink);
	font-family: var(--ipt-serif);
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.15;
}

/* The particle burst sits outside the panel, on the body. */
.ipt-burst {
	position: fixed;
	z-index: 90;
	width: 0;
	height: 0;
	pointer-events: none;
}

.ipt-burst .ipt-bp {
	position: absolute;
	left: -4px;
	top: -4px;
	width: 8px;
	height: 8px;
	background: var(--ipt-accent);
	border-radius: 50%;
}

.ipt-burst .ipt-bp:nth-child(3n + 1) {
	background: var(--ipt-electron);
}

.ipt-burst .ipt-bp:nth-child(3n + 2) {
	background: var(--ipt-ok-ink);
}

@media (prefers-reduced-motion: no-preference) {
	.ipt-quiz .ipt-qbar i {
		transition: transform 300ms ease-out;
	}

	.ipt-quiz .ipt-qopt.is-right {
		animation: ipt-q-pop 400ms ease-out;
	}

	.ipt-quiz .ipt-qopt.is-wrong {
		animation: ipt-q-shake 360ms ease-out;
	}

	.ipt-burst .ipt-bp {
		animation: ipt-q-burst 700ms ease-out forwards;
	}

	@keyframes ipt-q-pop {
		0% {
			transform: scale(1);
		}

		40% {
			transform: scale(1.05);
		}

		100% {
			transform: scale(1);
		}
	}

	@keyframes ipt-q-shake {
		0%,
		100% {
			transform: translateX(0);
		}

		25% {
			transform: translateX(-5px);
		}

		75% {
			transform: translateX(5px);
		}
	}

	@keyframes ipt-q-burst {
		0% {
			opacity: 1;
			transform: translate(0, 0) scale(1);
		}

		100% {
			opacity: 0;
			transform: translate(var(--dx, 0), var(--dy, 0)) scale(0.3);
		}
	}
}

/* Compact bar: the table below stays usable. */
.ipt-quiz .ipt-qhead {
	margin-bottom: 6px;
}

.ipt-quiz .ipt-qtitle {
	font-size: 1.05rem;
}

.ipt-quiz .ipt-qlede,
.ipt-quiz .ipt-qbest,
.ipt-quiz .ipt-qhint,
.ipt-quiz .ipt-qrmsg {
	margin-bottom: 6px;
	font-size: 0.86rem;
}

.ipt-quiz .ipt-qgroup {
	margin-bottom: 6px;
}

.ipt-quiz .ipt-qstats {
	margin-bottom: 4px;
	font-size: 0.82rem;
}

.ipt-quiz .ipt-qbar {
	height: 6px;
	margin-bottom: 8px;
}

.ipt-quiz .ipt-qprompt {
	min-height: 0;
	font-size: 1.05rem;
}

.ipt-quiz .ipt-qopts {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 6px;
	margin-bottom: 4px;
}

.ipt-quiz .ipt-qopt {
	min-height: 40px;
	padding: 4px 10px;
	font-size: 0.92rem;
	line-height: 1.2;
}

.ipt-quiz .ipt-qfb {
	min-height: 1.2em;
	font-size: 0.88rem;
}

.ipt-quiz .ipt-qresult {
	font-size: 1.5rem;
}

@media (max-width: 700px) {
	.ipt-quiz .ipt-qopts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.ipt-quiz [hidden] {
	display: none;
}

/* While a round runs the table is neutral: the lede, legend, note and the colour and temperature controls have nothing to say. */
.ipt-stage.is-quiz .ipt-lede,
.ipt-stage.is-quiz .ipt-keyrow,
.ipt-stage.is-quiz .ipt-colour,
.ipt-stage.is-quiz .ipt-temp {
	display: none;
}

/* During play the title goes and Close quiz moves to the corner, so the bar is two or three lines tall. */
.ipt-quiz:has(.ipt-qplay:not([hidden])) .ipt-qtitle {
	display: none;
}

.ipt-quiz:has(.ipt-qplay:not([hidden])) .ipt-qhead {
	position: absolute;
	top: 8px;
	right: 10px;
	margin: 0;
}

.ipt-quiz:has(.ipt-qplay:not([hidden])) .ipt-qplay {
	padding-right: 110px;
}
/* quiz:end */

/* ---------------------------------------------------------- dock, help */


.ipt-kicker {
	margin: 0 0 8px;
	color: var(--ipt-dim);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

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

.ipt-help-pop li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 0;
	color: var(--ipt-ink);
	font-size: 0.86rem;
}

.ipt-help-pop kbd {
	flex: none;
	min-width: 56px;
	padding: 2px 8px;
	text-align: center;
	color: var(--ipt-ink);
	font: 700 0.76rem var(--ipt-sans);
	background: var(--ipt-surface2);
	border: 1px solid var(--ipt-line2);
	border-radius: 6px;
}

.ipt-printurl {
	display: none;
}

/* ---------------------------------------------------- detail placement */

/* 900-1179px: a floating panel at the bottom right, so the table keeps the full width. */
@media (min-width: 900px) {
	.ipt-stage {
		--ipt-tg: 3px;
		--ipt-hmax: 64px;
		padding: 22px 16px 36px;
	}

	.ipt-toolbar {
		grid-template-columns: minmax(180px, 1fr) minmax(200px, 1fr) minmax(300px, 1.7fr);
	}

	.ipt-actions,
	.ipt-chips {
		grid-column: 1 / -1;
	}

	.ipt-legend {
		min-height: 60px;
	}

	.ipt-note {
		min-height: 66px;
	}

	.ipt-name {
		display: block;
	}

	.ipt-z {
		font-size: 0.6rem;
	}

	.ipt-sym {
		font-size: 1.25rem;
	}

	.ipt-val {
		font-size: 0.6rem;
	}

	.ipt-detail {
		position: fixed;
		right: 12px;
		bottom: calc(12px + var(--ipt-adh, 0px));
		z-index: 60;
		width: 320px;
		max-height: min(72vh, 680px);
		margin: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		visibility: hidden;
		transform: translateY(calc(100% + 40px));
	}

	.ipt-detail[data-open="1"] {
		visibility: visible;
		transform: none;
	}

	/* The help button moves left of the floating card. */

	.ipt-help-pop {
		right: auto;
		left: 0;
	}
}

html:not(.ipt-js) .ipt-detail {
	position: static;
	width: auto;
	max-height: none;
	margin-top: 12px;
	visibility: visible;
	transform: none;
}

html:not(.ipt-js) .ipt-detail[data-open="0"] {
	display: none;
}

/* 1180px and up: the card is a sticky column, never taller than the table, so selecting adds no layout shift. */
@media (min-width: 1180px) {
	.ipt-stage {
		--ipt-tw: calc((min(100vw, 1560px) - 32px - 14px - var(--ipt-colw) - 80px) / 18);
		--ipt-hmax: 80px;
	}

	.ipt-layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--ipt-colw);
		gap: 14px;
		align-items: start;
	}

	.ipt-detail,
	html:not(.ipt-js) .ipt-detail {
		position: sticky;
		top: 12px;
		right: auto;
		bottom: auto;
		z-index: 2;
		width: auto;
		max-height: max(320px, calc(9 * var(--ipt-tw) * 1.1 + 56px));
		margin: 0;
		overflow-y: auto;
		visibility: visible;
		transform: none;
	}

	.ipt-detail[data-open="0"] {
		min-height: 200px;
	}

	.ipt-atom {
		width: min(100%, 190px);
	}

}

@media (min-width: 1360px) {
	.ipt-stage {
		--ipt-tile: 50px;
	}

	.ipt-legend {
		min-height: 30px;
	}
}

@media (min-width: 1440px) {
	.ipt-stage {
		--ipt-tile: 52px;
	}
}

@media (min-width: 1500px) {
	.ipt-sym {
		font-size: 1.45rem;
	}

	.ipt-name {
		font-size: 0.56rem;
	}

	.ipt-z,
	.ipt-val {
		font-size: 0.66rem;
	}
}

/* Phone and small tablet. */
@media (max-width: 899.98px) {
	.ipt-fit {
		display: inline-flex;
	}

	.ipt-legend {
		min-height: 40px;
		overflow-x: auto;
	}

	.ipt-legend ul {
		flex-wrap: nowrap;
		padding-bottom: 6px;
	}

	.ipt-note {
		min-height: 8.2em;
	}

	/* Bottom sheet: closed, half (default when a card is open) and full (a modal). */
	.ipt-detail {
		position: fixed;
		left: 0;
		right: 0;
		bottom: var(--ipt-adh, 0px);
		z-index: 60;
		width: auto;
		max-height: 56svh;
		margin: 0;
		padding: 18px 16px calc(16px + env(safe-area-inset-bottom));
		overflow-y: auto;
		overscroll-behavior: contain;
		border-radius: 18px 18px 0 0;
		box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.35);
		visibility: hidden;
		transform: translateY(105%);
	}

	.ipt-detail[data-open="1"] {
		visibility: visible;
		transform: none;
	}

	.ipt-detail[data-open="1"][data-snap="full"] {
		top: 0;
		max-height: none;
		border-radius: 0;
	}

	.ipt-detail::before {
		content: '';
		display: block;
		width: 44px;
		height: 4px;
		margin: -8px auto 10px;
		background: var(--ipt-line2);
		border-radius: 2px;
	}

	.ipt-grip {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 24px;
		padding: 0;
		cursor: ns-resize;
		background: transparent;
		border: 0;
	}

	.ipt-atom {
		width: min(60%, 190px);
	}


}

/* Touch screens have no keyboard: the shortcut button would only cover the table. */

@media (max-width: 599.98px) {
	.ipt-mast {
		padding: 0 12px;
	}

	.ipt-h1 {
		font-size: 1.45rem;
	}

	.ipt-lede {
		font-size: 0.92rem;
	}

	/* Compact toolbar: the table should start on the first screen. */
	.ipt-toolbar {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 8px 10px;
		margin-bottom: 8px;
	}

	.ipt-temp,
	.ipt-actions,
	.ipt-chips {
		grid-column: 1 / -1;
	}

	.ipt-actions,
	.ipt-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 4px;
		scrollbar-width: none;
	}

	.ipt-actions > *,
	.ipt-chips > * {
		flex: none;
	}

	.ipt-chips h3 {
		flex: none;
		margin-right: 4px;
	}

	.ipt-search input,
	.ipt-colour select {
		padding: 0 10px;
		font-size: 0.95rem;
	}

	.ipt-colour select {
		padding-right: 30px;
	}

	.ipt-btn,
	.ipt-theme button {
		padding: 0 12px;
		font-size: 0.86rem;
	}

	.ipt-temp-row {
		min-height: 40px;
	}

	.ipt-tempsum {
		margin-top: 0;
	}

	.ipt-stage {
		padding-inline: 10px;
	}

	.ipt-temp-row {
		flex-wrap: wrap;
	}

	.ipt-temp-row input[type="range"] {
		flex-basis: 100%;
		order: 3;
	}

	.ipt-quiz {
		bottom: 0;
		border-radius: 16px 16px 0 0;
	}

	.ipt-tile {
		border-radius: 4px;
	}

	.ipt-sym {
		font-size: 1rem;
	}

	.ipt-z,
	.ipt-val {
		font-size: 0.56rem;
	}
}

/* ------------------------------------------------------------- fit table */

/* Fit whole table (or the 3D view on a small screen): 18 columns share the width; tiles show the symbol only. */
@media (max-width: 899.98px) {
	.ipt-stage[data-fit="1"],
	.ipt-stage[data-view="3d"] {
		--ipt-tile: 0px;
		--ipt-tg: 1px;
		--ipt-rowh-w: 14px;
	}

	.ipt-stage[data-fit="1"] .ipt-table,
	.ipt-stage[data-view="3d"] .ipt-table {
		min-width: 0;
	}

	.ipt-stage[data-fit="1"] .ipt-tablewrap {
		overflow-x: hidden;
	}

	.ipt-stage[data-fit="1"] .ipt-cell,
	.ipt-stage[data-view="3d"] .ipt-cell {
		aspect-ratio: 1 / 1.25;
	}

	.ipt-stage[data-fit="1"] .ipt-tile,
	.ipt-stage[data-view="3d"] .ipt-tile {
		padding: 0;
		border-radius: 3px;
	}

	.ipt-stage[data-fit="1"] .ipt-z,
	.ipt-stage[data-fit="1"] .ipt-name,
	.ipt-stage[data-fit="1"] .ipt-val,
	.ipt-stage[data-view="3d"] .ipt-z,
	.ipt-stage[data-view="3d"] .ipt-name,
	.ipt-stage[data-view="3d"] .ipt-val {
		display: none;
	}

	.ipt-stage[data-fit="1"] .ipt-sym,
	.ipt-stage[data-view="3d"] .ipt-sym {
		font-size: calc((100vw - 56px) / 18 * 0.5);
		letter-spacing: -0.04em;
	}

	.ipt-stage[data-fit="1"] .ipt-st::before,
	.ipt-stage[data-view="3d"] .ipt-st::before {
		height: 2px;
	}

	.ipt-stage[data-fit="1"] .ipt-tile[data-q="1"] .ipt-st::after,
	.ipt-stage[data-view="3d"] .ipt-tile[data-q="1"] .ipt-st::after {
		display: none;
	}

	.ipt-stage[data-fit="1"] .ipt-table thead th,
	.ipt-stage[data-fit="1"] .ipt-rowh {
		font-size: 0.5rem;
	}

	.ipt-stage[data-fit="1"] .ipt-fref-a {
		font-size: 0.4rem;
	}

	.ipt-stage[data-fit="1"] .ipt-rowh-f {
		font-size: 0.5rem;
	}
}

/* ------------------------------------------------ compact control bar */

/*
 * One compact bar so the first periods show without scrolling: Find an element, Colour by and Temperature
 * on one row, the buttons on a second. The legend doubles as the type filter and sits beside the note.
 * Later rules win over the first-pass layout above.
 */
.ipt-stage {
	padding-top: 10px;
}

.ipt-h1 {
	margin: 0 0 2px;
	font-size: clamp(1.25rem, 2.6vw, 1.75rem);
}

.ipt-lede {
	max-width: none;
	margin: 0 0 8px;
	font-size: 0.92rem;
	line-height: 1.4;
}

.ipt-toolbar {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 12px;
	margin-bottom: 6px;
}

.ipt-temp,
.ipt-actions {
	grid-column: 1 / -1;
}

.ipt-toolbar label,
.ipt-chips h3 {
	margin: 0 0 2px;
	font-size: 0.68rem;
}

.ipt-search input,
.ipt-colour select {
	min-height: 40px;
}

.ipt-temp {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas: "l s" "r r";
	column-gap: 10px;
	align-items: end;
}

.ipt-temp > label {
	grid-area: l;
}

.ipt-temp-row {
	grid-area: r;
	min-height: 40px;
}

.ipt-temp-row input[type="range"] {
	height: 40px;
}

.ipt-tempsum {
	grid-area: s;
	min-height: 0;
	margin: 0 0 2px;
	font-size: 0.76rem;
	text-align: right;
}

.ipt-btn,
.ipt-theme button {
	min-height: 40px;
	padding: 0 14px;
	font-size: 0.88rem;
}

.ipt-btn-quiet {
	padding: 0 12px;
}

.ipt-btn[hidden] {
	display: none;
}

.ipt-actions {
	gap: 6px 8px;
}

.ipt-chips {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 6px;
	margin-left: auto;
}

.ipt-chips h3 {
	flex: 0 0 auto;
	margin: 0 2px 0 0;
}

.ipt-chip {
	min-height: 30px;
}

@media (pointer: coarse) {
	.ipt-btn,
	.ipt-theme button,
	.ipt-search input,
	.ipt-colour select {
		min-height: 44px;
	}

	.ipt-chip {
		min-height: 36px;
	}

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

/* Legend and note: side by side. In element-type mode the legend items are the type filter. */
.ipt-keyrow {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 4px 12px;
	align-items: start;
	margin-bottom: 8px;
}

.ipt-legend {
	min-height: 38px;
	margin: 0;
}

.ipt-legend ul {
	gap: 6px;
}

.ipt-legend li {
	gap: 6px;
	min-height: 26px;
	font-size: 0.78rem;
}

.ipt-lfilter li {
	padding: 2px 9px 2px 6px;
	color: var(--ipt-ink);
	border: 1px solid var(--ipt-line);
	border-radius: 999px;
}

.ipt-lfilter li.ipt-lhint {
	padding-left: 2px;
	color: var(--ipt-dim);
	font-weight: 600;
	border-color: transparent;
}

.ipt-lchip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 26px;
	margin: -2px -9px -2px -6px;
	padding: 2px 9px 2px 6px;
	color: inherit;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	background: transparent;
	border: 0;
	border-radius: 999px;
}

.ipt-lfilter li:has(> .ipt-lchip):hover {
	background: var(--ipt-surface2);
}

.ipt-lfilter li.is-on,
.ipt-lfilter li.is-on:hover {
	color: var(--ipt-accent-ink);
	background: var(--ipt-accent);
	border-color: var(--ipt-accent);
}

.ipt-lfilter li.is-on .ipt-sw {
	border-color: var(--ipt-accent-ink);
}

.ipt-note {
	min-height: 0;
	margin: 0;
	padding: 5px 10px;
	font-size: 0.78rem;
	line-height: 1.4;
}

/* The Help popover hangs at the top right, whatever scrolls. */
.ipt-help-pop {
	position: fixed;
	top: 120px;
	right: 16px;
	z-index: 70;
	width: min(340px, calc(100vw - 24px));
	padding: 14px 16px;
	background: var(--ipt-surface);
	border: 1px solid var(--ipt-line2);
	border-radius: 16px;
	box-shadow: var(--ipt-shadow);
}

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

.ipt-help-pop li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 0;
	color: var(--ipt-ink);
	font-size: 0.86rem;
}

.ipt-help-pop kbd {
	flex: none;
	min-width: 56px;
	padding: 2px 8px;
	text-align: center;
	color: var(--ipt-ink);
	font: 700 0.76rem var(--ipt-sans);
	background: var(--ipt-surface2);
	border: 1px solid var(--ipt-line2);
	border-radius: 6px;
}

@media (min-width: 900px) {
	.ipt-stage {
		padding-top: 12px;
	}

	.ipt-legend[data-kind="scale"] {
		min-height: 30px;
	}

	.ipt-temp {
		grid-column: auto;
	}

	.ipt-toolbar {
		grid-template-columns: minmax(170px, 1fr) minmax(190px, 1fr) minmax(380px, 2.2fr);
	}

	.ipt-legend {
		min-height: 58px;
	}

	.ipt-legend[data-kind="scale"] {
		min-height: 30px;
	}

	.ipt-note {
		min-height: 46px;
	}
}

@media (min-width: 600px) and (max-width: 899.98px) {
	.ipt-note {
		min-height: 48px;
	}
}

@media (max-width: 899.98px) {
	.ipt-legend {
		min-height: 38px;
	}
}

@media (max-width: 599.98px) {
	.ipt-stage {
		padding-top: 8px;
	}

	.ipt-h1 {
		font-size: 1.25rem;
	}

	.ipt-lede {
		display: -webkit-box;
		margin-bottom: 6px;
		overflow: hidden;
		font-size: 0.86rem;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.ipt-toolbar {
		gap: 4px 10px;
		margin-bottom: 4px;
	}

	/* Temperature: label and value on one line, the slider under them. */
	.ipt-temp {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas: "l o b" "r r r" "s s s";
		column-gap: 8px;
		align-items: center;
	}

	.ipt-temp > label {
		margin: 0;
	}

	.ipt-temp-row {
		display: contents;
	}

	.ipt-temp-row output {
		grid-area: o;
		min-width: 0;
		font-size: 0.85rem;
		text-align: right;
	}

	.ipt-temp-row .ipt-btn-quiet {
		grid-area: b;
		min-height: 36px;
		padding: 0 10px;
		font-size: 0.8rem;
	}

	.ipt-temp-row input[type="range"] {
		grid-area: r;
		flex: none;
		width: 100%;
		height: 34px;
	}

	.ipt-tempsum {
		text-align: left;
	}

	.ipt-actions {
		margin: 0 -10px;
		padding: 0 10px 2px;
	}

	.ipt-chips {
		margin-left: 0;
		padding-bottom: 0;
		overflow: visible;
	}

	.ipt-legend {
		min-height: 36px;
	}

	.ipt-legend ul {
		padding-bottom: 4px;
	}

	.ipt-note {
		min-height: 0;
		padding: 4px 8px;
		font-size: 0.76rem;
	}
}

/* --------------------------------------------------------------- 3D view */

/*
 * CSS only. The script writes --h (0..1) on each tile and, while dragging,
 * --ipt-rx and --ipt-rz on the table. The scale keeps the tilted table inside
 * its box. Side faces are two pseudo-elements per tile, only from 760px.
 */
.ipt-stage[data-view="3d"] .ipt-tablewrap {
	perspective: 1400px;
	height: var(--ipt-3d-h, auto);
	padding: 0;
	overflow-x: clip;
	overflow-y: visible;
	touch-action: pan-y;
	cursor: grab;
}

/* view3d.js measures the tilted table and writes --ipt-3d-h (wrap height) and --ipt-3d-dx / -dy / -scale. */
.ipt-stage[data-view="3d"] .ipt-table {
	transform: translate(var(--ipt-3d-dx, 0px), var(--ipt-3d-dy, 0px)) scale(var(--ipt-3d-scale, 0.82)) rotateX(var(--ipt-rx, 45deg)) rotateZ(var(--ipt-rz, -12deg));
	transform-style: preserve-3d;
	will-change: transform;
}

.ipt-stage[data-view="3d"] .ipt-cell {
	transform-style: preserve-3d;
}

/* On a phone the tilted table gets a gentler angle so it can stay larger. */
@media (max-width: 899.98px) {
	.ipt-stage[data-view="3d"] .ipt-table {
		--ipt-rz: -8deg;
	}
}

.ipt-stage[data-view="3d"] .ipt-tile {
	transform: translateZ(calc(var(--h, 0) * var(--ipt-hmax)));
	transform-style: preserve-3d;
}

.ipt-stage[data-view="3d"] .ipt-tile.is-dim {
	transform: translateZ(calc(var(--h, 0) * var(--ipt-hmax) * 0.12));
}

@media (min-width: 760px) {
	.ipt-stage[data-view="3d"] .ipt-tile::before,
	.ipt-stage[data-view="3d"] .ipt-tile::after {
		content: '';
		position: absolute;
		pointer-events: none;
		background: linear-gradient(rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.32)), var(--ipt-tc);
	}

	/* Right face: hangs from the tile's right edge down to the table plane. */
	.ipt-stage[data-view="3d"] .ipt-tile::before {
		top: -1px;
		left: 100%;
		width: calc(var(--h, 0) * var(--ipt-hmax));
		height: calc(100% + 2px);
		transform: rotateY(90deg);
		transform-origin: 0 50%;
	}

	/* Front face: hangs from the bottom edge. */
	.ipt-stage[data-view="3d"] .ipt-tile::after {
		top: 100%;
		left: -1px;
		width: calc(100% + 2px);
		height: calc(var(--h, 0) * var(--ipt-hmax));
		transform: rotateX(-90deg);
		transform-origin: 50% 0;
	}
}

/* The quiz turns 3D visually off. */
.ipt-stage.is-quiz[data-view] .ipt-tablewrap {
	perspective: none;
	height: auto;
	padding-top: 0;
	cursor: auto;
}

.ipt-stage.is-quiz[data-view] .ipt-table,
.ipt-stage.is-quiz[data-view] .ipt-tile {
	transform: none;
}

.ipt-stage.is-quiz[data-view] .ipt-tile::before,
.ipt-stage.is-quiz[data-view] .ipt-tile::after {
	display: none;
}

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

/*
 * Every animation and transition lives inside this query, so a visitor who asks
 * for reduced motion gets none of them. Only transform, scale, translate and
 * opacity move; the tiles never animate opacity (the table is the LCP element).
 */
@media (prefers-reduced-motion: no-preference) {
	/* Heatmap cross-fade, tile lift. */
	body.ipt-body .ipt-tile {
		transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, scale 0.16s ease, translate 0.16s ease, box-shadow 0.16s ease;
	}

	.ipt-sw {
		transition: background-color 0.4s ease;
	}

	.ipt-search input {
		transition: border-color 0.18s, box-shadow 0.18s;
	}

	.ipt-btn,
	.ipt-theme button,
	.ipt-chip {
		transition: background-color 0.18s, border-color 0.18s;
	}

	.ipt-atom canvas {
		transition: opacity 0.4s;
	}

	@media (hover: hover) {
		body.ipt-body .ipt-tile:hover {
			z-index: 5;
			scale: 1.06;
			translate: 0 -2px;
			box-shadow: 0 8px 16px rgba(0, 0, 0, 0.28);
		}
	}

	body.ipt-body .ipt-tile:focus-visible {
		z-index: 5;
		scale: 1.06;
		translate: 0 -2px;
	}

	/*
	 * Staggered load: scale only. The class stays on the stage for good. The pulse and glow rules below list
	 * ipt-pop too, so when they come and go the finished pop is the same animation and never replays.
	 */
	.ipt-stage.is-enter .ipt-tile {
		animation: ipt-pop 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) var(--ipt-popd, 0s) backwards;
	}

	/* Liquid tiles: the band waves. Gas tiles: the symbol drifts. */
	.ipt-tile[data-state="l"] .ipt-st::before {
		animation: ipt-wave 2.4s linear infinite;
	}

	.ipt-tile[data-state="g"] .ipt-sym {
		animation: ipt-drift 3s ease-in-out infinite alternate;
	}

	/* State change pulse. */
	body.ipt-body .ipt-tile.is-pulse {
		animation: ipt-pulse 0.6s ease-out;
	}

	body.ipt-body .ipt-stage.is-enter .ipt-tile.is-pulse {
		animation: ipt-pulse 0.6s ease-out, ipt-pop 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) var(--ipt-popd, 0s) backwards;
	}

	/* Search glow. */
	body.ipt-body .ipt-tile.is-match {
		animation: ipt-glow 1.3s ease-in-out infinite;
	}

	body.ipt-body .ipt-stage.is-enter .ipt-tile.is-match {
		animation: ipt-glow 1.3s ease-in-out infinite, ipt-pop 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) var(--ipt-popd, 0s) backwards;
	}

	/* Loops stop while the table is off screen. */
	.ipt-tablewrap.is-offscreen .ipt-tile .ipt-st::before,
	.ipt-tablewrap.is-offscreen .ipt-tile .ipt-sym,
	.ipt-tablewrap.is-offscreen .ipt-tile.is-match {
		animation-play-state: paused;
	}

	/* 3D view: the tilt and the rise ease in. */
	.ipt-stage[data-view] .ipt-table {
		transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
	}

	.ipt-stage[data-view="3d"] .ipt-tile {
		transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, scale 0.16s ease, translate 0.16s ease, box-shadow 0.16s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
	}

	/* Dragging the tilted table: no easing, so it follows the finger. */
	.ipt-stage.is-dragging .ipt-table {
		transition: none;
	}

	/* Fallback atom spin until the WebGL canvas takes over. */
	.ipt-atom:not(.is-ready) .ipt-atom-svg {
		animation: ipt-spin 48s linear infinite;
	}

	.ipt-detail {
		transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.3s;
	}

	.ipt-detail[data-open="1"] {
		transition-delay: 0s;
	}
}

@keyframes ipt-pop {
	from { scale: 0.92; }
	to { scale: 1; }
}

@keyframes ipt-wave {
	from { transform: translateX(0); }
	to { transform: translateX(-8px); }
}

@keyframes ipt-drift {
	from { transform: translateY(-2px); }
	to { transform: translateY(2px); }
}

@keyframes ipt-pulse {
	0% { scale: 1; }
	35% { scale: 1.16; }
	100% { scale: 1; }
}

@keyframes ipt-glow {
	0%, 100% { box-shadow: 0 0 0 2px var(--ipt-accent), 0 0 6px 1px var(--ipt-accent); }
	50% { box-shadow: 0 0 0 3px var(--ipt-accent), 0 0 16px 4px var(--ipt-accent); }
}

@keyframes ipt-spin {
	to { transform: rotate(360deg); }
}

/* ----------------------------------------------------------------- print */

@media print {
	@page {
		size: landscape;
		margin: 9mm;
	}

	html,
	body.ipt-body {
		background: #fff;
		color: #000;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	html:root body.ipt-body .ipt-mast,
	html:root body.ipt-body .ipt-toolbar,
	html:root body.ipt-body .ipt-detail,
	html:root body.ipt-body .ipt-quiz,
	html:root body.ipt-body .ipt-lede,
	html:root body.ipt-body .ipt-noscript,
	html:root body.ipt-body .ipt-article,
	html:root body.ipt-body .ipt-all,
	html:root body.ipt-body .ipt-foot,
	html:root body.ipt-body .mv-ads,
	html:root body.ipt-body .mv-ad-box,
	html:root body.ipt-body [id^="adhesion"] {
		display: none;
	}

	.ipt-stage,
	.ipt-stage[data-view] {
		max-width: none;
		padding: 0;
		--ipt-tile: 0px;
		--ipt-tg: 1px;
		--ipt-rowh-w: 8mm;
	}

	.ipt-h1 {
		margin: 0 0 2mm;
		color: #000;
		font-size: 16pt;
	}

	.ipt-keyrow {
		display: block;
	}

	.ipt-legend {
		min-height: 0;
		margin: 0 0 1mm;
		overflow: visible;
	}

	.ipt-legend ul {
		flex-wrap: wrap;
		gap: 1mm 4mm;
	}

	.ipt-legend li,
	.ipt-legend label {
		color: #000;
		font-size: 7.5pt;
	}

	.ipt-sw {
		width: 3.5mm;
		height: 3.5mm;
	}

	.ipt-note {
		min-height: 0;
		margin: 0 0 2mm;
		padding: 1mm 2mm;
		color: #000;
		font-size: 7.5pt;
		background: transparent;
		border-left: 1mm solid #555;
	}

	.ipt-tablewrap,
	.ipt-stage[data-view="3d"] .ipt-tablewrap {
		padding: 0;
		overflow: visible;
		perspective: none;
	}

	.ipt-stage .ipt-table,
	.ipt-stage[data-view="3d"] .ipt-table {
		min-width: 0;
		transform: none;
		grid-template-rows: 4mm repeat(7, auto) 2mm repeat(2, auto);
	}

	.ipt-cell {
		aspect-ratio: auto;
		height: 13.2mm;
	}

	.ipt-stage[data-view="3d"] .ipt-tile {
		transform: none;
	}

	.ipt-stage[data-view="3d"] .ipt-tile::before,
	.ipt-stage[data-view="3d"] .ipt-tile::after {
		display: none;
	}

	.ipt-tile,
	body.ipt-body .ipt-tile {
		padding: 0;
		animation: none;
		transition: none;
		scale: 1;
		translate: none;
		box-shadow: none;
		border-radius: 1mm;
	}

	.ipt-tile .ipt-st::before,
	.ipt-tile .ipt-sym {
		animation: none;
	}

	.ipt-z,
	.ipt-val {
		font-size: 5.5pt;
	}

	.ipt-sym {
		font-size: 11pt;
	}

	.ipt-name {
		display: block;
		font-size: 4.6pt;
	}

	.ipt-table thead th,
	.ipt-rowh {
		color: #000;
		font-size: 7pt;
	}

	.ipt-fref-a {
		font-size: 5pt;
	}

	.ipt-printurl {
		display: block;
		margin: 2mm 0 0;
		color: #000;
		font-size: 8pt;
	}
}