@font-face {
  font-family: "Noto Sans JP Variable";
  src: url("../font/NotoSansJP-VariableFont_wght.woff2?v=0.3.6") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: "IBM Plex Sans Variable";
  src: url("../font/IBMPlexSans-VariableFont.woff2?v=0.3.6") format("woff2-variations");
  font-weight: 100 700;
  font-stretch: 75% 100%;
  font-style: normal;
}

:root {
  --font-family-sans-serif: "IBM Plex Sans Variable", "Noto Sans JP Variable", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;

  --color-emphasis-ink:   light-dark(#065B57, oklch(from #065B57 0.764 0.099 h));
  --color-emphasis-paper: light-dark(oklch(from #065B57 0.648 0.071 h), oklch(from #065B57 0.533 0.072 h));
  --color-visited:        light-dark(color-mix(in srgb, #065B57 74%, rgb(0,0,0)), color-mix(in srgb, #065B57 19%, rgb(255,255,255)));
}

table {
  margin-block-start: 2rem;
}

[data-sign="stereoscope"] {
  color: var(--color-emphasis-ink);
  display: inline flow-root;

  &::before {
    background-color: currentColor;
    content:          "";
    inset:            0;
    margin:           auto;
    position:         absolute;
    block-size:       calc(var(--line-height) * 1.75);
    inline-size:      calc(var(--line-height) * 1.75);
    clip-path: shape(
      from 9.09% 24.726%,
      line to 64.727% 9.818%,
      line to 64.727% 85.092%,
      line to 9.09% 100%,
      close,
      move to 15.636% 91.701%,
      line to 58.182% 80.3%,
      line to 58.182% 18.118%,
      line to 15.636% 29.518%,
      close,
      move to 35.273% 14.908%,
      line to 90.91% 0%,
      line to 90.91% 75.274%,
      line to 35.273% 90.182%,
      close,
      move to 41.818% 81.882%,
      line to 84.364% 70.482%,
      line to 84.364% 8.299%,
      line to 41.818% 19.7%,
      close
    );
  }
}