/* obelisk-web — interaction styles. Load after obelisk-lite's obelisk.css. */

/* The room a theorem's name takes.
 *
 * The label is a float in the margin, so it does not make its own environment any
 * taller: a definition whose name wraps over four lines hangs out of its bar and
 * down into the environment below it. index.js measures the label, and this gives
 * the bar the floor it needs. It is a no-op wherever the body is already taller. */
.obelisk .thm {
  min-height: var(--ob-label-h, 0px);
}

/* Foldable proofs.
 *
 * Folded is the default whenever the `js` class is present, which the package
 * sets from an inline snippet before first paint — so nothing flashes open, and
 * a reader without JavaScript (no `js` class) still gets every proof expanded.
 *
 * The body clips its own overflow, and has to do it without becoming a block
 * formatting context: the head floats so the text runs on from `Proof.` the way
 * the paged version sets it, and a new formatting context would be placed beside
 * the float instead of wrapping around it. `clip-path` is the one clip that
 * leaves layout alone like that — `overflow: hidden` would break the run-in, and
 * clipping a single axis with `overflow: clip` is not agreed on between browsers.
 * It is also safe sideways: the region is exactly as tall as the box and reaches
 * far past it horizontally, so notes hung out into the margin survive.
 *
 * The height is animated in pixels by index.js, because a `height: auto` that
 * some browsers interpolate and others snap is a fold that animates for some
 * readers only. These rules still say what each state looks like; index.js hands
 * the body back to the stylesheet once the animation is over. */

.js .proof__body {
  height: 0;
  clip-path: polygon(-100vw 0, 100vw 0, 100vw 100%, -100vw 100%);
  visibility: hidden;
  transition: height 220ms ease, visibility 0s linear 220ms;
}

.js .proof.is-open .proof__body {
  height: auto;
  visibility: visible;
  transition: height 220ms ease, visibility 0s;
}

/* The whole “Proof.” line is the control, so the button has to read as text. The
 * reset lives in the package (it applies with or without JavaScript); what
 * belongs here is the affordance: a right angle drawn in the rule's own colour
 * and centered on it, as a heading marker is. Folded it points at the text it
 * opens; open it points down, at the text it folds away.
 *
 * Its box is a square turned 45 degrees, so its own corners are where the rule
 * meets its arms, and the page colour behind it covers the rule over exactly that
 * span — the line stops, becomes the angle, and picks up again below. The side is
 * half a grid step, which makes the angle about as tall as the text. */

.js .proof__head {
  cursor: pointer;
}

.js .proof__head::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: calc(var(--ob-pitch) * 0.5em);
  height: calc(var(--ob-pitch) * 0.5em);
  border-top: var(--ob-rule) solid var(--ob-line);
  border-right: var(--ob-rule) solid var(--ob-line);
  background: var(--ob-page);
  transform: translate(-50%, -50%) rotate(45deg);
  transition: transform 220ms ease;
}

.js .proof.is-open .proof__head::after {
  transform: translate(-50%, -50%) rotate(135deg);
}

.proof__head:focus-visible {
  outline: 2px solid var(--ob-strong);
  outline-offset: 4px;
}

/* The margin rule, made graspable.
 *
 * The rule itself is a pseudo-element of the wrapper, which cannot be clicked or
 * dragged. This is a real element lying exactly over it: a comfortable target, its
 * own hairline so that hover and drag can show themselves, and the cursor of a
 * handle.
 *
 * It is put below the wrapper's content rather than above it. The margin is full of
 * things that are written over the line — a sidenote reaching up to it, a theorem's
 * label and its bar crossing it, a heading's marker centered on it — and a press on
 * one of those has to reach the text. A place under them, in the wrapper's own
 * stacking order, makes the handle transparent exactly where something is written,
 * and leaves it to be taken hold of wherever the margin is empty. The element
 * itself paints nothing; the hairline below is what the reader sees. */

