/* The Grand Pricks v0: one page, PricksOS teaser.
   Look: a 2000s desktop skinned like iCarly. Win98/2000 bevels, glossy candy title bars,
   GIF-style blinking, system fonts of the era. Square corners on UI chrome
   (round things are objects: CDs, sparkles, speech bubbles). No Comic Sans, ever. */

/* Self-hosted OFL faces. Verdana/Tahoma/Trebuchet/Impact/Georgia come from the visitor's own
   computer (as they did in 2004); Anton stands in for Impact on phones. */
@font-face { font-family: "Fredoka"; src: url("/assets/fonts/fredoka.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Luckiest Guy"; src: url("/assets/fonts/luckiest-guy.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Anton"; src: url("/assets/fonts/anton.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Outfit"; src: url("/assets/fonts/outfit.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } /* Elias Unlimited's (.eu-brand) */
@font-face { font-family: "Permanent Marker"; src: url("/assets/fonts/permanent-marker.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url("/assets/fonts/silkscreen.woff2") format("woff2"); font-display: swap; }

/* the page column's widest (masthead, nav, windows); the wallpaper shows either side on wider screens */
:root {
  --page-max: 1100px;
  --navy: #12106b;
  --ink: #1d1236;
  --pink: #d82280;
  --hot: #ff3ea5;
  --orange: #ff8a1e;
  --yellow: #ffe14d;
  --lime: #a6f03a;
  --sky: #3fd0ff;
  --blue: #3d7dff;
  --red: #e0122f;
  --cream: #fffdf4;
  --silver: #d4d0c8;

  --f-body: Verdana, Geneva, "DejaVu Sans", sans-serif;
  --f-ui: Tahoma, Verdana, Geneva, "DejaVu Sans", sans-serif;
  --f-head: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", sans-serif;
  --f-round: "Fredoka", "Trebuchet MS", sans-serif;
  --f-bubbly: "Luckiest Guy", "Arial Black", Impact, sans-serif;
  --f-impact: Impact, "Anton", "Haettenschweiler", "Arial Narrow", sans-serif;
  --f-marker: "Permanent Marker", "Trebuchet MS", cursive;
  --f-pixel: "Silkscreen", "Courier New", monospace;
  --f-black: "Arial Black", "Arial Bold", Gadget, sans-serif;

  /* Windows 98/2000 bevels and a Photoshop-default drop shadow */
  --bevel-out: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #e8e8e8;
  --bevel-in: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #e8e8e8, inset 2px 2px #808080;
  --drop: 5px 6px 10px rgba(0, 0, 0, .55);
  --gloss: linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.2) 48%, rgba(255,255,255,0) 50%, rgba(0,0,0,.08) 100%);
  --taskbar-h: 44px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; min-height: 100vh; background: #3a1470; color: var(--ink);
  font: 400 15px/1.6 var(--f-body);
  padding-bottom: calc(var(--taskbar-h) + 28px);
  overflow-x: hidden; overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: #0033cc; font-weight: 700; }
a:visited { color: #6b1fa3; }
a:hover { color: var(--red); }
:focus-visible { outline: 2px dotted #000; outline-offset: 2px; }

/* ---------- background ---------- */
/* The desktop wallpaper: the pixel roses stretched over the screen unless the visitor picked another in Options
   (wallpaper.js sets the --wp-* variables; the Windows 98 teal shows around a centered one, or as "(None)") */
.wallpaper {
  position: fixed; inset: 0; z-index: -2;
  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));
}
/* Twinkling stars and sparkles, scattered by site.js */
.floaties { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.floatie { position: absolute; display: block; animation: twinkle var(--d, 2.4s) ease-in-out var(--delay, 0s) infinite; filter: drop-shadow(0 0 4px rgba(255,255,255,.8)); }
.floatie.star { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.floatie.spark { clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }

/* Mouse trails (site.js): the pixel ones on a canvas, and the smooth glitter one as little twirling stars */
.mouse-trail { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; image-rendering: pixelated; }
.glitter {
  position: fixed; z-index: 90; width: 14px; height: 14px; pointer-events: none; margin: -7px 0 0 -7px;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: glitter .75s ease-out forwards;
}
@keyframes glitter { to { transform: translate(var(--gx, 0), 26px) scale(0) rotate(160deg); opacity: 0; } }

.skip { position: absolute; left: -999px; top: 8px; z-index: 10; background: var(--yellow); color: #000; padding: 6px 12px; }
.skip:focus { left: 16px; }

/* ---------- band name: Bauhaus 93 in the rainbow logo's colors (tools/band-name-svg.py) ---------- */
.bn {
  display: inline-block; height: 1.2637em; aspect-ratio: 15385 / 2588; vertical-align: -.3306em;
  background: url("/assets/img/bandname-rainbow.svg") no-repeat 0 0 / 100% 100%;
  overflow: hidden; white-space: nowrap; line-height: 1;
}
.bn > span { color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; }

/* ---------- masthead ---------- */
.masthead { max-width: var(--page-max); margin: 0 auto; padding: 30px 16px 22px; text-align: center; position: relative; isolation: isolate; }
.sunburst {
  position: absolute; z-index: -1; left: 50%; top: 44%; width: min(1500px, 190vw); aspect-ratio: 1; translate: -50% -50%;
  background: repeating-conic-gradient(rgba(255, 225, 77, .6) 0 7deg, rgba(255, 62, 165, .2) 7deg 14deg);
  -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 72%); mask: radial-gradient(closest-side, #000 20%, transparent 72%);
  animation: spin 50s linear infinite;
}
.logo { margin: 0; }
.logo img {
  margin: 0 auto; width: min(980px, 100%); cursor: pointer; transform-origin: 50% 60%;
  filter: drop-shadow(6px 8px 0 var(--navy));
  animation: logo-in .9s cubic-bezier(.2, 1.6, .4, 1) both, bob 4.5s ease-in-out .9s infinite;
}
@keyframes logo-in { from { transform: scale(.2) rotate(-12deg); opacity: 0; } }
/* The animated logo (logo-fx.js): the logo sits in a stage that does the bobbing, with the effect's canvas over or
   behind it; the spinning swirl behind the logo is hidden while an effect runs */
.logo .fx-stage {
  position: relative; display: block; width: min(980px, 100%, calc(320px * var(--logo-aspect, 4))); margin: 0 auto; transform-origin: 50% 60%;
  animation: logo-in .9s cubic-bezier(.2, 1.6, .4, 1) both, bob 4.5s ease-in-out .9s infinite;
}
.logo .fx-stage img { display: block; width: 100%; position: relative; z-index: 1; animation: none; }
.fx-fire { position: absolute; z-index: 0; image-rendering: pixelated; pointer-events: none; } /* placed by logo-fx.js */
.fx-gl { position: absolute; z-index: 1; pointer-events: none; filter: drop-shadow(6px 8px 0 var(--navy)); }
.fx-stage.gl-ready img { visibility: hidden; }
.masthead.fx-on:not(.fx-swirl) .sunburst { display: none; } /* Options > Logo can keep the swirl */
html[data-logo-fx="on"] .masthead .sunburst { display: none; } /* gone from the first paint (wallpaper.js) */
/* a picked logo color: the page's pink logo stays hidden until logo-fx.js has swapped it (see wallpaper.js); if that
   script never runs, it shows anyway after a moment */
html[data-logo="recolor"] .logo .fx-stage:not([data-effect]) img:not([data-painted]) { visibility: hidden; animation: fx-reveal 0s 1.5s forwards; }
@keyframes fx-reveal { to { visibility: visible; } }
/* the other logos (Options > Logo, marked on <html> like the color): their shapes, so a tall one gets a narrower stage
   (about 320px tall on the home page) and the masthead is the right size before the logo is swapped in. Tommy's
   (Bauhaus, Humongo) draw their own hard shadow (logo-fx.js drops it, and its room, when the drop shadow is off), so they never get
   the CSS one; data-logo-shadow="off" drops it from the flame logo too. Not on /try-flames/ (data-effect) */
html[data-logo-style="drip-sweaty"] { --logo-aspect: 1473 / 732; }
html[data-logo-style="drip-sweaty-line"] { --logo-aspect: 3907 / 439; }
html[data-logo-style="drip-blue"] { --logo-aspect: 833 / 541; }
html[data-logo-style="bauhaus-stack"] { --logo-aspect: 4808 / 4256; }
html[data-logo-style="bauhaus-stack"][data-logo-shadow="off"] { --logo-aspect: 4670 / 4142; }
html[data-logo-style="bauhaus-arc"] { --logo-aspect: 2452 / 412; }
html[data-logo-style="bauhaus-arc"][data-logo-shadow="off"] { --logo-aspect: 2415 / 374; }
html[data-logo-style="humongo"] { --logo-aspect: 3152 / 1853; }
html[data-logo-style="humongo"][data-logo-shadow="off"] { --logo-aspect: 3095 / 1796; }
html[data-logo-style="humongo-pixel"] { --logo-aspect: 3144 / 1836; }
html[data-logo-style="humongo-pixel"][data-logo-shadow="off"] { --logo-aspect: 3084 / 1788; }
.fx-stage:not([data-effect]) img { aspect-ratio: var(--logo-aspect, auto); height: auto; }
html:is([data-logo-style^="bauhaus"], [data-logo-style^="humongo"]) .fx-stage:not([data-effect]) :is(img, .fx-gl),
html[data-logo-shadow="off"] .fx-stage:not([data-effect]) :is(img, .fx-gl) { filter: none; }
.masthead.fx-burning { padding-top: 64px; } /* room for the flames above the banner */
@keyframes bob { 0%, 100% { transform: rotate(-1.5deg) translateY(0); } 50% { transform: rotate(1.5deg) translateY(-7px) scale(1.02); } }

/* One calm line under the logo, lettered like the logo: white, navy outline, hard navy shadow */
.tagline { margin: 14px 0 0; display: flex; gap: 0 14px; justify-content: center; align-items: center; flex-wrap: wrap; }
.tagline span {
  font: 700 clamp(19px, 3vw, 28px)/1.2 var(--f-round); color: #fff; letter-spacing: .01em;
  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 5px 0 var(--navy);
}
.tagline span + span::before { content: "★"; color: var(--yellow); margin-right: 14px; }

.sparkles i {
  position: absolute; z-index: 2; width: 26px; aspect-ratio: 1; background: #fff;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: twinkle 1.8s ease-in-out infinite; filter: drop-shadow(0 0 6px #fff);
}
.sparkles i:nth-child(1) { left: 6%; top: 18%; }
.sparkles i:nth-child(2) { left: 18%; top: 72%; width: 18px; animation-delay: -.5s; background: var(--yellow); }
.sparkles i:nth-child(3) { right: 8%; top: 62%; width: 34px; animation-delay: -1s; }
.sparkles i:nth-child(4) { right: 22%; top: 8%; width: 16px; animation-delay: -1.4s; background: var(--sky); }
.sparkles i:nth-child(5) { left: 42%; top: 2%; width: 20px; animation-delay: -.8s; background: var(--hot); }
.sparkles i:nth-child(6) { left: 30%; bottom: 4%; width: 22px; animation-delay: -.3s; }
.sparkles i:nth-child(7) { right: 3%; top: 26%; width: 18px; animation-delay: -1.1s; background: var(--lime); }
@keyframes twinkle { 0%, 100% { transform: scale(.2) rotate(0deg); opacity: .25; } 50% { transform: scale(1.15) rotate(90deg); opacity: 1; } }

/* Old-school "NEW!" GIF tags: pixel font, blinking colors */
.new-tag {
  display: inline-block; font: 400 13px/1 var(--f-pixel); text-transform: uppercase; letter-spacing: .04em; text-decoration: none;
  color: var(--yellow); background: var(--red); border: 2px solid #000; padding: 4px 7px 5px; box-shadow: 2px 2px 0 #000;
  animation: new-blink .5s steps(1) infinite;
}
.new-tag:visited, .new-tag:hover { color: var(--yellow); }
@keyframes new-blink { 50% { color: var(--red); background: var(--yellow); } }
.new-tag-album { position: absolute; z-index: 3; right: max(8px, calc(50% - 540px)); top: 18px; rotate: 8deg; font-size: 14px; }
.sleeve .new-tag { position: absolute; z-index: 2; left: -10px; top: -10px; rotate: -10deg; font-size: 15px; }

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

/* ---------- windows (Win98/2000 frame, glossy candy title bar) ---------- */
.window, .dialog { background: var(--silver); padding: 3px; box-shadow: var(--bevel-out), var(--drop); position: relative; }
.titlebar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 26px; padding: 0 3px 0 8px;
  background: var(--gloss), linear-gradient(90deg, var(--hot), var(--orange) 60%, #ffc93a);
  font: 700 13px/1 var(--f-ui); color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,.55);
}
.titlebar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.titlebar-btns { display: flex; gap: 2px; flex: none; }
.titlebar-btns i {
  font: 700 11px/1 var(--f-ui); font-style: normal; color: #000; text-shadow: none;
  width: 18px; height: 16px; display: grid; place-items: center; background: var(--silver); box-shadow: var(--bevel-out);
}
.titlebar-btns i:last-child { margin-left: 2px; }
.window-body, .hero-copy { background: var(--cream); margin-top: 3px; padding: clamp(16px, 3vw, 30px); }
.window > picture img { margin-top: 3px; width: 100%; }

h2, h3 { font: 700 1.6rem/1.15 var(--f-head); color: var(--navy); margin: 0 0 10px; }
h2 { font-size: clamp(1.5rem, 3.6vw, 2.2rem); text-shadow: 1px 1px 0 #fff, 2px 2px 0 rgba(0,0,0,.15); }
h3 { font-size: 1.3rem; margin-top: 30px; }
p { margin: 0 0 12px; }
.eyebrow { margin: 0 0 4px; font: 700 11px/1.2 var(--f-body); color: var(--red); text-transform: uppercase; letter-spacing: .08em; animation: blink 1.2s steps(1) infinite; }
@keyframes blink { 50% { opacity: .15; } }
.scrawl { font-family: var(--f-marker); color: var(--pink); font-size: 1.35em; display: inline-block; animation: scrawl 2s ease-in-out infinite; }
@keyframes scrawl { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(-1deg) scale(1.05); } }

/* Rainbow letters that chase colors like an animated GIF (site.js splits [data-wave] text) */
[data-wave] .word { display: inline-block; white-space: nowrap; }
[data-wave] .w { display: inline-block; white-space: pre; }
.rainbow-letters .w {
  animation: chase 1.2s steps(1, end) infinite, jitter .5s steps(2) infinite;
  animation-delay: calc(var(--i) * -0.15s), calc(var(--i) * -0.1s);
  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 rgba(0,0,0,.45);
}
@keyframes chase {
  0% { color: #ff3792; } 16.6% { color: #ff812a; } 33.3% { color: #ffd60e; } 50% { color: #b4e52a; } 66.6% { color: #25b37b; } 83.3% { color: #3d6bff; } 100% { color: #ff3792; }
}
@keyframes jitter { 50% { transform: translateY(-3px) rotate(-3deg); } }

/* ---------- section headers: message-board category bar + description row ---------- */
.section-head { margin-bottom: 26px; box-shadow: var(--drop); border: 1px solid #000; max-width: calc(var(--page-max) - 32px); }
.section-head-body { display: flex; flex-direction: column; }
.section-head h2 {
  margin: 0; font: 700 18px/1 var(--f-body); color: #fff; padding: 10px 12px; letter-spacing: .02em; text-shadow: 1px 1px 0 rgba(0,0,0,.5);
  background: var(--gloss), linear-gradient(180deg, #6b85c4, #2b4683);
}
.section-head h2::before { content: "» The Grand Pricks » "; font-weight: 400; color: #cfe0ff; }
.section-head p { margin: 0; font: 13px/1.5 var(--f-body); background: #e1e4f2; padding: 8px 12px; border-top: 1px solid #000; }

/* ---------- hero ---------- */
.hero-copy h2 { font-size: clamp(1.35rem, 3.1vw, 2rem); }
.hero-copy p { font-size: 1.05rem; max-width: 64ch; }
.hero-copy .scrawl { font-size: clamp(1.7rem, 4.2vw, 2.4rem); margin-top: 4px; }

/* ---------- show flyer with marquee bulbs ---------- */
.flyer {
  position: relative; justify-self: center; width: min(720px, calc(100% - 28px)); margin: 18px 0;
  background: var(--yellow); border: 1px solid #000; box-shadow: var(--drop);
  padding: 32px clamp(20px, 5vw, 48px) 22px; text-align: center; rotate: -1.5deg;
  background-image: radial-gradient(rgba(0,0,0,.12) 1.5px, transparent 1.7px); background-size: 14px 14px;
}
.bulbs {
  position: absolute; inset: -26px; z-index: -1; border: 1px solid #000; background-color: var(--hot); box-shadow: var(--drop);
  --bulb: radial-gradient(circle, #fff 0 4px, #fff8a8 5px, transparent 7px);
  --dim: radial-gradient(circle, rgba(255,255,255,.35) 0 4px, transparent 5px);
  background-image: var(--bulb), var(--bulb), var(--bulb), var(--bulb), var(--dim), var(--dim), var(--dim), var(--dim);
  background-size: 28px 22px, 28px 22px, 22px 28px, 22px 28px, 28px 22px, 28px 22px, 22px 28px, 22px 28px;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y, repeat-x, repeat-x, repeat-y, repeat-y;
  background-position: 0 0, 0 100%, 0 0, 100% 0, 14px 0, 14px 100%, 0 14px, 100% 14px;
  animation: chase-bulbs .5s steps(1) infinite;
  padding: 25px;   /* frame only: knock out the middle so the flyer shows through */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
@keyframes chase-bulbs { 50% { background-position: 14px 0, 14px 100%, 0 14px, 100% 14px, 0 0, 0 100%, 0 0, 100% 0; } }
.flyer-kicker { font: 700 13px/1 var(--f-body); color: var(--red); margin: 0 0 8px; text-transform: uppercase; letter-spacing: .15em; animation: blink 1s steps(1) infinite; }
.flyer-title { font: 400 clamp(2.4rem, 8.5vw, 4.6rem)/1.05 var(--f-bubbly); text-transform: uppercase; margin-bottom: 12px; text-shadow: none; }
.flyer-when { font: 400 clamp(1.8rem, 5.5vw, 2.8rem)/1.1 var(--f-impact); color: #000; margin: 0 0 4px; letter-spacing: .02em; }
.flyer-where { font: 700 1.05rem/1.4 var(--f-body); color: #000; }
.flyer .scrawl { font-size: clamp(1.5rem, 4vw, 2rem); }
.flyer-who { font: 1rem/1.4 var(--f-body); color: #000; margin: 0 0 6px; }
.flyer-poster { display: block; width: min(240px, 70%); margin: 12px auto 14px; rotate: 2.5deg; border: 1px solid #000; box-shadow: var(--drop); }
.flyer-poster img { display: block; width: 100%; height: auto; }
.flyer-poster:hover, .flyer-poster:focus-visible { rotate: 0deg; }
.flyer-last { margin: 14px 0 0; padding-top: 12px; border-top: 2px dashed rgba(0,0,0,.35); font-size: 13px; }

/* ---------- music: covers with CDs sliding out ---------- */
.halves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(26px, 5vw, 56px); margin: 28px 0 22px; max-width: 800px; }
.half { margin: 0; display: grid; gap: 12px; align-content: start; }
.sleeve { position: relative; margin-right: 14%; }
.sleeve > img { position: relative; z-index: 1; border: 1px solid #000; box-shadow: 4px 5px 8px rgba(0,0,0,.5); transition: transform .25s; }
.cd {
  position: absolute; z-index: 0; inset: 4%; border-radius: 50%; border: 1px solid #555; box-shadow: 2px 3px 6px rgba(0,0,0,.45);
  background:
    radial-gradient(circle, transparent 0 9%, #888 9% 10.5%, #e9eef8 10.5% 17%, transparent 17%),
    conic-gradient(from 20deg, #ff8fd0, #ffe68a, #9dffc6, #8fd8ff, #c9a2ff, #ff8fd0, #ffe68a, #9dffc6, #8fd8ff, #c9a2ff, #ff8fd0);
  translate: 24% 0; animation: spin 2.4s linear infinite; transition: translate .35s;
}
.half:hover .cd, .half:focus-within .cd { translate: 42% 0; }
.half:hover .sleeve > img { transform: rotate(-3deg); }
.half figcaption { font: 700 1.1rem/1.3 var(--f-head); color: var(--navy); display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.half figcaption .scrawl { font-size: 1.3rem; }
.bc-slot iframe { width: 100%; border: 1px solid #000; background: #fff; display: block; box-shadow: var(--drop); }
.listen { margin: 6px 0 0; font-weight: 700; }

.shelf { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 18px; }
.shelf a { display: grid; gap: 6px; color: var(--ink); font-weight: 400; text-decoration: none; font-size: 12px; line-height: 1.3; }
.shelf b { color: #0033cc; font-size: 13px; display: block; text-decoration: underline; }
.shelf img { border: 1px solid #000; box-shadow: 3px 4px 6px rgba(0,0,0,.4); }
.shelf a:hover img, .shelf a:focus-visible img { transform: rotate(-5deg) scale(1.08); }
.more { margin-top: 16px; }

/* ---------- buttons ---------- */
.candy {
  --c: var(--hot);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 14px/1 var(--f-ui); color: #000; text-shadow: 0 1px 0 rgba(255,255,255,.6); text-decoration: none;
  background: var(--gloss), var(--c); border: 1px solid rgba(0,0,0,.6); padding: 10px 18px;
  box-shadow: 0 2px 4px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.7); cursor: pointer;
}
.candy:visited, .candy:hover { color: #000; }
.candy:hover { filter: brightness(1.1) saturate(1.15); }
.candy:active { box-shadow: inset 0 2px 4px rgba(0,0,0,.5); transform: translateY(1px); }
.candy.small { font-size: 13px; padding: 8px 14px; }
.candy.play { --c: var(--lime); justify-self: start; animation: pulse 1.4s steps(2) infinite; }
@keyframes pulse { 50% { scale: 1.06; } }

/* Win98 gray buttons */
.btn98 {
  display: inline-block; min-width: 80px; padding: 6px 14px; text-align: center; text-decoration: none; cursor: pointer;
  font: 400 12px/1.2 var(--f-ui); color: #000; background: var(--silver); border: 0; box-shadow: var(--bevel-out), 0 0 0 1px #000;
}
.btn98:visited, .btn98:hover { color: #000; }
.btn98:active { box-shadow: var(--bevel-in), 0 0 0 1px #000; }

/* ---------- Pricks Media Player (Win98 media player) ---------- */
.mp {
  margin-top: 3px; padding: 10px; display: grid; gap: 10px 12px;
  grid-template-columns: 222px minmax(0, 1fr); grid-template-areas: "screen deck" "list list";
  font: 12px/1.4 var(--f-ui);
}
.mp-screen { grid-area: screen; display: grid; gap: 8px; align-content: start; }
.mp-art, .mp-vis { width: 100%; display: block; background: #000; box-shadow: var(--bevel-in); padding: 2px; }
.mp-art { aspect-ratio: 1; object-fit: cover; }
.mp-vis { height: 66px; image-rendering: pixelated; }
.mp-deck { grid-area: deck; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: start; } /* a long song title must not widen it */
.mp-lcd { background: #050a05; box-shadow: var(--bevel-in); padding: 12px 14px; color: #7dff6a; font: 13px/1.5 var(--f-pixel); text-shadow: 0 0 6px rgba(125,255,106,.6); }
.mp-lcd p { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mp-title { font-size: 15px; }
.mp-release { color: #b8ffae; }
.mp-release .bn { font-size: 15px; }
.mp-time { color: #ffe14d; font-variant-numeric: tabular-nums; }
.mp-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mp-btn { min-width: 0; width: 40px; height: 30px; padding: 0; display: grid; place-items: center; }
.mp-btn svg { width: 14px; height: 14px; fill: #000; }
.mp-play { width: 52px; }
.mp-play svg + svg, .player.is-playing .mp-play svg:first-child { display: none; }
.player.is-playing .mp-play svg + svg { display: block; }
.mp-toggle { min-width: 0; height: 30px; padding: 0 10px; }
.mp-toggle[aria-pressed="true"] { box-shadow: var(--bevel-in), 0 0 0 1px #000; background: #e8e8e8; font-weight: 700; }
.mp-vol { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.mp-vol input { width: 100px; }

/* Win98 trackbar sliders */
.mp input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; height: 24px; cursor: pointer; }
.mp input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: #fff; box-shadow: var(--bevel-in); }
.mp input[type="range"]::-moz-range-track { height: 4px; background: #fff; box-shadow: var(--bevel-in); }
.mp input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 22px; margin-top: -9px; background: var(--silver); box-shadow: var(--bevel-out); border: 0; }
.mp input[type="range"]::-moz-range-thumb { width: 11px; height: 22px; background: var(--silver); box-shadow: var(--bevel-out); border: 0; border-radius: 0; }
.mp input[type="range"]:disabled { opacity: .5; cursor: default; }
.mp-seek { width: 100%; }

/* Playlist list box */
.mp-list { grid-area: list; max-height: 380px; overflow: auto; background: #fff; box-shadow: var(--bevel-in); padding: 4px 2px 8px; }
.pl-group {
  position: sticky; top: -4px; z-index: 1; margin: 6px 0 0; padding: 4px 8px; font: 700 12px/1.2 var(--f-ui); color: #fff;
  background: linear-gradient(90deg, #000080, #1084d0); text-shadow: none;
}
.pl-group:first-child { margin-top: 0; }
.pl-release { margin: 8px 0 4px; }
.pl-head { display: flex; align-items: center; gap: 8px; margin: 0 6px 4px; font: 12px/1.3 var(--f-ui); color: #000; text-shadow: none; }
.pl-head img { width: 40px; height: 40px; border: 1px solid #000; flex: none; }
.pl-head b { font-size: 13px; }
.pl-head small { display: block; color: #555; }
.pl-head a { font-weight: 400; }
.pl-tracks { list-style: none; margin: 0; padding: 0; counter-reset: t; }
.pl-tracks li { counter-increment: t; }
.pl-track {
  display: flex; width: 100%; gap: 8px; align-items: baseline; padding: 3px 8px 3px 10px; text-align: left;
  font: 12px/1.35 var(--f-ui); color: #000; background: none; border: 0; cursor: pointer;
}
.pl-track::before { content: counter(t) "."; color: #666; min-width: 1.6em; text-align: right; }
.pl-track .pl-t { flex: 1; }
.pl-track .pl-d { color: #555; font-variant-numeric: tabular-nums; }
button.pl-track:hover { background: #dfe8ff; }
.pl-track.is-current, button.pl-track.is-current:hover { background: #000080; color: #fff; }
.pl-track.is-current::before, .pl-track.is-current .pl-d { color: #cfe0ff; }
.pl-track.is-missing { color: #999; cursor: default; }
/* ⬇ download link at the end of every row (build-catalog.py) */
.pl-tracks li { display: flex; align-items: stretch; }
.pl-tracks .pl-track { flex: 1; min-width: 0; }
.pl-dl { flex: none; width: 28px; display: grid; place-items: center; color: #555; text-decoration: none; }
.pl-dl::before {
  content: ""; width: 12px; height: 12px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M5 0h2v6h2.5L6 9.5 2.5 6H5zM0 10h12v2H0z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M5 0h2v6h2.5L6 9.5 2.5 6H5zM0 10h12v2H0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pl-dl span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pl-dl:visited { color: #555; }
.pl-dl:hover, .pl-dl:focus-visible { color: #fff; background: #000080; }
.pl-tracks li:has(.is-current) { background: #000080; }
.pl-tracks li:has(.is-current) .pl-dl { color: #cfe0ff; }
a.is-busy { cursor: progress; opacity: .6; }
/* Bandcamp exclusives: greyed out and skipped until someone hits "Bypass restrictions" (player.js) */
.pl-excl {
  display: inline-block; margin-left: 6px; padding: 1px 4px; vertical-align: 1px;
  font: 700 9px/1.2 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: #1da0c3;
}
.pl-locked .pl-track { color: #8a8a8a; }
.pl-locked .pl-track.is-current { color: #d6d6d6; }
.pl-locked .pl-excl { background: #8a8a8a; }
.pl-locked .pl-excl::before { content: "\1F512\FE0E  "; }
.pl-locked .pl-dl { display: none; }
.pl-bypass {
  flex: none; align-self: center; margin: 0 4px; padding: 4px 8px; white-space: nowrap; cursor: pointer;
  font: 700 10px/1 var(--f-ui); color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,.4);
  background: #b00018; border: 0; box-shadow: inset -1px -1px #5a000c, inset 1px 1px #ff6b80, 0 0 0 1px #000;
  animation: blink 1.4s steps(1) infinite;
}
.pl-bypass:hover { background: #d4001f; animation: none; }
.pl-bypass.is-hacking {
  animation: hack .4s linear infinite; color: #b6ff9a; text-shadow: 0 0 4px #0f0; cursor: progress;
  background: repeating-linear-gradient(-45deg, #0a5a0a 0 6px, #032803 6px 12px) 0 0 / 17px 17px;
}
@keyframes hack { to { background-position: 17px 0; } }
/* BYPASS.EXE: the fake hack in an MS-DOS Prompt window (player.js) */
.hackwin {
  position: fixed; z-index: 95; left: 50%; top: 50%; translate: -50% -50%; width: min(600px, calc(100vw - 20px));
  background: var(--silver); padding: 3px; box-shadow: var(--bevel-out), 8px 10px 22px rgba(0,0,0,.65); animation: hackwin-in .18s steps(3);
}
@keyframes hackwin-in { from { transform: scale(.4); opacity: 0; } }
.hackwin-bar {
  display: flex; justify-content: space-between; align-items: center; height: 22px; padding: 0 3px 0 6px;
  background: linear-gradient(90deg, #000080, #1084d0); color: #fff; font: 700 12px/1 var(--f-ui);
}
.hackwin-bar i { width: 16px; height: 14px; display: grid; place-items: center; font: 700 11px/1 var(--f-ui); font-style: normal; color: #000; background: var(--silver); box-shadow: var(--bevel-out); }
.hackwin-screen {
  margin: 3px 0 0; height: 300px; overflow: hidden; padding: 10px 12px; white-space: pre-wrap; word-break: break-all;
  font: 13px/1.4 "Courier New", Courier, monospace; color: #3f3; text-shadow: 0 0 5px rgba(51,255,51,.75);
  background: repeating-linear-gradient(rgba(255,255,255,.05) 0 1px, transparent 1px 3px), #000; box-shadow: var(--bevel-in);
}
.hackwin-screen::after { content: "█"; animation: blink 1s steps(1) infinite; }
.hackwin-screen .dim { color: #1c9a1c; text-shadow: none; }
.hackwin-screen .warn { color: #ffe14d; text-shadow: 0 0 5px rgba(255,225,77,.6); }
.hackwin-screen .granted { display: inline-block; margin-top: 6px; padding: 4px 12px; font-size: 20px; font-weight: 700; color: #000; background: #3f3; text-shadow: none; animation: blink .5s steps(1) infinite; }
.just-unlocked .pl-track { animation: granted 1.4s steps(1); }
@keyframes granted { 0%, 50% { background: #0a8a2a; color: #fff; } 25%, 75% { background: #000; color: #b6ff9a; } }
.pl-track.is-broken .pl-t { text-decoration: line-through; color: #b00018; }

/* Status bar */
.mp-status { display: flex; gap: 3px; margin: 3px 0 0; font: 11px/1 var(--f-ui); }
.mp-status span { padding: 5px 8px; box-shadow: inset -1px -1px #fff, inset 1px 1px #808080; }
.mp-state { flex: 1; }
.mp-count:empty { display: none; }

/* Mini player in the taskbar tray, next to the clock (player.js) */
.task-player {
  display: flex; align-items: center; gap: 3px; height: 100%; padding: 0 6px 0 10px;
  background: linear-gradient(180deg, #19b9f3, #0f8ee6 50%, #0d7ad4); border-left: 1px solid #0b5bb0; box-shadow: inset 1px 0 0 #3fd0ff;
}
.task-player[hidden] { display: none; }
.task-player:not([hidden]) + .clock { border-left: 0; box-shadow: none; padding-left: 6px; }
.tp-title {
  display: flex; align-items: center; gap: 6px; max-width: 210px; height: 100%; padding: 0 8px 0 0; cursor: pointer;
  font: 12px/1 var(--f-ui); color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,.4); background: none; border: 0;
}
.tp-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tp-cd { position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%; }
.tp-cd { animation: spin 1.2s linear infinite paused; } /* stays where it stopped when paused */
.task-player.is-playing .tp-cd { animation-play-state: running; }
.tp-btn {
  width: 28px; height: 26px; padding: 0; display: grid; place-items: center; cursor: pointer;
  background: linear-gradient(180deg, #5cd0ff, #1b8fe0); border: 1px solid #0a4f9c; box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.tp-btn svg { width: 11px; height: 11px; fill: #fff; filter: drop-shadow(1px 1px 0 rgba(0,0,0,.4)); }
.tp-btn:hover { background: linear-gradient(180deg, #8ae0ff, #2ba2f2); }
.tp-btn:active { box-shadow: inset 0 2px 3px rgba(0,0,0,.45); }
.tp-play { width: 32px; }
.tp-play svg + svg, .task-player.is-playing .tp-play svg:first-child { display: none; }
.task-player.is-playing .tp-play svg + svg { display: block; }

/* Now Playing panel that rises out of the taskbar (player.js) */
.task-player { position: relative; }
.tp-pop {
  position: absolute; right: 0; bottom: calc(100% + 1px); width: 280px; z-index: 40;
  background: var(--silver); padding: 3px; box-shadow: var(--bevel-out), 4px -2px 14px rgba(0,0,0,.45);
  transform-origin: 85% 100%; transform: translateY(12px) scaleY(.2); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .18s steps(4), opacity .1s, visibility 0s .18s;
}
.task-player.pop-open .tp-pop { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition: transform .18s steps(4), opacity .1s; }
.tp-pop .titlebar { height: 22px; font-size: 12px; }
.tp-pop-body { padding: 10px 10px 8px; color: #000; font: 12px/1.3 var(--f-ui); }
.tp-now { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; align-items: center; }
.tp-disc { position: relative; display: block; width: 74px; height: 74px; border-radius: 50%; }
.tp-disc { animation: spin 1.2s linear infinite paused; }
.task-player.is-playing .tp-disc { animation-play-state: running; }
.tp-meta { margin: 0; min-width: 0; display: grid; gap: 2px; }
.tp-song { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-rel { color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-time { font: 11px/1 var(--f-pixel); color: #000080; margin-top: 4px; font-variant-numeric: tabular-nums; }
.tp-pop input[type="range"] { width: 100%; margin: 8px 0 2px; accent-color: #000080; }
.tp-ctl { display: flex; gap: 4px; margin: 6px 0 0; }
.tp-b { min-width: 0; flex: 1; height: 26px; padding: 0; display: grid; place-items: center; }
.tp-b svg { width: 12px; height: 12px; fill: #000; }
.tp-b[aria-pressed="true"] { box-shadow: var(--bevel-in), 0 0 0 1px #000; background: #e8e8e8; }
.tp-b[aria-pressed="true"] svg { fill: #c4006a; }
.tp-b-play svg + svg, .task-player.is-playing .tp-b-play svg:first-child { display: none; }
.task-player.is-playing .tp-b-play svg + svg { display: block; }
.tp-vol { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.tp-vol input { flex: 1; margin: 0 !important; }
.tp-links { display: flex; justify-content: space-between; gap: 10px; margin: 8px 0 0; padding-top: 7px; border-top: 1px solid #a0a0a0; box-shadow: 0 -1px 0 #fff inset; }
.tp-links [hidden] { display: none; }

/* ---------- the band ---------- */
.members { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.member {
  --c1: var(--red); --c2: #ff8a8a;
  position: relative; background: var(--silver); padding: 3px; box-shadow: var(--bevel-out), var(--drop);
  display: flex; flex-direction: column; outline: none; rotate: var(--tilt, 0deg); transition: rotate .15s;
}
.member:nth-child(1) { --c1: var(--red); --c2: #ff8a8a; --tilt: -1.6deg; }
.member:nth-child(2) { --c1: var(--hot); --c2: #ff9fd2; --tilt: 1.4deg; }
.member:nth-child(3) { --c1: #18b46a; --c2: var(--lime); --tilt: -1deg; }
.member:nth-child(4) { --c1: var(--blue); --c2: var(--sky); --tilt: 1.8deg; }
/* whoever is talking comes to the front, so their bubble sits over every other box (under the taskbar). Hover counts
   unless .hush is on the list: site.js sets it after jumping to a card from the intro, until the mouse really moves,
   so the card that happened to scroll under the pointer doesn't start talking too */
.members:not(.hush) .member:hover, .member:focus-visible, .member.talking { rotate: 0deg; z-index: 25; }
.member .titlebar { background: var(--gloss), linear-gradient(90deg, var(--c1), color-mix(in srgb, var(--c1) 60%, #fff)); }
.member-stage {
  position: relative; margin-top: 3px; height: clamp(240px, 25vw, 300px); overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center; background: var(--c2); box-shadow: var(--bevel-in);
}
.member-stage::before { /* starburst */
  content: ""; position: absolute; left: 50%; top: 58%; width: 260%; aspect-ratio: 1; translate: -50% -50%;
  background: repeating-conic-gradient(var(--c1) 0 9deg, var(--c2) 9deg 18deg);
  animation: spin 24s linear infinite;
}
.member:nth-child(even) .member-stage::before { animation-direction: reverse; }
.members:not(.hush) .member:hover .member-stage::before, .member:focus-visible .member-stage::before, .member.talking .member-stage::before { animation-duration: 4s; }
.member-stage::after { /* halftone */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(rgba(0,0,0,.18) 1.3px, transparent 1.6px) 0 0 / 9px 9px;
}
.member-stage img {
  position: relative; z-index: 1; height: 94%; width: auto; max-width: 96%; object-fit: contain; object-position: 50% 100%;
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(4px 5px 4px rgba(0,0,0,.5));
  transform-origin: 50% 100%; animation: idle 2.6s ease-in-out infinite; animation-delay: var(--idle, 0s);
}
/* contact.txt: the E-Mail button GIF, then ": " and the address, always on one line: the address shrinks to fit a
   narrow window (the home page's sidebar) and is full size anywhere wider */
.email-line { display: block; margin-top: 6px; white-space: nowrap; container-type: inline-size; }
.email-line > a:last-child { font-size: min(1em, 5.1cqi); }
.email-btn { display: inline-block; vertical-align: middle; }
.member-stage.swap-fill img { /* a picture that takes over the whole window (Rose's Avril Lavigne GIF) */
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 20%;
  filter: none; animation: none !important;
}
.member:nth-child(2) .member-stage img { --idle: -.7s; }
.member:nth-child(3) .member-stage img { --idle: -1.4s; }
.member:nth-child(4) .member-stage img { --idle: -2s; }
.members:not(.hush) .member:hover .member-stage img, .member:focus-visible .member-stage img, .member.talking .member-stage img { animation: wiggle .3s steps(2) infinite; }
@keyframes idle { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-6px) rotate(1.5deg); } }
@keyframes wiggle { 0% { transform: rotate(-4deg) scale(1.04); } 100% { transform: rotate(4deg) scale(1.04); } }
@keyframes spin { to { rotate: 360deg; } }
.member-plate { background: var(--cream); margin-top: 3px; padding: 10px 12px 12px; }
/* the Band page's Management row (tools/build-pages.py manager()): Jon's card, then management.txt across the rest */
.manager { margin-top: 56px; }
#member-jon { --c1: var(--orange); --c2: var(--yellow); --tilt: -1.2deg; }
.manager-about { grid-column: span 3; align-self: start; }
.manager-about .window-body { font: 15px/1.6 var(--f-body); color: var(--ink); }
.manager-about .window-body p { margin: 0 0 12px; }
.manager-about .manager-mail { margin: 0; font-weight: 700; }
/* Elias Unlimited as its brand has it, wherever it's written (Ant): the knot from its logo, ELIAS in black, UNLIMITED in
   its blue, both in the logo's typeface */
.eu-brand { font-family: "Outfit", var(--f-body); white-space: nowrap; text-decoration: none; }
.eu-brand img { display: inline; width: auto; height: 1.2em; vertical-align: -.24em; margin-right: .3em; }
.eu-brand b { font-weight: 800; color: #000; letter-spacing: .05em; }
.eu-brand span { font-weight: 600; letter-spacing: .16em; margin-right: -.16em; color: #0a7cff;
  background: linear-gradient(90deg, #06f, #00d4ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.eu-brand:hover b, .eu-brand:focus-visible b { text-decoration: underline; text-decoration-color: #06f; }
.member-plate h3 { margin: 0; font: 700 clamp(1.15rem, 2vw, 1.45rem)/1.15 var(--f-round); text-transform: uppercase; color: var(--navy); text-shadow: none; }
.member-plate h3 a, .member-plate h3 a:visited { color: inherit; text-decoration: underline; text-decoration-color: var(--c1); text-decoration-thickness: 4px; text-underline-offset: 4px; }
.member-plate h3 a:hover { color: var(--c1); }
.member-plate p { margin: 4px 0 0; font: 11px/1.3 var(--f-body); color: #333; text-transform: uppercase; letter-spacing: .06em; }
/* the other bands they're in (a site, or the band's Instagram if it has none) */
.member-plate p.member-bands { margin-top: 6px; font-size: 12px; line-height: 1.4; text-transform: none; letter-spacing: 0; }
.member-bands a, .member-bands a:visited { color: var(--navy); font-weight: 700; text-decoration-color: var(--c1); text-underline-offset: 2px; }
.member-bands a:hover { color: var(--c1); }

/* Comic speech bubbles that pop out above each member */
.says {
  position: absolute; z-index: 6; left: var(--bx, 10%); bottom: var(--bb, calc(100% - 22px)); width: max-content; max-width: min(240px, 104%);
  margin: 0; padding: 12px 18px; text-align: center; color: #000; background: #fff; border: 3px solid #000; border-radius: 50%;
  font: 400 16px/1.25 var(--f-marker); filter: drop-shadow(3px 4px 3px rgba(0,0,0,.45));
  transform: translateY(30px) scale(0); transform-origin: var(--tbase, 30%) 130%; opacity: 0; pointer-events: none;
  transition: transform .28s cubic-bezier(.2, 1.7, .4, 1), opacity .1s;
}
/* The tail: a triangle from the bubble's bottom edge (--tbase) to a tip (--tx, --ty below the bubble), which
   site.js aims at the member's mouth (data-mouth on the cutout). Black outline, white fill over the border. */
.says::before, .says::after { content: ""; position: absolute; left: 0; width: 100%; top: calc(100% - 3px); pointer-events: none; }
.says::before {
  height: calc(var(--ty, 22px) + 6px); background: #000;
  clip-path: polygon(calc(var(--tbase, 30%) - 12px) 0, calc(var(--tbase, 30%) + 12px) 0, var(--tx, 30%) 100%);
}
.says::after {
  height: calc(var(--ty, 22px) + 1px); background: #fff;
  clip-path: polygon(calc(var(--tbase, 30%) - 7.5px) 0, calc(var(--tbase, 30%) + 7.5px) 0, var(--txi, 30%) 100%);
}
/* With JS, site.js draws bubble + tail as a single SVG outline instead (no seam where they meet) */
.says.has-shape { background: transparent; border-color: transparent; }
.says.has-shape::before, .says.has-shape::after { display: none; }
.says-shape { position: absolute; left: -3px; top: -3px; z-index: -1; overflow: visible; pointer-events: none; }
.says-shape path { fill: #fff; stroke: #000; stroke-width: 3; stroke-linejoin: round; }
.says em { font-style: italic; display: inline-block; transform: skewX(-12deg); }
.members:not(.hush) .member:hover .says, .member:focus-visible .says, .member.talking .says { opacity: 1; transform: none; }

/* ---------- scrapbook ---------- */
.polaroids { list-style: none; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 26px; align-items: start; }
.polaroids li {
  background: #fff; padding: 12px 12px 6px; box-shadow: 4px 6px 10px rgba(0,0,0,.55);
  position: relative; animation: sway 4s ease-in-out infinite; animation-delay: var(--sd, 0s);
}
.polaroids li::before { /* tape */
  content: ""; position: absolute; top: -13px; left: 50%; width: 90px; height: 26px; transform: translateX(-50%) rotate(-4deg);
  background: var(--tape, rgba(255, 225, 77, .75)); box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.polaroids li:nth-child(2) { --sd: -1s; --tape: rgba(255, 62, 165, .55); }
.polaroids li:nth-child(3) { --sd: -2s; --tape: rgba(63, 208, 255, .6); }
.polaroids li:nth-child(4) { --sd: -.5s; --tape: rgba(166, 240, 58, .7); }
.polaroids li:nth-child(5) { --sd: -2.6s; }
.polaroids li:nth-child(6) { --sd: -1.6s; --tape: rgba(255, 62, 165, .55); }
.polaroids li.has-arrow { z-index: 2; }
.polaroids li:hover { scale: 1.06; z-index: 3; animation-play-state: paused; }
@keyframes sway { 0%, 100% { rotate: -2.5deg; } 50% { rotate: 2deg; } }
.polaroids img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.polaroids span { display: block; font: 400 1.3rem/1.6 var(--f-marker); color: #111; }
.polaroids .arrow-note {
  position: absolute; z-index: 3; right: 8px; bottom: -34px; white-space: nowrap; font: 400 1.4rem/1 var(--f-marker); color: var(--hot);
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 2px 3px 3px rgba(0,0,0,.5); transform: rotate(8deg);
  animation: nudge .5s steps(2) infinite;
}
.polaroids .arrow-note::before { content: "↖ "; }
@keyframes nudge { 50% { transform: rotate(4deg) translate(-6px, 6px); } }

/* ---------- logo buttons (find us + now playing) ---------- */
.logo-grid { list-style: none; padding: 0; margin: 18px 0 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 14px; }
.logo-grid li { display: grid; animation: hop 3.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .12s); }
.logo-grid a {
  display: grid; align-content: start; justify-items: center; gap: 8px; padding: 14px 6px 10px; text-decoration: none;
  background: var(--silver); box-shadow: var(--bevel-out), 2px 3px 5px rgba(0,0,0,.4);
  font: 11px/1.15 var(--f-ui); color: #000; text-align: center;
}
.logo-grid a:visited { color: #000; }
.logo-grid a:hover, .logo-grid a:focus-visible { background: #fff; color: #000; }
.logo-grid a:hover img { animation: spin-once .5s steps(8); }
.logo-grid a:active { box-shadow: var(--bevel-in); }
.logo-grid img { width: 52px; height: 52px; }
.logo-grid-listen { grid-template-columns: repeat(auto-fill, minmax(96px, 120px)); margin: 10px 0 8px; }
@keyframes hop { 0%, 12%, 100% { translate: 0 0; } 5% { translate: 0 -10px; } }
@keyframes spin-once { from { rotate: 0deg; } to { rotate: 360deg; } }
.contact { font-size: 15px; }

/* ---------- Australia error dialog (Win98 error box) ---------- */
.dialog { justify-self: center; width: min(760px, 100%); animation: shake 7s ease-in-out infinite; }
@keyframes shake { 0%, 8%, 100% { translate: 0 0; } 1.5% { translate: -10px 0; } 3% { translate: 9px 0; } 4.5% { translate: -6px 0; } 6% { translate: 4px 0; } }
.dialog .titlebar { background: var(--gloss), linear-gradient(90deg, #b00018, #ff4d6d); }
.dialog-body { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; padding: 20px clamp(14px, 3vw, 24px) 16px; font: 13px/1.5 var(--f-ui); }
.aus-icon { width: 150px; }
.aus-icon svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(2px 3px 3px rgba(0,0,0,.4)); }
.aus-icon circle, .aus-icon line { animation: no-pulse 1.2s steps(2) infinite; transform-origin: 100px 91px; }
@keyframes no-pulse { 50% { transform: scale(1.08); } }
.error-head { margin: 0 0 10px; font: 900 clamp(1.2rem, 3vw, 1.6rem)/1.15 var(--f-black); color: var(--red); text-transform: uppercase; }
.error-head small { display: block; font: 700 12px/1.2 var(--f-ui); color: #000; margin-bottom: 6px; animation: blink 1s steps(1) infinite; }
.dialog-btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; position: relative; }
.dialog .ok { position: relative; transition: transform .25s cubic-bezier(.3,1.6,.6,1); }

/* ---------- sponsored links at the bottom, like a forum footer (parody ads, real band links) ---------- */
.bottom-zone {
  position: relative; margin-inline: calc(50% - 50vw); margin-top: 10px; padding: 12px 16px 26px;
  display: grid; grid-template-columns: auto auto; grid-template-areas: "label label" "leader leader" "row popup";
  justify-content: center; align-items: start; gap: 12px 18px; text-align: center;
  background: #f4f4f4; border-block: 1px solid #a0a0a0; box-shadow: inset 0 1px 0 #fff; font: 12px/1.4 var(--f-body);
}
.fine-label { grid-area: label; margin: 0; font: 10px/1 var(--f-body); color: #777; text-transform: uppercase; letter-spacing: .12em; }
.ad { display: grid; text-decoration: none; color: #000; border: 1px solid #000; box-shadow: 1px 1px 0 #999; text-align: left; }
.ad:visited, .ad:hover { color: #000; }
.ad-btn {
  justify-self: center; align-self: center; font: 700 13px/1 var(--f-ui); text-transform: uppercase; color: #000; white-space: nowrap;
  background: var(--gloss), var(--lime); border: 1px solid #000; padding: 8px 12px; box-shadow: 0 1px 2px rgba(0,0,0,.5);
  animation: blink .8s steps(1) infinite;
}
.ad-row { grid-area: row; display: grid; gap: 12px; max-width: 100%; }

/* 728x90 leaderboard: a slideshow GIF of single covers, flashing headline, button */
.ad-leader {
  grid-area: leader; justify-self: center; width: min(728px, 100%); min-height: 90px; grid-template-columns: 70px 1fr auto; grid-template-areas: "thumbs flash btn" "thumbs sub btn";
  align-items: center; gap: 2px 14px; padding: 9px 14px;
  background: repeating-linear-gradient(45deg, #ffe2f3 0 12px, #fff 12px 24px);
}
.ad-leader .ad-btn { grid-area: btn; font-size: 15px; padding: 12px 14px; }
.ad-flash { grid-area: flash; font: 400 clamp(1.3rem, 3.6vw, 1.9rem)/1 var(--f-impact); text-transform: uppercase; letter-spacing: .02em; animation: ad-flash .7s steps(1) infinite; }
@keyframes ad-flash { 0% { color: var(--red); } 33% { color: var(--blue); } 66% { color: #ff00cc; } }
.ad-thumbs { grid-area: thumbs; position: relative; width: 70px; height: 70px; border: 1px solid #000; background: #000; }
.ad-thumbs img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; animation: slide 7s steps(1, end) infinite; animation-delay: calc(var(--i, 0) * 1s); }
.ad-thumbs img:first-child { opacity: 1; }
.ad-thumbs img:nth-child(2) { --i: 1; } .ad-thumbs img:nth-child(3) { --i: 2; } .ad-thumbs img:nth-child(4) { --i: 3; }
.ad-thumbs img:nth-child(5) { --i: 4; } .ad-thumbs img:nth-child(6) { --i: 5; } .ad-thumbs img:nth-child(7) { --i: 6; }
@keyframes slide { 0% { opacity: 1; } 14.28% { opacity: 0; } 100% { opacity: 0; } }
.ad-sub { grid-area: sub; font: italic 12px/1.3 var(--f-body); }

/* 468x60 banners */
.ad-banner { width: min(468px, 100%); min-height: 60px; grid-template-columns: 1fr auto; grid-template-areas: "top btn" "line btn"; align-items: center; gap: 2px 12px; padding: 8px 12px; }
.ad-banner .ad-btn { grid-area: btn; }
.ad-line { grid-area: line; font: 12px/1.3 var(--f-body); }
.ad-winner { background: linear-gradient(180deg, #2a5bd7, #0b2a8f); color: #fff; }
.ad-winner:visited, .ad-winner:hover { color: #fff; }
.ad-winner .ad-line b { color: var(--yellow); }
.ad-blink { grid-area: top; font: 700 18px/1.1 var(--f-black); text-transform: uppercase; color: var(--yellow); animation: ad-flash2 .5s steps(1) infinite; }
@keyframes ad-flash2 { 50% { color: #fff; } }
.ad-mesa { background: #000; color: #fff; }
.ad-mesa:visited, .ad-mesa:hover { color: #fff; }
.ad-impact { grid-area: top; font: 400 24px/1 var(--f-impact); text-transform: uppercase; color: #ff2020; letter-spacing: .03em; animation: blink .6s steps(1) infinite; }
.ad-mesa .ad-btn { background: var(--gloss), var(--yellow); }

/* The pop-up ad (it doesn't actually pop up) */
.popup {
  grid-area: popup; width: min(400px, 100%); rotate: 1.5deg;
  text-align: left; background: var(--silver); padding: 3px; box-shadow: var(--bevel-out), 6px 8px 14px rgba(0,0,0,.55);
}
.popup-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 22px; padding: 0 2px 0 6px;
  background: linear-gradient(90deg, #000080, #1084d0); color: #fff; font: 700 12px/1 var(--f-ui);
}
.popup-bar > span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.popup-btns { display: flex; gap: 2px; flex: none; }
.popup-btns i, .popup-x {
  font: 700 11px/1 var(--f-ui); font-style: normal; color: #000; width: 16px; height: 14px; padding: 0;
  display: grid; place-items: center; background: var(--silver); box-shadow: var(--bevel-out); border: 0;
}
.popup-x { margin-left: 2px; cursor: pointer; }
.popup-body { display: flex; gap: 14px; padding: 14px 12px 12px; font: 12px/1.45 var(--f-ui); }
.popup-icon {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center; font: 900 26px/1 var(--f-black); color: #000;
  background: var(--yellow); clip-path: polygon(50% 0, 100% 100%, 0 100%); padding-top: 12px; animation: blink .9s steps(1) infinite;
}
.popup-big { font: 400 22px/1.1 var(--f-impact); text-transform: uppercase; color: var(--red); margin: 0 0 6px; animation: ad-flash .7s steps(1) infinite; }
.popup-actions { display: flex; gap: 8px; justify-content: flex-end; margin: 12px 0 0; }

/* ---------- doodle stickers ---------- */
.sticker { position: absolute; z-index: 2; pointer-events: none; filter: drop-shadow(3px 4px 3px rgba(0,0,0,.5)); animation: sticker-wobble 1s steps(2) infinite; }
@keyframes sticker-wobble { 0%, 100% { rotate: -8deg; } 50% { rotate: 8deg; } }
.sticker-flyer { width: 100px; right: -44px; top: -64px; z-index: 3; }
.sticker-koala { width: 96px; left: -34px; bottom: -40px; animation-delay: -.5s; }
.doodle-rain { position: fixed; top: -140px; z-index: 50; width: 90px; pointer-events: none; filter: drop-shadow(2px 3px 3px rgba(0,0,0,.5)); animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(calc(100vh + 200px)) rotate(var(--spin, 360deg)); } }
.little-ant { position: fixed; bottom: calc(var(--taskbar-h) - 6px); left: -160px; z-index: 40; width: 120px; pointer-events: none; animation: stroll 9s linear forwards; }
@keyframes stroll { to { transform: translateX(calc(100vw + 320px)); } }

/* ---------- taskbar (XP Luna) ---------- */
.taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: var(--taskbar-h);
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, #3f8cf3 0%, #2a6fe0 8%, #245edb 40%, #1f55cf 90%, #1941a5 100%);
  border-top: 1px solid #0c3fa5; font: 12px/1 var(--f-ui); color: #fff;
}
.start {
  display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 22px 0 10px;
  font: italic 700 19px/1 var(--f-head); color: #fff; text-transform: lowercase; text-shadow: 1px 1px 1px rgba(0,0,0,.6);
  background: linear-gradient(180deg, #5ec85e 0%, #3ca83c 12%, #2f9a30 50%, #2a8f2b 88%, #1f6e20 100%);
  border: 0; border-right: 1px solid #165a17; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); cursor: pointer;
}
.start img { width: 26px; height: auto; filter: invert(1) drop-shadow(1px 1px 0 rgba(0,0,0,.5)); }
.taskbar-copy { margin: 0; flex: 1; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-shadow: 1px 1px 0 rgba(0,0,0,.4); }
.clock {
  margin: 0; height: 100%; padding: 0 14px; display: grid; place-items: center; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #19b9f3, #0f8ee6 50%, #0d7ad4); border-left: 1px solid #0b5bb0; box-shadow: inset 1px 0 0 #3fd0ff;
}
.startmenu {
  position: absolute; left: 0; bottom: var(--taskbar-h); width: min(320px, calc(100vw - 16px));
  background: #fff; color: var(--ink); border: 1px solid #0c3fa5; box-shadow: var(--drop);
  font: 13px/1.5 var(--f-ui); padding: 0 14px 6px; overflow: hidden;
}
.startmenu-head { margin: 0 -14px 12px; padding: 10px 14px; background: linear-gradient(180deg, #3f8cf3, #1f55cf); color: #fff; font: 700 15px/1 var(--f-head); text-shadow: 1px 1px 0 rgba(0,0,0,.5); }
.progress { height: 18px; border: 1px solid #555; background: #fff; margin: 4px 0 12px; padding: 1px; box-shadow: var(--bevel-in); }
.progress span { display: block; height: 100%; background: repeating-linear-gradient(90deg, #2bb52b 0 9px, transparent 9px 11px); animation: load 2.5s steps(6) infinite alternate; }
@keyframes load { from { width: 52%; } to { width: 64%; } }

/* ---------- smaller screens ---------- */
@media (max-width: 900px) {
  .polaroids { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .members { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 70px; }
  .manager-about { grid-column: span 1; }
  .member-stage { height: clamp(230px, 46vw, 340px); }
  .bottom-zone { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "leader" "row" "popup"; justify-items: center; }
  .popup { rotate: 0deg; }
}

@media (max-width: 640px) {
  body { font-size: 14px; }
  main { gap: 34px; }
  .masthead { padding-top: 40px; }
  .new-tag-album { top: 8px; right: 8px; font-size: 12px; }
  .halves { grid-template-columns: 1fr; }
  .sleeve { margin-right: 22%; }
  .members { gap: 70px 12px; }
  .manager-about { grid-column: 1 / -1; }
  .member-stage { height: clamp(190px, 52vw, 260px); }
  .member-plate { padding: 8px 8px 10px; }
  .member-plate p { font-size: 10px; }
  .says { font-size: 14px; padding: 10px 12px; max-width: 170px; }
  .polaroids { gap: 26px 14px; }
  .polaroids li { padding: 7px 7px 2px; }
  .polaroids span { font-size: 1rem; }
  .polaroids .arrow-note { font-size: 1rem; right: 2px; bottom: -28px; }
  .logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .dialog-body { grid-template-columns: 1fr; gap: 12px; }
  .aus-icon { width: 120px; }
  .bulbs { inset: -18px; padding: 17px; }
  .flyer { width: calc(100% - 20px); }
  .flyer-title { font-size: clamp(1.9rem, 10vw, 2.6rem); }
  .sticker-flyer { width: 72px; right: -24px; top: -54px; }
  .sticker-koala { width: 72px; left: -8px; bottom: -34px; }
  .ad-leader { grid-template-columns: 60px 1fr; grid-template-areas: "thumbs flash" "thumbs sub" "btn btn"; }
  .ad-banner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "line" "btn"; }
  .ad-banner .ad-btn { justify-self: start; margin-top: 6px; }
  .ad-thumbs { width: 60px; height: 60px; }
  .mp { grid-template-columns: minmax(0, 1fr); grid-template-areas: "deck" "screen" "list"; }
  .mp-screen { grid-template-columns: 96px 1fr; align-items: stretch; }
  .mp-vis { height: 100%; }
  .mp-vol { margin-left: 0; }
  .tp-title { padding: 0 4px 0 0; }
  .tp-name { display: none; }
  .tp-cd { width: 22px; height: 22px; }
  .hackwin-screen { height: 240px; font-size: 11px; }
  .task-player { padding: 0 4px 0 6px; }
  .tp-pop { position: fixed; right: 8px; left: 8px; bottom: calc(var(--taskbar-h) + 4px); width: auto; }
  .taskbar-copy { display: none; }
  .taskbar { justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .floaties, .sparkles { display: none; }
}

/* the mouse pointer picked in Options > Mouse (wallpaper.js sets html[data-cursor]), held by its middle, everywhere
   but in the boxes you type in: Jon's head, the flame skull, the 8 ball, LEGO Island 2's CD (pixel art, 32 px) and the
   Awesome Face */
html[data-cursor="jon"], html[data-cursor="jon"] * {
  cursor: url("/assets/img/cursors/jon.png") 20 20, auto !important;
  cursor: image-set(url("/assets/img/cursors/jon.png") 1x, url("/assets/img/cursors/jon-2x.png") 2x) 20 20, auto !important;
}
html[data-cursor="skull"], html[data-cursor="skull"] * { /* tipped up and left, clicked at its flames' tip */
  cursor: url("/assets/img/cursors/skull.png") 3 7, auto !important;
  cursor: image-set(url("/assets/img/cursors/skull.png") 1x, url("/assets/img/cursors/skull-2x.png") 2x) 3 7, auto !important;
}
html[data-cursor="8ball"], html[data-cursor="8ball"] * {
  cursor: url("/assets/img/cursors/8ball.png") 20 20, auto !important;
  cursor: image-set(url("/assets/img/cursors/8ball.png") 1x, url("/assets/img/cursors/8ball-2x.png") 2x) 20 20, auto !important;
  cursor: var(--tgp-8ball, image-set(url("/assets/img/cursors/8ball.png") 1x, url("/assets/img/cursors/8ball-2x.png") 2x) 20 20), auto !important; /* spinning: wallpaper.js */
}
html[data-cursor="li2-cd"], html[data-cursor="li2-cd"] * {
  cursor: url("/assets/img/cursors/li2-cd.png") 16 16, auto !important;
  cursor: image-set(url("/assets/img/cursors/li2-cd.png") 1x, url("/assets/img/cursors/li2-cd-2x.png") 2x) 16 16, auto !important;
}
html[data-cursor="awesome"], html[data-cursor="awesome"] * {
  cursor: url("/assets/img/cursors/awesome.png") 20 20, auto !important;
  cursor: image-set(url("/assets/img/cursors/awesome.png") 1x, url("/assets/img/cursors/awesome-2x.png") 2x) 20 20, auto !important;
}
html[data-cursor] :is(textarea, input:not([type="radio"], [type="checkbox"], [type="button"], [type="submit"], [type="color"], [type="range"])) { cursor: text !important; }
/* x-cursors:begin (tools/prep-images.py cursors) */
html[data-cursor="x-gumby"], html[data-cursor="x-gumby"] * {
  cursor: url("/assets/img/cursors/x-gumby.png") 4 0, auto !important;
  cursor: image-set(url("/assets/img/cursors/x-gumby.png") 1x, url("/assets/img/cursors/x-gumby-2x.png") 2x) 4 0, auto !important;
}
html[data-cursor="x-x"], html[data-cursor="x-x"] * {
  cursor: url("/assets/img/cursors/x-x.png") 14 14, auto !important;
  cursor: image-set(url("/assets/img/cursors/x-x.png") 1x, url("/assets/img/cursors/x-x-2x.png") 2x) 14 14, auto !important;
}
html[data-cursor="x-crosshair"], html[data-cursor="x-crosshair"] * {
  cursor: url("/assets/img/cursors/x-crosshair.png") 14 14, auto !important;
  cursor: image-set(url("/assets/img/cursors/x-crosshair.png") 1x, url("/assets/img/cursors/x-crosshair-2x.png") 2x) 14 14, auto !important;
}
html[data-cursor="x-hand1"], html[data-cursor="x-hand1"] * {
  cursor: url("/assets/img/cursors/x-hand1.png") 24 0, auto !important;
  cursor: image-set(url("/assets/img/cursors/x-hand1.png") 1x, url("/assets/img/cursors/x-hand1-2x.png") 2x) 24 0, auto !important;
}
html[data-cursor="x-hand2"], html[data-cursor="x-hand2"] * {
  cursor: url("/assets/img/cursors/x-hand2.png") 0 2, auto !important;
  cursor: image-set(url("/assets/img/cursors/x-hand2.png") 1x, url("/assets/img/cursors/x-hand2-2x.png") 2x) 0 2, auto !important;
}
html[data-cursor="x-heart"], html[data-cursor="x-heart"] * {
  cursor: url("/assets/img/cursors/x-heart.png") 12 16, auto !important;
  cursor: image-set(url("/assets/img/cursors/x-heart.png") 1x, url("/assets/img/cursors/x-heart-2x.png") 2x) 12 16, auto !important;
}
html[data-cursor="x-ul-angle"], html[data-cursor="x-ul-angle"] * {
  cursor: url("/assets/img/cursors/x-ul-angle.png") 2 2, auto !important;
  cursor: image-set(url("/assets/img/cursors/x-ul-angle.png") 1x, url("/assets/img/cursors/x-ul-angle-2x.png") 2x) 2 2, auto !important;
}
html[data-cursor="x-pirate"], html[data-cursor="x-pirate"] * {
  cursor: url("/assets/img/cursors/x-pirate.png") 14 24, auto !important;
  cursor: image-set(url("/assets/img/cursors/x-pirate.png") 1x, url("/assets/img/cursors/x-pirate-2x.png") 2x) 14 24, auto !important;
}
html[data-cursor="x-spider"], html[data-cursor="x-spider"] * {
  cursor: url("/assets/img/cursors/x-spider.png") 12 14, auto !important;
  cursor: image-set(url("/assets/img/cursors/x-spider.png") 1x, url("/assets/img/cursors/x-spider-2x.png") 2x) 12 14, auto !important;
}
/* x-cursors:end */
/* dora-cursors:begin (tools/prep-images.py cursors) */
html[data-cursor="dora-navy-right"], html[data-cursor="dora-navy-right"] * {
  cursor: url("/assets/img/cursors/dora-navy-right.png") 39 11, auto !important;
  cursor: image-set(url("/assets/img/cursors/dora-navy-right.png") 1x, url("/assets/img/cursors/dora-navy-right-2x.png") 2x) 39 11, auto !important;
}
html[data-cursor="dora-navy-normal"], html[data-cursor="dora-navy-normal"] * {
  cursor: url("/assets/img/cursors/dora-navy-normal.png") 0 3, auto !important;
  cursor: image-set(url("/assets/img/cursors/dora-navy-normal.png") 1x, url("/assets/img/cursors/dora-navy-normal-2x.png") 2x) 0 3, auto !important;
}
html[data-cursor="dora-red-right"], html[data-cursor="dora-red-right"] * {
  cursor: url("/assets/img/cursors/dora-red-right.png") 39 11, auto !important;
  cursor: image-set(url("/assets/img/cursors/dora-red-right.png") 1x, url("/assets/img/cursors/dora-red-right-2x.png") 2x) 39 11, auto !important;
}
html[data-cursor="dora-red-normal"], html[data-cursor="dora-red-normal"] * {
  cursor: url("/assets/img/cursors/dora-red-normal.png") 0 3, auto !important;
  cursor: image-set(url("/assets/img/cursors/dora-red-normal.png") 1x, url("/assets/img/cursors/dora-red-normal-2x.png") 2x) 0 3, auto !important;
}
html[data-cursor="dora-pink-right"], html[data-cursor="dora-pink-right"] * {
  cursor: url("/assets/img/cursors/dora-pink-right.png") 39 11, auto !important;
  cursor: image-set(url("/assets/img/cursors/dora-pink-right.png") 1x, url("/assets/img/cursors/dora-pink-right-2x.png") 2x) 39 11, auto !important;
}
html[data-cursor="dora-pink-normal"], html[data-cursor="dora-pink-normal"] * {
  cursor: url("/assets/img/cursors/dora-pink-normal.png") 0 3, auto !important;
  cursor: image-set(url("/assets/img/cursors/dora-pink-normal.png") 1x, url("/assets/img/cursors/dora-pink-normal-2x.png") 2x) 0 3, auto !important;
}
html[data-cursor="dora-orange-right"], html[data-cursor="dora-orange-right"] * {
  cursor: url("/assets/img/cursors/dora-orange-right.png") 39 11, auto !important;
  cursor: image-set(url("/assets/img/cursors/dora-orange-right.png") 1x, url("/assets/img/cursors/dora-orange-right-2x.png") 2x) 39 11, auto !important;
}
html[data-cursor="dora-orange-normal"], html[data-cursor="dora-orange-normal"] * {
  cursor: url("/assets/img/cursors/dora-orange-normal.png") 0 3, auto !important;
  cursor: image-set(url("/assets/img/cursors/dora-orange-normal.png") 1x, url("/assets/img/cursors/dora-orange-normal-2x.png") 2x) 0 3, auto !important;
}
html[data-cursor="dora-yellow-right"], html[data-cursor="dora-yellow-right"] * {
  cursor: url("/assets/img/cursors/dora-yellow-right.png") 41 11, auto !important;
  cursor: image-set(url("/assets/img/cursors/dora-yellow-right.png") 1x, url("/assets/img/cursors/dora-yellow-right-2x.png") 2x) 41 11, auto !important;
}
html[data-cursor="dora-yellow-normal"], html[data-cursor="dora-yellow-normal"] * {
  cursor: url("/assets/img/cursors/dora-yellow-normal.png") 1 2, auto !important;
  cursor: image-set(url("/assets/img/cursors/dora-yellow-normal.png") 1x, url("/assets/img/cursors/dora-yellow-normal-2x.png") 2x) 1 2, auto !important;
}
html[data-cursor="dora-green-right"], html[data-cursor="dora-green-right"] * {
  cursor: url("/assets/img/cursors/dora-green-right.png") 39 11, auto !important;
  cursor: image-set(url("/assets/img/cursors/dora-green-right.png") 1x, url("/assets/img/cursors/dora-green-right-2x.png") 2x) 39 11, auto !important;
}
html[data-cursor="dora-green-normal"], html[data-cursor="dora-green-normal"] * {
  cursor: url("/assets/img/cursors/dora-green-normal.png") 0 3, auto !important;
  cursor: image-set(url("/assets/img/cursors/dora-green-normal.png") 1x, url("/assets/img/cursors/dora-green-normal-2x.png") 2x) 0 3, auto !important;
}
html[data-cursor="dora-blue-right"], html[data-cursor="dora-blue-right"] * {
  cursor: url("/assets/img/cursors/dora-blue-right.png") 39 11, auto !important;
  cursor: image-set(url("/assets/img/cursors/dora-blue-right.png") 1x, url("/assets/img/cursors/dora-blue-right-2x.png") 2x) 39 11, auto !important;
}
html[data-cursor="dora-blue-normal"], html[data-cursor="dora-blue-normal"] * {
  cursor: url("/assets/img/cursors/dora-blue-normal.png") 0 3, auto !important;
  cursor: image-set(url("/assets/img/cursors/dora-blue-normal.png") 1x, url("/assets/img/cursors/dora-blue-normal-2x.png") 2x) 0 3, auto !important;
}
html[data-cursor="dora-purple-right"], html[data-cursor="dora-purple-right"] * {
  cursor: url("/assets/img/cursors/dora-purple-right.png") 39 11, auto !important;
  cursor: image-set(url("/assets/img/cursors/dora-purple-right.png") 1x, url("/assets/img/cursors/dora-purple-right-2x.png") 2x) 39 11, auto !important;
}
html[data-cursor="dora-purple-normal"], html[data-cursor="dora-purple-normal"] * {
  cursor: url("/assets/img/cursors/dora-purple-normal.png") 0 3, auto !important;
  cursor: image-set(url("/assets/img/cursors/dora-purple-normal.png") 1x, url("/assets/img/cursors/dora-purple-normal-2x.png") 2x) 0 3, auto !important;
}
html[data-cursor="dora-black-right"], html[data-cursor="dora-black-right"] * {
  cursor: url("/assets/img/cursors/dora-black-right.png") 39 11, auto !important;
  cursor: image-set(url("/assets/img/cursors/dora-black-right.png") 1x, url("/assets/img/cursors/dora-black-right-2x.png") 2x) 39 11, auto !important;
}
html[data-cursor="dora-black-normal"], html[data-cursor="dora-black-normal"] * {
  cursor: url("/assets/img/cursors/dora-black-normal.png") 0 3, auto !important;
  cursor: image-set(url("/assets/img/cursors/dora-black-normal.png") 1x, url("/assets/img/cursors/dora-black-normal-2x.png") 2x) 0 3, auto !important;
}
html[data-cursor="dora-white-right"], html[data-cursor="dora-white-right"] * {
  cursor: url("/assets/img/cursors/dora-white-right.png") 41 11, auto !important;
  cursor: image-set(url("/assets/img/cursors/dora-white-right.png") 1x, url("/assets/img/cursors/dora-white-right-2x.png") 2x) 41 11, auto !important;
}
html[data-cursor="dora-white-normal"], html[data-cursor="dora-white-normal"] * {
  cursor: url("/assets/img/cursors/dora-white-normal.png") 1 2, auto !important;
  cursor: image-set(url("/assets/img/cursors/dora-white-normal.png") 1x, url("/assets/img/cursors/dora-white-normal-2x.png") 2x) 1 2, auto !important;
}
/* dora-cursors:end */