/* A small app-domain illustration. All motion shares a pausable timeline. */
.siri-domain-demo {
  --sd-ink: #555650;
  --sd-muted: #777973;
  --sd-line: #e6e7e3;
  --sd-surface: #fff;
  --sd-socket: #f5f5f2;
  --sd-blue: #8ba8bd;
  --sd-green: #9aaf97;
  --sd-gold: #c6af82;
  --sd-lilac: #b3a0bd;
  --sd-rose: #c39791;
  --sd-duration: 12s;
  --sd-padding: 24px;
  --sd-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --sd-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  display: grid;
  gap: 12px;
  isolation: isolate;
  margin: 36px 0;
  padding: var(--sd-padding);
  border: 1px solid var(--sd-line);
  border-radius: 18px;
  background: var(--sd-surface);
  color: var(--sd-ink);
  box-shadow: 0 2px 3px -2px rgb(0 0 0 / 12%);
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
}
.siri-domain-demo__heading {
  color: var(--sd-muted);
  font-size: 12px;
  line-height: 1.5;
}
.siri-domain-demo__drawing {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  aspect-ratio: 420 / 342;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.siri-domain-demo__drawing > svg { display: block; width: 100%; height: auto; overflow: visible; }
.siri-domain-demo text { fill: var(--sd-ink); font-family: inherit; }
.siri-domain-demo__wires, .siri-domain-demo__connection { stroke: var(--sd-line); stroke-width: 1.25; }
.siri-domain-demo__connection { stroke: var(--sd-green); }
.siri-domain-demo__connection path { opacity: 0.65; }
.siri-domain-demo__connection path:nth-child(1) { stroke: var(--sd-blue); }
.siri-domain-demo__connection path:nth-child(3) { stroke: var(--sd-gold); }
.siri-domain-demo__siri-halo { stroke: var(--sd-green); opacity: 0; }
.siri-domain-demo__surface {
  fill: var(--sd-surface);
  stroke: var(--sd-line);
  filter: drop-shadow(0 2px 1px rgb(0 0 0 / 3%));
}
.siri-domain-demo__app-tile {
  fill: currentColor;
  fill-opacity: 0.12;
  stroke: currentColor;
  stroke-opacity: 0.45;
  stroke-width: 1;
}
.siri-domain-demo__app-glyph {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.siri-domain-demo__app-icon--ghost { color: var(--sd-muted); opacity: 0.18; }
.siri-domain-demo__siri-mark { stroke: var(--sd-muted); }
.siri-domain-demo__siri-label { font-size: 14px; font-weight: 500; }
.siri-domain-demo__slots text { text-anchor: middle; font-size: 13px; }
.siri-domain-demo text.siri-domain-demo__annotation {
  fill: var(--sd-muted);
  text-anchor: middle;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  letter-spacing: 0.65px;
}
.siri-domain-demo__boundary { stroke: var(--sd-line); stroke-dasharray: 2 5; }
.siri-domain-demo__stop { stroke: var(--sd-rose); stroke-dasharray: none; stroke-width: 1.5; }
.siri-domain-demo__match, .siri-domain-demo__other {
  stroke-width: 1.5;
  stroke-linejoin: round;
  fill: none;
  stroke: none;
}
.siri-domain-demo__match--mail, .siri-domain-demo__other--five { color: var(--sd-blue); }
.siri-domain-demo__match--photos, .siri-domain-demo__other--two { color: var(--sd-green); }
.siri-domain-demo__match--calendar, .siri-domain-demo__other--three { color: var(--sd-gold); }
.siri-domain-demo__other--one, .siri-domain-demo__other--six { color: var(--sd-lilac); }
.siri-domain-demo__other--four { color: var(--sd-rose); }
.siri-domain-demo .siri-domain-demo__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--sd-ink);
  font-style: normal;
}
.siri-domain-demo__muted { color: var(--sd-muted); }
.siri-domain-demo__toggle {
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--sd-line);
  border-radius: 50%;
  background: var(--sd-surface);
  color: var(--sd-muted);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms var(--sd-ease-out),
    background-color 150ms ease, color 150ms ease;
}
.siri-domain-demo__toggle[hidden] { display: none; }
.siri-domain-demo__toggle:active { transform: scale(0.96); }
.siri-domain-demo__toggle:focus-visible { outline: 2px solid var(--sd-ink); outline-offset: 4px; }
.siri-domain-demo__toggle svg {
  grid-area: 1 / 1;
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  pointer-events: none;
  transition: opacity 150ms var(--sd-ease-out), transform 150ms var(--sd-ease-out);
}
.siri-domain-demo__toggle .siri-domain-demo__play { opacity: 0; transform: translateX(1px) scale(0.9); }
.siri-domain-demo[data-paused="true"] .siri-domain-demo__pause { opacity: 0; transform: scale(0.9); }
.siri-domain-demo[data-paused="true"] .siri-domain-demo__play { opacity: 1; transform: translateX(1px) scale(1); }
.siri-domain-demo[data-input="keyboard"] .siri-domain-demo__toggle,
.siri-domain-demo[data-input="keyboard"] .siri-domain-demo__toggle svg { transition: none; }
.siri-domain-demo[data-input="keyboard"] .siri-domain-demo__toggle:active { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .siri-domain-demo__toggle:hover { background: var(--sd-socket); color: var(--sd-ink); }
}
/* One clock, small stagger offsets; pausing freezes every layer together.
   Static styles show the complete story without JavaScript or motion. */
