body {
  align-items: center;
  background-color: #f4f4f4;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  font-family: Arial, sans-serif;
  justify-content: center;
  margin: 0;
  min-block-size: 100svh;
  padding-block: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-bottom));
}

button {
  display: inline-flex;
  align-items: center;
  padding: clamp(1vh, 2vw, 3rem);
  cursor: pointer;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5vw;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #0056b3;
}

img, svg {
  max-width: 100%;
  max-height: 40vh;
}

button img, button svg{
  width: 1.5em;
  height: 1em;
  border: none;
  margin-right: 0.3em;
}

#media-background {
  align-items: center;
  block-size: 100svh;
  display: flex;
  inset: 0;
  justify-content: center;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  transition: opacity 180ms ease-out;
  z-index: 0;
}

#media-background[data-state="ready"] { opacity: 1; }

#media-background[data-state="loading"] {
  opacity: .24;
}

#media-background[data-state="loading"]::after {
  color: #fff;
  content: '✦';
  font-size: clamp(2rem, 12vw, 5rem);
  position: relative;
  text-shadow: 0 0 .45em #000;
  z-index: 1;
}

#loading-mark {
  align-items: center;
  block-size: 68svh;
  display: flex;
  inset: 0 0 auto;
  justify-content: center;
  pointer-events: none;
  position: fixed;
  z-index: 2;
}

#loading-mark[hidden] { display: none; }

#loading-mark svg {
  block-size: clamp(2.8rem, 10vw, 5.5rem);
  inline-size: clamp(2.8rem, 10vw, 5.5rem);
  filter: drop-shadow(0 0 .6rem rgba(0,0,0,.7));
}

.zenith-wave {
  transform: translate3d(var(--wave-x, 0px), var(--wave-y, 0px), 0) rotate(var(--wave-rotate, 0deg));
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

@media (prefers-reduced-motion: reduce) {
  .zenith-wave { transform: none !important; }
}

#media-background img {
  block-size: 100%;
  inline-size: 100%;
  max-height: none;
  max-width: none;
  object-fit: cover;
}

#whole {
  --frame-edge: clamp(6rem, 14svh, 12rem);
  block-size: min(95vw, calc(100svh - var(--frame-edge)));
  box-sizing: border-box;
  color: #333;
  container-type: size;
  display: grid;
  font-size: clamp(5vw, 10vh, 5rem);
  grid-template-rows: minmax(0, 1fr) auto;
  inline-size: min(95vw, calc(100svh - var(--frame-edge)));
  padding-block-end: clamp(2.5rem, 6svh, 5rem);
  position: relative;
  text-align: center;
  z-index: 1;
}

#actions {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(.6rem, 3vw, 2rem);
  grid-row: 2;
  justify-content: center;
  min-inline-size: 0;
  position: relative;
  z-index: 2;
}

#actions[data-hash-open="true"] #hash {
  flex-basis: min(100%, 42rem);
}

#actions[data-hash-open="true"] button#zenith {
  padding-block: clamp(.32rem, 1svh, .72rem);
}

#actions[data-hash-open="true"] button#zenith svg {
  block-size: .82em;
}

button#zenith {
  flex: 0 1 auto;
  font-size: clamp(5vw, 5vh, 3rem);
  margin: 0;
  max-inline-size: 80vw;
}

button#media-toggle {
  flex: 0 0 auto;
  font-size: clamp(1.2rem, 4vw, 2rem);
  line-height: 1;
  margin: 0;
  padding: clamp(.45rem, 1.2vw, .85rem);
}

button#media-toggle[hidden] { display: none; }

#answer {
  align-items: center;
  color: #aaa;
  display: flex;
  grid-column: 1 / -1;
  grid-row: 1;
  justify-content: center;
  margin: 0;
  min-block-size: 0;
  min-inline-size: 0;
  overflow: visible;
  padding: clamp(.25rem, 1vw, .75rem);
  transition: opacity 0.1s ease;
}

#answer .answer-text {
  display: block;
  font-size: clamp(2rem, min(15cqw, 15cqh), 6rem);
  line-height: .94;
  max-inline-size: 96cqw;
  overflow-wrap: anywhere;
}

#answer[data-mode="media"] {
  align-items: center;
  position: relative;
  z-index: 1;
}

#answer[data-mode="media"] .random-media {
  max-block-size: min(34cqh, 34svh, 22rem);
  max-inline-size: min(58cqw, 58svw, 32rem);
  position: relative;
  z-index: 2;
}

#answer[data-mode="media"] .random-media:has(img),
#answer[data-mode="media"] .random-media:has(video),
#answer[data-mode="media"] .random-media:has(audio) {
  align-items: center;
  block-size: min(34cqh, 34svh, 22rem);
  display: flex;
  inline-size: min(58cqw, 58svw, 32rem);
  justify-content: center;
}

#answer[data-mode="media"] .random-media img,
#answer[data-mode="media"] .random-media video,
#answer[data-mode="media"] .random-media audio {
  block-size: 100%;
  inline-size: 100%;
  max-block-size: 100%;
  max-inline-size: 100%;
  object-fit: contain;
}

#answer.foreground-hidden .random-media {
  opacity: 0;
  pointer-events: none;
}

#answer[data-mode="loading"] { opacity: 0; }

#hash {
  align-items: center;
  background-color: #007bff;
  border-radius: 5vw;
  color: white;
  display: flex;
  flex: 0 1 auto;
  font-size: clamp(1rem, 3.5vw, 2rem);
  margin: 0;
  max-inline-size: 100%;
  padding: clamp(1vh, 2vw, 3rem);
}

