:root {
  --makrell-accent: #0f766e;
  --makrell-accent-2: #b45309;
  --makrell-surface: #f7faf9;
  --sidebar-width: 18.75rem;
  --sidebar-width--mobile: 17rem;
  --docs-body-max: 104rem;
}

body {
  font-size: 14px;
  line-height: 1.5;
}

.page {
  width: min(100%, var(--docs-body-max));
  margin-left: auto;
  margin-right: auto;
}

.content {
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
}

.main .content {
  padding-top: 1.1rem;
  padding-bottom: 1.2rem;
  width: min(100%, 72rem);
  margin-left: auto;
  margin-right: auto;
}

.main .sidebar-drawer,
.toc-drawer {
  font-size: 0.92rem;
}

.sidebar-container {
  font-size: 0.98rem;
  background: linear-gradient(180deg, rgba(15, 118, 110, 0.055), rgba(15, 118, 110, 0.02));
  border-right: 1px solid rgba(15, 118, 110, 0.12);
}

.sidebar-sticky {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.article-container,
.toc-sticky {
  max-width: 100%;
}

@media (min-width: 67em) and (max-width: 89.99em) {
  .page {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  }

  .toc-drawer,
  .toc-sticky {
    display: none;
  }
}

@media (min-width: 90em) {
  .page {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr) minmax(14rem, 18rem);
  }

  .sidebar-drawer {
    width: 18.75rem;
  }

  .sidebar-container {
    width: 18.75rem;
  }

  .toc-drawer {
    width: auto;
  }
}

.sidebar-brand-text {
  letter-spacing: 0.02em;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.15;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}

.sidebar-brand {
  align-items: flex-start;
}

.sidebar-search {
  font-size: 0.92rem;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

.sidebar-tree .reference {
  line-height: 1.24;
  font-weight: 560;
}

.sidebar-tree li {
  margin: 0.08rem 0;
}

.sidebar-tree ul {
  gap: 0;
}

.sidebar-tree a {
  padding: 0.18rem 0.45rem;
  border-radius: 0.4rem;
}

.sidebar-tree .current-page > .reference,
.sidebar-tree .current > .reference {
  background: rgba(15, 118, 110, 0.12);
  color: var(--makrell-accent);
  font-weight: 700;
}

.sidebar-tree .caption {
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #334155;
  margin-top: 0.55rem;
  margin-bottom: 0.18rem;
}

.sidebar-tree ul ul {
  margin-top: 0.1rem;
  padding-left: 0.5rem;
  border-left: 1px solid rgba(15, 118, 110, 0.1);
}

.sidebar-tree a:hover {
  background: rgba(15, 118, 110, 0.08);
  text-decoration: none;
}

.sidebar-search {
  border-bottom: 1px solid rgba(15, 118, 110, 0.1);
  margin-bottom: 0.45rem;
}

.sidebar-search-container input {
  border-radius: 0.45rem;
  border: 1px solid rgba(15, 118, 110, 0.16);
}

.sidebar-brand {
  padding-bottom: 0.45rem;
  border-bottom: 1px solid rgba(15, 118, 110, 0.1);
  margin-bottom: 0.45rem;
}

.content h1 {
  color: var(--makrell-accent);
  font-size: 1.8rem;
  margin-bottom: 0.55rem;
}

.content h2 {
  color: #1f2937;
  border-bottom: 1px solid rgba(15, 118, 110, 0.18);
  padding-bottom: 0.2rem;
  margin-top: 1.35rem;
  margin-bottom: 0.4rem;
  font-size: 1.22rem;
}

.content h3 {
  margin-top: 1rem;
  margin-bottom: 0.25rem;
  font-size: 1rem;
}

.content p,
.content ul,
.content ol,
.content dl {
  margin-top: 0.3rem;
  margin-bottom: 0.48rem;
}

.content p,
.content li,
.content dd,
.content dt,
.content blockquote,
.content table,
.content h1,
.content h2,
.content h3 {
  overflow-wrap: anywhere;
  word-break: normal;
}

.content li {
  margin: 0.1rem 0;
}

.content ul,
.content ol {
  padding-left: 1.15rem;
}

.content pre {
  padding: 0.58rem 0.78rem;
  font-size: 0.84rem;
  overflow-x: auto;
  max-width: 100%;
}

.content div.highlight,
.content .highlight {
  margin: 0.45rem 0 0.7rem;
  max-width: 100%;
  overflow-x: auto;
}

.content img[alt="Makrell"] {
  filter: drop-shadow(0 10px 24px rgba(15, 118, 110, 0.18));
  max-width: 150px;
  height: auto;
  width: auto;
}

.home-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.45rem;
  padding: 1rem 1rem 1.15rem;
  margin: 0.2rem 0 1rem;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 0.9rem;
  background:
    radial-gradient(circle at top, rgba(15, 118, 110, 0.09), transparent 58%),
    linear-gradient(180deg, rgba(15, 118, 110, 0.035), rgba(180, 83, 9, 0.02));
}

.home-hero .home-hero-logo {
  max-width: 170px;
  width: min(170px, 42vw);
  margin: 0 auto 0.1rem;
}

