/* Double diamond (widgets/diamond/diamond.js) */
.dd { --dd-ink: var(--ink-2); --dd-soft: var(--muted); --dd-fill: color-mix(in srgb, var(--mark) 50%, var(--tile-bg)); color: var(--dd-ink); }
.dd__svg { display: block; width: 100%; height: 100%; font-family: var(--font); overflow: visible; }
.dd__lead path { fill: none; stroke-width: 7; color: var(--dd-soft); }
.dd__hyp text { text-anchor: end; font-size: 12px; letter-spacing: .06em; fill: var(--dd-soft); }
.dd__fill { fill: var(--dd-fill); opacity: 0; transition: opacity .6s ease; }
.dd__fill.is-on { opacity: 1; }
.dd__guide { fill: none; stroke: var(--dd-soft); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .6; }
.dd__line { fill: none; stroke: var(--dd-ink); stroke-width: 8; stroke-linejoin: miter; }
.dd__big { text-anchor: middle; font-size: 38px; font-weight: 300; letter-spacing: .14em; fill: var(--dd-ink); pointer-events: none; }
.dd__edge { font-size: 18px; font-style: italic; font-weight: 400; fill: var(--dd-soft); opacity: .7; transition: opacity .3s ease; pointer-events: none; }
.dd__edge.is-on { font-weight: 700; fill: var(--dd-ink); opacity: 1; }

.dd__ps { opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.dd--ps-seen .dd__ps { opacity: 1; }
.dd__ps-shape { fill: var(--tile-bg); stroke: var(--dd-soft); stroke-width: 2; transition: stroke .3s ease; }
.dd__ps text { text-anchor: middle; font-size: 14px; font-weight: 700; letter-spacing: .06em; fill: var(--dd-soft); transition: fill .3s ease; }
.dd__bracket { fill: none; stroke: var(--mark); stroke-width: 2; opacity: 0; transition: opacity .4s ease; }
.dd--ps .dd__ps-shape { stroke: var(--mark); }
.dd--ps .dd__ps text { fill: var(--mark); }
.dd--ps .dd__bracket { opacity: 1; }

.dd__phase { font-size: 19px; font-weight: 700; letter-spacing: .04em; fill: var(--dd-ink); }
.dd__m { font-size: 12.5px; fill: var(--dd-soft); transition: font-size .35s ease, fill .3s ease, y .35s ease; }
.dd__col.is-on .dd__m { font-size: 17px; font-weight: 600; fill: var(--ink); }
.dd__link { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; cursor: pointer; }
.dd__link:hover { fill: var(--mark); }
.dd__col { cursor: pointer; }

.dd__hit { fill: transparent; cursor: pointer; outline: none; }
.dd__hit:focus-visible { stroke: var(--mark); stroke-width: 3; }
.dd__dots circle { fill: var(--dd-soft); opacity: .45; cursor: pointer; transition: opacity .2s ease; }
.dd__dots circle.is-on { fill: var(--mark); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .dd__fill, .dd__m, .dd__ps, .dd__bracket, .dd__edge { transition: none; }
}