/* Skin: liquid-glass (GlassDrop). See src/lib/skins.ts.
   One material system for the whole page:
   - Spatial continuity: a fixed, calm desktop wallpaper behind every section; content
     floats over it at three thicknesses (thin, regular, thick).
   - Optical depth: tinted body, edge catch-light, bottom thickness, inner volume and
     a lift shadow; thick glass also refracts its rim (liquid-glass.js, Chromium).
   - Material response: one virtual light (the pointer, else a fixed light above the
     page) sets --lx/--ly on every glass surface; rims and sheens move as you point
     or scroll. */

body[data-skin~='liquid-glass'] {
  overflow-x: clip;
  --lg-glass: oklch(99% 0.006 240);
  --lg-a-base: 0.3;
  --lg-rim: oklch(100% 0 0 / 0.95);
  --lg-rim-low: oklch(100% 0 0 / 0.55);
  --lg-hair: oklch(100% 0 0 / 0.6);
  --lg-inner: oklch(100% 0 0 / 0.38);
  --lg-contact: oklch(30% 0.04 220 / 0.12);
  --lg-shade: oklch(30% 0.06 220 / 0.32);
  --lg-sheen: oklch(100% 0 0 / 0.55);
  --lg-ripple: oklch(100% 0 0 / 0.65);
  /* Text that sits on the wallpaper (not on glass) stays readable on its lightest
     and darkest spots. */
  --muted: oklch(36% 0.02 240);
  /* A daylight desktop photo, out of focus: foliage, water, warm light. Every
     color stays light enough for dark text. */
  --lg-wall:
    radial-gradient(26% 36% at 16% 20%, oklch(84% 0.13 150 / 0.95), transparent 70%),
    radial-gradient(22% 30% at 36% 72%, oklch(78% 0.11 205 / 0.95), transparent 70%),
    radial-gradient(30% 40% at 74% 16%, oklch(93% 0.07 88 / 0.95), transparent 70%),
    radial-gradient(26% 34% at 88% 62%, oklch(80% 0.1 62 / 0.9), transparent 70%),
    radial-gradient(18% 26% at 56% 44%, oklch(86% 0.13 125 / 0.9), transparent 70%),
    radial-gradient(22% 30% at 6% 86%, oklch(76% 0.1 235 / 0.9), transparent 70%),
    radial-gradient(18% 24% at 64% 90%, oklch(88% 0.08 40 / 0.9), transparent 70%),
    linear-gradient(155deg, oklch(86% 0.07 170), oklch(80% 0.08 210) 50%, oklch(84% 0.08 130));
  --lg-lines: oklch(100% 0 0 / 0.35);
}
:root[data-theme='dark'] body[data-skin~='liquid-glass'] {
  --lg-glass: oklch(24% 0.02 250);
  --lg-a-base: 0.36;
  --lg-rim: oklch(100% 0 0 / 0.45);
  --lg-rim-low: oklch(100% 0 0 / 0.14);
  --lg-hair: oklch(100% 0 0 / 0.16);
  --lg-inner: oklch(100% 0 0 / 0.06);
  --lg-contact: oklch(0% 0 0 / 0.4);
  --lg-shade: oklch(0% 0 0 / 0.55);
  --lg-sheen: oklch(100% 0 0 / 0.16);
  --lg-ripple: oklch(100% 0 0 / 0.3);
  --muted: oklch(80% 0.015 240);
  /* The same desktop at night: deep foliage, water and a warm lamp. */
  --lg-wall:
    radial-gradient(26% 36% at 16% 20%, oklch(42% 0.1 155 / 0.9), transparent 70%),
    radial-gradient(22% 30% at 36% 72%, oklch(38% 0.09 210 / 0.9), transparent 70%),
    radial-gradient(30% 40% at 74% 16%, oklch(44% 0.07 75 / 0.75), transparent 70%),
    radial-gradient(26% 34% at 88% 62%, oklch(36% 0.08 55 / 0.85), transparent 70%),
    radial-gradient(18% 26% at 56% 44%, oklch(40% 0.1 130 / 0.7), transparent 70%),
    radial-gradient(22% 30% at 6% 86%, oklch(32% 0.09 250 / 0.9), transparent 70%),
    linear-gradient(155deg, oklch(20% 0.03 190), oklch(17% 0.03 230) 50%, oklch(19% 0.03 150));
  --lg-lines: oklch(100% 0 0 / 0.05);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) body[data-skin~='liquid-glass'] {
    --lg-glass: oklch(24% 0.02 250);
    --lg-a-base: 0.36;
    --lg-rim: oklch(100% 0 0 / 0.45);
    --lg-rim-low: oklch(100% 0 0 / 0.14);
    --lg-hair: oklch(100% 0 0 / 0.16);
    --lg-inner: oklch(100% 0 0 / 0.06);
    --lg-contact: oklch(0% 0 0 / 0.4);
    --lg-shade: oklch(0% 0 0 / 0.55);
    --lg-sheen: oklch(100% 0 0 / 0.16);
    --lg-ripple: oklch(100% 0 0 / 0.3);
    --muted: oklch(80% 0.015 240);
    /* The same desktop at night: deep foliage, water and a warm lamp. */
    --lg-wall:
      radial-gradient(26% 36% at 16% 20%, oklch(42% 0.1 155 / 0.9), transparent 70%),
      radial-gradient(22% 30% at 36% 72%, oklch(38% 0.09 210 / 0.9), transparent 70%),
      radial-gradient(30% 40% at 74% 16%, oklch(44% 0.07 75 / 0.75), transparent 70%),
      radial-gradient(26% 34% at 88% 62%, oklch(36% 0.08 55 / 0.85), transparent 70%),
      radial-gradient(18% 26% at 56% 44%, oklch(40% 0.1 130 / 0.7), transparent 70%),
      radial-gradient(22% 30% at 6% 86%, oklch(32% 0.09 250 / 0.9), transparent 70%),
      linear-gradient(155deg, oklch(20% 0.03 190), oklch(17% 0.03 230) 50%, oklch(19% 0.03 150));
    --lg-lines: oklch(100% 0 0 / 0.05);
  }
}

