.self { position: fixed; z-index: 30; right: var(--M); bottom: var(--M); display: flex; align-items: center; gap: 4px; min-height: 44px;
  padding: 0 6px; border: 0; border-radius: 22px; background: #111111; color: #FFFFFF; font: 400 15px/1 var(--sans); letter-spacing: .01em;
  cursor: pointer; transition: background .4s, color .4s; }
.self .w { position: relative; padding: 14px 10px; opacity: .45; transition: opacity .3s; }
.self .w b { font-weight: 700; }
.self .dot { position: absolute; bottom: 7px; width: 6px; height: 6px; border-radius: 50%; background: #E0303D; transition: left .45s cubic-bezier(.2, .7, .2, 1); }
.self[aria-pressed="false"] .a, .self[aria-pressed="true"] .b { opacity: 1; }
.self:focus-visible { outline: 2px solid #E0303D; outline-offset: 3px; }
.s-name { padding-bottom: calc(var(--M) + 56px); }
.s-hi { padding-bottom: calc(var(--M) + 56px); }
.s-brand .cap { bottom: calc(var(--M) + 56px); }
@media (min-width: 861px) { .s-brand { padding-bottom: calc(var(--M) + 228px); }
  .s-brand .shots { --sw: min(calc((100vw - 2 * var(--M) - 150px - 64px) / 5), calc((100svh - 2 * var(--M) - 228px) / 2.167)); } }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.alter .name { font-family: "Poiret One", var(--sans); letter-spacing: -.01em; }
html.alter .figs div:last-child dd { color: var(--pop); }
html.alter :focus-visible { outline-color: currentColor; }
html.alter a, html.alter .copy, html.alter .ctl button { text-decoration-color: currentColor; }
html.alter ::selection { background: var(--accent); color: #FFFFFF; }
html.alter .idx ol { background: none; }
@media (max-width: 860px), (orientation: landscape) and (max-height: 500px) {
  .self { right: 12px; bottom: 12px; font-size: 14px; }
  html.alter .idx.open ol { background: var(--strip, #FFFFFF); }
  html.alter .idx.open a { color: inherit !important; }
}