:root{color-scheme:light;--red: #c8102e;--red-dark: #8a1538;--blue: #005eb8;--blue-dark: #003a70;--green: #00843d;--ink: #111827;--text: #263238;--muted: #5f6f7a;--line: #d9e1e8;--surface: #ffffff;--page: #f4f6f8;--soft: #eef3f7;--radius-sm: 8px;--radius-md: 8px;--radius-lg: 8px;--space-1: .45rem;--space-2: .75rem;--space-3: 1rem;--space-4: 1.35rem;--shadow-soft: 0 10px 28px rgba(0, 58, 112, .07);--shadow-floating: 0 20px 52px rgba(0, 58, 112, .13);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{background:var(--page)}body{margin:0;background:linear-gradient(90deg,#c8102e14,#005eb814),linear-gradient(180deg,#ffffff 0,var(--page) 330px);color:var(--text)}button,input{font:inherit}button,label,canvas{-webkit-tap-highlight-color:transparent}button{transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease,transform .16s ease,opacity .16s ease}button:active{transform:scale(.985)}button:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid var(--ink);outline-offset:3px}.app{min-height:100svh}.header{align-items:center;background:#ffffffeb;border-bottom:1px solid rgba(0,58,112,.13);display:flex;gap:.68rem;height:52px;padding:0 var(--space-3);position:sticky;top:0;z-index:50;backdrop-filter:blur(18px)}.header:after{background:linear-gradient(90deg,var(--red),var(--blue));bottom:0;content:"";height:2px;left:0;position:absolute;right:0}.brand-mark{align-items:center;background:#fff;border:1px solid rgba(0,58,112,.18);border-radius:8px;box-shadow:0 4px 12px #003a701f;display:inline-flex;height:34px;justify-content:center;position:relative;width:34px}.brand-mark svg{height:25px;width:25px}.mark-shield{fill:#eaf4ff;stroke:var(--blue-dark);stroke-linejoin:round;stroke-width:1.7}.mark-cross{fill:none;stroke:var(--red);stroke-linecap:round;stroke-width:3.2}.mark-accent{fill:none;stroke:var(--green);stroke-linecap:round;stroke-width:2.2}.header strong{color:var(--ink);font-size:1.05rem;font-weight:900;letter-spacing:0}.workspace{display:flex;flex-direction:column;gap:var(--space-3);margin:0 auto;max-width:1180px;padding:var(--space-2)}.preview-column{display:grid;gap:var(--space-2);position:sticky;top:52px;z-index:20}.preview{background:#fffffff5;border:1px solid rgba(0,58,112,.12);border-radius:var(--radius-lg);box-shadow:var(--shadow-floating);padding:.58rem;position:relative;backdrop-filter:blur(18px)}.preview-canvas{aspect-ratio:1;background:#fff;border:1px solid var(--line);border-radius:8px;cursor:grab;display:block;height:auto;max-height:min(52svh,570px);touch-action:none;width:100%}.preview-canvas:active{cursor:grabbing}.preview-canvas.transparent{background-color:#fff;background-image:linear-gradient(45deg,#eeeeee 25%,transparent 25%),linear-gradient(-45deg,#eeeeee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eeeeee 75%),linear-gradient(-45deg,transparent 75%,#eeeeee 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px}.eye-button{align-items:center;background:#ffffffeb;border:1px solid rgba(0,58,112,.16);border-radius:8px;box-shadow:0 8px 22px #003a7021;color:var(--ink);cursor:pointer;display:flex;height:42px;justify-content:center;padding:0;position:absolute;right:1rem;top:1rem;width:42px}.eye-button svg{fill:none;height:21px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;width:21px}.eye-button.active{background:var(--red);border-color:var(--red);color:#fff}.toolbar{align-items:center;background:#ffffffe0;border:1px solid rgba(0,58,112,.1);border-radius:8px;color:var(--muted);display:flex;font-size:.82rem;font-weight:760;gap:var(--space-2);justify-content:center;line-height:1;padding:.65rem .85rem}.toolbar span+span{border-left:1px solid var(--line);padding-left:var(--space-2)}.flow{display:grid;gap:var(--space-2)}.panel{animation:panel-in .22s ease both;background:var(--surface);border:1px solid rgba(0,58,112,.1);border-radius:var(--radius-md);box-shadow:var(--shadow-soft);display:grid;gap:var(--space-2);padding:var(--space-3)}h2{color:var(--ink);font-size:1.05rem;font-weight:900;line-height:1.18;margin:0}.upload-card,.primary-button,.share-button,.ghost-button,.segmented button,.two-choice button,.style-card,.message-card{border-radius:var(--radius-sm);cursor:pointer;font-weight:850;min-height:52px}.upload-card{align-items:center;background:linear-gradient(180deg,#fff,#f9fbfd);border:1.5px dashed #c5d2dc;color:var(--ink);display:flex;gap:.75rem;justify-content:center;min-height:78px;padding:var(--space-3);position:relative;text-align:center}.upload-card:hover{border-color:#005eb86b;box-shadow:0 12px 30px #005eb814}.upload-card.compact{min-height:54px}.upload-card input{height:1px;opacity:0;position:absolute;width:1px}.upload-icon{align-items:center;background:#eaf4ff;border-radius:14px;color:var(--blue);display:inline-flex;height:42px;justify-content:center;width:42px}.upload-icon svg{fill:none;height:23px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.9;width:23px}.style-grid{display:grid;gap:.7rem;grid-template-columns:repeat(3,minmax(0,1fr))}.style-card{background:#fff;border:1px solid var(--line);color:var(--ink);display:grid;gap:.55rem;padding:.52rem;text-align:center}.style-card:hover,.message-card:hover{border-color:#005eb847;box-shadow:0 12px 26px #003a7014}.style-card.selected,.message-card.selected{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red),0 14px 30px #c8102e1c}.style-preview{aspect-ratio:1;background:#fff;border-radius:6px;display:block;overflow:hidden;width:100%}.style-card span{display:block;font-size:.86rem;line-height:1.12}.two-choice,.segmented{background:var(--soft);border-radius:8px;display:grid;gap:.35rem;padding:.35rem}.two-choice{grid-template-columns:repeat(2,1fr)}.segmented{grid-template-columns:repeat(3,1fr)}.two-choice button,.segmented button{background:transparent;border:1px solid transparent;color:var(--ink);padding:0 .55rem}.two-choice button.selected,.segmented button.selected{background:#fff;border-color:#005eb842;box-shadow:0 7px 18px #003a7014;color:var(--blue-dark)}.message-list{display:grid;gap:.55rem}.message-card{background:#fff;border:1px solid var(--line);color:var(--ink);line-height:1.22;padding:.82rem .9rem;text-align:left;white-space:pre-line}.color-row{display:flex;flex-wrap:wrap;gap:.7rem}.color-dot{border:2px solid var(--line);border-radius:999px;cursor:pointer;height:46px;width:46px}.compact-colors .color-dot{height:42px;width:42px}.color-dot.selected{border-color:var(--red);box-shadow:0 0 0 4px #c8102e29}.download-panel{gap:.62rem}.primary-button,.share-button,.ghost-button{width:100%}.primary-button{background:var(--red);border:1px solid var(--red);box-shadow:0 16px 34px #c8102e3d;color:#fff;font-size:1.02rem}.primary-button:hover{background:var(--red-dark);border-color:var(--red-dark)}.share-button{background:var(--blue-dark);border:1px solid var(--blue-dark);color:#fff}.ghost-button{background:transparent;border:1px solid transparent;color:var(--muted)}.ghost-button:hover{background:var(--soft);color:var(--ink)}.error{color:var(--red-dark);font-weight:850;margin:0}@keyframes panel-in{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@media(max-width:420px){.workspace{padding:.65rem}.preview{border-radius:8px;padding:.48rem}.preview-canvas{border-radius:8px;max-height:48svh}.toolbar{font-size:.76rem;padding:.58rem .68rem}.panel{padding:.9rem}.style-card{padding:.42rem}.style-card span{font-size:.76rem}}@media(min-width:860px){.header{height:60px;padding:0 1.5rem}.workspace{align-items:start;display:grid;gap:1.35rem;grid-template-columns:410px minmax(440px,1fr);padding:1.25rem}.preview-column{grid-column:2;position:sticky;top:78px}.flow{grid-column:1;grid-row:1}.preview-canvas{max-height:min(74svh,760px)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}