/*
 * Product demo visuals
 * ====================
 *
 * Theme-aware HTML/CSS mock-ups of the extension, used on the landing page and
 * /extension/about in place of raster screenshots. A screenshot captured in the
 * light theme sits badly on the dark one, cannot animate, and cannot be read by
 * anything but eyes; these are built from the same design tokens as the rest of
 * the site, so they follow the theme and stay sharp at any density.
 *
 * .wdemo    a browser window reading an article, animated end to end:
 *           point at a marked word -> definition card -> mark it known.
 * .wpanel   the side panel listing every unfamiliar word on the page.
 * .wquiet   the same page after one week, one month and six months.
 * .wpace    one year of vocabulary at two paces, on one pair of axes.
 * .wctrl    the settings the reader owns: panel side, highlight time, theme,
 *           and the sites the extension is told to stay off.
 *
 * Sizing: everything inside .wdemo is expressed in em from a single clamp()ed
 * font-size driven by container width, so the whole frame scales as one picture
 * and its line breaks never move. Below the compact breakpoint the frame stops
 * scaling and switches composition instead.
 */

/* Browser demo ------------------------------------------------------------ */

.wdemo {
  width: min(100%, 64rem);
  margin-inline: auto;
  container-type: inline-size;
  /* The hero centres its copy; the page inside the frame is a real page. */
  text-align: left;
}

.wdemo__frame {
  position: relative;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  font-size: 0.8125rem;
  font-size: clamp(0.6rem, 1.55cqi, 1rem);
}

.wdemo__chrome {
  display: flex;
  padding: 0.6em 0.85em;
  align-items: center;
  gap: 0.75em;
  background: var(--panel2);
  border-bottom: 1px solid var(--line);
}

.wdemo__dots {
  display: flex;
  flex: none;
  gap: 0.35em;
}

.wdemo__dots span {
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--line);
}

