/* ══════════════════════════════════════════════════════════════
   props.css — the everyday objects that make the table lived-in.
   Cookie plate, sugar bowl, jam pot, milk jug, pie server,
   newspaper, reading glasses, pocket watch, keys.
   ══════════════════════════════════════════════════════════════ */

/* Shared: every prop casts its shadow from the same --sun-angle. */
.cookieplate__shadow,
.sugarbowl__shadow,
.jampot__shadow,
.milkjug__shadow,
.server__shadow,
.news__shadow,
.specs__shadow,
.watch__shadow {
  position: absolute;
  transform: rotate(var(--sun-angle)) translateY(6%)
    rotate(calc(var(--sun-angle) * -1));
  opacity: calc(0.5 + var(--sun-strength) * 0.35);
  pointer-events: none;
}

/* ══ COOKIE PLATE ═══════════════════════════════════════════════ */

.cookieplate {
  position: absolute;
  right: 6%;
  top: 40%;
  width: 22%;
  aspect-ratio: 1;
  rotate: -4deg;
  z-index: 15;
  filter: blur(calc((1 - var(--px)) * 1.5px));
}
.cookieplate__shadow {
  inset: -4%;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    hsl(var(--shadow-hue) / 0.5),
    transparent 76%
  );
  filter: blur(11px);
}
.cookieplate__body {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at 32% 26%,
    var(--china-hi) 0%,
    var(--china) 30%,
    var(--china-lo) 70%,
    var(--china-sh) 100%
  );
  box-shadow:
    inset -6px -8px 18px rgba(80, 62, 42, 0.3),
    inset 8px 10px 20px rgba(255, 252, 244, 0.5),
    var(--sh-close);
}
.cookieplate__well {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  box-shadow:
    inset 0 2px 5px rgba(90, 72, 50, 0.28),
    inset 0 -1px 2px rgba(255, 255, 255, 0.45);
}
.cookieplate__glaze {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 200deg,
    transparent 0deg,
    rgba(255, 255, 255, 0.3) 24deg,
    transparent 60deg,
    transparent 306deg,
    rgba(255, 250, 240, 0.14) 338deg,
    transparent 360deg
  );
  mix-blend-mode: screen;
  filter: blur(1.4px);
}

/* ══ SUGAR BOWL ═════════════════════════════════════════════════ */

.sugarbowl {
  position: absolute;
  left: 8%;
  top: 44%;
  width: 10%;
  aspect-ratio: 1;
  z-index: 14;
  filter: blur(calc((1 - var(--px)) * 1.6px));
}
.sugarbowl__shadow {
  inset: -6%;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    hsl(var(--shadow-hue) / 0.5),
    transparent 74%
  );
  filter: blur(8px);
}
.sugarbowl__body {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at 32% 26%,
    var(--china-hi) 0%,
    var(--china) 34%,
    var(--china-lo) 74%,
    var(--china-sh) 100%
  );
  box-shadow:
    inset -5px -6px 14px rgba(80, 62, 42, 0.32),
    inset 6px 8px 16px rgba(255, 253, 247, 0.55),
    0 3px 8px hsl(var(--shadow-hue) / 0.45);
}
.sugarbowl__well {
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 38% 32%,
    rgba(120, 100, 74, 0.3),
    rgba(70, 56, 38, 0.45)
  );
  box-shadow: inset 0 3px 7px rgba(50, 38, 22, 0.55);
}
.cubes {
  position: absolute;
  inset: 18%;
}
.cubes i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 30%;
  aspect-ratio: 1.05;
  rotate: var(--r);
  border-radius: 2px;
  background: linear-gradient(
    148deg,
    #ffffff 0%,
    #f6f1e4 42%,
    #ddd3bf 78%,
    #bdb29b 100%
  );
  box-shadow:
    0 1px 2px rgba(40, 28, 14, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.95),
    inset -1px -1px 2px rgba(140, 126, 100, 0.4);
}

/* ══ JAM POT ════════════════════════════════════════════════════ */

