html,
body,
#storybook-root {
  min-height: 100%;
}

body {
  overflow: auto;
  background: var(--background);
}

.sb-show-main {
  background: var(--background);
  color: var(--foreground);
}

.paperclip-story {
  min-height: 100vh;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--muted) 28%, transparent), transparent 340px),
    var(--background);
  color: var(--foreground);
  padding: 24px;
}

.paperclip-story__inner {
  margin: 0 auto;
  max-width: 1180px;
}

.paperclip-story__frame {
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--card) 86%, transparent);
  box-shadow: 0 24px 90px color-mix(in oklab, black 16%, transparent);
}

.paperclip-story__label {
  color: var(--muted-foreground);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .paperclip-story {
    padding: 16px;
  }
}