/*
 * The copy of the old site at / (components/current/frame.tsx).
 * Its stylesheets were written for the browser's own defaults, and the
 * root layout loads Tailwind, whose reset (preflight) zeroes margins,
 * unstyles lists, blocks images and so on. Inside .legacy, put every
 * property that reset touches back to the browser's default ("revert"),
 * at zero specificity, first in the old site's layer: any rule of the old
 * site still wins, as it did on the old site.
 */
@layer components.legacy {
  :where(.legacy, .legacy *, .legacy ::before, .legacy ::after) {
    margin: revert;
    padding: revert;
    border: revert;
  }
  :where(.legacy) :where(h1, h2, h3, h4, h5, h6) {
    font-size: revert;
    font-weight: revert;
  }
  :where(.legacy) :where(a) {
    color: revert;
    text-decoration: revert;
  }
  :where(.legacy) :where(ol, ul, menu) {
    list-style: revert;
  }
  :where(.legacy)
    :where(img, svg, video, canvas, audio, iframe, embed, object) {
    display: revert;
    vertical-align: revert;
  }
  :where(.legacy) :where(img, video) {
    max-width: revert;
    height: revert;
  }
  :where(.legacy) :where(button, input, select, optgroup, textarea) {
    font: revert;
    font-feature-settings: revert;
    font-variation-settings: revert;
    letter-spacing: revert;
    color: revert;
    border-radius: revert;
    background-color: revert;
    opacity: revert;
  }
  :where(.legacy) :where(hr) {
    height: revert;
    color: revert;
    border-top-width: revert;
  }
  :where(.legacy) :where(table) {
    text-indent: revert;
    border-color: revert;
    border-collapse: revert;
  }
  :where(.legacy) :where(textarea) {
    resize: revert;
  }
  :where(.legacy) ::placeholder {
    opacity: revert;
    color: revert;
  }
  :where(html) {
    line-height: revert;
    font-family: revert;
    tab-size: revert;
    -webkit-tap-highlight-color: revert;
  }
}