@font-face { font-family: "Public Sans"; src: url("fonts/public-sans-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  --font: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --accent: #12161d; --accent-ink: #ffffff; --accent-text: #12161d; --accent-soft: #e8ebf0;
  --fp: #2448d8; --f90: #0a8f62; --crew: #e8590c;
}
:root[data-theme="dark"] { --accent: #eef1f6; --accent-ink: #0f1218; --accent-text: #eef1f6; --accent-soft: #232936; --fp: #7d97ff; --f90: #3fd59b; --crew: #ff8a4c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent: #eef1f6; --accent-ink: #0f1218; --accent-text: #eef1f6; --accent-soft: #232936; --fp: #7d97ff; --f90: #3fd59b; --crew: #ff8a4c; } }

.intro { padding: var(--s-12) 0 var(--s-8); text-align: center; display: flex; flex-direction: column; align-items: center; }
.intro .sub { margin-left: auto; margin-right: auto; }
.intro .display { max-width: 14ch; }
.intro .row { justify-content: center; }
@media (min-width: 960px) { .intro { padding-top: var(--s-16); } }
.stats { max-width: 56rem; margin: 0 auto; }
.stats .tile { text-align: center; align-items: center; }

.apps { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .apps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.app { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.app .shot { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--bg); }
.app .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform 0.25s ease; }
.app .shot:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .app .shot img { transition: none; } .app .shot:hover img { transform: none; } }
.app-body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.app-body .row { margin-top: auto; padding-top: var(--s-2); }
.app-h { display: flex; align-items: center; gap: var(--s-3); }
.app-h h2 { margin: 0; font-size: 1.4rem; font-weight: 850; letter-spacing: -0.02em; }
.mark { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; }
.mark svg { width: 20px; height: 20px; }
.tag { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--ink-2); }
.app.fp { --accent: var(--fp); } .app.fp .mark { background: var(--fp); }
.app.f90 { --accent: var(--f90); } .app.f90 .mark { background: var(--f90); }
.app.crew { --accent: var(--crew); } .app.crew .mark { background: var(--crew); }
:root[data-theme="dark"] .mark { color: #0f1218; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mark { color: #0f1218; } }
.app .btn:not(.ghost) { color: #fff; }
:root[data-theme="dark"] .app .btn:not(.ghost) { color: #0f1218; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .app .btn:not(.ghost) { color: #0f1218; } }
.steps.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .steps.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.only-dark { display: none !important; }
:root[data-theme="dark"] .only-dark { display: block !important; }
:root[data-theme="dark"] .only-light { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .only-dark { display: block !important; }
  :root:not([data-theme="light"]) .only-light { display: none !important; }
}