::-webkit-scrollbar {
  display: none;
}

@view-transition {
  navigation: auto;
}

* {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

:root {
  scroll-behavior: smooth;

  --clr-1: #2b2b2bff;
  --clr-2: #ddddddff;

  --clr-h1: currentColor;
  --clr-h2: currentColor;
  --clr-h3: currentColor;
  --clr-blockquote: currentColor;
  --clr-pre: currentColor;
  --clr-p-odd: currentColor;
  --clr-ul: currentColor;
  --clr-ol: currentColor;
  --clr-a: currentColor;

  --gap-min: 2px;
  --gap-mid: 2ch;
  --gap-max: 4ch;

  --ui-size: 40px;
}

::selection {
  background: #fff0afff;
  color: var(--clr-1);
  text-shadow: none;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  display: block;
  font-family: "Roboto", sans-serif;
  font-size: large;
  background-color: #ddd;
  color: #222222ff;
  text-shadow: 0 0 30px currentColor;
  overflow: auto;
}


pre {
  font-family: monospace;

  code {
    .hljs-string {color: hsl(0deg 95% 74%);}.hljs-comment {color: hsl(150deg 95% 74%);}.hljs-attr {color: hsl(300deg 95% 74%);}.hljs-attribute {color: hsl(450deg 95% 74%);}.hljs-function {color: hsl(600deg 95% 74%);}.hljs-variable {color: hsl(750deg 95% 74%);}.hljs-title {color: hsl(900deg 95% 74%);}.hljs-property {color: hsl(1050deg 95% 74%);}.hljs-selector-class {color: hsl(1200deg 95% 74%);}.hljs-keyword {color: hsl(1350deg 95% 74%);}.hljs-tag {color: hsl(1500deg 95% 74%);}.hljs-name {color: hsl(1650deg 95% 74%);}.hljs-number {color: hsl(1800deg 95% 74%);}.hljs-params {color: hsl(1950deg 95% 74%);}.hljs-literal {color: hsl(2100deg 95% 74%);}.hljs-subst {color: hsl(2250deg 95% 74%);}

    .hljs-comment {
      font-style: italic;
      opacity: .7;
    }
  }
}


tui-shell {
  position: relative;
  display: grid;
  grid-template-columns: min-content auto;
  min-height: 100vh;
  width: 100vw;

  [shell-nav] {
    position: relative;
    padding-left: var(--gap-max);
  }

  [shell-nav-inner] {
    position: sticky;
    display: flex;
    flex-direction: column;
    gap: var(--gap-mid);
    top: var(--gap-max);
    padding: var(--gap-mid);
    border: var(--gap-min) solid currentColor;
    background-color: var(--clr-2);
  }

  [shell-content] {
    min-width: 0;
  }
}

pulse-entries {
  --padding-local: 80px;
  --entry-min-width: 340px;
  --entry-columns-max: 3;
  --entry-gaps-max: calc(var(--entry-columns-max) - 1);
  --entry-gap-total: calc(var(--entry-gaps-max) * var(--gap-mid));
  --entry-column-max-width: calc((100% - var(--entry-gap-total)) / var(--entry-columns-max));
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--entry-min-width), var(--entry-column-max-width))), 1fr));
  gap: var(--gap-mid);
  width: 100%;
  scrollbar-width: none;

  margin-top: 2lh;
  margin-bottom: var(--gap-max);

  a[pulse-prev] {
    display: block;
    text-decoration: none;
    min-width: 0;
    background-color: var(--clr-2);
    color: var(--clr-1);
    border: var(--gap-min) solid var(--clr-1);
    padding: var(--gap-mid);
    padding-bottom: 0;
    border-radius: 0;

    &:hover {
      box-shadow: 5px 5px 0 0 currentColor;
    }

    [date] {
      opacity: .8;
      font-size: .8em;

      &:before {
        content: '> ';
      }
    }

    [heading] {
      font-weight: bold;
      font-size: 1.2em;

      &:before {
        content: '# ';
      }
    }

    & > * {
      margin-bottom: var(--gap-mid);
    }
  }
}

