.sj-tcard-pic{display:block;width:calc(100% + 36px);max-width:none;height:auto;aspect-ratio:16/10;object-fit:cover;margin:-20px -18px 16px;border-radius:13px 13px 0 0;background:var(--sj-s2)} @media (min-width:700px){ .sj-read-grid>.sj-tcard:last-child:nth-child(odd){grid-column:1/-1} .sj-read-grid>.sj-tcard:last-child:nth-child(odd) .sj-tcard-pic{aspect-ratio:5/2} } @media (min-width:1024px){ .sj-read-grid{grid-template-columns:repeat(6,minmax(0,1fr))} .sj-read-grid>.sj-tcard{grid-column:span 2} .sj-read-grid>.sj-tcard:nth-child(n+4),.sj-read-grid>.sj-tcard:last-child:nth-child(odd){grid-column:span 3} .sj-read-grid>.sj-tcard:nth-child(n+4) .sj-tcard-pic,.sj-read-grid>.sj-tcard:last-child:nth-child(odd) .sj-tcard-pic{aspect-ratio:2/1} } .sj-faq-pic{display:block;margin:20px 0 0} .sj-faq-pic img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center 30%;border-radius:14px;border:1px solid var(--sj-s2);background:var(--sj-s2)} @media (min-width:700px){ .sj-faq-pic img{aspect-ratio:4/5;object-position:center top} } @media (min-width:1024px){ .sj-faq-pic{max-width:300px} }
.sj-band{position:relative;overflow:hidden;isolation:isolate;margin:0 0 22px;border:1px solid rgba(255,255,255,.1);border-radius:20px;background:var(--sj-s1)} .sj-band-pic{display:block} .sj-band-pic img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:right center} .sj-band-text{position:relative;z-index:1;margin-top:-64px;padding:44px 18px 22px;background:linear-gradient(180deg,rgba(18,16,23,0) 0,rgba(18,16,23,.92) 44px,var(--sj-s1) 64px)} .sj-main .sj-band .sj-label{margin:0 0 8px} .sj-body .sj-band .sj-h2{font-size:clamp(20px,5.6vw,26px);line-height:1.3;text-wrap:balance} .sj-main .sj-band-line{margin:10px 0 0;max-width:46ch;font-size:16px;line-height:1.55;color:var(--sj-sand1)} .sj-band-why .sj-band-text::before{content:"";display:block;width:44px;height:3px;margin:0 0 14px;border-radius:2px;background:var(--sj-copper)} .sj-band-revs .sj-band-pic img{aspect-ratio:16/9;object-position:right 30%} .sj-band-revs .sj-band-text{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px} .sj-band-revs .sj-band-text::before{content:"\201C";position:absolute;z-index:-1;left:10px;top:4px;font:700 110px/1 Georgia,serif;color:rgba(240,80,107,.2);pointer-events:none} .sj-band-revs .sj-h2{grid-column:1;grid-row:1} .sj-band-revs .sj-rev-count{grid-column:2;grid-row:1} .sj-band-revs .sj-band-line{grid-column:1/-1;grid-row:2} .sj-band .sj-rev-count{justify-self:start;padding:5px 12px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(8,7,11,.7);font-size:14px;font-weight:700;color:var(--sj-cream);white-space:nowrap} @media (min-width:700px){ .sj-band-pic img{aspect-ratio:16/9;object-position:right 32%} .sj-band-revs .sj-band-pic img{aspect-ratio:21/9;object-position:right 34%} .sj-band-text{padding:44px 26px 24px} } @media (min-width:900px){ .sj-band::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none} .sj-band::after{background:linear-gradient(90deg,rgba(8,7,11,.93) 0,rgba(8,7,11,.84) 30%,rgba(8,7,11,.35) 48%,rgba(8,7,11,0) 62%)} .sj-band-text{position:absolute;left:0;top:0;bottom:0;width:min(44%,500px);margin:0;padding:34px 40px;display:flex;flex-direction:column;justify-content:center;background:none} .sj-band-why .sj-band-pic img{aspect-ratio:12/5;object-position:right 30%} .sj-band-revs .sj-band-pic img{aspect-ratio:16/5;object-position:right 36%} .sj-band-revs .sj-band-text{display:grid;grid-template-columns:auto auto;justify-content:start;align-content:center;column-gap:16px} .sj-band-revs .sj-band-text::before{left:24px;top:50%;transform:translateY(-78%)} .sj-main .sj-band-line{font-size:17px} } @media (min-width:1024px){ .sj-body .sj-band .sj-h2{font-size:28px} .sj-band-text{padding:40px 48px} }
.sj-hb{--sj-hb-dc:40px;--sj-hb-gap:8px;--sj-hb-rp:6px} .sj-hb-box{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:20px;background:var(--sj-page);box-shadow:0 30px 60px -34px rgba(0,0,0,.9)} .sj-hb-pic{position:relative;height:160px;background:var(--sj-s2)} .sj-hb-pic picture{display:block;height:100%} .sj-hb-pic img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:62% 30%} .sj-hb-pic::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60px;background:linear-gradient(180deg,rgba(8,7,11,0),var(--sj-page));pointer-events:none} .sj-hb-head,.sj-hb-board,.sj-hb-tool{padding:0 16px} .sj-hb-head{position:relative;z-index:1;margin-top:-10px} .sj-main .sj-hb-head .sj-label{margin:0 0 8px} .sj-hb-head h2{text-wrap:balance} .sj-main .sj-hb-lead{margin:0 0 10px;font-size:16px;line-height:1.55;color:var(--sj-sand1)} .sj-main .sj-hb-note{display:flex;gap:8px;align-items:flex-start;margin:0 0 16px;font-size:15px;line-height:1.5;color:var(--sj-sand)} .sj-hb-note .sj-ico{width:17px;height:17px;margin-top:3px;color:var(--sj-sand1)} .sj-main .sj-hb-status{display:flex;gap:10px;align-items:flex-start;min-height:44px;margin:0 0 12px;padding:10px 12px;border:1px solid var(--sj-s3);border-radius:12px;background:var(--sj-s1);font-size:15px;line-height:1.45;color:var(--sj-sand1)} .sj-hb-status b{color:var(--sj-cream)} .sj-hb-dot{position:relative;flex:none;width:9px;height:9px;margin-top:7px;border-radius:50%;background:var(--sj-sand)} .sj-hb-live .sj-hb-dot{background:var(--sj-copper)} .sj-hb-open .sj-hb-dot{background:var(--sj-wa)} .sj-hb-open .sj-hb-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:sj-ping 2.2s ease-out infinite} .sj-hb-rows{display:grid;gap:4px;list-style:none;margin:0;padding:0} .sj-hb-row{position:relative;display:grid;grid-template-columns:var(--sj-hb-dc) minmax(0,1fr);column-gap:var(--sj-hb-gap);align-items:center;height:37px;padding:0 var(--sj-hb-rp);border-radius:10px} .sj-hb-day{display:flex;flex-direction:column;justify-content:center;min-width:0;font-size:15px;font-weight:700;line-height:1.15;color:var(--sj-cream)} .sj-hb-dx{display:none} .sj-hb-tag{font-size:13px;font-weight:700;line-height:1.1;color:var(--sj-copper)} .sj-hb-track{position:relative;isolation:isolate;display:block;height:29px;border-radius:8px; background: linear-gradient(90deg,transparent calc(75% - 1px),rgba(240,80,107,.5) calc(75% - 1px),rgba(240,80,107,.5) 75%,transparent 75%), linear-gradient(90deg,transparent calc(25% - 1px),rgba(255,255,255,.09) calc(25% - 1px),rgba(255,255,255,.09) 25%,transparent 25%,transparent calc(50% - 1px),rgba(255,255,255,.09) calc(50% - 1px),rgba(255,255,255,.09) 50%,transparent 50%), linear-gradient(90deg,rgba(255,255,255,.055) 0,rgba(255,255,255,.055) 50%,rgba(255,255,255,.025) 50%,rgba(255,255,255,.025) 100%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)} .sj-hb-bar{position:absolute;top:3px;bottom:3px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:6px;background:linear-gradient(90deg,rgba(193,15,56,.4),rgba(193,15,56,.68));box-shadow:inset 0 0 0 1px rgba(240,80,107,.32)} .sj-hb-bt{position:relative;z-index:2;padding:0 4px;font-size:13px;font-weight:700;line-height:1;white-space:nowrap;letter-spacing:-.005em;font-variant-numeric:tabular-nums;color:var(--sj-cream);text-shadow:0 1px 2px rgba(8,7,11,.6)} .sj-hb-today{background:rgba(240,80,107,.075);box-shadow:inset 0 0 0 1px rgba(240,80,107,.38)} .sj-hb-today .sj-hb-day{color:var(--sj-copper)} .sj-hb-today .sj-hb-bar{background:linear-gradient(90deg,var(--sj-rust-d),var(--sj-rust));box-shadow:inset 0 0 0 1px rgba(240,80,107,.7),0 6px 18px -8px rgba(240,80,107,.7)} .sj-hb-today .sj-hb-bt{color:#fff} .sj-hb-tl{justify-content:flex-start;padding-left:6px} .sj-hb-tr{justify-content:flex-end;padding-right:6px} .sj-hb-now{position:absolute;z-index:1;top:-4px;bottom:-4px;width:2px;margin-left:-1px;border-radius:2px;background:#fff;box-shadow:0 0 0 1px rgba(8,7,11,.5),0 0 10px rgba(255,255,255,.55);pointer-events:none} .sj-hb-now::before{content:"";position:absolute;left:50%;top:-3px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(8,7,11,.6)} .sj-hb-scale{position:relative;height:18px;margin:8px var(--sj-hb-rp) 0 calc(var(--sj-hb-rp) + var(--sj-hb-dc) + var(--sj-hb-gap));font-size:13px;line-height:18px;color:var(--sj-sand);white-space:nowrap} .sj-hb-scale span{position:absolute;top:0;transform:translateX(-50%)} .sj-hb-scale span:nth-child(1){left:0;transform:none} .sj-hb-scale span:nth-child(2){left:25%} .sj-hb-scale span:nth-child(3){left:50%} .sj-hb-scale span:nth-child(4){left:75%;color:var(--sj-copper);font-weight:700} .sj-hb-scale span:nth-child(5){right:0;transform:none} .sj-main .sj-hb-hint{margin:10px 0 0;font-size:14px;line-height:1.5;color:var(--sj-sand)} .sj-hb-tool{margin:20px 0 0;padding:18px 16px 20px;border-top:1px solid var(--sj-s2);background:linear-gradient(180deg,var(--sj-s1),var(--sj-page))} .sj-body .sj-main .sj-hb-h3{display:flex;align-items:center;gap:8px;margin:0 0 12px;font:700 17px/1.3 var(--sj-body);color:var(--sj-cream)} .sj-hb-h3 .sj-ico{width:20px;height:20px;color:var(--sj-copper)} .sj-hb-pick{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:10px} .sj-hb-f{display:grid;gap:5px;min-width:0;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sj-sand)} .sj-hb-f select{width:100%;min-width:0;min-height:48px;padding:0 32px 0 12px;border:1px solid var(--sj-s3);border-radius:12px;background:var(--sj-page) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C9C1CF' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center;color:var(--sj-cream);font:700 16px var(--sj-body);letter-spacing:0;text-transform:none;-webkit-appearance:none;appearance:none;cursor:pointer} .sj-hb-f select:hover{border-color:var(--sj-copper)} .sj-hb-f option,.sj-hb-f optgroup{background:var(--sj-page);color:var(--sj-cream)} .sj-main .sj-hb-ans{display:flex;gap:10px;align-items:flex-start;margin:12px 0 14px;padding:11px 12px;border:1px solid rgba(11,116,102,.75);border-radius:12px;background:rgba(11,116,102,.16);font-size:15px;line-height:1.5;color:var(--sj-sand1)} .sj-hb-ans b{color:var(--sj-cream)} .sj-hb-ai{flex:none;display:grid;place-items:center;width:24px;height:24px;margin-top:0;border-radius:50%;background:var(--sj-wa);color:#fff} .sj-hb-ai .sj-ico{width:15px;height:15px} .sj-hb-ai .sj-hb-x{display:none} .sj-main .sj-hb-no{border-color:rgba(240,80,107,.5);background:rgba(193,15,56,.13)} .sj-hb-no .sj-hb-ai{background:var(--sj-rust)} .sj-hb-no .sj-hb-ok{display:none} .sj-hb-no .sj-hb-x{display:block} .sj-hb-cta{display:flex;gap:10px} .sj-hb-cta .sj-btn{flex:1 1 0;min-height:50px;padding:0 12px} .sj-hb-cta .sj-wa{flex-grow:1.4} .sj-main .sj-hb-num{display:none;margin:10px 0 0;font-size:14px;color:var(--sj-sand)} .sj-hb-num b{color:var(--sj-cream);white-space:nowrap} @media (min-width:520px){ .sj-hb{--sj-hb-dc:92px;--sj-hb-gap:12px;--sj-hb-rp:10px} .sj-hb-dx{display:inline} .sj-hb-row{height:42px} .sj-hb-rows{gap:5px} .sj-hb-track{height:32px} .sj-hb-bt{font-size:14px} .sj-hb-day .sj-hb-dn{display:block} } @media (min-width:700px){ .sj-hb-pic{height:250px} .sj-hb-pic img{object-position:70% 34%} .sj-hb-head,.sj-hb-board{padding:0 26px} .sj-hb-tool{margin:24px 26px 26px;padding:18px;border:1px solid var(--sj-s2);border-radius:16px;background:var(--sj-s1)} .sj-main .sj-hb-num{display:block} .sj-main .sj-hb-lead{font-size:17px} } @media (min-width:900px){ .sj-hb-box{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);grid-template-areas:"pic head" "pic board" "tool board";column-gap:40px;padding:32px} .sj-hb-pic{grid-area:pic;height:auto;min-height:260px;border-radius:16px;overflow:hidden;border:1px solid var(--sj-s2)} .sj-hb-pic picture{position:absolute;inset:0} .sj-hb-pic img{object-position:68% 40%} .sj-hb-pic::after{display:none} .sj-hb-head{grid-area:head;margin:0;padding:0 0 4px} .sj-hb-board{grid-area:board;align-self:start;padding:0} .sj-hb-tool{grid-area:tool;align-self:end;margin:22px 0 0;padding:18px} } @media (min-width:1024px){ .sj-hb-box{padding:36px;column-gap:44px} .sj-hb{--sj-hb-dc:104px} .sj-hb-row{height:44px} }
.sj-main>.sj-zn{background:var(--sj-page);overflow-x:hidden;overflow-x:clip} .sj-zn-intro{max-width:820px;margin:0 0 30px} .sj-zn-intro .sj-more{margin-bottom:0} .sj-zn-head{position:relative;margin:0 0 16px;padding-top:26px;border-top:1px solid var(--sj-s2)} .sj-zn-head::before{content:"";position:absolute;left:0;top:-1px;width:64px;height:1px;background:var(--sj-copper)} .sj-zn .sj-zn-lead{margin:8px 0 0;font-size:15px;line-height:1.45;color:var(--sj-sand)} .sj-zn-bar{margin:0 0 12px} .sj-zn-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .sj-zn-tab:last-child{grid-column:1/-1} .sj-zn-tab,.sj-zn-near{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;min-width:0;min-height:56px;margin:0;padding:8px 10px;border:1px solid var(--sj-s3);border-radius:12px;background:var(--sj-s1);color:var(--sj-cream);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .2s,background-color .2s} .sj-zn-near{width:100%;margin-top:8px;border-style:dashed;border-color:var(--sj-copper);background:transparent} .sj-zn-near[hidden]{display:none} .sj-zn-tname{display:flex;align-items:center;gap:6px;width:100%;font:700 16px/1.25 var(--sj-body);color:var(--sj-cream)} .sj-zn-thint{display:block;max-width:100%;overflow:hidden;font-size:13px;line-height:1.35;color:var(--sj-sand);white-space:nowrap;text-overflow:ellipsis} .sj-zn-tab[aria-selected=true]{background:var(--sj-s2);border-color:var(--sj-copper);box-shadow:inset 0 -3px 0 var(--sj-rust)} .sj-zn-tab[aria-selected=true] .sj-zn-thint{color:var(--sj-sand1)} .sj-zn-near .sj-ico{width:16px;height:16px;color:var(--sj-copper)} .sj-zn-near[aria-busy=true]{cursor:progress} .sj-zn-near[aria-busy=true] .sj-ico{animation:sj-zn-beat .8s ease-in-out infinite alternate} @keyframes sj-zn-beat{to{transform:translateY(-3px)}} .sj-zn-dir{position:relative;flex:none;width:18px;height:18px;margin-left:auto;border:1.5px solid var(--sj-s3);border-radius:50%; background:linear-gradient(var(--sj-s3),var(--sj-s3)) center/1px 100% no-repeat,linear-gradient(var(--sj-s3),var(--sj-s3)) center/100% 1px no-repeat} .sj-zn-dir::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--sj-sand)} .sj-zn-dir[data-d=north]::after{top:26%} .sj-zn-dir[data-d=east]::after{left:74%} .sj-zn-dir[data-d=south-east]::after{left:70%;top:70%} .sj-zn-dir[data-d=south-west]::after{left:30%;top:70%} .sj-zn-tab[aria-selected=true] .sj-zn-dir{border-color:var(--sj-copper)} .sj-zn-tab[aria-selected=true] .sj-zn-dir::after{background:var(--sj-copper)} @media (hover:hover){ .sj-zn-tab:hover,.sj-zn-near:hover{border-color:var(--sj-copper)} .sj-zn-tab[aria-selected=false]:hover{background:var(--sj-s2)} } @media (max-width:379.98px){.sj-zn-more{display:none}} @media (max-width:1149.98px){ @supports (grid-template-columns:subgrid){ .sj-zn-bar.sj-zn-geo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,auto);gap:8px} .sj-zn-geo .sj-zn-tabs{grid-column:1/-1;grid-row:1/4;grid-template-columns:subgrid;grid-template-rows:subgrid} .sj-zn-geo .sj-zn-tab:last-child{grid-column:auto} .sj-zn-geo .sj-zn-near{grid-column:2;grid-row:3;margin:0} } } .sj-zn .sj-zn-msg{margin:0 0 12px;padding:10px 12px;border-left:3px solid var(--sj-copper);border-radius:0 10px 10px 0;background:var(--sj-s1);font-size:15px;line-height:1.45;color:var(--sj-sand1)} .sj-zn .sj-zn-msg:empty{margin:0;padding:0;border:0} @media (max-width:699.98px){.sj-zn .sj-zn-msg:not(:empty){min-height:calc(2.9em + 20px)}} .sj-zn-panels{touch-action:pan-y pinch-zoom} .sj-zn-pan[hidden]{display:none} .sj-zn-ph{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .sj-zn-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;list-style:none;margin:0;padding:0} .sj-zn-grid>li{min-width:0} .sj-zn-tile{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"pic pic" "name name" "go go";height:100%;border:1px solid var(--sj-s2);border-radius:14px;overflow:hidden;background:var(--sj-s1);color:var(--sj-cream);text-decoration:none;scroll-margin:90px 0 24px;transition:border-color .25s,transform .25s,box-shadow .25s} .sj-zn-pic{grid-area:pic;position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--sj-s2)} .sj-zn-pic img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;filter:saturate(.9) brightness(.9);transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .3s,opacity .35s} .sj-zn-pic img.sj-zn-ld{opacity:0} .sj-zn-pic::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(8,7,11,0) 48%,rgba(8,7,11,.78) 100%)} .sj-zn-n{grid-area:pic;z-index:1;align-self:end;justify-self:start;margin:0 0 8px 8px;padding:3px 9px;border-radius:999px;background:var(--sj-rust);color:#fff;font:700 12px/1.35 var(--sj-body);white-space:nowrap} .sj-zn-name{grid-area:name;display:flex;align-items:center;gap:5px;min-width:0;padding:10px 10px 2px;font:700 15px/1.25 var(--sj-body);color:var(--sj-cream)} .sj-zn-name>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sj-zn-name .sj-ico{width:15px;height:15px;color:var(--sj-copper)} .sj-zn-go{grid-area:go;display:flex;align-items:center;gap:5px;padding:0 10px 11px;font-size:13px;font-weight:700;line-height:1.3;color:var(--sj-copper)} .sj-zn-go::before{content:"See girls"} .sj-zn-go .sj-ico{width:14px;height:14px;transition:transform .25s} .sj-zn-tile:focus-visible{outline-offset:3px} @media (hover:hover){ .sj-zn-tile:hover{border-color:var(--sj-copper);transform:translateY(-3px);box-shadow:0 18px 36px -18px rgba(0,0,0,.9)} .sj-zn-tile:hover .sj-zn-pic img{transform:scale(1.06);filter:none} .sj-zn-tile:hover .sj-zn-go{color:var(--sj-cream)} .sj-zn-tile:hover .sj-zn-go .sj-ico{transform:translateX(4px);color:var(--sj-copper)} } .sj-zn-tile.sj-zn-you{border-color:var(--sj-copper);box-shadow:0 0 0 2px var(--sj-copper)} .sj-zn-youtag{position:absolute;z-index:1;left:8px;top:8px;display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;background:var(--sj-cream);color:var(--sj-page);font:700 12px/1.25 var(--sj-body)} .sj-zn-youtag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sj-rust)} .sj-zn .sj-zn-note{margin:14px 0 0} @media (prefers-reduced-motion:no-preference){ .sj-zn-anim .sj-zn-grid>li{animation:sj-zn-in .42s cubic-bezier(.2,.8,.2,1) both} .sj-zn-anim[data-sj-zn-dir=prev] .sj-zn-grid>li{animation-name:sj-zn-inp} .sj-zn-anim .sj-zn-grid>li:nth-child(2){animation-delay:.05s} .sj-zn-anim .sj-zn-grid>li:nth-child(3){animation-delay:.1s} .sj-zn-anim .sj-zn-grid>li:nth-child(4){animation-delay:.15s} } @keyframes sj-zn-in{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}} @keyframes sj-zn-inp{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}} @media (min-width:700px){ .sj-zn-tabs{grid-template-columns:repeat(3,minmax(0,1fr))} .sj-zn-tab:last-child{grid-column:span 2} .sj-zn-tab,.sj-zn-near{padding:8px 12px} .sj-zn-ph{position:static!important;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;display:flex;align-items:center;gap:10px;margin:6px 0 14px;font:700 18px/1.3 var(--sj-body)} .sj-zn-ph::before{content:"";width:22px;height:2px;background:var(--sj-copper)} .sj-zn-grid{gap:14px} } @media (min-width:700px) and (max-width:1149.98px){ @supports (grid-template-columns:subgrid){ .sj-zn-bar.sj-zn-geo{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,auto)} .sj-zn-geo .sj-zn-tabs{grid-row:1/3} .sj-zn-geo .sj-zn-near{grid-column:3;grid-row:2} } } @media (min-width:900px){ .sj-zn-grid{grid-template-columns:repeat(4,minmax(0,1fr))} } @media (min-width:1024px){ .sj-zn-intro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start;max-width:none;margin-bottom:40px} .sj-zn-intro-t{padding-top:6px} .sj-zn-head{margin-bottom:22px;padding-top:34px} .sj-zn .sj-zn-lead{margin-top:10px;font-size:16px} .sj-zn-tab,.sj-zn-near{min-height:64px;padding:10px 14px} .sj-zn-tname{font-size:17px} .sj-zn-grid{gap:20px} .sj-zn-tile{grid-template-areas:"pic pic" "name go"} .sj-zn-name{padding:14px 8px 14px 14px;font-size:17px} .sj-zn-name .sj-ico{width:16px;height:16px} .sj-zn-go{padding:14px 14px 14px 0} .sj-zn-n{margin:0 0 10px 10px;padding:4px 10px;font-size:13px} } @media (min-width:1150px){ .sj-zn-bar{display:flex;gap:10px;margin-bottom:14px} .sj-zn-tabs{flex:1;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px} .sj-zn-tab:last-child{grid-column:auto} .sj-zn-near{flex:none;width:auto;min-width:170px;margin:0} }
.sj-st .sj-gal-head{margin-top:0} .sj-st-list{display:flex;flex-direction:column;gap:6px;list-style:none;margin:0;padding:0} .sj-st-i{position:relative;z-index:0;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--sj-s3);border-radius:14px;background:var(--sj-s2);isolation:isolate} .sj-st-img{position:absolute;inset:0;z-index:-2;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% var(--sj-st-y,20%);transition:object-position .35s ease} .sj-st-on .sj-st-img{object-position:50% var(--sj-st-yo,10%)} .sj-st-tog{position:relative;display:flex;align-items:center;width:100%;height:64px;margin:0;padding:0 14px 0 62px;border:0;border-radius:12px;background:transparent;color:var(--sj-cream);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:height .35s ease} .sj-st-tog::before,.sj-st-tog::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:0;pointer-events:none;transition:opacity .35s ease} .sj-st-tog::before{background:linear-gradient(90deg,rgba(8,7,11,.9) 0,rgba(8,7,11,.8) 62%,rgba(8,7,11,.4) 100%)} .sj-st-tog::after{opacity:0;background:linear-gradient(180deg,rgba(8,7,11,.35) 0,rgba(8,7,11,0) 28%,rgba(8,7,11,0) 50%,rgba(8,7,11,.72) 100%)} .sj-st-tog:focus-visible{outline:2px solid var(--sj-copper);outline-offset:-4px} .sj-st-lab{display:flex;flex-direction:column;gap:3px;min-width:0;transition:opacity .25s} .sj-st-nm{font:700 18px/1.15 var(--sj-body);color:var(--sj-cream);white-space:nowrap} .sj-st-ag{font-size:14px;line-height:1.25;color:var(--sj-sand1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sj-st-cue{position:absolute;left:14px;top:14px;display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--sj-copper);border-radius:50%;background:rgba(8,7,11,.6);color:var(--sj-cream);transition:transform .3s ease,opacity .25s} .sj-st-cue .sj-ico{width:18px;height:18px} .sj-st-on .sj-st-tog{height:150px} .sj-st-on .sj-st-tog::before{opacity:0} .sj-st-on .sj-st-tog::after{opacity:1} .sj-st-on .sj-st-lab{opacity:0} .sj-st-on .sj-st-cue{transform:rotate(45deg)} .sj-st-body{display:grid;grid-template-rows:0fr;visibility:hidden;background:linear-gradient(180deg,rgba(8,7,11,.72) 0,rgba(8,7,11,.93) 48px);transition:grid-template-rows .35s ease,visibility 0s linear .35s} .sj-st-on .sj-st-body{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .35s ease,visibility 0s} .sj-st-in{min-height:0;overflow:hidden;padding:0 16px} .sj-body .sj-main .sj-st-h{margin:0;font:700 21px/1.2 var(--sj-body)} .sj-st-h a{display:inline-flex;align-items:center;min-height:44px;color:var(--sj-cream);text-decoration:none} .sj-st-h a:hover{text-decoration:underline;text-decoration-color:var(--sj-copper);text-underline-offset:4px} .sj-main .sj-st-age{margin:0 0 6px;font-size:14px;font-weight:700;color:var(--sj-copper)} .sj-main .sj-st-text{margin:0 0 14px;font-size:15px;line-height:1.5;color:var(--sj-sand1)} .sj-st-go{min-height:44px;margin:0 0 16px;padding:0 16px;background:var(--sj-rust);color:var(--sj-cream);font-size:15px} .sj-st-go:hover{background:var(--sj-rust-d)} .sj-st-go .sj-ico{width:16px;height:16px} .sj-st-now,.sj-st-now *,.sj-st-now *::before,.sj-st-now *::after{transition:none!important} @media (min-width:700px){ .sj-st-list{flex-direction:row;gap:10px;height:460px;container-type:inline-size} .sj-st-i{flex:1 1 0;min-width:0;transition:flex-grow .5s cubic-bezier(.25,.8,.25,1)} .sj-st-on{flex-grow:5} .sj-st-img{object-position:var(--sj-st-x,50%) 50%;transition:object-position .5s ease} .sj-st-on .sj-st-img{object-position:var(--sj-st-x,50%) var(--sj-st-yd,15%)} .sj-st-tog,.sj-st-on .sj-st-tog{position:absolute;inset:0;height:auto;flex-direction:column;justify-content:flex-end;align-items:center;gap:14px;padding:0 0 16px} .sj-st-on .sj-st-tog{cursor:default} .sj-st-tog::before{background:linear-gradient(0deg,rgba(8,7,11,.92) 0,rgba(8,7,11,.8) 38%,rgba(8,7,11,.45) 100%)} .sj-st-i:not(.sj-st-on):hover .sj-st-tog::before{opacity:.8} .sj-st-tog::after{background:linear-gradient(180deg,rgba(8,7,11,.4) 0,rgba(8,7,11,0) 25%)} .sj-st-lab{writing-mode:vertical-rl;transform:rotate(180deg)} .sj-st-ag{display:none} .sj-st-nm{font-size:18px;letter-spacing:.03em} .sj-st-cue{position:relative;left:auto;top:auto;flex:none} .sj-st-on .sj-st-cue{opacity:0} .sj-st-body,.sj-st-on .sj-st-body{position:absolute;left:0;bottom:0;z-index:1;display:block;width:100%;width:calc((100cqw - 74px) * 5 / 11);padding-top:56px;background:linear-gradient(180deg,rgba(8,7,11,0) 0,rgba(8,7,11,.82) 56px,rgba(8,7,11,.93) 96px)} .sj-st-body{opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s linear .2s} .sj-st-on .sj-st-body{opacity:1;visibility:visible;transition:opacity .35s ease .25s,visibility 0s} .sj-st-in{overflow:visible;max-width:470px;padding:0 24px 22px} .sj-body .sj-main .sj-st-h{font-size:24px} .sj-st-go{margin:0} }
.sj-main>section.sj-vs{background:radial-gradient(70% 50% at 32% 56%,rgba(193,15,56,.12),rgba(193,15,56,0) 72%),var(--sj-s1)} .sj-vs-head{margin:0 0 20px} .sj-vs .sj-vs-sub{margin:10px 0 0;font-size:15px;color:var(--sj-sand)} .sj-vs-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"screen screen" "list list" "info more";align-items:center;gap:16px 12px} .sj-vs-screen{grid-area:screen;align-self:start;position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:var(--sj-page);border:1px solid var(--sj-s3);box-shadow:0 0 0 5px rgba(255,255,255,.025),0 34px 70px -34px rgba(193,15,56,.6),0 24px 50px -26px rgba(0,0,0,.9)} .sj-vs-screen video{display:block;width:100%;height:100%;object-fit:contain;background:var(--sj-page)} .sj-vs-screen video:focus-visible{outline-offset:-3px} .sj-vs-screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(80% 80% at 50% 45%,rgba(8,7,11,0) 50%,rgba(8,7,11,.5) 100%);transition:opacity .3s} .sj-vs-go .sj-vs-screen::after{opacity:0} .sj-vs-play{position:absolute;z-index:2;left:50%;top:50%;display:grid;place-items:center;width:72px;height:72px;margin:-36px 0 0 -36px;padding:0;border:0;border-radius:50%;background:var(--sj-rust);color:#fff;cursor:pointer;box-shadow:0 0 0 7px rgba(193,15,56,.25),0 14px 34px rgba(0,0,0,.55);transition:transform .2s,background-color .2s} .sj-vs-play::before{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(240,80,107,.7);animation:sj-vs-ring 2.6s ease-out infinite;pointer-events:none} @keyframes sj-vs-ring{from{transform:scale(1);opacity:.9}to{transform:scale(1.5);opacity:0}} .sj-vs-play:hover{transform:scale(1.06);background:var(--sj-rust-d)} .sj-vs-play .sj-ico{width:32px;height:32px;margin-left:4px} .sj-vs-go .sj-vs-play{display:none} .sj-vs-grid:not(.sj-vs-go) video::-webkit-media-controls-overlay-play-button{display:none} .sj-vs-grid:not(.sj-vs-go) video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none} .sj-vs-next{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:14px;min-height:56px;padding:9px 10px 9px 16px;border:1px solid rgba(255,255,255,.2);border-radius:14px;background:rgba(8,7,11,.86);color:var(--sj-sand);font:400 14px/1.3 var(--sj-body);text-align:left;white-space:nowrap;cursor:pointer;box-shadow:0 18px 40px rgba(0,0,0,.6)} .sj-vs-next[hidden]{display:none} .sj-vs-next:hover{border-color:var(--sj-copper)} .sj-vs-next b{display:block;font-size:16px;color:#fff} .sj-vs-next .sj-ico{box-sizing:border-box;width:40px;height:40px;padding:10px;border-radius:50%;background:var(--sj-rust);color:#fff} .sj-vs .sj-vs-info{grid-area:info;display:flex;align-items:center;gap:10px;min-width:0;margin:0;font-size:15px;font-weight:700;color:var(--sj-sand1)} .sj-vs-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--sj-s3);transition:background-color .3s,box-shadow .3s} .sj-vs-on .sj-vs-dot{background:var(--sj-copper);box-shadow:0 0 0 4px rgba(240,80,107,.22)} .sj-vs-more{grid-area:more;justify-self:end} .sj-vs-side{grid-area:list;min-width:0} .sj-vs-list{position:relative;display:flex;gap:10px;list-style:none;margin:0 calc(-1*var(--sj-gut));padding:4px var(--sj-gut) 6px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--sj-gut);scrollbar-width:none;overscroll-behavior-x:contain} .sj-vs-list::-webkit-scrollbar{display:none} .sj-vs-list>li{flex:none;width:150px;scroll-snap-align:start} .sj-vs-list.sj-vs-mb{-webkit-mask-image:linear-gradient(90deg,#08070B calc(100% - 44px),rgba(8,7,11,0));mask-image:linear-gradient(90deg,#08070B calc(100% - 44px),rgba(8,7,11,0))} .sj-vs-list.sj-vs-ma{-webkit-mask-image:linear-gradient(90deg,rgba(8,7,11,0),#08070B 44px);mask-image:linear-gradient(90deg,rgba(8,7,11,0),#08070B 44px)} .sj-vs-list.sj-vs-ma.sj-vs-mb{-webkit-mask-image:linear-gradient(90deg,rgba(8,7,11,0),#08070B 44px,#08070B calc(100% - 44px),rgba(8,7,11,0));mask-image:linear-gradient(90deg,rgba(8,7,11,0),#08070B 44px,#08070B calc(100% - 44px),rgba(8,7,11,0))} .sj-vs-item{position:relative;display:flex;flex-direction:column;gap:8px;width:100%;margin:0;padding:0;border:0 solid transparent;border-radius:10px;background:none;color:var(--sj-sand);font:400 13px/1.3 var(--sj-body);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent} .sj-vs-thumb{order:-1;position:relative;display:block;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--sj-s2);border:1px solid var(--sj-s3);transition:border-color .2s} .sj-vs-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s} .sj-vs-thumb::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(8,7,11,0) 45%,rgba(8,7,11,.55))} .sj-vs-len{position:absolute;z-index:1;right:6px;bottom:8px;padding:2px 6px;border-radius:5px;background:rgba(8,7,11,.86);color:#fff;font:700 12px/1.3 var(--sj-body);letter-spacing:.03em} .sj-vs-bar{position:absolute;z-index:2;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.18);opacity:0} .sj-vs-bar::after{content:"";position:absolute;inset:0;background:var(--sj-copper);transform:scaleX(var(--sj-vs-p,0));transform-origin:left;transition:transform .25s linear} .sj-vs-item[aria-current] .sj-vs-thumb{border-color:var(--sj-copper)} .sj-vs-item[aria-current] .sj-vs-bar{opacity:1} .sj-vs-txt{display:flex;flex-direction:column;gap:2px;min-width:0;padding:0 2px} .sj-vs-txt b{font-size:15px;color:var(--sj-cream)} .sj-vs-state{display:flex;align-items:center;gap:6px;min-height:17px} .sj-vs-item[aria-current] .sj-vs-state{color:var(--sj-copper);font-weight:700} .sj-vs-pi{flex:none;width:0;height:0;border-left:7px solid currentColor;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent} .sj-vs-eq{flex:none;display:inline-flex;align-items:flex-end;gap:2px;height:11px} .sj-vs-eq i{width:3px;height:100%;border-radius:1px;background:currentColor;transform-origin:bottom;animation:sj-vs-eq .8s ease-in-out infinite alternate} .sj-vs-eq i:nth-child(2){animation-delay:-.35s} .sj-vs-eq i:nth-child(3){animation-delay:-.6s} @keyframes sj-vs-eq{from{transform:scaleY(.3)}to{transform:scaleY(1)}} @media (hover:hover) and (pointer:fine){ .sj-vs-item:hover .sj-vs-thumb img{transform:scale(1.06)} .sj-vs-item:not([aria-current]):hover .sj-vs-thumb{border-color:var(--sj-sand)} .sj-vs-item:hover .sj-vs-txt b{color:#fff} } @media (min-width:700px){ .sj-vs-list>li{width:176px} .sj-vs-play{width:84px;height:84px;margin:-42px 0 0 -42px} .sj-vs-play .sj-ico{width:36px;height:36px;margin-left:5px} } @media (min-width:900px){ .sj-vs-head{margin-bottom:26px} .sj-vs-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-areas:"screen list" "info more";gap:16px 22px} .sj-vs-side{position:relative;align-self:stretch;border:1px solid var(--sj-s2);border-radius:16px;background:var(--sj-page);overflow:hidden} .sj-vs-list{position:absolute;inset:0;flex-direction:column;gap:4px;margin:0;padding:6px;overflow-x:hidden;overflow-y:auto;scroll-snap-type:none;scrollbar-width:thin;scrollbar-color:var(--sj-s3) transparent} .sj-vs-list::-webkit-scrollbar{display:block;width:6px} .sj-vs-list::-webkit-scrollbar-thumb{background:var(--sj-s3);border-radius:3px} .sj-vs-list>li{width:auto} .sj-vs-list.sj-vs-mb{-webkit-mask-image:linear-gradient(180deg,#08070B calc(100% - 44px),rgba(8,7,11,0));mask-image:linear-gradient(180deg,#08070B calc(100% - 44px),rgba(8,7,11,0))} .sj-vs-list.sj-vs-ma{-webkit-mask-image:linear-gradient(180deg,rgba(8,7,11,0),#08070B 44px);mask-image:linear-gradient(180deg,rgba(8,7,11,0),#08070B 44px)} .sj-vs-list.sj-vs-ma.sj-vs-mb{-webkit-mask-image:linear-gradient(180deg,rgba(8,7,11,0),#08070B 44px,#08070B calc(100% - 44px),rgba(8,7,11,0));mask-image:linear-gradient(180deg,rgba(8,7,11,0),#08070B 44px,#08070B calc(100% - 44px),rgba(8,7,11,0))} .sj-vs-item{display:grid;grid-template-columns:minmax(96px,44%) minmax(0,1fr);align-items:center;gap:14px;padding:7px;border-width:1px;border-radius:12px;transition:background-color .2s} .sj-vs-thumb{border-radius:8px} .sj-vs-item:hover{background:var(--sj-s1)} .sj-vs-item[aria-current]{background:var(--sj-s2);border-color:var(--sj-s3)} .sj-vs-item[aria-current]::before{content:"";position:absolute;left:-1px;top:16px;bottom:16px;width:3px;border-radius:0 3px 3px 0;background:var(--sj-copper)} .sj-vs-txt b{font-size:16px} .sj-vs-state{font-size:14px} } @media (prefers-reduced-motion:reduce){ .sj-vs-play::before{animation:none;opacity:0} .sj-vs-eq i{animation:none} .sj-vs-eq i:nth-child(1){transform:scaleY(.55)} .sj-vs-eq i:nth-child(3){transform:scaleY(.75)} }