/* ==========================================================================
   Unlockable themes
   Every text/background pair below was checked for WCAG AA (4.5:1+).
   html gets "theme-flat" plus "theme-<name>" for any non-classic theme.
   ========================================================================== */

/* ---------- Shared base for all non-classic themes ---------- */
.theme-flat {
  --control-radius: 0;
  --panel-radius: 0;
  --panel-border: 1px solid rgba(var(--glow), 0.5);
  --panel-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.theme-flat h1,
.theme-flat h2,
.theme-flat h3 { text-transform: none; letter-spacing: 0; }
.theme-flat .eyebrow { letter-spacing: 0.08em; }

.theme-flat .panel {
  display: block;
  border: var(--panel-border);
  border-radius: var(--panel-radius);
  background: var(--panel);
  box-shadow: var(--panel-shadow);
}
.theme-flat .panel__top,
.theme-flat .panel__bottom,
.theme-flat .panel__rail { display: none; }
.theme-flat .panel__body { padding: 2rem clamp(1.25rem, 4vw, 3rem) 2.25rem; }
.theme-flat .panel__body:has(.pineapple) { padding-bottom: 3.5rem; }
.theme-flat .panel h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); }

.theme-flat .brand__block { border-radius: var(--control-radius); }
.theme-flat .site-nav a,
.theme-flat .site-nav li:nth-child(n) a {
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(var(--glow), 0.6);
  border-radius: var(--control-radius);
}
.theme-flat .site-nav a:hover,
.theme-flat .site-nav a:focus-visible { background: var(--red); color: var(--on-accent); }
/* The console number strip under the header is a classic-theme thing only */
.theme-flat .readouts { display: none; }
.theme-flat .site-header { padding-bottom: 0.75rem; }

.theme-flat .btn { border-radius: var(--control-radius); border-width: 1px; }
.theme-flat .btn--ghost { background: transparent; }
.theme-flat .stat,
.theme-flat .stat:nth-child(n) {
  border: 1px solid rgba(var(--glow), 0.55);
  border-radius: var(--control-radius);
  background: transparent;
  text-align: center;
  align-items: center;
}
.theme-flat .card,
.theme-flat .ranked li,
.theme-flat .ranked li::before,
.theme-flat .pills a,
.theme-flat .toast,
.theme-flat .dock,
.theme-flat .dock__btn,
.theme-flat .theme-menu,
.theme-flat .theme-menu button,
.theme-flat kbd { border-radius: var(--control-radius); }
.theme-flat.motion-on .card:hover,
.theme-flat.motion-on .btn:hover { transform: none; }
.theme-flat .timeline__item::before { border-radius: var(--control-radius); }
.theme-flat .map-controls button,
.theme-flat .destination-list button,
.theme-flat .countries__toggle,
.theme-flat .website-projects a,
.theme-flat .project-photo a,
.theme-flat .map-frame,
.theme-flat .project-modal,
.theme-flat .project-modal__close { border-radius: var(--control-radius); }

.theme-flat .portal__chevrons,
.theme-flat .portal__glyphs { display: none; }
.theme-flat .portal__ring { filter: drop-shadow(0 0 16px rgba(var(--glow), 0.35)); }

/* Shared decorative bits (all aria-hidden in the HTML) */
.hero__text { position: relative; }
.hero__stamp,
.portal__label,
.portal__eyepiece { display: none; }

/* Old monitors: faint scan lines and a soft vignette */
.theme-lumon body::after,
.theme-silo body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 58;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.14) 2px 3px),
    radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.5));
}

/* Without a gate ring, there's no event horizon to open */
.theme-xfiles .portal__horizon,
.theme-win95 .portal__horizon,
.theme-minecraft .portal__horizon { display: none !important; }


/* ==========================================================================
   Severance: Lumon
   ========================================================================== */
