/* Homepages (public/homepage.js draws them; homepage-edit.js edits them): the page and its
   pieces, the weather over it, the view in the app, the editor, and the page on its own at
   rainlit.app/@name. */

/* ================= A page ================= */

.hp-page {
  position: relative;
  overflow-x: hidden; overflow-y: auto;
  background-attachment: local; /* (a pattern scrolls with the page, like the old web) */
  overscroll-behavior: contain;
  touch-action: pan-x pan-y; /* (two fingers zoom the page itself: homepage.js) */
}
.hp-page.hp-zoomed { overflow-x: auto; }
.hp-editing .hp-page { touch-action: auto; }
/* The weather and the pieces, in the same place: the weather first, so behind. */
.hp-room { display: grid; min-height: 100%; width: max-content; min-width: 100%; }
.hp-room > * { grid-area: 1 / 1; }
.hp-stage { position: relative; margin: 0 auto; }
.hp-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
/* Zoomed in: back to the whole page. */
.hp-unzoom {
  position: absolute; right: 14px; bottom: 14px; z-index: 5;
  padding: 8px 16px; border: 1px solid #364156; border-radius: 999px;
  background: rgba(14, 18, 28, 0.88); color: #eceaf3;
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}

.hp-piece {
  position: absolute;
  box-sizing: border-box;
  transform-origin: 50% 50%;
  color: inherit; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.hp-piece img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.hp-piece video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
a.hp-piece, .hp-pops { cursor: pointer; }
a.hp-piece:focus-visible, .hp-pops:focus-visible { outline: 3px solid #f5b94a; outline-offset: 3px; }
/* A piece whose sound plays, clicked: a little bounce (homepage.js: playSound). */
.hp-boop { animation: hp-boop 0.28s ease-out; }
@keyframes hp-boop { 40% { scale: 1.08; } }
@media (prefers-reduced-motion: reduce) { .hp-boop { animation: none; } }

/* ----- Text ----- */
.hp-words { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.2; }
.hp-box-note {
  padding: 0.55em 0.7em 0.75em;
  background: var(--c2);
  box-shadow: 0 12px 14px -12px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.18);
}
.hp-box-box { padding: 0.45em 0.7em; background: var(--c2); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }
.hp-box-hazard {
  padding: 0.4em 0.6em;
  background: var(--c2);
  border: 8px solid transparent;
  border-image: repeating-linear-gradient(-45deg, #1a1a1a 0 10px, #ffd23f 10px 20px) 8;
}
.hp-box-bubble { position: relative; padding: 0.55em 0.85em; background: var(--c2); border-radius: 1.1em; }
.hp-box-bubble::after {
  content: ''; position: absolute; left: 1.4em; bottom: -0.6em;
  border: 0.65em solid transparent; border-bottom: 0; border-top-color: var(--c2);
}
.hp-box-label .hp-ink {
  padding: 0.1em 0.45em;
  background: var(--c2);
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hp-box-highlight .hp-ink {
  background: linear-gradient(transparent 52%, var(--c2) 52%, var(--c2) 90%, transparent 90%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

.hp-fx-rainbow .hp-ink {
  background: linear-gradient(90deg, #ff5f8f, #ffa24c, #ffe14d, #6be07e, #57c7ff, #a57bff, #ff5f8f) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: hp-rainbow 4s linear infinite;
}
@keyframes hp-rainbow { to { background-position: 200% 0; } }
.hp-fx-blink .hp-ink { animation: hp-blink 1.1s steps(1) infinite; }
@keyframes hp-blink { 50% { opacity: 0; } }
.hp-fx-marquee { overflow: hidden; white-space: nowrap; }
.hp-fx-marquee .hp-ink { display: inline-block; padding-left: 100%; animation: hp-marquee 10s linear infinite; }
@keyframes hp-marquee { to { transform: translateX(-100%); } }
.hp-fx-wave .hp-ink span { display: inline-block; white-space: pre; animation: hp-wave 1.6s ease-in-out infinite; }
@keyframes hp-wave { 50% { transform: translateY(-0.2em); } }
/* Supporters' extras: a light that sweeps across the words now and then, and a warm glow that breathes. */
.hp-fx-shimmer .hp-ink {
  background: linear-gradient(100deg, var(--ink) 42%, #fffdf2 50%, var(--ink) 58%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: hp-shimmer 3.4s ease-in-out infinite;
}
@keyframes hp-shimmer { 0% { background-position: 100% 0; } 65%, 100% { background-position: 0 0; } }
.hp-fx-lamplight .hp-ink {
  text-shadow: 0 0 0.12em var(--c3), 0 0 0.45em var(--c3), 0 0 0.9em var(--c3);
  animation: hp-lamplight 3.8s ease-in-out infinite;
}
@keyframes hp-lamplight {
  0%, 100% { text-shadow: 0 0 0.1em var(--c3), 0 0 0.35em var(--c3), 0 0 0.7em var(--c3); }
  50% { text-shadow: 0 0 0.16em var(--c3), 0 0 0.6em var(--c3), 0 0 1.3em var(--c3), 0 0 2.2em var(--c3); }
}

/* ----- Pictures (and videos) ----- */
.hp-image, .hp-video { container-type: size; }
.hp-frame-rounded :is(img, video) { border-radius: 9cqmin; }
.hp-frame-circle :is(img, video) { border-radius: 50%; }
.hp-frame-heart :is(img, video) {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 92'%3E%3Cpath d='M50 92 6.8 49.3A27 27 0 0 1 50 11a27 27 0 0 1 43.2 38.3Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 92'%3E%3Cpath d='M50 92 6.8 49.3A27 27 0 0 1 50 11a27 27 0 0 1 43.2 38.3Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.hp-frame-photo { background: #fdfcf8; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.2); }
.hp-frame-photo :is(img, video) { width: calc(100% - 12cqw); height: calc(100% - 6cqw - 22cqh); margin: 6cqw auto 0; }
.hp-caption {
  position: absolute; left: 6cqw; right: 6cqw; bottom: 4cqh;
  font: 400 max(10px, 9cqh) / 1.1 Caveat, cursive; color: #3b3036;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Supporters' extras: a gold frame, and a neon one that buzzes now and then. */
.hp-frame-gilded {
  padding: 10px;
  background: linear-gradient(135deg, #fff1b8 0%, #d9a93e 22%, #fff6cf 45%, #b07a1c 68%, #f3d27a 100%);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1.5px #6e4b0e, inset 0 0 0 4px #f7df8e, inset 0 0 0 5.5px #8a5f14, 0 10px 20px -10px rgba(0, 0, 0, 0.65);
}
.hp-frame-gilded :is(img, video) { box-shadow: 0 0 0 1.5px #5c3f0b, 0 0 0 3px #f5d98a; }
.hp-frame-neon {
  padding: 5px;
  border-radius: 14px;
  background: #12081f;
  box-shadow: 0 0 0 2px #ff6ad5, 0 0 12px 2px rgba(255, 106, 213, 0.9), 0 0 32px 6px rgba(255, 106, 213, 0.45), inset 0 0 12px rgba(255, 106, 213, 0.55);
  animation: hp-neon 6s linear infinite;
}
.hp-frame-neon :is(img, video) { border-radius: 10px; }
@keyframes hp-neon {
  0%, 88%, 92%, 100% { box-shadow: 0 0 0 2px #ff6ad5, 0 0 12px 2px rgba(255, 106, 213, 0.9), 0 0 32px 6px rgba(255, 106, 213, 0.45), inset 0 0 12px rgba(255, 106, 213, 0.55); }
  90% { box-shadow: 0 0 0 2px #a8508f, 0 0 4px 1px rgba(255, 106, 213, 0.4), 0 0 10px 2px rgba(255, 106, 213, 0.2), inset 0 0 4px rgba(255, 106, 213, 0.3); }
}
/* A postage stamp: perforated all round (holes cut into its edge by the second mask). */
.hp-frame-stamp {
  padding: 9px;
  background: #fdfcf8;
  -webkit-mask: linear-gradient(#000 0 0) center / calc(100% - 10px) calc(100% - 10px) no-repeat,
    radial-gradient(circle, transparent 4px, #000 4.6px) -6px -6px / 12px 12px;
          mask: linear-gradient(#000 0 0) center / calc(100% - 10px) calc(100% - 10px) no-repeat,
    radial-gradient(circle, transparent 4px, #000 4.6px) -6px -6px / 12px 12px;
}
.hp-frame-stamp :is(img, video) { outline: 1px solid rgba(0, 0, 0, 0.12); }
/* ----- Old desktops' windows (homepage.js: windowEl): a picture's or a video's frame, or a
   popup. Rain95's grey and bevelled (and Rainscape, its browser, with an address bar), RainXP's
   blue and glossy, Raintosh's pinstriped, its close box on the left, and a plain one. ----- */
.hp-win { display: flex; flex-direction: column; box-sizing: border-box; }
.hp-win-bar { display: flex; align-items: center; flex: none; gap: 2px; user-select: none; }
.hp-win-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-win-knob { flex: none; display: grid; place-items: center; box-sizing: border-box; padding: 0; font-style: normal; }
.hp-win-pane { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #000; }
.hp-win-pane > :is(img, video) { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }

.hp-win-window, .hp-win-browser {
  padding: 3px;
  background: #c3c3c3;
  border: 2px solid; border-color: #ffffff #3c3c3c #3c3c3c #ffffff;
  box-shadow: inset -1px -1px #828282, inset 1px 1px #e3e3e3, 4px 6px 0 rgba(0, 0, 0, 0.25);
}
:is(.hp-win-window, .hp-win-browser) .hp-win-bar {
  height: 22px; padding: 0 3px 0 6px;
  background: linear-gradient(90deg, #0a1f8f, #3c8ee0);
  color: #fff; font: 700 13px/1 "Pixelify Sans", Tahoma, sans-serif;
}
:is(.hp-win-window, .hp-win-browser) .hp-win-title { margin-right: 4px; }
:is(.hp-win-window, .hp-win-browser) .hp-win-knob {
  width: 16px; height: 14px;
  background: #c3c3c3; color: #111; font: 700 10px/1 Tahoma, sans-serif;
  border: 1px solid; border-color: #fff #3c3c3c #3c3c3c #fff;
}
:is(.hp-win-window, .hp-win-browser) .hp-win-close { margin-left: 2px; }
:is(.hp-win-window, .hp-win-browser) .hp-win-pane { margin-top: 3px; border: 2px solid; border-color: #828282 #fff #fff #828282; }
.hp-win-tools {
  display: flex; align-items: center; gap: 3px; flex: none;
  margin-top: 3px; padding: 2px 1px 3px;
  border-bottom: 1px solid #828282; box-shadow: 0 1px #fff;
}
.hp-win-tools b {
  display: grid; place-items: center; flex: none; width: 22px; height: 18px; box-sizing: border-box;
  color: #3c3c3c; font: 9px/1 Tahoma, sans-serif;
  border: 1px solid; border-color: #fff #3c3c3c #3c3c3c #fff;
}
.hp-win-address {
  flex: 1; min-width: 0; height: 19px; box-sizing: border-box; padding: 0 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: #fff; color: #111; font: 11px/15px Tahoma, Verdana, sans-serif;
  border: 2px solid; border-color: #828282 #fff #fff #828282;
}

.hp-win-xp {
  padding: 0 3px 3px;
  background: linear-gradient(#0d47e8, #0831d9);
  border-radius: 8px 8px 0 0;
  box-shadow: inset 1px 0 #3d7bff, inset -1px 0 #001ea0, 0 6px 18px rgba(0, 0, 0, 0.35);
}
.hp-win-xp .hp-win-bar {
  height: 28px; padding: 0 2px 0 6px; gap: 2px;
  margin: 0 -3px; border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #3d8dff 0%, #0b5ff0 10%, #0058e6 38%, #0a63f5 72%, #0049d0 90%, #003cb8 100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
  color: #fff; font: 700 13px/1 "Trebuchet MS", Tahoma, sans-serif; text-shadow: 1px 1px #0b2c8f;
}
.hp-win-xp .hp-win-title { margin-right: 4px; }
.hp-win-xp .hp-win-knob {
  width: 21px; height: 21px; border: 1px solid #fff; border-radius: 3px;
  background: linear-gradient(135deg, #6c9dff 0%, #2560e8 45%, #1747c8 100%);
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.45), inset -1px -1px 1px rgba(0, 0, 0, 0.2);
  color: #fff; font: 700 12px/1 Tahoma, sans-serif; text-shadow: none;
}
.hp-win-xp .hp-win-close { background: linear-gradient(135deg, #f5a588 0%, #e05a3a 45%, #c23516 100%); font-size: 15px; }
.hp-win-xp .hp-win-pane { border: 1px solid #001ea0; }

.hp-win-mac {
  padding: 0 4px 4px;
  background: #dddddd;
  border: 1px solid #222;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #9a9a9a, 3px 3px 0 rgba(0, 0, 0, 0.3);
}
.hp-win-mac .hp-win-bar {
  height: 20px; gap: 6px; padding: 0 2px;
  background: repeating-linear-gradient(#e8e8e8 0 1px, #9a9a9a 1px 2px) center / 100% 11px no-repeat;
  color: #111; font: 700 12px/1 Charcoal, Chicago, "Pixelify Sans", Geneva, sans-serif;
}
.hp-win-mac .hp-win-title { flex: 0 1 auto; margin: 0 auto; padding: 0 7px; background: #dddddd; }
.hp-win-mac .hp-win-min { display: none; }
.hp-win-mac .hp-win-close { order: -1; }
.hp-win-mac .hp-win-knob {
  width: 13px; height: 13px; padding: 0; overflow: hidden;
  color: transparent; font-size: 0;
  background: linear-gradient(135deg, #8f8f8f, #ffffff); border: 1px solid #222;
  box-shadow: 0 0 0 2px #dddddd;
}
.hp-win-mac .hp-win-pane { border: 1px solid #222; box-shadow: 1px 1px 0 #fff; }

.hp-win-plain {
  padding: 0 6px 6px;
  background: #1d2130;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.hp-win-plain .hp-win-bar { height: 32px; padding: 0 0 0 6px; color: #e8e6f0; font: 600 13px/1 system-ui, sans-serif; }
.hp-win-plain .hp-win-min, .hp-win-plain .hp-win-max { display: none; }
.hp-win-plain .hp-win-knob {
  width: 24px; height: 24px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12); color: #fff; font: 600 17px/1 system-ui, sans-serif;
}
.hp-win-plain .hp-win-pane { border-radius: 8px; }

/* A video's button (homepage.js: videoPiece): its sound off, on, or (for someone who'd rather
   things didn't move) play. */
.hp-video-sound {
  position: absolute; right: 6px; bottom: 6px; z-index: 2;
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(12, 14, 24, 0.62) center / 17px no-repeat;
  cursor: pointer; opacity: 0.88;
}
.hp-video-sound:hover, .hp-video-sound:focus-visible { opacity: 1; }
.hp-video-sound:focus-visible { outline: 2px solid #f5b94a; outline-offset: 2px; }
.hp-sound-off { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4V5Z' fill='%23fff'/%3E%3Cpath d='m22 9-6 6M16 9l6 6'/%3E%3C/svg%3E"); }
.hp-sound-on { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4V5Z' fill='%23fff'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M19 5a10 10 0 0 1 0 14'/%3E%3C/svg%3E"); }
.hp-sound-play { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4v16l13-8Z' fill='%23fff'/%3E%3C/svg%3E"); background-position: 55% center; }

/* ----- Videos that pop up (homepage.js: popVideo): over the page, somewhere, till they're
   closed. ----- */
/* A window as a swatch (homepage.js: windowSwatch; the editor's, for a video that pops up): drawn
   twice as big as it shows, then halved, so it's as it'd be. */
.hp-win-swatch { position: relative; display: block; width: 104px; height: 70px; overflow: hidden; pointer-events: none; }
.hp-win-swatch > .hp-win { position: absolute; left: 3px; top: 2px; width: 192px; height: 124px; transform: scale(0.5); transform-origin: 0 0; text-align: left; }
.hp-win-swatch .hp-win-pane { display: grid; place-items: center; background: linear-gradient(160deg, #3a6db5, #13223f); }
.hp-win-swatch .hp-win-pane > i { color: #fff; font: normal 30px/1 system-ui, sans-serif; opacity: 0.9; }
.hp-swatch:has(.hp-win-swatch) { width: auto; height: auto; padding: 3px 3px 5px; }

.hp-popup { position: absolute; left: 0; top: 0; z-index: 20; animation: hp-pop 0.18s ease-out; }
.hp-popup :is(.hp-win-bar, .hp-win-tools) { contain: inline-size; }
.hp-popup .hp-win-bar { cursor: grab; touch-action: none; }
.hp-popup .hp-win-pane { flex: none; }
.hp-popup .hp-win-pane > video { object-fit: contain; cursor: pointer; }
.hp-popup button.hp-win-close { cursor: pointer; }
.hp-popup:is(.hp-win-window, .hp-win-browser) button.hp-win-close:active { border-color: #3c3c3c #fff #fff #3c3c3c; }
.hp-popup.hp-win-xp button.hp-win-close:hover { filter: brightness(1.12); }
.hp-popup.hp-win-mac button.hp-win-close:active { background: #555; }
.hp-popup button.hp-win-close:focus-visible { outline: 2px solid #f5b94a; outline-offset: 1px; }
.hp-popup-paused .hp-win-pane::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%;
  background: rgba(12, 14, 24, 0.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4v16l13-8Z' fill='%23fff'/%3E%3C/svg%3E") 56% center / 26px no-repeat;
  pointer-events: none;
}
@keyframes hp-pop { from { transform: scale(0.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hp-popup { animation: none; } }

/* ----- An old desktop's taskbar (homepage.js: taskbarPiece): sized by its height. ----- */
.hp-taskbar {
  container-type: size;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 6cqh 0 5cqh; overflow: hidden; user-select: none;
}
.hp-taskbar-start { display: flex; align-items: center; gap: 10cqh; height: 76cqh; box-sizing: border-box; padding: 0 16cqh 0 8cqh; white-space: nowrap; }
.hp-taskbar-start img { height: 64cqh; width: auto; }
.hp-taskbar-clock { display: flex; align-items: center; height: 70cqh; box-sizing: border-box; padding: 0 16cqh; white-space: nowrap; }
.hp-taskbar-window { background: #c3c3c3; box-shadow: inset 0 2px #fff, inset 0 3px #e3e3e3; }
.hp-taskbar-window .hp-taskbar-start {
  color: #111; font: 700 46cqh/1 Tahoma, "Pixelify Sans", sans-serif;
  border: 2px solid; border-color: #fff #3c3c3c #3c3c3c #fff; box-shadow: inset -1px -1px #828282;
}
.hp-taskbar-window .hp-taskbar-clock { color: #111; font: 42cqh/1 Tahoma, sans-serif; border: 1px solid; border-color: #828282 #fff #fff #828282; }
.hp-taskbar-xp { padding: 0; background: linear-gradient(180deg, #3168d5 0%, #4993e6 6%, #2157d7 18%, #2663e0 60%, #1941a5 100%); }
.hp-taskbar-xp .hp-taskbar-start {
  height: 100%; padding: 0 26cqh 0 14cqh;
  color: #fff; font: italic 700 54cqh/1 "Trebuchet MS", Tahoma, sans-serif; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  background: linear-gradient(180deg, #3c9a3c 0%, #63c863 12%, #3aa03a 40%, #2e8a2e 85%, #276e27 100%);
  border-radius: 0 40cqh 40cqh 0; box-shadow: inset -2px 0 3px rgba(0, 0, 0, 0.35);
}
.hp-taskbar-xp .hp-taskbar-clock {
  height: 100%; padding: 0 18cqh;
  color: #fff; font: 42cqh/1 Tahoma, sans-serif;
  background: linear-gradient(180deg, #0f8ef0 0%, #19a7f7 10%, #0d8be8 50%, #0a7ad9 100%);
  box-shadow: inset 1px 0 #36b6ff, -1px 0 #0b5ea8;
}

/* ----- Stickers ----- */
.hp-sticker img { object-fit: contain; }
.hp-sticker .hp-pixel { image-rendering: pixelated; }
.hp-emoji {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
/* The white edge of a sticker cut out of a sheet. */
.hp-cut {
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff)
    drop-shadow(0 4px 4px rgba(0, 0, 0, 0.3));
}
.hp-gone { display: none; }

/* ----- Paper ----- */
.hp-paper { box-shadow: 0 12px 22px -14px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.14); }
.hp-paper-sticky { box-shadow: 0 16px 16px -14px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.14); }
.hp-paper-torn { box-shadow: none; }

/* ----- About me ----- */
.hp-me { container-type: size; }
.hp-me-in {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4cqh;
  width: 100%; height: 100%;
  text-align: center;
  color: var(--card);
}
.hp-me-card .hp-me-in {
  padding: 7cqmin;
  background: var(--card); color: var(--card-ink);
  border-radius: 6cqmin;
  box-shadow: 0 14px 26px -16px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.2);
}
.hp-avatar {
  position: relative; display: grid; place-items: center; flex: none;
  width: 50cqmin; height: 50cqmin;
  border-radius: 50%;
  overflow: hidden;
  color: #fff; font: 700 22cqmin/1 "Bricolage Grotesque", sans-serif;
}
.hp-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hp-me-sticker .hp-avatar { width: 56cqmin; height: 56cqmin; box-shadow: 0 0 0 3cqmin #fff, 0 6px 14px 3cqmin rgba(0, 0, 0, 0.25); }
.hp-me-words { display: grid; gap: 0.6cqh; max-width: 100%; min-width: 0; }
.hp-me-name { font-size: 11cqmin; line-height: 1.1; overflow-wrap: anywhere; }
.hp-me-handle { font-size: 6cqmin; opacity: 0.7; }
.hp-me-status { margin-top: 1cqh; font-size: 6cqmin; opacity: 0.85; overflow-wrap: anywhere; }
.hp-me-plain .hp-me-in { flex-direction: row; justify-content: flex-start; gap: 6cqw; text-align: left; }
.hp-me-plain .hp-avatar { width: 80cqh; height: 80cqh; font-size: 36cqh; }
.hp-me-plain .hp-me-name { font-size: 22cqh; }
.hp-me-plain .hp-me-handle, .hp-me-plain .hp-me-status { font-size: 12cqh; }

/* ================= Old-web touches ================= */

/* (Counters and music players size everything by the piece: see .hp-in.) */
.hp-counter, .hp-music { container-type: size; }
.hp-in { position: relative; display: flex; width: 100%; height: 100%; box-sizing: border-box; }

/* ----- The visitor counter ----- */
.hp-counter .hp-in { flex-direction: column; align-items: center; justify-content: center; gap: 5cqh; }
.hp-digits { display: flex; gap: 1.4cqw; }
.hp-counter-odometer .hp-digits span {
  display: grid; place-items: center;
  width: 11.5cqw; height: 60cqh;
  background: linear-gradient(#161616, #3b3b3b 50%, #121212 50%, #2b2b2b);
  border-radius: 1.6cqw;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 3px 5px rgba(0, 0, 0, 0.4);
  color: #fff; font: 700 42cqh/1 "Times New Roman", Times, serif;
}
.hp-counter-led .hp-in { background: #0a0d0a; border: 3px solid #2e2e2e; border-radius: 8px; box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.9); }
.hp-counter-led .hp-digits span { font: 400 58cqh/0.85 VT323, monospace; color: var(--tint); text-shadow: 0 0 0.12em var(--tint), 0 0 0.3em var(--tint); }
.hp-counter-plain .hp-digits { gap: 0; }
.hp-counter-plain .hp-digits span { font: 700 52cqh/1 "Times New Roman", Times, serif; color: var(--tint); }
.hp-count-label { font: 400 17cqh/1 "Pixelify Sans", monospace; color: var(--tint); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }

/* ----- The guestbook (and the "ask me anything" box, which looks like it) ----- */
.hp-guestbook, .hp-ask { display: flex; flex-direction: column; overflow: hidden; color: var(--gb-ink); }
.hp-guestbook-paper, .hp-ask-paper {
  padding: 14px 16px 12px;
  background: var(--gb) repeating-linear-gradient(transparent 0 25px, rgba(74, 120, 181, 0.2) 25px 26px);
  border-radius: 2px;
  box-shadow: 0 12px 22px -14px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.14);
}
.hp-guestbook-retro, .hp-ask-retro {
  padding: 8px;
  background: #c3c3c3; color: #000;
  border: 2px solid; border-color: #fff #3c3c3c #3c3c3c #fff;
  font-family: "Times New Roman", Times, serif;
}
.hp-guestbook-retro .hp-gb-title, .hp-ask-retro .hp-gb-title { color: #000080; font-weight: 700; }
.hp-guestbook-retro .hp-gb-list li, .hp-ask-retro .hp-gb-list li { background: #fff; border: 1px solid #828282; border-radius: 0; }
.hp-guestbook-dark, .hp-ask-dark {
  padding: 14px;
  background: var(--gb); color: var(--gb-ink);
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 14px;
  box-shadow: 0 14px 28px -16px rgba(0, 0, 0, 0.8);
}
.hp-guestbook-dark .hp-gb-list li, .hp-ask-dark .hp-gb-list li { background: rgba(255, 255, 255, 0.07); }
.hp-gb-title { flex: none; margin-bottom: 8px; font-size: 26px; line-height: 1.1; text-align: center; overflow-wrap: anywhere; }
.hp-gb-list { flex: 1; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 8px; margin: 0; padding: 0; list-style: none; overscroll-behavior: contain; }
.hp-gb-list li {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px;
  padding: 7px 10px 8px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 8px;
  font-size: 15px;
}
.hp-gb-who { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 700; font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hp-gb-who .hp-avatar { width: 22px; height: 22px; font-size: 11px; }
.hp-gb-list time { font-size: 12px; opacity: 0.65; }
.hp-gb-list p { grid-column: 1 / -1; margin: 0; line-height: 1.3; white-space: pre-wrap; overflow-wrap: anywhere; }
.hp-gb-delete {
  position: absolute; right: 6px; bottom: 4px;
  padding: 0 4px; border: 0; background: none; color: inherit; opacity: 0.55;
  font-size: 13px; cursor: pointer;
}
.hp-gb-delete:hover, .hp-gb-delete[data-sure] { opacity: 1; color: #c2263e; }
.hp-gb-list .hp-gb-empty { display: block; background: none; font-style: italic; opacity: 0.7; text-align: center; }
.hp-gb-foot { flex: none; display: flex; justify-content: center; padding-top: 10px; }
.hp-gb-foot:empty { display: none; }
.hp-gb-sign {
  padding: 7px 18px;
  border: 2px solid currentColor; border-radius: 999px;
  background: transparent; color: inherit;
  font: 700 15px/1 "Pixelify Sans", sans-serif; text-decoration: none;
  cursor: pointer;
}
.hp-gb-sign:hover { background: rgba(127, 127, 127, 0.15); }

/* Signing one. */
.hp-sign {
  width: min(420px, calc(100% - 32px));
  padding: 0;
  background: #20293a; color: #eceaf3;
  border: 1px solid #364156; border-radius: 16px;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
}
.hp-sign::backdrop { background: rgba(8, 11, 18, 0.6); }
.hp-sign form { display: grid; gap: 12px; padding: 18px 20px 20px; }
.hp-sign h2 { margin: 0; font-size: 18px; }
.hp-sign textarea {
  width: 100%; min-height: 110px; box-sizing: border-box;
  padding: 10px 12px;
  background: #0e121c; color: inherit;
  border: 1px solid #364156; border-radius: 10px;
  font: inherit; resize: vertical;
}
.hp-sign-row { display: flex; justify-content: flex-end; gap: 10px; }
.hp-sign-cancel { padding: 8px 10px; background: none; border: 0; color: #a9b4c8; font: inherit; font-weight: 600; cursor: pointer; }
.hp-sign-send { padding: 10px 16px; background: #f5b94a; color: #22190a; border: 0; border-radius: 10px; font: inherit; font-weight: 700; cursor: pointer; }
.hp-sign-error { margin: 0; color: #ffb4ae; font-size: 14px; }

/* ----- The "ask me anything" box ----- */
/* (A question, then its answer, set in from it; one waiting for an answer has a dashed edge.) */
.hp-ask-list li { padding-bottom: 9px; }
.hp-ask-list .hp-ask-waiting { background: transparent; outline: 2px dashed rgba(127, 127, 127, 0.55); outline-offset: -2px; }
.hp-ask-retro .hp-ask-list .hp-ask-waiting { background: #ececec; border-style: dashed; outline: 0; }
.hp-avatar.hp-anon { background: #7a7590; }
.hp-ask-list .hp-ask-q { font-weight: 650; }
.hp-ask-list .hp-ask-a { margin-top: 5px; padding-left: 10px; border-left: 3px solid rgba(127, 127, 127, 0.45); }
.hp-ask-tools { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 6px; padding-right: 54px; }
.hp-ask-tool {
  padding: 0; background: none; border: 0; color: inherit;
  font: inherit; font-size: 13px; font-weight: 650; text-decoration: underline; text-underline-offset: 2px;
  opacity: 0.8; cursor: pointer;
}
.hp-ask-tool:hover { opacity: 1; }
.hp-ask-tool.main {
  padding: 4px 12px;
  border: 2px solid currentColor; border-radius: 999px;
  text-decoration: none; opacity: 1;
}
.hp-ask-tool.main:hover { background: rgba(127, 127, 127, 0.15); }
.hp-ask-wait { font-size: 12px; font-style: italic; opacity: 0.7; }
/* Asking one, or answering it. */
.hp-write-quote {
  margin: 0; padding: 8px 12px;
  background: #0e121c; border-left: 3px solid #f5b94a; border-radius: 6px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.hp-write-quote[hidden], .hp-write-check[hidden], .hp-write-note[hidden] { display: none; }
.hp-write-check { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.hp-write-check input { width: 18px; height: 18px; margin: 0; accent-color: #f5b94a; }
.hp-write-note { margin: -4px 0 0; color: #a9b4c8; font-size: 14px; }

/* ----- The music player ----- */
.hp-music .hp-in { align-items: center; gap: 4cqw; }
.hp-play {
  display: grid; place-items: center; flex: none;
  width: 64cqh; height: 64cqh; padding: 0;
  background: var(--tint); color: #1b1628;
  border: 0; border-radius: 50%;
  cursor: pointer;
}
.hp-play::before {
  content: '';
  margin-left: 5cqh;
  border-left: 20cqh solid currentColor; border-top: 12cqh solid transparent; border-bottom: 12cqh solid transparent;
}
.hp-playing .hp-play::before { width: 19cqh; height: 22cqh; margin: 0; border: 0; background: linear-gradient(90deg, currentColor 34%, transparent 34% 66%, currentColor 66%); }
.hp-song { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; font: 600 30cqh/1.2 "Pixelify Sans", sans-serif; }
/* The song's name, and under it how loud it is (app: homepage.js, setSongVolume). */
.hp-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4cqh; }
.hp-mid .hp-song { flex: none; }
.hp-vol {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: max(12px, 16cqh); margin: 0; padding: 0;
  background: transparent; cursor: pointer;
  --track: max(3px, 5cqh); --knob: max(11px, 16cqh);
}
.hp-vol::-webkit-slider-runnable-track {
  height: var(--track); border-radius: 999px;
  background: linear-gradient(90deg, var(--tint) var(--vol, 10%), color-mix(in srgb, var(--tint) 28%, transparent) var(--vol, 10%));
}
.hp-vol::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: var(--knob); height: var(--knob); margin-top: calc((var(--track) - var(--knob)) / 2);
  background: #fff; border: 2px solid var(--tint); border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.hp-vol::-moz-range-track { height: var(--track); border-radius: 999px; background: color-mix(in srgb, var(--tint) 28%, transparent); }
.hp-vol::-moz-range-progress { height: var(--track); border-radius: 999px; background: var(--tint); }
.hp-vol::-moz-range-thumb { box-sizing: border-box; width: var(--knob); height: var(--knob); background: #fff; border: 2px solid var(--tint); border-radius: 50%; }
.hp-vol:focus-visible { outline: 2px solid var(--tint); outline-offset: 3px; border-radius: 999px; }
.hp-vol:disabled { pointer-events: none; }
.hp-song span { display: inline-block; }
.hp-playing .hp-song span { animation: hp-song 10s linear infinite alternate; }
@keyframes hp-song { 0%, 15% { transform: translateX(0); } 85%, 100% { transform: translateX(min(0px, calc(-100% + 40cqw))); } }
.hp-bars { display: flex; align-items: flex-end; gap: 2.4cqh; flex: none; height: 42cqh; }
.hp-bars i { width: 4.6cqh; height: 30%; background: var(--tint); border-radius: 2px; }
.hp-playing .hp-bars i { animation: hp-eq 0.9s ease-in-out infinite; }
.hp-playing .hp-bars i:nth-child(2) { animation-delay: -0.3s; }
.hp-playing .hp-bars i:nth-child(3) { animation-delay: -0.6s; }
.hp-playing .hp-bars i:nth-child(4) { animation-delay: -0.15s; }
.hp-playing .hp-bars i:nth-child(5) { animation-delay: -0.45s; }
.hp-playing .hp-bars i:nth-child(6) { animation-delay: -0.75s; }
.hp-playing .hp-bars i:nth-child(7) { animation-delay: -0.2s; }
@keyframes hp-eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }
/* Playing: the bars go with the song itself (homepage.js: visualize), and the player glows with
   it, so it's easy to find; without the song to listen to, the glow breathes. */
.hp-live .hp-bars i { animation: none; transition: height 70ms linear; }
.hp-music.hp-playing .hp-in { filter: drop-shadow(0 0 calc(3px + var(--level, 0.35) * 16px) color-mix(in srgb, var(--tint) 80%, transparent)); }
.hp-music.hp-playing:not(.hp-live) .hp-in { animation: hp-glow 1.8s ease-in-out infinite; }
@keyframes hp-glow { 50% { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--tint) 85%, transparent)); } }
.hp-music-tunebox .hp-in {
  padding: 0 6cqw 0 18cqh;
  background: linear-gradient(#2e2545, #19142a); color: #fff;
  border: 2px solid var(--tint); border-radius: 999px;
  box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.65);
}
.hp-music-cassette .hp-in {
  flex-direction: column; align-items: center; justify-content: center; gap: 7cqh;
  padding: 8cqh 9cqw;
  background: #2b2233; color: #2b2233;
  border-radius: 5cqh;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.08), 0 10px 18px -10px rgba(0, 0, 0, 0.7);
}
.hp-music-cassette .hp-song {
  flex: none; width: 100%;
  padding: 2cqh 3cqw;
  background: #fff8e8; border-top: 5cqh solid var(--tint); border-radius: 2cqh;
  font: 400 15cqh/1.2 Caveat, cursive; text-align: center;
}
.hp-reels { display: flex; align-items: center; gap: 5cqw; padding: 3cqh 8cqw; background: rgba(255, 255, 255, 0.08); border-radius: 999px; }
.hp-music-cassette .hp-bars { justify-content: center; width: 12cqw; height: 18cqh; gap: 1.5cqh; }
.hp-music-cassette .hp-bars i { width: 2.4cqh; }
.hp-music-cassette .hp-vol { position: absolute; left: 9cqw; right: calc(5cqw + 22cqh + 4cqw); bottom: 6cqh; width: auto; height: max(12px, 10cqh); --track: max(3px, 2.6cqh); --knob: max(10px, 7.5cqh); }
.hp-reels > i {
  width: 26cqh; height: 26cqh;
  background: repeating-conic-gradient(#f4efe6 0 30deg, #b9b2a6 30deg 60deg);
  border: 3cqh solid #0e0b12; border-radius: 50%;
}
.hp-playing .hp-reels > i { animation: hp-spin 2.4s linear infinite; }
@keyframes hp-spin { to { transform: rotate(360deg); } }
.hp-music-cassette .hp-play { position: absolute; right: 5cqw; bottom: 6cqh; width: 22cqh; height: 22cqh; }
.hp-music-cassette .hp-play::before { margin-left: 2cqh; border-left-width: 8cqh; border-top-width: 5cqh; border-bottom-width: 5cqh; }
.hp-music-cassette.hp-playing .hp-play::before { width: 8cqh; height: 9cqh; }
.hp-music-plain .hp-in { gap: 3cqw; color: var(--tint); }
.hp-music-plain .hp-song { font: 700 38cqh/1.2 "Times New Roman", Times, serif; }
.hp-music-plain .hp-play { width: 70cqh; height: 70cqh; }

/* ----- Shelves ----- */
/* Covers stand on the plank (its top is at 72% of the piece's height), their tags hang under it.
   Each one's as wide as its cover or its name, whichever's wider, while there's room; on a full
   shelf the room's shared out evenly (what one doesn't need goes to the rest), covers get smaller
   to fit, and names take two lines, then end in "...". */
.hp-shelf, .hp-button { container-type: size; }
.hp-shelf-row {
  position: absolute; left: 3cqw; right: 3cqw; top: 3cqh; bottom: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, max-content);
  align-items: start; justify-content: center; gap: 3cqw;
}
.hp-shelf-item { display: flex; flex-direction: column; align-items: center; min-width: 0; color: inherit; text-decoration: none; }
.hp-cover { display: flex; align-items: flex-end; justify-content: center; height: 69cqh; max-width: 100%; }
.hp-cover img {
  width: auto; height: auto; max-height: 100%; max-width: min(24cqw, 100%);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25), 0 8px 14px -8px rgba(0, 0, 0, 0.7);
  border-radius: 2px;
}
a.hp-shelf-item:hover .hp-cover img { transform: translateY(-3px); transition: transform 0.15s; }
.hp-tag {
  position: relative; z-index: 1; /* (in front of the shelf's brackets) */
  align-self: stretch; box-sizing: border-box;
  margin-top: 9cqh; padding: 1.5cqh 1.5cqw;
  background: #fff4d2; color: #3b2f25;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  font: 400 max(9px, 8cqh)/1 "Pixelify Sans", sans-serif; text-align: center;
  overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.hp-tag:empty { visibility: hidden; }
.hp-no-tags .hp-tag { display: none; }
.hp-shelf-hint { align-self: center; margin-top: 20cqh; padding: 2cqh 4cqw; background: rgba(255, 255, 255, 0.85); color: #3b2f25; border-radius: 999px; font: 600 max(11px, 9cqh)/1.2 "Bricolage Grotesque", sans-serif; }
.hp-plank { position: absolute; left: 0; right: 0; top: 72cqh; height: 7cqh; }
.hp-shelf-wood .hp-plank {
  background: linear-gradient(#d39a5e, #a86a3d 40%, #7d4b27);
  border-radius: 2px;
  box-shadow: 0 8px 12px -6px rgba(0, 0, 0, 0.6);
}
.hp-shelf-wood .hp-plank::before, .hp-shelf-wood .hp-plank::after {
  content: ''; position: absolute; top: 100%; width: 3cqw; height: 9cqh;
  background: linear-gradient(90deg, #7d4b27, #5e3620);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.hp-shelf-wood .hp-plank::before { left: 8%; transform: scaleX(-1); }
.hp-shelf-wood .hp-plank::after { right: 8%; }
.hp-shelf-glass .hp-plank {
  background: linear-gradient(rgba(255, 255, 255, 0.75), rgba(200, 230, 255, 0.35));
  border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 3px;
  box-shadow: 0 10px 14px -8px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
}
.hp-shelf-pixel .hp-plank {
  background: linear-gradient(#e2f1ff 0 22%, #9cc2e2 22% 78%, #6f94b8 78%);
  box-shadow: 0 4px 0 rgba(20, 30, 60, 0.35);
}
.hp-shelf-pixel .hp-cover img { image-rendering: auto; border-radius: 0; }
.hp-shelf-white .hp-plank { background: #fbfbfb; border-radius: 2px; box-shadow: 0 1px 0 #ddd, 0 10px 14px -8px rgba(0, 0, 0, 0.35); }

/* ----- Friend buttons (88x31s) ----- */
.hp-button .hp-in {
  align-items: center; justify-content: center; gap: 4cqw;
  padding: 0 5cqw;
  background: var(--b1); color: var(--b2);
  overflow: hidden;
}
.hp-button .hp-in img { flex: none; height: 64cqh; width: auto; image-rendering: pixelated; }
.hp-button-words {
  min-width: 0;
  font-size: 34cqh; line-height: 1; text-align: center; white-space: pre; letter-spacing: 0.02em;
  text-shadow: 0.06em 0.06em 0 rgba(0, 0, 0, 0.45);
}
.hp-button-words.two { font-size: 27cqh; line-height: 1.05; }
.hp-button-bevel .hp-in { border: 2px solid; border-color: rgba(255, 255, 255, 0.75) rgba(0, 0, 0, 0.6) rgba(0, 0, 0, 0.6) rgba(255, 255, 255, 0.75); }
.hp-button-shiny .hp-in {
  background: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.12) 49%, transparent 50%), var(--b1);
  border: 1px solid rgba(0, 0, 0, 0.45); border-radius: 3px;
}
.hp-button-stripes .hp-in {
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0 4px, transparent 4px 8px), var(--b1);
  border: 1px solid rgba(0, 0, 0, 0.5);
}
.hp-button-dark .hp-in { background: #0b0b10; color: var(--b1); border: 1px solid var(--b1); }
.hp-button-dark .hp-button-words { text-shadow: 0 0 0.3em var(--b1); }
a.hp-button:hover .hp-in { filter: brightness(1.12); }

/* ================= Weather on a page ================= */
/* (Behind everything on the page, and always in view as it scrolls: homepage.js.) */

.hp-sky { position: sticky; top: 0; left: 0; align-self: start; justify-self: start; overflow: hidden; pointer-events: none; } /* (sized to the view: homepage.js) */
/* A scene (homepage-scenes.js): in view like the weather, behind it. */
.hp-scene { display: block; position: sticky; top: 0; left: 0; align-self: start; justify-self: start; pointer-events: none; }
.hp-scene-swatch canvas { display: block; width: 100%; height: 100%; border-radius: inherit; }
.hp-swatch-name { display: block; margin-top: 3px; font-size: 11px; font-weight: 600; text-align: center; white-space: nowrap; }
.hp-pattern-swatch.hp-scene-swatch { width: 96px; height: 60px; }
.hp-swatch:has(.hp-scene-swatch) { width: auto; height: auto; padding: 3px 3px 5px; }
.hp-sky-none { display: none; }
/* (Every loop here is in step with the page's clock: --phase, set as each is made (homepage.js
   setSky, patternLayer), so one drawn again (a list's rows, as anything changes) carries on where
   the last left off, rather than jumping back to its start.) */
.hp-sky::before, .hp-sky::after { content: ''; position: absolute; left: 0; right: 0; will-change: transform; }
.hp-sky-rain::before, .hp-sky-rain::after {
  top: -200px; height: calc(100% + 200px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='200'%3E%3Cg stroke='%23cfe3ff' stroke-width='1.4' stroke-linecap='round' opacity='.55'%3E%3Cpath d='M20 10l-3 18M70 60l-3 18M130 30l-3 18M160 120l-3 18M40 140l-3 18M100 170l-3 18M110 95l-3 18'/%3E%3C/g%3E%3C/svg%3E");
  animation: hp-fall 0.8s linear var(--phase, 0s) infinite;
}
.hp-sky-rain::after { opacity: 0.55; background-size: 90px 100px; animation-duration: 1.25s; } /* (a tile that falls whole: 200 a loop) */
.hp-sky-snow::before, .hp-sky-snow::after {
  top: -200px; height: calc(100% + 200px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cg fill='%23ffffff' opacity='.85'%3E%3Ccircle cx='20' cy='30' r='3'/%3E%3Ccircle cx='90' cy='80' r='2'/%3E%3Ccircle cx='160' cy='20' r='2.5'/%3E%3Ccircle cx='130' cy='150' r='3'/%3E%3Ccircle cx='50' cy='170' r='2'/%3E%3Ccircle cx='190' cy='110' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
  animation: hp-fall 9s linear var(--phase, 0s) infinite;
}
.hp-sky-snow::after { opacity: 0.6; background-size: 100px 100px; animation-duration: 14s; }
.hp-sky-sparkles::before, .hp-sky-sparkles::after {
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='270'%3E%3Cpath fill='%23fff6c9' transform='translate(28 34) scale(1)' d='M0 -8l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3Cpath fill='%23ffffff' transform='translate(146 20) scale(0.6)' d='M0 -8l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3Cpath fill='%23fff6c9' transform='translate(238 70) scale(1.1)' d='M0 -8l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3Cpath fill='%23ffe08a' transform='translate(88 122) scale(0.75)' d='M0 -8l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3Cpath fill='%23ffffff' transform='translate(200 158) scale(0.55)' d='M0 -8l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3Cpath fill='%23fff6c9' transform='translate(40 214) scale(0.9)' d='M0 -8l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3Cpath fill='%23ffe08a' transform='translate(156 236) scale(1.2)' d='M0 -8l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3Cpath fill='%23ffffff' transform='translate(272 212) scale(0.65)' d='M0 -8l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3Cpath fill='%23fff6c9' transform='translate(118 74) scale(0.45)' d='M0 -8l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3C/svg%3E");
  animation: hp-twinkle 2.4s ease-in-out var(--phase, 0s) infinite;
}
/* (Another lot, scattered differently, so they never line up.) */
.hp-sky-sparkles::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='370' height='330'%3E%3Cpath fill='%23ffffff' transform='translate(62 58) scale(0.7)' d='M0 -8l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3Cpath fill='%23ffe08a' transform='translate(300 30) scale(0.9)' d='M0 -8l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3Cpath fill='%23fff6c9' transform='translate(190 112) scale(1.15)' d='M0 -8l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3Cpath fill='%23fff6c9' transform='translate(18 170) scale(0.5)' d='M0 -8l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3Cpath fill='%23ffffff' transform='translate(336 196) scale(0.8)' d='M0 -8l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3Cpath fill='%23fff6c9' transform='translate(110 258) scale(0.95)' d='M0 -8l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3Cpath fill='%23ffe08a' transform='translate(244 290) scale(0.6)' d='M0 -8l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3Cpath fill='%23ffffff' transform='translate(232 202) scale(0.4)' d='M0 -8l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3C/svg%3E"); animation-delay: calc(var(--phase, 0s) - 1.2s); }
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='220'%3E%3Cg fill='%23fff6c9'%3E%3Cpath d='M30 20l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3Cpath d='M170 90l1.6 4.4 4.4 1.6-4.4 1.6-1.6 4.4-1.6-4.4-4.4-1.6 4.4-1.6z'/%3E%3Cpath d='M90 170l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3C/g%3E%3C/svg%3E");
  animation: hp-twinkle 2.4s ease-in-out var(--phase, 0s) infinite;
}
.hp-sky-sparkles::after { background-position: 120px 110px; animation-delay: calc(var(--phase, 0s) - 1.2s); }
.hp-sky-hearts::before, .hp-sky-hearts::after {
  top: 0; height: calc(100% + 240px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='240'%3E%3Cg fill='%23ff8cc6' opacity='.7'%3E%3Cpath d='M40 60 30.3 50.4a6 6 0 0 1 9.7-6.9 6 6 0 0 1 9.7 6.9Z'/%3E%3Cpath d='M160 170l-7-7a4.4 4.4 0 0 1 7-5 4.4 4.4 0 0 1 7 5Z'/%3E%3Cpath d='M120 40l-5-5a3 3 0 0 1 5-3.5 3 3 0 0 1 5 3.5Z'/%3E%3C/g%3E%3C/svg%3E");
  animation: hp-rise 12s linear var(--phase, 0s) infinite;
}
.hp-sky-hearts::after { opacity: 0.6; background-position: 90px 60px; animation-duration: 17s; }
/* Autumn leaves tumble down. */
.hp-sky-leaves::before, .hp-sky-leaves::after {
  top: -240px; left: -48px; right: -48px; height: calc(100% + 240px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg opacity='.92'%3E%3Cpath fill='%23d9662b' transform='translate(30 30) rotate(25)' d='M0 0c5-7 15-7 18 0-3 7-13 7-18 0z'/%3E%3Cpath fill='%23e8a33d' transform='translate(150 70) rotate(-40)' d='M0 0c4-6 12-6 15 0-3 6-11 6-15 0z'/%3E%3Cpath fill='%23b5482a' transform='translate(205 160) rotate(70)' d='M0 0c5-7 15-7 18 0-3 7-13 7-18 0z'/%3E%3Cpath fill='%23c9862e' transform='translate(80 140) rotate(-15)' d='M0 0c4-6 12-6 15 0-3 6-11 6-15 0z'/%3E%3Cpath fill='%23d9662b' transform='translate(115 215) rotate(110)' d='M0 0c4-5 11-5 13 0-2 5-9 5-13 0z'/%3E%3C/g%3E%3C/svg%3E");
  animation: hp-petals 13s linear var(--phase, 0s) infinite;
}
.hp-sky-leaves::after { opacity: 0.75; background-position: 110px 90px; animation-duration: 18s; }
/* Supporters' extras. Fireflies drift and glow; */
.hp-sky-fireflies::before, .hp-sky-fireflies::after {
  inset: -48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='240'%3E%3Cdefs%3E%3CradialGradient id='f'%3E%3Cstop offset='0' stop-color='%23fbffc4'/%3E%3Cstop offset='.35' stop-color='%23e4ff6e' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23c8ff3c' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg fill='url(%23f)'%3E%3Ccircle cx='30' cy='40' r='7'/%3E%3Ccircle cx='150' cy='90' r='6'/%3E%3Ccircle cx='220' cy='30' r='5'/%3E%3Ccircle cx='90' cy='190' r='7'/%3E%3Ccircle cx='205' cy='200' r='5.5'/%3E%3C/g%3E%3C/svg%3E");
  animation: hp-firefly 7s ease-in-out var(--phase, 0s) infinite;
}
.hp-sky-fireflies::after { background-position: 130px 110px; animation-duration: 9.5s; animation-delay: calc(var(--phase, 0s) - 3s); }
@keyframes hp-firefly {
  0%, 100% { transform: translate(0, 0); opacity: 0.35; }
  25% { opacity: 1; }
  50% { transform: translate(26px, -20px); opacity: 0.5; }
  75% { opacity: 0.95; }
}
/* the northern lights ripple across the top; */
.hp-sky-aurora::before, .hp-sky-aurora::after {
  inset: -20% -15% 35%;
  background:
    radial-gradient(ellipse 45% 30% at 30% 60%, rgba(80, 255, 180, 0.42), transparent 70%),
    radial-gradient(ellipse 40% 25% at 68% 45%, rgba(110, 140, 255, 0.36), transparent 70%),
    radial-gradient(ellipse 50% 30% at 50% 72%, rgba(200, 90, 255, 0.24), transparent 72%);
  filter: blur(18px);
  animation: hp-aurora 14s ease-in-out var(--phase, 0s) infinite alternate;
}
.hp-sky-aurora::after {
  background:
    radial-gradient(ellipse 35% 22% at 60% 55%, rgba(90, 255, 200, 0.35), transparent 70%),
    radial-gradient(ellipse 30% 25% at 22% 40%, rgba(170, 110, 255, 0.28), transparent 70%);
  animation-duration: 19s; animation-direction: alternate-reverse;
}
@keyframes hp-aurora {
  from { transform: translateX(-7%) skewX(-10deg) scaleY(0.95); opacity: 0.75; }
  to { transform: translateX(7%) skewX(10deg) scaleY(1.15); opacity: 1; }
}
/* a thunderstorm: dark clouds drifting along the top, heavy rain in two layers, and lightning
   striking now and then, here and there (the near bolt lights the sky: never more than twice in a
   second; and no lightning at all for anyone who asks for less motion); */
.hp-sky-storm { background: rgba(8, 12, 28, 0.3); }
.hp-sky-storm::before, .hp-sky-storm::after {
  top: -200px; height: calc(100% + 200px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='200'%3E%3Cg stroke='%23b9c8e6' stroke-width='1.3' stroke-linecap='round' opacity='.62'%3E%3Cpath d='M20 10l-5 22M60 70l-5 22M110 20l-5 22M140 120l-5 22M35 130l-5 22M90 160l-5 22M80 95l-5 22M130 60l-5 22M8 70l-5 22M150 175l-5 22'/%3E%3C/g%3E%3C/svg%3E");
  animation: hp-fall 0.5s linear var(--phase, 0s) infinite;
}
.hp-sky-storm::after { opacity: 0.5; background-size: 80px 100px; animation-duration: 0.85s; }
.hp-storm-clouds {
  position: absolute; top: -10px; left: 0; width: calc(100% + 600px); height: min(30%, 170px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 160' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='s' x='-5%' y='-20%' width='110%' height='140%'%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23s)'%3E%3Cg fill='%23323c57'%3E%3Crect x='-20' y='-10' width='640' height='94'/%3E%3Ccircle cx='-4' cy='88' r='34'/%3E%3Ccircle cx='596' cy='88' r='34'/%3E%3Ccircle cx='28' cy='99' r='29'/%3E%3Ccircle cx='628' cy='99' r='29'/%3E%3Ccircle cx='65' cy='98' r='23'/%3E%3Ccircle cx='111' cy='86' r='24'/%3E%3Ccircle cx='148' cy='107' r='24'/%3E%3Ccircle cx='181' cy='102' r='39'/%3E%3Ccircle cx='227' cy='95' r='40'/%3E%3Ccircle cx='252' cy='108' r='27'/%3E%3Ccircle cx='292' cy='87' r='28'/%3E%3Ccircle cx='345' cy='89' r='32'/%3E%3Ccircle cx='378' cy='94' r='32'/%3E%3Ccircle cx='403' cy='86' r='26'/%3E%3Ccircle cx='454' cy='96' r='28'/%3E%3Ccircle cx='489' cy='97' r='27'/%3E%3Ccircle cx='532' cy='104' r='26'/%3E%3Ccircle cx='-36' cy='99' r='38'/%3E%3Ccircle cx='564' cy='99' r='38'/%3E%3C/g%3E%3Cg fill='%231a2032'%3E%3Crect x='-20' y='-10' width='640' height='64'/%3E%3Ccircle cx='5' cy='60' r='36'/%3E%3Ccircle cx='605' cy='60' r='36'/%3E%3Ccircle cx='26' cy='64' r='32'/%3E%3Ccircle cx='626' cy='64' r='32'/%3E%3Ccircle cx='60' cy='66' r='19'/%3E%3Ccircle cx='103' cy='73' r='28'/%3E%3Ccircle cx='141' cy='61' r='31'/%3E%3Ccircle cx='169' cy='68' r='26'/%3E%3Ccircle cx='207' cy='78' r='27'/%3E%3Ccircle cx='237' cy='54' r='31'/%3E%3Ccircle cx='270' cy='80' r='33'/%3E%3Ccircle cx='296' cy='63' r='30'/%3E%3Ccircle cx='324' cy='65' r='21'/%3E%3Ccircle cx='359' cy='54' r='32'/%3E%3Ccircle cx='393' cy='59' r='25'/%3E%3Ccircle cx='441' cy='54' r='26'/%3E%3Ccircle cx='468' cy='77' r='33'/%3E%3Ccircle cx='507' cy='60' r='25'/%3E%3Ccircle cx='531' cy='77' r='35'/%3E%3Ccircle cx='560' cy='57' r='22'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0 / 600px 100% repeat-x;
  animation: hp-drift 70s linear var(--phase, 0s) infinite;
}
/* (Another bank behind, lower and fainter, drifting slower: depth.) */
.hp-storm-clouds.far { top: 6px; width: calc(100% + 760px); opacity: 0.45; background-size: 760px 100%; --drift: -760px; animation-duration: 115s; }
@keyframes hp-drift { to { transform: translateX(var(--drift, -600px)); } }
.hp-storm-bolt { position: absolute; inset: 0; opacity: 0; animation: hp-strike 9s linear var(--phase, 0s) infinite; }
.hp-storm-bolt::before {
  content: ''; position: absolute; top: 6%; left: 26%; width: min(16%, 90px); height: 60%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 200' preserveAspectRatio='none'%3E%3Cpath d='M32 0L24 46 36 50 18 104 30 108 14 160 26 164 20 200M24 46 10 72M18 104 40 128' fill='none' stroke='%23f4f8ff' stroke-width='3.2' stroke-linejoin='miter' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(0 0 3px #e8f0ff) drop-shadow(0 0 12px #9fc3ff);
}
.hp-storm-bolt::after { content: ''; position: absolute; inset: 0; background: rgba(225, 235, 255, 0.85); opacity: 0.42; }
/* (A farther one, smaller, now and then elsewhere: it doesn't light the sky.) */
.hp-storm-bolt.far { animation-duration: 13s; animation-delay: calc(var(--phase, 0s) - 6s); }
.hp-storm-bolt.far::before { left: 64%; width: min(11%, 60px); height: 40%; opacity: 0.75; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 140' preserveAspectRatio='none'%3E%3Cpath d='M28 0L36 40 22 44 38 92 26 96 34 140M36 40 48 62' fill='none' stroke='%23f4f8ff' stroke-width='2.6' stroke-linejoin='miter' stroke-linecap='round'/%3E%3C/svg%3E"); }
.hp-storm-bolt.far::after { display: none; }
@keyframes hp-strike { 0%, 80%, 85%, 100% { opacity: 0; } 81% { opacity: 1; } 82% { opacity: 0.1; } 83.5% { opacity: 0.8; } }
/* cherry blossom petals drift down; */
.hp-sky-blossoms::before, .hp-sky-blossoms::after {
  top: -240px; left: -48px; right: -48px; height: calc(100% + 240px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg opacity='.9'%3E%3Cpath fill='%23ffc4dc' d='M30 30c4-5 11-4 13 0-2 4-9 5-13 0z'/%3E%3Cpath fill='%23ffb0cf' d='M150 70c3-4 9-3 11 0-2 3-8 4-11 0z'/%3E%3Cpath fill='%23ffd6e6' d='M205 160c4-5 12-4 14 0-2 4-10 5-14 0z'/%3E%3Cpath fill='%23ff9fc4' d='M80 140c3-4 8-3 10 0-2 3-7 4-10 0z'/%3E%3Cpath fill='%23ffc4dc' d='M115 215c4-4 10-4 12 0-2 4-8 4-12 0z'/%3E%3C/g%3E%3C/svg%3E");
  animation: hp-petals 11s linear var(--phase, 0s) infinite;
}
.hp-sky-blossoms::after { opacity: 0.7; background-position: 100px 120px; animation-duration: 16s; }
/* (And embers drift up, glowing.) */
.hp-sky-embers::before, .hp-sky-embers::after {
  top: 0; left: -40px; right: -40px; height: calc(100% + 240px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cdefs%3E%3CradialGradient id='e'%3E%3Cstop offset='0' stop-color='%23fff1b0'/%3E%3Cstop offset='.35' stop-color='%23ffa23a' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%23ff5a1f' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg fill='url(%23e)'%3E%3Ccircle cx='30' cy='200' r='4'/%3E%3Ccircle cx='120' cy='150' r='3'/%3E%3Ccircle cx='200' cy='60' r='4.5'/%3E%3Ccircle cx='70' cy='40' r='3'/%3E%3Ccircle cx='170' cy='210' r='3.5'/%3E%3Ccircle cx='95' cy='100' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  animation: hp-rise 9s linear var(--phase, 0s) infinite;
}
.hp-sky-embers::after { opacity: 0.7; background-position: 120px 80px; animation-duration: 13s; }
@keyframes hp-petals {
  0% { transform: translate(0, 0); }
  50% { transform: translate(24px, 120px); }
  100% { transform: translate(0, 240px); }
}
@keyframes hp-fall { from { transform: translateY(0); } to { transform: translateY(200px); } }
@keyframes hp-rise { from { transform: translateY(0); } to { transform: translateY(-240px); } }
@keyframes hp-twinkle { 50% { opacity: 0.25; } }

/* ================= Glow's moving patterns ================= */
/* (Layers of the pattern sliding over each other, behind everything: in view as the page scrolls,
   like the weather. homepage.js sizes it to the view. Each layer reaches a tile past the edges it
   moves away from, and moves one tile a loop, so it never ends.) */
.hp-backdrop { position: sticky; top: 0; left: 0; align-self: start; justify-self: start; overflow: hidden; pointer-events: none; }
.hp-backdrop i { position: absolute; inset: 0; background-repeat: repeat; will-change: transform; }
@keyframes hp-bd-drift { to { transform: translate(var(--dx, 0px), var(--dy, 0px)); } }
@keyframes hp-bd-twinkle { from { opacity: 1; } to { opacity: 0.2; } }
@keyframes hp-bd-sheen { to { transform: translateX(-66.667%); } }
/* Starfield: stars drifting past, the bright ones twinkling. */
.hp-bd-starfield i:nth-child(1) { inset: -240px 0 0 -240px; background-size: 240px 240px; --dx: 240px; --dy: 240px; animation: hp-bd-drift 110s linear var(--phase, 0s) infinite; }
.hp-bd-starfield i:nth-child(2) { inset: -330px 0 0 -330px; background-size: 330px 330px; --dx: 330px; --dy: 330px; animation: hp-bd-drift 90s linear var(--phase, 0s) infinite, hp-bd-twinkle 2.8s ease-in-out var(--phase, 0s) infinite alternate; }
.hp-bd-starfield i:nth-child(3) { inset: -380px 0 0 -380px; background-size: 380px 380px; --dx: 380px; --dy: 380px; animation: hp-bd-drift 66s linear var(--phase, 0s) infinite, hp-bd-twinkle 2.2s ease-in-out calc(var(--phase, 0s) - 1.1s) infinite alternate; }
/* Bokeh: soft lights rising, the near ones faster. */
.hp-bd-bokeh i:nth-child(1) { inset: 0 0 -320px; background-size: 320px 320px; --dy: -320px; animation: hp-bd-drift 48s linear var(--phase, 0s) infinite; }
.hp-bd-bokeh i:nth-child(2) { inset: 0 0 -240px -240px; background-size: 240px 240px; --dx: 240px; --dy: -240px; animation: hp-bd-drift 34s linear var(--phase, 0s) infinite; }
.hp-bd-bokeh i:nth-child(3) { inset: 0 0 -200px; background-size: 200px 200px; --dy: -200px; animation: hp-bd-drift 21s linear var(--phase, 0s) infinite, hp-bd-twinkle 3.4s ease-in-out var(--phase, 0s) infinite alternate; }
/* Holo: a sheen like a hologram's sliding across, fine lines, and glints. */
.hp-bd-holo i:nth-child(1) { right: -200%; background-size: 100% 100%; opacity: 0.8; animation: hp-bd-sheen 14s ease-in-out var(--phase, 0s) infinite alternate; }
.hp-bd-holo i:nth-child(2) { background-size: auto; }
.hp-bd-holo i:nth-child(3) { background-size: 200px 200px; animation: hp-bd-twinkle 1.9s ease-in-out var(--phase, 0s) infinite alternate; }
/* Waves: rows of them, the far ones going the other way. */
.hp-bd-waves i:nth-child(1) { right: -240px; background-size: 240px 64px; --dx: -240px; animation: hp-bd-drift 8s linear var(--phase, 0s) infinite; }
.hp-bd-waves i:nth-child(2) { left: -320px; background-size: 320px 64px; background-position: 0 32px; --dx: 320px; animation: hp-bd-drift 14s linear var(--phase, 0s) infinite; }
/* (As a swatch: the same, a quarter the size.) */
.hp-pattern-swatch { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 6px; }
.hp-pattern-swatch .hp-backdrop { position: absolute; width: 400%; height: 400%; transform: scale(0.25); transform-origin: 0 0; }

/* ================= Effects for visitors (Glow's) ================= */
.hp-fx { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; }

/* ================= The fortune ball (Glow's) ================= */
.hp-fortune { container-type: size; }
.hp-fortune .hp-in { flex-direction: column; align-items: center; }
.hp-ball {
  position: relative; flex: none; overflow: hidden;
  width: min(100cqw, 76cqh); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--tint) 45%, #fff) 0%, var(--tint) 36%, color-mix(in srgb, var(--tint) 40%, #0b0620) 76%, #0b0620 100%);
  box-shadow: inset 0 0 0 1.4cqmin rgba(255, 255, 255, 0.22), inset 0 -4cqmin 8cqmin rgba(0, 0, 0, 0.35), 0 0 8cqmin color-mix(in srgb, var(--tint) 65%, transparent);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.hp-ball:focus-visible { outline: 3px solid #f5b94a; outline-offset: 3px; }
.hp-ball-mist {
  position: absolute; inset: -25%;
  background: conic-gradient(from 20deg, transparent, rgba(255, 255, 255, 0.34), transparent 30%, rgba(255, 255, 255, 0.22) 55%, transparent 72%, rgba(255, 255, 255, 0.28) 88%, transparent);
  filter: blur(5cqmin); border-radius: 50%;
  animation: hp-spin 11s linear infinite;
}
.hp-asking .hp-ball-mist { animation-duration: 1.1s; }
.hp-ball-shine { position: absolute; left: 17%; top: 11%; width: 32%; height: 18%; border-radius: 50%; background: radial-gradient(rgba(255, 255, 255, 0.85), transparent 70%); transform: rotate(-32deg); pointer-events: none; }
.hp-ball-answer {
  position: absolute; inset: 20%;
  display: grid; place-items: center;
  color: #fff; font: 700 max(11px, 12.5cqmin)/1.05 Caveat, cursive; text-align: center; overflow-wrap: anywhere;
  text-shadow: 0 0 1.2cqmin rgba(38, 12, 74, 0.95), 0 0 3cqmin rgba(38, 12, 74, 0.7), 0 0 7cqmin var(--tint);
  opacity: 0; filter: blur(4px); transform: scale(0.85);
  transition: opacity 0.9s, filter 0.9s, transform 0.9s;
  pointer-events: none;
}
.hp-ball-answer.on { opacity: 1; filter: none; transform: none; }
.hp-asking .hp-ball { animation: hp-shake 0.45s ease-in-out 2; }
@keyframes hp-shake {
  20% { transform: translate(-3%, 1%) rotate(-4deg); }
  40% { transform: translate(3%, -1%) rotate(4deg); }
  60% { transform: translate(-2%, 0) rotate(-2deg); }
  80% { transform: translate(2%, 0) rotate(2deg); }
}
.hp-ball-stand {
  flex: none; width: 58cqw; height: 9cqh; margin-top: -4cqh;
  border-radius: 45% 45% 14% 14% / 80% 80% 22% 22%;
  background: linear-gradient(#f0d07e, #b17c22 70%, #8a5c14);
  box-shadow: inset 0 1.5cqh 0 rgba(255, 255, 255, 0.3), 0 2cqh 3cqh -1cqh rgba(0, 0, 0, 0.45);
}
.hp-ball-label { margin-top: 3cqh; max-width: 100%; color: #fff; font: 600 max(10px, 7cqh)/1.2 "Pixelify Sans", sans-serif; text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); overflow-wrap: anywhere; }

/* ================= Pets ================= */
/* A pet (homepage.js), in pixels: its frames side by side in one picture (13 of them), the one
   showing picked by what it's doing: standing about (now and then its tail moves, or it blinks),
   walking (and running), lying down, asleep, glad (just petted), eating, and hungry. Its bits
   (hearts, z's, bubbles) and name tag are sized for the screen, whatever the page's scale. */
.hp-pet { position: relative; display: block; flex: none; width: 110px; height: 90px; --pw: 110px; }
.hp-pet-live { position: absolute; left: 0; top: 0; z-index: 4; cursor: pointer; outline: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; will-change: transform; }
.hp-editing .hp-pet-live { pointer-events: none; }
.hp-pet-live:focus-visible .hp-pet-in { outline: calc(2px / var(--hp-scale, 1)) dashed #f5b94a; outline-offset: 2px; }
.hp-pet-shadow { position: absolute; left: 22%; right: 22%; bottom: 3%; height: 7%; border-radius: 50%; background: rgba(0, 0, 0, 0.24); }
.hp-pet-lift, .hp-pet-bounce, .hp-pet-in, .hp-pet-sprite { position: absolute; inset: 0; display: block; }
.hp-pet-in.left { transform: scaleX(-1); }
.hp-pet-glowy .hp-pet-in { filter: drop-shadow(0 0 calc(var(--pw) / 28) var(--pg)) drop-shadow(0 0 calc(var(--pw) / 11) color-mix(in srgb, var(--pg) 50%, transparent)); }
/* (Frame n of 13 is at n/12 along.) */
.hp-pet-sprite {
  background-repeat: no-repeat; background-size: 1300% 100%; background-position: 0 0;
  image-rendering: pixelated;
  animation: pet-idle 5.6s var(--blink, 0s) step-end infinite;
}
@keyframes pet-idle {
  0% { background-position-x: 0%; }
  34% { background-position-x: 8.3333%; }
  44% { background-position-x: 0%; }
  89% { background-position-x: 16.6667%; }
  92% { background-position-x: 0%; }
}
/* (Fins and raindrops move all the time.) */
.hp-pet-fish .hp-pet-sprite, .hp-pet-cloud .hp-pet-sprite { animation-name: pet-idle-quick; animation-duration: 4.8s; }
@keyframes pet-idle-quick {
  0%, 25%, 50%, 75% { background-position-x: 0%; }
  12.5%, 37.5%, 62.5% { background-position-x: 8.3333%; }
  89% { background-position-x: 16.6667%; }
  92% { background-position-x: 0%; }
}
.hp-pet.walk .hp-pet-sprite { animation: pet-walk 0.36s steps(2) infinite; }
.hp-pet.run .hp-pet-sprite { animation-duration: 0.2s; }
@keyframes pet-walk { from { background-position-x: 25%; } to { background-position-x: 41.6667%; } }
.hp-pet.rest .hp-pet-sprite { animation: none; background-position-x: 41.6667%; }
.hp-pet.sleep .hp-pet-sprite { animation: pet-sleep 1.8s steps(2) infinite; }
@keyframes pet-sleep { from { background-position-x: 50%; } to { background-position-x: 66.6667%; } }
.hp-pet.joy .hp-pet-sprite { animation: pet-glad 0.32s steps(2) infinite; }
@keyframes pet-glad { from { background-position-x: 66.6667%; } to { background-position-x: 83.3333%; } }
.hp-pet.eat .hp-pet-sprite { animation: pet-eat 0.36s steps(2) infinite; }
@keyframes pet-eat { from { background-position-x: 83.3333%; } to { background-position-x: 100%; } }
.hp-pet.sad:not(.walk):not(.rest):not(.joy) .hp-pet-sprite { animation: none; background-position-x: 100%; }
/* Walking, it bobs a pixel as it steps; glad, it hops. */
.hp-pet.walk .hp-pet-bounce { animation: pet-trot 0.36s step-end infinite; }
.hp-pet.run .hp-pet-bounce { animation-duration: 0.2s; }
@keyframes pet-trot { 0% { transform: none; } 50% { transform: translateY(calc(var(--pw) / -22)); } }
.hp-pet.joy .hp-pet-bounce { animation: pet-hop 0.64s steps(8) 2; }
@keyframes pet-hop { 0%, 100% { transform: none; } 40% { transform: translateY(calc(var(--pw) / -5.5)); } }

/* Spirit foxes' wisps: little lights floating about them. */
.hp-pet-wisp {
  position: absolute; left: 6%; top: 4%;
  width: calc(var(--pw) / 22 * 2); height: calc(var(--pw) / 22 * 2);
  background: var(--pg); box-shadow: 0 0 calc(var(--pw) / 14) var(--pg);
  animation: pet-wisp 3.4s steps(12) infinite;
}
.hp-pet-wisp.w2 { left: 88%; top: 0; width: calc(var(--pw) / 22 * 1.5); height: calc(var(--pw) / 22 * 1.5); animation-duration: 4.2s; animation-direction: reverse; }
@keyframes pet-wisp {
  0%, 100% { transform: translate(0, 0); opacity: 0.95; }
  33% { transform: translate(calc(var(--pw) / 22 * 2), calc(var(--pw) / 22 * -2)); opacity: 0.55; }
  66% { transform: translate(calc(var(--pw) / 22 * -1), calc(var(--pw) / 22 * -1)); opacity: 1; }
}

/* Its name (and how it's doing), under it when it's pointed at or petted (the hearts go up). */
.hp-pet-tag {
  position: absolute; left: 50%; top: 100%;
  display: grid; justify-items: center;
  margin-top: calc(2px / var(--hp-scale, 1));
  padding: calc(4px / var(--hp-scale, 1)) calc(10px / var(--hp-scale, 1));
  border-radius: calc(4px / var(--hp-scale, 1)); background: rgba(22, 16, 32, 0.86); color: #fff;
  box-shadow: 0 0 0 calc(2px / var(--hp-scale, 1)) rgba(255, 255, 255, 0.18);
  font: 400 calc(11px / var(--hp-scale, 1))/1.25 Silkscreen, "Bricolage Grotesque", sans-serif; letter-spacing: 0.02em; white-space: nowrap;
  transform: translateX(-50%); opacity: 0; transition: opacity 0.15s; pointer-events: none;
}
/* (Silkscreen, not Pixelify Sans: small, Pixelify's c looks like an o and its 5 like an S. And
   not Silkscreen's bold, whose M looks like an H.) */
.hp-pet-tag b { font-size: calc(13px / var(--hp-scale, 1)); font-weight: 400; }
.hp-pet-live:hover .hp-pet-tag, .hp-pet-live.tagged .hp-pet-tag { opacity: 1; }
.hp-editing .hp-pet-tag { display: none; }
/* Thinking of food (it's hungry). */
.hp-pet-think {
  position: absolute; left: 62%; bottom: 80%;
  display: grid; place-items: center;
  width: calc(32px / var(--hp-scale, 1)); height: calc(32px / var(--hp-scale, 1));
  box-sizing: border-box; border-radius: 50%; background: #fff; box-shadow: 0 0 0 calc(2px / var(--hp-scale, 1)) #2a1f33;
  opacity: 0; transform: scale(0.3); transform-origin: 0 100%; transition: opacity 0.25s, transform 0.25s steps(3); pointer-events: none;
}
.hp-pet.lf .hp-pet-think { left: auto; right: 62%; transform-origin: 100% 100%; }
.hp-pet-think.on { opacity: 1; transform: none; }
.hp-pet-think img { width: 66%; height: 66%; object-fit: contain; image-rendering: pixelated; }
/* Hearts, z's, sparkles and bubbles coming up from its head (and a droplet's ripples, a dragon's
   puff of flame). */
.hp-pet-bits { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hp-pet-bit {
  position: absolute; top: 14%; display: block; font-style: normal;
  background: no-repeat center / contain; image-rendering: pixelated;
  animation: pet-rise 1.2s steps(10) forwards;
}
@keyframes pet-rise {
  from { transform: translate(-50%, 0) scale(0.5); opacity: 0; }
  15% { opacity: 1; }
  to { transform: translate(calc(-50% + var(--pw) * var(--drift, 0)), calc(var(--pw) * -0.9)) scale(1); opacity: 0; }
}
.hp-pet-heart, .hp-pet-spark { width: calc(18px / var(--hp-scale, 1)); height: calc(18px / var(--hp-scale, 1)); }
.hp-pet-spark { animation-duration: 1.4s; }
.hp-pet-z { color: #fff; font: 700 calc(15px / var(--hp-scale, 1))/1 "Pixelify Sans", monospace; text-shadow: 0 0 3px rgba(0, 0, 0, 0.6); animation-duration: 1.9s; }
/* (In its own room, the dew a pat brought: app.js.) */
.hp-pet-dew {
  color: #c8eeff; font: 700 calc(15px / var(--hp-scale, 1))/1 "Pixelify Sans", monospace; white-space: nowrap;
  text-shadow: 0 1px 0 #1a3550, 0 0 3px rgba(0, 0, 0, 0.6); animation-duration: 1s;
}
.hp-pet-bubble {
  top: 40%; width: calc(var(--pw) / 22 * 2); height: calc(var(--pw) / 22 * 2);
  box-sizing: border-box; border: calc(var(--pw) / 44) solid rgba(214, 240, 255, 0.95); border-radius: 30%;
  animation: pet-bubble 2.2s steps(14) forwards;
}
@keyframes pet-bubble {
  from { transform: translate(-50%, 0); opacity: 0; }
  15% { opacity: 1; }
  to { transform: translate(calc(-50% + var(--pw) * var(--drift, 0) * 0.4), calc(var(--pw) * -1.1)); opacity: 0; }
}
/* (Three, one after another, spreading out from under it, like the rings under Rainlit's drop.) */
.hp-pet-ripple {
  left: 50%; top: 66%; width: 80%; height: 38%;
  animation: pet-ripple 1.2s steps(8) forwards;
}
@keyframes pet-ripple {
  from { transform: translateX(-50%) scale(0.35); opacity: 0; }
  20% { opacity: 0.95; }
  to { transform: translateX(-50%) scale(1.3); opacity: 0; }
}
.hp-pet-flame {
  left: 88% !important; top: 26%; width: calc(var(--pw) / 22 * 5); height: calc(var(--pw) / 22 * 6);
  animation: pet-flame 0.9s steps(6) forwards;
}
.hp-pet.lf .hp-pet-flame { left: 12% !important; }
@keyframes pet-flame {
  from { transform: translate(-50%, 10%) scale(0.3); opacity: 1; }
  60% { opacity: 1; }
  to { transform: translate(-50%, -60%) scale(1.1); opacity: 0; }
}
/* Its bowl (its food on a dish), and its ball. */
.hp-pet-bowl, .hp-pet-ball { position: absolute; left: 0; top: 0; z-index: 3; display: block; pointer-events: none; transition: opacity 0.5s; }
.hp-pet-bowl { animation: pet-plop 0.35s steps(4); }
.hp-pet-bowl i { position: absolute; left: 0; right: 0; display: block; background: no-repeat center / contain; image-rendering: pixelated; }
.hp-pet-bowl i:first-child { top: 18%; height: 48%; }
.hp-pet-bowl i:last-child { bottom: 0; height: 44%; }
@keyframes pet-plop { from { opacity: 0; translate: 0 -20px; } }
.hp-pet-ball { background: no-repeat center / contain; image-rendering: pixelated; transition: transform 0.7s cubic-bezier(0.2, 0.75, 0.3, 1), opacity 0.5s; }
.hp-pet-bowl.gone, .hp-pet-ball.gone { opacity: 0; }
/* Its owner's card, on their homepage: how it's doing, and feeding it or playing with it. */
/* (Everything in it fits inside it: a long name's Feed button takes two lines, and Play goes under it.) */
.hp-pet-care {
  position: absolute; z-index: 7; width: 264px; box-sizing: border-box;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px 14px 12px;
  background: #fffaf0; color: #3b2f25;
  border: 2px solid #3b2f25; border-radius: 16px;
  box-shadow: 0 16px 34px -12px rgba(0, 0, 0, 0.6);
  font: 400 14px/1.3 "Bricolage Grotesque", system-ui, sans-serif;
}
.hp-pet-care[hidden] { display: none; }
.hp-pet-care strong { padding-right: 24px; font: 400 15px/1.15 Silkscreen, "Bricolage Grotesque", sans-serif; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.hp-pet-x { position: absolute; top: 4px; right: 6px; padding: 2px 6px; border: 0; background: none; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.hp-pet-meters { display: grid; gap: 6px; }
.hp-pet-meter { display: grid; grid-template-columns: 64px minmax(0, 1fr) 76px; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; }
/* (Its icon by its name: a food bowl or a heart, as full as it is: homepage.js meterIcon.) */
.hp-pet-meter-name { display: inline-flex; align-items: center; gap: 6px; }
.hp-pet-meter-icon { display: inline-block; flex: none; width: 16px; height: 12px; background: center / contain no-repeat; image-rendering: pixelated; } /* (the same box for each, so their names line up) */
.hp-pet-meter .bar { height: 10px; overflow: hidden; border-radius: 3px; background: #eadfc8; box-shadow: inset 0 0 0 2px #3b2f25; }
.hp-pet-meter .bar i { display: block; height: 100%; background: repeating-linear-gradient(90deg, #ffb13d 0 6px, #ffd23f 6px 12px); box-shadow: inset 0 0 0 2px #3b2f25; transition: width 0.4s steps(6); }
.hp-pet-meter.happy .bar i { background: repeating-linear-gradient(90deg, #ff6b9d 0 6px, #ff9fc2 6px 12px); }
.hp-pet-meter em { color: #8a7457; font-size: 12px; font-style: normal; text-align: right; }
.hp-pet-sub, .hp-pet-msg { margin: 0; color: #8a7457; font-size: 12.5px; }
.hp-pet-msg { color: #b3263e; font-weight: 650; }
.hp-pet-do { display: flex; flex-wrap: wrap; gap: 8px; }
.hp-pet-do button {
  flex: 1 1 auto; min-width: 0; padding: 8px 10px;
  border: 2px solid #3b2f25; border-radius: 10px;
  background: #ffd23f; color: #3b2f25;
  font: 400 13px/1.1 Silkscreen, "Bricolage Grotesque", sans-serif; letter-spacing: 0.02em; cursor: pointer;
  overflow-wrap: anywhere;
  box-shadow: 0 3px 0 #3b2f25;
}
.hp-pet-do .play { background: #ff9fc9; }
.hp-pet-do button:hover { filter: brightness(1.05); }
.hp-pet-do button:active { transform: translateY(3px); box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .hp-fx-rainbow .hp-ink, .hp-fx-blink .hp-ink, .hp-fx-marquee .hp-ink, .hp-fx-wave .hp-ink span,
  .hp-fx-shimmer .hp-ink, .hp-fx-lamplight .hp-ink, .hp-frame-neon,
  .hp-sky::before, .hp-sky::after, .hp-sky i, .hp-backdrop i, .hp-ball-mist, .hp-asking .hp-ball,
  .hp-pet *, .hp-pet-bit,
  .hp-playing .hp-bars i, .hp-playing .hp-reels > i, .hp-playing .hp-song span, .hp-music.hp-playing .hp-in { animation: none !important; }
  .hp-fx-marquee .hp-ink { padding-left: 0; }
}

/* ================= In the app ================= */

.hp-dialog {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  overflow: hidden;
  background: #0e121c;
  color: var(--text, #eceaf3);
}
.hp-dialog[open] { display: flex; flex-direction: column; }
.hp-dialog::backdrop { background: rgba(5, 8, 13, 0.8); }

.hp-bar {
  display: flex; align-items: center; gap: 8px;
  flex: none;
  padding: 8px 12px;
  padding-top: calc(8px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));
  background: var(--night, #151b28);
  border-bottom: 1px solid var(--line, #364156);
}
.hp-bar .icon-btn { flex: none; }
.hp-who { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.hp-who strong { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-who span { color: var(--mist, #a9b4c8); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.hp-saved { color: var(--mist, #a9b4c8); font-size: 13px; white-space: nowrap; }
.hp-saved.problem { color: #ffb4ae; }
.hp-frame { position: relative; flex: 1; min-height: 0; }
.hp-frame > .hp-page { position: absolute; inset: 0; }
.hp-page:focus { outline: none; }
.hp-message {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%);
  width: min(360px, calc(100% - 40px));
  margin: 0; padding: 18px 20px;
  background: var(--dusk, #20293a); border: 1px solid var(--line, #364156); border-radius: 16px;
  text-align: center; line-height: 1.45;
}
.hp-toast {
  position: absolute; left: 50%; bottom: 16px; z-index: 6;
  transform: translateX(-50%);
  width: max-content; max-width: min(460px, calc(100% - 32px));
  margin: 0; padding: 10px 14px;
  background: var(--dusk, #20293a); color: var(--text, #eceaf3);
  border: 1px solid var(--line, #364156); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  font-size: 14px; text-align: center;
}

@media (max-width: 560px) {
  .hp-bar { padding-left: 6px; padding-right: 8px; gap: 6px; }
  .hp-actions .small-btn { padding: 6px 9px; }
  .hp-hide-narrow { display: none; }
}

/* ================= Editing ================= */

.hp-editing .hp-canvas { outline: 2px dashed rgba(255, 255, 255, 0.35); outline-offset: 0; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.12); }
/* (A finger on a piece still scrolls the page, until the piece is picked: then it drags it.) */
.hp-editing .hp-piece { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.hp-editing .hp-piece.hp-picked { touch-action: none; }
.hp-editing .hp-piece:active { cursor: grabbing; }

/* The picked piece: a box around it, with handles to resize and turn it (always the same size
   on screen, however the page is scaled). */
.hp-select {
  position: absolute; z-index: 5;
  box-sizing: content-box;
  margin: calc(-6px / var(--hp-scale, 1)) 0 0 calc(-6px / var(--hp-scale, 1));
  padding: calc(6px / var(--hp-scale, 1));
  border: calc(2px / var(--hp-scale, 1)) solid #f5b94a;
  border-radius: calc(4px / var(--hp-scale, 1));
  pointer-events: none;
  transform-origin: 50% 50%;
}
.hp-handle {
  position: absolute;
  width: calc(22px / var(--hp-scale, 1)); height: calc(22px / var(--hp-scale, 1));
  margin: calc(-11px / var(--hp-scale, 1)) 0 0 calc(-11px / var(--hp-scale, 1));
  border: calc(2px / var(--hp-scale, 1)) solid #22190a;
  border-radius: 50%;
  background: #f5b94a;
  pointer-events: auto; touch-action: none;
}
.hp-handle::after { content: ''; position: absolute; inset: calc(-10px / var(--hp-scale, 1)); } /* (easier to catch) */
.hp-h-scale { left: 100%; top: 100%; cursor: nwse-resize; }
.hp-h-width { left: 100%; top: 50%; border-radius: calc(6px / var(--hp-scale, 1)); width: calc(12px / var(--hp-scale, 1)); margin-left: calc(-6px / var(--hp-scale, 1)); cursor: ew-resize; }
.hp-h-turn { left: 50%; top: calc(-34px / var(--hp-scale, 1)); cursor: grab; background: #fff; }
.hp-h-turn::before {
  content: ''; position: absolute; left: 50%; top: 100%;
  width: calc(2px / var(--hp-scale, 1)); height: calc(14px / var(--hp-scale, 1));
  margin-left: calc(-1px / var(--hp-scale, 1));
  background: #f5b94a;
}

/* The drawer of things to add, and the picked piece's settings: a craft drawer. */
.hp-dock {
  flex: none;
  display: flex; flex-direction: column;
  max-height: min(46%, 420px);
  background: #e9dcc2;
  color: #3b2f25;
  border-top: 3px solid #cdb68f;
  padding-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
}
.hp-tabs { display: flex; gap: 4px; flex: none; padding: 8px 10px 0; overflow-x: auto; scrollbar-width: none; }
.hp-tab {
  flex: none;
  padding: 8px 12px 7px;
  border: 1px solid #cdb68f; border-bottom: 0; border-radius: 9px 9px 0 0;
  background: #dccaa7; color: #6b5840;
  font: 700 11.5px/1 "Pixelify Sans", var(--font, sans-serif); letter-spacing: 0.08em; text-transform: uppercase;
}
.hp-tab:hover { color: #3b2f25; }
.hp-tab[aria-selected="true"] { background: #fbf6ea; color: #3b2f25; }
.hp-tray {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 12px 12px 14px;
  background: #fbf6ea;
  border-top: 1px solid #cdb68f;
  margin-top: -1px;
}
.hp-tray h3 { margin: 4px 0 8px; font: 700 12px/1.2 "Pixelify Sans", var(--font, sans-serif); letter-spacing: 0.08em; text-transform: uppercase; color: #8a7457; }
.hp-tray h3:not(:first-child) { margin-top: 16px; }
.hp-tray p { margin: 0 0 8px; font-size: 13.5px; color: #6b5840; }
.hp-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.hp-item {
  display: grid; place-items: center;
  min-width: 56px; height: 56px; padding: 6px 10px;
  background: #fff; color: #3b2f25;
  border: 1px solid #e0d2b6; border-radius: 10px;
  box-shadow: 0 2px 0 #e0d2b6;
  font-size: 14px;
}
.hp-item:hover { border-color: #b99b6b; transform: translateY(-1px); }
.hp-item img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; }
.hp-item.custom img { image-rendering: auto; }
.hp-item.wide { height: auto; min-height: 56px; padding: 8px 12px; }
.hp-write-item { max-width: 180px; overflow: hidden; white-space: nowrap; }
.hp-swatch { width: 64px; height: 30px; padding: 0; min-width: 0; border-radius: 4px; }
.hp-paper-item { width: 60px; height: 48px; padding: 0; border-radius: 3px; }
/* (A friend button: whose page it goes to.) */
.hp-friends { display: flex; flex-wrap: wrap; gap: 6px; max-height: 236px; overflow-y: auto; margin-bottom: 10px; }
.hp-friend {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 4px;
  background: #fff; color: #3b2f25;
  border: 1px solid #ddcdae; border-radius: 999px;
  font-size: 14px; line-height: 1.2;
}
.hp-friend:hover { border-color: #b99b6b; }
.hp-friend .face { width: 28px; height: 28px; font-size: 12px; }
.hp-friend > span:not(.face) { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hp-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.hp-row > label, .hp-field > span { font-size: 13px; font-weight: 700; color: #6b5840; }
.hp-field { display: grid; gap: 6px; margin-bottom: 12px; }
.hp-field input[type="text"], .hp-field input[type="url"], .hp-field textarea {
  width: 100%;
  padding: 9px 11px;
  background: #fff; color: #2b2233;
  border: 1px solid #d8c7a6; border-radius: 9px;
  font-size: 15px;
}
.hp-field textarea { min-height: 70px; resize: vertical; line-height: 1.35; }
.hp-field input:focus-visible, .hp-field textarea:focus-visible { outline: 2px solid #d9962a; outline-offset: 0; }
.hp-field input[type="range"] { width: 100%; accent-color: #c0801a; }
.hp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hp-chip {
  padding: 6px 11px;
  background: #fff; color: #3b2f25;
  border: 1px solid #ddcdae; border-radius: 999px;
  font-size: 14px; line-height: 1.2;
}
.hp-chip:hover { border-color: #b99b6b; }
.hp-chip[aria-pressed="true"] { background: #3b2f25; color: #fbf6ea; border-color: #3b2f25; }
.hp-chip-extra::after {
  content: ''; display: inline-block; width: 8px; height: 11px; margin-left: 6px; vertical-align: -1px;
  background: #d9962a;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 11'%3E%3Cpath d='M4 0C4 0 0 5 0 7.2a4 4 0 0 0 8 0C8 5 4 0 4 0Z'/%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 8 11'%3E%3Cpath d='M4 0C4 0 0 5 0 7.2a4 4 0 0 0 8 0C8 5 4 0 4 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hp-chip[aria-pressed="true"].hp-chip-extra::after { background: #f5c46a; }
.hp-chip:disabled { opacity: 0.55; cursor: not-allowed; }
.hp-chip:disabled:hover { border-color: #ddcdae; }
.hp-colors { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hp-color {
  width: 28px; height: 28px; padding: 0;
  border: 2px solid #fff; border-radius: 50%;
  box-shadow: 0 0 0 1px #cdb68f;
}
.hp-color[aria-pressed="true"] { box-shadow: 0 0 0 2px #3b2f25; }
.hp-color-pick { position: relative; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px #cdb68f; background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); }
.hp-color-pick input { position: absolute; inset: -8px; width: 44px; height: 44px; opacity: 0; cursor: pointer; }
.hp-picked-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.hp-picked-head strong { flex: 1; min-width: 120px; font: 700 13px/1.2 "Pixelify Sans", var(--font, sans-serif); letter-spacing: 0.08em; text-transform: uppercase; color: #8a7457; }
.hp-tool {
  padding: 6px 10px;
  background: #fff; color: #3b2f25;
  border: 1px solid #ddcdae; border-radius: 8px;
  font-size: 13px; font-weight: 650;
}
.hp-tool:hover { border-color: #b99b6b; }
.hp-tool.danger { color: #b3263e; }
.hp-tool.dark { background: #3b2f25; color: #fbf6ea; border-color: #3b2f25; }
.hp-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 18px; }
.hp-note-small { font-size: 12.5px; color: #8a7457; }
.hp-upload-btn { position: relative; overflow: hidden; }
.hp-icon-chip { padding: 4px 6px; }
.hp-icon-chip img { display: block; width: 20px; height: 20px; object-fit: contain; image-rendering: pixelated; }
.hp-shelf-line { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px dashed #e0d2b6; }
.hp-shelf-line img { width: 48px; height: 48px; object-fit: contain; background: #fff; border-radius: 4px; }
.hp-shelf-fields { display: grid; gap: 4px; }
.hp-shelf-fields input { padding: 6px 9px !important; font-size: 14px !important; }
.hp-shelf-tools { display: flex; gap: 4px; }
.hp-tool:disabled { opacity: 0.4; cursor: default; }
.hp-row > input[type="url"] { flex: 1; min-width: 180px; padding: 8px 11px; background: #fff; color: #2b2233; border: 1px solid #d8c7a6; border-radius: 9px; font-size: 15px; }
.hp-upload-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ================= On its own (rainlit.app/@name) ================= */

.hp-standalone {
  margin: 0;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  background: #0e121c; color: #eceaf3;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
}
.hp-standalone .hp-frame { flex: 1; }
.hp-top {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: #151b28; border-bottom: 1px solid #364156;
  font-size: 14px;
}
.hp-top a { color: inherit; text-decoration: none; }
.hp-top .hp-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.hp-top .hp-brand img { width: 22px; height: 22px; }
.hp-top .hp-spacer { flex: 1; }
.hp-top .hp-join { padding: 7px 12px; border-radius: 10px; background: #f5b94a; color: #22190a; font-weight: 700; }

/* Supporters' extras: together, in a box drawn in the supporter colours with the plan's name on a
   tag across its top edge (like the supporters' themes in Rainlit's Settings). */
.hp-chip-sets { display: grid; gap: 14px; }
.hp-perks {
  position: relative; margin-top: 4px; padding: 16px 10px 10px;
  border: 1.5px solid transparent; border-radius: 12px;
  background: linear-gradient(#fbf6ea, #fbf6ea) padding-box, linear-gradient(115deg, #5aa9ff, #b77bff 50%, #f5b94a) border-box;
}
.hp-perk-tag {
  position: absolute; top: -10px; left: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px 2px 8px; border-radius: 999px;
  background: linear-gradient(115deg, #5aa9ff, #b77bff 50%, #f5b94a); color: #1d1430;
  font: 800 11px/16px var(--font, sans-serif); letter-spacing: 0.06em; text-transform: uppercase;
}
.hp-perk-tag::before {
  content: ''; width: 7px; height: 10px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 11'%3E%3Cpath d='M4 0C4 0 0 5 0 7.2a4 4 0 0 0 8 0C8 5 4 0 4 0Z'/%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 8 11'%3E%3Cpath d='M4 0C4 0 0 5 0 7.2a4 4 0 0 0 8 0C8 5 4 0 4 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hp-perks .hp-chip-extra::after { display: none; } /* (the tag says it) */

/* Trying a Glow extra on (someone without Glow): lit with a dashed ring, and a note under them
   that it isn't saved (with the way to Glow's box, which the GLOW tag opens too). */
/* Your pet, in the Pet tab: as it is, with whether it's on your page. */
.hp-pet-here { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.hp-pet-here .hp-pet { width: 88px; height: 72px; --pw: 88px; }
.hp-pet-here strong { display: block; margin-bottom: 2px; font: 400 14px/1.2 Silkscreen, sans-serif; letter-spacing: 0.02em; color: #3b2f25; }
.hp-pet-here .hp-row { margin: 6px 0 0; }
/* Picking a pet: each one there to see, as it is, standing about. */
.hp-pet-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.hp-pet-pick {
  display: grid; justify-items: center; gap: 2px;
  width: 104px; padding: 8px 6px 7px;
  background: #fff; color: #3b2f25;
  border: 1px solid #e0d2b6; border-radius: 12px; box-shadow: 0 2px 0 #e0d2b6;
  font-size: 13px; font-weight: 650;
}
.hp-pet-pick:hover { border-color: #b99b6b; transform: translateY(-1px); }
.hp-pet-pick[aria-pressed="true"] { border-color: #3b2f25; box-shadow: 0 0 0 2px #3b2f25; }
.hp-pet-pick .hp-pet { width: 66px; height: 54px; --pw: 66px; }
.hp-pet-empty { display: grid; place-items: center; width: 60px; height: 60px; }
.hp-pet-empty::before { content: ''; width: 34px; height: 34px; border: 2px dashed #cdb68f; border-radius: 50%; }
.hp-coat { display: inline-flex; align-items: center; gap: 6px; }
.hp-coat-dot { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(59, 47, 37, 0.45); }
.hp-pet-care-tray { max-width: 360px; margin-bottom: 8px; }

button.hp-perk-tag { border: 0; cursor: pointer; }
.hp-chip-trying { outline: 2px dashed #b77bff; outline-offset: 2px; }
.hp-perks .hp-perk-note { margin: 10px 0 0; color: #6b5840; font-size: 12.5px; }
.hp-perk-more { margin-left: 2px; padding: 0; border: 0; background: none; color: #7d45cf; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }