/* lumenshell.dev. A near-black canvas where type does the talking, depth
   comes from stepping surface colours (never shadows or borders), and the
   only warm light is Lumen's own campfire. Ember is for the Copy button
   and nothing else; syntax colours stay inside code. */

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("/static/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("/static/fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("/static/fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("/static/fonts/jbmono-400.woff2") format("woff2"); }

:root {
  /* Surfaces, from the floor up */
  --canvas: #121212;
  --raised: #1e1e1d;
  --code: #353534;
  --hover: #40403f;

  /* Text */
  --text: #faf9f6;
  --soft: #e3e2e0;
  --muted: #a3a29f;
  --faint: #868684;

  /* The one accent: step four of Lumen's fire palette. Copy only. */
  --ember: #f78724;
  --ember-hover: #ffb53d;

  /* Syntax, inside code only (Rosé Pine, Lumen's default theme) */
  --syn-key: #c4a7e7;
  --syn-str: #f6c177;
  --syn-com: #908caa;

  --sans: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --gutter: clamp(20px, 5vw, 72px);
  --width: 1440px;
  --ease: cubic-bezier(0.44, 0, 0.56, 1);
}

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

html { background: var(--canvas); color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--muted);
  font: 400 16px/1.5 var(--sans);
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--soft); text-decoration-color: var(--faint); text-underline-offset: 0.22em; transition: color 0.15s ease, text-decoration-color 0.15s ease; }
a:hover { color: var(--text); text-decoration-color: var(--soft); }

:focus-visible { outline: 2px solid var(--soft); outline-offset: 3px; border-radius: 4px; }

code { font-family: var(--mono); font-size: 0.875em; letter-spacing: 0; }

h1, h2, h3 { color: var(--text); font-weight: 400; margin: 0; text-wrap: balance; }

h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.1; letter-spacing: -0.03em; }
h3 { font-size: 18px; line-height: 1.35; font-weight: 500; letter-spacing: -0.01em; }

.skip { position: absolute; left: -999px; top: 8px; padding: 8px 12px; background: var(--text); color: var(--canvas); z-index: 10; border-radius: 4px; }
.skip:focus { left: 8px; }

/* Header */

.top {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px var(--gutter);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 500; font-size: 17px; letter-spacing: -0.02em; }
.top nav { display: flex; align-items: center; gap: clamp(16px, 3vw, 32px); }
.top nav .gh { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; padding: 10px 0; }
.top nav .gh svg { display: block; }
.top nav a, .bottom nav a { display: inline-block; padding: 10px 0; color: var(--faint); text-decoration: none; font-weight: 500; font-size: 15px; }
.top nav a:hover, .bottom nav a:hover { color: var(--text); }

/* Hero: the headline stack, then the product window standing in front of
   the fire. */

.hero { position: relative; overflow: hidden; }

.hero-text {
  max-width: 960px; margin: 0 auto;
  padding: clamp(56px, 10vw, 120px) var(--gutter) 0;
  text-align: center;
}

