.home-page { height: 100vh; overflow: hidden; display: flex; flex-direction: column; background: linear-gradient(180deg, #0f0f1a 0%, #1a1a2e 40%, #16213e 100%); } .home-movements-section { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; z-index: 1; } .home-timeline-stack { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; overflow: hidden; } .home-timeline-stack-vertical { flex-direction: row; align-items: stretch; } .home-movements-section-vertical { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; z-index: 1; } .site-layout-switch { position: absolute; top: 16px; left: 16px; z-index: 120; display: flex; gap: 8px; align-items: center; } .site-layout-link { padding: 6px 12px; border-radius: 6px; border: 1px solid rgba(201, 169, 110, 0.35); background: rgba(15, 15, 26, 0.85); color: rgba(201, 169, 110, 0.9); font-size: 12px; font-family: 'Georgia', serif; cursor: pointer; text-decoration: none; } .site-layout-link:hover { background: rgba(201, 169, 110, 0.18); color: #f5e6c8; } /* Link to the alternative tree start page — the one worth noticing. */ .site-layout-link-feature { border-color: rgba(201, 169, 110, 0.7); background: rgba(201, 169, 110, 0.16); color: #f5e6c8; } .site-layout-link-feature:hover { background: rgba(201, 169, 110, 0.3); } .gallery-session-suspended { position: fixed; inset: 0; z-index: -1; visibility: hidden; pointer-events: none; opacity: 0; overflow: hidden; } .gallery-session-active { position: fixed; inset: 0; z-index: 50; visibility: visible; pointer-events: auto; opacity: 1; } .home-overlay { position: relative; z-index: 10; min-height: 100vh; } .site-header { text-align: center; padding: 24px 16px 8px; flex-shrink: 0; position: relative; z-index: 110; overflow: visible; } .site-dev-tools { position: absolute; top: 16px; right: 16px; display: flex; gap: 8px; align-items: center; } .debug-mode-toggle, .checkup-link-btn, .curator-login-btn, .curator-logout-btn { padding: 6px 12px; border-radius: 6px; border: 1px solid rgba(201, 169, 110, 0.35); background: rgba(15, 15, 26, 0.85); color: rgba(201, 169, 110, 0.75); font-size: 12px; font-family: ui-monospace, 'Cascadia Code', monospace; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; } .debug-mode-toggle:hover, .checkup-link-btn:hover, .curator-login-btn:hover, .curator-logout-btn:hover { border-color: #c9a96e; color: #e8d5b5; } .debug-mode-toggle-active { border-color: #e8a040; background: rgba(232, 160, 64, 0.15); color: #e8a040; } .debug-show-more-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; border: 1px solid rgba(201, 169, 110, 0.35); background: rgba(15, 15, 26, 0.85); color: rgba(201, 169, 110, 0.75); font-size: 12px; font-family: ui-monospace, 'Cascadia Code', monospace; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; user-select: none; } .debug-show-more-toggle input { accent-color: #e8a040; cursor: pointer; } .debug-show-more-toggle:hover { border-color: #c9a96e; color: #e8d5b5; } .debug-show-more-toggle-active { border-color: #e8a040; background: rgba(232, 160, 64, 0.1); color: #e8a040; } .debug-show-more-toggle-muted { opacity: 0.55; } .curator-session-label { font-size: 11px; color: rgba(201, 169, 110, 0.65); font-family: ui-monospace, 'Cascadia Code', monospace; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .curator-login-btn { border-color: rgba(255, 220, 160, 0.35); } .curator-logout-btn { border-color: rgba(201, 169, 110, 0.25); color: rgba(201, 169, 110, 0.6); } .checkup-link-btn { text-decoration: none; } .site-header h1 { font-family: 'Georgia', 'Times New Roman', serif; font-size: 32px; color: #e8d5b5; margin: 0; letter-spacing: 2px; } .site-subtitle { color: rgba(201, 169, 110, 0.6); font-family: 'Georgia', serif; font-size: 14px; margin: 8px 0 0; font-style: italic; } .loading { text-align: center; padding: 48px; color: rgba(201, 169, 110, 0.6); font-family: 'Georgia', serif; font-size: 16px; } .home-page > .timeline-wrapper { flex-shrink: 0; } .error-banner { margin: 16px; padding: 12px 16px; background: rgba(139, 0, 0, 0.3); border: 1px solid rgba(255, 100, 100, 0.4); border-radius: 6px; color: #ffaaaa; text-align: center; }