/* The DNA illustration extends the site's existing ambient-motion lifecycle. */
.dnk-feature { position:relative; isolation:isolate; }
.dnk-feature::before {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse at 86% 28%,#fff5cc66,transparent 39%),radial-gradient(ellipse at 44% 2%,#fbe3f280,transparent 38%);
}
.dnk-discovery { container-type:inline-size; }
.dnk-orbit { margin-top:24px; }
.dnk-orbit::before { inset:3% 4%; background:radial-gradient(ellipse,#b8a0e76b,transparent 65%); }
.dnk-orbit::after {
  content:''; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background-image:radial-gradient(#8b71b94d .8px,transparent .8px); background-size:20px 20px;
  mask-image:radial-gradient(ellipse,#0008,transparent 70%);
}
.dnk-orbit-lines { overflow:visible; pointer-events:none; }
.dnk-orbit-lines>ellipse { stroke:#9a7fc1; opacity:.5; }
.dnk-orbit-lines .dnk-comet { stroke:var(--accent); stroke-width:3; stroke-linecap:round; stroke-dasharray:2 98; opacity:.65; }
.dnk-orbit-lines .dnk-comet-two { stroke:#fffdf5; stroke-width:4; stroke-dasharray:1 99; }
.dnk-satellites,.dnk-orbit-dashes { transform-origin:270px 220px; }
.dnk-orbit-lines .dnk-orbit-dot-light { fill:var(--yellow); stroke:#b69dce; stroke-width:1; }
.dnk-connections { opacity:.4; }
.dnk-core {
  background:radial-gradient(circle at 30% 22%,#fff9a8,var(--yellow) 68%);
  box-shadow:inset 0 2px 1px #ffffffe6,0 18px 42px -15px #8761b74d;
}
.dnk-core::before,.dnk-core::after { content:''; position:absolute; inset:-9%; border:1px solid #fff9c6b3; border-radius:50%; pointer-events:none; }
.dnk-core::after { inset:-20%; border:1px solid #b29ac936; }
.dnk-core>svg { filter:drop-shadow(0 3px 0 #ffffff55); }
.dnk-ingredients { position:absolute; inset:0; z-index:3; }
.dnk-ingredient { box-shadow:0 16px 28px -20px #684f9566,inset 0 1px 0 #fff; transition:box-shadow .35s,border-color .35s; }
.dnk-ingredient>span { padding-right:20px; }
.dnk-card-icon { position:absolute; right:13px; top:14px; width:20px; height:20px; stroke:#8d72af; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
.dnk-ingredient-goal { --dnk-float-x:3px; --dnk-float-y:-9px; --dnk-float-turn:1.5deg; --dnk-float-time:7.2s; --dnk-float-delay:-1.1s; }
.dnk-ingredient-strength { --dnk-float-x:-4px; --dnk-float-y:8px; --dnk-float-turn:-2deg; --dnk-float-time:8.4s; --dnk-float-delay:-3.5s; }
.dnk-ingredient-barrier { --dnk-float-x:4px; --dnk-float-y:-7px; --dnk-float-turn:-1.8deg; --dnk-float-time:7.8s; --dnk-float-delay:-5.2s; }
.dnk-ingredient-pace { --dnk-float-x:-3px; --dnk-float-y:9px; --dnk-float-turn:2deg; --dnk-float-time:9s; --dnk-float-delay:-2.4s; }
.dnk-decor { position:absolute; inset:0; pointer-events:none; z-index:1; color:#9271bb; }
.dnk-decor>span,.dnk-decor>svg { position:absolute; }
.dnk-personal-stamp { left:41%; top:-3%; display:flex; align-items:center; gap:9px; padding:7px 12px; border:1px solid #ffffffbf; border-radius:100px; background:#f9f5ffb3; color:#76618e; font-size:11px; white-space:nowrap; transform:rotate(8deg); }
.dnk-personal-stamp i { font-size:16px; font-style:normal; line-height:1; }
.dnk-spark { width:27px; height:27px; fill:currentColor; }
.dnk-spark-top { right:3%; top:0; color:#fffdf5; }
.dnk-spark-left { left:23%; top:45%; width:22px; height:22px; color:#a284c2; }
.dnk-doodle { left:1%; top:46%; width:16%; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transform:rotate(-13deg); }
.dnk-mini-orbit { right:2%; top:45%; width:37px; height:37px; border:1px solid #a58ac8; border-radius:50%; transform:rotate(-28deg); }
.dnk-mini-orbit::before { content:''; position:absolute; inset:10px -9px; border:1px solid #a58ac8; border-radius:50%; }
.dnk-mini-orbit i { position:absolute; width:9px; height:9px; border-radius:50%; background:var(--yellow); top:-4px; left:13px; }
.dnk-plus { font-size:27px; font-family:Arial,sans-serif; font-weight:300; line-height:1; }
.dnk-plus-one { left:1%; top:1%; transform:rotate(12deg); }
.dnk-plus-two { left:43%; bottom:6%; font-size:20px; }
.dnk-speck { width:5px; height:5px; border-radius:50%; background:currentColor; }
.dnk-speck-one { left:19%; top:39%; }
.dnk-speck-two { right:24%; top:38%; width:4px; height:4px; background:#fffdf5; }
.dnk-speck-three { left:31%; bottom:1%; width:6px; height:6px; background:#b496d2; }
.dnk-sound { left:48%; bottom:5%; display:flex; align-items:center; gap:3px; height:24px; transform:rotate(7deg); }
.dnk-sound i { width:3px; height:10px; background:#a389bd; border-radius:3px; }
.dnk-sound i:nth-child(2),.dnk-sound i:nth-child(4) { height:17px; }
.dnk-sound i:nth-child(3) { height:24px; }
.dnk-discovery-caption { margin-top:16px; }
.dnk-discovery-caption>span { position:relative; border:0; }
.dnk-discovery-caption>span::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:5px; border:1.5px solid #9874b7; border-color:#9874b7 transparent transparent; border-radius:50%; transform:rotate(-3deg); }
.dnk-actions .button .arrow { transition:transform .35s; }
.dnk-actions .button:focus-visible .arrow { transform:translate(3px,-3px); }
@media(hover:hover) and (pointer:fine) {
  .dnk-ingredient:hover { box-shadow:0 22px 36px -20px #684f9570,inset 0 1px 0 #fff; border-color:#fff; }
  .dnk-actions .button:hover .arrow { transform:translate(3px,-3px); }
}
@media(prefers-reduced-motion:no-preference) {
  .motion-ready .dnk-ingredient { animation:dnk-card-float var(--dnk-float-time) ease-in-out var(--dnk-float-delay) infinite; }
  .motion-ready .dnk-core { animation:dnk-core-breathe 8s ease-in-out infinite; }
  .motion-ready .dnk-core::before { animation:dnk-halo 5s ease-in-out infinite; }
  .motion-ready .dnk-core::after { animation:dnk-halo 5s ease-in-out -2.5s infinite reverse; }
  .motion-ready .dnk-orbit::before { animation:dnk-glow 12s ease-in-out infinite; }
  .motion-ready .dnk-comet { animation:dnk-comet-travel 18s linear infinite; }
  .motion-ready .dnk-comet-two { animation-duration:24s; animation-delay:-8s; animation-direction:reverse; }
  .motion-ready .dnk-satellites { animation:dnk-orbit-turn 32s linear infinite; }
  .motion-ready .dnk-orbit-dashes { animation:dnk-orbit-turn 100s linear infinite reverse; }
  .motion-ready .dnk-core>svg,.motion-ready .dnk-spark { animation:dnk-sparkle 7s ease-in-out infinite; transform-origin:center; }
  .motion-ready .dnk-spark-top { animation-delay:-2s; animation-duration:9s; }
  .motion-ready .dnk-spark-left { animation-delay:-4s; }
  .motion-ready .dnk-personal-stamp { animation:dnk-detail-float 8s ease-in-out -2s infinite; }
  .motion-ready .dnk-mini-orbit { animation:dnk-orbit-turn 20s linear infinite; }
  .motion-ready .dnk-doodle { animation:dnk-detail-float 7s ease-in-out -4s infinite; }
  .motion-ready .dnk-plus { animation:dnk-sparkle 11s ease-in-out -3s infinite; }
  .motion-ready .dnk-speck { animation:dnk-speck-drift 6s ease-in-out infinite; }
  .motion-ready .dnk-speck-two { animation-delay:-2s; }.motion-ready .dnk-speck-three { animation-delay:-4s; }
  .motion-ready .dnk-sound i { animation:dnk-sound-wave 1.8s ease-in-out infinite alternate; }
  .motion-ready .dnk-sound i:nth-child(2) { animation-delay:-.7s; }.motion-ready .dnk-sound i:nth-child(3) { animation-delay:-1.1s; }.motion-ready .dnk-sound i:nth-child(4) { animation-delay:-.4s; }.motion-ready .dnk-sound i:nth-child(5) { animation-delay:-1.4s; }
  /* One inherited state controls all CSS animations, including pseudo-elements. */
  .motion-ready .dnk-feature .dnk-orbit *,
  .motion-ready .dnk-feature .dnk-orbit *::before,
  .motion-ready .dnk-feature .dnk-orbit *::after,
  .motion-ready .dnk-feature .dnk-orbit::before,
  .motion-ready .dnk-feature .dnk-orbit::after { animation-play-state:var(--ambient-state,paused); }
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .dnk-ingredients { translate:var(--dnk-pointer-x,0px) var(--dnk-pointer-y,0px); transition:translate .6s cubic-bezier(.2,.7,.2,1); }
  .dnk-decor { translate:calc(var(--dnk-pointer-x,0px) * -1.4) calc(var(--dnk-pointer-y,0px) * -1.4); transition:translate .8s cubic-bezier(.2,.7,.2,1); }
  .motion-ready .dnk-feature .dnk-ingredient:hover { animation-play-state:paused; }
}
@keyframes dnk-card-float { 0%,100% { translate:0 0; rotate:0deg; } 50% { translate:var(--dnk-float-x) var(--dnk-float-y); rotate:var(--dnk-float-turn); } }
@keyframes dnk-core-breathe { 0%,100% { scale:1; rotate:-1deg; } 50% { scale:1.035; rotate:2deg; } }
@keyframes dnk-halo { 0%,100% { scale:.98; opacity:.45; } 50% { scale:1.09; opacity:.9; } }
@keyframes dnk-glow { 0%,100% { scale:.95; opacity:.6; } 50% { scale:1.1; opacity:1; } }
@keyframes dnk-comet-travel { to { stroke-dashoffset:-100; } }
@keyframes dnk-orbit-turn { to { rotate:360deg; } }
@keyframes dnk-sparkle { 0%,100% { scale:.85; rotate:-12deg; } 50% { scale:1.13; rotate:35deg; } }
@keyframes dnk-detail-float { 0%,100% { translate:0 0; rotate:-2deg; } 50% { translate:0 -6px; rotate:3deg; } }
@keyframes dnk-speck-drift { 0%,100% { translate:0 3px; opacity:.5; } 50% { translate:3px -5px; opacity:1; } }
@keyframes dnk-sound-wave { from { scale:1 .45; } to { scale:1 1; } }
@media(min-width:901px) and (max-width:1100px) {
  .dnk-ingredient>strong { font-size:clamp(15px,1.75vw,19px); }
  .dnk-ingredient { padding:16px 13px; }
  .dnk-ingredient>span { font-size:7px; }
  .dnk-card-icon { width:15px; height:15px; top:13px; right:10px; }
}
@media(max-width:580px) {
  .dnk-orbit { margin-top:30px; aspect-ratio:1.08; }
  .dnk-core { top:35%; }
  .dnk-ingredient { --dnk-float-x:1px; --dnk-float-turn:1deg; }
  .dnk-ingredient-goal,.dnk-ingredient-barrier { --dnk-float-y:-4px; }.dnk-ingredient-strength,.dnk-ingredient-pace { --dnk-float-y:4px; }
  .dnk-card-icon { width:14px; height:14px; right:9px; top:10px; }
  .dnk-ingredient>span { padding-right:11px; font-size:6.5px; }
  .dnk-ingredient>strong { font-size:clamp(14px,5.2cqw,17px); }
  .dnk-personal-stamp { font-size:8px; padding:5px 8px; gap:5px; top:-5%; left:39%; }
  .dnk-personal-stamp i { font-size:12px; }
  .dnk-spark-top { width:20px; height:20px; top:-2%; }
  .dnk-spark-left { width:15px; height:15px; }
  .dnk-mini-orbit { width:24px; height:24px; right:3%; }
  .dnk-mini-orbit::before { inset:6px -6px; }.dnk-mini-orbit i { width:6px; height:6px; left:8px; top:-3px; }
  .dnk-sound { scale:.75; bottom:2%; left:46%; }.dnk-plus-two { left:40%; bottom:4%; font-size:16px; }
  .dnk-discovery-caption { margin-top:17px; }
}
@media(max-width:350px) {
  .dnk-orbit { aspect-ratio:.86; }.dnk-core { top:36%; }
  .dnk-card-icon { display:none; }.dnk-ingredient>span { padding-right:0; }.dnk-core>strong { font-size:35px; }
}
@media(prefers-reduced-motion:reduce) {
  .dnk-feature *,.dnk-feature *::before,.dnk-feature *::after { animation:none!important; transition:none!important; }
  .dnk-ingredients,.dnk-decor { translate:none; }
}