:root { --jj-red: #e2231a; --jj-red-dark: #a91b24; --jj-ink: #111; --jj-charcoal: #373532; --jj-stone: #f7f7f5; --jj-line: #c9c7c3; --jj-white: #fff; color-scheme: light; font-family: "Hanken Grotesk", Arial, sans-serif; color: var(--jj-ink); background: var(--jj-white); }
 [hidden] { display: none !important; }
* { box-sizing: border-box; } body { margin: 0; } #file-input { block-size: 1px; inline-size: 1px; opacity: 0; position: fixed; }.welcome-screen { align-items: center; background: #f5f4f1; display: grid; min-height: 100vh; padding: 24px; place-items: center; }.welcome-card { background: var(--jj-white); box-shadow: 0 18px 52px rgb(29 29 27 / 16%); max-width: 600px; padding: clamp(34px, 6vw, 64px); text-align: center; width: 100%; }.welcome-logo { display: block; height: 30px; margin: 0 auto 38px; max-width: 100%; width: auto; }.welcome-kicker { color: var(--jj-red); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.welcome-card h1 { font-family: Georgia, serif; font-size: clamp(3rem, 7vw, 5.4rem); font-weight: 400; letter-spacing: -.075em; line-height: .88; margin: 0 0 22px; }.welcome-card h1 em { color: var(--jj-red); font-style: normal; }.welcome-copy { color: #645f5a; line-height: 1.5; margin: 0 auto 32px; max-width: 400px; }.drop-zone { align-items: center; border: 1px dashed #aaa59e; color: var(--jj-charcoal); cursor: pointer; display: flex; flex-direction: column; gap: 8px; padding: 26px 18px; transition: background .18s ease, border-color .18s ease; }.drop-zone:hover, .drop-zone.is-dragging { background: #fff1ef; border-color: var(--jj-red); }.drop-zone i { color: var(--jj-red); font-size: 2rem; }.drop-zone strong { color: var(--jj-red); }.drop-zone small { color: #7a746e; }.privacy-note { align-items: flex-start; color: #706a64; display: flex; font-size: .78rem; gap: 7px; line-height: 1.45; margin: 18px auto 0; max-width: 430px; text-align: left; }.privacy-note i { color: var(--jj-red); flex: 0 0 auto; font-size: 1rem; margin-top: 1px; }.welcome-status { color: var(--jj-red-dark); font-size: .9rem; line-height: 1.4; margin: 16px 0 0; min-height: 1.4em; }.site-header { background: var(--jj-white); border-top: 2px solid var(--jj-charcoal); }.utility-bar { align-items: stretch; background: #302e2c; color: var(--jj-white); display: flex; font-size: .72rem; font-weight: 600; height: 40px; padding-left: max(28px, calc((100vw - 1280px) / 2)); }.utility-bar > span { align-items: center; display: inline-flex; padding: 0 14px; }.utility-active { background: var(--jj-red); }.utility-right { gap: 5px; margin-left: auto; padding-right: max(28px, calc((100vw - 1280px) / 2)) !important; }.brand-bar { align-items: center; border-bottom: 1px solid var(--jj-line); display: flex; height: 88px; justify-content: flex-start; padding: 0 max(28px, calc((100vw - 1280px) / 2)); }.header-logo { display: block; height: 30px; max-width: min(308px, 70vw); width: auto; } main { background: var(--jj-stone); padding: 24px max(28px, calc((100vw - 1280px) / 2)) 28px; width: 100%; } h2, p { margin-top: 0; } h2 { align-items: center; display: flex; font-size: 1rem; font-weight: 700; gap: 8px; letter-spacing: -.01em; margin-bottom: 5px; } h2 i { color: var(--jj-red); font-size: 1.2rem; }
.upload-panel, .toolbar { align-items: center; display: flex; gap: 20px; justify-content: space-between; }.upload-panel { background: var(--jj-white); border: 1px solid var(--jj-line); border-radius: 0; box-shadow: 0 1px 0 rgb(29 29 27 / 4%); padding: 18px 22px; }.upload-panel p { color: var(--jj-charcoal); margin-bottom: 0; } #file-input { block-size: 1px; inline-size: 1px; opacity: 0; position: absolute; }.button { align-items: center; appearance: none; background: transparent; border: 1px solid var(--jj-charcoal); border-radius: 0; color: var(--jj-ink); cursor: pointer; display: inline-flex; font: inherit; font-weight: 700; gap: 8px; padding: 10px 14px; white-space: nowrap; }.button i { font-size: 1.15rem; }.primary { background: var(--jj-red); border-color: var(--jj-red); color: var(--jj-white); }.primary:hover { background: var(--jj-red-dark); border-color: var(--jj-red-dark); }.button:focus-visible { outline: 3px solid #f9bdba; outline-offset: 2px; }.secondary:hover { background: #ebeae6; }
.warnings { background: #fff0ef; border-left: 4px solid var(--jj-red); color: #6e1719; line-height: 1.45; margin: 16px 0 12px; padding: 13px 16px; }.timeline-section { background: var(--jj-white); border: 1px solid var(--jj-line); border-radius: 0; min-height: calc(100vh - 160px); overflow: hidden; position: relative; }.timeline { height: calc(100vh - 160px); min-height: 620px; width: 100%; }.toolbar { margin-top: 12px; }.toolbar p { color: var(--jj-charcoal); font-size: .9rem; margin-bottom: 0; }.timeline-loading { align-items: center; background: rgb(255 255 255 / 88%); color: var(--jj-charcoal); display: flex; font-size: .9rem; font-weight: 700; gap: 10px; inset: 0; justify-content: center; position: absolute; z-index: 10; }.timeline-loading i { color: var(--jj-red); font-size: 1.4rem; }
.vis-timeline { border: 0; font-family: inherit; }.vis-panel.vis-left, .vis-panel.vis-top { border-color: var(--jj-line); }.vis-labelset .vis-label { border-bottom-color: transparent; color: var(--jj-ink); font-weight: 600; }.vis-labelset .vis-label:hover { background: #f8f8f6; }.vis-time-axis .vis-text { color: var(--jj-charcoal); font-size: .75rem; font-weight: 700; }.vis-time-axis .vis-grid.vis-minor { border-color: transparent; }.vis-time-axis .vis-grid.vis-major { border-color: #e5e5df; }.vis-item.vis-range { background-color: var(--jj-charcoal) !important; border-color: var(--jj-charcoal) !important; border-radius: 99px; height: 14px; top: 14px; }.vis-item.vis-range .vis-item-content { padding: 0; }.vis-item.vis-range.vis-selected { background-color: var(--jj-ink) !important; border-color: var(--jj-ink) !important; }.vis-item.vis-range.moved { background-color: var(--jj-red) !important; border-color: var(--jj-red) !important; }.vis-current-time { background-color: var(--jj-red); }.vis-group { border-bottom-color: transparent; }.vis-item .vis-drag-left, .vis-item .vis-drag-right { cursor: ew-resize; }
.timeline-tooltip { background: var(--jj-ink); box-shadow: 0 10px 30px rgb(29 29 27 / 20%); color: var(--jj-white); max-width: 280px; opacity: 0; padding: 12px 14px; pointer-events: none; position: fixed; transform: translateY(4px); z-index: 20; }.timeline-tooltip strong { display: block; font-size: .9rem; margin-bottom: 7px; }.timeline-tooltip p { color: #e6e6e1; font-size: .78rem; line-height: 1.4; margin: 0; }.timeline-tooltip p + p { margin-top: 3px; }
.vis-item.vis-point { background: transparent !important; border: 0 !important; color: var(--jj-charcoal); font-size: .72rem; font-weight: 700; }.vis-item.vis-point .vis-dot { border-color: var(--jj-charcoal); border-width: 6px; }.vis-item.vis-point .vis-item-content { padding-left: 7px; }.vis-item.vis-point.milestone-eu { color: #77736d; }.vis-item.vis-point.milestone-eu .vis-dot { border-color: #77736d; }.vis-item.vis-point.milestone-go-live { color: var(--jj-red); }.vis-item.vis-point.milestone-go-live .vis-dot { border-color: var(--jj-red); }.vis-item.vis-point.moved .vis-dot { box-shadow: 0 0 0 2px #f4b2ad; }
@media (max-width: 620px) { .utility-bar { padding-left: 0; }.utility-bar > span { padding: 0 9px; }.brand-bar { height: 70px; padding: 0 16px; }.brand-context { display: none; } main { padding: 12px; }.upload-panel, .toolbar { align-items: flex-start; flex-direction: column; }.timeline-section, .timeline { height: calc(100vh - 190px); min-height: 520px; } }