@lincyaw/viewer 0.0.0-stage → 1.0.0-rc.1

package/src/client/style.css

@@ -0,0 +1,1058 @@
+@import './views/controls.css';
+
+:root {
+  --pm-c-bg: var(--pm-color-bg);
+  --pm-c-bg-soft: var(--pm-color-sunk);
+  --pm-c-text: var(--pm-color-ink);
+  --pm-c-text-2: var(--pm-color-muted);
+  --pm-c-border: var(--pm-color-line);
+  --pm-c-brand: var(--pm-color-accent);
+  --pm-c-danger: var(--pm-color-danger);
+  --pm-c-warning: var(--pm-color-warn);
+  --pm-code-bg: var(--pm-color-code);
+  --pm-line-highlight: var(--pm-color-selected);
+  --pm-board-bg: color-mix(in srgb, var(--pm-c-brand) 4%, var(--pm-c-bg));
+  --pm-board-border: var(--pm-c-border);
+  --pm-scroll-shadow: color-mix(in srgb, var(--pm-color-shadow) 18%, transparent);
+}
+
+.dark {
+  --pm-scroll-shadow: color-mix(in srgb, var(--pm-color-sheen) 16%, transparent);
+}
+
+.pm-hidden,
+[data-pm-click='hidden'] {
+  visibility: hidden;
+  opacity: 0;
+}
+
+.pm-block,
+.pm-block li,
+[data-pm-click] {
+  transition: opacity var(--pm-duration-slow) var(--pm-ease);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pm-block,
+  .pm-block li,
+  [data-pm-click] {
+    transition: none;
+  }
+}
+
+.pm-v-click {
+  display: contents;
+}
+
+.pm-section {
+  position: relative;
+  min-width: 0;
+  margin-top: 2.5rem;
+}
+
+.pm-section:first-child {
+  margin-top: 0;
+}
+
+.pm-section__body,
+.pm-stage,
+.pm-track,
+.pm-block {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.pm-block {
+  overflow-x: auto;
+}
+
+.pm-block :where(img, video, iframe, canvas, svg) {
+  max-width: 100%;
+  height: auto;
+}
+
+.pm-section__source {
+  margin: 0.25rem 0 0;
+  font-size: 0.8125em;
+}
+
+.pm-section__source button {
+  padding: 0;
+  color: var(--pm-c-text-2);
+  text-decoration: underline dotted;
+  cursor: pointer;
+}
+
+.pm-section__source button:hover {
+  color: var(--pm-c-brand);
+}
+
+.pm-diagnostics {
+  margin: 0.5rem 0;
+  padding: 0.5rem 0.75rem 0.5rem 1.75rem;
+  border: var(--pm-size-hairline) solid var(--pm-c-danger);
+  border-radius: 0.25rem;
+  color: var(--pm-c-danger);
+  font-size: 0.875em;
+}
+
+.pm-board {
+  margin: 1.25rem 0;
+  padding: 0.75rem 1.25rem;
+  border: var(--pm-size-hairline) solid var(--pm-board-border);
+  border-left: calc(var(--pm-size-stroke) * 2) solid var(--pm-c-brand);
+  border-radius: 0.5rem;
+  background: var(--pm-board-bg);
+}
+
+.pm-board > :first-child > :first-child {
+  margin-top: 0;
+}
+
+.pm-block--overlay {
+  overflow: visible;
+}
+
+.pm-board > :last-child > :last-child {
+  margin-bottom: 0;
+}
+
+.pm-board .pm-block strong {
+  font-weight: 700;
+  color: var(--pm-c-text);
+}
+
+.pm-section--scrolly {
+  display: grid;
+  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
+  column-gap: 1.5rem;
+  align-items: start;
+}
+
+.pm-section--scrolly > :not(.pm-stage, .pm-track) {
+  grid-column: 1 / -1;
+}
+
+.pm-section--scrolly > .pm-stage {
+  position: sticky;
+  top: calc(var(--pm-sticky-top, 0rem) + 1rem);
+  margin: 0;
+  padding: 0.75rem;
+  container-type: inline-size;
+}
+
+.pm-section--scrolly > .pm-track {
+  padding-bottom: 30vh;
+}
+
+.pm-step {
+  min-height: 45vh;
+  padding-left: 0.75rem;
+  border-left: var(--pm-size-stroke) solid var(--pm-c-border);
+}
+
+.pm-step--current {
+  border-left-color: var(--pm-c-brand);
+}
+
+.pm-step--bare {
+  min-height: 25vh;
+}
+
+.pm-section--scrolly > .pm-track .pm-block--narration.pm-hidden {
+  visibility: visible;
+  opacity: 0.35;
+}
+
+@media (max-width: 767px) {
+  .pm-section--scrolly {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .pm-section--scrolly > .pm-stage {
+    top: var(--pm-sticky-top, 0rem);
+    z-index: 1;
+    max-height: 50vh;
+    overflow-y: auto;
+  }
+}
+
+.pm-code-block {
+  margin: 1rem 0;
+}
+
+.pm-code-origin {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: baseline;
+  font-size: 0.8em;
+  color: var(--pm-c-text-2);
+}
+
+.pm-code-origin__file,
+.pm-code-origin__commit,
+.pm-code-origin__variant {
+  font-family: var(--pm-font-mono);
+  overflow-wrap: anywhere;
+}
+
+.pm-code-origin__variant[data-active] {
+  font-weight: 700;
+  text-decoration: underline;
+}
+
+.pm-code-origin__badge {
+  padding: 0 0.4em;
+  border-radius: 0.25rem;
+  border: var(--pm-size-hairline) solid currentColor;
+  color: var(--pm-c-warning);
+}
+
+.pm-code-origin__badge[data-drift='synced'] {
+  color: var(--pm-c-text-2);
+}
+
+.pm-code-block__run {
+  display: flex;
+  gap: var(--pm-space-1);
+  align-items: center;
+}
+
+.pm-code-block__hint {
+  color: var(--pm-c-danger);
+}
+
+.pm-code-block__label {
+  margin: 0.5rem 0 0;
+  font-size: 0.8em;
+  color: var(--pm-c-text-2);
+}
+
+.pm-code pre {
+  --pm-code-pad: 1rem;
+  margin: 0.5rem 0;
+  padding: 0.75rem var(--pm-code-pad);
+  overflow-x: auto;
+  border-radius: 0.375rem;
+  background:
+    linear-gradient(to right, var(--pm-code-bg) 40%, transparent) left / 1.5rem 100% no-repeat local,
+    linear-gradient(to left, var(--pm-code-bg) 40%, transparent) right / 1.5rem 100% no-repeat local,
+    radial-gradient(farthest-side at 0 50%, var(--pm-scroll-shadow), transparent) left / 0.75rem 100% no-repeat scroll,
+    radial-gradient(farthest-side at 100% 50%, var(--pm-scroll-shadow), transparent) right / 0.75rem 100% no-repeat scroll,
+    var(--pm-code-bg);
+  font-size: 0.875em;
+  line-height: 1.6;
+}
+
+.pm-stage .pm-code pre {
+  --pm-code-pad: 0.75rem;
+  font-size: clamp(0.65rem, (100cqi - 2 * var(--pm-code-pad) - var(--pm-size-stroke)) / (var(--pm-code-columns, 40) * 0.62), 0.875rem);
+}
+
+.pm-view table {
+  display: block;
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.pm-view :is(th, td) code {
+  white-space: pre;
+}
+
+.pm-view th {
+  white-space: nowrap;
+}
+
+.pm-stage table {
+  font-size: 0.875em;
+}
+
+.pm-stage :is(th, td) {
+  white-space: nowrap;
+}
+
+.pm-code code {
+  font-family: var(--pm-font-mono);
+}
+
+.pm-code .shiki span {
+  color: var(--shiki-light);
+}
+
+.dark .pm-code .shiki span {
+  color: var(--shiki-dark);
+}
+
+.pm-code .line.highlighted {
+  display: inline-block;
+  width: calc(100% + 2 * var(--pm-code-pad));
+  margin: 0 calc(-1 * var(--pm-code-pad));
+  padding: 0 var(--pm-code-pad);
+  background: var(--pm-line-highlight);
+}
+
+.pm-code--highlight .line:not(.highlighted) {
+  opacity: 0.45;
+}
+
+.pm-outputs {
+  margin: 0.25rem 0 1rem;
+}
+
+.pm-output pre {
+  margin: 0.25rem 0;
+  padding: 0.5rem 0.75rem;
+  overflow-x: auto;
+  border-left: var(--pm-size-rule) solid var(--pm-c-border);
+  background: var(--pm-c-bg-soft);
+  font-size: 0.8125em;
+}
+
+.pm-output__stderr,
+.pm-output--failed .pm-output__stdout {
+  border-left-color: var(--pm-c-danger) !important;
+}
+
+.pm-output__note {
+  margin: 0;
+  font-size: 0.75em;
+  color: var(--pm-c-text-2);
+}
+
+.pm-output__stderr,
+.pm-output__error {
+  border-left-color: var(--pm-c-danger) !important;
+}
+
+.pm-output__display {
+  margin: 0.25rem 0;
+  overflow-x: auto;
+}
+
+.pm-output__display img {
+  max-width: 100%;
+}
+
+.pm-outputs--prose,
+.pm-output--prose .pm-output__display {
+  margin: 0;
+}
+
+.pm-math--display {
+  overflow-x: auto;
+  margin: 1rem 0;
+  text-align: center;
+}
+
+.pm-mermaid {
+  margin: 1rem 0;
+  overflow-x: auto;
+  text-align: center;
+}
+
+.pm-mermaid svg {
+  max-width: none;
+}
+
+.pm-admonition {
+  margin: 1rem 0;
+  padding: 0.25rem 1rem;
+  border-left: calc(var(--pm-size-stroke) * 2) solid var(--pm-c-brand);
+  border-radius: 0.25rem;
+  background: var(--pm-c-bg-soft);
+}
+
+.pm-admonition--warning,
+.pm-admonition--caution,
+.pm-admonition--danger,
+.pm-admonition--error {
+  border-left-color: var(--pm-c-danger);
+}
+
+.pm-admonition__title {
+  font-weight: 600;
+}
+
+.pm-block kbd {
+  padding: 0.05em 0.35em;
+  border: var(--pm-size-hairline) solid var(--pm-c-border);
+  border-bottom-width: var(--pm-size-stroke);
+  border-radius: 0.25rem;
+  background: var(--pm-c-bg-soft);
+  font-family: var(--pm-font-mono);
+  font-size: 0.875em;
+}
+
+.pm-block dt {
+  font-weight: 600;
+}
+
+.pm-block dd {
+  margin: 0 0 0.5rem 1.5rem;
+}
+
+.pm-block details {
+  margin: 1rem 0;
+  padding: 0.25rem 1rem;
+  border: var(--pm-size-hairline) solid var(--pm-c-border);
+  border-radius: 0.25rem;
+}
+
+.pm-block summary {
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.pm-grid {
+  --pm-grid-columns: var(--pm-grid-xs, 1);
+  --pm-span-xs: initial;
+  --pm-span-sm: initial;
+  --pm-span-md: initial;
+  --pm-span-lg: initial;
+  display: grid;
+  grid-template-columns: repeat(var(--pm-grid-columns), minmax(0, 1fr));
+  gap: 1rem;
+  margin: 1rem 0;
+}
+
+.pm-grid > * {
+  --pm-span: var(--pm-span-xs, 1);
+  grid-column: span var(--pm-span);
+  min-width: 0;
+}
+
+@media (min-width: 576px) {
+  .pm-grid {
+    --pm-grid-columns: var(--pm-grid-sm, 1);
+  }
+
+  .pm-grid > * {
+    --pm-span: var(--pm-span-sm, 1);
+  }
+}
+
+@media (min-width: 768px) {
+  .pm-grid {
+    --pm-grid-columns: var(--pm-grid-md, 1);
+  }
+
+  .pm-grid > * {
+    --pm-span: var(--pm-span-md, 1);
+  }
+}
+
+@media (min-width: 992px) {
+  .pm-grid {
+    --pm-grid-columns: var(--pm-grid-lg, 1);
+  }
+
+  .pm-grid > * {
+    --pm-span: var(--pm-span-lg, 1);
+  }
+}
+
+.pm-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  margin: 1rem 0;
+  border: var(--pm-size-hairline) solid var(--pm-c-border);
+  border-radius: 0.5rem;
+  background: var(--pm-c-bg);
+  overflow: hidden;
+}
+
+.pm-grid > .pm-card {
+  margin: 0;
+}
+
+.pm-card--link:hover {
+  border-color: var(--pm-c-brand);
+}
+
+.pm-card__header,
+.pm-card__footer {
+  padding: 0 1rem;
+  background: var(--pm-c-bg-soft);
+}
+
+.pm-card__header {
+  border-bottom: var(--pm-size-hairline) solid var(--pm-c-border);
+}
+
+.pm-card__footer {
+  margin-top: auto;
+  border-top: var(--pm-size-hairline) solid var(--pm-c-border);
+}
+
+.pm-card > .pm-card__title {
+  margin: 0.75rem 1rem 0;
+  font-weight: 600;
+}
+
+.pm-card__body {
+  padding: 0 1rem;
+}
+
+.pm-card__header > :first-child,
+.pm-card__body > :first-child,
+.pm-card__footer > :first-child {
+  margin-top: 0.75rem;
+}
+
+.pm-card__header > :last-child,
+.pm-card__body > :last-child,
+.pm-card__footer > :last-child {
+  margin-bottom: 0.75rem;
+}
+
+.pm-card.pm-card--link > .pm-card__title > a[href]::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  width: auto;
+  height: auto;
+  margin: 0;
+  background: none;
+  mask-image: none;
+}
+
+.pm-card--link :is(.pm-card__header, .pm-card__body, .pm-card__footer) a {
+  position: relative;
+  z-index: 1;
+}
+
+.pm-block .pm-button {
+  display: inline-block;
+  padding: 0.3em 1em;
+  border: var(--pm-size-hairline) solid var(--pm-c-brand);
+  border-radius: var(--pm-radius-pill);
+  color: var(--pm-c-brand);
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.pm-block a.pm-button:hover {
+  background: var(--pm-c-brand);
+  color: var(--pm-c-bg);
+}
+
+.pm-tabs {
+  margin: 1rem 0;
+}
+
+.pm-tabs__list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  border-bottom: var(--pm-size-hairline) solid var(--pm-c-border);
+}
+
+.pm-tabs__tab {
+  margin-bottom: -1px;
+  padding: 0.4rem 0.9rem;
+  border-bottom: var(--pm-size-stroke) solid transparent;
+  color: var(--pm-c-text-2);
+  cursor: pointer;
+}
+
+.pm-tabs__tab:hover {
+  color: var(--pm-c-text);
+}
+
+.pm-tabs__tab[aria-selected='true'] {
+  border-bottom-color: var(--pm-c-brand);
+  color: var(--pm-c-brand);
+  font-weight: 600;
+}
+
+.pm-tabs__panel {
+  padding-top: 0.25rem;
+}
+
+.pm-footnote {
+  font-size: 0.875em;
+  color: var(--pm-c-text-2);
+}
+
+.pm-footnote-ref a::before {
+  content: '[' attr(data-label) ']';
+}
+
+.pm-footnote > sup::before {
+  content: attr(data-label);
+}
+
+.pm-component-missing {
+  padding: 0.5rem 0.75rem;
+  border: var(--pm-size-hairline) dashed var(--pm-c-border);
+  border-radius: 0.25rem;
+  color: var(--pm-c-text-2);
+  font-size: 0.875em;
+}
+
+.pm-boundary-error {
+  padding: 0.5rem 0.75rem;
+  border: var(--pm-size-hairline) dashed var(--pm-c-danger);
+  border-radius: 0.25rem;
+  color: var(--pm-c-danger);
+  font-size: 0.85em;
+}
+
+html.pm-presenting {
+  overflow: hidden;
+}
+
+.pm-present,
+.pm-presenter {
+  position: fixed;
+  inset: 0;
+  z-index: var(--pm-z-overlay-view);
+  display: flex;
+  flex-direction: column;
+  background: var(--pm-c-bg);
+  color: var(--pm-c-text);
+}
+
+.pm-present:focus {
+  outline: none;
+}
+
+:where(.pm-present, .pm-presenter) :where(ul) {
+  padding-left: 1.5em;
+  list-style: disc;
+}
+
+:where(.pm-present, .pm-presenter) :where(ol) {
+  padding-left: 1.5em;
+  list-style: decimal;
+}
+
+:where(.pm-present, .pm-presenter) :where(p, ul, ol, pre) {
+  margin: 0.5em 0;
+}
+
+.pm-present__slide {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  padding: 2vh 2vw;
+}
+
+/* A slide: its canvas, scaled as a whole to its box, and the Book layout on it. */
+
+.pm-slide-fit {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.pm-slide-fit__canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform-origin: 0 0;
+  box-shadow: var(--pm-shadow-page);
+}
+
+.pm-slide {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  padding: 1.9em 3.1em 2.6em;
+  overflow: hidden;
+  background: var(--pm-color-surface);
+  color: var(--pm-color-ink);
+  font-family: var(--pm-font-sans);
+  font-size: var(--pm-slide-text);
+  line-height: 1.6;
+}
+
+.pm-slide :is(ul, ol) {
+  margin: 0.67em 0;
+  padding-inline-start: 1.3em;
+}
+
+.pm-slide li::marker {
+  color: var(--pm-color-accent);
+}
+
+.pm-slide :is(table, th, td) {
+  font-size: 0.95em;
+}
+
+.pm-slide :is(th, td) {
+  padding: 0.3em 0.6em;
+}
+
+.pm-slide__chapter {
+  display: flex;
+  align-items: center;
+  gap: 0.67em;
+  margin: 0 0 0.55em;
+  color: var(--pm-color-accent);
+  font-size: 0.67em;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  line-height: 1.4;
+}
+
+.pm-slide__chapter::after {
+  content: '';
+  flex: 1;
+  height: var(--pm-size-hairline);
+  background: var(--pm-color-line);
+}
+
+.pm-slide__body {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.pm-slide__content {
+  transform-origin: top left;
+}
+
+.pm-slide__content > .pm-block--markdown :is(p, ul, ol, blockquote) {
+  font-family: var(--pm-font-serif);
+}
+
+/* Over the reading styles of the document's headings (`.pm-document h2`). */
+.pm-slide .pm-slide__title {
+  margin: 0 0 0.45em;
+  padding: 0;
+  border: 0;
+  font-family: var(--pm-font-serif);
+  font-size: 2.2em;
+  font-weight: 600;
+  line-height: 1.15;
+  letter-spacing: -0.005em;
+}
+
+.pm-slide--cover {
+  justify-content: flex-end;
+  padding-bottom: 5.3em;
+}
+
+.pm-slide--cover .pm-slide__title {
+  max-width: 85%;
+  font-size: 2.67em;
+  line-height: 1.12;
+}
+
+.pm-slide--cover .pm-slide__title::before {
+  content: '';
+  display: block;
+  width: 1em;
+  height: 0.07em;
+  margin-bottom: 0.45em;
+  border-radius: var(--pm-radius-chip);
+  background: var(--pm-color-accent);
+}
+
+.pm-slide--cover .pm-slide__content > .pm-block :is(p, ul, ol) {
+  max-width: 80%;
+  color: var(--pm-color-muted);
+  font-size: 1.1em;
+}
+
+.pm-slide--center .pm-slide__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100%;
+  text-align: center;
+}
+
+.pm-slide--full {
+  padding: 0;
+}
+
+/* A full slide is all content (a scene, a picture); its title stays for assistive technology only. */
+.pm-slide--full .pm-slide__title {
+  position: absolute;
+  width: var(--pm-size-hairline);
+  height: var(--pm-size-hairline);
+  margin: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+.pm-slide__footer {
+  position: absolute;
+  right: 3.1em;
+  bottom: 0.9em;
+  left: 3.1em;
+  display: flex;
+  align-items: center;
+  gap: 0.67em;
+  color: var(--pm-color-muted);
+  font-size: 0.61em;
+  line-height: 1.2;
+}
+
+.pm-slide__deck {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pm-slide__steps {
+  display: flex;
+  flex: none;
+  gap: 0.45em;
+  width: min(calc(var(--pm-slide-steps, 1) * 2em - 0.45em), 40%);
+  margin-left: auto;
+}
+
+.pm-slide__steps > span {
+  flex: 1;
+  min-width: 0.2em;
+  height: 0.27em;
+  border-radius: 0.2em;
+  background: var(--pm-color-line-strong);
+}
+
+.pm-slide__steps > span[data-done] {
+  background: var(--pm-color-accent);
+}
+
+.pm-slide__page {
+  margin-left: auto;
+  font-family: var(--pm-font-mono);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.pm-slide__steps + .pm-slide__page {
+  margin-left: 0;
+}
+
+/* A runnable code block's code, edited before it runs (CodeMirror). */
+.pm-code-editor {
+  margin: 0.5em 0;
+  border: var(--pm-size-hairline) solid var(--pm-color-line-strong);
+  border-radius: var(--pm-radius-control);
+  background: var(--pm-color-code);
+  font-size: 0.875em;
+}
+
+.pm-code-editor .cm-editor {
+  border-radius: inherit;
+}
+
+.pm-code-editor .cm-editor.cm-focused {
+  outline: var(--pm-size-stroke) solid var(--pm-color-accent);
+  outline-offset: var(--pm-space-px);
+}
+
+.pm-code-editor .cm-scroller {
+  padding: 0.5em 0;
+  font-family: var(--pm-font-mono);
+  line-height: 1.6;
+}
+
+.pm-code-editor .cm-content {
+  caret-color: var(--pm-color-ink);
+  color: var(--pm-color-ink);
+}
+
+.pm-code-editor .cm-cursor {
+  border-left-color: var(--pm-color-ink);
+}
+
+/* Plugins' layers on a slide (drawings): over its content, on the canvas's coordinates; a layer takes the pointer itself. */
+.pm-slide__layers {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+/* Every slide one after the other at the canvas's size, for printing. */
+
+.pm-slides-print__page {
+  position: relative;
+  overflow: hidden;
+  break-after: page;
+}
+
+@media print {
+  @page {
+    margin: 0;
+  }
+
+  html,
+  body {
+    margin: 0;
+  }
+}
+
+.pm-overview {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  overflow: auto;
+  padding: 1.5rem;
+  background: var(--pm-c-bg);
+  font-size: 1rem;
+}
+
+/* The overview is chrome inside a document: its own list rules outrank the document's list styling. */
+.pm-overview .pm-overview__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
+  gap: 0.75rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.pm-overview__item {
+  display: flex;
+  gap: 0.5rem;
+  align-items: baseline;
+  width: 100%;
+  min-height: 4.5rem;
+  padding: 0.75rem;
+  border: var(--pm-size-hairline) solid var(--pm-c-border);
+  border-radius: 0.375rem;
+  background: var(--pm-c-bg-soft);
+  color: var(--pm-c-text);
+  text-align: left;
+  cursor: pointer;
+}
+
+.pm-overview__item[aria-current='true'] {
+  border-color: var(--pm-c-brand);
+  box-shadow: inset 0 0 0 var(--pm-size-hairline) var(--pm-c-brand);
+}
+
+.pm-overview__item:focus-visible {
+  outline: var(--pm-size-stroke) solid var(--pm-c-brand);
+  outline-offset: var(--pm-size-stroke);
+}
+
+.pm-overview__index {
+  color: var(--pm-c-text-2);
+  font-variant-numeric: tabular-nums;
+}
+
+.pm-present .pm-present__title,
+.pm-presenter .pm-present__title {
+  margin: 0 0 1em;
+  font-size: 1.6em;
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.pm-present__bar,
+.pm-presenter__bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  border-top: var(--pm-size-hairline) solid var(--pm-c-border);
+  font-size: 0.875rem;
+  color: var(--pm-c-text-2);
+}
+
+.pm-present__counter {
+  margin-right: auto;
+}
+
+.pm-present__button {
+  padding: 0.25rem 0.75rem;
+  border: var(--pm-size-hairline) solid var(--pm-c-border);
+  border-radius: 0.25rem;
+  background: var(--pm-c-bg-soft);
+  color: var(--pm-c-text);
+  cursor: pointer;
+}
+
+.pm-presenter__bar {
+  border-top: none;
+  border-bottom: var(--pm-size-hairline) solid var(--pm-c-border);
+}
+
+.pm-presenter__title {
+  color: var(--pm-c-text);
+}
+
+.pm-presenter__timer {
+  margin-left: auto;
+  font-family: var(--pm-font-mono);
+  font-size: 1.25rem;
+  color: var(--pm-c-text);
+}
+
+.pm-presenter__main {
+  flex: 1;
+  display: grid;
+  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
+  gap: 1rem;
+  min-height: 0;
+  padding: 1rem;
+}
+
+.pm-presenter__slide,
+.pm-presenter__side {
+  overflow: auto;
+  min-height: 0;
+}
+
+.pm-presenter__slide {
+  min-height: 0;
+}
+
+.pm-presenter__upcoming {
+  aspect-ratio: 16 / 9;
+  margin-bottom: 0.5rem;
+}
+
+.pm-presenter .pm-presenter__label {
+  margin: 0 0 0.5rem;
+  font-size: 0.875rem;
+  color: var(--pm-c-text-2);
+}
+
+.pm-presenter__note {
+  padding: 0 0.5rem;
+  border-left: var(--pm-size-rule) solid transparent;
+  opacity: 0.5;
+}
+
+.pm-presenter__note.pm-current {
+  border-left-color: var(--pm-c-brand);
+  opacity: 1;
+}
+
+.pm-presenter__next {
+  white-space: pre-line;
+}
+
+@media (max-width: 767px) {
+  .pm-presenter__main {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+.pm-role-mark {
+  margin: 0 0.15em;
+  padding: 0 0.2em;
+  border-radius: var(--pm-radius-chip);
+  font-size: 0.85em;
+  color: var(--pm-color-muted);
+  background: var(--pm-color-sunk);
+}
+
+.pm-step-range.pm-hidden { display: none !important; }