.wrap { max-width: 1020px }
.account-nav { display: flex; align-items: baseline; gap: .4rem 1.25rem; min-width: 0; font-size: var(--text-sm);
               color: var(--graphite) }
.account-nav form { display: contents }
.account-nav a, .account-nav button { padding: .2rem 0; font: inherit; background-color: transparent;
                                      border: 0; border-radius: 2px; cursor: pointer; white-space: nowrap }
.account-nav a[aria-current] { color: var(--ink) }
.account-nav .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
@media (max-width: 559.98px) {
  .account-nav { flex-wrap: wrap; justify-content: flex-end; column-gap: .75rem }
  .account-nav .who { display: none }
}
main header { display: flex; align-items: baseline; justify-content: space-between;
         gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem }
h1, [role="heading"][aria-level="1"] { font-family: var(--serif); font-size: 1.6rem; font-weight: 500; margin: 0;
     letter-spacing: -.005em }
.site-title { display: flex; align-items: center; gap: .6rem; min-width: 0 }
.meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end;
        gap: .5rem 1.25rem; font-size: var(--text-md) }
.live { margin-left: auto; font-size: var(--text-md); color: var(--graphite); white-space: nowrap }
.live b { display: inline-block; font-weight: 500; color: var(--ink) }
.live b.rolling { position: relative; clip-path: inset(0 -1em) }
.live b span { display: inline-block }
.live b .was { position: absolute; top: 0; right: 0 }
.live i { display: inline-block; width: 7px; height: 7px; margin-right: .5rem; vertical-align: .08em;
          border-radius: 50%; background: var(--bar) }
.live.stale i { opacity: .35 }
@media (prefers-reduced-motion: no-preference) { .live:not(.stale) i { animation: breathe 2.4s ease-in-out infinite } }
@keyframes breathe { 50% { opacity: .35 } }
main header:has(+ .pages-bar) { margin-bottom: 1.25rem }
@media (max-width: 639.98px) {
  main header { align-items: center; gap: .9rem 1rem }
  .live { font-size: var(--text-sm) }
  .meta { flex: 1 1 100% }
  .meta .period { display: flex; width: 100% }
  .meta .period .picker { flex: 1 }
  .meta .picker-trigger { position: relative; width: 100%; padding-right: calc(1.05rem + 10px); white-space: normal;
                          text-wrap: balance }
  .meta .picker-trigger > .picker-caret { position: absolute; top: 50%; right: .6rem; margin: 0; translate: 0 -50% }
}
.pages-bar { display: flex; align-items: stretch; gap: .75rem; margin: 0 0 1.75rem }
.pages-switch { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: 6px;
                overflow: hidden; background: var(--rule-strong); gap: 1px; font-size: var(--text-md) }
.pages-switch a { display: inline-flex; align-items: baseline; justify-content: center; gap: .35rem;
                  padding: .42rem 1rem; background: var(--paper); color: var(--graphite); --lined: 0;
                  font-weight: 500; white-space: nowrap; transition: color .12s }
.pages-switch a:hover { color: var(--ink) }
.pages-switch a[aria-current="page"] { background: var(--wash); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink) }
.pages-switch a:first-child { border-radius: 5px 0 0 5px }
.pages-switch a:last-child { border-radius: 0 5px 5px 0 }
.pages-switch a:focus-visible { outline-offset: -2px }
.pages-switch .n { font-weight: 400; font-size: var(--text-xs); color: var(--graphite); font-variant-numeric: tabular-nums }
.pages-switch .vitals { flex: none; align-self: center; width: 7px; height: 7px; border-radius: 50% }
.pages-switch .vitals.good { background: var(--good) } .pages-switch .vitals.ni { background: var(--ni-bar) }
.pages-switch .vitals.poor { background: var(--poor) }
.site-settings { display: inline-flex; align-items: center; gap: .45rem; margin-left: auto; padding: .42rem .9rem;
                 box-sizing: border-box; border: 1px solid var(--rule-strong); border-radius: 6px; background: var(--paper);
                 color: var(--graphite); font-size: var(--text-md); font-weight: 500; --lined: 0;
                 white-space: nowrap; transition: color .12s, border-color .12s }
.site-settings svg { flex: none; width: 16px; height: 16px }
.site-settings:hover { border-color: var(--pencil); color: var(--ink) }
@media (max-width: 639.98px) {
  .pages-bar { gap: .3rem; margin-bottom: 1.25rem }
  .pages-switch { display: flex; flex: 1; min-width: 0 }
  .pages-switch a { flex: 1; padding: .42rem .5rem }
  .site-settings { flex: none; width: 2.1rem; justify-content: center; padding: 0 }
  .site-settings span { display: none }
}
@media (max-width: 369.98px) {
  .pages-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .pages-switch a, .pages-switch a:first-child, .pages-switch a:last-child { border-radius: 0 }
}
@media (prefers-reduced-motion: reduce) { .pages-switch a, .site-settings { transition: none } }
.cog { display: inline-flex; padding: 4px; margin: -4px; color: var(--graphite);
       border-radius: 4px; transition: color .12s }
.cog svg { width: 16px; height: 16px }
.cog:hover { color: var(--ink) }
@media (prefers-reduced-motion: reduce) { .cog { transition: none } }
.site-menu { position: relative; min-width: 0 }
.site-menu > summary { list-style: none; display: flex; align-items: center; gap: .5rem; min-width: 0;
                       padding: .3rem .75rem .3rem .6rem; margin: calc(-.3rem - 1px) 0 calc(-.3rem - 1px) calc(-.6rem - 1px);
                       border: 1px solid transparent; border-radius: 6px; cursor: pointer; transition: border-color .12s }
.site-menu > summary:hover { border-color: var(--rule-strong) }
.site-menu[open] > summary { border-color: var(--ink) }
.site-menu > summary::-webkit-details-marker { display: none }
.site-menu h1 { min-width: 0; overflow-wrap: anywhere }
:is(.site-title, .site-menu > summary) > img { width: 22px; height: 22px }
@media (max-width: 639.98px) { .site-menu > summary > img { display: none } }
.site-menu-caret { flex: none; width: 16px; height: 16px; margin-left: -.15rem; color: var(--graphite); transition: color .12s, transform .2s }
.site-menu > summary:hover .site-menu-caret, .site-menu[open] .site-menu-caret { color: var(--ink) }
.site-menu[open] .site-menu-caret { transform: rotate(180deg) }
.site-menu-pop { position: absolute; z-index: 10; top: calc(100% + .3rem + 1px + 6px); left: calc(-.6rem - 1px); box-sizing: border-box;
                 min-width: 15rem; max-width: min(24rem, calc(100vw - 3rem)); padding: .35rem 0;
                 background: var(--paper); border: 1px solid var(--rule); border-radius: 8px;
                 box-shadow: 0 12px 32px var(--shadow), 0 2px 6px color-mix(in srgb, var(--shadow) 50%, transparent);
                 font-size: var(--text-md); line-height: 1.3 }
.site-menu-list { max-height: max(8.5rem, calc(100dvh - 14rem)); overflow-y: auto; overscroll-behavior: contain;
                  scrollbar-width: thin; margin-bottom: .35rem; padding-bottom: .35rem; border-bottom: 1px solid var(--rule) }
.site-menu-list[data-above] { mask-image: linear-gradient(transparent, var(--ink) 2.5rem) }
.site-menu-list[data-below] { mask-image: linear-gradient(var(--ink) calc(100% - 2.5rem), transparent calc(100% - 1px),
                                                          var(--ink) calc(100% - 1px)) }
