@layer layout {
  main {
    --screen-padding-inline: var(--space-m);
    --content-max-width:     1050px;

    display: grid;
    grid-template-columns:
      [full-width-start]
        minmax(var(--screen-padding-inline), 1fr)
          [content-start]
            min(100% - (var(--screen-padding-inline) * 2), var(--content-max-width))
          [content-end]
        minmax(var(--screen-padding-inline), 1fr)
      [full-width-end];
  }

  main > * {
    grid-column: content;
  }

  article {
    --post-max-width:        64ch;
    --sidebar-min-width:     14rem;
    --sidebar-max-width:     24rem;

    display: grid;
    grid-template-columns:
      [content-start]
        0
        [post-start]
          min(100%, var(--post-max-width))
        [post-end]
        1fr
      [content-end];

    margin-block-end: 6rem;
  }

  article > .breakout {
    grid-column: content;
  }

  article > :not(section) {
    grid-column: post;
  }

  section {
    grid-column: content;

    display: grid;
    grid-template-columns: inherit;
  }

  section > :not(section) {
    grid-column: post;
  }

  /* Stack layout */
  :is(article, section, blockquote, ol, ul, li, .speech-content, .solution) > * + * {
    margin-block-start: var(--flow-space, 1em);
  }

  /* -- Vertical spacing adjustments -- */
  :is(section, .speech-content) > :is(h2, h3, h4):first-child {
    margin-block-start: 1em;
  }

  :is(h2, h3, h4) + :is(section, .speech-content) > :is(h2, h3, h4):first-child {
    margin-block-start: 0.4em;
  }

  :is(section, .speech-content):first-child > :is(h2, h3, h4):first-child {
    margin-block-start: 0em;
  }

  figure:has(> blockquote:first-child),
  figure:has(> img:first-child),
  pre,
  .speech-bubble {
    --flow-space: var(--space-m);

    & + * {
      --flow-space: var(--space-m);
    }
  }

  /* -- Block styles -- */
  ol,
  ul {
    padding-inline-start: 1rem;
  }

  :is(ol, ul) :is(ol, ul):not([class]):first-child {
    --flow-space: var(--space-2xs);
    margin-block-start: var(--flow-space, 1em);
  }

  li {
    --flow-space: var(--space-xs);

    & + * {
      --flow-space: var(--space-xs);
    }
  }

  hr {
    --flow-space: var(--space-l);
  }

  hr:not(:has(+ section), :last-child) {
    margin-block-end: var(--space-l);
  }
}

