:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light only;color:#000;background-color:#f7f7f9;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}aside *{box-sizing:border-box;margin:0;padding:0}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}#app{padding:0;display:flex;width:100%;height:100vh}#app aside{width:640px;min-width:640px;height:100%;padding:40px;box-sizing:border-box;overflow:auto}#app aside h1{font-size:32px;line-height:44px;padding-top:24px;padding-bottom:8px}#app aside p{padding-bottom:16px}#app aside .avatar-grid{display:flex;gap:4px;flex-wrap:wrap;flex:1}#app aside .avatar-grid .no-avatar{display:block;width:40px;height:40px;background:#e0e0e0 linear-gradient(to top right,transparent calc(50% - .5px),#bbb calc(50% - .5px),#bbb calc(50% + .5px),transparent calc(50% + .5px))}#app aside .avatar-grid>div{position:relative}#app aside .avatar-grid>div img,#app aside .avatar-grid>div .no-avatar{display:block;position:relative;pointer-events:none;opacity:.5}:is(#app aside .avatar-grid>div img,#app aside .avatar-grid>div .no-avatar):after{content:"";display:block;position:absolute;inset:0;border:2px solid transparent;pointer-events:none}#app aside .avatar-grid>div input{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer}#app aside .avatar-grid>div input:checked+img,#app aside .avatar-grid>div input:checked+.no-avatar{opacity:1;outline:2px solid #1A42E8;outline-offset:0}#app aside fieldset{border:none;margin:0;padding:0 0 8px;display:flex;align-items:baseline;gap:12px}#app aside fieldset label{font-size:12px;width:140px;min-width:140px;display:block}#app aside fieldset label.toggle{width:40px;min-width:40px}#app aside fieldset input,#app aside fieldset select{padding:4px 12px;border:0;border-bottom:1px solid #E0E0E0;background:#fff;width:100%;line-height:24px;font-size:14px;flex:1;height:33px;box-sizing:border-box}:is(#app aside fieldset input,#app aside fieldset select):focus-visible{outline:none;border-bottom:1px solid #1A42E8}#app aside fieldset textarea{padding:4px 12px;border:0;border-bottom:1px solid #E0E0E0;background:#fff;width:100%;line-height:20px;font-size:12px;flex:1;resize:vertical;font-family:inherit}#app aside fieldset textarea:focus-visible{outline:none;border-bottom:1px solid #1A42E8}#app aside fieldset:has(.avatar-grid){align-items:flex-start}#app .Preview{box-sizing:border-box;height:100%;width:-webkit-fill-available;border-left:1px solid #E0E0E0;padding:40px;background:#fff}#app .Preview #signature{max-width:600px;margin:0 auto}.toggle{position:relative;display:inline-block;width:40px;min-width:40px;max-width:40px;height:22px;flex:none;cursor:pointer}.toggle input{opacity:0;width:0;height:0;position:absolute}.toggle .toggle-slider{position:absolute;inset:0;background:#ccc;border-radius:22px;transition:background .2s}.toggle .toggle-slider:before{content:"";position:absolute;width:16px;height:16px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:transform .2s}.toggle input:checked+.toggle-slider{background:#1a42e8}.toggle input:checked+.toggle-slider:before{transform:translate(18px)}.button{padding:8px 16px;font-size:14px;background:#1a42e8;color:#fff;border:none;cursor:pointer;display:block;width:100%;margin-top:16px;transition:background .2s}.button.copied{background:#16a34a}