.site-menu-list[data-above][data-below] { mask-image: linear-gradient(transparent, var(--ink) 2.5rem, var(--ink) calc(100% - 2.5rem),
                                                                      transparent calc(100% - 1px), var(--ink) calc(100% - 1px)) }
.site-menu ul { list-style: none; margin: 0; padding: 0 }
.site-menu li { display: block; margin: 0; padding: 0; border: 0; font-size: inherit }
.site-menu-group { margin: .6rem 0 .2rem; padding: 0 1rem; font-size: var(--text-sm); font-weight: 500;
                   color: var(--graphite); overflow-wrap: anywhere }
.site-menu-pop a { display: flex; align-items: center; gap: .6rem; min-height: 2.1rem; padding: 0 1rem;
                   color: var(--ink); --lined: 0; white-space: nowrap }
.site-menu-pop a span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis }
.site-menu-pop a:hover { background: var(--rule) }
.site-menu-pop a[aria-current], .site-menu-pop a[aria-current]:hover { background: var(--wash); box-shadow: inset 0 0 0 1px var(--ink) }
.site-menu-pop a:focus-visible { outline-offset: -2px }
@media (prefers-reduced-motion: reduce) { .site-menu > summary, .site-menu-caret { transition: none } }
@media (prefers-reduced-motion: no-preference) { .site-menu[open] .site-menu-pop { animation: appear .2s ease-out } }
@keyframes appear { from { opacity: 0 } }
.totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border-radius: 6px;
          overflow: hidden; background: var(--rule); border: 1px solid var(--rule); margin: 0 0 2rem }
.tile { background: var(--paper); padding: 1.1rem 1.25rem }
.tile dt { font-size: var(--text-sm); color: var(--graphite); margin-bottom: .3rem }
.tile dd { margin: 0; font-family: var(--serif); font-size: 1.35rem; font-weight: 500;
           font-variant-numeric: tabular-nums }
.tile dd.none { color: var(--graphite) }
.tile dd.change { margin-top: .3rem; font-family: var(--sans); font-size: var(--text-sm); font-weight: 400;
                  color: var(--ink) }
.tile dd.change i { font-style: normal; font-size: var(--text-xs); vertical-align: .1em }
.tile dd.change em { font-style: normal; color: var(--graphite) }
.totals.five { grid-template-columns: repeat(5, 1fr) }
.totals.two { grid-template-columns: repeat(2, 1fr) }
@media (max-width: 760px) {
  .totals.five { grid-template-columns: repeat(6, 1fr) }
  .totals.five .tile { grid-column: span 2 }
  .totals.five .tile:nth-child(n+4) { grid-column: span 3 }
}
.chart { position: relative; height: 150px; margin: 1.25rem 2.75rem 3.5rem 0 }
.ticks span { position: absolute; left: 0; right: -2.75rem; border-top: 1px solid var(--rule-faint) }
.ticks span:first-child { border-top-color: var(--rule-strong) }
.ticks em { position: absolute; right: 0; bottom: 3px; font-style: normal; font-size: var(--text-xs);
            line-height: 1; color: var(--graphite); font-variant-numeric: tabular-nums }
.bars { position: absolute; inset: 0; display: flex }
.col { position: relative; flex: 1; min-width: 0 }
.col::before { content: ''; position: absolute; inset: 0 1px; background: var(--wash);
               border-radius: 3px 3px 0 0; opacity: 0; transition: opacity .12s }
.col i { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
         width: calc(100% - 4px); max-width: 44px; height: var(--h); min-height: 1px;
         background: var(--bar); border-radius: 2px 2px 0 0; transition: opacity .12s }
.col.today i { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 14%, transparent) 0 1px, transparent 1px 5px),
               var(--highlighter);
               box-shadow: inset 0 0 0 1px var(--bar) }
.col em { position: absolute; top: calc(100% + .55rem); left: 50%; transform: translateX(-50%);
          font-style: normal; font-size: var(--text-xs); color: var(--graphite); white-space: nowrap }
@media (max-width: 639.98px) {
  .bars[data-unit="month"] .col em { white-space: normal; text-align: center; line-height: 1.25 }
}
.col a { position: absolute; inset: 0; color: inherit; --lined: 0; border-radius: 3px 3px 0 0 }
.col:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 3px 3px 0 0 }
.bars:hover .col i, .bars.active .col i { opacity: .22 }
.bars .col:hover i, .bars .col.on i, .col:hover::before, .col.on::before { opacity: 1 }
.col:hover em, .col.on em { color: var(--ink) }
.tip { position: absolute; top: 0; left: 0; z-index: 2; pointer-events: none;
       visibility: hidden; opacity: 0; transform: translateY(3px);
       background: var(--ink); color: var(--paper); border-radius: 5px; padding: .4rem .6rem .45rem;
       font-size: var(--text-sm); line-height: 1.3; white-space: nowrap;
       box-shadow: 0 6px 18px var(--shadow);
       transition: opacity .12s, transform .12s, visibility .12s }
.tip.shown { visibility: visible; opacity: 1; transform: none }
.tip::after { content: ''; position: absolute; top: 100%; left: calc(var(--arrow, 50%) - 5px);
              border: 5px solid transparent; border-top-color: var(--ink); border-bottom: 0 }
.tip b { font-weight: 600; font-variant-numeric: tabular-nums }
.tip small { display: block; color: var(--paper-dim); font-size: var(--text-xs); margin-top: .1rem }
@media (prefers-reduced-motion: reduce) { .col::before, .col i, .tip { transition: none } }
.grid { display: grid; gap: 2rem }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.grid + .grid { margin-top: 2.5rem }
@media (max-width: 760px) { .grid.two, .grid.three { grid-template-columns: minmax(0, 1fr) } }
.scope { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
         font-size: var(--text-sm); color: var(--graphite); margin: -.15rem 0 .4rem }
.crumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem; min-width: 0 }
.crumbs b { font-weight: 500; color: var(--ink) }
.crumbs i { font-style: normal; color: var(--pencil) }
.more { font-size: var(--text-sm); color: var(--graphite); margin: .45rem 0 0 }
h2, h3 { font-size: var(--text-md); color: var(--graphite); font-weight: 500; margin: 0 0 .6rem }
ol { list-style: none; margin: 0; padding: 0 }
li { display: flex; justify-content: space-between; gap: 1rem; padding: .32rem .4rem;
     margin: 0 -.4rem; font-size: var(--text-body); border-bottom: 1px solid var(--rule-faint) }
li:has(.drill, .out):hover { background: var(--wash); --ground: var(--wash) }
li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
          display: flex; align-items: center; gap: 6px; min-width: 0 }
img[src^="/img/icons/"] { flex: none; width: 14px; height: 14px; display: block }
img:is([src^="/img/icons/devices/"], [src^="/img/icons/ui/"], [src^="/img/icons/botreasons/"]) { opacity: .85 }
img:is([src^="/img/icons/sites/"], [src^="/img/icons/asn/"]) { object-fit: contain }
img[src^="/img/icons/flags/"], i.flag { flex: none; width: 16px; height: 12px; object-fit: cover; border-radius: 2px; display: block }
i.flag { background: var(--rule-faint) }
li:last-child { border-bottom: 0 }
li b { flex: none; white-space: nowrap; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink-soft) }
li .rate { flex: none; white-space: nowrap; margin-left: auto; font-style: normal; font-size: var(--text-sm);
           color: var(--graphite); font-variant-numeric: tabular-nums; min-width: 3em; text-align: right }
li .rate + b { min-width: 3.5em; text-align: right }
li .page { flex-shrink: 1000; min-width: 5em; overflow: hidden; text-overflow: ellipsis; font-style: normal;
           font-size: var(--text-sm); color: var(--graphite) }
