/* ~*~ welcome 2 my stylesheet ~*~ */

/* Fonts. These used to load from fonts.googleapis.com, which privacy blockers
   flag as a tracker, because Google sees an IP address and a referring page for
   every visitor. These are the same woff2 files Google serves, hosted here
   instead. Latin subset only, which loses nothing: every character on this site
   outside Latin-1 (the stars, hearts and emoji) already falls back to a system
   font. All six families are open licensed, so self-hosting is allowed.
   fonts/ is cached for a year, so rename a file if you ever replace one.
   burrow.html stands alone and keeps its own copy of the two rules it needs. */

@font-face {
  font-family: "Chewy";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/chewy-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Gentium Book Plus";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/gentium-book-plus-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Gentium Book Plus";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/gentium-book-plus-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Gentium Book Plus";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/gentium-book-plus-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Pixelify Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/pixelify-sans.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Pixelify Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/pixelify-sans.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/press-start-2p-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Righteous";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/righteous-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "VT323";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/vt323-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --space: #070318;
  --panel: #150c33;
  --plum: #22124a;
  --plum-dark: #120826;
  --blue: #6cb6ff;
  --blue-deep: #2a56c6;
  --purple: #7b4dff;
  --orange: #ff9a3c;
  --yellow: #efe710;
  --cyan: #4af0f7;
  --text: #ece6ff;
  --muted: #b3a6e0;
}

body {
  margin: 0;
  padding: 20px 16px;
  font-family: "Gentium Book Plus", Georgia, serif;
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
  /* star tile over a couple of soft nebula clouds */
  background:
    url("stars.svg"),
    radial-gradient(ellipse 60% 40% at 15% 20%, rgba(123, 77, 255, 0.35), transparent 70%),
    radial-gradient(ellipse 50% 35% at 85% 70%, rgba(108, 182, 255, 0.22), transparent 70%),
    radial-gradient(ellipse 40% 30% at 60% 10%, rgba(74, 240, 247, 0.12), transparent 70%),
    var(--space);
  background-attachment: fixed;
}

