/*
 * Guides: article layout and visual building blocks.
 * Loaded on guide pages (inc/guide-ui.php) and in the editor. Built by
 * tools/build-guide-css.sh from tools/guide.base.css + tools/guide-icons.py.
 * Building blocks (class names on core blocks, see GUIDE-VISUALS.md):
 *   g-keys  g-cards  g-steps  g-dodont/g-do/g-dont  g-pros  g-cons  g-check
 *   g-bars (+ is-v1..is-v10)  g-stats  g-vs/g-vs-item  g-scale  g-pull
 *   g-split  g-wide  g-fig  callout.is-tip/.is-warn/.is-info/.is-bad
 *   gi-<icon> on cards, key points and callouts
 */
:root {
	--text-2: #cdcfca;
	--bad: #f0715f;
	--read: 720px;
	--wide: 1040px;
	--g-fs: 17px;
}

/* ---------- article layout: one reading column, wide elements break out ---------- */
.is-guide .site-main .section { padding-top: clamp(44px, 6vw, 76px) !important; padding-bottom: clamp(44px, 6vw, 76px) !important; }
.is-guide .site-main .section.is-layout-constrained > :not(.alignfull) { max-width: var(--read) !important; margin-left: auto !important; margin-right: auto !important; }
.is-guide .site-main .section.is-layout-constrained > .g-wide { max-width: var(--wide) !important; }
.is-guide .split { display: block !important; }
.is-guide .split > * + * { margin-top: 28px !important; }
.is-guide .split > .section-head { position: static !important; }
.is-guide .section-head { margin-bottom: 28px !important; }
.is-guide .section-head > * { max-width: none; }
.is-guide .section-head > * + * { margin-top: 16px !important; }
.is-guide .section > * + * { margin-top: 28px !important; }
.is-guide .page-hero h1 { font-size: clamp(38px, 5vw, 62px); }
/* hyphenate only long words, and never leave short stubs ("TABEL-LE"); hyphens in compounds break first */
.is-guide :is(h1, h2, h3) { -webkit-hyphenate-limit-before: 6; -webkit-hyphenate-limit-after: 6; hyphenate-limit-chars: 14 6 6; }
.is-guide .page-hero .lead { font-size: clamp(18px, 1.7vw, 20px); line-height: 1.6; color: var(--text); }
.is-guide .page-hero .section-head > * + * { margin-top: 20px !important; }
.g-readtime { color: var(--muted); }

/* ---------- reading text ---------- */
.is-guide .section :is(p, li):not(.eyebrow):not(.crumb) { font-size: var(--g-fs); line-height: 1.7; }
.is-guide .section :is(p, li).muted, .is-guide .section .section-head p:not(.eyebrow), .is-guide .flow > p { color: var(--text-2); }
.is-guide .section p strong, .is-guide .section li strong { color: var(--text); font-weight: 600; }
.is-guide .section h2 { font-size: clamp(28px, 3.3vw, 40px); line-height: 1.05; }
.is-guide .section h3 { font-size: 21px; line-height: 1.3; margin-top: 36px !important; }
.is-guide .section :is(p, li) a:not(.wp-block-button__link):not(.fh-card) { color: var(--text); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.is-guide .section :is(p, li) a:not(.wp-block-button__link):not(.fh-card):hover { color: var(--accent); }
.is-guide .section ul[class="wp-block-list"], .is-guide .section ol[class="wp-block-list"] { padding-left: 1.3em; }
.is-guide .section ul[class="wp-block-list"] > li::marker { color: var(--accent); }
.is-guide .section ol[class="wp-block-list"] > li::marker { color: var(--accent); font-family: var(--font-num); font-weight: 700; }
.is-guide .section :is(ul, ol)[class="wp-block-list"] > li + li { margin-top: 8px; }
.is-guide .section .wp-element-caption, .is-guide .section figcaption { font-size: var(--fs-sm) !important; line-height: 1.5; color: var(--muted); }

/* ---------- side table of contents and reading progress (assets/js/guide.js) ---------- */
.g-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: var(--accent); z-index: 1000; pointer-events: none; }
.g-side { display: none; }
@media (min-width: 1280px) {
	.g-side { display: block; position: fixed; top: calc(var(--header) + 48px); left: max(24px, calc(50% - var(--read) / 2 - 272px)); width: 216px; max-height: calc(100vh - var(--header) - 96px); overflow: auto; opacity: 0; transition: opacity 0.3s; }
	.g-side.is-on { opacity: 1; }
	.g-side.is-on.is-blocked { opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0s 0.2s; }   /* something of the article is beside it (assets/js/guide.js) */
	.g-side p { margin: 0 0 12px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
	.g-side ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
	.g-side a { display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 2px solid transparent; color: var(--muted); font-size: var(--fs-sm); line-height: 1.35; text-decoration: none; transition: color 0.2s, border-color 0.2s; }
	.g-side a:hover { color: var(--text); }
	.g-side a.is-active { color: var(--text); border-left-color: var(--accent); }
	.has-side-toc .page-hero .toc { display: none; }
}
/* room for both: the list sits beside the wide figures, not only beside the text column */
@media (min-width: 1600px) {
	.g-side { left: calc(50% - var(--wide) / 2 - 240px); }
}

/* ---------- shared icon mechanics ---------- */
.g-cards > li[class*="gi-"]::after, .g-keys li::before, .callout::before, .g-pros > li::before, .g-cons > li::before, .g-check > li::after, .g-do > p:first-child::before, .g-dont > p:first-child::before, .g-keys > p:first-child::before {
	content: ""; background: currentColor; -webkit-mask: var(--gi-mask) center / contain no-repeat; mask: var(--gi-mask) center / contain no-repeat;
}

/* ---------- g-keys: "In short" box ---------- */
.g-keys { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-l); background: linear-gradient(180deg, var(--surface-2), var(--surface)); padding: 22px 24px !important; }
.g-keys::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent); }
.g-keys > p:first-child { display: flex; align-items: center; gap: 10px; margin: 0 !important; font-size: var(--fs-xs) !important; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent) !important; line-height: 1 !important; }
.g-keys > p:first-child::before { --gi-mask: var(--i-bolt); width: 16px; height: 16px; }
.g-keys ul { list-style: none; margin: 16px 0 0 !important; padding: 0; display: grid; gap: 14px 32px; }
@media (min-width: 720px) { .g-keys ul { grid-template-columns: 1fr 1fr; } }
.g-keys li { position: relative; margin: 0 !important; padding-left: 32px; font-size: 16px !important; line-height: 1.55 !important; color: var(--text-2); }
.g-keys li::before { --gi-mask: var(--i-check); position: absolute; left: 0; top: 2px; width: 20px; height: 20px; color: var(--accent); }
.g-keys li[class*="gi-"]::before { --gi-mask: inherit; }
.g-keys li strong { color: var(--text); }

/* ---------- g-cards: icon cards ---------- */
.g-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.g-cards.is-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* at most 3 per row (4 when there are exactly 4 or 8), so no card is left alone on the last row */
.g-cards:not(.is-2) { grid-template-columns: repeat(auto-fit, minmax(max(210px, calc((100% - 28px) / 3)), 1fr)); }
.g-cards:not(.is-2):has(> li:nth-child(4):last-child, > li:nth-child(8):last-child) { grid-template-columns: repeat(auto-fit, minmax(max(210px, calc((100% - 42px) / 4)), 1fr)); }
.g-cards > li { position: relative; margin: 0 !important; padding: 20px !important; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); font-size: 15.5px !important; line-height: 1.55 !important; color: var(--text-2); }
.g-cards > li[class*="gi-"] { padding-top: 76px !important; }
.g-cards > li[class*="gi-"]::before { content: ""; position: absolute; left: 20px; top: 20px; width: 42px; height: 42px; border-radius: 12px; background: var(--accent-soft); }
.g-cards > li[class*="gi-"]::after { position: absolute; left: 30px; top: 30px; width: 22px; height: 22px; color: var(--accent); }
.g-cards > li > strong:first-child { display: block; margin-bottom: 6px; font-size: 17px; color: var(--text); }
.g-cards > li.is-warn::before { background: color-mix(in srgb, var(--warn) 14%, transparent); }
.g-cards > li.is-warn::after { color: var(--warn); }
.g-cards > li.is-pick { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }

/* ---------- g-steps: numbered steps on a line ---------- */
.g-steps { list-style: none; margin: 0; padding: 0; counter-reset: gs; }
.g-steps > li { counter-increment: gs; position: relative; margin: 0 !important; padding: 0 0 26px 58px; color: var(--text-2); }
.g-steps > li::before { content: counter(gs); position: absolute; left: 0; top: -2px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid color-mix(in srgb, var(--accent) 60%, var(--line)); color: var(--accent); font: 700 17px/1 var(--font-num); }
.g-steps > li::after { content: ""; position: absolute; left: 19px; top: 42px; bottom: 6px; width: 1px; background: var(--line-strong); }
.g-steps > li:last-child { padding-bottom: 0; }
.g-steps > li:last-child::after { display: none; }
.g-steps > li > strong:first-child { display: block; margin-bottom: 4px; font-size: 18px; color: var(--text); }