@layer theme {
  /* Since the only h1 on the page is the title, bump up the sizes */
  h2 {
    font-size: var(--step-3);
    line-height: 1.2;
  }

  h3 {
    font-size: var(--step-2);
    line-height: 1.25;
  }

  h4 {
    font-size: var(--step-1);
    line-height: 1.3;
  }

  li::marker {
    color: var(--theme-foreground-alt);
    font-size: var(--step--1);
    font-variant-numeric: tabular-nums;
  }

  ul.task-list {
    padding-inline-start: 0rem;
    list-style-type: none;

    & li {
      cursor: text;
    }

    /* Disable checking/unchecking a checkbox in a task list */
    & label {
      pointer-events: none;
      display: flex;
      gap: var(--space-2xs);
    }
  }

  img,
  figure > svg {
    box-shadow: 0 3px 6px #0000001f;
    filter: var(--theme-dark, brightness(90%) contrast(90%));
  }

  figure:has(> img) {
    & img {
      margin: 0;
    }

    & figcaption {
      font-size: var(--step--2);
      color: var(--theme-foreground-alt);
      margin: var(--space-2xs) 0;
      text-align: right;
    }
  }

  /* Scroll rendered KaTeX horizontally on overflow */
  p:has(> span.katex-display:first-child) {
    overflow: auto hidden;
  }

  /* Swimming duck <hr> */
  hr {
    display: block;
    width: 100%;
    border-width: 0;
    border-bottom: 1px solid var(--theme-blue);

    &::before {
      content: "";
      display: block;
      margin: 0 auto -4px auto;
      width: var(--step-1);
      height: var(--step-1);
      background-color: var(--theme-light, var(--t-yellow-4)) var(--theme-dark, var(--t-yellow-3));
      mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.5,5A1.5,1.5 0 0,0 7,6.5A1.5,1.5 0 0,0 8.5,8A1.5,1.5 0 0,0 10,6.5A1.5,1.5 0 0,0 8.5,5M10,2A5,5 0 0,1 15,7C15,8.7 14.15,10.2 12.86,11.1C14.44,11.25 16.22,11.61 18,12.5C21,14 22,12 22,12C22,12 21,21 15,21H9C9,21 4,21 4,16C4,13 7,12 6,10C2,10 2,6.5 2,6.5C3,7 4.24,7 5,6.65C5.19,4.05 7.36,2 10,2Z'/%3E%3C/svg%3E");
    }
  }

  /* Details and summary */
  details[open] summary::before {
    transform: rotate(90deg);
  }
  details[open] summary {
    margin-block-end: var(--space-s);
  }

  summary {
    list-style: none;
    font-style: italic;

    &:hover {
      cursor: pointer;
    }

    &::-webkit-details-marker {
      display: none;
    }

    &::before {
      content: "";
      display: inline-block;
      margin: 0 auto -5px auto;
      width: var(--step-1);
      height: var(--step-1);
      background-color: var(--theme-light, var(--t-yellow-4)) var(--theme-dark, var(--t-yellow-3));
      margin-inline-end: var(--space-2xs);
      transition: transform 0.2s ease-in-out;
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' width='24' height='24'%3E%3Cpath d='M18.707 3.293l3 3q .054 .053 .097 .112l.071 .11l.054 .114l.035 .105l.03 .148l.006 .118l-.003 .075l-.017 .126l-.03 .111l-.044 .111l-.052 .098l-.067 .096l-.08 .09l-3 3a1 1 0 0 1 -1.414 -1.414l1.292 -1.293h-4.585a1 1 0 0 0 -1 1v8a3 3 0 0 1 -3 3h-2.171a3.001 3.001 0 0 1 -5.829 -1l.005 -.176a3 3 0 0 1 5.825 -.824h2.17a1 1 0 0 0 1 -1v-8a3 3 0 0 1 3 -3h4.585l-1.292 -1.293a1 1 0 0 1 -.083 -1.32l.083 -.094a1 1 0 0 1 1.414 0'%3E%3C/path%3E%3C/svg%3E");
      mask-size: cover;
    }
  }

  details.ducky[open] summary::before {
    transform: scale(-1, 1) rotate(-45deg);
  }
  details.ducky summary::before {
    transform: scale(-1, 1);
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.5,5A1.5,1.5 0 0,0 7,6.5A1.5,1.5 0 0,0 8.5,8A1.5,1.5 0 0,0 10,6.5A1.5,1.5 0 0,0 8.5,5M10,2A5,5 0 0,1 15,7C15,8.7 14.15,10.2 12.86,11.1C14.44,11.25 16.22,11.61 18,12.5C21,14 22,12 22,12C22,12 21,21 15,21H9C9,21 4,21 4,16C4,13 7,12 6,10C2,10 2,6.5 2,6.5C3,7 4.24,7 5,6.65C5.19,4.05 7.36,2 10,2Z'/%3E%3C/svg%3E");
    mask-size: cover;
  }

  /* Table style */
  table {
    border-collapse: collapse;
  }

  th, td {
    text-align: left;
    padding-block: var(--space-3xs);
    padding-inline: var(--space-2xs);
  }

  table :is(td + td, th + th) {
    border-left: 1px solid var(--theme-foreground-alt);
  }

  /* https://adrianroselli.com/2020/01/fixed-table-headers.html */
  th {
    vertical-align: bottom;
    border-bottom: 1px solid var(--theme-foreground-alt);
    background-color: var(--theme-background-alt);

    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 2;
  }

  tr td {
    max-width: 90vw;
  }

  tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02);
  }

  tr:nth-child(odd) {
    background-color: rgba(0, 0, 0, 0.02);
  }

  /* Responsive Tables */
  [role="region"][tabindex] {
    overflow: auto;
    max-height: 65vh;
    max-height: 65svh;
    max-width: 100%;

    width: fit-content;
    /* https://lea.verou.me/blog/2012/04/background-attachment-local/ */
    background:
      /* Shadow covers */
      linear-gradient(var(--theme-background) 30%, rgba(255,255,255,0)),
      linear-gradient(rgba(255,255,255,0), var(--theme-background) 70%) 0 100%,

      /* Shadows */
      radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)),
      radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
    background:
      /* Shadow covers */
      linear-gradient(var(--theme-background) 30%, rgba(255,255,255,0)),
      linear-gradient(rgba(255,255,255,0), var(--theme-background) 70%) 0 100%,

      /* Shadows */
      radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
      radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;

    background-repeat: no-repeat;
    background-color: var(--theme-background);
    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;

    /* Opera doesn't support this in the shorthand */
    background-attachment: local, local, scroll, scroll;
  }

  [role="region"][tabindex] table {
    margin: 0;
    border: none;
  }

  /* Key style */
  kbd {
    --flow-space: 0;
    color: var(--theme-foreground);
    background-color: var(--theme-background);

    border-radius: 0.25em;
    border: 1px solid var(--t-gray-5);

    box-shadow: 0 2px 0 1px var(--t-gray-5);

    font-size: var(--step--1);
    line-height: 1;

    display: inline-block;
    min-width: 1.2em;
    text-align: center;

    margin-inline: 0.2em;

    padding: 2px 4px;

    position: relative;
    top: -1px;

    &:hover {
      box-shadow: 0 1px 0 0.5px var(--t-gray-5);
      top: 1px;
    }
  }

  /* Text styles */
  .strikethrough {
    text-decoration-line: line-through;
  }

  .underline {
    text-decoration-line: underline;
  }

  /* Small text size */
  .small {
    font-size: var(--step--1);
  }

  /* Tabular nums */
  .tabular-nums {
    font-variant-numeric: tabular-nums;
  }

  /* Highlight on jump to link */
  section:target > :is(h1, h2, h3, h4),
  .sidenotes-content :target {
    animation: yellow-flash 1s;
  }

  @keyframes yellow-flash {
    from {
      background: var(--t-yellow-1);
    }

    to {
      background: transparent;
    }
  }

  /* Scroll to top button */
  #scroll-to-top {
    position: fixed;
    z-index: 2;

    right: 2rem;
    bottom: 2rem;

    fill: currentColor;

    color: rgb(from var(--theme-foreground) r g b / 0.3);

    &:hover {
      cursor: pointer;
      color: rgb(from var(--theme-foreground) r g b / 0.8);
    }

    &:active {
      transform: scale(95%);
    }
  }
}