#answer img, #answer svg, #answer video, #answer audio, #answer .random-media {
  max-block-size: 100%;
  max-inline-size: 100%;
}

#answer .random-media {
  display: block;
  overflow: hidden;
}

#answer .random-media img, #answer .random-media video {
  block-size: auto;
  inline-size: auto;
  object-fit: contain;
}

#answer .random-title {
  font-size: clamp(1.5rem, 7vw, 4rem);
}

#answer .special-status {
  font-size: clamp(1.2rem, 5vw, 2.4rem);
  line-height: 1.25;
  margin: 0;
}

#answer .special-status small {
  font-size: .55em;
}

button#info,
button#special {
  block-size: 2.55rem;
  box-sizing: border-box;
  inline-size: 4.25rem;
  justify-content: center;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 3vh;
  z-index: 3;
}

button#info { right: 3vw; }

button#special {
  background: transparent;
  color: currentColor;
  left: 3vw;
  opacity: .12;
}

button#special:focus-visible,
button#special:active {
  background: #007bff;
  color: white;
  opacity: .8;
}

.dialog {
	display:none;
	position:fixed;
  z-index: 10;
	top:0;left:0;
	width:100%;
	height:100%;
	overflow-y:scroll;
	background:rgba(0,0,0,0.8);
}
.dialog-padding {
	background:#fff;
	margin:15% auto;
	padding:20px;
	width:80%;
	max-width:600px;
}
.dialog-content {
	margin:0;
	padding:0;
	width:100%;
	height:100%;
}

.c {
	color: #aaa;
	float: right;
	font-size: 2rem;
	font-weight: bold;
}

.c:hover {
	color: #000;
	text-decoration: none;
	cursor: pointer;
}

@media (prefers-color-scheme: dark) {
  html, body {
    background: #000;
    color: #ccc;
  }
  a {
    color: #666;
  }
  #answer {
    color: #aaa;
  }
  .dialog-padding {
    background: #222;
  }
}

/* post-baseline additions: number stays primary; coloured dots trace the same response. */
#hash {
  flex-direction: column;
  gap: .16em;
  justify-content: center;
  max-inline-size: min(94vw, 44rem);
}

#hash-toggle {
  background: transparent;
  color: inherit;
  font: inherit;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.chance-edit {
  display: block;
  inline-size: 100%;
}

.chance-edit input {
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  inline-size: 100%;
  min-inline-size: 0;
  outline: 0;
  padding: 0;
  text-align: center;
}

.chance-edit input:focus-visible {
  outline: .12em solid rgba(255, 255, 255, .82);
  outline-offset: .18em;
}

#hash[data-valid="false"] .chance-edit input { color: #ffd1d1; }

.sr-only {
  block-size: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

.chance-number {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  overflow-wrap: anywhere;
}

.chance-shape {
  display: grid;
  gap: .14em;
  grid-template-columns: repeat(9, 1fr);
  inline-size: min(20vw, 7rem);
}

.chance-dot {
  background: hsl(var(--hue) 80% 82%);
  block-size: .34em;
  border-radius: 50%;
  display: block;
  inline-size: .34em;
  opacity: calc(.34 + var(--weight) * .066);
  transform: scale(calc(.48 + var(--weight) * .06));
}

#hash[data-open="true"] {
  border-radius: 1.1em;
  min-block-size: 0;
  padding: .28em .55em;
}

#hash[data-open="true"] .chance-number {
  font-size: clamp(.56rem, 1.8vw, 1.12rem);
  max-inline-size: 100%;
}

#hash[data-open="true"] .chance-shape {
  grid-template-columns: repeat(9, 1fr);
  inline-size: min(74vw, 22rem);
}

#hash[data-open="true"] .chance-dot {
  animation: zenith-drift 1.8s ease-in-out infinite alternate;
  animation-delay: calc(var(--index) * -45ms);
  block-size: .28em;
  inline-size: .28em;
}

.love {
  display: block;
  font-size: .72rem;
  margin-inline-end: 2.5rem;
  overflow-wrap: anywhere;
}

.close {
  color: #aaa;
  cursor: pointer;
  float: right;
  font-size: 2rem;
  font-weight: bold;
}

.close:hover { color: #000; }

@keyframes zenith-drift {
  from { filter: brightness(.8); transform: scale(calc(.48 + var(--weight) * .06)) translateY(-.08em); }
  to { filter: brightness(1.25); transform: scale(calc(.48 + var(--weight) * .06)) translateY(.08em); }
}

@media (prefers-reduced-motion: reduce) {
  .chance-dot { animation: none !important; }
}

#soundtrack-toggle{background:transparent;color:currentColor;left:3vw;opacity:.7;position:absolute;top:7.2vh;z-index:3}#soundtrack-toggle[aria-pressed="true"]{background:#007bff;color:white;opacity:1}#soundtrack-status{color:currentColor;font:600 .7rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;left:calc(3vw + 3.3rem);opacity:.7;position:absolute;top:8.35vh;z-index:3}.random-media img,#media-background img{animation:zenith-colour-drift var(--colour-duration,58s) ease-in-out infinite alternate;transform:translate3d(var(--colour-x,0),var(--colour-y,0),0) rotate(var(--colour-turn,0deg)) scale(var(--colour-scale,1.035));transform-origin:50% 50%;will-change:transform}@keyframes zenith-colour-drift{from{filter:saturate(.94) brightness(.98)}to{filter:saturate(1.14) brightness(1.05)}}@media (prefers-reduced-motion: reduce){.random-media img,#media-background img{animation:none!important;transform:none!important}#soundtrack-toggle{display:none}}