li span:has(+ .page) { display: block }
.empty { color: var(--graphite); font-size: var(--text-body); padding: .32rem 0; margin: 0 }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: -.5rem 0 1.5rem }
.chip { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--text-md);
        background: var(--wash); border: 1px solid var(--highlighter); border-radius: 5px;
        padding: .2rem .5rem; color: var(--ink); --lined: 0 }
.chip:hover { background: var(--highlighter) }
.chip em { font-style: normal; color: var(--graphite) }
.chip span[aria-hidden] { color: var(--graphite); font-size: var(--text-lg); line-height: 1 }
.drill { color: inherit; --lined: 0; display: flex; align-items: center;
         gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis;
         white-space: nowrap }
.drill:hover { --lined: 1 }
.drill:has(> img:first-child) { --line-start: calc(14px + 6px) }
.drill:has(> :is(img[src^="/img/icons/flags/"], i.flag):first-child) { --line-start: calc(16px + 6px) }
.out { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin: -3px 0 -3px 1px; --lined: 0;
       border-radius: 4px; color: var(--graphite); opacity: 0;
       transition: opacity .12s, background-color .12s, color .12s }
.out svg { width: 12px; height: 12px; display: block }
li:is(:hover, :focus-within) .out { opacity: 1 }
.out:hover { background: var(--highlighter); color: var(--ink) }
.out:focus-visible { outline-offset: 1px; opacity: 1 }
li span:has(> .out) { overflow: visible }
@media (hover: none) {
  .out { opacity: 1; color: var(--pencil); width: 24px; height: 24px; margin-block: -5px }
}
@media (prefers-reduced-motion: reduce) { .out { transition: none } }
.tabs input { position: absolute; opacity: 0; width: 0; height: 0 }
.tablist { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-bottom: .6rem }
.tablist label { font-size: var(--text-md); color: var(--graphite); font-weight: 500; cursor: pointer;
                 border-bottom: 1px solid transparent; padding-bottom: 1px }
.tablist label:hover { color: var(--ink) }
.tabs input:focus-visible + .tablist label,
.tabs input:focus-visible ~ .tablist label[for] { outline: none }
.tabs input:focus-visible ~ .tablist label, .tabs input:focus-visible ~ .tablist .head { text-decoration-line: underline }
.tabpanel { display: none }
.tabs > input:nth-of-type(1):checked ~ .tablist label:nth-of-type(1) { display: none }
.tabs > input:nth-of-type(1):checked ~ .tablist label:nth-of-type(1) + .head { display: inline-block }
.tabs > input:nth-of-type(1):checked ~ .tabpanel:nth-of-type(2) { display: block }
.tabs > input:nth-of-type(2):checked ~ .tablist label:nth-of-type(2) { display: none }
.tabs > input:nth-of-type(2):checked ~ .tablist label:nth-of-type(2) + .head { display: inline-block }
.tabs > input:nth-of-type(2):checked ~ .tabpanel:nth-of-type(3) { display: block }
.tabs > input:nth-of-type(3):checked ~ .tablist label:nth-of-type(3) { display: none }
.tabs > input:nth-of-type(3):checked ~ .tablist label:nth-of-type(3) + .head { display: inline-block }
.tabs > input:nth-of-type(3):checked ~ .tabpanel:nth-of-type(4) { display: block }
.tabs > input:nth-of-type(4):checked ~ .tablist label:nth-of-type(4) { display: none }
.tabs > input:nth-of-type(4):checked ~ .tablist label:nth-of-type(4) + .head { display: inline-block }
.tabs > input:nth-of-type(4):checked ~ .tabpanel:nth-of-type(5) { display: block }
.section { display: flex; align-items: center; gap: .5rem; color: var(--ink);
           font-size: var(--text-xl); font-weight: 500; margin: 2.5rem 0 1rem }
.section::after { content: ""; flex: 1; height: 1px; background: var(--rule) }
.head { display: block; width: fit-content; color: inherit; --lined: 0; border-radius: 2px }
.head:is(:hover, :focus-visible) :is(h2, h3),
.pane:has(> .more .see-all:is(:hover, :focus-visible)) > .head :is(h2, h3) {
  color: var(--ink); --lined: 1 }
.head:focus-visible { outline-offset: 4px }
.tablist .head { display: none; font-size: var(--text-md); font-weight: 500; color: var(--ink);
                 border-bottom: 1px solid var(--ink); padding-bottom: 1px }
.more .see-all { border-radius: 2px }
.more .see-all:focus-visible { color: var(--ink) }
.failed { font-size: var(--text-body); color: var(--ink-soft) }
.failed pre { white-space: pre-wrap; font-size: var(--text-sm); color: var(--graphite) }
.waiting { max-width: 34rem; font-size: var(--text-body); color: var(--ink-soft) }
.waiting h2 { font-family: var(--serif); font-size: 1.2rem; font-weight: 500; color: var(--ink);
              letter-spacing: -.005em; margin: 0 0 .6rem }
.waiting p { line-height: 1.55; margin: 0 0 1rem }
.waiting b { font-weight: 500; color: var(--ink) }
.waiting code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em }
.waiting .then { margin: 1rem 0 0; font-size: var(--text-md); color: var(--graphite) }
.waiting .then a { color: var(--ink) }
.period { display: inline-flex; align-items: stretch; gap: .3rem; max-width: 100% }
.period-step { flex: none; width: 2.1rem; display: grid; place-items: center; box-sizing: border-box;
               border: 1px solid var(--rule-strong); border-radius: 6px; background: var(--paper);
               color: var(--ink-soft) }
a.period-step[href]:hover { border-color: var(--pencil); color: var(--ink) }
.period-step[aria-disabled="true"] { border-color: var(--rule); color: var(--rule-strong); cursor: default }
.period-step svg, .picker-step svg { width: 16px; height: 16px }
.period .picker { min-width: 0 }
.picker { position: relative; display: inline-block; max-width: 100%; font-size: var(--text-md); line-height: 1.3 }
.picker-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
             white-space: nowrap }
.picker svg { flex: none }
.picker-caret, .picker-more, .picker-arrow { width: 10px; height: 10px }

.picker-trigger { list-style: none; display: inline-flex; flex-wrap: wrap; align-items: center; gap: .15rem .45rem;
                  box-sizing: border-box; max-width: 100%; padding: .38rem .6rem .38rem .7rem;
                  border: 1px solid transparent; border-radius: 6px;
                  background: var(--paper); color: var(--ink); cursor: pointer; user-select: none;
                  white-space: nowrap; font-weight: 500; transition: border-color .12s }
.picker-trigger::-webkit-details-marker { display: none }
.picker-trigger:hover { border-color: var(--rule-strong) }
.picker[open] > .picker-trigger { border-color: var(--ink) }
.picker-label { color: var(--graphite) }
.picker-dates { color: var(--ink); font-variant-numeric: tabular-nums }
.picker-caret { color: var(--graphite); margin-left: .1rem; transition: transform .12s }
.picker[open] > .picker-trigger .picker-caret { transform: rotate(180deg) }

.picker-pop { position: absolute; z-index: 10; top: calc(100% + 6px); right: 0; width: max-content; display: grid;
              grid-template-columns: auto 20rem; grid-template-areas: "side main" "foot foot";
              background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; text-align: left;
              box-shadow: 0 12px 32px var(--shadow), 0 2px 6px color-mix(in srgb, var(--shadow) 50%, transparent);
              font-weight: 400 }