/* ---- The space: one fixed wallpaper for the whole page ----------------------- */
body[data-skin~='liquid-glass']::before,
body[data-skin~='liquid-glass']::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
body[data-skin~='liquid-glass']::before {
  background: var(--lg-wall);
}
/* Fine lines: the detail that makes the bending at glass rims visible. */
body[data-skin~='liquid-glass']::after {
  background: repeating-linear-gradient(118deg, var(--lg-lines) 0 1px, transparent 1px 28px);
  -webkit-mask: radial-gradient(120% 90% at 70% 20%, #000, transparent 75%);
  mask: radial-gradient(120% 90% at 70% 20%, #000, transparent 75%);
}
body[data-skin~='liquid-glass'] .site-header,
body[data-skin~='liquid-glass'] .glance-list li,
body[data-skin~='liquid-glass'] .faq-item {
  border-color: var(--lg-hair);
}

/* ---- The material ------------------------------------------------------------ */
body[data-skin~='liquid-glass'][data-skin] :where(
    .product-hero-copy, .product-hero .hero-shot, .closing-inner, .lw-pro, .lw-visual > div:not(.lw-targets), .lw-lens, .lw-zip, .lw-shelf,
    .product-overview, .facts-card, .faq, .glance-list, .product-tools-list a, .featured-grid > *, .article-row,
    .lw-inbox, .lw-dest, .lw-target, .lw-batch, .sticky-store, .lw-tags li, .glance-head .listing-link
  ) {
  --lg-a: var(--lg-a-base);
  --lg-blur: 22px;
  --lg-depth: 1;
  --lx: 30%;
  --ly: -20%;
  position: relative;
  isolation: isolate;
  border: 0;
  background:
    radial-gradient(70% 90% at var(--lx) var(--ly), var(--lg-sheen), transparent 60%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--lg-glass) calc(var(--lg-a) * 100% + 12%), transparent),
      color-mix(in oklch, var(--lg-glass) calc(var(--lg-a) * 100%), transparent)
    );
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(1.9) brightness(1.05);
  backdrop-filter: var(--lg-refract,) blur(var(--lg-blur)) saturate(1.9) brightness(1.05);
  transition:
    transform 0.5s cubic-bezier(0.2, 1.4, 0.4, 1),
    box-shadow 0.4s ease;
  box-shadow:
    inset 0 1px 0.5px var(--lg-rim),
    inset 0 -1.5px 1px var(--lg-rim-low),
    inset 0 0 0 0.5px var(--lg-hair),
    inset 0 calc(var(--lg-depth) * -12px) calc(var(--lg-depth) * 26px) calc(var(--lg-depth) * -14px) var(--lg-inner),
    0 1px 1.5px var(--lg-contact),
    0 calc(var(--lg-depth) * 22px) calc(var(--lg-depth) * 46px) calc(var(--lg-depth) * -24px) var(--lg-shade);
}
/* Thin: chips, tags, small controls. */
body[data-skin~='liquid-glass'][data-skin] :where(.lw-tags li, .lw-inbox, .lw-dest, .lw-target, .glance-head .listing-link, .product-tools-list a, .sticky-store) {
  --lg-a: calc(var(--lg-a-base) + 0.1);
  --lg-blur: 14px;
  --lg-depth: 0.4;
}
/* Thick: the surfaces that carry the story. They refract (see liquid-glass.js). */
body[data-skin~='liquid-glass'][data-skin] :where(.product-hero-copy, .product-hero .hero-shot, .closing-inner, .lw-shelf, .lw-lens, .lw-zip, .lw-shelf) {
  --lg-a: calc(var(--lg-a-base) + 0.06);
  --lg-blur: 26px;
  --lg-depth: 1.5;
}
/* Specular rim: a 1.5px ring whose bright spot sits where the light hits. */
body[data-skin~='liquid-glass'][data-skin] :where(
    .product-hero-copy, .product-hero .hero-shot, .closing-inner, .lw-pro, .lw-visual > div:not(.lw-targets), .lw-lens, .lw-zip, .lw-shelf,
    .product-overview, .facts-card, .faq, .glance-list, .featured-grid > *, .lw-batch
  )::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  background:
    radial-gradient(180px 180px at var(--lx) var(--ly), oklch(100% 0 0 / 0.95), transparent 70%),
    linear-gradient(150deg, var(--lg-rim), transparent 30% 72%, var(--lg-rim-low));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
}