.wdemo__url {
  min-width: 0;
  flex: 1;
  padding: 0.25em 0.7em;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.85em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wdemo__viewport {
  position: relative;
  padding: 1.9em 2.2em 2.1em;
}

.wdemo__article {
  max-width: 42em;
  margin-inline: auto;
  color: var(--ink);
}

.wdemo__kicker {
  margin: 0;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.85em;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.wdemo__headline {
  margin: 0.5em 0 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 2.1em;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.wdemo__byline {
  margin: 0.7em 0 0;
  padding-bottom: 1.1em;
  border-bottom: 1px solid var(--line);
  color: var(--dim);
  font-size: 0.95em;
}

.wdemo__body {
  margin: 1.15em 0 0;
  font-size: 1.15em;
  line-height: 1.62;
}

/* Mirrors how the extension marks an unfamiliar word inside the page. The
   negative margin keeps the mark from claiming inline space, so a word that
   stops being marked does not leave a gap behind. */
.wdemo__w {
  margin: 0 -0.1em;
  padding: 0 0.1em;
  background: var(--accent-soft);
  font-style: normal;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.16em;
}

.wdemo__anchor {
  position: relative;
}

/* The definition card and the pointer both hang off the marked word, so they
   stay attached to it whatever the frame is scaled to. */
.wdemo__card {
  position: absolute;
  z-index: 3;
  top: 1.85em;
  left: -1.1em;
  width: 21em;
  padding: 0.95em 1.05em 1.05em;
  background: var(--panel);
  /* Sits on top of the article, so it needs an edge the page tint cannot
     swallow in either theme. */
  border: 1px solid var(--wordy-border-strong);
  box-shadow: var(--shadow-overlay);
  font-size: 0.8em;
  font-style: normal;
  line-height: 1.5;
  opacity: 0;
  text-align: left;
  text-decoration: none;
}

.wdemo__card-head {
  display: flex;
  padding-bottom: 0.7em;
  align-items: center;
  gap: 0.5em;
  border-bottom: 1px solid var(--line);
}

.wdemo__card-word {
  margin-right: auto;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.5em;
  line-height: 1.1;
}

.wdemo__pill {
  display: inline-flex;
  padding: 0.2em 0.6em;
  align-items: center;
  gap: 0.4em;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--ink);
  font-size: 0.9em;
  font-weight: 600;
}

.wdemo__pill::before {
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: var(--accent);
  content: "";
}

.wdemo__play {
  display: grid;
  width: 1.9em;
  height: 1.9em;
  flex: none;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--dim);
  font-size: 0.85em;
}

/* The card lives inside a <p>, so it is built from spans and needs its block
   boxes back. */
.wdemo__def {
  display: block;
  margin: 0.75em 0 0;
  color: var(--ink);
  font-size: 0.95em;
}

.wdemo__def + .wdemo__def {
  color: var(--dim);
}

.wdemo__card-actions {
  display: flex;
  margin-top: 0.95em;
  padding-top: 0.85em;
  gap: 0.4em;
  border-top: 1px solid var(--line);
}

.wdemo__act {
  padding: 0.42em 0.8em;
  background: var(--accent);
  color: oklch(0.18 0.01 80);
  font-size: 0.95em;
  font-weight: 600;
}

/* The counter the extension parks on the edge of the page. */
.wdemo__badge {
  position: absolute;
  z-index: 2;
  top: 7.5em;
  right: 0;
  display: grid;
  padding: 0.5em 0.7em;
  justify-items: center;
  background: var(--accent);
  color: oklch(0.18 0.01 80);
  font-family: var(--font-mono);
  line-height: 1;
}

.wdemo__badge-count {
  display: grid;
  font-size: 1.5em;
  font-weight: 700;
}

.wdemo__badge-count span {
  grid-area: 1 / 1;
}

.wdemo__badge-label {
  margin-top: 0.35em;
  font-size: 0.7em;
  letter-spacing: 0.1em;
}

.wdemo__cursor {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  width: 1.6em;
  height: 1.6em;
  filter: drop-shadow(0 1px 2px oklch(0 0 0 / 0.4));
  opacity: 0;
  pointer-events: none;
  transform: translate(13em, 8.5em);
}

.wdemo__cursor path {
  fill: var(--ink);
  stroke: var(--bg);
  stroke-width: 1.4;
}

/* Animation --------------------------------------------------------------- */

.wdemo__cursor {
  animation: wdemo-cursor 11s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.wdemo__card {
  animation: wdemo-card 11s ease infinite;
}

.wdemo__w--target {
  animation: wdemo-target 11s ease infinite;
}

.wdemo__act--known {
  animation: wdemo-press 11s ease infinite;
}

.wdemo__badge-count span:first-child {
  animation: wdemo-count-out 11s ease infinite;
}

.wdemo__badge-count span:last-child {
  animation: wdemo-count-in 11s ease infinite;
}

/* One loop: point at the marked word (16%), read the card (20-66%), press
   Known (59-62%), watch the mark and the counter drop (66-71%), reset (98%). */
@keyframes wdemo-cursor {
  0%,
  4% {
    opacity: 0;
    transform: translate(13em, 8.5em);
  }
  7% {
    opacity: 1;
    transform: translate(13em, 8.5em);
  }
  16%,
  52% {
    opacity: 1;
    transform: translate(0.9em, 0.75em);
  }
  57%,
  66% {
    opacity: 1;
    transform: translate(1.3em, 10.9em);
  }
  76% {
    opacity: 1;
    transform: translate(13em, 8.5em);
  }
  80%,
  100% {
    opacity: 0;
    transform: translate(13em, 8.5em);
  }
}

@keyframes wdemo-card {
  0%,
  15% {
    opacity: 0;
    transform: translateY(-0.35em) scale(0.98);
  }
  20%,
  66% {
    opacity: 1;
    transform: none;
  }
  70%,
  100% {
    opacity: 0;
    transform: translateY(-0.2em) scale(0.99);
  }
}

@keyframes wdemo-target {
  0%,
  14% {
    background-color: var(--accent-soft);
    text-decoration-color: var(--accent);
  }
  18%,
  66% {
    background-color: color-mix(in oklch, var(--accent) 28%, var(--accent-soft));
    text-decoration-color: var(--accent);
  }
  71%,
  92% {
    background-color: transparent;
    text-decoration-color: transparent;
  }
  98%,
  100% {
    background-color: var(--accent-soft);
    text-decoration-color: var(--accent);
  }
}

@keyframes wdemo-press {
  0%,
  58% {
    background-color: var(--accent);
    transform: none;
  }
  59.5%,
  62% {
    background-color: color-mix(in oklch, var(--accent) 78%, var(--ink));
    transform: scale(0.95);
  }
  64%,
  100% {
    background-color: var(--accent);
    transform: none;
  }
}

@keyframes wdemo-count-out {
  0%,
  66% {
    opacity: 1;
  }
  69%,
  92% {
    opacity: 0;
  }
  98%,
  100% {
    opacity: 1;
  }
}

@keyframes wdemo-count-in {
  0%,
  66% {
    opacity: 0;
  }
  69%,
  92% {
    opacity: 1;
  }
  98%,
  100% {
    opacity: 0;
  }
}

/* Narrow frames ----------------------------------------------------------- */

@container (max-width: 39.99rem) {
  .wdemo__frame {
    font-size: clamp(0.72rem, 3.15cqi, 1rem);
  }

  .wdemo__viewport {
    padding: 1.3em 1.3em 12.5em;
  }

  .wdemo__headline {
    font-size: 1.55em;
  }

  .wdemo__byline,
  .wdemo__body--extra {
    display: none;
  }

  .wdemo__kicker {
    letter-spacing: 0.1em;
  }

  .wdemo__badge {
    top: 5em;
  }

  /* Without a positioned anchor the card resolves against the viewport, which
     is where it fits on a phone: pinned to the bottom, full width. */
  .wdemo__anchor {
    position: static;
  }

  .wdemo__card {
    top: auto;
    right: 1.3em;
    bottom: 1.3em;
    left: 1.3em;
    width: auto;
    font-size: 0.85em;
  }

  .wdemo__cursor {
    display: none;
  }
}

/* Side panel -------------------------------------------------------------- */

.wpanel {
  width: min(100%, 30rem);
  margin-inline: auto;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  font-size: 0.8125rem;
}

.wpanel__bar {
  display: flex;
  padding: 0.7rem 0.85rem;
  align-items: center;
  gap: 0.5rem;
  background: var(--panel2);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.wpanel__mark {
  width: 0.55rem;
  height: 0.55rem;
  background: var(--accent);
}

.wpanel__bar i {
  color: var(--dim);
  font-size: 0.8125rem;
}

.wpanel__bar i:first-of-type {
  margin-left: auto;
}

.wpanel__row {
  display: flex;
  padding: 0.5rem 0.85rem;
  align-items: center;
  gap: 0.6rem;
  border-bottom: 1px solid var(--line);
}

.wpanel__box {
  display: grid;
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  place-items: center;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-xs);
  color: transparent;
  font-size: 0.75rem;
  line-height: 1;
}

.wpanel__word {
  margin-right: auto;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 0.9375rem;
}

.wpanel__count {
  padding: 0.05rem 0.4rem;
  background: var(--accent-soft);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}

.wpanel__row i {
  color: var(--dim);
  font-size: 0.75rem;
}

.wpanel__foot {
  padding: 0.85rem;
  background: var(--panel2);
}

.wpanel__foot-label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
}

.wpanel__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.wpanel__chip {
  padding: 0.3rem 0.65rem;
  background: var(--accent-soft);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 600;
}

.wpanel__box {
  animation: wpanel-tick 9s ease infinite;
}

.wpanel__row:nth-child(2) .wpanel__box {
  animation-delay: 0.2s;
}

.wpanel__row:nth-child(3) .wpanel__box {
  animation-delay: 0.4s;
}

.wpanel__row:nth-child(4) .wpanel__box {
  animation-delay: 0.6s;
}

.wpanel__row:nth-child(5) .wpanel__box {
  animation-delay: 0.8s;
}

.wpanel__row:nth-child(6) .wpanel__box {
  animation-delay: 1s;
}

.wpanel__row:nth-child(7) .wpanel__box {
  animation-delay: 1.2s;
}

.wpanel__row:nth-child(8) .wpanel__box {
  animation-delay: 1.4s;
}

.wpanel__row:nth-child(9) .wpanel__box {
  animation-delay: 1.6s;
}

.wpanel__chip--known {
  animation: wpanel-flash 9s ease infinite;
}

@keyframes wpanel-tick {
  0%,
  6% {
    background: transparent;
    border-color: var(--border-dark);
    color: transparent;
  }
  10%,
  68% {
    background: var(--accent);
    border-color: var(--accent);
    color: oklch(0.18 0.01 80);
  }
  74%,
  100% {
    background: transparent;
    border-color: var(--border-dark);
    color: transparent;
  }
}

@keyframes wpanel-flash {
  0%,
  62% {
    background: var(--accent-soft);
    color: var(--ink);
  }
  67%,
  72% {
    background: var(--accent);
    color: oklch(0.18 0.01 80);
  }
  78%,
  100% {
    background: var(--accent-soft);
    color: var(--ink);
  }
}

/* Quieting page ----------------------------------------------------------- */

.wquiet {
  display: grid;
  padding: 1px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}

.wquiet__step {
  display: grid;
  margin: 0;
  padding: 1.25rem 1.3rem 1.4rem;
  align-content: start;
  gap: 0.9rem;
  background: var(--panel);
}

.wquiet__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.wquiet__label::before {
  width: 4px;
  height: 4px;
  background: var(--accent);
  content: "";
}

.wquiet__page {
  margin: 0;
  color: var(--dim);
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  line-height: 1.75;
}

.wquiet__page em {
  padding: 0 0.1em;
  background: var(--accent-soft);
  color: var(--ink);
  font-style: normal;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.16em;
}

.wquiet__note {
  color: var(--ink);
  font-size: 0.8125rem;
}

@media (max-width: 767.98px) {
  .wquiet {
    grid-template-columns: 1fr;
  }
}

/* Settings ---------------------------------------------------------------- */

/* A reduction of the real settings page: the four controls a reader actually
   reaches for, in the order they appear there. */
.wctrl {
  width: min(100%, 34rem);
  margin-inline: auto;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  font-size: 0.8125rem;
  text-align: left;
}

.wctrl__bar {
  display: flex;
  padding: 0.7rem 0.85rem;
  align-items: center;
  gap: 0.5rem;
  background: var(--panel2);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.wctrl__mark {
  width: 0.55rem;
  height: 0.55rem;
  background: var(--accent);
}

.wctrl__field {
  display: grid;
  padding: 0.85rem;
  gap: 0.5rem;
  border-bottom: 1px solid var(--line);
}

.wctrl__field:last-child {
  border-bottom: 0;
}

.wctrl__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wctrl__tag {
  padding: 0.1rem 0.4rem;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--dim);
  letter-spacing: 0.06em;
}

/* The real control is a set of exclusive radios shown in full, so the
   alternatives stay visible next to the chosen one. */
.wctrl__seg {
  display: grid;
  padding: 1px;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.wctrl__seg > span {
  padding: 0.4rem 0.5rem;
  background: var(--panel);
  color: var(--dim);
  font-size: 0.8125rem;
  text-align: center;
}

/* The real control fills the chosen option, which is what makes the choice
   readable at a glance rather than a tint the eye has to hunt for. */
.wctrl__seg > .wctrl__seg-on {
  background: var(--accent);
  color: oklch(0.18 0.01 80);
  font-weight: 600;
}

.wctrl__input {
  display: flex;
  padding: 0.4rem 0.6rem;
  align-items: center;
  gap: 0.5rem;
  background: var(--panel);
  border: 1px solid var(--border-dark);
  color: var(--ink);
  font-family: var(--font-mono);
}

.wctrl__unit {
  margin-left: auto;
  color: var(--dim);
  font-family: var(--font-sans);
  font-size: 0.75rem;
}

.wctrl__rules {
  display: grid;
  margin: 0;
  padding: 1px;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  list-style: none;
}

.wctrl__rules li {
  display: flex;
  padding: 0.45rem 0.6rem;
  align-items: center;
  gap: 0.6rem;
  background: var(--panel);
}

.wctrl__site {
  min-width: 0;
  margin-right: auto;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wctrl__rule {
  flex: none;
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--line);
  color: var(--dim);
  font-size: 0.6875rem;
}

/* Account ----------------------------------------------------------------- */

.waccount {
  width: min(100%, 42rem);
  margin-inline: auto;
}

.waccount__sources {
  display: grid;
  margin: 0;
  padding: 1px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  list-style: none;
}

.waccount__sources li {
  display: flex;
  padding: 0.85rem 0.6rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--panel);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
}

.waccount__sources i {
  color: var(--accent);
  font-size: 1rem;
}

/* A plain tree: a stem under each source, a bar joining them, one drop into
   the account below. */
.waccount__link {
  position: relative;
  height: 2.75rem;
}

.waccount__link::before {
  position: absolute;
  top: 1.25rem;
  right: 16.667%;
  left: 16.667%;
  border-top: 1px solid var(--line);
  content: "";
}

.waccount__link::after {
  position: absolute;
  top: 1.25rem;
  bottom: 0;
  left: 50%;
  border-left: 1px solid var(--line);
  content: "";
}

.waccount__stem {
  position: absolute;
  top: 0;
  height: 1.25rem;
  border-left: 1px solid var(--line);
}

.waccount__stem:nth-child(1) {
  left: 16.667%;
}

.waccount__stem:nth-child(2) {
  left: 50%;
}

.waccount__stem:nth-child(3) {
  left: 83.333%;
}

.waccount__card {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.waccount__card-head {
  display: flex;
  padding: 0.8rem 1rem;
  align-items: center;
  gap: 0.55rem;
  background: var(--panel2);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.waccount__mark {
  width: 0.55rem;
  height: 0.55rem;
  background: var(--accent);
}

.waccount__total {
  margin-left: auto;
  color: var(--accent);
}

.waccount__row {
  display: flex;
  padding: 0.6rem 1rem;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--line);
}

.waccount__row:last-child {
  border-bottom: 0;
}

.waccount__name {
  min-width: 0;
  margin-right: auto;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 0.9375rem;
}

.waccount__delta {
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--known);
  color: var(--known);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}

.waccount__delta--flat {
  border-color: var(--line);
  color: var(--dim);
}

.waccount__count {
  min-width: 4ch;
  color: var(--accent);
  font-weight: 700;
  text-align: right;
}

@media (max-width: 575.98px) {
  .waccount__sources {
    grid-template-columns: 1fr;
  }

  .waccount__link {
    height: 1.75rem;
  }

  .waccount__link::before,
  .waccount__stem {
    display: none;
  }

  .waccount__link::after {
    top: 0;
  }
}

/* Motion ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  /* Hold the frame on the moment that explains the product, rather than on
     whatever the last keyframe happens to be. */
  .wdemo__cursor,
  .wdemo__card,
  .wdemo__w--target,
  .wdemo__act--known,
  .wdemo__badge-count span,
  .wpanel__box,
  .wpanel__chip--known {
    animation: none !important;
  }

  .wdemo__card {
    opacity: 1;
  }

  .wdemo__badge-count span:last-child {
    opacity: 0;
  }

  .wpanel__box {
    background: var(--accent);
    border-color: var(--accent);
    color: oklch(0.18 0.01 80);
  }
}

