| <div style="display: flex; flex-direction: column; gap: 0; margin: 1em 0; position: relative;"><div style="display: flex; align-items: flex-start; gap: 16px; position: relative; padding-bottom: 24px;"><div style="display: flex; flex-direction: column; align-items: center; flex-shrink: 0;"><div style="width: 12px; height: 12px; border-radius: 50%; background-color: var(--ooui-border-color-subtle, #a2a9b1); border: 2px solid var(--ooui-border-color-subtle, #a2a9b1); margin-top: 4px;"></div><div style="width: 2px; flex-grow: 1; background-color: var(--ooui-border-color-subtle, #a2a9b1); margin-top: 4px;"></div></div><div style="padding: 12px 18px; border: 1px dashed var(--ooui-border-color-subtle, #a2a9b1); border-radius: 6px; background-color: rgba(127, 127, 127, 0.04); flex-grow: 1;"><div style="font-weight: bold; font-size: 0.8em; opacity: 0.7; text-transform: uppercase;">{{{date1|Year / Date 1}}}</div><div style="font-weight: bold; font-size: 1.05em; margin: 2px 0;">{{{title1|First Event Title}}}</div><div style="font-size: 0.9em; opacity: 0.85;">{{{desc1|Description of the first milestone or historical event goes here.}}}</div></div></div><div style="display: flex; align-items: flex-start; gap: 16px; position: relative; padding-bottom: 24px;"><div style="display: flex; flex-direction: column; align-items: center; flex-shrink: 0;"><div style="width: 12px; height: 12px; border-radius: 50%; background-color: var(--ooui-border-color-subtle, #a2a9b1); border: 2px solid var(--ooui-border-color-subtle, #a2a9b1); margin-top: 4px;"></div><div style="width: 2px; flex-grow: 1; background-color: var(--ooui-border-color-subtle, #a2a9b1); margin-top: 4px;"></div></div><div style="padding: 12px 18px; border: 1px dashed var(--ooui-border-color-subtle, #a2a9b1); border-radius: 6px; background-color: rgba(127, 127, 127, 0.04); flex-grow: 1;"><div style="font-weight: bold; font-size: 0.8em; opacity: 0.7; text-transform: uppercase;">{{{date2|Year / Date 2}}}</div><div style="font-weight: bold; font-size: 1.05em; margin: 2px 0;">{{{title2|Second Event Title}}}</div><div style="font-size: 0.9em; opacity: 0.85;">{{{desc2|Description of the second milestone or historical event goes here.}}}</div></div></div><div style="display: flex; align-items: flex-start; gap: 16px; position: relative;"><div style="display: flex; flex-direction: column; align-items: center; flex-shrink: 0;"><div style="width: 12px; height: 12px; border-radius: 50%; background-color: var(--ooui-border-color-subtle, #a2a9b1); border: 2px solid var(--ooui-border-color-subtle, #a2a9b1); margin-top: 4px;"></div></div><div style="padding: 12px 18px; border: 1px dashed var(--ooui-border-color-subtle, #a2a9b1); border-radius: 6px; background-color: rgba(127, 127, 127, 0.04); flex-grow: 1;"><div style="font-weight: bold; font-size: 0.8em; opacity: 0.7; text-transform: uppercase;">{{{date3|Year / Date 3}}}</div><div style="font-weight: bold; font-size: 1.05em; margin: 2px 0;">{{{title3|Third Event Title}}}</div><div style="font-size: 0.9em; opacity: 0.85;">{{{desc3|Description of the final milestone or historical event goes here.}}}</div></div></div></div> | | <div style="display: flex; gap: 12px; align-items: stretch; margin: 1em 0; flex-wrap: wrap;"><div style="flex: 1; min-width: 180px; padding: 14px 16px; border: 1px dashed var(--ooui-border-color-subtle, #a2a9b1); border-top: 4px solid var(--ooui-border-color-subtle, #a2a9b1); border-radius: 4px; background-color: rgba(127, 127, 127, 0.03);"><div style="font-size: 0.75em; font-weight: bold; opacity: 0.6; text-transform: uppercase;">{{{date1|Phase 1}}}</div><div style="font-weight: bold; font-size: 1em; margin: 2px 0;">{{{title1|Concept}}}</div><div style="font-size: 0.85em; opacity: 0.85;">{{{desc1|Initial idea and research.}}}</div></div><div style="flex: 1; min-width: 180px; padding: 14px 16px; border: 1px dashed var(--ooui-border-color-subtle, #a2a9b1); border-top: 4px solid var(--ooui-border-color-subtle, #a2a9b1); border-radius: 4px; background-color: rgba(127, 127, 127, 0.03);"><div style="font-size: 0.75em; font-weight: bold; opacity: 0.6; text-transform: uppercase;">{{{date2|Phase 2}}}</div><div style="font-weight: bold; font-size: 1em; margin: 2px 0;">{{{title2|Development}}}</div><div style="font-size: 0.85em; opacity: 0.85;">{{{desc2|Building the core features.}}}</div></div><div style="flex: 1; min-width: 180px; padding: 14px 16px; border: 1px dashed var(--ooui-border-color-subtle, #a2a9b1); border-top: 4px solid var(--ooui-border-color-subtle, #a2a9b1); border-radius: 4px; background-color: rgba(127, 127, 127, 0.03);"><div style="font-size: 0.75em; font-weight: bold; opacity: 0.6; text-transform: uppercase;">{{{date3|Phase 3}}}</div><div style="font-weight: bold; font-size: 1em; margin: 2px 0;">{{{title3|Release}}}</div><div style="font-size: 0.85em; opacity: 0.85;">{{{desc3|Public launch and feedback.}}}</div></div></div> |