/* TeleFolder site — one stylesheet, hand-written.
   A calm, native-macOS look: the system font, flat surfaces in macOS's
   light and dark greys, hairline borders, soft shadows and one accent
   colour (cyan). Light and dark appearances: the page follows the system
   (prefers-color-scheme) unless the visitor picks one with the toggle,
   which sets data-theme="light"|"dark" on <html> (assets/js/theme.js).
   Every animation runs only under prefers-reduced-motion: no-preference.
   Part two of this file is the hero demo (the search panel and Finder
   window), ported from the previous site, with its own light/dark styles. */

/* ================= Tokens ================= */

:root {
  color-scheme: light;

  --bg: #FBFBFD;
  --bg-alt: #F5F5F7;
  --surface: #FFFFFF;
  --surface-2: #F5F5F7;
  --surface-3: #E8E8ED;
  --fg: #1D1D1F;
  --fg-2: #6E6E73;
  --fg-3: #6E6E73;
  --line: rgba(0, 0, 0, 0.1);
  --line-strong: rgba(0, 0, 0, 0.16);
  --accent: #0E7490;          /* links and accent text: 5.4:1 on white */
  --accent-fill: #0891B2;     /* filled controls, focus rings */
  --accent-tint: rgba(8, 145, 178, 0.1);
  --accent-tint-hover: rgba(8, 145, 178, 0.16);
  --on-accent: #FFFFFF;
  --nav-bg: rgba(251, 251, 253, 0.72);
  --kbd-bg: linear-gradient(#FFFFFF, #F2F2F5);
  --kbd-edge: rgba(0, 0, 0, 0.18);
  --switch-off: rgba(0, 0, 0, 0.12);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -12px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.08), 0 24px 60px -20px rgba(0, 0, 0, 0.28);

  /* The demo's desktop and macOS materials (light appearance). */
  --wall-a: #E6E8EE;
  --wall-b: #C9CDD6;
  --menubar: rgba(255, 255, 255, 0.55);
  --menubar-ink: rgba(20, 20, 22, 0.6);
  --panel-bg: rgba(246, 246, 250, 0.7);
  --panel-ink: rgba(20, 20, 22, 0.92);
  --panel-ink-dim: rgba(20, 20, 22, 0.55);
  --panel-hair: rgba(0, 0, 0, 0.12);
  --panel-sel: rgb(10, 95, 215);
  --panel-btn-bg: rgba(0, 0, 0, 0.06);
  --panel-scroll-bg: rgba(0, 0, 0, 0.08);
  --panel-thumb-bg: rgba(0, 0, 0, 0.28);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 12px;
  --r-xl: 16px;

  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 40px;
  --s-6: 48px;
  --s-8: 64px;
  --s-10: 80px;
  --s-12: 96px;
  --s-16: 128px;

  --max: 1120px;
  --gutter: 24px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --sys: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

/* Dark: for the system setting (unless the visitor chose light), and for an
   explicit choice of dark. The two blocks are kept identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #161617;
    --bg-alt: #0F0F10;
    --surface: #1C1C1E;
    --surface-2: #2C2C2E;
    --surface-3: #3A3A3C;
    --fg: #F5F5F7;
    --fg-2: #A1A1A6;
    --fg-3: #8E8E93;
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.14);
    --accent: #3FD0E8;
    --accent-fill: #06B6D4;
    --accent-tint: rgba(6, 182, 212, 0.14);
    --accent-tint-hover: rgba(6, 182, 212, 0.22);
    --on-accent: #0B0F19;
    --nav-bg: rgba(22, 22, 23, 0.72);
    --kbd-bg: linear-gradient(#3A3A3C, #2E2E31);
    --kbd-edge: rgba(0, 0, 0, 0.6);
    --switch-off: rgba(255, 255, 255, 0.16);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -16px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.35), 0 30px 60px -20px rgba(0, 0, 0, 0.7);
    --wall-a: #2A2D34;
    --wall-b: #121316;
    --menubar: rgba(30, 32, 38, 0.55);
    --menubar-ink: rgba(255, 255, 255, 0.6);
    --panel-bg: rgba(52, 56, 66, 0.74);
    --panel-ink: rgba(255, 255, 255, 0.96);
    --panel-ink-dim: rgba(255, 255, 255, 0.62);
    --panel-hair: rgba(255, 255, 255, 0.14);
    --panel-btn-bg: rgba(28, 31, 35, 0.9);
    --panel-scroll-bg: rgba(10, 10, 12, 0.7);
    --panel-thumb-bg: rgba(150, 150, 150, 0.9);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #161617;
  --bg-alt: #0F0F10;
  --surface: #1C1C1E;
  --surface-2: #2C2C2E;
  --surface-3: #3A3A3C;
  --fg: #F5F5F7;
  --fg-2: #A1A1A6;
  --fg-3: #8E8E93;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --accent: #3FD0E8;
  --accent-fill: #06B6D4;
  --accent-tint: rgba(6, 182, 212, 0.14);
  --accent-tint-hover: rgba(6, 182, 212, 0.22);
  --on-accent: #0B0F19;
  --nav-bg: rgba(22, 22, 23, 0.72);
  --kbd-bg: linear-gradient(#3A3A3C, #2E2E31);
  --kbd-edge: rgba(0, 0, 0, 0.6);
  --switch-off: rgba(255, 255, 255, 0.16);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -16px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.35), 0 30px 60px -20px rgba(0, 0, 0, 0.7);
  --wall-a: #2A2D34;
  --wall-b: #121316;
  --menubar: rgba(30, 32, 38, 0.55);
  --menubar-ink: rgba(255, 255, 255, 0.6);
  --panel-bg: rgba(52, 56, 66, 0.74);
  --panel-ink: rgba(255, 255, 255, 0.96);
  --panel-ink-dim: rgba(255, 255, 255, 0.62);
  --panel-hair: rgba(255, 255, 255, 0.14);
  --panel-btn-bg: rgba(28, 31, 35, 0.9);
  --panel-scroll-bg: rgba(10, 10, 12, 0.7);
  --panel-thumb-bg: rgba(150, 150, 150, 0.9);
}
:root[data-theme="light"] { color-scheme: light; }

/* ================= Base ================= */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
  scroll-padding-top: 72px;
  background: var(--bg);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  font: 400 17px/1.5 var(--font);
  letter-spacing: -0.01em;
  color: var(--fg-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; }
img { height: auto; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
b, strong { color: var(--fg); font-weight: 600; }
p { margin: 0; }
h1, h2, h3 { margin: 0; color: var(--fg); font-family: var(--display); }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent-fill) 60%, transparent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Keycaps for shortcuts; job numbers and paths in the system monospace. */
kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 6px;
  border-radius: 5px;
  font: 500 0.82em/1.6 var(--sys);
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--fg);
  background: var(--kbd-bg);
  box-shadow: 0 0 0 0.5px var(--kbd-edge), 0 1px 0 var(--kbd-edge);
  white-space: nowrap;
  vertical-align: 0.06em;
}
code, .mono {
  font-family: var(--mono);
  font-size: 0.88em;
  letter-spacing: 0;
}
code {
  padding: 1px 5px;
  border-radius: 5px;
  color: var(--fg);
  background: var(--surface-2);
  white-space: nowrap;
}

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

.skip-link {
  position: absolute;
  left: var(--s-2);
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  font-weight: 600;
  color: var(--on-accent);
  background: var(--accent-fill);
}
.skip-link:focus { top: var(--s-1); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 1em; height: 1em; flex: none; vertical-align: -0.12em; }

.wrap {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ================= Type ================= */

h1, .h1 {
  font-size: 56px;
  line-height: 1.07;
  font-weight: 700;
  letter-spacing: -0.028em;
}
h2, .h2 {
  font-size: 40px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.022em;
}
h3 {
  font-size: 19px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.012em;
}

/* A small sentence-case label above a heading. */
.eyebrow {
  margin-bottom: 10px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--accent);
}

.lead { font-size: 19px; line-height: 1.5; color: var(--fg-2); letter-spacing: -0.012em; }
.grad { color: inherit; }
.line { display: inline-block; }

/* ================= Buttons ================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 20px;
  border: 0;
  border-radius: 980px;
  font: 500 17px/1.2 var(--font);
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn:hover { text-decoration: none; }
/* The one tinted accent button style (macOS/iOS "tinted"). */
.btn-primary, .btn-secondary {
  color: var(--accent);
  background: var(--accent-tint);
}
.btn-primary:hover, .btn-secondary:hover { color: var(--accent); background: var(--accent-tint-hover); }
.btn-sm { min-height: 32px; padding: 5px 14px; font-size: 15px; }
.btn .i { width: 13px; height: 13px; }

/* Apple's badge is used as is: black, unmodified, at least 40px tall, with
   clear space of at least a quarter of its height around it. */
