.client-demo {
  margin: 32px auto 16px;
  max-width: 940px;
  overflow: hidden;
  border: 1px solid rgba(121, 220, 232, .26);
  border-radius: 18px;
  background: #071526;
  color: var(--color-brand-blue-soft);
  text-align: left;
}
.client-demo__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 12px 24px;
  border-bottom: 1px solid rgba(121, 220, 232, .15);
  color: #c0d5e4;
  font-size: 14px;
}
/* Label toolbar sebagai micro-label: kecil, rapi, sejajar dengan tombol. */
.client-demo__toolbar > span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
}
.client-demo button {
  font: inherit;
  cursor: pointer;
}
.client-demo__play {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid rgba(121, 220, 232, .35);
  border-radius: 999px;
  background: #102b42;
  color: #e7faff;
  white-space: nowrap;
}
.client-demo__play[hidden], .client-demo__art [hidden] { display: none; }
.client-demo__stage { overflow: hidden; padding: 8px 0; }
.client-demo__art { display: block; width: 100%; height: auto; font-family: var(--font-body, 'Hanken Grotesk', sans-serif); }
.client-demo__muted { fill: #b1c9d9; }
.client-demo__window { transform-origin: 50% 50%; }
.client-demo button:focus-visible { outline: 2px solid #79dce8; outline-offset: -3px; }
.client-demo button:hover { color: #f4f7fb; background-color: rgba(121, 220, 232, .13); }
@media (prefers-reduced-motion: no-preference) {
  .client-demo__art { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
  .client-demo:hover .client-demo__art { transform: scale(1.015); }
  .client-demo [data-demo-scene]:not([hidden]) { animation: client-demo-rise .8s cubic-bezier(.16,1,.3,1) both; }
  .client-demo__draw { stroke-dasharray: 1; animation: client-demo-draw 1.4s .3s cubic-bezier(.4,0,.2,1) both; }
  .client-demo__ink { animation: client-demo-rise .9s .25s cubic-bezier(.16,1,.3,1) both; }
}
@keyframes client-demo-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes client-demo-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (max-width: 640px) {
  .client-demo { margin-top: 24px; border-radius: 12px; }
  .client-demo__toolbar { min-height: 56px; padding: 10px 14px; }
  .client-demo__toolbar > span { font-size: 11px; }
  .client-demo__play { padding: 6px 10px; }
  .client-demo__stage { padding: 12px 0; }
}