/* —— page loader (dice / book / pen / press) —— */
.od-page-loader {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; align-content: center; gap: 28px;
  background:
    radial-gradient(ellipse at 50% 42%, oklch(0.99 0.01 85), transparent 55%),
    var(--bg);
  transition: opacity 580ms ease, visibility 580ms ease;
}
.od-page-loader.is-done {
  opacity: 0; visibility: hidden; pointer-events: none;
}
.od-page-loader.is-review {
  position: relative; inset: auto; z-index: 1;
  min-height: min(72vh, 560px);
  width: 100%;
  border: 1px solid var(--border, oklch(0.88 0.012 85));
  border-radius: 4px;
  background:
    radial-gradient(ellipse at 50% 42%, oklch(0.99 0.01 85), transparent 55%),
    var(--bg);
}
.od-page-loader .loader-brand {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 2.4vw, 26px);
  letter-spacing: -0.02em; text-align: center; margin: 0; color: var(--fg);
}
.od-page-loader .loader-meta {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); margin: 0; text-align: center;
}
.od-page-loader .loader-copy {
  display: grid; gap: 8px; justify-items: center;
}
.loader-stage {
  position: relative; width: 160px; height: 130px;
  display: grid; place-items: center;
  overflow: visible;
}
.loader-stage::after {
  content: ""; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 72px; height: 10px; border-radius: 50%;
  background: oklch(0.35 0.02 55 / 0.14); filter: blur(4px);
  pointer-events: none;
}

/* —— dice —— */
.dice-scene {
  width: 72px; height: 72px;
  perspective: 640px;
  transform-style: preserve-3d;
}
.dice {
  width: 100%; height: 100%; position: relative;
  transform-style: preserve-3d;
  animation: dice-roll 1.35s cubic-bezier(0.33, 0.1, 0.25, 1) infinite;
  will-change: transform;
}
.dice-face {
  position: absolute; inset: 0;
  background: linear-gradient(145deg, var(--surface), oklch(0.94 0.015 90));
  border: 1.5px solid var(--fg); border-radius: 11px;
  display: grid; place-items: center;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.65),
    0 1px 0 color-mix(in oklch, var(--accent) 35%, transparent);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.dice-face::before {
  content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--fg);
}
.dice .f1 { transform: translateZ(36px); }
.dice .f1::before {
  box-shadow:
    17px 17px 0 0 var(--fg), -17px -17px 0 0 var(--fg),
    17px -17px 0 0 var(--fg), -17px 17px 0 0 var(--fg);
}
.dice .f2 { transform: rotateY(90deg) translateZ(36px); }
.dice .f2::before {
  background: var(--fg);
  box-shadow: 16px 16px 0 0 var(--fg), -16px -16px 0 0 var(--fg);
}
.dice .f3 { transform: rotateY(180deg) translateZ(36px); }
.dice .f3::before {
  box-shadow: 16px 16px 0 0 var(--fg), -16px -16px 0 0 var(--fg);
}
.dice .f4 {
  transform: rotateY(-90deg) translateZ(36px);
  background: linear-gradient(145deg, color-mix(in oklch, var(--accent) 28%, var(--surface)), var(--surface));
}
.dice .f4::before {
  width: 10px; height: 10px;
  box-shadow:
    14px 14px 0 0 var(--fg), -14px -14px 0 0 var(--fg),
    14px -14px 0 0 var(--fg), -14px 14px 0 0 var(--fg);
}
.dice .f5 { transform: rotateX(90deg) translateZ(36px); }
.dice .f5::before { width: 14px; height: 14px; background: var(--accent); box-shadow: none; }
.dice .f6 { transform: rotateX(-90deg) translateZ(36px); }
.dice .f6::before {
  width: 10px; height: 10px; background: var(--fg);
  box-shadow:
    16px 0 0 0 var(--fg), -16px 0 0 0 var(--fg),
    0 16px 0 0 var(--fg), 0 -16px 0 0 var(--fg),
    16px 16px 0 0 var(--fg), -16px -16px 0 0 var(--fg);
}
@keyframes dice-roll {
  0%   { transform: rotateX(-18deg) rotateY(22deg) rotateZ(0deg) translateY(0); }
  22%  { transform: rotateX(110deg) rotateY(130deg) rotateZ(28deg) translateY(-16px); }
  48%  { transform: rotateX(250deg) rotateY(250deg) rotateZ(-18deg) translateY(2px); }
  72%  { transform: rotateX(400deg) rotateY(370deg) rotateZ(16deg) translateY(-8px); }
  100% { transform: rotateX(522deg) rotateY(472deg) rotateZ(0deg) translateY(0); }
}

