/* ==========================================================================
   Quick Blade — quickblade.app
   Tokens and values ported from the Claude Design source ("Quick Blade.dc.html").
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */

:root {
  --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --apple: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

  --bg: #0a0c0f; --bg-2: #0e1116; --bg-3: #12161b; --bg-4: #0f1318;
  --line: #1b222b; --line-2: #232a33;
  --text: #e7eaee; --text-2: #a0a8b2; --text-3: #6b7480; --code: #cdd3da;
  --accent: #ff4a3d;
  --accent-2: color-mix(in oklab, var(--accent), white 14%);
  --accent-3: color-mix(in oklab, var(--accent), white 30%);
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-brd: color-mix(in srgb, var(--accent) 28%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 32%, transparent);
  --accent-hero: color-mix(in srgb, var(--accent) 14%, transparent);
  --nav-bg: rgba(10, 12, 15, .72);
  --cta-btn-brd: #2a2020;
  --shadow-card: none;
  --tg-dark-bg: rgba(255, 255, 255, .12); --tg-dark-fg: var(--text);
  --tg-light-bg: transparent; --tg-light-fg: var(--text-3);

  /* Finder chrome */
  --f-tb-a: #34363b; --f-tb-b: #2c2e33; --f-bg: #1c1e21; --f-side: rgba(38, 40, 44, .96);
  --f-txt: #dfe2e6; --f-txt-hi: #e7e9ec; --f-txt-2: #8a8f98; --f-txt-3: #7e838b;
  --f-brd: rgba(0, 0, 0, .4); --f-hair: rgba(255, 255, 255, .06); --f-seg: rgba(0, 0, 0, .22);
  --f-seg-on: rgba(255, 255, 255, .14); --f-status: rgba(40, 42, 46, .5); --f-outline: rgba(255, 255, 255, .09);
  --f-doc-a: #fdfdff; --f-doc-b: #e7e9ee;

  /* Quick Look chrome */
  --q-tb-a: rgba(60, 62, 67, .97); --q-tb-b: rgba(45, 47, 51, .97); --q-brd: rgba(255, 255, 255, .14);
  --q-txt: #e9ebee; --q-glyph: #b9bec6; --q-glyph-2: #cfd3d9; --q-pill: rgba(255, 255, 255, .14);
  --q-hair: rgba(0, 0, 0, .5); --q-shine: rgba(255, 255, 255, .13);
}

:root[data-qb-theme="light"] {
  --bg: #fbfaf9; --bg-2: #ffffff; --bg-3: #f4f2f0; --bg-4: #ffffff;
  --line: #e7e3de; --line-2: #ddd8d2;
  --text: #14171b; --text-2: #5b626b; --text-3: #8d949c; --code: #3c434b;
  --accent: #dd3b29;
  --accent-2: color-mix(in oklab, var(--accent), black 6%);
  --accent-3: color-mix(in oklab, var(--accent), black 14%);
  --accent-soft: color-mix(in srgb, var(--accent) 9%, transparent);
  --accent-brd: color-mix(in srgb, var(--accent) 24%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 26%, transparent);
  --accent-hero: color-mix(in srgb, var(--accent) 11%, transparent);
  --nav-bg: rgba(251, 250, 249, .78);
  --cta-btn-brd: #e6d5cf;
  --shadow-card: 0 1px 2px rgba(20, 23, 27, .04);
  --tg-dark-bg: transparent; --tg-dark-fg: var(--text-3);
  --tg-light-bg: rgba(20, 23, 27, .07); --tg-light-fg: var(--text);

  --f-tb-a: #f7f6f5; --f-tb-b: #eceae8; --f-bg: #ffffff; --f-side: rgba(243, 242, 241, .96);
  --f-txt: #1d1d1f; --f-txt-hi: #1d1d1f; --f-txt-2: #86868b; --f-txt-3: #8e8e93;
  --f-brd: rgba(0, 0, 0, .14); --f-hair: rgba(0, 0, 0, .07); --f-seg: rgba(0, 0, 0, .055);
  --f-seg-on: rgba(255, 255, 255, .95); --f-status: rgba(246, 245, 244, .9); --f-outline: rgba(0, 0, 0, .1);
  --f-doc-a: #ffffff; --f-doc-b: #eef0f3;

  --q-tb-a: rgba(246, 245, 244, .98); --q-tb-b: rgba(234, 232, 230, .98); --q-brd: rgba(0, 0, 0, .13);
  --q-txt: #1d1d1f; --q-glyph: #7c7c81; --q-glyph-2: #5f5f64; --q-pill: rgba(0, 0, 0, .07);
  --q-hair: rgba(0, 0, 0, .12); --q-shine: rgba(255, 255, 255, .9);
}

