/* Amrita — Song DNA (the genome of a song, drawn as the film's clock) · owned by js/songdna.js
   Frameless: no box, no border. A soft slate pool sits under the strand (no edges) so white marks keep their contrast
   on the page's grey; the strand's ends dissolve into the page. Phones: a vertical strand. */

.sdna {
  --sd-ink: #f6f7fb;
  --sd-ink-2: rgba(246, 247, 251, .82);
  --sd-warm: #fff3e0;
  --sd-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --sd-sans: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --sd-halo: 0 0 3px rgba(82, 87, 101, .55), 0 0 14px rgba(82, 87, 101, .7);
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  color: var(--sd-ink);
  font-family: var(--sd-sans);
  -webkit-tap-highlight-color: transparent;
}

.sdna__stage {
  position: relative;
  height: clamp(380px, 58vh, 600px);
  height: clamp(min(380px, calc(100svh - 120px)), 58svh, 600px);
  isolation: isolate;
}
/* the pool: a borderless slate glow under the strand, fading to nothing at every edge */
.sdna__stage::before {
  content: ""; position: absolute; inset: -6% -4%; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 52% at 50% 54%, rgba(82, 87, 101, .38) 0%, rgba(82, 87, 101, .2) 46%, rgba(82, 87, 101, 0) 78%);
}
.sdna__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.sdna.is-dragging .sdna__canvas { cursor: grabbing; }

.sdna__hud {
  position: absolute; left: 12px; top: 0; right: 12px; pointer-events: none;
  display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline;
  font-family: var(--sd-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  text-shadow: var(--sd-halo);
}
.sdna__hud-title { color: var(--sd-ink); }
.sdna__hud-read { color: var(--sd-warm); font-variant-numeric: tabular-nums; white-space: nowrap; }

.sdna__caption {
  margin: 10px auto 0; max-width: 46ch; min-height: 2.9em; /* two lines; js/songdna.js reserves the longest line exactly */ text-align: center;
  font-family: var(--sd-sans); font-size: 17px; line-height: 1.45; font-weight: 400;
  color: var(--sd-ink); text-shadow: var(--sd-halo);
  transition: opacity .3s ease;
}

.sdna__controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 12px; margin: 18px 0 0; }
.sdna__btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 18px 10px 14px; cursor: pointer;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .34);
  background: rgba(82, 87, 101, .34); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  color: var(--sd-ink); font-family: var(--sd-mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
  transition: background .25s, border-color .25s;
}
.sdna__btn:hover, .sdna__btn:focus-visible { background: rgba(82, 87, 101, .5); border-color: rgba(255, 255, 255, .7); }
.sdna__btn.is-on { border-color: var(--sd-warm); }
.sdna__btn[hidden] { display: none; }
.sdna__ico { position: relative; width: 14px; height: 14px; flex: none; }
.sdna__ico--play::before { content: ""; position: absolute; left: 3px; top: 1px; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.sdna__btn.is-on .sdna__ico--play::before { left: 2px; top: 1px; width: 3px; height: 12px; border: 0; background: currentColor; box-shadow: 6px 0 0 currentColor; }
.sdna__ico--sound::before { content: ""; position: absolute; left: 1px; top: 4px; width: 4px; height: 6px; background: currentColor; box-shadow: 3px 0 0 -1px currentColor; }
.sdna__ico--sound::after { content: ""; position: absolute; left: 6px; top: 1px; width: 8px; height: 12px; border: 1.5px solid currentColor; border-left: 0; border-radius: 0 12px 12px 0; opacity: .8; }
.sdna__hint { font-family: var(--sd-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--sd-ink-2); text-shadow: var(--sd-halo); }

.sdna__map { position: relative; height: 34px; margin: 18px auto 0; max-width: 980px; cursor: pointer; touch-action: none; border-radius: 6px; }
.sdna__map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.sdna__legend { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; font-family: var(--sd-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; text-shadow: var(--sd-halo); }
.sdna__key { display: inline-flex; align-items: center; gap: 8px; }
.sdna__key i { display: inline-block; width: 18px; height: 10px; flex: none; }
.sdna__key--cuts i { border: 1px solid #fff; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, .5) 0 45%, transparent 45% 55%, rgba(255, 255, 255, .5) 55%); }
.sdna__key--tone i { height: 1px; background: #fff; }
.sdna__key--energy i { height: 10px; border-radius: 6px; background: rgba(255, 255, 255, .28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.sdna__key--beats i { height: 10px; background: repeating-linear-gradient(90deg, #fff 0 1px, transparent 1px 5px); }
.sdna__key--parts i { height: 8px; border-radius: 3px; background: rgba(255, 255, 255, .22); }

.sdna__stats { margin: 12px auto 0; max-width: 70ch; text-align: center; font-family: var(--sd-mono); font-size: 12px; letter-spacing: .06em; line-height: 1.7; color: var(--sd-ink); text-shadow: var(--sd-halo); font-variant-numeric: tabular-nums; }
.sdna.is-failed .sdna__stage, .sdna.is-failed .sdna__map, .sdna.is-failed .sdna__controls, .sdna.is-failed .sdna__legend { display: none; }

/* phones: the vertical strand (time runs down) */
.sdna.is-vertical .sdna__stage { height: clamp(460px, 74svh, 640px); }
/* the readout sits above the strand, clear of the first frame and the band labels */
.sdna.is-vertical .sdna__stage { margin-top: 34px; }
.sdna.is-vertical .sdna__hud { top: auto; bottom: calc(100% + 14px); }
@media (max-width: 639px) {
  .sdna__stage { height: clamp(460px, 74vh, 640px); height: clamp(min(460px, calc(100svh - 120px)), 74svh, 640px); }
  .sdna__hud { left: 0; right: 0; top: -2px; font-size: 11.5px; letter-spacing: .08em; gap: 2px 12px; }
  .sdna__hud-title { display: none; }
  .sdna__caption { font-size: 16px; }
  .sdna__hint { width: 100%; text-align: center; font-size: 11.5px; }
  .sdna__legend { gap: 6px 14px; font-size: 11.5px; }
  .sdna__stats { font-size: 11.5px; }
}
.sdna .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { .sdna__caption { transition: none; } }