:root {
  --wb-accent: #0f766e;
  --wb-radius: 12px;
}
html { color-scheme: light; }
html.dark { color-scheme: dark; }
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 50;
  background: #fff;
  padding: 0.5rem 1rem;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }
.wb-grid {
  background-image:
    linear-gradient(to right, rgb(24 24 27 / 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(24 24 27 / 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at top, black 20%, transparent 70%);
}
.dark .wb-grid {
  background-image:
    linear-gradient(to right, rgb(255 255 255 / 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / 0.035) 1px, transparent 1px);
}
.wb-editor {
  width: 100%;
  min-height: 320px;
  resize: vertical;
  border-radius: var(--wb-radius);
  border: 1px solid rgb(228 228 231);
  background: #fafafa;
  padding: 0.85rem 1rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.55;
  color: inherit;
}
.dark .wb-editor {
  border-color: rgb(39 39 42);
  background: #09090b;
}
.wb-editor:focus {
  outline: 2px solid rgb(13 148 136 / 0.45);
  outline-offset: 1px;
}
.wb-enter {
  animation: wb-up 0.6s ease both;
}
.wb-enter-delay { animation-delay: 0.12s; }
@keyframes wb-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}
::selection { background: rgb(13 148 136 / 0.28); }
.wb-mark { width: auto; display: block; object-fit: contain; max-width: 220px; }
.dark img.wb-mark {
  filter: invert(1) hue-rotate(180deg);
}
code.wb-code {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.86em;
  padding: 0.12em 0.38em;
  border-radius: 4px;
  background: rgb(244 244 245);
  color: rgb(24 24 27);
  word-break: break-word;
}
.dark code.wb-code {
  background: rgb(39 39 42);
  color: rgb(244 244 245);
}
.wb-prose h2 {
  font-family: Outfit, "IBM Plex Sans", sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.wb-prose p, .wb-prose li {
  color: rgb(82 82 91);
  line-height: 1.7;
  margin-bottom: 0.85rem;
}
.dark .wb-prose p, .dark .wb-prose li { color: rgb(161 161 170); }
.wb-prose ol { list-style: decimal; padding-left: 1.25rem; }
.wb-prose summary { list-style: none; }
.wb-prose summary::-webkit-details-marker { display: none; }
.wb-toasts {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: min(22rem, calc(100vw - 2rem));
  pointer-events: none;
}
.wb-toast {
  pointer-events: auto;
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.8rem 0.95rem;
  border-radius: 12px;
  border: 1px solid rgb(228 228 231);
  background: #fff;
  box-shadow: 0 12px 40px rgb(24 24 27 / 0.14);
  color: rgb(24 24 27);
  font-size: 0.875rem;
  line-height: 1.4;
  animation: wb-toast-in 0.28s ease both;
}
.dark .wb-toast {
  background: #18181b;
  border-color: rgb(63 63 70);
  color: #fafafa;
  box-shadow: 0 12px 40px rgb(0 0 0 / 0.45);
}
.wb-toast.is-out { animation: wb-toast-out 0.22s ease both; }
.wb-toast-ok { border-left: 4px solid #0f766e; }
.wb-toast-err { border-left: 4px solid #dc2626; }
.wb-toast-info { border-left: 4px solid #2563eb; }
.wb-toast-warn { border-left: 4px solid #d97706; }
.wb-toast strong { display: block; font-weight: 600; margin-bottom: 0.1rem; }
.wb-toast p { margin: 0; color: rgb(82 82 91); }
.dark .wb-toast p { color: rgb(161 161 170); }
@keyframes wb-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes wb-toast-out {
  to { opacity: 0; transform: translateY(6px); }
}