.mechanism{--st:64px;max-width:780px;margin:0 auto;position:relative}.mechanism-legend,.mechanism-machine,.mechanism-readout{display:none}.mechanism-steps{margin:0;padding:0;list-style:none;position:relative}.mechanism-step{grid-template-columns:var(--st) auto minmax(0, 1fr);grid-template-rows:var(--st) auto auto;padding-bottom:clamp(52px,8vh,84px);display:grid;position:relative}.mechanism-step:last-child{padding-bottom:0}.mechanism-step:not(:last-child):before,.mechanism-step:not(:last-child):after{content:"";left:calc(var(--st) / 2);top:calc(var(--st) / 2);width:1px;height:100%;position:absolute}.mechanism-step:not(:last-child):before{background:color-mix(in srgb, var(--graphite) 40%, transparent)}.mechanism-step:not(:last-child):after{background:var(--gold);transform-origin:top;transition:transform 1.4s var(--ease-out-expo) .35s}.mechanism-step:first-child .mechanism-station:before{content:"";background:color-mix(in srgb, var(--graphite) 40%, transparent);width:1px;height:22px;position:absolute;bottom:100%;left:50%}.mechanism-step:first-child .mechanism-station:after{content:"";background:color-mix(in srgb, var(--graphite) 70%, transparent);width:19px;height:1px;position:absolute;bottom:calc(100% + 22px);left:calc(50% - 9px)}.mechanism-station{z-index:1;width:var(--st);height:var(--st);background:radial-gradient(circle at 34% 28%, var(--glaze), var(--porcelain) 72%);box-shadow:0 0 0 1px var(--gold), 0 0 0 4px var(--porcelain), 0 0 0 5px color-mix(in srgb, var(--gold) 40%, transparent), 0 12px 26px -16px color-mix(in srgb, var(--ink) 55%, transparent);transition:transform 1s var(--ease-out-expo), box-shadow .8s var(--ease-out-expo);border-radius:50%;grid-area:1/1/span 3;align-self:start;place-items:center;display:grid;position:relative}.mechanism-station .numeral{transition:color .8s var(--ease-out-expo);gap:0;font-size:16px}.mechanism-dial{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--graphite) 16%, transparent);background:linear-gradient(var(--gold), var(--gold)) 50% 0 / 1px 9px no-repeat;transition:transform 1.3s var(--ease-out-expo) .15s;border-radius:50%;position:absolute;inset:-9px}.is-lit>.mechanism-station{box-shadow:0 0 0 1px var(--gold), 0 0 0 4px var(--porcelain), 0 0 0 5px color-mix(in srgb, var(--gold) 55%, transparent), 0 0 26px -2px color-mix(in srgb, var(--gold-lit) 70%, transparent), 0 12px 26px -16px color-mix(in srgb, var(--ink) 55%, transparent)}.mechanism-leader{grid-area:1/2;justify-content:flex-end;align-self:center;align-items:center;width:84px;height:28px;margin-right:14px;display:flex;position:relative}.mechanism-leader:before{content:"";background:color-mix(in srgb, var(--graphite) 45%, transparent);height:1px;position:absolute;top:50%;left:6px;right:30px}.mechanism-leader:after{content:"";background:var(--gold);transform-origin:0;height:1px;transition:transform 1s var(--ease-out-expo) .15s;position:absolute;top:50%;left:6px;right:30px}.mechanism-bulb{color:var(--gold);filter:drop-shadow(0 0 6px color-mix(in srgb, var(--gold-lit) 90%, transparent));transition:color .7s var(--ease-out-expo) .4s, filter .7s var(--ease-out-expo) .4s;position:relative}.mechanism-step.is-signal.is-lit .mechanism-bulb{filter:drop-shadow(0 0 7px color-mix(in srgb, var(--signal) 55%, transparent)) drop-shadow(0 0 6px color-mix(in srgb, var(--gold-lit) 90%, transparent))}.mechanism-step.is-signal .mechanism-station>.numeral:after{content:"";background:var(--signal);width:8px;height:8px;box-shadow:0 0 0 3px var(--porcelain);transition:transform .6s var(--ease-out-expo) .6s;border-radius:50%;position:absolute;top:-3px;right:-3px}.mechanism-title{letter-spacing:.06em;grid-area:1/3;align-self:center;font-size:clamp(20px,1.9vw,26px)}.mechanism-rule{background:linear-gradient(to right, var(--gold), color-mix(in srgb, var(--gold) 0%, transparent));transform-origin:0;width:56px;height:1px;transition:transform 1s var(--ease-out-expo) .3s;grid-area:2/3;margin:14px 0 16px}.mechanism-body{max-width:54ch;color:var(--graphite);grid-area:3/3;margin:0;font-size:17px;line-height:1.7}@media not all and (hover:hover) and (pointer:fine) and (width>=960px) and (prefers-reduced-motion:no-preference){.motion-ready:not(.motion-fallback) .mechanism-step:not(.is-lit):after{transform:scaleY(0)}.motion-ready:not(.motion-fallback) .mechanism-step:not(.is-lit) .mechanism-dial{transform:rotate(-120deg)}.motion-ready:not(.motion-fallback) .mechanism-step:not(.is-lit) .mechanism-station .numeral{color:color-mix(in srgb, var(--graphite) 70%, transparent)}.motion-ready:not(.motion-fallback) .mechanism-step:not(.is-lit) .mechanism-station{box-shadow:0 0 0 1px color-mix(in srgb, var(--graphite) 45%, transparent), 0 0 0 4px var(--porcelain), 0 0 0 5px color-mix(in srgb, var(--graphite) 18%, transparent)}.motion-ready:not(.motion-fallback) .mechanism-step:not(.is-lit) .mechanism-leader:after{transform:scaleX(0)}.motion-ready:not(.motion-fallback) .mechanism-step:not(.is-lit) .mechanism-bulb{color:color-mix(in srgb, var(--graphite) 55%, transparent);filter:none}.motion-ready:not(.motion-fallback) .mechanism-step:not(.is-lit) .mechanism-rule{transform:scaleX(0)}.motion-ready:not(.motion-fallback) .mechanism-step:not(.is-lit) .mechanism-station>.numeral:after{transform:scale(0)}}@media (width<=899px){.mechanism{--st:48px}.mechanism-station .numeral{font-size:13px}.mechanism-leader{width:44px;margin-right:10px}.mechanism-leader:before,.mechanism-leader:after{left:4px;right:26px}.mechanism-title{font-size:18px}.mechanism-rule{grid-column:2/-1;margin-left:14px}.mechanism-body{grid-column:2/-1;padding-left:14px;font-size:16px}}.mechanism-machine{width:var(--S);aspect-ratio:1;grid-area:1/2;position:relative}.mechanism-frame,.mechanism-wheel,.mechanism-wheel>svg{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.mechanism-frame-front{z-index:2;pointer-events:none}.mechanism-wheel{will-change:transform}.mechanism-axis{stroke:color-mix(in srgb, var(--graphite) 34%, transparent);stroke-width:.8px;stroke-dasharray:28 6 3 6}.mechanism-construct{fill:none;stroke:color-mix(in srgb, var(--graphite) 30%, transparent);stroke-width:.8px;stroke-dasharray:2 6}.mechanism-ring-line{fill:none;stroke:color-mix(in srgb, var(--graphite) 50%, transparent);stroke-width:.9px;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.8s var(--ease-out-expo)}.mechanism-ticks line{stroke:color-mix(in srgb, var(--graphite) 55%, transparent);stroke-width:.8px}.mechanism-ticks line.is-major{stroke:var(--ink);stroke-width:1.1px}.mechanism-ticks line.is-station{stroke:var(--gold);stroke-width:2px}.mechanism-ticks{transition:opacity 1.2s var(--ease-out-expo) .2s, transform 2s var(--ease-out-expo) .2s}.mechanism-band{fill:none;stroke:var(--glaze);stroke-width:48px;filter:drop-shadow(0 6px 10px color-mix(in srgb, var(--ink) 16%, transparent));stroke-dasharray:2030 2030;stroke-dashoffset:0;transition:stroke-dashoffset 2.2s var(--ease-out-expo) .25s}.mechanism-band-edge{fill:none;stroke:color-mix(in srgb, var(--graphite) 55%, transparent);stroke-width:.9px;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 2s var(--ease-out-expo) .35s}.mechanism-inlay{fill:none;stroke:color-mix(in srgb, var(--gold) 80%, transparent);stroke-width:1px;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 2.4s var(--ease-out-expo) .6s}.mechanism-engraving line{stroke:color-mix(in srgb, var(--graphite) 32%, transparent);stroke-width:.8px}.mechanism-spoke{stroke:color-mix(in srgb, var(--graphite) 40%, transparent);stroke-width:1px;stroke-dasharray:3 4;transition:stroke .6s var(--ease-out-expo)}.mechanism-post[data-state=active] .mechanism-spoke{stroke:var(--gold);stroke-dasharray:none;stroke-width:1.4px}.mechanism-post[data-state=past] .mechanism-spoke{stroke:color-mix(in srgb, var(--gold) 55%, transparent)}.mechanism-lamp path{fill:none;stroke:color-mix(in srgb, var(--graphite) 70%, transparent);stroke-width:1.15px;vector-effect:non-scaling-stroke;stroke-linecap:square;transition:stroke .6s var(--ease-out-expo), fill .6s var(--ease-out-expo)}.mechanism-lamp path:first-child{fill:var(--glaze)}.mechanism-glow{opacity:0;transition:opacity .8s var(--ease-out-expo)}.mechanism-glow-core{stop-color:var(--gold-lit);stop-opacity:.8}.mechanism-glow-edge{stop-color:var(--gold-lit);stop-opacity:0}.mechanism-post:is([data-state=active],[data-state=past]) .mechanism-lamp path{stroke:var(--gold)}.mechanism-post[data-state=active] .mechanism-lamp path:first-child{fill:color-mix(in srgb, var(--gold-lit) 45%, var(--glaze))}.mechanism-post[data-state=past] .mechanism-lamp path:first-child{fill:color-mix(in srgb, var(--gold-lit) 18%, var(--glaze))}.mechanism-post[data-state=active] .mechanism-glow{opacity:1}.mechanism-post[data-state=past] .mechanism-glow{opacity:.35}.mechanism-post.is-signal[data-state=active] .mechanism-lamp path{stroke:var(--signal)}.mechanism-post.is-signal[data-state=active] .mechanism-lamp path:first-child{fill:color-mix(in srgb, var(--signal) 22%, var(--glaze))}.mechanism-mark{aspect-ratio:1;width:6.9%;transition:scale .9s var(--ease-out-expo), opacity .9s var(--ease-out-expo);transition-delay:calc(.5s + var(--i,0) * .12s);position:absolute;translate:-50% -50%}.mechanism-face{width:100%;height:100%;font:400 calc(var(--S) * .021)/1 var(--face-display);letter-spacing:.04em;color:color-mix(in srgb, var(--graphite) 80%, transparent);background:radial-gradient(circle at 34% 28%, var(--glaze), var(--porcelain) 72%);box-shadow:0 0 0 1px color-mix(in srgb, var(--gold) 70%, transparent), 0 0 0 4px var(--porcelain), 0 0 0 5px color-mix(in srgb, var(--graphite) 22%, transparent), 0 8px 18px -10px color-mix(in srgb, var(--ink) 55%, transparent);will-change:transform;transition:color .6s var(--ease-out-expo), box-shadow .6s var(--ease-out-expo);border-radius:50%;place-items:center;display:grid}.mechanism-mark[data-state=past] .mechanism-face{color:var(--gold)}.mechanism-mark[data-state=active] .mechanism-face{color:var(--gold);box-shadow:0 0 0 1px var(--gold), 0 0 0 4px var(--porcelain), 0 0 0 5px color-mix(in srgb, var(--gold) 55%, transparent), 0 0 30px 2px color-mix(in srgb, var(--gold-lit) 55%, transparent), 0 8px 18px -10px color-mix(in srgb, var(--ink) 55%, transparent)}.mechanism-index path{fill:var(--gold)}.mechanism-index circle{fill:var(--signal)}.mechanism-travel,.mechanism-travel-glow{fill:none;stroke-dasharray:var(--arc,0) 360;stroke-linecap:butt}.mechanism-travel{stroke:var(--gold);stroke-width:2.4px}.mechanism-travel-glow{stroke:color-mix(in srgb, var(--gold-lit) 30%, transparent);stroke-width:10px}.mechanism-core{z-index:1;aspect-ratio:1;background:radial-gradient(ellipse 44% 26% at 40% 20%, color-mix(in srgb, var(--glaze) 90%, transparent), transparent 75%), radial-gradient(circle at 50% 56%, color-mix(in srgb, var(--gold-lit) 14%, transparent), transparent 60%), radial-gradient(circle, color-mix(in srgb, var(--glaze) 90%, transparent) 0%, color-mix(in srgb, var(--porcelain) 88%, transparent) 70%, color-mix(in srgb, var(--drafting) 92%, transparent) 100%);width:62.4%;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gold) 80%, transparent), inset 0 0 0 7px color-mix(in srgb, var(--porcelain) 70%, transparent), inset 0 0 0 8px color-mix(in srgb, var(--graphite) 22%, transparent), inset 0 -26px 48px -30px color-mix(in srgb, var(--ink) 22%, transparent), 0 36px 70px -46px color-mix(in srgb, var(--ink) 55%, transparent);transition:opacity 1.2s var(--ease-out-expo) .5s, scale 1.4s var(--ease-out-expo) .5s;border-radius:50%;position:absolute;top:50%;left:50%;translate:-50% -50%}.mechanism-core:after{content:"";background:radial-gradient(circle, color-mix(in srgb, var(--gold-lit) 40%, transparent), transparent 70%);opacity:calc(var(--warm,0) * .55);border-radius:50%;transition:opacity .4s;position:absolute;inset:12%}.mechanism-legend{grid-area:1/1;justify-self:end;padding-left:30px;position:relative}.mechanism-legend ol{margin:0;padding:0;list-style:none}.mechanism-legend-rule{background:color-mix(in srgb, var(--graphite) 38%, transparent);width:1px;position:absolute;top:37px;bottom:37px;left:0}.mechanism-legend-lit{background:var(--gold);transform-origin:top;position:absolute;inset:0;transform:scaleY(0)}.mechanism-legend-pointer{width:14px;height:100%;position:absolute;top:0;left:-14px}.mechanism-legend-pointer:before{content:"";border-style:solid;border-width:5px 0 5px 10px;border-color:transparent transparent transparent var(--gold);position:absolute;top:-5px;left:0}.mechanism-legend-pointer:after{content:"";background:var(--signal);border-radius:50%;width:4px;height:4px;position:absolute;top:-2px;left:-9px}.mechanism-legend-item{transition:opacity .9s var(--ease-out-expo), transform 1.1s var(--ease-out-expo);transition-delay:calc(.3s + var(--i) * .1s)}.mechanism-legend button{cursor:pointer;text-align:left;width:100%;height:74px;color:color-mix(in srgb, var(--graphite) 85%, transparent);background:0 0;border:0;grid-template-columns:32px auto;align-items:center;column-gap:8px;padding:0 6px 0 0;display:grid;position:relative}.mechanism-legend-tick{background:color-mix(in srgb, var(--graphite) 45%, transparent);transform-origin:0;width:22px;height:1px;transition:transform .6s var(--ease-out-expo), background-color .4s;position:absolute;top:50%;left:-30px;transform:scaleX(.55)}.mechanism-legend button .numeral{color:color-mix(in srgb, var(--gold) 75%, transparent);transition:transform .7s var(--ease-out-expo), color .4s;font-size:13px}.mechanism-legend-title{font:400 13px/1.4 var(--face-display);letter-spacing:.15em;text-transform:uppercase;max-width:22ch;transition:transform .6s var(--ease-out-expo), color .4s, opacity .35s ease}.mechanism-legend button:hover .mechanism-legend-tick,.mechanism-legend button:focus-visible .mechanism-legend-tick{background:var(--gold);transform:scaleX(1)}.mechanism-legend button:hover .mechanism-legend-title,.mechanism-legend button:focus-visible .mechanism-legend-title{color:var(--ink);transform:translate(4px)}.mechanism-legend button:hover .numeral{color:var(--gold);transform:rotate(-12deg)}.mechanism-legend button[aria-current=step]{color:var(--ink)}.mechanism-legend button[aria-current=step] .numeral{color:var(--gold)}.mechanism-legend button[aria-current=step] .mechanism-legend-tick{background:var(--gold);transform:scaleX(1)}.mechanism-legend button:focus-visible{outline:1px solid var(--signal);outline-offset:4px}.mechanism-readout{border-left:1px solid color-mix(in srgb, var(--graphite) 35%, transparent);transition:opacity 1s var(--ease-out-expo) .8s;flex-direction:column;grid-area:1/3;justify-self:start;gap:10px;margin:0;padding-left:18px;position:relative}.mechanism-readout:before{content:"";width:var(--gap);background:linear-gradient(to right, transparent, color-mix(in srgb, var(--graphite) 40%, transparent));height:1px;position:absolute;top:50%;right:100%}.mechanism-readout-station{white-space:nowrap;align-items:baseline;gap:10px;display:flex}.mechanism-readout-station .numeral{font-size:30px}.mechanism-readout-of{font:400 13px/1 var(--face-display);letter-spacing:.1em;color:var(--graphite)}.mechanism-readout-angle{font:300 12px/1 var(--face-caption);letter-spacing:.08em;color:var(--graphite);font-variant-numeric:tabular-nums;white-space:nowrap}@media (hover:hover) and (pointer:fine) and (width>=960px) and (prefers-reduced-motion:no-preference){.motion-ready:not(.motion-fallback) .mechanism{max-width:none;height:calc(100svh + var(--count) * 66svh)}.motion-ready:not(.motion-fallback) .mechanism-stage{--gap:clamp(36px, 4.5vw, 84px);--side:210px;--S:min(calc(100svh - 150px), 860px, 56vw, calc(100vw - 2 * var(--gutter) - 2 * var(--gap) - 2 * var(--side)));grid-template-columns:minmax(0, 1fr) var(--S) minmax(0, 1fr);align-items:center;column-gap:var(--gap);height:100svh;padding-top:calc(var(--header-h) * .5);display:grid;position:sticky;top:0}.motion-ready:not(.motion-fallback) .mechanism-legend,.motion-ready:not(.motion-fallback) .mechanism-machine{display:block}.motion-ready:not(.motion-fallback) .mechanism-readout{display:flex}.motion-ready:not(.motion-fallback) .mechanism-steps{z-index:3;width:calc(var(--S) * .46);text-align:center;grid-area:1/2;place-self:center;display:grid}.motion-ready:not(.motion-fallback) .mechanism-step{opacity:0;pointer-events:none;transition:opacity .3s ease, transform .6s var(--ease-out-expo);flex-direction:column;grid-area:1/1;justify-content:center;align-items:center;padding:0;display:flex;transform:translateY(12px)}.motion-ready:not(.motion-fallback) .mechanism-step:before,.motion-ready:not(.motion-fallback) .mechanism-step:after,.motion-ready:not(.motion-fallback) .mechanism-leader{display:none}.motion-ready:not(.motion-fallback) .mechanism-step[data-state=active]{opacity:1;pointer-events:auto;transition:opacity .7s ease .22s, transform 1.1s var(--ease-out-expo) .22s;transform:none}.motion-ready:not(.motion-fallback) .mechanism-station{width:auto;height:auto;box-shadow:none;background:0 0;align-self:center;margin-bottom:14px;transform:none}.motion-ready:not(.motion-fallback) .mechanism-station:before,.motion-ready:not(.motion-fallback) .mechanism-station:after,.motion-ready:not(.motion-fallback) .mechanism-dial{display:none}.motion-ready:not(.motion-fallback) .mechanism-station .numeral{letter-spacing:.12em;font-size:14px}.motion-ready:not(.motion-fallback) .mechanism-step.is-signal .mechanism-station>.numeral:after{width:6px;height:6px;box-shadow:none;margin-left:8px;display:inline-block;position:static}.motion-ready:not(.motion-fallback) .mechanism-title{font-size:clamp(16px, calc(var(--S) * .028), 24px);line-height:1.2}.motion-ready:not(.motion-fallback) .mechanism-rule{background:var(--gold);transform-origin:50%;width:44px;margin:16px 0 14px;transform:scaleX(0)}.motion-ready:not(.motion-fallback) .mechanism-step[data-state=active] .mechanism-rule{transition-delay:.45s;transform:scaleX(1)}.motion-ready:not(.motion-fallback) .mechanism-body{max-width:32ch;font-size:clamp(13.5px, calc(var(--S) * .0205), 16.5px);line-height:1.62}.motion-ready:not(.motion-fallback) .mechanism:not(.is-drawn) .mechanism-ring-line,.motion-ready:not(.motion-fallback) .mechanism:not(.is-drawn) .mechanism-band-edge,.motion-ready:not(.motion-fallback) .mechanism:not(.is-drawn) .mechanism-inlay{stroke-dashoffset:1px}.motion-ready:not(.motion-fallback) .mechanism:not(.is-drawn) .mechanism-band{stroke-dashoffset:2030px}.motion-ready:not(.motion-fallback) .mechanism:not(.is-drawn) .mechanism-ticks{opacity:0;transform:rotate(-24deg)}.motion-ready:not(.motion-fallback) .mechanism:not(.is-drawn) .mechanism-mark{opacity:0;scale:.4}.motion-ready:not(.motion-fallback) .mechanism:not(.is-drawn) .mechanism-core{opacity:0;scale:.9}.motion-ready:not(.motion-fallback) .mechanism:not(.is-drawn) .mechanism-legend-item{opacity:0;transform:translate(-14px)}.motion-ready:not(.motion-fallback) .mechanism:not(.is-drawn) .mechanism-readout{opacity:0}}@media (hover:hover) and (pointer:fine) and (width>=960px) and (width<=1199px) and (prefers-reduced-motion:no-preference){.motion-ready:not(.motion-fallback) .mechanism-stage{--side:112px}.motion-ready:not(.motion-fallback) .mechanism-legend{z-index:4}.motion-ready:not(.motion-fallback) .mechanism-legend-title{white-space:nowrap;max-width:none;color:var(--ink);background:var(--porcelain);box-shadow:0 0 0 1px var(--hairline), 0 8px 18px -12px color-mix(in srgb, var(--ink) 40%, transparent);opacity:0;pointer-events:none;padding:7px 10px;position:absolute;top:50%;left:calc(100% + 6px);transform:translate(-6px)}.motion-ready:not(.motion-fallback) .mechanism-legend button:hover .mechanism-legend-title,.motion-ready:not(.motion-fallback) .mechanism-legend button:focus-visible .mechanism-legend-title{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.mechanism-step:after,.mechanism-station,.mechanism-dial,.mechanism-leader:after,.mechanism-bulb,.mechanism-rule,.mechanism-step,.mechanism-mark,.mechanism-face,.mechanism-core{transition:none}}