The CSS is the easy half.

.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;
}

/* 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 combine these two */
input::-webkit-slider-thumb {
  appearance: none;
  margin-top: -7px; /* centres on the track */
}
input::-moz-range-thumb { border: 0; }

.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; }