:root{
  --bg0:#24050b;
  --bg1:#2c0710;
  --bg2:#3b0a18;
  --bg3:#150308;

  --text:#ba640a;
  --text2:#d87a12;
  --text3:#7d3e04;

  --glow: rgba(186,100,10,.55);

  --bg-image: url("https://uploads.onecompiler.io/44tykavbv/1783125587294/Library%20Hero.png");
  --logo-image: url("https://uploads.onecompiler.io/44tykavbv/1783125597397/Library%20Logo.png");
}

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

body{
  margin:0;
  background:
    radial-gradient(1200px 700px at 20% 10%, var(--bg1), var(--bg0) 55%, var(--bg3) 100%);
  color: var(--text);
  overflow-x:hidden;
}

/* VGA 437-ish font stack */
body, button, input, textarea{
  font-family: "MS PGothic", "Terminal", "VT323", "Press Start 2P", "IBM Plex Mono", "Courier New", monospace;
  letter-spacing: .3px;
}

/* Repeating hero background (with CRT-dark overlay) */
.bg{
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    /* CRT tint overlay */
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.58)),
    radial-gradient(900px 500px at 80% 20%, rgba(186,100,10,.12), transparent 60%),
    radial-gradient(700px 400px at 30% 90%, rgba(186,100,10,.08), transparent 55%),
    /* Image repeat layer */
    var(--bg-image);
  background-repeat: repeat, no-repeat, no-repeat, repeat;
  background-size: auto, auto, auto, 680px auto;
  background-position: center, center, center, center;
  z-index:-1;
}

/* Scanlines */
.wrap::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.03) 0px,
      rgba(255,255,255,.00) 2px,
      rgba(0,0,0,.00) 4px
    );
  mix-blend-mode: overlay;
  opacity:.55;
  z-index:-1;
}

.wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 22px 18px 40px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 10px 4px 18px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-shadow: 0 0 18px var(--glow);
}

.brand-mark{
  display:none; /* replaced by image logo */
}

.brand-logo{
  width: 110px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(186,100,10,.25));
}

.brand-title{
  font-size: 18px;
  margin:0;
  text-transform: uppercase;
  opacity:.95;
}

.links{
  display:flex;
  gap:12px;
  flex-wrap: wrap;
  justify-content:flex-end;
}

.links a{
  color: var(--text);
  text-decoration:none;
  font-size: 12px;
  padding: 6px 10px;
  border: 1px solid rgba(186,100,10,.25);
  background: rgba(0,0,0,.15);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
  text-transform: uppercase;
}

.links a:hover{
  transform: translateY(-1px);
  border-color: rgba(186,100,10,.5);
  background: rgba(186,100,10,.08);
}

.page-title{
  margin: 6px 0 10px;
  text-transform: uppercase;
  font-size: 26px;
  line-height:1.1;
  text-shadow: 0 0 14px rgba(186,100,10,.25);
}

.card{
  padding: 14px 14px 16px;
  border: 1px solid rgba(186,100,10,.22);
  background: rgba(0,0,0,.18);
  box-shadow: 0 0 48px rgba(0,0,0,.18);
}

.content{
  margin-top: 12px;
  color: rgba(186,100,10,.86);
  line-height: 1.65;
  white-space: normal;
}

.content a{
  color: #ffcf9a;
  text-decoration: underline;
  text-decoration-color: rgba(186,100,10,.6);
}

.two-col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}

@media (max-width: 900px){
  .two-col{ grid-template-columns: 1fr; }
}

.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}

@media (max-width: 900px){
  .grid{ grid-template-columns: 1fr; }
}

.h3{
  margin:0 0 8px;
  font-size: 14px;
  text-transform: uppercase;
  color: #ffcf9a;
}

.muted{ opacity:.8; }

.footer{
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(186,100,10,.18);
}

.footer-inner{
  display:flex;
  justify-content:space-between;
  gap:10px;
  color: rgba(186,100,10,.78);
  font-size: 12px;
  flex-wrap: wrap;
}

.footer-center{
  justify-content:center;
  text-align:center;
  width:100%;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border-radius: 2px;
  border: 1px solid rgba(186,100,10,.38);
  padding: 10px 14px;
  font-size: 12px;
  text-transform: uppercase;
  background: rgba(0,0,0,.2);
  color: #d87a12;
  box-shadow: 0 0 24px rgba(186,100,10,.15);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  margin: 6px 10px 0 0;
}

.btn:hover{ transform: translateY(-1px); }
.btn.primary{
  background: rgba(186,100,10,.12);
  border-color: rgba(186,100,10,.65);
  color: #ffcc88;
}
.btn.ghost{
  background: rgba(0,0,0,.18);
  color: var(--text);
}