@layer components {
  :root {
    --post-gutter-width: var(--space-m);
    --post-max-width: 1100px;
    --post-content-max-width: 64ch;

    --sidebar-content-min-width: 24ch;
    --sidebar-content-max-width: 48ch;
  }

  header.post-header {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-block-end: var(--space-m);

    & > * {
      max-width: var(--post-content-max-width);
    }

    & .title {
      font-size: var(--step-4);
      line-height: 1.3;
      margin: var(--space-xl) 0 var(--space-2xs);
      overflow-x: auto;
    }

    & .description {
      font-size: var(--step--1);
      max-width: 85vw;
      color: var(--theme-foreground-alt);
      padding-bottom: 1rem;
    }

    & .metadata {
      display: flex;
      flex-direction: column;
    }

    & .tagline {
      font-style: italic;
    }

    & :is(.published_date, .revised_date, .tagline) {
      font-size: var(--step--1);
      font-variant-numeric: tabular-nums;
      color: var(--theme-foreground-alt);
      margin-left: auto;
      text-align: right;
    }

    & .published_date.left {
      margin-left: 0;
      margin-right: auto;
    }
  }
}

/* -- Sidenotes -- */
@layer layout {
  .sidenotes-block {
    grid-column: content;

    row-gap: var(--space-xs);

    display: grid;
    grid-template-columns:
      [content-start]
        0
        [post-start]
          min(100%, var(--post-max-width))
        [post-end]
        minmax(0, var(--space-2xl))
        [sidebar-start]
          minmax(var(--sidebar-min-width), var(--sidebar-max-width))
        [sidebar-end]
        0
      [content-end];

    & > .sidenotes-referent {
      grid-column: post;
    }

    & > .sidenotes-content {
      grid-column: sidebar;
    }
  }
}

@layer theme {
  .sidenotes-content {
    font-size: var(--step--2);

    height: 0;
    overflow-y: visible;
  }

  .sidenotes-ref-link {
    font-family: "IosevkaCustom";
    text-decoration-line: none;
    user-select: none;
    color: var(--theme-foreground);

    &:visited {
      color: var(--theme-foreground);
    }
  }
}

