@layer slide.base {
  [slide-item] {
    border: none;
    container-type: normal;
    display: grid;
    padding: 0;
    position: relative;
    scroll-margin-block: var(--slide-target-margin);

    &:target { scroll-margin-block: var(--target-margin); }

    [role=list] { list-style: none; }
    picture { display: contents; }
    source { display: none; }

    img {
      display: block;
      block-size: auto;
      max-inline-size: 100%;
    }

    img, svg { box-sizing: border-box; }
    svg { fill: currentColor; }

    textarea:not([rows]) { min-block-size: 5lh; }
    [hidden] { display: none !important; }

    visually-hidden,
    [visually-hidden] {
      &:not(:focus, :active, :focus-within) {
        clip: rect(1px, 1px, 1px, 1px);
        -webkit-clip-path: inset(1px 1px 1px 1px);
        clip-path: inset(1px 1px 1px 1px);
        height: 1px;
        overflow: hidden;
        pointer-events: none;
        position: absolute;
        width: 1px;
      }
    }
  }

  [slide-item][aria-current] {
    --slide-animation-active: initial;
    --slide-play: running;

    & + [slide-item] {
      --slide-animation-active: none;
    }
  }
}

@layer slide.content {
  [slide-canvas] {
    h1, h2, h3, h4, h5, h6 {
      text-wrap: balance;
      margin-block: unset;
    }

    [slide-title=main] {
      font-size: var(--slide-title-text);
    }

    [slide-title=pre] {
      display: block;
      font-style: italic;
      font-weight: lighter;
      margin: unset;
    }

    [slide-title=sub] {
      margin: unset;
    }
  }

  [slide-content] {
    font-size: var(--slide-normal-text);
  }

  [slide-md],
  [slide-webc] {
    display: contents;
  }
}

