Timeline added

styles.css

@@ -125,6 +125,56 @@ main {
   font-family: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", serif;
 }
 
+.timeline-control {
+  display: grid;
+  gap: 0.45rem;
+  min-width: 12rem;
+  padding: 0.7rem;
+  border: 1px solid var(--panel-border);
+  border-radius: 8px;
+  background: rgba(253, 250, 240, 0.94);
+  box-shadow: 0 12px 36px rgba(60, 44, 22, 0.16);
+  color: var(--ink);
+  font-family: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", serif;
+}
+
+.timeline-control-title {
+  font-size: 0.76rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--accent);
+}
+
+.timeline-buttons {
+  display: grid;
+  gap: 0.35rem;
+}
+
+.timeline-buttons button {
+  width: 100%;
+  border: 1px solid rgba(70, 107, 69, 0.28);
+  border-radius: 6px;
+  padding: 0.42rem 0.55rem;
+  background: #fffdf6;
+  color: var(--ink);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.timeline-buttons button:hover,
+.timeline-buttons button:focus-visible {
+  border-color: rgba(70, 107, 69, 0.58);
+  outline: none;
+}
+
+.timeline-buttons button.is-selected {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+  font-weight: 700;
+}
+
 .error-overlay {
   position: fixed;
   right: 1rem;