:root {
  --ratio: 1.7;
  --font-size-base: 1rem;
  --font-size-xxlarge: calc(8 / 4 * var(--font-size-base));
  --font-size-xlarge: calc(8 / 5 * var(--font-size-base));
  --font-size-large: calc(8 / 6 * var(--font-size-base));
  --font-size-small: calc(8 / 9 * var(--font-size-base));
  --font-size-micro: calc(8 / 12 * var(--font-size-base));
  --line-height-base: var(--ratio);
  --line-height-small: calc(var(--line-height-base) * 0.8);
  --spacer-base: calc(var(--ratio) * var(--font-size-base));
  --spacer-xlarge: calc(
    var(--spacer-base) * var(--ratio) * var(--ratio) * var(--ratio)
  );
  --spacer-large: calc(var(--spacer-base) * var(--ratio) * var(--ratio));
  --spacer-small: calc(var(--spacer-base) / var(--ratio));
  --max-width-content: 40rem;
  --color-body: hsla(0, 0%, 0%, 0.87);
  --color-body-bg: hsl(0, 0%, 94%);
  --color-header-text: hsla(0, 0%, 100%, 0.87);
  --color-header-active-bg: hsla(0, 0%, 100%, 0.1);
  --color-header-bg: hsl(200, 19%, 18%);
  --color-visited: hsl(0, 0%, 31%);
  --color-active-bg: hsla(0, 0%, 0%, 0.1);
  --color-main-bg: hsl(0, 0%, 99%);
  --color-search-bg: hsl(0, 0%, 100%);
  --color-divider: hsla(0, 0%, 0%, 0.1);
}

.-dark {
  --color-body: hsla(0, 0%, 100%, 0.87);
  --color-body-bg: hsl(204, 20%, 17%);
  --color-header-text: hsla(0, 0%, 100%, 0.8);
  --color-header-active-bg: hsla(0, 0%, 100%, 0.1);
  --color-header-bg: hsl(204, 20%, 5%);
  --color-visited: hsla(0, 0%, 100%, 0.7);
  --color-active-bg: hsla(0, 0%, 100%, 0.15);
  --color-main-bg: hsl(204, 20%, 20%);
  --color-search-bg: hsla(0, 0%, 100%, 0.8);
  --color-divider: hsla(0, 0%, 100%, 0.15);
}

@media (prefers-color-scheme: dark) {
  .-system {
    --color-body: hsla(0, 0%, 100%, 0.87);
    --color-body-bg: hsl(204, 20%, 17%);
    --color-header-text: hsla(0, 0%, 100%, 0.8);
    --color-header-active-bg: hsla(0, 0%, 100%, 0.1);
    --color-header-bg: hsl(204, 20%, 5%);
    --color-visited: hsla(0, 0%, 100%, 0.7);
    --color-active-bg: hsla(0, 0%, 100%, 0.15);
    --color-main-bg: hsl(204, 20%, 20%);
    --color-search-bg: hsla(0, 0%, 100%, 0.8);
    --color-divider: hsla(0, 0%, 100%, 0.15);
  }

  .-system .WithIcon.-reference {
    background-image: url("/assets/icons.svg#reference_dark");
  }

  .-system .WithIcon.-tag {
    background-image: url("/assets/icons.svg#tag_dark");
  }

  .-system .WithIcon.-back {
    background-image: url("/assets/icons.svg#back_dark");
  }

  .-system .WithIcon.-year {
    background-image: url("/assets/icons.svg#year_dark");
  }
}

html {
  font-family: "Noto Sans", "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
  font-size: calc(0.25vw + 1em);
  line-height: var(--line-height-base);
  overflow-wrap: break-word;
  text-underline-position: under;
}

body {
  margin: 0;
  color: var(--color-body);
  background-color: var(--color-body-bg);
}

h1,
h2,
h3 {
  margin-top: 0;
  margin-bottom: 0;
  font-feature-settings: "palt";
}

ol,
ul {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 2rem;
}

p {
  margin-top: 0;
  margin-bottom: 0;
}

a:any-link {
  color: inherit;
}

a:visited {
  color: var(--color-visited);
}

a:any-link:active {
  background-color: var(--color-active-bg);
}

img,
video {
  max-width: 100%;
  height: auto;
}

.Cluster {
  overflow: hidden;
}

.Cluster > * {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: calc(var(--spacer-small) / 2 * -1);
  padding-left: 0;
  list-style-type: none;
}

.Cluster > * > * {
  margin: calc(var(--spacer-small) / 2);
}

.Stack > * + * {
  margin-top: var(--spacer-base);
}

