/* ==========================================================================
   Hamster Video Enhancer — hve.qzent.ai
   Single stylesheet: design tokens, layout, components, animation, themes.
   No external fonts, no external requests.
   The hero window replica follows the app's own "cream glass" language
   (purple sidebar, glass cards, cream gradient) taken from
   gui/qt6/resources/styles/creamglass.qss, so it stays decoupled from the
   site palette: the site theme toggle switches the replica between the
   app's light and night sets.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --brand: #5b43d6;
  --brand-2: #8c5cff;
  --brand-3: #ef6aa2;
  --brand-soft: rgba(91, 67, 214, .10);
  --brand-line: rgba(91, 67, 214, .28);

  --bg: #f6f7fb;
  --bg-alt: #ffffff;
  --surface: #ffffff;
  --surface-2: #f1f2f8;
  --line: #e3e4ee;
  --line-strong: #d2d4e2;

  --fg: #14151c;
  --fg-2: #4a4d5e;
  --fg-3: #7b7f93;

  --ok: #1f9d63;
  --warn: #c98a12;
  --bad: #d13b57;

  --radius: 14px;
  --radius-lg: 20px;
  --radius-sm: 9px;

  --shadow-sm: 0 1px 2px rgba(18, 20, 40, .06), 0 2px 8px rgba(18, 20, 40, .05);
  --shadow: 0 8px 26px rgba(18, 20, 40, .09);
  --shadow-lg: 0 22px 60px rgba(18, 20, 40, .16);

  --wrap: 1160px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei",
          "Source Han Sans SC", "Noto Sans CJK SC", Roboto, Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

:root[data-theme="dark"] {
  --brand: #9b7cff;
  --brand-2: #b9a1ff;
  --brand-3: #ff8ab8;
  --brand-soft: rgba(155, 124, 255, .14);
  --brand-line: rgba(155, 124, 255, .34);

  --bg: #0c0d13;
  --bg-alt: #111219;
  --surface: #15161f;
  --surface-2: #1c1d28;
  --line: #262735;
  --line-strong: #34364a;

  --fg: #eceef6;
  --fg-2: #b3b7c7;
  --fg-3: #868a9c;

  --ok: #43c98c;
  --warn: #e0b355;
  --bad: #ef8296;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, .6);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.68;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .25s ease, color .25s ease;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.24; font-weight: 700; letter-spacing: -.015em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
code, kbd, pre { font-family: var(--mono); }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

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

/* ---------- 3. Layout helpers ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

/* Grid and flex items default to min-width:auto, so a wide child (the window
   replica, the installer filename in a nowrap button) would push the whole
   layout past the viewport on phones and get clipped by body{overflow-x:hidden}.
   Letting every content column shrink below its min-content width prevents that. */
.hero__in > *,
.hero__visual,
.app,
.dl > *,
.grid > *,
.pipe > *,
.facts > *,
.req > *,
.techgrid > *,
.steps > *,
.ftr__grid > * { min-width: 0; }

.section { padding: 84px 0; position: relative; }
.section--alt { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section__head { max-width: 720px; margin-bottom: 44px; }
.section__head--center { margin-left: auto; margin-right: auto; text-align: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand);
  padding: 5px 11px; border-radius: 999px;
  background: var(--brand-soft); border: 1px solid var(--brand-line);
  margin-bottom: 16px;
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}

h2.section__title { font-size: clamp(26px, 3.6vw, 38px); }
.section__sub { margin-top: 14px; color: var(--fg-2); font-size: 16.5px; }

/* ---------- 4. Header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background-color .25s ease;
}
.hdr.is-stuck { border-bottom-color: var(--line); }
.hdr__in {
  display: flex; align-items: center; gap: 12px;
  height: 64px;
}
.brand { display: flex; align-items: center; gap: 11px; color: var(--fg); font-weight: 700; }
.brand:hover { text-decoration: none; }
.brand img { width: 32px; height: 32px; border-radius: 9px; box-shadow: var(--shadow-sm); }
.brand__txt { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-size: 15.5px; letter-spacing: -.01em; }
.brand__sub { font-size: 11px; color: var(--fg-3); font-weight: 500; letter-spacing: .04em; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav a {
  color: var(--fg-2); font-size: 14.5px; font-weight: 500;
  padding: 8px 12px; border-radius: 8px;
  transition: color .18s ease, background-color .18s ease;
}
.nav a:hover { color: var(--fg); background: var(--surface-2); text-decoration: none; }
.nav a.is-active { color: var(--brand); background: var(--brand-soft); }

.hdr__act { display: flex; align-items: center; gap: 8px; margin-left: 6px; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface);
  cursor: pointer; color: var(--fg-2);
  transition: transform .2s ease, border-color .2s ease, color .2s ease, background-color .2s ease;
}
.icon-btn:hover { color: var(--brand); border-color: var(--brand-line); transform: translateY(-1px); }
.icon-btn svg { width: 19px; height: 19px; display: block; }

/* Sprite icons: geometry lives in assets/sprite.svg, so paint and sizing must be
   stated here — fill/stroke do not cross the <use> shadow boundary. Symbols that
   need a solid shape set fill="currentColor" on their own paths. */
