.csssaturn-stage{user-select:none;background:#000 url(https://earth-assets.lowpoly.cc/codepen/saturn/13/saturn-sky.webp) 50%/cover;position:absolute;inset:0;overflow:hidden;container-type:size;& main{--lens:min(200cqw, 338.889cqh, 3840px);--motion:running;perspective:var(--lens);position:absolute;top:50%;left:50%;& div,& s{transform-style:preserve-3d;position:absolute}& s{backface-visibility:hidden}}&.is-paused main{--motion:paused}& .layer{--to-eye:rotateY(26.73deg) rotateZ(-60deg) rotateX(-40deg);translate:0 0 -991px;transform:translateZ(calc(var(--lens) - 2822.47px)) rotateX(40deg) rotateZ(60deg) rotateY(-26.73deg)}& .rings{transform-style:flat;width:2048px;left:-1024px;overflow:hidden;transform:rotate(-69.102deg);& s{background-size:100%;border-radius:50%;width:2048px;height:2048px;left:0;transform:rotate(-58.898deg);&:first-child{animation:csssaturn-turn 68.7s linear infinite var(--motion);background-image:url(https://earth-assets.lowpoly.cc/codepen/saturn/13/saturn-rings-dots.avif)}&:nth-child(2){background-image:url(https://earth-assets.lowpoly.cc/codepen/saturn/13/saturn-planet-shadow.avif)}}&.far{transform-origin:1024px 1024px;height:1024.5px;top:-1024px;& s{top:0}}&.near{transform-origin:1024px .5px;height:1024.5px;top:-.5px;& s{top:-1023.5px}}}& .caps,& .globe{animation:csssaturn-turn 72s linear infinite var(--motion);transform:rotate(-128deg)}& .globe s{transform-origin:0 0;background-image:url(https://earth-assets.lowpoly.cc/codepen/saturn/13/saturn-surface-mix.avif);background-size:1040px 768px;width:32px;height:32px;&:nth-child(-n+32){background-position-y:-680px;transform:matrix3d(.304044,-.029946,0,0,.000201,.002043,3.67618,-.015492,.000572,.005805,-.021213,0,-.09,48.956,-223.904,1)}&:nth-child(n+33):nth-child(-n+64){background-position-y:-632px;transform:matrix3d(.598152,-.058913,0,0,.000128,.001298,2.53729,-.009852,.00094,.009547,-.019798,0,-.165,96.441,-210.986,1)}&:nth-child(n+65):nth-child(-n+96){background-position-y:-584px;transform:matrix3d(.869305,-.085619,0,0,.000088,.000894,1.99574,-.006792,.001287,.013069,-.017651,0,-.233,140.219,-189.961,1)}&:nth-child(n+97):nth-child(-n+128){background-position-y:-536px;transform:matrix3d(1.10708,-.109038,0,0,.000061,.000624,1.69848,-.004744,.001599,.016231,-.014765,0,-.294,178.609,-161.636,1)}&:nth-child(n+129):nth-child(-n+160){background-position-y:-488px;transform:matrix3d(1.30235,-.12827,0,0,.000041,.000417,1.52942,-.003176,.001858,.01886,-.011174,0,-.343,210.135,-127.099,1)}&:nth-child(n+161):nth-child(-n+192){background-position-y:-440px;transform:matrix3d(1.4476,-.142576,0,0,.000024,.000242,1.4413,-.001842,.002045,.020762,-.006981,0,-.38,233.586,-87.678,1)}&:nth-child(n+193):nth-child(-n+224){background-position-y:-392px;transform:matrix3d(1.53725,-.151406,0,0,.000008,.00008,1.41411,-.00061,.002144,.021766,-.002376,0,-.403,248.06,-44.887,1)}&:nth-child(n+225):nth-child(-n+256){background-position-y:-344px;transform:matrix3d(1.56786,-.154421,0,0,-.000008,-.000082,1.44227,.000622,.002144,.021766,.002376,0,-.411,253.002,-.372,1)}&:nth-child(n+257):nth-child(-n+288){background-position-y:-296px;transform:matrix3d(1.53825,-.151504,0,0,-.000025,-.000257,1.53155,.001954,.002045,.020762,.006981,0,-.403,248.221,44.158,1)}&:nth-child(n+289):nth-child(-n+320){background-position-y:-248px;transform:matrix3d(1.44955,-.142768,0,0,-.000046,-.000464,1.70229,.003532,.001858,.01886,.011174,0,-.381,233.901,86.992,1)}&:nth-child(n+321):nth-child(-n+352){background-position-y:-200px;transform:matrix3d(1.30518,-.128549,0,0,-.000072,-.000736,2.0024,.005592,.001599,.016231,.014765,0,-.344,210.592,126.482,1)}&:nth-child(n+353):nth-child(-n+384){background-position-y:-152px;transform:matrix3d(1.11069,-.109393,0,0,-.000113,-.001143,2.54989,.00868,.001287,.013069,.017651,0,-.295,179.191,161.111,1)}&:nth-child(n+385):nth-child(-n+416){background-position-y:-104px;transform:matrix3d(.873539,-.086036,0,0,-.000187,-.001896,3.70546,.014388,.00094,.009547,.019798,0,-.235,140.903,189.549,1)}&:nth-child(n+417){background-position-y:-56px;transform:matrix3d(.602854,-.059376,0,0,-.000399,-.00405,7.28909,.030712,.000572,.005805,.021213,0,-.166,97.2,210.703,1)}&:nth-child(32n+1){background-position-x:-8px}&:nth-child(32n+2){background-position-x:-40px;rotate:-11.25deg}&:nth-child(32n+3){background-position-x:-72px;rotate:-22.5deg}&:nth-child(32n+4){background-position-x:-104px;rotate:-33.75deg}&:nth-child(32n+5){background-position-x:-136px;rotate:-45deg}&:nth-child(32n+6){background-position-x:-168px;rotate:-56.25deg}&:nth-child(32n+7){background-position-x:-200px;rotate:-67.5deg}&:nth-child(32n+8){background-position-x:-232px;rotate:-78.75deg}&:nth-child(32n+9){background-position-x:-264px;rotate:-90deg}&:nth-child(32n+10){background-position-x:-296px;rotate:-101.25deg}&:nth-child(32n+11){background-position-x:-328px;rotate:-112.5deg}&:nth-child(32n+12){background-position-x:-360px;rotate:-123.75deg}&:nth-child(32n+13){background-position-x:-392px;rotate:-135deg}&:nth-child(32n+14){background-position-x:-424px;rotate:-146.25deg}&:nth-child(32n+15){background-position-x:-456px;rotate:-157.5deg}&:nth-child(32n+16){background-position-x:-488px;rotate:-168.75deg}&:nth-child(32n+17){background-position-x:-520px;rotate:-180deg}&:nth-child(32n+18){background-position-x:-552px;rotate:-191.25deg}&:nth-child(32n+19){background-position-x:-584px;rotate:-202.5deg}&:nth-child(32n+20){background-position-x:-616px;rotate:-213.75deg}&:nth-child(32n+21){background-position-x:-648px;rotate:-225deg}&:nth-child(32n+22){background-position-x:-680px;rotate:-236.25deg}&:nth-child(32n+23){background-position-x:-712px;rotate:-247.5deg}&:nth-child(32n+24){background-position-x:-744px;rotate:-258.75deg}&:nth-child(32n+25){background-position-x:-776px;rotate:-270deg}&:nth-child(32n+26){background-position-x:-808px;rotate:-281.25deg}&:nth-child(32n+27){background-position-x:-840px;rotate:-292.5deg}&:nth-child(32n+28){background-position-x:-872px;rotate:-303.75deg}&:nth-child(32n+29){background-position-x:-904px;rotate:-315deg}&:nth-child(32n+30){background-position-x:-936px;rotate:-326.25deg}&:nth-child(32n+31){background-position-x:-968px;rotate:-337.5deg}&:nth-child(32n+32){background-position-x:-1000px;rotate:-348.75deg}}& .caps s{background-image:url(https://earth-assets.lowpoly.cc/codepen/saturn/13/saturn-caps.avif);background-size:512px 256px;border-radius:50%;inset:-128px;&:nth-child(-n+2){background-position-x:-256px}&:first-child{transform:translateZ(-221.3px)rotateY(180deg)scale(.404992)}&:nth-child(2){transform:translateZ(-223.94px)rotateY(180deg)scale(.399208)}&:nth-child(3){transform:translateZ(221.3px)scale(.404992)}&:nth-child(4){transform:translateZ(223.94px)scale(.399208)}}& .limb{--limb:url(https://earth-assets.lowpoly.cc/codepen/saturn/13/saturn-limb.avif);--night:url(https://earth-assets.lowpoly.cc/codepen/saturn/13/saturn-night.avif);--rings-shadow:url(https://earth-assets.lowpoly.cc/codepen/saturn/13/saturn-rings-shadow.avif);background-image:var(--rings-shadow), var(--night), var(--limb);scale:1.02089 1.02089 1.02089;transform:var(--to-eye) translate3d(.38px, 1.475px, 249.076px) rotate(-14.454deg) scale(.46227, .42588) rotate(14.454deg);background-position:50%;background-size:1040px;border-radius:50%;inset:-502px}& .fill{transform:var(--to-eye) translate3d(.415px, 1.612px, 11.357px) rotate(-14.454deg) scale(.50156, .462) rotate(14.454deg);background-color:#b19478;border-radius:50%;inset:-502px}& .orbit{inset:-500px;& i{box-shadow:0 0 0 var(--line) color-mix(in srgb, currentColor 50%, transparent);border-radius:50%;position:absolute;inset:0}& div{animation:csssaturn-turn var(--period) linear infinite reverse var(--motion);top:500px;left:500px}& span{color:color-mix(in srgb, var(--mark) 50%, transparent);transform-origin:-12px 9px;translate:var(--at);transform:var(--face);animation:csssaturn-turn var(--period) linear infinite normal var(--motion), csssaturn-moon-size calc(var(--period) / 2) cubic-bezier(.3642, 0, .6358, 1) var(--size-delay) infinite alternate var(--motion);font:14px/18px system-ui,sans-serif;position:absolute;top:-9px;left:12px;&:before{content:"";background:var(--mark);opacity:.7;border-radius:50%;width:2.4px;height:2.4px;position:absolute;top:7.8px;left:-13.2px}&:after{content:"";border:1px solid var(--mark);opacity:.5;border-radius:50%;width:14px;height:14px;position:absolute;top:1px;left:-20px}}&:first-of-type{--period:154.2s;--size-delay:-29.494s;--near:.82323;--far:1.37816;--line:1.059px;--mark:#aeaba5;--at:-499.88px -11.14px;--face:matrix3d(-.5994,-.1812,9.505,0,.0374,.2953,40.2463,0,-.2221,.5386,-18.8682,0,0,0,0,1);color:#b5b2ac;transform:matrix3d(-1.08118,1.12684,.014123,0,1.12659,1.08043,.040836,0,.000277,.000542,-.021992,0,9.35,-9.745,-.122,1)}&:nth-of-type(2){--period:224.2s;--size-delay:-35.178s;--near:.75004;--far:1.45894;--line:.8211px;--mark:#d3d7d8;--at:353.76px 353.35px;--face:matrix3d(.1487,.4603,10.2299,0,.1796,-.1632,39.6571,0,.4383,-.0893,-19.7175,0,0,0,0,1);color:var(--mark);transform:matrix3d(1.98723,.328059,.000097,0,.328054,-1.9872,.000328,0,.000002,-.000003,-.022,0,-5.612,-.927,0,1)}&:nth-of-type(3){--period:308.9s;--size-delay:-295.07s;--near:.66504;--far:1.54352;--line:.665px;--mark:#bcbbae;--at:487.69px 110.25px;--face:matrix3d(-.1541,.3618,9.4909,0,.1911,-.0007,39.9967,0,.3185,.1755,-19.3986,0,0,0,0,1);color:var(--mark);transform:matrix3d(1.59077,1.91099,.037968,0,1.91135,-1.5905,-.028411,0,.000022,.000419,-.021996,0,-3.622,-4.352,-.087,1)}&:nth-of-type(4){--period:447.8s;--size-delay:-442.301s;--near:.54551;--far:1.66452;--line:.5203px;--mark:#bab9b1;--at:484.09px -125.14px;--face:matrix3d(.0868,.294,10.2267,0,.1162,-.1004,39.6695,0,.2792,-.0496,-19.6942,0,0,0,0,1);color:var(--mark);transform:matrix3d(3.12195,.596855,.001847,0,.596849,-3.12192,-.000222,0,.000012,.000004,-.022,0,-7.053,-1.348,-.003,1)}&:nth-of-type(5){--period:739.3s;--size-delay:-542.31s;--near:.32346;--far:1.88192;--line:.3732px;--mark:#bebbb0;--at:490.19px -98.54px;--face:matrix3d(-.2155,.0446,9.9931,0,.0639,.0896,39.6795,0,.0193,.2022,-19.7936,0,0,0,0,1);color:var(--mark);transform:matrix3d(-1.1913,4.26877,.021304,0,4.26878,1.19135,-.010216,0,-.000077,.000088,-.022,0,1.321,-4.736,-.023,1)}}& .zoom{display:none}@media not (pointer:coarse){@supports (animation-timeline:scroll()) and (timeline-scope:--csssaturn-zoom){&{timeline-scope:--csssaturn-zoom}& .zoom{overscroll-behavior:contain;scrollbar-width:none;scroll-timeline:--csssaturn-zoom y;pointer-events:auto;display:block;position:absolute;inset:0;overflow:hidden scroll;& span{scroll-initial-target:nearest;height:100%;margin:1200px 0 440px;display:block}}& main{animation:linear both csssaturn-zoom-in --csssaturn-zoom}& .layer{animation:linear both csssaturn-zoom-out --csssaturn-zoom}& .limb{animation:linear both csssaturn-zoom-limb --csssaturn-zoom}}}@media (pointer:coarse),(width<=700px),(height<=500px){& .rings{width:512px;left:-256px;scale:2.30582;& s{width:512px;height:512px}&.far{transform-origin:256px 256px;height:256.5px;top:-256px}&.near{transform-origin:256px .5px;height:256.5px;& s{top:-255.5px}}}& .orbit i{box-shadow:0 0 0 calc(var(--line) * .25) color-mix(in srgb, currentColor 50%, transparent);inset:375px;scale:4}}}@keyframes csssaturn-turn{to{rotate:-360deg}}@keyframes csssaturn-moon-size{0%{scale:var(--near) var(--near) var(--near)}to{scale:var(--far) var(--far) var(--far)}}@keyframes csssaturn-zoom-in{0%{scale:2.2506}24.681%{scale:1.546}50.638%{scale:1.046}53.193%,to{scale:1}}@keyframes csssaturn-zoom-out{0%,53.193%{translate:0}76.596%{translate:0 0 -1161px}to{translate:0 0 -2798px}}@keyframes csssaturn-zoom-limb{0%,53.193%{scale:1}76.596%{scale:1.02447 1.02447 1.02447}to{scale:1.04294 1.04294 1.04294}}