@font-face{font-family:Lora;src:url(fonts/lora.ttf);font-weight:100 900}@font-face{font-family:Nunito;src:url(fonts/nunito.ttf);font-weight:100 900}@font-face{font-family:Montserrat;src:url(font.ttf)}*{box-sizing:border-box}body{margin:0;background:#fff6ef;color:#35231b;font:14px Montserrat,Arial,sans-serif}main{max-width:580px;margin:auto;padding:18px 18px calc(24px + env(safe-area-inset-bottom))}header,.row,#slides{display:flex;gap:10px;align-items:center}header{justify-content:space-between;font-weight:700;font-size:22px}h1{font-size:24px;margin-bottom:8px}p{line-height:1.55}button,select{font:inherit;background:#fff;border:1px solid #f0d3c0;border-radius:12px;padding:11px;cursor:pointer;color:inherit}button:disabled{opacity:.5;cursor:default}button.active,.primary{background:#ff7847;color:white;border-color:#ff7847}#slides{overflow:auto;margin:12px 0}#slides button{flex-shrink:0}.stage{position:relative;border-radius:16px;overflow:hidden;background:#ead4c4;max-width:400px;margin:auto}canvas{display:block;width:100%;height:auto;touch-action:none}#preview{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}#preview[hidden]{display:none}section{margin-top:18px}.row{margin-bottom:12px}.row>*{flex:1;min-width:0}label{display:block;font-size:12px}input,select{display:block;width:100%;margin-top:9px}input[type=color]{height:40px;border:0;background:transparent}input[type=range]{accent-color:#ff7847}.primary{width:100%;font-weight:700}small{display:block;text-align:center;margin-top:12px;line-height:1.5}output{float:right}#status{min-height:44px;font-size:13px}
