/* =========================================================
   ACE Topic Page 2.0.0: the lecture page
   ---------------------------------------------------------
   The homepage, All Courses, sign-in and Feed system on the
   lecture: charcoal and teal, Poppins over Inter, the teal
   eyebrow, 10px buttons with the teal fill, the programme
   colours (CE blue, ME-1 green, PE amber, MP cyan) and the
   All Courses drawing ink.

   One bold thing: the band, a drawing sheet carrying the
   topic's own figure. Everything under it is quiet: the video
   and the lecture are the two cards; the side column is a
   margin of hairline sections, not a stack of boxes.

   Scope: every rule hangs off .ace-topic-layout.atp-v2, the
   class the plugin's buffer puts on a topic page's layout and
   on no other page. The 1.2.0 rules are in base.css, fenced
   off from this layout. The selectors that restyle another
   plugin's markup start body.ace-player .ace-topic-layout.atp-v2
   (three classes and an element) and carry !important where
   the rule they replace does: ACE Lesson Steps, ACE Learning
   Tools, ACE Rankings and ACE Related Problems all style these
   parts, some with !important, and all load before this file.

   House rules:
     - anything given a display value also gets a [hidden] rule;
     - teal TEXT uses the lighter teal, white text sits on the
       deeper teal;
     - nothing waits on the script to be visible: the figure's
       undrawn states apply only under .atp-js (set in <head>),
       and only when motion is wanted;
     - motion moves only transform and opacity.
   ========================================================= */


/* ============================================================ tokens */

.ace-topic-layout.atp-v2 {
  --atp-bg: var(--color-bg, #262624);
  --atp-sheet: #1b1d1d;
  --atp-card: #2b2b29;
  --atp-inset: #222220;
  --atp-line: rgba(255, 255, 255, .08);
  --atp-line2: rgba(255, 255, 255, .14);
  --atp-line3: rgba(255, 255, 255, .24);
  --atp-text: var(--color-text, #e8e6dc);
  --atp-head: var(--color-heading, #f5f4ef);
  --atp-muted: var(--color-text-muted, #a39e93);
  --atp-rgb: var(--ace-primary-rgb, 0, 138, 129);
  --atp-teal: var(--color-primary, #008a81);
  --atp-teal-text: #61b6b1;
  --atp-teal-fill: #007870;
  --atp-warn: #e3a857;
  --atp-warn-rgb: 227, 168, 87;
  --atp-head-font: var(--font-heading, Poppins, system-ui, sans-serif);
  --atp-body-font: var(--font-body, Inter, system-ui, sans-serif);
  --atp-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "DejaVu Sans Mono", monospace;

  /* The drawing's ink; tension and compression; the figure's one highlight. */
  --atp-ink: 226, 236, 240;
  --atp-t-rgb: 97, 182, 177;
  --atp-c-rgb: 227, 168, 87;
  --acc: #61b6b1;
  --acc-rgb: 97, 182, 177;

  --atp-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.ace-topic-layout.atp-v2 .atp-band[data-prog="ce"] { --acc: #86b1e8; --acc-rgb: 134, 177, 232; }
.ace-topic-layout.atp-v2 .atp-band[data-prog="me"] { --acc: #5ec8b3; --acc-rgb: 94, 200, 179; }
.ace-topic-layout.atp-v2 .atp-band[data-prog="pe"] { --acc: #f0a04b; --acc-rgb: 240, 160, 75; }
.ace-topic-layout.atp-v2 .atp-band[data-prog="mp"] { --acc: #5bbfe0; --acc-rgb: 91, 191, 224; }

.ace-topic-layout.atp-v2 .atp-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* A teal focus ring on this page's own controls and on the ones it
   restyles; the other plugins' own controls (the video's larger-window
   button, the Letter of Undertaking) keep the focus styles they have. */
body.ace-player .ace-topic-layout.atp-v2 :is(.atp-band, .atp-nav, .ace-vt-nav, .ace-topic-body, .ace-dl-panel, .ace-dl-terms, .ace-ls-quizzes, .ld-quiz-list, .ace-rank-chooser, .ace-rl-panel, .ace-free-lock) :is(a, button, input, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--atp-teal-text);
  outline-offset: 2px;
}


/* ============================================================ the layout */

/* The band runs across both columns; below it, the lecture and the side
   column as before. */
.ace-topic-layout.atp-v2 .atp-band { grid-column: 1 / -1; margin: 0 0 22px; }

@media (min-width: 1200px) {
  body.ace-player .ace-topic-layout.atp-v2.has-aside { row-gap: 22px; }
  body.ace-player .ace-topic-layout.atp-v2.has-aside .atp-band { margin-bottom: 0; }
}


/* ============================================================ the band */

/* Written narrow-first: the words, the figure under them, the lesson's
   topics under that. A container query lays the words and the figure
   side by side once the band is wide enough. */
.ace-topic-layout.atp-v2 .atp-band {
  position: relative;
  isolation: isolate;
  container: atp-band / inline-size;
  border-radius: 18px;
  border: 1px solid var(--atp-line2);
  background:
    radial-gradient(55% 120% at 80% 42%, rgba(var(--atp-rgb), .15), transparent 70%),
    radial-gradient(40% 80% at 0% 100%, rgba(var(--atp-rgb), .06), transparent 70%),
    var(--atp-sheet);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 18px 44px rgba(0, 0, 0, .28);
  overflow: hidden;
  color: var(--atp-text);
  font-family: var(--atp-body-font);
}
/* The drafting grid, strongest behind the figure. */
.ace-topic-layout.atp-v2 .atp-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(var(--atp-t-rgb), .085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--atp-t-rgb), .085) 1px, transparent 1px),
    linear-gradient(rgba(var(--atp-t-rgb), .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--atp-t-rgb), .04) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(90% 60% at 50% 62%, #000 20%, transparent 100%);
          mask-image: radial-gradient(90% 60% at 50% 62%, #000 20%, transparent 100%);
}

.ace-topic-layout.atp-v2 .atp-band-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "text" "fig" "strip";
}

.ace-topic-layout.atp-v2 .atp-band-text {
  grid-area: text;
  position: relative;
  min-width: 0;
  padding: 20px 56px 4px 20px;
}

.ace-topic-layout.atp-v2 .atp-eyebrow {
  margin: 0 !important;
  font-family: var(--atp-body-font);
  font-size: .7rem !important;
  font-weight: 700;
  line-height: 1.2 !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--atp-teal-text) !important;
}

body.ace-player .ace-topic-layout.atp-v2 .atp-title {
  margin: 8px 0 0 !important;
  padding: 0 !important;
  max-width: 22ch;
  font-family: var(--atp-head-font) !important;
  font-size: clamp(1.5rem, 1rem + 1.9cqi, 2.4rem) !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: -.028em !important;
  color: var(--atp-head) !important;
  text-wrap: balance;
}

.ace-topic-layout.atp-v2 .atp-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

/* ---- Mark Complete: LearnDash's own form, in the band ---- */

/*
 * Never hidden.
 *
 * The theme's app-shell.js has a duplicate guard that keys each Mark
 * Complete form on its action and label. Its selector matches both the
 * <form> and the button inside it, which produce the same key, so the
 * button's pass marks its own form as the second copy and hides it with an
 * inline display:none — every Mark Complete form, on every page. Stylesheet
 * !important beats an inline style without it.
 */
body.ace-player .ace-topic-layout.atp-v2 .atp-mc[data-ace-mc-host] .sfwd-mark-complete,
body.ace-player .ace-topic-layout.atp-v2 .atp-mc[data-ace-mc-host] form[class*="mark-complete"] {
  display: flex !important;
  position: relative;
  margin: 0 !important;
}
.ace-topic-layout.atp-v2 .atp-mc {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  line-height: normal;
}
/* A topic with a minimum time: LearnDash's countdown, beside the button it
   holds back. */
body.ace-player .ace-topic-layout.atp-v2 .atp-mc .learndash_timer {
  margin: 0 !important;
  font-family: var(--atp-body-font);
  font-size: .8rem !important;
  font-weight: 600;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  color: var(--atp-muted) !important;
}

body.ace-player .ace-topic-layout.atp-v2 .atp-mc .learndash_mark_complete_button,
body.ace-player .ace-topic-layout.atp-v2 .atp-mc input[type="submit"],
body.ace-player .ace-topic-layout.atp-v2 .atp-mc button {
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 20px 0 42px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--atp-check) 18px 50% / 15px 15px no-repeat, var(--atp-teal-fill) !important;
  color: #fff !important;
  font-family: var(--atp-body-font) !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: 0 8px 22px rgba(var(--atp-rgb), .3), 0 1px 0 rgba(255, 255, 255, .14) inset !important;
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
body.ace-player .ace-topic-layout.atp-v2 .atp-mc .learndash_mark_complete_button:hover,
body.ace-player .ace-topic-layout.atp-v2 .atp-mc input[type="submit"]:hover,
body.ace-player .ace-topic-layout.atp-v2 .atp-mc button:hover {
  background: var(--atp-check) 18px 50% / 15px 15px no-repeat, #0a8a81 !important;
  transform: translateY(-1px);
}
body.ace-player .ace-topic-layout.atp-v2 .atp-mc :is(input[type="submit"], button):disabled {
  background: var(--atp-check) 18px 50% / 15px 15px no-repeat, rgba(255, 255, 255, .08) !important;
  color: rgba(232, 230, 220, .5) !important;
  box-shadow: none !important;
  cursor: not-allowed;
  transform: none;
}
/* Mark Incomplete (a course that lets a student take a finished topic
   back): LearnDash's form, as a quiet outline button after "Completed". */
body.ace-player .ace-topic-layout.atp-v2 .atp-mc.is-undo :is(input[type="submit"], button) {
  height: 34px !important;
  padding: 0 14px !important;
  border: 1px solid var(--atp-line2) !important;
  background: transparent !important;
  color: var(--atp-text) !important;
  font-size: .8rem !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
body.ace-player .ace-topic-layout.atp-v2 .atp-mc.is-undo :is(input[type="submit"], button):hover {
  border-color: var(--atp-line3) !important;
  background: rgba(255, 255, 255, .06) !important;
  transform: none;
}

/* While the form is on its way: the label gives way to a spinner. */
body.ace-player .ace-topic-layout.atp-v2 .atp-mc.is-busy :is(input[type="submit"], button) {
  color: transparent !important;
  background: var(--atp-teal-fill) !important;
}
/* The theme hides every Mark Complete form's ::after with !important
   (style.css), so the spinner says so too. */
.ace-topic-layout.atp-v2 .atp-mc.is-busy form::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  animation: atp-turn .8s linear infinite;
  pointer-events: none;
}

/* ---- where the student stands, when there is no button ---- */

.ace-topic-layout.atp-v2 .atp-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px 0 11px;
  border-radius: 999px;
  border: 1px solid var(--atp-line2);
  background: rgba(255, 255, 255, .05);
  font-size: .8rem;
  font-weight: 600;
  color: var(--atp-muted);
  white-space: nowrap;
}
.ace-topic-layout.atp-v2 .atp-state svg { width: 14px; height: 14px; flex: none; }
.ace-topic-layout.atp-v2 .atp-state.is-done {
  border-color: rgba(var(--atp-t-rgb), .45);
  background: rgba(var(--atp-t-rgb), .12);
  color: var(--atp-teal-text);
}
.ace-topic-layout.atp-v2 .atp-state.is-blocked {
  border-color: rgba(var(--atp-warn-rgb), .45);
  background: rgba(var(--atp-warn-rgb), .1);
  color: var(--atp-warn);
}
body.ace-player .ace-topic-layout.atp-v2 .atp-blocked {
  margin: 10px 0 0 !important;
  max-width: 52ch;
  font-size: .82rem !important;
  line-height: 1.5 !important;
  color: var(--atp-muted) !important;
}
.ace-topic-layout.atp-v2 .atp-blocked strong { color: var(--atp-head); font-weight: 600; }

/* ---- the figure ---- */

.ace-topic-layout.atp-v2 .atp-fig {
  grid-area: fig;
  position: relative;
  container: atp-fig / inline-size;
  width: min(100% - 28px, 400px);
  aspect-ratio: 2 / 1;
  margin: 10px 14px 0;
  --atp-u: 1;
}
.ace-topic-layout.atp-v2 .atp-art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ---- the lesson's topics ---- */

.ace-topic-layout.atp-v2 .atp-strip {
  grid-area: strip;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "pos count" "segs segs";
  align-items: center;
  gap: 10px 14px;
  margin-top: 12px;
  padding: 13px 20px 16px;
  border-top: 1px solid var(--atp-line);
  background: rgba(0, 0, 0, .14);
}
body.ace-player .ace-topic-layout.atp-v2 .atp-pos,
body.ace-player .ace-topic-layout.atp-v2 .atp-count {
  margin: 0 !important;
  font-size: .76rem !important;
  line-height: 1.3 !important;
  color: var(--atp-muted) !important;
  white-space: nowrap;
}
body.ace-player .ace-topic-layout.atp-v2 .atp-pos { grid-area: pos; color: var(--atp-head) !important; font-weight: 600; }
body.ace-player .ace-topic-layout.atp-v2 .atp-count { grid-area: count; justify-self: end; }
.ace-topic-layout.atp-v2 .atp-sheets { grid-area: segs; min-width: 0; }

.ace-topic-layout.atp-v2 .atp-seglist {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ace-topic-layout.atp-v2 .atp-seg { flex: 1 1 0; min-width: 0; margin: 0; padding: 0; }
.ace-topic-layout.atp-v2 .atp-seg::before { content: none; }

body.ace-player .ace-topic-layout.atp-v2 .atp-seg-in {
  display: block;
  position: relative;
  padding: 2px 0 0;
  border-radius: 4px;
  color: var(--atp-muted) !important;
  text-decoration: none !important;
}
.ace-topic-layout.atp-v2 .atp-seg-bar {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .1);
  transition: background-color .15s ease;
}
/* Locked on the free plan: hatched. */
.ace-topic-layout.atp-v2 .atp-seg.is-locked .atp-seg-bar {
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .13) 0 2px, rgba(255, 255, 255, .04) 2px 5px);
}
.ace-topic-layout.atp-v2 .atp-seg.is-locked .atp-seg-label svg { color: var(--atp-muted); }

/* Finished: filled teal. Where you are: outlined in the programme's colour,
   filled only once it is finished too, so a bar never reads as done when
   it is not. */
.ace-topic-layout.atp-v2 .atp-seg.is-done .atp-seg-bar { background: rgba(var(--atp-t-rgb), .75); }
.ace-topic-layout.atp-v2 .atp-seg.is-current .atp-seg-bar {
  background: rgba(var(--acc-rgb), .16);
  box-shadow: inset 0 0 0 1.5px var(--acc), 0 0 12px rgba(var(--acc-rgb), .35);
}
.ace-topic-layout.atp-v2 .atp-seg.is-current.is-done .atp-seg-bar {
  background: rgba(var(--atp-t-rgb), .8);
  box-shadow: inset 0 0 0 1.5px var(--acc), 0 0 12px rgba(var(--acc-rgb), .35);
}
.ace-topic-layout.atp-v2 a.atp-seg-in:hover .atp-seg-bar { background: rgba(255, 255, 255, .3); }
.ace-topic-layout.atp-v2 .atp-seg.is-done a.atp-seg-in:hover .atp-seg-bar { background: var(--atp-teal-text); }

.ace-topic-layout.atp-v2 .atp-seg-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  min-width: 0;
  font-size: .76rem;
  line-height: 1.3;
}
.ace-topic-layout.atp-v2 .atp-seg-label b {
  flex: none;
  font-family: var(--atp-head-font);
  font-size: .72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--atp-muted);
}
.ace-topic-layout.atp-v2 .atp-seg-name,
.ace-topic-layout.atp-v2 .atp-seglist.is-many .atp-seg-label {
  /* Read out always; on screen only where there is room (below). */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* A long lesson: bars only, closer together. */
.ace-topic-layout.atp-v2 .atp-seglist.is-many { gap: 2px; }
.ace-topic-layout.atp-v2 .atp-seg-label svg { flex: none; width: 12px; height: 12px; color: var(--atp-teal-text); }
.ace-topic-layout.atp-v2 .atp-seg.is-current .atp-seg-label,
.ace-topic-layout.atp-v2 .atp-seg.is-current .atp-seg-label b { color: var(--atp-head); }
.ace-topic-layout.atp-v2 a.atp-seg-in:hover .atp-seg-label,
.ace-topic-layout.atp-v2 a.atp-seg-in:hover .atp-seg-label b { color: var(--atp-head); }
/* A bigger target than the bar alone, for a finger. */
.ace-topic-layout.atp-v2 a.atp-seg-in::after {
  content: "";
  position: absolute;
  inset: -10px 0 -8px;
}

/* ---- pause, as on the homepage, All Courses, sign-in and the Feed ---- */

.ace-topic-layout.atp-v2 .atp-motion {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--atp-line2);
  background: rgba(20, 20, 19, .72);
  color: var(--atp-text);
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  transition: border-color .15s ease, background-color .15s ease;
}
.ace-topic-layout.atp-v2 .atp-motion:hover { border-color: var(--atp-line3); background: rgba(34, 34, 32, .92); }
.ace-topic-layout.atp-v2 .atp-motion svg { width: 12px; height: 12px; }
.ace-topic-layout.atp-v2 .atp-motion-play svg { fill: currentColor; }
.ace-topic-layout.atp-v2 .atp-motion-pause,
.ace-topic-layout.atp-v2 .atp-motion-play { display: grid; place-items: center; }
.ace-topic-layout.atp-v2 .atp-motion-play,
.atp-paused .ace-topic-layout.atp-v2 .atp-motion-pause { display: none; }
.atp-paused .ace-topic-layout.atp-v2 .atp-motion-play { display: grid; }
:root:not(.atp-js) .ace-topic-layout.atp-v2 .atp-motion { display: none; }
@media (prefers-reduced-motion: reduce) {
  .ace-topic-layout.atp-v2 .atp-motion { display: none; }
}