.home-hero .home-hero-slogan {
  font-size: 1.28rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--makrell-accent);
  max-width: 34rem;
  margin: 0 auto;
}

.content img.vscode-screenshot {
  display: block;
  width: min(100%, 920px);
  max-width: 100%;
  height: auto;
  margin: 0.65rem auto 1rem;
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 0.7rem;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
}

body[data-theme="dark"] .content img.vscode-screenshot {
  border-color: rgba(148, 163, 184, 0.2);
  box-shadow: 0 20px 50px rgba(2, 6, 23, 0.5);
}

.playground-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1rem 1.1rem;
  margin: 0.4rem 0 1rem;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 0.9rem;
  background:
    radial-gradient(circle at top right, rgba(15, 118, 110, 0.08), transparent 40%),
    linear-gradient(180deg, rgba(15, 118, 110, 0.035), rgba(180, 83, 9, 0.025));
}

.playground-callout__copy {
  min-width: 0;
}

.playground-callout__eyebrow {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--makrell-accent);
  margin-bottom: 0.2rem;
}

.playground-callout__title {
  font-size: 1.08rem;
  font-weight: 780;
  color: #1f2937;
  margin-bottom: 0.2rem;
}

.playground-callout__copy p {
  margin: 0;
  max-width: 44rem;
}

.playground-callout__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: flex-end;
}

.playground-callout__actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0.42rem 0.95rem;
  border-radius: 0.55rem;
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 700;
}

.playground-callout__primary {
  color: #ecfeff;
  background: linear-gradient(135deg, #0f766e, #0b9488);
  box-shadow: 0 12px 24px rgba(15, 118, 110, 0.16);
}

.playground-callout__secondary {
  color: var(--makrell-accent);
  background: rgba(15, 118, 110, 0.06);
  border: 1px solid rgba(15, 118, 110, 0.12);
}

body[data-theme="dark"] .playground-callout {
  border-color: rgba(129, 236, 255, 0.12);
  background:
    radial-gradient(circle at top right, rgba(129, 236, 255, 0.1), transparent 42%),
    linear-gradient(180deg, rgba(12, 22, 39, 0.94), rgba(9, 18, 33, 0.98));
}

body[data-theme="dark"] .playground-callout__eyebrow,
body[data-theme="dark"] .playground-callout__secondary {
  color: #81ecff;
}

body[data-theme="dark"] .playground-callout__title {
  color: #f8fafc;
}

body[data-theme="dark"] .playground-callout__copy p {
  color: #cbd5e1;
}

body[data-theme="dark"] .playground-callout__secondary {
  background: rgba(25, 37, 64, 0.72);
  border-color: rgba(129, 236, 255, 0.14);
}

.highlight {
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 0.35rem;
}

.toctree-wrapper.compound > p.caption {
  color: var(--makrell-accent);
  font-weight: 700;
}

div.admonition, .docutils .admonition {
  border-left: 4px solid var(--makrell-accent);
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.content .section:first-of-type > p:first-of-type {
  font-size: 0.98rem;
}

.related-pages {
  margin-top: 1.15rem;
}

.related-pages a {
  padding: 0.75rem 0.95rem;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 0.55rem;
  background: rgba(15, 118, 110, 0.04);
}

.related-pages a:hover {
  background: rgba(15, 118, 110, 0.08);
  border-color: rgba(15, 118, 110, 0.2);
  text-decoration: none;
}

.related-pages .context {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #475569;
}

.related-pages .title {
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.25;
  color: #1f2937;
}

.makrell-sidebar-link-row {
  margin-top: auto;
  padding-top: 0.85rem;
  padding-bottom: 0.3rem;
  border-top: 1px solid rgba(15, 118, 110, 0.12);
  width: 100%;
  box-sizing: border-box;
}

.makrell-github-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  color: #475569;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 0.45rem;
  background: rgba(15, 118, 110, 0.03);
}

.makrell-github-link:hover {
  color: var(--makrell-accent);
  background: rgba(15, 118, 110, 0.09);
  border-color: rgba(15, 118, 110, 0.2);
  text-decoration: none;
}

.makrell-github-link svg {
  width: 1rem;
  height: 1rem;
}

.makrell-github-link-sidebar {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: auto;
  justify-content: flex-start;
  gap: 0.62rem;
  padding: 0.58rem 0.75rem;
  font-size: 0.96rem;
  font-weight: 650;
  line-height: 1.2;
  overflow: hidden;
}

.makrell-github-link-sidebar svg {
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 auto;
}

.makrell-github-link-sidebar span:not(.visually-hidden) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portability-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.65rem 0 0.9rem;
}

.portability-key-item {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}

.portability-marker {
  width: 0.56rem;
  height: 0.56rem;
  border-radius: 999px;
  display: inline-block;
  background: currentColor;
  opacity: 0.95;
}

.portability-key-core {
  color: #0f766e;
}

.portability-key-profile {
  color: #b45309;
}

.portability-key-application {
  color: #475569;
}

.related-pages svg.furo-related-icon,
.related-pages svg.furo-related-icon use {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--makrell-accent);
}