.obelisk-rule {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--ob-gutter) + var(--ob-margin-e) - var(--ob-half-gutter));
  width: 0.9rem;
  transform: translateX(-50%);
  z-index: -1;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: grab;
  touch-action: none;
}

/* The line, on top of the one the wrapper draws. */
.obelisk-rule::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 50%;
  width: var(--ob-rule);
  transform: translateX(-50%);
  background: var(--ob-line);
  transition: background-color 150ms ease, width 150ms ease;
}

.obelisk-rule:hover::before,
.obelisk-rule:focus-visible::before,
.obelisk-rule[data-dragging]::before {
  width: calc(2 * var(--ob-rule));
  background: var(--ob-strong);
}

.obelisk-rule[data-dragging] {
  cursor: grabbing;
}

.obelisk-rule:focus-visible {
  outline: 2px solid var(--ob-strong);
  outline-offset: 0;
}

/* Contracted: only what the rule carries.
 *
 * Everything directly in the wrapper that is not a heading, a theorem or the
 * contents goes — prose, display math, lists alike, which is why this is written as
 * an exclusion rather than a list of paragraphs to hide. The control and the handle
 * stay: they are what a reader reaches for. */
.obelisk.is-outline
  > :not(.h):not(.thm):not(nav):not(.obelisk-rule):not(.obelisk-themes):not(.obelisk-header):not(.obelisk-preview):not(.obelisk-help) {
  display: none;
}

/* What the rule carries is also what a press acts on: a collapsed block is a way
 * back into the document, at the place it names. */
.obelisk.is-outline .h,
.obelisk.is-outline .thm {
  cursor: pointer;
}

/* A theorem keeps its place on the rule and as much of its opening as its own name
 * takes: the label is what the line carries, so the body is clipped to it, with the
 * ellipsis that says there is more. index.js measures the label and sets the clamp.
 *
 * Only sidenotes are taken out of the body. A paragraph's inline runs arrive as
 * siblings of one another — a formula, a word set in bold — so hiding "everything
 * after the first child" leaves the opening full of holes; the clamp cuts on line
 * boundaries, which is what tells the reader there is more. */
.obelisk.is-outline .thm__body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--ob-clamp, 1);
  overflow: hidden;
}

/* Nothing else about the body changes: the clip cuts lines off the bottom, so every
 * line that survives stays exactly where it was while reading — the same spacing
 * between paragraphs, the same gaps inside a list. The clamp pays for those gaps
 * (index.js measures them); taking them out instead would move the text at the
 * moment the box folds, which reads as a jump. */

.obelisk.is-outline .sidenote {
  display: none;
}

/* The running header.
 *
 * Chrome of the same kind as the theme control: fixed, paper-coloured and quiet. It
 * sits in the top margin the page keeps empty anyway, so on an unscrolled page it
 * covers nothing, and it holds the two things a reader of a long note wants at hand —
 * where they are, and the way back to the catalogue. The note's name is written by
 * whoever wrote the page; the trail is the last heading scrolled past, and index.js
 * keeps it up to date.
 *
 * The paper behind it is load-bearing: the design's text scrolls under it. */
.obelisk-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 3;
  display: flex;
  align-items: baseline;
  gap: 1.1em;
  padding: 0.55em 1rem 0.5em;
  background: var(--ob-page);
  border-bottom: var(--ob-rule) solid var(--ob-line);
  font-family: var(--ob-font-sans), system-ui, sans-serif;
  font-size: calc(0.68 * var(--ob-reading-size));
  line-height: 1.3;
  white-space: nowrap;
}

/* The way back is chrome rather than prose, so it is not underlined like a reference:
 * an arrow, the colour of a label, and the ink of a label once it is reached for. */
.obelisk .obelisk-header__back {
  flex: none;
  color: var(--ob-muted);
  text-decoration: none;
}

/* Written as an escape, not as the glyph: a stylesheet is served as `text/css`
 * with no charset, and a raw arrow in it decodes as mojibake. */
