/* ==========================================================================
   BeepLoop site — white, libadwaita-flavored, matching the app's palette.
   Fonts are bundled (variable Ubuntu + Ubuntu Mono), no external requests.
   ========================================================================== */

@font-face {
  font-family: "Ubuntu";
  src: url("../fonts/Ubuntu-var.woff2") format("woff2-variations");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ubuntu";
  src: url("../fonts/Ubuntu-Italic-var.woff2") format("woff2-variations");
  font-weight: 100 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Ubuntu Mono";
  src: url("../fonts/UbuntuMono-var.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* sampled from the app */
  --accent:      #ee6207;            /* playhead / sliders */
  --accent-wash: rgba(238, 98, 7, .08);
  --rail-red:    #ff7b63;
  --rail-orange: #ffa348;
  --rail-yellow: #f8e45c;
  --rail-green:  #8ff0a4;
  --rail-blue:   #738eb0;

  --bg:          #ffffff;            /* editor area */
  --bg-panel:    #ebebeb;            /* sidebar */
  --bg-canvas:   #f4f4f4;            /* modular canvas */
  --dot:         rgba(0, 0, 0, .13); /* modular dot grid */
  --ink:         #2e2e2e;
  --ink-soft:    #6e6a66;
  --ink-faint:   #a3a09d;
  --line:        rgba(0, 0, 0, .12);
  --shadow:      0 1px 2px rgba(0,0,0,.05), 0 10px 30px -12px rgba(0,0,0,.16);
  --shadow-big:  0 2px 4px rgba(0,0,0,.06), 0 26px 60px -18px rgba(0,0,0,.28);

  --code-bg:     #262220;
  --code-ink:    #f2ebe4;

  --radius: 12px;
  --font: "Ubuntu", system-ui, sans-serif;
  --mono: "Ubuntu Mono", ui-monospace, monospace;
}

/* Dark mode follows the browser — there is no toggle and no stored
   preference, so every dark rule in this file lives in a
   prefers-color-scheme block (there is one more at the end). */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #1e1e1e;
    --bg-panel:    #161616;
    --bg-canvas:   #242424;
    --dot:         rgba(255, 255, 255, .10);
    --ink:         #f0eeec;
    --ink-soft:    #b0aca8;
    --ink-faint:   #797572;
    --line:        rgba(255, 255, 255, .12);
    --shadow:      0 1px 2px rgba(0,0,0,.4), 0 10px 30px -12px rgba(0,0,0,.6);
    --shadow-big:  0 2px 4px rgba(0,0,0,.5), 0 26px 60px -18px rgba(0,0,0,.8);
    --accent-wash: rgba(238, 98, 7, .14);
    --code-bg:     #121010;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* main grows, the footer sits at the bottom of the viewport on a short
     page instead of below it — the home page then needs no scrolling at
     all to reach the license link. */
  min-height: 100svh;
  display: flex; flex-direction: column;
}
main { flex: 1 0 auto; display: flex; flex-direction: column; }

img { max-width: 100%; display: block; }
a { color: inherit; }
code { font-family: var(--mono); background: var(--accent-wash); padding: .08em .35em; border-radius: 5px; font-size: .92em; }
::selection { background: var(--accent); color: #fff; }

/* The modular-canvas dot grid. Everything else on the site is plain
   white (or plain --bg in dark mode); this is worn by the closing card
   on the home page and nothing else. */
.grid-bg {
  background-image: radial-gradient(var(--dot) 1.2px, transparent 1.2px);
  background-size: 24px 24px;
}

/* ---------- stacked wordmark ---------- */
.brand-mark {
  display: inline-flex; flex-direction: column;
  font-weight: 700; line-height: .94;
  font-size: 1.05rem; text-align: left;
}
.brand-mark span:last-child { color: var(--accent); }
.brand-mark.small { font-size: .95rem; }
.brand-mark.big { font-size: clamp(2.4rem, 6vw, 3.8rem); }

/* pre-1.0, and saying so */
.beta-tag {
  display: inline-block; vertical-align: middle;
  font-size: .64rem; font-weight: 700; 
  text-transform: uppercase; line-height: 1;
  padding: 3px 7px; border-radius: 999px;
  background: var(--accent-wash); color: var(--accent);
}
.brand { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- scroll progress ---------- */
.scroll-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 100; }
#scroll-progress-bar {
  display: block; height: 100%; width: 0;
  background: var(--accent);
  transition: width .1s linear;
}

