@property --mx{ syntax:'<percentage>'; inherits:true; initial-value:50%; }
@property --my{ syntax:'<percentage>'; inherits:true; initial-value:0%; }

.fx-canvas{
  position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none;
  opacity:0; transition:opacity 1.4s ease;
  -webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 30%, #000 15%, transparent 85%);
  mask-image:radial-gradient(ellipse 85% 75% at 50% 30%, #000 15%, transparent 85%);
}
.fx-canvas.on{ opacity:0.5; }

body header.nav{
  background:rgba(11,12,16,0.5);
  backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:rgba(255,255,255,0.08);
}

body .module-card, body .compare-card, body .support-card, body .faq-item,
body .family-card.live, body .changelog-item, body .terminal, body .mockup-shell{
  background:linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0) 45%), rgba(13,14,19,0.4);
  backdrop-filter:blur(2.5px) saturate(140%); -webkit-backdrop-filter:blur(2.5px) saturate(140%);
  border-color:rgba(255,255,255,0.1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.4),
    0 1px 0 #1b1d25, 0 2px 0 #15171d, 0 3px 0 #101217,
    0 10px 20px -8px rgba(0,0,0,0.55);
}
body .compare-card.current{ border-color:rgba(216,173,95,0.4); }
body .family-card:not(.live){ background:rgba(13,14,19,0.3); }
body .mockup-shell .mockup-titlebar, body .terminal .mockup-titlebar{ background:rgba(25,28,35,0.55); }