@layer slide.theme {
  [slide-canvas] {
    --step-n1: clamp(0.625rem, 0.4859rem + 0.7418cqi, 1.0608rem);
    --step-0: clamp(0.75rem, 0.5106rem + 1.2766cqi, 1.5rem);
    --step-1: clamp(0.9rem, 0.5103rem + 2.0783cqi, 2.121rem);
    --step-2: clamp(1.08rem, 0.4675rem + 3.2665cqi, 2.9991rem);
    --step-3: clamp(1.296rem, 0.3562rem + 5.0123cqi, 4.2407rem);

    --slide-small-text: var(--step-0);
    --slide-normal-text: var(--step-1);
    --slide-large-text: var(--step-2);
    --slide-xlarge-text: var(--step-3);
    --slide-title-text: var(--slide-xlarge-text);
    ---default-slide-content-height: minmax(min-content, 1fr);

    aspect-ratio: var(--slide-ratio);
    background: var(--slide-background, Canvas);
    border: var(--slide-canvas-border, thin solid);
    color: var(--slide-color, CanvasText);
    color-scheme: var(--slide-mode);
    container: slide-canvas / inline-size;
    display: grid;
    font-family: var(--slide-font);
    font-size: var(--slide-normal-text);
    font-size-adjust: from-font;
    grid-template:
      'content content'
      var(--slide-content-height, var(---default-slide-content-height))
      'caption to-slide' auto
      / minmax(0, 1fr) auto;
    line-height: var(--slide-line-height, 1.3);
    margin: 0;
    position: relative;

    [slide-item]:target & {
      outline: var(--slide-target-outline) var(--slide-accent-color);
      outline-offset: var(--slide-target-outline-offset);
    }

    &:not(:has([slide-caption])) {
      --to-slide-area: content;
      --to-slide-placement: end;
      grid-template:
        'content content'
        var(--slide-content-height, var(---default-slide-content-height))
        / minmax(0, 1fr) auto
      ;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-family: var(--slide-title-font, inherit);
    }

    :focus-visible {
      outline: medium dotted var(--slide-accent-color);
      outline-offset: 0.25em;
    }

    button {
      background-color: var(--slide-button-state-color, var(--slide-button-color));
      border: thick double;
      border-radius: 0.25em;
      color: var(--slide-button-state-text, var(--slide-button-text));
      font: inherit;

      &:focus,
      &:hover,
      &:active {
        --slide-button-state-color: var(--slide-accent-color);
      }
    }

    [aria-pressed=true] {
      --slide-button-state-color: var(--slide-active-color);
    }

    pre {
      overflow-wrap: break-word;
      tab-size: 2;
      white-space: pre-wrap;
    }

    pre,
    code:not(pre *) {
      font-family: var(--slide-code-font);
    }

    mark {
      background: linear-gradient(to top,
          var(--slide-mark-bg-color) 65%,
          transparent 65%);
      color: inherit;
      text-shadow: 1px 1px 0 var(--slide-shadow-color);
    }

    a {
      &:where(:link),
      &:where(:visited) {
        --slide-underline-color--default: var(--slide-accent-color);
        --slide-underline-thickness--default: 0.1em;
        --slide-underline-offset--default: 0.15em;

        color: var(--slide-link-color, var(--slide-action-color));
        text-decoration: underline;
        text-decoration-color: var(--slide-underline-color,
            var(--slide-underline-color--default));
        text-decoration-skip-ink: auto;
        text-decoration-thickness: var(--slide-underline-thickness,
            var(--slide-underline-thickness--default));
        text-underline-offset: var(--slide-underline-offset,
            var(--slide-underline-offset--default));
        transition: text-decoration-thickness 150ms ease-out;
      }

      &:where(:hover),
      &:where(:focus) {
        --slide-underline-color: var(--slide-active-color);
        --slide-underline-thickness: 0.2em;

        color: var(--slide-link-focus, var(--slide-active-color));
      }

      &:has(link-text) {
        text-decoration: none;
      }

      [data-icon] {
        block-size: 1lh;
      }
    }

    s,
    strike,
    del {
      text-decoration-color: var(--slide-strikeout-color);
      text-decoration-thickness: 0.125em;
    }

    ::selection {
      background-color: var(--slide-active-color) !important;
      color: var(--slide-background) !important;
    }
  }

  [slide-content] {
    display: grid;
    grid-area: content;
    overflow: var(--slide-overflow, var(---slide-type-overflow, auto));
    padding: var(--slide-padding, var(---slide-type-padding));
    place-content: var(--slide-place-content, var(---slide-type-place-content));
    place-items: var(--slide-place-items, var(---slide-type-place-items));
    position: relative;
  }

  [slide-content~=default] {
    ---slide-type-padding: var(--slide-gap);
    ---slide-type-place-content: safe center;
  }

  slide-caption-wrapper {
    display: contents;
    font-size: var(--slide-small-text);
    font-family: var(--slide-caption-font, inherit);

    &:has([slide-caption]) {
      align-items: center;
      background: var(--slide-caption, var(--slide-callout-color));
      color: var(--slide-caption-text, currentColor);
      display: grid;
      grid-area: caption / caption / to-slide / to-slide;
      grid-template: subgrid / subgrid;
    }
  }

  [slide-caption] {
    grid-area: caption;
    padding: var(--slide-half-gap) var(--slide-gap);
  }

  button[slide-focus-button] {
    --slide-button-color: transparent;
    --slide-button-text: currentColor;
    border: thin solid transparent;
    border-radius: 0;
    font-variant-numeric: lining-nums;
    grid-area: var(--to-slide-area, to-slide);
    opacity: var(--to-slide-opacity, 0.5);
    padding: var(--slide-half-gap) var(--slide-gap);
    place-self: var(--to-slide-placement);
    position: relative;
    transition: opacity 200ms;
    z-index: 2;

    &:focus,
    &:hover,
    &:active {
      --to-slide-opacity: 1;
      --slide-button-state-color: var(--slide-active-color);
      --slide-button-state-text: var(--slide-background);
    }

    &::after {
      content: var(--slide-index-string);
    }
  }

  [slide-note] {
    font-family: var(--slide-note-font, inherit);
  }
}
@layer slide.type {
  [slide-content=event] {
    ---slide-type-padding: var(--slide-gap);
    display: flex;
    flex-direction: column;
    gap: var(--slide-gap);
  }

  [slide-auto=exit] {
    font-size: var(--slide-small-text);

    &::before {
      content: '« ';
      content: '« ' / '';
    }
  }

  [slide-auto=main] {
    place-content: center;
    display: grid;
    flex: auto;
    gap: var(--slide-gap);
    grid-template-columns: fit-content(80cqi);
  }

  [slide-auto=event] {
    margin-block-end: var(--slide-header-margin-block-end, var(--slide-gap));
    padding-block-end: var(--slide-header-padding-block-end, var(--slide-gap));
    position: relative;
    width: auto;

    @container (width > 55em) {
      --slide-header-margin-block-end: var(--double-gap);
      --slide-header-padding-block-end: var(--double-gap);
    }

    &::after {
      border-block-start: medium dotted teal;
      content: '';
      inset: auto 0 0;
      position: absolute;
      rotate: -2deg;
    }
  }

  [slide-auto=event-time] {
    font-size: var(--slide-small-text);
  }

  [slide-auto=event-venue] {
    font-size: var(--slide-large-text);
    font-weight: 800;
    margin-block: 0;
  }
}
@layer slide.type {
  [slide-content~=image] {
    ---slide-type-place-items: stretch;
    display: flex;
    flex-direction: column;

    img {
      clip-path: var(--slide-image-clip);
      flex: 1 1 0;
      inline-size: 100%;
      overflow: hidden;
      object-fit: var(--slide-fit , cover);
      object-position: var(--slide-position , top);
    }

    slide-image-credit {
      background: Canvas;
      border-radius: 3px;
      color: CanvasText;
      font-size: var(--slide-small-text, smaller);
      font-style: italic;
      inset: auto auto 0 0;
      margin: var(--slide-half-gap);
      padding-inline: var(--slide-half-gap);
      position: absolute;
    }
  }
}
@layer slide.type {
  [slide-content] {
    browser-support::part(link),
    browser-support::part(link):visited {
      --slide-underline-color--default: var(--slide-accent-color);
      --slide-underline-thickness--default: 0.1em;
      --slide-underline-offset--default: 0.15em;

      color: var(--slide-link-color, var(--slide-action-color));
      text-decoration: underline;
      text-decoration-color: var(--slide-underline-color,
      var(--slide-underline-color--default));
      text-decoration-thickness: var(--slide-underline-thickness,
      var(--slide-underline-thickness--default));
      text-decoration-skip-ink: auto;
      text-underline-offset: var(--slide-underline-offset,
      var(--slide-underline-offset--default));
      transition: text-decoration-thickness 150ms ease-out;
    }

    browser-support::part(link):hover,
    browser-support::part(link):focus {
      --slide-underline-color: var(--slide-active-color);
      --slide-underline-thickness: 0.2em;

      color: var(--slide-link-focus, var(--slide-active-color));
    }

    browser-support::part(link):focus-visible {
      outline: medium dotted var(--slide-accent-color);
      outline-offset: 0.25em;
    }
  }
}
@layer slide.type {
  [slide-content~=quote] {
    ---slide-type-padding: var(--slide-gap);
    ---slide-type-place-content: safe center;
    gap: var(--slide-gap);
    grid-template:
      'marker quote' auto
      / minmax(1lh, 2lh) fit-content(28em)
    ;

    & slide-quote-marker {
      display: grid;
      fill: var(--slide-border-color);
      gap: var(--slide-half-gap);
      grid-area: marker;
      grid-template-rows: auto 1fr;
      justify-items: center;

      &::after {
        align-self: stretch;
        border-inline-start: thin solid;
        content: '';
      }
    }

    & img, & svg {
      aspect-ratio: 1;
      inline-size: 100%;
    }

    & img {
      border-radius: 0.25lh;
      object-fit: cover;
    }

    & slide-quote {
      display: grid;
      gap: inherit;
      grid-area: quote;
      padding-block: 0.25lh;
    }

    & blockquote {
      font-size: var(--slide-quote-text, var(--slide-large-text, 1.5em));
      margin: unset;

      > :first-child { margin-block-start: unset; }
      > :last-child { margin-block-end: unset; }
    }
  }
}
@layer slide.type {
  [slide-content~=embed] {
    ---slide-type-overflow: clip;
    container: video / size;

    > iframe,
    > video {
      contain: size;
      height: 100cqh;
      width: 100cqw;
    }

    iframe { border: unset; }
  }
}
@layer slide.type {
  [slide-content~=code] {
    grid-template-columns:
      [full-start] 1fr
      [code-start] auto [code-end]
      1fr [full-end]
    ;

    & slide-code-block {
      display: grid;
      font-size: clamp(1em, -0.067em + 2.667cqi, 2em);
      grid-column: full;
      grid-template-rows: auto 1fr;
      grid-template-columns: inherit;
      grid-template-columns: subgrid;
    }

    & slide-code-label {
      color-scheme: dark;
      background: Canvas;
      color: CanvasText;
      font-family: var(--slide-code-font, monospace);
      grid-column: full;
      padding: var(--slide-half-gap) var(--slide-gap);
    }

    & pre {
      align-content: safe center;
      background: unset;
      box-sizing: border-box;
      display: grid;
      grid-column: code;
      margin: unset;
      max-inline-size: 100%;
      padding: var(--slide-gap);
    }
  }
}
@layer slide.type {
  [slide-content=split] {
    --slide-image-clip: polygon(
      0 0, 100% 0,
      calc(100% - 5cqi) 100%,
      0 100%
    );
    display: grid;
    grid-template-columns: minmax(25%, 0.5fr) 1fr;

    [slide-content] {
      grid-area: unset;
    }
  }
}
@layer slide.base {
  [slot=control-panel] {
    background: Canvas;
    color: CanvasText;
    border: medium solid var(--slide-border-color);
    container: panel / inline-size;
    min-width: min(50ch, 100%);
    padding: 0;

    &::backdrop {
      background-color: oklch(from black l c h / 0.5);
      backdrop-filter: blur(2px);
    }

    h2 {
      font-size: inherit;
      margin-block: 1lh 0;

      &:first-child {
        margin-block-start: unset;
      }
    }
  }

  [slide-shortcuts] {
    border-block-start: thin dotted;
    margin-block-start: 1lh;
    padding-block-start: var(--slide-gap);
  }

  [slide-dialog=header] {
    align-items: center;
    border-block-end: thin solid var(--slide-border-color);
    display: flex;
    gap: var(--slide-half-gap);
    grid-template-columns: 1fr auto;
    justify-content: space-between;
    padding: var(--slide-half-gap);

    form { margin: unset; }
  }

  [slide-dialog=contents] {
    padding: var(--slide-gap);
  }

  [close-dialog] {
    padding: 0 var(--slide-half-gap);
  }
}
@layer slide.base {
  slide-deck {
    --slide-gap: clamp(12px, 2cqmin, 24px);
    --slide-half-gap: calc(var(--slide-gap) / 2);
    --slide-spacer: clamp(1.5rlh, 10vw, 5rlh);
    --slide-ratio: 16/9;
    --slide-deck-progress: calc(
      (var(--slide-active-id) - 1) / (var(--slide-count) - 1) * 100%
    );

    --slide-accent-color: AccentColor;
    --slide-border-color: gray;

    counter-reset: slide;
    container: slide slide-deck / inline-size;
    display: grid;
    overflow-x: clip;
  }
}

