:root{
  --bg:#020502;
  --bg2:#050a05;
  --grid:rgba(0,255,120,.06);
  --line:rgba(0,255,120,.18);
  --green:#3cff7a;
  --green2:#1fe36c;
  --mut:rgba(60,255,122,.70);
  --mut2:rgba(60,255,122,.45);
  --shadow:0 18px 70px rgba(0,0,0,.65);
  --r:18px;
  --pixel: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  color:var(--green);
  font-family:var(--pixel);
  background:
    radial-gradient(900px 500px at 20% 10%, rgba(60,255,122,.10), transparent 60%),
    radial-gradient(700px 500px at 80% 20%, rgba(0,255,120,.08), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  overflow-x:hidden;
}

/* Grid terminal */
body:before{
  content:"";
  position:fixed;
  inset:0;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:46px 46px;
  opacity:.45;
  pointer-events:none;
}

/* Scanlines */
body:after{
  content:"";
  position:fixed;
  inset:0;
  background:repeating-linear-gradient(
    180deg,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 3px,
    rgba(0,0,0,.18) 4px
  );
  opacity:.32;
  mix-blend-mode:multiply;
  pointer-events:none;
}

a{color:inherit; text-decoration:none}

.wrap{
  max-width:980px;
  margin:0 auto;
  padding:14px 12px 40px;
  position:relative;
}

/* TOP BAR */
.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:calc(var(--r) + 6px);
  background:rgba(0,0,0,.35);
  box-shadow:var(--shadow);
  position:sticky;
  top:10px;
  z-index:20;
  backdrop-filter: blur(6px);
}

.brand{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.brand a{display:inline-block; cursor:pointer}
.brand .h1{
  margin:0;
  font-size:14px;
  letter-spacing:.18em;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-shadow:0 0 18px rgba(60,255,122,.25);
}
.brand .sub{
  font-size:11px;
  color:var(--mut2);
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.right{display:flex; align-items:center; gap:10px}

/* MENU */
details.menu{position:relative}
details.menu summary{
  list-style:none;
  cursor:pointer;
  user-select:none;
  border:1px solid var(--line);
  background:rgba(0,0,0,.28);
  border-radius:14px;
  padding:8px 10px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mut);
  display:flex;
  align-items:center;
  gap:10px;
  outline:none;
}
details.menu summary::-webkit-details-marker{display:none}

.burger{width:16px;height:12px; position:relative; display:inline-block}
.burger:before,.burger:after,.burger i{
  content:"";
  position:absolute;
  left:0; right:0;
  height:2px;
  background:rgba(60,255,122,.72);
  box-shadow:0 0 12px rgba(60,255,122,.18);
}
.burger:before{top:0}
.burger i{top:5px}
.burger:after{bottom:0}

details.menu[open] summary{
  border-color:rgba(60,255,122,.45);
  background:rgba(60,255,122,.06);
  color:rgba(60,255,122,.9);
}

.dropdown{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  min-width:240px;
  border:1px solid rgba(60,255,122,.28);
  border-radius:18px;
  background:rgba(0,0,0,.55);
  box-shadow:0 18px 60px rgba(0,0,0,.65);
  overflow:hidden;
}
.ddHead{
  padding:10px 12px;
  border-bottom:1px solid rgba(60,255,122,.18);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mut2);
}
.ddList{display:flex; flex-direction:column; padding:6px; gap:6px}
.ddList a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 10px;
  border-radius:14px;
  border:1px solid rgba(60,255,122,.14);
  background:rgba(0,0,0,.25);
  color:rgba(60,255,122,.88);
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
  transition:transform .08s ease, background .12s ease, border-color .12s ease;
}
.ddList a:hover{
  background:rgba(60,255,122,.07);
  border-color:rgba(60,255,122,.35);
  transform:translateY(-1px);
}
.arrow{color:var(--mut2); font-size:12px}

/* TERMINAL CARD */
.terminal{
  margin-top:14px;
  border:1px solid var(--line);
  border-radius:calc(var(--r) + 10px);
  background:rgba(0,0,0,.30);
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative;
}
.terminal:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(90deg, transparent, rgba(60,255,122,.16), transparent);
  filter:blur(12px);
  opacity:.35;
  pointer-events:none;
  transform:translateX(-30%);
  animation:sweep2 9s linear infinite;
}
@keyframes sweep2{0%{transform:translateX(-35%)} 100%{transform:translateX(35%)}}

.tHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid rgba(60,255,122,.18);
  background:rgba(0,0,0,.35);
}
.tHead .left{display:flex; align-items:center; gap:10px; min-width:0}

.led{display:flex; gap:6px}
.led span{
  width:9px;height:9px;border-radius:999px;
  background:rgba(60,255,122,.25);
  border:1px solid rgba(60,255,122,.30);
  box-shadow:0 0 12px rgba(60,255,122,.10);
}
.title{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mut);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.clock{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mut2);
  white-space:nowrap;
}

.tBody{padding:14px 12px 18px}

.line{
  margin:0;
  font-size:14px;
  line-height:1.5;
  letter-spacing:.04em;
  text-shadow:0 0 18px rgba(60,255,122,.12);
  white-space:pre-wrap;
  word-break:break-word;
}

.caret{
  display:inline-block;
  width:10px;
  height:16px;
  margin-left:4px;
  background:rgba(60,255,122,.75);
  box-shadow:0 0 16px rgba(60,255,122,.25);
  animation:blink 1s steps(1) infinite;
  vertical-align:-3px;
}
@keyframes blink{50%{opacity:0}}

.foot{
  margin-top:12px;
  color:var(--mut2);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:10px;
  padding:0 2px;
}

/* Mobile */
@media (max-width:520px){
  .brand .h1{font-size:13px}
  details.menu summary{padding:8px 9px}
  .dropdown{min-width:210px}
  .line{font-size:13px}
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,255,0,0.03) 0px,
    rgba(0,255,0,0.03) 1px,
    transparent 1px,
    transparent 3px
  );
}