@property --sites-t{syntax:"<number>";inherits:true;initial-value:0}@property --sites-turn{syntax:"<angle>";inherits:true;initial-value:-14deg}.sites-visual{--peek:34px;--peek-step:calc(var(--peek) - .4rem);--more-offset:0px;--n:6;--sites-intent:.1s;--orbit-right:7cqw;--ring-r:min(40px, calc(50cqw - 17px - var(--orbit-right) / 2));--ring-cx:calc(100cqw - var(--orbit-right) - var(--ring-r) - 17px);pointer-events:none;font-size:var(--text-sm);font-variant-numeric:tabular-nums;transition:--sites-turn 1ms linear var(--dur-slow);font-weight:600;position:absolute;inset:0;container-type:size}.sites-visual[data-more]{--more-offset:calc(var(--more-len) * 1ch + var(--space-xs))}.sites-visual-mark{--cx:var(--ring-cx);--cy:50cqh;--r:var(--ring-r);--a:calc(-90deg + (var(--i) - 1) * 360deg / max(var(--n) - 1, 1) + var(--sites-turn));--rest-x:calc(100cqw - var(--space) - var(--more-offset) - var(--peek) / 2 - var(--slot) * var(--peek-step));--rest-y:calc(var(--space) + var(--peek) / 2);--rest-s:1;--ring-x:calc(var(--cx) + cos(var(--a)) * var(--r));--ring-y:calc(var(--cy) + sin(var(--a)) * var(--r));--ring-s:calc(1 + sin(var(--a)) * .04);border-radius:var(--radius-full);background:var(--white);width:34px;height:34px;box-shadow:var(--shadow-subtle), 0 0 0 1px color-mix(in srgb, var(--tile-tone) 28%, transparent);translate:calc(var(--rest-x) + (var(--ring-x) - var(--rest-x)) * var(--sites-t)) calc(var(--rest-y) + (var(--ring-y) - var(--rest-y)) * var(--sites-t));scale:calc(var(--rest-s) + (var(--ring-s) - var(--rest-s)) * var(--sites-t));transition:--sites-t .22s var(--ease-sheet);place-items:center;margin:-17px 0 0 -17px;display:grid;position:absolute;top:0;left:0}.sites-visual-mark[data-hub]{--ring-x:var(--cx);--ring-y:var(--cy);--ring-s:1.04}.sites-visual[data-kind=blocked]{--ring-r:min(35px, calc(50cqw - 17px - var(--orbit-right) / 2))}.sites-visual[data-kind=blocked] .sites-visual-mark{--a:calc((var(--i) - 1) * 360deg / max(var(--n) - 1, 1) - 90deg);--ring-s:1}.sites-visual-mark[data-extra]{--rest-x:calc(100cqw - var(--space) - var(--more-len,0) * .5ch);--rest-s:.72;opacity:var(--sites-t)}.sites-visual-favicon{object-fit:cover;border-radius:5px;width:20px;height:20px}.sites-visual[data-kind=blocked] .sites-visual-favicon{filter:grayscale()brightness(1.18)}.sites-visual-more{top:var(--space);right:var(--space);width:calc(var(--more-len) * 1ch);height:var(--peek);color:var(--title);line-height:var(--peek);text-align:right;transition:opacity .18s ease var(--dur-fast);position:absolute}.sites-visual-ban{--cx:var(--ring-cx);--cy:50cqh;--ban-w:calc(var(--ring-r) * 2 + 34px);width:var(--ban-w);height:10px;margin:-5px 0 0 calc(var(--ban-w) / -2);border-radius:var(--radius-full);background:var(--white);translate:var(--cx) var(--cy);clip-path:inset(0 100% 0 0 round 999px);opacity:0;transition:clip-path .18s var(--ease-in), opacity var(--dur-fast) ease 40ms;position:absolute;top:0;left:0;rotate:40deg}.sites-visual-ban:after{content:"";border-radius:inherit;background:var(--danger-fill);position:absolute;inset:3px}.tile-shell:not([data-hidden=true]) .tile:is(:hover,:focus-visible) .sites-visual{--sites-turn:0deg}.tile-shell:not([data-hidden=true]) .tile:hover .sites-visual{transition:--sites-turn 1.1s var(--ease-standard) var(--sites-intent)}.tile-shell:not([data-hidden=true]) .tile:focus-visible .sites-visual{transition:--sites-turn 1.1s var(--ease-standard)}.tile-shell:not([data-hidden=true]) .tile:is(:hover,:focus-visible) .sites-visual-mark{--sites-t:1}.tile-shell:not([data-hidden=true]) .tile:hover .sites-visual-mark{transition:--sites-t .46s var(--ease-standard) calc(var(--sites-intent) + var(--from) * 18ms)}.tile-shell:not([data-hidden=true]) .tile:hover .sites-visual-mark[data-extra]{transition-delay:calc(var(--sites-intent) + 60ms + var(--from) * 18ms)}.tile-shell:not([data-hidden=true]) .tile:focus-visible .sites-visual-mark{transition:--sites-t .46s var(--ease-standard) calc(var(--from) * 18ms)}.tile-shell:not([data-hidden=true]) .tile:focus-visible .sites-visual-mark[data-extra]{transition-delay:calc(60ms + var(--from) * 18ms)}.tile-shell:not([data-hidden=true]) .tile:is(:hover,:focus-visible) .sites-visual-more{opacity:0}.tile-shell:not([data-hidden=true]) .tile:hover .sites-visual-more{transition:opacity var(--dur-fast) ease var(--sites-intent)}.tile-shell:not([data-hidden=true]) .tile:focus-visible .sites-visual-more{transition:opacity var(--dur-fast) ease}.tile-shell:not([data-hidden=true]) .tile:is(:hover,:focus-visible) .sites-visual-ban{clip-path:inset(0 round 999px);opacity:1}.tile-shell:not([data-hidden=true]) .tile:hover .sites-visual-ban{transition:clip-path .36s var(--ease-in-out) calc(var(--sites-intent) + var(--fade)), opacity 90ms ease calc(var(--sites-intent) + var(--fade))}.tile-shell:not([data-hidden=true]) .tile:focus-visible .sites-visual-ban{transition:clip-path .36s var(--ease-in-out) var(--fade), opacity 90ms ease var(--fade)}.tile-shell:not([data-hidden=true]) .tile:hover .sites-visual[data-kind=blocked] .sites-visual-mark{transition:--sites-t .4s var(--ease-standard) calc(var(--sites-intent) + var(--from) * 12ms)}.tile-shell:not([data-hidden=true]) .tile:focus-visible .sites-visual[data-kind=blocked] .sites-visual-mark{transition:--sites-t .4s var(--ease-standard) calc(var(--from) * 12ms)}html[data-tile-reseat] .sites-visual,html[data-tile-reseat] .sites-visual-mark,html[data-tile-reseat] .sites-visual-more,html[data-tile-reseat] .sites-visual-ban{transition:none!important}html[data-tile-motion=off] .sites-visual{--sites-turn:-14deg!important;transition:none!important}html[data-tile-motion=off] .sites-visual-mark{--sites-t:0!important;transition:none!important}html[data-tile-motion=off] .sites-visual-more{opacity:1!important;transition:none!important}html[data-tile-motion=off] .sites-visual-ban{clip-path:inset(0 100% 0 0 round 999px)!important;opacity:0!important;transition:none!important}
