@font-face {
  font-family: "Aropla";
  src: url("/assets/font.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+2010-2026, U+2030-205E, U+2190-21FF,
                 U+2200-22FF, U+2460-24FF, U+25A0-25FF, U+2600-26FF,
                 U+3000-303F, U+3040-30FF, U+3400-4DBF, U+4E00-9FFF,
                 U+FF00-FFEF;
}


:root,
html[data-theme="light"] {
  --bg:          #f6f8fb;
  --bg-soft:     #eef2f7;
  --surface:     #ffffff;
  --surface-2:   #f3f6fa;
  --text:        #1d2733;
  --text-muted:  #5c6b7d;
  --border:      #e4e9f0;
  --accent:      #3b76f6;
  --accent-2:    #7c5cff;
  --accent-soft: rgba(59,118,246,0.10);
  --shadow:      0 6px 24px rgba(18,38,63,0.08);
  --shadow-sm:   0 2px 10px rgba(18,38,63,0.06);
  --header-bg:   rgba(255,255,255,0.78);
  --code-bg:     #f3f6fa;
  --radius:      16px;
  color-scheme: light;
}

html[data-theme="dark"] {
  --bg:          #0d1117;
  --bg-soft:     #131a23;
  --surface:     #161c26;
  --surface-2:   #1c232f;
  --text:        #e7ecf3;
  --text-muted:  #93a1b3;
  --border:      #232c39;
  --accent:      #5b94ff;
  --accent-2:    #9b86ff;
  --accent-soft: rgba(91,148,255,0.14);
  --shadow:      0 6px 24px rgba(0,0,0,0.45);
  --shadow-sm:   0 2px 10px rgba(0,0,0,0.35);
  --header-bg:   rgba(16,21,29,0.72);
  --code-bg:     #11161e;
  --radius:      16px;
  color-scheme: dark;
}


:root {
  --glass-blur: 18px;
  --glass-sat:  160%;
  --glass-bg:   rgba(255,255,255,0.55);
  --glass-brd:  rgba(255,255,255,0.55);
  --glass-hi:   inset 0 1px 0 rgba(255,255,255,0.55);
}
html[data-theme="dark"] {
  --glass-bg:   rgba(22,28,38,0.55);
  --glass-brd:  rgba(255,255,255,0.08);
  --glass-hi:   inset 0 1px 0 rgba(255,255,255,0.07);
}

@media (hover: none), (max-width: 768px) {
  :root { --glass-blur: 14px; --glass-sat: 150%; }
}
@media (max-width: 380px) {
  :root { --glass-blur: 11px; }
}
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-brd);
  box-shadow: var(--shadow-sm), var(--glass-hi);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--surface); }
}


* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: "Aropla", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.4s ease, color 0.4s ease;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }


body, .site-header, .card, .doc-content, .doc-sidebar {
  transition: background-color 0.4s ease, color 0.4s ease,
              border-color 0.4s ease, box-shadow 0.4s ease;
}


.theme-toggle {
  
  --ts: 0.7px;
  position: relative;
  display: inline-block;
  width: calc(180 * var(--ts));
  height: calc(70 * var(--ts));
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 999px;
  overflow: hidden;
  flex: none;
  outline: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.theme-toggle:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 2px var(--accent);
}

.theme-toggle .container {
  position: relative;
  top: auto;
  left: auto;
  margin: 0;
  transform: none;
  width: 100%;
  height: 100%;
  font-size: var(--ts); 
}


.theme-toggle .components {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: #4685c0;
  border-radius: 999px;
  box-shadow: inset 0 0 5em 3em rgba(0,0,0,0.22);
  overflow: hidden;
  transition: 0.7s;
  transition-timing-function: cubic-bezier(0, 0.5, 1, 1);
  z-index: 1;
}


.theme-toggle .main-button {
  position: absolute;
  top: 10em;
  left: 7.5em;
  width: 50em;
  height: 50em;
  background-color: #ffc323;
  border-radius: 50%;
  box-shadow: 3em 3em 5em rgba(0,0,0,0.4),
              inset -3em -5em 3em -3em rgba(0,0,0,0.45),
              inset 4em 5em 2em -2em #ffe650;
  transition: 1s;
  transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1);
  z-index: 3;
}


.theme-toggle .moon {
  position: absolute;
  background-color: #96a0b4;
  box-shadow: inset 0 0 1em 1em rgba(0,0,0,0.30);
  border-radius: 50%;
  opacity: 0;
  transition: 0.5s;
}
.theme-toggle .moon:nth-child(1) { top: 6em;  left: 22em; width: 11em; height: 11em; }
.theme-toggle .moon:nth-child(2) { top: 18em; left: 6em;  width: 18em; height: 18em; }
.theme-toggle .moon:nth-child(3) { top: 28em; left: 28em; width: 11em; height: 11em; }


