:root { color-scheme: light dark; --zm-bg: #f5f3ee; --zm-card: #fff; --zm-ink: #1c2733; --zm-muted: #626d77; --zm-accent: #0f6f5c; --zm-on-accent: #fff; --zm-line: #dedbd3; }
@media (prefers-color-scheme: dark) { :root { --zm-bg: #14181d; --zm-card: #1d232a; --zm-ink: #e8e6e1; --zm-muted: #acb5bf; --zm-accent: #3fae94; --zm-on-accent: #10221d; --zm-line: #39414a; } }
.viewer { margin: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: var(--zm-bg); color: var(--zm-ink); font: 14px/1.45 "Avenir Next", "Segoe UI", system-ui, sans-serif; }
.viewer *, .zm-dialog * { box-sizing: border-box; }
.timebar { display: flex; align-items: center; gap: 18px; padding: 10px 18px; border-bottom: 1px solid var(--zm-line); background: var(--zm-card); flex-shrink: 0; z-index: 1; }
.viewer button, .viewer select, .zm-dialog button, .changelog-button { font: inherit; color: var(--zm-ink); border: 1px solid var(--zm-line); border-radius: 6px; background: var(--zm-card); padding: 7px 11px; cursor: pointer; }
.viewer button:hover:not(:disabled), .zm-dialog button:hover, .changelog-button:hover { border-color: var(--zm-accent); background: var(--zm-bg); }
.viewer button:disabled, .viewer select:disabled { opacity: .5; cursor: default; }
.viewer :focus-visible, .zm-dialog :focus-visible, .changelog-button:focus-visible { outline: 3px solid var(--zm-accent); outline-offset: 3px; }
.back-link { color: var(--zm-accent); text-decoration: none; white-space: nowrap; font-weight: 600; }
.version-controls { display: flex; align-items: center; gap: 4px; }
#version-select { min-width: 127px; max-width: 174px; font-weight: 650; }
.viewer .icon-button { padding: 3px 8px; font-size: 24px; line-height: 1.2; min-width: 32px; }
.viewer .locale-select { margin-left: 4px; width: 56px; padding: 7px 3px; font-size: 12px; }
.version-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.version-date span { display: block; color: var(--zm-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }
.version-date time { font-size: 13px; }
.mini-timeline { flex: 1; min-width: 100px; max-width: 340px; margin: 0 auto; }
.mini-timeline label { display: flex; justify-content: space-between; color: var(--zm-muted); font-size: 10px; }
#timeline { display: block; width: 100%; height: 14px; margin: 0; accent-color: var(--zm-accent); cursor: pointer; }
.timeline-track { position: relative; }
#timeline-preview { position: absolute; top: 27px; z-index: 3; width: max-content; padding: 5px 9px; border-radius: 6px; background: var(--zm-ink); color: var(--zm-card); box-shadow: 0 3px 12px #0003; font-size: 12px; font-weight: 650; white-space: nowrap; pointer-events: none; }
#timeline-preview[hidden] { display: none; }
.timeline-years { display: flex; justify-content: space-between; color: var(--zm-muted); font-size: 10px; line-height: 1; }
#current-year { color: var(--zm-accent); font-weight: 700; }
.timebar-actions { display: flex; gap: 8px; white-space: nowrap; }
.viewer button.primary { background: var(--zm-accent); border-color: var(--zm-accent); color: var(--zm-on-accent); font-weight: 650; }
.viewer button.primary:hover:not(:disabled) { filter: brightness(1.1); background: var(--zm-accent); }
.version-stage { position: relative; flex: 1; min-height: 0; }
#version-frame { display: block; border: 0; width: 100%; height: 100%; background: white; }
.viewer-loading { position: absolute; inset: 0; margin: 0; display: grid; place-content: center; padding: 30px; text-align: center; background: var(--zm-bg); }
.viewer-loading[hidden] { display: none; }
.viewer-notice { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--zm-line); border-radius: 10px; background: var(--zm-card); box-shadow: 0 5px 28px #0002; z-index: 2; }
.viewer-notice[hidden] { display: none; }
.viewer-notice button { flex-shrink: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.zm-dialog { color: var(--zm-ink); background: var(--zm-card); font: 15px/1.6 "Avenir Next", "Segoe UI", system-ui, sans-serif; width: min(690px, calc(100% - 32px)); max-height: calc(100dvh - 48px); padding: 26px; border: 1px solid var(--zm-line); border-radius: 14px; box-shadow: 0 15px 90px #0004; }
.zm-dialog::backdrop { background: #10192399; }
.zm-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.zm-dialog h2 { margin: 0 0 12px; font-size: 1.35rem; border: 0; padding: 0; }
.zm-dialog h3 { font-size: 1rem; margin: 22px 0 8px; }
.zm-dialog p { margin: 10px 0; }
.zm-dialog ul { padding-left: 22px; }
.zm-dialog li { margin: 6px 0; }
.zm-dialog a { color: var(--zm-accent); }
.zm-dialog small, .zm-dialog .provenance { color: var(--zm-muted); font-size: 13px; }
.zm-dialog .provenance { padding: 12px 14px; background: var(--zm-bg); border-radius: 7px; }
.zm-dialog details { border-top: 1px solid var(--zm-line); margin-top: 20px; padding-top: 12px; }
.zm-dialog summary { cursor: pointer; }
.zm-dialog code { font-size: 12px; color: var(--zm-muted); }
.changelog-button { font-size: .85rem; padding: 5px 10px; }
@media (max-width: 1100px) { .timebar { gap: 10px; padding: 8px 12px; } .version-controls { gap: 2px; } .timebar-actions { gap: 5px; } }
@media (max-width: 880px) { .timebar { flex-wrap: wrap; } .back-link { flex: 1; } .mini-timeline { order: 5; flex: 1 1 130px; max-width: none; } .timebar-actions { order: 6; margin-left: auto; } .version-date { min-width: 82px; } }
@media (max-width: 480px) { .timebar { gap: 7px; } .back-link { font-size: 12px; } #version-select { min-width: 105px; max-width: 124px; padding-inline: 4px; font-size: 12px; } .viewer .locale-select { width: 44px; } .version-date { min-width: auto; font-size: 11px; } .version-date time { font-size: 11px; } .viewer .icon-button { min-width: 27px; padding-inline: 5px; } .timebar-actions button { padding: 6px 8px; font-size: 12px; } .viewer-notice { flex-wrap: wrap; } #notice-text { width: calc(100% - 42px); } #close-notice { position: absolute; right: 6px; top: 8px; } .zm-dialog { padding: 20px; } }