/* The landing page (page_install.html). Everything is prefixed lp- so it
   cannot reach the sign-in, legal or error pages that share the layout.
   Colours come from the theme tokens in workspace.css, so light and dark are
   a token swap here too. No script: the hero's ecosystem tabs are radio
   inputs, and the panel shown is chosen with :checked below. */

.lp { position:relative; }
.lp code { font:.92em ui-monospace,monospace; background:var(--surface-2); border:1px solid var(--border); border-radius:5px; padding:1px 6px; color:var(--text-1); }
.lp h2 { color:var(--text-1); }

/* ------------------------------------------------------------- nav */
/* Sticky and full-bleed: the bar spans the window while its contents stay on
   the 1280px column (the negative margin and the padding cancel). Sticky
   works because html and body clip overflow rather than hide it - hidden
   would make body the scroll container and the bar would scroll away. */
html:has(.lp-header) { scroll-behavior:smooth; scroll-padding-top:84px; }
.lp-header { position:sticky; top:0; z-index:50; margin:0 calc(50% - 50vw); padding:0 calc(50vw - 50%);
  background:color-mix(in srgb, var(--surface-0) 62%, transparent);
  -webkit-backdrop-filter:blur(16px) saturate(170%); backdrop-filter:blur(16px) saturate(170%);
  border-bottom:1px solid color-mix(in srgb, var(--border) 55%, transparent);
  transition:background .25s, border-color .25s, box-shadow .25s; }
