/* Stellody site styles, shared by every page.

   The palette is Stellody's own, taken from `stellody/ui/theme.py` rather than
   picked again here, so the site and the application cannot come to disagree
   about what colour Stellody is. The dark appearance is the one the site wears.
*/

:root {
  --base:     #0d1220;
  --mantle:   #0a0f1a;
  --crust:    #070b13;
  --surface0: #1b2438;
  --surface1: #2b3650;
  --surface2: #3a4767;
  --overlay0: #6b7891;
  --overlay1: #7f8ca6;
  --subtext0: #9aa7c0;
  --subtext1: #b9c4d8;
  --text:     #e6ecf7;
  --lavender: #a5b4fc;
  --blue:     #4c8dff;
  --sapphire: #69a1ff;
  --teal:     #5eead4;
  --green:    #34d399;
  --yellow:   #fbbf24;
  --peach:    #fb923c;
  --maroon:   #f2a2ad;
  --red:      #f87171;
  --mauve:    #c4b5fd;
  --pink:     #f0abfc;
  /* Stellody's accent is the blue the application paints its own with. The
     star colour is the one the rating control draws in. */
  --accent:        var(--blue);
  --accent-rgb:    76, 141, 255;
  --star:          var(--yellow);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--base);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Navigation */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 15, 26, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--surface0);
  padding: 0 2rem;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.nav-brand img { width: 30px; height: 30px; }
.nav-brand span { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; color: var(--accent); }

.nav-right { display: flex; align-items: center; gap: 1.75rem; }
.nav-right a.nav-link {
  color: var(--subtext1);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.18s;
}
.nav-right a.nav-link:hover { color: var(--text); }

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--accent);
  color: var(--crust);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.5rem 1.25rem;
  border-radius: 8px;
  transition: opacity 0.18s, transform 0.15s;
  white-space: nowrap;
}
.btn-primary:hover { opacity: 0.88; transform: translateY(-1px); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--surface0);
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.5rem 1.25rem;
  border-radius: 8px;
  border: 1px solid var(--surface1);
  transition: background 0.18s, transform 0.15s;
  white-space: nowrap;
}
.btn-secondary:hover { background: var(--surface1); transform: translateY(-1px); }

/* A button whose label is preceded by artwork rather than plain text. Sized in
   em against the button's own type, so the two stay in proportion if that type
   ever changes. At one line box the artwork could not be read, so the mark
   takes 1.8 times that and this button is deliberately taller than a text-only
   one beside it. display: block drops the inline descender space that would
   otherwise add a stray couple of pixels under the picture. */
.btn-secondary img {
  display: block;
  height: 2.7em;
  width: auto;
}


/* Hero */
.hero { max-width: 1100px; margin: 0 auto; padding: 5.5rem 2rem 3rem; text-align: center; }

.hero-icon {
  display: block;
  width: 168px;
  height: 168px;
  margin: 0 auto 2rem;
  filter: drop-shadow(0 22px 50px rgba(0, 0, 0, 0.5));
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  padding: 0.3rem 0.9rem;
  border-radius: 99px;
  margin-bottom: 2rem;
  letter-spacing: 0.04em;
}
.badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

h1 {
  font-size: clamp(2.5rem, 6vw, 4.1rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin-bottom: 1.4rem;
}
h1 .accent { color: var(--accent); }

.hero-desc {
  font-size: 1.1rem;
  color: var(--subtext1);
  max-width: 600px;
  margin: 0 auto 2.75rem;
  line-height: 1.75;
}
.hero-desc strong { color: var(--text); font-weight: 600; }

.hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 4.5rem; }
.hero-cta .btn-primary, .hero-cta .btn-secondary { font-size: 0.975rem; padding: 0.7rem 1.75rem; }

.shot {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--surface1);
  background: var(--crust);
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.06),
    0 36px 90px rgba(0, 0, 0, 0.7),
    0 0 120px rgba(var(--accent-rgb), 0.05);
}
.shot img { width: 100%; height: auto; display: block; }

/* Wider than the house default, because Stellody's window is: the shot is
   almost two and a half times as wide as it is tall, so the narrower frame
   left it a strip nobody could read the track list in. */
.hero-shot { max-width: 1100px; margin: 0 auto; }

