.pscroll{position:relative;width:100vw;height:460vh;margin:28px 0 0 calc(50% - 50vw);background:#e9ebea}
.pscroll[hidden]{display:none}
.pscroll__pin{position:sticky;top:0;height:100svh;overflow:hidden;color:#2b2f2d}
.pscroll__h1,.pscroll__h2{position:absolute;inset:0;display:flex;align-items:center;padding:0 4vw;white-space:nowrap;will-change:transform}
.pscroll__h1{z-index:1}
.pscroll__h1 span,.pscroll__h2 h2{margin:0;font:800 15vw/1 Inter,sans-serif;letter-spacing:-.045em}
.pscroll__h1 span{color:#2b2f2d}
.pscroll__mask{position:absolute;inset:0;z-index:2;background:#151917;clip-path:circle(0% at 50% 50%);will-change:clip-path;overflow:hidden}
.pscroll__beam{position:absolute;inset:0;background:radial-gradient(38% 60% at 50% 0%,rgba(255,255,255,.16),transparent 72%),radial-gradient(30% 10% at 50% 74%,rgba(255,255,255,.1),transparent 75%);opacity:var(--beam,0)}
.pscroll__grid{position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px) center/22px 22px;-webkit-mask-image:radial-gradient(60% 80% at 50% 30%,#000 10%,transparent 78%);mask-image:radial-gradient(60% 80% at 50% 30%,#000 10%,transparent 78%);opacity:var(--beam,0)}
.pscroll__h2{z-index:3;transform:translateX(100%)}
.pscroll__h2 h2{color:rgba(255,255,255,.1);-webkit-text-stroke:1px rgba(255,255,255,.22)}
.pscroll__kicker{position:absolute;z-index:6;left:50%;top:max(84px,11vh);transform:translateX(-50%);display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.6);font:700 10px/1 Inter,sans-serif;letter-spacing:.3em;text-transform:uppercase;opacity:var(--ui,0);transition:opacity .2s}
.pscroll__kicker b{font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.2em;color:#fff}
.pscroll__media{position:absolute;left:50%;top:50%;z-index:4;width:min(42vw,500px);aspect-ratio:1/1;transform:translate(-50%,-50%);pointer-events:none}
.pscroll__float{position:absolute;inset:0;will-change:transform;perspective:1100px}
.pscroll__float img,.pscroll__frame{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 34px 34px rgba(0,0,0,.45));backface-visibility:hidden;will-change:transform,opacity}
.pscroll__frame{opacity:0}
.pscroll__frame:first-child{opacity:1}
.pscroll__model,.pscroll__model model-viewer{position:absolute;inset:0;width:100%;height:100%;--poster-color:transparent;background:transparent}
.pscroll__angle{position:absolute;z-index:6;left:50%;bottom:calc(max(26px,5vh) + 14px);transform:translateX(-50%);white-space:pre;color:rgba(255,255,255,.55);font:500 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.25em;text-transform:uppercase;opacity:0;transition:opacity .3s}
.pscroll__angle.is-on{opacity:var(--ui,0)}
.pscroll__floor{position:absolute;left:18%;right:18%;bottom:4%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);filter:blur(6px);opacity:var(--beam,0)}
.pscroll__tips{position:absolute;inset:0;z-index:5;pointer-events:none}
.pstip{position:absolute;width:min(25vw,310px);color:#fff}
.pstip:nth-child(1){left:6vw;top:22%}
.pstip:nth-child(2){left:6vw;top:56%}
.pstip:nth-child(3){right:6vw;top:22%;text-align:right}
.pstip:nth-child(4){right:6vw;top:56%;text-align:right}
.pstip__ic{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid rgba(255,255,255,.18);border-radius:14px;background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.pstip__ic svg{width:22px;height:22px;color:#fff}
.pstip__line{display:block;height:1px;margin:14px 0 12px;background:linear-gradient(90deg,rgba(255,255,255,.6),rgba(255,255,255,.08));transform:scaleX(var(--line,0));transform-origin:left center}
.pstip:nth-child(n+3) .pstip__line{transform-origin:right center;background:linear-gradient(270deg,rgba(255,255,255,.6),rgba(255,255,255,.08))}
.pstip h3{margin:0;font:800 clamp(18px,1.9vw,27px)/1.15 Inter,sans-serif;letter-spacing:-.02em}
.pstip p{margin:8px 0 0;color:#aeb4b1;font:500 clamp(13px,1.05vw,15px)/1.5 Inter,sans-serif}
.pstip .pstip__ic,.pstip h3,.pstip p{opacity:0;transform:translateY(22px);filter:blur(6px);transition:opacity .6s ease,transform .8s cubic-bezier(.22,1,.36,1),filter .6s ease}
.pstip.is-in .pstip__ic,.pstip.is-in h3,.pstip.is-in p{opacity:1;transform:none;filter:none}
.pstip.is-in h3{transition-delay:.07s}.pstip.is-in p{transition-delay:.14s}
.pscroll__progress{position:absolute;z-index:6;left:50%;bottom:max(26px,5vh);width:min(220px,40vw);height:2px;transform:translateX(-50%);border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden;opacity:var(--ui,0)}
.pscroll__progress i{position:absolute;inset:0;background:#fff;transform-origin:left center;transform:scaleX(var(--prog,0));box-shadow:0 0 10px rgba(255,255,255,.6)}
@media(max-width:860px){
  .pscroll{height:400vh;margin-top:18px}
  .pscroll__h1 span,.pscroll__h2 h2{font-size:22vw}
  .pscroll__kicker{top:max(78px,10vh)}
  .pscroll__media{top:40%;width:72vw}
  .pscroll__angle{bottom:auto;top:calc(40% + 39vw)}
  .pstip,.pstip:nth-child(n){left:24px!important;right:24px!important;top:auto!important;bottom:calc(max(26px,5vh) + 30px)!important;width:auto;text-align:center!important}
  .pstip__line,.pstip:nth-child(n+3) .pstip__line{margin:12px auto 10px;width:120px;transform-origin:center;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent)}
  .pstip__ic{width:40px;height:40px;border-radius:13px}
  .pstip h3{font-size:21px}
  .pstip p{margin:6px auto 0;max-width:30ch;font-size:13.5px;line-height:1.45}
  .pstip:not(.is-cur) .pstip__ic,.pstip:not(.is-cur) h3,.pstip:not(.is-cur) p{opacity:0!important;transform:translateY(-14px)!important;filter:blur(6px)!important;transition-delay:0s!important}
  .pstip:not(.is-cur) .pstip__line{opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .pscroll{height:auto}
  .pscroll__pin{position:relative;height:auto;min-height:100svh;padding:12vh 0 8vh}
  .pscroll__h1{display:none}
  .pscroll__mask{clip-path:none;--beam:1}
  .pscroll__h2{position:relative;transform:none;white-space:normal}
  .pscroll__h2 h2{font-size:9vw;white-space:normal;color:#fff;-webkit-text-stroke:0}
  .pscroll__media{position:relative;left:auto;top:auto;transform:none;margin:4vh auto}
  .pscroll__tips{position:relative;display:grid;gap:28px;padding:0 24px}
  .pstip,.pstip:nth-child(n){position:relative;inset:auto!important;width:auto;text-align:left!important}
  .pstip .pstip__ic,.pstip h3,.pstip p,.pstip:not(.is-cur) .pstip__ic,.pstip:not(.is-cur) h3,.pstip:not(.is-cur) p{opacity:1!important;transform:none!important;filter:none!important;transition:none}
  .pstip{--line:1}
  .pscroll__kicker,.pscroll__progress,.pscroll__angle{display:none}
}