:root{color:#1e1e1a;font-synthesis:none;text-rendering:geometricprecision;background:#f2efe7;font-family:Avenir Next,Avenir,Helvetica Neue,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}fieldset{border:0;margin:0;padding:0}.shell{background-color:#f2efe7;background-image:linear-gradient(90deg,#2f6f7314 1px,#0000 1px),linear-gradient(0deg,#2f6f7314 1px,#0000 1px),none;background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:42px 42px;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;min-height:100vh;padding:32px}.workspace{grid-template-columns:minmax(340px,480px) minmax(360px,1fr);align-items:stretch;gap:28px;width:min(1180px,100%);margin:0 auto;display:grid}.panel,.preview{background:#fffcf4eb;border:1px solid #d6cfbf;box-shadow:0 22px 70px #2e2a1f1f}.panel{padding:28px}.masthead p{color:#2f6f73;letter-spacing:.16em;text-transform:uppercase;margin:0 0 12px;font-size:12px;font-weight:800}.masthead h1{letter-spacing:0;margin:0 0 28px;font-family:Georgia,Times New Roman,serif;font-size:clamp(32px,4vw,54px);font-weight:700;line-height:.96}form{gap:18px;display:grid}label{gap:8px;display:grid}label span{color:#5a5345;font-size:13px;font-weight:800}input{color:#1f1d18;background:#fffdf7;border:1px solid #c8beaa;border-radius:2px;outline:none;width:100%;min-height:48px;padding:12px 13px}input:focus{border-color:#2f6f73;box-shadow:0 0 0 3px #2f6f7324}.upload{background:#faf6ea;border:1px dashed #aa9e86;padding:16px}.segmented{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.segmented label{cursor:pointer;background:#fffdf7;border:1px solid #c8beaa;place-items:center;min-height:54px;display:grid}.segmented label.active{color:#f8f3df;background:#1e1e1a;border-color:#1e1e1a}.segmented input{opacity:0;pointer-events:none;position:absolute}.segmented span{color:inherit;text-align:center}.format-picker{grid-template-columns:repeat(2,1fr);gap:10px;display:grid}.format-picker label{cursor:pointer;background:#fffdf7;border:1px solid #c8beaa;min-height:66px;padding:12px}.format-picker label.active{color:#f8f3df;background:#1e1e1a;border-color:#1e1e1a}.format-picker input{opacity:0;pointer-events:none;position:absolute}.format-picker span,.format-picker small{color:inherit}.format-picker span{font-size:14px;font-weight:900}.format-picker small{opacity:.72;font-size:12px;font-weight:800}.color-control{gap:12px;display:grid}.color-control legend{color:#5a5345;margin-bottom:8px;font-size:13px;font-weight:800}.swatches{grid-template-columns:repeat(6,42px);gap:10px;display:grid}.swatch{cursor:pointer;border:2px solid #fffdf7;border-radius:50%;width:42px;height:42px;box-shadow:0 0 0 1px #c8beaa}.swatch.active{box-shadow:0 0 0 3px #1e1e1a}.picker{grid-template-columns:1fr auto auto;align-items:center;gap:12px}.picker input{width:56px;min-height:42px;padding:4px}.picker strong{color:#5a5345;text-transform:uppercase;font-size:13px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.primary,.download{color:#17150f;cursor:pointer;background:#d4af37;border:0;border-radius:2px;place-items:center;min-height:52px;padding:0 18px;font-weight:900;text-decoration:none;display:inline-grid}.primary:disabled{cursor:not-allowed;opacity:.52}.error{color:#9b2c2c;margin:0;font-weight:800}.preview{background:#22201b;place-items:center;min-height:calc(100vh - 64px);padding:28px;display:grid}.result{gap:18px;width:min(100%,720px);display:grid}.result img,.frame{width:100%;display:block}.result img{object-fit:contain;background:#111;max-height:calc(100vh - 150px);box-shadow:0 24px 80px #00000047}.empty{width:min(100%,720px)}.frame{aspect-ratio:1;background:linear-gradient(135deg,#f8f3df1f,#0000 36%),#161511;border:1px solid #f8f3df57;place-items:center;display:grid}.frame-story{aspect-ratio:9/16;width:min(100%,360px);margin:0 auto}.frame span{color:#f8f3dfad;letter-spacing:.14em;font-size:13px;font-weight:800}@media (width<=900px){.shell{padding:16px}.workspace{grid-template-columns:1fr}.preview{min-height:auto}}@media (width<=560px){.panel,.preview{padding:18px}.grid,.segmented,.format-picker,.picker{grid-template-columns:1fr}.swatches{grid-template-columns:repeat(6,minmax(32px,42px))}}