svg > use { fill: none; stroke: currentColor; }
.icon-btn .i-moon { display: none; }
:root[data-theme="dark"] .icon-btn .i-moon { display: block; }
:root[data-theme="dark"] .icon-btn .i-sun { display: none; }

.burger { display: none; }

@media (max-width: 940px) {
  .nav {
    position: fixed; inset: 64px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--bg-alt); border-bottom: 1px solid var(--line);
    padding: 10px 20px 18px; box-shadow: var(--shadow);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
  }
  .nav.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .nav a { padding: 12px; font-size: 16px; }
  .burger { display: inline-flex; }
}

@media (max-width: 560px) {
  .brand img { width: 26px; height: 26px; border-radius: 8px; }
  .brand__name { font-size: 14px; white-space: nowrap; }
  .brand__sub { display: none; }
  .hdr__in { gap: 6px; }
  .brand { gap: 8px; }
  .hdr__act { gap: 5px; margin-left: 2px; }
  .hdr__act .btn--sm { padding: 8px 11px; font-size: 13.5px; }
  .icon-btn { width: 36px; height: 36px; }
  .hero { padding: 44px 0 60px; }
}

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 20px; border-radius: 11px;
  border: 1px solid transparent; cursor: pointer;
  font-size: 15px; font-weight: 600; letter-spacing: -.005em;
  text-decoration: none; white-space: nowrap;
  transition: transform .18s ease, box-shadow .22s ease, background-color .2s ease,
              border-color .2s ease, color .2s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 19px; height: 19px; flex: none; }

.btn--primary {
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  color: #fff; box-shadow: 0 6px 18px rgba(91, 67, 214, .28);
}
.btn--primary:hover { box-shadow: 0 12px 28px rgba(91, 67, 214, .38); }

.btn--ghost {
  background: var(--surface); color: var(--fg);
  border-color: var(--line-strong);
}
.btn--ghost:hover { border-color: var(--brand-line); color: var(--brand); }

.btn--sm { padding: 9px 14px; font-size: 14px; border-radius: 9px; }
.btn--block { width: 100%; }

/* the installer filename is one long token: let narrow screens wrap it */
@media (max-width: 620px) {
  .btn--block { white-space: normal; text-align: center; }
}

/* ---------- 6. Hero ---------- */
.hero {
  position: relative;
  padding: 76px 0 84px;
  overflow: hidden;
  background:
    radial-gradient(900px 460px at 82% -10%, var(--brand-soft), transparent 62%),
    radial-gradient(760px 420px at 4% 8%, rgba(239, 106, 162, .10), transparent 60%);
}
.hero__grid-bg {
  position: absolute; inset: 0; z-index: 0; opacity: .5; pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(680px 340px at 50% 24%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(680px 340px at 50% 24%, #000 20%, transparent 78%);
  animation: gridDrift 26s linear infinite;
}
@keyframes gridDrift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 56px 56px, 56px 56px; }
}

.hero__in {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 52px; align-items: center;
}
@media (max-width: 1000px) {
  .hero__in { grid-template-columns: 1fr; gap: 44px; }
}

.hero__badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 5px 12px 5px 6px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 600; color: var(--fg-2);
  box-shadow: var(--shadow-sm); margin-bottom: 22px;
}
.hero__badge b {
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  color: #fff; padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; letter-spacing: .04em;
}
.hero__badge svg { width: 14px; height: 14px; color: var(--fg-3); flex: none; }

.hero h1 {
  font-size: clamp(32px, 4.6vw, 50px);
  letter-spacing: -.03em;
}
.hero h1 .grad {
  background: linear-gradient(120deg, var(--brand-2), var(--brand) 45%, var(--brand-3));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero__cn { display: block; margin-top: 10px; font-size: clamp(19px, 2.5vw, 25px); color: var(--fg-2); font-weight: 600; letter-spacing: 0; }
.hero__lead { margin-top: 20px; font-size: 17px; color: var(--fg-2); max-width: 560px; }

.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin-top: 24px; font-size: 13.5px; color: var(--fg-3);
}
.hero__meta span { display: inline-flex; align-items: center; gap: 7px; }
.hero__meta svg { width: 16px; height: 16px; flex: none; }

