.pj-wrap{width:100%;max-width:72rem;margin-inline:auto;padding-inline:1.5rem}@media (width>=1900px){.pj-wrap{max-width:1600px}}.pj-floors{--rowh:clamp(112px, calc((100svh - 270px) / 4), 300px);--tw:calc(var(--rowh) * 1.312);--fan:1.16;border-top:1px solid var(--border);position:relative}.pj-floor{--step:min(calc(var(--tw) * .52), calc((100cqw - var(--tw)) / (var(--n) - 1) / var(--fan)));border-bottom:1px solid var(--border);background:#0c0c0fa8;transition:background .35s;display:block;position:relative;overflow:hidden}.pj-floor:last-child{border-bottom:0}.pj-floor:hover{background:#201a14d1}.pj-floor:focus-visible{outline:2px solid var(--primary);outline-offset:-3px;background:#201a14d1}.pj-floor-in{min-height:var(--rowh);grid-template-columns:minmax(300px,.64fr) minmax(0,1.66fr) 36px;align-items:center;column-gap:1.5rem;padding-block:6px;display:grid}.pj-head{grid-area:1/1}.pj-head h2{transition:color .25s}.pj-floor:hover .pj-head h2{color:var(--primary)}.pj-stage{height:calc(var(--rowh) - 12px);grid-area:1/2;position:relative;container-type:inline-size}.pj-strip{position:absolute;inset:0}.pj-tile{height:calc(var(--rowh) * .82);aspect-ratio:16/10;transform:translateY(-50%) rotate(var(--r,0deg));top:50%;left:calc(var(--i) * var(--step));z-index:calc(10 - var(--i));background:#0b0b0e;border:1px solid #ffffff24;border-radius:5px;transition:left .55s cubic-bezier(.22,.8,.24,1),transform .55s cubic-bezier(.22,.8,.24,1);position:absolute;overflow:hidden;box-shadow:0 14px 34px #0009}.pj-tile img{object-fit:cover;object-position:top left;width:100%;height:100%;display:block}.pj-floor:hover .pj-tile,.pj-floor:focus-visible .pj-tile{left:calc(var(--i) * var(--step) * var(--fan));transform:translateY(-50%) rotate(var(--r,0deg)) scale(1.03)}.pj-proof{z-index:11;top:50%;right:0;left:calc((var(--n) - 1) * var(--step) * var(--fan) + var(--tw) + 28px);gap:8px;display:grid;position:absolute;transform:translateY(-50%)}.pj-proof b{text-transform:uppercase;letter-spacing:-.01em;font-family:Space Grotesk,system-ui,sans-serif;font-size:19px;font-weight:600;line-height:1.15;display:block}.pj-proof span{color:var(--muted-foreground);font-size:13px}.pj-arrow{z-index:20;color:var(--primary);grid-area:1/3;justify-self:end;transition:transform .3s;position:relative}.pj-floor:hover .pj-arrow{transform:translate(6px)}.pj-pill{white-space:nowrap;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--border);background:#0a0a0cb8;border-radius:99px;align-items:center;gap:7px;padding:4px 9px;font:500 10px JetBrains Mono,ui-monospace,monospace;display:inline-flex}.pj-pill:before{content:"";background:currentColor;border-radius:50%;width:6px;height:6px}.pj-pill-live{color:#5fe39a;border-color:#5fe39a66}.pj-pill-use{color:var(--primary);border-color:oklch(72% .19 48/.45)}.pj-pill-dev{color:#b8bcc8}.pj-bar{z-index:40;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);background:oklch(17% .005 270/.95);position:sticky}.pj-bar-in{scrollbar-width:none;align-items:center;gap:1.9rem;height:56px;display:flex;overflow-x:auto}.pj-bar-in::-webkit-scrollbar{display:none}.pj-bar a{white-space:nowrap;color:var(--muted-foreground);border-bottom:2px solid #0000;flex:none;padding:18px 0 17px;transition:color .2s}.pj-bar a:hover{color:var(--foreground)}.pj-bar a[aria-current=page]{color:var(--foreground);border-color:var(--primary)}.pj-bar sup{color:var(--primary);letter-spacing:0;margin-left:4px;font-size:9px}.pj-card{transition:border-color .3s,transform .3s cubic-bezier(.22,.8,.24,1)}a.pj-card:hover{border-color:oklch(72% .19 48/.6);transform:translateY(-3px)}@media (width<=980px){.pj-floors{--fan:1;--rowh:92px!important}.pj-floor{--step:calc(var(--tw) * .4)}.pj-floor-in{grid-template-columns:1fr 28px;row-gap:8px;padding-block:16px 14px}.pj-stage{grid-area:2/1/auto/-1;height:auto;container-type:normal}.pj-strip{height:var(--rowh);position:relative;inset:auto}.pj-proof{grid-template-columns:1fr 1fr;gap:12px;margin-top:10px;position:static;transform:none}.pj-proof b{font-size:15px}.pj-arrow{grid-area:1/2}}@media (prefers-reduced-motion:reduce){.pj-floor,.pj-tile,.pj-arrow,.pj-head h2,.pj-card{transition:none}.pj-floor:hover .pj-tile,.pj-floor:focus-visible .pj-tile{left:calc(var(--i) * var(--step));transform:translateY(-50%) rotate(var(--r,0deg))}a.pj-card:hover,.pj-floor:hover .pj-arrow{transform:none}}
