:root {
  color-scheme: light;
  --ink: #171447;
  --ink-soft: #3a3268;
  --violet: #6c3af1;
  --violet-soft: #8f6bf0;
  --lilac: #b39cff;
  --cyan: #38a3b8;
  --paper: #fdfdff;
  --hairline: #17144714;
  --shadow-soft: 0 18px 50px #2a1a5a14;
  --bar-height: 64px;
  --ease-out: cubic-bezier(.22, .8, .2, 1);
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: var(--paper);
  overflow: hidden;
}

body {
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

button,
a,
input,
select,
textarea { -webkit-tap-highlight-color: transparent; }

button { font: inherit; }

a { color: inherit; }

img { user-select: none; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

:focus-visible {
  outline: 1px solid #6c3af166;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}