<ul class="tv-webcore-icons">
  <li>
    <a class="tv-webcore-icon" href="#">
      <svg viewBox="0 0 16 16" aria-hidden="true">
        <path class="tv-webcore-icon-paper" d="M3.5 1.5h6l3 3v10h-9z" />
        <path class="tv-webcore-icon-pink" d="M9.5 1.5l3 3h-3z" />
        <path class="tv-webcore-icon-lilac" d="M5 12.5l2.5-3.5 1.5 2 1-1 1.5 2.5z" />
        <rect class="tv-webcore-icon-pink" x="5" y="6" width="2" height="2" />
        <path class="tv-webcore-icon-line" d="M3.5 1.5h6l3 3v10h-9zM9.5 1.5v3h3" />
      </svg>
      <span class="tv-webcore-icon-label">image.info</span>
    </a>
  </li>
  <li>
    <a class="tv-webcore-icon" href="#">
      <svg viewBox="0 0 16 16" aria-hidden="true">
        <path class="tv-webcore-icon-lilac" d="M1.5 3.5h5l1.5 1.5h6.5v9h-13z" />
        <path class="tv-webcore-icon-paper" d="M3 6h10v2H3z" />
        <path class="tv-webcore-icon-pink" d="M1.5 7.5h13v6h-13z" />
        <path class="tv-webcore-icon-line" d="M1.5 3.5h5l1.5 1.5h6.5v9h-13zM1.5 7.5h13" />
      </svg>
      <span class="tv-webcore-icon-label">folder</span>
    </a>
  </li>
  <li>
    <a class="tv-webcore-icon" href="#">
      <svg viewBox="0 0 16 16" aria-hidden="true">
        <path class="tv-webcore-icon-paper" d="M4.5 3.5h9v11h-9z" />
        <path class="tv-webcore-icon-navy" d="M2.5 1.5h9v11h-9z" />
        <rect class="tv-webcore-icon-pink" x="4" y="4" width="6" height="2" />
        <path class="tv-webcore-icon-line" d="M2.5 1.5h9v11h-9zM11.5 3.5h2v11h-9v-2" />
      </svg>
      <span class="tv-webcore-icon-label">text.info</span>
    </a>
  </li>
  <li>
    <a class="tv-webcore-icon" href="#">
      <svg viewBox="0 0 16 16" aria-hidden="true">
        <path class="tv-webcore-icon-paper" d="M1.5 2.5h13v11h-13z" />
        <path class="tv-webcore-icon-violet" d="M1.5 2.5h13v3h-13z" />
        <rect class="tv-webcore-icon-paper" x="11" y="3" width="2" height="2" />
        <path class="tv-webcore-icon-lilac" d="M3 7h6v1H3zM3 9h8v1H3zM3 11h4v1H3z" />
        <path class="tv-webcore-icon-line" d="M1.5 2.5h13v11h-13zM1.5 5.5h13" />
      </svg>
      <span class="tv-webcore-icon-label">prgrm.py</span>
    </a>
  </li>
</ul>

/* Pixel desktop icons on a lavender desk. Each icon is a 16-unit grid drawn at 4x for crisp edges. */
.tv-webcore-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: 14px 10px;
  box-sizing: border-box;
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
  padding: 18px 14px;
  list-style: none;
  background-color: color-mix(in srgb, var(--tv-webcore-lilac, #a49bf3) 22%, var(--tv-webcore-paper, #ffffff));
  background-image: radial-gradient(color-mix(in srgb, var(--tv-webcore-lilac, #a49bf3) 45%, transparent) 1px, transparent 1.3px);
  background-size: 8px 8px;
  font-family: "Lucida Console", "Courier New", ui-monospace, monospace;
}

.tv-webcore-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  color: var(--tv-webcore-navy, #2c2b9f);
  text-decoration: none;
}

/* A one-pixel pink and mint offset, like a misaligned CRT. */
.tv-webcore-icon svg {
  width: 64px;
  height: 64px;
  shape-rendering: crispEdges;
  filter: drop-shadow(3px 0 0 color-mix(in srgb, var(--tv-webcore-pink, #f7b5e4) 85%, transparent)) drop-shadow(-2px 0 0 #8fe3c8);
}

.tv-webcore-icon-label {
  max-width: 100%;
  padding: 1px 8px;
  overflow: hidden;
  background: var(--tv-webcore-paper, #ffffff);
  font-size: 13px;
  letter-spacing: 0.03em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tv-webcore-icon:hover .tv-webcore-icon-label,
.tv-webcore-icon:focus-visible .tv-webcore-icon-label {
  background: var(--tv-webcore-navy, #2c2b9f);
  color: var(--tv-webcore-paper, #ffffff);
}

.tv-webcore-icon:focus-visible {
  outline: 1px dotted var(--tv-webcore-navy, #2c2b9f);
  outline-offset: 2px;
}

.tv-webcore-icon-line {
  fill: none;
  stroke: var(--tv-webcore-navy, #2c2b9f);
  stroke-width: 1;
}

.tv-webcore-icon-paper { fill: var(--tv-webcore-paper, #ffffff); }
.tv-webcore-icon-pink { fill: var(--tv-webcore-pink, #f7b5e4); }
.tv-webcore-icon-lilac { fill: var(--tv-webcore-lilac, #a49bf3); }
.tv-webcore-icon-violet { fill: var(--tv-webcore-violet, #a445dd); }
.tv-webcore-icon-navy { fill: var(--tv-webcore-navy, #2c2b9f); }

.tv-webcore-icons--clean .tv-webcore-icon svg {
  filter: none;
}