/* ==========================================================================
   Lightrinth — site stylesheet

   Everything below is taken from the launcher itself so the site and the app
   feel like one product:

     theseus_gui/node_modules/omorphia/dist/style.css
       - the `.dark-mode` token block (copied verbatim) — the site ships the
         launcher's dark theme, which is also the launcher's default theme; the
         `.oled-mode` overrides are deliberately not included
       - the `:root` scale: font sizes, weights, radii, gaps, shadows
       - the component classes: .btn (+ primary/outline/raised/large/icon-only),
         .btn-group, .card, .base-card, .chips, .badge, .card-divider, inputs
       - the interaction language: the exact transition stack
         `opacity .5s ease-in-out, filter .2s ease-in-out, scale .05s ease-in-out,
          outline .2s ease-in-out`, hover `brightness(.85)`, active `scale(.95)`,
         and the `#ea80ff` focus ring
       - the keyframes: `rotate` (4s / 6s linear) and `spin` from AnimatedLogo

     theseus_gui/src/components/modrinth-loading-indicator.js
       - the fixed brand progress bar (3px, `width .1s, height .4s, opacity .4s`,
         progress stepping every 100ms)

     theseus_gui/src/components/ui/SplashScreen.vue
       - the splash surface colour and the 16rem logo mark

   Inter is self-hosted (see assets/fonts) instead of pulled from the launcher's
   font CDN, so the page still makes zero external requests.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts ---
   The launcher declares these against cdn-raw.modrinth.com; the same files are
   vendored here (Inter, SIL Open Font License 1.1) so the rendering matches
   without a third-party request. */

@font-face {
  font-family: inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/Inter-Regular.woff2') format('woff2');
}

@font-face {
  font-family: inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/Inter-Medium.woff2') format('woff2');
}

@font-face {
  font-family: inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/Inter-SemiBold.woff2') format('woff2');
}

@font-face {
  font-family: inter;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/Inter-Bold.woff2') format('woff2');
}

@font-face {
  font-family: inter;
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/Inter-ExtraBold.woff2') format('woff2');
}

/* ------------------------------------------------------------- tokens ---
   omorphia's scale lives on :root / body. */

:root {
  --font-size-xxs: 0.625rem;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-nm: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 3rem;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-text: var(--font-weight-medium);
  --font-weight-heading: var(--font-weight-extrabold);
  --font-weight-title: var(--font-weight-extrabold);

  --radius-xs: 0.25rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-max: 999999999px;

  --gap-xs: 0.25rem;
  --gap-sm: 0.5rem;
  --gap-md: 0.75rem;
  --gap-lg: 1rem;
  --gap-xl: 1.5rem;

  --font-standard: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto,
    Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  --mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;

  /* site-only: the splash surface from SplashScreen.vue and the page width */
  --splash-bg: #16181c;
  --view-width: 74rem;
  --focus-ring: #ea80ff;
}

/* omorphia: `.dark-mode, .oled-mode, .dark` — copied verbatim, minus `.oled-mode`.
   The launcher's dark theme is the one the site uses (and the launcher's new
   default); `.oled-mode` is what the OLED option switches on inside the app. */
.dark-mode,
.dark {
  --color-bg: #16181c;
  --color-raised-bg: #26292f;
  --color-super-raised-bg: #40434a;
  --color-button-bg: hsl(222, 13%, 30%);
  --color-base: var(--dark-color-base);
  --color-contrast: var(--dark-color-contrast);
  --color-accent-contrast: #000000;
  --color-red: #ff496e;
  --color-orange: #ffa347;
  --color-green: #1bd96a;
  --color-blue: #4f9cff;
  --color-purple: #c78aff;
  --color-gray: #9fa4b3;
  --color-brand: var(--color-green);
  --color-brand-highlight: rgba(27, 217, 106, 0.25);
  --color-brand-shadow: rgba(27, 217, 106, 0.7);
  --shadow-inset-lg: inset 0px -2px 2px hsla(221, 39%, 11%, 0.1);
  --shadow-inset: inset 0px -2px 2px hsla(221, 39%, 11%, 0.05);
  --shadow-inset-sm: inset 0px -1px 1px hsla(221, 39%, 11%, 0.25);
  --shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2);
  --shadow-raised: 0px -2px 4px hsla(221, 39%, 11%, 0.1);
  --shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
    hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
  --shadow-card: rgba(0, 0, 0, 0.25) 0px 2px 4px 0px;
  --color-tooltip-text: var(--color-base);
  --color-tooltip-bg: var(--color-button-bg);

  --dark-color-base: #b0bac5;
  --dark-color-contrast: #ecf9fb;
}

