[ui-scheme='light'],
[ui-scheme='system'],
body {
  --c: #f8f8f8;
  --c-0: #44930c;
  --c-1: #bd5151;
  --c-2: #bf6f1b;
  --c-3: #7e7b4e;
  --c-4: #7853c3;
  --c-5: #2077da;
  --c-6: #8dae2c;
  --c-7: #a38300;
  --c-8: #71a3a8;
  --c-9: #a65973;
  --c-a: #808080;
}
[ui-scheme='dark'] {
  --c: #1e1e1e;
  --c-0: #a4dfae;
  --c-1: #edabab;
  --c-2: #f0c0a8;
  --c-3: #ded6cf;
  --c-4: #d2ccff;
  --c-5: #8fc7ff;
  --c-6: #d5f288;
  --c-7: #eecfa0;
  --c-8: #b8d7f9;
  --c-9: #e3cbeb;
  --c-a: #999;
}
@media (prefers-color-scheme: dark) {
  [ui-scheme='system'],
  body {
    --c: #1e1e1e;
    --c-0: #a4dfae;
    --c-1: #edabab;
    --c-2: #f0c0a8;
    --c-3: #ded6cf;
    --c-4: #d2ccff;
    --c-5: #8fc7ff;
    --c-6: #d5f288;
    --c-7: #eecfa0;
    --c-8: #b8d7f9;
    --c-9: #e3cbeb;
    --c-a: #999;
  }
}
aside {
  position: fixed;
  top: 56px;
  left: 0;
  overflow: hidden auto;
  padding: 16px;
  width: 300px;
  height: calc(100vh - 56px);
}
aside a {
  padding: 4px 0;
  color: var(--text);
  text-decoration: none;
}
aside summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px;
  border-radius: 4px;
  list-style: none;
  transition: 0.1s background;
}
aside summary:hover {
  background: var(--w-btn-hover-bg);
}
aside details>summary>w-icon {
  transition: 0.1s rotate;
}
aside details::details-content {
  display: block;
  overflow: hidden;
  height: 0;
  transition: 0.1s height, 0.1s content-visibility;
  transition-behavior: allow-discrete;
}
aside details[open]>summary>w-icon {
  rotate: 180deg;
}
aside details[open]::details-content {
  height: auto;
  height: calc-size(auto, size);
}
aside ul {
  margin: 0;
  padding: 0 0 0 12px;
}
aside>ul {
  padding: 0;
}
aside li {
  list-style: none;
}
aside li>a {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 4px;
  transition: 0.1s background;
  gap: 4px;
}
aside li>a:not(:has(w-icon)) {
  padding-left: 28px;
}
aside li>a:hover {
  background: var(--w-btn-hover-bg);
}
main {
  position: fixed;
  top: 56px;
  left: 300px;
  display: flex;
  flex-direction: column;
  width: calc(100vw - 300px);
  height: calc(100vh - 56px);
  border-top-left-radius: 8px;
  background: var(--ui-panel-bg);
}
header {
  padding: 32px 32px 16px 32px;
}
article {
  flex: 1;
  overflow: hidden auto;
  padding: 0 32px 32px 32px;
}
article code {
  padding: 0 0.25em;
  border-radius: 6px;
  background: var(--theme-a1);
  color: var(--theme);
  color: color-mix(in srgb,var(--theme), var(--text));
}
article a {
  color: var(--theme);
  color: color-mix(in srgb,var(--theme), var(--text));
  text-decoration: underline var(--theme);
}
pre code,
article p,
article ul,
article ol,
article h2,
article h3,
article h4,
article h5,
article h6 {
  user-select: text;
}
pre code {
  padding: 0;
  background: none;
  tab-size: 2;
}
.demo {
  overflow: hidden;
  margin: 16px 0;
  border: 1px solid var(--w-btn-border);
  border-radius: 6px;
  background: var(--ui-panel-bg);
}
.demo iframe {
  max-height: calc(100vh - 400px);
  width: 100%;
  height: 300px;
  border: none;
}
.demo w-nav {
  padding: 0 16px;
}
.demo pre {
  display: none;
  margin: 0;
  padding: 16px;
  tab-size: 2;
}
.demo .demo-file-show {
  display: block;
}
.demo-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px;
  gap: 4px;
}
.demo-error w-icon {
  font-size: 64px;
}
.demo-error w-lang {
  font-size: 18px;
}
pre code {
  color: var(--text);
}
pre code .bold,
pre code .builtin,
pre code .important,
pre code .namespace {
  font-weight: bold;
}
pre code .italic,
pre code .keyword {
  font-style: italic;
}
pre code .string,
pre code .string-property,
pre code .char,
pre code .regex,
pre code .inserted,
pre code .attr-value {
  color: var(--c-0);
}
pre code .tag,
pre code .selector,
pre code .deleted {
  color: var(--c-1);
}
pre code .constant,
pre code .class-name,
pre code .entity {
  color: var(--c-2);
}
pre code .variable,
pre code .property {
  color: var(--c-3);
}
pre code .keyword,
pre code .builtin,
pre code .boolean {
  color: var(--c-4);
}
pre code .function {
  color: var(--c-5);
}
pre code .number {
  color: var(--c-6);
}
pre code .url,
pre code .attr-name {
  color: var(--c-7);
}
pre code .operator {
  color: var(--c-8);
}
pre code .important,
pre code .namespace {
  color: var(--c-9);
}
pre code .comment,
pre code .prolog,
pre code .cdata {
  color: var(--c-a);
}
.codeblock {
  margin: 16px 0;
  padding: 16px;
  border: 1px solid var(--w-btn-border);
  border-radius: 6px;
  background-color: var(--ui-panel-bg);
  background-image: radial-gradient(circle 150px at 0px -50px, var(--code-color), rgba(0,0,0,0));
}
.codeblock-caption {
  display: flex;
}
.codeblock-name {
  flex: 1;
}
.codeblock-code {
  margin: 8px 0 0 0;
}
.highlight {
  animation: 0.3s highlight 4 alternate;
}
article hr {
  border-color: var(--text);
  opacity: 0.3;
}
@-moz-keyframes highlight {
  100% {
    background: rgba(255,255,0,0.533);
  }
}
@-webkit-keyframes highlight {
  100% {
    background: rgba(255,255,0,0.533);
  }
}
@-o-keyframes highlight {
  100% {
    background: rgba(255,255,0,0.533);
  }
}
@keyframes highlight {
  100% {
    background: rgba(255,255,0,0.533);
  }
}