.uk-hotspot-stage { position:relative; }
.uk-hotspot-composition { position:relative; z-index:1; display:flex; justify-content:center; padding:48px 280px; }
.uk-hotspot-section .uk-hotspot-device.showcase-device { position:relative; width:280px; max-width:280px; margin:0; flex:none; overflow:visible; }
.uk-detail-hotspot { position:absolute; left:var(--spot-x); top:var(--spot-y); z-index:4; }
.uk-detail-hotspot.is-open { z-index:6; }
.uk-hotspot-trigger { position:absolute; left:-22px; top:-22px; width:44px; height:44px; padding:0; border:0; background:transparent; border-radius:50%; cursor:pointer; display:grid; place-items:center; }
.uk-hotspot-trigger::before { content:""; position:absolute; inset:7px; border-radius:50%; background:#25242238; border:1px solid #ffffff80; animation:uk-hotspot-breathe 3.6s ease-in-out infinite; }
.uk-hotspot-trigger span { position:relative; width:10px; height:10px; border-radius:50%; background:#252422; box-shadow:0 0 0 1px #ffffff80; }
.uk-hotspot-trigger:focus-visible { outline:2px solid var(--purple,#7564ff); outline-offset:2px; }
.uk-hotspot-popover { position:absolute; top:0; left:40px; transform:translateY(-50%); width:248px; box-sizing:border-box; padding:24px; border:1px solid var(--navigation-glass-border); border-radius:24px; background:var(--navigation-glass); color:var(--ink); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); box-shadow:0 12px 32px #00000012; }
.is-left .uk-hotspot-popover { left:auto; right:40px; }
.uk-hotspot-popover[hidden] { display:none; }
.uk-hotspot-popover h3 { margin:0 0 12px; font-size:18px; line-height:1.3; }
.uk-hotspot-popover p { margin:0; font-size:14px; line-height:1.6; }
@keyframes uk-hotspot-breathe { 0%,100% { transform:scale(.94); opacity:.65; } 50% { transform:scale(1.08); opacity:1; } }
@media(max-width:850px) {
 .uk-hotspot-composition { padding:32px 0 160px; }
 .uk-hotspot-section .uk-hotspot-device.showcase-device { width:min(260px,75vw); }
 .uk-detail-hotspot .uk-hotspot-popover { width:220px; left:auto; right:auto; transform:none; top:28px; }
 .uk-detail-hotspot.is-right .uk-hotspot-popover { right:-48px; }
 .uk-detail-hotspot.is-left .uk-hotspot-popover { left:-80px; }
}
@media(prefers-reduced-motion:reduce) { .uk-hotspot-trigger::before { animation:none; } }

/* Anchor explanations to the phone edges, not to the point itself. */
.uk-hotspot-device .uk-detail-hotspot { position:static; }
.uk-hotspot-device .uk-hotspot-trigger {
  left:var(--spot-x);
  top:var(--spot-y);
  transform:translate(-50%,-50%);
  z-index:4;
}
.uk-hotspot-device .uk-hotspot-popover {
  top:var(--spot-y);
  left:calc(100% + 24px);
  right:auto;
  transform:translateY(-50%);
  z-index:6;
}
.uk-hotspot-device .is-left .uk-hotspot-popover {
  left:auto;
  right:calc(100% + 24px);
}
@media(max-width:850px) {
  .uk-hotspot-device .uk-detail-hotspot .uk-hotspot-popover {
    top:calc(100% + 24px);
    left:50%;
    right:auto;
    transform:translateX(-50%);
    width:min(280px,calc(100vw - 96px));
  }
}

.uk-hotspot-section h2#uk-design-details-title-copy { margin-bottom:8px; }
.uk-hotspot-section .uk-hotspot-intro {
  margin:0 auto 32px;
  max-width:640px;
  color:var(--ink);
  opacity:.7;
  font-size:14px;
  line-height:1.6;
  text-align:center;
}

.uk-hotspot-trigger[hidden] { display:none!important; }

.uk-hotspot-popover .uk-user-favorite {
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid #8471c42e;
  color:#6650a4;
  font-size:12px;
  line-height:1.5;
  font-weight:600;
}
.uk-user-favorite .ti { flex:none; font-size:18px; line-height:1; margin-top:1px; }
[data-theme="dark"] .uk-hotspot-popover .uk-user-favorite { color:#d4c0ff; border-top-color:#d4c0ff30; }

.uk-compose-app .uk-compose-post-tools img[hidden] { display:none; }

.uk-hotspot-device .uk-detail-hotspot.is-open .uk-hotspot-trigger::before {
  background:#ece5fa;
  border-color:#ffffffb3;
  opacity:1;
  animation:none;
}
.uk-hotspot-device .uk-detail-hotspot.is-open .uk-hotspot-trigger span {
  background:#76658f;
}



.uk-hotspot-popover .uk-compose-tools-demo {
 display:grid; place-items:center; width:32px; height:32px;
 margin:20px 0 0; padding:0; border:0; border-radius:50%;
 background:#d8e1cc; color:#33413d; font:400 24px/1 Arial,sans-serif; cursor:pointer;
}
.uk-compose-tools-demo:focus-visible { outline:2px solid #b7a0de; outline-offset:4px; }

.uk-user-favorite .uk-local-icon {
 display:inline-block; width:18px; height:18px; margin-top:1px;
 background:currentColor; mask:center / contain no-repeat; -webkit-mask:center / contain no-repeat;
}
.uk-user-favorite .ti-circle-check { mask-image:url('assets/uk-icons/circle-check.svg'); -webkit-mask-image:url('assets/uk-icons/circle-check.svg'); }
.uk-user-favorite .ti-flare { mask-image:url('assets/uk-icons/flare.svg'); -webkit-mask-image:url('assets/uk-icons/flare.svg'); }
.uk-user-favorite .uk-local-icon::before { content:none; }

.uk-iteration-comparison { display:flex; align-items:center; gap:8px; margin-top:20px; }
.uk-iteration-comparison .uk-compose-tools-demo { width:26px; height:26px; margin:0; font-size:22px; flex:none; }
.uk-iteration-comparison img { display:block; width:26px; height:26px; margin:0; padding:0; border:0; border-radius:0; flex:none; }
.uk-iteration-arrow { font:400 24px/1 Arial,sans-serif; margin:0 4px; color:var(--ink); }

.uk-hotspot-popover .uk-edit-control-note { display:flex; align-items:flex-start; gap:12px; margin-top:20px; }
.uk-edit-control-note img { display:block; width:32px; height:32px; margin:0; border:0; border-radius:0; flex:none; }
.uk-hotspot-popover .uk-edit-control-note p { margin:0; font-size:14px; line-height:1.6; }

/* Move the phone and all attached explanations as one balanced composition. */
.uk-hotspot-section .uk-hotspot-device.showcase-device {
 animation:uk-detail-gentle-float 8s ease-in-out infinite;
}
@keyframes uk-detail-gentle-float {
 0%,100% { transform:translateY(0); }
 50% { transform:translateY(-6px); }
}
@media(prefers-reduced-motion:reduce) {
 .uk-hotspot-section .uk-hotspot-device.showcase-device { animation:none; transform:none; }
}

.uk-hotspot-device .uk-compose-example,
.uk-hotspot-device .uk-iteration-trigger {
  opacity:1;
  visibility:visible;
  transition:opacity 400ms ease, visibility 0s;
}
.uk-hotspot-device .uk-hotspot-trigger.is-unfold-hidden {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 120ms ease, visibility 0s 120ms;
}
@media(prefers-reduced-motion:reduce) {
  .uk-hotspot-device .uk-compose-example,
  .uk-hotspot-device .uk-iteration-trigger,
  .uk-hotspot-device .uk-hotspot-trigger.is-unfold-hidden { transition:none; }
}

/* The supplied pale lavender accent, with solid Tabler symbols. */
.uk-hotspot-popover .uk-user-favorite,
[data-theme="dark"] .uk-hotspot-popover .uk-user-favorite { color:#ece5fa; border-top-color:#ece5fa30; }
.uk-user-favorite .ti-circle-check { mask-image:url('assets/uk-icons/circle-check-filled.svg'); -webkit-mask-image:url('assets/uk-icons/circle-check-filled.svg'); }
.uk-user-favorite .ti-flare { mask-image:url('assets/uk-icons/flare-filled.svg'); -webkit-mask-image:url('assets/uk-icons/flare-filled.svg'); }
:root:not([data-theme="dark"]) .uk-user-favorite { background:#76658f; border-radius:12px; padding:12px; }

/* Uniform miniature versions of the site's star menu bubble. */
.uk-hotspot-device .uk-hotspot-trigger {
  width:36px; height:36px; border:1px solid #ffffff66;
  background:#766b8640; box-shadow:inset 0 0 0 1px #ece5fa20;
}
.uk-hotspot-device .uk-hotspot-trigger::before,
.uk-hotspot-device .uk-detail-hotspot.is-open .uk-hotspot-trigger::before {
  inset:5px; background:#a59bad9e; border:0;
  animation:uk-hotspot-soft-pulse 4s ease-in-out infinite;
}
.uk-hotspot-device .uk-hotspot-trigger span,
.uk-hotspot-device .uk-detail-hotspot.is-open .uk-hotspot-trigger span {
  width:14px; height:14px; background:#f0e9fc; border-radius:0; box-shadow:none;
  clip-path:polygon(50.00% 0.00%, 54.38% 22.34%, 65.45% 2.45%, 62.71% 25.05%, 79.39% 9.55%, 69.80% 30.20%, 90.45% 20.61%, 74.95% 37.29%, 97.55% 34.55%, 77.66% 45.62%, 100.00% 50.00%, 77.66% 54.38%, 97.55% 65.45%, 74.95% 62.71%, 90.45% 79.39%, 69.80% 69.80%, 79.39% 90.45%, 62.71% 74.95%, 65.45% 97.55%, 54.38% 77.66%, 50.00% 100.00%, 45.62% 77.66%, 34.55% 97.55%, 37.29% 74.95%, 20.61% 90.45%, 30.20% 69.80%, 9.55% 79.39%, 25.05% 62.71%, 2.45% 65.45%, 22.34% 54.38%, 0.00% 50.00%, 22.34% 45.62%, 2.45% 34.55%, 25.05% 37.29%, 9.55% 20.61%, 30.20% 30.20%, 20.61% 9.55%, 37.29% 25.05%, 34.55% 2.45%, 45.62% 22.34%);
}
.uk-hotspot-device .uk-detail-hotspot.is-open .uk-hotspot-trigger { background:#ece5fa80; border-color:#ece5fa; }
.uk-hotspot-device .uk-detail-hotspot.is-open .uk-hotspot-trigger::before { background:#ece5facc; }
.uk-hotspot-device .uk-detail-hotspot.is-open .uk-hotspot-trigger span { background:#76658f; }
@keyframes uk-hotspot-soft-pulse {
  0%,100% { transform:scale(.94); opacity:.7; }
  50% { transform:scale(1.06); opacity:1; }
}
@media(prefers-reduced-motion:reduce) {
 .uk-hotspot-device .uk-hotspot-trigger::before,
 .uk-hotspot-device .uk-detail-hotspot.is-open .uk-hotspot-trigger::before { animation:none; }
}

/* Smaller markers with a consistently black star. */
.uk-hotspot-device .uk-hotspot-trigger { width:28px; height:28px; }
.uk-hotspot-device .uk-hotspot-trigger::before,
.uk-hotspot-device .uk-detail-hotspot.is-open .uk-hotspot-trigger::before { inset:4px; }
.uk-hotspot-device .uk-hotspot-trigger span,
.uk-hotspot-device .uk-detail-hotspot.is-open .uk-hotspot-trigger span {
  width:11px; height:11px; background:#000;
}

/* Match the clean white cards used in the app's feed. */
.uk-hotspot-section .uk-hotspot-popover,
[data-theme="dark"] .uk-hotspot-section .uk-hotspot-popover {
  background:#fff;
  color:#252422;
  border:1px solid #ffffff;
  border-radius:24px;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:0 16px 40px #00000016;
}
.uk-hotspot-section .uk-hotspot-popover h3,
.uk-hotspot-section .uk-hotspot-popover p,
.uk-hotspot-section .uk-iteration-arrow { color:#252422; }
.uk-hotspot-section .uk-hotspot-popover .uk-user-favorite,
[data-theme="dark"] .uk-hotspot-section .uk-hotspot-popover .uk-user-favorite {
  color:#66527f;
  background:#ece5fa;
  border:0;
  border-radius:12px;
  padding:12px;
}

/* Reuse the slide illustration surface and its theme-aware text colours. */
.uk-hotspot-section .uk-hotspot-popover,
[data-theme="dark"] .uk-hotspot-section .uk-hotspot-popover {
  background:var(--care-visual-background);
  color:var(--ink);
  border-color:var(--case-border);
}
.uk-hotspot-section .uk-hotspot-popover h3,
.uk-hotspot-section .uk-hotspot-popover p,
.uk-hotspot-section .uk-iteration-arrow { color:var(--ink); }

/* A steady selection treatment clearly distinguishes open explanations. */
.uk-hotspot-device .uk-detail-hotspot.is-open .uk-hotspot-trigger {
  background:#7563da;
  border:2px solid #f0e9ff;
  box-shadow:0 0 0 3px #7563da55,0 3px 10px #30224e30;
}
.uk-hotspot-device .uk-detail-hotspot.is-open .uk-hotspot-trigger::before {
  background:#a995ee;
  opacity:1;
  transform:none;
  animation:none;
}
.uk-hotspot-device .uk-detail-hotspot.is-open .uk-hotspot-trigger span {
  background:#000;
}