/* ---------- 7. Hero visual: replica of the app window ---------- */
.hero__visual { position: relative; }

.app {
  --app-grad: linear-gradient(135deg, #fbe9e7, #f3e5f5 45%, #e8eaf6);
  --app-side: #5b43d6;
  --app-ink: #1f2233;
  --app-soft: rgba(31, 34, 51, .62);
  --app-faint: rgba(31, 34, 51, .38);
  --app-glass: rgba(255, 255, 255, .82);
  --app-glass-2: rgba(255, 255, 255, .58);
  --app-line: rgba(233, 235, 255, .95);
  --app-field: rgba(245, 246, 255, .9);
  --app-purple: #6c63ff;
  --app-green: #2ecc71;
  --app-amber: #c28a00;
  --app-red: #e74c3c;

  position: relative;
  display: grid; grid-template-columns: 84px minmax(0, 1fr);
  border-radius: 24px;
  background: var(--app-grad);
  color: var(--app-ink);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(31, 34, 51, .06);
  overflow: hidden;
  isolation: isolate;
  font-size: 12.5px;
  transform: perspective(1800px) rotateY(-4deg) rotateX(1.5deg);
  transition: transform .55s cubic-bezier(.2, .8, .25, 1), background .3s ease;
}
.app:hover { transform: perspective(1800px) rotateY(0deg) rotateX(0deg); }
@media (max-width: 1000px) { .app { transform: none; } }

.app.is-dark {
  --app-grad: linear-gradient(135deg, #241f38, #2a2340 45%, #1f2233);
  --app-side: #3a2d7a;
  --app-ink: #eff1fb;
  --app-soft: rgba(239, 241, 251, .66);
  --app-faint: rgba(239, 241, 251, .38);
  --app-glass: rgba(255, 255, 255, .07);
  --app-glass-2: rgba(255, 255, 255, .04);
  --app-line: rgba(255, 255, 255, .12);
  --app-field: rgba(255, 255, 255, .06);
  --app-purple: #9b8bff;
  --app-green: #46d18a;
  --app-amber: #e5b95c;
  --app-red: #f0736a;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, .07);
}

.app__side {
  background: var(--app-side);
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 16px 8px;
  position: relative; z-index: 1;
}
.app__logo {
  width: 44px; height: 44px; border-radius: 14px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .16);
}
.app__logo img { width: 40px; height: 40px; }
.app__nav { display: grid; gap: 7px; width: 100%; }
.app__navitem {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 9px 4px; border: 0; border-radius: 15px;
  background: transparent; color: rgba(255, 255, 255, .82);
  font-size: 11.5px; font-weight: 700; cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.app__navitem svg { width: 19px; height: 19px; }
.app__navitem:hover:not(.is-on) { background: rgba(255, 255, 255, .16); }
.app__navitem.is-on { background: rgba(255, 255, 255, .93); color: var(--app-ink); }
/* night set: a white pill would swallow the light night-mode ink, so the active
   item is tinted instead of inverted */
.app.is-dark .app__navitem.is-on { background: rgba(255, 255, 255, .2); color: #fff; }
.app__ver {
  margin-top: auto;
  padding: 5px 8px; border-radius: 12px;
  border: 1px solid rgba(245, 246, 255, .38);
  color: rgba(255, 255, 255, .88); font-family: var(--mono); font-size: 10.5px; font-weight: 700;
}

.app__main {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 14px 14px 16px;
  min-width: 0;
}

.app__top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.app__title { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.app__title b {
  font-size: 17px; font-weight: 800;
  background: linear-gradient(90deg, #5b43d6, #8c5cff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.app.is-dark .app__title b {
  background: linear-gradient(90deg, #b9a1ff, #ff8ab8);
  -webkit-background-clip: text; background-clip: text;
}
.app__title em { font-style: normal; font-size: 10.5px; color: var(--app-faint); letter-spacing: .02em; }

.app__auth {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: auto; padding: 3px 10px; border-radius: 12px;
  background: rgba(46, 204, 113, .14); border: 1px solid rgba(46, 204, 113, .5);
  color: #128a54; font-size: 10.5px; font-weight: 800; white-space: nowrap;
}
.app.is-dark .app__auth { color: #5fd8a3; }
.app__auth i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.app__wins { display: inline-flex; gap: 5px; padding-left: 4px; }
.app__wins i { width: 9px; height: 9px; border-radius: 3px; background: var(--app-faint); }
.app__wins i:nth-child(3) { background: rgba(231, 76, 60, .55); }

.app__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
@media (max-width: 560px) { .app__row { grid-template-columns: 1fr; } }

.app__card {
  background: var(--app-glass);
  border: 1px solid var(--app-line);
  border-radius: 18px;
  padding: 11px 12px;
  min-width: 0;
}
.app__cardtitle {
  font-size: 12px; font-weight: 800; color: var(--app-ink);
  margin-bottom: 8px; letter-spacing: -.01em;
}
.app__field {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 5px 5px 11px; border-radius: 13px;
  background: var(--app-field); border: 1px solid var(--app-line);
}
.app__field em {
  font-style: normal; color: var(--app-faint); font-size: 11.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app__field b {
  margin-left: auto; flex: none; padding: 3px 10px; border-radius: 9px;
  background: var(--app-side); color: #fff; font-size: 11px; font-weight: 700;
}
.app__hint { display: block; margin-top: 7px; font-size: 10.5px; color: var(--app-faint); font-family: var(--mono); }

.app__pick {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 9px; margin-bottom: 6px; border-radius: 13px;
  background: var(--app-field); border: 1px solid var(--app-line);
}
.app__pick b { font-size: 11px; font-weight: 700; color: var(--app-soft); }
.app__pick em {
  font-style: normal; margin-left: auto; font-size: 11.5px; font-weight: 600;
  color: var(--app-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app__pick svg { width: 13px; height: 13px; flex: none; color: var(--app-faint); }
.app__scale {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 9px; border-radius: 13px;
  background: var(--app-field); border: 1px solid var(--app-line);
}
.app__scale b { font-size: 11px; font-weight: 700; color: var(--app-soft); }
.app__scale span { position: relative; flex: 1; height: 5px; border-radius: 3px; background: rgba(91, 67, 214, .2); }
.app__scale span i { position: absolute; inset: 0 50% 0 0; border-radius: 3px; background: var(--app-side); }
.app__scale span u {
  position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--app-side); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(31, 34, 51, .3);
}
.app__scale em { font-style: normal; font-family: var(--mono); font-size: 11.5px; font-weight: 700; }

.app__qhead { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.app__qhead .app__cardtitle { margin-bottom: 0; margin-right: auto; }
.app__qbtn {
  padding: 4px 10px; border-radius: 999px;
  background: var(--app-field); border: 1px solid var(--app-line);
  font-size: 10.5px; font-weight: 700; color: var(--app-soft); white-space: nowrap;
}
.app__qbtn--primary { background: var(--app-side); border-color: var(--app-side); color: #fff; }

.app__thead,
.app__trow {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 74px 92px;
  gap: 8px; align-items: center;
}
.app__thead {
  padding: 0 6px 6px;
  font-size: 10px; font-weight: 700; color: var(--app-faint);
  border-bottom: 1px solid var(--app-line);
  white-space: nowrap;
}
.app__trow {
  padding: 6px; margin-top: 5px; border-radius: 13px;
  background: var(--app-glass-2);
  border: 1px solid transparent;
  transition: background-color .2s ease, border-color .2s ease;
}
.app__state {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 800; white-space: nowrap;
}
.app__state i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.app__state--done { color: #128a54; }
.app__state--run { color: var(--app-purple); }
.app__state--queue { color: var(--app-faint); }
.app__state--fail { color: var(--app-red); }
.app.is-dark .app__state--done { color: #5fd8a3; }

.app__file {
  font-family: var(--mono); font-size: 11px; color: var(--app-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app__proc {
  justify-self: start; padding: 2px 7px; border-radius: 999px;
  background: rgba(108, 99, 255, .14); color: var(--app-purple);
  font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
}
.app__prog { display: flex; align-items: center; gap: 6px; min-width: 0; }
.app__prog span {
  position: relative; flex: 1; min-width: 0; height: 6px; border-radius: 3px;
  background: rgba(31, 34, 51, .12); overflow: hidden;
}
.app.is-dark .app__prog span { background: rgba(255, 255, 255, .14); }
.app__prog span i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--app-faint); }
.app__prog--done span i { background: var(--app-green); }
.app__prog--run span i {
  background: linear-gradient(90deg, #6c63ff, #b39dff, #6c63ff);
  background-size: 220% 100%;
  animation: hueSlide 2.4s linear infinite;
}
.app__prog--fail span i { background: var(--app-red); }
.app__prog b { flex: none; font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--app-soft); }
@keyframes hueSlide { to { background-position: 220% 0; } }

.app__status {
  display: flex; align-items: center; gap: 8px;
  margin-top: 2px; padding: 7px 11px; border-radius: 14px;
  background: rgba(91, 67, 214, .1); border: 1px solid var(--app-line);
  font-size: 10.5px; font-weight: 700; color: var(--app-ink);
}
.app__beats { display: inline-flex; gap: 3px; flex: none; }
.app__beats i { width: 5px; height: 5px; border-radius: 50%; background: var(--app-side); }
.app__beats i:nth-child(2) { opacity: .6; }
.app__beats i:nth-child(3) { opacity: .3; }
.app__status em {
  font-style: normal; font-weight: 600; color: var(--app-soft); font-family: var(--mono);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Pages: the sidebar switches which panel is laid out. Every panel is pinned to
   the tallest one's height and the status strip is pushed to the bottom, so the
   replica window keeps its size and its status bar while pages are switched. */
.app__pages { display: flex; flex-direction: column; gap: 10px; }
.app__page { display: none; flex-direction: column; gap: 10px; min-height: 448px; }
.app__page.is-on { display: flex; }
.app__page .app__status { margin-top: auto; }
@media (prefers-reduced-motion: no-preference) {
  .app__page.is-on { animation: pageIn .26s cubic-bezier(.2, .8, .25, 1) both; }
}
@keyframes pageIn { from { opacity: 0; transform: translateY(6px); } }

/* Playback row under the comparison panel */
.app__seek {
  display: flex; align-items: center; gap: 8px; margin-top: 9px;
  font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--app-soft);
}
.app__seekbar {
  position: relative; flex: 1; min-width: 0; height: 6px; border-radius: 3px;
  background: rgba(31, 34, 51, .14);
}
.app.is-dark .app__seekbar { background: rgba(255, 255, 255, .16); }
.app__seekbar i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--app-side); }
.app__acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }

.app__warn {
  display: flex; align-items: center; gap: 6px; margin-top: 7px;
  font-size: 10.5px; font-weight: 700; color: #9a6b00;
}
.app__warn svg { width: 13px; height: 13px; flex: none; }
.app.is-dark .app__warn { color: #e5b95c; }

/* In-page comparison preview. Two frames of one scene are stacked; the top one
   is clipped at --cut, and a native range input supplies the draggable handle
   (so dragging also works with a keyboard and with touch). */
.app__compare {
  position: relative; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--app-line); background: #221d33;
  width: 100%; max-width: 540px; margin: 0 auto;
}
/* as the window narrows the comparison panel is capped tighter, so the preview
   page stops outgrowing the other three */
@media (max-width: 1100px) { .app__compare { max-width: 430px; } }
@media (max-width: 820px) { .app__compare { max-width: 372px; } }
.app__cmpimg { display: block; width: 100%; height: auto; }
.app__cmpimg--top { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--cut, 50%)); }
.app__compedge {
  position: absolute; top: 0; bottom: 0; left: var(--cut, 50%); width: 2px;
  transform: translateX(-1px);
  background: var(--app-purple); box-shadow: 0 0 10px rgba(155, 139, 255, .75);
  pointer-events: none;
}
.app__cmprange {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  width: 100%; height: 56px; padding: 16px 0; box-sizing: border-box;
  margin: 0; border: 0; background: transparent;
  -webkit-appearance: none; appearance: none;
  cursor: ew-resize;
}
/* Make the track exactly as tall as the thumb: a taller track would leave the
   thumb aligned to its top edge instead of centred, while the input's own
   padding keeps a generous grab area around it. */
.app__cmprange::-webkit-slider-runnable-track { height: 24px; background: transparent; }
.app__cmprange::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 2px solid var(--app-purple);
  box-shadow: 0 2px 6px rgba(12, 13, 19, .45);
}
.app__cmprange::-moz-range-track { height: 24px; background: transparent; border: 0; }
.app__cmprange::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 2px solid var(--app-purple);
  box-shadow: 0 2px 6px rgba(12, 13, 19, .45);
}
.app__cmprange:focus-visible { outline-offset: -3px; }
.app__comptag {
  position: absolute; top: 7px; left: 7px;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(12, 13, 19, .55); color: #fff;
  font-size: 9.5px; font-weight: 700; letter-spacing: .02em;
}
.app__comptag--r { left: auto; right: 7px; background: rgba(91, 67, 214, .78); }

/* Task log block and the settings diagnostics/model lists (mirrors the app's
   「任务 / 日志」pane and 「系统检查 / 模型与资源」cards). */
.app__loghead {
  display: flex; align-items: center; gap: 7px;
  margin: 10px 0 7px; padding-top: 9px; border-top: 1px solid var(--app-line);
  font-size: 11px; font-weight: 800; color: var(--app-ink);
}
.app__loghead .app__qbtn { margin-left: auto; }
.app__log {
  margin: 0; padding: 9px 11px; border-radius: 12px;
  background: rgba(31, 34, 51, .06);
  font-family: var(--mono); font-size: 10.5px; line-height: 1.75;
  color: var(--app-soft); white-space: pre-wrap; overflow-wrap: anywhere;
}
.app.is-dark .app__log { background: rgba(255, 255, 255, .06); }

.app__diag, .app__models { display: grid; gap: 0; }
.app__diag li, .app__models li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 5px 0; border-bottom: 1px dashed var(--app-line);
  font-size: 11px;
}
.app__diag li:last-child, .app__models li:last-child { border-bottom: 0; }
.app__diag li span:first-child { color: var(--app-soft); flex: none; }
.app__diag li span:last-child {
  font-family: var(--mono); font-size: 10.5px; color: var(--app-ink);
  text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app__models li b { font-size: 11.5px; font-weight: 700; color: var(--app-ink); }
.app__mstat {
  flex: none; padding: 1px 8px; border-radius: 999px;
  background: rgba(31, 34, 51, .07); color: var(--app-faint);
  font-size: 9.5px; font-weight: 800;
}
.app__mstat--ok { background: rgba(46, 204, 113, .16); color: #128a54; }
.app__mstat--part { background: rgba(194, 138, 0, .16); color: #9a6b00; }
.app.is-dark .app__mstat--ok { color: #5fd8a3; }
.app.is-dark .app__mstat--part { color: #e5b95c; }

/* Narrower windows drop replica columns; the header must drop the matching
   labels in the same order, or the extra label wraps onto its own row. */
@media (max-width: 1160px) {
  .app__thead, .app__trow { grid-template-columns: 62px minmax(0, 1fr) 92px; }
  .app__proc, .app__thead span:nth-child(3) { display: none; }
}
@media (max-width: 820px) {
  .app { font-size: 12px; }
  .app__thead, .app__trow { grid-template-columns: 58px minmax(0, 1fr); }
  .app__thead span:nth-child(3), .app__thead span:nth-child(4), .app__prog { display: none; }
}
@media (max-width: 620px) {
  .app { grid-template-columns: 66px minmax(0, 1fr); }
  .app__navitem { font-size: 10.5px; }
  .app__navitem svg { width: 17px; height: 17px; }
  .app__status em { display: none; }
  /* Where the panels stack, their content is trimmed so the replica window keeps
     a similar height while pages are switched: drop the log block and the tail
     of the diagnostics / model lists. */
  .app__loghead, .app__log { display: none; }
  .app__diag li:nth-child(n+6), .app__models li:nth-child(n+5) { display: none; }
}

/* Floating decorative marks behind the hero visual */
.float-tags { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* they are anchored to percentage offsets and would sit half-cut against the
   viewport edge on phones, so they are dropped below tablet width */
@media (max-width: 700px) { .float-tags { display: none; } }
.float-tag {
  position: absolute; width: 44px; height: 44px; opacity: 0;
  animation: floatTag 15s ease-in-out infinite;
}
.float-tag svg { width: 100%; height: 100%; }
@keyframes floatTag {
  0%, 100% { transform: translateY(0) rotate(-6deg); opacity: .1; }
  50% { transform: translateY(-22px) rotate(6deg); opacity: .24; }
}

/* ---------- 8. Feature grid ---------- */
.grid { display: grid; gap: 18px; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(276px, 1fr)); }

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  overflow: hidden;
}
.card::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--brand-2), var(--brand-3));
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s ease;
}
.card:hover { transform: translateY(-4px); border-color: var(--brand-line); box-shadow: var(--shadow); }
.card:hover::after { transform: scaleX(1); }
.card__ico {
  width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center; margin-bottom: 15px;
  background: var(--brand-soft); color: var(--brand);
  border: 1px solid var(--brand-line);
}
.card__ico svg { width: 21px; height: 21px; display: block; }
.card h3 { font-size: 16.5px; }
.card p { margin-top: 8px; font-size: 14.5px; color: var(--fg-2); }
.card__en { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--fg-3); margin-top: 5px; }

/* ---------- 9. Processing pipeline ---------- */
.pipe {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(198px, 1fr));
  gap: 14px; margin-bottom: 26px;
}
.step {
  position: relative;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 18px 20px;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.step__n {
  font-family: var(--mono); font-size: 11.5px; color: var(--fg-3);
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.step__n i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong);
  transition: background-color .3s ease, box-shadow .3s ease;
}
.step h4 { font-size: 15px; }
.step p { margin-top: 7px; font-size: 13.5px; color: var(--fg-2); }
.step__tech {
  display: inline-block; margin-top: 11px; font-family: var(--mono); font-size: 11.5px;
  padding: 3px 8px; border-radius: 6px; background: var(--surface-2); color: var(--fg-2);
}
.step.is-active { border-color: var(--brand-line); box-shadow: 0 0 0 3px var(--brand-soft); transform: translateY(-3px); }
.step.is-active .step__n i { background: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.step.is-done { border-color: var(--line); }
.step.is-done .step__n i { background: var(--ok); }

.pipe__bar {
  height: 6px; border-radius: 3px; background: var(--surface-2);
  overflow: hidden; border: 1px solid var(--line);
}
.pipe__bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--brand-2), var(--brand), var(--brand-3));
  background-size: 200% 100%;
  animation: hueSlide 3s linear infinite;
  transition: width .5s cubic-bezier(.3, .9, .3, 1);
}
.pipe__status {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px; font-size: 12.5px; color: var(--fg-3); font-family: var(--mono);
}

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 26px; }
.fact {
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  padding: 16px 18px; background: var(--surface-2);
}
.fact b { display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.fact b svg { width: 16px; height: 16px; color: var(--brand); flex: none; }
.fact span { font-size: 13.5px; color: var(--fg-2); }

/* ---------- 10. Download ---------- */
.dl { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 22px; align-items: start; }
@media (max-width: 920px) { .dl { grid-template-columns: 1fr; } }

.dl__main {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 28px;
  box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
.dl__main::before {
  content: ""; position: absolute; inset: -60% -20% auto auto; width: 320px; height: 320px;
  background: radial-gradient(circle, var(--brand-soft), transparent 66%);
  pointer-events: none;
}
.dl__ver { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dl__ver strong { font-size: 25px; letter-spacing: -.02em; }
.dl__ver em { font-style: normal; font-size: 13px; color: var(--fg-3); font-family: var(--mono); }

.specs { display: grid; gap: 0; margin: 20px 0 22px; border-top: 1px solid var(--line); }
.specs li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.specs li span:first-child { color: var(--fg-3); }
.specs li span:last-child { font-family: var(--mono); font-size: 13px; text-align: right; }

.urlbox {
  display: flex; align-items: center; gap: 8px;
  margin-top: 16px; padding: 8px 8px 8px 14px;
  background: var(--surface-2); border: 1px dashed var(--line-strong);
  border-radius: 10px;
}
.urlbox code {
  flex: 1; min-width: 0; font-size: 12.5px; color: var(--fg-2);
  overflow-x: auto; white-space: nowrap; scrollbar-width: none;
}
.urlbox code::-webkit-scrollbar { display: none; }
.urlbox .icon-btn { width: 32px; height: 32px; border-radius: 8px; }
.urlbox .icon-btn svg { width: 16px; height: 16px; }

.dlstat {
  display: flex; align-items: center; gap: 5px;
  margin-top: 12px; font-size: 13px; color: var(--fg-3);
}
.dlstat b { font-family: var(--mono); font-size: 14.5px; font-weight: 700; color: var(--fg); }
.dlstat[hidden] { display: none; }

.dl__side { display: grid; gap: 14px; }

.note {
  display: flex; gap: 11px; align-items: flex-start;
  margin-top: 18px; padding: 13px 15px;
  border-radius: 11px; font-size: 13.5px;
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 34%, transparent);
  color: var(--fg-2);
}
.note svg { width: 17px; height: 17px; flex: none; color: var(--warn); margin-top: 2px; }
.note code { font-size: 12.5px; }

/* ---------- 11. Cloud-drive download ---------- */
.drive {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 18px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  color: inherit;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.drive:hover { text-decoration: none; border-color: var(--brand-line); box-shadow: var(--shadow); transform: translateY(-3px); }
.drive__ico {
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  box-shadow: 0 6px 16px rgba(91, 67, 214, .3);
}
.drive__ico svg { width: 22px; height: 22px; }
.drive__body { min-width: 0; }
.drive__body b { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 17px; }
.drive__body b em {
  font-style: normal; font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  padding: 2px 8px; border-radius: 999px; color: var(--brand);
  background: var(--brand-soft); border: 1px solid var(--brand-line);
}
.drive__body p { font-size: 13.5px; color: var(--fg-2); margin-top: 3px; }
.drive__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.drive__meta .pill { display: inline-flex; align-items: center; gap: 5px; }
.mini__go { margin-left: auto; align-self: center; color: var(--fg-3); flex: none; }
.mini__go svg { width: 17px; height: 17px; }

.pw {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 10px; padding: 3px 4px 3px 10px;
  border: 1px dashed var(--line-strong); border-radius: 9px;
  background: var(--surface-2);
  font-size: 12.5px;
}
.pw > span { color: var(--fg-3); }
.pw > code { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--fg); }
.pw .icon-btn { width: 26px; height: 26px; border-radius: 7px; }
.pw .icon-btn svg { width: 14px; height: 14px; }

.pill {
  font-size: 11.5px; font-family: var(--mono); padding: 3px 9px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--fg-2);
}
.pill--ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.pill--warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 12%, transparent); }

