:root {
  --bg: #000080;
  --panel: #c0c0c0;
  --panel-dark: #808080;
  --panel-light: #ffffff;
  --ink: #000000;
  --electric: #00ffff;
  --hot: #ff00ff;
  --sun: #ffff00;
  --green: #00ff66;
  --deep: #000033;
  --bluebar: #1084d0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  font-family: "Comic Sans MS", "Trebuchet MS", Arial, sans-serif;
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 0, 255, 0.35), transparent 26%),
    radial-gradient(circle at 85% 10%, rgba(0, 255, 255, 0.32), transparent 24%),
    radial-gradient(circle at 50% 95%, rgba(0, 255, 102, 0.18), transparent 25%),
    repeating-linear-gradient(45deg, #000066 0, #000066 12px, #000080 12px, #000080 24px);
  min-height: 100vh;
}

.page { max-width: 960px; margin: 0 auto; padding: 18px; }

.top-strip {
  color: var(--sun);
  background: #000;
  border: 3px ridge var(--electric);
  padding: 6px 10px;
  font-family: "Courier New", monospace;
  font-size: 14px;
  text-align: center;
  letter-spacing: 1px;
}

header {
  position: relative;
  overflow: hidden;
  margin: 14px 0;
  padding: 18px 16px 20px;
  text-align: center;
  color: #fff;
  border: 6px groove var(--hot);
  background:
    linear-gradient(90deg, rgba(128,0,128,0.92), rgba(0,0,255,0.92), rgba(0,128,128,0.92), rgba(128,0,128,0.92)),
    repeating-linear-gradient(0deg, transparent 0 8px, rgba(255,255,255,0.15) 8px 10px);
  box-shadow: 0 0 18px rgba(0,255,255,0.8), 10px 10px 0 rgba(0,0,0,0.35);
}

header::before, header::after {
  content: "✦ ✧ ✦ ✧ ✦";
  position: absolute;
  top: 8px;
  color: rgba(255,255,255,0.45);
  font-size: 18px;
  letter-spacing: 8px;
  pointer-events: none;
}
header::before { left: 12px; }
header::after { right: 12px; }

h1 {
  margin: 0;
  font-size: clamp(38px, 8vw, 76px);
  line-height: 1;
  text-shadow: 3px 3px 0 #000, 5px 5px 0 var(--hot), 7px 7px 0 var(--electric);
}

.blink { animation: blink 1s steps(2, start) infinite; color: var(--sun); }
@keyframes blink { 50% { opacity: 0; } }

.subtitle { margin-top: 10px; font-size: 18px; color: var(--sun); font-weight: bold; text-shadow: 2px 2px 0 #000; }

.marquee {
  overflow: hidden;
  white-space: nowrap;
  color: #000;
  background: var(--sun);
  border: 4px inset var(--panel);
  padding: 8px;
  margin-bottom: 14px;
  font-weight: bold;
}
.marquee span { display: inline-block; padding-left: 100%; animation: scroll 18s linear infinite; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }

.nav-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 14px;
  padding: 8px;
  background: #000;
  border: 4px ridge var(--green);
}

.nav-chip {
  color: #000;
  background: var(--panel);
  border-top: 3px solid #fff;
  border-left: 3px solid #fff;
  border-right: 3px solid #404040;
  border-bottom: 3px solid #404040;
  padding: 6px 10px;
  font-family: Arial, sans-serif;
  font-weight: bold;
  text-decoration: none;
}
.nav-chip:hover { background: var(--sun); }
.nav-chip:active, .nav-chip.active { border-top-color: #404040; border-left-color: #404040; border-right-color: #fff; border-bottom-color: #fff; }

.grid { display: grid; grid-template-columns: 205px 1fr; gap: 14px; align-items: start; }
.sidebar, .window, .mini-window {
  background: var(--panel);
  border-top: 4px solid var(--panel-light);
  border-left: 4px solid var(--panel-light);
  border-right: 4px solid #404040;
  border-bottom: 4px solid #404040;
  box-shadow: 8px 8px 0 rgba(0,0,0,0.45);
}
.sidebar { padding: 12px; }

.badge {
  display: block;
  margin: 0 auto 12px;
  width: 126px;
  height: 126px;
  border-radius: 50%;
  border: 5px double var(--sun);
  background: radial-gradient(circle at 35% 30%, #fff 0 8%, transparent 9%), radial-gradient(circle, var(--electric), #0044ff 54%, #000033 55%);
  color: #fff;
  font-size: 62px;
  line-height: 116px;
  text-align: center;
  text-shadow: 3px 3px 0 #000;
  animation: bob 3s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-4px) rotate(2deg); } }

.side-line { margin: 6px 0; }
.meter { height: 18px; margin: 6px 0 12px; background: #000; border: 3px inset var(--panel); overflow: hidden; }
.meter span { display: block; width: 94%; height: 100%; background: repeating-linear-gradient(90deg, var(--green) 0 10px, #009944 10px 14px); }
.counter, .guestbook { margin-top: 12px; padding: 8px; color: var(--green); background: #000; border: 3px inset var(--panel); font-family: "Courier New", monospace; text-align: center; font-size: 13px; }
.guestbook { color: var(--sun); }
.content-stack { display: grid; gap: 14px; }
.window-title { color: #fff; background: linear-gradient(90deg, #000080, var(--bluebar)); padding: 6px 8px; font-family: Arial, sans-serif; font-weight: bold; display: flex; justify-content: space-between; align-items: center; }
.buttons { color: #000; font-size: 12px; letter-spacing: 2px; text-shadow: none; }
.window-body { padding: 14px; }
h2 { margin: 0 0 10px; color: #000080; font-size: 24px; text-decoration: underline wavy var(--hot); }
h3 { margin: 0 0 8px; color: #800080; font-size: 18px; }
p { line-height: 1.5; }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.note-card { padding: 10px; background: #fff5cc; border: 3px dotted #800080; }
.note-card.blue { background: #e6ffff; border-color: #000080; }
.terminal { color: var(--green); background: #000; border: 3px inset var(--panel); padding: 10px; font-family: "Courier New", monospace; font-size: 14px; line-height: 1.45; margin-top: 12px; }
.projects { width: 100%; border-collapse: collapse; background: #fff; font-family: Arial, sans-serif; }
.projects th { color: #fff; background: #800080; border: 2px solid #000; padding: 8px; text-align: left; }
.projects td { border: 2px solid #000; padding: 8px; }
.projects tr:nth-child(even) td { background: #e6ffff; }
.projects tr:nth-child(odd) td { background: #fff5cc; }
.empty { color: #555; font-style: italic; }
.tiny-note { margin-top: 10px; font-size: 12px; font-family: Arial, sans-serif; color: #333; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.badgelet { padding: 4px 7px; background: #000; color: var(--green); border: 2px outset var(--panel); font-family: "Courier New", monospace; font-size: 12px; }
.sitemap { list-style: square; padding-left: 22px; }
.sitemap li { margin: 8px 0; }
.sitemap a { color: #000080; font-weight: bold; }
footer { margin: 18px 0 4px; padding: 10px; color: #fff; background: #000; border: 4px ridge var(--green); text-align: center; font-family: "Courier New", monospace; font-size: 13px; }

@media (prefers-reduced-motion: reduce) { .blink, .marquee span, .badge { animation: none; } html { scroll-behavior: auto; } }
@media (max-width: 760px) { .grid, .two-col { grid-template-columns: 1fr; } .sidebar { text-align: center; } .marquee span { animation-duration: 24s; } }