@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-size:74cqh;--orbit-right:7cqw;--orbit-tilt:.9;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:calc(100cqw - var(--orbit-right) - var(--orbit-size) / 2);--cy:50cqh;--r:calc(var(--orbit-size) / 2 - 17px);--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) * var(--orbit-tilt));--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] .sites-visual-mark{--plate:calc(var(--orbit-size) * .32);--group-r:calc(var(--orbit-size) * .24);--a:calc((var(--i) - 1) * 360deg / max(var(--n) - 1, 1) - 90deg);--ring-x:calc(var(--cx) + cos(var(--a)) * var(--group-r));--ring-y:calc(var(--cy) + sin(var(--a)) * var(--group-r));--ring-s:1;--size:calc(34px + (var(--plate) - 34px) * var(--sites-t));width:var(--size);height:var(--size);margin:calc(var(--size) / -2) 0 0 calc(var(--size) / -2)}.sites-visual[data-kind=blocked] .sites-visual-mark[data-hub]{--plate:calc(var(--orbit-size) * .38);--ring-x:var(--cx);--ring-y:var(--cy)}.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{width:calc(var(--size) * .58);height:calc(var(--size) * .58);border-radius:calc(var(--size) * .14);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:calc(100cqw - var(--orbit-right) - var(--orbit-size) / 2);--cy:50cqh;--ban-w:calc(var(--orbit-size) * .8);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}@media (max-width:640px){.sites-visual{--orbit-size:70cqh;--orbit-right:5cqw}}
.vinyl{--vinyl-turn:1.4s;border-radius:var(--radius-full);width:100%;height:100%;box-shadow:var(--shadow-subtle);display:block;position:relative}.vinyl-disc{border-radius:inherit;background:radial-gradient(circle, transparent 0 57%, color-mix(in srgb, var(--white) 8%, transparent) 57.5% 58.5%, transparent 59% 79%, color-mix(in srgb, var(--white) 8%, transparent) 59.5% 80.5%, transparent 81%), repeating-radial-gradient(circle, color-mix(in srgb, var(--title) 40%, black) 0 1px, color-mix(in srgb, var(--title) 70%, black) 1px 2.5px);position:absolute;inset:0}@keyframes vinyl-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}html:not([data-tile-motion=off]) .tile-shell:not([data-hidden=true]) .vinyl[data-spin]:not([data-empty=true]) .vinyl-disc{animation:vinyl-spin var(--vinyl-turn) var(--ease-out) both}.vinyl-label{border-radius:inherit;background:conic-gradient(from 0deg, color-mix(in srgb, color-mix(in srgb, var(--tile-tone) 68%, black) 82%, var(--page)) 0 292deg, color-mix(in srgb, color-mix(in srgb, var(--tile-tone) 68%, black) 70%, var(--page)) 292deg 360deg);background-position:50%;background-size:cover;position:absolute;inset:24%}@keyframes vinyl-cover-in{0%{opacity:0}to{opacity:1}}.vinyl[data-cycle="2"]{--vinyl-step:calc(var(--vinyl-turn) / 2)}.vinyl[data-cycle="3"]{--vinyl-step:calc(var(--vinyl-turn) / 3)}.vinyl[data-cycle] .vinyl-label[data-frame]:not([data-frame="0"]){opacity:0;transition:opacity var(--dur-slow) var(--ease-out)}html:not([data-tile-motion=off]) .vinyl[data-cycle][data-spin] .vinyl-label[data-frame]:not([data-frame="0"]){opacity:1;animation:vinyl-cover-in var(--dur-slow) ease both;animation-delay:calc(var(--vinyl-step) * var(--vinyl-frame) - var(--dur-slow) / 2);transition:none}.vinyl-label[data-frame="1"]{--vinyl-frame:1}.vinyl-label[data-frame="2"]{--vinyl-frame:2}.vinyl-label:after{content:"";border-radius:inherit;background:var(--page);box-shadow:inset 0 1px 1px color-mix(in srgb, var(--title) 25%, transparent);position:absolute;inset:42%}.vinyl-sheen{border-radius:inherit;pointer-events:none;background:radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--white) 22%, transparent) 0%, transparent 18%), conic-gradient(from 20deg, transparent 0deg, color-mix(in srgb, var(--white) 30%, transparent) 25deg, transparent 50deg, transparent 180deg,  color-mix(in srgb, var(--white) 10%, transparent) 205deg, transparent 228deg);position:absolute;inset:0;-webkit-mask:radial-gradient(circle,#0000 0 24%,#000 24.5%);mask:radial-gradient(circle,#0000 0 24%,#000 24.5%)}.vinyl[data-empty=true]{box-shadow:none}.vinyl[data-empty=true] .vinyl-disc{border:2px dashed color-mix(in srgb, var(--title) 22%, transparent);background:0 0;place-items:center;display:grid}.vinyl-note{width:22px;height:22px;color:var(--content)}.vinyl-form-record{align-items:center;gap:var(--space-sm);flex-direction:column;width:100%;display:flex}.vinyl-form-record .vinyl{flex:none;width:8rem;height:8rem}.vinyl-form-record .vinyl-disc{animation:10s linear infinite paused vinyl-spin}.vinyl-form-record[data-playing=true] .vinyl-disc{animation-play-state:running}html[data-tile-motion=off] .vinyl-form-record .vinyl-disc{animation:none}@media (prefers-reduced-motion:reduce){.vinyl-form-record .vinyl-disc{animation:none}}.vinyl-form .vinyl-form-piece{width:100%;color:var(--title);font-size:var(--text);text-align:center;overflow-wrap:anywhere;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;margin:0;font-weight:500;line-height:1.3;display:-webkit-box;overflow:hidden}.vinyl-form{gap:var(--space);padding:var(--space) var(--space-lg) var(--space-lg);flex-direction:column;display:flex}.vinyl-form h2{padding-right:calc(var(--hit) + var(--space));color:var(--title);font-size:var(--text);font-weight:500;line-height:var(--hit);margin:0}.vinyl-form p{color:var(--content);margin:0}.vinyl-form-empty,.vinyl-form-mode-note{color:var(--content);font-size:var(--text-sm);text-align:center;line-height:1.3}.vinyl-form-mode{border-radius:var(--radius-full);background:var(--black-5);grid-template-columns:1fr 1fr;gap:4px;width:min(16rem,100%);margin-inline:auto;padding:4px;display:grid}.vinyl-form-mode button{min-height:calc(var(--hit) - 8px);padding:0 var(--space-sm);border-radius:var(--radius-full);color:var(--content);font:inherit;font-size:var(--text-sm);cursor:var(--cursor);background:0 0;border:0;font-weight:500}.vinyl-form-mode button[aria-pressed=true]{background:var(--white);color:var(--title);box-shadow:var(--shadow-subtle)}.vinyl-form-row{align-items:center;gap:var(--space-sm);display:flex}.vinyl-form-row .field{flex:1}.vinyl-form-add{min-height:var(--hit);padding:0 var(--space);border-radius:var(--radius-full);background:var(--title);color:var(--white);border:0;flex:none}.vinyl-form-add:disabled{opacity:.45}.vinyl-form-add-link{min-height:var(--hit);color:var(--content);font:inherit;font-size:var(--text-sm);cursor:var(--cursor);background:0 0;border:0;align-self:flex-start;padding:0;font-weight:500}.vinyl-form-add-link:hover{color:var(--title)}.vinyl-form-add-link:disabled{opacity:.45;cursor:default}.vinyl-form-remove{min-height:var(--hit);color:var(--title);background:0 0;border:0;align-self:flex-start;padding:0}.vinyl-form-list{gap:var(--space-xs);flex-direction:column;max-height:16rem;margin:0;padding:0;list-style:none;display:flex;overflow:auto}.vinyl-form-item{align-items:center;gap:var(--space-sm);min-width:0;padding-inline:var(--space-xs);border-radius:var(--radius-sm);cursor:grab;-webkit-touch-callout:none;display:flex}.vinyl-form-item[data-current=true]{background:var(--black-5)}.vinyl-form-list [data-dragging=true] .vinyl-form-item{cursor:grabbing}.vinyl-form-play{border-radius:var(--radius-full);background:var(--black-5);width:2.5rem;height:2.5rem;color:var(--title);cursor:var(--cursor);border:0;flex:none;place-items:center;padding:0;display:grid}.vinyl-form-play[aria-pressed=true]{background:var(--title);color:var(--white)}.vinyl-form-play .icon,.vinyl-form-play .desk-icon-with,.vinyl-form-play .desk-icon-with[data-style=with-line],.vinyl-form-play .desk-icon-with[data-style=with-engrave]{opacity:1;width:16px;height:16px;color:var(--title)}.vinyl-form-play[aria-pressed=true] .desk-icon-with,.vinyl-form-play[aria-pressed=true] .desk-icon-with[data-style=with-line],.vinyl-form-play[aria-pressed=true] .desk-icon-with[data-style=with-engrave]{color:var(--white)}.vinyl-players{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute;overflow:hidden}.vinyl-form-item-title{min-width:0;color:var(--title);font-size:var(--text-sm);text-overflow:ellipsis;white-space:nowrap;flex:1;font-weight:500;line-height:1.3;overflow:hidden}.vinyl-form-item .vinyl-form-remove{flex:none;align-self:center;min-height:0}