/* Yorkshire: white rose on a Yorkshire-blue field */
:root {
  --bg: #0b5fae;
  --glow-a: #5bb0ea;
  --glow-b: #063a6e;
  --accent: #0b5fae;
  --muted: #d6e6f5;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #07427c;
    --glow-a: #2f86cc;
    --glow-b: #03203f;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}
.glow {
  position: fixed;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  pointer-events: none;
}
.glow-a {
  background: var(--glow-a);
  top: -20vmax;
  left: -15vmax;
  animation: drift-a 22s ease-in-out infinite alternate;
}
.glow-b {
  background: var(--glow-b);
  bottom: -25vmax;
  right: -15vmax;
  animation: drift-b 26s ease-in-out infinite alternate;
}
@keyframes drift-a { to { transform: translate(18vmax, 14vmax) scale(1.1); } }
@keyframes drift-b { to { transform: translate(-16vmax, -12vmax) scale(0.95); } }
.center {
  position: relative;
  height: 100%;
  height: 100dvh;
  display: grid;
  place-items: center;
  gap: 16px;
  align-content: center;
}
.mark {
  width: 128px;
  height: 128px;
  background: url("/rose.svg") center / contain no-repeat;
  color: var(--accent);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 40px;
  filter: drop-shadow(0 10px 24px rgba(3, 32, 63, 0.45));
  text-decoration: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  cursor: grab;
  will-change: transform;
}
.mark.grabbing { cursor: grabbing; }
a.mark { cursor: pointer; }
/* Trim the letter to its x-height so the lowercase "a" is optically centred */
.mark span {
  display: block;
  line-height: 1;
  text-box: trim-both ex alphabetic;
}
@supports not (text-box: trim-both ex alphabetic) {
  .mark span { padding-bottom: 0.2em; }
}
.note { color: var(--muted); font-size: 0.875rem; margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .glow { animation: none; }
}