@property --sw{syntax:"<number>";inherits:true;initial-value:0}.mq{--m:calc(var(--stage,min(760px, 92vw)) / 100);--ox:0px;--wy:-16vh;--tilt:60;--spin:-34;--gap:17;--oth:1;--hs:1;--dress:1;--paint:1;--fill:1;--ink:1;--under:0;--grid:0;--zoom:1;--escLen:17;--escRot:54;--towerH:31;--vac:#d9d4cc;perspective:calc(var(--m) * 260);perspective-origin:50% 42%;pointer-events:none;position:absolute;inset:0;overflow:hidden}.mq[data-mode=live]{--wy:0px;perspective-origin:50%}@media (min-width:1024px){.mq[data-mode=story]{--stage:min(700px, 47vw);--ox:13vw;--wy:0px}}.mq-world{width:calc(var(--m) * 100);height:calc(var(--m) * 64);transform-style:preserve-3d;transform:translate(-50%, -50%) translate(var(--ox), var(--wy)) scale3d(var(--zoom), var(--zoom), var(--zoom)) rotateX(calc(var(--tilt) * 1deg)) rotateZ(calc(var(--spin) * 1deg));position:absolute;top:50%;left:50%}.mq-sway{transform-style:preserve-3d;animation:mq-sway 18s var(--ease-settle) infinite alternate;transform:rotateZ(calc(var(--sw) * var(--hs) * 1deg));position:absolute;inset:0}@keyframes mq-sway{0%{--sw:-1.3}to{--sw:1.3}}.mq-floor{transform-style:preserve-3d;--vis:1;position:absolute;inset:0}.mq-floor--first{--vis:var(--oth);transform:translateZ(calc((var(--gap) + (1 - var(--oth)) * 40) * var(--m)))}.mq-floor--park{--vis:var(--oth);transform:translateZ(calc((var(--gap) + (1 - var(--oth)) * 40) * var(--m) * -1))}.mq-onslab{transform-style:preserve-3d;transform:translateZ(calc(.7 * var(--hs) * var(--m)));position:absolute;inset:0}.mq-box{left:calc(var(--x) * var(--m));top:calc(var(--y) * var(--m));width:calc(var(--w) * var(--m));height:calc(var(--d) * var(--m));transform-style:preserve-3d;--H:calc(var(--bh) * var(--hs) * var(--m));--rad:calc(var(--r) * var(--m));position:absolute}.mq-f{backface-visibility:hidden;display:block;position:absolute}.mq-f--t{background:color-mix(in oklab, color-mix(in oklab, var(--c), #f5f0e8 calc((1 - var(--hs)) * 60%)), var(--vac) calc((1 - var(--paint)) * 100%));border-radius:var(--rad);transform:translateZ(var(--H));opacity:calc(var(--vis) * var(--fill));inset:0}.mq-f--s{width:100%;height:var(--H);transform-origin:50% 100%;background:color-mix(in oklab, var(--c), black 9%);opacity:var(--vis);bottom:0;left:0;overflow:hidden;transform:rotateX(-90deg)}.mq-f--w{width:var(--H);transform-origin:0;background:color-mix(in oklab, var(--c), black 24%);height:100%;opacity:var(--vis);top:0;left:0;transform:rotateY(-90deg)}.mq-f--sh{border-radius:var(--rad);box-shadow:calc(var(--H) * -.22) calc(var(--H) * -.3) calc(var(--H) * .6) #3a4a5c42;opacity:var(--vis);inset:0;transform:translateZ(.3px)}.mq-wall,.mq-glass,.mq-slab,.mq-car,.mq-col,.mq-tower{--vac:var(--c)}.mq-wall .mq-f--t,.mq-slab .mq-f--t{background:var(--c);border-radius:0}.mq-slab .mq-f--s{background:#e4ddd2}.mq-slab .mq-f--w{background:#d6cfc3}.mq-glass .mq-f--s,.mq-glass .mq-f--w{background:var(--c)}.mq-glass .mq-f--t{background:#ffffffb3;border-radius:0}.mq-car .mq-f--t{border-radius:calc(var(--m) * .55)}.mq-tower{--bh:var(--towerH)!important}.mq-tower .mq-f--t{background:#e9e3d8}.mq-unit .mq-f--t:after{content:"";border-radius:inherit;background-image:repeating-linear-gradient(-45deg, transparent 0 calc(var(--m) * .8), #3b30291a calc(var(--m) * .8) calc(var(--m) * 1.6));opacity:calc(1 - var(--paint));position:absolute;inset:0}.mq-sign{padding:0 calc(var(--m) * .4);font-family:var(--font-sans);font-weight:800;font-size:calc(var(--m) * 1.15);letter-spacing:.02em;color:#fff;white-space:nowrap;opacity:var(--hs);justify-content:center;align-items:center;line-height:1;display:flex;position:absolute;inset:0}.mq-unit--small .mq-sign{font-size:calc(var(--m) * .95)}.mq-unit--dark .mq-sign{color:#3b3029}.mq-label{text-align:center;padding:calc(var(--m) * .4);font-family:var(--font-sans);font-weight:800;font-size:calc(var(--m) * 1.25);color:#3b3029;opacity:calc((1 - var(--hs)) * var(--paint));justify-content:center;align-items:center;line-height:1.1;display:flex;position:absolute;inset:0}@media (max-width:640px){.mq-sign,.mq-label{display:none}}.mq-awning{left:calc(var(--x) * var(--m));top:calc(var(--y) * var(--m));width:calc(var(--w) * var(--m));height:calc(var(--m) * 1.4);transform-origin:50% 0;transform:translateZ(calc(var(--bh) * var(--hs) * var(--m) * .78)) rotateX(-32deg);background:repeating-linear-gradient(90deg, color-mix(in oklab, var(--c), white 40%) 0 calc(var(--m) * .9), #fff calc(var(--m) * .9) calc(var(--m) * 1.8));border-radius:0 0 calc(var(--m) * .35) calc(var(--m) * .35);scale:var(--dress) var(--dress) var(--dress);position:absolute}.mq-awning--n{top:calc((var(--y) - 1.4) * var(--m));transform-origin:50% 100%;transform:translateZ(calc(var(--bh) * var(--hs) * var(--m) * .78)) rotateX(32deg);border-radius:calc(var(--m) * .35) calc(var(--m) * .35) 0 0}.mq-unitwrap{transform-style:preserve-3d;position:absolute;inset:0}.mq-flat{left:calc(var(--x) * var(--m));top:calc(var(--y) * var(--m));width:calc(var(--w) * var(--m));height:calc(var(--d) * var(--m));background:var(--c);opacity:calc(var(--vis) * var(--fill));position:absolute}.mq-ground{border-radius:calc(var(--m) * 1.5);box-shadow:0 calc(var(--m) * 4) calc(var(--m) * 6) #00000059}.mq-terrain{opacity:calc(var(--vis) * var(--fill) * var(--dress))}.mq-road:after{content:"";height:calc(var(--m) * .22);background:repeating-linear-gradient(90deg, #efe9dd 0 calc(var(--m) * 2), transparent calc(var(--m) * 2) calc(var(--m) * 4));position:absolute;top:50%;left:0;right:0}.mq-crossing{background-image:repeating-linear-gradient(90deg, #faf7f0 0 calc(var(--m) * .7), transparent calc(var(--m) * .7) calc(var(--m) * 1.25))}.mq-zone{border-radius:calc(var(--m) * .6);opacity:calc(var(--vis) * var(--fill) * var(--paint))}.mq-stalls{background-image:repeating-linear-gradient(90deg, transparent 0 calc(var(--m) * 2.45), #ffffffe6 calc(var(--m) * 2.45) calc(var(--m) * 2.6))}.mq-grid{left:calc(var(--m) * -150);top:calc(var(--m) * -100);width:calc(var(--m) * 400);height:calc(var(--m) * 264);background-image:linear-gradient(var(--color-line) 1px, transparent 1px), linear-gradient(90deg, var(--color-line) 1px, transparent 1px), linear-gradient(var(--color-line-strong) 1px, transparent 1px), linear-gradient(90deg, var(--color-line-strong) 1px, transparent 1px);background-size:calc(var(--m) * 2) calc(var(--m) * 2), calc(var(--m) * 2) calc(var(--m) * 2), calc(var(--m) * 10) calc(var(--m) * 10), calc(var(--m) * 10) calc(var(--m) * 10);opacity:var(--grid)}.mq-underlay{opacity:var(--under);transform:translateZ(.4px) rotate(1.6deg) translate(calc(var(--m) * 1.2), calc(var(--m) * -.8));filter:drop-shadow(0 calc(var(--m) * 1.5) calc(var(--m) * 2) #3b30292e);position:absolute;inset:0}.mq-underlay__svg{width:100%;height:100%;display:block;overflow:visible}.mq-outlines{width:100%;height:100%;opacity:calc(1 - var(--hs));position:absolute;inset:0;overflow:visible;transform:translateZ(.8px)}.mq-outlines path{fill:none;stroke:var(--color-ink);stroke-width:.28px;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}.mq-outlines path[data-kind=building]{stroke-width:.5px}.mq-outlines path[data-kind=hall]{stroke:var(--color-ink-muted)}.mq-outlines .mq-door{stroke:var(--color-accent);stroke-width:.6px;stroke-dasharray:none;opacity:var(--ink)}.mq-cursor{width:calc(var(--m) * 4);height:calc(var(--m) * 4);margin:calc(var(--m) * -.5) 0 0 calc(var(--m) * -.85);opacity:0;transition:opacity .3s var(--ease-settle);position:absolute;top:0;left:0}.mq-cursor svg{width:100%;height:100%;fill:var(--color-ink);stroke:#fff;stroke-width:1.5px;stroke-linejoin:round;filter:drop-shadow(0 2px 3px #0000004d)}.mq-route{width:100%;height:100%;transform:translateZ(calc(var(--m) * .25));opacity:var(--dress);position:absolute;inset:0;overflow:visible}.mq-route path{fill:none;stroke:var(--color-accent-route);stroke-width:.7px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1px;filter:drop-shadow(0 0 calc(var(--m) * .3) #4ecdc4b3)}.mq-dot{left:calc(var(--m) * -.9);top:calc(var(--m) * -.9);width:calc(var(--m) * 1.8);height:calc(var(--m) * 1.8);border:calc(var(--m) * .35) solid var(--color-accent-route);box-shadow:0 0 calc(var(--m) * 1.2) #4ecdc4e6;opacity:0;scale:var(--dress) var(--dress) var(--dress);background:#fff;border-radius:50%;position:absolute}.mq-esc{left:calc(var(--x) * var(--m));top:calc((var(--y0) - var(--escLen)) * var(--m));width:calc(var(--w) * var(--m));height:calc(var(--escLen) * var(--m));transform-origin:50% 100%;transform:rotateX(calc(var(--escRot) * -1deg));opacity:var(--oth);position:absolute}.mq-esc__belt{background:repeating-linear-gradient(0deg, #c9cccf 0 calc(var(--m) * .5), #ebe8e2 calc(var(--m) * .5) calc(var(--m) * 1));border-left:calc(var(--m) * .28) solid #8c9196;border-right:calc(var(--m) * .28) solid #8c9196;position:absolute;inset:0}.mq-dressed{scale:var(--dress) var(--dress) var(--dress)}.mq[data-bare] .mq-dressed,.mq[data-bare] .mq-esc,.mq[data-bare] .mq-dot,.mq[data-bare] .mq-route{visibility:hidden}.mq-tree{left:calc(var(--x) * var(--m));top:calc(var(--y) * var(--m));width:0;height:0;transform-style:preserve-3d;--sz:calc(var(--s) * var(--m));position:absolute}.mq-tree__shadow{width:calc(var(--sz) * 3.6);height:calc(var(--sz) * 3.2);left:calc(var(--sz) * -2.4);top:calc(var(--sz) * -2.3);filter:blur(calc(var(--m) * .4));background:#3a4a5c33;border-radius:50%;position:absolute}.mq-tree__crown{animation:mq-crown 7s var(--ease-settle) infinite alternate;animation-delay:calc(var(--x) * -.13s);border-radius:50%;position:absolute}.mq-tree__crown--a{width:calc(var(--sz) * 3.2);height:calc(var(--sz) * 3.2);left:calc(var(--sz) * -1.6);top:calc(var(--sz) * -1.6);transform:translateZ(calc(var(--sz) * 2.2));background:#8dbf7a}.mq-tree__crown--b{width:calc(var(--sz) * 2.1);height:calc(var(--sz) * 2.1);left:calc(var(--sz) * -1.05);top:calc(var(--sz) * -1.05);transform:translateZ(calc(var(--sz) * 3.3));background:#a6d08f}@keyframes mq-crown{0%{translate:calc(var(--sz) * -.12) calc(var(--sz) * .08)}to{translate:calc(var(--sz) * .12) calc(var(--sz) * -.08)}}.mq-pin{left:calc(var(--x) * var(--m));top:calc(var(--y) * var(--m));width:0;height:0;transform-style:preserve-3d;animation:mq-bob 3s var(--ease-pop) infinite;animation-delay:calc(var(--x) * -41ms);position:absolute}.mq-pin__shadow{width:calc(var(--m) * 1.4);height:calc(var(--m) * .9);left:calc(var(--m) * -.7);top:calc(var(--m) * -.45);background:#3a4a5c40;border-radius:50%;position:absolute}.mq-pin__stem{left:calc(var(--m) * -.14);width:calc(var(--m) * .28);height:calc(var(--m) * 2.3);background:var(--color-ink);transform-origin:50% 100%;border-radius:999px;position:absolute;bottom:0;transform:rotateX(-90deg)}.mq-pin__head{left:calc(var(--m) * -1);width:calc(var(--m) * 2);height:calc(var(--m) * 2);background:var(--c);border:calc(var(--m) * .3) solid #fff;transform-origin:50% 100%;transform:rotateX(-90deg) translateY(calc(var(--m) * -1.9));border-radius:50%;position:absolute;bottom:0;box-shadow:0 2px 6px #00000040}@keyframes mq-bob{0%,24%,to{transform:translateZ(0)}12%{transform:translateZ(calc(var(--m) * 1.1))}}.mq-mover{width:0;height:0;transform-style:preserve-3d;position:absolute;top:0;left:0}.mq-person{width:0;height:0;transform-style:preserve-3d;animation:mq-step .5s var(--ease-settle) infinite alternate;animation-delay:calc(var(--ph) * -1s);position:absolute;top:0;left:0}.mq-person__shadow{width:calc(var(--m) * 1.1);height:calc(var(--m) * .7);left:calc(var(--m) * -.55);top:calc(var(--m) * -.35);background:#3a4a5c38;border-radius:50%;position:absolute}.mq-person__body{left:calc(var(--m) * -.38);width:calc(var(--m) * .76);height:calc(var(--m) * 1.35);background:var(--c);transform-origin:50% 100%;border-radius:45% 45% 30% 30%/40% 40% 20% 20%;position:absolute;bottom:0;transform:rotateX(-90deg)}.mq-person__head{left:calc(var(--m) * -.3);width:calc(var(--m) * .6);height:calc(var(--m) * .6);transform-origin:50% 100%;transform:rotateX(-90deg) translateY(calc(var(--m) * -1.45));background:#f1c9a8;border-radius:50%;position:absolute;bottom:0}@keyframes mq-step{0%{transform:translateZ(0)}to{transform:translateZ(calc(var(--m) * .14))}}.mq-table{left:calc(var(--x) * var(--m));top:calc(var(--y) * var(--m));width:0;height:0;transform-style:preserve-3d;position:absolute}.mq-table__top{width:calc(var(--m) * 1.7);height:calc(var(--m) * 1.7);left:calc(var(--m) * -.85);top:calc(var(--m) * -.85);box-shadow:0 0 0 calc(var(--m) * .3) #a0785a59;transform:translateZ(calc(var(--m) * .75 * var(--hs)));background:#fff;border-radius:50%;position:absolute}@media (prefers-reduced-motion:reduce){.mq-sway,.mq-pin,.mq-person,.mq-tree__crown{animation:none}}
