@font-face{font-family:SSNPOswald;src:url(fonts/Oswald.ttf) format('truetype');font-weight:200 700;font-display:swap}@font-face{font-family:SSNPScript;src:url(fonts/KaushanScript.ttf) format('truetype');font-display:swap}@font-face{font-family:SSNPMali;src:url(fonts/Mali.ttf) format('truetype');font-display:swap}

.ssnp{box-sizing:border-box;display:grid;grid-template-columns:minmax(0,.775fr) minmax(0,1fr);gap:clamp(28px,5vw,88px);align-items:start;width:100%;max-width:1100px;margin:28px auto;text-align:left;font-family:inherit;color:#343731}
.ssnp *{box-sizing:border-box}
.ssnp .ssnp-form{margin:0;padding:20px;border:1px solid #e5e5e0;border-radius:16px;background:#fff;color:#343731;min-width:0}
.ssnp .ssnp-form h2{font-family:inherit;font-size:20px;font-weight:500;line-height:1.4;text-transform:uppercase;letter-spacing:0;margin:0 0 24px;color:inherit}
.ssnp .ssnp-form label{display:block;font-size:15px;line-height:1.4;font-weight:600;margin:0 0 16px}
.ssnp .ssnp-form input{display:block;width:100%;min-width:0;height:48px;padding:10px 12px;margin:10px 0 0;background:#fff;border:1px solid #ccc;border-radius:9px;color:#333;font-family:inherit;font-size:16px;line-height:1.4;box-shadow:0 0 1px #0001}
.ssnp .ssnp-form input::placeholder{color:#777;opacity:1}
.ssnp .ssnp-form fieldset{min-width:0;border:0;padding:0;margin:20px 0}
.ssnp .ssnp-form legend{float:none;width:auto;font-size:15px;line-height:1.4;font-weight:600;padding:0;margin:0 0 16px}
.ssnp .ssnp-form fieldset:first-of-type{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:9px}
.ssnp .ssnp-form fieldset:first-of-type legend{grid-column:1/-1}
.ssnp .ssnp-form fieldset:first-of-type label{font-size:13px;white-space:nowrap;margin-bottom:0}
.ssnp .ssnp-themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.ssnp .ssnp-theme{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:54px;background:#fff;color:#353535;border:2px solid #ddd;border-radius:9px;padding:7px 3px;font-family:inherit;font-size:12px;line-height:1.2;font-weight:400;letter-spacing:0;text-transform:uppercase;cursor:pointer;box-shadow:none}
.ssnp .ssnp-theme[aria-pressed=true]{border-color:#536d4e;outline:1px solid #536d4e}
.ssnp .ssnp-swatch{display:flex;justify-content:center;margin-bottom:4px}
.ssnp .ssnp-swatch i{display:block;width:20px;height:20px}
.ssnp .ssnp-actions{display:flex;gap:10px;flex-wrap:wrap;margin:0}
.ssnp .ssnp-actions button{background:#8fbf88;color:#fff;border:0;border-radius:8px;padding:12px 15px;font-family:inherit;font-size:17px;line-height:1.3;letter-spacing:0;text-transform:uppercase;cursor:pointer;font-weight:600;box-shadow:none}
.ssnp button:disabled{opacity:.5;cursor:wait}
.ssnp button:focus-visible,.ssnp input:focus-visible{outline:3px solid #3f663a;outline-offset:3px}
.ssnp .ssnp-status{font-size:12px;line-height:1.6;margin:10px 0 22px}
.ssnp .ssnp-help{font-size:12px;line-height:1.7;color:#777;margin:0 0 20px}
.ssnp .ssnp-preview{min-width:0;position:sticky;top:44px;align-self:start}
.ssnp .ssnp-preview canvas{display:block;width:100%;height:auto;max-width:100%;aspect-ratio:210/297;box-shadow:0 5px 24px #0002}
.ssnp .ssnp-preview p{text-align:center;font-size:12px;line-height:1.5;color:#777;margin:12px 0 0}
@media(min-width:701px) and (max-width:950px){.ssnp{gap:24px;grid-template-columns:minmax(0,.9fr) minmax(0,1fr)}.ssnp .ssnp-form{padding:16px}.ssnp .ssnp-form h2{font-size:17px}.ssnp .ssnp-actions button{font-size:14px;padding:11px}.ssnp .ssnp-form fieldset:first-of-type label{font-size:11px}}
@media(max-width:700px){.ssnp{grid-template-columns:1fr;gap:18px;max-width:520px;margin:18px auto}.ssnp .ssnp-preview{position:static;grid-row:1;display:flex;flex-direction:column;align-items:center}.ssnp .ssnp-preview canvas{width:auto;max-width:100%;max-height:38dvh;object-fit:contain}.ssnp .ssnp-form{padding:18px}.ssnp .ssnp-form h2{font-size:18px}.ssnp .ssnp-actions button{font-size:15px}.ssnp .ssnp-form fieldset:first-of-type label{font-size:12px}}

/* Separate numeric fields keep date/time punctuation outside editable text. */
.ssnp .ssnp-field{margin:0 0 16px;min-width:0}.ssnp .ssnp-field-label{display:block;font-size:15px;line-height:1.4;font-weight:600}.ssnp .ssnp-segments{display:flex;align-items:center;justify-content:flex-start;gap:2px;height:48px;margin-top:10px;padding:0 8px;background:#fff;border:1px solid #ccc;border-radius:9px;color:#333;box-shadow:0 0 1px #0001}.ssnp .ssnp-form .ssnp-segments input{display:block;flex:0 1 2.2em;width:2.2em;min-width:0;height:38px;margin:0;padding:4px 1px;text-align:center;border:0;border-radius:4px;box-shadow:none;background:transparent;font-size:16px}.ssnp .ssnp-form .ssnp-segments .ssnp-year{flex-basis:3.5em;width:3.5em}.ssnp .ssnp-segments>span{flex:none;user-select:none;font-size:16px;font-weight:600}.ssnp .ssnp-segments:focus-within{outline:2px solid #3f663a;outline-offset:2px}.ssnp .ssnp-segments input:focus-visible{outline:1px solid #8fbf88;outline-offset:0}.ssnp .ssnp-form fieldset:first-of-type .ssnp-field{margin:0}.ssnp .ssnp-form fieldset:first-of-type .ssnp-field-label{font-size:13px;white-space:nowrap}@media(max-width:950px){.ssnp .ssnp-segments{padding:0 4px;gap:0}.ssnp .ssnp-form fieldset:first-of-type .ssnp-field-label{font-size:12px}}