.theme-select {
  width: 72px;
  height: 32px;
  padding: 0 7px;
  color: #53667c;
  border: 1px solid #d4e1ea;
  border-radius: 6px;
  outline: 0;
  background: #fff;
  cursor: pointer;
  font-size: 11px;
  font-weight: 650;
}
.theme-select:hover {
  color: #177fc2;
  border-color: #add5ee;
}
.theme-select:focus-visible {
  border-color: #62b8eb;
  box-shadow: 0 0 0 3px rgb(50 166 232 / 14%);
}
.tool-context {
  font-size: 10px;
}
.stage-meta,
.editor-status {
  font-size: 9px;
}

html[data-theme="dark"] {
  --ink: #d9e9f7;
  --muted: #91a6b9;
  --line: #20384b;
  --line-strong: #315069;
  --sky-25: #0a1927;
  --sky-50: #0d2132;
  --sky-100: #12324a;
  --sky-200: #1d4c6a;
  --navy: #06111d;
}
html[data-theme="dark"] body {
  color: var(--ink);
  background: #081522;
}
html[data-theme="dark"] .theme-select {
  color: #b4c8d8;
  border-color: #29465d;
  background: #0e2232;
}

html[data-theme="dark"] .site-header {
  border-color: var(--line);
}
html[data-theme="dark"] .wordmark {
  color: #e1eff9;
}
html[data-theme="dark"] .site-nav a,
html[data-theme="dark"] .site-footer nav a {
  color: #91a7ba;
}
html[data-theme="dark"] .button-quiet {
  color: #b9d1e2;
  border-color: #315069;
  background: #0d2030;
}
html[data-theme="dark"] .button-quiet:hover {
  color: #72c8f7;
  background: #102a3e;
}
html[data-theme="dark"] .hero::before {
  background: radial-gradient(circle, rgb(30 102 148 / 35%), transparent 67%);
}
html[data-theme="dark"] .hero h1 {
  color: #edf7ff;
}
html[data-theme="dark"] .hero-note {
  color: #718ba0;
}
html[data-theme="dark"] .hero-demo {
  border-color: #2a4a61;
  background: #0a1927;
  box-shadow: 0 30px 70px rgb(0 0 0 / 28%);
}
html[data-theme="dark"] .demo-toolbar {
  color: #819bb0;
  border-color: #284257;
  background: #0d2131;
}
html[data-theme="dark"] .hero-demo pre {
  color: #b6cad9;
  background: #091827;
}
html[data-theme="dark"] .trust-strip {
  background: #0a1927;
}
html[data-theme="dark"] .trust-strip strong {
  color: #d7e8f5;
}
html[data-theme="dark"] .trust-strip span {
  color: #8298ab;
}
html[data-theme="dark"] .gear-card {
  border-color: #20394c;
  background: #0b1b29;
  box-shadow: 0 8px 30px rgb(0 0 0 / 16%);
}
html[data-theme="dark"] .gear-card-featured {
  border-color: #285876;
  background: linear-gradient(145deg, #0e2940, #0b1b29);
}
html[data-theme="dark"] .gear-number {
  color: #52728a;
}
html[data-theme="dark"] .gear-icon {
  border-color: #285675;
  background: #0e2a40;
}
html[data-theme="dark"] .gear-card h3 {
  color: #d9eaf6;
}
html[data-theme="dark"] .gear-card p {
  color: #91a5b6;
}
html[data-theme="dark"] .graph-icon::before,
html[data-theme="dark"] .graph-icon::after {
  background: #0e2a40;
}
html[data-theme="dark"] .steps h3 {
  color: #d5e6f3;
}
html[data-theme="dark"] .steps p {
  color: #8fa4b6;
}
html[data-theme="dark"] .steps code {
  color: #6fc3f1;
  border-color: #29465c;
  background: #0c2030;
}
html[data-theme="dark"] .step-index {
  border-color: #285b7a;
  background: #0e2a40;
}
html[data-theme="dark"] .site-footer p {
  color: #738da1;
}

html[data-theme="dark"] .docs-body {
  background: #081522;
}
html[data-theme="dark"] .docs-header {
  border-color: #20384b;
  background: rgb(8 21 34 / 94%);
}
html[data-theme="dark"] .docs-product {
  color: #8097aa;
  border-color: #294257;
}
html[data-theme="dark"] .docs-search {
  color: #7891a5;
  border-color: #29465b;
  background: #0d2030;
}
html[data-theme="dark"] .docs-search input {
  color: #d6e7f4;
}
html[data-theme="dark"] .docs-search kbd {
  color: #8299ab;
  border-color: #304c61;
  background: #102536;
}
html[data-theme="dark"] .docs-sidebar {
  border-color: #20384b;
}
html[data-theme="dark"] .sidebar-group > strong,
html[data-theme="dark"] .docs-toc > strong {
  color: #708ba0;
}
html[data-theme="dark"] .sidebar-group a {
  color: #91a5b7;
}
html[data-theme="dark"] .sidebar-group a:hover {
  color: #69c4f5;
  background: #0d2436;
}
html[data-theme="dark"] .sidebar-group a.active {
  color: #70cbfb;
  background: #10304a;
}
html[data-theme="dark"] .sidebar-playground {
  color: #8bd4fa;
  border-color: #285572;
  background: #0d2940;
}
html[data-theme="dark"] .sidebar-playground small {
  color: #7697ad;
}
html[data-theme="dark"] .docs-main section + section {
  border-color: #20384b;
}
html[data-theme="dark"] .docs-main h1,
html[data-theme="dark"] .docs-main h2,
html[data-theme="dark"] .docs-main h3 {
  color: #e0edf7;
}
html[data-theme="dark"] .docs-main p,
html[data-theme="dark"] .docs-main li {
  color: #9aafc0;
}
html[data-theme="dark"] .docs-main strong {
  color: #c4d8e7;
}
html[data-theme="dark"] .doc-lede {
  color: #a9bdcc !important;
}
html[data-theme="dark"] .docs-main :not(pre) > code {
  color: #71c6f3;
  border-color: #28506a;
  background: #0d293d;
}
html[data-theme="dark"] .section-kicker span {
  border-color: #285a78;
  background: #0e2b42;
}
html[data-theme="dark"] .callout {
  border-color: #294052;
  background: #0c1c2a;
}
html[data-theme="dark"] .callout-blue {
  border-color: #285672;
  background: #0d293e;
}
html[data-theme="dark"] .explain-grid > div {
  border-color: #263f52;
  background: #0b1c2a;
}
html[data-theme="dark"] .inline-play {
  color: #8bd5fb;
  border-color: #285974;
  background: #0e2c43;
}
html[data-theme="dark"] .inline-play strong {
  color: #a2defb;
}
html[data-theme="dark"] .inline-play small {
  color: #789bb1;
}
html[data-theme="dark"] .mental-model > div {
  border-color: #284356;
  background: #0b1d2b;
}
html[data-theme="dark"] .mental-model strong {
  color: #b9d0e0;
}
html[data-theme="dark"] .mental-model .mental-shared {
  border-color: #2d6585;
  background: #0e2c43;
}
html[data-theme="dark"] .deploy-list li {
  border-color: #20384b;
}
html[data-theme="dark"] .docs-toc a {
  color: #768ea1;
  border-color: #294257;
}

html[data-theme="dark"] .playground-app {
  background: #07131f;
}
html[data-theme="dark"] .playground-header {
  border-color: #21384b;
  background: #0b1b29;
}
html[data-theme="dark"] .playground-brand {
  color: #dcebf6;
}
html[data-theme="dark"] .header-divider {
  background: #294154;
}
html[data-theme="dark"] .project-name input {
  color: #c3d6e4;
}
html[data-theme="dark"] .project-name input:hover {
  background: #102536;
}
html[data-theme="dark"] .project-name input:focus {
  border-color: #2d7198;
  background: #0e2638;
}
html[data-theme="dark"] #revision-label {
  color: #8298aa;
  border-color: #294356;
  background: #0e2131;
}
html[data-theme="dark"] .playground-nav a {
  color: #8da3b5;
}
html[data-theme="dark"] .tool-button {
  color: #a7bdcd;
  border-color: #29465c;
  background: #0e2232;
}
html[data-theme="dark"] .tool-button:hover {
  color: #67c4f4;
  border-color: #326484;
  background: #102a3d;
}
html[data-theme="dark"] .playground-tools {
  border-color: #233b4e;
  background: #0c1d2b;
}
html[data-theme="dark"] .tool-group button {
  color: #8fa6b8;
}
html[data-theme="dark"] .tool-group button:hover,
html[data-theme="dark"] .tool-group button[aria-pressed="true"] {
  color: #63c3f5;
  border-color: #2b4d64;
  background: #102536;
}
html[data-theme="dark"] .tool-context,
html[data-theme="dark"] .stage-meta,
html[data-theme="dark"] .editor-status {
  color: #aec1cf;
}
html[data-theme="dark"] .context-divider {
  background: #294154;
}
html[data-theme="dark"] .snippets-dialog {
  color: #d3e3ee;
  border-color: #2a4a60;
  background: #0b1b29;
}
html[data-theme="dark"] .dialog-heading p {
  color: #8399aa;
}
html[data-theme="dark"] .snippet-search {
  color: #7890a3;
  border-color: #29465b;
  background: #0d2131;
}
html[data-theme="dark"] .snippet-search input {
  color: #c9dae7;
}
html[data-theme="dark"] .snippet-grid > button:hover {
  border-color: #2d5772;
  background: #0e293d;
}
html[data-theme="dark"] .snippet-icon {
  border-color: #2a5a77;
  background: #0e2c43;
}
html[data-theme="dark"] .snippet-grid strong {
  color: #c9dce9;
}
html[data-theme="dark"] .snippet-grid small {
  color: #8298aa;
}
html[data-theme="dark"] .snippet-grid code {
  color: #6bc4f2;
  border-color: #29475d;
  background: #0d2131;
}

