The future of CSS
is already here.

.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 380px) {
  .card {
    display: flex;
    gap: 1rem;
  }
  .card__image {
    width: 110px;
    flex-shrink: 0;
  }
}

@container card (max-width: 379px) {
  .card {
    display: block;
  }
  .card__image {
    width: 100%;
    height: 120px;
  }
}

/* Declare order — last wins */
@layer base, components, utilities;

@layer base {
  .button {
    background: gray;
    padding: .5rem 1rem;
    color: white;
  }
}

@layer components {
  .button {
    background: blue;
    border-radius: .5rem;
  }
}

@layer utilities {
  /* Wins — even at low specificity */
  .button-hot {
    background: hotpink;
  }
}

/* Blend two colors */
.mixed {
  background: color-mix(in oklch, blue 40%, white);
}

/* Relative color syntax */
:root { --brand: oklch(55% .22 264); }
.lighter {
  background: oklch(from var(--brand) calc(l + .2) c h);
}

/* Wide-gamut OKLCH palette */
:root {
  --primary:    oklch(55% .22 264);
  --primary-lg: oklch(70% .22 264);
  --primary-dk: oklch(35% .22 264);
}

/* Display-P3 vivid colors */
.vivid { color: color(display-p3 0 0.5 1); }

.nav {
  display: flex;
  gap: 1rem;
  background: #0f172a;
  padding: .75rem 1rem;
  border-radius: .75rem;

  & a {
    color: #94a3b8;
    text-decoration: none;
    transition: color .2s;

    &:hover { color: #818cf8; }

    &.active {
      color: white;
      font-weight: 600;
    }
  }

  /* Responsive — nested media query */
  @media (max-width: 600px) {
    flex-direction: column;
  }
}

/* Rules apply only inside .card */
@scope (.card) {
  p {
    color: #60a5fa;
    font-size: .875rem;
  }
  h3 { color: white; font-weight: 700; }
}

/* Scope with a lower boundary:
   stops before entering .child-component */
@scope (.card) to (.child-component) {
  a {
    color: #818cf8;
    text-decoration: underline;
  }
}

.anchor-btn {
  anchor-name: --my-btn;
}

.tooltip {
  position: absolute;
  position-anchor: --my-btn;

  top: anchor(top);
  left: anchor(center);
  translate: -50% calc(-100% - 8px);

  background: #1e293b;
  color: white;
  padding: .25rem .75rem;
  border-radius: .5rem;
  font-size: .75rem;
  white-space: nowrap;
}

::view-transition-old(root) {
  animation: 300ms ease-out slide-out;
}
::view-transition-new(root) {
  animation: 300ms ease-in slide-in;
}

@keyframes slide-out {
  to { opacity: 0; transform: translateY(-16px); }
}
@keyframes slide-in {
  from { opacity: 0; transform: translateY(16px); }
}

/* Per-element named transitions */
.hero { view-transition-name: hero; }

/* Style a card that contains an image */
.card:has(img) {
  grid-template-rows: 200px 1fr;
}

/* Strike through li when checkbox checked */
li:has(input[type="checkbox"]:checked) {
  text-decoration: line-through;
  opacity: .5;
}

/* Float-label pattern — no JS */
.field:has(input:not(:placeholder-shown)) label {
  color: #818cf8;
  transform: translateY(-1.5rem) scale(.85);
}

/* Dark sibling that follows a .featured card */
.card:has(+ .card.featured) {
  filter: brightness(.8);
}

/* Reading progress bar */
#progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px; background: #5b8dee;
  transform-origin: left;
  animation: scaleX linear;
  animation-timeline: scroll(root block);
}

