@property --mx-yaw{syntax:"<angle>";inherits:true;initial-value:0deg}@property --mx-pitch{syntax:"<angle>";inherits:true;initial-value:0deg}@property --mx-gap{syntax:"<number>";inherits:true;initial-value:4.8}@property --mx-lift{syntax:"<number>";inherits:true;initial-value:0}.mx{--mx-ease:cubic-bezier(.22, 1, .36, 1);--mx-top:color-mix(in oklab, white 60%, var(--background));--mx-left:color-mix(in oklab, var(--foreground) 5%, var(--background));--mx-right:color-mix(in oklab, var(--foreground) 10%, var(--background));--mx-edge:color-mix(in oklab, var(--foreground) 30%, var(--background));--mx-crease:color-mix(in oklab, var(--foreground) 15%, var(--background));--mx-grid:color-mix(in oklab, var(--foreground) 6%, transparent);--mx-ink:color-mix(in oklab, var(--foreground) 50%, var(--background));--mx-lit:var(--foreground);--mx-lit-top:white;--mx-core-top:color-mix(in oklab, var(--foreground) 90%, var(--background));--mx-core-left:color-mix(in oklab, var(--foreground) 96%, var(--background));--mx-core-right:var(--foreground);--mx-core-edge:color-mix(in oklab, var(--background) 22%, var(--foreground));--mx-core-ink:var(--background);--mx-dot:color-mix(in oklab, var(--foreground) 22%, transparent);--mx-shadow:color-mix(in oklab, var(--foreground) 16%, transparent);--mx-cast:color-mix(in oklab, var(--foreground) 6%, transparent);--mx-wire:color-mix(in oklab, var(--foreground) 28%, transparent);--mx-tag:color-mix(in oklab, var(--foreground) 5%, var(--background));font-family:var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif}:is([data-tone=dark],.dark) .mx{--mx-top:color-mix(in oklab, var(--foreground) 10%, var(--background));--mx-left:color-mix(in oklab, var(--foreground) 5.5%, var(--background));--mx-right:color-mix(in oklab, var(--foreground) 2.5%, var(--background));--mx-edge:color-mix(in oklab, var(--foreground) 30%, var(--background));--mx-crease:color-mix(in oklab, var(--foreground) 15%, var(--background));--mx-grid:color-mix(in oklab, var(--foreground) 5%, transparent);--mx-ink:color-mix(in oklab, var(--foreground) 56%, var(--background));--mx-lit-top:color-mix(in oklab, var(--foreground) 17%, var(--background));--mx-core-top:color-mix(in oklab, var(--foreground) 96%, var(--background));--mx-core-left:color-mix(in oklab, var(--foreground) 76%, var(--background));--mx-core-right:color-mix(in oklab, var(--foreground) 60%, var(--background));--mx-core-edge:var(--foreground);--mx-dot:color-mix(in oklab, var(--foreground) 16%, transparent);--mx-shadow:#0009;--mx-cast:#00000042;--mx-wire:color-mix(in oklab, var(--foreground) 24%, transparent);--mx-tag:color-mix(in oklab, var(--foreground) 8%, var(--background))}@supports (color:lab(0% 0 0)){:is([data-tone=dark],.dark) .mx{--mx-shadow:lab(0% 0 0/.6);--mx-cast:lab(0% 0 0/.26)}}.mx-layout{align-items:center;gap:2rem;display:grid}.mx-scene{order:-1;container-type:inline-size}@container (min-width:52rem){.mx-layout{grid-template-columns:19rem minmax(0,1fr);gap:3rem}.mx-scene{order:0}}.mx-viewport{perspective:200em;perspective-origin:50% 30%;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;height:62em;font-size:min(1.72414cqi,12.5px);position:relative}.mx-world{--mx-rz:calc(45deg + var(--mx-yaw));--mx-rx:calc(62deg + var(--mx-pitch));width:0;height:0;transform-style:preserve-3d;transform:rotateX(var(--mx-rx)) rotateZ(var(--mx-rz));transition:--mx-yaw 1.2s var(--mx-ease), --mx-pitch 1.2s var(--mx-ease), --mx-gap .35s ease-out;pointer-events:none;position:absolute;top:70%;left:50%}.mx-world *{transform-style:preserve-3d}.mx-floor{background-image:radial-gradient(circle, var(--mx-dot) .08em, transparent .1em);background-position:1em 1em;background-size:2em 2em;width:72em;height:72em;position:absolute;top:-36em;left:-36em;transform:translateZ(-.05em);-webkit-mask-image:radial-gradient(closest-side,#000 35%,#0000);mask-image:radial-gradient(closest-side,#000 35%,#0000)}.mx-box{--face-top:var(--mx-top);--face-left:var(--mx-left);--face-right:var(--mx-right);--face-edge:var(--mx-edge);width:calc(var(--w) * 1em);height:calc(var(--d) * 1em);transform:translate3d(calc((var(--x) - var(--w) / 2) * 1em), calc((var(--y) - var(--d) / 2) * 1em), calc((var(--z) + var(--mx-lift)) * 1em));position:absolute;top:0;left:0}.mx-face{box-sizing:border-box;border:0 solid var(--face-edge);transform-origin:0 0;transition:background-color .6s var(--mx-ease), border-color .6s var(--mx-ease), color .6s var(--mx-ease);position:absolute;top:0;left:0}.mx-face[data-face=top]{border-radius:calc(var(--r) * 1em);background-color:var(--face-top);width:100%;height:100%;transform:translateZ(calc(var(--h) * 1em));border-width:1px;place-items:center;display:grid}.mx-face[data-face=left]{width:calc((var(--w) - 2 * var(--r)) * 1em);height:calc(var(--h) * 1em);background-color:var(--face-left);transform:translate3d(calc(var(--r) * 1em), calc(var(--d) * 1em), calc(var(--h) * 1em)) rotateX(-90deg);border-bottom-width:1px}.mx-face[data-face=right]{width:calc((var(--d) - 2 * var(--r)) * 1em);height:calc(var(--h) * 1em);background-color:var(--face-right);transform:translate3d(calc(var(--w) * 1em), calc((var(--d) - var(--r)) * 1em), calc(var(--h) * 1em)) rotateZ(-90deg) rotateX(-90deg);border-bottom-width:1px}.mx-face[data-face=facet]{width:calc(var(--fc) * 1em + .5px);height:calc(var(--h) * 1em);background-color:color-mix(in oklab, var(--face-left) calc(var(--ft) * 1%), var(--face-right));transform:translate3d(calc(var(--fx) * 1em), calc(var(--fy) * 1em), calc(var(--h) * 1em)) rotateZ(var(--fa)) rotateX(-90deg);border-bottom-width:1px}.mx-face[data-corner=left]{border-left-width:1px}.mx-face[data-corner=right]{border-right-width:1px}.mx-cast{left:calc(var(--cl) * 1em);top:calc(var(--ct) * 1em);width:calc(var(--cw) * 1em);height:calc(var(--cd) * 1em);border-radius:calc(var(--cr) * 1em);background:var(--mx-cast);filter:blur(calc(.2em + var(--dz) * .04em + var(--cw) * .05em));translate:calc(var(--dz) * .04em) calc(var(--dz) * .07em);position:absolute;scale:.92}.mx-shadow{border-radius:calc(var(--r) * 1em);background:var(--mx-shadow);filter:blur(.6em);opacity:calc(1 - var(--mx-lift) * .45);transform:translate3d(.5em, .5em, calc((.02 - var(--mx-lift)) * 1em));position:absolute;inset:0}.mx-box:is([data-kind=core],[data-kind=plate],[data-kind=float]) .mx-shadow{display:none}.mx-icon{width:50%;height:50%;color:var(--mx-ink);transition:color .6s var(--mx-ease);transform:rotate(-45deg)}.mx-box[data-kind=base] [data-face=top]{background-image:linear-gradient(var(--mx-grid) 1px, transparent 1px), linear-gradient(90deg, var(--mx-grid) 1px, transparent 1px);box-shadow:inset 0 0 0 1.6em var(--mx-top), inset 0 0 0 calc(1.6em + 1px) var(--mx-crease);background-position:-1px -1px;background-size:2em 2em}.mx-lamp{left:calc((var(--lu) - .35) * 1em);top:calc((var(--lv) - .35) * 1em);background:var(--mx-crease);width:.7em;height:.7em;transition:background-color .4s var(--mx-ease);border-radius:.14em;position:absolute}.mx-part[data-state=on] .mx-lamp{background:var(--mx-lit);transition-delay:calc(var(--k) * 70ms)}.mx-box[data-kind=base] .mx-icon{width:2.6em;height:2.6em;position:absolute;bottom:2.4em;right:2.4em}.mx-ruler{background-image:repeating-linear-gradient(to right, var(--mx-crease) 0 1px, transparent 1px 6em), repeating-linear-gradient(to right, var(--mx-crease) 0 1px, transparent 1px 1em);background-position:0 100%,0 100%;background-repeat:no-repeat;background-size:100% 100%,100% 50%;height:62%;position:absolute;bottom:0;left:1.2em;right:1.2em}.mx-box[data-kind=plate] [data-face=top]{outline:1px dashed var(--mx-crease);outline-offset:-1.1em}.mx-box[data-kind=core]{--face-top:var(--mx-core-top);--face-left:var(--mx-core-left);--face-right:var(--mx-core-right);--face-edge:var(--mx-core-edge);color:var(--mx-core-ink)}.mx-dial{width:86%;height:86%;position:absolute;inset:7%;overflow:visible}.mx-engrave{fill:none;stroke:currentColor;stroke-width:1px;opacity:.22;vector-effect:non-scaling-stroke}.mx-mark{aspect-ratio:1;width:32%;display:grid;transform:rotate(-45deg)}.mx-mark svg{width:100%!important;height:100%!important}.mx-part{width:0;height:0;font:inherit;color:inherit;cursor:pointer;transition:--mx-lift .7s var(--mx-ease);background:0 0;border:0;outline:none;padding:0;position:absolute;top:0;left:0}.mx-part .mx-face,.mx-part .mx-tag{pointer-events:auto}.mx-part[data-state=on]{--mx-lift:.8}.mx-part[data-id=meridian][data-state=on],.mx-part[data-id=security][data-state=on]{--mx-lift:.4}.mx-part[data-state=on] .mx-box:not([data-kind=core]){--face-edge:var(--mx-lit)}.mx-part[data-state=on] .mx-box:is([data-kind=key],[data-kind=float]){--face-top:var(--mx-lit-top)}.mx-part:is([data-state=on],[data-state=near]) .mx-icon{color:var(--mx-lit)}.mx-part[data-state=near] .mx-box:not([data-kind=core]){--face-edge:color-mix(in oklab, var(--mx-lit) 55%, var(--mx-edge))}.mx-part[data-state=off] .mx-icon{color:color-mix(in oklab, var(--mx-ink) 55%, var(--mx-top))}.mx-part[data-state=off] .mx-box:not([data-kind=core]){--face-edge:color-mix(in oklab, var(--mx-edge) 60%, var(--mx-crease))}.mx-part:focus-visible [data-face=top]{outline:2px solid var(--ring);outline-offset:.35em}.mx-label{width:max-content;transform:translate3d(calc(var(--lx) * 1em), calc(var(--ly) * 1em), calc((var(--lz) + var(--mx-lift)) * 1em)) rotateZ(calc(-1 * var(--mx-rz))) rotateX(calc(-1 * var(--mx-rx))) translate(var(--ax), var(--ay));position:absolute;top:0;left:0}.mx-label[data-hang=above]{--ax:-50%;--ay:-100%}.mx-label[data-hang=below]{--ax:-50%;--ay:45%}.mx-label[data-hang=on]{--ax:-50%;--ay:-50%}.mx-label[data-hang=left]{--ax:calc(-100% - 1.2em);--ay:-50%}.mx-tag{background:var(--mx-tag);color:var(--mx-ink);letter-spacing:-.005em;white-space:nowrap;transition:background-color .5s var(--mx-ease), color .5s var(--mx-ease);border-radius:.55em;padding:.4em .62em .44em;font-size:max(10.5px,.98em);font-weight:500;line-height:1;display:block}.mx-part[data-state=near] .mx-tag{color:var(--foreground)}.mx-part[data-state=on] .mx-tag{background:var(--foreground);color:var(--background)}@container (max-width:32rem){.mx-viewport{font-size:1.5625cqi}.mx-part:not([data-state=on]) .mx-label,.mx[data-focus=layer] .mx-label{visibility:hidden}}.mx-wire{width:1px;height:calc((var(--z1) - var(--z0)) * 1em);transform-origin:0 0;transform:translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z1) * 1em)) rotateZ(-45deg) rotateX(-90deg);background-image:repeating-linear-gradient(to bottom, var(--mx-wire) 0 .3em, transparent .3em .75em);transform-style:flat;position:absolute;top:0;left:0;overflow:hidden}.mx-wire[data-lit]{background-image:repeating-linear-gradient(to bottom, var(--mx-ink) 0 .3em, transparent .3em .75em);width:1.5px;animation:.9s linear infinite mx-flow}.mx-wire:after{content:"";background:linear-gradient(to bottom, var(--mx-lit), transparent);opacity:0;width:100%;height:3.2em;position:absolute;top:100%;left:0}.mx-wire[data-lit]:after{opacity:1;animation:2.4s cubic-bezier(.45,0,.55,1) infinite mx-packet;animation-delay:calc(var(--j) * -.41s)}@keyframes mx-flow{to{background-position:0 -.75em}}@keyframes mx-packet{0%{top:100%}to{top:-3.2em}}@media (min-width:64rem) and (min-height:48rem){.mx-track{height:260svh}.mx-frame{flex-direction:column;justify-content:center;height:100svh;padding-top:4.25rem;display:flex;position:sticky;top:0}.mx-viewport{font-size:min(1.72414cqi,12.5px,1.6129svh - .104839rem)}}.mx-panel{flex-direction:column;gap:2rem;display:flex}.mx-copies{display:grid}.mx-copy{opacity:0;visibility:hidden;transition:opacity .3s var(--mx-ease), translate .5s var(--mx-ease), visibility 0s .3s;grid-area:1/1;translate:0 6px}.mx-copy[data-on]{opacity:1;visibility:visible;transition:opacity .5s var(--mx-ease) .12s, translate .6s var(--mx-ease) .12s, visibility 0s;translate:0}.mx-index{gap:.25rem;display:flex}.mx-step{cursor:pointer;background:0 0;border:0;flex:1;height:1.5rem;padding:0;position:relative}.mx-step:before{content:"";background:var(--border);height:2px;transition:background-color .4s var(--mx-ease);border-radius:1px;margin-top:-1px;position:absolute;inset:50% 0 auto}.mx-step:hover:before{background:color-mix(in oklab, var(--foreground) 30%, var(--background))}.mx-step[data-on]:before{background:var(--foreground)}.mx-step:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:4px}.mx:not([data-inview]) .mx-wire{animation-play-state:paused}@media (prefers-reduced-motion:reduce){.mx-world,.mx-part{transition:none}.mx-wire[data-lit],.mx-wire[data-lit]:after{animation:none}.mx-wire[data-lit]:after{opacity:0}}