tui-article {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2ch;
  padding-left: var(--gap-max);
  padding-right: var(--gap-max);
  padding-bottom: 3lh;

  div[content-wrapper] {
    width: 100%;
    min-width: 0;
    [content] {
      margin-left: auto;
      margin-right: auto;
      width: 100%;
      max-width: 120ch;
      overflow: auto;
      padding-right: 5px;
    }
  }

  [nav] {
    padding: 2ch;
    padding-top: 0;
    padding-right: 0;
    scrollbar-width: none;
  }

  [article-nav-items] {
    --y-pos: 0;
    
    position: sticky;
    display: flex;
    flex-direction: column;
    gap: 1lh;
    top: var(--gap-max);
    max-height: calc(100vh - 4lh);
    scrollbar-width: none;
    font-size: 0.9em;
    padding-left: var(--gap-mid);
    padding-top: var(--gap-mid);
    padding-bottom: var(--gap-mid);
    overflow: auto;
    color: var(--clr-1);

    &:empty {
      display: none;
    }

    &:before {
      position: absolute;
      box-sizing: border-box;
      height: 100%;
      width: var(--gap-min);
      top: 0;
      left: 0;
      background-color: var(--clr-1);
      content: '';
    }

    &:after {
      position: absolute;
      box-sizing: border-box;
      top: var(--y-pos, 0);
      left: -15px;
      display: inline-block;
      height: 20px;
      width: 20px;
      transform: rotate(-45deg);
      background-color: var(--clr-2);
      border: var(--gap-min) solid currentColor;
      content: '';
      transition: top .4s ease-in-out;
      z-index: 1000;
    }
  }

  a[type=h1] {
    color: currentColor;
    text-decoration: none;
    color: var(--clr-h1);
    font-weight: 600;
  }
  a[type=h2] {
    color: currentColor;
    text-decoration: none;
    color: var(--clr-h2);
  }
  a[type=h3] {
    color: currentColor;
    text-decoration: none;
    color: var(--clr-h3);
    padding-left: var(--gap-mid);
    font-size: 0.9em;
  }

  h1 {
    margin-top: 0;
    padding-top: var(--gap-mid);
    margin-bottom: var(--gap-mid);
    color: var(--clr-h1);
    font-weight: 300;
  }

  h2 {
    margin: 0;
    margin-left: 5px;
    padding-top: var(--gap-mid);
    padding-bottom: var(--gap-min);
    color: var(--clr-h2);
    font-weight: 400;
    &::before {
      display: inline-block;
      border-top: var(--gap-min) solid currentColor;
      border: var(--gap-min) solid currentColor;
      height: 20px;
      width: 20px;
      margin-right: 1.2ch;
      transform: translateY(2px) rotate(45deg);
      content: '';
    }
  }

  h3 {
    margin: 0;
    padding-top: var(--gap-mid);
    padding-bottom: var(--gap-min);
    color: var(--clr-h3);
    font-weight: 600;
  }

  blockquote, [box] {
    box-sizing: border-box;
    margin: 0;
    margin-top: 2lh;
    margin-bottom: 2lh;
    position: relative;
    color: var(--clr-blockquote);
    border: var(--gap-min) solid currentColor;
    padding: var(--gap-mid);

    &::after {
      position: absolute;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      content: "////";
      padding-left: .4ch;
      padding-right: .4ch;
      height: 20px;
      top: -11px;
      pointer-events: none;
      background-color: var(--clr-2);
      border: var(--gap-min) solid var(--clr-1);
      overflow: hidden;
      font-size: 25px;
    }

    &[caption]::after {
      content: attr(caption);
    }
    
  }

  pre {
    position: relative;
    margin: 0;
    margin-top: 2lh;
    margin-bottom: 2lh;
    color: var(--clr-2);
    background-color: var(--clr-1);
    padding: 2ch;
    max-width: 100%;
    overflow: hidden;
    overflow-x: auto;
    code {
      display: block;
      width: 100%;
      max-width: 100%;
      overflow-x: auto;
    }
  }

  p {
    margin: 2ch 0;
    text-shadow: none;
  }

  ul {
    --bullet-color: var(--clr-ul);
    color: var(--bullet-color);
    position: relative;
    list-style-type: none;
    padding: 0;
    margin-top: var(--gap-max);
    margin-bottom: var(--gap-max);

    li {
      position: relative;
      display: block;
      padding: 12px;
      padding-left: 3ch;
      border-left: var(--gap-min) solid var(--bullet-color);
      margin-bottom: 0;

      &::before {
        position: absolute;
        left: 0;
        top: calc(50% - var(--gap-min));
        width: var(--gap-mid);
        height: var(--gap-min);
        border-bottom: var(--gap-min) solid var(--bullet-color);
        content: "";
        color: var(--bullet-color);
        margin-right: var(--gap-mid);
      }
    }
  }

  ol {
    --bullet-color: var(--clr-ol);
    color: var(--bullet-color);
    position: relative;
    list-style-type: none;
    padding: 0;
    margin-top: var(--gap-max);
    margin-bottom: var(--gap-max);
    counter-reset: ordered-list;

    li {
      position: relative;
      display: block;
      padding: var(--gap-mid);
      padding-left: calc(var(--gap-max) + var(--gap-min));
      margin-bottom: 0;
      counter-increment: ordered-list;

      &::before {
        position: absolute;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        left: 0;
        top: calc(1ch + 3px);
        padding: var(--gap-min);
        width: calc(1lh + 4px);
        height: calc(1lh + 4px);
        text-align: center;
        border: var(--gap-min) solid var(--bullet-color);
        border-radius: 100%;
        content: counter(ordered-list);
        color: var(--bullet-color);
      }
    }
  }

  a {
    color: var(--clr-a);
    word-wrap: break-word;
    word-break: break-word;
  }

  hr {
    border: none;
    border-bottom: var(--gap-min) solid var(--clr-1);
    margin: var(--gap-max) 0;
  }

  a[btn] {
    --loc-arrow: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    padding: 0;
    padding-left: 2ch;
    padding-right: 2ch;
    margin: 0;
    margin-right: -10px;
    height: var(--ui-size);
    min-width: var(--ui-size);
    background-color: var(--clr-1);
    color: var(--clr-2);
    cursor: pointer;
    text-decoration: none;
    font-family: "Doto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: bold;
    white-space: nowrap;
    clip-path: polygon(
      0% 0%,
      calc(100% - var(--loc-arrow)) 0%,
      100% 50%,
      calc(100% - var(--loc-arrow)) 100%,
      0% 100%,
      var(--loc-arrow) 50%
    );

    &:hover {
      --loc-clr: var(--clr-1);
    }
  }

  arrow-links-css {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: var(--gap-max);
    margin-bottom: var(--gap-max);
  }

  iframe[code] {
    width: 100%;
    border: none;
    min-height: 500px;
  }

  table {
    border-collapse: collapse;
    border: var(--gap-min) solid currentColor;
    max-width: 100%;
    overflow: auto;
    table-layout: fixed;

    th {
      border: var(--gap-min) solid var(--clr-1);
      background-color: var(--clr-1);
      color: var(--clr-2);
      padding: .8em;
      word-break: break-word;
    }

    td {
      border: var(--gap-min) solid currentColor;
      padding: .8em;
      word-break: break-word;
    } 
  }

  h2 + table {
    margin-top: var(--gap-max);
  }

  h3 + table {
    margin-top: 1em;
  }

  code:not([class]) {
    background-color: #fff;
    color: var(--clr-1);
    padding: .03em .3em;
    border-radius: 4px;
  }

  pre {
    code:not([class]) {
      background-color: transparent !important;
      color: var(--clr-2);
    }
  }

  img {
    max-width: 100%;
  }
}