.toc-tree {
  line-height: 1.2;
}

.toc-tree li {
  margin: 0.05rem 0;
}

body.playground-page .bd-main .bd-content .bd-article-container,
body.playground-page .bd-main .bd-content .bd-article,
body.playground-page .bd-main .bd-content .bd-content__inner {
  max-width: none;
}

body.playground-page .bd-main .bd-content .bd-article-container {
  padding-left: 0;
  padding-right: 0;
}

.playground-shell {
  margin: 0.15rem 0 1rem;
  padding: 1rem 1rem 1.1rem;
  border-radius: 0.7rem;
  overflow: hidden;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
}

.playground-shell--inner {
  padding: 0 0 0.95rem;
  margin-bottom: 0.9rem;
  border-bottom: 0;
}

.playground-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.85rem;
  font-size: 0.82rem;
}

.playground-backlinks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.playground-backlinks a {
  text-decoration: none;
}

.playground-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.62rem;
  border-radius: 0.375rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.playground-theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  margin-left: auto;
}

.playground-theme-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.95rem;
  padding: 0.28rem 0.68rem;
  border: 0;
  border-radius: 0.375rem;
  font-size: 0.74rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.playground-section-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.95rem;
}

.playground-section-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.35rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.85rem;
  font-weight: 650;
  text-decoration: none;
}

.playground-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(18rem, 1fr);
  gap: 1rem;
  align-items: stretch;
}

.playground-hero-copy {
  padding: 1.1rem 1.1rem 1rem;
  border-radius: 0.5rem;
}

.playground-hero-copy .rubric {
  margin: 0 0 0.45rem;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.playground-hero-copy p:last-child {
  margin-bottom: 0;
  max-width: 42rem;
}

.playground-hero-panels {
  display: grid;
  gap: 0.8rem;
}

.playground-panel {
  padding: 0.9rem 0.95rem;
  border-radius: 0.5rem;
}

.playground-panel p:first-child {
  margin-top: 0;
}

.playground-panel ul:last-child {
  margin-bottom: 0;
}

.playground-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0.85rem 0 0.4rem;
}

.playground-cta-row a {
  display: inline-flex;
  align-items: center;
  min-height: 2.1rem;
  padding: 0.42rem 0.85rem;
  border-radius: 0.375rem;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}

.playground-workspace {
  display: grid;
  grid-template-columns: minmax(14rem, 16rem) minmax(0, 1fr);
  gap: 1rem;
  margin: 0.85rem 0 1rem;
}

.playground-workspace--large {
  grid-template-columns: minmax(15rem, 17rem) minmax(0, 1fr);
}

.playground-rail,
.playground-main {
  border-radius: 0.95rem;
  overflow: hidden;
}

.playground-rail-header,
.playground-main-top {
  padding: 0.7rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.playground-rail-list {
  display: grid;
  gap: 0.5rem;
  padding: 0.75rem;
}

.playground-rail-item {
  padding: 0.75rem 0.8rem;
  border-radius: 0.8rem;
  font-size: 0.85rem;
}

.playground-rail-item p:last-child {
  margin-bottom: 0;
}

.playground-faux-tabbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.playground-faux-tab {
  display: inline-flex;
  align-items: center;
  min-height: 1.95rem;
  padding: 0.32rem 0.72rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 650;
}

.playground-main-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
}

.playground-runbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.playground-utilitybar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 0.85rem 0;
}

.playground-utilitygroup {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.playground-utility-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  font-size: 0.77rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.playground-run-pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.95rem;
  padding: 0.3rem 0.72rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.playground-run-pill--quiet {
  font-weight: 650;
}

.playground-editor {
  padding: 0.2rem 0.2rem 0;
}

.playground-editor .highlight,
.playground-editor .highlight pre {
  margin: 0;
  border-radius: 0;
}

.playground-bottom-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 0.75rem;
}

.playground-output-panel {
  padding: 0.8rem 0.85rem;
  border-radius: 0.8rem;
  font-size: 0.84rem;
}

.playground-output-panel p:last-child {
  margin-bottom: 0;
}

.playground-demo {
  display: grid;
  grid-template-columns: minmax(13rem, 15rem) minmax(0, 1fr);
  gap: 1rem;
  margin: 0.9rem 0 1rem;
}

.playground-demo-rail,
.playground-demo-main {
  border-radius: 0.95rem;
  overflow: hidden;
}

.playground-demo-rail-header,
.playground-demo-toolbar {
  padding: 0.72rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.playground-demo-rail-list {
  display: grid;
  gap: 0.5rem;
  padding: 0.75rem;
}

.playground-demo-example {
  width: 100%;
  text-align: left;
  padding: 0.72rem 0.8rem;
  border: 0;
  border-radius: 0.78rem;
  font-size: 0.84rem;
  font-weight: 650;
  cursor: pointer;
}

.playground-demo-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
}