/* ---- Hero ------------------------------------------------------------------- */
body[data-skin~='liquid-glass'] .product-hero {
  padding-block: clamp(20px, 4vw, 48px) clamp(40px, 6vw, 80px);
}
body[data-skin~='liquid-glass'] .product-hero-copy {
  border-radius: 34px;
  padding: clamp(22px, 3.2vw, 46px);
  align-self: center;
}
body[data-skin~='liquid-glass'] .product-hero .hero-shot {
  border-radius: 30px;
  padding: clamp(10px, 1.4vw, 16px);
}
body[data-skin~='liquid-glass'] .product-hero .hero-shot img {
  border-radius: 20px;
  box-shadow: 0 0 0 0.5px var(--lg-hair);
}
body[data-skin~='liquid-glass'] .product-hero .hero-shot figcaption {
  color: var(--muted);
}

/* ---- Buttons: dark tinted glass capsules that squish when pressed ------------ */
body[data-skin~='liquid-glass'][data-skin] :where(.store-button, .campaign-button) {
  border-radius: 999px;
  color: oklch(99% 0 0);
  background: oklch(25% 0.03 262 / 0.86);
  -webkit-backdrop-filter: blur(8px) saturate(1.6);
  backdrop-filter: blur(8px) saturate(1.6);
  box-shadow:
    inset 0 1px 0.5px oklch(100% 0 0 / 0.45),
    inset 0 -1px 1px oklch(100% 0 0 / 0.12),
    0 10px 24px -12px oklch(25% 0.05 262 / 0.6);
  transition:
    transform 0.45s cubic-bezier(0.2, 1.6, 0.4, 1),
    background-color 0.2s ease;
}
body[data-skin~='liquid-glass'][data-skin] :where(.store-button, .campaign-button):hover {
  background: oklch(32% 0.05 262 / 0.92);
  transform: scale(1.035);
}
body[data-skin~='liquid-glass'][data-skin] :where(.store-button, .campaign-button):active {
  transform: scale(0.97, 0.93);
  transition-duration: 0.12s;
}

/* Dark theme: the CTA becomes a light glass capsule so it stays the brightest object. */
:root[data-theme='dark'] body[data-skin~='liquid-glass'][data-skin] :where(.store-button, .campaign-button) {
  color: oklch(20% 0.02 262);
  background: oklch(95% 0.01 250 / 0.9);
}
:root[data-theme='dark'] body[data-skin~='liquid-glass'][data-skin] :where(.store-button, .campaign-button):hover {
  background: oklch(99% 0.005 250 / 0.95);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) body[data-skin~='liquid-glass'][data-skin] :where(.store-button, .campaign-button) {
    color: oklch(20% 0.02 262);
    background: oklch(95% 0.01 250 / 0.9);
  }
  :root:not([data-theme='light']) body[data-skin~='liquid-glass'][data-skin] :where(.store-button, .campaign-button):hover {
    background: oklch(99% 0.005 250 / 0.95);
  }
}

