:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#213547;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:center;min-width:320px}#app{width:100%;text-align:center;box-sizing:border-box}button,input{min-width:6.5rem;min-height:2.9rem;padding:.5rem 1rem;border-radius:.5rem;border:2px solid #6b7280;background:#fff;color:#374151;font-size:1rem;font-weight:500;transition:all .2s ease;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;box-sizing:border-box}input[type=text]{max-width:6.5rem;cursor:text}@media (max-width: 765px){input{width:100%;display:flex}input[type=text]{max-width:none}}input[type=text]:hover,input[type=color]:hover{border-color:#4f46e5}button:hover{border-color:#4f46e5;background:#f8faff;transform:translateY(-1px);box-shadow:0 4px 12px #4f46e526}button:active{transform:translateY(0);box-shadow:0 2px 6px #4f46e533}button:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}button:disabled:hover{border-color:#e5e7eb;background:#fff}input[type=text]:focus,input[type=color]:focus{outline:none;border-color:#4f46e5;box-shadow:0 0 0 3px #4f46e51a}input[type=text]{text-align:center;font-family:monospace}input[type=color]{padding:4px;cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:4px}button[variant=outline]{background:transparent;border-color:#6b7280;color:#6b7280}button[variant=outline]:hover{border-color:#4f46e5;color:#4f46e5;background:#f8faff}[data-tooltip]{position:relative;display:inline-block}@media (max-width: 768px){[data-tooltip]:hover:before,[data-tooltip]:hover:after{content:none!important;display:none!important}}[data-tooltip]:hover:before{content:attr(data-tooltip);position:absolute;bottom:120%;left:50%;transform:translate(-50%);background:#000000e6;color:#fff;padding:.5rem .75rem;border-radius:6px;font-size:.8rem;white-space:nowrap;z-index:1000;pointer-events:none;animation:tooltip-fade-in .2s ease-out}[data-tooltip]:hover:after{content:"";position:absolute;bottom:110%;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid rgba(0,0,0,.9);z-index:1000;pointer-events:none;animation:tooltip-fade-in .2s ease-out}@keyframes tooltip-fade-in{0%{opacity:0;transform:translate(-50%) translateY(5px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media (max-width: 768px){[data-tooltip]:hover:before{bottom:auto;top:120%;font-size:.7rem;width:100px;white-space:normal}[data-tooltip]:hover:after{bottom:auto;top:110%;border-top:none;border-bottom:6px solid rgba(0,0,0,.9)}}.content[data-v-aad7c6c5]{width:100%;height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;user-select:none}.controls[data-v-aad7c6c5]{display:flex;flex-direction:column;gap:1rem;text-align:center}.control-buttons[data-v-aad7c6c5]{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;padding:0 2.5rem}@media (max-width: 768px){.control-buttons[data-v-aad7c6c5]>:nth-child(-n+3){flex:1 1 calc(33.333% - .7rem)}.control-buttons[data-v-aad7c6c5]>:nth-child(n+4){flex:1 1 100%}}@media (max-width: 565px){.control-buttons[data-v-aad7c6c5]>:nth-child(1),.control-buttons[data-v-aad7c6c5]>:nth-child(2){flex:1 1 calc(50% - .5rem);width:100%}.control-buttons[data-v-aad7c6c5]>:nth-child(n+3){flex:1 1 100%}}.cube-container[data-v-aad7c6c5]{perspective:1000px;perspective-origin:center center;width:400px;aspect-ratio:1 / 1;position:relative;border-radius:100%;border:1px dashed #cacbcd;display:flex;align-items:center;justify-content:center;@media (max-width: 565px){width:370px}}.cube[data-v-aad7c6c5]{position:relative;width:200px;aspect-ratio:1 / 1;transform-style:preserve-3d;transform-origin:center center;transition:transform .1s linear;cursor:grab}.cube[data-v-aad7c6c5]:active{cursor:grabbing}.cube.rotation-disabled[data-v-aad7c6c5],.cube.rotation-disabled[data-v-aad7c6c5]:active{cursor:default!important}.cube-face[data-v-aad7c6c5]{position:absolute;width:200px;height:200px;background:#fff;border:2px solid #8B8D98;border-radius:.4rem;font-size:6rem;color:#0000001a;font-weight:900;display:flex;justify-content:center;align-items:center;overflow:visible;cursor:pointer;transition:all .2s ease;user-select:none;pointer-events:auto;backface-visibility:visible;z-index:10}.cube-face.selected[data-v-aad7c6c5]:before{content:"";position:absolute;inset:5px;border:1px dashed rgba(79,70,229,.3);border-radius:.25rem;pointer-events:none;z-index:1}.cube-face[data-v-aad7c6c5]:hover{border-color:#4f46e5;background:#ffffffe6}.cube-face.selected[data-v-aad7c6c5]{border:3px solid #4F46E5;box-shadow:0 0 15px #4f46e580}.face-F[data-v-aad7c6c5]{transform:translateZ(100px)}.face-B[data-v-aad7c6c5]{transform:rotateY(180deg) translateZ(100px)}.face-L[data-v-aad7c6c5]{transform:rotateY(-90deg) translateZ(100px)}.face-R[data-v-aad7c6c5]{transform:rotateY(90deg) translateZ(100px)}.face-T[data-v-aad7c6c5]{transform:rotateX(90deg) translateZ(100px)}.face-D[data-v-aad7c6c5]{transform:rotateX(-90deg) translateZ(100px)}.image-container[data-v-aad7c6c5]{transition:all .2s ease}.image-container[data-v-aad7c6c5]:hover{box-shadow:0 0 0 1px #4f46e54d}.image-container img[data-v-aad7c6c5]{border-radius:4px}svg[data-v-aad7c6c5]{width:1rem;height:1rem;padding-right:.4rem;stroke-width:3}
