#blayer,.no-scroll{left:0;right:0}h1 em,h1 span{width:fit-content;display:block}body,h1 span{background:#fdfdfd}h1 b,h1 span{color:#f5a883}#copyright,aside,details,figcaption,figure,footer,h1,h1 em,h1 span,header,hgroup,menu,nav,section{display:block}#copyright,#copyright a,button,h1 em{color:#41403e}@keyframes fadein{0%{opacity:0}to{opacity:1}}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,canvas,caption,center,cite,code,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,summary,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;line-height:initial;vertical-align:baseline}body,dd,sub,sup{margin:0;padding:0;border:0;font:inherit;line-height:1}dd,sub,sup{line-height:initial}body,dd{vertical-align:baseline}dd{margin:0 0 0 20px}html{scroll-behavior:smooth}a{text-decoration-skip-ink:auto;text-decoration:none}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before{content:none}q{display:inline}q:after,q:before{content:'"';font-style:normal}big{font-size:120%}small,sub,sup{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,s,strike{text-decoration:line-through}dt{font-weight:700}address,cite,q,var{font-style:italic}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;transition:.5s}.screen-reader-text{clip:rect(1px,1px,1px,1px);position:absolute!important}.aside-close,.aside-toggle{height:45px;background:0 0;border:0;top:0}.aside-toggle{width:50px;position:fixed;left:0;padding:11px 9px;z-index:2;cursor:pointer}.aside-toggle span{border-radius:1px;margin-bottom:8px}.aside-close{width:45px;position:absolute;right:5px;padding:12px;z-index:1}.aside-close span,.aside-toggle span{background:#111;display:block;width:32px;height:2px}.aside-close span:first-child{transform:rotate(45deg)}.aside-close span:nth-child(2){transform:rotate(-45deg);margin-top:-2px}#blayer,#sidebar,.no-scroll{position:fixed;top:0;bottom:0}.credits,h1 span{position:absolute}#sidebar{height:100vh;width:320px;left:-335px;background:#fff;z-index:11;box-shadow:0 0 15px rgba(0,0,0,.8)}#blayer{opacity:0;transition:.3s ease-in-out;background:rgba(0,0,0,.88);box-shadow:inset 0 0 150px #000;pointer-events:none;z-index:9}#blayer.active{opacity:1;pointer-events:all}article{display:inline-block}.credits{bottom:8px;left:8px;width:100%;font-size:.7em}.credits,.credits a{color:rgb(0,0,0,.7)}@font-face{font-family:Quicksand;font-style:normal;font-weight:400;src:url('fonts/quicksand-v28-latin-regular.eot');src:local(''),url('fonts/quicksand-v28-latin-regular.eot?#iefix') format('embedded-opentype'),url('fonts/quicksand-v28-latin-regular.woff2') format('woff2'),url('fonts/quicksand-v28-latin-regular.woff') format('woff'),url('fonts/quicksand-v28-latin-regular.ttf') format('truetype'),url('fonts/quicksand-v28-latin-regular.svg#Quicksand') format('svg')}@font-face{font-family:Quicksand;font-style:normal;font-weight:600;src:url('fonts/quicksand-v28-latin-600.eot');src:local(''),url('fonts/quicksand-v28-latin-600.eot?#iefix') format('embedded-opentype'),url('fonts/quicksand-v28-latin-600.woff2') format('woff2'),url('fonts/quicksand-v28-latin-600.woff') format('woff'),url('fonts/quicksand-v28-latin-600.ttf') format('truetype'),url('fonts/quicksand-v28-latin-600.svg#Quicksand') format('svg')}@font-face{font-display:swap;font-family:Courgette;font-style:normal;font-weight:400;src:url('fonts/Courgette-Regular.ttf') format('truetype')}body *{font-family:Quicksand}h1{margin:48px auto!important;width:323.2px}h1,h1 b,h1 em{font-family:Courier,monospace;font-weight:400;font-size:54px}button,input,textarea{font-family:Quicksand;font-size:18px}h1 em{border:4px solid #41403e;border-radius:10px;padding:9px 24px 3px;letter-spacing:1px;font-style:inherit}h1 span{font-family:Courgette;font-size:34px;font-weight:700;margin-top:-26px;margin-left:calc((362px - 116.28px)/ 2);height:36px;padding:0 6px}input,textarea{background:inherit;padding:6px 12px;border-radius:2px;border:unset;border-bottom:1px solid #dcdcdc;resize:none}input:focus,textarea:focus{outline:0;border-color:#f5a883}button{outline:0;padding:10px 18px;background:#f5a883;border:none;border-radius:2px;cursor:pointer}button:hover{background:rgba(245,168,131,.8)}.header{margin-bottom:12px}.succes{color:#b7c06f;font-size:24px}.relative.group{background:#41403e;color:#fff;border-radius:2px}.modal{position:fixed;top:0;left:0;right:0;bottom:0;display:none;justify-content:center;align-items:center;background:rgba(255,255,255,.72)}.modal-content{max-width:400px;margin:48px auto;padding:48px;background:#fff;border-radius:2px;box-shadow:6px 6px 20px rgba(0,0,0,.3)}footer{height:108px;padding:1rem;display:flex;width:100%}#copyright{width:100%;font-size:15px;text-align:center;padding-bottom:20px;max-width:540px;margin:auto}#copyright a{font-size:inherit;border-bottom:1px dotted}