.btn-badge, .nav-badge { display: inline-flex; flex: none; border-radius: 9px; }
.btn-badge img { display: block; height: 44px; width: auto; }
.nav-badge img { display: block; height: 40px; width: auto; }
.btn-badge:hover, .nav-badge:hover { text-decoration: none; }
.pill-soon {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 980px;
  font-size: 15px;
  color: var(--fg-2);
  background: var(--surface-2);
}
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }

/* ================= Nav: a frosted toolbar ================= */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid var(--line-strong);
}
.nav-inner { display: block; }
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: 60px;
  padding-block: 10px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 19px/1 var(--display);
  letter-spacing: -0.02em;
  color: var(--fg);
}
.brand:hover { color: var(--fg); text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 22px; height: 22px; color: var(--fg); }
.brand-mark svg { width: 22px; height: 22px; }
.nav-right { display: flex; align-items: center; gap: var(--s-3); }
.nav-links { display: flex; gap: var(--s-3); }
.nav-links a { font-size: 14px; color: var(--fg); opacity: 0.8; }
.nav-links a:hover { opacity: 1; text-decoration: none; }

/* The appearance toggle: a moon in light mode, a sun in dark mode. */
.theme-toggle {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: var(--fg);
  background: transparent;
  cursor: pointer;
}
.theme-toggle:hover { background: var(--surface-2); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

@media (max-width: 760px) {
  .nav-links { display: none; }
}

/* ================= Hero ================= */

.hero {
  position: relative;
  padding-top: var(--s-10);
  overflow-x: clip;
}
.hero-glow { display: none; }

/* Copy, then the demo, stacked; side by side from 1024px, the copy centred
   against the demo. In two columns the demo's stage keeps its full logical
   size (--stage-w × --stage-h) and is scaled to fit its column by
   hero-controller.js (.stage-fit.is-fit, --fit), so nothing is cropped. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-8);
  align-items: center;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}
.hero-copy .eyebrow { color: var(--fg-2); font-weight: 500; }
.hero-copy h1 { max-width: 14em; }
.hero-copy .lead { max-width: 36em; margin-top: var(--s-3); }
.hero-copy .cta-row { justify-content: center; margin-top: var(--s-4); }
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--s-2);
  font-size: 14px;
  color: var(--fg-2);
}
.hero-meta .nw { white-space: nowrap; }
.hero-meta .sep { margin-inline: 8px; opacity: 0.6; }
.hero-terms {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin-top: var(--s-3);
  font-size: 15px;
  color: var(--fg-2);
}
.hero-terms li { display: inline-flex; align-items: center; gap: 6px; }
.hero-terms .i { color: var(--accent); }

.hero-demo { min-width: 0; }
.stage-fit { --stage-w: 780px; --stage-h: 560px; }
.stage-fit.is-fit {
  width: calc(var(--stage-w) * var(--fit, 1));
  height: calc(var(--stage-h) * var(--fit, 1));
}
.stage-fit.is-fit > .stage {
  width: var(--stage-w);
  height: var(--stage-h);
  transform: scale(var(--fit, 1));
  transform-origin: 0 0;
}

@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: minmax(340px, 0.86fr) minmax(0, 1.14fr);
    column-gap: var(--s-6);
  }
  .hero-copy { align-items: flex-start; text-align: left; }
  .hero-copy h1 { font-size: clamp(44px, 4.2vw, 56px); }
  .hero-copy .lead { font-size: 18px; }
  .hero-copy .cta-row, .hero-meta, .hero-terms { justify-content: flex-start; }
  .hero-terms { flex-direction: column; gap: 6px; }
  .hero-demo .stage-hint, .hero-demo .stage-note { text-align: left; }
}

/* ================= Sections ================= */

.section { padding-block: var(--s-12); }
.section-alt { background: var(--bg-alt); }
.section-head { max-width: 44em; margin-bottom: var(--s-6); }
.section-head .lead { margin-top: var(--s-2); }
.section-flush { padding-top: 0; }
.divider { display: none; }

.card {
  position: relative;
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: 0 0 0 0.5px var(--line-strong), var(--shadow-card);
}
.card-deep { background: var(--surface); }
.card h3 { margin-bottom: 6px; }
.card p { font-size: 16px; }
.card p + p { margin-top: var(--s-1); }
.card-glyph { width: 32px; height: 32px; margin-bottom: var(--s-2); color: var(--accent); }

/* ---------- The scene (a clean card, not a terminal) ---------- */

.log {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--s-6);
  align-items: start;
}
.log-head .lead { margin-top: var(--s-2); }
.log-lines { padding: var(--s-1) 0; }
.log-lines ol { padding: 0; }
.log-lines li {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: var(--s-2);
  padding: 14px var(--s-3);
  font-size: 16px;
  color: var(--fg);
}
.log-lines li + li { border-top: 0.5px solid var(--line); }
.log-lines time { font-size: 15px; font-variant-numeric: tabular-nums; color: var(--fg-3); line-height: 1.6; }
.log-lines .dir { display: block; margin-top: 2px; font-size: 14px; color: var(--fg-3); }
.log-lines .log-turn time { color: var(--accent); font-weight: 600; }

/* ---------- Performance ---------- */

.spec {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-2);
}
.spec li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: 0 0 0 0.5px var(--line-strong), var(--shadow-card);
}
.spec-top { min-height: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; }
.spec strong { font-size: 17px; }
.spec span.d { font-size: 15px; line-height: 1.5; }
.spec-num { font: 700 30px/1 var(--display); letter-spacing: -0.02em; color: var(--fg); }
.spec-top .mono { font-family: var(--font); font-size: 15px; color: var(--fg-2); }
.spec-keys { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--fg-3); font-size: 14px; }
.spec-keys:hover { text-decoration: none; }
/* SMB / NFS / AFP / WebDAV as a native segmented control. */
.spec .spec-top[aria-label] { gap: 0; padding: 2px; border-radius: 8px; background: var(--surface-2); }
.spec .pill {
  padding: 3px 9px;
  border-radius: 6px;
  font: 500 13px/1.3 var(--sys);
  color: var(--fg);
  background: transparent;
}
.spec .pill:first-child { background: var(--surface); box-shadow: 0 0 0 0.5px var(--line-strong), 0 1px 2px rgba(0, 0, 0, 0.1); }

.path {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-6);
  counter-reset: step;
}
.path li { position: relative; font-size: 15px; }
.path li::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-bottom: 12px;
  border-radius: 50%;
  font: 600 13px/1 var(--sys);
  color: var(--fg);
  background: var(--surface-2);
}
.path strong { display: block; margin-bottom: 4px; font-size: 17px; }
.path-note { margin-top: var(--s-4); font-size: 14px; color: var(--fg-3); }

.versus {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-10);
}
.vs { min-width: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.vs-panel {
  flex: 1;
  padding: 12px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: 0 0 0 0.5px var(--line-strong), var(--shadow-card);
  font-family: var(--sys);
  font-size: 14px;
}
.vs-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  margin-bottom: 8px;
  border-radius: 8px;
  color: var(--fg);
  background: var(--surface-2);
}
.vs-field .i { color: var(--fg-3); }
.vs-spin {
  width: 13px;
  height: 13px;
  margin-left: auto;
  border: 2px solid var(--line-strong);
  border-top-color: var(--fg-2);
  border-radius: 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .vs-spin { animation: vs-spin 0.9s linear infinite; }
}
@keyframes vs-spin { to { transform: rotate(360deg); } }
.vs-results li { display: flex; gap: 8px; align-items: baseline; padding: 6px 8px; color: var(--fg-2); border-radius: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vs-kind { flex: none; width: 34px; font-size: 11px; color: var(--fg-3); }
.vs-more { color: var(--fg-3); font-style: italic; }
.vs-hit { color: #fff !important; background: var(--panel-sel); }
.vs-hit i { margin-left: auto; font-style: normal; font-size: 12px; opacity: 0.8; }
.vs-done { margin-top: 10px; padding: 0 8px; font-size: 13px; color: var(--fg-2); }
.vs figcaption { font-size: 16px; }
.vs-groan { color: var(--fg-3); }

.compare {
  margin-top: var(--s-5);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 0 0 0.5px var(--line-strong), var(--shadow-card);
}
.compare-row {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1.3fr;
  border-top: 0.5px solid var(--line);
}
.compare-row:first-child { border-top: 0; }
.compare-row > span { padding: 16px 20px; font-size: 15px; }
.compare-row > [role="rowheader"] { color: var(--fg); font-weight: 600; }
.compare-head > span { font-size: 13px; font-weight: 600; color: var(--fg-2); background: var(--surface-2); }
.compare-us { color: var(--fg); }
.compare-head .compare-us { color: var(--fg); display: flex; align-items: center; gap: 6px; }

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

.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
}
.bento .card { display: flex; flex-direction: column; }
.bento .span-2 { grid-column: span 2; }
.card-before { margin-bottom: 4px; font-size: 14px; color: var(--fg-3); }
.card ul.dash { margin-top: var(--s-2); display: grid; gap: 6px; font-size: 15px; }
.card ul.dash li { position: relative; padding-left: 16px; }
.card ul.dash li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--fg-3); }
.card .pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: var(--s-3); }
.card .keys { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: auto; padding-top: var(--s-3); font-size: 14px; color: var(--fg-3); }
.card-glow { background: var(--surface); }

