:root{--card-shadow-level1:5px 5px 10px #00000010;--primary-color:#e0b621;--primary-color-highlight:#efc42e;--primary-color-contrast:#21211e;--text-color:#e4e2da;--bg-color:#21211e;--section-bg-color:#FFFFFF11;--panel-bg-color:#1f1f1c;--editor-bg-color:#1a1a18;--editor-text-color:#1a1a18;--scrollbar-thumb-color:#FFFFFF33}*{margin:0;outline:none;padding:0;box-sizing:border-box}html{height:100%}body{color:var(--text-color);flex-direction:column;font-family:Outfit,Helvetica,sans-serif;font-size:1em;font-weight:300;display:flex;align-items:center;min-height:100%;background-color:var(--bg-color);gap:30px;&:has(mobile-nav[data-open],scrptly-dialog){overflow:hidden}}a,.link{color:inherit;text-decoration:underline;text-decoration-color:var(--primary-color);cursor:pointer;&:hover{opacity:.8}}header{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between;padding:0 30px;margin-top:20px;height:60px;border-bottom:1px solid #00000008;background-color:var(--section-bg-color);border-radius:100px;box-shadow:var(--card-shadow-level1);max-width:1200px;width:100%;.logo{display:flex;flex-flow:row nowrap;align-items:center;column-gap:8px;font-size:1.7em;text-decoration:none;font-weight:600;img{height:30px;opacity:.9}}>scrptly-icon.menu{display:none}mobile-nav{display:flex;position:fixed;inset:0;background-color:#0008;color:#fff;backdrop-filter:blur(10px);flex-flow:column nowrap;align-items:stretch;text-align:center;justify-content:center;transition:opacity .25s;opacity:0;pointer-events:none;z-index:100;.close{position:absolute;top:10px;right:10px;font-size:2em;cursor:pointer}&[data-open]{opacity:1;pointer-events:auto}scrptly-tokens,profile-link{margin:10px 0;align-self:center}a{text-decoration:none;padding:10px;font-size:1.1em}}mobile-head{display:none;flex-flow:row nowrap;align-items:center;gap:4px}nav{display:flex;align-items:center;gap:10px;a{text-decoration:none}nav-icons{display:flex;flex-flow:row nowrap;align-items:center;gap:2px}}}h1,h2,h3{line-height:1em;scrptly-icon{font-size:1em}}page-title{display:flex;flex-flow:row nowrap;align-items:center;gap:10px}main{align-self:center;flex:1;max-width:1200px;width:100%;display:flex;flex-flow:column nowrap;align-items:stretch;gap:30px;>form,>section,>article{background-color:var(--section-bg-color);border-radius:20px;padding:40px;box-shadow:var(--card-shadow-level1);>h1{a{text-decoration:none}}}}footer{display:flex;flex-flow:column nowrap;text-align:center;align-items:center;margin-top:20px;padding:30px 20px;gap:8px;font-size:.9em;max-width:1200px;width:100%;border-top-left-radius:30px;border-top-right-radius:30px;background:var(--section-bg-color);box-shadow:var(--card-shadow-level1);>em{font-size:.9em;font-style:normal}&:hover footer-columns footer-logo img{opacity:.9}footer-columns{align-self:stretch;display:flex;flex-flow:row wrap;align-items:start;justify-content:center;text-align:left;gap:15px;margin-bottom:15px;footer-logo{max-width:150px;display:flex;align-items:center;justify-content:center;align-self:center;img{height:80px;transition:opacity .2s;margin-right:40px}}footer-column{flex:1 1 150px;max-width:200px;display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:start;gap:5px;&.blog-posts{flex-grow:2;max-width:300px}a{text-decoration:none}>a{text-indent:-5px;padding-left:10px}>strong{font-weight:600;letter-spacing:.1em;cursor:default}}}}scrptly-page{display:block;background-color:var(--section-bg-color);border-radius:30px;padding:30px;box-shadow:var(--card-shadow-level1)}main>article{max-width:900px;align-self:center;h2{font-weight:300;margin-bottom:7px;margin-top:22px}strong{font-weight:500}}body:has(section.hero){header{position:absolute;z-index:20;backdrop-filter:blur(5px)}main{max-width:none;gap:0px;section{border-radius:0;background:none;padding-top:15vh;padding-bottom:15vh;box-shadow:none;h1{font-size:3.7em;font-weight:400}&.featured{font-size:1.8em;text-align:center;padding:15vh max(20px,(100vw - 800px) / 2);+section.featured{padding-top:0}h2{margin-bottom:30px}}}section.hero{position:relative;height:100vh;display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;padding:80px max(20px,(100vw - 800px) / 2);text-align:center;gap:30px;h2{margin:0;font-size:2.2em;font-weight:500}.buttons{display:flex;flex-flow:row nowrap;align-self:center;gap:20px}video{position:absolute;object-fit:cover;z-index:-1;width:100%;top:0;left:0;height:100%}}.what-is-scrptly{padding:15vh 0px;>p{font-size:2.8em;font-weight:450;padding:0px max(20px,(100vw - 1000px) / 2)}scrptly-features{display:flex;flex-flow:row wrap;margin-top:60px;gap:15px;align-items:stretch;justify-content:center;scrptly-feature{border-radius:10px;background-color:#0002;padding:10px;flex:0 1 300px;display:flex;flex-flow:column nowrap;font-size:1.4em;text-align:center;justify-content:center;gap:8px;scrptly-icon{font-size:4em}em{opacity:.8;font-size:.8em}}}}.demo-helloworld{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;background-color:#000;column-gap:30px;row-gap:40px;align-items:center;h1{grid-column:1 / -1;text-align:center}code-highlight{max-width:100%;overflow:auto;pre{width:fit-content}}video{max-width:100%;border-radius:10px}}.editor-showcase{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;gap:30px;background:linear-gradient(45deg,#e0217e3b,#e0217ebd);perspective:1000px;--scroll-progress: 0;--rotate-X:calc( var(--scroll-progress) * 20deg - 10deg);--rotate-Y:calc( var(--scroll-progress) * 20deg - 10deg);h1{text-align:center;font-size:3em;font-weight:300}img{grid-column:1 / -1;grid-row:2 / 3;max-width:80vw;align-self:center;justify-self:center;border-radius:8px;filter:drop-shadow(0px 0px 10px #FFFFFF44);pointer-events:none;&.editor-bg{filter:brightness(.5);transform:translateZ(-20px) rotateX(var(--rotate-X)) rotateY(var(--rotate-Y))}&.editor-preview{transform:translateZ(calc(0px + var(--scroll-progress) * 150px)) rotateX(var(--rotate-X)) rotateY(var(--rotate-Y))}&.editor-properties{transform:translateZ(calc(50px + var(--scroll-progress) * 200px)) rotateX(var(--rotate-X)) rotateY(var(--rotate-Y))}&.editor-timeline{transform:translateZ(calc(80px - var(--scroll-progress) * 50px)) rotateX(var(--rotate-X)) rotateY(var(--rotate-Y))}}}}}article{h1{text-align:center;font-size:2.3em;line-height:1em;margin-bottom:20px;&:not(:first-child){margin-top:20px}}iframe[src*="youtube.com"]{aspect-ratio:16 / 9;display:block;width:100%;border-radius:5px}.button{margin:15px auto;display:block;width:fit-content}}h2{margin-top:15px}h3{margin-top:10px}p{margin-bottom:15px}ul,ol{margin-left:18px;&:not(:last-child){margin-bottom:15px}}flex-spacer{flex:1 1 0px}blog-posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:15px;>a{display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;border-radius:5px;position:relative;aspect-ratio:5 / 3;padding:10px;text-decoration:none;transition:transform .25s;transform:none;&:hover{transform:scale(1.05);opacity:1;img{filter:brightness(1)}}img{display:block;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:5px;object-fit:cover;filter:brightness(.9);transition:filter .25s}strong{font-weight:600;font-size:1.3em;color:#fff;text-shadow:0px 0px 5px #000000;z-index:2;backdrop-filter:blur(5px);border-radius:8px;padding:5px 10px;text-align:center}}}blog-post-header{display:grid;grid-template-areas:"spacer image" "title image" "datetime image" "summary image" "spacer2 image";grid-template-rows:1fr auto auto auto 1fr;gap:12px;>h1{grid-area:title}>.datetime{grid-area:datetime;display:flex;flex-flow:row nowrap;align-items:center;gap:5px;date-time:after{content:" • ";margin-left:8px;margin-right:3px}span{font-weight:450}}>img{grid-area:image;max-width:200px;border-radius:10px}>.summary{grid-area:summary;font-size:1.1em;font-weight:450}}blog-post{display:flex;flex-flow:column nowrap;img{border-radius:4px;align-self:center;margin:15px;max-width:min(700px,90%);box-shadow:3px 4px 2px #0002}code{margin-bottom:15px}.button{padding:10px 20px;font-size:1.1em;align-self:center}}form,.form{display:flex;flex-flow:column nowrap;align-items:stretch;gap:10px;align-self:center;width:100%;&.small{max-width:500px}&.medium{max-width:800px}>h1:first-child{margin-top:-8px}.separator{display:flex;flex-flow:row nowrap;align-items:center;gap:10px;font-weight:600;font-size:.9em;opacity:.8;text-transform:uppercase;user-select:none;&:before,&:after{content:"";height:1px;background:#ddd;flex:1 1 20px}}}form-notice,notice-message{display:block;padding:6px 12px;border-radius:3px;--color:#bf5050;color:#fff;background:var(--color);white-space:pre-wrap;margin:8px 0;&[data-compact]{padding:4px;background:transparent;color:var(--color)}&[data-status=success]{--color:#29923e}&[data-status=warning]{--color:#d17b26}&[data-status=info]{--color:#3071a3}&[data-status=neutral],&[data-status=loading]{--color:#494949}}status-badge{display:inline-flex;align-items:center;background:#656565;color:#1e1e1e;padding:2px 8px;border-radius:100px;vertical-align:middle;font-size:.75em;text-transform:uppercase;font-weight:700;user-select:none;margin:0 5px;&[data-status=ready],&[data-status=success],&[data-status=active]{background:#29923e}&[data-status=awaiting],&[data-status=rendering]{background:#3071a3}&[data-status=failed],&[data-status=error],&[data-status=deleting]{background:#a52b2b}}form-field,form-subfield{display:flex;flex-flow:column nowrap;gap:4px;&.horizontal{flex-flow:row nowrap;align-items:center;gap:10px;input[type=number]{flex-grow:0}>label{min-width:30%}}}form-subfield{padding-left:40px;>label:has(input[type=checkbox]){padding-top:10px;padding-bottom:10px}}form-section-title{font-weight:600;margin-top:10px;margin-bottom:5px}form-field-columns{display:flex;flex-flow:row wrap;gap:15px;>form-field{flex:1}}input-wrapper,input[type=text],input[type=password],input[type=email],input[type=number],input[type=search],textarea,select{color:inherit;background-color:#0002;border:0px;border-radius:3px;font-family:inherit;font-size:.9em;font-weight:300;line-height:1.42857;display:block;padding:8px 12px;flex:1;&[disabled]{opacity:.7;filter:grayscale(1)}}input-wrapper{display:flex;flex-flow:row nowrap;align-items:center;gap:8px;>span{user-select:none;opacity:.8}}input-wrapper>input[type]{padding:0;margin:0;border:0px;box-shadow:0 0;border-radius:0;background:none}textarea{resize:vertical;min-height:120px;flex:auto;&.code{font-size:.85em;font-family:inherit;font-weight:400;font-style:normal}}select{-webkit-appearance:none;-moz-appearance:none;background-image:linear-gradient(45deg,transparent 50%,#333333 50%),linear-gradient(135deg,#333333 50%,transparent 50%),radial-gradient(#d1d1d1 70%,transparent 72%);background-position:calc(100% - 18px) calc(1em + 2px),calc(100% - 13px) calc(1em + 2px),calc(100% - .5em) .5em;background-size:5px 5px,5px 5px,1.5em 1.5em;background-repeat:no-repeat;width:100%}button,input[type=submit],input[type=reset],input[type=button],.button{border-radius:4px;align-self:center;color:var(--primary-color-contrast);line-height:inherit;cursor:pointer;background-color:var(--primary-color);border:0;padding:9px 15px;text-decoration:none;text-align:center;font-family:Outfit,Helvetica,sans-serif;font-size:.9em;display:inline-flex;align-items:center;justify-content:center;font-weight:400;user-select:none;&:hover{background-color:var(--primary-color-highlight)}&.secondary{background-color:#ebe8df;&:hover{background-color:#f1efe8}}&.light{background-color:#0001;color:inherit;&:hover{background-color:#0002}}&.critical{background-color:#bf5050;&:hover{background-color:#c75a5a}}&.compact{padding:4px 8px}&.large{padding:12px 20px;font-size:1em;font-weight:500}&.card{display:flex;flex-flow:column nowrap;align-items:center;aspect-ratio:1;color:#333;background-color:#0002;gap:6px;width:120px;position:relative;&[disabled]{pointer-events:all}>scrptly-icon{font-size:2em}&:hover{background-color:#0001}scrptly-tooltip{top:100%;left:50%;width:140%}}&[disabled]{cursor:not-allowed;opacity:.7;pointer-events:none;filter:grayscale(1)}form-buttons &{flex:1}>scrptly-icon{margin-right:3px}h2>&{font-size:14px;margin-left:5px}}label{display:flex;flex-flow:row nowrap;align-items:center;gap:8px;user-select:none}input[type=checkbox]{width:16px;height:16px;&[disabled]{cursor:not-allowed}}form-buttons{display:flex;flex-flow:row;align-items:center;gap:8px;&.center{justify-content:center;>input,>button,>.button{flex-grow:0;flex-basis:auto}}}form-buttons+strong:has(+form-buttons){display:block;text-align:center}input[name=code]{font-size:25px;text-align:center}scrptly-icon,scrptly-tokens:before,asset-entry:before,scrptly-menu-item[data-icon]:before{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;font-size:1.5em;vertical-align:middle;aspect-ratio:1;display:inline-block;height:1em;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased;--icon-weight:300;--icon-fill:0;font-variation-settings:"FILL" var(--icon-fill),"wght" var(--icon-weight),"GRAD" 0,"opsz" 24;user-select:none;&.filled{--icon-fill:1}&.clickable{border-radius:100%;height:1.3em;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;&:hover{background-color:#0001}}&.loading{animation:loading 1s linear infinite}}html:not([data-icons-loaded]){scrptly-icon,scrptly-tokens:before{text-indent:-100000vw}}scrptly-tokens{display:inline-flex;align-items:center;border-radius:30px;padding:2px 8px;background:#fae6ab;color:#000;cursor:default;font-weight:450;font-family:Outfit,Helvetica,sans-serif;gap:4px;vertical-align:-.1em;&:before{content:"money_bag";--icon-weight:400;--icon-fill:1;font-size:1em}&.clickable{cursor:pointer;&:hover{background:#f9e0a0}}}scrptly-loading,global-loader:after,editor-loading:before{--color: #00000099;--width: 1px;--size: 21px;width:var(--size);aspect-ratio:1;display:inline-block;border-radius:50%;border:var(--width) solid var(--color);border-left-color:transparent;animation:loading 1s linear infinite;align-self:center}@keyframes loading{0%{transform:rotate(0)}to{transform:rotate(360deg)}}global-loader{position:fixed;inset:0;background:#0005;backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;z-index:1500;opacity:0;pointer-events:none;transition:opacity .25s;&[data-visible]{opacity:1;pointer-events:auto}&:after{border:1px solid #FFFFFF99;border-left-color:transparent;content:"";width:42px;border-width:2px}}scrptly-dialogs{display:flex;align-items:center;justify-content:center;backdrop-filter:blur(5px);background:#0003;position:fixed;inset:0;z-index:1000;&:empty{display:none}}scrptly-dialog{position:absolute;display:flex;flex-flow:column nowrap;align-items:stretch;min-width:min(80vw,max(400px,40vw));max-width:80%;max-height:80%;background:#30302e;box-shadow:var(--card-shadow-level1);border-radius:3px;overflow:auto;gap:10px;padding:14px;scrptly-dialog-actions{display:flex;flex-flow:row nowrap;align-items:center;justify-content:end;padding:10px;margin:14px -14px -14px;gap:8px;position:sticky;bottom:-14px;background:inherit}form-buttons{margin-top:15px}.close{position:absolute;top:8px;right:8px;font-size:1.6em}h4{text-align:center;font-size:1.1em;font-weight:400;margin:10px 0}}scrptly-tooltip{display:block;position:absolute;opacity:0;transform:translate(-50%,-50%);transition:transform .25s,opacity .25s;font-family:Outfit,Helvetica,sans-serif;font-variation-settings:normal;font-size:14px;font-weight:450;text-align:center;pointer-events:none;background:#0009;color:#fff;border-radius:4px;padding:3px 6px;backdrop-filter:blur(4px);max-width:min(800px,90vw);white-space:pre-wrap;&:empty{display:none}}:has(>scrptly-tooltip){span&{cursor:default}&:hover>scrptly-tooltip{transform:translate(-50%);opacity:1}}pricing-columns{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(14,auto);column-gap:10px;row-gap:5px;margin:45px 0;pricing-features,pricing-column{display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid}pricing-features{grid-row:2 / -1;pricing-feature{justify-content:start}}pricing-column{grid-row:1 / -1;border:1px solid #FFFFFF11;border-radius:10px;background:linear-gradient(135deg,#ffffff07,transparent);transition:transform .4s;padding:20px 10px;&:hover{transform:scale(1.02);border:1px solid #FFFFFF33}&[data-current]{border:2px solid #FFFFFF33;.button[disabled]{background:#29923e;filter:none}}pricing-plan{display:flex;gap:5px;flex-flow:column nowrap;align-items:center;margin-bottom:20px;>h3{font-size:2.1em;line-height:1em;font-weight:600}>em{font-weight:500}>strong{font-size:1.7em;line-height:1em;font-weight:400;>em{font-size:.5em}}}}pricing-feature{display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;padding:8px 12px;font-size:1.1em;border-radius:10px;user-select:none;text-align:center}&:has(pricing-feature:nth-of-type(1):hover) pricing-feature:nth-of-type(1){background-color:#0002}&:has(pricing-feature:nth-of-type(2):hover) pricing-feature:nth-of-type(2){background-color:#0002}&:has(pricing-feature:nth-of-type(3):hover) pricing-feature:nth-of-type(3){background-color:#0002}&:has(pricing-feature:nth-of-type(4):hover) pricing-feature:nth-of-type(4){background-color:#0002}&:has(pricing-feature:nth-of-type(5):hover) pricing-feature:nth-of-type(5){background-color:#0002}&:has(pricing-feature:nth-of-type(6):hover) pricing-feature:nth-of-type(6){background-color:#0002}&:has(pricing-feature:nth-of-type(7):hover) pricing-feature:nth-of-type(7){background-color:#0002}&:has(pricing-feature:nth-of-type(8):hover) pricing-feature:nth-of-type(8){background-color:#0002}&:has(pricing-feature:nth-of-type(9):hover) pricing-feature:nth-of-type(9){background-color:#0002}&:has(pricing-feature:nth-of-type(10):hover) pricing-feature:nth-of-type(10){background-color:#0002}&:has(pricing-feature:nth-of-type(11):hover) pricing-feature:nth-of-type(11){background-color:#0002}&:has(pricing-feature:nth-of-type(12):hover) pricing-feature:nth-of-type(12){background-color:#0002}&:has(pricing-feature:nth-of-type(13):hover) pricing-feature:nth-of-type(13){background-color:#0002}&:has(pricing-feature:nth-of-type(14):hover) pricing-feature:nth-of-type(14){background-color:#0002}}pricing-more{border:1px solid #FFFFFF11;border-radius:10px;background:linear-gradient(135deg,#ffffff07,transparent);transition:transform .4s;padding:20px 10px;h2{font-size:1.5em}p{font-size:1.2em}.button{margin-top:10px}}pricing-page{display:contents;>h2{align-self:center;opacity:.8}>h1{align-self:center;font-size:2.6em;text-align:center;line-height:1em}}scrptly-toasts{display:flex;flex-flow:column nowrap;align-items:center;position:fixed;top:0;width:100%;pointer-events:none;padding-top:25px;gap:10px;z-index:1200;& scrptly-toast{pointer-events:auto;display:flex;--color:#bf5050;background:var(--color);color:#fff;padding:6px 10px;border-radius:3px;font-weight:400;white-space:pre-wrap;cursor:default;font-size:.9em;&[data-type=success]{--color:#29923e}&[data-type=warning]{--color:#d17b26}&[data-type=info]{--color:#3071a3}&[data-type=neutral]{--color:#494949}}}input-fields{display:flex;flex-flow:column nowrap;align-items:stretch;gap:15px;>em{font-weight:600;font-style:normal;text-align:center;padding:15px;font-size:1.1em;opacity:.5;user-select:none}>button{font-size:1.1em;align-self:stretch}}input-field{display:flex;flex-flow:column;gap:8px;padding:15px;border-radius:15px;border:1px solid #00000011;position:relative;&:has([aria-pressed]){z-index:100}>h2:first-child{cursor:grab;display:flex;align-items:center;gap:5px;font-size:1.2em;user-select:none;&:active{cursor:grabbing}>scrptly-icon{font-size:1em}}>.delete{position:absolute;top:15px;right:15px;cursor:pointer}}button-cards{display:flex;align-items:center;flex-flow:row wrap;gap:8px}options-list{display:flex;flex-flow:column nowrap;gap:8px;align-items:stretch;padding-left:15px;max-width:500px;>div{display:flex;flex-flow:row nowrap;align-items:center;padding-right:32px;gap:8px;label{display:block;flex:1;text-align:center;font-weight:500;font-size:.9em}}option-input{display:flex;flex-flow:row nowrap;align-items:center;gap:8px;scrptly-icon{cursor:pointer}input{flex:1}&:only-of-type scrptly-icon{display:none}}>button{align-self:auto}}pre.rendered-project{font-size:1.1em;white-space:pre-wrap;padding:15px;border:2px solid var(--primary-color);border-radius:15px;font-family:inherit}radio-options{display:flex;flex-flow:row wrap;align-items:center;gap:8px;radio-option{display:flex;flex-flow:row nowrap;align-items:center;padding:4px 8px;border-radius:6px;cursor:pointer;background:#0001;user-select:none;gap:4px}}dashboard-header{display:flex;flex-flow:row wrap;align-items:stretch;justify-content:stretch;gap:15px;dashboard-card,>a{flex:1 1 0px;width:0px;min-width:fit-content;text-decoration:none;&:not(:has(scrptly-icon)){align-self:center}&:has(scrptly-icon){padding:15px;border-radius:10px;border:1px solid #FFFFFF11;display:flex;flex-flow:row nowrap;align-items:center;gap:10px;scrptly-icon{font-size:3.8em}>div{flex:1;display:flex;flex-flow:column nowrap;align-items:center;strong{font-size:3em;line-height:1em;span{font-size:.5em}}i{font-weight:700;font-size:1.5em;opacity:.8}em{font-style:normal;font-weight:500;opacity:.6}.button{margin-top:10px}}}}+h2{margin-top:20px}}project-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;padding:10px 0;project-entry{border:1px solid #FFFFFF11;border-radius:5px;position:relative;aspect-ratio:1;display:flex;flex-flow:column nowrap;align-items:stretch;cursor:pointer;justify-content:end;>.delete{position:absolute;top:5px;right:5px;cursor:pointer;opacity:.7;color:#fff;background:#0004;backdrop-filter:blur(4px);&:hover{opacity:1;background:#0004}}&:not(:hover)>.delete{display:none}img{position:absolute;inset:0;border-radius:inherit;object-fit:cover;width:100%;height:100%;object-fit:contain;background:#000}project-info{display:flex;flex-flow:row wrap;background-color:#0003;backdrop-filter:blur(4px);padding:8px;margin:4px;border-radius:3px;align-items:center;justify-content:space-between;strong{flex:1 0 100%;font-weight:500;font-size:1.1em;color:#fff}em,span{font-size:.8em;opacity:.7;font-style:normal;font-weight:600}}}}assets-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;padding:10px 0}asset-entry{border:1px solid #FFFFFF11;border-radius:5px;position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;cursor:pointer;asset-entry-info{position:absolute;bottom:0;left:0;padding:5px;width:100%;display:flex;flex-flow:row wrap;justify-content:space-between;background-color:#30302d7a;backdrop-filter:blur(4px);border-bottom-left-radius:5px;border-bottom-right-radius:5px;strong{flex:1 0 100%;font-weight:500;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:block;max-width:100%}em,span{opacity:.8;font-size:.8em;font-style:normal}}asset-entry-actions{position:absolute;top:5px;right:5px;opacity:0;background-color:#30302d7a;backdrop-filter:blur(4px);border-radius:3px;cursor:default;scrptly-icon{cursor:pointer}}>scrptly-icon{font-size:150px;margin-bottom:20px}>img{max-width:100%;max-height:100%;object-fit:contain}&:hover{asset-entry-actions{opacity:1}}&[data-selected]{border-color:#fffa;background:#fff1;&:before{content:"check";position:absolute;top:4px;left:4px;font-size:2.1em;background:#0004;border-radius:50%;aspect-ratio:1;background-color:#30302d7a;backdrop-filter:blur(4px)}}}renders-list{display:flex;flex-flow:column nowrap;align-items:stretch;gap:5px;margin:15px 0;render-entry{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between;gap:10px;background:#0001;border-radius:8px;padding:8px 20px;cursor:pointer;&:hover{background:#0002}.img{width:200px;height:200px;display:flex;align-items:center;justify-content:center;img{max-width:200px;max-height:200px;border-radius:3px}scrptly-loading{--color:#FFFFFF;--width:2px;--size:31px}}.img+a,.img+em{flex:1 1 auto;text-align:center}}}.render-page{img{max-width:100%;max-height:60vh;border-radius:8px;display:block;margin:0 auto}.download{margin:15px auto;display:block}}log-list{display:flex;flex-flow:column nowrap;gap:4px;background:#0001;padding:8px;border-radius:5px;margin:10px 0;log-entry{display:block;background:#0001;cursor:default;&:hover{background:#0002}border-radius:3px;padding:4px;white-space:pre-wrap}}code-editor{background-color:#0002;border-radius:3px;tab-size:4;display:flex;flex-flow:row nowrap;code-editor-content{padding:8px;display:block;flex:1 1 0px;width:0px;overflow:auto;textarea,div{min-height:150px}pre,div{width:fit-content}pre,textarea,div,code{min-width:100%;font-family:inherit}}}code-highlight{display:block;background-color:#0001;padding:8px;border-radius:3px;tab-size:4;margin-bottom:15px;width:100%;overflow:auto}form-buttons.variable-buttons{flex-wrap:wrap;justify-content:start;button{flex:0 0 auto}}code:not(.shiki code){border-radius:3px;background-color:#0001;padding:3px 6px;white-space:pre-wrap}code{tab-size:4}scrptly-page.api-docs{line-height:1.6em;code{line-height:1.2em;background-color:#00000038}>h1{margin-top:40px;font-weight:500}>h2{margin-left:8px;font-weight:400;margin-top:20px;margin-bottom:10px}>h3{font-weight:500;margin-top:15px}ol,ul{margin-left:44px}>:not(h1):not(h2):not(page-header):not(ol):not(ul){margin-left:16px}pre+:not(h1,h2,h3){margin-top:8px}}form-steps{display:grid;transition:grid-template-rows .4s ease-in-out;grid-template-columns:1fr;grid-template-rows:1fr}form-step{display:flex;flex-flow:column nowrap;align-items:stretch;gap:10px;transition:transform .4s ease-in-out,opacity .4s,max-height 0s linear 0s;max-height:100000vh;flex:0 0 100%;grid-column:1 / 1;grid-row:1 / 1;transform:translate(calc((var(--step-num) - var(--current-step)) * (100% + 20px)));opacity:1;overflow:visible;&:not([data-current]){position:absolute;width:100%;opacity:0;pointer-events:none;transition:transform .4s ease-in-out,opacity .4s,max-height 0s linear .4s;max-height:0px;overflow:hidden}}scrptly-uploader{color:#8a8a8a;background:#0001;border-radius:5px;padding:40px 20px;display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;gap:6px;outline:2px dashed #FFFFFF44;outline-offset:-10px;position:relative;z-index:10;text-align:center;&:hover{background:#00000009}input{background-color:red;position:absolute;inset:0;opacity:0;cursor:pointer}h2{font-family:inherit;font-weight:400;margin:20px 10px}img{max-width:200px;max-height:150px;border-radius:4px}scrptly-icon{position:absolute;right:10px;top:10px;z-index:12;color:#000}.error{background:#bf5050;color:#fff;border-radius:4px;padding:3px 10px}scrptly-loading{border-color:#0009;border-width:2px;width:31px;border-left-color:transparent;position:absolute;top:calc(50% - 15px);left:calc(50% - 15px);z-index:4;+img{opacity:.5}}}page-header{display:flex;flex-flow:row nowrap;align-items:center;>h1{flex:1 1 auto;font-size:2.3em;>scrptly-icon{font-size:.8em}}>scrptly-icon{justify-self:end;align-self:start;font-size:1.8em;padding-top:2px}}page-subtitle{display:flex;flex-flow:row nowrap;align-items:center;gap:5px;padding:10px 0;h2{margin-top:0}date-time:after{content:" • ";margin-left:8px;margin-right:3px}}date-time{font-weight:700;opacity:.6;font-size:.85em;text-transform:uppercase}profile-link{display:flex;align-items:center;gap:5px;img{display:block;aspect-ratio:1;border-radius:50%;width:40px;object-fit:cover;cursor:pointer}&.small img{width:26px}span{font-weight:450;cursor:pointer}}profile-header{display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr auto auto 1fr;grid-template-areas:"pp spacer1" "pp username" "pp info" "pp spacer2";gap:10px;column-gap:20px;profile-link{grid-area:pp;img{cursor:default;width:100px}}h1{grid-area:username}span{grid-area:info}}scrptly-tabs{display:grid;grid-template-columns:1fr;align-items:center;align-self:center;min-width:600px;margin:15px auto;scrptly-tab-titles{display:flex;flex-flow:row nowrap;align-items:stretch;scrptly-tab-title{text-align:center;padding:10px;flex:1 0 0px;border-bottom:1px solid #FFFFFF11;cursor:pointer;font-weight:400;&:hover{border-color:1px solid #FFFFFF55}&[data-current]{border-bottom:2px solid var(--primary-color);font-weight:500}}}scrptly-tab-content{display:flex;flex-flow:column nowrap;padding:15px;>form:first-child{padding-top:15px}}&[data-dense] scrptly-tab-content{padding:0}}scrptly-table{display:grid;grid-template-rows:auto;border:1px solid #00000011;border-radius:5px;align-self:stretch;justify-self:stretch;margin:20px 0;overflow:auto;position:relative;scrptly-table-headings{display:contents;cursor:default;scrptly-table-cell{position:sticky;top:0;font-weight:500;background:#0001;display:block;text-overflow:ellipsis;white-space:nowrap;backdrop-filter:blur(4px);z-index:200}}scrptly-table-entry{display:contents;&:has(:hover) scrptly-table-cell{background-color:#00000008}}scrptly-table-cell{padding:8px 10px;overflow:hidden;text-align:center;display:flex;flex-flow:row wrap;align-items:center;justify-content:center;white-space:normal;word-break:break-word;line-height:1em;gap:4px;&[data-vertical]{flex-flow:column nowrap}&:first-child{justify-content:start;flex-wrap:nowrap;text-align:left}}scrptly-table-empty{grid-column:1 / -1;padding:30px 15px;text-align:center}}scrptly-tags{display:flex;flex-flow:row wrap;gap:5px;margin:10px 0;scrptly-tag{display:flex;flex-flow:row wrap;align-items:center;background:#0001;border-radius:3px;padding:2px 4px;font-size:.9em;font-weight:450;user-select:none;scrptly-icon{font-size:1em;margin-left:3px;cursor:pointer}}}profile-editor{display:flex;flex-flow:column nowrap;gap:10px}profile-field{display:flex;flex-flow:row nowrap;align-items:center;gap:3px;label{font-weight:450;flex:0 0 140px}.apiKey{padding:3px 6px;border-radius:3px;background:#0001;user-select:all;font-family:monospace;word-break:break-word;&:not([data-visible]){user-select:none}}&.integration{span{margin-right:4px}}}html[data-pathname^="/project/"]{body{gap:0px;padding:0;overflow:hidden}header{display:none}footer{display:none}main{padding:0;max-width:none;width:100%;min-height:100vh}}scrptly-editor{position:absolute;inset:0;display:grid;gap:2px;padding:2px;user-select:none;--editor-properties-width: 300px;--editor-timeline-height: 400px;grid-template-areas:"header header" "canvas properties" "toolbar properties" "timeline timeline";grid-template-columns:1fr min(50vw,max(200px,var(--editor-properties-width)));grid-template-rows:auto 1fr auto min(max(200px,var(--editor-timeline-height)),70vh);background:var(--editor-bg-color);color:silver;>*{font-size:.9em;background-color:var(--panel-bg-color);border-radius:3px}editor-header{grid-area:header;display:flex;flex-flow:row nowrap;align-items:center;gap:10px;padding:10px 20px;border-bottom:1px solid #00000022;margin-top:-2px;margin-left:-2px;margin-right:-2px;h1{font-size:1em}.logo{display:flex;img{height:26px}}button{align-self:stretch}}select{padding:4px 10px;background-image:linear-gradient(45deg,transparent 50%,#ffffff 50%),linear-gradient(135deg,#ffffff 50%,transparent 50%),radial-gradient(#ffffff1a 70%,transparent 72%);background-position:calc(100% - 14px) 50%,calc(100% - 10px) 50%,calc(100% - 6px) 50%;background-size:4px 4px,4px 4px,16px 16px}&[data-isplaying]{editor-timeline,editor-properties{opacity:.5;pointer-events:none}}}editor-canvas{grid-area:canvas;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;place-items:anchor-center;align-content:center;justify-content:center;overflow:hidden;--canvas-scale:1;--canvas-offset-x:0px;--canvas-offset-y:0px;image-rendering:pixelated;position:relative;background:#131313;>*{grid-column:1 / -1;grid-row:1 / -1}&[data-grab-mode]{cursor:grab;&:active{cursor:grabbing}editor-canvas-selection{pointer-events:none}}editor-canvas-inner{flex:0 0 auto;transform:translate(calc(var(--canvas-offset-x) * -1px),calc(var(--canvas-offset-y) * -1px)) scale(var(--canvas-scale));border-radius:calc(min(var(--project-height),var(--project-height))*.007px);box-shadow:0 0 calc(min(var(--project-height),var(--project-height))/25px) #ffffff15}editor-canvas-selections{display:block;z-index:1;pointer-events:none;transform:translate(calc(var(--canvas-offset-x) * -1px),calc(var(--canvas-offset-y) * -1px));width:calc(var(--canvas-scale) * var(--canvas-project-width) * 1px);height:calc(var(--canvas-scale) * var(--canvas-project-height) * 1px);perspective:calc(1px*max(var(--canvas-project-height),var(--canvas-project-width)));editor-canvas-selection{display:block;position:absolute;border:1px solid #3676e5;border-width:calc(1px / var(--layer-scale-abs-1)) calc(1px / var(--layer-scale-abs-0));width:calc(var(--layer-width) * 1px * var(--canvas-scale));height:calc(var(--layer-height) * 1px * var(--canvas-scale));top:calc(var(--layer-top) * 1px * var(--canvas-scale));left:calc(var(--layer-left) * 1px * var(--canvas-scale));transform:scale(var(--canvas-scale)) var(--layer-transform) scale(calc(1 / var(--canvas-scale)));transform-origin:calc(var(--layer-anchor-x) * 100%) calc(var(--layer-anchor-y) * 100%) calc(var(--layer-anchor-z) * 1px);will-change:transform;&:not([data-enabled]){display:none}.anchor{position:absolute;pointer-events:auto;color:#fff;left:calc(var(--layer-anchor-x) * 100%);top:calc(var(--layer-anchor-y) * 100%);transform:translate(-50%,-50%) scale(calc(1 / var(--layer-scale-abs-0)),calc(1 / var(--layer-scale-abs-1)));-webkit-text-stroke:1px black;paint-order:stroke;cursor:grab;&:active{cursor:grabbing}}editor-canvas-selection-resizer{width:calc(7px / var(--layer-scale-abs-0));height:calc(7px / var(--layer-scale-abs-1));background:#3676e5;position:absolute;top:calc(-3.5px / var(--layer-scale-abs-0));right:calc(-3.5px / var(--layer-scale-abs-0));cursor:nesw-resize;pointer-events:auto}}}}editor-toolbar{grid-area:toolbar;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;gap:4px;padding:3px 10px;background-color:#181818;.play-stop{--icon-fill: 1}scrptly-icon.clickable{font-size:1.8em;height:auto;opacity:.65;&:hover{opacity:.8}&:active{opacity:1}}editor-toolbar-section{flex:1 1 0px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;gap:6px;&:first-child{justify-content:start}&:last-child{justify-content:end}input-number{width:60px}}}editor-properties{display:flex;flex-flow:column nowrap;grid-area:properties;overflow:auto;padding-right:8px;padding-bottom:40px;&::-webkit-scrollbar{-webkit-appearance:none;height:8px;width:8px}&::-webkit-scrollbar-thumb{border-radius:4px;background-color:var(--scrollbar-thumb-color)}section{padding:12px 0;display:flex;flex-flow:column nowrap;gap:8px;&:not(:has(editor-property)){display:none}>h2{margin:0 0 8px;font-size:1em;padding:8px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:#1f1f1c;z-index:2;>span{flex:1 1 auto}scrptly-icon{font-size:1.4em;opacity:.8;&[data-enabled]{opacity:1;color:var(--primary-color)}}}button.large{margin:20px auto}}editor-property{display:flex;flex-flow:row nowrap;align-items:center;gap:8px;>label{display:block;font-weight:500;font-size:.8em;flex:0 0 85px;text-align:right;color:#bbb;&[data-isset] span{color:var(--primary-color)}scrptly-keyframe{display:inline-block;position:relative;>scrptly-icon{opacity:1;color:#13e47b;margin-right:3px;font-size:1.3em;cursor:pointer;&[data-hascurrent]{--icon-fill:1}&:hover{opacity:1}}&[data-isstatic]{>scrptly-icon{color:inherit;opacity:.5;&:hover{opacity:1}}}scrptly-keyframe-pop{display:flex;flex-flow:row wrap;align-items:center;width:100px;column-gap:2px;row-gap:5px;opacity:0;pointer-events:none;position:absolute;left:-5px;top:-5px;z-index:2;background:#313131;border:1px solid #FFFFFF22;padding:5px;border-radius:3px;justify-content:center;>scrptly-icon{font-size:1.3em;opacity:.5;cursor:default;&:not(.arrow:not([data-enabled])){cursor:pointer;&:hover{opacity:1}}&[data-enabled]{opacity:1;color:var(--primary-color)}}>scrptly-icon.arrow{font-size:1em}>scrptly-icon:not(.arrow){--icon-fill:1}input-dropdown{width:100%}}&:hover{scrptly-keyframe-pop{opacity:1;pointer-events:auto}}}}>:not(label,scrptly-icon,textarea){flex:1 1 0px}&:has(textarea){flex-flow:column nowrap;>label{text-align:left;flex:0 0 auto;align-self:start}textarea{resize:vertical;height:120px;width:100%}}}editor-properties-ai{padding:8px;border-radius:8px;border:1px solid #e0b6217a;margin:5px 0 5px 8px;display:flex;flex-flow:column nowrap;align-items:stretch;gap:inherit;h3{text-align:center;font-size:1em;font-weight:500;color:#fff;cursor:pointer;margin:8px 0}h3>scrptly-icon:before{content:"keyboard_arrow_right"}&[data-open] h3>scrptly-icon:before{content:"keyboard_arrow_down"}&:not([data-open])>:not(h3){display:none}em{font-weight:500;text-align:center;margin:8px 0}}code-editor{width:100%;font-size:.8em;code-editor-content{display:block;overflow:auto}}}editor-ai-result{img,audio,video{max-width:min(100%,80vw);max-height:min(100%,70vh);border-radius:5px;display:block}}editor-timeline{--timeline-header-width: 300px;--timeline-duration: 1800 ;--timeline-scale: 1;--timeline-gap: 5px;display:grid;grid-template-areas:"_ ref" "status ruler" "layers layers";grid-template-columns:var(--timeline-header-width) 1fr;grid-template-rows:0px auto 1fr;column-gap:var(--timeline-gap);grid-area:timeline;position:relative;overflow:hidden;editor-timeline-ref{grid-area:ref;height:0px}editor-timeline-playhead{width:1px;background-color:var(--primary-color);position:absolute;top:0;bottom:0;left:calc(var(--timeline-header-width) + 5px + var(--frame) * var(--timeline-scale) * 1px - var(--scroll-start) * 1px);z-index:100;&:not([data-visible]){visibility:hidden;pointer-events:none}&:before{content:"";position:absolute;top:-5.5px;left:-5px;width:11px;height:11px;background-color:var(--primary-color);transform:rotate(-135deg);clip-path:polygon(0% 0%,100% 0%,0% 100%)}&:after{content:"";position:absolute;inset:0 -2px;background:transparent}}editor-timeline-playhead-hidden{width:0px;height:0px;visibility:hidden;pointer-events:none;position:absolute;top:0;left:calc(var(--timeline-header-width) + 5px + var(--frame) * var(--timeline-scale) * 1px)}editor-timeline-status{grid-area:status;display:flex;flex-flow:row nowrap;align-items:center;padding-right:16px;editor-timeline-timecode{display:flex;align-items:center;justify-content:center;font-size:1.1em;font-weight:500;color:#fffa;cursor:pointer;flex:1 1 auto;&:hover{color:#fffd}}>scrptly-icon{cursor:pointer;&:hover{color:#fffd}}}editor-timeline-ruler{grid-area:ruler;margin-left:-10px;height:40px;display:flex;align-items:flex-end;canvas{height:inherit;width:100%}}editor-timeline-layers{grid-area:layers;display:grid;grid-template-columns:var(--timeline-header-width) 1fr;grid-template-rows:auto;column-gap:var(--timeline-gap);row-gap:2px;flex:1 1 0px;width:100%;overflow-x:scroll;align-content:start;position:relative;&::-webkit-scrollbar{-webkit-appearance:none;height:8px;width:8px}&::-webkit-scrollbar-thumb{border-radius:4px;background-color:var(--scrollbar-thumb-color)}}editor-timeline-layer{display:grid;grid-template-columns:subgrid;grid-column:1 / -1;align-items:stretch;--layer-height: 40px;height:var(--layer-height);gap:5px;&[data-selected]{editor-timeline-layer-header{border:1px solid #000000DD;background:#171715}editor-timeline-layer-track editor-timeline-layer-track-inner{outline-color:#fff5}}&:not([data-enabled]){opacity:.5}editor-timeline-layer-header{display:flex;flex-flow:row nowrap;align-items:center;gap:2px;width:var(--timeline-header-width);flex:0 0 auto;position:sticky;left:0;z-index:1;padding:0 10px;border-radius:3px;background:#1b1b18;border:1px solid transparent;.drag{opacity:.7;cursor:grab;&:active{cursor:grabbing}}>span{flex:1 1 0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}scrptly-icon.clickable:not(.visible){display:none}scrptly-icon.clickable{cursor:pointer;font-size:1.2em;opacity:.7;&:hover{opacity:1}}}&:hover editor-timeline-layer-header>scrptly-icon.clickable{display:inline-flex}editor-timeline-layer-track{display:flex;flex-flow:row nowrap;align-self:stretch;position:relative;width:calc(50vw - var(--timeline-header-width) + max(var(--frame),var(--timeline-duration)) * var(--timeline-scale) * 1px);editor-timeline-layer-track-inner{display:flex;flex-flow:row nowrap;margin:6px 0;transform:translate(calc(var(--start-time) * var(--timeline-scale) * 1px));min-width:calc((var(--end-time) - var(--start-time)) * var(--timeline-scale) * 1px);background:#55879c;border-radius:6px;outline:3px solid #00000022;outline-offset:-3px;position:relative;editor-timeline-layer-track-trimstart,editor-timeline-layer-track-trimend{position:absolute;top:0;bottom:0;left:0;width:4px;cursor:ew-resize;z-index:1}editor-timeline-layer-track-trimend{left:auto;right:0}editor-timeline-layer-track-keyframes{display:block;position:absolute;bottom:0;width:100%;editor-timeline-layer-track-keyframe{display:block;width:5px;height:5px;background:var(--primary-color);position:absolute;bottom:6px;left:-2.5px;transform:translate(calc((var(--frame) - var(--start-time)) * var(--timeline-scale) * 1px)) rotate(45deg)}}editor-timeline-layer-track-tts{display:block;position:absolute;inset:3px 0;editor-timeline-layer-track-tts-entry{display:flex;flex-flow:row nowrap;align-items:center;font-size:.9em;position:absolute;top:0;bottom:0;left:0;width:calc(var(--tts-duration) * var(--timeline-scale) * 1px);min-width:23px;background-color:#2f2f2fb3;border-radius:3px;padding:3px;transform:translate(calc((var(--tts-start)) * var(--timeline-scale) * 1px));cursor:pointer;&:hover{background-color:#2f2f2f;z-index:2}&:active{background-color:#1b1b1b}>scrptly-icon{cursor:grab;&:active{cursor:grabbing}}strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}}.add{display:none;position:absolute;cursor:pointer;background-color:#0001;border-radius:3px;color:#fff;height:100%;top:50%;left:0;transform:translate(max(3px,calc(var(--pos, 0px) - 50%)),-50%);&:hover{background-color:#0002}&:active{background-color:#0004}}}}}}}editor-loading{position:fixed;inset:0;display:flex;flex-flow:column nowrap;gap:5px;align-items:center;justify-content:center;background:#0005;z-index:1500;&:before{content:"";--color: #FFFFFF99;--width: 2px;--size: 21px}}editor-exporting{position:fixed;inset:0;display:flex;flex-flow:column nowrap;gap:10px;align-items:center;justify-content:center;background:#000000c7;backdrop-filter:blur(4px);z-index:1500;scrptly-loading{--color: #FFFFFF;--width:2px;--size: 21px}editor-exporting-message{font-size:1.2em;font-weight:500;color:#fff;text-align:center}editor-exporting-progress{width:90%;max-width:250px;height:4px;background-color:#fff2;border-radius:2px;overflow:hidden;position:relative;margin:15px 0;&:before{content:"";position:absolute;top:0;left:0;height:100%;background-color:var(--primary-color);width:calc(var(--progress, 0) * 100%)}}}editor-export-result{display:flex;flex-flow:column nowrap;gap:10px;align-items:stretch;video{max-width:80vw;max-height:70vh;border-radius:5px;box-shadow:0 0 10px #0005;align-self:center}}input-number,input-checkbox,input-slider,input-dropdown,input-color,input-options{label{display:block;font-weight:500;font-size:.8em}}input-number{display:flex;flex-flow:row nowrap;align-items:center;gap:4px;label{flex:0 0 auto}input[type]{flex:1 1 0px;width:0px;padding:4px 6px;text-align:right;&:not(:focus){cursor:ew-resize}}select{flex-grow:0;width:auto;min-width:55px}em{font-style:normal;font-weight:500;font-size:.8em}}input-slider{display:flex;flex-flow:row nowrap;align-items:center;user-select:none;--track-height: 2px;--handle-size: 12px;gap:5px;&[data-no-value]{opacity:.5}input-slider-track{display:block;position:relative;height:var(--track-height);flex:1 1 0px;background:#fff3;border-radius:3px;margin:calc(var(--handle-size) / 2 - var(--track-height)) calc(var(--handle-size) / 2);cursor:pointer;input-slider-handle{position:absolute;top:50%;left:calc(((var(--input-slider-value, 0) - var(--input-slider-min, 0)) / (var(--input-slider-max, 100) - var(--input-slider-min, 0))) * 100%);transform:translate(-50%,-50%);width:var(--handle-size);height:var(--handle-size);background-color:#ddd;border-radius:50%;cursor:grab;&:hover{background-color:#fff;cursor:grabbing}}}input-slider-value{display:block;text-align:right;font-size:1rem;min-width:32px;font-size:.8em;font-weight:600}}input-checkbox{display:flex;flex-flow:row nowrap;align-items:center;justify-content:start;cursor:pointer;gap:6px}input-color{display:flex;position:relative;input-color-button{display:flex;flex-flow:row nowrap;align-items:center;gap:6px;cursor:pointer;font-weight:600;font-size:.9em;font-variant-ligatures:none;&:before{content:"";display:inline-block;width:20px;height:20px;border-radius:4px;background-image:linear-gradient(var(--color, #00000000),var(--color, #00000000)),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAAAXNSR0IB2cksfwAAAAlwSFlzAAACdgAAAnYB2mDjTwAAAAZQTFRFyMjI////Mv5m9wAAABFJREFUeJxjYD/AgIx+MCAjAHyDCLzxvglZAAAAAElFTkSuQmCC);background-size:16px 16px;background-repeat:repeat;background-position:0px 0px}}input-color-popup{position:absolute;width:230px;top:calc(100% + 5px);right:0;background-color:#fff;padding:4px;border-radius:5px;z-index:1;.chrome-picker{width:auto!important;box-shadow:none!important}}}input-options{display:flex;flex-flow:row nowrap;align-items:stretch;input-options-option{cursor:pointer;border:1px solid #FFFFFF22;padding:4px 8px;font-size:.9em;&:first-child{border-top-left-radius:3px;border-bottom-left-radius:3px;border-right-width:0px}&:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}&:hover{background-color:#ffffff05}&[data-selected]{background-color:#fff2}}}input-font{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between;cursor:pointer;padding:6px 8px;border-radius:4px;color:#fff;background-color:#fff1;>span{display:block;flex:1 1 auto;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-family:var(--font-family, Arial)}}input-font-dialog{display:flex;flex-flow:column nowrap;align-items:stretch;gap:10px;input-font-list{display:flex;flex-flow:column nowrap;gap:8px;overflow:auto;max-height:calc(80vh - 400px);input-font-item{cursor:pointer;display:block;padding:10px 15px;border-radius:4px;border:2px solid #FFFFFF05;&[data-selected]{border-color:var(--primary-color);background-color:#fff1}&[data-status=failed]{font-weight:400!important;font-style:normal!important;color:#bf8080}}}input-font-preview{display:flex;flex-flow:column nowrap;gap:10px;min-width:min(90vw,max(600px,50vw));width:50vw}}input-asset{display:block;padding:5px;background:#0004;border-radius:8px;cursor:pointer;>img,>audio,>video{width:100%;height:100%;max-height:280px;border-radius:3px;vertical-align:middle;margin:0;object-fit:contain}>audio{min-height:40px}>em{text-align:center;display:block;margin:5px;font-weight:500}input-asset-actions{display:flex;flex-flow:row nowrap;align-items:center;padding-top:5px;button{flex-grow:1}}}media-picker-dialog{display:flex;flex-flow:column nowrap;gap:10px;media-picker-search{display:flex;flex-flow:column nowrap;align-items:stretch;gap:8px;input-options{align-self:center}}h3{text-align:center;margin:15px;grid-column:1 / -1}scrptly-dialog:has(&){width:80vw}}media-picker-assets{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;padding:10px 0}scrptly-menu{display:flex;flex-flow:column nowrap;align-items:stretch;gap:3px;scrptly-menu-item{display:flex;align-items:center;gap:4px;padding:3px 5px;border-radius:3px;cursor:pointer;&:hover{background-color:#fff1}&[data-icon]:before{content:attr(data-icon)}}}#fb-root{display:none}@media screen and (max-width: 1000px){body{gap:20px}main{>section,>form,>article{padding:20px}}scrptly-tabs{width:100%;min-width:0px}pricing-columns{grid-template-columns:repeat(3,1fr);pricing-features{display:none}}pricing-feature:before{display:block;content:attr(data-title);text-align:center;opacity:.8;font-weight:600;font-size:.8em}}@media screen and (max-width: 600px){body{padding:0}header{border-radius:0 0 30px 30px/0px 0px 30px 30px;mobile-head{display:flex}>scrptly-icon.menu{display:inline-flex}nav{display:none}}pricing-columns{display:flex;flex-flow:column nowrap;row-gap:15px;pricing-feature{flex-flow:row nowrap;padding:8px;&:before{flex:1}}}scrptly-uploader{h2{font-size:0px}h2:before{content:"Pick or Take a photo";font-size:24px}}blog-post-header{grid-template-areas:"title" "datetime" "summary" "image";grid-template-rows:auto}footer{footer-columns{flex-flow:column nowrap;justify-content:flex-start;footer-logo img{margin-right:0}}}}