/* ---- Existing sections, as floating surfaces --------------------------------- */
body[data-skin~='liquid-glass'] .product-glance-row {
  padding-bottom: 56px;
}
body[data-skin~='liquid-glass'] .glance-list {
  border-radius: 24px;
  padding: 6px 22px;
}
body[data-skin~='liquid-glass'] .glance-head .listing-link {
  border-radius: 999px;
  padding: 8px 14px;
  text-decoration: none;
}
body[data-skin~='liquid-glass'] .product-overview {
  border-radius: 32px;
  padding: clamp(24px, 4vw, 56px);
  margin-block: 24px 64px;
}
body[data-skin~='liquid-glass'] .product-answers {
  gap: clamp(16px, 2.5vw, 32px);
  align-items: start;
}
body[data-skin~='liquid-glass'] .facts-card {
  border-radius: 26px;
  padding: 24px;
}
body[data-skin~='liquid-glass'] .faq {
  border-radius: 30px;
  padding: clamp(20px, 3vw, 36px);
}
body[data-skin~='liquid-glass'] .faq-item {
  border-top-color: var(--lg-hair);
}
body[data-skin~='liquid-glass'] .closing-inner {
  border-radius: 36px;
  color: var(--ink);
}
body[data-skin~='liquid-glass'] .closing-inner :is(h2, .section-label) {
  color: var(--ink);
}
body[data-skin~='liquid-glass'] .product-tools-list a,
body[data-skin~='liquid-glass'] .article-row {
  border-radius: 20px;
}
body[data-skin~='liquid-glass'] .featured-grid > * {
  border-radius: 24px;
}

/* ---- Story: Summon → Collect → Open the shelf → Drag out → Send a batch ---------
   The steps are also the orb's working area (liquid-glass.js): sample files, drop
   targets and saved destinations here are live while the steps are on screen. */
body[data-skin~='liquid-glass'] .lw {
  padding-block: clamp(24px, 5vw, 64px) clamp(48px, 7vw, 96px);
}
body[data-skin~='liquid-glass'] .lw-head {
  max-width: 46rem;
  margin-bottom: clamp(32px, 5vw, 64px);
}
body[data-skin~='liquid-glass'] .lw-head h2 {
  font-size: clamp(32px, 4.4vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 10px 0 16px;
}
body[data-skin~='liquid-glass'] .lw-lead {
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}
/* Shown once the script is ready; its space is kept from the start (no shift). */
body[data-skin~='liquid-glass'] .lw-try {
  display: grid;
  gap: 4px;
  margin: 20px 0 0;
  padding: 14px 18px;
  border-radius: 18px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  background: color-mix(in oklch, var(--lg-glass) 55%, transparent);
  box-shadow: inset 0 1px 0.5px var(--lg-rim), inset 0 0 0 0.5px var(--lg-hair);
  visibility: hidden;
}
body[data-skin~='liquid-glass'] .lw-try small {
  font-weight: 500;
  font-size: 13px;
  color: var(--muted);
}
body[data-skin~='liquid-glass'] .lw-try-touch {
  display: none;
}
@media (pointer: coarse) {
  body[data-skin~='liquid-glass'] .lw-try-pointer { display: none; }
  body[data-skin~='liquid-glass'] .lw-try-touch { display: inline; }
}
body[data-skin~='liquid-glass'] .lw[data-ready] :is(.lw-try, .lw-chip-button) {
  visibility: visible;
}
body[data-skin~='liquid-glass'] .lw-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(40px, 7vw, 104px);
}
body[data-skin~='liquid-glass'] .lw-step {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 80px);
}
body[data-skin~='liquid-glass'] .lw-step:nth-child(even) .lw-text {
  order: 2;
}
body[data-skin~='liquid-glass'] .lw-num {
  font: 600 13px/1 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  color: var(--muted);
  letter-spacing: 0.08em;
}
body[data-skin~='liquid-glass'] .lw-text h3 {
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: -0.02em;
  margin: 8px 0 12px;
}
body[data-skin~='liquid-glass'] .lw-text p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 18px;
  max-width: 34rem;
}
body[data-skin~='liquid-glass'] .lw-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body[data-skin~='liquid-glass'] .lw-tags li {
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
body[data-skin~='liquid-glass'] .lw-visual {
  min-width: 0;
}
body[data-skin~='liquid-glass'] .lw-visual > div {
  position: relative;
  border-radius: 30px;
  min-height: clamp(220px, 24vw, 280px);
}

/* File chips (sample files, shelf items, drag ghosts). */
body[data-skin~='liquid-glass'] .lw-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px 9px 10px;
  border: 0;
  border-radius: 14px;
  font: 600 13px/1 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  color: var(--ink);
  background: color-mix(in oklch, var(--lg-glass) 82%, transparent);
  box-shadow:
    inset 0 1px 0 var(--lg-rim),
    0 8px 18px -10px var(--lg-shade);
  white-space: nowrap;
}
body[data-skin~='liquid-glass'] .lw-file::before {
  content: '';
  flex: none;
  width: 14px;
  height: 17px;
  border-radius: 3px;
  background: oklch(68% 0.12 245);
}
body[data-skin~='liquid-glass'] .lw-img::before { background: oklch(72% 0.13 165); }
body[data-skin~='liquid-glass'] .lw-txt::before { background: oklch(70% 0.03 260); }
body[data-skin~='liquid-glass'] .lw-pdf::before { background: oklch(64% 0.17 28); }
body[data-skin~='liquid-glass'] button.lw-file {
  cursor: grab;
  touch-action: none;
  transition:
    transform 0.4s cubic-bezier(0.2, 1.4, 0.4, 1),
    opacity 0.3s ease;
}
body[data-skin~='liquid-glass'] button.lw-file:focus-visible,
body[data-skin~='liquid-glass'] .lw-dock button:focus-visible,
body[data-skin~='liquid-glass'] .lw-chip-button:focus-visible {
  outline: 2px solid oklch(50% 0.15 250);
  outline-offset: 3px;
}
body[data-skin~='liquid-glass'] button.lw-file[data-staged] {
  opacity: 0.35;
  cursor: default;
  transform: scale(0.94);
}
body[data-skin~='liquid-glass'] .lw-chip-button {
  position: absolute;
  z-index: 2;
  bottom: 16px;
  right: 16px;
  border: 0;
  border-radius: 999px;
  padding: 9px 16px;
  font: 600 13px/1.2 var(--font, inherit);
  color: var(--ink);
  background: color-mix(in oklch, var(--lg-glass) 78%, transparent);
  box-shadow:
    inset 0 1px 0.5px var(--lg-rim),
    inset 0 0 0 0.5px var(--lg-hair),
    0 8px 18px -10px var(--lg-shade);
  cursor: pointer;
  visibility: hidden;
}

