.atlas-playground {
  margin: 0;
  min-width: 320px;
  background: #eef2f7;
  color: #182235;
  font: 15px/1.5 Inter, ui-sans-serif, system-ui, sans-serif;
}

.atlas-playground *,
.atlas-playground *::before,
.atlas-playground *::after { box-sizing: border-box; }

.atlas-playground__shell { width: min(1440px, 100%); margin: 0 auto; padding: 24px; }
.atlas-playground__header { margin-bottom: 18px; }
.atlas-playground__eyebrow, .atlas-playground__step { margin: 0 0 8px; color: #5265d8; font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.atlas-playground h1, .atlas-playground h2, .atlas-playground p { margin-top: 0; }
.atlas-playground h1 { margin-bottom: 16px; font-size: clamp(28px, 4.4vw, 58px); line-height: 1; letter-spacing: -.04em; white-space: nowrap; }
.atlas-playground h2 { margin-bottom: 0; font-size: 20px; }
.atlas-playground__contract { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; width: fit-content; max-width: 100%; margin-bottom: 16px; padding: 12px 14px; border: 1px solid #c7d2fe; border-radius: 10px; background: #eef2ff; color: #27346b; }
.atlas-playground__contract strong { color: #263baf; font-size: 14px; }
.atlas-playground__contract code { border: 1px solid #b9c4f4; background: #fff; color: #263baf; font-size: 13px; font-weight: 800; }
.atlas-playground__contract span { color: #53617b; font-size: 13px; }
.atlas-playground code { padding: 3px 6px; border-radius: 5px; background: #dde4f0; }
.atlas-playground__modes { display: flex; gap: 6px; margin-top: 16px; }
.atlas-playground__mode { padding: 9px 13px; border: 1px solid #d8dfeb; border-radius: 8px; background: #fff; color: #59677d; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; }
.atlas-playground__mode--active { border-color: #5265d8; background: #5265d8; color: #fff; }
.atlas-playground__workspace { --left-width: 42%; display: grid; grid-template-columns: var(--left-width) 8px minmax(0, 1fr); gap: 10px; align-items: stretch; }
.atlas-playground__panel { display: flex; min-height: 580px; flex-direction: column; padding: 16px; border: 1px solid #d8dfeb; border-radius: 12px; background: #fff; box-shadow: 0 10px 24px #1822350d; }
.atlas-playground__splitter { position: relative; min-height: 100%; border-radius: 8px; cursor: col-resize; outline: none; }
.atlas-playground__splitter::after { position: absolute; top: 50%; left: 50%; width: 4px; height: 48px; border-radius: 4px; background: #cbd4e2; content: ''; transform: translate(-50%, -50%); transition: background .15s, height .15s; }
.atlas-playground__splitter:hover::after, .atlas-playground__splitter:focus-visible::after { height: 72px; background: #5265d8; }
.atlas-playground--resizing { cursor: col-resize; user-select: none; }
.atlas-playground__panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.atlas-playground__hint { margin-bottom: 14px; color: #728097; font-size: 13px; }
.atlas-playground textarea { width: 100%; min-height: 400px; flex: 1; resize: vertical; padding: 12px; border: 1px solid #cfd7e5; border-radius: 8px; outline: none; background: #101827; color: #e7edf8; font: 13px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; }
.atlas-playground textarea:focus { border-color: #5265d8; box-shadow: 0 0 0 3px #5265d822; }
.atlas-playground__button { margin-top: 12px; padding: 10px 14px; border: 0; border-radius: 8px; background: #5265d8; color: #fff; cursor: pointer; font: inherit; font-weight: 700; }
.atlas-playground__button:hover { background: #4052c4; }
.atlas-playground__button--quiet { margin: 0; background: #edf0f6; color: #48556b; font-size: 13px; }
.atlas-playground__status { min-height: 22px; margin: 12px 0 0; color: #657087; font-size: 13px; }
.atlas-playground__status[data-state="error"] { color: #b42318; }
.atlas-playground__status[data-state="success"] { color: #087443; }
.atlas-playground__isolation { padding: 5px 9px; border-radius: 999px; background: #eaf8f0; color: #087443; font-size: 11px; font-weight: 800; }
.atlas-playground iframe { width: 100%; min-height: 400px; flex: 1; border: 1px solid #d8dfeb; border-radius: 8px; background: #fff; }
.atlas-playground__source { margin-top: 14px; color: #58667b; font-size: 13px; }
.atlas-playground__source pre { max-height: 220px; overflow: auto; padding: 12px; border-radius: 8px; background: #101827; color: #e7edf8; white-space: pre-wrap; font: 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
@media (max-width: 900px) { .atlas-playground h1 { white-space: normal; } .atlas-playground__workspace { grid-template-columns: 1fr; } .atlas-playground__splitter { display: none; } .atlas-playground__panel { min-height: 0; } .atlas-playground textarea, .atlas-playground iframe { min-height: 360px; } }