.theme-lumon {
  --bg: #04161f;
  --panel: rgba(7, 36, 51, 0.94);
  --text: #e6fbff;
  --muted: #a8cbd3;
  --red: #5fd3d6;
  --red-light: #8ff0ec;
  --rose: #bfeeff;
  --peach: #9fd8c8;
  --amber: #e9f7fb;
  --red-deep: #0f4c5c;
  --glow: 95, 211, 214;
  --glow-2: 143, 240, 236;
  --glow-3: 159, 216, 200;
  --deep: 15, 76, 92;
  --font-display: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --font-body: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --panel-shadow: inset 0 0 60px rgba(var(--glow), 0.06), 0 20px 50px rgba(0, 0, 0, 0.5);
}
.theme-lumon body { background: radial-gradient(ellipse at 50% -10%, #0c3a4c 0%, transparent 60%), var(--bg); background-attachment: fixed; }
.theme-lumon h1, .theme-lumon h2, .theme-lumon h3 { font-weight: 600; }
.theme-lumon .hero h1 { font-size: clamp(2.4rem, 6.5vw, 4.25rem); }
.theme-lumon .hero__hello { font-size: 0.4em; letter-spacing: 0.08em; text-transform: uppercase; }
.theme-lumon .hero__role { font-size: clamp(1.05rem, 2.2vw, 1.3rem); text-transform: none; letter-spacing: 0.02em; }
.theme-lumon .eyebrow { font-size: 0.95rem; color: var(--red-light); }
.theme-lumon .eyebrow::before { content: "> "; content: "> " / ""; }
.theme-lumon .hero__text { text-shadow: 0 0 12px rgba(var(--glow), 0.35); }
.theme-lumon .site-header { background: rgba(4, 22, 31, 0.95); border-bottom: 1px solid rgba(var(--glow), 0.4); }
.theme-lumon .brand__block { letter-spacing: 0.2em; }
.theme-lumon .panel h2 { border-bottom: 1px solid rgba(var(--glow), 0.35); padding-bottom: 0.75rem; }
.theme-lumon .btn, .theme-lumon .site-nav a, .theme-lumon .dock__btn, .theme-lumon .toast { text-transform: none; letter-spacing: 0.03em; }
.theme-lumon .timeline::before { background: rgba(var(--glow), 0.6); width: 1px; left: 0.6rem; }
.theme-lumon .ring__base { stroke: rgba(var(--glow), 0.25); stroke-width: 6; }
.theme-lumon .ring__edge { stroke: var(--red); stroke-width: 1.5; }
.theme-lumon .portal__img img { filter: grayscale(0.55) contrast(1.05) brightness(0.95); }
.theme-lumon .portal__horizon { background: radial-gradient(circle, #e6fbff 0%, var(--red-light) 30%, var(--red) 55%, var(--red-deep) 85%, #02101a 100%); }
.theme-lumon.motion-on .stat__value { animation: scary-numbers 0.9s steps(2, end) infinite; }
@keyframes scary-numbers { 50% { transform: translate(1px, -1px); } }


/* ==========================================================================
   Star Trek: Borg assimilation
   ========================================================================== */
.theme-borg {
  --bg: #020805;
  --panel: #07140c;
  --text: #d9ffe4;
  --muted: #9fd3b0;
  --red: #39ff7a;
  --red-light: #6dff9b;
  --rose: #b8ffcf;
  --peach: #2fd36a;
  --amber: #c6ffd8;
  --red-deep: #0d3d1f;
  --glow: 57, 255, 122;
  --glow-2: 109, 255, 155;
  --glow-3: 47, 211, 106;
  --deep: 13, 61, 31;
  --font-display: "OCR A Std", "OCR A Extended", ui-monospace, Consolas, monospace;
  --font-body: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
}
.theme-borg body { font-size: 1.05rem; background: radial-gradient(ellipse at 50% 40%, #06210f 0%, var(--bg) 70%); background-attachment: fixed; }
.theme-borg .site-header { background: rgba(2, 8, 5, 0.95); border-bottom: 1px solid rgba(var(--glow), 0.5); }
.theme-borg .hero h1 { font-size: clamp(2.4rem, 6.5vw, 4.4rem); letter-spacing: 0.04em; text-shadow: 0 0 18px rgba(var(--glow), 0.6); }
.theme-borg .eyebrow::before { content: "// "; content: "// " / ""; }
/* Circuitry etched into every panel, spreading in when the site is assimilated */
.theme-borg .panel { position: relative; overflow: hidden; }
.theme-borg .panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.13;
  background:
    linear-gradient(90deg, rgba(var(--glow), 1) 1px, transparent 1px) 0 0 / 46px 46px,
    linear-gradient(rgba(var(--glow), 1) 1px, transparent 1px) 0 0 / 46px 46px,
    linear-gradient(90deg, transparent 22px, rgba(var(--glow), 1) 22px 24px, transparent 24px) 0 0 / 92px 23px;
}
.theme-borg.motion-on.assimilating .panel::after { animation: assimilate 2.4s ease-out; }
@keyframes assimilate {
  from { clip-path: inset(0 100% 0 0); opacity: 0.6; }
  to { clip-path: inset(0 0 0 0); opacity: 0.13; }
}
.theme-borg .panel__body { position: relative; z-index: 1; }
.theme-borg .ring__base { stroke: #0c2416; }
.theme-borg .ring__edge { stroke: var(--red); stroke-width: 2; }
.theme-borg .portal__img img { filter: grayscale(0.7) sepia(0.4) hue-rotate(65deg) saturate(1.6) contrast(1.1); }
.theme-borg .portal__horizon { background: radial-gradient(circle, #d9ffe4 0%, var(--red) 40%, #0d3d1f 90%); }
/* Cybernetic eyepiece with a laser, on the real photo */
.theme-borg .portal__eyepiece {
  display: block;
  position: absolute;
  left: 40%;
  top: 38%;
  width: 13%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 30%;
  background: radial-gradient(circle, #ff2a2a 0 18%, #3a3a40 22% 60%, #1b1b1f 64%);
  box-shadow: 0 0 0 3px #555, 0 0 14px #ff2a2a;
}
.theme-borg .portal__eyepiece::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 50%;
  width: 260%;
  height: 2px;
  transform-origin: right center;
  transform: rotate(18deg);
  background: linear-gradient(270deg, #ff3030, transparent);
  box-shadow: 0 0 6px #ff3030;
}
.theme-borg.motion-on .portal__eyepiece::after { animation: laser-sweep 4s ease-in-out infinite alternate; }
@keyframes laser-sweep { to { transform: rotate(-14deg); } }
.theme-borg .portal--toon .portal__eyepiece { display: none; }


/* ==========================================================================
   The X-Files: case file
   ========================================================================== */
.theme-xfiles {
  --bg: #efe2bd;
  --panel: #e9d8a6;
  --text: #2a2114;
  --muted: #4f4127;
  --red: #a3201b;
  --red-light: #8b1a1a;
  --rose: #8b1a1a;
  --peach: #a3201b;
  --amber: #a3201b;
  --red-deep: #6b5a35;
  --on-accent: #ffffff;
  --glow: 120, 90, 40;
  --glow-2: 139, 26, 26;
  --glow-3: 120, 90, 40;
  --deep: 60, 50, 30;
  --font-display: "Courier New", Courier, "Nimbus Mono PS", monospace;
  --font-body: "Courier New", Courier, "Nimbus Mono PS", monospace;
  --panel-border: 1px solid #b9a26a;
  --panel-shadow: 4px 6px 0 #c9b57f, 0 20px 40px rgba(0, 0, 0, 0.6);
}
/* A dark desk lit by a flashlight that follows the mouse */
.theme-xfiles body {
  background:
    radial-gradient(circle 260px at var(--mx, 50%) var(--my, 40%), rgba(255, 240, 200, 0.22), transparent 70%),
    repeating-linear-gradient(90deg, #17110b 0 22px, #1c150d 22px 46px);
  background-attachment: fixed;
}
.theme-xfiles .starfield { display: none; }
.theme-xfiles .site-header,
.theme-xfiles .hero,
.theme-xfiles .site-footer {
  background: var(--bg);
  border: 1px solid #b9a26a;
}
.theme-xfiles .site-header { border-width: 0 0 1px; }
.theme-xfiles .hero { margin-top: 1.5rem; padding: clamp(1.25rem, 4vw, 2.5rem); box-shadow: 4px 6px 0 #c9b57f; }
.theme-xfiles .hero__text { text-shadow: none; }
.theme-xfiles .site-footer { border-width: 1px 0 0; }
.theme-xfiles h1, .theme-xfiles h2, .theme-xfiles h3 { font-weight: 700; }
.theme-xfiles .hero h1 { font-size: clamp(2.2rem, 6vw, 4rem); }
.theme-xfiles .eyebrow { color: var(--red); font-weight: 700; }
/* A decorative redaction bar after each label */
.theme-xfiles .eyebrow::after {
  content: "";
  display: inline-block;
  width: 5.5em;
  height: 0.9em;
  margin-left: 0.6em;
  vertical-align: -0.1em;
  background: #1a1510;
}
.theme-xfiles .panel h2 { border-bottom: 2px solid #2a2114; padding-bottom: 0.5rem; }
.theme-xfiles .card { background: #f3e7c4; border-color: #b9a26a; }
.theme-xfiles .ranked li,
.theme-xfiles .pills a,
.theme-xfiles .stat { background: #f3e7c4; }
.theme-xfiles .pills a { border-color: #8b6f3a; }
.theme-xfiles .dock,
.theme-xfiles .toast { background: #f3e7c4; }
.theme-xfiles kbd { background: #f3e7c4; }
.theme-xfiles .hero__stamp {
  display: block;
  position: absolute;
  top: -0.5rem;
  right: 0;
  padding: 0.2rem 0.8rem;
  border: 4px solid #a3201b;
  color: #a3201b;
  font: 700 clamp(1.2rem, 3vw, 1.8rem)/1.1 var(--font-display);
  letter-spacing: 0.15em;
  transform: rotate(-9deg);
  opacity: 0.85;
}
.theme-xfiles .hero__stamp::before { content: "Classified"; text-transform: uppercase; }
/* The photo becomes a paper-clipped polaroid */
.theme-xfiles .portal__ring { display: none; }
.theme-xfiles .portal__photo {
  inset: 6% 8% 10%;
  border-radius: 0;
  border: 12px solid #fbf8ee;
  border-bottom-width: 44px;
  box-shadow: 4px 8px 18px rgba(0, 0, 0, 0.45);
  transform: rotate(-3deg);
}
.theme-xfiles .portal__img img { filter: grayscale(0.4) sepia(0.35) contrast(1.05); }
.theme-xfiles .portal__label {
  display: block;
  position: absolute;
  top: 1%;
  left: 22%;
  width: 7%;
  height: 22%;
  border: 3px solid #9aa0a8;
  border-radius: 999px;
  transform: rotate(-12deg);
}


/* ==========================================================================
   Doctor Who: TARDIS
   ========================================================================== */
.theme-tardis {
  --bg: #061a3d;
  --panel: #0e2f66;
  --text: #ffffff;
  --muted: #c8d6f0;
  --red: #9cc8ff;
  --red-light: #bfe0ff;
  --rose: #bfe0ff;
  --peach: #9cc8ff;
  --amber: #ffd36b;
  --red-deep: #0a2552;
  --glow: 156, 200, 255;
  --glow-2: 191, 224, 255;
  --glow-3: 255, 211, 107;
  --deep: 10, 37, 82;
  --font-display: "Gill Sans", "Gill Sans MT", "Trebuchet MS", Calibri, sans-serif;
  --font-body: "Gill Sans", "Gill Sans MT", "Trebuchet MS", Calibri, sans-serif;
  --panel-radius: 4px;
  --panel-border: 8px solid #0a2552;
  --panel-shadow: inset 0 0 0 2px #1d4a91, 0 20px 50px rgba(0, 0, 0, 0.5);
}
.theme-tardis body { background: radial-gradient(ellipse at 50% 30%, #0c2c66 0%, var(--bg) 70%); background-attachment: fixed; }
/* The famous wall roundels */
.theme-tardis .panel {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.07) 0 22px, rgba(255, 255, 255, 0.03) 23px 28px, transparent 29px) 0 0 / 80px 80px,
    var(--panel);
}
/* Section titles look like the sign above the door */
.theme-tardis .panel h2 {
  display: inline-block;
  padding: 0.35rem 1rem;
  background: #050b17;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: inset 0 0 0 2px #1d4a91;
}
.theme-tardis .hero h1 { text-transform: uppercase; letter-spacing: 0.05em; }
.theme-tardis .eyebrow { color: var(--amber); }
.theme-tardis .site-header { background: rgba(6, 26, 61, 0.95); }
.theme-tardis .ring__base { stroke: #0a2552; }
.theme-tardis .ring__edge { stroke: var(--red-light); }
.theme-tardis .portal__img img { filter: saturate(0.85) hue-rotate(-8deg); }
.theme-tardis .portal__horizon { background: radial-gradient(circle, #ffffff 0%, #bfe0ff 30%, #2a62c9 60%, #061a3d 100%); }
/* Materializing: the page fades in and out a few times */
.theme-tardis.motion-on.materializing main,
.theme-tardis.motion-on.materializing .site-header { animation: materialize 2.6s ease-in-out; }
@keyframes materialize {
  0%, 100% { opacity: 1; }
  20% { opacity: 0.25; }
  45% { opacity: 0.9; }
  65% { opacity: 0.35; }
  85% { opacity: 0.95; }
}


/* ==========================================================================
   Star Trek: Lower Decks (cartoon)
   ========================================================================== */
.theme-lowerdecks {
  --bg: #12122b;
  --panel: #2b2f6b;
  --text: #ffffff;
  --muted: #d4d7ff;
  --red: #f2b630;
  --red-light: #ffd76a;
  --rose: #ff8a7a;
  --peach: #7fd0ff;
  --amber: #7fd0ff;
  --red-deep: #d9453b;
  --on-accent: #111111;
  --glow: 242, 182, 48;
  --glow-2: 255, 215, 106;
  --glow-3: 127, 208, 255;
  --deep: 60, 40, 140;
  --font-display: "Arial Rounded MT Bold", "Trebuchet MS", Verdana, sans-serif;
  --font-body: "Trebuchet MS", Verdana, system-ui, sans-serif;
  --control-radius: 14px;
  --panel-radius: 22px;
  --panel-border: 4px solid #000;
  --panel-shadow: 8px 8px 0 #000;
}
.theme-lowerdecks body { background: radial-gradient(ellipse at 30% 20%, #2a1f6b 0%, var(--bg) 65%); background-attachment: fixed; }
.theme-lowerdecks h1, .theme-lowerdecks h2, .theme-lowerdecks h3 { font-weight: 700; }
.theme-lowerdecks .hero h1 { font-size: clamp(2.6rem, 7vw, 4.75rem); text-shadow: 4px 4px 0 #000; }
.theme-lowerdecks .hero__text { text-shadow: 3px 3px 0 #000; }
.theme-lowerdecks .panel h2 { color: var(--red); text-shadow: 3px 3px 0 #000; }
.theme-lowerdecks .btn,
.theme-lowerdecks .site-nav a,
.theme-lowerdecks .card,
.theme-lowerdecks .stat,
.theme-lowerdecks .ranked li,
.theme-lowerdecks .pills a,
.theme-lowerdecks .dock__btn,
.theme-lowerdecks .toast,
.theme-lowerdecks .brand__block {
  border: 3px solid #000 !important;
  box-shadow: 4px 4px 0 #000;
  text-transform: none;
}
.theme-lowerdecks .site-nav li:nth-child(4n+1) a { background: #f2b630; color: #111; }
.theme-lowerdecks .site-nav li:nth-child(4n+2) a { background: #b8322a; color: #fff; }
.theme-lowerdecks .site-nav li:nth-child(4n+3) a { background: #1d66ad; color: #fff; }
.theme-lowerdecks .site-nav li:nth-child(4n+4) a { background: #111; color: #fff; }
.theme-lowerdecks .stat:nth-child(n) { background: #22265a; }
.theme-lowerdecks.motion-on .btn:hover,
.theme-lowerdecks.motion-on .card:hover,
.theme-lowerdecks.motion-on .site-nav a:hover { transform: scale(1.05) rotate(-1.5deg); }
/* Pop-ups become speech bubbles */
.theme-lowerdecks .toast { background: #fff; color: #111; }
.theme-lowerdecks .toast::after {
  content: "";
  position: absolute;
  left: 2.5rem;
  bottom: -18px;
  border: 9px solid transparent;
  border-top-color: #000;
  border-left-color: #000;
}
.theme-lowerdecks .portal__chevrons,
.theme-lowerdecks .portal__glyphs { display: inline; }
.theme-lowerdecks .ring__base { stroke: #8d93a3; stroke-width: 26; }
.theme-lowerdecks .ring__edge { stroke: #000; stroke-width: 5; }
.theme-lowerdecks .chevron__frame { stroke: #000; stroke-width: 3; }
.theme-lowerdecks .chevron__light { fill: #f2b630; filter: none; }
.theme-lowerdecks .portal__ring { filter: drop-shadow(5px 5px 0 #000); }
.theme-lowerdecks .timeline::before { background: #000; width: 4px; }
.theme-lowerdecks .timeline__item::before { border-color: #000; background: var(--red); border-radius: 50%; }
.theme-lowerdecks.motion-on.boinging main { animation: boing 0.9s cubic-bezier(0.3, 1.8, 0.5, 1); }
@keyframes boing { 30% { transform: scale(0.97, 1.03); } 60% { transform: scale(1.02, 0.98); } }


/* ==========================================================================
   Retro 90s computer
   ========================================================================== */
.theme-win95 {
  --bg: #c0c0c0;
  --panel: #c0c0c0;
  --text: #000000;
  --muted: #222222;
  --red: #000080;
  --red-light: #0000cc;
  --rose: #000080;
  --peach: #000080;
  --amber: #000080;
  --red-deep: #808080;
  --on-accent: #ffffff;
  --glow: 0, 0, 128;
  --glow-2: 0, 0, 204;
  --glow-3: 0, 0, 128;
  --deep: 0, 128, 128;
  --focus: #000000;
  --font-display: Tahoma, "MS Sans Serif", "Segoe UI", Geneva, Verdana, sans-serif;
  --font-body: Tahoma, "MS Sans Serif", "Segoe UI", Geneva, Verdana, sans-serif;
  --bevel-out: inset -2px -2px #000, inset 2px 2px #fff, inset -4px -4px #808080, inset 4px 4px #dfdfdf;
  --bevel-in: inset 2px 2px #000, inset -2px -2px #fff, inset 4px 4px #808080;
  --panel-border: 0;
  --panel-shadow: var(--bevel-out), 6px 6px 0 rgba(0, 0, 0, 0.35);
}
.theme-win95 body { background: #008080; font-size: 1.05rem; }
.theme-win95 .starfield { display: none; }
.theme-win95 :focus-visible { outline: 2px dotted #000; outline-offset: 2px; }
.theme-win95 .site-header { background: #c0c0c0; box-shadow: var(--bevel-out); padding-bottom: 0.6rem; }
.theme-win95 .brand { color: #000; }
.theme-win95 .brand__block { background: #c0c0c0; color: #000; box-shadow: var(--bevel-out); padding: 0 1rem; font-weight: 700; }
.theme-win95 .site-nav a,
.theme-win95 .site-nav li:nth-child(n) a,
.theme-win95 .btn,
.theme-win95 .btn--ghost,
.theme-win95 .dock__btn {
  background: #c0c0c0;
  color: #000;
  border: 0;
  box-shadow: var(--bevel-out);
  text-transform: none;
  letter-spacing: 0;
}
.theme-win95 .site-nav a:hover,
.theme-win95 .btn:hover,
.theme-win95 .dock__btn:hover { background: #d4d4d4; color: #000; box-shadow: var(--bevel-out); }
.theme-win95 .site-nav a:active,
.theme-win95 .btn:active,
.theme-win95 .dock__btn:active { box-shadow: var(--bevel-in); }
.theme-win95 .btn--primary { font-weight: 700; outline: 1px solid #000; }
.theme-win95 .dock { background: #c0c0c0; box-shadow: var(--bevel-in); border: 0; }
.theme-win95 .dock__btn[aria-pressed="true"] .toggle__state { background: #000080; color: #fff; }
.theme-win95 .toggle__state { background: #fff; color: #000; }
/* Every section is a window with a title bar */
.theme-win95 .hero,
.theme-win95 .panel { background: #c0c0c0; box-shadow: var(--panel-shadow); }
.theme-win95 .hero { margin-top: 1.5rem; padding: 1.5rem; }
.theme-win95 .hero__text { text-shadow: none; }
.theme-win95 .panel { padding: 4px; }
.theme-win95 .panel__body { display: flex; flex-direction: column; padding: 0 0 1.5rem; }
.theme-win95 .panel__body > * { margin-left: 1.25rem; margin-right: 1.25rem; }
.theme-win95 .panel h2 {
  order: -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 1rem;
  padding: 0.3rem 0.4rem 0.3rem 0.6rem;
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
}
.theme-win95 .panel h2::after {
  content: "";
  flex: none;
  width: 3.6rem;
  height: 1.1rem;
  background:
    linear-gradient(#000, #000) 0.35rem 0.75rem / 0.5rem 2px no-repeat,
    linear-gradient(#c0c0c0, #c0c0c0) 0 0 / 1.1rem 1.1rem no-repeat,
    linear-gradient(#c0c0c0, #c0c0c0) 1.25rem 0 / 1.1rem 1.1rem no-repeat,
    linear-gradient(#c0c0c0, #c0c0c0) 2.5rem 0 / 1.1rem 1.1rem no-repeat;
}
.theme-win95 .eyebrow { color: #000080; letter-spacing: 0; font-weight: 700; }
.theme-win95 .stat__value,
.theme-win95 .timeline__when,
.theme-win95 .favorites__subhead { color: #000080; }
.theme-win95 .stat,
.theme-win95 .card,
.theme-win95 .ranked li,
.theme-win95 .pills a,
.theme-win95 kbd { background: #fff; border: 0; box-shadow: var(--bevel-in); }
.theme-win95 .ranked li::before { background: #000080; color: #fff; }
.theme-win95 .card p, .theme-win95 .stat__label, .theme-win95 .timeline__item p:last-child { color: #222; }
.theme-win95 .toast { background: #ffffe1; color: #000; border: 1px solid #000; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4); text-transform: none; letter-spacing: 0; }
.theme-win95 .timeline::before { background: #808080; }
.theme-win95 .timeline__item::before { border-color: #000080; }
.theme-win95 .site-footer { background: #c0c0c0; color: #000; box-shadow: var(--bevel-out); border: 0; }
/* The photo opens in an image viewer window */
.theme-win95 .portal__ring { display: none; }
.theme-win95 .portal { padding-top: 1.6rem; background: #c0c0c0; box-shadow: var(--bevel-out); }
.theme-win95 .portal__photo { inset: 2rem 0.5rem 0.5rem; border-radius: 0; box-shadow: var(--bevel-in); }
.theme-win95 .portal__label {
  display: block;
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  padding: 0.2rem 0.5rem;
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #fff;
  font: 700 0.95rem/1.2 var(--font-display);
}
.theme-win95 .portal__label::before { content: "jeffrey.bmp - Paint"; }


/* ==========================================================================
   3D printing blueprint
   ========================================================================== */
.theme-blueprint {
  --bg: #0f4c9c;
  --panel: rgba(17, 81, 159, 0.92);
  --text: #ffffff;
  --muted: #d6e6ff;
  --red: #ffffff;
  --red-light: #ffe9a8;
  --rose: #ffffff;
  --peach: #bfe3ff;
  --amber: #bfe3ff;
  --red-deep: #0a3a78;
  --on-accent: #0f4c9c;
  --glow: 255, 255, 255;
  --glow-2: 255, 233, 168;
  --glow-3: 191, 227, 255;
  --deep: 10, 58, 120;
  --font-display: "Century Gothic", Futura, "Segoe UI", "Trebuchet MS", sans-serif;
  --font-body: "Century Gothic", Futura, "Segoe UI", system-ui, sans-serif;
  --panel-border: 2px solid rgba(255, 255, 255, 0.85);
  --panel-shadow: none;
}
/* Grid paper */
.theme-blueprint body {
  background:
    linear-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px) 0 0 / 100px 100px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px) 0 0 / 100px 100px,
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / 20px 20px,
    var(--bg);
  background-attachment: fixed;
}
.theme-blueprint .starfield { display: none; }
.theme-blueprint h1, .theme-blueprint h2, .theme-blueprint h3 { text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; }
.theme-blueprint .hero h1 { font-size: clamp(2.2rem, 6vw, 4rem); }
.theme-blueprint .site-header { background: rgba(15, 76, 156, 0.95); border-bottom: 2px solid rgba(255, 255, 255, 0.8); }
/* Corner registration marks on each drawing */
.theme-blueprint .panel { position: relative; }
.theme-blueprint .panel::before,
.theme-blueprint .panel::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
}
.theme-blueprint .panel::before { top: 8px; left: 8px; border-width: 2px 0 0 2px; }
.theme-blueprint .panel::after { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; }
.theme-blueprint .panel h2 { border-bottom: 1px dashed rgba(255, 255, 255, 0.7); padding-bottom: 0.6rem; }
.theme-blueprint .card,
.theme-blueprint .stat,
.theme-blueprint .ranked li,
.theme-blueprint .pills a { border-style: dashed !important; background: transparent; }
.theme-blueprint .btn--ghost { background: transparent; }
.theme-blueprint .ring__base { stroke: rgba(255, 255, 255, 0.12); stroke-width: 26; }
.theme-blueprint .ring__edge { stroke: #fff; stroke-width: 1.5; stroke-dasharray: 10 6; }
.theme-blueprint .portal__ring { filter: none; }
.theme-blueprint .portal__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #1e5fb8;
  mix-blend-mode: multiply;
}
.theme-blueprint .portal__img img { filter: grayscale(1) contrast(1.3) brightness(1.2); }
.theme-blueprint .portal__horizon { background: radial-gradient(circle, #ffffff 0%, #bfe3ff 40%, #0f4c9c 100%); }
.theme-blueprint .portal__label {
  display: block;
  position: absolute;
  left: 50%;
  bottom: -1.75rem;
  transform: translateX(-50%);
  color: #fff;
  font: 600 0.9rem/1 var(--font-display);
  letter-spacing: 0.2em;
  white-space: nowrap;
}
.theme-blueprint .portal__label::before { content: "Detail A \2014  Scale 1:1"; text-transform: uppercase; }
.theme-blueprint .hero__stamp {
  display: block;
  position: absolute;
  top: -0.5rem;
  right: 0;
  padding: 0.35rem 0.75rem;
  border: 2px solid #fff;
  color: #fff;
  font: 600 0.85rem/1.3 var(--font-display);
  letter-spacing: 0.12em;
  text-align: right;
  text-transform: uppercase;
}
.theme-blueprint .hero__stamp::before { content: "Drawn: J. Long\A Rev: A\A Material: PLA"; white-space: pre; }
/* Printing in, one layer at a time */
.theme-blueprint.motion-on.printing .panel,
.theme-blueprint.motion-on.printing .hero { animation: print-layers 2.2s steps(22, end) both; }
.theme-blueprint.motion-on.printing .panel:nth-of-type(2) { animation-delay: 0.3s; }
.theme-blueprint.motion-on.printing .panel:nth-of-type(3) { animation-delay: 0.6s; }
.theme-blueprint.motion-on.printing .panel:nth-of-type(4) { animation-delay: 0.9s; }
.theme-blueprint.motion-on.printing .panel:nth-of-type(5) { animation-delay: 1.2s; }
@keyframes print-layers { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }


/* ==========================================================================
   NASA mission control
   ========================================================================== */
.theme-nasa {
  --bg: #1a140e;
  --panel: #262b25;
  --text: #f0ead8;
  --muted: #cfc6ab;
  --red: #ffb000;
  --red-light: #ffcf6b;
  --rose: #ffcf6b;
  --peach: #cfc6ab;
  --amber: #ffb000;
  --red-deep: #5a4a2a;
  --glow: 255, 176, 0;
  --glow-2: 255, 207, 107;
  --glow-3: 207, 198, 171;
  --deep: 90, 74, 42;
  --font-display: "Eurostile", "Microgramma", "Bank Gothic", "Segoe UI", "Arial Narrow", sans-serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --panel-radius: 10px;
  --panel-border: 10px solid #cbbf9f;
  --panel-shadow: inset 0 0 0 2px #1a1f19, inset 0 0 40px rgba(0, 0, 0, 0.6), 0 20px 40px rgba(0, 0, 0, 0.6);
}
/* Wood paneling behind the consoles */
.theme-nasa body {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 176, 0, 0.08), transparent 60%),
    repeating-linear-gradient(90deg, #1e160e 0 120px, #241a10 120px 124px, #1b140c 124px 240px);
  background-attachment: fixed;
}
.theme-nasa h1, .theme-nasa h2, .theme-nasa h3 { text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }
.theme-nasa .hero h1 { font-size: clamp(2.2rem, 6vw, 4rem); }
.theme-nasa .site-header { background: #2a241a; border-bottom: 4px solid #cbbf9f; }
.theme-nasa .eyebrow,
.theme-nasa .timeline__when,
.theme-nasa .stat__value { font-family: ui-monospace, Consolas, Menlo, monospace; text-shadow: 0 0 8px rgba(255, 176, 0, 0.6); }
.theme-nasa .panel h2 { color: var(--red); font-family: ui-monospace, Consolas, Menlo, monospace; text-shadow: 0 0 10px rgba(255, 176, 0, 0.5); }
.theme-nasa .stat,
.theme-nasa .card { background: #1c201b; }
.theme-nasa .ring__base { stroke: #1d2a5a; stroke-width: 34; }
.theme-nasa .ring__edge { stroke: #ffcf6b; stroke-width: 3; }
.theme-nasa .portal__horizon { background: radial-gradient(circle, #fff6d8 0%, #ffb000 40%, #8a3b00 80%, #1a140e 100%); }
.theme-nasa .portal__label {
  display: block;
  position: absolute;
  left: 50%;
  bottom: -0.25rem;
  transform: translateX(-50%);
  padding: 0.2rem 1rem;
  border: 3px solid #ffcf6b;
  border-radius: 999px;
  background: #1d2a5a;
  color: #fff;
  font: 700 1rem/1.2 var(--font-display);
  letter-spacing: 0.2em;
}
.theme-nasa .portal__label::before { content: "JNL-1"; }
.theme-nasa .hero__stamp {
  display: block;
  position: absolute;
  top: -0.25rem;
  right: 0;
  padding: 0.25rem 0.75rem;
  background: #0c3d1a;
  color: #8dff9e;
  font: 700 1rem/1.2 ui-monospace, Consolas, monospace;
  letter-spacing: 0.15em;
  box-shadow: 0 0 12px rgba(141, 255, 158, 0.5);
}
.theme-nasa .hero__stamp::before { content: "GO"; }


/* ==========================================================================
   Silo: amber terminal
   ========================================================================== */
.theme-silo {
  --bg: #0a0805;
  --panel: #1c140c;
  --text: #ffcf8a;
  --muted: #e0b070;
  --red: #ffb547;
  --red-light: #ffe2b0;
  --rose: #ffe2b0;
  --peach: #e0b070;
  --amber: #ffb547;
  --red-deep: #4a3018;
  --glow: 255, 181, 71;
  --glow-2: 255, 226, 176;
  --glow-3: 224, 176, 112;
  --deep: 74, 48, 24;
  --font-display: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  --font-body: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  --panel-radius: 4px;
  --panel-border: 3px solid #6b4a2b;
  --panel-shadow: inset 0 0 0 1px #2a1d10, inset 0 0 50px rgba(0, 0, 0, 0.6), 0 20px 40px rgba(0, 0, 0, 0.7);
}
.theme-silo body { font-size: 1.05rem; background: radial-gradient(ellipse at 50% 50%, #1a1208 0%, var(--bg) 70%); background-attachment: fixed; }
.theme-silo h1, .theme-silo h2, .theme-silo h3,
.theme-silo .hero__text { text-shadow: 0 0 10px rgba(255, 181, 71, 0.45); }
.theme-silo .hero h1 { font-size: clamp(2.2rem, 6vw, 4rem); }
/* Rivets in the corners of each rusty metal panel */
.theme-silo .panel {
  background:
    radial-gradient(circle, #7a5a3a 0 4px, transparent 5px) 12px 12px / 24px 24px no-repeat,
    radial-gradient(circle, #7a5a3a 0 4px, transparent 5px) calc(100% - 12px) 12px / 24px 24px no-repeat,
    radial-gradient(circle, #7a5a3a 0 4px, transparent 5px) 12px calc(100% - 12px) / 24px 24px no-repeat,
    radial-gradient(circle, #7a5a3a 0 4px, transparent 5px) calc(100% - 12px) calc(100% - 12px) / 24px 24px no-repeat,
    linear-gradient(160deg, #22180e, #1c140c 50%, #241708);
}
.theme-silo .site-header { background: #120d07; border-bottom: 3px solid #6b4a2b; }
.theme-silo .ring__base { stroke: #3a2614; }
.theme-silo .ring__edge { stroke: #8a5f35; stroke-width: 3; }
.theme-silo .portal__img img { filter: grayscale(1) sepia(1) saturate(2.2) hue-rotate(-12deg) brightness(0.9) contrast(1.15); }
.theme-silo .portal__horizon { background: radial-gradient(circle, #ffe2b0 0%, #ffb547 40%, #4a3018 90%); }
.silo-level {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 59;
  padding: 0.4rem 0.75rem;
  border: 2px solid #6b4a2b;
  background: #120d07;
  color: #ffb547;
  font: 700 1rem/1.2 ui-monospace, Consolas, monospace;
  letter-spacing: 0.1em;
  text-shadow: 0 0 8px rgba(255, 181, 71, 0.6);
  pointer-events: none;
}
@media (max-width: 40em) { .silo-level { bottom: auto; top: 0.5rem; left: auto; right: 0.5rem; } }


/* ==========================================================================
   Blocky world (Minecraft)
   Sky and clouds behind inventory-style panels, a grass block header,
   and chunky stone buttons.
   ========================================================================== */
.theme-minecraft {
  --bg: #7ba7f5;
  --panel: #c6c6c6;
  --text: #1b1b1b;
  --muted: #3b3b3b;
  --red: #24520f;
  --red-light: #0b4f6c;
  --rose: #6b1f1f;
  --peach: #5a3a12;
  --amber: #6b4000;
  --red-deep: #3b3b3b;
  --on-accent: #ffffff;
  --glow: 36, 82, 15;
  --glow-2: 11, 79, 108;
  --glow-3: 90, 58, 18;
  --deep: 59, 59, 59;
  --focus: #000000;
  --font-display: "Pixelify Sans", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --mc-bevel: inset 3px 3px 0 #ffffff, inset -3px -3px 0 #555555;
  --mc-slot: inset 2px 2px 0 #373737, inset -2px -2px 0 #ffffff;
  --mc-button: inset 2px 2px 0 #a9a9a9, inset -2px -3px 0 #4a4a4a;
  --panel-border: 3px solid #000;
  --panel-shadow: var(--mc-bevel), 6px 6px 0 rgba(0, 0, 0, 0.25);
}
.theme-minecraft body { background: linear-gradient(#5f93f0, #a9c9ff 75%, #c4dbff); background-attachment: fixed; }
.theme-minecraft :focus-visible { outline: 3px solid #000; outline-offset: 2px; box-shadow: 0 0 0 6px #fff; }
.theme-minecraft h1, .theme-minecraft h2, .theme-minecraft h3 { font-weight: 600; color: #3f3f3f; }
.theme-minecraft .hero h1 { font-size: clamp(2.6rem, 7vw, 4.5rem); color: var(--text); }
.theme-minecraft .eyebrow { color: var(--red); font-family: var(--font-display); font-weight: 600; }

/* Header: a slice of grass block */
.theme-minecraft .site-header {
  background: linear-gradient(#5fae37 0 0.55rem, #3f7f22 0.55rem 0.8rem, #79553a 0.8rem);
  border-bottom: 4px solid #3b2a1b;
  padding-top: 1.1rem;
}
.theme-minecraft .brand { color: #fff; text-shadow: 2px 2px 0 #3b2a1b; }
.theme-minecraft .brand__block { background: #5fae37; color: #10240a; box-shadow: inset -3px -3px 0 #3f7f22, inset 3px 3px 0 #8bd65e; text-shadow: none; }

/* Chunky stone buttons everywhere */
.theme-minecraft .site-nav a,
.theme-minecraft .site-nav li:nth-child(n) a,
.theme-minecraft .btn,
.theme-minecraft .btn--ghost,
.theme-minecraft .dock__btn,
.theme-minecraft .map-controls button,
.theme-minecraft .destination-list button,
.theme-minecraft .countries__toggle,
.theme-minecraft .project-modal__close {
  border: 2px solid #000;
  background: #6f6f6f;
  color: #fff;
  box-shadow: var(--mc-button);
  text-shadow: 2px 2px 0 #3f3f3f;
  text-transform: none;
  letter-spacing: 0.02em;
  font-family: var(--font-display);
}
.theme-minecraft .site-nav a:hover,
.theme-minecraft .site-nav a:focus-visible,
.theme-minecraft .btn:hover,
.theme-minecraft .dock__btn:hover,
.theme-minecraft .map-controls button:hover,
.theme-minecraft .destination-list button:hover,
.theme-minecraft .countries__toggle:hover,
.theme-minecraft .project-modal__close:hover { background: #4f5fae; color: #fff; border-color: #000; box-shadow: inset 2px 2px 0 #8a96d6, inset -2px -3px 0 #343f7a; }
.theme-minecraft .btn--primary,
.theme-minecraft .dock__btn--reset,
.theme-minecraft .map-controls button[aria-pressed="true"],
.theme-minecraft .destination-list button[aria-pressed="true"] { background: #24520f; color: #fff; box-shadow: inset 2px 2px 0 #4f8f2e, inset -2px -3px 0 #143206; }
.theme-minecraft .dock { background: #c6c6c6; border: 3px solid #000; box-shadow: var(--mc-bevel); }
.theme-minecraft .toggle__state { background: #373737; color: #fff; text-shadow: none; }
.theme-minecraft .dock__btn[aria-pressed="true"] .toggle__state { background: #24520f; color: #fff; }
.theme-minecraft .destination-list button { font-family: var(--font-body); text-shadow: 1px 1px 0 #3f3f3f; }
.theme-minecraft .countries__count { color: #e6e6e6; }
.theme-win95 .countries__toggle { background: #c0c0c0; color: #000; border: 0; box-shadow: var(--bevel-out); }
.theme-win95 .countries[open] .countries__toggle { box-shadow: var(--bevel-in); }

/* Panels are inventory windows */
.theme-minecraft .hero,
.theme-minecraft .panel { background: #c6c6c6; border: 3px solid #000; box-shadow: var(--panel-shadow); }
.theme-minecraft .hero { margin-top: 1.5rem; padding: clamp(1.25rem, 4vw, 2.5rem); }
.theme-minecraft .hero__text { text-shadow: none; }
.theme-minecraft .stat,
.theme-minecraft .stat:nth-child(n),
.theme-minecraft .pills a,
.theme-minecraft kbd { background: #8b8b8b; border: 0; box-shadow: var(--mc-slot); color: #000; }
.theme-minecraft .stat__value { color: #000; }
.theme-minecraft .stat__label { color: #111; }
.theme-minecraft .stat:hover { background: #9c9c9c; box-shadow: var(--mc-slot); }
.theme-minecraft .pills a:hover { background: #a0a0a0; color: #000; }
.theme-minecraft .card,
.theme-minecraft .ranked li,
.theme-minecraft .website-projects a,
.theme-minecraft .project-photo a,
.theme-minecraft .map-frame { border: 0; box-shadow: var(--mc-slot); background: #b9b9b9; }
.theme-minecraft .project-photo a,
.theme-minecraft .map-frame { padding: 4px; border-radius: 0; }
.theme-minecraft .project-photo img { image-rendering: auto; }
.theme-minecraft .card:hover,
.theme-minecraft .ranked li:hover { background: #cfcfcf; box-shadow: var(--mc-slot); }
.theme-minecraft .ranked li::before { background: #24520f; color: #fff; }
.theme-minecraft .card p,
.theme-minecraft .timeline__item p:last-child { color: #222; }
.theme-minecraft .timeline::before { background: #555; width: 4px; }
.theme-minecraft .timeline__item::before { background: #5fae37; border: 3px solid #000; }
.theme-minecraft .map-ocean { fill: #3f76e4; }
.theme-minecraft .map-land { fill: #5fae37; fill-opacity: 1; stroke: #2c5f17; }
.theme-minecraft .map-pin { fill: #ffe14d; stroke: #000; }
.theme-minecraft .map-pin.is-selected { fill: #ff4040; stroke: #000; }
.theme-minecraft .project-modal { border: 3px solid #000; box-shadow: var(--mc-bevel); border-radius: 0; }

/* Footer: dirt at the bottom of the world */
.theme-minecraft .site-footer {
  max-width: none;
  margin-top: 2rem;
  padding-left: max(var(--gap), (100% - var(--max)) / 2);
  padding-right: max(var(--gap), (100% - var(--max)) / 2);
  background: linear-gradient(#5fae37 0 0.5rem, #3f7f22 0.5rem 0.75rem, #79553a 0.75rem);
  color: #fff;
  padding-top: 1.75rem;
  text-shadow: 1px 1px 0 #3b2a1b;
}
.theme-minecraft .site-footer a { color: #fff; }

/* Pop-ups look like an achievement toast */
.theme-minecraft .toast {
  border: 3px solid #000;
  border-radius: 0;
  background: #212121;
  color: #fff;
  box-shadow: inset 0 0 0 3px #555, 4px 4px 0 rgba(0, 0, 0, 0.35);
  text-transform: none;
  letter-spacing: 0.02em;
}
.theme-minecraft .theme-menu { background: #c6c6c6; border: 3px solid #000; border-radius: 0; box-shadow: var(--mc-bevel); }
.theme-minecraft .theme-menu button[aria-pressed="true"] { background: #8b8b8b; border-color: #000; }
.theme-minecraft .theme-menu button[aria-pressed="true"]::after { color: #000; }

/* The photo hangs in a wooden item frame */
.theme-minecraft .portal__ring { display: none; }
.theme-minecraft .portal {
  background:
    repeating-linear-gradient(#a0703f 0 14px, #8a5a2b 14px 16px, #b07e4a 16px 30px, #8a5a2b 30px 32px);
  border: 3px solid #3b2a1b;
  box-shadow: inset 4px 4px 0 #c99a5e, inset -4px -4px 0 #5e3c1c, 6px 6px 0 rgba(0, 0, 0, 0.25);
}
.theme-minecraft .portal__photo { inset: 1.25rem; border-radius: 0; box-shadow: 0 0 0 3px #3b2a1b; }

/* Placing blocks: each window pops into place */
.theme-minecraft.motion-on.placing .panel,
.theme-minecraft.motion-on.placing .hero { animation: place-block 0.45s steps(3, end) both; }
.theme-minecraft.motion-on.placing .panel:nth-of-type(2) { animation-delay: 0.16s; }
.theme-minecraft.motion-on.placing .panel:nth-of-type(3) { animation-delay: 0.32s; }
.theme-minecraft.motion-on.placing .panel:nth-of-type(4) { animation-delay: 0.48s; }
.theme-minecraft.motion-on.placing .panel:nth-of-type(5) { animation-delay: 0.64s; }
.theme-minecraft.motion-on.placing .panel:nth-of-type(6) { animation-delay: 0.8s; }
.theme-minecraft.motion-on.placing .panel:nth-of-type(7) { animation-delay: 0.96s; }
@keyframes place-block { from { transform: scale(0.9); opacity: 0; } }

/* Easter eggs page intro sits on a panel above the sky */
.theme-minecraft .eggs-intro { margin-top: 1.5rem; padding: 1.5rem; background: #c6c6c6; border: 3px solid #000; box-shadow: var(--mc-bevel); max-width: none; }


/* ==========================================================================
   Theme picker in the dock
   ========================================================================== */
.dock__themes { position: relative; }
.theme-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.6rem);
  width: min(18rem, calc(100vw - 2rem));
  padding: 0.75rem;
  border: 1px solid rgba(var(--glow), 0.6);
  border-radius: 1rem;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  text-align: left;
}
.theme-menu[hidden] { display: none; }
.theme-menu__title {
  margin: 0 0 0.25rem;
  font: 700 1.05rem/1.2 var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.theme-menu__count { margin: 0 0 0.6rem; font-size: 0.9rem; color: var(--muted); }
.theme-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.theme-menu button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 2.6rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 0.6rem;
  background: transparent;
  color: var(--text);
  font: 600 1rem/1.2 var(--font-body);
  text-align: left;
  cursor: pointer;
}
.theme-menu button:hover { border-color: rgba(var(--glow), 0.6); background: rgba(var(--glow), 0.12); }
.theme-menu button[aria-pressed="true"] { border-color: var(--red); background: rgba(var(--glow), 0.18); }
.theme-menu button[aria-pressed="true"]::after { content: "\2713"; margin-left: auto; color: var(--red-light); }
.theme-swatch {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
}
.theme-win95 .theme-menu { background: #c0c0c0; box-shadow: var(--bevel-out); border: 0; }
.theme-win95 .theme-menu button[aria-pressed="true"] { background: #000080; color: #fff; }
.theme-win95 .theme-menu button[aria-pressed="true"]::after { color: #fff; }
.theme-xfiles .theme-menu { background: #f3e7c4; }

/* ---------- Layout touch-ups ---------- */
/* X-Files: stamp the polaroid, not the text */
.theme-xfiles .hero { position: relative; }
.theme-xfiles .hero__text { position: static; }
.theme-xfiles .hero__stamp { top: 1.5rem; left: 1.5rem; right: auto; z-index: 2; }
/* Blueprint title block and mission control "GO" light sit above the text on narrower screens */
@media (max-width: 75em) {
  .theme-blueprint .hero__stamp,
  .theme-nasa .hero__stamp { position: static; display: inline-block; margin-bottom: 1rem; }
}
.theme-win95 .hero h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
.theme-xfiles .toggle__state { background: #d9c48f; color: #2a2114; }
/* Easter eggs page intro needs a surface in themes with a busy page background */
.theme-win95 .eggs-intro { margin-top: 1.5rem; padding: 1.5rem; background: #c0c0c0; box-shadow: var(--panel-shadow); max-width: none; }
.theme-xfiles .eggs-intro { margin-top: 1.5rem; padding: 1.5rem; background: var(--bg); border: 1px solid #b9a26a; box-shadow: 4px 6px 0 #c9b57f; max-width: none; }