/* ---------- g-dodont: do / don't ---------- */
.g-dodont { display: grid !important; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .g-dodont { grid-template-columns: 1fr; } }
.g-dodont > * { margin: 0 !important; }
.g-do, .g-dont { border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); padding: 20px !important; }
.g-do { border-top: 3px solid var(--accent); }
.g-dont { border-top: 3px solid var(--bad); }
.g-do > p:first-child, .g-dont > p:first-child { display: flex; align-items: center; gap: 10px; margin: 0 0 12px !important; font-size: var(--fs-sm) !important; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.2 !important; }
.g-do > p:first-child { color: var(--accent) !important; }
.g-dont > p:first-child { color: var(--bad) !important; }
.g-do > p:first-child::before { --gi-mask: var(--i-check); width: 18px; height: 18px; }
.g-dont > p:first-child::before { --gi-mask: var(--i-cross); width: 18px; height: 18px; }
.g-do ul, .g-dont ul { list-style: none; margin: 0 !important; padding: 0 !important; }
.g-do li, .g-dont li { position: relative; margin: 0 !important; padding: 8px 0 8px 18px; border-top: 1px solid var(--line); font-size: 16px !important; line-height: 1.5 !important; color: var(--text-2); }
.g-do li:first-child, .g-dont li:first-child { border-top: 0; }
.g-do li::before, .g-dont li::before { content: ""; position: absolute; left: 0; top: 17px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.g-dont li::before { background: var(--bad); }

/* ---------- g-pros / g-cons / g-check: icon lists ---------- */
.g-pros, .g-cons, .g-check { list-style: none; margin: 0; padding: 0 !important; }
.g-pros > li, .g-cons > li, .g-check > li { position: relative; margin: 0 !important; padding: 10px 0 10px 34px; border-top: 1px solid var(--line); color: var(--text-2); }
.g-pros > li:last-child, .g-cons > li:last-child, .g-check > li:last-child { border-bottom: 1px solid var(--line); }
.g-pros > li::before, .g-cons > li::before { position: absolute; left: 0; top: 13px; width: 20px; height: 20px; }
.g-pros > li::before { --gi-mask: var(--i-check); color: var(--accent); }
.g-cons > li::before { --gi-mask: var(--i-cross); color: var(--bad); }
.g-check > li::before { content: ""; position: absolute; left: 0; top: 13px; width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid var(--line-strong); background: var(--surface-2); }
.g-check > li::after { --gi-mask: var(--i-check); position: absolute; left: 3px; top: 16px; width: 14px; height: 14px; color: var(--accent); }

/* ---------- g-bars: horizontal bars, value by class is-v1 (10 %) .. is-v10 (100 %) ---------- */
.g-bars { list-style: none; margin: 0; padding: 0 !important; display: grid; gap: 18px; }
.g-bars > li { --v: 50%; --bar: var(--accent); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; margin: 0 !important; font-size: var(--fs-sm) !important; line-height: 1.45 !important; color: var(--muted); }
.g-bars > li > strong { grid-column: 1; grid-row: 1; font-size: 16px; color: var(--text); }
.g-bars > li > em { grid-column: 2; grid-row: 1; font-style: normal; font-weight: 600; color: var(--bar); white-space: nowrap; }
.g-bars > li::after { content: ""; grid-column: 1 / -1; grid-row: 2; height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--bar) var(--v), var(--surface-3) var(--v)); }
.g-bars > li > span { grid-column: 1 / -1; grid-row: 3; }
.g-bars > li.is-warn { --bar: var(--warn); }
.g-bars > li.is-bad { --bar: var(--bad); }
.g-bars > li.is-dim { --bar: var(--faint); }
.g-bars > .is-v1 { --v: 10%; } .g-bars > .is-v2 { --v: 20%; } .g-bars > .is-v3 { --v: 30%; } .g-bars > .is-v4 { --v: 40%; } .g-bars > .is-v5 { --v: 50%; }
.g-bars > .is-v6 { --v: 60%; } .g-bars > .is-v7 { --v: 70%; } .g-bars > .is-v8 { --v: 80%; } .g-bars > .is-v9 { --v: 90%; } .g-bars > .is-v10 { --v: 100%; }

/* ---------- g-stats: key numbers ---------- */
.g-stats { list-style: none; margin: 0; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.g-stats > li { margin: 0 !important; padding: 18px 18px 16px !important; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); font-size: var(--fs-sm) !important; line-height: 1.45 !important; color: var(--muted); }
.g-stats > li > strong:first-child { display: block; margin-bottom: 8px; font: 700 clamp(30px, 3.4vw, 40px)/1 var(--font-num); color: var(--cream); letter-spacing: 0.01em; white-space: nowrap; }

/* ---------- g-vs: side by side comparison ---------- */
.g-vs { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.g-vs > * { margin: 0 !important; }
.g-vs-item { position: relative; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); padding: 22px !important; }
.g-vs-item > * + * { margin-top: 12px !important; }
.g-vs-item > p:first-child { font: 700 26px/1 var(--font-num) !important; text-transform: uppercase; color: var(--text) !important; letter-spacing: 0.01em; }
.g-vs-item.is-pick { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent) inset; }
.g-vs-item .g-badge { display: inline-block; padding: 4px 10px; border-radius: 99px; background: var(--accent); color: var(--accent-ink) !important; font-size: var(--fs-xs) !important; font-weight: 700; line-height: 1.2 !important; letter-spacing: 0.06em; text-transform: uppercase; }
.g-vs-item :is(.g-pros, .g-cons) > li { font-size: 15.5px !important; line-height: 1.5 !important; }
.g-pros + .g-cons { margin-top: 0 !important; }
.g-pros + .g-cons > li:first-child { border-top: 0; }