:root {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  overscroll-behavior: none;

  --zig-size: 6px;
}

body {
  text-shadow: unset;
}

* {
  scrollbar-width: none;
}

*::-webkit-scrollbar {
  display: none;
}

nav[shell-nav-inner] {
  a[logo] {
    color: currentColor;
  }
}

tui-article {
  width: 100%;
  grid-template-columns: minmax(auto, 100%) 260px;

  .hl-by-font {
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
  }

  ims-viewer {
    --ui-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 520px;
    margin-top: var(--gap-max);
    margin-bottom: var(--gap-max);
  }

  iframe[code] {
    width: 100%;
    border: none;
    aspect-ratio: 16/9;
    min-height: 500px;
  }

  pre {
    position: relative;
    display: block;
    overflow: auto;
    width: 100%;
    max-width: 100%;
  }

  a[btn] {
    font-weight: 400;
    font-style: normal;
    border-top-color: var(--clr-h1);
    border-bottom-color: var(--clr-h1);

    &::after {
      border-left-color: var(--clr-h1);
    }

    &:hover {
      border-top-color: #e4e4e4ff;
      border-bottom-color: #e4e4e4ff;

      &::after {
        border-left-color: #e4e4e4ff;
      }
    }
  }

  [alpha-bg] {
    background-color: var(--clr-h1);
  }

}