.picker-side { grid-area: side; min-width: 13.5rem; padding: .5rem 0; border-right: 1px solid var(--rule);
               border-radius: 7px 0 0 0; background: color-mix(in srgb, var(--rule-faint) 50%, var(--paper)) }
.picker-main { grid-area: main; min-width: 0; padding: 1.1rem 1rem .25rem }

.picker-list a { display: flex; align-items: center; min-height: 2.1rem; padding: 0 1rem;
                 color: var(--ink); --lined: 0; white-space: nowrap }
.picker .picker-list { list-style: none; margin: 0; padding: 0 }
.picker .picker-list li { position: relative; display: flex; flex-wrap: wrap; justify-content: normal; gap: 0;
                          margin: 0; padding: 0; border: 0; font-size: inherit }
.picker-list li > a { flex: 1 }
.picker-list a:hover { background: var(--rule) }
.picker .is-on, .picker .is-on:hover { background: var(--wash); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink) }
.picker-has-alt > a { padding-right: 2.5rem }
.picker-alt > summary { list-style: none; position: absolute; top: 0; right: .35rem; width: 1.9rem; height: 2.1rem;
                        display: grid; place-items: center; border-radius: 4px; color: var(--graphite); cursor: pointer }
.picker-alt > summary::-webkit-details-marker { display: none }
.picker-alt > summary:hover, .picker-alt[open] > summary { color: var(--ink); background: var(--rule) }
.picker-flyout { position: absolute; z-index: 2; top: -.35rem; left: calc(100% - .25rem); padding: .35rem 0;
                 background: var(--paper); border: 1px solid var(--rule); border-radius: 8px;
                 box-shadow: 0 8px 24px var(--shadow) }
.picker-counts { margin-top: .4rem; padding-top: .4rem; border-top: 1px solid var(--rule) }
.picker-n { display: flex; align-items: center; gap: .5rem; min-height: 2.5rem; margin: 0; padding: 0 .5rem 0 1rem }
.picker-n label { flex: 1 0 auto; color: var(--ink); white-space: nowrap }
.picker-n input { width: 3.4rem; box-sizing: border-box; padding: .28rem .3rem; font: inherit; text-align: center;
                  font-variant-numeric: tabular-nums; color: var(--ink); background: var(--paper);
                  border: 1px solid var(--pencil); border-radius: 4px; -moz-appearance: textfield; appearance: textfield }
.picker-n input::-webkit-inner-spin-button, .picker-n input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0 }
.picker-go { flex: none; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; padding: 0;
             border: 0; border-radius: 50%; background: none; color: var(--graphite); cursor: pointer }
.picker-go:hover { background: var(--rule); color: var(--ink) }
.picker-js .picker-go { display: none }

.picker-fields { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 }
.picker-submit { flex-basis: 100%; display: flex; justify-content: flex-end; padding: .6rem 0 .75rem }
.picker-field { position: relative; flex: 1; min-width: 0 }
.picker-field label { position: absolute; top: 0; left: .45rem; transform: translateY(-50%); padding: 0 .25rem;
                      background: var(--paper); color: var(--graphite); font-size: var(--text-xs); line-height: 1;
                      pointer-events: none }
.picker-field input { width: 100%; min-width: 0; box-sizing: border-box; height: 2.4rem; padding: 0 .6rem;
                      font: inherit; color: var(--ink); background: var(--paper);
                      border: 1px solid var(--pencil); border-radius: 6px }
.picker-field:focus-within label { color: var(--ink) }
.picker [aria-invalid="true"] { border-style: dashed }
.picker-dash { color: var(--pencil) }

.picker-nav { display: flex; align-items: center; gap: .15rem; margin: .8rem 0 .2rem }
.picker-select { position: relative; display: inline-flex; align-items: center; margin-left: -.35rem }
.picker-select select { -webkit-appearance: none; appearance: none; padding: .35rem 1.55rem .35rem .45rem;
                        font: inherit; font-weight: 500; color: var(--ink); background: none; border: 0;
                        border-radius: 4px; cursor: pointer }
.picker-select select:hover { background: var(--rule-faint) }
.picker-select .picker-caret { position: absolute; right: .45rem; pointer-events: none }
.picker-step { width: 2rem; height: 2rem; display: grid; place-items: center; padding: 0; border: 0;
               border-radius: 50%; background: none; color: var(--ink-soft); cursor: pointer }
.picker-step:first-of-type { margin-left: auto }
.picker-step:hover { background: var(--rule-faint) }
.picker-step[aria-disabled="true"] { color: var(--rule-strong); background: none; cursor: default }

.picker-grid { position: relative; isolation: isolate; height: 18rem; margin: 0 -.25rem; overflow-y: auto;
               overscroll-behavior: contain; scrollbar-width: thin }
.picker-head { position: sticky; top: 0; z-index: 1; display: grid; grid-template-columns: repeat(7, 1fr);
               padding: 0 .25rem; background: var(--paper); border-bottom: 1px solid var(--rule-faint) }
.picker-head span { padding: .35rem 0; text-align: center; font-size: var(--text-xs); color: var(--graphite) }
.picker-week { display: grid; grid-template-columns: repeat(7, 1fr); padding: 0 .25rem }
.picker-mlabel { align-self: center; padding: .7rem 0 .35rem .5rem; font-size: var(--text-sm); font-weight: 500;
                 color: var(--graphite); white-space: nowrap }
.picker-day { position: relative; height: 2.3rem; display: grid; place-items: center; cursor: pointer;
              font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--ink); scroll-margin-top: 2rem }
.picker-day:focus-visible { outline: none }
.picker-day > span { position: relative; width: 2rem; height: 2rem; display: grid; place-items: center;
                     border-radius: 50% }
.picker-day:hover > span { background: var(--rule-faint) }
.picker-day.is-in::before { content: ''; position: absolute; inset: .15rem 0; background: var(--wash) }
.picker-day.is-start::before { left: 50% }
.picker-day.is-end::before { right: 50% }
.picker-day.is-start.is-end::before { content: none }
.picker-day.is-today > span { box-shadow: inset 0 0 0 1px var(--ink) }
.picker-day.is-start > span, .picker-day.is-end > span { background: var(--highlighter); font-weight: 600 }
.picker-day:focus-visible > span { outline: 2px solid var(--ink); outline-offset: 1px }
.picker-day[aria-disabled="true"] { color: var(--rule-strong); cursor: default }
.picker-day[aria-disabled="true"] > span { background: none }

.picker-foot { grid-area: foot; display: flex; justify-content: flex-end; gap: .5rem; padding: .65rem 1rem;
               border-top: 1px solid var(--rule) }
.picker-btn { display: inline-flex; align-items: center; padding: .42rem .95rem; font: inherit; font-weight: 500;
              color: var(--ink); background: none; border: 1px solid transparent; border-radius: 6px;
              --lined: 0; cursor: pointer }
.picker-cancel:hover { background: var(--rule-faint) }
.picker-apply { color: var(--paper); background: var(--ink) }
.picker-apply:hover { background: var(--ink-soft) }

@media (max-width: 639.98px) {
  .picker-pop { position: fixed; top: auto; right: 0; bottom: 0; left: 0; width: auto; max-height: 88vh; max-height: 88dvh;
                overflow-y: auto; overscroll-behavior: contain; grid-template-columns: minmax(0, 1fr);
                grid-template-areas: "side" "main" "foot"; border-width: 1px 0 0; border-radius: 12px 12px 0 0 }
  .picker-side { border-right: 0; border-bottom: 1px solid var(--rule); border-radius: 0 }
  .picker-flyout { position: static; padding: 0 0 0 1rem; border: 0; box-shadow: none }
  .picker-alt { flex-basis: 100% }
  .picker-alt[open] .picker-more { transform: rotate(90deg) }
  .picker-grid { height: 15rem }
  .picker-foot { position: sticky; bottom: 0; background: var(--paper) }
  .picker-field input, .picker-n input, .picker-select select { font-size: 16px }
}
@media (prefers-reduced-motion: reduce) { .picker-trigger, .picker-caret { transition: none } }
.speed { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; margin: 0;
         background: var(--rule); border: 1px solid var(--rule); border-radius: 6px; overflow: hidden }