/* 01 Summon: a pad to shake over. */
body[data-skin~='liquid-glass'] .lw-visual > .lw-pad {
  display: grid;
  place-items: center;
}
body[data-skin~='liquid-glass'] .lw-ghost-orb {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 1.5px dashed color-mix(in oklch, var(--ink) 35%, transparent);
}
body[data-skin~='liquid-glass'] .lw-pad-hint {
  position: absolute;
  top: 18px;
  left: 22px;
  font: 600 12px/1 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* 02 Collect: sample files on a desktop. */
body[data-skin~='liquid-glass'] .lw-visual > .lw-files {
  padding: 28px;
}
body[data-skin~='liquid-glass'] .lw-file-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  justify-items: start;
  gap: 12px;
}
body[data-skin~='liquid-glass'] .lw-file-list li:nth-child(2) { margin-left: 14%; }
body[data-skin~='liquid-glass'] .lw-file-list li:nth-child(3) { margin-left: 6%; }
body[data-skin~='liquid-glass'] .lw-file-list li:nth-child(4) { margin-left: 20%; }
body[data-skin~='liquid-glass'] .lw-inbox {
  position: absolute;
  right: 18px;
  top: 18px;
  border-radius: 999px;
  padding: 7px 8px 7px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
body[data-skin~='liquid-glass'] .lw-inbox b {
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  color: oklch(99% 0 0);
  background: oklch(50% 0.14 250);
}

/* 03 Open the shelf: preview a document. */
body[data-skin~='liquid-glass'] .lw-visual > .lw-sheet {
  padding: 30px 34px 70px;
}
body[data-skin~='liquid-glass'] .lw-sheet-art {
  position: relative;
  display: grid;
  gap: 14px;
}
body[data-skin~='liquid-glass'] .lw-line {
  display: block;
  height: 10px;
  border-radius: 5px;
  background: color-mix(in oklch, var(--ink) 22%, transparent);
}
body[data-skin~='liquid-glass'] .lw-line.w1 { width: 82%; }
body[data-skin~='liquid-glass'] .lw-line.w2 { width: 64%; }
body[data-skin~='liquid-glass'] .lw-line.w3 { width: 72%; }
body[data-skin~='liquid-glass'] .lw-photo {
  display: block;
  height: 86px;
  width: 70%;
  border-radius: 12px;
  background:
    radial-gradient(circle at 75% 30%, oklch(92% 0.08 90), transparent 25%),
    linear-gradient(160deg, oklch(70% 0.1 230), oklch(62% 0.1 200) 55%, oklch(55% 0.09 160));
}
body[data-skin~='liquid-glass'] .lw-lens {
  position: absolute;
  right: 6%;
  top: 10%;
  width: clamp(100px, 12vw, 140px);
  aspect-ratio: 1;
  border-radius: 50%;
  --lg-a: 0.08;
  --lg-blur: 0px;
}

/* 04 Drag out: places a file can go. */
body[data-skin~='liquid-glass'] .lw-visual > .lw-targets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  min-height: 0;
}
body[data-skin~='liquid-glass'] .lw-target {
  border-radius: 22px;
  padding: 18px;
  min-height: 150px;
  display: grid;
  align-content: space-between;
  gap: 8px;
  color: var(--ink);
}
body[data-skin~='liquid-glass'] .lw-target b {
  font-size: 15px;
}
body[data-skin~='liquid-glass'] .lw-target small {
  font: 600 12px/1.35 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  color: var(--muted);
  overflow-wrap: anywhere;
}
body[data-skin~='liquid-glass'][data-skin] .lw-target[data-over] {
  transform: scale(1.04);
  --lg-depth: 1.8;
}
body[data-skin~='liquid-glass'] .lw-target[data-hit] {
  animation: lw-hit 0.5s cubic-bezier(0.2, 1.6, 0.4, 1);
}
@keyframes lw-hit {
  40% { scale: 1.06 0.94; }
  70% { scale: 0.98 1.03; }
}