/* —— book (Lottie morph · static hardcover + arched page silhouette) —— */
.book-scene {
  width: 200px;
  height: 150px;
  display: grid;
  place-items: center;
  overflow: visible;
}
.book-svg {
  display: block;
  width: 200px;
  height: 149px;
  overflow: visible;
  filter: drop-shadow(0 8px 10px oklch(0.28 0.03 55 / 0.16));
}
.book-base { pointer-events: none; }
.book-page {
  fill: #faf7f1;
  stroke: none;
  animation: book-page-morph 2.4s linear infinite;
  will-change: d, opacity, fill;
}
.book-page-edge {
  fill: none;
  stroke: oklch(0.28 0.03 55 / 0.22);
  stroke-width: 1.5;
  pointer-events: none;
  animation: book-page-edge-morph 2.4s linear infinite;
  will-change: d, opacity;
}
/* Keyframes match Eva-Docs-Book-FLop.lottie: right → lift → gutter → left */
@keyframes book-page-morph {
  0%, 4% {
    d: path("M860.7 546.5C860.7 546.5,603.3 398.8,603.3 398.8C603.3 398.8,442.4 480.0,442.4 480.0C442.4 480.0,425.6 486.8,417.8 504.7C411.1 520.2,416.3 520.0,416.3 520.0C416.3 520.0,662.0 657.5,665.3 661.8C670.0 667.9,669.7 674.6,669.7 674.6C669.7 674.6,671.1 659.6,677.7 648.1C684.4 636.5,685.0 635.9,696.7 629.2C708.5 622.5,860.7 546.5,860.7 546.5Z");
    fill: #faf7f1;
    opacity: 1;
  }
  14% {
    d: path("M774.6 445.5C774.6 445.5,517.2 297.9,517.2 297.9C517.2 297.9,461.5 390.9,441.1 422.4C420.7 453.8,415.0 477.8,410.8 488.7C406.6 499.6,404.8 511.5,404.8 511.5C404.8 511.5,660.9 658.4,660.9 658.4C660.9 658.4,662.2 659.1,662.2 659.1C662.2 659.1,666.1 642.6,670.7 632.1C675.3 621.5,679.4 603.7,695.5 571.5C711.6 539.4,774.6 445.5,774.6 445.5Z");
    fill: #faf7f1;
    opacity: 1;
  }
  20% {
    d: path("M586.5 511.1C586.5 511.1,329.1 363.4,329.1 363.4C329.1 363.4,339.4 441.3,356.9 457.6C369.4 472.6,386.0 487.1,391.6 494.2C399.4 502.6,405.9 511.8,405.9 511.8C405.9 511.8,662.1 658.7,662.1 658.7C662.1 658.7,663.3 659.4,663.3 659.4C663.3 659.4,651.4 646.9,647.6 640.0C642.6 632.4,625.6 620.5,611.3 606.8C597.0 593.0,586.5 511.1,586.5 511.1Z");
    fill: #e8d7bc;
    opacity: 1;
  }
  24% {
    d: path("M527.6 625.1C527.6 625.1,270.2 477.5,270.2 477.5C270.2 477.5,276.0 465.3,312.5 473.9C341.3 480.8,369.2 490.5,379.6 495.8C393.4 502.8,404.1 510.6,404.1 510.6C404.1 510.6,660.3 657.6,660.3 657.6C660.3 657.6,661.5 658.3,661.5 658.3C661.5 658.3,641.6 647.7,633.6 642.7C623.9 636.7,598.7 625.1,566.8 623.1C530.9 620.9,527.6 625.1,527.6 625.1Z");
    fill: #d8c4a4;
    opacity: 1;
  }
  42%, 70% {
    d: path("M476.7 766.1C476.7 766.1,219.3 618.5,219.3 618.5C219.3 618.5,271.3 582.4,303.7 563.5C340.0 542.2,362.3 528.9,371.8 522.1C395.0 505.5,403.9 512.6,403.9 512.6C403.9 512.6,660.3 657.6,660.3 657.6C660.3 657.6,661.5 658.3,661.5 658.3C661.5 658.3,655.3 654.4,630.9 668.6C620.9 674.4,584.1 697.9,559.5 715.6C530.3 736.5,476.7 766.1,476.7 766.1Z");
    fill: #faf7f1;
    opacity: 1;
  }
  73% {
    d: path("M476.7 766.1C476.7 766.1,219.3 618.5,219.3 618.5C219.3 618.5,271.3 582.4,303.7 563.5C340.0 542.2,362.3 528.9,371.8 522.1C395.0 505.5,403.9 512.6,403.9 512.6C403.9 512.6,660.3 657.6,660.3 657.6C660.3 657.6,661.5 658.3,661.5 658.3C661.5 658.3,655.3 654.4,630.9 668.6C620.9 674.4,584.1 697.9,559.5 715.6C530.3 736.5,476.7 766.1,476.7 766.1Z");
    fill: #faf7f1;
    opacity: 0;
  }
  76%, 100% {
    d: path("M860.7 546.5C860.7 546.5,603.3 398.8,603.3 398.8C603.3 398.8,442.4 480.0,442.4 480.0C442.4 480.0,425.6 486.8,417.8 504.7C411.1 520.2,416.3 520.0,416.3 520.0C416.3 520.0,662.0 657.5,665.3 661.8C670.0 667.9,669.7 674.6,669.7 674.6C669.7 674.6,671.1 659.6,677.7 648.1C684.4 636.5,685.0 635.9,696.7 629.2C708.5 622.5,860.7 546.5,860.7 546.5Z");
    fill: #faf7f1;
    opacity: 0;
  }
}
@keyframes book-page-edge-morph {
  0%, 4% {
    d: path("M860.7 546.5C860.7 546.5,603.3 398.8,603.3 398.8C603.3 398.8,442.4 480.0,442.4 480.0C442.4 480.0,425.6 486.8,417.8 504.7C411.1 520.2,416.3 520.0,416.3 520.0C416.3 520.0,662.0 657.5,665.3 661.8C670.0 667.9,669.7 674.6,669.7 674.6C669.7 674.6,671.1 659.6,677.7 648.1C684.4 636.5,685.0 635.9,696.7 629.2C708.5 622.5,860.7 546.5,860.7 546.5Z");
    opacity: 1;
  }
  14% {
    d: path("M774.6 445.5C774.6 445.5,517.2 297.9,517.2 297.9C517.2 297.9,461.5 390.9,441.1 422.4C420.7 453.8,415.0 477.8,410.8 488.7C406.6 499.6,404.8 511.5,404.8 511.5C404.8 511.5,660.9 658.4,660.9 658.4C660.9 658.4,662.2 659.1,662.2 659.1C662.2 659.1,666.1 642.6,670.7 632.1C675.3 621.5,679.4 603.7,695.5 571.5C711.6 539.4,774.6 445.5,774.6 445.5Z");
    opacity: 1;
  }
  20% {
    d: path("M586.5 511.1C586.5 511.1,329.1 363.4,329.1 363.4C329.1 363.4,339.4 441.3,356.9 457.6C369.4 472.6,386.0 487.1,391.6 494.2C399.4 502.6,405.9 511.8,405.9 511.8C405.9 511.8,662.1 658.7,662.1 658.7C662.1 658.7,663.3 659.4,663.3 659.4C663.3 659.4,651.4 646.9,647.6 640.0C642.6 632.4,625.6 620.5,611.3 606.8C597.0 593.0,586.5 511.1,586.5 511.1Z");
    opacity: 1;
  }
  24% {
    d: path("M527.6 625.1C527.6 625.1,270.2 477.5,270.2 477.5C270.2 477.5,276.0 465.3,312.5 473.9C341.3 480.8,369.2 490.5,379.6 495.8C393.4 502.8,404.1 510.6,404.1 510.6C404.1 510.6,660.3 657.6,660.3 657.6C660.3 657.6,661.5 658.3,661.5 658.3C661.5 658.3,641.6 647.7,633.6 642.7C623.9 636.7,598.7 625.1,566.8 623.1C530.9 620.9,527.6 625.1,527.6 625.1Z");
    opacity: 1;
  }
  42%, 70% {
    d: path("M476.7 766.1C476.7 766.1,219.3 618.5,219.3 618.5C219.3 618.5,271.3 582.4,303.7 563.5C340.0 542.2,362.3 528.9,371.8 522.1C395.0 505.5,403.9 512.6,403.9 512.6C403.9 512.6,660.3 657.6,660.3 657.6C660.3 657.6,661.5 658.3,661.5 658.3C661.5 658.3,655.3 654.4,630.9 668.6C620.9 674.4,584.1 697.9,559.5 715.6C530.3 736.5,476.7 766.1,476.7 766.1Z");
    opacity: 1;
  }
  73% {
    d: path("M476.7 766.1C476.7 766.1,219.3 618.5,219.3 618.5C219.3 618.5,271.3 582.4,303.7 563.5C340.0 542.2,362.3 528.9,371.8 522.1C395.0 505.5,403.9 512.6,403.9 512.6C403.9 512.6,660.3 657.6,660.3 657.6C660.3 657.6,661.5 658.3,661.5 658.3C661.5 658.3,655.3 654.4,630.9 668.6C620.9 674.4,584.1 697.9,559.5 715.6C530.3 736.5,476.7 766.1,476.7 766.1Z");
    opacity: 0;
  }
  76%, 100% {
    d: path("M860.7 546.5C860.7 546.5,603.3 398.8,603.3 398.8C603.3 398.8,442.4 480.0,442.4 480.0C442.4 480.0,425.6 486.8,417.8 504.7C411.1 520.2,416.3 520.0,416.3 520.0C416.3 520.0,662.0 657.5,665.3 661.8C670.0 667.9,669.7 674.6,669.7 674.6C669.7 674.6,671.1 659.6,677.7 648.1C684.4 636.5,685.0 635.9,696.7 629.2C708.5 622.5,860.7 546.5,860.7 546.5Z");
    opacity: 0;
  }
}