/* ---------- nav ---------- */
.nav { position: fixed; top: 3px; left: 0; right: 0; z-index: 90; transition: background .3s, box-shadow .3s; }
.nav.scrolled {
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
.nav-inner {
  max-width: 1140px; margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; gap: 20px;
}
.brand { text-decoration: none; }  /* layout: see .beta-tag above */
.nav-links { margin-left: auto; display: flex; gap: 2px; align-items: center; }
.nav-links a {
  text-decoration: none; color: var(--ink-soft); font-size: .92rem; font-weight: 500;
  padding: 6px 12px; border-radius: 99px; transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--ink); background: var(--accent-wash); }
/* Not a link to a page — it hands over the .deb. Looks the part. */
.nav-links .nav-dl {
  display: inline-flex; align-items: center; gap: 7px;
  margin-left: 8px; padding: 7px 15px;
  background: var(--accent); color: #fff; font-weight: 600;
  /* box-shadow: 0 6px 16px -7px rgba(238, 98, 7, .7); */
}
.nav-links .nav-dl:hover { background: #d55606; color: #fff; }

.round-btn {
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; transition: transform .2s, border-color .2s;
  flex: none;
}
.round-btn:hover { transform: rotate(12deg) scale(1.07); border-color: var(--accent); }

/* ---------- home ----------
   One card, vertically centred in the viewport, and nothing else on the
   page. It is also the only thing on the site wearing the dot grid. */
.home {
  flex: 1; display: grid; place-items: center;
  padding: 104px 24px 48px;
}
.home-card {
  width: min(680px, 100%);
  border: 1px solid var(--line); border-radius: calc(var(--radius) + 8px);
  background-color: var(--bg-canvas);
  box-shadow: var(--shadow);
  padding: clamp(36px, 6vw, 64px) 24px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.home-logo {
  width: clamp(120px, 22vw, 176px); height: auto; margin-bottom: 22px;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.16));
}
.home-title {
  font-size: clamp(1.8rem, 4.4vw, 2.8rem);
  line-height: 1.15; font-weight: 700;
  margin-bottom: 28px;
}
.home-title em { font-style: normal; color: var(--accent); }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; font-weight: 500;
  padding: 12px 24px; border-radius: 99px; font-size: 1rem;
  transition: transform .2s, box-shadow .2s;
}
.btn-primary {
  background: var(--accent); color: #fff;
  /* box-shadow: 0 8px 22px -8px rgba(238, 98, 7, .55); */
}
.btn-primary:hover { transform: translateY(-2px); /* box-shadow: 0 13px 28px -8px rgba(238,98,7,.6); */ }
.btn-ghost { border: 1px solid var(--line); color: var(--ink-soft); background: var(--bg); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- full-height sections ---------- */
/* No scroll snapping: the pages are short now, and a mandatory snap
   container with only the footer aligned scrolled every one of them down
   on load. */
.page {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: 84px; padding-bottom: 40px;
  box-sizing: border-box;
}

/* ---------- sections ---------- */
.section { max-width: 1140px; margin: 0 auto; padding: 96px 24px 24px; }
.section.page { padding: 84px 24px 40px; }
.section-head { max-width: 680px; margin-bottom: 44px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 {
  font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.12;
  font-weight: 700;
}
.lede { color: var(--ink-soft); font-size: 1.05rem; font-weight: 300; margin-top: 14px; }

/* ---------- screenshots carousel ---------- */
/* the app's track rail, standing in for a whole row of feature chips */
.tour-rail {
  display: block; width: 30px; height: 4px; border-radius: 2px;
  background: var(--tint, var(--accent)); margin: 0 auto 14px;
}

.section-shots { max-width: none; padding: 80px 24px 36px; text-align: center; }
.shots-head { max-width: 680px; margin: 0 auto 20px; }
.shots-head h1 {
  font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.1;
  font-weight: 700;
}
.shots-head kbd {
  font-family: var(--mono); font-size: .82em; border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px;
  background: var(--bg-canvas);
}

.carousel {
  position: relative; max-width: 1240px; margin: 0 auto; width: 100%;
  display: flex; align-items: center; gap: 14px;
}
/* The track is a plain scroll-snapping overflow container: swipe and
   drag work with no JS, the arrows below just scroll it. */
.carousel-track {
  /* offsetParent for the slides: main.js reads slide.offsetLeft to scroll,
     and that has to be measured against the track, not the .carousel row
     (which is offset by the prev arrow). */
  position: relative;
  flex: 1; min-width: 0;
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none;
  border-radius: var(--radius);
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.slide {
  flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.slide-shot { width: 100%; display: flex; justify-content: center; }
.slide img {
  border-radius: var(--radius);
  /* box-shadow: var(--shadow-big); */
  /* max-height: 50svh; */
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.slide figcaption { max-width: 560px; }
.slide figcaption h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: 6px;
}
.slide figcaption p { color: var(--ink-soft); font-weight: 300; font-size: 1rem; }

.carousel-arrow { flex: none; width: 44px; height: 44px; box-shadow: var(--shadow); }
.carousel-arrow:hover { transform: scale(1.08); }   /* no rotate: it is a chevron */
.carousel-arrow[disabled] { opacity: .3; pointer-events: none; }

.carousel-dots {
  display: flex; gap: 9px; justify-content: center; margin-top: 20px;
}
.carousel-dots .dot {
  width: 26px; height: 5px; padding: 0; border: 0; border-radius: 3px;
  background: var(--line); cursor: pointer;
  transition: background .25s ease, width .25s ease;
}
.carousel-dots .dot:hover { background: var(--ink-faint); }
.carousel-dots .dot[aria-selected="true"] { background: var(--tint, var(--accent)); width: 40px; }

/* ---------- chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.chip {
  border: 1px solid var(--line); background: var(--bg-canvas);
  padding: 7px 15px; border-radius: 99px; font-size: .88rem; font-weight: 500;
  transition: border-color .2s, color .2s, transform .2s;
}
.chip:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.hint-hover { display: block; margin-top: 6px; font-size: .88rem; color: var(--ink-faint); }
.section-sound { padding: 24px 24px 96px; text-align: center; }
.section-sound .section-head { margin-bottom: 28px; }

/* ---------- download page ---------- */
.section-download { max-width: none; padding: 150px 24px 96px; text-align: center; min-height: 88vh; }
.download-note { margin-top: 26px; color: var(--ink-faint); font-size: .9rem; }
.dl-version { display: inline-block; margin-top: 10px; font-size: .88rem; color: var(--ink-faint); }

/* distro combo — styled after the app's instrument chooser */
.combo { position: relative; max-width: 480px; margin: 0 auto; text-align: left; }
.combo-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 18px; cursor: pointer;
  font: 500 1rem var(--font); color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: border-color .2s, box-shadow .2s;
}
.combo-btn:hover, .combo.open .combo-btn { border-color: var(--accent); }
.combo-current { display: flex; align-items: center; gap: 10px; color: inherit; }
.combo-current.placeholder-state { color: var(--ink-soft); }
.combo-chevron { transition: transform .25s ease; flex: none; color: var(--ink-soft); }
.combo.open .combo-chevron { transform: rotate(180deg); }

.combo-list {
  position: absolute; inset: calc(100% + 8px) 0 auto 0; z-index: 50;
  list-style: none; padding: 6px; margin: 0;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-big);
}
.combo-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px; cursor: pointer;
  font-size: .96rem; font-weight: 500;
}
.combo-list li em { margin-left: auto; font-style: italic; font-weight: 300; font-size: .82rem; color: var(--ink-faint); }
.combo-list li i { font-style: normal; font-size: .7rem; color: var(--tint, var(--accent)); }
.combo-list li:hover, .combo-list li.active { background: var(--accent-wash); }
.combo-list li[aria-selected="true"] { background: var(--accent); color: #fff; }
.combo-list li[aria-selected="true"] em, .combo-list li[aria-selected="true"] i { color: rgba(255,255,255,.8); }

.combo-hint { margin-top: 10px; font-size: .84rem; color: var(--ink-soft); text-align: center; }

/* result panels */
.dl-panels { max-width: 480px; margin: 22px auto 0; }
.dl-panel {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 30px 28px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  animation: panel-in .3s cubic-bezier(.2,.6,.2,1);
}
.dl-panel[hidden] { display: none; }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } }
.dl-panel h3 { font-size: 1.14rem;  }
.dl-placeholder { color: var(--ink-faint); font-style: italic; padding: 14px 0; }
.dl-note { color: var(--ink-soft); font-size: .92rem; }
.dl-btn { flex-direction: column; gap: 2px; line-height: 1.3; }
.dl-line { display: inline-flex; align-items: center; gap: 8px; }
.dl-size { font-size: .72rem; font-weight: 400; opacity: .85; }
.dl-build { font-size: .9rem; color: var(--ink-soft); margin-top: 8px; }
.dl-fine { font-size: .8rem; margin-top: 8px; color: var(--ink-faint); max-width: 100%; overflow-wrap: anywhere; }

