/* Vyntaris's website: the desktop's own palette (Catppuccin: Mocha, Latte when the system is light), one
   accent, Inter. Every space is from one 8px scale; every text colour passes WCAG AA on its background. */

@font-face { font-family: "Inter"; src: url("/fonts/inter.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  --crust: #11111b; --mantle: #181825; --base: #1e1e2e; --surface: #313244; --surface-2: #45475a;
  --text: #cdd6f4; --subtext: #bac2de; --muted: #a6adc8;
  --accent: #89b4fa;
  /* the accent where it's text, a focus ring or a button's fill: as it is on dark, darker on light, so it
     keeps 4.5:1 whichever of the fourteen accents is picked */
  --ink: var(--accent); --on-ink: #11111b;
  /* until one is picked, the visitor's own (the system's accent colour, which Firefox passes on: on
     Vyntaris, the desktop's), lightened on dark so any of them keeps its contrast */
  --system: color-mix(in oklab, AccentColor 70%, #ffffff);
  --line: rgba(205, 214, 244, .12);
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s6: 48px; --s8: 64px; --s12: 96px;
  --radius: 12px;
  --font: "Inter", "Noto Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", "DejaVu Sans Mono", ui-monospace, monospace;
  --page: 1120px; --prose: 68ch;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-scheme="dark"]) {
    --crust: #dce0e8; --mantle: #e6e9ef; --base: #eff1f5; --surface: #ccd0da; --surface-2: #bcc0cc;
    --text: #4c4f69; --subtext: #4c4f69; --muted: #5c5f77;
    --accent: #1e66f5;
    --ink: color-mix(in oklab, var(--accent) 60%, #000); --on-ink: #ffffff;
    --system: AccentColor;
    --line: rgba(76, 79, 105, .16);
    color-scheme: light;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
body { margin: 0; overflow-wrap: break-word; background: var(--base); color: var(--text); font: 400 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { margin: 0; color: var(--text); letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: clamp(36px, 6vw, 60px); line-height: 1.08; font-weight: 700; }
h2 { font-size: clamp(28px, 4vw, 40px); line-height: 1.15; font-weight: 700; }
h3 { font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0; }
code, pre, kbd { font-family: var(--mono); font-size: .9em; }
.wrap { max-width: var(--page); margin-inline: auto; padding-inline: max(var(--s2), env(safe-area-inset-left, 0px)); }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.lead { font-size: 20px; line-height: 1.55; color: var(--subtext); max-width: 60ch; }
.muted { color: var(--muted); }
.skip { position: absolute; left: var(--s2); top: -100px; z-index: 20; background: var(--ink); color: var(--on-ink); padding: var(--s1) var(--s2); border-radius: 8px; font-weight: 600; }
.skip:focus { top: var(--s1); }

/* ---- header: the brand, the sections, the one action ---- */
.top { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--mantle) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: var(--s3); min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: var(--s1); color: var(--text); text-decoration: none; font-weight: 700; font-size: 17px; }
.brand svg { width: 26px; height: 26px; color: var(--accent); }
.nav { display: flex; gap: var(--s3); margin-inline-start: auto; }
.nav a { color: var(--subtext); text-decoration: none; font-size: 15px; padding-block: var(--s1); }
.nav a:hover, .nav a[aria-current] { color: var(--text); }
.nav a[aria-current] { box-shadow: inset 0 -2px var(--ink); }
@media (max-width: 760px) { .nav { display: none; } .top .btn { margin-inline-start: auto; } }

/* ---- buttons: one primary, the rest plain ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); min-height: 44px; padding: 0 var(--s3);
  border-radius: 10px; font: 600 16px var(--font); text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background .15s, color .15s; }
.btn-primary { background: var(--ink); color: var(--on-ink); }
.btn-primary:hover { background: color-mix(in oklab, var(--ink) 86%, var(--text)); }
.btn-plain { color: var(--text); border-color: var(--line); background: transparent; }
.btn-plain:hover { border-color: var(--accent); }
.btn svg { width: 20px; height: 20px; }
.btn-small { min-height: 36px; padding: 0 var(--s2); font-size: 15px; }

/* ---- sections ---- */
section { padding-block: var(--s12); border-top: 1px solid var(--line); }
.section-head { display: grid; gap: var(--s2); margin-bottom: var(--s6); max-width: 720px; }
.hero { padding-block: var(--s8) var(--s12); border-top: 0; }
.hero-text { display: grid; gap: var(--s3); justify-items: start; }
.hero .actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.hero .meta { color: var(--muted); font-size: 15px; }
.shot { margin: var(--s8) 0 0; }
.shot img, figure img { border-radius: var(--radius); border: 1px solid var(--line); background: var(--crust); }
.shot figcaption, figure figcaption { margin-top: var(--s2); color: var(--muted); font-size: 15px; }
figure { margin: 0; }

/* facts under the hero: four short claims, a line each */
.facts { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--s3); }
.facts li { display: grid; gap: 4px; padding-inline-start: var(--s2); border-inline-start: 2px solid var(--ink); }
.facts strong { font-weight: 600; }
.facts span { color: var(--muted); font-size: 15px; }

/* the island's panels: pictures sized to themselves, a caption under each */
.panels { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: var(--s4); align-items: start; }
.panels h3 { font-size: 17px; margin-top: var(--s2); }
.panels p { color: var(--subtext); font-size: 15px; margin-top: 4px; }

/* a list of small things: a heading and a sentence or two, in columns */
.points { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--s6) var(--s4); }
.points > div { display: grid; gap: var(--s1); align-content: start; }
.points .eyebrow { font-size: 12px; }
.points p { color: var(--subtext); }

/* apps: picture and words side by side, sides swapping */
.feature { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s6); align-items: center; }
.feature + .feature { margin-top: var(--s12); }
.feature.flip .feature-text { order: -1; }
.feature-text { display: grid; gap: var(--s2); }
.feature-text p { color: var(--subtext); }
@media (max-width: 860px) { .feature { grid-template-columns: minmax(0, 1fr); gap: var(--s3); } .feature.flip .feature-text { order: 0; } }

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--s4); }

