/* Ondavilo background workshop. All art is native CSS. */
.sflo-bg-preview-surface.sflo-bg-preview-motion{animation:sfloPreviewPatternMove var(--sflo-bg-preview-speed,16s) ease-in-out infinite alternate}
.sflo-bg-preview-surface.sflo-bg-preview-motion[data-bg-preview-family=gradient]{animation-name:sfloPreviewGradientMove}
@keyframes sfloPreviewPatternMove{from{background-position:0 0}to{background-position:64px 64px}}
@keyframes sfloPreviewGradientMove{from{background-position:0 0}to{background-position:100% 50%}}
@media(prefers-reduced-motion:reduce){.sflo-bg-preview-surface.sflo-bg-preview-motion{animation:none}}
.sflo-background-workshop{display:grid;grid-template-columns:255px minmax(0,1fr);gap:30px;min-width:0}.sflo-bg-controls{display:flex;flex-direction:column;gap:11px;border-right:1px solid var(--sflo-line,#e8e0ed);padding:6px 24px 0 0;min-width:0}.sflo-studio .sflo-bg-controls-title h2{font-size:29px;margin:8px 0 12px;letter-spacing:-1px}.sflo-bg-families{display:grid;grid-template-columns:1fr 1fr;gap:7px}.sflo-background-workshop .sflo-bg-families button{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;border:1px solid #e7dfee;border-radius:12px;background:#faf7fe;padding:8px;color:#79688d;font-size:10px;font-weight:650;cursor:pointer}.sflo-background-workshop .sflo-bg-families button[aria-pressed=true]{border-color:#b7a3e8;background:#eee7fc;box-shadow:0 0 0 1px #b7a3e8;color:#6044bd}.sflo-bg-families button:hover{border-color:#b7a3e8}.sflo-bg-sample{display:block;width:100%;height:34px;border-radius:6px;background-color:#eee8ff}.sflo-bg-sample-gradient{background-image:linear-gradient(135deg,#eee8ff,#9a80ee)}.sflo-bg-sample-dots{background-image:radial-gradient(#9a80ee 1.3px,transparent 1.5px);background-size:9px 9px}.sflo-bg-sample-grid{background-image:linear-gradient(#b29bed 1px,transparent 1px),linear-gradient(90deg,#b29bed 1px,transparent 1px);background-size:9px 9px}.sflo-bg-sample-stripes{background-image:repeating-linear-gradient(135deg,#eee8ff 0 6px,#b29bed 6px 12px)}.sflo-bg-palettes{display:flex;gap:10px;padding:2px 0 4px}.sflo-background-workshop .sflo-bg-palettes button{border:2px solid transparent;display:flex;overflow:hidden;padding:2px;border-radius:50%;width:31px;height:31px;background:transparent;cursor:pointer;flex-shrink:0}.sflo-bg-palettes i{width:50%;height:100%;display:block}.sflo-bg-palettes i:first-child{border-radius:15px 0 0 15px}.sflo-bg-palettes i:last-child{border-radius:0 15px 15px 0}.sflo-bg-palettes button[aria-pressed=true]{border-color:#7255de}.sflo-background-workshop label{display:flex;flex-direction:column;gap:6px;font-size:11px;color:#665674;font-weight:600;min-width:0}.sflo-bg-color-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.sflo-bg-color-row>label{flex-direction:row;align-items:center;gap:7px;font-size:9px}.sflo-bg-color-row input[type=color]{width:28px;height:28px;padding:1px;background:#fff;border:1px solid #e4d9ee;border-radius:9px;cursor:pointer;flex-shrink:0}.sflo-background-workshop .sflo-bg-motion{flex-direction:row;align-items:center;gap:8px;margin:6px 0 0;font-size:11px}.sflo-bg-motion input{accent-color:#7255de;margin:0}.sflo-background-workshop .sflo-bg-random{margin-top:5px;font-size:12px;font-weight:650}.sflo-bg-advanced{margin-top:3px}.sflo-bg-advanced>summary{padding:10px 0}.sflo-bg-advanced .sflo-fold-body{display:flex;flex-direction:column;gap:15px}.sflo-bg-advanced label{position:relative}.sflo-bg-advanced output{position:absolute;right:0;top:0;font-size:10px;font-weight:500;color:#8b78a3}.sflo-bg-advanced input[type=range]{width:100%;accent-color:#7255de;margin:5px 0}.sflo-bg-advanced input:disabled{opacity:.4;cursor:default}.sflo-background-workshop .sflo-bg-advanced button{font-size:11px}.sflo-bg-result{min-width:0}.sflo-bg-preview-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:5px 0 15px}.sflo-bg-devices{display:flex;gap:2px;padding:3px;background:#f1ebf7;border-radius:9px;flex-shrink:0}.sflo-background-workshop .sflo-bg-devices button{width:30px;height:28px;display:grid;place-items:center;padding:2px;border:0;border-radius:6px;background:transparent;color:#817094;font:21px/1 system-ui,sans-serif;cursor:pointer}.sflo-bg-devices button[aria-pressed=true]{background:#fff;color:#7255de;box-shadow:0 1px 4px #5039610c}.sflo-bg-devices button[data-bg-device=desktop]>span{display:block;transform:rotate(0deg) scaleX(1.1)}.sflo-bg-devices button[data-bg-device=tablet]>span{font-size:24px}.sflo-bg-devices button[data-bg-device=mobile]>span{font-size:19px}.sflo-bg-preview-stage{padding:23px;background-color:#f0e9f8;background-image:radial-gradient(#d6c8e4 1px,transparent 1px);background-size:12px 12px;border-radius:18px;min-height:390px;display:flex;align-items:center;overflow:hidden}.sflo-bg-preview-page{width:100%;margin:auto;min-width:0;overflow:hidden;border-radius:12px;background:#fff;box-shadow:0 7px 16px #452b6612;transition:max-width .2s}.sflo-bg-preview-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;padding:14px 21px;color:#665478;font-size:7px}.sflo-bg-preview-nav strong{font-size:15px;letter-spacing:-.8px}.sflo-bg-preview-nav strong>span{font-size:12px;color:#d5926b;margin-left:3px}.sflo-bg-preview-nav>span:last-child{font-size:14px}.sflo-bg-preview-surface{position:relative;min-height:303px;padding:28px 26px 19px;overflow:hidden}.sflo-bg-hero{position:relative;width:min(100%,380px);border-radius:17px;padding:26px 26px 23px;background:#fffdf7f2;color:#292044;box-shadow:0 7px 26px #33204d12}.sflo-bg-hero-kicker{display:block;font-size:6px;letter-spacing:1px;font-weight:750;color:#756685;max-width:245px}.sflo-bg-hero>strong{display:block;font-size:clamp(26px,3vw,36px);line-height:1.06;letter-spacing:-1.5px;font-weight:750;margin:13px 0 10px;max-width:300px}.sflo-bg-hero-copy{display:block;font-size:10px;color:#756685;line-height:1.5}.sflo-bg-fake-button{display:inline-flex;align-items:center;gap:15px;padding:9px 12px;margin-top:19px;border-radius:9px;background:#7255de;color:#fff;font-size:8px;font-weight:650;line-height:1.3}.sflo-bg-sun{position:absolute;right:21px;bottom:21px;color:#d69a79;font-size:31px;line-height:1}.sflo-bg-preview-foot{display:block;width:max-content;max-width:100%;font-size:7px;color:#49355b;background:#fffdf7e8;padding:5px 8px;margin-top:18px;border-radius:99px}.sflo-bg-project{display:grid;grid-template-columns:minmax(90px,.8fr) minmax(0,1fr);gap:0;border-radius:17px;overflow:hidden;background:#fffdf7;color:#292044;min-height:225px;box-shadow:0 7px 26px #33204d12}.sflo-bg-project-art{position:relative;overflow:hidden;background:#ffc4ad;min-height:215px}.sflo-bg-project-art>span{position:absolute;width:160px;height:160px;border-radius:50%;background:#ffe5a0;left:-50px;top:20px}.sflo-bg-project-art>i{position:absolute;left:30%;bottom:-55px;width:155px;height:180px;border-radius:50% 50% 15% 15%;background:#9c83df;transform:rotate(-15deg)}.sflo-bg-project-art>b{position:absolute;left:30%;top:72px;border-radius:50%;width:65px;height:65px;background:#fff9;color:#604889;text-align:center;font:45px/50px system-ui,sans-serif;transform:rotate(8deg)}.sflo-bg-project-copy{padding:27px 23px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.sflo-bg-project-copy>span:first-child{display:block;font-size:6px;letter-spacing:1px;font-weight:750;color:#756685}.sflo-bg-project-copy>strong{display:block;font-size:27px;line-height:1.08;letter-spacing:-1px;margin-top:13px}.sflo-bg-project-copy .sflo-bg-fake-button{margin-top:18px}.sflo-bg-preview-content{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:14px}.sflo-bg-preview-content label{display:flex;flex-direction:row;align-items:center;gap:9px;font-size:9px}.sflo-background-workshop .sflo-bg-preview-content select{max-width:100%;width:145px;min-height:31px;border:1px solid #e1d7e9;border-radius:9px;background:#fff;color:#5f4c75;padding:5px 7px;font-size:10px}.sflo-bg-preview-content>span{font-size:8px;color:#9b88aa;text-align:right;max-width:175px}.sflo-bg-result-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 0 3px}.sflo-background-workshop .sflo-bg-status{font-size:9px;color:#8b78a3;line-height:1.5;max-width:250px}.sflo-background-workshop .sflo-bg-result-bottom button{font-size:11px;font-weight:650;white-space:nowrap;min-height:38px}.sflo-bg-export{margin-top:12px}.sflo-background-workshop .sflo-bg-export-help{font-size:10px;line-height:1.7;color:#8b7b9d;margin-bottom:13px;max-width:610px}.sflo-bg-export-help code{font-size:10px;overflow-wrap:anywhere}.sflo-bg-export-actions{display:flex;gap:8px;flex-wrap:wrap}.sflo-background-workshop .sflo-bg-export-actions button{font-size:10px;font-weight:650;min-height:36px;padding:9px 12px}.sflo-bg-code-label{margin-top:15px}.sflo-background-workshop .sflo-bg-code{max-width:100%;width:100%;border:1px solid #ded2e8;border-radius:10px;background:#fbf8ff;color:#635373;padding:12px;font:10px/1.55 ui-monospace,monospace;resize:vertical}.sflo-background-workshop [hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){.sflo-bg-preview-page{transition:none}}
@media(max-width:1000px){.sflo-background-workshop{grid-template-columns:220px minmax(0,1fr);gap:20px}.sflo-bg-controls{padding-right:18px}.sflo-bg-preview-stage{padding:15px}.sflo-bg-preview-nav>span:nth-child(2){display:none}.sflo-bg-preview-surface{padding:22px 18px 17px}.sflo-bg-hero{padding:24px 20px}.sflo-bg-preview-content{flex-wrap:wrap;gap:8px}.sflo-bg-preview-content>span{text-align:left;max-width:none}.sflo-bg-project-copy{padding:21px 16px}.sflo-bg-project-copy>strong{font-size:24px}}
@media(max-width:760px){.sflo-background-workshop{grid-template-columns:1fr;gap:22px}.sflo-bg-controls{border-right:0;border-bottom:1px solid var(--sflo-line,#e8e0ed);padding:0 0 17px;display:grid;grid-template-columns:1fr 1fr;gap:12px 18px}.sflo-bg-controls-title,.sflo-bg-controls>.sflo-field-label,.sflo-bg-families,.sflo-bg-palettes,.sflo-bg-color-row,.sflo-bg-motion,.sflo-bg-random,.sflo-bg-advanced{grid-column:1/-1}.sflo-studio .sflo-bg-controls-title h2{font-size:28px;margin-bottom:5px}.sflo-bg-controls-title h2 br{display:none}.sflo-bg-families{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.sflo-background-workshop .sflo-bg-families button{padding:8px 5px;font-size:9px}.sflo-bg-sample{height:29px}.sflo-bg-palettes{gap:13px}.sflo-bg-color-row{max-width:330px}.sflo-background-workshop .sflo-bg-random{max-width:260px;min-height:42px}.sflo-bg-advanced .sflo-fold-body{max-width:440px}.sflo-bg-preview-stage{min-height:350px;padding:15px}.sflo-bg-preview-surface{min-height:275px}.sflo-bg-hero{max-width:330px}.sflo-bg-hero>strong{font-size:32px}.sflo-bg-preview-content{align-items:flex-start;flex-direction:column;gap:7px}.sflo-bg-preview-content>span{text-align:left}.sflo-bg-preview-content label{font-size:10px}.sflo-background-workshop .sflo-bg-preview-content select{font-size:12px;min-height:35px}.sflo-bg-project{min-height:210px}.sflo-bg-project-art{min-height:210px}}
@media(max-width:470px){.sflo-bg-preview-top{gap:6px}.sflo-bg-preview-top .sflo-live-badge{font-size:8px}.sflo-bg-preview-stage{padding:10px;min-height:315px}.sflo-bg-preview-nav{padding:12px 15px}.sflo-bg-preview-nav strong{font-size:13px}.sflo-bg-preview-surface{padding:18px 13px 15px;min-height:255px}.sflo-bg-hero{padding:23px 17px 20px;border-radius:13px}.sflo-bg-hero>strong{font-size:28px;letter-spacing:-1.2px}.sflo-bg-hero-kicker{font-size:5px;letter-spacing:.6px;max-width:190px}.sflo-bg-hero-copy{font-size:9px}.sflo-bg-sun{font-size:25px;right:16px;bottom:18px}.sflo-bg-fake-button{font-size:7px;padding:8px 10px;gap:10px}.sflo-bg-preview-foot{font-size:6px;margin-top:14px}.sflo-bg-project{grid-template-columns:1fr;min-height:0}.sflo-bg-project-art{min-height:125px}.sflo-bg-project-art>span{width:130px;height:130px;top:10px;left:-20px}.sflo-bg-project-art>i{width:150px;height:175px;bottom:-80px;left:48%}.sflo-bg-project-art>b{width:55px;height:55px;left:43%;top:27px;font:38px/42px system-ui,sans-serif}.sflo-bg-project-copy{padding:20px}.sflo-bg-project-copy>strong{font-size:25px}.sflo-bg-project-copy>strong br{display:none}.sflo-bg-result-bottom{align-items:flex-start;gap:8px}.sflo-background-workshop .sflo-bg-status{font-size:8px;max-width:145px}.sflo-background-workshop .sflo-bg-result-bottom button{font-size:9px;padding:10px 11px;min-height:39px}.sflo-bg-export>summary>span{display:none}.sflo-bg-families{gap:5px}.sflo-background-workshop .sflo-bg-families button{font-size:8px;padding:7px 3px}.sflo-bg-sample{height:26px}.sflo-background-workshop .sflo-bg-code{font-size:10px}}
@media(max-width:350px){.sflo-bg-families{grid-template-columns:repeat(2,minmax(0,1fr))}.sflo-bg-result-bottom{flex-wrap:wrap}.sflo-bg-preview-top .sflo-live-badge{max-width:115px}.sflo-bg-hero>strong{font-size:25px}.sflo-bg-hero-kicker{max-width:165px}.sflo-background-workshop .sflo-bg-preview-content select{font-size:11px;width:135px}.sflo-bg-preview-content label{font-size:9px}}

.sflo-background-workshop .sflo-bg-devices button>span{display:block;position:relative;border:1.5px solid currentColor;border-radius:2px;width:15px;height:10px;transform:none;font-size:0}.sflo-bg-devices button[data-bg-device=desktop]>span:after{content:"";position:absolute;left:4px;bottom:-4px;width:5px;height:2px;border-bottom:1.5px solid currentColor}.sflo-background-workshop .sflo-bg-devices button[data-bg-device=tablet]>span{width:11px;height:15px}.sflo-background-workshop .sflo-bg-devices button[data-bg-device=mobile]>span{width:8px;height:14px}