/* Homepage-only time machine. The original shared styles and About pages stay independent. */
.time-travel {
  min-width: 0;
  --space: #090d19;
  --mono: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --era-accent: #b99aff;
  background: radial-gradient(ellipse at 50% 6%, #27203d88, transparent 43%), #090d19;
  font-size: 14px;
}
.time-travel::before {
  position: absolute;
  height: 930px;
  background-image: radial-gradient(circle, #d6d8ff8c .8px, transparent 1px), radial-gradient(circle, #a997c877 .7px, transparent 1px);
  background-size: 107px 89px, 173px 137px;
  background-position: 20px 15px, 65px 60px;
  mask-image: linear-gradient(#000, #0009 65%, transparent);
}
.time-travel button, .time-travel input { font: inherit; }
.time-travel button { cursor: pointer; }
.time-travel button:disabled { cursor: default; }
.time-travel [hidden] { display: none !important; }
.time-travel a, .time-travel button, .time-travel input { touch-action: manipulation; }
.time-travel .site-header { position: relative; grid-template-columns: auto 1fr auto; min-height: 78px; padding-inline: max(4%, calc((100% - 1320px) / 2)); background: #090d1966; border-color: #ffffff0c; backdrop-filter: none; }
.time-travel .brand { font-size: 19px; gap: 10px; }
.time-travel .brand__mark { color: #d5c0ff; border: 0; background: none; box-shadow: none; font-size: 34px; width: auto; }
.header-note { color: #8c8da1; font-size: 12px; margin-left: 22px; }
.time-travel .site-nav { gap: 12px; }
.time-travel .site-nav a { font-size: 12px; font-weight: 500; padding: 10px; }
.time-travel .site-nav .nav-time { color: #ded4f9; border: 1px solid #c9b5ff30; padding: 9px 14px; border-radius: 6px; }
.nav-time span { padding-left: 8px; }
.skip-link { position: fixed; z-index: 100; top: -80px; left: 20px; background: #fff; color: #090d19; padding: 14px; border-radius: 6px; }
.skip-link:focus { top: 12px; }
.time-machine, .era-window, .journey-footer { width: min(1240px, calc(100% - 80px)); margin-inline: auto; }
.machine-heading { position: relative; text-align: center; padding: 44px 0 35px; }
.machine-eyebrow { font: 10px var(--mono); letter-spacing: 3.2px; color: #c2b1df; margin-bottom: 12px; }
.machine-eyebrow span { display: inline-block; width: 5px; height: 5px; background: #c8a9ff; box-shadow: 0 0 9px #b688ff; margin-right: 10px; transform: rotate(45deg); vertical-align: middle; }
.time-travel h1 { display: inline-block; font-size: clamp(58px, 7.8vw, 105px); font-weight: 850; letter-spacing: -6px; line-height: 1.1; margin: 0 0 10px; color: #fbdc94; background: linear-gradient(180deg, #fff1b7 10%, #ffd085 43%, #ee91bb 78%, #b69cf2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 5px 0 #c08abc12); }
.machine-subtitle { font-size: 17px; color: #ece6f6; margin-bottom: 9px; letter-spacing: .2px; }
.time-travel .hero__intro { font-size: 12px; color: #8f8b9e; }
.orbit-doodle { position: absolute; left: 11%; top: 61px; font-family: Georgia, serif; font-size: 98px; line-height: 1; color: #bc9eee; transform: rotate(-23deg); text-shadow: 0 0 30px #c085f355; }
.travel-sticker { position: absolute; right: 3%; top: 64px; padding: 17px 20px; background: #f8e8af; color: #4f4032; text-align: left; font-size: 13px; line-height: 1.5; transform: rotate(7deg); box-shadow: 5px 6px 0 #0003; }
.travel-sticker::before { content: ""; position: absolute; width: 48px; height: 18px; background: #fff2; top: -8px; left: 31%; transform: rotate(-10deg); border: 1px solid #fff1; }
.time-console { border: 1px solid #b6a1eb2c; border-radius: 10px; background: linear-gradient(120deg, #202033cc, #101622e0); box-shadow: 0 8px 32px #0002, inset 0 1px #ffffff05; }
.console-heading, .console-footer { display: flex; justify-content: space-between; align-items: center; color: #a6a0b9; font: 9px var(--mono); letter-spacing: 1.2px; padding: 15px 23px; }
.console-heading { padding-bottom: 3px; }
.console-heading > span:last-child { color: #747287; font-size: 8px; }
.status-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #98e4b1; box-shadow: 0 0 8px #8eeaab77; margin-right: 7px; vertical-align: 2px; }
.timeline { display: grid; grid-template-columns: repeat(8, 1fr); padding: 14px 18px 4px; }
.timeline button { --node: #bc9efa; position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; background: transparent; color: #c1bdd0; border: 0; padding: 4px 0 8px; border-radius: 5px; }
.timeline button:nth-child(1) { --node: #f398a1; }
.timeline button:nth-child(2) { --node: #efc776; }
.timeline button:nth-child(3) { --node: #a7d59b; }
.timeline button:nth-child(4) { --node: #73d6cf; }
.timeline button:nth-child(6) { --node: #f2b177; }
.timeline button:nth-child(7) { --node: #82c7f2; }
.timeline button:nth-child(8) { --node: #e58ee6; }
.timeline button::before { content: ""; position: absolute; left: -50%; right: 50%; height: 1px; top: 42px; background: linear-gradient(90deg, #7e778c, var(--node)); opacity: .6; }
.timeline button:first-child::before { display: none; }
.timeline-year { font: 600 18px var(--mono); letter-spacing: .2px; }
.timeline-node { z-index: 1; width: 11px; height: 11px; border-radius: 50%; background: #151725; border: 2px solid var(--node); transition: box-shadow .2s, background .2s; }
.timeline-label { font-size: 10px; color: #8e879f; white-space: nowrap; }
.timeline button:hover .timeline-year, .timeline button[aria-pressed="true"] .timeline-year { color: var(--node); }
.timeline button[aria-pressed="true"] .timeline-node { background: var(--node); box-shadow: 0 0 0 4px #b79af426, 0 0 20px var(--node); }
.timeline button[aria-pressed="true"] .timeline-label { color: #eee7fb; }
.console-footer { padding: 10px 23px; border-top: 1px solid #ffffff08; font-family: inherit; letter-spacing: .1px; font-size: 10px; color: #827f94; }
.console-footer button { color: #b5adca; border: 0; padding: 5px; font-size: 10px; background: none; }
.console-footer button[aria-pressed="true"] { color: #a8e6c3; }
.arrival { display: flex; align-items: center; gap: 21px; padding: 31px 1px 19px; }
.arrival-date { display: flex; flex-direction: column; gap: 3px; padding-right: 21px; border-right: 1px solid #ffffff20; }
.arrival-label { font: 8px var(--mono); letter-spacing: 1.2px; color: #9890a5; }
#era-year { font: 600 32px var(--mono); letter-spacing: -1.5px; color: #d7c7f8; }
.arrival-info > div { display: flex; align-items: center; gap: 12px; margin-bottom: 5px; }
.arrival h2 { font-size: 17px; margin: 0; font-weight: 650; }
#era-tag { padding: 4px 7px; font: 8px var(--mono); letter-spacing: .8px; color: #b8a5dc; background: #a284d219; border: 1px solid #af95d826; border-radius: 3px; }
.arrival p { font-size: 11px; color: #9490a2; margin: 0; line-height: 1.5; }
#return-present { margin-left: auto; padding: 9px 12px; border: 1px solid #ffffff20; background: transparent; border-radius: 5px; color: #bcb1ce; font-size: 10px; white-space: nowrap; }
.era-window { --text: #252735; --muted: #6d6e79; --line: #e9e7ec; --surface: #faf9f7; --surface-strong: #f4f3f1; --focus: #8352c9; overflow: hidden; color: var(--text); background: var(--surface); border: 1px solid #c3aed043; border-radius: 10px; box-shadow: 0 24px 80px #0003; color-scheme: light; }
.era-chrome { display: flex; align-items: center; padding: 11px 17px; background: #eeecee; border-bottom: 1px solid #dedce3; color: #8b8596; font: 9px var(--mono); gap: 15px; }
.window-dots { display: flex; gap: 5px; }
.window-dots i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #c4bdcb; }
.window-dots i:first-child { background: #e2a8a5; }.window-dots i:nth-child(2) { background: #e4cca0; }.window-dots i:nth-child(3) { background: #a5c7af; }
.window-address { margin: auto; }.window-address > span { color: #aaa2b2; }.window-star { font-size: 14px; }
.era-topline { display: flex; align-items: center; gap: 20px; padding: 19px 27px; border-bottom: 1px solid var(--line); font-size: 10px; }
.era-brand { font-size: 18px; font-weight: 750; letter-spacing: -.5px; display: inline-flex; gap: 8px; align-items: center; }.era-brand span { font-size: 27px; color: #84738f; }
.era-topline-note { color: #99909b; }.era-topline > a:last-child { margin-left: auto; color: var(--muted); }
.era-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
[data-era="2026"] .era-layout { grid-template-columns: 195px minmax(0, 1fr); }
.guide-sidebar { display: flex; flex-direction: column; padding: 28px 15px 25px; background: #f0efed; border-right: 1px solid #e5e3e3; }
.sidebar-title { font: 8px var(--mono); letter-spacing: .9px; color: #8d8594; padding: 0 12px 16px; }.guide-sidebar > a { display: flex; align-items: center; gap: 8px; font-size: 10px; padding: 12px; border-radius: 5px; color: #746a80; }.guide-sidebar > a > span:first-child { font-size: 15px; }.guide-sidebar .sidebar-active { color: #554264; background: #e8e2ec; }.sidebar-count { margin-left: auto; font: 9px var(--mono); background: #e5e1e7; padding: 2px 5px; border-radius: 3px; }
.sidebar-bottom { margin-top: auto; padding: 54px 12px 0; }.mini-orbit { display: block; font-size: 33px; color: #a696b6; margin-bottom: 12px; }.sidebar-bottom strong { font-size: 15px; line-height: 1.5; font-weight: 500; color: #6e6176; }.sidebar-bottom p { font-size: 10px; line-height: 1.7; color: #948b9a; margin: 9px 0 25px; }.local-label { font-size: 8px; color: #867d8e; line-height: 1.8; }.local-label span { display: inline-block; height: 4px; width: 4px; border-radius: 50%; background: #70a185; margin-right: 3px; }
.era-main { min-width: 0; padding: 30px; }.guide-feature { text-align: center; padding: 1px 25px 32px; }.guide-spark { width: 44px; height: 44px; margin: 0 auto 15px; }.feature-kicker { font: 8px var(--mono); letter-spacing: 1.1px; color: #93819c; margin-bottom: 12px; }.guide-feature h2 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 500; letter-spacing: -.9px; margin-bottom: 11px; line-height: 1.2; }.guide-feature > p:not(.feature-kicker) { font-size: 11px; color: var(--muted); margin-bottom: 25px; }
.guide-form { display: flex; gap: 12px; padding: 9px; border: 1px solid #d9d4dc; border-radius: 10px; background: #fff; box-shadow: 0 3px 10px #29203005; max-width: 570px; margin: 0 auto; }.guide-form input { flex: 1; min-width: 0; padding: 7px 10px; border: 0; color: #44344b; background: none; font-size: 11px; }.guide-form input::placeholder { color: #aaa0ae; }.guide-form button { width: 32px; height: 32px; border-radius: 6px; color: #fff; font-size: 21px; background: #857092; border: 0; }.guide-suggestions { display: flex; justify-content: center; gap: 7px; flex-wrap: wrap; margin-top: 12px; }.guide-suggestions button { font-size: 9px; border: 1px solid #e5e1e7; border-radius: 20px; color: #7a6d83; padding: 7px 10px; background: transparent; }.guide-suggestions button:hover { background: #ece5f1; }.guide-response { text-align: left; padding: 15px 20px; background: #f0ebf4; color: #584565; border: 1px solid #e1d8e7; border-radius: 9px; font-size: 12px; line-height: 1.7; margin: 15px auto 0; max-width: 570px; }.guide-response a { text-decoration: underline; font-weight: 600; }.guide-response p:last-child { margin-bottom: 0; }
.games-heading { display: flex; justify-content: space-between; align-items: end; margin: 4px 0 18px; gap: 15px; }.section-kicker { font: 8px var(--mono); color: #988b9f; letter-spacing: 1.1px; }.games-heading h2 { margin: 7px 0 0; font-size: 17px; font-weight: 600; letter-spacing: -.3px; }.games-count { font-size: 9px; white-space: nowrap; color: var(--muted); padding-bottom: 1px; }
.time-travel .app-grid { width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; scroll-margin-top: 24px; }
.time-travel .app-card { border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 3px 8px #352b4004; background: var(--surface); align-content: start; }
.time-travel .app-card:hover { transform: translateY(-3px); box-shadow: 0 9px 22px #25173112; }
.time-travel .app-card__media { padding: 0; aspect-ratio: 1.38; background: #eae4eb; }.time-travel .app-card__media img { object-fit: cover; border-radius: 0; }.time-travel .app-card__media::after { display: none; }
.time-travel .app-card__body { padding: 13px 11px; min-height: 167px; gap: 13px; align-content: space-between; }.time-travel .app-card .app-card__type { font: 7px var(--mono); letter-spacing: .7px; text-transform: uppercase; margin-bottom: 6px; color: var(--muted); }.time-travel .app-card h2 { font-size: 15px; font-weight: 650; margin-bottom: 6px; }.time-travel .app-card p { font-size: 10px; line-height: 1.6; color: var(--muted); }
.time-travel .app-card__actions { gap: 8px; align-items: center; justify-content: space-between; }.time-travel .app-card__button { min-width: 0; min-height: 32px; width: auto; padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-strong); color: var(--text); box-shadow: none; font-size: 9px; font-weight: 500; gap: 4px; }.time-travel .app-card__button--secondary { padding: 5px 0; border: 0; color: var(--muted); background: transparent; }.time-travel .button-icon { transform: scale(.6); margin-right: -3px; flex-basis: 14px; }
.time-travel .about { padding: 23px 30px; background: var(--surface-strong); }.time-travel .about__inner { width: 100%; display: grid; grid-template-columns: 1fr 1fr; column-gap: 35px; }.time-travel .about .eyebrow { grid-column: 1; color: var(--muted); font: 8px var(--mono); letter-spacing: 1px; margin-bottom: 8px; }.time-travel .about h2 { grid-column: 1; font-size: 17px; margin: 0; max-width: 280px; font-weight: 550; line-height: 1.4; }.time-travel .about p:last-child { grid-column: 2; grid-row: 1 / 3; font-size: 10px; line-height: 1.8; margin: 0; max-width: 510px; align-self: center; }
.journey-footer { display: flex; justify-content: space-between; color: #827a90; padding: 18px 1px; font: 8px var(--mono); letter-spacing: .7px; }.journey-footer a { font-family: inherit; letter-spacing: 0; color: #b7aaca; }.journey-footer .status-dot { width: 4px; height: 4px; vertical-align: 1px; }.time-travel .site-footer { min-height: 70px; padding: 14px 20px 25px; color: #696277; font-size: 10px; }.time-travel .footer-mark { width: 22px; height: 22px; border: 0; background: none; color: #b29acb; font-size: 12px; box-shadow: none; }
.era-feature { position: relative; isolation: isolate; min-height: 260px; overflow: hidden; border-radius: 7px; padding: 40px; margin-bottom: 30px; background: #cee6ef; }.era-feature > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }.era-feature h2 { font-size: clamp(26px, 3.2vw, 43px); letter-spacing: -1px; line-height: 1.1; margin-bottom: 12px; }.era-feature p { font-size: 12px; line-height: 1.65; }.era-feature .feature-kicker { font-size: 8px; }.era-feature > div { max-width: 72%; }
.retro-menu { display: flex; padding: 5px 12px; gap: 18px; background: #c0c0c0; border-bottom: 2px groove white; color: #151515; font: 13px "Times New Roman", serif; }.retro-menu span::first-letter { text-decoration: underline; }
.guestbook { padding: 25px 0 0; margin-top: 25px; border-top: 2px groove #eee; font-family: inherit; }.guestbook-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.guestbook h2 { font-size: 22px; margin-bottom: 12px; }.guestbook p { font-size: 12px; line-height: 1.6; }.guestbook form { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }.guestbook form > div { display: grid; gap: 5px; flex: 1; }.guestbook form > div:nth-child(2) { flex: 2; }.guestbook input { min-width: 0; width: 100%; padding: 9px; border: 2px inset #ddd; border-radius: 0; background: #fff; color: #111; }.guestbook label { font-size: 12px; }.guestbook button { padding: 9px 12px; border: 2px outset #ddd; background: #d0d0d0; color: #111; }.guestbook ul { padding-left: 20px; }.guestbook li { margin-block: 12px; overflow-wrap: anywhere; }.guestbook li p { margin: 3px 0; }.web-badge, .retro-badges span { font: bold 9px var(--mono); border: 2px outset #fff; color: #fff; background: #000080; padding: 5px 8px; }.retro-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }.retro-badges span:nth-child(2) { background: #135e4f; }.retro-badges span:nth-child(3) { background: #734159; }
/* 1995: a hand-built homepage in a chunky desktop browser. */
[data-era="1995"] .era-window { --text: #111; --muted: #363636; --surface: #c8c8c8; --surface-strong: #bbb; --line: #888; --focus: #000080; font-family: "Times New Roman", Times, serif; border: 4px outset #d9d9d9; border-radius: 0; }
[data-era="1995"] .era-chrome { color: white; background: #000080; border: 0; font-weight: bold; padding: 7px; }.time-travel[data-era="1995"] .window-address > span { color: #ddd; }[data-era="1995"] .window-dots i { border-radius: 0; background: #c0c0c0; border: 1px outset white; }
[data-era="1995"] .era-topline { padding: 14px 25px; border-bottom: 2px groove white; }[data-era="1995"] .era-brand { font-family: "Times New Roman", serif; color: #000080; }[data-era="1995"] .era-brand span { color: #d52877; }[data-era="1995"] .era-topline-note { color: #444; }[data-era="1995"] .era-topline > a:last-child { color: #00e; text-decoration: underline; }
.feature-1995 { background: #090e28; color: #fff8c7; text-align: center; padding: 30px; border: 3px inset #eee; border-radius: 0; min-height: 235px; }.feature-1995 > img { object-position: center; opacity: .75; }.feature-1995 > div { max-width: 100%; }.feature-1995 h2 { font-family: "Times New Roman", serif; font-size: 39px; text-shadow: 2px 2px #76499a; letter-spacing: 0; }.feature-1995 .retro-welcome { font: 16px "Courier New", monospace; color: #78ffff; }.construction { display: inline-block; padding: 5px 10px; color: #000; background: repeating-linear-gradient(120deg, #ffe356 0 12px, #f6b93e 12px 24px); font: bold 10px var(--mono); }
.time-travel[data-era="1995"] .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 2px groove white; }.time-travel[data-era="1995"] .app-card { grid-template-columns: 82px minmax(0, 1fr); border-radius: 0; background: #d0d0d0; border: 1px solid #999; padding: 16px; box-shadow: none; transform: none; align-items: start; }.time-travel[data-era="1995"] .app-card__media { aspect-ratio: 1; border: 2px inset white; }.time-travel[data-era="1995"] .app-card__body { min-height: 0; padding: 0 0 0 15px; }.time-travel[data-era="1995"] .app-card h2 { font-size: 22px; color: #00e; text-decoration: underline; }.time-travel[data-era="1995"] .app-card p { font-size: 13px; }.time-travel[data-era="1995"] .app-card__button { font: 13px "Times New Roman", serif; color: #00e; background: transparent; border: 0; text-decoration: underline; padding: 0; }.time-travel[data-era="1995"] .about { border-top: 3px groove white; }
/* 2000: glossy tabs, loud colours, and a browser-local guestbook. */
[data-era="2000"] .era-window { --text: #152e67; --muted: #405983; --surface: #fff; --surface-strong: #e4f1ff; --line: #b6d4fa; --focus: #9434b6; border: 3px solid #61abf6; border-radius: 7px; font-family: Verdana, Arial, sans-serif; }[data-era="2000"] .era-chrome { background: linear-gradient(#4ea8fa, #1262cb); color: white; border: 0; }[data-era="2000"] .window-address > span { color: #d6eaff; }[data-era="2000"] .era-topline { background: linear-gradient(#fff, #dfefff); }[data-era="2000"] .era-brand { font-style: italic; color: #2b6ada; text-shadow: 1px 2px #fff; font-size: 24px; }
.portal-tabs { display: flex; align-items: center; gap: 3px; background: linear-gradient(#499efe, #1763ce); padding: 5px 15px 0; color: #fff; }.portal-tabs a { padding: 11px 23px; border-radius: 6px 6px 0 0; font-weight: bold; font-size: 11px; }.portal-tabs a:first-child { background: #fff; color: #236aca; }.portal-tabs span { margin-left: auto; font-size: 10px; color: #ffffa2; padding-right: 10px; }
.feature-2000 { min-height: 280px; padding: 30px 40px; border: 2px solid #b2dbff; color: #194ba0; }.feature-2000 h2 { text-shadow: 2px 3px #fff; font-weight: 900; font-size: 47px; }.feature-2000 h2 em { color: #dc4086; font-style: normal; }.feature-2000 p { color: #225288; font-weight: bold; }.new-badge { display: inline-block; color: #a44b03; background: #ffe258; border: 2px solid #fff; padding: 4px 7px; box-shadow: 2px 2px #418edd; transform: rotate(-8deg); font-weight: 900; font-size: 12px; margin-bottom: 9px; }.time-travel[data-era="2000"] .app-card { border: 2px solid #aaccfa; border-radius: 6px; box-shadow: 3px 3px #d9e9ff; }.time-travel[data-era="2000"] .app-card__button { color: white; border: 1px solid #2860c4; background: linear-gradient(#659eef, #2661c9); font-weight: bold; }.time-travel[data-era="2000"] .app-card__button--secondary { color: #255fc0; background: none; border: 0; }.time-travel[data-era="2000"] .guestbook { background: #fff9da; padding: 20px; border: 1px solid #efd675; border-radius: 5px; }
/* 2010: generous white space, a flat landscape, and colorful tiles. */
[data-era="2010"] .era-window { --text: #17383e; --muted: #597376; --surface: #fff; --surface-strong: #f1f7f6; --line: #dce9e6; --focus: #08705d; }[data-era="2010"] .era-brand span { color: #33937d; }.feature-2010 { background: #E1F0EF; color: #193e41; }.feature-2010 .feature-kicker { color: #487b73; }.feature-2010 > div { max-width: 58%; }.time-travel[data-era="2010"] .app-card__button:not(.app-card__button--secondary) { background: #268475; color: #fff; border-color: #268475; }
/* 2020: a pixel universe, with a real light-mode switch. */
[data-era="2020"] .era-window, [data-era="2030"] .era-window, [data-era="2040"] .era-window, [data-era="2077"] .era-window { --text: #eef0ff; --muted: #a0a7c4; --surface: #101222; --surface-strong: #171b30; --line: #2a2d46; --focus: #dfb7ff; color-scheme: dark; }[data-era="2020"] .era-chrome, [data-era="2030"] .era-chrome, [data-era="2040"] .era-chrome, [data-era="2077"] .era-chrome { background: #171929; border-color: #2a2b40; }[data-era="2020"] .era-brand span { color: #b993fa; }.feature-2020 { background: #120b32; color: #fff; border: 1px solid #423064; min-height: 280px; }.feature-2020 > div { max-width: 58%; }.feature-2020 .feature-kicker { color: #cbb1ee; }#theme-toggle { position: absolute; right: 15px; bottom: 15px; border: 1px solid #ffffff33; background: #0e0a20bb; color: #f0e3ff; border-radius: 30px; padding: 8px 12px; font-size: 10px; }.time-travel[data-era="2020"] .app-card__button:not(.app-card__button--secondary) { background: #784fc1; color: white; border-color: #9873d0; }[data-era="2020"][data-mode="light"] .era-window { --text: #25213c; --muted: #716786; --surface: #faf8ff; --surface-strong: #efebf7; --line: #ded7ed; --focus: #7145b7; color-scheme: light; }[data-era="2020"][data-mode="light"] .era-chrome { background: #e8e2ef; border-color: #d6cbe4; }
/* Future eras keep the same crawlable collection, inside speculative worlds. */
.feature-future { color: white; min-height: 360px; display: flex; align-items: center; background-size: cover; background-position: center; border: 1px solid #78659166; padding: 45px; }.feature-future::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #070a1bea, #070a1b96 48%, #070a1b05); }.feature-future .feature-kicker { color: #cdc5ea; }.feature-future h2 { font-size: clamp(27px, 3.7vw, 48px); }.feature-future p { color: #d3d3e3; }.feature-future button, .future-link { display: inline-block; background: #17182cb3; border: 1px solid #d6b5ff; padding: 11px 17px; color: #f4e9ff; font: 10px var(--mono); border-radius: 4px; }
.feature-2030 { background-image: url("img/eras/2030.webp"); background-color: #392346; }.arcade-controls { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; background: #17162c; border: 1px solid #605088; padding: 13px 15px; margin-bottom: 22px; font: 10px var(--mono); color: #bcb4d1; border-radius: 5px; }.arcade-controls kbd { background: #302840; border: 1px solid #574468; border-bottom-width: 3px; padding: 3px 5px; margin-right: 3px; border-radius: 3px; }.arcade-controls a { background: #e4bd69; color: #281e29; padding: 9px 12px; font-weight: bold; border-radius: 3px; }#arcade-selection { color: #edc97e; }.time-travel[data-era="2030"] .app-card { border: 3px solid #554573; border-radius: 12px 12px 3px 3px; box-shadow: 0 7px 0 #372848; background: #171326; }.time-travel[data-era="2030"] .app-card__media { margin: 12px 10px 0; border: 3px solid #070811; border-radius: 7px; }.time-travel[data-era="2030"] .app-card[data-selected="true"] { border-color: #f6cc79; box-shadow: 0 7px 0 #846034, 0 0 28px #eeac342a; }.arcade-select { width: 100%; color: #dab9ff; background: #2e2342; border: 1px solid #66507c; padding: 8px; border-radius: 3px; font: 9px var(--mono) !important; margin-top: 8px; }.arcade-select[aria-pressed="true"] { color: #ffdf9e; border-color: #c19b51; }
.feature-2040 { min-height: 390px; background-image: url("img/eras/2040.webp"); background-color: #06232e; background-position: center; }.feature-2040::before { background: linear-gradient(90deg, #03151ceb, #041c2399 55%, #03151c10); }[data-era="2040"] .era-window { --surface: #071b22; --surface-strong: #0c252e; --line: #1c3f48; --muted: #93b9bf; --text: #e2f6f8; border-color: #2c7585; }[data-era="2040"] .era-brand span { color: #76dfed; }.feature-2040 h2 { font-weight: 400; }.feature-2040 button { color: #9bedf5; border-color: #56c3d4; box-shadow: 0 0 16px #34d6ff22; border-radius: 30px; padding-inline: 25px; }.feature-2040 progress { display: block; width: 230px; max-width: 100%; height: 4px; accent-color: #79deed; margin: 18px 0 10px; }#connection-status { font-size: 10px; max-width: 330px; margin-bottom: 0; }
.feature-2077 { min-height: 400px; background-image: url("img/eras/2077.webp"); background-color: #29204b; }[data-era="2077"] .era-window { --surface: #151026; --surface-strong: #1d1532; --line: #462756; --muted: #b7a1c9; border-color: #8c4dab; }.feature-2077 h2 { text-shadow: 2px 0 #a4319244, -2px 0 #75e8ff55; }.memory-fragments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }.memory-fragments button { border: 1px solid #bba0f366; color: #d6a8ff; background: #150b2b99; border-radius: 0; padding: 9px 12px; }.memory-fragments button[aria-pressed="true"] { border-color: #83f2ed; color: #83f2ed; box-shadow: inset 0 0 16px #49e8ce22; }#fragment-status { font: 9px var(--mono); line-height: 1.7; margin: 13px 0 0; color: #d1b4e8; }.time-travel.is-immersive .site-header, .time-travel.is-immersive .machine-heading { display: none; }.time-travel.is-immersive .time-machine { padding-top: 20px; }.time-travel.is-immersive .era-window { width: calc(100% - 32px); }.time-travel.is-immersive .feature-2077 { min-height: 65vh; }
.no-script { text-align: center; color: #dbc7f5; font-size: 12px; line-height: 1.7; }
.guide-links { display: flex; gap: 10px 18px; flex-wrap: wrap; }
.guide-feature > p.guide-disclosure { font-size: 10px; color: #786b80; margin: 13px 0 0; }
.orbit-doodle { width: 100px; height: 100px; }
.guide-form input { font-size: 13px; }
.guide-suggestions button { font-size: 11px; }
.guide-sidebar > a { font-size: 12px; }
.guide-feature > p:not(.feature-kicker):not(.guide-disclosure) { font-size: 13px; }
.time-travel .app-card p { font-size: 12px; }
.time-travel .app-card .app-card__type { font-size: 9px; }
.time-travel .app-card__button { font-size: 11px; min-height: 36px; }
.time-travel .app-card h2 { font-size: 17px; }
.section-kicker { color: #786a81; }
.feature-kicker { color: #796384; }
.games-count { font-size: 11px; }
.time-travel .about p:last-child { font-size: 12px; }
@media (min-width: 1500px) { .machine-heading { padding-top: 56px; padding-bottom: 44px; } }
@media (max-width: 1050px) {
  .time-machine, .era-window, .journey-footer { width: calc(100% - 48px); }.header-note { display: none; }.time-travel .site-header { grid-template-columns: 1fr auto; }.orbit-doodle { left: 5%; width: 78px; height: 78px; top: 70px; }.travel-sticker { right: 1%; font-size: 11px; padding: 12px 15px; }
  [data-era="2026"] .era-layout { grid-template-columns: 160px minmax(0, 1fr); }.guide-sidebar { padding-inline: 9px; }.sidebar-title { font-size: 7px; padding-inline: 7px; }.guide-sidebar > a { padding-inline: 7px; font-size: 9px; }.era-main { padding: 24px; }.guide-feature { padding-inline: 0; }.time-travel .app-grid { gap: 11px; }.time-travel[data-era="2026"] .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.time-travel[data-era="2026"] .app-card__media { aspect-ratio: 1.8; }.time-travel .app-card__body { padding: 11px; }
  .feature-1995 > img { opacity: .5; }.arcade-hint { display: none; }
}
@media (max-width: 760px) {
  .time-machine, .era-window, .journey-footer { width: calc(100% - 32px); }.time-travel .site-header { padding-inline: 18px; min-height: 66px; }.time-travel .brand { font-size: 16px; }.time-travel .site-nav { gap: 3px; }.time-travel .site-nav a { font-size: 10px; padding: 8px; }.time-travel .site-nav .nav-time { padding: 7px 9px; }
  .machine-heading { padding: 32px 0 27px; }.time-travel h1 { font-size: 74px; letter-spacing: -4px; }.machine-eyebrow { font-size: 8px; letter-spacing: 2px; }.machine-subtitle { font-size: 14px; }.time-travel .hero__intro { font-size: 10px; max-width: 280px; }.orbit-doodle { font-size: 48px; left: 1%; top: 90px; }.travel-sticker { display: none; }
  .console-heading { padding: 13px 15px 3px; font-size: 8px; }.console-heading > span:last-child { font-size: 7px; }.timeline { padding-inline: 7px; }.timeline-year { font-size: 14px; }.timeline-label { font-size: 8px; white-space: normal; line-height: 1.3; max-width: 54px; min-height: 21px; }.timeline button { gap: 11px; }.timeline button::before { top: 36px; }.timeline-node { width: 9px; height: 9px; }.console-footer { padding-inline: 14px; font-size: 8px; }.console-footer button { white-space: nowrap; font-size: 9px; }
  .arrival { gap: 13px; padding-top: 23px; }.arrival-date { padding-right: 13px; }.arrival-label { font-size: 7px; letter-spacing: .4px; }#era-year { font-size: 27px; }.arrival h2 { font-size: 15px; }#era-tag { font-size: 7px; }.arrival-info > div { gap: 8px; flex-wrap: wrap; }.arrival p { font-size: 10px; }#return-present { padding: 7px; font-size: 9px; }
  [data-era="2026"] .era-layout { grid-template-columns: 1fr; }.guide-sidebar { display: none; }.era-topline { padding: 14px 20px; }.era-topline-note { display: none; }.era-brand { font-size: 17px; }.era-main { padding: 22px; }.guide-feature { padding: 2px 0 28px; }.guide-feature h2 { font-size: 29px; }.guide-feature .feature-kicker { font-size: 7px; }.time-travel .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }.time-travel .app-card__body { min-height: 151px; }.time-travel .app-card__media { aspect-ratio: 1.5; }.time-travel .app-card p { font-size: 11px; }.time-travel .app-card h2 { font-size: 17px; }.time-travel .app-card .app-card__type { font-size: 8px; }.time-travel .app-card__button { font-size: 10px; }
  .time-travel .about { padding: 22px; }.time-travel .about__inner { gap: 10px 20px; }.time-travel .about h2 { font-size: 15px; }.time-travel .about p:last-child { font-size: 9px; }.games-heading h2 { font-size: 16px; }.games-count { font-size: 8px; }
  .era-feature { padding: 29px 25px; min-height: 240px; }.era-feature h2 { font-size: 33px; }.era-feature > div { max-width: 85%; }.feature-1995 > div { max-width: 100%; }.era-feature p { font-size: 11px; }.feature-2020 > img { object-position: 65% center; }.feature-2020::after { content: ""; position: absolute; z-index: -1; inset: 0; background: #0d092333; }.feature-2020 { padding-bottom: 60px; }.feature-future { min-height: 330px; }.feature-2040, .feature-2077 { min-height: 390px; }.feature-future::before { background: linear-gradient(90deg, #070a1be6, #070a1b65); }
  .time-travel[data-era="1995"] .app-card { grid-template-columns: 1fr; padding: 12px; gap: 12px; }.time-travel[data-era="1995"] .app-card__media { width: 70px; }.time-travel[data-era="1995"] .app-card__body { padding: 0; min-height: 156px; }.guestbook form > div { flex-basis: 100%; }.portal-tabs a { padding: 11px 14px; }.portal-tabs span { display: none; }.guestbook-heading { align-items: start; }.guestbook h2 { font-size: 20px; }.web-badge { white-space: nowrap; font-size: 7px; }.arcade-controls { font-size: 9px; }.journey-footer { font-size: 7px; letter-spacing: .2px; }
}
@media (max-width: 440px) {
  .time-travel .site-header { padding-inline: 12px; gap: 4px; }.time-travel .brand { gap: 5px; font-size: 14px; }.time-travel .brand__mark { font-size: 23px; }.time-travel .site-nav { gap: 0; }.time-travel .site-nav a { padding-inline: 5px; font-size: 10px; }.nav-time span { padding-left: 2px; }.time-machine, .era-window, .journey-footer { width: calc(100% - 24px); }.time-travel h1 { font-size: clamp(51px, 16vw, 62px); letter-spacing: -3.5px; }.orbit-doodle { display: none; }.machine-eyebrow { letter-spacing: 1.5px; font-size: 7px; }.machine-subtitle { font-size: 13px; }
  .console-heading > span:last-child { display: none; }.timeline { padding-inline: 5px; }.timeline-year { font-size: 12px; }.timeline-label { font-size: 7px; max-width: 39px; }.timeline button::before { top: 34px; }.console-footer { gap: 10px; }.console-footer > span { max-width: 210px; line-height: 1.5; }.arrival { flex-wrap: wrap; gap: 11px; }.arrival-info { flex: 1; min-width: 160px; }#return-present { margin: 0 0 0 auto; padding: 6px 9px; }[data-era="2026"] #return-present { display: none; }.arrival p { font-size: 9px; }#era-tag { letter-spacing: .2px; font-size: 6px; }
  .window-address > span { display: none; }.era-chrome { padding: 9px 12px; }.era-topline { padding: 12px 14px; gap: 10px; }.era-topline > a:last-child { font-size: 8px; }.era-brand { font-size: 15px; }.era-brand span { font-size: 22px; }.era-main { padding: 19px 14px; }.guide-feature h2 { font-size: 27px; }.guide-feature > p:not(.feature-kicker) { font-size: 10px; line-height: 1.7; max-width: 230px; margin-inline: auto; }.guide-suggestions { gap: 5px; }.guide-suggestions button { font-size: 8px; padding: 7px 8px; }.guide-form input { font-size: 10px; padding-inline: 5px; }.guide-form { gap: 5px; }.guide-spark { width: 38px; height: 38px; }.games-heading { align-items: start; gap: 8px; }.games-heading h2 { font-size: 15px; max-width: 200px; line-height: 1.3; }.games-count { white-space: normal; max-width: 65px; font-size: 8px; text-align: right; line-height: 1.6; padding-top: 14px; }.time-travel .app-grid { gap: 10px; }.time-travel .app-card__body { padding: 11px 9px; min-height: 168px; }.time-travel .app-card h2 { font-size: 15px; }.time-travel .app-card p { font-size: 10px; }.time-travel .app-card__actions { gap: 3px; }.time-travel .app-card__button { font-size: 8px; gap: 1px; padding-inline: 5px; }.time-travel .app-card__button--secondary { padding-inline: 0; }.time-travel .button-icon { flex-basis: 12px; }
  .time-travel .about { padding: 19px 14px; }.time-travel .about__inner { display: block; }.time-travel .about h2 { max-width: none; margin-bottom: 10px; }.time-travel .about p:last-child { font-size: 10px; }.journey-footer { gap: 18px; line-height: 1.7; }.journey-footer > span { max-width: 190px; }.journey-footer a { white-space: nowrap; }
  .era-feature { padding: 24px 18px; margin-bottom: 24px; }.era-feature h2 { font-size: 29px; }.era-feature > div { max-width: 100%; }.era-feature .feature-kicker { font-size: 7px; }.feature-1995 h2 { font-size: 30px; }.feature-1995 .retro-welcome { font-size: 12px; }.construction { font-size: 8px; }.feature-2000 h2 { font-size: 35px; }.feature-2020 { padding-bottom: 55px; }.feature-2040, .feature-2077 { min-height: 410px; }.memory-fragments { gap: 5px; }.memory-fragments button { padding: 9px 7px; font-size: 9px; }.portal-tabs { padding-inline: 7px; }.portal-tabs a { padding: 10px 12px; font-size: 10px; }.time-travel[data-era="2000"] .guestbook { padding: 14px; }.guestbook-heading { flex-wrap: wrap; }.guestbook-heading .web-badge { margin-bottom: 10px; }.time-travel.is-immersive .era-window { width: calc(100% - 16px); }
}
@media (prefers-reduced-motion: reduce) { .time-travel *, .time-travel *::before, .time-travel *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; } }

/* Each era is the website itself. The time machine is a small utility bar. */
.time-travel { background: #faf9f7; }
.time-travel::before { display: none; }
.time-travel .time-machine { position: sticky; top: 0; z-index: 30; width: 100%; margin: 0; padding: 0; }
.time-travel .time-console { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 3px 22px; border: 0; border-bottom: 1px solid #b6adbf; border-radius: 0; background: #eeeaf1; box-shadow: none; color: #51465c; }
.time-travel .console-heading { padding: 0; color: #65566f; font-size: 9px; letter-spacing: 1px; white-space: nowrap; }
.time-travel .timeline { display: flex; justify-content: center; gap: 4px; padding: 0; }
.time-travel .timeline button { display: block; min-width: 45px; padding: 7px 9px; border: 1px solid transparent; color: #665872; }
.time-travel .timeline button::before, .time-travel .timeline-node { display: none; }
.time-travel .timeline-year { font-size: 13px; font-weight: 500; }
.time-travel .timeline-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.time-travel .timeline button:hover { background: #dcd4e5; }
.time-travel .timeline button:hover .timeline-year { color: #463150; }
.time-travel .timeline button[aria-pressed="true"] { background: #665275; border-color: #665275; }
.time-travel .timeline button[aria-pressed="true"] .timeline-year { color: #fff; }
.time-travel .console-footer { padding: 0; border: 0; display: flex; gap: 12px; }
.time-travel .console-footer button { font-size: 10px; color: #65566f; white-space: nowrap; }
.time-travel .console-footer #return-present { border: 0; padding: 5px; margin: 0; color: #51465c; }
.time-travel[data-era="2026"] #return-present { display: none; }
.time-travel .arrival { padding: 0; border: 0; margin: -1px; }
.time-travel .era-window { width: 100%; min-height: calc(100svh - 44px); margin: 0; border: 0; border-radius: 0; box-shadow: none; overflow: clip; }
.time-travel .era-topline { min-height: 70px; padding: 16px 3%; gap: 22px; }
.time-travel .era-topline h1 { margin: 0; padding: 0; font-size: 25px; line-height: 1; letter-spacing: -.6px; filter: none; background: none; -webkit-text-fill-color: currentColor; color: var(--text); }
.time-travel .era-brand { color: inherit; font-size: inherit; font-weight: 750; }
.modern-wordmark { display: inline-flex; gap: 8px; align-items: center; }
.time-travel .era-brand .modern-wordmark { color: inherit; font-size: inherit; }
.time-travel .era-topline #site-nav { display: flex; gap: 24px; margin-left: auto; align-items: center; font-size: 13px; }
.site-intro { font-size: 13px; color: var(--muted); margin: 0; padding: 14px 3% 0; }
.time-travel .era-main { padding: 28px 3%; }
.time-travel .era-feature { min-height: clamp(260px, 34vh, 450px); border-radius: 0; margin-bottom: 28px; }
.time-travel .feature-future { min-height: clamp(360px, 51vh, 680px); }
.time-travel .guide-feature { padding-top: 35px; padding-bottom: 38px; }
.time-travel .guide-feature h2 { font-size: clamp(28px, 3vw, 44px); }
.time-travel .guide-form { max-width: 710px; }
.time-travel .guide-form input { min-height: 40px; font-size: 15px; }
.time-travel .guide-form button { width: 40px; height: 40px; }
.time-travel .guide-sidebar { padding-top: 40px; }
.time-travel .app-card__media picture { display: block; width: 100%; height: 100%; }
.time-travel .about { padding: 28px 3%; }
.time-travel .site-footer { background: #efebf1; color: #73647b; }
.time-travel .no-script { margin: 0; padding: 8px; background: #fff; color: #544265; }
.retro-bracket, .retro-about-me, .retro-action, .retro-games-heading { display: none; }
.retro-footer { text-align: center; }
.time-travel :is(#apps, #about, #guestbook-form, #cool-sites, #guide-form, #arcade-controls) { scroll-margin-top: 60px; }
.guestbook textarea { resize: vertical; min-width: 0; width: 100%; padding: 9px; border: 2px inset #ddd; background: white; color: #111; font: inherit; }
.guestbook time { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.time-travel.is-immersive .time-machine { padding: 0; }
.time-travel.is-immersive .era-window { width: 100%; }
.time-travel.is-immersive .era-topline, .time-travel.is-immersive .site-intro { display: none; }
.time-travel.is-immersive .feature-2077 { min-height: 80svh; }

/* 1995: TABLE, CENTER, FONT, HR, BGCOLOR, GIFs, and optimism. */
.time-travel[data-era="1995"] { background: #c0c0c0; color: #000; font-family: "Times New Roman", Times, serif; font-size: 16px; }
[data-era="1995"] .time-console { min-height: 35px; padding: 1px 12px; gap: 10px; background: #c0c0c0; border-bottom: 2px groove white; }
[data-era="1995"] .console-heading, [data-era="1995"] .console-footer button { color: #333; font-family: Arial, sans-serif; }
[data-era="1995"] .timeline button { border-radius: 0; min-width: 40px; padding: 3px 7px; }
[data-era="1995"] .timeline-year { font: 12px "Courier New", monospace; }
[data-era="1995"] .timeline button[aria-pressed="true"] { background: #000080; border: 2px inset #eee; }
[data-era="1995"] .timeline button:not([aria-pressed="true"]) .timeline-year { color: #000080; }
.time-travel[data-era="1995"] .era-window { --surface: #c0c0c0; --surface-strong: #c0c0c0; --line: #999; --text: #000; --muted: #222; padding: 0 12px; border: 0; background: #c0c0c0; }
.time-travel[data-era="1995"] .era-topline { min-height: 67px; padding: 11px 3px 8px; gap: 18px; border: 0; }
[data-era="1995"] .modern-wordmark, [data-era="1995"] .era-topline-note { display: none; }
[data-era="1995"] .retro-wordmark { width: 267px; height: auto; image-rendering: pixelated; }
.time-travel[data-era="1995"] .era-topline #site-nav { gap: 12px; font: 16px "Times New Roman", serif; flex-wrap: wrap; justify-content: flex-end; }
[data-era="1995"] .retro-bracket, [data-era="1995"] .retro-about-me, [data-era="1995"] .retro-action, [data-era="1995"] .retro-games-heading { display: inline; }
[data-era="1995"] .modern-action, [data-era="1995"] .button-icon, [data-era="1995"] .section-kicker, [data-era="1995"] .games-count, [data-era="1995"] .modern-games-heading { display: none; }
.time-travel[data-era="1995"] a:link { color: #0000ee; text-decoration: underline; }
.time-travel[data-era="1995"] a:visited { color: #551a8b; }
.time-travel[data-era="1995"] a:active { color: #ff0000; }
.time-travel[data-era="1995"] .site-intro { padding: 0 0 8px; font: 16px "Times New Roman", serif; text-align: center; color: #000; }
.time-travel[data-era="1995"] .era-main { padding: 0; }
.time-travel[data-era="1995"] .feature-1995 { position: relative; display: flex; justify-content: space-around; align-items: center; gap: 12px; min-height: 180px; padding: 14px 12px; margin: 0; border: 1px solid #777; border-radius: 0; background: #00001e url("img/eras/1995/stars.gif") repeat; text-align: center; overflow: hidden; }
.time-travel[data-era="1995"] .feature-1995 > img { position: static; inset: auto; z-index: auto; opacity: 1; object-fit: contain; image-rendering: pixelated; }
.time-travel[data-era="1995"] .feature-1995 .retro-globe { width: 123px; height: 102px; transform: rotate(-8deg); }
.time-travel[data-era="1995"] .feature-1995 .retro-star { width: 72px; height: 72px; margin-right: 20px; align-self: flex-start; margin-top: 19px; }
.time-travel[data-era="1995"] .feature-1995 .retro-welcome-copy { max-width: none; }
.time-travel[data-era="1995"] .feature-1995 h2 { font: bold clamp(29px, 3.3vw, 46px) "Times New Roman", serif; color: #ffffaa; letter-spacing: 0; text-shadow: 2px 2px #cc00cc; margin: 4px 0 7px; }
.time-travel[data-era="1995"] .feature-1995 .retro-welcome { font: bold 17px "Courier New", monospace; letter-spacing: 2px; color: #33ffff; margin: 0; }
.time-travel[data-era="1995"] .feature-1995 p { font: 16px "Courier New", monospace; color: #fff; line-height: 1.2; margin: 7px 0; }
[data-era="1995"] .feature-1995 strong { color: #ff0080; font-size: 23px; }
.construction-gif { width: 194px; height: 34px; margin: 10px auto 0; image-rendering: pixelated; }
.retro-bulletin { display: flex; align-items: center; gap: 16px; padding: 7px 0; border-bottom: 3px ridge #eee; }
.retro-bulletin > p { margin: 0; flex: 1; overflow: hidden; font: bold 14px "Courier New", monospace; color: #800080; }
.retro-bulletin > p span { display: inline-block; white-space: nowrap; animation: retro-marquee 24s linear infinite; }
@keyframes retro-marquee { from { transform: translateX(45vw); } to { transform: translateX(-100%); } }
#retro-motion-toggle { font: 11px Arial, sans-serif; padding: 4px 6px; color: #111; background: #c0c0c0; border: 2px outset #eee; border-radius: 0; }
[data-retro-paused="true"] .retro-bulletin > p span { animation: none; white-space: normal; }
.time-travel[data-era="1995"] .games-heading { display: block; margin: 12px 0 0; padding: 4px; background: #fff3ab; border: 2px ridge #eee; text-align: center; }
.time-travel[data-era="1995"] .games-heading h2 { font: bold 22px "Courier New", monospace; color: #000080; margin: 0; letter-spacing: 1px; }
.time-travel[data-era="1995"] .app-grid { display: block; width: 100%; border: 2px groove #eee; border-top: 0; }
.time-travel[data-era="1995"] .app-card { display: grid; grid-template-columns: 164px minmax(160px, 1fr) minmax(230px, 1.65fr) minmax(150px, .8fr); align-items: center; gap: 0; min-height: 84px; padding: 0; background: #c0c0c0; border: 0; border-bottom: 2px groove #eee; box-shadow: none; transform: none; border-radius: 0; overflow: visible; }
.time-travel[data-era="1995"] .app-card:last-child { border-bottom: 0; }
.time-travel[data-era="1995"] .app-card__body, .time-travel[data-era="1995"] .app-card__body > div:first-child { display: contents; }
.time-travel[data-era="1995"] .app-card .app-card__type { display: none; }
.time-travel[data-era="1995"] .app-card__media { grid-column: 1; grid-row: 1; justify-self: center; width: 104px; height: 104px; aspect-ratio: 1; border: 0; margin: 6px; padding: 0; background: transparent; }
.time-travel[data-era="1995"] .app-card__media img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; border-radius: 0; }
.time-travel[data-era="1995"] .app-card h2 { grid-column: 2; grid-row: 1; align-self: stretch; display: flex; align-items: center; margin: 0; padding: 12px 14px; border-left: 2px groove #eee; font: bold 24px "Times New Roman", serif; color: #0000ee; text-decoration: none; }
.time-travel[data-era="1995"] .app-card--idiot h2 { padding-left: 20px; }
.time-travel[data-era="1995"] .app-card__body > div > p:not(.app-card__type) { grid-column: 3; grid-row: 1; align-self: stretch; display: flex; align-items: center; padding: 9px 12px; margin: 0; border-left: 2px groove #eee; font: 17px "Times New Roman", serif; line-height: 1.12; color: #000; }
.time-travel[data-era="1995"] .app-card__actions { grid-column: 4; grid-row: 1; align-self: stretch; display: flex; flex-direction: column; gap: 3px; justify-content: center; align-items: center; border-left: 2px groove #eee; padding: 4px; }
.time-travel[data-era="1995"] .app-card__button { font: bold 20px "Times New Roman", serif; padding: 2px 0; min-height: 26px; border: 0; background: none; border-radius: 0; box-shadow: none; }
.time-travel[data-era="1995"] .app-card__button:not(.app-card__button--secondary)::before { content: ""; display: inline-block; width: 28px; height: 20px; background: url("img/eras/1995/arrow.gif") center / 28px 20px no-repeat; image-rendering: pixelated; }
.time-travel[data-era="1995"][data-retro-paused="true"] .app-card__button:not(.app-card__button--secondary)::before { background-image: url("img/eras/1995/arrow-still.gif"); }
.time-travel[data-era="1995"] .app-card__button--secondary { font: 13px "Times New Roman", serif; min-height: 20px; }
.time-travel[data-era="1995"] .retro-community { display: grid; grid-template-columns: 1fr 1.2fr .8fr; gap: 0; border-top: 2px groove #eee; margin-top: 12px; padding: 13px 0 0; }
.time-travel[data-era="1995"] .guestbook { margin: 0; padding: 0 18px 0 4px; border: 0; background: transparent; }
[data-era="1995"] .guestbook .web-badge, [data-era="1995"] .guestbook .retro-badges { display: none; }
.time-travel[data-era="1995"] .guestbook-heading h2 { font: bold 24px "Times New Roman", serif; color: #0000ee; margin: 0 0 6px; }
.time-travel[data-era="1995"] .guestbook p, .time-travel[data-era="1995"] .cool-sites p, .time-travel[data-era="1995"] .retro-extras p { font: 16px "Times New Roman", serif; color: #000; line-height: 1.15; margin: 7px 0 12px; }
.time-travel[data-era="1995"] .guestbook form { display: block; }
.time-travel[data-era="1995"] .guestbook form > div { display: block; margin: 6px 0; }
.time-travel[data-era="1995"] .guestbook label { display: block; font: 16px "Times New Roman", serif; margin-bottom: 2px; }
.time-travel[data-era="1995"] .guestbook input, .time-travel[data-era="1995"] .guestbook textarea { background: #fff; border: 2px inset #eee; border-radius: 0; padding: 3px 5px; color: #000; font: 13px "Courier New", monospace; }
.time-travel[data-era="1995"] .guestbook button { display: block; margin: 6px auto 10px; background: #c0c0c0; border: 2px outset #eee; font: 16px "Times New Roman", serif; padding: 3px 20px; }
.time-travel[data-era="1995"] #guestbook-entries { list-style: none; margin: 8px 0; padding: 0; }
.time-travel[data-era="1995"] #guestbook-entries li { border-top: 2px groove white; padding: 8px 2px; margin: 0; font-size: 16px; }
.time-travel[data-era="1995"] #guestbook-entries p { margin: 4px 0; }
.time-travel[data-era="1995"] #guestbook-entries time { font: 12px "Courier New", monospace; }
.cool-sites { border-left: 2px groove #eee; padding: 0 18px; }
.cool-sites h2 { display: flex; align-items: center; gap: 7px; color: #0000bb; font: bold 21px "Times New Roman", serif; margin: 0; }
.cool-sites img { flex: 0 0 auto; image-rendering: pixelated; }
.cool-sites ul { padding-left: 22px; margin: 10px 0; font-size: 16px; line-height: 1.15; }
.cool-sites li { margin: 7px 0; }
.webmaster img { float: left; margin-right: 8px; }
.webmaster { min-height: 30px; }
.retro-extras { border-left: 2px groove #eee; padding: 0 15px; text-align: center; }
.retro-extras strong { color: #0000bb; }
.visitor-counter { display: inline-flex; border: 3px inset #ddd; background: #000; padding: 3px; gap: 1px; }
.visitor-counter img { display: block; width: 22px; height: 34px; image-rendering: pixelated; }
.time-travel[data-era="1995"] .retro-extras .counter-note { font-size: 12px; max-width: 210px; margin: 6px auto 14px; }
.netscape-link { display: block; margin: 18px auto 7px; }
.netscape-link img { width: 174px; height: auto; image-rendering: pixelated; margin: 0 auto 6px; }
.netscape-link span { display: block; }
.time-travel[data-era="1995"] .retro-extras .netscape-secret { font-size: 12px; }
.html-badge { margin: 16px auto 0; image-rendering: pixelated; }
.time-travel[data-era="1995"] hr { border: 0; border-top: 2px groove #eee; margin: 12px 0; }
.time-travel[data-era="1995"] .about { padding: 15px 4px; margin-top: 14px; border-top: 2px groove #eee; }
.time-travel[data-era="1995"] .about__inner { display: block; text-align: center; }
.time-travel[data-era="1995"] .about .eyebrow { display: none; }
.time-travel[data-era="1995"] .about h2 { max-width: none; font: bold 20px "Times New Roman", serif; margin-bottom: 6px; }
.time-travel[data-era="1995"] .about p:last-child { max-width: 800px; margin: auto; font: 16px "Times New Roman", serif; }
.time-travel[data-era="1995"] .retro-footer { padding: 0 12px 15px; color: #111; font: 13px "Courier New", monospace; }
.time-travel[data-era="1995"] .retro-footer hr { height: 3px; border: 0; background: linear-gradient(90deg, #f09, #ff0, #0ff, #00f, #f09); margin-bottom: 14px; }
.time-travel[data-era="1995"] .site-footer { display: none; }

@media (max-width: 850px) {
  .time-travel .time-console { padding-inline: 10px; gap: 8px; }
  .time-travel .console-footer #return-present { display: none; }
  .time-travel .timeline { gap: 1px; }
  .time-travel .era-topline { padding-inline: 20px; }
  .time-travel .era-topline-note { display: none; }
  .time-travel[data-era="1995"] .era-topline { flex-wrap: wrap; gap: 9px; justify-content: center; padding-block: 10px; }
  .time-travel[data-era="1995"] .era-topline #site-nav { margin: 0 auto; gap: 9px; justify-content: center; }
  .time-travel[data-era="1995"] .app-card { grid-template-columns: 142px minmax(140px, 1fr) minmax(170px, 1.2fr) 128px; }
  .time-travel[data-era="1995"] .app-card__media { width: 96px; max-width: 96px; height: 96px; }
  .time-travel[data-era="1995"] .app-card h2 { font-size: 21px; padding-inline: 10px; }
  .time-travel[data-era="1995"] .app-card__button { font-size: 17px; }
  .time-travel[data-era="1995"] .app-card__button--secondary { font-size: 13px; }
  .time-travel[data-era="1995"] .retro-community { grid-template-columns: 1fr 1fr; }
  .retro-extras { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 20px; border-left: 0; border-top: 2px groove #eee; margin-top: 12px; padding-top: 12px; }
  .retro-extras hr { display: none; }
  .retro-extras .counter-note { flex-basis: 120px; }
  .retro-extras .html-badge, .retro-extras .netscape-link { margin: 0; }
}
@media (max-width: 620px) {
  .time-travel .console-heading, .time-travel .console-footer { display: none; }
  .time-travel .time-console { justify-content: center; padding: 3px 5px; min-height: 39px; }
  .time-travel .timeline { width: 100%; justify-content: space-between; gap: 0; }
  .time-travel .timeline button { min-width: 0; flex: 1; padding: 7px 2px; }
  .time-travel .timeline-year { font-size: 12px; }
  .time-travel .era-window { min-height: calc(100svh - 39px); }
  .time-travel .era-topline { min-height: 60px; padding: 13px 16px; }
  .time-travel .era-topline h1 { font-size: 22px; }
  .time-travel .era-topline #site-nav { gap: 16px; font-size: 13px; }
  .time-travel .site-intro { padding: 10px 16px 0; font-size: 12px; }
  .time-travel .era-main { padding: 20px 16px; }
  .time-travel .guide-feature { padding: 24px 0 30px; }
  .time-travel .guide-feature h2 { font-size: 30px; }
  .time-travel .guide-form input { font-size: 12px; }
  .time-travel .feature-future { min-height: 440px; }
  .time-travel .about { padding-inline: 16px; }
  .time-travel[data-era="1995"] .era-window { padding-inline: 7px; }
  .time-travel[data-era="1995"] .era-topline { padding: 9px 0; }
  .time-travel[data-era="1995"] .retro-wordmark { width: 231px; }
  .time-travel[data-era="1995"] .era-topline #site-nav { font-size: 14px; gap: 7px; }
  .time-travel[data-era="1995"] .site-intro { font-size: 14px; padding: 2px 5px 9px; }
  .time-travel[data-era="1995"] .era-main { padding: 0; }
  .time-travel[data-era="1995"] .feature-1995 { padding: 14px 5px; gap: 3px; }
  .time-travel[data-era="1995"] .feature-1995 .retro-globe { width: 62px; height: 52px; position: absolute; left: 6px; top: 38px; }
  .time-travel[data-era="1995"] .feature-1995 .retro-star { width: 30px; height: 30px; position: absolute; right: 7px; top: 8px; margin: 0; }
  .time-travel[data-era="1995"] .feature-1995 h2 { font-size: 31px; margin: 14px 25px 12px 60px; }
  .time-travel[data-era="1995"] .feature-1995 .retro-welcome { font-size: 13px; letter-spacing: 0; }
  .time-travel[data-era="1995"] .feature-1995 p { font-size: 12px; }
  .retro-bulletin { display: block; padding: 5px 0; text-align: center; }
  .retro-bulletin p { margin-bottom: 4px; font-size: 12px; }
  #retro-motion-toggle { font-size: 10px; }
  .time-travel[data-era="1995"] .app-card { grid-template-columns: 105px minmax(0, 1fr) 94px; grid-template-rows: auto auto; min-height: 106px; }
  .time-travel[data-era="1995"] .app-card__media { grid-row: 1 / 3; width: 88px; max-width: 88px; height: 88px; margin: 4px; }
  .time-travel[data-era="1995"] .app-card h2 { grid-row: 1; font-size: 20px; padding: 7px 6px 2px; align-items: end; }
  .time-travel[data-era="1995"] .app-card--idiot h2 { padding-left: 9px; }
  .time-travel[data-era="1995"] .app-card__body > div > p:not(.app-card__type) { grid-column: 2; grid-row: 2; font-size: 14px; padding: 3px 6px 8px; align-items: start; }
  .time-travel[data-era="1995"] .app-card__actions { grid-column: 3; grid-row: 1 / 3; padding: 2px; }
  .time-travel[data-era="1995"] .app-card__button { font-size: 16px; }
  .time-travel[data-era="1995"] .app-card__button--secondary { font-size: 12px; }
  .time-travel[data-era="1995"] .app-card__button:not(.app-card__button--secondary)::before { display: none; }
  .time-travel[data-era="1995"] .retro-community { display: block; }
  .time-travel[data-era="1995"] .guestbook { padding: 0 7px 8px; }
  .cool-sites { border-left: 0; border-top: 2px groove #eee; padding: 14px 7px 0; }
  .retro-extras { display: block; padding: 14px 7px; }
  .retro-extras hr { display: block; }
  .retro-extras .netscape-link { margin: 15px auto; }
  .retro-extras .html-badge { margin: 10px auto 0; }
  .time-travel[data-era="1995"] .about { padding-inline: 7px; }
}
@media (prefers-reduced-motion: reduce) { .retro-bulletin > p span { animation: none; white-space: normal; } }
/* Era revision: simple navigation, period artwork, and a quiet local chat. */
.time-travel :is(button, a, summary, input):focus-visible { outline: 3px solid var(--focus, #74568a); outline-offset: 3px; }
.time-travel .era-content:focus, #era-content:focus { outline: none; }

/* 2000: an internet games newspaper, with chunky rollover buttons. */
.time-travel[data-era="2000"] { background: #d6dfed; }
.time-travel[data-era="2000"] .era-window { --text: #112951; --muted: #3e5069; --surface: #fff; --surface-strong: #e5ebf3; --line: #a2b3c9; --focus: #c22111; max-width: 1320px; margin-inline: auto; border-inline: 2px ridge #fff; font-family: Arial, Helvetica, sans-serif; }
.time-travel[data-era="2000"] .era-topline { min-height: 62px; background: #173976; color: #fff; border-bottom: 3px ridge #b8cee5; }
.time-travel[data-era="2000"] .era-topline h1 { color: #fff; font-style: italic; text-shadow: 2px 2px #061a40; }
.time-travel[data-era="2000"] .era-brand span { color: #ffdd55; }
.time-travel[data-era="2000"] .era-topline-note { color: #fff7bb; }
.time-travel[data-era="2000"] .site-intro { padding: 8px 16px; font-size: 12px; background: #fff8d2; border-block: 1px solid #a4adbf; }
.time-travel[data-era="2000"] .portal-tabs { padding: 8px 12px 0; gap: 4px; background: #bac9df; border-bottom: 3px solid #234985; flex-wrap: wrap; }
.portal-tabs button { padding: 9px 22px; border: 2px outset #e6edf5; border-bottom: 0; border-radius: 0; background: #42649b; color: #fff; font: bold 13px Verdana, sans-serif; }
.portal-tabs button[aria-selected="true"] { background: #fff; color: #132d5b; }
.portal-tabs button:hover, .portal-tabs button:focus-visible { color: #fff800; background: #092d66; text-decoration: underline; }
.portal-tabs button:active { border-style: inset; }
.time-travel[data-era="2000"] .portal-tabs > span { color: #233958; font: bold 10px Verdana, sans-serif; }
.time-travel[data-era="2000"] .era-main { padding: 15px; }
.time-travel[data-era="2000"] .feature-2000 { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 145px; padding: 18px; margin-bottom: 15px; background: #142c68; border: 4px ridge #829ac9; box-shadow: 3px 3px #b0bdce; overflow: hidden; }
.time-travel[data-era="2000"] .feature-2000 > div { max-width: none; }
.feature-2000 .portal-masthead { flex: 1; }
.time-travel[data-era="2000"] .feature-2000 .portal-edition { font: bold 10px Verdana, sans-serif; letter-spacing: 1px; color: #fff06a; }
.time-travel[data-era="2000"] .feature-2000 h2 { font: bold italic clamp(26px, 3.3vw, 40px) Georgia, serif; color: #fff; text-shadow: 2px 3px #000; letter-spacing: -1px; }
.time-travel[data-era="2000"] .feature-2000 h2 em { color: #ffdf00; }
.time-travel[data-era="2000"] .feature-2000 p { font: 12px Arial, sans-serif; color: #fff; margin: 6px 0; }
.portal-stickers { display: flex; align-items: center; gap: 5px; }
.portal-stickers img { width: 74px; height: 74px; border: 3px outset #b2c3e4; }
.portal-stickers img:nth-child(2) { transform: rotate(7deg); }
.time-travel[data-era="2000"] .games-heading { display: block; padding: 8px 12px; margin: 0; background: #e3eaf3; border-block: 2px solid #284775; }
.time-travel[data-era="2000"] .games-heading h2 { font: bold 22px Georgia, serif; margin: 0; }
.time-travel[data-era="2000"] .games-heading .section-kicker, .time-travel[data-era="2000"] .games-count { display: none; }
.time-travel[data-era="2000"] .app-grid { display: block; border-bottom: 2px solid #284775; }
.time-travel[data-era="2000"] .app-card { display: grid; grid-template-columns: 122px minmax(0, 1fr); padding: 14px 8px; gap: 18px; border: 0; border-bottom: 1px solid #9faab8; border-radius: 0; box-shadow: none; background: #fff; align-items: center; }
.time-travel[data-era="2000"] .app-card:nth-child(even) { background: #f0f3f8; }
.time-travel[data-era="2000"] .app-card:hover { transform: none; box-shadow: none; }
.time-travel[data-era="2000"] .app-card__media { width: 122px; height: 122px; aspect-ratio: 1; border: 3px ridge #d1d8e2; background: #d1d8e2; }
.time-travel[data-era="2000"] .app-card__media img { object-fit: contain; }
.time-travel[data-era="2000"] .app-card__body { min-height: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) 135px; gap: 16px; align-items: center; }
.time-travel[data-era="2000"] .app-card .app-card__type { font: bold 10px Verdana, sans-serif; color: #51637d; margin-bottom: 5px; }
.time-travel[data-era="2000"] .app-card h2 { font: bold 26px Georgia, serif; color: #003c93; margin-bottom: 9px; }
.time-travel[data-era="2000"] .app-card h2 a { text-decoration: underline; }
.time-travel[data-era="2000"] .app-card p { font: 14px/1.4 Arial, sans-serif; color: #222; }
.time-travel[data-era="2000"] .app-card__actions { flex-direction: column; align-items: stretch; gap: 8px; }
.time-travel[data-era="2000"] .app-card__button { font: bold 12px Verdana, sans-serif; padding: 9px; border: 3px outset #92add3; border-radius: 0; color: #fff; background: #305990; text-align: center; justify-content: center; }
.time-travel[data-era="2000"] .app-card__button--secondary { color: #123976; background: #dce6f4; border-color: #e5edf8; }
.time-travel[data-era="2000"] .app-card__button:hover, .time-travel[data-era="2000"] .app-card__button:focus-visible { background: #ffdf00; color: #112c61; border-color: #fff083; text-decoration: underline; box-shadow: 2px 2px #173665; }
.time-travel[data-era="2000"] .app-card__button:active { border-style: inset; box-shadow: none; }
.time-travel[data-era="2000"] .app-card .button-icon { display: none; }
.time-travel[data-era="2000"] .guestbook { border: 2px ridge #aec1df; border-radius: 0; background: #fff9d9; margin: 0; }
.time-travel[data-era="2000"] .guestbook button:hover { background: #173976; color: #ffdf00; }
.time-travel[data-era="2000"] .about { min-height: 240px; border: 2px ridge #aec1df; margin: 15px; background: #fff9d9; }
.time-travel[data-era="2000"] .about__inner { display: block; }
.time-travel[data-era="2000"] .about p:last-child { font: 16px/1.6 Georgia, serif; margin-top: 18px; }

/* 2010: clean, square, saturated application tiles. */
.time-travel[data-era="2010"] .app-card { border-radius: 0; box-shadow: none; border-color: #d9e4e3; }
.time-travel[data-era="2010"] .app-card__media { aspect-ratio: 1; background: transparent; }
.time-travel[data-era="2010"] .app-card__media img { object-fit: contain; }
.time-travel[data-era="2010"] .app-card__body { min-height: 180px; padding: 18px; }
.time-travel[data-era="2010"] .app-card h2 { font-size: 20px; }
.time-travel[data-era="2010"] .app-card p { font-size: 13px; }
.time-travel[data-era="2010"] .app-card__button { font-size: 12px; border-radius: 0; }

/* 2020: painted night skies, warm paper, and quiet ink borders. */
.time-travel[data-era="2020"] { background: #141820; }
.time-travel[data-era="2020"] .era-window { --surface: #191e24; --surface-strong: #24292e; --text: #f4e8d3; --muted: #c2b59f; --line: #59564c; --focus: #f2c87c; background: var(--surface); }
.time-travel[data-era="2020"] .era-topline { border-color: #b8a28140; }
.time-travel[data-era="2020"] .era-topline h1, .time-travel[data-era="2020"] .app-card h2, .time-travel[data-era="2020"] .games-heading h2 { font-family: Georgia, 'Times New Roman', serif; }
.time-travel[data-era="2020"] .era-brand span { color: #d4ae77; }
.time-travel[data-era="2020"] .era-topline-note { color: var(--muted); }
.time-travel[data-era="2020"] .feature-2020 { display: flex; align-items: center; min-height: clamp(320px, 36vw, 490px); padding: 45px; border: 1px solid #7e7665; border-radius: 3px 8px 4px 6px; background: #11182c; }
.time-travel[data-era="2020"] .feature-2020 > img { object-position: center; opacity: 1; }
.time-travel[data-era="2020"] .feature-2020::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #080f20dc, #080f2050 65%, transparent); }
.time-travel[data-era="2020"] .feature-2020 h2 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: clamp(35px, 4.6vw, 64px); color: #fff2d9; line-height: 1.12; }
.time-travel[data-era="2020"] .feature-2020 p { color: #f1dcc0; font-size: 15px; }
.time-travel[data-era="2020"] .feature-2020 .feature-kicker { color: #e7c490; font-size: 10px; }
.time-travel[data-era="2020"] #theme-toggle { font: 12px Georgia, serif; border-radius: 3px; color: #fff0d8; background: #171e2bdd; border: 1px solid #a8916c; }
.time-travel[data-era="2020"] .games-heading h2 { font-size: 26px; font-weight: 400; }
.time-travel[data-era="2020"] .app-grid { gap: 23px; }
.time-travel[data-era="2020"] .app-card { border: 1px solid var(--line); border-radius: 5px 8px 3px 6px; background: var(--surface-strong); box-shadow: 3px 5px 0 #070b1229; }
.time-travel[data-era="2020"] .app-card:hover { transform: translateY(-2px); box-shadow: 3px 8px 12px #070b1229; }
.time-travel[data-era="2020"] .app-card__media { aspect-ratio: 1; background: #191b1b; }
.time-travel[data-era="2020"] .app-card__media img { object-fit: contain; }
.time-travel[data-era="2020"] .app-card__body { padding: 19px; min-height: 192px; }
.time-travel[data-era="2020"] .app-card h2 { font-size: 24px; font-weight: 400; }
.time-travel[data-era="2020"] .app-card p { font-size: 13px; }
.time-travel[data-era="2020"] .app-card__button:not(.app-card__button--secondary) { color: #201b14; border-color: #e2be7c; border-radius: 2px 5px 3px 4px; background: #dfbb7b; font: 13px Georgia, serif; }
.time-travel[data-era="2020"] .app-card__button--secondary { font-size: 12px; }
.time-travel[data-era="2020"] .app-card__button:hover { text-decoration: underline; }
.time-travel[data-era="2020"][data-mode="light"] .era-window { --surface: #f3eddf; --surface-strong: #e9e0ce; --text: #342e27; --muted: #655943; --line: #bbae93; --focus: #775422; color-scheme: light; }

/* 2026: a deliberately plain conversation. The static directory stays crawlable. */
.time-travel[data-era="2026"] { background: #fafafa; }
.time-travel[data-era="2026"] .era-window { --surface: #fafafa; --surface-strong: #f0f0f0; --text: #292929; --muted: #686868; --line: #dedede; --focus: #545454; }
.time-travel[data-era="2026"] .era-topline { min-height: 63px; padding: 15px 24px; border: 0; }
.time-travel[data-era="2026"] .era-topline h1 { font: 600 20px Arial, sans-serif; letter-spacing: -.5px; }
.time-travel[data-era="2026"] .modern-wordmark > span { display: none; }
.time-travel[data-era="2026"] .era-topline-note { margin-left: auto; font-size: 12px; color: #737373; }
.time-travel[data-era="2026"] .era-layout { display: block; }
.time-travel[data-era="2026"] .era-main { padding: 0 24px; }
.time-travel.has-js[data-era="2026"] #games-panel, .time-travel.has-js[data-era="2026"] #about:not(:target), .time-travel.has-js[data-era="2026"] .site-intro, .time-travel.has-js[data-era="2026"] .site-footer { display: none; }
.time-travel[data-era="2026"] .guide-feature { display: flex; flex-direction: column; width: min(100%, 760px); height: calc(100dvh - 110px); min-height: 430px; padding: 0; margin: 0 auto; text-align: left; }
.guide-welcome { flex: 1; display: flex; justify-content: center; flex-direction: column; text-align: center; padding: 45px 0; }
.time-travel[data-era="2026"] .guide-welcome h2 { font: 500 clamp(25px, 3vw, 32px)/1.3 Arial, sans-serif; letter-spacing: -.8px; margin: 0 0 10px; }
.guide-welcome p { color: #737373; font: 14px/1.5 Arial, sans-serif; margin: 0; }
.guide-log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 18px 10px; }
.guide-log:empty { display: none; }
.guide-message { max-width: 100%; margin-bottom: 28px; font: 15px/1.7 Arial, sans-serif; overflow-wrap: anywhere; }
.guide-message-author { display: block; font-size: 12px; margin-bottom: 6px; font-weight: 600; color: #707070; }
.guide-message p { margin: 0; color: #292929; white-space: pre-wrap; }
.guide-message--user { background: #ededed; border-radius: 16px; padding: 12px 18px; width: fit-content; max-width: 85%; margin-left: auto; }
.guide-message--user .guide-message-author { font-size: 11px; }
.guide-thinking { color: #777 !important; }
.guide-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; }
.guide-links a { color: #3b3b3b; text-decoration: underline; text-underline-offset: 3px; font-size: 13px; }
.guide-composer { flex: 0 0 auto; padding: 8px 0 14px; background: #fafafa; }
.time-travel[data-era="2026"] .guide-form { max-width: none; border: 1px solid #d6d6d6; background: #f0f0f0; border-radius: 20px; box-shadow: none; padding: 10px 12px; }
.time-travel[data-era="2026"] .guide-form input { color: #282828; font-size: 15px; min-height: 34px; padding-left: 5px; }
.time-travel[data-era="2026"] .guide-form input::placeholder { color: #747474; }
.time-travel[data-era="2026"] .guide-form button { background: #303030; border-radius: 50%; width: 36px; height: 36px; flex: 0 0 36px; color: white; }
.time-travel[data-era="2026"] .guide-form button:disabled { background: #bbb; }
.time-travel[data-era="2026"] .guide-suggestions { margin: 0 0 12px; gap: 9px; }
.time-travel[data-era="2026"] .guide-suggestions button { padding: 8px 12px; font-size: 12px; color: #616161; border: 1px solid #ddd; background: #fafafa; }
.time-travel[data-era="2026"] .guide-suggestions button:hover { background: #e9e9e9; }
.time-travel[data-era="2026"] .guide-suggestions button:disabled { opacity: .5; }
.guide-disclosure { font: 11px/1.5 Arial, sans-serif; color: #777; text-align: center; margin: 9px 0; }
.guide-directory { font: 12px/1.7 Arial, sans-serif; color: #5e5e5e; }
.guide-directory summary { cursor: pointer; width: fit-content; margin-inline: auto; }
.guide-directory-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 15px; max-height: 210px; overflow: auto; border: 1px solid #ddd; margin-top: 10px; border-radius: 8px; }
.guide-directory h3 { font-size: 13px; color: #343434; margin: 0 0 7px; }
.guide-directory ul { padding: 0; margin: 0; list-style: none; }
.guide-directory li { margin-bottom: 6px; }
.guide-directory a { color: #373737; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 750px) {
  .portal-stickers img { width: 56px; height: 56px; }
  .portal-stickers img:last-child { display: none; }
  .time-travel[data-era="2020"] .feature-2020 { padding: 28px; }
  .time-travel[data-era="2020"] .feature-2020 > div { max-width: 85%; }
  .time-travel[data-era="2020"] .app-grid { gap: 15px; }
}
@media (max-width: 520px) {
  .time-travel[data-era="2000"] .era-main { padding: 8px; }
  .portal-tabs button { padding: 9px 13px; font-size: 11px; }
  .time-travel[data-era="2000"] .portal-tabs > span { display: none; }
  .time-travel[data-era="2000"] .feature-2000 { gap: 8px; padding: 14px 10px; }
  .portal-stickers img { width: 60px; height: 60px; }
  .portal-stickers img:not(:first-child) { display: none; }
  .time-travel[data-era="2000"] .app-card { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 12px 5px; align-items: start; }
  .time-travel[data-era="2000"] .app-card__media { width: 88px; height: 88px; }
  .time-travel[data-era="2000"] .app-card__body { display: block; }
  .time-travel[data-era="2000"] .app-card h2 { font-size: 22px; }
  .time-travel[data-era="2000"] .app-card p { font-size: 12px; }
  .time-travel[data-era="2000"] .app-card__actions { flex-direction: row; margin-top: 12px; }
  .time-travel[data-era="2000"] .app-card__button { font-size: 10px; padding: 7px; }
  .time-travel[data-era="2010"] .app-card__body, .time-travel[data-era="2020"] .app-card__body { padding: 12px; }
  .time-travel[data-era="2010"] .app-card h2, .time-travel[data-era="2020"] .app-card h2 { font-size: 20px; }
  .time-travel[data-era="2010"] .app-card p, .time-travel[data-era="2020"] .app-card p { font-size: 12px; }
  .time-travel[data-era="2020"] .feature-2020 { padding: 24px 20px 65px; min-height: 355px; }
  .time-travel[data-era="2020"] .feature-2020 > div { max-width: 100%; }
  .time-travel[data-era="2020"] .feature-2020 h2 { font-size: 38px; }
  .time-travel[data-era="2020"] .app-grid { gap: 12px; }
  .time-travel[data-era="2026"] .era-topline { padding: 15px 16px; }
  .time-travel[data-era="2026"] .era-main { padding: 0 12px; }
  .time-travel[data-era="2026"] .guide-form input { font-size: 16px; }
  .time-travel[data-era="2026"] .guide-suggestions { gap: 5px; }
  .time-travel[data-era="2026"] .guide-suggestions button { font-size: 11px; padding: 7px 9px; }
  .guide-directory-columns { grid-template-columns: 1fr; gap: 12px; }
}

.time-travel[data-era="2026"] .guide-form:focus-within { border-color: #777; }
.time-travel[data-era="2026"] .guide-form input:focus-visible { outline: none; }

/* Desktop widths grow with the era, while small screens remain fluid. */
.time-travel[data-era="1995"] .era-window,
.time-travel[data-era="1995"] .retro-footer { max-width: 1100px; margin-inline: auto; }
.time-travel[data-era="2010"] { background: #e8efed; }
.time-travel[data-era="2010"] .era-window { width: calc(100% - 64px); max-width: 1440px; margin-inline: auto; }

/* 2010 live tiles: the name and About link belong to the colored square. */
.time-travel[data-era="2010"] .app-card { position: relative; display: block; border: 0; border-radius: 0; overflow: hidden; }
.time-travel[data-era="2010"] .app-card__media { display: block; aspect-ratio: 1; padding: 0; }
.time-travel[data-era="2010"] .app-card__media::after { display: block; inset: auto 0 0; height: 30%; background: linear-gradient(transparent, #0006); pointer-events: none; }
.time-travel[data-era="2010"] .app-card__body,
.time-travel[data-era="2010"] .app-card__body > div:first-child { display: contents; }
.time-travel[data-era="2010"] .app-card__body > div:first-child > p,
.time-travel[data-era="2010"] .app-card__button:not(.app-card__button--secondary) { display: none; }
.time-travel[data-era="2010"] .app-card h2 { position: absolute; z-index: 2; bottom: 17px; left: 17px; max-width: calc(100% - 90px); margin: 0; color: #fff; font: 400 clamp(17px, 1.7vw, 24px)/1.2 'Segoe UI', Arial, sans-serif; }
.time-travel[data-era="2010"] .app-card h2 a { color: inherit; text-decoration: none; }
.time-travel[data-era="2010"] .app-card__actions { position: absolute; z-index: 2; bottom: 13px; right: 15px; padding: 0; }
.time-travel[data-era="2010"] .app-card__button--secondary { color: #fff; background: transparent; padding: 4px 0; min-height: 24px; font: 13px 'Segoe UI', Arial, sans-serif; text-decoration: underline; text-underline-offset: 3px; }
.time-travel[data-era="2010"] .app-card__media:focus-visible { outline-color: #fff; outline-offset: -4px; }
.time-travel[data-era="2010"] .app-card h2 a:focus-visible,
.time-travel[data-era="2010"] .app-card__button--secondary:focus-visible { outline-color: #fff; }
@media (max-width: 620px) {
  .time-travel[data-era="2010"] .era-window { width: calc(100% - 24px); }
  .time-travel[data-era="2010"] .app-card h2 { left: 0; bottom: 0; width: 100%; max-width: none; padding: 9px 12px; background: #0007; font-size: 16px; }
  .time-travel[data-era="2010"] .app-card__actions { right: 8px; top: 6px; bottom: auto; }
  .time-travel[data-era="2010"] .app-card__button--secondary { background: #0007; padding: 4px 6px; font-size: 12px; }
  .time-travel[data-era="2010"] .app-card__media::after { height: 48%; }
}


/* Flat Metro tiles, including on hover. */
.time-travel[data-era="2010"] .app-card,
.time-travel[data-era="2010"] .app-card:hover { box-shadow: none; transform: none; transition: none; }
.time-travel[data-era="2010"] .app-card__media::after { display: none; }

/* The era navigation borrows the page's palette and typography. */
.time-travel:not([data-era="1995"]) { --travel-bg: #fafafa; --travel-text: #292929; --travel-line: #dedede; --travel-active: #444; --travel-hover: #e8e8e8; --travel-font: Arial, sans-serif; }
.time-travel[data-era="2000"] { --travel-bg: #e4ecf7; --travel-text: #173665; --travel-line: #829ac9; --travel-active: #173665; --travel-hover: #ffdf00; --travel-font: Verdana, Arial, sans-serif; }
.time-travel[data-era="2010"] { --travel-bg: #e8efed; --travel-text: #17383e; --travel-line: #c9dcd5; --travel-active: #268475; --travel-hover: #d2e5df; --travel-font: 'Segoe UI', Arial, sans-serif; }
.time-travel[data-era="2020"] { --travel-bg: #191e24; --travel-text: #f4e8d3; --travel-line: #59564c; --travel-active: #78603e; --travel-hover: #37342e; --travel-font: Georgia, serif; }
.time-travel[data-era="2020"][data-mode="light"] { --travel-bg: #f3eddf; --travel-text: #342e27; --travel-line: #bbae93; --travel-hover: #e9e0ce; }
.time-travel:not([data-era="1995"]) .time-console { background: var(--travel-bg); color: var(--travel-text); border-color: var(--travel-line); font-family: var(--travel-font); }
.time-travel:not([data-era="1995"]) .console-heading,
.time-travel:not([data-era="1995"]) .console-footer button,
.time-travel:not([data-era="1995"]) .console-footer #return-present,
.time-travel:not([data-era="1995"]) .timeline button,
.time-travel:not([data-era="1995"]) .timeline-year { color: var(--travel-text); font-family: var(--travel-font); }
.time-travel:not([data-era="1995"]) .timeline button:hover { background: var(--travel-hover); }
.time-travel:not([data-era="1995"]) .timeline button[aria-pressed="true"] { background: var(--travel-active); border-color: var(--travel-active); }
.time-travel:not([data-era="1995"]) .timeline button[aria-pressed="true"] .timeline-year { color: #fff; }
.time-travel[data-era="2000"] .timeline button { border-radius: 0; border-style: outset; }
.time-travel[data-era="2010"] .timeline button { border-radius: 0; }

/* An explicitly fictional consent interruption, shown once per page load. */
.cookie-joke { width: min(540px, calc(100% - 32px)); max-height: calc(100svh - 32px); margin: auto; padding: clamp(20px, 5vw, 32px); box-sizing: border-box; color: #342e27; background: #f3eddf; border: 2px solid #bbae93; border-radius: 5px 12px 6px 9px; font: 16px/1.6 Georgia, serif; }
.cookie-joke::backdrop { background: #080f20a6; }
.cookie-joke h2 { margin: 8px 0 16px; font: 400 30px/1.2 Georgia, serif; }
.cookie-kicker { font: 11px/1.5 Arial, sans-serif; letter-spacing: 1px; }
.cookie-disclaimer { font-size: 13px; color: #655943; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.cookie-actions button { flex: 1 1 180px; padding: 12px; border: 1px solid #775422; border-radius: 3px 6px 3px 5px; background: #e9e0ce; color: #342e27; font: 14px/1.4 Georgia, serif; cursor: pointer; }
.cookie-actions button:hover { background: #dfbb7b; }
.cookie-actions button:focus-visible { outline: 3px solid #775422; outline-offset: 3px; }


/* Close each page with the same visual language as its era navigation. */
.time-travel:not([data-era="1995"]) .site-footer {
  min-height: 64px;
  padding: 20px 24px;
  gap: 12px;
  background: var(--travel-bg);
  color: var(--travel-text);
  border-top: 1px solid var(--travel-line);
  font: 12px/1.5 var(--travel-font);
}
.time-travel:not([data-era="1995"]) .footer-mark {
  color: var(--travel-text);
  font: bold 15px var(--travel-font);
}
.time-travel:not([data-era="1995"]) .footer-separator { background: var(--travel-line); height: 14px; }
.time-travel:not([data-era="1995"]) .about { color: var(--text); border-top: 1px solid var(--line); }
.time-travel:not([data-era="1995"]) .about .eyebrow { font-family: var(--travel-font); font-size: 11px; }
.time-travel:not([data-era="1995"]) .about h2 { font-family: var(--travel-font); }
.time-travel[data-era="2000"] .site-footer { max-width: 1320px; margin-inline: auto; border-top: 3px double #829ac9; font-size: 11px; }
.time-travel[data-era="2000"] .about { min-height: 0; padding: 24px; border: 2px ridge #aec1df; }
.time-travel[data-era="2000"] .about h2 { font-size: 20px; }
.time-travel[data-era="2010"] .site-footer { width: calc(100% - 64px); max-width: 1440px; margin-inline: auto; }
.time-travel[data-era="2010"] .about { background: #f1f7f6; padding-block: 36px; }
.time-travel[data-era="2010"] .about h2 { font-size: 22px; font-weight: 400; }
.time-travel[data-era="2010"] .about p:last-child { font: 14px/1.8 'Segoe UI', Arial, sans-serif; }
.time-travel[data-era="2020"] .about { padding-block: 40px; }
.time-travel[data-era="2020"] .about h2 { font: 400 25px/1.35 Georgia, serif; }
.time-travel[data-era="2020"] .about p:last-child { color: var(--muted); font: 15px/1.8 Georgia, serif; }
.time-travel[data-era="2020"] .site-footer { padding-block: 24px; }
.time-travel[data-era="2026"] .guide-composer { border-top: 1px solid var(--travel-line); font-family: var(--travel-font); padding-top: 16px; }
@media (max-width: 620px) {
  .time-travel[data-era="2010"] .site-footer { width: calc(100% - 24px); }
  .time-travel:not([data-era="1995"]) .about__inner { display: block; }
  .time-travel:not([data-era="1995"]) .about h2 { max-width: none; margin-bottom: 12px; }
  .time-travel:not([data-era="1995"]) .site-footer { padding-inline: 16px; gap: 10px; }
}


/* Keep hover text legible instead of inheriting the old purple timeline color. */
.time-travel:not([data-era="1995"]) .timeline button:hover .timeline-year { color: var(--travel-text); }
.time-travel:not([data-era="1995"]) .timeline button[aria-pressed="true"]:hover .timeline-year { color: #fff; }
.time-travel[data-era="2020"] .timeline button:focus-visible { outline: 2px solid #d4ae77; outline-offset: 2px; }
.time-travel[data-era="2020"][data-mode="light"] .timeline button:focus-visible { outline-color: #775422; }


/* 2000 portal refresh: blue chrome, cream panels, and JPEG banner art. */
.time-travel[data-era="2000"] { background: radial-gradient(ellipse at top, #dceafa, #9dbddd); --travel-bg: #bed5ee; --travel-line: #527eaf; }
.time-travel[data-era="2000"] .era-window { border: 3px double #164986; background: #f5faff; }
.time-travel[data-era="2000"] .era-topline { min-height: 106px; padding: 18px 26px; background: repeating-linear-gradient(0deg, #ffffff03 0 1px, transparent 1px 3px), linear-gradient(#0753a4, #003477); border-bottom: 3px ridge #d9eaff; }
.time-travel[data-era="2000"] .era-topline h1 { font: bold italic clamp(28px, 4.5vw, 54px)/1.1 Arial, sans-serif; letter-spacing: -2px; text-shadow: 1px 1px #fff2a4, 3px 4px #002254; }
.time-travel[data-era="2000"] .era-topline-note { margin-right: auto; max-width: 200px; font: bold italic 18px/1.3 Arial, sans-serif; color: #caeaff; text-shadow: 1px 2px #002b64; }
.time-travel[data-era="2000"] .site-intro { background: #fff8d8; margin: 0; color: #284d77; }
.time-travel[data-era="2000"] .portal-tabs { padding: 5px 22px 0; background: linear-gradient(#e2effc, #93b6df); border-bottom: 2px solid #39699f; }
.time-travel[data-era="2000"] .portal-tabs button { min-width: 150px; color: #092c62; background: linear-gradient(#f9fcff, #b2cbea); border: 2px outset #eef6ff; border-bottom: 0; border-radius: 4px 4px 0 0; font: bold 16px Arial, sans-serif; }
.time-travel[data-era="2000"] .portal-tabs button[aria-selected="true"] { background: linear-gradient(#fffef3, #fff4c8); }
.time-travel[data-era="2000"] .portal-tabs button:hover { background: #ffdf55; color: #002b64; }
.time-travel[data-era="2000"] .portal-tabs > span { margin-left: auto; padding: 7px 12px; background: #ffeb83; color: #003477; font: bold italic 16px Arial, sans-serif; }
.time-travel[data-era="2000"] .feature-2000 { position: relative; display: block; min-height: 0; padding: 0; border: 1px solid #407ac1; border-radius: 0; box-shadow: none; background: #0753a4; }
.time-travel[data-era="2000"] .feature-2000 > .portal-banner { position: static; display: block; width: 100%; height: auto; object-fit: contain; }
.time-travel[data-era="2000"] .portal-masthead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.time-travel[data-era="2000"] .games-heading { background: linear-gradient(90deg, #fff4c2, #f8edcb); border: 1px solid #789cc6; padding: 10px 14px; }
.time-travel[data-era="2000"] .games-heading h2 { font: bold 24px Arial, sans-serif; color: #0b3569; }
.time-travel[data-era="2000"] .app-grid { border: 1px solid #97b7df; border-top: 0; }
.time-travel[data-era="2000"] .app-card { padding: 12px; border-bottom: 1px dotted #a9c1dc; background: #f7fbff; }
.time-travel[data-era="2000"] .app-card:nth-child(even) { background: #eef5fd; }
.time-travel[data-era="2000"] .app-card:last-child { border-bottom: 0; }
.time-travel[data-era="2000"] .app-card__media { border: 3px ridge #bdd4ef; }
.time-travel[data-era="2000"] .app-card__body { grid-template-columns: minmax(0, 1fr) 180px; }
.time-travel[data-era="2000"] .app-card h2 { color: #0000cc; }
.time-travel[data-era="2000"] .app-card__actions { border-left: 1px dotted #a9c1dc; padding-left: 20px; }
.time-travel[data-era="2000"] .app-card__button { background: linear-gradient(#5486c6, #123e7d); border-radius: 3px; font-size: 14px; text-shadow: 1px 1px #00265d; }
.time-travel[data-era="2000"] .app-card__button--secondary { background: linear-gradient(#f8fcff, #bed0e6); color: #123976; text-shadow: none; }
.time-travel[data-era="2000"] .app-card__button:hover { background: #ffdf00; color: #112c61; text-shadow: none; }
.time-travel[data-era="2000"] .site-footer { background: linear-gradient(#c4dcf5, #a4c5e8); border: 3px double #164986; border-top: 0; }
@media (max-width: 620px) {
  .time-travel[data-era="2000"] .era-topline { padding: 16px; min-height: 85px; flex-wrap: wrap; gap: 10px; }
  .time-travel[data-era="2000"] .era-topline-note { font-size: 13px; }
  .time-travel[data-era="2000"] .portal-tabs { padding-inline: 6px; }
  .time-travel[data-era="2000"] .portal-tabs button { min-width: 0; flex: 1; padding: 10px 5px; font-size: 13px; }
  .time-travel[data-era="2000"] .portal-tabs > span { display: none; }
  .time-travel[data-era="2000"] .feature-2000 .portal-edition { font-size: 9px; }
  .time-travel[data-era="2000"] .feature-2000 h2 { font-size: 26px; }
  .time-travel[data-era="2000"] .games-heading h2 { font-size: 19px; }
  .time-travel[data-era="2000"] .app-card { padding: 10px 6px; gap: 10px; }
  .time-travel[data-era="2000"] .app-card__actions { border: 0; padding: 0; flex-wrap: wrap; }
  .time-travel[data-era="2000"] .app-card__button { font-size: 11px; }
}