.sheet.is-timeline { width: min(1160px, calc(100vw - 32px)); background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.is-timeline .sheet-scroll { height: calc(100svh - 230px); max-height: calc(100svh - 230px); }
.is-timeline .sheet-content { padding: 20px 35px 50px; }
.timeline-heading { min-height: 0; }
.timeline-tools, .timeline-owner-tools { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 9px; }
.timeline-status { font-size: 10px; line-height: 1.8; color: var(--muted); min-height: 18px; margin: 14px 0 0; }
.timeline-status:empty { min-height: 0; margin: 0; }
.timeline-filters { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.timeline-filters .timeline-filter { position: relative; min-height: 40px; padding: 10px 13px; }
.timeline-filter svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.timeline-filter rect { fill: none; stroke: #b29fc1; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .55s var(--ease); }
.timeline-filter[aria-pressed="true"] rect { stroke-dashoffset: 0; }
.timeline-filter[aria-pressed="true"] { color: #6e557e; }
.timeline-track { position: relative; margin: 42px auto 0; padding: 20px 0; min-height: 280px; }
.timeline-track::before, .timeline-track::after { content: ''; position: absolute; left: calc(50% - .5px); top: 0; width: 1px; pointer-events: none; }
.timeline-track::before { height: 100%; background: linear-gradient(transparent, #e0d8e5 5%, #e0d8e5 95%, transparent); }
.timeline-track::after { height: calc(var(--timeline-progress, 0) * 100%); background: linear-gradient(transparent, #b7a3c7); }
.life-event { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); position: relative; z-index: 1; align-items: start; margin: 0 0 90px; transition: opacity .8s, translate .9s var(--ease); }
.life-event:last-child { margin-bottom: 30px; }
.life-date { grid-column: 1; grid-row: 1; text-align: right; padding-top: 23px; display: flex; flex-direction: column; gap: 9px; }
.life-year { font-family: Georgia, serif; font-size: 44px; font-weight: 400; font-style: italic; letter-spacing: -2px; color: #b9a9c4; line-height: 1; }
.life-date time { font-size: 9px; color: #9a8e9c; line-height: 1.7; }
.life-category { font-size: 11px; line-height: 1.6; color: #95869e; }
.life-date:has(time:not([datetime])) .life-year { font-size: 13px; line-height: 1.4; letter-spacing: -.3px; }
.life-dot { grid-column: 2; grid-row: 1; justify-self: center; margin-top: 34px; width: 7px; height: 7px; background: #c3b3cf; border: 2px solid #faf8f5; border-radius: 50%; box-shadow: 0 0 0 5px #e8e0ee77; }
.life-card { grid-column: 3; grid-row: 1; position: relative; border-radius: 0; padding: 18px 23px; background: transparent; border: 0; text-align: center; transition: opacity .5s; }
.life-event:nth-child(3n + 2) .life-card, .life-event:nth-child(3n) .life-card { background: transparent; border-color: transparent; }
.life-event:nth-child(even) .life-card { grid-column: 1; }
.life-event:nth-child(even) .life-date { grid-column: 3; text-align: left; }
.event-youtube { grid-column: 3; grid-row: 2; min-width: 0; padding: 0 23px; margin-top: 20px; }
.life-event:nth-child(even) .event-youtube { grid-column: 1; }
.life-card h2 { font-size: 19px; line-height: 1.4; font-weight: 450; letter-spacing: -.6px; margin: 0 0 10px; overflow-wrap: anywhere; }
.life-place { font-size: 9px; letter-spacing: .3px; color: #9b8d9e; margin: 0 0 15px; overflow-wrap: anywhere; }
.life-words { font-size: 12px; line-height: 1.95; color: #817785; white-space: pre-wrap; overflow-wrap: anywhere; margin: 12px 0 0; }
.event-photos { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 8px; align-items: start; margin-top: 22px; translate: 0 var(--parallax, 0px); }
.event-photo { margin: 0; min-width: 0; }
.event-photo figcaption { margin: 8px 0 0; font-size: 12px; line-height: 1.55; color: #95869e; white-space: pre-wrap; overflow-wrap: anywhere; }
.event-photos button { display: block; width: 100%; aspect-ratio: 1.15; padding: 0; overflow: hidden; position: relative; border-radius: 8px; background: #e4dce8; transition: transform .6s var(--ease); }
.event-photos button:hover { transform: translateY(-3px); }
.event-photos img, .event-photos video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.event-photos.photos-1 .event-photo, .event-photos.photos-3 .event-photo:first-child { grid-column: 1 / -1; }
.event-photos.photos-1 button, .event-photos.photos-3 .event-photo:first-child button { aspect-ratio: 1.3; }
.more-photos { display: grid; place-items: center; position: absolute; inset: 0; background: #6a5e7a55; color: #fff; font-size: 22px; backdrop-filter: blur(2px); }
.has-reveal .life-event { opacity: 0; translate: 0 26px; }
.has-reveal .life-event.is-visible { opacity: 1; translate: 0 0; }
.timeline-empty { position: relative; background: transparent; width: min(300px,100%); margin: 70px auto; padding: 30px 10px; }
.timeline-empty > span { color: #beaed0; font-size: 26px; }
.timeline-empty p { font-size: 12px; color: #97869f; margin: 18px 0 0; }
.event-controls { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: -10px -10px 12px; }
.event-controls > div { display: flex; gap: 4px; }
.event-controls button { width: 27px; height: 27px; border-radius: 50%; background: #ffffff80; color: #9a88a5; font-size: 13px; padding: 0; }
.event-controls .event-grab { cursor: grab; touch-action: none; }
.event-dragging { z-index: 10; transition: none; opacity: .8; }
.event-dragging .life-card { box-shadow: 0 20px 40px #7d688f25; }
.event-drop-target .life-card { outline: 1px dashed #ad96bf; outline-offset: 8px; }
.moment-editor { width: min(620px,calc(100vw - 32px)); max-height: 90svh; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #e6dceb; border-radius: 24px; background: #fcfafb; padding: 42px 30px 30px; box-shadow: 0 25px 90px #57445f24; scrollbar-width: thin; scrollbar-color: #e4dbe9 transparent; }
.moment-editor::backdrop { background: #eee8f0bf; backdrop-filter: blur(12px); }
.moment-form { display: flex; flex-direction: column; gap: 22px; text-align: center; }
.moment-form h2 { margin: 0 0 6px; font-weight: 450; font-size: 25px; letter-spacing: -.8px; }
.moment-form label { display: flex; flex-direction: column; gap: 9px; font-size: 10px; color: #9a89a3; }
.moment-form label > span { display: contents; color: #b0a3b7; }
.moment-form input:not([type=file]), .moment-form textarea, .moment-form select { border: 1px solid #e4dae9; border-radius: 11px; padding: 12px; font: inherit; font-size: 12px; background: #fffefe; color: #796781; min-width: 0; width: 100%; }
.moment-form input:focus, .moment-form textarea:focus { outline: 2px solid #d0bddc; outline-offset: 2px; }
.moment-form textarea { resize: vertical; min-height: 100px; line-height: 1.8; }
.moment-form input::placeholder, .moment-form textarea::placeholder { color: #b6aabb; }
.moment-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.moment-photo-tools { display: flex; align-items: center; justify-content: center; gap: 15px; }
.moment-photo-tools > span { font-size: 9px; color: #aa9caf; }
.moment-photo-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
.moment-thumb { margin: 0; min-width: 0; position: relative; padding: 6px; background: #fff; border-radius: 8px; border: 1px solid #ece5f0; }
.moment-thumb-image { width: 100%; aspect-ratio: 1; position: relative; overflow: hidden; border-radius: 5px; background: #eee9f0; }
.moment-thumb-image img, .moment-thumb-image video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.moment-thumb.is-cropping .moment-thumb-image { cursor: grab; touch-action: none; }
.moment-thumb.is-cropping .moment-thumb-image img { transform: scale(1.015); }
.crop-hint { position: absolute; inset: auto 5px 5px; padding: 5px; border-radius: 10px; background: #fffdf2d9; color: #766b7e; font-size: 8px; text-align: center; pointer-events: none; }
.moment-thumb-controls { display: flex; gap: 3px; justify-content: center; padding-top: 6px; }
.moment-thumb-controls button { background: #f0eaf4; color: #a18aaf; border-radius: 50%; width: 24px; height: 24px; font-size: 12px; padding: 0; }
.moment-thumb-controls [data-crop-toggle] { display: grid; place-items: center; }
.moment-thumb-controls [data-crop-toggle][aria-pressed="true"] { background: #dcd0e5; color: #755d83; }
.moment-thumb-controls [data-crop-toggle] svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.moment-thumb-controls [data-drag-photo] { cursor: grab; }
.moment-form .moment-thumb input { font-size: 10px; text-align: center; border: 0; padding: 8px 1px 3px; }
.moment-error { font-size: 11px; line-height: 1.8; color: #a77a8b; margin: 0; }
.moment-error:empty { display: none; }
.moment-form > button[type=submit] { align-self: center; padding: 12px 25px; }
.timeline-viewer { border: 0; border-radius: 0; background: transparent; max-width: min(1100px,94vw); max-height: 94svh; padding: 42px 0 10px; text-align: center; box-shadow: none; overflow: visible; }
.timeline-viewer::backdrop { background: #eee8f05c; backdrop-filter: blur(6px); }
.timeline-viewer-image { display: grid; grid-template-columns: 38px minmax(0,1fr) 38px; gap: 12px; align-items: center; }
.timeline-viewer-image img, .timeline-viewer-image video { max-width: 100%; max-height: 72svh; object-fit: contain; margin: auto; display: block; grid-column: 2; grid-row: 1; }
.timeline-viewer-image button { width: 36px; height: 36px; border-radius: 50%; background: #eee7f1; color: #9882a4; padding: 0; }
.timeline-viewer-image [data-previous] { grid-column: 1; grid-row: 1; }
.timeline-viewer-image [data-next] { grid-column: 3; grid-row: 1; }
.viewer-caption { font-size: 12px; color: #95869e; margin: 18px 0 10px; }
.viewer-count { font-size: 9px; color: #b0a1b8; }
@media (max-width:700px) {
  .sheet.is-timeline { width: calc(100vw - 24px); }
  .is-timeline .sheet-content { padding: 15px 14px 30px; }
  .life-event { grid-template-columns: 58px 28px minmax(0,1fr); margin-bottom: 60px; }
  .life-event .life-card, .life-event:nth-child(even) .life-card { grid-column: 3; padding: 18px; }
  .life-event .event-youtube, .life-event:nth-child(even) .event-youtube { grid-column: 3; padding: 0 18px; }
  .life-event .life-date, .life-event:nth-child(even) .life-date { grid-column: 1; text-align: right; padding-top: 28px; }
  .life-year { font-size: 28px; letter-spacing: -1px; transform: translateX(-5px); }
  .life-date time { font-size: 8px; }
  .life-dot { grid-column: 2; margin-top: 32px; }
  .timeline-track::before, .timeline-track::after { left: 71.5px; }
  .life-card h2 { font-size: 17px; }
  .life-words { font-size: 11px; }
  .event-controls > div { gap: 2px; }
  .event-controls button { width: 24px; height: 24px; }
}
@media (max-width:420px) {
  .life-event { grid-template-columns: 44px 24px minmax(0,1fr); }
  .timeline-track::before, .timeline-track::after { left: 55.5px; }
  .life-year { font-size: 23px; }
  .life-event .life-card, .life-event:nth-child(even) .life-card { padding: 16px 12px; }
  .life-event .event-youtube, .life-event:nth-child(even) .event-youtube { grid-column: 1 / -1; padding: 0 12px; }
  .moment-editor { padding: 40px 18px 25px; }
  .moment-form-row { grid-template-columns: 1fr; }
  .moment-photo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .moment-photo-tools { flex-direction: column; gap: 10px; }
  .timeline-viewer-image { grid-template-columns: 26px minmax(0,1fr) 26px; gap: 6px; }
  .timeline-viewer-image button { width: 26px; height: 26px; }
}
@media print {
  .is-timeline .sheet-scroll { height: auto; }
  .timeline-tools, .event-controls, .moment-editor, .timeline-status { display: none !important; }
  .life-event { opacity: 1 !important; translate: none !important; break-inside: avoid; }
}