.heptalion-rules { --hp-ink:#252a31; color:var(--hp-ink); font:16px/1.65 system-ui,sans-serif; max-width:920px; margin:auto; padding:clamp(10px,4%,32px); container-type:inline-size; background:#fffdf8; box-sizing:border-box; }
.heptalion-rules * { box-sizing:border-box; }
.heptalion-rules .hpHero { padding:clamp(8px,4cqi,24px); border-radius:16px; background:linear-gradient(125deg,#242b34,#41494f); color:#fff; }
.heptalion-rules .hpHero h1 { color:#fff; font-size:clamp(26px,10cqi,58px); margin:0; letter-spacing:-2px; }
.heptalion-rules .hpHero p { margin:4px 0; }
.heptalion-rules h2 { font-size:24px; color:#8b4b10; margin:26px 0 10px; }
.heptalion-rules h3 { font-size:19px; margin:0 0 8px; }
.heptalion-rules .hpIntro { display:flex; flex-wrap:wrap; gap:20px; align-items:center; }
.heptalion-rules .hpIntro>div { flex:1 1 220px; }
.heptalion-rules figure { flex:1 1 220px; margin:20px 0; text-align:center; }
.heptalion-rules img { width:100%; max-width:340px; height:auto; }
.heptalion-rules img.hpRuleTile { max-width:124px; }
.heptalion-rules figcaption,.heptalion-rules footer { font-size:13px; color:#60646a; }
.heptalion-rules .hpNote { background:#f5eada; border-left:4px solid #df7e24; padding:14px 18px; border-radius:5px; }
.heptalion-rules li { margin:8px 0; }
.heptalion-rules table { width:100%; border-collapse:collapse; }
.heptalion-rules th,.heptalion-rules td { padding:8px; border-bottom:1px solid #dcd5c9; text-align:left; }
.heptalion-rules footer { border-top:1px solid #dcd5c9; margin-top:28px; padding-top:14px; }
.heptalion-rules { overflow-wrap:anywhere; hyphens:auto; }
.heptalion-rules .hpIntro>div,.heptalion-rules figure { min-width:0; max-width:100%; }
.heptalion-rules table { table-layout:fixed; }
.heptalion-rules th,.heptalion-rules td { padding:6px 3px; }