
:root{
  --bg:#000;
  --text:#cfcfcf;
  --text-strong:#fff;
  --green:#00e000;
  --green-dark:#00a300;
  --blue:#5d86ff;
  --purple:#a000a8;
  --purple-glow:#ff5cff;
  --border:#d4d4d4;
  --dim:#9d9d9d;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:#000;
  color:var(--text);
  font-family:"Courier New", Courier, monospace;
  font-size:20px;
  line-height:1.45;
  text-shadow:0 0 1px rgba(255,255,255,.2);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 2px, transparent 4px);
  opacity:.22;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at center, rgba(255,255,255,.03), rgba(0,0,0,.22) 68%, rgba(0,0,0,.5) 100%);
}
a{color:inherit}
.window-bar{
  position:sticky;top:0;z-index:5;
  display:flex;align-items:center;gap:12px;
  padding:6px 10px;
  background:linear-gradient(#575757,#2e2e2e);
  color:#f0f0f0;
  border-bottom:1px solid #101010;
  font-size:15px;
}
.window-dots{display:flex;gap:6px}
.window-dots span{width:12px;height:12px;border-radius:50%;background:#787878;border:1px solid #1f1f1f}
.window-title{flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.window-link{text-decoration:none}
.layout{
  display:grid;
  grid-template-columns:390px 1fr;
  min-height:calc(100vh - 76px);
}
.sidebar{
  border-right:2px solid var(--border);
  padding:16px 14px 70px;
}
.panel, .hero, .block, .nav, .search-results{
  border:2px solid var(--border);
  background:#030303;
  box-shadow:inset 0 0 18px rgba(255,255,255,.02);
}
.panel{padding:14px 12px;margin-bottom:14px}
.brand-mini{color:var(--green);font-size:16px;margin-bottom:8px}
.brand-title{
  margin:0;
  color:#fff;
  font-size:38px;
  line-height:1;
  letter-spacing:1px;
  text-shadow:0 0 3px #fff,0 0 8px var(--purple-glow),0 0 16px var(--purple-glow),0 0 28px var(--purple-glow);
  animation:flicker 3.2s infinite alternate;
}
.brand-title .blink{animation:blink 1.6s infinite}
@keyframes flicker{
  0%,18%,22%,25%,53%,57%,100%{opacity:1}
  20%,24%,55%{opacity:.82}
}
@keyframes blink{
  0%,48%,52%,100%{opacity:1}
  50%{opacity:.66}
}
.brand-copy{margin:.75rem 0 0;color:#b5b5b5;font-size:18px}
.quick{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.quick a{
  text-decoration:none;
  border:1px solid #4c4c4c;
  padding:6px 10px;
  background:#111;
  color:#fff;
}
.quick a:hover{background:var(--purple);color:#000}
.search-label{display:block;color:var(--green);margin:8px 0 4px}
.search-input{
  width:100%;
  border:2px solid var(--border);
  background:#000;
  color:#fff;
  padding:10px 12px;
  font:inherit;
  outline:none;
}
.search-input:focus{border-color:var(--green)}
.search-results{display:none;max-height:260px;overflow:auto;border-top:none}
.search-results.active{display:block}
.search-item{display:block;padding:10px 12px;text-decoration:none;border-top:1px solid #333}
.search-item:hover{background:rgba(160,0,168,.16)}
.search-item strong{color:#fff}
.search-item span{display:block;color:#a2a2a2;font-size:16px}
.nav{display:flex;flex-direction:column;min-height:480px}
.nav a{
  text-decoration:none;
  padding:8px 10px;
  border-bottom:1px solid #202020;
}
.nav a:hover{background:rgba(0,224,0,.08);color:#fff}
.nav a.active{background:var(--purple);color:#000}
.nav-num{display:inline-block;width:48px;color:#fff}
.nav-icon{display:inline-block;width:28px}
.main{
  padding:16px 16px 72px;
}
.topline{color:var(--green);margin-bottom:10px}
.hero,.block{padding:16px 18px;margin-bottom:16px}
.hero{
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg, transparent, rgba(0,224,0,.7), transparent);
}
.kicker{color:var(--green);margin-bottom:6px}
.hero h2{margin:0;color:#fff;font-size:42px;line-height:1.05}
.subtitle{margin:.75rem 0 0;color:#b5b5b5}
.block h3{margin:0 0 10px;color:var(--green);font-size:30px}
.block p{margin:.4rem 0}
ul.term{margin:0;padding-left:28px}
ul.term li{margin:10px 0}
.verse-link{
  color:var(--blue);
  text-decoration:none;
  border-bottom:1px dotted rgba(93,134,255,.55);
}
.verse-link:hover{color:#9eb5ff}
.refs{line-height:1.9}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.card{
  border:1px solid #444;
  padding:14px;
  background:#050505;
}
.radio{
  display:flex;
  gap:14px;
  text-decoration:none;
  border:1px solid #444;
  padding:14px;
  background:#050505;
}
.radio:hover{background:rgba(160,0,168,.16)}
.radio-num{font-size:28px;color:var(--green);line-height:1}
.tablewrap{overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{border:1px solid #888;padding:10px 12px;vertical-align:top}
th{background:#111;color:#fff}
.status{
  position:fixed;left:0;right:0;bottom:0;z-index:6;
  display:flex;justify-content:space-between;gap:12px;
  padding:4px 10px;
  background:var(--green-dark);
  color:#000;
  border-top:2px solid #0a6a0a;
  font-size:18px;
}
.kbd{
  color:#000;background:var(--green);
  padding:1px 6px;border-radius:2px;font-size:.9em;
}
@media (max-width:1100px){
  .layout{grid-template-columns:1fr}
  .sidebar{border-right:none;border-bottom:2px solid var(--border)}
}
@media (max-width:760px){
  body{font-size:18px}
  .brand-title{font-size:32px}
  .hero h2{font-size:34px}
  .grid2{grid-template-columns:1fr}
  .status{font-size:14px;flex-direction:column}
}
