/* A cropped, readable interpretation of the real console Configuration screen. */
.config-feature {
  background: transparent;
  padding: 128px 0 112px;
}
.config-feature__grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  align-items: center;
  gap: 76px;
}
.config-feature__eyebrow {
  color: #ababab;
  font-size: 14px;
  margin-bottom: 22px;
}
.config-feature__copy h2 {
  font-size: clamp(36px, 3.8vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.045em;
  font-weight: 480;
  margin-bottom: 24px;
}
.config-feature__body {
  font-size: 16px;
  line-height: 1.65;
  color: #b6b6b4;
  max-width: 390px;
  margin-bottom: 30px;
}
.config-feature__link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  background: #f0f0ee;
  color: #111;
  padding: 12px 18px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 550;
  transition: background 0.2s;
}
.config-feature__link:hover {
  background: #d5d5d3;
}
.config-showcase {
  margin: 0;
  min-width: 0;
}
.config-showcase__stage {
  position: relative;
  padding: 42px 30px;
  isolation: isolate;
}
.config-showcase__backdrop {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 65% 85%, #55585a, transparent 60%),
    radial-gradient(ellipse at 12% 25%, #303133, #101112 70%);
  clip-path: polygon(
    12px 0,
    100% 0,
    100% calc(100% - 12px),
    calc(100% - 12px) calc(100% - 12px),
    calc(100% - 12px) 100%,
    0 100%,
    0 12px,
    12px 12px
  );
}
.config-showcase__backdrop canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.config-showcase__corner {
  position: absolute;
  width: 11px;
  height: 11px;
  background: var(--bg);
}
.config-showcase__corner--tl {
  left: 12px;
  bottom: 12px;
}
.config-showcase__corner--br {
  right: 12px;
  top: 12px;
}
.config-demo {
  overflow: hidden;
  border: 1px solid #37383a;
  border-radius: 13px;
  background: #0d0d0e;
  box-shadow: 0 20px 48px #0006;
  color: #ededee;
  font-size: 12px;
}
.config-demo__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 23px 22px 20px;
}
.config-demo__orb {
  flex: 0 0 35px;
  height: 35px;
}
.config-demo__identity {
  min-width: 0;
}
.config-demo__identity strong {
  display: block;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.025em;
}
.config-demo__identity > span {
  display: block;
  color: #9a9a9e;
  font-size: 10px;
  margin-top: 4px;
}
.config-demo__publish {
  margin-left: auto;
  padding: 7px 12px;
  background: #eee;
  border-radius: 24px;
  color: #181818;
  font-size: 10px;
}
.config-demo__nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid #292929;
  white-space: nowrap;
  overflow: hidden;
}
.config-demo__nav > span {
  padding: 7px 9px;
  color: #929294;
  font-size: 11px;
}
.config-demo__nav .is-current {
  color: #ededee;
  background: #252525;
  border-radius: 5px;
}
.config-demo__viewport {
  position: relative;
  height: 252px;
  margin: 20px 22px 8px;
}
.config-demo__panel[hidden] {
  display: none;
}
.config-demo__panel {
  width: 100%;
}
.config-demo__label {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  font-weight: 500;
}
.config-demo__editor {
  min-height: 153px;
  border: 1px solid #505050;
  border-radius: 8px;
  background: #181818;
  padding: 17px 15px;
}
.config-demo__line {
  font-size: 12px;
  line-height: 1.75;
  margin: 0 0 8px;
  color: #dedede;
}
.config-demo__line--2 {
  color: #b6b6ba;
}
.config-demo__cursor {
  display: none;
  width: 1px;
  height: 13px;
  background: #e7e7e7;
}
.config-demo__under {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 13px;
  color: #b0b0b3;
  font-size: 10px;
}
.config-demo__rule {
  border: 1px solid #373737;
  background: #1c1c1c;
  padding: 6px 8px;
  border-radius: 6px;
}
.config-demo__zone {
  display: flex;
  align-items: center;
  gap: 4px;
}
.config-demo__zone svg {
  width: 12px;
  height: 12px;
}
.config-demo__count {
  color: #999;
  font-weight: 400;
}
.config-demo__add {
  margin-left: auto;
  color: #c9c9c9;
  font-size: 10px;
  font-weight: 400;
}
.config-demo__collection {
  border: 1px solid #3e3e40;
  border-radius: 8px;
  background: #171718;
}
.config-demo__collection-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border-bottom: 1px solid #303033;
}
.config-demo__collection-head > svg {
  width: 23px;
  height: 23px;
  color: #c4c6c8;
}
.config-demo__collection-head strong {
  display: block;
  font-size: 12px;
  font-weight: 500;
}
.config-demo__collection-head div > span {
  color: #939396;
  display: block;
  margin-top: 4px;
  font-size: 10px;
}
.config-demo__check {
  margin-left: auto;
  font-size: 12px;
  color: #dedede;
}
.config-demo__documents {
  padding: 8px 14px;
}
.config-demo__document {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  font-size: 11px;
  color: #bdbdc1;
}
.config-demo__document svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: #a1a1a4;
}
.config-demo__document > span:last-child {
  margin-left: auto;
  color: #86868a;
  font-size: 8px;
}
.config-demo__hint {
  color: #aaa;
  font-size: 11px;
  line-height: 1.5;
  margin: 12px 0 0;
}
.config-demo__hint--top {
  margin: -4px 0 17px;
}
.config-demo__greeting {
  border: 1px solid #505050;
  background: #181818;
  border-radius: 8px;
  padding: 20px 18px;
  display: flex;
  gap: 13px;
  align-items: flex-start;
}
.config-demo__greeting svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #a8aaad;
  margin-top: 2px;
}
.config-demo__greeting p {
  margin: 0;
  color: #dedede;
  font-size: 14px;
  line-height: 1.7;
}
.config-demo__wave {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 20px;
}
.config-demo__wave i {
  display: block;
  width: 2px;
  height: var(--height);
  border-radius: 2px;
  background: #b9bdc1;
  opacity: 0.55;
}
.config-showcase__controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.config-showcase__controls[hidden] {
  display: none;
}
.config-showcase__scenes {
  display: flex;
  align-items: center;
  gap: 4px;
}
.config-showcase__scenes button {
  position: relative;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: #9e9e9e;
  padding: 0 13px;
  min-height: 44px;
  font-size: 12px;
  overflow: hidden;
}
.config-showcase__scenes button:hover {
  color: #eee;
}
.config-showcase__scenes button[aria-pressed='true'] {
  background: #202122;
  color: #f0f0ee;
}
.config-showcase__scenes i {
  position: absolute;
  height: 1px;
  background: #b5b6b7;
  bottom: 5px;
  left: 13px;
  right: 13px;
  transform: scaleX(0);
  transform-origin: left;
}
.config-showcase[data-playing='true'] .config-showcase__scenes button[aria-pressed='true'] i {
  transform: scaleX(var(--scene-progress, 0));
}
.config-showcase__toggle {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid #303030;
  border-radius: 50%;
  background: transparent;
  color: #bbb;
  margin-left: auto;
  font-size: 14px;
}
.config-showcase__toggle:hover {
  border-color: #666;
  color: #fff;
}
.config-showcase__toggle:disabled {
  opacity: 0.5;
  cursor: default;
}
.config-showcase figcaption {
  margin-top: 13px;
  min-height: 45px;
}
.config-showcase figcaption p {
  margin-bottom: 7px;
  color: #b8b8b6;
  font-size: 12px;
  line-height: 1.5;
}
.config-showcase figcaption > span {
  display: block;
  color: #92928f;
  font-size: 10px;
}
.config-showcase[data-enhanced] .config-demo__panel {
  animation: config-panel-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.config-showcase[data-playing='false'] .config-demo__panel {
  animation-play-state: paused;
}
.config-showcase[data-static='true'] .config-demo__panel {
  animation: none;
}
.config-showcase[data-enhanced] .config-demo__wave i {
  animation: config-wave 1.9s ease-in-out infinite alternate;
  animation-delay: calc(var(--bar) * -89ms);
  animation-play-state: paused;
}
@keyframes config-panel-in {
  from {
    opacity: 0.35;
    transform: translateY(9px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes config-wave {
  to {
    transform: scaleY(0.35);
    opacity: 0.25;
  }
}
@media (min-width: 1400px) {
  .config-feature__grid {
    gap: 100px;
  }
}
@media (max-width: 1000px) {
  .config-feature__grid {
    gap: 35px;
    grid-template-columns: 0.85fr 1.15fr;
  }
  .config-showcase__stage {
    padding: 32px 20px;
  }
  .config-demo__header {
    padding: 20px 16px 18px;
  }
  .config-demo__nav {
    margin-inline: 16px;
    gap: 0;
  }
  .config-demo__viewport {
    margin-inline: 16px;
    height: 274px;
  }
}
@media (max-width: 760px) {
  .config-feature {
    padding: 78px 0 65px;
  }
  .config-feature__grid {
    grid-template-columns: 1fr;
    gap: 42px;
  }
  .config-feature__copy h2 {
    font-size: clamp(36px, 6.5vw, 48px);
  }
  .config-feature__body {
    max-width: 440px;
  }
  .config-showcase {
    width: 100%;
    max-width: 590px;
  }
  .config-showcase__stage {
    padding: 32px 22px;
  }
  .config-demo__viewport {
    height: 255px;
  }
}
@media (max-width: 420px) {
  .config-showcase__stage {
    padding: 26px 13px;
  }
  .config-demo__header {
    gap: 7px;
    padding: 17px 13px;
  }
  .config-demo__orb {
    flex-basis: 29px;
    height: 29px;
  }
  .config-demo__identity strong {
    font-size: 14px;
  }
  .config-demo__publish {
    padding: 6px 9px;
    font-size: 9px;
  }
  .config-demo__nav {
    margin-inline: 13px;
  }
  .config-demo__nav > span {
    padding: 6px;
    font-size: 10px;
  }
  .config-demo__viewport {
    margin: 17px 13px 8px;
    height: 262px;
  }
  .config-demo__editor {
    padding: 13px 11px;
    min-height: 169px;
  }
  .config-demo__line {
    font-size: 12px;
    line-height: 1.65;
  }
  .config-demo__greeting {
    padding: 17px 13px;
    gap: 10px;
  }
  .config-demo__greeting p {
    font-size: 13px;
  }
  .config-showcase__scenes button {
    padding-inline: 10px;
    font-size: 11px;
  }
  .config-showcase__controls {
    gap: 6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .config-showcase .config-demo__panel,
  .config-showcase .config-demo__wave i {
    animation: none !important;
  }
}

.config-showcase[data-playing='true'] .config-demo__wave i {
  animation-play-state: running;
}
.config-showcase[data-static='true'] .config-demo__wave i {
  animation: none;
}