@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { color-scheme: light; scroll-padding-block-start: 6rem; }
  body.iemoc { margin: 0; background: var(--im-page); color: var(--im-text); font-family: var(--im-font); font-size: var(--im-body-size); line-height: var(--im-body-leading); }
  .iemoc :where(h1,h2,h3,h4,p,ul,ol,figure) { margin-block-start: 0; }
  .iemoc :where(h1,h2,h3,h4) { color: var(--im-text); font-weight: 700; line-height: 1.2; text-wrap: balance; overflow-wrap: anywhere; }
  .iemoc h1 { font-size: var(--im-h1); letter-spacing: -.025em; }
  .iemoc h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); letter-spacing: -.02em; }
  .iemoc h3 { font-size: 1.25rem; }
  .iemoc :where(p,li,dd,td,th,a,button,label) { overflow-wrap: anywhere; }
  .iemoc a { color: var(--im-accent); text-underline-offset: .2em; }
  .iemoc a:hover { text-decoration-thickness: .12em; }
  .iemoc :where(button,input,select,textarea) { font: inherit; }
  .iemoc button { cursor: pointer; }
  .iemoc :where(button,input,select,textarea):disabled { cursor: not-allowed; }
  .iemoc :where(img,svg,video) { max-inline-size: 100%; }
  .iemoc img { block-size: auto; }
  .iemoc :where(button,a,input,select,textarea,summary,[tabindex]):focus-visible { outline: 3px solid var(--im-focus); outline-offset: 3px; box-shadow: 0 0 0 2px var(--im-surface); }
  .iemoc :where(input,textarea,select) { min-inline-size: 0; }
  .iemoc :where(main,section,article,aside,form,fieldset) { min-inline-size: 0; }
  .iemoc [hidden] { display: none !important; }
  .iemoc ::selection { color: var(--im-text); background: var(--im-highlight); }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .iemoc *, .iemoc *::before, .iemoc *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  }
}