html[data-theme="light"] .workbench {
  background: #d7e4ed;
}
html[data-theme="light"] .pane-tabs,
html[data-theme="light"] .stage-toolbar {
  border-color: #cfdee8;
  background: #edf4f8;
}
html[data-theme="light"] .pane-tab {
  color: #60778a;
  border-color: #d5e2ea;
  background: #e8f0f5;
}
html[data-theme="light"] .pane-tab.active {
  color: #29465e;
  background: #f8fbfd;
}
html[data-theme="light"] .editor {
  background: #fff;
}
html[data-theme="light"] .monaco-editor .margin {
  background-color: #fff !important;
}
html[data-theme="light"] .editor-status {
  color: #718698;
  border-color: #d2e0e9;
  background: #eff5f8;
}
html[data-theme="light"] .resize-handle {
  background: #c8d8e3;
}
html[data-theme="light"] .resize-handle::after {
  background: #8fa9bb;
}
html[data-theme="light"] .stage-pane {
  background: #e7f0f5;
}
html[data-theme="light"] .stage-tabs button {
  color: #60778a;
}
html[data-theme="light"] .stage-tabs button.active {
  color: #284961;
  background: #f8fbfd;
}
html[data-theme="light"] .stage-meta {
  color: #6a8194;
}
html[data-theme="light"] .stage-divider {
  background: #c5d7e2;
}
html[data-theme="light"] .inspector {
  border-color: #cddde7;
  background: #f7fafc;
}
html[data-theme="light"] .inspector-tabs {
  border-color: #cfdee7;
  background: #edf4f8;
}
html[data-theme="light"] .inspector-tabs button {
  color: #687f91;
}
html[data-theme="light"] .inspector-tabs button.active {
  color: #287aa9;
}
html[data-theme="light"] .inspector-tabs button span {
  background: #dce9f1;
}
html[data-theme="light"] .console-empty,
html[data-theme="light"] .profile-empty {
  color: #6f8799;
}
html[data-theme="light"] #console-lines {
  color: #526c80;
}
html[data-theme="light"] #console-lines li {
  border-color: rgb(190 207 218 / 60%);
}
html[data-theme="light"] .profile-summary > div {
  border-color: #d3e1e9;
  background: #eef5f8;
}
html[data-theme="light"] .profile-summary strong {
  color: #3c6e8d;
}
html[data-theme="light"] .profile-results th,
html[data-theme="light"] .profile-results td {
  border-color: #d5e2e9;
}

@media (max-width: 700px) {
  .site-header .theme-select {
    width: 64px;
  }
}