iframe.css

:root{--color-yellow-50: #fffbeb;--color-yellow-100: #fef3c7;--color-yellow-200: #fcd34d;--color-yellow-300: #f59e0b;--color-yellow-400: #b45309;--color-yellow-500: #78350f;--color-gray-100: #ffffff;--color-gray-200: #fafaf9;--color-gray-300: #f3f2f2;--color-gray-400: #ecebea;--color-gray-500: #dddbda;--color-gray-600: #b0adab;--color-gray-700: #706e6b;--color-gray-800: #3e3e3c;--color-gray-900: #080707;--color-purple-100: #faf5ff;--color-purple-200: #c084fc;--color-purple-300: #a855f7;--color-purple-400: #9333ea}.f-button{position:relative}.f-button>.outline.hovered{outline:2px dashed var(--color-yellow-400);outline-offset:-1px}.f-button>.outline.selected{outline:2px dashed var(--color-yellow-400);outline-offset:-1px}.f-button{border:solid 1px #000;display:inline-flex;align-items:center;justify-content:center}.f-button.f-button_small{padding:.75rem 1rem}.f-button.f-button_medium{padding:1rem 1.25rem}.f-button.f-button_large{padding:1.25rem 1.5rem;font-size:1.25rem}.f-button.f-button_round{border-radius:.75rem}.f-container{position:relative;width:100%;height:100%}.f-container .f-container__content{width:100%;height:100%;display:flex}.f-container.is-empty{overflow:hidden}.f-container.is-empty>.f-container__content{min-height:4rem;position:relative}.f-container.is-empty>.f-container__content:before{content:"";position:absolute;top:10px;right:10px;left:10px;bottom:10px;outline:1px dashed var(--color-gray-600)}.f-container>.outline.hovered{outline:2px dashed var(--color-yellow-400);outline-offset:-2px}.f-container>.outline.selected{outline:2px dashed var(--color-yellow-400);outline-offset:-2px}.f-image{position:relative}.f-image>.outline.hovered{outline:2px dashed var(--color-yellow-400);outline-offset:-1px}.f-image>.outline.selected{outline:2px dashed var(--color-yellow-400);outline-offset:-1px}.f-image>.placeholder{width:4rem;height:4rem;color:var(--color-gray-600)}.f-text{position:relative}.f-text>.outline.hovered{outline:2px dashed var(--color-yellow-400);outline-offset:-1px}.f-text>.outline.selected{outline:2px dashed var(--color-yellow-400);outline-offset:-1px}.f-text .f-text__content{width:100%;height:100%;position:relative;outline:none;white-space:pre-wrap;overflow-wrap:break-word}.f-text.align-left .f-text__content{text-align:left}.f-text.align-center .f-text__content{text-align:center}.f-text.align-right .f-text__content{text-align:right}.outline{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}