/**
* 1. 在所有浏览器中添加边框大小调整
* 2. 背景默认不重复
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  background-repeat: no-repeat; /* 2 */
}

/**
* 1. 在所有浏览器中修正行高。
* 2. 防止 iOS 系统方向改变后调整字体大小。
*/
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
* 1. 在所有浏览器中添加文本装饰继承
* 2. 在所有浏览器中添加垂直对齐继承
*/
::before,
::after {
  text-decoration: inherit; /* 1 */
  vertical-align: inherit; /* 2 */
}

/**
* 1. 在所有浏览器中使用默认光标
* 2. 在所有浏览器中更改行高
* 3. 在所有浏览器中拆分单词以防止溢出
* 4. 在所有浏览器中使用 4 个空格的制表符宽度
* 5. 删除 iOS 中链接上的灰色突出显示
* 6. 防止在 iOS 中更改方向后调整字体大小
*/
:where(:root) {
  cursor: default; /* 1 */
  line-height: 1.5; /* 2 */
  overflow-wrap: break-word; /* 3 */
  -moz-tab-size: 4; /* 4 */
  tab-size: 4; /* 4 */
  -webkit-tap-highlight-color: transparent; /* 5 */
  -webkit-text-size-adjust: 100%; /* 6 */
  text-size-adjust: 100%; /* 6 */
}

/**
* 删除所有浏览器中的边距
*/
:where(body) {
  margin: 0;
}

/**
* 删除标题的默认字体大小和粗细
*/
:where(h1, h2, h3, h4, h5, h6) {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

/*
重置链接以优化选择加入样式而不是选择退出。
*/
:where(a) {
  color: inherit;
  text-decoration: inherit;
}

/**
* 删除 Chrome、Edge 和 Safari 中嵌套列表的边距
*/
:where(dl, ol, ul) :where(dl, ol, ul) {
  margin: 0;
}

/**
* 1. 修正 Firefox 中边框颜色的继承
* 2. 在 Firefox 中添加正确的框大小
* 3. 确保水平规则默认可见
*/
:where(hr) {
  color: inherit; /* 1 */
  height: 0; /* 2 */
  border-top-width: 1px; /* 3 */
}

/**
* 删除所有浏览器导航列表上的列表样式
*/
:where(nav) :where(ol, ul) {
  list-style-type: none;
  padding: 0;
}

/**
* 防止 VoiceOver 忽略 Safari 中的列表语义
*/
:where(nav li)::before {
  content: "\200B";
  float: left;
}

/**
* 1. 在所有浏览器中更正字体大小的继承和缩放
* 2. 在所有浏览器中更正奇怪的 `em` 字体大小
* 3. 防止所有浏览器中的容器溢出
*/
:where(pre) {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
  overflow: auto; /* 3 */
}

/**
* 在 Safari 中添加正确的文本装饰
*/
:where(abbr[title]) {
  text-decoration: underline;
  text-decoration: underline dotted;
}

/**
* 在 Chrome、Edge 和 Safari 中添加正确的字体粗细
*/
:where(b, strong) {
  font-weight: bolder;
}

/**
* 1. 在所有浏览器中更正字体大小的继承和缩放
* 2. 在所有浏览器中更正奇怪的 `em` 字体大小
*/
:where(code, kbd, samp) {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
* 在所有浏览器中添加正确的字体大小
*/
:where(small) {
  font-size: 80%;
}

/*
防止 `sub` 和 `sup` 元素影响所有浏览器中的行高 sup
*/
:where(sub, sup) {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

:where(sub) {
  bottom: -0.25em;
}

:where(sup) {
  top: -0.5em;
}

/*
* 在所有浏览器中更改媒体元素的对齐方式
*/
:where(audio, canvas, iframe, img, svg, video) {
  vertical-align: middle;
}

/**
* 删除所有浏览器中 iframe 上的边框
*/
:where(iframe) {
  border-style: none;
}

/**
* 更改填充颜色以匹配所有浏览器中的文本颜色
*/
:where(svg:not([fill])) {
  fill: currentColor;
}

/**
* 1. 在所有浏览器中折叠边框间距
* 2. 更正 Chrome、Edge 和 Safari 中的表格边框颜色
* 3. 从 Chrome、Edge 和 Safari 中的表格内容中删除文本缩进
*/
:where(table) {
  border-collapse: collapse; /* 1 */
  border-color: currentColor; /* 2 */
  text-indent: 0; /* 3 */
}

/**
* 删除 Safari 中控件的边距
*/
:where(button, input, select) {
  margin: 0;
}

/**
* 纠正无法在 iOS 和 Safari 中设置按钮样式的问题
*/
:where(button, [type="button" i], [type="reset" i], [type="submit" i]) {
  -webkit-appearance: button;
}

/**
* 更改所有浏览器中不一致的外观
*/
:where(fieldset) {
  border: 1px solid #a0a0a0;
}

/**
* 在 Chrome、Edge 和 Firefox 中添加正确的垂直对齐方式
*/
:where(progress) {
  vertical-align: baseline;
}

/**
* 1. 删除 Firefox 和 Safari 中的边距
* 3. 更改所有浏览器中的调整大小方向
*/
:where(textarea) {
  margin: 0; /* 1 */
  resize: vertical; /* 3 */
}

/**
* 1. 修正 Chrome、Edge 和 Safari 中的奇怪外观
* 2. 修正 Safari 中的轮廓样式
*/
:where([type="search" i]) {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
* 修正 Safari 中增加和减少按钮的光标样式
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
* 修正 Chrome、Edge 和 Safari 中占位符的文本样式
*/
::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
* 删除 macOS 上 Chrome、Edge 和 Safari 中的内边距
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
* 1. 纠正 iOS 和 Safari 中无法设置上传按钮样式的问题
* 2. 将 Safari 中的字体属性更改为“继承”
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
* 在 Safari 中添加正确的样式
*/
:where(dialog) {
  background-color: white;
  border: solid;
  color: black;
  height: -moz-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: fit-content;
}

:where(dialog:not([open])) {
  display: none;
}

/*
* 在所有浏览器中添加正确的显示
*/
:where(summary) {
  display: list-item;
}

/*
删除相应元素的默认间距和边框
*/
:where(blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre) {
  margin: 0;
}

/*
* 在 Safari 中添加正确的显示
*/
:where(details > summary:first-of-type) {
  display: list-item;
}

/**
* 在所有浏览器中更改繁忙元素上的光标
*/
:where([aria-busy="true" i]) {
  cursor: progress;
}

/*
* 在所有浏览器中将光标更改为禁用、不可编辑或其他无法操作的元素
*/
:where([aria-disabled="true" i], [disabled]) {
  cursor: not-allowed;
}

/*
* 在所有浏览器中更改视觉上隐藏的可访问元素的显示
*/
:where([aria-hidden="false" i][hidden]) {
  display: initial;
}

:where([aria-hidden="false" i][hidden]:not(:focus)) {
  clip: rect(0, 0, 0, 0);
  position: absolute;
}