@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500&display=swap');

* { margin:0; padding:0; box-sizing:border-box; }

:root{
  --bg:#000;
  --panel:#050505;
  --text:#e6e6e6;
  --muted:#9a9a9a;
  --dim:#6f6f6f;
  --line:#0b0b0b;
  --accent:#4ea3ff;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'IBM Plex Mono',monospace;
  overflow:hidden;
}

/* ===== Two-column shell ===== */
#left-panel{
  position:fixed;
  inset:0 auto 0 0;
  width:38%;
  border-right:1px solid var(--line);
  display:grid;
  grid-template-rows:auto 1fr auto;  /* header / console center / footer */
  row-gap:28px;
  padding:56px 60px;
  background:var(--bg);
}

#right-panel{
  position:absolute;
  inset:0 0 0 auto;
  width:62%;
  background:var(--panel);
  padding:96px 80px;
  overflow-y:auto;
  display:flex;
  align-items:flex-start;   /* content starts near top */
}

/* ===== Brand + inline menu ===== */
.brand h1{
  font-size:13px;
  letter-spacing:.1em;
  font-weight:400;
  color:#fff;
  margin-bottom:14px;
}
.brand h1 span{ color:#888; }

.inline-nav{
  display:flex;
  align-items:center;
  gap:16px;
  font-size:13px;
  color:var(--muted);
  user-select:none;
}
.inline-nav .slash{ color:#3c3c3c; }
.inline-nav a{
  color:var(--muted);
  text-decoration:none;
  cursor:pointer;
  transition:color .25s, text-shadow .25s;
  white-space:nowrap;
}
.inline-nav a b{
  font-weight:500;
  color:var(--muted);
  margin-right:6px;
}
.inline-nav a:hover,
.inline-nav a.active{
  color:#fff;
  text-shadow:0 0 6px rgba(78,163,255,.6);
}
.inline-nav a:hover b,
.inline-nav a.active b{
  color:var(--accent);
}

/* ===== Console block (centered vertically) ===== */
#console{
  align-self:center;
  color:var(--muted);
  line-height:1.55;
  font-size:13px;
}
#console p + p{ margin-top:6px; }

/* ===== Footer stamp (bottom-left) ===== */
.stamp{
  font-size:11px;
  color:var(--dim);
  letter-spacing:.05em;
  border-top:1px solid var(--line);
  padding-top:12px;
}
.stamp a{
  color:var(--dim);
  text-decoration:none;
}
.stamp a:hover{ color:#fff; }

/* ===== Right-panel content ===== */
.content-block{
  max-width:640px;
  color:var(--text);
}
.content-block h2{
  font-size:20px;
  letter-spacing:.12em;
  color:#fff;
  margin-bottom:10px;
}
.content-block p,
.content-block ul{
  font-size:14px;
  color:var(--muted);
  line-height:1.6;
}
.content-block ul{ list-style:none; margin-top:10px; }
.content-block li{ margin-bottom:6px; }

/* ===== Transmission (contact) styling to match the system ===== */
.form-grid{
  margin-top:16px;
  display:grid;
  gap:10px;
  max-width:420px;
}
.input{
  background:#0a0a0a;
  border:1px solid #1b1b1b;
  color:#fff;
  padding:10px 12px;
  font:inherit;
  outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.input::placeholder{ color:#6e6e6e; }
.input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(78,163,255,.12);
  background:#0d0d0d;
}

.btn-link{
  background:transparent;
  border:none;
  color:var(--muted);
  padding:0;
  width:max-content;
  font:inherit;
  cursor:pointer;
  transition:color .2s, text-shadow .2s;
}
.btn-link::before{ content:"["; margin-right:2px; }
.btn-link::after{ content:"]"; margin-left:2px; }
.btn-link:hover{
  color:#fff;
  text-shadow:0 0 6px rgba(78,163,255,.5);
}