.button.demo-run-button {
  background: linear-gradient(110deg,#233e50,#234c44);
  color: #bcf1de;
  border: 1px solid #427b70;
  box-shadow: 0 2px 9px #1e6e4714;
  padding-left: 11px;
}
.button.demo-run-button:hover { background: #315c50; border-color: #77bd9e; }
.demo-run-button>.icon { width: 11px; height: 11px; fill: #93dcbb; stroke-width: 1; }
.demo-button-caption { border: 1px solid #477063; color: #8bb9a9; font-size: 6px; padding: 3px 4px; border-radius: 3px; letter-spacing: .5px; margin-left: 3px; }
#demo-player {
  position: fixed;
  left: calc(50% + 65px);
  bottom: 20px;
  transform: translateX(-50%);
  width: min(810px,calc(100vw - 40px));
  background: #162832;
  border: 1px solid #4b7b70;
  border-radius: 12px;
  box-shadow: 0 15px 70px #0009,0 0 0 1px #7dca9f0a;
  color: #c3ded7;
  z-index: 120;
  overflow: hidden;
  font-family: var(--font);
}
.demo-player-progress { height: 3px; background: #233f3d; }
.demo-player-progress>i { display: block; height: 100%; background: linear-gradient(90deg,#72b9cb,#9cdb9a); transition: width .3s ease; }
.demo-player-main { display: flex; gap: 15px; align-items: flex-start; padding: 17px 18px 12px; }
.demo-step-counter { width: 43px; flex-shrink: 0; text-align: center; padding: 6px 5px; border: 1px solid #39594e; background: #203a30; border-radius: 7px; }
.demo-step-counter>span { display: block; font-family: var(--mono); font-size: 21px; color: #bde6bd; line-height: 1.2; }
.demo-step-counter>small { display: block; font-family: var(--mono); font-size: 7px; color: #8bab96; margin-top: 5px; }
.demo-step-description { flex: 1; min-width: 0; }
.demo-step-description>div { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.demo-running-label { font-size: 7px; letter-spacing: 1px; color: #8ccca9; display: inline-flex; gap: 5px; align-items: center; }
.demo-running-label>i { width: 5px; height: 5px; border-radius: 50%; background: #90d4a4; }
.demo-running-label.running>i { animation: demo-blink 1.5s ease-in-out infinite; }
.demo-running-label.paused { color: #d0b17e; }
.demo-running-label.paused>i { background: #d0b17e; }
.demo-running-label.complete { color: #b9dc9b; }
.demo-step-description strong { font-size: 13px; font-weight: 550; color: #d2e8df; }
.demo-step-description p { color: #91b3b7; line-height: 1.9; font-size: 11px; margin-top: 7px; }
.demo-close { color: #84a9a5; width: 23px; height: 23px; flex-shrink: 0; }
.demo-close>.icon { width: 13px; height: 13px; }
.demo-phase-nav { padding: 0 18px 13px 76px; display: flex; align-items: center; gap: 9px; }
.demo-phase-nav>button { display: flex; align-items: center; gap: 5px; color: #668995; font-size: 8px; white-space: nowrap; padding: 0; }
.demo-phase-nav>button>span { height: 16px; width: 16px; font-size: 7px; border: 1px solid #3b5259; border-radius: 50%; display: grid; place-items: center; color: #789399; }
.demo-phase-nav>button .icon { width: 9px; height: 9px; }
.demo-phase-nav>button.active { color: #aad8b6; }
.demo-phase-nav>button.active>span { color: #c5e9b9; background: #32573b; border-color: #679964; }
.demo-phase-nav>button.done { color: #7fa98c; }
.demo-phase-nav>button.done>span { background: #243f32; border-color: #466e4c; color: #95c499; }
.demo-phase-nav>button:not(:last-child):after { content: ''; width: 12px; height: 1px; background: #3a5753; margin-left: 4px; }
.demo-player-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: #13242b; border-top: 1px solid #304c4b; padding: 10px 14px; }
.demo-sandbox-note { display: flex; align-items: center; gap: 5px; font-size: 8px; color: #789d8d; }
.demo-sandbox-note>.icon { width: 11px; height: 11px; }
.demo-playback { display: flex; align-items: center; gap: 5px; }
.demo-playback>.icon-button { width: 26px; height: 27px; color: #a3c4b6; }
.demo-playback>.icon-button>.icon { width: 13px; height: 13px; }
.demo-playback .flip { transform: rotate(180deg); }
.demo-playback button:disabled { opacity: .3; cursor: default; }
.demo-play-toggle.button { height: 29px; padding: 0 11px; color: #ccedca; background: #355744; border-color: #588266; font-size: 9px; min-width: 78px; }
.demo-play-toggle:hover { background: #4a7253; }
.demo-play-toggle .icon { width: 11px; height: 11px; }
.demo-playback>select { height: 27px; border: 1px solid #36544c; background: #182e2a; color: #9cbda7; border-radius: 4px; font-family: var(--mono); font-size: 8px; padding: 0 4px; max-width: 100%; }
.demo-playback>.demo-step-picker { max-width: 150px; font-family: var(--font); font-size: 8px; }
#demo-spotlight { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
#demo-spotlight[hidden] { display: none; }
.demo-shade { position: absolute; background: #020b1466; }
.demo-focus-ring { position: absolute; border: 2px solid #8ed7ab; border-radius: 9px; box-shadow: 0 0 0 4px #7dca9c15,0 0 32px #62be7d25; }
.demo-focus-ring>span { position: absolute; top: -28px; left: -2px; background: #264e3c; color: #d0f0cc; border: 1px solid #6aab7a; font-size: 9px; padding: 4px 8px; border-radius: 5px; max-width: min(360px,calc(100vw - 24px)); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; line-height: 1.4; }
#demo-spotlight[data-status="paused"] .demo-focus-ring { border-color: #d3bb80; box-shadow: 0 0 0 4px #bda15b16; }
#demo-spotlight[data-status="paused"] .demo-focus-ring>span { color: #e9d9ae; background: #4b402d; border-color: #a48b57; }
#demo-spotlight[data-status="complete"] .demo-focus-ring { border-color: #b6da8b; }
.is-demo { padding-bottom: 240px; }
.is-demo #modal[open] { position: fixed; z-index: 105; left: 50%; top: calc((100dvh - 220px)/2); transform: translate(-50%,-50%); margin: 0; max-height: calc(100dvh - 245px); overflow: auto; }
.is-demo #tooltip { z-index: 106; }
.is-demo .demo-run-button { border-color: #88c9aa; box-shadow: 0 0 0 3px #7ac99213; }
.is-demo .demo-run-button>.icon { animation: demo-blink 1.5s ease-in-out infinite; }
.is-demo[data-demo-status="paused"] .demo-run-button>.icon,.is-demo[data-demo-status="complete"] .demo-run-button>.icon { animation: none; }
@keyframes demo-blink { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
@media(max-width:1200px) {
  .demo-button-caption { display: none; }
  .heading-actions { flex-wrap: wrap; justify-content: flex-end; }
  #demo-player { width: min(740px,calc(100vw - 32px)); left: 50%; }
  .demo-player-main { padding: 15px 15px 11px; }
  .demo-phase-nav { padding-left: 72px; gap: 7px; }
  .demo-phase-nav>button { font-size: 7px; }
  .demo-player-footer { padding: 10px 12px; }
}
@media(max-width:800px) {
  .demo-sandbox-note { font-size: 7px; }
  .demo-playback>.demo-step-picker { max-width: 110px; }
  .demo-step-description p { font-size: 10px; }
  .demo-phase-nav { padding-left: 16px; }
  .demo-phase-nav>button:not(:last-child):after { width: 8px; }
}
@media(max-width:650px) {
  .heading-actions { justify-content: flex-start; gap: 7px; }
  .heading-actions .demo-run-button { font-size: 10px; }
  #demo-player { bottom: 10px; width: calc(100vw - 20px); border-radius: 9px; }
  .demo-player-main { padding: 12px 11px 8px; gap: 10px; }
  .demo-step-counter { width: 34px; padding: 5px 3px; }
  .demo-step-counter>span { font-size: 18px; }
  .demo-step-counter>small { font-size: 6px; margin-top: 4px; }
  .demo-step-description>div { gap: 6px; }
  .demo-step-description strong { font-size: 11px; }
  .demo-running-label { font-size: 6px; }
  .demo-step-description p { font-size: 9px; line-height: 1.8; margin-top: 6px; }
  .demo-close { width: 19px; height: 20px; margin-right: -2px; }
  .demo-close>.icon { width: 11px; height: 11px; }
  .demo-phase-nav { padding: 4px 11px 10px; gap: 5px; justify-content: space-between; }
  .demo-phase-nav>button { font-size: 6px; flex-direction: column; gap: 4px; }
  .demo-phase-nav>button>span { width: 17px; height: 17px; font-size: 7px; }
  .demo-phase-nav>button:not(:last-child):after { display: none; }
  .demo-player-footer { flex-wrap: wrap; padding: 9px 11px; gap: 8px; }
  .demo-sandbox-note { font-size: 7px; flex: 1 1 100%; }
  .demo-playback { width: 100%; justify-content: space-between; gap: 5px; }
  .demo-playback>.icon-button { width: 24px; height: 28px; }
  .demo-play-toggle.button { height: 28px; min-width: 74px; font-size: 9px; }
  .demo-playback>select { height: 27px; font-size: 8px; }
  .demo-playback>.demo-step-picker { max-width: 104px; font-size: 7px; }
  .demo-focus-ring>span { font-size: 8px; padding: 4px 6px; top: -26px; }
  .is-demo { padding-bottom: 300px; }
  .is-demo #modal[open] { top: 34px; transform: translateX(-50%); max-height: calc(100dvh - 285px); }
}
@media(prefers-reduced-motion:reduce) {
  .demo-running-label.running>i,.is-demo .demo-run-button>.icon { animation: none; }
}