/* ----------------------------------------------------------------- 2. Base */

* { box-sizing: border-box; }
/* No smooth scrolling: every in-page anchor below the hero sits past the 320vh
   scroll-morph track, and animating across it plays the whole Finder -> Quick
   Look morph at you on the way to the FAQ. Anchor clicks jump instead. */

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  transition: background-color .28s ease, color .28s ease;
  /* The hero/CTA glows are wider than a phone viewport by design. `clip` keeps
     them from adding horizontal scroll without creating a scroll container,
     which `hidden` would — that would break the sticky header. */
  overflow-x: clip;
}

a { color: var(--accent-2); }
a:hover { color: var(--accent-3); }
::selection { background: var(--accent-brd); }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------ 3. Utilities */

.wrap { max-width: 1120px; margin: 0 auto; }
.wrap-narrow { max-width: 820px; margin: 0 auto; }
.wrap-prose { max-width: 760px; margin: 0 auto; }

.mono { font-family: var(--mono); }

.code {
  font-family: var(--mono);
  color: var(--code);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border-radius: 100px;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .09em;
  color: var(--text-2);
  text-transform: uppercase;
}

.section-head { text-align: center; margin-bottom: 56px; }

.section-head h2 {
  font-family: var(--display);
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 18px 0 0;
  text-wrap: pretty;
}

.card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px;
  box-shadow: var(--shadow-card);
}

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* Brand mark — the accent square with the blade glyph */
.mark {
  border-radius: 8px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.mark img { display: block; }

/* --------------------------------------------------------------- 4. Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 32px;
}

.brand { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; text-decoration: none; color: inherit; }
.brand .mark { width: 30px; height: 30px; box-shadow: 0 2px 12px var(--accent-glow); }
.brand .mark img { width: 17px; height: 17px; }
.brand-name { font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: -.01em; }

.site-nav { display: flex; align-items: center; gap: 26px; }

.nav-link {
  color: var(--text-2);
  text-decoration: none;
  font-size: 14px;
  transition: color .18s ease;
}
.nav-link:hover { color: var(--text); }

.theme-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 9px;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  flex: 0 0 auto;
}

.theme-toggle button {
  width: 28px; height: 22px;
  border: none;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background-color .2s ease, color .2s ease;
}

.theme-toggle button svg { width: 13px; height: 13px; }
.theme-toggle .to-light { background: var(--tg-light-bg); color: var(--tg-light-fg); }
.theme-toggle .to-dark { background: var(--tg-dark-bg); color: var(--tg-dark-fg); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  color: var(--text);
  flex: 0 0 auto;
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}
.icon-btn:hover { color: var(--text); border-color: var(--accent-brd); }
.icon-btn svg { width: 17px; height: 17px; }

/* Hamburger + its panel. Both are desktop-hidden and switched on at <=860px,
   which is the same width where the inline nav links drop out. */
.nav-toggle { display: none; }
.nav-toggle .close-icon { display: none; }
.nav-toggle[aria-expanded="true"] .open-icon { display: none; }
.nav-toggle[aria-expanded="true"] .close-icon { display: block; }

.mobile-nav { display: none; }

/* ----------------------------------------------------------------- 5. Hero */

.hero {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  padding: 96px 32px 8px;
  text-align: center;
  overflow: visible;
}

.hero-glow {
  position: absolute;
  top: -40px; left: 50%;
  transform: translateX(-50%);
  width: 760px; height: 420px;
  background: radial-gradient(ellipse at center, var(--accent-hero), transparent 70%);
  pointer-events: none;
}

.hero-inner { position: relative; }

/* The hero centres with text-align, but .mark is display: flex — a block box,
   which ignores it. inline-flex keeps the logo centred without a wrapper. */
.hero-mark {
  display: inline-flex;
  width: 140px;
  height: 140px;
  border-radius: 20px;
}

.hero h1 {
  font-family: var(--display);
  font-size: 60px;
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -.028em;
  /* Line 1 measures 914px at 60px, so the cap has to clear that or the authored
     two-line headline wraps to three and pushes the whole hero down. */
  max-width: 960px;
  margin: 24px auto 0;
  text-wrap: pretty;
}

.hero h1 .accent { color: var(--accent-2); }

.hero-lede {
  font-size: 18px;
  color: var(--text-2);
  line-height: 1.6;
  max-width: 600px;
  margin: 22px auto 0;
  text-wrap: pretty;
}
.hero-lede .code { font-size: 16px; }

.hero-cta { display: flex; justify-content: center; margin-top: 34px; }

.hero-note {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-3);
  margin-top: 22px;
}

