.rf-status-frame-shell {
  --rf-frame-outset: clamp(18px, 4.6vw, 48px);
  position: relative;
  isolation: isolate;
  width: min(calc(100% - 2 * var(--rf-frame-outset)), 980px);
  margin: var(--rf-frame-outset) auto;
  overflow: visible;
}

.rf-status-frame-shell > .rf-status-window {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  overflow: hidden;
}

.rf-status-frame-shell > .rf-frame-layer {
  position: absolute;
  z-index: 4;
  display: block;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--frame-accent) 32%, transparent));
}

.rf-status-frame-shell > .rf-frame-top,
.rf-status-frame-shell > .rf-frame-bottom {
  left: calc(-1 * var(--rf-frame-outset));
  width: calc(100% + 2 * var(--rf-frame-outset));
  height: calc(var(--rf-frame-outset) + 3px);
}

.rf-status-frame-shell > .rf-frame-top {
  top: calc(-1 * var(--rf-frame-outset));
  background-image: var(--frame-top);
}

.rf-status-frame-shell > .rf-frame-bottom {
  bottom: calc(-1 * var(--rf-frame-outset));
  background-image: var(--frame-bottom);
}

.rf-status-frame-shell > .rf-frame-left,
.rf-status-frame-shell > .rf-frame-right {
  top: calc(-1 * var(--rf-frame-outset));
  width: calc(var(--rf-frame-outset) + 3px);
  height: calc(100% + 2 * var(--rf-frame-outset));
}

.rf-status-frame-shell > .rf-frame-left {
  left: calc(-1 * var(--rf-frame-outset));
  background-image: var(--frame-left);
}

.rf-status-frame-shell > .rf-frame-right {
  right: calc(-1 * var(--rf-frame-outset));
  background-image: var(--frame-right);
}

.rf-status-window > .rf-frame-inside {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  pointer-events: none;
  background-image: var(--frame-inside);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: .32;
}

.rf-status-window > *:not(.rf-frame-layer) {
  position: relative;
  z-index: 3;
}

.rf-status-frame-shell.has-responsive-frame-layout {
  --rf-frame-outset: clamp(42px, 9vw, 96px);
  width: min(calc(100% - 2 * var(--rf-frame-outset)), 980px);
  margin: var(--rf-frame-outset) auto;
}

.rf-status-frame-shell.has-template-frame-layout {
  --rf-frame-outset: clamp(52px, 13vw, 164px);
}

.rf-status-window.has-responsive-frame-layout {
  overflow: visible;
  clip-path: none;
}

.rf-status-window.has-template-frame-layout {
  box-sizing: border-box;
  container-type: inline-size;
}

.rf-status-window.has-responsive-frame-layout > .rf-responsive-frame-layer {
  position: absolute;
  left: var(--rf-layer-x);
  top: var(--rf-layer-y);
  width: var(--rf-layer-width);
  height: var(--rf-layer-height);
  aspect-ratio: var(--rf-layer-aspect);
  transform: var(--rf-layer-transform);
  max-width: none;
  display: block;
  opacity: var(--rf-layer-opacity);
  object-fit: var(--rf-layer-fit);
  background: none;
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--frame-accent) 32%, transparent));
}

.rf-status-window.has-responsive-frame-layout > .rf-responsive-frame-layer.is-under { z-index: 1; }
.rf-status-window.has-responsive-frame-layout > .rf-responsive-frame-layer.is-over { z-index: 5; }

.rf-status-window.has-transparent-frame-surface {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 650px) {
  .rf-status-frame-shell {
    --rf-frame-outset: clamp(14px, 5vw, 26px);
  }
  .rf-status-frame-shell.has-responsive-frame-layout {
    --rf-frame-outset: clamp(34px, 10vw, 64px);
  }
  .rf-status-frame-shell.has-template-frame-layout {
    --rf-frame-outset: clamp(40px, 13vw, 72px);
  }
}