.filing {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);
  gap: var(--s-5);
  align-items: start;
  margin-top: var(--s-2);
}
.filing-gap { margin-top: var(--s-2); }
.filing-key { margin-top: var(--s-2); display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fg-3); }
.key-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-fill); }
.trees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.tree {
  margin: 0;
  padding: var(--s-2);
  border-radius: 10px;
  background: var(--surface-2);
  font: 13px/1.5 var(--sys);
  color: var(--fg-2);
  min-width: 0;
}
.tree figcaption { margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--fg); }
.tree ul ul { margin-left: 7px; padding-left: 12px; border-left: 0.5px solid var(--line-strong); }
.tree li { padding-top: 4px; overflow-wrap: anywhere; }
.tree .i { width: 13px; height: 13px; margin-right: 6px; color: var(--fg-3); vertical-align: -2px; }
.tree .t-job { color: var(--fg); }
.tree .t-job .i { color: var(--accent-fill); }

/* ---------- Audience ---------- */

.audience { padding: 0; }
.audience h2 { max-width: 20em; }
.audience .lead { max-width: 44em; margin-top: var(--s-2); }
.trade-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-2);
  margin-top: var(--s-5);
}
.trade {
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: 0 0 0 0.5px var(--line-strong), var(--shadow-card);
  font-size: 15px;
}
.trade-who { margin-bottom: 6px; font-weight: 600; color: var(--fg); font-size: 17px; }
.trade-eg { margin-top: var(--s-2); display: grid; gap: 6px; }
.trade-eg code { display: block; font-size: 12px; white-space: normal; overflow-wrap: anywhere; color: var(--fg-2); }
.fine { margin-top: var(--s-3); font-size: 13px; color: var(--fg-3); }

/* ---------- Tour ---------- */

.video-section { display: grid; gap: var(--s-4); margin-bottom: var(--s-6); }
.motion { margin: 0; }
.motion-frame { border-radius: var(--r-md); overflow: hidden; background: #000; box-shadow: var(--shadow-lg); }
.motion-frame video { display: block; width: 100%; height: auto; }
.motion figcaption { margin-top: var(--s-2); text-align: center; font-size: 15px; }

.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.shot { display: flex; flex-direction: column; gap: var(--s-3); }
.shot-full { grid-column: 1 / -1; }
.shot-copy p { margin-top: 4px; }
.shot-visual { display: flex; justify-content: center; margin-top: auto; }
.win-panel { display: block; width: min(100%, 300px); border-radius: 12px; box-shadow: 0 0 0 0.5px var(--line-strong), var(--shadow-lg); }
/* Each screenshot comes in both appearances; the page shows the one that
   matches the current theme. */
.shot-dark { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shot-dark { display: block !important; }
  :root:not([data-theme="light"]) .shot-light { display: none !important; }
}
:root[data-theme="dark"] .shot-dark { display: block !important; }
:root[data-theme="dark"] .shot-light { display: none !important; }

.wiz { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
.wiz-step {
  padding: var(--s-2);
  border-radius: 10px;
  background: var(--surface-2);
  font-family: var(--sys);
  font-size: 13px;
  min-width: 0;
}
.wiz-n { font-size: 12px; color: var(--fg-3); }
.wiz-q { margin: 4px 0 10px; font-weight: 600; color: var(--fg); font-size: 14px; }
.wiz-q-sub { margin-top: var(--s-2); }
.wiz-label { margin-bottom: 8px; color: var(--fg-2); }
.wiz-opts { display: grid; gap: 6px; }
.wiz-opts-grid { grid-template-columns: 1fr 1fr; }
.wiz-opts li {
  position: relative;
  padding: 8px 10px 8px 30px;
  border-radius: 8px;
  color: var(--fg-2);
  background: var(--surface);
  box-shadow: 0 0 0 0.5px var(--line);
}
/* Native-style radio buttons. */
.wiz-opts li::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  background: var(--surface);
}
.wiz-opts li.on { color: var(--fg); box-shadow: 0 0 0 1px var(--accent-fill); }
.wiz-opts li.on::before { background: var(--accent-fill); box-shadow: inset 0 0 0 3.5px var(--accent-fill), inset 0 0 0 6px #fff; }
.wiz-opts li small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--fg-3); }
.wiz-locs { display: grid; gap: 6px; }
.wiz-locs li { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; background: var(--surface); color: var(--fg); }
.wiz-locs .i { color: var(--accent-fill); margin-top: 2px; }
.wiz-locs small { display: block; font-size: 11px; color: var(--fg-3); overflow-wrap: anywhere; }
.wiz-preview { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: var(--surface); }
.wiz-preview-head { display: flex; justify-content: space-between; font-weight: 600; color: var(--fg); }
.wiz-preview-head span { font-weight: 400; font-size: 12px; color: var(--fg-3); }
.wiz-preview ul { margin-top: 6px; display: grid; gap: 3px; color: var(--fg-2); font-size: 12px; }
.wiz-toggles { margin-top: 10px; display: grid; gap: 8px; }
.wiz-toggles li { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--fg); }
/* A native-style switch, shown on. */
.wiz-switch { width: 32px; height: 19px; border-radius: 999px; background: var(--accent-fill); position: relative; flex: none; }
.wiz-switch::after { content: ""; position: absolute; right: 2px; top: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.wiz-note { margin-top: var(--s-2); font-size: 13px; color: var(--fg-3); }

/* ---------- Pricing ---------- */

.pricing-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-2); }
.price-name { font-size: 17px; font-weight: 600; color: var(--fg); }
.price { margin-top: var(--s-1); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price-amt { font: 700 56px/1 var(--display); letter-spacing: -0.03em; color: var(--fg); }
.price-once { font-size: 17px; color: var(--fg-2); }
.price-after { margin-top: var(--s-1); }
.checks { margin-top: var(--s-3); display: grid; gap: 10px; font-size: 16px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; }
.checks .i { margin-top: 4px; color: var(--accent); }
.price-cta { margin-top: var(--s-4); }
.payback h3 { margin-bottom: var(--s-1); }
.payback p + p { margin-top: var(--s-2); }
.payback-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 16px; color: var(--fg); font-variant-numeric: tabular-nums; }
.payback-sum .op { color: var(--fg-3); }
.payback-table { width: 100%; margin-top: var(--s-2); border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.payback-table th, .payback-table td { padding: 10px 0; text-align: left; border-bottom: 0.5px solid var(--line); }
.payback-table th { font-size: 13px; font-weight: 600; color: var(--fg-2); }
.payback-table td:first-child { color: var(--fg); }

.teams {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-2);
  align-items: center;
}
.teams-copy p + p { margin-top: var(--s-2); }
.teams-copy h3 { margin-bottom: var(--s-1); }
.teams-steps { display: grid; gap: 8px; counter-reset: t; }
.teams-steps li {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 15px;
}
.teams-steps li::before {
  counter-increment: t;
  content: counter(t);
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font: 600 13px/1 var(--sys);
  color: var(--fg);
  background: var(--surface-3);
}

/* ================= Privacy ================= */

.privacy-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: var(--s-5); align-items: start; }
.promise-glyph { display: block; width: 40px; height: 40px; color: var(--accent); margin-bottom: var(--s-2); }
.card .promise-title, .promise-title { font: 700 28px/1.15 var(--display); color: var(--fg); letter-spacing: -0.02em; }
.policy h2 { font-size: 32px; }
.policy-date { margin-top: 6px; font-size: 14px; color: var(--fg-3); }
.policy h3 { margin-top: var(--s-4); margin-bottom: 6px; font-size: 17px; }
.policy-date + p { margin-top: var(--s-2); }

/* ================= Support ================= */

.support-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: var(--s-6); align-items: start; }
.support-intro p { margin-top: var(--s-2); }
.getting-started { margin-top: var(--s-4); }
.getting-started h3 { margin-bottom: 6px; }
.faq {
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: 0 0 0 0.5px var(--line-strong), var(--shadow-card);
  overflow: hidden;
}
.faq details + details { border-top: 0.5px solid var(--line); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
  padding: 15px 20px;
  font-weight: 500;
  font-size: 16px;
  color: var(--fg);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
/* A disclosure chevron, as in macOS lists. */
.faq summary::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-right: 4px;
  border-right: 1.6px solid var(--fg-3);
  border-bottom: 1.6px solid var(--fg-3);
  transform: rotate(-45deg);
}
.faq details[open] summary::after { transform: rotate(45deg); }
@media (prefers-reduced-motion: no-preference) {
  .faq summary::after { transition: transform 0.15s ease; }
}
.faq details p { padding: 0 20px 16px; font-size: 15px; }

