:root {
  color: #172326;
  background: #f3eee2;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --shell-switch-wrap: wrap;
  --shell-switch-justify: flex-end;
  --shell-switch-border: #b8afa1;
  --shell-switch-background: #fffaf0;
  --shell-switch-link-height: 38px;
  --shell-switch-link-color: #344740;
  --shell-switch-hover-color: #172326;
  --shell-switch-font-size: 0.75rem;
  --shell-switch-active-color: #fffaf0;
  --shell-switch-active-background: #172326;
  --shell-switch-focus: #28748a;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 300px; margin: 0; }
a { color: inherit; }

.playground-header {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 14px 26px;
  padding: 12px clamp(18px, 4vw, 56px);
  border-bottom: 1px solid #b8afa1;
  background: #fffaf0;
}
.playground-wordmark { font-size: 1.1rem; font-weight: 850; letter-spacing: -0.055em; text-decoration: none; }
.playground-website-return { min-height: 44px; display: inline-flex; align-items: center; font-size: 0.82rem; font-weight: 800; text-underline-offset: 4px; }
.playground-website-return:hover { color: #a6422b; }
.playground-page { width: min(100%, 1350px); margin: 0 auto; padding: 24px clamp(18px, 4vw, 56px) 70px; }
.playground-page-intro { display: flex; justify-content: space-between; gap: 10px 20px; padding: 0 0 14px; font-size: 0.7rem; }
.playground-page-intro p { margin: 0; font-weight: 850; letter-spacing: 0.1em; }
.playground-page-intro span { color: #59645d; }
.featured-room-heading .playground-greeting { max-width: 620px; margin: 0 0 14px; color: #275842; font-size: clamp(1.15rem, 2.4vw, 1.7rem); font-weight: 800; line-height: 1.2; }
.featured-room-heading p.featured-room-kept-policy:last-child { width: fit-content; margin: 20px 0 0; color: #244d37; font: 800 0.7rem/1.3 ui-monospace, "SFMono-Regular", Menlo, monospace; }
.featured-room[data-kept="none"] .featured-room-heading .featured-room-kept-policy { color: #67513e; }
.playground-page :is(a, button):focus-visible { outline: 3px solid #28748a; outline-offset: 4px; }

@media (max-width: 700px) {
  .playground-header { display: grid; grid-template-columns: 1fr auto; padding: 10px 17px; }
  .playground-wordmark { grid-column: 1; }
  .playground-website-return { grid-column: 2; text-align: right; font-size: 0.75rem; }
  .playground-header .view-switch { grid-column: 1 / -1; justify-self: start; }
  .playground-page { padding: 17px 13px 48px; }
  .playground-page-intro { flex-direction: column; gap: 4px; padding-inline: 5px; }
  .featured-room-heading { padding-top: 22px; }
  .featured-room-heading .playground-greeting { font-size: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}