*,*::before,*::after { box-sizing: border-box; }
:root{ --maxw: 1100px; --gutter: clamp(16px, 3vw, 32px); --gutter-bottom: clamp(64px, 8vw, 140px); --hint-offset: clamp(72px, 1vw + 48px, 180px);}
html{ color-scheme: light; background: #fefefe; }
body{ margin: 0 auto; margin-block-start: var(--hint-offset); margin-block-end: var(--gutter); max-width: var(--maxw); padding-inline: var(--gutter); min-height: calc(100vh - var(--gutter)); min-height: calc(100dvh - var(--gutter)); background: #ffffff; color: #000; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans"; line-height: 1.6; margin-block-end: var(--gutter-bottom); min-height: calc(100vh - var(--gutter-bottom)); min-height: calc(100dvh - var(--gutter-bottom));}
img, video, canvas, svg { max-width: 100%; height: auto; display: block; }
details { background-color: #ccc; color: #000; -webkit-transition: .3s ease; -moz-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease; margin-bottom:1px!important; }
details:hover { cursor: pointer; }
summary { padding: .2em 1rem; list-style: none; display: flex; justify-content: space-between; transition: height 1s ease; }
summary:after { content: '\25B6'; transition: transform 0.3s ease; }
details[open] summary:after { transform: rotate(90deg); }
summary::-webkit-details-marker { display: none; }
details[open] summary { border-bottom: 1px solid #666; }
details[open] div{ padding: .5em 1em; background-color: #f4f4f4; color:black; }
.tabresponsiv { width: 100%; padding: 0px; overflow-y: hidden; border-radius:0px; overflow-x: auto; min-height: 0.01%; margin-bottom:20px; }
table, th, td { border: 1px solid #cdcdcd; border-collapse: collapse; padding: 0.3em !important; }
.hbox { border-left: 2px solid #999; background-color:#f9f9f9; padding:12px; margin-bottom:20px; }
.resvideo { position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; }
.resvideo iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
html[data-hint]::before { content: attr(data-hint); position: fixed; top: calc(8px + env(safe-area-inset-top, 0px)); left: calc(8px + env(safe-area-inset-left, 0px)); z-index: 10000; padding: .5rem .75rem; border-radius: .5rem; font: 300 0.875rem/1.25 system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans"; color: #fefefe; background: rgba(15, 23, 42, .8); box-shadow: 0 2px 8px rgba(0,0,0,.12); pointer-events: none; max-width: min(92vw, 800px); white-space: normal; word-break: break-word; hyphens: auto;}