/* ================= Closing ================= */

.closing { padding-block: var(--s-12); text-align: center; }
.closing-inner { display: flex; flex-direction: column; align-items: center; }
.closing-glyph {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--s-3);
  border-radius: 15px;
  color: var(--fg);
  background: var(--surface);
  box-shadow: 0 0 0 0.5px var(--line-strong), var(--shadow-card);
}
.closing-glyph svg { width: 34px; height: 34px; }
.closing p { margin-top: var(--s-2); }
.closing .cta-row { margin-top: var(--s-4); justify-content: center; }

/* ================= Footer ================= */

.footer {
  border-top: 0.5px solid var(--line-strong);
  background: var(--bg-alt);
  padding-block: var(--s-5);
  font-size: 13px;
}
.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-3) var(--s-5);
  align-items: start;
}
.footer-brand { display: flex; flex-direction: column; gap: 8px; }
.footer-brand .brand { font-size: 17px; }
.footer-tag { color: var(--fg-2); }
.footer-cta { margin-top: var(--s-1); }
.footer-cta .pill-soon { min-height: 36px; padding: 6px 14px; font-size: 13px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: flex-end; }
.footer-links a { color: var(--fg-2); }
.footer-links a:hover { color: var(--fg); }
.footer-base {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: var(--s-2);
  border-top: 0.5px solid var(--line);
  color: var(--fg-3);
}
.footer-base .build b { color: var(--fg-2); font-weight: 600; }

/* ================= 404 ================= */

.error-page {
  min-height: calc(100vh - 140px);
  display: grid;
  place-items: center;
  padding: var(--s-10) var(--gutter);
  text-align: center;
}
.error-page .lead { margin-top: var(--s-2); }
.error-page .cta-row { justify-content: center; margin-top: var(--s-4); }
.error-code { font-size: 17px; font-weight: 600; color: var(--fg-2); margin-bottom: var(--s-2); }

/* ================= Responsive ================= */

@media (max-width: 1000px) {
  .spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento .span-2 { grid-column: 1 / -1; }
  .trade-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wiz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filing { grid-template-columns: 1fr; }
  .log { grid-template-columns: 1fr; gap: var(--s-4); }
}

@media (max-width: 760px) {
  h1, .h1 { font-size: 40px; }
  h2, .h2 { font-size: 30px; }
  .lead { font-size: 17px; }
  .section { padding-block: var(--s-8); }
  .hero { padding-top: var(--s-6); }
  .versus { grid-template-columns: minmax(0, 1fr); }
  .compare-row { grid-template-columns: 1fr; }
  .compare-head { display: none; }
  .compare-row > span { padding: 6px 16px; }
  .compare-row > [role="rowheader"] { padding-top: 16px; }
  .compare-row > span:last-child { padding-bottom: 16px; }
  .compare-row > [role="cell"]::before { display: block; font-size: 12px; font-weight: 600; color: var(--fg-3); }
  .compare-row > [role="cell"]:nth-child(2)::before { content: "Spotlight & Finder search"; }
  .compare-row > [role="cell"].compare-us::before { content: "TeleFolder"; color: var(--accent); }
  .trees { grid-template-columns: 1fr; }
  .shots { grid-template-columns: 1fr; }
  .pricing-grid, .teams, .privacy-grid, .support-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-links { justify-content: flex-start; }
}

@media (max-width: 560px) {
  :root { --gutter: 16px; }
  h1, .h1 { font-size: 36px; }
  .card { padding: var(--s-3); }
  .spec, .path, .bento, .trade-cards, .wiz { grid-template-columns: 1fr; }
  .wiz-opts-grid { grid-template-columns: 1fr; }
  .nav-right { gap: 12px; }
  .price-amt { font-size: 44px; }
  .log-lines li { grid-template-columns: 44px 1fr; gap: 10px; padding-inline: 16px; }
}

@media (forced-colors: active) {
  .btn, .card, .nav { border: 1px solid CanvasText; }
}

@media print {
  .nav, .hero-demo { display: none; }
}

/* ================= TeleFolder's own touches =================
   The atomic starburst (#g-burst, assets/icons/burst.svg) is the one
   recurring motif: a faint oversized watermark behind the hero and a tiny
   burst before each section label. Cyan glows only on focus and hover, and
   section headings "arrive" once as they scroll in (motion permitting). */

.h-dim { color: var(--fg-2); }

.hero-burst {
  position: absolute;
  z-index: -1;
  top: -120px;
  right: -180px;
  width: 760px;
  height: 760px;
  color: var(--fg);
  opacity: 0.045;
  pointer-events: none;
}
.hero { isolation: isolate; }
@media (max-width: 1023px) {
  .hero-burst { top: -160px; right: 50%; transform: translateX(50%); width: 640px; height: 640px; }
}

.eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.eyebrow::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("../icons/burst.svg") center / contain no-repeat;
  mask: url("../icons/burst.svg") center / contain no-repeat;
}

/* A soft cyan glow on focus and hover — the only glow on the page. */
:focus-visible {
  outline: 2px solid var(--accent-fill);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-fill) 22%, transparent), 0 0 18px color-mix(in srgb, var(--accent-fill) 35%, transparent);
}
.btn-primary:hover, .btn-secondary:hover { box-shadow: 0 0 16px color-mix(in srgb, var(--accent-fill) 30%, transparent); }
.btn-badge:hover img, .nav-badge:hover img { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent-fill) 45%, transparent)); }
.theme-toggle:hover { box-shadow: 0 0 12px color-mix(in srgb, var(--accent-fill) 25%, transparent); }

/* Arrival: section headings materialise once as they scroll into view. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .section-head, .log-head, .audience > h2 {
      animation: arrive linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }
}
@keyframes arrive {
  from { opacity: 0; transform: translateY(14px); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}

@media (forced-colors: active) {
  .hero-burst { display: none; }
}

/* ================= Atmosphere =================
   Soft colour fields in the spirit of a macOS wallpaper: layered radial
   gradients (cyan, indigo, violet) over the page colour. Static, except an
   optional very slow drift of the hero field (transform only, off under
   reduced motion). The frosted nav and the demo's glass panels blur what's
   behind them, so they pick the colour up. */

:root {
  --atmo-base: linear-gradient(180deg, #EEF8FC 0%, #F4F3FD 55%, var(--bg) 100%);
  --atmo-cyan: rgba(34, 211, 238, 0.26);
  --atmo-indigo: rgba(129, 140, 248, 0.20);
  --atmo-violet: rgba(196, 181, 253, 0.28);
  --atmo-bloom: rgba(255, 255, 255, 0.85);
  --atmo-bloom-tint: rgba(103, 232, 249, 0.22);
  --wash-1: rgba(34, 211, 238, 0.09);
  --wash-2: rgba(167, 139, 250, 0.09);
  --wallpaper: url("../wallpaper-light.svg") center / cover no-repeat, #E4F6FD;
  --fg-2: #5F5F64;
  --fg-3: #636368;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --atmo-base: linear-gradient(180deg, #070B18 0%, #0D0E1C 55%, var(--bg) 100%);
    --atmo-cyan: rgba(6, 182, 212, 0.30);
    --atmo-indigo: rgba(79, 70, 229, 0.34);
    --atmo-violet: rgba(139, 92, 246, 0.24);
    --atmo-bloom: rgba(207, 250, 254, 0.20);
    --atmo-bloom-tint: rgba(34, 211, 238, 0.16);
    --wash-1: rgba(6, 182, 212, 0.08);
    --wash-2: rgba(124, 58, 237, 0.09);
    --wallpaper: url("../wallpaper-dark.svg") center / cover no-repeat, #2A1B6E;
    --fg-2: #A1A1A6;
    --fg-3: #8E8E93;
  }
}
:root[data-theme="dark"] {
  --atmo-base: linear-gradient(180deg, #070B18 0%, #0D0E1C 55%, var(--bg) 100%);
  --atmo-cyan: rgba(6, 182, 212, 0.30);
  --atmo-indigo: rgba(79, 70, 229, 0.34);
  --atmo-violet: rgba(139, 92, 246, 0.24);
  --atmo-bloom: rgba(207, 250, 254, 0.20);
  --atmo-bloom-tint: rgba(34, 211, 238, 0.16);
  --wash-1: rgba(6, 182, 212, 0.08);
  --wash-2: rgba(124, 58, 237, 0.09);
  --wallpaper: url("../wallpaper-dark.svg") center / cover no-repeat, #2A1B6E;
  --fg-2: #A1A1A6;
  --fg-3: #8E8E93;
}

/* The hero's colour field: it starts behind the nav (so the frosted bar
   tints at the top of the page) and fades into the page below. The bloom
   sits at the starburst's centre, as if the arrival flash lit the scene. */
.hero { --burst-x: calc(100% - 200px); --burst-y: 320px; }
.hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -61px -10% 0;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--burst-x) var(--burst-y), var(--atmo-bloom) 0, var(--atmo-bloom-tint) 90px, transparent 300px),
    radial-gradient(45% 55% at 80% 35%, var(--atmo-cyan), transparent 70%),
    radial-gradient(50% 60% at 12% 8%, var(--atmo-indigo), transparent 70%),
    radial-gradient(40% 45% at 52% 92%, var(--atmo-violet), transparent 70%),
    var(--atmo-base);
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent);
  mask-image: linear-gradient(180deg, #000 78%, transparent);
}
@media (max-width: 1023px) {
  .hero { --burst-x: 50%; --burst-y: 260px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: drift 60s ease-in-out infinite alternate; }
}
@keyframes drift {
  from { transform: translate3d(-1.5%, 0, 0); }
  to { transform: translate3d(1.5%, -1%, 0); }
}
.hero-burst { opacity: 0.06; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-burst { opacity: 0.08; }
}
:root[data-theme="dark"] .hero-burst { opacity: 0.08; }