.theme-toggle .daytime-backgrond {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.18);
  transition: 1s;
  transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1);
  z-index: 2;
}
.theme-toggle .daytime-backgrond:nth-child(2) { top: -20em; left: -20em; width: 110em; height: 110em; background-color: rgba(255,255,255,0.20); }
.theme-toggle .daytime-backgrond:nth-child(3) { top: -32em; left: -17em; width: 135em; height: 135em; background-color: rgba(255,255,255,0.10); }
.theme-toggle .daytime-backgrond:nth-child(4) { top: -45em; left: -15em; width: 160em; height: 160em; background-color: rgba(255,255,255,0.05); }


.theme-toggle .cloud {
  
  position: absolute;
  inset: 0;
  transition: transform .7s ease, opacity .7s ease;
}
.theme-toggle .cloud-light {
  position: absolute;
  right: 0;
  bottom: 25em;
  width: 60em;
  height: 60em;
  opacity: 0.45;
  z-index: 1;
  transition: transform .7s ease, opacity .7s ease;
}
.theme-toggle .cloud-son {
  position: absolute;
  background: #ffffff;
  border-radius: 50%;
  z-index: 2;
  transition: right 1s ease, bottom 1s ease;
}

.theme-toggle .cloud-son:nth-child(6n+1) { right: -20em; bottom: 10em;  width: 50em; height: 50em; }
.theme-toggle .cloud-son:nth-child(6n+2) { right: -10em; bottom: -25em; width: 60em; height: 60em; }
.theme-toggle .cloud-son:nth-child(6n+3) { right: 20em;  bottom: -40em; width: 60em; height: 60em; }
.theme-toggle .cloud-son:nth-child(6n+4) { right: 50em;  bottom: -35em; width: 60em; height: 60em; }
.theme-toggle .cloud-son:nth-child(6n+5) { right: 75em;  bottom: -60em; width: 75em; height: 75em; }
.theme-toggle .cloud-son:nth-child(6n+6) { right: 110em; bottom: -50em; width: 60em; height: 60em; }