@media screen and (width < 60rem) {
  @layer layout {
    .sidenotes-block .sidenotes-content:not(.override) {
      grid-column: post;
    }
  }

  @layer theme {
    .sidenotes-block .sidenotes-content:not(.override) {
      height: 100%;
    }
  }
}

/* -- Code blocks -- */
@layer theme {
  code > .line {
    --hint-color: var(--theme-light, var(--t-gray-3)) var(--theme-dark, var(--t-gray-5));

    /* Setup for indicator for highlighted lines */
    border-color: transparent;
    border-style: solid;
    border-width: 0;
    border-left-width: 3px;
    padding: 0 calc(var(--space-s) - 3px);
    margin:  0 calc(-1 * var(--space-s));
  }

  /* [ ] Toggle X hidden lines */
  label.toggle-line-hidden {
    font-size: var(--step--1);
    color: var(--theme-foreground-alt);
    accent-color: var(--theme-foreground-alt);
    margin-inline-start: var(--space-xs);
    margin-block-start: var(--space-xs);

    user-select: none;

    &:hover {
      cursor: pointer;
    }

    & > input {
      margin-inline-end: var(--space-3xs);
      height: 60%;
    }

    & > * {
      vertical-align: middle;
    }
  }

  /* Unhide hidden lines if any lsp-hover-ref has keyboard focus */
  label.toggle-line-hidden:has(> input:checked) + code,
  code:has(:focus-visible) {
    & .line {
      --hint-color: transparent;
    }

    & .line-hidden {
      position: relative;
      left: auto;
    }
  }

  code .line-hidden {
    /* Hide while remaining accessible in non-CSS environments */
    position: absolute;
    left: -99999px;
    top: auto;
  }

  /* Indicators that the line is adjacent to hidden lines */
  /* When lines are numbered */
  code .line-hidden+.line:not(.line-hidden)::before {
    text-decoration-line: overline;
    text-decoration-style: dotted;
    text-decoration-thickness: 2.5px;
    text-decoration-color: var(--hint-color);
  }

  code .line:not(.line-hidden):has(+ .line-hidden)::before {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 2.5px;
    text-underline-offset: 6px;
    text-decoration-color: var(--hint-color);
  }

  /* When lines are not numbered */
  code:not(.number-lines) .line-hidden+.line:not(.line-hidden)::before {
    position: absolute;
    display: block;
    content: "";
    width: 4%;
    border-top: 2px dotted var(--hint-color);
    margin-top: -2px;
  }

  code:not(.number-lines) .line:not(.line-hidden):has(+ .line-hidden)::after {
    position: absolute;
    display: block;
    content: "";
    width: 4%;
    border-bottom: 2px dotted var(--hint-color);
  }

  /* Line numbering */
  code.number-lines {
    counter-reset: line-number-step;
    counter-increment: line-number-step calc(var(--number-start, 1) - 1);

    & .line::before {
      content: counter(line-number-step, decimal-leading-zero);
      counter-increment: line-number-step;
      display: inline-block;
      width: var(--step--1);
      text-align: right;
      margin-inline-end: var(--space-s);
      color: var(--theme-foreground-alt);
    }
  }

  /* Highlighted lines */
  code .line-highlight {
    background-color: var(--theme-light, oklch(from var(--t-yellow-1) calc(l + 0.04) calc(c - 0.03) h))
                      var(--theme-dark, oklch(from var(--t-gray-6) calc(l - 0.12) c h));
    border-color: var(--theme-light, var(--t-orange-5)) var(--theme-dark, var(--theme-blue));
  }

  /* Code block syntax highlighting */
  pre.highlighted, code.highlighted {
    & .bold {
      font-weight: bold;
    }

    & .italic {
      font-style: italic;
    }

    & .gray {
      color: var(--theme-foreground-alt);
    }

    & :is(.comment, .comment\.documentation, .tag\.delimiter) {
      color: var(--theme-foreground-alt);
    }

    & :is(.yellow, .bright-yellow, .ansi-3, .ansi-11,
      .function, .function\.call, .function\.builtin, .method\.call, .function\.method\.call,
      .field, .tag\.attribute) {
      color: var(--theme-yellow);
    }

    & :is(.red, .bright-red, .ansi-1, .ansi-9,
      .keyword, .keyword\.function, .keyword\.return, .keyword\.exception, .keyword\.modifier, .keyword\.type, .keyword\.conditional, .keyword\.import, .keyword\.repeat,
      .include, .conditional,
      .type\.qualifier, .tag) {
      color: var(--theme-red);
    }

    & :is(.green, .bright-green, .ansi-2, .ansi-10, .character, .string, .string\.documentation) {
      color: var(--theme-green);
    }

    & :is(.orange, .bright-orange, .number, .boolean, .float) {
      color: var(--theme-orange);
    }

    & :is(.blue, .bright-blue, .ansi-4, .ansi-12, .type, .type\.builtin, .constructor) {
      color: var(--theme-blue);
    }

    & :is(.cyan, .bright-cyan, .ansi-6, .ansi-14, .constant, .constant\.builtin, .property, .namespace, .function\.macro, .define) {
      color: var(--theme-cyan);
    }

    & :is(.magenta, .bright-magenta, .ansi-5, .ansi-13, .repeat, .constant\.macro) {
      color: var(--theme-magenta);
    }

    & :is(.ba1, .ba9) {
      background-color: var(--theme-red);
    }

    & :is(.ba2, .ba10) {
      background-color: var(--theme-green);
    }

    & :is(.ba3, .ba11) {
      background-color: var(--theme-yellow);
    }

    & :is(.ba4, .ba12) {
      background-color: var(--theme-blue);
    }

    & :is(.ba5, .ba13) {
      background-color: var(--theme-magenta);
    }

    & :is(.ba6, .ba14) {
      background-color: var(--theme-cyan);
    }
  }

  /* Info bar at the top of code blocks */
  .pre-info {
    display: flex;
    flex-flow: row wrap;
    font-size: var(--step--2);
    column-gap: var(--space-m);

    align-items: center;
    padding-inline: var(--space-xs);
    padding-block: var(--space-2xs) var(--space-xs);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);

    /* TODO: See if this is needed */
    &+pre {
      --flow-space: calc(-1 * var(--space-3xs));
    }
  }

  .pre-info .tools {
    display: flex;
    flex-flow: row wrap;
    column-gap: var(--space-xs);
    margin: 0;
    padding: 0;

    margin-inline-start: auto;

    & li {
      /* External link icon */
      &:has(> a)::after {
        display: inline-block;
        content: "";
        background-color: var(--theme-foreground);
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.3' d='M12 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6m-7 1l9-9m-5 0h5v5'/%3E%3C/svg%3E");
        margin-inline-start: var(--space-3xs);
        width: var(--step--2);
        height: var(--step--2);
      }

      display: flex;
      align-items: center;

      margin: 0;
      list-style-type: none;
    }
  }

  .pre-info button {
    width: var(--step-1);
    height: var(--step-1);
    --flow-space: 0;
    color: var(--theme-foreground-alt);
  }

  /* Workaround for firefox putting newlines in copied and pasted code block content */
  pre:focus:not(:focus-visible) .lsp-hover-ref > input {
    display: none;
  }

  .lsp-hover-ref {
    user-select: text;
    cursor: pointer;

    &:focus-within {
      position: relative;
      z-index: 1;
      outline: var(--theme-focus) solid 2px;
    }

    & > input {
      position: absolute;
    }

    & > input:focus-visible {
      outline-color: transparent;
    }
  }

  .lsp-hover {
    inset: unset;
    position: fixed;
    bottom: var(--space-s);
    right: var(--space-s);
    max-width: calc(min(48ch, 95vw) - var(--space-s));
    max-height: 40vh;
    max-height: 40svh;

    background-color: var(--theme-background-alt);
    border: 2px solid var(--theme-foreground-alt);
  }

  .lsp-hover:has(.fullscreen:checked) {
    min-width: calc(100vw - var(--space-s) * 2);
    min-width: calc(100svw - var(--space-s) * 2);
    min-height: calc(100vh - var(--space-s) * 2);
    min-height: calc(100svh - var(--space-s) * 2);
  }

  .lsp-hover > label {
    display: flex;
    justify-content: right;
    align-items: center;

    border-bottom: 2px solid var(--theme-foreground);

    font-size: var(--step--2);
    color: var(--theme-foreground-alt);
    accent-color: var(--theme-foreground-alt);
    padding-inline: var(--space-xs);
    padding-block: var(--space-xs);

    user-select: none;

    &:hover {
      cursor: pointer;
    }

    &>input {
      margin-inline-end: var(--space-3xs);
      height: 60%;
    }

    &>* {
      vertical-align: middle;
    }
  }

  article:has(> .lsp-hover:popover-open) {
    margin-bottom: calc(40vh + var(--space-s) * 2);
  }

  .lsp-hover-content {
    /* Still show padding on the right when we have overflow */
    padding-block: var(--space-s);
    padding-inline-start: var(--space-s);
    margin-inline-end: var(--space-s);

    overflow-x: auto;

    & > * + *,
    & section > * + *,
    & section> :is(h2:first-child, h3:first-child, h4:first-child) {
      margin-block-start: var(--flow-space, 1em);
    }

    & :is(h2 + *, h3 + *, h4 + *) {
      --flow-space: var(--space-s);
    }

    & pre {
      overflow-x: visible;
      box-shadow: none;
    }

    & pre > code {
      padding-block-start: 0;
      /* For firefox scrollbar */
      padding-block-end: var(--space-2xs);
      padding-inline: 0;
    }

    & pre.highlighted .line {
      padding: 0;
      margin: 0;
    }

    & hr {
      --flow-space: var(--space-s);

      &::before {
        content: initial;
      }

      border-width: 1px;
    }
  }
}

