:root { color-scheme: dark; --bg: #07101c; --panel: rgba(11, 22, 36, .86); --line: rgba(150, 190, 220, .2); --text: #eef5ff; --muted: #a8b7ca; --accent: #70e4ef; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 80% 5%, rgba(96, 55, 155, .35), transparent 34rem), radial-gradient(circle at 12% 90%, rgba(17, 130, 170, .28), transparent 30rem), var(--bg); color: var(--text); font: 16px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; }
a { color: var(--accent); }
.site-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 2rem; padding: 1.1rem max(1.25rem, calc((100vw - 980px) / 2)); background: rgba(5, 13, 24, .9); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
.brand { color: var(--text); font-size: 1.35rem; font-weight: 750; text-decoration: none; margin-right: auto; }
nav { display: flex; gap: 1.25rem; } nav a { text-decoration: none; color: var(--muted); } nav a:hover { color: var(--text); }
.language-picker select { color: var(--text); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: .45rem .7rem; }
main { width: min(980px, calc(100% - 2rem)); margin: 0 auto; }
.hero { padding: 6rem 0 4rem; max-width: 650px; } .hero h1 { margin: .2rem 0; font-size: clamp(3rem, 10vw, 5rem); letter-spacing: -.05em; } .hero p:not(.eyebrow) { color: var(--muted); font-size: 1.15rem; }
.eyebrow { margin: 0 0 .45rem; color: var(--accent); letter-spacing: .12em; font-size: .76rem; font-weight: 700; }
.section { margin: 1.5rem 0 5rem; } .section-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 1.25rem; } h2 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.4rem); } .section-heading > p { max-width: 30rem; color: var(--muted); margin: 0; }
.document-list { display: grid; gap: .75rem; } .document-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.25rem; background: var(--panel); border: 1px solid var(--line); border-radius: 1rem; } .document-card h3 { margin: 0; font-size: 1.05rem; } .document-card button { flex: 0 0 auto; }
button { cursor: pointer; color: #06131d; background: var(--accent); border: 0; border-radius: 999px; padding: .7rem 1.15rem; font: inherit; font-weight: 700; } button:hover { filter: brightness(1.08); } .text-button { color: var(--accent); background: transparent; padding: .35rem .5rem; }
.document-viewer { margin-top: 1.25rem; padding: 1.5rem; background: rgba(4, 12, 23, .94); border: 1px solid var(--line); border-radius: 1.25rem; } .viewer-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .viewer-heading h3 { margin: 0; font-size: 1.45rem; } pre { margin: 1.25rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; color: var(--muted); }
.support-section { padding: 1.5rem; background: var(--panel); border: 1px solid var(--line); border-radius: 1.25rem; } form { display: grid; gap: 1rem; max-width: 700px; } label { display: grid; gap: .4rem; color: var(--muted); } input, textarea { width: 100%; color: var(--text); background: rgba(4, 12, 23, .72); border: 1px solid var(--line); border-radius: .75rem; padding: .8rem .9rem; font: inherit; } textarea { resize: vertical; } input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 2px; } .honeypot { position: absolute; left: -10000px; } #support-status { min-height: 1.5em; color: var(--muted); } #support-status.success { color: #8cf1c0; } #support-status.error { color: #ffaaa9; } .support-email { color: var(--muted); }
.site-footer { width: min(980px, calc(100% - 2rem)); margin: 0 auto; padding: 2rem 0 3rem; display: flex; align-items: center; gap: 2rem; color: var(--muted); font-size: .9rem; border-top: 1px solid var(--line); }
.footer-brand { color: #f2dfb1; font-family: Georgia, serif; font-size: 1.65rem; text-decoration: none; }
.footer-nav { display: flex; justify-content: center; gap: 2rem; flex: 1; }
.footer-nav a { color: var(--muted); text-decoration: none; }
.footer-nav a:hover { color: var(--text); }
.footer-copyright { white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 680px) { .site-header { gap: .8rem; padding-inline: 1rem; } nav { gap: .7rem; font-size: .9rem; } .section-heading { display: block; } .section-heading > p { margin-top: .5rem; } .document-card { align-items: flex-start; flex-direction: column; } .site-footer { align-items: flex-start; flex-wrap: wrap; gap: 1rem; } .footer-nav { order: 3; flex-basis: 100%; justify-content: flex-start; flex-wrap: wrap; gap: .75rem 1.25rem; } .footer-copyright { margin-left: auto; font-size: .78rem; } }