.triasRules{box-sizing:border-box;container:trias-rules / inline-size;max-width:72rem;margin:auto;padding:clamp(12px,3%,32px);font:1rem/1.65 system-ui,sans-serif;color:#362f24;background:linear-gradient(135deg,#fffaf0,#eee0bc);overflow-wrap:anywhere;border-radius:12px}
.triasRules h1{font-size:clamp(2rem,6cqi,3.5rem);margin:0 0 .5rem;color:#65522d}
.triasRules h2{font-size:1.4rem;line-height:1.3;border-bottom:2px solid #b6a16b;padding-bottom:.3em;margin:1.8em 0 .6em;scroll-margin-top:1rem}
.triasRules h3{font-size:1.1rem;line-height:1.3;margin:0 0 .4em;color:#65522d;scroll-margin-top:1rem}
.triasRules img{max-width:100%;height:auto;object-fit:contain;border-radius:4px;vertical-align:middle}
.triasRules table{border-collapse:collapse;width:100%;table-layout:fixed;margin:1rem 0}
.triasRules td,.triasRules th{padding:.55rem;vertical-align:top;border-bottom:1px solid #cbbb8e;line-height:1.55;text-align:left}
.triasRules th{font-weight:700;color:#65522d}
.triasRules p,.rules .triasRules p{margin:.6em 0;line-height:1.65}
.triasRules li,.rules .triasRules li{margin:.6em 0;line-height:1.65}
.triasRules td>:first-child,.triasRules th>:first-child{margin-top:0}
.triasRules td>:last-child,.triasRules th>:last-child{margin-bottom:0}
.triasRules .triasRuleHero td{border:0;text-align:center;vertical-align:middle}
.triasRules .triasRuleHero img{max-height:130px}
.triasRules .triasRuleComponents td,.triasRules .triasRuleCapacity td{text-align:center}
.triasRules .triasRuleComponents img,.triasRules .triasRuleCapacity img{max-height:120px;margin-bottom:.4rem}
.triasRules .triasRuleNote{background:#fff8;border-left:3px solid #b6a16b}
.triasRules .triasRuleNote th{width:6.5rem;font-size:.85em}
.triasRules .triasRuleNote td,.triasRules .triasRuleNote th{border-bottom:0}
.triasRules .triasRuleOptions td:first-child{width:25%;color:#65522d;font-size:.9em}
.triasRules .triasRuleExamples td:first-child:not([colspan]){width:42%;text-align:center}
.triasRules .triasRuleExamples img{max-height:360px}
.triasRuleTableScroll{overflow-x:auto;margin:1rem 0;border:1px solid #cbbb8e;border-radius:5px}
.triasRules .triasRuleCards{min-width:450px;margin:0;background:#fff5}
.triasRules .triasRuleCards td{font-size:.9em;text-align:center}
.triasRules .triasRuleCards img{max-height:110px}
/* A narrow sidepanel needs the compact layout even in a wide browser window. */
@container trias-rules (max-width:560px){
 .triasRules td,.triasRules th{padding:.4rem}
 .triasRules ol,.triasRules ul{padding-left:1.3rem}
 .triasRules h2{font-size:1.2rem}
 .triasRules .triasRuleComponents,.triasRules .triasRuleComponents tbody{display:block}
 .triasRules .triasRuleComponents tr{display:flex;flex-wrap:wrap;justify-content:center}
 .triasRules .triasRuleComponents td{display:block;box-sizing:border-box;flex:0 1 33%;min-width:6rem;border:0}
 .triasRules .triasRuleComponents img{max-height:86px}
 .triasRules .triasRuleNote th,.triasRules .triasRuleNote td{display:block;width:auto}
 .triasRules .triasRuleNote th{padding-bottom:0}
 .triasRules .triasRuleOptions,.triasRules .triasRuleOptions tbody,.triasRules .triasRuleOptions tr{display:block}
 .triasRules .triasRuleOptions td{display:block;width:auto}
 .triasRules .triasRuleOptions td:first-child{width:auto;border-bottom:0;font-size:1em;font-weight:700;padding-bottom:0}
 .triasRules .triasRuleExamples,.triasRules .triasRuleExamples tbody,.triasRules .triasRuleExamples tr{display:block}
 .triasRules .triasRuleExamples td{display:block;width:auto!important;padding:.6rem 0}
 .triasRules .triasRuleExamples td:first-child{border-bottom:0}
 .triasRules .triasRuleExamples img{max-height:300px}
}