.obelisk .obelisk-header__back::before {
  content: "\2190";
  font-family: var(--ob-font-math), "STIX Two Math", "Latin Modern Math", math, serif;
  margin-right: 0.4em;
}

.obelisk .obelisk-header__back:hover,
.obelisk .obelisk-header__back:focus-visible {
  color: var(--ob-strong);
}

/* The download is chrome too, and it is the one thing in the bar that belongs at
 * the far end of it: the note's name and the trail are what the reader is reading,
 * and they give way to the margin rather than to this. */
.obelisk .obelisk-header__pdf {
  flex: none;
  margin-left: auto;
  padding-left: 1.1em;
  color: var(--ob-muted);
  text-decoration: none;
  letter-spacing: 0.04em;
}

.obelisk .obelisk-header__pdf:hover,
.obelisk .obelisk-header__pdf:focus-visible {
  color: var(--ob-strong);
}

/* The name and the trail. The name is the fixed half, so it is the one that gives way
 * when the trail grows — the trail is what changes, and it is the one being read. */
.obelisk-header__note {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ob-muted);
}

/* The entry page's bar carries the title alone: with nothing beside it there is
 * nothing for it to give way to, and it is the page the reader is on rather than a
 * note they came from. So it takes the ink the trail's current heading takes, and it
 * is not the half that goes on a narrow screen. */
.obelisk-header--title .obelisk-header__note {
  display: block;
  color: var(--ob-text);
}

.obelisk-header__trail {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ob-text);
}

.obelisk-header__step + .obelisk-header__step::before {
  content: "/";
  margin: 0 0.5em;
  color: var(--ob-line);
}

/* The heading the reader is under is the one that is read, so it leads. */
.obelisk-header__step:last-child {
  color: var(--ob-strong);
}

/* The preview of a reference.
 *
 * A reference points into the same document, so the panel holds a copy of the target
 * rather than a fetch: nothing is requested, and a note stays one page. It is paper,
 * at the design's own measure and the design's own size — the reading size is what the
 * grid is built on, and a panel that scaled its type would need a line height of its
 * own to keep that grid — so only the box around it says it is chrome.
 *
 * Placed by index.js, which is the only thing here that can measure it, and it unfolds
 * from the edge it is anchored by: the panel is not one for its first frame, and grows
 * out of the corner nearest the reference — the way a proof unfolds, in the same motion
 * vocabulary. Only opacity and transform are transitioned; when the panel is taken away
 * is index.js's decision, because `display` in a transition is not a thing to ask every
 * browser for, and a browser that does not know one component of the shorthand throws
 * the whole transition away. */
.obelisk-preview {
  position: absolute;
  z-index: 4;
  box-sizing: border-box;
  display: none;
  /* Folded: the state the panel rests in, and the one a fold back goes to. An element
   * that is not displayed still has computed values, and index.js lands this frame
   * before it unfolds, which is what the unfold starts from — a starting style would say
   * the same thing and is not something to rely on either. */
  opacity: 0;
  transform: scaleY(0.92);
  transform-origin: top left;
  transition:
    opacity 160ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 160ms cubic-bezier(0.4, 0, 0.2, 1);
  width: max-content;
  max-width: min(
    100%,
    calc(var(--ob-paper-w) - var(--ob-margin-s) - var(--ob-margin-e) - var(--ob-side-w))
  );
  max-height: 60vh;
  overflow: auto;
  padding: 1.1rem 1.4rem 1.2rem;
  background: var(--ob-page);
  border: var(--ob-rule) solid var(--ob-line);
  box-shadow: 0 0.6rem 1.8rem rgb(0 0 0 / 0.1);
  text-align: left;
}

.obelisk-preview[data-open] {
  display: block;
}

.obelisk-preview[data-unfolded] {
  opacity: 1;
  transform: none;
}

/* Anchored below the reference, it unfolds from its top edge; anchored above, from its
 * bottom edge, so it always opens away from what it describes. */
.obelisk-preview[data-side="above"] {
  transform-origin: bottom left;
}

