.scene-production {
  --production-eva: color-mix(in oklab, color-mix(in oklch, var(--text-warning) 70%, var(--text-success)) 30%, var(--bg-raised));
  --production-powder: color-mix(in oklab, var(--text-subtle) 16%, var(--bg-raised));
  --production-frame: color-mix(in oklab, var(--text-subtle) 50%, var(--border-strong));
  max-inline-size: 26rem;
}
.scene-production svg { aspect-ratio: 372 / 1032; }
.production-sole { fill: var(--production-sole, var(--bg-raised)); stroke: var(--production-edge, var(--text-subtle)); stroke-width: var(--production-stroke, 1); }
.production-pad { fill: var(--production-pad, color-mix(in oklab, var(--bg-accent) 16%, var(--bg-raised))); stroke: var(--production-edge, var(--bg-accent)); stroke-width: .8; }
.production-contour { fill: none; stroke: var(--production-edge, var(--bg-accent)); stroke-width: .6; stroke-dasharray: 2 1.5; }
.scene-production .production-milled {
  --production-sole: var(--production-eva); --production-pad: var(--production-eva);
  --production-edge: color-mix(in oklab, var(--text-warning) 50%, var(--text)); filter: drop-shadow(0 1px 1.5px var(--bg-backdrop));
}
.scene-production .production-stock { --production-sole: none; --production-edge: var(--production-eva); --production-stroke: 5; stroke-dasharray: 356 356; stroke-dashoffset: -356px; }
.scene-production .production-floor { fill: color-mix(in oklab, var(--production-eva) 30%, var(--bg-hover)); }
.scene-production .production-traces { fill: url(#production-trace); }
.scene-production .production-trace { stroke: var(--production-eva); stroke-width: .6; }
.scene-production .production-uncut { fill: none; stroke: var(--production-eva); stroke-width: 8.6; stroke-dasharray: 2008 2008; stroke-dashoffset: -2008px; }
.scene-production .production-clamp { fill: none; stroke: var(--production-frame); stroke-width: 2; }
.scene-production :is(.production-jaw, .production-head, .production-platform, .production-drop) { fill: var(--text-muted); }
.scene-production .production-beam { fill: var(--bg-raised); stroke: var(--border-strong); filter: drop-shadow(0 2px 3px var(--bg-backdrop)); }
.scene-production .production-tool { fill: var(--text); }
.scene-production .production-flute { fill: none; stroke: var(--text-muted); stroke-width: 1.2; stroke-dasharray: 4 6.05; }
.scene-production .production-chip { fill: var(--text-warning); }
.scene-production .production-bed { fill: var(--production-powder); }
.scene-production .production-texture { fill: url(#production-grain); }
.scene-production .production-grain { fill: var(--text-subtle); opacity: .45; }
.scene-production .production-part { fill: color-mix(in oklab, var(--text) 60%, var(--bg-raised)); }
.scene-production .production-wall { fill: none; stroke: var(--production-frame); stroke-width: 3; stroke-linejoin: round; }
.scene-production .production-lamp { fill: color-mix(in oklab, var(--text-warning) 55%, var(--bg-raised)); }
.scene-production .production-heat stop { stop-color: var(--text-warning); }
.scene-production .production-glow { fill: url(#production-heat); }
.scene-production .production-eva { fill: var(--production-eva); }
.scene-production .production-screen { fill: color-mix(in oklab, var(--text-success) 14%, var(--bg-raised)); stroke: color-mix(in oklab, var(--text-success) 40%, var(--border-strong)); }

.scene-production * { animation-duration: 24s; }
.scene-production :is(.production-before, .production-station-now, .production-cutting, .production-pass) { opacity: 0; }
.scene-production :is(.production-jaws, .production-station-next, .production-cover, .production-gap) { transform-box: fill-box; }
.scene-production :is(.production-mill-x, .production-mill-y, .production-uncut, .production-stock, .production-roller, .production-carriage, .production-cover, .production-gap, .production-cake) { animation-timing-function: linear; }
.scene-production .pointer-x { animation-name: production-pointer-x; }
.scene-production .pointer-y { transform: translateY(212px); animation-name: production-pointer-y; }
.scene-production .pointer { animation-name: production-press; }
.scene-production .production-ripple-mill { animation-name: production-ripple-mill; }
.scene-production .production-ripple-print { animation-name: production-ripple-print; }
.scene-production .production-ripple-station { animation-name: production-ripple-station; }
.scene-production .production-station-now { animation-name: production-station-now; }
.scene-production .production-station-next { transform-origin: center; animation-name: production-station-next; }
.scene-production .production-mill .production-before { animation-name: production-mill-before; }
.scene-production .production-mill .production-file { animation-name: production-mill-file; }
.scene-production .production-print .production-before { animation-name: production-print-before; }
.scene-production .production-print .production-file { animation-name: production-print-file; }
.scene-production .production-jaws { transform-origin: center; transform: scaleX(1.05); animation-name: production-jaws; }
.scene-production .production-uncut { animation-name: production-uncut; }
.scene-production .production-stock { animation-name: production-stock; }
.scene-production .production-mill-y { transform: translateY(84px); animation-name: production-mill-y; }
.scene-production .production-mill-x { transform: translateX(194px); animation-name: production-mill-x; }
.scene-production .production-spindle { transform: scale(1.15); animation-name: production-spindle; }
.scene-production .production-cutting { animation-name: production-cutting; }
.scene-production .production-chip { animation-name: production-chip; animation-duration: .5s; animation-timing-function: linear; }
.scene-production .production-flute { animation-name: production-spin; animation-duration: .24s; animation-timing-function: linear; }
.scene-production .production-mill-time { transform: translateY(-98px); animation-name: production-mill-time; }
.scene-production .production-roller { transform: translate(24px, 121px); animation-name: production-roller; }
.scene-production .production-carriage { transform: translate(180px, 94px); animation-name: production-carriage; }
.scene-production :is(.production-cover, .production-gap) { transform-origin: top; }
.scene-production .production-cover { transform: translateX(-160px); animation-name: production-cover; }
.scene-production .production-gap { transform: translateX(160px); animation-name: production-gap; }
.scene-production .production-cake { transform: translateY(50px); animation-name: production-cake; }
.scene-production .production-powder { opacity: .15; animation-name: production-powder; }
.scene-production .production-pass { animation-name: production-pass; }
.scene-production .production-drop { animation-name: production-drop; animation-duration: .45s; animation-timing-function: linear; }
.scene-production .production-layers { transform: translateY(-84px); animation-name: production-layers; }
@keyframes production-press {
  0%, 8.75% { transform: scale(1); } 9.38% { transform: scale(.86); } 10.42% { transform: scale(1); }
  52.92% { transform: scale(1); } 53.54% { transform: scale(.86); } 54.58%, 87.92% { transform: scale(1); } 88.54% { transform: scale(.86); } 89.58%, 100% { transform: scale(1); }
}
@keyframes production-pointer-x {
  0%, 1.67% { opacity: 0; transform: translateX(300px); }
  3.33% { opacity: 1; transform: translateX(300px); animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  8.33%, 55% { opacity: 1; transform: translateX(262px); }
  57.5%, 83.33% { opacity: 0; transform: translateX(262px); }
  85.42%, 92.5% { opacity: 1; transform: translateX(262px); }
  94.17%, 100% { opacity: 0; transform: translateX(262px); }
}
@keyframes production-pointer-y {
  0%, 3.33% { transform: translateY(214px); animation-timing-function: cubic-bezier(.3, 0, .1, 1); }
  8.33%, 48.33% { transform: translateY(260px); animation-timing-function: var(--scene-glide); }
  52.5%, 82.5% { transform: translateY(296px); }
  82.92%, 85.42% { transform: translateY(240px); animation-timing-function: var(--scene-glide); }
  87.5%, 100% { transform: translateY(212px); }
}
@keyframes production-ripple-mill { 0%, 9.38% { opacity: 0; transform: scale(.4); } 9.7% { opacity: .35; } 13%, 100% { opacity: 0; transform: scale(1.8); } }
@keyframes production-ripple-print { 0%, 53.54% { opacity: 0; transform: scale(.4); } 53.9% { opacity: .35; } 57.1%, 100% { opacity: 0; transform: scale(1.8); } }
@keyframes production-ripple-station { 0%, 88.54% { opacity: 0; transform: scale(.4); } 88.9% { opacity: .35; } 92.1%, 100% { opacity: 0; transform: scale(1.8); } }
@keyframes production-station-now { 0%, 89.17% { opacity: 1; } 89.58%, 97.5% { opacity: 0; } 98.33%, 100% { opacity: 1; } }
@keyframes production-station-next {
  0%, 89.17% { opacity: 0; transform: scale(.85); }
  90% { opacity: 1; transform: scale(1.06); }
  90.83%, 97.5% { opacity: 1; transform: scale(1); }
  98.33%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes production-mill-before { 0%, 10.83% { opacity: 1; } 11.67%, 97.5% { opacity: 0; } 99.17%, 100% { opacity: 1; } }
@keyframes production-mill-file { 0%, 10.83% { opacity: 0; transform: translateY(4px); } 12.5%, 96.67% { opacity: 1; transform: translateY(0); } 97.5%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes production-print-before { 0%, 54.17% { opacity: 1; } 55%, 97.5% { opacity: 0; } 99.17%, 100% { opacity: 1; } }
@keyframes production-print-file { 0%, 54.17% { opacity: 0; transform: translateY(4px); } 55.83%, 96.67% { opacity: 1; transform: translateY(0); } 97.5%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes production-jaws { 0%, 10.83% { transform: scaleX(1.05); } 13.33%, 46.67% { transform: scaleX(1); } 48.33%, 100% { transform: scaleX(1.05); } }
@keyframes production-chip { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(7px); } }
@keyframes production-spin { 0% { transform: rotate(0); } 100% { transform: rotate(180deg); } }
@keyframes production-drop { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: .3; transform: translateY(14px); } }
@keyframes production-powder { 0%, 85.83% { opacity: 1; } 89.17%, 98.33% { opacity: .15; } 98.38%, 100% { opacity: 1; } }

@media (min-width: 760px) {
  .scene-production { max-inline-size: 52rem; }
  .scene-production svg { aspect-ratio: 372 / 376; }
  .scene-production .production-stage { transform: scale(calc(372 / 728)) translateY(8px); }
  .scene-production .production-mill { transform: translate(372px, 48px); }
  .scene-production .production-print { transform: translate(194px, 392px); }
  .scene-production .production-note { transform: translateX(356px); }
}
@media (min-width: 1100px) {
  .scene-production { max-inline-size: none; }
  .scene-production svg { aspect-ratio: 1084 / 376; }
  .scene-production .production-stage { transform: none; }
  .scene-production .production-print { transform: translate(728px, 48px); }
  .scene-production .production-note { transform: translateX(712px); }
}
@keyframes production-mill-x {
  0%, 12.5% { transform: translateX(194px); animation-timing-function: var(--scene-glide); }
  13.75%, 14.17% { transform: translateX(30px); }
  16.16%, 16.26% { transform: translateX(190px); }
  18.25%, 18.35% { transform: translateX(30px); }
  20.35%, 20.44% { transform: translateX(190px); }
  22.44%, 22.54% { transform: translateX(30px); }
  24.53%, 24.63% { transform: translateX(190px); }
  26.62%, 26.72% { transform: translateX(30px); }
  28.71%, 28.81% { transform: translateX(190px); }
  30.8%, 30.9% { transform: translateX(30px); }
  32.9%, 32.99% { transform: translateX(190px); }
  34.99%, 35.09% { transform: translateX(30px); }
  37.08%, 37.18% { transform: translateX(190px); }
  39.17%, 39.58% { transform: translateX(30px); animation-timing-function: var(--scene-glide); }
  40.42%, 40.83% { transform: translateX(39.23px); }
  41.04% { transform: translateX(44.33px); }
  41.25% { transform: translateX(57.41px); }
  41.45% { transform: translateX(71.46px); }
  41.66% { transform: translateX(85.48px); }
  41.87% { transform: translateX(99.47px); }
  42.08% { transform: translateX(113.45px); }
  42.29% { transform: translateX(127.44px); }
  42.5% { transform: translateX(141.4px); }
  42.7% { transform: translateX(155.43px); }
  42.91% { transform: translateX(168.82px); }
  43.12% { transform: translateX(177.42px); }
  43.33% { transform: translateX(180.68px); }
  43.54% { transform: translateX(178.6px); }
  43.75% { transform: translateX(168.25px); }
  43.95% { transform: translateX(154.31px); }
  44.16% { transform: translateX(140.31px); }
  44.37% { transform: translateX(126.4px); }
  44.58% { transform: translateX(112.57px); }
  44.79% { transform: translateX(98.59px); }
  45% { transform: translateX(84.53px); }
  45.2% { transform: translateX(70.47px); }
  45.41% { transform: translateX(56.42px); }
  45.62% { transform: translateX(43.91px); }
  45.83%, 46.25% { transform: translateX(39.23px); animation-timing-function: var(--scene-glide); }
  47.92%, 100% { transform: translateX(194px); }
}
@keyframes production-mill-y {
  0%, 12.5% { transform: translateY(84px); animation-timing-function: var(--scene-glide); }
  13.75%, 16.16% { transform: translateY(104px); }
  16.26%, 18.25% { transform: translateY(112px); }
  18.35%, 20.35% { transform: translateY(120px); }
  20.44%, 22.44% { transform: translateY(128px); }
  22.54%, 24.53% { transform: translateY(136px); }
  24.63%, 26.62% { transform: translateY(144px); }
  26.72%, 28.71% { transform: translateY(152px); }
  28.81%, 30.8% { transform: translateY(160px); }
  30.9%, 32.9% { transform: translateY(168px); }
  32.99%, 34.99% { transform: translateY(176px); }
  35.09%, 37.08% { transform: translateY(184px); }
  37.18%, 39.58% { transform: translateY(192px); animation-timing-function: var(--scene-glide); }
  40.42%, 40.83% { transform: translateY(147.53px); }
  41.04% { transform: translateY(134.9px); }
  41.25% { transform: translateY(130.46px); }
  41.45% { transform: translateY(130.01px); }
  41.66% { transform: translateY(128.9px); }
  41.87% { transform: translateY(127.47px); }
  42.08% { transform: translateY(125.95px); }
  42.29% { transform: translateY(124.51px); }
  42.5% { transform: translateY(122.78px); }
  42.7% { transform: translateY(122.09px); }
  42.91% { transform: translateY(125.71px); }
  43.12% { transform: translateY(136.62px); }
  43.33% { transform: translateY(150.22px); }
  43.54% { transform: translateY(163.98px); }
  43.75% { transform: translateY(172.9px); }
  43.95% { transform: translateY(174.01px); }
  44.16% { transform: translateY(172.83px); }
  44.37% { transform: translateY(170.71px); }
  44.58% { transform: translateY(168.12px); }
  44.79% { transform: translateY(166.7px); }
  45% { transform: translateY(166.37px); }
  45.2% { transform: translateY(166.47px); }
  45.41% { transform: translateY(166.23px); }
  45.62% { transform: translateY(160.43px); }
  45.83%, 46.25% { transform: translateY(147.53px); animation-timing-function: var(--scene-glide); }
  47.92%, 100% { transform: translateY(84px); }
}
@keyframes production-mill-time {
  0%, 11.67% { transform: translateY(0); }
  12.5%, 19.52% { transform: translateY(-14px); }
  20.35%, 25.79% { transform: translateY(-28px); }
  26.62%, 32.07% { transform: translateY(-42px); }
  32.9%, 38.34% { transform: translateY(-56px); }
  39.17%, 42.5% { transform: translateY(-70px); }
  43.33%, 45% { transform: translateY(-84px); }
  45.83%, 97.5% { transform: translateY(-98px); }
  99.17%, 100% { transform: translateY(0); }
}
@keyframes production-spindle {
  0%, 13.75% { transform: scale(1.15); }
  14.17%, 39.17% { transform: scale(1); }
  39.58%, 40.42% { transform: scale(1.15); }
  40.83%, 45.83% { transform: scale(1); }
  46.25%, 100% { transform: scale(1.15); }
}
@keyframes production-cutting {
  0%, 14% { opacity: 0; }
  14.17%, 39.17% { opacity: 1; }
  39.34%, 40.66% { opacity: 0; }
  40.83%, 45.83% { opacity: 1; }
  46%, 100% { opacity: 0; }
}
@keyframes production-uncut {
  0%, 14.17% { stroke-dashoffset: 0; opacity: 1; }
  39.17%, 96.67% { stroke-dashoffset: -2008px; opacity: 1; }
  96.71% { stroke-dashoffset: 0; opacity: 0; }
  98.33%, 100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes production-stock {
  0%, 40.83% { stroke-dashoffset: 0; }
  45.83%, 98.33% { stroke-dashoffset: -356px; }
  98.38%, 100% { stroke-dashoffset: 0; }
}
@keyframes production-roller {
  0%, 56.88% { transform: translate(24px, 121px); }
  58.88%, 62.51% { transform: translate(196px, 121px); }
  64.5%, 68.13% { transform: translate(24px, 121px); }
  70.13%, 73.75% { transform: translate(196px, 121px); }
  75.75%, 79.38% { transform: translate(24px, 121px); }
  81.38%, 84.58% { transform: translate(196px, 121px); animation-timing-function: var(--scene-glide); }
  86.25%, 100% { transform: translate(24px, 121px); }
}
@keyframes production-carriage {
  0%, 59.04% { transform: translate(180px, 94px); }
  61.25%, 64.67% { transform: translate(40px, 94px); }
  66.88%, 70.29% { transform: translate(180px, 94px); }
  72.5%, 75.92% { transform: translate(40px, 94px); }
  78.12%, 81.54% { transform: translate(180px, 94px); }
  83.75%, 84.58% { transform: translate(40px, 94px); animation-timing-function: var(--scene-glide); }
  86.25%, 100% { transform: translate(180px, 94px); }
}
@keyframes production-gap {
  0%, 56.21% { transform: translateX(160px) scaleY(1); }
  56.25% { transform: translateX(0) scaleY(0); }
  56.67%, 56.95% { transform: translateX(0) scaleY(1); }
  58.81%, 61.84% { transform: translateX(160px) scaleY(1); }
  61.88% { transform: translateX(0) scaleY(0); }
  62.3%, 62.58% { transform: translateX(0) scaleY(1); }
  64.44%, 67.46% { transform: translateX(-160px) scaleY(1); }
  67.5% { transform: translateX(0) scaleY(0); }
  67.92%, 68.2% { transform: translateX(0) scaleY(1); }
  70.06%, 73.08% { transform: translateX(160px) scaleY(1); }
  73.12% { transform: translateX(0) scaleY(0); }
  73.55%, 73.83% { transform: translateX(0) scaleY(1); }
  75.69%, 78.71% { transform: translateX(-160px) scaleY(1); }
  78.75% { transform: translateX(0) scaleY(0); }
  79.17%, 79.45% { transform: translateX(0) scaleY(1); }
  81.31%, 100% { transform: translateX(160px) scaleY(1); }
}
@keyframes production-cover {
  0%, 56.21% { transform: translateX(-160px) scaleY(1); }
  56.25% { transform: translateX(0) scaleY(0); }
  56.67%, 59% { transform: translateX(0) scaleY(1); }
  59.04% { transform: translateX(-21px) scaleY(1); }
  61.25%, 61.84% { transform: translateX(-161px) scaleY(1); }
  61.88% { transform: translateX(0) scaleY(0); }
  62.3%, 64.62% { transform: translateX(0) scaleY(1); }
  64.67% { transform: translateX(-1px) scaleY(1); }
  66.88%, 67.46% { transform: translateX(139px) scaleY(1); }
  67.5% { transform: translateX(0) scaleY(0); }
  67.92%, 70.25% { transform: translateX(0) scaleY(1); }
  70.29% { transform: translateX(-21px) scaleY(1); }
  72.5%, 73.08% { transform: translateX(-161px) scaleY(1); }
  73.12% { transform: translateX(0) scaleY(0); }
  73.55%, 75.88% { transform: translateX(0) scaleY(1); }
  75.92% { transform: translateX(-1px) scaleY(1); }
  78.12%, 78.71% { transform: translateX(139px) scaleY(1); }
  78.75% { transform: translateX(0) scaleY(0); }
  79.17%, 81.5% { transform: translateX(0) scaleY(1); }
  81.54% { transform: translateX(-21px) scaleY(1); }
  83.75%, 100% { transform: translateX(-161px) scaleY(1); }
}
@keyframes production-cake {
  0%, 56.25% { transform: translateY(0); }
  56.67%, 61.88% { transform: translateY(10px); }
  62.3%, 67.5% { transform: translateY(20px); }
  67.92%, 73.12% { transform: translateY(30px); }
  73.55%, 78.75% { transform: translateY(40px); }
  79.17%, 96.67% { transform: translateY(50px); opacity: 1; }
  98.33% { transform: translateY(50px); opacity: 0; }
  98.38% { transform: translateY(0); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes production-pass {
  0%, 59.04% { opacity: 0; }
  59.17%, 61.12% { opacity: 1; }
  61.25%, 64.67% { opacity: 0; }
  64.8%, 66.75% { opacity: 1; }
  66.88%, 70.29% { opacity: 0; }
  70.42%, 72.37% { opacity: 1; }
  72.5%, 75.92% { opacity: 0; }
  76.05%, 78% { opacity: 1; }
  78.12%, 81.54% { opacity: 0; }
  81.67%, 83.62% { opacity: 1; }
  83.75%, 100% { opacity: 0; }
}
@keyframes production-layers {
  0%, 54.58% { transform: translateY(0); }
  55.83%, 61.25% { transform: translateY(-14px); }
  61.67%, 66.88% { transform: translateY(-28px); }
  67.3%, 72.5% { transform: translateY(-42px); }
  72.92%, 78.12% { transform: translateY(-56px); }
  78.55%, 83.75% { transform: translateY(-70px); }
  84.17%, 97.5% { transform: translateY(-84px); }
  99.17%, 100% { transform: translateY(0); }
}