@media screen and (width < 1220px) {
  tui-article {
    grid-template-columns: 1fr;

    [nav] {
      display: none;
    }
  }
}

@media screen and (width < 700px) {
  
  tui-shell {
    grid-template-columns: 1fr;
    grid-template-rows: min-content auto;

    [shell-nav] {
      position: sticky;
      top: 0;
      padding: 0;
      margin: 0;
      z-index: 100000;
    }

    [shell-nav-inner] {
      padding: 0;
      margin: 0;
      top: 0;
      transition: background-color color .2s;

      &::after {
        display: none;
      }
    }

    nav[shell-nav-inner] {
      display: block;
      background-color: var();
      color: #000;
      border: none;
      border-bottom: var(--gap-min) solid currentColor;
    }

    tui-nav {
      padding: 4px;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 4px;
    }

    logo-glow {
      display: none;
    }

    pulse-entries.active {
      --padding-local: var(--gap-mid);
      padding: var(--gap-mid);

      &::part(close-btn) {
        top: var(--gap-mid);
        right: var(--gap-mid);
      }
    }

    logo-txt-block {
      gap: var(--gap-mid);
    }
  }

  tui-article {
    padding-left: var(--gap-mid);
    padding-right: var(--gap-mid);
  }

}

txt-in-focus {
  display: block;
  text-align: center;
  font-size: 30px;
  font-weight: 600;
  padding: 10px;
  background-color: var(--clr-2);
  color: var(--clr-1);
  border: var(--gap-min) solid currentColor;
  box-shadow: 5px 5px 0 0 currentColor;
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  text-transform: uppercase;

  svg {
    path {
      stroke: currentColor;
    }
  }
}

logo-txt-block {
  display: flex;
  gap: var(--gap-max);
  margin-top: var(--gap-max);

  img {
    height: 120px;
    width: 120px;
    object-fit: contain;
    background-color: #eaeaeaff;
    border-radius: 2px;
    padding: var(--gap-mid);
    border: var(--gap-min) solid currentColor;

    &[d-theme] {
      background-color: var(--clr-2);
    }
  }

  object {
    height: 120px;
    width: 120px;
    object-fit: contain;
    border-radius: 2px;
    padding: var(--gap-mid);
    border: var(--gap-min) solid currentColor;
    background-color: var(--clr-2);
  }

  
}