:root{color-scheme:dark;font-family:Arial,sans-serif;color:#f0f0f5;background:#252b45}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;overflow:hidden}
.background{position:fixed;inset:-2%;background:#252b45 url('assets/background.webp') center/cover no-repeat;transform:translate3d(var(--x,0px),var(--y,0px),0);transition:transform 1.6s ease-out;z-index:-2}
.shade{position:fixed;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(180deg,rgba(23,30,52,.025),rgba(14,19,34,.04))}
header{position:absolute;top:0;left:0;width:100%;padding:42px 24px;z-index:2}
nav{display:flex;justify-content:center;align-items:center;gap:clamp(30px,4.2vw,80px)}
nav a{font-family:Orbitron,Arial,sans-serif;font-size:12px;font-weight:500;text-transform:uppercase;white-space:nowrap;text-decoration:none;color:#ededf5;position:relative;padding:7px 0;transition:color .25s,text-shadow .25s}
nav a:after{content:"";position:absolute;bottom:0;height:1px;background:currentColor;left:50%;right:50%;transition:left .25s,right .25s}
nav a:hover{color:white;text-shadow:0 0 15px #ffffff60}
nav a:hover:after,nav a:focus-visible:after{left:0;right:0}
a:focus-visible,button:focus-visible{outline:2px solid #c3e9ff;outline-offset:6px}
main{height:100svh;display:grid;place-items:center;padding:80px 20px 0}
h1{margin:0;font-family:Orbitron,Arial,sans-serif;font-size:clamp(34px,3.5vw,66px);font-weight:400;letter-spacing:.15em;text-align:center;line-height:1.3;animation:appear 1.2s ease both}
dialog{background:#1b2336f5;color:#edf0f8;border:1px solid #b7c9e32b;border-radius:0;padding:54px 48px 42px;max-width:560px;width:calc(100% - 40px);box-shadow:0 24px 100px #02081550}
dialog[open]{animation:panel-in .3s ease both}
dialog::backdrop{background:#070d206b;backdrop-filter:blur(9px)}
.close{position:absolute;right:15px;top:12px;border:0;background:none;color:#dbe3ed;font-size:30px;cursor:pointer;line-height:1;padding:5px 10px}
.eyebrow{font-family:Orbitron,Arial,sans-serif;font-size:12px;text-transform:uppercase;letter-spacing:.2em;color:#9aaac2;margin:0 0 20px}
h2{font-family:Orbitron,Arial,sans-serif;font-size:26px;font-weight:400;margin:0 0 26px;letter-spacing:.05em}
dialog p{font-size:16px;line-height:1.7;color:#c1cada}
.text-link{color:#e8eefb;text-underline-offset:5px;font-size:15px;display:inline-block;margin-top:15px}
.download{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #b7c9e32b;border-bottom:1px solid #b7c9e32b;padding:22px 0;color:#f1f4fa;text-decoration:none;font-size:17px}
.download:hover{color:#abd8fb}
.detail{display:block;color:#a5b2c7;font-size:14px;margin-top:8px;line-height:1.6}
.format{font-size:12px;letter-spacing:.1em;border:1px solid #b7c9e32b;padding:7px 10px}
dialog .note{font-size:14px;margin:18px 0 0}
@keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes panel-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:640px){header{padding:24px 18px}nav{gap:18px;flex-wrap:wrap}nav a{font-size:10px}h1{font-size:clamp(28px,8vw,48px);letter-spacing:.12em}main{padding-top:40px}.background{background-position:48% center}dialog{padding:48px 28px 32px}h2{font-size:23px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.background{transform:none}}