.lp-header.is-scrolled { background:color-mix(in srgb, var(--surface-0) 82%, transparent); border-bottom-color:var(--border); box-shadow:0 10px 40px -18px #0009; }
/* With the script running (lp-live), the bar is clear at the very top so the
   hero's grid runs under it, and turns to glass once the page moves. */
.lp-header.lp-live:not(.is-scrolled) { background:transparent; border-bottom-color:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; }
:root[data-theme="light"] .lp-header.is-scrolled { box-shadow:0 8px 30px -22px #18243b55; }
.lp-nav { display:flex; align-items:center; gap:28px; height:76px; transition:height .25s; }
.lp-header.is-scrolled .lp-nav { height:60px; }
.lp-brand { font-size:23px; letter-spacing:-1px; transition:font-size .25s; }
.lp-brand svg { transition:transform .3s; }
.lp-brand:hover svg { transform:rotate(-8deg) scale(1.06); }
.lp-header.is-scrolled .lp-brand { font-size:21px; }
.lp-nav-links { display:flex; align-items:center; gap:4px; margin:0 auto; padding:4px; border:1px solid var(--border); border-radius:999px; background:color-mix(in srgb, var(--surface-1) 70%, transparent); }
.lp-nav-links a { position:relative; display:inline-flex; align-items:center; gap:7px; padding:7px 15px; border-radius:999px; color:var(--text-3); font-size:13px; font-weight:500; text-decoration:none; transition:color .15s, background .15s; }
.lp-nav-links a:hover { color:var(--text-1); background:var(--surface-2); text-decoration:none; }
.lp-nav-links a[aria-current] { color:var(--text-1); background:var(--surface-3); }
.lp-nav-new { font:600 8.5px/1 ui-monospace,monospace; letter-spacing:.8px; padding:3px 5px; border-radius:4px; background:var(--accent-soft); color:var(--accent-ink); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.lp-nav-end { display:flex; align-items:center; gap:18px; }
.lp-nav-signin { color:var(--text-2); font-size:13px; font-weight:500; text-decoration:none; }
.lp-nav-signin:hover { color:var(--text-1); text-decoration:none; }
.lp-nav-cta { gap:14px; padding:9px 15px; min-height:38px; border:1px solid var(--border-strong); background:var(--surface-1); color:var(--text-1); transition:background .25s, color .25s, border-color .25s, box-shadow .25s; }
.lp-header.is-scrolled .lp-nav-cta { background:var(--accent); border-color:var(--accent); color:var(--accent-fg); box-shadow:0 6px 20px -6px color-mix(in srgb, var(--accent) 60%, transparent); }
/* Reading progress along the bar's bottom edge, where scroll-driven
   animations exist; elsewhere it is simply not drawn. */
.lp-progress { display:none; }
@supports (animation-timeline: scroll()) {
  .lp-progress { display:block; position:absolute; left:0; right:0; bottom:-1px; height:2px; transform-origin:0 50%; transform:scaleX(0);
    background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 30%, transparent), var(--accent));
    animation:lp-progress linear both; animation-timeline:scroll(root); }
  @keyframes lp-progress { to { transform:scaleX(1); } }
}
/* The phone menu: a <details>, so it opens without script. */
.lp-menu { display:none; position:relative; }
.lp-menu summary { list-style:none; cursor:pointer; display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--border-strong); border-radius:9px; background:var(--surface-1); }
.lp-menu summary::-webkit-details-marker { display:none; }
.lp-burger { display:grid; gap:4px; width:16px; }
.lp-burger i { display:block; height:1.5px; border-radius:2px; background:var(--text-1); transition:transform .2s, opacity .2s; }
.lp-menu[open] .lp-burger i:nth-child(1) { transform:translateY(5.5px) rotate(45deg); }
.lp-menu[open] .lp-burger i:nth-child(2) { opacity:0; }
.lp-menu[open] .lp-burger i:nth-child(3) { transform:translateY(-5.5px) rotate(-45deg); }
.lp-menu-panel { position:absolute; right:0; top:calc(100% + 10px); width:min(280px, calc(100vw - 32px)); display:grid; gap:2px; padding:8px; border:1px solid var(--border-strong); border-radius:14px; background:var(--surface-1); box-shadow:0 24px 60px -12px #000a; animation:lp-in .18s ease-out; }
.lp-menu-panel a { display:flex; align-items:center; gap:8px; padding:12px 14px; border-radius:9px; color:var(--text-2); font-size:15px; font-weight:500; text-decoration:none; }
.lp-menu-panel a:hover,.lp-menu-panel a[aria-current] { background:var(--surface-2); color:var(--text-1); text-decoration:none; }
.lp-menu-panel .lp-menu-signin { margin-top:6px; border-top:1px solid var(--border); border-radius:0 0 9px 9px; padding-top:14px; color:var(--text-1); }

/* ------------------------------------------------------------ hero */
.lp-hero { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:56px; align-items:center; padding:80px 0 64px; }
/* Full-bleed: the glow and grid span the viewport, not the 1280px column.
   html/body clip the overflow (workspace.css), so it never scrolls sideways. */
.lp-hero::before { content:""; position:absolute; z-index:-1; top:-76px; bottom:0; left:50%; width:100vw; margin-left:-50vw; pointer-events:none;
  background:
    radial-gradient(620px 400px at 68% 42%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(520px 340px at 22% 22%, color-mix(in srgb, var(--allow) 8%, transparent), transparent 70%),
    linear-gradient(var(--border) 1px, transparent 1px) 0 0/56px 56px,
    linear-gradient(90deg, var(--border) 1px, transparent 1px) 0 0/56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 40%, #000 35%, transparent 85%);
          mask-image:radial-gradient(ellipse 85% 75% at 50% 40%, #000 35%, transparent 85%);
  opacity:.9; }
.lp-pill { display:inline-flex; align-items:center; gap:10px; padding:5px 14px 5px 5px; border:1px solid var(--border-strong); border-radius:999px; background:var(--surface-1); color:var(--text-2); font-size:12.5px; text-decoration:none; transition:border-color .15s; }
.lp-pill:hover { border-color:var(--accent); text-decoration:none; }
.lp-pill code { background:none; border:0; padding:0; color:var(--accent-ink); }
.lp-pill-tag { background:var(--accent); color:var(--accent-fg); border-radius:999px; padding:3px 9px; font:600 9.5px/1.4 ui-monospace,monospace; letter-spacing:1px; }
.lp-hero-copy h1 { font-size:clamp(40px,4.3vw,62px); line-height:1.04; letter-spacing:-.05em; font-weight:680; margin:28px 0 24px; color:var(--text-1); }
.lp-hero-copy h1>span { background:linear-gradient(100deg, var(--text-3) 10%, var(--accent) 95%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lp-lead { max-width:500px; font-size:16.5px; line-height:1.7; color:var(--text-2); margin:0; }
.lp-actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:34px 0 18px; }
.lp-cta { padding:13px 20px; gap:18px; min-height:46px; font-size:14px; box-shadow:0 10px 30px color-mix(in srgb, var(--accent) 30%, transparent); }
.lp-ghost { display:inline-flex; align-items:center; gap:10px; min-height:46px; padding:0 18px; border:1px solid var(--border-strong); border-radius:7px; color:var(--text-1); font-size:14px; font-weight:550; text-decoration:none; }
.lp-ghost:hover { background:var(--surface-2); text-decoration:none; }
.lp-fine { margin:0; color:var(--text-3); font-size:12.5px; }

/* ---------------------------------------------------- hero terminal */
.lp-term { position:relative; background:var(--surface-1); border:1px solid var(--border-strong); border-radius:14px; overflow:hidden;
  box-shadow:0 40px 120px -20px #0007, 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent); }
.lp-tab-input { position:absolute; opacity:0; pointer-events:none; }
.lp-term-top { display:flex; align-items:center; gap:16px; padding:10px 16px; border-bottom:1px solid var(--border); background:var(--surface-2); }
.lp-dots { display:flex; gap:6px; }
.lp-dots i { width:10px; height:10px; border-radius:50%; background:var(--border-strong); }
.lp-tabs { display:flex; gap:2px; }
.lp-tabs label { cursor:pointer; padding:6px 12px; border-radius:6px; color:var(--text-3); font:500 12px ui-monospace,monospace; transition:color .15s, background .15s; }
.lp-tabs label:hover { color:var(--text-1); }
.lp-term-label { margin-left:auto; font:9px ui-monospace,monospace; letter-spacing:1.3px; color:var(--text-3); }
.lp-panel { display:none; }
.lp-panel pre { margin:0; padding:22px 22px 18px; min-height:282px; font:12.5px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--text-2); white-space:pre; overflow-x:auto; }
.lp-panel pre b { color:var(--text-1); font-weight:600; }
.lp-p { color:var(--accent); }
.lp-dim { color:var(--text-3); }
.lp-k { color:var(--text-1); font-weight:600; }
.lp-ok { color:var(--allow); }
.lp-bad { color:var(--block); font-weight:600; }
.lp-warn { color:var(--warn); font-weight:600; }
.lp-verdict { display:flex; align-items:center; gap:14px; margin:0 16px 16px; padding:12px 16px; border-radius:9px; border:1px solid; font-size:13px; color:var(--text-2); }
.lp-v-word { font:700 12px ui-monospace,monospace; letter-spacing:1px; padding:4px 9px; border-radius:5px; }
.lp-v-code { margin-left:auto; font:11px ui-monospace,monospace; color:var(--text-3); }
.lp-v-allow { background:var(--allow-soft); border-color:color-mix(in srgb, var(--allow) 35%, transparent); }.lp-v-allow .lp-v-word { background:var(--allow); color:var(--surface-0); }
.lp-v-warn { background:var(--warn-soft); border-color:color-mix(in srgb, var(--warn) 35%, transparent); }.lp-v-warn .lp-v-word { background:var(--warn); color:var(--surface-0); }
.lp-v-block { background:var(--block-soft); border-color:color-mix(in srgb, var(--block) 35%, transparent); }.lp-v-block .lp-v-word { background:var(--block); color:var(--surface-0); }

#eco-uv:checked ~ .lp-panel-uv,#eco-npm:checked ~ .lp-panel-npm,#eco-bun:checked ~ .lp-panel-bun,
#eco-pnpm:checked ~ .lp-panel-pnpm,#eco-go:checked ~ .lp-panel-go { display:block; animation:lp-in .25s ease-out; }
#eco-uv:checked ~ .lp-term-top label[for="eco-uv"],#eco-npm:checked ~ .lp-term-top label[for="eco-npm"],
#eco-bun:checked ~ .lp-term-top label[for="eco-bun"],#eco-pnpm:checked ~ .lp-term-top label[for="eco-pnpm"],
#eco-go:checked ~ .lp-term-top label[for="eco-go"] { background:var(--surface-1); color:var(--text-1); box-shadow:inset 0 -2px var(--accent); }
#eco-uv:focus-visible ~ .lp-term-top label[for="eco-uv"],#eco-npm:focus-visible ~ .lp-term-top label[for="eco-npm"],
#eco-bun:focus-visible ~ .lp-term-top label[for="eco-bun"],#eco-pnpm:focus-visible ~ .lp-term-top label[for="eco-pnpm"],
#eco-go:focus-visible ~ .lp-term-top label[for="eco-go"] { outline:2px solid var(--accent); outline-offset:1px; }
@keyframes lp-in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

/* ------------------------------------------------------- ecosystems */
.lp-eco { display:flex; align-items:center; gap:28px; padding:26px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.lp-eco-label { font:9.5px ui-monospace,monospace; letter-spacing:1.4px; color:var(--text-3); white-space:nowrap; }
.lp-eco ul { list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; flex:1; justify-content:space-between; }
.lp-eco li { display:flex; flex-direction:column; gap:2px; padding:8px 14px; border-radius:9px; border:1px solid transparent; }
.lp-eco li b { font-size:17px; font-weight:650; letter-spacing:-.3px; color:var(--text-1); }
.lp-eco li span { font:10.5px ui-monospace,monospace; color:var(--text-3); }
.lp-eco li.lp-eco-new { border-color:color-mix(in srgb, var(--accent) 45%, transparent); background:var(--accent-soft); position:relative; }
.lp-eco li.lp-eco-new::after { content:"NEW"; position:absolute; top:-8px; right:10px; background:var(--accent); color:var(--accent-fg); font:600 8.5px/1 ui-monospace,monospace; letter-spacing:1px; padding:3px 6px; border-radius:4px; }

/* --------------------------------------------------------- sections */
.lp-section { padding:96px 0 0; scroll-margin-top:-36px; }
.lp-head { max-width:680px; margin-bottom:44px; }
.lp-head h2,.lp-split h2,.lp-cooldown h2,.lp-start h2 { font-size:clamp(30px,3.2vw,42px); line-height:1.12; letter-spacing:-.035em; font-weight:650; margin:14px 0 16px; }
.lp-head p,.lp-split p,.lp-cooldown p { color:var(--text-2); font-size:15.5px; line-height:1.75; margin:0; }
.lp-eyebrow { display:inline-block; font:10.5px ui-monospace,monospace; letter-spacing:1.5px; color:var(--accent-ink); }
.lp-eyebrow-new { background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius:999px; padding:4px 11px; }

.lp-steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; border:1px solid var(--border); border-radius:14px; background:var(--surface-1); overflow:hidden; }
.lp-steps li { position:relative; padding:28px 26px 30px; border-right:1px solid var(--border); }
.lp-steps li:last-child { border-right:0; }
.lp-steps li:not(:last-child)::after { content:"→"; position:absolute; right:-11px; top:28px; z-index:1; width:22px; height:22px; display:grid; place-items:center; border-radius:50%; background:var(--surface-0); border:1px solid var(--border); color:var(--text-3); font-size:11px; }
.lp-step-n { font:11px ui-monospace,monospace; color:var(--accent-ink); }
.lp-steps h3 { font-size:18px; font-weight:620; letter-spacing:-.3px; margin:16px 0 10px; color:var(--text-1); }
.lp-steps p { margin:0; color:var(--text-3); font-size:13.5px; line-height:1.7; }

/* ------------------------------------------------------------ python */
.lp-split { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:64px; align-items:center; }
.lp-list { list-style:none; margin:28px 0 0; padding:0; display:grid; gap:14px; }
.lp-list li { position:relative; padding-left:28px; color:var(--text-2); font-size:14.5px; line-height:1.65; }
.lp-list li::before { content:"✓"; position:absolute; left:0; top:1px; width:18px; height:18px; display:grid; place-items:center; border-radius:50%; background:var(--allow-soft); color:var(--allow); font-size:10px; font-weight:700; }
.lp-list b { color:var(--text-1); font-weight:600; }
.lp-code-card { background:var(--surface-1); border:1px solid var(--border-strong); border-radius:14px; overflow:hidden; box-shadow:0 30px 80px -30px #0006; }
.lp-code-head { display:flex; align-items:center; padding:12px 18px; border-bottom:1px solid var(--border); background:var(--surface-2); font:12px ui-monospace,monospace; color:var(--text-2); }
.lp-code-card pre { margin:0; padding:24px; font:14px/1.9 ui-monospace,monospace; color:var(--text-1); overflow-x:auto; }

/* ----------------------------------------------------------- cooldown */
.lp-cooldown { display:grid; grid-template-columns:auto minmax(0,1fr); gap:56px; align-items:center; margin-top:96px; padding:48px 52px; border:1px solid var(--border); border-radius:18px;
  background:radial-gradient(400px 260px at 0% 50%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), var(--surface-1); }
.lp-cool-n { font-size:140px; line-height:.85; font-weight:720; letter-spacing:-.06em; color:var(--accent); display:flex; flex-direction:column; align-items:center; }
.lp-cool-n span { font:12px ui-monospace,monospace; letter-spacing:3px; text-transform:uppercase; color:var(--text-3); margin-top:14px; }
.lp-cooldown h2 { margin-top:10px; }
.lp-cooldown p { max-width:720px; }

/* ------------------------------------------------------------- checks */
.lp-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.lp-card { padding:24px 22px 26px; border:1px solid var(--border); border-radius:12px; background:var(--surface-1); transition:border-color .15s, transform .15s; }
.lp-card:hover { border-color:var(--border-strong); transform:translateY(-2px); }
.lp-card-q { font:11px ui-monospace,monospace; color:var(--text-3); }
.lp-card h3 { font-size:15.5px; line-height:1.35; font-weight:620; letter-spacing:-.2px; margin:14px 0 8px; color:var(--text-1); }
.lp-card p { margin:0; color:var(--text-3); font-size:13px; line-height:1.65; }
.lp-card-hi { border-color:color-mix(in srgb, var(--accent) 40%, transparent); background:linear-gradient(160deg, var(--accent-soft), var(--surface-1) 70%); }
.lp-card-hi .lp-card-q,.lp-card-watch .lp-card-q { color:var(--accent-ink); }
.lp-card-watch { border-style:dashed; border-color:var(--border-strong); }

/* -------------------------------------------------------------- where */
.lp-where { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; border-top:1px solid var(--border); }
.lp-where-item { padding:28px 28px 8px 0; }
.lp-where-item + .lp-where-item { padding-left:28px; border-left:1px solid var(--border); }
.lp-where h3 { font-size:17px; font-weight:620; margin:0 0 10px; color:var(--text-1); }
.lp-where p { margin:0; color:var(--text-3); font-size:13.5px; line-height:1.7; }
.lp-codes { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.lp-codes span { font:600 10.5px ui-monospace,monospace; padding:4px 8px; border-radius:5px; }
.lp-c-allow { background:var(--allow-soft); color:var(--allow); }.lp-c-warn { background:var(--warn-soft); color:var(--warn); }.lp-c-block { background:var(--block-soft); color:var(--block); }

/* ---------------------------------------------------------- get started */
.lp-start { margin-top:96px; padding:56px; border:1px solid var(--border); border-radius:18px; background:var(--surface-1); }
.lp-start h2 { font-size:clamp(28px,3vw,38px); }
.lp-start .install-code,.lp-start .keybox,.lp-start .public .key { background:var(--surface-0); }
.lp-start .quickstart .keybox { background:var(--surface-0); }
.lp-start .key { background:var(--surface-0); }
.lp-start .quickstart-head h3 { font-size:13px; color:var(--text-1); }
.lp-cmds { line-height:2; }

/* ---------------------------------------------------------------- final */
.lp-final { text-align:center; padding:110px 0 100px; position:relative; }
.lp-final::before { content:""; position:absolute; z-index:-1; top:0; bottom:0; left:50%; width:100vw; margin-left:-50vw; pointer-events:none; background:radial-gradient(420px 220px at 50% 55%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%); }
.lp-final h2 { font-size:clamp(34px,4.4vw,58px); letter-spacing:-.045em; font-weight:680; margin:0 0 14px; }
.lp-final p { color:var(--text-3); font-size:15px; margin:0 0 30px; }

/* ----------------------------------------------------------- responsive */
@media(max-width:1100px) {
  .lp-nav-links { display:none; }
  .lp-nav-end { margin-left:auto; }
  .lp-menu { display:block; }
  .lp-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lp-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lp-steps li:nth-child(2) { border-right:0; }
  .lp-steps li:nth-child(-n+2) { border-bottom:1px solid var(--border); }
  .lp-steps li::after { display:none; }
  .lp-where { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lp-where-item:nth-child(3) { padding-left:0; border-left:0; }
}
@media(max-width:900px) {
  .lp-hero { grid-template-columns:minmax(0,1fr); gap:44px; padding:56px 0 48px; }
  .lp-split { grid-template-columns:minmax(0,1fr); gap:36px; }
  .lp-cooldown { grid-template-columns:minmax(0,1fr); gap:20px; padding:36px 28px; }
  .lp-cool-n { flex-direction:row; align-items:baseline; gap:14px; font-size:96px; }
  .lp-eco { flex-direction:column; align-items:flex-start; gap:14px; }
  .lp-eco ul { justify-content:flex-start; }
  .lp-start { padding:32px 24px; }
  .lp-section { padding-top:72px; }
}
@media(max-width:650px) {
  .lp-nav { gap:12px; height:64px; }
  .lp-header.is-scrolled .lp-nav { height:56px; }
  .lp-brand,.lp-header.is-scrolled .lp-brand { font-size:20px; }
  .lp-nav-end { gap:10px; }
  .lp-nav-signin { display:none; }
  .lp-nav-cta { padding:8px 12px; min-height:40px; gap:10px; font-size:12px; }
  html:has(.lp-header) { scroll-padding-top:68px; }
  .lp-hero-copy h1 { font-size:44px; }
  .lp-lead { font-size:15px; }
  .lp-actions>a { flex:1; justify-content:center; }
  .lp-panel pre { font-size:11px; padding:18px 14px; min-height:0; }
  .lp-tabs label { padding:6px 8px; }
  .lp-dots { display:none; }
  .lp-term-label { display:none; }
  .lp-verdict { flex-wrap:wrap; gap:8px 12px; margin:0 10px 10px; font-size:12px; }
  .lp-grid,.lp-steps,.lp-where { grid-template-columns:minmax(0,1fr); }
  .lp-steps li { border-right:0; border-bottom:1px solid var(--border); }
  .lp-steps li:last-child { border-bottom:0; }
  .lp-where-item,.lp-where-item + .lp-where-item { padding:22px 0 0; border-left:0; }
  .lp-eco li { padding:6px 10px; }
  .lp-cooldown { margin-top:72px; }
  .lp-start { margin-top:72px; }
  .lp-final { padding:80px 0 72px; }
}
@media(prefers-reduced-motion:reduce) { .lp-card:hover { transform:none; } html:has(.lp-header) { scroll-behavior:auto; } .lp-progress { display:none; } }