/* ---------- license page ---------- */
.section-license { padding-top: 140px; padding-bottom: 90px; }
.section-license h3 { font-size: 1.16rem; margin-bottom: 8px; }
.section-license p { color: var(--ink-soft); font-size: .96rem; }
.section-license a { text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* the two platform cards — free vs paid, side by side on purpose */
.lic-plats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  max-width: 900px; margin: 0 auto 26px;
}
.lic-plat {
  position: relative; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 24px 22px;
}
.lic-plat-paid { border-color: var(--accent); }
.lic-plat-tag {
  display: inline-block; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px; margin-bottom: 10px;
}
.lic-plat-free .lic-plat-tag { background: rgba(38, 162, 105, .13); color: #1a7f4f; }
.lic-plat-paid .lic-plat-tag { background: var(--accent-wash); color: var(--accent); }
.lic-plat p + p { margin-top: 10px; }
.lic-plat-note { font-size: .88rem; color: var(--ink-faint); }
.lic-price {
  font-size: 1.9rem; font-weight: 700;
  color: var(--ink) !important; line-height: 1.1; margin: 2px 0 8px;
}
.lic-price-soon { font-size: 1.05rem; font-weight: 600; color: var(--ink-soft) !important; }

/* open-source components */
.lic-open { max-width: 900px; margin: 0 auto 26px; }
.lic-open-head { text-align: center; }
.lic-open-lede {
  text-align: center; max-width: 620px; margin: 0 auto 20px;
  color: var(--ink-soft); font-size: .95rem;
}
.lic-open-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.lic-open-item {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px;
}
.lic-open-item h4 { font-size: 1rem; margin: 8px 0 5px; }
.lic-open-item p { font-size: .89rem; color: var(--ink-soft); }
.lic-badge {
  display: inline-block; font-family: var(--mono); font-size: .72rem;
  font-weight: 700; padding: 2px 8px;
  border-radius: 999px; background: rgba(38, 162, 105, .13); color: #1a7f4f;
}

.lic-code { margin: 12px 0 4px; }
.lic-code code {
  display: inline-block; background: var(--code-bg); color: var(--code-ink);
  padding: 9px 14px; border-radius: 8px; font-size: .88rem;
}

/* may / may not */
.lic-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  max-width: 900px; margin: 0 auto 26px;
}
.lic-col {
  background: var(--bg-canvas); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px;
}
.lic-col-head { display: flex; align-items: center; gap: 8px; }
.lic-col-head::before {
  font-size: .95rem; font-weight: 700; width: 22px; height: 22px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
}
.lic-yes::before { content: "✓"; background: rgba(38, 162, 105, .16); color: #1a7f4f; }
.lic-no::before  { content: "✕"; background: rgba(224, 27, 36, .13); color: #c01c28; }

.lic-list { list-style: none; margin-top: 12px; padding: 0; }
.lic-list li {
  position: relative; padding-left: 17px; margin-bottom: 10px;
  font-size: .93rem; color: var(--ink-soft); line-height: 1.55;
}
.lic-list li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--ink-faint);
}
.lic-list li b { color: var(--ink); font-weight: 600; }
.lic-list-tight li { margin-bottom: 7px; }
.lic-ask { margin-top: 14px; font-size: .87rem; color: var(--ink-faint); }

