:root { color-scheme: dark; font: 16px/1.7 system-ui,sans-serif; background:#121018; color:#eae3f3; }
* { box-sizing:border-box; }
body { margin:0; }
main { max-width:900px; margin:0 auto; padding:70px 24px 32px; }
.eyebrow { color:#bea1ef; font-size:12px; letter-spacing:.15em; }
h1 { font-size:clamp(30px,5vw,48px); line-height:1.3; margin:18px 0; }
p { color:#c6bdcf; }
a { color:#ceb4f5; text-underline-offset:4px; }
.install { display:inline-block; margin:12px 0; border:1px solid #c5a5ed; border-radius:10px; padding:12px 24px; background:#ad88d7; color:#181020; font-weight:700; text-decoration:none; }
.install:hover { background:#c5a5ed; }
:focus-visible { outline:2px solid #ead7ff; outline-offset:4px; }
.hint { font-size:13px; color:#a89cb5; }
section { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:30px 0; }
article { background:#201a2a; border:1px solid #41334f; border-radius:12px; padding:20px; }
article p { font-size:14px; margin-bottom:0; }
footer { display:flex; gap:24px; padding-top:24px; margin-top:30px; border-top:1px solid #382d44; font-size:14px; }
@media(max-width:600px) { main { padding-top:32px; } section { grid-template-columns:1fr; } }
.guide { display: block; margin: 38px 0; padding-top: 20px; border-top: 1px solid #41334f; scroll-margin-top: 20px; }
h2 { color: #e7d6ff; } h3 { margin-top: 26px; }
li { margin: 10px 0; color: #c6bdcf; }
nav { text-align: right; }