@use "sass:math";
html {
  --background-color: #fafafa;
  --title-color: #333;
  --shape-color: #333;
  --link-color: #222;
  --link-underline-color: #2226;
  --border-color: #888;
  background: var(--background-color);
  min-height: 100%;
  font-size: 16px; }
  @media (prefers-color-scheme: dark) {
    html {
      --background-color: #121212;
      --title-color: #ddd;
      --shape-color: #ccc;
      --link-color: #eee;
      --link-underline-color: #eee6; } }
  @media screen and (min-width: 1024px) {
    html {
      font-size: 20px; } }
  @media screen and (min-width: 1600px) {
    html {
      font-size: 24px; } }
[aria-hidden=true] {
  user-select: none; }

body {
  box-sizing: border-box;
  min-height: 100vh;
  margin: 0;
  padding: calc(2rem + env(safe-area-inset-top, 0)) calc(max(2rem + env(safe-area-inset-right, 0), min(4rem, 6vw))) calc(2rem + env(safe-area-inset-bottom, 0)) calc(max(2rem + env(safe-area-inset-left, 0), min(4rem, 6vw)));
  position: relative;
  font-family: 'Linux Libertine O', serif;
  color: var(--link-color);
  line-height: 1.5; }

::selection {
  background: rgba(0, 0, 0, 0.15); }
  @media (prefers-color-scheme: dark) {
    ::selection {
      background: rgba(255, 255, 255, 0.15); } }
canvas {
  position: absolute;
  z-index: -3;
  inset: 0 auto auto 0;
  width: 100%;
  height: calc(min(100%, 400vh));
  opacity: 0.08;
  transition: 200ms opacity; }
  html.contents-hidden canvas {
    opacity: 0.12; }
  html.debug-mode canvas {
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 1;
    z-index: 1; }
    @media (prefers-color-scheme: dark) {
      html.debug-mode canvas {
        opacity: 0.8; } }
code, footer > span {
  font-family: 'Liberation Mono', DejaVu Sans Mono, Lucida Console, monospace;
  font-size: 95%;
  letter-spacing: -0.02em; }

a {
  color: var(--link-color);
  text-decoration: underline;
  text-decoration-color: var(--link-underline-color);
  text-decoration-thickness: 1px; }
  a:hover {
    text-decoration-color: currentColor; }
  @media print {
    a {
      text-decoration-color: currentColor; } }
p {
  hyphens: auto; }

h1 {
  text-transform: uppercase;
  font-size: 300%;
  background: var(--title-color);
  color: var(--background-color);
  display: inline-block;
  padding: 0 0.2em;
  line-height: 1.2;
  margin: 0.6em 0 1em;
  position: relative;
  transition: 200ms opacity, 200ms transform; }
  h1::before {
    content: "";
    width: 9em;
    height: 8em;
    position: absolute;
    z-index: -2;
    left: -3.1em;
    top: -5.8em;
    transform: skewX(-5deg);
    will-change: transform;
    border-radius: 100%;
    box-shadow: inset -0.6em 0.4em 1.0em -0.9em #000; }
    @media (prefers-color-scheme: dark) {
      h1::before {
        box-shadow: inset -0.6em 0.4em 1.0em -0.9em #fff; } }
  html.contents-hidden h1 {
    transform: translateX(-1em);
    opacity: 0;
    pointer-events: none; }

h2 {
  text-transform: lowercase;
  font-size: 250%;
  margin: 0 0 1em;
  font-style: italic;
  font-weight: normal; }
  h2 + div {
    border-left: 1px solid var(--border-color);
    margin: -2.5em 1em 0 1em;
    padding: 0.01em 0 0.1em 1em; }

main {
  column-count: 2;
  column-width: 20em;
  column-gap: 2em;
  margin-bottom: 4em;
  position: relative;
  transition: 200ms transform; }
  main::before {
    content: "";
    position: absolute;
    inset: -0.5em;
    z-index: -1;
    background: var(--background-color);
    box-shadow: 0em 2em 4em #00000010, 0em 0.3em 1em #00000010, 0 0 2px #00000005;
    backdrop-filter: brightness(0.6) contrast(5.4) blur(calc(max(1vw, 1.5vh, 15px)));
    -webkit-backdrop-filter: brightness(0.6) contrast(5.4) blur(calc(max(1vw, 1.5vh, 15px))); }
    @media (prefers-color-scheme: dark) {
      main::before {
        box-shadow: 0em 2em 4em #00000050, 0em 0.3em 1em #00000030;
        backdrop-filter: brightness(4) contrast(1.9) saturate(0.7) blur(calc(max(2vw, 3.0vh, 20px)));
        -webkit-backdrop-filter: brightness(4) contrast(1.9) saturate(0.7) blur(calc(max(2vw, 3.0vh, 20px)));
        border: 1px solid #ffffff04; } }
    @supports (backdrop-filter: blur(calc(max(1vw, 1.5vh, 15px)))) or (-webkit-backdrop-filter: blur(calc(max(1vw, 1.5vh, 15px)))) {
      main::before {
        background: transparent; } }
  main > *, main::before {
    transition: 200ms opacity; }
  html.contents-hidden main {
    transform: translateY(10vh);
    pointer-events: none; }
    html.contents-hidden main > *, html.contents-hidden main::before {
      opacity: 0; }

section {
  break-inside: avoid;
  margin-bottom: 1em; }

ul {
  line-height: 1.2;
  padding-left: 1em; }
  ul > li {
    margin: 0.5em 0;
    list-style: "-";
    padding-left: 0.5em; }
    ul > li.nope {
      opacity: 0.4; }

#hide-contents, #unhide-contents {
  display: block;
  width: 2.6rem;
  height: calc(1.6rem + var(--extra-height, 0rem));
  font: inherit;
  margin: 0;
  padding: 0;
  border: none;
  background: #80808010;
  cursor: pointer; }
  #hide-contents:hover, #unhide-contents:hover {
    background: #80808020; }
  #hide-contents::before, #unhide-contents::before {
    content: "";
    position: absolute;
    width: 0.4rem;
    height: 0.4rem;
    border-right: 2px solid var(--link-color);
    border-bottom: 2px solid var(--link-color);
    left: 50%;
    top: calc(50% + var(--extra-height, 0) / 2);
    transform: translate(-50%, -75%) rotate(45deg);
    opacity: 0.8; }

/* main > */
#hide-contents {
  position: absolute;
  inset: -0.5em 0.4rem auto auto; }
  #hide-contents:disabled {
    opacity: 0;
    pointer-events: none; }

/* body > */
#unhide-contents {
  position: fixed;
  z-index: 2;
  --extra-height: env(safe-area-inset-bottom, 0);
  inset: auto calc(2rem + env(safe-area-inset-right, 0)) 0 auto;
  transition: 200ms transform;
  transform: rotate(180deg); }
  #unhide-contents:not(html.contents-hidden *), html.debug-mode #unhide-contents {
    pointer-events: none;
    transform: translateY(100%) rotate(180deg); }

footer.copyright {
  position: absolute;
  bottom: 3rem;
  font-size: 80% !important;
  transition: 200ms opacity; }
  footer.copyright > span {
    opacity: 0.2; }
  footer.copyright a {
    text-decoration: none !important;
    opacity: 0.2; }
    footer.copyright a:hover {
      opacity: 0.4; }
  footer.copyright img {
    width: 1em;
    height: 1em;
    vertical-align: -0.16em; }
    @media (prefers-color-scheme: dark) {
      footer.copyright img {
        filter: invert(1); } }
  html.contents-hidden footer.copyright {
    opacity: 0;
    pointer-events: none; }

footer.aboutVisual {
  position: fixed;
  z-index: 2;
  font-size: 80% !important;
  line-height: 1;
  inset: auto calc(5rem + env(safe-area-inset-right, 0)) calc(1rem + env(safe-area-inset-bottom, 0)) calc(1rem + env(safe-area-inset-left, 0));
  transition: 200ms opacity; }
  footer.aboutVisual > span {
    opacity: 0.2; }
  footer.aboutVisual:not(html.contents-hidden *) {
    opacity: 0;
    pointer-events: none;
    animation: none !important; }
  html.contents-hidden:not(.debug-mode) footer.aboutVisual:not(*:hover) {
    animation: 5s 3s fadeout both; }

@keyframes fadeout {
  0% { }
  100% {
    opacity: 0; } }

#debug-mode-enable {
  white-space: nowrap;
  transition: 200ms opacity;
  opacity: 0; }
  html.debug-mode #debug-mode-enable {
    display: none; }
  @media (any-hover: none) {
    #debug-mode-enable {
      display: none; } }
  footer:hover #debug-mode-enable {
    opacity: 1; }

#debug-mode-disable {
  white-space: nowrap; }
  html:not(.debug-mode) #debug-mode-disable {
    display: none; }

#debug-mode {
  position: fixed;
  right: 100vw;
  bottom: 100vh;
  pointer-events: none;
  transition: 500ms height;
  height: 0px; }
  html.debug-mode #debug-mode {
    height: 1000px; }