.memory-event-field {
  --memory-field: var(--black);
  --memory-panel: var(--black);
  --memory-line: var(--line);
  --memory-line-strong: var(--line-strong);
  background: var(--memory-field);
}

.memory-event-field .memory-workbench {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  isolation: isolate;
}

.memory-event-field .memory-controls {
  position: relative;
  z-index: 7;
  background: var(--memory-panel);
}

.memory-event-field .memory-filter-select {
  display: none;
}

.memory-event-field .memory-stage {
  grid-column: 1;
  grid-row: 2;
  min-height: 560px;
  background: var(--memory-field);
}

.memory-event-field .memory-canvas {
  z-index: 0;
  right: 0;
  background: var(--memory-field);
  overscroll-behavior: contain;
  touch-action: none;
}

.memory-event-field[data-memory-inspecting="true"] .memory-canvas {
  right: 352px;
}

.memory-event-field .memory-canvas:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: -2px;
}

.memory-event-field .memory-legend {
  z-index: 3;
  max-width: 340px;
  display: grid;
  gap: 5px;
  padding: 0;
  background: transparent;
  pointer-events: none;
  transition: opacity 160ms ease-out;
}

.memory-event-field .memory-legend strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 650;
}

.memory-event-field .memory-legend span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}

.memory-event-field[data-memory-inspecting="true"] .memory-legend {
  opacity: 0;
}

.memory-event-field .memory-time {
  z-index: 4;
  right: 18px;
  bottom: 18px;
  background: var(--memory-panel);
  border: 0;
  backdrop-filter: none;
  /* V-05: `right` is layout-affecting; transform is the compositor-only
     equivalent of the same 342px slide (360px - 18px) this rule always
     intended, without triggering layout on every animation frame. */
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.memory-event-field[data-memory-inspecting="true"] .memory-time {
  transform: translateX(-342px);
}

.memory-event-field .memory-time input::-webkit-slider-thumb {
  background: var(--ink);
}

.memory-event-field .memory-time input::-moz-range-thumb {
  background: var(--ink);
}

.memory-event-field .memory-inspector,
.memory-event-field .memory-inspector [hidden] {
  display: none;
}

.memory-event-field[data-memory-inspecting="true"] .memory-inspector {
  position: absolute;
  z-index: 8;
  top: 76px;
  right: 16px;
  bottom: 16px;
  width: 320px;
  min-height: 0;
  display: block;
  overflow: hidden auto;
  border: 0;
  border-radius: 6px;
  background: var(--memory-panel);
  padding: 20px 20px 24px;
}

.memory-event-field .memory-inspector-record > header span,
.memory-event-field .memory-inspector-record li button[aria-current="true"] span {
  color: var(--ink);
}

.memory-event-field .memory-inspector-record h3 {
  margin-top: 16px;
  font-size: 24px;
  text-wrap: balance;
}

.memory-event-field .memory-inspector-record > p {
  max-width: 68ch;
  font-size: 13px;
  line-height: 1.55;
  text-wrap: pretty;
}

.memory-event-field .memory-inspector-record dl {
  margin-top: 18px;
}

.memory-event-field .memory-inspector-record dl div {
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 0;
  border-top: 0;
}

.memory-event-field .memory-inspector-record > section {
  margin-top: 20px;
}

.memory-event-field .memory-inspector-record li {
  border-top: 0;
}

.memory-event-field .memory-inspector-record li button {
  min-height: 52px;
  padding: 9px 7px;
}

.memory-event-field .memory-inspector-record li button[aria-current="true"] {
  background: var(--hover-surface);
}

.memory-event-field .memory-focus {
  min-height: 44px;
  border: 0;
}

@media (max-width: 1120px) and (min-width: 761px) {
  .memory-event-field[data-memory-inspecting="true"] .memory-canvas {
    right: 316px;
  }

  .memory-event-field[data-memory-inspecting="true"] .memory-time {
    right: 330px;
  }

  .memory-event-field[data-memory-inspecting="true"] .memory-inspector {
    width: 292px;
  }
}

@media (max-width: 760px) {
  .memory-event-field.memory-surface {
    grid-template-rows: auto auto;
    gap: 14px;
    padding: 20px 14px 126px;
  }

  .memory-event-field .memory-intro {
    gap: 14px;
  }

  .memory-event-field .memory-intro h2 {
    font-size: 30px;
  }

  .memory-event-field .memory-intro > div > p:last-child {
    font-size: 14px;
  }

  .memory-event-field .memory-counts {
    gap: 24px;
  }

  .memory-event-field .memory-workbench {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(480px, calc(100dvh - 248px));
    overflow: hidden;
  }

  .memory-event-field .memory-controls {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 10px 0;
  }

  .memory-event-field .memory-search {
    grid-column: 1 / -1;
    min-height: 44px;
    padding-bottom: 8px;
  }

  .memory-event-field .memory-filter-list {
    display: none;
  }

  .memory-event-field .memory-filter-select {
    min-width: 0;
    min-height: 44px;
    display: block;
    border: 0;
    border-radius: 4px;
    background: var(--memory-panel);
    padding: 0 34px 0 12px;
    color: var(--ink);
    font: 600 14px/1 system-ui, sans-serif;
  }

.memory-event-field .memory-fit {
  min-height: 44px;
    margin: 0;
    border-left: 0;
    padding: 0 12px;
  }

  .memory-event-field .memory-stage {
    grid-column: 1;
    grid-row: 2;
    min-height: 480px;
  }

  .memory-event-field .memory-canvas,
  .memory-event-field[data-memory-inspecting="true"] .memory-canvas {
    right: 0;
  }

  .memory-event-field[data-memory-inspecting="true"] .memory-canvas {
    bottom: 286px;
  }

  .memory-event-field .memory-legend {
    top: 14px;
    left: 14px;
    max-width: calc(100% - 28px);
  }

  .memory-event-field .memory-legend strong {
    font-size: 14px;
  }

  .memory-event-field .memory-legend span {
    font-size: 12px;
  }

  .memory-event-field .memory-time {
    right: 12px;
    bottom: 12px;
    width: calc(100% - 24px);
  }

  .memory-event-field[data-memory-inspecting="true"] .memory-time {
    display: none;
  }

  .memory-event-field[data-memory-inspecting="true"] .memory-inspector {
    position: absolute;
    inset: auto 0 0;
    width: 100%;
    max-height: 286px;
    min-height: 0;
    overflow: hidden auto;
    border-radius: 8px 8px 0 0;
    padding: 16px 16px 22px;
    background: var(--memory-panel);
  }

  .memory-event-field .memory-inspector-record h3 {
    margin-top: 12px;
    font-size: 21px;
  }

  .memory-event-field .memory-inspector-record > p {
    font-size: 14px;
  }
}

.memory-event-field .memory-zoom {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 4px;
  background: var(--memory-panel);
  color: var(--ink);
  cursor: pointer;
  font: 600 17px/1 var(--mono);
}

.memory-event-field .memory-zoom:hover,
.memory-event-field .memory-zoom:focus-visible { background: var(--panel-strong); }

@media (prefers-reduced-motion: reduce) {
  .memory-event-field *,
  .memory-event-field *::before,
  .memory-event-field *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}