/* The download page's look (DESIGN.md): the icon's aluminium for surfaces, its lens for the dark hero and the text,
   its status light for the one action, and Immich's five colours only as the ring and small accents. Light and dark
   with the system; nothing loaded from elsewhere. */

:root {
  /* The icon's parts, by name (DESIGN.md, "Colours"). */
  --aluminium-0: #ffffff;
  --aluminium-1: #f6f5f4;
  --aluminium-2: #deddda;
  --aluminium-3: #c0bfbc;
  --aluminium-4: #9a9996;
  --lens-rim: #3d3846;
  --lens: #241f31;
  --lens-deep: #0f0d16;
  --glass: #2d5c9e;
  --glass-mid: #18294a;
  --glass-light: #62a0ea;
  --light: #18c249;
  --ring-red: #fa2921;
  --ring-pink: #ed79b5;
  --ring-amber: #ffb400;
  --ring-blue: #1e83f7;
  --ring-green: #18c249;

  /* Their roles on the page. */
  --background: var(--aluminium-1);
  --surface: var(--aluminium-0);
  --line: var(--aluminium-2);
  --text: var(--lens);
  --muted: #5e5c64;
  --link: var(--glass);
  --code: #edecea;
  --shadow: 0 1px 2px rgb(36 31 49 / 0.06), 0 8px 24px rgb(36 31 49 / 0.08);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #15131c;
    --surface: var(--lens);
    --line: var(--lens-rim);
    --text: var(--aluminium-1);
    --muted: var(--aluminium-3);
    --link: var(--glass-light);
    --code: #1c1926;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.35);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Cantarell, "Noto Sans", Ubuntu, sans-serif;
}

a { color: var(--link); }

main, .notice, footer { max-width: 980px; margin: 0 auto; padding: 0 24px; }

/* The hero is the lens: its glass as the ground in both appearances, the icon at the centre of its ring. */
.hero {
  background: radial-gradient(ellipse 70% 90% at 50% 30%, var(--glass) 0%, var(--glass-mid) 55%, var(--lens-deep) 100%);
  color: var(--aluminium-1);
  text-align: center;
  padding: 0 24px 56px;
}
/* Links on the glass are white and underlined: the lighter blue reached only 4:1 there. */
.hero a { color: var(--aluminium-0); text-decoration-color: rgb(255 255 255 / 0.55); }

.bar {
  max-width: 980px;
  margin: 0 auto;
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: inherit;
  text-decoration: none;
}
.hero .brand { color: var(--aluminium-0); }
.bar .links a { color: var(--aluminium-2); text-decoration: none; margin-left: 20px; font-size: 0.95rem; }
.bar .links a:hover { color: var(--aluminium-0); }

.stage { position: relative; width: 260px; height: 260px; margin: 24px auto 8px; }
.ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.ring path { fill: none; stroke-width: 4; opacity: 0.9; }
/* The mark in its ring, the lens of every edition's icon: the project as a whole, for every visitor, as on the social
   preview. Each platform's own icon stands beside its name below. */
.hero-mark {
  position: absolute;
  inset: 58px;
  width: 144px;
  height: 144px;
  filter: drop-shadow(0 14px 28px rgb(0 0 0 / 0.4));
}

h1 { font-size: 3rem; line-height: 1.1; margin: 8px 0 8px; letter-spacing: -0.03em; color: var(--aluminium-0); }
.tagline { font-size: 1.3rem; margin: 0 auto 20px; max-width: 640px; color: var(--aluminium-2); }

.supported {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.supported li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.16);
  font-size: 0.95rem;
  color: var(--aluminium-2);
}
.supported strong { color: var(--aluminium-0); }

.button {
  display: inline-block;
  padding: 11px 24px;
  border-radius: 10px;
  background: var(--light);
  color: var(--lens-deep);
  font-weight: 700;
  text-decoration: none;
  margin: 4px;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08), 0 4px 14px rgb(24 194 73 / 0.35);
}
.button:hover { filter: brightness(1.06); }
.hero .button { color: var(--lens-deep); }
.button.ghost {
  background: transparent;
  color: var(--aluminium-0);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35);
}
.version { font-size: 0.9rem; color: var(--aluminium-3); margin: 18px 0 0; }

