body{font-family:system-ui,sans-serif;max-width:46rem;margin:2rem auto;padding:0 16px;line-height:1.5}
label{display:block;margin:.6rem 0 .2rem}
input,select,textarea{font-size:16px;font-family:inherit;padding:.3rem;width:100%;box-sizing:border-box}
input[type=checkbox]{width:auto;margin-right:.5rem}
button{font:inherit;font-size:16px;padding:.3rem .9rem;margin-top:.8rem}
a,button,summary{min-height:44px}
a{display:inline-flex;align-items:center;padding:0 .25rem}
button,summary{box-sizing:border-box}
label.tick{display:flex;align-items:center;min-height:44px}
table{border-collapse:collapse;width:100%}
td,th{border-bottom:1px solid #ccc;padding:.3rem;text-align:left;vertical-align:top}
.err{color:#a00}
.ok{color:#060}
code{word-break:break-all;background:#eee;padding:.2rem}
form.inline{display:inline}
form.inline button{margin:0}
.pic{position:relative;overflow:hidden;touch-action:none;width:100%;background:#eee;margin:.4rem 0 1rem}
.pic img{display:block;max-width:100%;height:auto}
.pic .frame{display:none}
.pic.zoomable .inner{position:absolute;left:0;top:0;transform-origin:0 0}
.pic.zoomable img{position:absolute;left:0;top:0;max-width:none}
.pic.zoomable .frame{display:block;position:absolute;border:2px solid #d00;box-sizing:border-box;pointer-events:none}
body.no-frames .pic .frame{display:none}
@media (max-width:600px){
body{max-width:none;margin:1rem 0}
thead{display:none}
table,tbody,tr,td{display:block}
tr{border-bottom:2px solid #999;padding:.4rem 0}
td{border-bottom:0;padding:.2rem 0}
td::before{content:attr(data-label);display:block;font-weight:bold}
}