/* fener's site. Neutral grays and a grotesk for the page; JetBrains Mono only for code, labels
   and the fener panel itself, which keeps the app's own Tokyo Night look. The one warm color is
   the lantern's light on the demo desktop's wallpaper. */
@font-face { font-family: "Hanken"; src: url("fonts/hanken.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JBM"; src: url("fonts/jbm-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --bg: #09090d;
  --text: #ececef;
  --text-2: #9b9ca3;
  --text-3: #6b6c73;
  --line: #1f2024;
  --line-2: #2a2b30;
  --surface: #111114;
  --warm: #ffb27a;
  --sans: "Hanken", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "JBM", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { overflow-x: clip; background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; background: var(--bg); color: var(--text-2); font: 16px/1.6 var(--sans); overflow-x: hidden; }
/* Film grain over the whole page, so the dark has texture rather than a flat fill. */
body::before { content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* Sections sit in faint pools of warm light, alternating sides, as if lit while walking past. */
main { position: relative; overflow-x: clip; }   /* the light pools reach past the page edges; never let them widen it */
.feature { position: relative; isolation: isolate; }
.feature::before { content: ""; position: absolute; z-index: -1; top: 40px; width: 900px; height: 700px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 158, 100, 0.11), rgba(122, 162, 247, 0.04) 55%, transparent); }
.feature:nth-of-type(odd)::before { left: -420px; }
.feature:nth-of-type(even)::before { right: -420px; }
a { color: inherit; text-decoration: none; }
code, kbd, pre { font-family: var(--mono); }
code { font-size: 0.86em; color: var(--text); overflow-wrap: anywhere; }
kbd { font-size: 0.78em; color: var(--text); background: var(--surface); border: 1px solid var(--line-2); border-radius: 4px; padding: 1px 5px; }
.wrap { width: min(1120px, calc(100% - 48px)); margin: 0 auto; }

/* buttons: white primary, quiet secondary */
.btn { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 8px; background: var(--text); color: #0b0b0d;
  font-weight: 600; font-size: 15px; transition: background 0.15s; }
.btn:hover { background: #fff; }
.btn.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn.ghost:hover { background: var(--surface); }
.btn.small { height: 32px; padding: 0 12px; font-size: 14px; border-radius: 7px; }

/* nav */
.nav { position: sticky; top: 0; z-index: 10; background: rgba(9, 9, 13, 0.55); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid transparent; }
.nav-row { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.nav nav { display: flex; align-items: center; gap: 26px; font-size: 14px; }
.nav nav a:not(.btn):hover { color: var(--text); }

/* hero: a lantern hangs over the headline (lantern.js draws it in .sky) */
.hero-band { position: relative; margin-top: -60px; padding-top: 60px; isolation: isolate; }
.sky { position: absolute; inset: 0 0 -120px 0; z-index: -1; width: 100%; height: calc(100% + 120px); image-rendering: pixelated;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent); mask-image: linear-gradient(to bottom, #000 60%, transparent); }
.hero { text-align: center; padding: 210px 0 64px; }
@media (max-width: 560px) { .hero { padding-top: 170px !important; } }
h1 { margin: 0; color: var(--text); font-weight: 600; font-size: clamp(40px, 6.4vw, 72px); line-height: 1.02; letter-spacing: -0.035em; }
.lead { max-width: 560px; margin: 22px auto 0; font-size: 18px; line-height: 1.55; }
.actions { display: flex; gap: 10px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
.req { margin: 18px 0 0; font: 12px var(--mono); color: var(--text-3); }
.brew { display: inline-flex; align-items: center; gap: 12px; margin: 22px 0 0; padding: 6px 6px 6px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: rgba(17, 17, 20, 0.7); max-width: 100%; }
.brew code { font-size: 13px; color: var(--text-2); white-space: nowrap; overflow-x: auto; scrollbar-width: none; }

/* the demo desktop: a menu bar, a night wallpaper lit low and warm, and the live panel */
.stage { padding-bottom: 24px; }
.desktop { position: relative; height: 540px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-2);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 40px 120px -20px rgba(0, 0, 0, 0.8);
  background:
    radial-gradient(120% 70% at 50% 118%, rgba(255, 170, 105, 0.55), rgba(255, 140, 80, 0.16) 38%, transparent 66%),
    radial-gradient(70% 55% at 82% 10%, rgba(96, 112, 196, 0.32), transparent 70%),
    radial-gradient(60% 50% at 10% 30%, rgba(52, 60, 120, 0.35), transparent 70%),
    linear-gradient(180deg, #0d1020 0%, #121528 55%, #1d1724 100%); }
.scene { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.desktop::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.12; mix-blend-mode: overlay; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.menubar { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; height: 28px; padding: 0 16px;
  font: 13px var(--sans); color: rgba(255, 255, 255, 0.86); background: rgba(10, 12, 24, 0.35); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.mb-left { display: flex; gap: 18px; } .mb-left b { font-weight: 600; }
.desktop .panel { position: absolute; z-index: 2; left: 50%; top: 92px; width: min(560px, calc(100% - 32px)); transform: translateX(-50%); }
.caption { margin: 18px 0 0; text-align: center; font-size: 13px; color: var(--text-3); min-height: 1.6em; }
.caption b { color: var(--text); font-weight: 500; }

/* the fener panel, as the app draws it: 40 px rows, 15 px text, 2 px border, square corners */
.panel { --p-bg: #1a1b26; --p-border: #c0caf5; --p-text: #c0caf5; --p-muted: #565f89; --p-accent: #7aa2f7; --p-sel: #24283b;
  font-family: var(--mono); background: color-mix(in srgb, var(--p-bg) 95%, transparent); border: 2px solid var(--p-border); padding: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); transition: background 0.25s, border-color 0.25s; }
.panel[data-theme="catppuccin-mocha"] { --p-bg: #1e1e2e; --p-border: #b4befe; --p-text: #cdd6f4; --p-muted: #6c7086; --p-accent: #89b4fa; --p-sel: #313244; }
.panel input, .panel .field { display: block; width: 100%; height: 24px; margin: 0 0 10px 2px; padding: 0; border: 0; outline: 0; background: none;
  color: var(--p-text); font: 15px var(--mono); caret-color: var(--p-accent); }
.panel input::placeholder, .panel .placeholder { color: var(--p-muted); }
.panel ul { list-style: none; margin: 0; padding: 0; max-height: calc(40px * 9.5); overflow: hidden; }
.panel.fade ul { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent); }
.panel li { display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 12px; color: var(--p-text); font-size: 15px; white-space: nowrap; overflow: hidden; cursor: default; }
.panel li i { font-style: normal; width: 20px; text-align: center; flex: none; font-size: 18px; }
.panel li .emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif; font-size: 17px; }
.panel li b { font-weight: 400; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.panel li span { flex: 1 1 0; min-width: 0; }
.panel li span { color: var(--p-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.panel li em { margin-left: auto; font-style: normal; color: var(--p-muted); font-size: 13px; padding-left: 8px; flex: none; }
.panel li.sel { background: var(--p-sel); border-radius: 4px; }
.panel li.sel b, .panel li.sel i { color: var(--p-accent); }

/* features: a label, a two-tone statement, then the product */
.feature { padding-top: 152px; }
.label { margin: 0 0 18px; font: 12px var(--mono); color: var(--text-3); letter-spacing: 0.02em; }
h2 { margin: 0; max-width: 860px; color: var(--text); font-weight: 600; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.12; letter-spacing: -0.025em; }
h2 span { color: var(--text-3); }
h2 code { font-size: 0.8em; color: var(--text-3); }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.cards figure { margin: 0; padding: 28px 22px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.cards .panel { padding: 14px; box-shadow: none; }
.cards .panel li { padding: 0 8px; gap: 10px; font-size: 14px; }
.cards figcaption { margin-top: 18px; font-size: 14px; color: var(--text-3); }
.cards figcaption code { color: var(--text-2); }

.split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; margin-top: 56px; }
.file, .result { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.file-head { padding: 12px 18px; border-bottom: 1px solid var(--line); font: 12px var(--mono); color: var(--text-3); }
.file pre { margin: 0; padding: 18px; font-size: 13.5px; line-height: 1.75; color: var(--text-2); overflow-x: auto; }
.file .k { color: #9aa5ce; } .file .s { color: #a9c97e; } .file .h { color: var(--text); } .file .c { color: var(--text-3); } .file .n { color: #e0af68; }
.file .v { font: inherit; color: #a9c97e; background: none; border: 0; padding: 0; cursor: pointer; border-bottom: 1px dashed var(--warm); }
.file .v:hover, .file .v:focus-visible { color: var(--warm); outline: none; }
.result { position: relative; isolation: isolate; display: grid; place-items: center; padding: 40px 28px; background: var(--surface); }
.lamp { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; image-rendering: pixelated; }
.result { grid-template-columns: minmax(0, 1fr); }
.result .panel { width: 100%; max-width: 380px; min-width: 0; overflow: hidden; justify-self: center; }

.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 56px; border-top: 1px solid var(--line); }
.facts div { padding: 28px 24px 0 0; }
.facts strong { display: block; color: var(--text); font-weight: 600; font-size: 40px; letter-spacing: -0.03em; line-height: 1.1; }
.facts span { display: block; margin-top: 8px; font-size: 15px; max-width: 30ch; }

.table-scroll { overflow-x: auto; margin-top: 48px; }
.compare { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 15px; }
.compare th, .compare td { text-align: left; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); }
.compare thead th { color: var(--text); font-weight: 600; }
.compare tbody th { color: var(--text-3); font-weight: 400; width: 20%; }
.compare td:nth-child(2) { color: var(--text); }

/* install: rows, text on the left and the action on the right */
.install { padding-top: 152px; }
.rows { margin-top: 36px; border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--line); }
.row h3 { margin: 0 0 6px; color: var(--text); font-weight: 600; font-size: 17px; }
.row p { margin: 0; max-width: 46ch; font-size: 15px; }
.row-actions { display: flex; justify-content: flex-end; }
.cmd { display: flex; align-items: center; gap: 12px; max-width: 100%; padding: 10px 10px 10px 16px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); }
.cmd code { font-size: 13px; color: var(--text-2); white-space: nowrap; overflow-x: auto; overflow-wrap: normal; min-width: 0; scrollbar-width: none; }
.cmd code::-webkit-scrollbar { display: none; }
.copy { flex: none; font: 12px var(--sans); color: var(--text-2); background: none; border: 1px solid var(--line-2); border-radius: 6px; padding: 4px 10px; cursor: pointer; }
.copy:hover { color: var(--text); border-color: var(--text-3); }

/* the foot of the page: the lantern set down on the ground, its light rising behind the footer */
.foot-band { position: relative; margin-top: 120px; height: 360px; isolation: isolate; overflow: hidden; }
.ground { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; image-rendering: pixelated;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%); mask-image: linear-gradient(to bottom, transparent, #000 35%); }
.foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: 40px 0 0; font-size: 14px; color: var(--text-2); }
.foot-brand { display: flex; align-items: center; gap: 12px; } .foot-brand p { margin: 0; } .foot-brand b { color: var(--text); font-weight: 600; }
.foot nav { display: flex; gap: 22px; flex-wrap: wrap; }
.foot a:hover { color: var(--text); }

@media (max-width: 900px) {
  .cards, .split, .facts, .row { grid-template-columns: minmax(0, 1fr); }
  .row-actions { justify-content: flex-start; }
  .facts div { padding-right: 0; }
  .desktop { height: 540px; }
  .nav nav a:not(.btn) { display: none; }
}
@media (max-width: 560px) {
  .hero { padding-top: 64px; }
  .wide { display: none; }
  .brew code { font-size: 12px; }
  .lead { font-size: 16px; }
  .menubar { padding: 0 12px; font-size: 12px; }
  .mb-left { gap: 13px; }
  .mb-left span:nth-of-type(n+5) { display: none; }   /* keep File Edit View Go; drop Window and Help */
  .mb-right { font-size: 12px; }
  .desktop .panel { top: 60px; padding: 14px 12px; }
  .panel li { gap: 10px; padding: 0 8px; }
  .feature, .install { padding-top: 104px; }
}
@media (prefers-reduced-motion: reduce) { .panel { transition: none; } }
.rows .row:last-child { border-bottom: 0; }