.Stack.-xlarge > * + * {
  margin-top: var(--spacer-xlarge);
}

.Stack.-large > * + * {
  margin-top: var(--spacer-large);
}

.Stack.-small > * + * {
  margin-top: var(--spacer-small);
}

.Cluster.-space-between > * {
  justify-content: space-between;
}

.Cluster.-justify-start > * {
  justify-content: flex-start;
}

.Cluster.-justify-end > * {
  justify-content: flex-end;
}

.Center {
  max-width: var(--max-width-content);
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--spacer-small);
  padding-right: calc(env(safe-area-inset-right) + var(--spacer-small));
  padding-left: var(--spacer-small);
  padding-left: calc(env(safe-area-inset-left) + var(--spacer-small));
}

.Center.-andText {
  text-align: center;
}

.Invisible {
  position: absolute !important;
  overflow: hidden !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  white-space: nowrap !important;
  clip-path: inset(50%) !important;
  clip: rect(0, 0, 0, 0) !important; /* deprecated */
}

.SiteHeader {
  padding-top: var(--spacer-base);
  padding-bottom: var(--spacer-base);
  font-size: var(--font-size-small);
  color: var(--color-header-text);
  background-color: var(--color-header-bg);
}

.SiteHeader__title {
  font-size: var(--font-size-xxlarge);
  line-height: 1.1;
  font-weight: bold;
}

.SiteHeader__titleLink:any-link {
  color: inherit;
  text-decoration: none;
}

.SiteHeader__titleLink:any-link:active {
  background-color: var(--color-header-active-bg);
}

.Mode {
  padding: calc(var(--spacer-base) / 3);
  font-size: var(--font-size-small);
}

.-no-js .Mode {
  display: none;
}

.Mode summary {
  text-align: right;
}

.Mode form {
  display: flex;
  padding: calc(var(--spacer-base) / 4);
  line-height: var(--line-height-small);
}

.Mode label {
  display: flex;
  align-items: baseline;
}

.Mode span {
  white-space: nowrap;
}

.Main {
  padding-top: var(--spacer-large);
  padding-bottom: var(--spacer-large);
  background-color: var(--color-main-bg);
}

@media (min-width: 56em) {
  .Tags {
    padding-left: 0;
  }
}

.WithIcon {
  display: inline-block;
  padding-left: 2.25em;
  background-repeat: no-repeat;
  background-size: calc(var(--line-height-base) * 1em)
    calc(var(--line-height-base) * 1em);
}

.WithIcon.-reference {
  background-image: url("/assets/icons.svg#reference");
}

.WithIcon.-tag {
  background-image: url("/assets/icons.svg#tag");
}

.WithIcon.-back {
  background-image: url("/assets/icons.svg#back");
}

.WithIcon.-year {
  background-image: url("/assets/icons.svg#year");
}

.-dark .WithIcon.-reference {
  background-image: url("/assets/icons.svg#reference_dark");
}

.-dark .WithIcon.-tag {
  background-image: url("/assets/icons.svg#tag_dark");
}

.-dark .WithIcon.-back {
  background-image: url("/assets/icons.svg#back_dark");
}

.-dark .WithIcon.-year {
  background-image: url("/assets/icons.svg#year_dark");
}

@media (min-width: 56em) {
  .WithIcon.-hang {
    margin-left: -2.25em;
  }
}

.WithIcon.-tighter {
  padding-left: 2em;
  background-size: calc(var(--line-height-small) * 1em)
    calc(var(--line-height-small) * 1em);
}

@media (min-width: 56em) {
  .WithIcon.-tighter.-hang {
    margin-left: -2em;
  }
}

.WithIcon.-small {
  padding-left: 1.25em;
  background-position: left calc((var(--line-height-base) * 1em - 1em) / 2);
  background-size: 1em 1em;
}

.Heading {
  line-height: var(--line-height-small);
}

h1.Heading {
  font-size: var(--font-size-xxlarge);
}

h2.Heading {
  font-size: var(--font-size-xlarge);
}

.ItemTitle {
  font-size: var(--font-size-large);
}

.Search__input {
  width: 6em;
  height: 1.2rem;
  border: 1px solid var(--color-header-bg);
  border-radius: 2px;
  font-size: var(--font-size-base);
  background-color: var(--color-search-bg);
}

.Search__button {
  margin-right: var(--font-size-micro);
}

.-no-js .Search {
  display: none;
}

.Divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-divider);
}

.SiteFooter {
  padding-top: var(--spacer-base);
  padding-bottom: var(--spacer-base);
  font-size: var(--font-size-small);
}
