:root{color-scheme:light;--bg:#faf9f7;--surface:#fff;--ink:#272824;--muted:#87877f;--border:#e9e8e3;--sub:#f5f4f1;--accent:#dbeac5;--radius:17px;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink)}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}a{color:inherit;text-decoration:none}.hidden{display:none!important}.site-shell{min-height:100vh}.topbar{height:80px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 40px;max-width:1040px;margin:auto}.brand{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:750;letter-spacing:-.35px}.brand img{border-radius:9px}.brand span{display:flex;flex-direction:column;gap:3px}.brand small{font-size:8px;letter-spacing:1.8px;color:#a2a19b;font-weight:650}.beta-pill{border:1px solid var(--border);border-radius:100px;padding:7px 11px;color:#77786f;font-size:10px;font-weight:600}.workbench{width:min(100% - 36px,620px);margin:0 auto}.intro{padding:46px 7px 33px}.eyebrow{font-size:10px;letter-spacing:2px;color:#8b8c82;font-weight:750;display:flex;align-items:center;gap:9px}.eyebrow-dot{width:6px;height:6px;border-radius:50%;background:#8eb676;display:inline-block;flex:none}.intro h1{font-size:clamp(36px,7vw,50px);line-height:1.27;letter-spacing:-2.8px;margin:19px 0 13px;font-weight:790}.intro h1 em{font-style:normal;color:#829d74}.intro p{font-size:13px;line-height:1.9;margin:0;color:#777971}.flow-steps{display:flex;align-items:center;gap:10px;margin-top:27px;color:#767871;font-size:10px}.flow-steps span{white-space:nowrap}.flow-steps b{color:#9aaf84;margin-right:3px}.flow-steps i{height:1px;background:#d9d8d2;flex:1;max-width:42px}.section-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:25px 25px 23px;margin-bottom:13px;box-shadow:0 4px 22px #28242004}.section-head{display:flex;gap:13px;align-items:flex-start;margin-bottom:22px}.step-index{display:grid;place-items:center;background:#f0f0eb;border-radius:9px;color:#75776d;width:30px;height:30px;flex:none;font-size:11px;font-weight:800;letter-spacing:.2px}.section-head h2{font-size:17px;letter-spacing:-.6px;margin:2px 0 6px}.section-head p{font-size:11px;color:#999a91;margin:0;line-height:1.65}.required,.optional{font-size:10px;font-weight:550;color:#9a9b93;vertical-align:middle;margin-left:5px}.required{color:#809b74}.upload-field{border:1.5px dashed #d8d8d1;background:#fcfcfb;min-height:196px;border-radius:12px;position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;transition:.2s}.upload-field:hover,.upload-field:focus-within{border-color:#91ab81;background:#fafbf8}.upload-field input,.reference-upload input{position:absolute;width:100%;height:100%;opacity:0;inset:0;cursor:pointer}.upload-placeholder{display:flex;flex-direction:column;align-items:center;gap:9px;pointer-events:none}.upload-icon{width:42px;height:42px;border:1px solid #e4e6df;background:#f3f4f0;display:grid;place-items:center;border-radius:12px;font-size:25px;font-weight:300;color:#7e9274}.upload-placeholder strong{font-size:13px}.upload-placeholder small{font-size:10px;color:#a7a89e}.upload-preview{height:280px;width:100%;display:block;position:relative;pointer-events:none;background:repeating-conic-gradient(#f5f5f2 0% 25%,#e9e9e6 0% 50%) 50%/20px 20px}.upload-preview img{width:100%;height:100%;object-fit:contain}.image-chip{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);background:#fffef7eb;border:1px solid #eee9dd;border-radius:100px;padding:7px 12px;font-size:10px;white-space:nowrap}.image-meta{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:10px;font-size:11px;color:#8a8b83}.image-meta span{max-width:75%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-action{border:0;background:none;color:#8b715d;font-size:11px}.helper{font-size:10px;line-height:1.75;color:#9b9b92;margin:14px 0 0}.helper-icon{font-size:12px;margin-right:4px}.field-label{display:block;font-size:11px;font-weight:720;color:#66685e;margin:0 0 9px}.section-card input:not([type=file]):not([type=radio]):not([type=checkbox]):not([type=color]),.section-card textarea,.editor-card select,.export-row select{width:100%;border:1px solid #e9e9e4;background:#fdfdfa;border-radius:9px;padding:12px 12px;color:#2f302a;outline:0;font-size:12px;transition:border-color .15s}.section-card textarea{resize:vertical;line-height:1.75;min-height:94px}.section-card input:focus,.section-card textarea:focus,.editor-card select:focus,.export-row select:focus{border-color:#98af89!important;box-shadow:0 0 0 3px #dceacd50}.section-card input::placeholder,.section-card textarea::placeholder{color:#b2b3ab}.inline-actions{display:flex;align-items:center;justify-content:space-between;margin:9px 0 22px;gap:8px}.soft-button{border:1px solid #e5e6df;background:#f7f8f4;color:#66765a;padding:9px 12px;border-radius:8px;font-size:11px;font-weight:650}.soft-button.full{width:100%;margin-top:9px}.muted-note{font-size:10px;color:#aaaba1}.fields-group{display:grid;gap:9px}.fields-group .field-label{margin:1px 0 -2px}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid #efefea;margin-top:22px;padding-top:20px}.toggle-row strong{font-size:12px;display:block}.toggle-row small{font-size:10px;line-height:1.7;display:block;color:#9c9d93;margin-top:4px}.switch{width:43px;height:26px;position:relative;flex:none}.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;z-index:1;cursor:pointer}.switch span{display:block;background:#e1e2dd;border-radius:30px;height:26px;transition:background .15s}.switch span:after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 4px #0002;transition:transform .15s}.switch input:checked+span{background:#90ac78}.switch input:checked+span:after{transform:translateX(17px)}.switch input:focus-visible+span{outline:3px solid #a6c99e}.conditional-panel{background:#fafbf8;border-radius:10px;padding:11px;margin-top:13px}.micro-copy{font-size:10px;color:#7d8976;line-height:1.7;margin:0}.reference-upload{position:relative;display:flex;align-items:center;gap:11px;background:#fbfbf9;border:1px dashed #dadbd4;border-radius:11px;padding:17px 14px;cursor:pointer}.reference-plus{display:grid;place-items:center;width:37px;height:37px;background:#f0f1eb;border-radius:9px;font-size:22px;color:#8b9a7d}.reference-upload strong{font-size:12px;display:block}.reference-upload small{font-size:10px;color:#9c9d93;display:block;margin-top:5px}.reference-arrow{margin-left:auto;color:#b3b5a9;font-size:14px}.reference-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}.reference-item{display:flex;align-items:center;gap:8px;min-width:0;padding:6px;border:1px solid var(--border);border-radius:9px}.reference-item img{height:52px;width:52px;object-fit:cover;border-radius:5px}.reference-item span{font-size:10px;color:#797b70;min-width:0;word-break:break-all;flex:1;max-height:45px;overflow:hidden}.reference-item button{border:0;background:#f4f3f0;border-radius:6px;width:24px;height:24px;flex:none;font-size:15px;color:#7d7f77}.type-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:22px}.type-option{border:1px solid #e7e8e2;border-radius:11px;display:flex;align-items:center;gap:9px;padding:13px 9px;position:relative;cursor:pointer;min-width:0}.type-option.selected{border-color:#96ac81;background:#f9fbf5}.type-option input,.style-option input{position:absolute;opacity:0;pointer-events:none}.type-option strong{font-size:11px;display:block;white-space:nowrap}.type-option small{font-size:9px;color:#9d9f95;display:block;margin-top:5px;white-space:nowrap}.type-drawing{width:23px;height:23px;flex:none;border-radius:3px;border:1px solid #b8bcb0;background:linear-gradient(145deg,#e5eadd 45%,#d5dbcd 46%);box-shadow:inset 0 -4px #b1bdb0}.type-drawing.portrait{height:29px;width:20px;margin:0 2px}.check-round{display:none;position:absolute;right:7px;top:7px;width:13px;height:13px;border-radius:50%;background:#8da879;color:white;font-size:9px;text-align:center;line-height:13px}.selected .check-round{display:block}.row-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}.row-head .field-label{margin:0}.row-head small{font-size:10px;color:#a6a79f}.size-grid{display:flex;flex-wrap:wrap;gap:7px}.size-pill{border:1px solid #e6e7e0;background:#fff;border-radius:8px;min-width:65px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:11px 7px;cursor:pointer;transition:.15s}.size-pill input{position:absolute;opacity:0;pointer-events:none}.size-pill strong{font-size:12px}.size-pill small{font-size:8px;color:#aaa99f}.size-pill.active{background:#f0f6e9;border-color:#8ba87b;color:#4b6742}.style-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-bottom:5px}.row-head:has(+ .style-grid){margin-top:23px}.style-option{position:relative;border:1px solid var(--border);border-radius:9px;cursor:pointer;padding:6px;display:flex;flex-direction:column;gap:7px;align-items:center}.style-option span:last-child{font-size:9px;color:#696b60;white-space:nowrap}.style-option.selected{border-color:#8eab7b;background:#f8faf4}.style-swatch{display:block;width:100%;height:39px;border-radius:5px}.swatch-minimal{background:linear-gradient(140deg,#eeeae2 0 57%,#cdd3c0 58%)}.swatch-premium{background:linear-gradient(120deg,#303530,#72735c 62%,#c2aa8f)}.swatch-promotion{background:linear-gradient(130deg,#ffebd0 0 35%,#e57b5c 35% 70%,#822f2b 70%)}.swatch-lifestyle{background:linear-gradient(135deg,#eee6da,#b5c5b0 55%,#817d6c)}.image-toggle{margin-top:26px}.mode-hint{margin:10px 0 0;font-size:10px;color:#8b9581;line-height:1.65}.password-label{margin-top:20px}.action-slot{margin:17px 0 36px}.primary-button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:52px;border:1px solid #252822;background:#252822;border-radius:10px;color:#fff;font-size:13px;font-weight:730;transition:transform .1s,background .2s}.primary-button:hover{background:#454a3f}.primary-button:active{transform:scale(.988)}.button-symbol{font-size:20px;color:#c3d5ad;font-weight:300}.button-arrow{font-size:17px;margin-left:auto;margin-right:16px}.primary-button .button-symbol{margin-left:auto}.action-footnote{text-align:center;color:#a1a197;font-size:10px;margin-top:13px}.result-section{padding:10px 0 18px;scroll-margin-top:20px}.result-heading{display:flex;align-items:end;justify-content:space-between;padding:8px 5px 19px}.result-heading h2{font-size:24px;letter-spacing:-1px;margin:10px 0 6px}.result-star{color:#96b486}.result-heading p{font-size:11px;color:#9b9b91;margin:0}.result-ready{border:1px solid #d8e5ce;background:#f2f8ed;border-radius:100px;font-size:10px;color:#68865c;padding:6px 10px;white-space:nowrap}.preview-surface{background:#ebebe6;border:1px solid #e8e7e1;border-radius:15px;padding:18px;display:flex;align-items:center;justify-content:center;min-height:330px;background-image:radial-gradient(#ddded9 1px,transparent 1px);background-size:15px 15px}.preview-surface canvas{display:block;max-width:100%;max-height:520px;width:auto;height:auto;box-shadow:0 13px 36px #21251a24;border-radius:2px}.preview-footer{display:flex;justify-content:space-between;padding:10px 3px 20px;font-size:10px;color:#8d8e85}.editor-card,.export-card{background:white;border:1px solid var(--border);border-radius:14px;padding:22px;margin-bottom:12px}.editor-heading{display:flex;flex-direction:column;gap:5px;margin-bottom:23px}.editor-heading strong{font-size:14px}.editor-heading small{font-size:10px;color:#9c9d94}.editor-card .field-label{margin-top:18px}.editor-card .field-label:first-of-type{margin-top:0}.color-control{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:9px;padding:8px 10px}.color-control input{border:none;background:none;width:31px;height:30px;padding:0;cursor:pointer}.color-control span{font-size:11px;color:#696b63}.color-control .muted-note{margin-left:auto;color:#a3a49b;font-size:9px}.export-size-grid{margin-bottom:18px}.export-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.export-row label{display:flex;flex-direction:column;gap:9px}.export-row label span{font-size:11px;font-weight:700}.export-buttons{display:flex;flex-direction:column;gap:9px;margin-top:19px}.export-buttons .primary-button{height:46px}.outline-button{width:100%;height:46px;background:white;border:1px solid #dcded5;border-radius:10px;font-size:12px;font-weight:650;color:#4f5948}.create-again{text-align:center;padding:20px 0}.create-again button{background:none;border:none;color:#7d9371;font-size:11px}.faq-mini{border-top:1px solid var(--border);display:flex;gap:9px;align-items:start;padding:21px 5px 30px}.faq-mini p{font-size:10px;line-height:1.9;color:#a0a198;margin:0}.small-mark{font-size:15px;color:#91ae83}.footer{border-top:1px solid var(--border);max-width:1040px;margin:0 auto;padding:21px 40px;display:flex;justify-content:space-between;gap:10px;font-size:10px;color:#b1b1a9}.toast{position:fixed;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:30;background:#2c3029;color:#fff;border-radius:12px;padding:12px 17px;box-shadow:0 8px 30px #0003;max-width:min(90vw,440px);width:max-content;font-size:12px;line-height:1.65;text-align:center}.toast.error{background:#793d35}.processing-overlay{position:fixed;z-index:40;inset:0;background:#f8f8f4eF;display:grid;place-items:center;padding:30px}.processing-content{text-align:center;width:min(100%,310px);display:flex;flex-direction:column;align-items:center}.processing-star{font-size:46px;color:#93aa81;animation:spin 3.5s linear infinite;margin-bottom:24px}.processing-content strong{font-size:19px;letter-spacing:-.7px}.processing-content p{font-size:11px;color:#939589;line-height:1.7;margin:12px 0 25px}.processing-content small{font-size:10px;color:#a5a79e;margin-top:20px}.processing-bar{height:4px;width:100%;border-radius:30px;background:#e5e8df;overflow:hidden}.processing-bar span{height:100%;width:40%;display:block;border-radius:30px;background:#89ae76;animation:progress 2.5s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes progress{0%{transform:translateX(-110%)}100%{transform:translateX(350%)}}@media(max-width:640px){.topbar{height:69px;padding:0 20px}.workbench{width:calc(100% - 28px)}.intro{padding:39px 7px 29px}.intro h1{font-size:39px;letter-spacing:-2.3px}.section-card{padding:21px 17px;margin-bottom:11px}.section-head{gap:10px}.style-grid{gap:5px}.style-option{padding:5px 3px}.size-pill{flex:1;min-width:55px;padding:11px 5px}.type-option{padding:12px 7px;gap:6px}.type-option strong{font-size:10px}.type-option small{font-size:8px}.footer{padding:19px 18px}.preview-surface{padding:11px;min-height:275px}}@media(max-width:355px){.intro h1{font-size:34px}.beta-pill{font-size:9px;padding:5px 7px}.type-drawing{display:none}.type-option small{white-space:normal}.style-option span:last-child{font-size:8px}.flow-steps{gap:6px;font-size:9px}}
.compact-top{margin-top:0;padding-top:0;border-top:none}.confirm-card{margin-top:16px;padding:14px;border:1px solid #ecebe6;border-radius:12px;background:#fbfbf8}.confirm-copy-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.confirm-copy-head strong{font-size:13px}.confirm-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:5px 10px;font-size:10px;background:#efefea;color:#7d7e74}.confirm-badge.is-confirmed{background:#eef7e8;color:#628151;border:1px solid #dcebd4}.confirm-button{margin-top:12px;height:46px}.no-top{margin-top:8px}.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.tag-pill{border:1px solid #e2e3dc;background:#f8f8f4;border-radius:999px;padding:8px 11px;font-size:11px;color:#6b6d63}code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.95em;background:#f3f4ef;padding:1px 5px;border-radius:6px}

/* Password entry is the only visible initial screen. Workspace appears after server verification. */
.access-screen{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:34px 20px 26px;background:#faf9f7}
.access-panel{background:white;border:1px solid #e9e8e3;border-radius:20px;box-shadow:0 15px 48px #2824200a;padding:33px 28px;width:min(100%,430px)}
.access-brand{display:flex;gap:12px;align-items:center;font-size:16px;font-weight:780;letter-spacing:-.4px}.access-brand img{border-radius:10px}.access-brand span{display:flex;flex-direction:column;gap:4px}.access-brand small{font-size:9px;letter-spacing:1.1px;font-weight:650;color:#a1a399}
.access-eyebrow{font-size:10px;font-weight:700;color:#829f71;letter-spacing:1.8px;margin-top:44px}.access-panel h1{font-size:clamp(29px,8vw,39px);line-height:1.32;letter-spacing:-1.8px;margin:17px 0 11px}.access-panel h1 em{font-style:normal;color:#83a071}.access-intro{margin:0 0 28px;line-height:1.8;font-size:12px;color:#85867d}
.access-form{display:flex;flex-direction:column;gap:10px}.access-form label{font-size:12px;font-weight:750}.access-form input{height:49px;border:1px solid #e4e4de;border-radius:10px;padding:0 14px;background:#fdfdfb;font-size:14px;outline:none}.access-form input:focus{border-color:#94ad83;box-shadow:0 0 0 3px #dceacd60}.access-form input::placeholder{color:#b1b2aa}
.access-button{height:49px;border:0;border-radius:10px;background:#272923;color:white;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:14px;margin-top:8px}.access-button:hover{background:#41463a}.access-button:disabled{opacity:.7}.access-note{border-top:1px solid #f0efe9;margin:25px 0 0;padding-top:17px;font-size:10px;line-height:1.8;color:#a0a198}.access-bottom{font-size:10px;color:#a5a79d;margin-top:24px;letter-spacing:1px}.access-error{font-size:11px;color:#ab554d;margin:2px 0 0;line-height:1.6}.lock-button{cursor:pointer;background:white}
@media(max-width:480px){.access-screen{padding:20px 14px 18px;justify-content:center}.access-panel{padding:29px 22px;border-radius:18px}.access-eyebrow{margin-top:38px}}

/* v1.3: art-directed full-bleed artwork, quiet Notion-style editor. */
.editor-card select{width:100%;border:1px solid #e9e9e4;background:#fdfdfa;border-radius:9px;padding:12px;color:#2f302a;outline:none;font-size:12px}
.editor-card select:focus{border-color:#98af89;box-shadow:0 0 0 3px #dceacd50}
.editor-card .field-label{margin-top:18px}.editor-card .field-label:first-of-type{margin-top:0}
#compositionHint,#artworkNotice{border-left:2px solid #a7bea0;padding-left:10px;line-height:1.75}
.preview-surface{padding:9px;background:#e4e4df;min-height:0}
.preview-surface canvas{max-height:660px;border-radius:3px;box-shadow:0 12px 30px #1018111d}
@media(max-width:640px){.preview-surface{padding:6px}.preview-surface canvas{max-height:540px}}

/* v1.4 direct-design overrides */
.preview-surface-direct{padding:14px;min-height:300px}
.result-image{display:block;max-width:100%;max-height:820px;width:auto;height:auto;border-radius:4px;box-shadow:0 13px 36px #21251a24;background:white}
.direct-result-card p{margin-top:0}
@media(max-width:640px){.preview-surface-direct{padding:8px;min-height:240px}.result-image{max-height:620px}}

/* v1.6 category: restrained Notion-like inline form treatment */
.category-label{margin-top:4px}
.category-select{display:block;width:100%;border:1px solid #e9e9e4;border-radius:9px;background:#fdfdfa;color:#2f302a;padding:12px;font-size:12px;outline:none}
.category-select:focus{border-color:#98af89;box-shadow:0 0 0 3px #dceacd50}
.category-hint{font-size:10px;line-height:1.65;color:#858d7e;margin:8px 0 22px}