.jampot {
  position: absolute;
  left: 9.5%;
  bottom: 20%;
  width: 11%;
  aspect-ratio: 1;
  z-index: 14;
  filter: blur(calc((1 - var(--px)) * 1.7px));
}
.jampot__shadow {
  inset: -6%;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    hsl(var(--shadow-hue) / 0.52),
    transparent 74%
  );
  filter: blur(9px);
}
.jampot__body {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 24%,
    #f2ebdd 0%,
    #ded2ba 40%,
    #b6a88d 82%,
    #8e806a 100%
  );
  box-shadow:
    inset -5px -7px 15px rgba(70, 54, 34, 0.35),
    0 3px 9px hsl(var(--shadow-hue) / 0.5);
}
.jampot__jam {
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(
    circle at 38% 32%,
    #a02a1c 0%,
    #75160f 44%,
    #430a07 88%
  );
  box-shadow: inset 0 3px 9px rgba(20, 3, 2, 0.8);
}
.jampot__gloss {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    42% 32% at 34% 26%,
    rgba(255, 208, 180, 0.5),
    transparent 72%
  );
  mix-blend-mode: screen;
  filter: blur(1.4px);
}
.jampot__fruit {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(9% 7% at 58% 44%, rgba(206, 62, 38, 0.7), transparent 74%),
    radial-gradient(7% 6% at 42% 62%, rgba(178, 44, 26, 0.6), transparent 76%),
    radial-gradient(6% 5% at 66% 66%, rgba(220, 78, 46, 0.5), transparent 76%);
  filter: blur(0.5px);
}
.jampot__rim {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 2px rgba(255, 252, 244, 0.35),
    inset 0 1px 3px rgba(70, 54, 34, 0.5);
}
/* A spoon standing in the jam. */
.jampot__spoon {
  position: absolute;
  right: 4%;
  top: -16%;
  width: 15%;
  height: 62%;
  rotate: 22deg;
  border-radius: 40% 40% 20% 20% / 14% 14% 8% 8%;
  background: linear-gradient(
    96deg,
    var(--silver-sh) 0%,
    var(--silver-hi) 38%,
    var(--silver) 58%,
    var(--silver-lo) 100%
  );
  box-shadow: 1px 2px 5px hsl(var(--shadow-hue) / 0.5);
}

/* ══ MILK JUG ═══════════════════════════════════════════════════ */

