/* Container-scoped, same as the mosaic viewer, so this drops into a site route
   or runs as its own page without a second copy of any of it. */
.dr {
  position: relative;
  overflow: hidden;
  background: #0c0c0e;
  color: #f2efe9;
  font-family: Fraunces, Georgia, serif;
  --dr-dim: #9a948a;
  --dr-rule: #2a2a30;
  touch-action: none;
  cursor: grab;
}

.dr--full { position: fixed; inset: 0; }
.dr.is-turning { cursor: grabbing; }

.dr__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.dr .panel {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.9);
}

.dr__title { top: 1.1rem; left: 1.3rem; }
.dr__title h2 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.dr__title p { margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--dr-dim); font-style: italic; }

.dr__rpm { top: 1.1rem; right: 1.3rem; text-align: right; }
.dr__rpm .n { font-size: 1.8rem; line-height: 1; font-variant-numeric: tabular-nums; }
.dr__rpm .l { font-size: 0.68rem; color: var(--dr-dim); letter-spacing: 0.09em; text-transform: uppercase; }
.dr__rpm .d { font-size: 0.68rem; color: var(--dr-dim); margin-top: 0.3rem; font-variant-numeric: tabular-nums; }

/* The crank. Rotates with the spiral and can be grabbed directly. */
.dr__crank {
  position: absolute;
  z-index: 6;
  left: 1.3rem;
  bottom: 1.1rem;
  width: 112px;
  height: 112px;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}
.dr__crank svg { width: 100%; height: 100%; overflow: visible; }
.dr__crank .ring { fill: none; stroke: var(--dr-rule); stroke-width: 1.5; }
.dr__crank .arm { stroke: #f2efe9; stroke-width: 5; stroke-linecap: round; }
.dr__crank .spindle { fill: #f2efe9; }
.dr__crank .pedal { fill: #0c0c0e; stroke: #f2efe9; stroke-width: 3; }
.dr__crank .tooth { stroke: var(--dr-rule); stroke-width: 2; stroke-linecap: round; }

.dr__controls {
  position: absolute; z-index: 6; bottom: 1.1rem; right: 1.3rem;
  display: flex; gap: 0.45rem; align-items: center;
}
.dr__controls button {
  pointer-events: auto; font-family: inherit; font-size: 0.72rem;
  letter-spacing: 0.05em; text-transform: uppercase;
  background: rgba(12, 12, 14, 0.72); color: #f2efe9;
  border: 1px solid var(--dr-rule); border-radius: 999px;
  padding: 0.45rem 0.9rem; cursor: pointer; backdrop-filter: blur(6px);
}
.dr__controls button:hover { border-color: #f2efe9; }
.dr__controls button[hidden] { display: none; }
.dr__controls button.is-live { border-color: #6f9f6a; color: #cfe6cc; }

.dr__hint {
  position: absolute; z-index: 5; left: 50%; bottom: 4.4rem;
  transform: translateX(-50%); text-align: center;
  color: var(--dr-dim); font-size: 0.82rem; font-style: italic;
  transition: opacity 0.6s ease; pointer-events: none;
}

.dr__load {
  position: absolute; z-index: 7; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  color: var(--dr-dim); font-size: 0.8rem; font-style: italic;
  transition: opacity 0.5s ease;
}

@media (max-width: 40rem) {
  .dr__crank { width: 84px; height: 84px; left: 50%; transform: translateX(-50%); bottom: 0.8rem; }
  .dr__controls { bottom: 0.8rem; }
  .dr__hint { bottom: 6.6rem; }
}