.siri-domain-demo__match,
.siri-domain-demo__other,
.siri-domain-demo__siri-mark path,
.siri-domain-demo__siri-halo {
  transform-box: fill-box;
  transform-origin: center;
}
.siri-domain-demo__match--photos { --sd-delay: 80ms; }
.siri-domain-demo__match--calendar { --sd-delay: 160ms; }
.siri-domain-demo__other--one { --sd-delay: 0ms; --sd-tilt: -2deg; }
.siri-domain-demo__other--two { --sd-delay: 60ms; --sd-tilt: 2deg; }
.siri-domain-demo__other--three { --sd-delay: 120ms; --sd-tilt: -2deg; }
.siri-domain-demo__other--four { --sd-delay: 180ms; --sd-tilt: 2deg; }
.siri-domain-demo__other--five { --sd-delay: 240ms; --sd-tilt: -2deg; }
.siri-domain-demo__other--six { --sd-delay: 300ms; --sd-tilt: 2deg; }
.siri-domain-demo__connection path:nth-child(2) { --sd-delay: 80ms; }
.siri-domain-demo__connection path:nth-child(3) { --sd-delay: 160ms; }
.siri-domain-demo__siri-mark path:nth-child(2) { --sd-delay: 60ms; }
.siri-domain-demo__siri-mark path:nth-child(3) { --sd-delay: 120ms; }
.siri-domain-demo__siri-mark path:nth-child(4) { --sd-delay: 180ms; }
.siri-domain-demo[data-animated="true"] .siri-domain-demo__match { animation-name: sd-fit; }
.siri-domain-demo[data-animated="true"] .siri-domain-demo__other { animation-name: sd-no-fit; }
.siri-domain-demo[data-animated="true"] .siri-domain-demo__connection path { animation-name: sd-connect; }
.siri-domain-demo[data-animated="true"] .siri-domain-demo__siri-mark path { animation-name: sd-siri-response; }
.siri-domain-demo[data-animated="true"] .siri-domain-demo__siri-halo { animation-name: sd-siri-halo; }
.siri-domain-demo[data-animated="true"] .siri-domain-demo__boundary { animation-name: sd-boundary; }
.siri-domain-demo[data-animated="true"] .siri-domain-demo__outside-label { animation-name: sd-label; }
.siri-domain-demo[data-animated="true"] :is(
  .siri-domain-demo__match, .siri-domain-demo__other,
  .siri-domain-demo__connection path, .siri-domain-demo__siri-mark path,
  .siri-domain-demo__siri-halo, .siri-domain-demo__boundary,
  .siri-domain-demo__outside-label
) {
  animation-duration: var(--sd-duration);
  animation-delay: var(--sd-delay, 0ms);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-timing-function: var(--sd-ease-in-out);
  animation-play-state: paused;
}
.siri-domain-demo[data-running="true"] .siri-domain-demo__drawing svg * { animation-play-state: running; }
@keyframes sd-fit {
  0%, 8% { transform: translateY(108px) scale(0.98); opacity: 1; }
  13% { transform: translateY(-3px) scale(1.025); animation-timing-function: var(--sd-ease-out); }
  15%, 88% { transform: translateY(0) scale(1); opacity: 1; }
  94% { transform: translateY(0) scale(1); opacity: 0; }
  95% { transform: translateY(108px) scale(0.98); opacity: 0; }
  100% { transform: translateY(108px) scale(0.98); opacity: 1; }
}
@keyframes sd-no-fit {
  0%, 35% { transform: translateY(0) rotate(0); }
  40% { transform: translateY(-30px) rotate(var(--sd-tilt)) scale(0.98); animation-timing-function: var(--sd-ease-out); }
  44% { transform: translateY(2px) rotate(0) scale(1); animation-timing-function: var(--sd-ease-out); }
  46%, 100% { transform: translateY(0) rotate(0); }
}
@keyframes sd-connect {
  0%, 14%, 96%, 100% { opacity: 0; }
  17% { opacity: 1; }
  23%, 88% { opacity: 0.65; }
}
@keyframes sd-siri-response {
  0%, 17%, 24%, 100% { transform: scaleY(1); }
  20% { transform: scaleY(1.5); }
}
@keyframes sd-siri-halo {
  0%, 17% { transform: scale(0.96); opacity: 0; }
  20% { opacity: 0.4; }
  26%, 100% { transform: scale(1.08); opacity: 0; }
}
@keyframes sd-boundary {
  0%, 34%, 96%, 100% { opacity: 0; }
  39%, 88% { opacity: 1; }
}
@keyframes sd-label {
  0%, 35%, 96%, 100% { opacity: 0; }
  48%, 88% { opacity: 1; }
}
@media (max-width: 480px) {
  .siri-domain-demo { --sd-padding: 20px; border-radius: 14px; }
  .siri-domain-demo__slots text { font-size: 16px; }
  .siri-domain-demo text.siri-domain-demo__annotation { font-size: 11px; letter-spacing: 0.3px; }
}
@media (prefers-color-scheme: dark) {
  .siri-domain-demo {
    --sd-ink: #deded8;
    --sd-muted: #a5a69e;
    --sd-line: #43453f;
    --sd-surface: #2d2e2b;
    --sd-socket: #33352f;
    --sd-blue: #a0c1d9;
    --sd-green: #b0c9a9;
    --sd-gold: #d9c191;
    --sd-lilac: #cab1d6;
    --sd-rose: #dca8a0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .siri-domain-demo[data-animated="true"] svg * { animation: none; }
  .siri-domain-demo__toggle { display: none; transition: none; }
  .siri-domain-demo__toggle svg { transition: none; }
}