.milkjug {
  position: absolute;
  right: 22%;
  bottom: 9%;
  width: 11.5%;
  aspect-ratio: 1;
  z-index: 16;
  filter: blur(calc((1 - var(--px)) * 1.5px));
}
.milkjug__shadow {
  inset: -6%;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    hsl(var(--shadow-hue) / 0.5),
    transparent 74%
  );
  filter: blur(9px);
}
.milkjug__body {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at 32% 26%,
    var(--china-hi) 0%,
    var(--china) 34%,
    var(--china-lo) 74%,
    var(--china-sh) 100%
  );
  box-shadow:
    inset -5px -7px 15px rgba(80, 62, 42, 0.3),
    inset 6px 8px 16px rgba(255, 255, 250, 0.6),
    0 3px 9px hsl(var(--shadow-hue) / 0.45);
}
.milkjug__milk {
  position: absolute;
  inset: 17%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 38% 32%,
    #ffffff 0%,
    #fdfaf2 44%,
    #ece3d0 84%
  );
  box-shadow: inset 0 2px 6px rgba(120, 106, 82, 0.3);
}
.milkjug__rim {
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.5),
    inset 0 1px 3px rgba(90, 74, 50, 0.35);
}
.milkjug__glaze {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 202deg,
    transparent 0deg,
    rgba(255, 255, 255, 0.34) 22deg,
    transparent 56deg
  );
  mix-blend-mode: screen;
  filter: blur(1.2px);
}
.milkjug__handle {
  position: absolute;
  right: -17%;
  top: 32%;
  width: 24%;
  height: 36%;
  border: 4px solid #e8dfcc;
  border-left-color: transparent;
  border-radius: 0 60% 60% 0 / 0 50% 50% 0;
  box-shadow:
    2px 3px 5px hsl(var(--shadow-hue) / 0.45),
    inset -1px -1px 2px rgba(120, 100, 78, 0.45);
  z-index: -1;
}
.milkjug__spout {
  position: absolute;
  left: -8%;
  top: 38%;
  width: 18%;
  aspect-ratio: 1.2;
  background: linear-gradient(120deg, #f6efe0, #d8cdb6);
  clip-path: polygon(100% 0%, 100% 100%, 0% 56%);
  border-radius: 2px;
  filter: drop-shadow(-1px 1px 2px hsl(var(--shadow-hue) / 0.4));
}

/* ══ PIE SERVER ═════════════════════════════════════════════════ */

.server {
  position: absolute;
  left: 53%;
  bottom: 16%;
  width: 24%;
  height: 8%;
  rotate: 58deg;
  transform-origin: 20% 50%;
  z-index: 17;
  filter: blur(calc((1 - var(--px)) * 1.3px));
}
.server__shadow {
  inset: 14% -3% -44% 2%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 46% 50%,
    hsl(var(--shadow-hue) / 0.55),
    transparent 72%
  );
  filter: blur(6px);
}
.server__handle {
  position: absolute;
  right: 0;
  top: 28%;
  width: 54%;
  height: 44%;
  border-radius: 6% 46% 46% 6% / 50%;
  background: linear-gradient(
    178deg,
    var(--silver-sh) 0%,
    var(--silver-lo) 14%,
    var(--silver-hi) 38%,
    #eef2f6 48%,
    var(--silver) 58%,
    var(--silver-lo) 76%,
    var(--silver-sh) 100%
  );
  box-shadow:
    0 2px 5px hsl(var(--shadow-hue) / 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.9);
}
/* Chased pattern on the handle — Victorian flatware detail. */
.server__handle::after {
  content: "";
  position: absolute;
  inset: 18% 8%;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 5px,
    rgba(90, 96, 106, 0.3) 5px 6px,
    transparent 6px 11px
  );
  border-radius: inherit;
  opacity: 0.7;
}
.server__collar {
  position: absolute;
  left: 40%;
  top: 22%;
  width: 9%;
  height: 56%;
  border-radius: 2px;
  background: linear-gradient(
    178deg,
    var(--silver-sh),
    var(--silver-hi) 46%,
    var(--silver-lo)
  );
  box-shadow: 0 1px 3px hsl(var(--shadow-hue) / 0.5);
}
.server__blade {
  position: absolute;
  left: 0;
  top: -6%;
  width: 44%;
  height: 112%;
  /* Offset triangular blade, as pie servers actually are. */
  clip-path: polygon(0% 44%, 74% 2%, 100% 30%, 100% 74%, 74% 98%);
  background: linear-gradient(
    160deg,
    var(--silver-lo) 0%,
    var(--silver-hi) 26%,
    #f2f5f9 44%,
    var(--silver) 62%,
    var(--silver-lo) 82%,
    var(--silver-sh) 100%
  );
  box-shadow: 0 3px 7px hsl(var(--shadow-hue) / 0.5);
}
/* Pierced scrollwork in the blade. */
.server__cutout {
  position: absolute;
  inset: 22% 18%;
  background:
    radial-gradient(
      28% 22% at 30% 40%,
      rgba(90, 74, 52, 0.5) 0 62%,
      transparent 66%
    ),
    radial-gradient(
      22% 18% at 58% 58%,
      rgba(90, 74, 52, 0.45) 0 62%,
      transparent 66%
    ),
    radial-gradient(
      16% 14% at 78% 38%,
      rgba(90, 74, 52, 0.4) 0 62%,
      transparent 66%
    );
  filter: blur(0.4px);
}
.server__glint {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    118deg,
    transparent 40%,
    rgba(255, 255, 255, 0.9) 50%,
    transparent 60%
  );
  mix-blend-mode: screen;
  filter: blur(1px);
  animation: spoon-glint 11s ease-in-out 2s infinite;
}

/* ══ NEWSPAPER ══════════════════════════════════════════════════ */

