@layer presso.reset, presso.base, presso.deck, presso.theme, presso.modes, presso.controls, presso.print;

@layer presso.reset {
  * {
    box-sizing: border-box;
  }

  html,
  body {
    margin: 0;
    min-height: 100%;
  }
}

@layer presso.base {
  :root {
    --presso-slide-width: 1280px;
    --presso-slide-height: 720px;
    --presso-slide-ratio: 1280 / 720;
    --presso-stage-padding: 0px;
    --presso-accent: #ff5e9a;
    --presso-bg: #202020;
    --presso-fg: #fff;
    --presso-muted: #9a9a9a;
  }

  body {
    background: var(--presso-bg);
    color: var(--presso-fg);
    font-family: Inter, system-ui, sans-serif;
  }

  button {
    font: inherit;
    border: 0;
    border-radius: .3rem;
    cursor: pointer;
  }

  button:hover,
  button:focus-visible {
    background: var(--presso-accent);
    outline: none;
  }

  button:disabled {
    cursor: not-allowed;
    opacity: .45;
  }

  kbd {
    display: inline-block;
    min-width: 2rem;
    border: 1px solid rgb(255 255 255 / 26%);
    border-bottom-width: 2px;
    border-radius: .25rem;
    padding: .12rem .35rem;
    text-align: center;
    background: rgb(255 255 255 / 8%);
    color: white;
  }
}

