:root{color-scheme:dark;--bg:#10151f;--ink:#f2f5fa;--muted:#b3c0d1;--cyan:#7de4f4;--line:#303c4d;--pad:clamp(1.25rem,5vw,4.5rem);font-family:Inter,system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink)}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--cyan);outline-offset:5px}
.wrap{width:min(100% - 2 * var(--pad),76rem);margin-inline:auto}
.skip{position:absolute;top:1rem;left:1rem;background:var(--cyan);color:#10151f;padding:.7rem;transform:translateY(-180%);z-index:3}
.skip:focus{transform:none}
.masthead{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:5rem;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.65rem;font-weight:800;letter-spacing:.14em}
nav{display:flex;gap:clamp(.85rem,3vw,2.3rem);font-size:.9rem}
nav a{padding:.6rem 0;color:var(--muted)}
nav a:hover{color:var(--cyan)}
.hero{display:grid;grid-template-columns:1.12fr .88fr;align-items:center;gap:2rem;min-height:35rem;padding-block:3rem}
.eyebrow{font:700 .72rem/1.4 ui-monospace,monospace;letter-spacing:.15em;color:var(--cyan);margin:0 0 1rem}
.eyebrow span{display:inline-block;width:.52rem;height:.52rem;border-radius:50%;background:var(--cyan);margin-right:.4rem}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(2.65rem,5.2vw,5rem);line-height:1.02;letter-spacing:-.06em;margin-bottom:1.4rem}
h1 span{color:var(--cyan)}
h2{font-size:clamp(2rem,3.8vw,3.35rem);line-height:1.07;letter-spacing:-.045em;margin-bottom:1rem}
h3{font-size:1.22rem;margin-bottom:.65rem}
p{line-height:1.65;color:var(--muted)}
.intro{font-size:1.12rem;max-width:31rem;margin-bottom:1.65rem}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:1.15rem;background:var(--cyan);color:#10151f;padding:.85rem 1.05rem;font-weight:750;border-radius:.35rem}
.button:hover{background:#b9f2fb}
.art{position:relative;overflow:hidden;min-height:27rem;border:1px solid #33465d;border-radius:.55rem;background:radial-gradient(ellipse at 60% 47%,#27356c 0,#17243d 43%,#111c2c 72%);isolation:isolate}
.grid{position:absolute;inset:0;background-image:linear-gradient(#5b83aa27 1px,transparent 1px),linear-gradient(90deg,#5b83aa27 1px,transparent 1px);background-size:2.1rem 2.1rem;mask-image:linear-gradient(#000,transparent)}
.orb{position:absolute;left:51%;top:45%;width:65%;aspect-ratio:1;border-radius:50%;translate:-50% -50%}
.orb-outer{border:1px solid #86a9edaa;transform:rotate(-28deg) scaleY(.53);box-shadow:0 0 25px #4d8cfa60,inset 0 0 23px #56ddff30}
.orb-inner{width:49%;border:1px solid #93e8ff;box-shadow:0 0 34px #69c0f170,inset 0 0 22px #77c7ff60;background:radial-gradient(circle at 28% 23%,#85d7fa80,#39337e50 38%,#102339 77%)}
.star{position:absolute;inset:0;background:radial-gradient(circle at 20% 24%,#b3f3ff 0 1px,transparent 2px),radial-gradient(circle at 75% 23%,#b3f3ff 0 2px,transparent 3px),radial-gradient(circle at 85% 57%,#b3f3ff 0 1px,transparent 2px),radial-gradient(circle at 32% 72%,#b3f3ff 0 1px,transparent 2px)}
.art-caption{position:absolute;left:1.35rem;bottom:1.25rem;display:flex;align-items:center;gap:.7rem;font:600 .7rem ui-monospace,monospace;letter-spacing:.12em;color:#bad4ec}
.art-caption span{width:1.8rem;height:1px;background:#80a4c6}
.studio,.focus{border-top:1px solid var(--line);padding-block:clamp(2.7rem,7vw,5.7rem)}
.studio{display:grid;grid-template-columns:1fr 2fr;gap:1rem}
.studio p:last-child{max-width:43rem;margin-bottom:0}
.fields{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.8rem}
.fields article{padding:1.3rem;border:1px solid var(--line);border-top-color:#669cae;background:#151e2b;border-radius:.35rem}
.fields p{margin-bottom:0}

.footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.55rem;border-top:1px solid var(--line);padding-block:1.4rem}
.footer p{margin:0;font-size:.73rem;letter-spacing:.055em}
.error{padding-block:5rem}
@media(max-width:760px){.hero{grid-template-columns:1fr;min-height:0;padding-top:3.2rem}.art{min-height:0;aspect-ratio:1.45}.orb{width:52%}.orb-inner{width:40%}.studio{grid-template-columns:1fr}.fields{grid-template-columns:1fr}}
@media(max-width:360px){.masthead{flex-wrap:wrap;padding-block:.6rem}.brand img{width:26px;height:26px}}