@charset "UTF-8";
.references-page{background:#202b35;color:#e7edf1}
.references-header{position:relative;min-height:94px;background:linear-gradient(105deg,#d3d4d4,#afb4b8);color:#30363c;padding-top:max(25px,env(safe-area-inset-top));z-index:3}
.references-header .brand-suffix{color:var(--blue)}
.references-main{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 49% 42%,#354453 0%,#26333f 43%,#17212b 100%)}
.space-grain{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle,#b8d3f0b0 0 .8px,transparent 1.5px),radial-gradient(circle,#ffffff8a 0 .75px,transparent 1.6px),radial-gradient(circle,#80b2ec75 0 1px,transparent 2px);background-size:171px 193px,257px 223px,397px 313px;background-position:31px 49px,127px 111px,77px 181px;opacity:.56}
.references-intro{position:relative;z-index:2;max-width:1000px;margin:0 auto;padding:84px 32px 16px;text-align:center}
.references-page .eyebrow{color:#9bc6f4}
.references-intro h1{font-weight:400;font-size:clamp(51px,6.7vw,104px);line-height:.99;letter-spacing:-.065em;margin:25px 0 22px}
.references-intro h1 em{font-style:normal;color:#86a8cc}
.references-intro p{max-width:34em;margin:0 auto;color:#c0ccd5;font-size:15px;line-height:1.65}
.references-instruction{display:inline-block;margin-top:28px;font-size:10px;letter-spacing:.13em;color:#a8b8c6}
.references-instruction .ui-arrow{margin-left:5px;color:#9bc6f4;width:15px;height:15px}
.planet-field{position:relative;max-width:1600px;height:1040px;margin:4px auto 0;perspective:1200px}
.orbital-track{position:absolute;left:50%;top:48%;width:72%;height:70%;border:1px solid #a8bdce29;border-radius:50%;transform:translate(-50%,-50%) rotate(-20deg);pointer-events:none}
.orbital-track-b{width:48%;height:91%;border-style:dotted;border-color:#93bfee3a;transform:translate(-50%,-50%) rotate(39deg)}
.orbital-track-c{width:92%;height:46%;border-color:#95aec724;transform:translate(-50%,-50%) rotate(20deg)}
.field-star{position:absolute;width:5px;height:5px;border-radius:50%;background:#b4d1ed;box-shadow:0 0 15px #86bded}
.field-star-a{left:35%;top:24%}.field-star-b{left:66%;top:61%;width:3px;height:3px}.field-star-c{left:42%;top:85%;width:3px;height:3px}
.planet{--size:176px;--float-time:10s;position:absolute;left:var(--px);top:var(--py);z-index:2;width:260px;min-height:265px;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;text-align:center;outline-offset:10px!important;perspective:800px}
.planet:hover,.planet:focus-visible{z-index:10}
.planet-motion{position:relative;width:230px;height:206px;display:grid;place-items:center;animation:planet-drift var(--float-time) ease-in-out infinite;animation-delay:var(--delay,0s);animation-play-state:paused}
.planet-geometry{position:relative;width:var(--size);height:var(--size);display:block;transform-style:preserve-3d;transform:rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg)) scale(var(--zoom,1));transition:transform .75s var(--ease)}
.planet:hover .planet-geometry,.planet:focus-visible .planet-geometry{--zoom:1.19}
.planet-sphere{position:absolute;inset:0;overflow:hidden;border-radius:50%;background:#52677d;box-shadow:inset -19px -15px 30px #020c16c9,inset 6px 8px 18px #e9f7ff38,0 22px 45px #020e1c83,0 0 42px #5e95cd36;transform:translateZ(15px);border:1px solid #d2e9ff6e}
.planet-sphere img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;filter:saturate(.75) contrast(1.08);transform:scale(1.28);transition:transform .8s var(--ease),filter .8s;animation:surface-turn 19s ease-in-out infinite alternate;animation-play-state:paused;animation-delay:var(--delay,0s)}
.planet:hover .planet-sphere img,.planet:focus-visible .planet-sphere img{animation:none;transform:scale(1.08);filter:saturate(1) contrast(1.04)}
.planet-sphere:after{content:"";position:absolute;inset:-1px;border-radius:50%;background:radial-gradient(circle at 30% 24%,#ffffff78 0%,#c7e8ff23 18%,transparent 43%),radial-gradient(circle at 75% 85%,#020b18ed 0%,#0815269c 33%,transparent 66%),linear-gradient(115deg,#adcced33,transparent 48%);box-shadow:inset 1px 1px 11px #e3f4ff66,inset -17px -13px 30px #07121dd9;pointer-events:none}
.planet-ring{position:absolute;z-index:3;left:-29%;top:18%;width:158%;height:64%;border:2px solid #bddbff9e;border-radius:50%;transform:rotate(-24deg) rotateX(67deg) translateZ(2px);box-shadow:0 0 14px #78b5ea3d,inset 0 0 10px #bddbff4b;pointer-events:none}
.planet-ring-back{z-index:0;opacity:.45;clip-path:inset(0 0 49% 0)}
.planet-ring-front{clip-path:inset(49% 0 0 0);border-color:#d9edffc9}
.planet-glint{position:absolute;z-index:4;left:20%;top:12%;width:11px;height:11px;border-radius:50%;background:#eef8ff;filter:blur(6px);opacity:.76;transform:translateZ(25px);pointer-events:none}
.planet-comet{position:absolute;z-index:5;inset:-22%;border-radius:50%;pointer-events:none;transform:rotate(-24deg) scaleY(.42) rotate(0deg);animation:comet-revolve var(--comet-time,11s) linear infinite;animation-play-state:paused;animation-delay:var(--delay,0s)}
.planet-comet:before{content:"";position:absolute;z-index:2;top:0;left:50%;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#c9edff 50%,#5eacf3);box-shadow:0 0 10px 3px #b8e6ffad,0 0 28px #7ab9f399;transform:translate(-50%,-50%) scaleY(2.38)}
.planet-comet:after{content:"";position:absolute;top:0;left:calc(50% - 30px);width:27px;height:2px;background:linear-gradient(90deg,transparent,#b4dfffbd);filter:drop-shadow(0 0 4px #bde4ff);transform:translateY(-50%) scaleY(2.38)}
.planet-meta{display:flex;flex-direction:column;align-items:center;gap:5px;margin-top:3px;text-shadow:0 2px 10px #0b1720}
.planet-meta strong{font-weight:500;font-size:15px;letter-spacing:.04em;white-space:nowrap}
.planet-meta small{color:#a9bfce;font-size:11px;letter-spacing:.03em}
.planet-preview{position:absolute;left:75%;top:27%;width:260px;display:block;visibility:hidden;opacity:0;text-align:left;border:1px solid #d9ecffb3;border-radius:6px;overflow:hidden;background:#d6e0e7;color:#26313c;box-shadow:0 26px 65px #030b16b8,0 0 45px #5b94cb31;transform:translate3d(-22px,12px,80px) scale(.87);transition:opacity .45s,transform .65s var(--ease),visibility .45s}
.planet-preview img{width:100%;height:auto;aspect-ratio:16/9;display:block;object-fit:cover;object-position:top center}
.planet-preview>span{min-height:39px;display:flex;align-items:center;justify-content:space-between;padding:6px 12px;font-size:11px;letter-spacing:.05em}
.planet-preview .ui-arrow{color:var(--blue);width:17px;height:17px}
.planet:hover .planet-preview,.planet:focus-visible .planet-preview{visibility:visible;opacity:1;transform:translate3d(0,0,80px) scale(1)}
.planet-kameraj .planet-preview,.planet-bryla .planet-preview{left:auto;right:75%;transform:translate3d(22px,12px,80px) scale(.87)}
.planet-glow{--px:19%;--py:26%;--size:178px;--delay:-2s;--comet-time:10s}
.planet-kameraj{--px:78%;--py:21%;--size:162px;--delay:-4s;--float-time:11s;--comet-time:13s}
.planet-ndue{--px:50%;--py:48%;--size:211px;--delay:-6s;--float-time:12s;--comet-time:15s}
.planet-event{--px:20%;--py:77%;--size:166px;--delay:-1s;--float-time:9s;--comet-time:12s}
.planet-bryla{--px:79%;--py:79%;--size:184px;--delay:-5s;--comet-time:14s}
.planet-ndue .planet-preview{left:82%;top:28%}
@keyframes planet-drift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-14px,0)}}
@keyframes comet-revolve{from{transform:rotate(-24deg) scaleY(.42) rotate(0deg)}to{transform:rotate(-24deg) scaleY(.42) rotate(360deg)}}
@keyframes surface-turn{from{transform:scale(1.3) translateX(-5%)}to{transform:scale(1.3) translateX(5%)}}
.planet-field.is-visible:not(.motion-paused) .planet-motion,.planet-field.is-visible:not(.motion-paused) .planet-comet,.planet-field.is-visible:not(.motion-paused) .planet-sphere img{animation-play-state:running}
.references-more{position:relative;max-width:1190px;margin:0 auto;padding:25px 28px 110px}
.more-intro{text-align:center;margin:0 0 34px}.more-intro h2{font-size:clamp(32px,3.8vw,55px);font-weight:400;letter-spacing:-.045em;margin:12px 0}
.more-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.more-feature{position:relative;min-height:290px;overflow:hidden;padding:37px 40px;border:1px solid #9fc7ec43;border-radius:5px;background:linear-gradient(135deg,#34495a,#263642 65%,#1e303f);box-shadow:0 20px 55px #04121c45}
.more-feature .feature-symbol{position:absolute;right:38px;top:24px;width:150px;height:150px;fill:none;stroke:#75abe0;stroke-width:7;stroke-linecap:square;opacity:.2;pointer-events:none}
.more-feature h3{position:relative;font-weight:400;font-size:clamp(26px,2.7vw,39px);letter-spacing:-.04em;margin:23px 0 14px}
.more-feature p{position:relative;max-width:26em;font-size:13px;line-height:1.7;color:#c4d2dc;margin:0}
.more-feature a{position:relative;z-index:1;display:inline-flex;align-items:center;gap:14px;min-height:44px;margin-top:18px;color:#a4cff7;font-size:12px}.more-feature a svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.references-footer{min-height:103px;padding:10px 4.2vw max(16px,env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:44px 24px;align-items:center;gap:0 20px;background:#b8babd;color:#30363c;font-size:11px;letter-spacing:.06em}
.references-footer>a:first-child{grid-column:1;grid-row:1;justify-self:start}.references-footer .planet-motion-control{grid-column:2;grid-row:1}.references-footer>a:nth-of-type(2){grid-column:3;grid-row:1;justify-self:end}
.references-footer a,.planet-motion-control{min-height:44px;display:inline-flex;align-items:center;gap:8px}.planet-motion-control .motion-symbol{font-size:16px}.references-footer a:hover{color:var(--blue)}
.references-footer .footer-legal{grid-column:1/-1;grid-row:2;justify-self:end;display:flex;gap:22px;font-size:10px}.references-footer .footer-legal a{min-height:24px}
.references-page a:focus-visible,.references-page button:focus-visible{outline-color:#9bc6f4}.references-header a:focus-visible,.references-footer a:focus-visible,.references-footer button:focus-visible{outline-color:var(--blue)}
@media(max-width:950px) and (min-width:768px){.planet{width:210px}.planet-preview{width:210px}.planet-glow{--px:18%}.planet-kameraj{--px:82%}.planet-event{--px:18%}.planet-bryla{--px:82%}}
@media(max-width:767px){
  .references-header{min-height:78px;padding:18px 20px 9px}.references-header .brand{width:150px;height:42px}.references-header nav{gap:17px;font-size:11px}
  .references-intro{padding:61px 22px 17px}.references-intro h1{font-size:clamp(48px,13vw,72px);margin:20px 0}.references-intro p{font-size:13px}.references-instruction{font-size:9px;line-height:1.5;margin-top:20px}
  .planet-field{height:auto;max-width:470px;display:flex;flex-direction:column;gap:27px;padding:51px 20px 90px}
  .orbital-track{left:50%;top:5%;width:1px;height:90%;transform:none;border:0;border-left:1px dotted #9cc8f34d;border-radius:0}.orbital-track-b,.orbital-track-c,.field-star{display:none}
  .planet{--size:130px;position:relative;left:auto;top:auto;transform:none;width:100%;min-height:191px;display:grid;grid-template-columns:145px minmax(0,1fr);grid-template-rows:auto auto;grid-template-areas:"sphere meta" "sphere preview";align-items:center;column-gap:12px;text-align:left}
  .planet:nth-of-type(odd){grid-template-columns:minmax(0,1fr) 145px;grid-template-areas:"meta sphere" "preview sphere";text-align:right}
  .planet-motion{grid-area:sphere;width:145px;height:170px}.planet-geometry{width:var(--size);height:var(--size)}
  .planet-meta{grid-area:meta;align-items:flex-start;margin:0;align-self:end;gap:3px}.planet:nth-of-type(odd) .planet-meta{align-items:flex-end}
  .planet-meta strong{font-size:12px;white-space:normal;line-height:1.25}.planet-meta small{font-size:9px;overflow-wrap:anywhere}
  .planet-preview,.planet-kameraj .planet-preview,.planet-bryla .planet-preview,.planet-ndue .planet-preview{grid-area:preview;position:relative;left:auto;right:auto;top:auto;width:100%;max-width:175px;margin-top:10px;visibility:visible;opacity:1;transform:none;box-shadow:0 12px 30px #020d1991;align-self:start}
  .planet:nth-of-type(odd) .planet-preview{justify-self:end;text-align:left}
  .planet-preview>span{min-height:30px;padding:4px 7px;font-size:9px}.planet-preview b{font-size:13px}
  .planet:hover .planet-preview,.planet:focus-visible .planet-preview{transform:none}
  .planet:hover .planet-geometry,.planet:focus-visible .planet-geometry{--zoom:1.08}
  .references-more{padding:8px 18px 60px}.more-grid{grid-template-columns:1fr;gap:15px}.more-feature{min-height:246px;padding:27px}.more-feature .feature-symbol{width:85px;height:85px;right:20px;top:15px;opacity:.16}.more-feature h3{font-size:29px}.more-feature p{font-size:12px}
  .references-footer{padding-inline:18px;gap:0 8px;font-size:9px}.references-footer .motion-label{display:none}.references-footer .footer-legal{justify-self:center}
}
@media(max-width:359px){.references-header{padding-inline:16px}.references-header .brand{width:126px}.references-header nav{gap:9px;font-size:10px}.references-header .contact-link span{display:none}.planet-field{padding-inline:14px}.planet{--size:116px;grid-template-columns:124px minmax(0,1fr);column-gap:9px}.planet:nth-of-type(odd){grid-template-columns:minmax(0,1fr) 124px}.planet-motion{width:124px}.planet-meta strong{font-size:11px}.planet-preview>span{font-size:8px}}
@media(prefers-reduced-motion:reduce){.planet-motion,.planet-comet,.planet-sphere img{animation:none!important}.planet-geometry,.planet-preview,.planet-sphere img{transition:none!important}.planet:hover .planet-geometry,.planet:focus-visible .planet-geometry{--zoom:1}}
