/* строго два цвета: #000 и #fff. без градиентов между ними, без прозрачности, без размытия */
:root{
  --void:#000;
  --ink:#fff;
  --f-display:system-ui,-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  --f-mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,'Liberation Mono',monospace;
  color-scheme:dark;
}
html{height:100%;box-sizing:border-box;background:#000}
*,*::before,*::after{box-sizing:inherit}
body{
  height:100%;margin:0;position:relative;overflow:hidden;
  background:#000;color:#fff;font-family:var(--f-mono);font-size:14px;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-top:max(clamp(18px,4.5vh,48px),env(safe-area-inset-top,0px));
  padding-bottom:max(clamp(18px,4.5vh,48px),env(safe-area-inset-bottom,0px));
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  -webkit-tap-highlight-color:transparent;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}
[hidden]{display:none!important}

#sky{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}

.orbits{position:fixed;left:50%;top:52%;width:150vmax;height:150vmax;translate:-50% -50%;pointer-events:none;z-index:0;animation:slowspin 520s linear infinite}
.orbits i{position:absolute;left:50%;top:50%;border:1px dotted #fff;border-radius:50%;translate:-50% -50%}
.orbits i:nth-child(1){width:58%;height:20%;rotate:-8deg}
.orbits i:nth-child(2){width:84%;height:34%;rotate:24deg}
.orbits i:nth-child(3){width:38%;height:14%;rotate:-38deg}
@keyframes slowspin{to{transform:rotate(360deg)}}

.top{position:relative;z-index:3;text-align:center;padding-top:clamp(4px,1.6vh,20px)}
.nick{
  margin:0;font-family:var(--f-display);font-weight:200;
  font-size:clamp(30px,8.2vw,98px);line-height:1.05;letter-spacing:.2em;margin-right:-.2em;
  text-transform:uppercase;overflow-wrap:anywhere;color:#fff;
}
.l{display:inline-block;transform:translate3d(var(--rx,0px),var(--ry,0px),0);will-change:transform}
.f{display:inline-block;animation:bob var(--t,6s) ease-in-out infinite alternate;animation-delay:var(--dl,0s)}
@keyframes bob{
  from{transform:translate3d(calc(var(--bx,1)*-1px),calc(var(--by,3)*-1px),0) rotate(calc(var(--br,1)*-1deg))}
  to{transform:translate3d(calc(var(--bx,1)*1px),calc(var(--by,3)*1px),0) rotate(calc(var(--br,1)*1deg))}
}
.hint{
  margin:0;padding-top:clamp(10px,2.2vh,22px);padding-left:.5em;
  font-size:11px;letter-spacing:.5em;text-transform:uppercase;color:#fff;
  --ax:6;--ay:5;--ar:0;animation:drift 12s ease-in-out infinite;
}

.stage{position:relative;z-index:2;min-height:0}
.planet{
  --d:12;
  position:absolute;display:block;width:var(--D);height:var(--D);
  translate:-50% -50%;
  transform:translate3d(calc(var(--mx,0)*var(--d)*-1px),calc(var(--my,0)*var(--d)*-1px),0);
  cursor:pointer;outline:none;will-change:transform;
  animation:arrive 1.2s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--in,0s);
}
@keyframes arrive{from{scale:.6}}
.float{display:block;position:relative;width:100%;height:100%;
  animation:drift var(--dur,22s) ease-in-out infinite;animation-delay:var(--dl,0s);will-change:transform}
@keyframes drift{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  25%{transform:translate3d(calc(var(--ax,10)*1px),calc(var(--ay,14)*-.7px),0) rotate(calc(var(--ar,1.5)*1deg))}
  50%{transform:translate3d(calc(var(--ax,10)*.3px),calc(var(--ay,14)*-1px),0) rotate(0deg)}
  75%{transform:translate3d(calc(var(--ax,10)*-.8px),calc(var(--ay,14)*-.3px),0) rotate(calc(var(--ar,1.5)*-1deg))}
}
.body{position:absolute;inset:0;border-radius:50%;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.planet:hover .body,.planet:focus-visible .body{transform:scale(1.11)}
.planet:focus-visible .body{outline:2px dashed #fff;outline-offset:calc(var(--D)*.12)}

/* планеты 1, 2, 3, 5: без заливки, только белая окружность (чёрная подложка скрывает заднюю часть колец) */
.sphere{position:absolute;inset:0;border-radius:50%;z-index:1;background:#000;box-shadow:0 0 0 2px #fff}

.ring{position:absolute;left:50%;top:50%;width:calc(var(--D)*2.15);height:calc(var(--D)*2.15);translate:-50% -50%;
  border-radius:50%;pointer-events:none;transform:rotate(-16deg) scaleY(.27);
  background:radial-gradient(closest-side,transparent 0 55%,#fff 55% 60%,transparent 60% 66%,#fff 66% 70%,transparent 70% 76%,#fff 76% 80%,transparent 80%)}
.ring.back{z-index:0;clip-path:inset(0 0 50% 0)}
.ring.front{z-index:2;clip-path:inset(50% 0 0 0)}

/* Camera: чёрная дыра */
.core{position:absolute;left:27%;top:27%;width:46%;height:46%;border-radius:50%;background:#000;z-index:1;
  box-shadow:0 0 0 2px #fff}
.disk{position:absolute;left:50%;top:50%;width:calc(var(--D)*2.2);height:calc(var(--D)*2.2);translate:-50% -50%;
  transform:rotate(-14deg) scaleY(.2);pointer-events:none}
.disk.back{z-index:0}
.disk.front{z-index:2;clip-path:inset(50% 0 0 0)}
.disk i{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,#fff 0 18%,transparent 18% 30%,#fff 30% 40%,transparent 40% 52%,#fff 52% 78%,transparent 78% 88%,#fff 88%);
  -webkit-mask:radial-gradient(closest-side,transparent 0 28%,#000 28% 46%,transparent 46%);
  mask:radial-gradient(closest-side,transparent 0 28%,#000 28% 46%,transparent 46%);
  animation:swirl 9s linear infinite}
@keyframes swirl{to{transform:rotate(360deg)}}
.photon{position:absolute;left:50%;top:50%;width:calc(var(--D)*.66);height:calc(var(--D)*.66);translate:-50% -50%;
  border-radius:50%;z-index:3;pointer-events:none;
  background:conic-gradient(from 200deg,#fff 0 30%,transparent 30% 42%,#fff 42% 72%,transparent 72% 80%,#fff 80%);
  -webkit-mask:radial-gradient(closest-side,transparent 0 90%,#000 90% 97%,transparent 97%);
  mask:radial-gradient(closest-side,transparent 0 90%,#000 90% 97%,transparent 97%);
  animation:pulse 5s steps(2,jump-none) infinite alternate}
@keyframes pulse{from{scale:.97}to{scale:1.03}}

/* иконки сайтов: строго ч/б (порог по яркости), без теней */
.slot{position:absolute;left:50%;top:50%;width:calc(var(--D)*.3);height:calc(var(--D)*.3);translate:-50% -50%;
  display:grid;place-items:center;z-index:6;
  filter:grayscale(1) brightness(1.5) contrast(100)}
.slot img{width:100%;height:100%;object-fit:contain;display:block}

.orb{position:absolute;pointer-events:none;--T:3.4s}
.orb::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px dotted #fff;transition:border-style .2s}
.orb.bare::before{display:none}
.orb i{
  position:absolute;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;
  background:#fff;
  animation:
    ox var(--T) cubic-bezier(.37,0,.63,1) infinite alternate,
    oy var(--T) cubic-bezier(.37,0,.63,1) infinite alternate calc(var(--T)*-.5),
    oz var(--T) linear infinite alternate calc(var(--T)*-.5);
}
@keyframes ox{from{left:0%}to{left:100%}}
@keyframes oy{from{top:0%}to{top:100%}}
@keyframes oz{0%,49.99%{z-index:0}50%,100%{z-index:5}}
.moonlet{left:-48%;right:-48%;top:16%;bottom:16%;--T:5.5s}
.moonlet i{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;box-shadow:0 0 0 2px #000}

.label{position:absolute;left:50%;top:calc(100% + clamp(12px,2.6vmin,28px));translate:-50% 0;
  text-align:center;white-space:nowrap;pointer-events:none;display:block}
.label b{display:inline-block;font-weight:500;font-size:11px;letter-spacing:.3em;padding:2px 2px 2px calc(.3em + 2px);text-transform:uppercase;color:#fff;background:#000}
.label em{display:block;margin-top:7px;font-style:normal;font-size:10px;letter-spacing:.34em;padding-left:.34em;text-transform:uppercase;color:#fff;
  visibility:hidden}
.planet:hover .label b,.planet:focus-visible .label b{background:#fff;color:#000}
.planet:hover .label em,.planet:focus-visible .label em{visibility:visible}

.wave{position:absolute;inset:0;border-radius:50%;border:2px solid #fff;opacity:0;pointer-events:none;z-index:7}
.planet.go .wave{animation:wave .9s ease-out}
@keyframes wave{from{opacity:1;transform:scale(1)}99%{opacity:1;transform:scale(2.7)}to{opacity:0;transform:scale(2.7)}}

.p1{--D:clamp(104px,23vmin,232px);left:17%;top:52%;--d:16;--ax:14;--ay:20;--ar:2;--dur:23s;--dl:-3s;--in:.15s}
.p2{--D:clamp(58px,10.5vmin,118px);left:41%;top:18%;--d:8;--ax:9;--ay:16;--ar:3;--dur:17s;--dl:-9s;--in:.35s}
.p3{--D:clamp(86px,18vmin,180px);left:63%;top:64%;--d:20;--ax:-12;--ay:22;--ar:-2;--dur:27s;--dl:-14s;--in:.55s}
.p5{--D:clamp(64px,12.5vmin,130px);left:62%;top:20%;--d:12;--ax:10;--ay:15;--ar:2;--dur:20s;--dl:-11s;--in:.95s}
.p4{--D:clamp(98px,21vmin,210px);left:84%;top:30%;--d:24;--ax:11;--ay:18;--ar:1;--dur:31s;--dl:-6s;--in:.75s}

.dock{position:relative;z-index:3;display:flex;flex-wrap:wrap;justify-content:center;
  gap:6px clamp(14px,4vw,56px);padding-top:clamp(8px,2vh,24px)}
.sat{position:relative;display:inline-block;padding:13px 24px;outline:none;animation:drift var(--dur,11s) ease-in-out infinite;animation-delay:var(--dl,0s)}
.sat .orb{inset:0}
.sat .t{position:relative;display:block;font-size:12px;font-weight:500;letter-spacing:.3em;padding:2px 2px 2px calc(.3em + 2px);text-transform:uppercase;color:#fff;background:#000}
.sat:hover .t,.sat:focus-visible .t{background:#fff;color:#000}
.sat:hover .orb::before,.sat:focus-visible .orb::before{border-style:solid}
.sat:focus-visible{outline:2px dashed #fff;outline-offset:2px;border-radius:50%}

/* телефон (портрет). десктопные стили выше не затрагиваются */
@media (max-width:640px){
  body{padding-top:max(20px,env(safe-area-inset-top,0px));padding-bottom:max(16px,env(safe-area-inset-bottom,0px))}
  .nick{letter-spacing:.16em;margin-right:-.16em;font-size:clamp(34px,13vw,64px)}
  .hint{letter-spacing:.4em;font-size:10px}
  .p1{--D:clamp(64px,min(26vw,15vh),120px);left:34%;top:15%}
  .p2{--D:clamp(44px,min(15vw,9vh),72px);left:84%;top:9%}
  .p5{--D:clamp(48px,min(18vw,11vh),88px);left:77%;top:37%}
  .p3{--D:clamp(64px,min(26vw,15vh),120px);left:27%;top:49%}
  .p4{--D:clamp(60px,min(23vw,13vh),104px);left:64%;top:80%}
  .label b{font-size:10px}
  .dock{gap:0 10px;padding-top:6px}
  .sat{padding:10px 12px}
  .sat .t{font-size:11px;letter-spacing:.22em}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}