/* ---------------------------------------------------------------------------
Polices auto-hebergees.
Elles arrivaient de fonts.googleapis.com par trois dans le de
chaque page. Sur un site dont le pied de page annonce « HEBERGE EN UE ·
RGPD PAR CONCEPTION », cela transmettait l'IP de chaque visiteur a un tiers
etats-unien des le chargement, avant tout consentement possible. Les trois
fichiers ci-dessous couvrent exactement l'usage du site : 55 532 o, a
comparer aux ~6,8 Mo d'images deja embarquees.
Space Grotesk est une fonte VARIABLE (axe wght 300..700, verifie par
fontTools) : un seul fichier sert 400, 500 et 700 sans faux-gras synthetique.
Space Mono est statique, d'ou deux fichiers pour ses deux graisses.
Sous-ensemble latin uniquement : le site est FR/EN/ES.
--------------------------------------------------------------------------- */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;
font-display:swap;src:url('fonts/space-grotesk-latin-var.woff2') format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;
font-display:swap;src:url('fonts/space-mono-latin-400.woff2') format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;
font-display:swap;src:url('fonts/space-mono-latin-700.woff2') format('woff2')}
/* iamin.digital — the shared stylesheet.
Extracted from the landing page so every page is the same system. At build
time this is the single stylesheet the theme enqueues. */
/* ===========================================================================
iamin.digital — LANDING PAGE (design proposal)
Cristina → Marc Masure · August 2026
The header is the brand's object: the node system, in 3-D, answering the
pointer. Same discipline as the LUMME header — hand-written vanilla, one rAF
loop, the pointer lerped so the camera arrives with weight, and the geometry
NEVER deformed. The hand lights the structure; it does not bend it.
Palette is switchable (A B C D, bottom left) so the whole page can be judged
in each route before one is locked.
=========================================================================== */
html[data-route="a"]{ --ground:#05090F; --ground2:#080F1A; --ink:#ECE7DD; --mut:#77869B;
--accent:#22D3EE; --data:#D9C9A8; --line:rgba(236,231,221,.13); --artA:.34 }
html[data-route="b"]{ --ground:#08090B; --ground2:#0E1013; --ink:#E8ECEF; --mut:#6E767F;
--accent:#22D3EE; --data:#E8ECEF; --line:rgba(232,236,239,.15); --artA:.32 }
html[data-route="c"]{ --ground:#07080B; --ground2:#0D0F14; --ink:#F1F5F9; --mut:#6B7480;
--accent:#22D3EE; --data:#E9A93C; --line:rgba(241,245,249,.12); --artA:.30 }
html[data-route="d"]{ --ground:#F1EFEA; --ground2:#E7E4DD; --ink:#0B1220; --mut:#6A7382;
--accent:#0891B2; --data:#0B1220; --line:rgba(11,18,32,.16); --artA:.26 }
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ground)}
body{background:var(--ground);color:var(--ink);overflow-x:hidden;
font-family:"Space Grotesk",system-ui,sans-serif;line-height:1.55;
transition:background .6s ease,color .6s ease}
.mono{font-family:"Space Mono",ui-monospace,monospace}
a{color:inherit;text-decoration:none}
section{position:relative;overflow:hidden}
.in{position:relative;z-index:4;width:min(1280px,88vw);margin:0 auto}
.wide{width:min(1620px,94vw)}
.pad{padding:clamp(80px,12vh,160px) 0}
h1{font-size:clamp(46px,8.2vw,124px);font-weight:700;line-height:.92;letter-spacing:-.04em}
h2{font-size:clamp(30px,4.4vw,62px);font-weight:700;line-height:1.02;letter-spacing:-.032em}
h3{font-size:clamp(18px,1.6vw,23px);font-weight:700;letter-spacing:-.015em;margin-bottom:8px}
/* Rang != apparence. Un titre promu (h3->h2, h4->h3) pour supprimer un saut
de hierarchie doit rester VISUELLEMENT identique : ces deux utilitaires
reproduisent exactement l'ancien rendu. h2 impose line-height:1.02, h3
impose sa taille -- il faut donc les redire, pas seulement les omettre. */
.h-sm{font-size:clamp(18px,1.6vw,23px);font-weight:700;letter-spacing:-.015em;
line-height:1.55;margin-bottom:8px}
.kicker{font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.34em;
color:var(--accent);display:block;margin-bottom:20px}
.lede{font-size:clamp(15.5px,1.3vw,19px);line-height:1.5;opacity:.74;max-width:58ch}
p{margin:12px 0;opacity:.8;max-width:64ch;font-size:15px}
.sm{font-size:13px}.mut{color:var(--mut);opacity:1}.acc,.route.primary .rk,.calfall a,.chan a.big:hover{color:var(--accent)}.dat{color:var(--data)}
.hr{height:1px;background:var(--line);margin:0}
/* ---------- header ---------- */
#hero{height:100vh;min-height:640px;display:flex;align-items:center}
#field{position:absolute;inset:0;width:100%;height:100%;z-index:1}
#hero .vig{position:absolute;inset:0;z-index:2;pointer-events:none;background:
radial-gradient(120% 100% at 8% 62%, var(--ground) 26%, transparent 74%),
linear-gradient(180deg,var(--ground) 0%,transparent 18%,transparent 74%,var(--ground) 100%)}
.nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;
justify-content:space-between;padding:22px clamp(20px,3.5vw,54px);
backdrop-filter:blur(6px);background:color-mix(in srgb,var(--ground) 55%,transparent);
border-bottom:1px solid transparent;transition:border-color .4s,background .4s}
.nav.stuck{border-bottom-color:var(--line)}
.lock{font-family:"Space Mono",monospace;font-size:14px;letter-spacing:.01em;white-space:nowrap}
.lock .b{font-weight:700}.lock .c{color:var(--accent)}
.nav ul{display:flex;gap:clamp(14px,2vw,32px);list-style:none;
font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.2em;color:var(--mut)}
.nav ul a:hover{color:var(--accent)}
.nav .eu{font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:.2em;
color:var(--mut);border:1px solid var(--line);padding:6px 12px;border-radius:999px}
/* Selecteur de langue (T11). Frere du
et NON masque sous 900px : la
liste de navigation, elle, disparait (regle ci-dessous) et aucun burger
n'existe -- le seul chemin vers les autres langues doit survivre au mobile. */
.nav .lang{display:flex;gap:8px;align-items:center;font-family:"Space Mono",monospace;
font-size:9.5px;letter-spacing:.2em;color:var(--mut);margin-left:auto;
padding-right:clamp(8px,1.2vw,16px)}
.nav .lang a{color:var(--mut);text-decoration:none}
.nav .lang a:hover{color:var(--accent)}
.nav .lang .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.nav .lang .on{color:var(--fg,inherit);font-weight:700}
@media(max-width:900px){.nav ul{display:none}}
/* Sous 620px l'anneau "EU HOSTED" cede la place avant le selecteur : perdre un
libelle decoratif coute moins que perdre l'acces aux deux autres langues. */
@media(max-width:620px){.nav .eu{display:none}}
.hero-h em{font-style:normal;color:var(--accent)}
.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}
/* buttons are glass with a circuit terminal on them — a pad and a trace, the
same vocabulary as the artwork. A flat fill of the accent was the one place
the page went opaque and plastic, so nothing here is solid any more. */
.btn{position:relative;font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.2em;
padding:15px 26px 15px 40px;border-radius:5px;color:var(--accent);
border:1px solid color-mix(in srgb,var(--accent) 52%,transparent);
background:color-mix(in srgb,var(--accent) 7%,transparent);
backdrop-filter:blur(7px);overflow:hidden;
transition:background .35s,border-color .35s,box-shadow .35s}
.btn:before{content:"";position:absolute;left:20px;top:50%;width:12px;height:1px;
background:currentColor;opacity:.55}
.btn:after{content:"";position:absolute;left:14px;top:calc(50% - 3px);width:6px;height:6px;
border:1px solid currentColor;opacity:.8}
.btn:hover{background:color-mix(in srgb,var(--accent) 15%,transparent);
border-color:var(--accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent)}
.btn.solid{color:var(--ink);border-color:color-mix(in srgb,var(--accent) 80%,transparent);
background:color-mix(in srgb,var(--accent) 15%,transparent);
box-shadow:inset 0 0 30px color-mix(in srgb,var(--accent) 20%,transparent)}
.btn.solid:hover{background:color-mix(in srgb,var(--accent) 24%,transparent)}
/* bottom RIGHT: bottom left is where the palette switcher lives */
.scroll{position:absolute;right:clamp(20px,3.5vw,54px);bottom:34px;z-index:5;
font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:.3em;color:var(--mut)}
/* ---------- proof strip ---------- */
.proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proof div{padding:30px clamp(18px,2.4vw,34px);border-left:1px solid var(--line)}
.proof div:first-child{border-left:0}
.proof b{display:block;font-family:"Space Mono",monospace;font-size:clamp(26px,3vw,40px);
color:var(--data);font-weight:400;letter-spacing:-.02em}
.proof span{display:block;font-size:12.5px;color:var(--mut);margin-top:6px}
.proof i{display:block;font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:.16em;
color:var(--mut);opacity:.7;font-style:normal;margin-top:10px}
/* every overlay veil must let the pointer through, or it eats the clicks meant
for the canvas underneath it — which is exactly what killed the JARVIS click */
.vig{pointer-events:none}
/* the content column is a full-width box with no background: invisible, but it
still swallows every pointer event meant for the canvas behind it. So in the
sections where the artwork IS interactive, the column lets the pointer
through and only the things you can actually press take it back. */
#jarvis .in{pointer-events:none}
#jarvis .in a,#jarvis .in .btn,#jarvis .in button{pointer-events:auto}
/* the traces sit ABOVE the artwork but below the reading column, and never
take the pointer */
#idea{min-height:74vh;display:flex;align-items:center}
#idea-traces,#c-traces,#p-spine,#k-traces,#s-spine,#f-spine{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
/* ---------- art plates ---------- */
/* the page's wiring: fixed, behind the content, never in the reading column */
#wire,#jline{position:fixed;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.art{position:absolute;pointer-events:none;z-index:1;background-repeat:no-repeat;
background-size:contain;opacity:var(--artA);will-change:transform}
/* ---------- generic blocks ---------- */
.cols{display:grid;gap:clamp(24px,3.4vw,58px)}
.c2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.c3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.panel{border:1px solid var(--line);padding:clamp(22px,2.6vw,38px);
background:color-mix(in srgb,var(--ink) 2.5%,transparent);backdrop-filter:blur(3px)}
.panel.lit{background:color-mix(in srgb,var(--accent) 5%,transparent)}
/* ---------- suites ---------- */
.suite{display:grid;grid-template-columns:minmax(190px,1fr) minmax(170px,.9fr) minmax(240px,1.5fr);
gap:22px;padding:26px 0;border-top:1px solid var(--line);align-items:start;
transition:background .35s;cursor:default}
.suite:hover{background:color-mix(in srgb,var(--accent) 4%,transparent)}
.suite:last-of-type{border-bottom:1px solid var(--line)}
.suite .s1{font-size:clamp(19px,1.9vw,26px);font-weight:700;letter-spacing:-.03em;line-height:1.12;color:var(--accent);text-wrap:balance;padding-right:18px}
.suite .s2{color:var(--mut);font-size:13.5px;padding-top:8px}
.suite .s3{font-family:"Space Mono",monospace;font-size:12.5px;line-height:2;opacity:.86}
@media(max-width:760px){.col1-760{grid-template-columns:1fr}}
@media(max-width:900px){.col1-900{grid-template-columns:1fr}}
@media(max-width:520px){.col1-520{grid-template-columns:1fr}}
/* ---------- framed figure ---------- */
.frame{position:relative;border:1px solid var(--line);
background:color-mix(in srgb,var(--ink) 2.5%,transparent);backdrop-filter:blur(2px)}
.tick{position:absolute;width:13px;height:13px;border:1px solid var(--accent);opacity:.8}
.tl,.route .tick.tl{left:-1px;top:-1px;border-right:0;border-bottom:0}
.tr{right:-1px;top:-1px;border-left:0;border-bottom:0}
.bl{left:-1px;bottom:-1px;border-right:0;border-top:0}
.br,.route .tick.br{right:-1px;bottom:-1px;border-left:0;border-top:0}
.bar{display:flex;justify-content:space-between;gap:20px;padding:12px 16px;
font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.24em;color:var(--mut)}
.bar.top{border-bottom:1px solid var(--line)}
.bar.btm{border-top:1px solid var(--line)}
.bar b,.calbar b{color:var(--accent);font-weight:400}
.forms{display:flex;align-items:center;gap:8px;margin-top:26px;flex-wrap:wrap}
.forms button{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.22em;
background:transparent;color:var(--mut);cursor:pointer;padding:8px 14px;border-radius:4px;
border:1px solid var(--line);transition:color .3s,border-color .3s,background .3s}
.forms button:hover{color:var(--ink)}
.forms button.on{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 60%,transparent);
background:color-mix(in srgb,var(--accent) 8%,transparent)}
.forms span{font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:.22em;
color:var(--mut);margin-left:10px}
.mapbox{position:relative;height:min(66vh,600px)}
.plate{overflow:hidden}
.platebox{position:relative;height:min(52vh,440px)}
.prac,.steps{position:relative}
.platebox canvas,.pbox canvas{position:absolute;inset:0;width:100%;height:100%}
.mapbox canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab}
.mapbox canvas:active{cursor:grabbing}
/* ---------- pricing ---------- */
.toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:4px;gap:2px;
font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.16em}
.toggle button{background:transparent;border:0;color:var(--mut);padding:9px 18px;
border-radius:999px;cursor:pointer;font:inherit}
.toggle button.on{background:var(--accent);color:var(--ground);font-weight:700}
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:0;
border:1px solid var(--line);margin-top:30px}
.tier{padding:clamp(22px,2.6vw,36px);border-left:1px solid var(--line)}
.tier:first-child{border-left:0}
.tier.best{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.tier h2{margin-bottom:4px}
.tier .p{font-family:"Space Mono",monospace;font-size:clamp(24px,2.6vw,34px);
color:var(--data);margin:14px 0 4px}
.tier .p small{font-size:12px;color:var(--mut);letter-spacing:.1em}
.tier ul{list-style:none;margin-top:18px}
.tier li{font-size:13px;opacity:.82;padding-left:18px;position:relative;margin:9px 0}
.tier li:before{content:"";position:absolute;left:0;top:.6em;width:7px;height:1px;background:var(--accent)}
/* ---------- FOOTER ----------------------------------------------------------
The footer is where a site either finishes or trails off. This one is built
as a closing spread: the signature at size, four columns of routes, a wired
rule with pads where the columns land on it, then the socials and the
registration line. Traces run over it like every other section.
-------------------------------------------------------------------------- */
footer{position:relative;border-top:1px solid var(--line);overflow:hidden;
padding:clamp(64px,9vh,120px) 0 clamp(86px,10vh,124px)} /* room under the base row */
#foot-traces{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
footer .in{z-index:4}
footer .fsig{max-width:56ch}
.fclaim{font-size:clamp(30px,4.6vw,62px);font-weight:700;line-height:1.0;
letter-spacing:-.035em;margin:22px 0 0}
.fmail{margin-top:34px;max-width:440px}
.fmail label{display:block;font-size:9.5px;letter-spacing:.24em;color:var(--mut);margin-bottom:12px}
.frow{display:flex;gap:10px;flex-wrap:wrap}
.frow input{flex:1 1 200px;background:color-mix(in srgb,var(--ink) 4%,transparent);
border:1px solid var(--line);border-radius:5px;padding:15px 16px;color:var(--ink);
font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.06em;
backdrop-filter:blur(6px);transition:border-color .3s}
.frow input:focus{outline:none;border-color:color-mix(in srgb,var(--accent) 60%,transparent)}
.frow input::placeholder{color:var(--mut)}
.frow .btn{cursor:pointer}
.fnav{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:clamp(24px,3vw,44px);margin-top:clamp(48px,7vh,84px)}
.fnav h3{font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:.26em;
color:var(--mut);font-weight:400;margin-bottom:18px;text-transform:uppercase}
.fnav a{display:block;font-size:13.5px;padding:7px 0;opacity:.82;
transition:opacity .25s,color .25s,transform .25s}
.fnav a:hover{opacity:1;color:var(--accent);transform:translateX(3px)}
.frule{position:relative;height:1px;background:var(--line);
margin:clamp(40px,6vh,72px) 0 clamp(24px,3vh,34px)}
.frule i{position:absolute;top:-2.5px;width:5px;height:5px;border:1px solid var(--accent);
opacity:.55}
.frule i:nth-child(1){left:0}
.frule i:nth-child(2){left:33.33%}
.frule i:nth-child(3){left:66.66%}
.frule i:nth-child(4){right:0}
.fbase{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.fsoc{display:flex;gap:6px;flex-wrap:wrap}
.fsoc a{width:40px;height:40px;display:grid;place-items:center;border-radius:5px;
border:1px solid transparent;color:var(--mut);
transition:color .3s,border-color .3s,background .3s}
.fsoc a:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent);
background:color-mix(in srgb,var(--accent) 7%,transparent)}
.fsoc svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;
stroke-linecap:round;stroke-linejoin:round}
.fmeta{display:flex;gap:clamp(16px,2.4vw,34px);flex-wrap:wrap;justify-content:flex-end;
font-size:9.5px;letter-spacing:.2em;color:var(--mut);text-align:right}
@media(max-width:760px){.fbase,.fmeta{justify-content:flex-start;text-align:left}}
.sticky{position:fixed;left:18px;bottom:18px;z-index:60;display:flex;gap:4px;
border:1px solid var(--line);border-radius:999px;padding:5px;
background:color-mix(in srgb,var(--ground) 82%,transparent);backdrop-filter:blur(6px)}
.sticky button{font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.14em;
background:transparent;border:0;color:var(--mut);padding:7px 13px;border-radius:999px;cursor:pointer}
.sticky button.on{background:var(--accent);color:var(--ground);font-weight:700}
/* reveal on scroll — transform+opacity only, so it stays cheap */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.22,.61,.36,1),
transform .8s cubic-bezier(.22,.61,.36,1)}
.rv.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
/* ---------- shell des pages internes (extrait des 5 pages, R1b) ---------- */
/* ---- the inner-page shell: a shorter hero, then the substance ---- */
.phero{position:relative;padding:clamp(120px,20vh,210px) 0 clamp(50px,7vh,90px);overflow:hidden}
.phero h1{font-size:clamp(38px,6.2vw,88px);line-height:.95}
.crumb{font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:.3em;color:var(--mut);
margin-bottom:22px;display:block}
.crumb a:hover{color:var(--accent)}
.rowline{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(240px,2.4fr);gap:clamp(18px,3vw,50px);
padding:26px 0;border-top:1px solid var(--line);align-items:start}
.rowline:last-of-type{border-bottom:1px solid var(--line)}
.rowline .k{font-family:"Space Mono",monospace;font-size:11.5px;letter-spacing:.12em;color:var(--accent)}
.rowline .v{font-size:14px;opacity:.85}
.rowline .v small{display:block;margin-top:7px;font-family:"Space Mono",monospace;font-size:10px;
letter-spacing:.16em;color:var(--mut)}
@media(max-width:720px){.col1-720{grid-template-columns:1fr}}
.tagrow{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.tag{font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:.16em;color:var(--mut);
border:1px solid var(--line);border-radius:999px;padding:5px 11px}
.tag.live{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.big{font-family:"Space Mono",monospace;font-size:clamp(30px,4vw,56px);color:var(--data);
letter-spacing:-.02em;display:block}
/* ============================================================================
UTILITAIRES DE POSITION -- issus des attributs style= inline
----------------------------------------------------------------------------
Un attribut style= gagne contre TOUT selecteur, quelle que soit sa
specificite. Deplacer ces declarations dans une classe ordinaire les
ferait perdre contre les regles existantes (.grid .lbl, .sec p, ...) et
changerait le rendu. `!important` est ici le SEUL moyen de reproduire la
position de cascade que l'attribut occupait -- ce n'est pas un raccourci,
c'est l'equivalent exact.
Nom = `u-` + 6 hex du sha256 de la declaration : deux elements qui
partageaient la meme valeur inline partagent la meme classe, et aucun nom
ne peut entrer en collision avec le CSS ecrit a la main au-dessus.
========================================================================== */
.u-876de5 { border-top:1px solid var(--line) !important; } /* x16 */
.u-a3970b { font-size:15px !important; } /* x8 */
.u-6e1958 { margin-top:22px !important; } /* x8 */
.u-9977b7 { max-width:16ch !important; } /* x7 */
.u-0b30ec { display:block !important; margin-top:6px !important; color:var(--mut) !important; font-family:'Space Grotesk',sans-serif !important; letter-spacing:0 !important; font-size:12.5px !important; } /* x6 */
.u-7e1dee { margin-top:12px !important; color:var(--data) !important; opacity:.95 !important; } /* x6 */
.u-59989c { margin-top:26px !important; } /* x6 */
.u-030592 { margin-top:clamp(56px,8vh,96px) !important; } /* x5 */
.u-f51801 { max-width:22ch !important; } /* x5 */
.u-42a6ce { margin-bottom:14px !important; } /* x4 */
.u-eee3f8 { margin-top:20px !important; } /* x4 */
.u-b8f317 { list-style:none !important; margin-top:16px !important; font-size:13.5px !important; line-height:2.1 !important; opacity:.86 !important; } /* x3 */
.u-66d8b5 { margin-top:24px !important; } /* x3 */
.u-1110f8 { margin-top:clamp(44px,6vh,72px) !important; } /* x3 */
.u-42c42f { max-width:14ch !important; } /* x3 */
.u-0c364f { max-width:18ch !important; } /* x3 */
.u-9aacc4 { position:absolute !important; inset:0 !important; z-index:2 !important; background: radial-gradient(92% 84% at 6% 46%, var(--ground) 32%, transparent 76%) !important; } /* x3 */
.u-4e537a { inset:-24% -24% auto auto !important; width:88vw !important; height:120vh !important; background-image:url('circuit.png') !important; background-image:image-set(url('circuit.webp') type('image/webp'), url('circuit.png') type('image/png')) !important; background-position:right center !important; } /* x2 */
.u-80ba40 { inset:-30% -26% auto auto !important; width:96vw !important; height:130vh !important; background-image:url('expansion.png') !important; background-image:image-set(url('expansion.webp') type('image/webp'), url('expansion.png') type('image/png')) !important; background-position:right center !important; } /* x2 */
.u-2bdf8e { margin-top:18px !important; } /* x2 */
.u-22ce63 { margin-top:34px !important; } /* x2 */
.u-3bca39 { margin-top:40px !important; } /* x2 */
.u-c056ce { margin-top:44px !important; } /* x2 */
.u-21d2ff { margin:clamp(56px,8vh,96px) 0 !important; } /* x2 */
.u-56e577 { max-width:15ch !important; } /* x2 */
.u-861077 { max-width:20ch !important; } /* x2 */
.u-40dcd9 { position:absolute !important; inset:0 !important; z-index:2 !important; background: radial-gradient(90% 82% at 6% 50%, var(--ground) 32%, transparent 76%) !important; } /* x2 */
.u-60ebae { align-self:flex-start !important; padding-top:12vh !important; } /* x1 */
.u-ba5885 { background-image:url('circuit.png') !important; background-image:image-set(url('circuit.webp') type('image/webp'), url('circuit.png') type('image/png')) !important; } /* x1 */
.u-5fd04f { background-image:url('expansion.png') !important; background-image:image-set(url('expansion.webp') type('image/webp'), url('expansion.png') type('image/png')) !important; } /* x1 */
.u-551ff9 { border-top:1px solid var(--line) !important; min-height:150vh !important; display:flex !important; align-items:center !important; } /* x1 */
.u-84750a { border-top:1px solid var(--line) !important; min-height:96vh !important; display:flex !important; align-items:center !important; } /* x1 */
.u-d61c69 { font-size:11px !important; letter-spacing:.14em !important; } /* x1 */
.u-aaddee { font-size:11px !important; letter-spacing:.16em !important; } /* x1 */
.u-253c9c { inset:-18% auto auto -24% !important; width:66vw !important; height:110vh !important; background-image:url('nodes_near.png') !important; background-image:image-set(url('nodes_near.webp') type('image/webp'), url('nodes_near.png') type('image/png')) !important; background-position:left center !important; } /* x1 */
.u-a8ab55 { inset:-20% -22% auto auto !important; width:74vw !important; height:116vh !important; background-image:url('nodes_near.png') !important; background-image:image-set(url('nodes_near.webp') type('image/webp'), url('nodes_near.png') type('image/png')) !important; background-position:right top !important; } /* x1 */
.u-50410e { inset:-30% -28% auto auto !important; width:88vw !important; height:126vh !important; background-image:url('nodes_far.png') !important; background-image:image-set(url('nodes_far.webp') type('image/webp'), url('nodes_far.png') type('image/png')) !important; background-position:right center !important; } /* x1 */
.u-8138dc { inset:-32% -26% auto auto !important; width:96vw !important; height:132vh !important; background-image:url('nodes_far.png') !important; background-image:image-set(url('nodes_far.webp') type('image/webp'), url('nodes_far.png') type('image/png')) !important; background-position:right center !important; } /* x1 */
.u-2c5651 { inset:-34% -30% auto auto !important; width:112vw !important; height:150vh !important; background-image:url('circuit.png') !important; background-image:image-set(url('circuit.webp') type('image/webp'), url('circuit.png') type('image/png')) !important; background-position:right center !important; } /* x1 */
.u-448aee { inset:auto -24% -30% auto !important; width:76vw !important; height:118vh !important; background-image:url('expansion.png') !important; background-image:image-set(url('expansion.webp') type('image/webp'), url('expansion.png') type('image/png')) !important; background-position:right bottom !important; } /* x1 */
.u-110c14 { justify-content:flex-end !important; } /* x1 */
.u-df4f2e { justify-self:start !important; } /* x1 */
.u-05314e { list-style:none !important; } /* x1 */
.u-d11164 { list-style:none !important; font-size:13.5px !important; line-height:1.75 !important; } /* x1 */
.u-a0925a { margin-top:0 !important; } /* x1 */
.u-92c18f { margin-top:16px !important; } /* x1 */
.u-ee29fa { margin-top:20px !important; align-items:start !important; } /* x1 */
.u-b061ea { margin-top:20px !important; max-width:38ch !important; } /* x1 */
.u-adbf51 { margin-top:22px !important; letter-spacing:.22em !important; } /* x1 */
.u-9f5ffc { margin-top:26px !important; max-width:60ch !important; } /* x1 */
.u-900886 { margin-top:30px !important; } /* x1 */
.u-9af886 { margin-top:46px !important; } /* x1 */
.u-5e5ae3 { margin-top:48px !important; align-items:stretch !important; } /* x1 */
.u-21e7ea { margin-top:52px !important; } /* x1 */
.u-784ec3 { margin-top:52px !important; max-width:1000px !important; } /* x1 */
.u-bf4d1a { margin-top:56px !important; } /* x1 */
.u-43a97f { margin-top:8px !important; } /* x1 */
.u-83352f { margin-top:clamp(48px,7vh,80px) !important; } /* x1 */
.u-9ad71d { margin:22px 0 0 auto !important; } /* x1 */
.u-3df40b { margin:56px 0 !important; } /* x1 */
.u-b156e3 { margin:clamp(48px,7vh,84px) 0 !important; } /* x1 */
.u-629cd8 { max-width:12ch !important; } /* x1 */
.u-cbc9c2 { max-width:17ch !important; } /* x1 */
.u-f3e0f5 { max-width:20ch !important; margin-left:auto !important; } /* x1 */
.u-2f5347 { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; z-index:1 !important; } /* x1 */
.u-803231 { position:absolute !important; inset:0 !important; z-index:2 !important; background: linear-gradient(90deg, var(--ground) 34%, color-mix(in srgb,var(--ground) 55%,transparent) 62%, transparent 100%) !important; } /* x1 */
.u-ec3371 { position:absolute !important; inset:0 !important; z-index:2 !important; background: linear-gradient(90deg, var(--ground) 34%, color-mix(in srgb,var(--ground) 58%,transparent) 62%, transparent 100%) !important; } /* x1 */
.u-02159b { position:absolute !important; inset:0 !important; z-index:2 !important; background: radial-gradient(100% 90% at 4% 50%, var(--ground) 26%, transparent 72%), linear-gradient(180deg,var(--ground),transparent 16%,transparent 84%,var(--ground)) !important; } /* x1 */
.u-c24de0 { position:absolute !important; inset:0 !important; z-index:2 !important; background: radial-gradient(88% 78% at 6% 50%, var(--ground) 32%, transparent 76%) !important; } /* x1 */
.u-bd3752 { position:absolute !important; inset:0 !important; z-index:2 !important; background: radial-gradient(90% 84% at 74% 50%, var(--ground) 30%, transparent 76%) !important; } /* x1 */
.u-bea475 { position:absolute !important; inset:0 !important; z-index:2 !important; background: radial-gradient(96% 86% at 8% 46%, var(--ground) 30%, transparent 74%) !important; } /* x1 */
.u-5f3265 { text-align:right !important; } /* x1 */