:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:#ffffffde;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.header{background-color:#080808;margin:0;padding:0;color:#fff}.logo{height:40px;margin-right:20px;margin-left:20px;vertical-align:middle}.logo-title{display:flex;align-items:center}.footer{background-color:#080808;padding:5px;color:#fff;text-align:center}.imagefield{background-color:#000;padding:20px;flex:1;display:flex;flex-direction:row;overflow:hidden;justify-content:center;align-items:center}.image{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;background-color:#00f;max-height:calc(100vh - 200px)}.image-canvas{max-width:100%;max-height:50%;object-fit:contain;background-color:#ff0}.canvas{flex-grow:1;width:100%;height:100%;display:block}.configfield{background-color:#fff;padding:20px;width:400px;display:flex;flex-direction:column;color:#000;max-height:calc(100vh - 190px);overflow-y:auto}@media(max-width:768px){.configfield{width:calc(100% - 40px)}}#scenebuttons{display:flex;flex-direction:row;gap:10px;margin:5px}#scenebuttons>div{flex:1;cursor:pointer}hr{border:none;border-top:2px solid #333;margin:10px 0;width:100%}.beauty{flex:1;background-color:#add8e6;padding:10px;margin:10px;border:1px solid #ccc;border-radius:5px;box-shadow:inset 0 0 10px #00000080}.modelbox{position:relative;background-color:#d3d3d3;padding:5px;border:1px solid #ccc;border-radius:5px;margin:5px;aspect-ratio:1 / 1;display:grid;grid-template-columns:1fr 3fr 1fr;grid-template-rows:1fr 3fr 1fr;gap:10px;box-shadow:inset 0 0 10px #00000080}.cell{display:flex;align-items:center;justify-content:center}.center-cell{position:relative;grid-column:2 / 3;grid-row:2 / 3;background:#fff}.center-image{max-width:100%;max-height:100%;object-fit:contain}.triangle-up{border-left:40px solid transparent;border-right:40px solid transparent;border-bottom:30px solid grey;top:20%;left:50%}.triangle-down{border-left:40px solid transparent;border-right:40px solid transparent;border-top:30px solid grey;top:30%;left:50%}.triangle-right{border-top:40px solid transparent;border-bottom:40px solid transparent;border-left:30px solid grey;top:-10%;left:55%}.triangle-left{border-top:40px solid transparent;border-bottom:40px solid transparent;border-right:30px solid grey;top:-10%;left:45%}.triangle-btn{position:absolute;width:0;height:0;transform:translate(-50%)}.triangle-btn:hover{cursor:pointer;opacity:.8}.triangle-wrapper{position:relative;width:60px;height:60px}.triangle-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-weight:700;pointer-events:none}.clickable-point{position:absolute;width:5px;height:5px;background-color:green;border:2px solid red;border-radius:50%;cursor:pointer;transform:translate(-50%,-50%)}.clickable-point:hover{cursor:pointer;opacity:.2}.clickable-point.active{background-color:#ff6b6b;border-color:#fff;box-shadow:0 0 10px #ff6b6bcc}.fileName{position:absolute;font-family:monospace;bottom:22%;left:23%}@property --angle-1{syntax: "<angle>"; inherits: false; initial-value: -75deg;}@property --angle-2{syntax: "<angle>"; inherits: false; initial-value: -45deg;}.button-wrap{position:relative;z-index:2;border-radius:999vw;background:transparent;pointer-events:none;transition:all var(--anim--hover-time) var(--anim--hover-ease)}.button-shadow{--shadow-cuttoff-fix: 2em;position:absolute;width:calc(100% + var(--shadow-cuttoff-fix));height:calc(100% + var(--shadow-cuttoff-fix));top:calc(0% - var(--shadow-cuttoff-fix) / 2);left:calc(0% - var(--shadow-cuttoff-fix) / 2);filter:blur(clamp(2px,.125em,12px));-webkit-filter:blur(clamp(2px,.125em,12px));-moz-filter:blur(clamp(2px,.125em,12px));-ms-filter:blur(clamp(2px,.125em,12px));overflow:visible;pointer-events:none}.button-shadow:after{content:"";position:absolute;z-index:0;inset:0;border-radius:999vw;background:linear-gradient(180deg,#0003,#0000001a);width:calc(100% - var(--shadow-cuttoff-fix) - .25em);height:calc(100% - var(--shadow-cuttoff-fix) - .25em);top:calc(var(--shadow-cuttoff-fix) - .5em);left:calc(var(--shadow-cuttoff-fix) - .875em);padding:.125em;box-sizing:border-box;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:all var(--anim--hover-time) var(--anim--hover-ease);overflow:visible;opacity:1}button{--border-width: clamp(1px, .0625em, 4px);all:unset;cursor:pointer;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);pointer-events:auto;z-index:3;background:linear-gradient(-75deg,#ffffff0d,#fff3,#ffffff0d);border-radius:999vw;box-shadow:inset 0 .125em .125em #0000000d,inset 0 -.125em .125em #ffffff80,0 .25em .125em -.125em #0003,0 0 .1em .25em inset #fff3,0 0 #fff;backdrop-filter:blur(clamp(1px,.125em,4px));-webkit-backdrop-filter:blur(clamp(1px,.125em,4px));-moz-backdrop-filter:blur(clamp(1px,.125em,4px));-ms-backdrop-filter:blur(clamp(1px,.125em,4px));transition:all var(--anim--hover-time) var(--anim--hover-ease);width:100%;text-align:center}button:hover{transform:scale(.975);backdrop-filter:blur(.01em);-webkit-backdrop-filter:blur(.01em);-moz-backdrop-filter:blur(.01em);-ms-backdrop-filter:blur(.01em);box-shadow:inset 0 .125em .125em #0000000d,inset 0 -.125em .125em #ffffff80,0 .15em .05em -.1em #00000040,0 0 .05em .1em inset #ffffff80,0 0 #fff}button span{position:relative;display:block;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;font-family:Inter,sans-serif;letter-spacing:-.05em;font-weight:500;font-size:.8em;color:#323232;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-shadow:0em .25em .05em rgba(0,0,0,.1);transition:all var(--anim--hover-time) var(--anim--hover-ease);padding-inline:1.5em;padding-block:.875em}button:hover span{text-shadow:.025em .025em .025em rgba(0,0,0,.12)}button span:after{content:"";display:block;position:absolute;z-index:1;width:calc(100% - var(--border-width));height:calc(100% - var(--border-width));top:calc(0% + var(--border-width) / 2);left:calc(0% + var(--border-width) / 2);box-sizing:border-box;border-radius:999vw;overflow:clip;background:linear-gradient(var(--angle-2),rgba(255,255,255,0) 0%,rgba(255,255,255,.5) 40% 50%,rgba(255,255,255,0) 55%);z-index:3;mix-blend-mode:screen;pointer-events:none;background-size:200% 200%;background-position:0% 50%;background-repeat:no-repeat;transition:background-position calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease),--angle-2 calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease)}button:hover span:after{background-position:25% 50%}button:active span:after{background-position:50% 15%;--angle-2: -15deg}@media(hover:none)and (pointer:coarse){button span:after,button:active span:after{--angle-2: -45deg}}button:after{content:"";position:absolute;z-index:1;inset:0;border-radius:999vw;width:calc(100% + var(--border-width));height:calc(100% + var(--border-width));top:calc(0% - var(--border-width) / 2);left:calc(0% - var(--border-width) / 2);padding:var(--border-width);box-sizing:border-box;background:conic-gradient(from var(--angle-1) at 50% 50%,rgba(0,0,0,.5),rgba(0,0,0,0) 5% 40%,rgba(0,0,0,.5) 50%,rgba(0,0,0,0) 60% 95%,rgba(0,0,0,.5)),linear-gradient(180deg,#ffffff80,#ffffff80);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:all var(--anim--hover-time) var(--anim--hover-ease),--angle-1 .5s ease;box-shadow:inset 0 0 0 calc(var(--border-width) / 2) #ffffff80}button:hover:after{--angle-1: -125deg}button:active:after{--angle-1: -75deg}@media(hover:none)and (pointer:coarse){button:after,button:hover:after,button:active:after{--angle-1: -75deg}}.button-wrap:has(button:hover) .button-shadow{filter:blur(clamp(2px,.0625em,6px));-webkit-filter:blur(clamp(2px,.0625em,6px));-moz-filter:blur(clamp(2px,.0625em,6px));-ms-filter:blur(clamp(2px,.0625em,6px));transition:filter var(--anim--hover-time) var(--anim--hover-ease)}.button-wrap:has(button:hover) .button-shadow:after{top:calc(var(--shadow-cuttoff-fix) - .875em);opacity:1}.button-wrap:has(button:active){transform:rotateX(25deg)}.button-wrap:has(button:active) button{box-shadow:inset 0 .125em .125em #0000000d,inset 0 -.125em .125em #ffffff80,0 .125em .125em -.125em #0003,0 0 .1em .25em inset #fff3,0 .225em .05em #0000000d,0 .25em #ffffffbf,inset 0 .25em .05em #00000026}.button-wrap:has(button:active) .button-shadow{filter:blur(clamp(2px,.125em,12px));-webkit-filter:blur(clamp(2px,.125em,12px));-moz-filter:blur(clamp(2px,.125em,12px));-ms-filter:blur(clamp(2px,.125em,12px))}.button-wrap:has(button:active) .button-shadow:after{top:calc(var(--shadow-cuttoff-fix) - .5em);opacity:.75}.button-wrap:has(button:active) span{text-shadow:.025em .25em .05em rgba(0,0,0,.12)}.home{background-color:#fff;flex:1;display:flex;flex-direction:row;max-height:calc(100vh - 142px)}.image-field-wrapper{display:flex;flex:1;justify-content:center;align-items:center;background-color:#000;overflow:hidden}.image-field-wrapper img{object-fit:contain}@media(max-width:768px){.image-field-wrapper.hidden-mobile{display:none}}@media(max-width:768px){.home{flex-direction:column}.config-field-hidden{display:none}}.headerButton{display:flex;width:calc(100% - 16px);justify-content:flex-end;padding:8px;background-color:#000;border-bottom:1px solid #ccc;display:none}.headerButton button{width:calc(100% - 32px);padding:8px 16px;background-color:#007bff;color:#fff;border:none;cursor:pointer}@media(max-width:768px){.headerButton{display:block}}.headerButton button:hover{background-color:#0056b3}html,body,#root{height:100%;width:100%;margin:0;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;font-family:Poppins,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:root{--global--size: clamp(2rem, 4vw, 5rem);--anim--hover-time: .4s;--anim--hover-ease: cubic-bezier(.25, 1, .5, 1)}.layout{display:flex;flex-direction:column;height:100%}.main{flex:1;background-color:green;display:flex;flex-direction:column}.main>.content{flex:1;background:#d3d3d3;display:flex;flex-direction:column}