/* A reader who asked for less movement gets the panel, and none of ours. */
@media (prefers-reduced-motion: reduce) {
  .obelisk-preview {
    transition: none;
  }
}

/* Nothing wants a gap above it at the top of a panel. */
.obelisk-preview > :first-child {
  margin-top: 0;
}

/* A theorem's label is a margin float in the page, and a panel has no margin column:
 * it leads its own block instead, as it does in the phone layout. */
.obelisk-preview .thm__label {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  text-align: left;
}

/* A preview shows the whole of what it copies, folded page or not. */
.obelisk.is-outline .obelisk-preview .thm__body {
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
}

/* A section title is set for a page. In a panel it keeps its hierarchy and gives up
 * its size — and its line height has to be given up with it, or the line box would be
 * the one the full-size title asks for. */
.obelisk-preview .h[data-level="1"] .section {
  font-size: calc(var(--ob-title-scale) * 0.55 * 1em);
  line-height: calc(
    0.55 * var(--ob-lead) * var(--ob-step) + var(--ob-title-scale) * 0.55 * var(--ob-ascender)
  );
}

/* The bar is over the page, so nothing jumped to may stop under it. index.js measures
 * it; without a header the reservation is nothing. The two pixels are the difference
 * between "flush against the bar" and "behind it": the trail in index.js counts a
 * heading as current once its top has reached the bar's edge, and a heading jumped to
 * lands just below that edge. */
.obelisk [id] {
  scroll-margin-top: calc(var(--ob-header-h, 0px) + 2px);
}

@media (max-width: 54rem) {
  .obelisk-header__note {
    display: none;
  }

  /* Without the margin column there is no rule to take hold of, and the handle —
   * a strip of the text's own left edge — would be an invisible control that
   * contracts the document when the reader means to touch the text. The wrapper's
   * own hairline is gone at this width too. */
  .obelisk-rule {
    display: none;
  }
}

/* Theme switching.
 *
 * The control is chrome rather than content, so it sits where the design keeps its
 * chrome: outside the text column, in the right margin band, at the foot of the page.
 * Anchored to the column's own edge rather than the window's, so it holds the
 * design's geometry however the window is sized, and aligned that way it never
 * covers the text. Only the list it opens does, briefly, and that has paper behind
 * it.
 *
 * A swatch is a theme in miniature — its paper, a hairline of its ink, a tick of its
 * accent. The colours come from the variables the package declares on whatever
 * element names a theme, so an option can show a theme other than the one in force.
 * The mark itself names no theme, so it inherits the current one. */

.obelisk-themes {
  /* A length, not a font-relative size: the options set their own type, and an em
   * here would come out smaller on them than on the mark. */
  --ob-swatch-size: calc(var(--ob-pitch) * 1.1 * var(--ob-reading-size));
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
  font-family: var(--ob-font-sans), system-ui, sans-serif;
  /* Quiet until the reader reaches for it, and opaque again the moment they do:
   * a translucent panel would let the page read through the names. */
  opacity: 0.7;
  transition: opacity 200ms ease, background-color 220ms ease, color 220ms ease;
}

.obelisk-themes:hover,
.obelisk-themes:focus-within {
  opacity: 1;
}

.obelisk-themes__mark {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  /* A button does not inherit type the way other elements do, and the mark's name
   * is inside it: without this the name would take the browser's button size, and
   * be smaller than the same name in the list. */
  font: inherit;
}

.obelisk-themes__swatch {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: var(--ob-swatch-size);
  height: var(--ob-swatch-size);
  border: var(--ob-rule) solid var(--ob-line);
  background: var(--ob-swatch-page, var(--ob-page));
  transition: background-color 220ms ease, border-color 220ms ease;
}

/* The ink: a line of text on the paper. */
.obelisk-themes__swatch::before {
  content: "";
  position: absolute;
  inset: 30% 18% auto 18%;
  height: var(--ob-rule);
  background: var(--ob-swatch-ink, var(--ob-text));
  transition: background-color 220ms ease;
}