/* the "your work is yours" reassurance block */
.lic-highlight {
  max-width: 900px; padding: 26px 28px;
  border-radius: var(--radius); border: 1px solid var(--accent);
  background: var(--accent-wash);
}
.lic-highlight p + p { margin-top: 10px; }

.lic-contrib {
  max-width: 900px; margin: 0 auto 40px; padding: 24px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-canvas);
}
.lic-contrib > p:first-of-type { margin-bottom: 4px; }

/* FAQ — plain disclosure widgets, no JS */
.lic-faq { max-width: 900px; margin: 0 auto; }
.lic-faq-head { text-align: center; margin-bottom: 16px; }
.lic-faq details {
  border-bottom: 1px solid var(--line); padding: 2px 4px;
}
.lic-faq details:first-of-type { border-top: 1px solid var(--line); }
.lic-faq summary {
  cursor: pointer; list-style: none; padding: 15px 30px 15px 2px;
  font-weight: 500; position: relative; color: var(--ink);
  transition: color .2s ease;
}
.lic-faq summary::-webkit-details-marker { display: none; }
.lic-faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint);
  transform: rotate(45deg); transition: transform .25s ease, border-color .2s ease;
}
.lic-faq summary:hover { color: var(--accent); }
.lic-faq summary:hover::after { border-color: var(--accent); }
.lic-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.lic-faq details p { padding: 0 30px 18px 2px; font-size: .93rem; }