a { color: var(--blue); }
a:hover { animation: rainbow 1s infinite; }
@keyframes rainbow {
  0%   { color: #ff4040; }
  15%  { color: #ff9a3c; }
  30%  { color: #ffee40; }
  45%  { color: #50ff80; }
  60%  { color: #4af0f7; }
  75%  { color: #9a7dff; }
  90%  { color: #ff7eb6; }
}

/* ---- header ---- */
#header {
  position: relative;
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
}

#header h1 {
  margin: 0 0 18px;
  font-family: "Righteous", "Trebuchet MS", sans-serif;
  font-weight: normal;
  font-size: 60px;
  letter-spacing: 1px;
  line-height: 1.1;
  color: var(--blue);
  -webkit-text-stroke: 2px #fff;
  paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--purple), 0 0 24px rgba(108, 182, 255, 0.7);
}

/* little ringed planets drawn in CSS */
.planet {
  position: absolute;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e3f1ff, var(--blue) 45%, #1f3d8a);
  box-shadow: 0 0 18px rgba(108, 182, 255, 0.5);
}
.planet::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 21px;
  width: 94px;
  height: 14px;
  border: 3px solid var(--cyan);
  border-radius: 50%;
  transform: rotate(-18deg);
  clip-path: polygon(0 45%, 100% 45%, 100% 100%, 0 100%);
}
.planet.p1 { left: 40px; top: 18px; }
.planet.p2 {
  right: 60px; top: 60px;
  width: 30px; height: 30px;
  background: radial-gradient(circle at 35% 30%, #fff6d0, var(--orange) 50%, #8a3d10);
  box-shadow: 0 0 14px rgba(255, 154, 60, 0.5);
}
.planet.p2::before { display: none; }

/* nav bar */
#nav {
  position: relative;
  max-width: 1100px;
  margin: 0 auto 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 4px 12px;
  padding: 6px 20px;
  box-sizing: border-box;
  background: linear-gradient(#4a2a9e, #2a1566);
  border: 2px solid var(--blue);
  border-radius: 999px;
  box-shadow: 0 0 14px rgba(108, 182, 255, 0.4);
}
#nav a {
  font-family: "Chewy", cursive;
  font-size: 24px;
  font-style: italic;
  color: #fff;
  text-decoration: none;
  text-shadow: 2px 2px 0 var(--blue-deep);
}

/* ---- three-column frame ---- */
#frame {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 220px 1fr 230px;
  background: var(--panel);
  border: 2px solid var(--purple);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(123, 77, 255, 0.35);
}
#frame.two-col { grid-template-columns: 220px 1fr; }

.col { padding: 16px; min-width: 0; }
.col-left { border-right: 2px dotted var(--purple); text-align: center; color: var(--muted); }
.col-right { border-left: 2px dotted var(--purple); }

/* widget titles in the side columns */
.widget { margin-bottom: 22px; }
.widget h2 {
  margin: 0 0 8px;
  font-family: "Chewy", cursive;
  font-weight: normal;
  font-size: 24px;
  color: var(--blue);
  text-shadow: 2px 2px 0 var(--purple);
  text-align: center;
}
.widget b { color: var(--cyan); font-weight: normal; }

.counter {
  display: inline-block;
  background: #000;
  color: #ff4a4a;
  font-family: "Press Start 2P", monospace;
  font-size: 11px;
  letter-spacing: 2px;
  padding: 1px 8px;
  border: 1px solid var(--blue);
  border-radius: 999px;
}

/* ---- center column: deep purple, storybook serif ---- */
.col-main {
  background: var(--plum);
  color: #fff;
  padding: 20px 28px;
  font-family: "Gentium Book Plus", Georgia, serif;
  font-size: 16px;
}
.col-main h2 {
  font-family: "Chewy", cursive;
  font-weight: normal;
  font-size: 32px;
  color: var(--blue);
  margin: 8px 0 10px;
}
/* page titles sit centered; on most pages the title is the first heading,
   and the home page marks its own (the retro computer comes first there) */
.col-main > h2:first-child, .col-main h2.page-title { text-align: center; }
.col-main h3 {
  font-family: "Chewy", cursive;
  font-weight: normal;
  font-size: 24px;
  color: var(--blue);
  margin: 0 0 6px;
}
.col-main a { color: #ffeaa0; }
.col-main b { color: var(--yellow); }

.bubble {
  background: var(--plum-dark);
  border-radius: 24px;
  padding: 14px 22px;
  margin: 18px 0;
}

/* project / paper cards */
.card {
  background: var(--plum-dark);
  border: 1px solid #3b2470;
  border-radius: 12px;
  padding: 12px 18px;
  margin: 14px 0;
}
/* project titles wear the same bold serif as the museum's section titles */
.card h3 { margin-bottom: 2px; font: bold 21px "Gentium Book Plus", Georgia, serif; }
.card h3 a { font: inherit; }
.card p { margin: 6px 0; }
.tag {
  display: inline-block;
  /* VT323: a terminal font with a clear capital C */
  font-family: VT323, monospace;
  font-size: 16px;
  line-height: 1.25;
  padding: 0 7px;
  margin-right: 4px;
  border-radius: 999px;
  background: var(--purple);
  color: #fff;
}
.tag.wip { background: var(--orange); color: #000; }
.tag.done { background: #2fbf71; color: #000; }
.tag.archived { background: #6b6585; color: #fff; }

/* experience / education lists */
.timeline { padding-left: 0; }
.timeline li { padding-left: 0; margin: 10px 0; }
.timeline li::before { content: none; }
.timeline .when {
  display: inline-block;
  min-width: 118px;
  font: 18px VT323, monospace;
  color: var(--cyan);
}

.papers { padding-left: 0; counter-reset: paper; }
.papers li {
  counter-increment: paper;
  padding-left: 34px;
  margin: 12px 0;
}
.papers li::before {
  content: "[" counter(paper) "]";
  left: 0;
  color: var(--cyan);
  font: 18px VT323, monospace;
}
.papers .venue { font-style: italic; color: var(--muted); }

/* a 40-pin DIP chip, for the 6502 */
.chip {
  position: relative;
  width: 192px;
  max-width: 100%;
  height: 44px;
  margin: 18px auto;
  background: linear-gradient(#2a2a2e, #141416);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: bold 14px "Courier New", monospace;
  letter-spacing: 2px;
  color: #ddd;
  box-shadow: 0 0 16px rgba(74, 240, 247, 0.25);
}
/* pins, 20 per side */
.chip::before,
.chip::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  height: 7px;
  /* exactly 20 pins per side, whatever the chip's width */
  background: linear-gradient(90deg, transparent 0 30%, #c9c9d1 30% 70%, transparent 70%) 0 0 / calc(100% / 20) 100% repeat-x;
}
.chip::before { top: -7px; }
.chip::after  { bottom: -7px; }
.chip .notch {
  position: absolute;
  left: -7px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--plum-dark);
}

/* the tape-measure Yagi antenna drawing on the Projects page */
.yagi {
  display: block;
  width: 310px;
  max-width: 100%;
  height: auto;
  margin: 14px auto 10px;
  filter: drop-shadow(0 0 8px rgba(74, 240, 247, 0.25));
}
/* radio waves rolling out from the front of the antenna, growing and fading as they go */
.yagi .wave {
  transform-box: fill-box;
  transform-origin: left center;
  opacity: 0;
  animation: yagiwave 3s ease-out infinite;
}
.yagi .w2 { animation-delay: 0.75s; }
.yagi .w3 { animation-delay: 1.5s; }
.yagi .w4 { animation-delay: 2.25s; }
@keyframes yagiwave {
  0%   { opacity: 0; transform: translateX(0) scale(0.6); }
  12%  { opacity: 0.95; }
  100% { opacity: 0; transform: translateX(76px) scale(2); }
}
@media (prefers-reduced-motion: reduce) {
  .yagi .wave { animation: none; opacity: 0.6; }
  .yagi .w2 { transform: translateX(22px) scale(1.2); opacity: 0.45; }
  .yagi .w3 { transform: translateX(44px) scale(1.6); opacity: 0.3; }
  .yagi .w4 { display: none; }
}

/* a little beige computer that "prints" a hamster (see index.html) */
.retro {
  float: right;
  width: 200px;
  margin: 56px 0 14px 26px;
}
.monitor {
  background: linear-gradient(#e6dcc0, #cbbf9c);
  border-radius: 12px 12px 8px 8px;
  padding: 12px 12px 8px;
  box-shadow: inset -3px -3px 0 #a99b73, inset 3px 3px 0 #f6efdc, 0 0 22px rgba(108, 182, 255, 0.35);
}
.crt {
  position: relative;
  height: 128px;
  padding: 6px 8px;
  overflow: hidden;
  background: radial-gradient(ellipse at center, #0d2a12, #041006);
  border: 3px solid #6f6650;
  border-radius: 12px / 9px;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.9);
}
/* scanlines */
.crt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(transparent 0 2px, rgba(0, 0, 0, 0.25) 2px 3px);
  pointer-events: none;
}
/* the retro computer is clickable: you can type on it */
.retro { cursor: text; }
.retro .led { cursor: pointer; }
.retro .led.off { background: #2a3a2a; box-shadow: none; }
.crt.off { background: #050805 !important; }
.crt-in {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: 0;
  padding: 0;
  font-size: 16px; /* keeps iPhones from zooming in when it's focused */
}
.crt pre {
  margin: 0;
  font: 10px/1.15 "Courier New", monospace;
  font-weight: bold;
  color: #6dff8a;
  text-shadow: 0 0 4px rgba(109, 255, 138, 0.8);
  white-space: pre;
}
.crt .cursor { animation: blink 1s steps(1) infinite; }
.monitor .badge {
  display: flex;
  justify-content: flex-end;
  margin-top: 7px;
}
.monitor .led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5dff6a;
  box-shadow: 0 0 6px #5dff6a;
}
.neck {
  width: 50px;
  height: 10px;
  margin: 0 auto;
  background: #b3a680;
}
.keyboard {
  height: 26px;
  margin: 0 -8px;
  padding: 5px 8px;
  box-sizing: border-box;
  background: linear-gradient(#ddd2b3, #bfb28c);
  border-radius: 4px 4px 8px 8px;
  box-shadow: inset 0 -3px 0 #a99b73;
}
/* rows of keys */
.keyboard::before {
  content: "";
  display: block;
  height: 100%;
  background:
    repeating-linear-gradient(90deg, #8a7f62 0 9px, transparent 9px 11px),
    #bfb28c;
  -webkit-mask: repeating-linear-gradient(transparent 0 1px, #000 1px 6px, transparent 6px 8px);
          mask: repeating-linear-gradient(transparent 0 1px, #000 1px 6px, transparent 6px 8px);
}

/* "what i'm up to" rows */
.upto p { margin: 8px 0; }
.upto .icon { display: inline-block; width: 28px; }
.upto .icon { font-size: 18px; text-shadow: 0 0 6px currentColor; }
.upto .star-yellow { color: var(--yellow); }
.upto .star-cyan { color: var(--cyan); }
.upto .star-pink { color: #ff6fd8; }
.upto .star-blue { color: var(--blue); }
.upto .star-orange { color: var(--orange); }
.upto .star-green { color: #5dff6a; }

/* row of little stars used as a divider */
.stars {
  text-align: center;
  font-size: 18px;
  letter-spacing: 4px;
  margin: 14px 0;
}
/* drop below anything floated beside it, like the retro computer */
.stars.clear { clear: both; padding-top: 6px; }
.stars span:nth-child(3n+1) { color: var(--cyan); }
.stars span:nth-child(3n+2) { color: var(--blue); font-size: 14px; }
.stars span:nth-child(3n)   { color: #c9a8ff; }

.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { visibility: hidden; } }

ul { padding-left: 22px; }
li { list-style: none; position: relative; margin: 5px 0; }
li::before {
  content: "✦";
  position: absolute;
  left: -20px;
  color: var(--blue);
}

/* ---- right column: little black boxes w/ spinning stars ---- */
.starbox {
  position: relative;
  background: #000;
  color: #fff;
  border: 1px dashed var(--yellow);
  border-radius: 10px;
  padding: 8px 12px;
  margin: 0 0 22px;
  font-size: 16px;
}
.starbox::before,
.starbox::after {
  content: "★";
  position: absolute;
  color: var(--yellow);
  font-size: 20px;
  line-height: 1;
  animation: spin 3s linear infinite;
}
.starbox::before { top: -10px; left: -10px; }
.starbox::after  { bottom: -10px; right: -10px; }
@keyframes spin { to { transform: rotateY(360deg); } }
.starbox h2 {
  font-family: "Chewy", cursive;
  font-weight: normal;
  font-size: 24px;
  color: var(--cyan);
  margin: 0 0 6px;
}
.starbox .date {
  background: var(--blue-deep);
  color: #fff;
  padding: 1px 3px;
  font: 9px "Press Start 2P", monospace;
  vertical-align: 1px;
}
.starbox a { color: var(--cyan); }
.starbox ul { padding-left: 18px; margin: 6px 0; }
.starbox li::before { color: var(--yellow); left: -16px; }

/* ---- Windows 95 "Time Machine" ---- */
.start-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  font: bold 14px Arial, Helvetica, sans-serif;
  color: #000;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  box-shadow: inset -1px -1px 0 #808080;
  cursor: pointer;
}
.start-btn:active { border-color: #404040 #fff #fff #404040; box-shadow: inset 1px 1px 0 #808080; }
.winflag {
  display: grid;
  grid-template-columns: 7px 7px;
  gap: 1px;
  transform: skewY(-8deg);
}
.winflag i { width: 7px; height: 7px; }
.winflag i:nth-child(1) { background: #f35325; }
.winflag i:nth-child(2) { background: #81bc06; }
.winflag i:nth-child(3) { background: #05a6f0; }
.winflag i:nth-child(4) { background: #ffba08; }
.fine { font-size: 14px; }
.time-machine,
.arcade {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 0;
}
.time-machine { display: block; text-align: center; }
.time-machine .tm-buttons { justify-content: center; }
/* ---- BASIC tutorial page: code looks like the C64's own screen ---- */
pre.c64 {
  margin: 10px 0;
  padding: 12px 16px;
  overflow-x: auto;
  font: 15px/1.5 "Courier New", monospace;
  font-weight: bold;
  color: #a5a3ff;
  background: #4038c4;
  border: 10px solid #8a86ff;
  border-radius: 4px;
}
pre.c64.out { color: #fff; background: #2a247a; border-color: #5a56c8; }
/* ---- Unix V6 field guide: code looks like a glass teletype ---- */
pre.v6 {
  margin: 10px 0;
  padding: 12px 16px;
  overflow-x: auto;
  font: 15px/1.5 "Courier New", monospace;
  font-weight: bold;
  color: #d8e8d0;
  background: #101410;
  border: 10px solid #3a463a;
  border-radius: 4px;
}
.col-main code {
  font: 16px VT323, monospace;
  color: #cfe3ff;
  background: #3a2f8a;
  padding: 0 4px;
  border-radius: 3px;
}
.fine-print { font-size: 14px; color: var(--muted); }

.basic-note .c64-icon { vertical-align: -3px; image-rendering: pixelated; }
.basic-note code {
  font: 16px VT323, monospace;
  color: #cfe3ff;
  background: #3a2f8a;
  padding: 0 4px;
  border-radius: 3px;
}
.time-machine p { margin: 6px 0; }
.tm-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.tm-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 8px;
  font: bold 14px Arial, Helvetica, sans-serif;
  cursor: pointer;
}
/* Mac OS 8's "Platinum" gray */
.tm-mac {
  color: #000;
  background: linear-gradient(#f2f2f2, #c9c9c9);
  border: 1px solid #555;
  border-radius: 5px;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #999;
}
.tm-mac:active { background: linear-gradient(#bdbdbd, #e0e0e0); }
.tm-icon { font-size: 16px; line-height: 1; }
/* Commodore 64's brown "breadbin" case with rainbow stripes */
.tm-c64 {
  color: #f3e7cf;
  background: linear-gradient(#8a6a4a, #5e4530);
  border: 2px solid;
  border-color: #b08a62 #3a2a1c #3a2a1c #b08a62;
  border-radius: 3px;
  letter-spacing: 1px;
}
.tm-c64:active { border-color: #3a2a1c #b08a62 #b08a62 #3a2a1c; }
/* Unix V6: a dark glass teletype */
.tm-v6 {
  color: #8fe09a;
  background: linear-gradient(#2c2c2c, #121212);
  border: 2px solid;
  border-color: #5a5a5a #1a1a1a #1a1a1a #5a5a5a;
  border-radius: 3px;
  font-family: "Courier New", monospace;
  letter-spacing: 1px;
}
.tm-v6:active { border-color: #1a1a1a #5a5a5a #5a5a5a #1a1a1a; }
.tm-stripes { display: inline-flex; flex-direction: column; gap: 1px; transform: skewX(-20deg); }
.tm-stripes i { display: block; width: 16px; height: 2px; }
.tm-stripes i:nth-child(1) { background: #e0413a; }
.tm-stripes i:nth-child(2) { background: #f39a2c; }
.tm-stripes i:nth-child(3) { background: #f5d33a; }
.tm-stripes i:nth-child(4) { background: #3fa14a; }

/* ---- Hammy Dash game ---- */
.dash-btn {
  flex-shrink: 0;
  min-width: 128px;
  padding: 6px 16px;
  font: 11px/1.6 "Press Start 2P", monospace;
  color: #fff;
  background: linear-gradient(#ffc24d, #ff7a3d);
  border: 2px solid #fff;
  border-radius: 999px;
  box-shadow: 0 3px 0 #b8451f, 0 0 14px rgba(255, 154, 60, 0.45);
  text-shadow: 1px 1px 0 #b8451f;
  cursor: pointer;
}
.dash-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #b8451f; }
.space-btn {
  background: linear-gradient(#9a7dff, #4a2ad8);
  box-shadow: 0 3px 0 #2a1566, 0 0 14px rgba(154, 125, 255, 0.5);
  text-shadow: 1px 1px 0 #2a1566;
}
.space-btn:active { box-shadow: 0 1px 0 #2a1566; }
.bit-btn {
  background: linear-gradient(#5bef9a, #129a5a);
  box-shadow: 0 3px 0 #0a5a34, 0 0 14px rgba(61, 255, 160, 0.45);
  text-shadow: 1px 1px 0 #0a5a34;
}
.bit-btn:active { box-shadow: 0 1px 0 #0a5a34; }
.tube-btn {
  background: linear-gradient(#7af6ff, #1a8fb8);
  box-shadow: 0 3px 0 #0b5470, 0 0 14px rgba(74, 240, 247, 0.45);
  text-shadow: 1px 1px 0 #0b5470;
}
.tube-btn:active { box-shadow: 0 1px 0 #0b5470; }
a.dash-btn { display: inline-block; text-align: center; text-decoration: none; box-sizing: border-box; }
a.dash-btn:hover { animation: none; }
.knit-btn {
  color: #3a1e00;
  background: linear-gradient(#ffe27a, #e0a000);
  box-shadow: 0 3px 0 #8a5a00, 0 0 14px rgba(255, 210, 63, 0.45);
  text-shadow: none;
}
.knit-btn:active { box-shadow: 0 1px 0 #8a5a00; }

/* ---- Purl Logic page ---- */
.purl-hint-btn {
  padding: 0;
  font: inherit;
  font-size: 15px;
  color: #8fc6ff;
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}
.purl-hint-btn:hover { color: #fff; }
/* the contact buttons on the About page (email, GitHub, Discord) */
.contact-btn {
  display: inline-block;
  font: inherit;
  font-size: 15px;
  padding: 3px 12px;
  color: #fff;
  background: var(--purple);
  border: 1px solid var(--blue);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
}
.contact-btn:hover { background: var(--blue); color: #000; }
.contact-stack { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 8px 0; }
/* the revealed address is long, so let it wrap instead of escaping the sidebar */
.email-addr { word-break: break-all; }
/* quick facts sit beside the animated gorge, box and drawing as neighbors */
.facts-and-gorge { display: flex; align-items: center; justify-content: center; gap: 24px; margin: 14px 0; }
.facts-and-gorge .bubble { flex: 0 1 auto; margin: 0; }
.facts-and-gorge .gorge { flex-shrink: 0; max-width: 100%; height: auto; border-radius: 6px; }
@media (max-width: 560px) { .facts-and-gorge { flex-direction: column; } }
.purl-levels { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.purl-level {
  padding: 4px 8px;
  font: 16px "Gentium Book Plus", Georgia, serif;
  text-align: left;
  color: var(--text);
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}
.purl-level:hover { border-color: var(--purple); }
.purl-level.on { background: var(--purple); color: #fff; }
.purl-help { text-align: left; font-size: 14px; line-height: 1.6; }
.purl-help b { color: var(--yellow); font: 16px VT323, monospace; }
.purl-grids { display: flex; flex-wrap: wrap; gap: 20px; margin: 10px 0; }
.purl-grids canvas { display: block; max-width: 100%; border-radius: 6px; }
.purl-label { margin: 6px 0 4px; font: 9px/1.6 "Press Start 2P", monospace; color: var(--cyan); }
#purl-code {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font: bold 16px/1.5 "Courier New", monospace;
  color: #7dffb0;
  background: #0b0624;
  border: 1px solid var(--purple);
  border-radius: 6px;
  resize: vertical;
  text-transform: uppercase;
}
.purl-insert, .purl-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.purl-status { min-height: 1.5em; font-weight: bold; }
.purl-status.good { color: #7dffb0; }
.purl-status.bad { color: #ff8a8a; }

/* ---- the terminal ---- */
.term-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
  padding: 8px 16px;
  font: 11px "Press Start 2P", monospace;
  color: #b8ffbf;
  background: radial-gradient(ellipse at 50% 30%, #123a24, var(--plum-dark) 80%);
  border: 1px solid rgba(93, 255, 106, 0.5);
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(93, 255, 106, 0.2);
  text-shadow: 0 0 4px rgba(93, 255, 106, 0.45);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, color 0.2s;
}
.term-btn:hover {
  color: #e2ffe5;
  border-color: rgba(93, 255, 106, 0.85);
  box-shadow: 0 0 14px rgba(93, 255, 106, 0.4);
}
.term-btn:active { transform: translateY(1px); }
.term-btn-prompt, .term-btn-cursor { color: #5dff6a; }
.term-btn-cursor { margin-left: -4px; animation: blink 1s steps(1) infinite; }
.dash .term-window, .dash .term-window * { -webkit-user-select: text; user-select: text; }
.term-screen {
  height: min(420px, 70vh);
  overflow-y: auto;
  padding: 12px 14px;
  font: bold 16px/1.45 "Courier New", monospace;
  color: #5dff6a;
  background: radial-gradient(ellipse at center, #062a10, #010a03);
  text-shadow: 0 0 5px rgba(93, 255, 106, 0.6);
  /* only break inside a word when the word cannot fit on a line of its own,
     which here means long filenames and urls and nothing else */
  overflow-wrap: break-word;
  cursor: text;
}
/* keep spacing exact in the output (for lined-up columns), but not around the prompt,
   where the line breaks in the HTML itself would otherwise show up as blank lines */
#term-out { white-space: pre-wrap; }
.term-echo { color: #b8ffbf; }
#term-out a { color: #ffe23a; text-shadow: 0 0 5px rgba(255, 226, 58, 0.6); }
#term-out .t-dir { color: #4af0f7; text-shadow: 0 0 5px rgba(74, 240, 247, 0.6); }
#term-out .t-choice { color: #ffe23a; text-decoration: none; text-shadow: 0 0 5px rgba(255, 226, 58, 0.6); }
#term-out .t-choice:hover { text-decoration: underline; }
#term-out .t-clue { color: #ff8ad8; text-shadow: 0 0 5px rgba(255, 138, 216, 0.6); }
#term-out .t-exe { color: #ffe23a; text-shadow: 0 0 5px rgba(255, 226, 58, 0.6); }
.term-line { display: flex; gap: 8px; align-items: baseline; }
.term-prompt { flex-shrink: 0; color: #b8ffbf; }
#term-in {
  flex: 1;
  min-width: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-shadow: inherit;
  background: transparent;
  border: 0;
  outline: none;
  caret-color: #5dff6a;
}
/* quick-command buttons under the terminal, only on touch screens */
.term-quick { display: none; flex-wrap: wrap; gap: 6px; justify-content: center; padding: 8px; background: #031407; }
.term-quick button {
  padding: 4px 10px;
  font: 14px "Courier New", monospace;
  font-weight: bold;
  color: #9dffb0;
  background: #062a10;
  border: 1px solid rgba(93, 255, 106, 0.6);
  border-radius: 999px;
}
@media (hover: none), (max-width: 520px) { .term-quick { display: flex; } }
@media (max-width: 520px) {
  /* A phone in portrait fitted about 38 columns of Courier New, and half the
     terminal's lines are longer than that, so the help listings wrapped into
     each other. VT323 is a real terminal face, and at a given size its
     characters are two thirds the width of Courier New's at the same cap
     height. Spending some of that on a larger size still leaves about a third
     more columns: 52 on a 390px phone, in letters 12% taller than before.
     16px is also the size at which iPhones stop zooming in on a focused
     input, which the typed line inherits. The face has no bold, so the glow
     carries the weight instead. */
  .term-screen {
    padding: 10px;
    font: 16px/1.4 VT323, "Courier New", monospace;
    height: min(380px, 60vh);
  }
  /* #term-in inherits the screen's 16px, which is the no-zoom threshold */
  .term-prompt { display: none; }
  .term-line::before { content: "$"; color: #b8ffbf; }
  /* whatever is still too long wraps with its continuation indented, so a
     wrapped entry cannot be read as the start of a new one */
  #term-out > div { padding-left: 4ch; text-indent: -4ch; }
  .term-quick { gap: 8px; }
  /* the narrower face would shrink these below a comfortable tap, so the
     padding grows to keep them the size they were */
  .term-quick button { padding: 6px 13px; font: 17px VT323, "Courier New", monospace; }
}

/* ---- computer museum ---- */
.exhibits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
  margin: 12px 0 24px;
}
.exhibit {
  background: var(--plum-dark);
  border: 1px solid #3b2470;
  border-radius: 12px;
  padding: 14px 16px;
}
.exhibit .art {
  position: relative;
  display: block;
  width: 128px;
  margin: 0 auto 8px;
  cursor: pointer;
  filter: drop-shadow(0 0 8px rgba(108, 182, 255, 0.25));
  transition: transform 0.2s, filter 0.2s;
}
.exhibit .art img { display: block; image-rendering: pixelated; }
.exhibit .art .frame-b { position: absolute; inset: 0; opacity: 0; }
/* hover over a machine (or tap it on a phone) to turn it on: lights blink, screens flicker */
.exhibit.on .art {
  transform: translateY(-3px);
  filter: drop-shadow(0 0 12px rgba(108, 182, 255, 0.55));
}
.exhibit.on .art .frame-b { animation: machine-on 0.9s steps(1) infinite; }
/* hide the first frame while the second shows, so nothing peeks through its see-through spots */
.exhibit.on .art > img:first-child { animation: machine-off 0.9s steps(1) infinite; }
/* only real mouse hovers count: phones treat a tap as a "sticky" hover, which would stop a second tap from turning it off */
@media (hover: hover) {
  .exhibit:hover .art {
    transform: translateY(-3px);
    filter: drop-shadow(0 0 12px rgba(108, 182, 255, 0.55));
  }
  .exhibit:hover .art .frame-b { animation: machine-on 0.9s steps(1) infinite; }
  .exhibit:hover .art > img:first-child { animation: machine-off 0.9s steps(1) infinite; }
}
@keyframes machine-on { 0% { opacity: 0; } 50% { opacity: 1; } }
@keyframes machine-off { 0% { opacity: 1; } 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .exhibit:hover .art, .exhibit.on .art { transform: none; }
  .exhibit:hover .art .frame-b, .exhibit.on .art .frame-b { animation: none; opacity: 1; }
  .exhibit:hover .art > img:first-child, .exhibit.on .art > img:first-child { animation: none; opacity: 0; }
}
.exhibit h3 { margin: 4px 0; }
.exhibit .year, .film .year { font: 11px "Press Start 2P", monospace; color: var(--cyan); margin-left: 4px; }
.exhibit p { margin: 6px 0; font-size: 16px; }
.exhibit .specs, .pt-body .specs { font: 16px/1.25 VT323, monospace; color: var(--muted); }
.exhibit .links { font-size: 16px; }
.tag.six502 { background: #129a5a; color: #fff; }
.tag.cpu.z80 { background: #2a6fd8; color: #fff; }
.tag.cpu.intel { background: #d86a2a; color: #fff; }
.tag.cpu.m68k { background: #8a4fd8; color: #fff; }
.tag.cpu.ppc { background: #1a9a9a; color: #fff; }
.tag.cpu.mips { background: #c23a6a; color: #fff; }
.tag.cpu.superh { background: #3a8a3a; color: #fff; }
.tag.cpu.none { background: #6b6585; color: #fff; }
.tag.kind { background: #4a7a9a; color: #fff; }
.legend { text-align: left; font-size: 14px; line-height: 1.9; }
.museum-link {
  text-align: center;
  margin: 16px 0 4px;
  padding-top: 14px;
  border-top: 1px dashed rgba(154, 125, 255, 0.4);
  font-size: 16px;
}
.museum-link .museum-btn { margin-top: 8px; }
.trivia-widget img {
  display: block;
  width: 100%;
  max-width: 180px;
  height: auto;
  margin: 0 auto 8px;
  border-radius: 6px;
  box-shadow: 0 0 12px rgba(255, 154, 60, 0.35);
}
.museum-btn {
  display: inline-block;
  text-decoration: none;
  background: var(--plum);
  border: 1px solid rgba(154, 125, 255, 0.55);
  border-radius: 999px;
  padding: 5px 16px;
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.museum-btn:hover { border-color: var(--blue); box-shadow: 0 0 8px rgba(108, 182, 255, 0.4); }
.col-main a.museum-btn { color: var(--blue); }
/* on phones, show the pattern list before the puzzle instead of at the very bottom */
@media (max-width: 800px) {
  .levels-first .col-main { order: 0; }
  .levels-first .purl-levels { flex-direction: row; flex-wrap: wrap; justify-content: center; }
}

/* hamsters shooting out from the middle of the screen before Tube Run opens */
.hamster-warp {
  position: fixed;
  inset: 0;
  z-index: 110;
  overflow: hidden;
  pointer-events: none;
}
.hamster-warp img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  margin: -14px 0 0 -20px;
  image-rendering: pixelated;
  opacity: 0;
  animation-name: warpout;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}
@keyframes warpout {
  0%   { transform: translate(0, 0) scale(0.2) rotate(0); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(2.2) rotate(var(--spin)); opacity: 1; }
}

/* the binary rain before Bit Muncher opens */
.bit-rain {
  position: fixed;
  inset: 0;
  z-index: 110;
  overflow: hidden;
  pointer-events: none;
}
.bit-rain span, .bit-rain img {
  position: absolute;
  top: -60px;
  animation-name: bitfall;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.bit-rain span {
  font-family: "Press Start 2P", monospace;
  color: #7dffb0;
  text-shadow: 0 0 8px #3dffa0;
}
.bit-rain img { height: auto; image-rendering: pixelated; }
@keyframes bitfall { to { transform: translateY(calc(100vh + 120px)); } }

.dash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(7, 3, 24, 0.75);
}
.dash[hidden] { display: none; }
/* short screens (phones held sideways): slimmer title bar, no help line */
@media (max-height: 500px) {
  .dash { padding: 4px; }
  .dash-window { --chrome: 44px; }
  .dash-title { padding: 2px 8px; font-size: 14px; }
  .dash-help { display: none; }
}
/* on phones, taps and long presses on a game shouldn't select or highlight anything */
.dash, .dash * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.dash canvas { touch-action: none; }
.dash-window {
  width: min(780px, 100%);
  background: var(--plum);
  border: 2px solid var(--cyan);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(74, 240, 247, 0.35);
}
.dash-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px 6px 14px;
  font: 11px/1.6 "Press Start 2P", monospace;
  color: #fff;
  background: linear-gradient(90deg, var(--blue-deep), var(--purple));
}
.dash-close {
  padding: 0 8px;
  font: bold 24px/1 Arial, sans-serif;
  color: #fff;
  background: none;
  border: 0;
  cursor: pointer;
}
/* each game canvas carries its width/height ratio in --ar; it fills the window's width,
   but never gets taller than the screen leaves room for (e.g. a phone held sideways) */
.dash-window { --chrome: 110px; }
.dash-window canvas {
  display: block;
  width: min(100%, calc((100vh - var(--chrome)) * var(--ar, 2)));
  width: min(100%, calc((100dvh - var(--chrome)) * var(--ar, 2)));
  height: auto;
  margin: 0 auto;
  image-rendering: pixelated;
  touch-action: none;
  cursor: pointer;
}
.dash-help {
  margin: 0;
  padding: 8px 12px;
  font: 16px/1.2 VT323, monospace;
  color: var(--muted);
  text-align: center;
}

/* the shower of hamsters before the game opens */
.hamster-rain {
  position: fixed;
  inset: 0;
  z-index: 110;
  overflow: hidden;
  pointer-events: none;
}
.hamster-rain img {
  position: absolute;
  top: -80px;
  height: auto;
  image-rendering: pixelated;
  animation-name: hamfall;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}
/* the swarm of astronaut hamsters before Hammy in Space opens */
.hamster-liftoff {
  position: fixed;
  inset: 0;
  z-index: 110;
  overflow: hidden;
  pointer-events: none;
}
.hamster-liftoff .astro {
  position: absolute;
  bottom: -90px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.35), rgba(108, 182, 255, 0.15) 45%, transparent 70%);
  animation-name: blastoff;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}
.hamster-liftoff .astro img { width: 70%; image-rendering: pixelated; }
/* rocket flame under each helmet */
.hamster-liftoff .astro::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 30%;
  height: 55%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at top, #fff6a0, #ffb23f 40%, rgba(255, 90, 40, 0.7) 65%, transparent 75%);
  border-radius: 0 0 50% 50%;
  animation: flicker 0.12s steps(2) infinite;
}
.konami-note {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  font: 22px "Press Start 2P", monospace;
  color: #ffe23a;
  text-shadow: 3px 3px 0 #2a1566, 0 0 18px rgba(255, 226, 58, 0.7);
  white-space: nowrap;
  animation: konaminote 4.4s ease-out forwards;
}
@keyframes konaminote {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  20% { transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes blastoff {
  from { transform: translate(0, 0) rotate(var(--tilt)); }
  to   { transform: translate(var(--drift), calc(-100vh - 200px)) rotate(var(--tilt)); }
}
@keyframes flicker { 50% { height: 38%; opacity: 0.8; } }

@keyframes hamfall {
  to { transform: translateY(calc(100vh + 160px)) rotate(var(--spin)); }
}
.time-machine .fine { font-size: 14px; color: var(--muted); }

.win95 {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(7, 3, 24, 0.75);
}
.win95[hidden] { display: none; }
.win95-window {
  display: flex;
  flex-direction: column;
  width: min(1200px, 100%);
  height: 100%;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  box-shadow: 0 0 40px rgba(108, 182, 255, 0.4);
}
.win95-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 4px 3px 8px;
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #fff;
  font: bold 13px Arial, Helvetica, sans-serif;
}
.win95-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  box-sizing: border-box;
  width: 20px;
  height: 18px;
  margin-left: 2px;
  padding: 0;
  font: bold 13px/14px Arial, sans-serif;
  text-align: center;
  text-decoration: none;
  color: #000;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  cursor: pointer;
}
.win95-btn:hover { animation: none; }
/* drawn for the same reason as the theater's arrow: Arial has no ↗ */
.win95-btn svg { display: block; }
.win95-screen {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: #000;
  border: 2px solid;
  border-color: #808080 #fff #fff #808080;
}
.win95-screen iframe {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1040px;
  height: 910px;
  border: 0;
  transform-origin: center;
  transform: translate(-50%, -50%);
  /* pages that don't paint their own background (like the V6 emulator) would
     otherwise show through as transparent onto the black screen behind them */
  background: #fff;
}
/* Infinite Mac and the Internet Archive size themselves to their frame */
.win95-screen iframe.fill { left: 0; top: 0; width: 100%; height: 100%; transform: none; }
/* Hammy's walking track under the welcome text; overflow keeps it beside the
   floated retro computer instead of running underneath it */
.welcome-zone { overflow: hidden; margin: 10px 0 4px; padding: 10px 14px 0; text-align: center; }
.welcome-zone .fine { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
/* Hammy is steered by script here, so switch off the sidebar-style pacing */
.welcome-zone .hamster-walker { animation: none; cursor: pointer; }
.welcome-zone .hamster-walker img { animation: none; transform-origin: 50% 80%; }
.welcome-zone .hamster-walker img.step { animation: scurry 0.3s steps(2) infinite; }
.welcome-zone img.flip  { animation: hamflip 0.8s ease-in-out; }
.welcome-zone img.hop   { animation: hamhop 0.45s ease-out 2; }
.welcome-zone img.munch { animation: munch 0.3s steps(2) 8; }
.welcome-zone img.nap   { transform: rotate(8deg) translateY(2px); filter: brightness(0.85); }
@keyframes hamflip {
  0%   { transform: translateY(0) rotate(0); }
  45%  { transform: translateY(-26px) rotate(-180deg); }
  100% { transform: translateY(0) rotate(-360deg); }
}
@keyframes hamhop { 50% { transform: translateY(-16px); } }
/* puffy cheeks */
@keyframes munch { 50% { transform: scale(1.12, 0.94); } }
.hammy-seed, .hammy-zz {
  position: absolute;
  font-size: 14px;
  pointer-events: none;
}
.hammy-seed { bottom: 6px; animation: seedshrink 2.4s linear forwards; }
@keyframes seedshrink { to { transform: scale(0.2); opacity: 0.3; } }
.hammy-zz {
  bottom: 30px;
  font: 9px "Press Start 2P", monospace;
  color: var(--cyan);
  animation: zzfloat 3.6s linear forwards;
}
@keyframes zzfloat { 0% { opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-14px); opacity: 0; } }

/* ---- pixel hamster that paces back and forth ---- */
.hamster-track {
  position: relative;
  height: 44px;
  border-bottom: 2px dotted var(--purple);
}
.hamster-walker {
  position: absolute;
  bottom: 0;
  left: 0;
  animation: wander 9s linear infinite;
}
.hamster-walker img {
  display: block;
  image-rendering: pixelated;
  animation: scurry 0.3s steps(2) infinite;
}
@keyframes wander {
  0%    { left: 0;                  transform: scaleX(1); }
  49.9% { left: calc(100% - 56px);  transform: scaleX(1); }
  50%   { left: calc(100% - 56px);  transform: scaleX(-1); }
  100%  { left: 0;                  transform: scaleX(-1); }
}
@keyframes scurry {
  50% { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .hamster-walker, .hamster-walker img { animation: none; }
}

/* ---- hamster facts + "link to me" ---- */
.hamfact { font-size: 16px; color: var(--text); }
.mobile-note { display: none; }
.fact-btn {
  padding: 4px 10px;
  font: 9px/1.5 "Press Start 2P", monospace;
  color: #fff;
  background: var(--purple);
  border: 1px solid var(--cyan);
  border-radius: 999px;
  cursor: pointer;
}
.fact-btn:hover { background: var(--blue-deep); }
.link-me img { display: block; margin: 6px auto; image-rendering: pixelated; }
.link-me .fact-btn { display: block; margin: 0 auto; }
.link-me textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 6px 0;
  padding: 4px;
  font: 16px/1.1 VT323, monospace;
  color: var(--cyan);
  background: #0b0624;
  border: 1px solid var(--purple);
  border-radius: 4px;
  resize: none;
}

/* ---- hamsters around the site ---- */
.nav-hamster,
.peeker,
.inline-hamster,
.wheel img {
  image-rendering: pixelated;
}
/* perched on top of the nav bar, facing left */
.nav-hamster {
  position: absolute;
  right: 170px;
  top: -28px;
  transform: scaleX(-1);
}
/* peeking over the top edge of a card or bubble */
.card, .bubble { position: relative; }
.peeker {
  position: absolute;
  top: -27px;
  right: 26px;
  animation: peek 4s ease-in-out infinite;
}
@keyframes peek {
  0%, 70%, 100% { transform: translateY(0); }
  80%, 90%      { transform: translateY(-4px); }
}
.inline-hamster {
  vertical-align: middle;
  margin-left: 6px;
  animation: scurry 0.6s steps(2) infinite;
}
/* keep the page content above the drifting space hamster */
#header, #frame, #footer { position: relative; z-index: 1; }
#nav { z-index: 1; }

/* astronaut hamster tumbling slowly across the starfield */
.space-hamster {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 0;
  width: 66px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.35), rgba(108, 182, 255, 0.12) 45%, transparent 70%);
  pointer-events: none;
  animation: spacedrift 50s linear infinite;
}
.space-hamster img {
  image-rendering: pixelated;
  animation: tumble 14s linear infinite;
}
@keyframes spacedrift {
  from { transform: translate(-90px, 80vh); }
  to   { transform: translate(calc(100vw + 90px), 12vh); }
}
@keyframes tumble { to { transform: rotate(360deg); } }

/* "squeak!" when you click a hamster */
.squeak {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  transform: translateX(-50%);
  font: 11px "Press Start 2P", monospace;
  color: var(--yellow);
  text-shadow: 1px 1px 0 #000;
  animation: squeak 1s ease-out forwards;
}
@keyframes squeak {
  to { transform: translate(-50%, -30px); opacity: 0; }
}
img[src*="hamster"] { cursor: pointer; }

/* hamster napping on top of the retro computer */
.retro { position: relative; }
.nap-hamster {
  position: absolute;
  top: -26px;
  left: 22px;
  z-index: 1;
  image-rendering: pixelated;
}
.zzz {
  position: absolute;
  top: -44px;
  left: 62px;
  font: 9px "Press Start 2P", monospace;
  color: var(--cyan);
}
.zzz i {
  position: absolute;
  font-style: normal;
  opacity: 0;
  animation: zzz 3s linear infinite;
}
.zzz i:nth-child(2) { animation-delay: 1s; }
.zzz i:nth-child(3) { animation-delay: 2s; }
@keyframes zzz {
  0%   { transform: translate(0, 0); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(14px, -20px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .zzz i { animation: none; opacity: 1; }
  .zzz i:nth-child(2) { transform: translate(7px, -10px); }
  .zzz i:nth-child(3) { transform: translate(14px, -20px); }
}

/* hamster running in a wheel */
.wheel {
  position: relative;
  width: 70px;
  height: 70px;
  margin: 0 auto 8px;
}
.wheel-ring {
  position: absolute;
  inset: 0;
  border: 3px solid var(--cyan);
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(74, 240, 247, 0.45) 0 3deg, transparent 3deg 45deg);
  animation: wheelspin 1.2s linear infinite;
}
.wheel img {
  position: absolute;
  left: 50%;
  bottom: 5px;
  margin-left: -17px;
  animation: scurry 0.25s steps(2) infinite;
}
@keyframes wheelspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .peeker, .inline-hamster, .wheel-ring, .wheel img { animation: none; }
}
@media (max-width: 800px) {
  .nav-hamster { right: 40px; }
}

/* ---- footer with the button wall ---- */
#footer {
  max-width: 1100px;
  margin: 16px auto 0;
  padding: 14px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.6);
  border: 1px dashed var(--yellow);
  border-radius: 18px;
  text-align: center;
  font: 14px "Gentium Book Plus", Georgia, serif;
  color: var(--muted);
}
#footer p { margin: 8px 0 0; }

/* ---- 88x31 buttons, drawn in CSS ---- */
.buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  line-height: 0;
}

.b88 {
  width: 88px;
  height: 31px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0 4px;
  overflow: hidden;
  font: bold 10px/1.05 Arial, Helvetica, sans-serif;
  color: #000;
  border: 2px solid;
  border-color: #fff #555 #555 #fff;
  text-decoration: none;
}
.b88:hover { animation: none; filter: brightness(1.15); }
.b88 .icon { font-size: 18px; line-height: 1; }

/* "made with linux" */
.b-linux { background: linear-gradient(135deg, #fff27a, #f5b400); }

/* "hamster powered" */
.b-hamster { background: linear-gradient(#fffbe0, #ffe27a); color: #7a3a00; gap: 3px; padding: 0 3px; font-size: 9px; }
.b-hamster img { image-rendering: pixelated; }

/* "powered by 5v" */
.b-5v { background: linear-gradient(#d62828 0 50%, #1b1b1b 50%); color: #fff; }
.b-5v .icon { color: var(--yellow); }

/* "mail me": the classic animated GIF of a letter flying between two computers */
.mail-gif {
  width: 88px;
  height: 31px;
  box-sizing: border-box;
  line-height: 0;
  background: #fff;
  border: 2px solid;
  border-color: #fff #555 #555 #fff;
}
.mail-gif img { display: block; image-rendering: pixelated; }
.b-linux img { width: 20px; height: 24px; }

/* "html" */
.b-html { background: #000; color: #0f0; border-color: #0f0 #060 #060 #0f0; font-family: "Courier New", monospace; }

/* "knit happens": a ball of yarn under the stars */
.b-knit {
  color: #cfe3ff;
  background:
    radial-gradient(1px 1px at 12px 6px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 70px 22px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 78px 7px, #ffe23a 50%, transparent 51%),
    radial-gradient(1px 1px at 40px 25px, #4af0f7 50%, transparent 51%),
    radial-gradient(1px 1px at 58px 4px, #fff 50%, transparent 51%),
    linear-gradient(#1a0b3a, #3d2163);
  border-color: #9a7dff #1a0b3a #1a0b3a #9a7dff;
  justify-content: center;
  text-shadow: 1px 1px 0 #000;
}

/* "ohm sweet ohm" */
.b-ohm { background: linear-gradient(135deg, #c9a8ff, #7b4dff); color: #fff; font-size: 9px; }
.b-ohm .icon { font: bold 20px Georgia, serif; }

/* "made w/ love" */
.b-love { background: linear-gradient(#e3f1ff, #6cb6ff); justify-content: center; }

/* "under construction" */
.b-constr { background: repeating-linear-gradient(45deg, #ffcc00 0 8px, #000 8px 16px); justify-content: center; }
.b-constr span { background: #ffcc00; padding: 2px; font-size: 9px; }

/* ---- phones ---- */
@media (max-width: 800px) {
  #header h1 { font-size: 38px; }
  .planet { display: none; }
  #nav { border-radius: 24px; }
  #frame, #frame.two-col { grid-template-columns: 1fr; }
  .col-main { order: -1; padding: 16px 18px; }
  .col-left, .col-right { border: 0; border-top: 2px dotted var(--purple); }
}

@media (max-width: 520px) {
  .retro { float: none; margin: 56px auto 16px; }
  #nav { padding: 6px 12px; gap: 2px 10px; }
  #nav a { font-size: 19px; }
  .timeline .when { display: block; }
}

/* Windows 95 needs a mouse and keyboard */
@media (max-width: 800px), (hover: none) {
  .mobile-note { display: block; margin-top: 4px; }
}

/* ---- processor timeline ---- */
.tag.cpu.arm { background: #3a9a5a; color: #fff; }
.pt { position: relative; margin: 18px 0; }
.pt::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 74px;
  width: 2px;
  background: linear-gradient(var(--cyan), var(--purple), var(--orange));
  opacity: 0.6;
}
.pt-entry { position: relative; display: flex; gap: 22px; margin: 0 0 18px; scroll-margin-top: 16px; }
.pt-year {
  flex: 0 0 60px;
  width: 60px;
  padding-top: 5px;
  text-align: right;
  font: 11px "Press Start 2P", monospace;
  color: var(--cyan);
}
.pt-entry::before {
  content: "";
  position: absolute;
  left: 69px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--plum-dark);
  border: 2px solid var(--cyan);
  box-shadow: 0 0 8px rgba(74, 240, 247, 0.5);
}
.pt-body {
  flex: 1;
  min-width: 0;
  background: var(--plum-dark);
  border: 1px solid #3b2470;
  border-radius: 12px;
  padding: 12px 16px;
}
.pt-body h3 { margin: 4px 0; }
.pt-body { margin-left: 8px; }
.pt-icon { display: block; max-width: 100%; height: auto; margin: 0 auto 6px; image-rendering: pixelated; }
.pt-chip { width: 170px; height: 34px; margin: 10px 0 12px 8px; font-size: 10px; letter-spacing: 1px; color: #e8e2d0; }
.pt-chip::before, .pt-chip::after { height: 6px; }
.pt-chip::before { top: -6px; }
.pt-chip::after { bottom: -6px; }
.pt-chip .notch { width: 11px; height: 11px; left: -6px; }
.pt-body .found { font-size: 14px; color: var(--muted); }
.pt-body .links { font-size: 14px; }
.exhibit:target { outline: 2px solid var(--cyan); box-shadow: 0 0 16px rgba(74, 240, 247, 0.5); }
.exhibit { scroll-margin-top: 16px; }
@media (max-width: 600px) {
  .pt::before { left: 6px; }
  .pt-entry { flex-direction: column; gap: 6px; padding-left: 22px; }
  .pt-entry::before { left: 1px; }
  .pt-year { flex: none; text-align: left; }
}

/* ---- programming language family tree ---- */
.tag.lang.proto { background: #6e7a8a; color: #fff; }
.tag.lang.business { background: #b0802a; color: #fff; }
.tag.lang.formula { background: #2a6fd8; color: #fff; }
.tag.lang.c { background: #d86a2a; color: #fff; }
.tag.lang.oop { background: #8a4fd8; color: #fff; }
.tag.lang.functional { background: #3a9a5a; color: #fff; }
.tag.lang.script { background: #c23a6a; color: #fff; }
.tag.lang.data { background: #1a9a9a; color: #fff; }
.tag.lang.fun { background: #e8a25a; color: #2a1a00; }
.lt-tree { overflow-x: auto; margin: 10px 0 18px; padding: 8px 0; background: var(--plum-dark); border: 1px solid #3b2470; border-radius: 12px; }
.lt-svg { display: block; margin: 0 auto; max-width: none; }
.lt-svg text { font: 13px VT323, monospace; text-anchor: middle; fill: #fff; pointer-events: none; }
.lt-svg .lt-lane { font-size: 13px; fill: var(--muted); }
.lt-svg .lt-year { text-anchor: end; fill: var(--cyan); font-size: 13px; }
.lt-edge { fill: none; stroke-width: 1.4; opacity: 0.45; }
.lt-node { cursor: pointer; outline: none; }
.lt-node rect { stroke: rgba(255, 255, 255, 0.25); stroke-width: 1; }
.lt-svg .lit .lt-node, .lt-svg.lit .lt-node { opacity: 0.25; }
.lt-svg.lit .lt-node.on { opacity: 1; }
.lt-svg.lit .lt-node.me rect { stroke: #fff; stroke-width: 2; }
.lt-svg.lit .lt-edge { opacity: 0.08; }
.lt-svg.lit .lt-edge.on { opacity: 1; stroke-width: 2.2; }
.lt-node.proto rect { fill: #6e7a8a; } .lt-edge.proto { stroke: #a6b4c4; }
.lt-node.business rect { fill: #b0802a; } .lt-edge.business { stroke: #e0b04a; }
.lt-node.formula rect { fill: #2a6fd8; } .lt-edge.formula { stroke: #6aa6ff; }
.lt-node.c rect { fill: #d86a2a; } .lt-edge.c { stroke: #ff9a5a; }
.lt-node.oop rect { fill: #8a4fd8; } .lt-edge.oop { stroke: #b88aff; }
.lt-node.functional rect { fill: #3a9a5a; } .lt-edge.functional { stroke: #6ad08a; }
.lt-node.script rect { fill: #c23a6a; } .lt-edge.script { stroke: #ff6a9a; }
.lt-node.data rect { fill: #1a9a9a; } .lt-edge.data { stroke: #4ad0d0; }
.lt-node.fun rect { fill: #e8a25a; } .lt-node.fun text { fill: #2a1a00; } .lt-edge.fun { stroke: #e8a25a; }
.lt-index { display: none; }
.lt-index p { margin: 8px 0; font-size: 14px; }
.lt-label { margin: 10px 0 4px; font: 16px/1.25 VT323, monospace; color: var(--muted); }
.lt-code {
  margin: 0 0 10px;
  padding: 10px 12px;
  overflow-x: auto;
  font: bold 14px/1.4 "Courier New", monospace;
  color: #5dff6a;
  background: radial-gradient(ellipse at center, #062a10, #010a03);
  border-radius: 8px;
  text-shadow: 0 0 4px rgba(93, 255, 106, 0.5);
}
.lt-entry { scroll-margin-top: 16px; }
.lt-entry:target .pt-body { outline: 2px solid var(--cyan); box-shadow: 0 0 16px rgba(74, 240, 247, 0.5); }
.lt-svg.compact text { font-size: 12px; }
.lt-swipe { display: none; }
@media (max-width: 700px) {
  .lt-index { display: block; }
  .lt-swipe { display: inline; }
  .lt-tree { margin-left: -6px; margin-right: -6px; }
}
.lt-code code { background: none; padding: 0; border: 0; color: inherit; font: inherit; border-radius: 0; }

/* ---- operating system family tree (reuses the language tree styles) ---- */
.tag.os.mainframe { background: #6b6585; color: #fff; }
.tag.os.unix { background: #3a9a5a; color: #fff; }
.tag.os.apple { background: #8a4fd8; color: #fff; }
.tag.os.pc { background: #2a6fd8; color: #fff; }
.tag.os.gui { background: #d86a2a; color: #fff; }
.tag.os.mobile { background: #c23a6a; color: #fff; }
.tag.os.fun { background: #e8a25a; color: #2a1a00; }
.lt-node.mainframe rect { fill: #6b6585; } .lt-edge.mainframe { stroke: #a9a3c3; }
.lt-node.unix rect { fill: #3a9a5a; } .lt-edge.unix { stroke: #6ad08a; }
.lt-node.apple rect { fill: #8a4fd8; } .lt-edge.apple { stroke: #b88aff; }
.lt-node.pc rect { fill: #2a6fd8; } .lt-edge.pc { stroke: #6aa6ff; }
.lt-node.gui rect { fill: #d86a2a; } .lt-edge.gui { stroke: #ff9a5a; }
.lt-node.mobile rect { fill: #c23a6a; } .lt-edge.mobile { stroke: #ff6a9a; }

/* some machines step through all their colors: a strip of --frames frames that slides along while you hover */
.exhibit .art .frame-strip { position: absolute; inset: 0; overflow: hidden; opacity: 0; }
.exhibit .art .frame-strip img { max-width: none; width: calc(128px * var(--frames)); height: 96px; }
.exhibit.on .art.has-strip .frame-strip { opacity: 1; }
.exhibit.on .art.has-strip .frame-strip img { animation: strip-steps calc(0.5s * var(--frames)) steps(var(--frames)) infinite; }
.exhibit.on .art.has-strip > img:first-child { animation: none; opacity: 0; }
@media (hover: hover) {
  .exhibit:hover .art.has-strip .frame-strip { opacity: 1; }
  .exhibit:hover .art.has-strip .frame-strip img { animation: strip-steps calc(0.5s * var(--frames)) steps(var(--frames)) infinite; }
  .exhibit:hover .art.has-strip > img:first-child { animation: none; opacity: 0; }
}
@keyframes strip-steps { to { transform: translateX(calc(-128px * var(--frames))); } }
@media (prefers-reduced-motion: reduce) {
  .exhibit:hover .art.has-strip .frame-strip img, .exhibit.on .art.has-strip .frame-strip img { animation: none; transform: translateX(-128px); }
}

/* ---- Hamster Arcade page: a row of game cabinets ---- */
.cabinets { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; margin: 18px 0; }
/* each cabinet has striped side art, a lit marquee, a CRT screen, a control deck and a coin door.
   the colors are flat, from the NES palette: --cab is the main color, --cab-dark its shadow,
   --cab-hi the highlight. shading is done with dithering instead of gradients */
.cabinet {
  --cab: #f83800;
  --cab-dark: #a81000;
  --cab-hi: #fca044;
  --dither: repeating-conic-gradient(rgba(0, 0, 0, 0.35) 0 25%, transparent 0 50%) 0 0 / 4px 4px;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 0 10px;
  background:
    linear-gradient(#000, #000) 10px 0 / calc(100% - 20px) 100% no-repeat,
    repeating-linear-gradient(135deg, var(--cab) 0 8px, var(--cab-dark) 8px 16px);
  /* a chrome T-molding strip around the edge */
  box-shadow: inset 0 0 0 2px #bcbcbc, inset 0 0 0 4px #000;
  clip-path: polygon(0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px,
    calc(100% - 4px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px),
    calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px),
    4px calc(100% - 8px), 0 calc(100% - 8px));
}
/* clip-path cuts off box-shadow, so the pixel drop shadow goes on as a filter */
.cabinets > .cabinet { filter: drop-shadow(6px 6px 0 #000); }
.cab-dash { --cab: #f83800; --cab-dark: #a81000; --cab-hi: #fca044; }
.cab-space { --cab: #6844fc; --cab-dark: #2000a8; --cab-hi: #b8b8f8; }
.cab-bits { --cab: #00a800; --cab-dark: #005800; --cab-hi: #b8f818; }
.cab-tube { --cab: #0088b8; --cab-dark: #004058; --cab-hi: #00e8d8; }
.cab-purl { --cab: #f8b800; --cab-dark: #ac7c00; --cab-hi: #fce0a8; }
.cab-mystery { --cab: #d800cc; --cab-dark: #6c0058; --cab-hi: #f878f8; }
/* the marquee is tall enough for two lines, so a long name doesn't push its screen lower than its neighbors' */
.cab-marquee {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 70px;
  margin: 0 -10px;
  padding: 12px 14px 20px;
  font: 11px/1.5 "Press Start 2P", monospace;
  color: #fcfcfc;
  /* the dither only covers the bottom half of the marquee, as a shading band */
  background: linear-gradient(var(--cab) 55%, transparent 55%), var(--dither), var(--cab);
  border-bottom: 4px solid #000;
  box-shadow: inset 0 4px 0 var(--cab-hi), inset 0 -4px 0 var(--cab-dark);
  /* a two-color offset shadow, the way 80s logos did it */
  text-shadow: 2px 2px 0 var(--cab-dark), 4px 4px 0 #000;
}
/* a row of marquee bulbs */
.cab-marquee::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 7px;
  height: 6px;
  background: radial-gradient(circle, #fcfcfc 0 2px, transparent 2px) 0 0 / 12px 6px repeat-x;
}
.cab-purl .cab-marquee { color: #000; text-shadow: 2px 2px 0 var(--cab-hi); }
/* the screen grows so every control deck lines up at the bottom */
.cab-screen {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  margin: 14px 8px 0;
  padding: 14px 12px;
  background: #001400;
  border: 8px solid #1c1c1c;
  border-radius: 12px / 18px;
  box-shadow: inset 0 0 22px #000, 0 0 0 3px #4c4c4c, 0 0 0 5px #000;
}
.cab-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: repeating-linear-gradient(rgba(0, 0, 0, 0.35) 0 1px, transparent 1px 3px);
  pointer-events: none;
}
/* a little looping animation of each game, a strip of frames stepped through like a flipbook */
.cab-anim { display: block; width: 144px; height: 72px; overflow: hidden; flex-shrink: 0; }
.cab-anim img { display: block; max-width: none; height: 72px; image-rendering: pixelated;
  animation: cab-anim calc(var(--tick) * var(--frames)) steps(var(--frames)) infinite; }
@keyframes cab-anim { to { transform: translateX(calc(-144px * var(--frames))); } }
@media (prefers-reduced-motion: reduce) { .cab-anim img { animation: none; } }
/* green phosphor text */
.cab-screen p { margin: 0; font: 18px/1.15 VT323, monospace; color: #58f898; text-shadow: 0 0 6px rgba(88, 248, 152, 0.65); }
.cab-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 14px -10px 0;
  padding: 10px 14px 14px;
  background: var(--dither), var(--cab-dark);
  border-top: 4px solid #000;
  border-bottom: 4px solid #000;
  box-shadow: inset 0 3px 0 var(--cab);
}
/* a joystick on the left and three buttons on the right */
.cab-deck { display: flex; align-items: flex-end; justify-content: space-between; align-self: stretch; padding: 0 10px; height: 22px; }
.cab-stick { position: relative; width: 4px; height: 14px; margin-left: 6px; background: #bcbcbc; box-shadow: 1px 0 0 #7c7c7c; }
.cab-stick::before { content: ""; position: absolute; left: -5px; top: -8px; width: 14px; height: 14px; border-radius: 50%; background: #f83800; box-shadow: inset -3px -3px 0 #a81000, inset 2px 2px 0 #fca044; }
.cab-stick::after { content: ""; position: absolute; left: -7px; bottom: -3px; width: 18px; height: 4px; background: #000; }
.cab-buttons { display: flex; gap: 6px; }
.cab-buttons i { width: 12px; height: 12px; border-radius: 50%; background: var(--cab-hi); box-shadow: inset -2px -2px 0 var(--cab), 0 2px 0 #000; }
.cab-controls {
  margin: 0;
  min-height: 2.5em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font: 16px/1.25 VT323, monospace;
  color: #fcfcfc;
  text-shadow: 1px 1px 0 #000;
}
/* square pixel buttons with a hard bevel */
.cabinet .dash-btn {
  min-width: 140px;
  padding: 9px 14px 8px;
  font: 11px/1.6 "Press Start 2P", monospace;
  color: #fcfcfc;
  background: var(--cab);
  border: 3px solid #000;
  border-radius: 0;
  box-shadow: inset 3px 3px 0 var(--cab-hi), inset -3px -3px 0 var(--cab-dark), 0 4px 0 #000;
  text-shadow: 2px 2px 0 #000;
  animation: none;
}
.cabinet .dash-btn:hover { filter: brightness(1.15); }
.cabinet .dash-btn:active { transform: translateY(3px); box-shadow: inset 3px 3px 0 var(--cab-dark), inset -3px -3px 0 var(--cab-hi), 0 1px 0 #000; }
.col-main .cabinet a.knit-btn { color: #000; text-shadow: 1px 1px 0 var(--cab-hi); }
/* the coin door */
.cab-coin {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 -10px;
  padding: 10px 0 14px;
  background: #000;
  font: 9px "Press Start 2P", monospace;
  color: #f83800;
}
.cab-coin span { width: 6px; height: 14px; background: #000; border: 2px solid #f83800; box-shadow: inset 0 0 0 1px #fca044; }
.cab-coin b { font-weight: normal; }
.mystery-btn {
  background: linear-gradient(#ff6ad5, #8a1f6a);
  box-shadow: 0 3px 0 #4a0f38, 0 0 14px rgba(255, 106, 213, 0.45);
  text-shadow: 1px 1px 0 #4a0f38;
}
.mystery-btn:active { box-shadow: 0 1px 0 #4a0f38; }
.hiscores { text-align: left; line-height: 1.9; }
.hiscores span { float: right; font: 11px "Press Start 2P", monospace; color: var(--yellow); }
/* the gold Knit button needs dark text even inside .col-main, where links are pale yellow */
.col-main a.knit-btn { color: #3a1e00; }

/* ---- museum wings: big buttons to the timelines and the screening room ---- */
.wings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 14px 0 6px;
}
.col-main a.wing {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 3px;
  padding: 10px 12px;
  text-decoration: none;
  color: var(--blue);
  background: var(--plum);
  border: 1px solid rgba(154, 125, 255, 0.55);
  border-radius: 10px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
}
.wing b { font-size: 16px; }
.wing span { font-size: 14px; color: #d9cfff; }
.col-main a.wing:hover { border-color: var(--blue); box-shadow: 0 0 10px rgba(108, 182, 255, 0.45); transform: translateY(-1px); }

/* ---- museum screening room ---- */
.films {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.film {
  background: rgba(20, 10, 40, 0.55);
  border: 1px solid rgba(154, 125, 255, 0.35);
  border-radius: 10px;
  padding: 12px;
}
.film:target { outline: 2px solid var(--blue); }
.film h3 { margin: 10px 0 4px; }
.film .specs { font-family: "VT323", monospace; font-size: 16px; margin: 0 0 6px; }
.film-screen {
  position: relative;
  display: block;
  background: #1b1b1b;
  border: 6px solid #3a3a3a;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: inset 0 0 0 2px #000, 0 0 12px rgba(108, 182, 255, 0.25);
}
.film-screen img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(0.85); }
/* scanlines */
.film-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px);
  pointer-events: none;
}
.film-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 38px;
  margin: -19px 0 0 -27px;
  background: rgba(20, 10, 40, 0.8);
  border: 2px solid var(--blue);
  border-radius: 8px;
  z-index: 1;
  transition: background 0.2s;
}
.film-play::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 9px;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--blue);
}
.film-screen:hover .film-play { background: rgba(108, 182, 255, 0.35); }

/* Purl Logic's Run button: the same height as its Check now and Reset neighbors, with a drawn
   play triangle (Press Start 2P has no ▶) */
#purl-run {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 14px;
  border-radius: 4px;
  font: 11px/1 "Press Start 2P", monospace;
  vertical-align: middle;
}
#purl-run::before {
  content: "";
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent currentColor;
}

/* the museum, its timeline, trees and screening room, and the arcade keep their original
   bold serif titles for machines, sections and the page */
.classic-titles .col-main h2 { font: bold 32px "Gentium Book Plus", Georgia, serif; }
.classic-titles .col-main h3 { font: bold 21px "Gentium Book Plus", Georgia, serif; }
/* but the page title itself matches the other pages, like "Welcome!" on the home page */
.classic-titles .col-main > h2:first-child { font: 32px "Chewy", cursive; }

/* sidebar text keeps the pixel font (headings stay Chewy, buttons and code keep theirs) */
.col-left, .col-right { font-family: "Pixelify Sans", Verdana, sans-serif; }

/* the row of buttons between the museum's pages, with the current page lit up */
.wings-nav { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 6px 0 14px; }
.wings-nav .wing { padding: 8px 10px; }
.wings-nav .wing b { font-size: 14px; }
.wing.on {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  background: var(--purple);
  border: 1px solid var(--blue);
  border-radius: 10px;
}
/* the museum's gallery shortcuts sit just under the big buttons, a little smaller */
/* the gallery nav sits in two tidy rows of four */
.wings-eras { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 0; }
.wings-eras .wing { padding: 6px 8px; }
@media (max-width: 700px) { .wings-eras { grid-template-columns: repeat(2, 1fr); } }
.eras-label { margin: 14px 0 6px; }

/* exhibit of the day, in the home sidebar: always running, like a shop-window demo */
.exhibit-day { text-align: center; }
.exhibit-day a { text-decoration: none; }
.exhibit-day .art { position: relative; display: block; width: 128px; margin: 4px auto 6px; }
.exhibit-day .art img { display: block; image-rendering: pixelated; }
.exhibit-day .art .frame-b { position: absolute; inset: 0; animation: machine-on 3s steps(1) infinite; }
.exhibit-day .art > img:first-child { animation: machine-off 3s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) {
  .exhibit-day .art .frame-b { animation: none; opacity: 0; }
  .exhibit-day .art > img:first-child { animation: none; opacity: 1; }
}
.exhibit-day .ex-year { color: var(--muted); font-size: 14px; }

/* ---- the screening room's in-page theater ---- */
.theater {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(7, 3, 24, 0.85);
}
.theater[hidden] { display: none; }
.theater-box {
  width: min(960px, 100%);
  background: var(--panel);
  border: 2px solid var(--purple);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(123, 77, 255, 0.5);
}
.theater-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font: bold 18px "Gentium Book Plus", Georgia, serif;
}
.theater-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 26px;
  padding: 1px 6px;
  font: bold 16px/22px Arial, sans-serif;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: var(--purple);
  border: 1px solid var(--blue);
  border-radius: 6px;
  cursor: pointer;
}
/* The two buttons live in their own group, which must keep its full width: as
   a shrinkable flex item it was squeezed by long titles until the buttons
   wrapped one above the other on a phone. flex: none holds it at its natural
   width and the title wraps instead, which is what the room is for. */
.tt-acts { display: flex; flex: none; gap: 6px; }
.tt-name { min-width: 0; }
.theater-btn:hover { background: var(--blue); color: #000; }
/* The arrow is drawn rather than typed: Arial has no ↗, so the browser borrowed
   it from a fallback font whose glyph sat well below the middle of the button. */
.theater-btn svg { display: block; }
.theater-screen { aspect-ratio: 16 / 9; background: #000; }
.theater-screen iframe { display: block; width: 100%; height: 100%; border: 0; }
/* the theater can open over the terminal or the time machine, so it sits higher */
#hammy-theater { z-index: 120; }

/* the pixel portrait at the top of the museum */
.museum-hero {
  display: block;
  width: min(100%, 320px);
  height: auto;
  margin: 10px auto 14px;
  image-rendering: pixelated;
  border: 2px solid var(--purple);
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(123, 77, 255, 0.35);
}

/* a few background stars that twinkle, behind everything */
.twinkle { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.twinkle i {
  position: absolute;
  display: block;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 4px #cfe3ff;
  animation-name: twinkle;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.12; transform: scale(0.7); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* watch and try buttons on the museum cards */
.card-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px 0 4px; }
.card-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 13px;
  font: 15px/1.5 "Gentium Book Plus", Georgia, serif;
  color: #fff;
  text-decoration: none;
  border: 1px solid;
  border-radius: 999px;
  cursor: pointer;
}
.card-btn.watch { background: #b5342a; border-color: #ff7a6e; }
/* a play triangle drawn in CSS: the \25B6 character renders as a grey system
   emoji on phones instead of taking the button's colour */
.card-btn.watch::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 7px solid currentColor;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
}
.card-btn.watch:hover { background: #e0413a; }
.card-btn.play { background: #1d6b4a; border-color: #5bef9a; }
.card-btn.play:hover { background: #2a9a66; }
.card-btn.read { background: transparent; border-color: var(--purple); color: var(--text); }
.card-btn.read:hover { background: var(--purple); color: #fff; }
@media (hover: none) {
  /* finger-sized targets on touch screens */
  .card-btn { padding: 8px 14px; }
  .card-btns { gap: 10px; }
}