/* heyodogo.com
   Layout: one centered column. A macOS menu bar and the color button across the top, the rainbow wordmark,
   a two-card shelf (one column on phones), a hover line, and the research footnote. Each card is dressed as
   the thing it links to, in that project's own fonts. First visit: "pale" on a light system, "soft" on a dark one. */

/* Palettes: picked from the corner button's dropdown (js/palettes.js has the order and names).
   Each sets the page color (--pb, or a patterned --pbg), the text colors, and the eight wordmark letters. */
:root {
  --f-site: "Gaegu", "Comic Sans MS", ui-rounded, system-ui, sans-serif;
  --f-mac: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --f-mono: ui-monospace, "SF Mono", Menlo, monospace;
}
:root, [data-pal="soft"] { --pb: #2d44c8; --pi: #f4f7ff; --pm: #c3cff7; --pf: #8f9fe0; --psh: rgba(0, 0, 60, 0.35); color-scheme: dark;
  --l0: #ffb3d9; --l1: #fff0a0; --l2: #a8ecc0; --l3: #bfefff; --l4: #ffd0a8; --l5: #e6d4ff; --l6: #ffb3d9; --l7: #fff0a0; }
[data-pal="pale"] { --pb: #e8eeff; --pi: #12208a; --pm: #4a5bb8; --pf: #8a97d0; --psh: rgba(18, 32, 138, 0.22); color-scheme: light;
  --l0: #1631d8; --l1: #ff4fa3; --l2: #f2b400; --l3: #1aa86a; --l4: #1631d8; --l5: #ff4fa3; --l6: #f2b400; --l7: #1aa86a; }
[data-pal="pondblue"] { --pb: #eef4e6; --pi: #12208a; --pm: #4a5bb8; --pf: #8a97c0; --psh: rgba(18, 32, 138, 0.22); color-scheme: light;
  --l0: #1631d8; --l1: #e8697f; --l2: #f2b632; --l3: #6aa84f; --l4: #1631d8; --l5: #ff9ab8; --l6: #f2b632; --l7: #6aa84f;
  --pbg: radial-gradient(circle, rgba(22, 49, 216, 0.14) 1.2px, transparent 1.5px) 0 0 / 22px 22px, #eef4e6; }
[data-pal="pondnight"] { --pb: #142620; --pi: #eef4e6; --pm: #a9bba0; --pf: #6f8467; --psh: rgba(0, 0, 0, 0.45); color-scheme: dark;
  --l0: #ff8fa3; --l1: #f7c948; --l2: #8fd16a; --l3: #ffb3cc; --l4: #7fb6e8; --l5: #cde86b; --l6: #ff8fa3; --l7: #8fd16a;
  --pbg: radial-gradient(circle, rgba(238, 244, 230, 0.1) 1.2px, transparent 1.5px) 0 0 / 22px 22px, #142620; }
[data-pal="coral"] { --pb: #0f0f10; --pi: #f4ecd5; --pm: #a8a08c; --pf: #6b665a; --psh: rgba(0, 0, 0, 0.6); color-scheme: dark;
  --l0: #f4ecd5; --l1: #f4ecd5; --l2: #f4ecd5; --l3: #f4ecd5; --l4: #f4ecd5; --l5: #f4ecd5; --l6: #f4ecd5; --l7: #ee7a68; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; background: var(--pbg, var(--pb)); color: var(--pi); transition: background-color 0.3s ease, color 0.3s ease; }
body { font-family: var(--f-site); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a { color: inherit; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }

.page {
  width: min(100%, 920px); margin: 0 auto; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  padding-top: max(14px, env(safe-area-inset-top, 0px));
  padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* ---------- top: the macOS menu bar + color button ---------- */
.top { position: relative; z-index: 20; width: 100%; display: flex; align-items: center; gap: 10px; }
.mbar { position: relative; flex: 1; min-width: 0; height: 28px; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 12px; border-radius: 8px; background: rgba(246, 246, 250, 0.9); box-shadow: 0 0 0 1px rgba(20, 30, 90, 0.1); color: #1d1d1f; font: 12px/1 var(--f-mac); }
.mbar-label { color: #6e6e73; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mac { flex: none; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; color: #fff; background: #1d1d1f; border-radius: 4px; padding: 2px 5px; }
.mbar-icons { margin-left: auto; display: flex; align-items: center; gap: 2px; flex: none; }
.mbar-icons button { border: 0; background: none; padding: 2px 6px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; }
.mbar-icons button:hover, .mbar-icons button[aria-expanded="true"] { background: rgba(0, 0, 0, 0.1); }
.mbar-icons button:focus-visible { outline: 2px solid #0a64d8; }
.theme { flex: none; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1.5px solid var(--pf); background: transparent; display: grid; place-items: center; cursor: pointer; transition: transform 0.3s, border-color 0.3s; }
.theme:focus-visible { outline: 2px solid var(--pi); outline-offset: 2px; }
@media (hover: hover) { .theme:hover { transform: rotate(-20deg); } }
@media (pointer: coarse) {
  .mbar { height: 36px; border-radius: 10px; }
  .mbar-icons button { padding: 5px 7px; }
  .theme { width: 40px; height: 40px; }
}
@media (max-width: 460px) { .mbar-label { display: none; } }

/* menu-bar icons, drawn after the real ones */
.mbi { display: flex; align-items: center; gap: 3px; height: 18px; color: #1d1d1f; font: 600 13px var(--f-mac); }
.mbi svg { display: block; }
.mbi.red { color: #e5372b; }

/* ---------- wordmark ---------- */
.title { margin: 8px 0 0; display: flex; justify-content: center; font-weight: 700; font-size: clamp(58px, 16vw, 84px); line-height: 1; }
.title > span { display: inline-block; animation: drop 0.75s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--i) * 70ms); }
.title i { display: inline-block; font-style: normal; text-shadow: 3px 3px 0 var(--psh); transition: color 0.3s; }
.title span:nth-child(1) i { color: var(--l0); } .title span:nth-child(2) i { color: var(--l1); } .title span:nth-child(3) i { color: var(--l2); } .title span:nth-child(4) i { color: var(--l3); }
.title span:nth-child(5) i { color: var(--l4); } .title span:nth-child(6) i { color: var(--l5); } .title span:nth-child(7) i { color: var(--l6); } .title span:nth-child(8) i { color: var(--l7); }
.title i.hop { animation: hop 0.5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes drop { 0% { transform: translateY(-70px) scale(0.3); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes hop { 40% { transform: translateY(-16px) rotate(-10deg) scale(1.1); } }

/* ---------- shelf ---------- */
.shelf { width: 100%; max-width: 540px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 620px) { .shelf { gap: 12px; } .cap { font-size: 16px; } }
.card { display: grid; gap: 8px; text-decoration: none; color: inherit; border-radius: 14px; outline: none; transition: transform 0.2s ease; }
@media (hover: hover) { .card:hover { transform: translateY(-3px); } }
.card:active .art { transform: scale(0.985); }
.card:focus-visible .art { box-shadow: 0 0 0 3px var(--pi); }
.art { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; container-type: inline-size; transition: transform 0.12s ease; }
.cap { display: none; font-size: 19px; line-height: 1.2; color: var(--pm); padding: 0 4px; }
.cap b { color: var(--pi); }
@media (hover: none) { .cap { display: block; } }
html.touch .cap { display: block; }

/* plonkpop: the combo board. Patrick Hand on deep purple-navy, lopsided tiles, dashed cream rings */
.pp { background: #1b1726; color: #fff; font-family: "Patrick Hand", ui-rounded, sans-serif; }
.pp > * { position: absolute; }
.pp .btn { top: 5cqw; width: 8cqw; height: 8cqw; border-radius: 50%; display: grid; place-items: center; }
.pp .grid { left: 5cqw; background: #a07cd8; }
.pp .grid i { width: 3.6cqw; height: 3.6cqw; background: radial-gradient(circle, #fff 0 0.75cqw, transparent 0.8cqw) 0 0 / 1.8cqw 1.8cqw; }
.pp .moon { right: 5cqw; background: #ee7a68; }
.pp .moon i { width: 3.4cqw; height: 3.4cqw; border-radius: 50%; box-shadow: -1cqw 0.6cqw 0 0 #fff; transform: translate(0.7cqw, -0.4cqw); }
.pp .tgt { left: 7cqw; top: 19cqw; display: grid; justify-items: center; width: 30cqw; }
.pp .tl { font-size: 4cqw; letter-spacing: 0.2em; color: #b9a7e0; }
.pp .tg { font-size: 22cqw; line-height: 0.9; text-shadow: 1cqw 1cqw 0 #0b0910; }
.pp .t { display: grid; place-items: center; border-radius: 40% 44% 42% 46% / 44% 40% 46% 42%; background: var(--c); text-shadow: 0.7cqw 0.7cqw 0 #1b1726; transform: rotate(var(--r)); }
.pp .ring::after { content: ""; position: absolute; inset: -1.8cqw; border-radius: 50%; border: 0.8cqw dashed #fdf0b8; }
.pp .op { width: 8cqw; height: 8cqw; border-radius: 50%; background: var(--c); display: grid; place-items: center; font-size: 5.4cqw; text-shadow: 0.4cqw 0.4cqw 0 #1b1726; bottom: 14cqw; }
.pp .op.ring::after { inset: -1.1cqw; border-width: 0.55cqw; }
.pp .word { left: 6cqw; bottom: 4cqw; font-size: 6cqw; color: #f4ecd5; }

/* Glideshow: its home page. Hanken Grotesk on a dusk sky, with a strip of slides */
.gs { color: #fff; font-family: "Hanken Grotesk", system-ui, sans-serif; background: radial-gradient(70% 55% at 75% 100%, rgba(255, 160, 120, 0.45), transparent 70%), linear-gradient(180deg, #121738 0%, #1f1d52 45%, #33285a 72%, #4f3150 100%); }
/* spacing measured from the card itself (cqw), so the picture is identical on the shelf, in the panel and in flight */
.gs-in { position: absolute; inset: 0; padding: 6cqw 7cqw; display: grid; grid-template-rows: auto 1fr auto; }
.gs .brand { display: flex; align-items: center; gap: 2.06cqw; font-weight: 600; font-size: 4.82cqw; }
.gs .logo { width: 6.88cqw; height: 6.88cqw; border-radius: 1.72cqw; background: #2f6bf2; display: grid; place-items: center; }
.gs .logo svg { width: 5.5cqw; height: 5.5cqw; }
.gs .tag { align-self: center; font-weight: 500; font-size: 7.05cqw; line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.gs .tag em { font-style: italic; font-weight: 400; color: #ffc9a8; }
.gs .strip { display: flex; gap: 1.72cqw; padding: 1.55cqw; border-radius: 1.89cqw; background: rgba(8, 10, 30, 0.35); border: 1px solid rgba(255, 255, 255, 0.08); }
.gs .strip i { flex: 1; aspect-ratio: 16 / 9; border-radius: 0.69cqw; background-repeat: no-repeat; background-color: #fff; }
.gs .strip i.on { outline: 0.52cqw solid #4c8dff; outline-offset: 0.43cqw; }
.gs .strip .t1 { background-image: linear-gradient(#1b1f2a, #1b1f2a), linear-gradient(#d9dee8, #d9dee8); background-size: 62% 14%, 42% 8%; background-position: 50% 38%, 50% 64%; }
.gs .strip .t2 { background-image: linear-gradient(#1b1f2a, #1b1f2a), linear-gradient(#ee7a68, #ee7a68), linear-gradient(#3ac590, #3ac590); background-size: 36% 11%, 30% 52%, 22% 30%; background-position: 14% 22%, 64% 70%, 90% 50%; }
.gs .strip .t3 { background-image: linear-gradient(#4c8dff, #4c8dff), linear-gradient(#4c8dff, #4c8dff), linear-gradient(#3ac590, #3ac590), linear-gradient(#ee7a68, #ee7a68), linear-gradient(#d9dee8, #d9dee8); background-size: 9% 35%, 9% 55%, 9% 45%, 9% 68%, 70% 3%; background-position: 24% 80%, 42% 80%, 60% 80%, 78% 80%, 50% 84%; }
.gs .strip .t4 { background-image: linear-gradient(135deg, #7a5cff, #ff9a7a), linear-gradient(#d9dee8, #d9dee8); background-size: 72% 56%, 44% 8%; background-position: 50% 30%, 50% 86%; }
.gs .strip .t5 { background-color: #1b2260; background-image: linear-gradient(#fff, #fff), linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)); background-size: 50% 13%, 30% 7%; background-position: 50% 42%, 50% 64%; }

/* ---------- hover line + footer ---------- */
.say { margin: 0; min-height: 2.6em; max-width: 40ch; text-align: center; font-size: 22px; line-height: 1.25; color: var(--pm); }
.say b { color: var(--pi); }
@media (hover: none) { .say { display: none; } }
html.touch .say { display: none; }
.foot { margin-top: 8px; font-size: 20px; color: var(--pf); }
.foot a { color: var(--pi); text-underline-offset: 3px; }

/* ---------- menu-bar panels (drawn after the real apps: dark glass, SF, blue buttons) ---------- */
.pop { position: absolute; top: calc(100% + 6px); z-index: 20; animation: pop-in 0.14s ease-out; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px); } }
.mp { width: 252px; max-width: calc(100vw - 32px); overflow: hidden; background: rgba(28, 29, 36, 0.97); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 22px; padding: 14px; color: #f2f2f5; font: 13px/1.3 var(--f-mac); box-shadow: 0 22px 50px -14px rgba(0, 0, 0, 0.65); display: grid; gap: 10px; text-align: left; }
.mp svg { display: block; }
.mp hr { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.08); margin: 0; }
.mp .row { display: flex; align-items: center; gap: 8px; }
.mp .row > *, .mp .rem > div { min-width: 0; }
.mp .tile { background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 13px; }
.mp .three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.mp .seg { display: flex; gap: 2px; padding: 3px; border-radius: 11px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.06); }
.mp .seg span { flex: 1; display: grid; place-items: center; padding: 5px 13px; border-radius: 8px; color: rgba(255, 255, 255, 0.75); }
.mp .seg .on { background: #3b82f6; color: #fff; }
.mp .blue { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 10px; border-radius: 13px; background: linear-gradient(#4f97f7, #2f7be8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); font-size: 16px; font-weight: 600; color: #fff; }
.mp .blue.left { justify-content: flex-start; padding-left: 14px; }
.mp .blue.stop { background: linear-gradient(#ff6a5f, #e5483d); }
.mp .blue.stop i { width: 11px; height: 11px; border-radius: 2px; background: #fff; }
.mp .dark { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 13px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); font-size: 15px; font-weight: 500; }
.mp .dials { display: flex; justify-content: space-between; }
.mp .dials svg { width: 68px; height: 68px; }
.mp .proj { padding: 12px; display: grid; gap: 10px; }
.mp .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.mp .nm { flex: 1; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp .clock { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mp .ph { color: rgba(255, 255, 255, 0.45); font-size: 14px; }
.mp .per { padding: 9px 4px; text-align: center; display: grid; gap: 4px; justify-items: center; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.55); border-top: 2px solid var(--c); }
.mp .per b { font-size: 13px; font-weight: 600; color: #fff; letter-spacing: 0; }
.mp .sec { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; margin-top: 2px; }
.mp .rem { display: flex; gap: 10px; padding: 9px 11px; }
.mp .rem > i { width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.55); flex: none; margin-top: 1px; }
.mp .rem div { display: grid; gap: 2px; font-size: 13.5px; }
.mp .rem small { display: flex; align-items: center; gap: 5px; font-size: 12px; color: rgba(255, 255, 255, 0.55); }
.mp .gh { display: flex; gap: 8px; white-space: nowrap; justify-content: space-between; align-items: baseline; font-size: 13.5px; color: rgba(255, 255, 255, 0.6); text-decoration: none; padding: 0 2px 9px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.mp .gh:hover { color: #fff; }
.mp .gh b { color: #fff; font-weight: 600; }
/* claude usage is a SwiftBar plugin, so its menu is plain and monospace */
.mp.sb { width: 288px; border-radius: 14px; padding: 11px 14px; gap: 7px; background: rgba(36, 36, 40, 0.97); }
.mp .sbh { color: rgba(255, 255, 255, 0.6); font-size: 13.5px; }
.mp .sbr { display: grid; grid-template-columns: 1fr auto 4.6em; gap: 12px; font: 15px var(--f-mono); color: #4cd964; }
.mp .sbr span:nth-child(2) { text-align: right; }
.mp .sbt { display: flex; align-items: center; justify-content: space-between; font: 14px var(--f-mono); color: rgba(255, 255, 255, 0.55); }

@media (prefers-reduced-motion: reduce) {
  .title > span, .title i.hop, .pop { animation: none; }
  .card, .art, .theme, html, body { transition: none; }
}

/* ---------- expanded view: click a card to look closer ---------- */
.shelf .card { transition: transform 0.2s ease, opacity 0.3s ease; }
.shelf.dim .card:not(.lifted) { opacity: 0.25; transform: scale(0.94); }
.shelf.dim .card { pointer-events: none; }
.shelf.dim .card.lifted .cap { opacity: 0.25; }
.shelf.settling .card { transform: none !important; }
.card.lifted .art { visibility: hidden; }
.xp-back { position: fixed; inset: 0; z-index: 40; background: color-mix(in srgb, var(--pb) 55%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); touch-action: none; }
/* the panel itself never scrolls (so × always stays put); its inside does */
.xp { position: fixed; z-index: 41; inset: 0; margin: auto; width: min(620px, calc(100vw - 32px)); height: fit-content; max-height: calc(100dvh - 40px); display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; transform-origin: top left; }
.xp:focus { outline: none; }
.xp-in { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: grid; align-content: start; gap: 14px; padding: 18px 20px 22px; }
.xp-close { position: absolute; top: 12px; right: 12px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.4); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; display: grid; place-items: center; touch-action: manipulation; }
.xp-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.xp-grab { display: none; }
.xp-vis { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; container-type: inline-size; }
.xp h2 { margin: 2px 0 0; font-weight: 400; font-size: 34px; line-height: 1; }
.xp-pitch { margin: 0; font-size: 19px; line-height: 1.35; }
.xp-facts { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.xp-facts li { padding: 6px 12px; border-radius: 999px; font-size: 15px; }
.xp-go { justify-self: start; text-decoration: none; padding: 11px 20px; border-radius: 999px; font-size: 18px; font-weight: 600; }
.xp-go:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.xp-in > :not(.xp-vis) { transition: opacity 0.25s ease 0.15s; }
.xp.opening .xp-in > :not(.xp-vis) { opacity: 0; transition: none; }

/* plonkpop's panel: its board colors and Patrick Hand */
.xp-pp { background: #1b1726; color: #f4ecd5; font-family: "Patrick Hand", ui-rounded, sans-serif; }
.xp-pp h2 { font-size: 40px; }
.xp-pp .xp-facts li { background: rgba(255, 255, 255, 0.08); }
.xp-pp .xp-go { background: #ee7a68; color: #fff; font-weight: 400; font-size: 21px; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25); }
/* Glideshow's panel: its dusk sky and Hanken Grotesk */
.xp-gs { background: radial-gradient(70% 45% at 80% 100%, rgba(255, 160, 120, 0.4), transparent 70%), linear-gradient(180deg, #121738, #262260 60%, #3f2b58); color: #fff; font-family: "Hanken Grotesk", system-ui, sans-serif; }
.xp-gs h2 { font-weight: 600; font-size: 30px; display: flex; align-items: center; gap: 10px; }
.xp-gs h2 .logo { width: 34px; height: 34px; border-radius: 9px; background: #2f6bf2; display: grid; place-items: center; }
.xp-gs h2 .logo svg { width: 27px; height: 27px; }
.xp-gs .xp-pitch { font-size: 18px; }
.xp-gs .xp-facts li { background: rgba(255, 255, 255, 0.1); font-size: 14px; }
.xp-gs .xp-go { background: #fff; color: #17171a; font-size: 16px; }

/* phones: "grow" becomes a full-screen sheet, "center" a sheet from the bottom; both swipe down to close */
@media (max-width: 620px) {
  .xp { inset: 0; margin: 0; width: 100%; max-height: none; height: 100%; border-radius: 0; padding-top: env(safe-area-inset-top, 0px); }
  .xp-in { padding: 60px 16px max(24px, env(safe-area-inset-bottom, 0px)); }
  .xp-close { top: calc(10px + env(safe-area-inset-top, 0px)); }
  .xp-grab { display: block; position: absolute; z-index: 3; top: calc(8px + env(safe-area-inset-top, 0px)); left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: currentColor; opacity: 0.35; }
  html[data-xp="center"] .xp { inset: auto 0 0 0; height: fit-content; max-height: 92dvh; border-radius: 24px 24px 0 0; padding-top: 0; }
  html[data-xp="center"] .xp-close { top: 10px; }
  html[data-xp="center"] .xp-grab { top: 8px; }
  .xp h2 { font-size: 30px; } .xp-pp h2 { font-size: 36px; }
  .xp-pitch { font-size: 17px; }
}

/* the plonkpop visual: the combo board solving a puzzle, with the game's own bubble physics */
.pv { background: #1b1726; color: #fff; font-family: "Patrick Hand", ui-rounded, sans-serif; }
.pv > * { position: absolute; left: 0; top: 0; will-change: transform; }
.pv .tgt { display: grid; justify-items: center; }
.pv .tl { font-size: 3.6cqw; letter-spacing: 0.2em; color: #b9a7e0; }
.pv .tg { font-size: 19cqw; line-height: 0.9; text-shadow: 0.9cqw 0.9cqw 0 #0b0910; transition: color 0.3s; }
.pv .tg.hit { color: #fdf0b8; }
.pv .tile { display: grid; place-items: center; font-size: 8cqw; border-radius: 40% 44% 42% 46% / 44% 40% 46% 42%; background: var(--c); text-shadow: 0.6cqw 0.6cqw 0 #1b1726; }
.pv .tile.pick::after, .pv .op.on::after { content: ""; position: absolute; inset: -1.4cqw; border-radius: 50%; border: 0.6cqw dashed #fdf0b8; animation: spin 6s linear infinite; }
.pv .op { display: grid; place-items: center; border-radius: 50%; background: var(--c); font-size: 4.4cqw; text-shadow: 0.35cqw 0.35cqw 0 #1b1726; }
.pv .op.on::after { inset: -0.9cqw; border-width: 0.45cqw; }
.pv .hint { font-size: 3.4cqw; color: #9a8fbf; white-space: nowrap; }
.pv .tile.win::after { content: ""; position: absolute; inset: -1.4cqw; border-radius: 50%; box-shadow: 0 0 0 0.8cqw rgba(253, 240, 184, 0.35); }
.pv .dot { border-radius: 50%; background: var(--c); pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }


/* the Glideshow visual: an editor where the slide and its HTML change together */
.gv { background: #eef2f9; font-family: "Hanken Grotesk", system-ui, sans-serif; color: #1b1f2a; }
.gv > * { position: absolute; }
.gv .film { left: 3cqw; top: 12cqw; display: grid; gap: 1.6cqw; width: 11cqw; }
.gv .film i { aspect-ratio: 16 / 9; background: #fff; border-radius: 0.6cqw; box-shadow: 0 0 0 0.25cqw #d5dbe8; }
.gv .film i:first-child { box-shadow: 0 0 0 0.45cqw #2f6bf2; }
.gv .slide { left: 17cqw; top: 12cqw; width: 40cqw; aspect-ratio: 16 / 9; background: #fff; border-radius: 0.8cqw; box-shadow: 0 1cqw 3cqw -1cqw rgba(30, 40, 80, 0.3); overflow: hidden; }
.gv .slide b { position: absolute; left: 4cqw; top: 4cqw; font-size: 4.2cqw; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
.gv .slide b::after { content: ""; display: inline-block; width: 0.3cqw; height: 4cqw; margin-left: 0.3cqw; vertical-align: -0.6cqw; background: #2f6bf2; animation: blink 0.9s steps(1) infinite; }
.gv .slide .box { position: absolute; right: 3.5cqw; bottom: 3.5cqw; width: 12cqw; height: 8cqw; border-radius: 1cqw; background: #ee7a68; transform: scale(0); transition: transform 0.35s cubic-bezier(.3, 1.6, .5, 1); }
.gv .slide .box.on { transform: scale(1); }
.gv .code { left: 60cqw; top: 12cqw; right: 3cqw; bottom: 12cqw; background: #14182b; border-radius: 1cqw; padding: 2.2cqw; font: 2cqw/1.7 ui-monospace, "SF Mono", Menlo, monospace; color: #9aa6d6; white-space: pre; overflow: hidden; }
.gv .code span { display: block; transition: background-color 0.4s; border-radius: 0.4cqw; }
.gv .code span.new { background: rgba(76, 141, 255, 0.28); color: #fff; }
.gv .chip { left: 17cqw; top: 42cqw; display: flex; align-items: center; gap: 1.2cqw; padding: 1.2cqw 2.4cqw; border-radius: 999px; background: #fff; box-shadow: 0 0.6cqw 2cqw -0.6cqw rgba(30, 40, 80, 0.35); font-size: 2.8cqw; font-weight: 600; opacity: 0; transform: translateY(1cqw); transition: opacity 0.3s, transform 0.3s; }
.gv .chip.on { opacity: 1; transform: none; }
.gv .chip i { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: var(--c); }
.gv .cap2 { left: 17cqw; top: 52cqw; right: 42cqw; font-size: 2.6cqw; color: #5a6178; }
@keyframes blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .shelf .card, .pv .tile, .pv .tg, .gv .slide .box, .gv .chip, .xp-in > * { transition: none; }
}
.xp-ghost { position: fixed; z-index: 42; margin: 0; pointer-events: none; transform-origin: 0 0; transition: none; }
.xp-vis .dot { border-radius: 50%; background: var(--c); pointer-events: none; }
/* the palette button: a swatch of the next palette, and the new palette's name, briefly */
.theme .sw, .palmenu .sw { display: flex; align-items: center; justify-content: center; gap: 2px; width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.5) inset; }
.theme .sw i, .palmenu .sw i { width: 5px; height: 5px; border-radius: 50%; }
/* the color button's dropdown: a short list under the button */
.palmenu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 184px; padding: 5px; border-radius: 14px; display: grid; gap: 1px;
  background: color-mix(in srgb, var(--pb) 90%, var(--pi)); border: 1px solid color-mix(in srgb, var(--pi) 14%, transparent);
  box-shadow: 0 14px 34px -12px var(--psh); transform-origin: top right; }
.palmenu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 10px 6px 6px; border: 0; border-radius: 9px; background: none; color: var(--pi); font: 700 17px/1 var(--f-site); text-align: left; cursor: pointer; }
.palmenu button:hover, .palmenu button:focus-visible { background: color-mix(in srgb, var(--pi) 10%, transparent); outline: none; }
.palmenu .sw { flex: none; width: 24px; height: 24px; gap: 1.5px; }
.palmenu .sw i { width: 4px; height: 4px; }
.palmenu span:not(.sw) { flex: 1; }
.palmenu svg { width: 12px; height: 12px; flex: none; opacity: 0; }
.palmenu [aria-checked="true"] svg { opacity: 1; }
@media (pointer: coarse) { .palmenu button { padding: 9px 12px 9px 8px; } }
/* the Glideshow visual: the card itself; its selected slide opens into the editor beside the deck's HTML */
.xp-vis.gs .tag { transition: opacity 0.35s ease, transform 0.35s ease; }
.xp-vis.gs.editing .tag { opacity: 0; transform: translateY(-2cqw); }
.gx-slide { position: absolute; z-index: 2; background: #fff; border-radius: 0.8cqw; overflow: hidden; container-type: inline-size; box-shadow: 0 1.5cqw 4cqw -1.5cqw rgba(0, 0, 30, 0.6); opacity: 0; }
.gx-bars { position: absolute; inset: 0; background-repeat: no-repeat; background-image: linear-gradient(#1b1f2a, #1b1f2a), linear-gradient(#d9dee8, #d9dee8); background-size: 62% 14%, 42% 8%; background-position: 50% 38%, 50% 64%; transition: opacity 0.3s; }
.gx-title { position: absolute; left: 7%; top: 12%; font: 700 9cqw/1.1 "Hanken Grotesk", system-ui, sans-serif; letter-spacing: -0.02em; color: #1b1f2a; white-space: nowrap; }
.gx-title:not(:empty)::after { content: ""; display: inline-block; width: 0.6cqw; height: 8cqw; margin-left: 0.6cqw; vertical-align: -1cqw; background: #2f6bf2; animation: blink 0.9s steps(1) infinite; }
.gx-box { position: absolute; right: 7%; bottom: 10%; width: 28%; height: 34%; border-radius: 2cqw; background: #ee7a68; transform: scale(0); transition: transform 0.35s cubic-bezier(.3, 1.4, .5, 1); }
.gx-box.on { transform: scale(1); }
.gx-code { position: absolute; z-index: 2; box-sizing: border-box; padding: 2cqw; border-radius: 1.2cqw; background: rgba(8, 10, 30, 0.72); border: 1px solid rgba(255, 255, 255, 0.12); font: 2.05cqw/1.75 ui-monospace, "SF Mono", Menlo, monospace; color: #9aa6d6; white-space: pre; overflow: hidden; opacity: 0; transform: translateX(3cqw); transition: opacity 0.35s, transform 0.35s; }
.gx-code.on { opacity: 1; transform: none; }
.gx-code span { display: block; border-radius: 0.4cqw; transition: background-color 0.4s; }
.gx-code span.new { background: rgba(76, 141, 255, 0.3); color: #fff; }
.gx-chip { position: absolute; z-index: 2; display: flex; align-items: center; gap: 1.2cqw; padding: 1.1cqw 2.4cqw; border-radius: 999px; background: #fff; color: #1b1f2a; font: 600 2.7cqw "Hanken Grotesk", system-ui, sans-serif; box-shadow: 0 0.6cqw 2cqw -0.6cqw rgba(0, 0, 30, 0.5); opacity: 0; transform: translateY(1cqw); transition: opacity 0.3s, transform 0.3s; }
.gx-chip.on { opacity: 1; transform: none; }
.gx-chip i { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; }