.notice {
  margin-top: 28px;
  font-size: 0.85rem;
  color: var(--muted);
  border-left: 3px solid var(--line);
  padding-left: 16px;
}

.lead { font-size: 1.1rem; max-width: 760px; margin: 40px 0 0; }

section { margin: 64px 0; }
h2 { font-size: 1.8rem; letter-spacing: -0.02em; margin: 0 0 20px; }
h3 { font-size: 1.05rem; margin: 0 0 6px; }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.features > div {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 20px 18px;
  box-shadow: var(--shadow);
}
/* One piece of the ring on each card, in the ring's order. */
.features > div::before {
  content: "";
  display: block;
  width: 36px;
  height: 5px;
  border-radius: 3px;
  margin-bottom: 14px;
  background: var(--ring-red);
}
.features > div:nth-child(5n + 2)::before { background: var(--ring-pink); }
.features > div:nth-child(5n + 3)::before { background: var(--ring-amber); }
.features > div:nth-child(5n + 4)::before { background: var(--ring-blue); }
.features > div:nth-child(5n + 5)::before { background: var(--ring-green); }
.features p { margin: 0; color: var(--muted); }

/* One section for each platform, the visitor's first: what is native there, and three pictures of it. */
.section-lead { color: var(--muted); max-width: 760px; margin: -8px 0 24px; }
.natives { display: flex; flex-direction: column; gap: 24px; }
.native { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; box-shadow: var(--shadow); }
.native-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.native-head img { flex: none; }
.native-head h3 { font-size: 1.3rem; margin: 4px 0 4px; }
.native-head p { margin: 0; color: var(--muted); }
.native-shots { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; align-items: start; }
.native-shots img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); }
/* The Mac's pictures carry macOS's own window shadow and margin. */
.native-shots img.own-frame { border: 0; border-radius: 0; }
body[data-os="macos"][data-macos="ready"] #on-mac { order: -1; }

.platforms { display: flex; flex-direction: column; gap: 20px; }
.platform {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: var(--shadow);
}
.platform h3 { display: flex; align-items: center; gap: 12px; font-size: 1.4rem; margin-bottom: 12px; }
/* The visitor's platform first, marked with the status light. */
.yours { display: none; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.yours::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--light); box-shadow: 0 0 6px var(--light); }
body[data-os="macos"] #macos { order: -1; }
body[data-os="macos"] #macos,
body[data-os="linux"] #linux { border-color: var(--light); }
body[data-os="macos"] #macos .yours,
body[data-os="linux"] #linux .yours { display: inline-flex; }

table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: 0.95rem; }
th, td { text-align: left; vertical-align: top; padding: 9px 10px 9px 0; border-top: 1px solid var(--line); }
th { width: 34%; font-weight: 600; }
.missing { color: var(--muted); }

pre.command {
  position: relative;
  background: var(--code);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 70px 12px 14px;
  font-size: 0.92rem;
}
/* A long command wraps inside its box rather than running under the Copy button on a phone. */
pre.command code { white-space: pre-wrap; overflow-wrap: anywhere; }
pre.command button {
  position: absolute;
  top: 8px;
  right: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: 6px;
  padding: 2px 10px;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}
code { font-family: ui-monospace, "SF Mono", Menlo, "Cascadia Mono", "DejaVu Sans Mono", monospace; }
.small { font-size: 0.9rem; color: var(--muted); }

footer { border-top: 1px solid var(--line); padding-top: 24px; padding-bottom: 48px; margin-top: 72px; font-size: 0.85rem; color: var(--muted); }
footer .brand { color: var(--text); font-size: 1rem; }

@media (max-width: 720px) {
  .native-shots { grid-template-columns: 1fr 1fr; }
  .native-shots img:first-child { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  h1 { font-size: 2.3rem; }
  .stage { width: 210px; height: 210px; }
  .hero-mark { inset: 47px; width: 116px; height: 116px; }
  .bar .links a { margin-left: 14px; }
}