:root{--grid-select-default-cover-color: #ccc}.grid-select{--columns: 10;--rows: 1;--gap: 0;--slot-radius: 0;--page-btn-size: 10vw;--page-btn-icon-size: 70%;display:flex;flex-direction:column;gap:.5rem;width:100%}.grid-select-slots{display:grid;grid-template-columns:repeat(var(--columns),1fr);grid-template-rows:repeat(var(--rows),1fr);gap:var(--gap)}.grid-select-slot{background:center no-repeat;background-color:var(--cover-color);background-image:var(--cover-image);background-size:cover;border-radius:var(--slot-radius);width:100%;padding-top:100%!important}.grid-select-pages{display:flex;gap:.25rem}.grid-select-page-btn{display:flex;align-items:center;justify-content:center;width:var(--page-btn-size);height:var(--page-btn-size)}.designer-screen .grid-select-page-btn-icon{width:var(--page-btn-icon-size);height:var(--page-btn-icon-size)}.tabs-com{width:100%;max-width:100%;height:100%;overflow:auto;scroll-behavior:smooth}.tabs-layout{display:flex;align-items:center}.tabs-tab{text-wrap:nowrap;overflow:hidden;line-height:2;flex-shrink:0}@property --pinboard-width{syntax: "<length>"; initial-value: 0px; inherits: false;}.pinboard-layout{--pinboard-width: 500px;--original-width: 500px;--original-height: 500px;--ratio: tan(atan2(var(--pinboard-width), var(--original-width)));width:calc(var(--original-width) * var(--ratio));height:calc(var(--original-height) * var(--ratio))}.pinboard-canvas-mock{position:relative;width:var(--original-width);height:var(--original-height);transform:scale(var(--ratio));transform-origin:top left;z-index:0}.pinboard-canvas-mock .item{position:absolute}.pinboard-canvas-mock img{user-select:none;-webkit-user-drag:none;-khtml-user-drag:none;-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none}.designer-screen .grid-select{direction:rtl}.designer-screen .grid-select-pages{justify-content:end}.designer-screen .grid-select-page-btn-icon{transform:scaleX(-1)}.designer-screen .tabs-com{direction:rtl}.designer-screen .renderer-container{position:relative}.designer-screen .renderer-container button{opacity:0;font-size:1.5em;font-weight:700;text-wrap:nowrap;text-transform:uppercase;position:absolute;top:0;left:0;z-index:999;width:100%;height:100%}.designer-screen .renderer-container button:hover{opacity:1}.designer-screen,.designer-screen *{box-sizing:border-box}.designer-screen button{border:none;padding:0;margin:0;outline:none;cursor:default}:root{color-scheme:dark light;--mf-designer-width-unit: min( 1vw, 2.2vh );--mf-min-font-size: 16px;--font-size: var(--mf-designer-width-unit);--mf-max-font-size: 200px;--mf-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--mf-designer-width: 100%;--mf-containers-direction: column;--mf-containers-gap: 1rem;--mf-items-direction: row;--mf-items-gap: .5rem;--mf-designer-padding-y: 1.5vh;--mf-designer-padding-x: 3vw;--mf-canvas-width: 50vw;--mf-color-grid-width: 90%;--mf-color-grid-columns: 2;--mf-asset-grid-columns: 6;--mf-navigators-btn-size: 20%;--mf-options-btn-width: 25%;--mf-options-font: .75em;--mf-navigators-justify-content: space-evenly;--mf-navigators-gap: 0;--mf-container-align-items: center;--mf-container-justify-content: start;--mf-frame-justify-content: start}.designer-screen{min-width:300px;height:100%;touch-action:pan-y;width:var(--mf-designer-width)}.designer-screen-container{font-size:16px;font-size:clamp(var(--mf-min-font-size),var(--font-size),var(--mf-max-font-size));font-family:var(--mf-font-sans-serif);display:flex;flex-direction:var(--mf-containers-direction);align-items:center;justify-content:start;gap:var(--mf-containers-gap);padding:var(--mf-designer-padding-y) var(--mf-designer-padding-x);width:100%;height:100%}.designer-screen-container>*,.designer-screen .command-panel>*,.designer-screen .command-navigator>*{width:100%}.designer-screen .tabs-layout{flex-direction:var(--mf-items-direction);gap:var(--mf-items-gap)}.designer-screen .pinboard-layout{--pinboard-width: var(--mf-canvas-width)}.designer-screen .command-navigator{display:flex;flex-direction:var(--mf-containers-direction);align-items:var(--mf-container-align-items);gap:var(--mf-containers-gap)}.designer-screen .navigators-frame{display:flex}.designer-screen .navigators-frame .tabs-layout{gap:var(--mf-navigators-gap);justify-content:var(--mf-navigators-justify-content)}.designer-screen .navigators-frame .tabs-tab{padding:0;width:var(--mf-navigators-btn-size);padding-top:var(--mf-navigators-btn-size);background:no-repeat center;background-size:contain}.designer-screen .options-frame .tabs-tab{min-width:var(--mf-options-btn-width);font-size:var(--mf-options-font)}.designer-screen .command-panel{display:flex;flex-direction:var(--mf-containers-direction);align-items:var(--mf-container-align-items);gap:var(--mf-containers-gap)}.designer-screen .asset-grid-frame .grid-select{--columns: var(--mf-asset-grid-columns);--gap: .5rem}.designer-screen .color-grid-frame{padding:0 5%}.designer-screen .color-grid-frame .grid-select{--columns: var(--mf-color-grid-columns);--gap: 1.5rem 80%;--slot-radius: 50%}.designer-screen .color-grid-frame .grid-select-pages[data-disabled]{display:none}.designer-screen .canvas-frame{width:auto}@media only screen and (orientation: portrait){.designer-screen-container{position:relative}.designer-screen .command-navigator{position:sticky;bottom:1%;gap:.5rem;z-index:99}.designer-screen .color-grid-frame{position:sticky;top:calc(2 * var(--mf-containers-gap, 0));z-index:0}.designer-screen .canvas-frame{position:sticky;top:var(--mf-containers-gap);z-index:1;height:0;overflow:visible}.designer-screen .asset-grid-frame{z-index:2}.designer-screen .grid-select-pages{position:sticky;bottom:49vw;left:0;z-index:99}}@media only screen and (orientation: landscape){:root{--designer-width: 100vw;--designer-height: 100vh;--mf-containers-direction: row;--mf-container-align-items: end;--mf-items-direction: column;--mf-command-navigator-width: auto;--mf-command-panel-width: auto;--mf-navigators-width: 7vw;--mf-options-width: 15vw;--mf-asset-grid-width: 100%;--mf-color-grid-width: 75%;--mf-canvas-width: 19vw;--mf-navigators-btn-size: 100%;--mf-options-btn-width: 100%;--mf-navigators-justify-content: start;--mf-asset-grid-columns: 9;--mf-color-grid-columns: 10}.designer-screen{width:var(--designer-width);height:var(--designer-height)}.designer-screen-container>*,.designer-screen .command-navigator>*,.designer-screen .tabs-com{height:100%}.designer-screen .grid-select-pages{--page-btn-size: 4vw}.designer-screen .command-navigator{width:var(--mf-command-navigator-width)}.designer-screen .navigators-frame{display:flex;width:var(--mf-navigators-width)}.designer-screen .options-frame{width:var(--mf-options-width)}.designer-screen .options-frame .tabs-com{justify-content:start}.designer-screen .command-panel{flex-direction:column;flex-grow:1;width:var(--mf-command-panel-width)}.designer-screen .asset-grid-frame{width:var(--mf-asset-grid-width)}.designer-screen .color-grid-frame{width:var(--mf-color-grid-width);padding:0}.designer-screen .color-grid-frame .grid-select{--gap: .5rem}}@media only screen and (orientation: landscape) and (pointer: coarse){:root{--mf-color-grid-cell-size: 17.5vh;--mf-command-panel-width: auto;--mf-color-grid-width: 50%;--mf-asset-grid-columns: 12}.designer-screen{max-width:100vw;overflow-x:scroll;touch-action:pan-x;direction:rtl}.designer-screen-container{justify-content:end;direction:ltr;position:relative}.designer-screen .grid-select-pages{justify-content:start}.designer-screen .canvas-frame{position:sticky;top:0;left:calc(var(--mf-containers-gap) / 2);height:auto;align-self:start;z-index:120}.designer-screen .command-panel{flex-grow:0;align-items:end;min-width:var(--mf-command-panel-width);z-index:110}.designer-screen .color-grid-frame{position:sticky;--right-space: calc(var(--mf-navigators-width) + var(--mf-options-width) + (2 * var(--mf-containers-gap)));right:var(--right-space)}.designer-screen .asset-grid-frame .grid-select-slots{gap:2.5vh;grid-auto-flow:column;grid-template-rows:repeat(3,1fr)}.designer-screen .asset-grid-frame .grid-select-slot{width:var(--mf-color-grid-cell-size);height:var(--mf-color-grid-cell-size);padding:0!important}.designer-screen .command-navigator{position:sticky;top:0;right:0;z-index:100}}@media only screen and (orientation: landscape) and (pointer: fine) and (min-width: 992px){:root{--mf-options-font: 1em}.designer-screen{display:flex;align-items:center}.designer-screen-container{height:45vw}.designer-screen .command-navigator .tabs-layout{justify-content:space-between;min-height:100%}.designer-screen .options-frame .tabs-layout{justify-content:start}}.tabs-come{--tab-scale: 1}.tabs-tab{transform:scale(var(--tab-scale));background-color:#eee;position:relative;padding:1em;z-index:1}.tabs-tab[data-selected]{z-index:2}.grid-select{--active-slot-scale: 1;--active-slot-radius: var(--slot-radius);--slot-glow: 0;--active-slot-glow: 0;--glow-color: #000;--slot-shadow: 0}.grid-select-slot{position:relative;z-index:1;--shadow-color: var(--cover-color);--shadow-color: color-mix(in srgb, var(--cover-color), #fff 20%);box-shadow:0 0 var(--slot-shadow) var(--shadow-color)}.grid-select-slot[data-selected]{transform:scale(var(--active-slot-scale));box-shadow:0 0 0 var(--active-slot-glow) var(--glow-color);border-radius:var(--active-slot-radius);pointer-events:none;z-index:2}.grid-select-page-btn{background:var(--mf-btn-bg-active);color:var(--mf-btn-color-active);border-radius:50%}.grid-select-page-btn:disabled{display:none}:root{--mf-cross-mark-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect width="24" height="24" fill="%23E0E0E0"/><path stroke="%23757575" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5"/></svg>')}:root{--mf-designer-bg-rgb: 33, 33, 33;--mf-designer-bg: rgba(var(--mf-designer-bg-rgb), .5);--mf-designer-filter: blur(25px);--grid-select-slot-cover-color: #ccc;--mf-asset-grid-remove-icon: var(--mf-cross-mark-icon);--mf-btn-bg: #9E9E9E;--mf-btn-color: #212121;--mf-btn-color-active: #ECEFF1;--mf-btn-bg-active: #546E7A;--mf-btn-glow: 255, 255, 255;--mf-btn-glow-alpha: .5;--mf-btn-glow-size: .5rem;--mf-nav-btn-bg-active: var(--mf-btn-bg);--mf-frame-bg-rgb: 66, 66, 66;--mf-frame-bg: rgba(var(--mf-frame-bg-rgb), .5);--mf-frame-radius: 12px;--mf-frame-blur: blur(100px);--mf-frame-shadow: 1rem;--mf-frame-padding: 3%;--mf-navigators-btn-shadow: 0;--mf-options-btn-padding: 6%;--mf-asset-grid-slot-glow-size: .8rem}.designer-screen{background-color:var(--mf-designer-bg);-webkit-backdrop-filter:var(--mf-designer-filter);backdrop-filter:var(--mf-designer-filter)}.designer-screen .navigators-frame .tabs-tab{border-radius:50%;background-size:50%}.designer-screen .navigators-frame .tabs-tab[data-selected]{background-color:var(--mf-nav-btn-bg-active)}.designer-screen .options-frame .tabs-tab{padding:var(--mf-options-btn-padding) 0;line-height:0;background-color:var(--mf-btn-bg);color:var(--mf-btn-color);border-radius:2em;font-weight:700;text-transform:uppercase}.designer-screen .options-frame .tabs-tab[data-selected]{background-color:var(--mf-btn-bg-active);color:var(--mf-btn-color-active)}.designer-screen .color-grid-frame .grid-select{--slot-count: 4;--active-slot-glow: var(--mf-btn-glow-size);--glow-color: rgba(var(--mf-btn-glow), var(--mf-btn-glow-alpha));--slot-shadow: 2.5rem}.designer-screen .asset-grid-frame .grid-select{--slot-radius: 15%;--active-slot-radius: 50%;--active-slot-scale: 1.5;--active-slot-glow: var(--mf-asset-grid-slot-glow-size);--glow-color: rgba(var(--mf-btn-glow), var(--mf-btn-glow-alpha))}.designer-screen .renderer-container{border-radius:15%;overflow:hidden}.designer-screen .renderer-container button{background:transparent;color:#fff;text-shadow:1px 1px 2px #444}.designer-screen .renderer-container button:hover{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}@media only screen and (orientation: portrait){.designer-screen .asset-grid-frame{background-color:var(--mf-frame-bg);border-radius:12px;padding:.5rem 0}.designer-screen .options-frame,.designer-screen .navigators-frame{background-color:var(--mf-frame-bg);box-shadow:0 0 var(--mf-frame-shadow) #000;border-radius:var(--mf-frame-radius);padding:var(--mf-frame-padding)}}@media only screen and (orientation: portrait) and (min-width: 400px){.designer-screen .asset-grid-frame,.designer-screen .options-frame,.designer-screen .navigators-frame{-webkit-backdrop-filter:var(--mf-frame-blur);backdrop-filter:var(--mf-frame-blur)}}@media only screen and (orientation: landscape){:root{--mf-options-btn-padding: 3vh}}@media only screen and (orientation: landscape) and (pointer: fine) and (min-width: 992px){:root{--designer-height: 100%;--mf-designer-padding-x: 3vw;--mf-designer-filter: none;--mf-designer-bg: transparent;--mf-height: 100%}.designer-screen .navigators-frame,.designer-screen .options-frame,.designer-screen .command-panel,.designer-screen .canvas-frame{position:relative}.designer-screen .navigators-frame:before,.designer-screen .command-panel:before,.designer-screen .canvas-frame:before{width:100%;height:100%;padding:var(--mf-containers-gap);left:calc(-1 * var(--mf-containers-gap));top:calc(-1 * var(--mf-containers-gap));border-radius:12px;box-shadow:0 1rem 1rem #000;z-index:-2;background-color:var(--mf-frame-bg);-webkit-backdrop-filter:var(--mf-frame-blur);backdrop-filter:var(--mf-frame-blur);content:"";display:block;position:absolute}.designer-screen .navigators-frame{height:85%;align-self:center}.designer-screen .navigators-frame:before{border-radius:0 12px 12px 0}.designer-screen .command-panel:before{width:calc(100% + var(--mf-options-width));z-index:-1}.designer-screen .canvas-frame{height:auto;align-self:start;margin-top:2vh}.designer-screen .canvas-frame:before{border-radius:12px 0 0 12px}}@media only screen and (orientation: landscape) and (pointer: coarse){:root{--mf-options-btn-padding: 5vh}.designer-screen .asset-grid-frame,.designer-screen .canvas-frame{background:var(--mf-frame-bg);padding:var(--mf-containers-gap);border-radius:12px}.designer-screen .canvas-frame{background:rgb(var(--mf-frame-bg-rgb))}}@media only screen and (orientation: landscape) and (pointer: coarse) and (min-width: 400px){.designer-screen .asset-grid-frame,.designer-screen .canvas-frame{-webkit-backdrop-filter:var(--mf-frame-blur);backdrop-filter:var(--mf-frame-blur)}}@media (prefers-color-scheme: light){:root{--mf-screen-bg-rgb: 255, 255, 255;--mf-btn-bg: #E0E0E0;--mf-btn-color: #424242;--mf-btn-glow: 0, 0, 0;--mf-btn-glow-alpha: .25}}@media only screen and (hover: hover) and (prefers-reduced-motion: no-preference){.designer-screen .navigators-frame .tabs-tab{--tab-scale: .7;transition:transform .1s}.designer-screen .navigators-frame .tabs-tab:hover,.designer-screen .navigators-frame .tabs-tab[data-selected]{--tab-scale: 1}.designer-screen .options-frame .tabs-tab{--tab-scale: .8;transition:transform .1s}.designer-screen .options-frame .tabs-tab:hover,.designer-screen .options-frame .tabs-tab[data-selected]{--tab-scale: .9}.designer-screen .renderer-container button{transition:backdrop-filter .4s ease-in-out .1s,-webkit-backdrop-filter .4s ease-in-out .1s,opacity .1s .4s;will-change:backdrop-filter,opacity}.designer-screen .renderer-container button:hover{transition:backdrop-filter .4s ease-in-out .1s,-webkit-backdrop-filter .4s ease-in-out .1s,opacity .1s}}