/* -- Ducky -- */
@layer components {
  .speech-bubble {
    display: flex;

    font-size: var(--step--1);

    /* Reset code block font size to not make it too small */
    & pre.highlighted {
      font-size: var(--step-0);
    }

    & .speech-user {
      position: relative;
      width: 32px;
      height: 32px;
      aspect-ratio: 1;
      filter: var(--theme-light, drop-shadow(0 1px 1px rgb(0 0 0 / 0.05))) var(--theme-dark, saturate(80%));
      margin-top: calc(var(--space-s) / 3);
    }

    & .speech-content {
      position: relative;
      padding: var(--space-2xs) var(--space-xs);
      border-radius: 0.25rem;
      background-color: var(--theme-background-alt);
      filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
    }
  }

  .speech-bubble:not(.right) .speech-content {
    margin-inline-start: var(--space-s);

    &::before {
      content: "";
      width: 0px;
      height: 0px;
      position: absolute;
      border-left: 8px solid transparent;
      border-right: 8px solid var(--theme-background-alt);
      border-top: 8px solid var(--theme-background-alt);
      border-bottom: 8px solid transparent;
      left: calc(-1 * var(--space-2xs));
      top: var(--space-s);
    }
  }

  .speech-bubble.right {
    & .speech-user {
      order: 1;
      transform: scale(-1, 1);
    }

    & .speech-content {
      margin-inline-end: var(--space-s);
    }

    & .speech-content::after {
      content: "";
      width: 0px;
      height: 0px;
      position: absolute;
      border-left: 8px solid var(--theme-background-alt);
      border-right: 8px solid transparent;
      border-top: 8px solid var(--theme-background-alt);
      border-bottom: 8px solid transparent;
      right: calc(-1 * var(--space-2xs));
      top: var(--space-s);
    }
  }

  .speech-bubble.chatgpt .speech-user {
    mask: url("/assets/icons/chatgpt.svg") no-repeat center;
    -webkit-mask: url("/assets/icons/chatgpt.svg") no-repeat center;
    mask-size: cover;
    background-color: var(--theme-foreground);
  }

  .speech-bubble.ducky .speech-user {
    background-image: url("/assets/ducks/ducky.svg");
    background-size: 32px 32px;
  }

  .speech-bubble.author .speech-user {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' width='24' height='24' stroke-width='1.5'%3E%3Cpath d='M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0'%3E%3C/path%3E%3Cpath d='M12 10m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0'%3E%3C/path%3E%3Cpath d='M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
    mask-size: cover;
    background-color: var(--theme-foreground);
  }
}

/* -- Metadata table -- */
@layer components {
  dl.metadata {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 2em;
    row-gap: 1em;

    & dt {
      font-weight: bold;
    }
  }
}

@layer components {
  .solution {
    border-left: 2px solid var(--t-gray-3);
    padding-inline-start: 0.6em;
  }
}