:root { color-scheme: dark; --bar:#0c0e11; --ink:#f2f0ea; --line:rgba(242,240,234,.17); --accent:#63b3c9; }
* { box-sizing:border-box; } html,body { margin:0; height:100%; overflow:hidden; background:#090b0e; font-family:Arial,Helvetica,sans-serif; }
header { height:54px; background:var(--bar); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 22px; color:var(--ink); letter-spacing:.03em; position:relative; z-index:2; }
.wordmark { font-size:12px; font-weight:700; letter-spacing:.16em; }.survey { color:#c9cbc8; font-size:12px; }
main { position:relative; height:calc(100% - 54px); background:#090b0e; touch-action:none; }
.openseadragon-container:focus { outline:none; }.navigator { border:1px solid rgba(242,240,234,.38)!important; background:#101419!important; margin:18px!important; }.displayregion { border-color:var(--accent)!important; background:rgba(99,179,201,.08)!important; }
.openseadragon-container .openseadragon-button { background-color:rgba(12,14,17,.88)!important; border:1px solid var(--line)!important; border-radius:3px!important; margin:4px!important; }.openseadragon-container .openseadragon-button:hover { border-color:var(--accent)!important; }
@media (max-width:640px) { header { height:50px; padding:0 14px; } .wordmark{font-size:10px}.survey{font-size:10px;text-align:right;max-width:58%} main{height:calc(100% - 50px)} .navigator{margin:12px!important;transform:scale(.78);transform-origin:top right;} }