:root { color-scheme: dark; --ink: #2a1609; }
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 1100px; min-height: 100%; background: #050403; font-family: Georgia, "Times New Roman", serif; }
body { display: grid; place-items: start center; overflow-x: auto; }
.chronicle { position: relative; width: min(100vw, 1672px); min-width: 1100px; aspect-ratio: 1672 / 941; overflow: hidden; background: #080604; }
.scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none; pointer-events: none; }
.home-link { position: absolute; z-index: 3; top: 0; left: 0; width: 30%; height: 9.2%; }
.site-menu { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.menu-hotspot { position: absolute; display: block; top: 0; height: 9.2%; pointer-events: auto; }
.menu-protection { left: 32.2%; width: 7.0%; }
.menu-testing { left: 40.8%; width: 5.8%; }
.menu-features { left: 48.5%; width: 6.2%; }
.menu-roadmap { left: 55.9%; width: 7.0%; }
.menu-about { left: 64.2%; width: 5.2%; }
.menu-guardian { left: 78.8%; width: 20.0%; }
.home-link:focus-visible, .menu-hotspot:focus-visible, .scroll-card a:focus-visible, .page-arrow:focus-visible { outline: 3px solid #f2c35c; outline-offset: -4px; }
.language-switcher { position: absolute; z-index: 6; top: 10.8%; right: 2.2%; display: flex; gap: 6px; padding: 4px; border: 1px solid rgba(214,161,59,.45); border-radius: 18px; background: rgba(8,5,2,.78); }
.language-switcher a { display: grid; place-items: center; width: 30px; height: 24px; border-radius: 12px; opacity: .52; filter: grayscale(.65); font-size: 17px; line-height: 1; text-decoration: none; }
.language-switcher a:hover, .language-switcher a:focus-visible { opacity: 1; filter: none; outline: 2px solid #f2c35c; }
.language-switcher a.is-active { background: rgba(214,161,59,.24); opacity: 1; filter: none; }
.scroll-grid { position: absolute; z-index: 2; left: 11.9%; top: 39.5%; width: 76.8%; height: 57.3%; }
.scroll-page { display: none; width: 100%; height: 100%; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); column-gap: 4.35%; row-gap: 7.8%; }
.scroll-page.is-active { display: grid; }
.scroll-card { position: relative; min-width: 0; min-height: 0; }
.scroll-card a { position: absolute; inset: 5% 8% 7%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(3px, .55vw, 10px); color: var(--ink); text-align: center; text-decoration: none; text-shadow: 0 1px rgba(255,255,255,.18); transition: transform .18s ease, filter .18s ease; }
.scroll-card a:hover { transform: translateY(-2px) scale(1.015); filter: contrast(1.15); }
.version { color: #693715; font-size: clamp(15px, 1.25vw, 24px); font-weight: 700; letter-spacing: .12em; }
.scroll-card strong { max-width: 94%; font-size: clamp(18px, 1.45vw, 29px); line-height: 1.05; }
.summary { max-width: 92%; font-size: clamp(12px, .85vw, 17px); line-height: 1.25; }
.status { margin-top: 2%; color: #73420e; font-size: clamp(10px, .7vw, 14px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pagination { position: absolute; z-index: 5; left: 50%; bottom: 1.2%; display: flex; align-items: center; gap: 14px; transform: translateX(-50%); color: #e4b553; font: 700 15px/1 Georgia, serif; }
.page-arrow { border: 1px solid rgba(214,161,59,.7); border-radius: 50%; width: 34px; height: 34px; color: #e4b553; background: rgba(8,5,2,.82); cursor: pointer; }
.page-arrow:disabled { opacity: .3; cursor: default; }
@media (max-width: 1099px) { body { justify-content: start; } }