@media (max-width: 900px) { .speed { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
@media (max-width: 520px) { .speed { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.metric { background: var(--paper); padding: .9rem .85rem; display: flex; flex-direction: column;
          gap: .35rem; min-width: 0 }
.metric dt { font-size: var(--text-sm); color: var(--graphite) }
.metric dd { margin: 0 }
abbr[title] { text-decoration-line: none; cursor: help }
.metric .value { font-family: var(--serif); font-size: 1.35rem; font-weight: 500;
                 font-variant-numeric: tabular-nums }
.metric .value.none { font-family: var(--sans); font-size: var(--text-body); color: var(--graphite) }
.rated { align-self: flex-start; font-size: var(--text-xs); font-weight: 500; padding: .05rem .35rem; white-space: nowrap;
         border-radius: 4px; color: var(--graphite); background: var(--rule-faint) }
.rated.good { color: var(--good); background: var(--good-bg) }
.rated.ni { color: var(--ni); background: var(--ni-bg) }
.rated.poor { color: var(--poor); background: var(--poor-bg) }
.split { display: flex; height: 4px; border-radius: 2px; overflow: hidden; background: var(--rule-faint) }
.split i { display: block }
.split .good { background: var(--good) } .split .ni { background: var(--ni-bar) } .split .poor { background: var(--poor) }
.metric .devices { display: grid; gap: .2rem; margin-top: .15rem; font-size: var(--text-sm) }
.metric .devices span { display: flex; align-items: center; gap: .4rem }
.metric .devices img { width: 12px; height: 12px; opacity: .55 }
.metric .devices b { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--graphite) }
.metric .devices .r-good { color: var(--good) }
.metric .devices .r-ni { color: var(--ni) }
.metric .devices .r-poor { color: var(--poor) }
.metric .note { font-size: var(--text-sm); color: var(--graphite) }
.metric .change { font-size: var(--text-sm); color: var(--ink) }
.metric .change i { font-style: normal; font-size: var(--text-xs); vertical-align: .1em }
.metric-tabs { margin: 2rem 0 0 }
li b.r-good, .ledger .r-good { color: var(--good) }
li b.r-ni, .ledger .r-ni { color: var(--ni) }
li b.r-poor, .ledger .r-poor { color: var(--poor) }
.ledger .c-m { width: 5rem; text-align: right; font-variant-numeric: tabular-nums }
.ledger td.c-m b { font-weight: 500 }
@media (max-width: 639.98px) { .ledger .c-m { width: 3.8rem } }
.chart .limit { position: absolute; left: 0; right: -2.75rem; z-index: 1; pointer-events: none;
                border-top: 1px dashed var(--graphite) }
.chart .limit em { position: absolute; left: .25rem; bottom: 3px; padding: 0 .25rem; font-style: normal;
                   font-size: var(--text-xs); line-height: 1.2; color: var(--graphite); background: var(--paper) }
.scope-note.errors-mix { margin: -2rem 0 2rem }
.bots-docs { margin: -1.4rem 0 2rem; font-size: var(--text-sm); text-align: right }
.bots-docs a { padding: .2rem 0; border-radius: 2px }
.plot { position: relative; margin: 1.1rem 4.9rem 3.2rem 0 }
.plot-area { position: relative; height: 320px; border-bottom: 1px solid var(--rule-strong); container-type: inline-size }
.plot-grid, .dots { position: absolute; inset: 0 }
.plot .gy, .plot .avg-y { position: absolute; left: 0; right: -3.5rem; bottom: var(--y) }
.plot .gy { border-top: 1px solid var(--rule-faint) }
.plot .gx, .plot .avg-x { position: absolute; top: 0; bottom: 0; left: var(--x) }
.plot .gx { border-left: 1px solid var(--rule-faint) }
.plot .avg-x { border-left: 1px dashed var(--graphite) }
.plot .avg-y { border-top: 1px dashed var(--graphite) }
.plot-grid em { position: absolute; font-style: normal; font-size: var(--text-xs); line-height: 1;
                color: var(--graphite); font-variant-numeric: tabular-nums; white-space: nowrap }
.plot .gy em, .plot .avg-y em { right: 0; bottom: 3px }
.plot .gx em, .plot .avg-x em { top: calc(100% + .55rem); left: 0; transform: translateX(-50%) }
.plot .avg-x em, .plot .avg-y em { color: var(--graphite) }
.plot .avg-y em i { font-style: normal }
.plot .corner { line-height: 14px }
.plot .axis { color: var(--graphite) }
.plot .axis.x { top: calc(100% + 1.6rem); left: 50%; transform: translateX(-50%) }
.plot .axis.y { top: 50%; left: calc(100% + 4.25rem); transform: translate(-50%, -50%) rotate(-90deg) }
@media (max-width: 639.98px) {
  .plot { margin-right: 3.4rem }
  .plot .gy, .plot .avg-y { right: -2.2rem }
  .plot .avg-y em i { display: none }
  .plot .axis.y { left: calc(100% + 2.95rem) }
}
.corner.tl { top: 6px; left: 6px } .corner.tr { top: 6px; right: 6px }
.corner.bl { bottom: 6px; left: 6px } .corner.br { bottom: 6px; right: 6px }
.dot { position: absolute; left: var(--x); bottom: var(--y); width: 0; height: 0 }
.dot::before { content: ''; --hit: max(10px, var(--r)); position: absolute; border-radius: 50%;
               left: calc(var(--hit) * -1); top: calc(var(--hit) * -1); width: calc(var(--hit) * 2); height: calc(var(--hit) * 2) }
.dot i { position: absolute; box-sizing: border-box; border-radius: 50%;
         left: calc(var(--r) * -1); top: calc(var(--r) * -1); width: calc(var(--r) * 2); height: calc(var(--r) * 2);
         border: 1px solid var(--bar); background: color-mix(in srgb, var(--bar) 28%, transparent);
         transition: transform .12s, background-color .12s }
.dot em { display: none; position: absolute; top: -7px; left: calc(var(--r) + 4px); font-style: normal; font-size: var(--text-xs);
          line-height: 14px; color: var(--graphite); white-space: nowrap; pointer-events: none }
.dot em.left { left: auto; right: calc(var(--r) + 4px) }
.dot:hover, .dot.on { z-index: 1 }
.dot:hover i, .dot.on i { transform: scale(1.3); background-color: var(--bar) }
.dot:focus-visible { outline: none }
.dot:focus-visible i { outline: 2px solid var(--ink); outline-offset: 2px }
.dot:hover em, .dot.on em { color: var(--ink) }
@container (min-width: 540px) { .dot em:not(.wide) { display: block } }
@container (max-width: 539.98px) { .plot .gx.near em { display: none } }
@container (min-width: 920px) { .dot em.narrow { display: none } .dot em.wide { display: block } }
@media (prefers-reduced-motion: reduce) { .dot i { transition: none } }
.heat { position: relative; margin: .2rem 0 0 }
.heat .cells, .heat-axis { display: grid; grid-template-columns: 2.25rem repeat(24, minmax(0, 1fr)); gap: 3px }
.heat em { font-style: normal; font-size: var(--text-xs); line-height: 1; color: var(--graphite); white-space: nowrap }
.heat .cells em { align-self: center }
.cell, .heat .blank { height: 1.5rem; border-radius: 2px }
.cell { background: var(--rule-faint) }
.cell i { display: block; height: 100%; border-radius: inherit; background: var(--bar); opacity: var(--v) }
.cell:hover, .cell.on { outline: 1px solid var(--ink); outline-offset: 1px }
.cell:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px }
.heat-axis { margin-top: .5rem }
.heat-axis em { display: flex; justify-content: center; font-variant-numeric: tabular-nums }
@media (max-width: 639.98px) {
  .heat .cells, .heat-axis { grid-template-columns: 2rem repeat(24, minmax(0, 1fr)); gap: 2px }
  .cell, .heat .blank { height: 1.1rem }
  .heat-axis .minor { visibility: hidden }
}
.scope-note { font-size: var(--text-sm); color: var(--graphite); margin: .6rem 0 .5rem }
.code { font-style: normal; font-weight: 500; font-variant-numeric: tabular-nums; margin-right: .1rem }
.code.c4 { color: var(--client-error) } .code.c5 { color: var(--server-error) }
.pane .scope-note:last-child { margin: .6rem 0 0 }

.back { color: var(--ink); --lined: 0; display: inline-flex; align-items: baseline; gap: .32em;
        border-radius: 3px }
.back-arrow { width: .72em; height: .52em; flex: none; align-self: center; margin-top: .06em; overflow: visible;
              color: var(--graphite); transition: transform .18s, color .12s }
.back:hover .site-text { --lined: 1 }
.back:hover .back-arrow, .back:focus-visible .back-arrow { color: var(--ink); transform: translateX(-3px) }
.back:focus-visible { outline-offset: 4px }
.opener { margin: 0 0 1.35rem }
.title-row { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem 1.5rem; flex-wrap: wrap }
.view-title { font-family: var(--serif); font-size: 1.2rem; line-height: 1.3; font-weight: 500;
              letter-spacing: -.005em; color: var(--ink); margin: 0; min-width: 0 }
.view-title:focus, h1[tabindex="-1"]:focus { outline: none }
.turn { display: flex; align-items: baseline; gap: 1.4rem; margin-left: auto; font-size: var(--text-sm) }
.turn a { display: inline-flex; align-items: baseline; gap: .4rem; min-height: 24px; padding: .2rem 0;
          color: var(--graphite); --lined: 0; border-radius: 2px; white-space: nowrap }
.turn a:hover, .turn a:focus-visible { color: var(--ink) }
.turn .chev { display: inline-block; font-size: var(--text-lg); line-height: 0; transition: transform .18s }
.turn a[rel="prev"]:hover .chev { transform: translateX(-2px) }
.turn a[rel="next"]:hover .chev { transform: translateX(2px) }
.view-tabs { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: .75rem 0 0 }
.view-tabs a { font-size: var(--text-md); font-weight: 500; color: var(--graphite); --lined: 0;
               border-bottom: 1px solid transparent; padding-bottom: 1px }
.view-tabs a:hover, .view-tabs a[aria-current] { color: var(--ink) }
.view-tabs a[aria-current] { border-bottom-color: var(--ink) }
.view-crumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .45rem; margin: .75rem 0 0;
               font-size: var(--text-body) }
.view-crumbs b { font-weight: 500; color: var(--ink) }
.view-crumbs i { font-style: normal; color: var(--pencil) }
.summary { margin: .6rem 0 0; font-size: var(--text-lg); line-height: 1.5; color: var(--ink-soft); max-width: 80ch }
.summary b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums }
.tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem;
         margin: 0 0 .35rem }
