/* src/dialog-motion.css */
dialog[open] {
  animation: dialog-enter 180ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
dialog[open]::backdrop {
  animation: dialog-backdrop-enter 180ms ease-out both;
}
dialog[open][data-dialog-closing] {
  animation: dialog-exit 140ms ease-in both;
  pointer-events: none;
}
dialog[open][data-dialog-closing]::backdrop {
  animation: dialog-backdrop-exit 140ms ease-in both;
}
@keyframes dialog-enter {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes dialog-exit {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
}
@keyframes dialog-backdrop-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes dialog-backdrop-exit {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  dialog[open],
  dialog[open]::backdrop,
  dialog[open][data-dialog-closing],
  dialog[open][data-dialog-closing]::backdrop {
    animation: none;
  }
}

/* src/styles.css */
.legal-notices {
  padding: 16px 28px;
  font-size: 12px;
  color: #596e60;
}
.legal-notices summary {
  cursor: pointer;
  padding: 8px 0;
}
.legal-notices details details {
  margin-left: 12px;
}
.legal-notices pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 380px;
  overflow: auto;
  line-height: 1.6;
  padding: 12px;
  background: #fff;
  border: 1px solid #d7dfd3;
  border-radius: 8px;
}
:root {
  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color: #233b30;
  background: #f5f6f1;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  --green: #285742;
  --green-hover: #1d4735;
  --ink: #20372c;
  --muted: #6f7c71;
  --line: #dfe5db;
  --line-strong: #cdd6c8;
  --paper: #fff;
  --hover: #f0f4ec;
  --focus: #61a378;
  --radius: 8px;
  --control-height: 32px;
  --sidebar: 208px;
}
a {
  color: var(--green);
  text-underline-offset: 2px;
}
a:hover {
  color: var(--green-hover);
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
textarea,
select {
  font: inherit;
}
button {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--control-height);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 1px 1px #20372c0a;
  transition:
    background 0.15s,
    border-color 0.15s,
    transform 0.15s;
}
button:hover {
  background: var(--hover);
  border-color: #bccab6;
}
button:active {
  transform: translateY(1px);
}
:where(.timeline-stage) button {
  display: revert;
  min-height: 0;
  gap: normal;
  background: transparent;
  border-color: var(--line);
  border-radius: 7px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 550;
  line-height: normal;
  box-shadow: none;
}
:where(.timeline-stage) button:hover {
  background: #eaf0e5;
  border-color: var(--line);
}
button:disabled {
  opacity: 0.45;
  cursor: default;
  transform: none;
}
button:disabled:hover {
  background: var(--paper);
  border-color: var(--line-strong);
}
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
input,
textarea,
select {
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 7px 10px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  min-width: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
select {
  min-height: 36px;
}
input:hover,
textarea:hover,
select:hover {
  border-color: #bccab6;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px #61a37833;
}
::placeholder {
  color: #9aa597;
}
textarea {
  resize: vertical;
}
#presentation-dialog {
  min-width: min(620px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
}
#presentation-form > div:not(.dialog-heading):not(.dialog-actions),
#presentation-form > label {
  margin-top: 16px;
}
#presentation-form label + label {
  margin-top: 12px;
}
#presentation-source {
  font-family: ui-monospace, monospace;
  font-size: 12px;
}
.presentation-preview {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin-top: 12px;
  font-size: 12px;
}
.time-context {
  padding: 8px 24px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font: 12px ui-monospace, monospace;
  overflow-wrap: anywhere;
}
.time-context[hidden] {
  display: none;
}
label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #44584b;
}
.button-primary {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.button-primary:hover {
  background: var(--green-hover);
  border-color: var(--green-hover);
}
.button-primary:disabled:hover {
  background: var(--green);
  border-color: var(--green);
}
.button-danger {
  color: #a54a43;
  border-color: #e8cfcb;
}
.button-danger:hover {
  background: #fbf0ee;
  border-color: #dcb5b0;
}
.muted,
.field-hint {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  font-weight: 400;
}
.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #859083;
}
.app-header {
  height: 72px;
  background: #192d25;
  color: #eef4eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  border-bottom: 1px solid #284033;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 550;
  letter-spacing: -0.045em;
  text-decoration: none;
  color: inherit;
}
.brand-mark {
  font-size: 30px;
  color: #c4db98;
  line-height: 1;
}
.brand-version {
  margin-left: 10px;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  border: 1px solid #49604e;
  color: #adc09f;
  padding: 3px 5px;
  border-radius: 4px;
  letter-spacing: 0.08em;
}
.edition-chip {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid #5a7862;
  border-radius: 999px;
  padding: 2px 9px;
  color: #c4db98;
  background: #22382c;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.header-right button {
  color: #e3eddf;
  background: transparent;
  border-color: #46614e;
  box-shadow: none;
}
.header-right button:hover {
  background: #294333;
  border-color: #5a7862;
}
.header-right .button-primary {
  background: #c4db98;
  border-color: #c4db98;
  color: #192d25;
}
.header-right .button-primary:hover {
  background: #d3e6ae;
  border-color: #d3e6ae;
}
.badge {
  font-size: 11px;
  border: 1px solid #48604b;
  border-radius: 999px;
  padding: 4px 10px;
  color: #c4d8b2;
  white-space: nowrap;
}
.app-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: calc(100vh - 72px);
}
.workspace {
  border-right: 1px solid var(--line);
  padding: 29px 20px;
  display: flex;
  flex-direction: column;
  background: #f0f3eb;
}
.workspace-new {
  justify-content: flex-start;
  margin-top: 18px;
  text-align: left;
  background: #e5ecdf;
  border-color: #d5dfcd;
  color: #3b5943;
  padding: 11px;
}
.timeline-list {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.timeline-list button {
  display: block;
  padding: 10px 12px;
  white-space: normal;
  text-align: left;
  background: #fff;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.timeline-list button small {
  display: block;
  color: var(--muted);
  margin-top: 5px;
  font-size: 11px;
}
.server-chip {
  display: inline-block;
  max-width: 18em;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
  font-size: 10.5px;
  line-height: 1.6;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid hsl(var(--server-hue, 110) 30% 78%);
  background: hsl(var(--server-hue, 110) 45% 93%);
  color: hsl(var(--server-hue, 110) 35% 26%);
}
.timeline-list button .server-chip,
.library-plugin .server-chip {
  margin: 0 0 5px;
}
.server-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
}
.server-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.server-row .server-status {
  flex: 1;
  min-width: 8em;
  color: var(--muted);
  font-size: 12px;
}
.workspace-note {
  font-size: 11px;
  line-height: 1.8;
  color: #7b8978;
  padding: 10px 2px;
}
.workspace-bottom {
  margin-top: auto;
  padding-top: 100px;
  font-size: 10px;
  color: #667660;
  line-height: 1.9;
}
.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #74a574;
  border-radius: 50%;
  margin-right: 5px;
}
.workspace-bottom p {
  font-size: 10px;
  color: #8b9588;
  padding-top: 12px;
  border-top: 1px solid #dfe6d8;
  margin-top: 14px;
}
main {
  padding: 0 30px;
  min-width: 0;
}
.document-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 66px;
  border-bottom: 1px solid var(--line);
}
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}
.breadcrumbs a {
  text-decoration: none;
}
.breadcrumbs a[href]:hover {
  text-decoration: underline;
}
.breadcrumbs a:not([href]) {
  color: var(--ink);
}
.breadcrumbs > span:first-child {
  color: #abb4a5;
}
.file-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.document-heading {
  padding: 35px 0 28px;
}
.title-input {
  display: block;
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: 34px;
  letter-spacing: -0.04em;
  border: none;
  padding: 10px 0 7px;
  background: transparent;
  width: 100%;
  font-weight: 400;
  line-height: 1.2;
}
.title-input:disabled {
  opacity: 1;
}
.description-input {
  display: block;
  width: 100%;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  resize: none;
  border: 0;
  background: transparent;
  padding: 0;
  min-height: 26px;
}
.document-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 12px;
  margin-top: 14px;
}
.meta-separator {
  color: #abb6a3;
}
.timeline-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 1px 2px #1d38230a, 0 8px 30px #1d38230a;
  overflow: hidden;
}
.view-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid #edf0e9;
  gap: 10px;
}
.view-toolbar > div:first-child {
  display: flex;
  gap: 12px;
  align-items: center;
}
.view-name {
  font-size: 14px;
  font-weight: 650;
}
.view-toolbar .muted {
  font-size: 12px;
}
.view-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.calendar-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 12px;
  letter-spacing: 0;
  font-weight: 400;
  gap: 6px;
  margin-right: 8px;
  color: var(--muted);
}
.calendar-label input {
  width: 14px;
  height: 14px;
  padding: 0;
  accent-color: #285742;
}
.timeline-stage {
  position: relative;
  height: 365px;
  background: var(--timeline-background, transparent);
  touch-action: none;
  user-select: none;
  overflow: hidden;
  outline-offset: -4px;
  cursor: grab;
}
.timeline-stage.dragging {
  cursor: grabbing;
}
html.timeline-fullscreen,
html.timeline-fullscreen body {
  overflow: hidden;
}
html.timeline-fullscreen .timeline-card {
  position: fixed;
  inset: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  margin: 0;
  border: 0;
  border-radius: 0;
}
html.timeline-fullscreen .timeline-stage {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
}
.checkbox-row input {
  width: auto;
}
.duration-backgrounds {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.duration-background {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: hidden;
}
.timeline-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.timeline-backdrop img {
  width: 100%;
}
:is(.duration-background, .timeline-backdrop) img {
  position: absolute;
  top: 0;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 0.3s;
}
:is(.duration-background, .timeline-backdrop) img.loaded {
  opacity: 1;
}
.timeline-stage.over-backgrounds .event-label {
  width: max-content;
  max-width: 150px;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--timeline-halo-backing, #ffffffb8);
  backdrop-filter: blur(3px);
  text-shadow: 0 0 1px var(--timeline-halo, #fff), 0 0 3px var(--timeline-halo, #fff);
}
.timeline-stage.over-backgrounds :is(.tick-label, .duration-band) {
  text-shadow: 0 0 1px var(--timeline-halo, #fff), 0 0 3px var(--timeline-halo, #fff);
}
.timeline-stage.over-backgrounds :is(.event-stem, .event-marker) {
  filter: drop-shadow(0 0 1px var(--timeline-halo, #fff)) drop-shadow(0 0 2px var(--timeline-halo, #fff)) drop-shadow(0 0 4px var(--timeline-halo, #fff));
}
.timeline-stage.over-backgrounds :is(.axis-baseline, .tick-notch) {
  box-shadow: 0 0 2px 1px var(--timeline-halo, #fff);
}
.edge-arc-halo {
  display: none;
  fill: none;
  stroke: var(--timeline-halo, #fff);
  stroke-width: 5;
  stroke-linecap: round;
  opacity: 0.8;
  pointer-events: none;
}
.timeline-stage.over-backgrounds .edge-arc-halo {
  display: inline;
}
.timeline-stage.over-backgrounds .event-marker.heading-marker {
  backdrop-filter: blur(4px);
}
.axis,
.markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.axis-baseline {
  position: absolute;
  left: 48px;
  right: 48px;
  top: 192px;
  border-top: 1px solid var(--timeline-measure-soft, #aebda7);
}
.axis-tick {
  position: absolute;
  top: 36px;
  bottom: 62px;
  width: 1px;
}
.tick-guide {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      var(--timeline-measure-faint, #e7ece2) 0,
      var(--timeline-measure-faint, #e7ece2) 3px,
      transparent 3px,
      transparent 7px);
}
.tick-notch {
  position: absolute;
  top: 152px;
  height: 9px;
  border-left: 1px solid var(--timeline-measure-soft, #b5c2ad);
}
.tick-label {
  position: absolute;
  top: 177px;
  transform: translateX(-50%);
  font-size: 10px;
  font-family: var(--timeline-measure-font, ui-monospace, SFMono-Regular, Consolas, monospace);
  color: var(--timeline-measure, #87947f);
  max-width: 105px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.event-marker {
  position: absolute;
  top: 181px;
  width: 22px;
  height: 22px;
  border: 4px solid #fff;
  background: var(--timeline-marker, #547d5b);
  border-radius: 50%;
  padding: 0;
  transform: translateX(-50%);
  box-shadow: 0 0 0 1px #cedcc7;
  pointer-events: auto;
  cursor: pointer;
}
.event-marker:hover,
.event-marker:focus-visible {
  background: var(--timeline-marker-strong, #214f38);
  box-shadow: 0 0 0 5px #e7efdf;
  z-index: 5;
  transform: translateX(-50%);
}
.event-marker.selected {
  background: var(--timeline-marker-selected, #173c28);
  box-shadow: 0 0 0 5px #e3eccb;
}
.event-marker.group {
  top: 176px;
  width: 32px;
  height: 32px;
  border: 3px solid #fff;
  color: #fff;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 650;
  background: var(--timeline-marker-group, #3b654a);
  box-shadow: 0 0 0 1px #b8caaa;
}
.event-marker.group.large {
  width: 42px;
  height: 42px;
  top: 171px;
  font-size: 10px;
}
.event-label {
  position: absolute;
  width: 150px;
  transform: translateX(-50%);
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  font-family: var(--timeline-text-font, inherit);
  color: var(--timeline-text, #4c654c);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.event-label small {
  display: block;
  color: var(--timeline-text-soft, #9aa690);
  font-size: 9px;
  font-family: ui-monospace, monospace;
  margin-top: 5px;
}
.event-stem {
  position: absolute;
  width: 1px;
  background: var(--timeline-measure-faint, #d4dfcc);
  pointer-events: none;
}
.stack-label {
  border-radius: 3px;
}
.stack-label .event-caption-title {
  background: #fff;
  padding: 0 3px;
}
.stack-stem {
  background: #bacbaa;
}
.stack-marker {
  transition: top 220ms ease-out;
}
.empty-window {
  position: absolute;
  inset: 85px 0 auto;
  text-align: center;
  color: #95a18d;
  font-size: 13px;
  line-height: 1.8;
}
.empty-window button {
  margin-top: 9px;
}
.loading-window {
  position: absolute;
  right: 18px;
  bottom: 14px;
  font-size: 12px;
  color: #6f7e64;
  background: #f1f5ed;
  padding: 6px 10px;
  border-radius: 20px;
}
.timeline-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px;
  border-top: 1px solid #edf0e9;
  gap: 12px;
}
.gesture-help {
  color: var(--muted);
  font-size: 12px;
}
.gesture-help span {
  margin: 0 8px;
  color: #b8c1af;
}
.density-control {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0;
  color: var(--muted);
  gap: 8px;
}
.density-control input {
  width: 80px;
  accent-color: var(--green);
  padding: 0;
  height: 14px;
  border: 0;
  box-shadow: none;
}
.density-control output {
  min-width: 34px;
  font-family: ui-monospace, monospace;
  font-size: 12px;
}
.window-bounds {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: 16px;
}
.window-bounds label {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  flex: 1;
  gap: 4px;
  min-width: 0;
}
.window-bounds input {
  font-size: 13px;
  font-family: ui-monospace, monospace;
  width: 100%;
}
.window-bounds > span {
  color: #aeb8a0;
  font-size: 14px;
  line-height: 36px;
}
.window-bounds button {
  min-height: 36px;
}
.text-button {
  border: 0;
  padding: 0;
  min-height: 0;
  background: none;
  box-shadow: none;
  font-size: 12px;
  color: var(--green);
}
.text-button:hover {
  background: none;
  text-decoration: underline;
}
.precision-note {
  max-width: 215px;
  padding-top: 2px;
}
.precision-note .eyebrow {
  font-size: 10px;
  margin-bottom: 10px;
  line-height: 1.7;
}
dialog.moment-dialog {
  background: #fafbf7;
  width: min(680px, calc(100vw - 30px));
  min-width: 0;
}
dialog.moment-dialog.reading {
  width: min(1100px, calc(100vw - 30px));
}
.reader-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.reader-panel[hidden] {
  display: none;
}
.moment-dialog .reader-panel h2 {
  margin: 0;
  font-size: 30px;
}
.reader-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.reader-panel figure {
  margin: 0;
}
.reader-panel figcaption {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}
.reader-image img {
  display: block;
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  border-radius: 10px;
  background: #1b2a2108;
}
.moment-dialog p.reader-when {
  margin: 0;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
  font-size: 14px;
  color: var(--ink);
}
.reader-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.reader-tags li {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--hover);
  font-size: 12px;
}
.reader-notes {
  max-width: 75ch;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.7;
}
.moment-dialog .reader-notes p {
  color: var(--ink);
  font-size: 16px;
}
.reader-details {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  margin: 0;
  font-size: 14px;
}
.reader-details dt {
  color: var(--muted);
}
.reader-details dd {
  margin: 0;
  white-space: pre-wrap;
}
.reader-section h3 {
  margin: 0 0 6px;
  font-size: 14px;
}
.reader-links {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  overflow-wrap: anywhere;
}
:is(.reader-stack, .reader-gallery) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.reader-stack article {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.reader-stack h4 {
  margin: 6px 0 0;
}
:is(.reader-stack, .reader-gallery) img {
  width: 100%;
  max-height: 160px;
  object-fit: cover;
  border-radius: 7px;
}
@media (max-width: 650px) {
  dialog.moment-dialog.reading {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    padding: 18px 16px;
  }
  .reader-details {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .reader-details dd {
    margin-bottom: 8px;
  }
}
.view-mode-switch {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-right: 10px;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
}
.view-mode-switch input {
  appearance: none;
  position: relative;
  width: 36px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--hover);
  cursor: pointer;
  transition: background 0.15s;
}
.view-mode-switch input::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px #0003;
  transition: transform 0.15s;
}
.view-mode-switch input:checked {
  border-color: var(--green);
  background: var(--green);
}
.view-mode-switch input:checked::before {
  transform: translateX(16px);
}
@media (prefers-reduced-motion: reduce) {
  .view-mode-switch input,
  .view-mode-switch input::before {
    transition: none;
  }
}
.view-mode-switch[hidden] {
  display: none;
}
.inspector-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.event-kind {
  display: flex;
  margin: 14px 0 4px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 3px;
  gap: 3px;
  background: var(--hover);
}
.event-kind[hidden] {
  display: none;
}
.event-kind button {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--muted);
  min-height: calc(var(--control-height) - 4px);
}
.event-kind button[aria-selected=true] {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 3px #20372c26;
}
.event-kind button:disabled {
  cursor: default;
  opacity: 0.55;
}
.inspector-heading button,
.dialog-heading button {
  flex-shrink: 0;
  width: var(--control-height);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 20px;
  font-weight: 400;
}
.inspector-heading button:hover,
.dialog-heading button:hover {
  background: var(--hover);
  color: var(--ink);
}
.inspector-heading .share-entity {
  width: auto;
  margin-left: auto;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  white-space: nowrap;
  font-size: 14px;
}
.inspector-heading .share-entity + .share-entity {
  margin-left: 8px;
}
.moment-dialog h2 {
  font-family: Georgia, serif;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: -0.03em;
  margin: 0 0 15px;
}
.moment-dialog p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}
.moment-dialog form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 24px;
}
.moment-dialog form[hidden] {
  display: none;
}
.moment-dialog input,
.moment-dialog textarea {
  background: #fff;
  width: 100%;
}
.moment-dialog .field-hint {
  font-size: 12px;
  margin: -10px 0 0;
}
.moment-dialog details {
  font-size: 13px;
  color: var(--muted);
}
.moment-dialog summary {
  cursor: pointer;
  margin-bottom: 10px;
}
.event-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.group-events {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 420px;
  overflow: auto;
}
.group-events button {
  display: block;
  text-align: left;
  white-space: normal;
  background: #fff;
  padding: 11px;
  overflow-wrap: anywhere;
}
.group-events small {
  display: block;
  color: var(--muted);
  font-family: ui-monospace, monospace;
  font-size: 11px;
  margin-top: 6px;
}
#group-details {
  padding-top: 35px;
}
#group-details h2 {
  font-size: 24px;
}
#group-more {
  margin-top: 15px;
}
.form-error {
  font-size: 12px;
  line-height: 1.6;
  color: #a7473c;
  min-height: 0;
}
dialog {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
  background: #f9fbf5;
  color: var(--ink);
  width: fit-content;
  min-width: min(440px, calc(100vw - 30px));
  max-width: min(900px, calc(100vw - 30px));
  max-height: calc(100dvh - 30px);
  overflow-y: auto;
  overflow-wrap: anywhere;
  box-shadow: 0 20px 100px #152b3540;
}
dialog::backdrop {
  background: #17271d73;
}
dialog form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dialog-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.dialog-heading h2 {
  font-size: 24px;
  font-family: Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.03em;
  margin: 0;
}
dialog p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
  margin: 0 0 6px;
}
dialog label {
  margin-top: 7px;
}
dialog input,
dialog select {
  width: 100%;
  background: #fff;
}
.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dialog-actions select {
  flex: 1;
}
.sharing-link {
  word-break: break-all;
  margin: 12px 0;
  font-family: ui-monospace, monospace;
  font-size: 12px !important;
}
#sharing-dialog > label {
  margin: 24px 0 15px;
}
#members-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 8px 0;
  font-size: 12px;
}
dialog h3 {
  font-size: 14px;
  margin: 24px 0 15px;
}
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  background: #20382b;
  color: #eef6e5;
  border: 1px solid #4d6a44;
  border-radius: 10px;
  padding: 12px 18px;
  box-shadow: 0 8px 28px #1e312633;
  font-size: 13px;
  max-width: calc(100vw - 32px);
  line-height: 1.6;
}
[hidden] {
  display: none !important;
}
@media (min-width: 1700px) {
  :root {
    --sidebar: 230px;
  }
  main {
    padding: 0 48px;
  }
  .timeline-stage {
    height: 410px;
  }
}
@media (max-width: 1180px) {
  :root {
    --sidebar: 160px;
  }
  .workspace {
    padding: 29px 14px;
  }
  main {
    padding: 0 20px;
  }
  .breadcrumbs {
    display: none;
  }
  .document-toolbar {
    justify-content: flex-end;
  }
  .calendar-label {
    max-width: 77px;
    line-height: 1.4;
  }
  .view-toolbar {
    padding: 13px;
  }
  .view-toolbar .muted {
    display: none;
  }
  .timeline-footer {
    padding: 12px;
  }
  .title-input {
    font-size: 30px;
  }
  .below-timeline {
    gap: 20px;
  }
  .precision-note {
    display: none;
  }
}
@media (max-width: 960px) {
  :root {
    --sidebar: 0px;
  }
  .workspace {
    display: none;
  }
  .app-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .title-input {
    font-size: 33px;
  }
  .document-heading {
    padding: 30px 0 24px;
  }
  .timeline-footer {
    flex-wrap: wrap;
  }
  .calendar-label {
    display: none;
  }
  .app-header {
    height: 64px;
    padding: 0 20px;
  }
  .brand {
    font-size: 17px;
  }
  .moment-dialog {
    padding: 28px 18px;
  }
}
@media (max-width: 650px) {
  .app-layout {
    display: block;
  }
  .app-header {
    height: auto;
    min-height: 64px;
    padding: 12px 15px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .brand-version {
    display: none;
  }
  .header-right {
    gap: 7px;
    flex-wrap: wrap;
    min-width: 0;
  }
  .header-right button {
    padding: 0 10px;
  }
  main {
    padding: 0 15px;
  }
  .document-toolbar {
    min-height: 56px;
  }
  .file-actions {
    gap: 6px;
  }
  .document-heading {
    padding: 25px 0 22px;
  }
  .title-input {
    font-size: 30px;
  }
  .description-input {
    font-size: 13px;
  }
  .view-toolbar {
    padding: 12px;
  }
  .view-controls {
    gap: 4px;
  }
  .view-controls button {
    padding: 0 10px;
  }
  .view-toolbar > div:first-child {
    gap: 0;
  }
  .timeline-stage {
    height: 330px;
  }
  .timeline-footer {
    justify-content: center;
    gap: 12px;
    padding: 13px 9px;
  }
  .window-bounds {
    gap: 8px;
  }
  #undo-button,
  #redo-button {
    display: none;
  }
  .below-timeline {
    padding: 27px 0 22px;
  }
  .reading-note p {
    font-size: 12px;
  }
  .moment-dialog {
    padding: 24px;
  }
  .moment-dialog form {
    margin-top: 24px;
  }
  .moment-dialog textarea {
    resize: vertical;
  }
  .brand-mark {
    font-size: 27px;
  }
  .timeline-card {
    margin: 0 -15px;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
  .view-toolbar {
    padding: 8px 10px;
  }
  .view-toolbar .view-controls {
    max-width: 100%;
  }
  .timeline-stage {
    height: max(330px, 52svh);
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  main {
    padding: 0 12px;
  }
  .timeline-card {
    margin: 0 -12px;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
  .timeline-card .view-toolbar {
    padding: 6px 10px;
    flex-wrap: nowrap;
  }
  .view-toolbar .view-controls {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    min-width: 0;
  }
  .view-toolbar .view-controls > * {
    flex: none;
  }
  .timeline-stage {
    height: max(240px, calc(100svh - 56px));
  }
}
#provider-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
#desktop-login {
  margin-top: 14px;
}
#desktop-login-status {
  overflow-wrap: anywhere;
  white-space: pre-line;
}
#desktop-approval-code {
  display: block;
  font: 600 24px monospace;
  letter-spacing: 0.15em;
  margin: 20px 0;
}
#session-list {
  max-height: 160px;
  overflow: auto;
  font-size: 12px;
}
.file-actions {
  flex-wrap: wrap;
}
.time-cursor {
  z-index: 10;
  position: absolute;
  top: 22px;
  bottom: 28px;
  border-left: calc(2px * var(--timeline-scale, 1)) solid #c59b22;
  pointer-events: none;
}
.time-cursor::before {
  content: "";
  position: absolute;
  left: calc(-5px * var(--timeline-scale, 1));
  top: 0;
  width: calc(8px * var(--timeline-scale, 1));
  height: calc(8px * var(--timeline-scale, 1));
  background: #c59b22;
  transform: rotate(45deg);
}
.timeline-menu {
  position: fixed;
  inset: auto;
  margin: 0;
  z-index: 100;
  min-width: 150px;
  padding: 5px;
  background: #fff;
  border: 1px solid #d8dfd2;
  border-radius: 8px;
  box-shadow: 0 6px 24px #233c2526;
}
.timeline-menu button {
  display: block;
  text-align: left;
  width: 100%;
  min-height: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
}
.timeline-menu button:hover,
.timeline-menu button:focus-visible {
  background: #eef2e8;
}
.event-label {
  transition: top 220ms ease-out;
}
.event-stem {
  transition: top 220ms ease-out, height 220ms ease-out;
}
.event-label small {
  position: relative;
}
.event-time-outgoing {
  position: absolute;
  inset: 0;
}
@media (prefers-reduced-motion: reduce) {
  .event-label,
  .stack-marker,
  .event-stem {
    transition: none;
  }
}
.event-marker.icon {
  overflow: hidden;
  border: 2px solid #fff;
  z-index: 2;
  transition: transform 160ms ease-out;
}
.event-marker.icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.event-marker.icon:hover,
.event-marker.icon:focus-visible {
  transform: translateX(-50%) scale(3);
  z-index: 5;
}
.plugin-image-link {
  display: block;
  margin: 14px 0;
}
.plugin-image-link img {
  display: block;
  max-width: 100%;
  max-height: 260px;
  object-fit: contain;
  border-radius: 8px;
}
.plugin-field,
.installed-plugin,
.library-plugin {
  border-top: 1px solid #d8dfd2;
  padding: 14px 0;
}
.moment-dialog .plugin-field label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 0;
}
.moment-dialog .plugin-field .field-hint {
  margin: 8px 0 0;
  line-height: 1.5;
}
.stack-list {
  display: grid;
  gap: 14px;
  margin: 12px 0;
}
.stack-card {
  min-width: 0;
  border: 1px solid #d8dfd2;
  border-radius: 8px;
  padding: 12px;
  display: grid;
  gap: 12px;
}
.stack-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}
.stack-actions strong {
  margin-right: auto;
}
.stack-actions button {
  padding: 5px 8px;
}
.stack-actions [draggable=true] {
  cursor: grab;
  touch-action: none;
}
.color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.color-swatches button::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  background: var(--swatch);
  border: 1px solid #6c786b;
}
.color-swatches [aria-pressed=true] {
  outline: 2px solid #547d5b;
}
.moment-dialog .plugin-field input[type=color] {
  width: 100%;
  height: 36px;
  padding: 3px;
}
.event-actions #event-edit-status {
  margin: 0;
}
.dialog-commit {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.plugin-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.plugin-setting {
  display: block;
  margin: 8px 0;
}
.plugin-setting-color {
  display: flex;
  align-items: center;
  gap: 8px;
}
.plugin-setting-color input[type=color] {
  width: 44px;
  height: 30px;
  padding: 2px;
}
.plugin-enable {
  display: flex;
  align-items: center;
  gap: 8px;
}
.plugin-enable input {
  width: auto;
}
@media (prefers-reduced-motion: reduce) {
  .event-marker.icon {
    transition: none;
  }
}
.plugin-image-source {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  color: #285742;
}
.view-toolbar,
.view-controls,
.plugin-actions {
  flex-wrap: wrap;
}
.view-toolbar {
  gap: 10px;
}
.event-marker.icon.focus-preview:hover,
.event-marker.icon.focus-preview:focus-visible {
  transform: translateX(-50%);
}
.focus-card {
  position: absolute;
  z-index: 20;
  width: 240px;
  padding: 12px;
  border: 2px solid #d5ded0;
  border-radius: 50%;
  background: #fff;
  color: #314b3d;
  box-shadow: 0 8px 28px #203d2826;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.08);
  transform-origin: center;
  transition:
    transform 180ms ease-out,
    opacity 140ms ease-out,
    border-radius 180ms ease-out;
}
.focus-card.open {
  opacity: 1;
  border-radius: 12px;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(var(--card-scale, 1));
}
.focus-card > strong {
  display: block;
  font-size: 13px;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
}
.focus-card .focus-notes {
  font-size: 12px;
  line-height: 1.5;
  margin: 8px 0 0;
  max-height: 6em;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.focus-card img {
  width: 100%;
  max-height: 130px;
  object-fit: cover;
  border-radius: 7px;
  margin-bottom: 10px;
}
@media (prefers-reduced-motion: reduce) {
  .focus-card {
    transition: none;
  }
}
.event-marker.shaped {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none;
  overflow: visible;
}
.marker-shape {
  position: absolute;
  inset: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  pointer-events: none;
}
.event-marker.shaped img {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  clip-path: var(--marker-clip);
}
.event-marker.shaped.selected .marker-shape {
  filter: drop-shadow(0 0 2px #cf9b18);
}
#plugin-definition,
#plugin-source {
  min-height: 180px;
  width: 100%;
  font: 12px/1.5 monospace;
}
body[data-dashboard=true] .app-layout {
  display: none;
}
.dashboard {
  max-width: 1200px;
  margin: 0 auto;
  padding: 36px 28px;
}
.dashboard-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}
.dashboard h1 {
  font-size: 36px;
  margin: 8px 0;
}
.dashboard > section {
  margin: 32px 0 48px;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.dashboard-timeline {
  border: 1px solid var(--border, #d6dfd0);
  border-radius: 9px;
  background: white;
  padding: 18px;
  overflow-wrap: anywhere;
}
.dashboard-timeline a {
  color: #234f3b;
  font-size: 17px;
  font-weight: 650;
}
.dashboard-timeline p {
  font-size: 12px;
  line-height: 1.6;
}
.dashboard-search {
  display: flex;
  gap: 18px;
  margin: 24px 0;
  flex-wrap: wrap;
}
.dashboard-search label {
  flex: 1;
  min-width: 200px;
}
.timeline-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.timeline-tags button {
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: #edf2e8;
  border-color: #dbe4d4;
  box-shadow: none;
  font-size: 12px;
}
.document-tags {
  display: block;
  margin: 0 0 20px;
  max-width: 650px;
  font-size: 12px;
}
.document-tags input {
  display: block;
  width: 100%;
  margin-top: 6px;
}
.pull-comment {
  border-top: 1px solid #d6dfd0;
  padding: 14px 0;
}
.pull-comment p,
.preserve-lines {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
#pull-diff {
  max-height: 260px;
  overflow: auto;
  background: #f2f5ef;
  padding: 12px;
  margin: 18px 0;
  font-size: 12px;
}
body[data-platform-editor] .app-header {
  display: none;
}
.event-marker:not(.group)[data-size=small] {
  width: 16px;
  height: 16px;
  top: 184px;
}
.event-marker:not(.group)[data-size=large] {
  width: 32px;
  height: 32px;
  top: 176px;
}
.event-marker.icon {
  border-width: 4px;
}
.marker-outline {
  z-index: 1;
}
.comparison-settings {
  padding: 16px 20px;
  border-bottom: 1px solid #dce3d6;
}
.comparison-heading,
.comparison-track {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.comparison-track {
  margin-top: 10px;
}
.comparison-track strong {
  min-width: 150px;
  max-width: 240px;
}
.comparison-track label {
  flex: 1;
  min-width: 120px;
}
.compare-results {
  display: grid;
  gap: 12px;
  margin: 18px 0;
}
.compare-results label {
  display: flex;
  gap: 10px;
  align-items: center;
}
.compare-results input[type=checkbox] {
  width: auto;
}
.comparison-axis-title {
  position: absolute;
  left: 48px;
  color: #54715b;
  font-weight: 650;
  font-size: 12px;
}
[data-comparison-disabled] {
  display: none !important;
}
.plugin-source-links {
  padding-left: 1.2rem;
}
.plugin-source-links li {
  margin: 0.4rem 0;
  overflow-wrap: anywhere;
}
.plugin-source-links a {
  color: var(--ink, #2d5645);
}
.memory-notice {
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.2rem;
  background: #fff5d8;
  color: #614c20;
  border-bottom: 1px solid #e7d49a;
}
.memory-notice span {
  line-height: 1.5;
}
.memory-notice button {
  flex-shrink: 0;
}
.capacity-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  flex-shrink: 0;
}
.capacity-actions a {
  color: inherit;
}
#capacity-dismiss {
  background: none;
  border: 0;
  color: inherit;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0.2rem 0.4rem;
}
.guest-fork-status {
  padding: 0.75rem 1.2rem;
  color: #834823;
  background: #fff5e9;
  margin: 0;
}
@media (max-width: 600px) {
  .memory-notice {
    align-items: flex-start;
    flex-direction: column;
  }
  .capacity-notice {
    position: relative;
    padding-right: 2.6rem;
  }
  #capacity-dismiss {
    position: absolute;
    top: 0.55rem;
    right: 0.5rem;
  }
}
.guest-fork-original {
  display: block;
  padding: 0.5rem 1.2rem;
}
.focus-card {
  max-height: 90%;
  overflow-y: auto;
}
.focus-sources {
  font-size: 11px;
  overflow-wrap: anywhere;
}
.focus-sources h4 {
  margin: 10px 0 4px;
}
.focus-sources ul {
  margin: 0;
  padding-left: 16px;
}
.focus-sources a,
.markdown-view a {
  color: #315d80;
  text-decoration: underline;
}
.rich-text-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0;
}
.rich-text-toolbar button {
  min-height: 28px;
  font-size: 12px;
  padding: 0 8px;
}
.rich-text-content {
  min-height: 120px;
  max-height: 400px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: white;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0;
}
.rich-text-content:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px #61a37833;
}
.markdown-view {
  overflow-wrap: anywhere;
  white-space: normal;
}
.markdown-view p {
  margin: 0 0 8px;
}
.markdown-view h1,
.markdown-view h2,
.markdown-view h3 {
  font-size: 1.1em;
  margin: 8px 0;
}
.markdown-view ul,
.markdown-view ol {
  padding-left: 22px;
  margin: 8px 0;
}
.markdown-view blockquote {
  margin: 8px 0;
  padding-left: 10px;
  border-left: 3px solid #d5ded0;
}
.markdown-view pre {
  white-space: pre-wrap;
  background: #f3f5f0;
  padding: 6px;
}
.focus-card .markdown-view strong {
  display: inline;
  font-size: inherit;
}
.summary-fan {
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
}
.summary-fan-hit {
  position: absolute;
  pointer-events: auto;
  border-radius: 30px;
}
.summary-fan-lines {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  stroke: #b9c7ad;
  stroke-width: 1;
}
.summary-fan .summary-member,
.summary-fan .summary-member:hover,
.summary-fan .summary-member:focus-visible {
  transform: translate(-50%, -50%) scale(var(--fan-scale, 1));
  transition:
    left 180ms ease-out,
    top 180ms ease-out,
    opacity 160ms ease-out,
    transform 160ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .summary-fan .summary-member {
    transition: none;
  }
}
.summary-fan .summary-member.icon:not(.focus-preview):hover,
.summary-fan .summary-member.icon:not(.focus-preview):focus-visible {
  transform: translate(-50%, -50%) scale(calc(var(--fan-scale, 1) * 3));
}
.timeline-actions,
.timeline-actions nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.timeline-actions {
  margin: 14px 0;
}
.timeline-actions a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  background: var(--paper);
}
.timeline-actions a:hover {
  background: var(--hover);
}
body[data-embed] .app-header,
body[data-embed] .memory-notice,
body[data-embed] .guest-fork-status,
body[data-embed] .guest-fork-original,
body[data-embed] .document-toolbar,
body[data-embed] .document-tags,
body[data-embed] .timeline-actions,
body[data-embed] .document-meta,
body[data-embed] .window-bounds,
body[data-embed] #separate-button,
body[data-embed] #presentation-button,
body[data-embed] #plugins-button,
body[data-embed] #compare-button,
body[data-embed] #center-vertical,
body[data-embed] #add-button,
body[data-embed] .density-control {
  display: none !important;
}
body[data-embed] main {
  padding: 0 8px;
}
body[data-embed] .app-layout {
  min-height: 0;
}
body[data-embed] .document-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  padding: 8px 0;
}
body[data-embed] .title-input {
  flex: 1 1 12em;
  font-size: 22px;
}
body[data-embed] .description-input {
  display: none;
}
body[data-embed] .legal-notices {
  margin: 0;
  padding: 4px 8px;
  font-size: 11px;
}
.embed-open {
  font-size: 13px;
  white-space: nowrap;
}
body[data-platform-editor] #share-button,
body[data-platform-editor] #pull-button,
body[data-platform-editor] #guest-fork-button {
  display: none;
}
.dashboard-introduction {
  margin: 24px 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
#timeline-help-dialog {
  max-width: min(520px, calc(100vw - 32px));
}
#timeline-help-dialog li {
  margin: 12px 0;
  line-height: 1.6;
}
dialog > *,
dialog form > * {
  min-width: 0;
  max-width: 100%;
}
dialog textarea {
  width: 100%;
  box-sizing: border-box;
}
dialog button {
  white-space: normal;
  overflow-wrap: anywhere;
}
.follow-latest-control {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  white-space: nowrap;
}
.follow-latest-control input {
  width: auto;
  margin: 0;
  accent-color: var(--green);
}
.build-identity {
  overflow-wrap: anywhere;
}
.download-menu {
  position: relative;
  font-size: 13px;
}
.download-menu summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height);
  border: 1px solid #46614e;
  border-radius: var(--radius);
  padding: 0 12px;
  font-weight: 500;
  transition: background 0.15s;
}
.download-menu summary::-webkit-details-marker {
  display: none;
}
.download-menu summary::after {
  content: "\25be";
  margin-left: 6px;
  font-size: 10px;
  opacity: 0.7;
}
.download-menu summary:hover {
  background: #294333;
}
.download-menu > div {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 100;
  background: #fff;
  color: #285742;
  border: 1px solid #d7dfd3;
  border-radius: 8px;
  padding: 8px;
  min-width: 240px;
  max-width: calc(100vw - 32px);
  box-shadow: 0 8px 24px #20372c20;
}
.download-menu > div a {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  color: #285742;
  text-decoration: none;
}
.download-menu > div a:hover {
  background: #f0f3eb;
}
@media (max-width: 650px) {
  .app-header {
    position: relative;
  }
  .download-menu {
    position: static;
  }
  .download-menu > div {
    left: 15px;
    right: 15px;
    top: calc(100% - 4px);
    min-width: 0;
    max-width: none;
  }
}
.calendar-picker-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}
#datetime-picker label {
  flex: 1 1 5rem;
  min-width: 5rem;
}
#datetime-picker input,
#datetime-picker select {
  width: 100%;
}
#datetime-picker details {
  margin: 0.75rem 0;
}
#datetime-picker details[open] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}
#datetime-picker summary {
  width: 100%;
}
.duration-band {
  position: absolute;
  pointer-events: auto;
  height: 12px;
  padding: 0 2px;
  border: 1px solid #fff;
  border-radius: 3px;
  background: var(--timeline-duration, #73958b);
  color: var(--timeline-duration-text, #213d33);
  font-size: 9px;
  line-height: 10px;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0.7;
}
.duration-band:hover,
.duration-band:focus-visible {
  opacity: 1;
  height: 18px;
  z-index: 3;
}
.duration-limit {
  position: absolute;
  bottom: 0;
  left: 48px;
  font-size: 11px;
}
.duration-endpoints {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 12px;
}
.duration-endpoint {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  min-width: 0;
}
.duration-endpoint legend {
  padding: 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: #44584b;
}
.duration-endpoint > button {
  align-self: flex-start;
}
.duration-time {
  font-family: ui-monospace, monospace;
}
.duration-anchor {
  margin: 0;
  font-size: 13px;
  overflow-wrap: anywhere;
}
#event-durations {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
#event-durations h3 {
  margin: 0;
}
.duration-link {
  display: block;
  max-width: 100%;
  text-align: left;
  white-space: normal;
  padding: 8px 10px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.calendar-day-picker {
  flex: 1 1 100%;
  max-width: 22rem;
  margin: 0.5rem 0;
}
.calendar-month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.25rem;
  text-align: center;
}
.calendar-days button {
  min-height: 30px;
  padding: 0 0.1rem;
  box-shadow: none;
}
.calendar-days button[aria-pressed=true] {
  background: #2c5945;
  color: white;
}
#datetime-dialog {
  width: min(460px, calc(100vw - 30px));
  min-width: 0;
}
#datetime-dialog .calendar-day-picker {
  max-width: none;
}
#datetime-text {
  font-family: ui-monospace, monospace;
}
#datetime-picker summary {
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}
#datetime-picker .calendar-days > span {
  font-size: 12px;
  color: var(--muted);
}
#datetime-picker .calendar-month-nav {
  font-weight: 600;
}
#search-dialog,
#moment-picker {
  width: min(620px, calc(100vw - 30px));
  min-width: 0;
}
.search-row {
  display: flex;
  gap: 8px;
}
.search-row input {
  flex: 1;
}
.search-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(60vh, 520px);
  overflow: auto;
}
.search-results:empty {
  display: none;
}
.search-result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  white-space: normal;
}
.search-result strong {
  font-size: 14px;
  font-weight: 600;
}
.search-meta {
  font-size: 12px;
  color: var(--muted);
  font-family: ui-monospace, monospace;
}
.search-snippet {
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
  overflow-wrap: anywhere;
}
.event-marker.search-hit,
.duration-band.search-hit {
  animation: search-hit 0.8s ease-in-out 3;
  z-index: 6;
}
@keyframes search-hit {
  50% {
    box-shadow: 0 0 0 4px #fff, 0 0 0 8px #c59b22;
  }
}
@media (prefers-reduced-motion: reduce) {
  .event-marker.search-hit,
  .duration-band.search-hit {
    animation: none;
    box-shadow: 0 0 0 4px #fff, 0 0 0 8px #c59b22;
  }
}
.event-marker.heading-marker,
.event-marker.heading-marker:hover,
.event-marker.heading-marker:focus-visible {
  top: 192px;
  width: auto;
  height: auto;
  max-width: 420px;
  padding: 0.12em 0.45em;
  border: 0;
  border-radius: 4px;
  background: var(--timeline-heading-backing, #fbfcf9e6);
  box-shadow: none;
  color: var(--timeline-text, #1d3528);
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translate(-50%, -50%);
  z-index: 3;
}
.event-marker.heading-marker:hover,
.event-marker.heading-marker:focus-visible {
  color: var(--timeline-text, #0f2a1c);
  box-shadow: 0 0 0 2px #c4d8b2;
  z-index: 5;
}
.event-marker.heading-marker.selected {
  background: var(--timeline-heading-backing, #fbfcf9e6);
  box-shadow: 0 0 0 2px #173c28;
}
.event-marker.heading-marker[data-heading=h1] {
  font-size: 30px;
}
.event-marker.heading-marker[data-heading=h2] {
  font-size: 25px;
}
.event-marker.heading-marker[data-heading=h3] {
  font-size: 21px;
}
.event-marker.heading-marker[data-heading=h4] {
  font-size: 18px;
}
.event-marker.heading-marker[data-heading=h5] {
  font-size: 15px;
}
.event-marker.heading-marker[data-heading=h6] {
  font-size: 13px;
  font-weight: 600;
}
.event-marker.duration-point {
  border-radius: 7px;
  width: 30px;
  background: var(--timeline-duration, #73958b);
}
#group-durations h3 {
  font-size: 14px;
  margin: 18px 0 8px;
}
.separate-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  max-height: 260px;
  overflow: auto;
}
.separate-tags .checkbox-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}
.separate-tags input {
  width: auto;
  min-height: 0;
}
#map-dialog {
  width: min(560px, calc(100vw - 32px));
}
.map-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px 12px;
}
.map-scope {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0 0;
  padding: 8px 12px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.map-scope legend {
  font-size: 12px;
  font-weight: 600;
  color: #44584b;
  padding: 0 4px;
}
.map-scope .checkbox-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}
.map-scope .checkbox-label input {
  width: auto;
  min-height: 0;
}
#map-tags {
  margin-left: 24px;
  width: calc(100% - 24px);
}
.map-summary {
  margin: 10px 0 0;
}
.map-working {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.map-working progress {
  flex: 1;
  min-width: 0;
}
.separation-tags {
  font-family: ui-monospace, monospace;
  font-size: 13px;
  color: var(--green);
  overflow-wrap: anywhere;
}
.edge-arcs {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  overflow: visible;
}
.edge-arc {
  fill: none;
  stroke: var(--timeline-measure, #8aa79b);
  stroke-width: 1.5;
  opacity: 0.65;
  pointer-events: stroke;
}
.edge-arc:hover {
  stroke: var(--green);
  stroke-width: 3;
  opacity: 1;
}
.edge-limit {
  font-size: 11px;
  fill: var(--muted);
}
.related-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.related-section h3 {
  margin: 0;
}
.related-list,
.related-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.related-row {
  display: flex;
  gap: 4px;
}
.related-entity,
.related-results button {
  flex: 1;
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
  padding: 8px 10px;
}
.related-unlink {
  flex-shrink: 0;
  width: var(--control-height);
  padding: 0;
}
.related-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.related-actions:empty {
  display: none;
}
.related-add summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--green);
}
.related-add input {
  width: 100%;
  margin: 8px 0;
}
.challenge-dialog {
  width: min(420px, calc(100vw - 32px));
}
.challenge-dialog progress {
  display: block;
  width: 100%;
}
.challenge-widget {
  margin: 12px 0;
}
.challenge-status:empty {
  display: none;
}
.challenge-actions {
  display: flex;
  justify-content: flex-end;
}
body[data-warnings][data-sensitive]:not([data-images-shown]) :is(.event-marker img, .focus-card img, .plugin-image-link img, .reader-panel img, .duration-background img, .timeline-backdrop img),
body[data-warnings]:not([data-images-shown]) :is(.event-marker[data-sensitive] img, .focus-card[data-sensitive] img, dialog[data-sensitive] .plugin-image-link img, dialog[data-sensitive] .reader-panel img, .duration-background[data-sensitive] img) {
  filter: blur(14px) saturate(0.6);
}
.sensitive-gate {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 16px;
  background: #eef2ea;
}
.sensitive-gate-card {
  max-width: 520px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f9fbf5;
  box-shadow: 0 20px 100px #152b3540;
}
.sensitive-gate-card h2 {
  margin: 0 0 12px;
  font-family: Georgia, serif;
  font-size: 24px;
  font-weight: 400;
}
.sensitive-gate-card .dialog-actions {
  align-items: center;
  justify-content: flex-end;
  margin-top: 16px;
}
.sensitive-note {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
}
.sensitive-status .link-button,
.sensitive-note .link-button {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  text-decoration: underline;
  font-size: inherit;
  cursor: pointer;
}
.content-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  padding: 0;
  border: 0;
}
.content-labels legend {
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
}
.content-labels label {
  display: flex;
  flex-direction: row;
  gap: 6px;
  align-items: center;
  margin: 0;
  font-weight: 400;
}
.content-labels input {
  width: auto;
}
.sensitive-badge {
  display: inline-block;
  margin: 0 0 6px;
  padding: 2px 8px;
  border: 1px solid #d9c9a8;
  border-radius: 999px;
  background: #fbf6ea;
  color: #6b5326;
  font-size: 12px;
}
.focus-credit {
  display: block;
  margin: -2px 0 6px;
  color: var(--muted);
  font-size: 11px;
}
.help-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0 0 0 6px;
  padding: 0;
  border: 1px solid var(--line-strong, #cdd6c8);
  border-radius: 50%;
  background: var(--paper, #fff);
  color: var(--green);
  font: 700 11px/1 system-ui, sans-serif;
  vertical-align: middle;
  cursor: help;
}
.inspector-heading .help-tip,
.dialog-heading .help-tip {
  width: 18px;
  font: 700 11px/1 system-ui, sans-serif;
  margin-right: auto;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--paper);
  color: var(--green);
}
.inspector-heading .help-tip + .share-entity {
  margin-left: 0;
}
.help-tip:hover,
.help-tip:focus-visible,
.inspector-heading .help-tip:hover,
.dialog-heading .help-tip:hover {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}
.help-tooltip {
  position: fixed;
  z-index: 300;
  max-width: min(18rem, calc(100vw - 16px));
  padding: 8px 10px;
  border-radius: 6px;
  background: #1f2b25;
  color: #f2f6ef;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.2);
  pointer-events: none;
}
.timeline-help-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.timeline-help-actions form {
  margin: 0;
}
.tour-spotlight {
  position: fixed;
  z-index: 280;
  border-radius: 8px;
  box-shadow: 0 0 0 3px var(--focus, #61a378), 0 0 0 9999px rgb(18 28 23 / 0.45);
  pointer-events: none;
  transition:
    left 0.2s,
    top 0.2s,
    width 0.2s,
    height 0.2s;
}
.tour-card {
  position: fixed;
  z-index: 290;
  width: min(22rem, calc(100vw - 16px));
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--paper, #fff);
  color: var(--ink);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.25);
}
.tour-card h2 {
  margin: 0 0 6px;
  font-size: 17px;
}
.tour-card p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.5;
}
.tour-count {
  color: var(--muted, #6f7c71);
  font-size: 12px !important;
}
.tour-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.tour-actions span {
  display: flex;
  gap: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .tour-spotlight {
    transition: none;
  }
}
/*# sourceMappingURL=app.css.map */