/* omorphia: `.oled-mode` is intentionally not copied — the site is dark themed. */

/* omorphia: `* { box-sizing: border-box } body { ... }` (the launcher keeps the
   document fixed because it is an app; the site scrolls normally) */
* {
  box-sizing: border-box;
}

body {
  background-color: var(--color-bg);
  color: var(--color-base);
  font-family: var(--font-standard);
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  margin: 0;
  padding: 0;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* the launcher paints its splash on this surface for a moment */
body::before {
  content: '';
  position: fixed;
  inset: -30vh 0 auto 0;
  height: 90vh;
  background: radial-gradient(
    60% 60% at 50% 0%,
    rgba(27, 217, 106, 0.13) 0%,
    rgba(27, 217, 106, 0.05) 40%,
    transparent 75%
  );
  pointer-events: none;
  z-index: 0;
}

/* in-page nav should glide, not jump (unless the user asked for less motion) */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* omorphia: `svg { height: 1em; width: 1em }` */
svg {
  height: 1em;
  width: 1em;
}

h1,
h2,
h3,
h4 {
  color: var(--color-contrast);
  font-weight: var(--font-weight-heading);
  line-height: 1.15;
  margin: 0 0 var(--gap-lg);
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(2.3rem, 5.2vw, var(--font-size-3xl));
}

h2 {
  font-size: clamp(1.7rem, 3vw, 2.35rem);
}

h3 {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--gap-sm);
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 var(--gap-lg);
}

/* Only real code and file paths stay monospaced (the launcher reserves
   `--mono-font` for those too). Version strings and labels use the UI font —
   that is what the launcher's own version badges do — with tabular figures so
   they line up. */
code,
kbd,
samp,
pre {
  font-family: var(--mono-font);
  font-size: 0.9em;
}

.mono {
  font-family: var(--font-standard);
  font-variant-numeric: tabular-nums;
}

/* form controls do not inherit type by default */
button,
input,
select,
textarea {
  font-family: var(--font-standard);
}

/* omorphia's prose link colour (used by `.markdown-body a` and `.goto-link`) */
a {
  color: var(--color-blue);
  text-decoration: none;
}

/* omorphia: `button:focus-visible, a:focus-visible, [tabindex="0"]:focus-visible` */
button:focus-visible,
a:focus-visible,
[tabindex='0']:focus-visible {
  outline: 0.25rem solid var(--focus-ring);
  border-radius: var(--radius-xs);
}

/* The scroll reveal is an enhancement only: content is visible unless main.js
   has set up the observer, and a fail-safe forces it visible regardless. */
.reveal {
  opacity: 1;
}

html.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