.find { gap: .4rem; flex: 0 1 22rem; margin: 0 }
.find input[type="search"] { flex: 1; height: 2.3rem; padding: 0 .6rem 0 2rem; font-size: var(--text-md) }
.find-icon { left: .68rem }
.find button { flex: none; height: 2.3rem; padding: 0 .8rem; font: inherit; font-size: var(--text-md); font-weight: 500;
               color: var(--ink); background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 6px;
               cursor: pointer }
.find button:hover { border-color: var(--pencil); background: var(--rule-faint) }
.count { margin: 0 0 0 auto; font-size: var(--text-sm); color: var(--graphite); font-variant-numeric: tabular-nums;
         white-space: nowrap }
.ledger-scroll { overflow-x: auto; margin: 0 -.4rem }
.ledger { width: 100%; min-width: 30rem; border-collapse: collapse; table-layout: fixed; font-size: var(--text-body);
          font-variant-numeric: tabular-nums }
.ledger th, .ledger td { padding: .32rem .4rem; border-bottom: 1px solid var(--rule-faint); text-align: right;
                         white-space: nowrap; font-weight: 400; vertical-align: middle }
.ledger thead th { padding-top: .55rem; padding-bottom: .45rem; font-size: var(--text-sm); font-weight: 500;
                   color: var(--graphite); border-bottom-color: var(--rule) }
.ledger tbody tr:last-child > * { border-bottom: 0 }
.ledger .c-rank { width: 2.2rem; padding-right: .7rem; color: var(--graphite); font-size: var(--text-sm) }
.ledger .c-status { width: 4.4rem; text-align: left }
.ledger .c-label, .ledger .c-page { text-align: left; overflow: hidden; text-overflow: ellipsis }
.ledger .c-trend { width: 7.9rem; text-align: left }
.ledger .c-n, .ledger .c-loads { width: 5.6rem }
.ledger .c-share, .ledger .c-moved { width: 6.9rem }
.ledger td.c-n { font-weight: 500; color: var(--ink-soft) }
.ledger td.c-loads, .ledger td.c-page { color: var(--graphite) }
.ledger .c-status span, .ledger .drill, .ledger .plain { display: inline-flex; align-items: center; gap: 6px;
                                                         max-width: 100%; min-width: 0; vertical-align: middle; overflow: hidden }
.ledger .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0 }
.ledger tbody tr:has(.drill, .out):hover > * { background: var(--wash); --ground: var(--wash) }
.ledger .c-label:has(.out) { overflow: visible }
.ledger .with-out { display: flex; align-items: center; gap: 6px; min-width: 0 }
.ledger tbody tr:is(:hover, :focus-within) .out { opacity: 1 }
.ledger mark { background: var(--highlighter); color: var(--ink); border-radius: 2px; box-shadow: 0 0 0 1px var(--highlighter) }
.spark { display: block; height: 19px }
.spark .base { fill: var(--rule) }
.spark .b { fill: var(--pencil) }
.spark .now { fill: var(--rule-strong) }
.ledger tbody tr:is(:hover, :focus-within) .spark .b { fill: var(--bar) }
.ledger tbody tr:is(:hover, :focus-within) .spark .now { fill: var(--pencil) }
.sbar { position: relative; display: inline-block; vertical-align: middle; width: 2.9rem; height: 4px;
        margin-right: .5rem; border-radius: 2px; background: var(--rule-faint); overflow: hidden }
.sbar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--pencil); border-radius: 2px }
.ledger tbody tr:is(:hover, :focus-within) .sbar i { background: var(--ink) }
.pct { display: inline-block; min-width: 2.3rem; color: var(--graphite) }
.view-empty { margin: 0; padding: 1.1rem 0; font-size: var(--text-body); color: var(--graphite); border-top: 1px solid var(--rule) }
.view-empty a { color: var(--ink) }
.pages { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: .9rem 0 0;
         font-size: var(--text-md) }
