*{box-sizing:border-box}body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}#root{--blue-color: #0054a2;width:100%;height:100vh}.dropzone{width:100%;height:100%;min-height:300px;border:2px dashed #ccc;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;background-color:#fafafa}.dropzone:hover{border-color:#999;background-color:#f0f0f0}.dropzone__content{text-align:center;pointer-events:none}.dropzone__icon{font-size:48px;margin-bottom:16px}.dropzone__text{font-size:18px;font-weight:500;color:#333;margin-bottom:8px}.dropzone__hint{font-size:14px;color:#666}.canvas-stage{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#f5f5f5;border-radius:8px;overflow:hidden;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.canvas-stage__canvas{display:block;max-width:100%;max-height:100%}.canvas-stage--dragging{cursor:grabbing}.config-panel{padding:24px;background-color:#fff;height:100%;overflow-y:auto}.config-panel__section{margin-bottom:32px}.config-panel__section:last-child{margin-bottom:0}.config-panel__title{font-size:18px;font-weight:600;margin:0 0 16px;color:#333}.config-panel__info{display:flex;flex-direction:column;gap:8px}.config-panel__info-row{display:flex;justify-content:space-between;font-size:14px}.config-panel__info-label{color:#666;font-weight:500}.config-panel__info-value{color:#333;font-weight:400}.config-panel__control{margin-bottom:16px}.config-panel__label{display:block;font-size:14px;font-weight:500;margin-bottom:8px;color:#333}.config-panel__input-group{display:flex;gap:8px}.config-panel__input{flex:1;padding:8px 12px;border:1px solid #ccc;border-radius:4px;font-size:14px;font-family:Courier New,monospace}.config-panel__input:focus{outline:none;border-color:#666}.config-panel__inline-input{width:100%;padding:6px 10px;margin-bottom:8px;border:1px solid #ccc;border-radius:4px;font-size:14px}.config-panel__inline-input:focus{outline:none;border-color:#666}.config-panel__select{width:100%;padding:8px 12px;border:1px solid #ccc;border-radius:4px;font-size:14px;background-color:#fff}.config-panel__select:focus{outline:none;border-color:#666}.config-panel__button{padding:8px 16px;background-color:#f0f0f0;border:1px solid #ccc;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.config-panel__button:hover{background-color:#e0e0e0;border-color:#999}.config-panel__button:active{background-color:#d0d0d0}.config-panel__button--primary{margin-top:8px;width:100%;background-color:var(--blue-color);color:#fff;border-color:var(--blue-color)}.config-panel__button--full{width:100%}.config-panel__button--primary:hover{background-color:color-mix(in srgb,var(--blue-color) 80%,#fff);border-color:color-mix(in srgb,var(--blue-color) 80%,#fff)}.config-panel__button--primary:active{background-color:color-mix(in srgb,var(--blue-color) 60%,#fff)}.config-panel__toggle{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.config-panel__toggle-label{font-size:14px;font-weight:500;color:#333}.switch{display:inline-block;width:42px;height:24px;box-sizing:border-box;padding:0;border:0;appearance:none;-webkit-appearance:none;background-color:#ccc;border-radius:12px;position:relative;overflow:hidden;cursor:pointer;transition:background-color .2s ease}.switch[data-state=checked]{background-color:var(--blue-color)}.switch__thumb{position:absolute;top:2px;left:2px;box-sizing:border-box;display:block;width:20px;height:20px;background-color:#fff;border-radius:50%;box-shadow:0 2px 4px #0003;transition:transform .2s ease;transform:translate(0);will-change:transform}.switch[data-state=checked] .switch__thumb{transform:translate(18px)}.slider{position:relative;display:flex;align-items:center;width:100%;height:20px;cursor:pointer}.slider__track{position:relative;flex-grow:1;height:4px;background-color:#e0e0e0;border-radius:2px}.slider__range{position:absolute;height:100%;background-color:var(--blue-color);border-radius:2px}.slider__thumb{display:block;width:16px;height:16px;background-color:var(--blue-color);border-radius:50%;box-shadow:0 2px 4px #0003;transition:transform .1s ease}.slider__thumb:hover{transform:scale(1.1)}.slider__thumb:focus{outline:none;box-shadow:0 0 0 3px #4caf504d}.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}.app__header{padding:24px 32px;background:var(--blue-color);color:#fff;box-shadow:0 2px 8px #0000001a}.app__title{margin:0 0 8px;font-size:32px;font-weight:700}.app__main{display:flex;flex:1;overflow:hidden}.app__canvas-container{flex:1;position:relative;padding:24px;overflow:hidden;display:flex;align-items:center;justify-content:center}.app__sidebar{width:400px;border-left:1px solid #e0e0e0;background-color:#fafafa;overflow-y:auto}.app__processing{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:16px 32px;background-color:#000c;color:#fff;border-radius:8px;font-size:16px;font-weight:500;pointer-events:none}.app__error{position:absolute;bottom:24px;left:50%;transform:translate(-50%);padding:16px 32px;background-color:#f44336;color:#fff;border-radius:8px;font-size:14px;font-weight:500;box-shadow:0 4px 12px #0003}@media(max-width:1024px){.app__main{flex-direction:column}.app__sidebar{width:100%;border-left:none;border-top:1px solid #e0e0e0;max-height:50vh}}