.studio-container{display:flex;height:100vh;width:100%;background:#f9f8f8;position:fixed}@media (max-width:767px){.studio-container{display:flex;flex-direction:column;position:fixed}}.studio-sidebar{width:280px;height:100%;background:#fff;display:flex;flex-direction:column;padding:1rem;border-right:1px solid rgba(0,0,0,.1);overflow-y:auto}.studio-sidebar h2{font-size:1.2rem;font-weight:700;margin-bottom:1rem}.studio-sidebar input{width:100%;padding:.5rem;border:1px solid rgba(0,0,0,.2);border-radius:5px;margin-bottom:1rem}.studio-main{flex:1;display:flex;justify-content:center;align-items:center}@media (max-width:767px){.studio-main{order:-1;align-items:center;z-index:-1}}.studio-canvas{background:#fff;padding:.25rem;display:flex;flex-direction:column;align-items:center;box-shadow:0 4px 8px rgba(0,0,0,.1);transform:translateY(-25px)}@media (max-width:767px){.studio-canvas{transform:translateY(0);box-shadow:none;padding:.5rem}}.svg-preview-container{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;max-width:90vw;max-height:70vh;position:relative}.refresh-button{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);background-color:var(--background-studio);color:var(--text-gray);padding:.75rem;border-radius:50%;box-shadow:0 10px 15px -3px rgba(0,0,0,.1);transition:background-color .2s ease-in-out}@media (max-width:767px){.refresh-button{bottom:.5rem;padding:.5rem}}.refresh-button:hover{background-color:var(--background-hover)}.studio-preview img{max-width:300px;height:auto;margin-bottom:1rem}.studio-text{font-size:2rem;font-weight:700;text-align:center}.studio-bottom{position:absolute;bottom:1rem;right:1rem;display:flex;align-items:center;gap:1rem}.mobile-studio-layout{flex-direction:column;max-width:500px}.mobile-studio-container,.mobile-studio-layout{display:flex;align-items:center;justify-content:center;width:100%}.mobile-studio-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:100vw;height:auto}.mobile-canvas-container{width:100%;max-width:100%}.mobile-canvas-container,.mobile-studio-content{display:flex;align-items:center;justify-content:center}.mobile-studio-content{flex-direction:column;width:90%;max-width:500px}