.pages a { color: var(--ink); font-weight: 500; --lined: 0; padding: .3rem 0; border-radius: 2px }
.pages a:hover { --lined: 1 }
.pages .off { color: var(--paper-dim); padding: .3rem 0 }
.showing { margin: 0; color: var(--graphite); font-variant-numeric: tabular-nums; border-radius: 2px }
.showing:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px }
@media (max-width: 759.98px) {
  .ledger.deep .sbar { display: none }
  .ledger.deep .c-moved, .ledger.deep .c-share { width: 5rem }
}
@media (max-width: 639.98px) {
  .turn { flex: 1 1 100%; justify-content: space-between; margin-left: 0 }
  .turn a[rel="next"]:only-child { margin-left: auto }
  .find { flex: 1 1 100% }
  .find input[type="search"] { font-size: 16px }
  .count { margin-left: 0 }
  .ledger { min-width: 0 }
  .ledger .c-rank { width: 1.7rem; padding-right: .45rem }
  .ledger .c-status { width: 3.6rem }
  .ledger .c-n, .ledger .c-loads { width: 4.4rem }
  .ledger .c-share { width: 2.9rem }
  .ledger.slow .c-share { width: 4.4rem }
  .ledger.engaged .c-share { width: 5rem }
  .ledger.deep thead th { white-space: normal; vertical-align: bottom }
  .ledger.deep .c-moved, .ledger.deep .c-share { width: 3.6rem }
  .ledger.deep .c-trend { display: none }
  .ledger .sbar { display: none }
  .ledger .c-trend { width: 5.2rem }
  .ledger .c-trend .spark { width: 100% }
}
@media (max-width: 479.98px) {
  .ledger .c-trend, .ledger .c-loads { display: none }
  .ledger.deep .c-n { width: 3.8rem }
}
@media (prefers-reduced-motion: reduce) { .back-arrow, .turn .chev { transition: none } }

.account { max-width: 32rem }
.account.wide { max-width: 44rem }
.account.full { max-width: none }
.account.with-toc { max-width: none }
.account.with-toc > :not(.toc) { max-width: 44rem }
.account :is(h2, h3)[id] { scroll-margin-top: 1rem }
.account.full .notice, .account.full .lede, .account.full .form { max-width: 44rem }
.account h1 { margin: .25rem 0 .75rem }
.account .view-title { margin-top: 1.75rem }
.account .view-title ~ .section:first-of-type { margin-top: 1.35rem }
.account p { margin: 0 0 1rem }
.account p b { font-weight: 500; color: var(--ink) }
.account a { color: var(--ink) }
.account a:focus-visible, .account summary:focus-visible { border-radius: 2px }
.account code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em }
.lede { font-size: var(--text-lg); line-height: 1.55; color: var(--ink-soft) }
.aside { font-size: var(--text-md); line-height: 1.5; color: var(--graphite) }
.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; margin: 1.5rem 0 1.25rem }
.form label { font-size: var(--text-sm); font-weight: 500; color: var(--graphite) }
.form .form-title { margin: 0 0 .1rem }
.form .form-title label { font-size: var(--text-xl); font-weight: 500; color: var(--ink) }
.field { display: flex; flex-wrap: wrap; gap: .5rem }
.field input { flex: 1 1 14rem; height: 2.6rem; padding: 0 .75rem; font-size: var(--text-lg) }
.field select { flex: 1 1 14rem; height: 2.6rem; padding: 0 2.1rem 0 .7rem; font-size: var(--text-lg); cursor: pointer;
                background-image: linear-gradient(45deg, transparent 50%, var(--graphite) 50%),
                                  linear-gradient(135deg, var(--graphite) 50%, transparent 50%);
                background-position: calc(100% - 1.15rem) 1.15rem, calc(100% - .8rem) 1.15rem;
                background-size: 6px 6px, 6px 6px; background-repeat: no-repeat }
.choice { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem }
.form .check { flex: 1 1 14rem; display: flex; align-items: flex-start; gap: .6rem; padding: calc((2.6rem - 1.35em) / 2) 0;
               font-size: var(--text-lg); line-height: 1.35; font-weight: 400; color: var(--ink); cursor: pointer }
.check input { flex: none; width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--ink); cursor: pointer }
.form .check input { margin-top: calc((1.35 * var(--text-lg) - 1.1rem) / 2) }
.form .check.switch input { margin-top: calc((1.35 * var(--text-lg) - 1.2rem) / 2) }
.form .check .cost { display: inline-block }
.check input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px }
.check.switch input { position: relative; width: 2.1rem; height: 1.2rem; border-radius: 999px;
                      background: var(--pencil); -webkit-appearance: none; appearance: none;
                      transition: background .12s }
.check.switch input::before { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.2rem - 4px);
                              height: calc(1.2rem - 4px); border-radius: 50%; background: var(--paper);
                              transition: transform .18s }
.check.switch input:hover { background: var(--graphite) }
.check.switch input:checked { background: var(--ink) }
.check.switch input:checked:hover { background: var(--ink-soft) }
.check.switch input:checked::before { transform: translateX(.9rem) }
@media (prefers-reduced-motion: reduce) { .check.switch input, .check.switch input::before { transition: none } }
.button { height: 2.6rem; padding: 0 1.1rem; font-size: var(--text-md) }
.button.danger { color: var(--poor); background: var(--paper); border-color: var(--poor) }
.button.danger:hover { color: var(--paper); background: var(--poor); border-color: var(--poor) }
.button.danger:focus-visible { outline-color: var(--poor) }
.button.quiet { color: var(--ink); background: var(--paper); border-color: var(--rule-strong) }
.button.quiet:hover { background: var(--paper); border-color: var(--pencil) }
.account a.button { display: inline-flex; align-items: center; color: var(--paper); --lined: 0 }
.account .apps-add { margin-top: 1.25rem }
.form:has(+ .form) { margin-bottom: 0 }
.form + .form { margin-top: 1rem }
.form .form-error { margin: .1rem 0 0; font-size: var(--text-md); color: var(--poor) }
.form .form-error b { color: var(--poor) }
:is(.zone-find, .pick-find) input { padding-left: 2.25rem; background: var(--paper) no-repeat .8rem 50% / 15px 15px
  url("/img/ui/zone-find.svg") }
:is(.zone-find, .pick-find) input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 12px; height: 12px;
  margin-left: .5rem; cursor: pointer; background: no-repeat center / 12px 12px
  url("/img/ui/zone-clear.svg") }
.form .zone-none, .form .pick-none, .form .zone-here, .form .own { margin: 0; font-size: var(--text-md); color: var(--graphite) }
.form .zone-here, .form .own { margin-top: .1rem }
:is(.zone-here, .own) button { padding: 0; font: inherit; color: var(--ink); background-color: transparent; border: 0; cursor: pointer;
                               --lined: 1; --line-colour: var(--pencil) }
:is(.zone-here, .own) button:hover { --line-colour: currentColor }
:is(.zone-here, .own) button:focus-visible { border-radius: 2px }
.form .networks { margin: 0; padding: .25rem 0; list-style: none; background: var(--paper);
                  border: 1px solid var(--rule-strong); border-radius: 6px }
.networks li { display: block; margin: 0; padding: .4rem .75rem; border: 0; cursor: pointer }
.networks li:hover, .networks li[aria-selected="true"] { background: var(--wash) }
.networks li[aria-selected="true"] { box-shadow: inset 0 0 0 1px var(--ink) }
.networks .name, .networks .meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.networks .name { font-size: var(--text-md); color: var(--ink) }
.networks .meta { font-size: var(--text-sm); color: var(--graphite) }
.notice { box-sizing: border-box; margin: 0 0 2rem; padding: 1rem 1.1rem; background: var(--wash); border: 1px solid var(--highlighter);
          border-radius: 6px; --ground: var(--wash) }