/* —— pen (fixed writing grip · tip tracks stroke) —— */
.pen-scene {
  width: 148px; height: 118px;
  position: relative;
}
.pen-paper {
  position: absolute; left: 14px; top: 36px; width: 120px; height: 68px;
  border: 1.5px solid var(--fg); border-radius: 4px;
  background: linear-gradient(180deg, var(--surface), oklch(0.95 0.012 90));
  overflow: visible;
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--surface) 70%, transparent);
}
.pen-ink {
  position: absolute; left: 14px; top: 20px; width: 92px; height: 34px;
  overflow: visible;
}
.pen-scribble {
  display: block; width: 92px; height: 34px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 156;
  stroke-dashoffset: 156;
  animation: pen-draw 2.2s ease-in-out infinite;
  overflow: visible;
}
/*
  Right-hand writing grip: tip on the path, barrel fixed ~48° up-right.
  offset-rotate stays a fixed angle (never `auto`) so the shaft does not
  tilt with every scribble tangent — same as a hand holding a pen.
*/
.pen-body {
  position: absolute;
  top: 0; left: 0;
  width: 62px; height: 14px;
  offset-path: path("M4 22 C16 6, 24 26, 34 12 S54 26, 64 10 S80 24, 88 8");
  offset-rotate: -48deg;
  offset-anchor: 0% 50%;
  offset-distance: 0%;
  animation: pen-follow 2.2s ease-in-out infinite;
  transform-origin: 0 50%;
  filter: drop-shadow(0 1px 1px color-mix(in oklch, var(--fg) 18%, transparent));
}
.pen-tip {
  position: absolute; left: 0; top: 3px; width: 12px; height: 8px;
  background: var(--fg);
  clip-path: polygon(100% 8%, 100% 92%, 0 50%);
  z-index: 2;
}
.pen-tip::after {
  content: "";
  position: absolute; right: -1px; top: 2px; width: 4px; height: 4px;
  background: color-mix(in oklch, var(--fg) 70%, var(--accent));
  border-radius: 50%;
}
.pen-grip {
  position: absolute; left: 10px; top: 2px; width: 14px; height: 10px;
  background: color-mix(in oklch, var(--fg) 82%, var(--accent));
  border: 1px solid var(--fg);
  border-radius: 1px 0 0 1px;
  z-index: 1;
}
.pen-shaft {
  position: absolute; left: 22px; top: 1px; width: 36px; height: 12px;
  background:
    linear-gradient(180deg,
      color-mix(in oklch, var(--accent) 35%, var(--surface)) 0%,
      color-mix(in oklch, var(--accent) 55%, var(--surface)) 45%,
      color-mix(in oklch, var(--accent) 40%, var(--fg)) 100%);
  border: 1px solid var(--fg);
  border-left: 0;
  border-radius: 0 3px 3px 0;
}
.pen-shaft::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: color-mix(in oklch, var(--fg) 55%, transparent);
}
.pen-shaft::after {
  content: "";
  position: absolute; right: 4px; top: 2px; width: 6px; height: 6px;
  border: 1.5px solid color-mix(in oklch, var(--fg) 70%, transparent);
  border-radius: 50%;
  opacity: 0.85;
}
@keyframes pen-draw {
  0%   { stroke-dashoffset: 156; opacity: 0.4; }
  62%  { stroke-dashoffset: 0; opacity: 1; }
  80%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0.28; }
}
@keyframes pen-follow {
  0%   { offset-distance: 0%; }
  62%  { offset-distance: 100%; }
  80%  { offset-distance: 100%; }
  100% { offset-distance: 100%; }
}
/* Fallback: same fixed -48° grip; only position follows the stroke */
@supports not (offset-path: path("M0 0 L1 1")) {
  .pen-body {
    offset-path: none;
    offset-rotate: 0deg;
    animation: pen-scribble-fallback 2.2s ease-in-out infinite;
  }
  @keyframes pen-scribble-fallback {
    0%   { transform: translate(0, 18px) rotate(-48deg); }
    12%  { transform: translate(10px, 4px) rotate(-48deg); }
    24%  { transform: translate(22px, 20px) rotate(-48deg); }
    36%  { transform: translate(34px, 6px) rotate(-48deg); }
    48%  { transform: translate(48px, 18px) rotate(-48deg); }
    62%  { transform: translate(62px, 4px) rotate(-48deg); }
    74%  { transform: translate(74px, 14px) rotate(-48deg); }
    80%, 100% { transform: translate(84px, 2px) rotate(-48deg); }
  }
}

