div {
                flex-flow: if(100vw > 500px, row, column);
              }
            

              background: 
                if(
                  var(--raised) = on, linear-gradient(white, transparent)
                ),
                hsl(200 100% 50%)
              );
            

              --size: small;
              font-size: if(var(--size) = small, 2em)
                         if(var(--size) = medium, 3em)
                         if(var(--size) = large, 5em);
            

              .logical-viewport-units {
                inset: 10vi 25vb;
              }
            

              .more-like-em {
                border-radius: 2lh;
                padding-block: 2cap;
              }
            

              .more-like-rem {
                margin-block: 2rlh;
              }
            

              .houdini-masonry {
                display: layout(masonry);
              }
            

              .houdini-packery {
                display: layout(packery);
              }
            

              .card {...}

              .card__header {
                color: var(--text); 
              }
            

              @scope (.card) {
                header { 
                  color: var(--text); 
                }
              }
            

              @scope (.light-theme) {
                a { color: purple; }
              }

              @scope (.dark-theme) {
                a { color: plum; }
              }
            

              @scope (.media-block) to (.content) {
                img      { border-radius: 50%; }
                .content { padding: 1em; }
              }
            

              .container-to-be-queried {
                contain: layout inline-size;
              }
            

              @container (inline-size > 240px) {
                .item {
                  flex-direction: row;
                }
              }
            

              @container (inline-size <= 20ch) {
                img {
                  aspect-ratio: 1;
                }
              }
            

              section {
                @container (inline-size <= 60ch) {
                  & {
                    padding-inline: 1ch;
                  }
                }
              }
            

              p {
                leading-trim: both;
              }
            

              h1 { 
               text-edge: cap alphabetic;
               leading-trim: both;
              }
            

              .powered-gradient {
                --powdered-gradient-direction: to-top;
                --powdered-gradient-color: white;
                --powdered-gradient-size: 1;

                background: paint(powdered-gradient), #111;
              }
            

              .powered-gradient {
                background: 
                  paint(powdered-gradient, to-top, white, 1), 
                  #111212
                ;
              }
            

              @supports (animation-timeline: works) {
                ...
              }
            

              @scroll-timeline scroll-fade {
                time-range: 4s;
              }
            

              @keyframes fade-in {
                to {
                  opacity: 1;
                }
              }
            

              nav {
                opacity: 0;
                animation: fade-in 1s linear both;
                animation-timeline: scroll-fade;
              }
            

              <p 
                spellcheck 
                contenteditable
              ></p>
            

              ::spelling-error {
                text-decoration: wavy underline red;
              }
            

              ::grammar-error {
                text-decoration: wavy underline var(--neon-blue);
              }
            

              article {
                color: darkgray;

                & > a {
                  color: var(--link-color);
                }
              }
            

              code > pre {
                @media (hover) { 
                  &:hover {
                    color: hotpink;
                  }
                }
              }
            

              code > pre {
                @media (hover) { 
                  @nest &:hover {
                    color: hotpink;
                  }
                }
              }
            

              article {
                @nest section:focus-within > & {
                  color: hotpink;
                }
              }
            

              main {
                padding: var(--space-sm);

                @media (width >= 540px) { & { 
                  padding: var(--space-lg); 
                }}
              }
            

              @layer reset {
                * { box-sizing: border-box; }
                body { margin: 0; }
              }
              ...
              @layer reset { /* add more later */ }
            

              @import url(headings.css) layer(default);
              @import url(links.css) layer(default);
            

              @layer default;
              @layer theme;
              @layer components;

              @import url(theme.css) layer(theme);
            

              @layer default, theme, components;

              @import url(theme.css) layer(theme);
            

              @layer framework.theme {
                p { 
                  color: rebeccapurple; 
                }
              }
            

              @layer framework {
                @layer theme {
                  p { color: cyan; }
                }
              }
            

              main {
                display: grid;
                gap: env(fold-width);
                grid-template-columns: env(fold-left) 1fr;
              }
            

              @media (spanning: single-fold-vertical) {
                aside {
                  flex: 1 1 env(fold-left);
                }
              }
            

              .color-mix {
                --pink: color-mix(red, white);

                --brand: #0af; 
                --text1: color-mix(var(--brand) 25%, black);
                --text2: color-mix(var(--brand) 40%, black);
              }
            

              .color-contrast {
                color: color-contrast(
                  var(--bg) 
                  vs 
                  black, white
                );
              }
            

              --text-on-bg: color-contrast(
                var(--bg-blue-1) 
                vs 
                var(--text-subdued), 
                var(--text-light), 
                var(--text-lightest)
              );
            

              .color-adjust {
                --brand: #0af; 
                --darker: color-adjust(var(--brand) lightness -50%);
                --lighter: color-adjust(var(--brand) lightness +50%);
              }
            

              .relative-color {
                --color: #0af;
                --abs-change: lch(from var(--color) 75% c h);
                --rel-change: lch(from var(--color) l calc(c-20%) h);
              }
            

              .masonry {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                grid-template-rows: masonry;
              }
            

              .masonry-grid-flow {
                display: inline-grid;
                grid: masonry / repeat(3, 2ch);
                masonry-auto-flow: next;
              }
            

              .grid {
                display: inline-grid;
                direction: rtl;
                column-gap: 1ch;
                grid: repeat(4, 2em) / masonry;
              }
            

              @media (width <= 320px) {
                body {
                  padding-block: var(--sm-space);
                }
              }
            

              @custom-media --motionOK (prefers-reduced-motion: no-preference);

              @media (--motionOK) {
                .card {
                  transition: transform .2s ease;
                }
              }
            

              .card {
                @media (--motionOK) { & {
                  transition: transform .2s ease;
                }}
              }
            

              @media (1024px >= width >= 320px) {
                body {
                  padding-block: 1rem;
                }
              }
            

              #hex-with-alpha {
                color: #0f08;
                color: #00ff0088;
              }
            

              #functional-notation {
                color: hsl(0deg 0% 0%);
                color: hsl(2rad 50% 50% / 80%);
                color: rgb(0 0 0);
                color: rgb(255 255 255 / .25);
              }
            

              #lab-and-lch {
                --ux-gray: lch(50% 0 0);
                --rad-pink: lch(50% 200 230);
                --rad-pink: lab(150% 160 0);
                --pale-purple: lab(75% 50 -50);
              }
            

              #color-function {
                --rad-pink: color(display-p3 1 0 1);
                --rad-pink: color(lab 50% 150 -50);
                --rad-pink: color(srgb 100% 0% 50%); 
              }
            

              @media (dynamic-range: high) {
                .neon-pink {
                  --neon-glow: color(display-p3 1 0 1);
                }
              }
            

              @property --hue {
                initial-value: 0;
                inherits: false;
                syntax: '<number>';
              }
            

              @keyframes rainbow {
                to {
                  --hue: 360;
                }
              }
            

              @property --milliseconds {
                syntax: '<integer>';
                initial-value: 0;
                inherits: false;
              }
            

              .counter {
                counter-reset: ms var(--milliseconds);
                animation: count 1s steps(100) infinite;
              }

              @keyframes count { to {
                --milliseconds: 100;
              }}
            

              .box {
                width: 200px;
                aspect-ratio: 1;
              }
            

              img.square {
                aspect-ratio: 1;
                width: 100%;
                object-fit: contain;
              }
            

              .transition-it {
                aspect-ratio: 1/1;
                transition: aspect-ratio .5s ease;

                @media (orientation: landscape) { & {
                  aspect-ratio: 16/9;
                }}
              }
            

              li::marker {
                content: counter(list-item) "› "; 
                color: hotpink;
              }
            

              li::marker {
                content: url(/heart.svg);
                content: url(#heart);
                content: url("data:image/svg+xml;...");
              }
            

              .conic-1 {
                background: conic-gradient(
                  deeppink, 
                  rebeccapurple
                );
              }
            

              .conic-2 {
                background: conic-gradient(
                  deeppink, 
                  rebeccapurple, 
                  deeppink
                );
              }
            

              .conic-3 {
                background: conic-gradient(
                  at bottom left, 
                  deeppink, 
                  cyan
                );
              }
            

              .conic-4 {
                background: conic-gradient(
                  from 90deg at 50% 0%, 
                  #111, 50%, #222, #111
                );
              }
            

              article {
                contain: content;
              }
            

              article {
                contain: layout;
                contain: size;
                contain: paint;
              }
            

              img {
                width: 100px;
                aspect-ratio: 1/1;
                contain: size;
              }
            

              button:focus-visible {
                outline-offset: 5px;
              }
            

              article:focus-within {
                box-shadow: var(--depth-short);
              }
            

              p {
                max-inline-size: 40ch;
              }
            

              small {
                padding-inline: 1ch;
                text-align: end;
              }
            

              article {
                margin-block: 1ch;
              }
            

              button {
                border-inline: 1px solid currentColor;
              }
            

              :is(a,h1,h2,h3)::first-letter {
                text-transform: uppercase;
              }
            

              :where(#target, p) {
                color: red;
              }
            

              button:is(:focus,:active,.active) {
                border-color: var(--brand-focus);
              }
            

              @media (prefers-reduced-data: reduce) {
                header {
                  background-image: url(/grunge.avif);
                }
              }
            

              @media (prefers-reduced-data: no-preference) {
                @font-face {
                  font-family: 'Radness';
                  src: url(megafile.woff2);
                }
              }
            

              ::cue {
                color: white;
                background-color: hsl(0 0% 0% / 90%);
              }
            

              ::cue(b) {
                background: var(--brand);
                color: var(--text-on-brand);
                font-weight: var(--brand-bold);
              }