/* The accent: the theme's theorem stroke, the one colour that is neither paper nor
 * ink, and the thing that makes two light themes tell themselves apart. */
.obelisk-themes__swatch::after {
  content: "";
  position: absolute;
  inset: 56% 45% auto 18%;
  height: calc(2 * var(--ob-rule));
  background: var(--ob-swatch-accent, var(--ob-accent, var(--ob-text)));
  transition: background-color 220ms ease;
}

/* The name of the theme in force, beside the mark rather than above it, where it
 * would have the list to contend with. It is a label over whatever it lands on, so
 * it brings its own paper. Sized like the body text, like every other name here. */
.obelisk-themes__mark-name {
  position: absolute;
  right: calc(100% + 0.7em);
  top: 50%;
  transform: translateY(-50%);
  padding: 0.25em 0.5em;
  white-space: nowrap;
  background: var(--ob-page);
  text-align: right;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ob-muted);
  opacity: 0;
  transition: opacity 120ms ease;
}

.obelisk-themes__mark:hover .obelisk-themes__mark-name,
.obelisk-themes__mark:focus-visible .obelisk-themes__mark-name {
  opacity: 1;
}

.obelisk-themes__mark:hover .obelisk-themes__swatch,
.obelisk-themes__mark[aria-expanded="true"] .obelisk-themes__swatch,
.obelisk-themes__option:hover .obelisk-themes__swatch {
  border-color: var(--ob-swatch-ink, var(--ob-strong));
}

.obelisk-themes__mark:focus-visible,
.obelisk-themes__option:focus-visible {
  outline: 2px solid var(--ob-strong);
  outline-offset: 4px;
}

/* The list is a small panel of paper: it opens leftwards over the margin and the
 * last few characters of a line, which is the one place a control this size cannot
 * avoid, so it brings its own background. It unfolds out of the mark — scaled from
 * the corner the mark sits on and risen into place — rather than appearing, and it
 * is kept out of the accessibility tree and the tab order while it is shut. */
.obelisk-themes__list {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.7em);
  width: max-content;
  max-width: 15rem;
  display: grid;
  gap: 0.15em;
  padding: 0.55em 0.65em;
  background: var(--ob-page);
  border: var(--ob-rule) solid var(--ob-line);
  transform-origin: bottom right;
  transform: scale(0.94) translateY(0.35em);
  opacity: 0;
  visibility: hidden;
  transition: transform 170ms cubic-bezier(0.2, 0.8, 0.3, 1), opacity 170ms ease,
    visibility 0s linear 170ms, background-color 220ms ease, border-color 220ms ease;
}

.obelisk-themes__list.is-open {
  transform: scale(1) translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform 170ms cubic-bezier(0.2, 0.8, 0.3, 1), opacity 170ms ease,
    visibility 0s, background-color 220ms ease, border-color 220ms ease;
}

.obelisk-themes__option {
  display: flex;
  align-items: center;
  gap: 0.6em;
  width: 100%;
  margin: 0;
  padding: 0.15em 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--ob-muted);
  font: inherit;
}

/* A row's name, in the body text's size, like every other name in the control. */
.obelisk-themes__option-name {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
}

.obelisk-themes__option[aria-checked="true"],
.obelisk-themes__option:hover {
  color: var(--ob-text);
}

/* The theme in force is the one whose swatch is ringed in its own ink. */
.obelisk-themes__option[aria-checked="true"] .obelisk-themes__swatch {
  border-color: var(--ob-swatch-ink, var(--ob-strong));
}

/* The help control at the far end of the bar, and the sheet it opens.
 *
 * The sheet is a `dialog`, so the browser holds the focus inside it, closes it on
 * Escape, and puts it in the top layer — over the fixed header, without a z-index to
 * argue about. The veil is the one colour the design does not have: it is not ink on
 * paper, it is the page being pushed back. */
.obelisk .obelisk-header__help {
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: 0.04em;
  color: var(--ob-muted);
  cursor: pointer;
}