.qr {
  display: grid; place-items: center; gap: 12px;
  padding: 22px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  text-align: center;
}
.qr img { width: 168px; height: 168px; border-radius: 12px; border: 1px solid var(--line); background: #fff; padding: 6px; }
.qr b { font-size: 14.5px; }
.qr p { font-size: 13px; color: var(--fg-2); }

/* ---------- 12. Quick start / requirements ---------- */
.steps { display: grid; gap: 14px; }
.stepper {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px;
  padding: 18px 20px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .2s ease, transform .2s ease;
}
.stepper:hover { border-color: var(--brand-line); transform: translateX(4px); }
.stepper__n {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--brand);
  background: var(--brand-soft); border: 1px solid var(--brand-line);
}
.stepper b { font-size: 15.5px; }
.stepper p { font-size: 14px; color: var(--fg-2); margin-top: 5px; }
.stepper code, .req code {
  font-size: 12.5px; padding: 1px 6px; border-radius: 5px;
  background: var(--surface-2); border: 1px solid var(--line);
}

.req { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.req__col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.req__col h4 { font-size: 15px; display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.req__col h4 svg { width: 18px; height: 18px; color: var(--brand); flex: none; }
.req__col li {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 13.5px; padding: 7px 0; border-bottom: 1px dashed var(--line);
}
.req__col li:last-child { border-bottom: 0; }
.req__col li span:first-child { color: var(--fg-3); }
.req__col li span:last-child { font-family: var(--mono); font-size: 12.5px; text-align: right; }

/* ---------- 13. Tech stack ---------- */
.techgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(216px, 1fr)); gap: 12px; }
.tech {
  display: flex; flex-direction: column; gap: 3px;
  padding: 16px 18px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.tech:hover { border-color: var(--brand-line); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.tech b { font-family: var(--mono); font-size: 14px; letter-spacing: -.01em; }
.tech span { font-size: 13px; color: var(--fg-3); }

/* ---------- 14. FAQ ---------- */
.faq { display: grid; gap: 10px; }
.faq details {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color .2s ease;
}
.faq details[open] { border-color: var(--brand-line); }
.faq summary {
  cursor: pointer; padding: 16px 20px; font-size: 15.5px; font-weight: 600;
  display: flex; align-items: center; gap: 12px; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; margin-left: auto; width: 9px; height: 9px; flex: none;
  border-right: 2px solid var(--fg-3); border-bottom: 2px solid var(--fg-3);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .25s ease;
}
.faq details[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.faq p { padding: 0 20px 18px; font-size: 14.5px; color: var(--fg-2); }

/* ---------- 15. Footer ---------- */
.ftr {
  background: var(--bg-alt); border-top: 1px solid var(--line);
  padding: 54px 0 30px;
}
.ftr__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 34px; }
@media (max-width: 820px) { .ftr__grid { grid-template-columns: 1fr 1fr; gap: 26px; } }
@media (max-width: 520px) { .ftr__grid { grid-template-columns: 1fr; } }
.ftr h4 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 14px; }
.ftr li + li { margin-top: 9px; }
.ftr a { color: var(--fg-2); font-size: 14px; }
.ftr a:hover { color: var(--brand); }
.ftr__links a { display: inline-flex; align-items: center; gap: 7px; }
.ftr__links a svg { width: 14px; height: 14px; color: var(--fg-3); flex: none; }
.ftr__links a:hover svg { color: var(--brand); }
.ftr__about p { font-size: 13.5px; color: var(--fg-2); margin-top: 12px; max-width: 320px; }
.ftr__bot {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between;
  font-size: 13px; color: var(--fg-3);
}

/* ---------- 16. Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .25, 1); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal--d1 { transition-delay: .06s; }
.reveal--d2 { transition-delay: .12s; }
.reveal--d3 { transition-delay: .18s; }

/* ---------- 17. Back to top ---------- */
.totop {
  position: fixed; right: 22px; bottom: 22px; z-index: 40;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--surface); color: var(--fg-2);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none;
  transition: all .25s ease;
}
.totop.is-on { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { color: var(--brand); border-color: var(--brand-line); }
.totop svg { width: 20px; height: 20px; }

/* ---------- 18. Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 60;
  transform: translate(-50%, 20px);
  background: var(--fg); color: var(--bg);
  padding: 10px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 19. Print ---------- */
@media print {
  .hdr, .totop, .toast, .hero__grid-bg, .float-tags, .app { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .step, .drive, .qr, .dl__main { box-shadow: none; }
  /* a section that was never scrolled into view would otherwise print blank */
  .reveal { opacity: 1 !important; transform: none !important; }
}