/* —— Gutenberg / common screw press —— */
.press-scene {
  width: 156px; height: 118px;
  position: relative;
}
.gpress {
  position: absolute; inset: 0;
  --wood: color-mix(in oklch, var(--fg) 78%, var(--accent));
  --wood-deep: color-mix(in oklch, var(--fg) 88%, var(--accent));
  --wood-light: color-mix(in oklch, var(--accent) 45%, var(--surface));
}
.gpress-base {
  position: absolute; left: 18px; right: 18px; bottom: 10px; height: 10px;
  background: linear-gradient(180deg, var(--wood), var(--wood-deep));
  border: 1.5px solid var(--fg); border-radius: 2px;
  z-index: 1;
}
.gpress-rail {
  position: absolute; left: 8px; right: 8px; bottom: 22px; height: 4px;
  background: color-mix(in oklch, var(--fg) 55%, var(--accent));
  border-radius: 1px;
  z-index: 2;
}
.gpress-rail::before,
.gpress-rail::after {
  content: ""; position: absolute; top: -3px; width: 6px; height: 10px;
  background: var(--wood-deep); border: 1px solid var(--fg); border-radius: 1px;
}
.gpress-rail::before { left: 10px; }
.gpress-rail::after { right: 10px; }
.gpress-cheek {
  position: absolute; bottom: 18px; width: 12px; height: 72px;
  background:
    linear-gradient(90deg, oklch(0 0 0 / 0.08), transparent 40%),
    linear-gradient(180deg, var(--wood-light), var(--wood));
  border: 1.5px solid var(--fg); border-radius: 2px;
  z-index: 4;
}
.gpress-cheek.is-left { left: 34px; }
.gpress-cheek.is-right { right: 34px; }
.gpress-cheek::before {
  content: ""; position: absolute; left: 2px; right: 2px; top: 14px; height: 3px;
  background: color-mix(in oklch, var(--fg) 35%, transparent); border-radius: 1px;
  box-shadow: 0 22px 0 color-mix(in oklch, var(--fg) 28%, transparent);
}
.gpress-head {
  position: absolute; left: 28px; right: 28px; top: 12px; height: 14px;
  background: linear-gradient(180deg, var(--wood-light), var(--wood));
  border: 1.5px solid var(--fg); border-radius: 2px;
  z-index: 5;
}
.gpress-head::after {
  content: ""; position: absolute; left: 50%; top: -6px; width: 18px; height: 8px;
  transform: translateX(-50%);
  background: var(--wood-deep); border: 1.5px solid var(--fg); border-radius: 2px 2px 0 0;
}
.gpress-brace {
  position: absolute; left: 46px; right: 46px; top: 28px; height: 8px;
  border-left: 1.5px solid color-mix(in oklch, var(--fg) 55%, transparent);
  border-right: 1.5px solid color-mix(in oklch, var(--fg) 55%, transparent);
  z-index: 3;
}
.gpress-screw {
  position: absolute; left: 50%; top: 8px; width: 8px; height: 42px;
  margin-left: -4px;
  background:
    repeating-linear-gradient(
      180deg,
      var(--wood-deep) 0 3px,
      color-mix(in oklch, var(--accent) 40%, var(--surface)) 3px 5px
    );
  border: 1px solid var(--fg); border-radius: 2px;
  z-index: 6;
  transform-origin: 50% 0;
  animation: gpress-screw 2.2s ease-in-out infinite;
}
.gpress-nut {
  position: absolute; left: 50%; top: 22px; width: 16px; height: 10px;
  margin-left: -8px;
  background: color-mix(in oklch, var(--accent) 50%, var(--surface));
  border: 1.5px solid var(--fg); border-radius: 2px;
  z-index: 7;
  animation: gpress-nut 2.2s ease-in-out infinite;
}
.gpress-bar {
  position: absolute; left: 50%; top: 18px; width: 70px; height: 5px;
  margin-left: -8px;
  background: var(--fg); border-radius: 2px;
  transform-origin: 8px 50%;
  animation: gpress-bar 2.2s ease-in-out infinite;
  z-index: 8;
}
.gpress-bar::before {
  content: ""; position: absolute; right: -6px; top: -4px; width: 12px; height: 12px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--accent) 55%, var(--surface));
  border: 1.5px solid var(--fg);
}
.gpress-bar::after {
  content: ""; position: absolute; left: -4px; top: -3px; width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--wood-deep); border: 1.5px solid var(--fg);
}
.gpress-platen {
  position: absolute; left: 48px; right: 48px; top: 44px; height: 8px;
  background: linear-gradient(180deg, var(--wood-light), var(--wood-deep));
  border: 1.5px solid var(--fg); border-radius: 1px;
  z-index: 6;
  transform-origin: 50% 0;
  animation: gpress-platen 2.2s ease-in-out infinite;
  box-shadow: 0 2px 0 oklch(0.35 0.02 55 / 0.12);
}
.gpress-platen::before {
  content: ""; position: absolute; left: 50%; top: -10px; width: 4px; height: 10px;
  margin-left: -2px; background: var(--wood-deep); border: 1px solid var(--fg);
}
.gpress-carriage {
  position: absolute; left: 46px; bottom: 24px; width: 64px; height: 22px;
  z-index: 5;
  animation: gpress-carriage 2.2s ease-in-out infinite;
}
.gpress-coffin {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, color-mix(in oklch, var(--fg) 70%, var(--accent)), var(--wood-deep));
  border: 1.5px solid var(--fg); border-radius: 2px;
}
.gpress-forme {
  position: absolute; left: 6px; right: 6px; top: 3px; height: 8px;
  background:
    repeating-linear-gradient(90deg, var(--fg) 0 1.5px, transparent 1.5px 4px),
    color-mix(in oklch, var(--accent) 25%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--fg) 70%, transparent);
  border-radius: 1px;
  opacity: 0.85;
}
.gpress-sheet {
  position: absolute; left: 8px; right: 8px; top: 4px; height: 14px;
  background: var(--surface);
  border: 1px solid var(--fg); border-radius: 1px;
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.35);
  animation: gpress-sheet 2.2s ease-in-out infinite;
  transform-origin: 50% 100%;
}
.gpress-sheet::before {
  content: ""; position: absolute; left: 5px; right: 5px; top: 4px; height: 1.5px;
  background: color-mix(in oklch, var(--fg) 22%, transparent);
  box-shadow:
    0 3px 0 color-mix(in oklch, var(--fg) 18%, transparent),
    0 6px 0 color-mix(in oklch, var(--fg) 14%, transparent);
  opacity: 0;
  animation: gpress-ink 2.2s ease-in-out infinite;
}