/* The demo's desktop is a wallpaper in the same colours, so the search
   panel's and Finder's glass show it through their blur. */
.stage-wall { background: var(--wallpaper) !important; }

/* Further down: faint tinted washes on alternate sections, and a second
   colour pool around the pricing and closing calls to action. */
.section-wash.wash-a { background: radial-gradient(55% 60% at 0% 0%, var(--wash-1), transparent 70%), radial-gradient(45% 50% at 100% 100%, var(--wash-2), transparent 70%), var(--bg-alt); }
.section-wash.wash-b { background: radial-gradient(50% 70% at 100% 0%, var(--wash-2), transparent 70%), radial-gradient(45% 60% at 0% 100%, var(--wash-1), transparent 70%), var(--bg-alt); }
.section-wash.wash-pool { background: radial-gradient(45% 45% at 25% 35%, var(--wash-1), transparent 70%), radial-gradient(40% 50% at 80% 70%, var(--wash-2), transparent 70%), var(--bg-alt); }
.closing-pool {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.closing-pool::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(28% 50% at 50% 30%, var(--atmo-bloom-tint), transparent 70%),
    radial-gradient(40% 70% at 35% 70%, var(--atmo-indigo), transparent 70%),
    radial-gradient(40% 70% at 68% 60%, var(--atmo-cyan), transparent 70%);
  opacity: 0.8;
}

/* ================================================================
   Part two: the hero demo (ported from the previous site's stylesheet)
   ================================================================ */

/* ---------- Stage: the product in place ---------- */

.stage {
  --panel-right: max(5%, calc(50% - 470px));
  position: relative;
  margin-top: 0;
  height: 580px;
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-lg);
}
.stage-wall {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(170deg, var(--wall-a), var(--wall-b));
}
.stage::after {
  /* a soft inner edge, like glass over the screen */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.menubar {
  position: absolute;
  inset: 0 0 auto;
  height: 30px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  padding-inline: 18px;
  background: var(--menubar);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
  z-index: 2;
}
.mb-item { display: block; color: var(--menubar-ink); }
.mb-pill { width: 18px; height: 9px; border-radius: 3px; border: 1.5px solid currentColor; opacity: 0.7; }
.mb-pill-wide { width: 54px; height: 8px; border: 0; background: currentColor; opacity: 0.35; border-radius: 4px; }
.mb-dot { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0.7; }
.mb-glyph {
  position: absolute;
  right: calc(var(--panel-right) + 207px - 15px);
  top: 4px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 22px;
  border-radius: 6px;
  color: var(--fg);
  background: color-mix(in srgb, var(--fg) 16%, transparent);
}
.mb-glyph svg { width: 16px; height: 16px; }

.stage-window {
  position: absolute;
  left: 5%;
  top: 76px;
  width: min(56%, 640px);
  border-radius: 3.35%/3.94%;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.25), 0 30px 60px -20px rgba(0, 0, 0, 0.55), 0 50px 100px -30px rgba(0, 0, 0, 0.45);
}

/* ---------- The search panel, built to match the app's own ---------- */

.panel {
  --row: 24.5px;
  position: absolute;
  top: 38px;
  right: var(--panel-right);
  width: min(415px, calc(100% - 32px));
  border-radius: 16px;
  color: var(--panel-ink);
  background: var(--panel-bg);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  backdrop-filter: blur(30px) saturate(150%);
  box-shadow:
    inset 0 0 0 0.5px var(--panel-hair),
    0 0 0 0.5px rgba(0, 0, 0, 0.55),
    0 4px 10px rgba(0, 0, 0, 0.22),
    0 28px 60px -12px rgba(0, 0, 0, 0.55),
    0 60px 120px -30px rgba(0, 0, 0, 0.35);
  font-family: var(--sys);
  letter-spacing: 0;
  z-index: 1;
  transform-origin: 70% 0;
}
.p-search {
  position: relative;
  display: flex;
  align-items: center;
  height: 37px;
  padding: 0 12px 0 13px;
}
.p-mag { width: 14px; height: 14px; color: var(--panel-ink-dim); flex: none; }
.p-field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  height: 20px;
  margin-left: 7px;
  font-size: 15px;
  line-height: 20px;
}
.p-ph { position: absolute; left: 1px; color: var(--panel-ink-dim); opacity: 0; white-space: nowrap; }
.p-q { display: inline-flex; color: var(--panel-ink); }
.k { display: inline-block; overflow: hidden; max-width: 1em; }
.p-caret {
  display: inline-block;
  width: 2px;
  height: 18px;
  margin-left: 1px;
  border-radius: 1px;
  background: var(--panel-sel);
}
.p-clear {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background:
    linear-gradient(45deg, transparent 45%, var(--panel-bg) 45% 55%, transparent 55%) center / 7px 7px no-repeat,
    linear-gradient(-45deg, transparent 45%, var(--panel-bg) 45% 55%, transparent 55%) center / 7px 7px no-repeat,
    var(--panel-ink-dim);
}

.p-rows {
  position: relative;
  height: calc(var(--row) * 14);
  margin-bottom: 6px;
  overflow: hidden;
}
.p-list {
  position: absolute;
  inset: 0 0 auto;
  opacity: 0;
}
.p-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: var(--row);
  padding: 0 32px 0 16px;
  white-space: nowrap;
}
.p-list b {
  font-weight: 500;
  font-size: 13px;
  color: var(--panel-ink);
  overflow: hidden;
  text-overflow: ellipsis;
}
.p-list i {
  font-style: normal;
  font-size: 11px;
  color: var(--panel-ink-dim);
  flex: none;
  font-variant-numeric: tabular-nums;
}
.p-list em { font-style: normal; margin-left: 4px; }
.list-c { opacity: 1; }

.p-sel {
  position: absolute;
  left: 6px;
  right: 20px;
  top: 0;
  height: var(--row);
  border-radius: 5px;
  background: var(--panel-sel);
  transform: translateY(calc(var(--row) * 3));
}
.p-sel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #fff;
  opacity: 0;
}

.p-scroll {
  position: absolute;
  top: 2px;
  bottom: 2px;
  right: 4px;
  width: 9px;
  border-radius: 5px;
  background: var(--panel-scroll-bg);
}
.p-thumb {
  position: absolute;
  left: 1.5px;
  right: 1.5px;
  top: 2px;
  height: 46%;
  border-radius: 4px;
  background: var(--panel-thumb-bg);
}

.p-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 11px 4px 11px;
}
.p-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 22px;
  border-radius: 6px;
  background: var(--panel-btn-bg);
  color: var(--panel-ink);
}
.p-btn svg { width: 12px; height: 12px; }
.p-count {
  position: relative;
  margin-left: auto;
  font-size: 11px;
  color: var(--panel-ink-dim);
  font-variant-numeric: tabular-nums;
}
.p-count span { display: block; text-align: right; }
.c-a, .c-b { position: absolute; right: 0; top: 0; opacity: 0; }

.stage-note {
  margin-top: var(--s-2);
  text-align: center;
  font-size: 13px;
  color: var(--fg-3);
}

/* ---------- The folder window: a generic Mac-style window, drawn in CSS,
   that pops open once the demo "presses Return" on the selected row.
   Styled to match the app's own light/dark appearance, independent of the
   page's own palette. Statically (no JS, reduced motion) it simply sits
   open, since that's the demo's payoff frame. ---------- */