.theme-toggle .stars {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  transform: translateY(-125em);
  z-index: 2;
  transition: 1s;
  transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1);
}
.theme-toggle .stars .big   { --size: 7em; }
.theme-toggle .stars .medium { --size: 5em; }
.theme-toggle .stars .small  { --size: 3em; }
.theme-toggle .stars .star {
  position: absolute;
  width: calc(2 * var(--size));
  height: calc(2 * var(--size));
}
.theme-toggle .stars .star:nth-child(1) { top: 11em; left: 39em; }
.theme-toggle .stars .star:nth-child(2) { top: 39em; left: 91em; }
.theme-toggle .stars .star:nth-child(3) { top: 26em; left: 19em; }
.theme-toggle .stars .star:nth-child(4) { top: 37em; left: 66em; }
.theme-toggle .stars .star:nth-child(5) { top: 21em; left: 75em; }
.theme-toggle .stars .star:nth-child(6) { top: 51em; left: 38em; }
.theme-toggle .stars .star-son { float: left; width: var(--size); height: var(--size); }
.theme-toggle .stars .star-son:nth-child(1) { --pos: left 0; }
.theme-toggle .stars .star-son:nth-child(2) { --pos: right 0; }
.theme-toggle .stars .star-son:nth-child(3) { --pos: 0 bottom; }
.theme-toggle .stars .star-son:nth-child(4) { --pos: right bottom; }
.theme-toggle .stars .star-son {
  background-image: radial-gradient(circle var(--size) at var(--pos),
                    transparent calc(95% - 1px), #fff 95%);
}


html[data-theme="light"] .theme-toggle .cloud-son {
  transform: scale(1);
  transition: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}
html[data-theme="light"] .theme-toggle .cloud-son:nth-child(6n+1) { animation-name: naoCloud; animation-duration: 4.5s; }
html[data-theme="light"] .theme-toggle .cloud-son:nth-child(6n+2) { animation-name: naoCloud; animation-duration: 5.1s; }
html[data-theme="light"] .theme-toggle .cloud-son:nth-child(6n+3) { animation-name: naoCloud; animation-duration: 5.9s; }
html[data-theme="light"] .theme-toggle .cloud-son:nth-child(6n+4) { animation-name: naoCloud; animation-duration: 6.3s; }
html[data-theme="light"] .theme-toggle .cloud-son:nth-child(6n+5) { animation-name: naoCloud; animation-duration: 4.7s; }
html[data-theme="light"] .theme-toggle .cloud-son:nth-child(6n+6) { animation-name: naoCloud; animation-duration: 5s; }


html[data-theme="dark"] .theme-toggle .components { background-color: #191e32; }
html[data-theme="dark"] .theme-toggle .main-button {
  transform: translateX(110em);
  background-color: #c3c8d2;
  box-shadow: 3em 3em 5em rgba(0,0,0,0.5),
              inset -3em -5em 3em -3em rgba(0,0,0,0.5),
              inset 4em 5em 2em -2em #ffffd2;
}
html[data-theme="dark"] .theme-toggle .moon { opacity: 1; }
html[data-theme="dark"] .theme-toggle .daytime-backgrond:nth-child(2) { transform: translateX(110em); }
html[data-theme="dark"] .theme-toggle .daytime-backgrond:nth-child(3) { transform: translateX(80em); }
html[data-theme="dark"] .theme-toggle .daytime-backgrond:nth-child(4) { transform: translateX(50em); }
html[data-theme="dark"] .theme-toggle .cloud,
html[data-theme="dark"] .theme-toggle .cloud-light { transform: translateY(80em); }
html[data-theme="dark"] .theme-toggle .stars {
  transform: translateY(0);
  opacity: 1;
}
html[data-theme="dark"] .theme-toggle .stars .star {
  transform: scale(1);
  transition: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}
html[data-theme="dark"] .theme-toggle .stars .star:nth-child(1) { animation-name: naoStar; animation-duration: 3.5s; }
html[data-theme="dark"] .theme-toggle .stars .star:nth-child(2) { animation-name: naoStar; animation-duration: 4.1s; }
html[data-theme="dark"] .theme-toggle .stars .star:nth-child(3) { animation-name: naoStar; animation-duration: 4.9s; }
html[data-theme="dark"] .theme-toggle .stars .star:nth-child(4) { animation-name: naoStar; animation-duration: 5.3s; }
html[data-theme="dark"] .theme-toggle .stars .star:nth-child(5) { animation-name: naoStar; animation-duration: 3s; }
html[data-theme="dark"] .theme-toggle .stars .star:nth-child(6) { animation-name: naoStar; animation-duration: 2.2s; }

@keyframes naoStar {
  0%, 20%  { transform: scale(0); }
  20%, 100%{ transform: scale(1); }
}
@keyframes naoCloud {
  0%   { transform: translate(2em, -2em); }
  50%  { transform: translate(-2em, 2em); }
  100% { transform: translate(2em, -2em); }
}


@media (prefers-reduced-motion: reduce) {
  .theme-toggle .cloud-son,
  .theme-toggle .stars .star { animation: none !important; }
}




.theme-toggle .main-button:hover {
  transform: translateX(10em);
}
.theme-toggle .main-button:hover ~ .daytime-backgrond:nth-child(2) { transform: translateX(10em); }
.theme-toggle .main-button:hover ~ .daytime-backgrond:nth-child(3) { transform: translateX(7em); }
.theme-toggle .main-button:hover ~ .daytime-backgrond:nth-child(4) { transform: translateX(4em); }

.theme-toggle .main-button:hover ~ .cloud .cloud-son:nth-child(1) { right: -24em; bottom: 10em; }
.theme-toggle .main-button:hover ~ .cloud .cloud-son:nth-child(2) { right: -12em; bottom: -27em; }
.theme-toggle .main-button:hover ~ .cloud .cloud-son:nth-child(3) { right: 17em;  bottom: -43em; }
.theme-toggle .main-button:hover ~ .cloud .cloud-son:nth-child(4) { right: 46em;  bottom: -39em; }
.theme-toggle .main-button:hover ~ .cloud .cloud-son:nth-child(5) { right: 70em;  bottom: -65em; }
.theme-toggle .main-button:hover ~ .cloud .cloud-son:nth-child(6) { right: 109em; bottom: -54em; }

.theme-toggle .main-button:hover ~ .cloud-light .cloud-son:nth-child(1) { right: -23em; bottom: 10em; }
.theme-toggle .main-button:hover ~ .cloud-light .cloud-son:nth-child(2) { right: -11em; bottom: -26em; }
.theme-toggle .main-button:hover ~ .cloud-light .cloud-son:nth-child(3) { right: 18em;  bottom: -42em; }
.theme-toggle .main-button:hover ~ .cloud-light .cloud-son:nth-child(4) { right: 47em;  bottom: -38em; }
.theme-toggle .main-button:hover ~ .cloud-light .cloud-son:nth-child(5) { right: 74em;  bottom: -64em; }
.theme-toggle .main-button:hover ~ .cloud-light .cloud-son:nth-child(6) { right: 110em; bottom: -55em; }


html[data-theme="dark"] .theme-toggle .main-button:hover {
  transform: translateX(100em);
}
html[data-theme="dark"] .theme-toggle .main-button:hover ~ .daytime-backgrond:nth-child(2) { transform: translateX(100em); }
html[data-theme="dark"] .theme-toggle .main-button:hover ~ .daytime-backgrond:nth-child(3) { transform: translateX(73em); }
html[data-theme="dark"] .theme-toggle .main-button:hover ~ .daytime-backgrond:nth-child(4) { transform: translateX(46em); }
html[data-theme="dark"] .theme-toggle .main-button:hover ~ .stars .star:nth-child(1) { top: 10em;   left: 36em; }
html[data-theme="dark"] .theme-toggle .main-button:hover ~ .stars .star:nth-child(2) { top: 40em;   left: 87em; }
html[data-theme="dark"] .theme-toggle .main-button:hover ~ .stars .star:nth-child(3) { top: 26em;   left: 16em; }
html[data-theme="dark"] .theme-toggle .main-button:hover ~ .stars .star:nth-child(4) { top: 38em;   left: 63em; }
html[data-theme="dark"] .theme-toggle .main-button:hover ~ .stars .star:nth-child(5) { top: 20.5em; left: 72em; }
html[data-theme="dark"] .theme-toggle .main-button:hover ~ .stars .star:nth-child(6) { top: 51.5em; left: 35em; }