:root { color-scheme: dark; --bg: #0a1824; --panel: #102536; --line: #294458; --ink: #edf6fb; --muted: #afc6d5; --teal: #63ddd2; --gold: #e5bf77; font-family: "Segoe UI", system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at 72% 5%, #14344a 0, transparent 36rem), var(--bg); color: var(--ink); line-height: 1.65; }
a { color: var(--teal); text-underline-offset: .25em; }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
.skip { position: absolute; left: 1rem; top: .5rem; transform: translateY(-180%); background: var(--bg); padding: .5rem; }
.skip:focus { transform: none; }
.wrap { width: min(1180px, calc(100% - 3rem)); margin-inline: auto; }
.top, .bottom { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; padding-block: 1.2rem; }
.top { border-bottom: 1px solid var(--line); justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--ink); font-size: 1.24rem; font-weight: 700; text-decoration: none; }
nav { display: flex; gap: clamp(.8rem, 3vw, 2rem); flex-wrap: wrap; }
nav a { color: var(--muted); text-decoration: none; }
nav a:hover { color: var(--teal); }
.hero { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.35fr); gap: clamp(1.5rem,5vw,4.5rem); align-items: center; padding-block: clamp(2.7rem,7vw,6rem); }
.eyebrow { margin: 0 0 .8rem; color: var(--gold); font-size: .77rem; font-weight: 700; letter-spacing: .15em; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .65rem; }
h1 { font-size: clamp(2.7rem, 6.1vw, 5.1rem); letter-spacing: -.055em; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); letter-spacing: -.035em; }
h3 { font-size: 1.18rem; }
.lede { color: var(--muted); font-size: 1.13rem; }
.buttons { display: flex; align-items: center; flex-wrap: wrap; gap: .9rem 1.1rem; margin-top: 1.4rem; }
.button { display: inline-flex; padding: .65rem 1.05rem; border-radius: .5rem; background: var(--teal); color: #062524; font-weight: 700; text-decoration: none; }
.button:hover { background: #a0f3ec; }
.subtle { font-size: .92rem; }
.muted, figcaption, .bottom { color: var(--muted); font-size: .92rem; }
figure { margin: 0; }
figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: .65rem; }
.hero-shot img { box-shadow: 0 1.4rem 3.5rem #040d16a0; }
figcaption { margin-top: .45rem; }
.section { padding-block: 2.6rem; border-top: 1px solid var(--line); }
.features, .gallery, .setup { display: grid; gap: 1rem; }
.features { grid-template-columns: repeat(3, 1fr); margin-top: 1.25rem; }
.features article, .setup aside { padding: 1.2rem; background: var(--panel); border: 1px solid var(--line); border-radius: .7rem; }
.features p, aside p { margin: 0; color: var(--muted); }
aside p + p { margin-top: .65rem; }
.gallery, .setup { grid-template-columns: repeat(2,minmax(0,1fr)); }
.gallery { gap: 1.5rem; }
.setup { gap: 2rem; align-items: start; }
.setup ol { padding-inline-start: 1.4rem; }
.setup li + li { margin-top: .65rem; }
aside h3 { color: var(--gold); }
.bottom { border-top: 1px solid var(--line); }
.bottom p { margin: 0 auto 0 0; }
@media (max-width: 820px) { .hero, .setup { grid-template-columns: 1fr; } }
@media (max-width: 550px) { .wrap { width: calc(100% - 2rem); } .features, .gallery { grid-template-columns: 1fr; } .section { padding-block: 1.8rem; } }
.about-copy { max-width: 66ch; color: var(--muted); }
#screenshot-viewer { width: min(1280px, calc(100% - 2rem)); max-width: none; max-height: calc(100% - 2rem); padding: .75rem; background: var(--panel); border: 1px solid var(--line); border-radius: .75rem; color: var(--ink); }
#screenshot-viewer::backdrop { background: rgb(4 12 20 / 88%); }
.viewer-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.viewer-heading h2 { margin: 0; font-size: 1.1rem; }
.viewer-heading button { padding: .4rem .7rem; background: var(--bg); border: 1px solid var(--line); border-radius: .4rem; color: var(--ink); font: inherit; cursor: pointer; }
.viewer-heading button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
#screenshot-viewer img { display: block; width: 100%; max-height: calc(100dvh - 7rem); object-fit: contain; }
body:has(#screenshot-viewer[open]) { overflow: hidden; }