/* ---------- g-scale: levels on a line ---------- */
.g-scale { list-style: none; margin: 0; padding: 0 !important; position: relative; display: grid; gap: 0; }
.g-scale > li { position: relative; margin: 0 !important; padding: 0 0 20px 34px; font-size: var(--fs-sm) !important; line-height: 1.45 !important; color: var(--muted); }
.g-scale > li::before { content: ""; position: absolute; left: 5px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); z-index: 1; }
.g-scale > li::after { content: ""; position: absolute; left: 10px; top: 14px; bottom: -6px; width: 2px; background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 30%, var(--line))); }
.g-scale > li:last-child::after { display: none; }
.g-scale > li > strong:first-child { display: block; font: 700 24px/1 var(--font-num); color: var(--text); margin-bottom: 4px; }
.g-scale > li.is-you::before { background: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); }
@media (min-width: 720px) {
	.g-scale { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; padding-top: 30px !important; }
	.g-scale > li { padding: 0; }
	.g-scale > li::before { left: 0; top: -30px; }
	.g-scale > li::after { left: 12px; right: -12px; top: -25px; bottom: auto; width: auto; height: 2px; background: color-mix(in srgb, var(--accent) 55%, var(--line)); }
	.g-scale > li:last-child::after { display: none; }
}

/* ---------- callouts with icons ---------- */
.is-guide .callout, .callout[class*="is-tip"], .callout.is-warn, .callout.is-info, .callout.is-bad { position: relative; padding: 16px 20px 16px 54px !important; border-radius: var(--r-m); line-height: 1.6 !important; }
.callout::before { --gi-mask: var(--i-info); position: absolute; left: 18px; top: 17px; width: 22px; height: 22px; color: var(--accent); }
.callout.is-tip::before { --gi-mask: var(--i-bulb); }
.callout.is-warn::before { --gi-mask: var(--i-alert); color: var(--warn); }
.callout.is-bad { border-left-color: var(--bad); }
.callout.is-bad::before { --gi-mask: var(--i-alert); color: var(--bad); }
.callout[class*="gi-"]::before { --gi-mask: inherit; }
.callout:not(.is-guide *):not([class*="is-"]):not([class*="gi-"])::before { display: none; }
.callout.is-info { border-left-color: var(--cream); }
.callout.is-info::before { color: var(--cream); }

/* ---------- g-pull: one key sentence ---------- */
.is-guide .section p.g-pull, p.g-pull { margin-top: 36px !important; margin-bottom: 8px !important; padding-left: 22px; border-left: 3px solid var(--accent); font-size: clamp(20px, 2.2vw, 25px) !important; line-height: 1.4 !important; font-weight: 500; color: var(--text) !important; }

/* ---------- figures ---------- */
.g-fig, .is-guide .guide-fig { margin: 0; max-width: none; padding: clamp(16px, 3vw, 28px); border: 1px solid var(--line); border-radius: var(--r-l); background: radial-gradient(120% 120% at 50% 0%, var(--surface-2), var(--surface) 70%); }
.g-fig svg, .is-guide .guide-fig svg { display: block; width: 100%; height: auto; color: var(--text); overflow: visible; }
.g-fig figcaption, .is-guide .guide-fig figcaption { margin-top: 14px; font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); }
.g-fig.is-plain { padding: 0; border: 0; background: none; }
.g-fig.is-s svg { max-width: 400px; margin: 0 auto; }
.g-fig.is-m svg { max-width: 540px; margin: 0 auto; }
.g-fig.is-s figcaption, .g-fig.is-m figcaption { text-align: center; }

/* ---------- g-board: sridu/board ---------- */
.g-board { margin: 0 auto; text-align: center; }
.g-board svg { display: block; width: 100%; height: auto; margin: 0 auto; }
.g-board.is-s svg { max-width: 260px; }
.g-board.is-m svg { max-width: 380px; }
.g-board.is-l svg { max-width: 520px; }
.g-board.is-zoom svg { border-radius: var(--r-l); border: 1px solid var(--line); background: #0b0c0e; }
.g-board figcaption { margin-top: 14px; font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); }
.g-boards { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; align-items: start; }
.g-boards > * { margin: 0 !important; }
.g-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; align-items: start; }
.g-grid > * { margin: 0 !important; }

/* ---------- g-split: text next to a figure ---------- */
.g-split { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 44px); align-items: center; }
.g-split > * { margin: 0 !important; }
.g-split > * > * + * { margin-top: 14px !important; }
@media (max-width: 760px) { .g-split { grid-template-columns: 1fr; } }

