/* Lid demo 3D (docs/features/website-demo-3d.md). Fixed 16:10 stage, so the
   poster, the WebGL canvas and the fallback video share one box and nothing
   shifts while the 3D path loads. Transparent: only the MacBook (and its
   optional soft contact shadow, data-contact-shadow="off" to drop it) sits on
   the page's own background. */
.ld3{margin:0;width:100%}
.ld3-stage{min-width:0}
.ld3-stage{position:relative;width:100%;aspect-ratio:16/10;background:transparent;isolation:isolate}
.ld3-stage>picture,.ld3-stage>picture img,.ld3-stage>canvas,.ld3-stage>video{
  position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain}
.ld3-stage>canvas,.ld3-stage>video{opacity:0;transition:opacity .45s ease-out}
.ld3-stage.is-live>canvas,.ld3-stage.is-live>video{opacity:1}
/* transparent stage: the poster would show through the live layer, so hide it
   once the canvas or video is live */
.ld3-stage>picture{transition:opacity .45s ease-out}
.ld3-stage.is-live>picture{opacity:0}
/* Steps beside the demo (below it when the box is narrow). Before the live
   layer starts, and with reduced motion, all steps show as a plain list; while
   animating, the current step and its loop are highlighted. Colours derive
   from the inherited text colour, so they work on dark and light pages. */
.ld3-box{container-type:inline-size;width:100%}
.ld3{display:grid;gap:16px;align-items:center}
@container (min-width:640px){
  .ld3{grid-template-columns:minmax(0,1fr) clamp(200px,27%,270px);gap:28px}
}
.ld3-steps{display:grid;gap:18px;margin:0;font-size:15px;line-height:1.4;text-align:left}
@container (max-width:639px){
  .ld3-steps{grid-template-columns:1fr 1fr;gap:16px;font-size:14px}
}
@container (max-width:419px){
  .ld3-steps{grid-template-columns:1fr;gap:12px}
}
.ld3-group{transition:opacity .3s ease-out}
.ld3-gh{margin:0 0 6px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.55}
.ld3-group ol{list-style:none;margin:0;padding:0;counter-reset:ld3s;display:grid;gap:6px}
.ld3-group li{counter-increment:ld3s;position:relative;padding:1px 0 1px 30px;opacity:.78;
  transition:opacity .25s ease-out}
.ld3-group li::before{content:counter(ld3s);position:absolute;left:0;top:0;width:20px;height:20px;
  box-sizing:border-box;border:1px solid currentColor;border-radius:50%;font-size:11px;font-weight:600;
  line-height:18px;text-align:center;opacity:.6;transition:background-color .25s,border-color .25s,color .25s,opacity .25s}
.ld3.is-anim .ld3-group{opacity:.55}
.ld3.is-anim .ld3-group.is-on{opacity:1}
.ld3.is-anim .ld3-group.is-on li{opacity:.6}
.ld3.is-anim .ld3-group li.is-on{opacity:1}
.ld3.is-anim .ld3-group li.is-on::before{background:var(--accent,#2B52BC);border-color:var(--accent,#2B52BC);color:#fff;opacity:1}
@media (prefers-reduced-motion:reduce){
  .ld3-stage>canvas,.ld3-stage>video{display:none}
  .ld3-group,.ld3-group li,.ld3.is-anim .ld3-group,.ld3.is-anim .ld3-group li{opacity:1;transition:none}
}
/* Guides: the demo sits first inside the top CTA card, full card width. */
.cta-card.ld3-host{flex-direction:column;align-items:stretch}
.cta-card.ld3-host>.ld3-box{flex:none}
.cta-card.ld3-host>p{flex:none}
.cta-card.ld3-host>.btn{align-self:flex-start}
@media (max-width:560px){
  .cta-card.ld3-host>.ld3-box{margin:-10px -12px 0;width:calc(100% + 24px)}
  .cta-card.ld3-host .ld3-steps{padding:0 12px}
}
/* Guides without a top CTA card, and comparison pages (below the table) */
.ld3-box.ld3-solo{margin:30px 0 34px}
/* Homepage section */
.ld3-box.ld3-wide{max-width:1040px;margin:0 auto}