:root {
    color-scheme: dark;
    font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    color: #dce7f7;
    background: #050917;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; line-height: 1.7; background: radial-gradient(circle at top, #102447 0, #050917 48rem); }
a { color: #75d9ff; }
header { border-bottom: 1px solid #27466f; background: rgba(5, 9, 23, .82); }
.header-inner, main, footer { width: min(920px, calc(100% - 40px)); margin: 0 auto; }
.header-inner { padding: 48px 0 36px; }
.product { color: #ffd940; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 10px 0; font-size: clamp(2rem, 7vw, 3.4rem); line-height: 1.1; }
h2 { margin-top: 40px; color: #75d9ff; font-size: 1.35rem; }
h3 { margin-top: 28px; color: #fff; font-size: 1.05rem; }
.date { margin: 0; color: #9cacbf; }
nav { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 24px; }
nav a { font-weight: 700; }
main { padding: 42px 48px 56px; background: rgba(8, 17, 36, .88); border-inline: 1px solid #1c3457; }
li { margin: 8px 0; }
.notice { margin: 22px 0; padding: 15px 18px; border-left: 4px solid #ffd940; background: #172541; }
.warning { border-left-color: #ff7489; background: #331c2c; }
.cards { display: grid; gap: 16px; margin-top: 32px; }
.card { display: block; padding: 22px; color: inherit; text-decoration: none; border: 1px solid #315985; background: #0d1a31; transition: transform .2s ease, border-color .2s ease; }
.card:hover { transform: translateY(-3px); border-color: #75d9ff; }
.card strong { display: block; margin-bottom: 6px; color: #fff; font-size: 1.12rem; }
footer { padding: 28px 0 48px; color: #9cacbf; font-size: .92rem; }

@media (max-width: 640px) {
    .header-inner { padding-top: 36px; }
    main { width: 100%; padding: 30px 20px 44px; border: 0; }
}