/* The live design (started as /mix/): site 0's look (roses, candy title bars, Win98 frames, cutouts) on a simpler two-column
   page, with the racing visuals from mockup A: striped nav, checkered flags, ticker, timing board,
   GIF cars. Loaded after site.css and only overrides or adds. */

:root {
  --checks: repeating-conic-gradient(#000 0 25%, #fff 0 50%) 0 0 / 12px 12px;
  --mono: "Courier New", Courier, monospace;
}

/* Behind the logo: a green hypno-swirl (tools/make-swirl.py) instead of the sunburst, still spinning */
.sunburst { background: url("/assets/img/swirl-green.svg") center / 100% 100% no-repeat; animation-duration: 40s; }

/* Tagline: the new skull doodle between "Tempe, AZ" and "since 2019" instead of the star */
.tagline span + span::before {
  content: ""; display: inline-block; width: 1.5em; height: 1.5em; margin: -.2em 12px 0 0; vertical-align: middle;
  background: url("/assets/img/doodles/lineart-filled/new-skull.webp") center / contain no-repeat;
  filter: drop-shadow(2px 0 0 var(--navy)) drop-shadow(-2px 0 0 var(--navy)) drop-shadow(0 2px 0 var(--navy)) drop-shadow(0 -2px 0 var(--navy)) drop-shadow(3px 4px 0 var(--navy));
}

.mix { max-width: var(--page-max); margin: 0 auto; padding: 0 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }

/* ---------- nav: racing stripes + checkered strip ---------- */
.race-nav {
  position: relative; display: flex; flex-wrap: wrap; margin-bottom: -28px; padding-right: 64px;
  background: var(--gloss), linear-gradient(104deg, var(--navy) 0 66%, var(--pink) 66% 70%, #fff 70% 71.5%, var(--pink) 71.5% 75%, #fff 75% 76%, var(--navy) 76%);
  border: 1px solid #000; box-shadow: var(--drop); padding-bottom: 10px;
  width: 100%; max-width: 1068px; justify-self: center; /* stays its old width when the page is wider, the ticker too (Ant) */
}
.race-nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: var(--checks); }
.race-nav::before { /* little waving flag on the right */
  content: ""; position: absolute; right: 14px; top: 6px; width: 36px; height: 24px; background: var(--checks); background-size: 8px 8px;
  border: 1px solid #000; transform-origin: 0 50%; animation: flag .5s steps(2) infinite;
}
@keyframes flag { 0% { transform: skewY(-8deg) scaleX(.92); } 100% { transform: skewY(6deg) scaleX(1); } }
.race-nav a {
  color: #fff; text-decoration: none; padding: 11px 14px; border-right: 1px solid rgba(255,255,255,.25);
  font: italic 900 13px/1 var(--f-black); text-transform: uppercase; letter-spacing: .03em; text-shadow: 2px 2px 0 #000;
}
.race-nav a:visited { color: #fff; }
.race-nav a[aria-current="page"] { background: var(--pink); } /* the page you're on (tools/pagekit.py nav_for) */
.race-nav a:hover, .race-nav a:focus-visible { background: var(--yellow); color: #000; text-shadow: none; }
/* Below ~1080px the links reach the stripes' spot, so the stripes move to a strip of their own next to the flag */
@media (max-width: 1080px) {
  .race-nav { padding-right: 110px; background: var(--gloss), linear-gradient(104deg, transparent 0 31.5%, var(--pink) 31.5% 45.3%, #fff 45.3% 51.5%, var(--pink) 51.5% 63.8%, #fff 63.8% 68.4%, transparent 68.4%) right 54px top / 52px 100% no-repeat, var(--navy); }
  .race-nav a { padding: 11px 10px; }
}

/* ---------- ticker ---------- */
.ticker { width: 100%; max-width: 1068px; justify-self: center; display: flex; background: var(--hot); color: #fff; border: 1px solid #000; box-shadow: var(--drop); font: 700 12px/1.4 var(--f-body); }
.ticker > b { flex: none; background: #000; color: var(--yellow); padding: 6px 12px; font: italic 900 12px/1.4 var(--f-black); text-transform: uppercase; animation: blink 1s steps(1) infinite; }
.ticker-window { overflow: hidden; flex: 1; }
.ticker-window p { margin: 0; padding: 6px 0; white-space: nowrap; display: inline-block; padding-left: 100%; animation: ticker 36s linear infinite; text-shadow: 1px 1px 0 rgba(0,0,0,.4); }
.ticker-window p:hover { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-100%); } }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- two columns ---------- */
.mix-cols { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 34px; align-items: start; }
.mix-main, .mix-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; align-content: start; }
.mix-side { gap: 26px; }

/* ---------- hero: headline, blurb with the scrawl beside it, the numbers along the bottom ---------- */
/* the photo (homepage): no taller than 640px on a wide page, cropped off the bottom (the pool) first (Ant) */
.mix .hero picture img { width: 100%; max-height: 640px; object-fit: cover; object-position: 50% 25%; }
.mix .hero-copy {
  --pad: clamp(16px, 3vw, 30px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head head" "blurb scrawl" "stats stats";
  gap: 4px clamp(20px, 4vw, 44px); align-items: center; padding-bottom: 0;
}
.mix .hero-copy h2 { grid-area: head; margin-bottom: 16px; }
/* Two lines: who we are (names never split, underlined in each member's band-box color), then the band name, big */
.hero-head > span { display: block; }
.hh-who, .hh-band { font-size: clamp(1.15rem, 2.3vw, 1.55rem); line-height: 1.45; }
.hh-who > a { white-space: nowrap; color: inherit; font-weight: inherit; text-decoration-line: underline; text-decoration-thickness: 4px; text-underline-offset: 5px; }
.hh-who > a:visited { color: inherit; }
.hh-who > a:hover { text-decoration-thickness: 7px; } /* each name scrolls down to its card (site.js) */
.hh-ant { text-decoration-color: var(--red); }
.hh-rose { text-decoration-color: var(--hot); }
.hh-nate { text-decoration-color: #18b46a; }
.hh-don { text-decoration-color: var(--blue); }
.hh-band { margin-top: 2px; }
/* then the band name on its own line, big */
.hh-name { margin-top: 8px; font-size: clamp(2.3rem, 10.5vw, 5.2rem); line-height: 1; }
.hh-name .bn { vertical-align: top; }
/* the Band page's top (build-pages band_intro): "We are" scrawled in marker over the band name, big, on a tilted cream plate */
.we-are { justify-self: center; width: min(100%, 900px); margin: 8px 0 4px; }
.we-are h2 {
  position: relative; margin: 0; padding: clamp(46px, 7vw, 64px) clamp(18px, 4vw, 44px) clamp(18px, 2.6vw, 28px); text-align: center;
  background: var(--cream); border: 2px solid #000; box-shadow: 8px 8px 0 var(--navy), var(--drop); transform: rotate(-1.5deg);
  font-size: clamp(2.2rem, 9vw, 6.2rem); line-height: 1;
}
.we-are .wa-we {
  position: absolute; left: clamp(14px, 5%, 48px); top: clamp(6px, 1.4vw, 12px); transform: rotate(-8deg);
  font: clamp(1.7rem, 4.4vw, 2.9rem)/1 var(--f-marker); color: var(--pink);
}
.we-are .wa-we::after { /* marker swoosh under it */
  content: ""; position: absolute; left: -4%; right: -6%; bottom: -10px; height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3 11 C 50 2, 120 2, 197 8' fill='none' stroke='%23ffcc00' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.we-are .bn { vertical-align: top; max-width: 100%; height: auto; width: 100%; }
.mix .hero-blurb { grid-area: blurb; margin: 0; max-width: 58ch; }
.mix .hero-copy .scrawl {
  grid-area: scrawl; position: relative; margin: 0 6px 10px 0; text-align: center; white-space: nowrap;
  font-size: clamp(1.8rem, 3.6vw, 2.5rem); line-height: 1.02; animation: none; transform: rotate(-7deg); translate: 0 -22px;
}
.mix .hero-copy .scrawl span { display: block; }
.mix .hero-copy .scrawl::after { /* marker swoosh under it */
  content: ""; position: absolute; left: 4%; right: 2%; bottom: -16px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3 11 C 50 2, 120 2, 197 8' fill='none' stroke='%23ffcc00' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.stats {
  grid-area: stats; list-style: none; margin: 30px calc(-1 * var(--pad)) 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff; border-top: 1px solid rgba(0,0,0,.25);
}
.stats li {
  --c: var(--red);
  display: grid; justify-items: center; gap: 4px; padding: 16px 6px 14px; border-left: 1px dashed rgba(18,16,107,.25);
  font: 700 11px/1.2 var(--f-body); color: var(--navy); text-transform: uppercase; letter-spacing: .14em;
}
.stats li:first-child { border-left: 0; }
.stats li:nth-child(2) { --c: var(--hot); }
.stats li:nth-child(3) { --c: #18b46a; }
.stats li:nth-child(4) { --c: var(--blue); }
.stats b {
  font: 400 clamp(2.2rem, 4.8vw, 3.3rem)/1 var(--f-bubbly); letter-spacing: .02em; color: var(--c); font-variant-numeric: tabular-nums;
  text-shadow: 2px 0 var(--navy), -2px 0 var(--navy), 0 2px var(--navy), 0 -2px var(--navy),
               2px 2px var(--navy), -2px -2px var(--navy), 2px -2px var(--navy), -2px 2px var(--navy), 4px 4px 0 var(--navy);
}

/* ---------- flyer: timing board and a GIF car ---------- */
.mix .flyer { margin: 26px 0 30px; }
.countdown {
  display: inline-block; margin: 4px auto 6px; padding: 8px 14px 9px; background: #000; color: #ffde00;
  font: 700 clamp(19px, 3.4vw, 27px)/1 var(--mono); letter-spacing: .05em; font-variant-numeric: tabular-nums;
  border: 3px solid #333; box-shadow: inset 0 0 0 2px #666, 4px 4px 0 var(--navy); text-shadow: 0 0 8px rgba(255,222,0,.6);
}
.countdown small { display: block; margin-bottom: 6px; font: italic 900 11px/1 var(--f-black); letter-spacing: .14em; color: var(--hot); text-transform: uppercase; text-shadow: none; }
.countdown.is-live { color: #fff; background: var(--red); animation: blink .6s steps(1) infinite; }
.flyer .scrawl { display: block; width: max-content; margin: 2px auto 0; }
.flyer-car { display: block; width: min(410px, 100%); height: auto; margin: 0 auto -6px; image-rendering: pixelated; }

/* ---------- Pricks Media Player: the CD player, with the album list built into its window ---------- */
.mix .player { margin: 0; }
.mix .mp { grid-template-columns: 238px minmax(0, 1fr); grid-template-areas: "screen deck" "lib list"; }
.mix .mp-screen { gap: 10px; }
.mix .mp-vis { height: 64px; }
.mix .mp-art { display: none; }
/* Download: a blue Win98 button next to Repeat, for whatever is playing */
.mp-download {
  min-width: 0; height: 30px; padding: 0 12px; display: inline-flex; align-items: center; gap: 2px;
  font: 700 12px/1 var(--f-ui); color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,.4); text-decoration: none;
  background: #2457d6; box-shadow: inset -1px -1px #0a1f66, inset 1px 1px #9fbcff, inset -2px -2px #173c9e, inset 2px 2px #5f8af2, 0 0 0 1px #000;
}
.mp-download:visited, .mp-download:hover { color: #fff; }
.mp-download:hover { background: #2f66ea; }
.mp-download:active { box-shadow: inset 1px 1px #0a1f66, inset -1px -1px #9fbcff, 0 0 0 1px #000; }
.mp-download[aria-disabled] { opacity: .45; cursor: default; pointer-events: none; }   /* the disc label already shows the cover */
.mix .mp-lcd { min-width: 0; padding: 10px 12px; }
.mix .mp-title { font-size: 14px; }
/* Library: every album on the left, the tracks of the disc that's in on the right (like a real CD player) */
.mp-lib { grid-area: lib; height: 300px; overflow: auto; background: #fff; box-shadow: var(--bevel-in); padding: 0 2px 6px; }
.lib-group {
  position: sticky; top: 0; z-index: 1; margin: 0; padding: 4px 8px; font: 700 12px/1.2 var(--f-ui); color: #fff;
  background: linear-gradient(90deg, #000080, #1084d0);
}
.lib-list { list-style: none; margin: 2px 0 6px; padding: 0; }
.lib-item {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 8px; width: 100%; padding: 4px 6px; cursor: pointer;
  text-align: left; font: 12px/1.25 var(--f-ui); color: #000; background: none; border: 0;
}
.lib-item img { grid-row: 1 / span 2; width: 36px; height: 36px; border: 1px solid #000; }
.lib-title, .lib-meta { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lib-title { font-weight: 700; align-self: end; }
.lib-meta { font-size: 11px; color: #555; align-self: start; }
.lib-item:hover { background: #dfe8ff; }
.lib-item.is-shown { background: #e8ecf8; }
.lib-item.is-in, .lib-item.is-in:hover { background: #000080; color: #fff; }
.lib-item.is-in .lib-meta { color: #cfe0ff; }
.mix .mp-list { grid-area: list; height: 300px; max-height: none; }
.mix .pl-group, .mix .pl-head { display: none; }
.mix .pl-release { display: none; margin: 2px 0; }
.mix .pl-release.is-shown { display: block; }
.mp-info { display: grid; gap: 8px; padding: 10px 12px; background: #fff; box-shadow: var(--bevel-in); font: 12px/1.4 var(--f-ui); }
.mp-info p { margin: 0; }
.mp-hint { color: #555; font-style: italic; }
.mp-hint[hidden], .mp-links[hidden], .mp-links [hidden] { display: none; }
.mp-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; animation: links-in .35s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes links-in { from { transform: translateY(6px); opacity: 0; } }
.mp-song-link { display: inline-flex; align-items: center; gap: 6px; }
.mp-song-link img { width: 20px; height: 20px; }
.mp-release-link { font-weight: 400; }

.mp-also { display: flex; align-items: center; gap: 8px; color: #555; border-top: 1px solid #e4e4e4; padding-top: 8px; }
.mp-svc[hidden] { display: none; }
.mp-also img { width: 22px; height: 22px; transition: transform .15s; }
.mp-also a:hover img, .mp-also a:focus-visible img { transform: scale(1.18) rotate(-6deg); }
/* the song's music video: a little Win98 button after the platform logos */
.mp-video { margin-left: 4px; padding: 3px 8px; font: 700 11px/1.2 var(--f-ui); color: #000; text-decoration: none; white-space: nowrap;
  background: var(--silver); box-shadow: var(--bevel-out); }
.mp-video:visited { color: #000; }
.mp-video:hover { color: #c00; }
.mp-video:active { box-shadow: var(--bevel-in); }
.mp-video[hidden] { display: none; }

/* Credits: a little Win98 window over the player with the release's Bandcamp credits */
/* sits over the album list + tracklist (same grid rows), so the controls above stay clickable */
.mp-credits-win {
  position: relative; z-index: 5; grid-column: 1 / -1; grid-row: lib-start / list-end; min-height: 0;
  contain: size; /* fill the rows the lists already use; never stretch them */
  display: flex; flex-direction: column; background: var(--silver); padding: 3px; box-shadow: var(--bevel-out), 6px 8px 16px rgba(0,0,0,.55);
  animation: credits-in .16s steps(3);
}
.mp-credits-win[hidden] { display: none; }
@keyframes credits-in { from { transform: scale(.6); opacity: 0; } }
.mp-credits-x {
  width: 18px; height: 16px; padding: 0; display: grid; place-items: center; cursor: pointer;
  font: 700 11px/1 var(--f-ui); color: #000; background: var(--silver); border: 0; box-shadow: var(--bevel-out);
}
.mp-credits-x:active { box-shadow: var(--bevel-in); }
.mp-credits-body { flex: 1; margin-top: 3px; min-height: 0; display: flex; flex-direction: column; background: #fff; box-shadow: var(--bevel-in); padding: 8px 10px; }
.mp-credits-scroll { flex: 1; min-height: 0; overflow: auto; }
.mp-credits-label { margin: 0 0 6px; font: italic 11px/1.3 var(--f-ui); color: #555; }
.mp-credits-label:empty { display: none; }
.mp-credits-song { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px dashed #b8b8b8; }
.mp-credits-song[hidden] { display: none; }
.mp-credits-song .mp-credits-label { font: 700 13px/1.3 var(--f-ui); font-style: normal; color: #000080; }
.mp-credits-who { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 14px; font: 12px/1.4 var(--f-ui); }
.mp-credits-who dt { font-weight: 700; }
.mp-credits-who dd { margin: 0; color: #333; }
.mp-credits-text { margin: 0; white-space: pre-wrap; word-break: break-word; font: 12px/1.45 "Courier New", Courier, monospace; color: #000; }
.mp-credits-text .hl { background: #fff3a0; box-shadow: -4px 0 0 #fff3a0, 4px 0 0 #fff3a0; font-weight: 700; }
/* Shuffle / Repeat as icon buttons (pressed in and pink while on) */
.mp-btn.mp-toggle { padding: 0; }
/* a bit tighter so the transport, toggles and the three colored buttons share one row */
.mix .mp-controls { gap: 5px; }
.mix .mp-btn { width: 35px; }
.mix .mp-play { width: 44px; }
.mix .mp-download, .mix .mp-credits, .mix .mp-lyrics { padding: 0 9px; }
.mp-btn.mp-toggle[aria-pressed="true"] svg { fill: #c4006a; }

/* Credits: a yellow Win98 button next to the blue Download one, grey until a song is picked */
.mp-credits {
  min-width: 0; height: 30px; padding: 0 12px; font: 700 12px/1 var(--f-ui); color: #1d1236; cursor: pointer;
  background: #ffd60e; box-shadow: inset -1px -1px #7a5a00, inset 1px 1px #fff3a0, inset -2px -2px #c9a400, inset 2px 2px #ffe866, 0 0 0 1px #000;
}
.mp-credits:hover { background: #ffe14d; }
.mp-credits[aria-expanded="true"], .mp-credits:active { box-shadow: inset 1px 1px #7a5a00, inset -1px -1px #fff3a0, 0 0 0 1px #000; background: #f2c400; }
.mp-credits[aria-disabled] { opacity: .45; cursor: default; pointer-events: none; }
.mp-credits-who a { color: #0033cc; }

/* Lyrics: hot pink button next to Credits; the window reuses the credits window */
.mp-lyrics {
  min-width: 0; height: 30px; padding: 0 12px; font: 700 12px/1 var(--f-ui); color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,.35); cursor: pointer;
  background: #ff3ea5; box-shadow: inset -1px -1px #7a0040, inset 1px 1px #ffb3db, inset -2px -2px #c4006a, inset 2px 2px #ff7cc4, 0 0 0 1px #000;
}
.mp-lyrics:hover { background: #ff5cb4; }
.mp-lyrics[aria-expanded="true"], .mp-lyrics:active { box-shadow: inset 1px 1px #7a0040, inset -1px -1px #ffb3db, 0 0 0 1px #000; background: #e62e90; }
.mp-lyrics[aria-disabled] { opacity: .45; cursor: default; pointer-events: none; }
.mp-lyrics-full { margin: -6px 0 10px; font: 11px/1.3 var(--f-ui); }
.mp-lyrics-page[hidden] { display: none; }
.mp-lyrics-song { margin: 0 0 10px; font: 700 15px/1.25 var(--f-head); color: #000080; }
.mp-lyrics-text { margin: 0; white-space: pre-wrap; word-break: break-word; font: 13px/1.65 var(--f-body); color: #111; }

/* a [ft. someone] link sits right after the song title; the time moves out of the button on that row */
.pl-tracks li.has-ft { align-items: baseline; }
.has-ft .pl-track { flex: 0 1 auto; width: auto; min-width: 0; }
.has-ft .pl-ft { flex: none; font: 12px/1.35 var(--f-ui); color: #0033cc; text-decoration: underline; margin: 0 6px 0 -2px; }
.has-ft > .pl-d { margin-left: auto; padding: 3px 8px 3px 0; font: 12px/1.35 var(--f-ui); color: #555; font-variant-numeric: tabular-nums; }
.has-ft:has(.is-current) .pl-ft, .has-ft:has(.is-current) > .pl-d { color: #cfe0ff; }

/* CATS from Zero Wing, over the Discman for the first 3 seconds of Devil's Plaything (mix.js) */
.mp-screen { position: relative; }
.cats-pop {
  position: absolute; z-index: 6; left: 0; top: 6px; width: 100%;
  background: #000; padding: 6px 6px 8px; box-shadow: 0 0 0 2px #000, 0 0 0 4px #c8c0a0, 6px 8px 16px rgba(0,0,0,.6);
  animation: cats-in .25s steps(4);
}
.cats-pop[hidden] { display: none; }
@keyframes cats-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
.cats-pop img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.cats-line { margin: 7px 2px 0; min-height: 1.2em; font: 400 12px/1.2 var(--f-pixel); color: #d8d0a8; letter-spacing: .04em; white-space: nowrap; }

/* The Discman. Top-down view; the smoked lid swings up toward you on a hinge. */
.dm-stage { display: grid; place-items: center; padding: 6px 0 0; }
.discman {
  position: relative; width: 100%; max-width: 232px; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.95) 0 5%, transparent 28%),
    conic-gradient(from 200deg, #f5f7fb, #b6bbc6, #eef1f6, #9ba1ad, #f5f7fb, #c1c6cf, #e9ecf2, #a9aeb9, #f5f7fb);
  box-shadow: 0 0 0 2px #5f6472, inset 0 -6px 10px rgba(0,0,0,.28), inset 0 6px 8px rgba(255,255,255,.85), 6px 10px 14px rgba(0,0,0,.5);
}
.discman:focus-visible { outline: 2px dotted #000; outline-offset: 4px; }
.dm-well {
  position: absolute; inset: 8%; border-radius: 50%;
  background: radial-gradient(circle, #30333b 0 28%, #17181d 70%);
  box-shadow: inset 0 7px 14px rgba(0,0,0,.95), 0 1px 0 rgba(255,255,255,.8);
}
.dm-spindle {
  position: absolute; left: 50%; top: 50%; width: 14%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, #9aa0aa 60%, #50545c); box-shadow: 0 0 0 4px #222;
}
.dm-disc { position: absolute; inset: 10%; border-radius: 50%; opacity: 0; }
.discman.has-disc .dm-disc { opacity: 1; }
/* the spin only pauses when the music does, so a paused disc stays where it stopped */
.dm-disc { animation: spin .8s linear infinite paused; }
.player.is-playing .dm-disc { animation-play-state: running; }
/* A disc face: album art printed on it, rainbow sheen, clear hub */
.cd-face { background: var(--label, #ccc) center / cover; box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 2px 5px rgba(0,0,0,.6); }
.cd-face::before, .cd-face::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.cd-face::before {
  background: conic-gradient(from 30deg, transparent, rgba(255,240,150,.5), transparent 16%, rgba(140,220,255,.5), transparent 33%,
                             rgba(255,150,220,.5), transparent 50%, rgba(255,240,150,.5), transparent 66%, rgba(140,220,255,.5), transparent 83%);
  mix-blend-mode: screen;
}
.cd-face::after { background: radial-gradient(circle, transparent 0 8.5%, #b8bdc6 8.5% 10%, rgba(232,238,246,.94) 10% 17.5%, rgba(120,126,138,.9) 17.5% 18.5%, transparent 18.5%); }
.dm-lid {
  position: absolute; inset: 4%; border-radius: 50%; transform-origin: 50% 0; transform: perspective(700px) rotateX(0deg);
  transition: transform .3s cubic-bezier(.3, 1.3, .5, 1);
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.6) 0 7%, transparent 24%),
    radial-gradient(circle, transparent 0 44%, rgba(255,255,255,.35) 44% 45%, transparent 45%),
    rgba(216, 34, 128, .3);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.4), inset 0 -10px 18px rgba(90,0,45,.35), 0 3px 6px rgba(0,0,0,.35);
}
.discman.is-open .dm-lid { transform: perspective(700px) rotateX(100deg); transition-timing-function: cubic-bezier(.2, .8, .3, 1.2); }
.dm-hinge { position: absolute; left: 36%; right: 36%; top: 2.5%; height: 3.5%; border-radius: 2px; background: linear-gradient(#7b808c, #e9ecf1 45%, #7b808c); box-shadow: 0 1px 1px rgba(0,0,0,.4); }
.dm-led {
  position: absolute; left: calc(84% - 4px); top: calc(84% - 4px); width: 8px; height: 8px; border-radius: 50%;
  background: #4a1010; box-shadow: inset 0 1px 1px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.7);
}
.player.is-playing .dm-led { background: #ff3030; box-shadow: 0 0 8px 2px rgba(255,48,48,.8); }

/* The disc in flight (mix.js): a wrapper that moves, a disc that spins in 3D, and ghost copies for the trail */
.dm-fly { position: absolute; z-index: 60; pointer-events: none; perspective: 700px; }
.dm-fly.is-fixed { position: fixed; }
.dm-fly-disc { position: absolute; inset: 0; transform-style: preserve-3d; }
.dm-fly-disc > i { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; }
.dm-fly-disc > .cd-back {
  transform: rotateY(180deg);
  background:
    radial-gradient(circle, transparent 0 8.5%, #b8bdc6 8.5% 10%, rgba(232,238,246,.94) 10% 17.5%, transparent 17.5%),
    conic-gradient(from 20deg, #ff8fd0, #ffe68a, #9dffc6, #8fd8ff, #c9a2ff, #ff8fd0, #ffe68a, #9dffc6, #8fd8ff, #c9a2ff, #ff8fd0);
  box-shadow: 0 0 0 1px #555;
}
.dm-fly.ghost i { opacity: .3; }
.dm-fly.ghost + .dm-fly.ghost i { opacity: .15; }

/* ---------- shows.xls: Google Calendar on top, then the list ---------- */
.gcal { margin: 4px 0 8px; padding: 2px; background: #fff; box-shadow: var(--bevel-in); }
.gcal iframe { display: block; width: 100%; height: 460px; border: 0; }
/* under the calendar, by its + (Google's "add to my calendar"): an old-school raised button with Google's 1999-2010
   logo, blinking grey/yellow like it's 2003 (steady with reduced motion) */
.gcal-add { position: relative; display: flex; justify-content: center; margin: 0 0 26px; padding-top: 26px; }
/* and a scrappy MS Paint arrow at the right, up at the + (it stops short of the button row, so phones are fine too) */
.gcal-arrow { position: absolute; right: 12px; top: -9px; overflow: visible; pointer-events: none; }
.gcal-arrow path { fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.gcal-btn, .gcal-btn:visited { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 8px; font: 700 14px/1 var(--f-ui);
  color: #000; text-decoration: none; background: var(--silver); box-shadow: var(--bevel-out), 0 0 0 1px #000; animation: gcal-blink 1s steps(1) infinite; }
.gcal-btn img { height: 23px; width: auto; margin-bottom: -2px; }
.gcal-btn:hover { animation-play-state: paused; background: #ffff00; }
.gcal-btn:active { box-shadow: var(--bevel-in), 0 0 0 1px #000; translate: 1px 1px; }
.gcal-btn:focus-visible { outline: 2px dotted #000; outline-offset: 3px; }
@keyframes gcal-blink { 50% { background: #ffff00; box-shadow: var(--bevel-out), 0 0 0 2px var(--red); } }
@media (prefers-reduced-motion: reduce) { .gcal-btn { animation: none; } }
.dates .window-body { overflow-x: auto; }
.dates .window-body > h2 { text-align: center; }
.shows { width: 100%; border-collapse: collapse; font: 12px/1.35 var(--f-ui); background: #fff; }
.shows th { text-align: left; font-weight: 400; padding: 4px 7px; background: var(--silver); border: 1px solid #808080; box-shadow: inset 1px 1px #fff; }
.shows td { padding: 5px 7px; border: 1px solid #c8c8c8; vertical-align: top; }
.shows tbody tr:nth-child(even) td { background: #f5f7ff; }
.shows-next td { background: #ffffc8; font-weight: 700; }
.dates h3 { margin: 22px 0 8px; }
.sh-date { white-space: nowrap; font-weight: 700; }
.sh-with { color: #555; }
.sh-none { color: #555; font-style: italic; }
.sh-lineup { display: block; color: #555; font-style: italic; font-size: 11px; }
/* the cancelled Filthy Blonde release show stays on the list, stamped */
.sh-cancelled td { color: #888; }
.sh-cancelled .sh-date, .sh-cancelled .sh-event { text-decoration: line-through; text-decoration-color: var(--red); }
.stamp {
  display: inline-block; margin: 2px 0 0 6px; padding: 1px 6px; rotate: -7deg;
  font: 400 13px/1.1 var(--f-impact); letter-spacing: .08em; text-transform: uppercase; color: var(--red); border: 2px solid var(--red); opacity: .9;
}
/* the Shows page's poster corkboard (tools/build-pages.py posters_board): posters pinned up with a tilt, a stack of
   drafts behind the ones that have them, and a viewer (mix.js) that flips through a poster's final and drafts */
.posters .window-body > h2 { text-align: center; margin-bottom: 12px; }
.cork { list-style: none; margin: 0; padding: 26px 18px 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 30px 22px; align-items: start;
  background: radial-gradient(circle at 20% 30%, rgba(0,0,0,.08) 0 1px, transparent 2px) 0 0 / 7px 9px, radial-gradient(circle at 70% 60%, rgba(255,255,255,.12) 0 1px, transparent 2px) 0 0 / 11px 8px,
    radial-gradient(circle at 40% 80%, rgba(80,40,0,.18) 0 1.5px, transparent 2.5px) 0 0 / 13px 15px, #b9864f;
  border: 10px solid #7a4e24; box-shadow: inset 0 0 18px rgba(0,0,0,.45), inset 0 0 0 1px #5a3510; }
.pin { position: relative; display: grid; justify-items: center; gap: 6px; rotate: var(--tilt, 0deg); }
.pin::before { content: ""; position: absolute; z-index: 2; top: -8px; left: 50%; width: 14px; height: 14px; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff8a8a, #d00 55%, #700); box-shadow: 1px 3px 3px rgba(0,0,0,.5); }
.pin-poster { position: relative; display: block; width: 100%; background: #fff; box-shadow: 2px 4px 8px rgba(0,0,0,.45); transition: scale .12s; }
.has-drafts .pin-poster { box-shadow: 2px 4px 8px rgba(0,0,0,.45), 5px -4px 0 #f4f0e6, 5px -4px 0 1px rgba(0,0,0,.25), 10px -8px 0 #ebe5d6, 10px -8px 0 1px rgba(0,0,0,.25); }
.pin-poster img { display: block; width: 100%; height: auto; }
.pin-poster:hover, .pin-poster:focus-visible { scale: 1.05; z-index: 3; }
.pin-poster:focus-visible { outline: 2px dotted #fff; outline-offset: 3px; }
.pin-stamp { position: absolute; left: 50%; top: 42%; translate: -50% -50%; margin: 0; rotate: -14deg; font-size: 15px; white-space: nowrap; background: rgba(255,255,255,.82); border-width: 3px; }
.pin-cap { margin: 0; padding: 2px 7px; font: 700 11px/1.3 var(--f-ui); text-align: center; color: #000; background: #fffbe0; box-shadow: 1px 2px 3px rgba(0,0,0,.35); rotate: calc(var(--tilt, 0deg) * -1.4); }
.pin-cap a { color: #0033cc; }
.pin-more { font: 700 10px/1 var(--f-ui); padding: 4px 7px; cursor: pointer; color: #000; background: var(--silver); border: 0; box-shadow: var(--bevel-out), 0 0 0 1px #000; }
.pin-more:active { box-shadow: var(--bevel-in), 0 0 0 1px #000; }
.poster-view { width: min(760px, 94vw); max-height: 94vh; padding: 0; border: 0; background: var(--silver); box-shadow: var(--bevel-out), 0 0 0 1px #000, 0 20px 50px rgba(0,0,0,.6); }
.poster-view::backdrop { background: rgba(0,0,0,.7); }
.poster-view .window-body { display: grid; gap: 8px; padding: 8px; }
.pv-img { display: block; max-width: 100%; max-height: calc(94vh - 120px); margin: 0 auto; object-fit: contain; background: #fff; box-shadow: var(--bevel-in); }
.pv-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 12px/1.3 var(--f-ui); color: #000; }
.pv-bar .btn98 { min-width: 70px; }
.pv-which { font-weight: 700; text-align: center; }
.pv-which small { display: block; font-weight: 400; color: #333; }
@media (max-width: 560px) {
  .cork { grid-template-columns: 1fr 1fr; gap: 24px 14px; padding: 20px 10px 12px; border-width: 6px; }
  .pin-stamp { font-size: 12px; }
  .pin-cap { font-size: 10px; }
}
.shows-scroll { max-height: 300px; overflow: auto; box-shadow: var(--bevel-in); padding: 2px; background: #fff; }
.footnote { margin: 8px 0 0; font-size: 11px; color: #666; }

/* ---------- photos: polaroid viewer on dark wood paneling ---------- */
.photos .window-body {
  padding: 22px clamp(12px, 3vw, 26px) 10px;
  background: #24150b url("/assets/img/wood-dark.webp") 0 0 / 512px;
  box-shadow: inset 0 0 50px rgba(0,0,0,.7);
}
.gal-stage { margin: 0; height: min(560px, 74vw); display: grid; place-items: center; }
.gal-polaroid {
  position: relative; display: grid; justify-items: center; max-width: 100%; max-height: 100%;
  background: #fff; padding: 14px 14px 0; box-shadow: 5px 8px 14px rgba(0,0,0,.55); rotate: var(--tilt, -1.5deg);
}
.gal-polaroid::before { /* tape */
  content: ""; position: absolute; z-index: 1; top: -14px; left: 50%; width: 110px; height: 28px; translate: -50% 0; rotate: -3deg;
  background: rgba(255, 62, 165, .55); box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.gal-big { display: block; cursor: zoom-in; }
.gal-img { width: auto; height: auto; max-width: 100%; max-height: calc(min(560px, 74vw) - 86px); background: #222; }
.gal-cap { min-height: 52px; display: grid; place-items: center; padding: 4px 6px; font: 400 clamp(1.1rem, 2.6vw, 1.5rem)/1.2 var(--f-marker); color: #111; text-align: center; }
.gal-polaroid.toss-r { animation: toss-r .4s cubic-bezier(.2, 1.4, .4, 1); }
.gal-polaroid.toss-l { animation: toss-l .4s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes toss-r { from { transform: translateX(70px) rotate(9deg); opacity: 0; } }
@keyframes toss-l { from { transform: translateX(-70px) rotate(-9deg); opacity: 0; } }
.gal-bar { display: flex; align-items: center; gap: 8px; margin: 18px 0 4px; }
.gal-bar .btn98 { min-width: 0; padding: 7px 12px; font-weight: 700; }
/* who took the photo on show, under the polaroid */
.gal-credit { margin: 10px 0 0; text-align: center; font: 12px/1.3 var(--f-ui); color: #fff; text-shadow: 1px 1px 0 #000; }
.gal-credit[hidden] { display: none; }
.gal-credit a, .gal-credit a:visited { color: #fff; }
/* Download full size: the original from R2 (the page shows webp copies) */
.gal-dl { white-space: nowrap; }
.gal-dl[hidden] { display: none; }
.gal-dl small { font-weight: 400; }
@media (max-width: 640px) { .gal-bar { flex-wrap: wrap; } .gal-dl { flex: 1 0 100%; } }
.gal-count {
  flex: 1; min-width: 0; text-align: center; padding: 7px 10px; background: #fff; box-shadow: var(--bevel-in);
  font: 12px/1.2 var(--f-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gal-strip {
  position: relative; list-style: none; margin: 0; padding: 16px 10px 16px; display: flex; gap: 14px; overflow-x: auto;
  scrollbar-color: #9a6a3e rgba(0,0,0,.35);
}
.gal-strip li { flex: none; }
.gal-strip a {
  display: block; width: 92px; padding: 5px 5px 0; background: #fff; text-decoration: none; color: #111;
  box-shadow: 2px 3px 5px rgba(0,0,0,.5); rotate: -3deg; transition: rotate .15s, translate .15s;
}
.gal-strip li:nth-child(even) a { rotate: 2.5deg; }
.gal-strip li:nth-child(3n) a { rotate: -1deg; }
.gal-strip img { width: 82px; height: 82px; object-fit: cover; }
.gal-strip span { display: block; padding: 3px 0 4px; font: 400 10px/1.1 var(--f-marker); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.gal-strip a:hover, .gal-strip a:focus-visible { rotate: 0deg; translate: 0 -4px; }
.gal-strip a[aria-current] { rotate: 0deg; translate: 0 -8px; box-shadow: 0 0 0 3px var(--hot), 3px 6px 8px rgba(0,0,0,.5); }

/* ---------- Australia: a red, angry, critical error ---------- */
.mix .dialog { animation: shake-hard 3.6s ease-in-out infinite; box-shadow: var(--bevel-out), 0 0 0 4px var(--red), 0 0 22px 6px rgba(224,18,47,.7), var(--drop); }
@keyframes shake-hard {
  0%, 14%, 100% { translate: 0 0; rotate: 0deg; }
  1.5% { translate: -14px 2px; rotate: -1deg; } 3% { translate: 13px -2px; rotate: 1deg; } 4.5% { translate: -11px 1px; rotate: -.8deg; }
  6% { translate: 9px 0; rotate: .6deg; } 7.5% { translate: -7px 0; } 9% { translate: 5px 0; } 10.5% { translate: -3px 0; }
}
.mix .dialog .titlebar { animation: alarm-bar .8s steps(1) infinite; }
@keyframes alarm-bar {
  0% { background: var(--gloss), linear-gradient(90deg, #a00014, #ff1f3d); }
  50% { background: var(--gloss), linear-gradient(90deg, #ff0000, #ff7a00); }
}
.mix .dialog-body { background: #fff0f1; margin-top: 3px; border-top: 10px solid transparent; border-image: repeating-linear-gradient(-45deg, #000 0 12px, var(--yellow) 12px 24px) 10; }
.mix .error-head { font-size: clamp(1.4rem, 3.6vw, 2rem); animation: alarm-text .8s steps(1) infinite; }
@keyframes alarm-text { 50% { color: #000; } }
.mix .error-head small { color: #fff; background: var(--red); width: max-content; padding: 3px 6px; }
.mix .dialog.alarm { animation: shake-now .7s linear; }
@keyframes shake-now {
  0%, 100% { translate: 0 0; rotate: 0deg; } 10% { translate: -18px 3px; rotate: -1.5deg; } 20% { translate: 17px -3px; rotate: 1.5deg; }
  30% { translate: -15px 2px; rotate: -1deg; } 40% { translate: 13px -2px; rotate: 1deg; } 50% { translate: -10px 1px; } 60% { translate: 8px 0; }
  70% { translate: -6px 0; } 80% { translate: 4px 0; } 90% { translate: -2px 0; }
}
/* one soft red wash that fades (not a strobe) */
.alarm-flash { position: fixed; inset: 0; z-index: 80; pointer-events: none; background: rgba(255,0,0,.22); animation: alarm-flash .8s ease-out forwards; }
@keyframes alarm-flash { to { opacity: 0; } }

/* ---------- sidebar ---------- */
.mix-side .window-body, .page-fun .side-win .window-body { padding: 14px 14px 16px; }
.mix-side h2 { font-size: 1.35rem; }
.side-title { margin-bottom: 8px; }
.side-win img { margin: 0 auto; image-rendering: pixelated; }
.mix-side .logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 14px; }
.mix-side .logo-grid a { padding: 9px 2px 7px; font-size: 10px; gap: 5px; }
.mix-side .logo-grid img { width: 34px; height: 34px; }
.mix-side .contact { font-size: 12px; margin: 0; }
/* find_us.lnk: grey Win98 window with a wall of 88x31-style web badges (shown a bit bigger):
   the full-color logo in a white square, the name in pixel letters on a strip of the service's color */
.links .window-body { background: transparent; padding: 10px 8px 6px; }
.badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.badges a {
  --c: #666;
  display: flex; width: 110px; height: 38px; text-decoration: none; color: #fff;
  background: #000; padding: 1px; box-shadow: 1px 1px 0 #fff inset, 2px 2px 0 rgba(0,0,0,.35);
  transition: transform .12s steps(2);
}
.badges a:visited { color: #fff; }
.b-ico { flex: none; width: 36px; display: grid; place-items: center; background: #fff; }
.badges .b-ico img { width: 26px; height: 26px; }
.b-txt {
  flex: 1; min-width: 0; display: grid; place-items: center; margin-left: 1px; padding: 0 2px;
  background: var(--c); /* flat, like the real ones */
  font: 700 10px/1.05 Verdana, Tahoma, Geneva, sans-serif; text-align: center; letter-spacing: 0;
  -webkit-font-smoothing: none; font-smooth: never;
}
.b-instagram a { --c: #c13584; }
.b-bandcamp a { --c: #1da0c3; }
.b-spotify a { --c: #1db954; }
.b-applemusic a { --c: #fa243c; }
.b-youtube a { --c: #e00000; }
.b-soundcloud a { --c: #ff5500; }
.b-facebook a { --c: #1877f2; }
.b-x a { --c: #000; }
.b-tumblr a { --c: #36465d; }
.b-reddit a { --c: #ff4500; }
/* point at one: it jumps a pixel and the logo spins, like the old buttons did */
.badges a:hover, .badges a:focus-visible { transform: translate(-1px, -2px); outline: 1px dotted #000; outline-offset: 1px; }
.badges a:hover .b-ico img { animation: spin-once .5s steps(8); }
.badges a:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 #fff inset; }
.links-status span:first-child { flex: 1; }
/* that_cat.exe (Fun page): just the photo, edge to edge in the window */
.cat .window-body { margin-top: 3px; padding: 0; line-height: 0; background: #000; box-shadow: var(--bevel-in); }
.cat img { display: block; width: 100%; height: auto; }
.cat-poke { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.cat-poke:focus-visible { outline: 2px dotted #fff; outline-offset: -6px; }
/* poked: the window rattles for a moment (site.js) */
.cat.shake { animation: cat-shake .45s steps(9) 1; }
@keyframes cat-shake {
  0%, 100% { translate: 0 0; rotate: 0deg; } 12% { translate: -4px 1px; rotate: -1deg; } 25% { translate: 4px -1px; rotate: 1deg; }
  37% { translate: -3px 0; rotate: -.6deg; } 50% { translate: 3px 1px; rotate: .6deg; } 62% { translate: -2px -1px; }
  75% { translate: 2px 0; } 87% { translate: -1px 0; }
}
/* Options (Fun page): a Win98 property sheet, one tab so far (Mouse: the sparkle trail, site.js). Only with script. */
html:not(.js) .opts { display: none; }
.opts .window-body { margin-top: 3px; padding: 10px 10px 12px; background: var(--silver); font: 12px/1.3 var(--f-ui); color: #000; }
/* tabs: the picked one stands 2px taller and joins the sheet below it */
.opts-tabs { display: flex; align-items: flex-end; padding-left: 2px; }
.opts-tabs button { position: relative; margin: 0 0 -1px; padding: 3px 10px 3px; font: inherit; color: #000; background: var(--silver);
  border: 0; border-radius: 0; cursor: pointer; box-shadow: inset 1px 1px #fff, inset -1px 0 #0a0a0a, inset -2px 0 #808080; }
.opts-tabs button[aria-selected="true"] { z-index: 1; margin: 0 -2px -2px; padding: 4px 12px 6px; }
.opts-tabs button:focus-visible { outline: 1px dotted #000; outline-offset: -5px; }
.opts-sheet { padding: 12px 12px 10px; box-shadow: var(--bevel-out); }
.opts-sheet[hidden] { display: none; }
/* Display: the little monitor (its screen draws the wallpaper like .wallpaper does, shrunk by site.js), then the list */
.opts-monitor { position: relative; width: 168px; margin: 0 auto 22px; padding: 9px 9px 11px; background: var(--silver);
  box-shadow: var(--bevel-out), 1px 1px 0 #000; }
/* the power light is a button: pressing it unlocks the secret Cheetah wallpaper (site.js) */
.opts-power { position: absolute; right: 9px; bottom: 0; width: 12px; height: 9px; padding: 0; border: 0; background: none; cursor: pointer; }
.opts-power::before { content: ""; position: absolute; left: 3px; top: 3px; width: 6px; height: 3px; background: #3c3; }
.opts-power:hover::before, .opts-power:focus-visible::before { background: #6f6; box-shadow: 0 0 4px #6f6; }
.opts-power:focus-visible { outline: 1px dotted #000; }
.opts-monitor::after { content: ""; position: absolute; left: 50%; bottom: -14px; width: 76px; height: 8px; margin-left: -38px;
  background: var(--silver); box-shadow: var(--bevel-out), 1px 1px 0 #000; } /* the stand */
.opts-screen { display: grid; place-items: center; height: 112px; background: var(--wp-color, #008080) var(--wp-image, url("/assets/img/roses.png")) var(--wp-pos, center) / var(--wp-size, cover) var(--wp-repeat, no-repeat);
  image-rendering: var(--wp-render, pixelated); filter: var(--wp-filter, saturate(1.35) brightness(1.16)); box-shadow: inset 1px 1px #808080, inset -1px -1px #fff; }
/* "(None)": Windows' 20 colors filling the screen, 5 across and 4 down, each sunken into a grey panel like the old
   color boxes, the picked one ringed in black */
.opts-colors { align-self: stretch; justify-self: stretch; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(4, 1fr);
  gap: 4px; padding: 4px; background: var(--silver); }
.opts-colors[hidden] { display: none; }
.opts-swatch { min-width: 0; padding: 0; border: 0; border-radius: 0; cursor: pointer; box-shadow: var(--bevel-in); }
.opts-swatch[aria-checked="true"] { outline: 2px solid #000; outline-offset: 0; }
.opts-swatch:focus-visible { outline: 1px dotted #000; outline-offset: 1px; }
.opts-swatch[aria-checked="true"]:focus-visible { outline: 2px dotted #000; outline-offset: 0; }
.opts-wp { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.opts-wp label { display: grid; gap: 3px; }
.opts-wp select { min-width: 0; padding: 1px; font: 12px/1.3 var(--f-ui); color: #000; background: #fff; border: 0; border-radius: 0; box-shadow: var(--bevel-in); }
.opts-wp-list select { height: auto; }
.opts-wp-list option:checked { background: #000080 linear-gradient(#000080, #000080); color: #fff; }
.opts-wp select:focus-visible { outline: 1px dotted #000; outline-offset: 1px; }
.opts-wp select:disabled { color: #808080; background: var(--silver); }
/* a Win98 group box: an etched line (grey over white) drawn as a border image, so the legend cuts a clean gap in it
   (box-shadows ran straight through the legend's words) */
.opts-group { margin: 0; padding: 6px 10px 10px; display: grid; gap: 7px; border: 2px solid #808080;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M1 1h4v4H1zm1 1v2h2V2z'/%3E%3Cpath fill='%23808080' fill-rule='evenodd' d='M0 0h4v4H0zm1 1v2h2V1z'/%3E%3C/svg%3E") 2; }
.opts-group legend { padding: 0 4px; }
.opts-group label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.opts-group small { color: #555; font-size: 11px; }
/* Win98 radio buttons: a sunken white circle, a black dot when picked */
.opts-group input, .opts-checklist input[type="radio"] { appearance: none; flex: none; width: 12px; height: 12px; margin: 0; border-radius: 50%; background: #fff; cursor: pointer;
  box-shadow: inset 1px 1px #808080, inset -1px -1px #fff, inset 2px 2px #0a0a0a, inset -2px -2px #dfdfdf; }
.opts-group input:checked, .opts-checklist input[type="radio"]:checked { background: radial-gradient(circle, #000 0 2px, #fff 2.5px); }
.opts-group input:focus-visible, .opts-checklist input:focus-visible { outline: 1px dotted #000; outline-offset: 2px; }
.opts-note { margin: 10px 0 0; }
/* Logo tab: a little preview on the desktop teal, then the color and animation lists side by side (styled like the
   Display tab's wallpaper list), and the custom color pickers */
.opts-logo-preview { margin: 0 0 10px; padding: 26px 14px 14px; background: #008080; box-shadow: var(--bevel-in); overflow: hidden; }
.opts-logo-preview .fx-stage { position: relative; display: block; width: min(88%, calc(110px * var(--logo-aspect, 4))); margin: 0 auto; }
.opts-logo-preview img { display: block; width: 100%; position: relative; z-index: 1; filter: drop-shadow(3px 4px 0 var(--navy)); }
/* the logo picker: a white sunken box of icons, like a folder in Large Icons view; the picked one's label goes navy */
.opts-logo-pick { display: grid; gap: 3px; margin: 0 0 8px; }
.opts-logo-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 2px; padding: 4px; background: #fff; box-shadow: var(--bevel-in); }
.opts-logo-icons button { display: grid; justify-items: center; align-content: start; gap: 3px; padding: 4px 2px 5px; border: 0; border-radius: 0;
  background: none; font: 11px/1.2 var(--f-ui); color: #000; text-align: center; cursor: pointer; }
.opts-logo-icons img { display: block; width: 72px; height: 40px; object-fit: contain; }
.opts-logo-icons span { padding: 0 2px; }
.opts-logo-icons button[aria-checked="true"] span { background: #000080; color: #fff; }
.opts-logo-icons button[aria-checked="true"] img { filter: drop-shadow(0 0 1px #000080) saturate(1.1); }
.opts-logo-icons button:focus-visible { outline: none; }
.opts-logo-icons button:focus-visible span { outline: 1px dotted #000; outline-offset: 1px; }
.opts-logo-lists { grid-template-columns: 1fr 1fr; }
/* the animation checklist: a white list box of Win98 radio buttons (Random, Classic, All at once) and checkboxes (the
   effects); one the logo can't do is greyed out */
.opts-checklist { display: grid; align-content: start; gap: 1px; height: 100%; min-height: 130px; padding: 3px 4px; background: #fff; box-shadow: var(--bevel-in); }
.opts-checklist label { display: flex; align-items: center; gap: 5px; padding: 1px 2px; white-space: nowrap; cursor: pointer; }
.opts-checklist label:has(:disabled) { color: #808080; cursor: default; }
.opts-checklist hr { width: 100%; margin: 2px 0; border: 0; border-top: 1px solid #808080; border-bottom: 1px solid #fff; }
.opts-logo-anim { display: grid; grid-template-rows: auto 1fr; gap: 3px; }
/* the Pixel fire row's color dropdown, and the Stroke dropdown (Sweaty (The)): small Win98 dropdowns */
.opts-checklist select, .opts-logo-stroke select { min-width: 0; padding: 0 1px; font: 11px/1.3 var(--f-ui); color: #000; background: #fff;
  border: 0; border-radius: 0; box-shadow: var(--bevel-in); cursor: pointer; }
.opts-checklist select { margin-left: auto; }
.opts-checklist select:disabled, .opts-logo-stroke select:disabled { color: #808080; background: var(--silver); cursor: default; }
.opts-logo-stroke { display: flex; align-items: center; gap: 6px; margin: 8px 2px 0; }
.opts-logo-stroke[hidden] { display: none; }
.opts-logo-stroke label { display: flex; align-items: center; gap: 6px; }
.opts-logo-save { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin: -4px 0 8px; }
/* a Win98 push button (Invert, Save) */
.opts-button { padding: 2px 10px; font: 11px/1.3 var(--f-ui); color: #000; background: var(--silver); border: 0; border-radius: 0;
  box-shadow: var(--bevel-out), 1px 1px 0 #000; cursor: pointer; }
.opts-button:active { box-shadow: var(--bevel-in); }
.opts-button:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.opts-button:disabled { color: #808080; cursor: default; }
.opts-logo-custom { display: flex; gap: 14px; margin: 8px 0 0; }
.opts-logo-custom[hidden] { display: none; }
.opts-logo-custom label { display: flex; align-items: center; gap: 6px; }
.opts-logo-custom input { width: 40px; height: 22px; padding: 1px; border: 0; background: var(--silver); box-shadow: var(--bevel-out); cursor: pointer; }
/* a Win98 checkbox: a sunken white square with a black tick */
.opts-check { display: flex; align-items: center; gap: 6px; margin: 10px 2px 0; cursor: pointer; }
.opts-check input, .opts-checklist input[type="checkbox"] { appearance: none; flex: none; width: 13px; height: 13px; margin: 0; background: #fff; cursor: pointer;
  box-shadow: inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; }
.opts-check input:checked, .opts-checklist input[type="checkbox"]:checked { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M3 6l2 2 5-5v2l-5 5-2-2z' fill='%23000'/%3E%3C/svg%3E") center / 13px no-repeat; }
.opts-check input:focus-visible { outline: 1px dotted #000; outline-offset: 2px; }
.opts-check:has(:disabled) { color: #808080; cursor: default; } /* Random's look decides it */
.opts-check input:disabled, .opts-checklist input:disabled { background-color: var(--silver); cursor: default; }
/* fun_stuff: a Win98 folder in Large Icons view, one Internet Shortcut per site: the site's logo if we have one,
   else the generic one (tools/make-icons.py) */
.fun .window-body { margin-top: 3px; padding: 10px 8px; background: #fff; box-shadow: var(--bevel-in); }
.fun-icons { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 6px; }
.fun-icons a { display: grid; justify-items: center; gap: 4px; width: 104px; padding: 2px; text-decoration: none; color: #000;
  font: 11px/1.25 var(--f-ui); text-align: center; overflow-wrap: anywhere; }
.fun-icons a:visited { color: #000; }
.fun-icons img { width: 32px; height: 32px; }
.fun-icons img[src$=".gif"] { image-rendering: pixelated; } /* the pixel-art ones; a site's own logo stays smooth */
.fun-icons span { padding: 0 2px; }
.fun-icons a:hover span, .fun-icons a:focus-visible span { background: #000080; color: #fff; outline: 1px dotted #ff0; } /* selected, like Explorer */
.fun-icons a:hover img, .fun-icons a:focus-visible img { filter: sepia(1) hue-rotate(190deg) saturate(3) brightness(.75); }
/* guestbook.exe (/fun/, assets/js/guestbook.js): a Win98 form over a sunken page of entries, set in Times like a
   1999 guestbook. The "website" field is a trap for robots, kept off screen. */
.gb .window-body { margin-top: 3px; padding: 8px 12px 12px; background: var(--silver); }
.gb-head { margin: 0 0 6px; text-align: center; line-height: 0; }
/* the GIF's ribbon sits low in it (the pen writes from above), so it's pulled up under the title bar and the pen pokes
   out over the window; the form comes up into the empty rows under the ribbon */
.gb-head img { position: relative; z-index: 1; display: block; margin: -42px auto -14px; image-rendering: pixelated; }
.gb-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 8px 10px; font: 12px/1.3 var(--f-ui); }
.gb-form[hidden] { display: none; }
.gb-form label { display: grid; gap: 3px; }
.gb-msg-field, .gb-send { grid-column: 1 / -1; }
.gb-form input, .gb-form textarea { min-width: 0; padding: 4px 5px; font: 13px/1.3 var(--f-ui); color: #000; background: #fff; border: 0; border-radius: 0; box-shadow: var(--bevel-in); }
.gb-form textarea { resize: vertical; min-height: 76px; }
.gb-form input:focus, .gb-form textarea:focus { outline: 1px dotted #000; outline-offset: 1px; }
@media (pointer: coarse) { .gb-form input, .gb-form textarea { font-size: 16px; } } /* under 16px, iPhones zoom in on focus */
.gb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gb-send { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.gb-send .btn98:disabled { color: #808080; text-shadow: 1px 1px 0 #fff; cursor: default; }
.gb-entries {
  list-style: none; margin: 12px 0 0; padding: 2px 12px; max-height: 480px; overflow-y: auto;
  background: #fff; box-shadow: var(--bevel-in); font: 16px/1.35 "Times New Roman", Times, serif; color: #000;
}
.gb-entry { padding: 10px 0 11px; border-bottom: 1px dashed #a0a0a0; }
.gb-entry:last-child { border-bottom: 0; }
.gb-entry.is-new { animation: gb-new 2.4s steps(1) 1; }
@keyframes gb-new { 0%, 50% { background: #ffffcc; } 25%, 75% { background: #fff; } }
.gb-who { margin: 0 0 3px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.gb-who b { color: #000080; font-size: 17px; }
.gb-who i { color: #555; }
.gb-who time { margin-left: auto; font: 11px/1.4 var(--f-ui); color: #666; }
.gb-text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.gb-empty { padding: 14px 0; color: #555; font-style: italic; }
.gb-more-row { margin: 10px 0 0; text-align: center; }
.gb-more-row:has(.gb-more[hidden]) { display: none; }

/* Instagram's own profile embed: header plus the latest six posts (3 x 2), so the height follows the width */
/* the embed fills the window edge to edge (Instagram's own embed: a 147px header + two rows of 3 square posts) */
.ig .window-body { container-type: inline-size; padding: 0 !important; margin-top: 3px; background: var(--silver); }
.ig-frame { display: block; width: 100%; height: calc(147px + 66.67cqi + clamp(0px, (100cqi - 400px) * .1, 12px)); border: 0; background: #fff; }
.ig-follow { margin: 0; padding: 8px 0 6px; text-align: center; }
.ig-follow .candy { --c: var(--hot); }
.hotbox .fine-label { text-align: center; margin-bottom: 6px; }
.hotcard {
  display: grid; gap: 8px; justify-items: center; text-align: center; text-decoration: none; color: #000; padding: 12px 10px;
  border: 1px solid #000; box-shadow: var(--drop); background: repeating-linear-gradient(45deg, #ffe2f3 0 10px, #fff 10px 20px);
}
.hotcard:visited, .hotcard:hover { color: #000; }
.hot-flash { font: 400 26px/1 var(--f-impact); text-transform: uppercase; animation: ad-flash .7s steps(1) infinite; }
.hot-sub { font: italic 11px/1.3 var(--f-body); }
/* Hot singles: a dating profile per single that flips every few seconds (mix.js); Meet plays it */
.hotcard { gap: 7px; }
.hotcard > p { margin: 0; }
.hotcard .hot-sub { font: 700 11px/1.3 var(--f-body); font-style: normal; }
.hs-list { list-style: none; margin: 2px 0 0; padding: 0; width: 100%; }
.hs { display: none; gap: 3px; padding: 8px; text-align: left; background: #fff; border: 1px solid #000; box-shadow: 2px 3px 0 rgba(0,0,0,.25); }
.hs.is-on { display: grid; animation: hs-in .32s steps(4); }
@keyframes hs-in { from { transform: translateX(34px); opacity: 0; } }
.hs img { width: 100%; max-width: 200px; justify-self: center; aspect-ratio: 1; border: 1px solid #000; margin-bottom: 3px; }
.hs-name { margin: 0; display: flex; justify-content: space-between; align-items: center; gap: 6px; font: 700 15px/1.2 var(--f-body); color: #000; }
.hs-online { flex: none; font: 700 10px/1 var(--f-ui); color: #0a8a2a; }
.hs-online::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 50%; background: #2bd64f; box-shadow: 0 0 5px #2bd64f; animation: blink 1s steps(1) infinite; }
.hs-where { margin: 0; font: 700 11px/1.3 var(--f-body); color: #c4006a; }
.hs-bio { margin: 2px 0 6px; font: italic 12px/1.35 Georgia, "Times New Roman", serif; color: #222; }
.hs-meet {
  font: 700 13px/1 var(--f-ui); color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,.4); cursor: pointer; padding: 9px 10px;
  background: var(--gloss), var(--hot); border: 1px solid rgba(0,0,0,.6); box-shadow: 0 2px 4px rgba(0,0,0,.4);
  animation: pulse 1.4s steps(2) infinite;
}
.hs-meet:hover { filter: brightness(1.1); }
.hs-btns { margin: 0; width: 100%; }
.hs-next { width: 100%; min-width: 0; font: 700 12px/1 var(--f-ui); padding: 7px 10px; cursor: pointer; color: #000; background: var(--silver); border: 0; box-shadow: var(--bevel-out), 0 0 0 1px #000; }
.hs-next:active { box-shadow: var(--bevel-in), 0 0 0 1px #000; }
.hs-fine { margin: 0; font: 9px/1.2 var(--f-body); color: #666; }
/* ...or, on some page loads (mix.js picks), Jon's Elias Unlimited, as a 2004 LowerMyBills-style ad: white box, bold
   blue and red Arial, Jon in his suit over a red arrow, dropdowns and a star rating */
.eu-spot { display: grid; gap: 4px; padding: 7px 7px 5px; text-align: center; color: #000; font-family: Arial, Helvetica, sans-serif; background: #fff; border: 1px solid #999; box-shadow: var(--drop); }
.eu-spot[hidden], .hotcard[hidden] { display: none; }
.eu-spot p { margin: 0; }
.eu-head { font: 700 23px/1.05 Arial, Helvetica, sans-serif; color: #0033cc; letter-spacing: -.02em; }
.eu-head small { display: block; font-size: 15px; }
.eu-head b { font-size: 19px; vertical-align: -1px; }
.eu-sub { font: 700 10.5px/1.2 Arial, Helvetica, sans-serif; color: #cc0000; }
.eu-row { display: grid; grid-template-columns: 44% 1fr; gap: 6px; align-items: start; margin-top: 2px; text-align: left; }
.eu-pic { border: 1px solid #666; background: linear-gradient(#cfe0f5, #8fb0dc); }
.eu-pic img { display: block; width: 100%; height: auto; }
.eu-arrow { display: block; height: 12px; margin: 3px 2px 3px; background: linear-gradient(90deg, #c00, #e00) left center / 0% 6px no-repeat; position: relative; animation: eu-arrow 2.2s steps(12) infinite; }
.eu-arrow::after { content: ""; position: absolute; top: 0; left: var(--tip, 0%); border: 6px solid transparent; border-left: 9px solid #e00; border-right: 0; translate: -2px 0; animation: eu-tip 2.2s steps(12) infinite; }
@keyframes eu-arrow { to { background-size: 92% 6px; } }
@keyframes eu-tip { from { left: 0%; } to { left: 92%; } }
.eu-pic { background-color: #fff; }
.eu-picks { display: grid; gap: 3px; }
.eu-spot label { display: grid; gap: 1px; font: 700 10px/1.1 Arial, Helvetica, sans-serif; color: #000; text-align: left; }
.eu-spot select, .eu-spot input { width: 100%; min-width: 0; box-sizing: border-box; height: 18px; padding: 0 2px; font: 11px Arial, Helvetica, sans-serif; color: #000;
  background: #fff; border: 1px solid #7f9db9; border-radius: 0; }
.eu-spot input:focus, .eu-spot select:focus { outline: 1px solid #0033cc; }
/* the visitor's details: Unlimit My Ideas! sends them and the picks to Jon (mix.js) */
.eu-form { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 5px; margin: 3px 0 0; padding: 5px 5px 6px; background: #eef3fb; border: 1px solid #b8c8e0; }
.eu-form .eu-wide { grid-column: 1 / -1; }
.eu-req { font-style: normal; color: #cc0000; }
.eu-go { grid-column: 1 / -1; justify-self: center; margin-top: 3px; padding: 3px 14px; font: 700 12px/1.2 Arial, Helvetica, sans-serif; color: #000; cursor: pointer;
  background: linear-gradient(#fff, #ece9d8); border: 1px solid #003c74; border-radius: 3px; box-shadow: inset 0 -1px 0 #d6d0c0; }
.eu-go:hover { box-shadow: inset 0 0 0 2px #f8b636; }
.eu-go:active { background: #e3e0d0; }
.eu-go:disabled { color: #888; cursor: wait; }
.eu-trap { position: absolute; left: -9999px; }
.eu-done { grid-column: 1 / -1; margin: 2px 0 0; font: 700 11px/1.25 Arial, Helvetica, sans-serif; color: #007a00; text-align: center; }
.eu-done.is-err { color: #cc0000; }
.eu-done a { color: #0000ee; }
.eu-rating { font: 9px/1.2 Arial, Helvetica, sans-serif; }
.eu-stars { display: block; font-size: 15px; line-height: 1; color: #cc0000; letter-spacing: 1px; }
.eu-foot { display: flex; justify-content: space-between; align-items: end; gap: 6px; margin-top: 3px !important; text-align: right; font: 8px/1.2 Arial, Helvetica, sans-serif; color: #777; }
.eu-logo { display: inline-flex; align-items: center; gap: 2px; font: italic 700 10px/1 Arial, Helvetica, sans-serif; color: #0033cc; text-decoration: none; white-space: nowrap; }
.eu-logo img { width: 13px; height: auto; }
.eu-logo sup { font-size: 6px; }
@media (prefers-reduced-motion: reduce) { .eu-arrow, .eu-arrow::after { animation: none; background-size: 92% 6px; } .eu-arrow::after { left: 92%; } }
/* ...and Ant's other bands, each as a different 2000s ad: Textbook as Classmates.com, TaxFraud as LowerMyBills' "Fed
   cuts rate", DS1! as Yahoo's "Quick! Find email from an old flame" (in his site's red) */
.tb-spot[hidden], .tf-spot[hidden], .ds-spot[hidden] { display: none; }
.tb-spot, .tf-spot, .ds-spot { box-shadow: var(--drop); font-family: Arial, Helvetica, sans-serif; color: #000; }
.tb-spot p, .tf-spot p, .ds-spot p { margin: 0; }
.tb-spot { display: grid; gap: 8px; justify-items: center; padding: 10px 10px 6px; text-align: center; background: linear-gradient(#fff 60%, #eef2f7); border: 1px solid #8a9bb3; }
.tb-head { font: 700 17px/1.15 Arial, Helvetica, sans-serif; color: #1b2a4a; }
.tb-head small { display: block; margin-top: 2px; font-size: 12px; color: #c00; }
.tb-class { margin-top: -3px !important; font: italic 10px/1.2 Georgia, "Times New Roman", serif; color: #444; }
.tb-faces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; }
.tb-faces img { width: 100%; height: auto; border: 3px solid #fff; outline: 1px solid #999; filter: grayscale(1) contrast(1.1); box-shadow: 1px 2px 3px rgba(0,0,0,.3); }
.tb-ask { display: flex; align-items: center; gap: 8px; font: 15px/1.2 Arial, Helvetica, sans-serif; }
.tb-ask select { width: 64px; font: 13px Arial, Helvetica, sans-serif; color: #000; background: #fff; border: 1px solid #7f9db9; border-radius: 0; overflow: hidden; }
.tb-find { display: inline-block; padding: 3px 26px; font: 700 13px/1.2 Arial, Helvetica, sans-serif; color: #000; text-decoration: none; background: linear-gradient(#fff, #e3e3e3); border: 1px solid #555; border-radius: 3px; box-shadow: inset 0 -1px 0 #bbb; }
.tb-find:hover { background: #fff; color: #000; }
.tb-btns { display: grid; gap: 4px; justify-items: center; }
.tb-senior { font: 700 10px/1.2 Arial, Helvetica, sans-serif; color: #2a6b3a; }
.tb-foot { align-self: stretch; display: flex; align-items: center; gap: 6px; font-size: 9px; color: #555; text-align: left; }
.tb-foot a { flex: none; font: 700 12px/1 Arial, Helvetica, sans-serif; color: #2a6b3a; text-decoration: none; }
.tb-foot a span { font-weight: 400; color: #6a8; }
.tb-foot a::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 3px; vertical-align: -1px; background: #2a6b3a; border-radius: 2px; }
.tf-spot { display: grid; gap: 5px; padding: 8px 8px 5px; text-align: center; background: #fff; border: 1px solid #999; }
.tf-head { font: 700 16px/1.1 Arial, Helvetica, sans-serif; color: #000; }
.tf-sub { font: 700 13px/1.15 Arial, Helvetica, sans-serif; color: #0033cc; }
.tf-red { font: 700 10.5px/1.2 Arial, Helvetica, sans-serif; color: #cc0000; }
.tf-row { display: grid; grid-template-columns: 52% 1fr; gap: 6px; align-items: center; text-align: center; }
.tf-row img { width: 100%; height: auto; border: 1px solid #666; }
.tf-side { display: grid; gap: 4px; justify-items: center; font: 700 11px/1.15 Arial, Helvetica, sans-serif; }
.tf-side select { width: 100%; font: 11px Arial, Helvetica, sans-serif; color: #000; background: #fff; border: 1px solid #7f9db9; border-radius: 0; height: 18px; }
.tf-go { margin-top: 10px; font: 700 12px/1.2 Arial, Helvetica, sans-serif; color: #0000ee; text-decoration: underline; }
.tf-go:visited { color: #551a8b; }
.tf-foot { display: flex; justify-content: space-between; align-items: end; gap: 6px; font: 8px/1.2 Arial, Helvetica, sans-serif; color: #777; text-align: right; }
.tf-foot a { display: inline-flex; align-items: center; gap: 3px; flex: none; font: italic 700 10px/1 Arial, Helvetica, sans-serif; color: #0033cc; text-decoration: none; }
.tf-foot img { width: 16px; height: auto; }
.tf-cred { display: block; margin-top: 1px; font-size: 6.5px; color: #999; }
.ds-spot { display: grid; background: #ff0000; border: 1px solid #800; }
.ds-spot > img { display: block; width: 100%; height: 170px; object-fit: cover; object-position: 50% 30%; }
.ds-panel { display: grid; gap: 6px; padding: 9px 10px 8px; color: #fff; background: #ff0000; }
.ds-head { font: 700 19px/1.12 Arial, Helvetica, sans-serif; text-shadow: 1px 1px 0 #900; }
.ds-sub { font: 11px/1.35 Arial, Helvetica, sans-serif; }
.ds-more a { font: 700 12px/1.2 Arial, Helvetica, sans-serif; color: #fff; text-decoration: underline; }
.ds-logo { justify-self: end; margin-top: -4px !important; padding: 0 6px 1px; background: #fff; transform: skewX(-8deg); }
.ds-logo a { display: block; font: 900 24px/1.05 Georgia, "Times New Roman", serif; letter-spacing: -.02em; color: #ff0000; text-decoration: none; transform: skewX(8deg); }

/* ---------- a GIF car drives by above the taskbar now and then (mix.js): Stephen "Kamshaft" Cameron's 1982 DeLorean
   DMC-12 for Midtown Madness 2 (2001), turning as it goes (tools/make-delorean-spin.py) ---------- */
.drive-by {
  position: fixed; z-index: 35; left: 100%; bottom: calc(var(--taskbar-h) + 2px); width: 120px; height: auto;
  image-rendering: pixelated; pointer-events: none; visibility: hidden; filter: drop-shadow(0 3px 2px rgba(0,0,0,.4));
}
.drive-by.go { visibility: visible; pointer-events: auto; cursor: pointer; } /* (mix.js drives it; click it and it turns round) */
.drive-by.flip { transform: scaleX(-1); }
/* Options > Car (mix.js): the drive-by's car, by thumbnail (one sheet, tools/drive-by-thumbs.py: 120x56 cells shown at
   90x42), grouped by game, then its paints as their spinning GIFs; picked ones look like the Logo tab's */
.opts-car-intro, .opts-car-paint-label { margin: 0 0 4px; }
.opts-cars { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 2px; padding: 4px; max-height: 290px;
  overflow-y: auto; background: #fff; box-shadow: var(--bevel-in); }
.opts-car-game { grid-column: 1 / -1; margin: 8px 2px 2px; padding-bottom: 2px; font: 700 11px/1.2 var(--f-ui); border-bottom: 1px solid #c0c0c0; }
.opts-cars button, .opts-paints button { display: grid; justify-items: center; align-content: start; gap: 3px; padding: 4px 2px 5px; border: 0;
  border-radius: 0; background: none; font: 11px/1.2 var(--f-ui); color: #000; text-align: center; cursor: pointer; }
.opts-car-thumb { display: block; width: 90px; height: 42px; background: url("/assets/img/garage/car-thumbs.webp") no-repeat 0 0 / 1440px auto; }
.opts-cars img { display: block; width: 72px; height: 40px; object-fit: contain; }
.opts-cars span:last-child, .opts-paints span { padding: 0 2px; }
.opts-cars button[aria-checked="true"] span:last-child, .opts-paints button[aria-checked="true"] span { background: #000080; color: #fff; }
.opts-cars button:focus-visible, .opts-paints button:focus-visible { outline: none; }
.opts-cars button:focus-visible span:last-child, .opts-paints button:focus-visible span { outline: 1px dotted #000; outline-offset: 1px; }
.opts-paint-row { margin-top: 8px; }
.opts-car-every { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.opts-paint-row[hidden] { display: none; }
.opts-paints { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; background: #fff; box-shadow: var(--bevel-in); }
.opts-paints img { display: block; width: 90px; height: auto; image-rendering: pixelated; }

.mix .bottom-zone { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "pc"; }

/* The visitor counter below the ads, on the page itself: a DeLorean's dashboard as pixel art, animated on a 516x161
   canvas (assets/js/dashboard.js, pictures by tools/make-dashboard.py) and scaled up in whole pixels (2x; 1x on
   mid-size screens; fit to the width on phones); the count is on its odometer. site.js decides whether this view counts. */
.counter { position: relative; margin: 24px 0 16px; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 8px; }
.counter[hidden] { display: none; }
.counter-label { margin: 0; font: 700 15px/1.2 "Times New Roman", Times, serif; color: #fff;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.counter-dash { position: relative; width: 1032px; max-width: 100%; filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
/* its switches (dashboard.js): invisible buttons over the turn signals, headlamp pills and door lamp */
.dash-control { position: absolute; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dash-control:focus-visible { outline: 2px dotted #ffe14d; outline-offset: 1px; }
.counter-cluster { display: block; width: 100%; height: auto; aspect-ratio: 516 / 161; image-rendering: pixelated; }
@media (max-width: 1100px) { .counter-dash { width: 516px; } }

/* "It's more likely than you think": the old PC-check banner, redone for ears. Rose's deadpan promo stare, Prickwatch */
.ear-check {
  grid-area: pc; justify-self: center; position: relative; width: min(720px, 100%); margin-top: 16px;
  display: grid; grid-template-columns: 42% minmax(0, 1fr); align-items: center; text-align: left;
  background: #fff; border: 7px solid #f5a31a; box-shadow: 0 3px 8px rgba(0,0,0,.35);
}
.ec-photo {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  -webkit-mask: linear-gradient(90deg, #000 70%, transparent); mask: linear-gradient(90deg, #000 70%, transparent);
}
.ec-copy { padding: 10px 14px 34px 0; }
.ec-copy p { margin: 0; }
.ec-quote { font: 400 clamp(30px, 5.4vw, 48px)/1.04 Georgia, "Times New Roman", serif; color: #111; letter-spacing: -.01em; }
.ec-quote span { display: inline-block; padding-left: .55em; }
.ec-sub { margin: 14px 0 14px 2.2em !important; font: 700 clamp(13px, 1.8vw, 16px)/1.2 "Trebuchet MS", Verdana, sans-serif; color: #2d3b8c; }
.ec-btn {
  margin-left: 4.6em; padding: 9px 20px; cursor: pointer; font: 700 clamp(14px, 2vw, 18px)/1 Verdana, Tahoma, sans-serif; color: #c0161d;
  background: linear-gradient(180deg, #fff3a6, #ffd447 45%, #f8a51b); border: 1px solid #c4700a; border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 2px 3px rgba(0,0,0,.35);
}
.ec-btn:hover { filter: brightness(1.06); }
.ec-btn:active { box-shadow: inset 0 2px 3px rgba(0,0,0,.35); }
.ec-btn.scanning { color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,.5); background: repeating-linear-gradient(-45deg, #2bb52b 0 10px, #1f8f1f 10px 20px) 0 0 / 28px 28px; animation: scan .5s linear infinite; }
@keyframes scan { to { background-position: 28px 0; } }
.ec-brand { position: absolute; right: 10px; bottom: 6px; margin: 0; display: flex; align-items: center; gap: 4px; font: 400 11px/1 Verdana, sans-serif; letter-spacing: .04em; color: #2d3b8c; }
.ec-brand img { width: 22px; height: auto; }
.ec-brand sup { font-size: 7px; }

/* ---------- the Australia critical error (site.js): full-screen, blocks the page until Ignore ---------- */
.aus-locked, .aus-locked body { overflow: hidden; }
.aus-block {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px;
  background: repeating-linear-gradient(-45deg, rgba(120,0,10,.55) 0 18px, rgba(60,0,5,.62) 18px 36px);
  backdrop-filter: blur(2px) saturate(.6);
}
.aus-crit {
  width: min(470px, 100%); background: var(--silver); padding: 3px;
  box-shadow: var(--bevel-out), 0 0 0 4px var(--red), 0 0 40px 10px rgba(255,0,0,.55), 10px 14px 30px rgba(0,0,0,.7);
}
.aus-crit .titlebar { animation: alarm-bar .8s steps(1) infinite; }
.aus-crit.jolt { animation: shake-now .6s linear; }
.aus-crit-body { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 18px 16px 6px; font: 13px/1.5 var(--f-ui); color: #000; }
.aus-crit-body p { margin: 0 0 8px; }
.aus-crit-icon {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: #fff;
  font: 700 30px/1 var(--f-ui); box-shadow: inset -2px -3px 0 rgba(0,0,0,.3), 0 0 0 2px #7a0010, 2px 3px 0 rgba(0,0,0,.35);
}
.aus-crit-head { font: 900 clamp(1.1rem, 4vw, 1.4rem)/1.15 var(--f-black) !important; color: var(--red); text-transform: uppercase; animation: alarm-text .8s steps(1) infinite; }
.aus-crit-msg { min-height: 1.5em; font-weight: 700; color: var(--red); }
.aus-crit-btns { display: flex; justify-content: center; gap: 10px; margin: 6px 0 12px; }
.aus-crit-btns .btn98 { min-width: 84px; }

/* ---------- section pages (tools/build-pages.py) ---------- */
.section-page .mix { max-width: var(--page-max); }
.page-fun .mix { max-width: 1600px; } /* the Fun page goes wider than the rest, for its 3 columns, but not edge to edge (Ant) */
/* wide screens get 3 or 4 columns (site.js places the windows); phones one, the guestbook first (Ant) */
@media (max-width: 699px) {
  .page-fun .page-cols { display: flex; flex-direction: column; gap: 26px; }
  .page-fun .page-col { display: contents; }
  .page-fun .page-col > .gb { order: -1; }
}
.section-page .race-nav { margin-bottom: 0; }
.page-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 30px; align-items: start; }
.page-col { display: grid; gap: 26px; }
.page-fun .badges a { width: 132px; height: 44px; }
.page-fun .b-ico { width: 44px; }
.page-fun .badges .b-ico img { width: 30px; height: 30px; }
.page-fun .b-txt { font-size: 11px; }
.player-dock[hidden] { display: none; }

/* Games page: one "Blow Off Some Steam" window (from a line in Romancer), skinned like the 2003 Steam client (olive VGUI panels, Tahoma,
   khaki-yellow selection). build-pages.py makes it, mix.js switches games. */
.steam {
  --st-bg: #4c5844; --st-dark: #3e4637; --st-well: #2f3629; --st-hi: #889180; --st-lo: #282e22;
  --st-text: #d8ded3; --st-dim: #a0aa95; --st-gold: #c4b550; --st-sel: #958831;
  position: relative; /* above the masthead's swirl, like .window */
  background: var(--st-bg); color: var(--st-text); font: 11px/1.4 var(--f-ui);
  border: 1px solid; border-color: var(--st-hi) var(--st-lo) var(--st-lo) var(--st-hi); box-shadow: var(--drop);
}
.steam-bar { display: flex; align-items: center; justify-content: space-between; padding: 7px 8px 5px 12px; }
.steam-title { font: 700 15px/1 var(--f-ui); letter-spacing: .02em; }
.steam-btns { display: flex; gap: 3px; }
.steam-btns i { display: grid; place-items: center; width: 16px; height: 14px; font: 700 10px/1 var(--f-ui); font-style: normal;
  border: 1px solid; border-color: var(--st-hi) var(--st-lo) var(--st-lo) var(--st-hi); }
.steam-tabs { display: flex; gap: 2px; padding: 4px 8px 0; }
.steam-tab { position: relative; top: 1px; margin: 0; padding: 7px 18px; background: var(--st-bg); color: var(--st-dim); font: 700 14px/1.2 var(--f-ui);
  cursor: pointer; border: 1px solid; border-color: var(--st-hi) var(--st-lo) var(--st-lo) var(--st-hi); }
.steam-tab:hover { color: var(--st-gold); }
.steam-tab[aria-selected="true"] { z-index: 1; background: var(--st-dark); color: var(--st-gold); border-bottom-color: var(--st-dark); }
.steam-tab:focus-visible { outline: 1px dotted var(--st-gold); outline-offset: -4px; }
.steam-body[hidden] { display: none; }
.steam-body { display: grid; gap: 14px; margin: 0 8px 8px; padding: 12px; background: var(--st-dark);
  border: 1px solid; border-color: var(--st-hi) var(--st-lo) var(--st-lo) var(--st-hi); }
/* My games, like Steam's library: the list on the left, the picked game on the right */
#steam-games { grid-template-columns: minmax(230px, 310px) minmax(0, 1fr); align-items: start; }
#steam-games .steam-list { position: sticky; top: 8px; }
.steam-panes { display: grid; gap: 24px; min-width: 0; } /* one pane shows (mix.js); all of them without script */
.steam-list { background: var(--st-well); border: 1px solid; border-color: var(--st-lo) var(--st-hi) var(--st-hi) var(--st-lo); }
.steam-head { height: 30px; display: flex; align-items: center; padding: 0 12px; background: var(--st-bg); border-bottom: 1px solid var(--st-lo);
  color: var(--st-dim); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.steam-row { display: block; width: 100%; margin: 0; padding: 6px 10px; border: 0; border-bottom: 1px solid var(--st-lo); background: none;
  color: var(--st-text); font: 16px/1.25 var(--f-ui); text-align: left; cursor: pointer; }
.steam-row:hover { color: var(--st-gold); }
.steam-row[aria-selected="true"] { background: var(--st-sel); color: #fff; }
.steam-row:focus-visible { outline: 1px dotted var(--st-gold); outline-offset: -3px; }
.steam-name { display: flex; align-items: center; gap: 12px; min-width: 0; font: 700 16px/1.2 var(--f-ui); }
.steam-name img { flex: none; width: 64px; height: 48px; object-fit: cover; border: 1px solid var(--st-lo); }
.steam-count { font-weight: 400; color: var(--st-dim); }
/* folder rows (build-pages.py FOLDERS): a disclosure triangle, a pixel-art icon (make-icons.py), games indented */
.steam-twisty { flex: none; width: 0; height: 0; margin-right: -4px; border-style: solid; border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent currentColor; transition: transform .12s steps(2); }
.steam-folder[aria-expanded="true"] .steam-twisty { transform: rotate(90deg); }
.steam-name .steam-folder-icon { image-rendering: pixelated; }
.steam-group .steam-row { padding-left: 30px; }
.steam-group .steam-row:not([aria-selected="true"]) { background: rgba(0,0,0,.14); }
.steam-group[hidden] { display: none; }
.steam-game { display: grid; gap: 0; align-content: start; min-width: 0; }
.steam-game[hidden] { display: none; }
/* the banner: the screenshot, cropped wide, with the game's title over its darkened bottom (Steam's hero + logo) */
.steam-hero { position: relative; border: 1px solid; border-color: var(--st-lo) var(--st-hi) var(--st-hi) var(--st-lo); background: #000; }
.steam-shot { display: block; }
.steam-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.steam-shot:hover img { filter: brightness(1.1); }
.steam-hero::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.78)); pointer-events: none; }
.steam-hero .game-name { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 14px; margin: 0; pointer-events: none;
  font: 700 30px/1.1 var(--f-ui); color: #fff; filter: drop-shadow(2px 2px 0 rgba(0,0,0,.7)); }
.game-name img { display: block; max-width: 100%; height: auto; } /* titles are pictures in each game's font */
/* the play bar under the banner: Launch, then version and developer like Steam's stats */
.steam-playbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding: 12px 16px; background: var(--st-well);
  border: 1px solid; border-top: 0; border-color: var(--st-lo) var(--st-hi) var(--st-hi) var(--st-lo); }
.steam-play { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.steam-stats { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0; }
.steam-stats dt { color: var(--st-dim); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.steam-stats dd { margin: 2px 0 0; font: 14px/1.3 var(--f-ui); }
.steam-info { padding: 16px 4px 0; }
.steam-info p { margin: 0 0 14px; font: 15px/1.5 var(--f-ui); }
.steam-info a, .steam-info a:visited { color: var(--st-gold); }
.steam-info .steam-fine { font-size: 12px; line-height: 1.45; color: var(--st-dim); }
.steam-btn, .steam-btn:visited { display: inline-block; background: var(--st-bg); color: var(--st-text); text-decoration: none;
  font: 700 15px/1 var(--f-ui); text-transform: uppercase; letter-spacing: .08em; padding: 10px 30px;
  border: 1px solid; border-color: var(--st-hi) var(--st-lo) var(--st-lo) var(--st-hi); }
.steam-btn:hover { color: var(--st-gold); }
/* Launch is Steam's yellow (the same khaki-yellow as the selected row) */
.steam-launch, .steam-launch:visited { background: var(--st-gold); color: #1f2416; padding: 12px 40px; font-size: 17px;
  border-color: #e9dd92 #6b6122 #6b6122 #e9dd92; }
.steam-launch:hover { background: #d4c562; color: #1f2416; }
.steam-launch:active { border-color: #6b6122 #e9dd92 #e9dd92 #6b6122; }
.steam-dl { padding: 8px 12px; font-size: 12px; letter-spacing: .03em; } /* the shareware download, next to Launch */
.steam-btn:active { border-color: var(--st-lo) var(--st-hi) var(--st-hi) var(--st-lo); }
/* The High scores tab: one big arcade screen in a black bezel, one game's top 10 at a time (mix.js), Silkscreen
   at a whole multiple of its 8px size; ranks colored down the table like an arcade's */
.steam-screen { display: flex; flex-direction: column; align-items: center; min-height: 560px; padding: 30px 20px 24px; background: #000;
  border: 14px solid #111; border-radius: 18px; box-shadow: inset 0 0 60px rgba(77,255,243,.12), 0 0 0 1px var(--st-lo);
  font: 24px/1.4 var(--f-pixel); color: #fff; text-align: center; }
.steam-board { flex: 1; display: flex; flex-direction: column; align-items: center; width: 100%; }
.steam-board[hidden], .steam-boards-off[hidden], .steam-attract[hidden] { display: none; }
.steam-board h3 { display: grid; justify-items: center; gap: 22px; margin: 0 0 18px; font: inherit; font-weight: 400; }
.steam-board-title img { display: block; max-width: 100%; height: auto; image-rendering: pixelated; }
.steam-board-head { color: #ff2a2a; letter-spacing: .12em; }
.steam-board ol { width: min(100%, 520px); margin: 0; padding: 0; list-style: none; }
.steam-board li { display: grid; grid-template-columns: 4.2em 3.6em minmax(0, 1fr); white-space: pre; text-align: left; }
.steam-board li > :last-child { text-align: right; }
.steam-board b { font-weight: 400; }
.steam-board .steam-scores-none { display: block; color: var(--st-dim); text-align: center; white-space: normal; }
.steam-start, .steam-start:visited { margin-top: auto; padding-top: 22px; color: #fff; text-decoration: none; animation: steam-blink 1.2s steps(1) infinite; }
.steam-start:hover, .steam-start:focus-visible { color: #ffe14d; animation: none; }
@keyframes steam-blink { 50% { visibility: hidden; } }
.steam-attract { margin: 14px 0 0; font-size: 16px; color: var(--st-dim); }
.steam-boards-off { margin: 40px 0 0; font-size: 16px; color: var(--st-dim); }
.steam-pick { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 12px; }
.steam-pick [role="tablist"] { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.steam-pick button { margin: 0; padding: 7px 14px; cursor: pointer; font: 700 13px/1 var(--f-ui); color: var(--st-dim); background: var(--st-bg);
  border: 1px solid; border-color: var(--st-hi) var(--st-lo) var(--st-lo) var(--st-hi); }
.steam-pick button:hover { color: var(--st-gold); }
.steam-pick button[aria-selected="true"] { color: #1f2416; background: var(--st-gold); border-color: #e9dd92 #6b6122 #6b6122 #e9dd92; }
.steam-pick button:focus-visible { outline: 1px dotted var(--st-gold); outline-offset: 2px; }
.steam-pick-step { padding: 7px 10px !important; }
@media (max-width: 700px) {
  .steam-screen { min-height: 0; padding: 20px 10px 18px; border-width: 8px; border-radius: 12px; font-size: 16px; }
  .steam-board h3 { gap: 14px; margin-bottom: 12px; }
  .steam-attract, .steam-boards-off { font-size: 8px; zoom: 2; }
}
/* "Works with" buttons: real 88x31 GIFs (tools/make-badges.py), kept pixel-sharp when scaled */
.compat { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.compat img { display: block; image-rendering: pixelated; }
@media (max-width: 700px) {
  #steam-games { grid-template-columns: minmax(0, 1fr); }
  #steam-games .steam-list { position: static; }
  .steam-hero .game-name { left: 12px; right: 12px; bottom: 10px; }
  .steam-body { padding: 8px; }
}

/* ---------- lyric pages (tools/build-lyrics.py) ---------- */
.masthead-small { padding: 18px 16px 14px; }
.masthead-small .logo .fx-stage { width: min(560px, 100%, calc(170px * var(--logo-aspect, 4))); }
.masthead-small.fx-burning { padding-top: 40px; }
.masthead-small .tagline span { font-size: clamp(16px, 2.2vw, 21px); }
.lyrics-page .race-nav { margin-bottom: 0; }
.lyr-win .window-body { padding: clamp(14px, 3vw, 26px); }
.lyr-crumbs { margin: 0 0 14px; font: 12px/1.4 var(--f-ui); color: #555; }
.lyr-song { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 28px; align-items: start; }
.lyr-cover { width: 100%; border: 1px solid #000; box-shadow: 4px 5px 8px rgba(0,0,0,.45); }
.lyr-from { margin: 12px 0 10px; font: 12px/1.45 var(--f-ui); }
.lyr-play { --c: var(--lime); }
/* an album's or EP's page: Play me under the cover (the whole thing in the player), its own pages on each service, then its Bandcamp liner notes */
.lyr-rel-art { display: grid; gap: 12px; justify-items: center; } /* the cover with Play me under it */
.lyr-rel-art .lyr-play { white-space: nowrap; }
.lyr-liner { white-space: pre-line; font: 12px/1.45 var(--f-ui); color: #222; padding: 10px 12px; background: #fff; box-shadow: var(--bevel-in); }
.lyr-liner span[title] { text-decoration: underline dotted; cursor: help; }
.lyr-listen { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.lyr-listen a { display: flex; align-items: center; gap: 8px; font: 700 12px/1.2 var(--f-ui); text-decoration: none; color: #0033cc; }
.lyr-listen a:hover { text-decoration: underline; }
.lyr-listen img { width: 22px; height: 22px; }
.lyr-listen-row { display: flex; flex-wrap: wrap; gap: 8px 22px; } /* an album's or EP's page: in a row */
.lyr-h { margin: 22px 0 8px; font: 700 14px/1.2 var(--f-ui); color: #000080; text-shadow: none; }
.lyr-credits { margin: 0; display: grid; gap: 1px; font: 12px/1.35 var(--f-ui); }
.lyr-credits dt { font-weight: 700; margin-top: 6px; }
.lyr-credits dd { margin: 0; color: #444; }
.lyr-title { margin: 0; font: 400 clamp(1.8rem, 4.6vw, 2.8rem)/1.05 var(--f-bubbly); color: var(--hot); text-shadow: 2px 0 var(--navy), -2px 0 var(--navy), 0 2px var(--navy), 0 -2px var(--navy), 3px 3px 0 var(--navy); }
.lyr-ft { font: 700 14px/1 var(--f-ui); text-shadow: none; vertical-align: middle; }
.lyr-by { margin: 6px 0 18px; font: 700 13px/1 var(--f-ui); color: #555; text-transform: uppercase; letter-spacing: .1em; }
.lyr-gif { display: block; max-width: 100%; height: auto; margin: -4px 0 18px; } /* content/lyrics-gifs.json */
.lyr-title-gif img { display: block; max-width: 100%; height: auto; margin: 0 0 6px; } /* a GIF in place of the title */
.lyr-text + .lyr-gif { margin: 22px 0 0; }
.lyr-text { margin: 0; white-space: pre-wrap; word-break: break-word; font: 15px/1.75 var(--f-body); color: #111; }
.lyr-pager { display: flex; justify-content: space-between; gap: 12px; margin: 26px 0 0; padding-top: 12px; border-top: 2px dashed rgba(0,0,0,.2); font: 13px/1.3 var(--f-ui); }
.lyr-page-title { margin: 0 0 16px; }
.lyr-group { margin: 28px 0 12px; font: 700 16px/1 var(--f-ui); color: #fff; padding: 6px 10px; background: linear-gradient(90deg, #000080, #1084d0); text-shadow: none; }
.lyr-group:first-of-type { margin-top: 0; }
.lyr-rel { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; margin: 0 0 18px; align-items: start; }
.lyr-rel img { width: 96px; border: 1px solid #000; box-shadow: 3px 4px 6px rgba(0,0,0,.4); }
.lyr-rel-title { margin: 0; font: 700 17px/1.2 var(--f-head); }
.lyr-rel-meta { margin: 2px 0 6px; font: 11px/1.3 var(--f-ui); color: #666; text-transform: uppercase; letter-spacing: .06em; }
.lyr-tracks { margin: 0; padding-left: 22px; font: 13px/1.6 var(--f-ui); }
/* two columns only for long tracklists; short ones (singles with a B-side, EPs) stay one under the other */
.lyr-tracks:has(> li:nth-child(7)) { columns: 2 220px; column-gap: 24px; }

/* ---------- smaller screens ---------- */
@media (max-width: 900px) {
  .mix-cols { grid-template-columns: minmax(0, 1fr); }
  .mix-side { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media (max-width: 640px) {
  .mix { gap: 34px; }
  /* phones: one list, with Instagram and find_us.lnk pulled up from the sidebar to right under the shows flyer, above
     the player (Ant's call); everything else keeps its order */
  .mix-cols { display: flex; flex-direction: column; gap: 34px; align-items: stretch; } /* each window the screen's width, not its widest content's (the calendar, the photo strip) */
  .mix-cols > * > * { min-width: 0; }
  .mix-main, .mix-side { display: contents; }
  .mix-main > .flyer { order: -2; }
  .mix-side > .ig, .mix-side > .links { order: -1; }
  .lyr-song { grid-template-columns: minmax(0, 1fr); }
  .lyr-side { display: grid; grid-template-columns: 110px minmax(0, 1fr); column-gap: 14px; }
  .lyr-side > :not(.lyr-cover) { grid-column: 2; }
  .lyr-side .lyr-cover { grid-row: span 4; }
  .lyr-side .lyr-h, .lyr-side .lyr-credits { grid-column: 1 / -1; }
  .mix .hero-copy { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "blurb" "scrawl" "stats"; }
  .mix .hero-copy .scrawl { justify-self: center; max-width: none; margin: 18px 0 10px; translate: none; }
  .hh-who, .hh-band { font-size: 1.1rem; }

  .stats li { padding: 12px 2px 10px; font-size: 9px; letter-spacing: .08em; }
  .race-nav { padding-right: 50px; background: var(--gloss), linear-gradient(104deg, transparent 0 31.5%, var(--pink) 31.5% 45.3%, #fff 45.3% 51.5%, var(--pink) 51.5% 63.8%, #fff 63.8% 68.4%, transparent 68.4%) right 4px top / 46px 100% no-repeat, var(--navy); } /* under the flag */
  .race-nav a { padding: 10px 9px; font-size: 11px; }
  .race-nav::before { right: 8px; width: 28px; height: 20px; }
  .mix .mp { grid-template-columns: minmax(0, 1fr); grid-template-areas: "screen" "deck" "lib" "list"; }
  .mp-lib { height: 230px; }
  .mix .mp-list { height: 260px; }
  .gcal iframe { height: 380px; }
  .mix .mp-screen { grid-template-columns: minmax(0, 1fr); }
  .mix .mp-vis { height: 60px; }
  .discman { max-width: 210px; }
  .cats-pop { left: 50%; translate: -50% 0; width: min(340px, 100%); }
  .gal-stage { height: min(440px, 100vw); }
  .gal-img { max-height: calc(min(440px, 100vw) - 76px); }
  .gal-polaroid { padding: 9px 9px 0; }
  .gal-cap { min-height: 42px; }
  .gal-bar .btn98 { padding: 7px 8px; }
  .gal-strip a { width: 74px; }
  .gal-strip img { width: 64px; height: 64px; }
  .mix .dialog { box-shadow: var(--bevel-out), 0 0 0 3px var(--red), 0 0 14px 4px rgba(224,18,47,.7); }
  .ear-check { border-width: 5px; }
  .ec-copy { padding: 8px 8px 28px 0; }
  .ec-sub { margin: 10px 0 10px .8em !important; }
  .ec-btn { margin-left: .8em; padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-window p { padding-left: 0; white-space: normal; }
  .drive-by { display: none; }
}

/* a line under a song's credits (content/credit-notes.json), like an interpolation */
.lyr-credits-note, .mp-credits-note { margin: 8px 0 0; font-size: .85em; font-style: italic; opacity: .85; }
.mp-credits-note[hidden] { display: none; }
/* a show's venue note (shows-past.json venueNote): a little marker with a Win98 tooltip on hover, or tap on phones */
.sh-note { position: relative; margin-left: 2px; cursor: help; font-size: .8em; vertical-align: super; text-decoration: underline dotted; }
.sh-note::after { content: attr(data-tip); position: absolute; left: 0; top: 100%; margin-top: 4px; z-index: 5; white-space: nowrap;
  padding: 2px 5px; background: #ffffe1; color: #000; border: 1px solid #000; font: 400 11px/1.3 var(--f-ui); font-style: normal;
  box-shadow: 1px 1px 0 rgba(0,0,0,.35); visibility: hidden; }
.sh-note:hover::after, .sh-note:focus::after { visibility: visible; }

/* 404 (site/404.html, tools/build-pages.py not_found): a Win98 error box, Ant's Awesome Face bobbing beside it */
.err-win { max-width: 620px; margin: 40px auto 60px; }
.err-body { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; padding: 22px; background: var(--silver); font: 13px/1.45 var(--f-ui); color: #000; }
.err-face { width: 160px; height: auto; animation: err-bob 2.4s ease-in-out infinite; }
@keyframes err-bob { 50% { transform: rotate(-6deg) translateY(-6px); } }
.err-text h1 { margin: 0 0 8px; font: 700 20px/1.2 var(--f-ui); color: #000; text-shadow: none; }
.err-text p { margin: 0 0 8px; }
.err-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px !important; }
.err-buttons .opts-button { display: inline-block; min-width: 64px; text-align: center; text-decoration: none; color: #000; }
.err-buttons .err-ok { font-weight: 700; outline: 1px solid #000; }
@media (max-width: 520px) { .err-body { grid-template-columns: 1fr; justify-items: center; text-align: center; } .err-face { width: 120px; } .err-buttons { justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .err-face { animation: none; } }

/* dmc12.exe (Fun page; assets/js/garage.js): the DeLorean on a turntable in a dark showroom, a still picture until
   WebGL has it (or instead of it, without WebGL) */
.garage .window-body { margin-top: 3px; padding: 8px; background: var(--silver); font: 12px/1.3 var(--f-ui); color: #000; }
.garage-stage { position: relative; aspect-ratio: 2 / 1; overflow: hidden; box-shadow: var(--bevel-in);
  background: radial-gradient(ellipse 70% 38% at 50% 80%, #4a4a58 0%, #23232c 60%, #121218 100%); }
.garage-stage:not(.garage-ready)::before { /* the CD under the still picture, until garage.js draws the real one */
  content: ""; position: absolute; left: 50%; top: 74%; width: 78%; aspect-ratio: 5 / 1; translate: -50% -50%;
  background: url("/assets/img/delorean/cd.webp") center / 100% 100% no-repeat; image-rendering: auto; }
.garage-car { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; outline: none; opacity: 0; }
.garage-car:active { cursor: grabbing; }
.garage-car:focus-visible { outline: 1px dotted #fff; outline-offset: -6px; }
.garage-still { position: absolute; left: 50%; top: 55%; width: 70%; height: auto; translate: -50% -50%; }
.garage-ready .garage-car { opacity: 1; }
.garage-ready .garage-still { display: none; }
.garage-stage.honk .garage-car { animation: garage-honk .28s steps(3) 1; }
@keyframes garage-honk { 33% { translate: 0 -3px; } 66% { translate: 1px 1px; } }
.garage-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.garage-controls select { padding: 1px 2px; font: 12px/1.3 var(--f-ui); color: #000; background: #fff; border: 0; border-radius: 0; box-shadow: var(--bevel-in); }
.garage-save, .garage-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
/* full screen (the Full screen button, or the window's □): the whole window, the picture taking all the room above
   its lists */
.garage:fullscreen { display: flex; flex-direction: column; width: 100vw; height: 100vh; margin: 0; }
/* (no full screen for part of a page on iPhones: there the window fills the browser's screen, garage.js) */
.garage.garage-max { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; width: auto; height: 100dvh; margin: 0; }
html.garage-maxed, html.garage-maxed body { overflow: hidden; }
:is(.garage:fullscreen, .garage.garage-max) .garage-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
:is(.garage:fullscreen, .garage.garage-max) .garage-stage { flex: 1; aspect-ratio: auto; min-height: 0; }
/* a phone on its side: the stage gets the height, the status lines go */
@media (max-height: 500px) { :is(.garage:fullscreen, .garage.garage-max) .links-status { display: none; } }
.garage .titlebar-btns i:nth-child(2) { cursor: pointer; }
.garage .links-status { flex-wrap: wrap; } /* (a long credit goes under "Drag to spin" when they don't fit side by side) */
.garage .links-status span:first-child { flex: 1 0 auto; }
@media (prefers-reduced-motion: reduce) { .garage-stage.honk .garage-car { animation: none; } }

/* Options > Mouse > Pointer: tiles like the Car tab's (its look, above), each with its pointer; Dora's colors and
   directions under them */
.opts-ptrs { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); max-height: 250px; }
.opts-ptrs img { width: 48px; height: 40px; object-fit: contain; }
.opts-ptrs img[src*="/x-"], .opts-ptrs img[src*="li2-cd"], .opts-ptrs img[src*="thumb-standard"] { image-rendering: pixelated; }
.opts-dora img { width: 44px; height: 32px; object-fit: contain; image-rendering: auto; }
.opts-dora button { min-width: 56px; }

/* ---------- /links/: the link-in-bio page (build-pages quick_links; Ant). One narrow column, big buttons ---------- */
body.page-quick { padding-bottom: 28px; }
.ql { max-width: 480px; margin: 0 auto; padding: 22px 16px 0; display: grid; gap: 20px; }
.ql-head { text-align: center; }
.ql-head h1 { margin: 0; line-height: 0; }
.ql-head img { width: min(100%, 400px); height: auto; margin: 0 auto; filter: drop-shadow(3px 4px 0 rgba(0,0,0,.35)); }
.ql-head .tagline { margin-top: 8px; }
.ql-head .tagline span { font-size: clamp(17px, 4.6vw, 21px); }
.ql-win .window-body { padding: 14px; }
.ql-label { margin: 16px 0 8px; font: 900 13px/1.2 var(--f-body); text-transform: uppercase; letter-spacing: .06em; color: var(--navy); }
.ql-label:first-child { margin-top: 0; }
/* the buttons: find_us.lnk's web badges, full width and big enough to read and tap */
.ql-buttons { flex-direction: column; gap: 8px; }
.ql-buttons a { width: 100%; height: auto; min-height: 50px; }
.ql-buttons .b-ico { width: 50px; }
.ql-buttons .b-ico img { width: 30px; height: 30px; }
.ql-buttons .b-txt { padding: 6px 10px; font: 700 16px/1.15 var(--f-body); -webkit-font-smoothing: auto; font-smooth: auto; text-shadow: 1px 1px 0 rgba(0,0,0,.35); }
.ql-buttons .b-txt small { display: block; font-weight: 400; font-size: 12px; opacity: .9; }
/* the album's own buttons two to a row, so they don't read as the Listen list again */
.ql-two { display: grid; grid-template-columns: 1fr 1fr; }
.ql-two .b-ico { width: 40px; }
.ql-two .b-ico img { width: 24px; height: 24px; }
.ql-two .b-txt { font-size: 14px; padding: 6px; }
.b-site a { --c: var(--navy); }
.b-mail a { --c: var(--pink); }
.ql-buttons .b-site .b-txt, .ql-buttons .b-mail .b-txt { font-style: italic; }
/* next_show.txt: a date block and what/where/when, each a link to its row on the Shows page */
.ql-shows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ql-shows a { display: flex; gap: 12px; align-items: center; padding: 8px; text-decoration: none; color: var(--ink); background: #fff; border: 2px solid #000; box-shadow: 3px 3px 0 var(--navy); }
.ql-shows a:hover, .ql-shows a:focus-visible { background: #fff6c2; }
.ql-day { flex: none; width: 58px; display: grid; text-align: center; background: var(--pink); color: #fff; border: 2px solid #000; line-height: 1.05; padding: 4px 0; }
.ql-day b { font: 900 13px/1.1 var(--f-body); text-transform: uppercase; }
.ql-day i { font: normal 900 26px/1 var(--f-black); }
.ql-day small { font-size: 11px; text-transform: uppercase; }
.ql-show { display: grid; min-width: 0; line-height: 1.3; font-size: 14px; }
.ql-show b { font-size: 17px; color: var(--navy); }
.ql-who { color: var(--pink); font-weight: 700; font-style: italic; }
/* new_album.exe: the two covers side by side, then where to play it */
.ql-album { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ql-album img { width: 100%; height: auto; border: 2px solid #000; box-shadow: 3px 3px 0 var(--navy); }
.ql-album-name { margin: 10px 0 12px; text-align: center; font-size: 15px; line-height: 1.35; }
.ql-album-name b { display: block; color: var(--navy); font-size: 18px; }
.ql-foot { margin: 0; text-align: center; }
.ql-foot a { font: 700 14px/1 var(--f-body); color: #fff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }