/* CleeCode — cleecode.marunja.com
   Hand-written, no framework, no CDN, no JavaScript.
   Palette sampled from src/theme.rs: CLEECODE (dark) and CLEECODE_LIGHT. */

:root {
  /* The CleeCode theme, as the editor draws it. */
  --bg:          #181818;
  --bg-alt:      #1e1e1e;   /* surface_dim */
  --surface:     #2d2d2d;   /* surface */
  --line:        #333333;
  --text:        #d8d8d8;
  --text-muted:  #9a9a9a;   /* text_muted / Gray */
  --text-dim:    #6f6f6f;   /* text_dim / DarkGray */
  --accent:      #4ec9d4;   /* accent / Cyan */
  --accent-deep: #2b8f99;
  --on-accent:   #101010;
  --folder:      #78aaff;   /* folder */
  --selection:   #3c5a82;   /* selection */
  --changed:     #7cd97c;   /* changed_line / LightGreen */
  --code-bg:     #101010;
  --shadow:      0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 44px rgba(0, 0, 0, 0.55);

  /* The hero's terminal frame. The body sits darker than the page, the way an
     editor pane sits inside its chrome; the bar is the surface colour above it. */
  --term-bg:   #101010;
  --term-bar:  #242424;
  --term-line: #333333;
  --dot-1:     #7a5b5b;   /* the stoplight, desaturated until it is palette */
  --dot-2:     #7a6f52;
  --dot-3:     #5a7a60;

  /* The house faces first — Quicksand for the marks, Open Sans for prose,
     JetBrains Mono for code, as marunja.com uses them. They are named, not
     fetched: no CDN, so a machine without them falls through to the system
     stack rather than the page waiting on a font server. */
  --house-face: "Quicksand", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  --sans: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap: 46rem;
  --wrap-wide: 76rem;

  /* The hero lockup measured in one place: the name's size, the emblem taken
     from it, and the gap between them. The tagline indents itself by the last
     two, so it keeps starting at the "C" and not under the emblem — a literal
     number there would have to be re-measured every time the mark changes. */
  --mark-size: clamp(2.1rem, 7vw, 3rem);
  --emblem-size: calc(var(--mark-size) * 1.2);
  --emblem-gap: calc(var(--mark-size) * 0.3);

  color-scheme: dark;
}

/* Self-hosted, no CDN: the two families marunja.com's header actually loads.
   Both are variable fonts — one file per family serves every weight below.
   License: SIL OFL 1.1, see fonts/OFL-NOTICE.txt for both copyright lines. */
@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("fonts/quicksand-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/opensans-variable.woff2") format("woff2");
}

@media (prefers-color-scheme: light) {
  :root {
    /* CleeCode Light: the same editor on a white desk. */
    --bg:          #fafafa;
    --bg-alt:      #f1f2f4;
    --surface:     #e8eaee;
    --line:        #d6d9de;
    --text:        #202226;
    --text-muted:  #585e66;
    --text-dim:    #868c94;
    --accent:      #005c99;
    --accent-deep: #004a7c;
    --on-accent:   #ffffff;
    --folder:      #2660a8;
    --selection:   #c6d8f0;
    --changed:     #148446;
    --code-bg:     #eceef2;
    --shadow:      0 1px 0 rgba(0, 0, 0, 0.03), 0 14px 34px rgba(20, 24, 32, 0.14);

    /* On paper the window inverts its relationship to the page: the body is
       the lighter surface and the page around it carries the tint. */
    --term-bg:   #ffffff;
    --term-bar:  #e4e7ec;
    --term-line: #d0d4da;
    --dot-1:     #c39d9d;
    --dot-2:     #c2b795;
    --dot-3:     #9dbca8;

    color-scheme: light;
  }
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a { color: var(--accent); }
a:hover { color: var(--text); }

code, pre, kbd {
  font-family: var(--mono);
}

code {
  font-size: 0.9em;
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.08em 0.34em;
  color: var(--folder);
  word-break: break-word;
}

pre {
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 1rem 1.15rem;
  overflow-x: auto;
  line-height: 1.55;
  font-size: 0.92rem;
}

pre code {
  background: none;
  border: 0;
  padding: 0;
  color: var(--text);
  font-size: inherit;
  word-break: normal;
}

kbd {
  font-size: 0.82em;
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 0.1em 0.42em;
  color: var(--text);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  background: var(--accent);
  color: var(--on-accent);
  padding: 0.5rem 0.9rem;
  border-radius: 5px;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 1.35rem;
}

.wrap-wide {
  max-width: var(--wrap-wide);
  margin: 0 auto;
  padding: 0 1.35rem;
}

/* ---- Topbar: the house above the product ----
   These colours are Marunja's own, not CleeCode's: the bar belongs to the house,
   the page below it belongs to the editor. Values taken from marunja.css. */

.topbar {
  --m-bg:     #0d1420;
  --m-line:   #2c3c52;
  --m-text:   #f0f6fc;
  --m-text-2: #aabbce;
  --m-text-3: #7a8fa8;
  --m-brand:  #3b82f6;
  --m-tip:    #34d399;

  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--m-bg) 90%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--m-line);
}

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .topbar { background: var(--m-bg); }
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 64px;             /* marunja.com's --vp-nav-height, to the pixel */
  padding: 0 8px 0 24px;    /* marunja.com's .wrapper padding below 768px */
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .topbar-inner { padding: 0 32px; }  /* marunja.com's .wrapper padding at/above 768px */
}