html.js .reveal.in {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   omorphia components
   ========================================================================== */

/* omorphia: the shared interaction transition */
a,
.clickable,
.button-base,
.btn {
  transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, scale 0.05s ease-in-out,
    outline 0.2s ease-in-out;
}

a:active:not(a:disabled, .clickable:disabled, .button-base:disabled, .btn:disabled),
.clickable:active:not(a:disabled, .clickable:disabled, .button-base:disabled, .btn:disabled),
.button-base:active:not(a:disabled, .clickable:disabled, .button-base:disabled, .btn:disabled),
.btn:active:not(a:disabled, .clickable:disabled, .button-base:disabled, .btn:disabled) {
  scale: 0.95;
}

.button-base,
.btn {
  font-weight: var(--font-weight-medium);
  border: none;
  outline: 2px solid transparent;
}

.button-base:focus-visible:not(:disabled),
.btn:focus-visible:not(:disabled),
.button-base:hover:not(:disabled),
.btn:hover:not(:disabled) {
  cursor: pointer;
  filter: brightness(0.85);
}

.button-base:active:not(:disabled),
.btn:active:not(:disabled) {
  filter: brightness(0.8);
}

/* omorphia: `.btn` */
.btn {
  --text-color: var(--color-contrast);
  --background-color: var(--color-button-bg);
  --shadow: var(--shadow-inset-sm), 0 0 0 0 transparent;

  box-sizing: border-box;
  color: var(--text-color);
  background-color: var(--background-color);
  box-shadow: var(--shadow);
  border-radius: var(--radius-md);
  padding-inline: var(--gap-lg);
  padding-block: var(--gap-sm);
  display: flex;
  align-items: center;
  cursor: pointer;
  width: fit-content;
  height: fit-content;
  text-decoration: none;
}

.btn.btn-primary {
  --text-color: var(--color-accent-contrast);
  --background-color: var(--color-brand);
}

.btn.btn-outline {
  --background-color: var(--color-contrast);
  --text-color: var(--color-raised-bg);

  box-sizing: border-box;
  background-color: transparent;
  border: 2px solid var(--background-color);
  color: var(--background-color);
  padding-block: calc(var(--gap-sm) - 2px);
}

.btn.btn-raised {
  --shadow: var(--shadow-inset-sm), var(--shadow-raised);
  --background-color: var(--color-raised-bg);
}

.btn.btn-secondary {
  --background-color: var(--color-brand-highlight);
}

.btn.btn-large {
  font-weight: var(--font-weight-bold);
  min-height: 2.5rem;
}

.btn svg {
  width: 1.1rem;
  height: 1.1rem;
  margin-right: 0.5rem;
}

/* the Discord mark is wider than it is tall, so it keeps its ratio instead of
   being squashed into the 1.1rem square the inline button icons use */
.btn img.discord-mark {
  height: 0.95rem;
  width: auto;
  margin-right: 0.5rem;
}

/* omorphia: `.btn-group` */
.btn-group {
  display: flex;
  grid-gap: var(--gap-sm);
  flex-wrap: wrap;
}

/* omorphia: `.chips` — the filter buttons, including the selected ring */
.chips {
  display: flex;
  grid-gap: 0.5rem;
  flex-wrap: wrap;
}

.chips .btn {
  text-transform: capitalize;
}

.chips .btn svg {
  width: 1em;
  height: 1em;
}

.chips .selected {
  color: var(--color-contrast);
  background-color: var(--color-brand-highlight);
  box-shadow: inset 0 0 0 transparent, 0 0 0 2px var(--color-brand);
}

/* omorphia: `.card` / `.base-card` */
.card,
.base-card {
  padding: var(--gap-xl);
  position: relative;
  min-height: var(--font-size-2xl);
  background-color: var(--color-raised-bg);
  border-radius: var(--radius-lg);
  margin-bottom: var(--gap-md);
  outline: 2px solid transparent;
  box-shadow: var(--shadow-card);
}

/* omorphia: `.table .table-row.selectable` — the "this is clickable" hover */
.card.selectable:hover,
.card.selectable:focus-visible {
  cursor: pointer;
  filter: brightness(0.85);
}

.card.selectable:active {
  filter: brightness(0.8);
  scale: 0.99;
}

/* omorphia: `.card-divider` */
.card-divider {
  background-color: var(--color-button-bg);
  border: none;
  color: var(--color-button-bg);
  height: 1px;
  margin: var(--gap-sm) 0;
}

/* omorphia's `.badge` (from the launcher's global.scss) */
.badge {
  display: flex;
  border-radius: var(--radius-md);
  white-space: nowrap;
  align-items: center;
  background-color: var(--color-bg);
  padding-block: var(--gap-sm);
  padding-inline: var(--gap-lg);
  width: min-content;
}

/* omorphia: inputs */
input[type='text'] {
  border-radius: var(--radius-md);
  box-sizing: border-box;
  appearance: none !important;
  background: var(--color-button-bg);
  color: var(--color-base);
  padding: 0.5rem 1rem;
  font-family: inherit;
  font-weight: var(--font-weight-medium);
  transition: box-shadow 0.1s ease-in-out;
  min-height: 40px;
  box-shadow: var(--shadow-inset-sm), 0 0 0 0 transparent;
  border: none;
  outline: none;
}

input[type='text']:focus,
input[type='text']:focus-visible {
  box-shadow: inset 0 0 0 transparent, 0 0 0 0.25rem var(--color-brand-shadow);
  color: var(--color-contrast);
  outline: none;
}

input[type='text']::placeholder {
  color: var(--color-base);
  opacity: 0.6;
}

/* ==========================================================================
   The launcher's route loading indicator
   (theseus_gui/src/components/modrinth-loading-indicator.js)
   ========================================================================== */

.loading-indicator {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  height: 3px;
  width: 0;
  opacity: 0;
  background: linear-gradient(to right, var(--color-brand) 0%, var(--color-brand) 100%);
  transition: width 0.1s, height 0.4s, opacity 0.4s;
  z-index: 60;
}

.loading-indicator.shown {
  opacity: 1;
}

/* ==========================================================================
   Site layout
   ========================================================================== */

.wrap {
  width: min(100% - 2.5rem, var(--view-width));
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

section {
  padding-block: clamp(3.5rem, 8vw, 6rem);
  position: relative;
  z-index: 1;
}

.section-head {
  max-width: 44rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.section-head p {
  font-size: var(--font-size-md);
  color: var(--color-base);
  margin-bottom: 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-brand);
  margin-bottom: var(--gap-md);
}

.eyebrow::before {
  content: '';
  width: 1.5rem;
  height: 2px;
  border-radius: 2px;
  background: var(--color-brand);
}

/* ------------------------------------------------------------------ nav --- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  /* omorphia's `.modal-overlay.shown` treatment: half-black plus a light blur */
  background: hsla(0, 0%, 0%, 0.5);
  backdrop-filter: blur(3px);
  border-bottom: 1px solid var(--color-button-bg);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: var(--gap-xl);
  height: 4.25rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--color-contrast);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--font-size-md);
  letter-spacing: -0.01em;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
}