.news {
  position: absolute;
  right: -4%;
  top: 2%;
  width: 30%;
  aspect-ratio: 1.32;
  rotate: 8deg;
  z-index: 8;
  filter: blur(calc((1 - var(--px)) * 2.4px));
}
.news__shadow {
  inset: -3% -4% -6% -3%;
  border-radius: 2px;
  background: radial-gradient(
    ellipse at 46% 48%,
    hsl(var(--shadow-hue) / 0.44),
    transparent 74%
  );
  filter: blur(11px);
}
.news__sheet {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      30% 40% at 78% 22%,
      rgba(150, 118, 72, 0.12),
      transparent 72%
    ),
    linear-gradient(154deg, #e9e2d0 0%, #ded5c0 48%, #c8bda4 100%);
  box-shadow:
    0 2px 6px hsl(var(--shadow-hue) / 0.4),
    inset 0 1px 2px rgba(255, 255, 255, 0.6);
}
/* Masthead: a dark band standing in for blackletter type. */
.news__masthead {
  position: absolute;
  left: 8%;
  top: 6%;
  width: 84%;
  height: 9%;
  background: repeating-linear-gradient(
    90deg,
    rgba(48, 40, 30, 0.82) 0 7px,
    transparent 7px 9px,
    rgba(48, 40, 30, 0.72) 9px 15px,
    transparent 15px 18px
  );
  -webkit-mask: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.news__rule {
  position: absolute;
  left: 8%;
  top: 17.5%;
  width: 84%;
  height: 1.5px;
  background: rgba(60, 50, 36, 0.6);
}
.news__head {
  position: absolute;
  left: 8%;
  top: 21%;
  width: 62%;
  height: 5%;
  background: repeating-linear-gradient(
    90deg,
    rgba(56, 46, 34, 0.7) 0 11px,
    transparent 11px 15px
  );
}
/* Body columns: fine horizontal ruling reads as text at this size. */
.news__cols {
  position: absolute;
  left: 8%;
  top: 29%;
  width: 84%;
  height: 62%;
  background: repeating-linear-gradient(
    180deg,
    rgba(70, 60, 46, 0.38) 0 1px,
    transparent 1px 3.6px
  );
  -webkit-mask: linear-gradient(
    90deg,
    #000 0 30%,
    transparent 30% 34%,
    #000 34% 64%,
    transparent 64% 68%,
    #000 68% 100%
  );
  mask: linear-gradient(
    90deg,
    #000 0 30%,
    transparent 30% 34%,
    #000 34% 64%,
    transparent 64% 68%,
    #000 68% 100%
  );
  opacity: 0.8;
}
.news__photo {
  position: absolute;
  right: 10%;
  top: 33%;
  width: 22%;
  aspect-ratio: 1.15;
  background:
    radial-gradient(
      circle at 44% 36%,
      rgba(120, 104, 82, 0.5),
      rgba(60, 50, 38, 0.7) 70%
    ),
    #7d6e58;
  box-shadow: inset 0 0 0 1px rgba(50, 42, 30, 0.5);
}
.news__fold {
  position: absolute;
  left: 0;
  top: 46%;
  width: 100%;
  height: 4%;
  background: linear-gradient(
    180deg,
    rgba(120, 104, 78, 0.3) 0%,
    rgba(255, 255, 255, 0.5) 40%,
    rgba(120, 104, 78, 0.28) 100%
  );
  filter: blur(1.4px);
}

/* ══ READING GLASSES ════════════════════════════════════════════ */

.specs {
  position: absolute;
  right: 5%;
  top: 24%;
  width: 17%;
  height: 8%;
  rotate: -12deg;
  z-index: 10;
  filter: blur(calc((1 - var(--px)) * 2px));
}
.specs__shadow {
  inset: 20% -4% -60% 0;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 50% 50%,
    hsl(var(--shadow-hue) / 0.45),
    transparent 74%
  );
  filter: blur(5px);
}
.specs__lens {
  position: absolute;
  top: 0;
  width: 38%;
  height: 100%;
  border: 2.5px solid #6b5334;
  border-radius: 46% 46% 50% 50% / 50%;
  /* Glass: barely-there tint plus one hard reflection. */
  background:
    linear-gradient(
      128deg,
      rgba(255, 250, 232, 0.3) 0%,
      rgba(255, 246, 220, 0.1) 30%,
      transparent 52%
    ),
    rgba(226, 232, 224, 0.13);
  box-shadow:
    0 2px 4px hsl(var(--shadow-hue) / 0.45),
    inset 0 1px 2px rgba(255, 255, 255, 0.5);
}
.specs__lens--l {
  left: 0;
}
.specs__lens--r {
  right: 0;
}
.specs__bridge {
  position: absolute;
  left: 38%;
  top: 24%;
  width: 24%;
  height: 22%;
  border-top: 2.5px solid #6b5334;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.specs__arm {
  position: absolute;
  width: 32%;
  height: 2.5px;
  background: #6b5334;
  border-radius: 2px;
  box-shadow: 0 1px 2px hsl(var(--shadow-hue) / 0.4);
}
.specs__arm--l {
  left: -26%;
  top: 22%;
  rotate: -14deg;
}
.specs__arm--r {
  right: -26%;
  top: 22%;
  rotate: 14deg;
}