/* the accent picker: real radio buttons, each with its colour's name */
.accents { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s3); border: 0; padding: 0; }
.accents legend { font-weight: 600; margin-bottom: var(--s1); padding: 0; }
.accents label { display: inline-flex; align-items: center; gap: var(--s1); min-height: 36px; padding: 0 12px 0 8px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 14px; }
.accents input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.accents i { width: 18px; height: 18px; border-radius: 50%; background: var(--c); }
.accents input:checked + label { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.accents input:focus-visible + label { outline: 3px solid var(--ink); outline-offset: 2px; }

/* download */
.download { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8); align-items: start; }
@media (max-width: 860px) { .download { grid-template-columns: minmax(0, 1fr); gap: var(--s6); } }
.download .get { display: grid; gap: var(--s3); justify-items: start; }
.download dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s1) var(--s3); margin: 0; font-size: 15px; }
.download dt { color: var(--muted); }
.download dd { margin: 0; min-width: 0; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: var(--s4); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s2); }
.steps li::before { content: counter(step); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: var(--ink); border: 2px solid var(--ink); }
.steps h3 { font-size: 18px; }
.steps p { color: var(--subtext); margin-top: 4px; }
.cmd { display: flex; align-items: stretch; margin-top: var(--s2); border: 1px solid var(--line); border-radius: 10px; background: var(--crust); overflow: hidden; }
.cmd pre { margin: 0; padding: 12px var(--s2); overflow-x: auto; flex: 1; min-width: 0; font-size: 14px; line-height: 1.5; }
.cmd button { flex: none; border: 0; border-inline-start: 1px solid var(--line); background: transparent; color: var(--text); font: 600 14px var(--font); padding: 0 var(--s2); cursor: pointer; min-width: 84px; }
.cmd button:hover { color: var(--ink); }

