@import url("_root.css");
@import url("_code.css");
@import url("_layout.css");
@import url("_layout-mobile.css");

* {
  box-sizing: border-box;
}
*::before, *::after {
  transition: .2s ease-in-out;
  transition-property: color, opacity;
}

::selection {
  background: var(--color-primary-050-25);
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  cursor: crosshair;
}
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font: 1rem/1.75 "Inter", -apple-system, "MiSans", "HarmonyOS Sans", "Source Han Sans SC", "Noto Sans CJK SC", "思源黑体", "Noto Sans SC", sans-serif;
  font-feature-settings: var(--font-feature);
  color: var(--color-neutral-020);
  background: var(--color-neutral-100);
  transition: opacity .2s ease-in-out;
}

a {
  color: var(--color-primary-050);
  text-decoration: none;
  transition: .2s ease-in-out;
  transition-property: background, color;
}
a:hover {
  color: var(--color-neutral-020);
}
a[disabled] {
  color: var(--color-primary-070);
  pointer-events: none;
}
em {
  font-style: normal;
}
del {
  color: var(--color-primary-070);
}
input {
  outline: none;
  border: none;
  padding: .5rem .75rem;
  font: 1rem/1.5 "Inter", -apple-system, "MiSans", "HarmonyOS Sans", "Source Han Sans SC", "Noto Sans CJK SC", "思源黑体", "Noto Sans SC", sans-serif;
  color: var(--color-neutral-020);
  appearance: none;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-size: 1rem;
  font-weight: normal;
  line-height: 2;
}
p {
  margin: 0;
}
ul {
  margin: 1rem 0;
  padding: 0;
  list-style: none;
}
table {
  margin: 1rem 0 1.5rem;
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
th, td {
  padding: .25rem 0;
  border-bottom: 1px solid var(--color-neutral-090);
}
th {
  font-weight: 500;
  text-align: left;
  border-color: var(--color-neutral-080);
}

.transparent {
  opacity: 0;
}

.content p {
  margin: 1rem 0;
  text-align: justify;
}
.content h1 {
  margin: 0 0 6rem;
  padding: 1rem 0 0;
  font-size: 2rem;
}
.content h2 {
  margin: 4rem 0 2rem;
  padding: 1rem 0 0;
  font-size: 1.5rem;
  border-bottom: 1px solid var(--color-neutral-080);
}
.content h1 + h2 {
  margin-top: -1.625rem;
}
.content h3 {
  margin: 2rem 0 1rem;
  padding: 1rem 0 0;
  font-size: 1.125rem;
}
.content li::marker {
  color: var(--color-primary-060);
}
.content ul {
  padding: 0 0 0 1rem;
}
.content ul li::before {
  content: "arrow_forward_ios";
  display: inline-block;
  margin: 0 0 0 -1rem;
  width: 1rem;
  font: .875rem/1rem "Material Symbols Rounded";
  vertical-align: -12%;
  color: var(--color-primary-060);
}
.content li label input + p,
.content li p:first-child {
  margin-top: -1.75rem;
}
.content blockquote {
  position: relative;
  margin: 1rem 0;
  padding: 1rem;
  background: var(--color-primary-090);
  border-radius: .25rem;
}
.content blockquote::before {
  content: "format_quote";
  position: absolute;
  top: .5rem;
  right: .5rem;
  font: 1.5rem/1 "Material Symbols Rounded";
  color: var(--color-primary-070);
  pointer-events: none;
}
.content blockquote p:first-child {
  margin-top: 0;
}
.content blockquote p:last-child {
  margin-bottom: 0;
}
.content blockquote + blockquote,
.content blockquote + pre[data-lang] {
  margin-top: 1.5rem;
}
.content blockquote a {
  overflow-wrap: break-word;
}

.content .task-list-item::before {
  content: none;
}
.content .task-list-item input {
  display: none;
}
.content .task-list-item label {
  cursor: crosshair;
}
.content .task-list-item label.checked {
  color: var(--color-primary-070);
}
.content .task-list-item label::before {
  content: "check_box_outline_blank";
  font: 1rem/1 "Material Symbols Rounded";
  vertical-align: -16%;
  color: var(--color-primary-060);
}
.content .task-list-item label.checked::before {
  content: "check_box";
  color: var(--color-primary-070);
}

.video-container {
  position: relative;
  padding: 0 0 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.video-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 93%;
}

.responsive-wrap iframe {
  max-width: 100%;
}