*{box-sizing:border-box}body{display:grid;place-items:center;min-height:100vh;overflow:auto;background:#f8f9fa;color:#343a40;padding-top:10rem;-moz-user-select:none;user-select:none;-webkit-user-select:none}img{-webkit-user-drag:none;user-drag:none}h1{color:#212529;line-height:1;text-transform:uppercase}h1 span:nth-of-type(1){background:red;color:#f8f9fa;padding:2px 4px}h1 span:nth-of-type(2){border:2px solid black;padding:0 6px}article h1{margin-bottom:3rem}article p+p{margin-top:.5rem}.proxy{position:fixed;height:20px;aspect-ratio:1}.portal{border:0;padding:0;position:fixed;inset:0;width:100vw;height:100vh;background:transparent}.portal:before{content:"";position:absolute;inset:0;background:#000c;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .25s;opacity:var(--open, 0);opacity:var(--open)}.portal:popover-open::backdrop{transition:opacity 1s}.portal img{border-radius:50%;height:300px;aspect-ratio:1;position:fixed;top:calc(var(--center-y, 0) * 1px);left:calc(var(--center-x, 0) * 1px);transform:translate(-50%,-50%) scale(calc(.5 + (var(--open, 0) * .5)));opacity:var(--open, 0)}@keyframes backdrop{0%{opacity:0}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}canvas{position:fixed;top:0;left:0;pointer-events:none}