/* 05 Send a batch: one batch, three saved destinations. */
body[data-skin~='liquid-glass'] .lw-visual > .lw-route {
  overflow: visible;
}
body[data-skin~='liquid-glass'] .lw-route svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
body[data-skin~='liquid-glass'] .lw-route path {
  fill: none;
  stroke: oklch(55% 0.11 250 / 0.6);
  stroke-width: 2;
  stroke-dasharray: 4 6;
  vector-effect: non-scaling-stroke;
}
body[data-skin~='liquid-glass'] .lw-batch {
  position: absolute;
  left: 5%;
  top: 50%;
  transform: translateY(-50%);
  padding: 12px;
  border-radius: 18px;
}
body[data-skin~='liquid-glass'] .lw-route .lw-dest {
  position: absolute;
  right: 4%;
  min-height: 0;
  min-width: 34%;
  padding: 10px 14px;
  border-radius: 14px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  transform: translateY(-50%);
}
body[data-skin~='liquid-glass'][data-skin] .lw-route .lw-dest[data-over] {
  transform: translateY(-50%) scale(1.05);
}
body[data-skin~='liquid-glass'] .lw-dest:nth-of-type(1) { top: 16.7%; }
body[data-skin~='liquid-glass'] .lw-dest:nth-of-type(2) { top: 50%; }
body[data-skin~='liquid-glass'] .lw-dest:nth-of-type(3) { top: 83.3%; }
body[data-skin~='liquid-glass'] .lw-zip {
  position: absolute;
  left: 5%;
  bottom: 14px;
  border-radius: 14px;
  padding: 8px 12px;
  font: 600 13px/1 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  color: var(--ink);
}
body[data-skin~='liquid-glass'] .lw-zip b {
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  font: 700 11px/1.4 inherit;
  color: oklch(99% 0 0);
  background: oklch(25% 0.03 262);
}