/* ---- wider: words and figure side by side ---- */

@container atp-band (min-width: 560px) {
  .ace-topic-layout.atp-v2 .atp-strip {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "pos segs count";
    gap: 18px;
    padding: 14px 24px 15px;
  }
}

/* From 620px: side by side, the figure never narrower than 340px (it
   loses its small labels below that), so the column is 340 + its margin. */
@container atp-band (min-width: 620px) {
  .ace-topic-layout.atp-v2 .atp-band-in {
    grid-template-columns: minmax(0, 1fr) minmax(366px, 43%);
    grid-template-areas: "text fig" "strip strip";
  }
  .ace-topic-layout.atp-v2 .atp-band-text {
    align-self: center;
    padding: 30px 12px 22px 30px;
  }
  .ace-topic-layout.atp-v2 .atp-fig {
    width: auto;
    max-width: 420px;
    margin: 22px 26px 8px 0;
    align-self: center;
    justify-self: stretch;
  }
  .ace-topic-layout.atp-v2 .atp-strip { margin-top: 10px; padding: 14px 30px 16px; }
  .ace-topic-layout.atp-v2 .atp-band::before {
    -webkit-mask-image: radial-gradient(48% 110% at 77% 44%, #000 30%, transparent 100%);
            mask-image: radial-gradient(48% 110% at 77% 44%, #000 30%, transparent 100%);
  }
}

/* Topic names under the bars when the lesson is short enough to fit them. */
@container atp-band (min-width: 820px) {
  .ace-topic-layout.atp-v2 .atp-seglist.has-names { gap: 14px; }
  .ace-topic-layout.atp-v2 .atp-seglist.has-names .atp-seg-name {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    min-width: 0;
    clip: auto;
    text-overflow: ellipsis;
  }
}


/* ============================================================ the figure: ink */

.ace-topic-layout.atp-v2 .atp-art text,
.ace-topic-layout.atp-v2 .atp-ly text { font-family: var(--atp-mono); }

.atp-v2 .atp-fig .g0 { fill: none; stroke: rgba(var(--atp-ink), .3); stroke-width: 1; }
.atp-v2 .atp-fig .g1 { fill: none; stroke: rgba(var(--atp-ink), .58); stroke-width: 1.25; }
.atp-v2 .atp-fig .g2 { fill: none; stroke: rgba(var(--atp-ink), .8); stroke-width: 1.6; }
.atp-v2 .atp-fig .gk { fill: none; stroke: rgba(var(--atp-ink), .9); stroke-width: 2; }
.atp-v2 .atp-fig .gh { fill: none; stroke: rgba(var(--atp-ink), .22); stroke-width: .9; }
.atp-v2 .atp-fig .ge { fill: none; stroke: rgba(var(--atp-ink), .22); stroke-width: .8; stroke-dasharray: 2 3; }
.atp-v2 .atp-fig .gd { fill: none; stroke: rgba(var(--atp-ink), .42); stroke-width: 1; stroke-dasharray: 4 3; }
.atp-v2 .atp-fig .gdot { fill: none; stroke: rgba(var(--atp-ink), .55); stroke-width: 1.1; stroke-dasharray: .1 3.2; stroke-linecap: round; }
.atp-v2 .atp-fig .gcl { fill: none; stroke: rgba(var(--atp-ink), .26); stroke-width: .8; stroke-dasharray: 9 3 2 3; }
.atp-v2 .atp-fig .gc2 { fill: none; stroke: rgba(var(--atp-ink), .3); stroke-width: 1; stroke-dasharray: 6 5; }
.atp-v2 .atp-fig .grid { fill: none; stroke: rgba(var(--atp-ink), .08); stroke-width: .8; }
.atp-v2 .atp-fig .mesh { fill: none; stroke: rgba(var(--atp-ink), .45); stroke-width: 1; stroke-dasharray: 1.4 1.6; }
.atp-v2 .atp-fig .gs { fill: none; stroke: rgba(var(--atp-ink), .4); stroke-width: 1.5; stroke-linecap: round; }
.atp-v2 .atp-fig .ga { fill: none; stroke: var(--acc); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.atp-v2 .atp-fig .ga2 { fill: none; stroke: var(--acc); stroke-width: 2.4; stroke-linecap: round; }
.atp-v2 .atp-fig .gt { fill: none; stroke: rgb(var(--atp-t-rgb)); stroke-width: 1.6; stroke-linejoin: round; }
.atp-v2 .atp-fig .gc { fill: none; stroke: rgb(var(--atp-c-rgb)); stroke-width: 1.6; stroke-linejoin: round; }
.atp-v2 .atp-fig .gt2 { fill: none; stroke: var(--acc); stroke-width: 2; stroke-linecap: round; }
.atp-v2 .atp-fig .dash { stroke-dasharray: 5 3.5; }
.atp-v2 .atp-fig .sw { fill: none; stroke: rgba(var(--atp-t-rgb), .75); stroke-width: 1.2; }
.atp-v2 .atp-fig .gw { fill: none; stroke: rgba(var(--atp-t-rgb), .38); stroke-width: .8; }
.atp-v2 .atp-fig .gx { fill: none; stroke: var(--atp-sheet); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }

.atp-v2 .atp-fig .fw { fill: rgba(var(--atp-t-rgb), .1); }
.atp-v2 .atp-fig .fw2 { fill: rgba(var(--atp-t-rgb), .2); }
.atp-v2 .atp-fig .fw3 { fill: rgba(var(--atp-t-rgb), .42); }
.atp-v2 .atp-fig .fw4 { fill: rgba(var(--atp-t-rgb), .3); }
.atp-v2 .atp-fig .fs { fill: var(--atp-sheet); }
.atp-v2 .atp-fig .fg { fill: rgba(var(--atp-ink), .035); }
.atp-v2 .atp-fig .fg2 { fill: rgba(var(--atp-ink), .1); }
.atp-v2 .atp-fig .fa { fill: rgba(var(--acc-rgb), .13); }
.atp-v2 .atp-fig .fa2 { fill: rgba(var(--acc-rgb), .14); }
.atp-v2 .atp-fig .fa3 { fill: rgba(var(--acc-rgb), .32); }
.atp-v2 .atp-fig .fband { fill: rgba(var(--acc-rgb), .08); }
.atp-v2 .atp-fig .ft { fill: rgba(var(--atp-t-rgb), .16); }
.atp-v2 .atp-fig .fc { fill: rgba(var(--atp-c-rgb), .16); }
.atp-v2 .atp-fig .fu { fill: #213432; stroke: none; }
.atp-v2 .atp-fig .fcon { fill: rgba(var(--atp-ink), .09); }
.atp-v2 .atp-fig .agg { fill: rgba(var(--atp-ink), .4); }
.atp-v2 .atp-fig .bar { fill: rgba(var(--atp-ink), .78); }
.atp-v2 .atp-fig .hole { fill: var(--atp-sheet); }
.atp-v2 .atp-fig .rect { fill: rgba(var(--acc-rgb), .16); stroke: var(--acc); stroke-width: .9; stroke-opacity: .8; }

.atp-v2 .atp-fig .hd { fill: rgba(var(--atp-ink), .62); }
.atp-v2 .atp-fig .hk { fill: rgba(var(--atp-ink), .9); }
.atp-v2 .atp-fig .ha { fill: var(--acc); }
.atp-v2 .atp-fig .jt { fill: var(--atp-sheet); stroke: rgba(var(--atp-ink), .8); stroke-width: 1.3; }
.atp-v2 .atp-fig .jt.is-a { stroke: var(--acc); }
.atp-v2 .atp-fig .jt.is-t { stroke: rgb(var(--atp-t-rgb)); }
.atp-v2 .atp-fig .jt.is-c { stroke: rgb(var(--atp-c-rgb)); }

.atp-v2 .atp-fig .tx { fill: rgba(var(--atp-ink), .5); font-size: 9px; font-weight: 600; letter-spacing: .03em; }
.atp-v2 .atp-fig .tx.k { fill: rgba(var(--atp-ink), .82); font-size: 10.5px; font-weight: 700; letter-spacing: 0; }
.atp-v2 .atp-fig .tx.dm { fill: rgba(var(--atp-ink), .62); }
.atp-v2 .atp-fig .tx.a { fill: var(--acc); }
.atp-v2 .atp-fig .tx.t,
.atp-v2 .atp-fig .tx.w { fill: rgb(var(--atp-t-rgb)); }
.atp-v2 .atp-fig .tx.c { fill: rgb(var(--atp-c-rgb)); }
.atp-v2 .atp-fig .tx.cap { fill: rgba(var(--atp-ink), .4); font-size: 7.5px; font-weight: 700; letter-spacing: .14em; }
.atp-v2 .atp-fig .tx .sub { font-size: 76%; }

/* Truss members, tinted by force: the stronger, the stronger the tint. */
.atp-v2 .atp-fig .mem { fill: none; stroke-width: 2.2; stroke-linecap: round; }
.atp-v2 .atp-fig .mem.is-t { stroke: rgba(var(--atp-t-rgb), calc(.34 + .38 * var(--k, .5))); }
.atp-v2 .atp-fig .mem.is-c { stroke: rgba(var(--atp-c-rgb), calc(.3 + .38 * var(--k, .5))); }
.atp-v2 .atp-fig .mem.is-z { stroke: rgba(var(--atp-ink), .3); stroke-width: 1.4; stroke-dasharray: .055 .045; }
.atp-v2 .atp-fig .lit { fill: none; stroke-width: 3.4; stroke-linecap: round; }
.atp-v2 .atp-fig .lit.is-t { stroke: rgb(var(--atp-t-rgb)); }
.atp-v2 .atp-fig .lit.is-c { stroke: rgb(var(--atp-c-rgb)); }

/* ---- what moves, over the drawing ---- */

.ace-topic-layout.atp-v2 .atp-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.ace-topic-layout.atp-v2 .atp-ly {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ace-topic-layout.atp-v2 .atp-fx-u {
  position: absolute;
  left: 0;
  top: 0;
  width: 400px;
  height: 200px;
  transform: scale(var(--atp-u, 1));
  transform-origin: 0 0;
}
/* A window onto something sliding through it. */
.ace-topic-layout.atp-v2 .atp-win {
  position: absolute;
  left: calc(var(--x) / 4 * 1%);
  top: calc(var(--y) / 2 * 1%);
  width: calc(var(--w) / 4 * 1%);
  height: calc(var(--h) / 2 * 1%);
  overflow: hidden;
}
.ace-topic-layout.atp-v2 .atp-run {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -80px;
  right: -80px;
  display: block;
  opacity: 0;
}
/* Only while it moves: still, the drawing shows plain water. */
.atp-js:not(.atp-paused) .ace-topic-layout.atp-v2 .atp-fig.is-live .atp-run { opacity: 1; }
.ace-topic-layout.atp-v2 .win-glint .atp-run {
  background: repeating-linear-gradient(90deg, transparent 0 34px, rgba(225, 250, 247, .4) 34px 44px, transparent 44px 80px);
}
.ace-topic-layout.atp-v2 .win-flow .atp-run {
  background:
    linear-gradient(90deg, transparent 0 9px, rgba(215, 245, 242, .62) 9px 15px, transparent 15px) 0 28% / 20px 1.5px repeat-x,
    linear-gradient(90deg, transparent 0 9px, rgba(215, 245, 242, .42) 9px 15px, transparent 15px) 10px 72% / 20px 1.5px repeat-x;
}
.ace-topic-layout.atp-v2 .win-shear .atp-run {
  background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(var(--atp-t-rgb), .5) 22px 34px, transparent 34px 40px);
  top: calc(50% - 1px);
  bottom: auto;
  height: 2px;
}
/* Riders: points that travel the drawing (the script moves them). */
.ace-topic-layout.atp-v2 .atp-rider {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  opacity: 0;
}
.ace-topic-layout.atp-v2 .atp-rider > i {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  transform: translate(-50%, -50%);
}
.ace-topic-layout.atp-v2 .atp-rider.is-dot > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px var(--acc), 0 0 12px 2px rgba(var(--acc-rgb), .55);
}
.ace-topic-layout.atp-v2 .atp-rider.is-ink > i { box-shadow: 0 0 0 2px rgba(var(--atp-ink), .9), 0 0 10px 2px rgba(var(--atp-ink), .3); }
.ace-topic-layout.atp-v2 .atp-rider.is-c > i { box-shadow: 0 0 0 2px rgb(var(--atp-c-rgb)), 0 0 10px 2px rgba(var(--atp-c-rgb), .5); }
.ace-topic-layout.atp-v2 .atp-rider.is-t > i { box-shadow: 0 0 0 2px rgb(var(--atp-t-rgb)), 0 0 10px 2px rgba(var(--atp-t-rgb), .5); }
.ace-topic-layout.atp-v2 .atp-rider.is-push > i {
  width: 9px;
  height: 3px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 8px 2px rgba(var(--acc-rgb), .8);
}
.ace-topic-layout.atp-v2 .atp-rider.is-glint > i {
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  box-shadow: 0 0 8px 1px rgba(var(--acc-rgb), .7);
}
.ace-topic-layout.atp-v2 .atp-rider.is-car > i {
  width: 12px;
  height: 6px;
  border-radius: 2px;
  background: var(--acc);
  box-shadow: 0 0 10px 1px rgba(var(--acc-rgb), .6), inset -3px 0 0 rgba(255, 255, 255, .7);
}
.ace-topic-layout.atp-v2 .atp-rider.is-token > i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--acc);
  background: radial-gradient(circle, #fff 0 2px, transparent 2.5px);
  box-shadow: 0 0 12px 2px rgba(var(--acc-rgb), .55);
}
.ace-topic-layout.atp-v2 .atp-rider.is-cut > i {
  width: 0;
  height: 132px;
  border-left: 1.2px dashed rgba(var(--atp-ink), .65);
}
.ace-topic-layout.atp-v2 .atp-rider.is-cut.is-tall > i { height: 150px; }
.ace-topic-layout.atp-v2 .atp-rider.is-tangent > i {
  width: 128px;
  height: 1.8px;
  border-radius: 1px;
  background: var(--acc);
  box-shadow: 0 0 8px rgba(var(--acc-rgb), .5);
}
.ace-topic-layout.atp-v2 .atp-rider.is-tangent > i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px var(--acc);
}
.ace-topic-layout.atp-v2 .atp-rider.is-link > i {
  width: 100px;
  height: 1.4px;
  background: repeating-linear-gradient(90deg, rgba(var(--atp-ink), .75) 0 2px, transparent 2px 5px);
}
.ace-topic-layout.atp-v2 .atp-rider.is-grain > i {
  width: 4.4px;
  height: 4.4px;
  border-radius: 50%;
  background: rgba(var(--atp-ink), .85);
}
.ace-topic-layout.atp-v2 .atp-rider.is-grain.is-lg > i { width: 6.8px; height: 6.8px; }
.ace-topic-layout.atp-v2 .atp-rider.is-grain.is-sm > i { width: 3.2px; height: 3.2px; }
.ace-topic-layout.atp-v2 .atp-rider.is-grain.is-xs > i { width: 2px; height: 2px; }
/* A ring at a point (the script times it). */
.ace-topic-layout.atp-v2 .atp-ping {
  position: absolute;
  left: calc(var(--x) * 1px);
  top: calc(var(--y) * 1px);
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  border: 1.5px solid var(--acc);
  opacity: 0;
}
.ace-topic-layout.atp-v2 .atp-ping.is-key,
.ace-topic-layout.atp-v2 .atp-ping.is-ink { border-color: rgba(var(--atp-ink), .9); }
.ace-topic-layout.atp-v2 .atp-ping.is-box { width: 40px; height: 26px; margin: -13px 0 0 -20px; border-radius: 6px; }

/* Layers whose resting state is hidden. */
.ace-topic-layout.atp-v2 .ly-cracks,
.ace-topic-layout.atp-v2 .ly-couple,
.ace-topic-layout.atp-v2 .ly-cut,
.ace-topic-layout.atp-v2 .ly-n4,
.ace-topic-layout.atp-v2 .ly-n16,
.ace-topic-layout.atp-v2 .ly-spec-neck,
.ace-topic-layout.atp-v2 .ly-spec-crack { opacity: 0; }

/* Small labels give way on a small figure, where they would be too small
   to read; the key labels stay. */
@container atp-fig (max-width: 339px) {
  .atp-v2 .atp-fig :is(.dim, .lg, .tx:not(.k), .atp-ping.is-dm) { display: none; }
}

@keyframes atp-draw { to { stroke-dashoffset: 0; } }
@keyframes atp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes atp-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes atp-turn { to { transform: rotate(360deg); } }
@keyframes atp-slide-r { from { transform: translateX(-80px); } to { transform: translateX(0); } }
@keyframes atp-flow { from { transform: translateX(-20px); } to { transform: translateX(0); } }
@keyframes atp-shear { from { transform: translateX(-40px); } to { transform: translateX(0); } }
@keyframes atp-heave {
  0%, 100% { transform: none; }
  25% { transform: translateY(-1.15%); }
  75% { transform: translateY(1.15%); }
}
@keyframes atp-sag { 0%, 18%, 100% { transform: none; } 52%, 70% { transform: scaleY(.45); } }
@keyframes atp-pull { 0%, 18%, 100% { transform: none; } 52%, 70% { transform: scaleX(1.5); } }
@keyframes atp-fill { 0%, 14%, 100% { transform: none; } 46%, 70% { transform: scaleY(1.882); } }
@keyframes atp-air { 0%, 18%, 100% { opacity: 1; } 40%, 74% { opacity: 0; } }
@keyframes atp-wlabel { 0%, 14%, 100% { transform: none; } 46%, 70% { transform: translateY(-7.5%); } }
@keyframes atp-u { 0%, 14%, 100% { transform: none; } 46%, 66% { transform: scale(.72); } }
@keyframes atp-sat { 0%, 14%, 100% { transform: none; } 46%, 66% { transform: scaleY(.72); } }
@keyframes atp-wt { 0%, 14%, 100% { transform: none; } 46%, 66% { transform: translateY(13.7%); } }
@keyframes atp-bend { 0%, 12%, 100% { transform: none; } 32%, 48% { transform: scaleY(.02); } 82% { transform: none; } }
@keyframes atp-load { 0%, 12%, 100% { transform: none; opacity: 1; } 32%, 48% { transform: translateY(-5%); opacity: .3; } 82% { transform: none; opacity: 1; } }
@keyframes atp-delta { 0%, 14%, 100% { opacity: 1; } 28%, 60% { opacity: 0; } 84% { opacity: 1; } }
@keyframes atp-block { 0%, 10%, 100% { transform: none; } 28% { transform: scaleX(.12); } 70% { transform: none; } }
@keyframes atp-couple { 0%, 56%, 100% { opacity: 0; } 70% { opacity: 1; } 88% { opacity: 0; } }
@keyframes atp-buckle { 0%, 10%, 100% { transform: none; } 26%, 40% { transform: scaleX(.02); } 78% { transform: none; } }
@keyframes atp-press { 0%, 10%, 100% { transform: none; opacity: 1; } 26%, 40% { transform: translateY(-4%); opacity: .35; } 78% { transform: none; opacity: 1; } }
@keyframes atp-tension { 0%, 100% { transform: none; } 50% { transform: scaleX(1.25); } }
@keyframes atp-platen { 0%, 20%, 100% { transform: none; } 45%, 62% { transform: translateY(.9%); } }
@keyframes atp-cracks { 0%, 48%, 100% { opacity: 0; } 55%, 84% { opacity: 1; } }
@keyframes atp-ram {
  0% { transform: none; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  7% { transform: translateY(-14%); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  11% { transform: none; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  18% { transform: translateY(-14%); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  22% { transform: none; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  29% { transform: translateY(-14%); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  33%, 100% { transform: none; }
}
@keyframes atp-n4 { 0%, 4% { opacity: 0; } 9%, 30% { opacity: 1; } 35%, 100% { opacity: 0; } }
@keyframes atp-n8 { 0% { opacity: 1; } 4%, 35% { opacity: 0; } 40%, 62% { opacity: 1; } 67%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes atp-n16 { 0%, 62% { opacity: 0; } 67%, 90% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes atp-lit { 0%, 100% { opacity: 0; } 8%, 26% { opacity: 1; } 40% { opacity: 0; } }
/* The tension test, in step with the point on the curve (6.6s: 4.6s on
   the curve, then the broken bar). The gauge length stretches by the
   strain the point has reached, and the ends move apart with it; the bar
   necks from σu (51.8%) and breaks at fracture (69.7%). Then it is taken
   out, and a new one goes in. */
@keyframes atp-spec-mid {
  0% { transform: none; opacity: 1; }
  17.6% { transform: scaleY(1.0227); }
  27.6% { transform: scaleY(1.0707); }
  34.8% { transform: scaleY(1.096); }
  43.2% { transform: scaleY(1.1313); }
  51.8% { transform: scaleY(1.1717); opacity: 1; }
  59.9% { transform: scaleY(1.2096); }
  65.6% { transform: scaleY(1.2348); opacity: 0; }
  69.7% { transform: scaleY(1.25); }
  94% { transform: scaleY(1.25); }
  95% { transform: none; }
  96% { opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes atp-spec-neck {
  0% { transform: none; opacity: 0; }
  17.6% { transform: scaleY(1.0227); }
  27.6% { transform: scaleY(1.0707); }
  34.8% { transform: scaleY(1.096); }
  43.2% { transform: scaleY(1.1313); }
  51.8% { transform: scaleY(1.1717); opacity: 0; }
  59.9% { transform: scaleY(1.2096); }
  65.6% { transform: scaleY(1.2348); opacity: 1; }
  69.7% { transform: scaleY(1.25); }
  90% { opacity: 1; }
  94% { transform: scaleY(1.25); opacity: 0; }
  95% { transform: none; }
  100% { transform: none; opacity: 0; }
}
@keyframes atp-spec-top {
  0% { transform: none; opacity: 1; }
  17.6% { transform: translateY(-.386%); }
  27.6% { transform: translateY(-1.202%); }
  34.8% { transform: translateY(-1.631%); }
  43.2% { transform: translateY(-2.232%); }
  51.8% { transform: translateY(-2.919%); }
  59.9% { transform: translateY(-3.563%); }
  65.6% { transform: translateY(-3.992%); }
  69.7% { transform: translateY(-4.25%); }
  90% { opacity: 1; }
  94% { transform: translateY(-4.25%); opacity: 0; }
  95% { transform: none; }
  96% { opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes atp-spec-bot {
  0% { transform: none; opacity: 1; }
  17.6% { transform: translateY(.386%); }
  27.6% { transform: translateY(1.202%); }
  34.8% { transform: translateY(1.631%); }
  43.2% { transform: translateY(2.232%); }
  51.8% { transform: translateY(2.919%); }
  59.9% { transform: translateY(3.563%); }
  65.6% { transform: translateY(3.992%); }
  69.7% { transform: translateY(4.25%); }
  90% { opacity: 1; }
  94% { transform: translateY(4.25%); opacity: 0; }
  95% { transform: none; }
  96% { opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes atp-spec-crack { 0%, 69.6% { opacity: 0; } 70.6%, 90% { opacity: 1; } 94%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  /* The figure draws itself once, as an instructor would sketch it. */
  .atp-js:not(.atp-paused) .ace-topic-layout.atp-v2 .atp-fig .dr {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: atp-draw var(--t, .7s) cubic-bezier(.45, 0, .2, 1) var(--d, 0s) forwards;
  }
  .atp-js:not(.atp-paused) .ace-topic-layout.atp-v2 .atp-fig .fd {
    opacity: 0;
    animation: atp-fade .55s ease var(--d, 0s) forwards;
  }
  .atp-js:not(.atp-paused) .ace-topic-layout.atp-v2 .atp-fig .dp {
    opacity: 0;
    animation: atp-drop .5s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) forwards;
  }

  /* Then its idea at work, for as long as it is running (the script adds
     is-live after the drawing, and is-held while it should keep still). */
  .atp-js:not(.atp-paused) .atp-v2 .atp-fig.is-live .win-glint .atp-run { animation: atp-slide-r 9s linear infinite; }
  .atp-js:not(.atp-paused) .atp-v2 .atp-fig.is-live .win-flow .atp-run { animation: atp-flow .55s linear infinite; }
  .atp-js:not(.atp-paused) .atp-v2 .atp-fig.is-live .win-shear .atp-run { animation: atp-shear 1s linear infinite; }
  .atp-js:not(.atp-paused) .atp-v2 .atp-fig.is-live .win-shear.s0 .atp-run { animation-duration: 9s; }
  .atp-js:not(.atp-paused) .atp-v2 .atp-fig.is-live .win-shear.s1 .atp-run { animation-duration: 4.2s; }
  .atp-js:not(.atp-paused) .atp-v2 .atp-fig.is-live .win-shear.s2 .atp-run { animation-duration: 2.7s; }
  .atp-js:not(.atp-paused) .atp-v2 .atp-fig.is-live .win-shear.s3 .atp-run { animation-duration: 2s; }
  .atp-js:not(.atp-paused) .atp-v2 .atp-fig.is-live .win-shear.s4 .atp-run { animation-duration: 1.6s; }
  .atp-js:not(.atp-paused) .atp-v2 .atp-fig.is-live .ly-heave { animation: atp-heave 3.8s cubic-bezier(.37, 0, .63, 1) infinite; }
  .atp-js:not(.atp-paused) .atp-v2 .atp-fig.is-live .ly-sag { animation: atp-sag 6.4s ease-in-out infinite; }
  .atp-js:not(.atp-paused) .atp-v2 .atp-fig[data-fig="tape"].is-live :is(.ly-pull-l, .ly-pull-r) { animation: atp-pull 6.4s ease-in-out infinite; }
  .atp-js:not(.atp-paused) .atp-v2 .atp-fig.is-live .ly-fill { animation: atp-fill 7s ease-in-out infinite; }
  .atp-js:not(.atp-paused) .atp-v2 .atp-fig.is-live .ly-air { animation: atp-air 7s ease-in-out infinite; }
  .atp-js:not(.atp-paused) .atp-v2 .atp-fig.is-live .ly-wlabel { animation: atp-wlabel 7s ease-in-out infinite; }
  .atp-js:not(.atp-paused) .atp-v2 .atp-fig.is-live .ly-u { animation: atp-u 8s ease-in-out infinite; }
  .atp-js:not(.atp-paused) .atp-v2 .atp-fig.is-live .ly-sat { animation: atp-sat 8s ease-in-out infinite; }
  .atp-js:not(.atp-paused) .atp-v2 .atp-fig.is-live .ly-wt { animation: atp-wt 8s ease-in-out infinite; }
  .atp-js:not(.atp-paused) .atp-v2 .atp-fig.is-live .ly-bend { animation: atp-bend 6.5s ease-in-out infinite; }
  .atp-js:not(.atp-paused) .atp-v2 .atp-fig.is-live .ly-load { animation: atp-load 6.5s ease-in-out infinite; }
  .atp-js:not(.atp-paused) .atp-v2 .atp-fig.is-live .ly-delta { animation: atp-delta 6.5s ease-in-out infinite; }
  .atp-js:not(.atp-paused) .atp-v2 .atp-fig.is-live .ly-block { animation: atp-block 6s ease-in-out infinite; }
  .atp-js:not(.atp-paused) .atp-v2 .atp-fig.is-live .ly-couple { animation: atp-couple 6s ease-in-out infinite; }
  .atp-js:not(.atp-paused) .atp-v2 .atp-fig.is-live .ly-buckle { animation: atp-buckle 6.5s ease-in-out infinite; }
  .atp-js:not(.atp-paused) .atp-v2 .atp-fig.is-live .ly-press { animation: atp-press 6.5s ease-in-out infinite; }
  .atp-js:not(.atp-paused) .atp-v2 .atp-fig[data-fig="steel"].is-live :is(.ly-pull-l, .ly-pull-r) { animation: atp-tension 3.25s ease-in-out infinite; }
  .atp-js:not(.atp-paused) .atp-v2 .atp-fig.is-live .ly-platen { animation: atp-platen 6s ease-in-out infinite; }
  .atp-js:not(.atp-paused) .atp-v2 .atp-fig.is-live .ly-cracks { animation: atp-cracks 6s ease-in-out infinite; }
  .atp-js:not(.atp-paused) .atp-v2 .atp-fig.is-live .ly-ram { animation: atp-ram 6s linear infinite; }
  .atp-js:not(.atp-paused) .atp-v2 .atp-fig.is-live .ly-n4 { animation: atp-n4 8s ease infinite; }
  .atp-js:not(.atp-paused) .atp-v2 .atp-fig.is-live .ly-n8 { animation: atp-n8 8s ease infinite; }
  .atp-js:not(.atp-paused) .atp-v2 .atp-fig.is-live .ly-n16 { animation: atp-n16 8s ease infinite; }
  .atp-js:not(.atp-paused) .atp-v2 .atp-fig.is-live .ly-cut { animation: atp-lit 5.4s ease-in-out infinite; }
  .atp-js:not(.atp-paused) .atp-v2 .atp-fig.is-live .ly-cut.c1 { animation-delay: .45s; }
  .atp-js:not(.atp-paused) .atp-v2 .atp-fig.is-live .ly-cut.c2 { animation-delay: .9s; }
  .atp-js:not(.atp-paused) .atp-v2 .atp-fig.is-live .ly-spec-mid { animation: atp-spec-mid 6.6s linear infinite; }
  .atp-js:not(.atp-paused) .atp-v2 .atp-fig.is-live .ly-spec-neck { animation: atp-spec-neck 6.6s linear infinite; }
  .atp-js:not(.atp-paused) .atp-v2 .atp-fig.is-live .ly-spec-top { animation: atp-spec-top 6.6s linear infinite; }
  .atp-js:not(.atp-paused) .atp-v2 .atp-fig.is-live .ly-spec-bot { animation: atp-spec-bot 6.6s linear infinite; }
  .atp-js:not(.atp-paused) .atp-v2 .atp-fig.is-live .ly-spec-crack { animation: atp-spec-crack 6.6s linear infinite; }
  .atp-js:not(.atp-paused) .atp-v2 .atp-fig.is-live .stat { opacity: .3; transition: opacity .6s ease; }

  /* Water comes and goes gently as the loop starts and stops. */
  .ace-topic-layout.atp-v2 .atp-run { transition: opacity .8s ease; }

  /* Holding still: everything stops where it is. */
  .atp-v2 .atp-fig.is-held,
  .atp-v2 .atp-fig.is-held * { animation-play-state: paused !important; }

  /* The moving parts get their own layers only once they are moving. */
  .atp-js:not(.atp-paused) .atp-v2 .atp-fig.is-live :is(.atp-ly, .atp-run, .atp-rider, .atp-ping) { will-change: transform, opacity; }
}


/* ============================================================ the video */

body.ace-player .ace-topic-layout.atp-v2 .ace-video-tabs {
  display: block;
  margin: 0 0 18px !important;
  padding: 0;
  border: 1px solid var(--atp-line);
  border-radius: 16px;
  background: var(--atp-card);
  overflow: hidden;
}

/* The parts: an underline tab row on the card's top edge. ACE Lesson Steps'
   seven batch hues and attached-tab shape give way to it; the labels tell
   the batches apart. */
body.ace-player .ace-topic-layout.atp-v2 .ace-video-tabs > .ace-vt-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 2px;
  margin: 0 !important;
  padding: 0 12px;
  border: 0;
  border-bottom: 1px solid var(--atp-line);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-video-tabs > .ace-vt-nav::-webkit-scrollbar { display: none; }
body.ace-player .ace-topic-layout.atp-v2 .ace-video-tabs > .ace-vt-nav > .ace-vt-tab {
  flex: 0 0 auto;
  position: relative;
  margin: 0 !important;
  padding: 13px 12px 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--atp-muted) !important;
  font-family: var(--atp-body-font) !important;
  font-size: .8rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none !important;
  transition: color .15s ease;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-video-tabs > .ace-vt-nav > .ace-vt-tab::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: transparent;
  transition: background-color .15s ease;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-video-tabs > .ace-vt-nav > .ace-vt-tab:hover { color: var(--atp-head) !important; }
body.ace-player .ace-topic-layout.atp-v2 .ace-video-tabs > .ace-vt-nav > .ace-vt-tab.is-active { color: var(--atp-head) !important; }
body.ace-player .ace-topic-layout.atp-v2 .ace-video-tabs > .ace-vt-nav > .ace-vt-tab.is-active::after { background: var(--atp-teal-text); }
body.ace-player .ace-topic-layout.atp-v2 .ace-video-tabs > .ace-vt-nav > .ace-vt-tab:focus-visible { outline-offset: -3px; }

body.ace-player .ace-topic-layout.atp-v2 .ace-video-tabs > .ace-vt-pane { padding: 12px 12px 0; }
body.ace-player .ace-topic-layout.atp-v2 .ace-video-tabs > .ace-vt-pane:not(.is-active) { display: none; }
body.ace-player .ace-topic-layout.atp-v2 .ace-video-tabs .ace-vt-frame {
  border-radius: 11px !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06);
}

/* The copyright notice: one quiet line under the video, the lock in front. */
body.ace-player .ace-topic-layout.atp-v2 .ace-lecture-copyright {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: none;
  margin: 0 !important;
  padding: 12px 16px 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-video-tabs + .ace-lecture-copyright,
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-main > .ace-lecture-copyright {
  margin: -6px 0 18px !important;
  padding: 0 4px !important;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-lecture-copyright-icon {
  flex: none;
  margin-top: 1px;
  color: var(--atp-muted) !important;
  background: none !important;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-lecture-copyright-icon svg { width: 14px !important; height: 14px !important; }
body.ace-player .ace-topic-layout.atp-v2 .ace-lecture-copyright-body { min-width: 0; }
body.ace-player .ace-topic-layout.atp-v2 .ace-lecture-copyright-title {
  margin: 0 !important;
  font-family: var(--atp-body-font) !important;
  font-size: .74rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--atp-text) !important;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-lecture-copyright-text {
  margin: 1px 0 0 !important;
  font-size: .72rem !important;
  line-height: 1.45 !important;
  color: var(--atp-muted) !important;
}


/* ============================================================ the lecture */

/* LearnDash's infobar: the band carries both its breadcrumb (as the <h1>)
   and its progress (as the strip), so it would say each of them twice. */
body.ace-player .ace-topic-layout.atp-v2 .learndash-wrapper .ld-topic-status { display: none !important; }

/* LearnDash's own previous / next box, emptied by ACE Lesson Steps: hidden
   only while it has nothing in it to click. */
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-main .ld-content-actions:not(:has(a, button, input, form)) { display: none !important; }

body.ace-player .ace-topic-layout.atp-v2 .ld-tab-content > br:first-child { display: none; }

body.ace-player .ace-topic-layout.atp-v2 .ace-topic-body,
body.ace-player .ace-topic-layout.atp-v2 .learndash-wrapper .ace-topic-body {
  margin: 0 !important;
  padding: 26px 30px 28px !important;
  border: 1px solid var(--atp-line) !important;
  border-radius: 16px !important;
  background: var(--atp-card) !important;
  box-shadow: none !important;
  color: var(--atp-text);
}
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-body > p:empty { display: none; }

body.ace-player .ace-topic-layout.atp-v2 .ace-topic-body :is(p, li) {
  font-size: .95rem !important;
  line-height: 1.7 !important;
  color: var(--atp-text) !important;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-body > :is(p, ul, ol, h2, h3, h4, table, blockquote) { max-width: 70ch; }
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-body > p:first-of-type:not(:empty),
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-body > p:empty + p {
  font-size: 1.04rem !important;
  line-height: 1.62 !important;
  color: var(--atp-head) !important;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-body :is(h2, h3, h4) {
  margin: 1.7em 0 .55em !important;
  font-family: var(--atp-head-font) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -.01em !important;
  color: var(--atp-head) !important;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-body h2 { font-size: 1.18rem !important; }
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-body h3 { font-size: 1.04rem !important; }
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-body h4 { font-size: .95rem !important; }
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-body > :first-child,
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-body > :is(.ace-ls-view, [hidden], p:empty) + :not(p:empty),
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-body > .ace-ls-view + p:empty + * { margin-top: 0 !important; }
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-body a { color: var(--atp-teal-text) !important; }

/* Lists: a short teal tick for points; numbered steps where the lecturer
   numbered them (a worked example is a sequence). */
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-body ul.ace-ls-list,
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-body > ul {
  margin: 0 0 1.1em !important;
  padding: 0 !important;
  list-style: none !important;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-body ul.ace-ls-list > li,
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-body > ul > li {
  position: relative;
  margin: 0 !important;
  padding: 7px 0 7px 22px !important;
  border: 0 !important;
  border-top: 1px solid var(--atp-line) !important;
  background: none !important;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-body ul.ace-ls-list > li:first-child,
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-body > ul > li:first-child { border-top: 0 !important; }
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-body ul.ace-ls-list > li::before,
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-body > ul > li::before {
  content: "" !important;
  position: absolute;
  left: 2px;
  top: calc(7px + .85em - 1px);
  width: 9px;
  height: 2px;
  border-radius: 2px;
  background: var(--atp-teal-text) !important;
  transform: none;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-body ol.ace-ls-list,
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-body > ol {
  margin: 0 0 1.1em !important;
  padding: 0 !important;
  list-style: none !important;
  counter-reset: atp-step;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-body ol.ace-ls-list > li,
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-body > ol > li {
  position: relative;
  margin: 0 !important;
  padding: 7px 0 7px 34px !important;
  border: 0 !important;
  background: none !important;
  counter-increment: atp-step;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-body ol.ace-ls-list > li::before,
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-body > ol > li::before {
  content: counter(atp-step) !important;
  position: absolute;
  left: 0;
  top: 7px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(var(--atp-t-rgb), .45);
  background: rgba(var(--atp-t-rgb), .1) !important;
  color: var(--atp-teal-text);
  font-family: var(--atp-head-font);
  font-size: .7rem;
  font-weight: 700;
  line-height: 1;
}
/* The step rail, joining the numbers. */
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-body ol.ace-ls-list > li:not(:last-child)::after,
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-body > ol > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 31px;
  bottom: -7px;
  width: 1px;
  background: rgba(var(--atp-t-rgb), .25);
}
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-body img { border-radius: 10px; }
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-body table { font-size: .9rem; }


/* ============================================================ quizzes in the lecture column */

/* A topic with no side column keeps LearnDash's quiz list where LearnDash
   puts it, under the lecture. It gets the side column's dress: one
   heading, a row per quiz, Start or Review. */
body.ace-player .ace-topic-layout.atp-v2 > .ace-topic-main .ld-table-list.ld-quiz-list {
  margin: 18px 0 0 !important;
  padding: 18px 20px 16px !important;
  border: 1px solid var(--atp-line) !important;
  border-radius: 16px !important;
  background: var(--atp-card) !important;
  box-shadow: none !important;
  overflow: visible !important;
}
body.ace-player .ace-topic-layout.atp-v2 > .ace-topic-main .ld-quiz-list > :is(.ld-table-list-header, .ld-table-list-footer) { display: none !important; }
body.ace-player .ace-topic-layout.atp-v2 > .ace-topic-main .ld-quiz-list .ld-table-list-items {
  margin: 12px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}
body.ace-player .ace-topic-layout.atp-v2 > .ace-topic-main .ld-quiz-list .ld-table-list-item {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
}
body.ace-player .ace-topic-layout.atp-v2 > .ace-topic-main .ld-quiz-list .ld-table-list-item + .ld-table-list-item { margin-top: 8px !important; }
body.ace-player .ace-topic-layout.atp-v2 > .ace-topic-main .ld-quiz-list :is(.ld-table-list-item-quiz, .ld-tooltip) {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.ace-player .ace-topic-layout.atp-v2 > .ace-topic-main .ld-quiz-list a.ld-table-list-item-preview {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--atp-line2) !important;
  border-radius: 12px !important;
  background: var(--atp-inset) !important;
  color: var(--atp-head) !important;
  text-decoration: none !important;
  transition: border-color .15s ease, background-color .15s ease;
}
body.ace-player .ace-topic-layout.atp-v2 > .ace-topic-main .ld-quiz-list a.ld-table-list-item-preview:hover {
  border-color: rgba(var(--atp-t-rgb), .55) !important;
  background: rgba(var(--atp-t-rgb), .06) !important;
}
body.ace-player .ace-topic-layout.atp-v2 > .ace-topic-main .ld-quiz-list .ld-table-list-item-preview > .ld-status-icon { display: none !important; }
body.ace-player .ace-topic-layout.atp-v2 > .ace-topic-main .ld-quiz-list .ld-item-title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--atp-body-font) !important;
  font-size: .9rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--atp-head) !important;
}


/* ACE Rankings' notice, where a ranked quiz has no side column to sit in:
   it stays where that plugin puts it, above the lecture, as a quiet card. */
body.ace-player .ace-topic-layout.atp-v2 > .ace-topic-main .ace-rank-chooser:not(.is-in-quiz-card) {
  margin: 0 0 18px !important;
  padding: 16px 20px !important;
  border: 1px solid var(--atp-line) !important;
  border-radius: 16px !important;
  background: var(--atp-card) !important;
  box-shadow: none !important;
}
body.ace-player .ace-topic-layout.atp-v2 > .ace-topic-main .ace-rank-chooser:not(.is-in-quiz-card) .ace-rank-chooser-head { gap: 14px; align-items: center; }
body.ace-player .ace-topic-layout.atp-v2 > .ace-topic-main .ace-rank-chooser:not(.is-in-quiz-card) :is(.ace-rank-chooser-head > br, .ace-rank-chooser-icon > br, p:empty) { display: none !important; }
body.ace-player .ace-topic-layout.atp-v2 > .ace-topic-main .ace-rank-chooser:not(.is-in-quiz-card) .ace-rank-chooser-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(var(--atp-warn-rgb), .12);
  color: var(--atp-warn);
}
body.ace-player .ace-topic-layout.atp-v2 > .ace-topic-main .ace-rank-chooser:not(.is-in-quiz-card) h3 {
  margin: 0 0 3px !important;
  font-family: var(--atp-body-font) !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  color: var(--atp-head) !important;
}
body.ace-player .ace-topic-layout.atp-v2 > .ace-topic-main .ace-rank-chooser:not(.is-in-quiz-card) p {
  font-size: .8rem !important;
  line-height: 1.55 !important;
  color: var(--atp-muted) !important;
}
body.ace-player .ace-topic-layout.atp-v2 > .ace-topic-main .ace-rank-chooser:not(.is-in-quiz-card) :is(.ace-rank-chooser-locked, .ace-rank-chooser-body) {
  margin-top: 14px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--atp-line) !important;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-rank-chooser-locked strong { color: var(--atp-teal-text) !important; font-weight: 600; }


/* ============================================================ quiz rows, both places */

body.ace-player .ace-topic-layout.atp-v2 :is(.ace-topic-aside, .ace-topic-main) .atp-card-head {
  display: flex !important;
  align-items: center;
  gap: 9px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-family: var(--atp-head-font) !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--atp-head) !important;
}
body.ace-player .ace-topic-layout.atp-v2 :is(.ace-topic-aside, .ace-topic-main) .atp-card-head svg { flex: none; width: 16px; height: 16px; color: var(--atp-teal-text); }

body.ace-player .ace-topic-layout.atp-v2 .atp-quiz-icon {
  display: grid !important;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(var(--atp-t-rgb), .12);
  color: var(--atp-teal-text) !important;
}
body.ace-player .ace-topic-layout.atp-v2 .atp-quiz-icon svg { width: 15px; height: 15px; }
body.ace-player .ace-topic-layout.atp-v2 .atp-quiz-go {
  flex: none;
  margin-left: auto;
  padding: 7px 14px !important;
  border-radius: 10px !important;
  border: 1px solid var(--atp-line2) !important;
  background: rgba(255, 255, 255, .06) !important;
  color: var(--atp-head) !important;
  font-family: var(--atp-body-font) !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease;
}
body.ace-player .ace-topic-layout.atp-v2 .learndash-incomplete .atp-quiz-go,
body.ace-player .ace-topic-layout.atp-v2 .ld-table-list-item:not(.learndash-complete) .atp-quiz-go {
  border-color: transparent !important;
  background: var(--atp-teal-fill) !important;
  color: #fff !important;
}
body.ace-player .ace-topic-layout.atp-v2 a.ld-table-list-item-preview:hover .atp-quiz-go { border-color: rgba(var(--atp-t-rgb), .6) !important; }


/* ============================================================ the side column */

/* A margin, not a stack of boxes: sections divided by hairlines. On a
   narrow screen it follows the lecture, under a hairline of its own. */
@media (max-width: 1199.98px) {
  body.ace-player .ace-topic-layout.atp-v2 > .ace-topic-aside {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--atp-line);
  }
}
body.ace-player .ace-topic-layout.atp-v2 > .ace-topic-aside {
  display: flex;
  flex-direction: column;
}
body.ace-player .ace-topic-layout.atp-v2 > .ace-topic-aside > :is(.ace-downloads, .ace-ls-quizzes, .ace-rl-card) {
  order: 0 !important;
  margin: 0 !important;
  padding: 0 0 20px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
body.ace-player .ace-topic-layout.atp-v2 > .ace-topic-aside > :is(.ace-downloads, .ace-ls-quizzes, .ace-rl-card) ~ :is(.ace-downloads, .ace-ls-quizzes, .ace-rl-card) {
  padding-top: 20px !important;
  border-top: 1px solid var(--atp-line) !important;
}

/* Headings: the same in all three. */
body.ace-player .ace-topic-layout.atp-v2 > .ace-topic-aside :is(.ace-dl-head, .ace-rl-head) {
  display: flex !important;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px !important;
  padding: 0 !important;
  font-family: var(--atp-head-font) !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--atp-head) !important;
}
body.ace-player .ace-topic-layout.atp-v2 > .ace-topic-aside :is(.ace-dl-head, .ace-rl-head) svg { width: 16px; height: 16px; color: var(--atp-teal-text); }
body.ace-player .ace-topic-layout.atp-v2 > .ace-topic-aside .ace-ls-quizzes .atp-card-head { margin-bottom: 12px !important; }

/* ---- files ---- */

body.ace-player .ace-topic-layout.atp-v2 > .ace-topic-aside .ace-downloads { display: block !important; }
body.ace-player .ace-topic-layout.atp-v2 .ace-dl-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-dl-row {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  grid-template-areas: "icon name btn" "icon type btn";
  align-items: center;
  column-gap: 11px;
  padding: 10px 10px 10px 8px !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .03) !important;
  text-decoration: none !important;
  transition: background-color .15s ease, border-color .15s ease;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-dl-row:hover,
body.ace-player .ace-topic-layout.atp-v2 .ace-dl-row:focus-visible {
  background: rgba(var(--atp-t-rgb), .07) !important;
  border-color: rgba(var(--atp-t-rgb), .4) !important;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-dl-row-icon {
  grid-area: icon;
  display: grid !important;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: 0 !important;
  border-radius: 8px;
  background: rgba(var(--atp-t-rgb), .12);
  color: var(--atp-teal-text) !important;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-dl-row-icon svg { width: 15px; height: 15px; }
body.ace-player .ace-topic-layout.atp-v2 .ace-dl-row-text { display: contents; }
body.ace-player .ace-topic-layout.atp-v2 .ace-dl-row-text b {
  grid-area: name;
  align-self: end;
  font-size: .82rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--atp-head) !important;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-dl-row-text em {
  grid-area: type;
  align-self: start;
  margin-top: 2px;
  font-style: normal;
  font-size: .7rem !important;
  color: var(--atp-muted) !important;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-dl-row:hover .ace-dl-row-text b { color: var(--atp-head) !important; }
body.ace-player .ace-topic-layout.atp-v2 .ace-dl-row > .ace-dl-btn {
  grid-area: btn;
  margin: 0 !important;
  justify-self: end;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px !important;
  border-radius: 10px !important;
  border: 1px solid var(--atp-line2) !important;
  background: rgba(255, 255, 255, .06) !important;
  color: var(--atp-head) !important;
  font-family: var(--atp-body-font) !important;
  font-size: .74rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  transition: background-color .15s ease, border-color .15s ease;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-dl-btn.is-solid {
  border-color: transparent !important;
  background: var(--atp-teal-fill) !important;
  color: #fff !important;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-dl-row:hover .ace-dl-btn { background: rgba(255, 255, 255, .1) !important; }
body.ace-player .ace-topic-layout.atp-v2 .ace-dl-row:hover .ace-dl-btn.is-solid { background: #0a8a81 !important; }

/* The recordings, behind the terms. */
body.ace-player .ace-topic-layout.atp-v2 .ace-dl-card-video {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-dl-terms { margin: 4px 0 0 !important; padding: 0 2px !important; }
body.ace-player .ace-topic-layout.atp-v2 .ace-dl-terms-label {
  font-size: .78rem !important;
  line-height: 1.45 !important;
  color: var(--atp-text) !important;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-dl-terms-check { border-radius: 5px; }
body.ace-player .ace-topic-layout.atp-v2 .ace-dl-terms-check:checked {
  background: var(--atp-teal-fill);
  border-color: var(--atp-teal-fill);
}
body.ace-player .ace-topic-layout.atp-v2 .ace-dl-terms .ace-dl-terms-link,
body.ace-player .ace-topic-layout.atp-v2 .ace-dl-terms-link {
  color: var(--atp-teal-text) !important;
  font-size: inherit !important;
  font-weight: 600 !important;
  border-bottom: 1px solid rgba(var(--atp-t-rgb), .45) !important;
}

/* ---- the quiz ---- */

body.ace-player .ace-topic-layout.atp-v2 .ace-topic-aside .ace-ls-quizzes {
  display: block !important;
  overflow: visible !important;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-aside .ace-ls-quizzes > :is(.ld-table-list-header, .ld-table-list-footer) { display: none !important; }
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-aside .ace-ls-quizzes .ace-ls-qnote {
  margin: 0 0 10px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-aside .ace-ls-quizzes .ace-ls-qnote-head { display: block !important; }
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-aside .ace-ls-quizzes :is(.ace-ls-qnote-icon, .ace-ls-qnote-title, .ace-ls-qcount) { display: none !important; }
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-aside .ace-ls-quizzes .ace-ls-qnote-text {
  margin: 0 !important;
  font-size: .76rem !important;
  line-height: 1.5 !important;
  color: var(--atp-muted) !important;
}

/* A ranked quiz: ACE Rankings' notice, as text, minus its callout box. */
body.ace-player .ace-topic-layout.atp-v2 .ace-rank-chooser.is-in-quiz-card {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-rank-chooser.is-in-quiz-card .ace-rank-chooser-head {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 0 8px !important;
  align-items: start;
  margin: 0 !important;
  padding: 0 !important;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-rank-chooser.is-in-quiz-card .ace-rank-chooser-head > div {
  display: block !important;
  grid-column: 2;
  min-width: 0;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-rank-chooser.is-in-quiz-card .ace-rank-chooser-head > br,
body.ace-player .ace-topic-layout.atp-v2 .ace-rank-chooser.is-in-quiz-card .ace-rank-chooser-head > p:empty,
body.ace-player .ace-topic-layout.atp-v2 .ace-rank-chooser.is-in-quiz-card .ace-rank-chooser-icon > br,
body.ace-player .ace-topic-layout.atp-v2 .ace-rank-chooser.is-in-quiz-card p:empty { display: none !important; }
body.ace-player .ace-topic-layout.atp-v2 .ace-rank-chooser.is-in-quiz-card .ace-rank-chooser-icon {
  display: grid !important;
  place-items: center;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  border-radius: 6px !important;
  background: rgba(var(--atp-warn-rgb), .12) !important;
  color: var(--atp-warn) !important;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-rank-chooser.is-in-quiz-card .ace-rank-chooser-icon svg { width: 13px !important; height: 13px !important; }
body.ace-player .ace-topic-layout.atp-v2 .ace-rank-chooser.is-in-quiz-card h3 {
  margin: 2px 0 3px !important;
  font-family: var(--atp-body-font) !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--atp-head) !important;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-rank-chooser.is-in-quiz-card p {
  margin: 0 !important;
  font-size: .76rem !important;
  line-height: 1.5 !important;
  color: var(--atp-muted) !important;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-rank-chooser.is-in-quiz-card .ace-rank-chooser-locked {
  margin: 8px 0 0 30px !important;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-rank-chooser.is-in-quiz-card .ace-rank-chooser-locked strong { color: var(--atp-teal-text) !important; font-weight: 600; }
body.ace-player .ace-topic-layout.atp-v2 .ace-rank-chooser.is-in-quiz-card .ace-rank-chooser-body {
  margin: 12px 0 0 !important;
  padding: 12px 0 0 !important;
  border-top: 1px solid var(--atp-line) !important;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-rank-chooser.is-in-quiz-card .ace-rank-quiz-slot {
  margin: 12px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-rank-chooser.is-in-quiz-card .ace-rank-quiz-slot:empty { display: none !important; }

/* The quiz itself: one row, like a file. */
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-aside .ace-ls-quizzes .ld-table-list-items {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-aside .ace-ls-quizzes .ld-table-list-item {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-aside .ace-ls-quizzes .ld-table-list-item + .ld-table-list-item { margin-top: 6px !important; }
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-aside .ace-ls-quizzes :is(.ld-table-list-item-quiz, .ld-tooltip) {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-aside .ace-ls-quizzes a.ld-table-list-item-preview {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 11px !important;
  row-gap: 0 !important;
  padding: 10px 10px 10px 8px !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .03) !important;
  color: var(--atp-head) !important;
  text-decoration: none !important;
  transition: background-color .15s ease, border-color .15s ease;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-aside .ace-ls-quizzes a.ld-table-list-item-preview:hover,
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-aside .ace-ls-quizzes a.ld-table-list-item-preview:focus-visible {
  background: rgba(var(--atp-t-rgb), .07) !important;
  border-color: rgba(var(--atp-t-rgb), .4) !important;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-aside .ace-ls-quizzes .ld-table-list-item-preview > * { grid-column: auto !important; grid-row: auto !important; }
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-aside .ace-ls-quizzes .ld-table-list-item-preview > .ld-status-icon { display: none !important; }
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-aside .ace-ls-quizzes .ld-table-list-item-preview > .atp-quiz-icon {
  grid-column: 1 !important;
  width: 30px;
  height: 30px;
  margin: 0 !important;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-aside .ace-ls-quizzes .ld-table-list-item-preview .ace-ls-qtext { grid-column: 2 !important; min-width: 0 !important; }
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-aside .ace-ls-quizzes .ld-table-list-item-preview .ld-item-title {
  display: block !important;
  font-family: var(--atp-body-font) !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--atp-head) !important;
  word-break: break-word;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-aside .ace-ls-quizzes .ld-table-list-item-preview .ace-ls-qstate {
  display: block !important;
  margin-top: 2px !important;
  font-size: .7rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  color: var(--atp-muted) !important;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-aside .ace-ls-quizzes .ld-table-list-item-preview .ace-ls-qstate.is-done { color: var(--atp-teal-text) !important; }
body.ace-player .ace-topic-layout.atp-v2 .ace-topic-aside .ace-ls-quizzes .ld-table-list-item-preview .atp-quiz-go {
  grid-column: 3 !important;
  margin: 0 !important;
}
/* The free-tier marks course-player.js adds to a row stay visible. */
body.ace-player .ace-topic-layout.atp-v2 .ld-table-list-item-preview > .ace-lock-icon { width: 14px; height: 14px; color: var(--atp-muted); }

/* ---- related problems ---- */

body.ace-player .ace-topic-layout.atp-v2 .ace-rl-card { display: block !important; }
body.ace-player .ace-topic-layout.atp-v2 .ace-rl-panel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-rl-panel > p:empty { display: none !important; }
body.ace-player .ace-topic-layout.atp-v2 a.ace-rl-item {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding: 9px 8px !important;
  border-radius: 10px !important;
  background: none !important;
  color: var(--atp-text) !important;
  text-decoration: none !important;
  transition: background-color .15s ease, color .15s ease;
}
body.ace-player .ace-topic-layout.atp-v2 a.ace-rl-item:hover,
body.ace-player .ace-topic-layout.atp-v2 a.ace-rl-item:focus-visible {
  background: rgba(var(--atp-t-rgb), .07) !important;
  color: var(--atp-head) !important;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-rl-item-icon { color: var(--atp-teal-text) !important; }
body.ace-player .ace-topic-layout.atp-v2 .ace-rl-item-title {
  font-size: .82rem !important;
  line-height: 1.4 !important;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-rl-item-arrow { color: var(--atp-muted) !important; transition: transform .15s ease, color .15s ease; }
body.ace-player .ace-topic-layout.atp-v2 a.ace-rl-item:hover .ace-rl-item-arrow { color: var(--atp-teal-text) !important; transform: translateX(2px); }
body.ace-player .ace-topic-layout.atp-v2 .ace-rl-foot {
  margin: 8px 0 0 !important;
  padding: 0 8px !important;
  text-align: left !important;
  font-size: .7rem !important;
  color: var(--atp-muted) !important;
}

/* In the lecture column (a topic with no side column), the card keeps a
   card's frame, as the lecture does. */
body.ace-player .ace-topic-layout.atp-v2 > .ace-topic-main .ace-rl-card {
  margin: 18px 0 0 !important;
  padding: 18px 20px 16px !important;
  border: 1px solid var(--atp-line) !important;
  border-radius: 16px !important;
  background: var(--atp-card) !important;
}
body.ace-player .ace-topic-layout.atp-v2 > .ace-topic-main .ace-rl-head {
  display: flex !important;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px !important;
  font-family: var(--atp-head-font) !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
  color: var(--atp-head) !important;
}
body.ace-player .ace-topic-layout.atp-v2 > .ace-topic-main .ace-rl-head svg { width: 16px; height: 16px; color: var(--atp-teal-text); }


/* ============================================================ previous and next */

body.ace-player .ace-topic-layout.atp-v2 .atp-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  border: 0;
}
body.ace-player .ace-topic-layout.atp-v2 a.atp-nav-link {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  max-width: none;
  min-height: 68px;
  padding: 12px 18px;
  border: 1px solid var(--atp-line2);
  border-radius: 14px;
  background: rgba(255, 255, 255, .025);
  color: var(--atp-head) !important;
  text-decoration: none !important;
  transition: border-color .15s ease, background-color .15s ease;
}
body.ace-player .ace-topic-layout.atp-v2 a.atp-nav-link:hover {
  border-color: rgba(var(--atp-t-rgb), .5);
  background: rgba(var(--atp-t-rgb), .07);
}
body.ace-player .ace-topic-layout.atp-v2 a.atp-nav-link.is-next {
  grid-column: 2;
  justify-content: flex-end;
  text-align: right;
}
body.ace-player .ace-topic-layout.atp-v2 a.atp-nav-link svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--atp-teal-text);
  transition: transform .15s ease;
}
body.ace-player .ace-topic-layout.atp-v2 a.atp-nav-link.is-prev:hover svg { transform: translateX(-2px); }
body.ace-player .ace-topic-layout.atp-v2 a.atp-nav-link.is-next:hover svg { transform: translateX(2px); }
body.ace-player .ace-topic-layout.atp-v2 .atp-nav-text { min-width: 0; }
body.ace-player .ace-topic-layout.atp-v2 .atp-nav-text em {
  display: block;
  font-style: normal;
  font-size: .74rem;
  font-weight: 500;
  color: var(--atp-muted);
}
body.ace-player .ace-topic-layout.atp-v2 .atp-nav-text b {
  display: -webkit-box;
  margin-top: 2px;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-family: var(--atp-head-font);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.3;
}


/* ============================================================ the free-tier lock */

body.ace-player .ace-topic-layout.atp-v2 .ace-free-lock {
  display: grid;
  justify-items: start;
  gap: 0;
  padding: 30px 30px 32px !important;
  border: 1px solid var(--atp-line2) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(var(--atp-rgb), .12), transparent 70%),
    var(--atp-card) !important;
  text-align: left !important;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-free-lock-icon {
  display: grid !important;
  place-items: center;
  width: 44px !important;
  height: 44px !important;
  margin: 0 0 16px !important;
  border-radius: 12px !important;
  background: rgba(var(--atp-t-rgb), .12) !important;
  color: var(--atp-teal-text) !important;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-free-lock-icon svg { width: 22px !important; height: 22px !important; }
body.ace-player .ace-topic-layout.atp-v2 .ace-free-lock h2 {
  margin: 0 0 8px !important;
  font-family: var(--atp-head-font) !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  line-height: 1.2 !important;
  color: var(--atp-head) !important;
}
body.ace-player .ace-topic-layout.atp-v2 .ace-free-lock p {
  max-width: 52ch;
  margin: 0 0 20px !important;
  font-size: .92rem !important;
  line-height: 1.6 !important;
  color: var(--atp-text) !important;
}
body.ace-player .ace-topic-layout.atp-v2 a.ace-free-lock-btn {
  display: inline-flex !important;
  align-items: center;
  height: 42px;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--atp-teal-fill) !important;
  color: #fff !important;
  font-family: var(--atp-body-font) !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 8px 22px rgba(var(--atp-rgb), .3), 0 1px 0 rgba(255, 255, 255, .14) inset;
  transition: background-color .15s ease, transform .15s ease;
}
body.ace-player .ace-topic-layout.atp-v2 a.ace-free-lock-btn:hover { background: #0a8a81 !important; transform: translateY(-1px); }


/* ============================================================ narrow */

@media (max-width: 600px) {
  .ace-topic-layout.atp-v2 .atp-band { border-radius: 16px; margin-bottom: 18px; }
  body.ace-player .ace-topic-layout.atp-v2 .ace-topic-body,
  body.ace-player .ace-topic-layout.atp-v2 .learndash-wrapper .ace-topic-body { padding: 20px 18px 22px !important; border-radius: 14px !important; }
  body.ace-player .ace-topic-layout.atp-v2 .ace-video-tabs { border-radius: 14px; }
  body.ace-player .ace-topic-layout.atp-v2 .ace-video-tabs > .ace-vt-pane { padding: 10px 10px 0; }
  body.ace-player .ace-topic-layout.atp-v2 .atp-nav { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  body.ace-player .ace-topic-layout.atp-v2 a.atp-nav-link.is-next { grid-column: 1; }
  body.ace-player .ace-topic-layout.atp-v2 a.atp-nav-link { min-height: 60px; padding: 10px 14px; }
  body.ace-player .ace-topic-layout.atp-v2 .ace-free-lock { padding: 24px 20px 26px !important; }
  body.ace-player .ace-topic-layout.atp-v2 > .ace-topic-main .ld-table-list.ld-quiz-list,
  body.ace-player .ace-topic-layout.atp-v2 > .ace-topic-main .ace-rl-card { padding: 16px !important; }
}