/*=============================================
=                   Setup                   =
=============================================*/

xmp {
  display: none !important;
}

button#main_menu_toggle {
  position: fixed;
  top: 0;
  right: 0;
  width: 3rem;
  height: 3rem;
  margin: var(--block-spacing-vertical) var(--block-spacing-horizontal);
  border-radius: 50%;
  box-shadow: var(--card-box-shadow);
  background-color: var(--base01);
  color: var(--base05);
  padding: 0;
}

#main_menu li:empty {
  display: none;
}

blockquote>*:last-child {
  margin-bottom: 0;
}

#article-index {
  padding: var(--spacing);
  border-radius: var(--border-radius);
  background: var(--card-background-color);
  box-shadow: var(--card-box-shadow);
  border: none;
  position: sticky;
  top: 0;
  max-height: 50vh;
  overflow: auto;
  opacity: 0.95;
}

#article-index:not([open]):not(:hover):not(:focus-within) {
  opacity: .5;
}

dialog {
  color: var(--color);
}

ul.tree-view {
	display:block;
	margin:0;
	padding:0.25rem;
}
ul.tree-view details {
  margin: 0;
  padding: 0;
}
ul.tree-view li {
	list-style-type:none;
}
ul.tree-view a {
	text-decoration:none;
}
ul.tree-view li,ul.tree-view ul {
	margin-top:0.1875rem;
}
ul.tree-view ul {
	border-left:1px dotted var(--base03);
	margin-left:1rem;
	padding-left:1rem;
}
ul.tree-view ul>li {
	position:relative;
}
ul.tree-view ul>li:before {
	border-bottom:0.0625rem dotted var(--base03);
	content:"";
	display:block;
	left:-1rem;
	position:absolute;
	top:0.6rem;
	width:0.75rem;
}
ul.tree-view ul>li:last-child:after {
	background:var(--base00);
	bottom:0;
	content:"";
	display:block;
	left:-1.25rem;
	position:absolute;
	top:0.6rem;
	width:0.25rem;
}

.tree-view time {
  font-size: 0.8em;
  opacity: .5;
}

pre>code {
  font-size: inherit;
}

/*============  End of Setup  =============*/

/*=============================================
=                   Switch checkbox                   =
=============================================*/

/* 隐藏原始复选框 */
#data_theme[role="switch"] {
  display: none;
}

/* 开关容器 */
#data_theme[role="switch"] + label {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-family: var(--font-family);
  color: var(--color-text);
  user-select: none;
}

/* 开关轨道 - 使用伪元素 */
#data_theme[role="switch"] + label::before {
  content: '';
  width: 3.5rem;
  height: 2rem;
  background: var(--color-bg-secondary);
  border-radius: 1rem;
  position: relative;
  transition: all 0.3s ease;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 开关滑块 */
#data_theme[role="switch"] + label::after {
  content: '';
  width: 1.6rem;
  height: 1.6rem;
  background: white;
  border-radius: 50%;
  position: absolute;
  left: 0.2rem;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* 选中状态 - 轨道 */
#data_theme[role="switch"]:checked + label::before {
  background: var(--color-link);
}

/* 选中状态 - 滑块 */
#data_theme[role="switch"]:checked + label::after {
  transform: translateX(1.5rem);
  background: white;
}

/* 悬停效果 */
#data_theme[role="switch"] + label:hover::before {
  filter: brightness(var(--hover-brightness));
}

/* 激活状态 */
#data_theme[role="switch"]:active + label::after {
  transform: scale(0.95);
}

#data_theme[role="switch"]:checked:active + label::after {
  transform: translateX(1.5rem) scale(0.95);
}

/* 焦点状态 */
#data_theme[role="switch"]:focus + label::before {
  box-shadow: 0 0 0 3px var(--color-accent);
}

/* 禁用状态 */
#data_theme[role="switch"]:disabled + label {
  opacity: 0.6;
  cursor: not-allowed;
}

#data_theme[role="switch"]:disabled + label::before {
  background: var(--color-text-secondary);
}

/*============  End of Switch checkbox  =============*/

