*{padding:0;margin:0;outline:0;box-sizing:border-box}
a{cursor:pointer}
body{background:#eee;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:16px;color:#444;margin:0 10px}
.wrapper{background:#fff;border-radius:10px;margin:50px auto;width:100%;max-width:460px;padding:50px 40px;position:relative;box-shadow:0 30px 60px -12px rgba(50,50,93,.05), 0 18px 36px -18px rgba(0,0,0,.1), 0 -12px 36px -8px rgba(0,0,0,.005)}
.wrapper.wide{max-width:860px}
ul,ol{margin:20px 0 0 25px;width:100%;display:flex;flex-direction:column;gap:5px}
li{width:100%}
h2{font-size:20px;font-weight:600;margin:20px 0 -10px;color:#555}
a:not(.breadcrumbs){text-decoration:none;border-bottom:1px solid rgba(0,0,0,0);transition:border-color .2s ease;color:#6a64f6;background:linear-gradient(90deg,#6a64f6,#976acb);-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1;font-weight:500}
a:not(.breadcrumbs):hover{border-color:#976acb}
button,select,input:not([type="checkbox"]),textarea,[contenteditable]{width:100%;min-width:100%;display:block;background:#fff;border-radius:4px;border:1px solid #eee;padding:10px 20px;margin:20px 0 0;transition:border-color .2s ease}
[contenteditable]{height:37.6px}
input[type="radio"]{width:auto;min-width:0}
textarea{min-height:150px;resize:vertical}
label{width:100%;cursor:pointer;display:flex;margin:20px 0 -15px;font-size:12px;gap:5px;align-items:center}
span > label{margin-top:0}
label:has(input){margin-bottom:0}
input[type="file"]{cursor:pointer;padding:7px 20px}
select:focus,select:hover,input:focus,input:hover,textarea:focus,textarea:hover,[contenteditable]:hover{border-color:#976acb}
select:not([multiple]){appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 16px center;background-size:1em;cursor:pointer}
select[multiple]{resize:vertical;min-height:86px}
[disabled]{cursor:not-allowed}
.col-2{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin:20px 0 0;width:100%}
.col-2 > button,.col-2 > select,.col-2 > input,.col-2 > textarea,.col-2 > span,.col-2 > [contenteditable]{margin-top:0!important;flex:1;width:auto;min-width:0}
@property --from{syntax:'<color>';inherits:false;initial-value:red}
@property --to{syntax:'<color>';inherits:false;initial-value:red}
button{--from:#6a64f6;--to:#976acb;cursor:pointer;background:linear-gradient(90deg,var(--from) 0.44%,var(--to) 113.3%);color:#fff;border:0;font-weight:600;transition:--from .5s ease,--to .5s ease}
button:hover{--from:#4840ff;--to:#973aff}
h1{font-weight:800;color:#6a64f6;background:linear-gradient(90deg,#6a64f6,#976acb);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-size:33.6px;line-height:1}
.progress{width:100%;position:relative;height:4px;border-radius:2px;background:#eee;margin:10px 0 0}
.progress:before{content:'';position:absolute;top:0;left:0;height:100%;width:var(--progress);background:linear-gradient(90deg,#6a64f6,#976acb);border-radius:2px;transition:width .2s ease;z-index:1}
.progress:after{content:attr(data-text);font-size:12px;color:#bbb;top:100%;right:0;position:absolute;padding:3px 0 0}
#result{position:relative;margin:20px 0 0;width:100%}
.pauseplay{position:absolute;top:-2px;right:0;width:26px;min-width:26px;height:26px;padding:0;margin:0}
.pauseplay:after{content:'';position:absolute;top:8px;border:0;background:transparent;box-sizing:border-box;width:0;height:10px;border-color:transparent transparent transparent #fff;transition:100ms all ease;cursor:pointer;border-style:double;border-width:0 0 0 10px;left:8px}
.pauseplay.active:after{border-style:solid;border-width:5px 0 5px 7px;left:10px}
.download{margin:30px 0 0;display:none}
.half-width{width:calc(50% - 10px)}
form{display:flex;justify-content:space-between;flex-wrap:wrap}
.breadcrumbs{position:absolute;top:25px;font-size:12px;color:#777;text-decoration:none;border-bottom:1px dashed;opacity:.5;margin-left:15px}
.breadcrumbs:hover{opacity:.9}
.breadcrumbs:before{position:absolute;content:'←';top:0;left:-15px;width:15px}

.coolColor{
	font-weight: 600;
    color: #6a64f6;
    background: linear-gradient(90deg, #6a64f6, #976acb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
label{
	user-select: none;
}
label > input[type="checkbox"],
label > input[type="radio"]{
	display: none;
}
label:has( input[type="checkbox"] ),
label:has( input[type="radio"] ){
	padding-left: 23px;
	position: relative;
}
label:has( input[type="checkbox"] ):before,
label:has( input[type="radio"] ):before {
    content: '';
    position: absolute;
    display: block;
    width: 9px;
    height: 9px;
    border: 3px solid #fff;
    left: 3px;
    top: 1px;
    background: transparent;
    outline: 1px solid #6a64f6;
    transition: all .2s ease;
	border-radius: 1px;
}
label:has( input[type="radio"] ):before{
	border-radius: 35%;
}
label:has( input[type="checkbox"] ):hover:before,
label:has( input[type="radio"] ):hover:before{
	background: #ddd;
}
label:has( input[type="checkbox"]:checked ):before,
label:has( input[type="radio"]:checked ):before{
	background: #6a64f6;
}
.column-count-2{
    column-count: 2;
    display: block;
}
.column-count-2 li{
    margin-top: 5px;
}