/* Custom scrollbars for every iteration: a slim rounded thumb on a track that matches the page, the accent on hover.
   The page never scrolls sideways; inner horizontal scrollers keep hiding their bars (they are swiped or use buttons). */
html { --sb-track: #ffffff; --sb-thumb: rgba(17, 17, 17, .26); --sb-hover: rgba(17, 17, 17, .5); overflow-x: clip; scrollbar-width: thin; scrollbar-color: var(--sb-thumb) var(--sb-track); }
body { overflow-x: clip; }
html[data-it="2"] { --sb-track: #050607; --sb-thumb: rgba(255, 255, 255, .24); --sb-hover: var(--i2a, #2fd4b4); }
html[data-it="3"] { --sb-track: var(--i3d, #0b0d10); --sb-thumb: rgba(var(--i3w, 245, 243, 239), .26); --sb-hover: var(--i3a, #ff5b1f); }
html::-webkit-scrollbar { width: 12px; height: 0; }
html::-webkit-scrollbar-track { background: var(--sb-track); }
html::-webkit-scrollbar-thumb { min-height: 48px; border: 4px solid var(--sb-track); border-radius: 8px; background: var(--sb-thumb); background-clip: padding-box; transition: background-color .2s; }
html::-webkit-scrollbar-thumb:hover, html::-webkit-scrollbar-thumb:active { border-width: 3px; background-color: var(--sb-hover); }
html::-webkit-scrollbar-corner { background: var(--sb-track); }

/* Options: show only rows that do something. Iteration 1's gradient Colour only applies when Style is Gradient. */
html[data-tone="plain"] .opt__r:has([data-k="grad"]) { display: none; }

/* Options swatches: flat colour dots for the reveal; a split dot (ground + accent) for each palette */
.opt__dot--flat::before { background: var(--c); }
.opt__dot--pal::before { background: linear-gradient(135deg, var(--d) 0 50%, var(--c) 50% 100%); }