.brand {
  margin: 0;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.brand a { text-decoration: none; }

/* The house mark, exactly as marunja.com's VPNavBarTitle draws it: a 28×28
   logo with a 10px gutter, then Quicksand 700/17px in a blue-to-green
   gradient. Colour first, so a browser without background-clip still reads it. */
.house-mark {
  display: flex;
  align-items: center;
  font-family: var(--house-face);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--m-brand);
  background: linear-gradient(135deg, var(--m-brand), var(--m-tip));
  -webkit-background-clip: text;
  background-clip: text;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .house-mark { color: transparent; }
}

.house-mark:hover { opacity: 0.82; }

.house-logo {
  margin-right: 10px;
  height: 28px;
  width: 28px;
  filter: drop-shadow(0 2px 6px rgba(59, 130, 246, 0.3));
}

.brand .sep {
  color: var(--m-text-3);
  font-weight: 400;
  margin: 0 0.5rem;
  font-family: var(--house-face);
  font-size: 17px;
}

.product-mark {
  display: flex;
  align-items: center;
  font-family: var(--house-face);
  font-size: 17px;
  color: var(--m-text);
  font-weight: 600;
}

/* The site's own mark beside its name, the way the house logo sits beside
   Marunja's — a size down, since this is the product under the house. */
.product-logo {
  margin-right: 8px;
  height: 24px;
  width: 24px;
}

.product-mark:hover { color: var(--m-tip); }

/* Nav links, as marunja.com's VPNavBarMenuLink draws them: base (Open Sans)
   14px/500, 12px of horizontal padding standing in for the gap. */
.topnav {
  display: flex;
  align-items: center;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
}

.topnav a {
  padding: 0 12px;
  color: var(--m-text);
  text-decoration: none;
  white-space: nowrap;
}

.topnav a:hover { color: var(--m-brand); }

/* The bar is navigation, not chrome to fight with on a phone. */
@media (max-width: 46rem) {
  .topnav { display: none; }
}

/* ---- Hero ---- */

/* The sticky bar must not sit on top of the heading an anchor just jumped to. */
[id] { scroll-margin-top: 3.75rem; }

.hero {
  padding: 3.6rem 0 3rem;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(78, 201, 212, 0.10), transparent 62%),
    var(--bg);
}

@media (prefers-color-scheme: light) {
  .hero {
    background:
      radial-gradient(120% 80% at 50% 0%, rgba(0, 92, 153, 0.08), transparent 62%),
      var(--bg);
  }
}

/* ---- The hero, inside a terminal window ----
   The frame is drawn, not pictured: no image, no script. It reads as the thing
   the product is — a window with panes in it — and it degrades to a plain dark
   card when the viewport gets too narrow to be a window at all. */

.hero > .wrap {
  /* A little wider than the prose column, so the frame has room around the
     text rather than squeezing it. */
  max-width: 54rem;
}

.term {
  max-width: 100%;
  border: 1px solid var(--term-line);
  border-radius: 10px;
  background: var(--term-bg);
  box-shadow: var(--shadow);
  overflow: hidden;   /* the ghost banner can never push the page sideways */
}

.term-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.85rem;
  background: var(--term-bar);
  border-bottom: 1px solid var(--term-line);
}

.term-dots {
  display: flex;
  gap: 0.42rem;
}