@layer slide.views {
  [slide-view=grid],
  [slide-view=speaker],
  [slide-view=article] {
    --target-margin: var(--slide-gap);
    --slide-target-outline: medium dotted;
    --slide-target-outline-offset: calc(var(--slide-gap) * 0.5);
    gap: var(--slide-gap);
    padding: var(--slide-gap);
  }

  [slide-view=grid] {
    --slide-border: thin solid var(--slide-border-color);
    --slide-normal-text: smaller;
    grid-template-columns: repeat(auto-fill, minmax(min(35ch, 100%), 1fr));
    font-size: var(--slide-small-text);

    [slide-item=container] {
      align-items: start;
      grid-template-rows: auto 1fr;
    }
  }

  [slide-view=slideshow] {
    [slide-item=container] {
      grid-template-columns: minmax(0, 1fr);
      container: slide / inline-size;
    }

    [slide-canvas] {
      border: 0;
      border-block-end: thin solid var(--slide-border-color);
      scroll-snap-align: start;

      @container slide (inline-size > 100cqb) {
        --slide-ratio: initial;
        --slide-content-height: minmax(0, 1fr);
        block-size: 100cqb;
      }
    }

    [slide-note] {
      display: none;
    }
  }

  [slide-view=speaker] {
    --slide-border: thin solid var(--slide-border-color);
    --slide-normal-text: var(--slide-small-text);
    --slide-content-height: minmax(0, 1fr);

    @media (width > 35em) {
      display: grid;
      grid-template-columns: min(15em, 30%) 1fr;

      [slide-item=container] {
        grid-template-columns: subgrid;

        &:last-of-type {
          margin-block-end: 100vh;
        }
      }

      [slide-note] {
        grid-column: 2;
        inset: 0 0 auto 0;
        position: absolute;
        visibility: var(--note-visibility, hidden);
      }
    }

    [slide-item=container] {
      align-items: center;
      grid-column: 1 / -1;
      z-index: var(--slide-z, initial);
    }

    [slide-canvas] {
      filter: grayscale(var(--canvas-grayscale, 0.7));
      grid-column: 1;
      opacity: var(--canvas-opacity, 0.6);
      zoom: 0.5;

      @media (width < 75em) {
        zoom: 0.25;
      }
    }

    [slide-note] {
      font-size: var(--note-font-size);
      padding-inline: var(--slide-gap);
    }

    [aria-current=true] {
      --note-font-size: 120%;
      --note-visibility: visible;
      --canvas-opacity: 1;
      --canvas-grayscale: 0;
      --slide-z: 10;
    }

    &::after {
      content: '';
      background: linear-gradient(
        to right,
       var(--slide-accent-color) var(--slide-deck-progress, 0),
        canvas var(--slide-deck-progress, 0)
        );
      block-size: var(--slide-gap);
      inset: auto 0 0 0;
      position: fixed;
      z-index: 12;
    }
  }

  [slide-view=article] {
    --slide-article-measure: 65ch;
    container: slide-deck / inline-size;
    justify-content: center;

    [slide-item] {
      grid:
        'canvas' auto
        'note' auto
        / minmax(0, var(--slide-article-measure))
      ;
      gap: var(--slide-gap);

      @container (inline-size > 50em) {
        grid:
          'canvas note' auto
          / minmax(15em, 30em) minmax(0, var(--slide-article-measure))
        ;
      }
    }

    [slide-canvas] {
      --slide-normal-text: var(--slide-small-text);
      grid-column: canvas;
    }

    [slide-note] { grid-column: note; }
  }
}