@font-face{font-family:Recoleta;font-weight:700;src:url(RecoletaBold.ttf) format("truetype");font-display:swap}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:#0F1E2B;overflow:hidden;font-family:Montserrat,Arial,sans-serif}
#viewport{position:fixed;inset:0 0 56px 0;display:flex;align-items:center;justify-content:center}
#stage{width:1920px;height:1080px;position:relative;transform-origin:center center;flex:none}
#stage>section{position:absolute;inset:0;width:1920px;height:1080px;overflow:hidden;display:none}
#stage>section.active{visibility:visible}
h1,h2,h3{font-weight:700}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;vertical-align:middle}
th{font-weight:700}
td,th{border-bottom:1px solid rgba(255,255,255,.18)}
ul,ol{padding-left:1.2em}
a{color:inherit}
#bar{position:fixed;left:0;right:0;bottom:0;height:56px;display:flex;align-items:center;justify-content:center;gap:12px;
  background:#16293A;color:#D6E6EF;font:600 15px Montserrat,Arial,sans-serif}
#bar button,#bar a{background:#224058;color:#fff;border:0;border-radius:8px;padding:8px 14px;font:inherit;cursor:pointer;text-decoration:none}
#bar button:hover,#bar a:hover{background:#036BA3}
#prev,#next{font-size:22px;line-height:1;padding:6px 16px}
#home{position:absolute;left:16px}
#count{min-width:72px;text-align:center}
#notes{position:fixed;right:16px;bottom:72px;width:min(520px,calc(100% - 32px));max-height:40vh;overflow:auto;
  background:#fff;color:#224058;border-radius:12px;padding:18px 20px;font:15px/1.5 Montserrat,Arial,sans-serif;box-shadow:0 12px 40px rgba(0,0,0,.4)}
body.fullscreen #bar{display:none}
body.fullscreen #viewport{inset:0}