.lic-cta { max-width: 900px; margin: 44px auto 0; text-align: center; }
.lic-legal { font-size: .93rem; }
.lic-buttons { display: flex; gap: 12px; justify-content: center; margin-top: 18px; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 36px 24px 44px; background: var(--bg); }
.footer-inner {
  max-width: 1140px; margin: 0 auto; text-align: center; color: var(--ink-soft);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.footer .fine { font-size: .84rem; color: var(--ink-faint); }
.footer .foot-link { color: var(--accent); font-weight: 500; text-underline-offset: 2px; }

/* ---------- reveal on scroll ---------- */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1);
}
.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .ticker-track { animation: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .nav-links { gap: 0; }
  .nav-links a:not(.nav-dl) { padding: 6px 9px; font-size: .88rem; }
  .carousel-arrow { display: none; }   /* swipe is the gesture here */
  .kb-hint { display: none; }          /* ...and there are no arrow keys */
  .slide img { max-height: 42svh; }
  .lic-plats, .lic-cols, .lic-open-grid { grid-template-columns: 1fr; }
  .section-license { padding-top: 118px; }
  .lic-buttons { flex-direction: column; align-items: stretch; }
  .section { padding-top: 72px; }
  .home { padding-top: 116px; }
}

/* ---------- dark mode (see the token block at the top) ---------- */
@media (prefers-color-scheme: dark) {
  .home-logo { filter: drop-shadow(0 16px 32px rgba(0,0,0,.5)); }
  .lic-plat-free .lic-plat-tag { color: #63d19a; }
  .lic-badge { color: #63d19a; }
  .lic-yes::before { color: #63d19a; }
  .lic-no::before  { color: #ff7b63; }
}