/* Double Diamond pills (widgets/pills/pills.js) */
.dd2 { overflow: hidden; touch-action: pan-y; }
.dd2__shape { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dd2__axis { stroke: var(--a-line); stroke-dasharray: 3 5; }
.dd2__field { position: absolute; inset: 0; }
.dd2__pill { position: absolute; top: 0; left: 0; display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border: 0; border-radius: 100px;
  background: var(--a-card); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 34%, transparent); color: var(--ink-2);
  font-size: 11px; line-height: 1.2; letter-spacing: .01em; white-space: nowrap; will-change: transform; touch-action: none;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.dd2__pill[data-k="0"] { --c: var(--a-teal); } .dd2__pill[data-k="1"] { --c: var(--a-orange); }
.dd2__pill[data-k="2"] { --c: var(--a-blue); } .dd2__pill[data-k="3"] { --c: var(--a-green); }
.dd2__pill:hover, .dd2__pill:focus-visible, .dd2__pill.is-held { background: var(--c); color: #fff; box-shadow: none; outline: none; z-index: 2; }
/* Turning points: outlined in ink, so they don't read as phase pills. */
.dd2__pill.is-key { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); font-weight: 600; }
.dd2__pill.is-held { z-index: 3; }
.dd2__go { font-size: 11px; stroke-width: 2; opacity: .7; }
.dd2__hint { position: absolute; right: 14px; bottom: 8px; margin: 0; pointer-events: none; }
/* The phase pills: fixed on the axis. */
.dd2__pill--d { flex-direction: column; gap: 0; padding: 6px 16px; background: #55575d; color: #fff; box-shadow: none; cursor: default; z-index: 1; }
.dd2__pill--d b { font-size: 12px; font-weight: 600; letter-spacing: .1em; }
.dd2__pill--d:hover { background: #55575d; }
.dd2--v .dd2__pill { padding: 2px 8px; font-size: 10px; }
.dd2--v .dd2__hint { display: none; }