/* long-form pages: the policy and the terms */
.prose { max-width: var(--prose); padding-block: var(--s8) var(--s12); }
.prose h1 { font-size: clamp(32px, 5vw, 44px); margin-top: var(--s1); }
.prose .date { color: var(--muted); margin-top: var(--s1); }
.prose .lead { margin-top: var(--s3); font-size: 18px; }
.prose h2 { font-size: 24px; margin: var(--s6) 0 var(--s2); }
.prose h3 { font-size: 18px; margin: var(--s4) 0 var(--s1); }
.prose p, .prose li { color: var(--subtext); }
.prose p { margin-bottom: var(--s2); }
.prose ul { padding-inline-start: var(--s3); margin: 0 0 var(--s2); }
.prose li { margin-bottom: var(--s1); }
.prose strong { color: var(--text); font-weight: 600; }
.prose code { background: color-mix(in srgb, var(--accent) 16%, transparent); border-radius: 6px; padding: 1px 6px; overflow-wrap: anywhere; }
.note { border-inline-start: 3px solid var(--ink); background: var(--mantle); border-radius: 0 var(--radius) var(--radius) 0; padding: var(--s2) var(--s3); margin: var(--s3) 0; }
.note p:last-child { margin: 0; }

/* footer */
.foot { border-top: 1px solid var(--line); background: var(--mantle); padding-block: var(--s6); color: var(--muted); font-size: 15px; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center; }
.foot nav { display: flex; flex-wrap: wrap; gap: var(--s3); margin-inline-start: auto; }
.foot a { color: var(--subtext); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* no accent picked: the system's (where the browser tells it; the page's blue otherwise) */
@supports (color: AccentColor) {
  :root:not([data-picked]) { --accent: var(--system); }
}

/* ---- take it apart (shorter than it was: four screens of scrolling, not thirteen): a laptop (WebGL) that opens on the lock screen as you scroll, comes apart into the
   system's layers, goes back together and comes up close as its screen goes through the apps ---- */