/* Pace comparison --------------------------------------------------------- */

/* Two paces to the same year, on one pair of axes: the crossover is the whole
   argument, so it only works if both lines share a scale.
   Colour: the rising line wears --accent (the brand hue, and the one the reader
   is meant to follow); the abandoned line wears --dim, a deliberate neutral that
   reads as the plan that stopped. That neutral is below the categorical chroma
   floor by design — it is a recessive baseline, not a second category — so
   identity never rests on hue alone: the flat line is dashed, both lines are
   labelled at their ends, and the legend names them in text. Separation between
   the two holds in both themes (protan dE 10.2 light / 15.0 dark). */
.wpace {
  display: grid;
  align-items: start;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}

.wpace__chart {
  display: grid;
  margin: 0;
  padding: 1.25rem 1.3rem 1.4rem;
  gap: 1rem;
  background: var(--panel);
  border: 1px solid var(--line);
}

.wpace__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.35rem;
}

.wpace__key {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--dim);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.wpace__key::before {
  width: 1.1rem;
  height: 0;
  flex: none;
  border-top-width: 2px;
  content: "";
}

.wpace__key--steady::before {
  border-top: 2px solid var(--accent);
}

.wpace__key--burst::before {
  border-top: 2px dashed var(--dim);
}

/* The SVG scales with its box, so its type scales too. Below the min-width the
   labels stop being readable, and a short sideways scroll beats an illegible
   chart; the edge shadow added at that width says so. */
