:root {
  color-scheme: dark;

  --chem-bg: #000000;
  --chem-bg2: #0a0a0a;
  --chem-bg3: #111111;
  --chem-card: #0f0f0f;

  --chem-border: #262626;
  --chem-border-strong: #3d3d3d;

  --chem-text: #ededed;
  --chem-text-2: #a1a1a1;
  --chem-text-3: #666666;

  --chem-accent: #ededed;
  --chem-accent-2: #ffffff;
  --chem-on: #000000;
  --chem-tint: rgba(255, 255, 255, 0.06);
  --chem-danger: #e5484d;

  --chem-radius: 1.5px;
  --chem-radius-sm: 1.5px;
  --chem-shadow: none;
  --chem-glow: none;

  --chem-facet: #000000;
  --chem-facet-k: 0.45;

  --chem-sidebar-w: 240px;
  --chem-topbar-h: 48px;

  --chem-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --chem-speed: 0.16s;

  --chem-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans',
    'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --chem-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
}

[data-theme='light'] {
  color-scheme: light;
  --chem-bg: #ffffff;
  --chem-bg2: #fafafa;
  --chem-bg3: #f2f2f2;
  --chem-card: #ffffff;
  --chem-border: #e6e6e6;
  --chem-border-strong: #c9c9c9;
  --chem-text: #000000;
  --chem-text-2: #666666;
  --chem-text-3: #999999;
  --chem-accent: #000000;
  --chem-accent-2: #333333;
  --chem-on: #ffffff;
  --chem-tint: rgba(0, 0, 0, 0.05);
  --chem-facet: #ffffff;
  --chem-danger: #d92d20;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  width: 100%;
  background: var(--chem-bg);
  color: var(--chem-text);
  font-family: var(--chem-font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

svg {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

::selection {
  background: var(--chem-accent);
  color: var(--chem-on);
}

:focus-visible {
  outline: 2px solid var(--chem-text-2);
  outline-offset: 2px;
}

* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

@keyframes chem-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes chem-slide {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.logo {
  display: block;
  flex-shrink: 0;
  transform-origin: center;
}
.logo--spin {
  animation: chem-logo-spin 2s linear infinite;
}

.logo .facets {
  fill: var(--chem-facet);
}
.logo .facets path {
  opacity: calc((1 - var(--s, 0.5)) * var(--chem-facet-k, 0.45));
  transition: opacity 0.25s var(--chem-ease);
}
[data-theme='light'] .logo .facets path {
  opacity: calc(var(--s, 0.5) * var(--chem-facet-k, 0.45));
}

.logo--intro {
  animation: chem-logo-in 0.9s var(--chem-ease) both;
}
.logo--intro path.l {
  animation: chem-blade-in 0.55s var(--chem-ease) both;
  animation-delay: calc(var(--d) * 0.07s + 0.08s);
}

.logo--loader {
  animation: chem-logo-spin 2.6s linear infinite;
}
.logo--loader .facets {
  animation: chem-facet-breathe 1.6s ease-in-out infinite;
}

@keyframes chem-facet-breathe {
  0%, 100% { opacity: 0.82; }
  50% { opacity: 1; }
}

@keyframes chem-logo-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes chem-logo-in {
  from { opacity: 0; transform: rotate(-32deg) scale(0.86); }
  to { opacity: 1; transform: rotate(0deg) scale(1); }
}

@keyframes chem-blade-in {
  from { stroke-opacity: 0; fill-opacity: 0; }
  to { stroke-opacity: var(--o); fill-opacity: var(--o); }
}
@keyframes chem-blade-trace {
  0%, 100% { stroke-opacity: var(--o); fill-opacity: var(--o); }
  38% { stroke-opacity: 1; fill-opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}