.hero h1 {
  font-size: clamp(40px, 7vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.lead {
  max-width: 34em; margin: 22px auto 0;
  color: var(--muted);
  font-size: clamp(17px, 1.6vw, 19px); line-height: 1.5;
  text-wrap: pretty;
}

/* The install bar: a Linux / macOS switch, the command for the chosen
   system after a faint prompt, and Copy, the page's one primary action.
   One grid, one control height (40px) and one inner radius (8px), inset
   8px in a 16px-radius bar so the corners stay concentric. */

.get { margin-top: 34px; }

.bar {
  display: inline-grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 8px;
  max-width: 100%;
  padding: 8px;
  background: var(--code); border-radius: 16px;
  text-align: left;
}

.os { display: flex; gap: 4px; }
.os button {
  height: 40px; padding: 0 16px;
  background: transparent; color: var(--faint);
  border: 0; border-radius: 8px;
  font: 500 14px/1 var(--sans); letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.os button:hover { color: var(--text); }
.os button[aria-pressed="true"] { background: var(--hover); color: var(--text); }

/* Each system's command and its Copy button sit straight in the bar's grid. */
.command { display: contents; }
.command[hidden] { display: none; }
.command code {
  grid-column: 2;
  display: block; box-sizing: content-box;
  width: 49ch; /* the longest command and its prompt, so switching doesn't move the bar */
  margin-left: 4px; padding: 0 24px;
  border-left: 1px solid rgb(250 249 246 / 0.1);
  color: var(--soft); font-size: 15px; line-height: 40px;
  white-space: nowrap; overflow-x: auto; scrollbar-width: none;
}
.command code::-webkit-scrollbar { display: none; }
.command code::before { content: "$ " / ""; color: var(--faint); }

.copy {
  grid-column: 3;
  min-width: 84px; height: 40px; padding: 0 20px;
  background: var(--ember); color: var(--canvas);
  border: 0; border-radius: 8px;
  font: 600 14px/1 var(--sans); letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.4s var(--ease);
}
.copy:hover { background: var(--ember-hover); }

/* Before the script runs there's no switch: every command shows, one per
   row, each with its own Copy. */
html:not(.js) .os { display: none; }
html:not(.js) .bar { grid-template-columns: minmax(0, 1fr) auto; }
html:not(.js) .command code { grid-column: 1; margin-left: 0; border-left: 0; }
html:not(.js) .copy { grid-column: 2; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The stage: the product window below the hero text. */

.stage {
  position: relative;
  max-width: calc(var(--width) + 2 * var(--gutter));
  margin: clamp(48px, 7vw, 80px) auto 0;
  padding: 0 var(--gutter);
}

.window {
  position: relative;
  width: min(100%, 1280px); margin: 0 auto;
  border-radius: 16px;
}

.hero-short { min-height: 70vh; }

/* The campfire: pinned to the bottom of the window and burning behind
   everything as you scroll. The header, content and footer sit in front;
   the footer's own surface covers it at the end of the page. */

.fire {
  position: fixed; left: 0; bottom: 0; z-index: 0;
  width: 100%; height: clamp(220px, 26vw, 380px); /* flames in the lower half, embers above */
  image-rendering: pixelated;
  pointer-events: none;
}
.top, main, .bottom { position: relative; z-index: 1; }

/* Pause or light the fire: moving content that's always on screen needs a
   way to stop it. */
.fire-toggle {
  position: fixed; right: 16px; bottom: 16px; z-index: 2;
  height: 32px; padding: 0 12px;
  background: rgba(18, 18, 18, 0.82); color: var(--muted);
  border: 0; border-radius: 50px;
  font: 500 13px/1 var(--sans); letter-spacing: -0.01em;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.fire-toggle:hover { background: var(--code); color: var(--text); }

/* Sections */

.features, .yours, .again {
  max-width: var(--width); margin: 0 auto;
  padding: clamp(80px, 10vw, 128px) var(--gutter) 0;
}

/* Features */

.features h2 { max-width: 18ch; }
.features dl {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px clamp(24px, 4vw, 48px);
  margin: 48px 0 0;
}
.features dt { color: var(--text); font-weight: 500; font-size: 17px; letter-spacing: -0.015em; }
.features dd { margin: 8px 0 0; color: var(--faint); font-size: 15px; line-height: 1.55; text-wrap: pretty; }
.features dd code { color: var(--muted); }

/* Make it yours: a numbered list on the left, and the chosen file on the
   right in a panel one surface step up, sized to the longest file so
   switching never moves the page. */

.yours-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 48px; }
.yours-head .lead { margin: 0; max-width: 30em; text-align: left; }

.yours-rows {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 8px clamp(24px, 4vw, 56px); align-items: start;
  margin-top: 40px;
}
.yours-item { grid-column: 1; padding: 20px 22px; border-radius: 14px; transition: background 0.4s var(--ease); }
.yours-item:hover, .yours-item.is-on { background: var(--raised); }

.yours-pick {
  display: grid; grid-template-columns: 42px 1fr; gap: 6px 0;
  width: 100%; padding: 0;
  background: none; border: 0; color: inherit;
  text-align: left; font: inherit; letter-spacing: inherit;
  cursor: pointer;
}
html:not(.js) .yours-pick { cursor: default; }
.yours-num { color: var(--faint); font: 400 13px/1.9 var(--mono); transition: color 0.4s var(--ease); }
.yours-title { color: var(--soft); font-weight: 500; font-size: 17px; letter-spacing: -0.015em; }
.yours-text { grid-column: 2; color: var(--faint); font-size: 15px; line-height: 1.55; text-wrap: pretty; }
.yours-text code { color: var(--muted); }
.yours-item.is-on .yours-num, .yours-item.is-on .yours-title { color: var(--text); }
.yours-item.is-on .yours-text { color: var(--muted); }
.yours-link { display: inline-block; margin: 6px 0 0 42px; padding: 4px 0; font-weight: 500; font-size: 15px; }

.yours-file {
  grid-column: 2; margin: 0; min-width: 0;
  background: var(--raised); border-radius: 16px; padding: 0 8px 8px;
}
.yours-file figcaption {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 12px 12px 10px;
  color: var(--faint); font: 400 12px/1.4 var(--mono);
}
.yours-file pre {
  margin: 0; padding: 18px 20px;
  background: var(--canvas); border-radius: 10px;
  overflow-x: auto; scrollbar-width: thin;
  color: var(--soft); font: 400 13px/1.75 var(--mono);
}
.yours-file pre code { font-size: 1em; }
.yours-shell pre { padding-left: 28px; }

/* With the script, on wide screens: every file shares the right-hand cell,
   and only the chosen one is visible. */
@media (min-width: 901px) {
  .js .yours-rows { grid-template-rows: repeat(3, auto) 1fr; }
  .js .yours-file { grid-row: 1 / -1; align-self: stretch; display: flex; flex-direction: column; }
  .js .yours-file pre { flex: 1; }
  .js .yours-file[hidden] { display: flex; visibility: hidden; }
}

pre .k { color: var(--syn-key); }
pre .s { color: var(--syn-str); }
pre .c { color: var(--syn-com); }
pre .o { color: var(--muted); }
pre .p { color: var(--faint); }
pre .ran { position: relative; }
pre .ran::before {
  content: ""; position: absolute; left: -12px; top: 0.15em; bottom: 0.15em;
  width: 3px; border-radius: 2px; background: #5d5c59;
}

/* The last call */

.again { text-align: center; padding-bottom: clamp(80px, 10vw, 128px); }

/* Footer: one surface step up from the canvas (Warp's footer role). A
   brand column, then the links in groups, then a hairline over the legal
   line and the credit. */

.bottom { background: rgb(30 30 29 / 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* --raised, letting the fire glow through */
.bottom-inner {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px clamp(32px, 6vw, 96px);
  max-width: var(--width); margin: 0 auto;
  padding: clamp(56px, 7vw, 88px) var(--gutter) 72px; /* room for the fire's pause button */
}
.bottom-brand p { max-width: 26em; margin: 16px 0 0; color: var(--faint); font-size: 15px; line-height: 1.55; text-wrap: pretty; }

.bottom-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.bottom-links h2 { margin: 0 0 8px; color: var(--soft); font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: -0.006em; }
.bottom-links ul { margin: 0; padding: 0; list-style: none; }
.bottom nav.bottom-links a { padding: 6px 0; font-weight: 400; font-size: 15px; }

.bottom-legal {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  padding-top: 24px; border-top: 1px solid #2f2f2f;
}
.bottom-legal p { margin: 0; color: var(--muted); font-size: 14px; } /* one step up: the fire glows behind this line */

/* Narrow screens */

@media (max-width: 900px) {
  .features dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bottom-inner { grid-template-columns: 1fr; }
  .yours-rows { grid-template-columns: 1fr; }
  .yours-item, .yours-file { grid-column: 1; }
}

@media (max-width: 600px) {
  .top nav a[href="/#features"] { display: none; }
  .features dl { grid-template-columns: 1fr; }
  /* The switch and Copy share the top row; the command gets the full width
     below, wrapping at a space with the second line hung under the first,
     past the prompt. */
  .bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; }
  .os { grid-column: 1; grid-row: 1; }
  .copy { grid-column: 2; grid-row: 1; }
  .command code {
    grid-column: 1 / -1; grid-row: 2; width: auto;
    margin: 0; padding: 6px 14px 8px calc(14px + 2ch); border-left: 0;
    font-size: 13px; line-height: 1.6; text-indent: -2ch; white-space: normal;
  }
  html:not(.js) .command code { grid-row: auto; }
  .bottom-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}