.node-space::before{
  content:"";
  position:absolute;
  inset:-24%;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(76, 205, 255,.06) 0, rgba(76,205,255,.02) 70%, rgba(76,205,255,0) 100%),
    repeating-linear-gradient(
      to right,
      rgba(170, 190, 210,.09) 0,
      rgba(170, 190, 210,.09) 1px,
      transparent 1px,
      transparent 38px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(126, 152, 180,.06) 0,
      rgba(126, 152, 180,.06) 1px,
      transparent 1px,
      transparent 26px
  );
  background-size:100% 100%, 34px 34px, 28px 28px;
  mask-image:none;
  opacity:.2;
  filter:blur(0.5px) saturate(110%);
  transform:translateZ(-220px);
}

.node-space::after{
  content:"";
  position:absolute;
  inset:-26% -20% 8%;
  pointer-events:none;
  background:
    linear-gradient(
      180deg,
      rgba(102, 204, 255,.1) 0%,
      rgba(102, 204, 255,.03) 50%,
      rgba(0,255,99,0) 100%
    );
  opacity:.12;
  mix-blend-mode:screen;
  transform:translateZ(-120px);
}

.node-matrix{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0;
  border-radius:8px;
  background:
    linear-gradient(90deg, rgba(155, 190, 220,.04) 0, rgba(155, 190, 220,.015) 70%),
    linear-gradient(180deg, rgba(0,255,99,.02) 0, rgba(0,255,99,0) 55%, rgba(0,255,99,0) 100%);
  mix-blend-mode:screen;
  filter:blur(0.8px) saturate(120%);
  transform:translateZ(-230px);
  animation:matrix-shimmer 6s linear infinite;
}

.node-matrix::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(0,255,99,.12) 0,
      rgba(0,255,99,.12) 1px,
      transparent 1px,
      transparent 20px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0,255,99,.11) 0,
      rgba(0,255,99,.11) 1px,
      transparent 1px,
      transparent 20px
    );
  opacity:.16;
  mix-blend-mode:soft-light;
}

@keyframes matrix-shimmer{
  0%{filter:blur(1px) saturate(170%) hue-rotate(0deg);}
  50%{filter:blur(1px) saturate(205%) hue-rotate(-4deg);}
  100%{filter:blur(1px) saturate(170%) hue-rotate(0deg);}
}

.node-lines::before{
  content:none;
}

.node{
  position:absolute;
  z-index:2;
  width:min(220px,20vw);
  aspect-ratio:5/4;
  border-radius:10px;
  border:1px solid rgba(0,255,99,.6);
  background:
    linear-gradient(160deg, rgba(0,255,99,.14), rgba(0,255,99,.03) 68%, rgba(0,255,99,.01) 100%);
  box-shadow:0 0 16px rgba(0,255,99,.2), inset 0 0 24px rgba(0,255,99,.16);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:14px 13px 11px;
  cursor:pointer;
  transition:transform .9s cubic-bezier(.2,.8,.2,1), opacity .9s ease;
  transform-origin:center;
  will-change:transform,filter,opacity;
  backface-visibility:hidden;
  transform-style:preserve-3d;
}

.node:hover{
  border-color:rgba(0,255,99,.95);
}

.node::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(145deg, rgba(0,255,99,.16), transparent 54%);
  pointer-events:none;
}

.node .node-code{
  position:relative;
  font-family:var(--cobol-font);
  color:#d8ffea;
  font-size:11px;
  letter-spacing:.12em;
  opacity:.82;
  text-transform:uppercase;
  margin-bottom:8px;
  z-index:1;
}

.node h3{
  position:relative;
  margin:0;
  font-size:clamp(20px,2.4vw,34px);
  letter-spacing:-.055em;
  z-index:1;
}

.node p{
  position:relative;
  margin:0;
  font-size:12px;
  letter-spacing:.01em;
  color:#9bffbb;
  opacity:.88;
  z-index:1;
  text-wrap:balance;
}

.node .node-id{
  position:absolute;
  left:10px;
  top:8px;
  font-size:10px;
  opacity:.58;
  letter-spacing:.12em;
}

.node.focused{
  z-index:5;
  border-color:rgba(0,255,99,1);
  box-shadow:
    0 0 32px rgba(0,255,99,.38),
    0 0 0 1px rgba(0,255,99,.4) inset,
    inset 0 0 22px rgba(0,255,99,.14);
  filter:brightness(1.05);
}

