:root {
  --bg1:#0b0f2b;
  --bg2:#2a0b3d;
  --panel:#f2f2f2;
  --ink:#111;
  --accent:#ff3cc7;
  --accent2:#00e5ff;
  --border:#2b2b2b;
  --font-ui:"MS Sans Serif", Tahoma, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin:0;
  font-family:var(--font-ui);
  color:var(--ink);
  background: linear-gradient(135deg, var(--bg1), var(--bg2));
}

.glitter {
  position:fixed;
  inset:0;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,.1) 0 2px,
      transparent 2px 10px
    );
  pointer-events:none;
}

.wrap {
  max-width: 980px;
  margin:auto;
  padding:20px;
}

.wordart {
  text-align:center;
  font-size:48px;
  font-weight:900;
  background: linear-gradient(90deg,#fff,#ffcdf0,#c8ffff);
  -webkit-background-clip:text;
  color:transparent;
  text-shadow:3px 3px 0 rgba(0,0,0,.3);
}

.marquee {
  overflow:hidden;
  background:#fff;
  border:2px solid var(--border);
  margin:15px 0;
}

.marquee p {
  white-space:nowrap;
  animation: scroll 14s linear infinite;
}

@keyframes scroll {
  from { transform:translateX(100%); }
  to { transform:translateX(-100%); }
}

.panel {
  background:var(--panel);
  border:2px solid var(--border);
}


.panelHeader {
  display:flex;
  justify-content:space-between;
  padding:10px;
  background:linear-gradient(90deg,var(--accent2),var(--accent));
}

.panelBody {
  padding: 16px;
}

.tabs {
  display:flex;
  gap:8px;
  margin-top: 12px;
  margin-bottom:16px;
  border-bottom: 2px solid var(--border);
}

.tab {
  border:2px solid var(--border);
  background:#fff;
  padding:6px 10px;
  cursor:pointer;
  position: relative;
}

.tab[aria-selected="true"] {
  background: #ffffff;
  top: 2px;
}

.section { display:none; }
.section.active { display:block; }

.grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.card {
  border:2px solid var(--border);
  background:#fff;
  padding:18px;
}

.card h3 {
  margin-bottom: 10px;
}

.card p {
  margin-bottom: 12px;
}


.btn {
  border:2px solid var(--border);
  padding:8px 12px;
  text-decoration:none;
  background:#eee;
  cursor:pointer;
}

.btnRow {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}


.primary {
  background:linear-gradient(#fff,var(--accent2));
}

.blink {
  animation: blink 1s steps(2) infinite;
}
.siteMeta {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 12px 0 18px;
}

.siteMetaItem {
  width: fit-content;
  background: #f2f2f2 !important;
  color: #111 !important;
  border: 2px solid #2b2b2b !important;
  padding: 6px 10px !important;
  font-size: 13px;
  border-radius: 6px;
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #8a8a8a,
    1px 1px 0 rgba(0,0,0,0.35);
}

.siteFooter {
  margin-top: 5px;
  padding: 10px 0;
  text-align: left;
  color: #f2f2f2;          /* readable white, not harsh */
  font-size: 13px;
  opacity: 0.9;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6);
}

.siteFooter .tiny {
  letter-spacing: 0.3px;
}

@keyframes blink {
  50% { opacity:0; }
}

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

@media (max-width: 768px) {
  .btnRow {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .btnRow .btn,
  .btnRow .btn.primary {
    width: auto;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .tabs {
    flex-wrap: wrap;
    gap: 6px;
  }

  .tab {
    flex: 1 1 auto;
  }
}

@media (max-width: 480px) {
  h1.wordart {
    font-size: 28px;
    text-align: center;
  }

  .marquee p {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .card {
    padding: 14px;
  }
}

@media (max-width: 480px) {
  .siteFooter {
    padding: 20px 12px;
    font-size: 12px;
  }
}