@keyframes fadein{0%{opacity:0}to{opacity:1}}
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,canvas,caption,center,cite,code,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,summary,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;line-height:initial;vertical-align:baseline}
body,dd,sub,sup{margin:0;padding:0;border:0;font:inherit;line-height:1}
dd,sub,sup{line-height:initial}
body,dd{vertical-align:baseline}
dd{margin:0 0 0 20px}
html{scroll-behavior:smooth}
a{text-decoration-skip-ink:auto;text-decoration:none}
button{outline:0}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:after,blockquote:before{content:none}
q{display:inline}
q:after,q:before{content:'"';font-style:normal}
big{font-size:120%}
small,sub,sup{font-size:80%}
sup{vertical-align:super}
sub{vertical-align:sub}
kbd,tt{font-family:courier;font-size:12px}
ins{text-decoration:underline}
del,s,strike{text-decoration:line-through}
dt{font-weight:700}
address,cite,q,var{font-style:italic}
aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;transition:background-color .3s ease, border-color .3s ease, color .3s ease}

body {
  background: #fdfdfd;
  font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #41403e;
  padding-bottom: 60px;
}

body * {
  font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, sans-serif;
}

h1 {
  margin: 48px auto 24px auto !important;
  width: 323.2px;
  display: block;
  position: relative;
}

h1, h1 em, h1 b {
  font-family: 'Courier', monospace;
  font-weight: normal;
  font-size: 54px;
}

h1 em {
  color: #41403E;
  border: 4px solid #41403E;
  border-radius: 10px;
  padding: 9px 24px 3px 24px;
  display: block;
  width: fit-content;
  letter-spacing: 1px;
  font-style: inherit;
  margin: 0 auto;
}

h1 b {
  color: #f5a883;
}

.subtitle {
  text-align: center;
  font-size: 16px;
  color: #666;
  margin-bottom: 36px;
}

.app-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}

.card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

.card-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #41403e;
  border-bottom: 2px solid #f3e6be;
  padding-bottom: 8px;
}

.dropzone {
  border: 2px dashed #f5a883;
  background: #fdfbf7;
  border-radius: 8px;
  padding: 36px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dropzone:hover, .dropzone.dragover {
  background: #f3e6be;
  border-color: #b7c06f;
}

.dropzone-icon {
  font-size: 38px;
  margin-bottom: 10px;
}

.dropzone-text {
  font-size: 18px;
  color: #41403e;
}

.control-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-weight: 600;
  font-size: 16px;
  color: #41403e;
}

select, input[type="number"], input[type="range"] {
  font-family: 'Quicksand', sans-serif;
  font-size: 16px;
  background: #fff;
  padding: 10px 12px;
  border-radius: 4px;
  border: 1px solid #dcdcdc;
  width: 100%;
}

select:focus, input[type="number"]:focus {
  outline: none;
  border-color: #f5a883;
}

.custom-dims {
  display: flex;
  gap: 10px;
}

.range-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.range-container span {
  font-weight: 600;
  min-width: 45px;
}

.btn-container {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  justify-content: flex-end;
}

button {
  font-family: 'Quicksand', sans-serif;
  font-size: 18px;
  padding: 12px 24px;
  background: #f5a883;
  color: #41403e;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
}

button:hover {
  background: #e0936e;
}

button.secondary {
  background: #dde0b6;
}

button.secondary:hover {
  background: #b7c06f;
}

.preview-wrapper {
  text-align: center;
  overflow-x: auto;
  padding: 10px;
  background: #f7f7f7;
  border-radius: 6px;
  border: 1px solid #eee;
}

canvas {
  max-width: 100%;
  height: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-radius: 2px;
  background: #ffffff;
}

footer {
  margin-top: 48px;
  padding: 1rem;
  display: flex;
  width: 100%;
}

#copyright {
  color: #41403e;
  width: 100%;
  font-size: 15px;
  text-align: center;
  max-width: 540px;
  margin: auto;
}