.wpace__plot {
  overflow-x: auto;
}

.wpace__plot svg {
  display: block;
  width: 100%;
  /* Type inside the SVG scales with the frame, so the frame is capped: past this
     width the axis labels start reading as headings. */
  max-width: 42rem;
  min-width: 26rem;
  height: auto;
  margin-inline: auto;
}

.wpace__grid line {
  stroke: var(--line);
  stroke-width: 1;
}

.wpace__ylabel text,
.wpace__xlabel text {
  fill: var(--dim);
  font-family: var(--font-mono);
  /* SVG type is in viewBox units, so these are relative to the 640-unit frame. */
  font-size: 12px;
  letter-spacing: 0.04em;
}

.wpace__ylabel text {
  text-anchor: end;
}

.wpace__xlabel text {
  text-anchor: middle;
}

.wpace__fill {
  fill: var(--accent);
  opacity: 0.09;
}

.wpace__line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.wpace__line--steady {
  stroke: var(--accent);
}

.wpace__line--burst {
  stroke: var(--dim);
  stroke-dasharray: 6 5;
}

.wpace__cross line {
  stroke: var(--dim);
  stroke-dasharray: 2 4;
  stroke-width: 1;
}

.wpace__cross circle {
  fill: var(--dim);
  /* A surface ring keeps the marker legible where the two lines meet. */
  stroke: var(--panel);
  stroke-width: 2;
}

