@layer theme {
  html {
    --color: oklch(80% 2 220);
  }
 
  * {
    text-box-trim: both;
    text-box-edge: cap alphabetic;
  }
}
 
@layer component {
  div {
    margin-trim: block;
    padding: 2rlh;
 
    :is(article):has(&) {
      --rainbow-gradient: in oklch longer hue, red 0 0;
      
      padding-inline: max(1rem, (100% - 800px) / 2);
      background: linear-gradient(45deg var(--rainbow-gradient));
      container: div / inline-size;
    }
 
    :is(article) & {
      border: 2px solid color(display-p3 1 none 1);
      background: oklch(80% .37 220 / 25%);
 
      @container div (inline-size > 35rem) {
        font-size: calc(1rem * pow(1.25, 1));
      }
    }
 
    :is(aside) {
      container: aside / sticky;
      position: sticky;
      inset-block-start: 0;
      
      @container aside state(stuck) {
        & h2 {
          background: red;
        }
      }
    }
 
    :is(h2, h3) {
      inline-size: 17ch;
      text-wrap: balance;
    }
 
    > h2 {
      background: hsl(from var(--color) h s calc(l + 10%));
    }
 
    :not(article) & :nth-child(2 of .paragraph) {
      &:first-letter {
        initial-letter: 3;
        margin-inline-end: 1ch;
      }
    }
 
    & section {
      max-inline-size: 400px;
 
      > p {
        text-wrap: pretty;
      }
 
    }
  }
}

@layer theme {
  html {
    --color: oklch(80% 2 220);
  }
 
  * {
    text-box-trim: both;
    text-box-edge: cap alphabetic;
  }
}
 
@layer component {
  div {
    margin-trim: block;
    padding: 2rlh;
 
    :is(article):has(&) {
      --rainbow-gradient: in oklch longer hue, red 0 0;
      
      padding-inline: max(1rem, (100% - 800px) / 2);
      background: linear-gradient(45deg var(--rainbow-gradient));
      container: div / inline-size;
    }
 
    :is(article) & {
      border: 2px solid color(display-p3 1 none 1);
      background: oklch(80% .37 220 / 25%);
 
      @container div (inline-size > 35rem) {
        font-size: calc(1rem * pow(1.25, 1));
      }
    }
 
    :is(aside) {
      container: aside / sticky;
      position: sticky;
      inset-block-start: 0;
      
      @container aside state(stuck) {
        & h2 {
          background: red;
        }
      }
    }
 
    :is(h2, h3) {
      inline-size: 17ch;
      text-wrap: balance;
    }
 
    > h2 {
      background: hsl(from var(--color) h s calc(l + 10%));
    }
 
    :not(article) & :nth-child(2 of .paragraph) {
      &:first-letter {
        initial-letter: 3;
        margin-inline-end: 1ch;
      }
    }
 
    & section {
      max-inline-size: 400px;
 
      > p {
        text-wrap: pretty;
      }
 
    }
  }
}

p:not(#id) {
  color: green;
}
 
p.class {
  color: red;
}

<p class="class">text</p>
 
<p id="id">last text</p>

.grid {
  align-items: last baseline;
  grid-template-columns: subgrid;
}

.subgrid {
  display: grid;
  grid-template-rows:
    [system-status] 3.5rem
    [primary-nav] 3rem
    [primary-header] 4rem
    [main] auto
    [footer] 4rem
    [system-gestures] 2rem;
  grid-template-columns:
    [fullbleed-start] 1rem
    [main-start] auto
    [main-end] 1rem
    [fullbleed-end];
}

nav {
  grid-area: primary-nav / fullbleed;
  
  display: grid;
  grid-template-columns: subgrid;
}
 
nav > .content {
  grid-area: main;
}

artcle:has(> img) {}
 
p:not(article > *) { ... }
 
article > :is(.class, #id) { ... }
 
:where(#article) a { ... }

article:has(h2) { ... }
 
article:not(:has(h2)) img { ... }
 
article:has(> :last-child:nth-child(3)) { ... }
article:has(h2) { ... }
 
article:not(:has(h2)) img { ... }
 
article:has(> :last-child:nth-child(3)) { ... }
article:has(h2) { ... }
 
article:not(:has(h2)) img { ... }
 
article:has(> :last-child:nth-child(3)) { ... }
article:has(h2) { ... }
 
article:not(:has(h2)) img { ... }
 
article:has(> :last-child:nth-child(3)) { ... }

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

.most-hyped {
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
}

.element {
  background: oklch(80% .2 220);
}

article {
  padding: 2rlh;
  gap: 1rlh;
}

@property --colorPrimary {
  syntax: '<color>';
}

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
}

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

.element {
  animation: progress linear;
  animation-timeline: scroll(block root);
}

.element {
  animation: progress linear;
  animation-timeline: scroll();
}

.element {
  animation: reveal linear;
  animation-timeline: view();
  animation-range: cover 0% entry 100%;
}

section > * {
  animation:
    entry linear,
    exit linear;
  animation-timeline: view();
  animation-range: [...];
}

.box-1 {
  view-transition-name: box-1;
}
 
.box-2 {
  view-transition-name: box-2;
}

.box-1 {
  view-transition-name: box-1;
}
 
.box-2 {
  view-transition-name: box-2;
}

btn.addEventListener("click", () => {
  document.startViewTransition(_ => grid.classList.toggle("col-count"));
});

.box-1 {
  view-transition-name: box-1;
}
 
.box-2 {
  view-transition-name: box-2;
}

btn.addEventListener("click", () => {
  if (document.startViewTransition) {
    document.startViewTransition(_ => grid.classList.toggle("col-count"));
  } else {
    grid.classList.toggle("col-count");
  }
});

.box-1 {
  view-transition-name: box-1;
}
 
::view-transition-new(box-1) {
  animation: scale-in .5s both;
}
 
::view-transition-old(box-1) {
  animation: scale-in .5s both reverse;
}