/* Copy-the-install-command button (hero + CTA band) */
.brew {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 5px 5px 5px 18px;
  border-radius: 12px;
  background: var(--bg-4);
  border: 1px solid var(--line-2);
  cursor: pointer;
  font: inherit;
  box-shadow: var(--shadow-card);
  transition: border-color .18s ease;
}
.brew:hover { border-color: var(--accent-brd); }

.brew-cmd {
  font-family: var(--mono);
  font-size: 14.5px;
  color: var(--text);
  white-space: nowrap;
  display: flex;
  gap: 9px;
}
.brew-cmd .prompt { color: var(--accent-2); }

.brew-copy {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--sans);
  white-space: nowrap;
}
.brew-copy svg { width: 13px; height: 13px; flex: 0 0 auto; }

/* ------------------------------------------------- 6. Scroll-morph stage */

#qb-track { position: relative; height: 320vh; }

.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.caps { position: absolute; top: 9%; left: 0; right: 0; height: 30px; }

.cap {
  position: absolute;
  inset: 0;
  text-align: center;
  font-size: 17px;
  color: var(--text-2);
  opacity: 0;
}
.cap:first-child { opacity: 1; }
.cap .code { font-size: 15px; color: var(--text); }
.cap .accent { color: var(--accent-2); }

.key {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--bg);
  background: var(--text);
  padding: 2px 9px;
  border-radius: 5px;
}

/* The frame reserves the device's layout box; #qb-device is only ever moved by
   transform, so scaling it never disturbs the stage's centring. */
.device-frame { width: 920px; height: 568px; flex: 0 0 auto; }

#qb-device { position: relative; width: 920px; height: 568px; }

.progress-wrap {
  position: absolute;
  bottom: 32px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
}

.progress-bar {
  width: 184px; height: 3px;
  border-radius: 3px;
  background: var(--line-2);
  overflow: hidden;
}
#qb-progress { width: 0%; height: 100%; background: var(--accent); }

.progress-label {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: .09em;
}

/* -------- Finder window -------- */

#qb-finder {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--f-bg);
  border: 1px solid var(--f-outline);
  box-shadow: 0 50px 110px -30px rgba(0, 0, 0, .55);
  transform-origin: center;
  will-change: transform, opacity, filter;
}

.f-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 52px;
  padding: 0 16px;
  background: linear-gradient(var(--f-tb-a), var(--f-tb-b));
  border-bottom: 1px solid var(--f-brd);
}

