html,body,#root{margin:0;padding:0;width:100%;height:100%;overflow:hidden;color:#fff;--l2d-panel-width: 280px;--safe-area-max-inset-bottom: env(safe-area-max-inset-bottom, 0px)}.app-container{display:flex;flex-direction:row;width:100%;height:100%;background-color:#1e1e1e}.l2d-panel{left:0;top:0;background-color:#2b2b2b;color:#fff;transition:transform .3s ease-in-out;padding:0;width:var(--l2d-panel-width);padding-bottom:var(--safe-area-max-inset-bottom);height:100%;box-sizing:border-box;position:fixed;z-index:10}.l2d-panel.closed{transform:translate(calc(var(--l2d-panel-width) * -1));pointer-events:none}.l2d-panel.open{pointer-events:auto}.l2d-panel-control{display:flex;align-items:center;justify-content:space-between;padding:0 15px;flex:0 0 auto}.l2d-panel-control h2{text-align:right}.l2d-panel.right{right:0;width:var(--l2d-panel-width);left:auto;box-shadow:-2px 0 5px #0003}.l2d-panel.right.closed{transform:translate(var(--l2d-panel-width));pointer-events:none}.l2d-panel.right select{width:100%}.l2d-panel-opacity{display:flex;flex-direction:column;align-items:center;padding:1.5rem}.l2d-panel-opacity div{width:100%;display:flex;justify-content:space-between;padding:0px 0px .5rem;flex:0 0 auto}.l2d-panel-opacity input{width:100%}.main-canvas-container{flex:1;position:relative;overflow:hidden}.l2d-canvas{flex:1;position:relative;overflow:hidden;width:100%;height:100%;touch-action:none}.button-container{min-width:300px;position:fixed;bottom:calc(20px + var(--safe-area-max-inset-bottom));left:50%;transform:translate(-50%);display:flex;z-index:5}.capture-screenshot-btn,.screenshot-settings-btn{background-color:#444;color:#fff;border:none;border-radius:4px;cursor:pointer;opacity:.8;transition:opacity .3s ease;margin:auto}.screenshot-settings-btn{aspect-ratio:1 / 1;display:flex;padding:10px;font-size:20px}.capture-screenshot-btn:hover,.screenshot-settings-btn:hover{opacity:1}.rcp-root{--rcp-background-color: #121212;--rcp-field-input-color: #ffffff;--rcp-field-input-border-color: #242424;--rcp-field-label-color: #808080}.rcp{display:flex;flex-direction:column;background-color:var(--rcp-background-color);border-radius:10px}.rcp-body{display:flex;flex-direction:column;gap:20px;padding:20px 10px}.rcp-section{display:flex;flex-direction:column;gap:10px}.rcp-interactive{width:100%;height:100%;-webkit-user-select:none;user-select:none;touch-action:none}.rcp-interactive[aria-disabled=true]{cursor:unset;pointer-events:none}.rcp-saturation{cursor:all-scroll;width:100%;position:relative;background-image:linear-gradient(to bottom,transparent,black),linear-gradient(to right,white,transparent);border-radius:10px 10px 0 0}.rcp-saturation-cursor{position:absolute;width:20px;height:20px;border:2px solid white;border-radius:100%;box-shadow:0 0 15px #00000026;transform:translate(-10px,-10px)}.rcp-hue{cursor:ew-resize;position:relative;width:100%;height:12px;background-image:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red);border-radius:10px}.rcp-hue-cursor{position:absolute;width:20px;height:20px;border:2px solid white;border-radius:100%;box-shadow:0 0 15px #00000026;transform:translate(-10px,-4px)}.rcp-alpha{cursor:ew-resize;position:relative;width:100%;height:12px;border-radius:10px}.rcp-alpha-cursor{position:absolute;width:20px;height:20px;border:2px solid white;border-radius:100%;box-shadow:0 0 15px #00000026;transform:translate(-10px,-4px)}.rcp-fields{display:flex;flex-direction:column;gap:10px}.rcp-fields-floor{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}.rcp-field{display:flex;flex-direction:column;width:100%}.rcp-field-input{width:100%;font-family:inherit;font-size:14px;text-align:center;color:var(--rcp-field-input-color);background-color:transparent;border:2px solid var(--rcp-field-input-border-color);border-radius:5px;outline:none;padding:5px 0}.rcp-field-input:read-only{opacity:.8}.rcp-field-label{font-size:14px;text-align:center;color:var(--rcp-field-label-color)}.color-picker-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000}.color-picker-container{border-radius:4px;color:#fff;position:absolute;z-index:2000;display:flex;align-items:center;justify-content:center}.color-picker-container .rcp-root{background:#363636;padding:2rem 1.5rem 0;--rcp-field-label-color: rgb(241, 241, 241)}.color-picker-container input{background:#f0f0f0;color:#000}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:1000;display:flex;align-items:center;justify-content:center}.modal{background:#2b2b2b;padding:20px;border-radius:4px;color:#fff;width:300px}.modal-input-container{display:flex;flex-direction:column;margin-bottom:10px}.modal h2{margin-top:0;margin-bottom:5px}.modal label{width:100%}.modal input{padding:5px;margin-top:5px;border:none}.modal-buttons{display:flex;justify-content:flex-end;gap:10px;margin-top:15px}.modal-buttons button{padding:5px 10px;background:#444;border:none;color:#fff;cursor:pointer}.modal-buttons button:hover{background:#666}