.term-dots i {
  width: 0.68rem;
  height: 0.68rem;
  border-radius: 50%;
  display: block;
}

/* Dimmed to the page rather than the stoplight: the frame is a hint, not a
   costume. Each keeps just enough hue to be recognised as the button it is. */
.term-dots i:nth-child(1) { background: var(--dot-1); }
.term-dots i:nth-child(2) { background: var(--dot-2); }
.term-dots i:nth-child(3) { background: var(--dot-3); }

.term-title {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text-dim);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Balances the dots so the title sits in the true centre of the bar. */
.term-pad {
  display: block;
  width: calc(0.68rem * 3 + 0.42rem * 2);
}

.term-body {
  position: relative;
  padding: 2.6rem 2rem 2.4rem;
}

/* The real SPLASH_BANNER from src/ui.rs, as a watermark: the program's own
   characters, at an opacity that reads as texture and never as text. Green
   because that is the colour draw_splash() paints it. */
.term-ghost {
  position: absolute;
  top: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
  font-family: var(--mono);
  /* Capped so it never grows past the frame, and shrinks with the viewport so
     the six lines stay one block instead of wrapping into noise. */
  font-size: min(1.28rem, 2.2vw);
  line-height: 1;
  white-space: pre;
  color: var(--changed);
  opacity: 0.028;
  pointer-events: none;
  user-select: none;
}

/* Dark ink on a white window carries further than light ink on black. */
@media (prefers-color-scheme: light) {
  .term-ghost { opacity: 0.02; }
}

.term-content {
  position: relative;   /* above the watermark */
  z-index: 1;
}

@media (max-width: 40rem) {
  .term-body { padding: 2rem 1.15rem 1.9rem; }
  .term-title { font-size: 0.72rem; }
}

@media (max-width: 26rem) {
  .term-bar { padding: 0.45rem 0.65rem; gap: 0.5rem; }
  .term-body { padding: 1.7rem 0.95rem 1.6rem; }
}

.wordmark {
  margin: 0 0 0.55rem;
  font-family: var(--house-face);
  font-size: var(--mark-size);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.1;
  /* The mark's own neon: a pale green core with the green halo behind it,
     the same light the icon gives off, so the name and the mark read as one
     object. Three shadows, tight to wide, is what makes glow instead of blur. */
  color: #86f7b1;
  text-shadow:
    0 0 6px rgba(74, 222, 128, 0.85),
    0 0 22px rgba(74, 222, 128, 0.5),
    0 0 55px rgba(34, 197, 94, 0.3);
}

.emblem {
  /* Back inline: the global img reset above says block, which dropped the
     name onto its own line under the mark instead of beside it. */
  display: inline-block;
  width: var(--emblem-size);
  height: var(--emblem-size);
  vertical-align: -0.22em;
  /* The whole gap, with no space character in the markup beside it: the
     tagline's indent is this plus the emblem's width, and a space nobody can
     measure would push the name past where the line below starts. */
  margin-right: var(--emblem-gap);
}

/* The words from the tab title, on the page itself: right under the wordmark —
   the one-line answer to "what is this", striped in the six bands of the 1977
   Apple logo, the same quotation the editor's default theme makes on the
   drawer handle. Hard stops, not a blend: the vintage mark is bands, and a
   smooth rainbow would be quoting something else. The bands run across the
   line, so the sentence walks the six colours as it reads. Colour first, so a
   browser without background-clip still reads it — the .house-mark pattern
   above. */
