:where(.fn-cube){--ease-metal:cubic-bezier(.16, .7, .2, 1);--dur-enter:.52s;--dur-object:.64s;--dur-settle:1.3s;--stagger:40ms;--type-label:.6875rem;--track-label:.08em;--surface-line:var(--stage-line,#f7f5ef24);--surface-fg:var(--stage-ink,#f7f5efeb);--surface-fg-3:var(--stage-ink-2,#f7f5efa8);--grid-gap:2rem;--cube-scene-bg:var(--stage,#14110e)}.fn-cube-frame{aspect-ratio:1;margin:0;position:relative}.fn-cube-layer{position:absolute;inset:0}.fn-cube-frame picture,.fn-cube-frame img{width:100%;height:100%;display:block}.fn-cube-hero{position:relative}.fn-cube-piece{pointer-events:none;position:absolute;inset:0}.fn-cube-piece>div{position:absolute;inset:0}.fn-cube-frame .fn-cube-piece img{height:auto;display:block;position:absolute}.fn-cube-closing{position:relative}.fn-cube-copper{transform-origin:50% 100%;display:block;position:absolute}.fn-cube-frame .fn-cube-copper,.fn-cube-frame .fn-cube-copper img{height:auto}.fn-cube-flash{opacity:0;pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.fn-cube-flash polygon{fill:none;stroke:var(--fn-rose,#e0a985);stroke-width:1.25px;vector-effect:non-scaling-stroke;stroke-linejoin:round}.fn-cube-scene{grid-template-columns:minmax(0,1fr);display:grid;position:relative}.fn-cube-sticky-col{z-index:1;background:var(--cube-scene-bg);flex-direction:column;justify-content:center;align-items:center;gap:.75rem;height:40svh;padding-block:.75rem;display:flex;position:sticky;top:0}.fn-cube-stage{aspect-ratio:1;flex:auto;max-width:100%;height:100%;min-height:0}.fn-cube-stage .fn-cube-layer{opacity:0}.fn-cube-stage .fn-cube-layer[data-active]{opacity:1}.fn-cube-panels{display:grid}.fn-cube-panel{flex-direction:column;justify-content:center;gap:1.25rem;min-height:62svh;padding-block:2.5rem;display:flex}.fn-cube-panel-figure{display:none}@media (min-width:1024px){.fn-cube-scene{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(2rem,5vw,5rem)}.fn-cube-sticky-col{background:0 0;align-self:start;gap:1.5rem;height:100svh;max-height:56rem;padding-block:3rem;top:max(0px,50svh - 28rem)}.fn-cube-stage{flex:0 auto;width:100%;height:auto;max-height:calc(100% - 4rem)}.fn-cube-panel{min-height:78svh}}.fn-cube-phase-line{width:min(100%,28rem)}.fn-cube-phase-labels{font:400 var(--type-label) / 1.3 var(--font-mono,ui-monospace, monospace);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--surface-fg-3);grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;margin:0;padding:0;list-style:none;display:grid}.fn-cube-phase-labels li{transition:color .18s linear}.fn-cube-phase-labels li[data-reached]{color:var(--surface-fg)}.fn-cube-phase-track{background:var(--surface-line);height:1px;margin-top:.5rem;position:relative;overflow:hidden}.fn-cube-phase-fill{background:var(--metal-rule,linear-gradient(90deg, #8a5e44, #b9805f 34%, #e0a985 70%, #f3d3ad));transform-origin:0;transition:transform var(--dur-settle) var(--ease-metal);position:absolute;inset:0}@media (prefers-reduced-motion:reduce){.fn-cube-scene{grid-template-columns:minmax(0,1fr)}.fn-cube-sticky-col{display:none}.fn-cube-panel{grid-template-columns:minmax(0,1fr);align-items:center;min-height:0;display:grid}.fn-cube-panel-figure{width:min(60%,14rem);display:block}.fn-cube-panel-figure figcaption{font:400 var(--type-label) / 1.3 var(--font-mono,ui-monospace, monospace);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--surface-fg-3);margin-top:.5rem}.fn-cube-phase-fill{transition:none}}@media (prefers-reduced-motion:reduce) and (min-width:640px){.fn-cube-panel{column-gap:var(--grid-gap);grid-template-columns:minmax(0,14rem) minmax(0,1fr)}.fn-cube-panel-figure{width:100%}}.fn-cube-motion[data-cube-state=playing] [data-cube-part]{will-change:transform, opacity}@media (prefers-reduced-motion:no-preference) and (scripting:enabled){.fn-cube-motion[data-cube-state=idle] [data-cube-part=layer-0]{opacity:0;transform:translateY(calc(1% * var(--cube-travel)))}.fn-cube-motion[data-cube-state=idle] [data-cube-part=layer-1]{opacity:0}.fn-cube-motion[data-cube-state=idle] [data-cube-part=layer-2]{opacity:0;transform:translateY(calc(-1% * var(--cube-travel)))}.fn-cube-motion[data-cube-state=idle] :is([data-cube-part=gold],[data-cube-part=floater]),.fn-cube-motion[data-cube-motion=assemble][data-cube-state=idle] [data-cube-part=copper]{opacity:0;transform:translateY(-4%)}.fn-cube-motion[data-cube-motion=click][data-cube-state=idle] [data-cube-part=copper]{opacity:0;transform:translateY(-90%)}}