/* ---------- tables in guides ---------- */
.is-guide .section .wp-block-table { border: 1px solid var(--line); border-radius: var(--r-m); overflow-x: auto; background: var(--surface); }
.is-guide .section .wp-block-table table { font-size: 15px; }
.is-guide .section .wp-block-table thead th { background: var(--surface-2); padding: 12px 14px !important; }
.is-guide .section .wp-block-table td, .is-guide .section .wp-block-table tbody th { padding: 12px 14px !important; color: var(--text-2); }
.is-guide .section .wp-block-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.is-guide .section .wp-block-table tbody tr:last-child td { border-bottom: 0 !important; }
.is-guide .section .wp-block-table td:first-child { color: var(--text); font-weight: 600; }
.is-guide .ref td:first-child, .is-guide .ref td:nth-child(2) { width: auto; white-space: normal; }
.is-guide .ref td:nth-child(2) { color: var(--text-2); }
.is-guide .section .wp-block-table table { min-width: 100%; }
.is-guide .section .wp-block-table figcaption { padding: 0 14px 12px; }

/* ---------- CTA in the reading column: buttons under the text ---------- */
.is-guide .cta-box { grid-template-columns: 1fr !important; }
.is-guide .cta-box h2 { font-size: clamp(30px, 3.6vw, 44px); }
.is-guide .cta-box p { max-width: 52ch; }

/* ---------- FAQ as cards ---------- */
.is-guide .faq .wp-block-details { border: 1px solid var(--line) !important; border-radius: var(--r-m); background: var(--surface); padding: 16px 20px !important; }
.is-guide .faq .wp-block-details + .wp-block-details { margin-top: 10px !important; }
.is-guide .faq .wp-block-details summary { font-size: 17px; font-weight: 600; }
.is-guide .faq .wp-block-details p { margin-top: 10px !important; }

