/* TeleFolder website v2 — the live demo's stylesheet.
   Ported unchanged from the v1 site (Chatoyance/AppStore/site/assets/css/style.css,
   "Part two"), so the demo still looks like the real app: macOS materials,
   system font, its own light and dark. Everything here is scoped under
   .demo-scope so the newsreel page styles never leak into the "screen". */

.demo-scope {
  --fg: #1D1D1F; --fg-2: #6E6E73; --fg-3: #6E6E73;
  --line-strong: rgba(0,0,0,.16);
  --accent-fill: #0891B2;
  --surface-2: #F5F5F7;
  --kbd-bg: linear-gradient(#FFFFFF, #F2F2F5); --kbd-edge: rgba(0,0,0,.18);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.08), 0 24px 60px -20px rgba(0,0,0,.28);
  --r-sm: 8px; --r-md: 12px; --r-xl: 16px;
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 40px;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --sys: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --wall-a: #E6E8EE; --wall-b: #C9CDD6;
  --menubar: rgba(255,255,255,.55); --menubar-ink: rgba(20,20,22,.6);
  --panel-bg: rgba(246,246,250,.7); --panel-ink: rgba(20,20,22,.92); --panel-ink-dim: rgba(20,20,22,.55);
  --panel-hair: rgba(0,0,0,.12); --panel-sel: rgb(10,95,215); --panel-btn-bg: rgba(0,0,0,.06);
  --panel-scroll-bg: rgba(0,0,0,.08); --panel-thumb-bg: rgba(0,0,0,.28);
  font-family: var(--sys);
  color: var(--fg);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .demo-scope {
  --fg: #F5F5F7; --fg-2: #A1A1A6; --fg-3: #8E8E93; --line-strong: rgba(255,255,255,.14);
  --accent-fill: #06B6D4; --surface-2: #2C2C2E;
  --kbd-bg: linear-gradient(#3A3A3C, #2E2E31); --kbd-edge: rgba(0,0,0,.6);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.35), 0 30px 60px -20px rgba(0,0,0,.7);
  --wall-a: #2A2D34; --wall-b: #121316; --menubar: rgba(30,32,38,.55); --menubar-ink: rgba(255,255,255,.6);
  --panel-bg: rgba(52,56,66,.74); --panel-ink: rgba(255,255,255,.96); --panel-ink-dim: rgba(255,255,255,.62);
  --panel-hair: rgba(255,255,255,.14); --panel-btn-bg: rgba(28,31,35,.9); --panel-scroll-bg: rgba(10,10,12,.7); --panel-thumb-bg: rgba(150,150,150,.9);
}}
:root[data-theme="dark"] .demo-scope {
  --fg: #F5F5F7; --fg-2: #A1A1A6; --fg-3: #8E8E93; --line-strong: rgba(255,255,255,.14);
  --accent-fill: #06B6D4; --surface-2: #2C2C2E;
  --kbd-bg: linear-gradient(#3A3A3C, #2E2E31); --kbd-edge: rgba(0,0,0,.6);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.35), 0 30px 60px -20px rgba(0,0,0,.7);
  --wall-a: #2A2D34; --wall-b: #121316; --menubar: rgba(30,32,38,.55); --menubar-ink: rgba(255,255,255,.6);
  --panel-bg: rgba(52,56,66,.74); --panel-ink: rgba(255,255,255,.96); --panel-ink-dim: rgba(255,255,255,.62);
  --panel-hair: rgba(255,255,255,.14); --panel-btn-bg: rgba(28,31,35,.9); --panel-scroll-bg: rgba(10,10,12,.7); --panel-thumb-bg: rgba(150,150,150,.9);
}

.demo-scope kbd {
  display: inline-block; min-width: 1.6em; padding: 0 6px; border-radius: 5px;
  font: 500 0.82em/1.6 var(--sys); letter-spacing: .02em; text-align: center;
  color: var(--fg); background: var(--kbd-bg);
  box-shadow: 0 0 0 .5px var(--kbd-edge), 0 1px 0 var(--kbd-edge);
  white-space: nowrap; vertical-align: .06em;
}
.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; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.hero-demo { min-width: 0; }
.stage-fit { --stage-w: 780px; --stage-h: 560px; margin-inline: auto; }
.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; }

/* ================================================================
   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); }
}