.status-icon {
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:28px;
  height:28px; font-size:25px; line-height:1; vertical-align:middle
}
.status-icon svg {
  width:100%; height:100%; overflow:visible
}
.weather-sun .sun-ray {
  transform-box:fill-box; transform-origin:center; animation:sunray 4.1s ease-in-out infinite;
  animation-delay:calc(var(--ray) * -.71s)
}
.weather-sun .sun-ray:nth-child(3n) {
  animation-duration:5.3s
}
.weather-sun .sun-ray:nth-child(4n) {
  animation-duration:3.7s
}
.weather-cloud .cloud-body {
  animation:cloudcolor 6s ease-in-out infinite
}
.weather-cloud .wind-line {
  transform-origin:right center; transform-box:fill-box; animation:wind 2.07s ease-in-out infinite
}
.weather-cloud .wind-line:nth-child(2) {
  animation-duration:3.13s; animation-delay:-1.9s
}
.weather-cloud .wind-line:nth-child(3) {
  animation-duration:2.71s; animation-delay:-.7s
}
.weather-bolt .bolt {
  animation:zap 7.9s linear infinite
}
.g-running {
  animation:breathe 2.4s ease-in-out infinite; transform-origin:center; transform-box:fill-box
}
.emoji-running {
  animation:emoji-breathe 2.4s ease-in-out infinite
}
.is-paused *,.is-paused *:before,.is-paused *:after {
  animation-play-state:paused!important
}
.desktop-preview {
  height:435px; position:relative; overflow:hidden; border-radius:17px; background:linear-gradient(155deg,#a7cbcb 0%,#709a9a 35%,#315955 78%,#24453f 100%);
  box-shadow:0 28px 48px -25px #173e3640,0 0 0 1px #fff8 inset; border:1px solid #94b3aa
}
.desktop-menubar {
  height:32px; display:flex; align-items:center; gap:17px; background:#eaf2e752; position:relative;
  z-index:2; font-size:10px; padding:0 15px; color:#203e38
}
.desktop-menubar strong {
  font-size:10px
}
.desktop-apple {
  font-size:12px
}
.menubar-spacer {
  flex:1
}
.menubar-selected {
  height:28px; padding:2px 7px; background:#ecf3ed63; border-radius:7px
}
.menubar-selected .status-icon {
  width:24px; height:24px; font-size:23px
}
.system-symbol {
  font-size:19px
}
.desktop-time {
  font-size:9px; white-space:nowrap
}
.desktop-orbit {
  position:absolute; left:-30%; top:44%; width:120%; height:130%; border-radius:50%; border:1px solid #d2eece30;
  box-shadow:0 0 0 40px #d2eece09,0 0 0 80px #d2eece07,0 0 0 140px #d2eece06; transform:rotate(-25deg)
}
.gloom-popover {
  position:absolute; top:42px; right:16px; left:42px; border:1px solid #f7fff594; border-radius:14px;
  background:#f1f6eee8; backdrop-filter:blur(20px); padding:18px; box-shadow:0 16px 35px #173e3630;
  color:#284039
}
.popover-header {
  display:flex; justify-content:space-between; align-items:center; font-size:15px; letter-spacing:-.4px
}
.live-dot {
  width:5px; height:5px; background:#59945c; border-radius:50%
}
.popover-subtitle {
  font-size:9px; color:#677c6b; margin-top:5px; margin-bottom:13px
}
.pipeline-primary {
  background:#fff9; border:1px solid #d8e2d4; border-radius:10px; padding:11px
}
.pipeline-line {
  display:flex; align-items:center; gap:10px
}
.pipeline-line .disclosure {
  font-size:11px; color:#7c8b79; margin-right:-5px
}
.pipeline-line strong,.pipeline-secondary strong {
  font-size:11px; letter-spacing:-.1px
}
.pipeline-branch {
  display:block; font-size:9px; margin-top:4px; color:#6f7e6a
}
.pipeline-age {
  margin-left:auto; color:#7a8976; font-size:9px
}
.stage-list {
  display:flex; gap:6px; margin:13px 0 11px 20px
}
.stage-chip {
  border:1px solid #dbe8d5; background:#eff5e9; border-radius:5px; color:#45714b; font-size:8px;
  padding:4px 7px
}
.stage-chip.failed {
  background:#fae3d9; border-color:#f1d1c2; color:#a73e27
}
.stage-chip.running {
  background:#e1edf7; border-color:#c5d9e9; color:#2a6387
}
.pipeline-footer {
  display:flex; justify-content:space-between; font-size:8px; padding-left:20px; color:#687d65
}
.pipeline-secondary {
  display:flex; gap:12px; align-items:center; padding:13px 7px; border-bottom:1px solid #d1ddcd
}
.popover-bottom {
  font-size:10px; display:flex; justify-content:space-between; padding:13px 5px 0; color:#576c56
}
.desktop-caption {
  position:absolute; bottom:19px; left:24px; right:24px; font:italic 15px Georgia,serif;
  color:#e0ecd9
}
.desktop-caption span {
  font:23px Georgia,serif; margin-right:7px
}
.demo-toolbar {
  display:flex; align-items:center; justify-content:space-between; gap:9px; margin-top:20px
}
.demo-label {
  font-size:10px; font-weight:600; white-space:nowrap
}
.segmented {
  border:1px solid var(--line); background:#ecefe6; padding:3px; border-radius:8px; display:flex
}
.segmented button {
  border:0; color:#5c6d60; font-size:10px; padding:7px 10px; background:transparent; border-radius:5px
}
.segmented button[aria-pressed=true] {
  background:white; color:#294635; box-shadow:0 1px 3px #193d361c
}
.motion-toggle {
  width:29px; height:29px; background:transparent; border:1px solid var(--line); border-radius:50%;
  font-size:11px; color:#4d6554
}
.preview-disclaimer {
  font-size:9px; margin-top:12px; color:#607367; text-align:center
}
.weather-cloud .cloud-body {
  stroke:#92b7c5; stroke-width:.55
}
.g-badge text {
  font-family:-apple-system,BlinkMacSystemFont,sans-serif; font-weight:650; fill:white
}
.emoji-symbol {
  font-family:"Apple Color Emoji","Segoe UI Emoji",sans-serif
}
.style-card .weather-bolt .bolt {
  animation-delay:-1.3s
}
.style-card .weather-cloud .cloud-body {
  animation-delay:-2.5s
}
@keyframes sunray {
  0%,100% {
    stroke:#d59a08; opacity:1; scale:1
  }
  50% {
    stroke:#ffe1a4; opacity:.82; scale:.92
  }
}
@keyframes cloudcolor {
  0%,100% {
    fill:#fff
  }
  50% {
    fill:#9cc6e3
  }
}
@keyframes wind {
  0%,100% {
    scale:1 1; opacity:.9
  }
  50% {
    scale:.55 1; opacity:.55
  }
}
@keyframes zap {
  0%,19%,29%,53%,62%,82%,91%,100% {
    fill:#e84a28; opacity:1; transform:scale(1)
  }
  20%,25% {
    fill:#ffd447; opacity:.9; transform:scale(1.06)
  }
  54%,58% {
    fill:#ffd447; opacity:.95; transform:scale(1.06)
  }
  83%,87% {
    fill:#e84a28; opacity:.65; transform:scale(.9)
  }
}
@keyframes breathe {
  0%,100% {
    scale:.92; opacity:.85
  }
  50% {
    scale:1.05; opacity:1
  }
}
@keyframes emoji-breathe {
  0%,100% {
    transform:scale(.93)
  }
  50% {
    transform:scale(1.07)
  }
}
@media(max-width:1050px) and (min-width:801px) {
  .desktop-preview {
    height:414px
  }
  .gloom-popover {
    left:15px; right:12px; padding:14px
  }
  .desktop-menubar {
    gap:12px
  }
  .demo-label {
    display:none
  }
  .demo-toolbar {
    justify-content:center
  }
  .stage-list {
    gap:4px
  }
  .stage-chip {
    padding:4px 6px
  }
}
@media(max-width:520px) {
  .desktop-preview {
    height:408px; border-radius:14px
  }
  .desktop-menubar {
    gap:14px; padding:0 12px
  }
  .desktop-menu-word {
    display:none
  }
  .gloom-popover {
    left:13px; right:13px; padding:15px
  }
  .desktop-caption {
    font-size:13px; left:18px; bottom:18px
  }
  .demo-toolbar {
    gap:7px; margin-top:15px
  }
  .demo-label {
    font-size:9px
  }
  .segmented button {
    font-size:9px; padding:7px 9px
  }
  .preview-disclaimer {
    font-size:8px
  }
  .pipeline-line {
    gap:8px
  }
  .pipeline-line strong,.pipeline-secondary strong {
    font-size:10px
  }
  .stage-list {
    gap:5px
  }
  .stage-chip {
    font-size:8px
  }
}
@media(prefers-reduced-motion:reduce) {
  .status-icon *,.status-icon {
    animation:none!important
  }
  .weather-bolt .bolt {
    fill:#dd2b0e
  }
}