:root {
  color-scheme: light;
  --page-bg: #f8f5ef;
  --ink: #111111;
  --paper: #fffdf8;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.9) 0 20%, rgba(255, 255, 255, 0) 21%),
    linear-gradient(180deg, #f6f1e7 0%, var(--page-bg) 100%);
  color: var(--ink);
  font-family: "Cormorant Garamond", Georgia, serif;
}

.app-shell {
  width: min(92vw, 92vh);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.memory-wheel {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  touch-action: none;
  user-select: none;
}

.ring-cell {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 2;
}

.ring-letter {
  fill: var(--ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}

.ring-boundary {
  fill: var(--ink);
}

.ring-group {
  cursor: grab;
  transform-origin: 400px 400px;
  transition: transform 180ms ease-out;
}

.ring-group.is-dragging {
  cursor: grabbing;
  transition: none;
}