:root{--bone:#fbfaf9;--ink:#111;--ink-700:#3a3937;--ink-500:#6b6965;--ink-400:#8e8b86;--ink-300:#b6b2ac;--ink-200:#d9d6d1;--ink-100:#ebe8e4;--white:#fff;--spectrum-dark:linear-gradient(110deg, #a83f18, #9b2868, #5545ad, #08738a, #236b39, #a83f18);--spectrum-light:linear-gradient(110deg, #e7aa80, #ef99c7, #aba4ff, #80cddf, #9bdfa6, #e7aa80);--spectrum-soft:linear-gradient(110deg, #e7aa8020, #ef99c720, #aba4ff20, #80cddf20, #9bdfa620);--font-body:"Geist", Helvetica, Arial, sans-serif;--font-wordmark:"Space Grotesk", Helvetica, Arial, sans-serif;--ease-out:cubic-bezier(.22, .61, .36, 1)}*,:before,:after{box-sizing:border-box}html{font-size:16px}body{min-height:100vh;color:var(--ink);background:var(--bone);font-family:var(--font-body);letter-spacing:-.01em;-webkit-font-smoothing:antialiased;margin:0;font-weight:400;overflow:hidden}button,input,textarea{font:inherit}button{-webkit-tap-highlight-color:transparent}.workspace{grid-template-columns:minmax(390px,44%) 1fr;height:100dvh;min-height:0;display:grid;overflow:hidden}.editor-panel{z-index:1;background:var(--bone);border-right:1px solid var(--ink-200);overscroll-behavior:contain;padding:clamp(32px,5vw,72px) clamp(28px,6vw,92px);position:relative;overflow-y:auto}.product-lockup{align-items:center;gap:14px;min-height:28px;margin-bottom:clamp(32px,5vh,52px);display:flex}.wordmark{color:var(--ink);font:700 1.45rem/.88 var(--font-wordmark);letter-spacing:-.05em;align-items:center;display:inline-flex}.wordmark span{background:var(--spectrum-dark);-webkit-text-fill-color:transparent;background-size:300% 300%;-webkit-background-clip:text;background-clip:text;animation:5s ease-in-out infinite spectrum-shift}.product-divider{background:var(--ink-200);width:1px;height:22px}.product-name{color:var(--ink);letter-spacing:-.045em;margin:0;font-size:clamp(1.125rem,1.8vw,1.4rem);font-weight:700;line-height:1}.panel-intro{max-width:510px;margin-bottom:28px}.eyebrow{background:var(--spectrum-dark);-webkit-text-fill-color:transparent;letter-spacing:.04em;text-transform:uppercase;-webkit-background-clip:text;background-clip:text;width:fit-content;margin:0 0 13px;font-size:.75rem;font-weight:600;line-height:1.2}h2,p{margin-top:0}.panel-intro>p:last-child{max-width:420px;color:var(--ink-700);margin-bottom:0;font-size:1.0625rem;line-height:1.55}#signature-form{grid-template-columns:1fr 1fr;gap:21px 16px;max-width:560px;display:grid}.preset-field{max-width:560px;margin-bottom:21px}.preset-field>label{letter-spacing:-.01em;margin-bottom:8px;font-size:.8125rem;font-weight:600;display:block}.select-wrap{position:relative}.select-wrap select{appearance:none;width:100%;min-height:48px;color:var(--ink);background:linear-gradient(var(--white), var(--white)) padding-box, linear-gradient(var(--ink-200), var(--ink-200)) border-box;cursor:pointer;transition:box-shadow .16s var(--ease-out), background .16s var(--ease-out);border:1px solid #0000;border-radius:0;outline:none;padding:12px 42px 12px 14px}.select-wrap select:hover{background:linear-gradient(var(--white), var(--white)) padding-box, linear-gradient(var(--ink-400), var(--ink-400)) border-box}.select-wrap select:focus{background:linear-gradient(var(--white), var(--white)) padding-box, var(--spectrum-dark) border-box;box-shadow:0 0 0 3px #11111114}.select-wrap>span{color:var(--ink-500);pointer-events:none;position:absolute;top:50%;right:15px;transform:translateY(-58%)}.field{flex-direction:column;gap:8px;display:flex}.field.full{grid-column:1/-1}.field label{letter-spacing:-.01em;font-size:.8125rem;font-weight:600}.optional{color:var(--ink-400);margin-left:5px;font-size:.75rem;font-weight:400}.field input,.field textarea{width:100%;min-height:48px;color:var(--ink);background:linear-gradient(var(--white), var(--white)) padding-box, linear-gradient(var(--ink-200), var(--ink-200)) border-box;transition:box-shadow .16s var(--ease-out), background .16s var(--ease-out);border:1px solid #0000;border-radius:0;outline:none;padding:12px 14px}.field textarea{resize:vertical;min-height:108px}.field input:hover,.field textarea:hover{background:linear-gradient(var(--white), var(--white)) padding-box, linear-gradient(var(--ink-400), var(--ink-400)) border-box}.field input:focus,.field textarea:focus{background:linear-gradient(var(--white), var(--white)) padding-box, var(--spectrum-dark) border-box;box-shadow:0 0 0 3px #11111114}.field input::placeholder,.field textarea::placeholder{color:var(--ink-400)}.form-footer{border-top:1px solid var(--ink-200);justify-content:flex-start;align-items:center;gap:18px;max-width:560px;margin-top:30px;padding-top:22px;display:flex}.text-button{color:var(--ink);cursor:pointer;background:0 0;border:0;padding:0 0 3px;font-weight:600;position:relative}.text-button:after{content:"";background:var(--spectrum-dark);transform-origin:0;height:2px;transition:transform .24s var(--ease-out);position:absolute;inset:auto 0 0;transform:scaleX(0)}.text-button:hover:after,.text-button:focus-visible:after{transform:scaleX(1)}.preview-panel{min-width:0;min-height:0;color:var(--bone);overscroll-behavior:contain;background:#080808;flex-direction:column;padding:clamp(30px,4vw,58px);display:flex;overflow-y:auto}.preview-toolbar{justify-content:space-between;align-items:center;gap:24px;margin-bottom:25px;display:flex}.preview-toolbar h2{letter-spacing:-.03em;margin:0;font-size:1.25rem}.preview-controls{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.segmented-control{border:1px solid var(--ink-700);background:#151515;border-radius:999px;padding:4px;display:flex}.device-button,.mode-button{height:32px;color:var(--ink-400);letter-spacing:-.01em;cursor:pointer;background:0 0;border:0;border-radius:999px;justify-content:center;align-items:center;padding:0 13px;font-size:.75rem;font-weight:600;display:inline-flex}.device-button.active,.mode-button.active{color:var(--ink);background:var(--bone)}.copy-button svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:18px}.preview-stage{border:1px solid var(--ink-700);background-color:#111;background-image:radial-gradient(circle at 15% 20%,#e7aa8020,#0000 26%),radial-gradient(circle at 80% 18%,#aba4ff1c,#0000 26%),radial-gradient(circle at 75% 82%,#80cddf16,#0000 28%),radial-gradient(#fbfaf921 .7px,#0000 .8px);background-size:auto,auto,auto,18px 18px;border-radius:22px;flex:1;min-height:440px;overflow:auto}.preview-stage-inner{width:100%;min-height:100%;padding:clamp(18px,3vw,42px);display:flex}.mail-window{width:min(100%,650px);min-width:310px;color:var(--ink);background:var(--white);transition:width .3s var(--ease-out);border-radius:22px;flex:none;margin:auto;overflow:hidden;box-shadow:0 2px 4px #0000002e,0 26px 70px #00000061}.mail-window.mobile{width:340px}.mail-window.dark{color:#f4f2f0;background:#1c1c1e}.mail-chrome{border-bottom:1px solid var(--ink-100);background:#f4f2f0;align-items:center;gap:7px;height:42px;padding:0 16px;display:flex}.mail-chrome span{background:var(--ink-300);border-radius:50%;width:9px;height:9px}.mail-meta{border-bottom:1px solid var(--ink-100);align-items:center;gap:11px;padding:18px 22px;font:13px Arial,sans-serif;display:flex}.mail-meta strong,.mail-meta small{display:block}.mail-meta small{color:var(--ink-400);margin-top:3px}.avatar{background:var(--spectrum-dark);color:#fff;border-radius:50%;place-items:center;width:34px;height:34px;font-size:.68rem;font-weight:800;display:grid}.mail-body{color:#363d3a;min-height:325px;padding:clamp(24px,4%,42px);font:14px/1.5 Arial,sans-serif;overflow-x:auto}.mail-body>p{margin-bottom:25px}.mail-window.dark .mail-chrome{background:#262629;border-bottom-color:#39393d}.mail-window.dark .mail-chrome span{background:#5b5b60}.mail-window.dark .mail-meta{border-bottom-color:#39393d}.mail-window.dark .mail-meta small{color:#a8a8ad}.mail-window.dark .mail-body{color:#f4f2f0}#signature-preview{width:fit-content;max-width:100%}.copy-area{align-items:center;gap:20px;margin-top:22px;display:flex}.copy-button{isolation:isolate;min-height:50px;color:var(--ink);background:var(--bone);cursor:pointer;transition:transform 90ms var(--ease-out);border:0;border-radius:999px;align-items:center;gap:10px;padding:0 24px;font-weight:600;display:inline-flex;position:relative;overflow:hidden}.copy-button:before{content:"";z-index:-1;background:var(--spectrum-light);opacity:0;transition:opacity .5s var(--ease-out);background-size:300% 300%;animation:5s ease-in-out infinite spectrum-shift;position:absolute;inset:0}.copy-button:hover:before,.copy-button:focus-visible:before{opacity:1}.copy-button:active{transform:translateY(1px)}.copy-area p{max-width:330px;color:var(--ink-300);margin:0;font-size:.78rem;line-height:1.5}.toast{z-index:10;border:1px solid var(--ink-700);color:var(--bone);background:var(--ink);opacity:0;visibility:hidden;transition:.24s var(--ease-out);border-radius:999px;padding:13px 18px;font-size:.86rem;font-weight:600;position:fixed;bottom:26px;left:50%;transform:translate(-50%,20px);box-shadow:0 18px 44px #00000047}.toast.show{opacity:1;visibility:visible;transform:translate(-50%)}.config-error{max-width:620px;margin:15vh auto;padding:32px}.config-error h1{font-size:2.4rem}.config-error p{color:var(--ink-500)}@keyframes spectrum-shift{0%,to{background-position:0%}50%{background-position:100%}}@media (width<=900px){body{overflow:auto}.workspace{grid-template-columns:1fr;height:auto;min-height:100vh;overflow:visible}.editor-panel,.preview-panel{overscroll-behavior:auto;overflow:visible}.editor-panel{border-right:0;border-bottom:1px solid var(--ink-700)}.product-lockup{margin-bottom:52px}.preview-stage{min-height:500px}}@media (width<=600px){.editor-panel,.preview-panel{padding:32px 20px}.product-lockup{margin-bottom:32px}#signature-form{grid-template-columns:1fr}.field.full{grid-column:auto}.form-footer,.preview-toolbar{flex-direction:column;align-items:flex-start}.preview-controls{justify-content:flex-start}.preview-stage{border-radius:16px;min-height:430px}.preview-stage-inner{padding:12px}.mail-window{border-radius:16px;width:100%;min-width:0}.mail-body{padding:24px 18px}.copy-area{flex-direction:column;align-items:stretch}.copy-button{justify-content:center;width:100%}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation:none!important}}@media (forced-colors:active){.wordmark span,.eyebrow{-webkit-text-fill-color:currentColor;background:0 0}.copy-button:before{display:none}}