/* ---------- small screens ---------- */
@media (max-width: 600px) {
	:root { --g-fs: 16.5px; }
	.g-keys { padding: 18px !important; }
	.g-cards > li { padding: 16px !important; }
	.g-cards > li[class*="gi-"] { padding-top: 16px !important; padding-left: 70px !important; }
	.g-cards > li[class*="gi-"]::before { left: 16px; top: 16px; }
	.g-cards > li[class*="gi-"]::after { left: 26px; top: 26px; }
	.g-steps > li { padding-left: 52px; }
	/* figures run edge to edge on phones: every label gets about a fifth bigger */
	.g-fig, .is-guide .guide-fig { margin-left: calc(var(--wp--style--root--padding-left, 16px) * -1) !important; margin-right: calc(var(--wp--style--root--padding-right, 16px) * -1) !important; padding: 16px 6px !important; border-left: 0; border-right: 0; border-radius: 0; }
	.g-fig figcaption, .is-guide .guide-fig figcaption { padding: 0 10px; }
	.g-split .g-fig { margin-left: calc(var(--wp--style--root--padding-left, 16px) * -1) !important; margin-right: calc(var(--wp--style--root--padding-right, 16px) * -1) !important; }
	.g-stats { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
	.g-stats:has(> li:nth-child(4):last-child) { grid-template-columns: 1fr 1fr; }
	.g-stats > li { padding: 14px 12px 12px !important; font-size: 13px !important; }
	.g-stats > li > strong:first-child { font-size: 26px; white-space: normal; }
}

/* ---- icons (generated by tools/guide-icons.py, do not edit by hand) ---- */
:root {
	--i-target: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%229%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%225%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%221.2%22/%3E%3C/svg%3E");
	--i-check: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M5%2012.5l4.5%204.5L19%207.5%22/%3E%3C/svg%3E");
	--i-cross: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M6%206l12%2012M18%206L6%2018%22/%3E%3C/svg%3E");
	--i-alert: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%203.5L21.5%2020h-19z%22/%3E%3Cpath%20d=%22M12%2010v4.5M12%2017.4v.1%22/%3E%3C/svg%3E");
	--i-info: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%229%22/%3E%3Cpath%20d=%22M12%2011v6M12%207.6v.1%22/%3E%3C/svg%3E");
	--i-bulb: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M9%2017.5h6M10%2021h4M12%203a6%206%200%200%200-3.6%2010.8c.9.7%201.6%201.7%201.6%202.7h4c0-1%20.7-2%201.6-2.7A6%206%200%200%200%2012%203z%22/%3E%3C/svg%3E");
	--i-clock: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%229%22/%3E%3Cpath%20d=%22M12%207v5l3.5%202%22/%3E%3C/svg%3E");
	--i-calendar: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223.5%22%20y=%225%22%20width=%2217%22%20height=%2215.5%22%20rx=%222%22/%3E%3Cpath%20d=%22M3.5%2010h17M8%203v4M16%203v4%22/%3E%3C/svg%3E");
	--i-eye: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M2.5%2012S6%205.5%2012%205.5%2021.5%2012%2021.5%2012%2018%2018.5%2012%2018.5%202.5%2012%202.5%2012z%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%223%22/%3E%3C/svg%3E");
	--i-hand: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M8%2013V5.5a1.5%201.5%200%200%201%203%200V11M11%2010V4a1.5%201.5%200%200%201%203%200v7M14%2010.5V6a1.5%201.5%200%200%201%203%200v8a7%207%200%200%201-7%207h-.5a6%206%200%200%201-4.6-2.2L2.8%2016a1.6%201.6%200%200%201%202.4-2.1L8%2016%22/%3E%3C/svg%3E");
	--i-foot: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M8%2021c-2.5%200-3.5-2-3-4.5L6.5%209C7%206%208.5%204%2010.5%204S14%206%2013.5%209l-1%207.5C12%2019.5%2010.5%2021%208%2021z%22/%3E%3Ccircle%20cx=%2216.5%22%20cy=%225%22%20r=%221.3%22/%3E%3Ccircle%20cx=%2218.5%22%20cy=%228.3%22%20r=%221.1%22/%3E%3Ccircle%20cx=%2219%22%20cy=%2211.8%22%20r=%221%22/%3E%3C/svg%3E");
	--i-body: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%224.5%22%20r=%222%22/%3E%3Cpath%20d=%22M12%207v7M8%2021l4-7%204%207M6%2010.5l6-1.5%206%201.5%22/%3E%3C/svg%3E");
	--i-spine: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%202.5v19%22/%3E%3Crect%20x=%229%22%20y=%224%22%20width=%226%22%20height=%223%22%20rx=%221%22/%3E%3Crect%20x=%229%22%20y=%229%22%20width=%226%22%20height=%223%22%20rx=%221%22/%3E%3Crect%20x=%229%22%20y=%2214%22%20width=%226%22%20height=%223%22%20rx=%221%22/%3E%3C/svg%3E");
	--i-arm: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%2020l5-6%203-8M12%206l6%203%202%205%22/%3E%3Ccircle%20cx=%2212%22%20cy=%226%22%20r=%221.6%22/%3E%3Ccircle%20cx=%229%22%20cy=%2214%22%20r=%221.6%22/%3E%3C/svg%3E");
	--i-heart: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%2020s-7.5-4.6-9-9.3C2%207.2%204.3%204.5%207.3%204.5c2%200%203.5%201.1%204.7%202.8%201.2-1.7%202.7-2.8%204.7-2.8%203%200%205.3%202.7%204.3%206.2C19.5%2015.4%2012%2020%2012%2020z%22/%3E%3C/svg%3E");
	--i-brain: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M9%204.5a3%203%200%200%200-3%203%203%203%200%200%200-2%205%203%203%200%200%200%202%205%203%203%200%200%200%206%20.5V6a2.5%202.5%200%200%200-3-1.5zM15%204.5a3%203%200%200%201%203%203%203%203%200%200%201%202%205%203%203%200%200%201-2%205%203%203%200%200%201-6%20.5%22/%3E%3C/svg%3E");
	--i-focus: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%227%22/%3E%3Cpath%20d=%22M12%202v4M12%2018v4M2%2012h4M18%2012h4%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%221.2%22/%3E%3C/svg%3E");
	--i-ruler: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%222.5%22%20y=%228%22%20width=%2219%22%20height=%228%22%20rx=%221.5%22/%3E%3Cpath%20d=%22M6.5%208v3.5M10.5%208v2.5M14.5%208v3.5M18.5%208v2.5%22/%3E%3C/svg%3E");
	--i-level: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%222.5%22%20y=%228.5%22%20width=%2219%22%20height=%227%22%20rx=%222%22/%3E%3Crect%20x=%229.5%22%20y=%2210.5%22%20width=%225%22%20height=%223%22%20rx=%221.5%22/%3E%3Cpath%20d=%22M12%2010.5v3%22/%3E%3C/svg%3E");
	--i-light: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%224%22/%3E%3Cpath%20d=%22M12%202.5v2.5M12%2019v2.5M2.5%2012H5M19%2012h2.5M5.3%205.3l1.8%201.8M16.9%2016.9l1.8%201.8M5.3%2018.7l1.8-1.8M16.9%207.1l1.8-1.8%22/%3E%3C/svg%3E");
	--i-sound: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%2010v4h4l5%204V6L8%2010zM16%209a4%204%200%200%201%200%206M18.5%206.5a7.5%207.5%200%200%201%200%2011%22/%3E%3C/svg%3E");
	--i-mute: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%2010v4h4l5%204V6L8%2010zM16.5%209.5l5%205M21.5%209.5l-5%205%22/%3E%3C/svg%3E");
	--i-wall: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223%22%20y=%224%22%20width=%2218%22%20height=%2216%22%20rx=%221%22/%3E%3Cpath%20d=%22M3%209.3h18M3%2014.7h18M9%204v5.3M15%204v5.3M6%209.3v5.4M12%209.3v5.4M18%209.3v5.4M9%2014.7V20M15%2014.7V20%22/%3E%3C/svg%3E");
	--i-camera: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%208h3l2-3h6l2%203h3v11H4z%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2213%22%20r=%223.5%22/%3E%3C/svg%3E");
	--i-chart: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%2020V4M4%2020h16M8%2016v-4M12%2016V8M16%2016v-6%22/%3E%3C/svg%3E");
	--i-trend: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3.5%2017l6-6%204%204%207-7.5M15%207.5h5.5V13%22/%3E%3C/svg%3E");
	--i-trophy: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M8%204h8v5a4%204%200%200%201-8%200zM8%206H5a3%203%200%200%200%203%204M16%206h3a3%203%200%200%201-3%204M12%2013v4M8.5%2020h7%22/%3E%3C/svg%3E");
	--i-users: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%229%22%20cy=%228%22%20r=%223.2%22/%3E%3Cpath%20d=%22M3.5%2019c.6-3.2%202.8-5%205.5-5s4.9%201.8%205.5%205%22/%3E%3Ccircle%20cx=%2217%22%20cy=%229%22%20r=%222.5%22/%3E%3Cpath%20d=%22M15.5%2014.2c2.4-.3%204.4%201.2%205%204.3%22/%3E%3C/svg%3E");
	--i-user: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%228%22%20r=%223.5%22/%3E%3Cpath%20d=%22M5%2020c.8-3.8%203.6-6%207-6s6.2%202.2%207%206%22/%3E%3C/svg%3E");
	--i-euro: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M17.5%206.5A7%207%200%201%200%2017.5%2017.5M4%2010.5h9M4%2013.5h9%22/%3E%3C/svg%3E");
	--i-cart: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3%204h2.5l2.2%2011h10.6L20.5%207H7%22/%3E%3Ccircle%20cx=%229%22%20cy=%2219.5%22%20r=%221.4%22/%3E%3Ccircle%20cx=%2217%22%20cy=%2219.5%22%20r=%221.4%22/%3E%3C/svg%3E");
	--i-wrench: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M14.5%206.5a4%204%200%200%200%205%205L12%2019a2.1%202.1%200%200%201-3-3l7.5-7.5a4%204%200%200%200-2-2z%22/%3E%3Cpath%20d=%22M14.5%206.5l2-3%203%201-1%203-4%202%22/%3E%3C/svg%3E");
	--i-rotate: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M20%2012a8%208%200%201%201-2.3-5.7M20%204v4.5h-4.5%22/%3E%3C/svg%3E");
	--i-drop: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%203s6%206.5%206%2011a6%206%200%200%201-12%200c0-4.5%206-11%206-11z%22/%3E%3C/svg%3E");
	--i-shield: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%203l7.5%203v5.5c0%204.5-3.2%208-7.5%209.5-4.3-1.5-7.5-5-7.5-9.5V6z%22/%3E%3Cpath%20d=%22M8.8%2012l2.2%202.2%204.3-4.4%22/%3E%3C/svg%3E");
	--i-star: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%203.5l2.6%205.4%205.9.8-4.3%204.1%201%205.8L12%2016.8l-5.2%202.8%201-5.8-4.3-4.1%205.9-.8z%22/%3E%3C/svg%3E");
	--i-dart: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3%2021l7.5-7.5M10.5%2013.5l3-1%205-5-2-2-5%205-1%203zM16.5%205.5l2-2.5%202.5%202.5-2.5%202%22/%3E%3C/svg%3E");
	--i-repeat: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%2011V9a3%203%200%200%201%203-3h12.5M16.5%203l3%203-3%203M20%2013v2a3%203%200%200%201-3%203H4.5M7.5%2021l-3-3%203-3%22/%3E%3C/svg%3E");
	--i-weight: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M6.5%208h11l2.5%2012H4z%22/%3E%3Ccircle%20cx=%2212%22%20cy=%225.5%22%20r=%222.5%22/%3E%3C/svg%3E");
	--i-feather: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M20%204c-8%200-14%205-14%2013v3M6%2017h7M9%2013h7.5M12%209h7%22/%3E%3C/svg%3E");
	--i-home: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3.5%2011L12%204l8.5%207M6%209.5V20h12V9.5%22/%3E%3C/svg%3E");
	--i-bolt: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M13%202.5L4.5%2013.5H11l-1%208%208.5-11H12z%22/%3E%3C/svg%3E");
	--i-book: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%205.5A2.5%202.5%200%200%201%206.5%203H20v15H6.5A2.5%202.5%200%200%200%204%2020.5zM4%2020.5A2.5%202.5%200%200%200%206.5%2023H20v-5%22/%3E%3C/svg%3E");
	--i-list: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M9%206h11M9%2012h11M9%2018h11%22/%3E%3Ccircle%20cx=%224.5%22%20cy=%226%22%20r=%221%22/%3E%3Ccircle%20cx=%224.5%22%20cy=%2212%22%20r=%221%22/%3E%3Ccircle%20cx=%224.5%22%20cy=%2218%22%20r=%221%22/%3E%3C/svg%3E");
	--i-play: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M7%204.5v15l12-7.5z%22/%3E%3C/svg%3E");
	--i-pause: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M8%205v14M16%205v14%22/%3E%3C/svg%3E");
	--i-layers: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%203l9%205-9%205-9-5zM3%2012.5l9%205%209-5M3%2016.5l9%205%209-5%22/%3E%3C/svg%3E");
	--i-grid: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%224%22%20y=%224%22%20width=%227%22%20height=%227%22%20rx=%221%22/%3E%3Crect%20x=%2213%22%20y=%224%22%20width=%227%22%20height=%227%22%20rx=%221%22/%3E%3Crect%20x=%224%22%20y=%2213%22%20width=%227%22%20height=%227%22%20rx=%221%22/%3E%3Crect%20x=%2213%22%20y=%2213%22%20width=%227%22%20height=%227%22%20rx=%221%22/%3E%3C/svg%3E");
	--i-swap: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%208h14.5M15%204.5L18.5%208%2015%2011.5M20%2016H5.5M9%2012.5L5.5%2016%209%2019.5%22/%3E%3C/svg%3E");
	--i-thermo: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M10%2014.5V5a2%202%200%200%201%204%200v9.5a4%204%200%201%201-4%200z%22/%3E%3Cpath%20d=%22M12%209v7%22/%3E%3C/svg%3E");
	--i-moon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M20%2014.5A8.5%208.5%200%201%201%209.5%204a7%207%200%200%200%2010.5%2010.5z%22/%3E%3C/svg%3E");
	--i-coffee: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%209h13v5a6%206%200%200%201-6%206h-1a6%206%200%200%201-6-6zM17%2010.5h1.5a2.5%202.5%200%200%201%200%205H17M8%203v3M12%203v3%22/%3E%3C/svg%3E");
	--i-stand: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%203v15M7%2021l5-3%205%203%22/%3E%3Ccircle%20cx=%2212%22%20cy=%228%22%20r=%224.5%22/%3E%3C/svg%3E");
	--i-number: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M9%204L7%2020M17%204l-2%2016M4.5%209h16M3.5%2015h16%22/%3E%3C/svg%3E");
}
.gi-target { --gi-mask: var(--i-target); }
.gi-check { --gi-mask: var(--i-check); }
.gi-cross { --gi-mask: var(--i-cross); }
.gi-alert { --gi-mask: var(--i-alert); }
.gi-info { --gi-mask: var(--i-info); }
.gi-bulb { --gi-mask: var(--i-bulb); }
.gi-clock { --gi-mask: var(--i-clock); }
.gi-calendar { --gi-mask: var(--i-calendar); }
.gi-eye { --gi-mask: var(--i-eye); }
.gi-hand { --gi-mask: var(--i-hand); }
.gi-foot { --gi-mask: var(--i-foot); }
.gi-body { --gi-mask: var(--i-body); }
.gi-spine { --gi-mask: var(--i-spine); }
.gi-arm { --gi-mask: var(--i-arm); }
.gi-heart { --gi-mask: var(--i-heart); }
.gi-brain { --gi-mask: var(--i-brain); }
.gi-focus { --gi-mask: var(--i-focus); }
.gi-ruler { --gi-mask: var(--i-ruler); }
.gi-level { --gi-mask: var(--i-level); }
.gi-light { --gi-mask: var(--i-light); }
.gi-sound { --gi-mask: var(--i-sound); }
.gi-mute { --gi-mask: var(--i-mute); }
.gi-wall { --gi-mask: var(--i-wall); }
.gi-camera { --gi-mask: var(--i-camera); }
.gi-chart { --gi-mask: var(--i-chart); }
.gi-trend { --gi-mask: var(--i-trend); }
.gi-trophy { --gi-mask: var(--i-trophy); }
.gi-users { --gi-mask: var(--i-users); }
.gi-user { --gi-mask: var(--i-user); }
.gi-euro { --gi-mask: var(--i-euro); }
.gi-cart { --gi-mask: var(--i-cart); }
.gi-wrench { --gi-mask: var(--i-wrench); }
.gi-rotate { --gi-mask: var(--i-rotate); }
.gi-drop { --gi-mask: var(--i-drop); }
.gi-shield { --gi-mask: var(--i-shield); }
.gi-star { --gi-mask: var(--i-star); }
.gi-dart { --gi-mask: var(--i-dart); }
.gi-repeat { --gi-mask: var(--i-repeat); }
.gi-weight { --gi-mask: var(--i-weight); }
.gi-feather { --gi-mask: var(--i-feather); }
.gi-home { --gi-mask: var(--i-home); }
.gi-bolt { --gi-mask: var(--i-bolt); }
.gi-book { --gi-mask: var(--i-book); }
.gi-list { --gi-mask: var(--i-list); }
.gi-play { --gi-mask: var(--i-play); }
.gi-pause { --gi-mask: var(--i-pause); }
.gi-layers { --gi-mask: var(--i-layers); }
.gi-grid { --gi-mask: var(--i-grid); }
.gi-swap { --gi-mask: var(--i-swap); }
.gi-thermo { --gi-mask: var(--i-thermo); }
.gi-moon { --gi-mask: var(--i-moon); }
.gi-coffee { --gi-mask: var(--i-coffee); }
.gi-stand { --gi-mask: var(--i-stand); }
.gi-number { --gi-mask: var(--i-number); }