.site-header { gap: 0; }
.site-header > .theme-toggle { margin-left: auto; }

.retro-toggle {
  width: 44px;
  height: 44px;
  margin-left: .125rem;
  padding: 12px;
  border: 0;
  background: transparent;
  color: var(--secondary);
  display: grid;
  flex-shrink: 0;
  place-items: center;
  cursor: pointer;
}

.retro-toggle:hover { color: var(--text); }
.retro-toggle[aria-pressed="true"] { color: var(--accent); }
.retro-toggle:active { transform: translateY(1px); }
.retro-toggle .retro-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.retro-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.retro-marquee,
.retro-counter-panel { display: none; }

[data-retro="true"] {
  --retro-navy: #000080;
  --retro-blue: #0000ff;
  --retro-cyan: #00ffff;
  --retro-pink: #ff00ff;
  --retro-yellow: #ffff00;
  --retro-lime: #39ff14;
  --retro-silver: #c0c0c0;
  color-scheme: dark;
}

[data-retro="true"] body {
  overflow-x: hidden;
  background-color: #000044;
  background-image:
    linear-gradient(45deg, #000060 25%, transparent 25%, transparent 75%, #000060 75%),
    linear-gradient(45deg, #000060 25%, #00003c 25%, #00003c 75%, #000060 75%);
  background-position: 0 0, 16px 16px;
  background-size: 32px 32px;
  color: #fff;
  font-family: "Comic Sans MS", "Trebuchet MS", sans-serif;
  cursor: default;
}

[data-retro="true"] body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgb(0 255 255 / .035) 3px 4px);
  pointer-events: none;
}