.folder-win {
  /* A Finder-style window: its own light/dark materials, independent of the
     page's palette, so it reads as the Mac's own UI. */
  --fd-win: #ffffff;
  --fd-side: rgba(236, 236, 240, 0.86);
  --fd-ink: #1d1d1f;
  --fd-dim: #6e6e73;
  --fd-sec: #98989d;
  --fd-hair: rgba(0, 0, 0, 0.09);
  --fd-ctl: rgba(0, 0, 0, 0.045);
  --fd-ctl-ring: rgba(0, 0, 0, 0.07);
  --fd-accent: #007aff;
  --fd-sel: rgba(0, 0, 0, 0.075);

  position: absolute;
  left: 46%;
  top: 46px;
  width: min(470px, calc(100% - 28px));
  transform: translateX(-50%);
  transform-origin: 50% 30%;
  display: flex;
  padding: 6px;
  gap: 0;
  border-radius: 18px;
  background: var(--fd-win);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.22),
    0 1px 1px rgba(0, 0, 0, 0.06),
    0 10px 24px -6px rgba(0, 0, 0, 0.28),
    0 34px 70px -14px rgba(0, 0, 0, 0.42);
  font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--fd-ink);
  z-index: 2;
  opacity: 1;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .folder-win {
    --fd-win: #1f1f21;
    --fd-side: rgba(48, 48, 52, 0.9);
    --fd-ink: #f5f5f7;
    --fd-dim: #a1a1a6;
    --fd-sec: #7c7c82;
    --fd-hair: rgba(255, 255, 255, 0.09);
    --fd-ctl: rgba(255, 255, 255, 0.07);
    --fd-ctl-ring: rgba(255, 255, 255, 0.08);
    --fd-accent: #0a84ff;
    --fd-sel: rgba(255, 255, 255, 0.1);
    box-shadow:
      0 0 0 0.5px rgba(255, 255, 255, 0.16),
      0 0 0 1px rgba(0, 0, 0, 0.6),
      0 10px 24px -6px rgba(0, 0, 0, 0.5),
      0 34px 70px -14px rgba(0, 0, 0, 0.7);
  }
}
:root[data-theme="dark"] .folder-win {
    --fd-win: #1f1f21;
    --fd-side: rgba(48, 48, 52, 0.9);
    --fd-ink: #f5f5f7;
    --fd-dim: #a1a1a6;
    --fd-sec: #7c7c82;
    --fd-hair: rgba(255, 255, 255, 0.09);
    --fd-ctl: rgba(255, 255, 255, 0.07);
    --fd-ctl-ring: rgba(255, 255, 255, 0.08);
    --fd-accent: #0a84ff;
    --fd-sel: rgba(255, 255, 255, 0.1);
    box-shadow:
      0 0 0 0.5px rgba(255, 255, 255, 0.16),
      0 0 0 1px rgba(0, 0, 0, 0.6),
      0 10px 24px -6px rgba(0, 0, 0, 0.5),
      0 34px 70px -14px rgba(0, 0, 0, 0.7);
  }


/* The sidebar: a rounded, inset glass panel, as in current macOS. */
.fd-side {
  flex: none;
  width: 142px;
  padding: 10px 8px 12px;
  border-radius: 13px;
  background: var(--fd-side);
  box-shadow: inset 0 0 0 0.5px var(--fd-hair), 0 1px 3px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.fd-lights { display: flex; gap: 7px; padding: 2px 4px 12px; }
.fd-lights span { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.18); }
.fd-lights span:nth-child(1) { background: #ff5f57; }
.fd-lights span:nth-child(2) { background: #febc2e; }
.fd-lights span:nth-child(3) { background: #28c840; }
.fd-sec { font-size: 10.5px; font-weight: 650; color: var(--fd-sec); padding: 8px 6px 3px; }
.fd-si {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 6px;
  border-radius: 7px;
  font-size: 12px;
  color: var(--fd-ink);
  white-space: nowrap;
}
.fd-si svg { width: 14px; height: 14px; flex: none; color: var(--fd-accent); }
.fd-si-on { background: var(--fd-sel); }

.fd-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fd-tool {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 6px 0 10px;
}
.fd-cap {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 28px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--fd-ctl);
  box-shadow: inset 0 0 0 0.5px var(--fd-ctl-ring);
  color: var(--fd-ink);
  flex: none;
}
.fd-cap svg { width: 15px; height: 15px; padding: 0 3px; box-sizing: content-box; }
.fd-back { transform: scaleX(-1); }
.fd-fwd { opacity: 0.3; }
.fd-title {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fd-find { width: 28px; padding: 0; justify-content: center; }
.fd-find svg { padding: 0; width: 13px; height: 13px; }

.fd-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 4px;
  padding: 14px 10px 16px;
  align-content: start;
  min-height: 214px;
}
.fd-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
  color: var(--fd-ink);
}
.fd-item > span { max-width: 100%; overflow-wrap: anywhere; }
.fd-fold { width: 58px; height: 46px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12)); }
.fd-docl { width: 38px; height: 46px; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.15)); }

.fd-path {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 10px 3px;
  border-top: 0.5px solid var(--fd-hair);
  font-size: 11px;
  color: var(--fd-dim);
  white-space: nowrap;
  overflow: hidden;
}
.fd-path i { font-style: normal; opacity: 0.6; padding: 0 1px; }
.fd-path b { font-weight: 500; color: var(--fd-ink); overflow: hidden; text-overflow: ellipsis; }
.fd-pi { width: 13px; height: 13px; flex: none; color: var(--fd-dim); }
.fd-pf { width: 15px; height: 12px; }

@media (max-width: 760px) {
  .fd-side { display: none; }
  .fd-tools { display: none; }
}
@media (max-width: 560px) {
  .fd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 0; }
  .fd-fold { width: 48px; height: 38px; }
  .fd-docl { width: 32px; height: 38px; }
}

/* ---------- The demo's animation: one 17-second loop. Typing begins
   promptly (under half a second in), narrows the list, moves the selection
   down with the arrow keys, "presses Return" (the flash), then the panel
   closes as the project's folder opens, holds, and closes again before the
   loop quietly resets. ---------- */

@media (prefers-reduced-motion: no-preference) {

  .panel { animation: panel-life 17s ease infinite; }
  .folder-win { animation: folder-life 17s ease infinite; }
  .mb-glyph { animation: mb-active 17s step-end infinite; }
  .k { animation: 17s step-end infinite; }
  .k1 { animation-name: k1; } .k2 { animation-name: k2; } .k3 { animation-name: k3; }
  .k4 { animation-name: k4; } .k5 { animation-name: k5; } .k6 { animation-name: k6; } .k7 { animation-name: k7; }
  .p-ph { animation: show-idle 17s step-end infinite; }
  .p-clear { animation: show-typed 17s step-end infinite; }
  .p-caret { animation: caret 1.1s step-end infinite; }
  .list-a, .c-a { animation: show-a 17s step-end infinite; }
  .list-b, .c-b { animation: show-b 17s step-end infinite; }
  .list-c, .c-c { animation: show-c 17s step-end infinite; }
  .p-thumb { animation: thumb 17s step-end infinite; }
  .p-sel { animation: select 17s step-end infinite; }
  .p-sel::after { animation: open-flash 17s step-end infinite; }
}

/* Timeline (of the 17s loop): 0–2.9% idle · 2.9–9.4% typing "library" and
   the list narrowing · 9.4–12.1% arrow-key selection · 15–16% the Return
   flash · 16.8–18.5% the panel closes · 17.6–20% the folder window opens ·
   20–34.7% it holds · 34.7–37.1% it closes · 38.2–40% the panel reopens,
   idle, resetting for the 40–100% rest before the loop repeats. */