.xp { position: relative; height: 400vh; padding: 0; }
.xp-pin { position: sticky; top: 64px; height: calc(100svh - 64px); overflow: hidden; }
.xp-head { position: absolute; left: 0; right: 0; top: 0; padding-top: 40px; display: grid; gap: 10px; z-index: 2; }
.xp-head .lead { font-size: 16px; }
.xp-scene { position: absolute; inset: 0; }
.xp-scene canvas { display: block; width: 100%; height: 100%; }
.xp-fallback { display: none; }
/* until the scene has drawn once: the desktop as a picture where the laptop will be, never an empty view */
.xp:not(.live):not(.nogl) .xp-fallback { display: block; position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%); width: min(760px, 86%); padding: 0; }
.xp-status { display: none; color: var(--muted); font-size: 13px; margin-top: 10px; }
.xp.nogl .xp-status:not(:empty) { display: block; }
.xp-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
.xp-lines path { fill: none; stroke: var(--accent); stroke-width: 1; }
.xp-lines circle { fill: var(--accent); }
.xp-lines g { opacity: 0; transition: opacity .35s ease; }
.xp-lines g.on { opacity: 1; }
.xp-labels { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.xp-labels li { position: absolute; left: 0; top: 0; width: 250px; display: grid; gap: 3px; opacity: 0; transition: opacity .35s ease;
  background: color-mix(in srgb, var(--base) 86%, transparent); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.xp-labels li.on { opacity: 1; transition-delay: calc(var(--i, 0) * 60ms); }
@media (max-height: 780px) and (min-width: 1080px) { .xp-labels p { display: none; } }
.xp-labels .caps { color: var(--accent); font-size: 11px; }
/* a snapshot's date, on the copy itself */
.xp-labels li.pill { width: auto; white-space: nowrap; padding: 4px 11px; border-radius: 999px; font: 600 12px var(--mono); color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.xp.nogl .xp-labels li.pill { display: none; }
.xp-labels li.pill.on { transition-delay: .15s; }
.xp-labels h3 { font-size: 15px; }
.xp-labels p { color: var(--subtext); font-size: 13px; line-height: 1.45; }
.xp.narrow .xp-labels li:not(.pill) { left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; transform: translateY(8px) !important; transition: opacity .35s ease, transform .35s ease; }
.xp.narrow .xp-labels li:not(.pill).on { transform: none !important; transition-delay: 0s; }
.xp.narrow .xp-lines { display: none; }
.xp-cap { position: absolute; left: 0; right: 0; bottom: 28px; display: grid; justify-items: center; pointer-events: none; z-index: 2; }
.xp-cap div { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .4s ease;
  text-align: center; display: grid; gap: 4px; max-width: 520px; padding: 0 16px; }
.xp-cap div.on { opacity: 1; transform: none; transition-delay: .15s; }
.xp-cap .caps { color: var(--accent); }
.xp-cap h3 { font-size: 22px; }
.xp-cap p { color: var(--subtext); font-size: 15px; }
.xp.still { height: auto; }
.xp.still .xp-pin { position: relative; top: 0; height: min(860px, 100svh); }
/* without WebGL: the desktop as a picture, the labels as a list under it */
.xp.nogl { height: auto; }
.xp.nogl .xp-pin { position: relative; top: 0; height: auto; overflow: visible; padding-bottom: 48px; }
.xp.nogl .xp-head { position: relative; }
.xp.nogl .xp-scene, .xp.nogl .xp-lines, .xp.nogl .xp-cap { display: none; }
.xp.nogl .xp-fallback { display: block; margin-top: 28px; }
.xp.nogl .xp-labels { position: relative; inset: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; max-width: 1160px; margin: 20px auto 0; padding: 0 16px; }
.xp.nogl .xp-labels li { position: relative; width: auto; opacity: 1; }


.caps { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.xp { border-top: 1px solid var(--line); }
.xp .xp-head .eyebrow { color: var(--ink); }
.xp .ic { display: none; }

/* ---- the header as the desktop's bar: the sections in an island hanging from its middle, its sides
   curving out of the bar's line as the shell's do (a phone has no room for it: the sections are below) */
@media (min-width: 761px) {
  .top { border-bottom-color: var(--ink); }
  .top .nav { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin: -1px 0 0;
    padding: 4px var(--s3) 10px; gap: var(--s3); background: var(--mantle);
    border: 1px solid var(--ink); border-top: 0; border-radius: 0 0 18px 18px; }
  .top .nav::before, .top .nav::after { content: ""; position: absolute; top: 0; width: 18px; height: 18px; }
  .top .nav::before { right: 100%; background: radial-gradient(circle at 0 100%, transparent 17px, var(--ink) 17px 18px, var(--mantle) 18px); }
  .top .nav::after { left: 100%; background: radial-gradient(circle at 100% 100%, transparent 17px, var(--ink) 17px 18px, var(--mantle) 18px); }
  .top .nav a { font-size: 14px; padding-block: 6px; }
  .top .btn { margin-inline-start: auto; }
  html { scroll-padding-top: 116px; }
  .hero { padding-top: var(--s12); }
}

/* ---- the hero's island: the wallpaper and the bar, the panel picked laid where it opens */
.island-pick { display: flex; flex-wrap: wrap; gap: var(--s1); margin-bottom: var(--s2); }
.island-pick[hidden] { display: none; }
.island-pick button { min-height: 40px; padding: 0 var(--s2); border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--subtext); font: 500 15px var(--font); cursor: pointer; transition: border-color .15s, color .15s; }
.island-pick button:hover { color: var(--text); border-color: var(--ink); }
.island-pick button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); font-weight: 600; }
.stage { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--crust); }
.stage img { border: 0; border-radius: 0; }
.stage-wall { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage-bar { position: absolute; left: 0; top: 0; width: 100%; height: auto; }
.stage-panel { position: absolute; top: 0; left: var(--x); width: var(--w); height: auto; animation: grow .25s ease-out; transform-origin: top center; }
.stage-panel[hidden] { display: none; }
@keyframes grow { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
/* a phone: the panel alone, as large as it fits (the whole screen would be too small to read) */
@media (max-width: 600px) {
  .stage { aspect-ratio: auto; background: transparent; border: 0; }
  .stage-wall, .stage-bar { display: none; }
  .stage-panel { position: static; width: min(100%, 420px); margin-inline: auto; border-radius: var(--radius); border: 1px solid var(--line); }
}