@layer presso.deck {
  body[data-mode="deck"],
  body[data-mode="embed"] {
    --presso-slide-scale: 1;
    --presso-scaled-slide-width: var(--presso-slide-width);
    --presso-scaled-slide-height: var(--presso-slide-height);
    --presso-viewport-width: calc(100vw - var(--presso-stage-padding) - var(--presso-stage-padding));
    --presso-viewport-height: calc(100vh - var(--presso-stage-padding) - var(--presso-stage-padding));
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: var(--presso-stage-padding);
    overflow: hidden;
  }

  body[data-presso-serving="static"][data-mode="deck"],
  body[data-presso-serving="static"][data-mode="embed"] {
    touch-action: pan-y pinch-zoom;
    overscroll-behavior-x: contain;
  }

  @supports (height: 100dvh) {
    body[data-mode="deck"],
    body[data-mode="embed"] {
      --presso-viewport-height: calc(100dvh - var(--presso-stage-padding) - var(--presso-stage-padding));
      min-height: 100dvh;
    }
  }

  .presso-stage {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: var(--presso-stage-padding);
  }

  .presso-slide {
    display: none;
    width: var(--presso-slide-width);
    height: var(--presso-slide-height);
    aspect-ratio: var(--presso-slide-ratio);
    position: relative;
    overflow: hidden;
    padding: 5%;
    background-color: var(--presso-bg-color, #2d2d2d);
    background-image: var(--presso-bg-image, none);
    background-position: var(--presso-bg-position, center);
    background-repeat: var(--presso-bg-repeat, no-repeat);
    background-size: var(--presso-bg-fit, auto);
    box-shadow: 0 1rem 4rem rgb(0 0 0 / 35%);

    &.is-active {
      display: grid;
    }

    &[data-background~="image"]::before {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--presso-bg-overlay, none);
      pointer-events: none;
    }

    > * {
      position: relative;
    }

    > .presso-slide-body {
      display: grid;
      align-content: center;
      gap: 1.35rem;
      width: 100%;
      height: 100%;

      > :first-child {
        margin-top: 0;
      }

      > :last-child {
        margin-bottom: 0;
      }
    }

    h1,
    h2,
    h3 {
      color: var(--presso-accent);
      margin-top: 0;
    }

    h1 {
      font-size: 4rem;
      line-height: 1;
    }

    h2 {
      font-size: 2.8rem;
      line-height: 1.08;
    }

    p,
    ul,
    ol {
      max-width: 48rem;
      font-size: 1.45rem;
      line-height: 1.35;
    }

    li + li {
      margin-top: .55rem;
    }

    img,
    video {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }

    pre {
      max-width: 100%;
      overflow: auto;
      margin: 0;
      border: 1px solid rgb(255 255 255 / 12%);
      border-radius: .45rem;
      padding: 1.25rem;
      background: rgb(0 0 0 / 44%);
      font-size: 1.05rem;
      line-height: 1.45;
    }

    code {
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    }

    &[data-layout="title"] {
      > .presso-slide-body {
        align-content: end;
      }

      h1 {
        max-width: 52rem;
        margin-bottom: .25rem;
      }

      p {
        margin: 0;
        color: rgb(255 255 255 / 78%);
      }
    }

    &[data-layout="section"],
    &[data-layout="statement"] {
      > .presso-slide-body {
        justify-items: center;
        text-align: center;
      }
    }

    &[data-layout="statement"] {
      h1,
      h2,
      p {
        max-width: 58rem;
      }

      p {
        font-size: 2rem;
      }
    }

    &[data-layout="bullets"] {
      > .presso-slide-body {
        justify-items: start;
      }

      ul,
      ol {
        font-size: 1.8rem;
      }
    }

    &[data-layout="image"] {
      padding: 0;

      > .presso-slide-body {
        display: block;

        > p:has(> img:only-child) {
          width: 100%;
          height: 100%;
          margin: 0;
          max-width: none;

          > img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
    }

    &[data-layout="image-title"] {
      --presso-bg-fit: cover;

      > .presso-slide-body {
        align-content: start;
        justify-items: start;
      }

      h1,
      h2,
      h3 {
        display: inline-block;
        max-width: 58rem;
        margin: 0;
        border-radius: .2rem;
        padding: .7em .9em;
        background: rgb(0 0 0 / 72%);
        color: var(--presso-accent);
      }
    }

    &[data-layout="logos"] {
      > .presso-slide-body {
        justify-items: center;
        text-align: center;
      }
    }

    &[data-layout="code"] {
      > .presso-slide-body {
        align-content: stretch;
      }

      pre {
        min-height: 65%;
      }
    }

    &[data-layout="demo"] {
      > .presso-slide-body {
        align-content: stretch;
      }

      iframe,
      video {
        width: 100%;
        height: 100%;
        min-height: 28rem;
      }
    }

    &[data-layout="blank"] {
      padding: 0;
      background-color: var(--presso-bg-color, #111);

      > .presso-slide-body {
        display: block;
      }
    }
  }

  .presso-columns {
    --presso-column-gap: 3rem;
    --presso-column-tracks: repeat(2, minmax(0, 1fr));
    --presso-column-align: center;
    --presso-column-content-align: center;

    display: grid;
    grid-template-columns: var(--presso-column-tracks);
    gap: var(--presso-column-gap);
    align-items: var(--presso-column-align);
    width: 100%;

    > * {
      min-width: 0;
    }
  }

  .presso-column {
    display: grid;
    gap: 1rem;
    align-content: var(--presso-column-content-align);

    > :first-child {
      margin-top: 0;
    }

    > :last-child {
      margin-bottom: 0;
    }
  }

  @media (max-width: 48rem) {
    body:not([data-mode="deck"]):not([data-mode="embed"]):not([data-mode="presenter"]):not([data-mode^="print-"]) .presso-columns {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .presso-logos,
  .presso-logos > p {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
    justify-content: center;
  }

  .presso-logos > p {
    margin: 0;
    max-width: none;
  }

  .presso-logos {
    img {
      max-width: 10rem;
      max-height: 6rem;
      object-fit: contain;
    }
  }

  .presso-fragment {
    display: contents;
  }

  .presso-iframe {
    width: 100%;
    min-height: 60%;
    border: 0;
    background: white;
  }

  body[data-mode="deck"] .presso-slide[data-build-current-step] [data-build-item],
  body[data-mode="embed"] .presso-slide[data-build-current-step] [data-build-item],
  body[data-mode="presenter"] .presso-slide[data-build-current-step] [data-build-item] {
    transition: opacity .18s ease;
  }

  body[data-mode="deck"] .presso-slide[data-build-current-step] [data-build-visible="false"],
  body[data-mode="embed"] .presso-slide[data-build-current-step] [data-build-visible="false"],
  body[data-mode="presenter"] .presso-slide[data-build-current-step] [data-build-visible="false"] {
    visibility: hidden;
    opacity: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    body[data-mode="deck"] .presso-slide[data-build-current-step] [data-build-item],
    body[data-mode="embed"] .presso-slide[data-build-current-step] [data-build-item],
    body[data-mode="presenter"] .presso-slide[data-build-current-step] [data-build-item] {
      transition: none;
    }
  }
}

@layer presso.controls {
  body[data-mode="deck"] > [data-presentation-controls],
  body[data-mode="embed"] > [data-presentation-controls] {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: 2rem 1rem 1rem 2rem;
    opacity: 1;
    transform: translateY(0);
    animation: presso-controls-idle-hide .18s ease 2s forwards;
    transition:
      opacity .18s ease,
      transform .18s ease;

    &:hover,
    &:focus-within {
      animation: none;
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes presso-controls-idle-hide {
    to {
      opacity: 0;
      transform: translateY(.35rem);
    }
  }

  body[data-fullscreen="true"] > [data-presentation-controls] {
    display: none;
  }

  body[data-mode="deck"] > [data-presentation-controls] button,
  body[data-mode="embed"] > [data-presentation-controls] button,
  [data-shortcuts-overlay] button {
    background: rgb(0 0 0 / 74%);
    color: white;
    padding: .55rem .7rem;
  }

  body[data-mode="deck"] > .presso-progress,
  body[data-mode="embed"] > .presso-progress,
  body[data-mode="presenter"] .presso-progress {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: .45rem;
    background: rgb(255 255 255 / 18%);
    z-index: 10;

    > span {
      display: block;
      height: 100%;
      width: 0;
      background: var(--presso-accent);
      transition: width .2s ease;
    }
  }

  [data-notes-panel] {
    position: fixed;
    right: 1rem;
    top: 1rem;
    bottom: 1rem;
    width: min(36rem, 35vw);
    overflow: auto;
    background: rgb(0 0 0 / 78%);
    border-left: .25rem solid var(--presso-accent);
    padding: 1rem;
    display: none;
    z-index: 15;
  }

  body[data-notes-visible="true"] [data-notes-panel] {
    display: block;
  }

  [data-shortcuts-overlay] {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: none;
    place-items: center;
    padding: 1rem;
    background: rgb(0 0 0 / 72%);

    > section {
      width: min(34rem, 100%);
      background: #111;
      border: 1px solid rgb(255 255 255 / 18%);
      border-radius: .45rem;
      padding: 1.25rem;
      box-shadow: 0 1rem 4rem rgb(0 0 0 / 45%);
    }

    h2 {
      margin: 0 0 1rem;
      color: var(--presso-accent);
    }

    dl {
      display: grid;
      grid-template-columns: 4rem 1fr;
      gap: .65rem 1rem;
      margin: 0 0 1rem;
    }

    dt,
    dd {
      margin: 0;
    }

    dd {
      color: rgb(255 255 255 / 82%);
    }
  }

  body[data-shortcuts-visible="true"] [data-shortcuts-overlay] {
    display: grid;
  }

  [data-edit-overlay] {
    position: fixed;
    inset: 0;
    z-index: 36;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgb(0 0 0 / 72%);

    &[hidden] {
      display: none;
    }

    > section {
      width: min(96rem, 100%);
      height: min(56rem, calc(100vh - 2rem));
      border: 1px solid rgb(255 255 255 / 18%);
      border-radius: .45rem;
      background: #111;
      box-shadow: 0 1rem 4rem rgb(0 0 0 / 45%);
      overflow: hidden;
    }

    form {
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr) auto;
      gap: .85rem;
      height: 100%;
      padding: 1rem;
    }

    header,
    footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    footer {
      align-items: flex-end;
    }

    h2,
    p {
      margin: 0;
    }

    h3 {
      margin: 0;
      color: var(--presso-accent);
      font-size: 1rem;
    }

    h2 {
      color: var(--presso-accent);
      font-size: 1.35rem;
    }

    [data-edit-source] {
      color: var(--presso-muted);
      font-size: .85rem;
      overflow-wrap: anywhere;
    }

    [data-edit-actions] {
      display: flex;
      align-items: center;
      gap: .5rem;
    }

    [data-edit-tabs] {
      display: flex;
      flex-wrap: wrap;
      gap: .35rem;
      border-bottom: 1px solid rgb(255 255 255 / 12%);
    }

    [data-edit-tabs] button {
      border-radius: .35rem .35rem 0 0;
      border-bottom-color: transparent;
      padding-inline: 1rem;
    }

    [data-edit-tabs] button[aria-selected="true"] {
      background: var(--presso-accent);
      color: #111;
    }

    [data-edit-panels] {
      position: relative;
      display: grid;
      min-height: 0;
    }

    [data-edit-panel] {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: .45rem;
      min-height: 0;
    }

    [data-edit-panel][hidden] {
      display: none;
    }

    [data-edit-panel] > label,
    [data-edit-panel-header] label {
      color: var(--presso-muted);
      font-size: .8rem;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    [data-edit-panel-header] {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    [data-edit-panel="layout"] {
      grid-template-rows: auto minmax(0, 1fr) auto;
    }

    [data-edit-layout-current] {
      color: var(--presso-muted);
      font-size: .9rem;
    }

    [data-edit-layout-grid] {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(7.5rem, 8.75rem));
      grid-auto-rows: max-content;
      align-content: start;
      justify-content: start;
      gap: .6rem;
      min-height: 0;
      overflow: auto;
      padding-right: .25rem;
    }

    [data-edit-layout-grid] button {
      display: grid;
      gap: .42rem;
      align-content: start;
      border: 1px solid rgb(255 255 255 / 14%);
      padding: .5rem;
      text-align: left;
      line-height: 1.15;
    }

    [data-edit-layout-grid] button[aria-checked="true"] {
      border-color: var(--presso-accent);
      box-shadow: inset 0 0 0 2px var(--presso-accent);
    }

    [data-layout-preview] {
      aspect-ratio: 16 / 9;
      display: grid;
      gap: .24rem;
      border: 1px solid rgb(255 255 255 / 16%);
      border-radius: .25rem;
      padding: .42rem;
      background: #242424;
    }

    [data-layout-preview] span {
      display: block;
      border-radius: .12rem;
      background: rgb(255 255 255 / 66%);
    }

    [data-layout-preview="title"] {
      align-content: end;
    }

    [data-layout-preview="title"] span:first-child,
    [data-layout-preview="section"] span:first-child,
    [data-layout-preview="statement"] span:first-child {
      width: 72%;
      height: .45rem;
    }

    [data-layout-preview="title"] span:last-child,
    [data-layout-preview="section"] span:last-child,
    [data-layout-preview="statement"] span:last-child {
      width: 46%;
      height: .24rem;
      opacity: .72;
    }

    [data-layout-preview="section"] {
      position: relative;
      background:
        linear-gradient(rgb(255 255 255 / 12%), rgb(255 255 255 / 12%)) 0 0 / 100% .5rem no-repeat,
        linear-gradient(rgb(255 255 255 / 12%), rgb(255 255 255 / 12%)) 0 100% / 100% .5rem no-repeat,
        #242424;
    }

    [data-layout-preview="section"] span:first-child {
      width: 68%;
      height: .62rem;
      background: rgb(255 255 255 / 78%);
    }

    [data-layout-preview="section"] span:last-child {
      width: 42%;
      height: .28rem;
      background: var(--presso-accent);
      opacity: .9;
    }

    [data-layout-preview="statement"] {
      position: relative;
      background: radial-gradient(circle at 50% 48%, rgb(255 255 255 / 15%), transparent 48%), #242424;
    }

    [data-layout-preview="statement"]::before {
      content: "";
      position: absolute;
      top: 32%;
      left: 18%;
      width: .55rem;
      height: .42rem;
      border-top: .16rem solid var(--presso-accent);
      border-left: .16rem solid var(--presso-accent);
      opacity: .9;
    }

    [data-layout-preview="statement"] span:first-child {
      width: 64%;
      height: .42rem;
      background: rgb(255 255 255 / 78%);
    }

    [data-layout-preview="statement"] span:last-child {
      width: 52%;
      height: .3rem;
      background: rgb(255 255 255 / 58%);
    }

    [data-layout-preview="section"],
    [data-layout-preview="statement"],
    [data-layout-preview="logos"] {
      place-content: center;
      justify-items: center;
    }

    [data-layout-preview="bullets"] {
      align-content: center;
    }

    [data-layout-preview="bullets"] span {
      display: grid;
      grid-template-columns: .34rem minmax(0, 1fr);
      align-items: center;
      gap: .3rem;
      background: transparent;
    }

    [data-layout-preview="bullets"] span::before {
      content: "";
      width: .2rem;
      height: .2rem;
      border-radius: 999px;
      background: rgb(255 255 255 / 72%);
    }

    [data-layout-preview="bullets"] i {
      height: .28rem;
      border-radius: .12rem;
      background: rgb(255 255 255 / 66%);
    }

    [data-layout-preview="bullets"] span:nth-child(1) i {
      width: 78%;
    }

    [data-layout-preview="bullets"] span:nth-child(2) i {
      width: 64%;
    }

    [data-layout-preview="bullets"] span:nth-child(3) i {
      width: 70%;
    }

    [data-layout-preview="code"] span {
      height: .32rem;
    }

    [data-layout-preview="image"],
    [data-layout-preview="blank"] {
      padding: 0;
    }

    [data-layout-preview="image"] {
      position: relative;
      overflow: hidden;
      background: linear-gradient(160deg, #29394b, #4b5960);
    }

    [data-layout-preview="image"] span:nth-child(1) {
      position: absolute;
      right: .55rem;
      top: .55rem;
      width: .9rem;
      height: .9rem;
      border-radius: 999px;
      background: rgb(255 255 255 / 74%);
    }

    [data-layout-preview="image"] span:nth-child(2),
    [data-layout-preview="image"] span:nth-child(3) {
      position: absolute;
      bottom: 0;
      width: 70%;
      height: 52%;
      background: rgb(255 255 255 / 36%);
      clip-path: polygon(0 100%, 50% 0, 100% 100%);
    }

    [data-layout-preview="image"] span:nth-child(2) {
      left: -10%;
    }

    [data-layout-preview="image"] span:nth-child(3) {
      right: -18%;
      opacity: .75;
    }

    [data-layout-preview="image-title"] {
      position: relative;
      align-content: end;
      overflow: hidden;
      background: linear-gradient(160deg, #26394b, #5b6163);
    }

    [data-layout-preview="image-title"]::before {
      content: "";
      position: absolute;
      inset: 45% 0 0;
      background: linear-gradient(transparent, rgb(0 0 0 / 52%));
    }

    [data-layout-preview="image-title"] span:first-child {
      position: relative;
      width: 68%;
      height: .48rem;
    }

    [data-layout-preview="image-title"] span:last-child {
      position: relative;
      width: 42%;
      height: .28rem;
      opacity: .75;
    }

    [data-layout-preview="two-column"] {
      grid-template-columns: 1fr 1fr;
      align-items: center;
    }

    [data-layout-preview="two-column"] span {
      height: 68%;
    }

    [data-layout-preview="logos"] {
      grid-template-columns: repeat(3, 1rem);
    }

    [data-layout-preview="logos"] span {
      width: 1rem;
      height: 1rem;
      border-radius: 999px;
    }

    [data-layout-preview="code"] {
      align-content: start;
      background: #161616;
    }

    [data-layout-preview="code"] span:nth-child(odd) {
      width: 82%;
    }

    [data-layout-preview="code"] span:nth-child(even) {
      width: 58%;
      opacity: .72;
    }

    [data-layout-preview="demo"] {
      grid-template-rows: .35rem 1fr;
    }

    [data-layout-preview="demo"] span:first-child {
      width: 42%;
      height: .35rem;
    }

    [data-layout-preview="demo"] span:last-child {
      width: 100%;
      height: 100%;
      background: transparent;
      border: 1px solid rgb(255 255 255 / 48%);
    }

    [data-layout-preview="blank"] span {
      display: none;
    }

    [data-edit-layout-custom] {
      display: grid;
      gap: .45rem;
    }

    [data-edit-layout-custom] label {
      color: var(--presso-muted);
      font-size: .8rem;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    [data-edit-layout-custom] > div {
      display: flex;
      gap: .5rem;
    }

    textarea,
    input {
      width: 100%;
      min-height: 0;
      border: 1px solid rgb(255 255 255 / 16%);
      border-radius: .35rem;
      padding: .75rem;
      background: rgb(255 255 255 / 8%);
      color: white;
      font: 500 .95rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      text-transform: none;
      letter-spacing: 0;
    }

    textarea {
      resize: none;
    }

    textarea:focus,
    input:focus {
      border-color: var(--presso-accent);
      outline: none;
    }

    [data-edit-help] {
      position: absolute;
      inset: 0 0 0 auto;
      width: min(28rem, 100%);
      border: 1px solid rgb(255 255 255 / 12%);
      border-radius: .35rem;
      padding: .85rem;
      background: #151515;
      box-shadow: -1rem 0 3rem rgb(0 0 0 / 35%);
      color: var(--presso-muted);
      font-size: .88rem;
      line-height: 1.35;
      overflow: auto;
    }

    [data-edit-help][hidden] {
      display: none;
    }

    [data-edit-help] header {
      margin-bottom: .75rem;
    }

    [data-edit-help] dl {
      display: grid;
      grid-template-columns: max-content minmax(0, 1fr);
      gap: .25rem .6rem;
      margin: 0;
    }

    [data-edit-help] dt {
      color: var(--presso-accent);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    }

    [data-edit-help] dd {
      margin: 0;
    }

    [data-edit-error] {
      border-left: .3rem solid #ff6b6b;
      padding: .65rem .75rem;
      background: rgb(255 107 107 / 14%);
      color: white;
      font-size: .95rem;
      line-height: 1.35;
      flex: 1;
    }

    [data-edit-error][hidden] {
      display: none;
    }

    button {
      padding: .7rem .85rem;
      background: rgb(255 255 255 / 12%);
      color: white;
    }

    [data-edit-save] {
      background: var(--presso-accent);
    }

    @media (max-width: 760px) {
      > section {
        height: calc(100vh - 2rem);
      }

      header,
      footer {
        align-items: stretch;
        flex-direction: column;
      }

      [data-edit-actions],
      footer button {
        width: 100%;
      }

      [data-edit-actions] button {
        flex: 1;
      }

      [data-edit-help] {
        width: 100%;
      }

      [data-edit-layout-custom] > div {
        flex-direction: column;
      }
    }
  }

  [data-controller-popover] {
    position: fixed;
    inset: 0;
    z-index: 34;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgb(0 0 0 / 72%);

    &[hidden] {
      display: none;
    }

    > section {
      width: min(28rem, 100%);
      display: grid;
      gap: 1rem;
      border: 1px solid rgb(255 255 255 / 18%);
      border-radius: .45rem;
      padding: 1rem;
      background: #111;
      box-shadow: 0 1rem 4rem rgb(0 0 0 / 45%);
    }

    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    h2,
    p {
      margin: 0;
    }

    h2 {
      color: var(--presso-accent);
      font-size: 1.35rem;
    }

    p,
    a,
    legend {
      font-size: .95rem;
      line-height: 1.35;
    }

    a {
      overflow-wrap: anywhere;
      color: white;
    }

    [data-controller-url-current] {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: .5rem;
    }

    [data-controller-url-open],
    [data-action="controller-url-open"] {
      display: inline-grid;
      width: 2.25rem;
      height: 2.25rem;
      place-items: center;
      border-radius: .3rem;
      background: rgb(255 255 255 / 12%);
      font-size: 1rem;
      line-height: 1;
      text-decoration: none;
    }

    [data-controller-qr] {
      justify-self: center;
      width: min(17rem, 72vw);
      aspect-ratio: 1;
      padding: .75rem;
      background: white;

      svg {
        display: block;
        width: 100%;
        height: 100%;
      }
    }

    [data-controller-url-list] {
      display: grid;
      gap: .45rem;
      min-width: 0;
      margin: 0;
      padding: 0;
      border: 0;

      legend {
        margin-block-end: .15rem;
        color: var(--presso-muted);
      }

      label {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: .55rem;
        min-width: 0;
        padding: .55rem;
        border-radius: .35rem;
        background: rgb(255 255 255 / 8%);
        color: white;
        font-size: .88rem;
      }

      span {
        min-width: 0;
        overflow-wrap: anywhere;
      }
    }

    button {
      padding: .55rem .7rem;
      background: rgb(255 255 255 / 12%);
      color: white;
    }
  }

  [data-fullscreen-prompt] {
    position: fixed;
    inset: 0;
    z-index: 35;
    display: grid;
    align-items: start;
    justify-items: center;
    padding: 1rem;
    background: rgb(0 0 0 / 72%);

    &[hidden] {
      display: none;
    }

    > section {
      width: min(26rem, 100%);
      margin-top: max(1rem, 8vh);
      border: 1px solid rgb(255 255 255 / 18%);
      border-radius: .45rem;
      padding: 1rem;
      background: #111;
      box-shadow: 0 1rem 4rem rgb(0 0 0 / 45%);
    }

    h2 {
      margin: 0 0 .45rem;
      color: var(--presso-accent);
      font-size: 1.35rem;
    }

    p {
      margin: 0 0 1rem;
      color: rgb(255 255 255 / 82%);
      font-size: 1rem;
      line-height: 1.45;
    }

    button {
      margin-right: .5rem;
      padding: .7rem .85rem;
      background: rgb(255 255 255 / 12%);
      color: white;
    }
  }
}

@layer presso.modes {
  body[data-mode="deck"] > .presso-stage,
  body[data-mode="embed"] > .presso-stage {
    position: relative;
    display: block;
    width: var(--presso-scaled-slide-width);
    height: var(--presso-scaled-slide-height);
    min-height: auto;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 1rem 4rem rgb(0 0 0 / 35%);
  }

  body[data-mode="deck"] > .presso-stage > .presso-slide,
  body[data-mode="embed"] > .presso-stage > .presso-slide {
    position: absolute;
    inset: 0 auto auto 0;
    width: var(--presso-slide-width);
    height: var(--presso-slide-height);
    box-shadow: none;
    transform: scale(var(--presso-slide-scale, 1));
    transform-origin: top left;
  }

  html:has(> body[data-mode="presenter"]),
  html:has(> body[data-mode="control"]) {
    font-size: 16px;
  }

  body[data-mode="presenter"],
  body[data-mode="control"] {
    background: var(--presso-bg);
    color: var(--presso-fg);
    font-family: Inter, system-ui, sans-serif;
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0;
    text-transform: none;
  }

  body[data-mode="presenter"] [data-presso-chrome],
  body[data-mode="presenter"] [data-presso-chrome] :where(header, footer, section, article, aside, nav, div, p, h1, h2, h3, h4, ul, ol, li, button, label, input, span, strong, time, svg),
  body[data-mode="control"] [data-presso-chrome],
  body[data-mode="control"] [data-presso-chrome] :where(header, footer, section, article, aside, nav, div, p, h1, h2, h3, h4, ul, ol, li, button, label, input, span, strong, time, svg) {
    box-sizing: border-box;
    max-width: none;
    margin: 0;
    padding: 0;
    color: inherit;
    font-family: inherit;
    font-size: 1rem;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0;
    text-align: initial;
    text-transform: none;
  }

  body[data-mode="presenter"] > main {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(22rem, .6fr);
    gap: 1rem;
    min-height: 100vh;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    padding: 1rem;

    [data-presenter-icons] {
      position: absolute;
      width: 0;
      height: 0;
      overflow: hidden;
    }

    > section:first-child {
      display: grid;
      grid-template-rows: auto .2rem minmax(0, 1fr);
      gap: .75rem;
      background: #111;
      padding: 1rem;
      overflow: hidden;

      > header {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;

        p {
          margin: 0;
          color: var(--presso-muted);
          text-transform: uppercase;
          font-size: .75rem;
          letter-spacing: .08em;
        }

        h1 {
          margin: 0;
          color: white;
          font-size: 1rem;
          font-weight: 600;
        }
      }

      [data-notes-progress] {
        overflow: hidden;
        border-radius: 999px;
        background: rgb(255 255 255 / 10%);

        span {
          display: block;
          width: 0;
          height: 100%;
          border-radius: inherit;
          background: rgb(255 255 255 / 34%);
        }
      }
    }

    > aside {
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr) minmax(0, 1fr);
      gap: 1rem;
      min-height: 0;
      margin: 0;
      padding: 0;

      > section {
        min-width: 0;
        margin: 0;
        padding: 0;
      }

      > section:first-child {
        > div {
          display: grid;
          grid-template-columns: repeat(4, minmax(0, 1fr));
          gap: .5rem;
        }

        article,
        button {
          position: relative;
          display: grid;
          justify-items: start;
          padding: .7rem;
          background: rgb(255 255 255 / 8%);
          color: white;
          font-family: Inter, system-ui, sans-serif;
          text-align: left;
        }

        button:hover,
        button:focus-visible {
          background: rgb(255 255 255 / 14%);
        }

        article > span,
        button > span {
          margin: 0 0 .25rem;
          color: var(--presso-muted);
          font-size: .75rem;
          text-transform: uppercase;
          letter-spacing: .08em;
        }

        strong {
          margin: 0;
          font-size: 1.35rem;
          line-height: 1.1;
          font-weight: 400;
          font-variant-numeric: tabular-nums;
        }

        svg {
          position: absolute;
          top: .55rem;
          right: .55rem;
          width: .85rem;
          height: .85rem;
          color: var(--presso-muted);
        }
      }

      > section:nth-child(2) {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: .55rem;

        > [role="group"] {
          display: flex;
          align-items: center;
          gap: .45rem;
          min-width: 0;
          flex-wrap: wrap;
        }

        [data-tooltip] {
          position: relative;

          &::after {
            content: attr(data-tooltip);
            position: absolute;
            z-index: 4;
            bottom: calc(100% + .4rem);
            left: 50%;
            max-width: 14rem;
            padding: .35rem .5rem;
            border-radius: .25rem;
            background: rgb(0 0 0 / 90%);
            color: white;
            font-size: .75rem;
            line-height: 1.2;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transform: translate(-50%, .2rem);
            transition: opacity .12s ease, transform .12s ease;
          }

          &:hover::after,
          &:focus-visible::after {
            opacity: 1;
            transform: translate(-50%, 0);
          }
        }

        button {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: .45rem;
          padding: .7rem .85rem;
          background: rgb(255 255 255 / 12%);
          color: white;
          font-family: Inter, system-ui, sans-serif;
          min-height: 2.75rem;

          &:disabled {
            background: rgb(255 255 255 / 8%);
            color: var(--presso-muted);
          }

          &[data-action="next"] {
            background: var(--presso-accent);
          }

          &[data-action="controller-open"] {
            color: var(--presso-accent);
          }

          &[data-action="teleprompter-toggle"][aria-pressed="true"] {
            background: var(--presso-accent);
          }

          &[data-icon-only] {
            width: 2.75rem;
            padding: .7rem;

            [data-control-label] {
              position: absolute;
              width: 1px;
              height: 1px;
              overflow: hidden;
              clip-path: inset(50%);
              white-space: nowrap;
            }
          }
        }

        svg {
          width: 1.1em;
          height: 1.1em;
          flex: none;
        }

        > [role="group"]:first-child button {
          flex: 1 1 8rem;
          font-size: 1.05rem;
        }

        > [role="group"]:nth-child(2) {
          display: grid;
          grid-template-columns: repeat(5, minmax(0, 1fr));

          button[data-icon-only] {
            width: auto;
          }
        }

        [data-control-row="teleprompter"] {
          display: grid;
          grid-template-columns: repeat(3, 2.75rem) minmax(5.6rem, 1fr) repeat(2, 2.75rem);
        }

        [data-control-heading] {
          grid-column: 1 / -1;
          color: var(--presso-muted);
          text-transform: uppercase;
          font-size: .72rem;
          letter-spacing: .08em;
        }

        [data-teleprompter-wpm] {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: .4rem;
          padding: .7rem .5rem;
          min-height: 2.75rem;
          color: white;
          font-family: Inter, system-ui, sans-serif;
          font-size: .95rem;
          font-variant-numeric: tabular-nums;
        }

        [data-wake-lock-control] {
          display: inline-flex;
          align-items: center;
          gap: .45rem;
          padding: .7rem .85rem;
          border-radius: .3rem;
          background: rgb(255 255 255 / 12%);
          color: white;
          cursor: pointer;

          &[data-active="true"] {
            background: var(--presso-accent);
          }

          &[data-unavailable="true"] {
            color: var(--presso-muted);
            cursor: not-allowed;
          }
        }
      }

      > section:nth-child(3),
      > section:nth-child(4) {
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr);
        min-height: 0;

        h2,
        h3 {
          margin: 0;
        }

        h2 {
          color: var(--presso-muted);
          text-transform: uppercase;
          font-size: .75rem;
          letter-spacing: .08em;
        }

        h3 {
          margin: .2rem 0 .65rem;
          color: white;
          font-size: 1.1rem;
        }

        > .presso-stage,
        > article {
          background: #2d2d2d;
        }

        > .presso-stage {
          position: relative;
          width: 100%;
          height: 100%;
          min-height: auto;
          padding: 0;
          overflow: hidden;
        }

        > .presso-progress {
          display: none;
        }

        > article {
          position: relative;
          width: 100%;
          height: 100%;
          overflow: hidden;
        }

        .presso-slide {
          position: absolute;
          top: var(--presenter-preview-y, 0);
          left: var(--presenter-preview-x, 0);
          width: var(--presso-slide-width);
          height: var(--presso-slide-height);
          aspect-ratio: var(--presso-slide-ratio);
          box-shadow: none;
          transform: scale(var(--presenter-preview-scale, 1));
          transform-origin: top left;
        }

        [data-next-preview] .presso-slide {
          display: grid;
        }
      }
    }

    article[data-current-notes] {
      color: white;
      font-family: Inter, system-ui, sans-serif;
      font-size: var(--presenter-notes-size, 20px);
      line-height: 1.45;
      letter-spacing: 0;
      text-align: start;
      text-transform: none;
      overflow: auto;
      height: 100%;
      padding-right: .5rem;
      scroll-behavior: auto;

      :where(p, ul, ol, blockquote, pre, h1, h2, h3, h4, h5, h6) {
        max-width: none;
        margin: 0 0 1rem;
        color: inherit;
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
        letter-spacing: 0;
        text-align: start;
        text-transform: none;
      }

      :where(h1, h2, h3, h4, h5, h6) {
        font-weight: 700;
      }

      :where(ul, ol) {
        padding-left: 1.35em;
      }

      :where(li) {
        color: inherit;
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
        letter-spacing: 0;
        text-align: start;
        text-transform: none;
      }

      :where(pre) {
        overflow: auto;
        padding: .85rem;
        background: rgb(255 255 255 / 8%);
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: .92em;
        white-space: pre-wrap;
      }

      :where(code) {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: .95em;
      }

      > :last-child {
        margin-bottom: 0;
      }
    }

    @media (max-width: 900px) {
      grid-template-columns: 1fr;

      > aside {
        grid-template-rows: auto auto minmax(12rem, 1fr) minmax(12rem, 1fr);
      }
    }
  }

  body[data-mode="control"] > main {
    min-height: 100vh;
    display: grid;
    align-items: stretch;
    padding: clamp(1rem, 5vw, 2rem);

    > section {
      width: min(100%, 34rem);
      min-height: min(42rem, calc(100vh - 2rem));
      display: grid;
      grid-template-rows: auto 1fr auto auto;
      gap: 1.5rem;
      margin: auto;
    }

    header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 1rem;
    }

    header p {
      margin: 0;
      color: var(--presso-muted);
      text-transform: uppercase;
      font-size: .75rem;
      letter-spacing: .08em;
    }

    h1 {
      margin: 0;
      color: white;
      font-size: 1rem;
      font-weight: 600;
      text-align: right;
    }

    div {
      display: grid;
      align-content: center;
      gap: 1rem;
      text-align: center;
    }

    div p {
      margin: 0;
      color: var(--presso-muted);
      font-size: clamp(1.8rem, 8vw, 3.5rem);
      font-variant-numeric: tabular-nums;
    }

    h2 {
      margin: 0;
      color: var(--presso-accent);
      font-size: clamp(2rem, 10vw, 4.5rem);
      line-height: 1;
    }

    nav {
      display: grid;
      grid-template-columns: minmax(0, min(100%, 22rem));
      justify-content: center;
      gap: .75rem;
    }

    footer {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: .5rem;
    }

    nav button {
      min-height: 4.5rem;
      padding: 1rem;
      background: rgb(255 255 255 / 12%);
      color: white;
      font-family: Inter, system-ui, sans-serif;
      font-size: clamp(1.35rem, 5vw, 2rem);
      font-weight: 700;

      &[data-action="next"] {
        min-height: 8rem;
        background: var(--presso-accent);
        font-size: clamp(2rem, 9vw, 3.4rem);
      }
    }

    footer button {
      min-height: 0;
      padding: .7rem .9rem;
      background: rgb(255 255 255 / 12%);
      color: white;
      font-family: Inter, system-ui, sans-serif;
      font-size: 1rem;
      font-weight: 600;

      &[data-action="fullscreen"] {
        color: var(--presso-accent);
      }

      &:disabled {
        color: var(--presso-muted);
      }
    }

    [data-wake-lock-control] {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      padding: .7rem .9rem;
      border-radius: .3rem;
      background: rgb(255 255 255 / 12%);
      color: white;
      font-family: Inter, system-ui, sans-serif;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;

      &[data-active="true"] {
        background: var(--presso-accent);
      }

      &[data-unavailable="true"] {
        color: var(--presso-muted);
        cursor: not-allowed;
      }
    }

    @media (max-width: 520px) {
      > section {
        min-height: calc(100vh - 2rem);
      }

      nav button[data-action="next"] {
        min-height: 7.5rem;
      }
    }
  }

  body[data-mode="notes"] > main,
  body[data-mode="transcript"] > main {
    max-width: 72rem;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    line-height: 1.55;
  }
}

@layer presso.print {
  body[data-mode^="print-"] {
    background: white;
    color: #111;
    width: var(--presso-slide-width);

    .presso-stage {
      display: block;
      padding: 0;
    }

    .presso-slide {
      display: grid;
      width: var(--presso-slide-width);
      height: var(--presso-slide-height);
      box-shadow: none;
      color: var(--presso-fg);
      background-color: #2d2d2d;
    }
  }

  body[data-mode="print-slides"] .presso-slide,
  .presso-print-slide-page {
    page-break-after: always;
    break-after: page;
  }

  .presso-print-slide-page,
  .presso-print-handout-page,
  .presso-print-notes-page {
    width: var(--presso-slide-width);
    min-height: var(--presso-slide-height);
    background: white;
    color: #111;
    page-break-after: always;
    break-after: page;
  }

  .presso-print-slide-page {
    height: var(--presso-slide-height);

    .presso-slide {
      page-break-after: auto;
      break-after: auto;
    }
  }

  .presso-print-notes-page {
    display: grid;
    align-content: start;
    gap: 1.25rem;
    padding: 4rem;

    > header {
      border-bottom: 2px solid #ddd;
      padding-bottom: 1rem;

      > p {
        margin: 0 0 .4rem;
        color: #666;
        font-size: 1rem;
        text-transform: uppercase;
        letter-spacing: .08em;
      }

      > h2 {
        margin: 0;
        color: #111;
        font-size: 2.5rem;
        line-height: 1.08;
      }
    }
  }

  .presso-print-notes {
    font-size: 1.45rem;
    line-height: 1.45;

    > :first-child {
      margin-top: 0;
    }

    > :last-child {
      margin-bottom: 0;
    }

    pre {
      white-space: pre-wrap;
    }
  }

  .presso-print-notes-empty {
    color: #777;
    font-style: italic;
  }

  .presso-print-handout-page {
    --presso-handout-scale: .6;
    display: grid;
    grid-template-columns: minmax(0, 1.72fr) minmax(20rem, .95fr);
    gap: 1rem;
    align-items: start;
    padding: 1rem;
  }

  .presso-print-handout-slide {
    display: grid;
    place-items: center;
    min-width: 0;
    height: calc(var(--presso-slide-height) - 2rem);
  }

  .presso-print-handout-slide-scale {
    width: calc(var(--presso-slide-width) * var(--presso-handout-scale));
    height: calc(var(--presso-slide-height) * var(--presso-handout-scale));
    overflow: hidden;
    outline: 1px solid #ddd;
    background: #2d2d2d;

    .presso-slide {
      transform: scale(var(--presso-handout-scale));
      transform-origin: top left;
      page-break-after: auto;
      break-after: auto;
    }
  }

  .presso-print-handout-page .presso-print-notes-page {
    width: auto;
    min-height: calc(var(--presso-slide-height) - 2rem);
    border: 2px solid #ddd;
    border-left: .45rem solid var(--presso-accent);
    border-radius: .35rem;
    padding: 1rem 1.1rem;
    page-break-after: auto;
    break-after: auto;

    > header {
      padding-bottom: .65rem;

      > p {
        font-size: .68rem;
      }

      > h2 {
        font-size: 1.25rem;
        line-height: 1.12;
      }
    }

    .presso-print-notes {
      font-size: .82rem;
      line-height: 1.32;

      p,
      ul,
      ol {
        margin-block: .55rem;
      }

      li + li {
        margin-top: .25rem;
      }
    }
  }

  @media print {
    .presso-progress,
    body > nav,
    [data-shortcuts-overlay] {
      display: none !important;
    }
  }
}