/*=============================================
=                   MVP CSS Custom                   =
=============================================*/
:root {
  --font-family: '有爱魔兽黑体 CN', '有爱魔兽圆体 CN', "HarmonyOS Sans", '梦源黑体', HarmonyOS_Regular, Noto Sans CJK SC, Sourse Han Sans CN, '思源黑体 CN', '思源黑体', Sarasa UI SC, Sarasa Gothic SC, MiSans, PingFang SC, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif, system-ui;
}

code,kbd,pre,samp {
  font-family:Iosevka, Sarasa Mono SC, Sarasa Fixed SC, Sarasa Term SC, '等距更纱黑体 SC', '等距更纱黑体 T SC', '思源等宽', Source Han Mono, Source Code Pro, Inconsolata, Consolas, monospace;
}

:root:not([data-theme=dark]), [data-theme=light], [data-theme=dark] {
  --color-accent: var(--base0D);
  --color-bg: var(--base00);
  --color-bg-secondary: var(--base02);
  --color-link: var(--base0D);
  --color-secondary:var(--base0E);
  --color-secondary-accent: var(--base0E);
  --color-shadow: var(--base01);
  --color-table: var(--base0D);
  --color-text: var(--base05);
  --color-text-secondary: var(--base03);
  --color-scrollbar: var(--base03);
}

::selection {
  color: var(--base06);
  background-color: var(--base02);
}

[data-theme=light] {

}
[data-theme=dark] {

}

blockquote {
  max-width: unset;
  font-size:medium;
  border-left: 4px double var(--color-table);
}

dialog {
  background-color: var(--color-bg);
}

article#content {
  margin: 0 auto;
  max-width: var(--width-content);
  padding: 3rem 1rem;
  background-color: var(--base01);
}

ul li::marker,
ol li::marker {
  color: var(--base08);
}

ul li{
  list-style: disc;
}

ul ul li{
  list-style: square;
}

ul ul ul li{
  list-style: circle;
}

/*============  End of MVP CSS Custom  =============*/

/*=============================================
=                   Google Code Prettify                   =
=============================================*/


/* background */
pre.prettyprinted,
pre {
  background-color: var(--base00);
  padding: .5em 1em;
  border-radius: .5em;
  white-space: pre-wrap;
  word-break: break-all;
  border: 2px solid var(--base01);
}

pre ::selection {
  background-color: var(--base02);
  color: var(--base06);
}

/* Specify class=linenums on a pre to get line numbering */
ol.linenums {
  margin-top: 0;
  margin-bottom: 0;
  color: var(--base01)
}

/* plaintext */
pre.prettyprinted,
pre,
pre .pln {
  color: var(--base05);
}

/* string */
pre .str {
  color: var(--base0B)
}

/* keyword */
pre .kwd {
  font-style: italic;
  color: var(--base0E)
}

/* comment */
pre .com {
  color: var(--base03)
}

/* type */
pre .typ {
  color: var(--base0A)
}

/* declaration */
pre .dec {
  color: var(--base0C)
}

/* literal */
pre .lit,
pre a {
  color: var(--base09)
}

/* punctuation */
pre .pun {
  color: var(--base04)
}

pre .opn,
pre .clo {
  color: var(--base0F)
}

/* variable */
pre .var {
  color: var(--base08)
}

/* html/xml tag */
pre .tag {
  color: var(--base08)
}

/* html/xml attribute name */
pre .atn {
  color: var(--base0D)
}

/* html/xml attribute value */
pre .atv {
  color: var(--base09)
}

/* Markup Italic */
em,
pre i,
pre em {
  color: var(--base0E)
}

/* Markup Bold */
strong,
pre b,
pre strong {
  color: var(--base0A)
}

/* Markup Quotes */
pre q,
pre blockquote {
  color: var(--base0C);
}

/* Diff Inserted */
ins,
pre ins {
  color: var(--base0B);
}

/* Diff Deleted */
del,
pre del {
  color: var(--base08);
}

/* Diff Changed */
mark,
pre mark {
  background-color: var(--base0A);
  color: var(--base00);
}
mark a {
  color: var(--base00);
}

/*============  End of Google Code Prettify  =============*/