/* ═══════════════════════════════════════════════════════════════════════════
BITZFIELD — look-monolith.css · MONOLITH = BACKGROUND ONLY (Ives, 2026-10-02)
GENERATED — edit the builder, not this file. (No repo path here: this file
ships on the public site, and the deploy tripwire refuses internal paths.)
Andrew 2026-10-02: "Just change the background of bitzfield so the glass and
effects stays just what's under changes." … then: "The black room is too
plain. The files given for inspiration had other backgrounds and textures."
So this file changes ONE thing — the backdrop behind BitzField — and offers
the backdrops the seven references actually use, each rebuilt (layered
gradients + inline SVG drawing + feTurbulence grain), one per variant:
beam 0b79a9d3.jpeg light columns, blue pool rising behind the product (default)
rings 31d31bf6 ribbed spheres in the dark, centre light shaft
studio 5bc7fe4a + 941abb65 charcoal haze, out-of-focus spheres, bokeh
blocks 8a05c1c7 soft-lit architectural blocks, a bright edge, lit wall
vortex 91e37ba1 violet vortex, fanned light streaks, lavender bloom
cubes ed64f14c isometric cubes in shadow
Everything ON TOP is BitzField, untouched: glass, blur, edges, shadows,
cards, buttons, type, colours, dock, motion, every tool's own styling. The
glass borrows its look from what is behind it — nothing here retints it.
HOW IT PAINTS. Two fixed, full-bleed layers behind the page — the drawing
(html::before, cover) and the grain (html::after, tiled at true size);
body's own ground goes transparent so the layer shows. Fixed = composited
once, so neither the drawing nor the grain repaints on scroll. Nothing
moves: every backdrop is still (no animation to stop under reduced motion).
PLUG AND PLAY. Inert unless . In the OS it is set
by assets/look-selector.js (which also sets data-monolith-bg). Install = two
lines in after shell.css:
PUBLIC SITE (Andrew 2026-10-04 "do vortex on public"): the look is FIXED in
the markup instead — plus the stylesheet link, and NO selector
script, so visitors cannot switch and nothing reads storage.
SCREEN ONLY: nothing here can reach paper.
═══════════════════════════════════════════════════════════════════════════ */
@media screen{
html[data-look="monolith"]{
/* the backdrop palette */
--mono-c1:rgba(40,115,230,.30);
--mono-c2:rgba(16,72,175,.42);
--mono-c3:rgba(8,36,100,.45);
--mono-c4:#000000;
--mono-c5:rgba(0,0,0,.75);
--mono-c6:rgba(255,255,255,.085);
--mono-c7:rgba(255,255,255,.03);
--mono-c8:#030303;
--mono-c9:rgba(0,0,0,.7);
--mono-c10:rgba(255,255,255,.09);
--mono-c11:rgba(255,255,255,.055);
--mono-c12:#0b0b0c;
--mono-c13:rgba(0,0,0,.6);
--mono-c14:#0a0a0b;
--mono-c15:rgba(0,0,0,.85);
--mono-c16:rgba(168,160,255,.55);
--mono-c17:rgba(80,64,240,.42);
--mono-c18:#1c1550;
--mono-c19:#0b0820;
--mono-c20:rgba(255,255,255,.05);
/* 0b79a9d3.jpeg — light columns + the blue pool rising behind the product */
--mono-grain-beam:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E %3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 0'/%3E%3C/filter%3E %3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
--mono-bg-beam:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='none'%3E %3Cdefs%3E %3C%21-- userSpaceOnUse: a bounding-box gradient on a zero-width line never paints --%3E %3ClinearGradient id='cf' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='0' y2='1000'%3E %3Cstop offset='0' stop-color='%232a4f9a' stop-opacity='0'/%3E %3Cstop offset='.15' stop-color='%232a4f9a' stop-opacity='.75'/%3E %3Cstop offset='.72' stop-color='%232a4f9a' stop-opacity='.6'/%3E %3Cstop offset='1' stop-color='%232a4f9a' stop-opacity='0'/%3E %3C/linearGradient%3E %3ClinearGradient id='catch' gradientUnits='userSpaceOnUse' x1='0' y1='135' x2='0' y2='255'%3E %3Cstop offset='0' stop-color='%234f86e8' stop-opacity='0'/%3E %3Cstop offset='.5' stop-color='%234f86e8' stop-opacity='.9'/%3E %3Cstop offset='1' stop-color='%234f86e8' stop-opacity='0'/%3E %3C/linearGradient%3E %3ClinearGradient id='catch2' gradientUnits='userSpaceOnUse' x1='0' y1='575' x2='0' y2='665'%3E %3Cstop offset='0' stop-color='%234f86e8' stop-opacity='0'/%3E %3Cstop offset='.5' stop-color='%234f86e8' stop-opacity='.9'/%3E %3Cstop offset='1' stop-color='%234f86e8' stop-opacity='0'/%3E %3C/linearGradient%3E %3C/defs%3E %3Cline x1='136.0' y1='0' x2='136.0' y2='1000' stroke='url(%23cf)' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cline x1='324.8' y1='0' x2='324.8' y2='1000' stroke='url(%23cf)' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cline x1='515.2' y1='0' x2='515.2' y2='1000' stroke='url(%23cf)' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cline x1='704.0' y1='0' x2='704.0' y2='1000' stroke='url(%23cf)' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cline x1='894.4' y1='0' x2='894.4' y2='1000' stroke='url(%23cf)' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cline x1='1084.8' y1='0' x2='1084.8' y2='1000' stroke='url(%23cf)' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cline x1='1275.2' y1='0' x2='1275.2' y2='1000' stroke='url(%23cf)' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cline x1='1464.0' y1='0' x2='1464.0' y2='1000' stroke='url(%23cf)' stroke-width='1' vector-effect='non-scaling-stroke'/%3E %3Cline x1='1084.8' y1='135' x2='1084.8' y2='255' stroke='url(%23catch)' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E %3Cline x1='515.2' y1='575' x2='515.2' y2='665' stroke='url(%23catch2)' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E %3C/svg%3E"),
radial-gradient(16% 62% at 50% 100%, var(--mono-c1), transparent 78%),
radial-gradient(34% 70% at 50% 108%, var(--mono-c2), transparent 74%),
radial-gradient(80% 45% at 50% 120%, var(--mono-c3), transparent 72%),
var(--mono-c4);
/* 31d31bf6 — ribbed spheres crowding the dark, a shaft of light down the centre */
--mono-grain-rings:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E %3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E %3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
--mono-bg-rings:radial-gradient(120% 90% at 50% 45%, transparent 55%, var(--mono-c5) 100%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'%3E %3Cdefs%3E%3Cpattern id='rib' width='7' height='7' patternUnits='userSpaceOnUse' patternTransform='rotate(-28)'%3E %3Crect width='7' height='2.66' fill='%23ffffff' fill-opacity='.11'/%3E%3C/pattern%3E %3CradialGradient id='sh' cx='.36' cy='.3' r='.75'%3E %3Cstop offset='0' stop-color='%233c3c42' stop-opacity='.6'/%3E %3Cstop offset='.45' stop-color='%23141417' stop-opacity='.92'/%3E %3Cstop offset='.85' stop-color='%23070708' stop-opacity='.95'/%3E %3Cstop offset='1' stop-color='%23000' stop-opacity='0'/%3E %3C/radialGradient%3E%3Cfilter id='b0' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3C/filter%3E%3Cfilter id='b1' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='4'/%3E%3C/filter%3E%3Cfilter id='b2' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3C/filter%3E%3Cfilter id='b3' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3C/filter%3E%3Cfilter id='b4' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3C/filter%3E%3Cfilter id='b5' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3C/filter%3E%3Cfilter id='b6' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='4'/%3E%3C/filter%3E%3Cfilter id='b7' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23b0)'%3E%3Ccircle cx='230' cy='120' r='170' fill='url(%23sh)'/%3E%3Ccircle cx='230' cy='120' r='165' fill='url(%23rib)'/%3E%3C/g%3E%3Cg filter='url(%23b1)'%3E%3Ccircle cx='700' cy='40' r='150' fill='url(%23sh)'/%3E%3Ccircle cx='700' cy='40' r='146' fill='url(%23rib)'/%3E%3C/g%3E%3Cg filter='url(%23b2)'%3E%3Ccircle cx='1180' cy='130' r='190' fill='url(%23sh)'/%3E%3Ccircle cx='1180' cy='130' r='184' fill='url(%23rib)'/%3E%3C/g%3E%3Cg filter='url(%23b3)'%3E%3Ccircle cx='1500' cy='520' r='210' fill='url(%23sh)'/%3E%3Ccircle cx='1500' cy='520' r='204' fill='url(%23rib)'/%3E%3C/g%3E%3Cg filter='url(%23b4)'%3E%3Ccircle cx='120' cy='820' r='230' fill='url(%23sh)'/%3E%3Ccircle cx='120' cy='820' r='223' fill='url(%23rib)'/%3E%3C/g%3E%3Cg filter='url(%23b5)'%3E%3Ccircle cx='560' cy='960' r='200' fill='url(%23sh)'/%3E%3Ccircle cx='560' cy='960' r='194' fill='url(%23rib)'/%3E%3C/g%3E%3Cg filter='url(%23b6)'%3E%3Ccircle cx='1050' cy='930' r='170' fill='url(%23sh)'/%3E%3Ccircle cx='1050' cy='930' r='165' fill='url(%23rib)'/%3E%3C/g%3E%3Cg filter='url(%23b7)'%3E%3Ccircle cx='1420' cy='900' r='200' fill='url(%23sh)'/%3E%3Ccircle cx='1420' cy='900' r='194' fill='url(%23rib)'/%3E%3C/g%3E%3C/svg%3E"),
radial-gradient(12% 75% at 50% -5%, var(--mono-c6), transparent 75%),
radial-gradient(40% 40% at 50% 30%, var(--mono-c7), transparent 70%),
var(--mono-c8);
/* 5bc7fe4a + 941abb65 — charcoal studio haze, out-of-focus spheres and bokeh */
--mono-grain-studio:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E %3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E %3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
--mono-bg-studio:radial-gradient(130% 100% at 50% 40%, transparent 50%, var(--mono-c9) 100%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'%3E %3Cdefs%3E%3Cpattern id='rib' width='7' height='7' patternUnits='userSpaceOnUse' patternTransform='rotate(-28)'%3E %3Crect width='7' height='2.66' fill='%23ffffff' fill-opacity='.11'/%3E%3C/pattern%3E %3CradialGradient id='sh' cx='.36' cy='.3' r='.75'%3E %3Cstop offset='0' stop-color='%233c3c42' stop-opacity='.6'/%3E %3Cstop offset='.45' stop-color='%23141417' stop-opacity='.92'/%3E %3Cstop offset='.85' stop-color='%23070708' stop-opacity='.95'/%3E %3Cstop offset='1' stop-color='%23000' stop-opacity='0'/%3E %3C/radialGradient%3E%3Cfilter id='b0' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='7'/%3E%3C/filter%3E%3Cfilter id='b1' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3C/filter%3E%3Cfilter id='b2' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='14'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23b0)'%3E%3Ccircle cx='90' cy='160' r='230' fill='url(%23sh)'/%3E%3Ccircle cx='90' cy='160' r='223' fill='url(%23rib)'/%3E%3C/g%3E%3Cg filter='url(%23b1)'%3E%3Ccircle cx='1490' cy='900' r='260' fill='url(%23sh)'/%3E%3Ccircle cx='1490' cy='900' r='252' fill='url(%23rib)'/%3E%3C/g%3E%3Cg filter='url(%23b2)'%3E%3Ccircle cx='1480' cy='140' r='120' fill='url(%23sh)'/%3E%3Ccircle cx='1480' cy='140' r='116' fill='url(%23rib)'/%3E%3C/g%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'%3E %3Cdefs%3E%3Cfilter id='bk' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='26'/%3E%3C/filter%3E %3CradialGradient id='d' cx='.5' cy='.5' r='.5'%3E%3Cstop offset='0' stop-color='%233a3a40' stop-opacity='.9'/%3E%3Cstop offset='1' stop-color='%233a3a40' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E %3Cg filter='url(%23bk)'%3E%3Ccircle cx='300' cy='770' r='110' fill='url(%23d)'/%3E%3Ccircle cx='1430' cy='170' r='90' fill='url(%23d)'/%3E%3Ccircle cx='860' cy='60' r='70' fill='url(%23d)' opacity='.6'/%3E%3C/g%3E %3C/svg%3E"),
radial-gradient(9% 60% at 50% -4%, var(--mono-c10), transparent 78%),
radial-gradient(55% 55% at 50% 25%, var(--mono-c11), transparent 72%),
var(--mono-c12);
/* 8a05c1c7 — soft-lit architectural blocks, one bright edge, a lit wall at left */
--mono-grain-blocks:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E %3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .065 0'/%3E%3C/filter%3E %3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
--mono-bg-blocks:radial-gradient(120% 100% at 60% 30%, transparent 55%, var(--mono-c13) 100%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'%3E %3Cdefs%3E %3ClinearGradient id='top' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%233a3a3e'/%3E%3Cstop offset='1' stop-color='%231a1a1c'/%3E%3C/linearGradient%3E %3ClinearGradient id='lf' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23151517'/%3E%3Cstop offset='1' stop-color='%23232326'/%3E%3C/linearGradient%3E %3ClinearGradient id='rf' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%232c2c30'/%3E%3Cstop offset='1' stop-color='%23111113'/%3E%3C/linearGradient%3E %3ClinearGradient id='edge' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%239a9aa2' stop-opacity='.0'/%3E%3Cstop offset='.25' stop-color='%239a9aa2' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%239a9aa2' stop-opacity='0'/%3E%3C/linearGradient%3E %3CradialGradient id='lit' cx='0' cy='.62' r='.6'%3E%3Cstop offset='0' stop-color='%238a8a90' stop-opacity='.42'/%3E%3Cstop offset='1' stop-color='%238a8a90' stop-opacity='0'/%3E%3C/radialGradient%3E %3Cfilter id='s' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E %3Cfilter id='s2'%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3C/filter%3E %3C/defs%3E %3Cg filter='url(%23s)' opacity='.95'%3E %3Cpolygon points='300,0 800,0 800,160 300,190' fill='url(%23lf)'/%3E %3Cpolygon points='800,0 1290,0 1290,190 800,160' fill='url(%23rf)'/%3E %3Cpolygon points='300,190 800,160 960,330 470,370' fill='url(%23top)' opacity='.75'/%3E %3Cpolygon points='470,370 960,330 960,1000 470,1000' fill='url(%23lf)'/%3E %3Cpolygon points='960,330 1300,250 1300,1000 960,1000' fill='url(%23rf)'/%3E %3Cpolygon points='1300,0 1600,0 1600,1000 1300,1000' fill='%230d0d0f'/%3E %3C/g%3E %3Crect x='957' y='170' width='4' height='830' fill='url(%23edge)' filter='url(%23s2)'/%3E %3Crect x='0' y='180' width='860' height='820' fill='url(%23lit)'/%3E %3C/svg%3E"),
var(--mono-c14);
/* 91e37ba1 — the violet vortex: indigo twist, fanned streaks, lavender bloom */
--mono-grain-vortex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E %3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E %3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
--mono-bg-vortex:radial-gradient(90% 80% at 100% 60%, var(--mono-c15), transparent 60%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'%3E %3Cdefs%3E %3ClinearGradient id='st' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23a9a2ff' stop-opacity='0'/%3E%3Cstop offset='.45' stop-color='%23a9a2ff' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23a9a2ff' stop-opacity='0'/%3E%3C/linearGradient%3E %3Cfilter id='bl' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='7'/%3E%3C/filter%3E %3Cfilter id='bl2' x='-40%25' y='-60%25' width='180%25' height='220%25'%3E%3CfeGaussianBlur stdDeviation='48'/%3E%3C/filter%3E %3C/defs%3E %3Cpath d='M 380 120 C 640 300, 760 420, 820 470 S 1100 640, 1300 700' stroke='%235b4bff' stroke-opacity='.5' stroke-width='170' fill='none' filter='url(%23bl2)'/%3E %3Cg filter='url(%23bl)' fill='none' stroke='url(%23st)'%3E %3Cpath d='M 800 470 C 950 520, 1150 560, 1480 560' stroke-width='14'/%3E %3Cpath d='M 800 480 C 950 560, 1130 630, 1450 650' stroke-width='16'/%3E %3Cpath d='M 790 490 C 930 600, 1100 700, 1400 750' stroke-width='18'/%3E %3Cpath d='M 780 500 C 900 640, 1050 780, 1330 860' stroke-width='20'/%3E %3Cpath d='M 770 510 C 860 680, 980 860, 1220 980' stroke-width='22'/%3E %3C/g%3E %3C/svg%3E"),
radial-gradient(50% 65% at 6% 32%, var(--mono-c16), transparent 70%),
radial-gradient(60% 80% at 22% 70%, var(--mono-c17), transparent 72%),
linear-gradient(115deg, var(--mono-c18) 0%, var(--mono-c19) 48%, var(--mono-c4) 75%);
/* ed64f14c — isometric cubes stacked in shadow, fading into black */
--mono-grain-cubes:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E %3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E %3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
--mono-bg-cubes:radial-gradient(100% 90% at 35% 20%, transparent 40%, var(--mono-c15) 95%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'%3E %3Cdefs%3E %3Cpattern id='iso' width='107.4' height='186.0' patternUnits='userSpaceOnUse' patternTransform='translate(120,-40) scale(1.25)'%3E%3Cpolygon points='0.0,-93.0 53.7,-62.0 0.0,-31.0 -53.7,-62.0' fill='%232a2a2e'/%3E%3Cpolygon points='-53.7,-62.0 0.0,-31.0 0.0,31.0 -53.7,0.0' fill='%23121214'/%3E%3Cpolygon points='0.0,-31.0 53.7,-62.0 53.7,0.0 0.0,31.0' fill='%231c1c1f'/%3E%3Cpolygon points='107.4,-93.0 161.1,-62.0 107.4,-31.0 53.7,-62.0' fill='%232a2a2e'/%3E%3Cpolygon points='53.7,-62.0 107.4,-31.0 107.4,31.0 53.7,0.0' fill='%23121214'/%3E%3Cpolygon points='107.4,-31.0 161.1,-62.0 161.1,0.0 107.4,31.0' fill='%231c1c1f'/%3E%3Cpolygon points='53.7,0.0 107.4,31.0 53.7,62.0 0.0,31.0' fill='%232a2a2e'/%3E%3Cpolygon points='0.0,31.0 53.7,62.0 53.7,124.0 0.0,93.0' fill='%23121214'/%3E%3Cpolygon points='53.7,62.0 107.4,31.0 107.4,93.0 53.7,124.0' fill='%231c1c1f'/%3E%3Cpolygon points='0.0,93.0 53.7,124.0 0.0,155.0 -53.7,124.0' fill='%232a2a2e'/%3E%3Cpolygon points='-53.7,124.0 0.0,155.0 0.0,217.0 -53.7,186.0' fill='%23121214'/%3E%3Cpolygon points='0.0,155.0 53.7,124.0 53.7,186.0 0.0,217.0' fill='%231c1c1f'/%3E%3Cpolygon points='107.4,93.0 161.1,124.0 107.4,155.0 53.7,124.0' fill='%232a2a2e'/%3E%3Cpolygon points='53.7,124.0 107.4,155.0 107.4,217.0 53.7,186.0' fill='%23121214'/%3E%3Cpolygon points='107.4,155.0 161.1,124.0 161.1,186.0 107.4,217.0' fill='%231c1c1f'/%3E%3Cpolygon points='53.7,186.0 107.4,217.0 53.7,248.0 0.0,217.0' fill='%232a2a2e'/%3E%3Cpolygon points='0.0,217.0 53.7,248.0 53.7,310.0 0.0,279.0' fill='%23121214'/%3E%3Cpolygon points='53.7,248.0 107.4,217.0 107.4,279.0 53.7,310.0' fill='%231c1c1f'/%3E%3C/pattern%3E %3CradialGradient id='m' cx='.34' cy='.12' r='.62'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.95'/%3E%3Cstop offset='.55' stop-color='%23fff' stop-opacity='.35'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E %3Cmask id='fade'%3E%3Crect width='1600' height='1000' fill='url(%23m)'/%3E%3C/mask%3E %3Cfilter id='soft'%3E%3CfeGaussianBlur stdDeviation='1.4'/%3E%3C/filter%3E %3C/defs%3E %3Crect width='1600' height='1000' fill='url(%23iso)' mask='url(%23fade)' filter='url(%23soft)'/%3E %3C/svg%3E"),
radial-gradient(45% 45% at 30% 10%, var(--mono-c20), transparent 70%),
var(--mono-c4);
--mono-bg:var(--mono-bg-beam);
--mono-grain:var(--mono-grain-beam);
}
html[data-look="monolith"][data-monolith-bg="beam"]{ --mono-bg:var(--mono-bg-beam); --mono-grain:var(--mono-grain-beam); }
html[data-look="monolith"][data-monolith-bg="rings"]{ --mono-bg:var(--mono-bg-rings); --mono-grain:var(--mono-grain-rings); }
html[data-look="monolith"][data-monolith-bg="studio"]{ --mono-bg:var(--mono-bg-studio); --mono-grain:var(--mono-grain-studio); }
html[data-look="monolith"][data-monolith-bg="blocks"]{ --mono-bg:var(--mono-bg-blocks); --mono-grain:var(--mono-grain-blocks); }
html[data-look="monolith"][data-monolith-bg="vortex"]{ --mono-bg:var(--mono-bg-vortex); --mono-grain:var(--mono-grain-vortex); }
html[data-look="monolith"][data-monolith-bg="cubes"]{ --mono-bg:var(--mono-bg-cubes); --mono-grain:var(--mono-grain-cubes); }
/* THE BACKDROP — one fixed layer behind everything the page draws */
html[data-look="monolith"]::before{
content:"";
position:fixed;inset:0;z-index:-2;pointer-events:none;
background:var(--mono-bg);
background-size:cover;
background-position:center;
}
/* THE GRAIN — its own fixed layer so the tile repeats at its true size */
html[data-look="monolith"]::after{
content:"";
position:fixed;inset:0;z-index:-2;pointer-events:none;
background:var(--mono-grain);
background-repeat:repeat;
}
html[data-look="monolith"] body.sh{ background:transparent; }
/* YIELD TO LIGHT — opt-in, public site only. Every backdrop is a dark room;
the public pages keep their light/dark toggle, and their light theme sets
dark ink that a dark room would swallow. A page that carries
data-monolith-yield="light" drops the backdrop whenever it is in light
(picked, or following a light system) and shows its own paper ground.
The OS never carries the attribute, so nothing there changes. */
html[data-look="monolith"][data-monolith-yield="light"][data-theme="light"]::before,
html[data-look="monolith"][data-monolith-yield="light"][data-theme="light"]::after{ content:none; }
@media (prefers-color-scheme: light){
html[data-look="monolith"][data-monolith-yield="light"]:not([data-theme="dark"])::before,
html[data-look="monolith"][data-monolith-yield="light"]:not([data-theme="dark"])::after{ content:none; }
}
/* THE STARFIELD STEPS ASIDE. visibility, not display: ambient-field.js pins
display:block inline on its canvas, and inline outranks this sheet. Its
render loop is paused too (ambient-field.js watches data-look). */
html[data-look="monolith"] .ambient-field{ visibility:hidden; }
/* the backdrop swatches in the Users-window selector draw the real thing */
html[data-look="monolith"] .bf-look__swatch[data-bg="beam"]{ background:var(--mono-bg-beam); background-size:cover; background-position:center; }
html[data-look="monolith"] .bf-look__swatch[data-bg="rings"]{ background:var(--mono-bg-rings); background-size:cover; background-position:center; }
html[data-look="monolith"] .bf-look__swatch[data-bg="studio"]{ background:var(--mono-bg-studio); background-size:cover; background-position:center; }
html[data-look="monolith"] .bf-look__swatch[data-bg="blocks"]{ background:var(--mono-bg-blocks); background-size:cover; background-position:center; }
html[data-look="monolith"] .bf-look__swatch[data-bg="vortex"]{ background:var(--mono-bg-vortex); background-size:cover; background-position:center; }
html[data-look="monolith"] .bf-look__swatch[data-bg="cubes"]{ background:var(--mono-bg-cubes); background-size:cover; background-position:center; }
}