@keyframes panel-life {
  0%, 16.8% { opacity: 1; transform: none; }
  18.5%, 38.2% { opacity: 0; transform: translateY(-8px) scale(0.985); }
  40%, 100% { opacity: 1; transform: none; }
}
@keyframes folder-life {
  0%, 17.6% { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.94); }
  20%, 34.7% { opacity: 1; transform: translateX(-50%); }
  37.1%, 100% { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.94); }
}
@keyframes mb-active {
  0% { background: color-mix(in srgb, var(--fg) 16%, transparent); }
  16.8% { background: color-mix(in srgb, var(--fg) 16%, transparent); }
  18% { background: transparent; }
  40% { background: color-mix(in srgb, var(--fg) 16%, transparent); }
}
@keyframes k1 { 0% { max-width: 0; } 2.9% { max-width: 1em; } 38.2% { max-width: 0; } }
@keyframes k2 { 0% { max-width: 0; } 3.8% { max-width: 1em; } 38.2% { max-width: 0; } }
@keyframes k3 { 0% { max-width: 0; } 4.6% { max-width: 1em; } 38.2% { max-width: 0; } }
@keyframes k4 { 0% { max-width: 0; } 5.4% { max-width: 1em; } 38.2% { max-width: 0; } }
@keyframes k5 { 0% { max-width: 0; } 6.2% { max-width: 1em; } 38.2% { max-width: 0; } }
@keyframes k6 { 0% { max-width: 0; } 7.1% { max-width: 1em; } 38.2% { max-width: 0; } }
@keyframes k7 { 0% { max-width: 0; } 7.9% { max-width: 1em; } 38.2% { max-width: 0; } }
@keyframes show-idle { 0% { opacity: 1; } 2.9% { opacity: 0; } 38.2% { opacity: 1; } }
@keyframes show-typed { 0% { opacity: 0; } 2.9% { opacity: 1; } 38.2% { opacity: 0; } }
@keyframes caret { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes show-a { 0% { opacity: 1; } 3.8% { opacity: 0; } 38.2% { opacity: 1; } }
@keyframes show-b { 0% { opacity: 0; } 3.8% { opacity: 1; } 4.6% { opacity: 0; } }
@keyframes show-c { 0% { opacity: 0; } 4.6% { opacity: 1; } 38.2% { opacity: 0; } }
@keyframes thumb { 0% { height: 9%; } 3.8% { height: 22%; } 4.6% { height: 46%; } 38.2% { height: 9%; } }
@keyframes select {
  0% { opacity: 0; transform: translateY(0); }
  9.4% { opacity: 1; transform: translateY(0); }
  10.3% { opacity: 1; transform: translateY(var(--row)); }
  11.2% { opacity: 1; transform: translateY(calc(var(--row) * 2)); }
  12.1% { opacity: 1; transform: translateY(calc(var(--row) * 3)); }
  18.5% { opacity: 0; transform: translateY(0); }
}
@keyframes open-flash {
  0% { opacity: 0; }
  15% { opacity: 0.32; }
  15.3% { opacity: 0; }
  15.7% { opacity: 0.32; }
  16% { opacity: 0; }
}

/* ---------- Hero: the hint under the live demo ---------- */

.stage-hint { margin-top: var(--s-2); text-align: center; font-size: 14px; color: var(--fg-2); }
.stage-hint[hidden] { display: none; }
.stage-hint kbd { font-size: 0.82em; }
.stage-hint + .stage-note { margin-top: 4px; }

/* ---------- The live hero (desktop, with JavaScript) ----------
   hero-controller.js swaps the stage's contents for these. The panel keeps
   the CSS demo's look (.panel, .p-search, .p-foot); the window behind it is
   Finder in column view. */

.stage.is-live { --panel-right: 4%; }
/* The live demo's Finder needs the width: a little more of the row goes
   to it on wide screens. */
@media (min-width: 1200px) {
  .hero-grid:has(.is-live) { column-gap: var(--s-5); }
}
.is-live .panel, .is-live .mb-glyph, .is-live .p-clear { animation: none; }

.is-live .mb-glyph {
  right: calc(var(--panel-right) + 190px - 15px);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.is-live .mb-glyph:hover { background: color-mix(in srgb, var(--fg) 10%, transparent); }
.is-live .mb-glyph.is-on { background: color-mix(in srgb, var(--fg) 16%, transparent); }

/* The search panel. */
.lp {
  top: 40px;
  width: min(380px, calc(100% - 32px));
  z-index: 3;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}
.lp.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.97) translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s 0.18s;
}
.lp.no-anim { transition: none; }
.lp-field { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; height: 22px; margin-left: 7px; }
.lp-input {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--panel-ink);
  font: 15px/20px var(--sys);
  caret-color: var(--panel-sel);
  outline: none;
}
.lp-input::placeholder { color: var(--panel-ink-dim); }
.lp-mirror { position: absolute; left: 0; visibility: hidden; white-space: pre; font: 15px/20px var(--sys); }
.lp-caret { position: absolute; left: 0; top: 2px; display: none; width: 2px; height: 18px; border-radius: 1px; background: var(--panel-sel); }
.stage[data-state="autoplay"] .lp-input:not(:focus) ~ .lp-caret { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .lp-caret { animation: caret 1.1s step-end infinite; }
}
.lp-clear { flex: none; padding: 0; border: 0; cursor: pointer; }
.lp-clear[hidden] { display: none; }