.node-lines .edge{
  position:absolute;
  height:1px;
  background:linear-gradient(90deg, rgba(0,255,99,.9), rgba(0,255,99,.05));
  transform-origin:left center;
  opacity:.55;
  filter:blur(0.35px);
  box-shadow:0 0 6px rgba(0,255,99,.34);
}

.you-here{
  position:absolute;
  z-index:1;
  left:50%;
  top:calc(100% - 52px);
  transform:translate(-50%, -50%) translateZ(0);
  width:160px;
  height:110px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  color:#7deca0;
  font-size:11px;
  text-align:center;
  letter-spacing:.16em;
  text-transform:uppercase;
  transform-style:preserve-3d;
}

.you-here::before{
  content:"";
  width:1px;
  height:52px;
  background:linear-gradient(to top, rgba(0,255,99,0), rgba(0,255,99,.68));
}

.you-here::after{
  content:"";
  position:absolute;
  left:50%;
  width:160px;
  top:0;
  bottom:4px;
  border-top:1px dotted rgba(0,255,99,.3);
  transform:translateX(-50%);
  transform-origin:left center;
}

.you-here span{
  margin-top:2px;
}

.world-chat{
  position:relative;
  z-index:12;
  display:flex;
  flex-direction:column;
  gap:4px;
  min-height:160px;
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
  transition:opacity .3s ease, transform .3s ease;
  max-height:230px;
}

