/* The Loxia Grid page in the home page's look: deep space behind the page, cool glass panels and hairlines, gold kept
   for what you act on and for the model itself. The illustrations are drawn in 3D by grid-art.js (html.gl-art); without
   it, or with the high-contrast reading setting, the page keeps its plain drawings. */
:root{--space:#03060a;--glass:rgba(8,18,26,.62);--glass-weak:rgba(8,18,26,.38);--hair:rgba(160,215,230,.14);--hair-strong:rgba(160,215,230,.24);--cool:#9fb1b6}
html{background:var(--space)}html body{background:transparent!important}
.space-sky{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(90% 60% at 62% 8%,#0b2431 0,#06121b 50%,#03060a 85%) center/cover no-repeat}
.space-sky::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,6,10,.05) 0,rgba(3,6,10,.4) 70%,rgba(3,6,10,.55))}
html.reading-contrast .space-sky,html.reading-contrast .art-canvas,html.reading-contrast .closing-art{display:none}

/* sections: no warm tints; hairlines in the sky's cool tone */
.use-cases,.mechanism,.deployment,.questions,.closing,.decision-path,.mechanism-points>div,details{border-color:var(--hair)}
.mechanism,.closing,.custom-use-case{background:none}
.proof-strip{background:linear-gradient(110deg,rgba(9,24,34,.78),rgba(5,10,16,.3));border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.pilot-path{background:linear-gradient(105deg,rgba(10,28,38,.72),rgba(8,18,26,0));border-bottom-color:var(--hair)}
.hardware-note{background:var(--glass);border-color:var(--hair);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.proof-config>span{background:var(--glass);border-color:rgba(245,183,49,.32);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.proof-config small{color:var(--cool)}
.proof-config i{color:#5d7a84}
.model-demo{background:linear-gradient(180deg,rgba(9,20,29,.72),rgba(4,9,14,.5));border-color:var(--hair-strong);box-shadow:0 30px 90px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04)}
.illustration-tag{background:rgba(255,255,255,.04);border-color:var(--hair)}
.machine{background:rgba(6,14,20,.5);border-color:var(--hair)}
.machine.active{background:rgba(10,24,32,.55);border-color:rgba(143,216,239,.3)}
.machine-memory{color:var(--cool)}
.whole-model p{color:var(--cool)}
.skip{background:#0d2430}

/* the 3D illustrations: a canvas under each illustration's own words and switches */
.art-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
html.gl-art:not(.reading-contrast) .model-demo,html.gl-art:not(.reading-contrast) .proof-config{position:relative}
html.gl-art:not(.reading-contrast) .model-demo{overflow:hidden}
html.gl-art:not(.reading-contrast) .model-demo>:not(.art-canvas),html.gl-art:not(.reading-contrast) .proof-config>:not(.art-canvas){position:relative;z-index:1}
/* the model's parts are drawn as gold blocks: the page keeps only their letters */
html.gl-art:not(.reading-contrast) .model-segments{background:none;border-color:transparent}
html.gl-art:not(.reading-contrast) .model-segments span{background:none;color:#2a1a02;font-weight:700}
html.gl-art:not(.reading-contrast) .model-segments span.missing{opacity:1;color:#9aa6ad}
/* the machines are drawn in the space the page leaves above each one's name */
html.gl-art:not(.reading-contrast) .machine,html.gl-art:not(.reading-contrast) .machine.active{background:linear-gradient(180deg,rgba(6,14,20,0) 0,rgba(6,14,20,0) 42%,rgba(6,14,20,.55) 68%)}
html.gl-art:not(.reading-contrast) .machine-visual{visibility:hidden;height:104px;transform:none}
html.gl-art:not(.reading-contrast) .execution-path{visibility:hidden}
@media(max-width:420px){html.gl-art:not(.reading-contrast) .machine-visual{height:84px}}
/* three computers: each drawn above its memory */
html.gl-art:not(.reading-contrast) .proof-config>span{padding-top:84px;background:linear-gradient(180deg,rgba(8,18,26,0) 0,rgba(8,18,26,0) 50%,rgba(8,18,26,.7) 75%);-webkit-backdrop-filter:none;backdrop-filter:none}
@media(max-width:420px){html.gl-art:not(.reading-contrast) .proof-config>span{padding-top:66px}}
/* the closing: a ring of machines of every kind, wired to one light */
.closing-art{position:relative;height:clamp(200px,24vw,330px);margin:28px calc(50% - 50vw) -40px;pointer-events:none}
@media(max-width:600px){.closing-art{height:220px}}
html.gl-art:not(.reading-contrast) .model-demo :is(.whole-model p,.split-caption,.model-label){text-shadow:0 0 6px #03080c,0 0 14px #03080c}