/* killu.studio — поле, а не список.
   Язык тот же, что у айсберга нейросетей: тёмная глубина, мятный акцент,
   моноширинные подписи. Но здесь не страница, по которой скроллят, а место,
   по которому ходят: узлы стоят в мировых координатах, экран — окно в них. */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{
  color-scheme:dark;
  --bg:#060c14; --line:#20303d; --muted:#7b909f;
  --cyan:#73f5dc; --amber:#f0c987; --pink:#ef91c6;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden}
body{
  background:
    radial-gradient(120% 90% at 50% 0%, #103a4a33, transparent 60%),
    radial-gradient(90% 70% at 12% 100%, #1b2a5a26, transparent 65%),
    var(--bg);
  color:#dce8ee;font:14px Manrope,Arial,sans-serif;
  cursor:grab;-webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;touch-action:none;
}
body.dragging{cursor:grabbing}
body:after{ /* виньетка: прижимает взгляд к середине, где и живёт поле */
  content:'';position:fixed;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(ellipse at 50% 50%, transparent 52%, #03070d 100%);
}

#sky{position:fixed;inset:0;z-index:0;pointer-events:none}

/* Мир. Начало координат — середина экрана; камера двигает весь слой целиком. */
#world{position:fixed;left:0;top:0;width:0;height:0;z-index:1;will-change:transform}

#links{position:absolute;overflow:visible;pointer-events:none}
#links line{stroke:#2b4a5a;stroke-width:1;stroke-dasharray:3 7;opacity:.55;transition:stroke .3s,opacity .3s}
#links line.near{stroke:var(--cyan);opacity:.9;stroke-dasharray:none}

#home{
  position:absolute;transform:translate(-50%,-50%);text-align:center;
  pointer-events:none;user-select:none;
}
.home-mark{display:block;font-size:34px;color:var(--cyan);opacity:.5;line-height:1}
.home-name{
  display:block;margin-top:10px;
  font:700 19px 'Space Grotesk',sans-serif;letter-spacing:2px;color:#ffffff1f;
}
.home-name i{font-style:normal;color:#73f5dc2e}

/* Узел. Дыхание у каждого своё — сдвиг фазы по индексу, иначе пять
   одинаково мигающих точек читаются как индикатор загрузки. */
.node{
  position:absolute;left:var(--x);top:var(--y);
  transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:9px;
  text-decoration:none;color:inherit;width:200px;
  padding:14px 10px;border-radius:4px;
  transition:transform .25s cubic-bezier(.2,.7,.3,1);
}
.glyph{
  width:54px;height:54px;display:grid;place-items:center;
  font:22px 'Space Grotesk',sans-serif;color:#bad5de;
  border:1px solid #31505f;border-radius:50%;
  background:radial-gradient(circle at 50% 35%, #14303c, #0a1721);
  box-shadow:0 0 0 0 #73f5dc00, inset 0 0 18px #0a1a2380;
  animation:breathe 7s ease-in-out infinite;
  animation-delay:calc(var(--i) * -1.4s);
  transition:border-color .25s,box-shadow .25s,color .25s;
}
@keyframes breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.node .name{
  font:500 17px 'Space Grotesk',Manrope,sans-serif;letter-spacing:-.2px;
  white-space:nowrap;transition:color .25s;
}
.node .state{
  font:9px monospace;letter-spacing:1.2px;padding:2px 7px;
  border:1px solid #2c4250;color:#8ba3b1;border-radius:2px;
  opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s;
}
.state.live{color:var(--cyan);border-color:#2f5a5c}
.state.play{color:var(--amber);border-color:#6a5735}
.state.toy{color:var(--pink);border-color:#6b4155}

.node:hover,.node.near,.node:focus-visible{outline:none;transform:translate(-50%,-50%) scale(1.06)}
.node:hover .glyph,.node.near .glyph,.node:focus-visible .glyph{
  border-color:var(--cyan);color:var(--cyan);
  box-shadow:0 0 34px #73f5dc38, inset 0 0 18px #0a1a2380;
}
.node:hover .name,.node.near .name,.node:focus-visible .name{color:var(--cyan)}
.node:hover .state,.node.near .state,.node:focus-visible .state{opacity:1;transform:translateY(0)}
.node:focus-visible .glyph{outline:2px solid var(--cyan);outline-offset:4px}

/* Постоянные элементы поверх поля. */
header{
  position:fixed;z-index:4;top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px;pointer-events:none;
}
.brand{
  pointer-events:auto;text-decoration:none;color:inherit;
  font:700 16px 'Space Grotesk',sans-serif;letter-spacing:1.4px;
}
.brand>span:not(.brand-icon){color:var(--cyan)}
.brand-icon{color:var(--cyan);margin-right:8px}
.online{font:9px monospace;letter-spacing:1.4px;color:var(--cyan)}
.online i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--cyan);margin-right:7px;box-shadow:0 0 10px var(--cyan)}

#dock{
  position:fixed;z-index:4;left:0;right:0;bottom:0;
  display:flex;gap:6px;justify-content:center;flex-wrap:wrap;
  padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent, #04090fcc 45%);
}
#dock button{
  font:12px Manrope,sans-serif;color:#93a9b6;cursor:pointer;
  background:#0a1620b8;border:1px solid #223641;border-radius:2px;
  padding:9px 13px;transition:color .2s,border-color .2s,background .2s;
}
#dock button:hover{color:var(--cyan);border-color:#32665b}
#dock button.active{color:var(--cyan);border-color:#32665b;background:#15312e}
#dock button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

#recenter{
  position:fixed;z-index:4;left:50%;transform:translateX(-50%);bottom:74px;
  font:10px monospace;letter-spacing:1.4px;color:#9fb6c2;cursor:pointer;
  background:#0a1620d9;border:1px solid #2c4250;border-radius:2px;padding:8px 14px;
}
#recenter:hover{color:var(--cyan);border-color:#32665b}
#recenter[hidden]{display:none}

#hint{
  position:fixed;z-index:4;left:50%;transform:translateX(-50%);bottom:74px;
  margin:0;font:10px monospace;letter-spacing:2px;color:#ffffff33;
  text-transform:uppercase;pointer-events:none;transition:opacity .6s;
}
#hint.gone{opacity:0}

@media(max-width:700px){
  .node{width:150px;padding:10px 6px}
  .glyph{width:46px;height:46px;font-size:19px}
  .node .name{font-size:14px;white-space:normal;text-align:center;line-height:1.25}
  header{padding:14px 16px}
  .brand{font-size:14px}
  #dock{gap:5px;padding:12px 10px calc(12px + env(safe-area-inset-bottom));overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;scrollbar-width:none}
  #dock::-webkit-scrollbar{display:none}
  #dock button{flex:0 0 auto;min-height:38px}
  #recenter,#hint{bottom:78px;font-size:9px}
}

@media(prefers-reduced-motion:reduce){
  .glyph{animation:none}
  .node,.node .state,#links line{transition:none}
}