.playground-demo-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.playground-demo-tab {
  display: inline-flex;
  align-items: center;
  min-height: 1.95rem;
  padding: 0.3rem 0.72rem;
  border: 0;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.playground-demo-title {
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.04em;
}

.playground-demo-body {
  padding: 0.82rem;
}

.playground-demo-panel {
  display: none;
}

.playground-demo-panel--active {
  display: block;
}

.playground-demo-pre {
  margin: 0;
  padding: 0.95rem 1rem;
  border-radius: 0.9rem;
  font-size: 0.82rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.playground-demo-docs {
  padding: 0.95rem 1rem;
  border-radius: 0.9rem;
  font-size: 0.84rem;
}

.playground-demo-docs p:last-child,
.playground-demo-docs ul:last-child {
  margin-bottom: 0;
}

.playground-live {
  display: grid;
  gap: 1rem;
  margin: 0 0 1.15rem;
}

.playground-live-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 0.9rem;
  border-radius: 0.5rem;
}

.playground-live-label {
  font-size: 0.8rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.playground-live-select {
  min-width: 15rem;
  min-height: 2.1rem;
  padding: 0.35rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.88rem;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
}

.playground-live-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.05rem;
  padding: 0.35rem 0.8rem;
  border: 0;
  border-radius: 0.375rem;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}

.playground-live-status {
  font-size: 0.82rem;
  font-weight: 650;
}

.playground-live-layout {
  display: grid;
  grid-template-columns: minmax(13rem, 15rem) minmax(0, 1.45fr) minmax(18rem, 0.92fr);
  gap: 1rem;
}

.playground-live-rail,
.playground-live-editorpane,
.playground-live-card {
  border-radius: 0.45rem;
  overflow: hidden;
}

.playground-live-rail-header {
  padding: 0.72rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.playground-live-rail-list {
  display: grid;
  gap: 0.5rem;
  padding: 0.75rem;
}

.playground-live-example {
  display: grid;
  gap: 0.32rem;
  width: 100%;
  text-align: left;
  padding: 0.75rem 0.8rem;
  border: 0;
  border-radius: 0.3rem;
  font-size: 0.84rem;
  cursor: pointer;
}

.playground-live-example strong {
  font-size: 0.85rem;
  font-weight: 730;
}

.playground-live-example span {
  font-size: 0.78rem;
  line-height: 1.35;
}

.playground-live-editor {
  width: 100%;
  min-height: 36rem;
  padding: 1.05rem 1.1rem;
  border: 0;
  resize: vertical;
  font: 0.84rem/1.6 "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
}

.playground-live-sidepane {
  display: grid;
  gap: 0.8rem;
  align-content: start;
}

.playground-live-tabbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.playground-live-tab {
  display: inline-flex;
  align-items: center;
  min-height: 1.95rem;
  padding: 0.3rem 0.72rem;
  border: 0;
  border-radius: 0.25rem 0.25rem 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.playground-live-panel {
  display: none;
}

.playground-live-panel--active {
  display: block;
}

.playground-live-card {
  padding: 0.9rem 0.95rem;
}

.playground-live-card p:last-child {
  margin-bottom: 0;
}

.playground-live-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.6rem;
}

.playground-live-tag {
  display: inline-flex;
  align-items: center;
  min-height: 1.7rem;
  padding: 0.22rem 0.62rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.playground-live-pre {
  margin: 0.55rem 0 0;
  min-height: 7rem;
  padding: 0.85rem 0.92rem;
  border-radius: 0.3rem;
  font-size: 0.81rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
}

.playground-live-meta {
  font-size: 0.84rem;
}

.playground-live-list {
  margin-top: 0.55rem;
  margin-bottom: 0;
  padding-left: 1.15rem;
}

.playground-live-doc-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.65rem;
}

.playground-live-doc-link {
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
  padding: 0.28rem 0.72rem;
  border-radius: 0.3rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
}

.playground-example-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin: 0.8rem 0 1rem;
}

.playground-example-card {
  padding: 0.95rem 1rem;
  border-radius: 0.9rem;
}

.playground-example-card p:first-child {
  margin-top: 0;
}

.playground-example-card ul:last-child,
.playground-example-card p:last-child {
  margin-bottom: 0;
}

.playground-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin: 0.9rem 0 1rem;
}

.playground-hub-card {
  padding: 0.95rem 1rem;
  border-radius: 0.9rem;
}

.playground-hub-card p:first-child {
  margin-top: 0;
}

.playground-hub-card p:last-child {
  margin-bottom: 0;
}

.playground-hub-card a {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.35rem;
  font-size: 0.96rem;
  font-weight: 750;
  text-decoration: none;
}

.playground-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin: 0.8rem 0 1rem;
}

.playground-feature-card {
  padding: 0.95rem 1rem;
  border-radius: 0.9rem;
}

.playground-feature-card p:first-child {
  margin-top: 0;
}

.playground-feature-card ul:last-child,
.playground-feature-card p:last-child {
  margin-bottom: 0;
}

.playground-state-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin: 0.8rem 0 1rem;
}

.playground-state-card {
  padding: 0.95rem 1rem;
  border-radius: 0.9rem;
}

.playground-state-card p:first-child {
  margin-top: 0;
}

.playground-state-card ul:last-child,
.playground-state-card p:last-child {
  margin-bottom: 0;
}

.playground-state-sketch-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  margin: 0.8rem 0 1rem;
}