.brand img {
  width: 2.25rem;
  height: 2.25rem;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-left: auto;
  font-size: var(--font-size-sm);
}

.nav-links a:not(.btn) {
  color: var(--color-base);
  font-weight: var(--font-weight-medium);
  /* omorphia's `.title .title-link` behaviour: the hover state is a colour swap */
  transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, scale 0.05s ease-in-out,
    color 0.2s ease-in-out, outline 0.2s ease-in-out;
}

.nav-links a:not(.btn):hover,
.nav-links a:not(.btn)[aria-current='true'] {
  color: var(--color-contrast);
  text-decoration: none;
}

.nav-links .btn {
  --text-color: var(--color-accent-contrast);
}

@media (max-width: 780px) {
  .nav-links .nav-hide {
    display: none;
  }
}

/* ----------------------------------------------------------------- hero ---
   Centred stack with the launcher window below, the way the download pages for
   other launchers do it. The window is a screenshot of the real app, framed
   with the same chrome the app uses for its own panels. */

.hero {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 5vw, 3.5rem);
  /* the watermark below is wider than the viewport on purpose — clip it here
     instead of letting it extend the document */
  overflow: hidden;
}

/* The giant mark behind the hero, the way the app's splash screen throws its
   logo across the whole surface before the window appears. Kept behind the
   content (the section is its own stacking context) and faded at the edges so
   it reads as a watermark rather than a second logo. */
.hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 0;
  width: min(58rem, 120vw);
  aspect-ratio: 1;
  transform: translate(-50%, 30%);
  background: url('assets/logo.png') center / contain no-repeat;
  opacity: 0.08;
  -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent 92%);
  mask-image: radial-gradient(closest-side, #000 45%, transparent 92%);
  pointer-events: none;
}

.hero-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 54rem;
  margin-inline: auto;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-max);
  background: var(--color-brand-highlight);
  color: var(--color-brand);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
  margin-bottom: var(--gap-xl);
}

.hero-pill .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-brand);
}

.hero-stack h1 {
  font-size: clamp(2.4rem, 6.2vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin-bottom: var(--gap-lg);
}

.hero p.lede {
  font-size: clamp(1.02rem, 1.8vw, 1.25rem);
  max-width: 44rem;
  margin-bottom: var(--gap-xl);
}

.hero-actions {
  justify-content: center;
  margin-bottom: var(--gap-lg);
}

.hero-actions .btn {
  padding-inline: 1.4rem;
  min-height: 3rem;
  font-size: var(--font-size-nm);
}

.hero-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-sm);
  flex-wrap: wrap;
  font-size: var(--font-size-sm);
  color: var(--color-gray);
  margin: 0;
}

.hero-note .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-gray);
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* -------------------------------------------------- the app screenshot ---
   The hero shows the real launcher: a screenshot of the app's Home page, so
   the window on the page is the window people actually get. */

.app-shot {
  display: block;
  width: 100%;
  height: auto;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  /* the launcher's window chrome, so the screenshot reads as a window sitting
     on the page: a hairline outline and the raised shadow the app's panels use */
  border-radius: var(--radius-lg);
  outline: 1px solid var(--color-button-bg);
  box-shadow: var(--shadow-raised), var(--shadow-inset);
  /* the launcher's modal entrance: `all .25s ease-in-out` */
  animation: rise-in 0.25s ease-in-out both;
  animation-delay: 0.08s;
}

/* ---------------------------------------------------------------- strip --- */

.strip {
  padding-block: 0;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.strip-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-radius: var(--radius-lg);
  background: var(--color-raised-bg);
  box-shadow: var(--shadow-card);
  outline: 2px solid transparent;
  overflow: hidden;
}

.strip-item {
  padding: var(--gap-lg) var(--gap-xl);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-contrast);
  font-size: var(--font-size-sm);
}

.strip-item + .strip-item {
  border-left: 1px solid var(--color-button-bg);
}

.strip-item svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-brand);
  flex-shrink: 0;
}

.strip-item small {
  display: block;
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-xs);
  color: var(--color-gray);
}

@media (max-width: 860px) {
  .strip-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .strip-item:nth-child(3) {
    border-left: none;
  }

  .strip-item:nth-child(n + 3) {
    border-top: 1px solid var(--color-button-bg);
  }
}

@media (max-width: 480px) {
  .strip-inner {
    grid-template-columns: 1fr;
  }

  .strip-item + .strip-item {
    border-left: none;
    border-top: 1px solid var(--color-button-bg);
  }
}

/* ------------------------------------------------------------- features --- */

.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-lg);
}

.features .card {
  margin-bottom: 0;
}

.features .card p {
  font-size: var(--font-size-sm);
}

.features .card p:last-child {
  margin-bottom: 0;
}

.card-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  background: var(--color-brand-highlight);
  color: var(--color-brand);
  margin-bottom: var(--gap-lg);
}

.card-icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

@media (max-width: 960px) {
  .features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .features {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------- showcase --- */

.showcase-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (max-width: 900px) {
  .showcase-grid {
    grid-template-columns: 1fr;
  }
}

.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.checklist li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: var(--font-size-sm);
}

.checklist svg {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--color-brand);
  flex-shrink: 0;
  margin-top: 0.28rem;
}

.checklist strong {
  color: var(--color-contrast);
  font-weight: var(--font-weight-bold);
}