.f-lights { display: flex; gap: 8px; }
.f-lights i {
  width: 12px; height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .2);
}
.f-lights .r { background: #ff5f57; }
.f-lights .y { background: #febc2e; }
.f-lights .g { background: #28c840; }

.f-arrows { display: flex; gap: 14px; color: var(--f-txt-3); font-size: 17px; margin-left: 4px; }

.f-seg {
  display: flex;
  align-items: center;
  background: var(--f-seg);
  border-radius: 7px;
  padding: 3px;
  gap: 2px;
}
.f-seg > span {
  width: 26px; height: 20px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.f-seg > span.on { background: var(--f-seg-on); }
.f-seg .lines { display: flex; flex-direction: column; gap: 2px; }
.f-seg .lines i { width: 11px; height: 1.5px; background: var(--f-txt-2); }
.f-seg .dots { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.f-seg .dots i { width: 4px; height: 4px; background: var(--f-txt-2); border-radius: 1px; }
.f-seg .cols { display: flex; gap: 2px; }
.f-seg .cols i { width: 2px; height: 11px; background: var(--f-txt-2); }

.f-title { flex: 1; text-align: center; font-size: 13.5px; color: var(--f-txt-hi); font-weight: 600; }

.f-tools { display: flex; align-items: center; gap: 12px; color: var(--f-txt-2); font-size: 14px; }
.f-tools .sq { width: 16px; height: 16px; border: 1.5px solid var(--f-txt-2); border-radius: 4px; }
.f-tools .ci { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--f-txt-2); }

.f-search {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 150px;
  background: var(--f-seg);
  border-radius: 7px;
  padding: 5px 9px;
}
.f-search .glass { width: 11px; height: 11px; border: 1.5px solid var(--f-txt-3); border-radius: 50%; }
.f-search span { font-size: 12px; color: var(--f-txt-3); }

.f-body { display: flex; height: calc(100% - 52px); }

.f-sidebar {
  flex: 0 0 186px;
  background: var(--f-side);
  padding: 12px 10px;
  border-right: 1px solid var(--f-hair);
  overflow: hidden;
}

.f-side-h {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--f-txt-2);
  margin: 2px 0 7px 8px;
}
.f-side-h + .f-side-h,
.f-side-i + .f-side-h { margin-top: 14px; }

.f-side-i {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--f-txt);
}
.f-side-i i { width: 15px; height: 15px; border-radius: 4px; }
.f-side-i i.tag { width: 11px; height: 11px; border-radius: 50%; }

.f-main { flex: 1; background: var(--f-bg); display: flex; flex-direction: column; min-width: 0; }

.f-head {
  display: flex;
  padding: 7px 16px;
  font-size: 11px;
  color: var(--f-txt-3);
  border-bottom: 1px solid var(--f-hair);
}

.f-row { display: flex; align-items: center; padding: 6px 16px; font-size: 12.5px; color: var(--f-txt); }
.f-row.sel { color: #fff; background: #0a63e0; }
.f-name { flex: 1; display: flex; align-items: center; gap: 9px; min-width: 0; }
.f-date { width: 132px; color: var(--f-txt-2); }
.f-size { width: 56px; text-align: right; color: var(--f-txt-2); }
.f-row.sel .f-date, .f-row.sel .f-size { color: rgba(255, 255, 255, .82); }

.f-folder {
  width: 17px; height: 13px;
  border-radius: 2px 2px 3px 3px;
  background: linear-gradient(#6db6ff, #3f92f0);
  flex: 0 0 auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
}

.f-doc {
  position: relative;
  width: 15px; height: 19px;
  border-radius: 2.5px;
  background: linear-gradient(var(--f-doc-a), var(--f-doc-b));
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .14);
}
.f-doc::after {
  content: '';
  position: absolute;
  bottom: 3px; left: 2.5px; right: 2.5px;
  height: 2px;
  background: #e0693f;
  border-radius: 1px;
}

.f-spacer { flex: 1; }

.f-status {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  font-size: 11px;
  color: var(--f-txt-2);
  border-top: 1px solid var(--f-hair);
  background: var(--f-status);
}
.f-status .sep { opacity: .5; }
.f-status .cur { color: var(--f-txt); }

/* -------- Quick Look panel -------- */

#qb-ql {
  position: absolute;
  top: 22px; left: 40px; right: 40px; bottom: 22px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--f-bg);
  border: 1px solid var(--q-brd);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 26px 70px -10px rgba(0, 0, 0, .55);
  transform-origin: 120px 320px;
  opacity: 0;
  transform: scale(0.08);
  will-change: transform, opacity;
  pointer-events: none;
}

.q-toolbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 11px;
  background: linear-gradient(180deg, var(--q-tb-a), var(--q-tb-b));
  border-bottom: 1px solid var(--q-hair);
  box-shadow: inset 0 .5px 0 var(--q-shine);
}
.q-toolbar > svg { width: 21px; height: 21px; flex: 0 0 auto; color: var(--q-glyph); }

.q-title {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  font-family: var(--apple);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--q-txt);
  pointer-events: none;
}

.q-spacer { flex: 1; }
.q-actions { display: flex; align-items: center; gap: 9px; position: relative; }

.q-pill {
  display: inline-flex;
  align-items: center;
  padding: 4.5px 11px;
  border-radius: 7px;
  background: var(--q-pill);
  box-shadow: inset 0 .5px 0 var(--q-shine);
  font-family: var(--apple);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--q-txt);
  white-space: nowrap;
}

/* The previewed page keeps its own colours in both themes — it is the user's
   Blade view, not part of this site's chrome. */
