The CSS is the easy half.

<div class="dial">
  <i class="tick"></i> <!-- 41 of them -->
  <input type="range" min="0" max="100">
</div>

@property --v {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.tick {
  position: absolute; left: 50%; top: 50%;
  offset-position: 50% 50%;
  --a: calc(-135deg + var(--i) * 6.75deg);
  offset-path: ray(var(--a) closest-side);
  offset-distance: 94%;
  offset-rotate: auto;
  /* dim until the value reaches this tick */
  opacity: clamp(.14, (var(--v) * .4 - var(--i)
    + 1) * 4, 1);
}

<html> <!-- the scroll container, not body -->

html { scrollbar-gutter: stable; }

/* symmetrical, so centred content stays centred */
.pane { scrollbar-gutter: stable both-edges; }

<section class="sheet"></section>

.sheet {
  min-height: 100vh;   /* older engines */
  min-height: 100svh;  /* never under the bar */
}

<div hidden="until-found">
  Findable, and still collapsed.
</div>

/* do not undo the UA rule that makes it work */
.panel { content-visibility: hidden; }

<button command="show-modal"
        commandfor="box">Open</button>

<dialog id="box">
  <button command="close"
          commandfor="box">Close</button>
</dialog>

dialog::backdrop { background: #0b0e14b8; }

<select>
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option>Draft</option>
</select>

/* both, or the list keeps the native look */
select, select::picker(select) {
  appearance: base-select;
}

<span data-pct="72%"></span>

.bar {
  /* typed, with a fallback if it is absent */
  width: attr(data-pct type(<percentage>), 4%);
}

<ul><li></li><li></li></ul>

li {
  animation: slide-in .5s both;
  /* one rule, any number of items */
  animation-delay:
    calc(sibling-index() * 140ms);
}

<div><h4></h4><p></p><b></b></div>

.cards {
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.cards .tier {
  display: grid;
  grid-row: span 3;          /* or it owns one */
  grid-template-rows: subgrid;
}

<div class="head"><span>Ledger</span></div>

.head {
  position: sticky; top: 0;
  container-type: scroll-state;
}
/* the child reads the container's state */
@container scroll-state(stuck: top) {
  .head span { color: var(--content); }
}

/* only when the main pointer can hover */
@media (hover: hover) and (pointer: fine) {
  .tile:hover { translate: 0 -3px; }
}
/* keyboards get it everywhere */
.tile:focus-visible { translate: 0 -3px; }

/* Firefox: a real pseudo-element */
input::-moz-range-progress {
  background: var(--fill);
}
/* Chromium, Safari: a clipped shadow */
input { overflow: hidden; }
input::-webkit-slider-thumb {
  /* 7px is half the thumb */
  box-shadow: calc(-100vw - 7px) 0 0 100vw
    var(--fill);
}

ol {
  list-style: none;
  /* a fresh counter per scope:
     nesting is what makes the
     2.1 form possible at all */
  counter-reset: sec;
}
li::before {
  counter-increment: sec;
  content: counters(sec, ".") " ";
}

a {
  /* shorthand first: it resets
     the thickness set before it */
  text-decoration: underline;
  text-decoration-thickness: .09em;
  text-underline-offset: .24em;
  text-decoration-color:
    color-mix(in srgb,
      currentColor 45%, transparent);
}

h1 {
  font-size: 28px;
  /* the rem term keeps browser
     zoom working: pure vw type
     fails the 200% test */
  font-size: clamp(
    1.4rem, 1rem + 2.5vw, 2.6rem);
}

.panel { transform: translateX(0); }

.panel .toolbar {
  /* pinned to .panel now,
     not to the viewport */
  position: fixed;
  bottom: 0;
}

/* the top layer — dialog,
   popover — ignores ancestor
   transforms altogether */

/* clip the child … */
.star { clip-path: polygon(…); }

/* … filter the parent: on the
   same element the clip cuts
   the shadow off too */
.star-wrap {
  filter:
    drop-shadow(0 7px 6px #0009);
}

.comment {
  /* old engines keep the first,
     new ones take the second */
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}

/* not this: made for CJK, it
   breaks prose mid-word too */
.comment { word-break: break-all; }

.filename {
  white-space: nowrap;
  text-overflow: ellipsis;
  /* the working half: clips, and
     in a flex row also zeroes the
     min-width that blocks shrink */
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  /* a frame, not none: end states
     and animationend still land */
  *, *::before, *::after {
    animation-duration:
      .01ms !important;
    animation-iteration-count:
      1 !important;
    transition-duration:
      .01ms !important;
  }
}

.page {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "head head"
    "side main"
    "foot foot";
}
header { grid-area: head; }

@media (width < 640px) {
  /* restate all of it: the map
     replaces, it never merges */
  .page {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head" "main" "side" "foot";
  }
}

.card {
  /* offset and blur double each
     step, alpha stays put */
  box-shadow:
    0 1px  1px rgb(9 14 24 / .07),
    0 2px  3px rgb(9 14 24 / .07),
    0 5px  8px rgb(9 14 24 / .07),
    0 12px 20px rgb(9 14 24 / .07);
  /* the edge high contrast keeps */
  border: 1px solid transparent;
}

:root { --brand: #6fa8dc; }

.tag {
  /* plain first, derived second */
  background: #6fa8dc;
  background: oklch(
    from var(--brand) calc(l - .17) c h);
}

/* multiply chroma, never add:
   safe for tokens near the edge */
background: oklch(
  from var(--brand) l calc(c / 4) h);

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  /* or readers spell the label
     out one word per line */
  white-space: nowrap;
}

<!-- first focusable thing -->
<a class="skip" href="#main">
  Skip to content</a>
…
<!-- id scrolls, tabindex moves
     the actual focus -->
<main id="main" tabindex="-1">

.skip {
  position: absolute;
  translate: 0 -200%;
}
.skip:focus { translate: 0 0; }

.btn:hover {
  /* plain first: an engine that drops
     the mix keeps this one */
  background: #7fb4e2;
  background: color-mix(
    in oklch, #6fa8dc 75%, #f6b26b);
}

/* 30% and 30% is a 50/50 mix at
   60% alpha, not the colour typed */

.grid {
  /* fit collapses empty tracks and
     stretches what is left. fill
     keeps them and holds the size */
  grid-template-columns:
    repeat(auto-fill, minmax(60px, 1fr));
}

.grid li {
  /* 1fr floors at min-content: one
     long word overflows the row */
  grid-column: span 1;
  min-width: 0;
}

.hero {
  /* still display: block */
  min-height: 132px;

  /* with no free space to hand out
     this line is live and inert */
  align-content: center;
}

.row {
  overflow-x: auto;

  /* one gradient per edge */
  mask-image:
    linear-gradient(90deg, #0000, #000 26px),
    linear-gradient(-90deg, #0000, #000 26px);

  /* add unions them, and the union
     of the two is no mask at all */
  mask-composite: intersect;
}

.spine {
  writing-mode: vertical-rl;

  /* the block axis is horizontal now,
     so inline-size caps how far the
     label runs down, not how wide */
  inline-size: 120px;
  padding-inline: 10px;
  padding-block: 6px;
}

.spine .widget {
  /* it inherits — turn it back */
  writing-mode: horizontal-tb;
}

h1 {
  line-height: 1.6;

  /* cut the box to the cap line and
     the baseline. block box only —
     wrapped lines keep their leading */
  text-box: trim-both cap alphabetic;

  /* and delete the old hack */
  margin-block: 0;
}

.band {
  /* or the blend reads the page
     behind this box, not the box */
  isolation: isolate;
}

.band h2 {
  color: #fff;
  /* white minus backdrop =
     backdrop inverted */
  mix-blend-mode: difference;
}

.display {
  /* centred on the outline: half of
     it grows in and eats the shape */
  -webkit-text-stroke: 5px #6fa8dc;
  color: #e6eaf2;

  /* repaint the fill on top and the
     letterform comes back */
  paint-order: stroke fill;
}

p::first-letter {
  /* tall three lines, sunk two.
     one number sinks it by its
     own height, which is lower
     than you meant */
  initial-letter: 3 2;

  /* vertical only — the gutter
     is still your problem */
  margin-right: 8px;
}

/* numbers the rows that are kept */
li:nth-child(odd of :not(.gone)) {
  background: Canvas;
}

/* numbers all of them, then filters:
   two stripes end up side by side */
li:not(.gone):nth-child(odd) { }

.panel {
  /* without this, always the light one */
  color-scheme: light dark;

  /* old engines stop here */
  background: #f6f4ec;
  background: light-dark(#f6f4ec, #171d28);
}

.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-marker-group: after;
}
.carousel > li::scroll-marker {
  /* no content, no marker at all */
  content: "";
  width: 8px;
  height: 8px;
}
li::scroll-marker:target-current {
  background: CanvasText;
}

.pin { anchor-name: --pin; }

.tip {
  position: absolute;
  position-anchor: --pin;
  position-area: block-start;
  /* the half everyone forgets */
  position-try-fallbacks: flip-block;
}

/* from .outer, down to but not
   including .inner */
@scope (.outer) to (.inner) {
  p { color: CanvasText; }
}

/* still reaches in — @scope is not
   a wall, only a range */
p { color: red; }

.faq {
  /* it inherits — scope it, not :root */
  interpolate-size: allow-keywords;
}
.faq .panel {
  height: 0;
  overflow: clip;
  transition: height .35s ease;
}
.faq.open .panel { height: auto; }

<div class="lane"><i class="knob"></i></div>

/* generated from mass, stiffness and
   damping — not typed by hand */
.knob {
  transition: translate .55s linear(
    0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%,
    0.723 12.9%, 0.938 16.7%, 1.017, 1.077,
    1.121, 1.149 24.3%, 1.159, 1.163, 1.161,
    1.154 29.9%, 1.129 32.8%, 1.051 39.6%,
    1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%,
    0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1);
}

/* values over 1 are the overshoot */
.demo:has(input:checked) .knob { translate: 185px; }

<div class="orb"></div>
<p>A circle set into a column of text…</p>

.orb {
  float: left;
  width: 94px;
  height: 94px;
  /* this one is only paint */
  border-radius: 50%;
  /* what the text obeys, pinned to the
     drawn circle so margin cannot move it */
  shape-outside: circle(50%) border-box;
  /* the gap, measured from the curve */
  shape-margin: 9px;
  /* optical overhang: paint only */
  margin-left: -5px;
}

li {
  animation: rise linear both;
  animation-timeline: view();
  /* only while it is arriving */
  animation-range: entry 0% entry 85%;
}

/* hidden lives HERE, not on li */
@keyframes rise {
  from { opacity: 0; translate: 0 16px; }
}

<div class="pane">
  <div class="wrap">
    <h4>STICKY</h4>
    <p>a line wider than the pane</p>
  </div>
</div>

/* the one that scrolls */
.pane { height: 148px; overflow-y: auto; }

/* hidden here would drag overflow-y to
   auto, and sticky below dies in the
   scroll container that makes */
.wrap { overflow-x: clip; }

h4 { position: sticky; top: 0; }
p { white-space: nowrap; }

<div class="menu">
  <button>Workspace</button>
  <ul>
    <li><a href="#">Settings</a></li>
  </ul>
</div>

.menu { position: relative; }

.menu ul {
  position: absolute;
  top: 100%;
  left: 0;
  /* the bridge over the gap: padding,
     never margin, or hover has a hole */
  padding-top: 8px;
  /* not display: the tab out of the
     trigger needs somewhere to land */
  visibility: hidden;
}

/* open while anything inside has focus */
.menu:hover ul,
.menu:focus-within ul { visibility: visible; }

.avatar {
  width: 64px;
  /* both, or there is nothing to crop */
  height: 64px;
  object-fit: cover;
  /* when the face is not centred */
  object-position: 50% 20%;
}

a {
  /* the underline is a background */
  background:
    linear-gradient(currentColor, currentColor)
    no-repeat left 100% / 0% 2px;
  transition: background-size .25s;
}

a:hover,
a:focus-visible { background-size: 100% 2px; }

.hand {
  transform-origin: 50% 100%;
  animation: turn 43200s linear infinite;
  /* minus = start four hours in. */
  /* this IS how the clock is set */
  animation-delay: calc(var(--now) * -1s);
}
@keyframes turn { to { rotate: 360deg; } }

/* the dial, by trigonometry */
i { translate:
  calc(cos(var(--i) * 30deg) * 70px)
  calc(sin(var(--i) * 30deg) * 70px); }

// the entire script
clock.style.setProperty('--now', seconds);

.box { container-type: size; }

/* one element per axis, or they overwrite */
.drift {
  animation: x 7.3s linear infinite alternate;
}
.logo {
  animation: y 4.7s linear infinite alternate;
}

/* 100% is the logo, cqw is the box */
@keyframes x {
  to { translate: calc(100cqw - 100%) 0; }
}
@keyframes y {
  to { translate: 0 calc(100cqh - 100%); }
}

/* drifts: fit-content asks the element, */
/* and resize answers with the stored width */
.wrap { width: fit-content; }

/* holds: the column decides, not the drag */
.wrap { width: min(100%, 210px); }

.frame {
  /* the padding IS the border width */
  padding: 1px;
  border-radius: 14px;
  background: linear-gradient(
    135deg, #6fa8dc, #93c47d, #f6b26b);
}

.frame > * {
  border-radius: 13px; /* 14 - 1 */
  background: #131822;
}

.card::before {
  background: radial-gradient(220px circle
    at var(--x) var(--y),
    #6fa8dc44, transparent 70%);
  opacity: 0;
  transition: opacity .25s;
}
.card:hover::before { opacity: 1; }

// x and y as percentages of the box
el.style.setProperty('--x', x + '%');

.bar {
  transform-origin: 0 50%;
  animation: fill linear both;
  animation-timeline: scroll(nearest);
}
@keyframes fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.track { display: none; }
@supports (animation-timeline: scroll()) {
  .track { display: block; }
}

/* sticky goes on th, not thead */
.scroller { overflow: auto; }

.scroller th {
  position: sticky;
  top: 0;
  /* or rows show through */
  background: #1a212d;
}

.excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  /* without this, nothing clips */
  overflow: hidden;
}

<textarea rows="2"></textarea>

textarea {
  field-sizing: content;
  min-height: 3lh;
  /* or it eats the page */
  max-height: 9lh;
  resize: none;
}

// only for browsers without field-sizing
if (!CSS.supports("field-sizing: content")) {
  addEventListener("input", e => {
    const t = e.target;
    if (t.localName !== "textarea") return;
    t.style.height = "auto";
    const edge = t.offsetHeight - t.clientHeight;
    t.style.height = t.scrollHeight + edge + "px";
  });
}

/* same name = only one open at a time */
<details name="faq">
  <summary>Shipping</summary>…
</details>

summary { list-style: none; }
summary::-webkit-details-marker {
  display: none;
}

/* never: button:focus { outline: none } */
button:focus:not(:focus-visible) {
  outline: none;
}

button:focus-visible {
  outline: 2px solid #6fa8dc;
  outline-offset: 2px;
}

/* the frozen column */
.pin { position: sticky; left: 0; z-index: 1; }
thead th { position: sticky; top: 0; z-index: 2; }

/* both at once, so it beats both */
thead .pin { z-index: 3; }

background:
  /* covers, must match the surface */
  linear-gradient(90deg, #131822 30%, transparent)
    left / 42px 100% no-repeat local,
  /* the shadows underneath them */
  radial-gradient(farthest-side at 0,
    rgba(0,0,0,.55), transparent)
    left / 18px 100% no-repeat scroll,
  #131822;

.seg {
  display: inline-grid;
  grid-auto-flow: column;
  /* equal, whatever the label says */
  grid-auto-columns: 1fr;
}
.seg::after {
  width: calc((100% - 8px) / 3);
  transition: translate .28s;
}
/* one column, measured by the browser */
.seg:has(input:nth-of-type(2):checked)::after {
  translate: 100% 0;
}

.line {
  background: linear-gradient(90deg,
    #1a212d 25%, #26303f 50%, #1a212d 75%)
    0 0 / 300% 100%;
  animation: sweep 1.4s linear infinite;
}
@keyframes sweep {
  to { background-position: -300% 0; }
}

<button aria-expanded="false">
  <span></span><span></span><span></span>
</button>

[aria-expanded="true"] span:nth-child(1) {
  translate: 0 8px; rotate: 45deg;
}

input[type="checkbox"] {
  /* paint gone, semantics kept */
  appearance: none;
  width: 44px; height: 25px;
  border-radius: 999px;
}
input:checked::after { translate: 19px 0; }

.track {
  display: flex;
  width: max-content;  /* the list, twice */
  animation: slide 14s linear infinite;
}
@keyframes slide {
  to { transform: translateX(-50%); }
}

.glass {
  backdrop-filter: blur(11px);
  /* without this there is nothing to see */
  background: rgba(11, 14, 20, .42);
  border: 1px solid rgba(255,255,255,.16);
}

.headline {
  background: linear-gradient(100deg,
    #6fa8dc, #f6b26b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent; /* the whole trick */
}

/* never in one rule: one unknown selector
   and the browser drops the lot */
input[type="range"] {
  appearance: none;
  background: transparent;
}
/* Chrome, Safari, Edge */
input::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 999px;
  background: #ddd;
}
input::-webkit-slider-thumb {
  appearance: none;
  width: 19px;
  height: 19px;
  margin-top: -7px; /* (5 - 19) / 2 */
  border-radius: 50%;
  background: #111;
}
/* Firefox: "range", not "slider" */
input::-moz-range-track {
  height: 5px;
  border-radius: 999px;
  background: #ddd;
}
input::-moz-range-thumb {
  width: 19px;
  height: 19px;
  border: 0;
  border-radius: 50%;
  background: #111;
}

.scene { perspective: 700px; } /* on the parent */

.scene:hover .card {
  rotate: x 9deg;
  box-shadow: 0 18px 30px rgba(0,0,0,.45);
}

@property --spin {
  syntax: "<angle>";  /* now it can interpolate */
  inherits: false;
  initial-value: 0deg;
}
.ring {
  background: conic-gradient(from var(--spin), …);
}
@keyframes spin { to { --spin: 360deg; } }

.wrap { container-type: inline-size; }

@container (min-width: 210px) {
  .row { grid-template-columns: 62px 1fr; }
}

.wrap { container-type: inline-size; }

h2 {
  /* floor and ceiling are not optional */
  font-size: clamp(14px, 9cqi, 30px);
}

.tile { aspect-ratio: 16 / 9; width: 96px; }

/* or the parent stretch overrides it */
.row { align-items: start; }

h1, h2, h3 {
  text-wrap: balance; /* headings only */
}

p, li {
  /* no single word left alone */
  text-wrap: pretty;
}

<html lang="en"> /* without this, nothing */

.column {
  hyphens: auto;
  text-align: justify;
}

/* not :invalid, that fires on load */
input:user-invalid { border-color: #e06c6c; }
input:user-valid   { border-color: #93c47d; }

form {
  /* inherits to every control inside */
  accent-color: #93c47d;
}

<input placeholder=" "><label>Project</label>

/* label follows input, so + can reach it */
input:not(:placeholder-shown) + label,
input:focus + label { translate: 0 -8px; }

.track {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.track > * {
  /* the half everyone forgets */
  scroll-snap-align: start;
}

.panel {
  overflow: auto;
  /* the scroll stops here */
  overscroll-behavior: contain;
}

/* on the scroller, once */
html { scroll-padding-top: 34px; }

/* or per target, if the header varies */
:target { scroll-margin-top: 34px; }

/* the parent selector we waited years for */
.field:has(input:user-invalid) {
  border-color: #e06c6c;
  background: rgba(224, 108, 108, .07);
}

@media (hover: hover) {
  /* only while something is hovered */
  .list:has(a:hover) a:not(:hover) {
    opacity: .35;
  }
}

/* four or more, go two across */
.list:has(li:nth-child(4)) {
  grid-template-columns: 1fr 1fr;
}

<dialog>
  <form method="dialog">
    <button>Close</button>
  </form>
</dialog>

// not .show() — that skips all of it
dialog.showModal();

<button popovertarget="tips">Show tips</button>

<!-- no script, no listener, no library -->
<div id="tips" popover>…</div>

<fieldset inert>…</fieldset>

/* inert paints nothing, say so yourself */
[inert] { opacity: .35; }

.panel { opacity: 0; transition: opacity .3s; }
.open .panel { opacity: 1; }

/* the frame it starts from */
@starting-style {
  .open .panel { opacity: 0; }
}

.panel {
  transition: opacity .35s,
              display .35s allow-discrete;
}
/* now display: none waits for the fade */

// the DOM change goes inside the callback
document.startViewTransition?.(() => reorder())
  ?? reorder();

/* unique, or the transition is skipped */
#build { view-transition-name: build; }
#deploy { view-transition-name: deploy; }