/* a mock of the instance Content bar, built from the real omorphia classes */
.mock {
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow-raised), var(--shadow-inset);
}

.mock-body {
  padding: var(--gap-xl);
}

.mock-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: var(--gap-md);
  background: var(--color-super-raised-bg);
  border-bottom: 1px solid var(--color-button-bg);
}

.mock-dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--color-button-bg);
}

.mock-title {
  margin-left: 0.5rem;
  font-size: var(--font-size-xs);
  color: var(--color-gray);
  font-weight: var(--font-weight-bold);
}

.mock .chips {
  margin-bottom: var(--gap-lg);
}

.mock-rows {
  display: grid;
  gap: 0.6rem;
}

.mock-row {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  padding: 0.65rem 0.8rem;
  border-radius: var(--radius-md);
  background: var(--color-bg);
  box-shadow: var(--shadow-inset-sm);
  /* omorphia's table row */
  transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, scale 0.05s ease-in-out,
    outline 0.2s ease-in-out;
}

.mock-row:hover {
  cursor: pointer;
  filter: brightness(0.85);
}

.mock-thumb {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--color-super-raised-bg), var(--color-raised-bg));
  flex-shrink: 0;
}

.mock-lines {
  flex: 1;
  display: grid;
  gap: 0.35rem;
}

.mock-line {
  height: 0.5rem;
  border-radius: var(--radius-max);
  background: var(--color-button-bg);
}

.mock-line.short {
  width: 45%;
  background: var(--color-raised-bg);
}

.mock-pill {
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-bold);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-max);
  background: var(--color-brand-highlight);
  color: var(--color-brand);
  white-space: nowrap;
}

/* ------------------------------------------------------------- download --- */

.download {
  border-top: 1px solid var(--color-button-bg);
}

.dl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--gap-lg);
  align-items: stretch;
}

@media (max-width: 900px) {
  .dl-grid {
    grid-template-columns: 1fr;
  }
}

.dl-main {
  background: var(--color-raised-bg);
  border-radius: var(--radius-lg);
  padding: clamp(var(--gap-xl), 3vw, 2.25rem);
  box-shadow: var(--shadow-raised), var(--shadow-inset);
  margin-bottom: 0;
}

.dl-main h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-heading);
}

.dl-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  margin: var(--gap-lg) 0;
}

.dl-meta .badge {
  font-size: var(--font-size-xs);
  color: var(--color-base);
  background-color: var(--color-bg);
}

.dl-meta .badge .mono {
  color: var(--color-contrast);
}

.dl-hash {
  margin: var(--gap-lg) 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-gray);
}

.dl-side {
  display: grid;
  gap: var(--gap-lg);
}

.dl-side .card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 0;
}

.dl-side .card > div:first-child h3 {
  margin-bottom: var(--gap-md);
}

.dl-steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--gap-lg);
}

.dl-steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--gap-lg);
  align-items: start;
}

.dl-steps li::before {
  content: counter(step);
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--color-brand-highlight);
  color: var(--color-brand);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  box-shadow: inset 0 0 0 transparent, 0 0 0 2px rgba(27, 217, 106, 0.35);
}

.dl-steps p {
  margin: 0;
  font-size: var(--font-size-sm);
}

.dl-steps strong {
  display: block;
  color: var(--color-contrast);
}

.callout {
  display: flex;
  gap: var(--gap-md);
  align-items: flex-start;
  padding: var(--gap-lg);
  border-radius: var(--radius-md);
  background: rgba(255, 163, 71, 0.08);
  box-shadow: inset 0 0 0 transparent, 0 0 0 2px rgba(255, 163, 71, 0.25);
  font-size: var(--font-size-sm);
  color: #dcb18a;
}

.callout strong {
  color: var(--color-orange);
}

.callout svg {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--color-orange);
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.reqs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--gap-md);
  font-size: var(--font-size-sm);
}

.reqs li {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-lg);
}

