.era-1996 {
  font-family: "Times New Roman", Times, serif;
  color: #000;
  padding: 72px 12px 40px;
  background-color: #3a0c52;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .9) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 80%, rgba(255, 255, 160, .9) 0 1px, transparent 2px),
    radial-gradient(circle at 50% 50%, #8b2fc9 0%, transparent 60%),
    repeating-conic-gradient(from 20deg at 50% 50%, #5a137f 0 12deg, #3a0c52 12deg 24deg);
  background-size: 37px 41px, 53px 47px, 90px 90px, 90px 90px;
}
.geo { width: min(900px, 100%); margin: 0 auto; position: relative; }
.geo a { color: #0000ee; }
.geo a:visited { color: #551a8b; }

.geo__fire {
  height: 56px;
  background:
    radial-gradient(ellipse 18px 40px at 10% 100%, #ffef5a, transparent 70%),
    radial-gradient(ellipse 22px 50px at 30% 100%, #ff9b1a, transparent 70%),
    radial-gradient(ellipse 16px 34px at 50% 100%, #ffef5a, transparent 70%),
    radial-gradient(ellipse 24px 52px at 70% 100%, #ff5a1a, transparent 70%),
    radial-gradient(ellipse 18px 42px at 90% 100%, #ffd21a, transparent 70%),
    linear-gradient(to top, #ff2d00, #ff8a00 35%, transparent 85%);
  background-size: 120px 100%, 140px 100%, 90px 100%, 160px 100%, 110px 100%, 100% 100%;
  animation: fire .5s steps(3) infinite;
  filter: saturate(1.4);
}
@keyframes fire { 33% { background-position: 20px 4px, -30px 2px, 15px 6px, -10px 0, 25px 3px, 0 0; } 66% { background-position: -15px 2px, 20px 6px, -20px 0, 30px 5px, -10px 1px, 0 0; } }

.geo__head {
  display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 12px;
  background: #0018a8; border: 4px solid #ff22ff; padding: 18px 16px; text-align: center;
  box-shadow: inset 0 0 0 2px #000;
}
.geo__spin { width: 40px; animation: spin 2.4s linear infinite; }
.geo__spin--r { animation-direction: reverse; }
@keyframes spin { to { transform: rotateY(360deg); } }
.geo__welcome { color: #54fbff; letter-spacing: .3em; font-size: 13px; margin: 0 0 6px; animation: blink96 1s steps(1) infinite; }
@keyframes blink96 { 50% { color: #ff0; } }
.geo__title {
  margin: 0; font-family: Bungee, Impact, sans-serif; font-weight: 400; font-size: clamp(26px, 5.5vw, 50px); line-height: 1.05;
  background: linear-gradient(90deg, #ff4fd8, #b84bff, #4fd8ff, #7dff4f, #ffef4f, #ff4fd8); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: rainbow 3s linear infinite; filter: drop-shadow(3px 3px 0 #000);
}
@keyframes rainbow { to { background-position: 200% 0; } }
.geo__sub { color: #7dff4f; margin: 10px 0 0; font-size: 18px; letter-spacing: .04em; }

.geo__marquee { overflow: hidden; white-space: nowrap; background: #000; color: #7dff4f; border: 2px solid #fff; margin: 6px 0; padding: 4px 0; font-size: 15px; }
.geo__marquee span { display: inline-block; padding-left: 100%; animation: marquee 26s linear infinite; }
@keyframes marquee { to { transform: translateX(-100%); } }

.geo__jump { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.geo__go { min-height: 54px; font: 700 clamp(13px, 2vw, 19px) "Times New Roman", serif; border: 3px outset; letter-spacing: .02em; }
.geo__go--back { background: #000; color: #7dff4f; border-color: #3cff3c; }
.geo__go--fwd { background: #ff6a00; color: #fff; border-color: #ffb36a; }
.geo__go:active { border-style: inset; }
.geo__go:hover { filter: brightness(1.2); text-decoration: underline; }

.geo__body { display: grid; grid-template-columns: 190px 1fr; gap: 8px; align-items: start; }
.geo__side { display: grid; gap: 8px; }
.geo__menu { background: #0018a8; border: 4px solid #0018a8; outline: 2px solid #fff; outline-offset: -6px; padding: 12px 10px; display: grid; gap: 6px; }
.geo__menu-title { color: #ffef4f; text-align: center; margin: 0 0 4px; letter-spacing: .1em; border-bottom: 2px solid #fff; padding-bottom: 6px; }
.geo__tab { background: #ddd; border: 3px outset #fff; color: #0018a8; font: 700 15px "Times New Roman", serif; letter-spacing: .08em; padding: 8px 4px; min-height: 40px; }
.geo__tab[aria-pressed="true"] { background: #ff22ff; color: #ffef4f; border-style: inset; }
.geo__tab:hover { background: #ffef4f; }

.geo__box { border: 3px solid #000; text-align: center; padding: 10px; }
.geo__counter { background: #000; color: #fff; font-size: 13px; letter-spacing: .1em; }
.geo__counter p { margin: 0 0 6px; }
.odo { display: flex; justify-content: center; gap: 2px; }
.odo span { font: 24px/1 "Courier New", monospace; color: #3cff3c; border: 1px solid #3cff3c; padding: 2px 3px; background: #001400; }
.geo__mail { background: #ffffc8; color: #c00; }
.geo__mail p { margin: 6px 0 0; }
.env { width: 46px; margin: 0 auto; animation: wobble 1s ease-in-out infinite; }
@keyframes wobble { 50% { transform: rotate(-10deg) translateY(-3px); } }
.geo__construction { background: repeating-linear-gradient(45deg, #ffd400 0 14px, #000 14px 28px); padding: 6px; }
.geo__construction span { display: block; background: #ffd400; font: 700 13px Arial, sans-serif; padding: 8px 4px; border: 2px solid #000; }
.geo__warn { background: #000; color: #fff; }
.geo__warn-t { color: #ff3b3b; margin: 0 0 6px; font-size: 12px; letter-spacing: .2em; animation: blink96 .8s steps(1) infinite; }
.geo__dont { background: #d00; color: #fff; border: 3px outset #ff8080; font: 11px "Times New Roman", serif; letter-spacing: .05em; padding: 8px 6px; width: 100%; }
.geo__dont b { display: block; font-size: 21px; letter-spacing: 0; margin-top: 2px; }
.geo__warn small { color: #ffef4f; display: block; margin-top: 4px; }

.geo__main { background: #d4d4d4; border: 4px solid #ff22ff; min-height: 520px; padding: 0 18px 18px; font-size: 17px; line-height: 1.45; color: #0018a8; }
.geo__main h2 { margin: 0 -18px 16px; background: #0018a8; color: #ffef4f; padding: 10px 18px; font-size: 24px; }
.geo__main h3 { color: #d0003a; margin: 12px 0 4px; }
.geo__about { display: grid; grid-template-columns: 140px 1fr; gap: 18px; }
.geo__photo { margin: 0; width: 140px; border: 4px ridge #e0b000; background: #000; text-align: center; align-self: start; }
.geo__photo img { width: 100%; height: auto; filter: saturate(1.5) contrast(1.15); animation: dialup 2.4s steps(8) both; }
@keyframes dialup { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.geo__photo figcaption { font-size: 11px; color: #ffef4f; padding: 3px 0; }
.geo__role { font-weight: 700; margin: 0; }
.geo__hl { color: #d0003a; font-weight: 700; margin: 4px 0 10px; }
.geo__meta { margin: 0; color: #444; font-style: italic; }
.geo__hr { border: 0; height: 4px; background: linear-gradient(90deg, red, orange, yellow, lime, cyan, blue, magenta); }
.geo__mx { width: 100%; border-collapse: collapse; margin: 8px 0; background: #000; }
.geo__mx td { border: 2px solid #ff22ff; color: #3cff3c; text-align: center; padding: 6px 4px; font-size: 13px; }
.geo__mx b { font: 22px "Courier New", monospace; color: #ffef4f; }
.geo__stack { font-size: 14px; color: #000; background: #ffffc8; padding: 4px 8px; border: 1px dashed #e0b000; }
.geo__proj p { margin: 6px 0; }
.geo__new { font: 700 11px Arial; color: #fff; background: #d00; padding: 1px 5px; vertical-align: middle; animation: blink96 .8s steps(1) infinite; }
.geo__flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0; }
.geo__stage { flex: 1 1 120px; background: #000; border: 3px ridge #3ce6ff; padding: 8px; color: #fff; }
.geo__stage-t { margin: 0 0 4px; color: #ffef4f; font-weight: 700; font-size: 14px; }
.geo__stage ul { margin: 0; padding-left: 16px; font-size: 13px; color: #3cff3c; }
.geo__arrow { font-size: 26px; color: #ff22ff; animation: wobble .8s infinite; }
.geo__table { width: 100%; border-collapse: collapse; background: #fff; }
.geo__table th { background: #000; color: #ffef4f; padding: 6px; }
.geo__table td { border: 2px solid #888; padding: 6px; }
.geo__meter { display: inline-block; width: 60%; height: 14px; border: 2px inset #fff; background: #fff; vertical-align: middle; }
.geo__meter i { display: block; height: 100%; background: repeating-linear-gradient(90deg, #0018a8 0 8px, #fff 8px 10px); }
.geo__note { font-size: 13px; color: #555; font-style: italic; }
.geo__big { font-size: 20px; color: #000; }
.geo__trophy { font-size: 60px; text-align: center; animation: wobble 1.2s infinite; }
.geo__certs li { margin: 4px 0; list-style: square; }
.geo__mailto { font-size: 24px; }
.geo__mailto a { animation: blink96 1.2s steps(1) infinite; }
.geo__cool { margin-top: 10px; }

.geo__gb { display: grid; gap: 10px; background: #ffffc8; border: 3px ridge #e0b000; padding: 12px; color: #000; }
.geo__gb label { display: grid; gap: 4px; font-weight: 700; }
.geo__gb input, .geo__gb textarea { font: 16px "Courier New", monospace; border: 2px inset #fff; padding: 6px; }
.geo__gb button { justify-self: start; background: #ff22ff; color: #ffef4f; border: 3px outset #ff9cff; font: 700 16px "Times New Roman", serif; padding: 8px 18px; }
.geo__entry { border-bottom: 2px dashed #888; padding: 8px 0; color: #000; }
.geo__entry p { margin: 4px 0 0; font-family: "Comic Sans MS", "Comic Neue", cursive; }

.geo__y2k { margin-top: 8px; background: #000; border: 4px solid #3ce6ff; text-align: center; padding: 14px; }
.geo__y2k p { margin: 0; color: #ff3bd4; font: 700 22px "Times New Roman", serif; letter-spacing: .1em; }
.geo__y2k .geo__y2k-n { color: #3cff3c; font-size: clamp(22px, 4vw, 34px); margin-top: 4px; font-variant-numeric: tabular-nums; }
.geo__y2k small { color: #aaa; }
.geo__foot { text-align: center; color: #fff; font-size: 14px; margin-top: 12px; }
.geo__foot a { color: #ffef4f; }
.geo__badge { display: inline-block; background: #000; color: #3cff3c; border: 2px outset #888; padding: 1px 6px; font: 700 11px Arial; margin: 4px 2px; }
.geo__badge--ie { color: #3ce6ff; }

.win95 {
  position: absolute; z-index: 50; width: min(380px, 90%); background: #c0c0c0; border: 2px outset #fff; box-shadow: 2px 2px 0 #000;
  font: 13px "MS Sans Serif", Tahoma, Arial, sans-serif; color: #000;
  animation: pop .12s steps(2);
}
@keyframes pop { from { transform: scale(.6); } }
.win95__bar { background: linear-gradient(90deg, #000080, #1084d0); color: #fff; font-weight: 700; display: flex; justify-content: space-between; align-items: center; padding: 3px 4px 3px 6px; }
.win95__bar button { width: 22px; height: 20px; background: #c0c0c0; border: 2px outset #fff; font: 700 14px/1 Arial; padding: 0; }
.win95__body { display: flex; gap: 12px; align-items: center; padding: 16px; }
.win95__body p { margin: 0; }
.win95__btns { display: flex; justify-content: center; gap: 8px; padding: 0 0 12px; }
.win95__btns button { min-width: 84px; min-height: 30px; background: #c0c0c0; border: 2px outset #fff; font: inherit; }
.win95__btns button:focus-visible { outline: 1px dotted #000; outline-offset: -5px; }

@media (max-width: 720px) {
  .era-1996 { padding-top: 16px; padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .geo__body { grid-template-columns: 1fr; }
  .geo__menu { grid-template-columns: repeat(2, 1fr); }
  .geo__menu-title { grid-column: 1 / -1; }
  .geo__side { display: contents; }
  .geo__menu { order: 0; }
  .geo__main { order: 1; }
  .geo__box { order: 2; }
  .geo__about { grid-template-columns: 1fr; }
  .geo__head { grid-template-columns: 1fr; }
  .geo__spin { display: none; }
  .geo__jump { grid-template-columns: 1fr; }
  .geo__main { min-height: 0; }
}