.playground-doc-stack {
  display: grid;
  gap: 0.8rem;
  margin: 0.8rem 0 1rem;
}

.playground-doc-card {
  padding: 0.95rem 1rem;
  border-radius: 0.9rem;
}

.playground-doc-card p:first-child {
  margin-top: 0;
}

.playground-doc-card ul:last-child,
.playground-doc-card p:last-child {
  margin-bottom: 0;
}

.playground-doc-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.55rem;
}

.playground-doc-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
  padding: 0.28rem 0.72rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.playground-state-sketch {
  border-radius: 0.95rem;
  overflow: hidden;
}

.playground-state-sketch-header {
  padding: 0.7rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.playground-state-sketch-body {
  display: grid;
  gap: 0.55rem;
  padding: 0.85rem;
}

.playground-state-line {
  padding: 0.55rem 0.65rem;
  border-radius: 0.7rem;
  font-size: 0.82rem;
  font-weight: 560;
}

.playground-state-line--strong {
  font-weight: 720;
}

.playground-state-line--error {
  font-weight: 720;
}

html[data-theme="light"] .playground-shell {
  background:
    radial-gradient(circle at top right, rgba(129, 236, 255, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(241, 246, 255, 0.98), rgba(231, 241, 249, 0.98));
  box-shadow:
    0 18px 38px rgba(15, 23, 42, 0.06),
    inset 0 0 0 1px rgba(15, 118, 110, 0.08);
}

html[data-theme="light"] .playground-topbar {
  color: #334155;
}

html[data-theme="light"] .playground-backlinks a {
  color: #0f766e;
}

html[data-theme="light"] .playground-backlinks a:hover {
  color: #0a5c56;
}

html[data-theme="light"] .playground-badge {
  color: #083344;
  background: rgba(129, 236, 255, 0.45);
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.12);
}

html[data-theme="light"] .playground-theme-button {
  color: #334155;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.08);
}

html[data-theme="light"] .playground-theme-button--active {
  color: #0f766e;
  background: rgba(129, 236, 255, 0.38);
  box-shadow: inset 3px 0 0 rgba(15, 118, 110, 0.85);
}

html[data-theme="light"] .playground-section-nav a {
  color: #0f172a;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: none;
}

html[data-theme="light"] .playground-cta-row a {
  color: #083344;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.08);
}

html[data-theme="light"] .playground-cta-row a:hover {
  color: #0f766e;
  background: rgba(255, 255, 255, 0.95);
}

html[data-theme="light"] .playground-section-nav a:hover {
  color: #0f766e;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: none;
}

html[data-theme="light"] .playground-section-nav a.playground-section-link--active {
  color: #0f766e;
  background: rgba(129, 236, 255, 0.36);
  box-shadow: inset 3px 0 0 rgba(15, 118, 110, 0.85);
}

html[data-theme="light"] .playground-hero-copy,
html[data-theme="light"] .playground-panel {
  background: rgba(255, 255, 255, 0.64);
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.07);
}

html[data-theme="light"] .playground-rail,
html[data-theme="light"] .playground-main {
  background: rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.1);
}

html[data-theme="light"] .playground-rail-header,
html[data-theme="light"] .playground-main-top {
  background: rgba(15, 118, 110, 0.06);
  color: #334155;
}

html[data-theme="light"] .playground-rail-item,
html[data-theme="light"] .playground-output-panel,
html[data-theme="light"] .playground-example-card,
html[data-theme="light"] .playground-feature-card,
html[data-theme="light"] .playground-state-card,
html[data-theme="light"] .playground-hub-card,
html[data-theme="light"] .playground-doc-card {
  background: rgba(247, 250, 249, 0.92);
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.08);
}

html[data-theme="light"] .playground-doc-chip {
  color: #0f766e;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.12);
}

html[data-theme="light"] .playground-hub-card a {
  color: #0f766e;
}

html[data-theme="light"] .playground-state-sketch {
  background: rgba(255, 255, 255, 0.66);
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.1);
}

html[data-theme="light"] .playground-state-sketch-header {
  background: rgba(15, 118, 110, 0.06);
  color: #334155;
}

html[data-theme="light"] .playground-demo-rail,
html[data-theme="light"] .playground-demo-main {
  background: rgba(255, 255, 255, 0.68);
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.1);
}

html[data-theme="light"] .playground-demo-rail-header,
html[data-theme="light"] .playground-demo-toolbar {
  background: rgba(15, 118, 110, 0.06);
  color: #334155;
}

html[data-theme="light"] .playground-demo-example,
html[data-theme="light"] .playground-demo-pre,
html[data-theme="light"] .playground-demo-docs {
  color: #0f172a;
  background: rgba(247, 250, 249, 0.94);
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.08);
}

html[data-theme="light"] .playground-demo-example--active,
html[data-theme="light"] .playground-demo-tab--active {
  color: #0f766e;
  background: rgba(129, 236, 255, 0.36);
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.16);
}

html[data-theme="light"] .playground-demo-tab {
  color: #334155;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.1);
}

html[data-theme="light"] .playground-demo-title {
  color: #0f766e;
}