.q-viewport { height: calc(100% - 44px); background: #ffffff; overflow: hidden; }

.nw-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 30px; border-bottom: 1px solid #eef0f3;
}
.nw-brand { display: flex; align-items: center; gap: 9px; }
.nw-logo {
  width: 24px; height: 24px; border-radius: 7px; background: #5b5bd6;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--display); font-weight: 700; font-size: 13px;
}
.nw-name { font-family: var(--display); font-weight: 600; font-size: 15px; color: #15181c; }
.nw-links { display: flex; align-items: center; gap: 22px; }
.nw-links span { font-size: 13px; color: #5b626b; }
.nw-links .btn { color: #fff; background: #5b5bd6; padding: 8px 15px; border-radius: 8px; font-weight: 600; }

.nw-hero { display: flex; align-items: center; gap: 30px; padding: 40px 30px 30px; }
.nw-hero-copy { flex: 1; }
.nw-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: #5b5bd6; margin-bottom: 14px;
}
.nw-h1 {
  font-family: var(--display); font-size: 34px; font-weight: 600;
  letter-spacing: -.02em; color: #14171b; line-height: 1.08;
}
.nw-p { font-size: 14.5px; color: #5b626b; line-height: 1.6; margin: 16px 0 22px; max-width: 340px; }
.nw-btns { display: flex; gap: 12px; align-items: center; }
.nw-btns .a { font-size: 13.5px; color: #fff; background: #5b5bd6; padding: 11px 20px; border-radius: 9px; font-weight: 600; }
.nw-btns .b { font-size: 13.5px; color: #3a4048; padding: 11px 18px; border-radius: 9px; font-weight: 600; border: 1px solid #dfe2e6; }
.nw-social { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
.nw-faces { display: flex; }
.nw-faces i { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; }
.nw-faces i + i { margin-left: -8px; }
.nw-social span { font-size: 12px; color: #9aa1a9; }

.nw-panel { flex: 0 0 40%; }
.nw-card {
  background: #0e1120; border-radius: 13px; padding: 15px;
  box-shadow: 0 18px 40px rgba(20, 22, 44, .28);
}
.nw-card-top { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.nw-card-top i { width: 8px; height: 8px; border-radius: 50%; }
.nw-card-top span { margin-left: 6px; font-size: 9px; color: #7c81a0; font-family: var(--mono); }
.nw-chart { display: flex; align-items: flex-end; gap: 5px; height: 64px; margin-bottom: 14px; }
.nw-chart i { flex: 1; border-radius: 3px 3px 0 0; }
.nw-stats { display: flex; gap: 8px; }
.nw-stat { flex: 1; background: rgba(255, 255, 255, .05); border-radius: 8px; padding: 9px 11px; }
.nw-stat-k { font-size: 9px; color: #7c81a0; font-family: var(--mono); }
.nw-stat-v { font-size: 16px; color: #fff; font-family: var(--display); font-weight: 600; }

.nw-cards { display: flex; gap: 14px; padding: 6px 30px 26px; }
.nw-tile { flex: 1; border: 1px solid #eef0f3; border-radius: 11px; padding: 16px; }
.nw-tile-i {
  width: 30px; height: 30px; border-radius: 8px; background: #eeeefc;
  display: flex; align-items: center; justify-content: center;
  color: #5b5bd6; font-family: var(--display); font-weight: 700; font-size: 14px; margin-bottom: 10px;
}
.nw-tile-h { font-family: var(--display); font-weight: 600; font-size: 14px; color: #15181c; }
.nw-tile-p { font-size: 12px; color: #7c828b; margin-top: 4px; line-height: 1.5; }

.nw-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 30px; border-top: 1px solid #eef0f3; font-size: 11px; color: #9aa1a9;
}

/* ------------------------------------------------------------- 7. Features */

#features { padding: 110px 32px 40px; }

.feature-num {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-brd);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent-2);
  margin-bottom: 18px;
}

.feature h3 {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px;
}

.feature p { font-size: 14px; color: var(--text-2); line-height: 1.6; margin: 0; text-wrap: pretty; }
/* Keep code tokens whole: `<x-component>` otherwise breaks at its hyphen and
   lands as "<x-" / "component>" across two lines. All code spans in these cards
   are short enough that nowrap cannot overflow, even in the 1-column layout. */
.feature p .code { font-size: 12.5px; white-space: nowrap; }

/* ------------------------------------------------------------------ 8. FAQ */

#faq { padding: 80px 32px 40px; }
#faq .section-head { margin-bottom: 44px; }

/* The padding lives on the summary, not the details, so the whole row is a tap
   target (64px tall) rather than just the 20px of text. Renders identically. */
.faq-item { border-top: 1px solid var(--line); }
.faq-item[open] { padding-bottom: 22px; }
.faq-item:last-child { border-bottom: 1px solid var(--line); }

.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px 0;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
}
.faq-item[open] summary { padding-bottom: 14px; }
.faq-item summary .code { font-size: 14px; color: inherit; }

.faq-sign {
  color: var(--accent-2);
  font-size: 20px;
  flex: 0 0 auto;
  transition: transform .2s ease;
}
.faq-item[open] .faq-sign { transform: rotate(45deg); }

.faq-item p {
  margin: 0;
  color: var(--text-2);
  line-height: 1.65;
  font-size: 14.5px;
  text-wrap: pretty;
}
.faq-item p .code { font-size: 13px; }

/* ------------------------------------------------------------ 9. CTA band */

.cta-section { padding: 80px 32px; }

.cta {
  position: relative;
  overflow: visible;
  padding: 64px 40px;
  text-align: center;
}

.cta-glow {
  position: absolute;
  top: -120px; left: 50%;
  transform: translateX(-50%);
  width: 640px; height: 360px;
  background: radial-gradient(ellipse at center, var(--accent-hero), transparent 70%);
  pointer-events: none;
}

.cta-inner { position: relative; }

.cta h2 {
  font-family: var(--display);
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 0 0 30px;
  text-wrap: pretty;
}

.cta-actions { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 22px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid var(--cta-btn-brd);
  color: var(--text);
  font-weight: 500;
  font-size: 14.5px;
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}
.btn-ghost:hover { color: var(--text); border-color: var(--accent-brd); }
.btn-ghost svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------- 10. Footer */

.site-footer { border-top: 1px solid var(--line); margin-top: 40px; }

.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  padding: 44px 32px;
}

.footer-brand { display: flex; align-items: center; gap: 11px; }
.footer-brand .mark { width: 28px; height: 28px; }
.footer-brand .mark img { width: 16px; height: 16px; }
.footer-name { font-family: var(--display); font-weight: 600; font-size: 15px; }
.footer-tag { font-family: var(--mono); font-size: 11px; color: var(--text-3); }

.footer-links { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }

.footer-link {
  color: var(--text-2);
  text-decoration: none;
  font-size: 13.5px;
  transition: color .18s ease;
}
.footer-link:hover { color: var(--text); }

.footer-bar { border-top: 1px solid var(--line); }
.footer-bar .wrap {
  padding: 18px 32px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-3);
}

/* -------------------------------------------------------- 11. Support page
   /support only. The page reuses the site's tokens and chrome; everything here
   is the long-form Q&A body, which has no counterpart on the home page. */

/* Current-page marker in the three navs. */
.nav-link.is-current,
.mobile-nav a[aria-current="page"],
.footer-link[aria-current="page"] { color: var(--text); }

.page-head { padding: 72px 32px 0; text-align: center; }

.page-head h1 {
  font-family: var(--display);
  font-size: 42px;
  font-weight: 600;
  letter-spacing: -.025em;
  margin: 18px 0 0;
  text-wrap: pretty;
}

.page-lede {
  font-size: 17px;
  color: var(--text-2);
  line-height: 1.6;
  max-width: 560px;
  margin: 18px auto 0;
  text-wrap: pretty;
}

.jump-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 34px 32px 0;
}

.jump-nav a {
  padding: 9px 16px;
  border-radius: 100px;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  color: var(--text-2);
  font-size: 13.5px;
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}
.jump-nav a:hover { color: var(--text); border-color: var(--accent-brd); }

.support-body { padding: 60px 32px 0; }

/* Anchor targets sit under the sticky header without it. No smooth scrolling on
   this site (see the note in section 2), so this is the whole offset story. */
.support-section, .qa { scroll-margin-top: 80px; }

.support-section + .support-section { margin-top: 60px; }

.support-h2 {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.015em;
  margin: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.qa { padding: 26px 0; }
.qa + .qa { border-top: 1px solid var(--line); }

.qa h3 {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 500;
  margin: 0 0 10px;
  text-wrap: pretty;
}

.qa h3 a {
  color: var(--text);
  text-decoration: none;
  transition: color .18s ease;
}
.qa h3 a:hover { color: var(--accent-2); }

/* Arriving from a deep link — colour the question so it is obvious which one. */
.qa:target h3 a { color: var(--accent-2); }

.qa p {
  margin: 0;
  color: var(--text-2);
  line-height: 1.65;
  font-size: 14.5px;
  text-wrap: pretty;
}
.qa p + p { margin-top: 14px; }
.qa .code { font-size: 13px; }
.qa h3 .code { font-size: 14px; color: inherit; }

.qa-list {
  margin: 12px 0 0;
  padding-left: 22px;
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 1.65;
}
.qa-list li + li { margin-top: 9px; }
.qa-list li::marker { color: var(--accent-2); font-family: var(--mono); font-size: 13px; }

/* .brew is display: flex, so it would stretch the full column width on its own.
   The flex parent makes it a flex item and it sizes to its content instead. */
.qa-cta { display: flex; margin: 14px 0; }

.still-stuck-section { padding: 64px 32px 0; }

.still-stuck { text-align: center; padding: 40px 28px; }
.still-stuck h2 { font-family: var(--display); font-size: 22px; font-weight: 600; margin: 0 0 8px; }
.still-stuck p { color: var(--text-2); font-size: 14.5px; line-height: 1.6; margin: 0 0 24px; }

/* ------------------------------------------------------------ 12. Responsive
   The source design is a fixed 1120px desktop composition. These rules keep it
   readable below that; nothing here changes the desktop rendering. */

/* The three feature cards go straight from three across to stacked at the 860px
   breakpoint below. A two-column step in between leaves an odd 2-over-1 shape,
   since there are exactly three of them. Three across still fits at the bottom
   of its range: at 861px the cards are 252px wide with a 198px text column. */

/* Between the 60px and 40px headline sizes the container gets narrower than line
   1 of the headline (914px at 60px), so it would wrap to three lines and tip the
   hero down the page. 50px needs only 752px and holds the authored two lines all
   the way to the 861px boundary. A half-screen window on a 1920 display lands
   right in this band. */
@media (max-width: 1000px) and (min-width: 861px) {
  .hero h1 { font-size: 50px; }
}

@media (max-width: 860px) {
  /* Scale the decorative glows to the viewport so they stay fully visible
     instead of relying on body's overflow clip to hide their tails. */
  .hero-glow { width: 100%; height: 320px; }
  .cta-glow { width: 100%; height: 300px; }

  /* --- header: inline links move into the hamburger panel --- */
  .site-header .wrap { padding: 10px 16px; gap: 12px; }
  .site-nav { gap: 8px; }
  .site-nav .nav-link { display: none; }
  .site-nav .icon-btn { display: none; }  /* GitHub lives in the panel instead */
  .brand { min-height: 44px; }

  .theme-toggle button { width: 44px; height: 44px; }
  .theme-toggle button svg { width: 15px; height: 15px; }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    padding: 0;
    border-radius: 9px;
    background: var(--bg-3);
    border: 1px solid var(--line-2);
    color: var(--text);
    cursor: pointer;
    flex: 0 0 auto;
  }
  .nav-toggle svg { width: 20px; height: 20px; }

  .mobile-nav {
    display: block;
    padding: 4px 16px 12px;
    border-top: 1px solid var(--line);
  }
  .mobile-nav[hidden] { display: none; }
  .mobile-nav a {
    display: flex;
    align-items: center;
    min-height: 52px;
    color: var(--text);
    text-decoration: none;
    font-size: 16px;
    border-bottom: 1px solid var(--line);
  }
  .mobile-nav a:last-child { border-bottom: none; }

  /* --- hero --- */
  .hero { padding: 56px 20px 8px; }
  .hero h1 { font-size: 40px; }
  .hero-lede { font-size: 16.5px; }
  .hero-lede .code { font-size: 15px; }

  .badge { font-size: 12.5px; padding: 7px 14px; }

  .brew { gap: 10px; padding: 5px 5px 5px 14px; }
  .brew-cmd { font-size: 13px; }
  .brew-copy { padding: 11px 14px; font-size: 13px; }
  .hero-note { font-size: 13px; }

  .cap { font-size: 16px; padding: 0 4px; }
  .cap .code { font-size: 14.5px; }

  /* --- sections --- */
  .section-head h2 { font-size: 30px; }
  .section-head { margin-bottom: 36px; }

  #features { padding: 72px 20px 32px; }
  #faq { padding: 56px 20px 32px; }
  .cta-section { padding: 56px 20px; }

  .grid-3 { grid-template-columns: 1fr; gap: 14px; }
  .feature p .code { font-size: 13px; }

  .cta { padding: 44px 24px; }
  .cta h2 { font-size: 28px; margin-bottom: 24px; }

  .faq-item summary { font-size: 15.5px; }

  /* --- support page --- */
  .page-head { padding: 48px 20px 0; }
  .page-head h1 { font-size: 32px; }
  .page-lede { font-size: 16px; }

  /* Each pill is its own row on a phone, so it clears the 44px tap target. */
  .jump-nav { padding: 26px 20px 0; gap: 8px; }
  .jump-nav a { flex: 1 1 100%; text-align: center; min-height: 44px; display: flex; align-items: center; justify-content: center; font-size: 15px; }

  .support-body { padding: 44px 20px 0; }
  .support-section, .qa { scroll-margin-top: 76px; }
  .support-section + .support-section { margin-top: 48px; }
  .support-h2 { font-size: 21px; }
  .qa h3 { font-size: 16px; }

  .still-stuck-section { padding: 48px 20px 0; }
  .still-stuck { padding: 32px 20px; }

  /* --- footer: stacked links, each a full-width 44px+ target --- */
  .footer-top { padding: 32px 20px; gap: 20px; }
  .footer-tag { font-size: 12px; }
  .footer-links { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .footer-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 15px;
    border-bottom: 1px solid var(--line);
  }
  .footer-link:last-child { border-bottom: none; }
  .footer-bar .wrap { padding: 18px 20px; font-size: 13px; }
}

@media (max-width: 560px) {
  .hero h1 { font-size: 32px; }
  .brew { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px; }
  .brew-cmd { justify-content: center; font-size: 12.5px; }
  .brew-copy { justify-content: center; }
  .cta-actions { flex-direction: column; align-items: stretch; }
  .btn-ghost { justify-content: center; min-height: 48px; }
}

/* Below this width — or when the visitor asks for reduced motion — the sticky
   scrolljack is dropped and the stage shows the payoff on its own: the Quick Look
   panel at real size, with the Finder window cropped away. Scaling the whole
   920x568 device down to fit a phone put its labels at ~5px, which made the most
   persuasive thing on the page unreadable. Here nothing is scaled — the panel is
   full width and the previewed page reflows, exactly as a responsive Blade view
   would when Quick Blade renders it into a narrow preview. */
@media (max-width: 700px), (prefers-reduced-motion: reduce) {
  #qb-track { height: auto !important; }
  .stage { position: static; height: auto; padding: 8px 16px 56px; overflow: visible; }

  .caps { position: static; height: auto; margin-bottom: 20px; }
  .cap { position: static; opacity: 1 !important; }
  /* The hero lede directly above already says "select a file and press space",
     so only the payoff caption earns its place here. */
  #qb-cap1, #qb-cap2 { display: none; }

  .device-frame { width: 100%; max-width: 920px; height: auto; }
  #qb-device { width: 100%; height: auto; transform: none !important; }
  #qb-finder { display: none; }
  #qb-ql {
    position: static;
    width: 100%;
    height: auto;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .45);
  }
  .q-viewport { height: auto; }
  .progress-wrap { display: none; }

  /* The titlebar filename is absolutely centred across the full width, which
     overlaps the toolbar controls once the panel is phone-width. Put it back in
     flow as a flex item: it then takes whatever space the controls leave and
     truncates, so no inset needs re-tuning if the button labels change. */
  .q-title {
    position: static;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .q-spacer { display: none; }

  /* The previewed page, reflowed for the narrow panel. */
  .nw-nav { padding: 13px 18px; }
  .nw-links { gap: 0; }
  .nw-links span:not(.btn) { display: none; }

  .nw-hero { flex-direction: column; align-items: stretch; gap: 22px; padding: 26px 18px 22px; }
  .nw-h1 { font-size: 26px; }
  .nw-p { max-width: none; margin: 12px 0 18px; }
  .nw-panel { flex: 1 1 auto; }

  .nw-cards { flex-direction: column; padding: 0 18px 22px; }
  .nw-foot { padding: 14px 18px; }
}