/* The Race to Reusability โ€” styles Dark is the default (matching the original graphic); light mode kicks in via prefers-color-scheme. */ :root { --page: #0d1119; --surface: #151a24; --elevated: #1d2432; --ink: #f2f3f5; --ink-2: #b9bec9; --muted: #8a8f9b; --grid: #262d3b; --axis: #3a4150; --border: rgba(255, 255, 255, 0.10); --us: #2f9ec6; --cn: #e04f4f; --dot-mid: rgba(255, 255, 255, 0.45); --dot-top: #ffffff; } /* The site is dark by default โ€” the white dots depend on it (and it matches the original graphic). Opt into light explicitly: . */ :root[data-theme="light"] { --page: #f9f9f7; --surface: #fcfcfb; --elevated: #ffffff; --ink: #0b0b0b; --ink-2: #52514e; --muted: #898781; --grid: #e1e0d9; --axis: #c3c2b7; --border: rgba(11, 11, 11, 0.10); --us: #17739c; --cn: #c03434; --dot-mid: rgba(255, 255, 255, 0.55); --dot-top: #ffffff; } * { box-sizing: border-box; } /* consistent, visible keyboard focus everywhere (STYLE.md ยท Interaction) */ button:focus-visible, a:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } @font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk.woff2") format("woff2"); font-weight: 300 700; font-display: swap; } body { margin: 0; background: var(--page); color: var(--ink); font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.45; } /* subtle starfield: repeating 1px radial-gradient layers at coprime tile sizes, so the pattern never visibly repeats */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(1px 1px at 22px 46px, rgba(255, 255, 255, 0.13), transparent 100%), radial-gradient(1px 1px at 133px 187px, rgba(255, 255, 255, 0.09), transparent 100%), radial-gradient(1.3px 1.3px at 78px 12px, rgba(255, 255, 255, 0.07), transparent 100%), radial-gradient(1px 1px at 205px 94px, rgba(255, 255, 255, 0.11), transparent 100%), radial-gradient(1px 1px at 51px 141px, rgba(255, 255, 255, 0.06), transparent 100%), radial-gradient(1.4px 1.4px at 173px 233px, rgba(255, 255, 255, 0.10), transparent 100%), radial-gradient(1px 1px at 289px 61px, rgba(255, 255, 255, 0.08), transparent 100%), radial-gradient(1px 1px at 112px 305px, rgba(255, 255, 255, 0.05), transparent 100%); background-size: 229px 227px, 251px 241px, 197px 211px, 313px 331px, 181px 173px, 347px 359px, 373px 367px, 419px 401px; } :root[data-theme="light"] body::before { display: none; } .wrap { max-width: 1180px; margin: 0 auto; padding: 40px 24px 56px; } /* ---------- header ---------- */ header h1 { font-size: clamp(19px, 2.4vw, 24px); font-weight: 700; margin: 0 0 5px; letter-spacing: 0.4px; } header .meta { color: var(--muted); font-size: 12px; margin: 0; opacity: 0.85; } header .meta a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } header .meta a:hover { color: var(--ink-2); } /* ---------- section headers & share ---------- */ .sec-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; border-top: 1px solid var(--grid); margin: 48px 0 6px; padding-top: 30px; } .sec-head h2 { margin: 0; font-size: 23px; font-weight: 700; letter-spacing: 0.3px; scroll-margin-top: 20px; } .sec-sub { color: var(--muted); font-size: 13px; margin: 0 0 18px; max-width: 640px; } .share-links { margin-left: auto; display: flex; gap: 16px; align-items: center; } .share-btn { appearance: none; background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; color: var(--muted); cursor: pointer; text-decoration: none; } .share-btn:hover { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; } .view-toggle[hidden] { display: none; } .view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); } .view-toggle button { appearance: none; border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: 14px; padding: 8px 16px; cursor: pointer; } .view-toggle button + button { border-left: 1px solid var(--border); } .view-toggle button:hover { color: var(--ink); } .view-toggle button[aria-pressed="true"] { background: var(--elevated); color: var(--ink); font-weight: 600; } .swatch.us { background: var(--us); } .swatch.cn { background: var(--cn); } /* ---------- chart cards ---------- */ section.view { margin-top: 8px; } section.view[hidden] { display: none; } .chart-svg { width: 100%; height: auto; display: block; } svg text { font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; } .panel-card { fill: var(--surface); stroke: var(--border); } .lvl-title { fill: var(--ink); font-size: 18px; font-weight: 600; } .lvl-sub { fill: var(--ink-2); font-size: 14px; } .panel-name { fill: var(--ink); font-size: 15px; font-weight: 650; } .axis-line { stroke: var(--axis); stroke-width: 1; } .grid-line { stroke: var(--grid); stroke-width: 1; } .tick-label { fill: var(--muted); font-size: 12px; } .faint-dot { fill: var(--grid); } .bar-us { fill: var(--us); } .bar-cn { fill: var(--cn); } .dot-mid { fill: var(--dot-mid); pointer-events: none; } /* colored ring keeps the white dot readable even off the bar / on light themes */ .dot-top { fill: var(--dot-top); pointer-events: none; stroke-width: 2.5; } .dot-top.us { stroke: var(--us); } .dot-top.cn { stroke: var(--cn); } .date-label { fill: var(--ink-2); font-size: 12.5px; } .vname { fill: var(--ink); font-size: 13.5px; font-weight: 600; cursor: pointer; } .vname:hover { text-decoration: underline; } .vcompany { fill: var(--muted); font-size: 11.5px; } .badge-new rect { fill: color-mix(in srgb, var(--cn) 16%, var(--surface)); stroke: var(--cn); } .badge-new text { fill: var(--cn); font-size: 9.5px; font-weight: 700; letter-spacing: 0.8px; } .badge-new.us rect { fill: color-mix(in srgb, var(--us) 16%, var(--surface)); stroke: var(--us); } .badge-new.us text { fill: var(--us); } .hit { fill: transparent; cursor: pointer; } .hit:focus-visible { outline: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 3 3; } .dot-vis { transform-box: fill-box; transform-origin: center; transition: transform 120ms ease; pointer-events: none; } .dot-vis.lift { transform: scale(1.4); } /* timeline */ .tl-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; } .tl-line.us { stroke: var(--us); } .tl-line.cn { stroke: var(--cn); } .tl-dot { stroke: var(--surface); stroke-width: 2; } .tl-dot.us { fill: var(--us); } .tl-dot.cn { fill: var(--cn); } .tl-series { transition: opacity 140ms ease; } .tl-plot.hovering .tl-series { opacity: 0.22; } .tl-plot.hovering .tl-series.active { opacity: 1; } .tl-label { cursor: pointer; } .leader { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.55; fill: none; } .end-label { fill: var(--ink-2); font-size: 12.5px; font-weight: 600; } .end-sub { fill: var(--muted); font-size: 10.5px; font-weight: 500; } .end-logo { filter: brightness(0) invert(1); opacity: 0.72; } .today-line { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 4; opacity: 0.7; } .today-label { fill: var(--muted); font-size: 11px; } /* ---------- table view ---------- */ .table-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 8px 18px 14px; overflow-x: auto; } table { border-collapse: collapse; width: 100%; font-size: 13px; } caption { text-align: left; color: var(--muted); font-size: 12.5px; padding: 10px 0; } th, td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--grid); white-space: nowrap; } th { color: var(--muted); font-weight: 600; font-size: 11.5px; white-space: normal; line-height: 1.3; vertical-align: bottom; max-width: 92px; } td { color: var(--ink-2); font-variant-numeric: tabular-nums; } td.v { color: var(--ink); font-weight: 600; } tr:last-child td { border-bottom: none; } td .swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 8px; } /* ---------- summary view ---------- */ #summary-holder { max-width: 1000px; } .sum-row { display: grid; grid-template-columns: 150px 1fr; gap: 26px; align-items: center; padding: 17px 0; border-bottom: 1px solid var(--grid); } .sum-row:last-child { border-bottom: none; } .sum-axis { text-align: right; } .sum-lvl { color: var(--ink); font-size: 18px; font-weight: 600; } .sum-lvlname { color: var(--ink-2); font-size: 14px; } .sum-rockets { display: flex; flex-wrap: wrap; gap: 10px; } .sum-empty { color: var(--muted); } .sum-chip { appearance: none; font: inherit; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 11px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 9px 14px 9px 19px; position: relative; } .sum-chip::before { content: ""; position: absolute; left: 8px; top: 10px; bottom: 10px; width: 4px; border-radius: 2px; } .sum-chip.us::before { background: var(--us); } .sum-chip.cn::before { background: var(--cn); } .sum-chip:hover { background: var(--elevated); border-color: var(--axis); } .chip-logo { width: 46px; height: 22px; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.72; } .chip-name { color: var(--ink); font-size: 13.5px; font-weight: 600; } .chip-sub { color: var(--muted); font-size: 11.5px; } /* summary launch log */ .log-title { color: var(--ink); font-size: 16px; font-weight: 650; margin: 34px 0 2px; } .log-sub { color: var(--muted); font-size: 12.5px; margin: 0 0 12px; } .sum-log { list-style: none; margin: 0; padding: 0; } .sum-log li { display: grid; grid-template-columns: 78px 10px 1fr; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--grid); font-size: 13px; } .sum-log li:last-child { border-bottom: none; } .log-date { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; } .log-dot { width: 8px; height: 8px; border-radius: 50%; align-self: center; } .log-dot.us { background: var(--us); } .log-dot.cn { background: var(--cn); } .log-text { color: var(--ink-2); } .log-name { appearance: none; border: 0; background: none; padding: 0; font: inherit; color: var(--ink); font-weight: 600; cursor: pointer; } .log-name:hover { text-decoration: underline; } .log-note { color: var(--muted); font-style: italic; } /* ---------- about / FAQ ---------- */ #about { margin-top: 48px; padding-top: 30px; border-top: 1px solid var(--grid); max-width: 760px; color: var(--muted); font-size: 13.5px; } #about h2 { color: var(--ink-2); font-size: 18px; font-weight: 650; margin: 0 0 8px; } #about h3 { color: var(--ink-2); font-size: 15px; font-weight: 650; margin: 22px 0 6px; } #about p { margin: 0; line-height: 1.6; } #about ul { margin: 8px 0; padding-left: 22px; line-height: 1.6; } #about ul ul { margin: 2px 0 8px; } #about li strong { color: var(--ink-2); font-weight: 600; } #about a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; } #about a:hover { color: var(--ink); } /* ---------- tooltip ---------- */ #tooltip { position: fixed; z-index: 50; pointer-events: none; background: var(--elevated); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); max-width: 260px; } #tooltip .tip-value { color: var(--ink); font-weight: 700; font-size: 14px; } #tooltip .tip-label { color: var(--ink-2); font-size: 12.5px; margin-top: 1px; } #tooltip .tip-series { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; margin-top: 5px; } #tooltip .tip-key { width: 14px; height: 3px; border-radius: 2px; display: inline-block; } #tooltip .tip-note { color: var(--muted); font-size: 11.5px; margin-top: 4px; font-style: italic; } #tooltip .tip-hint { color: var(--muted); font-size: 10.5px; margin-top: 6px; padding-top: 5px; border-top: 1px solid var(--grid); } /* ---------- detail modal ---------- */ #modal-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; padding: 20px; } #modal-backdrop[hidden] { display: none; } #modal { background: var(--elevated); border: 1px solid var(--border); border-radius: 16px; padding: 24px 26px; width: min(490px, 100%); max-height: 85vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } #modal.has-photo { width: min(660px, 100%); } #modal .m-grid { display: grid; grid-template-columns: 1fr; gap: 18px; } #modal.has-photo .m-grid { grid-template-columns: 1fr 158px; } #modal .m-photo { width: 100%; height: 100%; max-height: 560px; object-fit: cover; border-radius: 12px; border: 1px solid var(--border); } #modal .m-video { margin: 2px 0 14px; } #modal .m-video-thumb { appearance: none; border: 1px solid var(--border); padding: 0; display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; cursor: pointer; background: #000; } #modal .m-video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.85; } #modal .m-video-thumb:hover img { opacity: 1; } #modal .m-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 20px; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8); } #modal .m-play::before { content: ""; position: absolute; width: 52px; height: 36px; background: rgba(0, 0, 0, 0.65); border-radius: 10px; left: 50%; top: 50%; transform: translate(-50%, -50%); } #modal .m-play { z-index: 0; } #modal .m-video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; display: block; } #modal .m-video-cap { color: var(--muted); font-size: 11.5px; margin-top: 6px; } @media (max-width: 700px) { #modal.has-photo .m-grid { grid-template-columns: 1fr; } #modal .m-photo { max-height: 220px; } } #modal h2 { margin: 0; font-size: 22px; } #modal .m-sub { color: var(--muted); font-size: 13px; margin: 3px 0 14px; } #modal .m-status { display: inline-block; font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 999px; margin-bottom: 16px; border: 1px solid var(--border); } #modal .m-status.us { color: var(--us); border-color: var(--us); } #modal .m-status.cn { color: var(--cn); border-color: var(--cn); } #modal ol { list-style: none; margin: 0; padding: 0; } #modal li { display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--grid); } #modal li:last-child { border-bottom: none; } #modal li .m-dot { width: 10px; height: 10px; border-radius: 50%; align-self: center; } #modal li.done.us .m-dot { background: var(--us); } #modal li.done.cn .m-dot { background: var(--cn); } #modal li.todo .m-dot { background: transparent; border: 1.5px solid var(--axis); } #modal li .m-lvl { color: var(--ink); font-size: 13.5px; font-weight: 600; } #modal li.todo .m-lvl { color: var(--muted); font-weight: 500; } #modal li .m-lvlname { color: var(--muted); font-weight: 500; } #modal li .m-date { color: var(--ink-2); font-size: 13px; font-variant-numeric: tabular-nums; } #modal li .m-note { grid-column: 2 / 4; color: var(--muted); font-size: 12px; font-style: italic; margin-top: -2px; } #modal li .m-watch { grid-column: 2 / 4; font-size: 12.5px; font-weight: 600; text-decoration: none; } #modal li.us .m-watch { color: var(--us); } #modal li.cn .m-watch { color: var(--cn); } #modal li .m-watch:hover { text-decoration: underline; } td a.t-watch { color: inherit; text-decoration: underline; text-decoration-color: var(--axis); text-underline-offset: 3px; } td a.t-watch:hover { text-decoration-color: currentColor; } #modal .m-vnote { color: var(--ink-2); font-size: 13px; margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--surface); } #modal .m-close { appearance: none; float: right; border: 1px solid var(--border); background: transparent; color: var(--ink-2); border-radius: 8px; font: inherit; font-size: 13px; padding: 4px 10px; cursor: pointer; } #modal .m-close:hover { color: var(--ink); } /* ---------- mobile ---------- */ .chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } #rotate-hint { display: none; } /* portrait phones: no chart โ€” show the rotate prompt instead */ @media (max-width: 720px) and (orientation: portrait) { #view-timeline .chart-scroll { display: none; } #rotate-hint { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px 16px; color: var(--ink-2); font-size: 14px; line-height: 1.5; } #rotate-hint strong { color: var(--ink); } #range-toggle { display: none !important; } } @media (max-width: 720px) { .wrap { padding: 24px 14px 40px; } header h1 { font-size: 22px; } /* keep chart text readable: fix a minimum width and let it pan */ .chart-svg { min-width: 880px; } .sum-row { grid-template-columns: 1fr; gap: 9px; padding: 14px 0; } .sum-axis { text-align: left; display: flex; align-items: baseline; gap: 9px; } .sum-lvl { font-size: 16px; } .sum-log li { grid-template-columns: 62px 8px 1fr; gap: 8px; font-size: 12.5px; } .log-date { font-size: 11px; } #modal { padding: 18px 16px; } #modal h2 { font-size: 19px; } }