html[data-theme="light"] .playground-live-select,
html[data-theme="light"] .playground-live-rail,
html[data-theme="light"] .playground-live-editor,
html[data-theme="light"] .playground-live-card,
html[data-theme="light"] .playground-live-pre {
  color: #0f172a;
  background: rgba(247, 250, 249, 0.94);
  box-shadow: none;
}

html[data-theme="light"] .playground-live-editorpane {
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.08);
}

html[data-theme="light"] .playground-live-controls {
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.08);
}

html[data-theme="light"] .playground-live-rail-header {
  background: rgba(15, 118, 110, 0.06);
  color: #334155;
}

html[data-theme="light"] .playground-live-example {
  color: #0f172a;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: none;
}

html[data-theme="light"] .playground-live-example--active {
  color: #0f766e;
  background: rgba(129, 236, 255, 0.36);
  box-shadow: inset 3px 0 0 rgba(15, 118, 110, 0.85);
}

html[data-theme="light"] .playground-live-button {
  color: #083344;
  background: linear-gradient(135deg, rgba(129, 236, 255, 0.9), rgba(0, 212, 236, 0.78));
  box-shadow: 0 10px 24px rgba(0, 96, 120, 0.14);
}

html[data-theme="light"] .playground-live-button--quiet {
  color: #0f172a;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.08);
}

html[data-theme="light"] .playground-live-tab {
  color: #334155;
  background: rgba(238, 244, 247, 0.92);
  box-shadow: none;
}

html[data-theme="light"] .playground-live-tab--active {
  color: #0f766e;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 2px 0 rgba(15, 118, 110, 0.9);
}

html[data-theme="light"] .playground-live-tag {
  color: #0f766e;
  background: rgba(129, 236, 255, 0.32);
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.12);
}

html[data-theme="light"] .playground-live-doc-link {
  color: #0f766e;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.08);
}

html[data-theme="light"] .playground-live-status[data-tone="ok"] {
  color: #0f766e;
}

html[data-theme="light"] .playground-live-status[data-tone="error"] {
  color: #b91c1c;
}

html[data-theme="light"] .playground-state-line {
  background: rgba(247, 250, 249, 0.95);
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.08);
  color: #0f172a;
}

html[data-theme="light"] .playground-state-line--strong {
  color: #0f766e;
}

html[data-theme="light"] .playground-state-line--error {
  color: #b91c1c;
  box-shadow: inset 0 0 0 1px rgba(185, 28, 28, 0.18);
}

html[data-theme="light"] .playground-rail-item--active,
html[data-theme="light"] .playground-faux-tab--active {
  background: rgba(129, 236, 255, 0.35);
  color: #0f766e;
}

html[data-theme="light"] .playground-faux-tab {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.1);
}

html[data-theme="light"] .playground-run-pill {
  color: #083344;
  background: linear-gradient(135deg, rgba(129, 236, 255, 0.9), rgba(0, 212, 236, 0.78));
}

html[data-theme="light"] .playground-utility-chip {
  color: #334155;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.1);
}

html[data-theme="light"] .playground-utility-chip--active {
  color: #0f766e;
  background: rgba(129, 236, 255, 0.35);
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.16);
}

html[data-theme="light"] .playground-run-pill--quiet {
  color: #0f172a;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.12);
}

html[data-theme="light"] .playground-hero-copy .rubric {
  color: #0f766e;
}