@keyframes scaleX {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Fade in as element enters view */
.reveal {
  animation: fade-in linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 40%;
}

@keyframes fade-in {
  from { opacity: 0; translate: 0 30px; }
  to   { opacity: 1; translate: 0 0; }
}

@property --gradient-angle {
  syntax: '';
  initial-value: 0deg;
  inherits: false;
}

.spinning-gradient {
  background: conic-gradient(
    from var(--gradient-angle),
    #5b8dee, #8b5cf6,
    #ec4899, #5b8dee
  );
  animation: spin 3s linear infinite;
}

@keyframes spin {
  to { --gradient-angle: 360deg; }
}

/* Typed integer counter */
@property --counter {
  syntax: '';
  initial-value: 0;
  inherits: false;
}
.count { animation: count-up 2s ease-out; }
@keyframes count-up { to { --counter: 100; } }

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 1rem;
}

.card {
  display: grid;
  grid-row: span 3;
  /* Inherit parent row tracks */
  grid-template-rows: subgrid;
}

/* Inner elements now align across cards */
.card__title  { grid-row: 1; }
.card__body   { grid-row: 2; }
.card__footer { grid-row: 3; align-self: end; }

/* Fluid typography */
.fluid { font-size: clamp(1rem, 2.5vw + .5rem, 2rem); }

/* Snap to 4px grid */
.snapped {
  width: round(nearest, 37px, 4px); /* → 36px */
}

/* Circular layout — no JS */
.orbit-item {
  --angle: 45deg;
  --r: 80px;
  translate:
    calc(cos(var(--angle)) * var(--r))
    calc(sin(var(--angle)) * var(--r));
}

/* Fluid columns without media queries */
.auto-grid {
  grid-template-columns:
    repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}

/* pow() and sqrt() */
.golden { width: calc(pow(1.618, 3) * 1rem); }
.diagonal { height: calc(sqrt(pow(3, 2) + pow(4, 2)) * 20px); }

/* Physical → Logical mapping:
   margin-left  → margin-inline-start
   margin-right → margin-inline-end
   margin-top   → margin-block-start
   width        → inline-size
   height       → block-size
*/

.card {
  margin-inline: auto;       /* centered */
  padding-block: 1.5rem;
  padding-inline: 1rem;
  border-inline-start: 3px solid #5b8dee;
  max-inline-size: 600px;
}

.scrollable {
  block-size: 200px;
  overflow-block: auto;      /* = overflow-y */
}

/* Works identically in RTL */
[dir="rtl"] .card {
  /* border-inline-start auto-flips to right */
}

/* Animate dialog entry — zero JS */
dialog {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity .3s ease,
    translate .3s ease,
    display .3s ease allow-discrete;

  @starting-style {
    opacity: 0;
    translate: 0 -20px;
  }
}

dialog[open] { display: block; }

/* Toast notification */
.toast {
  opacity: 1;
  transform: translateX(0);
  transition: opacity .4s, transform .4s,
    display .4s allow-discrete;

  @starting-style {
    opacity: 0;
    transform: translateX(100%);
  }
}

.toast.hidden {
  display: none;
  opacity: 0;
  transform: translateX(100%);
}

/* Opt in once at the root */
:root {
  interpolate-size: allow-keywords;
}

/* Accordion: animate to height: auto */
.accordion-body {
  height: 0;
  overflow: hidden;
  transition: height .4s ease;
}

.accordion-body.open {
  height: auto; /* now animatable! */
}

/* Any intrinsic keyword works */
.chip {
  width: fit-content;
  transition: width .3s ease;
}

.chip:hover {
  width: max-content;
}

/* Details element native accordion */
details {
  height: 2rem;
  overflow: hidden;
  transition: height .4s ease;

  &[open] { height: auto; }
}

/* balance: even line lengths in headings */
h1, h2, h3 {
  text-wrap: balance;
  /* Limit: ~6 lines (Chromium), 10 lines (Firefox) */
}

/* pretty: prevent orphans in body text */
p, .prose {
  text-wrap: pretty;
}

/* Shorthand */
.hero-title {
  text-wrap: balance;
  /* Previously required JS + ResizeObserver! */
}

/* text-wrap is now a shorthand for: */
.full-control {
  text-wrap-mode: wrap;     /* wrap | nowrap */
  text-wrap-style: balance; /* auto | balance | pretty | stable */
}