.world-chat.active{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

.world-chat-header{
  position:relative;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  border:1px solid rgba(0,255,99,.3);
  border-bottom:none;
  border-radius:10px 10px 0 0;
  padding:8px 10px 7px;
  color:#9fffc7;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  background:rgba(0,0,0,.52);
  line-height:1;
}

.world-chat-status{
  color:#7deca0;
  letter-spacing:.05em;
  font-size:10px;
}

.world-chat-console{
  border:1px solid rgba(0,255,99,.45);
  border-radius:0 0 10px 10px;
  overflow:hidden;
  background:rgba(0,0,0,.58);
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:120px;
}

.world-chat-log{
  min-height:76px;
  max-height:142px;
  overflow:auto;
  padding:9px 10px;
  font-family:var(--cobol-font);
  font-size:11px;
  line-height:1.36;
  color:#a9ffd1;
  background:rgba(0,0,0,.58);
  text-transform:uppercase;
  white-space:pre-wrap;
  box-shadow:0 0 14px rgba(0,255,99,.15);
}

.world-chat-log .line{
  margin:0 0 4px;
}

.world-chat-log .line.user{
  color:#deffef;
}

.world-chat-log .line.system{
  color:#8effb8;
}

.world-chat-log .line.error{
  color:#ff8f8f;
}

.world-chat-input-row{
  display:flex;
  gap:8px;
  align-items:stretch;
  padding:8px;
  background:rgba(0,0,0,.45);
}

.world-chat-input{
  flex:1;
  height:34px;
  min-height:34px;
  max-height:34px;
  border:1px solid rgba(0,255,99,.45);
  border-radius:6px;
  padding:9px 12px;
  background:rgba(0,0,0,.58);
  color:#b8ffd5;
  font-family:var(--cobol-font);
  font-size:12px;
  line-height:1.25;
  resize:none;
  outline:none;
  caret-color:#8fffc1;
  letter-spacing:.02em;
}

.world-chat-input::placeholder{
  color:#6fd39c;
}

.world-chat-send{
  border:1px solid rgba(0,255,99,.45);
  background:rgba(0,0,0,.58);
  color:#caffdf;
  border-radius:6px;
  padding:0 14px;
  min-width:92px;
  height:34px;
  font-family:var(--cobol-font);
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}

.world-chat-send:hover{
  background:rgba(0,255,99,.12);
}

@media(max-width:880px){
  .node-interface{
    position:relative;
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(0, 1fr) auto;
  }

  .hud-panel{
    position:relative;
    width:auto;
  }

  .node-space{
    width:100%;
    height:min(500px,80vh);
  }
  .node{
    width:min(200px,38vw);
  }
  .head{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .head-meta{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    text-align:left;
    margin-top:2px;
  }
  .node-interface{
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(0, 1fr) auto;
  }
  .hud-drawer-toggle{
    display:inline-flex;
    padding:3px 9px;
  }
  .left-hud,
  .right-hud{
    grid-column:1 / -1;
    max-height:48px;
    transition:max-height .25s ease;
  }
  .left-hud.open,
  .right-hud.open{
    max-height:210px;
  }
  .left-hud.collapsed,
  .right-hud.collapsed{
    max-height:44px;
  }
  .left-hud .hud-section + .hud-section,
  .right-hud .hud-section + .hud-section,
  .nearby-nodes{
    display:none;
  }
  .left-hud.open .hud-section + .hud-section,
  .right-hud.open .hud-section + .hud-section,
  .right-hud.open .nearby-nodes{
    display:flex;
  }
  .right-hud.open .nearby-nodes{
    flex-direction:column;
  }
}

/* project detail */
.overlay{
  position:fixed;
  inset:0;
  z-index:40;
  background:#050505;
  display:grid;
  place-items:center;
  opacity:0;
  pointer-events:none;
  transition:.3s ease;
}
.overlay.open{
  opacity:1;
  pointer-events:auto;
}
.panel{
  width:min(1000px,90vw);
  min-height:68vh;
  border-radius:28px;
  padding:48px;
  background:#0b0b0b;
  border:1px solid #242424;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transform:scale(.76);
  transition:.5s cubic-bezier(.2,.8,.2,1);
}
.overlay.open .panel{
  transform:scale(1);
}
.panel h2{
  font-size:clamp(60px,10vw,128px);
  letter-spacing:-.08em;
  margin:0;
}
.panel p{
  max-width:650px;
  color:#888;
  font-size:18px;
  line-height:1.5;
}
.detail-log{
  margin:18px 0 0;
  padding:12px;
  min-height:220px;
  border:1px solid #252525;
  border-radius:12px;
  background:#050505;
  color:#ffd29a;
  font-family:"Courier New",monospace;
  white-space:pre-wrap;
  overflow:auto;
  line-height:1.45;
  transition:opacity .35s ease;
}
.detail-log.quiet{
  opacity:.55;
}
.actions{
  display:flex;
  gap:10px;
}

.actions button{
  padding:13px 18px;
  border-radius:999px;
  border:1px solid #333;
  background:#151515;
  color:#fff;
  cursor:pointer;
}
.actions button:disabled{
  opacity:.5;
  cursor:not-allowed;
}

/* speed treatment */
.rush-vignette{
  position:absolute;
  inset:-12%;
  z-index:12;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at 50% 49%,transparent 0 27%,rgba(0,0,0,.1) 45%,rgba(0,0,0,.82) 82%,#000 100%);
  will-change:opacity,transform,filter;
}
.rush-lines{
  position:absolute;
  inset:-15%;
  z-index:11;
  pointer-events:none;
  opacity:0;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,152,50,.05) 0,
      rgba(255,152,50,.05) 2px,
      transparent 2px,
      transparent 16px
    ),
    repeating-linear-gradient(
      76deg,
      rgba(255,152,50,.02) 0,
      rgba(255,152,50,.02) 1px,
      transparent 1px,
      transparent 18px
    );
  will-change:opacity,transform,filter;
}

.scroll-hint{
  position:absolute;
  z-index:15;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  color:rgba(255,255,255,.42);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  pointer-events:none;
  transition:opacity .25s;
}

@keyframes scanline-pulse{
  0%{opacity:.45}
  50%{opacity:.12}
  100%{opacity:.45}
}
@keyframes room-flicker{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.015)}
}
@keyframes room-noise{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(1px)}
}
@keyframes enter-blink{
  0%,50%{opacity:1}
  51%,100%{opacity:.32}
}
@keyframes cursor-blink{
  0%,49%{opacity:1}
  50%,100%{opacity:0}
}

.collapse{
  animation:screen-collapse .8s cubic-bezier(.31,.73,.17,.99) forwards;
}
@keyframes screen-collapse{
  0%{
    transform:scale(1);
    filter:brightness(1) blur(0);
  }
  60%{
    transform:scale(1.05);
    filter:brightness(.7) blur(1.5px);
  }
  100%{
    transform:scale(1.11);
    filter:brightness(.48) blur(2.5px);
  }
}

@media(max-width:880px){
  .computer{width:min(84vw,76vh)}
  .shell{height:92vh;overflow:auto}
}

@media(max-height:420px){
  .computer{width:min(66vw,88vh)}
  .scroll-hint{display:none}
}