.view-title + .notice { margin-top: 1.25rem }
.section + .notice { margin-bottom: 1rem }
.notice p { font-size: var(--text-body); line-height: 1.55; margin: 0 0 .75rem }
.notice > :last-child { margin-bottom: 0 }
.notice .snippet pre { background: var(--paper); border-color: var(--highlighter) }
.site-table { width: 100%; margin: 0 0 1rem; border-collapse: collapse; font-variant-numeric: tabular-nums }
.site-table th, .site-table td { padding: .8rem 0 .8rem 1.5rem; text-align: right; vertical-align: middle;
                                 font-weight: 400; white-space: nowrap }
.site-table :is(th, td):first-child { padding-left: 0 }
.site-table thead th { padding-top: 0; padding-bottom: .4rem; font-size: var(--text-md); color: var(--graphite);
                       vertical-align: bottom }
.site-table thead tr:last-child th { padding-bottom: .5rem; font-size: var(--text-xs) }
.site-table thead tr:last-child th, .site-table thead th[rowspan] { border-bottom: 1px solid var(--rule) }
.site-table thead [role="heading"] { display: block; color: var(--ink); line-height: 1.2 }
.site-table .c-span span { display: flex; align-items: center; gap: .5rem }
.site-table .c-span span::before { content: ""; flex: 1; height: 1px; background: var(--rule) }
.site-table tbody tr:not(:last-child) { border-bottom: 1px solid var(--rule) }
.site-table .c-site { width: 100%; max-width: 0; text-align: left }
.site-table .c-trend { text-align: left }
.site-table td.c-n { min-width: 4.4rem; font-size: var(--text-body); font-weight: 500; line-height: 1.15 }
.site-table .c-cog { width: 16px; padding-left: 2rem }
.site-table tr.group th { padding: 2.25rem 0 .55rem; text-align: left; white-space: normal; overflow-wrap: anywhere;
                          font-size: var(--text-xl); font-weight: 500; color: var(--ink) }
.site-table tr.group td { padding-top: 2.25rem; padding-bottom: .55rem }
.site-table tbody:first-of-type tr.group :is(th, td) { padding-top: 1.1rem }
.site-table tr.group td.c-n { color: var(--graphite) }
.site-table .spark { width: 111px; height: 26px }
.site-table tbody tr:is(:hover, :focus-within) .spark .b { fill: var(--bar) }
.site-table tbody tr:is(:hover, :focus-within) .spark .now { fill: var(--pencil) }
.site-link { display: flex; align-items: center; gap: .45rem; min-width: 0; color: var(--ink); --lined: 0;
             font-family: var(--serif); font-size: 1.2rem; font-weight: 500; letter-spacing: -.005em; border-radius: 3px }
.account .site-link { --lined: 0 }
.site-link img { width: 16px; height: 16px; margin-top: .2em }
.site-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.site-link:hover span { --lined: 1 }
@media (max-width: 559.98px) {
  .site-table .c-trend { display: none }
  .site-table th, .site-table td { padding-left: 1rem }
  .site-table td.c-n { min-width: 3.6rem }
  .site-table .c-cog { padding-left: 1.25rem }
  .site-link { font-size: 1.05rem }
}
.admin .ledger { min-width: 34rem }
.admin .ledger .c-who { width: 38%; text-align: left; overflow: hidden }
.admin .named { display: flex; align-items: center; gap: .4rem; min-width: 0 }
.admin .ledger .c-holds { text-align: left; width: 45% }
.admin .ledger .c-act { width: 4.5rem }
.admin .ledger .c-act a { color: var(--graphite) }
.admin .ledger .c-act a:hover { color: var(--poor) }
.admin .dim { display: block; font-size: var(--text-sm); color: var(--graphite);
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.admin .holds { margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--ink-soft) }
.admin .holds li { display: flex; justify-content: flex-start; align-items: center; gap: .4rem;
                   min-width: 0; margin: 0; padding: 0; border: 0 }
.admin .holds img { width: 14px; height: 14px }
.admin .holds.block { margin: .35rem 0 1.15rem }
.admin .none { color: var(--graphite) }
.account .claim { overflow-wrap: anywhere }
.account h2.part { margin: 1.75rem 0 .5rem; font-size: var(--text-xl); font-weight: 500; color: var(--ink) }
.account > .form-error { font-size: var(--text-md); color: var(--poor) }
.ledger.apps { min-width: 30rem }
.ledger.apps .c-app { width: 30%; text-align: left; overflow: hidden }
.ledger.apps .c-to { text-align: left; overflow: hidden; text-overflow: ellipsis; color: var(--ink-soft) }
.ledger.apps :is(.c-since, .c-ends) { width: 5.8rem; font-size: var(--text-sm); color: var(--graphite) }
.ledger.apps .c-act { width: 7rem }
.ledger.apps .t { display: block; overflow: hidden; text-overflow: ellipsis }
.ledger.apps .dim { display: block; font-size: var(--text-sm); color: var(--graphite);
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ledger.apps .button { height: 2rem; padding: 0 .75rem; font-size: var(--text-sm) }
.ledger.goals .c-app { width: auto }
.ledger.goals .c-act { width: 6rem }
.ledger.goals tr.hidden .t { color: var(--graphite) }
.ledger.beta .c-app { width: auto }
.ledger.beta :is(.c-name, .c-site) { width: 27%; text-align: left; overflow: hidden }
.ledger.beta .c-name { color: var(--ink-soft) }
.ledger.beta .c-site a { color: var(--ink-soft); --lined: 0 }
.ledger.beta .c-site a:hover .t { --lined: 1 }
.ledger.beta .c-act { width: 6rem }
.ledger.exclusions .c-app { width: auto }
.ledger.exclusions .c-act { width: 6rem }
.ledger.exclusions .t :is(img, .flag) { display: inline-block; vertical-align: -1px; margin-right: .45rem }
.ledger.search-rules .c-app { width: auto }
.ledger.search-rules .c-act { width: 6rem }
.ledger.tokens .c-app { width: auto }
.form fieldset.checks { display: grid; grid-template-columns: minmax(0, 1fr); gap: .1rem; min-width: 0; margin: 0; padding: 0;
                        border: 0 }
.form fieldset.checks legend { padding: 0; margin-bottom: .25rem; font-size: var(--text-sm); font-weight: 500;
                               color: var(--graphite) }
.form .picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); column-gap: 1rem;
               margin: 0 0 0 1.7rem }
.form .picks .check { padding: calc((2.1rem - 1.35em) / 2) 0; font-size: var(--text-md); overflow-wrap: anywhere }
.form .picks .check input { margin-top: calc((1.35 * var(--text-md) - 1.1rem) / 2) }
.form .picks .check[hidden] { display: none }
.form .picks :is(.pick-find, .pick-none) { grid-column: 1 / -1 }
.form .picks .pick-find { margin: .2rem 0 .3rem }
.form fieldset.scope:has(input[name="scope"][value="all"]:checked) .picks { display: none }
.account pre.command { margin: 0 0 1rem }
.account .snippet:not(:last-child) { margin: 0 0 1rem }
@media (max-width: 559.98px) {
  .ledger.apps { min-width: 0 }
  .ledger.apps .c-app { width: auto }
  .ledger.apps :is(.c-since, .c-to) { display: none }
  .admin .ledger.beta { min-width: 38rem }
}