/* White paper and one colour, #65bbe1. Verdana: drawn for the screen pixel. */
:root{--paper:#fff;--blue:#65bbe1;--ink:#65bbe1;color:var(--blue);background:var(--paper);font:10px/1.35 Verdana,Geneva,sans-serif;-webkit-text-size-adjust:100%}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;background:var(--paper)}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

#viewer{position:fixed;inset:0;width:100%;height:100%}
#viewer{touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none}
#viewer:active{cursor:grabbing}
#viewer:focus-visible{outline:none}
#viewer canvas{display:block;width:100%;height:100%;image-rendering:pixelated}

.edge{position:fixed;margin:0;z-index:3;text-transform:uppercase;letter-spacing:.02em}
.tl{top:calc(10px + env(safe-area-inset-top));left:10px}
.tl a{background:var(--blue);color:#fff;padding:2px 4px;text-decoration:none;font-weight:700;font-size:12px}
.tr{top:calc(12px + env(safe-area-inset-top));right:10px;font-variant-numeric:tabular-nums}
.bl{left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));font-size:8px}.bl,.tr{background:var(--paper);padding:1px 3px;width:max-content;max-width:calc(100% - 20px)}

#marks{position:fixed;inset:0;pointer-events:none;z-index:2}
.mark{position:absolute;left:0;top:0;pointer-events:auto;display:flex;align-items:center;gap:4px;min-height:30px;margin:-15px 0 0 -6px;white-space:nowrap;text-transform:uppercase;text-decoration:none}
.mark i{width:11px;height:11px;border:1px solid var(--blue);background:#fff;flex:none}
.mark span{background:var(--blue);color:#fff;padding:2px 4px;text-decoration:underline;text-underline-offset:2px}
.mark.flip{flex-direction:row-reverse;translate:calc(-100% + 12px) 0}
.mark:hover i,.mark:focus-visible i{background:var(--ink);border-color:var(--ink)}
.mark:hover span,.mark:focus-visible span{background:var(--ink);color:#fff}
.mark.name{z-index:1}.mark.name i{display:none}.mark.name span{font:400 clamp(38px,11.5vw,96px)/1 "Times New Roman",Times,serif;letter-spacing:-.02em;padding:2px 8px 0;text-decoration:none}.mark.name{translate:-50% 0}.mark.name.flip{translate:-50% 0;flex-direction:row}
.mark.socials span{font-weight:700;text-decoration:none;font-size:12px}

#socials{position:fixed;inset:0;z-index:5;background:var(--blue);color:var(--ink);display:flex;flex-direction:column;justify-content:center;padding:24px 16px}
#socials[hidden]{display:none}
#socials-close{position:absolute;top:calc(8px + env(safe-area-inset-top));right:8px;width:44px;height:44px;font-size:22px;background:#fff;color:var(--ink)}
.edge-title{margin:0 0 16px;font-size:12px;letter-spacing:.04em}
#socials-list{list-style:none;margin:0;padding:0}
#socials-list li{margin:0 0 14px}
#socials-list a{display:inline-block;background:#fff;color:var(--ink);padding:4px 8px;font-size:clamp(34px,11vw,96px);font-weight:700;letter-spacing:-.05em;line-height:1;text-decoration:none}
#socials-list a:hover{background:var(--ink);color:#fff}
#socials-list small{display:block;margin-top:6px;font-size:12px}