body a.module-link.reveal.in-view, body a.family-card.live.reveal.in-view{
  position:relative;
  transform:perspective(1000px) translateY(var(--ty,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .18s ease-out, opacity .6s ease, border-color .2s ease, --mx .25s ease-out, --my .25s ease-out;
}
body a.module-link.reveal.in-view:hover, body a.family-card.live.reveal.in-view:hover{
  --ty:-4px; transition-delay:0s !important; border-color:rgba(216,173,95,0.5);
}
body a.module-link::after, body a.family-card.live::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit;
  opacity:0; transition:opacity .25s ease;
  background:radial-gradient(380px circle at var(--mx) var(--my), rgba(255,255,255,0.09), transparent 62%);
}
body a.module-link:hover::after, body a.family-card.live:hover::after{ opacity:1; }

body a.module-link{ display:block; cursor:pointer; }
body a.module-link:focus-visible{ outline:2px solid rgba(216,173,95,0.6); outline-offset:3px; }

body .hero .hero-ctas{ margin-bottom:22px; }
body .hero .badges{ margin-bottom:14px; }


body .changelog-list{ max-width:none; margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; gap:18px; }
@media (max-width:880px){ body .changelog-list{ grid-template-columns:minmax(0,1fr); } }

/* gallery */
.shot-tile{ margin:0; cursor:zoom-in; }
.shot-tile picture{ display:block; }
.shot-tile img{
  display:block; width:100%; height:auto; border-radius:8px;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,0.5)); transition:filter .25s ease;
}
.shot-tile:hover img, .shot-tile:focus-visible img{ filter:drop-shadow(0 10px 22px rgba(0,0,0,0.5)) brightness(1.08); }
.shot-tile:focus-visible{ outline:2px solid rgba(216,173,95,0.6); outline-offset:6px; border-radius:8px; }
body .shot-gallery{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; align-items:start; }
body .shot-gallery:not(.side) .shot-tile:nth-child(1){ grid-column:1 / 3; grid-row:1 / 3; }
body .shot-gallery:not(.side) .shot-tile:nth-child(2){ grid-column:3; grid-row:1; }
body .shot-gallery:not(.side) .shot-tile:nth-child(3){ grid-column:3; grid-row:2; align-self:end; }
body .shot-gallery:not(.side) .shot-tile:nth-child(4){ grid-column:1; grid-row:3; }
body .shot-gallery:not(.side) .shot-tile:nth-child(5){ grid-column:2; grid-row:3; }
body .shot-gallery:not(.side) .shot-tile:nth-child(6){ grid-column:3; grid-row:3; }
body .shot-gallery.side .shot-tile:first-child{ grid-column:span 2; grid-row:span 2; }
body .shot-gallery.side .shot-tile:nth-child(2){ grid-column:3; grid-row:1; }
body .shot-gallery.side .shot-tile:nth-child(3){ grid-column:3; grid-row:2; align-self:end; }
.gallery-hint{ margin-top:12px; font-family:var(--font-mono); font-size:11.5px; color:var(--fg-faint); }
@media (max-width:880px){
  body .shot-gallery{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  body .shot-gallery:not(.side) .shot-tile:nth-child(n){ grid-column:auto; grid-row:auto; }
  body .shot-gallery:not(.side) .shot-tile:nth-child(1){ grid-column:1 / 3; }
  body .shot-gallery.side .shot-tile:nth-child(n){ grid-column:auto; grid-row:auto; align-self:start; }
  body .shot-gallery.side .shot-tile:nth-child(1){ grid-column:1 / 3; }
}

/* get started */
body .faq-list{ max-width:none; }
body .install-col:first-child{
  padding:24px 26px; border:1px solid rgba(255,255,255,0.1); border-radius:14px;
  background:linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0) 45%), rgba(13,14,19,0.4);
  backdrop-filter:blur(2.5px) saturate(140%); -webkit-backdrop-filter:blur(2.5px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.4), 0 1px 0 #1b1d25, 0 2px 0 #15171d, 0 3px 0 #101217, 0 10px 20px -8px rgba(0,0,0,0.55);
}
body .four-grid .install-col:first-child{
  position:relative; cursor:pointer;
  transform:perspective(1000px) translateY(var(--ty,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .18s ease-out, border-color .2s ease, --mx .25s ease-out, --my .25s ease-out;
}
body .four-grid .install-col:first-child:hover{ --ty:-4px; }
body .four-grid .install-col:first-child::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit;
  opacity:0; transition:opacity .25s ease;
  background:radial-gradient(380px circle at var(--mx) var(--my), rgba(255,255,255,0.09), transparent 62%);
}
body .four-grid .install-col:first-child:hover::after{ opacity:1; }
body .four-grid .install-col:first-child:hover{ border-color:rgba(216,173,95,0.45); }
body .install-col h3{ margin-bottom:6px; }
body .install-col .rec{ font-size:13px; color:var(--fg-faint); margin-bottom:14px; }
body .steps li{ border-top:none; padding:7px 0; align-items:center; }
body .steps .n{
  width:22px; height:22px; min-width:22px; padding-top:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(216,173,95,0.18); color:var(--accent-bright); font-size:11px;
}
body .smartscreen{ margin-top:12px; }
body .smartscreen summary{ cursor:pointer; color:var(--accent-bright); font-size:13.5px; list-style:none; display:flex; align-items:center; gap:8px; }
body .smartscreen summary::-webkit-details-marker{ display:none; }
body .smartscreen summary::before{ content:"\25B8"; display:inline-block; font-size:11px; color:var(--fg-muted); transition:transform .2s ease; }
body .smartscreen[open] summary::before{ transform:rotate(90deg); }
body .smartscreen p{ margin-top:10px; font-size:12.5px; color:var(--fg-muted); line-height:1.65; }
body .copy-btn{ background:none; border:0; padding:2px 4px; cursor:pointer; color:var(--fg-muted); font-family:var(--font-mono); font-size:11.5px; }
body .copy-btn:hover{ color:var(--fg); }

body .term-body{ font-variant-ligatures:none; }
body .term-body .ok{ color:#4ec94e; }
body .four-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
body .four-grid > *{ min-height:264px; }
body .four-grid .terminal{ display:flex; flex-direction:column; margin:0; }
body .four-grid .term-body{ flex:1; }
body .term-note{ padding:14px 18px; border-top:1px solid rgba(255,255,255,0.08); font-size:12.5px; line-height:1.6; color:var(--fg-faint); }
body .four-grid .support-card{ margin:0; }
@media (max-width:880px){ body .four-grid{ grid-template-columns:minmax(0,1fr); } body .four-grid > *{ min-height:0; } }
body .faq-item summary{ min-height:0; padding-top:15px; padding-bottom:15px; }

body .hero-grid h1{ max-width:760px; }

body .section{ padding:56px 0; }
body .section-head{ margin-bottom:36px; }
@media (max-width:880px){ body .section{ padding:44px 0; } }

@media (prefers-reduced-motion: reduce){
  .fx-canvas{ display:none; }
}

/* Static fallback: shown only when the WebGPU background is not running */
html::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(circle, rgba(216,173,95,0.5) 1px, transparent 1.7px);
  background-size:30px 30px;
  opacity:0.22;
  -webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 30%, #000 15%, transparent 85%);
  mask-image:radial-gradient(ellipse 85% 75% at 50% 30%, #000 15%, transparent 85%);
}
html:has(.fx-canvas.on)::before{ display:none; }