:root{--ab-w:95%}
.ab-hero{padding:120px 0 0}
.ab-stage{position:relative;width:var(--ab-w);max-width:none;margin:0 auto;overflow:hidden;
   border-radius:var(--r-card);background:var(--dark);padding:96px 24px;text-align:center}
.ab-glitch{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
   z-index:0;pointer-events:none}

.ab-veil{position:absolute;inset:0;z-index:1;background:rgba(11,15,30,.82)}
.ab-stage-in{position:relative;z-index:2;max-width:var(--container-content);margin:0 auto}

.ab-h1{position:relative;max-width:16ch;margin:0 auto;color:#fff}

.ab-arrow{position:absolute;inset-inline-start:8%;top:-24px;width:45px;height:auto}
.ab-uline{display:block;width:113px;height:auto;margin:8px auto 0}

.ab-intro{max-width:min(58ch,88vw);margin:32px auto 0;color:var(--tx-on-dark)}
.ab-intro p{margin:0 0 var(--sp-4);color:var(--tx-on-dark)}
.ab-intro p:last-child{margin-bottom:0}
.ab-intro b{color:#fff;font-weight:var(--fw-bold)}

.ab-step{padding:48px 0 0}
.ab-step:last-of-type{padding-bottom:0}
.ab-card{display:grid;grid-template-columns:1fr 1fr;min-height:500px;
   width:var(--ab-w);max-width:none;margin:0 auto;overflow:hidden;
   border-radius:var(--r-card);background:var(--cream)}
.ab-card-media{grid-column:1;grid-row:1;position:relative}
.ab-card-body{grid-column:2;grid-row:1;padding:56px;display:flex;flex-direction:column;
   justify-content:center;text-align:right}

.ab-card--flip .ab-card-body{grid-column:1;grid-row:1}
.ab-card--flip .ab-card-media{grid-column:2;grid-row:1}

.ab-shot{position:absolute;inset:0;margin:0}

.ab-shot img{width:100%;height:112%;object-fit:cover;display:block;
   translate:0 var(--py,-6%);will-change:translate}

.ab-shot:not(.is-playing)::after{content:"";position:absolute;inset:0;background:rgba(11,15,30,.22)}

.ab-play{position:absolute;inset:0;z-index:2;display:grid;place-items:center;
   border:none;background:none;cursor:pointer;padding:0}
.ab-play span{display:grid;place-items:center;width:78px;height:78px;border-radius:50%;
   background:rgba(255,255,255,.35);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
   box-shadow:0 0 0 1px rgba(255,255,255,.35);
   transition:transform .3s var(--ease-pop),background .3s var(--ease)}
.ab-play svg{width:26px;height:26px;fill:#fff;margin-inline-start:4px}
.ab-play:hover span{transform:scale(1.1);background:rgba(255,255,255,.55)}
.ab-play:focus-visible{outline:none}
.ab-play:focus-visible span{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--blue)}

.ab-shot iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.ab-num{/*latin*/display:block;font-family:var(--font-label);font-weight:var(--fw-bold);
   font-size:var(--fs-display);line-height:1;letter-spacing:var(--ls-tight);direction:ltr;
   color:var(--muted);margin:0 0 var(--sp-6)}
.ab-step-h{margin:0 0 var(--sp-4);font-size:var(--fs-title);font-weight:var(--fw-bold);
   line-height:var(--lh-card);letter-spacing:var(--ls-tight);color:var(--blue)}
.ab-card-body p{margin:0 0 var(--sp-4)}
.ab-card-body p:last-of-type{margin-bottom:0}
.ab-card-body b{font-weight:var(--fw-bold);color:var(--dark)}

.ab-stats{display:flex;gap:16px;margin-top:var(--sp-6)}
.ab-stat{flex:none;min-width:100px;padding:12px 20px;text-align:center;
   border-radius:var(--r-md);background:#fff;border:1px solid var(--panel)}
.ab-stat b{display:block;font-weight:var(--fw-bold);font-size:var(--fs-title);
   line-height:var(--lh-tight);color:var(--blue)}

.ab-stat i{/*latin*/font-family:var(--font-label);font-style:normal;direction:ltr;
   display:inline-block}
.ab-stat span{display:block;font-size:var(--fs-tag);color:var(--tx-muted)}

.ab-step-link{margin-top:var(--sp-6)}

.ab-turn{margin:var(--sp-8) 0 0;font-size:var(--fs-h3);font-weight:var(--fw-bold);
   line-height:var(--lh-tight);letter-spacing:var(--ls-tight);color:var(--blue)}

.ab-thread-wrap{padding:24px}
.ab-thread{display:block;width:2px;height:72px;margin:0 auto;
   background:linear-gradient(180deg,var(--blue-soft),rgba(95,141,255,0));
   transform:scaleY(0);transform-origin:top;
   transition:transform 1.1s var(--ease-sweep)}
.is-in .ab-thread{transform:scaleY(1)}

.ab-point{padding:0 24px 40px;text-align:center}
.ab-point-in{max-width:var(--container-content);margin:0 auto}
.ab-star{display:block;width:27px;height:29px;margin:0 auto var(--sp-6);
   transition:rotate 2s var(--ease)}
.ab-point:hover .ab-star{rotate:360deg}
.ab-point p{max-width:min(48ch,88vw);margin:0 auto var(--sp-4)}
.ab-point b{font-weight:var(--fw-bold);color:var(--dark)}
.ab-point-h{max-width:22ch;margin:var(--sp-8) auto;font-size:var(--fs-h3);
   font-weight:var(--fw-bold);line-height:var(--lh-card);letter-spacing:var(--ls-tight);
   color:var(--blue)}
.ab-uline2{display:block;width:141px;height:auto;margin:-8px auto 0}

.ab-end{padding:120px 0 80px}
.ab-end-card{position:relative;width:var(--ab-w);max-width:none;margin:0 auto;height:620px;
   overflow:visible;border-radius:var(--r-card);
   background:
     radial-gradient(100% 70% at 50% 108%, rgba(23,34,75,.55), transparent 60%),
     linear-gradient(180deg, var(--dark-lift), var(--dark) 58%)}

.ab-end-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
   border-radius:var(--r-card);
   box-shadow:inset 0 0 120px 40px rgba(11,15,30,.55)}

.ab-key{position:absolute;z-index:0;inset-block-end:6%;inset-inline-end:14%;
   width:min(560px,42%);aspect-ratio:1;pointer-events:none;
   background:radial-gradient(closest-side, rgba(47,108,255,.22), rgba(25,92,255,.06) 55%, transparent 76%);
   filter:blur(10px)}

.ab-grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.12;
   mix-blend-mode:screen;border-radius:var(--r-card);overflow:hidden;
   background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.ab-end-in{position:relative;z-index:2;height:100%;max-width:var(--container);
   margin:0 auto;padding-inline:24px;display:grid;grid-template-columns:1fr 660px;
   gap:56px;align-items:center}
.ab-end-txt{grid-column:1;text-align:right;color:var(--tx-on-dark)}
.ab-end-txt p{margin:0 0 var(--sp-4);color:var(--tx-on-dark)}
.ab-end-txt b{font-weight:var(--fw-bold);color:#fff}
.ab-end-txt del{text-decoration-thickness:2px;text-underline-offset:2px}

.ab-sign{margin-top:var(--sp-6);font-size:var(--fs-body);color:var(--tx-on-dark)}

.ab-portrait{position:absolute;z-index:2;inset-block-end:0;inset-inline-end:24px;
   grid-column:2;height:calc(100% + 120px);width:auto;margin:0}

.ab-portrait img{display:block;height:100%;width:auto;
   -webkit-mask-image:linear-gradient(180deg,#000 82%,rgba(0,0,0,.4) 94%,transparent 100%);
   mask-image:linear-gradient(180deg,#000 82%,rgba(0,0,0,.4) 94%,transparent 100%)}

.ab-floor{position:absolute;z-index:-1;inset-block-end:-8px;inset-inline:0;height:64px;
   background:radial-gradient(closest-side, rgba(11,15,30,.55), transparent 72%)}

@media(max-width:1280px){
  .ab-end-card{height:560px}
  .ab-end-in{grid-template-columns:1fr 592px;gap:40px}
}

@media(max-width:1200px){
  .ab-end{padding-top:72px}


  .ab-end-card{height:auto}
  .ab-end-in{display:flex;flex-direction:column-reverse;height:auto;
     padding:0 24px 40px;gap:0}

  .ab-portrait{position:static;height:auto;width:auto;max-width:260px;
     margin:-72px auto 24px;display:block}
  .ab-portrait img{width:100%;height:auto}
  .ab-key{inset-inline-end:0;width:100%;height:52%}
}
@media(max-width:900px){
  .ab-hero{padding-top:96px}
  .ab-stage{padding:64px 20px}
  .ab-arrow{width:36px;top:-16px}

  .ab-arrow{display:none}
  .ab-card{grid-template-columns:1fr;min-height:0}

  .ab-card-media,.ab-card--flip .ab-card-media{grid-column:1;grid-row:1;
     position:relative;aspect-ratio:16/9}
  .ab-card-body,.ab-card--flip .ab-card-body{grid-column:1;grid-row:2;padding:32px}
  .ab-shot{position:absolute}
  .ab-play span{width:56px;height:56px}
  .ab-play svg{width:20px;height:20px}
  .ab-thread{height:72px}
}

@media(max-width:640px){
    .ab-intro br,.ab-card-body p br,.ab-point p br,
  .ab-end-txt p:not(.ab-sign) br{display:none}
}
@media(prefers-reduced-motion:reduce){
  .ab-shot img{translate:0 -6%}
  .ab-thread{transform:scaleY(1);transition:none}
  .ab-glitch{display:none}
}