[data-retro="true"] ::selection { color: #000; background: var(--retro-yellow); }

[data-retro="true"] .page {
  width: min(100% - 1rem, 70rem);
  margin: .5rem auto;
  padding: .5rem 1rem 1.5rem;
  border: 5px ridge var(--retro-silver);
  background: rgb(0 0 32 / .93);
  box-shadow: 0 0 0 4px #000, 0 0 28px var(--retro-cyan);
}

[data-retro="true"] .site-header {
  position: relative;
  border: 3px outset #eee;
  padding: .55rem;
  background: var(--retro-silver);
  color: #000;
  box-shadow: none;
}

[data-retro="true"] .site-header::before {
  content: "JarredSears.me — Microsoft Internet Explorer";
  position: absolute;
  inset: .18rem .18rem auto;
  padding: .18rem .45rem;
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #fff;
  font: 700 .72rem/1.2 Arial, sans-serif;
  text-align: left;
}

[data-retro="true"] .site-header nav { margin-top: 1.35rem; }
[data-retro="true"] .site-header nav a {
  color: #000080;
  font: 700 .82rem/1.2 "Courier New", monospace;
  text-decoration: underline;
}
[data-retro="true"] .site-header nav a:visited { color: #551a8b; }
[data-retro="true"] .site-header nav a:hover { color: #f00; background: var(--retro-yellow); }

[data-retro="true"] .theme-toggle {
  margin-top: 1.35rem;
  opacity: .45;
  filter: grayscale(1);
  cursor: not-allowed;
}
[data-retro="true"] .retro-toggle {
  margin-top: 1.35rem;
  border: 2px outset #fff;
  background: var(--retro-yellow);
  color: #000;
  padding: 10px;
}

[data-retro="true"] .retro-marquee {
  display: block;
  overflow: hidden;
  margin: .6rem 0 1rem;
  border: 3px ridge var(--retro-yellow);
  background: #000;
  color: var(--retro-yellow);
  font: 700 .85rem/1.5 "Courier New", monospace;
  white-space: nowrap;
}
[data-retro="true"] .retro-marquee > div {
  width: max-content;
  padding-left: 100%;
  animation: retro-marquee 13s linear infinite;
}
@keyframes retro-marquee { to { transform: translateX(-100%); } }

[data-retro="true"] main { max-width: none; }
[data-retro="true"] .hero {
  position: relative;
  margin: 0 0 1rem;
  padding: clamp(1.4rem, 5vw, 3.5rem) 1rem;
  border: 6px groove var(--retro-pink);
  background:
    radial-gradient(circle at 20% 30%, #0000ff 0 2px, transparent 3px),
    radial-gradient(circle at 75% 60%, #ff00ff 0 2px, transparent 3px),
    radial-gradient(circle at 45% 80%, #00ffff 0 1px, transparent 2px),
    #000;
  background-size: 37px 37px, 53px 53px, 29px 29px;
  text-align: center;
}
[data-retro="true"] .hero::before {
  content: "★ OFFICIAL HOME PAGE ★";
  display: block;
  margin-bottom: .85rem;
  color: var(--retro-lime);
  font: 700 clamp(.72rem, 2vw, 1rem)/1 "Courier New", monospace;
  animation: retro-blink 1.1s steps(2, end) infinite;
}
@keyframes retro-blink { 50% { opacity: .25; } }

[data-retro="true"] h1 {
  color: var(--retro-yellow);
  font: 900 clamp(2.6rem, 9vw, 6rem)/.95 Impact, Haettenschweiler, sans-serif;
  letter-spacing: .04em;
  text-shadow: 3px 3px 0 var(--retro-pink), 6px 6px 0 var(--retro-blue);
  transform: skew(-3deg);
}
[data-retro="true"] .role { color: var(--retro-cyan); font-family: "Courier New", monospace; font-weight: 700; }
[data-retro="true"] .intro { color: #fff; font-size: 1.05rem; }

[data-retro="true"] .profile-section {
  margin: .8rem 0;
  padding: 1rem;
  border: 5px ridge var(--retro-silver);
  background: #000080;
  box-shadow: inset 0 0 0 2px #000;
}
[data-retro="true"] .profile-section:nth-of-type(even) { background: #35004d; }
[data-retro="true"] .profile-section h2 {
  display: inline-block;
  margin: 0 0 .8rem;
  padding: .2rem .45rem;
  border: 2px outset #fff;
  background: var(--retro-yellow);
  color: #000;
  font: 900 1.2rem/1.2 "Arial Black", Impact, sans-serif;
  text-transform: uppercase;
  text-shadow: none;
}
[data-retro="true"] .profile-section p,
[data-retro="true"] .profile-section li,
[data-retro="true"] .profile-section dd,
[data-retro="true"] .profile-section dt { color: #fff; }
[data-retro="true"] .profile-section dt { color: var(--retro-yellow); font-family: "Courier New", monospace; }
[data-retro="true"] .profile-section a { color: var(--retro-cyan); }

[data-retro="true"] .button,
[data-retro="true"] .skills-list li,
[data-retro="true"] .credentials li {
  border: 3px outset #eee;
  border-radius: 0;
  background: var(--retro-silver);
  color: #000 !important;
  box-shadow: none;
  font-family: "Courier New", monospace;
  font-weight: 700;
}
[data-retro="true"] .button:active { border-style: inset; transform: translate(1px, 1px); }

[data-retro="true"] .retro-counter-panel {
  display: grid;
  justify-items: center;
  gap: .8rem;
  margin: 1rem 0;
  padding: 1rem;
  border: 5px groove var(--retro-cyan);
  background: #000;
  text-align: center;
}
[data-retro="true"] .under-construction {
  width: min(100%, 31rem);
  padding: .4rem;
  border: 3px outset #ddd;
  background: repeating-linear-gradient(135deg, var(--retro-yellow) 0 14px, #000 14px 28px);
  color: #fff;
  font: 900 1rem/1.3 "Arial Black", sans-serif;
  text-shadow: 2px 2px #000, -2px -2px #000;
  animation: retro-stripes 1.3s linear infinite;
}
@keyframes retro-stripes { to { background-position: 40px 0; } }

[data-retro="true"] .retro-counter {
  color: var(--retro-lime);
  font: 700 .9rem/1.3 "Courier New", monospace;
}
[data-retro="true"] .retro-counter span {
  display: inline-block;
  padding: .15rem .35rem;
  border: 2px inset #ccc;
  background: #080808;
  color: #ff3b30;
  font-family: "Courier New", monospace;
  letter-spacing: .12em;
  text-shadow: 0 0 6px #f00;
}
[data-retro="true"] .retro-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; }
[data-retro="true"] .retro-badges span {
  display: grid;
  place-items: center;
  width: 88px;
  height: 31px;
  border: 2px outset #ddd;
  background: linear-gradient(#000 50%, #000080 50%);
  color: var(--retro-yellow);
  font: 700 10px/1 Arial, sans-serif;
  text-shadow: 1px 1px #f0f;
}
[data-retro="true"] .retro-sound {
  border: 2px outset #fff;
  border-radius: 0;
  padding: .3rem .55rem;
  background: var(--retro-silver);
  color: #000;
  font: 700 .72rem/1 "Courier New", monospace;
}

[data-retro="true"] footer {
  border-top: 2px dashed var(--retro-cyan);
  color: var(--retro-yellow);
  font-family: "Courier New", monospace;
}
[data-retro="true"] footer a { color: var(--retro-cyan); }

.connection-overlay {
  position: fixed;
  z-index: 9000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgb(0 0 0 / .18);
  font-family: Arial, Helvetica, sans-serif;
}
.connection-overlay[hidden] { display: none; }
.connection-window {
  width: min(430px, calc(100vw - 2rem));
  border: 3px outset #fff;
  background: #c0c0c0;
  color: #000;
  box-shadow: 8px 8px 0 rgb(0 0 0 / .38);
}
.connection-titlebar {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-height: 31px;
  margin: 3px;
  padding: .25rem .45rem;
  background: linear-gradient(90deg, #000080, #0879c9);
  color: #fff;
  font-size: .86rem;
  letter-spacing: .01em;
}
.jo-globe {
  position: relative;
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 50%;
  flex: 0 0 auto;
}
.jo-globe::before,
.jo-globe::after,
.jo-globe i {
  content: "";
  position: absolute;
  inset: 3px -2px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-radius: 50%;
}
.jo-globe::after { inset: -2px 5px; border: 0; border-left: 1px solid #fff; border-right: 1px solid #fff; }
.jo-globe i { inset: 7px -2px auto; border: 0; border-top: 1px solid #fff; border-radius: 0; }
.connection-body { padding: .7rem; }
.time-stage {
  position: relative;
  overflow: hidden;
  height: 164px;
  border: 3px inset #ddd;
  background: linear-gradient(#01000b 0 63%, #130b28 63% 66%, #08090e 66%);
  image-rendering: pixelated;
}
.time-stars {
  position: absolute;
  inset: 0 0 34%;
  opacity: .85;
  background-image:
    radial-gradient(circle, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle, #68e6ff 0 1px, transparent 1.5px);
  background-position: 5px 8px, 23px 31px;
  background-size: 37px 29px, 53px 41px;
}
.time-road {
  position: absolute;
  inset: 66% 0 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 50px, #d7d786 50px 76px, transparent 76px 126px) center 55% / 126px 3px repeat-x,
    linear-gradient(#292b31, #050506);
}
.time-trails {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 35px;
  width: 62%;
  height: 6px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, #ff4b25 35%, #ffc400 72%, #fff);
  box-shadow: 0 -10px 8px #ff5a1f, 0 8px 10px #39d8ff;
}
.time-car {
  position: absolute;
  z-index: 3;
  left: -110px;
  bottom: 31px;
  width: 94px;
  height: 28px;
  background: #aeb7bd;
  border: 3px solid #e6edef;
  border-bottom-color: #4e555a;
  clip-path: polygon(0 38%, 17% 38%, 31% 0, 69% 0, 82% 28%, 100% 43%, 96% 84%, 4% 84%);
  filter: drop-shadow(0 0 4px #5be1ff);
}
.connection-overlay.is-connecting .time-stars { animation: jo-stars .75s steps(4, end) infinite; }
.connection-overlay.is-connecting .time-road { animation: jo-road .35s linear infinite; }
.connection-overlay.is-connecting .time-trails { animation: jo-trails 8s steps(14, end) forwards; }
.connection-overlay.is-connecting .time-car { animation: jo-car-drive 8s steps(68, end) forwards; }
.time-car i {
  position: absolute;
  inset: 3px 28px 11px 29px;
  display: block;
  background: #18324a;
  border-left: 4px solid #859098;
  border-right: 3px solid #d8e2e7;
  transform: skew(-13deg);
}
.time-car b,
.time-car b::after {
  position: absolute;
  bottom: -6px;
  left: 13px;
  width: 15px;
  height: 15px;
  content: "";
  border: 3px solid #444;
  border-radius: 50%;
  background: #050505;
  box-shadow: inset 0 0 0 2px #aaa;
}
.time-car b::after { left: 52px; bottom: -3px; }
.time-car span {
  position: absolute;
  right: 0;
  top: 10px;
  width: 7px;
  height: 8px;
  background: #ff392b;
  box-shadow: 4px 0 8px #ff392b;
}
@keyframes jo-car-drive {
  0% { transform: translateX(0); }
  18% { transform: translateX(160px); }
  72% { transform: translateX(285px); }
  86% { transform: translateX(330px) scale(1); filter: drop-shadow(0 0 5px #5be1ff); }
  94% { transform: translateX(520px) scale(.75); filter: brightness(3) drop-shadow(0 0 18px #fff); }
  100% { transform: translateX(570px) scale(.2); opacity: 0; }
}
@keyframes jo-trails { 0%, 19% { opacity: 0; transform: scaleX(.1); } 30%, 88% { opacity: .9; transform: scaleX(1); } 100% { opacity: 0; } }
@keyframes jo-road { to { background-position: 126px 55%, 0 0; } }
@keyframes jo-stars { to { transform: translateX(-18px); } }
.connection-status {
  min-height: 1.3rem;
  margin: .75rem 0 .4rem;
  font: 700 .85rem/1.3 "Courier New", monospace;
}
.connection-progress {
  height: 18px;
  padding: 2px;
  border: 2px inset #eee;
  background: #fff;
}
.connection-progress i {
  display: block;
  width: 0;
  height: 100%;
  background: repeating-linear-gradient(90deg, #000080 0 12px, transparent 12px 14px);
}
.connection-progress.is-running i { animation: jo-progress 8s steps(32, end) forwards; }
@keyframes jo-progress { to { width: 100%; } }
.connection-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: .7rem;
  color: #444;
  font-size: .72rem;
}
.connection-skip {
  min-width: 76px;
  min-height: 30px;
  border: 2px outset #fff;
  border-radius: 0;
  background: #c0c0c0;
  color: #000;
  font: 700 .78rem/1 Arial, sans-serif;
}
.connection-skip:active { border-style: inset; }
.connection-skip:focus-visible { outline: 2px dotted #000; outline-offset: -5px; }
.connection-overlay[data-reduced-motion="true"] .time-stage { display: none; }
.connection-overlay[data-reduced-motion="true"] .connection-progress.is-running i { animation-duration: 1.2s; }

.pixel-trail {
  --pixel-color: #8bcf88;
  position: fixed;
  z-index: 9999;
  width: 9px;
  height: 9px;
  border: 1px solid rgb(232 255 230 / .8);
  background: var(--pixel-color);
  box-shadow: 0 0 7px rgb(139 207 136 / .85);
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: pixel-fade .62s steps(7, end) forwards;
}
.pixel-trail::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: #f4fff3;
  box-shadow: 0 0 4px #fff;
}
@keyframes pixel-fade { to { opacity: 0; transform: translate(-50%, 14px) scale(.2) rotate(90deg); } }

@media (max-width: 650px) {
  .retro-toggle { margin-left: .125rem; }
  [data-retro="true"] .page { width: calc(100% - .5rem); padding-inline: .5rem; }
  [data-retro="true"] .site-header { align-items: flex-start; }
  [data-retro="true"] .site-header nav { gap: .4rem .7rem; }
  [data-retro="true"] .site-header nav a { font-size: .7rem; }
  [data-retro="true"] .theme-toggle,
  [data-retro="true"] .retro-toggle { margin-top: 1.55rem; }
}

@media (prefers-reduced-motion: reduce) {
  [data-retro="true"] .retro-marquee > div,
  [data-retro="true"] .hero::before,
  [data-retro="true"] .under-construction { animation: none; }
  .pixel-trail { display: none; }
}