.obelisk .obelisk-header__help:hover,
.obelisk .obelisk-header__help:focus-visible {
  color: var(--ob-strong);
}

.obelisk-help {
  inset: 0;
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ob-text);
  font: inherit;
  overflow: hidden;
}

/* The one colour the design does not have: a veil is not ink on paper. It arrives and
 * leaves on the same beat as the notes, keyframed rather than declared — a dialog is
 * not in the layout before it is shown, so there is no earlier value to transition
 * from, and `@starting-style` is not something to ask every browser for. */
.obelisk-help::backdrop {
  background: rgb(0 0 0 / 0.3);
  animation: obelisk-veil-in 140ms ease both;
}

.obelisk-help[data-closing]::backdrop {
  animation: obelisk-veil-out 140ms ease both;
}

@keyframes obelisk-veil-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes obelisk-veil-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* A ring on a control, and what that control does beside it. Both are placed by
 * index.js from the control's own box. Neither takes a pointer, so a press anywhere
 * but Close is a press on the veil, which closes the overlay — the next thing a
 * reader tries. */
.obelisk-help__ring {
  position: absolute;
  box-sizing: border-box;
  border: calc(2 * var(--ob-rule)) solid var(--ob-strong);
  pointer-events: none;
  animation: obelisk-help-in 140ms ease both;
}

.obelisk-help__note {
  position: absolute;
  box-sizing: border-box;
  max-width: 21rem;
  margin: 0;
  padding: 0.5em 0.7em;
  border: var(--ob-rule) solid var(--ob-line);
  background: var(--ob-page);
  font-size: calc(0.8 * var(--ob-reading-size));
  line-height: 1.45;
  pointer-events: none;
  animation: obelisk-help-in 140ms ease both;
}

/* What each control is, and what it does. Placed by index.js from the control's own
 * box, so the two are read as one thing. */
@keyframes obelisk-help-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* The exit, which index.js runs before closing the dialog — the browser would
 * otherwise take it away in the frame it is told to. */
.obelisk-help[data-closing] .obelisk-help__ring,
.obelisk-help[data-closing] .obelisk-help__note,
.obelisk-help[data-closing] .obelisk-help__close {
  animation: obelisk-help-out 140ms ease both;
}

@keyframes obelisk-help-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.obelisk-help__note strong {
  display: block;
  color: var(--ob-strong);
}

.obelisk-help__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  margin: 0;
  padding: 0.35em 0.7em;
  border: var(--ob-rule) solid var(--ob-line);
  background: var(--ob-page);
  font: inherit;
  font-size: calc(0.75 * var(--ob-reading-size));
  letter-spacing: 0.04em;
  color: var(--ob-text);
  cursor: pointer;
  animation: obelisk-help-in 140ms ease both;
}

.obelisk-help__close:hover,
.obelisk-help__close:focus-visible {
  border-color: var(--ob-strong);
  color: var(--ob-strong);
}

/* Switching theme fades rather than snaps: every colour the theme owns moves
 * together. The class arrives after the first paint, which index.js arranges, so
 * that the theme restored at load is simply there instead of fading in from the
 * document's own. It is deliberately without specificity — a transition declared on
 * an element still wins, so the fold keeps its height animation and the panel keeps
 * its unfold. */
:where(.obelisk-animating) *,
:where(.obelisk-animating) *::before,
:where(.obelisk-animating) *::after {
  transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease,
    outline-color 220ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .obelisk-themes,
  .obelisk-themes__list,
  .obelisk-themes__mark-name {
    transition: none;
  }

  .obelisk-animating *,
  .obelisk-animating *::before,
  .obelisk-animating *::after {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .obelisk-help,
  .obelisk-help::backdrop,
  .obelisk-help__ring,
  .obelisk-help__note,
  .obelisk-help__close {
    animation: none;
  }

  .js .proof__body,
  .js .proof__head::after {
    transition: none;
  }
}