@keyframes gpress-carriage {
  0%   { transform: translateX(48px); }
  22%  { transform: translateX(0); }
  68%  { transform: translateX(0); }
  90%, 100% { transform: translateX(-48px); }
}
@keyframes gpress-bar {
  0%, 22% { transform: rotate(-28deg); }
  38% { transform: rotate(42deg); }
  52% { transform: rotate(42deg); }
  68%, 100% { transform: rotate(-28deg); }
}
@keyframes gpress-platen {
  0%, 22% { transform: translateY(0); }
  38% { transform: translateY(14px); }
  52% { transform: translateY(14px); }
  68%, 100% { transform: translateY(0); }
}
@keyframes gpress-screw {
  0%, 22% { transform: translateY(0); }
  38% { transform: translateY(6px); }
  52% { transform: translateY(6px); }
  68%, 100% { transform: translateY(0); }
}
@keyframes gpress-nut {
  0%, 22% { transform: translateY(0); }
  38% { transform: translateY(6px); }
  52% { transform: translateY(6px); }
  68%, 100% { transform: translateY(0); }
}
@keyframes gpress-sheet {
  0%, 22% { transform: scaleY(1) translateY(0); }
  38%, 52% { transform: scaleY(0.88) translateY(2px); }
  68%, 100% { transform: scaleY(1) translateY(0); }
}
@keyframes gpress-ink {
  0%, 30% { opacity: 0; }
  40%, 100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .dice { animation: none; transform: rotateX(-18deg) rotateY(28deg); }
  .book-page,
  .book-page-edge { animation: none; }
  /* Mid-flip arched silhouette from the Lottie reference */
  .book-page {
    d: path("M586.5 511.1C586.5 511.1,329.1 363.4,329.1 363.4C329.1 363.4,339.4 441.3,356.9 457.6C369.4 472.6,386.0 487.1,391.6 494.2C399.4 502.6,405.9 511.8,405.9 511.8C405.9 511.8,662.1 658.7,662.1 658.7C662.1 658.7,663.3 659.4,663.3 659.4C663.3 659.4,651.4 646.9,647.6 640.0C642.6 632.4,625.6 620.5,611.3 606.8C597.0 593.0,586.5 511.1,586.5 511.1Z");
    fill: #d8c4a4;
    opacity: 1;
  }
  .book-page-edge {
    d: path("M586.5 511.1C586.5 511.1,329.1 363.4,329.1 363.4C329.1 363.4,339.4 441.3,356.9 457.6C369.4 472.6,386.0 487.1,391.6 494.2C399.4 502.6,405.9 511.8,405.9 511.8C405.9 511.8,662.1 658.7,662.1 658.7C662.1 658.7,663.3 659.4,663.3 659.4C663.3 659.4,651.4 646.9,647.6 640.0C642.6 632.4,625.6 620.5,611.3 606.8C597.0 593.0,586.5 511.1,586.5 511.1Z");
    opacity: 1;
  }
  .pen-scribble { animation: none; stroke-dashoffset: 0; opacity: 1; }
  .pen-body { animation: none; offset-distance: 55%; offset-rotate: -48deg; }
  .gpress-carriage,
  .gpress-bar,
  .gpress-platen,
  .gpress-screw,
  .gpress-nut,
  .gpress-sheet,
  .gpress-sheet::before { animation: none; }
  .gpress-carriage { transform: translateX(0); }
  .gpress-bar { transform: rotate(18deg); }
  .gpress-platen { transform: translateY(8px); }
  .gpress-screw,
  .gpress-nut { transform: translateY(3px); }
  .gpress-sheet::before { opacity: 1; }
  .loader-stage::after { opacity: 0.5; }
}