@font-face {
        font-family: Whitney;
        src: url("./fonts/whitneylight.otf") format("opentype");
        font-style: normal;
        font-weight: 300;
        font-display: swap;
      }

      @font-face {
        font-family: Whitney;
        src: url("./fonts/whitneybook.otf") format("opentype");
        font-style: normal;
        font-weight: 400;
        font-display: swap;
      }

      @font-face {
        font-family: Whitney;
        src: url("./fonts/whitneymedium.otf") format("opentype");
        font-style: normal;
        font-weight: 500;
        font-display: swap;
      }

      @font-face {
        font-family: Whitney;
        src: url("./fonts/whitneysemibold.otf") format("opentype");
        font-style: normal;
        font-weight: 600;
        font-display: swap;
      }

      @font-face {
        font-family: Whitney;
        src: url("./fonts/whitneybold.otf") format("opentype");
        font-style: normal;
        font-weight: 700;
        font-display: swap;
      }

      @font-face {
        font-family: "Ginto Nord";
        src: url("./fonts/ABCGintoNord-Ultra-Trial-BF651b7b783d44c.otf")
          format("opentype");
        font-style: normal;
        font-weight: 900;
        font-display: swap;
      }

      @font-face {
        font-family: "Ginto Nord";
        src: url("./fonts/ABCGintoNord-Black-Trial-BF651b7b7719b0f.otf")
          format("opentype");
        font-style: normal;
        font-weight: 900;
        font-display: swap;
      }

      @font-face {
        font-family: "Ginto Nord";
        src: url("./fonts/ABCGintoNord-Light-Trial-BF651b7b774e227.otf")
          format("opentype");
        font-style: normal;
        font-weight: 300;
        font-display: swap;
      }

      :root {
        --dc-base-font: Whitney, sans-serif;
      }

      body {
        background-color: #ffffff;
        background-image: url("./bg.png");
        background-repeat: repeat;
        color: var(--dc-color);
        font-family: Whitney, sans-serif;
        margin: 0;
        min-block-size: 100vh;
      }

      main {
        box-sizing: border-box;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        min-block-size: 100vh;
        padding: 1.5rem;
      }

      .page-header {
        justify-self: center;
        padding-block: 1rem 2rem;
        text-align: center;
      }

      .page-title {
        font-family: "Ginto Nord", Whitney, sans-serif;
        font-size: clamp(2.5rem, 7vw, 4rem);
        letter-spacing: -0.06em;
        line-height: 1;
        margin: 0;
      }

      .page-title span:first-child {
        color: #5865f2;
        font-weight: 900;
      }

      .page-title span:last-child {
        color: #7289da;
        font-weight: 300;
      }

      .page-subtitle {
        color: var(--dc-muted);
        font-size: 1rem;
        margin: 0.75rem 0 0;
      }

      .instance-list {
        align-self: center;
        display: grid;
        gap: 1rem;
        inline-size: min(100%, 42rem);
        justify-self: center;
        list-style: none;
        margin: 0;
        padding: 0;
      }

      footer {
        color: var(--dc-muted);
        font-size: 0.8rem;
        justify-self: center;
        padding-block-start: 1.5rem;
        text-align: center;
      }

      .instance-card {
        align-items: center;
        box-sizing: border-box;
        display: grid;
        gap: 1rem;
        grid-template-columns: 3rem minmax(0, 1fr) auto;
        inline-size: 100%;
        max-inline-size: none;
        min-block-size: 7rem;
        padding: 1rem;
      }

      .instance-avatar {
        align-items: center;
        background: var(--dc-bg-tertiary);
        border-radius: 50%;
        color: var(--dc-header-primary);
        display: flex;
        font-size: 0.875rem;
        font-weight: 600;
        inline-size: 3rem;
        justify-content: center;
        block-size: 3rem;
        overflow: hidden;
        position: relative;
      }

      .instance-avatar.has-icon {
        color: transparent;
      }

      .instance-avatar img {
        block-size: 100%;
        inset: 0;
        inline-size: 100%;
        object-fit: cover;
        position: absolute;
      }

      .instance-info {
        min-inline-size: 0;
      }

      .instance-name {
        align-items: center;
        color: var(--dc-header-primary);
        display: flex;
        flex-wrap: wrap;
        font-weight: 600;
        gap: 0.5rem;
        margin-block-end: 0.5rem;
      }

      .verified-badge {
        block-size: 1rem;
        flex: none;
        inline-size: 1rem;
      }

      .verified-badge-wrap {
        display: inline-flex;
        position: relative;
      }

      .verified-tooltip {
        background: #18191c;
        border: 1px solid #292b2f;
        border-radius: 0.5rem;
        box-shadow: 0 0.25rem 0.75rem rgb(0 0 0 / 35%);
        color: #f2f3f5;
        display: grid;
        gap: 0.125rem;
        inset-block-end: calc(100% + 0.5rem);
        inset-inline-start: 50%;
        max-inline-size: min(22rem, calc(100vw - 3rem));
        opacity: 0;
        padding: 0.5rem 0.75rem;
        pointer-events: none;
        position: absolute;
        transform: translate(-50%, 0.25rem);
        transition: opacity 120ms ease, transform 120ms ease;
        visibility: hidden;
        white-space: normal;
        inline-size: max-content;
        z-index: 1;
      }

      .verified-tooltip::after {
        border: 0.375rem solid transparent;
        border-block-start-color: #18191c;
        content: "";
        inset-block-start: 100%;
        inset-inline-start: 50%;
        position: absolute;
        transform: translateX(-50%);
      }

      .verified-tooltip-title {
        font-size: 0.8125rem;
        font-weight: 600;
        line-height: 1.125rem;
      }

      .verified-tooltip > span:last-child {
        color: #b5bac1;
        font-size: 0.75rem;
        font-weight: 400;
        line-height: 1rem;
      }

      .verified-badge-wrap:hover .verified-tooltip,
      .verified-badge-wrap:focus-visible .verified-tooltip {
        opacity: 1;
        transform: translate(-50%, 0);
        visibility: visible;
      }

      .verified-badge-wrap:focus-visible {
        outline: 2px solid var(--dc-focus-ring-color);
        outline-offset: 2px;
      }

      .instance-url {
        overflow-wrap: anywhere;
      }

      .instance-action {
        align-items: center;
        display: inline-flex;
        gap: 0.375rem;
        white-space: nowrap;
      }

      .instance-action::after {
        content: "arrow_insert";
        direction: ltr;
        display: inline-block;
        font-family: "Material Symbols Outlined";
        font-size: 1rem;
        font-weight: 400;
        line-height: 1;
        transform: scaleX(-1);
      }

      .status {
        --dc-tag-bg: var(--dc-interactive-muted);
      }

      .status[data-state="up"] {
        --dc-tag-bg: #248046;
      }

      .status[data-state="down"] {
        --dc-tag-bg: #da373c;
      }

      @media (max-width: 32rem) {
        main {
          padding: 1rem;
        }

        .page-header {
          padding-block: 0.5rem 1.5rem;
        }

        .instance-card {
          align-items: start;
          gap: 0.75rem;
          grid-template-columns: 2.5rem minmax(0, 1fr);
        }

        .instance-avatar {
          inline-size: 2.5rem;
          block-size: 2.5rem;
        }

        .instance-action {
          grid-column: 2;
          justify-self: start;
        }
      }