/* ---- The orb and its shelf (fixed while the steps are on screen) ------------------ */
body[data-skin~='liquid-glass'] .lw-dock[hidden] {
  display: none;
}
body[data-skin~='liquid-glass'] .lw-orb {
  position: fixed;
  z-index: 45;
  left: 0;
  top: 0;
  width: 88px;
  height: 88px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background:
    radial-gradient(circle at 32% 26%, oklch(100% 0 0 / 0.9), transparent 26%),
    radial-gradient(circle at 70% 80%, oklch(85% 0.08 210 / 0.5), transparent 50%),
    color-mix(in oklch, var(--lg-glass) 22%, transparent);
  -webkit-backdrop-filter: blur(6px) saturate(2) brightness(1.1);
  backdrop-filter: var(--lg-refract,) blur(6px) saturate(2) brightness(1.1);
  box-shadow:
    inset 0 2px 1px oklch(100% 0 0 / 0.9),
    inset 0 -10px 20px -6px oklch(100% 0 0 / 0.45),
    inset 8px 0 18px -10px oklch(70% 0.12 220 / 0.6),
    0 24px 40px -18px var(--lg-shade);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  --os: 0.72;
  transform: translate(var(--ox, 0px), var(--oy, 0px)) scale(var(--os));
  transition:
    transform 0.6s cubic-bezier(0.2, 1.4, 0.35, 1),
    opacity 0.35s ease,
    visibility 0s linear 0.35s;
}
/* Out of the tab order and the way while the steps are off screen. */
body[data-skin~='liquid-glass'] .lw-dock[data-active] .lw-orb {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
body[data-skin~='liquid-glass'] .lw-orb[data-summoned] { --os: 1; }
body[data-skin~='liquid-glass'] .lw-orb[data-over] { --os: 1.18; }
body[data-skin~='liquid-glass'] .lw-orb[data-gulp] {
  animation: lw-gulp 0.5s cubic-bezier(0.2, 1.6, 0.4, 1);
}
@keyframes lw-gulp {
  40% { scale: 1.12 0.9; }
  70% { scale: 0.95 1.06; }
}
body[data-skin~='liquid-glass'] .lw-orb-count {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font: 700 12px/1 var(--font, inherit);
  color: oklch(99% 0 0);
  background: oklch(50% 0.14 250);
}
body[data-skin~='liquid-glass'] .lw-orb-count:empty {
  display: none;
}
body[data-skin~='liquid-glass'] .lw-shelf {
  position: fixed;
  z-index: 46;
  left: var(--sx, auto);
  top: var(--sy, auto);
  width: min(320px, calc(100vw - 24px));
  max-height: min(460px, 72vh);
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: 26px;
  padding: 16px;
  display: grid;
  gap: 10px;
  animation: lw-shelf-in 0.35s cubic-bezier(0.2, 1.3, 0.4, 1);
}
body[data-skin~='liquid-glass'] .lw-shelf[hidden] {
  display: none;
}
@keyframes lw-shelf-in {
  from { opacity: 0; transform: scale(0.94); }
}
body[data-skin~='liquid-glass'] .lw-shelf-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}
body[data-skin~='liquid-glass'] .lw-shelf-head b {
  font-size: 16px;
  color: var(--ink);
}
body[data-skin~='liquid-glass'] .lw-shelf-close {
  margin-left: auto;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  color: var(--ink);
  background: color-mix(in oklch, var(--lg-glass) 70%, transparent);
  cursor: pointer;
}
body[data-skin~='liquid-glass'] .lw-shelf-empty {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
body[data-skin~='liquid-glass'] .lw-shelf-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
body[data-skin~='liquid-glass'] .lw-shelf-list .lw-file {
  width: 100%;
}
body[data-skin~='liquid-glass'] .lw-shelf-send,
body[data-skin~='liquid-glass'] .lw-shelf-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
body[data-skin~='liquid-glass'] .lw-shelf-send[hidden] {
  display: none;
}
body[data-skin~='liquid-glass'] .lw-shelf-foot {
  justify-content: space-between;
}
body[data-skin~='liquid-glass'] .lw-shelf :is(.lw-shelf-send button, .lw-shelf-foot button, .lw-shelf-foot span) {
  border: 0;
  border-radius: 999px;
  padding: 6px 11px;
  font: 600 12px/1.2 var(--font, inherit);
  color: var(--ink);
  background: color-mix(in oklch, var(--lg-glass) 72%, transparent);
  box-shadow: inset 0 1px 0 var(--lg-rim), inset 0 0 0 0.5px var(--lg-hair);
}
body[data-skin~='liquid-glass'] .lw-shelf button {
  cursor: pointer;
}
.lw-ghost {
  position: fixed;
  z-index: 60;
  left: 0;
  top: 0;
  pointer-events: none;
  transition:
    transform 0.45s cubic-bezier(0.5, 0, 0.3, 1),
    opacity 0.45s ease;
}

/* Pro: one wide surface after the steps. */
body[data-skin~='liquid-glass'] .lw-pro {
  margin-top: clamp(56px, 8vw, 112px);
  border-radius: 34px;
  padding: clamp(22px, 3.4vw, 44px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px 40px;
}
body[data-skin~='liquid-glass'] .lw-pro h3 {
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.02em;
  margin: 8px 0 0;
}
body[data-skin~='liquid-glass'] .lw-pro-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
  font-size: 15px;
  font-weight: 600;
}
body[data-skin~='liquid-glass'] .lw-pro-list li::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 50%;
  background: oklch(55% 0.13 250);
  box-shadow: 0 0 0 3px oklch(55% 0.13 250 / 0.18);
}

@media (max-width: 800px) {
  body[data-skin~='liquid-glass'] .lw-visual > .lw-targets {
    grid-template-columns: minmax(0, 1fr);
  }
  body[data-skin~='liquid-glass'] .lw-target {
    min-height: 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }
  body[data-skin~='liquid-glass'] .lw-orb {
    width: 76px;
    height: 76px;
  }
  /* The shelf becomes a bottom sheet above the buy bar. */
  body[data-skin~='liquid-glass'] .lw-shelf {
    left: 12px;
    right: 12px;
    top: auto;
    bottom: calc(84px + env(safe-area-inset-bottom));
    width: auto;
    max-height: 55vh;
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-skin~='liquid-glass'] :is(.lw-orb, .lw-shelf, button.lw-file, .lw-target) {
    transition: none;
    animation: none;
  }
  .lw-ghost {
    display: none;
  }
}

