.hexxRules { box-sizing:border-box; max-width:70ch; margin:0 auto; padding:clamp(12px,3%,24px); font:15px/1.65 system-ui,sans-serif; overflow-wrap:anywhere; color:#31445a; background:#f4f7fa; border-radius:16px; }
.hexxRules * { box-sizing:border-box; }
.hexxRuleHeader { padding:24px 20px; border-radius:12px; background:radial-gradient(ellipse at top right,#235c75,transparent 75%),#13263b; color:#e2f4ff; margin-bottom:24px; }
.hexxRuleEyebrow { display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#9dc9df; }
.hexxRules .hexxRuleHeader h1 { margin:6px 0; font-size:32px; font-weight:750; letter-spacing:-.04em; color:#fff; }
.hexxRules .hexxRuleHeader p { margin:0; color:#bedeea; font-size:14px; }
.hexxRules h2,.hexxRules h3 { line-height:1.3; color:#183c55; font-weight:700; }
.hexxRules h2 { font-size:19px; margin:24px 0 8px; }
.hexxRules h3 { font-size:17px; margin:0 0 8px; }
.hexxRules p { margin:8px 0 12px; }
.hexxRules #goal { border-left:3px solid #28a4b7; padding-left:14px; }
.hexxRules #goal h2 { margin-top:0; }
.hexxRuleCard { padding:16px; margin:16px 0; background:#fff; border:1px solid #dce6ec; border-radius:12px; box-shadow:0 3px 12px #173b5510; }
.hexxRuleExample { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:8px; margin:16px 0 0; padding-top:14px; border-top:1px solid #edf1f4; }
.hexxRuleExample figure { min-width:0; margin:0; text-align:center; }
.hexxRuleExample img { display:block; max-width:100%; height:auto; margin:auto; border-radius:8px; }
.hexxRuleExample figcaption { margin-top:5px; font-size:11px; font-weight:600; color:#64798a; }
.hexxRuleExample > span { font-size:20px; color:#48869b; }
.hexxRules #controls { margin-top:24px; padding-top:4px; border-top:1px solid #d7e2ea; font-size:13px; color:#526b7e; }
@media(max-width:360px) { .hexxRuleCard { padding:12px; } .hexxRuleHeader { padding:20px 16px; } }