.wpace__cross text {
  fill: var(--ink);
  font-family: var(--font-sans);
  font-size: 12px;
  text-anchor: end;
}

.wpace__dot {
  stroke: var(--panel);
  stroke-width: 2;
}

.wpace__dot--steady {
  fill: var(--accent);
}

.wpace__dot--burst {
  fill: var(--dim);
}

/* Values wear ink, not the series colour; the line beside them carries identity. */
.wpace__endlabel text {
  fill: var(--ink);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  text-anchor: end;
}

.wpace__endlabel--burst {
  fill: var(--dim);
}

.wpace__readout {
  display: grid;
  gap: 1rem;
}

.wpace__stat {
  padding: 0.95rem 1.1rem 1.05rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--dim);
}

.wpace__stat--steady {
  border-left-color: var(--accent);
}

.wpace__stat-label {
  margin: 0;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.wpace__stat-value {
  margin: 0.35rem 0 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.1;
}

.wpace__stat-value span {
  color: var(--dim);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
}

.wpace__stat-note {
  margin: 0.5rem 0 0;
  color: var(--dim);
  font-size: 0.875rem;
  line-height: 1.55;
}

.wpace__aside {
  margin: 0;
  color: var(--dim);
  font-size: 0.875rem;
  line-height: 1.65;
}

.wpace__aside--strong {
  color: var(--ink);
}

@media (max-width: 991.98px) {
  .wpace {
    grid-template-columns: 1fr;
  }

  .wpace__readout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wpace__aside {
    grid-column: 1 / -1;
  }
}

/* Narrow screens shrink the frame, so the type inside it grows to compensate. */
@media (max-width: 767.98px) {
  /* The only width where the plot can outrun its box. The local/scroll background
     pair draws an edge shadow exactly while it does. */
  .wpace__plot {
    --wordy-scroll-shade: oklch(0 0 0 / 0.14);

    background:
      linear-gradient(to right, var(--panel), transparent) left center / 1.5rem 100% no-repeat local,
      linear-gradient(to left, var(--panel), transparent) right center / 1.5rem 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, var(--wordy-scroll-shade), transparent) left center / 0.75rem 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, var(--wordy-scroll-shade), transparent) right center / 0.75rem 100% no-repeat scroll;
  }

  [data-theme="dark"] .wpace__plot {
    --wordy-scroll-shade: oklch(0 0 0 / 0.5);
  }

  .wpace__ylabel text,
  .wpace__xlabel text,
  .wpace__cross text {
    font-size: 16px;
  }

  .wpace__endlabel text {
    font-size: 18px;
  }
}

@media (max-width: 575.98px) {
  .wpace__readout {
    grid-template-columns: 1fr;
  }
}

/* The dark accent is much lighter than the light one, so the same alpha reads as
   a solid block; the fill is stepped down to stay a wash. */
[data-theme="dark"] .wpace__fill {
  opacity: 0.06;
}