html[data-theme="dark"] .playground-shell {
  background:
    radial-gradient(circle at top right, rgba(129, 236, 255, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(6, 14, 32, 0.98), rgba(9, 19, 40, 0.98));
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(129, 236, 255, 0.08);
}

html[data-theme="dark"] .playground-shell--inner {
  border-bottom-color: transparent;
}

html[data-theme="dark"] .playground-topbar {
  color: #a3aac4;
}

html[data-theme="dark"] .playground-backlinks a {
  color: #81ecff;
}

html[data-theme="dark"] .playground-backlinks a:hover {
  color: #b9f7ff;
}

html[data-theme="dark"] .playground-badge {
  color: #d5fbff;
  background: rgba(25, 37, 64, 0.86);
  box-shadow: inset 0 0 0 1px rgba(129, 236, 255, 0.08);
}

html[data-theme="dark"] .playground-theme-button {
  color: #d4dcf4;
  background: rgba(15, 25, 48, 0.94);
  box-shadow: inset 0 0 0 1px rgba(109, 117, 140, 0.08);
}

html[data-theme="dark"] .playground-theme-button--active {
  color: #81ecff;
  background: rgba(25, 37, 64, 0.98);
  box-shadow: inset 3px 0 0 rgba(129, 236, 255, 0.92);
}

html[data-theme="dark"] .playground-section-nav a {
  color: #dee5ff;
  background: rgba(15, 25, 48, 0.92);
  box-shadow: none;
}

html[data-theme="dark"] .playground-cta-row a {
  color: #d5fbff;
  background: rgba(15, 25, 48, 0.94);
  box-shadow: inset 0 0 0 1px rgba(129, 236, 255, 0.08);
}

html[data-theme="dark"] .playground-cta-row a:hover {
  color: #81ecff;
  background: rgba(25, 37, 64, 0.96);
}

html[data-theme="dark"] .playground-section-nav a:hover {
  color: #81ecff;
  background: rgba(25, 37, 64, 0.92);
  box-shadow: none;
}

html[data-theme="dark"] .playground-section-nav a.playground-section-link--active {
  color: #81ecff;
  background: rgba(25, 37, 64, 0.98);
  box-shadow: inset 3px 0 0 rgba(129, 236, 255, 0.92);
}

html[data-theme="dark"] .playground-hero-copy,
html[data-theme="dark"] .playground-panel {
  background: rgba(15, 25, 48, 0.9);
  box-shadow: inset 0 0 0 1px rgba(109, 117, 140, 0.08);
}

html[data-theme="dark"] .playground-rail,
html[data-theme="dark"] .playground-main {
  background: rgba(9, 19, 40, 0.96);
  box-shadow: inset 0 0 0 1px rgba(109, 117, 140, 0.08);
}

html[data-theme="dark"] .playground-rail-header,
html[data-theme="dark"] .playground-main-top {
  background: rgba(0, 0, 0, 0.26);
  color: #a3aac4;
}

html[data-theme="dark"] .playground-rail-item,
html[data-theme="dark"] .playground-output-panel,
html[data-theme="dark"] .playground-example-card,
html[data-theme="dark"] .playground-feature-card,
html[data-theme="dark"] .playground-state-card,
html[data-theme="dark"] .playground-hub-card,
html[data-theme="dark"] .playground-doc-card {
  background: rgba(15, 25, 48, 0.92);
  box-shadow: inset 0 0 0 1px rgba(109, 117, 140, 0.08);
}

html[data-theme="dark"] .playground-doc-chip {
  color: #81ecff;
  background: rgba(25, 37, 64, 0.94);
  box-shadow: inset 0 0 0 1px rgba(129, 236, 255, 0.12);
}

html[data-theme="dark"] .playground-hub-card a {
  color: #81ecff;
}

html[data-theme="dark"] .playground-state-sketch {
  background: rgba(15, 25, 48, 0.94);
  box-shadow: inset 0 0 0 1px rgba(109, 117, 140, 0.12);
}

html[data-theme="dark"] .playground-state-sketch-header {
  background: rgba(0, 0, 0, 0.24);
  color: #a3aac4;
}

html[data-theme="dark"] .playground-demo-rail,
html[data-theme="dark"] .playground-demo-main {
  background: rgba(9, 19, 40, 0.96);
  box-shadow: inset 0 0 0 1px rgba(109, 117, 140, 0.12);
}

html[data-theme="dark"] .playground-demo-rail-header,
html[data-theme="dark"] .playground-demo-toolbar {
  background: rgba(0, 0, 0, 0.26);
  color: #a3aac4;
}

html[data-theme="dark"] .playground-demo-example,
html[data-theme="dark"] .playground-demo-pre,
html[data-theme="dark"] .playground-demo-docs {
  color: #dee5ff;
  background: rgba(15, 25, 48, 0.92);
  box-shadow: inset 0 0 0 1px rgba(109, 117, 140, 0.12);
}

html[data-theme="dark"] .playground-demo-example--active,
html[data-theme="dark"] .playground-demo-tab--active {
  color: #81ecff;
  background: rgba(25, 37, 64, 0.98);
  box-shadow: inset 0 0 0 1px rgba(129, 236, 255, 0.18);
}

html[data-theme="dark"] .playground-demo-tab {
  color: #d4dcf4;
  background: rgba(15, 25, 48, 0.94);
  box-shadow: inset 0 0 0 1px rgba(109, 117, 140, 0.12);
}

html[data-theme="dark"] .playground-demo-title {
  color: #81ecff;
}

html[data-theme="dark"] .playground-live-select,
html[data-theme="dark"] .playground-live-rail,
html[data-theme="dark"] .playground-live-editor,
html[data-theme="dark"] .playground-live-card,
html[data-theme="dark"] .playground-live-pre {
  color: #dee5ff;
  background: rgba(15, 25, 48, 0.92);
  box-shadow: none;
}

html[data-theme="dark"] .playground-live-editorpane {
  background: #060e20;
  box-shadow: inset 0 0 0 1px rgba(109, 117, 140, 0.08);
}

html[data-theme="dark"] .playground-live-controls {
  background: rgba(15, 25, 48, 0.78);
  backdrop-filter: blur(18px);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(109, 117, 140, 0.08);
}

html[data-theme="dark"] .playground-live-rail-header {
  background: rgba(0, 0, 0, 0.26);
  color: #a3aac4;
}

html[data-theme="dark"] .playground-live-example {
  color: #dee5ff;
  background: rgba(15, 25, 48, 0.94);
  box-shadow: none;
}

html[data-theme="dark"] .playground-live-example--active {
  color: #81ecff;
  background: rgba(25, 37, 64, 0.96);
  box-shadow: inset 3px 0 0 rgba(129, 236, 255, 0.92);
}

html[data-theme="dark"] .playground-live-button {
  color: #031923;
  background: linear-gradient(135deg, rgba(129, 236, 255, 0.96), rgba(0, 212, 236, 0.84));
  box-shadow: 0 12px 32px rgba(0, 120, 160, 0.2);
}

html[data-theme="dark"] .playground-live-button--quiet {
  color: #d4dcf4;
  background: rgba(15, 25, 48, 0.94);
  box-shadow: inset 0 0 0 1px rgba(129, 236, 255, 0.08);
}

html[data-theme="dark"] .playground-live-tab {
  color: #d4dcf4;
  background: rgba(15, 25, 48, 0.94);
  box-shadow: none;
}

html[data-theme="dark"] .playground-live-tab--active {
  color: #81ecff;
  background: rgba(25, 37, 64, 0.98);
  box-shadow: inset 0 2px 0 rgba(129, 236, 255, 0.9);
}

html[data-theme="dark"] .playground-live-tag {
  color: #81ecff;
  background: rgba(25, 37, 64, 0.96);
  box-shadow: inset 0 0 0 1px rgba(129, 236, 255, 0.08);
}

html[data-theme="dark"] .playground-live-doc-link {
  color: #81ecff;
  background: rgba(25, 37, 64, 0.96);
  box-shadow: inset 0 0 0 1px rgba(129, 236, 255, 0.08);
}

html[data-theme="dark"] .playground-live-status[data-tone="ok"] {
  color: #81ecff;
}

html[data-theme="dark"] .playground-live-status[data-tone="error"] {
  color: #ff8e8a;
}

html[data-theme="dark"] .playground-state-line {
  background: rgba(25, 37, 64, 0.92);
  box-shadow: inset 0 0 0 1px rgba(109, 117, 140, 0.12);
  color: #dee5ff;
}

html[data-theme="dark"] .playground-state-line--strong {
  color: #81ecff;
}

html[data-theme="dark"] .playground-state-line--error {
  color: #ff8e8a;
  box-shadow: inset 0 0 0 1px rgba(255, 113, 108, 0.2);
}

html[data-theme="dark"] .playground-rail-item--active,
html[data-theme="dark"] .playground-faux-tab--active {
  background: rgba(25, 37, 64, 0.96);
  color: #81ecff;
  box-shadow: inset 0 0 0 1px rgba(129, 236, 255, 0.16);
}

html[data-theme="dark"] .playground-faux-tab {
  background: rgba(15, 25, 48, 0.94);
  color: #dee5ff;
  box-shadow: inset 0 0 0 1px rgba(109, 117, 140, 0.12);
}

html[data-theme="dark"] .playground-run-pill {
  color: #031923;
  background: linear-gradient(135deg, rgba(129, 236, 255, 0.96), rgba(0, 212, 236, 0.84));
}

html[data-theme="dark"] .playground-utility-chip {
  color: #d4dcf4;
  background: rgba(15, 25, 48, 0.94);
  box-shadow: inset 0 0 0 1px rgba(109, 117, 140, 0.12);
}

html[data-theme="dark"] .playground-utility-chip--active {
  color: #81ecff;
  background: rgba(25, 37, 64, 0.96);
  box-shadow: inset 0 0 0 1px rgba(129, 236, 255, 0.16);
}

html[data-theme="dark"] .playground-run-pill--quiet {
  color: #d4dcf4;
  background: rgba(25, 37, 64, 0.92);
  box-shadow: inset 0 0 0 1px rgba(129, 236, 255, 0.12);
}

html[data-theme="dark"] .playground-hero-copy .rubric {
  color: #81ecff;
}

@media (max-width: 52rem) {
  .page,
  .main .content,
  .content,
  .bd-main .bd-content,
  .bd-main .bd-content .bd-article-container,
  .bd-main .bd-content .bd-article,
  .bd-main .bd-content .bd-content__inner {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .bd-main .bd-content .bd-article-container,
  .bd-main .bd-content .bd-content__inner {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
    box-sizing: border-box;
  }

  .content table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .playground-callout {
    flex-direction: column;
    align-items: flex-start;
  }

  .playground-callout__actions {
    justify-content: flex-start;
  }

  .playground-topbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .playground-theme-switch {
    margin-left: 0;
  }

  .playground-hero {
    grid-template-columns: 1fr;
  }

  .playground-workspace {
    grid-template-columns: 1fr;
  }

  .playground-demo {
    grid-template-columns: 1fr;
  }

  .playground-live-layout {
    grid-template-columns: 1fr;
  }

  .playground-example-grid {
    grid-template-columns: 1fr;
  }

  .playground-hub-grid {
    grid-template-columns: 1fr;
  }

  .playground-feature-grid {
    grid-template-columns: 1fr;
  }

  .playground-state-grid {
    grid-template-columns: 1fr;
  }

  .playground-state-sketch-grid {
    grid-template-columns: 1fr;
  }

  .playground-bottom-grid {
    grid-template-columns: 1fr;
  }

  .playground-main-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .playground-utilitybar {
    flex-direction: column;
    align-items: flex-start;
  }

  .playground-demo-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .playground-live-controls {
    align-items: flex-start;
  }

  .playground-live-select {
    min-width: 0;
    width: 100%;
  }
}