/* Stats bar */
.stats-bar { background: var(--mantle); border-top: 1px solid var(--surface0); border-bottom: 1px solid var(--surface0); }
.stats-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem;
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.stat { text-align: center; padding: 0 1rem; }
.stat + .stat { border-left: 1px solid var(--surface1); }
.stat-value { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.03em; color: var(--accent); line-height: 1; margin-bottom: 0.4rem; }
.stat-label { font-size: 0.8rem; color: var(--subtext0); font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; }

/* Section wrapper */
.section { max-width: 1100px; margin: 0 auto; padding: 5.5rem 2rem; }
.section-label {
  display: inline-block;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.section-title { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; margin-bottom: 1rem; }
.section-sub { font-size: 1.025rem; color: var(--subtext1); max-width: 560px; line-height: 1.75; margin-bottom: 3.5rem; }

/* Features grid */
.features-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(305px, 1fr)); gap: 1.25rem; }
.feat {
  background: var(--mantle);
  border: 1px solid var(--surface0);
  border-radius: 16px;
  padding: 1.75rem;
  transition: border-color 0.2s, transform 0.2s;
}
.feat:hover { border-color: var(--surface2); transform: translateY(-3px); }
.feat-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
  flex-shrink: 0;
}
.ic-green  { background: rgba(166,227,161,0.15); color: var(--green); }
.ic-red    { background: rgba(243,139,168,0.15); color: var(--red); }
.ic-blue   { background: rgba(137,180,250,0.15); color: var(--blue); }
.ic-teal   { background: rgba(148,226,213,0.15); color: var(--teal); }
.ic-peach  { background: rgba(250,179,135,0.15); color: var(--peach); }
.ic-sapp   { background: rgba(116,199,236,0.15); color: var(--sapphire); }
.ic-lav    { background: rgba(180,190,254,0.15); color: var(--lavender); }
.ic-yellow { background: rgba(249,226,175,0.15); color: var(--yellow); }
.ic-mauve  { background: rgba(203,166,247,0.15); color: var(--mauve); }
.ic-pink   { background: rgba(245,194,231,0.15); color: var(--pink); }
/* A tenth card would sit alone on a fourth row, so it spans the grid and
   lays out horizontally, reading as a closing note rather than a leftover. */
.feat-wide { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.25rem; }
.feat-wide .feat-icon { flex: 0 0 auto; margin-bottom: 0; }
.feat-wide .feat-wide-body { display: flex; flex-direction: column; gap: 0.35rem; }
.feat-wide h3 { margin: 0; }
.feat-wide p { margin: 0; }
@media (max-width: 700px) {
  .feat-wide { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}
.feat h3 { font-size: 0.975rem; font-weight: 600; color: var(--text); margin-bottom: 0.5rem; }
.feat p { font-size: 0.875rem; color: var(--subtext0); line-height: 1.65; }

.divider { max-width: 1100px; margin: 0 auto; height: 1px; background: var(--surface0); }

/* Split section (text + screenshot) */
.split-band { background: var(--mantle); border-top: 1px solid var(--surface0); border-bottom: 1px solid var(--surface0); }
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.split-grid .split-text p { color: var(--subtext1); font-size: 1rem; line-height: 1.75; margin-bottom: 1.25rem; }
.split-grid .split-text ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.5rem; }
.split-grid .split-text li { font-size: 0.925rem; color: var(--subtext1); line-height: 1.55; padding-left: 1.5rem; position: relative; }
.split-grid .split-text li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent);
}

/* Code block */
.code-block { background: var(--crust); border: 1px solid var(--surface0); border-radius: 14px; overflow: hidden; }
.code-block-head {
  background: var(--surface0);
  padding: 0.55rem 1rem;
  font-size: 0.775rem;
  color: var(--subtext0);
  font-family: 'JetBrains Mono', monospace;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--surface1);
}
.code-block pre {
  padding: 1.25rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.81rem;
  line-height: 1.8;
  color: var(--text);
  overflow-x: auto;
}
.tc { color: var(--overlay1); }
.tk { color: var(--blue); }
.ta { color: var(--green); }
.tf { color: var(--peach); }
.ts { color: var(--teal); }

.cli-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }

/* Architecture */
.arch-figure {
  display: block;
  width: 100%;
  max-width: 880px;
  margin: 1.75rem auto 0;
  background: var(--mantle);
  border: 1px solid var(--surface0);
  border-radius: 14px;
  padding: 1.75rem;
}
.arch-figure svg { width: 100%; height: auto; display: block; }

/* Install */
.install-band { background: var(--mantle); border-top: 1px solid var(--surface0); border-bottom: 1px solid var(--surface0); }
.install-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.install-grid .install-text p { color: var(--subtext1); font-size: 0.95rem; line-height: 1.7; margin-bottom: 1.75rem; }
.install-grid .install-text .note { margin-top: 1.25rem; font-size: 0.8rem; color: var(--overlay1); }
code.inline { font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; color: var(--peach); }

/* Download */
#download .section-sub { margin-bottom: 1.25rem; }
.dl-version {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  margin-top: 4px;
  font-size: 14px;
  color: var(--accent);
  border: 1px solid var(--surface1);
  border-radius: 999px;
  padding: 4px 14px;
}
.downloads {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 28px;
}
.dl-card {
  background: var(--crust);
  border: 1px solid var(--surface0);
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dl-card .ico { font-size: 30px; }
.dl-card h3 { margin: 4px 0 0; font-size: 18px; font-weight: 600; }
.dl-card .req { color: var(--subtext0); font-size: 13px; margin: 0; }
.dl-card .btn-primary { margin: 14px auto 4px; }
.dl-card .meta {
  color: var(--subtext0);
  font-size: 12.5px;
  min-height: 1.2em;
  margin: 0;
}
.dl-card .how { color: var(--subtext0); font-size: 13px; margin: 8px 0 0; }
.dl-card code {
  background: var(--surface0);
  border: 1px solid var(--surface1);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--peach);
}
.dl-links {
  text-align: center;
  color: var(--subtext0);
  font-size: 14px;
  margin: 18px 0 0;
}
.dl-links a { color: var(--accent); text-decoration: none; }
.dl-links a:hover { text-decoration: underline; }

/* Footer */
footer { border-top: 1px solid var(--surface0); padding: 3rem 2rem; }
.footer-inner { max-width: 1100px; margin: 0 auto; }
.footer-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 2rem; }
.footer-brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.footer-brand img { width: 26px; height: 26px; }
.footer-brand span { font-size: 1rem; font-weight: 700; color: var(--subtext1); }
.footer-links { display: flex; gap: 1.75rem; flex-wrap: wrap; }
.footer-links a { color: var(--subtext0); text-decoration: none; font-size: 0.875rem; transition: color 0.18s; }
.footer-links a:hover { color: var(--text); }
.footer-bottom { border-top: 1px solid var(--surface0); padding-top: 1.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; }
.footer-bottom p { font-size: 0.8rem; color: var(--overlay1); }
.footer-bottom .chips { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.chip { background: var(--surface0); color: var(--subtext0); font-size: 0.72rem; font-weight: 500; padding: 0.2rem 0.6rem; border-radius: 4px; font-family: 'JetBrains Mono', monospace; }

/* Screenshot caption */
.shot-caption { text-align: center; font-size: 0.82rem; color: var(--overlay1); margin-top: 0.85rem; }

/* Responsive */
@media (max-width: 768px) {
  .split-grid, .install-grid, .cli-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 640px) {
  nav { padding: 0 1rem; }
  .nav-right .nav-link { display: none; }
  .hero { padding: 3rem 1.25rem 2rem; }
  .section { padding: 3.5rem 1.25rem; }
  .features-grid { grid-template-columns: 1fr; }
  .stat + .stat { border-left: none; border-top: 1px solid var(--surface1); }
  .stats-inner { flex-direction: column; gap: 1.25rem; }
}

/* Entrance animation */
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.fade { animation: fadeUp 0.52s ease both; }
.d1 { animation-delay: 0.08s; }
.d2 { animation-delay: 0.18s; }
.d3 { animation-delay: 0.28s; }
.d4 { animation-delay: 0.38s; }

/* Prose pages (why.html) */
.prose p {
  color: var(--subtext1);
  font-size: 1.025rem;
  max-width: 820px;
  line-height: 1.75;
  margin-bottom: 1.25rem;
}
.prose a { color: var(--accent); text-decoration: none; }
.prose a:hover { text-decoration: underline; }
.cta-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }