@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap");

@font-face {
  font-family: "Fira Code";
  src: url("https://raw.githubusercontent.com/tonsky/FiraCode/5.2/distr/woff2/FiraCode-VF.woff2")
      format("woff2-variations"),
    url("https://raw.githubusercontent.com/tonsky/FiraCode/5.2/distr/woff/FiraCode-VF.woff")
      format("woff-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --accent: hwb(279 0% 30%);
}
@media (prefers-color-scheme: dark) {
  :root {
    --accent: hwb(279 60% 0%);
  }
}

body {
  min-height: 100vh;
  display: flex;
  margin: 0;
  padding: 10px;
  box-sizing: border-box;
  line-height: 1.5;
}

main {
  width: 650px;
  margin: 0 auto;
  position: relative;
}

@media (max-width: 650px) {
  main {
    width: 100%;
    padding-inline: 0.7em;
  }
  .mobile-hide {
    display: none !important;
  }
}

main img,
main pre {
  max-width: 100%;
}
main pre {
  overflow-x: auto;
}

:root {
  color-scheme: light dark;
  font-family: var(--serif);
  --serif: ui-serif, Merriweather, Georgia, serif;
  --system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  -webkit-text-size-adjust: 100%;
  font-feature-settings: "onum";
}

h2,
h3,
h4,
h5,
h6,
#logBox,
footer,
thead {
  font-family: var(--system);
}

h1,
.rounded {
  font-family: ui-rounded, var(--system);
}

h2 {
  margin-top: 2em;
}

code,
.mono {
  font-family: Fira Code, monospace;
  font-feature-settings: "onum";
}

a {
  color: var(--accent);
}
nav > ul,
nav > ol {
  list-style-type: none;
  padding-left: 0;
}
hr {
  border-style: solid;
  opacity: 0.5;
  border-width: 0.5px;
}
nav > * > li > :first-child {
  font-weight: 700;
  font-family: var(--system);
  text-decoration: none;
}

nav h3 {
  margin-top: 0;
  font-size: 1em;
  margin-bottom: -0.75em;
}
nav li ul {
  list-style: none;
  list-style-position: inside;
  padding-left: 0;
}
.imessage {
  display: flex;
  gap: 0.3em;
  flex-direction: column;
  align-items: flex-start;
  @media (max-width: 650px) {
    align-items: center;
    gap: 1em;
    flex-direction: row;
  }
}

button[data-clipboard-text] {
  font-size: 11px;
}

#logBox {
  white-space: pre-wrap;
  position: fixed;
  top: 1em;
  left: 50%;
}
#logBox div {
  max-width: calc(100vw - 20px);
  padding: 0.45em 0.85em;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.35);
  transform: translateX(-50%);
  background: #eee;
  border-radius: 1em;
  transition: transform 0.5s, margin 0.5s, opacity 0.5s;
  margin-bottom: 1.5em;
}
#logBox div:not(.show) {
  transform: translateX(-50%) translateY(-5em);
}
@media (prefers-color-scheme: dark) {
  #logBox div {
    box-shadow: 0 5px 15px black;
    background: #333;
  }
}

footer {
  opacity: 0.75;
  margin: 2em 0 5em;
  padding-top: 2em;
  border-top: 1px solid #545454;
}
@media (max-width: 650px) {
  footer {
    margin-inline: -10px;
    padding-inline: 10px;
  }
}

blockquote {
  position: relative;
  margin-left: 1em;
  margin-right: 0;
}
blockquote::before {
  content: "";
  position: absolute;
  left: -1em;
  top: 0.1em;
  width: 4px;
  height: calc(100% - 0.2em);
  border-radius: 2px;
  background: var(--accent);
  opacity: 0.5;
}

.redacted {
  font-family: Fira Code, monospace;
  font-feature-settings: "onum";
  background: currentColor;
  border-radius: 4px;
  opacity: 0.25;
  user-select: none;
  cursor: default;
}

.ios-icon {
  -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.41%22%20clip-rule%3D%22evenodd%22%20version%3D%221.1%22%20viewBox%3D%220%200%20460%20460%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20d%3D%22M460%20316.1c0%205.5%200%2010.99-.04%2016.48-.03%204.63-.08%209.26-.2%2013.88a201.73%20201.73%200%200%201-2.66%2030.21c-1.71%2010-4.9%2019.68-9.47%2028.73a96.6%2096.6%200%200%201-42.23%2042.23%20101.86%20101.86%200%200%201-28.71%209.46c-10%201.65-20.1%202.54-30.22%202.66a649%20649%200%200%201-13.88.21c-5.5.03-10.99.03-16.48.03H143.89c-5.49%200-10.98%200-16.48-.03a648.8%20648.8%200%200%201-13.88-.2%20201.46%20201.46%200%200%201-30.22-2.67c-9.99-1.7-19.67-4.9-28.71-9.46a96.61%2096.61%200%200%201-42.23-42.22%20101.96%20101.96%200%200%201-9.47-28.74%20201.6%20201.6%200%200%201-2.66-30.2c-.12-4.63-.18-9.26-.2-13.89C0%20327.08%200%20321.6%200%20316.1V143.9c0-5.5%200-11%20.04-16.5.02-4.62.08-9.25.2-13.87a201.64%20201.64%200%200%201%202.66-30.2c1.71-10%204.9-19.68%209.47-28.74A96.6%2096.6%200%200%201%2054.6%2012.36%20101.96%20101.96%200%200%201%2083.3%202.9c10-1.64%2020.1-2.53%2030.22-2.66%204.63-.12%209.26-.18%2013.88-.2%205.5-.03%2011-.03%2016.48-.03H316.1c5.5%200%2011%200%2016.49.03a649%20649%200%200%201%2013.88.2c10.12.13%2020.22%201.02%2030.21%202.66%2010%201.71%2019.67%204.9%2028.72%209.46a96.58%2096.58%200%200%201%2042.24%2042.23%20101.92%20101.92%200%200%201%209.46%2028.73%20201.7%20201.7%200%200%201%202.66%2030.21c.12%204.63.18%209.26.2%2013.88.04%205.5.04%2010.99.04%2016.48V316.1z%22%2F%3E%3C%2Fsvg%3E%0A")
    center/100% 100% no-repeat;
  mask: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.41%22%20clip-rule%3D%22evenodd%22%20version%3D%221.1%22%20viewBox%3D%220%200%20460%20460%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20d%3D%22M460%20316.1c0%205.5%200%2010.99-.04%2016.48-.03%204.63-.08%209.26-.2%2013.88a201.73%20201.73%200%200%201-2.66%2030.21c-1.71%2010-4.9%2019.68-9.47%2028.73a96.6%2096.6%200%200%201-42.23%2042.23%20101.86%20101.86%200%200%201-28.71%209.46c-10%201.65-20.1%202.54-30.22%202.66a649%20649%200%200%201-13.88.21c-5.5.03-10.99.03-16.48.03H143.89c-5.49%200-10.98%200-16.48-.03a648.8%20648.8%200%200%201-13.88-.2%20201.46%20201.46%200%200%201-30.22-2.67c-9.99-1.7-19.67-4.9-28.71-9.46a96.61%2096.61%200%200%201-42.23-42.22%20101.96%20101.96%200%200%201-9.47-28.74%20201.6%20201.6%200%200%201-2.66-30.2c-.12-4.63-.18-9.26-.2-13.89C0%20327.08%200%20321.6%200%20316.1V143.9c0-5.5%200-11%20.04-16.5.02-4.62.08-9.25.2-13.87a201.64%20201.64%200%200%201%202.66-30.2c1.71-10%204.9-19.68%209.47-28.74A96.6%2096.6%200%200%201%2054.6%2012.36%20101.96%20101.96%200%200%201%2083.3%202.9c10-1.64%2020.1-2.53%2030.22-2.66%204.63-.12%209.26-.18%2013.88-.2%205.5-.03%2011-.03%2016.48-.03H316.1c5.5%200%2011%200%2016.49.03a649%20649%200%200%201%2013.88.2c10.12.13%2020.22%201.02%2030.21%202.66%2010%201.71%2019.67%204.9%2028.72%209.46a96.58%2096.58%200%200%201%2042.24%2042.23%20101.92%20101.92%200%200%201%209.46%2028.73%20201.7%20201.7%200%200%201%202.66%2030.21c.12%204.63.18%209.26.2%2013.88.04%205.5.04%2010.99.04%2016.48V316.1z%22%2F%3E%3C%2Fsvg%3E%0A")
    center/100% 100% no-repeat;
}