/* ============================================================ Shared page furniture — background patterns and scrollbar ============================================================ Each pattern is an SVG used as a CSS mask rather than a picture: the mask supplies the shape and a theme variable supplies the colour underneath, so all six follow light and dark mode without a second copy of anything. Three fixed layers, back to front: .bgpat z-index -3 the pattern itself .bgwash z-index -2 radial wash pulling the middle back to the page colour, so nothing sits behind the reading matter #bg z-index -1 the puzzle pages' ambient-mote canvas Opacity runs inversely to density: the busiest patterns are the faintest, or they compete with the text. ============================================================ */ /* ---------------- background patterns ---------------- One fixed layer, coloured by a theme variable and cut to shape by a mask. "plain" simply leaves it at zero opacity. */ .bgpat{ position:fixed; inset:0; z-index:-3; pointer-events:none; background-color:var(--accent); opacity:0; transition:opacity .4s ease; -webkit-mask-repeat:repeat; mask-repeat:repeat; -webkit-mask-position:center center; mask-position:center center; } /* Washes the middle of the page back towards the page colour, so the pattern stays at the edges and never sits behind the reading matter. */ .bgwash{ position:fixed; inset:0; z-index:-2; pointer-events:none; background:radial-gradient(62% 46% at 50% 36%, var(--bg) 0%, transparent 76%); } @media (prefers-reduced-motion:reduce){ .bgpat{transition:none} } html[data-pat="motes"] .bgpat{opacity:0.14;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'118'%20height%3D'118'%20viewBox%3D'0%200%20118%20118'%3E%3Cg%20fill%3D'black'%3E%20%3Ccircle%20cx%3D'15'%20cy%3D'22'%20r%3D'1.7'%2F%3E%3Ccircle%20cx%3D'72'%20cy%3D'10'%20r%3D'1.1'%2F%3E%20%3Ccircle%20cx%3D'101'%20cy%3D'56'%20r%3D'1.9'%2F%3E%3Ccircle%20cx%3D'43'%20cy%3D'79'%20r%3D'1.3'%2F%3E%20%3Ccircle%20cx%3D'88'%20cy%3D'101'%20r%3D'1.5'%2F%3E%3Ccircle%20cx%3D'7'%20cy%3D'68'%20r%3D'1.1'%2F%3E%20%3Cpath%20d%3D'M58%2042%20l2.4%205.6%205.6%202.4%20-5.6%202.4%20-2.4%205.6%20-2.4%20-5.6%20-5.6%20-2.4%205.6%20-2.4z'%2F%3E%20%3Cpath%20d%3D'M22%20103%20l1.7%204%204%201.7%20-4%201.7%20-1.7%204%20-1.7%20-4%20-4%20-1.7%204%20-1.7z'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'118'%20height%3D'118'%20viewBox%3D'0%200%20118%20118'%3E%3Cg%20fill%3D'black'%3E%20%3Ccircle%20cx%3D'15'%20cy%3D'22'%20r%3D'1.7'%2F%3E%3Ccircle%20cx%3D'72'%20cy%3D'10'%20r%3D'1.1'%2F%3E%20%3Ccircle%20cx%3D'101'%20cy%3D'56'%20r%3D'1.9'%2F%3E%3Ccircle%20cx%3D'43'%20cy%3D'79'%20r%3D'1.3'%2F%3E%20%3Ccircle%20cx%3D'88'%20cy%3D'101'%20r%3D'1.5'%2F%3E%3Ccircle%20cx%3D'7'%20cy%3D'68'%20r%3D'1.1'%2F%3E%20%3Cpath%20d%3D'M58%2042%20l2.4%205.6%205.6%202.4%20-5.6%202.4%20-2.4%205.6%20-2.4%20-5.6%20-5.6%20-2.4%205.6%20-2.4z'%2F%3E%20%3Cpath%20d%3D'M22%20103%20l1.7%204%204%201.7%20-4%201.7%20-1.7%204%20-1.7%20-4%20-4%20-1.7%204%20-1.7z'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");-webkit-mask-size:118px 118px;mask-size:118px 118px} html[data-pat="lattice"] .bgpat{opacity:0.11;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'52'%20height%3D'52'%20viewBox%3D'0%200%2052%2052'%3E%3Cg%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1'%3E%20%3Cpath%20d%3D'M26%201%20L51%2026%20L26%2051%20L1%2026%20Z'%2F%3E%20%3Cpath%20d%3D'M26%2014%20L38%2026%20L26%2038%20L14%2026%20Z'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'52'%20height%3D'52'%20viewBox%3D'0%200%2052%2052'%3E%3Cg%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1'%3E%20%3Cpath%20d%3D'M26%201%20L51%2026%20L26%2051%20L1%2026%20Z'%2F%3E%20%3Cpath%20d%3D'M26%2014%20L38%2026%20L26%2038%20L14%2026%20Z'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");-webkit-mask-size:52px 52px;mask-size:52px 52px} html[data-pat="trigons"] .bgpat{opacity:0.085;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'44'%20height%3D'44'%20viewBox%3D'0%200%2044%2044'%3E%3Cg%20fill%3D'black'%3E%20%3Cpath%20d%3D'M11%204%20L19%2018%20L3%2018%20Z'%2F%3E%20%3Cpath%20d%3D'M33%2022%20L41%2036%20L25%2036%20Z'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'44'%20height%3D'44'%20viewBox%3D'0%200%2044%2044'%3E%3Cg%20fill%3D'black'%3E%20%3Cpath%20d%3D'M11%204%20L19%2018%20L3%2018%20Z'%2F%3E%20%3Cpath%20d%3D'M33%2022%20L41%2036%20L25%2036%20Z'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");-webkit-mask-size:44px 44px;mask-size:44px 44px} html[data-pat="weave"] .bgpat{opacity:0.1;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'76'%20height%3D'76'%20viewBox%3D'0%200%2076%2076'%3E%3Cg%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.2'%3E%20%3Cpath%20d%3D'M38%206%20L64%2021%20L64%2051%20L38%2066%20L12%2051%20L12%2021%20Z'%2F%3E%20%3Cpath%20d%3D'M38%2024%20L50%2031%20L50%2044%20L38%2051%20L26%2044%20L26%2031%20Z'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'76'%20height%3D'76'%20viewBox%3D'0%200%2076%2076'%3E%3Cg%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.2'%3E%20%3Cpath%20d%3D'M38%206%20L64%2021%20L64%2051%20L38%2066%20L12%2051%20L12%2021%20Z'%2F%3E%20%3Cpath%20d%3D'M38%2024%20L50%2031%20L50%2044%20L38%2051%20L26%2044%20L26%2031%20Z'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");-webkit-mask-size:76px 76px;mask-size:76px 76px} html[data-pat="sigils"] .bgpat{opacity:0.12;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'196'%20height%3D'196'%20viewBox%3D'0%200%20196%20196'%3E%3Cg%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%3E%20%3Cpath%20d%3D'M52%2020%20L84%2052%20L52%2084%20L20%2052%20Z'%2F%3E%20%3Cpath%20d%3D'M52%2040%20L64%2052%20L52%2064%20L40%2052%20Z'%2F%3E%20%3Cpath%20d%3D'M146%20112%20L178%20144%20L146%20176%20L114%20144%20Z'%2F%3E%20%3Cpath%20d%3D'M148%2028%20L176%2076%20L120%2076%20Z'%2F%3E%20%3Cpath%20d%3D'M50%20122%20L78%20170%20L22%20170%20Z'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'196'%20height%3D'196'%20viewBox%3D'0%200%20196%20196'%3E%3Cg%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%3E%20%3Cpath%20d%3D'M52%2020%20L84%2052%20L52%2084%20L20%2052%20Z'%2F%3E%20%3Cpath%20d%3D'M52%2040%20L64%2052%20L52%2064%20L40%2052%20Z'%2F%3E%20%3Cpath%20d%3D'M146%20112%20L178%20144%20L146%20176%20L114%20144%20Z'%2F%3E%20%3Cpath%20d%3D'M148%2028%20L176%2076%20L120%2076%20Z'%2F%3E%20%3Cpath%20d%3D'M50%20122%20L78%20170%20L22%20170%20Z'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");-webkit-mask-size:196px 196px;mask-size:196px 196px} html[data-pat="orbits"] .bgpat{opacity:0.09;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'260'%20height%3D'260'%20viewBox%3D'0%200%20260%20260'%3E%3Cg%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%3E%20%3Ccircle%20cx%3D'66'%20cy%3D'66'%20r%3D'56'%2F%3E%3Ccircle%20cx%3D'66'%20cy%3D'66'%20r%3D'37'%2F%3E%3Ccircle%20cx%3D'66'%20cy%3D'66'%20r%3D'18'%2F%3E%20%3Ccircle%20cx%3D'196'%20cy%3D'192'%20r%3D'48'%2F%3E%3Ccircle%20cx%3D'196'%20cy%3D'192'%20r%3D'27'%2F%3E%20%3Ccircle%20cx%3D'210'%20cy%3D'48'%20r%3D'14'%2F%3E%3Ccircle%20cx%3D'38'%20cy%3D'214'%20r%3D'9'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'260'%20height%3D'260'%20viewBox%3D'0%200%20260%20260'%3E%3Cg%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%3E%20%3Ccircle%20cx%3D'66'%20cy%3D'66'%20r%3D'56'%2F%3E%3Ccircle%20cx%3D'66'%20cy%3D'66'%20r%3D'37'%2F%3E%3Ccircle%20cx%3D'66'%20cy%3D'66'%20r%3D'18'%2F%3E%20%3Ccircle%20cx%3D'196'%20cy%3D'192'%20r%3D'48'%2F%3E%3Ccircle%20cx%3D'196'%20cy%3D'192'%20r%3D'27'%2F%3E%20%3Ccircle%20cx%3D'210'%20cy%3D'48'%20r%3D'14'%2F%3E%3Ccircle%20cx%3D'38'%20cy%3D'214'%20r%3D'9'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");-webkit-mask-size:260px 260px;mask-size:260px 260px} /* ---------------- scrollbar ---------------- The standard properties, not ::-webkit-scrollbar. Since Chrome 121 the two cannot be combined: setting scrollbar-color to anything but auto makes the browser ignore every -webkit-scrollbar rule, which the CSS Working Group resolved deliberately. Choosing the standard pair costs rounded thumbs and pixel widths, and buys Firefox — the right way round for a site nobody is going to admire the scrollbar of. Colours are mixed from tokens both stylesheets already define, so this one rule themes the home page and the puzzles alike and follows light and dark without a second copy. scrollbar-color inherits, so the suggestion dropdown and any other scrolling panel pick it up for free. Width is left at auto on purpose. "thin" looks sleeker and is meaningfully worse to actually grab, particularly on a trackpad. scrollbar-gutter reserves the space permanently. The puzzle pages grow as each clue is revealed, so without it the whole column shifts sideways the moment the content passes the fold. */ html{ scrollbar-color: color-mix(in oklab, var(--accent) 45%, var(--line)) var(--sunken); scrollbar-gutter: stable; }