.tagline {
  /* Indented past the emblem so the sentence starts under the name's first
     letter, not under the mark: name and claim read as one stacked lockup. */
  margin: -0.35rem 0 0.9rem calc(var(--emblem-size) + var(--emblem-gap));
  font-family: var(--house-face);
  font-size: clamp(1.15rem, 3.4vw, 1.5rem);
  font-weight: 700;
  color: var(--m-brand, #3b82f6);
  letter-spacing: 0.01em;
  /* Shrunk to the words, or the bands would be measured against the column
     and the sentence would only ever walk the first half of them. */
  width: fit-content;
  background: linear-gradient(90deg,
    #61bb46 0 16.7%, #fdb827 16.7% 33.3%, #f5821f 33.3% 50%,
    #e03a3e 50% 66.7%, #963d97 66.7% 83.3%, #009ddc 83.3% 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .tagline { color: transparent; }
}

.identity {
  margin: 0 0 2.4rem;
  color: var(--text-muted);
  font-size: 1.02rem;
  max-width: 34rem;
}

.pitch h1 {
  margin: 0;
  font-family: var(--house-face);
  font-size: clamp(1.4rem, 4.4vw, 2.05rem);
  line-height: 1.32;
  font-weight: 700;
  letter-spacing: -0.005em;
  border-left: 3px solid var(--accent);
  padding-left: 1.1rem;
}

.pitch-tail {
  margin: 0.9rem 0 0;
  padding-left: calc(1.1rem + 3px);
  font-size: 1.02rem;
  color: var(--text);
}

.quiet {
  margin: 1.5rem 0 0;
  padding-left: calc(1.1rem + 3px);
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 40rem;
}

.quiet em {
  color: var(--text);
  font-style: normal;
  font-weight: 600;
}

.cta {
  margin: 2.4rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.button {
  display: inline-block;
  padding: 0.62rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-size: 0.97rem;
  font-weight: 600;
}

.button:hover {
  border-color: var(--accent);
  color: var(--text);
}

.button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.button.primary:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: var(--on-accent);
}

.version {
  margin: 1.5rem 0 0;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.version strong { color: var(--text-muted); }

/* ---- Demo ---- */

.demo {
  padding: 2.6rem 0 3.2rem;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
}

.demo img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

/* ---- Features ---- */

.feature {
  padding: 4rem 0;
  border-bottom: 1px solid var(--line);
}

.feature.alt { background: var(--bg-alt); }

.kicker {
  margin: 0 0 0.65rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
}

.feature h2,
.install h2 {
  margin: 0 0 1.4rem;
  font-family: var(--house-face);
  font-size: clamp(1.35rem, 3.6vw, 1.78rem);
  line-height: 1.32;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.feature p,
.install p {
  margin: 0 0 1.15rem;
}

.feature pre,
.install pre {
  margin: 0 0 1.15rem;
}

.note {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-muted);
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

.next {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-muted);
  background: var(--surface);
  border-left: 3px solid var(--changed);
  border-radius: 0 6px 6px 0;
  padding: 0.9rem 1.1rem;
}

.next strong { color: var(--text); }

figure {
  margin: 2rem 0;
}

figure img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

figcaption {
  margin-top: 0.8rem;
  font-size: 0.87rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Screenshots deserve more room than the prose column. */
@media (min-width: 62rem) {
  figure {
    width: min(var(--wrap-wide), 92vw);
    margin-left: calc(50% - min(var(--wrap-wide), 92vw) / 2);
    margin-right: 0;
  }
  figcaption {
    max-width: var(--wrap);
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---- Install ---- */

.install {
  padding: 4rem 0 4.5rem;
}

.install h3 {
  margin: 2.6rem 0 0.9rem;
  font-family: var(--house-face);
  font-size: 1.14rem;
  font-weight: 700;
}

.downloads {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.downloads li {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg-alt);
  padding: 0.95rem 1.1rem;
}

.downloads li > a {
  font-weight: 650;
  text-decoration: none;
  font-size: 1rem;
}

.downloads li > a:hover { text-decoration: underline; }

.downloads li > a span {
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--text-dim);
  margin-left: 0.35rem;
}

.downloads li p {
  margin: 0.35rem 0 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-muted);
}

@media (min-width: 40rem) {
  .downloads { grid-template-columns: 1fr 1fr; }
}

/* ---- Footer ---- */

footer {
  padding: 2.8rem 0 3.4rem;
  border-top: 1px solid var(--line);
  background: var(--bg-alt);
}

footer p { margin: 0 0 0.5rem; }

.house {
  font-size: 0.98rem;
  color: var(--text);
}

.links {
  font-size: 0.92rem;
}

.links span {
  color: var(--text-dim);
  margin: 0 0.4rem;
}

.copy {
  margin-top: 1rem;
  font-size: 0.83rem;
  color: var(--text-dim);
}

/* ---- Small screens ---- */

@media (max-width: 26rem) {
  body { font-size: 16px; }
  .hero { padding: 3rem 0 2.4rem; }
  .feature { padding: 3rem 0; }
  .install { padding: 3rem 0 3.4rem; }
  .cta .button { flex: 1 1 100%; text-align: center; }
  pre { font-size: 0.84rem; padding: 0.85rem 0.9rem; }
}