.lp-rows {
  position: relative;
  height: calc(var(--row) * 8);
  margin-bottom: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.lp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: var(--row);
  margin: 0 6px;
  padding: 0 10px;
  border-radius: 5px;
  white-space: nowrap;
  cursor: default;
}
.lp-row b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 500; }
.lp-row i { flex: none; font-style: normal; font-size: 11px; color: var(--panel-ink-dim); font-variant-numeric: tabular-nums; }
.lp-row.is-active { background: var(--panel-sel); color: #fff; }
.lp-row.is-active i { color: rgba(255, 255, 255, 0.8); }
.lp-row.is-egg b { color: #9a5b00; }
.lp-row.is-egg.is-active b { color: #fff; }
.lp-badge {
  flex: none;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #4a2a00;
  background: linear-gradient(180deg, #f8d48a, #e9a73f);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .lp-row.is-egg b { color: #f4cd82; }
}
:root[data-theme="dark"] .lp-row.is-egg b { color: #f4cd82; }

.lp-empty { padding: 10px 16px; font-size: 13px; color: var(--panel-ink-dim); }
@media (prefers-reduced-motion: no-preference) {
  .lp-row.is-opening { animation: row-open 0.26s ease; }
}
@keyframes row-open {
  40% { transform: scale(0.985); filter: brightness(1.3); }
}

/* While the panel is away: the summon prompt, under the menu bar. */
.hud {
  position: absolute;
  top: 40px;
  right: var(--panel-right);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 15px 6px 6px;
  border: 0;
  border-radius: 999px;
  font: 500 13px/1 var(--sys);
  color: var(--panel-ink);
  background: var(--panel-bg);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  box-shadow: inset 0 0 0 0.5px var(--panel-hair), 0 0 0 0.5px rgba(0, 0, 0, 0.35), 0 10px 26px -8px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
}
.hud.is-shown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity 0.25s ease 0.15s, transform 0.25s ease 0.15s, visibility 0s;
}
.hud:hover .hud-glyph { transform: scale(1.06); }
.hud-glyph {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #fff;
  background: var(--accent-fill);
  transition: transform 0.15s ease;
}
.hud-glyph svg { width: 15px; height: 15px; }
.hud-keys { display: inline-flex; gap: 3px; }
.hud kbd { padding: 2px 6px; border: 0; box-shadow: none; color: inherit; background: rgba(127, 127, 127, 0.2); font-family: var(--sys); font-size: 11px; }

/* "Resuming demo", after ten seconds without input. */
.resume-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: 600 15px/1 var(--sys);
  color: var(--panel-ink);
  background: color-mix(in srgb, var(--wall-b) 45%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s 0.25s;
}
.resume-overlay.is-shown { opacity: 1; visibility: visible; transition: opacity 0.2s ease, visibility 0s; }
.resume-overlay > span:last-child {
  padding: 10px 18px 10px 0;
}
.resume-overlay .hud-glyph { margin-left: 8px; }
.resume-overlay::before {
  content: "";
  position: absolute;
  width: 240px;
  height: 48px;
  border-radius: 999px;
  background: var(--panel-bg);
  box-shadow: inset 0 0 0 0.5px var(--panel-hair), 0 12px 30px -10px rgba(0, 0, 0, 0.45);
  z-index: -1;
}

/* "Opened in Finder: …" */
.cf-toast {
  position: absolute;
  left: 50%;
  bottom: 60px;
  z-index: 4;
  max-width: calc(100% - 48px);
  padding: 8px 14px;
  border-radius: 10px;
  font: 500 12px/1.35 var(--mono);
  color: #fff;
  background: rgba(20, 20, 22, 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.cf-toast.is-shown { opacity: 1; transform: translate(-50%, 0); }

/* Finder, column view: its own light/dark materials, as .folder-win. */
.cf-win {
  --fd-win: #ffffff;
  --fd-bar: #f2f2f4;
  --fd-ink: #1d1d1f;
  --fd-dim: #6e6e73;
  --fd-hair: rgba(0, 0, 0, 0.1);
  --fd-sel: #0058d0;
  --fd-sel-dim: rgba(0, 0, 0, 0.08);
  --fd-accent: #007aff;
  --fd-egg: #b06a00;

  /* About 72% of the stage, sitting on the desktop slightly up and to the
     left, with wallpaper showing all round it. */
  position: absolute;
  left: 6%;
  right: 26%;
  top: 104px;
  bottom: 140px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  background: var(--fd-win);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.25),
    0 10px 24px -6px rgba(0, 0, 0, 0.28),
    0 34px 70px -14px rgba(0, 0, 0, 0.42);
  font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--fd-ink);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .cf-win {
    --fd-win: #1e1e20;
    --fd-bar: #2a2a2d;
    --fd-ink: #f5f5f7;
    --fd-dim: #a1a1a6;
    --fd-hair: rgba(255, 255, 255, 0.1);
    --fd-sel: #0a5fd8;
    --fd-sel-dim: rgba(255, 255, 255, 0.1);
    --fd-accent: #0a84ff;
    --fd-egg: #f4cd82;
    box-shadow:
      0 0 0 0.5px rgba(255, 255, 255, 0.16),
      0 0 0 1px rgba(0, 0, 0, 0.6),
      0 10px 24px -6px rgba(0, 0, 0, 0.5),
      0 34px 70px -14px rgba(0, 0, 0, 0.7);
  }
}
:root[data-theme="dark"] .cf-win {
    --fd-win: #1e1e20;
    --fd-bar: #2a2a2d;
    --fd-ink: #f5f5f7;
    --fd-dim: #a1a1a6;
    --fd-hair: rgba(255, 255, 255, 0.1);
    --fd-sel: #0a5fd8;
    --fd-sel-dim: rgba(255, 255, 255, 0.1);
    --fd-accent: #0a84ff;
    --fd-egg: #f4cd82;
    box-shadow:
      0 0 0 0.5px rgba(255, 255, 255, 0.16),
      0 0 0 1px rgba(0, 0, 0, 0.6),
      0 10px 24px -6px rgba(0, 0, 0, 0.5),
      0 34px 70px -14px rgba(0, 0, 0, 0.7);
  }

.cf-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 38px;
  padding: 0 12px;
  background: var(--fd-bar);
  border-bottom: 0.5px solid var(--fd-hair);
}
.cf-bar .fd-lights { padding: 0; }
.cf-nav { display: flex; gap: 2px; color: var(--fd-dim); }
.cf-navbtn { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; cursor: pointer; }
.cf-navbtn:hover { background: var(--fd-sel-dim); color: var(--fd-ink); }
.cf-navbtn.is-off { opacity: 0.35; pointer-events: none; }
.cf-nav svg { width: 13px; height: 13px; }
.cf-bar .fd-lights span { cursor: pointer; }
.cf-view:not(.is-on) { cursor: pointer; }
.cf-crumb { cursor: pointer; }
.cf-crumb:hover { color: var(--fd-ink); background: var(--fd-sel-dim); }
.cf-back { transform: scaleX(-1); }
.cf-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; }
.cf-views { display: flex; gap: 2px; padding: 2px; border-radius: 7px; background: var(--fd-sel-dim); }
.cf-view { position: relative; width: 24px; height: 17px; border-radius: 5px; }
.cf-view.is-on { background: var(--fd-win); box-shadow: 0 0.5px 1.5px rgba(0, 0, 0, 0.25); }
.cf-view::before { content: ""; position: absolute; inset: 4px 6px; }
.cf-view-icons::before {
  background:
    linear-gradient(var(--fd-dim) 0 0) 0 0 / 5px 3.5px no-repeat,
    linear-gradient(var(--fd-dim) 0 0) 100% 0 / 5px 3.5px no-repeat,
    linear-gradient(var(--fd-dim) 0 0) 0 100% / 5px 3.5px no-repeat,
    linear-gradient(var(--fd-dim) 0 0) 100% 100% / 5px 3.5px no-repeat;
}
.cf-view-list::before {
  background:
    linear-gradient(var(--fd-dim) 0 0) 0 0 / 100% 1.5px no-repeat,
    linear-gradient(var(--fd-dim) 0 0) 0 50% / 100% 1.5px no-repeat,
    linear-gradient(var(--fd-dim) 0 0) 0 100% / 100% 1.5px no-repeat;
}
.cf-view-columns::before {
  border: 1.5px solid var(--fd-ink);
  border-radius: 2px;
  background:
    linear-gradient(var(--fd-ink) 0 0) 33% 0 / 1.5px 100% no-repeat,
    linear-gradient(var(--fd-ink) 0 0) 70% 0 / 1.5px 100% no-repeat;
}
.cf-view-gallery::before {
  background:
    linear-gradient(var(--fd-dim) 0 0) 0 0 / 100% 55% no-repeat,
    linear-gradient(var(--fd-dim) 0 0) 0 100% / 100% 2px no-repeat;
}

.cf-cols {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 96px 108px minmax(0, 1fr);
}
.cf-col {
  position: relative;
  padding: 5px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  border-left: 0.5px solid var(--fd-hair);
}
.cf-col-3 { container-type: inline-size; }
@container (max-width: 210px) {
  .cf-size { display: none; }
}
.cf-col-1 { border-left: 0; }
.cf-col-root { background: color-mix(in srgb, var(--fd-bar) 55%, var(--fd-win)); }
/* Deeper than a job: the columns have shifted left, so all four hold names. */
.cf-win.is-deep .cf-cols { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) minmax(0, 1.3fr); }
.cf-head { padding: 4px 6px 3px; font-size: 10.5px; font-weight: 650; color: var(--fd-dim); }
.cf-row {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 21px;
  padding: 0 4px 0 6px;
  border-radius: 5px;
  white-space: nowrap;
  cursor: default;
}
.cf-row:hover:not(.is-sel) { background: color-mix(in srgb, var(--fd-sel-dim) 55%, transparent); }
.cf-ico { flex: none; width: 15px; height: 12px; }
.cf-ico-doc { width: 11px; height: 14px; }
.cf-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cf-size { flex: none; font-size: 10.5px; color: var(--fd-dim); font-variant-numeric: tabular-nums; }
.cf-chev { flex: none; width: 9px; height: 9px; color: var(--fd-dim); }
.cf-row.is-sel { background: var(--fd-sel-dim); }
.cf-row.is-key { background: var(--fd-sel); color: #fff; }
.cf-row.is-key .cf-chev, .cf-row.is-key .cf-size { color: rgba(255, 255, 255, 0.85); }
.cf-row.is-egg:not(.is-key) .cf-name { color: var(--fd-egg); font-weight: 600; }

.cf-path {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 25px;
  padding: 0 10px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 11px;
  color: var(--fd-dim);
  background: var(--fd-bar);
  border-top: 0.5px solid var(--fd-hair);
}
.cf-path i { font-style: normal; opacity: 0.6; }
.cf-crumb { display: inline-flex; align-items: center; gap: 4px; min-width: 0; padding: 1px 4px; border-radius: 4px; }
.cf-crumb span { overflow: hidden; text-overflow: ellipsis; }
.cf-crumb.is-last { color: var(--fd-ink); font-weight: 500; }
.cf-pi { flex: none; width: 12px; height: 12px; }
.cf-pf { width: 14px; height: 11px; }

/* The window's own controls: closed (red or yellow) and zoomed (green). */
.cf-win { transition: opacity 0.2s ease, transform 0.2s ease, top 0.25s ease, left 0.25s ease, right 0.25s ease, bottom 0.25s ease; }
.cf-win.is-closed { opacity: 0; transform: scale(0.96); pointer-events: none; }
.cf-win.is-zoomed { top: 38px; left: 1.5%; right: 1.5%; bottom: 10px; z-index: 3; }

/* The panel's footer buttons, working. */
.lp-fbtn { padding: 0; border: 0; font: inherit; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
.lp-fbtn:hover { background: color-mix(in srgb, var(--panel-ink) 14%, transparent); }
.lp-fbtn svg { transition: transform 0.2s ease; }
.lp-fbtn.is-flipped svg { transform: rotate(180deg); }
.lp-fbtn.is-on { color: var(--panel-sel); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .lp-fbtn.is-on { color: #6cb2ff; }
}
:root[data-theme="dark"] .lp-fbtn.is-on { color: #6cb2ff; }


@media (prefers-reduced-motion: no-preference) {
  .lp-fbtn.is-spinning svg { animation: spin 0.7s ease; }
  .cf-win.is-shifting .cf-col { animation: col-shift 0.25s ease both; }
  .cf-win.is-cascading .cf-col-2 { animation: col-in 0.28s ease both; }
  .cf-win.is-cascading .cf-col-3 { animation: col-in 0.3s 0.12s ease both; }
  .cf-win.is-cascading .cf-col-4 { animation: col-in 0.32s 0.24s ease both; }
  .cf-path.is-pulsing .is-last { animation: crumb-pulse 1.4s 0.3s ease both; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes col-shift {
  from { transform: translateX(14px); opacity: 0.6; }
  to { transform: none; opacity: 1; }
}
@keyframes col-in {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: none; }
}
@keyframes crumb-pulse {
  0%, 100% { background: transparent; }
  25%, 60% { background: color-mix(in srgb, var(--fd-accent) 24%, transparent); }
}