/* ---- Small screens ------------------------------------------------------------- */
@media (max-width: 800px) {
  body[data-skin~='liquid-glass'] .lw-step {
    grid-template-columns: 1fr;
  }
  body[data-skin~='liquid-glass'] .lw-step:nth-child(even) .lw-text {
    order: 0;
  }
  body[data-skin~='liquid-glass'] .lw-pro {
    grid-template-columns: 1fr;
  }
  body[data-skin~='liquid-glass'] .product-hero-copy {
    border-radius: 28px;
  }
}
@media (max-width: 760px) {
  body[data-skin~='liquid-glass'] .sticky-store {
    position: fixed;
    left: 10px;
    right: 10px;
    width: auto;
    bottom: calc(10px + env(safe-area-inset-bottom));
    padding: 8px 8px 8px 14px;
    border-radius: 26px;
  }
}
@media (max-width: 420px) {
  body[data-skin~='liquid-glass'] .lw-pro-list {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-skin~='liquid-glass'] :is(.store-button, .campaign-button) {
    transition: none;
  }
}
/* No backdrop-filter: solid, readable surfaces. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body[data-skin~='liquid-glass'] {
    --lg-a-base: 0.92;
  }
}

/* ---- Response: hover lifts, press squishes, a click sends light through ---------- */
body[data-skin~='liquid-glass'][data-skin] :where(.featured-grid > *, .product-tools-list a, .article-row, .glance-head .listing-link, .lw-file-list .lw-file):hover {
  transform: translateY(-3px);
  --lg-depth: 1.6;
}
body[data-skin~='liquid-glass'][data-skin] :where(.featured-grid > *, .product-tools-list a, .article-row, .lw-file-list .lw-file):active {
  transform: translateY(0) scale(0.985, 0.97);
  transition-duration: 0.12s;
}
/* The light spreading through the glass from the point of a click (liquid-glass.js). */
body[data-skin~='liquid-glass'] .lg-press {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
body[data-skin~='liquid-glass'] .lg-press i {
  position: absolute;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--lg-ripple), transparent 70%);
  animation: lg-press 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes lg-press {
  from { transform: scale(0.4); opacity: 1; }
  to { transform: scale(18); opacity: 0; }
}


/* ---- Polish: depth on scroll, clearer drop affordances ---------------------------- */
/* Each step's glass rises into place as it scrolls in (scroll-driven, no loop). */
@supports (animation-timeline: view()) {
  body[data-skin~='liquid-glass'] .lw-visual > div {
    animation: lw-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 65%;
  }
}
@keyframes lw-rise {
  from { opacity: 0.3; transform: translateY(40px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
/* Step numbers as small glass pills. */
body[data-skin~='liquid-glass'] .lw-num {
  display: inline-block;
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--ink);
  background: color-mix(in oklch, var(--lg-glass) 60%, transparent);
  box-shadow: inset 0 1px 0.5px var(--lg-rim), inset 0 0 0 0.5px var(--lg-hair);
}
/* Drop targets read as places to drop: a soft dashed inner edge that brightens. */
body[data-skin~='liquid-glass'] .lw-target {
  outline: 1.5px dashed color-mix(in oklch, var(--ink) 18%, transparent);
  outline-offset: -8px;
}
body[data-skin~='liquid-glass'] .lw-target[data-over] {
  outline-color: oklch(55% 0.14 250);
}
/* The orb glows when pointed at; tags and shelf items respond to hover. */
body[data-skin~='liquid-glass'] .lw-orb:hover {
  --os: 1.06;
  box-shadow:
    inset 0 2px 1px oklch(100% 0 0 / 0.95),
    inset 0 -10px 20px -6px oklch(100% 0 0 / 0.5),
    0 0 0 6px oklch(100% 0 0 / 0.18),
    0 24px 44px -16px var(--lg-shade);
}
body[data-skin~='liquid-glass'] .lw-orb[data-summoned]:hover {
  --os: 1.08;
}
body[data-skin~='liquid-glass'] :is(.lw-tags li, .lw-shelf-list .lw-file) {
  transition: transform 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
}
body[data-skin~='liquid-glass'] :is(.lw-tags li, .lw-shelf-list .lw-file):hover {
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  body[data-skin~='liquid-glass'] .lw-visual > div {
    animation: none;
  }
  body[data-skin~='liquid-glass'] :is(.lw-tags li, .lw-shelf-list .lw-file) {
    transition: none;
  }
}