.reqs span:first-child {
  color: var(--color-gray);
}

.reqs span:last-child {
  color: var(--color-contrast);
  font-weight: var(--font-weight-bold);
  text-align: right;
}

/* ------------------------------------------------------------ community --- */

.community-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.community-card h2 {
  font-size: clamp(1.45rem, 2.6vw, 1.95rem);
  margin-bottom: var(--gap-md);
}

.community-card p {
  margin-bottom: 0;
}

.community-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-md);
  padding-left: clamp(1.5rem, 4vw, 3rem);
  border-left: 1px solid var(--color-button-bg);
}

.community-note {
  font-size: var(--font-size-xs);
  color: var(--color-gray);
}

@media (max-width: 780px) {
  .community-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .community-actions {
    width: 100%;
    padding-left: 0;
    padding-top: var(--gap-lg);
    border-left: none;
    border-top: 1px solid var(--color-button-bg);
  }
}

/* ------------------------------------------------------------------ faq --- */

.faq-list {
  display: grid;
  gap: var(--gap-md);
  max-width: 52rem;
}

details.faq {
  background: var(--color-raised-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  outline: 2px solid transparent;
  padding: 0 var(--gap-lg);
}

details.faq[open] {
  background: var(--color-super-raised-bg);
}

details.faq summary {
  cursor: pointer;
  list-style: none;
  padding: var(--gap-lg) 2rem var(--gap-lg) 0;
  font-weight: var(--font-weight-bold);
  color: var(--color-contrast);
  font-size: var(--font-size-nm);
  position: relative;
  transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, outline 0.2s ease-in-out;
}

details.faq summary:hover {
  filter: brightness(0.85);
}

details.faq summary::-webkit-details-marker {
  display: none;
}

/* omorphia's `.checkbox.collapsing svg` chevron, `.25s ease-in-out` */
details.faq summary::after {
  content: '';
  position: absolute;
  right: 0.15rem;
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--color-brand);
  border-bottom: 2px solid var(--color-brand);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.25s ease-in-out;
}

details.faq[open] summary::after {
  transform: translateY(-30%) rotate(225deg);
}

details.faq .faq-body {
  padding: 0 0 var(--gap-xl);
  font-size: var(--font-size-sm);
}

/* the launcher's modal entrance: `all .25s ease-in-out` */
details.faq[open] .faq-body {
  animation: rise-in 0.25s ease-in-out;
}

details.faq .faq-body p:last-child {
  margin-bottom: 0;
}

details.faq .faq-body ul {
  margin: 0 0 var(--gap-lg);
  padding-left: 1.15rem;
}

details.faq .faq-body li {
  margin-bottom: 0.35rem;
}

/* --------------------------------------------------------------- footer --- */

.footer {
  border-top: 1px solid var(--color-button-bg);
  padding-block: 3rem 2.5rem;
  background: var(--color-bg);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: var(--gap-xl);
  margin-bottom: var(--gap-xl);
}

@media (max-width: 780px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: span 2;
  }
}

.footer h4 {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-gray);
  margin-bottom: var(--gap-md);
  font-weight: var(--font-weight-bold);
}

.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gap-sm);
  font-size: var(--font-size-sm);
}

.footer ul a {
  color: var(--color-base);
}

.footer ul a:hover {
  color: var(--color-brand);
  text-decoration: none;
}

.footer-brand .brand {
  margin-bottom: var(--gap-lg);
}

.footer-brand p {
  font-size: var(--font-size-sm);
  color: var(--color-gray);
  max-width: 26rem;
}

.footer-bottom {
  border-top: 1px solid var(--color-button-bg);
  padding-top: var(--gap-xl);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-md) var(--gap-xl);
  justify-content: space-between;
  font-size: var(--font-size-xs);
  color: var(--color-gray);
}

.footer-bottom p {
  margin: 0;
}

/* ----------------------------------------------------------------- misc --- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

::selection {
  background: var(--color-brand-highlight);
  color: var(--color-contrast);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}