body {word-wrap:break-word;}
table {table-layout:fixed; border-collapse:collapse;}
.tabresponsiv table {table-layout:auto; min-width:800px; width:auto;}
.tabresponsiv {display:block; width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid #999; margin-bottom:20px; box-sizing:border-box; overscroll-behavior-x:contain;}
.tabresponsiv th, .tabresponsiv td {padding:2px; border:1px solid #ccc; text-align:center;}
.hbox {border-left:4px solid #3cb371; background-color:#fefefe; padding:12px; margin-bottom:5px; margin-top:5px;}
.biglink a {font-size: 1.6em !important; font-weight: bold; text-decoration: underline;}

.flex-grid {display: flex; flex-wrap: wrap; margin: -8px; padding-block: 8px; row-gap: 16px; width: 100%; box-sizing: border-box;}
.col {flex: 0 0 50%; padding: 8px; box-sizing: border-box; min-width: 0; overflow-wrap: anywhere;}
.card {display: flex; flex-direction: column; height: 100%; padding: 12px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fcfcfc;}
.card h3 {margin: 0 0 .5rem; font-size: 1.125rem; line-height: 1.3;}
.card img {margin-top: auto; width: 100%; border-radius: 0px; display: block; border: 1px solid #ccc;}

.image-text {width: 100%; display: flex; align-items: flex-start; gap: 16px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 12px; padding: 16px; margin: 20px 0; background: #fcfcfc; }
.image-text img {width: 520px; height: auto; flex-shrink: 0; border: 1px solid #ccc;}
.image-text .text {flex: 1;}
.image-text h3 {margin: 0 0 8px; font-size: 20px;}

.img-left {float: left; margin: 0 10px 10px 0;}
html {scroll-behavior: smooth; }
:is(h1,h2,h3){scroll-margin-top: 80px; }

@media (max-width: 900px) {
.col {flex: 0 0 50%; }
.image-text img {width: 150px; } 
}

@media (max-width: 560px) {
.col {flex: 0 0 100%; }
.image-text {flex-direction: column; align-items: center; text-align: center; }
.image-text img {width: 100%; max-width: 520px; margin-bottom: 12px; }
.image-text .text {flex: unset; }
}

:root{--img-side-pad: 4%; --btn-bg: #28a911; --btn-bg-hover: #3b9c2a; --btn-text: #fff; --btn-radius: .6rem; --btn-pad-y: .45rem; --btn-pad-x: .9rem; --btn-font-size: 1.6rem; --btn-font-weight: 800; --peek-panel-percent: 50%; --spacer-percent: 25%; }
#xhp-stage{background:#fff; width:100%; margin-inline:auto; overscroll-behavior:auto; overflow-anchor:none; }
@media (min-width:900px){
#xhp-stage{ width:1000px; max-width:none; }
}
#xhp-controls{ display:flex; justify-content:center; gap:.5rem; padding:.25rem .5rem; margin:0 0 .25rem; background:#fff; }
#xhp-controls button{ background:var(--btn-bg); color:var(--btn-text); border:0; border-radius:var(--btn-radius); padding:var(--btn-pad-y) var(--btn-pad-x); font-size:var(--btn-font-size); font-weight:var(--btn-font-weight); line-height:1; cursor:pointer; }
#xhp-controls button:hover{ background:var(--btn-bg-hover); }
#xhp-controls button[disabled]{ opacity:.5; cursor:not-allowed; }
#xhp-rail{ display:flex; gap:0; width:100%; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; background:#fff; scrollbar-color: rgba(0,0,0,.35) transparent; scrollbar-width: thin; scrollbar-gutter: stable both-edges; overscroll-behavior-x: contain; overscroll-behavior-y: auto; scroll-padding: 0 var(--spacer-percent); touch-action: pan-y pinch-zoom; }
#xhp-rail > .spacer{ flex: 0 0 var(--spacer-percent); min-width: 0; }
#xhp-rail > *:not(.spacer){ flex: 0 0 var(--peek-panel-percent); min-width: 0; box-sizing: border-box; scroll-snap-align: center; scroll-snap-stop: always; display:flex; min-height:100%; }
#xhp-rail figure{ margin:0; display:flex; flex-direction:column; background:#fff; width:100%; }
#xhp-rail img{ display:block; padding-left: var(--img-side-pad); padding-right: var(--img-side-pad); padding-top: 0; padding-bottom: 0; width:100%; max-width:100%; height:auto; margin:0; object-fit:contain; }
#xhp-rail figcaption{ padding:.4rem var(--img-side-pad); margin:0; border-top:1px solid #eee; background:#fff; }
#xhp-rail figcaption h3{ margin:0 0 .2rem; line-height:1.2; font-size:1rem; }
#xhp-rail figcaption p{ margin:0; line-height:1.35; }

@media (max-width:560px){
:root{ --img-side-pad: 8%; }
}

@media (prefers-reduced-motion: reduce){
#xhp-rail{ scroll-snap-type:x proximity; }
}