.pf-grid{align-items:center;display:grid;gap:clamp(30px,4vw,64px);grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);margin-top:clamp(30px,3.6vw,46px)}.pf-board{aspect-ratio:10/8;background:linear-gradient(160deg,#fff,var(--stone));border:1px solid rgba(60,95,172,.16);border-radius:20px;box-shadow:0 30px 60px -48px rgba(0,24,68,.6);container-type:inline-size;overflow:hidden;position:relative;--fs:max(10.5px,3.2cqi)}.pf-label{color:var(--mid);font:700 max(10.5px,2.6cqi)/1 var(--mono);left:4cqi;letter-spacing:.1em;position:absolute;text-transform:uppercase;top:3.6cqi;z-index:3}.pf-t.t1{left:10%;top:12%}.pf-t.t2{left:32%;top:12%}.pf-t.t3{left:54%;top:12%}.pf-t.t4{left:76%;top:12%}.pf-t.t5{left:10%;top:41%}.pf-t.t6{left:32%;top:41%}.pf-t.t7{left:54%;top:41%}.pf-t.t8{left:76%;top:41%}.pf-t.t9{left:10%;top:70%}.pf-t.t10{left:32%;top:70%}.pf-t.t11{left:54%;top:70%}.pf-t.t12{left:76%;top:70%}.pf-t{background:#fff;border:1.5px solid rgba(60,95,172,.28);border-radius:10px;display:grid;filter:blur(1.4px);height:20%;margin-top:4%;opacity:.75;place-items:center;position:absolute;transition:filter .5s,opacity .5s,transform .7s cubic-bezier(.22,.61,.36,1),border-color .4s,background .4s,box-shadow .4s;width:14%;z-index:1}.pf-t b{color:var(--deep);font:800 var(--fs)/1 var(--head);white-space:nowrap}.pf-t i{border-radius:50%;display:grid;font:900 max(10.5px,2.8cqi)/1 var(--head);font-style:normal;height:5.4cqi;min-height:20px;min-width:20px;opacity:0;place-items:center;position:absolute;right:-2.2cqi;top:-2.2cqi;transform:scale(.5);transition:opacity .4s,transform .4s;width:5.4cqi}.pf-t i svg{height:62%;width:62%}.pf-q{background:var(--lt-line);color:var(--mid);opacity:1!important;transform:none!important}.pf-ic{background:var(--orange);color:#fff}.pf-fog{background:radial-gradient(circle,hsla(0,0%,100%,.85),hsla(0,0%,100%,0) 70%);border-radius:50%;filter:blur(18px);pointer-events:none;position:absolute;z-index:2}.pf-fog.f1{height:60%;left:-10%;top:10%;width:70%}.pf-fog.f2{bottom:-6%;height:55%;right:-12%;width:60%}.js-pf.on .pf-fog.f1{animation:pfDrift 14s ease-in-out infinite alternate}.js-pf.on .pf-fog.f2{animation:pfDrift 17s ease-in-out infinite alternate-reverse}@keyframes pfDrift{to{transform:translate(18%,10%)}}.js-pf[data-a=all] .pf-t,.js-pf[data-a=net] .pf-t[data-k~=net],.js-pf[data-a=order] .pf-t,.js-pf[data-a=sql] .pf-t[data-k~=sql],.js-pf[data-a=win] .pf-t[data-k~=win]{border-color:var(--orange);box-shadow:0 0 0 4px rgba(248,153,33,.16);filter:none;opacity:1}.js-pf[data-a=all] .pf-t .ic-all,.js-pf[data-a=net] .pf-t[data-k~=net] .ic-net,.js-pf[data-a=sql] .pf-t[data-k~=sql] .ic-sql,.js-pf[data-a=win] .pf-t[data-k~=win] .ic-win{opacity:1;transform:none}.js-pf[data-a=all] .pf-q,.js-pf[data-a=net] .pf-t[data-k~=net] .pf-q,.js-pf[data-a=sql] .pf-t[data-k~=sql] .pf-q,.js-pf[data-a=win] .pf-t[data-k~=win] .pf-q{opacity:0!important}.js-pf[data-a=order] .pf-t{border-style:dashed}.js-pf[data-a=order] .pf-t.t1{transform:translate(12%,-10%) rotate(-5deg)}.js-pf[data-a=order] .pf-t.t2{transform:translate(-19%,-24%) rotate(-4deg)}.js-pf[data-a=order] .pf-t.t3{transform:translate(-21%,10%) rotate(-5deg)}.js-pf[data-a=order] .pf-t.t4{transform:translate(9%,-15%) rotate(-10deg)}.js-pf[data-a=order] .pf-t.t5{transform:translate(-15%,12%) rotate(-8deg)}.js-pf[data-a=order] .pf-t.t6{transform:translate(12%,-26%) rotate(12deg)}.js-pf[data-a=order] .pf-t.t7{transform:translate(-11%,-19%) rotate(-12deg)}.js-pf[data-a=order] .pf-t.t8{transform:translate(-26%,-27%) rotate(-11deg)}.js-pf[data-a=order] .pf-t.t9{transform:translate(16%,-6%) rotate(9deg)}.js-pf[data-a=order] .pf-t.t10{transform:translate(15%,-30%) rotate(-5deg)}.js-pf[data-a=order] .pf-t.t11{transform:translate(20%,-4%) rotate(8deg)}.js-pf[data-a=order] .pf-t.t12{transform:translate(-11%,13%) rotate(6deg)}.pf-list{display:grid;gap:6px;list-style:none;margin:0;padding:0}.pf-list li{align-items:start;border-radius:14px;cursor:default;display:grid;gap:14px;grid-template-columns:44px minmax(0,1fr);outline:none;padding:14px 16px;transition:background .35s,box-shadow .35s}.pf-list li:focus-visible{box-shadow:0 0 0 2px var(--spot)}.pf-n{background:#fff;border:2px solid rgba(60,95,172,.25);border-radius:50%;color:var(--mid);display:grid;font:700 .8rem var(--mono);height:44px;place-items:center;transition:background .35s,color .35s,border-color .35s;width:44px}.pf-list b{color:var(--deep);display:block;font:800 1.12rem/1.3 var(--head);margin-top:4px}.pf-list p{color:var(--lt-mut);font-size:.96rem;line-height:1.55;margin:6px 0 0}.pf-list li.is-on{background:#fff;box-shadow:0 18px 36px -30px rgba(0,24,68,.6)}.pf-list li.is-on .pf-n{background:var(--orange);border-color:var(--orange);color:#fff}@media (max-width:899px){.pf-grid{grid-template-columns:minmax(0,1fr)}.pf-board{aspect-ratio:10/7}}@media (prefers-reduced-motion:reduce){.pf-list li,.pf-n,.pf-t,.pf-t i{transition:none}.js-pf .pf-fog{animation:none!important}.js-pf[data-a=order] .pf-t{transform:none!important}}