:root { color-scheme:light dark; --bg:#f8f6f2; --card:#fff; --ink:#172238; --muted:#52627d; --line:#dfe5ed; --accent:#b51f3c; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.8 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; overflow-wrap:anywhere; }
main,nav,footer { max-width:960px; margin:auto; padding:24px; }
nav { display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; border-bottom:1px solid var(--line); font-size:14px; }
nav a:first-child { margin-right:auto; font-weight:700; }
a { color:inherit; text-underline-offset:4px; overflow-wrap:anywhere; }
a:hover { color:var(--accent); }
a:focus-visible,summary:focus-visible { outline:3px solid #7295c4; outline-offset:4px; }
main { padding-top:56px; padding-bottom:64px; }
h1 { font-size:clamp(32px,6vw,56px); line-height:1.18; letter-spacing:-.025em; margin:20px 0 28px; }
h2 { margin-top:44px; line-height:1.4; font-size:25px; }
h3 { margin-top:0; line-height:1.5; font-size:20px; }
p,li,dd { max-width:78ch; }
li { margin-bottom:12px; }
.lead { font-size:clamp(19px,3vw,23px); color:var(--muted); }
.eyebrow { color:var(--accent); font-size:13px; font-weight:700; letter-spacing:.06em; }
.product-icon { display:block; border-radius:20px; margin:24px 0; }
.notice { padding:20px 24px; border:1px solid var(--line); border-left:3px solid var(--accent); background:var(--card); border-radius:8px; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin:28px 0; }
.button { display:inline-block; padding:12px 20px; border:1px solid var(--line); border-radius:8px; text-decoration:none; font-weight:600; }
.button.primary { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:24px 0; }
.cards article { padding:22px; background:var(--card); border:1px solid var(--line); border-radius:12px; }
.cards p { margin-bottom:0; font-size:16px; }
code { font-size:.88em; overflow-wrap:anywhere; }
pre { white-space:pre-wrap; padding:16px; background:var(--card); border:1px solid var(--line); border-radius:8px; }
footer { border-top:1px solid var(--line); font-size:13px; color:var(--muted); }
footer a { margin-right:16px; }
details { margin:24px 0; }
summary { cursor:pointer; font-weight:600; }
dt { margin-top:24px; font-weight:700; }
dd { margin:8px 0 24px; }
@media(prefers-color-scheme:dark) { :root { --bg:#0f1828; --card:#1f2d44; --ink:#f4f7fb; --muted:#b3c2d8; --line:#2d3f60; --accent:#ff91a5; } }
@media(max-width:640px) { main { padding-top:32px; } .notice { padding:16px; } .cards { grid-template-columns:1fr; } nav { gap:12px 20px; } nav a:first-child { flex-basis:100%; } .button { text-align:center; } }