:root{font-family:Arial,Helvetica,sans-serif;color:#edf4fa;background:#c7dce7;font-size:16px}*{box-sizing:border-box}body{margin:0;overflow:hidden}#viewer{position:fixed;inset:0}canvas{display:block;touch-action:none}header,nav,aside,footer{position:fixed;z-index:2}header{top:24px;left:26px;display:flex;align-items:center;gap:16px;background:#152230ee;padding:18px 24px;border-radius:3px}.mark{font-size:14px;color:#80d6df;border-right:1px solid #49616f;padding-right:17px;letter-spacing:.1em}h1{font-size:22px;letter-spacing:-.025em;margin:0 0 6px;font-weight:500}p{font-size:13px;margin:0;color:#aabdc9}nav{bottom:76px;left:50%;transform:translateX(-50%);display:flex;padding:6px;gap:4px;background:#152230ef;border-radius:6px}button{font:inherit;font-size:14px;color:inherit;background:transparent;border:1px solid transparent;border-radius:3px;padding:12px 18px;cursor:pointer}button:hover{background:#31495b}button.active{background:#83d6df;color:#102732}button:focus-visible,input:focus-visible{outline:3px solid #e5a44f;outline-offset:3px}aside{top:24px;right:26px;background:#152230ee;padding:20px;width:204px;border-radius:3px;display:grid;gap:18px}.eyebrow{font-size:12px;letter-spacing:.14em;color:#aabdc9}label{display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer}input{width:18px;height:18px;accent-color:#83d6df;margin:0}#fullscreen{border-color:#4c6373;padding:10px}footer{bottom:0;left:0;right:0;padding:17px 26px;background:#152230ed;display:flex;justify-content:space-between;gap:12px;font-size:13px;color:#bfd0da}.note{color:#e2c49a}#status{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#152230;padding:22px;border-radius:5px;max-width:90vw;z-index:3}@media(max-width:650px){header{top:12px;left:12px;padding:14px;gap:10px}h1{font-size:18px}.mark{display:none}aside{top:auto;bottom:142px;right:12px;width:auto;padding:13px;gap:12px}.eyebrow{display:none}nav{bottom:75px;max-width:calc(100% - 24px);width:max-content}button{padding:12px 14px}footer{padding:12px;font-size:12px;flex-direction:column;gap:5px}#fullscreen{padding:7px}p{font-size:12px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
:root .finish-note{font-size:12px;line-height:1.5;color:#bfd0da;max-width:165px}