/* ══ POCKET WATCH ═══════════════════════════════════════════════ */

.watch {
  position: absolute;
  left: 48%;
  top: 2%;
  width: 8%;
  aspect-ratio: 1;
  z-index: 11;
  filter: blur(calc((1 - var(--px)) * 2px));
}
.watch__shadow {
  inset: -8%;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    hsl(var(--shadow-hue) / 0.5),
    transparent 74%
  );
  filter: blur(7px);
}
.watch__case {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 200deg,
    #8a6f38 0deg,
    #d8bd7c 40deg,
    #f2e0ae 74deg,
    #b89a56 140deg,
    #6f5828 210deg,
    #a98d4e 260deg,
    #e0c98e 300deg,
    #8a6f38 360deg
  );
  box-shadow:
    0 3px 8px hsl(var(--shadow-hue) / 0.55),
    inset 0 1px 2px rgba(255, 244, 200, 0.6);
}
.watch__bezel {
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  background: conic-gradient(
    from 20deg,
    #6f5828,
    #e2cb93 30%,
    #9a7f42 60%,
    #f0dda8 78%,
    #7a6230
  );
  box-shadow: inset 0 0 4px rgba(60, 44, 14, 0.6);
}
.watch__face {
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 36% 30%,
    #fdf8e8 0%,
    #f2e9d2 46%,
    #ddd0b2 84%,
    #c3b593 100%
  );
  box-shadow: inset 0 1px 4px rgba(110, 92, 56, 0.45);
}
.watch__ticks {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(70, 58, 34, 0.78) 0deg 1.6deg,
    transparent 1.6deg 30deg
  );
  -webkit-mask: radial-gradient(circle, transparent 74%, #000 78%);
  mask: radial-gradient(circle, transparent 74%, #000 78%);
}
/* Hand angles come from --hour-deg / --minute-deg / --second-deg,
   written once by scene.js from the real clock and thereafter
   ticked. Defaults here mean the watch still shows a plausible
   time if JS never runs. */
.watch__hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  background: linear-gradient(90deg, #2a2116, #4a3c26 46%, #241c12);
  transform-origin: 50% 100%;
  border-radius: 1px;
  box-shadow: 0 1px 1.5px rgba(60, 46, 20, 0.5);
}
.watch__hand--h {
  width: 5.6%;
  height: 25%;
  translate: -50% 0;
  rotate: var(--hour-deg, 44deg);
  /* Spade tip, as on an antique pocket watch. */
  clip-path: polygon(
    30% 100%,
    30% 34%,
    0% 26%,
    50% 0%,
    100% 26%,
    70% 34%,
    70% 100%
  );
}
.watch__hand--m {
  width: 4%;
  height: 35%;
  translate: -50% 0;
  rotate: var(--minute-deg, 188deg);
  clip-path: polygon(
    32% 100%,
    32% 26%,
    0% 18%,
    50% 0%,
    100% 18%,
    68% 26%,
    68% 100%
  );
}
/* Thin blued-steel second hand with a counterweight tail. */
.watch__hand--s {
  width: 1.8%;
  height: 40%;
  translate: -50% 0;
  rotate: var(--second-deg, 0deg);
  background: #7a3524;
  box-shadow: 0 0 1px rgba(120, 50, 30, 0.6);
}
.watch__hand--s::after {
  content: "";
  position: absolute;
  left: -110%;
  bottom: -18%;
  width: 320%;
  height: 16%;
  border-radius: 50%;
  background: #7a3524;
}
.watch__pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: #2e2517;
}
.watch__glass {
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  background: linear-gradient(
    134deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 252, 240, 0.16) 26%,
    transparent 48%
  );
  mix-blend-mode: screen;
  filter: blur(0.6px);
}
.watch__crown {
  position: absolute;
  right: -7%;
  top: 40%;
  width: 12%;
  height: 20%;
  border-radius: 2px;
  background: linear-gradient(90deg, #b89a56, #f0dda8 46%, #8a6f38);
  box-shadow: 1px 1px 2px hsl(var(--shadow-hue) / 0.5);
}
.watch__chain {
  position: absolute;
  left: -84%;
  top: 52%;
  width: 90%;
  height: 5%;
  rotate: 16deg;
  background: repeating-linear-gradient(
    90deg,
    #c9ab63 0 3px,
    #6f5828 3px 4.4px,
    #e2cb93 4.4px 6px,
    transparent 6px 7.4px
  );
  border-radius: 2px;
  filter: drop-shadow(0 1px 1.5px hsl(var(--shadow-hue) / 0.5));
  opacity: 0.95;
}

/* ══ KEYS ═══════════════════════════════════════════════════════ */

.keys {
  position: absolute;
  left: 42%;
  top: 14%;
  width: 11%;
  height: 8%;
  rotate: -18deg;
  /* Above the recipe card (z-index 21) — the keys were tossed down
     on top of it, so only their bows should disappear behind the
     paper's edge, not the whole bunch. */
  z-index: 23;
  filter: blur(calc((1 - var(--px)) * 2.1px))
    drop-shadow(0 2px 3px hsl(var(--shadow-hue) / 0.55));
}
.keys__ring {
  position: absolute;
  left: 0;
  top: 22%;
  width: 30%;
  aspect-ratio: 1;
  border: 2.5px solid #9a8046;
  border-radius: 50%;
  box-shadow:
    0 1px 3px hsl(var(--shadow-hue) / 0.5),
    inset 0 1px 1px rgba(255, 240, 190, 0.5);
}

/* Each key is drawn in three parts rather than one polygon:
     ::before  the bow — the round loop you hold
     the box   the shaft
     ::after   the bit — the toothed blade at the tip
   The previous single clip-path self-intersected (same disjoint-
   region limit as the pie weave), which collapsed each key into a
   thin stick. */
.key {
  position: absolute;
  height: 15%;
  border-radius: 1px;
  background: linear-gradient(
    180deg,
    #e2c98d 0%,
    #c2a463 34%,
    #967c40 68%,
    #6d5729 100%
  );
  box-shadow:
    inset 0 0.5px 0.5px rgba(255, 244, 200, 0.7),
    0 1px 2px hsl(var(--shadow-hue) / 0.5);
}
/* Bow: the loop at the held end. */
.key::before {
  content: "";
  position: absolute;
  left: -14%;
  top: 50%;
  width: 26%;
  aspect-ratio: 1;
  translate: 0 -50%;
  border: 2.2px solid #b0904e;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #e8d199, #9a7f42);
  box-shadow: inset 0 1px 1px rgba(255, 246, 210, 0.6);
}
/* Bit: two teeth standing off the shaft at the far end. */
.key::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 26%;
  height: 260%;
  background: linear-gradient(180deg, #d9bf82 0%, #a98d4e 56%, #745e2e 100%);
  /* Comb of teeth, cut with a mask — disjoint bands again, so a
     gradient mask rather than a polygon. */
  -webkit-mask: linear-gradient(
    90deg,
    #000 0 34%,
    transparent 34% 52%,
    #000 52% 74%,
    transparent 74% 88%,
    #000 88% 100%
  );
  mask: linear-gradient(
    90deg,
    #000 0 34%,
    transparent 34% 52%,
    #000 52% 74%,
    transparent 74% 88%,
    #000 88% 100%
  );
  border-radius: 0 0 1px 1px;
}
/* Two keys on the ring, at different angles and lengths. */
.key--a {
  left: 24%;
  top: 26%;
  width: 68%;
  rotate: 6deg;
}
.key--b {
  left: 23%;
  top: 52%;
  width: 58%;
  rotate: 27deg;
}
/* The shorter key gets a different tooth pattern. */
.key--b::after {
  height: 220%;
  -webkit-mask: linear-gradient(
    90deg,
    #000 0 28%,
    transparent 28% 46%,
    #000 46% 100%
  );
  mask: linear-gradient(90deg, #000 0 28%, transparent 28% 46%, #000 46% 100%);
}